:root{
    --private-layout-wrapper-background-color: null;
    /*--private-layout-wrapper-background-image:linear-gradient(135deg,rgba(29,29,29,.05),rgba(29,29,29,.05) 17%,rgba(27,27,27,.05) 0,rgba(27,27,27,.05) 34%,rgba(31,31,31,.05) 0,rgba(31,31,31,.05) 93%,hsla(0,0%,94.9%,.05) 0,hsla(0,0%,94.9%,.05)),linear-gradient(135deg,hsla(0,0%,50.6%,.05),hsla(0,0%,50.6%,.05) 66%,hsla(0,0%,45.9%,.05) 0,hsla(0,0%,45.9%,.05) 91%,hsla(0,0%,78%,.05) 0,hsla(0,0%,78%,.05)),linear-gradient(135deg,rgba(31,31,31,.07),rgba(31,31,31,.07) 15%,hsla(0,0%,54.5%,.07) 0,hsla(0,0%,54.5%,.07) 23%,hsla(0,0%,78.4%,.07) 0,hsla(0,0%,78.4%,.07) 29%,hsla(0,0%,40%,.07) 0,hsla(0,0%,40%,.07)),linear-gradient(90deg,#6e7e9b,#0b4f6f);*/
    --private-layout-wrapper-background-image:linear-gradient(135deg,rgba(29,29,29,.05),rgba(29,29,29,.05) 17%,rgba(27,27,27,.05) 0,rgba(27,27,27,.05) 34%,rgba(31,31,31,.05) 0,rgba(31,31,31,.05) 93%,hsla(0,0%,94.9%,.05) 0,hsla(0,0%,94.9%,.05)),linear-gradient(135deg,hsla(0,0%,50.6%,.05),hsla(0,0%,50.6%,.05) 66%,hsla(0,0%,45.9%,.05) 0,hsla(0,0%,45.9%,.05) 91%,hsla(0,0%,78%,.05) 0,hsla(0,0%,78%,.05)),linear-gradient(135deg,rgba(31,31,31,.07),rgba(31,31,31,.07) 15%,hsla(0,0%,54.5%,.07) 0,hsla(0,0%,54.5%,.07) 23%,hsla(0,0%,78.4%,.07) 0,hsla(0,0%,78.4%,.07) 29%,hsla(0,0%,40%,.07) 0,hsla(0,0%,40%,.07)),linear-gradient(90deg,#427aa1,#06668C);
    /*--private-layout-content-background-color: #dde1e8;*/
    /*--private-layout-content-background-color: #fafafa;*/
    --private-layout-content-background-color: #ECECEFFF;
    --private-layout-content-color-1: #0A4D6C;
    --private-layout-content-color-2: #1680B3;
    --private-layout-content-color-3: #0099CC;
    --private-layout-content-color-4: #19C8A6;
    --private-layout-content-color-5: #28A745;

    --private-layout-content-color-save: #19C8A6;
    --private-layout-content-color-cancel: #E64D42;
    --private-layout-navbar-text-color: #ffffff;
    --nabvar-height: 64px;
    --sidebar-width-expanded: 292px;
    --sidebar-width-not-expanded: 50px;
    --notification-content-height: 11vh;
}

@font-face {
    font-family: 'Material Icons Round';
    src: local('MaterialIconsRound-Regular'),
        url('../theme/custom/iconfonts/MaterialIconsRound-Regular.woff2') format('woff2'),
        url('../theme/custom/iconfonts/MaterialIconsRound-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Material Icons Outlined';
    src: local('MaterialIconsOutlined-Regular'),
        url('../theme/custom/iconfonts/MaterialIconsOutlined-Regular.woff2') format('woff2'),
        url('../theme/custom/iconfonts/MaterialIconsOutlined-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Material Icons';
    src: local('Material Icons'), local('MaterialIcons-Regular'),
        url('../theme/custom/iconfonts/MaterialIcons-Regular.woff2') format('woff2'),
        url('../theme/custom/iconfonts/MaterialIcons-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Tajawal';
    src: local('Tajawal'), local('Tajawal-Regular'),
        url('../theme/custom/fonts/Tajawal-Regular.woff2') format('woff2'),
        url('../theme/custom/fonts/Tajawal-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Roboto';
    src: local('Roboto'), local('Roboto-Regular'),
        url('../theme/custom/fonts/Roboto-Regular.woff2') format('woff2'),
        url('../theme/custom/fonts/Roboto-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Roboto';
    src: local('Roboto Light'), local('Roboto-Light'),
        url('../theme/custom/fonts/Roboto-Light.woff2') format('woff2'),
        url('../theme/custom/fonts/Roboto-Light.woff') format('woff');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Roboto';
    src: local('Roboto Medium'), local('Roboto-Medium'),
        url('../theme/custom/fonts/Roboto-Medium.woff2') format('woff2'),
        url('../theme/custom/fonts/Roboto-Medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Averta';
    src: local('Averta'), local('Averta-Bold'), local('Averta-Semibold'),
        url('../theme/custom/fonts/Averta.otf') format("truetype");
    url('../theme/custom/fonts/Averta Bold.otf') format("truetype");
    url('../theme/custom/fonts/Averta Semibold.otf') format("truetype");

    font-weight: normal;
    font-style: normal;
    font-display: swap;
}


body {
    margin: 0;
    padding: 0;
    background-color: #fafafa;
    /* overflow: hidden; */
}

div,
span {
    font-size: 14px;
}

.mat-form-field {
    width: 100%;
}

.block {
    width: 100%;
}

.cmb>* {
    margin-bottom: 15px;
}

.cmb5>* {
    margin-bottom: 5px;
}

.cp>* {
    padding: 25px;
}

.pc>* {
    padding: 5px;
}

.cp5>* {
    padding-right: 5px !important;
    padding-left: 5px !important;
}

.cpb5>* {
    padding-bottom: 5px !important;
}

.cps5>* {
    padding-left: 5px !important;
    padding-right: 5px !important;
}

.cp5 {
    padding: -5px !important;
}

a {
    text-decoration: solid;
    color: inherit;
}

.mat-header-cell {
    font-weight: bold !important;
    color: #2b2b2b !important;
}

.mat-tab-label {
    font-weight: bold !important;
}

.cm5 {
    margin: -5px;
}

.cm5>* {
    margin: 5px;
}

.filter-btn {
    position: relative;
    top: 4px;
}

.red {
    color: red;
}

.rederror {
    color: red;
}

.material-icons {
    font-family: 'Material Icons';
    font-weight: normal;
    font-style: normal;
    font-size: 24px;
    /* Preferred icon size */
    display: inline-block;
    line-height: 1;
    text-transform: none;
    letter-spacing: normal;
    word-wrap: normal;
    white-space: nowrap;
    direction: ltr;

    /* Support for all WebKit browsers. */
    -webkit-font-smoothing: antialiased;
    /* Support for Safari and Chrome. */
    text-rendering: optimizeLegibility;

    /* Support for Firefox. */
    -moz-osx-font-smoothing: grayscale;

    /* Support for IE. */
    font-feature-settings: 'liga';
}

.dates-stepper.mat-stepper-vertical .mat-step .mat-vertical-content-container {
    display: none !important;
}


button:focus,
button:active:focus,
button.active:focus {
    outline: none !important;

}

tr {
    height: 40px !important;
    font-size: 14px !important;
}

td {
    font-size: 14px !important;
}

thead > tr {
    height: 32px !important;
}

tbody > tr {
    height: 36px !important;
}

th.mat-header-cell {
    /* background-color: #1680b3; */
    background-color: #1680b3;
    color: #ffffff !important;
}


th.mat-header-cell,
td.mat-cell {
    padding: 6px;
    border: solid 1px rgba(0, 0, 0, 0.12);
    border-top: 0;
}


tbody {
    border-radius: 8px !important;
}

mat-error {
    font-style: italic !important;
    font-weight: 500 !important;
    font-size: 12px !important;
}

.table-paginator {
    border-radius: 0 0 10px 10px !important;
}


.mat-sort-header-arrow {
    color: rgb(160, 160, 160) !important;
}


.btn-blue {
    background-color: #3498db !important;
    color: #ffffff !important;
}

.btn-blue:hover {
    background-color: #196292 !important;
}

.btn-blue:focus {
    background-color: #196292 !important;
}

.main-container {
    padding: 1.85rem !important;
    background-color: #fafafa !important;
}

.text-underline {
    text-decoration: underline !important;
}

.cursor-pointer {
    cursor: pointer !important;
}


.section {
    min-height: calc(100vh - 50px) !important;
}

.mat-menu-panel.mat-menu {
    background: #F2F2F2 !important;
    min-height: auto !important;
    /*box-shadow: 9px 7px 28px 2px rgba(255, 255, 255, 0.6),*/
    /*0 10px 10px rgba(144, 127, 127, 0.37) !important;*/
}

.mat-menu-item:hover:not([disabled]), .mat-menu-item.cdk-program-focused:not([disabled]), .mat-menu-item.cdk-keyboard-focused:not([disabled]), .mat-menu-item-highlighted:not([disabled]) {
    background-color: rgba(22, 128, 179, 0.3) !important;
    transition: width .35s ease !important;
    overflow: hidden !important;
    color: rgba(0, 0, 0, 0.87) !important;
}

.mat-menu-panel.mat-menu .mat-menu-content {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}
.mat-menu-panel.user-menu .mat-menu-content {
    padding-bottom: 0 !important;
}



.mat-list-item-content {
    padding-left: 6px !important;
    padding-right: 10px !important;
}

.mat-list-text {
    padding-left: 0 !important;
    padding-right: 0 !important;
}


.mat-calendar-header {
    height: 43px !important;
}

.mat-calendar-controls {
    margin-top: auto !important;
}

/*.mat-calendar-table-header-divider{*/
/*  display: none !important;*/
/*}*/

/*.mat-calendar-table-header:nth-child(2) {*/
/*  display: none !important;*/
/*}*/

.mat-calendar-table-header>th {
    background-color: red !important;
}

::ng-deep .mat-select-panel {
    max-width: none;
}



.mat-select-panel {
    max-width: none;

}

/*.mat-step-header.cdk-keyboard-focused,*/
/*.mat-step-header.cdk-program-focused,*/
/*.mat-step-header:hover:not([aria-disabled]),*/
/*.mat-step-header:hover[aria-disabled=false] {*/
/*     background-color: unset !important;*/
/*     cursor :default !important;*/
/*}*/

/*mat-step-header{*/
/*    padding-left: 0 !important;*/
/*    padding-right: 0 !important;*/
/*}*/

/*mat-step-header .mat-step-icon {*/
/*    !*background-color: #0a4d6c !important;*!*/
/*    !*width: 0rem !important;*!*/
/*    !*height: 0rem !important;*!*/
/*    display: none !important;*/
/*    !*color: #ffffff !important;*!*/
/*}*/

.secondary-btn {
    background-color: white !important;
    color: #c0392b !important;
    font-weight: 700 !important;
    border: 2px solid #c0392b !important;
    line-height: 1.5rem !important;
}

.secondary-btn:hover,
.secondary-btn:focus {
    background-color: #c0392b !important;
    color: white !important;
    font-weight: 600 !important;
    border: 2px solid #c0392b !important;
    line-height: 1.5rem !important;
}

.st-butt-plusinfo {
    text-align: center;
    background-color: white !important;
    font-size: 0.8rem;
    font-weight: 600;
    color: #3e90d0 !important;
    border: solid 1px #3e90d0;
    width: 11rem !important;
    line-height: 1.5rem !important;
    /*text-shadow: .5px .5px .5px #a19f9f;*/
}

.st-butt-plusinfo:hover {
    text-align: center;
    background-color: #3e90d0 !important;
    font-size: 0.79rem;
    font-weight: 600;
    color: white !important;
    border-color: #3e90d0 !important;
    line-height: 1.5rem !important;
    text-shadow: none;
}

.badge-success {
    background-color: #0c6b0d;
    color: white;
    border-radius: 24px;
    padding: 1px 7px 2px 7px;
}

.badge-grey {
    background: linear-gradient(to right bottom, #e2e2e2, #ffffff);
    color: black;
    border-radius: 24px;
    padding: 2px 7px 3px 7px;
    white-space: pre !important;
    border: 2px solid black;
    box-shadow: 0 6px 22px -8px rgba(0, 0, 0, 0.2)
}

.mat-select-panel {
    transform: translate(-2px, 30px) !important;
}

.third-btn {
    background-color: white !important;
    font-weight: 700 !important;
    color: #3e90d0 !important;
    border: 2px solid #3e90d0 !important;
    line-height: 1.2rem !important;
}

.third-btn:hover,
.third-btn:focus {
    background-color: #3e90d0 !important;
    color: white !important;
    font-weight: 600 !important;
    border: 2px solid #3e90d0 !important;
    line-height: 1.2rem !important;
}


.export-report-btn {
    background-color: white !important;
    font-weight: 700 !important;
    color: #3e90d0 !important;
    border: 2px solid #3e90d0 !important;
    /*line-height: 1.2rem !important;*/
}

.export-report-btn:hover,
.third-btn:focus {
    background-color: #3e90d0 !important;
    color: white !important;
    font-weight: 600 !important;
    border: 2px solid #3e90d0 !important;
    /*line-height: 1.2rem !important;*/
}


.actions-btn {
    width: 24px !important;
    height: 24px !important;
    cursor: pointer !important;
}

.display-flex {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-content: center !important;
    justify-content: center !important;
    align-items: center !important;
}

.mat-checkbox-checked.mat-accent .mat-checkbox-background {
    background-color: #0a4d6c !important;
}

.mat-checkbox-checked.mat-accent.mat-checkbox-disabled .mat-checkbox-background {
    background-color: grey !important;
}

.generate-btn{
    background-color:#20c09a !important;
    color: white !important;
}

.cancel-btn {
    background-color: #37b8cd !important;
    color: white !important;
}
.annul-btn {
    background-color: #e64d42 !important;
    color: white !important;
}

.mat-form-field-required-marker {
    color: red !important;
}

.mat-optgroup-label {
    font-size: 1.2rem !important;
    font-weight: 900 !important;
    /*text-decoration: underline !important;*/
}


.mat-dialog-container,
.cdk-dialog-container {
    padding: 0 !important;
    border-radius: 10px 10px 0 0 !important;
}

.custom-dialog-container mat-dialog-container {
    display: block !important;
    padding: 24px !important;
    border-radius: 15px !important;
    box-sizing: border-box !important;
    overflow: auto !important;
    outline: 0 !important;
    width: 100% !important;
    height: 100% !important;
    min-height: inherit !important;
    max-height: inherit !important;
    border: solid #0A4D6C !important;
}

.ligne_title {
    width: 75px;
    height: 2px;
    background-color: #0a4d6c;
}

.subheader-underline {
    /*text-decoration: underline;*/
    border-bottom: solid 2px black;
    padding: 0 !important;
    margin-bottom: 1%;
}

.mat-form-field-wrapper {
    padding-bottom: 1.094rem !important;
}

.mat-form-field-label.mat-form-field-empty {
    /*color: rgba(0, 0, 0, .65) !important;*/
    color: #5c5c5c !important;
    text-shadow: 0 0 rgb(0 0 0 / 65%);
}

.mat-form-field-infix > .mat-form-field-label-wrapper > .mat-form-field-label {
    /*color: rgba(0, 0, 0, .65) !important;*/
    color: #5c5c5c !important;
    text-shadow: 0 0 rgb(0 0 0 / 65%);
}

.mat-form-field.mat-focused .mat-form-field-label {
    color: #0a4d6c !important;
}

.mat-form-field.mat-form-field-invalid .mat-form-field-label {
    color: #f44336 !important;
}

.mat-form-field-appearance-outline .mat-form-field-outline {
    color: rgba(0, 0, 0, 0.3) !important;
    
}

.mat-form-field-appearance-outline .mat-form-field-outline-thick {
    color: rgba(0, 0, 0, 0.3) !important;
}

.mat-form-field-appearance-outline.mat-form-field-invalid.mat-form-field-invalid .mat-form-field-outline-thick {
    color: red !important;
}

.mat-form-field-appearance-outline.mat-focused .mat-form-field-outline-thick {
    color: #0a4d6c !important;
}

.text-averta {
    font-family: Averta !important;
}

.text-16 {
    font-size: 16px !important;
}

.text-14 {
    font-size: 14px !important;
}

/*.mat-form-field-infix {*/
/*    border-top-width: 0 !important;*/
/*}*/

.mat-paginator-page-size {
    border: solid #bbb8b8 0.5px !important;
    border-radius: 8% !important;
}

.mat-paginator-page-size-select {
    margin-top: 0 !important;
}

.mat-paginator-page-size-select > .mat-form-field-wrapper {
    padding-bottom: 0 !important;
}

.mat-paginator-page-size-select > .mat-form-field-wrapper > .mat-form-field-flex > .mat-form-field-infix {
    border-top-width: 0 !important;
}

.mat-form-field-appearance-legacy .mat-form-field-underline {
    height: 0 !important;
}


/*.st2i-datatable > .mat-form-field > .mat-form-field-wrapper {*/
/*    padding-bottom: 0 !important;*/
/*}*/

st2i-datatable .mat-form-field:not(.mat-form-field-invalid) .mat-form-field-wrapper {
    padding-bottom: 0 !important;
}

/* scrollbar */
::-webkit-scrollbar {
    width: .4rem;
    height: .4rem;
}

::-webkit-scrollbar:hover {
    width: 0.6rem;
    height: 0.6rem;
}


::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
    border-radius: 10px;
}

::-webkit-scrollbar-thumb {
    background-color: rgb(240 241 241 / 60%);
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5);
}

::-webkit-scrollbar-thumb:hover {
    background-color: rgb(240 241 241 / 100%);
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5);
}

mat-tooltip-component>.mat-tooltip {
    color: #0a4d6c !important;
    background-color: white !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    border-radius: 30px !important;
    border: 2px solid #0a4d6c !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    text-align: center !important;
    max-width: unset !important;
    white-space: pre-wrap !important;
    margin: 0 !important;
    margin-bottom: 3px !important;
}

.select-flot-menu {
    max-height: 250px !important;
    overflow-y: auto;
    /*background-color: #ff7d9d !important;*/
}
.mat-menu-panel.notification-panel{
    min-width: 27vw;
    border-radius: 12px;
}

.mat-menu-panel.notification-panel {
    background: #fafafa !important;
}
.select-flot-menu > .mat-menu-content,.notification-panel > .mat-menu-content {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

.mat-menu-panel.select-flot-menu{
    max-width: unset !important;
}

.mat-menu-panel.notification-panel{
    min-width: 27vw;
    border-radius: 12px;
}

.mat-menu-panel.notification-panel {
    background: #fafafa !important;
}
.select-flot-menu > .mat-menu-content,.notification-panel > .mat-menu-content {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}
.icon-image {
    width: 1.4rem;
    height: 1.4rem;
}

.mat-form-field-disabled .mat-form-field-outline {
    background-color: #89888829;
}

.mat-input-element:disabled, .mat-form-field-type-mat-native-select.mat-form-field-disabled .mat-form-field-infix::after {
    color: rgba(0, 0, 0, .8) !important;
}

.hint {
    font-style: italic;
    padding-top: 0px;
}