/* GLOBAL */
:root {
    --primary-color: #1362a2;
    --secondary-color: #ed8c21;
    --secondary2-color: #f6ba64;
    --third-color: #7b9d3e;
    --primary-lt-color: #99c0da;
    --secondary-lt-color: #f9d299;
    --secondary2-lt-color: #fde3c6;
    --third-lt-color: #bdce7f;
    --site-container-width: 1600px;
}

html {
    height: 100%;
}

body {
    background-repeat: no-repeat;
    background-attachment: fixed;
    margin: auto;
    font-family: "Century Gothic", "Arial", "Gill Sans", sans-serif !important;
    background: var(--secondary2-lt-color) !important;
    /*background: radial-gradient( circle, rgba(246, 186, 100, 0.3757878151260504) 15%, rgba(249, 210, 153, 0) 100% ) !important;*/
    overflow-x: hidden;
}


/* MAIN */
main {
    padding-top: 130px;
}

    main h1, h2, h3, h4, h5, h6, h7 {
        text-transform: uppercase;
    }

    main .container-fluid {
        display: -webkit-flex;
        display: flex;
        -webkit-align-items: center;
        align-items: center;
        -webkit-justify-content: center;
        justify-content: center;
        flex-direction: column-reverse;
    }

@media screen and (max-width: 1600px) {
    .grid-home,
    .grid-page,
    .grid-report {
        max-width: 98%;
        grid-template-columns: 1fr;
    }
}
/* -------- */


/* HEADER */
header {
    z-index: 100;
    position: fixed;
    width: 100%;
    height: 92px;
    background-color: #fff;
    padding-top: 20px;
    font-size: 16px;
    font-weight: 500;
    text-decoration: none;
    text-transform: uppercase;
    box-shadow: 0 4px 20px -2px gray;
    transition: background 0.6s;
    padding-right: 15px !important;
    padding-left: 15px !important;
    margin-right: auto !important;
    margin-left: auto !important;
}

.header-left {
    text-align: left;
}

.header-center {
    text-align: center;
    align-self: center;
    justify-self: center;
}

.header-right {
    text-align: right;
    align-self: center;
}

header a {
    color: rgba(79, 72, 88, 0.87) !important;
}

    header a.logo {
        font-size: 25px;
        font-weight: bold;
    }

header.is-sticky {
    height: 70px !important;
    padding-top: 9px !important;
}

/* NAVIGATION */
.navbar-brand {
    margin-left: auto;
    margin-right: 80px;
    width: 124px;
    height: 50px;
    background-image: url("logo_vallen_blue.png");
    background-repeat: no-repeat;
}

.navbar-default {
    border: none !important;
    background-color: #fff !important;
    box-shadow: none !important;
    background-image: none !important;
}

button.navbar-toggle .icon-bar {
    background-color: var(--primary-color) !important;
}

.nav .open > a,
.nav .open > a:focus,
.nav .open > a:hover {
    border-radius: 24px !important;
    background: var(--primary-color) !important;
    color: #fff !important;
}

.nav > li > a:hover {
    text-decoration: none;
    outline: 2px solid var(--primary-lt-color) !important;
    border-radius: 24px !important;
    background-color: transparent !important;
}

.nav > li > a:focus {
    text-decoration: none;
    border-radius: 24px !important;
    background: var(--primary-color) !important;
    color: #fff !important;
}

/* ------------ */

/* DROPDOWN */
.dropdown-menu {
    min-width: 400px !important;
    padding: 30px !important;
    margin: 21px 0 !important;
    font-size: 16px !important;
    /*    line-height: 2.5 !important;*/
    border-radius: 24px !important;
}

    .dropdown-menu a:hover {
        border-radius: 24px !important;
        background: linear-gradient( 90deg, rgba(19, 98, 162, 1) 0%, rgba(153, 192, 218, 1) 100% ) !important;
        color: #fff !important;
    }

    .dropdown-menu > .active > a {
        border-radius: 24px !important;
        background-color: transparent !important;
        background: linear-gradient( 90deg, rgba(19, 98, 162, 1) 0%, rgba(153, 192, 218, 1) 100% ) !important;
        color: #fff !important;
    }

    .dropdown-menu li:not(:last-child) {
        margin-bottom: 8px !important;
    }

/* CURRENCY CONTROL*/
ul.currency li {
    content: '';
    display: block;
    width: 24px;
    height: 16px;
    background-size: cover;
    background-repeat: no-repeat;
    padding: 0px 10px 24px 24px;
    list-style: none;
    margin: 0;
    vertical-align: middle;
    border: 1px solid var(--primary-lt-color) !important;
}

