:root {
    /*--sidebar-main-color: #172238;*/
    --sidebar-main-color: #604aaf;
    /*--sidebar-hover-color: #2a3c60;*/
    --sidebar-hover-color: #000000b4;
    /*--sidebar-active-color-background: #28334a;*/
    --sidebar-active-color-background: #00000088;
    /*--sidebar-active-text-color: #00bcc2;*/
    --sidebar-active-text-color: #fff;
    /*--sidebar-active-text-color: #00bcc2;*/
    --sidebar-active-border-color: #ff0095;
    /*--sidebar-text-color: #ddd;*/
    --sidebar-text-color: #fff;
    /*--sidebar-submenu-hover-color: #212f4a;*/
    --sidebar-submenu-hover-color: #00000055;
    --submenu-active-color-background: #000
}



ul.page-breadcrumb li:last-child .fa {
    display: none;
}

th[align="left"], td[align="left"] {
    text-align: left !important;
}

th[align="right"], td[align="right"] {
    text-align: right !important;
}

th[align="center"], td[align="right"] {
    text-align: center !important;
}

.btn {
    line-height: 1.2em !important;
}

.mb {
    margin-bottom: 15px;
}

.angular-ui-tree-handle {
    background: #f7f7f8;
    border: 1px solid #c8c7cc;
    color: #8e8e93;
    padding: 10px 10px;
    font-size: 14px;
    font-weight: normal !important;
}

    .angular-ui-tree-handle:hover {
        color: #5b5b60;
        background: #eaeaec;
        border-color: #a6a4ac;
    }

.angular-ui-tree-placeholder {
    background: #f0f9ff;
    border: 2px dashed #bed2db;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.dn {
    display: none;
}

.mt {
    margin-top: 15px;
}

.m {
    margin: 15px;
}

.sam-handler {
    width: 10px;
    position: relative;
    font-size: 0;
    line-height: 0;
    display: inline-block;
    cursor: move;
    white-space: normal;
}

    .sam-handler .sam-handler-elem {
        display: inline-block;
        background-color: #b6b6b6;
        background-color: rgba(182, 182, 182, 0.6);
        transition: all 0.2s ease-in-out;
        transition-property: background-color;
    }

    .sam-handler.sam-handler-dotted .sam-handler-elem {
        width: 3px;
        height: 3px;
        border-radius: 50%;
        margin: 1px;
    }

    .sam-handler.sam-handler-lined {
        height: 25px;
    }

        .sam-handler.sam-handler-lined .sam-handler-elem {
            margin: 0 1px;
            height: 100%;
            width: 1px;
        }

    .sam-handler:hover .sam-handler-elem {
        background-color: #333;
    }

.module-field {
    box-shadow: 0 1px 2px #c4c4c4;
    border-radius: 3px;
    background: #f9f9f9;
    padding: 10px 15px;
    margin: 10px 0;
}

    .module-field.active {
        box-shadow: 0 1px 3px #c4c4c4;
        background: rgba(255, 255, 204, 0.5);
        background: #fffbec;
    }

        .module-field.active .module-field--configure {
            display: block;
        }

.module-field--Text .module-field--options-Text {
    display: block;
}

.module-field--Textarea .module-field--options-Textarea {
    display: block;
}

.module-field--Checkbox .module-field--options-Checkbox {
    display: block;
}

.module-field--Wysiwyg .module-field--options-Wysiwyg {
    display: block;
}

.module-field--SingleRelational .module-field--options-SingleRelational {
    display: block;
}

.module-field--MultiRelational .module-field--options-MultiRelational {
    display: block;
}

.module-field--configure {
    display: none;
    margin-top: 15px;
}

    .module-field--configure .row {
        margin-top: 5px;
        margin-bottom: 5px;
    }

        .module-field--configure .row .control-label {
            padding-top: 5px;
        }

.btn,
.ui.button {
    font-family: inherit !important;
    // font-size: inherit !important;
    font-weight: normal;
    font-size: inherit;
}

.pointer {
    cursor: pointer;
}

.input-group-btn {
    font-size: inherit;
}

    .input-group-btn .btn {
        padding-bottom: 9px;
        padding-top: 10px;
    }

.table-valign tr, .table-valign td, .table-valign th,
.table-valigned tr, .table-valigned td, .table-valigned th {
    vertical-align: middle !important;
}

.panel {
    border-width: 1px;
}

.nav-tabs > .active a, .nav-tabs > .active a:hover, .nav-tabs > .active a:focus {
    box-shadow: none;
}

.nav-tabs > li {
    margin-bottom: 0;
}

.nav-tabs {
    border-bottom: 0;
}

.state--required::after {
    display: inline-block;
    content: "\f069";
    color: #e74c3c;
    font-family: "FontAwesome";
    font-size: 11px;
    line-height: 1;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    margin-right: 3px;
}

/*.avatar {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  margin: 15px auto;
}*/

.imageNationalCard {
    width: 320px;
    height: 160px;
    margin: 15px auto;
}





/* --------------------------------------------- */
/* later added code starts from here */
/* --------------------------------------------- */


/*
-----------------------------------------------
>>>>TABLE OF CONTENT
-----------------------------------------------
1- Navbar
2- Sidebar
3- Dashboard container box
4- Dashboard new info boxes
5- Dashboard status box
6- Dashboard new no border table
7- Dashborad buttons
8- Dashboard charts
9- Dashboard Input Fields
9- User Seller map
10- User Seller filter
11- Seller Modals
    >> Modal Exit Button
    >> Global Modal Classes for modal-title and modal-content
11- Shop Products Table
12- icons
13- Forms devider line
14- overlays
15- Site Tables
16- Background Colors
17- Global classes
*/



/* --------------------------------------------- */
/* Navbar */
/* --------------------------------------------- */
.navbar-right .navbar__user-info .dropdown-toggle .navbar__user-image-container {
    width: 39px;
    height: 39px;
    margin-left: 5px;
}

    .navbar-right .navbar__user-info .dropdown-toggle .navbar__user-image-container img {
        width: 39px;
        height: 39px;
        max-width: 39px;
        max-height: 39px;
    }

.navbar-right .navbar__user-info .dropdown-toggle .navbar__username {
    display: flex;
    flex-direction: column;
}

.navbar-right .dropdown .dropdown-toggle .navbar__username span {
    line-height: 15px;
    font-size: 10px;
}

    .navbar-right .dropdown .dropdown-toggle .navbar__username span:first-child {
        font-size: 12px;
    }


