@font-face {
    font-family: 'robotolight';
    src: url('../fonts/roboto-light-webfont.woff2') format('woff2'),
         url('../fonts/roboto-light-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}
@font-face {
    font-family: 'robotoregular';
    src: url('../fonts/roboto-regular-webfont.woff2') format('woff2'),
         url('../fonts/roboto-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}
@font-face {
    font-family: 'robotomedium';
    src: url('../fonts/roboto-medium-webfont.woff2') format('woff2'),
         url('../fonts/roboto-medium-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}
@font-face {
    font-family: 'robotobold';
    src: url('../fonts/roboto-bold-webfont.woff2') format('woff2'),
         url('../fonts/roboto-bold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}
@font-face {
    font-family: 'robotoblack';
    src: url('../fonts/roboto-black-webfont.woff2') format('woff2'),
         url('../fonts/roboto-black-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

html { height: 100%; }
body { font-family: 'robotoregular'; font-size: 16px; background: #0c213a; color: rgb(35,31,32); position: relative; padding: 0; margin: 0; min-height: 100%; }

h1 { font-family: 'robotobold'; font-weight: normal; font-size:3rem; color: #fff; margin: 0 0 1rem; }
h1 span { color: #ee2227; }

input:focus { outline: 0; }
input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, textarea:-webkit-autofill, textarea:-webkit-autofill:hover, textarea:-webkit-autofill:focus, select:-webkit-autofill, select:-webkit-autofill:hover, select:-webkit-autofill:focus { -webkit-text-fill-color: rgba(37,47,74,0.6); -webkit-box-shadow:0 0 0px 1000px rgb(var(--white)) inset !important; }
button, .btn { box-shadow: none !important; }

.space { height: 15px; }
.shadow { box-shadow: 0 .5rem 1rem rgba(0,0,0,.1) !important; }

.sub-title { font-size: 1rem; color: rgba(37,47,74,0.6); }

.login-message { max-width: 960px; margin: 0 auto; color: #fff; position: absolute; transform: translateY(-50%); top: 50%; left: 0; right: 0; font-size: 1.75rem; line-height: 2.5rem; font-family: 'robotolight'; font-weight: normal; }

.input-group { position: relative; display: flex; flex-wrap: wrap; align-items: stretch; width: 100%; }
.form-field-wrapper .password-toggle { cursor: pointer; }
.input-group>:not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback) { margin-left: -1px; border-top-left-radius: 0; border-bottom-left-radius: 0; }
.input-group:not(.has-validation)>.dropdown-toggle:nth-last-child(n+3), .input-group:not(.has-validation)>.form-floating:not(:last-child)>.form-control, .input-group:not(.has-validation)>.form-floating:not(:last-child)>.form-select, .input-group:not(.has-validation)>:not(:last-child):not(.dropdown-toggle):not(.dropdown-menu):not(.form-floating) { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.input-group>.form-control, .input-group>.form-floating, .input-group>.form-select { position: relative; flex: 1 1 auto; width: 1%; min-width: 0; }

.form-field-wrapper { border: 1px solid rgba(37,47,74,0.25); padding: 9px 10px; border-radius: 0.2rem; }
.form-field-wrapper .icon { width: 20px; height: 20px; font-size: 20px; opacity: 60%; }
.form-group { margin-bottom: 0.5rem; }
.form-group label { font-size: 14px; color: #333; font-weight: 500; }
.form-group .form-control { height: auto; font-size: 13px; border: 0; padding: 0; }
.form-wrapper .form-control { border: 0; padding: 0; border-radius: 0; font-size: 14px; }
.form-control:hover, .form-control:focus { box-shadow: 0px 5px 35px 0px rgb(146 199 245 / 25%); }
.fancy-checkbox .checkmark { top: 2px; }
.toggle-password { cursor: pointer; }
.input-group-text { padding-top: .25rem; padding-bottom: .25rem; border-radius: 0.15rem; }
.btn-submit { padding-left: 20px; padding-right: 20px; }

.page-wrapper { position: relative; overflow: hidden; height: 100vh; }

.welcome-wrapper { background: #fff; box-shadow: 0 .25rem 2rem 0 rgba(0,0,0,0.75); margin: 0 auto; width: 400px; position: absolute; top: 50%; right: 5%; border-radius: .25rem; transform: translateY(-50%); }
.welcome-wrapper .welcome-right { padding: 60px 45px 45px; }

.video-wrapper { position: absolute; top: 50%; left: 50%; min-width: 100%; min-height: 100%; width: auto; height: 100%; z-index: 0; -ms-transform: translateX(-50%) translateY(-50%); -moz-transform: translateX(-50%) translateY(-50%); -webkit-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); }
.video-wrapper:before { content: ""; position: absolute; width: 100%; height: 100%; top: 0; left: 0; background: rgba(12,33,58,0.96); z-index: 1; }
.video-wrapper video { width: 100%; height: auto; }

.form-tip { color: rgb(var(--red)); margin-top: 1rem; font-size: 85%; }

@media only screen and (min-width: 1600px) {
    .login-message { font-size: 2.25rem; line-height: 3.25rem; }
    .welcome-wrapper { width: 425px; }
}

@media only screen and (max-width: 991px) {
    .page-wrapper { background: #0c213a; }
    .video-wrapper { display: none; }
    .welcome-wrapper { width: 300px; height: auto; left: 0; }
}

@media only screen and (min-width: 768px) and (max-width:991px) {
    .login-message { display: none; }
    .video-wrapper { display: block; }
    .welcome-wrapper { width: 500px; }
}

@media (max-width: 767px) {
    body { background: #fff; }
    .page-wrapper { height: 100%; background: #fff; }
    .welcome-wrapper { box-shadow: none; border-radius: 0; width: 100%; height: 100%; /*top: 0;*/ bottom: 0; left: 0; right: 0; }
    .welcome-wrapper .text-xxs { /*font-size: 80%;*/ }
    .welcome-wrapper .welcome-right { padding: 25px; }
    .welcome-wrapper .welcome-right img { height: 35px !important; }
    .welcome-wrapper .welcome-right .h5.text-pink { font-size: 1.25rem; }
    .welcome-wrapper .welcome-right .h5.text-pink br { /*display: none;*/ }
}