body {
    font-family: 'Montserrat',Helvetica,Arial,Lucida,sans-serif !important;
}

p {
    font-size: 17px !important;
}

.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
    font-family: Montserrat !important;
    font-weight: 400 !important;
    color: var(--portalThemeColor4) !important;
}

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

a, .a {
    color: var(--portalThemeColor4) !important;
    /*font-family: Montserrat;*/
    font-weight: 600 !important;
    /*font-size: 14px;*/
}

    a:hover, a:focus,
    .a:hover,
    .a:focus {
        color: #f9d299;
        text-decoration: none !important;
    }

    a:focus, a:hover {
        color: var(--portalThemeColor2) !important;
    }

button:disabled,
input[type="button"]:disabled {
    background-color: #ccc; /* Light gray background */
    color: #666; /* Darker text */
    cursor: not-allowed; /* "No" symbol cursor */
    opacity: 0.7; /* Slight transparency */
    border-color: #aaa; /* Optional */
}


/*ROOT*/
.bg-val-primary {
    background-color: var(--portalThemeColor1); /*#0061a0*/
}

.text-val-primary {
    color: var(--portalThemeColor1); /*#0061a0*/
}

.bg-val-primary2 {
    background-color: var(--portalThemeColor3); /*#99c0da*/
}

.text-val-primary2 {
    color: var(--portalThemeColor3); /*#99c0da*/
}

.bg-val-secondary {
    background-color: var(--portalThemeColor4); /*#ee8d22*/
}

.text-val-secondary {
    color: var(--portalThemeColor4); /*#ee8d22*/
}

.bg-val-secondary2 {
    /*background-color: var(--portalThemeColor2); #f6ba64*/
}

.text-val-secondary2 {
    color: var(--portalThemeColor2); /*#f6ba64*/
}

.bg-val-green-dark {
    background-color: var(--portalThemeColor5);
}

.bg-val-green-light {
    background-color: var(--portalThemeColor6);
}


/*
--portalThemeColor2: #f6ba64;
--portalThemeColor3: #99c0da;
--portalThemeColor4: #ee8d22;
--portalThemeColor5: #658101;
--portalThemeColor6: #bdce7f;
--portalThemeColor7: #ffffff;
--portalThemeColor8: #000000;
--portalThemeColor9: #f9d299;
*/

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

/*HEADER*/
.headerbar {
    height: 30px;
    background-color: var(--portalThemeColor4);
    color: #fff;
    font-weight: 900;
}

    .headerbar a,
    .headerbar a:hover,
    .headerbar a:active {
        color: #fff !important;
    }

@media (max-width: 768px) {

    .headerbar .row {
        text-align: center;
    }
}

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

/*FOOTER*/
footer {
    background-color: var(--portalThemeColor1) !important;
    color: var(--portalThemeColor7) !important;
}

    footer, footer .row {
        min-height: clamp(100px, 130px, 150px) !important;
    }

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


/* NAVIGATION */
.navbar-brand img {
    margin-left: auto;
    margin-right: 80px;
}

.static-top.navbar-dark {
    -moz-box-shadow: 0 10px 5px var(--portalThemeColor1);
    box-shadow: 0 10px 5px var(--portalThemeColor1);
}

.fixed-top.navbar-dark {
    background-color: #232222;
    border-color: transparent;
}

    .fixed-top.navbar-dark .navbar-brand {
        color: #fff;
    }

    .fixed-top.navbar-dark .divider-vertical {
        border-right-color: #fff;
        border-left-color: #111;
    }

.static-top.navbar-dark .navbar-brand {
    color: #fff;
}

.static-top.navbar-dark .divider-vertical {
    border-right-color: #fff;
    border-left-color: #111;
}


@media (max-width: 1200px) {

    .static-top .navbar-brand {
        position: initial;
        height: 80px;
    }
}

.navbar-dark .navbar-nav > li > a {
    color: var(--portalThemeColor8) !important;
    font-weight: 400 !important;
    text-decoration: none;
}

    .navbar-dark .navbar-nav > li > a:hover {
        color: var(--portalThemeColor4) !important;
        font-weight: 600;
        background-color: var(--portalThemeColor7);
        border-bottom: 0;
        outline: 0;
    }

    .navbar-dark .navbar-nav > li > a:focus {
        color: var(--portalThemeColor4) !important;
        font-weight: 600;
        background-color: var(--portalThemeColor7);
        border: none !important;
        outline: 0;
    }

.dropdown-menu > li > a:focus, .dropdown-menu > li > a:hover {
    padding: 4px 16px !important;
    border: none !important;
    background-color: none !important;
    text-decoration: none !important;
}

