body {
}

A:link { color: black; text-decoration:none}
A:visited {color: black; text-decoration: none}
A:hover {color: black; text-decoration: none}


#header-fixed {
    position: fixed;
    top: 0px; display:none;
    background-color:white;
}


@font-face {
	font-family: THSarabun; 
	src: url(../Font/THSarabun.ttf); 
}

/* Checklist Box */
.ScrollBox {
	max-height: 80px;
}



/* Backgroung Panel Header in Master Page */
.MainHeaderBG {
	background-color: white;
	width:100%;
}

.Content {
	margin: auto;
	width: 98%;
	max-width: 1800px;
}

.BlankSpace {
	height: 20px;
}

.MainHeader, .TbContent, .TbContentChoice, .TbContentNoPad { /* Table Header in Master Page */
	table-layout: fixed;
	border-collapse: collapse;
	border-spacing: 0px;
	max-width: 1800px;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	margin: auto;
	width: 100%;
}

	.TbContent td {
		padding-bottom: 5px;
		padding-top: 5px;
		font-size: 16px;
		color: rgb(30,30,30);
	}

.TbResult {
	border-collapse: collapse;
	border-spacing: 0px;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	max-width: 1800px;
	margin: auto;
	width: 100%;
	border-top: 1px solid black;
	border-bottom: 1px solid black;
}
.TbResult td {
		padding-bottom: 14px;
		padding-top: 14px;
		padding-left: 20px;
		padding-right: 20px;
		font-size: 26px;
		color: rgb(30,30,30);
}

.SubResult {
	padding-left: 40px;
}

.Rowborder {
	border-top: 1px solid black;
	border-bottom: 1px solid black;
}

.TbContentNoPad {
	
	width: 100%;
}
	.TbContentNoPad td {
		padding-bottom: 0px;
		padding-top: 0px;
		font-size: 16px;
		color: rgb(30,30,30);
	}

.TbContentChoice {
	width: 100%;
}
	.TbContentChoice tr {
		border-top: 1px solid rgb(180, 180, 180);
		border-bottom: 1px solid rgb(180, 180, 180);
	}
	.TbContentChoice td {
		padding-bottom: 20px;
		padding-top: 20px;
	}

.MainHeader2 { /* Table Header in Master Page */
		/*min-width: 1200px;*/
		width: 100%;
		margin: 0 auto;
	}

/* Backgroung Panel Content in Master Page */
.MainContentBG {
	margin-top: 20px;
	background-color: white;
	min-height: 300px;
	width:100%;
}

.MainContentBG2 {
	margin-top: 0px;
	background-color: white;
	min-height: 300px;
	width: 100%;
}

.MainContent {/* Table Content in Master Page */
	min-width: 1200px;
	margin: 0 auto;
}

/* Backgroung Panel Footer in Master Page */
.MainFooterBG {
	margin-top: 50px;
	background-color: white;
	width:100%;
}
.MainFooter {/* Table Footer in Master Page */
	min-width: 1200px;
	margin: 0 auto;
}

/* Calendar*/
.DateSel {
	padding-left: 4px;
	padding-right: 4px;
	padding-top: 3px;
	padding-bottom: 3px;
}

/* ปุ่มเมนู */
.MenuHead {
	color: red;
	font-weight: bold;
}

.MenuMainBT {
    width: 90%;
    height: 90%;
    font-size: 26px;
    background-color: white;
    color: black;
    font-weight: bold;
    border: 0px solid #000000; /* Green */
}

    .MenuMainBT:hover {
        color: white;
        background-color: rgb(119,24,17);

    }

    .MenuMainBT:active {
        color: white;
        background-color: lightgray;

    }


.MenuMainBTDis {
    width: 90%;
    height: 90%;
    font-size: 28px;
    color: white;
    background-color: lightgray;
    font-weight: bold;
    border: 0px solid #000000; /* Green */
    pointer-events:none;
}

.MenuBlock {
    width: 28%;
    text-align:center;
    height: 150px;
    vertical-align: middle;
}


