:root {
    --primary: #00B4DD;
    --warning: #fcb465;
    --danger: #FF4444;
    --info: #36C2E2;
    --success: #26C269;

    --yellow: #FECA18;
    --blue: #00A5CF;
    --dark-blue: #4578BD;
    --grey: #EDEDED;
}

@font-face {
    font-family: 'Neutrif Pro';
    src: url('../fonts/NeutrifPro/NeutrifPro-Bold.eot');
    src: local('NeutrifPro-Bold'),
    url('../fonts/NeutrifPro/NeutrifPro-Bold.eot?#iefix') format('embedded-opentype'),
    url('../fonts/NeutrifPro/NeutrifPro-Bold.woff2') format('woff2'),
    url('../fonts/NeutrifPro/NeutrifPro-Bold.woff') format('woff'),
    url('../fonts/NeutrifPro/NeutrifPro-Bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'Neutrif Pro';
    src: url('../fonts/NeutrifPro/NeutrifPro-Light.eot');
    src: local('NeutrifPro-Light'),
    url('../fonts/NeutrifPro/NeutrifPro-Light.eot?#iefix') format('embedded-opentype'),
    url('../fonts/NeutrifPro/NeutrifPro-Light.woff2') format('woff2'),
    url('../fonts/NeutrifPro/NeutrifPro-Light.woff') format('woff'),
    url('../fonts/NeutrifPro/NeutrifPro-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: 'Neutrif Pro';
    src: url('../fonts/NeutrifPro/NeutrifPro-MediumItalic.eot');
    src: local('NeutrifPro-MediumItalic'),
    url('../fonts/NeutrifPro/NeutrifPro-MediumItalic.eot?#iefix') format('embedded-opentype'),
    url('../fonts/NeutrifPro/NeutrifPro-MediumItalic.woff2') format('woff2'),
    url('../fonts/NeutrifPro/NeutrifPro-MediumItalic.woff') format('woff'),
    url('../fonts/NeutrifPro/NeutrifPro-MediumItalic.ttf') format('truetype');
    font-weight: 500;
    font-style: italic;
}

@font-face {
    font-family: 'Neutrif Pro';
    src: url('../fonts/NeutrifPro/NeutrifPro-Medium.eot');
    src: local('NeutrifPro-Medium'),
    url('../fonts/NeutrifPro/NeutrifPro-Medium.eot?#iefix') format('embedded-opentype'),
    url('../fonts/NeutrifPro/NeutrifPro-Medium.woff2') format('woff2'),
    url('../fonts/NeutrifPro/NeutrifPro-Medium.woff') format('woff'),
    url('../fonts/NeutrifPro/NeutrifPro-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'Neutrif Pro';
    src: url('../fonts/NeutrifPro/NeutrifPro-BoldItalic.eot');
    src: local('NeutrifPro-BoldItalic'),
    url('../fonts/NeutrifPro/NeutrifPro-BoldItalic.eot?#iefix') format('embedded-opentype'),
    url('../fonts/NeutrifPro/NeutrifPro-BoldItalic.woff2') format('woff2'),
    url('../fonts/NeutrifPro/NeutrifPro-BoldItalic.woff') format('woff'),
    url('../fonts/NeutrifPro/NeutrifPro-BoldItalic.ttf') format('truetype');
    font-weight: bold;
    font-style: italic;
}

@font-face {
    font-family: 'Neutrif Pro';
    src: url('../fonts/NeutrifPro/NeutrifPro-LightItalic.eot');
    src: local('NeutrifPro-LightItalic'),
    url('../fonts/NeutrifPro/NeutrifPro-LightItalic.eot?#iefix') format('embedded-opentype'),
    url('../fonts/NeutrifPro/NeutrifPro-LightItalic.woff2') format('woff2'),
    url('../fonts/NeutrifPro/NeutrifPro-LightItalic.woff') format('woff'),
    url('../fonts/NeutrifPro/NeutrifPro-LightItalic.ttf') format('truetype');
    font-weight: 300;
    font-style: italic;
}

@font-face {
    font-family: 'Neutrif Pro';
    src: url('../fonts/NeutrifPro/NeutrifPro-SemiBold.eot');
    src: local('NeutrifPro-SemiBold'),
    url('../fonts/NeutrifPro/NeutrifPro-SemiBold.eot?#iefix') format('embedded-opentype'),
    url('../fonts/NeutrifPro/NeutrifPro-SemiBold.woff2') format('woff2'),
    url('../fonts/NeutrifPro/NeutrifPro-SemiBold.woff') format('woff'),
    url('../fonts/NeutrifPro/NeutrifPro-SemiBold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
}

@font-face {
    font-family: 'Neutrif Pro';
    src: url('../fonts/NeutrifPro/NeutrifPro-Regular.eot');
    src: local('NeutrifPro-Regular'),
    url('../fonts/NeutrifPro/NeutrifPro-Regular.eot?#iefix') format('embedded-opentype'),
    url('../fonts/NeutrifPro/NeutrifPro-Regular.woff2') format('woff2'),
    url('../fonts/NeutrifPro/NeutrifPro-Regular.woff') format('woff'),
    url('../fonts/NeutrifPro/NeutrifPro-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Neutrif Pro';
    src: url('../fonts/NeutrifPro/NeutrifPro-RegularItalic.eot');
    src: local('NeutrifPro-RegularItalic'),
    url('../fonts/NeutrifPro/NeutrifPro-RegularItalic.eot?#iefix') format('embedded-opentype'),
    url('../fonts/NeutrifPro/NeutrifPro-RegularItalic.woff2') format('woff2'),
    url('../fonts/NeutrifPro/NeutrifPro-RegularItalic.woff') format('woff'),
    url('../fonts/NeutrifPro/NeutrifPro-RegularItalic.ttf') format('truetype');
    font-weight: normal;
    font-style: italic;
}

@font-face {
    font-family: 'Neutrif Pro';
    src: url('../fonts/NeutrifPro/NeutrifPro-SemiBoldItalic.eot');
    src: local('NeutrifPro-SemiBoldItalic'),
    url('../fonts/NeutrifPro/NeutrifPro-SemiBoldItalic.eot?#iefix') format('embedded-opentype'),
    url('../fonts/NeutrifPro/NeutrifPro-SemiBoldItalic.woff2') format('woff2'),
    url('../fonts/NeutrifPro/NeutrifPro-SemiBoldItalic.woff') format('woff'),
    url('../fonts/NeutrifPro/NeutrifPro-SemiBoldItalic.ttf') format('truetype');
    font-weight: 600;
    font-style: italic;
}

/* force scrollbar */
html {
    overflow-y: scroll;
}

* {
    font-family: 'Neutrif Pro';
}


body {
    background-color: #FFFFFF;
    font-family: 'Neutrif Pro';
    color: #333333;
    max-width: 2048px;
    margin: 0 auto;
}

.mobile-mode {
    display: none !important;
}

a {
    color: var(--primary);
}

a.disabled {
    color: #ddd;
    pointer-events: none;
    cursor: default;
}

a.link-normal {
    color: inherit;
}

a.link-normal:hover {
    color: var(--primary);
}

a.banner-empty-area::after {
    content: attr(title);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: grey;
    text-align: center;
    font-size: 120%;
}

.input-group-append a.ModalDialogButton {
    font-size: .8rem;
}

a:hover {
    text-decoration: none;
}

a.text-primary:hover {
    color: var(--primary) !important;
    opacity: .9;
}

.wrapper {
    min-width: 320px;
}

#loading-block {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: rgba(0, 0, 0, .2);
    z-index: 9999;
    display: none;
}

#loading-block .message-loading-block {
    width: 350px;
    padding: 2rem;
    text-align: center;
    font-weight: 500;
    font-size: 1.2rem;
    background-color: rgba(255, 255, 255, .9);
    border: 3px solid #FFF;
    border-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='100' height='100' viewBox='0 0 100 100' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Cstyle%3Epath%7Banimation:stroke 5s infinite linear%3B%7D%40keyframes stroke%7Bto%7Bstroke-dashoffset:776%3B%7D%7D%3C/style%3E%3ClinearGradient id='g' x1='0%25' y1='0%25' x2='0%25' y2='100%25'%3E%3Cstop offset='0%25' stop-color='%23BBBBBB' /%3E%3Cstop offset='25%25' stop-color='%23CCCCCC' /%3E%3Cstop offset='50%25' stop-color='%23BBBBBB' /%3E%3Cstop offset='100%25' stop-color='%23BBBBBB' /%3E%3C/linearGradient%3E %3Cpath d='M1.5 1.5 l97 0l0 97l-97 0 l0 -97' stroke-linecap='square' stroke='url(%23g)' stroke-width='3' stroke-dasharray='388'/%3E %3C/svg%3E") 1;
}

.bg-grey {
    background-color: var(--grey) !important;
}

.bg-grey-b {
    background-color: #B3B2B2 !important;
}

.bg-primary {
    background-color: var(--primary) !important;
    color: white;
}

.bg-error {
    background-color: #ffd9d9 !important;
}

.bg-red {
    background-color: #FF4242 !important;
}

.bg-orange {
    background-color: #FF6E00 !important;
}

.bg-red-soft {
    background-color: #ffe3e3 !important;
    border-color: var(--danger);
}

.text-primary {
    color: var(--primary) !important;
}

.progress-bar {
    background-color: var(--primary);
}

.pointer {
    cursor: pointer;
}

.steps {
    padding: 0;
    margin: 0;
    list-style: none;
    display: flex;
    overflow-x: auto;
    justify-content: center;
}

.steps .step {
    text-align: center;
}

.step-content {
    box-sizing: content-box;
    display: flex;
    align-items: center;
    flex-direction: column;
    padding-right: 1rem;
    width: 10rem;
}

.step-circle-last,
.step-circle-first {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 2.5rem;
    height: 2.5rem;
    color: #adb5bd;
    border: 2px solid #adb5bd;
    border-radius: 100%;
    background-color: #fff;
}

.step-circle {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 2.5rem;
    height: 2.5rem;
    color: #adb5bd;
    border: 2px solid #adb5bd;
    border-radius: 100%;
    background-color: #fff;
}

.step-circle-last::before,
.step-circle::before {
    content: '';
    display: block;
    position: absolute;
    top: 50%;
    left: -2px;
    width: calc(6rem + 1rem - 1.5rem);
    height: 2px;
    transform: translate(-100%, -50%);
    color: #adb5bd;
    background-color: currentColor;
}

.step-circle-first::after,
.step-circle::after {
    content: '';
    display: block;
    position: absolute;
    top: 50%;
    right: -2px;
    width: calc(6rem + 1rem - 1.5rem);
    height: 2px;
    transform: translate(100%, -50%);
    color: #adb5bd;
    background-color: currentColor;
}

.step-text {
    color: #adb5bd;
    margin-top: .25em;
    font-size: 0.9rem;
}

.tracking-steps {
    padding: 0;
    margin: 0;
    list-style: none;
    justify-content: center;
}

.tracking-step-content {
    box-sizing: content-box;
    display: flex;
    padding-right: 1rem;
    margin-bottom: 1rem;
}

.tracking-step-circle-last,
.tracking-step-circle-first {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 1.5rem;
    height: 1.5rem;
    color: #adb5bd;
    border: 7px solid #adb5bd;
    border-radius: 100%;
    background-color: #fff;
}

.tracking-step-circle {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 1.5rem;
    height: 1.5rem;
    color: #adb5bd;
    border: 7px solid #adb5bd;
    border-radius: 100%;
    background-color: #fff;
}

.tracking-step-circle-success {
    border: 7px solid #2c63aabd;
}

.tracking-step-circle-first::before {
    display: none;
}

.tracking-step-circle::before {
    content: '';
    display: block;
    position: absolute;
    /* bottom: 29px; */
    top: 37px;
    right: 0.4rem;
    width: 3px;
    height: calc(3rem + 1rem - 1.5rem);
    transform: translate(100%, -50%);
    color: #adb5bd;
    background-color: currentColor;
}

.tracking-step-circle-success::before {
    color: #2c63aabd;
}

.tracking-step-text {
    color: #adb5bd;
    margin-top: .25em;
    font-size: 1rem;
}

.tracking-step-text-mini {
    color: #adb5bd;
    margin-top: .25em;
    font-size: 0.8rem;
}

.tracking-step-text-date {
    font-size: 1rem;
    padding-bottom: 0.5rem;
    text-align: center;
}

.navbar {
    background: #fff;
    padding-top: 0;
    padding-bottom: 0;
    box-shadow: 1px 3px 4px 0 #adadad33;
}

.navbar-light .navbar-brand {
    color: var(--primary);
}

.navbar-light .navbar-nav .nav-link,
.nav-link.dropdown-toggle {
    color: grey;
}

.navbar-light .navbar-brand:focus,
.navbar-light .navbar-brand:hover,
.nav-link.dropdown-toggle:focus,
.nav-link.dropdown-toggle:hover {
    color: var(--primary);
}

.navbar-light .navbar-nav .nav-link,
.nav-link.dropdown-toggle {
    padding-top: 22px;
    padding-bottom: 22px;
    transition: 0.3s;
    padding-left: 24px;
    padding-right: 24px;
    font-size: 14px;
}

.navbar-light .navbar-nav .nav-link:focus,
.navbar-light .navbar-nav .nav-link:hover {
    color: var(--primary);
}

.navbar-light .navbar-nav .nav-link i,
.nav-link.dropdown-toggle i {
    color: var(--primary);
    transition: 0.3s;
}

.navbar-tools .navbar-nav .nav-link i {
    color: grey;
    transition: 0.3s;
    margin-right: 4px;
}

.navbar-light .navbar-nav li.dropdown .nav-link i {
    color: grey;
}

.navbar-light .navbar-nav li.dropdown.show .nav-link i {
    color: var(--primary);
}

#dropdown-category {
    display: flex;
    align-items: center;
    gap: 4px;
    height: 38px;
}

.dropdown-item:focus,
.dropdown-item:hover {
    color: #fff;
    text-decoration: none;
    background-color: var(--primary) !important;
}

.sm-menu {
    border-radius: 0px;
    border: 0px;
    top: 97%;
}

.dropdown-item {
    color: #3c3c3c;
    font-size: 14px;
}

.dropdown-item.active,
.dropdown-item:active {
    color: #fff;
    text-decoration: none;
    background-color: var(--primary);
}

.dropdown-toggle-witho-caret::after {
    display: none !important;
}

.navbar-toggler {
    outline: none !important;
}

.navbar-tog {
    color: var(--primary);
}

.megamenu-li {
    position: static;
}

.megamenu {
    position: absolute;
    width: 100%;
    left: 0;
    right: 0;
    padding: 0;
}

.megamenu h6 {
    margin-left: 21px;
}

.megamenu i {
    width: 20px;
}

ul.menu-category {
    display: none;
}

ul.menu-category::after {
    content: "";
    position: absolute;
    background: rgba(0, 0, 0, .5);
    top: 100%;
    left: 0;
    width: 100%;
    height: 100vh;
    z-index: -1;
}

.close {
    font-size: 1rem;
}

.carousel-home-item {
    background-size: 100% 300px;
    background-repeat: no-repeat;
    background-position: center;
    height: 300px;
    min-height: 300px;
    width: 100%;
}

.carousel-content {
    color: white;
    padding: 4rem;
    line-height: 1;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.carousel-content .content-line1 {
    font-size: 2.5rem;
}

.carousel-content .content-line2 {
    font-size: 2.5rem;
    font-weight: bold;
}

.carousel-content .content-line3 {
    font-size: 1rem;
    font-weight: normal;
    margin-top: 1rem;
}

.navbar-light .navbar-toggler {
    border: 0;
}

.navbar-tools .navbar-nav .nav-link {
    padding: 6px;
    margin: auto .4rem;
    font-size: .8rem;
    color: grey;
}

.navbar-tools .navbar-nav .nav-link:last-child {
    margin: 0;
}

.navbar-tools .dropdown {
    z-index: 1022;
}

textarea:focus,
textarea.form-control:focus,
input.form-control:focus,
input[type=text]:focus,
input[type=password]:focus,
input[type=email]:focus,
input[type=number]:focus,
[type=text].form-control:focus,
[type=password].form-control:focus,
[type=email].form-control:focus,
[type=tel].form-control:focus,
[contenteditable].form-control:focus {
    box-shadow: inset 0 -1px 0 #ddd;
}

.big-check-box {
    width: 20px;
    height: 20px;
    cursor: pointer;
}

.navbar-search {
    /* transform: scale(.8); */
    position: relative;
}

.navbar-search input {
    border-radius: 8px !important;
    border: 1px solid #D9D9DA;
    /* background-color: #F6F6F6; */
}

.navbar-search button {
    /* border-radius: 0 20px 20px 0; */
    border: 1px solid var(--primary);
    background-color: var(--primary);
}

.navbar-search button:hover,
.navbar-search button:focus {
    opacity: .9;
}

.navbar-search .btn-search-selection {
    color: grey;
    background-color: #FFFFFF;
    border: 1px solid #CACACA;
    box-shadow: none;
    outline: none;
    border-radius: 8px 0 0 8px;
}

.navbar-search .dropdown-menu {
    border-radius: 0 0 20px 20px;
    margin-top: -15px;
    padding-top: 20px;
    z-index: 0;
    background-color: #f1f1f1;
}

.navbar-search .dropdown-menu li a {
    color: grey;
}

.navbar-search .dropdown-menu li:hover,
.navbar-search .dropdown-menu li.active,
.navbar-search .dropdown-menu li.active a,
.navbar-search .dropdown-menu li a:hover {
    background-color: transparent !important;
    color: #000 !important;
}

/* Navbar Search in Supplier */
.navbar-search-supp input {
    border-radius: 0 8px 8px 0;
    border: 1px solid #D9D9DA;
}

.navbar-search-supp button {
    border-radius: 8px 0 0 8px;
    border: 1px solid #D9D9DA;
    background-color: white;
    color: #333333;
}

.navbar-search-supp .dropdown-menu {
    border-radius: 0 0 8px 8px;
    z-index: 0;
    background-color: white;
}

.navbar-search-supp .dropdown-menu li a {
    color: grey;
}

.navbar-search-supp .dropdown-menu li:hover,
.navbar-search-supp .dropdown-menu li.active,
.navbar-search-supp .dropdown-menu li.active a,
.navbar-search-supp .dropdown-menu li a:hover {
    background-color: transparent !important;
    color: #000 !important;
}

.navbar-search-supp form {
    position: relative;
}
/* End: Navbar Search in Supplier */

.navbar-search .input-icon, 
.navbar-search-supp .input-icon {
    position: absolute;
    left: .75rem;
    top: 50%;
    transform: translateY(-50%);
    color: #6C6C6C;
    z-index: 4;
}

.navbar-search .fc-with-icon,
.navbar-search-supp .fc-with-icon {
    padding-left: 2.25rem;
    font-size: .875rem;
}

.navbar-category-container {
    position: relative;
}

.navbar-category {
    overflow-x: auto;
}

.navbar-category::-webkit-scrollbar {
    width: 0;
    height: 0;
}

.navbar-category-container button.category-nav {
    position: absolute;
    top: 0;
    bottom: 0;
    display: block;
    margin: auto;
    background-color: var(--grey);
    border: 1px solid grey;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    text-align: center;
    font-size: 0.7rem;
}

.navbar-category-container button.category-nav:hover,
.navbar-category-container button.category-nav:focus {
    background-color: white;
    outline: none;
}

.navbar-category-container button.category-prev {
    left: 0;
}

.navbar-category-container button.category-next {
    right: 0;
}

.navbar-category .nav-item:first-child {
    margin-left: 20px;
}

.navbar-category .nav-item:last-child {
    padding-right: 20px;
}

.navbar-category .nav-link {
    white-space: nowrap;
    margin: auto 10px;
    text-align: center;
    color: grey;
}

.navbar-category .nav-link:hover,
.navbar-category .nav-link:focus {
    color: var(--primary);
}

.dropdown-menu.lang-drop {
    right: 0;
    left: unset;
}

.dropdown-menu.notify-drop {
    min-width: 23rem;
    background-color: #fff;
    position: absolute;
    left: -150px;
    margin: 0;
    border-radius: 0 0 10px 10px;
}

.dropdown-menu.notify-drop .notify-drop-title {
    border-bottom: 1px solid #e2e2e2;
    padding: 5px 15px 10px 15px;
}

.dropdown-menu.notify-drop .notify-drop-title a {
    color: grey;
}

.dropdown-menu.notify-drop .notify-drop-title a:hover {
    color: var(--primary);
}

.dropdown-menu.notify-drop .drop-content {
    min-height: 280px;
    max-height: 280px;
    overflow-y: scroll;
}

.dropdown-menu.notify-drop .drop-content::-webkit-scrollbar-track {
    background-color: #F5F5F5;
}

.dropdown-menu.notify-drop .drop-content::-webkit-scrollbar {
    width: 8px;
    background-color: #F5F5F5;
}

.dropdown-menu.notify-drop .drop-content::-webkit-scrollbar-thumb {
    background-color: #ccc;
}

.dropdown-menu.notify-drop .drop-content > li {
    border-bottom: 1px solid #e2e2e2;
    padding: 10px 0px 5px 0px;
}

.dropdown-menu.notify-drop .drop-content > li:nth-child(2n+0) {
    background-color: #fafafa;
}

.dropdown-menu.notify-drop .drop-content > li:after {
    content: "";
    clear: both;
    display: block;
}

.dropdown-menu.notify-drop .drop-content > li:hover {
    background-color: #ECECEC;
    cursor: pointer;
}

.dropdown-menu.notify-drop .drop-content > li:last-child {
    border-bottom: none;
}

.dropdown-menu.notify-drop .drop-content > li .notify-img {
    display: inline-block;
    width: 45px;
    height: 45px;
    margin-right: .5rem;
}

.dropdown-menu.notify-drop .allRead {
    margin-right: 7px;
}

.dropdown-menu.notify-drop .rIcon {
    float: right;
    color: #999;
}

.dropdown-menu.notify-drop .rIcon:hover {
    color: #333;
}

.dropdown-menu.notify-drop .drop-content > li a {
    font-size: 12px;
    font-weight: normal;
    color: #555;
}

.dropdown-menu.notify-drop .drop-content > li {
    font-size: .8rem;
}

.dropdown-menu.notify-drop .drop-content > li .notification-type i {
    background: var(--primary);
    padding: 4px;
    color: white;
    border-radius: 50%;
}

.dropdown-menu.notify-drop .drop-content > li .notification-title {
    font-weight: 500;
    font-size: .9rem;
}

.dropdown-menu.notify-drop .drop-content > li .cart-price {
    color: var(--primary);
    font-weight: 500;
    white-space: nowrap;
    text-align: right;
}

.category-image-icon {
    width: 30px;
    height: 30px;
    background-position: center;
    background-size: cover;
    display: inline-block;
}

.notification-area {
    max-height: 80vh;
    overflow-y: auto;
}

.notification-area .notification {
    padding: 1rem;
    border-bottom: 1px solid #ccc;
    cursor: pointer
}

.notification-area .notification:nth-child(2n+0) {
    background-color: #fafafa;
}

.notification-area .notification:hover {
    background-color: #ECECEC;
}

.notification-area .notificaiton-icon {
    background-color: var(--primary);
    color: white;
    border-radius: 50%;
    padding: 4px;
    width: 25px;
    height: 25px;
    line-height: 1rem;
    text-align: center;
}

.notificaiton-icon-unread {
    background-color: var(--danger);
    color: white;
    border-radius: 3px;
    padding: 4px;
    width: 25px;
    height: 25px;
    line-height: 1rem;
    text-align: center;
}

.notification-area .notification-type-image {
    width: 150px;
    object-fit: contain;
}

.notification-area a {
    color: inherit;
}

.notification-area a:hover .notification-title {
    color: var(--primary);
}

.img-circle {
    border-radius: 50%;
    width: 45px;
    height: 45px;
    object-fit: cover;
}

nav#megaMenuTab {
    background: var(--grey);
    padding: 0 3rem 0 3rem;
}

nav#megaMenuTab .nav-link {
    padding: 10px;
    margin-right: 50px;
    color: #aaa;
}

nav#megaMenuTab .nav-link.active {
    color: #555;
}

