:root {
        --main-bg-color: #FFF;
        --black: #333;
        --white: #FFF;
        --grey: #6F7072;
        --light-grey: #F2F2F4;
        --primary-500:#770D69;
        --switch-height: 24px;
        --switch-bordure: 2px;
    }

    html {font-size:100%;}

    body {
        font-family: 'Montserrat', sans-serif;
        letter-spacing: -0.4px;
        background-color: var(--main-bg-color);
        max-width:900px;
        margin:auto;
        padding:24px 0;
        font-size:0.9em;
        color: var(--black);
    }

    h2, h3 {
        margin:0;
        color: var(--primary-500);
    }

    h1 {
        color: var(--black);
        margin:0;
        text-transform: uppercase;
    }

    /*** STRUCTURE ***/
    .detailscontenu {
        padding:16px 16px;
        max-width:1200px;
        margin:auto;
    }

    .step {
        background-color: white;
        padding: 24px 0;
        margin-top:16px;
        border-radius: 8px;
    }

    /* HEADER */

    #top-logo {
        height:90px;
        margin:0 16px;
    }

    #tite-rdv {
        align-items:center;
        display: grid;
        grid-auto-flow: column;
        justify-content: space-between;
    }

    #tite-selector {
        display: grid;
        justify-content: space-between;
        grid-auto-flow: column;
        align-items:start;
    }


    /*** BUTTON ***/
    .primary-button {
        cursor: pointer;
        border-radius: 8px;
        background-color: var(--primary-500);
        border: solid 1px var(--primary-500);
        padding: 14px 16px 13px 16px;
        font-weight: bold;
        font-family: 'Montserrat', sans-serif;
        color: var(--white);
        font-size: 0.9rem;
    }

    .primary-button:hover {
        background-color: transparent;
        color: var(--primary-500);
        border: solid 1px var(--primary-500);
        padding: 14px 16px 13px 16px;
        font-size: 0.9rem;
    }

    .secondary-button {
        cursor: pointer;
        border-radius: 8px;
        background-color: transparent;
        border: solid 1px var(--primary-500);
        padding: 14px 16px 13px 16px;
        font-weight: bold;
        font-family: 'Montserrat', sans-serif;
        color: var(--primary-500);
        padding: 14px 16px 13px 16px;
        font-size: 0.9rem;
    }

    .secondary-button:hover {
        background-color: var(--primary-500);
        color: var(--white);
        padding: 14px 16px 13px 16px;
        font-size: 0.9rem;
    }


    /*** HOURS ***/
    .hours-content {
        border-radius:4px;
        text-align:center;
        margin:4px;
        cursor:pointer;
        background: var(--white);
        border: 1px solid var(--primary-500);
    }

    .hours-content:hover {
        background-color: var(--primary-500);
    }

    .hours-content .morning {
        margin: 0;
    }

    .hours-content .hours {
        text-decoration:none;
        color: var(--black);
        display:block;
        padding: 12px 8px;
        font-weight: bold;
    }

    .hours-content:hover .hours {
        color:var(--white);
    }

    /* FOOTER */

    #footer {
        padding: 24px;
        text-align:center;
    }

    #footer a {
        text-decoration: none;
        text-transform: uppercase;
    }

    #footer a:hover {
        text-decoration: underline;
    }


    /* OTHER */
    .hide {display : none;}

    .day {
        text-align: center;
    }

    .day-title {
        margin-bottom: 8px;
        margin-top: 24px;
        text-transform: capitalize;
        font-weight: bold;
        font-size: 14px;
    }

    .day-content {
        margin-top: 4px;
        display: grid;
        grid-row-gap: 8px;
    }

    .day-content .hours-content.enabled-day:nth-child(n+7),
    .day-content .hours-content:not(.enabled-day) {
        display: none;
    }

    .all-hours .day-content .hours-content.enabled-day {
        display: block;
    }

    .availabilities-message-week {
        margin-top: 16px;
        color: var(--primary-500);
        text-align: center;
        font-weight: bold;
    }

    .availabilities-more-slots{
        cursor: pointer;
    }

    .availabilities-more-slots, .availabilities-no-slots {
        display: none;
        margin: 0;
    }

    .day-day {
        color: var(--grey);
    }

    .error {
        color: red;
    }

    .rdvdistance {
        display: flex;
        margin-bottom: 20px;
    }

    .rdvdistance a.button {
        margin-left: 20px;
        margin-top: 22px;
    }

    .rdvbutton {
        display: flex;
        justify-content: space-between;
        padding: 50px 250px 50px 250px;
    }

    .rdvbutton a {
        background-color: #2b6db5;
        text-decoration: none;
        color: white;
        width: 37%;
        padding: 5px 10px 5px 10px;
        text-align: center;
        transition: transform .2s;
        box-shadow: 1px 1px 2px black;
    }

    .rdvbutton a:hover {
        transform: scale(1.1);
        transition: all .2s ease-in-out;
        background-color: #004692;

    }

    button.disabled {
        cursor: not-allowed;
        color: var(--black);
        border-color:var(--black);
    }

    .no-more {
        color: #F0AA46;
    }

    select {
        margin-top:16px;
        width: 100%;
        padding: 10px 10px 10px 10px;
        appearance: none;
        -webkit-appearance: none;
        border: 1px solid var(--black);
        border-radius:4px;
        background: url(/apps/lacipav/retraite/shared/img/down_chevron_black.png) no-repeat right #FFF;
        background-size: .95em auto, 100%;
        background-position-x: 98%;
        color: var(--black);
        font-size: 0.9rem;
        font-family: 'Montserrat', sans-serif;
    }

    #refreshweek {
        margin-top: 0;
    }

    #tite-selector .left-part {max-width: 500px;}

    #succursaleTypeFilter {
        background-color: var(--light-grey);
        border-radius: 8px;
        padding: 16px;
    }

    a.button span {
        display: inline-block;
        outline: none;
        cursor: pointer;
        text-align: center;
        text-decoration: none;
        padding: .5em 2em .55em;
        -webkit-border-radius: 2em;
        -moz-border-radius: 2em;
        border-radius: 2em;
        color: #616060;
        border: solid 1px #616060;
        background: #ffffff;
        max-width: 150px;
    }

    .week-content {
        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: minmax(0, 1fr);
        grid-gap: 8px;
    }
    .az-confirm-mobile {
        display: none !important;
    }

