/************************Datepicker inline container************************/
/************************Datepicker inline container************************/
/************************Datepicker inline container************************/
.ui-datepicker-inline {
    width: auto !important;
}

/***************************************************************************/
/*Background-color du datepicker*/
.ui-widget-content {
    background-color: #FFFFFF;
}

/***************************************************************************/
/*Début et Fin du séjour selectionnée*/
.rangeFirstDate, .rangeLastDate,
.rangeFirstDate a, .rangeFirstDate a::after,
.rangeLastDate a, .rangeLastDate a::after,
.dayUse a, .dayUse a::after, .rangeFirstDate a:hover,
.rangeLastDate a:hover {
    color: #FFFFFF !important;
}

.reductionAvailable > a[price]::after{
    text-decoration: line-through !important;
    padding-top: 2px !important;
    color: grey !important;
}

.ui-datepicker td a[reduced-price]::after {
    font-size: 10px;
}

.rangeFirstDate {
    background-color: #00adb3 !important;
    border-radius: 50% 0 0 50%;
}

.rangeLastDate {
    background-color: #00adb3 !important;
    border-radius: 0 50% 50% 0;
}

/*Plage de date du séjour selectionnée*/
.between-date {
    background: #BAE6E8;
}

.dayUse {
    background-color: #00adb3 !important;
    border-radius: 50%;
}

/***************************************************************************/
/***** No Availibility ---> aucun moyen de différencier les jours ayant
/***** aucune dispo et les jours ayant aucun prix paramétré */
td.noAvailability:not(.rangeLastDate) a {
    color: #757575 !important;
    opacity: 0.3;
}

td.rangeLastDate a[price]::after {
    visibility: hidden;
}

td.rangeLastDate a[reduced-price]::after {
    visibility: hidden;
}

td.noAvailability a:link {
    cursor: not-allowed;
}

/*on initialise toutes les date cliquables*/
.ui-datepicker-inline td a:link {
    cursor: pointer;
}

/*si la selection est interdite aucune cellule meme avec dispo n'est selectionnable*/
.date-selection-forbidden td.noAvailability a:link {
    cursor: not-allowed;
}

/*on attend la selection de la premiere date du séjour, les dates sans dispos ne sont pas cliquables*/
.waiting-for-start-selection td.noAvailability a:link {
    cursor: not-allowed;
}

/*si la date de début est selectionnée on attend la selection de la date de fin, les cellules sans dispo sont
cliquables car on peut finir un séjour sur une date sans dispo.*/
.waiting-for-end-selection:not(.date-selection-forbidden) td.noAvailability a:link {
    cursor: pointer;
}

/***************************************************************************/
/***** Contenu de chaque cellule *****/
.ui-datepicker td {
    padding: 0;
}

.ui-datepicker td a {
    text-align: center;
}

/*attribut [price] ajouté à partir de ModuleDatepicker.js dans la methode beforeShowDay*/
.ui-datepicker td a[price]::after {
    content: attr(price);
    display: block;
    position: relative;
    color: #00adb3;
    text-align: center;
}

.ui-datepicker td a[reduced-price]::after {
    content: attr(reduced-price);
    display: block;
    position: relative;
    color: #00adb3;
    text-align: center;
}

.ui-datepicker td span,
.ui-datepicker td a {
    text-align: center;
}

/*Jour de la semaine*/
thead th span {
    color: #757575;
    font-size: 14px;
}

/*mois - année*/
.ui-datepicker .ui-datepicker-title {
    font-size: 20px;
}

/***************************************************************************/
/***** Template *****/
.ui-state-default,
.ui-widget-content .ui-state-default,
.ui-widget-header .ui-state-default {
    border: none;
    background: none;
    padding: 0;
}

.ui-widget-header {
    background: none;
    border: none;
    padding: 0;
}

/***** ModuleDatepicker_Small ---> result.jsp *****/
.date_picker_hidden {
    display: none;
}

.ui-datepicker-multi .ui-datepicker-group table {
    width: 100%;
}

.datepicker-custom-dialog.show-on-click {
    z-index: 100; /*comme les dialog jquery*/
}

.datepicker-container-element * {
    box-sizing: border-box;
}

.ui-datepicker-calendar {
    font: 18px Roboto;
}

/*Contenu de chaque cellule*/
.ui-datepicker td {
    padding: 0;
    height: 52px;
    width: 52px;
}

.ui-datepicker td a,
.ui-datepicker-calendar .ui-state-disabled {
    font-size: 14px;
}

/*attribut [price] ajouté à partir de ModuleDatepicker.js dans la methode beforeShowDay*/
.ui-datepicker td a[price]::after {
    font-size: 10px;
    padding-top: 8px;
    line-height: 0.8;
}

.clearButton {
    margin: 16px 20px 20px 0;
}

.ui-datepicker th {
    padding: auto;
    text-align: center;
    font-weight: normal;
    border: 1px;
}

.datepicker-container {
    display: flex;
    align-items: center;
    flex-direction: column;
}

td.minimizing-not-possibilities:not(.noAvailability) a {
    color: #757575 !important;
    opacity: 0.3;
}

td.minimizing-not-possibilities:not(.noAvailability) a:link {
    cursor: not-allowed;

}

td.highlight-possibilities:not(.noAvailability):not(.rangeLastDate)  a {
    font-size: 18px;
    color : #00adb3!important;
}

