:root {
    /* v2 styles */
    --color-primary: #db7013; 
    --color-primary-icon: #2b678e;    

    /* In v2 $yon-orange ; */
    --color-secondary: #2b678e;
    /* $yon-blue ; */
    --color-font-a: #015ea5;
    --color-yellow: #f1bb3e;
    --color-blue: hsl(204 57% 55% / 1);
    
    --color-green-success: #4caf50;
    --color-green-success-txt: darkgreen;
    --color-yellow-warning: hsl(38, 100%, 50%);
    --color-yellow-info: hsl(38, 100%, 72%);
    --color-red-error: #f44336;
    --color-brown-status: #d29e65;
    --color-purple-status: #999cfe;
    --color-icon-info: #5fbfab;
    --color-icon-info: hsl(45 90% 69% / 1);
    --color-icon-info_: hsl(40deg 97.7% 82.94%);
    --color-blue-table-row-background: #eefbff;
    --color-grey-border: #d6d6d6;
    --color-grey-disabled: #00000061;
    --btn-bg-primary-enabled: #db7013;
    --btn-bg-raised-primary-enabled: #db7013;
    --btn-border-raised-primary-enabled: 1px solid #db7013;

    --color-checkbox-status-yellow: hsl(45deg 80% 50%);
    --color-checkbox-status-red: hsl(0deg 50% 50%);
    --color-checkbox-status-green: hsl(120deg 50% 50%);
    --color-checkbox-status-grey: grey;
}
:root.light {
    --color-primary: hsl(45 90% 50% / 1);
    --color-primary-bg: hsl(228 20% 90% / 1);
    --color-primary-icon: var(--color-primary);
    --btn-bg: hsl(0deg 0% 62.09% / 10%);
    --btn-bg-raised: hsl(0deg 0% 62.09% / 10%);
    --color-primary: #323232;
    /* In v2 $yon-orange ; */
    --color-secondary: #28579c;
    --color-font-a: #3066A1;
    /* $yon-blue ; */
    --color-green-success:#91C8AB;
    --color-yellow-info: hsl(38, 100%, 82%);
    --color-yellow-warning: hsl(35deg 100% 65%);
    --color-red-error: #E27D75;
    --color-yellow-info-bg: hsl(38 84% 40% / 1);
}
:root.dark {
    --color-primary: hsl(206.22deg 100% 46.67%);
    --color-primary-bg: hsl(206deg 100% 47% / 35%);
    --color-primary-icon: var(--color-primary);
    --btn-bg: hsl(0deg 0% 62.09% / 30%);
    --btn-bg-raised: hsl(0deg 0% 62.09% / 30%);
    --color-secondary: orange;
    --color-blue: #0086ee;
    --color-green-success-txt: lightgreen;
    --color-icon-info: #ffcb70;
    --color-yellow-warning: hsl(35deg 100% 65%);
    /* In v2 $yon-orange ; */
    color-scheme: dark;
}
:root {
    --layout-bg-color: #F2F3F6;
    --layout-bg-color-card: white;
    --layout-bg-color-left-menu: #FBFCFC;
    --layout-bg-top-gradient: linear-gradient(180deg, #F2F3F6, #E8E9ED);
    --layout-bg-table-gradient: linear-gradient(0deg, transparent, #f2f3f6);
    --layout-toprow-height: .8vw;
    --layout-top-spacer-height: 15px;
    --layout-app-toolbar-height: 60px;
    --layout-card-radius: 10px;
    --layout-grid-gap: .6vw;
    --layout-tr-grid-gap: 12px;
    --layout-card-padding: 1.5vw;
    --layout-top-margin: 10px;
    --font-header-color: #585858;
    --layout-left-panel-width: 240px;
    --layout-right-panel-width: 320px;
    --layout-right-slimpanel-width: 16vw;
    --layout-top-panel-height: 130px;
    --layout-bg-color-card_: #e8e9ec;
    --layout-bg-color-left-menu_: hsl(225 10% 100% / 1);
    --color-font-a: #015ea5;
    --font-top-header-size: 2.5vw;
    --font-size-btn-raised: 14px;
    --color-bg-btn-raised: #000;
    --color-bg-btn-raised: hsl(38 84% 55%);
    --color-bg-btn-raised: var(--color-primary);
    --color-txt-btn-raised: #fff;
    --color-mono-contrast-max: hsl(0deg 0% 0%);
    --color-mono-contrast-high: hsl(0deg 0% 15%);
    --color-mono-contrast-medium: hsl(0deg 0% 26%);
    --color-mono-contrast-low: hsl(0deg 0% 38%);
    --color-mono-contrast-min: hsl(0deg 0% 70%);
    --color-inverted-contrast-max: hsl(0deg 0% 100%);
    --color-inverted-contrast-high: hsl(0, 0%, 96%);
    --color-inverted-contrast-medium: hsl(0deg 0% 87%);
    --color-inverted-contrast-low: hsl(0deg 0% 60%);
    --color-inverted-contrast-min: hsl(0deg 0% 60%);
    --color-bg-box-header: #f2f3f6;
    --color-bg-button-filter: hsl(0deg 0% 96%);
    --color-bg-button-filter-selected: hsl(232.5deg 12.12% 87.06%);
    --color-bg-table-row-selected: #F2F3F6;
    --color-bg-table-row-selected: hsl(210deg 20% 94%);
    --color-bg-menu-row-selected: #F2F3F6;
    --color-bg-paginator: #F2F3F6;
    --color-bg-right-modal: hsl(180deg 14.29% 98.63%);
    --color-bg-details-box: hsl(225 18% 97.5% / 1);
    --color-bg-modal-details-box: hsl(228 12% 95% / 1);
    --color-bg-details-activebox: hsl(220 20% 95% / 1);
    --color-bg-table-loading: hsl(228deg 22% 83.1% / 17%);
    --color-modal-box-shadow: -9px 0px 8px rgb(72 107 138 / 10.1%);
    --color-leftmodal-box-shadow: 9px 0px 8px rgb(72 107 138 / 10.1%);
    --color-bg-paginate-next: #d9dae3;
    --color-bg-table-drilled-level1: hsl(210deg 20% 97%);
    --color-bg-table-drilled-level2: hsl(210deg 20% 94%);
    --color-bg-table-drilled-level3: hsl(210 24% 89%);
    --color-bg-page-overlay: hsl(225deg 0% 70% / 40%);
    --color-progress-bar: #67d6a6;
    --scrollbar-track-bg: #f2f3f6;
    --scrollbar-thumb-bg: rgb(216 216 216);
    --input-bg-color: #dadbe3;
    --color-input-border: hsl(210deg 20% 92%);
    --kendo-dropdown-bg: hsl(194, 100%, 97%);
    --yon-grey-border: hsl(0deg 0% 87%);
    --color-slide-toggle: #db70138a;
    --color-table-border: hsl(0 0% 92% / 1);
    --color-checkbox-status-grey: var(--color-bg-table-drilled-level3);
}
:root.light {
    --color-mono-contrast-max: hsl(0deg 0% 0%);
    --color-mono-contrast-high: hsl(0deg 0% 15%);
    --color-mono-contrast-medium: hsl(0deg 0% 27%);
    --color-mono-contrast-low: hsl(0deg 0% 50%);
    --color-mono-contrast-min: hsl(0deg 0% 65%);
    --color-inverted-contrast-max: hsl(0deg 0% 100%);
    --color-inverted-contrast-high: hsl(0deg 0% 85%);
    --color-inverted-contrast-medium: hsl(0deg 0% 73%);
    --color-inverted-contrast-low: hsl(0deg 0% 60%);
    --color-inverted-contrast-min: hsl(0deg 0% 30%);
    --color-blue-table-row-background: #f2f3f6;
    --kendo-dropdown-bg: hsl(194, 30%, 97%);
    --color-slide-toggle: hsl(26 61% 57% / 1);

    --color-primary-orange: hsl(45 90% 48%);
    --color-primary-blue: hsl(220deg 60% 60%);
    --color-primary-darkblue: hsl(220deg 40% 40%);
    --color-primary-darkblue_: hsl(220 50% 40% / 1);
    --color-primary-green: hsl(143deg 40% 54%);
    --color-primary-black: hsl(0deg 0% 19.61%);
    --color-primary-pink: hsl(350deg 50% 70%);
    --color-primary-purple: hsl(262deg 58% 25%);

    .color-palette span { background-color: var(--color-primary-orange) }
    .color-palette span.blue { background-color: var(--color-primary-blue) }
    .color-palette span.darkblue { background-color: var(--color-primary-darkblue) }
    .color-palette span.green { background-color: var(--color-primary-green) }
    .color-palette span.black { background-color: var(--color-primary-black) }
    .color-palette span.pink { background-color: var(--color-primary-pink) }
    .color-palette span.purple { background-color: hsl(262deg 58% 45%) }
}
:root.light {

    --color-rgb: 210deg;
    --color-saturation: 20%;
    
    --color-blue-table-row-background: hsl(var(--color-rgb) 20% 95.69%);

    --color-bg-table-row-selected:  hsl(var(--color-rgb) var(--color-saturation) 95%);
    --color-bg-table-drilled-level1: hsl(var(--color-rgb) var(--color-saturation) 97%);
    --color-bg-table-drilled-level2: hsl(var(--color-rgb) var(--color-saturation) 94%);
    --color-bg-table-drilled-level3: hsl(var(--color-rgb) var(--color-saturation) 89%);

    --color-bg-menu-row-selected: hsl(var(--color-rgb) var(--color-saturation) 95%);

    --layout-bg-table-gradient: linear-gradient(0deg, transparent, hsl(var(--color-rgb) 26.83% 95%));
    --color-slide-toggle: var(--color-primary);


}
:root.light[data-theme-primary-color="orange"] {
    --color-primary: var(--color-primary-orange);

    --color-green-success: #49817e;
    --color-green-success-txt: white;
    --color-purple-status: #5f3ba2;
    --color-yellow-warning: #e1b23f;
    --color-yellow-info: #e1b23f;
    --color-brown-status: #d78932;
    --color-red-error: #c96554;

}
:root.light[data-theme-primary-color="black"] {
    --color-slide-toggle: var(--color-primary-orange);
}
:root.light[data-theme-primary-color="blue"] {
    --color-rgb: 233deg;
    --color-saturation: 20%;
    --color-primary: var(--color-primary-blue);
    --color-font-a: var(--color-primary-darkblue);

    --color-green-success: #65a9a4;
    --color-green-success-txt: white;
    --color-purple-status: #9587e1;
    --color-yellow-warning: #f7c76d;
    --color-yellow-info: #f7c76d;
    --color-brown-status: #f3a669;
    --color-red-error: #c96554;
}
:root.light[data-theme-primary-color="darkblue"] {
    --color-rgb: 233deg;
    --color-saturation: 20%;
    --color-primary: var(--color-primary-darkblue);
    --color-font-a: var(--color-primary-darkblue);
    --layout-bg-table-gradient: linear-gradient(0deg, transparent, hsl(var(--color-rgb) 20% 95%));

    --color-green-success: #5ca3a0;
    --color-green-success-txt: white;
    --color-purple-status: #6e64a6;
    --color-yellow-warning: #f4c32f;
    --color-yellow-info: #f4c32f;
    --color-brown-status: #c48d61;
    --color-red-error: #ce7464;
}
:root.light[data-theme-primary-color="green"] {
    --color-primary: var(--color-primary-green);
    --color-font-a: var(--color-primary-darkblue);

    --color-green-success: #49817e;
    --color-green-success-txt: white;
    --color-purple-status: #5f3ba2;
    --color-yellow-warning: #e1b23f;
    --color-yellow-info: #e1b23f;
    --color-brown-status: #d78932;
    --color-red-error: #c96554;
}
:root.light[data-theme-primary-color="pink"] {    
    --color-rgb: 350deg;
    --color-saturation: 45%;
    
    --color-primary: var(--color-primary-pink);
    --color-bg-table-drilled-level3: hsl(var(--color-rgb) 0% 89%);
    --layout-bg-table-gradient: linear-gradient(0deg, transparent, hsl(var(--color-rgb) var(--color-saturation) 95%));

    --color-green-success: #96b6ad;
    --color-green-success-txt: #344B45;
    --color-purple-status: #9587e1;
    --color-yellow-warning: #e1b59a;
    --color-yellow-info: #e1b59a;
    --color-brown-status: #b88464;
    --color-red-error: #c96554;
}


:root.dark {
    background-color: black;
    --layout-bg-top-gradient: linear-gradient(180deg, #000000, hsl(228 16% 11% / 1));
    --layout-bg-top-gradient: linear-gradient(180deg, #000000, hsl(228 0% 5%));
    --layout-bg-table-gradient: linear-gradient(0deg, transparent, #212121);
    --layout-bg-color: #000000;
    --layout-bg-color-card: hsl(0, 0%, 7%);
    --layout-bg-color-left-menu: hsl(0, 0%, 5%);
    --layout-bg-color-left-menu: hsl(0deg 0% 8.06%);
    --layout-bg-color-left-menu: hsl(0 0% 9% / 1);
    --font-header-color: hsl(0, 0%, 65%);
    --color-font-a: hsl(207deg 100% 70%);
    --color-bg-btn-raised: #0086ee;
    --color-txt-btn-raised: #fff;
    --color-mono-contrast-max: hsl(0deg 0% 100%);
    --color-mono-contrast-high: hsl(0deg 0% 85%);
    --color-mono-contrast-medium: hsl(0deg 0% 73%);
    --color-mono-contrast-low: hsl(0deg 0% 50%);
    --color-mono-contrast-min: hsl(0deg 0% 35%);
    --color-inverted-contrast-max: hsl(0deg 0% 0%);
    --color-inverted-contrast-high: hsl(0deg 0% 15%);
    --color-inverted-contrast-medium: hsl(0deg 0% 27%);
    --color-inverted-contrast-low: hsl(0deg 0% 50%);
    --color-inverted-contrast-min: hsl(0deg 0% 50%);
    --color-bg-box-header: hsl(0 0% 12% / 1);
    --color-bg-button-filter: hsl(0deg 0% 12%);
    --color-bg-filter: hsl(0deg 0% 12%);
    --color-bg-button-filter-selected: #50BAC4;
    --color-bg-button-filter-selected: hsl(0 0% 19% / 1);
    --color-bg-table-row-selected: #212121;
    --color-bg-menu-row-selected: #212121;
    --color-bg-paginator: #212121;
    --color-bg-right-modal: hsl(233 0% 10% / 1);
    --color-bg-details-box: hsl(0 0% 9% / 1);
    --color-bg-modal-details-box: hsl(0 0% 11.5% / 1);
    --color-bg-details-activebox: hsl(0 0% 13% / 1);
    --color-bg-table-loading: hsl(228deg 2% 17% / 17%);
    --color-modal-box-shadow: -9px 0px 8px rgb(0 0 0 / 10%);
    --color-leftmodal-box-shadow: none;
    --color-bg-paginate-next: hsl(234deg 18.8% 20.02%);
    --color-bg-table-drilled-level1: hsl(210 0% 11%);
    --color-bg-table-drilled-level2: hsl(0deg 0% 13%);
    --color-bg-table-drilled-level3: hsl(210 0% 16%);
    --color-progress-bar: #0086ee;
    --color-bg-page-overlay: hsl(0deg 0% 3.84% / 80%);
    --scrollbar-track-bg: #212121;
    --scrollbar-thumb-bg: hsl(0deg 0.31% 23.82%);
    --input-bg-color: #252525;
    --color-input-border: hsl(210 0% 16%);
    --color-blue-table-row-background: #212121;
    --kendo-dropdown-bg: hsl(0 0% 20% / 1);
    --color-slide-toggle: hsl(0 30% 40% / 1);
    --color-table-border: transparent;

    --color-green-success: #50af6d;
    --color-green-success-txt: white;
    --color-purple-status: #6c36c8;
    --color-yellow-warning: #db9c0c;
    --color-yellow-info: #db9c0c;
    --color-brown-status: #b88464;
    --color-red-error: #ec5629;

    .text-center {
        #bg {
            background-color: #000 !important;
        }
        h2 {
            color: var(--color-mono-contrast-max)
        }
    }
    #ui.v3 {
        #main-menu.component a img,
        yon-profile-options button:after,
        yon-legal-entity-selector button:after,
        yon-notification:after,
        #main-menu img.logo-txt,
        .dark-inverted,
        .close-cont img {
            filter: invert();
        }
    }
    .login-bg {
        background-image: none;
        left: 0;
        right: 0;
        background-color: var(--color-inverted-contrast-max);
        z-index: 10;
    }
}
:root.dark,
:root.light {
    --mat-expansion-container-background-color: transparent;
    --mat-expansion-container-text-color: rgba(0, 0, 0, 0.87);
    --mat-expansion-actions-divider-color: rgba(0, 0, 0, 0.12);
    --mat-expansion-header-hover-state-layer-color: rgba(0, 0, 0, 0.04);
    --mat-expansion-header-focus-state-layer-color: rgba(0, 0, 0, 0.04);
    --mat-expansion-header-disabled-state-text-color: rgba(0, 0, 0, 0.26);
    --mat-expansion-header-text-color: rgba(0, 0, 0, 0.87);
    --mat-expansion-header-description-color: rgba(0, 0, 0, 0.54);
    --mat-expansion-header-indicator-color: rgba(0, 0, 0, 0.54);
    --yon-grey-border: transparent;
    --btn-border-raised-primary-enabled: none;
    yon-root .text-center {
        text-align: center;
    }
    yon-root .text-center.height60 {
        padding-top: calc(50vh - 150px);
    }
}
:root.light[data-theme-primary-color="purple"],
:root.dark[data-theme-primary-color="purple"] {    
    --color-rgb: 262deg;
    --color-saturation: 58%;
    --color-primary: var(--color-primary-purple);
    --color-bg-btn-raised: var(--color-primary-purple);

    --color-green-success: #6e988a;
    --color-green-success-txt: #344B45;
    --color-purple-status: #6c36c8;
    --color-yellow-warning: #e1b59a;
    --color-yellow-info: #e1b59a;
    --color-brown-status: #b88464;
    --color-red-error: #c96554;
}

:root.dark[data-theme-primary-color="purple"] {    
   
    --color-primary-purple: hsl(262deg 58% 55%);
    --color-font-a: hsl(262deg 100% 75%);
    --color-slide-toggle: hsl(262deg 58% 45%);
    .color-palette span.purple { background-color: var(--color-primary-purple) }
}

#ui.v3 {
    --layout-left-menu-width: 90px;
}
#ui.v3.main-menu-open {
    --layout-left-menu-width: 12vw;
}
#ui.v3.has-modal.right-panel-closed yon-details-layout:not(.right-modal-open),
#ui.v3.right-panel-closed yon-list-view-layout {
    --layout-right-panel-width: 0;
    --layout-right-slimpanel-width: 0;
    .orders__width-10 {
        display: none;
    }
    .panel-main-cont {
        padding-right: 0;
        .panel-main-right {
            display: none;
        }
    }
    .panel-list-view {
        .row .col-xl-10 .row .col-xl-2 {
            display: none;
        }
    }
}