/* SWITCH */

    .switch:first-child {
        margin-bottom: 8px;
    }

    .switch input {
        display: none;
    }

    .switch label {
        display: grid;
        grid-auto-flow: column;
        align-items: center;
        justify-content: start;
        grid-gap: 8px;
    }

    .switch .slider {
        display: inline-block;
        cursor: pointer;
        background-color: var(--grey);
        transition: .4s;
        height: var(--switch-height);
        width: calc( 2 * var(--switch-height) -  2 * var(--switch-bordure) );
        border-radius:  calc(  2 * var(--switch-height)  +  2 * var(--switch-bordure) );
    }

    .switch .slider:before {
        display: inline-block;
        margin-top: var(--switch-bordure);
        content: "";
        /* 2px pour laisser une bordure en haut et en bas */
        height: calc( var(--switch-height) - 2 * var(--switch-bordure) );
        width: calc( var(--switch-height) - 2 * var(--switch-bordure) );
        left: calc( var(--switch-height) - 2 * var(--switch-bordure) );
        bottom: 1px;
        background-color: white;
        transition: .4s;
        box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.2);
        border-radius: 50%;
    }

    .switch input:checked + label .slider {
        background-color: var(--primary-500);
    }

    .switch input:checked + label .slider:before {
        transform: translateX(calc( var(--switch-height) - var(--switch-bordure) ));
    }

    .switch input + label .slider:before {
        transform: translateX( var(--switch-bordure) );
    }

