*{
  /*font-family: 'Sarabun' !important;*/
  font-family: 'Sarabun';
}

body{
  background-color: #FFFFFF;
}

input[readonly] {
  background-color: #e9ecef;
}

select[readonly] {
  background-color: #e9ecef;
}

.divMenuTop{
  background-color: #f7f3eb; 
  height: 90px; 
  margin-top:-10px;
  padding-top: 5px;
  color: #7d4b2b;
}

.divMenuTopLEFT{
  padding-left: 0px; 
  padding-right: 0px; 
  font-size: 16px; 
  font-weight: bold;
  line-height: 90px;
}

.divMenuTopRIGHT{
  padding-left: 0px; 
  padding-right: 0px; 
  font-size: 16px; 
  font-weight: bold;
  line-height: 90px;
}

a.aDivMenuTop:link, a.aDivMenuTop:visited, a.aDivMenuTop:active {
  color: #7d4b2b;
  text-decoration: none;
}
a.aDivMenuTop:hover{
  color: #442410;
  text-decoration: underline;
}

.textRed{
  color:#F00;
}

.error{
  color:#F00;
}
.error.true{
  color:#6bc900;
}

.logoBanner{
  padding: 50px 0 0 0;
}

.logoBannerSignin{
  padding: 10px 0 0 0;
}

a.cmsLink:link, a.cmsLink:visited, a.cmsLink:active {
  color: #000000;
  text-decoration: none;
}
a.cmsLink:hover{
  color: #000000;
  text-decoration: underline;
}

.imgLogoBanner{
  width: 250px;
}
.imgDigitalID{
  width: 300px;
}
.imgIconLng{
  width: 25px;
}
.setIconLng{
  position: relative;
  right: 60px;
  top: 40px;
}
.imgLogoSignin{
  width: 250px;
}
.imgIdcardSignin{
  width: 30px;
  padding-right: 5px;
}
.imgCorrectGreen{
  width: 50px;
}
.imgCorrectGreenSmall{
  width: 15px;
}
.imgIconMember{
  width: 100px;
}


.imgLogoBannerMember{
  width: 120px;
}
.imgIconHome{
  width: 20px;
  margin-top: -5px;
}
.containerMember{
  margin-top: 20px;
}
.navTop{
  border-top: 1px solid #B8B9BB;
  border-bottom: 1px solid #B8B9BB;
  padding: 10px 0;
  margin-top: 20px;
}
.navIconMember{
  width: 60px;
  z-index: 5;
  position: absolute;
  margin-top: -20px;
}


.btn-otp{
  width: 200px;
}

.textHeader1{
  padding: 15px 0 5px 0;
  color: #000000 !important;
}
.textHeader2{
  color: #006738 !important;
}

.textHeader3{
  color: #ffffff !important;
}

.btn-download-index{
  margin: 10px 0 5px 0;
}

.imgBtnMain{
  width: 80%;
}
.btnIMG{
  position: relative;
}
.btn-form-login{
  width: 100px;
}
.btn-menu-index{
  width: 150px;
}
.btn-menu-indexMobile{
  width: 100px;
}
.btn-menu-indexINFO{
  width: 120px;
}
.btn-menu-indexINFO100{
  width: 100px;
}
.btn-menu-indexINFO-mobile{
  width: 80px;
}
.title-set2{
  width: 300px;
}

.boxFormRegistINFO {
  background-color:#FFFFFF;
  border-top: 6px solid #B8B9BB;
  border-bottom: 6px solid #B8B9BB;
  border-left: 1px solid #B8B9BB;
  border-right: 1px solid #B8B9BB;
  border-radius:10px;
  /*padding:20px;*/
}

.boxFormRegistStep1 {
  height: 900px;
  background-color:#FFFFFF;
  border-top: 6px solid #B8B9BB;
  border-bottom: 6px solid #B8B9BB;
  border-left: 1px solid #B8B9BB;
  border-right: 1px solid #B8B9BB;
  border-radius:10px;
  padding:20px;
}

.boxFormRegistStep2 {
  height: 1000px;
  background-color:#FFFFFF;
  border-top: 6px solid #B8B9BB;
  border-bottom: 6px solid #B8B9BB;
  border-left: 1px solid #B8B9BB;
  border-right: 1px solid #B8B9BB;
  border-radius:10px;
  padding:20px;
}

.boxFormRegistStep3 {
  /*height: 1450px;*/
  background-color:#FFFFFF;
  border-top: 6px solid #B8B9BB;
  border-bottom: 6px solid #B8B9BB;
  border-left: 1px solid #B8B9BB;
  border-right: 1px solid #B8B9BB;
  border-radius:10px;
  padding:20px;
}

.boxFormRegistStep4 {
  height: 600px;
  background-color:#FFFFFF;
  border-top: 6px solid #B8B9BB;
  border-bottom: 6px solid #B8B9BB;
  border-left: 1px solid #B8B9BB;
  border-right: 1px solid #B8B9BB;
  border-radius:10px;
  padding:20px;
}