.MenuBT {
	border-collapse: separate;
	border-spacing: 0px;
	padding-left: 4px;
	padding-right: 4px;
	padding-top: 3px;
	padding-bottom: 3px;
	color: black;
	min-height: 25px;
	cursor:pointer;
}
.MenuBTSel {/* ปุ่มเมนูถูกเลือก */
	border-collapse: separate; 
	border-spacing: 0px;
	padding-left: 4px;
	padding-right: 4px;
	padding-top: 3px;
	padding-bottom: 3px;
	border-bottom: 2px solid blue;
	color: black;
	min-height: 25px;
}

.LinkBT {
    font-size: 15px;
    background-color: white;
    color: darkred;
    border: 0px solid #4CAF50; /* Green */
    padding: 0px 0px;
}

.LinkBT:hover  {
    color: #800000;
    text-decoration: underline;
}

.LinkBT:active  {
    color: dimgray;
    text-decoration: underline;
}






/* FORM PopUp */
.PopTable {
	border-collapse: separate; 
	border-spacing: 0px;
	border: 4px solid rgb(119,24,17);
	background-color: white;
	text-align: Left;
}
.PopHead {
	background-color:  rgb(119,24,17);
	color: #FFFFFF;
	padding: 2px;
	margin: 0px;
}
.PopClose {
	background-color:  rgb(119,24,17);
	padding: 2px;
	margin: 0px;
	vertical-align: top;
	text-align: right;
}
.PopDisp {
	background-color: #FFFFFF;
	padding: 6px;
	margin: 0px;
}
.PopMsg {
	background-color: #FFFFFF;
	padding: 0px;
	margin: 0px;
	text-align: right;
    color: #FF3300;
    font-size: 16px;
    font-weight: bold;
}

.PopMsg2 {
	background-color: #FFFFFF;
	padding: 0px;
	margin: 0px;
	text-align: left;
    height: 25px;
    color: #FF3300;
    font-size: 16px;
    font-weight: bold;
}

.PopBar {
	background-color: #FFFFFF;
	text-align: center;
	padding-bottom: 4px;
    padding-top: 4px;
}
.PopBTDefault {/* ปุ่มตกลง */
	border-collapse: separate; 
	border-spacing: 0px;
	padding-left: 12px;
	padding-right: 12px;
	padding-top: 3px;
	padding-bottom: 3px;
	border: 0px solid rgb(119,24,17);
	background-color: rgb(119,24,17);
	color:white;
	min-width: 80px;
	min-height: 30px;
	cursor:pointer;
	font-size:16px;
    font-weight: bold;

}
    .PopBTDefault:hover {
        background-color: #A63E30;

    }

    .PopBTDefault:active {
        background-color: lightgray;

    }




.PopBTNormal {/* ปุ่มยกเลิก */
	border-collapse: separate; 
	border-spacing: 0px;
	padding-left: 12px;
	padding-right: 12px;
	padding-top: 3px;
	padding-bottom: 3px;
	border: 1px solid #727272;
	background-color: white;
	min-width: 80px;
	min-height: 30px;
	cursor:pointer;
	font-size:16px;
}

    .PopBTNormal:hover {
        background-color: #EFEFEF;

    }

    .PopBTNormal:active {
        background-color: lightgray;

    }



/* หัวเรื่อง */
.PageHeader{
	padding-bottom: 10px;
	font-weight: bold;
}
.PageHeaderRight{/* หัวเรื่องด้านขวา (ใส่ปุ่มเพิ่ม) */
	padding-bottom: 10px;
   text-align:right;
	
}
.PageSubHeader{
	padding-bottom: 5px;
}


/*Row Hover*/
.RowHover {
	background-color: rgb(255, 255, 255);
}
.RowHover:hover {
	background-color: rgb(240, 240, 240);
}

/* ปุ่มในหน้า Page */
.BTNormal, .BTNormalColor, .BTNormalNoClick {
	border-collapse: separate;
	border-spacing: 0px;
	padding-left: 12px;
	padding-right: 12px;
	padding-top: 3px;
	padding-bottom: 3px;
	border: 0px solid black;
	background-color: rgb(90, 90, 90);
	min-height: 25px;
	cursor: pointer;
	font-size: 16px;
	color: white;
}

    .BTNormal:hover {
        background-color: rgb(50, 50, 50);
    }

    .BTNormal:active {
        background-color: lightgray;

    }

