body { padding: 0; height:100%; background: #22b573; margin: 0; font-family:CS ChatThaiUI; font-size: 16px;}
.font-kt{ font-family:'kittithada_roman'; font-size: 22px;}
.container { width:100%; height: 100%;}
.wrap { width:100%; transform: translateY(-50%); position: absolute; top: 50%;}
fieldset { border:0}
a { text-decoration: none;}
a:hover { text-decoration: underline;}
.promo .logo { padding:18px 0 6px;}
.promo .logo img { height:60px; width:auto; margin: 0 auto; display:block;}
.promo .hero { padding:16px 0 8px}
.promo .hero strong { display: block; font-weight: normal; color: #FFF; text-align: center; font-size: 30px; text-transform: uppercase;}
.promo .hero h1 { margin:0; padding:0;font-weight: normal; font-size: 56px; line-height: 42px;}
.promo .hero img { width:100%; height:auto; display:none;}
.promo .hero p { padding: 0 24px; color: rgba(255,255,255,.8);text-align: center; line-height: 24px;}
.member { padding:0}
.form { background: #FFF; box-sizing: border-box; width: 90%; padding:20px; margin: 10px auto; border-radius: 16px; box-sizing: border-box; box-shadow: 0 0 3px rgba(0,0,0,0.3);}
.form legend { font-size:40px; text-align: center; line-height:40px;font-family: 'kittithada_roman';}
/*.form input { width: 100%; font-size:16px; padding:12px; margin:4px 0; box-sizing: border-box; background:rgba(0,0,0,0.05); border:1px solid rgba(0,0,0,0.1); }*/
.form .login-btn { display: block; width: 100%; background: #22b573; cursor: pointer; color: #FFF; border:0; margin:12px 0; font-size: 24px; padding:12px;}
.modal_warp .modal_close:hover{background: #189c61}
.form .login-btn:hover {background: #04331e}

.form .login-btn-google {
display: block;
    width: auto;
    background: #d0463b;
    cursor: pointer;
    color: #FFF !important;
    border: 0;
    margin: 12px 0 0 0;
    font-size: 24px;
    padding: 12px;
    text-align: center;}
.form .login-btn-google:hover{background: #730c04}
.form .login-btn-google a {color: #fff}
.form p { display: none;}
.form p.alert { display: block; padding:8px; font-size: 15px; margin:0; background: #FFEEE2; color: #C80D0D; border-left:3px solid #C80D0D} /* alert add class */
.form .forgot { padding:12px 0; text-align: right; font-size: 15px;}
.form .forgot a { color: #000;}
.go2signup { margin:4px 0 4px; text-align: center;}
.go2signup a { color:#0056AC}
/* .go2signup.create-btn a{display: block;background: #fff;border: 1px solid #ccc;margin: 12px;padding: 8px;color: #1ea065;font-size: 32px;}
.go2signup.create-btn a:hover{background: #efefef;text-decoration: none;} */
.modal { display: none; visibility: hidden; position: fixed; top:0; left:0; width: 100%; height: 100%; background: rgba(0,0,0,0.6); z-index: 999;}
.modal.open { display: block; visibility:visible}
.modal_warp { background: #FFF; width:90%; max-width: 600px; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); font-size: 20px; line-height: 30px; padding:20px 20px 30px; border-radius: 6px; box-sizing: border-box; box-shadow: 0 2px 6px rgba(0,0,0,.4);text-align: center;}
.modal_warp strong { font-size: 36px; display: block; border-bottom:1px solid #ccc; text-align: center; padding: 8px 0 18px;font-family: 'kittithada_roman';}
.modal_warp strong.complete { color:#22b573;}
.modal_warp .modal_close {     background: #22b573;border-radius: 0;padding: 6px 0;text-align: center;color: #fff;cursor: pointer;display: inline-block;font-family: 'kittithada_roman';min-width: 140px;margin: auto;font-size: 24px;}

.authen {}
.authen_header {}
.authen_header .logo { padding:50px 0 30px}
.authen_header .logo img { display:block; margin: 0 auto; height: 80px; width: auto;}
.authen_body { text-align: center;}
.authen_body .authen_display { display:block; margin: 10px auto; width: 160px; border-radius: 6px;}
.authen_body p { padding:10px 50px;}
.authen_body p a { color: #FFF;}
.authen_footer { overflow: hidden;}
.authen_footer .authen_continue { display: block; width: 80%; max-width:400px; text-align: center; color: #047442; margin: 0 auto; border-radius: 6px; box-shadow: 0 2px 3px rgba(0,0,0,.2); padding:16px 0; background: #FFF; }
.authen_footer .authen_cancel { color: #FFF; display: block; width: 100px; text-align: center; margin: 30px auto 10px;}

.step_container{display: none;}

.step_container>div{background: white;padding: 20px;margin: 10px;flex-grow: 1;border-radius: 6px;text-align: center;flex-basis: 0;}
.img-fluid{width: 100%!important;}
.step_container .num_item{width: 25px;height: 25px;display: inline-block;margin:auto;border-radius: 50%;background-color: #189c61;line-height:25px;color: #fff;font-family: 'kittithada_roman';font-size: 24px;font-weight: bold;}
.step_container h2{font-size: 28px;}
.form-custom{background: #fff;padding: 10px 20px;box-shadow: 0 0 10px rgba(0,0,0,.1);margin: 15px 0}
.form-custom label{color:#aaa;font-size: 14px;}
.form-custom input{width: 100%;font-size: 16px;padding: 10px 0;border: none;color: #000;}
.form-custom input:focus{outline: none;}
.form-custom input:-webkit-autofill,
.form-custom input:-webkit-autofill:hover, 
.form-custom input:-webkit-autofill:focus, 
.form-custom input:-webkit-autofill:active  {
    transition: background-color 5000s ease-in-out 0s;
}

.link-privacy{text-decoration: underline; color: #0056AC;}


@media only screen and (min-width: 960px) {
/* For desktop: */
/* 
.promo { float:left; width:65%; background: #22b573; height: 100vh; padding:20px 40px; box-sizing: border-box;}
.promo .logo img { height:70px; margin: 0;}
.member { float:right; width:35%; background: #FFF; box-sizing: border-box; height: 100vh;}
.promo .hero { padding:36px 0 8px}
.promo .hero img { display:block; width:80%; height: auto; margin: 20px auto;}
.promo .hero strong { font-size:40px;}
.promo .hero h1 { font-size:80px; line-height:80px;font-weight: bolder;letter-spacing: 5px;}
.promo .hero p { padding: 0 24px; color:#000; text-align: center; line-height: 24px;}
.form { background: transparent; width:90%; padding:20px; margin:120px auto 0; border-radius:0px; box-shadow: 0 0 0 rgba(0,0,0,0);}
.form .login-btn { background: #22b573; border:1px solid #FFF; }
.modal_warp {padding:20px 40px 30px;}
.step_container{display: flex;flex-direction: row;margin-top: 20px;}
 */

.form { width:400px; }

}