html {height: 100%;}
body {
	background-color: #ebf0f6 !important;
	/*background-image: url("./images/bunny.jpg");*/
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center center;
	background-attachment: fixed;
	display: flex;
	align-items: center;
	justify-content: center;
	/*height: 100vh;*/
	margin: 0;
	/*overflow: hidden;*/
	font-family:'Noto Sans Thai UI',sans-serif !important;
	font-size:1rem;
}
@font-face {
	font-family: 'THSarabunNew';
	src: url('./fonts/THSarabunNew.ttf') format('truetype');
	font-family: 'JasmineUPC';
	src: url('./fonts/upcjb.ttf') format('truetype');
}
@font-face {
	font-family: 'Fredoka';
	font-style: normal;
	font-weight: 700;
	font-stretch: 100%;
	src: url('./fonts/Fredoka-Regular.ttf') format('truetype');
}
@font-face {
	font-family: 'Fredoka-Bold';
	font-style: normal;
	font-weight: 700;
	font-stretch: 100%;
	src: url('./fonts/Fredoka-Bold.ttf') format('truetype');
}
/* thai */
@font-face {
  font-family: 'Noto Sans Thai UI';
  font-style: normal;
  font-weight: 300;
  font-stretch: 100%;
  src: url(./fonts/HI_jiZUXIL1M5TugDeLoFv_997Xgc_HYvC_HV9O7GQTTbIxbWl0Y.woff2) format('woff2');
  unicode-range: U+0E01-0E5B, U+200C-200D, U+25CC, U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* thai */
@font-face {
  font-family: 'Noto Sans Thai UI';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  src: url(./fonts/HI_jiZUXIL1M5TugDeLoFv_997Xgc_HYvC_HV9O7GQTTbIxbWl0Y.woff2) format('woff2');
  unicode-range: U+0E01-0E5B, U+200C-200D, U+25CC, U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* thai */
@font-face {
  font-family: 'Noto Sans Thai UI';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  src: url(./fonts/HI_jiZUXIL1M5TugDeLoFv_997Xgc_HYvC_HV9O7GQTTbIxbWl0Y.woff2) format('woff2');
  unicode-range: U+0E01-0E5B, U+200C-200D, U+25CC, U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* thai */
@font-face {
  font-family: 'Noto Sans Thai UI';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  src: url(./fonts/HI_jiZUXIL1M5TugDeLoFv_997Xgc_HYvC_HV9O7GQTTbIxbWl0Y.woff2) format('woff2');
  unicode-range: U+0E01-0E5B, U+200C-200D, U+25CC, U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
a {text-decoration: none !important;}

.mainFntClr{color: #203047 !important;}
.mainBg1Clr{background-color: #203047 !important;color:white !important;}
.mainBg2Clr{background-color: #3a6188 !important;color:white !important;}
.mainBg3Clr{background-color: #f3f6fb !important;}
.mainBg4Clr{background-color: #e4edf6 !important;}

.fntGray{color:#E0E0E0 !important;}

.mainLb1Clr{background-color: #EBF0F6 !important;border-color: #203047 !important;color:#203047 !important;}
.myTrColr1{background-color: #d4f7f8;}
.myBtnHover{border-color: #203047 !important;color:#203047 !important;}
.myBtnHover:hover{background-color: #203047 !important;color:white !important;}
.strikethrough {text-decoration: line-through;}
@keyframes iconAnimation {
	0% { font-size: 16px; }
	50% { font-size: 12px; }
	100% { font-size: 16px; }
}
.animated-icon {
	animation: iconAnimation 1s infinite;
}
.myCheckBoxGreen1{
	border-radius:1rem 0rem 0rem 1rem !important;border-width: 2px 0px 2px 2px !important;border-style: solid;border-color: #203047 !important;box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}
.myCheckBoxGreen2{
	border-radius:0rem 1rem 1rem 0rem !important;border-width: 2px 2px 2px 2px !important;border-style: solid;border-color: #203047 !important;box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}
.myBtnNObg{
	display: inline-block;
    font-weight: 400;
    line-height: 1.5;
    color: #212529;
    text-align: center;
    text-decoration: none;
    vertical-align: middle;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    border: 1px solid transparent;
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    border-radius: 0.25rem;
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
.mynavbar{
	position: relative;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	padding-top: 5px;
	padding-bottom: 5px;
	height: 40px;
}
.pageBtnWhite{
	border-radius: 1rem;
	background-color:#FFFF;
	border:2px solid #203047;
	box-shadow:0 4px 8px rgba(0,0,0,0.2);
}
.padUnderNav{margin-top: 30px;}
.myMenuBox {
	display: flex;
	width:100%;
	height:clamp(10vh , 20vh , 100vh) !important;
	border-radius: 1rem;
	cursor: pointer;
}
.myBadgemenu {
	margin-left: calc(var(--bs-gutter-x) / -2) !important;
}
.myboxmenu1 {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	font-size: 20px;
	width: 75% !important;
	margin-left: calc(var(--bs-gutter-x) / 1) !important;
}
.myboxmenu2 {
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 20px;
	width: 25% !important;
}
.myBorderR{border-radius:0.9rem 0rem 0rem 0.9rem !important;}
.myBorderL{border-radius:0rem 0.9rem 0.9rem 0rem !important;}
.myBorderLR{border-radius:0.9rem !important;}
.myBorder2{border-radius: 1rem;box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);}
.myBorder2Solid{border:2px solid #203047;}

.mybtncolormain {
    display: inline-block;
    font-weight: 400;
    line-height: 1.5;
    color: #212529;
    text-align: center;
    text-decoration: none;
    vertical-align: middle;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    background-color: transparent;
    border: 1px solid transparent;
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    border-radius: 0.25rem;
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.mycontainer {
	width: 50vw;
	height: 50vh;
	border: 1px solid black;
	text-align: center;
	line-height: 100%;
	font-size: 24px;
}

.myBoxDesign{
	background-color: #FAEABB;
	width: 100% !important;
	border: 2px solid #FFBC21;
	border-radius: 1rem;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
.myBtnShadow{
	border-radius:1rem !important;
	border:2px solid #203047 !important;
	box-shadow:0 4px 8px rgba(0,0,0,0.2);
}
.myClrBoxDesign{background-color: #FAEABB !important;}
.myBtnGroup{
	position: relative;
	display: inline-flex;
	vertical-align: middle;
}
.myMinW05{min-width: 5vw !important;}
.myMinW10{min-width: 10vw !important;}
.myMinW15{min-width: 15vw !important;}

.table th {text-align: center;}
.table td {text-align: center;}
.tLeft{text-align: left !important;}
.tRight{text-align: right !important;}
.tCenter{text-align: center !important;}
.fixw10{width: 10%!important;}
.fixw15{width: 15%!important;}
.fixw20{width: 20%!important;}
.fixw25{width: 25%!important;}
.fixw30{width: 30%!important;}
.fixw35{width: 35%!important;}
.fixw40{width: 40%!important;}
.fixw45{width: 45%!important;}
.fixw50{width: 50%!important;}
.fixw55{width: 55%!important;}
.fixw60{width: 60%!important;}
.colorBlack {color: black;}
.rb-red {color: red;}
.rb_black {color: #000;}

.myFlex1{flex: 1;}

.btnMoo15A{
	display: inline-block !important;
	justify-content: center; align-items: center;
	padding-top: 10px;
	padding-bottom: 10px;
	color: #FFF !important;
	cursor: pointer;
	border-radius:0.9rem;
	background-color:#203047;
}
.btnMoo15D{
	display: inline-block !important;
	justify-content: center; align-items: center;
	padding-top: 10px;
	padding-bottom: 10px;
	cursor: pointer;
	border-radius:0.9rem;
	background-color:#FFF;
}
#searchIcon {
	margin-left: 0px;
	border-radius: 0rem 1rem 1rem 0rem;
	background-color: #0bb863;
	z-index:2;
}
.wd40{width:40px !important;}
.wd60{width:60px !important;}
.wd80{width:80px !important;}
.wd100{width:100px !important;}
.wd120{width:120px !important;}
.wd140{width:140px !important;}
.wd160{width:160px !important;}
.wd180{width:180px !important;}
.wd200{width:200px !important;}
.wd300{width:300px !important;}
.wd320{width:320px !important;}
.wd340{width:340px !important;}
.wd360{width:360px !important;}
.wd380{width:380px !important;}

.bgGray{background-color: #E0E0E0 !important;}
.pstB0{background-color: #DFF0F4 !important;}
.pstB1{background-color: #B7DEE8 !important;}
.pstB2{background-color: #9CDEFE !important;}
.pstB2100{background-color: #9CDEFE !important;width: 100%;color: #FFF;}
.pstB3{background-color: #248AFD !important;color: #FFF;}
.pstB3100{background-color: #248AFD !important;width: 100%;color: #FFF;}
.pstB4{background-color: #F4F9FF !important;}
.pstGBG{background-color: #EDFFED !important;}
.pstG0{background-color: #98E690 !important;}
.pstG0100{background-color: #98E690 !important;width: 100%;color: #FFF;}
.pstG1{background-color: #77DF79 !important;}
.pstG2{background-color: #44D362 !important;}
.pstG3{background-color: #28AA42 !important;}
.pstG4{background-color: #D1F3CD !important;}
.pstG5{background-color: #93E38A !important;}
.pstG6{background-color: #E8F9E6 !important;}
.pstR0{background-color: #FFDADA !important;}
.pstR1{background-color: #FFB5B5 !important;}
.pstR2{background-color: #FFB5B5 !important;}
.pstR3{background-color: #FFB5B5 !important;}
.pstR4{background-color: #FFB5B5 !important;}
.pstO1{background-color: #FCD5B4 !important;}
.pstO2{background-color: #FDE9D9 !important;}
.pstO3{background-color: #FF964F !important;}
.pstY1{background-color: #FEFFD2 !important;}
.pstY2{background-color: #FCFF80 !important;}
.pstPP1{background-color: #FCC4FF !important;}
.pstPP2{background-color: #EFB5FF !important;}
.pstPP3{background-color: #E3B1FF !important;}
.pstPP4{background-color: #D9A4FF !important;}
.pstPP5{background-color: #D291FF !important;}

.myBGorange{background-color: #FF5656 !important;}
.myBGyellow{background-color: #F9BE23 !important;}
.myBGblu01{color:#203047;background-color:#48B4D5 !important;}
.myBGorg01{color:#203047;background-color:#F9BE23 !important;}
.myBGgrn01{color:#203047;background-color:#0BB863 !important;}

.myPds1Color{background-color: #2196F3;}
.myPds2Color{background-color: #5E5CB2;}
.myPds3Color{background-color: #31B774;}
.myPds31Color{background-color: #1B5E20;}
.myPds4Color{background-color: #B1907F;}
.myPds5Color{background-color: #F3BA21;}
.myPds6Color{background-color: #F26E1C;}
.myPds7Color{background-color: #FC4C7B;}
.myPds10Color{background-color: #894BD1;}

.lbRed {color: red;}
.lbBalck {color: #000;}
.lbGreen {color: #0DFF00;}
.lbGray {color: #E0E0E0;}
.lbOrange {color: #F4A30B;}

.myBtnOutY{color: #F0F700;border-color: #F0F700;}

.fnt10 {font-size: 10px !important;font-family: thsarabunnew,sans-serif;}
.fnt12 {font-size: 12px !important;font-family: thsarabunnew,sans-serif;}
.fnt13 {font-size: 13px !important;font-family: thsarabunnew,sans-serif;}
.fnt14 {font-size: 14px !important;font-family: thsarabunnew,sans-serif;}
.fnt16 {font-size: 16px !important;font-family: thsarabunnew,sans-serif;}
.fnt18 {font-size: 18px !important;font-family: thsarabunnew,sans-serif;}
.fnt20 {font-size: 20px !important;font-family: thsarabunnew,sans-serif;}
.fnt22 {font-size: 22px !important;font-family: thsarabunnew,sans-serif;}
.fnt24 {font-size: 24px !important;font-family: thsarabunnew,sans-serif;}
.fnt26 {font-size: 26px !important;font-family: thsarabunnew,sans-serif;}
.fnt30 {font-size: 30px !important;font-family: thsarabunnew,sans-serif;}
.fnt40 {font-size: 40px !important;font-family: thsarabunnew,sans-serif;}

.fnt08pt{font-size: 8pt !important;font-family: thsarabunnew,sans-serif;}
.fnt09pt{font-size: 9pt !important;font-family: thsarabunnew,sans-serif;}
.fnt10pt{font-size:10pt !important;font-family: thsarabunnew,sans-serif;}
.fnt11pt{font-size:11pt !important;font-family: thsarabunnew,sans-serif;}
.fnt12pt{font-size:12pt !important;font-family: thsarabunnew,sans-serif;}
.fnt13pt{font-size:13pt !important;font-family: thsarabunnew,sans-serif;}
.fnt14pt{font-size:14pt !important;font-family: thsarabunnew,sans-serif;}
.fnt16pt{font-size:16pt !important;font-family: thsarabunnew,sans-serif;}
.fnt18pt{font-size:18pt !important;font-family: thsarabunnew,sans-serif;}
.fnt20pt{font-size:20pt !important;font-family: thsarabunnew,sans-serif;}
.fnt22pt{font-size:22pt !important;font-family: thsarabunnew,sans-serif;}
.fnt30pt{font-size:30pt !important;font-family: thsarabunnew,sans-serif;}
.fnt40pt{font-size:40pt !important;font-family: thsarabunnew,sans-serif;}

.fntMain{font-size: 14px !important;font-family: thsarabunnew,sans-serif;}
.fntInTd{font-size: 12px !important;font-family: thsarabunnew,sans-serif;}

.lh08{line-height:8pt;}
.lh09{line-height:9pt;}
.lh10{line-height:10pt;}
.lh11{line-height:11pt;}
.lh12{line-height:12pt;}
.lh13{line-height:13pt;}
.lh14{line-height:14pt;}
.lh16{line-height:16pt;}
.lh18{line-height:18pt;}
.lh20{line-height:20pt;}
.lh50{line-height:50px;}
.lh60{line-height:60px;}

.fnt06rem{font-size:0.6rem !important;}
.fnt07rem{font-size:0.7rem !important;}
.fnt08rem{font-size:0.8rem !important;}
.fnt09rem{font-size:0.9rem !important;}
.fnt10rem{font-size:1rem !important;}
.fnt12rem{font-size:1.2rem !important;}
.fnt14rem{font-size:1.4rem !important;}
.fnt15rem{font-size:1.5rem !important;}
.fnt16rem{font-size:1.6rem !important;}
.fnt18rem{font-size:1.8rem !important;}
.fnt20rem{font-size:2rem !important;}
.fnt22rem{font-size:2.2rem !important;}
.fnt24rem{font-size:2.4rem !important;}
.fnt25rem{font-size:2.5rem !important;}
.fnt26rem{font-size:2.6rem !important;}
.fnt28rem{font-size:2.8rem !important;}
.fnt30rem{font-size:3rem !important;}
.fnt40rem{font-size:4rem !important;}
.fnt50rem{font-size:5rem !important;}
.fnt60rem{font-size:6rem !important;}
.fnt70rem{font-size:7rem !important;}
.fnt80rem{font-size:8rem !important;}
.fnt90rem{font-size:9rem !important;}

.mjtLob10 {margin-top:-10px;}
.pdt4 {padding-top: 4px;}
.pdt5 {padding-top: 5px;}
.pdt10 {padding-top: 10px;}
.pdt15 {padding-top: 15px;}
.pdt20 {padding-top: 20px;}
.pdt25 {padding-top: 25px;}
.pdt30 {padding-top: 30px;}
.pdt35 {padding-top: 35px;}
.pdt40 {padding-top: 40px;}
.pdt45 {padding-top: 45px;}
.pdt50 {padding-top: 50px;}
.pdt60 {padding-top: 60px;}

.pdb4 {padding-bottom: 4px;}
.pdb5 {padding-bottom: 5px;}
.pdb10 {padding-bottom: 10px;}
.pdb15 {padding-bottom: 15px;}
.pdb20 {padding-bottom: 20px;}
.pdb25 {padding-bottom: 25px;}
.pdb30 {padding-bottom: 30px;}
.pdb35 {padding-bottom: 35px;}
.pdb40 {padding-bottom: 40px;}
.pdb45 {padding-bottom: 45px;}
.pdb50 {padding-bottom: 50px;}

.pdl10 {padding-left: 10px;}
.pdr10 {padding-right: 10px;}

.pdlr0 {padding-left: 0px;padding-right: 0px;}
.pdlr5 {padding-left: 5px;padding-right: 5px;}

.mjt10 {margin-top:10px !important;}
.mjt20 {margin-top:20px;}
.mjt22 {margin-top:22px;}
.mjt24 {margin-top:24px;}
.mjt26 {margin-top:26px;}
.mjt28 {margin-top:28px;}
.mjt30 {margin-top:30px;}
.mjt40 {margin-top:40px;}
.mjt50 {margin-top:50px;}
.mjt60 {margin-top:60px;}
.mjt70 {margin-top:70px;}
.mjt80 {margin-top:80px;}
.mjt90 {margin-top:90px;}
.mjt100 {margin-top:100px;}
.mjt110 {margin-top:110px;}
.mjt120 {margin-top:120px;}
.mjt130 {margin-top:130px;}
.mjt140 {margin-top:140px;}
.mjt150 {margin-top:150px;}
.mjb10 {margin-bottom:10px;}
.mjb20 {margin-bottom:20px;}
.mjb22 {margin-bottom:22px;}
.mjb24 {margin-bottom:24px;}
.mjb26 {margin-bottom:26px;}
.mjb28 {margin-bottom:28px;}
.mjb30 {margin-bottom:30px;}
.mjb100{margin-bottom:100px !important;}

.mjl10 {margin-left:10px;}
.mjr10 {margin-right:10px;}
.fxhi64{max-height:64px;}
.pstAb{position: absolute;}
.pstRe{position: relative;}

.mjl-24 {margin-left:-24px;}
.mjl-26 {margin-left:-26px;}
.mjl-28 {margin-left:-28px;}
.mjl-30 {margin-left:-30px;}
.mjl-32 {margin-left:-32px;}
.mjl-34 {margin-left:-34px;}
.mjl-36 {margin-left:-36px;}
.mjl-38 {margin-left:-38px;}
.mjl-40 {margin-left:-40px;}
.mjl-42 {margin-left:-42px;}
.mjl-44 {margin-left:-44px;}
.mjl-46 {margin-left:-46px;}
.mjl-48 {margin-left:-48px;}
.mjl-50 {margin-left:-50px;}

.mjl-200 {margin-left:-200px;}
.mjl-250 {margin-left:-250px;}
.mjl-300 {margin-left:-300px;}
.mjl-350 {margin-left:-350px;}
.mjl-400 {margin-left:-400px;}
.mjl-450 {margin-left:-450px;}
.mjl-500 {margin-left:-500px;}

.minW100{min-width:100px !important;}
.minW150{min-width:150px !important;}
.minW200{min-width:200px !important;}
.minW300{min-width:300px !important;}

.maxW100{max-width:100px !important;}
.maxW150{max-width:150px !important;}
.maxW200{max-width:200px !important;}
.maxW250{max-width:250px !important;}
.maxW300{max-width:300px !important;}

.wd10pc{width:10% !important;}
.wd11pc{width:11% !important;}
.wd12pc{width:12% !important;}
.wd13pc{width:13% !important;}
.wd14pc{width:14% !important;}
.wd15pc{width:15% !important;}
.wd16pc{width:16% !important;}
.wd17pc{width:17% !important;}
.wd18pc{width:18% !important;}
.wd19pc{width:19% !important;}
.wd20pc{width:20% !important;}

.bdrbt1Blk {border-bottom: 1px solid #000;}
.bdr1Blk {border: 1px solid #000;}
.bdr1BlkR {border: 1px solid #000;border-radius: .25em;}

img.trn05 {opacity: 0.5;filter: alpha(opacity=50);}
img.trn06 {opacity: 0.6;filter: alpha(opacity=60);}
img.trn07 {opacity: 0.7;filter: alpha(opacity=70);}
img.trn08 {opacity: 0.8;filter: alpha(opacity=80);}

.checkbox label:after {content: '';display: table;clear: both;}
.checkbox .cr {
	position: relative;
	display: inline-block;
	border: 1px solid #A9A9A9;
	border-radius: .25em;
	width: 1.3em;
	height: 1.3em;
	float: left;
	margin-right: .5em;
}
.checkbox .cr .cr-icon {
	position: absolute;
	font-size: .8em;
	line-height: 0;
	top: 50%;
	left: 15%;
}
.checkbox label input[type="checkbox"] {display: none;}
.checkbox label input[type="checkbox"]+.cr>.cr-icon {opacity: 0;}
.checkbox label input[type="checkbox"]:checked+.cr>.cr-icon {opacity: 1;}
.checkbox label input[type="checkbox"]:disabled+.cr {opacity: .5;}
.centeredTxt {
	position: relative;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

table.mytable
{
	border-collapse: collapse;
	/*border: 1px solid #839E99;*/
	background: #FFF;
	/*font: 1.3em RSU;*/
	color: #033;
	width: 100%;
	max-width: 100%;
}
.mytable>tbody>tr>td, .mytable>tbody>tr>th, .mytable>tfoot>tr>td, .mytable>tfoot>tr>th, .mytable>thead>tr>td, .mytable>thead>tr>th {
	padding-top: 12px;
	padding-bottom: 12px;
	padding-left: 2px;
}
.w-6pc{max-width:16%;}
/*.mx100{max-width:100px !important;}*/
.mytable caption { font-size: 1.3em; font-weight: bold; text-align: left; padding: 1em 4px; }
.mytable td,.mytable th { padding: 3px 3px .25em 3px; line-height: 1.3em; }
.mytable th { background: #839E99; color: #fff; font-weight: bold; text-align: left; padding-right: .5em; vertical-align: top; }
.mytable thead th { background: #2C5755; text-align: center; }
.mytable .odd td { background: #DBE6DD; }
.mytable .odd th { background: #6E8D88; }
.mytable td a,
.mytable td a:link { color: #325C91; }
.mytable td a:visited { color: #466C8E; }
.mytable td a:hover,
.mytable td a:focus { color: #1E4C94; }
.mytable th a,
.mytable td a:active { color: #fff; }
.mytable tfoot th,
.mytable tfoot td { background: #2C5755; color: #fff; }
.mytable th + td { padding-left: .5em; }

.myModalBody{display: inline-block;word-break: break-word;padding: 0 !important;}
/* INPUT PLACEHOLDER COLOR RED */
/* webkit solution */
::-webkit-input-placeholder { text-align:right; }
/* mozilla solution */
input:-moz-placeholder{text-align:right;}
input.imp::-webkit-input-placeholder{color: red !important;}
input.imp:-moz-placeholder { /* Firefox 18- */color: red !important;}
input.imp::-moz-placeholder {  /* Firefox 19+ */color: red !important;}
input.imp:-ms-input-placeholder {color: red !important;}
/* INPUT PLACEHOLDER COLOR RED */
input.upcas {text-transform: uppercase;}
input.lowcas {text-transform: lowercase;}
/* Autocomplete */
.ui-autocomplete { position: absolute; cursor: default; }
.stickyHeader {
	position: sticky;
	top: 100px;  /* 0px if you don't have a navbar, but something is required */
	/*background: white;*/
}
/* NAV */
#MenuSideNav {
	/*width: 400px;*/
	position: fixed;
	z-index: 5;
	top: 0;
	left: 0;
	overflow-x: hidden;
	transition: 0.5s;
	padding-top: 8px;
	padding-left: 10px;
	/*opacity: 0.7;*/
}
.sidenav {
	height: 100%;
	width: 10vw;
	position: fixed;
	z-index: 5;
	top: 0;
	left: 0;
	background-color: #111;
	overflow-x: hidden;
	transition: 0.5s;
	padding-top: 40px;
	opacity: 0.7;
}
.sidenav a {
	padding: 8px 8px 8px 32px;
	text-decoration: none;
	/*font-size: 25px;*/
	/*color: #818181;*/
	color: #FFFFFF;
	display: block;
	transition: 0.3s;
}
.sidenav a:hover{color: #069EF9;}
.sidenav .closebtn {
	position: absolute;
	top: 0;
	right: 25px;
	font-size: 36px;
	margin-left: 50px;
}
@media screen and (max-height: 450px) {
	.sidenav {padding-top: 15px;}
	.sidenav a {font-size: 18px;}
}
.transparent{background-color: rgba(255,255,255,0.5);}
/* END NAV */
.cusRounded10{border-radius: 10px;}
.cusRounded20{border-radius: 20px;}
.cusRounded30{border-radius: 30px;}
.cusRounded40{border-radius: 40px;}
.pointer {cursor: pointer;}
.grabHnd {cursor: grab;}
.zoom-in {cursor: zoom-in;}
.not-allowed {cursor: not-allowed;}
.aniCross{
	width: 12px;
	height: auto;
	animation: widthAnimation 1s ease-in-out infinite alternate;
}
@keyframes widthAnimation {
	from {width: 12px;}
	to {width: 16px;}
}
.styleWayBtn {
	border-radius:1rem;background-color:#FFFF;border:2px solid #203047;box-shadow:0 4px 8px rgba(0,0,0,0.2);
}
.btnSize-1 {
	display: inline-block;
	padding: 0.1rem 0.1rem 0.1rem 0.1rem;
	font-size: 0.875rem;
	border-radius: 0.25rem;
}
.bgCus-light{
	color: #000;
	background-color: #D4D4D4;
	border:solid 1px #D4D4D4;
}
.bxshdw {
	box-shadow: 0 0 20px rgba(0,0,0,.3);
}
.bxshdwMenu {
	padding-left: 10px;
	padding-right: 10px;
	border: 2px solid;
	box-shadow: 5px 10px 8px rgba(0,0,0,.3);
}
.btnNoHand {
	display: inline-block;
	font-weight: 400;
	line-height: 1.5;
	color: #212529;
	text-align: center;
	text-decoration: none;
	vertical-align: middle;
	-webkit-user-select: none;
	-moz-user-select: none;
	user-select: none;
	background-color: transparent;
	border: 1px solid transparent;
	padding: 0.375rem 0.75rem;
	font-size: 1rem;
	border-radius: 0.25rem;
	transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
.btnCircle.btn-xl {
	width: 70px;
	height: 70px;
	padding: 10px 16px;
	border-radius: 35px;
	font-size: 24px;
	line-height: 1.33;
}

.btnCircle {
	width: 30px;
	height: 30px;
	padding: 6px 0px;
	border-radius: 15px;
	text-align: center;
	font-size: 12px;
	line-height: 1.42857;
}

a.navMenuIn { text-decoration: none; }
a.navMenuIn:link { color: #000 !important;}
a.navMenuIn:visited { color: #000 !important;}
a.navMenuIn:hover { color: #000 !important;}

a.lbGray:hover { color: #E0E0E0 !important;}

a.lbGray:hover { color: #E0E0E0;}
a.aThisPage { text-decoration: none;background-color: #248AFD !important;color: #FFF;width: 100%;}
a.aThisPage:link { color: #FFF !important;}
a.aThisPage:visited { color: #FFF !important;}
a.aThisPage:hover { color: #ECFF00 !important;}
.txtG{ color: #198754 !important;}
.txtD{ color: #000000 !important;}
.txtW{ color: #FFFFFF !important;}
td.tdMenuHover:hover{background-color: #98E690 !important;}
.tdMenuActive{background-color: #98E690 !important;}
.tdMenuNoActive{background-color: #D1F3CD !important;}
.navGray{
	background-color: #D8D6D6 !important;
	color: #FFF;
}
table#tbNav{margin-top:0;margin-bottom:0;background: rgba(255,255,255,0.9);}

.custom-file-button input[type=file] {margin-left: -2px !important;}
.custom-file-button input[type=file]::-webkit-file-upload-button {display: none;}
.custom-file-button input[type=file]::file-selector-button {display: none;}
.custom-file-button:hover label {background-color: #dde0e3;cursor: pointer;}
.blinkRed {animation: blinker 1s linear infinite;}
@keyframes blinker {50% {opacity: 0;}}

#modalCalcLuContent{width: 800px;min-width: 800px;}
.tbCalcNwLu th,td{
	vertical-align: middle;
}
#container {
  text-align: center;
  margin: 0;
}

#qr-canvas {
  margin: auto;
  width: calc(100% - 20px);
  max-width: 400px;
}

#btn-scan-qr {cursor: pointer;}
#btn-scan-qr img {
	height: 10em;
	padding: 15px;
	margin: 15px;
	background: white;
}

#qr-result {
	font-size: 1.2em;
	margin: 20px auto;
	padding: 20px;
	max-width: 700px;
	background-color: white;
}
.my-whiteblack {
	color: white;
	text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}
.workArea{
	width: 95vw;
	height: 90vh;
	background-color: rgba(255, 255, 255, 0.8);
	transition: background-color 0.8s;
	border-radius: 10px;
	overflow: auto;
}
.productListArea{
	/*width: 95vw;*/
	height: auto;
	background-color: rgba(255, 255, 255, 0.8);
	transition: background-color 0.8s;
	border-radius: 10px;
	/*overflow: auto;*/
}

.w80vw{width: 80vw;}

.modal-dialog-centered {
	display: flex;
	align-items: center;
	min-height: calc(75vh - 20px);
}

.custom-checkbox-red .checkmark {
  position: relative;
  top: 0;
  left: 0;
  height: 20px;
  width: 20px;
  background-color: #eee;
  border-radius: 4px;
}

/* เมื่อ checkbox ถูก disabled, จะเปลี่ยนสี background ของ span */
.custom-checkbox-red input:disabled ~ .checkmark {
  background-color: red;
}

/* กำหนดสไตล์เพื่อจำลองลักษณะของ checkbox ที่ถูก check */
.custom-checkbox-red .checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* แสดง checkmark เมื่อ checkbox ถูก check */
.custom-checkbox-red input:checked ~ .checkmark:after {
  display: block;
}

/* กำหนดรูปแบบของ checkmark */
.custom-checkbox-red .checkmark:after {
  left: 7px;
  top: 3px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}