/*
html5doctor.com Reset Stylesheet
v1.6.1
Last Updated: 2010-09-17
Author: Richard Clark - http://richclarkdesign.com
Twitter: @rich_clark
*/

html,
body,
div,
span,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
abbr,
address,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
samp,
small,
strong,
sub,
sup,
var,
b,
i,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
}
*,
*::before,
*::after {
  box-sizing: border-box;
}

/** font **/

@font-face {
  font-family: "KitReg";
  src: url("../fonts/PSL094pro.eot");
  src: local("☺"), url("../fonts/PSL094pro.woff") format("woff"), url("../fonts/PSL094pro.ttf") format("truetype"),
    url("../fonts/PSL094pro.svg") format("svg");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "KitBold";
  src: url("../fonts/PSL096pro.eot");
  src: local("☺"), url("../fonts/PSL096pro.woff") format("woff"), url("../fonts/PSL096pro.ttf") format("truetype"),
    url("../fonts/PSL096pro.svg") format("svg");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "Sukhumvit Set";
  src: url("../fonts/Sukhumvit Set.eot");
  src: local("☺"), url("../fonts/Sukhumvit Set.woff") format("woff"),
    url("../fonts/Sukhumvit Set.ttf") format("truetype"), url("../fonts/Sukhumvit Set.svg") format("svg");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "Sukhumvit Set";
  src: url("../fonts/Sukhumvit Set.eot");
  src: local("☺"), url("../fonts/Sukhumvit Set.woff") format("woff"),
    url("../fonts/Sukhumvit Set.ttf") format("truetype"), url("../fonts/Sukhumvit Set.svg") format("svg");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "Sukhumvit Set";
  src: url("../fonts/Sukhumvit Set.eot");
  src: local("☺"), url("../fonts/Sukhumvit Set.woff") format("woff"),
    url("../fonts/Sukhumvit Set.ttf") format("truetype"), url("../fonts/Sukhumvit Set.svg") format("svg");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "Sukhumvit Set Thin";
  src: url("../fonts/Sukhumvit Set Thin.eot");
  src: local("☺"), url("../fonts/Sukhumvit Set Thin.woff") format("woff"),
    url("../fonts/Sukhumvit Set Thin.ttf") format("truetype"), url("../fonts/Sukhumvit Set Thin.svg") format("svg");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "Sukhumvit Set";
  src: url("../fonts/SukhumvitSet-Light.eot");
  src: local("☺"), url("../fonts/SukhumvitSet-Light.woff") format("woff"),
    url("../fonts/SukhumvitSet-Light.ttf") format("truetype");
  font-weight: lighter;
  font-style: normal;
}

@font-face {
  font-family: "Sukhumvit Tadmai";
  src: url("../fonts/SukhumvitTadmai-Medium.otf");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "Sukhumvit Tadmai New Bold";
  src: url("../fonts/SUKHUMVITTADMAI-EXTRABOLD.otf");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "Sukhumvit Tadmai";
  src: url("../fonts/SukhumvitTadmai_Bol.ttf");
  font-weight: bold;
  font-style: normal;
}

@font-face {
  font-family: "Sukhumvit Set";
  src: url("/font/SukhumvitSet-Bold.ttf");
  font-weight: bold;
  font-style: normal;
}

@font-face {
  font-family: 'Sukhumvit Tadmai bold';
  src: url("../fonts/sukhumvittadmaibold-webfont.woff2") format('woff2'),
       url("../fonts/sukhumvittadmaibold-webfont.woff") format('woff');
  font-weight: bold;
  font-style: normal;
}

@font-face {
  font-family: 'Sukhumvit Tadmai text';
  src: url("../fonts/sukhumvittadmai-text-webfont.woff2") format('woff2'),
       url("../fonts/sukhumvittadmai-text-webfont.woff") format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "SF Pro Regular";
  src: url("../fonts/SFPRODISPLAYREGULAR.OTF");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "SF Pro Medium";
  src: url("../fonts/SFPRODISPLAYMEDIUM.OTF");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "Roboto Regular";
  src: url("../fonts/Roboto-Regular.ttf");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "Roboto Medium";
  src: url("../fonts/Roboto-Medium.ttf");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "GT Walsheim Pro";
  src: url("../fonts/GT-WALSHEIM-PRO-REGULAR.OTF");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "GT Walsheim Bold";
  src: url("../fonts/GT-WALSHEIM-PRO-BOLD.OTF");
  font-weight: bold;
  font-style: normal;
}

body {
  width: 100%;
  height: 100%;
  font-family: "Sukhumvit Set", "Helvetica", Arial, sans-serif !important;
  margin: 0;
  /*color: #fff;*/
  /*background-color: #002049;*/
}
/* input {} */

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}

