@import url('open-iconic/font/css/open-iconic-bootstrap.min.css');
@import url('https://fonts.googleapis.com/css2?family=Montserrat&display=swap');

html, body {
    font-family: 'Kantumruy Pro', sans-serif;
    font-size: 1rem;
    line-height: 1.5;
    color: #020F2E;
    background-color: #f4f4f4;
    min-height: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

    body.bkg-white {
        background-color: #fff;
    }

a,
a:link,
a:visited,
button,
.btn,
.form-control,
.transition {
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}

.fullwidth {
    width: 100%;
}

.fullheight {
    height: 100%;
}

.text-right {
    text-align: right;
}

h1:focus {
    outline: none;
}

a, .btn-link {
    color: #318ED6;
}

    a:hover, .btn-link:hover {
        color: #075B9B;
    }

.badge {
    border-radius: 2rem;
}

.content {
    padding-top: 1.1rem;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #28724F;
}

.invalid {
    outline: 1px solid #FF2D2D;
}

.validation-message {
    color: #FF2D2D;
}

.form-check-input {
    /*margin-top: 0.5rem;*/
}

    .form-check-input:checked {
        background-color: #28724F;
        border-color: #28724F;
    }

textarea.form-control {
    border-radius: 3px;
}

#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.btn {
    padding: .375rem 1.75rem;
    border-radius: 3px;
    height: 2.4rem;
    position: relative;
    text-transform: uppercase;
    font-weight: 500;
    letter-spacing: -0.02rem;
}

.btn-group-lg > .btn, .btn-lg {
    padding: .5rem 1rem;
    border-radius: 3px;
    height: 3rem;
    font-size: 1.1rem;
    line-height: 1.75;
}

.btn-group-sm > .btn, .btn-sm {
    height: 2.19rem;
}

.btn.btn-circle {
    width: 2.4rem;
    padding-left: 0;
    padding-right: 0;
    text-align: center;
}

.btn.btn-lg.btn-circle {
    width: 3rem;
}

.btn.btn-sm.btn-circle {
    width: 2.19rem;
}

.btn.btn-icon {
    padding-left: 3.5rem;
}

    .btn.btn-icon > i {
        border-radius: 3px;
        position: absolute;
        top: 0;
        left: 0;
        width: 2.4rem;
        height: 100%;
        z-index: 1000;
        background-color: rgba(255, 255, 255, 0.2);
        display: flex;
        flex-direction: column;
        text-align: center;
        justify-content: center;
        font-size: inherit;
    }

.btn.btn-icon-right {
    padding-right: 3.5rem;
    padding-left: 1.75rem;
}

    .btn.btn-icon-right > i {
        border-radius: 3px;
        position: absolute;
        top: 0;
        right: 0;
        width: 2.4rem;
        height: 100%;
        z-index: 1000;
        background-color: rgba(255, 255, 255, 0.2);
        display: flex;
        flex-direction: column;
        text-align: center;
        justify-content: center;
        font-size: inherit;
    }

.btn-group-lg > .btn.btn-icon,
.btn-lg.btn-icon {
    padding-left: 4rem;
}

    .btn-group-lg > .btn.btn-icon > i, .btn-lg.btn-icon > i {
        width: 3rem;
    }

.btn-group-sm > .btn.btn-icon, .btn-sm.btn-icon {
    padding-left: 3.3rem;
}

    .btn-group-sm > .btn.btn-icon > i, .btn-sm.btn-icon > i {
        width: 2.19rem;
    }

.btn:focus,
.btn:active,
.btn-check:active + .btn:focus,
.btn-check:checked + .btn:focus,
.btn.active:focus,
.btn:active:focus,
.show > .btn.dropdown-toggle:focus {
    box-shadow: none;
}

.btn.btn-outline-primary {
    border-color: #236192 !important;
    color: #236192 !important;
}

    .btn.btn-outline-primary:hover {
        background-color: #236192 !important;
        color: white !important;
    }

    .btn.btn-outline-primary:active {
        background-color: #236192 !important;
        color: white !important;
    }

.btn.btn-outline-secondary {
    border-color: #28724F !important;
    color: #28724F !important;
}

    .btn.btn-outline-secondary:hover {
        background-color: #28724F !important;
        color: white !important;
    }

    .btn.btn-outline-secondary:active {
        background-color: #28724F !important;
        color: white !important;
    }

.btn.btn-primary,
.badge-primary {
    background-color: #28724F !important;
    border-color: #28724F !important;
}

    .btn.btn-primary:hover {
        background-color: #4ADBDB;
        border-color: #4ADBDB;
    }

    .btn.btn-primary:active {
        background-color: #009090 !important;
        border-color: #009090 !important;
    }