.BTNormalNoClick {
	pointer-events: none;
	opacity: 0.3;
}
	

	.BTNormalColor {
		background-color: rgb(45,132,192);
	}


.BTNormalColor:hover {
	opacity: 0.7;
}


.BTFocus, .BTPass {
	border-collapse: separate; 
	border-spacing: 0px;
	padding-left: 12px;
	padding-right: 12px;
	padding-top: 3px;
	padding-bottom: 3px;
	border: 0px solid rgb(119,24,17);
	background-color: rgb(119,24,17);
	color: white;
	min-height: 25px;
	cursor:pointer;
	font-size:16px;
    font-weight: bold;
}

    .BTFocus:hover {
        background-color: #A63E30;

    }

    .BTFocus:active {
        background-color: lightgray;

    }

.BTPass {
	
	background-color: mediumseagreen;
	margin-right: 10px;
	
}

.BTPass:hover {
	opacity: 0.6;
}

/* ส่วนของตารางเวลา */
.CelHourLabel{
	border: 0px;
	padding: 0px;
}
.CelHour{
	border-left: 1px solid black;
}
.CelM{
	border: 0px;
	padding: 0px;
}
.CelHM{
	border-left: 1px solid black;
	padding: 0px;
}
.CelL{
	border-left: 1px solid black;
	padding: 0px;
}
.CelLGray{
	border-left: 1px solid lightgray;
	padding: 0px;
}
.CelR{
	border-right: 1px solid black;
	padding: 0px;
}
.CelLTB{
	border-left: 1px solid black;
	border-top: 1px solid black;
	border-bottom: 1px solid black;
	padding: 0px;
}
.CelTB{
	border-top: 1px solid black;
	border-bottom: 1px solid black;
	padding: 0px;
}
.CelLR{
	border-left: 1px solid black;
	border-right: 1px solid black;
	padding: 0px;
}
.CelB{
	border-bottom: 1px solid black;
	padding: 0px;
}
.CelT{
	border-top: 1px solid black;
	padding: 0px;
}
.CelLB{
	border-left: 1px solid black;
	border-bottom: 1px solid black;
	padding: 0px;
}
.CelRB{
	border-right: 1px solid black;
	border-bottom: 1px solid black;
	padding: 0px;
}
.CelLRB{
	border-left: 1px solid black;
	border-right: 1px solid black;
	border-bottom: 1px solid black;
	padding: 0px;
}
.CelLRTB{
	border: 1px solid black;
	padding: 0px;
}
.CelDLB{
	border-left: 1px dashed black;
	border-bottom: 1px solid black;
	padding: 0px;
}
.CelDRB{
	border-right: 1px dashed black;
	border-bottom: 1px solid black;
	padding: 0px;
}

.CelOverflow{
	max-width: 50px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

	border: 1px solid black;
	padding: 0px;
}
/* ส่วนของตาราง */


.TableBoarder {
	border-top: 1px solid black;
	border-bottom: 1px solid black;
	border-collapse: collapse;
	border-spacing: 0px;
}
	.TableBoarder td {
		font-size: 16px;
		color: rgb(30,30,30);
	}

.BGLightHover {
	background-color: rgb(255,255,255);
}


.BGLightHover:hover {
	background-color: rgb(235, 235, 235);
}


.BGLight {
	background-color: rgb(255,255,255);
}

.BGDark {
	background-color: rgb(230,230,230);
}

.RowOne {
	background-color: rgb(255,255,255);
	height: 40px;
}
.RowTwo{
	background-color: rgb(230,230,230);
	height: 40px;
}
.RowFocus{
	background-color: rgb(248, 247, 197);
	height: 40px;
}
.RowHeader{
	border-bottom: 1px solid black;
	height: 40px;
}