.megamenu-detail,
.megamenu-detail-child {
    overflow-y: scroll;
    max-height: 300px;
}

.megamenu-detail {
    background-color: #F6F6F6;
}

.megamenu-detail-child {
    background-color: #FFFFFF;
}


.megamenu-detail .dropdown-item:focus,
.megamenu-detail-child .dropdown-item:focus {
    color: #555;
    background-color: transparent !important;
}

.megamenu-detail .dropdown-item.active,
.megamenu-detail .dropdown-item:hover,
.megamenu-detail-child .dropdown-item.active,
.megamenu-detail-child .dropdown-item:hover {
    color: var(--primary);
    background-color: transparent !important;
}

.megamenu-detail .have-submenu::after {
    position: absolute;
    right: 10px;
    font-family: "Font Awesome 5 Pro";
    content: "\f105";
}

.scrollbar-mini::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

.scrollbar-mini::-webkit-scrollbar-track {
    border: 1px solid var(--grey);
    box-shadow: inset 0 0 5px white;
    border-radius: 10px;
    margin-bottom: 10px;
}

.scrollbar-mini::-webkit-scrollbar-thumb {
    border: 1px solid var(--grey);
    background: var(--grey);
    border-radius: 10px;
}

.scrollbar-mini::-webkit-scrollbar-thumb:hover {
    background: grey;
}

a.menu-brand {
    color: grey;
    font-size: .9rem;
}

a.menu-brand:hover {
    color: var(--primary);
    text-decoration: none;
}

a.menu-brand img {
    margin-right: .5rem;
    height: 32px;
}

.user-avatar {
    color: grey;
    /* margin: auto 1rem; */
}

.user-avatar:hover {
    text-decoration: none;
    color: var(--primary);
}

.user-avatar span.name {
    white-space: nowrap;
}

.img-avatar {
    width: 32px;
    height: 32px;
    object-fit: cover;
    border-radius: 50%;
}

.img-avatar-lg {
    width: 52px;
    height: 52px;
}

.img-product-thumb {
    width: 60px;
    height: 60px;
    min-width: 60px;
    min-height: 60px;
    object-fit: cover;
}

.img-product-thumb-sm {
    width: 40px;
    height: 40px;
    min-width: 40px;
    min-height: 40px;
}

i.text-grey {
    color: grey !important;
}

.with-notification-count {
    position: relative;
    font-size: 1rem;
    color: grey;
}

.with-notification-count span {
    position: absolute;
    top: -18px;
    right: -18px;
    background: var(--primary);
    color: white;
    padding: 5px;
    width: auto;
    min-width: 20px;
    height: 20px;
    text-align: center;
    border-radius: 20px;
    font-size: .8rem;
    line-height: .8rem;
    font-weight: normal;
}

.modal-content {
    border-radius: 10px
}

.modal-md-landscape {
    width: 510px;
    margin: 15rem auto;
}

.modal-md-landscape .modal-body {
    height: 225px;
    padding: 0;
}

.modal-md-landscape.promotion .modal-body {
    height: 300px;
    padding: 0;
}

#waInfoModal .modal-body h5,
#nfInfoWhatsAppModal .modal-body h5 {
    font-size: 1.125rem;
    font-weight: 700;
    color: #333333;
}

#waInfoModal .modal-body h6 {
    font-size: 1rem;
    font-weight: 700;
    color: #333333;
}

#waInfoModal .modal-body span,
#waInfoModal .modal-body ol li,
#nfInfoWhatsAppModal .modal-body span {
    font-size: 1rem;
    font-weight: 400;
    color: #6C6C6C;
}

/* Bottom sheet */
.modal-bottom-sheet .modal-dialog {
    position: fixed;
    bottom: 0;
    margin: 0;
    width: 100%;
    height: auto;
    min-height: auto;
    max-width: 100% !important;
}

.modal-bottom-sheet .modal-content {
    border-radius: 10px 10px 0 0;
}

.modal-bottom-sheet .modal-header {
    padding: 1.5rem 1.25rem 1rem;
    align-items: center;
}

.modal-bottom-sheet .modal-header h5 {
    font-size: 1.125rem;
    font-weight: 600;
}

.modal-bottom-sheet .modal-body {
    max-height: calc(100vh - 120px);
    padding: 1rem 1.25rem 1.5rem;
    overflow-y: auto;
}

.modal-bottom-sheet .modal-footer {
    padding: 1.125rem 1rem;
    border-radius: 0;
    border-top: 0;
}

.modal-bottom-sheet.fade .modal-dialog {
    transition: transform 0.3s ease-out, opacity 0.3s ease-out;
    transform: translateY(100%);
    opacity: 0;
}

.modal-bottom-sheet.fade.show .modal-dialog {
    transform: translateY(0);
    opacity: 1;
}
/* End Bottom sheet */

/* Customer Homepage */
.top-product-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.top-product-header h3 {
    font-weight: 600;
    font-size: 1.25rem;
    color: #333333;
}

.top-product-header a.see-all {
    color: var(--primary);
    padding: 10px;
}

.top-product-header a.see-all:hover,
.top-product-header a.see-all:focus {
    text-decoration: none;
}
/* End Customer Homepage */


/* About Us */
.eg-mt150-container {
    background-color: #FFFFFF;
    margin-top: 150px;
    border-radius: 40px 40px 0 0;
    width: 100%;
    min-height: 400px;
}

.eg-mt150-container > .container-fluid {
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
}

.eg-mt150-container h2 {
    font-size: 1.5rem !important;
    font-weight: 600;
    color: var(--primary);
    margin-bottom: 1.5rem;
}

.eg-mt150-container.faq h2 {
    font-weight: 700;
    color: #333333;
    margin-top: 1.5rem;
}

.eg-mt150-container h3 {
    font-size: 1.125rem;
    font-weight: 600;
    color: #333333;
    margin-bottom: 1rem;
}

.eg-mt150-container p {
    font-size: 1.125rem;
    font-weight: 400;
    color: #333333;
    margin-bottom: 1.5rem;
}

.card-about-us-benefit {
    box-shadow: unset !important;
    border: 0;
    border-radius: 2.5rem !important;
    background-color: #ECFAFE;
}
.card-about-us-benefit .card-body {
    padding: 2.5rem;
}
/* End - About Us */

/* FAQ */
.btn-switch-faq-wrapper {
    background-color: #ECECEC;
    padding: 4px;
    border-radius: 12px;
    width: fit-content;
    max-width: fit-content;
    margin-left: auto;
    margin-right: auto;
}

.btn-switch-faq {
    border-radius: 12px;
    background-color: #ECECEC;
    color: #6C6C6C;
    min-width: 100px;
    font-size: 14px;
    font-weight: 600;
}

.btn-switch-faq:hover {
    border: 1px solid var(--primary);
    color: var(--primary);
}

.btn-switch-faq.active {
    background-color: var(--primary);
    color: #FFFFFF;
}
/* End - FAQ */

/* Supplier Detail Page */
.verified-supplier {
    width: 24px;
    height: 24px;
    text-align: center;
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url('../img/icon/verified.svg');
}

.il-unverified-supplier {
    background-image: url('../img/illustration/unverified-supplier.svg');
    width: 100%;
    height: 224px;
    background-repeat: no-repeat;
    background-position: center;
}

.supplier-cover-image {
    width: 100%;
    height: 302px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
}

.outlet-content .header-wrapper {
    width:100%;
    position:absolute;
    top:330px;
    left: 50%;
    transform: translateX(-50%);
    margin: 0 auto;
}

.outlet-content .header-wrapper .container-inner {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    border-radius:.5rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 1rem;
    background-color: white;
    padding: 1.5rem 1rem;
}

.outlet-content .header-button-wrapper {
    display: flex;
    gap: 10px;
    width: fit-content;
    height: fit-content;
}

.outlet-content .container-content {
    margin-top: calc(82px + 1rem);
}

#appTabMenuOutlet .scrollable-nav {
    flex-wrap: nowrap;
    border-bottom: 2px solid rgb(245, 245, 245);
    white-space: nowrap;
    overflow-x: scroll;
    -ms-overflow-style: none;
    scrollbar-width: none;
    padding-bottom: 2px;
}

#appTabMenuOutlet .nav-pills .nav-link {
    background: white;
    border: 0;
    border-radius: 0;
    color: #6C6C6C;
    font-weight: 400;
    font-size: .875rem;
}

#appTabMenuOutlet .nav-pills .nav-link:hover {
    color: #00B2DA;
    background-color: #FFFFFF;
}

#appTabMenuOutlet .nav-pills .nav-link.active {
    color: #00B2DA;
    background-color: #FFFFFF;
    font-weight: 600;
    border-bottom: 2px solid #00B2DA;
    margin-bottom: -2px;
}

.outlet-content table tr td {
    color: #333333;
    font-weight: 400;
    font-size: .875rem;
    padding-bottom: .5rem;
    vertical-align: top;
}

.supplier-header-info h2 {
    color: #00B2DA;
    font-size: 1.25rem;
    font-weight: 600;
}

.supplier-header-info .icon-wrapper {
    width: 1rem;
    height: 1rem;
    text-align: center;
}

.supplier-header-info i {
    color: #6C6C6C;
}

.supplier-header-info span {
    font-size: 1rem;
    font-weight: 400;
    color: #6C6C6C;
}

.supplier-index .business-info h3,
.supplier-certification h3 {
    color: #333333;
    font-size: 1.125rem;
    font-weight: 600;
    margin-bottom: 1rem;
}

.supplier-index .business-info .store-description {
    font-size: .875rem;
    font-weight: 400;
}
/* End - Supplier Detail Page */

@media (min-width: 992px) {
    .modal-lg,
    .modal-xl {
        max-width: 992px !important;
    }
}

.modal-md-landscape.promotion .modal-body .flickity-viewport {
    height: 300px !important;
}

.modal-md-landscape .modal-body .flickity-viewport {
    height: 225px !important;
}

.modal-md-landscape .modal-body .flickity-button {
    background: hsla(0, 0%, 100%, 0.2);
}

.bootstrap-dialog .modal-header {
    border-top-left-radius: 10px !important;
    border-top-right-radius: 10px !important;
    padding: .5rem 1rem !important;
}

.bootstrap-dialog.type-primary .modal-header,
.bootstrap-dialog.type-warning .modal-header {
    background-color: var(--primary) !important;
}

.bootstrap-dialog.type-warning .bootstrap-dialog-footer-buttons .btn {
    padding: 5px 20px;
    font-size: .9rem;
    border-radius: 50px;
    margin: auto 10px;
    transition: .4s all;
    text-shadow: none;
    white-space: nowrap;
}

.bootstrap-dialog.type-warning .bootstrap-dialog-footer-buttons .btn-warning {
    background-color: var(--primary);
    border: 1px solid var(--primary);
    color: white;
}

.bootstrap-dialog.type-warning .bootstrap-dialog-footer-buttons .btn-warning .fa-check {
    display: none;
}

.bootstrap-dialog.type-warning .bootstrap-dialog-footer-buttons .btn-outline-secondary .fa-ban {
    display: none;
}

.divider {
    border-left: 1px solid #cccccc;
    margin-top: 20px;
    margin-bottom: 20px;
    margin-left: 10px;
    margin-right: 10px;
}

.no-wrap {
    white-space: nowrap;
}

.btn:focus {
    box-shadow: none;
}

.btn-link {
    color: #555;
}

.btn-link-primary {
    color: var(--primary);
}

.btn-link-primary:hover {
    color: var(--blue);
}

.btn-link:hover {
    text-decoration: none;
    color: var(--primary);
}

.bootstrap-dialog-footer-buttons .btn {
    margin-left: 5px;
}

.eg-button-wrapper-top-mobile {
    width: 100%;
    display: flex;
    padding: 0.625rem 0.75rem;
}

.eg-button-wrapper {
    display: flex;
    justify-content: flex-end;
    margin-top: 1rem;
    margin-bottom: 1rem;
    gap: 0.75rem;
    flex-wrap: wrap-reverse;
}

.btn-eg-primary {
    border-color: var(--primary);
    background-color: var(--primary);
    color: white;
    /* font-size: .875rem; */
}

.btn-eg-secondary {
    color: var(--primary);
    border-color: var(--primary);
    background-color: white;
    /* font-size: .875rem; */
}

.btn-eg-default {
    color: #484848;
    border-color: #E6E6E6;
    background-color: #FFFFFF;
    /* font-size: .875rem; */
}

.btn-eg-negative {
    color: #DB1919;
    border-color: #DB1919;
    background-color: #FFFFFF;
    /* font-size: .875rem; */
}

