.client-page.new-ui .ui-widget.ui-widget-content {
    border: none;
    border-radius: 4px;
    box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.30), 0px 4px 8px 3px rgba(0, 0, 0, 0.15);
    padding: 8px;
}

.client-page.new-ui .ui-datepicker .ui-datepicker-header {
    padding: 8px;
    margin: -8px;
    border: none;
    background-color: var(--lds-color-background-base);
    border-bottom: 1px solid var(--lds-color-border-light);
    display: flex;
}

.client-page.new-ui .ui-datepicker .ui-datepicker-title {
    display: flex;
    column-gap: 12px;
    margin: 0;
    margin-right: 80px;
    line-height: unset;
    width: 100%;
}

.rtl.client-page.new-ui .ui-datepicker .ui-datepicker-title {
    margin-right: 0;
    margin-left: 80px;
}

    .client-page.new-ui .ui-datepicker .ui-datepicker-title select {
        font-weight: 400 !important;
        font-size: 0.8125rem !important;
        line-height: 1.25rem !important;
        font-family: Heebo !important;
        letter-spacing: 0.009375rem !important;
        margin: 0 !important;
        padding: 2px 0 2px 8px;
        border: none;
        height: 28px;
        color: var(--lds-color-icon-base);
        border-radius: 4px;
        width: 40%;
    }  
    
    .rtl.client-page.new-ui .ui-datepicker .ui-datepicker-title select {
        padding: 2px 8px 2px 0;
    }

        .client-page.new-ui .ui-datepicker .ui-datepicker-title select:focus-visible {
            outline: none;
            background-color: var(--lds-color-interaction-focus);
        }

    .client-page.new-ui .ui-datepicker .ui-datepicker-title .select2-container .select2-selection--single .select2-selection__rendered {
        padding-right: 24px !important;
    }   
    
    .rtl.client-page.new-ui .ui-datepicker .ui-datepicker-title .select2-container .select2-selection--single .select2-selection__rendered {
        padding-right: 12px !important;
        padding-left: 24px !important;
    }

    .client-page.new-ui .ui-datepicker .ui-datepicker-title .select2-container--default,
    .client-page.new-ui .ui-datepicker + .select2-container--default {
        z-index: 100000000000 !important;
    }

    .client-page.new-ui .ui-datepicker .ui-datepicker-title .select2-container--default .select2-selection--single {
        background-color: var(--lds-color-background-base);
        border-radius: var(--lds-radius-sm);
    }   
    
    .client-page.new-ui .ui-datepicker .ui-datepicker-title .select2-container--default .select2-selection--single:hover {
        background-color: var(--lds-color-interaction-hover);
    }

        .client-page.new-ui .ui-datepicker .ui-datepicker-title .select2-container--default .select2-selection--single .select2-selection__arrow {
            right: 0;
        }      
        
        .rtl.client-page.new-ui .ui-datepicker .ui-datepicker-title .select2-container--default .select2-selection--single .select2-selection__arrow {
            left: 0;
            right: unset;
        }

.client-page.new-ui .ui-datepicker .ui-datepicker-next {
    right: 0.5rem;
}

.rtl.client-page.new-ui .ui-datepicker .ui-datepicker-next {
    right: unset;
    left: 3rem;
}

    .client-page.new-ui .ui-datepicker .ui-datepicker-next span {
        border: solid var(--lds-color-icon-base);
        border-width: 0px 2px 2px 0;
        display: inline-block;
        padding: 3px;
        transform: rotate(-45deg);
        -webkit-transform: rotate(-45deg);
        background-image: none;
        width: 9px;
        height: 9px;
        margin: -5px -7px;
    }

.client-page.new-ui .ui-datepicker .ui-datepicker-prev {
    right: 3rem;
    left: unset;
}

.rtl.client-page.new-ui .ui-datepicker .ui-datepicker-prev {
    right: unset;
    left: 0.5rem;
}

    .client-page.new-ui .ui-datepicker .ui-datepicker-prev span {
        border: solid var(--lds-color-icon-base);
        border-width: 0px 2px 2px 0;
        display: inline-block;
        padding: 3px;
        transform: rotate(135deg);
        -webkit-transform: rotate(135deg);
        background-image: none;
        width: 9px;
        height: 9px;
        margin: -5px -3px;
    }

.client-page.new-ui .ui-datepicker .ui-datepicker-prev,
.client-page.new-ui .ui-datepicker .ui-datepicker-next {
    top: 10px;
    width: 2rem;
    height: 2rem;
}

    .client-page.new-ui .ui-datepicker .ui-datepicker-next.ui-state-hover,
    .client-page.new-ui .ui-datepicker .ui-datepicker-prev.ui-state-hover {
        background-color: var(--lds-color-interaction-hover);
        border-radius: 50%;
        border: none;
    }

