/************************************************************ Root variables **/
:root {
    --color_ttl: #02627E;
    --color_sttl: #646464;
    --color_counter: #FFB660;
    --color_counter_bg: #F5F5F5;

    --color_menu: #4890AD;
    --color_label: #969696;
    --color_link: #FDFDFD;
    --color_success: #4EAEA2;
    --color_failure: #EB7171;
    --color_confirm: #4EAEA2;
    --color_cancel: #F4715F;
    --color_inative: #B4B4B4;
    --color_disable: #C8C8C8;
    --color_notice: #7BC0DF;

    --color_state_1: #46C5A6;
    --color_state_2: #FFB660;
    --color_state_3: #F4715F;
    --color_state_4: #82D6F1;
    --color_state_5: #09617F;

    --color_timeoff_1: 255, 182, 96;
    --color_timeoff_2: 70, 197, 166;
    --color_timeoff_3: 244, 113, 95;

    --color_timeoff_type_1: #46C5A6;
    --color_timeoff_type_2: #FFB660;
    --color_timeoff_type_3: #F4715F;
    --color_timeoff_type_4: #82D6F1;
    --color_timeoff_holiday: #4DBDDB;
    --color_timeoff_now: #FFCDD2;
    /* --color_timeoff_weekend: 175, 175, 175; */
    --color_timeoff_weekend: 231, 230, 230;
    --color_timeoff_pending: #FFD966;


    --color_tbl_info: #787878;

    --ms_mobile: 6rem;
    --bs-dropdown-min-width: 5rem;
}


/********************************************************************* Sizes **/
.w-0 {
    width: 0px !important;
}

.w-5 {
    width: 5% !important;
}

.w-10 {
    width: 10% !important;
}

.w-15 {
    width: 15% !important;
}

.w-20 {
    width: 20% !important;
}

.w-30 {
    width: 30% !important;
}

.w-35 {
    width: 35% !important;
}

.w-40 {
    width: 40% !important;
}

.w-45 {
    width: 45% !important;
}

.w-49 {
    width: 49% !important;
}

.w-55 {
    width: 55% !important;
}

.w-60 {
    width: 60% !important;
}

.w-65 {
    width: 65% !important;
}

.w-70 {
    width: 70% !important;
}

.w-80 {
    width: 80% !important;
}

.w-85 {
    width: 85% !important;
}

.w-90 {
    width: 90% !important;
}

.w-95 {
    width: 95% !important;
}

.h-0 {
    height: 0px !important;
}

.h-5 {
    height: 5% !important;
}

.h-10 {
    height: 10% !important;
}

.h-15 {
    height: 15% !important;
}

.h-20 {
    height: 20% !important;
}

.h-30 {
    height: 30% !important;
}

.h-35 {
    height: 35% !important;
}

.h-40 {
    height: 40% !important;
}

.h-45 {
    height: 45% !important;
}

.h-55 {
    height: 55% !important;
}

.h-60 {
    height: 60% !important;
}

.h-65 {
    height: 65% !important;
}

.h-70 {
    height: 70% !important;
}

.h-80 {
    height: 80% !important;
}

.h-85 {
    height: 85% !important;
}

.h-90 {
    height: 90% !important;
}

.h-95 {
    height: 95% !important;
}

.h-22p {
    height: 20px !important;
}

.w-50p {
    width: 50px !important;
}

.w-70p {
    width: 70px !important;
}

.w-200p {
    width: 200px !important;
}

/********************************************************************** Text **/

.fw-900 {
    font-family: "Rubik" !important;
    font-weight: 900 !important;
}

.fw-800 {
    font-family: "Rubik" !important;
    font-weight: 800 !important;
}

.fw-600 {
    font-family: "Rubik" !important;
    font-weight: 600 !important;
}

.fw-500 {
    font-family: "Rubik" !important;
    font-weight: 500 !important;
}

.fw-400 {
    font-family: "Rubik" !important;
    font-weight: 400 !important;
}

.fw-300 {
    font-family: "Rubik" !important;
    font-weight: 300 !important;
}

.fs-12 {
    font-family: "Rubik" !important;
    font-size: 0.750rem !important;
    line-height: 0.875rem !important;
}

.fs-14 {
    font-family: "Rubik" !important;
    font-size: 0.875rem !important;
    line-height: 1.000rem !important;
}

.fs-15 {
    font-family: "Rubik" !important;
    font-size: 0.938rem !important;
    line-height: 1.125rem !important;
}

.fs-16 {
    font-family: "Rubik" !important;
    font-size: 1.000rem !important;
    line-height: 1.185rem !important;
}

.fs-18 {
    font-family: "Rubik" !important;
    font-size: 1.125rem !important;
    line-height: 1.313rem !important;
}

.fs-20 {
    font-family: "Rubik" !important;
    font-size: 1.250rem !important;
    line-height: 1.500rem !important;
}

.fs-22 {
    font-family: "Rubik" !important;
    font-size: 1.375rem !important;
    line-height: 1.625rem !important;
}

.fs-25 {
    font-family: "Rubik" !important;
    font-size: 1.563rem !important;
    line-height: 1.875rem !important;
}

.fs-26 {
    font-family: "Rubik" !important;
    font-size: 1.625rem !important;
    line-height: 1.925625rem !important;
}

.fs-30 {
    font-family: "Rubik" !important;
    font-size: 1.875rem !important;
    line-height: 2.250rem !important;
}

.fs-40 {
    font-family: "Rubik" !important;
    font-size: 2.500rem !important;
    line-height: 2.938rem !important;
}

.fs-60 {
    font-family: "Rubik" !important;
    font-size: 3.750rem !important;
    line-height: 4.438rem !important;
}

.fs-70 {
    font-family: "Rubik" !important;
    font-size: 4.375rem !important;
    line-height: 5.188rem !important;
}

.fs-100 {
    font-family: "Rubik" !important;
    font-size: 6.25rem !important;
    line-height: 7.40625rem !important;
}

.fc-ttl {
    color: var(--color_ttl) !important;
}

.fc-sttl {
    color: var(--color_sttl) !important;
}

.fc-counter {
    color: var(--color_counter) !important;
}

.fc-menu {
    color: var(--color_menu) !important;
}

.fc-label {
    color: var(--color_label) !important;
}

.fc-link {
    color: var(--color_link) !important;
}

.fc-confirm {
    color: var(--color_confirm) !important;
}

.fc-cancel {
    color: var(--color_cancel) !important;
}

.fc-reativate {
    color: var(--color_confirm) !important;
}

.fc-deativate {
    color: var(--color_cancel) !important;
}

.fc-success {
    color: var(--color_success) !important;
}

.fc-failure {
    color: var(--color_failure) !important;
}

.fc-inative {
    color: var(--color_inative) !important;
}

.fc-tbl-info {
    color: var(--color_tbl_info) !important;
}

.fc-notice {
    color: var(--color_notice) !important;
}

.ft-upper {
    text-transform: uppercase;
}

.ft-lower {
    text-transform: lowercase;
}

.ft-timer {
    text-transform: uppercase !important;
    color: var(--color_menu) !important;
    background-color: var(--color_counter_bg) !important;
}

.ft-counter {
    text-transform: uppercase !important;
    color: var(--color_counter) !important;
    background-color: var(--color_counter_bg) !important;
}


/********************************************************* State/Type Colors **/
.fc-state1 {
    color: var(--color_state_1) !important;
}

.fc-state2 {
    color: var(--color_state_2) !important;
}

.fc-state3 {
    color: var(--color_state_3) !important;
}

.fc-state4 {
    color: var(--color_state_4) !important;
}

.fc-state5 {
    color: var(--color_state_5) !important;
}

.bg-state1 {
    background-color: var(--color_state_1) !important;
    color: #FFFFFF !important;
}

.bg-state2 {
    background-color: var(--color_state_2) !important;
    color: #FFFFFF !important;
}

.bg-state3 {
    background-color: var(--color_state_3) !important;
    color: #FFFFFF !important;
}

.bg-state4 {
    background-color: var(--color_state_4) !important;
    color: #FFFFFF !important;
}

.bg-state5 {
    background-color: var(--color_state_5) !important;
    color: #FFFFFF !important;
}

.bc-state1 {
    border-color: var(--color_state_1) !important;
}

.bc-state2 {
    border-color: var(--color_state_2) !important;
}

.bc-state3 {
    border-color: var(--color_state_3) !important;
}

.bc-state4 {
    border-color: var(--color_state_4) !important;
}

.bc-state4 {
    border-color: var(--color_state_5) !important;
}

.b1-state1 {
    border: 1px solid var(--color_state_1) !important;
}

.b1-state2 {
    border: 1px solid var(--color_state_2) !important;
}

.b1-state3 {
    border: 1px solid var(--color_state_3) !important;
}

.b1-state4 {
    border: 1px solid var(--color_state_4) !important;
}

.b1-state5 {
    border: 1px solid var(--color_state_5) !important;
}

.b1b-state1 {
    border-bottom: 1px solid var(--color_state_1) !important;
}

.b1b-state2 {
    border-bottom: 1px solid var(--color_state_2) !important;
}

.b1b-state3 {
    border-bottom: 1px solid var(--color_state_3) !important;
}

.b1b-state4 {
    border-bottom: 1px solid var(--color_state_4) !important;
}


.fc-timeoff1 {
    color: rgb(var(--color_timeoff_1)) !important;
}

.fc-timeoff2 {
    color: rgb(var(--color_timeoff_2)) !important;
}

.fc-timeoff3 {
    color: rgb(var(--color_timeoff_3)) !important;
}

.bg-timeoff1 {
    background-color: rgb(var(--color_timeoff_1)) !important;
}

.bg-timeoff2 {
    background-color: rgb(var(--color_timeoff_2)) !important;
}

.bg-timeoff3 {
    background-color: rgb(var(--color_timeoff_3)) !important;
}

.bg-op-timeoff1 {
    background-color: rgba(var(--color_timeoff_1), 0.2) !important;
}