.dropdown-item:focus, .dropdown-item:hover {
    color: var(--portalThemeColor4);
    background-color: #fff;
}

/*@media (max-width: 1199px) {

    .navbar-dark .navbar-nav > li > a:hover {
        color: var(--portalThemeColor1);
        background-color: var(--portalThemeColor7);
        border-bottom: 4px solid var(--portalThemeColor1);
        padding-bottom: 6px;
    }
}*/

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

    .dropdown-menu.show {
        right: auto;
    }

    .dropdown-menu a:hover {
        border-radius: 8px !important;
        background: linear-gradient( 90deg, var(--portalThemeColor4) 0%, var(--portalThemeColor9) 100% ) !important;
        color: #fff !important;
    }

    .dropdown-menu > .active > a {
        border-radius: 8px !important;
        background-color: transparent !important;
        background: linear-gradient( 90deg, var(--portalThemeColor4) 0%, var(--portalThemeColor9) 100% ) !important;
        color: #fff !important;
    }

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

.dropdown-item {
    padding: 0px;
}

/* Subgrid only */
.subgrid .open .dropdown-menu {
    display: block !important;
}
/* ---------- */

/* BUTTON */
.btn-primary {
    color: #ffffff;
    background-color: var(--portalThemeColor1);
    border-color: var(--portalThemeColor1);
    border-radius: 2px;
    border-style: solid;
    font-family: Montserrat;
    font-weight: 600;
    font-size: 14px;
    padding: 6px 20px;
    width: fit-content;
}

    .btn-primary:hover {
        color: #ffffff;
        background-color: #f9d299;
        border-color: #f9d299;
    }

    .btn-primary:active, .btn-primary.active {
        color: #ffffff;
        background-color: #f9d299;
        border-color: #f9d299;
    }

    /*        .btn-primary:active:hover, .btn-primary:active:focus, .btn-primary:active.focus, .btn-primary.active:hover, .btn-primary.active:focus, .btn-primary.active.focus {
            color: #ffffff;
            background-color: #f9d299;
            border-color: #f9d299;
        }*/

    .btn-primary:focus, .btn-primary.focus {
        color: #ffffff;
        background-color: var(--portalThemeColor4) !important;
        border-color: var(--portalThemeColor2) !important;
    }

.btn-default {
    width: max-content !important;
}

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


/*HAMBURGER*/
.navbar-dark .navbar-toggler {
    border: 1px solid var(--portalThemeColor1);
    background-color: var(--portalThemeColor1);
}

    .navbar-dark .navbar-toggler:hover {
        background-color: var(--portalThemeColor1);
    }

    .navbar-dark .navbar-toggler:focus {
        border: 1px solid black;
        background-color: var(--portalThemeColor1);
    }

.navbar-dark .navbar-nav .open .dropdown-menu {
    background-color: var(--portalThemeColor1);
}

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



/*SPECIAL COMPONENTS*/

/* CURRENCY CONTROL*/
.currency {
    width: 250px;
}

ul.currency li {
    width: 24px;
    height: 16px;
    background-size: cover;
    padding: 0px 10px 24px 24px;
    margin: 12px;
    vertical-align: middle;
    border: 1px solid var(--primary-lt-color) !important;
}

html[dir=ltr] ul.currency li a.dropdown-item {
    margin-left: 20px !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;
    width: auto;
}

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

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


/* BREADCRUMBS */
.breadcrumb > .active {
    color: var(--portalThemeColor1) !important;
    font-weight: 600;
}
/* ------------ */



/* SIGN-IN PAGE */
#content {
    margin-top: 50px;
}

.nav {
    gap: 20px;
}
/* ------------ */


/* SCROLL RETURN TOP */
.scroll-top.scroll-top-icon {
    text-align: center;
    background: rgba(0,0,0,.4);
    text-decoration: none;
    position: fixed;
    z-index: 99999;
    bottom: 125px;
    right: 0;
    -webkit-border-top-left-radius: 5px;
    -webkit-border-bottom-left-radius: 5px;
    -moz-border-radius-topleft: 5px;
    -moz-border-radius-bottomleft: 5px;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
    display: none;
    cursor: pointer;
    font-size: 30px;
    padding: 5px;
    color: #fff
}

.scroll-top:before {
    content: "2"
}

.scroll-top.scroll-top-visible {
    opacity: 1;
    -webkit-animation: fadeInRight 1s cubic-bezier(.77,0,.175,1) 1;
    animation: fadeInRight 1s cubic-bezier(.77,0,.175,1) 1
}

.scroll-top.scroll-top-hidden {
    opacity: 0;
    -webkit-animation: fadeOutRight 1s cubic-bezier(.77,0,.175,1) 1;
    animation: fadeOutRight 1s cubic-bezier(.77,0,.175,1) 1
}