.text-primary {
    color: #28724F;
}

.text-bold {
    font-weight: bold;
}

.btn.btn-secondary,
.badge-secondary {
    background-color: #236192;
    border-color: #236192;
}

    .btn.btn-secondary:hover {
        background-color: #FFA37E;
        border-color: #FFA37E;
    }

    .btn.btn-secondary:active {
        background-color: #C04615 !important;
        border-color: #C04615 !important;
    }

.text-secondary {
    color: #236192;
}

.btn.btn-danger,
.badge-danger {
    background-color: #FF2D2D;
    border-color: #FF2D2D;
}

    .btn.btn-danger:hover {
        background-color: #FF5656;
        border-color: #FF5656;
    }

    .btn.btn-danger:active {
        background-color: #F10000 !important;
        border-color: #F10000 !important;
    }

.text-danger {
    color: #FF2D2D;
}

.btn.btn-warning,
.badge-warning {
    background-color: #3EAF7F;
    border-color: #3EAF7F;
    color: #fff;
}

    .btn.btn-warning:hover {
        background-color: #63C89D;
        border-color: #63C89D;
    }

    .btn.btn-warning:active {
        background-color: #0F8351 !important;
        border-color: #0F8351 !important;
    }

.text-warning {
    color: #3EAF7F;
}

.btn.btn-info,
.badge-info {
    background-color: #318ED6;
    border-color: #318ED6;
    color: #fff;
}

    .btn.btn-info:hover {
        background-color: #54A3DF;
        border-color: #54A3DF;
    }

    .btn.btn-info:active {
        background-color: #075B9B !important;
        border-color: #075B9B !important;
    }

.text-info {
    color: #318ED6;
}

.rz-lookup-search input,
.rz-spinner,
.rz-calendar .rz-inputtext,
.rz-multiselect, .rz-dropdown,
.mask,
.rz-textbox,
.form-control {
    border-radius: 3px;
}

    .form-control:focus,
    .form-check-input:focus {
        border-color: #25D1D1;
        outline: 0;
        box-shadow: 0 0 0 0.25rem rgb(37 209 209 / 25%);
    }

    .form-control:focus {
        background-color: #fff;
    }

.form-control-lg {
    font-size: 1.1rem;
    height: 3rem;
}

