/* Daterangepicker */

.content_dtpick{
    display: flex;
    gap: 12px;
    flex-direction: column;
}

.daterangepicker{
    border-radius: var(--spacing-space-3);
    background: var(--color-neutral-0);
    box-shadow: var(--boxshadow-2);
    border: none;
    margin-top: 0;
    font: var(--font-body-strong);
    color: var(--color-neutral-500);
    width: auto;
    z-index: 10;
}

.daterangepicker.sidesheet-datepicker {
    z-index: 102;
}

.daterangepicker:before, .daterangepicker:after {
    display: none;
}

.daterangepicker .calendar-table table{
    border-spacing: 0 4px;
    border-collapse: separate;
    width: auto;
}

.daterangepicker .drp-calendar{
    max-width: unset;
}

.daterangepicker .drp-calendar.left{
    padding: var(--spacing-space-4);
}

.daterangepicker .drp-calendar.left.single{
    border-right: none;
}

.daterangepicker .drp-calendar.right{
    padding: var(--spacing-space-4);
}

.daterangepicker .container-dates{
    display: inline-flex;
    float: left;
    justify-content: center;
    align-items: center;
}

.daterangepicker .container-dates.mobile{
    float: unset;
}

.daterangepicker .container-dates .first-date, .daterangepicker .container-dates .last-date{
    border-radius: 8px;
    border: 1px solid var(--color-neutral-200);
    background: var(--color-neutral-0);
    padding: 8px 14px;
    text-align: center;
    color: var(--color-neutral-600);
    font: var(--font-body);
}

.daterangepicker .container-dates .dash{
    margin: 0 12px;
    color: var(--color-neutral-400);
    font: var(--font-body);
}

.daterangepicker.single .drp-calendar.right{
    display: none !important;
}

.daterangepicker .container-dates.single{
    width: 100%;
    gap: 12px;
}

.daterangepicker .container-dates.single .first-date{
    width: 100%;
}

.daterangepicker.show-calendar .drp-buttons {
    display: flex;
    justify-content: flex-end;
    gap: var(--spacing-space-3);
    padding: var(--spacing-space-4) var(--spacing-space-3);
}

