.bg-table-head{background-color: var(--table-head);}
.color-light{color: var(--light);}
body::-webkit-scrollbar{display:none;}
.scroll_to_top {
    position: fixed;
    right: 30px;
    bottom: 30px;
    display: block;
    width: 30px;
    height: 30px;
    border: 1px solid #e3e3e3;
    border-radius: 3px;
    opacity: 0;
    visibility: hidden;
    background: #F8F8F8 url(../../img/admin/to_top.svg) no-repeat center;
    background-size: 70%;
    transition: all 0.15s ease-in-out;
    z-index: 10;
}

.scroll_to_top.active {
    opacity: 0.6;
    visibility: visible;
}

.scroll_to_top.active:hover {
    opacity: 1;
}

.table-ui {
    white-space: nowrap;
}
.table-ui td:first-child {
    padding-left: 0;
}
.table-ui td {
    padding: 5px 10px;
}
.table-ui td:last-child {
    padding-right: 0;
}
:root{
    --ico-size: 16px;
}
.ico.--size-12 {
    --ico-size: 12px;
}
.ico.--size-18 {
    --ico-size: 18px;
}
.ico.--size-20 {
    --ico-size: 20px;
}
.ico.--size-22 {
    --ico-size: 22px;
}
.ico.--size-24 {
    --ico-size: 24px;
}
.ico.--size-28 {
    --ico-size: 28px;
}
.ico {
    display: flex;
    align-items: center;
    min-width: var(--ico-size);
    max-width: var(--ico-size);
    height: var(--ico-size);
}
.double-btn{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

.form-group{
    display: flex;
}
.form-group:not(.form-group--row){
    flex-direction: column;
}
.form-group--row .input,
.form-group--row .textarea,
.form-group--row .wrapper-input,
.form-group--row .select-wrapper{
    width: max-content;
    flex: auto;
}
.form-group.form-group--row{
    gap: 16px;
}
.form-group.form-group--row .form-label{
    margin-bottom: 0;
}
.form-label{
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: space-between;
}

.label--text{
    color: var(--defaultTextColor);
    display: flex;
    font-style: normal;
    font-weight: 500;
    line-height: 14px;
    font-size: 14px;
    gap: 8px;
    align-items: center;
}
.label--text-2{
    color: var(--light);
    display: flex;
    font-style: normal;
    font-weight: 500;
    line-height: 18px;
    font-size: 15px;
    gap: 8px;
    align-items: center;
}
.form-group .form-label{
    margin-bottom: 8px;
}
.wrapper-input{
    display: flex;
    overflow: hidden;
}
.wrapper-input{
    padding: 0 !important;
}
.wrapper-input.size--lg .input{
    padding-left: 14px;
    padding-right: 14px;
    font-size:  var(--defaultFontSize);
}
.wrapper-input.size--md .input{
    padding-left: 11px;
    padding-right: 11px;
    font-size: 15px;
}
.wrapper-input.size--sm .input{
    padding-left: 11px;
    padding-right: 11px;
    font-size: 15px;
}
.wrapper-input.--input-2,
.input.--input-2,
.textarea.--input-2{
    box-shadow: none;
    border: 1px solid var(--light-2);
}
.wrapper-input.--input-3,
.input.--input-3,
.textarea.--input-3{
    box-shadow: var(--inset-shadow);
    border: none;
    background-color: var(--bg-input);
}
*.--input-3::placeholder{
    color: var(--light);
}

.wrapper-input .input,
.wrapper-input .textarea{
    box-shadow: none;
    background-color: transparent;
    border-radius: 0;
}
.input-text{
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    opacity: 0.4;
}
.input,
.textarea,
.wrapper-input{
    font-size:  var(--defaultFontSize);
    width: 100%;
    background-color: var(--white);
    border-radius: var(--defaultRaduis);
    font-family: var(--defaultTextColor);
    box-shadow: var(--shadow-1);
    padding: 5px;
}
.input::placeholder,
.textarea::placeholder{
    font-family: var(--defaultTextColor);
    color: var(--placeholder);
}
input,
button,
textarea {
    font-family: var(--fotnFamily);
    appearance: none !important;
}


.form{
    display: flex;
    flex-direction: column;
}
.form-footer{
    display: flex;
    flex-direction: column;
}
.form-login .form-body + .form-footer,
.form-login .form-header + .form-footer{
    margin-top: 16px;
}
.form-login .form-header + .form-body{
    margin-top: 30px;
}
.form.form-row{
    flex-direction: row;
    align-items: center;
}

.switch-btn{
    flex:1;
    color: var(--light);
    font-family: var(--fotnFamily);
    z-index: 1;
}
.switch-wrapper{
    position: relative;
    width: 100%;
    cursor: pointer;
}
.switch-items{
    display: flex;
    width: 100%;
    user-select: none;
}

.switch-wrapper input:not(:checked) ~ .switch-items .switch-btn:first-child{
    color: var(--primary);
}
.switch-wrapper:hover .active-check{
    border-color: var(--primary);
}
.switch-wrapper input:checked ~ .switch-items .switch-btn:last-child{
    color: var(--primary);
}
.switch-wrapper input:checked ~ .active-check{
    transform: translate(100%, -50%);
    left: -4px;
}
.switch-wrapper .active-check{
    border: 1px solid transparent;
    content: "";
    display: block;
    width: 50%;
    height: calc(100% - 7px);
    transform: translate(0%, -50%);
    left: 4px;
    top: 50%;
    position: absolute;
    border-radius: 8px;
    background-color: var(--white);
    pointer-events: none;
    box-shadow: var(--shadow-1);
    transition: all .3s ease;
}
.select{
    text-align:left;
    font-family: var(--fotnFamily);
    font-weight: 400;
}
.select-wrapper{
    display:flex;
    width: 100%;
    position: relative;
    justify-content: flex-end;
    overflow: hidden;
    font-family: var(--fotnFamily);
}
.select-wrapper .select{
    flex: auto;
    width: 100%;
    overflow: hidden !important;
}

.select-wrapper .select--arrow{
    position: absolute;
    height: 100%;
    padding-left: 12px;
    padding-right: 12px;
    pointer-events: none;
}

.check-form{
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    max-width: max-content;
}
input:checked ~ .check{
    background-color: var(--primary);
    border-color: var(--primary);
}
input:checked ~ .check::after{
    opacity: 1;
}
.check{
    min-width: 22px;
    height: 22px;
    max-width: 22px;
    display: block;
    overflow: hidden;
    border-radius: 6px;
    background-color: var(--white);
    border: 1px solid var(--light-2);
    position: relative;
    cursor: pointer;
}
.check::after{
    content: "";
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: url("../../img/admin/ico-check.svg") no-repeat center center / 16px;
    opacity: 0;
}
.check-text{
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
}

.options{
    display: flex;
    align-items: center;
    gap: 20px;
    justify-content: space-between;
    width: 100%;
}
.option{
    display: flex;
    align-items: center;
    gap: 15px;
}
.switch-list{
    display: flex;
    gap: 8px;
    white-space: nowrap;
}
.switch-ui{
    display: flex;
    cursor: pointer;
}
.btn-switch.switch-lg{
    min-width: 161px;
}
input:checked ~ .btn-switch, .switch-list--item .active-tab.btn-switch{
    border-color: var(--primary) !important;
    color: var(--defaultTextColor) !important;
}
input:checked ~ .btn-switch .pill-count{
    background-color: var(--primary);
}
input:checked ~ .btn-switch.btn-switch-2{
    color: var(--primary) !important;
    background-color: var(--primary-light-3) !important;
    border-color: var(--primary-light-3) !important;
}
.btn-remove{
    color: var(--light);
}
.btn-remove:hover{
    color: var(--danger) !important;
}
.btn-switch{
    border: 1px solid transparent;
    border-radius: 300px;
    font-size: 13px;
    font-style: normal;
    cursor: pointer;
    color: var(--light);
}
.tabs:not(.--editable-tabs) .btn-remove{
    display: none;
}
.tabs-link.active-tab .btn-switch{
    border-color: var(--primary) !important;
    color: var(--defaultTextColor) !important;
}
.tabs-link.active-tab .btn-switch.btn-switch-2{
    color: var(--primary) !important;
    background-color: var(--primary-light-3) !important;
    border-color: var(--primary-light-3) !important;
}
.tabs-link.active-tab .btn-switch.btn-switch-2 .pill-count{
    background-color: var(--primary);
}
.active-tab .btn-remove{
    color: var(--defaultTextColor);
}
.btn-switch:hover{
    border-color: var(--light-4);
    color: var(--primary);
}


.form-search--btn:not(.--show) .input{
    width: 0 !important;
    padding: 0 !important;
}
.form-search--btn *{
    transition: none !important;
}
.form-search--btn .btn{
    transition: none;
    margin-left: auto;
}
.searchable-section{
    position: relative;
}
.searchable-section .form-search--btn{
    position: absolute;
    top: 0;
    right: 0;
}
.searchable-section .form-search--btn.--show{
    width: 100%;
}
.form-search--btn .--show-true{
    display: none;
}
.form-search--btn.--show .--show-true{
    display: flex;
}
.form-search--btn.--show .--show-false{
    display: none;
}


.scrollstyler::-webkit-scrollbar {
    width: 7px;
    height: 7px;
}
.scrollstyler::-webkit-scrollbar-track {
    background-color: var(--light-4);
    border-radius: 100px;
}

.scrollstyler::-webkit-scrollbar-thumb {
    border-radius: 100px;
    border: 3px solid transparent;
    background-clip: content-box;
    background-color: var(--primary);
}

.scrollnone::-webkit-scrollbar{display:none;}
.searchable-section.--show-search{
    /*overflow: hidden;*/
    gap:0;
}
.searchable-section.--show-search .option:not(.option-sticky),
.searchable-section.--show-search .option:not(.option-sticky) *{
    width: 0;
    overflow: hidden;
    visibility: hidden;
    white-space: nowrap;
}
.searchable-section.--show-search .option-sticky{
    min-width: 100%;
}
.option-sticky{
    position: sticky;
    right: 0;
    top: 0;
    height: 100%;
    width: 100%;
}

.pill-count{
    min-width: 35px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 33px;
    background-color: var(--light);
    color: var(--white);

    font-size: 13px;
    font-style: normal;
    font-weight: 600;
    padding-left: 4px;
    padding-right: 4px;
}



.heading{
    font-family: var(--fotnFamily);
    font-style: normal;
    font-weight: 600;
}
h1.heading{
    font-size: var(--h1Size);
    line-height: 32px;
}
h2.heading{
    font-size: var(--h2Size);
    line-height: 32px;
}
h3.heading{
    font-size: var(--h3Size);
    line-height: 32px;
}
h4.heading{
    font-size: var(--h4Size);
    line-height: 24px;
}
h5.heading{
    font-size: var(--h5Size);
    line-height: 20px;
}

.form-file{
    width: 100%;
    cursor: pointer;
    display: block;
}
.form-file--container{
    display: flex;
    flex-direction: column;
    gap: 14px;
    border-radius: var(--defaultRaduis);
    background-color: var(--white);
    border: 1px dashed var(--primary);
    padding: 10px;
    text-align: center;
    justify-content: center;
    align-items: center;
    min-height: 150px;
}
.tabs{gap:16px;}
.tabs, .tabs .tabs-header{
    display: flex;
    flex-direction: column;
}
.tabs-item:not(.active-tab){
    display: none !important;
}
.tabs:not(.--editable-tabs) [data-adit-tab="false"]{
    display: none;
}
.--editable-tabs [data-adit-tab="true"]{
    display: none;
}

.tabs:not(.--add-tabs) [data-add-tab="false"]{
    display: none;
}
.--add-tabs [data-add-tab="true"]{
    display: none;
}



.sidebar {
    position: fixed;
    height: 100%;
    top: 0;
    left: 0;
    width: var(--sidebar-width);
    background: var(--defaultTextColor-2);
    transition: .2s;
    z-index: 50;
}
body .sidebar::after{
    background-color: var(--table-col);
}
.sidebar::after{
    content: "";
    min-width: var(--border-sidebar);
    height: 100%;
    display: block;
    position: absolute;
    background-color: var(--white);
    top: 0;
    right: 0;
    border-top-left-radius: 28px;
    border-bottom-left-radius: 28px;
    pointer-events: none;
    transition: .2s;

}
.sidebar .sidebar__container{
    padding-right: var(--border-sidebar);
}
.sidebar__container {
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    position: relative;
}
.sidebar__header,
.sidebar__body{
    padding: 15px;
}
.sidebar__header + .sidebar__body{
    padding-top: 10px;
}
.sidebar .sidebar__header{
    background-color: var(--defaultTextColor-2);
}
.sidebar__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    height: var(--header-fixed-padding);
    min-height: var(--header-fixed-padding);
    position: sticky;
    top: 0;
}
.btn-toggle-side{
    color: #505050;
}
.btn-toggle-side:hover{
    color: var(--white);
}
.sidebar__container,
.sidebar__body,
.sidebar-menu--item{
    display: flex;
    flex-direction: column;
}
.sidebar__body{flex:auto;}
.sidebar__body .sidebar-menu{
    margin-left: -5px;
    margin-right: -5px;
}
.sidebar-menu{
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: auto;
}
.sidebar-link:hover{
    background-color: var(--table-col);
    color: var(--defaultTextColor);
}