li.aud {
    background-image: url('https://wise.com/public-resources/assets/flags/rectangle/aud.png');
}

li.cny {
    background-image: url('https://wise.com/public-resources/assets/flags/rectangle/cny.png');
}

li.myr {
    background-image: url('https://wise.com/public-resources/assets/flags/rectangle/myr.png');
}

li.sgd {
    background-image: url('https://wise.com/public-resources/assets/flags/rectangle/sgd.png');
}

li.thb {
    background-image: url('https://wise.com/public-resources/assets/flags/rectangle/thb.png');
}

li.usd {
    background-image: url('https://wise.com/public-resources/assets/flags/rectangle/usd.png');
}

li.php {
    background-image: url('https://wise.com/public-resources/assets/flags/rectangle/php.png');
}

.flag {
    width: 36px;
    height: 24px;
    border: 1px solid var(--primary-lt-color) !important;
}

.nav > li > #currencymenu {
    padding-left: 25px;
}

ul.currency a {
    margin-left: 15px !important;
}

    ul.currency a:hover {
        display: inline-block;
    }

/* ------------ */

.navbar-toggle {
    position: relative;
    float: right;
    padding: 9px 10px;
    margin-right: 15px;
    margin-top: 8px;
    margin-bottom: 8px;
    background-color: transparent;
    background-image: none;
    border: 1px solid var(--primary-color) !important;
    border-radius: 4px;
}

    .navbar-toggle .icon-bar {
        border: 1px solid var(--primary-color) !important;
    }

/* ------------ */

/* FOOTER */
footer {
    background-image: url("footer_bg.png");
    background-position: top center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 621px;
}

    footer .container-fluid {
        display: -webkit-flex;
        display: flex;
        -webkit-align-items: center;
        align-items: center;
        -webkit-justify-content: center;
        justify-content: center;
    }

.grid-footer {
    display: grid;
    gap: 25px;
    grid-template-areas: "a b c";
    margin-top: 190px;
    padding: 100px 10px;
    width: var(--site-container-width);
}

@media screen and (max-width: 1024px) {
    footer ul > li {
        font-size: small !important;
        line-height: 1.6 !important;
    }

    .grid-footer {
        gap: 5px;
        margin: 10px 0 0 70px !important;
        grid-template-areas:
            "a"
            "b"
            "c";
    }
}

.grid-footer-item {
    position: relative;
    padding: 20px;
    align-items: center;
    color: #fff;
    width: 450px;
}

.grid-footer .grid-item1 {
    grid-area: a;
}

.grid-footer .grid-item2 {
    grid-area: b;
}

.grid-footer .grid-item3 {
    grid-area: c;
}

footer ul > li {
    list-style-type: none;
    font-size: large;
    text-transform: uppercase;
    line-height: 2.5;
}

    footer ul > li > a {
        color: #fff;
    }

        footer ul > li > a:hover {
            color: var(--primary-lt-color);
            text-decoration: none;
        }

/* ---------- */

/* SPECIAL FUNCTIONS */

/* BREADCRUMBS */
.breadcrumb {
    background-color: inherit !important;
    text-transform: uppercase;
    font-size: 18px !important;
    padding: 0 !important;
    margin-bottom: 0 !important;
    border-radius: 0 !important;
}

.grid-breadcrumb {
    background: rgb(19, 98, 162);
    background: linear-gradient( 270deg, rgba(19, 98, 162, 0.3449754901960784) 24%, rgba(153, 192, 218, 0.09567577030812324) 100% );
}
/* -------- */

/* ANCHOR TOOLTIP */
a.tooltiplink {
    position: relative;
}

    a.tooltiplink:hover::after {
        content: attr(data-title);
        background-color: var(--primary-color);
        color: #fff;
        padding: 5px 16px;
        border-radius: 4px;
        font-size: 12px;
        line-height: 14px;
        display: block;
        position: absolute;
        top: 100%;
        left: 50%;
        transform: translateX(-50%);
        white-space: nowrap;
        z-index: 100;
        border-radius: 24px !important;
    }
/* --------- */

/* SPINNER FOR BUTTON WAITS */
.glyphicon.spinning {
    animation: spin 1s infinite linear;
    -webkit-animation: spin2 1s infinite linear;
}