.navbar-right .navbar__user-info .dropdown-toggle .navbar__user-avatar-container {
    border-radius: 50%;
    width: 41px;
    height: 41px;
    overflow: hidden;
    margin-left: 8px;
}

.navbar-right .navbar__user-info .dropdown-menu li {
    margin-bottom: 10px;
}

    .navbar-right .navbar__user-info .dropdown-menu li a {
        padding: 0 10px;
    }

        .navbar-right .navbar__user-info .dropdown-menu li a .dropdown-list-item-icon {
            color: #00BDCC;
            margin-left: 5px;
        }

/* ----- Navbar Messages Button ------ */
.nav-item button.nav-link {
    background: none;
    outline: none;
    border: none;
    border-radius: 2px;
    font-size: 16px;
    position: relative;
}

    .nav-item button.nav-link i {
        margin: 0;
        padding: 0;
    }

    .nav-item button.nav-link span {
        position: absolute;
        top: 50%;
        right: 60%;
        font-size: 12px;
        background: #da251e;
        color: #fff;
        padding: 0;
        margin: 0;
        border-radius: 50%;
        min-width: 18px;
        font-family: sans-serif, Arial;
    }

.dropdown-footer {
    padding: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
}

    .dropdown-footer a {
        /*color: rgb(15, 178,202);*/
        /*font-weight: bold;*/
    }


/* ----------
  Sidebar
----------- */
/* --- Sidebar Icons --- */
#sidebar > div nav > ul li a img {
    width: 25px;
    height: 25px;
}

/* --- Sidebar Profile --- */
.sidebar-profile__container {
    display: flex;
    flex-direction: column;
    margin: 20px;
    padding: 10px;
    border: 1px solid #ccc;
}

    .sidebar-profile__container img {
        margin: auto;
        width: 70px;
        height: 70px;
        border-radius: 50%;
        overflow: hidden;
        background: #fff;
    }

.sidebar-profile__details {
    display: flex;
    flex-direction: column;
}

    .sidebar-profile__details p {
        color: #444;
        margin: 10px 0;
        text-align: center;
    }

    .sidebar-profile__details a {
        margin: 5px 0;
        color: rgb(15,178,202);
        display: flex;
        align-items: center;
    }

        .sidebar-profile__details a span {
            margin-right: 5px;
        }
/* --------------------------------------------- */
/* Dashboard container box */
/* --------------------------------------------- */
.dashboard-container-box {
    padding: 15px 20px;
}

.dashboard-container-box--heading {
    margin-bottom: 15px;
    color: #000;
    font-size: 16px;
}

.dashboard-container-box--content {
}

/* --------------------------------------------- */
/* Dashboard info box */
/* --------------------------------------------- */
.dashboard-info-box {
    display: flex;
    align-items: center;
    justify-content: space-around;
    width: 98%;
    height: 100px;
    border-radius: 5px;
    margin: auto;
    color: #000;
}

.dashboard-info-box--content {
    display: flex;
    justify-content: space-between;
}

.dashboard-info-box img {
    height: 70px;
}

.dashboard-info-box--title {
    padding: 5px 10px;
    padding-left: 20px;
    font-size: 16px;
}

.dashboard-info-box--status {
    /*margin-top: 10px;*/
    padding: 5px 10px;
    border-radius: 5px;
    font-size: 14px;
}


.dashboard-info-box--danger {
    background-color: #fc0;
    color: #fff;
}

.dashboard-info-box--border-danger {
    border: 2px solid #fc0;
    color: #000;
}

    /* temporary class */
    .dashboard-info-box--border-danger img {
        filter: invert(75%) sepia(81%) saturate(836%) hue-rotate(355deg) brightness(97%) contrast(109%);
    }

.dashboard-info-box--success {
    background-color: #33cc66;
    color: #fff;
}

.dashboard-info-box--border-success {
    border: 2px solid #33cc66;
    color: #000;
}

    /* temporary class */
    .dashboard-info-box--border-success img {
        filter: invert(60%) sepia(68%) saturate(462%) hue-rotate(88deg) brightness(96%) contrast(89%);
    }

.dashboard-info-box--info {
    background-color: #2ca7dd;
    color: #fff;
}

.dashboard-info-box--border-info {
    /*border: 2px solid #2ca7dd;*/
    background: #ccc;
    color: #fff;
}

    /* temporary class */
    .dashboard-info-box--border-info img {
        filter: invert(68%) sepia(28%) saturate(5053%) hue-rotate(166deg) brightness(91%) contrast(89%)
    }

.dashboard-info-box--custom-blue {
    background-color: rgb(15,178,202);
    color: #fff;
}

.dashboard-info-box--custom-blue-hover:hover {
    background-color: rgb(13,158,180);
    color: #fff;
}

.dashboard-info-box--custom-blue-darken {
    background-color: rgb(13,158,180);
    color: #fff;
}
/* --------------------------------------------- */
/* Dashboard small info box*/
/* --------------------------------------------- */
.dashboard-info-box-sm {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 150px;
    height: 50px;
    font-size: 16px;
    padding: 10px 15px;
    border-radius: 5px;
    transition: background-color .2s, color .2s;
}

.dashboard-info-box-sm--number {
    font-size: 18px;
    font-weight: bold;
}


/* --------------------------------------------- */
/* Dashboard row info box */
/* --------------------------------------------- */
.dashboard-info-box-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 97%;
    height: 40px;
    padding: 6px 12px;
    font-size: 15px;
    border-radius: 5px;
}

/* --------------------------------------------- */
/* Dashboard large info box */
/* --------------------------------------------- */
.dashboard-info-box-lg {
    display: flex;
    flex-direction: column;
    padding: 15px 20px;
    border-radius: 5px;
}

.dashboard-info-box-lg--title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    font-size: 18px;
}

.dashboard-info-box-lg--content {
    border-top: 1px solid #d8d8d8;
}

.dashboard-info-box-lg--row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 10px;
    margin-right: 10px;
}

/* --------------------------------------------- */
/* Dashboard status box */
/* --------------------------------------------- */
.dashboard-status-box {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100px;
    padding: 10px;
    border-radius: 5px;
    border: 1px solid #eee;
    margin-bottom: 10px;
}

.dashboard-status-box--title {
    padding: 10px 0;
    font-size: 16px;
}

.dashboard-status-box--content {
    padding: 10px;
    padding-left: 20px;
}
/* --------------------------------------------- */
/* Dashboard new no border table */
/* --------------------------------------------- */
.dashboard-no-border-table {
    width: 100%;
    background: #fff;
}

    .dashboard-no-border-table th {
        border-bottom: 1px solid #8e8e93;
        color: #3E4B5B;
        padding: 10px;
    }

    .dashboard-no-border-table td {
        color: #3E4B5B;
    }