.btn-eg-bookmark {
    color: #D9D9D9;
    border-color: #E6E6E6;
    background-color: #FFFFFF;
}

.btn-eg-primary:hover,
.btn-eg-primary:focus,
.btn-eg-secondary:hover,
.btn-eg-secondary:focus {
    background-color: var(--blue);
    border-color: var(--blue);
    color: white;
}

.btn-eg-default:hover {
    color: var(--primary);
    border-color: var(--primary);
}

.btn-eg-negative:hover,
.btn-eg-negative:focus {
    color: #FFFFFF;
    background-color: #DB1919;
}

.btn-eg-bookmark.active,
.btn-eg-bookmark.active:hover {
    color: #EB1E00;
}

.btn-eg-bookmark:hover {
    color: rgba(235, 30, 0, 0.6);
}

.btn-round,
.btn-toggle {
    padding: 5px 20px;
    font-size: .9rem;
    border-radius: 50px;
    margin: auto 5px;
    transition: .4s all;
    text-shadow: none;
    white-space: nowrap;
}

.btn-round.btn-sm {
    padding: 3px 10px;
    font-size: .7rem;
}

.btn-round-primary {
    border-color: var(--primary);
    background-color: var(--primary);
    color: white;
}

.btn-round-warning {
    border-color: var(--warning);
    background-color: var(--warning);
    color: white;
}

.btn-round-danger2 {
    border-color: var(--danger);
    background-color: var(--danger);
    color: white !important;
}

.btn-round-danger {
    border-color: #FFDADA;
    background-color: #FFDADA;
    color: var(--danger);
}

.btn-round-grey {
    border-color: #B3B2B2;
    background-color: var(--grey);
}

.btn-round-grey.disabled {
    border-color: #B3B2B2;
    background-color: #000000;
}

.btn-round-white {
    border-color: grey;
    background-color: white;
}

.btn-round-white:hover {
    color: white;
    border-color: var(--primary);
    background-color: var(--primary);
}


.btn-round-outline-grey {
    background-color: white;
    border-color: grey;
    box-shadow: 0px 2px 7px #b7b7b7;
}

.btn-round-gradient-warning {
    background: rgb(255, 83, 48);
    background: linear-gradient(90deg, rgba(255, 83, 48, 1) 0%, rgba(251, 147, 64, 1) 100%);
    color: white;
}

.btn-default {
    background-color: #eee;
    color: #555;
}

.btn-default:hover,
.btn-default:focus {
    background-color: #f9f9f9;
    color: #888;
}

.btn-kv.btn-default:hover,
.btn-kv.btn-default:focus {
    background-color: #888888;
    color: #ddd;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-round-primary:hover,
.btn-round-primary:focus {
    background-color: var(--blue);
    border-color: var(--blue);
    color: white;
}

.btn-round-grey:hover,
.btn-round-grey:focus {
    background-color: white;
}

.btn-round-outline-grey:hover,
.btn-round-outline-grey:focus {
    box-shadow: 0px 2px 7px #929292;
}

.btn-round-gradient-warning:hover,
.btn-round-gradient-warning:focus {
    background: rgb(251, 147, 64);
    background: linear-gradient(90deg, rgba(251, 147, 64, 1) 0%, rgba(255, 83, 48, 1) 100%);
    color: white;
    box-shadow: 0px 2px 7px rgb(255, 83, 48);
}

.btn-circle {
    width: 30px;
    height: 30px;
    text-align: center;
    padding: 6px 0;
    font-size: 12px;
    line-height: 1.428571429;
    border-radius: 15px;
}

.btn-circle.btn-lg {
    width: 50px;
    height: 50px;
    padding: 10px 16px;
    font-size: 18px;
    line-height: 1.33;
    border-radius: 25px;
}

.btn-circle.btn-xl {
    width: 80px;
    height: 80px;
    padding: 10px 16px;
    font-size: 30px;
    line-height: 1.33;
    border-radius: 50%;
}

.btn-primary {
    background-color: var(--primary);
    border-color: var(--primary);
}

.btn-disabled,
.btn-disabled:hover,
.btn-disabled:focus {
    background: #999;
    border-color: #999;
}

.btn-toggle {
    margin: 0;
    color: var(--primary);
    border: 1px solid var(--primary);
    background-color: white;
}

.btn-toggle.active {
    color: white;
    background-color: var(--primary);
}

.btn-login,
.btn-join {
    min-width: 80px;
}


.page-item.page-link {
    color: var(--primary);
}

.page-item.active .page-link {
    background-color: unset;
    border-color: var(--primary);
    border: 1px solid;
    color: var(--primary);
}


.custom-image-upload {
    width: 100px;
    height: 100px;
    cursor: pointer;
    position: relative;
    border-radius: 10px;
    outline: none;
    padding: 50px;
}

.custom-image-upload::after {
    content: attr(data-title);
    position: absolute;
    top: 0;
    left: 0;
    background-color: #fff;
    border: 2px solid #ccc;
    border-radius: 10px;
    width: 100px;
    height: 100px;
    opacity: 1;
    cursor: pointer;
    font-size: .8rem;
    text-align: center;
    padding-top: 40%;
    z-index: 1;
}

.custom-image-upload.small {
    width: 100px;
    height: 30px;
    cursor: pointer;
    position: relative;
    border-radius: 10px;
    outline: none;
    padding: 0;
    margin-top: 25px;
    margin-bottom: 25px;
}

.custom-image-upload.small::after {
    content: attr(data-title);
    position: absolute;
    left: 0;
    background-color: #fff;
    border: 2px solid #ccc;
    border-radius: 10px;
    width: 100px;
    height: 30px;
    opacity: 1;
    cursor: pointer;
    font-size: .8rem;
    text-align: center;
    padding-top: 0;
    z-index: 1;
    line-height: 1.6rem;
}

#upload-container .uploaded_image,
#ref-container .uploaded_image {
    float: left;
    margin-right: 10px;
    position: relative;
    cursor: pointer;
}

#upload-container .uploaded_image .multifile_remove_input {
    position: absolute;
    top: 5px;
    right: 5px;
    color: #777;
    background-color: rgba(255, 255, 255, 0.7);
    line-height: 1rem;
    text-align: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    z-index: 1;
}

#upload-container .uploaded_image img,
#ref-container .uploaded_image img {
    width: 100px;
    height: 100px;
    object-fit: cover;
    border-radius: 10px;
}

#upload-container.small .uploaded_image img {
    width: 60px;
    height: 60px;
    object-fit: cover;
    border-radius: 10px;
}

#upload-container .uploaded_image .filename {
    opacity: 0;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    color: #fff;
    background: rgb(0 0 0 / 26%);
    font-size: .7rem;
    padding-top: 40%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    text-align: center;
    z-index: 0;
}

#upload-container .uploaded_image:hover .filename {
    opacity: 1;
}

#upload-container .no-image,
#ref-container .no-image {
    display: flex;
    justify-content: center;
    width: 100%;
    padding: .25rem 0;
    color: #909090;
    font-size: .875rem;
    font-weight: 400;
}

.h-notif-ms-product {
    padding:.75rem 1rem;
    background-color:#FFF9E6;
    border: 1px solid #FFE399;
    border-radius: .5rem;
}

.nf-info-whatsapp {
    background: linear-gradient(277.78deg, #9AE3F4 -26.38%, #ECFAFE 47.69%);
    padding-top: .75rem;
    padding-bottom: .75rem;
}

.nf-info-whatsapp .nf-icon {
    float: left;
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url('../img/icon/toa-new-feature.svg');
    width: 24px;
    height: 24px;
}

/* CONTENT */
.content-wrapper {
    min-height: calc(100vh - 342px);
    background-color: #FFFFFF;
}

.content-wrapper h2 {
    font-size: 1.4rem;
}

.content-wrapper h3 {
    font-size: 1.25rem;
    font-weight: 600;
}

.content-wrapper h4 {
    font-size: 1rem;
}

.main-content-wrapper {
    position: relative;
    padding: 2rem 5rem;
}

.list-group {
    border-radius: 0;
}

.list-group.list-group-root {
    padding: 0;
    overflow: hidden;
}

.list-group.list-group-root .list-group {
    margin-bottom: 0;
}

.list-group.list-group-root > .list-group > .list-group-item {
    padding-left: 3.2rem;
    padding-top: .5rem;
    padding-bottom: .5rem;
    font-size: .8rem;
}

.list-group.list-group-root > .list-group > .list-group-item:hover,
.list-group.list-group-root > .list-group > .list-group-item.active {
    background-color: transparent;
    color: var(--primary);
}

.list-group.list-group-root > .list-group > .list-group-item::before {
    content: none;
}

.list-group.list-group-root > .list-group > .list-group > .list-group-item {
    padding-left: 45px;
}

.list-group-item i {
    min-width: 20px;
    width: 20px;
}

.list-group .list-group-item {
    border-radius: 0;
    border: 0;
    box-sizing: border-box;
    display: inline-block;
    font-size: .9rem;
    font-weight: normal;
    color: grey;
    padding: .75rem 1.5rem;
}

.list-group .list-group-item[aria-expanded="true"],
.list-group .list-group-item:hover {
    color: #00B2DA;
    background-color: #ECFAFE;
}

.list-group .list-group-item[aria-expanded="true"] i,
.list-group .list-group-item:hover i {
    color: var(--primary);
}

.list-group .list-group-item[data-toggle="collapse"]:after {
    font-family: "Font Awesome 5 Pro";
    content: "\f107";
    position: absolute;
    right: 1.5rem;
}

.list-group .list-group-item[data-toggle="collapse"][aria-expanded="true"]:after {
    font-family: "Font Awesome 5 Pro";
    content: "\f106";
}

.list-group .list-group-item::before {
    content: "";
    border: 1px solid #F5F5F5;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    /* width: calc(100% - 3rem); */
    display: revert;
    margin: 0 auto;
}

h1.title-page {
    font-size: 1.3rem;
}

h2.title-page {
    font-size: 1.1rem;
}

h3.title-page-2 {
    font-size: .875rem;
    font-weight: 400;
}

h3.section-title {
    font-size: 1rem;
    font-weight: 500;
}

.nav-tabs-horizontal .nav-item {
    position: relative;
}

.nav-tabs-horizontal .nav-item .nav-link {
    border-top: 2px solid #ccc;
    color: #ccc;
    font-size: .9rem;
}

.nav-tabs-horizontal .nav-item.active .nav-link {
    border-top: 2px solid var(--primary);
    color: #555;
}

.nav-tabs-horizontal .nav-item .nav-link:hover {
    color: #555;
}

.nav-tabs-horizontal .nav-item .nav-link.active {
    color: var(--primary);
}

.nav-tabs-horizontal .nav-item::after {
    content: "";
    position: absolute;
    top: -5px;
    left: 0;
    border-radius: 50%;
    width: 10px;
    height: 10px;
    background: #ccc;
}

.nav-tabs-horizontal .nav-item.active::after {
    background: var(--primary);
}

.nav-tabs-horizontal .nav-item:first-child::after {
    content: none;
}

.btn-show-side-menu {
    position: absolute;
    top: 50px;
    left: 20px;
    z-index: 1;
}

#hamburger-icon {
    height: 20px;
    z-index: 1019;
}

#hamburger-icon .line {
    display: block;
    background: #7c7c7c;
    width: 25px;
    height: 2px;
    position: absolute;
    left: 0;
    border-radius: 4px;
    transition: all 0.4s;
    -webkit-transition: all 0.4s;
    -moz-transition: all 0.4s;
}

#hamburger-icon .line.line-1 {
    top: 0;
}

#hamburger-icon .line.line-2 {
    top: 50%;
}

#hamburger-icon .line.line-3 {
    top: 100%;
}

#hamburger-icon.active .line-1 {
    transform: translateY(10px) translateX(0) rotate(45deg);
    -webkit-transform: translateY(10px) translateX(0) rotate(45deg);
    -moz-transform: translateY(10px) translateX(0) rotate(45deg);
}

#hamburger-icon.active .line-2 {
    opacity: 0;
}

#hamburger-icon.active .line-3 {
    transform: translateY(-8px) translateX(0) rotate(-45deg);
    -webkit-transform: translateY(-8px) translateX(0) rotate(-45deg);
    -moz-transform: translateY(-8px) translateX(0) rotate(-45deg);
}

.navbar-toggler-custom {
    padding: 6px 4px;
    line-height: 1;
    background-color: transparent;
    border: 1px solid transparent;
    border-radius: 0.25rem;
    margin-right: 0.5rem;
}

.force-w100 {
    flex: 0 0 100% !important;
    max-width: 100% !important;
}

.card {
    box-shadow: 0px 2px 10px 0px rgba(51, 51, 51, 0.1);
    border-radius: 10px;
    transition: all .3s;
}

.card-header {
    border-radius: 10px 10px 0 0 !important;
}

.card-footer {
    border-radius: 0 0 10px 10px !important;
    border: 0;
}

.card-top-product {
    background-color: white;
    box-shadow: 0px 2px 10px 0px #3333331A;
    border-radius: 8px;
    color: grey;
    height: 100%;
    display: flex;
    flex-direction: column;
    transition: all .3s;
}

.card-top-product .card-image {
    background-color: #fff;
    padding-top: 100%;
    width: 100%;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    border-radius: 8px 8px 0 0;
}

.card-top-product .card-body {
    display: flex;
    flex-direction: column;
    gap: .75rem;
    padding: .75rem;
    width: 100%;
    min-height: 150px;
    border-radius: 10px 10px 0 0;
    cursor: pointer;
    font-size: .9rem;
    line-height: calc(.9rem + 8px);
}

.card-top-product h5 {
    min-height: 40px;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.2rem;
    color: #333333;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.card-top-product .card-body img {
    width: 100%;
    height: 100px;
    object-fit: cover;
    margin-bottom: 1rem;
}

.product-favorite {
    position: absolute;
    z-index: 2;
    top: 0;
    right: 0;
    padding: 1px 4.5px;
    border-radius: 50%;
    margin: 4px 20px;
    background-color: #FFFFFF;
    color: #D9D9D9;
}

.product-favorite.active {
    color: #EB1E00;
}

.product-favorite:hover {
    color: rgba(235, 30, 0, 0.6);
}
.product-favorite.active:hover {
    color: #EB1E00;
}

.card-top-product .product-price span:first-child {
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.4rem;
    color: #EB7300;
}

.card-top-product .product-price span:last-child {
    font-size: .875rem;
    font-weight: 400;
    line-height: 1.2rem;
    color: #909090;
}

.card-top-product .product-moq {
    font-size: .75rem;
    font-weight: 400;
    line-height: .9rem;
    color: #909090;
}

.product-availability-period {
    width: fit-content;
    font-size: .7rem;
    font-weight: 600;
    background-color: #F2FDFF;
    color: var(--primary);
    padding: 4px;
    border-radius: 4px;
}

.product-availability-period.pre-order {
    background-color: #FEF2E6;
    color: #EB7300
}

.product-availability-period i {
    float: left;
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: center;
    margin-right: 2px;
    background-image: url('../img/icon/truck-moving.svg');
    width: 23px;
    height: auto;
}

.product-availability-period.pre-order i {
    background-image: url('../img/icon/pre-order.svg');
}

.card-top-product .product-supplier {
    display: flex;
    flex-direction: column;
    gap: 4px;
    line-height: 14px;
    font-size: .75rem;
    font-weight: 400;
    color: #6C6C6C;
}

.card-top-product .card-footer {
    font-size: .7rem;
    font-weight: 500;
    padding: 10px;
    border-radius: 0 0 10px 10px;
    border: 0;
    background-color: white;
    color: grey;
}

.overflowx {
    overflow-x: auto;
    white-space: nowrap;
}

.overflowx::-webkit-scrollbar {
    width: 0;
    height: 0;
}

.overflowy {
    overflow-y: auto;
}

.card-top-product:hover {
    opacity: .9;
    box-shadow: 1px 1px 12px 2px #b7b7b7;
}

.carousel,
.carousel-small-nav {
    visibility: hidden;
}

.site-index .carousel-section .flickity-viewport {
    border-radius: 10px;
}

.site-index .carousel-section .flickity-prev-next-button {
    display: none;
}

.site-index .carousel-section:hover .flickity-prev-next-button {
    display: block;
}

.site-index .carousel-section .flickity-prev-next-button.previous {
    left: -1.2rem;
}
.site-index .carousel-section .flickity-prev-next-button.next {
    right: -1.2rem;
}

.site-index .carousel-section .flickity-page-dots {
    bottom: -1.5rem;
}

.site-index .carousel-section .flickity-page-dots .dot,
.supplier-index .flickity-page-dots .dot {
    background: #DFDFDFB2;
    opacity: 1;
    margin: 0 4px;
}

.site-index .carousel-section .flickity-page-dots .dot.is-selected,
.supplier-index .flickity-page-dots .dot.is-selected {
    background: var(--primary);
    width: 20px;
    border-radius: 32px;
}

.carousel-top-categories .flickity-prev-next-button {
    display: none;
}

.carousel-top-categories:hover .flickity-prev-next-button {
    display: block;
}

.carousel-top-categories .carousel-body,
.carousel-trade-w-us .carousel-body,
.carousel-top-suppliers .carousel-body {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    border-radius: 10px 10px 0 0;
}

.carousel-top-categories .carousel-body {
    width: 140px;
    height: 140px;
}

.carousel-trade-w-us .carousel-body {
    width: 100%;
    height: 185px;
}

.carousel-top-suppliers .carousel-body {
    width: 100%;
    height: 160px;
    border-radius: 10px;
    background-size: contain;
    background-color: white;
}

.carousel-top-categories .carousel-footer {
    background-color: white;
    color: #484848;
    text-align: center;
    font-size: .8rem;
    font-weight: 500;
    padding: 5px;
    border-radius: 0 0 10px 10px;
    margin-top: 6px;
    line-height: 14.4px;
}

.carousel-trade-w-us .carousel-footer {
    background-color: white;
    text-align: center;
    font-size: .9rem;
    padding: 8px;
    border-radius: 0 0 10px 10px;
}

.carousel-trade-w-us a,
.carousel-top-suppliers a {
    width: calc(100% / 3 - 15px);
}

.carousel-top-categories a,
.carousel-trade-w-us a,
.carousel-top-suppliers a {
    transition: all .3s;
    margin: 5px 9.7px;
    /* padding-top: 14px; */
    padding-bottom: 14px;
    border-radius: 10px;
    border: 1px solid #E6E6E6;
    /* box-shadow: 1px 1px 5px #b7b7b7; */
}