nav ul {
  list-style: none;
}

blockquote,
q {
  quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
  content: "";
  content: none;
}

a {
  margin: 0;
  padding: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
  text-decoration: none;
  /*color: #fff;*/
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -moz-tap-highlight-color: rgba(0, 0, 0, 0);
}

h1 {
  font-family: "Sukhumvit Set", "Helvetica", Arial, sans-serif;
  font-size: 30px;
  /*margin: 10px 0;*/
  line-height: 28px;
}

h2 {
  font-family: "Sukhumvit Set", "Helvetica", Arial, sans-serif;
  font-size: 24px;
  margin: 10px 0;
  line-height: 22px;
}

/* change colours to suit your needs */

ins {
  background-color: #ff9;
  color: #000;
  text-decoration: none;
}

/* change colours to suit your needs */

mark {
  background-color: #ff9;
  color: #000;
  font-style: italic;
  font-weight: bold;
}

del {
  text-decoration: line-through;
}

abbr[title],
dfn[title] {
  border-bottom: 1px dotted;
  cursor: help;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

/* change border colour to suit your needs */

hr {
  display: block;
  height: 1px;
  border: 0;
  margin: 20px auto;
  padding: 0;
  background-color: #fff;
  width: 100%;
}
/*outline none*/
input:focus,
button:focus,
button.redBtn:focus {
  outline: none;
}
input,
select {
  vertical-align: middle;
}

input[type="checkbox"] {
  transform: scale(1.2, 1.2);
  vertical-align: baseline;
}

input[type="checkbox"].bigSC {
  transform: scale(1.5, 1.5);
  vertical-align: middle;
}

input[type="text"] {
  /* -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px; */
  font-family: "Sukhumvit Set", "Helvetica", Arial, sans-serif;
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 30px white inset !important;
}

select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus,
select:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 30px white inset !important;
}

.select {
  position: relative;
  width: 100%;
}

.select select {
  font-family: "Sukhumvit Set", "Helvetica", Arial, sans-serif;
  width: 100%;
  cursor: pointer;
  padding: 5px 10px;
  outline: 0;
  border: 1px solid #d3d3d3;
  border-radius: 5px;
  background: #ffffff;
  color: #06376f;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  font-size: 14px;
}

.select select::-ms-expand {
  display: none;
}

/* .select select:hover,
.select select:focus {
  color: #000000;
  background: #cccccc;
} */

.select select:disabled {
  opacity: 0.5;
  pointer-events: none;
}

.select_arrow {
  position: absolute;
  top: 1px;
  right: 10px;
  width: 0;
  height: 0;
  border-width: 0 3px 3px 0;
  display: inline-block;
  padding: 3px;
}

.member-page .select_arrow{
  top: -5px;
}

.select select:hover ~ .select_arrow,
.select select:focus ~ .select_arrow {
  border-top-color: #d91344;
}

.select select:disabled ~ .select_arrow {
  border-top-color: #d91344;
}

/************ Choose type ************/

#wrapper {
  max-width: 768px;
  min-height: 100vh;
  margin: 0 auto;
  background: #fafafa;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  color: #2c2c2c;
}

#wrapper .typePage {
  position: relative;
  width: 60%;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  text-align: center;
  margin: 0 auto;
}

#wrapper .typePage .logoAmway {
  margin: 30px 0;
  width: 116px;
  height: auto;
}

#wrapper .typePage .logoAmway img {
  width: 100%;
  height: auto;
}

/************ Register ************/

#wrapper .regisPage {
  background: url("/images/registration/home-bg.svg") no-repeat;
  background-color: #F8F9FA;
  background-position-y: 130%;
  background-position-x: right;
  min-height: 100%;
  display: flex;
  justify-content: flex-start;
  flex-direction: column;
  text-align: center;
  margin: 0 auto 100px;
  padding: 0 5%;

  width: 100%;
}

#wrapper .regisPage .logoAmway {
  margin: 30px auto 15px;
  height: auto;
}

#wrapper .regisPage .logoAmway img {
  width: 132px;
  height: auto;
}

.regisPage form {
  width: 100%;
  margin-bottom: 20px;
}
.regisPage form .secForm {
  width: 100%;
  max-width: 300px;
  margin: 32px auto auto auto;
}

#wrapper .secForm .txtForm {
  flex: initial;
  width: 25%;
  font-size: 20px;
  font-family: "Sukhumvit Set", "Helvetica", Arial, sans-serif;
  text-align: left;
}
#wrapper .secForm .inputForm > label {
  display: block;
  font-family: Sukhumvit Set;
  font-style: normal;
  font-weight: 500;
  font-size: 13px;
  color: #929497;
}