@media (min-height: 950px) {
    #ui.v3 {
        --layout-top-spacer-height: 2vh;
    }
    
}
@media (max-width:1679px) {
    :root {
        --font-top-header-size: 2.4vw;
        --font-size-btn-raised: 12px;
    }
}
#ui.v3 {
     yon-details-layout.right-modal-open .panel-main-cont.wide {
        --layout-left-panel-width: 15vw;
    }
    yon-details-layout.right-modal-open .wide {
        --layout-right-panel-width: 700px;
    }
}
@media (min-width:1920px) {
    #ui.v3 {
        yon-details-layout.right-modal-open .panel-main-cont.wide {
        --layout-left-panel-width: 340px;
        }
    }
}
@media (max-width: 1500px) {
    #ui.v3.main-menu-open {
        --layout-left-menu-width: 180px;
    }
    #ui.v3 {
        yon-details-layout.right-modal-open .panel-main-cont.wide {
        --layout-left-panel-width: 225px;
        }
    }
}
@media (min-width: 1920px) {
    :root {
        --layout-right-slimpanel-width: 300px;
        --font-top-header-size: 50px;
    }
    #ui.v3.main-menu-open {
        --layout-left-menu-width: 230px;
    }
}
@media (min-height: 920px) {
    :root {
        --layout-top-panel-height: 14vh;
    }
}
@media (min-height: 1050px) {
    :root {
        --layout-top-panel-height: 15vh;
    }
}
@media (max-width:1440px) {
    :root {
        --layout-grid-gap: 8px;
    }
}
@media (min-width:2000px) {
    :root {
        --layout-grid-gap: 12px;
    }
}
@media (max-width: 1340px) {

    #ui.v3 yon-orders {
        .orders__width-90 {
          width: 100vw;
          max-width: 100%;
        }
        .orders__width-10 {
          display: none;
        }
      }
  #ui.v3,
  #ui.v3.main-menu-closed,
  #ui.v3 yon-details-layout.right-modal-open,
  #ui.v3.main-menu-open {
    --layout-right-panel-width: 0;
    --layout-right-slimpanel-width: 0;
  } 
    #ui.v3 {
    yon-details-layout.right-modal-open {
      --layout-right-panel-width: 0;
    }
    yon-details-layout.right-modal-open .wide {
      --layout-right-panel-width: 0;
    }
  }
}
@media (min-width: 1440px) {
    :root {
        --layout-left-panel-width: 18vw;
        --layout-right-slimpanel-width: 15vw;
    }
}
@media (min-width: 1480px) {
    :root {
        --layout-right-panel-width: 22vw;
    }
}
@media (min-width: 1650px) {
    :root {
        --layout-left-panel-width: 340px;
        --layout-right-panel-width: 380px;
        --layout-right-slimpanel-width: 15vw;
    }
}


/* RIGHT PANEL WIDTH */

@media (max-width:2040px) {
    #ui.v3 {
        yon-details-layout.right-modal-open .panel-main-cont.wide {
            --layout-right-panel-width: 30vw;
        }
    }
}
@media (max-width: 1640px) {
   #ui.v3 {
     yon-details-layout.right-modal-open .panel-main-cont.wide {
        --layout-right-panel-width: 26vw;
        }
    }
}
@media (max-width:1480px) {
     #ui.v3 {
        yon-details-layout.right-modal-open .panel-main-cont.wide {
            --layout-right-panel-width: 22vw;
        }
    }
    :root {
        --font-top-header-size: 32px;
        --font-size-btn-raised: 13px;
    }  
}
@media (max-width:1340px) {
     #ui.v3 {
        yon-details-layout.right-modal-open .panel-main-cont {
            --layout-right-panel-width: 30vw;
        }
    } 
}