.borderTop {
	border-top: 1px solid rgb(150, 150, 150);
	
}
.TableBTFocus{
	border-collapse: separate; 
	border-spacing: 0px;
	padding-left: 12px;
	padding-right: 12px;
	padding-top: 3px;
	padding-bottom: 3px;
	border: 0px solid rgb(119,24,17);
	background-color: rgb(119,24,17);
	min-height: 25px;
	cursor:pointer;
	margin-right: 5px;
	color: white;
}

    .TableBTFocus:hover {
        background-color: #A63E30;

    }

    .TableBTFocus:active {
        background-color: lightgray;

    }



.TableBT{
	border-collapse: separate; 
	border-spacing: 0px;
	padding-left: 12px;
	padding-right: 12px;
	padding-top: 3px;
	padding-bottom: 3px;
	border: 1px solid rgb(119,24,17);
	background-color: white;
	min-height: 25px;
	cursor:pointer;
	margin-right: 5px;
}

.TableBTOpen{
	border-collapse: separate; 
	border-spacing: 0px;
	padding-left: 12px;
	padding-right: 12px;
	padding-top: 3px;
	padding-bottom: 3px;
	border: 0px solid black;
	/*background-color: dodgerblue;*/
    background-color: dodgerblue;
	min-height: 25px;
	cursor:pointer;
	margin-right: 5px;
    color: white;
        font-weight: bold;
}
   .TableBTOpen:hover {
        background-color: Highlight;

    }

    .TableBTOpen:active {
        background-color: lightgray;
    }


.TableBTOK{
	border-collapse: separate; 
	border-spacing: 0px;
	padding-left: 12px;
	padding-right: 12px;
	padding-top: 3px;
	padding-bottom: 3px;
	border: 0px solid black;
	/*background-color: dodgerblue;*/
    background-color: mediumseagreen;
	min-height: 25px;
	cursor:pointer;
	margin-right: 5px;
    color: white;
    font-weight: bold;

}
   .TableBTOK:hover {
        background-color: seagreen;

    }

    .TableBTOK:active {
        background-color: lightgray;
    }



.TableBTEdit{
	border-collapse: separate; 
	border-spacing: 0px;
	padding-left: 12px;
	padding-right: 12px;
	padding-top: 3px;
	padding-bottom: 3px;
	border: 0px solid black;
	background-color: dimgrey;
	min-height: 25px;
	cursor:pointer;
	margin-right: 5px;
    color: white;
}
   .TableBTEdit:hover {
        background-color: black;

    }

    .TableBTEdit:active {
        background-color: lightgray;
    }

.TableBTDel{
	border-collapse: separate; 
	border-spacing: 0px;
	padding-left: 12px;
	padding-right: 12px;
	padding-top: 3px;
	padding-bottom: 3px;
	border: 0px solid rgb(119,24,17);
	background-color: #CB4335;
	min-height: 25px;
	cursor:pointer;
    color: white;
}

    .TableBTDel:hover {
        background-color: #A63E30;

    }

    .TableBTDel:active {
        background-color: lightgray;
    }

.CellPadRight{
    padding-right: 40px;
}

.CellPadLeft{
    padding-left: 15px;
}

.CellPadLeft2{
    padding-left: 10px;
}

.CellFocus{
	padding-top: 5px;
    padding-left: 20px;
    padding-right: 40px;
    padding-bottom: 5px;
    background-color: rgb(250,250,250);
    border: 0px solid #000000; /* Green */
    text-align: left;
    font-size: 16px;
    width: 100%;


}

    .CellFocus:hover {
        background-color: rgb(119,24,17);
        color: white;

    }

    .CellFocus:active {
        background-color: lightgray;

    }


.triangle-up {
	width: 0;
	height: 0;
	border-left: 14px solid transparent;
	border-right: 14px solid transparent;
	border-bottom: 10px solid rgb(250,250,250);
}

.hidden{
    display: none;
}


.btMenuPop {
	color: black;
	background-color: rgb(245,245,245);
	border: 0px solid rgb(230,230,230);
	outline: none
}

    .btMenuPop:hover {
        background-color: rgb(200, 200, 200);
    }

    .btMenuPop:active {
        background-color: lightgray;

    }

