@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; }

.alert.alert-success { font-size:13px; color:#155724; background-color:#d4edda; border:1px solid #c3e6cb; padding:0.75rem 1.25rem; margin:0; border-radius:0.2rem; }
.alert.alert-danger { font-size:13px; color:#721c24; background-color:#f8d7da; border:1px solid #f5c6cb; padding:0.75rem 1.25rem; margin:0; border-radius:0.2rem; }
.alert-success:before, .alert-danger:before { content:""; font-size:0; top:0; left:0; }

.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, .form-field-wrapper .reset-password-toggle, .form-field-wrapper .confirm-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.form-validation-error { border-color:rgba(233,61,57,0.5); }
.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:0; 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;*/ }
}