#wrapper .secForm .inputForm {
  flex: 1;
  font-size: 20px;
  text-align: left;
  max-width: 250px;
  margin: 0 auto;
}

#wrapper .secForm .inputForm input,
#wrapper .secForm .inputForm .input {
  position: relative;
  border: transparent;
  border-bottom: 1px solid #2c2c2c;
  /* box-shadow: 0px 0.5px 10px rgba(0, 0, 0, 0.05); */
  /* border-radius: 8px; */
  background-color: transparent;
  color: #2C2C2C;
  padding: 0;
  font-family: "Sukhumvit Set", "Helvetica", Arial, sans-serif;
  font-size: 16px;
  height: 34px;
}
#wrapper .secForm .inputForm input:placeholder-shown,
#wrapper .secForm .inputForm .input:placeholder-shown {
  border-bottom: 1px solid #e6e6e6;
}
#wrapper .secForm .inputForm .input > svg {
  position: absolute;
  right: 12px;
  top: 7px;
}
#wrapper .secForm .inputForm .input span {
  color: #ccc;
}

#wrapper .secForm .txtAlert {
  flex: 1;
  margin-left: -10px;
  font-size: 11px;
  font-family: "Sukhumvit Set", "Helvetica", Arial, sans-serif;
  color: #ffff00;
  text-align: left;
}

#wrapper .secForm .genderForm {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  flex-direction: row;
  width: 100%;
}

#wrapper .secForm .genderForm .gender {
  width: 100%;
  text-align: left;
}

#wrapper .secForm .genderForm .gender .radioStyle {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
}

#wrapper .secForm .genderForm .gender .radioStyle .genderType {
  position: relative;
  height: 50px;
  margin-right: 25px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  width: 80px;
  text-align: center;
}

#wrapper .secForm .genderForm .gender .radioStyle .genderType label,
#wrapper .secForm .genderForm .gender .radioStyle .genderType input {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  background-color: #fff;
}

#wrapper .secForm .genderForm .gender .radioStyle .genderType.genWomen label,
#wrapper .secForm .genderForm .gender .radioStyle .genderType.genWomen input {
  border: 3px solid #ffabe5;
}

#wrapper .secForm .genderForm .gender .radioStyle .genderType.genMen label,
#wrapper .secForm .genderForm .gender .radioStyle .genderType.genMen input {
  border: 3px solid #76d9ff;
}

#wrapper .secForm .genderForm .gender .radioStyle .genderType label span img {
  width: 50px;
  height: auto;
  margin-top: 8px;
}

#wrapper .secForm .genderForm .gender .radioStyle .genderType input[type="radio"] {
  opacity: 0.011;
  z-index: 100;
}

#wrapper .secForm .genderForm .gender .radioStyle .genderType label {
  padding: 5px;
  cursor: pointer;
  z-index: 90;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
}

#wrapper .secForm .genderForm .gender .radioStyle .genderType label p,
#wrapper .secForm .genderForm .gender .radioStyle .genderType label span {
  flex: 1;
}

#wrapper .secForm .inputForm .inputDate {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 105%;
}

#wrapper .secForm .inputForm .inputDate .select {
  flex: 1;
  margin-right: 10px;
}

#wrapper .secForm .inputForm .inputDate .select:last-child {
  margin-right: 0px;
}

/************ interest ************/

#wrapper .interestPage {
  /* position: relative; */
  width: 80%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-direction: column;
  text-align: center;
  margin: 0 auto;
}

#wrapper .interestPage .logoAmway {
  margin: 60px auto 10px;
  width: 116px;
  height: auto;
}

#wrapper .interestPage .logoAmway img {
  width: 100%;
  height: auto;
}

#wrapper .interestPage input.nameHead {
  width: 100%;
  border-radius: 5px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  background-color: #fff;
  color: #06376f;
  padding: 5px 10px;
  border: 0px solid;
  font-family: "Sukhumvit Set", "Helvetica", Arial, sans-serif;
  font-size: 24px;
  text-align: center;
}

#wrapper .interestPage .selectItem {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  text-align: center;
  align-items: center;
  flex-direction: row;
  width: 80%;
}

#wrapper .interestPage .selectItem .itemList {
  position: relative;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  flex: initial;
  width: 150px;
  min-height: 150px;
  text-align: center;
  margin: 5px;
}

#wrapper .selectItem .itemList img {
  width: 130px;
  height: auto;
  border-radius: 10px;
  /* Rectangle 34 */

  box-shadow: 0px 7px 20px rgba(0, 0, 0, 0.07);
  border-radius: 16px;
}

.selectItem .itemList {
  width: 130px;
  display: inline-grid;
  margin-bottom: 37px;
  margin-left: 8px;
  margin-right: 8px;
}