.scroll-top-icon, .et_pb_custom_button_icon.et_pb_button:after, .et_pb_login .et_pb_custom_button_icon.et_pb_button:after, .et_pb_woo_custom_button_icon .button.et_pb_custom_button_icon.et_pb_button:after, .et_pb_woo_custom_button_icon .button.et_pb_custom_button_icon.et_pb_button:hover:after {
    content: attr(data-icon)
}

.scroll-top-icon {
    speak: none;
    font-weight: 400;
    -webkit-font-feature-settings: normal;
    font-feature-settings: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    font-size: 96px;
    font-style: normal;
    display: inline-block;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    direction: ltr
}

#scrollToTopBtn {
    bottom: 40px;
}


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


/* HOME PAGE */
#registration {
    background-color: var(--portalThemeColor5);
    min-height: 250px;
    color: #fff;
}

#home-box-1 {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    align-items: space-evenly;
}

    #home-box-1 div {
        /*width: 250px;*/
    }

@media (max-width: 768px) {
    #home-box-1 {
        gap: 20px;
    }
}

#home-box-1 .card-body {
    min-height: 220px;
}



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

/* ACCORDION */
.accordion {
    --bs-accordion-active-bg: var(--portalThemeColor1);
    --bs-accordion-active-color: #fff;
    --bs-accordion-border-color: #a7a5a5;
    --bs-accordion-btn-focus-box-shadow: none;
    /*--bs-accordion-transition: height .35s ease;*/
}

    .accordion .collapsing {
        transition: height .2s ease;
    }

    .accordion .show {
        transition: height .2s ease;
    }

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

/* FORM | LIST */
.crmEntityFormView, .entitylist, .modal-content, .popover-content {
    /*    background-color: #ffffff;
    color: #000000;*/
    border: 1px solid #cecdcd !important;
    padding: 20px !important;
}

    .crmEntityFormView .tab {
        margin-bottom: 20px;
        width: 100%
    }

    .crmEntityFormView .tab-title {
        border-bottom: 1px solid #eee;
    }

.field-label {
    color: dimgrey !important;
}

/* ------------ */
/* MODALS */
.modal-content {
    min-width: 600px;
}

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

/* MULTISTEP FORM PROGRESS */
.list-group {
    --bs-list-group-active-bg: var(--portalThemeColor5);
}

.input-group {
    flex-wrap: nowrap !important;
}

.progress .text-muted {
    background-color: var(--portalThemeColor6) !important;
    /*color: #000 !important;*/
}

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


/* INSTRUCTIONS */
.instructions {
    background-color: #fff;
    padding: 20px;
    margin-bottom: 20px;
    border: 1px solid var(--portalThemeColor6);
}

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


/* CARD */
.card {
    border-radius: 8px !important;
    margin-bottom: 0px !important;
}

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

/* RFQ */
.mainRFQ {
    background-image: url("/A-variety-of-leaves-layered-on-top-of-each-other-2.png");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    /*padding-top: 105px;*/
}

#descRFQ {
    display: flex;
    flex-wrap: wrap;
}

    #descRFQ .card-header {
        background-color: var(--portalThemeColor5) !important;
        color: var(--portalThemeColor7) !important;
    }

#listRFQ {
    display: flex;
    flex-wrap: wrap;
}

.rfq-btn-confirm {
    background-color: var(--portalThemeColor5) !important;
    border-color: var(--portalThemeColor5) !important;
    color: var(--portalThemeColor7) !important;
}

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

/* Supplier Request Stats - Homepage */
#srStats .row {
    /*min-height: 250px;*/
    gap: 20px;
}

#srStats .col {
    padding: 20px;
    background-color: #f2f2f2;
    color: var(--portalThemeColor1);
    border-radius: 8px;
    border: 1px solid #e6e6e6;
}

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

/* Report Pages */
#reports .row {
    margin-bottom: 20px;
}

#reports .col {
    padding: 20px;
    background-color: #f2f2f2;
    color: var(--portalThemeColor1);
    border-radius: 8px;
    border: 1px solid #e6e6e6;
}

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



/* Page Template 1 */
.pageTemplate1 {
    display: flex;
    flex-wrap: wrap;
    margin: 0px;
    min-height: auto;
    padding: 80px;
    min-width: 300px;
    background-image: url("/Leaves-and-ripples-on-a-lily-pond.png");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

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


/* Page Template 2 */
.pageTemplate2 {
    display: flex;
    flex-wrap: wrap;
    margin: 0px;
    min-height: auto;
    padding: 80px;
    min-width: 300px;
    background-image: url("/A-variety-of-leaves-layered-on-top-of-each-other-2.png");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

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