:root {
    --basiques-blanc-ffffff: #ffffff; /* Define the variable with your desired color */
    --filtres-filtre-noir-50: #00000080;
    --scope-jaune-f-9-d-000: #F9D000;
    --scope-rose-e-83-e-66: #E83E66;
}

@font-face {
    font-family: "Font Awesome 6 Pro Brands";
    src:
            url("../fonts/fa-brands-400.ttf") format("ttf"),
            url("../fonts/fa-brands-400.woff2") format("woff2");
}

@font-face {
    font-family: "Font Awesome 6 Pro Regular";
    src:
            url("../fonts/fa-regular-400.ttf") format("ttf"),
            url("../fonts/fa-regular-400.woff2") format("woff2");
}

@font-face {
    font-family: "Font Awesome 6 Pro Solid";
    src:
            url("../fonts/fa-solid-900.ttf") format("ttf"),
            url("../fonts/fa-solid-900.woff2") format("woff2");
}

@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 300;
    src: local('Open Sans Light'), local('OpenSans-Light'), url(https://fonts.gstatic.com/s/opensans/v13/DXI1ORHCpsQm3Vp6mXoaTXhCUOGz7vYGh680lGh-uXM.woff) format('woff');
}

@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 400;
    src: local('Open Sans'), local('OpenSans'), url(https://fonts.gstatic.com/s/opensans/v13/cJZKeOuBrn4kERxqtaUH3T8E0i7KZn-EPnyo3HZu7kw.woff) format('woff');
}

@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 600;
    src: local('Open Sans Semibold'), local('OpenSans-Semibold'), url(https://fonts.gstatic.com/s/opensans/v13/MTP_ySUJH_bn48VBG8sNSnhCUOGz7vYGh680lGh-uXM.woff) format('woff');
}

body {
    background-color: transparent !important;
    background-image: url("../../uploads/images/homepage/CERNER_background_homepage.png") ;/* specify the background image only once */
    background-repeat: no-repeat;
    background-size: cover;
}

.description{
    font-family: Open Sans, sans-serif;
    color: var(--basiques-blanc-ffffff, #FFF);
    text-align: center;
}

.rectangle{
    border-radius: 25px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    background: rgba(255, 255, 255, 0.18);
    box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.25);
    backdrop-filter: blur(10px);
}

.title-subtitle{
    margin: 20px auto 30px auto;
    text-align: center;

    font-family: Open Sans, sans-serif;
    font-style: normal;
    font-weight: 700;
    color: var(--basiques-blanc-ffffff, #FFF);

    /* Ombres externes/OE - Dy - Textes */
    text-shadow: 0px 2px 5px #000;

    .h1-title{
        font-size: 2.5rem;
        line-height: 5rem;
    }

    .h2-text{
        font-size: 1.25rem;
    }
}

form {
    label{
        display: none;
    }

    .form-group{
        margin-bottom: 50px;
    }

    .input-group {
        width: 100%;
        height: 40px;
        padding: 0 15px;
        align-items: center;
        border-radius: 5px;
        border: 2px solid var(--basiques-blanc-ffffff, #FFF);
        background: var(--filtres-filtre-noir-50, rgba(0, 0, 0, 0.50));
        color: var(--basiques-blanc-ffffff, #FFF);
        /* Paragraphes/p - 16px - 1.5 - Open Sans - Medium */
        font-family: Open Sans, sans-serif;
        font-size: 16px;
        font-style: normal;
        font-weight: 500;
        line-height: 150%; /* 24px */

        input {
            width: 90%;
            padding: 0 15px;
            border-radius: 5px;
            border: none;
            background: transparent;
            color: var(--basiques-blanc-ffffff, #FFF);
            /* Paragraphes/p - 16px - 1.5 - Open Sans - Medium */
            font-family: Open Sans, sans-serif;
            font-size: 16px;
            font-style: normal;
            font-weight: 500;
            line-height: 150%; /* 24px */
        }

        input:-webkit-autofill,
        input:-webkit-autofill:hover,
        input:-webkit-autofill:focus,
        input:-webkit-autofill:active {
            -webkit-transition-delay: 9999s;
            transition-delay: 9999s;
        }

        input:focus{
            outline: none;
        }

        input::placeholder {
            color: var(--basiques-blanc-ffffff, #FFF);
        }

        .input-group-append{
            background-color: transparent;
            align-items: center;
        }
    }
}

#forgot-password {
    text-align: center;
    margin: 30px auto;

    .a-link {
        text-decoration: none;
        position: relative;

        color: var(--scope-jaune-f-9-d-000, #F9D000);
        /* Ombres externes/OE - Dy - Textes */
        text-shadow: 0 2px 5px #000;

        /* Paragraphes/p - 16px - 1.5 - Open Sans - Bold */
        font-family: Open Sans, sans-serif;
        font-size: 16px;
        font-style: normal;
        font-weight: 700;
        line-height: 150%; /* 24px */
    }

    .a-link::after {
        content: '';
        position: absolute;
        width: 100%;
        transform: scaleX(0);
        height: 2px;
        bottom: 0;
        left: 0;
        color: var(--scope-jaune-f-9-d-000, #F9D000);;
        background-color: var(--scope-jaune-f-9-d-000, #F9D000);
        transform-origin: bottom left;
        transition: transform 0.4s ease-out;
    }

    .a-link:hover::after {
        transform: scaleX(1);
        transform-origin: bottom left;
    }
}

#form-login {
    text-align: center;
    margin-bottom: 25px;

    .login-button {
        width: 90%;
        height: 40px;
        border-radius: 40px;
        border: none;
        background: var(--scope-rose-e-83-e-66, #E83E66);

        /*!* Ombres externes/OE - Dy - Soft *!*/
        box-shadow: 0 3px 4px 0 rgba(0, 0, 0, 0.15);
        color: var(--basiques-blanc-ffffff, #FFF);
        /* Paragraphes/p - 16px - 1.5 - Open Sans - Bold */
        font-family: Open Sans, sans-serif;
        font-size: 16px;
        font-style: normal;
        font-weight: 500;
        line-height: 150%; /* 24px */
        cursor: pointer;
        transition: all 0.3s ease-in-out;
    }

    .login-button:hover {
        transform: scale(1.1);
    }
}

.assistance{
    text-align: center;
}

.assistance-text{
    text-align: center;
    color: var(--basiques-blanc-ffffff, #FFF);
    /* Ombres externes/OE - Dy - Textes */
    text-shadow: 0 2px 5px #000;

    /* Paragraphes/p - 16px - 1.5 - Open Sans - Medium */
    font-family: Open Sans, sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 150%; /* 24px */
}

.servier{
    text-align: center;
    padding: 50px 0;
}