.carousel-top-categories a:hover,
.carousel-trade-w-us a:hover,
.carousel-top-suppliers a:hover {
    opacity: .9;
    box-shadow: 1px 1px 12px 1px #b7b7b7;
}

.carousel-top-suppliers .flickity-page-dots {
    bottom: -20px !important;
}

.carousel-top-suppliers .flickity-page-dots .dot {
    background: grey !important;
}

.carousel-small-nav .flickity-prev-next-button.previous {
    left: -12px;
}

.carousel-small-nav .flickity-prev-next-button.next {
    right: -12px;
}

.carousel-small-nav .flickity-prev-next-button {
    width: 24px;
    height: 24px
}

.carousel-small-nav .flickity-button {
    background: hsl(0deg 0% 65% / 75%);
    color: #fff;
}


.carousel-top-categories a:first-child,
.carousel-trade-w-us a:first-child,
.carousel-top-suppliers a:first-child {
    margin-left: 0;
}


.badge-buyer,
.badge-supplier {
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    min-width: 18px;
    min-height: 18px;
}

.badge-star,
.badge-1 {
    background-image: url('../img/badge/1.png');
}

.badge-crown,
.badge-2 {
    background-image: url('../img/badge/2.png');
}

.badge-diamond,
.badge-3 {
    background-image: url('../img/badge/3.png');

}

.badge-silver,
.badge-4 {
    background-image: url('../img/badge/4.png');
}

.badge-emerald,
.badge-5 {
    background-image: url('../img/badge/5.png');
}

.badge-gold,
.badge-6 {
    background-image: url('../img/badge/6.png');
}

.badge-status {
    padding: 5px 10px;
    border-radius: 10px;
    min-width: 80%;
    color: #333333;
    background-color: var(--grey);
}

.badge-status.status-primary {
    background-color: #E6F1FD;
    color: #0072E5;
}

.badge-status.status-primary-fill {
    background-color: #0072E5;
    color: #E6F1FD;
}

.badge-status.status-danger {
    background-color: #FCE9E9;
    color: #DB1919;
}

.badge-status.status-danger-fill {
    background-color: #DB1919;
    color: #FCE9E9;
}

.badge-status.status-success {
    background-color: #DFF6E9;
    color: var(--success);
}

.badge-status.status-success-fill {
    background-color: var(--success);
    color: #DFF6E9;
}

.badge-status.status-info {
    background-color: #CCF0F8;
    color: var(--info);
}

.badge-status.status-info-fill {
    background-color: var(--info);
    color: #CCF0F8;
}

.badge-status.status-warning {
    background-color: #FFF9E6;
    color: #D19800;
}

.badge-status.status-warning-fill {
    background-color: #D19800;
    color: #FFF9E6;
}

.badge-status.status-yellow {
    background-color: #FFF4D0;
    color: var(--yellow);
}

.badge-status.status-yellow-fill {
    background-color: var(--yellow);
    color: #FFF4D0;
}

.badge-status.status-blue {
    background-color: #CCF0F8;
    color: var(--blue);
}

.badge-status.status-blue-fill {
    background-color: var(--blue);
    color: #CCF0F8;
}

.badge-status.status-dark-blue {
    background-color: #CFDCEE;
    color: var(--dark-blue);
}

.badge-status.status-dark-blue-fill {
    background-color: var(--dark-blue);
    color: #CFDCEE;
}

.badge-number {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    font-weight: 600;
    font-size: 1rem;
    text-align: center;
    margin-right: .5rem;
    background-color: var(--grey);
    margin-top: 1px;
}

.badge-number-primary {
    background-color: var(--primary);
    color: #ECFAFE;
}

.badge-number-secondary {
    color: var(--primary);
    background-color: #ECFAFE;
}

.shine {
    position: relative;
}

.shine:after {

    animation: shine 4s ease-in-out infinite;
    animation-fill-mode: forwards;
    content: "";
    position: absolute;
    top: -110%;
    left: -110%;
    width: 100%;
    height: 100%;
    opacity: 0;
    transform: rotate(30deg);

    background: rgba(255, 255, 255, 0.13);
    background: linear-gradient(to right,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0) 77%,
    rgba(255, 255, 255, 1) 92%,
    rgba(255, 255, 255, 0.0) 100%);
}

.change-photo label {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    padding-top: 40%;
    padding-bottom: 40%;
    opacity: 0;
    transition: .4s all;
    text-align: center;
    background-color: rgba(255, 255, 255, 0.5);
}

.change-photo label:hover {
    cursor: pointer;
    opacity: 1;
}

.change-photo .custom-file-upload,
.change-photo .field-image,
.change-photo .field-outletImage {
    display: none;
}

.img-attachment {
    width: 80px;
    height: 80px;
    object-fit: cover;
    border-radius: 10px;
    margin-right: 1rem;
}

.attach-file-label {
    white-space: nowrap;
    overflow-x: hidden;
    overflow-y: hidden;
    text-overflow: ellipsis;
    margin: 0;
    padding: 0;
    margin-left: .5rem;
    font-size: .9rem;
    max-width: 150px;
    min-height: 1rem;
}

/* Hover state - trigger effect */


/* Active state */

.shine:active:after {
    opacity: 0;
}

@keyframes shine {
    10% {
        opacity: 1;
        top: 30%;
        left: 30%;
        transition-property: left, top, opacity;
        transition-timing-function: ease;
    }

    100% {
        opacity: 0;
        top: 30%;
        left: 30%;
        transition-property: left, top, opacity;
    }
}

@keyframes skeleton {
    from {
        background-position: top left
    }

    to {
        background-position: top right
    }
}

.card-trade-with-us {
    box-shadow: 1px 1px 5px #b7b7b7;
    border-radius: 10px;
    transition: all .3s;
}

.card-trade-with-us .card-body {
    background-color: white;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    width: 100%;
    min-height: 150px;
    border-radius: 10px 10px 0 0;
    cursor: pointer;
}

.card-trade-with-us .card-footer {
    background-color: white;
    color: var(--primary);
    font-size: .9rem;
    font-weight: 500;
    text-align: center;
    padding: 10px;
    border-radius: 0 0 10px 10px;
}

.card-trade-with-us:hover {
    opacity: .9;
    box-shadow: 1px 1px 12px 2px #b7b7b7;
}

.floating-widget {
    position: -webkit-sticky;
    position: sticky;
    top: 100px;
}

.floating-chat-button {
    position: fixed;
    bottom: 30px;
    right: 10px;
    border: 0;
    background: rgb(255, 83, 48);
    background: linear-gradient(90deg, rgba(255, 83, 48, 1) 0%, rgba(251, 147, 64, 1) 100%);
    color: white;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    z-index: 1;
}

.floating-chat-button:hover {
    opacity: .9;
}

.card-supplier {
    background-color: white;
    border-radius: 10px;
    box-shadow: 0px 2px 13px #b7b7b7;
}

.card-supplier .card-body {
    color: grey;
    font-size: .9rem;
}

.card-supplier .card-body .supplier-logo {
    width: 80px;
    height: 80px;
    object-fit: cover;
    border-radius: 50%;
}

.card-supplier h3 {
    color: grey;
    font-size: .9rem;
    text-align: center;
    margin: .5rem auto;
}

.card-supplier .supplier-location,
.card-supplier .supplier-followers,
.card-supplier .supplier-info,
.text-small {
    font-size: .7rem;
}

.text-8rem {
    font-size: .8rem;
}

.product-container {
    color: #555;
    font-size: .9rem;
}

.product-container h2 {
    font-size: 1.4rem;
}

table.product-range-price {
    border-collapse: collapse;
    border-radius: 1em;
    overflow: hidden;
    box-shadow: 0 0 0px 1px #ccc;
}

table.product-range-price th,
table.product-range-price td {
    border: 1px solid #ccc;
    text-align: center;
    font-size: .8rem;
}

table.product-range-price th {
    font-weight: normal;
    padding: 4px;
    background: #EDEDED;
}

table.product-range-price td {
    padding: 4px;
    background: white;
    color: var(--primary);
}

tr.row-error {
    border: 1px solid red;
}

/* .qty-editor i {
    color: grey;
}

.qty-editor-input {
    border-top: 0;
    border-right: 0;
    border-left: 0;
    border-bottom: 1px solid #ccc;
    text-align: center;
    width: 70px;
}

.qty-editor-input:hover,
.qty-editor-input:focus,
.qty-editor button:hover,
.qty-editor button:focus {
    outline: none;
    box-shadow: none;
} */

.carousel-supplier-product .carousel-main .carousel-cell,
.carousel-company .carousel-cell {
    border-radius: 10px;
}


.carousel-supplier-product .carousel-cell {
    width: 100%;
    padding-top: 100%;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    margin-right: 10px;
    position: relative;
}

.carousel-supplier-product .carousel-main:hover .carousel-cell::after {
    content: "\f067";
    font-family: "Font Awesome 5 Pro";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    color: rgba(255, 255, 255, .8);
    background-color: rgba(0, 0, 0, .2);
}

.carousel-supplier-product .carousel-main:hover .carousel-video-cell::after {
    content: "\f144";
    font-family: "Font Awesome 5 Pro";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    color: rgba(255, 255, 255, .8);
    background-color: rgba(0, 0, 0, .2);
}


.carousel-company .carousel-cell {
    width: calc((100% / 4) - 10px);
    height: 120px;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    margin-right: 10px;
    border-radius: 10px;
}

.carousel-company.carousel-small-nav .flickity-prev-next-button.previous {
    left: 10px;
}

.carousel-company.carousel-small-nav .flickity-prev-next-button.next {
    right: 10px;
}

.carousel-supplier-company .carousel-cell {
    width: 100%;
    padding-top: 50%;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    margin-right: 10px;
    border-radius: 10px;
}

.carousel-supplier-product .carousel-nav .carousel-cell {
    height: 80px;
    width: 80px;
    padding-top: 0;
}

.product-detail .nav-tabs .nav-link {
    color: grey;
    border: 1px solid grey;
    font-size: .8rem;
    position: relative;
    padding-right: 2rem;
    min-width: 200px;
    border-bottom: 0;
}

.product-detail .nav-tabs .nav-link::after {
    font-family: "Font Awesome 5 Pro";
    content: "\f107";
    position: absolute;
    right: 10px;
}

.product-detail .nav-tabs .nav-link.active::after {
    font-family: "Font Awesome 5 Pro";
    content: "\f106";
    position: absolute;
    right: 10px;
}

.product-detail .nav-tabs .nav-link.active {
    background-color: var(--primary);
    color: white;
}

.product-detail .nav-tabs .nav-link:first-child {
    border-radius: 10px 0 0 0;
    border-right: 0;
}

.product-detail .nav-tabs .nav-link:last-child {
    border-radius: 0 10px 0 0;
}

.product-detail .tab-content {
    border: 1px solid #ccc;
    border-radius: 0 10px 10px 10px;
    padding: 1rem;
    font-size: .7rem;
}

.product-detail h4 {
    font-size: 1rem;
}


/* .table-detail tr td:first-child::after {
    content: ": ";
    float: right;
} */
.table {
    color: #706f6f;
}

.table th {
    font-size: .8rem;
    font-weight: 600;
}

.table td {
    font-size: .8rem;
}

.table-detail tr td,
.table-company tr td,
.table-head-grey tr td,
.table-head-grey tr th {
    padding: .5rem;
}

.table-detail tr td:first-child,
.table-company tr td:first-child,
.table-company tr td:nth-child(3) {
    width: 180px;
    background-color: #F6F6F6;
}

.table-head-grey tr th {
    background-color: #F6F6F6;
    color: #777;
    font-size: .8rem;
}

.table-blue thead {
    background-color: var(--primary);
    color: white;
}

.section-gridview {
    overflow: hidden;
}

.table-blue tbody tr:hover,
.kv-grid-table tbody tr:hover {
    background-color: #EBF8FC;
}

.table-blue tbody tr:hover,
.no-hover.kv-grid-table tbody tr:hover {
    background-color: initial;
}

.table-info td {
    background-color: white;
}

.table-responsive table thead td {
    /* background-color: var(--primary); */
}

.table-responsive table thead tr {
    /* background-color: var(--primary); */
}

.table-complain-detail thead td {
    vertical-align: middle;
    color: #333333;
    font-weight: 600;
}

.btn-subscription {
    position: absolute;
    bottom: 0
}

.no-overflow #w0 #w0-container.table-responsive.kv-grid-container {
    overflow-x: hidden;
}

.table-vertical-align-middle td {
    vertical-align: middle;
}


#productCarouselModal .carousel-nav-modal {
    overflow-y: auto;
    max-height: 200px;
}

#productCarouselModal .carousel-nav-modal .carousel-cell {
    width: 100px;
    height: 100px;
    background-position: center;
    background-size: cover;
    cursor: pointer;
}

#productCarouselModal .main-image {
    min-width: 100%;
    height: 500px;
}

.video-wrapper {
    position: relative;
    padding-bottom: 56.25%;
    /* 16:9 */
    padding-top: 25px;
    height: 0;
}

.video-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.card-search {
    background-color: white;
    padding-top: 1rem;
    padding-bottom: 1rem;
    font-size: .8rem;
    color: grey;
    border-radius: 10px;
    box-shadow: 0px 0px 13px 0px #d0d0d0;
    position: relative;
}

.card-search h3 {
    color: #555;
}

.card-search .price {
    color: var(--primary);
    font-weight: bold;
}

.carousel-search {
    visibility: visible;
}

.carousel-search .carousel-cell {
    width: 100%;
    padding-top: 100%;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    margin-right: 10px;
}

.carousel-search button {
    opacity: 0 !important;
    transition: .4s all;
}

.carousel-search:hover > button {
    opacity: 1 !important;
}

.card-search-inline {
    display: inline;
}

.card-search-grid .card-search {
    height: 100%;
    padding: 1rem;
    margin: auto .2rem;
}

