/*MOBILE*/
@media only screen and (max-width: 667px) {
    body {
        display: flex;
        position: fixed;
        width: 100%;
        height: 100%;
    }

    #idImageLogin {
        display: none;
    }

    #idDivLogin {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    #idPhotoLogin {
        display: flex;
        margin: auto;
        margin-bottom: 50px;
    }

    form {
        display: flex;
        margin: auto;
        flex-direction: column;
        max-width: 20rem;
    }

    div .single-input {
        position: relative;
        margin-bottom: 30px;
    }

    div .inputPassword {
        display: flex;
    }

    div .single-input .inputLogin {
        max-width: 20rem;
        width: 20rem;
        color: rgb(0, 0, 0);
        padding: 5px;
        border: 0;
        border-bottom: 2px solid #9b9a9a;
        outline: 0;
    }

    #eyeIcon img {
        position: absolute;
        right: 0;
        width: 1.2rem;
        height: 1.2rem;
        cursor: pointer;
    }

    div .single-input .inputLogin:focus,
    div .single-input .inputLogin:valid {
        border-bottom: 2px solid #006b0f;
    }

    div .single-input .inputLogin:focus~label,
    div .single-input .inputLogin:valid~label {
        transform: translateY(-24px);
        font-size: .9rem;
        color: #006b0f;
    }

    div .single-input label {
        position: absolute;
        left: 0;
        bottom: 5px;
        cursor: text;
        color: rgb(150, 150, 150);
        transition: 0.5s ease-in-out;
    }

    div .single-input label .iconLogin img {
        width: 1.2rem;
        height: 1.2rem;
    }

    .inputLogin:focus~label .iconLogin img,
    .inputLogin:valid~label .iconLogin img {
        width: 1rem;
        height: 1rem;
        filter: brightness(0) saturate(100%) invert(24%) sepia(41%) saturate(2907%) hue-rotate(111deg) brightness(96%) contrast(104%);
    }


    .divButtonLogin {
        width: 100%;
        display: flex;
        justify-content: center;
    }

    .divButtonLogin #idButtonLogin {
        height: 3.2rem;
        width: 10rem;
        border-radius: 15px;
        font-size: 1.2rem;
        color: #0000008e;
        font-weight: bolder;
        border: none;
        background-image: linear-gradient(to right, #EECB0A, #EC9317, #E95E20);
    }
}

/*TABLETE*/
@media screen and (min-width: 667px) and (max-width: 992px) {
    body {
        display: grid;
        grid-template-columns: 60% 40%;
        position: fixed;
        width: 100%;
        height: 100%;
    }

    .divImage {
        background-color: red;
    }

    .divImage #idImageLogin {
        width: 100%;
        height: 100%;
    }

    #idDivLogin {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
    }

    #idPhotoLogin {
        width: 160px;
        height: 160px;
        display: flex;
        margin: auto;
        margin-top: 100px;
        margin-bottom: 50px;
    }

    form {
        display: flex;
        margin: auto;
        flex-direction: column;
        max-width: 15rem;
    }

    div .single-input {
        position: relative;
        margin-bottom: 30px;
    }

    div .single-input .inputLogin {
        max-width: 15rem;
        width: 15rem;
        color: rgb(0, 0, 0);
        padding: 5px;
        border: 0;
        border-bottom: .1rem solid rgb(155, 154, 154);
        outline: 0;
    }

    #eyeIcon img {
        position: absolute;
        right: 0;
        width: 1.2rem;
        height: 1.2rem;
        cursor: pointer;
    }

    div .single-input .inputLogin:focus,
    div .single-input .inputLogin:valid {
        border-bottom: 2px solid #006b0f;
    }

    div .single-input .inputLogin:focus~label,
    div .single-input .inputLogin:valid~label {
        transform: translateY(-24px);
        font-size: .9rem;
        color: #006b0f;
    }

    div .single-input .inputLogin:focus~label,
    div .single-input .inputLogin:valid~label {
        transform: translateY(-24px);
        font-size: .9rem;
        color: #006b0f;
    }

    div .single-input label {
        position: absolute;
        left: 0;
        bottom: 5px;
        cursor: text;
        color: rgb(150, 150, 150);
        transition: 0.5s ease-in-out;
        font-size: .8rem;
    }

    div .single-input label .iconLogin img {
        width: 1rem;
        height: 1rem;
    }

    .inputLogin:focus~label .iconLogin img,
    .inputLogin:valid~label .iconLogin img {
        width: .8rem;
        height: .8rem;
        filter: brightness(0) saturate(100%) invert(24%) sepia(41%) saturate(2907%) hue-rotate(111deg) brightness(96%) contrast(104%);
    }

    .divButtonLogin {
        width: 100%;
        display: flex;
        justify-content: center;
    }

    .divButtonLogin #idButtonLogin {
        height: 2.5rem;
        width: 7rem;
        margin-top: 10px;
        border-radius: 15px;
        font-size: 1rem;
        color: #0000008e;
        font-weight: bolder;
        border: none;
        background-image: linear-gradient(to right, #EECB0A, #EC9317, #E95E20);
    }
}