/**CANCEL PART**/
    #details-bloc {
        padding: 24px;
        border: solid 1px var(--light-grey);
        border-radius: 8px;
        display: grid;
        grid-auto-flow: row;
        grid-gap: 16px;
    }

    #cancel-form {
        display: grid;
        grid-template-rows: 1fr auto;
        height: 100%;
        grid-gap: 16px;
    }

    .form-submit {
        text-align: right;
    }

    .details-line {
        display: grid;
        grid-auto-flow: column;
        align-items: center;
        justify-content: start;
        grid-gap: 16px
    }

    .details-line .detail-title {
        font-weight: bold;
    }

    .details-line .detail-icon {
        background-color: var(--white);
        height: 40px;
        width: 40px;
        border-radius: 8px;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .details-line .detail-icon img {
        height: 90%;
    }

    #cancel-page #step1 {
        display: grid;
        grid-template-columns: 1fr 2fr;
        grid-auto-flow: column;
        grid-gap: 24px;
    }

    #cancel-form .cancel-title {
        margin-bottom: 16px;
    }

    .form-field .field {
        margin-top: 8px;
    }


/* BUTTON CANCEL */

    #cancel-submit {
        height: 40px;
        border-radius: 8px;
        padding: 0 16px;
        bottom: 0;
        right: 0;
    }

/* SUBSCRIPTION PART */
#subscription-recontact-list-block {
    flex-direction: column;
    gap: 12px;
    align-items: center;
    text-align: center;
    /* (step2:padding-bottom: 24px) + 16px = 40px (*/
    padding-top: 16px;
}

#subscription-recontact-list-block:not(.hide) {
    display: flex;
}

#subscription-recontact-list-block button {
    background: var(--primary-500);
    color: var(--white);
}

#subscription-recontact-list-block button:hover {
    background: var(--white);
    color: var(--primary-500);
}

/**RESPONSIVE**/
    @media all and (min-width: 600px) {
        .availabilities-message-day {
            display: none; !important;
        }
    }

    @media all and (max-width: 599px) {

        .availabilities-message-week {
            display: none; !important;
        }

        #step2:not(.hide) {
            display: grid;
            grid-row-gap: 16px;
        }

        #tite-rdv {
            grid-auto-flow: row;
            grid-row-gap: 16px;
            grid-template-columns:100%;
        }

        #tite-rdv .navbar .retraite-button {
            width: 100%;
        }

        #tite-selector {
            grid-auto-flow: row;
            grid-template-columns:100%;
         }

        .week-content {
            grid-auto-flow: row;
            grid-row-gap: 16px;
        }

        .week-content .day {
            border: solid 1px var(--light-grey);
            border-radius: 8px;
        }

        .availabilities-message-day, .day-content {
            border-top: solid 1px var(--light-grey);
        }

        .day-title, .availabilities-message-day {
            display: grid;
            grid-auto-flow: column;
            align-content: space-around;
            justify-content: center;
            grid-gap: 4px;
            color: var(--primary-500);
            margin: 0;
            height: 40px;
            font-weight: bold;
        }

        .day-title, .day-day {
            color: var(--black);
        }

        .day-title .day-day, .day-title .day-date {
            display: inline;
        }

        .day-content {
            grid-template-columns: repeat(3, 1fr);
            grid-row-gap: 8px;
            grid-column-gap: 8px;
            padding: 8px
        }

/*CANCEL PART */
        #cancel-page #step1 {
            grid-auto-flow: row;
            grid-template-columns: 1fr;
        }

/* SUBSCRIPTION PART */
        #step2:not(.hide) + #subscription-recontact-list-block {
        /* en mobile toujours visible une fois que la step2 est visible */
            display: flex;
        }

    }

    @media all and (max-width: 870px) {
        .az-confirm-desktop {
            display: none !important;
        }

        .az-confirm-mobile {
            display: block !important;
        }
    }

    .hidden {
        display: none;
    }