body {
    color: #153B62;
}
* {
    font-family: 'Roboto';
    font-weight: 300;
    user-select: none;
    -webkit-user-select: none;
}
div {
    box-sizing: border-box;
    display: block;
/* position: absolute; */}
input, input:focus, select:focus, textarea {
    font-size: 16px;
    outline: none;
    user-select: initial!important;
    -webkit-user-select: initial!important;
}
#app {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    background-image: url('/static/bg.png');
    background-repeat: no-repeat;
    background-size: cover;
}
/* Login screen */
.login-screen {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    /* user-select: none;
     */
    opacity: 0;
    transition: 0.6s;
}
.login-screen.shown {
    opacity: 1;
}
.login-screen img {
    width: 198px;
    max-width: min(100%, 329px);
    left: 50%;
    transform: translate(-50%, -10px);
    position: absolute;
    top: 23px;
    transition: 0.3s;
}
.login-screen.shown img {
    transform: translate(-50%, 0);
}
.login-screen .forgot-password {
    position: absolute;
    bottom: 30px;
    text-align: center;
    width: 100%;
}
.login-screen .forgot-password span {
    font-weight: 400;
    letter-spacing: 1px;
    font-size: 87%;
}
.login-screen .content {
    position: absolute;
    top: 237px;
    transform: translate(0, -50%);
    width: 100%;
    padding: 23px;
    box-sizing: border-box;
}
.login-screen .content .title {
    text-align: center;
    font-size: 21px;
    font-weight: 500;
    letter-spacing: 1px;
    margin-bottom: 22px;
    transform: translateY(-15px);
    transition: 0.3s;
    opacity: 0;
    transition-delay: 0.1s;
}
.login-screen.shown .content .title {
    transform: translateY(0);
    opacity: 1;
}
.login-screen .content .input-row {
    margin-bottom: 22px;
display: block;}
.login-screen .content input {
    width: 100%;
    display: block;
    padding: 8px 12px;
    box-sizing: border-box;
    border: none;
    background-color: #fff!important;
    border-radius: 4px;
    transition: 0.2s;
}
.login-screen .content .input-row.first {
    transition-delay: 0.2s;
    transition: 0.3s;
    opacity: 0;
    transform: translateY(-10px);
}
.login-screen.shown .content .input-row.first {
    transform: translateY(0);
    opacity: 1;
}
.login-screen .content .input-row.second {
    transition-delay: 0.3s;
    transition: 0.3s;
    opacity: 0;
    transform: translateY(-10px);
}
.login-screen.shown .content .input-row.second {
    transform: translateY(0);
    opacity: 1;
}
.login-screen .content .input-row label {
    display: block;
    font-weight: 400;
    margin-bottom: 5px;
    letter-spacing: 1px;
}
.login-screen .content button {
    border: none;
    background: rgb(67,95,124);
    background: linear-gradient(90deg, rgba(67,95,124,1) 0%, rgba(43,128,101,1) 100%);
    color: #fff;
    width: 100%;
    box-sizing: border-box;
    padding: 11px;
    border-radius: 4px;
    font-weight: 400;
    letter-spacing: 1px;
    font-size: 15px;
    opacity: 0;
    transition: 0.3s;
    transition-delay: 0.25s;
    transform: translateY(-15px);
}
.login-screen.shown .content button {
    opacity: 1;
    transform: translateY(0);
}

@media screen and (-webkit-min-device-pixel-ratio:0) {
    input[type="password"] {
        font-family: Verdana;
        letter-spacing: 0.2em;
    }
}

.login-screen .error {
color: #C3186B;
width: calc(100% - 10px);position: absolute;left: 5px;background-color: #fff;padding: 2px;display: block;top: 5px;z-index: 6;box-sizing: border-box;padding: 21px;letter-spacing: 1px;border-radius: 6px;font-size: 90%;box-shadow: 0 0 12px #0000000d;opacity: 0.95;transform: translateY(calc(-100% - 26px));transition: 0.4s;opacity: 0;}

.login-screen .error.shown {
    opacity: 0.95;
    transform: translateY(0);
}

.login-screen .success {
    color: #2b8065;
    font-size: 110%;
    width: calc(100% - 10px);position: absolute;left: 5px;background-color: #fff;padding: 2px;display: block;top: 5px;z-index: 6;box-sizing: border-box;padding: 21px;letter-spacing: 1px;border-radius: 6px;font-size: 90%;box-shadow: 0 0 12px #0000000d;opacity: 0.95;transform: translateY(calc(-100% - 26px));transition: 0.4s;opacity: 0;}

.login-screen .success.shown {
    opacity: 0.95;
    transform: translateY(0);
}

.login-screen p {
    font-size: 85%;
    letter-spacing: 1px;
}

/* Dashboard */

.dashboard {

display: block;width: 100%;top: 0;height: 100%;left: 0;/* background-color: #fff; */position: absolute;z-index: 5;}

.dashboard .content {

position: absolute;left: 0;top: 0;width: 100%;height: calc(100% - 66px);overflow-y: auto;}

.dashboard .menu {

background-color: #fff;position: absolute;bottom: 0;width: 100%;display: flex;/* padding: 12px 0; *//* box-shadow: 1px 1px #ddd; *//* border-top: 1px solid #153B62; */
opacity: 0;
    transform: translateY(70px);
    transition: 0.3s;
}

.dashboard .menu.shown {
    opacity: 1;
    transform: translateY(0);
}

.dashboard .menu .item {

width: 20%;text-align: center;padding: 10px 0;}

.dashboard .menu .item .icon {
    opacity: 1;
font-size: 134%;display: block;margin-bottom: 5px;}

.dashboard .menu .item .caption {

font-size: 79%;/* font-weight: 600; */}

.dashboard .menu .item.active .icon {
    opacity: 1;
}


.dashboard .menu .item.active .caption {
    font-weight: 400;
}