/* ---------------------------------------------------------- LOGIN */

body{
    height: 100dvh;
    overflow: hidden;
}

#login-form{
    width: 300px;
    max-width: 70vw;
}

.login-main{
    background: linear-gradient(149deg, #9a297a -53.31%, #0a1523 58.45%);
    backdrop-filter: blur(5px) !important;
    border: 1px solid #E2D7FF;
    padding: 30px;
    width: 400px;
    max-width: 85vw;
    display:flex;justify-content:center;align-items: center;
}

.login-main .logo{
    width: 100px;
}

.login-main input{
    width: 100%;
    max-width: 100% !important;
    margin-top: 10px;
    padding: 20px;
    text-align: left !important;
    background-color: #00000046;
    backdrop-filter: blur(5px);
    color: #fff;
    backdrop-filter: blur(5px);
    border:none;
}

.container-login div input{
    max-width: 100% !important;
    text-align: left !important;
}

.container-session{  
    width: 100%;
}

.site-identity{
    width: 100%;
    margin-bottom: 20px;
    gap: 20px;
    display:flex;justify-content:center;align-items: center;
}

.container-field {
    margin-bottom: 20px;
}

.base-button, .color-button{
    z-index: 99;
    padding: 15px 30px;
    display:flex;justify-content:center;align-items: center;
    gap: 10px;
    cursor: pointer;
    background-color: #000;
    color: white;
    border: 1px solid white;
    font-family: "Orbitron", serif !important;
    font-size: 16px;
    transition: all 0.5s cubic-bezier(.215, .61, .355, 1);
}

.base-button, .color-button img{
    width: 18px;
}

.base-button{
    background-color: black;
    color: #fff;
    text-transform: uppercase !important;
}

.color-button{
    text-transform: uppercase;
    font-weight: 300;
}

.base-button:hover{
    filter: invert(100%);
}

.base-button img{
    width: 15px;
}

.container-login{
    display:flex;justify-content:center;align-items: center;
    flex-direction: column;
}

.container-login div{
    width: 100%;
}

.base-button{
    width: 150px;
}

.base-button p{
    font-family: "Orbitron", serif !important;
    text-transform: uppercase;
    letter-spacing: 1px;
}

#login-error-message {
    color: #9a297a;
    justify-content: center;
    margin-top: 10px;   
}

@media screen and (orientation: landscape) and (max-height: 500px) and (max-width: 1024px) and (hover: none) and (pointer: coarse) { /* SMARTPHONE in LANDSCAPE mode */
    .login-main {
        padding: 10px;
    }
    .site-identity {
        margin-bottom: 0px;
    }
    .container-field {
        margin-bottom: 10px;
    }
    .login-main input {
        padding: 10px;
    }
    #login-error-message {
        margin-top: 0px;
        font-size: 12px;
    }
}