.card-search-grid .card-search h3 {
    font-size: .9rem;
    font-weight: 700;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: pre-wrap;
    line-height: 1.2;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.card-search-supplier-grid .img-logo {
    width: 50px;
    height: 50px;
    object-fit: cover;
    border-radius: 50%;
}

.card-search-inline .card-supplier-item {
    border: 1px solid #E6E6E6;
    border-radius: .5rem;
    height: 100%;
}

.card-search-supplier-grid .header-1 {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .25rem;
}

.card-search-supplier-grid h3 {
    color: var(--primary);
    font-size: 1rem;
    font-weight: 600;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: pre-wrap;
    line-height: 1.2;
    margin-bottom: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.card-search-supplier-grid .icon-wrapper {
    width: 1rem;
    height: 1rem;
    text-align: center;
}

.card-search-supplier-grid .icon-wrapper i {
    color: #6C6C6C;
    font-size: .875rem;
}

.card-search-supplier-grid span {
    font-size: .875rem;
    font-weight: 400;
    line-height: 1.5rem;
    color: #6C6C6C;
}

.card-search-supplier-grid .card-search {
    height: 100%;
    box-shadow: 0px 0px 1px 1px #ccc;
}

.card-search-supplier-grid .overview-product .col {
    margin-right: .5rem;
}

.card-search-supplier-grid .overview-product .col:last-child {
    margin-right: 0;
}

.card-search-supplier-grid .overview-product div.product-image {
    width: 100%;
    padding-top: 0;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    margin: 0 auto;
}

.card-search-supplier-grid .overview-product div.product-image-1 {
    padding-top: 20%;
    width: calc(100%);
}

.card-search-supplier-grid .overview-product div.product-image-2 {
    padding-top: 35%;
}

.card-search-supplier-grid .overview-product div.product-image-3 {
    padding-top: 55%;
    width: calc(100% / 1.25);
}

.card-search-supplier-grid .overview-product div.product-image-4 {
    padding-top: 75%;
}

.card-search-supplier-grid .supplier-products {
    display: flex;
    justify-content: start;
    gap: .5rem;
    overflow: hidden;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.card-search-supplier-grid .product-image-x {
    width: 88px;
    height: 88px;
    object-fit: cover;
    object-position: center;
    background-position: center;
    background-size: cover;
    border-radius: .5rem;
}

.font-weight-500 {
    font-weight: 500;
}

.search-pager ul li a,
.search-pager .page-item:last-child .page-link,
.search-pager .page-item:first-child .page-link,
.pagination .page-item:last-child .page-link,
.pagination .page-item:first-child .page-link {
    margin: 0;
    border: 0;
    border-radius: 8px;
    padding: 3px 9px;
    color: grey;
}

.tab-link-selection {
    /* border-bottom: 2px solid #CCCCCC; */
    margin-bottom: 1rem;
}

.tab-link-selection-wrapper {
    display: flex;
    width: 100%;
    flex-wrap: wrap;
}

.tab-link-selection .btn-tab {
    flex: 1;
    border-width: 0 0 2px 0;
    border-style: solid;
    border-color:  #CCCCCC;
    background: transparent;
    /* padding-left: 0; */
    /* padding-right: 0; */
    padding-top: .5rem;
    padding-bottom: .5rem;
    /* margin-bottom: -2px; */
    border-radius: 0;
    transition: .4s all;
    outline: 0;
    box-shadow: none;
    color: #6C6C6C;
    font-size: .9rem;
    text-wrap: nowrap;
}

.tab-link-selection .btn-tab.active {
    font-weight: 600;
    border-color: var(--primary);
    color: var(--primary);
}

.tab-link-selection .btn-tab:hover {
    border-color: var(--primary);
    color: #333;
}

.one-line {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: pre-wrap;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}

.center-icon {
    min-width: 20px;
    text-align: center;
    margin-right: .3rem
}

.icon {
    width: 24px;
    height: 20px;
    margin-right: .4rem;
    float: left;
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: center;
}

.icon.egi-account-active {
    background-image: url('../img/icon/account-active.svg');
    width: 16px;
}
.icon.egi-account {
    background-image: url('../img/icon/account.svg');
    width: 16px;
}
.icon.egi-calendar {
    background-image: url('../img/icon/calendar.svg');
    width: 16px;
}
.icon.egi-category {
    background-image: url('../img/icon/category.svg');
    width: 16px;
}
.icon.egi-contact-us {
    background-image: url('../img/icon/contact-us.svg');
    width: 16px;
}
.icon.egi-contract-active {
    background-image: url('../img/icon/contract-active.svg');
    width: 16px;
}
.icon.egi-contract {
    background-image: url('../img/icon/contract.svg');
    width: 16px;
}
.icon.egi-dashboard-active {
    background-image: url('../img/icon/dashboard-active.svg');
    width: 16px;
}
.icon.egi-dashboard {
    background-image: url('../img/icon/dashboard.svg');
    width: 16px;
}
.icon.egi-help-center-active {
    background-image: url('../img/icon/help-center-active.svg');
    width: 16px;
}
.icon.egi-help-center {
    background-image: url('../img/icon/help-center.svg');
    width: 16px;
}
.icon.egi-image-remove {
    background-image: url('../img/icon/image-remove.svg');
    width: 16px;
}
.icon.egi-inbox-active {
    background-image: url('../img/icon/inbox-active.svg');
    width: 16px;
}
.icon.egi-inbox {
    background-image: url('../img/icon/inbox.svg');
    width: 16px;
}
.icon.egi-logout-active {
    background-image: url('../img/icon/logout-active.svg');
    width: 16px;
}
.icon.egi-logout {
    background-image: url('../img/icon/logout.svg');
    width: 16px;
}
.icon.egi-my-list {
    background-image: url('../img/icon/my-list.svg');
    width: 16px;
}
.icon.egi-notification {
    background-image: url('../img/icon/notification.svg');
    width: 16px;
}
.icon.egi-order-active {
    background-image: url('../img/icon/order-active.svg');
    width: 16px;
}
.icon.egi-order {
    background-image: url('../img/icon/order.svg');
    width: 16px;
}
.icon.egi-product-active {
    background-image: url('../img/icon/product-active.svg');
    width: 16px;
}
.icon.egi-product {
    background-image: url('../img/icon/product.svg');
    width: 16px;
}
.icon.egi-report-active {
    background-image: url('../img/icon/report-active.svg');
    width: 16px;
}
.icon.egi-report {
    background-image: url('../img/icon/report.svg');
    width: 16px;
}
.icon.egi-sales-order {
    background-image: url('../img/icon/sales-order.svg');
    width: 16px;
}
.icon.egi-settings-active {
    background-image: url('../img/icon/settings-active.svg');
    width: 16px;
}
.icon.egi-settings {
    background-image: url('../img/icon/settings.svg');
    width: 16px;
}
.icon.egi-total-sales-order {
    background-image: url('../img/icon/total-sales-order.svg');
    width: 16px;
}
.icon.egi-transaction-active {
    background-image: url('../img/icon/transaction-active.svg');
    width: 16px;
}
.icon.egi-transaction {
    background-image: url('../img/icon/transaction.svg');
    width: 16px;
}

.ft-icon {
    min-width: 20px;
    min-height: 20px;
    float: left;
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: center;
}

.ft-icon.egi-instagram {
    background-image: url('../img/icon/ft-instagram.svg');
}
.ft-icon.egi-facebook {
    background-image: url('../img/icon/ft-facebook.svg');
}
.ft-icon.egi-x-twitter {
    background-image: url('../img/icon/ft-x-twitter.svg');
}
.ft-icon.egi-linkedin {
    background-image: url('../img/icon/ft-linkedin.svg');
}

.il-no-product {
    background-image: url('../img/illustration/no-product.png');
    width: 100%;
}

.nav-link.category:hover .egi-category {
    background-image: url('../img/icon/category-active.svg');
}

.list-group .list-group-item[aria-expanded="true"] .icon.egi-account,
.list-group .list-group-item:hover .icon.egi-account {
    background-image: url('../img/icon/account-active.svg');
}
.list-group .list-group-item[aria-expanded="true"] .icon.egi-contract,
.list-group .list-group-item:hover .icon.egi-contract {
    background-image: url('../img/icon/contract-active.svg');
}
.list-group .list-group-item[aria-expanded="true"] .icon.egi-dashboard,
.list-group .list-group-item:hover .icon.egi-dashboard {
    background-image: url('../img/icon/dashboard-active.svg');
}
.list-group .list-group-item[aria-expanded="true"] .icon.egi-help-center,
.list-group .list-group-item:hover .icon.egi-help-center {
    background-image: url('../img/icon/help-center-active.svg');
}
.list-group .list-group-item[aria-expanded="true"] .icon.egi-inbox,
.list-group .list-group-item:hover .icon.egi-inbox {
    background-image: url('../img/icon/inbox-active.svg');
}
.list-group .list-group-item[aria-expanded="true"] .icon.egi-my-list,
.list-group .list-group-item:hover .icon.egi-my-list {
    background-image: url('../img/icon/my-list-active.svg');
}
.list-group .list-group-item[aria-expanded="true"] .icon.egi-order,
.list-group .list-group-item:hover .icon.egi-order {
    background-image: url('../img/icon/order-active.svg');
}
.list-group .list-group-item[aria-expanded="true"] .icon.egi-product,
.list-group .list-group-item:hover .icon.egi-product {
    background-image: url('../img/icon/product-active.svg');
}
.list-group .list-group-item[aria-expanded="true"] .icon.egi-report,
.list-group .list-group-item:hover .icon.egi-report {
    background-image: url('../img/icon/report-active.svg');
}
.list-group .list-group-item[aria-expanded="true"] .icon.egi-settings,
.list-group .list-group-item:hover .icon.egi-settings {
    background-image: url('../img/icon/settings-active.svg');
}
.list-group .list-group-item[aria-expanded="true"] .icon.egi-transaction,
.list-group .list-group-item:hover .icon.egi-transaction {
    background-image: url('../img/icon/transaction-active.svg');
}

.card-search-grid .carousel-search .carousel-cell {
    padding-top: 100%;
}


.with-chevron[aria-expanded='true'] i {
    display: block;
    transform: rotate(180deg) !important;
}

.kv-panel-before a {
    margin-bottom: 0.25rem;
}

.panel-filter .card {
    border-radius: 0 0 10px 10px;
}

.panel-filter .card-body {
    max-height: 200px;
    /* overflow-y: auto; */
    font-size: .8rem;
    color: grey;
}

.panel-filter label {
    cursor: pointer;
}

.panel-filter .seemore-container {
    position: fixed;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    background-color: white;
    border: 1px solid #ddd;
    border-radius: .75rem;
    z-index: 1050;
    width: 612px;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
}

.seemore-container .alphabet-group-wrapper {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    height:305px;
    overflow-y:auto;
}

.seemore-container .alphabet-group-key {
    color: #626262;
    font-weight: 600;
    font-size: .875rem;
    margin-bottom: .5rem;
}

.seemore-container .alphabet-group-items {
    display: flex;
    gap: .5rem;
    flex-wrap: wrap;
}

.seemore-container .alphabet-group-items label {
    display: flex;
    align-items: start;
    width: 32%;
    line-height: 15px;
}

.btn-panel-filter {
    background-color: white;
    color: #333333;
    font-size: .875rem;
    font-weight: 600;
    /* padding: 0; */
    transition: .4s all;
}

.btn-panel-filter:hover,
.btn-panel-filter:focus {
    background-color: white;
    color: #333333;
}

.btn.btn-panel-filter[aria-expanded="false"] {
    border-radius: 10px;
}

.panel-filter-mobile {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.panel-filter-mobile .items-wrapper {
    display: flex;
    flex-wrap:wrap;
    gap:.5rem;
    row-gap:1rem;
}

.panel-filter-mobile .btn-item {
    text-wrap: nowrap;
    font-weight: 400;
    color: #6C6C6C;
    background-color: white;
    border-color: #D9D9D9;
    border-radius: .5rem;
    line-height: 1.225rem;
}

.panel-filter-mobile .btn-item.active {
    font-weight: 600;
    background-color: #ECFAFE;
    border-color: #9AE3F4;
    color: #00B2DA;
}

.btn-layout-selection {
    color: grey;
    box-shadow: none;
    outline: none;
}

.btn-layout-selection.active {
    color: var(--primary);
}

.filter-header {
    /* border-bottom: 2px solid #CCCCCC;
    padding-top: 4px;
    padding-bottom: .5rem; */
}

.filter-header h5 {
    font-size: 1.1rem;
}

.filter-header a {
    color: grey;
    font-size: .7rem;
}

.filter-header a:hover {
    color: var(--primary);
}

.floating-button {
    position: fixed;
    bottom: 50px;
    right: 20px;
    z-index: 1;
}

.search-sort {
    font-size: .9rem;
}

.select-sort,
.select-round {
    border-radius: 20px;
    padding: .3rem .4rem;
    cursor: pointer;
    outline: 0;
    font-size: .8rem;
}

.select-sort option,
.select-round option {
    padding: .5rem;
    cursor: pointer;
}

.card-supplier {
    font-size: .8rem;
    border-radius: 10px;
}

.card-supplier a {
    line-height: 2.4rem;
    color: grey;
}

.card-supplier a:hover,
.card-supplier a.active {
    color: #333;
}

.card-supplier a:hover i,
.card-supplier a.active i {
    color: var(--primary);
}

.card-supplier a i {
    width: 24px;
    text-align: center;
}

.supplier-info-container {
    background-color: white;
    box-shadow: 0px 3px 9px #e6e6e6;
}

.supplier-banner {
    width: 100%;
    min-height: 200px;
    position: relative;
    font-size: .8rem;
}

.supplier-banner .img-banner {
    max-height: 350px;
}

.supplier-banner .supplier-logo {
    width: 70px;
    height: 70px;
    object-fit: cover;
    border-radius: 50%;
    border: 2px solid #ddd;
}

.supplier-banner h2 {
    font-size: 1.1rem;
    color: #707294;
    margin-bottom: 0;
    text-transform: capitalize;
}

.supplier-location-follower {
    color: #707294;
}

.supplier-location-follower i {
    color: #B3B2B2;
}


.supplier-info {
    font-size: .8rem;
    color: grey;
}

.supplier-rating {
    position: sticky;
    top: 180px;
    color: grey;
    font-size: .8rem;
    min-width: 100px;
    text-align: center;
}

.supplier-rating .rate {
    font-size: 3rem;
    color: #222;
}

.supplier-rating .rate-star {
    font-size: .7rem;
    color: #aaa;
}

.supplier-rating .rate-star i.fas {
    font-size: .7rem;
    color: var(--warning);
}

.supplier-container .card {
    border-radius: 10px;
}

.modal-header h5 {
    font-size: 1rem;
}

.btn-qty:hover i {
    color: var(--primary);
}


.modal-open {
    padding-right: 0 !important;
}

.card-join-buyer {
    border-radius: 8px;
    border: 0;
    box-shadow: 0px 1px 9px #ccc;
}

[v-cloak] {
    display: none;
}

#appCart {
    min-height: calc(100vh - 350px);
    padding: 10px 0;
}

.card-cart-supplier a.cart-supplier-item:first-child {
    border-top: 1px solid #ccc;
}

.card-cart-supplier a.cart-supplier-item {
    border-bottom: 1px solid #ccc;
    padding: .5rem;
    color: #555;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow-x: hidden;
    width: 100%;
    cursor: pointer;
    font-size: .9rem;
}

.card-cart-supplier a.cart-supplier-item i {
    min-width: 20px;
    text-align: center;
}

.card-cart-supplier a.cart-supplier-item:hover,
.card-cart-supplier a.cart-supplier-item.active {
    background-color: #C2ECF6;
}

.card-cart-supplier a.cart-supplier-item .outlet {
    font-size: .7rem;
    margin-top: .2rem;
}

.card-cart,
.card-cart-supplier {
    border-radius: 10px;
    box-shadow: 0px 2px 13px #b7b7b7;
    font-size: 1rem;
}

.card-cart h2 {
    font-size: 1.2rem;
}

.card.card-border-red {
    border-color: red;
}

.table-cart th,
.table-cart td {
    font-size: .8rem;
    font-weight: normal;
}

.table-cart td img {
    border-radius: 4px;
}

.table-cart-total tr:last-child td:first-child,
.table-summary-detail tr:last-child td:first-child {
    border-bottom-left-radius: 10px;
    border-top-left-radius: 10px;
}

.table-cart-total tr:last-child td:last-child,
.table-summary-detail tr:last-child td:last-child {
    border-bottom-right-radius: 10px;
    border-top-right-radius: 10px;
}

table.table.table-summary-detail tr:last-child td,
table.table-cart-total tr:last-child td {
    border: 0;
}

.table-quotation td {
    padding: .2rem .5rem;
}

.table-quotation td.catalogue,
.table-quotation td.first-request,
.table-quotation td.first-offering,
.table-quotation td.second-request,
.table-quotation td.final-offering {
    text-align: center;
    min-width: 100px;
}

.table-quotation td.catalogue,
.table-quotation tr.catalogue {
    background-color: #EDEDED !important;
    color: #555;
}

.table-quotation td.first-request,
.table-quotation tr.first-request {
    background-color: #DADADA !important;
    color: #555;
}

.table-quotation td.first-offering,
.table-quotation tr.first-offering {
    background-color: #C6C6C6 !important;
    color: white;
}

.table-quotation td.second-request,
.table-quotation tr.second-request {
    background-color: #B3B2B2 !important;
    color: white;
}

.table-quotation td.final-offering,
.table-quotation tr.final-offering {
    background-color: var(--primary) !important;
    color: white;
}

.table-quotation tfoot td {
    border: none;
}

.btn-delete {
    height: fit-content;
    padding: 0 !important;
    margin: 0 !important;
    border: 0;
    outline: 0;
    background: transparent;
}

.btn-delete:hover,
.btn-delete:focus {
    color: var(--danger);
}

.border-radius-10 {
    border-radius: 10px;
}

.border-radius-4 {
    border-radius: 4px;
}

.qty-group {
    flex-wrap: nowrap;
}

.qty-group .qty-input {
    padding: 0;
    max-width: 45px;
    min-width: 30px;
    height: 20px;
    font-size: .8rem;
    border: 1px solid #ccc;
}

.qty-group .btn {
    padding: 0 .5rem;
    height: 20px;
    font-size: .8rem;
    font-weight: 600;
    border-radius: 0;
    border: 1px solid #ccc;
}

.qty-group .btn:hover,
.qty-group .btn:focus {
    color: var(--primary);
    background: transparent;
    box-shadow: none;
}

.paginate-links,
.pagination {
    display: flex;
    flex-wrap: wrap;
    padding-left: 0;
    list-style: none;
    border-radius: 0.25rem;
    justify-content: center;
}

.paginate-links.cartItems {
    justify-content: start;
    margin: 10px 0;
}

.paginate-links li,
.pagination li {
    list-style: none;
    float: left;
    min-width: 24px;
    text-align: center;
    white-space: nowrap;
}

.paginate-links li a,
.pagination li a {
    position: relative;
    display: block;
    margin: 0 1px;
    border-radius: 10px;
    border: 0;
    padding: 3px 9px;
    line-height: 1.25;
    cursor: pointer;
    color: #6C6C6C;
    font-weight: 400;
}

.paginate-links li.active a,
.paginate-links li.active a:hover,
.pagination li.active a,
.pagination li.active a:hover {
    background-color: white;
    border: 1px solid;
    border-color: var(--primary);
    color: var(--primary);
}

.paginate-links li a:hover,
.pagination li a:hover {
    background-color: #ddd;
    color: var(--primary) !important;
}

.paginate-links li.left-arrow {
    min-width: 110px;
}

.paginate-links li.left-arrow {
    min-width: 70px;
}

.paginate-links li.left-arrow a::before {
    content: "\f053";
    font-size: .8rem;
    margin-right: 5px;
    font-family: 'Font Awesome 5 Pro';
}

.paginate-links li.right-arrow a::after {
    content: "\f054";
    font-size: .8rem;
    margin-left: 5px;
    font-family: 'Font Awesome 5 Pro';
}

/* CUSTOM FORM */
.form-group .form-control:not(.file-caption) {
    /* border-right: 0;
    border-left: 0;
    border-top: 0;
    border-radius: 0;
    background: transparent;
    padding: 0; */
    font-size: .8rem;
    /* box-shadow: none; */
    /* border-radius: 8px; */
}

.form-control.disabled,
.form-control:disabled {
    padding: 2px 4px !important;
    background-color: #eae8e8 !important;
}

.form-group label {
    font-size: .8rem;
    /* margin: 0 0 2px 0; */
    /* color: #706F6F; */
    /* display: block; */
    /* line-height: .8rem; */
}

input:read-only {
    outline: 0;
}

textarea.form-control {
    /* margin-top: 10px; */
}

label {
    cursor: pointer;
}

.custom-control label {
    line-height: 1.6rem;
}

.text-muted {
    color: #aaa !important;
}

.text-red {
    color: red !important;
}

.form-control::placeholder {
    color: #CCCCCC !important;
    opacity: 1;
    /* Firefox */
}

.form-control:-ms-input-placeholder {
    color: #CCCCCC !important;
}

.form-control::-ms-input-placeholder {
    color: #CCCCCC !important;
}

.form-control-custom {
    border-width: 0 0 1px 0;
    border-radius: 0;
    font-size: .8rem;
    height: auto;
}

.has-search .form-control {
    padding-left: 2.375rem;
    font-size: .875rem !important;
}

.has-search .form-control-icon {
    position: absolute;
    z-index: 2;
    display: block;
    width: 2.375rem;
    height: 2.375rem;
    line-height: 2.05rem;
    text-align: center;
    pointer-events: none;
    color: #aaa;
}

.has-search-md .form-control {
    font-size: 1rem !important;
}

.has-search-md .form-control-icon {
    height: 2rem;
}

.input-group-custom .input-group-text {
    background-color: transparent;
    border-top: 0;
    border-right: 0;
    padding-bottom: 0;
    padding-top: 0;
    padding-left: 5px;
    padding-right: 5px;
    font-size: .8rem;
    color: #777;
    min-width: 20px;
}

.input-group-custom .input-group-append .btn {
    padding-bottom: 0;
    border-radius: 0;
    border-style: solid;
    border-color: #CED4DA;
    border-width: 0px 0px 1px 0px;
    color: #ccc;
    padding-left: 5px;
    padding-right: 5px;
    font-size: .8rem;
}

.input-group-custom .input-group-append .btn:last-child {
    border-left-width: 1px;
}

.input-group-custom .input-group-append .btn:hover,
.input-group-custom .input-group-append .btn:active {
    background-color: transparent;
    color: #555;
}

.showHidePassword {
    position: absolute;
    top: 15px;
    right: 10px;
    background: transparent;
    border: 0;
}

.outline-0 {
    outline: 0 !important;
}

/* Custom Kartik select2 */
.select2-container--krajee-bs4 .select2-selection--multiple .select2-search--inline .select2-search__field {
    min-width: 100% !important;
}

.select2-container--krajee-bs4 .select2-selection {
    /* border-bottom: 1px solid #ccc;
    border-left: none;
    border-right: none;
    border-top: none;
    padding-top: 10px !important;
    padding-left: 0 !important; */
    font-size: .8rem;
    /* box-shadow: none;
    border-radius: 0; */
}

.select2-container--krajee-bs4 .select2-selection[aria-disabled="true"] {
    padding-left: 4px !important;
}

.select2-container--krajee-bs4 .select2-selection:hover {
    cursor: pointer;
}

.select2-container--krajee-bs4 .select2-selection--single .select2-selection__arrow {
    border-left: none;
}

.form-group .select2-container--krajee-bs4 .select2-selection--single .select2-selection__arrow {
    border-left: 1px solid #dedede;
    padding: 0 10px;
}

.select2-container--krajee-bs4.select2-container--open:not(.select2-container--disabled) .select2-selection,
.select2-container--krajee-bs4:not(.select2-container--disabled) .select2-selection:focus {
    box-shadow: none;
}

.select2-container--krajee-bs4:not(.select2-container--disabled) .select2-dropdown {
    box-shadow: none;
    border: 1px solid #ccc;
}

.select2-container--krajee-bs4 .select2-results__option--highlighted[aria-selected] {
    background-color: var(--primary);
}

.select2-container--krajee-bs4 .select2-selection--multiple .select2-selection__choice {
    color: #fff;
    background-color: var(--primary) !important;
    border: 1px solid var(--primary);
    border-radius: 20px;
    cursor: pointer;
    padding: .2rem .5rem;
    font-size: .8rem;
}

.select2-container--krajee-bs4 .select2-selection--multiple .select2-selection__choice__remove {
    font-size: .8rem;
    line-height: 1.2rem;
    color: #fff;
    text-shadow: none;
}

.select2-container--krajee-bs4 .select2-selection--multiple .select2-selection__clear {
    top: -14px;
}

/* .select2-container--krajee-bs4 .select2-selection--multiple .select2-search--inline .select2-search__field {
    height: auto;
} */

.select2-container--krajee-bs4 .select2-selection--single {
    height: 2.25rem;
}

.select2-container--krajee-bs4.select2-container--disabled .select2-selection,
.select2-container--krajee-bs4.select2-container--disabled .select2-selection--multiple .select2-selection__choice,
.form-control:disabled,
.form-control[readonly] {
    background-color: #eae8e8;
}

.border-warning .select2-container--krajee-bs4 .select2-selection {
    border-bottom: 1px solid var(--warning);
}

/*custom select*/
.app-select {
    position: relative;
    width: 100%;
    text-align: left;
    outline: none;
    height: 30px;
    line-height: 30px;
}

.app-select .selected {
    background-color: #fff;
    border-radius: .5rem;
    border: 1px solid #D9D9D9;
    color: #333333;
    font-weight: 400;
    font-size: .875rem;
    padding-left: .75rem;
    cursor: pointer;
    user-select: none;
    z-index: 4;
    position: relative;
}

.app-select .selected.open {
    border: 1px solid var(--primary);
    border-radius: .5rem;
}

.app-select .selected:after {
    position: absolute;
    content: "\f107";
    font-family: 'Font Awesome 5 Pro';
    font-size: 1.2rem;
    right: .75rem;
}

.app-select .selected.open:after {
    position: absolute;
    content: "\f106";
    font-family: 'Font Awesome 5 Pro';
    font-size: 1.2rem;
    right: .75rem;
}

.app-select .items {
    color: #333333;
    border-radius: 0 0 .5rem .5rem;
    overflow: hidden;
    /* border-right: 1px solid #D9D9D9;
    border-left: 1px solid #D9D9D9;
    border-bottom: 1px solid #D9D9D9; */
    box-shadow: 0px 3px 16px 0px #3333331A;
    position: absolute;
    background-color: #FFFFFF;
    left: 0;
    right: 0;
    z-index: 3;
    margin-top: -20px;
    padding-top: 20px;
}

.app-select .items div {
    padding-left: .75rem;
    cursor: pointer;
    user-select: none;
}

.app-select .items div:hover,
.app-select .items .active {
    color: #555 !important;
    background-color: #ECFAFE;
}

.app-select .items .active:after {
    position: absolute;
    content: "\f00c";
    font-family: 'Font Awesome 5 Pro';
    font-size: 1rem;
    color: var(--primary);
    right: .75rem;
}

.selectHide {
    display: none;
}

/*end custom select*/

.file-preview {
    margin: 5px auto;
}

.krajee-default.file-preview-frame {
    zoom: .6;
}

.krajee-default.file-preview-frame .kv-file-content {
    width: 160px;
    height: 80px;
}

.krajee-default .file-footer-caption {
    margin-bottom: 10px;
}

.krajee-default.file-preview-frame img.file-preview-image {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
}

.file-drop-zone {
    min-height: auto;
}

.file-drop-zone-title {
    padding: 10px;
}

.profile-progress {
    margin-top: -2rem;
    font-size: .8rem;
}

/* DASHBOARD */

.card-item-dashboard {
    display: flex;
    flex-direction: column;
    height: 100%;
    border: 1px solid #E6E6E6;
    border-radius: 8px;
    padding: 16px;
    line-height: normal;
    justify-content: space-between;
}


.card-item-dashboard i {
    width: 30px;
    min-width: 30px;
    height: 30px;
    margin-right: 14px;
}

.icon-item-dashboard {
    background-image: url('../img/icon/item-dashboard.svg');
    background-repeat: no-repeat;
}

.card-item-dashboard .item-title {
    font-size: 14px;
}

.card-item-dashboard .item-value {
    font-size: 24px;
    margin: .25rem 0;
}

.card-item-dashboard.blue {
    background: rgb(0, 184, 223);
    background: linear-gradient(300deg, rgba(0, 184, 223, 1) 0%, rgba(131, 226, 247, 1) 100%);
    color: white;
}

.card-item-dashboard.dark-blue {
    background: rgb(0, 88, 177);
    background: linear-gradient(300deg, rgba(0, 88, 177, 1) 0%, rgba(0, 165, 213, 1) 100%);
    color: white;
}

/* UPGRADE FEATURES*/

.card-item-upgrade-features {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: #ddd;
    border-radius: 10px;
    padding: 1rem;
    font-size: 1vw;
    line-height: normal;
    padding-bottom: 60px;
}

.card-item-upgrade-features .button-upgrade {
    position: absolute;
    bottom: 0;
    padding-bottom: 15px;
    align-self: center;
}

.card-item-upgrade-features .col-10 {
    padding-bottom: 0.5rem;
}

.card-item-upgrade-features i {
    font-size: 1.2rem;
    height: 100%;
    position: absolute;
    top: 0;
}

.card-item-upgrade-features.white {
    background: rgb(255, 255, 255);
    background: linear-gradient(300deg, rgb(206 206 206) 0%, rgb(255 255 255) 100%);
    color: #706F6F;
}

.card-item-upgrade-features.green {
    background: rgb(255, 255, 255);
    background: linear-gradient(300deg, rgb(103 255 137) 0%, rgb(176 255 208) 100%);
    color: #706F6F;
}

.card-item-upgrade-features.gold {
    background: rgb(255, 255, 255);
    background: linear-gradient(300deg, rgb(250 239 158) 0%, rgb(255 255 255) 100%);
    color: #706F6F;
}

/* FOOTER */
.footer h5 {
    font-size: 1rem;
    font-weight: 600;
    color: #333333;
}

.footer .nav-link {
    padding: 0;
    font-size: .9rem;
    color: #333333;
}

.footer .nav-link:hover,
.footer .nav-link:focus {
    color: var(--primary);
}

.copyright-text {
    font-size: 1rem;
    color: grey;
}

.go-top {
    display: block;
    font-size: 1.2rem;
    text-align: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-color: var(--primary);
    color: white;
    cursor: pointer;
}

.go-top:hover,
.go-top:focus {
    background-color: var(--blue);
    color: white;
}

.col-2dot4,
.col-sm-2dot4,
.col-md-2dot4,
.col-lg-2dot4,
.col-xl-2dot4 {
    position: relative;
    width: 100%;
    min-height: 1px;
    padding-right: 15px;
    padding-left: 15px;
}

.col-2dot4 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 20%;
    flex: 0 0 20%;
    max-width: 20%;
}

.popover {
    max-width: 100%;
}

.user-popover {
    min-width: 200px !important;
    color: grey;
}

.user-popover .user-profile {
    color: grey;
    min-width: 150px;
}

.user-popover a:not(.user-profile) {
    color: grey;
    font-size: .7rem;
    line-height: 1.6rem;
}

.user-popover a:hover {
    color: var(--primary);
}

.user-popover a i {
    width: 20px;
}


#joinModal {
    color: #666;
    font-size: .8rem;
}

#joinModal hr {
    width: 60%;
    margin-top: 1rem;
    margin-bottom: 1rem;
}