.sidebar-link.--active{
    background-color: var(--primary-light-2);
    color: var(--primary);
}
.sidebar-link.--active{
/*    pointer-events: none;*/
}
.sidebar-link{
    color: rgba(256, 256, 256, 0.6);
    background-color: transparent;
    font-size: 15px;
    font-style: normal;
    justify-content: flex-start;
    text-align: left;
    gap: 12px;
    font-weight: 500;
    white-space: nowrap;
    flex-wrap: nowrap;
}
.sidebar-link .sidebar-link--text{
    flex: auto;
}
.sidebar-logo {
    overflow: hidden;
}
.sidebar-logo img {
    max-width: none;
}

.sidebar-is-close {
    --border-sidebar: 25px;
    --sidebar-width: calc(70px + var(--border-sidebar));
}
.sidebar-is-close .sidebar::after{
    border-radius: 0;
}
.sidebar-is-close .sidebar__header .btn-toggle-side{
    display: none;
}
.sidebar-is-close .sidebar .sidebar__container > .btn-toggle-side{
    display: flex;
}

.sidebar .sidebar__container > .btn-toggle-side{
    display: none;
}
.sidebar-is-close .sidebar-link--text {
    opacity: 0;
}

.sidebar-gutters {
    /*margin-left: calc(var(--sidebar-width) - var(--border-sidebar));*/
    width: calc(100% - (var(--sidebar-width) - var(--border-sidebar)));
    margin-left: auto;
    right: 0;
    padding-left: calc(var(--border-sidebar) + 1px);
    padding-right: calc(var(--border-sidebar) + 1px);
    transition: .2s;
}
.btn .notification-point{
    position: absolute;
    top: 0;
    right: 0;
}
.notification-point{
    line-height: 0;
    min-width: 18px;
    max-width: 18px;
    height: 18px;
    border-radius: 300px;
    background-color: var(--danger);
    border: 2px solid var(--white);
    color: var(--white);

    font-size: 12px;
    font-style: normal;
    font-weight: 600;
    font-family: var(--fotnFamily);

    display: flex;
    align-items: center;
    justify-content: center;
}
.primary-user-ico{
    background-color: var(--primary);
    color: var(--white);
}
.user-dropdown-btn{
    display: flex;
    align-items: center;
    gap: 12px;
    white-space: nowrap;
    position: relative;
    z-index: 2;
}
.user-drp-info{
    display: flex;
    flex-direction: column;
    text-align: left;

    max-width: 200px;
    overflow: hidden;
}
.user-drp-info > *{
    overflow: hidden;
    text-overflow: ellipsis;
}
.user-name{
    font-size: 15px;
    font-style: normal;
    font-weight: 600;
}
.user-name-2{
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
}
.user-status{
    color: var(--primary);
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
}