.boxShowDetailRegist {
  height: 900px;
  background-color:#FFFFFF;
  border-top: 6px solid #B8B9BB;
  border-bottom: 6px solid #B8B9BB;
  border-left: 1px solid #B8B9BB;
  border-right: 1px solid #B8B9BB;
  border-radius:10px;
  padding:20px;
}

.boxFormReportPT31 {
  height: 1450px;
  background-color:#FFFFFF;
  border-top: 6px solid #B8B9BB;
  border-bottom: 6px solid #B8B9BB;
  border-left: 1px solid #B8B9BB;
  border-right: 1px solid #B8B9BB;
  border-radius:10px;
  padding:20px;
}

.boxFormReportPT32 {
  height: 1050px;
  background-color:#FFFFFF;
  border-top: 6px solid #B8B9BB;
  border-bottom: 6px solid #B8B9BB;
  border-left: 1px solid #B8B9BB;
  border-right: 1px solid #B8B9BB;
  border-radius:10px;
  padding:20px;
}

.borderDivDetail{
  padding: 5px;
  border-top: 1px solid #B8B9BB;
  border-left: 1px solid #B8B9BB;
  border-right: 1px solid #B8B9BB;
}


.hover-overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  opacity: 0;
  transition: .5s ease;
  background-color: #008CBA;
}

.btnIMG:hover .imgBtnMain {
  transition: transform .2s;
  transform: scale(1.1);
}

.boxTextHeader3{
  background-color: #006738;
  border-radius:10px;
  padding:10px 0 5px 0;
  z-index: 5;
  margin-top: -30px;
}

.boxFormAgreement {
  background-color:#FFFFFF;
  border-top: 6px solid #B8B9BB;
  border-bottom: 6px solid #B8B9BB;
  border-left: 1px solid #B8B9BB;
  border-right: 1px solid #B8B9BB;
  border-radius:10px;
  padding:20px;
}

.boxFormLogin {
  height: 350px;
  background-color:#FFFFFF;
  border-top: 6px solid #B8B9BB;
  border-bottom: 6px solid #B8B9BB;
  border-left: 1px solid #B8B9BB;
  border-right: 1px solid #B8B9BB;
  border-radius:10px;
  padding:20px;
}

.boxFormSigninStep1 {
  min-height: 250px;
  background-color:#FFFFFF;
  border-top: 6px solid #B8B9BB;
  border-bottom: 6px solid #B8B9BB;
  border-left: 1px solid #B8B9BB;
  border-right: 1px solid #B8B9BB;
  border-radius:10px;
  padding:20px;
}

.boxFormSigninStep2 {
  min-height: 400px;
  background-color:#FFFFFF;
  border-top: 6px solid #B8B9BB;
  border-bottom: 6px solid #B8B9BB;
  border-left: 1px solid #B8B9BB;
  border-right: 1px solid #B8B9BB;
  border-radius:10px;
  padding:20px;
}

.boxFormRegist {
  height: 1500px;
  background-color:#FFFFFF;
  border-top: 6px solid #B8B9BB;
  border-bottom: 6px solid #B8B9BB;
  border-left: 1px solid #B8B9BB;
  border-right: 1px solid #B8B9BB;
  border-radius:10px;
  padding:20px;
}

.boxFormRegistProcess {
  height: 400px;
  background-color:#FFFFFF;
  border-top: 6px solid #B8B9BB;
  border-bottom: 6px solid #B8B9BB;
  border-left: 1px solid #B8B9BB;
  border-right: 1px solid #B8B9BB;
  border-radius:10px;
  padding:20px;
}

.textboxReadOnly{
  background-color: #e4f3d3;
}

.textboxReadOnlyGRAY{
  background-color: #ebebeb !important;
}

.menuTopSinin{
  height: 50px;  
  margin-bottom: 20px;
}
.menuTopSinin1{  
  line-height: 50px;
  height: 50px;
  text-align: center;
  border: 1px solid #DFE0E0;
  background-color:#DFE0E0;
  
}
.menuTopSinin1Act{
  line-height: 50px;
  height: 50px;
  text-align: center;
  border: 1px solid #DFE0E0;
  background-color:#00BC20;
}
.menuTopSinin2{
  line-height: 50px;
  height: 50px;
  text-align: center;
  border: 1px solid #DFE0E0;
  background-color:#FFFFFF;
}
.menuTopSinin2Act{
  line-height: 50px;
  height: 50px;
  text-align: center;
  border: 1px solid #DFE0E0;
  background-color:#00BC20;
}

.menuStepSingin{
  height: 100px;
  line-height: 100px;
  text-align: center;
  padding-top: 40px;
  padding-bottom: 10px;
  margin-bottom: 20px;
}
.imgStepSingin{
  width: 60px;
}
.bgStepSignin{
  background-image: url("../images/icon-signin-step-bg.png");
  background-repeat: no-repeat;
}

