﻿/* NEW REGISTER */
.register-container {
	overflow: visible;
  min-width: 1000px;
  background: none;
  border: none;
  box-shadow: none;
}
.register-container .modal-body {
  padding: 0;
  display: grid;
  grid-template-columns: auto 1fr;
}
.register-container .form-register-body {
  padding: 30px 0 10px 20px;
  background: #252525;
  min-height: 700px;
}
.register-container .form-register-image {
  min-width: 466px;
  position: relative;
  right: -18px;
}
.register-container .form-register-image img {
  object-fit: cover;
}
.register-container .form-register-image .form-register-image-bg {
  position: absolute;
  background: #000;
  top: 0;
  left: 28px;
  right: 18px;
  bottom: 0;
  z-index: -1;
}

.register-container .form-register-header {
  display: flex;
  flex-direction: row-reverse;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px 5px;
  text-transform: uppercase;
}
.register-container .form-register-header .w88-icon-close:before {
  height: 30px !important;
  width: 30px !important;
}
.register-container .form-register-header .title {
  background: none;
  font-weight: 600;
  font-size: 24px;
  padding: 0;
}
.register-container .title-header {
  display: block;
  position: relative;
  font-size: 18px;
  padding: 10px 0 10px 20px;
}

.register-container .geetest_holder,
.register-container .botion_holder {
	position: fixed !important;
	width: 100% !important;
	height: 100% !important;
}
.register-container .suggested {
	padding: 7px 0;
}
.register-container .suggested,
.register-container .suggested .suggested-body {
	display: flex;
}
.register-container .suggested-body {
	flex-wrap: wrap;
}
.register-container .suggested-membercode {
	color: #2a8fbd;
	padding: 0 5px;
	font-size: 14px;
	font-weight: bold;
}
.register-container .suggested-membercode:hover {
	cursor: pointer;
}

.register-container .hidden {
	display: none !important;
}

.register-container .ui-datepicker {
	width: 300px;
}
.register-container .ui-datepicker * {
	font-size: 13px;
}
.register-container .ui-state-default.ui-state-active,
.register-container .ui-state-default.ui-state-hover {
	font-weight: 500;
}

.register-container .password_checker,
.register-container .password-level {
  width: 100%;
}
.register-container .password-level {
  display: flex;
}
.register-container span.password {
  height: 8px;
  background-color: #808080;
  flex: 1 1 0;
  margin: 8px 3px;
}
.register-container span.password:first-child {
  margin-left: 0;
}
.register-container span.password:last-child {
  margin-right: 0;
}
.register-container .color_weak {
  color: #d6b500 !important;
}
.register-container .background_weak {
  background: #d6b500 !important;
}
.register-container .color_good {
  color: #00d60f !important;
}
.register-container .background_good {
  background: #00d60f !important;
}
.register-container .color_strong {
  color: #2a8fbd !important;
}
.register-container .background_strong {
  background: #2a8fbd !important;
}

