/** THEME & MOBILE DESIGN **/
    .container_datepicker {
        --dp-color-primary: #3858e9;
        --dp-color-secondary: #3858e94d;
        --dp-color-hover-button: #455e9eb5;
        --dp-color-box-background: #e6e6e6;
    }

    div.box_datepicker {
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        background: var(--dp-color-box-background);
        width: 100%;
        margin: 0 auto;
        border-radius: 45px;
        padding: 15px;
    }

    div.box_datepicker .box_flex_content_front {
        width:100%;
        display: flex;
        justify-content: space-around;
        margin: 20px 0;
    }

    div.box_datepicker .box_date{
        width: 100%;
    }

    div.box_datepicker .box_date input{
        width:80%;
    }

    div.box_datepicker .box-discount {
        width:100%;
    }

    div.box_datepicker .box-button {
        width:50%;
        align-content: end;
    }

    div.box_datepicker .box_content_front {
        height: 72px;
    }

    div.box_datepicker .box_content_front p {
        margin: 0 0 4px 0;
    }

    div.box_datepicker .box_content_front input,
    div.box_datepicker .box_content_front select {
        border-radius: 15px;
        padding: 8px;
        border: none;
    }

    div.box_datepicker .box_flex_content_front .box-adults,
    div.box_datepicker .box_flex_content_front .box-children,
    div.box_datepicker .box_flex_content_front .box-babies {
        width: 115px;
    }

    div.box_datepicker .box_flex_content_front div {
        display: flex;
        flex-wrap: wrap;
        flex-direction: row;
        justify-content: center;
        align-items: center;
    }

    div.box_datepicker .box_flex_content_front .button-action {
        width: 19px;
        padding: 4px;
        border-radius: 12px;
        color: var(--dp-color-primary);
        fill: var(--dp-color-primary);
    }

    div.box_datepicker .box_flex_content_front .button-action:hover {
        background: var(--dp-color-primary);
        color: #fff;
        fill: #fff;
    }

    div.box_datepicker .box_flex_content_front input {
        width: 40px;
        text-align: center;
        background: #fff;
    }

    div.box_datepicker .search_button {
        width:100%;
    }

    div.box_datepicker .search_button svg {
        width: 20px;
        margin-top: 2px;
        fill: #fff;
        color: #fff;
    }



    /** CALENDAR **/
    div.datepicker {
        width:90%;
        background: #fff;
        box-shadow: 1px 8px 10px 2px rgb(142 142 142 / 90%);
        border-radius: 20px;
        border: 1px solid var(--dp-color-primary);
    }

    div.datepicker .datepicker__inner{
        padding:10px;
    }

    div.datepicker table,
    div.datepicker table tbody>tr:nth-child(odd)>td,
    table tbody>tr:nth-child(odd)>th {
        background: #fff;
        border:none;
    }

    div.datepicker table th {
        border: none !important;
        padding: 13px !important;
    }

    div.datepicker table thead th {
        font-size: 1.4em !important;
    }

    div.datepicker table td {
        font-size: 1.4em !important;
    }

    div.datepicker .datepicker__week-name {
        font-weight: bold;
    }

    div.datepicker .datepicker__month-day--selected {
        background-color: var(--dp-color-secondary) !important;
        color: #fff;
    }

    div.datepicker .datepicker__month-day--hovering {
        background-color: rgba(56, 88, 233, .3) !important;
        color: #fff;
    }

    div.datepicker .datepicker__month-day--last-day-selected,
    div.datepicker .datepicker__month-day--first-day-selected {
        background-color: var(--dp-color-primary) !important;
        color: #fff;
    }

    div.datepicker .datepicker__info--selected-label {
        color: #333;
    }

    div.datepicker .datepicker__buttons{display: none !important;}

    div.datepicker button,
    div.container_datepicker button {
        background-color: var(--dp-color-primary);
        border: none;
        border-radius:25px;
        padding:10px 20px;
    }

    div.datepicker .datepicker__clear-button {
        background: #fff;
        color: #000;
        border: 1px solid #000 !important;
    }

    .container_datepicker button:hover,
    div.datepicker .datepicker__clear-button:hover {
        background-color: var(--dp-color-hover-button);
    }


    @media (min-width:320px){
        div.datepicker{
            flex-direction: space-evenly;
            align-items: center;
        }
    
        div.datepicker .datepicker__inner{
            padding:8px;
        }

        div.datepicker table th{
            padding: 9px !important
        }
    }

    @media (min-width: 569px) {
    
        div.box_datepicker{
            align-items: center;
            justify-content: space-around;
        }

        div.box_datepicker .box_date{
            width:40%;
        }

        div.box_datepicker .box_date input{
            width:200px;
        }

        div.box_datepicker .box_flex_content_front{
            width:60%;
            justify-content: center;
        }

        div.box_datepicker .box-button{
            width:60%;
            align-content: end;
        }

        div.datepicker {
            width:95%;
        }
    }

    @media( min-width:767px){

        div.box_datepicker .box_date {
            width:210px;
        }

        div.box_datepicker .box_flex_content_front{
            width:45%;
        }

        div.box_datepicker .box-button{
            width:20%;
        }

        div.box_datepicker .box-discount{
            width:60%;
        }
    }

    @media (min-width:946px) {
        div.box_datepicker {
            justify-content: center;
        }

        div.box_datepicker .box_flex_content_front{
            width:320px;
            margin:0;
        }

        div.box_datepicker .box_content_front{
            margin: 0 5px;
        }

        div.box_datepicker .box_date {
            width:210px;
        }

        div.box_datepicker .box-discount {
            width: 200px;
        }

        div.box_datepicker .box-button {
            width:auto;
            align-content: end;
        }

        div.datepicker{
            width:760px;
        }

        div.datepicker .datepicker__inner {
            padding:12px;
        }
    }