/* --------------------------------------------- */
/* Dashboard Buttons 

>>>> CONTENT: 

1- SELLER GLOBAL BUTTON
2- BUTTON COLORS
3- ADD-PRODUCT-BUTTON


--------------------------------------------- */
.seller-button {
    padding: 6px 10px;
    border: none;
    outline: none;
    color: #fff;
    border-radius: 4px;
    background: #aaa;
}

.seller-button__light-red {
    background: #e71b4e;
}

.add-product-button {
    position: relative;
    font-size: 16px;
    width: auto;
    height: 50px;
    margin-left: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    text-decoration: none;
}

    .add-product-button:hover {
        color: #fff;
    }

    .add-product-button span {
        background: rgb(13,158,180);
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100%;
    }

        .add-product-button span:first-child {
            padding: 20px;
            border-radius: 50%;
            margin-left: -25px;
            z-index: 1;
            border-top-left-radius: 5px;
            border-bottom-left-radius: 5px;
        }

        .add-product-button span:last-child {
            padding-left: 10px;
            padding-right: 30px;
        }


/* --------------------------------------------- */
/* Dashboard charts 

>>>>>>>>>  CONTENTS: 

  1-LINE CHART
  2-PIE CHART

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

/* -------    
1- LINE CHART
----------*/

.dashboard-chart-filters {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 10px;
}

.dashboard-chart-filters--title {
    padding-left: 10px;
}

.dashboard-chart-filters--content {
    display: flex;
    justify-content: center;
    align-items: center;
}

    .dashboard-chart-filters--content button {
        margin: 0;
        padding: 5px 10px;
        border: none;
        outline: none;
        transition: .2s;
    }

        .dashboard-chart-filters--content button.active {
            background: #aaa;
            color: #fff;
        }

        .dashboard-chart-filters--content button:hover {
            background: #ccc;
            color: #fff;
        }

@media(max-width: 768px) {
    .dashboard-chart-filters {
        flex-direction: column;
        align-items: flex-start;
    }

    .dashboard-chart-filters--content {
        width: 100%;
    }

        .dashboard-chart-filters--content button {
            flex-grow: 1;
            font-size: 15px;
        }
}

@media(max-width: 576px) {
    .dashboard-chart-filters--content button {
        font-size: 13px;
    }
}
/*--------
2- PIE CHART
-----------*/
.dashboard-pie-chart--title {
    margin-top: 10px;
    padding-right: 40px;
}

/* ------------------------
8- Dashboard Input Fields
------------------------- */
.dashboard-form-input {
    color: #333;
    border: 1px solid #ccc;
    border-radius: 5px;
    line-height: 1em;
    width: 100%;
    min-height: 32px;
    padding: 5px 9px 5px;
    outline: none;
}

    .dashboard-form-input:focus {
        border-color: #e71b4e;
    }
/* ------------------------
8- User Seller map
------------------------- */
.seller-location-picker {
    height: 300px;
}

/* ------------------------
9- User Seller filter
------------------------- */
.seller-filter-container {
    display: inline-flex;
    align-items: center;
    border-radius: 3px;
    overflow: hidden;
}

    .seller-filter-container input[type="radio"] {
        display: none;
    }

    .seller-filter-container label {
        padding: 5px 8px;
        background: rgb(134, 180, 187);
        color: #eee;
        color: #fff;
        margin: 0;
        font-size: 13px;
        cursor: pointer;
    }

    .seller-filter-container span:first-child label {
        border-left: 1px solid #888;
    }

    .seller-filter-container input[type="radio"]:checked + label {
        background: rgb(13,158,180);
        cursor: default;
    }


/* ------------------
 11- Seller Modals
 ------------------ */
.seller-modal {
}

    .seller-modal .modal-content {
        background: #fff;
    }

    .seller-modal .modal-title {
        padding: 10px;
        margin-top: 10px;
        position: relative;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

        .seller-modal .modal-title h4 {
            font-size: 18px;
            margin: 0;
        }

        .seller-modal .modal-title .modal-exit-button {
            border: 0 !important;
            outline: none !important;
            background: none;
            display: inline-block;
            cursor: pointer;
            z-index: 99;
            transition: .3s;
        }

            .seller-modal .modal-title .modal-exit-button:hover {
                opacity: .8;
            }

            .seller-modal .modal-title .modal-exit-button img {
                width: 13px;
                height: 13px;
            }

    .seller-modal .modal-body .input-field-container {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 180px;
    }

    .seller-modal .modal-body input {
        border: 1px solid #ccc;
        outline: none;
        border-radius: 5px;
        padding: 4px 10px;
        width: 180px;
    }

    .seller-modal .modal-body .input-field-container input {
        border: 1px solid #ccc;
        outline: none;
        border-top-right-radius: 5px;
        border-bottom-right-radius: 5px;
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
        padding: 4px 10px;
        border-left: none;
        width: 130px;
    }

    .seller-modal .modal-body .input-field-container .input-append {
        background-color: #eeeeee;
        color: #555;
        border: 1px solid #ccc;
        border-right: none;
        border-top-left-radius: 5px;
        border-bottom-left-radius: 5px;
        padding: 4px 10px;
        margin-bottom: 0;
        line-height: normal;
        max-width: 50px;
    }

/* --------- Modal Exit Button ---------*/
.modal-exit-button {
    background: none;
    border: none;
    outline: none;
    position: absolute;
    top: 10px;
    left: 10px;
    padding: 0;
    margin: 0;
}

    .modal-exit-button img {
        width: 12px;
        height: 12px;
    }

/* --------- Global Modal Classes for modal-title and modal-content --------- */
.message-modal .modal-title {
    padding: 15px;
    padding-bottom: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

    .message-modal .modal-title h1 {
        font-size: 16px;
        font-weight: bold;
        margin-bottom: 0;
    }

    .message-modal .modal-title span {
        color: #aaa;
        font-weight: 300;
    }

.message-modal .modal-content p {
    padding: 0;
    margin: 0;
}

.message-modal .modal-footer {
    border: none;
    padding: 0;
}

    .message-modal .modal-footer a {
        color: #fff;
        background-color: rgb(13,158,180);
        padding: 3px 8px;
        border-radius: 4px;
    }

/* ----------------------
  Shop Products Table
------------------------ */
.shop-products-table td > img {
    width: 50px;
    height: 50px;
}

.table-details-icon {
    width: 30px;
    height: 30px;
}

/* --------------------
5- Icon classes 
---------------------- */
/* --------------------------------------------- */
/* 6- form devider line */
/* --------------------------------------------- */
.form-devider-line--with-title {
    display: flex;
    align-items: center;
    margin: 20px 10px;
}

    .form-devider-line--with-title > div {
        font-size: 14px;
        flex-grow: 1;
        margin-left: 10px;
        color: #007aff;
        white-space: nowrap;
    }

    .form-devider-line--with-title > span {
        flex-grow: 1;
        height: 1px;
        width: 100%;
        background: #e6e8e8;
    }


/* --------------------------------------------- */
/* overlay classes */
/* --------------------------------------------- */
.disabled-white-overlay-container {
    position: relative;
}

.disabled-white-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 50%;
    height: 100%;
    background: hsla(0, 0%, 100%, .8);
    z-index: 999;
}


.right-disabled .disabled-white-overlay {
    transform: translateX(100%);
}

.right-disabled #is-real-button {
    display: inline-block
}