.register-container .form-register {
  padding: 15px 20px 5px;
}
.register-container .form-register div.frm-input,
.register-container .form-register div.frm-input * {
	font-size: 13px;
}
.register-container .form-register div.frm-input,
.register-container .form-register div.frm-input label,
.register-container .form-register div.frm-input input {
  color: #fff;
}
.register-container .form-register div.frm-input.frm-input-footer {
  color: #888;
}
.register-container .form-register div.frm-input {
	display: grid;
	grid-template-columns: 1fr 3fr 27px;
	padding: 5px 0;
  align-items: center;
}
.register-container .form-register div.frm-input.hide,
.register-container .form-register div.frm-input.frm-hidden {
	display: none !important;
}
.register-container .form-register div.frm-input.frm-input-line,
.register-container .form-register div.frm-input.frm-input-footer {
	grid-template-columns: 1fr 27px;
}
.register-container .form-register span.required {
	color: #d6001e;
	padding: 0 2px;
}
.register-container .form-register .frm-input input,
.register-container .form-register .frm-input div.prettydropdown {
	border: 1px solid #4d4d4d !important;
}
.register-container .form-register .frm-input div.prettydropdown ul {
	white-space: nowrap;
  max-height: 300px !important;
}
.register-container .form-register .frm-input div.mobile {
	display: grid;
	grid-template-columns: auto 1fr;
}
.register-container .form-register .frm-input div.mobile .prettydropdown {
	border-right: none !important;
  display: none !important;
}
.register-container .form-register .frm-input div.mobile .prettydropdown,
.register-container .form-register .frm-input div.mobile .prettydropdown ul {
	background-color: #4d4d4d;
}
.register-container .form-register .frm-input div.mobile .mobile-prefix {    
  display: flex;
  align-items: center;
  justify-content: center;
  background: #4d4d4d;
  border: 1px solid #4d4d4d;
  padding: 0 10px;
  min-width: 50px;
  order: 1;
}
.register-container .form-register .frm-input div.mobile input {
  order: 2;
}
.register-container .form-register .frm-input .chk-switcher {
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.register-container .form-register .frm-input.frm-input-account-type .validate_input {
	display: flex;
	align-items: center;
	gap: 30px;
}
.register-container .form-register .frm-input .w88-form-checkbox {
	align-items: center;
}
.register-container .form-register .frm-input.frm-input-button .validate_input {
  display: grid;
}
.register-container .form-register .frm-input.frm-input-button .button-register {
	font-size: 30px;
	padding: 15px 20px;
	margin: 10px 0 20px;
}
.register-container .form-register .frm-input input {
  padding: 13px 0 13px 5px !important;
}
.register-container .form-register .frm-input input[type="email"] {
  padding: 10px 0 10px 10px !important;
  width: calc(100% - 10px);
}
.register-container .form-register .frm-input div.prettydropdown {
  height: 40px !important;
}
.register-container .form-register .frm-input.frm-error input,
.register-container .form-register .frm-input.frm-error div.prettydropdown,
.register-container .form-register .frm-input.frm-error div.mobile-prefix {
  border-color: #d6001e !important;
}
.register-container .form-register .frm-input.frm-error .mobile input {
  border-left: 0 !important;
}
.register-container .form-register .frm-input.frm-error div.mobile-prefix {
  border-right: 0 !important;
}
.register-container .form-register .frm-input input:active,
.register-container .form-register .frm-input input:focus,
.register-container .form-register .frm-input div.prettydropdown:focus-within,
.register-container .form-register .frm-input div.mobile input:focus ~ .mobile-prefix,
.register-container .form-register .frm-input div.mobile input:active ~ .mobile-prefix  {
  border-color: #888 !important;
}
.register-container .form-register .frm-input.frm-input-crypto,
.register-container .form-register .frm-input.frm-input-account-type {
  padding: 20px 0;
}
.register-container .form-register .frm-input small.error {
  color: #d6001e;
  font-size: 11px;
}
.register-container .w88-checkbox .w88-checkbox-checkmark:after {
  border-color: #fff;
}
.register-container .w88-checkbox input:disabled ~ .w88-checkbox-checkmark:after {
  border-color: #808080;
}
.register-container .form-register .frm-input div.password-field {
  position: relative;
}
.register-container .form-register .frm-input div.password-field input::-ms-reveal,
.register-container .form-register .frm-input div.password-field input::-ms-clear {
  display: none;
}
.register-container .form-register .frm-input div.password-field .w88-icon {
  position: absolute;
  top: calc(50% - 15px);
  right: 10px;
  z-index: 1;
  cursor: pointer;
}
.register-container .form-register .frm-input.frm-input-otp input#reg-otp {
  display: none;
}
.register-container .form-register .frm-input .button-otp {
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.register-container .form-register .frm-input .button-otp.button-otp-disabled {
  height: 38px;
}
.register-container .form-register .frm-input .button-otp.button-otp-disabled,
.register-container .form-register .frm-input .button-otp.button-otp-disabled:hover,
.register-container .form-register .frm-input .button-register.button-disabled,
.register-container .form-register .frm-input .button-register.button-disabled:hover {
  border: 1px solid #4d4d4d !important;
  background: #333;
  color: #6f6f6f !important;
}
.register-container .form-register .frm-input .button-otp.button-otp-disabled:before,
.register-container .form-register .frm-input .button-otp.button-otp-disabled:hover:before,
.register-container .form-register .frm-input .button-register.button-disabled:before,
.register-container .form-register .frm-input .button-register.button-disabled:hover:before {
  content: unset;
}
.register-container .form-register .frm-input .button-otp.button-otp-disabled:hover,
.register-container .form-register .frm-input .button-register.button-disabled:hover {
  cursor: context-menu;
}
.register-container .form-register .frm-input .button-otp.button-otp-verify img {
  margin-left: 5px;
}
.register-container .form-register .frm-input .button-otp.button-otp-verified {
  background: #4d4d4d;
  color: #fff !important;
}
.register-container .form-register .frm-input .button-otp.button-otp-verified .w88-icon {
  margin-right: 5px;
}
.register-container .form-register .frm-input .button-otp.button-otp-verified .w88-icon:before {
  height: 15px;
  width: 15px;
}
.register-container .form-register .frm-input .otp-fields {
  display: flex;
  gap: 5px;
  margin: 5px 0;
}
.register-container .form-register .frm-input .otp-fields > input {
  flex: 1 1 0;
}
.register-container .form-register .frm-input .otp-fields > .button-otp {
  flex: 3 1 0;
}

/* WHITE THEME */
.white.register-container .title-header {
  color: #1f1f1f;
}
.white.register-container .form-register-body {
  background: #fff;
}
.white.register-container .form-register div.frm-input,
.white.register-container .form-register div.frm-input label,
.white.register-container .form-register div.frm-input input {
  color: #000;
}
.white.register-container .form-register .frm-input div.mobile .mobile-prefix {
  background: #dedede;
}
.white.register-container .form-register .frm-input input,
.white.register-container .form-register .frm-input div.prettydropdown {
	border: 1px solid #ddd !important;
}
.white.register-container .form-register .frm-input div.mobile .prettydropdown,
.white.register-container .form-register .frm-input div.mobile .prettydropdown ul {
	background-color: #ddd;
}
.white.register-container .form-register .frm-input div.mobile .mobile-prefix {
  background: #ddd;
  border: 1px solid #ddd;
}
.white.register-container .form-register .frm-input.frm-error input,
.white.register-container .form-register .frm-input.frm-error div.prettydropdown,
.white.register-container .form-register .frm-input.frm-error div.mobile-prefix {
  border-color: #d6001e !important;
}
.white.register-container .form-register .frm-input input:active,
.white.register-container .form-register .frm-input input:focus,
.white.register-container .form-register .frm-input div.prettydropdown:focus-within,
.white.register-container .form-register .frm-input div.mobile input:focus ~ .mobile-prefix,
.white.register-container .form-register .frm-input div.mobile input:active ~ .mobile-prefix  {
  border-color: #808080 !important;
}
.white.register-container .w88-checkbox .w88-checkbox-checkmark:after {
  border-color: #000;
}
.white.register-container .form-register .frm-input .button-otp.button-otp-disabled, 
.white.register-container .form-register .frm-input .button-otp.button-otp-disabled:hover,
.white.register-container .form-register .frm-input .button-register.button-disabled,
.white.register-container .form-register .frm-input .button-register.button-disabled:hover {
  border-color: #ddd !important;
  background-color: #eee;
}
.white.register-container .form-register .frm-input .button-otp.button-otp-verified {
  background: #ddd;
  color: #000 !important;
}

/* FLAGS */
.register-container [class^="flag_"] {
  padding: 0 4px;
  height: 24px;
  width: 24px;
  background-repeat: no-repeat;
  background-size: contain;
}
.register-container .flag_AUD,
.register-container .flag_en-au_AUD {
  background-image: url("/_static/img/flags/Flag-AU.png");
}
.register-container .flag_BRL,
.register-container .flag_pt-br_BRL {
  background-image: url("/_static/img/flags/Flag-BR.png");
}
.register-container .flag_CLP,
.register-container .flag_es-cl_CLP {
  background-image: url("/_static/img/flags/Flag-CL.png");
}
.register-container .flag_RMB,
.register-container .flag_zh-cn_RMB {
  background-image: url("/_static/img/flags/Flag-CN.png");
}
.register-container .flag_UUS,
.register-container .flag_en-us_UUS {
  background-image: url("/_static/img/flags/Flag-EN.png");
}
.register-container .flag_IDR,
.register-container .flag_id-id_IDR {
  background-image: url("/_static/img/flags/Flag-ID.png");
}
.register-container .flag_INR,
.register-container .flag_en-in_INR,
.register-container .flag_hi-in_INR {
  background-image: url("/_static/img/flags/Flag-IN.png");
}
.register-container .flag_km-kh_USD {
  background-image: url("/_static/img/flags/Flag-KH.png");
}
.register-container .flag_KRW,
.register-container .flag_ko-kr_KRW {
  background-image: url("/_static/img/flags/Flag-KR.png");
}
.register-container .flag_MXN,
.register-container .flag_es-mx_MXN {
  background-image: url("/_static/img/flags/Flag-MX.png");
}
.register-container .flag_MYR,
.register-container .flag_en-my_MYR,
.register-container .flag_zh-my_MYR {
  background-image: url("/_static/img/flags/Flag-MY.png");
}
.register-container .flag_PEN,
.register-container .flag_es-pe_PEN {
  background-image: url("/_static/img/flags/Flag-PE.png");
}
.register-container .flag_THB,
.register-container .flag_th-th_THB {
  background-image: url("/_static/img/flags/Flag-TH.png");
}
.register-container .flag_TRY,
.register-container .flag_tr-tr_TRY {
  background-image: url("/_static/img/flags/Flag-TR.png");
}
.register-container .flag_USD,
.register-container .flag_en-us_USD{
  background-image: url("/_static/img/flags/Flag-US.png");
}
.register-container .flag_VND,
.register-container .flag_vi-vn_VND {
  background-image: url("/_static/img/flags/Flag-VN.png");
}
.register-container .flag_KES,
.register-container .flag_en-ke_KES {
  background-image: url("/_static/img/flags/Flag-KE.png");
}
.register-container .flag_BDT,
.register-container .flag_bn-bd_BDT {
	background-image: url("/_static/img/flags/Flag-BD.png");
}

/* Block Loading */
.register-container .blockUI.blockMsg {
  top: 50% !important;
  left: calc(50% - 150px) !important;
}

/* Register Socials */
.form-register .frm-socials,
.form-register .frm-social-container,
.form-register .frm-social-container a {
  display: flex;
  align-items: center;
  justify-content: center;
}
.form-register .frm-socials {
  flex-direction: column;
  padding-bottom: 10px;
  gap: 10px;
  width: calc(100% - 25px);
}
.form-register .frm-social-container {
  justify-content: space-between;
  align-self: flex-start;
  gap: 10px;
  width: 100%;
}
.form-register .frm-social-container a {
  padding: 10px;
  background-color: rgb(56 192 255 / 50%);
  flex: 1;
}
.form-register .frm-social-container a.active,
.form-register .frm-social-container a:hover {
  background-color: transparent;
  outline: 1px solid rgb(56 192 255 / 50%);
  outline-offset: -1px;
}
.form-register .frm-socials-message {
  border: 1px solid #cd9a12;
  padding: 10px;
  color: #cd9a12;
  margin-top: 8px;
}