@keyframes spin {
    from {
        transform: scale(1) rotate(0deg);
    }

    to {
        transform: scale(1) rotate(360deg);
    }
}

@-webkit-keyframes spin2 {
    from {
        -webkit-transform: rotate(0deg);
    }

    to {
        -webkit-transform: rotate(360deg);
    }
}
/* --------- */

/* BUTTONS */
.btn, .input-group-addon, textarea {
    outline: 2px solid var(--primary-lt-color) !important;
    border-radius: 24px !important;
    background-color: transparent !important;
    padding: 5px 16px !important;
    color: var(--primary-color) !important;
}

.btn {
    margin-left: 10px !important;
}

    .btn.focus,
    .btn:focus,
    .btn:hover {
        color: var(--primary-lt-color) !important;
    }

    .btn.active.focus,
    .btn.active:focus,
    .btn.focus,
    .btn:active.focus,
    .btn:active:focus,
    .btn:focus {
        outline: invert !important;
        outline-offset: inherit !important;
    }

    .btn.active {
        transform: scale(0.98) !important;
    }

/* ---------- */

/* INPUTS */
input, select {
    outline: 2px solid var(--primary-lt-color) !important;
    border-radius: 24px !important;
    padding-left: 10px !important;
}

    input[type="radio"] + label {
        padding-right: 10px !important;
    }

/* MISC */
.text-muted {
    padding-left: 10px !important;
}

.panel-body {
    text-align: center !important;
}

.crmEntityFormView h2 {
    font-size: 24px !important;
}

.padding-bottom-5 {
    padding-bottom: 5px;
}

/* APPROVAL BUTTONS */
#vallen_approval {
    min-width: 210px !important;
    margin-left: -30px !important;
}

    #vallen_approval input {
        outline: none !important;
    }

    #vallen_approval.btn:hover {
        color: white !important;
    }

.bgAmber {
    background-color: #FFBF00 !important;
}

.bgGreen {
    background-color: green !important;
    color: white !important;
}

.bgRed {
    background-color: red !important;
    color: white !important;
}

.reasonLabel {
    color: red;
}

.reasonTextArea {
    border-color: red;
}
/* ---------- */
/* PAGES */
/* HOME (ANONYMOUS) */
.grid-login {
    display: grid;
    grid-template-columns: 1fr 1fr;
    margin-bottom: 60px;
    grid-auto-flow: dense;
    width: var(--site-container-width);
    align-items: center;
}

@media screen and (max-width: 1024px) {
    .grid-login {
        grid-template-columns: 1fr;
        grid-row: auto;
    }
}

.grid-login-item {
    position: relative;
    padding: 20px;
}

.grid-login .grid-item2 {
    background-color: var(--secondary2-color);
    box-shadow: 0 1px 4px -2px gray;
    border-radius: 24px;
    color: rgba(94, 86, 105, 0.87) !important;
    height: 400px;
    text-align: center;
    justify-self: center;
}

    .grid-login .grid-item2 form {
        margin-top: 100px;
    }

    .grid-login .grid-item2 .login-button {
        font-size: 20px !important;
        padding: 5px 20px !important;
        background-color: #fff !important;
        outline: 2px solid var(--primary-lt-color) !important;
        border-radius: 24px !important;
        margin-left: 10px !important;
        color: var(--primary-color) !important;
    }

.grid-login .redeem {
    padding-top: 110px;
}

#content-container {
    padding-top: 160px !important;
    padding-bottom: 270px !important;
}

.nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus {
    color: inherit !important;
    background-color: inherit !important;
    border: none !important;
}

/* -------- */
/* HOME (AUTHENTICATED) */
.grid-home a {
    text-decoration: none;
    color: inherit !important;
}

.grid-home {
    display: grid;
    column-gap: 25px;
    padding: 0 10px;
    margin-bottom: 60px;
    grid-auto-flow: dense;
    width: var(--site-container-width);
    grid-template-columns: repeat(4, 1fr);
    grid-template-areas:
        "intro intro intro notifications"
        "agreements1 agreements2 agreements3 agreements3"
        "projects1 projects2 projects2 projects2"
        "sourcing1 sourcing2 sourcing3 sourcing4"
        "report1 report1 report1 report1"
        "report2 report2 report2 report2";
}

@media screen and (max-width: 1024px) {
    .grid-home {
        grid-template-columns: 1fr;
        grid-template-areas:
            "intro"
            "notifications"
            "agreements1"
            "agreements2"
            "agreements3"
            "projects1"
            "projects2"
            "sourcing1"
            "sourcing2"
            "sourcing3"
            "sourcing4"
            "report1"
            "report2";
    }

}

