@use '../abstracts/variables' as *;
@use "../mixins/breakpoints" as *;
.login-container {
    background-image: url("/resources/images/background_image.webp") !important;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    min-height: 100vh !important;

    .fms-logo {
        text-align: center;
        @media (min-width: 320px) {
            width: 80%;
        }
        @media (min-width: 576px) {
            width: 50%;
        }
        @media (min-width: 768px) {
            width: 30%;
        }
        @media (min-width: 992px) {
            width: 15%;
        }
    }
    .signin-form {
        // backdrop-filter: blur(5px);
        // -webkit-backdrop-filter: blur(5px);
        background-color: rgba(255, 255, 255, 0.5);

        width: 300px;

        @include media-min-xs-l {
            width: 400px;
        }

        @include media-min-md {
            width: 450px;
        }

        @include media-min-xl {
            width: 530px;
        }

        @include media-min-5-xl {
            width: 800px;
        }
    }
    .sign-in {
        // color: $blue-clr;
        font-size: 18px;
        font-weight: 800;
    }
    ::placeholder,
    .fa-eye-slash,
    .fa-eye {
        color: lightgrey !important;
        opacity: 1;
    }
    input {
        outline: none;
    }
    .form-container {
        height: auto;
        margin-top: 40px;
        @media (min-width: 320px) {
            margin-top: 0px;
        }
        @media (min-width: 768px) {
            margin-top: 30px;
        }
        @media (min-width: 992px) {
            margin-top: 0;
        }
    }
    .signin-password {
        position: relative;
    }
    .closed-eye-icon {
        cursor: pointer;
        position: absolute;
        top: 43%;
        @media (min-width: 320px) {
            right: 15%;
        }
        @media (min-width: 576px) {
            right: 10%;
        }
        @media (min-width: 992px) {
            right: 22%;
        }
    }
    .signin-email,
    .signin-password {
        font-family: "Mulish", sans-serif !important;
    }
}