.selectItem .itemList .text-interest span {
  font-family: "Sukhumvit Set";
  font-size: 12px;
}

#wrapper .interestPage .selectItem .itemList label {
  display: block;
  position: relative;
  width: 100%;
  height: auto;
}
#wrapper .interestPage .selectItem .itemList input {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 130px;
  height: 130px;
}

#wrapper .interestPage .selectItem .itemList input[type="checkbox"] {
  opacity: 0.011;
  z-index: 100;
}

#wrapper .interestPage .selectItem .itemList label span {
  width: 25px;
  display: block;
  margin: 5px auto;
  -webkit-filter: grayscale(1);
  filter: grayscale(1);
  position: absolute;
  top: 0px;
  right: 10px;
  color: #002a54;
}
#wrapper .interestPage .selectItem .text-interest {
  width: 100px;
  position: absolute;
  text-align: left;
  color: #002a54;
  padding-left: 9px;
  word-wrap: break-word;
}
#wrapper .interestPage .selectItem .text-interest h1 {
  font-size: 21px;
  line-height: 21px;
  font-family: "Sukhumvit Set", "Helvetica", Arial, sans-serif;
}
#wrapper .interestPage .selectItem .text-interest .white-text {
  /*color: #fff;*/
}
#wrapper .interestPage .selectItem .itemList label span img {
  width: 100%;
  height: auto;
}

#wrapper .interestPage .selectItem .itemList input[type="checkbox"]:checked + label span {
  -webkit-filter: grayscale(0);
  filter: grayscale(0);
}

#wrapper .interestPage .secAgree {
  margin: 0;
}

#wrapper .interestPage .secAgree .agreement {
  text-align: left;
  margin: 15px 0 0;
}

#wrapper .interestPage .secAgree .agreement .container {
  display: inline-block;
  position: relative;
  padding-left: 30px;
  cursor: pointer;
  font-family: "Sukhumvit Set", "Helvetica", Arial, sans-serif;
  font-size: 14px;
  /*color: #fff;*/
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  text-decoration: underline;
}

/* Hide the browser's default checkbox */
#wrapper .interestPage .secAgree .agreement .container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}

/* Create a custom checkbox */
#wrapper .interestPage .secAgree .agreement .checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 18px;
  width: 18px;
  background-color: transparent;
  border: 2px solid #fff;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
}

#wrapper .agree-session {
  margin-bottom: 37px;
}

/* On mouse-over, add a grey background color */
#wrapper .interestPage .secAgree .agreement .container:hover input ~ .checkmark {
  border: 2px solid #fff;
}

#wrapper .id-card-hint {
  position: absolute;
  right: 70px;
  padding: 14px;
  background-color: #fff;
  border-radius: 8px;
  width: 150px;
  margin-bottom: -125px;
  margin-top: 25px;
}

#wrapper .id-card-hint.hide {
  display: none;
}

/* When the checkbox is checked, add a blue background */
#wrapper .interestPage .secAgree .agreement .container input:checked ~ .checkmark {
  background-color: transparent;
}

/* Create the checkmark/indicator (hidden when not checked) */
#wrapper .interestPage .secAgree .agreement .checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the checkmark when checked */
#wrapper .interestPage .secAgree .agreement .container input:checked ~ .checkmark:after {
  display: block;
}

/* Style the checkmark/indicator */
#wrapper .interestPage .secAgree .agreement .container .checkmark:after {
  left: 5px;
  top: 0px;
  width: 5px;
  height: 10px;
  border: solid #fff;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

/************ success ************/

#wrapper .successPage {
  width: 80%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-direction: column;
  text-align: center;
  margin: 0 auto;
}

#wrapper .successPage .logoAmway {
  margin: 60px auto 10px;
  width: 116px;
  height: auto;
}

#wrapper .successPage .imgProfile {
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  width: 100px;
  height: 100px;
  border: 4px solid #fff;
  background-color: #5ab8e0;
  margin: 10px 0px;
  overflow: hidden;
}

.itemList input[type="checkbox"] {
  display: none;
}

#wrapper .successPage .logoAmway img,
#wrapper .successPage .imgProfile img {
  width: 100%;
  height: auto;
}

#wrapper .successPage .imgError {
  width: 80px;
  height: 80px;
  margin: 50px 0px 20px;
}

#wrapper .successPage .imgError img {
  width: 100%;
  height: auto;
}
#wrapper .successPage h1 {
  margin-top: 0;
}

/************ condition ************/

#wrapper .conditionPage {
  width: 90%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-direction: column;
  text-align: center;
  margin: 0 auto;
}

#wrapper .conditionPage .logoAmway {
  margin: 60px auto 10px;
  width: 180px;
  height: auto;
}

