*{
  font-family: 'Sarabun','Font Awesome 5 Free' !important;
  /*'Sarabun','Kanit','Font Awesome 5 Free' */
}

body{
  background-color: #FFFFFF;
}

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

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

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

.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;
}
.title-set2{
  width: 300px;
}


.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: -40px;
}

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

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

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

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

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

.textboxReadOnly{
  background-color: #e4f3d3;
}


.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-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: rgb(156, 154, 154);
  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-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-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-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-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-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-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-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-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-step4-act.png');
  background-size: 60px 76px;
  background-repeat: no-repeat;
  width: 80px;
  height: 100px;
}
.progressbar li.step1actNext:before {
  color: white;
  content: '';
  background-image: url('../images/icon-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-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-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-step4-actNext.png');
  background-size: 60px 76px;
  background-repeat: no-repeat;
  width: 80px;
  height: 100px;
}

.imgIndexBanner{
  width: 100%;
  border-radius: 10px;
}

.fontRed{
  color: rgb(255, 0, 0);
}

.fontRedSpecial{
  color: #EF4723;
}


.fontGreen{
  color:#39B54A;
}

.fontGray{
  color:#969996;
}

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

a.swlng:hover{
  color: #000000;
  text-decoration: underline;
}

a.navTop:link, a.navTop:visited, a.navTop:active {
  color: #ffffff;
  text-decoration: none;
}

a.navTop:hover{
  color: #ffffff;
  text-decoration: none;
  font-weight: bold;
}

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

a.navLeft:hover{
  color: #000000;
  text-decoration: none;
  font-weight: bold;
}

.colAbstract{
  border-style: solid; 
  border-width: 1px; 
  border-color: #d1d1d1; 
  padding: 5px;
}

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

a.forgotPW:hover{
  color: #0b0136;
  text-decoration: underline;
}

.btn-special {
  --bs-btn-color: #fff;
  --bs-btn-bg: #EF4723;
  --bs-btn-border-color: #EF4723;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #EF4723d4;
  --bs-btn-hover-border-color: #EF4723;
  --bs-btn-focus-shadow-rgb: 60,153,110;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #EF4723;
  --bs-btn-active-border-color: #EF4723;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: #a7361c;
  --bs-btn-disabled-border-color: #a7361c;
}

.btn-special2 {
  --bs-btn-color: #000;
  --bs-btn-bg: #e3d1b3;
  --bs-btn-border-color: #e3d1b3;
  --bs-btn-hover-color: #000;
  --bs-btn-hover-bg: #bcac91;
  --bs-btn-hover-border-color: #bcac91;
  --bs-btn-focus-shadow-rgb: 60,153,110;
  --bs-btn-active-color: #000;
  --bs-btn-active-bg: #e3d1b3;
  --bs-btn-active-border-color: #e3d1b3;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #000;
  --bs-btn-disabled-bg: #e3d1b3;
  --bs-btn-disabled-border-color: #e3d1b3;
}

.navLeftBTN{
  border: 2px solid #f8f4ee;
  padding: 10px;
  border-radius: 5px;
  background-color: #ffffff; 
  padding: 10px;
}

.navLeftBTN:hover {
  background-color: #baa98d;
  font-weight: bold;
  cursor: pointer;
}