.grid-home-item {
    position: relative;
    background-color: #fff;
    padding: 20px;
    font-size: 14px;
    box-shadow: 0 1px 4px -2px gray;
    border-radius: 15px;
    align-items: center;
    color: rgba(94, 86, 105, 0.87) !important;
    margin-bottom: 25px;
    /* transform: translateX(1000%);
  transition: transform 0.4s ease; */
}

    .grid-home-item:nth-of-type(even) {
        /* transform: translateX(-1000%); */
    }

    .grid-home-item.animate {
        /* transform: translateX(0); */
    }

    .grid-home-item .btn {
        left: 25%;
        bottom: 30%;
    }

    .grid-home-item > .title {
        text-align: left;
        text-transform: uppercase;
    }

/* WELCOME */
.grid-home .grid-item1 {
    grid-area: intro;
    background-image: url("img_vallen_background.png");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    min-height: 270px;
}

    .grid-home .grid-item1 .content {
        margin-right: 230px;
    }

    .grid-home .grid-item1 .card-image {
        background-image: url("b1-04.png");
        background-position: center center;
        background-repeat: no-repeat;
        background-size: cover;
        height: 320px;
        width: 260px;
        z-index: 10;
    }

/* NOTIFICATIONS */
.grid-home .grid-item2 {
    grid-area: notifications;
    background: rgb(255,255,255);
    background: linear-gradient(128deg, rgba(255,255,255,1) 0%, rgba(249,210,153,1) 28%);
}

/* CONTRACT CATALUGUE */
.grid-home .grid-item3a {
    grid-area: agreements1;
}

.grid-home .grid-item3b {
    grid-area: agreements2;
}

.grid-home .grid-item3c {
    grid-area: agreements3;
    background: rgb(255,255,255);
    background: linear-gradient(128deg, rgba(255,255,255,1) 0%, rgba(153,192,218,0.711922268907563) 28%);
}

.grid-home .grid-item3a hr {
    border: 3px solid var(--third-lt-color);
    border-radius: 5px;
}

.grid-home .grid-item3b hr {
    border: 3px solid var(--secondary-lt-color);
    border-radius: 5px;
}

/* PROJECTS */
.grid-home .grid-item4a {
    grid-area: projects1;
    background: rgb(255,255,255);
    background: linear-gradient(128deg, rgba(255,255,255,1) 0%, rgba(189,206,127,1) 28%);
}

.grid-home .grid-item4b {
    grid-area: projects2;
}

/* SOURCING REQUESTS */
.grid-home .grid-item5a {
    grid-area: sourcing1;
}

.grid-home .grid-item5b {
    grid-area: sourcing2;
}

.grid-home .grid-item5c {
    grid-area: sourcing3;
}

.grid-home .grid-item5d {
    grid-area: sourcing4;
    background: rgb(255,255,255);
    background: linear-gradient(128deg, rgba(255,255,255,1) 0%, rgba(249,210,153,1) 28%);
}

.grid-home .grid-item5a hr {
    border: 3px solid var(--third-lt-color);
    border-radius: 5px;
}

.grid-home .grid-item5b hr {
    border: 3px solid var(--secondary-lt-color);
    border-radius: 5px;
}

.grid-home .grid-item5c hr {
    border: 3px solid var(--primary-lt-color);
    border-radius: 5px;
}

.grid-home .grid-item5d hr {
    border: 3px solid #e0dcdc;
    border-radius: 5px;
}

.grid-home .grid-item5d .btn {
    background-color: #fff !important;
}


/* REPORT 1 */
.grid-home .grid-item6 {
    grid-area: report1;
    background-color: inherit;
    padding: 0;
    box-shadow: none;
    /*border-radius: 0;*/
}

/* REPORT 2 */
.grid-home .grid-item7 {
    grid-area: report2;
}

.illustrator-img {
    position: absolute;
    right: 0;
    bottom: 0;
}

.grid-item3 .card-image {
    position: relative;
    background-image: url("/images/9.249c7d38.png");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 260px;
    width: 130px;
    z-index: 10;
}

.grid-item4 .card-image {
    position: relative;
    background-image: url("img_contractcatalogue.png");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 260px;
    width: 130px;
    z-index: 10;
}

.grid-item4 .illustrator-img {
    /*    top: 0;*/
    left: 0;
}