.bg-op-timeoff2 {
    background-color: rgba(var(--color_timeoff_2), 0.2) !important;
}

.bg-op-timeoff3 {
    background-color: rgba(var(--color_timeoff_3), 0.2) !important;
}

.bg-now {
    background-color: var(--color_timeoff_now) !important;
}

.bg-holiday {
    background-color: var(--color_timeoff_holiday) !important;
}

.bg-weekend {
    /* background-color: rgba(var(--color_timeoff_weekend), 0.4) !important; */
    background-color: rgb(var(--color_timeoff_weekend)) !important;
}

.bg-pending {
    background-color: var(--color_timeoff_pending) !important;
}

.bg-counter {
    background-color: var(--color_counter_bg) !important;
}

.line-orange {
    height: 0px;
    border-top: 1px solid var(--color_counter);
}


/******************************************************************* Filters **/
.large-filter {
    width: 100%;
    height: 3.125rem !important;
}

.small-filter {
    width: 100%;
    height: 2.18rem !important;
}

.filter_clear {
    position: relative;
    height: 100%;
    cursor: pointer;
    aspect-ratio: 1 / 1 !important;
    background-color: var(--color_menu);
    border-radius: 50% !important;
    overflow: hidden;
}

.filter_clear svg {
    position: absolute;
    height: 60% !important;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.filter_clear.disabled,
.filter_clear:disabled {
    cursor: default;
    background-color: var(--color_disable) !important;
}

.filter_clear:hover:not(.disabled, :disabled) {
    filter: drop-shadow(0px 4px 4px rgba(80, 80, 80, 0.2));
}

.filter_range {
    min-width: 18rem;
    height: 100%;
    cursor: pointer;
    border: 1px solid var(--color_menu);
    border-radius: 3.125rem;
    position: relative;
    /* padding-left: 4rem;
    padding-right: 1.5rem; */
    padding-left: 3.5rem;
    padding-right: 1.25rem;
    display: flex;
    justify-content: center;
    align-content: center;
}

.filter_range svg {
    position: absolute;
    top: 26%;
    height: 48%;
    left: 1.5rem;
    pointer-events: none;
}

.filter_range:hover:not(.disabled, :disabled) svg {
    filter: drop-shadow(0px 4px 4px rgba(80, 80, 80, 0.2));
}

.filter_range input {
    color: var(--color_menu);
    text-transform: uppercase;
    border: 0 !important;
    outline: none !important;
    cursor: pointer;
}

.filter_range input::placeholder {
    color: var(--color_label);
    text-transform: lowercase;
}

.filter_range.disabled,
.filter_range:disabled {
    cursor: default;
    border: 1px solid var(--color_disable) !important;
}

.filter_range.disabled input,
.filter_range:disabled input {
    cursor: default;
}

.filter_range.disabled svg path,
.filter_range:disabled svg path,
.filter_range.disabled svg rect,
.filter_range:disabled svg rect {
    fill: var(--color_disable);
}

.filter_search {
    position: relative;
    height: 100%;
    overflow: hidden;
    cursor: pointer;
    border: 1px solid var(--color_counter);
}

.filter_search svg {
    position: absolute;
    top: 25%;
    height: 50%;
    aspect-ratio: 1 / 1;
    cursor: pointer;
}

.filter_search input {
    font-family: "Rubik" !important;
    font-weight: 300 !important;
    font-size: 1.25rem !important;
    line-height: 1.5rem !important;
    color: var(--color_menu);
    text-transform: uppercase;
    border: 0 !important;
    outline: none !important;
    width: 20rem;
}

.filter_search input::placeholder {
    color: var(--color_label);
}

.filter_search.open {
    border-radius: 3.125rem;
    background-color: #FFFFFF;
    padding-left: 0.8125rem;
    padding-right: 3.125rem;
}

.filter_search.open svg {
    stroke: var(--color_counter);
    right: 0.8125rem !important;
}

.filter_search.opened {
    border-radius: 3.125rem;
    background-color: #FFFFFF;
    width: 100%;
    padding-left: 0.8125rem;
    padding-right: 3.125rem;
}

.filter_search.opened svg {
    stroke: var(--color_counter);
    right: 0.8125rem !important;
}

.filter_search.opened input {
    font-family: "Rubik" !important;
    font-weight: 300 !important;
    font-size: 1.25rem !important;
    line-height: 1.5rem !important;
    color: var(--color_menu);
    text-transform: uppercase;
    border: 0 !important;
    outline: none !important;
    width: calc(100% - 3.9375rem) !important;
}

.filter_search.close {
    /* width: 3.125rem; */
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    background-color: var(--color_counter);
}

.filter_search.close svg {
    stroke: #FFFFFF;
    margin-left: auto;
    margin-right: auto;
}

.filter_search.close input {
    display: none;
}

.filter_search.close:hover {
    filter: drop-shadow(0px 4px 4px rgba(80, 80, 80, 0.2)) !important;
}

.filter_drop {
    height: 100%;
    /* z-index: 1050 !important; */
    background: #FFFFFF !important;
    border: 1px solid var(--color_menu) !important;
}

.filter_drop>div:first-child {
    position: relative;
    cursor: pointer !important;
    height: 100%;
    padding-left: 1.563rem !important;
    padding-right: 4.751rem !important;
    /* padding-right: 3.563rem !important; */
}

.filter_drop>div:first-child svg {
    position: absolute;
    right: 1.563rem;
    top: 32%;
    height: 36%;
    pointer-events: none;
}

.filter_drop>div:first-child span {
    font-family: "Rubik" !important;
    font-weight: 400 !important;
    font-size: 0.938rem !important;
    line-height: 1.125rem !important;
    color: var(--color_label) !important;
    text-transform: uppercase;
}

.filter_drop>div:first-child:hover span {
    outline: none !important;
    color: var(--color_menu) !important;
}

.filter_drop>div:first-child:hover svg {
    filter: drop-shadow(0px 4px 4px rgba(80, 80, 80, 0.2)) !important;
}

.filter_drop.open {
    border-radius: 0.9375rem 0.9375rem 0 0 !important;
    z-index: 1050 !important;
}

.filter_drop.open svg {
    transform: rotate(180deg);
}

.filter_drop.open>div:last-child {
    border: 1px solid #4890AD !important;
    background-color: #FFFFFF !important;
    border-radius: 0 0 0.9375rem 0.9375rem !important;
    width: calc(100% + 2px) !important;
    margin-left: -1px !important;

}

.filter_drop.close {
    border-radius: 3.125rem !important;
}

.filter_drop.close>div:last-child {
    display: none !important;
}

.filter_search_selector {
    z-index: 1050 !important;
    position: relative;
}

.filter_search_selector>div:first-child {
    position: relative;
    height: 100%;
    width: 100%;
    border: 1px solid var(--color_counter);
    background-color: #FFFFFF;
    padding-left: 0.8125rem;
    padding-right: 3.125rem;
    overflow: hidden;
}

.filter_search_selector>div:first-child svg {
    position: absolute;
    top: 25%;
    right: 0.8125rem !important;
    height: 50%;
    stroke: var(--color_counter);
    aspect-ratio: 1 / 1;
}

.filter_search_selector>div:first-child input {
    font-family: "Rubik" !important;
    font-weight: 300 !important;
    font-size: 1.25rem !important;
    line-height: 1.5rem !important;
    color: var(--color_menu);
    text-transform: uppercase;
    border: 0 !important;
    outline: none !important;
    width: 100%;
    height: 100%;
}

.filter_search_selector>div:first-child input::placeholder {
    color: var(--color_label);
}

.filter_search_selector>div:first-child.close {
    border-radius: 3.125rem !important;
}

.filter_search_selector>div:first-child.open {
    border-radius: 1.875rem 1.875rem 0 0 !important;
}

.filter_search_selector>div:last-child {
    position: absolute;
    top: 100%;
    right: calc(var(--bs-gutter-x) * .5);
    left: calc(var(--bs-gutter-x) * .5);
    margin: 0 !important;
    padding: 0 !important;
    border-left: 1px solid var(--color_counter);
    border-right: 1px solid var(--color_counter);
    border-radius: 0 0 1.875rem 1.875rem !important;
    background-color: #FFFFFF;
    z-index: 1050 !important;
    overflow: hidden;
}

.filter_search_selector>div:last-child span {
    font-family: "Rubik" !important;
    font-weight: 300;
    font-size: 1.25rem;
    line-height: 1.5rem;
    color: var(--color_label);
    cursor: pointer;
    width: 100%;
    height: 3.125rem;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    border-top: 1px solid var(--color_counter);
    background-color: white;
    display: flex;
    justify-content: start;
    align-items: center;
}

.filter_search_selector>div:last-child span.item_empty {
    font-weight: 400 !important;
    cursor: default !important;
    color: var(--color_disable) !important;
}

.filter_search_selector>div:last-child span.item_all {
    font-weight: 400 !important;
}

.filter_search_selector>div:last-child span.item_all_active {
    font-weight: 400 !important;
    cursor: default !important;
    color: var(--color_counter) !important;
}

.filter_search_selector>div:last-child span.item_more {
    height: 1.875rem !important;
    justify-content: center !important;
}

.filter_search_selector>div:last-child span:hover:not(.item_more, .item_empty, .item_all_active) {
    background-color: var(--color_counter_bg);
}

.filter_search_selector>div:last-child span.focus {
    background-color: var(--color_counter_bg);
}

.filter_search_selector>div:last-child span:first-child {
    border-top: none !important;
}

.filter_search_selection {
    width: 100% !important;
    /* min-height: 2.5rem !important; */
    margin-top: 1rem !important;
    margin-bottom: 1rem !important;
    display: flex !important;
    justify-content: flex-start !important;
    flex-wrap: wrap !important;
}

.filter_search_selector_item {
    height: 2.5rem;
    position: relative;
    cursor: default;
    border-radius: 1.875rem !important;
    box-shadow: 0px 4px 20px rgba(125, 125, 125, 0.3);
}

.filter_search_selector_item div {
    font-family: "Rubik" !important;
    font-weight: 300;
    font-size: 1.25rem !important;
    line-height: 1.5rem !important;
    color: var(--color_label);
    margin-left: 1rem !important;
    margin-right: 1rem !important;
    display: flex;
    justify-content: start;
    align-items: center;
}

.filter_search_selector_item span {
    margin: auto 1rem auto 1rem !important;
    width: 1rem !important;
    height: 1rem !important;
}

.filter_date {
    width: 100%;
    height: 100%;
    cursor: pointer;
    border: 1px solid var(--color_menu);
    border-radius: 3.125rem;
    position: relative;
    padding-left: 4rem;
    padding-right: 3rem;
    display: flex;
    justify-content: center;
    align-content: center;
}

.filter_date svg {
    position: absolute;
    top: 26%;
    height: 48%;
    max-width: 2rem;
    left: 1.5rem;
    pointer-events: none;
}

.filter_date input {
    width: 100% !important;
    outline: none !important;
    cursor: pointer;
    color: var(--color_menu);
    text-transform: uppercase;
    border: 0 !important;
}

.filter_date input::placeholder {
    color: var(--color_label);
    text-transform: lowercase;
}

.filter_date input::-webkit-calendar-picker-indicator {
    background: none !important;
}


.filter_timer {
    width: 12rem;
    height: 100%;
    cursor: pointer;
    border: 1px solid var(--color_menu);
    border-radius: 3.125rem;
    padding-left: 1.25rem;
    padding-right: 1.25rem;
    display: flex;
    /* justify-content: space-between; */
    align-content: center;
}

.filter_timer span {
    font-family: "Rubik" !important;
    font-weight: 300 !important;
    color: var(--color_menu);
    display: flex;
    justify-content: center;
    align-content: center;
    margin: auto;
}

.filter_timer label {
    width: 30%;
    height: 100%;
    position: relative;
    display: flex;
    justify-content: center;
    align-content: center;
}

.filter_timer label>svg {
    height: 50%;
    max-width: 50%;
    margin: auto !important;
    pointer-events: none;
}

.filter_timer input {
    width: 35%;
    outline: none !important;
    cursor: pointer;
    box-sizing: border-box;
    color: var(--color_menu);
    text-transform: uppercase;
    border: 0 !important;
}

.filter_timer input::placeholder {
    color: var(--color_label);
    text-transform: lowercase;
}

.filter_timer input:focus {
    outline: 1px solid var(--color_menu);
}

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

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


/******************************************************************** Inputs **/

.in-box {
    padding: 1.125rem 2.4375rem;
    outline: none !important;
    font-family: "Rubik" !important;
    font-weight: 400;
    font-size: 1.375rem;
    line-height: 1.625rem;
    border: 1px solid #4890AD !important;
    border-radius: 50px;
    box-shadow: 0px 4px 15px rgba(125, 125, 125, 0.3);
}

.in-box:focus,
.in-box:active {
    box-shadow: 0px 4px 15px rgba(125, 125, 125, 0.6);
}

.in-box::placeholder {
    font-weight: 300;
    font-size: 1.25rem;
    line-height: 1.5rem;
    color: #C8C8C8;
    text-transform: uppercase;
}

.in-box-icon {
    position: relative;
}

.in-box-icon svg {
    position: absolute;
    margin-top: auto;
    margin-bottom: auto;
    left: 2.438rem;
    top: calc(50% - 1.375rem);
    height: 2.75rem;
    pointer-events: none;
}

.in-box-icon input {
    font-family: "Rubik" !important;
    font-weight: 400;
    font-size: 1.375rem;
    line-height: 1.625rem;
    padding-top: 1.125rem;
    padding-bottom: 1.125rem;
    padding-left: 5.876rem;
    padding-right: 2.438rem;
    border: 1px solid #4890AD !important;
    border-radius: 50px;
    box-shadow: 0px 4px 15px rgba(125, 125, 125, 0.3);
    outline: none !important;
}

.in-box-icon input:focus,
.in-box-icon input:active {
    box-shadow: 0px 4px 15px rgba(125, 125, 125, 0.6);
}

.in-box-icon input::placeholder {
    font-weight: 300;
    font-size: 1.25rem;
    line-height: 1.5rem;
    color: #C8C8C8;
    text-transform: uppercase;
}

.in-bottom-border-white {
    background-color: transparent !important;
    padding: 0.6rem 0.875rem !important;
    border-top: none;
    border-left: none;
    border-right: none;
    border-bottom: solid 0.187rem white !important;
    color: #FFFFFF !important;
    font-family: "Rubik" !important;
    font-weight: 400 !important;
    font-size: 1.375rem !important;
    line-height: 1.625rem !important;
}

.in-bottom-border-white:focus {
    outline: none;
    box-shadow: 0px 15px 10px -10px #ddd;
}

.in-bottom-border-white::placeholder {
    color: #FFFFFF;
    opacity: 0.6;
}

.in-bottom-border-white.is-valid {
    background-size: auto 60%;
    background-repeat: no-repeat;
    background-position: right 1rem center;
    background-image: url(../img/ico_valid.svg);
}

.in-bottom-border-white.is-invalid {
    background-size: auto 60%;
    background-repeat: no-repeat;
    background-position: right 1rem center;
    background-image: url(../img/ico_invalid.svg);
}

.in-bottom-border-white.is-valid-border {
    border-color: var(--color_success) !important;
}

.in-bottom-border-white.is-invalid-border {
    border-color: var(--color_failure) !important;
}

.in-bottom-border {
    border-top: none;
    border-left: none;
    border-right: none;
    border-bottom: 1px solid #4890AD;
    outline: none !important;
    box-shadow: 0px 6px 12px -6px rgba(125, 125, 125, 0.3);
    background-color: transparent !important;
    padding: 0.875rem !important;
    font-family: "Rubik" !important;
    color: #646464;
}

.in-bottom-border:focus:not(.disabled, :disabled),
.in-bottom-border:active:not(.disabled, :disabled) {
    outline: none !important;
    box-shadow: 0px 12px 24px -12px rgba(125, 125, 125, 0.4);
}

.in-bottom-border.disabled,
.in-bottom-border:disabled {
    border-bottom: 1px solid rgba(72, 144, 173, 0.3) !important;
    box-shadow: none;
}

.in-bottom-border::placeholder {
    color: #B4B4B4;
}

.in-bottom-border.is-valid {
    background-size: auto 60%;
    background-repeat: no-repeat;
    background-position: right 1rem center;
    background-image: url(../img/ico_valid.svg);
}

.in-bottom-border.is-invalid {
    background-size: auto 60%;
    background-repeat: no-repeat;
    background-position: right 1rem center;
    background-image: url(../img/ico_invalid.svg);
}

.in-bottom-border.is-error {
    border-bottom: 1px solid var(--color_failure) !important;

}


/******************************************************************* Buttons **/
.btn-link-text {
    cursor: pointer;
    text-decoration: none !important;
    text-transform: uppercase !important;
    font-weight: 400 !important;
    font-size: 0.938rem !important;
    line-height: 1.125rem !important;
    color: var(--color_link) !important;
}

.btn-link-text:hover {
    font-weight: 500 !important;
    filter: drop-shadow(0px 4px 20px rgba(125, 125, 125, 0.3));
}

.btn-svg {
    cursor: pointer !important;
    outline: none !important;
}

.btn-svg:hover svg {
    filter: drop-shadow(0px 4px 4px rgba(80, 80, 80, 0.2)) !important;
    -moz-transform: scale(1.1);
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
}

.btn-svg.text-white svg {
    stroke: #FFFFFF;
}

.btn-std {
    font-family: "Rubik";
    font-weight: 400;
    text-decoration: none;
    text-transform: uppercase;
    color: var(--color_menu);
    background-color: white;
    cursor: pointer;
    border-radius: 1.875rem;
    border: 0 !important;
    box-shadow: 0px 4px 20px rgba(125, 125, 125, 0.3);
    outline: none !important;
    -webkit-user-select: none !important;
    -moz-user-select: none !important;
    user-select: none !important;
    display: flex;
    justify-content: center;
    align-items: center;
    align-content: center;
}

.btn-std:hover:not(.disabled, :disabled) {
    font-weight: 500 !important;
    color: var(--color_menu);
    background-color: white;
    box-shadow: 0px 4px 20px rgba(125, 125, 125, 0.6);
}

.btn-std.disabled,
.btn-std:disabled {
    color: var(--color_inative);
    cursor: default !important;
}

.btn-add {
    font-family: "Rubik";
    font-weight: 400;
    text-decoration: none;
    text-transform: uppercase;
    color: white;
    background-color: var(--color_counter);
    cursor: pointer;
    border-radius: 1.875rem;
    border: 0 !important;
    box-shadow: 0px 4px 20px rgba(125, 125, 125, 0.3);
    -webkit-user-select: none !important;
    -moz-user-select: none !important;
    user-select: none !important;
    display: flex;
    justify-content: center;
    align-items: center;
    align-content: center;
}

.btn-add:hover {
    font-weight: 500 !important;
    color: white;
    background-color: var(--color_counter);
    box-shadow: 0px 4px 20px rgba(125, 125, 125, 0.6);
}

.btn-add.disabled,
.btn-add:disabled {
    color: white;
}

.btn-add.disabled:hover,
.btn-add:disabled:hover {
    font-weight: 400 !important;
    color: white;
    cursor: default;
    box-shadow: 0px 4px 20px rgba(125, 125, 125, 0.3);
}

.btn-modal {
    font-family: "Rubik" !important;
    font-weight: 300 !important;
    text-decoration: none;
    text-transform: uppercase;
    background-color: white;
    cursor: pointer;
    border-radius: 1.875rem;
    border: 0 !important;
    box-shadow: 0px 4px 20px rgba(125, 125, 125, 0.3);
    outline: none !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center;
    align-content: center !important;
    -webkit-user-select: none !important;
    -moz-user-select: none !important;
    user-select: none !important;
}

.btn-modal:hover {
    font-weight: 400 !important;
    background-color: white;
    box-shadow: 0px 4px 20px rgba(125, 125, 125, 0.6);
}

.btn-modal.disabled,
.btn-modal:disabled {
    color: var(--color_inative);
}

.btn-modal.disabled:hover,
.btn-modal:disabled:hover {
    font-weight: 300 !important;
    color: var(--color_inative);
    cursor: default;
    box-shadow: 0px 4px 20px rgba(125, 125, 125, 0.3);
}

.btn-border {
    font-family: "Rubik" !important;
    font-weight: 400;
    text-decoration: none;
    text-transform: uppercase;
    color: var(--color_label);
    background-color: white;
    cursor: pointer;
    border-radius: 1.875rem;
    border: 1px solid var(--color_menu) !important;
    box-shadow: 0px 4px 20px rgba(125, 125, 125, 0.3);
    outline: none !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center;
    align-content: center !important;
    -webkit-user-select: none !important;
    -moz-user-select: none !important;
    user-select: none !important;
}

.btn-border:hover {
    color: var(--color_menu);
}

.btn-border.active {
    color: white !important;
    background-color: var(--color_menu) !important;
}

.btn-border.disabled,
.btn-border:disabled,
.btn-border.disabled:hover,
.btn-border:disabled:hover {
    cursor: default !important;
    color: var(--color_disable) !important;
    border: 1px solid var(--color_disable) !important;
}

.btn-text {
    font-family: "Rubik" !important;
    font-weight: 300 !important;
    text-decoration: none !important;
    text-transform: uppercase !important;
    -webkit-user-select: none !important;
    -moz-user-select: none !important;
    user-select: none !important;
    cursor: pointer !important;
    outline: none !important;
}

.btn-text:hover {
    font-weight: 400 !important;
    filter: drop-shadow(0px 4px 20px rgba(125, 125, 125, 0.3));
}

.btn-text.disabled,
.btn-text:disabled {
    color: var(--color_inative);
}

.btn-text.disabled:hover,
.btn-text.disabled:hover {
    font-weight: 400;
    color: var(--color_inative);
    filter: none;
}

.btn_dropdown {
    height: 100%;
    cursor: pointer;
    background: #FFFFFF !important;
    border: 1px solid var(--color_menu);
}

.btn_dropdown.report_export {
    border: none !important;
    width: 100%;
    height: 4.0625rem !important;
    box-shadow: 0px 4px 20px rgba(125, 125, 125, 0.3);
}

.btn_dropdown>div:first-child {
    position: relative;
    height: 100%;
    padding-left: 1.563rem !important;
    padding-right: 4.751rem !important;
}

.btn_dropdown>div:first-child svg {
    position: absolute;
    right: 1.563rem;
    top: 32%;
    height: 36%;
    pointer-events: none;
}

.btn_dropdown>div:first-child span {
    font-family: "Rubik" !important;
    font-weight: 400;
    font-size: 0.938rem;
    line-height: 1.125rem;
    color: var(--color_label);
    text-transform: uppercase;
}

.btn_dropdown:not(.disabled, :disabled)>div:first-child:hover span {
    outline: none !important;
    color: var(--color_menu) !important;
}

.btn_dropdown:not(.disabled, :disabled)>div:first-child:hover svg {
    filter: drop-shadow(0px 4px 4px rgba(80, 80, 80, 0.2)) !important;
}

.btn_dropdown.disabled,
.btn_dropdown:disabled {
    cursor: default !important;
    border: 1px solid var(--color_disable) !important;
}

.btn_dropdown.disabled>div:first-child span,
.btn_dropdown:disabled>div:first-child span {
    color: var(--color_disable) !important;
}

.btn_dropdown.disabled>div:first-child svg path,
.btn_dropdown:disabled>div:first-child svg path {
    stroke: var(--color_disable) !important;
}

.btn_dropdown.open {
    border-radius: 0.9375rem 0.9375rem 0 0 !important;
}

.btn_dropdown.open>div:last-child {
    position: relative;
    z-index: 1050 !important;
    border: 1px solid #4890AD !important;
    background-color: #FFFFFF !important;
    border-radius: 0 0 0.9375rem 0.9375rem !important;
    width: calc(100% + 2px) !important;
    margin-left: -1px !important;
}

.btn_dropdown.close {
    border-radius: 3.125rem !important;
}

.btn_dropdown.close>div:last-child {
    display: none !important;
}

.btn_export {
    width: 13.5rem;
    min-height: 4.0625rem;
    z-index: 1050 !important;
    background-color: #FFFFFF;
    border: none;
    box-shadow: 0px 4px 20px rgba(125, 125, 125, 0.3);
}

.btn_export>div:first-child {
    height: 4.0625rem !important;
    display: flex;
    justify-content: center;
    align-content: center;
    align-items: center;
}

.btn_export>div:first-child span {
    font-family: "Rubik" !important;
    font-weight: 300;
    font-size: 1.563rem;
    line-height: 1.875rem;
    text-transform: uppercase;
    margin-right: 1.5rem !important;
}

.btn_export>div:first-child svg {
    aspect-ratio: 1 / 1 !important;
    height: 1.563rem;
}

.btn_export:not(.disabled, :disabled) {
    cursor: pointer;
}

.btn_export:not(.disabled, :disabled)>div:first-child span {
    color: var(--color_menu);
}

.btn_export:not(.disabled, :disabled)>div:first-child svg path {
    stroke: var(--color_menu);
}

.btn_export:not(.disabled, :disabled)>div:first-child:hover span {
    font-weight: 400 !important;
}

.btn_export:not(.disabled, :disabled)>div:first-child:hover svg {
    filter: drop-shadow(0px 4px 4px rgba(80, 80, 80, 0.2)) !important;
}

.btn_export.disabled,
.btn_export:disabled {
    cursor: default;
}

.btn_export.disabled>div:first-child span,
.btn_export:disabled>div:first-child span {
    color: var(--color_disable);
}

.btn_export.disabled>div:first-child svg path,
.btn_export:disabled>div:first-child svg path {
    stroke: var(--color_disable);
}

.btn_export.open {
    border-radius: 0.9375rem !important;
}

.btn_export.open>div:last-child {
    width: 100%;
    padding: 1.5rem;
    border-top: 1px solid var(--color_menu);
    display: flex;
    justify-content: space-around;
    align-content: center;
}

.btn_export.close {
    border-radius: 3.125rem !important;
}

.btn_export.close>div:last-child {
    display: none !important;
}


/********************************************************************* Cards **/
.team-card {
    background: #FFFFFF;
    border-radius: 1.875rem;
    box-shadow: 0px 4px 20px rgba(91, 71, 188, 0.3);
}

.team-card div {
    background-color: var(--color_counter_bg);
}

.team-card div a {
    width: 13% !important;
}

.team-card .team-card-menu {
    position: absolute;
    right: 0;
    cursor: pointer !important;
    height: 4% !important;
}

.team-card .team-card-current-status {
    position: absolute;
    left: 0;
    height: 5% !important;
    aspect-ratio: 1 / 1 !important;
    border-radius: 50%;
    box-shadow: 0px 2px 10px rgba(91, 71, 188, 0.3);
}

.clerk-card {
    background: #FFFFFF;
    border-radius: 1.875rem 1.875rem 0 0;
    box-shadow: 0px 4px 20px rgba(91, 71, 188, 0.3);
    margin: 0;
    padding: 0;
}

.clerk-card-state {
    background: #FFFFFF;
    border-radius: 1.875rem 1.875rem 1.875rem 1.875rem;
    box-shadow: 0px 4px 20px rgba(91, 71, 188, 0.3);
    margin: 0;
    padding: 0;
}

.clerk-card-options {
    min-height: calc(3.125rem + 2.32rem + 2rem);
}

.clerk-card-options>div:first-child {
    position: absolute;
    top: calc(calc(calc(100% - 2.32rem) / 2) - 3.5625rem);
    right: 0;
    height: 3.125rem;
}

.clerk-card-options>div:nth-child(2) {
    position: absolute;
    top: calc(calc(calc(100% - 6rem)));
    right: 0;
    height: 2.32rem;
}

.clerk-card-options>div:last-child {
    position: absolute;
    top: calc(100% - 2.32rem);
    right: 0;
    height: 2.32rem;
}

.config-card {
    overflow: hidden;
    border-radius: 3.125rem;
}

.config-card>div:first-child {
    height: 4.06rem;
    box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.25);
}