#joinModal h3 {
    font-size: 1rem;
    color: #333;
    margin: 0;
}

#joinModal .active {
    font-weight: bold;
}

#joinModal .active .btn {
    background-color: var(--blue);
    border-color: var(--blue);
}

.btn-primary:hover, .btn-primary:active, .btn-primary:focus {
    background-color: var(--blue) !important;
    border-color: var(--blue) !important;
}

.join-supplier, .join-buyer {
    padding: 50px 0;
    background-image: url('../img/bg-join.png');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.login-buyer-form, .bg-login {
    background-image: url('../img/bg-login-new.png');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

#bg-login > .container-fluid {
    padding: 0 5rem;
}

.bg-login-mobile {
    background-image: url('../img/bg-login-mobile-new.png');
    background-repeat: no-repeat;
    background-size: contain;
}

.two-side-left {
    min-height: calc(100vh - 56px);

}

.two-side-left h2 {
    font-size: 3.4vw;
}

.two-side-left h3 {
    font-size: 3.4vw;
    color: var(--primary);
}

.two-side-right {

}

.two-side-right .card-login-buyer {
    min-width: 70%;
    margin: 2rem 1rem;
    background-color: rgba(255, 255, 255, 0.95);
    border-radius: 10px;
    font-size: .8rem;
}

.wrapper-error-page {
    width: 80%;
    margin: 7% auto;
}

.valid-date-timeline {
    height: 2px;
}

.valid-date-timeline .progress-value {
    background: rgb(193, 251, 64);
    background: linear-gradient(90deg, rgba(193, 251, 64, 1) 0%, rgba(251, 147, 64, 1) 50%, rgba(255, 43, 0, 1) 100%);
}

.badge-grid-product {
    position: absolute;
    top: 8px;
    right: 15px;
    border-radius: 50%;
    background-color: var(--primary);
    width: 40px;
    height: 40px;
    line-height: 40px;
    font-size: 1.3rem;
    color: white;
    text-align: center;
    z-index: 1;
}

.badge-grid-product:hover {
    opacity: .9;
}

.table-small td,
.table-small th,
.table-small input {
    font-size: .75rem;
    padding: .4rem;
}

.kv-grid-table thead {
    /* background-color: var(--primary); */
    /* color: white; */
}

.kv-grid-table th {
    font-size: .9rem;
    font-weight: normal;
}

.kv-grid-table th a {
    /* color: white; */
}

.kv-grid-table th a:hover {
    /* color: #eee; */
}

.kv-grid-table tbody td a {
    color: #484848;
    font-weight: 500;
}

.kv-grid-table tbody td a:hover {
    color: var(--primary);
}

.kv-grid-table .select2-container--krajee-bs4 .select2-selection,
.kv-grid-table .form-control {
    padding: 4px;
    border-radius: 8px;
    font-size: .8rem;
}

.kv-grid-table .select2-container .select2-selection--single .select2-selection__rendered {
    font-size: .9rem;
    line-height: normal;
    padding: 0 4px;
}

.select2-selection__rendered .select2-selection__clear {
    margin-right: 0.6rem;
    font-size: 10px !important;
    text-align: center;
    margin-top: 0.3rem;
}

.section-gridview .kv-grid-table th {
    font-size: .8rem;
    padding: .5rem;
    font-weight: 600;
}

.section-gridview .kv-grid-table td {
    font-size: .8rem;
    padding: .5rem;
    color: #484848;
}

.section-gridview .kv-grid-table .filters input,
.section-gridview .kv-grid-table .filters select {
    font-size: .8rem;
    padding: 4px;
}

.section-gridview .kv-grid-table .filters .select2-selection {
    height: auto;
}

.grid-view .summary {
    margin-right: .25rem;
}

.before-options {
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: .75rem;
    /* flex-wrap: wrap; */
}

.before-options .clearfix:last-child {
    display: none;
}

.grid-view .btn-toolbar {
    order: 2;
    margin-left: auto;
}

.grid-view .card.border-default {
    border: 0;
    box-shadow: none;
}

.grid-view .btn-toolbar {
    /* margin-bottom: .75rem; */
}

.img-product {
    width: 60px;
    height: 60px;
    object-fit: cover;
}

.kv-grid-bs4 a.asc:after,
.kv-grid-bs4 a.desc:after {
    font-family: "Font Awesome 5 Pro" !important;
    margin: auto 5px;
}

.browse-container .kv-grid-table th {
    font-size: .8rem;
    padding: 4px;
    font-weight: 600;
}

.browse-container .kv-grid-table td {
    font-size: .8rem;
    padding: 4px;
}

.daterangepicker .drp-buttons .btn {
    margin-bottom: 0.25rem;
}

.browse-container .table-striped tbody tr:nth-of-type(odd) {
    background-color: transparent;
}

.table-danger td {
    background-color: #ed969e;
    border-color: #dee2e6;
}

.datepicker {
    z-index: 1020 !important;
}

.bootstrap-timepicker input,
.bootstrap-timepicker .input-group-text {
    border-width: 0 0 1px 0;
    border-style: solid;
    border-radius: 0 !important;
    font-size: .8rem;
    margin-top: 3px;
}

.bootstrap-timepicker .input-group-text {
    background-color: transparent;
}

.input-group-prepend .input-group-text {
    font-size: .8rem;
}

.noselect,
label.custom-control-label {
    -webkit-touch-callout: none;
    /* iOS Safari */
    -webkit-user-select: none;
    /* Safari */
    -khtml-user-select: none;
    /* Konqueror HTML */
    -moz-user-select: none;
    /* Firefox */
    -ms-user-select: none;
    /* Internet Explorer/Edge */
    user-select: none;
    /* Non-prefixed version, currently
                                    supported by Chrome and Opera */
}

.cover-default {
    background-image: url('../img/header.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    width: 100%;
    min-height: 200px;
}

.cover-default2 {
    background-image: url('../img/header2.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    width: 100%;
    min-height: 200px;
}

.cover-banner {
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    width: 100%;
    min-height: 250px;
}

.cover-status {
    background-image: url('../img/bg-status.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    width: 100%;
    min-height: 150px;
}

.cover-contact-us {
    background-image: url('../img/bg-contact-us.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    width: 100%;
}

.cover-banner-top {
    background-image: url('../img/cover-banner-top.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: top;
    width: 100%;
}

h4.status-counter {
    font-size: 3rem;
}

.help-response {
    border: 1px solid #ccc;
    border-radius: 10px;
}

.help-menu {
    margin-top: 2rem;
}

.help-menu ul {
    margin: 0;
    padding: 0;
}

.help-menu ul li {
    list-style: none;
}

.help-menu ul li a {
    color: #888;
}

.help-menu ul li a:hover,
.help-menu ul li.active a {
    color: var(--primary);
}

.btn-help-response {
    background: transparent;
    border: 0;
    padding: 0;
    opacity: .9;
    color: #888;
    display: inline-flex;
    align-items: center;
    margin: .5rem auto;
}


.btn-help-response i {
    font-size: 2.5rem;
    margin-right: .5rem;
}

.btn-help-response:hover {
    opacity: 1;
    color: #555;
}

.btn-help-response.active {
    color: var(--primary);
}

.btn-share {
    font-size: 1.5rem;
    color: #888;
    margin-right: 5px;
}

.btn-share:hover .fa-share-alt-square {
    color: var(--primary);
}

.btn-share:hover .fa-facebook-square {
    color: #3A5794;
}

.btn-share:hover .fa-twitter-square {
    color: #52A8E7;
}

.btn-share:hover .fa-pinterest-square {
    color: #DF0022;
}

/* jquery ui autocomplete */
.ui-widget.ui-widget-content {
    border: 1px solid #c5c5c5;
    font-size: .8rem;
    border-radius: 10px;
}

.ui-widget-content {
    border: 1px solid #ddd;
    background: #fff;
    color: #333;
}

.ui-widget {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1em;
}

.ui-menu {
    list-style: none;
    padding: 0;
    margin: 0;
    display: block;
    outline: 0;
}

.ui-autocomplete {
    position: absolute;
    top: 0;
    left: 0;
    cursor: default;
}

.ui-front {
    z-index: 100;
}

.ui-menu .ui-menu-item {
    margin: 0;
    cursor: pointer;
    list-style-image: none;
}

.ui-menu .ui-menu-item-wrapper {
    position: relative;
    padding: .25rem .5rem;
}

.ui-state-active {
    color: var(--primary);
}

.ui-helper-hidden-accessible {
    display: none;
}

.help-centre h2 {
    font-size: 1.5rem;
    font-weight: 800;
}

.help-centre h3 {
    font-size: 1.2rem;
    font-weight: 700;
}

.help-category {
    min-width: calc(100% / 5);
    max-width: 400px;
}

.help-category::after {
    content: "\f054";
    font-family: "Font Awesome 5 Pro";
    font-size: 1.8rem;
    color: #ccc;
    position: absolute;
    top: 20px;
    right: 20px;
}

.help-category:last-child.help-category::after {
    display: none;
}

.help-category-image {
    width: 80px;
}

.help-items {
    padding-left: 0;
}

.help-items li {
    list-style: none;
}

.help-items a {
    color: grey;
    font-size: .9rem;
}

.help-items a:hover {
    color: var(--primary);
    text-decoration: none;
}

.table-product-price.table-striped tbody tr:nth-of-type(even) {
    background-color: rgba(0, 0, 0, 0.02);
}

.table-product-price.table-striped tbody tr:nth-of-type(odd) {
    background-color: rgba(0, 0, 0, 0.05);
}

.outlet-product {
    border-radius: 10px;
    border: 2px dotted #eee;
    padding: .5rem;
}

.outline-none {
    outline: none !important;
}

.skeleton * {
    visibility: hidden;
}

.skeleton {
    -webkit-animation-duration: 1s;
    -webkit-animation-fill-mode: forwards;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-name: placeHolderShimmer;
    -webkit-animation-timing-function: linear;
    background: #d8d8d8;
    background-image: linear-gradient(to right, #d8d8d8 0%, #bdbdbd 20%, #d8d8d8 40%, #d8d8d8 100%);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    position: relative;
    opacity: .5;
}

.fade-enter-active,
.fade-leave-active {
    transition: opacity .5s;
}

.fade-enter,
.fade-leave-to

    /* .fade-leave-active below version 2.1.8 */
{
    opacity: 0;
}

.product-compare-floating {
    position: fixed;
    bottom: 1rem;
    right: 2.75rem;
    width: 338px;
    padding: 1rem;
    z-index: 10;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    background-color: white;
    border: 1px solid #E6E6E6;
    border-radius: .5rem;
    box-shadow: 0px 2px 8px 0px #3333331A;
}

.product-compare-floating .btn-accordion i::before {
    font-family: "Font Awesome 5 Pro";
    font-size: 1rem;
    font-weight: 400;
    content: "\f424";
}

.product-compare-floating .btn-accordion[aria-expanded="true"] i::before {
    content: "\f422";
}

.compare-product-accordion {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

#collapseCompareProduct .items-wrapper {
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

#collapseCompareProduct .product-info-wrapper {
    display: flex;
    flex-direction: column;
    width: 200px;
}

.product-compare-overflow {
    overflow-y: hidden;
    overflow-x: auto;
    white-space: nowrap;
}

.product-compare-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    position: relative;
    background-color: white;
    width: 100%;
    height: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: .8rem;
    border-bottom: 1px solid #E6E6E6;
    padding-bottom: .5rem;
}

.product-compare-item:last-child {
    border-bottom: none;
}

.product-compare-item img {
    border-radius: .5rem;
    width: 40px;
    height: 40px;
    object-fit: cover;
}

.product-compare-floating .btn-round-white:hover {
    background-color: #fff;
    color: var(--primary);
}

.product-compare-floating .btn-outline-white {
    border: 1px solid #fff;
    color: #fff;
}

.product-compare-floating .btn-outline-white:hover {
    background-color: #fff;
    color: var(--primary);
}

.product-compare-floating .btn-group-compare {
    display: flex;
    gap: .5rem;
    justify-content: space-between;
    width: 100%;
    min-width: fit-content;
}

.btn-compare:hover:enabled {
    text-decoration: none;
    color: var(--primary);
}

.btn-product-compare {
    background-color: #FFFFFF;
    border: 1px solid #E6E6E6;
    border-radius: .5rem;
}

.btn-product-compare.active {
    background-color: #ECFAFE;
    border-color: #00B2DA;
    color: var(--primary);
}

.btn-remove-compare {
    position: absolute;
    top: 0;
    right: 0;
    padding: 4px;
    margin: 0;
    line-height: 4px;
    z-index: 1;
}

.btnBrowseProduct {
    line-height: 1.5rem;
}

.input-group-browse {
    min-width: 150px;
}

.container-text-wrap {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
}

.compare-products-table .product-name-compare {
    height: 3rem;
    line-height: 1.5;
    white-space: normal;
    word-break: break-word;
}

.compare-products-table {
    position: relative;
    overflow: hidden;
}

.compare-products-table ul {
    list-style: none;
    padding: 0;
}

.compare-products-table ul li {
    list-style: none;
}

.compare-products-table .features {
    /* fixed left column - product properties list */
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    background-color: #FFF;
    opacity: .95;
    width: 200px;
    padding-bottom: 20px;
}

.compare-products-wrapper {
    overflow-x: auto;
    /* this fixes the buggy scrolling on webkit browsers - mobile devices only - when overflow property is applied */
    -webkit-overflow-scrolling: touch;
    border-bottom: 1px solid #ccc;
}

.compare-products-columns {
    /* products list wrapper */
    width: calc(210px * 7);
    margin-left: 210px;
}

.compare-products-columns::after {
    clear: both;
    content: "";
    display: table;
}

.compare-products-columns .product {
    position: relative;
    float: left;
    margin-right: 10px;
    text-align: center;
    -webkit-transition: opacity 0.3s, visibility 0.3s, -webkit-transform 0.3s;
    -moz-transition: opacity 0.3s, visibility 0.3s, -moz-transform 0.3s;
    transition: opacity 0.3s, visibility 0.3s, transform 0.3s;
}

.compare-features-list li {
    max-width: 200px;
    font-size: .8rem;
    padding: .3rem .6rem;
    line-height: normal;
    border-bottom: 1px solid #ccc;
}

.features .compare-features-list li,
.compare-products-table .features .top-info {
    font-size: .8rem;
    line-height: normal;
    padding: .3rem .6rem;
    text-align: left;
}

.features .compare-features-list li {
    /* truncate text with dots */
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.compare-products-table .top-info {
    position: relative;
    height: 177px;
    width: 200px;
    text-align: center;
    padding: .5em;
    cursor: pointer;
}

.compare-products-table .top-info img {
    height: 150px;
    width: 170px;
    border-radius: 10px;
    object-fit: cover;
    margin: auto;
    display: block;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.compare-products-table .top-info h3,
.compare-products-table .top-info img {
    -webkit-transition: -webkit-transform 0.3s;
    -moz-transition: -moz-transform 0.3s;
    transition: transform 0.3s;
}

.compare-products-table .features .top-info {
    width: 100%;
    cursor: auto;
}

.compare-products-table .btn-remove-compare {
    border-radius: 50%;
    position: absolute;
    top: 15px;
    right: 20px;
    background: rgba(255, 255, 255, .5);
    width: 20px;
    height: 20px;
    font-size: .8rem;
    color: #555;
}

/* Compare Product */
.x-compare-products-wrapper {
    display: flex;
    gap: 1rem;
    overflow: auto;
}

.x-compare-products-wrapper .product {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 215px;
    gap: 1.5rem;
    border: 1px solid #E6E6E6;
    padding: 1.5rem 1rem;
    border-radius: .5rem;
}

.x-compare-products-wrapper .btn-remove-compare {
    position: absolute;
    top: .5rem;
    right: .5rem;
    padding: 4px 6px;
    background-color: #FFFFFF;
    box-shadow: 0px 1.2px 6px 0px #3333331A;
    border-radius: 50%;
}

.x-compare-products-wrapper img {
    width: 180px;
    height: 180px;
    object-fit: cover;
    border-radius: .5rem;
}

.x-compare-features-list {
    width: 100%;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: .75rem;
}

.x-compare-features-list .column {
    display: flex;
    flex-direction: column;
    font-size: 1rem;
    line-height: 1.4rem;
}

.x-compare-features-list .column span:nth-of-type(1) {
    font-weight: 400;
    color: #6C6C6C;
}

.x-compare-features-list .column span:nth-of-type(2) {
    font-weight: 600;
    color: #333333;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.x-compare-features-list .column span.product-name {
    height: 48px;
    white-space: normal !important;
    display: -webkit-box;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical;
}

.x-compare-products-wrapper-mobile {
    display: flex;
    gap: .5rem;
}

.x-compare-products-wrapper-mobile .product-thead {
    display: flex;
    flex-direction: column;
    width: 150px;
    height: calc(100% - 45.6px - 8px);
    padding: .75rem;
    border: 1px solid #E6E6E6;
    border-radius: .5rem;
}

.x-compare-products-wrapper-mobile .product-sticky-head ul {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 0;
    margin: 0;
    list-style-type: none;
    color: #6C6C6C;
    font-size: .875rem;
    line-height: 1.225rem;
}

.x-compare-products-wrapper-mobile .product-details {
    display: flex;
    gap: .5rem;
    overflow: auto;
}

.x-compare-products-wrapper-mobile .product-heading {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: .3rem;
    font-size: .75rem;
    color: var(--primary);
    background-color: #ECFAFE;
    padding: .625rem 1rem;
    line-height: .875rem;
    border-top-left-radius: .5rem;
    border-top-right-radius: .5rem;
}

.x-compare-products-wrapper-mobile .product-heading span {
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.x-compare-products-wrapper-mobile .product {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    border: 1px solid #E6E6E6;
    border-top: 0;
    border-bottom-left-radius: .5rem;
    border-bottom-right-radius: .5rem;
    padding: .75rem;
}

.x-compare-products-wrapper-mobile .product ul {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    width: 100%;
    padding: 0;
    margin: 0;
    list-style-type: none;
    color: #333333;
    font-size: .875rem;
    font-weight: 600;
    line-height: 1.225rem;
}

.x-compare-products-wrapper-mobile .product ul li {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* End: Compare Product */

.grey-list {
    background-color: var(--grey);
}

/* CHAT / MESSAGES */
.chat-area {
    height: 60vh;
    padding: 1em;
    overflow: auto;
    width: 100%;
    margin: 0 auto;
}

.message-bubble {
    max-width: 45%;
    width: fit-content;
    border-radius: 10px;
    padding: .5rem 1rem;
    font-size: .8em;
}

.message-out {
    background: #EDEDED;
    color: black;
    margin-left: 50%;
    float: right;
}

.message-in {
    background: white;
    border: 1px solid #ddd;
    color: black;
    margin-right: 50%;
    float: left;
}

.chat-inputs {
    display: flex;
    justify-content: space-between;
}

#input-message-form {
    width: 100%;
}

#input-message {
    width: 100%;
    padding: 1.5rem 2.1rem 1.5rem 1rem;
    font-size: .9rem;
}

#input-message:focus {
    outline: 0;
    box-shadow: none;
    border-color: #999;
}

.form-group-input {
    position: relative;
    display: inline-block;
    width: 100%;
}

.emoji-invoker {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.2s;
}

.emoji-invoker:hover {
    transform: scale(1.1);
}

.emoji-invoker > svg {
    fill: #b1c6d0;
}

.emoji-picker {
    position: absolute;
    top: -320px !important;
    left: calc(100% - 240px) !important;
    z-index: 1;
    font-family: Montserrat;
    border: 1px solid #ccc;
    width: 15rem;
    height: 20rem;
    overflow: scroll;
    padding: 1rem;
    box-sizing: border-box;
    border-radius: 0.5rem;
    background: #fff;
    box-shadow: 1px 1px 8px #c7dbe6;
}

.emoji-picker__search {
    display: flex;
}

.emoji-picker__search > input {
    flex: 1;
    border-radius: 10rem;
    border: 1px solid #ccc;
    padding: 0.5rem 1rem;
    outline: none;
}

.emoji-picker h5 {
    margin-bottom: 0;
    color: #b1b1b1;
    text-transform: uppercase;
    font-size: 0.8rem;
    cursor: default;
}

.emoji-picker .emojis {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.emoji-picker .emojis:after {
    content: "";
    flex: auto;
}

.emoji-picker .emojis span {
    padding: 0.2rem;
    cursor: pointer;
    border-radius: 5px;
}

.emoji-picker .emojis span:hover {
    background: #ececec;
    cursor: pointer;
}

.message-date {
    clear: both;
    display: block;
    width: 100%;
    text-align: center;
    font-size: .7rem;
    color: #ccc;
    margin: 1rem auto;
}

.message-time {
    font-size: .55rem;
    line-height: 18px;
    color: #aaa;
    margin-left: 10px;
    float: right;
}

section.chat-rooms {
    height: calc(60vh + 50px);
    max-height: calc(60vh + 50px);
    overflow: auto;
}

.chat-rooms ul {
    margin: 0;
    padding: 0
}

.chat-rooms ul li {
    list-style: none;
    margin: 0;
    padding: 10px;
    font-size: .8rem;
}

.chat-rooms ul li:hover,
.chat-rooms ul li.active {
    background-color: #E6F9FC;
    cursor: pointer;
}

.chat-rooms ul li img,
.chat-room img {
    width: 40px;
    height: 40px;
    object-fit: cover;
    float: left;
    border-radius: 50%;
    margin-right: 10px;
}

.chat-rooms .room-stat,
.menu-active-room {
    width: 50px;
    text-align: right;
}

.room-stat .chat-count {
    border-radius: 50%;
    text-align: center;
    background-color: var(--primary);
    width: 20px;
    height: 20px;
    color: white;
    float: right;
    font-size: .7rem;
    line-height: 18px;
}

.form-group-search {
    position: relative;
}

.form-group-search input {
    border-radius: 20px;
    padding: .5rem 2rem .5rem 1rem;
    font-size: .8rem;
}

.form-group-search .fa-search {
    position: absolute;
    right: 10px;
    top: 11px;
    color: #999;
    font-size: .8rem;
}

.search-input {
    background-color: #F6F6F6;
}

.menu-active-room .dropleft .dropdown-toggle {
    font-size: 1.6rem;
}

.menu-active-room .dropleft .dropdown-toggle::before {
    display: none;
}

.accordion-card {
    /* border-bottom: 1px solid #ccc; */
    padding: 1rem;
    border: 1px solid #EAEAEA;
    border-radius: .5rem;
    margin-bottom: 1rem;
}

.accordion-card:first-child {
    /* border-top: 1px solid #ccc; */
}

.accordion-card .accordion-header h5 a.accordion-btn {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 600;
    font-size: 1.125rem;
    text-decoration: none;
    position: relative;
    padding: 0;
    color: #333333;
}

.accordion-card .accordion-header h5 a.accordion-btn::after {
    font-family: "Font Awesome 5 Pro";
    font-weight: unset;
}

.accordion-card .accordion-header h5 a.accordion-btn[aria-expanded="false"]::after {
    content: "\f107";
}

.accordion-card .accordion-header h5 a.accordion-btn[aria-expanded="true"]::after {
    content: "\f106";
}

.accordion-body {
    padding: 1rem 0 0 0;
    font-size: .9rem;
    color: #6C6C6C;
    font-size: 1rem;
}

.alert-floating {
    position: fixed;
    top: 100px;
    right: 0;
    z-index: 1;
}

.table-ratings td {
    padding: 0 10px 0 0;
    white-space: nowrap;
}

.table-ratings td.ratebar {
    padding-top: 8px;
    width: 100%;
}

.bh-days-of-week {
    display: inline-block;
    width: 25px;
}

.bh-separator {
    display: inline-block;
    width: 15px;
    text-align: center;
}

.btn-popover-quotation {
    position: absolute;
    top: 1rem;
    right: 1.5rem;
    z-index: 1;
    font-size: .7rem;
    padding: .25rem .5rem;
}

.quotation-popover {
    border-radius: 20px;
    box-shadow: 1px 1px 5px #ccc;
    border: 1px solid #ddd;
    min-width: 250px;
    min-height: 100px;
    max-width: 200px;
    max-height: 200px;
    padding: .5rem;
    font-size: .8rem;
}

.quotation-popover .popover-header {
    font-size: .9rem;
    background: transparent;
    border: 0;
    margin: 0;
    padding-bottom: 0;
}

.quotation-popover .popover-body {
    max-height: 160px;
    overflow-y: auto;
}

.quotation-popover hr {
    margin: .5rem auto;
}

.open-tender-outlet-field {
    background-color: white !important;
    border-radius: 0;
    min-width: 180px;
    width: 100%;
    border: 0;
    border-bottom: 2px solid #ccc !important;

}

.gridview-action-btn i {
    font-size: .8rem;
    color: #777;
}

.gridview-action-btn button::after {
    display: none;
}

.gridview-action-btn a.dropdown-item:hover {
    color: white;
}

.gridview-action-btn .dropdown-menu {
    z-index: 1002;
}

.dropdown-business-hours button {
    border: none;
    background-color: transparent;
    padding: 0;
    color: gray;
}

.dropdown-business-hours button::after {
    font-family: "Font Awesome 5 Pro";
    content: "\f078";
    display: inline-block;
    margin-left: .5em;
}

.dropdown-business-hours button[aria-expanded='true']::after {
    content: "\f077";
}

.kv-grid-bs4 .card .kv-grid-table {
    min-height: 5rem;
    display: table !important;
}

.kv-table-float {
    min-height: auto !important;
    margin-top: 72px !important;
}

.radio-button-image .custom-radio {
    margin-right: 10px;
}

.show-calendar {
    display: none;
}

.verification-report-container {
    min-height: calc(100vh - 350px);
}

.verification-report-container .card {
    width: 500px;
    padding: 2rem;
}

.verification-report-container .company-info h2 {
    font-size: 1.2rem;
}

.verification-report-container .table tr {
    border-bottom: 1px solid #ccc;
}

.verification-report-container .table td {
    vertical-align: bottom;
    padding: 1rem 0 .5rem 0;
}

.breadcrumb {
    background: transparent;
    font-size: .8rem;
    margin: 0;
    padding: 0;
}

.breadcrumb ul {
    margin: 0;
    padding: 0;
}

.breadcrumb ul li {
    list-style: none;
    float: left;
}

.breadcrumb ul li::before {
    content: "\f054";
    font-size: 70%;
    font-family: 'Font Awesome 5 Pro';
    margin: .5rem;
}

.breadcrumb ul li:first-child::before {
    content: "";
    margin: 0;
}

.breadcrumb-product .breadcrumb {
    background: transparent;
    font-size: .8rem;
    margin: 0;
    padding: 0;
    width: 100%;
}

.breadcrumb-product .breadcrumb-item {
    color: #333333;
}

.breadcrumb-product .breadcrumb-item.active {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
}

.breadcrumb-product .breadcrumb-item 
+ .breadcrumb-item::before {
    font-family: 'Font Awesome 5 Pro';
    font-size: .7rem;
    line-height: 1.2rem;
    content: "\f054";
    float: left;
    padding-right: 0.5rem;
    color: #D9D9D9;
}

.learning-category {
    width: 100%;
}

.learning-category h2 {
    font-weight: bold;
    font-size: 1.5rem;
    margin-bottom: 20px;
}

.learning-category h3 {
    font-weight: 600;
    font-size: 1.2rem;
}

.app-video-grid-item {
    max-width: calc(100% / 3);
    min-width: 350px;
    text-align: left;
    margin-bottom: 1rem;
    transition: 1s all;
    color: inherit;
}

.app-video-grid-item:hover {
    color: #555;
}

.app-video-grid-item .app-video-grid-item-thumbnail img {
    border-radius: 20px;
    box-shadow: 0px 4px 8px 0px #b3b3b3;
}

.app-video-grid-item .app-video-grid-item-thumbnail {
    margin-bottom: 1rem;
    position: relative;
}

.app-video-grid-item .app-video-grid-item-thumbnail::after {
    content: "\f04b";
    font-family: 'Font Awesome 5 Pro';
    font-weight: 900;
    font-size: 1.5rem;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    color: white;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(109, 109, 109, 0.6);
    border-radius: 50%;
    opacity: .7;
}

.app-video-grid-item .app-video-grid-item-title:hover, .app-video-grid-item .app-video-grid-item-thumbnail:hover {
    cursor: pointer;
    opacity: .95;
}

.app-video-grid-item:hover > .app-video-grid-item-thumbnail::after {
    background: rgba(109, 109, 109, 0.8);
}

.app-video-grid-item .app-video-grid-item-description {
    font-size: .9rem;
}

.lds-ellipsis {
    display: inline-block;
    position: relative;
    height: 13px;
}

.lds-ellipsis div {
    position: absolute;
    top: 0px;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: #dedede;
    animation-timing-function: cubic-bezier(0, 1, 1, 0);
}

.lds-ellipsis div:nth-child(1) {
    left: 8px;
    animation: lds-ellipsis1 0.6s infinite;
}

.lds-ellipsis div:nth-child(2) {
    left: 8px;
    animation: lds-ellipsis2 0.6s infinite;
}

.lds-ellipsis div:nth-child(3) {
    left: 32px;
    animation: lds-ellipsis2 0.6s infinite;
}

.lds-ellipsis div:nth-child(4) {
    left: 56px;
    animation: lds-ellipsis3 0.6s infinite;
}

.as-center {
    align-self: center;
}

.va-top {
    vertical-align: top;
}

.ws-unset {
    white-space: unset;
}

.pl-2rem {
    padding-left: 2rem !important;
}

.col-side-menu {
    position: inherit;
    z-index: 1018;
    max-height: 85%;
    overflow: auto;
}

.col-content .card:first-child {
    border: 0 !important;
}

.sticky-sidebar {
    position: fixed !important;
    z-index: 1020;
    top: 125px !important;
}

.sticky-sidebar-menu {
    position: fixed !important;
    z-index: 1019;
    top: 135px !important;
}

.dashboard-title {
    font-size: 1.125rem !important;
    font-weight: 600;
}


/* End of Global CSS */

@keyframes lds-ellipsis1 {
    0% {
        transform: scale(0);
    }

    100% {
        transform: scale(1);
    }
}

@keyframes lds-ellipsis3 {
    0% {
        transform: scale(1);
    }

    100% {
        transform: scale(0);
    }
}

@keyframes lds-ellipsis2 {
    0% {
        transform: translate(0, 0);
    }

    100% {
        transform: translate(24px, 0);
    }
}


@-webkit-keyframes placeHolderShimmer {
    0% {
        background-position: -468px 0
    }

    100% {
        background-position: 468px 0
    }
}


@media (min-width: 540px) {
    .col-sm-2dot4 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 20%;
        flex: 0 0 20%;
        max-width: 20%;
    }
}

@media (min-width: 720px) {
    .col-md-2dot4 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 20%;
        flex: 0 0 20%;
        max-width: 20%;
    }

    .spacer-help-page {
        border-right: 2px solid #ddd;
    }

}

@media (min-width: 960px) {
    .col-lg-2dot4 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 20%;
        flex: 0 0 20%;
        max-width: 20%;
    }

    a[aria-expanded='true']#dropdown-category:before {
        position: fixed;
        top: 100px;
        bottom: 0;
        left: 0;
        right: 0;
        background: rgba(100, 100, 100, 0.5);
        content: '';
        backdrop-filter: blur(3px);
        z-index: 1;
    }

}


@media (min-width: 1140px) {
    .col-xl-2dot4 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 20%;
        flex: 0 0 20%;
        max-width: 20%;
    }

}

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {
}

/* Medium devices (tablets, 768px and up) The navbar toggle appears at this breakpoint */
@media (min-width: 768px) {
    .megamenu-detail {
        padding-left: 2rem !important;
    }

    .sticky-sidebar-menu {
        position: fixed !important;
        z-index: 1019;
        top: 110px !important;
    }
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
    @media (min-width: 992px) {
        .navbar-expand-lg>.container-fluid {
            -ms-flex-wrap: nowrap;
            flex-wrap: wrap;
        }
    }
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 1440px) {

    .card-top-product .card-body img {
        height: 160px;
    }

    .cover-default, .cover-default2 {
        min-height: 300px;
    }

    .cover-banner {
        min-height: 350px;
    }

    .carousel-home-item {
        background-size: 100% 300px;
        min-height: 300px;
    }

    .app-video-grid-item {
        min-width: calc(100% / 4);
    }
}

@media (min-width: 1024px) {
    .sticky-sidebar {
        top: 85px !important;
    }

    .sticky-sidebar-menu {
        top: 70px !important;
    }
}

@media (max-width: 1024px) {

    .steps-container {
        order: 3;
    }

    .step-circle-last::before,
    .step-circle::before {
        width: calc(5rem + 1rem - 1.5rem);
    }

    .step-circle-first::after,
    .step-circle::after {
        width: calc(5rem + 1rem - 1.5rem);
    }

    /* .container-fluid {
        padding: 0px !important;
    } */

    .container-fluid.navbar-container {
        margin-left: -10px;
        margin-right: -10px;
        width: auto;
    }

    .card-search {
        padding: 0px;
    }

    .card-search-grid .card-search {
        padding: 0px;
    }

    .card-search {
        padding-right: 5px !important;
        padding-left: 5px !important;
        margin-bottom: 0.5rem !important;
    }

    .card-search .card-body {
        font-size: .75rem;
        padding: 0.4rem !important;
    }

    .card-search h5 {
        font-size: 0.9rem;
    }

    .card-search .card-footer {
        font-size: .6rem;
        padding: 0.4rem !important;
    }
}

@media all and (min-width: 992px) {
    .navbar {
        padding-top: 0;
        padding-bottom: 0;
        padding-left: 5rem;
        padding-right: 5rem;
    }

    .navbar .has-megamenu {
        position: static !important;
    }

    .navbar .megamenu {
        left: 0;
        right: 0;
        width: 100%;
    }

    /* .navbar .nav-link {
        padding-top: 1rem;
        padding-bottom: 1rem;
    } */

    .eg-mt150-container > .container-fluid {
        padding-left: 5rem;
        padding-right: 5rem;
    }
}

@media (max-width: 960px) {
    .supplier-banner .img-banner {
        object-fit: cover;
        height: 200px;
    }

    .kv-table-float-navbarrow2 {
        margin-top: 113px !important;
    }

    .carousel-company .carousel-cell {
        width: calc((100% / 2) - 10px);
        height: 100px;
        margin-right: 10px;
    }

    .help-category {
        min-width: calc(100% / 4);
    }
}

@media (max-width: 990px) {
    .navbar-search {
        /* transform: scale(1); */
        /* margin: 10px auto; */
    }

    .carousel-trade-w-us a,
    .carousel-top-suppliers a {
        width: calc(100% / 2 - 15px);
    }

    .card-item-dashboard {
        font-size: 1rem;
    }

    .card-item-dashboard .item-value {
        font-size: 3vw;
    }

    .card-item-upgrade-features {
        font-size: 1rem;
    }
}

@media (max-width: 768px) {
    .col-side-menu {
        /* position: absolute; */
    }

    .nav-link .d-flex .align-items-center {
        font-size: small;
    }

    .navbar-category .nav-link {
        margin: auto 0px;
        font-size: small;
    }

    .form-inline.search-bar-margin {
        margin-bottom: -5px !important;
        margin-top: -8px !important;
    }

    .height-mb-30 {
        height: 30px !important;
    }

    .two-side-right .card-login-buyer {
        width: 85%;
    }

    .two-side-left {
        min-height: auto;
        background-position: top;
    }

    .two-side-left h2,
    .two-side-left h3 {
        font-size: 6vw;
    }

    .top-categories-container.my-4 {
        margin-bottom: -1rem !important;
    }

    .carousel-top-categories {
        margin-bottom: 1.5rem !important;

    }

    /* .navbar-light .navbar-nav .nav-link,
    .nav-link.dropdown-toggle {
        padding-top: 0px;
        padding-bottom: 0px;
    } */

    .carousel-top-categories .carousel-body {
        width: 100px;
        height: 90px;
    }

    .dropdown-menu.notify-drop.cart {
        left: -150px;
    }

    .dropdown-menu.notify-drop.notification {
        left: -180px;
    }

    .dropdown-menu.notify-drop.message {
        left: -210px;
    }

    .help-category {
        min-width: calc(100% / 3);
    }

    .app-video-grid-item {
        min-width: 100%;
    }

    .navbar-brand.logo {
        /* width: 100%; */
    }

    .navbar-nav.notif-bar {
        /* display: contents !important; */
    }

    .nav-link.category {
        /* padding-left: 5px;
        padding-right: 0px;
        width: 30px; */
    }

    .nav-link.notif-item {
        padding-left: 9px !important;
        padding-right: 9px !important;
    }

    .sticky {
        position: fixed !important;
        top: 0;
        width: 100% !important;
        z-index: 1020;
    }

    .sticky + .content {
        padding-top: 117px;
    }

    .modal-md-landscape {
        width: 460px;
        margin: 15rem auto;
    }

    .modal-md-landscape .modal-body {
        height: 175px;
    }

    .modal-md-landscape.promotion .modal-body {
        height: 250px;
    }

    .modal-md-landscape.promotion .modal-body .carousel-home-item {
        height: 250px;
        background-size: 100% 250px;
        min-height: 250px;
    }

    .modal-md-landscape.promotion .modal-body .flickity-viewport {
        height: 250px !important;
    }

    .modal-md-landscape .modal-body .carousel-home-item {
        height: 175px;
        background-size: 100% 175px;
        min-height: 175px;
    }

    .modal-md-landscape .modal-body .flickity-viewport {
        height: 175px !important;
    }
}

@media (max-width: 720px) {
    #megaMenuTabContent {
        margin: auto 0;
    }

    nav#megaMenuTab {
        padding: 0;
    }

    nav#megaMenuTab .nav-link {
        margin-right: 10px;
    }

    .carousel-trade-w-us a,
    .carousel-top-suppliers a {
        width: calc(100% - 15px);
    }

    .login-page-left {
        min-height: 100px;
        background-position: top;
    }

    .login-page-left h2,
    .login-page-left h3 {
        font-size: 1.6rem;
    }

    .help-category {
        min-width: calc(100% / 2);
    }
    
    .formDashboardFilter,
    #form-dashboard-filter {
        width: 100% !important;
    }

    .dashboard-title {
        font-size: 1rem !important;
        margin-top: 1.5rem;
    }
}