.right-disabled #is-not-real-button {
    display: none;
}

#is-real-button {
    display: none;
}

#is-not-real-button {
    display: inline-block;
}

/* --------------------------------------------- */
/* Dashboard buttons */
/* --------------------------------------------- */
.dashboard-success-button {
    background: #33cc66;
    color: #fff;
}

.dashboard-info-button {
    background: #2ca7dd;
    color: #fff;
}

.dashboard-danger-button {
    background: #fc0;
    color: #fff;
}

.dashboard-error-button {
    background: #dc3545;
    color: #fff;
}

.border-bottom-dashed-button {
    position: relative;
    margin-top: 300px;
    background: none;
    border: none;
    border-bottom: 1px dashed #2ca7dd;
    outline: none;
    height: 40px;
    font-size: 20px;
}


/* -------------------
    Site Tables
--------------------- */
/*---- global tabel styles ----*/
table > tbody > tr .btn-group a,
.btn-group a {
    display: block;
    padding: 0 .5rem;
    padding-bottom: .5rem;
}

    table > tbody > tr .btn-group a:hover,
    .btn-group a:hover {
        color: #000;
    }

    table > tbody > tr .btn-group a:last-child,
    .btn-group a:last-child {
        padding-bottom: 0;
    }

.grid-table .btn-group .dropdown-menu.show,
table > tbody > tr .btn-group .dropdown-menu.show,
table > tbody > tr .btn-group .show > .dropdown-menu {
    margin-top: 1.2rem !important;
}

table > tbody > tr:last-child .btn-group .dropdown-menu, .grid-table table-body > div:last-of-type .btn-group .dropdown-menu {
    bottom: 0 !important;
    top: unset !important;
}

    .grid-table table-body > div:last-of-type .btn-group .dropdown-menu.show,
    table > tbody > tr:last-child .btn-group .dropdown-menu.show,
    table > tbody > tr:last-child .btn-group .show > .dropdown-menu {
        margin-top: unset;
        margin-bottom: .5rem !important;
    }

    .grid-table table-body > div:last-of-type .btn-group .dropdown-menu:after,
    table > tbody > tr:last-child .btn-group .dropdown-menu:after {
        border-bottom-color: transparent;
        border-top-color: #fff;
        bottom: calc(-8px + -.5rem);
        top: unset;
    }



/*---- seller table ----*/
.seller-table {
    border-radius: 6px;
    border-collapse: collapse;
    border: 1px solid transparent;
}

    .seller-table > tbody + tbody {
        border-top: none;
    }

    .seller-table > thead > tr > th {
        text-align: center;
        vertical-align: middle;
        padding: 15px;
    }

        .seller-table > thead > tr > th:first-child {
            border-top-right-radius: 6px;
            border-right: 0;
        }

        .seller-table > thead > tr > th:last-child {
            border-top-left-radius: 6px;
            border-left: 0;
        }

    .seller-table > tbody > tr {
        border-bottom: 1px solid #eee;
    }

    .seller-table > tbody tr:hover {
        background: #f5f5f5;
    }

    .seller-table > tbody:last-child > td:first-child {
        border-bottom-right-radius: 6px;
    }

    .seller-table > tbody:last-child > td:last-child {
        border-bottom-left-radius: 6px;
    }

    .seller-table tbody > tr > td {
        /*border: 1px solid #e7e7e7;*/
        text-align: center;
        vertical-align: middle;
    }

    .seller-table tbody tr:last-child td:first-child {
        border-bottom-right-radius: 6px;
    }

    .seller-table tbody tr:last-child td:last-child {
        border-bottom-left-radius: 6px;
    }

.seller-table__green > thead > tr > th {
    background: #85b3be;
    color: #fff !important;
    border-left: 1px solid #629aa7;
    border-right: 1px solid transparent;
}

.seller-table__green__no-border > thead > tr > th {
    background: #85b3be !important;
    color: #fff !important;
}

/*---------------------
  background colors
--------------------- */
.background-light-green {
    background: #85b3be;
    color: #fff !important;
}


/* --------------------------------------------- */
/* Dashboard global classes */
/* --------------------------------------------- */

.flex, .d-flex {
    display: flex;
}

.flex-column {
    flex-direction: column;
}

.justify-content-center {
    justify-content: center;
}

.justify-content-between {
    justify-content: space-between;
}

.justify-content-end {
    justify-content: flex-end;
}

.justify-space-between {
    justify-content: space-between;
}

.align-items-center {
    align-items: center;
}

