@charset "utf-8";
/* CSS Document */

/* @import url('https://fonts.googleapis.com/css?family=Kristi'); */
@import url('https://fonts.googleapis.com/css?family=Roboto:100,300,300i,400,400i,500,500i,700,700i');
/* @import url('https://fonts.googleapis.com/css?family=Montserrat:100,400,400i,500,500i,600,600i,700,700i'); */
/* font-family:'Roboto', sans-serif; font-family:'Montserrat', sans-serif; */
@import url("../css/font-awesome/css/font-awesome.css");

body {margin:0px; padding:0px; voice-family:"\"}\""; voice-family:inherit; font-family:'Roboto', sans-serif; font-size:16px; color:#808080; background:#FFFFFF; font-weight:400; line-height:24px; background: url(../images/login/body-bg.webp) 50% 50% no-repeat; background-size: cover; overflow-x: hidden; }

@font-face {
    font-family:'Kristen ITC';
    src:url('KristenITC-Regular.woff2') format('woff2'),
        url('KristenITC-Regular.woff') format('woff');
    font-weight:normal;
    font-style:normal;
}

.player-video { width: 100%; height: 100vh !important; object-fit: cover; padding: 0; margin: 0; display: flex; position: absolute; left: 0; top: 0; }

/* Comman Classes */
a, img, span {border:0; margin:0; padding:0;}
a, button {text-decoration:none; color:#70C32A; -webkit-transition:all .3s linear; -moz-transition:all .3s linear; transition:all .3s linear; }
a:hover, a:focus {text-decoration:none; color:#3973C7; outline:none; }
p {padding:0px; margin:0px; border:0px;}
img {line-height:0px; max-width:100%; padding:0; margin:0; border:none; }
.btn:focus,
input:focus,
select:focus,
textarea:focus { outline:none; }
input,
select,
textarea { -webkit-transition:all 0.3s ease-in-out; -moz-transition:all 0.3s ease-in-out; -o-transition:all 0.3s ease-in-out; transition:all 0.3s ease-in-out; box-shadow:none !important; -webkit-appearance:none; -moz-appearance:none; appearance:none; }
* {list-style:none; margin:0px; padding:0px; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; -moz-hyphens:none;}
li {display:list-item; border:0; margin:0; padding:0;}
.clear {clear:both;}
::selection{background:#55b0bd; color:#fff; /* Safari */}
::-moz-selection{background:#55b0bd; color:#fff; /* Firefox */}
::-webkit-selection{background:#55b0bd; color:#fff; /* Firefox */}

h1,h2,h3,h4,h5,h6 {margin:0px; padding:0px; letter-spacing:0; font-family:Georgia; color:#13569b; font-size:22px; font-weight:400; font-family:'Roboto', sans-serif; }

.wrapper { width:100%; padding:0; margin:0; position: relative; z-index: 3; }

.finix-logo { position: absolute; left: 40px; top: 40px; }
.finix-logo img { display: block; width: 114px; }

.design-by { position: absolute; right: 24px; bottom: 24px; font-size: 11px; color: #000; line-height: 15px; text-align: right; }
.design-by .powered { display: block; opacity: 0.5; }
.design-by img { display: block; width: 63px; padding-bottom: 3px; }
.quote-animation { position: absolute; left: 0; bottom: 0; padding: 0 250px 24px 24px; font-size: 30px; line-height: 40px; color: #000; width: 50%; height: 100vh; display: flex; align-items: center; z-index: -1; }
.quote-animation .name { font-size: 20px; line-height: 20px; font-weight: 300; display: block; padding-top: 15px; }

.login-body { width: 100%; height: 100vh; overflow: auto; display: flex; align-items: center; justify-content: center; padding: 15px 15px; }
.login-box { width: 100%; max-width: 400px; margin: 0 auto; opacity: 0; }
.login-box.start-delay { animation: LoginBoxOnLoad 0.6s; opacity: 1; }
.login-box .login-box-body-inn { width: 100%; animation: LoginBoxBody 1.5s; /* animation-delay: 1s; */ animation-delay: 0.5s; }
.login-animation .login-box { animation: LoginBox 0.5s; }
.login-box.hide-box { opacity: 0; visibility: hidden; }
.WelcomeText { opacity: 0; position: absolute; z-index: -1; width: 100%; display: flex; justify-content: center; }
.login-text { width: 100%; opacity: 1; animation: LoginText 1s; transform: scale(1); text-align: center; /* z-index: 1; */ /* Temp */ /* opacity: 0; */ }
.login-text.delay { animation: LoginTextDelay 1s; }
.login-text.hide-text { opacity: 0; visibility: hidden; }

@keyframes LoginBoxBody {
    0% { opacity: 0; }
    50% { opacity: 0; } 
    100% { opacity: 1; } 
}

@keyframes LoginBoxOnLoad {
    from { transform: scale(0.6); opacity: 1; } 
    to { transform: scale(1); opacity: 1; } 
}
@keyframes LoginBox {
   from { transform: scale(1); opacity: 1; } 
   to { transform: scale(0.6); opacity: 0; } 
}

@keyframes LoginText {
    from { transform: scale(0); opacity: 0; filter: blur(20px); } 
    to { transform: scale(1); opacity: 1; } 
}

@keyframes LoginTextDelay {
    0% { transform: scale(1); opacity: 1; } 
    70% { opacity: 0; } 
    100% { transform: scale(8); opacity: 0.13; filter: blur(30px); } 
}

.gr-overlay { background: linear-gradient(to bottom,  rgba(255,255,255,0.50) 0%,rgba(255,255,255,0.12) 100%); width: 100%; height: 100%; z-index: 1; position: absolute; }

.login-text-body { display: inline-block; font-size: 128px; line-height: 128px; color: #fff; font-weight: 700; text-align: left; }
.login-text-body .welcome { font-size: 60px; line-height: 60px; font-weight: 300; opacity: 0.87; display: block; padding-bottom: 4px; }
.login-text-body .name-user { display: block; opacity: 0.87; text-transform: uppercase; }
.login-box-body { padding: 30px; width: 100%; background: #fff; border-radius: 24px; box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.12); position: relative; }
.login-box-body:before { position: absolute; right: 0; top: 0; width: 120px; height: 120px; content: ''; border-radius: 0px 24px 0px 0px; background: url(../images/login/corner-bg.svg) 50% 50% no-repeat; background-size: 120px 120px; }

.jyoti-logo { width: 100%; padding: 0 0 30px 0; }
.jyoti-logo img { display: block; width: 96px; }

.form-group { width: 100%; padding: 0; margin: 0 0 15px 0; position: relative; }
.form-group label.control-label { width: 100%; padding: 0; margin: 0 0 6px 0; display: block; font-size: 13px; line-height: 18px; font-weight: 500; color: #1B1D1F; }
.form-group .form-control { width: 100%; border-radius: 7px; border: 1px solid #CDD5DC; background: #FFF; box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.08) inset !important; outline: none !important; padding: 0 10px; margin: 0; text-shadow: none; font-size: 14px; line-height: 32px; font-weight: 500; color: #1B1D1F; height: 32px; font-family:'Roboto', sans-serif; }
.form-group .form-control.disabled,
.form-group .form-control:disabled { background: #edf0f3; border-color: #d4d9dd; box-shadow: inset 0px 2px 3px 0px rgba(0, 0, 0, 0.08) !important; }
.form-group .form-control.error { border-color: #ee4646; outline: 1px solid #ee4646 !important; outline-offset: 0px !important; }

.form-group label.error { color: #ee4646; font-size: 13px; font-weight: 500; line-height: 18px; margin-top: 7px; padding-left: 25px; padding-left: 0; position: relative; width: 100%; display: block; position: absolute; right: 0; top: 0; margin: 0; width: auto; }
.form-group label.error:before { content: ''; position: absolute; left: 0; top: 0; width: 18px; height: 18px; background: url(../images/login/alert-triangle.svg) 50% 50% no-repeat; background-size: 18px 18px; opacity: 0; visibility: hidden; }

body .mt-15 { margin-top: 15px; }
.form-group.remember-forgot { margin: 0px 0 19px 0; padding-top: 4px; }
.remember-forgot { display: flex; justify-content: space-between; align-items: center; font-size: 12px; line-height: 18px; color: #1B1D1F; }
.remember-forgot .link { /* text-decoration: underline; */ color: #1B1D1F; opacity: 0.5; position: relative; }
.remember-forgot .link:before { position: absolute; left: 0; bottom: -1px; width: 0px; height: 1px; content: ''; opacity: 0.24; background: #1B1D1F; transition: width 0.5s; }
.remember-forgot .link:hover:before,
.remember-forgot .link:active:before { width: 100%; }
.remember-forgot .link.linkdeactive { pointer-events: none; opacity: 0.8; }
.remember-forgot .link:hover,
.remember-forgot .link:active { color: #1E3149; color: #1B1D1F; opacity: 1; }
.remember-forgot .timer-icon { position: relative; padding-left: 25px; font-size: 13px; }
.remember-forgot .timer-icon .feather { width: 18px; height: 18px; position: absolute; left: 0; top: 0; opacity: 0.5; }

.otp-link { width: 100%; text-align: right; padding: 15px 0 0 0; }
.otp-link .login-btn-icon { font-size: 13px; line-height: 18px; color: #1B1D1F; /* text-decoration: underline; */ font-weight: 500; position: relative; padding-left: 25px; display: inline-block; }
.otp-link .login-btn-icon .feather { position: absolute; left: 0; top: 0px; width: 18px; height: 18px; opacity: 0.8; }
.otp-link .login-btn-icon:hover,
.otp-link .login-btn-icon:active { color: #1B1D1F; }

.submit-btn { width: 100%; }
.submit-btn .btn { width: 100%; display: block; border: none; outline: none; padding: 9px 10px; font-size: 13px; line-height: 18px; font-family:'Roboto', sans-serif; color: #fff; font-weight: 500; cursor: pointer; border-radius: 18px; background: #1E3149; position: relative; overflow: hidden; z-index: 1; /* background: linear-gradient(0deg, rgba(30, 49, 73, 0.48) 0%, #1E3149 80%), linear-gradient(90deg, #00C0EF 0%, #F7941E 38%, #F7941E 52%, #E72F8A 100%); */
    background-size: 200% 100%; }
.submit-btn .btn:disabled { pointer-events: none; cursor: not-allowed; opacity: .4; }
.submit-btn .btn:hover,
.submit-btn .btn:active { color: #fff; }
.submit-btn .btn:before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: inherit; background-size: inherit; z-index: -1; transition: opacity 0.5s ease-in-out; opacity: 0; background: linear-gradient(0deg, rgba(30, 49, 73, 0.48) 0%, #1E3149 80%), linear-gradient(90deg, #00C0EF 0%, #F7941E 38%, #F7941E 52%, #E72F8A 100%); background-size: 200% 100%; }
.submit-btn .btn:hover:before,
.submit-btn .btn:active:before { animation: animate-gradient 2s linear infinite; opacity: 1; }
@keyframes animate-gradient {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

.submit-btn .btn.login-btn-icon { background: #eef0f3; color: #475266; text-align: center; }
.submit-btn .btn.login-btn-icon:before { opacity: 0; }
.submit-btn .btn.login-btn-icon span { position: relative; display: inline-block; padding-left: 26px; }
.submit-btn .btn.login-btn-icon .feather { color:#85919e; position: absolute; left: 0; top: 0px; width: 18px; height: 18px; }
.submit-btn .btn.login-btn-icon:hover,
.submit-btn .btn.login-btn-icon:active { background: #d9dee4; color: #475266; }

.form-group .checkbox { position: relative; cursor: pointer; padding-left: 30px; }
.form-group .checkbox .icheckbox_square-blue { width: 22px; height: 22px; position: absolute; left: 0; top: 0; border-radius: 7px; border: 1px solid #CDD5DC; background: #FFF; box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.08) inset; cursor: pointer; }
.form-group .checkbox .icheckbox_square-blue.checked { border-radius: 7px; border: 1px solid #1E923A; background: #30B751 url(../images/login/check-white.svg) 50% 50% no-repeat; background-size: 14px 10px; box-shadow: 0px 2px 3px 0px rgba(0, 0, 0, 0.08) inset; }
.form-group .checkbox .list-item-label { font-size: 12px; line-height: 22px; color: #1B1D1F; cursor: pointer; }

body .alert { color: #ee4646; font-size: 13px; font-weight: 500; line-height: 18px; margin-top: 7px; margin-bottom: 7px; padding: 0 25px 0 25px; position: relative; width: 100%; display: block; }
body .alert:before { content: ''; position: absolute; left: 0; top: 0; width: 18px; height: 18px; background: url(../images/login/alert-triangle.svg) 50% 50% no-repeat; background-size: 18px 18px; }
body .alert .close { font-size: 0; width: 18px; height: 18px; background: url(../image/x.svg) center center no-repeat; background-size: auto; background-size: 18px 18px; opacity: 0.3; position: absolute; right: 0px; top: 0px; color: #000; }
body .alert .close:hover,
body .alert .close:active { opacity: 0.6; }
body .alert.alert-success { color: #1E923A; }
body .alert.alert-success:before { background-image: url(../images/login/done-green.svg); }

/* ==============================
   		   Responsive Main
============================== */
@media only screen and (max-width: 1370px) { 
}

@media only screen and (max-width: 1170px) { 
.login-text-body { font-size: 80px; line-height: 80px; }
.login-text-body .welcome { font-size: 30px; line-height: 30px; }
}

@media only screen and (max-width: 999px) { 
}

@media only screen and (max-width: 767px) { 
.finix-logo { left: 0px; top: 0px; position: relative; padding: 15px 15px; }
.design-by { right: 0px; bottom: 0px; padding: 15px; position: relative; text-align: right; display: flex; flex-direction: column; align-items: end; }
.login-body { height: calc(100vh - 132px); }
}

@media only screen and (max-width: 599px) {
.login-text-body { font-size: 30px; line-height: 30px; }
.login-text-body .welcome { font-size: 18px; line-height: 18px; }
}

@media screen and (max-height: 400px) {
.login-body { align-items: inherit; }
}