/* OpenSans */
@font-face {font-family: "OpenSans"; src: url(../fonts/OpenSans/OpenSans-Light.woff2); font-weight: 300;} 
@font-face {font-family: "OpenSans"; src: url(../fonts/OpenSans/OpenSans-Regular.woff2); font-weight: 500;} 
@font-face {font-family: "OpenSans"; src: url(../fonts/OpenSans/OpenSans-Semibold.woff2); font-weight: 600;} 
@font-face {font-family: "OpenSans"; src: url(../fonts/OpenSans/OpenSans-Bold.woff2); font-weight: 700;} 
@font-face {font-family: "OpenSans"; src: url(../fonts/OpenSans/OpenSans-ExtraBold.woff2); font-weight: 900;} 

body, html {background-color: #dce8f9; height: 100%; font-family: 'OpenSans', sans-serif; }
a {font-size: 12px; line-height: 1.7; color: #9e2136; margin: 0px;}
a:focus {outline: none !important; }
a:hover {text-decoration: none; color: #233567; }

.text-xs{font-size: 12px;}
.text-sm{font-size: 13px;}

/* Checkbox & Radio */
.themeCheck{white-space: nowrap;}
.themeCheck input[type="checkbox"], .themeCheck input[type="radio"] {-webkit-appearance: none; -moz-appearance: none; -ms-appearance: none; -o-appearance: none; appearance: none; height: 18px; width: 18px; transition: all 0.15s ease-out 0s; border-radius: .2rem; cursor: pointer; margin-right: 0.5rem; vertical-align: middle; border: solid 2px #5191af; margin-bottom: 3px;}
.themeCheck input[type="checkbox"]:hover, .themeCheck input[type="radio"]:hover {background: #92c4db; }
.themeCheck input[type="checkbox"]:checked, .themeCheck input[type="radio"]:checked {background: #5191af; }
.themeCheck input[type="checkbox"]:checked::before, .themeCheck input[type="radio"]:checked::before {width: 4px; height: 7px; display: flex; content: ''; border: 2px solid #fff; border-left: none; border-top: none; transform: translate(5.25px,2.8px) rotate(45deg); }
.themeCheck input[type="radio"] {border-radius: 50%;}

/*//////////////////////////////////////////////////////////////////
[ login ]*/

.shape-1 {background: #fff; width: 320px; height: 50%; position: absolute; overflow: hidden; clip-path: polygon(23% 0, 100% 0%, 100% 100%, 0% 100%); right: 25px; top: 0;}
.shape-2 {background: #233567; width: 360px; height: 100%; position: absolute; overflow: hidden; clip-path: polygon(42% 0, 100% 0%, 101% 100%, 0% 100%); right: 0px; }
.shape-3 {background: url(../../img/bg.jpg) no-repeat; background-size: cover; width: 510px; position: absolute; bottom: 0px; right: 0px; height: 100%; }
.container-login {padding: 47px 15px}
.bankLogo{padding: 40px; text-align: center;}
.bankLogo img{border-radius: 5px;}
.wrap-login {background: #fff; border-radius: 10px; overflow: hidden; display: flex; flex-wrap: wrap; justify-content: space-between; padding-bottom: 15px; position: relative; min-height: 420px; box-shadow: rgba(38, 57, 77, 0.8) 0px 20px 30px -10px; width: 900px; margin: 0 auto;} 
.wrap-login h6 {padding: 40px 0px 30px 0; font-size: 22px; text-align: center; font-weight: bold; color: #233567; display: block; }
.wrap-login h6 small {font-size: 14px; color: #ddd; font-weight: 500; display: block; line-height: 1.5; padding-top: 5px; }
.login-pic img {max-width: 100%; }
.login-form-title {padding-bottom: 40px; text-align: center; color: #000; }
.wrap-input {position: relative; width: 100%; z-index: 1; margin-bottom: 10px; }
.loginInput {font-size: 16px; font-weight: 600; line-height: 1.5; color: #233567; display: block; width: 100%; border: 0; height: 42px; border-radius: 25px; padding: 0 20px 0 20px; border: solid 2px #233567;}
.loginInput:disabled{background: #ededed;}
.loginInput::placeholder {color: #233567 }
.loginInput:focus {background: #fff; color: #233567; border-color: #233567; box-shadow: 0 0 0 .25rem rgba(50, 83, 180, .25);}
.symbol-input {font-size: 16px; display: flex; align-items: center; justify-content: center; position: absolute; border-radius: 0px 5px 5px 0px; bottom: 0; right: 0; width: 45px; height: 100%; pointer-events: none; color: #fff; background: #233567; transition: all 0.4s; }
.input100:focus+.focus-input+.symbol-input {color: #233567; padding-left: 28px; }
.form-btn {font-size: 16px; font-weight: 600; line-height: 1.5; color: #fff; height: 35px; border-radius: 25px;  display: flex; justify-content: center; align-items: center; padding: 0 35px; transition: all 0.4s; margin-top: 20px; border: solid 1px transparent;}
.form-btn:hover, .form-btn:active, .form-btn:focus-visible {color: #fff; box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;} 
.form-btn:disabled {background: #0c2734; color: #fff; border: none; }
.loginBtn{background: #9e2136;}
.loginBtn:hover, .loginBtn:active, .loginBtn:first-child:active, .loginBtn:focus-visible{background: #233567;}
.resetBtn{background: #65696a;}
.resetBtn:hover, .resetBtn:active, .resetBtn:first-child:active, .resetBtn:focus-visible{background: #5c5c5c; border: solid 1px #525252;}
.secondaryText {font-size: 14px; color: #666;}
.secondaryText a{text-decoration: none;}
.readText{font-size: 14px; color: #5191af; font-weight: 400;}
.imgVerify{background: #397e9f; margin-left: 10px; color: #fff;}
.imgVerify .imgText{padding: 12px 10px }