.display-flex-center--direction-column {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.display-flex-column {
    display: flex;
    flex-direction: column;
}

.flex-wrap {
    flex-wrap: wrap;
}

.flex-100 {
    flex-basis: 100%;
}

.flex-90 {
    flex-basis: 90%;
}

.flex-80 {
    flex-basis: 80%;
}

.flex-70 {
    flex-basis: 70%;
}

.flex-60 {
    flex-basis: 60%;
}

.flex-50 {
    flex-basis: 50%;
}

.flex-45 {
    flex-basis: 45%;
}

.flex-40 {
    flex-basis: 40%;
}

.flex-35 {
    flex-basis: 35%;
}

.flex-30 {
    flex-basis: 30%;
}

.flex-25 {
    flex-basis: 25%;
}

.flex-20 {
    flex-basis: 20%;
}

.flex-15 {
    flex-basis: 15%;
}

.flex-10 {
    flex-basis: 10%;
}

.flex-5 {
    flex-basis: 5%;
}

.margin-auto {
    margin: auto;
}

.margin-bottom-35 {
    margin-bottom: 35px;
}

.margin-right-4 {
    margin-right: 4px;
}

.padding-x-10 {
    padding-right: 10px;
    padding-left: 10px;
}

.width-100-percent {
    width: 100%;
}

.width-90-percent {
    width: 90%;
}

.width-80-percent {
    width: 80%;
}

.with-70-percent {
    width: 70%;
}

.max-width-60px {
    max-width: 60px;
}

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

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

.border-right-gray {
    border-right: 1px solid #e6e6e6;
}

.position-relative {
    position: relative;
}

.modal-backdrop {
    background-color: #00000085;
}
/*.layout .drawer .drawer-content {
    position: fixed;
    height: 100vh;
    overflow:auto;

}*/
.layout .drawer .drawer-content .sidebar.sidebar-light {
    /*background: #172238 !important;*/
    background: var(--sidebar-main-color) !important;
}

    .layout .drawer .drawer-content .sidebar.sidebar-light * {
        /*color: #ddd !important;*/
        color: var(--sidebar-text-color) !important;
    }

    .layout .drawer .drawer-content .sidebar.sidebar-light .sidebar-menu .sidebar-menu-item.active > .sidebar-menu-button, .layout .drawer .drawer-content .sidebar.sidebar-light .sidebar-menu .sidebar-menu-item.open > .sidebar-menu-button {
        color: #fff !important
    }

        .layout .drawer .drawer-content .sidebar.sidebar-light .sidebar-menu .sidebar-menu-item.active > .sidebar-menu-button, .layout .drawer .drawer-content .sidebar.sidebar-light .sidebar-menu .sidebar-menu-item.open > .sidebar-menu-button * {
            color: #fff !important
        }

.layout .drawer .drawer-content .sidebar .search-form {
    background: transparent;
}

.layout .drawer .drawer-content .sidebar .sidebar-account {
    box-shadow: 0 2px 1px -1px #ffffff11, 0 1px 1px 0 #ffffff99, 0 1px 3px 0 #ffffff55;
    border-radius: 0;
    margin: 0
}

.dropdown-menu.show, .show > .dropdown-menu {
    background: #061d37;
    background: #272f40 !important;
}

.layout .drawer .drawer-content .sidebar .sidebar-menu .sidebar-menu-item.open {
    background: #061d37;
    border-radius: 0;
    /*background: #28334a !important;*/
    background: var(--sidebar-active-color-background) !important;
}

/* .layout .drawer .drawer-content .sidebar .sidebar-menu .sidebar-menu-item.open .sidebar-submenu {
        padding-bottom: .5rem;
    }
*/
.layout-mini .layout .drawer .drawer-content .sidebar-secondary {
    background: #28334a;
}

    .layout-mini .layout .drawer .drawer-content .sidebar-secondary * {
        color: #fff !important;
    }

    .layout-mini .layout .drawer .drawer-content .sidebar-secondary .tab-pane .sidebar-menu .sidebar-menu-item {
        background: #374158;
        margin-left: 0;
        border-radius: 0;
    }

        .layout-mini .layout .drawer .drawer-content .sidebar-secondary .tab-pane .sidebar-menu .sidebar-menu-item .sidebar-submenu .sidebar-menu-item .sidebar-menu-button {
            padding-right: 2.2rem;
        }

            .layout-mini .layout .drawer .drawer-content .sidebar-secondary .tab-pane .sidebar-menu .sidebar-menu-item .sidebar-submenu .sidebar-menu-item .sidebar-menu-button .sidebar-menu-text {
                padding-right: 1.75rem;
                border-right-width: 2px;
                border-color: #666;
            }

            .layout-mini .layout .drawer .drawer-content .sidebar-secondary .tab-pane .sidebar-menu .sidebar-menu-item .sidebar-submenu .sidebar-menu-item .sidebar-menu-button.active {
                border-color: #00bcc2
            }

                .layout-mini .layout .drawer .drawer-content .sidebar-secondary .tab-pane .sidebar-menu .sidebar-menu-item .sidebar-submenu .sidebar-menu-item .sidebar-menu-button.active .sidebar-menu-text {
                    border-color: #00bcc2
                }

                    .layout-mini .layout .drawer .drawer-content .sidebar-secondary .tab-pane .sidebar-menu .sidebar-menu-item .sidebar-submenu .sidebar-menu-item .sidebar-menu-button.active .sidebar-menu-text:before {
                        display: none;
                    }

.bs-tooltip-auto[x-placement^="left"] .arrow::before, .bs-tooltip-left .arrow::before {
    border-left-color: #555 !important;
}

.layout-mini .drawer .drawer-content .sidebar.sidebar-light .sidebar-menu .sidebar-menu-item.active > .sidebar-menu-button .sidebar-menu-icon {
    /*color: #00bcc2 !important;*/
    color: var(--sidebar-active-text-color) !important;
}

.layout .drawer .drawer-content .sidebar .sidebar-menu .sidebar-menu-item .sidebar-submenu .sidebar-menu-item .sidebar-menu-button .sidebar-menu-text {
    border-color: #555;
    border-right-width: 2px;
}

.tooltip-inner {
    background: #555 !important;
    color: #fff;
}

.layout .drawer .drawer-content .sidebar .sidebar-brand .sidebar-brand-icon {
    border-radius: 100px;
    width: 36px;
    margin: 0;
}

.layout .drawer .drawer-content .sidebar .sidebar-brand {
    min-height: 64px;
    margin-right: 1.5rem;
    margin-left: 1.5rem;
    flex-direction: row;
    padding: 0;
}

    .layout .drawer .drawer-content .sidebar .sidebar-brand span {
        font-size: 1rem;
        padding-right: 0.7rem;
    }

.layout .drawer .drawer-content .sidebar .search-form {
    border-radius: 3px;
    border-color: #666;
}

.layout .drawer .drawer-content .sidebar.sidebar-light {
    overflow: visible
}

.layout .drawer .drawer-content .sidebar button#sidebar-toggler.navbar-toggler {
    background: #172238;
    left: -15px;
    top: 20px;
    width: 24px;
    height: 24px !important;
    /*box-shadow: 0 0 1px #00bcc2;*/
}

.layout .drawer .drawer-content .sidebar .sidebar-toggler i {
    font-size: 0.7rem;
    color: #ddd !important;
    transition: 0.5s;
}