#wrapper .conditionPage .logoAmway img {
  width: 100%;
  height: auto;
}

#wrapper .conditionPage .secCondition {
  border-radius: 20px;
  -moz-border-radius: 20px;
  -webkit-border-radius: 20px;
  background-color: #fff;
  text-align: left;
  padding: 5%;
  border: 2px solid #6280a4;
  color: #002049;
}

#wrapper .conditionPage .secCondition ol {
  margin: 20px 0;
  font-size: 20px;
  font-family: "Sukhumvit Set", "Helvetica", Arial, sans-serif;
  margin-left: 15px;
  line-height: 20px;
}

#wrapper .conditionPage .secCondition p {
  font-size: 20px;
  font-family: "Sukhumvit Set", "Helvetica", Arial, sans-serif;
  line-height: 20px;
  margin: 10px 0;
}

/************ Button style ************/
button.blueBtn,
a.blueBtn {
  font-family: "Sukhumvit Set", "Helvetica", Arial, sans-serif;
  font-size: 36px;
  background: rgba(4, 69, 144, 1);
  background: -moz-linear-gradient(top, rgba(4, 69, 144, 1) 0%, rgba(6, 55, 111, 1) 100%);
  background: -webkit-gradient(
    left top,
    left bottom,
    color-stop(0%, rgba(4, 69, 144, 1)),
    color-stop(100%, rgba(6, 55, 111, 1))
  );
  background: -webkit-linear-gradient(top, rgba(4, 69, 144, 1) 0%, rgba(6, 55, 111, 1) 100%);
  background: -o-linear-gradient(top, rgba(4, 69, 144, 1) 0%, rgba(6, 55, 111, 1) 100%);
  background: -ms-linear-gradient(top, rgba(4, 69, 144, 1) 0%, rgba(6, 55, 111, 1) 100%);
  background: linear-gradient(to bottom, rgba(4, 69, 144, 1) 0%, rgba(6, 55, 111, 1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#044590', endColorstr='#06376f', GradientType=0);
  border-radius: 20px 20px 20px 20px;
  -moz-border-radius: 20px 20px 20px 20px;
  -webkit-border-radius: 20px 20px 20px 20px;
  padding: 5px 0;
  text-align: center;
  width: 100%;
  margin: 10px 0;
  border: 0px;
  /*color: #fff;*/
  -webkit-box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.6);
  -moz-box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.6);
  box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.6);
  outline: none;
}