.btn-round-light{
    background-color: var(--table-head);
    color: var(--light);
    border-radius: 300px;
}
.dropdown-open .drp-arrow-rotate{
    transform: rotate(180deg);
}
.user-login-dropdown > .user-dropdown-btn{
    height: var(--header-fixed-padding);
}
.user-login-dropdown > .dropdown__body::after{
    content: "";
    height: 1px;
    width: 100%;
    position: absolute;
    display: block;
    background-color: var(--table-border);
    top: calc(var(--header-fixed-padding) - var(--dropdown-margin));

}
.user-login-dropdown > .dropdown__body .switch-users{
    margin-top: calc(-1 * var(--dropdown-margin));
}
.user-login-dropdown > .dropdown__body{
    background-color: var(--white);
    box-shadow: 0px 8px 16px 0px rgba(91, 104, 113, 0.24), 0px 0px 1px 0px rgba(26, 32, 36, 0.32);
    border-radius: 16px;
    padding-top: var(--header-fixed-padding);
    border-top: 1px solid var(--table-border);
    overflow: hidden;
    margin-top: var(--dropdown-margin) !important;
}
.user-login-dropdown.dropdown-open > .dropdown__body{
    top: 0 !important;
}
.dropdown{position:relative;}
.dropdown .dropdown__body{
    position: absolute;
    top: 100% !important;
    left: 0 !important;
    margin-top: 0;
    width: 100% !important;
    z-index: 1 !important;
}
.switch-users, .switch-users--body{
    display: flex;
    flex-direction: column;
}
.switch-users--body,
.switch-users--header{
    padding: 10px;
}