.progressbar {
  counter-reset: step;
  padding-left: 100px !important;
}
.progressbar li {
  list-style-type: none;
  float: left;
  width: 25%;
  position: relative;
  text-align: center;
}
.progressbar li:before {
  content: counter(step);
  counter-increment: step;
  width: 60px;
  height: 76px;
  /*border: 1px solid #ddd;*/
  display: block;
  text-align: center;
  /*margin: 0 auto 10px auto;*/
  /*border-radius: 50%;*/
  /*background-color: white;*/
}
.progressbar li:after {
  content: '';
  position: absolute;
  width: 100%;
  height: 3px;
  background-color: #ddd;
  top: 30px;
  left: -70%;
  z-index: -1;
}
.progressbar li:first-child:after {
  content:none;
}
.progressbar li.active {
  color: green;
}
.progressbar li.active:before {
  color: white;
  content: '';
  background-image: url('../images/icon-signin-step1-act.png');
  background-size: 60px 76px;
  background-repeat: no-repeat;
  width: 80px;
  height: 100px;
}


.progressbar li.step1:before {
  color: white;
  content: '';
  background-image: url('../images/icon-signin-step1-act.png');
  background-size: 60px 76px;
  background-repeat: no-repeat;
  width: 80px;
  height: 100px;
}
.progressbar li.step2:before {
  color: white;
  content: '';
  background-image: url('../images/icon-signin-step2.png');
  background-size: 60px 76px;
  background-repeat: no-repeat;
  width: 80px;
  height: 100px;
}
.progressbar li.step3:before {
  color: white;
  content: '';
  background-image: url('../images/icon-signin-step3.png');
  background-size: 60px 76px;
  background-repeat: no-repeat;
  width: 80px;
  height: 100px;
}
.progressbar li.step4:before {
  color: white;
  content: '';
  background-image: url('../images/icon-signin-step4.png');
  background-size: 60px 76px;
  background-repeat: no-repeat;
  width: 80px;
  height: 100px;
}
.progressbar li.step1act:before {
  color: white;
  content: '';
  background-image: url('../images/icon-signin-step1-act.png');
  background-size: 60px 76px;
  background-repeat: no-repeat;
  width: 80px;
  height: 100px;
}
.progressbar li.step2act:before {
  color: white;
  content: '';
  background-image: url('../images/icon-signin-step2-act.png');
  background-size: 60px 76px;
  background-repeat: no-repeat;
  width: 80px;
  height: 100px;
}
.progressbar li.step3act:before {
  color: white;
  content: '';
  background-image: url('../images/icon-signin-step3-act.png');
  background-size: 60px 76px;
  background-repeat: no-repeat;
  width: 80px;
  height: 100px;
}
.progressbar li.step4act:before {
  color: white;
  content: '';
  background-image: url('../images/icon-signin-step4-act.png');
  background-size: 60px 76px;
  background-repeat: no-repeat;
  width: 80px;
  height: 100px;
}

.progressbar li.stepM1act:before {
  color: white;
  content: '';
  background-image: url('../images/icon-signin-step1-act.png');
  background-size: 40px 50px;
  background-repeat: no-repeat;
  width: 80px;
}
.progressbar li.stepM2act:before {
  color: white;
  content: '';
  background-image: url('../images/icon-signin-step2-act.png');
  background-size: 40px 50px;
  background-repeat: no-repeat;
  width: 80px;
}
.progressbar li.stepM3act:before {
  color: white;
  content: '';
  background-image: url('../images/icon-signin-step3-act.png');
  background-size: 40px 50px;
  background-repeat: no-repeat;
  width: 80px;
}
.progressbar li.stepM4act:before {
  color: white;
  content: '';
  background-image: url('../images/icon-signin-step4-act.png');
  background-size: 40px 50px;
  background-repeat: no-repeat;
  width: 80px;
}
.progressbar li.step1actNext:before {
  color: white;
  content: '';
  background-image: url('../images/icon-signin-step1-actNext.png');
  background-size: 60px 76px;
  background-repeat: no-repeat;
  width: 80px;
  height: 100px;
}
.progressbar li.step2actNext:before {
  color: white;
  content: '';
  background-image: url('../images/icon-signin-step2-actNext.png');
  background-size: 60px 76px;
  background-repeat: no-repeat;
  width: 80px;
  height: 100px;
}
.progressbar li.step3actNext:before {
  color: white;
  content: '';
  background-image: url('../images/icon-signin-step3-actNext.png');
  background-size: 60px 76px;
  background-repeat: no-repeat;
  width: 80px;
  height: 100px;
}
.progressbar li.step4actNext:before {
  color: white;
  content: '';
  background-image: url('../images/icon-signin-step4-actNext.png');
  background-size: 60px 76px;
  background-repeat: no-repeat;
  width: 80px;
  height: 100px;
}

.checkboxConf {
  background-color: #0e0e0e !important;
  border-color: #020202 !important;
}


img.imgEffectZoom:hover {
  /*animation: shake 0.5s;
  animation-iteration-count: infinite;*/
  -webkit-transform: scale(1.2);
  -ms-transform: scale(1.2);
  transform: scale(1.2);
  transition: 0.2s ease;
}