/*********************************************

Login index

*********************************************/
.index{
    padding-left: 32%;
    padding-right: 32%;
    padding-top: 10%;
}
.logo{
    width: 100%;
    text-align: center;
}
.box{
    padding: 20px;
    background-color: var(--color2);
    border-radius: 20px;
}
.box label{
    font-size: 12px;
    text-transform: uppercase;
    color: var(--color3);
    letter-spacing: 2px;
}
.box input{
    width: 100%;
    height: 40px;
    margin-top: 10px;
    padding-left: 10px;
    border-radius: 5px;
    border: 0;
    font-family: Arial; 
}
.box button{
    width: 100%;
    border: 0;
    padding: 15px;
    color: var(--color5) !important;
    background-color: var(--color3) !important;
    border-radius: 10px;
    font-size: 14px;
    text-transform: uppercase;
    cursor: pointer;
    margin-top: 20px;
}
.box button:hover{
    color: var(--color3) !important;
    background-color: var(--color1) !important;
}
.verify{
    text-align: center;
}
.version{
    text-align: center;
    margin-top: 20px;
}
.tag{
    padding: 10px;
    background-color: #f2f2f2;
    border-radius: 10px;
    font-size: 10px;
    text-transform: uppercase;
}

/*********************************************

Mobile

*********************************************/
@media (orientation: portrait) {
    .index{
        padding-left: 2%;
        padding-right: 2%;
        padding-top: 10%;
    }
}