body:not(.layout-mini) .layout .drawer .drawer-content .sidebar .sidebar-menu .sidebar-menu-item.active.open .submenu-container .sidebar-menu-item.active span {
    /*border-color: var(--sidebar-active-border-color);
    border-right-width: 2px;*/
    border-right: 2px solid var(--sidebar-active-border-color);
    /*color: #00bcc2 !important;*/
}

.layout .drawer .drawer-content .sidebar .sidebar-menu .sidebar-menu-item .sidebar-submenu .sidebar-menu-item .sidebar-menu-button .sidebar-menu-text:after {
    display: none !important;
}

.account-dropdown-menu.dropdown-menu.dropdown-menu-full.dropdown-menu-caret-center {
    background-color: #fff !important;
    left: 0px !important;
}

    .account-dropdown-menu.dropdown-menu.dropdown-menu-full.dropdown-menu-caret-center::after {
        left: 10px !important;
        right: auto;
    }

.account-dropdown-menu a {
    font-size: 0.8rem;
}

.account-toggle-button::after {
    margin-right: 0px !important;
}

.account-dropdown-menu .logout {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
}

    .account-dropdown-menu .logout span {
        /*color: #d12c2c;*/
        font-size: 1.1rem;
    }

.dropdown-menu.dropdown-menu-right.show {
    background-color: #fff !important;
}

.layout-mini .layout .drawer .drawer-content .sidebar .sidebar-toggler {
    position: absolute;
    left: -15px;
    top: 20px;
}

.layout-mini .layout .drawer .drawer-content .sidebar .sidebar-brand {
    display: flex;
    margin: 0 auto;
}

    .layout-mini .layout .drawer .drawer-content .sidebar .sidebar-brand span {
        display: none
    }

.layout-mini .drawer .drawer-content .sidebar .sidebar-brand .sidebar-brand-icon {
    margin: 0 auto;
}

.account-role {
    background: #33cc6633;
    color: #326832;
    font-size: 0.6rem;
    font-weight: bold;
    padding: 3px 10px;
    border-radius: 3px;
}

.layout-mini .drawer .drawer-content .sidebar .sidebar-toggler i {
    transform: rotate(180deg)
}

body:not(.layout-mini) .layout .drawer .drawer-content .sidebar .sidebar-menu .sidebar-menu-item {
    margin-left: 0;
    padding: 1px 0;
    /*border-right: 3px solid transparent*/
}

    body:not(.layout-mini) .layout .drawer .drawer-content .sidebar .sidebar-menu .sidebar-menu-item:not(.active):hover > a span {
        background: var(--sidebar-submenu-hover-color) !important;
        border-radius: 0;
        width: 100%
    }

body:not(.layout-mini) .layout .drawer .drawer-content .sidebar > .sidebar-menu > .sidebar-menu-item {
    margin-left: 0;
    padding: 5px 0;
    /*border-right: 3px solid transparent*/
}

.layout .drawer .drawer-content .sidebar .sidebar-menu .sidebar-menu-item .sidebar-submenu .sidebar-menu-item .sidebar-menu-button .sidebar-menu-text {
    padding-right: 1.75rem;
}

.layout .drawer .drawer-content .sidebar .sidebar-menu .sidebar-menu-item .sidebar-menu-button .sidebar-menu-icon {
    font-size: 1.2rem;
}

.sidebar-brand-icon-container {
    width: 42px;
    height: 42px;
    background: linear-gradient(#ffffff, #ffffff) 50% 50%/calc(100% - 50px) calc(100% - 50px) no-repeat, conic-gradient(#ff0000 0%, #ffff00 16.67%, #00ffff 50%, #ff00ff 83.33%, #ff0000 100%);
    box-sizing: border-box;
    border-radius: 50px;
    padding: 3px;
    margin: 0;
}

.layout-mini .sidebar-brand-icon-container {
    margin: 0 auto;
}

.sidebar-menu-item.hover {
    background: /*#2a3c60*/;
    background: var(--sidebar-hover-color);
    border-radius: 0 !important;
    transition: 0.5s;
    overflow: visible !important
}

    .sidebar-menu-item.hover .sidebar-submenu {
        display: block;
    }


    .sidebar-menu-item.hover .submenu-container {
        border-radius: 3px 0 0 3px;
        position: absolute;
        top: 0;
        right: 255px;
        width: 200px;
        background-color: var(--sidebar-hover-color);
        z-index: 999
    }

    .sidebar-menu-item.hover.active .submenu-container {
        border-radius: 3px 0 0 3px;
        position: absolute;
        top: 0;
        right: 252px;
        width: 200px;
        background-color: var(--sidebar-hover-color);
        z-index: 999
    }

.submenu-container li span {
    font-size: 0.9rem;
}

.layout-mini .sidebar-menu-item.hover .submenu-container.hide {
    display: none;
}

.layout-mini .layout .drawer .drawer-content .sidebar .sidebar-menu .sidebar-menu-item.hover .submenu-container {
    display: block;
    border-radius: 3px 0 0 3px;
    position: absolute;
    top: 0;
    right: 63px;
    width: 200px;
    background: #2a3c60;
    background: var(--sidebar-hover-color);
    z-index: 999
}

.layout .drawer .drawer-content .sidebar .sidebar-menu .sidebar-menu-item.hover .sm-indent .sidebar-menu-item {
    /*border-right: 3px solid transparent*/
}

    .layout .drawer .drawer-content .sidebar .sidebar-menu .sidebar-menu-item.hover .sm-indent .sidebar-menu-item:hover {
        /*background: #212f4a;*/
        background: var(--sidebar-submenu-hover-color);
        border-radius: 0;
        /*border-right: 3px solid var(--sidebar-active-border-color)*/
    }

    .layout .drawer .drawer-content .sidebar .sidebar-menu .sidebar-menu-item.hover .sm-indent .sidebar-menu-item.active {
        background-color: var(--submenu-active-color-background);
        border-right: 3px solid var(--sidebar-active-border-color);
        border-radius: 0;
    }

body:not(.layout-mini) .drawer .drawer-content .sidebar .sidebar-menu .submenu-container .sidebar-menu-item.active span {
    background-color: var(--submenu-active-color-background);
    width: 100%;
}
/*body:not(.layout-mini) .drawer .drawer-content .sidebar .sidebar-menu .submenu-container .sidebar-menu-item span {
    background-color: var(--submenu-active-color-background);
   width: 100%;
}*/

.layout .drawer .drawer-content .sidebar .sidebar-menu .sidebar-menu-item.hover .sm-indent .sidebar-menu-item .sidebar-menu-button {
    padding-right: 5px;
}

.layout-mini .drawer .drawer-content .sidebar .sidebar-menu .sidebar-menu-item.hover .sm-indent .sidebar-menu-item .sidebar-menu-button {
    padding-right: 0px !important;
}

.layout .drawer .drawer-content .sidebar .sidebar-menu .sidebar-menu-item.hover .sm-indent .sidebar-menu-item .sidebar-menu-button span {
    padding-right: 5px;
    border-right: none;
}

.layout-mini .drawer .drawer-content .sidebar .sidebar-menu .sidebar-menu-item.hover .sm-indent .sidebar-menu-item .sidebar-menu-button span {
    display: block;
    padding-right: 5px;
    border-right: none;
}

.layout-mini .drawer .drawer-content .sidebar .sidebar-menu .sidebar-menu-item.hover .sidebar-submenu .sidebar-menu-item .sidebar-menu-button .sidebar-menu-text {
    padding-right: 0
}

.layout-mini .drawer .drawer-content .sidebar .sidebar-menu .sidebar-menu-item.hover .sm-indent .sidebar-menu-item .sidebar-menu-button {
    margin-bottom: 5px !important;
}

.layout-mini .drawer .drawer-content .sidebar .sidebar-menu .sidebar-menu-item.hover .sidebar-submenu .sidebar-menu-item .sidebar-menu-button .sidebar-menu-text {
    display: block !important;
    padding: 0;
    border-right: none;
    margin-right: 0;
    margin-left: auto;
    line-height: 10px !important;
    padding-right: 10px !important
}

.sidebar-menu-title {
    font-weight: 800;
    margin: 0 4px;
    padding: 8px 2px;
    display: block;
    cursor: pointer;
    border-bottom: 1px solid #888
}

body:not(.layout-mini) .sidebar-menu-item.active.open .sidebar-menu-title {
    display: none
}

.layout-mini .sidebar-menu-title:hover {
    background: inherit
}

.sidebar-menu-title-text {
    padding-right: 2px;
}
/*MUD BLAZOR*/
.mud-picker-calendar .mud-day.mud-range.mud-range-start-selected {
    border-radius: 0% 50% 50% 0%
}

.mud-picker-calendar .mud-day.mud-range.mud-range-selection:hover:not(.mud-range-start-selected) {
    border-radius: 0% 50% 50% 0%
}

.mud-picker-calendar .mud-day.mud-range.mud-range-selection:hover:not(.mud-range-end-selected) {
    border-radius: 50% 0% 0% 50%
}

.mud-picker-calendar .mud-day.mud-range.mud-range-end-selected {
    border-radius: 50% 0% 0% 50%
}

/*.isDisabled {
    pointer-events: none !important;
}*/
.sidebar-menu-item {
    cursor: pointer
}

    .sidebar-menu-item.hide .submenu-container {
        display: none;
    }

.layout-mini #sidebar-main-menu > .sidebar-menu-item.active > span {
    /*border-right: 3px solid #00bcc2*/
    border-right: 3px solid var(--sidebar-active-border-color)
}