.config-card-form {
    /* border-radius: 2.25rem;
    border: 1px solid var(--color_menu);
    box-shadow: 0px 4px 20px rgba(91, 71, 188, 0.3);
    overflow: hidden; */
}

.config-card-form>div:first-child {
    padding: 1.125rem 2.25rem;
    border-radius: 2.25rem;
}

.config-card-form>div:first-child .btn-svg svg {
    width: 0.597rem;
    height: 1.875rem;
}

.config-card-form .d-error {
    position: absolute;
    bottom: 0.3125rem;
    left: 2.25rem;
}


/**************************************************************** DataTables **/
.dataTables_empty {
    border: 0.8px solid var(--color_menu);
    border-radius: 1.875rem;
    overflow: hidden;
    padding: 0.938rem;
}

.dataTable.no-footer {
    border-bottom: none !important;
}

td.dt-show div span.dt-hide,
td.dt-show div svg.dt-hide,
td.dt-hide div span.dt-show,
td.dt-hide div svg.dt-show {
    display: none;
}

.dataTables_wrapper .dataTables_paginate a.paginate_button.current {
    font-family: "Rubik" !important;
    font-weight: 300 !important;
    font-size: 0.938rem;
    line-height: 1.313rem;
    margin-left: 1rem !important;
    margin-right: 1rem !important;
    color: white !important;
    background: rgb(217, 217, 217) !important;
    background-color: #02627E !important;
    border-radius: 50% !important;
    border: none !important;
}