td.highlight-possibilities.noAvailability:not(.rangeLastDate)  a{
    color : #00adb3!important;
    opacity: 0.9!important;
}

/*SECTION*/
/*890 et plus : tablette paysage et PC*/
/*- Entre 700 et 889  : tablette portrait*/
/*- Entre 396 et 699 : smartphone XL*/
/*- Moins de 396 : smartphone*/

@media screen and (min-width: 890px) {
}

@media screen and (min-width: 700px) and (max-width: 889px) {
}

@media screen and (min-width: 598px) and (max-width: 699px) {
}

@media screen and (min-width: 498px) and (max-width: 597px) {
}

@media screen and (min-width: 396px) and (max-width: 497px) {
}

@media screen and (min-width: 396px) and (max-width: 699px) {
    /*ATTENTION : le module jQuery ModuleDatePicker.js test la valeur de la propriété css 'fixed'
          pour des raisons de fonctionnement interne(nottament pour empecher l'ouverture du clavier
          natif sur mobile). Donc si besoin de modifier cette propriété il faut modifier le module
          également.
        */
    .datepicker-custom-dialog.show-on-click {
        width: 100vw;
        height: 100vh;
        position: fixed !important;
        z-index: 101; /*comme les dialog jquery*/
        margin: 0;
        top: 0;
        left: 0;
        overflow-y: auto !important;
        max-height: none !important;
    }
}

@media screen  and (max-width: 395px) {
    .datepicker-custom-dialog.show-on-click {
        width: 100vw;
        height: 100vh;
        /*ATTENTION : le module jQuery ModuleDatePicker.js test la valeur de la propriété css 'fixed'
          pour des raisons de fonctionnement interne(nottament pour empecher l'ouverture du clavier
          natif sur mobile). Donc si besoin de modifier cette propriété il faut modifier le module
          également.
        */
        position: fixed !important;
        z-index: 101; /*comme les dialog jquery*/
        margin: 0;
        top: 0;
        left: 0;
        overflow-y: auto !important;
        max-height: none !important;
    }
}

.datepicker-custom-dialog {
    display: flex;
    flex-direction: column;
    background-color: #FFFFFF;

}

/* Gestion de la boite de dialog en mode boite modale pas plein écran */

.mobile-mode-arrival,
.mobile-mode-departure {
    text-transform: capitalize;
}

@media screen and (min-width: 700px) {
    .datepicker-custom-dialog.show-on-click {
        /*box-shadow: 0 0 6px 0 rgba(0,0,0,.32);*/
        box-shadow: rgba(0, 0, 0, 0.1) 0px 5px 5px;
        border-radius: 0 0 2px 2px;
        padding: 0 20px 0 20px;
    }

    .show-on-click.display-mode-small .datepicker-container-footer {
        display: flex;
        justify-content: flex-end;
        padding-bottom: 20px;
    }
}

/* Gestion de la boite de dialogue du datepicker en plein écran */
@media screen and (max-width: 699px) {

    .ui-datepicker-inline {
        width: auto !important;
    }

    .datepicker-custom-dialog {
        display: flex;
        overflow-y: hidden; /* affichage en boite modale */
    }

    body.show-on-click {
        overflow-y: hidden; /* réactiver le scroll quand la popup n'est pas ouvert */
    }

    .show-on-click .datepicker-container-header,
    .show-on-click .datepicker-container-footer,
    .show-on-click .datepicker-readonly-inputs {
        display: flex;
    }

    .datepicker-readonly-inputs {
        flex-direction: row;
        flex-wrap: nowrap;
        /*le space around ne fonctionne pas bien sur mobile(les champs sortent de l'écran)
        pour pallier cela j'utiliser space-between + des margin
        */
        justify-content: space-between;
    }

    .datepicker-readonly-inputs .arrivalDate {
        margin-left: 1rem;
    }

    .datepicker-readonly-inputs .departureDate {
        margin-right: 1rem;
    }

    .datepicker-readonly-inputs .departureDate .check-out, .datepicker-readonly-inputs .arrivalDate .check-in {
        max-width: 150px;
    }

    .datepicker-container-header,
    .datepicker-container,
    .datepicker-container-footer {
        padding-left: 0;
        padding-right: 0;
    }

    .datepicker-container {
        height: 100%;
        overflow-y: auto;
    }

    .datepicker-container-header {
        height: 54px;
        margin-bottom: 8px;
        border-bottom: solid 1px #E0E0E0;
    }

    .datepicker-container-footer {
        justify-content: center;
        align-items: center;
        height: 54px;
        width: 100%;
        border-top: solid 1px #E0E0E0;
    }

    .datepicker-container-footer button.sm-search-btn-dp {
        flex-grow: 1;
        margin-left: 20px;
        margin-right: 20px;
        margin-top: 0;
    }

    .btn-clear-range-datepicker {
        height: 38px;
    }

    .datepicker-container-header-left .btn-clear-range-datepicker {
        margin-left: 18px;
    }

    .datepicker-container-header-left,
    .datepicker-container-header-right {
        flex-grow: 1;
        display: flex;
        align-items: center;
    }

    .datepicker-container-header-right {
        justify-content: flex-end;
    }

    .datepicker-container-header {
        order: 1;
    }

    .datepicker-container {
        order: 2;
        flex-grow: 1;
    }

    .datepicker-container-footer {
        order: 3;
    }

}