@import url("https://fonts.googleapis.com/css?family=Poppins");

:root {

    /* Colors: */
    ---ff0d0d-palette-error-main: #FF0D0D;
    ---2b7de2-palette-info-main: #2B7DE2;
    ---ffce59: #FFCE59;
    ---ff6b3d-palette-warning-main: #FF6B3D;
    ---f0f2f6: #F0F2F6;
    ---818181: #818181;
    ---5bb5ad-palette-secondary-main: #5BB5AD;
    ---003d88-palette-primary-main: #003D88;

    /* Font/text values */
    --unnamed-font-family-poppins: Poppins;
    --unnamed-font-style-normal: normal;
    --unnamed-font-weight-bold: bold;
    --unnamed-font-weight-normal: normal;
    --unnamed-font-size-14: 14px;
    --unnamed-font-size-16: 16px;
    --unnamed-font-size-20: 20px;
    --unnamed-font-size-24: 24px;
    --unnamed-character-spacing-0: 0px;
    --unnamed-line-spacing-21: 21px;
    --unnamed-line-spacing-26: 26px;
    --unnamed-line-spacing-32: 32px;
    --unnamed-line-spacing-35: 35px;
}

/* Character Styles */
.h2-poppins-—-20pt {
    font-family: var(--unnamed-font-family-poppins);
    font-style: var(--unnamed-font-style-normal);
    font-weight: var(--unnamed-font-weight-normal);
    font-size: var(--unnamed-font-size-20);
    line-height: var(--unnamed-line-spacing-32);
    letter-spacing: var(--unnamed-character-spacing-0);
    color: var(---003d88-palette-primary-main);
}

.h5-poppins-—-14pt {
    font-family: var(--unnamed-font-family-poppins);
    font-style: var(--unnamed-font-style-normal);
    font-weight: var(--unnamed-font-weight-bold);
    font-size: var(--unnamed-font-size-14);
    line-height: var(--unnamed-line-spacing-21);
    letter-spacing: var(--unnamed-character-spacing-0);
    color: var(---5bb5ad-palette-secondary-main);
}

.p-poppins-—-16pt {
    font-family: var(--unnamed-font-family-poppins);
    font-style: var(--unnamed-font-style-normal);
    font-weight: var(--unnamed-font-weight-normal);
    font-size: var(--unnamed-font-size-16);
    line-height: var(--unnamed-line-spacing-26);
    letter-spacing: var(--unnamed-character-spacing-0);
    color: var(---818181);
}

.h1-poppins-—-24pt {
    font-family: var(--unnamed-font-family-poppins);
    font-style: var(--unnamed-font-style-normal);
    font-weight: var(--unnamed-font-weight-bold);
    font-size: var(--unnamed-font-size-24);
    line-height: var(--unnamed-line-spacing-35);
    letter-spacing: var(--unnamed-character-spacing-0);
    color: var(---003d88-palette-primary-main);
}

.connexion_button {
    width: 327px;
    height: 48px;
    background: var(---003d88-palette-primary-main) 0% 0% no-repeat padding-box;
    border-radius: 8px;
    opacity: 1;
    font: var(--unnamed-font-style-normal) normal var(--unnamed-font-weight-bold) 12px/15px var(--unnamed-font-family-poppins);
    text-align: center;
    letter-spacing: 1px;
    color: #FFFFFF;
    border: 0;
    margin-bottom: 6%;
}

.connexion_button:hover {
    cursor: pointer;
}

.id_field {
    font: var(--unnamed-font-style-normal) normal var(--unnamed-font-weight-normal) var(--unnamed-font-size-16)/var(--unnamed-line-spacing-21) Poppins;
    display: block;
    width: 100%;
    height: 56px;
    border: 1px solid #000000;
    border-radius: 4px;
    margin: 0;
    padding: 0 10px 0 10px;
}

.input-label {
    position: absolute;
    top: -10px;
    left: 10px;
    background-color: #FFFFFF;
    padding: 0 5px;
    font-size: 14px;
    font-family: Poppins, serif;
    transition: all 0.2s ease-out;
    pointer-events: none;
}

.id_field:focus::placeholder {
    color: transparent;
}

.id_field::placeholder {
    font: var(--unnamed-font-style-normal) normal var(--unnamed-font-weight-normal) var(--unnamed-font-size-16)/var(--unnamed-line-spacing-21) Poppins;
    text-align: left;
    color: #000000DE;
    opacity: 1;
    padding-left: 2%;
}

.pwd_field {
    font: var(--unnamed-font-style-normal) normal var(--unnamed-font-weight-normal) var(--unnamed-font-size-16)/var(--unnamed-line-spacing-21) Poppins;
    display: block;
    width: 100%;
    height: 56px;
    border: 1px solid #000000;
    border-radius: 4px;
    margin: 0;
    padding: 0 10px 0 10px;
}

.pwd_field:focus::placeholder {
    color: transparent;
}

.pwd_field::placeholder {
    font: var(--unnamed-font-style-normal) normal var(--unnamed-font-weight-normal) var(--unnamed-font-size-16)/var(--unnamed-line-spacing-21) Poppins;
    text-align: left;
    color: #000000DE;
    opacity: 1;
    padding-left: 2%;
}

.politique {
    width: 328px;
    height: 51px;
    /* UI Properties */
    font: var(--unnamed-font-style-normal) normal var(--unnamed-font-weight-normal) 10px/15px var(--unnamed-font-family-poppins);
    letter-spacing: var(--unnamed-character-spacing-0);
    color: var(---003d88-palette-primary-main);
    text-align: center;
    opacity: 1;
}

.big_connexion {
    padding-bottom: 1.2em;
    font: var(--unnamed-font-style-normal) normal var(--unnamed-font-weight-bold) var(--unnamed-font-size-24)/var(--unnamed-line-spacing-35) var(--unnamed-font-family-poppins);
    letter-spacing: var(--unnamed-character-spacing-0);
    color: var(---003d88-palette-primary-main);
    text-align: center;
    opacity: 1;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.container {
    display: flex;
    flex-direction: row;
    height: 100vh;
    overflow: hidden;
}

.input-container {
    position: relative;
    margin-bottom: 24px;
}

.right-half {
    width: 50%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
}

.centered-div {
    background-color: white;
    padding: 20px;
    max-width: 80%;
    text-align: center;
}

.left-half {
    width: 50%;
    height: 100vh;
    position: relative;
    overflow: hidden;
}

.left-half img {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Maintain the aspect ratio and crop the image if necessary */
}

.logo {
    display: none;
}

.error_login {
    margin-bottom: 3%;
    color: red;
    font: normal normal normal 16px/21px Poppins;
    max-width: 300px;
}

@media only screen and (max-width: 600px) {
    .container {
        flex-direction: column;
    }

    .logo {
        display: initial;
        width: 60px;
        height: 60px;
        margin-bottom: 4%;
    }

    .left-half {
        width: 0;
        height: 0;
        display: none;
        overflow-y: hidden;
    }

    .right-half {
        width: 100%;
        height: 100vh;
        overflow-y: hidden;
    }

    .connexion_button {
        width: 100%;
    }

    .politique {
        width: 100%;
    }

    .pwd_field::placeholder {
        font-size: 12px;
    }

    .id_field::placeholder {
        font-size: 12px;
    }

    .centered-div {
        padding: 0;
        max-width: 90%;
    }
}

.toggle-password {
    position: absolute;
    top: 50%;
    right: 8px;
    transform: translateY(-50%);
    background-color: var(---003d88-palette-primary-main);
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s;
}

.toggle-password:hover {
    background-color: var(---003d88-palette-primary-main);
}