@font-face {
    src: url(/assets/fonts/Roboto-Medium.woff);
    font-family: Roboto;
}

@font-face {
    src: url(/assets/fonts/Roboto-Bold.woff);
    font-family: Roboto;
    font-weight: bold;
}

body {
    min-height: 100vh;
    width: 100%;
    background: url('/mxfeye/login/assets/images/login-bg.jpg') !important;
    background-size: cover !important;
    padding: 2%;
    font-family: Roboto;
}

img.logo {
    max-height: 5.5vw;
}

#login_box,
#register_box {
    background: rgba(0, 0, 0, .5);
    padding: 1.7vw;
}

.login-form input {
    background-color: #ccc !important;
    padding: .5vw .8vw;
    height: auto !important;
    border-radius: 0.5vw;
}

.login-button {
    background: #fff !important;
    color: #000 !important;
    padding: .8vw !important;
    border-radius: .5vw !important;
    font-weight: bold;
}

.login-button:hover {
    background-color: #ddd !important;
}

@media (min-width: 1025px) {

    body,
    .form-control,
    .btn {
        font-size: 1.1vw;
    }

    .form-title {
        font-size: 1.6vw;
    }

    .page-title {
        font-size: 2.5vw;
    }

    .page-subtitle {
        font-size: 1.8vw;
    }

}

@media (max-width: 1023px) {
    img.logo {
        max-height: 100px;
        display: block;
        margin: 0 auto 30px;
    }

    body,
    .form-control,
    .btn {
        font-size: 1rem;
    }

    #login_box,
    #register_box {
        padding: 20px;
    }

    .page-title {
        font-size: 1.8rem;
    }

    .page-subtitle {
        font-size: 1.6rem;
    }

    .form-title {
        font-size: 1.6rem;
    }

    .login-button {
        padding: 10px !important;
        border-radius: 10px !important;
    }

    .login-form input {
        padding: 8px 10px !important;
        border-radius: 10px !important;
    }

}

@media (max-width: 767px) {
    .page-title {
        font-size: 19px;
    }

    .page-subtitle {
        font-size: 17px;
    }

    .form-title {
        font-size: 18px;
    }

}