.drp-delete-user{
    cursor: pointer;
}
.switch-users--footer{
    background-color: var(--table-col);
    border-top: 1px solid var(--table-border);
    margin-top: 5px;
}
.switch-users--header{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 5px;
}
.switch-label{
    color: var(--light);
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
}
.switch-user-list{
    display: flex;
    flex-direction: column;
}
.switch-user-list li:not(:last-child){
    padding-bottom: 15px;
    margin-bottom: 15px;
    border-bottom: 1px solid var(--table-border);
}




.double-fullpage {
    display: flex;
    min-height: 100%;
    position: relative;
    width: 100%;
}
.double-fullpage .container {
    max-width: 100%;
    padding: 0;
    justify-content: center;
    display: flex;
}
.double-fullpage .container--row {
    justify-content: center;
}
.double-fullpage .row--item {
    height: 100%;
    padding: 22px;
    position: relative;
    display: flex;
    flex-direction: column;
}
.bg-item {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}

.heading-block{
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.heading-desk{
    font-size: var(--defaultFontSize);
    line-height: 20px;
    color: var(--light);
}

.wrapp-pin{
    display: flex;
    margin-left: -6px;
    margin-right: -6px;
}
.wrapp-pin > .pin-item{
    flex: 1;
    display: flex;
    flex-direction: column;
    padding-left: 6px;
    padding-right: 6px;
}

/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
}