button.blueBtn.active,
a.blueBtn.active {
  background: rgba(76, 155, 245, 1);
  background: -moz-linear-gradient(top, rgba(76, 155, 245, 1) 0%, rgba(9, 88, 172, 1) 100%);
  background: -webkit-gradient(
    left top,
    left bottom,
    color-stop(0%, rgba(76, 155, 245, 1)),
    color-stop(100%, rgba(9, 88, 172, 1))
  );
  background: -webkit-linear-gradient(top, rgba(76, 155, 245, 1) 0%, rgba(9, 88, 172, 1) 100%);
  background: -o-linear-gradient(top, rgba(76, 155, 245, 1) 0%, rgba(9, 88, 172, 1) 100%);
  background: -ms-linear-gradient(top, rgba(76, 155, 245, 1) 0%, rgba(9, 88, 172, 1) 100%);
  background: linear-gradient(to bottom, rgba(76, 155, 245, 1) 0%, rgba(9, 88, 172, 1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4c9bf5', endColorstr='#0958ac', GradientType=0);
  outline: none;
}

button.redBtn,
a.redBtn {
  font-family: "Sukhumvit Set", "Helvetica", Arial, sans-serif;
  font-size: 36px;
  background: rgba(239, 57, 103, 1);
  background: -moz-linear-gradient(top, rgba(239, 57, 103, 1) 0%, rgba(217, 19, 68, 1) 100%);
  background: -webkit-gradient(
    left top,
    left bottom,
    color-stop(0%, rgba(239, 57, 103, 1)),
    color-stop(100%, rgba(217, 19, 68, 1))
  );
  background: -webkit-linear-gradient(top, rgba(239, 57, 103, 1) 0%, rgba(217, 19, 68, 1) 100%);
  background: -o-linear-gradient(top, rgba(239, 57, 103, 1) 0%, rgba(217, 19, 68, 1) 100%);
  background: -ms-linear-gradient(top, rgba(239, 57, 103, 1) 0%, rgba(217, 19, 68, 1) 100%);
  background: linear-gradient(to bottom, rgba(239, 57, 103, 1) 0%, rgba(217, 19, 68, 1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ef3967', endColorstr='#d91344', GradientType=0);
  border-radius: 40px 40px 40px 40px;
  -moz-border-radius: 40px 40px 40px 40px;
  -webkit-border-radius: 40px 40px 40px 40px;
  padding: 5px 10px;
  text-align: center;
  min-width: 230px;
  margin: 10px 0;
  border: 0px;
  /*color: #fff;*/
  -webkit-box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.75);
  -moz-box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.75);
  box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.75);
  outline: none;
}

button.redBtn2,
a.redBtn2 {
  font-family: "Sukhumvit Set", "Helvetica", Arial, sans-serif;
  font-size: 36px;
  background: rgba(239, 57, 103, 1);
  background: -moz-linear-gradient(top, rgba(239, 57, 103, 1) 0%, rgba(217, 19, 68, 1) 100%);
  background: -webkit-gradient(
    left top,
    left bottom,
    color-stop(0%, rgba(239, 57, 103, 1)),
    color-stop(100%, rgba(217, 19, 68, 1))
  );
  background: -webkit-linear-gradient(top, rgba(239, 57, 103, 1) 0%, rgba(217, 19, 68, 1) 100%);
  background: -o-linear-gradient(top, rgba(239, 57, 103, 1) 0%, rgba(217, 19, 68, 1) 100%);
  background: -ms-linear-gradient(top, rgba(239, 57, 103, 1) 0%, rgba(217, 19, 68, 1) 100%);
  background: linear-gradient(to bottom, rgba(239, 57, 103, 1) 0%, rgba(217, 19, 68, 1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ef3967', endColorstr='#d91344', GradientType=0);
  border-radius: 40px 40px 40px 40px;
  -moz-border-radius: 40px 40px 40px 40px;
  -webkit-border-radius: 40px 40px 40px 40px;
  padding: 5px 50px;
  text-align: center;
  min-width: auto;
  margin: 10px 0;
  border: 0px;
  /*color: #fff;*/
  -webkit-box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.75);
  -moz-box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.75);
  box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.75);
  outline: none;
}
/************ forget password style ************/
a.forget-password {
  display: block;
  margin-top: 4px;
  color: #38539a;
  text-decoration: underline;
  font-size: 12px;
  text-align: left;
  max-width: 230px;
}
.input-personal-id {
  word-wrap: break-word;
}
.input-personal-id h3 {
  font-size: 24px;
}
#wrapper .secForm .input-id input {
  width: 61%;
  border-right: 2px solid #ccc;
  background-color: transparent;
  border-radius: 0;
  text-align: center;
}
#wrapper .personal-id {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-direction: row;
  width: 35%;
  margin: 10px auto;
  background-color: #fff;
  border-radius: 5px;
  min-height: 45px;
}
#wrapper .secForm .last-input input {
  border-right: none;
}
.personal-id-pic {
  width: 40%;
  margin: 10px 170px -14px auto;
}
.personal-id-pic img {
  width: 100%;
}

/*Register Member*/
#wrapper .birthday-select {
  width: 100%;
  margin: 15px 0 0 -43px;
}
#wrapper .secForm .inputForm .inputDate {
  width: 125%;
}

/*forgot password*/
#wrapper .forgot-pass {
  width: 170%;
  margin: 15px 0 0 -110px;
}
.wrong-id {
  color: #f1dc2d;
}
/*register form*/
#wrapper .secForm .input_name input {
  width: 100%;
  padding: 5px;
  margin-left: -10px;
}
#wrapper .regis-birthday-select .inputForm .inputDate {
  width: 102.2%;
  margin-left: -10px;
}
#wrapper .regis-form {
  width: 100%;
}

/*question page*/
#wrapper .questionPage {
  width: 80%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-direction: column;
  text-align: center;
  margin: 0 auto;
}

#wrapper .register .text-notice {
  font-family: "Sukhumvit Set";
  font-style: normal;
  font-weight: 500;
  font-size: 14px;
  color: #707070;
  margin-top: 32px;
  margin-bottom: 32px;
  text-align: center;
}

.text-notice-new {
  font-family: "Sukhumvit Set";
  font-style: normal;
  font-size: 14px;
  color: #707070;
  margin: 32px auto;
  text-align: center;
}

#wrapper .form-check-label {
  font-family: "Sukhumvit Set";
  font-style: normal;
  font-weight: bold;
  font-size: 14px;
  line-height: 21px;
  text-decoration-line: underline;
  color: #707070;
}

#wrapper .register .forgot-password-link {
  font-family: "Sukhumvit Set";
  font-style: normal;
  font-weight: 500;
  font-size: 12px;
  line-height: 19px;
  align-items: center;
  text-align: right;
  text-decoration-line: underline;
  text-transform: uppercase;
  color: #38539a;
  margin: 0px 8px;
}