.DepartTB {
	table-layout: fixed;
	border-collapse: collapse;
	border-spacing: 0px;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	/*margin-top: 1%;
	width: 500px;*/
	width: 90%;
	/*margin: auto;*/
	margin-left: auto;
	margin-right: auto;
	border: 0px solid;
}


	.DepartTB td {
		
		/*margin: auto;*/
	}

.DepartHead {
	font-size: 38px;
	font-weight: bold;
	border-top: 0px solid;
	border-bottom: 2px solid;
	padding-top: 1%;
	padding-bottom: 1%;
	padding-left: 2%;
}

.DepartBlack {
	font-size: 34px;
	padding-top: 1%;
	padding-bottom: 1%;
	padding-left: 2%;
	background-color: rgb(245, 245, 245);
	border-bottom: 1px solid rgb(180, 180, 180);
}

.DepartWhite {
	font-size: 34px;
	padding-top: 1%;
	padding-bottom: 1%;
	padding-left: 2%;
	background-color: rgb(255, 255, 255);
	border-bottom: 1px solid rgb(180, 180, 180);
}



.QTB {
	table-layout: fixed;
	border-collapse: collapse;
	border-spacing: 0px;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	/*margin-top: 1%;
	width: 500px;*/
	width: 85%;
	/*margin: auto;*/
	margin-left: auto;
	margin-right: auto;
	margin-top: auto;
	border: 0px solid;
}


	.QTB td {
		border: 0px solid black;
		padding-bottom: 2%;
		padding-top: 2%;
		/*margin: auto;*/
	}

	.MainCheckinTB {
	table-layout: fixed;
	border-collapse: collapse;
	border-spacing: 0px;
	max-width: 1200px;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	/*margin-top: 1%;*/
	width: 100%;
	margin: auto;
	border: 0px solid;
}


	.MainCheckinTB td {
		border: 0px solid black;
		padding-bottom: 2%;
		padding-top: 2%;
		text-align: center;
		vertical-align: top;
		/*margin: auto;*/
	}





.MobileTB {
	border-collapse: separate;
	border-spacing: 0px;
	border: 0px solid rgb(119,24,17);
	background-color: white;
	text-align: Left;
	margin: auto;
	width: 40%;
}

.tbInput, .tbInputXL, .tbInputNoWidth {
	width: 100%;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	font-size: 14px;
	padding-top: 5px;
	padding-bottom: 5px;
}

.tbInputNoWidth {
	width: auto;
	padding-left: 5px;
	padding-right: 5px;
}

.tbInputXL {
	font-size: 20px;
	padding-top: 15px;
	padding-bottom: 15px;
}

.BTok { /* ปุ่มตกลง */
	border-collapse: separate;
	border-spacing: 0px;
	width: 100%;
	padding-top: 5px;
	padding-bottom: 5px;
	border: 3px solid rgb(255,255,255);
	background-color: rgb(119,24,17);
	color: white;
	cursor: pointer;
	font-size: 20px;
	font-weight: bold;
	text-align: center;
	outline: none;
	border-radius: 0;
	-moz-appearance: none;
	-webkit-appearance: none;
}

	.BTok:hover {
		background-color: #A63E30;
	}

	.BTok:active {
		background-color: lightgray;
	}

.BTcancel { /* ปุ่มตกลง */
	border: 0px solid rgb(119,24,17);
	background-color: rgba(255,255,255,1);
	color: rgb(120, 120,120);
	cursor: pointer;
	font-size: 14px;
	outline: none;
	border-radius: 0;
	-moz-appearance: none;
	-webkit-appearance: none;
}

.flexbox {
	border-collapse: collapse;
	border-spacing: 0px;
	border: 0px solid red;
	width: 100%;
}

	.flexbox td {
		width: 50%;
	}

.btMenu, .btMenuFocus, .btMenuFocus2 {
	background-color: rgba(200,0,0,0);
	border: none;
	outline: none;
	color: rgb(0, 0, 0);
	font-size: 16px;
	cursor: pointer;
	font-weight: lighter;
	padding: 0px;
	margin-left: 0px;
	margin-right: 20px;
	margin-top: 5px;
	margin-bottom: 0px;
}

	.btMenu:hover {
		color: rgb(190, 190, 190);
	}

	.btMenu:active {
		color: rgb(230,230,230);
	}