.card{
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.card.card--md .card-header{
    padding: 12px 22px;
}

.card.card--md:not(.card-table) .card-body{
    padding: 22px;
}
.card.card--md .card-footer{
    padding: 22px;
}
.custom-card{
    background-color: var(--white);
    border-radius: 16px;
    box-shadow: var(--shadow-1);
}

.card .card-header{
    padding: 12px 14px;
    min-height: 64px;
    display: flex;
    justify-content: space-between;
}
.card .card-header + .card-body,
.card .card-header + .card-footer,
.card .card-body + .card-footer
{
    padding-top: 0 !important;
}
.card .pagination{
    padding: 8px;
    padding-top: 14px;
}
.card .card-body{
    padding: 8px;
}

.card-body{
    display: flex;
    flex-direction: column;
    flex: auto;
    position: relative;
}
.table{
    width: 100%;
    font-style: normal;
    font-family: var(--fotnFamily);
    color: var(--defaultTextColor);
    white-space: nowrap;
}
.table thead td:not(.text-center, .text-right, .text-left),
.table thead th:not(.text-center, .text-right, .text-left){
    text-align: left;
}

.table thead td,
.table thead th{
    text-transform: uppercase;
    font-size: 11px;
    font-style: normal;
    font-weight: 600;
    line-height: 16px;
    background-color: var(--table-head);
    color: var(--light);
    padding: 6px 12px;
}
.table thead td:first-child,
.table thead th:first-child{
    border-top-left-radius: 8px;
    border-bottom-left-radius: 8px;
}
.table thead td:last-child,
.table thead th:last-child{
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
}

.table tbody td{
    font-size: 14px;
    font-style: normal;
    line-height: 20px;
    padding: 14px 12px;
    border-bottom: 1px solid var(--table-border);
}
.status-pill::before{
    content: "\2022";
    font-size: 14px;
}
.status-pill{
    gap: 6px;
    height: 22px;
    max-width: max-content;
    padding: 0px 7px;

    display: flex;
    align-items: center;
    white-space: nowrap;
    flex-wrap: nowrap;

    overflow: hidden;
    border-radius: 6px;

    text-transform: uppercase;
    font-size: 12px;
    font-style: normal;
    font-weight: 600;

    border: 1px solid var(--defaultTextColor);
    color: var(--defaultTextColor);
}
.status-pill.--active{
    color: var(--primary);
    border-color: var(--primary);
}

.status-pill.--inactive{
    color: darkgrey;
    border-color: darkgrey;
}


.dropdown-md{
    min-width: min-content;
}

.dropdown__body {
    display: none;
    position: fixed;
    background-color: white;
    box-shadow: var(--shadow-1);
    border-radius: var(--defaultRaduis);
    overflow: auto;
    margin-top: 8px;
    z-index: 5;
}
.dropdown__body.is-open {
    display: block;
    white-space: nowrap;
}
.dropdown-list, .dropdown-list li{
    display: flex;
    flex-direction: column;
}
.dropdown-list li:not(:last-child){
    border-bottom: 1px solid var(--table-border);
    margin-bottom: 5px;
    padding-bottom: 5px;
}
.btn-link-drp{
    margin: 5px;
}
.btn-link-drp:hover{
    background-color: var(--table-head);
    color: var(--light);
}
.dropdown-open .dropdown-btn{
    filter: brightness(0) saturate(100%) invert(49%) sepia(99%) saturate(1795%) hue-rotate(146deg) brightness(94%) contrast(99%);
}

.sticky-end{
    position: sticky;
    right: 0;
    background-color: var(--white);
}
.table-2-bg > tbody tr:nth-child(even) td{
    background-color: var(--table-col);
}

.pagination, .pagination-list{
    display: flex;
}
.pag-active{
    border-color: var(--primary) !important;
    color: var(--primary) !important;
    pointer-events: none;
}
.pagination-list{
    margin-left: -4px;
    margin-right: -4px;
    flex-wrap: wrap;
    margin-bottom: -8px;
}
.pagination-list .btn{
    border-radius: 300px;
}
.pagination-list > li{
    padding-left: 4px;
    padding-right: 4px;
    margin-bottom: 8px;
}

.space-y{
    padding-top:24px;
    padding-bottom:24px;
}

.heading-row{
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 15px;
    width: 100%;
}
.heading-row--item{
    display: flex;
    gap: 15px;
    align-items: center;
    flex-wrap: wrap;
}

.full-content{
    display: flex;
    flex-direction: column;
}
.content-container{
    display: flex;
    flex-direction: column;
    height: 100%;
    flex: auto;
    gap: 24px;
}

.gutters-16{
    --bs-gutter-x: 16px;
    --bs-gutter-y: 16px;
}
.page-section{
    flex-wrap: nowrap;
    flex: auto;
    overflow: hidden;
    padding: 2px;
}
.card.tabs{gap:0;}
.card-body .tabs-body,
.card-body .tabs-item{
    flex: auto;
    display: flex;
    flex-direction: column;
}

.tabs-body, .tabs-item{
    flex: auto;
    display: flex;
    flex-direction: column;
}
.group-flex-1 > *{
    flex: 0 0 50% !important;
}
.foto-load-form{
    display: flex;
    align-items: center;
    gap: 10px;
}
.foto-load{
    border-radius: 360px;
    min-width: 70px;
    max-width: 70px;
    height: 70px;
    border: 1px solid rgba(0, 0, 0, 0.12);
    overflow: hidden;
    background-color: var(--light-2);
}
.btn{cursor:pointer;}

.card-footer{
    display: flex;
    justify-content: space-between;
    gap: 15px;
    flex-wrap: wrap;
    margin-top: auto;

}



.input-pick {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 24px;
    min-width: 24px;
    height: 27px;
    cursor: pointer;
    background-color: transparent;
    border: none;
    box-sizing: border-box;
}
.input-pick::-webkit-color-swatch{
    border-radius: 50%;
    border: 2px solid var(--white);
    box-shadow: 0px 1px 2px 0px rgba(91, 104, 113, 0.32), 0px 0px 1px 0px rgba(26, 32, 36, 0.32);
}
.input-pick::-moz-color-swatch{
    border-radius: 50%;
    border: 2px solid var(--white);
    box-shadow: 0px 1px 2px 0px rgba(91, 104, 113, 0.32), 0px 0px 1px 0px rgba(26, 32, 36, 0.32);
}
.picker-form{
    cursor:pointer;
    align-items: center;
    padding-left: 10px !important;
    padding-right: 10px !important;
}
.picker-form .input-pick--text{
    pointer-events: none;
    flex: auto;
    padding-left: 5px;
    padding-right: 5px;
    background-color: transparent;

    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 16px;
    color: var(--defaultTextColor);
}

.options.flex-wrap .switch-list{
    white-space: normal;
    flex-wrap: wrap;
}

.wrapp-img{
    overflow:hidden;
    align-items: unset !important;
}
.wrapp-img img{
    width: 100%;
}

.card-chart .card-header{
    padding-top: 18px !important;
    padding-bottom: 18px !important;
}


.legend-list{
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}
.legend-list li{
    display: flex;
    flex-direction: column;
    cursor: pointer;
}
.legend-btn{
    display: flex;
    align-items: center;
    gap: 10px;
}
.legend-status{
    display: block;
    width: 14px;
    height: 4px;
    border-radius: 300px;
}
.legend-text{
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    color: var(--defaultTextColor);
}
.history-hidden{
    text-decoration: line-through;
}
.text-default{color:var(--defaultTextColor);}

.progress-abs{overflow:hidden;}

.progress-images{
    position: relative;
    pointer-events: none;
}

.progress-chart, .progress-images{
    display: flex;
    flex-direction: column;
    max-width: max-content;
}
.progress-chart{
    position: relative;
}
.progress-text{
    position: absolute;
    z-index: 1;
    display: flex;
    flex-direction: column;
    text-align: center;
    height: 100%;
    width: 100%;
    justify-content: center;
    align-items: center;
    color: var(--white);

    font-size: 13px;
    font-style: normal;
    font-weight: 400;
    padding-bottom: 20px;
}
.progress-count{
    font-size: 24px;
    font-style: normal;
    font-weight: 700;
}
.progress-abs{
    position: absolute;
    top: 0;
    left: 0;
    color: var(--primary);
}

.status-candle.--up{
    background-color: var(--primary-light);
    color: var(--primary);
}
.status-candle.--down{
    background-color: var(--danger-light);
    color: var(--danger);
}
.status-candle{
    white-space: nowrap;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 20px;
    max-width: max-content;
    padding: 0 6px;
    border-radius: 300px;

    font-size: 13px;
    line-height: 0;
    font-style: normal;
    font-weight: 600;
    gap: 2px;
}

.table-no-px tr td:first-child,
.table-no-px th:first-child{
    padding-left: 0;
}
.table-no-px tr td:last-child,
.table-no-px th:last-child{
    padding-right: 0;
}










.widget-map{
    overflow: hidden;
    border-radius: 16px;
    border: 1px solid rgba(0, 0, 0, 0.16);
    height: 100%;
    display: flex;
    flex-direction: column;
    position: relative;
    flex: auto;
}
.map-points{
    position: absolute;
    width: 100%;
    height: 100%;
    display: block;
    z-index: 2;
}
.map-point{
    position: absolute;
    display: flex;
    flex-direction: column;
}
.location-map{
    display: flex;
    flex-direction: column;
}
.location-pill > div:first-child{
    border-top-left-radius: var(--defaultRaduis);
    border-bottom-left-radius: var(--defaultRaduis);
}
.location-pill > div:last-child{
    border-top-right-radius: var(--defaultRaduis);
    border-bottom-right-radius: var(--defaultRaduis);
}
.location-pill.pill-cafe{
    background-color: #EBFF01;
    color: var(--defaultTextColor);
}
.location-pill.pill-shipping{
    background-color: #8B1DF9;
    color: var(--white);
}
.location-pill.pill-kitchen{
    background-color: var(--primary);
    color: var(--white);
}
.location-pill.pill-kitchen .lp-ico{
    color: var(--primary);
}
.location-pill .lp-use{
    min-width: 18px;
    max-width: 18px;
    height: 18px;
    border-radius: 300px !important;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--defaultTextColor);
    color: var(--white);

    position: absolute;
    top: -7px;
    left: -7px;
}
.location-pill .lp-ico{
    min-width: 36px;
    max-width: 36px;
    height: 100%;
    background-color: var(--white);
    color: var(--defaultTextColor);
    display: flex;
    align-items: center;
    justify-content: center;
}
.location-pill .lp-info{
    display: flex;
    justify-content: center;
    align-items: center;
    padding-left: 8px;
    padding-right: 8px;

    font-size: 13px;
    font-style: normal;
    font-weight: 500;
}
.location-pill::after{
    content: "";
    width: 0px;
    height: 0px;
    border-style: solid;
    border-width: 7px 6px 0 6px;
    border-color: var(--white) transparent transparent transparent;
    transform: translateX(-50%) rotate(0deg);
    top: 100%;
    left: 50%;
    position: absolute;
}
.location-pill{
    position: absolute;
    background-color: var(--white);
    width: max-content;
    display: flex;
    text-overflow: ellipsis;
    border-radius: var(--defaultRaduis);
    height: 36px;
    top: calc(-100% - 18px);
    left: 50%;
    transform: translate(-50%, -10px);
    filter: drop-shadow(0px 1px 2px rgba(91, 104, 113, 0.5));
}
.location-point{
    min-width: 18px;
    max-width: 18px;
    height: 18px;
    border-radius: 300px;
    background-color: var(--primary);
    border: 3px solid var(--white);
    box-shadow: var(--shadow-1);
    display: flex;
    align-items: center;
    justify-content: center;
}
.location-point::after{
    content: "";
    display: block;
    width: 50%;
    height: 50%;
    border-radius: 300px;
    background-color: var(--white);
    position: relative;
}
.widget-map::after{
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.24) 0%, rgba(0, 0, 0, 0.00) 10.78%);
    pointer-events: none;
}
.map-canvas{
    display: flex;
    flex-direction: column;
}
.map-canvas, .map-canvas img{
    height: 100%;
    width: 100%;
    flex: auto;
}