@media (max-width: 576px) {
    .navbar-user {
        /* width: 100%; */
    }

    .title-after-logo {
        display: nones;
    }

    .main-content-wrapper {
        padding: 2rem 1rem;
    }

    #bg-login > .container-fluid {
        padding: 0;
    }

    .btn-show-side-menu {
        left: 5px;
        top: 20px;
    }

    .btn-show-side-menu::before {
        content: "";
        position: absolute;
        top: -7px;
        left: -5px;
        background: #ffffff;
        border: 1px solid gainsboro;
        width: 100%;
        height: 100%;
        padding: 1.0rem;
    }

    .product-detail .nav-tabs .nav-link {
        font-size: .7rem;
        min-width: 100px;
    }

    .card-item-dashboard .item-value {
        font-size: 2rem;
    }

    .two-side-left h2,
    .two-side-left h3 {
        font-size: 8vw;
    }

    .help-category {
        min-width: 100%;
    }

    /* About Us */
    .eg-mt150-container {
        background-color: #FFFFFF;
        margin-top: 60px;
        border-radius: 20px 20px 0 0;
        width: 100%;
    }

    .eg-mt150-container > .container-fluid {
        padding-top: 1.5rem;
        padding-bottom: 1.5rem;
    }

    .eg-mt150-container h2 {
        font-size: 1.125rem;
        font-weight: 600;
        color: var(--primary);
        margin-bottom: 1rem;
    }

    .eg-mt150-container h3 {
        font-size: 1rem;
        font-weight: 600;
        color: #333333;
        margin-bottom: .75rem;
    }

    .eg-mt150-container p {
        font-size: .875rem;
        font-weight: 400;
        color: #333333;
        margin-bottom: 1rem;
    }

    .card-about-us-benefit {
        border-radius: 1rem !important;
    }
    .card-about-us-benefit .card-body {
        padding: 1rem;
    }
    /* End - About Us */

}