#sidebar-main-menu > .sidebar-menu-item.active > span {
    border-right: 3px solid #00000000;
    border-left: 3px solid #00000000
}


.sidebar-menu-item.open.active .submenu-container {
    height: auto;
}

.sidebar-menu-item.active.hover .submenu-container {
    height: auto
}

.sidebar-menu-item.active .submenu-container {
    height: 0
}

#sidebar-main-menu > .sidebar-menu-item.active:not(.open) {
    border-right: 3px solid var(--sidebar-active-border-color);
    background: var(--sidebar-active-color-background);
}

#sidebar-main-menu > .sidebar-menu-item.active:not(.open) {
    border-radius: 0 !important
}




/*--------------- custom style form notification -----------------*/

.mud-button-root.mud-icon-button.mud-ripple.mud-ripple-icon.mud-icon-button-size-large.text-white {
    padding: 5px 10px !important;
}

.layout .page-content .content {
    padding-top: 10px;
    width: 90%
}

.navbar-expand .nav-link {
    height: auto
}

.account-info.main {
    margin-left: 10px;
}

.account-toggle-button > img {
    margin-left: 10px;
}

.nav-item.dropdown {
    margin-left: 10px;
}

.nav.navbar-nav.flex-nowrap {
    justify-content: flex-end
}

.nav-item button.nav-link i.fa-bell {
    font-size: 18px
}

@media only screen and (min-width: 576px) {
    .navbar.navbar-expand {
        height: auto !important;
        display: flex;
        padding-bottom: 10px !important;
        flex-direction: column-reverse;
        height: 200px;
        width: 42px;
        position: fixed;
        top: 10px;
        left: 0px;
        padding-right: 0;
        z-index: 99;
        background-color: transparent !important;
        box-shadow: 0 0 5px #bbb;
        border-radius: 0 5px 5px 0;
    }

    img.rounded-circle {
        border-radius: 5px !important;
    }

    .layout .page-content .content {
        padding-top: 10px !important;
        width: calc(100% - 70px) !important;
        margin-left: 50px;
    }

    button.nav-link {
        height: 30px !important;
    }

    button.navbar-toggler {
        height: 30px !important;
        width: 100%;
    }

    .account-toggle-button.nav-link {
        margin-bottom: 0px;
        padding: 0 !important;
        height: auto;
    }

    .nav-item.dropdown {
        width: 100%;
    }

        .nav-item.dropdown > button {
            width: 100%;
        }

    .dropdown-menu.dropdown-menu-right.show {
        left: 4px !important;
    }

    .dropdown-toggle::after {
        margin-left: 0 !important;
    }

    .account-info.main > span {
        display: none;
    }

    .account-toggle-button > img {
        margin-left: 0px;
    }
}

.tableHeader {
    background-color: #eaeaea !important;
    text-align: center
}

    .tableHeader span {
        display: inline-flex !important;
        text-align: center
    }

.mud-table-head th {
    background-color: #eaeaea !important;
}

.mud-table-head {
    border-radius: 5px 5px 0 0
}

.mud-table-root {
    border-radius: 5px;
    /*overflow: hidden*/
}

table.mud-table-root {
    border-collapse: initial !important;
}

.icony-toman {
    font-size: 1.2rem;
}

tfoot.mud-table-foot {
}

    tfoot.mud-table-foot td {
        border-right: 1px solid rgba(224,224,224,1);
        border-top: 2px solid #999 !important;
    }

        tfoot.mud-table-foot td:last-child {
            border-right: 1px solid transparent;
        }

/*.tox {
    display: none;
}

.tox-notification {
    display: none !important;
}
*/


