main {
    width: 100vw;
    height: 100vh;
    display: flex;
}

.signin {
    background-color: var(--bluecolor);
    width: 40vw;
    height: 100vh;
}

.bg {
    background-image: url(../img/login-bg.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    width: 60vw;
    height: 100vh;
}

.signinForm {
    width: 100%;
    height: 65vh;
    background-color: var(--whitecolor);
    border-top-left-radius: 15vh;
    border-top-right-radius: 15vh;
    padding: 50px 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--graycolor);
}

.signinForm form {
    width: 60%;
    padding: 10px 0;
}

.signinForm form div {
    display: flex;
}

.signinForm input {
    background-color: var(--whitecolor);
    color: var(--graycolor);
    border: 0;
    border-bottom: 2px solid var(--graycolor); 
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
    transition: 0.2s ease;
}

.signinForm input::placeholder {
    color: var(--graycolor);
}

.signinForm input::-webkit-input-placeholder {
    color: var(--graycolor);;
}

.signinForm input::-moz-placeholder {
    color: var(--graycolor);;
}

.signinForm input::-ms-input-placeholder {
    color: var(--graycolor);;
}

.signinForm input::-moz-placeholder {
    color: var(--graycolor);;
}

.signinForm input:focus {
    background-color: var(--whitecolor);
    color: var(--graycolor);
    border: 0;
    border-bottom: 2px solid var(--bluecolor); 
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
    box-shadow: none;
}

.signinForm input:invalid:focus, input:valid:focus {
    box-shadow: none !important;
}

.signinForm div#formMSG {
    width: 100%;
    text-align: center;
    padding: 5px 10px;
    display: block;
}

.btnLogin { 
    background-color: var(--bluecolor);
    color: white;
    font-size: 1.2vw;
    padding: 10px 50px;
    border-radius: 25px;
    position: relative;
    border: none;
}

.btnLogin:active:not(:disabled) {
    background-color: var(--bluecolor);
    color: white;
    box-shadow: inset 0 0 20px rgba(49, 138, 172, 0.5), 0 0 20px rgba(49, 138, 172, 0.4);
    outline-color: rgba(49, 138, 172, 0);
    outline-offset: 80px;
    text-shadow: 1px 1px 6px #fff;
}

.btnLogin:disabled {
    filter: opacity(0.7);
}

.signinLogo {
    height: 25vh;
    padding-top: 2vh;
    padding-bottom: 2vh;
    text-align: center;
}

.logo {
    width: 30vh;
}

.filterMainColor {
    filter: invert(0.6);
}

.signinFooter {
    height: 5vh;
    background-color: var(--whitecolor);
    text-align: center;
    color: var(--graycolor);
}

#password-group .input-group-text {
    cursor: pointer;
    background-color: unset;
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
    border-bottom: 2px solid var(--graycolor) !important; 
    border-radius: 0;
}

#password-group input.form-control:focus + .input-group-text {
    border-bottom: 2px solid var(--bluecolor) !important; 
}

@media (orientation: portrait) {
    .bg {
        display: none;
    }

    .signin {
        width: 100vw;
        background-color: transparent;
        background-image: url(../img/login-bg.jpg);
        background-size: cover;
        background-repeat: no-repeat;
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
    }

    .signinForm, .signinFooter {
        background-color: rgba(255, 255, 255, 0.8);
    }

    .btnLogin {
        font-size: 2vh;
    }

    .signinForm {
        padding: 0;
    }

    .signinForm input, .signinForm input:active:not(:disabled), .signinForm input:focus {
        background-color: transparent;
    }
}