html, body {
    height: 100%;
}

body {
    margin: 0;
    font-family: "Montserrat", "Roboto", "Helvetica Neue", sans-serif;
    color:#fff;
    display:flex;
    background-color: #004c8e;
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    min-height: 100%;
}

h1, h2 {
    margin: 0;
}

.image {
    padding-bottom: 105px;
}
.image a {
    padding-left: 9.5em;
}

span.material-icons::selection {
    background: transparent;
}

.container {
    width: 100%;
    height: 100%;
    display: flex;
}

.authent-choice {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    margin: 3vh auto 30vh auto;
    gap:20px;
}

.authent-choice .title, .authent-choice .app-tiles .app-tile {
    text-align:center;
}

.authent-choice h1 {
    font-weight: normal;
    font-size: 28px;
}
.authent-choice h2 {
    font-weight: normal;
    font-size: 20px;
}

.authent-choice .app-tiles {
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 5vw;
}

.authent-choice .app-tiles .app-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    white-space: nowrap;
    background-color: #4d82b050;
    transition: all .2s ease-in-out;
    border-radius: 10px;
    padding: 3.5% 4%;
    min-width: 50%;
    max-width: 50%;
    gap: 30px;
}
.authent-choice .app-tiles .app-tile:hover {
    background-color: #4d82b080;
    box-shadow:inset 0 0 0 2px #0aafba;
    cursor: pointer;
}

.authent-choice .app-tiles .app-tile h1 {
    font-size: 26px;
}

.authent-choice .app-tiles .app-tile > div {
    padding: 16px;
    background: #0aafbaaa;
    transition: all .2s ease-in-out;
    display: flex;
    border-radius: 50%;
    max-width:50px;
}
.authent-choice .app-tiles .app-tile:hover > div {
    background: #0aafba;
}
.authent-choice .app-tiles .app-tile > div > span.material-icons {
    font-size: 50px;
}

.formulaire {
    display: flex;
    flex-direction: column;
    align-items: center;
    align-self: center;
    margin: -6em auto 0;
}

.formulaire h2 {
    padding-left: 5.5em;
}

form {
    display: flex;
    flex-direction: column;
    align-items:center;
    gap: 13px;
}

.formulaire-entree {
    display: flex;
    align-items:center;
}

.formulaire-entree > span.material-icons {
    transform: translateX(-100%);
    margin: 0 -15px;
    font-size: 30px;
}

.forgot-password {
    color: #0aafba;
    font-size: 14px;
    padding: 0 15px;
    align-self: start;
    margin: -18px 0 50px 0;
}
.forgot-password:not(:hover) {
    text-decoration: none;
}

.submit {
    width: 140px;
    height: 40px;
    font: 400 16px / 22px 'Montserrat', Roboto, 'Helvetica Neue', sans-serif;
    color: white;
    background-color: #0aafba;
    border: 1px;
    border-radius: 5px;
    cursor: pointer;
}

textarea:focus, input:focus{
    outline: none;
}

input[type="text"] {
    height: 45px !important;
    font-size:18px;
}
input[type="password"] {
    height: 45px !important;
    font-weight: bold;
    font-size: 20px;
    letter-spacing: 2px;
}

.error, .success {
    padding:8px 16px 8px 12px;
    border-radius: 5px;
    background: #2222228a;
    color: #fff;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: 0.2s;
    -webkit-animation: fadein 1s;
    -moz-animation: fadein 1s;
    -ms-animation: fadein 1s;
    -o-animation: fadein 1s;
    animation: fadein 1s;
    margin:-10% 0 5% 0;
}

.success {
    border: 1px solid #4caf50;
}
.error {
    border: 1px solid #e44;
}

.success .material-icons {
    color: #4caf50;
}
.error .material-icons {
    color: #e44;
}

@keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Firefox < 16 */
@-moz-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Internet Explorer */
@-ms-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

p {
    margin: 0;
    padding-top: 6px;
}

.text-field {
    position: relative;
    margin: 10px 0;
}

input:not(.submit) {
    display: inline-block;
    border: 1px solid #0aafba;
    color: #ffffff;
    background-color: transparent;
    padding: 10px 50px 10px 15px;
    border-radius: 5px;
    width: 350px;
    box-sizing: border-box;
    max-width: 350px;
}

input:focus, input:hover:not(.submit) {
    background-color:transparent;
    box-shadow: #0aafba 0 0 0 1px;
}

label {
    color: #a1a1a1;
    position: absolute;
    pointer-events: none;
    left: 15px;
    top: 13px;
    transition: 0.2s;
}

/* Gestion de l'affichage du label quand on focus pour le placer sur la bordure */
input:focus ~ label, input:valid ~ label {
    top: -10px;
    left: 10px;
    font-size: 15px;
    color: #0aafba;
    background-image: linear-gradient(0deg,transparent, #004c8e 35%, #004c8e 55%, transparent);
    padding:0 5px 0 5px;
}

.logout-modal {
    z-index: 10;
    width: 100%;
    height: 100%;
    position: absolute;
    background-color: #004c8e;
}

.logout {
    margin-left: 20%;
    margin-top: 8em;
    display: flex;
    align-content: center;
    align-items: center;
}

.visibility {
    position: absolute;
    cursor: pointer;
    color: #0aafba;
    font-size: 24px !important;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
}

.ripple {
    background-position: center;
    border-radius: 125px;
}

.ripple:active {
    transition: background 0.1s;
    box-shadow: #6EB9F71F 0px 0px 0 9px;
    background-color: #6EB9F71F;
}