.grid-item9 .card-image {
    background-image: url("/images/developerMeetup.4097f121.png");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 110px;
    width: 100%;
    z-index: 10;
    border-radius: 15px 15px 0 0;
    position: relative;
}

#notifications .table {
    width: auto !important;
}

@media screen and (max-width: 1024px) {
    .grid-home .grid-item1 .card-image {
        background-image: none;
    }
}

/* ------------- */

/* STANDARD PAGE/LIST/FORM */
.grid-page {
    display: grid;
    column-gap: 25px;
    padding: 0 10px;
    margin-bottom: 80px;
    grid-auto-flow: dense;
    width: var(--site-container-width);
}

#standard-forms .grid-page {
    grid-template-columns: 1fr;
    grid-template-areas:
        "breadcrumb"
        "grid1";
}

#standard .grid-page {
    grid-template-columns: 1fr;
    grid-template-areas:
        "breadcrumb"
        "section"
        "grid1";
}

#contract-catalogue .grid-page {
    grid-template-columns: repeat(3, 1fr);
    grid-template-areas:
        "breadcrumb breadcrumb breadcrumb"
        "section section section"
        "s1 s2 s3"
        "grid1 grid1 grid1"
        "grid2 grid2 grid2";
}

#sourcing-request .grid-page {
    grid-template-columns: repeat(3, 1fr);
    grid-template-areas:
        "breadcrumb breadcrumb breadcrumb"
        "section section section"
        "s1 s2 s3"
        "grid1 grid1 grid1"
        "s4 s5 s6"
        "grid2 grid2 grid2";
}

/* USAGE APPROVAL */
#usage-approval .grid-page {
    grid-template-columns: repeat(3, 1fr);
    grid-template-areas:
        "breadcrumb breadcrumb breadcrumb"
        "section section section"
        "s1 s2 s3"
        "s4 s5 s6"
        "grid1 grid1 grid1";
}

.grid-page-item {
    position: relative;
    background-color: #fff;
    padding: 20px;
    font-size: 14px;
    min-height: 50px;
    box-shadow: 0 1px 4px -2px gray;
    border-radius: 15px;
    justify-content: center;
    align-items: center;
    color: rgba(94, 86, 105, 0.87) !important;
    margin-bottom: 25px;
}

.grid-page .grid-breadcrumb {
    grid-area: breadcrumb;
}

.grid-page .grid-section1 {
    grid-area: section;
}

.grid-page .grid-section2 {
    grid-area: grid1;
}

.grid-page .grid-section3 {
    grid-area: grid2;
}

.grid-page .grid-stats1 {
    grid-area: s1;
}

.grid-page .grid-stats2 {
    grid-area: s2;
}

.grid-page .grid-stats3 {
    grid-area: s3;
}

.grid-page .grid-stats4 {
    grid-area: s4;
}

.grid-page .grid-stats5 {
    grid-area: s5;
}

.grid-page .grid-stats6 {
    grid-area: s6;
}

.grid-page .section-body {
    width: 80%;
}

.grid-page .grid-stats3 hr,
.grid-page .grid-stats4 hr {
    border: 3px solid var(--third-lt-color);
    border-radius: 5px;
}

.grid-page .grid-stats2 hr {
    border: 3px solid #e0dcdc;
    border-radius: 5px;
}

.grid-page .grid-stats5 hr {
    border: 3px solid var(--secondary-lt-color);
    border-radius: 5px;
}

.grid-page .grid-stats1 hr,
.grid-page .grid-stats6 hr {
    border: 3px solid var(--primary-lt-color);
    border-radius: 5px;
}

/* Notifications image*/
.grid-page .grid-section1 .card-image-notifications {
    background-image: url("img_notifications.svg");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 185px;
    width: 235px;
    z-index: 10;
}

/* Projects image*/
.grid-page .grid-section1 .card-image-projects {
    background-image: url("img_projects.svg");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 220px;
    width: 260px;
    z-index: 10;
}

/* Contract Catalogue image*/
.grid-page .grid-section1 .card-image-contractcatalogue {
    background-image: url("img_contractcatalogue.svg");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 220px;
    width: 260px;
    z-index: 10;
}

/* Sourcing Requests image*/
.grid-page .grid-section1 .card-image-sourcingrequests {
    background-image: url("img_sourcingrequests.jpeg");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 180px;
    width: 240px;
    z-index: 10;
}

