/* Format form (divs) */

.contactDiv {
    position: fixed;
    top:0;
    right:0;
    z-index:4000;
}

#contact-section {
    float: right;
    box-shadow: 3px 2px 5px #333366;
    background-color: white;
    padding: 6%;
    width: 75%;
    margin: 0;
    overflow-x: scroll;
    line-height:22px!important;
}

.contactInformations {
    position: relative;
    box-shadow: none !important;
    border: solid #333366 1px;
    border-radius: 10px;
    width: 108% !important;
    float: none !important;
    right: 96%;
    color: #577BB1;
}

#contactInformationsTitle {
    font-size: 1.2em;
}

#form-contact {
    display: block;
    margin-block: auto;
    margin-inline: 4%;
    width: 95%;
    height: 95%;
}


/* Title and anchor */
#titleContact {
    display: flex;
    margin: auto;
    color: #333366;
    width: fit-content;
    padding: 0.5em;
    font-size: 2em;
}

#anchor-hide {
    position: fixed;
    right: 2em;
    top: 1em;
}

    #anchor-hide img {
        transform: rotate(90deg);
        width: 20px;
        height: 20px;
    }


/* Labels & Inputs of the form */

.editor-label, p, label-contact {
    font-family: Arial;
    color: #577BB1;
}

.editor-label {
    width: 150px;
    font-weight: bold;
    font-size: 12px;
}

.editor-field input[type="text"], .editor-field input[type="password"] {
    width: 100%;
    height: 40px;
    padding: 2%;
    color: black;
    border-color: transparent;
    border-radius: 10px;
    font-size: 1em;
}

.editor-field {
    font-size: 0.9em;
    border: 2px solid gray;
    border-radius: 12px;
    width: 100%;
}


#message textarea {
    font-size: 0.9em;
    border: 2px solid gray;
    border-radius: 12px;
    width: 100%;
    min-height: 75px;
}


/* Validation and error messages */

.invalidFormField {
    color: red;
}

#messageValidation {
    color: green;
}

#nameValidation, #emailValidation, #telValidation,
#subjectValidation, #textAreaValidation, #nameBodyForRedirect input,
#messageValidation, .invalidFormField {
    display: none;
}



/* Buttons */

.btn-send {
    font-size:1em;
    font-weight: bold;
}

#btnCustom {
    color: white !important;
    background-color: #CC3B3B !important;
    padding: 2%;
    margin-block: 2px;
    padding-inline: 15%;
}

    #btnCustom:hover {
        opacity: 0.9;
        border-color: transparent;
    }