.daterangepicker td.in-range{
    background-color: var(--color-primary-200);
    color: var(--color-sky900, #002455);
    font: var(--font-caption-medium);
    position: relative;
}

.daterangepicker .calendar-table th, .daterangepicker .calendar-table td{
    box-sizing: border-box;
    width: 32px;
    height: 32px;
    min-width: 32px;
    border: none;
    line-height: unset;
    color: var(--color-neutral-500);
    font: var(--font-caption-medium);
    position: relative;
}

.daterangepicker td.active, .daterangepicker td.active:hover{
    background: var(--color-primary-600);
    border-radius: var( --spacing-space-3); 
    color: var(--color-neutral-0);
    font: var(--font-caption-medium);
    outline: none;
}

.daterangepicker td.active:focus{
  box-shadow: 0px 0px 0px 2px var(--color-neutral-400)
}

.daterangepicker td.off:hover {
    background: unset;
    border: none;
    color: var(--color-neutral-400);
}

.daterangepicker td.available:hover:not(.in-range):not(.active):not(.off) {
    background: var(--color-neutral-100);
    border-radius: var( --spacing-space-3);
    border: none;
}

.daterangepicker td.available.in-range:hover:not(.active):not(.off):not(.today) {
    background: var(--color-primary-200);
    border: none;
}

.daterangepicker td.available.in-range:hover:not(.active):not(.off):not(.today)::before {
    content: '';
    position: absolute;
    width: 80%;
    height: 80%;
    background-color: rgba(21, 30, 40, 0.08); 
    border-radius: var(--spacing-space-3); 
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.daterangepicker td.today.available.in-range:hover:not(.active):not(.off) {
    background-color: var(--color-neutral-100) !important;
    border: 1px solid var(--color-primary-600);
    border-radius: var(--spacing-space-3);
}

.daterangepicker td.today:not(.in-range):not(.active):not(.off) {
    color: var(--color-primary-600) !important;
}

.daterangepicker td.today:hover:not(.in-range):not(.active):not(.off) {
    background-color: var(--color-neutral-100) !important;
}

.daterangepicker td.today.available.in-range:hover:not(.active):not(.off) {
    background-color: var(--color-primary-200) !important;
}

.daterangepicker td.today.available.in-range:hover:not(.active):not(.off)::before {
    content: '';
    position: absolute;
    width: 80%;
    height: 80%;
    background-color: rgba(21, 30, 40, 0.08); 
    border-radius: var(--spacing-space-3); 
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.daterangepicker td.today:focus:not(.in-range):not(.active):not(.off),
.daterangepicker td.today:focus-visible:not(.in-range):not(.active):not(.off)
{
    border: 1px solid var(--color-primary-600) !important;
    background: var(--color-neutral-100) !important;;
    box-shadow: 0px 0px 0px 2px var(--color-neutral-400) !important;;
}

.daterangepicker td.today:active:not(.in-range):not(.active):not(.off) {
    border: 1px solid var(--color-primary-700) !important;
    background: var(--color-neutral-200) !important;
    border-radius: var(--spacing-space-3);
}

.daterangepicker .calendar-table td.today:not(.start-date):not(.end-date):not(.in-range){
    border: 1px solid var(--color-primary-600);
    background-color: transparent;
    border-radius: var( --spacing-space-3);
    color: var(--color-neutral-500);
}

.daterangepicker .calendar-table td.today:not(.start-date):not(.end-date){
    border: 1px solid var(--color-primary-600);
    border-radius: var( --spacing-space-3);
    color: var(--color-neutral-500);
}

.daterangepicker td.today.off {
    border: 1px solid var(--color-neutral-300) !important; 
    color: var(--color-neutral-300) !important;
}

.daterangepicker td.available:focus:not(.in-range):not(.active):not(.off),
.daterangepicker td.available:focus-visible:not(.in-range):not(.active):not(.off) {
    background: var(--color-neutral-100);
    box-shadow: 0px 0px 0px 2px var(--color-neutral-400);
    border-radius: var( --spacing-space-3);
    outline: none;
}

.daterangepicker td.available.focused-key:not(.in-range):not(.active):not(.off),
.daterangepicker td.available.focused-key:not(.in-range):not(.active):not(.off) {
    background: var(--color-neutral-100);
    box-shadow: 0px 0px 0px 2px var(--color-neutral-400);
    border-radius: var( --spacing-space-3);
    outline: none;
}

.daterangepicker td.in-range:focus:not(.in-range):not(.active):not(.off),
.daterangepicker td.in-range:focus-visible:not(.in-range):not(.active):not(.off) {
    background: var(--color-neutral-100);
    box-shadow: 0px 0px 0px 2px var(--color-neutral-400);
    border-radius: var( --spacing-space-3);
    outline: none;
}

.daterangepicker td.in-range:focus:not(.active):not(.off),
.daterangepicker td.in-range:focus-visible:not(.active):not(.off){
    background: var(--color-primary-200);
    border: none;
    outline: none;
}

.daterangepicker td.available.in-range:focus:not(.active):not(.off)::before,
.daterangepicker td.available.in-range:focus-visible:not(.active):not(.off)::before {
    content: '';
    position: absolute;
    width: 80%;
    height: 80%;
    border-radius: var(--spacing-space-3); 
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0px 0px 0px 2px var(--color-neutral-400, #8CA2B5);
}

.daterangepicker td.in-range:active:not(.active):not(.off) {
    background: var(--color-primary-200);
    border: none;
    outline: none;
}

.daterangepicker td.available.in-range:active:not(.active):not(.off)::before {
    content: '';
    position: absolute;
    width: 80%;
    height: 80%;
    background-color: rgba(21, 30, 40, 0.16);
    border-radius: var(--spacing-space-3); 
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.daterangepicker td.available:active:not(.in-range):not(.active):not(.off) {
    background: var(--color-neutral-200);
    border-radius: var( --spacing-space-3);
}

.daterangepicker td.in-range:active:not(.in-range):not(.active):not(.off) {
    background: var(--color-neutral-200);
    border-radius: var( --spacing-space-3);
}

.daterangepicker td.off, .daterangepicker td.off.in-range, .daterangepicker td.off.start-date, .daterangepicker td.off.end-date{
    color: var(--color-neutral-400);
    background-color: unset;
    text-decoration: none;
}

.daterangepicker td.off.disabled {
    color: var(--color-neutral-300) !important;
}

.daterangepicker td.off:hover, .daterangepicker td.off.in-range:hover, .daterangepicker td.off.start-date:hover, .daterangepicker td.off.end-date:hover{
    color: var(--color-neutral-400);
    background-color: unset;
    text-decoration: none;
}

.daterangepicker td.start-date.end-date{
    border-radius: var( --spacing-space-3); 
}

.daterangepicker .drp-buttons {
    border-top: 1px solid var(--color-neutral-200);
}

.daterangepicker .drp-buttons .btn{
    height: 32px;
    padding: var(--spacing-space-2) var(--spacing-space-4);
    border-radius: 8px;
    font: var(--font-body-strong);
    cursor: pointer;
    box-sizing: border-box;
    margin-left: 0px;
}

.daterangepicker th.available{
    width: 32px;
    height: 32px;
    border-radius: 8px;
    font: var(--font-body-strong);
    cursor: pointer;
    box-sizing: border-box;
    background-color: transparent;
    color: var(--color-neutral-500);
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
}

.daterangepicker .calendar-table{
    border: none;
    background-color: unset;
    border-radius: unset;
}

.daterangepicker .calendar-table .prev span, .daterangepicker .calendar-table .next span{
    display: none;
}

.daterangepicker th.prev::before {
    content: "\e138"; 
    font-family: 'Phosphor';
    font-size: 20px;
}

.daterangepicker th.next::before {
    content: "\e13a"; 
    font-family: 'Phosphor';
    font-size: 20px;
}

.daterangepicker th.available:active{
    background-color: var(--color-neutral-100);
    color: var(--color-sky900);
}

.daterangepicker th.available:disabled{
    color: var(--color-neutral-200);
}

.daterangepicker.single .drp-buttons{
    display: flex;
    gap: var(--spacing-space-3);
}

.daterangepicker.single .drp-buttons button{
    width: 100%;
    margin: 0;
}

.daterangepicker .drp-selected{
    display: none;
}

.daterangepicker.show-calendar .ranges{
    margin: 0;
}

.container-daterangepicker{
    position: relative;
}

.container-daterangepicker.mobile{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--color-transparency-dark32);
    z-index: 3000;
    opacity: 1;
    transition: opacity .20s ease-out;
}

.daterangepicker:not(.single) .calendar-table td.start-date:not(.off):before{
    content: '';
    position: absolute;
    width: 50%;
    height: 100%;
    top: 0;
    right: 0;
    background-color: var(--color-primary-200);
    z-index: -1;
}

.daterangepicker:not(.single) .calendar-table td.end-date:not(.off)::before{
    content: '';
    position: absolute;
    width: 50%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: var(--color-primary-200);
    z-index: -1;
}

.monthselect, .yearselect{
    color: var(--color-neutral-500);
    font: var(--font-caption-medium-strong) !important;
    border: 0;
    outline: none;
    cursor: pointer !important;
    border-radius: var(--spacing-space-3);
    height: 100% !important;
    appearance: none; 
    -webkit-appearance: none;
    -moz-appearance: none;
    /* width: 40% !important; */
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M10.0156 4.76531L6.26561 8.51531C6.23078 8.55018 6.18942 8.57784 6.1439 8.59671C6.09837 8.61558 6.04958 8.62529 6.0003 8.62529C5.95101 8.62529 5.90222 8.61558 5.85669 8.59671C5.81117 8.57784 5.76981 8.55018 5.73498 8.51531L1.98498 4.76531C1.93248 4.71287 1.89672 4.64602 1.88222 4.57324C1.86773 4.50046 1.87515 4.42501 1.90356 4.35645C1.93197 4.28789 1.98008 4.22931 2.0418 4.1881C2.10352 4.1469 2.17608 4.12494 2.2503 4.125H9.7503C9.82451 4.12494 9.89707 4.1469 9.95879 4.1881C10.0205 4.22931 10.0686 4.28789 10.097 4.35645C10.1254 4.42501 10.1329 4.50046 10.1184 4.57324C10.1039 4.64602 10.0681 4.71287 10.0156 4.76531Z' fill='%23566A80'/%3E%3C/svg%3E") no-repeat right 5px center;
    background-size: var(--spacing-space-5);
    padding-right: var(--spacing-space-5) !important;
}

.monthselect.datepicker-select, .yearselect.datepicker-select {
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M10.0967 7.64373C10.0683 7.71226 10.0203 7.77084 9.95862 7.81205C9.89696 7.85327 9.82446 7.87528 9.7503 7.8753H2.2503C2.17608 7.87535 2.10352 7.85339 2.0418 7.81219C1.98008 7.77099 1.93197 7.7124 1.90356 7.64384C1.87515 7.57528 1.86773 7.49984 1.88222 7.42705C1.89672 7.35427 1.93248 7.28743 1.98498 7.23498L5.73498 3.48498C5.76981 3.45012 5.81117 3.42246 5.85669 3.40359C5.90222 3.38471 5.95101 3.375 6.0003 3.375C6.04958 3.375 6.09837 3.38471 6.1439 3.40359C6.18942 3.42246 6.23078 3.45012 6.26561 3.48498L10.0156 7.23498C10.068 7.28746 10.1037 7.3543 10.1182 7.42706C10.1326 7.49981 10.1251 7.57522 10.0967 7.64373Z' fill='%23425567'/%3E%3C/svg%3E") no-repeat right 5px center;
    background-size: var(--spacing-space-5)
}

.monthselect {
    width: 40% !important;
}

.yearselect {
    width: 46% !important;
}

.monthselect-wrapper, .year-wrapper {
    position: relative;
    display: inline-block;
}

.monthselect-wrapper i, .year-wrapper i {
    position: absolute;
    top: 50%;
    right: 5px;
    transform: translateY(-50%);
    pointer-events: none;
    font-size: 14px;
}

.daterangepicker select.monthselect {
    margin-right: var(--spacing-space-3);
}

.monthselect option, .yearselect option {
    font: var(--font-caption-medium-strong);
    color: var(--color-neutral-600);
    background: var(--color-neutral-0);
    text-align: center;
}

.monthselect:hover, .yearselect:hover, th.next:hover, th.prev:hover {
    background-color: var(--color-neutral-100) !important;
}

.monthselect:focus, .yearselect:focus, th.next:focus, th.prev:focus {
    background-color: var(--color-neutral-100) !important;
    box-shadow: 0px 0px 0px 2px var(--color-neutral-400);
}

.monthselect:active, .monthselect:focus-visible,
.yearselect:active, .yearselect:focus-visible, 
th.next:focus-visible, th.prev:focus-visible {
    background-color: var(--color-neutral-200) !important;
}

.monthselect:disabled, .yearselect:disabled {
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M10.0156 4.76531L6.26561 8.51531C6.23078 8.55018 6.18942 8.57784 6.1439 8.59671C6.09837 8.61558 6.04958 8.62529 6.0003 8.62529C5.95101 8.62529 5.90222 8.61558 5.85669 8.59671C5.81117 8.57784 5.76981 8.55018 5.73498 8.51531L1.98498 4.76531C1.93248 4.71287 1.89672 4.64602 1.88222 4.57324C1.86773 4.50046 1.87515 4.42501 1.90356 4.35645C1.93197 4.28789 1.98008 4.22931 2.0418 4.1881C2.10352 4.1469 2.17608 4.12494 2.2503 4.125H9.7503C9.82451 4.12494 9.89707 4.1469 9.95879 4.1881C10.0205 4.22931 10.0686 4.28789 10.097 4.35645C10.1254 4.42501 10.1329 4.50046 10.1184 4.57324C10.1039 4.64602 10.0681 4.71287 10.0156 4.76531Z' fill='%23B7C9DF'/%3E%3C/svg%3E") no-repeat right 5px center;
    background-color: var(--color-neutral-0);
    color: var(--color-neutral-300);
    cursor: not-allowed !important;
    background-size: var(--spacing-space-5)
}

.monthselect option:disabled, .yearselect option:disabled {
    color: var(--color-neutral-300);
}

.monthselect::-webkit-scrollbar,
.yearselect::-webkit-scrollbar {
    width: 0.25rem;
}

.monthselect::-webkit-scrollbar-button,
.yearselect::-webkit-scrollbar-button{
    width: 0.25rem;
}

.monthselect::-webkit-scrollbar-track,
.yearselect::-webkit-scrollbar-track {
    border-radius: var(--border-radius-corner-xs, 0px);
    background-color: transparent;
}

.monthselect::-webkit-scrollbar-thumb,
.yearselect::-webkit-scrollbar-thumb {
    border-radius: var(--border-radius-corner-xs, 0px);
    background: var(--color-neutral-300, #B7C9DF);
}

.monthselect::-webkit-scrollbar-thumb:hover,
.yearselect::-webkit-scrollbar-thumb:hover {
    background: var(--color-neutral-400, #8CA2B5);
}

.monthselect::-webkit-scrollbar-thumb:active,
.yearselect::-webkit-scrollbar-thumb:active {
    background: var(--color-neutral-400, #8CA2B5);
}

.monthselect::-webkit-scrollbar-track,
.yearselect::-webkit-scrollbar-track {
    background: var(--color-neutral-100, #F3F4F7);
}

.monthselect::-webkit-scrollbar-track:active,
.yearselect::-webkit-scrollbar-track:active {
    border: 0.5px solid var(--color-neutral-200, #D5DFEC);
    background: var(--color-neutral-100, #F3F4F7);
}

.none-events {
    pointer-events: none !important;
}

.all-events {
    pointer-events: all !important;
}

.daterangepicker.drop-up {
    margin-top: 0 !important;
}

.daterangepicker.up-chip {
    margin-top: -12px !important;
}

@media screen and (max-width: 768px) {
    .daterangepicker{
        top: 50% !important;
        left: 50% !important;
        right: unset !important;
        transform: translate(-50%, -50%) !important;
    }
    .daterangepicker .container-dates .dash{
        margin: 0 8px;
    }
    .daterangepicker .drp-calendar.left{
        border: none;
        padding: var(--spacing-space-5) var(--spacing-space-5) var(--spacing-space-4);
    }
    .daterangepicker .drp-buttons{
        display: flex !important;
        gap: 12px;
    }
    .daterangepicker .drp-buttons .btn{
        margin: 0;
        width: 100%;
        height: 40px;
    }

    .daterangepicker .calendar-table th, .daterangepicker .calendar-table td{
        width: 40px;
        height: 40px;
        min-width: 40px;
    }

    .monthselect, .yearselect{
        font: var(--font-body);
    }

    .daterangepicker.show-calendar .drp-buttons {
        padding: var(--spacing-space-5);
    }

    .drp-buttons:has(.cancelBtn.hiden_btnPick)  {
        border-top: none !important;
        display: none !important;
    }
    
    .drp-buttons:has(.applyBtn.hiden_btnPick) {
        border-top: none !important;
        display: none !important;
    }

    .daterangepicker.up-chip {
        margin-top: 0px !important;
    }

    .container-daterangepicker{
        opacity: 0;
        transition: opacity .20s ease-in;
    }
}

.drp-buttons:has(.cancelBtn.hiden_btnPick)  {
    border-top: none !important;
    display: none;
}

.drp-buttons:has(.applyBtn.hiden_btnPick) {
    border-top: none !important;
    display: none;
}

.applyBtn:has(.hiden_btnPick) ~ .drp-buttons {
    display: none;
}

.hiden_btnPick{
    display: none;
}

.show_btnPick {
    display: block;
    
}

.datepicker-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
    z-index: 999;
    /* display: none; */
    opacity: 0;
    transition: all .45s ease-in;
}

.datepicker-overlay.on-overlay{
    /* display: block; */
    opacity: 1;
    width: 100%;
    height: 100%;
    transition: all .45s ease-out;
}

/* - - - - - - */

@media screen and (max-width: 768px) {
    .monthselect,
    .yearselect {
        background-color: none;
    }

    .monthselect:hover,
    .yearselect:hover {
        background-color: none;
    }

    .monthselect:active,
    .monthselect:focus-visible,
    .yearselect:active,
    .yearselect:focus-visible {
        background-color: var(--color-neutral-200);
    }
}

@media screen and (min-width: 640px) {
    .daterangepicker .drp-calendar.left .calendar-table {
        padding: 0;
    }
}


/* - - time picker - - - */

.ctn-timepicker {
    width: -webkit-fill-available;
    display: flex;
    flex-direction: column;
    align-items: flex-start; 
    max-width: 260px;
}

.ctn-timepicker .label-timepicker {
    font: var(--font-caption-medium-strong);
    letter-spacing: var(--letter-spacing-1);
    margin: 0;
}

.ctn-princ-time {
    display: flex;
    gap: var(--spacing-space-3);
    align-items: center;
    max-width: 350px;
}

.ctn-secnd-time {
    display: flex;
    gap: var(--spacing-space-2);
    align-items: center;
    width: 360px; 
}