/* Usage Approval image*/
.grid-page .grid-section1 .card-image-usageapproval {
    background-image: url("img_usageapproval.png");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 180px;
    width: 240px;
    z-index: 10;
}

/* Usage DOA image*/
.grid-page .grid-section1 .card-image-usagedoa {
    background-image: url("img_usagedoa.png");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 180px;
    width: 300px;
    z-index: 10;
}


#contract-catalogue .grid-page .grid-stats1 {
    background: var(--primary-lt-color);
    opacity: 0.8;
}

#contract-catalogue .grid-page .grid-stats2 {
    background: var(--secondary-lt-color);
    opacity: 0.8;
}

#contract-catalogue .grid-page .grid-stats3 {
    background: var(--third-lt-color);
    opacity: 0.8;
}


@media screen and (max-width: 1024px) {
    .grid-page .grid-section1 .card-image {
        background-image: none;
    }

    .grid-page .grid-section1 .card-image-contractcatalogue,
    .grid-page .grid-section1 .card-image-notifications,
    .grid-page .grid-section1 .card-image-sourcingrequests,
    .grid-page .grid-section1 .card-image-projects {
        background-image: none;
    }

    .grid-page .section-body {
        width: auto;
    }
}

/* -------- */

/* REPORTS */
.grid-report {
    display: grid;
    column-gap: 25px;
    grid-template-areas:
        "breadcrumb"
        "section"
        "report";
    padding: 0 10px;
    margin-bottom: 80px;
    grid-auto-flow: dense;
    width: var(--site-container-width);
}

.grid-report-item {
    position: relative;
    background-color: #fff;
    padding: 20px;
    font-size: 14px;
    min-height: 50px;
    box-shadow: 0 1px 4px -2px gray;
    border-radius: 15px;
    align-items: center;
    color: rgba(94, 86, 105, 0.87) !important;
    margin-bottom: 25px;
}

.grid-report .grid-breadcrumb {
    grid-area: breadcrumb;
}

.grid-report .grid-section1 {
    grid-area: section;
    padding-right: 150px;
}

.grid-report .grid-section2 {
    grid-area: report;
}

.grid-report .section-body {
    width: 80%;
}

/* Report page image*/
/*.grid-report .grid-section1 .card-image-report {
    background-image: url("img_reports.svg");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 200px;
    width: 170px;
    z-index: 10;
}*/

/* Agreemenent report page*/
.grid-report .grid-section1 .card-image-report-agreement {
    background-image: url("g1-02.png");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 210px;
    width: 130px;
    z-index: 10;
}

/* Backorder report page*/
.grid-report .grid-section1 .card-image-report-backorder {
    background-image: url("b1-02.png");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 200px;
    width: 170px;
    z-index: 10;
}

/* Control Tower report page*/
.grid-report .grid-section1 .card-image-report-controltpwer {
    background-image: url("g1-03.png");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 200px;
    width: 170px;
    z-index: 10;
}

/* Days of Inventory report page*/
.grid-report .grid-section1 .card-image-report-daysofinventory {
    background-image: url("g3-01.png");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 220px;
    width: 170px;
    z-index: 10;
}

/* JnJ Supply Chain report page*/
.grid-report .grid-section1 .card-image-report-jnjsupplychain {
    background-image: url("b1-03.png");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 220px;
    width: 170px;
    z-index: 10;
}

/* Seagate Inventory report page*/
.grid-report .grid-section1 .card-image-report-seagateinventory {
    background-image: url("b1-04.png");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 220px;
    width: 170px;
    z-index: 10;
}

/* Seagate Inventory report page*/
.grid-report .grid-section1 .card-image-report-inventoryhistory {
    background-image: url("g3-01.png");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 220px;
    width: 170px;
    z-index: 10;
}

/* Sourcing report page*/
.grid-report .grid-section1 .card-image-report-sourcing {
    background-image: url("g2-01.png");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 220px;
    width: 170px;
    z-index: 10;
}

/* Usage report page*/
.grid-report .grid-section1 .card-image-report-usage {
    background-image: url("g1-01.png");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 220px;
    width: 170px;
    z-index: 10;
}

/* VPP report page*/
.grid-report .grid-section1 .card-image-report-vpp {
    background-image: url("g3-03.png");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 220px;
    width: 170px;
    z-index: 10;
}

@media screen and (max-width: 1024px) {
    .grid-report .grid-section1 .card-image-report {
        background-image: none;
    }

    .grid-report .section-body {
        width: auto;
    }
}
/* -------- */