.dataTables_wrapper .dataTables_paginate a.paginate_button:not(.current, .first, .last, .next, .previous) {
    font-family: "Rubik" !important;
    font-weight: 300 !important;
    font-size: 0.938rem;
    line-height: 1.313rem;
    margin-left: 1rem !important;
    margin-right: 1rem !important;
    color: #646464 !important;
    background: rgb(217, 217, 217) !important;
    background-color: #D9D9D9 !important;
    border-radius: 50% !important;
    border: none !important;
}

.dataTables_wrapper .dataTables_paginate a.paginate_button:hover:not(.disabled, .first, .last, .next, .previous) {
    color: white !important;
    border: none !important;
    background-color: #02627E !important;
    background: rgb(2, 98, 126) !important;
    box-shadow: 0px 4px 20px 0px #5B47BC4D !important;
}

.dataTables_wrapper .dataTables_paginate a.paginate_button.last,
.dataTables_wrapper .dataTables_paginate a.paginate_button.first,
.dataTables_wrapper .dataTables_paginate a.paginate_button.next,
.dataTables_wrapper .dataTables_paginate a.paginate_button.previous {
    border: 0 !important;
    /* --bs-pagination-padding-x : 0; */
    background-color: transparent !important;
    background: rgba(0, 0, 0, 0.0) !important;
}