@media (min-width: 426px) {
    .add-cart-img {
        display: none;
    }
}

@media (max-width: 480px) {
    .dekstop-mode {
        display: none !important;
    }

    .mobile-mode {
        display: block !important;
    }

    .navbar-lang {
        display: none;
    }

    .supplier-cover-image {
        width: 100%;
        height: 140px;
        background-size: contain;
        background-position: top;
        background-repeat: no-repeat;
        position: relative;
    }
    
    .outlet-content .header-wrapper {
        width:100%;
        position:absolute;
        top:190px;
        left: 50%;
        transform: translateX(-50%);
        margin: 0 auto;
    }
    
    .outlet-content .container-content {
        margin-top: calc(82px + 1rem);
    }

    .outlet-content .header-wrapper .container-inner {
        padding: 1rem;
    }

    .outlet-content .header-button-wrapper {
        width: 100%;
    }

    .product-compare-floating {
        width: 100%;
        bottom: 0;
        left: 0;
        right: 0;
        border-radius: .5rem, .5rem, 0, 0;
    }
}

@media (max-width: 430px) {
    .formDashboardFilter,
    .btnMultiPrint,
    .btn-print,
    .btn-select {
        width: 100% !important;
    }

    .eg-button-wrapper .btn:nth-child(1),
    .eg-button-wrapper .btn:nth-child(2) {
        width: 48%;
    }
    .eg-button-wrapper .btn:nth-child(3) {
        width: 100%;
    }

    .site-index .carousel-section .flickity-prev-next-button,
    .site-index .carousel-section:hover .flickity-prev-next-button,
    .site-index .carousel-top-categories .flickity-prev-next-button,
    .site-index .carousel-top-categories:hover .flickity-prev-next-button {
        display: none;
    }
    .copyright-text {
        font-size: .9rem;
        color: grey;
    }

    footer .container {
        padding-left: 0;
        padding-right: 0;
    }

    .card-search-supplier-grid .product-image-x {
        width: 68px;
        height: 68px;
    }
}

@media (max-width: 425px) {
    .navbar-lang {
        display: none;
    }

    #hamburger-icon {
        display: none;
    }

    .step-text {
        font-size: 3vmin;
    }

    .step-circle-last::before,
    .step-circle::before {
        width: calc(2.8rem + 1rem - 1.5rem);
    }

    .step-circle-first::after,
    .step-circle::after {
        width: calc(2.8rem + 1rem - 1.5rem);
    }

    .carousel-home-item {
        background-size: 100% 200px;
        height: 200px;
        min-height: 200px;
    }

    .hr-top-product {
        margin-left: 0.3rem !important;
        margin-right: 0.3rem !important;
    }

    .carousel-top-categories a,
    .carousel-trade-w-us a,
    .carousel-top-suppliers a {
        margin: 2px 5px;
    }

    .top-suppliers-container {
        margin-top: 0.5rem !important;
        margin-bottom: 0.5rem !important;
    }

    .carousel-top-suppliers .carousel-body {
        height: 100px;
    }

    .carousel-trade-w-us a,
    .carousel-top-suppliers a {
        width: 200px
    }

    .carousel-trade-w-us .carousel-body {
        width: 100%;
        height: 100px;
    }

    .chat-box {
        flex: 100%;
        max-width: 100%;
    }

    .card.p-4.notificaiton {
        padding: 0.5rem !important;
    }

    .notification-description {
        margin-bottom: 0;
    }

    .add-cart {
        display: none;
    }

    .btn-layout-selection {
        display: none;
    }

    .modal-md-landscape {
        width: 320px;
        margin: 15rem auto;
    }

    .modal-md-landscape .modal-body {
        height: 110px;
    }

    .modal-md-landscape.promotion .modal-body {
        height: 140px;
    }

    .modal-md-landscape.promotion .modal-body .carousel-home-item {
        height: 140px;
        background-size: 100% 140px;
        min-height: 140px;
    }

    .modal-md-landscape.promotion .modal-body .flickity-viewport {
        height: 140px !important;
    }

    .modal-md-landscape .modal-body .carousel-home-item {
        height: 110px;
        background-size: 100% 110px;
        min-height: 110px;
    }

    .modal-md-landscape .modal-body .flickity-viewport {
        height: 110px !important;
    }

    .modal-md-landscape .modal-header {
        padding: 0.5rem 0.5rem;
    }

    .modal-md-landscape .modal-footer {
        padding: 0;
    }

    .modal-md-landscape .modal-footer .col-6 {
        padding-right: 5px;
        padding-left: 5px;
    }
}

@media (max-width: 375px) {
    .navbar-lang {
        display: none;
    }

    .navbar-user {
        width: 100%;
    }

    .carousel-home-item {
        background-size: 100% 150px;
        height: 150px;
        min-height: 150px;
    }

    .carousel-content .content-line1 {
        font-size: 1.7rem;
    }

    .carousel-content .content-line2 {
        font-size: 1.7rem;
        font-weight: bold;
    }

    .carousel-content .content-line3 {
        font-size: 0.9rem;
        font-weight: normal;
        margin-top: 0.5rem;
    }

    .dropdown-menu.notify-drop {
        min-width: 300px;
        max-width: 300px;
    }

    .dropdown-menu.notify-drop.cart {
        left: -100px;
    }

    .dropdown-menu.notify-drop.notification {
        left: -135px;
    }

    .dropdown-menu.notify-drop.message {
        left: -170px;
    }
}

@media (max-width: 375px) {
    .buy-now {
        margin-bottom: 0.5rem;
    }
}

.franchisor-product {
    text-align: center;
    text-align: -webkit-center;
} 

.franchisor-product .items {
    padding-top: 5rem;
    height: 35rem;
    width: 20rem;
}