#wrapper .register .forgot-password-label {
  margin-top: 32px;
  font-weight: bold !important;
  font-size: 14px;
}

#wrapper .register .last-4-digit-label {
  margin-top: 32px;
  font-weight: bold !important;
  font-size: 14px;
}

#wrapper .register .pick-type-button {
  background: #ffffff;
  box-shadow: 0px 0.5px 10px rgba(0, 0, 0, 0.05);
  border-radius: 8px;
  margin-bottom: 16px;
  font-family: "Sukhumvit Set";
  font-style: normal;
  font-weight: bold;
  font-size: 18px;
  line-height: 27px;
  padding-top: 10px;
  padding-bottom: 10px;
}

#wrapper .register .choose-radio-button {
  background: #ffffff;
  box-shadow: 0px 0.5px 10px rgba(0, 0, 0, 0.05);
  border-radius: 8px;
  margin-bottom: 16px;
  font-family: "Sukhumvit Set";
  font-style: normal;
  font-weight: bold;
  font-size: 18px;
  line-height: 27px;
  padding-top: 10px;
  padding-bottom: 10px;
  text-align: left;
  padding-left: 32px;
}

#wrapper .register .pick-type a:link {
  color: #2c2c2c;
}

#wrapper .register .pick-type a:active {
  color: #2c2c2c;
}

#wrapper .register .pick-type a:visited {
  color: #2c2c2c;
}

#wrapper .info-form {
  background: #ffffff;
  box-shadow: 0px 0.5px 10px rgba(0, 0, 0, 0.05);
  border-radius: 15px;
  padding: 34px;
}

#wrapper .form-group {
  margin-bottom: 16px;
  font-family: "Sukhumvit Set";
}

#wrapper .form-group label {
  display: inline-block;
  font-size: 12px;
}

#wrapper .away-form .form-group label {
  font-size: 14px;
}

#wrapper .input-line-bottom {
  border-bottom: solid 1px #2C2C2C;
  font-size: 14px;
  border-left: none;
  border-right: none;
  border-top: none;
  border-radius: 0px;
  width: 100%;
  color: #2c2c2c;
  font-family: "Sukhumvit Set";
  max-width: 100%;
}

#wrapper .input-line-bottom.placeholder{
  border-bottom: solid 1px #EDEDED;
}

#wrapper .input-line-bottom:placeholder-shown{
  border-bottom: solid 1px #EDEDED;
}

#wrapper .input-line-bottom-date {
  border-bottom: solid 1px #2C2C2C;
  background-color: transparent;
  font-size: 14px;
  border-left: none;
  border-right: none;
  border-top: none;
  border-radius: 0px;
  width: 100%;
  color: #2c2c2c;
  font-family: "Sukhumvit Set";
  max-width: 100%;
}

#wrapper .input-line-bottom-date:placeholder-shown{
  border-bottom: solid 1px #EDEDED;
}

::placeholder {
  color: #bcbcbc;
}

#wrapper .info-form label {
  font-family: "Sukhumvit Set";
  font-style: normal;
  font-weight: 500;
  font-size: 12px;
  line-height: 19px;
  color:#929497;
  width: 100%;
}

#wrapper .register input[type="checkbox"]:checked + label {
  background-color: #fff;
  border: 2px solid #e6e6e6;
  width: 24px;
  height: 24px;
  box-sizing: border-box;
  box-shadow: 0px 7px 64px rgba(0, 0, 0, 0.07);
  border-radius: 6px;
}

#wrapper .register .date-picker {
  margin-top: 16px;
}

#wrapper .logo-image {
  margin-bottom: 40px;
}

#wrapper .abo-label {
  font-family: "Sukhumvit Set";
  margin-bottom: 16px;
  font-weight: bold !important;
}

.register-text-input {
  border: 1px solid #e6e6e6;
  /* Shadow1 */
  box-shadow: 0px 0.5px 10px rgba(0, 0, 0, 0.05);
  border-radius: 8px !important;
  width: 220px;
  height: 36px;
}

.register-text-input::placeholder {
  color: #bcbcbc;
  font-family: "Sukhumvit Set";
  text-align: center;
}

.register-next-button {
  font-family: "Sukhumvit Set";
  padding: 9px 26px;
  width: 100%;
  height: 44px;
  left: 87px;
  bottom: 20px;
  background: #EDEDED;
  border-radius: 22px;
  border: none;
  font-family: "Sukhumvit Set";
  font-style: normal;
  font-weight: bold;
  font-size: 16px;
  line-height: 25px;
  align-items: center;
  text-align: center;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #C3C4C5;
  flex: none;
  order: 0;
  align-self: center;
  margin: 0px auto;
}
.register-next-button.active {
  background-color: #2c2c2c;
  color: #FAFAFA;
}