.input-group .btn {
    padding: 0;
    width: 2.4rem;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

    .input-group .btn.btn-lg {
        width: 3rem;
    }

    .input-group .btn.btn-sm {
        width: 2.19rem;
    }

select.form-control {
    min-width: 20rem;
}

    select.form-control[multiple] {
        border-radius: 3px;
        min-height: 10rem;
    }

select.events-filter-control {
    min-width: 15rem;
}

select.events-date-control {
    min-width: 7rem;
}

.table {
    background-color: #fff;
}

    .table > :not(caption) > * > * {
        padding: 0.75rem 1.5rem;
        vertical-align: middle;
    }

.no-items-message {
    position: relative;
    display: block;
    text-align: center;
    color: #6B8A9E;
    opacity: 1;
    font-size: 1.5rem;
    padding-top: 2rem;
}

.pagination {
    margin-bottom: 0;
}

.page-link {
    color: #236192;
    cursor: pointer;
}

    .page-link.active {
        background-color: #236192;
        color: #fff;
    }

.hidden {
    display: none !important;
}

.alert.alert-primary {
    background-color: #28724F;
    border-color: #28724F;
    color: #009090;
}

.alert.alert-danger {
    background-color: #F5B8A3;
    border-color: #F5B8A3;
    color: #F10000;
}

.bkg-white {
    background-color: #fff;
}

.login-page {
    width: 100%;
    min-height: 100%;
    overflow-y: auto;
    height: 100%;
}

    .login-page > div {
        position: relative;
        height: 100%;
    }

        .login-page > div:first-child {
            width: 70%;
        }

        .login-page > div:first-child {
            width: 30%;
        }

.login-background {
    width: 50%;
    height: 100%;
    background-image: url(/img/login-bkg-2.png);
    background-size: cover;
    background-position: right center;
    position: fixed;
    -webkit-filter: brightness(1.25) contrast(1.1);
    filter: brightness(1.25) contrast(1.1);
}

/*.login-background::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 100;
        background: rgb(37,206,209);
        background: linear-gradient(120deg, rgba(37,206,209,1) 0%, rgba(255,138,91,1) 100%);
        opacity: 0.75;
    }*/

.login-form-container {
    width: 30rem;
    max-width: 75%;
}

.login-logo {
    font-family: 'MuseoModerno', cursive;
    font-size: 2rem;
    font-weight: 300;
    color: #fff;
    text-align: center;
}

    .login-logo span:nth-child(2) {
        font-weight: 600;
    }

    .login-logo span:last-child {
        font-weight: 900;
    }

.login-slogan {
    text-align: center;
    font-size: 2.5rem;
    font-family: 'Hurricane', cursive;
    color: #fff;
    line-height: 1;
    max-width: 550px;
    text-shadow: 1px 1px 23px #000;
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
}

.login-background > div {
    display: flex;
    height: 100%;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 0 1rem;
}

.login-form-container h1 {
    font-weight: 900;
    font-size: 2rem;
    margin: 0;
    padding: 0;
}

.login-form-container .form-group {
    position: relative;
}

.login-form-container .form-control {
    padding-left: 3rem;
    position: relative;
    z-index: 1;
}

.login-form-container .icon-input {
    position: absolute;
    left: 1rem;
    top: 0.65rem;
    font-size: 1.25rem;
    z-index: 10;
    opacity: 0.65;
}

.login-form-container .password-icon-input {
    position: absolute;
    top: 0.65rem;
    right: 1rem;
    font-size: 1.25rem;
    z-index: 10;
    opacity: 0.65;
}

.change-password-form-container .password-icon-input {
    position: absolute;
    top: 2.65rem;
    right: 2rem;
    font-size: 1.25rem;
    z-index: 10;
    opacity: 0.65;
}

.login-menu-container {
    border-top: solid 1px #f4f4f4;
}

.login-menu {
    position: relative;
    display: block;
    list-style-type: none;
}

    .login-menu li {
        position: relative;
        display: inline-block;
    }

        .login-menu li a,
        .login-menu li a:link,
        .login-menu li a:visited {
            position: relative;
            display: block;
            padding: 0.5rem 1.5rem;
            color: #020F2E;
            text-decoration: none;
            cursor: pointer;
            line-height: 1;
            font-size: 0.85rem;
            font-weight: 500;
            text-transform: uppercase;
        }

            .login-menu li a:hover,
            .login-menu li a:active {
                color: #236192;
                text-decoration: none;
            }

.rz-legend-item {
    padding: 5px;
    cursor: pointer;
}

/* radzen */

.rz-tabview-nav li a,
.rz-tabview-nav li a:hover {
    text-decoration: none;
    color: #236192;
    padding: 1rem 1.5rem;
}

.rz-tabview-nav .rz-tabview-selected a {
    color: #318ED6;
}

.rz-tabview-right > .rz-tabview-nav li {
    border-right-width: 3px;
}

    .rz-tabview-right > .rz-tabview-nav .rz-tabview-selected,
    .rz-tabview-right > .rz-tabview-nav li:hover:not(.rz-tabview-selected):not(.rz-state-disabled) {
        border-right-color: #318ED6;
    }

    .rz-tabview-right > .rz-tabview-nav li:hover:not(.rz-tabview-selected):not(.rz-state-disabled),
    .rz-tabview-nav li:hover:not(.rz-tabview-selected):not(.rz-state-disabled) a {
        color: #318ED6;
    }

.rz-tabview-panel {
    padding: 1.75rem 2.15rem;
}

.rz-lookup-search input,
.rz-spinner,
.rz-calendar .rz-inputtext,
.rz-multiselect,
.rz-dropdown,
.mask,
.rz-textbox {
    padding: .375rem .75rem;
    height: 2.4rem;
    line-height: 1.5;
    font-size: 1rem;
}

    .rz-lookup-search.rz-lg input,
    .rz-spinner.rz-lg,
    .rz-calendar.rz-lg .rz-inputtext,
    .rz-multiselect.rz-lg,
    .rz-dropdown.rz-lg,
    .mask.rz-lg,
    .rz-textbox.rz-lg {
        padding: 0.5rem 1rem;
        font-size: 1.25rem;
        height: 3rem;
    }

.rz-autocomplete {
    height: 2.4rem;
    line-height: 1.5;
    font-size: 1rem;
    min-width: 27.5rem;
}

.my-datepicker {
    height: 100%;
}

    .my-datepicker .rz-calendar {
        height: 100%;
    }

        .my-datepicker .rz-calendar .rz-inputtext {
            padding: .375rem .75rem;
            height: 100%;
            line-height: 1.5;
            font-size: 1rem;
        }

.rz-spinner-button {
    background-color: #28724F;
    width: 2rem;
    height: 52%;
}

    .rz-spinner-button:hover {
        background-color: #318ED6;
    }

.rz-spinner-up {
    top: 0px;
    right: 0px;
}

.rz-spinner-down {
    bottom: 0px;
    right: 0px;
}

.rz-spinner-button-icon {
    line-height: 1.4;
}


.rz-dropdown-panel, .rz-multiselect-panel {
    z-index: 99999 !important;
}

.rz-fieldset-legend {
    display: block;
    float: none;
}

.filter-products .rz-accordion-header,
.filter-products .rz-accordion-content-wrapper .rz-accordion-content {
    background-color: transparent;
}

.rz-hour-picker, .rz-minute-picker, .rz-second-picker {
    width: 5rem;
}

.rz-progressbar-value {
    background-color: #236192 !important;
}

/*end radzen*/
.upload-img-link {
    text-decoration: none;
    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
    font-size: 13px;
    cursor: pointer;
    display: inline-block;
    text-align: right;
}

    .upload-img-link :hover {
        color: #0a58ca;
    }

/* ===================================================================================
    BEGIN Navigation - Admin, Supplier, Sales Agent
====================================================================================== */

.sidebar {
    background-color: #ffffff;
    border-right: solid 1px #e7e7e7;
}

.navbar-toggler {
    background-color: rgba(255, 255, 255, 0.1);
}

.top-row {
    position: sticky;
    top: 0;
    z-index: 9999;
    height: 3.5rem;
    background-color: #fff;
}

.navbar-brand {
    font-size: 1.1rem;
    padding-left: 1.5rem;
}

nav {
    padding-top: 1rem;
    padding-bottom: 1rem;
}

.nav-item {
    position: relative;
}

.sidebar .nav-item .nav-link,
.sidebar .nav-item .nav-link:link,
.sidebar .nav-item .nav-link:visited {
    position: relative;
    display: block;
    padding: 1rem 1.5rem;
    color: #020F2E;
    font-size: 1rem;
    font-weight: 500;
    letter-spacing: -0.01rem;
    line-height: 1;
}

    .sidebar .nav-item .nav-link:hover,
    .sidebar .nav-item .nav-link:active,
    .sidebar .nav-item .nav-link.active,
    .sidebar .nav-item .nav-link.active:link,
    .sidebar .nav-item .nav-link.active:visited {
        color: #236192;
        cursor: pointer;
    }

.sidebar .nav-item:has(a.nav-link.active) button.nav-link {
    color: #236192;
}

            .sidebar .nav-item .nav-link i.bi {
                display: inline-block;
                width: 1.5rem;
            }

    .sidebar .nav-item .nav-link[data-toggle] {
        padding-right: 3.5rem;
    }

        .sidebar .nav-item .nav-link[data-toggle]::after {
            content: "\f285";
            display: inline-block;
            font-family: bootstrap-icons !important;
            font-style: normal;
            font-weight: normal !important;
            font-variant: normal;
            text-transform: none;
            line-height: 1;
            vertical-align: -0.125em;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
            color: inherit;
            position: absolute;
            z-index: 100;
            top: 0;
            bottom: 0;
            right: 1.5rem;
            margin: auto;
            height: 1rem;
            -webkit-transition: all 0.3s;
            -moz-transition: all 0.3s;
            -o-transition: all 0.3s;
            transition: all 0.3s;
        }

    .sidebar .nav-item .nav-link[aria-expanded="true"]::after
    /*.sidebar .nav-item:has(a.nav-link.active) .nav-link[data-toggle]::after*/ {
        -webkit-transform: rotate(90deg);
        -moz-transform: rotate(90deg);
        -o-transform: rotate(90deg);
        transform: rotate(90deg);
    }

.sidebar .submenu {
    margin: 0;
    position: relative;
    list-style-type: none;
    padding-left: 1.75rem;
}

    .sidebar .submenu .nav-link,
    .sidebar .submenu .nav-link:link,
    .sidebar .submenu .nav-link:visited {
        /* padding: 0.5rem 1.25rem;*/
        padding-left: 2.5rem;
        position: relative;
    }

        .sidebar .submenu .nav-link.active,
        .sidebar .submenu .nav-link.active:link,
        .sidebar .submenu .nav-link.active:visited {
            background: none;
        }

.sidebar:not(.sidebar-collapsed) .submenu::before,
.sidebar:not(.sidebar-collapsed) .submenu .nav-link::before,
.sidebar:not(.sidebar-collapsed) .submenu .nav-link::after {
    content: "";
    position: absolute;
}

.sidebar:not(.sidebar-collapsed) .submenu::before,
.sidebar:not(.sidebar-collapsed) .submenu .nav-link::before {
    z-index: 99;
    background-color: #e7e7e7;
}

.sidebar:not(.sidebar-collapsed) .submenu .nav-link::before,
.sidebar:not(.sidebar-collapsed) .submenu .nav-link::after {
    top: 0;
    bottom: 0;
    margin: auto;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}

.sidebar:not(.sidebar-collapsed) .submenu::before {
    width: 2px;
    height: calc(100% - 0.5rem);
    left: 2rem;
    top: -1rem;
}

.sidebar:not(.sidebar-collapsed) .submenu .nav-link::before {
    height: 2px;
    width: 1rem;
    left: 0.3rem;
}

.sidebar:not(.sidebar-collapsed) .submenu .nav-link::after {
    width: 0.5rem;
    height: 0.5rem;
    left: 1.3rem;
    border-radius: 50%;
    z-index: 100;
}

.sidebar:not(.sidebar-collapsed) .submenu .nav-link.active::after {
    background-color: #236192;
}

.nav-menu-item {
    position: relative;
    padding: 0.5rem;
}

    .nav-menu-item .nav-link,
    .nav-menu-item .nav-link:link,
    .nav-menu-item .nav-link:visited {
        position: relative;
        display: block;
        padding: 1rem 1.5rem;
        color: #020F2E;
        font-size: 1rem;
        font-weight: 500;
        letter-spacing: -0.01rem;
        line-height: 1;
    }

        .nav-menu-item .nav-link:hover,
        .nav-menu-item .nav-link:active,
        .nav-menu-item .nav-link.active,
        .nav-menu-item .nav-link.active:link,
        .nav-menu-item .nav-link.active:visited {
            color: #236192;
            cursor: pointer;
        }

            .nav-menu-item .nav-link.active,
            .nav-menu-item .nav-link.active:link,
            .nav-menu-item .nav-link.active:visited,
            .nav-menu-item:has(a.nav-link.active) {
                background-color: #fafafa;
            }

        .nav-menu-item .nav-link i.bi {
            display: inline-block;
            width: 1.5rem;
        }

        .nav-menu-item .nav-link[data-toggle] {
            padding-right: 3.5rem;
        }

            .nav-menu-item .nav-link[data-toggle]::after {
                content: "\f285";
                display: inline-block;
                font-family: bootstrap-icons !important;
                font-style: normal;
                font-weight: normal !important;
                font-variant: normal;
                text-transform: none;
                line-height: 1;
                vertical-align: -0.125em;
                -webkit-font-smoothing: antialiased;
                -moz-osx-font-smoothing: grayscale;
                color: inherit;
                position: absolute;
                z-index: 100;
                top: 0;
                bottom: 0;
                right: 1.5rem;
                margin: auto;
                height: 1rem;
                -webkit-transition: all 0.3s;
                -moz-transition: all 0.3s;
                -o-transition: all 0.3s;
                transition: all 0.3s;
            }

        .nav-menu-item .nav-link[aria-expanded="true"]::after
        /*.nav-menu-item:has(a.nav-link.active) .nav-link[data-toggle]::after*/ {
            -webkit-transform: rotate(90deg);
            -moz-transform: rotate(90deg);
            -o-transform: rotate(90deg);
            transform: rotate(90deg);
        }


@media (min-width: 641px) {
    .navbar-toggler {
        display: none;
    }

    .collapse {
        /* Never collapse the sidebar for wide screens */
        display: block;
    }
}


.btn-sidebar-toggle {
    position: relative;
    display: none;
    flex-direction: column;
    flex-wrap: wrap;
    line-height: 1;
    width: 25px;
    height: 16px;
    align-content: space-between;
    justify-content: space-between;
    margin: 0;
    padding: 0;
    background: none;
    line-height: 1;
    border: none;
}

    .btn-sidebar-toggle span {
        display: inline-block;
        height: 2px;
        background-color: #020F2E;
        border-radius: 3px;
    }

        .btn-sidebar-toggle span:first-child {
            width: 75%;
        }

        .btn-sidebar-toggle span:nth-child(2) {
            width: 90%;
        }

        .btn-sidebar-toggle span:last-child {
            width: 50%;
        }

    .btn-sidebar-toggle:hover span,
    .btn-sidebar-toggle:active span {
        width: 100%;
    }

    .btn-sidebar-toggle:active span {
        background-color: #28724F;
    }

.rz-datepicker-title .rz-dropdown {
    height: 2.25rem !important;
}

.rz-datepicker-title .rz-dropdown:last-child {
    width: 6rem !important;
}
/* ===================================================================================
    END Navigation - Admin, Supplier, Sales Agent
====================================================================================== */
/* ===================================================================================
    BEGIN Dashboard 
====================================================================================== */
.dashboard-card {
    position: relative;
    width: 100%;
    height: 100%;
    max-height: 30rem;
}

    .dashboard-card .dashboard-card-title,
    .dashboard-card .dashboard-card-content {
        position: relative;
        padding: 1rem 1.75rem;
        width: 100%;
        min-width: 100%;
        background-color: #fff;
    }

        .dashboard-card .dashboard-card-content.no-padding {
            padding: 0;
        }

    .dashboard-card .dashboard-card-title {
        line-height: 1;
        border-bottom: solid 1px #f4f4f4;
        height: 3.2rem;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }

    .dashboard-card .dashboard-card-content {
        height: calc(100% - 3.2rem);
        overflow-y: auto;
    }

    .dashboard-card .dashboard-card-title h3 {
        padding: 0;
        margin: 0;
        font-size: 1rem;
        letter-spacing: -0.025rem;
        word-spacing: 0.05rem;
        font-weight: 700;
        text-transform: uppercase;
    }

    .dashboard-card table {
        font-size: 0.875rem;
        width: 100%;
    }

        .dashboard-card table th:first-child,
        .dashboard-card table td:first-child {
            padding-left: 0;
        }


        .dashboard-card table th:last-child,
        .dashboard-card table td:last-child {
            padding-right: 0;
        }


.img-circle {
    border-radius: 50%;
    border: solid 3px #eaeaea;
    background-color: #fff;
    background-position: center;
    background-size: cover;
    min-width: 2rem;
    min-height: 2rem;
}

.dashboard-card-content .img-circle {
    width: 3rem;
    height: 3rem;
}

.dashboard-card-content table th {
    border-top: none;
}


    /* ===================================================================================
    END Dashboard 
====================================================================================== */


    @media (max-width: 641px) {
        .sidebar .nav-item .nav-link.active,
        .sidebar .nav-item .nav-link.active:link,
        .sidebar .nav-item .nav-link.active:visited,
        .sidebar .nav-item:has(a.nav-link.active) {
            background: none;
        }

        .navbar-brand {
            width: auto;
        }

        .sidebar > .top-row > .container-fluid > .d-flex {
            justify-content: space-between;
            align-items: center;
        }

        .sidebar > .top-row > .container-fluid {
            padding: 0;
        }

        .navbar-toggler {
            background: none;
            padding: 0;
        }
    }

    @media (min-width: 641px) {
        html, body {
            font-size: 14px;
        }

        .btn-sidebar-toggle {
            display: flex;
        }

        .sidebar {
            min-width: 180px;
            width: 180px;
            height: 100%;
            position: sticky;
            top: 0;
            min-height: 100vh;
            z-index: 9999;
        }

            .sidebar .navbar-collapse.collapse:not(.show) {
                display: block;
            }

            .sidebar.sidebar-collapsed {
                width: 90px !important;
                min-width: 90px !important;
                max-width: 100px;
            }

                .sidebar.sidebar-collapsed .nav-item .nav-link {
                    text-align: center !important;
                }

                    .sidebar.sidebar-collapsed .nav-item .nav-link span {
                        display: none;
                    }

                    .sidebar.sidebar-collapsed .nav-item .nav-link i.bi {
                        padding: 0;
                        margin: 0;
                        font-size: 1.5rem;
                        width: auto;
                        height: auto;
                    }

                    .sidebar.sidebar-collapsed .nav-item .nav-link,
                    .sidebar.sidebar-collapsed .nav-item .nav-link:link,
                    .sidebar.sidebar-collapsed .nav-item .nav-link:visited {
                        padding: 0.75rem 0rem;
                    }

                        .sidebar.sidebar-collapsed .nav-item .nav-link[data-toggle]::after {
                            display: none;
                        }

                .sidebar.sidebar-collapsed .submenu {
                    padding: 1rem 1.5rem 1rem 1.5rem;
                    width: 200px;
                    position: absolute;
                    left: calc(100% - 0rem);
                    top: 0;
                    background-color: #fff;
                    text-align: left;
                    display: none;
                    opacity: 0;
                    -webkit-transition: all 0.3s;
                    transition: all 0.3s;
                }

                    .sidebar.sidebar-collapsed .nav-link[data-toggle]:hover + .submenu,
                    .sidebar.sidebar-collapsed .submenu:hover,
                    .sidebar.sidebar-collapsed .submenu .nav-link:active,
                    .sidebar.sidebar-collapsed .submenu .nav-link:hover {
                        display: block;
                        opacity: 1;
                    }

                    .sidebar.sidebar-collapsed .submenu .nav-link {
                        text-align: left !important;
                    }
    }

    @media (min-width: 1024px) {
        html, body {
            font-size: 16px;
        }

        .sidebar {
            min-width: 250px;
            width: 250px;
        }

        .login-page > div {
            width: 50% !important;
        }

        .login-logo {
            font-size: 4rem;
        }

        .login-slogan {
            font-size: 3.5rem;
            padding-left: 3rem !important;
            padding-right: 3rem !important;
        }

        .login-background > div {
            padding: 0 3rem !important;
        }
    }

    @media screen and (max-width: 642px) {
        .login-page {
            display: block !important;
            height: auto;
            background: #fff;
        }

            .login-page > div {
                display: block !important;
                width: 100% !important;
                height: auto !important;
            }

                .login-page > div:first-child {
                    border-bottom: solid 1px #f4f4f4;
                }

        .login-background {
            background: none;
        }

        .login-slogan,
        .login-logo {
            color: #020F2E;
            opacity: .75;
            text-shadow: none;
            font-size: 2.5rem;
        }

        .login-form-container {
            width: 100% !important;
            margin: auto !important;
        }

            .login-form-container h1 {
                font-size: 1.5rem;
            }
    }

    smart-progress-bar .smart-label {
    width: auto;
    color: white;
}

smart-progress-bar .smart-value {
    background-color: #28724F;
    border: none;
}

smart-carousel[display-mode="3d"] .smart-carousel-item {
    width: 400px;
    height: 100%;
    position: absolute;
    box-sizing: border-box;
    overflow: hidden;
    border: none;
    top: 50%;
    left: 50%;
    z-index: 10;
    transform: translateX(-50%) translateY(-50%) rotateX(1deg) scale(1);
    transition-duration: 0s;
}

.smart-tree[selection-mode=radioButton]:not([show-lines]) smart-tree-items-group > .smart-tree-item-label-container:after, .smart-tree[selection-mode=checkBox]:not([show-lines]) smart-tree-items-group > .smart-tree-item-label-container:after {
    margin-left: 5px;
}

.smart-tree[selection-mode=radioButton] smart-tree-item > .smart-tree-item-label-container:after, .smart-tree[selection-mode=radioButton] smart-tree-items-group > .smart-tree-item-label-container:after, .smart-tree[selection-mode=checkBox] smart-tree-item > .smart-tree-item-label-container:after, .smart-tree[selection-mode=checkBox] smart-tree-items-group > .smart-tree-item-label-container:after {
    content: '';
    position: absolute;
    border: var(--smart-border-width) solid var(--smart-border);
    border-top-left-radius: var(--smart-border-top-left-radius);
    border-top-right-radius: var(--smart-border-top-right-radius);
    border-bottom-left-radius: var(--smart-border-bottom-left-radius);
    border-bottom-right-radius: var(--smart-border-bottom-right-radius);
    width: var(--smart-check-box-default-size);
    height: var(--smart-check-box-default-size);
    padding: 1px;
    margin-left: 5px;
    font-family: var(--smart-font-family-icon);
    justify-content: center;
    align-items: center;
    display: flex;
}

.alert-popup {
    animation: popup 0.1s;
    bottom: 10px;
    position: fixed;
    z-index: 999999;
    margin-left: 5.5rem;
}

@keyframes popup {
    0% {
        transform: scale(0);
    }

    10% {
        transform: scale(0.1);
    }

    20% {
        transform: scale(0.2);
    }

    30% {
        transform: scale(0.3);
    }

    40% {
        transform: scale(0.4);
    }

    50% {
        transform: scale(0.5);
    }

    60% {
        transform: scale(0.6);
    }

    70% {
        transform: scale(0.7);
    }

    80% {
        transform: scale(0.8);
    }

    90% {
        transform: scale(0.9);
    }

    100% {
        transform: scale(1);
    }
}

.rz-spinner {
    padding: 0.375rem 0.2rem;
}

.rz-notification {
    max-width: 600px !important;
    width: calc(100% - 20px);
}

.rz-notification-message,
.rz-growl,
.rz-growl-item-container,
rz-growl-message-success {
    width: 100% !important;
}

.rz-growl-message-success .rz-growl-item {
    margin-top: 1.5rem !important;
    background-color: #28724F !important;
}

.rz-growl-message-error .rz-growl-item {
    margin-top: 1.5rem !important;
    background-color: red !important;
}

/*table th.ant-table-cell:first-child {
    padding-left: 1.5rem !important;
}

table td.ant-table-cell:first-child {
    padding-left: 1.5rem !important;
}*/

.ant-table-row-expand-icon {
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
}

.ant-btn-primary {
    border-color: #28724F !important;
    background: #28724F !important;
}

.icon-coin-promotion {
    background: hsla(342, 73%, 61%, 1);
    background: linear-gradient(225deg, hsla(342, 73%, 61%, 1) 0%, hsla(17, 100%, 68%, 1) 65%, hsla(34, 100%, 68%, 1) 100%);
    background: -moz-linear-gradient(225deg, hsla(342, 73%, 61%, 1) 0%, hsla(17, 100%, 68%, 1) 65%, hsla(34, 100%, 68%, 1) 100%);
    background: -webkit-linear-gradient(225deg, hsla(342, 73%, 61%, 1) 0%, hsla(17, 100%, 68%, 1) 65%, hsla(34, 100%, 68%, 1) 100%);
    filter: progid: DXImageTransform.Microsoft.gradient( startColorstr="#E4517D", endColorstr="#236192", GradientType=1 );
    -webkit-background-clip: text;
    -moz-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: 1rem;
}

.ant-tooltip-inner {
    background-color: rgba(255, 255, 255, 1) !important;
    color: black !important;
    width: 400px !important;
}

.ant-tree-checkbox-checked .ant-tree-checkbox-inner {
    background-color: #236192;
    border-color: #236192;
}

.btn-primary:hover {
    background-color: #2da66d !important;
    border-color: #2da66d !important;
}

.btn-secondary:hover {
    background-color: #4090cf !important;
    border-color: #4090cf !important;
}

.rz-switch.rz-switch-checked .rz-switch-circle {
    background: #236192 !important;
}

.rz-button.btn-secondary, .btn-secondary.rz-paginator-element {
    background: #236192 !important;
    color: #ffffff;
}

.rz-spinner-button {
    background-color: #236192 !important;
}

.rz-chkbox-box.rz-state-active {
    background-color: #236192 !important;
}

a:hover {
    text-decoration: none;
}

.ant-popover-buttons {
    text-align: center !important;
}

.numeric-value {
    font-family: 'Roboto Condensed' !important;
}

.d-mobile,
.d-flex-mobile {
    display: none !important;
}

.d-desktop {
    display: block !important;
}

.d-flex-desktop {
    display: flex !important;
}

.rz-category-axis .rz-tick-text,
.rz-value-axis .rz-tick-text {
    font-size: 0.75rem !important;
}

.rz-chart-tooltip {
    font-size: 0.8rem !important;
}

.rz-series-data-label {
    font-size: 0.8rem !important;
}

.slick-dots li {
    width: 20px !important;
    height: 20px !important;
    margin: 0.25rem !important;
}

    .slick-dots li button {
        height: 20px !important;
        width: 20px !important; /* Make the width equal to the height */
        border-radius: 50% !important; /* Make it a circle */
        border: 3px solid #236192 !important; /* Add a thin border with the specified color */
        background-color: white !important; /* Inside color with 0.75 opacity */
        padding: 0 !important; /* Ensure no padding affects the circle shape */
    }

.campaign-carousel .slick-slider .slick-dots {
    position: relative;
    margin-top: 2rem;
}

@media (max-width: 768px) {
    .nav-menu-item {
        padding: 0;
        width: 100%;
        text-align: center;
        align-items: center;
    }

    .d-mobile {
        display: block !important;
    }

    .d-flex-mobile {
        display: flex !important;
    }

    .d-desktop,
    .d-flex-desktop {
        display: none !important;
    }

    .nav-menu-item .nav-link {
        font-size: 0.9rem !important;
    }

    .slick-dots li {
        width: 20px !important;
        height: 5px !important;
    }

        .slick-dots li button {
            height: 15px !important;
            width: 15px !important;
        }

    .rz-progressbar {
        height: 0.75rem !important;
    }

    .login-menu-container {
        position: fixed;
        bottom: 0;
    }
}

.shopping-cart-container .show-mobile {
    display: none !important;
}

@media screen and (max-width: 400px)  {
    .numeric-value,
    .show-mobile b {
        font-size: 0.7rem !important;
    }

    .product-title {
        font-size: 0.8rem !important;
    }
}


@media screen and (max-width: 640px) {
    .shopping-cart-container th.hide-mobile,
    .shopping-cart-container td.hide-mobile {
        display: none !important;
    }

    .shopping-cart-container th.show-mobile,
    .shopping-cart-container td.show-mobile {
        display: table-cell !important;
    }

    .shopping-cart-container a.show-mobile,
    .shopping-cart-container div.show-mobile {
        display: block !important;
    }
}

@media screen and (max-width: 767px) {
    .specifications-container .table-title,
    .specifications-container *[class^='table-row'] {
        font-size: 0.85rem !important;
    }
}

@media screen and (max-width: 1199px) {
    .shopping-cart-container .ant-table-thead > tr > th,
    .shopping-cart-container .ant-table-tbody > tr > td,
    .shopping-cart-container .ant-table tfoot > tr > th,
    .shopping-cart-container .ant-table tfoot > tr > td {
        padding: 8px;
        font-size: 13px;
    }
}