/*DESKTOP*/
@media screen and (min-width: 992px) {
    body {
        display: grid;
        grid-template-columns: 75% 25%;
        position: fixed;
        width: 100%;
        height: 100%;
    }

    header {
        position: relative; /* Necessário para o posicionamento absoluto funcionar */
    }

    .divImage {
        background-color: red;
    }

    .divImage #idImageLogin {
        width: 100%;
        height: 100%;
    }

    #idDivLogin {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
    }

    #divMensagemErro {
        display: none;
        
        position: absolute;
        
        background-color: #f2dede;
        color: #b94a48;

        width: 15vw;
        height: 7vh;
        
        top: 18%; /* Opcional, para centralizar verticalmente também */
        left: 50%;
        transform: translate(-50%, -50%);

        border-radius: 5px;
        border: 1px solid #d68d8d;
    }

    #divMensagemErro p {
        margin: auto;
    } 

    #idPhotoLogin {
        width: 160px;
        height: 160px;
        display: flex;
        margin: auto;
        margin-top: 100px;
        margin-bottom: 50px;
    }

    form {
        display: flex;
        margin: auto;
        flex-direction: column;
        max-width: 15rem;
    }

    div .single-input {
        position: relative;
        margin-bottom: 30px;
    }

    div .single-input .inputLogin {
        max-width: 15rem;
        width: 15rem;
        color: rgb(0, 0, 0);
        padding: 5px;
        border: 0;
        border-bottom: .1rem solid rgb(155, 154, 154);
        outline: 0;
    }

    #eyeIcon img {
        position: absolute;
        right: 0;
        width: 1.2rem;
        height: 1.2rem;
        cursor: pointer;
    }

    div .single-input .inputLogin:focus,
    div .single-input .inputLogin:valid {
        border-bottom: 2px solid #006b0f;
    }

    div .single-input .inputLogin:focus~label,
    div .single-input .inputLogin:valid~label {
        transform: translateY(-24px);
        font-size: .9rem;
        color: #006b0f;
    }

    div .single-input .inputLogin:focus~label,
    div .single-input .inputLogin:valid~label {
        transform: translateY(-24px);
        font-size: .9rem;
        color: #006b0f;
    }

    div .single-input label {
        position: absolute;
        left: 0;
        bottom: 5px;
        cursor: text;
        color: rgb(150, 150, 150);
        transition: 0.5s ease-in-out;
        font-size: .8rem;
    }

    div .single-input label .iconLogin img {
        width: 1rem;
        height: 1rem;
    }

    .inputLogin:focus~label .iconLogin img,
    .inputLogin:valid~label .iconLogin img {
        width: .8rem;
        height: .8rem;
        filter: brightness(0) saturate(100%) invert(24%) sepia(41%) saturate(2907%) hue-rotate(111deg) brightness(96%) contrast(104%);
    }


    .divButtonLogin {
        width: 100%;
        display: flex;
        justify-content: center;
    }

    .divButtonLogin #idButtonLogin {
        height: 2.5rem;
        width: 7rem;
        margin-top: 10px;
        border-radius: 15px;
        font-size: 1rem;
        color: #0000008e;
        font-weight: bolder;
        border: none;
        background-image: linear-gradient(to right, #EECB0A, #EC9317, #E95E20);
        cursor: pointer;
    }
}