.appointmentForm-container {
    display: flex;
    justify-content: center;
    background-color: #f5f5f5;
    width: 100%;
}

.appointmentForm-container p {
    color: #5B5B5B;
    font-size: var(--lower-text-size);
}

.appointmentForm-container h3 {
    margin: 2rem 0;
    text-align: center;
}

.appointmentForm-container .form-container {
    display: flex;
    align-items: center;
    flex-direction: column;
    margin: 6rem 0;
    background-color: #ffffff;
    width: 65%;
    transition: all ease .2s;
}

.appointmentForm-container .form-container form {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--form-fieldset-gap);
    width: 70%;
    transition: all ease .2s;
}

.appointmentForm-container .form-container fieldset {
    width: 100%;
    display: flex;
    flex-direction: column;
    margin-top: 1rem;
    border:solid 1px #B5B5B5;
    padding: 1rem 5% 1.5rem;
}

.appointmentForm-container .form-container legend {
    font-size: var(--text-size);
    font-weight: 500; /* Medium */
    margin-left: 2%;
    padding: 0 2%;
}

.appointmentForm-container .form-container label:not(.invisible-label) {
    color: #5B5B5B;
    font-size: var(--lower-text-size);
} 

/* ############## GESTION DES INPUTS ############## */

.appointmentForm-container .form-container input:not(.invisible), 
.appointmentForm-container .form-container .css-13cymwt-control,
.appointmentForm-container .form-container .css-t3ipsp-control {
    border: solid #B5B5B5 1px;
    border-radius: 2px;
    padding: 5px 10px;
    font-size: var(--text-size);
    width: 100%;
    height: 40px;
    -webkit-transition: border-color ease-in-out 0.15s;
    transition: all ease-in-out 0.15s;
}

.appointmentForm-container .form-container .rs-picker-input-group input {
    height: unset !important;
}

.appointmentForm-container .form-container .rs-uploader-trigger.rs-uploader-trigger-customize {
    position: relative;
}

.appointmentForm-container .form-container .css-13cymwt-control,
.appointmentForm-container .form-container .css-t3ipsp-control {
    padding: unset;
}

.appointmentForm-container .form-container .css-13cymwt-control input ,
.appointmentForm-container .form-container .css-t3ipsp-control input{
    padding: unset !important;
    height: unset !important;
}

.appointmentForm-container .form-container input:not(.invisible):focus-within,
.appointmentForm-container .form-container .css-t3ipsp-control {
    outline: solid 2px #acd7ff !important;
    border:solid 1px #61b3ff !important;
}

.appointmentForm-container .form-container .css-hlgwow:hover {
    cursor: text;
}

.appointmentForm-container .form-container .css-19bb58m,.css-1cfo1cf {
    padding: unset !important;
    margin: unset !important;
}

.appointmentForm-container .form-container .css-1wy0on6:hover {
    cursor: pointer;
}

.appointmentForm-container .form-container .css-t3ipsp-control input:focus-within,
.appointmentForm-container .form-container .css-13cymwt-control input:focus-within {
    outline: unset !important;
    border: unset !important;
}

/* ############## reason-fieldset ############## */

.appointmentForm-container .reason-fieldset>div:last-of-type{
    gap: 2%;
    display: flex;
}

.appointmentForm-container .reason-fieldset div label:first-of-type {
    width: 68%;
    transition: all ease .2s;
}

.appointmentForm-container .reason-fieldset div label:nth-child(2) {
    width: 30%;
    transition: all ease .2s;
}

/* ############## rdv-fieldset ############## */

.appointmentForm-container .rdv-fieldset,.reason-fieldset { 
    gap: var(--form-input-gap);
}

.appointmentForm-container .rdv-fieldset>div:nth-of-type(2) {
    display: flex;
    gap: 2%;
}

.appointmentForm-container .rdv-fieldset>div:nth-of-type(2) input:not(.input-error) {
    border: solid 1px transparent;
    border-right:solid 1px #B5B5B5;
}

.appointmentForm-container .rdv-fieldset>div:nth-of-type(2)>div {
    width: 49%;
    transition: all ease .2s;
}

.appointmentForm-container .rdv-fieldset>div:nth-of-type(2)>div>p,
.appointmentForm-container .reason-fieldset>div:nth-of-type(2)>p {
    color: #5B5B5B;
    font-size: var(--lower-text-size);
}

.appointmentForm-container .rdv-fieldset #addr-label>p {
    width: fit-content;
    color: #5B5B5B;
    font-size: var(--lower-text-size);
}   

/* ############## Autre ############## */

.appointmentForm-container .submit {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--text-size);
    color: #FFFFFF;
    background-color: #333333;
    padding: 5px;
    font-weight: 500; /*Medium*/
    border: none;
    border-radius: 5px;
    width: 60%;
    cursor: pointer;
    margin-bottom: var(--form-fieldset-gap);
    transition: all ease 0.4s;
}


input.input-error, .input-error>div:not(.PhoneInputCountry){
    outline: solid 1px #f77575 !important;
    border:solid 1px #FF0000 !important;
}

.input-error div input {
    outline: unset !important;
}

@media (width <= 500px) { /* Mobile */
    /* .appointmentForm-container { 
        background-color: orange !important; 
    } */

    /* ############## reason-fieldset ############## */

    .appointmentForm-container .reason-fieldset>div:last-of-type{
        flex-direction: column;
        gap: var(--form-input-gap);
        gap: 10px;
    }
    
    .appointmentForm-container .reason-fieldset div label:first-of-type,
    .appointmentForm-container .reason-fieldset div label:nth-child(2)  {
        width: 100% !important;
    }

    /* ############## rdv-fieldset ############## */

    .appointmentForm-container .rdv-fieldset>div:nth-of-type(2) {
        flex-direction: column;
        gap: var(--form-input-gap);
        gap: 10px;
    }

    .appointmentForm-container .rdv-fieldset>div:nth-of-type(2)>div {
        width: 100%;
    }

    .appointmentForm-container .submit {
        width: 80%;
    }
}
  
@media (width <= 640px) { /* Tablette/Mobile */
    /* .appointmentForm-container { 
        background-color: lightblue; 
    } */

    .appointmentForm-container .form-container {
        width: 90%;
    }

    .appointmentForm-container .form-container form {
        width: 85%;
    }

    /* ############## reason-fieldset ############## */

    .appointmentForm-container .reason-fieldset div label:first-of-type {
        width: 54%;
    }

    .appointmentForm-container .reason-fieldset div label:nth-child(2) {
        width: 44%;
    }
}
  
@media (641px <= width <= 768px) { /* Tablette portrait */
    /* .appointmentForm-container { 
        background-color: lightgreen;
    } */

    .appointmentForm-container .form-container {
        width: 90%;
    }
}
    
@media (769px <= width <= 1024px) { /* Tablette paysage */
    /* .appointmentForm-container { 
        background-color: lightcoral;   
    } */

    .appointmentForm-container .form-container {
        width: 85%;
    }
}
    
@media (1025px <= width <= 1280px) { /* PC standard */
    /* .appointmentForm-container { 
        background-color: lightgoldenrodyellow; 
    } */

    .appointmentForm-container .form-container {
        width: 75%;
    }
}