.btn-map-nav{
    background-color: var(--white);
    color: var(--defaultTextColor);
    box-shadow: var(--shadow-1);
    border-radius: 8px;
}
.map-nav{
    z-index: 3;
    position: absolute;
    left: 0;
    bottom: 0;
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.map-filters{
    overflow: auto;
    z-index: 3;
    position: absolute;
    left: 0;
    width: 100%;
    top: 0;
    padding: 8px;
    display: flex;
    gap: 8px;
}
.header-fixed .page-canva{
    height: calc(100vh - var(--header-fixed-padding));
    max-height: calc(100vh - var(--header-fixed-padding));
}
.page-canva{
    height: 100vh;
    max-height: 100vh;
}
.page-canva .page-section{
    --bs-gutter-y: 0;
    height: 100%;
    --bs-gutter-x: 24px;
}

.group-btn-map-nav{
    flex-direction: column;
}
.group-btn-map-nav > .btn{
    border-radius: 0;
}
.group-btn-map-nav > .btn:not(:last-child){
    border-bottom: 1px solid #E4E4E4;
}
.map-filter{
    padding: 4px;
}

.sidebar-map{
    flex: 0 0 420px;
    max-width: 420px;
}
.card-bottom-border{
    border-bottom: 1px solid var(--table-border);
}
.card-top-border{
    border-top: 1px solid var(--table-border);
}
.order-list{
    display: flex;
    flex-direction: column;
    padding: 14px;
}
.order-list .order-block{
    padding: 0;
}
.order-list .order-list--item:not(:last-child){
    padding-bottom: 14px;
    margin-bottom: 14px;
}
.order-block{
    padding: 14px;
}
.order-list .order-list--item:not(:last-child){
    border-bottom: 1px solid var(--table-border);
}
.order-block{
    display: flex;
    flex-direction: column;
    gap: 10px;

    white-space: nowrap;
    overflow: hidden;
}
.order-block .double-btn{
    flex-wrap: nowrap;
}
.status-date-pill.status-date-pill--danger{
    background-color: var(--danger);
    color: var(--white);
}
.status-date-pill.status-date-pill--primary{
    background-color: var(--primary);
    color: var(--white);
}
.status-date-pill{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 2px;
    min-width: 55px;
    border-radius: var(--defaultRaduis);
    background-color: var(--table-head);
    padding: 4px 10px;
    color: var(--light);
}
.pill-numb-text{
    font-size: 18px;
    font-style: normal;
    font-weight: 600;
}
.pill-date-text{
    font-size: 12px;
    font-style: normal;
    font-weight: 500;
}
.card-body.p-0{padding:0 !important;}

.order-list--item{
    display: flex;
    flex-direction: column;
}
.status-date-title{
    font-size: 15px;
    font-style: normal;
    font-weight: 600;
    white-space: nowrap;
}
.order-block .heading-desk{
    white-space: nowrap;
}

.body-sticky{
    position: sticky;
    top: 0;
    width: 100%;
    z-index: 3;
}


.card .body-sticky{
    background-color: var(--white);
    padding: 14px;
}
.card .body-sticky + .order-list{
    padding-top: 0;
}

.status-text{
    display: flex;
    align-items: center;
    gap: 6px;
}
.status-text::before{
    content: "\2022";
}
.sidebar-map .card-header{

}
.page-canva .card-header{
    min-height: auto;
}
.card-footer{
    display: flex;
    flex-direction: column;
}

.price-table{
    width: 100%;
    background-color: var(--table-head);
    font-size: 14px;
    font-weight: 500;
    font-family: var(--fotnFamily);
}
.price-table thead td,
.price-table thead th{
    padding-top: 10px;
    padding-bottom: 10px;
    color: var(--light);
    font-weight: 500;
}
.price-table thead + tbody tr:first-child td{
    padding-top: 0px;
}
.price-table tbody tr:first-child td{
    padding-top: 10px;
}
.price-table tbody tr:last-child td{
    padding-bottom: 10px;
}
.price-table tbody tr td{
    padding-top: 5px;
    padding-bottom: 5px;
}
.price-table td,
.price-table th{
    padding-left: 20px;
    padding-right: 20px;
}
.price-table tfoot td{
    padding-top: 12px;
    padding-bottom: 12px;
    font-size: 18px;
    font-style: normal;
    font-weight: 600;
}
.price-table tfoot{
    background-color: var(--defaultTextColor);
    color: var(--white);
}


.order-info{
    display: flex;
    align-items: center;
    gap: 14px;
}
.order-title-info{
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.table thead{
    position: sticky;
    top: 0;
    z-index: 3;
}

.check.check-sm{
    min-width: 16px;
    height: 16px;
    max-width: 16px;
    border-radius: 4px;
}

.check.check-sm::after{
    background: url(../img/ico-check.svg) no-repeat center center / 12px;
}
.table-accord-head{cursor:pointer;}
.table-accord-head td{
    background-color: var(--table-col);
    border-top: 1px solid var(--table-border);
    border-bottom: 1px solid var(--table-border);
    padding: 10px 10px !important;
}
.table-accord-head td:first-child{
    border-left: 1px solid var(--table-border);
    border-top-left-radius: 8px;
    border-bottom-left-radius: 8px;
}
.table-accord-head td:last-child{
    border-right: 1px solid var(--table-border);
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
}
.table-accordeons{
    border-spacing: 0px 4px;
}
/*
.table-accord-btn{
    background-color: var(--table-col);
    border: 1px solid var(--table-border);
    border-radius: 8px;
    width: 100%;
}*/
.table-accord-body > td{
    padding: 0 !important;
    background-color: transparent !important;
    border: none !important;
}

.switch-check{
    display: flex;
    align-items: center;
    gap: 8px;
}
.switch{
    height: 20px;
    overflow: hidden;
    width: 34px;
    display: flex;
    border-radius: 360px;
    background-color: #D3D3D3;
    cursor: pointer;
    position: relative;
    transition: all .3s ease;
}
.switch::after{
    content: "";
    position: relative;
    width: 20px;
    height: 100%;
    border-radius: 360px;
    aspect-ratio: 1 / 1;
    background-color: var(--white);
    border: 2px solid #D3D3D3;
    transition: all .3s ease;
}
.switch-check input:checked ~ .switch{
    background-color: var(--primary);
}
.switch-check input:checked ~ .switch::after{
    border-color: var(--primary);
    transform: translateX(calc(34px - 20px));
}

.table-accord--slider .table-2-bg > tbody tr:nth-child(odd) td{
    background-color: var(--white);
}
.table-accord--slider .table-2-bg > tbody tr:last-child td{
    border-bottom: none;
}
.table-accord--slider .table-2-bg > tbody tr:first-child td{
    padding-top: 10px;
}
.table-accord--slider .table-2-bg > tbody tr:nth-child(even) td{
    background-color: var(--table-col);
}

.table-accord-head.--show .ico-accord-transform{
    transform: rotate(180deg);
}