.btMenuFocus {
	color: rgb(35,122,182);
}

.btMenuFocus2 {
	margin-top: 6px;
	border-bottom: 1px solid rgb(35,122,182);
}

.flex-container {
	width: 100%;
	display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
	display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
	display: -ms-flexbox; /* TWEENER - IE 10 */
	display: -webkit-flex; /* NEW - Chrome */
	display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
	flex-wrap: wrap;
	align-items: center;
}

.btGeneralColor, .btGeneral, .btGeneralS, .btGeneralSNoWidth, .btGeneralColorS, .btCancel, .btSmall, .bteMeeting, .btDel, .btGeneralColorXL {
	background-color: rgb(45,132,192);
	color: white;
	border: 1px solid rgb(45,132,192);
	padding-top: 5px;
	padding-bottom: 5px;
	font-size: 18px;
	cursor: pointer;
	width: 100%;
	outline: none;
	-webkit-appearance: none;
	-webkit-border-radius: 0;
}
.btGeneralColorXL {
	font-size: 24px;
}
.bteMeeting {
	background-color: rgb(105,180,172);
	border: 1px solid rgb(105,180,172);
	font-size: 22px;
	padding-top: 3px;
	padding-bottom: 3px;
	padding-left: 10px;
	padding-right: 10px;
	width: auto;
}

.btGeneral, .btGeneralS, .btGeneralSNoWidth {
	background-color: rgb(0,0,0);
	border: 1px solid rgb(0,0,0);
}

.btGeneralS, .btGeneralColorS, .btGeneralSNoWidth {
	font-size: 14px;
}

.btGeneralSNoWidth {
	width: auto;
}


.btCancel, .btSmall, .btDel {
	background-color: rgba(0,0,0,0);
	border: 0px solid rgba(0,0,0,0);
	padding: 0px;
	color: rgb(110, 110, 110);
	font-size: 13px;
	width: auto;
}
	.btCancel:hover {
		color: rgb(150, 150, 150);
		}

.btSmall {
	color: rgb(35,122,182);
}
	.btSmall:hover {
		color: rgb(85,172,232);
	}

.btDel {
	font-size: 16px;
	color: red;
}
	.btDel:hover {
		opacity: 0.6;
	}

.btPDF, .btExcel {
	background-color: rgb(229,26,34);
	color: white;
	border: 1px solid rgb(229,26,34);
	font-size: 22px;
	font-weight: bold;
	cursor: pointer;
	outline: none;
	-webkit-appearance: none;
	-webkit-border-radius: 0;
	text-align: center;
	vertical-align: middle;
	padding: 10px;
}

.btExcel {
	background-color: rgb(34,120,73);
	border: 1px solid rgb(34,120,73);
}


.NoBorder {
	outline: none;
	width: 16px;
	vertical-align: middle;
}

.CenterContain {
	width: 40%;
	margin: auto;
}

.noClick {
	pointer-events: none;
	opacity: 0.3;
}

.modal, .ClearModal {
	display: block; /* Hidden by default */
	position: fixed; /* Stay in place */
	z-index: 10; /* Sit on top */
	left: 0;
	top: 0;
	width: 100vw; /* Full width */
	height: 100vh; /* Full height */
	overflow: auto; /* Enable scroll if needed */
	background-color: rgba(220, 220, 220, 0.8); /* Black w/ opacity */
	-webkit-backdrop-filter: blur(15px); /*blur bg*/
	backdrop-filter: blur(15px); /*blur bg*/
}
.ClearModal {
	z-index: 11; /* Sit on top */
	width: 100%;
	height: 100%;
	background-color: rgba(240, 240, 240, 0.4); /* Black w/ opacity */
	-webkit-backdrop-filter: blur(0px); /*blur bg*/
	backdrop-filter: blur(0px); /*blur bg*/
}

