/* 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: #eaf9dc; height: 100%; font-family: 'OpenSans', sans-serif; }
a {font-size: 14px; line-height: 1.7; color: #ccc; margin: 0px;}
a:focus {outline: none !important; }
a:hover {text-decoration: none; color: #87cefa; }

.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: #87cefa; width: 360px; height: 100%; position: absolute; overflow: hidden; clip-path: polygon(42% 0, 100% 0%, 101% 100%, 0% 100%); right: 0px;}
.shape-3 {width: 480px; position: absolute; bottom: 0px; right: -90px; clip-path: polygon(30% 0, 100% 0%, 100% 100%, 0% 100%); height: 100%; }
.container-login {padding: 47px 15px}
.bankLogo{padding: 40px; text-align: center;}
.bankLogo img{border-radius: 5px;}
.wrap-login {background: #164054; border-radius: 10px; overflow: hidden; display: flex; flex-wrap: wrap; justify-content: space-between; padding-bottom: 15px; position: relative; min-height: 480px; box-shadow: rgba(38, 57, 77, 0.8) 0px 20px 30px -10px;}
.wrap-login h6 {padding: 40px 0px 30px 0; font-size: 22px; text-align: center; font-weight: bold; color: #87cefa; 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: #fff; }
.wrap-input {position: relative; width: 100%; z-index: 1; margin-bottom: 10px; }
.loginInput {font-size: 15px; line-height: 1.5; color: #fff; display: block; width: 100%; background: #112f3c; border: 0; height: 42px; border-radius: 5px; padding: 0 60px 0 20px; }
.loginInput:disabled{background: #112f3c;}
.loginInput::placeholder {color: #fff }
.loginInput:focus {background: #29627c; color: #fff;}
.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: #164054; background: #87cefa; transition: all 0.4s; }
.input100:focus+.focus-input+.symbol-input {color: #87cefa; padding-left: 28px; }
.form-btn {font-size: 16px; font-weight: 600; line-height: 1.5; color: #fff; height: 35px; border-radius: 5px;  display: flex; justify-content: center; align-items: center; padding: 0 25px; transition: all 0.4s; margin-top: 10px; border: solid 1px transparent;}
.form-btn:hover, .form-btn:active, .form-btn:focus-visible {color: #000; box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;} 
.form-btn:disabled {background: #0c2734; color: #fff; border: none; }
.loginBtn{background: #87cefa; color: #333;}
.loginBtn:hover, .loginBtn:active, .loginBtn:first-child:active, .loginBtn:focus-visible{background: #87cefa; border: solid 1px #3b98c5;}
.resetBtn{background: #516d7a;}
.resetBtn:hover, .resetBtn:active, .resetBtn:first-child:active, .resetBtn:focus-visible{background: #5c5c5c; border: solid 1px #525252;}
.secondaryText {font-size: 14px; color: #666; font-style: italic; }
.readText{font-size: 14px; color: #5191af; font-weight: 400;}
.imgVerify{background: #397e9f; margin-left: 10px; color: #fff;}
.imgVerify .imgText{padding: 12px 10px }
.footer {background: #000000; border-top-color: #000000; color: #fff; display: flex; justify-content: space-between;}
.footer-inner, .footer-inner a {color: #fff;}
.footer-inner .list-inline {display: flex; justify-content: space-between; }