.dataTables_wrapper .dataTables_paginate a.paginate_button.last svg,
.dataTables_wrapper .dataTables_paginate a.paginate_button.first svg,
.dataTables_wrapper .dataTables_paginate a.paginate_button.next svg,
.dataTables_wrapper .dataTables_paginate a.paginate_button.previous svg {
    stroke: #02627E !important;
}

.dataTables_wrapper .dataTables_paginate a.paginate_button.last.disabled svg,
.dataTables_wrapper .dataTables_paginate a.paginate_button.first.disabled svg,
.dataTables_wrapper .dataTables_paginate a.paginate_button.next.disabled svg,
.dataTables_wrapper .dataTables_paginate a.paginate_button.previous.disabled svg {
    stroke: #646464 !important;
}

.dataTables_wrapper .dataTables_paginate a.paginate_button.last:hover:not(.disabled) svg,
.dataTables_wrapper .dataTables_paginate a.paginate_button.first:hover:not(.disabled) svg,
.dataTables_wrapper .dataTables_paginate a.paginate_button.next:hover:not(.disabled) svg,
.dataTables_wrapper .dataTables_paginate a.paginate_button.previous:hover:not(.disabled) svg {
    -moz-transform: scale(1.1);
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
    filter: drop-shadow(0px 4px 20px rgba(91, 71, 188, 0.3));
    background-color: transparent !important;
    background: rgba(0, 0, 0, 0.0) !important;
}

.dataTables_wrapper .dataTables_length label {
    font-family: "Rubik" !important;
    font-weight: 300 !important;
    font-size: 0.875rem !important;
    line-height: 1rem !important;
    color: var(--color_label) !important;
    text-transform: uppercase !important;
}

.dataTables_wrapper .dataTables_length label select {
    font-family: "Rubik" !important;
    font-weight: 400 !important;
    font-size: 1.25rem !important;
    line-height: 1.5rem !important;
    margin-left: 0.5rem;
    text-align: center;
    color: var(--color_label) !important;
    border-radius: 3.125rem;
    border: 1px solid var(--color_menu);
    padding: 0.375rem 0.375rem !important;
    background-color: white important;
}

.dataTables_wrapper .dataTables_length label select * {
    font-family: "Rubik" !important;
    font-weight: 400 !important;
    font-size: 1.25rem !important;
    line-height: 1.5rem !important;
    color: var(--color_label) !important;
    background-color: white !important;
}


/************************************************************* Custom Tables **/
.admin-tbl,
.admin-tbl tbody,
.admin-tbl thead .admin-tbl thead tr {
    border: 0 !important;
}

.admin-tbl thead tr th {
    border-top: 0 !important;
    border-right: 0 !important;
    border-bottom: 0 !important;
    border-left: 2px solid var(--color_menu);
    background-color: var(--color_counter_bg);
}

.admin-tbl thead tr th:first-child {
    border-left: 0 !important;
}

.admin-tbl tbody tr td {
    border-top: 0 !important;
    border-right: 0 !important;
    border-left: 2px solid var(--color_menu);
    border-bottom: 1px solid var(--color_menu);
}

.admin-tbl tbody tr td:first-child {
    border-left: 0 !important;
}

.clerk-tbl {
    border: 0.8px solid var(--color_menu);
}

.clerk-tbl tbody {
    border: 0 !important;
}

.clerk-tbl thead .clerk-tbl thead tr {
    border: 0 !important;
}

.clerk-tbl thead tr th {
    border: 0.8px solid var(--color_menu) !important;
    background-color: var(--color_counter_bg) !important;
}

.clerk-tbl tbody tr td {
    border: 0.8px solid var(--color_menu) !important;
}

.clerk-tbl tbody tr td hr {
    width: 2.938rem !important;
    color: var(--color_sttl) !important;
    opacity: 1.0 !important;
    margin: auto !important;
}

.clerk-hist-tbl {
    border-radius: 1.875rem;
    overflow: hidden;
    padding: 0;
    margin: 0;
    box-shadow: 0px 4px 20px 0px rgba(91, 71, 188, 0.30);
}

.clerk-hist-tbl tbody,
.clerk-hist-tbl thead {
    border: 0 !important;
}

.clerk-hist-tbl tbody tr td hr {
    width: 2.938rem !important;
    color: var(--color_sttl) !important;
    opacity: 1.0 !important;
    margin: auto !important;
}

.clerk-hist-tbl thead tr th {
    background-color: var(--color_counter_bg);
    border-top: 0 !important;
    border-right: 0 !important;
    border-left: 1px solid var(--color_menu);
    border-bottom: 1px solid var(--color_menu);
}

.clerk-hist-tbl thead tr th:first-child {
    border-radius: 1.875rem 0 0 0;
    border-left: 0 !important;
}

.clerk-hist-tbl thead tr th:last-child {
    border-radius: 0 1.875rem 0 0;
    border-right: 0 !important;
}

.clerk-hist-tbl tbody tr td {
    border-top: 0 !important;
    border-right: 0 !important;
    border-left: 1px solid var(--color_menu);
    border-bottom: 1px solid var(--color_menu);
}

.clerk-hist-tbl tbody tr td:first-child {
    border-left: 0 !important;
}

.clerk-hist-tbl tbody tr:last-child td {
    border-bottom: 0 !important;
}

.clerk-hist-tbl tbody tr:last-child td:first-child {
    border-radius: 0 0 0 1.875rem;
}

.clerk-hist-tbl tbody tr:last-child td:last-child {
    border-radius: 0 0 1.875rem 0;
}

.clerk-resume-tbl {
    border-radius: 0 0 1.875rem 1.875rem !important;
    box-shadow: 0px 4px 20px 0px rgba(91, 71, 188, 0.30);
}

.clerk-resume-tbl thead tr th {
    border-top: none;
    border-left: none;
    border-right: 0.8px solid var(--color_menu);
    border-bottom: 0.8px solid var(--color_menu);
    background-color: var(--color_counter_bg);
}

.clerk-resume-tbl thead tr th:last-child {
    border-right: none;
}

.clerk-resume-tbl tbody tr:nth-child(even) td {
    background-color: var(--color_counter_bg);
}

.clerk-resume-tbl tbody tr:nth-child(odd) td {
    background-color: white;
}

.clerk-resume-tbl tbody tr td {
    border-top: none;
    border-left: none;
    border-right: 0.8px solid var(--color_menu);
    border-bottom: 0.8px solid var(--color_menu);
}

.clerk-resume-tbl tbody tr td:last-child {
    border-right: none;
}

.clerk-resume-tbl tbody tr:last-child td {
    border-bottom: none !important;
}

.clerk-resume-tbl tbody tr:last-child td:first-child {
    border-radius: 0 0 0 1.875rem !important;
}

.clerk-resume-tbl tbody tr:last-child td:last-child {
    border-radius: 0 0 1.875rem 0 !important;
}

.report-tbl {
    width: 100%;
    border-collapse: collapse;
}

.report-tbl tr th {
    height: 3.125rem;
    text-align: center;
    vertical-align: middle;
    border: 1px solid var(--color_menu);
    background-color: var(--color_counter_bg);
    font-family: "Rubik";
    font-weight: 500;
    font-size: 1.250rem;
    line-height: 1.500rem;
    color: var(--color_menu);
    text-transform: uppercase;
}

.report-tbl tr th:first-child {
    width: 10%;
}

.report-tbl tr th:not(:first-child) {
    width: 22.5%;
}

.report-tbl tr td {
    height: 3.125rem;
    text-align: center;
    vertical-align: middle;
    border: 1px solid var(--color_menu);
    font-family: "Rubik";
    font-weight: 300;
    font-size: 1.125rem;
    line-height: 1.313rem;
    color: var(--color_tbl_info);
}


/********************************************************************** Tabs **/
.tab-group {
    width: 100%;
    height: 3.75rem;
    border-bottom: 3px solid var(--color_counter);
    display: flex;
    justify-content: start;
    box-shadow: 0px 4px 4px -2px #5B47BC4D;
}

.tab-item {
    border-left: 1px solid var(--color_counter);
    border-top: 1px solid var(--color_counter);
    border-right: 1px solid var(--color_counter);
    border-bottom: none;
    width: 15rem;
    height: 100%;
    font-size: 1.25rem !important;
    line-height: 1.5rem !important;
    text-transform: uppercase;
    display: flex;
    justify-content: center;
    align-content: center;
    border-radius: 1.875rem 1.875rem 0 0;
    font-weight: 300;
    color: var(--color_counter);
    background-color: white;
    cursor: pointer;
    margin-right: 3rem;
}

.tab-item.active {
    font-weight: 500 !important;
    color: white !important;
    background-color: var(--color_counter) !important;
    cursor: default !important;
}


/****************************************************************** Calendar **/
.calendar-card {
    border: 1px solid var(--color_menu);
    border-radius: 0.875rem;
    box-shadow: 0px 4px 20px 0px #5B47BC4D;
    width: 100%;
    padding: 0.875rem;
}