.ModalinModal {
	width: auto;
	height: auto;
	position: absolute;
	z-index: 11; /* Sit on top */
	background-color: rgba(255, 255, 255, 1); /* Black w/ opacity */
	-webkit-backdrop-filter: blur(0px); /*blur bg*/
	backdrop-filter: blur(0px); /*blur bg*/
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	box-shadow: 1px 1px 15px 5px rgb(100,100,100);
	padding: 10px;
	max-width: 600px;
}

.modal-content, .modal-contentXL, .modal-contentS {
	background-color: #fefefe;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	border: 0px solid rgb(100, 100, 100);
	padding: 10px;
	box-shadow: 1px 1px 5px 2px rgb(200, 200, 200);
	width: 40%;
	max-width: 800px;
}

.modal-contentXL {
	width: 85%;
	max-width: 1500px;
}

.modal-contentS {
	width: 30%;
	max-width: 400px;
}

.ContainWithShadow {
	width: 100%;
	height: auto;
	text-align: center;
	background-color: rgb(255, 255, 255);
	margin: auto;
	padding: 3px;
	padding-bottom: 0px;
	box-shadow: 1px 1px 15px 5px rgb(220, 220, 220);
	margin-bottom: 10px;
}

.lbTopicColor, .lbTopic, .lbtxt {
	font-size: 20px;
	color: rgb(35,122,182);
	font-weight: bold;
}

.lbTopic {
	color: rgb(30,30,30);
}

.lbtxt {
	color: rgb(30,30,30);
	font-weight: normal;
}

.lbStatus {
	font-size: 50px;
	color: rgb(35,122,182);
	font-weight: bold;
}

.lbHeadColor, .lbHead, .lbHeadB {
	font-size: 30px;
	color: rgb(35,122,182);
	font-weight: bold;
}

.lbHeadB {
	color: rgb(30,30,30);
}

.lbHead {
	color: rgb(30,30,30);
	font-weight: normal;
}

.lbSmall, .lbSmallB, .lbMSG {
	font-size: 16px;
	color: rgb(30,30,30);
}

.lbSmallB {
	font-weight: bold;
}

.lbMSG {
	color: rgb(235, 48, 56);
}

.lbCondition {
	font-size: 12px;
	color: rgb(50,50,50);
}

.lbPass, .lbNoPass {
	color: forestgreen;
}

.lbNoPass {
	color: red;
}

.flex-space {
	width: 100%;
	display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
	display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
	display: -ms-flexbox; /* TWEENER - IE 10 */
	display: -webkit-flex; /* NEW - Chrome */
	display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
	justify-content: space-between;
	flex-wrap: nowrap;
}

.divVoting {
	width: 40%;
	margin: auto;
}

.divVotingXL {
	width: 80%;
	margin: auto;
}

.btDigit {
	font-size: 30px;
	font-weight: bold;
	background-color: rgb(250, 250, 250);
	border: 1px solid rgb(30, 30, 30);
	width: 95%;
	padding-bottom: 10px;
	padding-top: 10px;
	color: rgb(30, 30, 30);
	-webkit-appearance: none;
	-webkit-border-radius: 0;
}

	.btDigit:hover {
		background-color: rgb(245, 245, 245);
	}

	.btDigit:active {
		background-color: rgb(250, 250, 250);
		color: rgb(130, 130, 130);
	}

.btX, .btXFocus {
	font-size: 2px;
	font-weight: bold;
	background-color: rgb(255, 255, 255);
	outline: none;
	border: 1px solid rgb(30, 30, 30);
	width: 100%;
	color: rgba(30, 30, 30, 0);
	height: 16px;
	width: 16px;
	border-radius: 50%;
	
}

.btXFocus {
	color: rgb(35,122,182);
	background-color: rgb(35,122,182);
}

.btDigitFocus {
	font-size: 30px;
	font-weight: bold;
	background-color: rgb(35,122,182);
	border: 0px solid rgb(30, 30, 30);
	width: 95%;
	padding-bottom: 10px;
	padding-top: 10px;
	color: rgb(255, 255, 255);
	pointer-events: none;
	opacity: 0.8;
	outline: 1px solid rgb(35,122,182);
	-webkit-appearance: none;
	-webkit-border-radius: 0;
}