.calendar-icon {
  position: absolute;
  right: 47px;
  width: 16px;
  height: 16px;
  border-width: 0 3px 3px 0;
  display: inline-block;
  padding: 3px;
  background-color: #ffffff;
}

#wrapper .form-group label {
  text-align: left;
}

.question-bg {
  width: 80%;
  background-color: #fff;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  margin: 3% auto;
  color: #002a54;
  padding: 5px 0;
}
.answer {
  width: 90%;
  margin: 0 auto;
  padding: 15px 0;
  display: flex;
  flex-direction: row;
  border-bottom: solid 2px #efefef;
}
.answer:last-child {
  border-bottom: none;
}
/* Hide the browser's default radio button */
.question-content input {
  position: absolute;
  opacity: 0;
}
/* The container */
.question-content {
  width: 100%;
  text-align: left;
  display: block;
  position: relative;
  padding-left: 12%;
  font-size: 30px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Create a custom radio button */
.check-ans {
  width: 32px;
  height: auto;
  position: absolute;
  -webkit-filter: grayscale(1);
  filter: grayscale(1);
  left: 0;
}
.check-ans img {
  width: 100%;
}
/* When the radio button is checked, add a blue background */
.question-content input:checked ~ .check-ans {
  -webkit-filter: grayscale(0);
  filter: grayscale(0);
}

button.question-btn {
  margin-bottom: 20px;
}

@media not all and (min-resolution: 0.001dpcm) {
  h1,
  h2,
  #wrapper .interestPage .selectItem .text-interest h1,
  .forget-password a,
  .input-personal-id h3 {
    letter-spacing: -1px;
  }
}

.form-group-radio {
  text-align: left;
  margin-bottom: 16px;
}
.form-group-radio > .label {
  font-family: "Sukhumvit Set";
  font-style: normal;
  font-weight: 500;
  font-size: 12px;
  line-height: 19px;
  color: #929497;
  width: 100%;
}
.form-group-radio > ._radio {
  display: inline-block;
    margin-right: 15px;
    padding: 5px 35px;
    font-size: 14px;
    font-weight: bold;
    border-radius: 16px;
    background-color: #EDEDED;
}

.form-group-radio > ._radio.active{
  background-color:  #F1F2FF;
  color: #38539A;
}

.datepicker .datepicker-content {
  font-family: "Sukhumvit Set" !important;
}
.datepicker .datepicker-scroll > li {
  font-size: 16px !important;
}

.datepicker-modal > .datepicker.default > .datepicker-header {
  display: none;
}
.datepicker-modal > .datepicker.default > .datepicker-navbar a {
  color: #38539a !important;
}

.datepicker.default .datepicker-wheel {
  border-top-color: #ccc !important;
  border-bottom-color: #ccc !important;
}

.row {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

.no-margin-row {
  margin-right: 0px !important;
  margin-left: 0px !important;
}

.no-padding-col {
  padding-right: 0px !important;
  padding-left: 0px !important;
}

.col-1 {
  -ms-flex: 0 0 8.333333%;
  flex: 0 0 8.333333%;
  max-width: 8.333333%;
}

.col-2 {
  -ms-flex: 0 0 16.666667%;
  flex: 0 0 16.666667%;
  max-width: 16.666667%;
}

.col-3 {
  -ms-flex: 0 0 25%;
  flex: 0 0 25%;
  max-width: 25%;
}

.col-4 {
  -ms-flex: 0 0 33.333333%;
  flex: 0 0 33.333333%;
  max-width: 33.333333%;
}

.col-5 {
  -ms-flex: 0 0 41.666667%;
  flex: 0 0 41.666667%;
  max-width: 41.666667%;
}

.col-6 {
  -ms-flex: 0 0 50%;
  flex: 0 0 50%;
  max-width: 50%;
}

.col-7 {
  -ms-flex: 0 0 58.333333%;
  flex: 0 0 58.333333%;
  max-width: 58.333333%;
}

.col-8 {
  -ms-flex: 0 0 66.666667%;
  flex: 0 0 66.666667%;
  max-width: 66.666667%;
}

.col-9 {
  -ms-flex: 0 0 75%;
  flex: 0 0 75%;
  max-width: 75%;
}

.col-10 {
  -ms-flex: 0 0 83.333333%;
  flex: 0 0 83.333333%;
  max-width: 83.333333%;
}

.col-11 {
  -ms-flex: 0 0 91.666667%;
  flex: 0 0 91.666667%;
  max-width: 91.666667%;
}

.col-12 {
  -ms-flex: 0 0 100%;
  flex: 0 0 100%;
  max-width: 100%;
}