.option-label {
    background: #eaeaea;
    min-width: 60px;
    height: 20px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    padding: 2px 12px;
    border-radius: 3px;
    color: #888;
    border: 1px solid #e4e4e4;
}

    .option-label.label-center {
        position: relative;
        left: -50%;
        transform: translateX(50%);
    }

.discount-label {
    background: #ff6464;
    color: #fff;
    min-width: 40px;
    height: 20px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    border-radius: 50px;
    padding: 2px;
    padding-top: 5px;
    font-size: 0.7rem;
    font-weight: bold;
    border: 1px solid #e4e4e4;
}

    .discount-label.disabled {
        background: #ff646466;
    }

.option-label.color {
    min-width: 55px;
    background: red;
    font-size: 0.7rem
}

    .option-label.color span {
        background: inherit;
        background-clip: text;
        -webkit-background-clip: text;
        color: #00000055;
        mix-blend-mode: difference;
        filter: invert(1);
        -webkit-filter: invert(1);
    }

.option-label.paddingtop {
    padding-top: 5px;
}

.option-label.material {
    font-size: 0.7rem;
}

.dialog-mudgrid-style {
    height: 450px;
    overflow-y: hidden;
    display: flex;
    margin: 0;
    width: 100%;
    padding: 0;
}

.dialog-option {
    overflow: hidden;
    background-color: #f7f7f7;
    padding: 0
}

.error-option {
    margin-top: 10px;
    margin-right: 5px;
}

.right-scrollbar {
    transform: rotateY(180deg);
    -ms-transform: rotateY(180deg);
    -webkit-transform: rotateY(180deg)
}

.selection-option {
    height: 100%;
    overflow-y: scroll;
    border-radius: 5px;
    border: 1px solid #e4e4e4;
    padding: 0;
}

.selection-option {
    -ms-overflow-style: none; /* for Internet Explorer, Edge */
    scrollbar-width: none; /* for Firefox */
    overflow-y: scroll;
}

    .selection-option::-webkit-scrollbar {
        display: none; /* for Chrome, Safari, and Opera */
    }

.product-list-option {
    border-bottom: 1px solid #eee;
    border-top: none;
    margin: 0;
    position: relative;
    display: inline-block;
    width: 100%;
    padding: 7px 5px;
}

    .product-list-option span {
        font-size: .85rem
    }

    .product-list-option:hover {
        background: #00000011
    }

    .product-list-option:first-child {
        /*border-top: 1px solid #aaa;*/
    }

.product-list-option-color {
    display: inline-block;
    width: 25px;
    height: 25px;
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    border-radius: 4px
}

.list-of-options:last-child {
    border-bottom: none !important;
}

.mud-dialog-container {
    right: 0;
}


.options-list {
    /*position: static*/
}

    .options-list .mud-input-control-helper-container {
        position: absolute;
        bottom: -20px;
    }
/*responsive mode form admin */
@media only screen and (max-width: 567px) {
    .layout .page-content .content {
        width: 95%
    }
    /*  .mud-paper{
        padding: 0 !important;
    }*/
    #scrollTable .mud-table-container {
        height: 100vh !important
    }

    .addButton {
        min-width: 100%
    }

        .addButton .mud-button-label {
            margin: 0 !important
        }

            .addButton .mud-button-label span {
                margin: 0 !important
            }

    .editOptionButtons {
        width: 100% !important;
        justify-content: flex-end
    }

    .tableRelatedTd {
        width: 100% !important
    }

    .addInvoice {
        width: 90% !important;
        margin: 10px 5% !important;
    }

    .productListTitle .mud-toolbar-appbar {
        display: flex;
        justify-content: space-between
    }
}


.disableRow td {
    color: #ddd !important
}

.disableRow .option-label {
    color: #ccc !important;
    background-color: #f7f7f7;
    border: none;
}

.disableRow .discount-row * {
    color: #ccc !important;
}

.disableRow .discount-label.disabled {
    color: #ccc !important;
    background-color: #f1f1f1;
    border: none;
}

.rate-container {
    width: 20px;
    height: 20px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    border-radius: 3px;
    margin-left: 5px;
    font-size: 0.9rem;
    color: #fff;
}

.popup-content {
    padding-top: 10px;
    font-size: 1.05rem !important;
    padding-right: 5px;
}

    .popup-content div {
        font-size: 0.9rem;
        padding-right: 3px
    }


/*-----------Disabled Link----------*/
.disabled-link {
    pointer-events: none;
    opacity: 0.5
}

.sidebar-menu-item:hover.disabled-link {
    background-color: transparent !important;
    cursor: auto
}

.layout .drawer .drawer-content .sidebar .sidebar-menu .sidebar-menu-item .sidebar-menu-button {
    line-height: unset
}

.layout .drawer .drawer-content .sidebar .sidebar-menu .sidebar-menu-item .sidebar-submenu .sidebar-menu-item .sidebar-menu-button .sidebar-menu-text {
    line-height: unset
}

.mb-0 {
    margin-bottom: 0
}


.layout-date {
    padding: 0;
    /*background-color: red;*/
    position: fixed;
    left: 10px;
    top: 155px;
    width: fit-content;
    /*border-radius: 3px;*/
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-end;
    color: #fff;
    overflow: hidden;
    z-index: 999;
}

    .layout-date .date {
        max-width: 25px;
        display: flex;
        justify-content: center;
        /*width: 100%;*/
        background-color: #172238;
        padding: 3px;
        text-align: center;
        font-size: 0.9rem;
        cursor: pointer;
        overflow: hidden;
        white-space: nowrap;
        transition: 1s;
        border-radius: 3px 3px 0 0
    }

        .layout-date .date > span:first-child {
            min-width: 25px;
            display: flex;
            justify-content: center;
        }

        .layout-date .date:hover {
            max-width: 180px;
            padding-left:10px;
            padding-right: 10px;
            transition: 1s;
            border-radius:3px 3px 3px 0
        }
            .layout-date .date:hover  span:first-child {
                /*opacity: 0 !important;idth:0;
                min-width:0;
                display: inline-block;
               overflow: hidden*/
                display: none;
            }

        .layout-date .date span {
            overflow: hidden;
            white-space: nowrap
        }
    
    .layout-date .month {
        display: block;
        position:fixed;
        left: 10px;
        width: 25px;
        background-color: #604aaf;
        padding: 20px 3px;
        writing-mode: vertical-lr;
        text-orientation: mixed;
        font-size: 0.8rem;
        border-radius: 3px 3px 0 0;
        transform: scale(-1)
    }