.btHome, .btDelEdit {
	outline: none;
	width: 35px;
	vertical-align: middle;
}

.btDelEdit {
	width: 25px;
	margin-right: 10px;
}

.MenuFlex {
	margin: auto;
	width: 100%;
	max-width: 800px;
	display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
	display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
	display: -ms-flexbox; /* TWEENER - IE 10 */
	display: -webkit-flex; /* NEW - Chrome */
	display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
	justify-content: space-around;
	flex-wrap: wrap;
}

.MenuImage, .MenuImageNoShow {
	outline: none;
	width: 100px;
	margin: 40px;
	vertical-align: middle;
	margin-bottom: 0px;
}

.MenuImageNoClick {
	pointer-events: none;
	opacity: 0.2;
}

.MenuImageNoShow {
	pointer-events: none;
	opacity: 0;
}

.ImageBanner {
	width: 100%;
	height: auto;
	margin: auto;
	display: block;
}

.TbFitCell { /* Table Header in Master Page */
	border-collapse: collapse;
	border-spacing: 0px;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	max-width: 1800px;
	margin: auto;
	width: 100%;
}

	.TbFitCell td {
		padding-bottom: 5px;
		padding-top: 5px;
		font-size: 16px;
		color: rgb(30,30,30);
		
	}

.AutoWidthCell, .AutoWidthCellNoPad, .AutoWidthCellRight {
	width: 1%;
	white-space: nowrap;
	padding-right: 10px;
}

.AutoWidthCellRight {
	width: 1%;
	white-space: nowrap;
	padding-left: 10px;
	padding-right: 0px;
}

.AutoWidthCellNoPad {
	padding-right: 0px;
}

.bgMenu {
	background-color: rgb(230, 230, 230);
}

@media screen and (max-width: 850px) {

	.btDigit, .btDigitFocus {
		font-size: 20px;
	}

	.divVoting, .divVotingXL {
		width: 95%;
	}

	.MobileTB {
		width: 90%;
	}

	.tbInput, .tbInputNoWidth {
		font-size: 16px;
	}

	.MainHeader2 { /* Table Header in Master Page */
		width: 100%;
		min-width: 0;
	}


	.CenterContain {
		width: 90%;
	}


	.modal-content {
		width: 80%;
	}
}



.bordertop {
	border-top: 2px solid black;
}


.TbDocTable {
	border-collapse: collapse;
	border-spacing: 1px;
	border: 1px solid black;
}

.TbDocTable td {
	border: 1px solid black;
}


.MeetingDocTable {
	border-collapse: collapse;
	table-layout: fixed;
}

	.MeetingDocTable td {
		border: 1px solid black;
		padding: 4px 4px;
	}

.MeetingDocTableDotted {
	border-collapse: collapse;
	table-layout: fixed;
}

	.MeetingDocTableDotted td {
		border: 1px dotted black;
		padding: 4px 4px;
	}

.MeetingDocTableNoBorder {
	border-collapse: collapse;
	table-layout: fixed;
}

	.MeetingDocTableNoBorder td {
		
		padding: 4px 4px;
	}

.MeetingDocMemoTable {
	border-collapse: collapse;
	border-spacing: 0px;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	max-width: 1800px;
	margin: auto;
}
	.MeetingDocMemoTable td {
		padding-bottom: 2px;
		padding-top: 2px;
		font-family: THSarabun;
		font-size: 16pt;
	}


.OnTopHead {
	position: -webkit-sticky;
	position: sticky;
	top: 0;
}

.OnTopHeadOl {
	position: -webkit-sticky;
	position: sticky;
	top: 0;
	z-index: 5;
	top: 0px;
	position: fixed;
}

.TextLeft {
	text-align: left;
}
.TextCenter {
	text-align: center;
}
.TextRight {
	text-align: right;
}
.CellBLine {
	border-right-style: dotted;
	border-left-style: dotted;
	border-top-style:none;

}