.client-page.new-ui .ui-datepicker th {
    font-weight: 400 !important;
    font-size: 0.75rem !important;
    line-height: 1.125rem !important;
    font-family: Heebo !important;
    letter-spacing: 0.025rem !important;
    color: var(--lds-color-font-weak);
    padding: 3px .3em 16px 0.3em;
}

.client-page.new-ui .ui-datepicker td {
    padding: 0;
}

.client-page.new-ui .ui-datepicker table {
    font-weight: 400 !important;
    font-size: 0.8125rem !important;
    line-height: 1.25rem !important;
    font-family: Heebo !important;
    letter-spacing: 0.009375rem !important;
    margin: 0;
    margin-top: 16px;
}

.client-page.new-ui .ui-state-default,
.client-page.new-ui .ui-widget-content {
    border: none;
    background: var(--lds-color-background-base);
    color: var(--lds-color-font-base);
}

.client-page.new-ui .ui-state-default {
    border-radius: 50%;
}

    .client-page.new-ui .ui-state-default.ui-state-active {
        background: var(--lds-brand-color-primary);
        color: var(--lds-brand-color-on-primary);
    }

    .client-page.new-ui .ui-state-default:not(.ui-state-active).ui-state-hover {
        background: var(--lds-color-interaction-hover);
        color: var(--lds-color-font-base);
    }

    .client-page.new-ui .ui-state-default.ui-state-active.ui-state-hover {
        opacity: 0.74;
    }

.client-page.new-ui .ui-datepicker td span,
.client-page.new-ui .ui-datepicker td a {
    text-align: center;
    height: 2rem;
    width: 2rem;
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}

    .client-page.new-ui .ui-datepicker td a:focus-visible {
        outline: none;
        background-color: var(--lds-color-interaction-focus);
    }

@media only screen and (max-width: 780px) {
    .client-page.new-ui .ui-widget.ui-widget-content {
        width: 22rem;
    }

    .client-page.new-ui .ui-datepicker .ui-datepicker-header {
        padding: 8px 16px;
    }

    .client-page.new-ui .ui-datepicker .ui-datepicker-title {
        margin-right: 88px;
        height: 40px;
    }  
    
    .rtl.client-page.new-ui .ui-datepicker .ui-datepicker-title {
        margin-left: 88px;
        margin-right: 0;
    }

        .client-page.new-ui .ui-datepicker .ui-datepicker-title select2-selection {
            height: 40px;
        }

        .client-page.new-ui .ui-datepicker .ui-datepicker-title .select2-container--default .select2-selection--single .select2-selection__arrow {
            top: 4px;
        }

        .client-page.new-ui .ui-datepicker .ui-datepicker-title .select2-container .select2-selection--single .select2-selection__rendered {
            height: 40px;
            line-height: 36px !important;
        }

            .client-page.new-ui .ui-datepicker .ui-datepicker-title .select2-container .select2-selection--single .select2-selection__rendered:hover {
                background-color: var(--lds-color-interaction-hover);
            }

        .client-page.new-ui .ui-datepicker .ui-datepicker-title .select2-container--default .select2-selection--single {
            height: 40px;
        }   
        
        .client-page.new-ui .ui-datepicker .ui-datepicker-title .select2-container--default .select2-selection--single:active {
            background-color: var(--lds-color-interaction-focus);
        }

        .client-page.new-ui .ui-datepicker .ui-datepicker-title select {
            font-weight: 400 !important;
            font-size: 0.875rem !important;
            line-height: 1.375rem !important;
            letter-spacing: 0.015625rem !important;
            padding: 2px 0 2px 8px;
            height: 28px;
            width: 45%;
        }

    .client-page.new-ui .ui-datepicker .ui-datepicker-prev,
    .client-page.new-ui .ui-datepicker .ui-datepicker-next {
        width: 2.5rem;
        height: 2.5rem;
    }

    .client-page.new-ui .ui-datepicker .ui-datepicker-prev,
    .client-page.new-ui .ui-datepicker .ui-datepicker-next {
        top: 8px;
    }

    .client-page.new-ui .ui-datepicker .ui-datepicker-next {
        right: 0.75rem;
    }

    .client-page.new-ui .ui-datepicker .ui-datepicker-prev {
        right: 3.5rem;
    }

    .client-page.new-ui .ui-datepicker table {
        font-weight: 400 !important;
        font-size: 1rem !important;
        line-height: 1.5rem !important;
        letter-spacing: 0.009375rem !important;
    }

    .client-page.new-ui .ui-datepicker th {
        font-weight: 400 !important;
        font-size: 0.8125rem !important;
        line-height: 1.25rem !important;
        letter-spacing: 0.009375rem !important;
        padding: 3px .3em 16px 0.3em;
    }

    .client-page.new-ui .ui-datepicker td span, .client-page.new-ui .ui-datepicker td a {
        padding: 0.5rem 0.679rem;
        height: 3rem;
        width: 3rem;
    }
}