@charset "UTF-8";
@media only screen and (max-width:550px) {
    .boxLogin{
        margin-top: -22% !important;
    }
}
@media only screen and (min-width:551px) {
}
.bgFix{
    position: fixed;
    width: 100%;
    height: 100%;
    background-image: url("../images/loginBg.jpg");
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    z-index: 1;
}
.masLogin{
    position: fixed;
    height: 100%;
    width: 100%;
    top: 0;
    right: 0;
    z-index: 9;
}
    .boxLogin{
        display: inline-block;
        background-color: rgba(0, 0, 0, 0.46);
        min-width: 300px;
        padding: 25px;
        margin: 0 10px;
        text-align: center;
        border-radius: 22px;
        box-shadow: 2px 2px 12px rgba(0, 0, 0, 0.37);
        backdrop-filter: blur(8px);
        -webkit-transition: 0.3s;
        transition: 0.3s;
    }
    .boxLogin .logo{
        width: 120px;
        margin-bottom: 10px;
    }
    .boxLogin .label{
        font-size: 24px;
        font-weight: bold;
        margin-bottom: 18px;
        color: white;
    }
    .inputBox{
        background-color: rgb(240, 240, 240);
        width: calc(100% - 30px);
        padding: 12px 12px 12px 18px;
        margin: 5px 0;
        border-radius:22px;
    }
    .inputBox i{
        float: left;
        width: 40px;
        font-size: 22px;
        color: rgb(64, 62, 62);
    }
        .inputBox input[type=text],.inputBox input[type=password]{
            font-size: 15px;
            outline: none;
            border: none;
            background: transparent;
            width: calc(100% - 80px);
            margin-right: 20px;
        }
    .boxLogin .btn{
        outline: none;
        border: none;
        cursor: pointer;
        font-size: 15px;
        padding: 8px 20px;
        float: right;
        border-radius: 22px;
        margin-top: 14px;
        -webkit-transition: 0.3s;
        transition: 0.3s;
    }

    .btnGreen{
        background-color: rgb(23, 137, 161);
        color: white;
    }
        .btnGreen:hover{
            background-color: rgb(31, 172, 200);
        }
    .btnRed{
        background-color: rgb(247, 35, 53);
        color: white;
    }
        .btnRed:hover{
            background-color: rgb(200, 18, 34);
        }

        .validBox{
            background-color: rgb(240, 240, 240);
            width: calc(100% - 30px);
            padding: 12px 12px 12px 18px;
            margin: 5px 0;
            text-align: left;
            font-size: 14px;
            cursor: pointer;
        }
            .selValid{
                background-color: rgb(0, 223, 148) !important;
            }
            .validBox:hover{
                background-color: rgb(5, 198, 133);
            }
            .validBox i{
                float: left;
                margin-top: 11px;
                margin-right: 20px;
                font-size: 22px;
                width: 25px;
                text-align: center;
            }
.version{
    position: fixed;
    bottom: 5px;
    right: 8px;
    color: rgb(79, 79, 79);
    z-index: 7;
}