.calendar-card-ttl {
    border-bottom: 1px solid var(--color_menu);
    padding: 1.5rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
}

.calendar-card-ttl span {
    color: var(--color_ttl);
    text-align: center;
    vertical-align: middle;
    text-transform: uppercase;
    font-family: "Rubik";
    font-weight: 600;
    font-size: 1.375rem;
    line-height: 1.625rem;
}

.calendar-card-sttl {
    height: 2rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.calendar-card-sttl span {
    width: 14% !important;
    margin: auto;
    vertical-align: middle !important;
    text-align: center !important;
    font-family: "Rubik";
    font-weight: 600;
    font-size: 1.25rem;
    line-height: 1.5rem;
    color: var(--color_counter);
}

.calendar-card-days {
    height: 2rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.calendar-card-days>div {
    width: 14% !important;
    height: 100% !important;
    position: relative;
    display: flex !important;
    justify-content: center !important;
    align-items: center;
    align-items: center !important;
    font-family: "Rubik";
    font-weight: 500;
    font-size: 1.125rem;
    line-height: 1.313rem;
    color: var(--color_label);
}

.calendar-td {
    width: 2.25rem !important;
    height: 2.25rem !important;
    margin: 0 !important;
    padding: 0 !important;
}

.calendar-team-td {
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    position: relative;
    display: flex !important;
    justify-content: center !important;
    align-items: center;
    align-items: center !important;
}

.calendar-team-td>label {
    z-index: 999 !important;
    margin: auto !important;
    font-family: "Rubik";
    font-weight: 300;
    font-size: 0.875rem;
    line-height: 1.185rem;
}

.calendar-card-days>div>label {
    z-index: 999 !important;
    margin: auto !important;
    font-family: "Rubik";
    font-weight: 500;
    font-size: 1.125rem;
    line-height: 1.313rem;
}

.calendar-team-td>label.text-swhite,
.calendar-card-days>div>label.text-swhite {
    background: linear-gradient(to right, #FFFFFF, var(--color_label));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.calendar-team-td>label.text-ewhite,
.calendar-card-days>div>label.text-ewhite {
    background: linear-gradient(to left, #FFFFFF, var(--color_label));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.calendar-team-td>span,
.calendar-card-days>div>span {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 998 !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center;
    align-items: center !important;
}

.calendar-card-days>div>span.d-now>div {
    max-width: 100%;
    width: 100%;
    height: 98%;
    aspect-ratio: 1 / 1;
    z-index: 998 !important;
    /* border-radius: 50%; */
    background-color: var(--color_timeoff_now) !important;
    margin: auto !important;
}

.calendar-card-days>div>span.d-holiday>div {
    max-width: 100%;
    width: 100%;
    height: 98%;
    aspect-ratio: 1 / 1;
    z-index: 998 !important;
    /* border-radius: 50%; */
    background-color: var(--color_timeoff_holiday) !important;
    margin: auto !important;
}

.calendar-team-td>span.d-off1>div,
.calendar-card-days>div>span.d-off1>div {
    width: 1.96rem;
    height: 1.96rem;
    z-index: 998 !important;
    border-radius: 50%;
    background-color: var(--color_timeoff_type_1) !important;
    margin: auto !important;
}

.calendar-team-td>span.d-off1-m div,
.calendar-card-days>div>span.d-off1-m div {
    width: 100%;
    height: 1.96rem;
    z-index: 998 !important;
    background-color: var(--color_timeoff_type_1) !important;
    margin: auto !important;
}

.calendar-team-td>span.d-off1-e div,
.calendar-card-days>div>span.d-off1-e div {
    width: 100%;
    height: 1.96rem;
    z-index: 998 !important;
    border-radius: 0 0.98rem 0.98rem 0;
    background-color: var(--color_timeoff_type_1) !important;
    margin: auto auto auto 0 !important;
}

.calendar-team-td>span.d-off1-s div,
.calendar-card-days>div>span.d-off1-s div {
    width: 100%;
    height: 1.96rem;
    aspect-ratio: 1 / 1;
    z-index: 998 !important;
    border-radius: 0.98rem 0 0 0.98rem;
    background-color: var(--color_timeoff_type_1) !important;
    margin: auto 0 auto auto !important;
}

.calendar-team-td>span.d-off1-ee div,
.calendar-card-days>div>span.d-off1-ee div {
    width: 0.98rem;
    height: 1.96rem;
    aspect-ratio: 1 / 1;
    z-index: 998 !important;
    border-radius: 0 0.98rem 0.98rem 0;
    background-color: var(--color_timeoff_type_1) !important;
    margin: auto auto auto 50% !important;
}

.calendar-team-td>span.d-off1-ss div,
.calendar-card-days>div>span.d-off1-ss div {
    width: 0.98rem;
    height: 1.96rem;
    aspect-ratio: 1 / 1;
    z-index: 998 !important;
    border-radius: 0.98rem 0 0 0.98rem;
    background-color: var(--color_timeoff_type_1) !important;
    margin: auto 50% auto auto !important;
}

.calendar-team-td>span.d-off2>div,
.calendar-card-days>div>span.d-off2>div {
    width: 1.96rem;
    height: 1.96rem;
    z-index: 998 !important;
    border-radius: 50%;
    background-color: var(--color_timeoff_type_2) !important;
    margin: auto !important;
}

.calendar-team-td>span.d-off2-m div,
.calendar-card-days>div>span.d-off2-m div {
    width: 100%;
    height: 1.96rem;
    z-index: 998 !important;
    background-color: var(--color_timeoff_type_2) !important;
    margin: auto !important;
}

.calendar-team-td>span.d-off2-e div,
.calendar-card-days>div>span.d-off2-e div {
    width: 100%;
    height: 1.96rem;
    z-index: 998 !important;
    border-radius: 0 0.98rem 0.98rem 0;
    background-color: var(--color_timeoff_type_2) !important;
    margin: auto auto auto 0 !important;
}

.calendar-team-td>span.d-off2-s div,
.calendar-card-days>div>span.d-off2-s div {
    width: 100%;
    height: 98%;
    aspect-ratio: 1 / 1;
    z-index: 998 !important;
    border-radius: 0.98rem 0 0 0.98rem;
    background-color: var(--color_timeoff_type_2) !important;
    margin: auto 0 auto auto !important;
}

.calendar-team-td>span.d-off2-ee div,
.calendar-card-days>div>span.d-off2-ee div {
    width: 0.98rem;
    height: 1.96rem;
    aspect-ratio: 1 / 1;
    z-index: 998 !important;
    border-radius: 0 0.98rem 0.98rem 0;
    background-color: var(--color_timeoff_type_2) !important;
    margin: auto auto auto 50% !important;
}

.calendar-team-td>span.d-off2-ss div,
.calendar-card-days>div>span.d-off2-ss div {
    width: 0.98rem;
    height: 1.96rem;
    aspect-ratio: 1 / 1;
    z-index: 998 !important;
    border-radius: 0.98rem 0 0 0.98rem;
    background-color: var(--color_timeoff_type_2) !important;
    margin: auto 50% auto auto !important;
}

.calendar-team-td>span.d-off3>div,
.calendar-card-days>div>span.d-off3>div {
    width: 1.96rem;
    height: 1.96rem;
    z-index: 998 !important;
    border-radius: 50%;
    background-color: var(--color_timeoff_type_3) !important;
    margin: auto !important;
}

.calendar-team-td>span.d-off3-m div,
.calendar-card-days>div>span.d-off3-m div {
    width: 100%;
    height: 1.96rem;
    z-index: 998 !important;
    background-color: var(--color_timeoff_type_3) !important;
    margin: auto !important;
}

.calendar-team-td>span.d-off3-e div,
.calendar-card-days>div>span.d-off3-e div {
    width: 100%;
    height: 1.96rem;
    z-index: 998 !important;
    border-radius: 0 0.98rem 0.98rem 0;
    background-color: var(--color_timeoff_type_3) !important;
    margin: auto auto auto 0 !important;
}

.calendar-team-td>span.d-off3-s div,
.calendar-card-days>div>span.d-off3-s div {
    width: 100%;
    height: 98%;
    aspect-ratio: 1 / 1;
    z-index: 998 !important;
    border-radius: 0.98rem 0 0 0.98rem;
    background-color: var(--color_timeoff_type_3) !important;
    margin: auto 0 auto auto !important;
}

.calendar-team-td>span.d-off3-ee div,
.calendar-card-days>div>span.d-off3-ee div {
    width: 0.98rem;
    height: 1.96rem;
    aspect-ratio: 1 / 1;
    z-index: 998 !important;
    border-radius: 0 0.98rem 0.98rem 0;
    background-color: var(--color_timeoff_type_3) !important;
    margin: auto auto auto 50% !important;
}

.calendar-team-td>span.d-off3-ss div,
.calendar-card-days>div>span.d-off3-ss div {
    width: 0.98rem;
    height: 1.96rem;
    aspect-ratio: 1 / 1;
    z-index: 998 !important;
    border-radius: 0.98rem 0 0 0.98rem;
    background-color: var(--color_timeoff_type_3) !important;
    margin: auto 50% auto auto !important;
}

.calendar-team-td>span.d-off4>div,
.calendar-card-days>div>span.d-off4>div {
    width: 1.96rem;
    height: 1.96rem;
    z-index: 998 !important;
    border-radius: 50%;
    background-color: var(--color_timeoff_type_4) !important;
    margin: auto !important;
}

.calendar-team-td>span.d-off4-m div,
.calendar-card-days>div>span.d-off4-m div {
    width: 100%;
    height: 1.96rem;
    z-index: 998 !important;
    background-color: var(--color_timeoff_type_4) !important;
    margin: auto !important;
}

.calendar-team-td>span.d-off4-e div,
.calendar-card-days>div>span.d-off4-e div {
    width: 100%;
    height: 1.96rem;
    z-index: 998 !important;
    border-radius: 0 0.98rem 0.98rem 0;
    background-color: var(--color_timeoff_type_4) !important;
    margin: auto auto auto 0 !important;
}

.calendar-team-td>span.d-off4-s div,
.calendar-card-days>div>span.d-off4-s div {
    width: 100%;
    height: 98%;
    aspect-ratio: 1 / 1;
    z-index: 998 !important;
    border-radius: 0.98rem 0 0 0.98rem;
    background-color: var(--color_timeoff_type_4) !important;
    margin: auto 0 auto auto !important;
}

.calendar-team-td>span.d-off4-ee div,
.calendar-card-days>div>span.d-off4-ee div {
    width: 0.98rem;
    height: 1.96rem;
    aspect-ratio: 1 / 1;
    z-index: 998 !important;
    border-radius: 0 0.98rem 0.98rem 0;
    background-color: var(--color_timeoff_type_4) !important;
    margin: auto auto auto 50% !important;
}

.calendar-team-td>span.d-off4-ss div,
.calendar-card-days>div>span.d-off4-ss div {
    width: 0.98rem;
    height: 1.96rem;
    aspect-ratio: 1 / 1;
    z-index: 998 !important;
    border-radius: 0.98rem 0 0 0.98rem;
    background-color: var(--color_timeoff_type_4) !important;
    margin: auto 50% auto auto !important;
}

.d-now-tooltip .tooltip-inner {
    color: white;
    padding: 0.5rem 1rem !important;
    border-radius: 1.875rem !important;
    background-color: var(--color_timeoff_now) !important;
}

.d-holiday-tooltip .tooltip-inner {
    color: white;
    padding: 0.5rem 1rem !important;
    border-radius: 1.875rem !important;
    background-color: var(--color_timeoff_holiday) !important;
}

.d-off1-tooltip .tooltip-inner {
    color: white;
    padding: 0.5rem 1rem !important;
    border-radius: 1.875rem !important;
    background-color: var(--color_timeoff_type_1) !important;
}

.d-off2-tooltip .tooltip-inner {
    color: white;
    padding: 0.5rem 1rem !important;
    border-radius: 1.875rem !important;
    background-color: var(--color_timeoff_type_2) !important;
}

.d-off3-tooltip .tooltip-inner {
    color: white;
    padding: 0.5rem 1rem !important;
    border-radius: 1.875rem !important;
    background-color: var(--color_timeoff_type_3) !important;
}

.d-off4-tooltip .tooltip-inner {
    color: white;
    padding: 0.5rem 1rem !important;
    border-radius: 1.875rem !important;
    background-color: var(--color_timeoff_type_4) !important;
}

/****************************************************** Dynamic absence type css start **/

.d-off-tooltip .tooltip-inner {
    color: white;
    padding: 0.5rem 1rem !important;
    border-radius: 1.875rem !important;
    background-color: var(--color_timeoff_type_1) !important;
}


/*.calendar-team-td>span.d-off>div,*/
.calendar-card-days>div>span.d-off>div {
    width: 100%;
    height: 1.96rem;
    z-index: 998 !important;
    /* border-radius: 50%; */
    /* background-color: var(--color_timeoff_type_3) !important; */
    margin: auto !important;
}

.calendar-card-days>div>span.d-off-ss div {
    width: 50%;
    height: 1.96rem;
    aspect-ratio: 1 / 1;
    z-index: 998 !important;
    /* border-radius: 0.98rem 0 0 0.98rem; */
    /* background-color: var(--color_timeoff_type_4) !important; */
    margin: auto 50% auto auto !important;
}


.calendar-card-days>div>span.d-off-ee div {
    width: 50%;
    height: 1.96rem;
    aspect-ratio: 1 / 1;
    z-index: 998 !important;
    /* border-radius: 0 0.98rem 0.98rem 0; */
    /* background-color: var(--color_timeoff_type_4) !important; */
    margin: auto auto auto 50% !important;
}


.calendar-card-days>div>span.d-off-s div {
    width: 100%;
    height: 1.96rem;
    aspect-ratio: 1 / 1;
    z-index: 998 !important;
    /* border-radius: 0.98rem 0 0 0.98rem; */
    /* background-color: var(--color_timeoff_type_4) !important; */
    margin: auto 0 auto auto !important;
}


.calendar-card-days>div>span.d-off-m div {
    width: 100%;
    height: 1.96rem;
    z-index: 998 !important;
    /* background-color: var(--color_timeoff_type_4) !important; */
    margin: auto !important;
}


.calendar-card-days>div>span.d-off-e div {
    width: 100%;
    height: 1.96rem;
    z-index: 998 !important;
    /* border-radius: 0 0.98rem 0.98rem 0; */
    /* background-color: var(--color_timeoff_type_4) !important; */
    margin: auto auto auto 0 !important;
}



.calendar-card-days>div>span.d-off-sss div {
    width: 48%;
    height: 1.96rem;
    aspect-ratio: 1 / 1;
    z-index: 998 !important;
    /* border-radius: 0 0.98rem 0.98rem 0; */
    /* background-color: var(--color_timeoff_type_4) !important; */
    margin: auto 52% auto auto !important;
}


.calendar-card-days>div>span.d-off-eee div {
    width: 52%;
    height: 1.96rem;
    aspect-ratio: 1 / 1;
    z-index: 998 !important;
    /* border-radius: 0.98rem 0 0 0.98rem; */
    /* background-color: var(--color_timeoff_type_4) !important; */
    margin: auto auto auto 48% !important;
}


.calendar-team-td>span.d-off>div {
    width: 100%;
    height: 100%;
    z-index: 998 !important;
    margin: auto !important;
}

.calendar-team-td>span.d-off-ss div {
    width: 50%;
    height: 100%;
    aspect-ratio: 1 / 1;
    z-index: 998 !important;
    margin: auto 50% auto auto !important;
}

.calendar-team-td>span.d-off-ee div {
    width: 50%;
    height: 100%;
    aspect-ratio: 1 / 1;
    z-index: 998 !important;
    margin: auto auto auto 50% !important;
}



.calendar-team-td>span.d-off-s div {
    width: 100%;
    height: 100%;
    aspect-ratio: 1 / 1;
    z-index: 998 !important;
    margin: auto 0 auto auto !important;
}

.calendar-team-td>span.d-off-m div {
    width: 100%;
    height: 100%;
    z-index: 998 !important;
    margin: auto !important;
}

.calendar-team-td>span.d-off-e div {
    width: 100%;
    height: 100%;
    z-index: 998 !important;
    margin: auto auto auto 0 !important;
}

.calendar-team-td>span.d-off-sss div {
    width: 48%;
    height: 100%;
    aspect-ratio: 1 / 1;
    z-index: 998 !important;
    margin: auto 52% auto auto !important;
}

.calendar-team-td>span.d-off-eee div {
    width: 52%;
    height: 100%;
    aspect-ratio: 1 / 1;
    z-index: 998 !important;
    margin: auto auto auto 48% !important;
}

/* abc */
/****************************************************** Dynamic absence type css end **/

/*********************************************************** Custom DropDown **/

.select-box-b {
    height: 3.125rem;
    border-radius: 1.875rem;
    background: #FFFFFF !important;
    border: 1px solid var(--color_menu) !important;
}

.select-box {
    height: 3.125rem;
    /* border-radius: 1.875rem; */
    background: #FFFFFF !important;
    border-bottom: 1px solid var(--color_menu) !important;
}

.select-box>div:first-child {
    position: relative;
    cursor: pointer !important;
    height: 100%;
    padding-left: 1.563rem !important;
    padding-right: 1.563rem !important;
}

.select-box>div:first-child svg {
    position: absolute;
    right: 1.563rem;
    top: 32%;
    height: 36%;
    pointer-events: none;
}

.select-box>div:first-child span {
    font-family: "Rubik" !important;
    font-weight: 400 !important;
    font-size: 1.25rem !important;
    line-height: 1.5rem !important;
    color: var(--color_sttl) !important;
}

.select-box>div:first-child:hover span {
    outline: none !important;
    color: var(--color_menu) !important;
}

.select-box>div:first-child:hover svg {
    filter: drop-shadow(0px 4px 4px rgba(80, 80, 80, 0.2)) !important;
}

.select-box>div:last-child {
    padding: 0.75rem 1.563rem !important;
}

.select-box>div:last-child span {
    font-family: "Rubik" !important;
    font-weight: 400 !important;
    font-size: 1.25rem !important;
    line-height: 1.5rem !important;
    text-align: start;
    color: var(--color_label);
    cursor: pointer !important;
    padding: 0.75rem 0 !important;
}

.select-box>div:last-child span:hover {
    color: var(--color_menu) !important;
    text-shadow: 0px 4px 4px rgba(80, 80, 80, 0.2);
}

.select-box>div:last-child span.active {
    color: var(--color_menu) !important;
}

.select-box.open {
    border-radius: 0.9375rem 0.9375rem 0 0 !important;
}

.select-box.open svg {
    transform: rotate(180deg);
}

.select-box.open>div:last-child {
    position: relative;
    z-index: 1050 !important;
    border: 1px solid #4890AD !important;
    background-color: #FFFFFF !important;
    border-radius: 0 0 0.9375rem 0.9375rem !important;
    width: calc(100% + 2px) !important;
    margin-left: -1px !important;
}

/* .select-box.close {
    border-radius: 3.125rem !important;
} */

.select-box.close>div:last-child {
    display: none !important;
}

.dropdown-menu {
    --bs-dropdown-padding-y: 0;
    --bs-dropdown-min-width: 1rem !important;

    background: transparent !important;
    z-index: 1060 !important;
    border: 0 !important;
}

.select-box-ft.open>div:last-child {
    width: calc(119% + 3px) !important;
    margin-left: -12px !important;
}

.dropdown-menu .dropdown-item {}


/***************************************************************** Utilities **/
.loading {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1080;
    background-color: rgba(255, 255, 255, 0.9);
}

.img-editable {
    position: relative;
    display: inline-block;
}

.img-editable a {
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1rem;
    z-index: 999;
    padding: 0;
    margin: 0;
    color: #646464;
    font-family: "Rubik" !important;
    font-weight: 400 !important;
    font-size: 0.750rem !important;
    line-height: 0.875rem !important;
    text-decoration: none !important;
    text-align: center;
}

.img-editable a:hover {
    font-weight: 500 !important;
    filter: drop-shadow(0px 4px 4px rgba(80, 80, 80, 0.2)) !important;
}

.img-editable img {
    object-fit: cover;
    aspect-ratio: 1/1;
    width: 100%;
    max-width: 100%;
    max-height: 100%;
    padding: 0;
    margin: 0;
    border: 1px solid rgba(119, 119, 119, 0.2)
        /*#02627E*/
    ;
}

.img-editable img.active {
    object-fit: cover;
    cursor: pointer;
    width: 100%;
    max-width: 100%;
    max-height: 100%;
    padding: 0;
    margin: 0;
    border: 3px solid #4890AD;
    box-shadow: 0px 12px 24px -12px rgba(125, 125, 125, 0.4);
}

.img-editable span {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 999;
    padding: 0;
    margin: 0;
    text-decoration: none !important;
    text-align: center;
    color: var(--color_label);
    font-family: "Rubik" !important;
    font-weight: 300 !important;
    font-size: 0.875rem !important;
    line-height: 1.000rem !important;
}


img.state-A {
    object-fit: cover !important;
    aspect-ratio: 1/1 !important;
    border: 1px solid var(--color_counter);
}

img.state-C {
    object-fit: cover !important;
    aspect-ratio: 1/1 !important;
    border: 1px solid var(--color_menu);
}

img.state-I {
    object-fit: cover !important;
    aspect-ratio: 1/1 !important;
    border: 1px solid var(--color_failure);
}

.drp-buttons {
    border: 0 !important;
    display: flex !important;
    justify-content: end !important;
    align-content: center !important;
}

.drp-selected {
    display: none !important;
}

.daterangepicker {
    background-color: #FFF !important;
    border-radius: 0.875rem !important;
    border: 1px solid #4890AD !important;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25) !important;
}

.calendar-table table.table-condensed thead tr:first-child th {
    border-bottom: 1px solid #4890AD !important;
}

.rotate-cw {
    transform: rotate(90deg) !important;
    transform-origin: 50% 50%;
}

.rotate-acw {
    transform: rotate(-90deg) !important;
    transform-origin: 50% 50%;
}

.d-flex-end {
    display: flex !important;
    align-content: center !important;
    justify-content: end !important;
}

.d-flex-start {
    display: flex !important;
    align-content: center !important;
    justify-content: start !important;
}

.d-flex-center {
    display: flex !important;
    align-content: center !important;
    justify-content: center !important;
}

.d-flex-around {
    display: flex !important;
    align-content: center !important;
    justify-content: space-around !important;
}

.d-flex-between {
    display: flex !important;
    align-content: center !important;
    justify-content: space-between !important;
}

.modal-content {
    font-family: "Rubik" !important;
    font-weight: 600;
    font-size: 1.563rem;
    line-height: 1.875rem;
    text-align: center;
    padding: 2.25rem !important;
    border-radius: 2.25rem !important;
    box-shadow: 0px 4px 20px rgba(91, 71, 188, 0.3);
    color: var(--color_primary) !important;
}

.z-index-1090 {
    /* loading */
    z-index: 1090 !important;
}

.z-index-1080 {
    /* modal */
    z-index: 1080 !important;
}

.z-index-1070 {
    /* navbar */
    z-index: 1070 !important;
}

.z-index-1060 {
    /* dialogs */
    z-index: 1060 !important;
}

.z-index-999 {
    /* export */
    z-index: 999 !important;
}

.iti {
    width: 100% !important;
}

#ec_phone,
#phone {
    padding-left: 52px !important;
}

input[type="radio"] {
    display: none;

    &:not(:disabled)~label {
        cursor: pointer;
    }

    &:disabled~label {
        color: hsla(150, 5%, 75%, 1);
        border-color: hsla(150, 5%, 75%, 1);
        box-shadow: none;
        cursor: not-allowed;
    }
}

.label_clerk {
    /* display: block; */
    color: var(--color_ttl);
    background: white;
    border: 1px solid #4890AD;
    border-radius: 20px;
    padding: 0.3125rem 1.25rem;
    /* margin-bottom: 1rem; */

    text-align: center;
    box-shadow: 0px 3px 10px -2px hsla(150, 5%, 65%, 0.5);
    position: relative;
}

input[type="radio"]:checked+label {
    background: var(--color_ttl);
    color: white;
    /* box-shadow: 0px 0px 10px var(--color_ttl); */
}



.timeoff-config1 {
    background-color: var(--color_timeoff_type_1) !important;
}

.timeoff-config2 {
    background-color: var(--color_counter) !important;
}

.d-used-tooltip .tooltip-inner {
    color: white;
    padding: 0.5rem 1rem !important;
    border-radius: 1.875rem !important;
    background-color: var(--color_timeoff_type_1) !important;
}

.d-pending-tooltip .tooltip-inner {
    color: white;
    padding: 0.5rem 1rem !important;
    border-radius: 1.875rem !important;
    background-color: var(--color_counter) !important;
}

.menu-gest {
    border-bottom: 2px solid var(--color_label);
}

.mw-141 {
    max-width: 141px;
}

.stype_label {
    color: var(--color_ttl);
    /* background: white; */
    border: 1px solid #4890AD;
    border-radius: 10px;
    width: 49%;
    padding: 0.3125rem 1.25rem;
    text-transform: uppercase;

    text-align: center;
    box-shadow: 0px 3px 10px -2px hsla(150, 5%, 65%, 0.5);
    position: relative;
}

input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Hide arrows in input type number for Firefox */
input[type="number"] {
    -moz-appearance: textfield;
}

.btn-add-i .tooltip-inner {
    font-family: "Rubik";
    font-weight: 400;
    text-decoration: none;
    text-transform: uppercase;
    color: white;
    background-color: var(--color_counter);
    border-radius: 1.875rem;
}

.tbl-checkbox {
    width: 20px !important;
    height: 20px !important;
}

.filter_add {
    position: relative;
    height: 100%;
    cursor: pointer;
    aspect-ratio: 1 / 1 !important;
    background-color: var(--color_counter);
    border-radius: 50% !important;
    overflow: hidden;
}

.filter_add svg {
    position: absolute;
    height: 60% !important;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.b-cancel {
    border: 1px solid var(--color_menu)
}

.select-box-type>div:first-child {

    padding-left: 0px !important;
    padding-right: 0px !important;
}

.select-box-type>div:first-child svg {
    right: 0rem;
}

.minw-15 {
    min-width: 15rem !important;
}

.dropd-label {
    font-family: "Rubik" !important;
    font-weight: 400 !important;
    font-size: 1.000rem !important;
    line-height: 1.125rem !important;
    color: var(--color_label)
}

.bg-notice {
    background-color: #E8E8E8 !important;
    border-radius: 5px;
}

.bg-past-notice {
    background-color: #E8E8E8;
}

.bg-fut-notice {
    background-color: #9FE2BF;
}

.h-500 {
    height: 500px;
}

.notice-b-top {
    border-top: 3px solid var(--color_menu);
}

.notice-disabled {
    pointer-events: none;
    opacity: 0.7;
}

.clerk-dh>div:first-child {
    /* border: 0.8px solid var(--color_menu) !important; */
    background-color: var(--color_counter_bg) !important;
}

.clerk-ds,
.clerk-ds-2 {
    border-bottom: 1px solid var(--color_menu) !important;
}

.clerk-ds-1 {
    border-right: 1px solid var(--color_menu) !important;
    border-bottom: 1px solid var(--color_menu) !important;
    border-top-left-radius: 1.875rem !important;
}

/* .clerk-ds-2 {
    border-bottom: 1px solid var(--color_menu) !important;
} */

.clerk-ds-4 {
    border-right: 1px solid var(--color_menu) !important;
}

.mt--15 {
    margin-top: -15px;
}

.ds-alert [class*="col-"] {
    margin-bottom: 100%;
    padding-bottom: 100%;
}

.ds-alert {
    /* overflow: hidden; */
}

.config-card-header {
    padding: 1.125rem 2.25rem;
    border-top-left-radius: 2.25rem;
    border-top-right-radius: 2.25rem;
}

.head-config-allowance {
    border: 1px solid var(--color_menu) !important;
    border-radius: 15px !important;
}

.slider-container {
    position: relative;
}

.slider-value {
    position: absolute;
    bottom: -30px;
    left: 0;
    background: var(--color_menu);
    color: white !important;
    padding: 3px 7px;
    border-radius: 4px;
    font-size: 14px;
    white-space: nowrap;
    transform: translateX(-50%);
    pointer-events: none;
}

.slider-value::after {
    content: "";
    position: absolute;
    top: -6px;
    left: 50%;
    transform: translateX(-50%);
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-bottom: 6px solid var(--color_menu);
}

.py-3-5 {
    padding-top: 1.25rem !important;
    padding-bottom: 1.25rem !important;
}

.edit-icon {
    top: 9%;
    right: 14%;
    cursor: pointer;
    background: rgba(255, 255, 255, 0.8);
    border-radius: 50%;
    padding: 4px 6px;
}

.img-editable-gest {
    position: relative;
}


.radio-group.is-error .stype_label {
    color: var(--color_failure) !important;
    border: 1px solid var(--color_failure) !important;
}

#f_group.is-error {
    border: 1px solid var(--color_failure) !important;
}

.notice-scroll-wrapper {
    overflow-x: auto;
    display: flex;
    padding-bottom: 10px;
}

.my-6 {
    margin-top: 5rem !important;
    margin-bottom: 5rem !important;
}

.notice-box {
    flex: 1 0 auto;
    max-width: 250px;
}

.disable-btn {
    background-color: var(--color_label) !important;
    pointer-events: none;
}