@charset "windows-874";
@import url("webfonts/THSarabun/stylesheet.css");
@import url("webfonts/THSarabun_Bold/stylesheet.css");
body {
	font-family: "THSarabun";
	font-size: 20px;
	background-color: #EAEAEA;
	padding-top: 34px;
	margin-bottom: 10px;
}

@-webkit-keyframes MenuBarAni {
    from { 
		opacity:0;
		margin-top: -35px;
	}
    to {
		opacity:1;
		margin-top: 0px;
	}
}
@keyframes MenuBarAni {
    from { 
		opacity:0;
		margin-top: -35px;
	}
    to {
		opacity:1;
		margin-top: 0px;
	}
}
div[id=MenuBar] {
	animation-name: MenuBarAni;
    animation-duration: 0.5s;
	font-family: "THSarabun Bold";
	line-height: 35px;
	height: 35px;
	width: 100%;
	text-align: center;
	background-image: -webkit-gradient(linear, 50.00% 0.00%, 50.00% 100.00%, color-stop( 0% , rgba(202,228,255,1.00)),color-stop( 100% , rgba(0,132,216,1.00)));
	background-image: -webkit-linear-gradient(270deg,rgba(202,228,255,1.00) 0%,rgba(0,132,216,1.00) 100%);
	background-image: linear-gradient(180deg,rgba(202,228,255,1.00) 0%,rgba(0,132,216,1.00) 100%);
	position: fixed;
	z-index: 9;
	top: 0px;
	right: 0px;
	left: 0px;
}
div[id=MenuBar]:hover {
	background-image: -webkit-gradient(linear, 50.00% 0.00%, 50.00% 100.00%, color-stop( 0% , rgba(202,228,255,1.00)),color-stop( 100% , rgba(0,132,216,1.00)));
	background-image: -webkit-linear-gradient(270deg,rgba(202,228,255,1.00) 0%,rgba(0,132,216,1.00) 100%);
	background-image: linear-gradient(180deg,rgba(202,228,255,1.00) 0%,rgba(0,132,216,1.00) 100%);
}
div[class=Menu] {
	border: 1px solid #DDDDDD;
	margin-top: 15px;
	border-radius: 8px;
	line-height: 35px;
	text-indent: 10px;
	background-color: #F6F6F6;
	-webkit-box-shadow: 0px 0px 10px 0px #CDD1DA;
	box-shadow: 0px 0px 10px 0px #CDD1DA;
	margin-left: 15px;
	margin-right: 15px;
	overflow: hidden;
}
.MenuTitle {
	font-family: "THSarabun Bold";
	color: #1385D9;
	background-image: -webkit-gradient(linear, 50.00% 0.00%, 50.00% 100.00%, color-stop( 0% , rgba(202,228,255,1.00)),color-stop( 100% , rgba(163,215,248,1.00)));
	background-image: -webkit-linear-gradient(270deg,rgba(202,228,255,1.00) 0%,rgba(163,215,248,1.00) 100%);
	background-image: linear-gradient(180deg,rgba(202,228,255,1.00) 0%,rgba(163,215,248,1.00) 100%);
}
.MenuTitle1 {
	font-family: "THSarabun Bold";
	color: #71BBF2;
	background-image: -webkit-gradient(linear, 50.00% 0.00%, 50.00% 100.00%, color-stop( 0% , rgba(227,239,252,1.00)),color-stop( 100% , rgba(206,236,255,1.00)));
	background-image: -webkit-linear-gradient(270deg,rgba(227,239,252,1.00) 0%,rgba(206,236,255,1.00) 100%);
	background-image: linear-gradient(180deg,rgba(227,239,252,1.00) 0%,rgba(206,236,255,1.00) 100%);
	text-indent: 20px;
}
.MenuList {
	border-top: 1px solid #DDDDDD;
	overflow:hidden;
	text-indent: 20px;
	cursor: pointer;
	background-image: -webkit-gradient(linear, 50.00% 0.00%, 50.00% 100.00%, color-stop( 0% , rgba(255,255,255,1.00)),color-stop( 100% , rgba(244,244,244,1.00)));
	background-image: -webkit-linear-gradient(270deg,rgba(255,255,255,1.00) 0%,rgba(244,244,244,1.00) 100%);
	background-image: linear-gradient(180deg,rgba(255,255,255,1.00) 0%,rgba(244,244,244,1.00) 100%);
}
.MenuList:hover {
	-webkit-box-shadow: inset 0px 0px 10px #C4E1FF;
	box-shadow: inset 0px 0px 10px #C4E1FF;
	color: #48A8EE;
}
.TitleC1 {
	text-align: center;
	font-weight: bold;
	margin-top: 25px;
}
.TitleR1 {
	font-family: "THSarabun Bold";
	float: right;
	background-image: -webkit-gradient(linear, 50.00% 0.00%, 50.00% 100.00%, color-stop( 0% , rgba(255,179,181,1.00)),color-stop( 100% , rgba(255,0,0,1.00)));
	background-image: -webkit-linear-gradient(270deg,rgba(255,179,181,1.00) 0%,rgba(255,0,0,1.00) 100%);
	background-image: linear-gradient(180deg,rgba(255,179,181,1.00) 0%,rgba(255,0,0,1.00) 100%);
	line-height: 20px;
	margin-right: 8px;
	margin-top: 8px;
	text-indent: 0px;
	padding-left: 5px;
	padding-right: 5px;
	border-radius: 8px;
	color: #FFFFFF;
	font-size: 18px;
}
.TitleR2 {
	font-family: "THSarabun Bold";
	float: left;
	background-image: -webkit-gradient(linear, 50.00% 0.00%, 50.00% 100.00%, color-stop( 0% , rgba(255,179,181,1.00)),color-stop( 100% , rgba(255,0,0,1.00)));
	background-image: -webkit-linear-gradient(270deg,rgba(255,179,181,1.00) 0%,rgba(255,0,0,1.00) 100%);
	background-image: linear-gradient(180deg,rgba(255,179,181,1.00) 0%,rgba(255,0,0,1.00) 100%);
	line-height: 20px;
	margin-left: 8px;
	margin-top: 8px;
	text-indent: 0px;
	padding-left: 5px;
	padding-right: 5px;
	border-radius: 8px;
	color: #FFFFFF;
	font-size: 18px;
}
.TitleR3 {
	font-family: "THSarabun Bold";
	float: right;
	background-image: -webkit-gradient(linear, 50.00% 0.00%, 50.00% 100.00%, color-stop( 0% , rgba(99,255,70,1.00)),color-stop( 100% , rgba(24,150,0,1.00)));
	background-image: -webkit-linear-gradient(270deg,rgba(99,255,70,1.00) 0%,rgba(24,150,0,1.00) 100%);
	background-image: linear-gradient(180deg,rgba(99,255,70,1.00) 0%,rgba(24,150,0,1.00) 100%);
	line-height: 20px;
	margin-right: 8px;
	margin-top: 8px;
	text-indent: 0px;
	padding-left: 5px;
	padding-right: 5px;
	border-radius: 8px;
	color: #FFFFFF;
	font-size: 18px;
}
.Text3 {
	text-align: center;
	font-weight: bold;
	width: 100%;
	font-size: 24px;
	margin-bottom:  20px;
}
#Footer {
	text-align: center;
	margin-top: 10px;
	color: #BBBBBB;
}
input[class=Input1] {
	font-size: 16px;
	width: 100%;
	line-height: 30px;
	border-radius: 10px;
	border: 1px solid #CCCCCC;
	text-indent: 10px;
}
select[class=Input1] {
	font-size: 16px;
	width: 100%;
	height: 35px;
	line-height: 35px;
	border-radius: 10px;
	border: 1px solid #CCCCCC;
}
.Input2 {
	height: 35px;
	width: 100%;
	font-family: "THSarabun";
}
.Input4 , .PrintHidden1 {
	font-family: "THSarabun";
	font-size: 18px;
	cursor: pointer;
	line-height: 30px;
	border-radius: 10px;
	border: 1px solid #CCCCCC;
	background-image: -webkit-gradient(linear, 50.00% 0.00%, 50.00% 100.00%, color-stop( 0% , rgba(245,245,245,1.00)),color-stop( 100% , rgba(221,221,221,1.00)));
	background-image: -webkit-linear-gradient(270deg,rgba(245,245,245,1.00) 0%,rgba(221,221,221,1.00) 100%);
	background-image: linear-gradient(180deg,rgba(245,245,245,1.00) 0%,rgba(221,221,221,1.00) 100%);
	padding-left: 10px;
	padding-right: 10px;
	width: 100%;
	margin-bottom: 10px;
}
.Input4:hover , .PrintHidden1:hover {
	background-image: -webkit-gradient(linear, 50.00% 0.00%, 50.00% 100.00%, color-stop( 0% , rgba(225,225,225,1.00)),color-stop( 100% , rgba(244,244,244,1.00)));
	background-image: -webkit-linear-gradient(270deg,rgba(225,225,225,1.00) 0%,rgba(244,244,244,1.00) 100%);
	background-image: linear-gradient(180deg,rgba(225,225,225,1.00) 0%,rgba(244,244,244,1.00) 100%);
	font-weight: bold;
}
input[class=Input5] {
	font-size: 16px;
	width: 100%;
	line-height: 30px;
	border-radius: 10px;
	border: 1px solid #666666;
	text-indent: 10px;
	background-color: #EEEEEE;
}
.Input6 {
	background-image: -webkit-gradient(linear, 50.00% 0.00%, 50.00% 100.00%, color-stop( 0% , rgba(233,255,218,1.00)),color-stop( 100% , rgba(89,255,0,1.00)));
	background-image: -webkit-linear-gradient(270deg,rgba(233,255,218,1.00) 0%,rgba(89,255,0,1.00) 100%);
	background-image: linear-gradient(180deg,rgba(233,255,218,1.00) 0%,rgba(89,255,0,1.00) 100%);
	font-family: "THSarabun";
	font-size: 18px;
	cursor: pointer;
	line-height: 30px;
	border-radius: 10px;
	border: 1px solid #87F545;
	padding-left: 10px;
	padding-right: 10px;
	width: 94%;
	margin-bottom: 10px;
	color: #388C06;
	font-weight: bold;
	margin-top: 5px;
	margin-bottom: 5px;

}
input[class=Input7] {
	font-size: 16px;
	width: 45%;
	line-height: 30px;
	border-radius: 10px;
	border: 1px solid #CCCCCC;
	text-indent: 10px;
	text-align:center;
}
.Input8 {
	font-family: "THSarabun";
	font-size: 18px;
	cursor: pointer;
	line-height: 30px;
	border-radius: 10px;
	border: 1px solid #CCCCCC;
	background-image: -webkit-gradient(linear, 50.00% 0.00%, 50.00% 100.00%, color-stop( 0% , rgba(245,245,245,1.00)),color-stop( 100% , rgba(221,221,221,1.00)));
	background-image: -webkit-linear-gradient(270deg,rgba(245,245,245,1.00) 0%,rgba(221,221,221,1.00) 100%);
	background-image: linear-gradient(180deg,rgba(245,245,245,1.00) 0%,rgba(221,221,221,1.00) 100%);
	width: 94%;
	margin-top: 5px;
	margin-bottom: 5px;	
}
.Input8:hover {
	background-image: -webkit-gradient(linear, 50.00% 0.00%, 50.00% 100.00%, color-stop( 0% , rgba(225,225,225,1.00)),color-stop( 100% , rgba(244,244,244,1.00)));
	background-image: -webkit-linear-gradient(270deg,rgba(225,225,225,1.00) 0%,rgba(244,244,244,1.00) 100%);
	background-image: linear-gradient(180deg,rgba(225,225,225,1.00) 0%,rgba(244,244,244,1.00) 100%);
	font-weight: bold;
}
.Input9 {
	font-family: "THSarabun";
	font-size: 18px;
	cursor: pointer;
	line-height: 30px;
	border-radius: 10px;
	border: 1px solid #FF0000;
	background-image: -webkit-gradient(linear, 50.00% 0.00%, 50.00% 100.00%, color-stop( 0% , rgba(245,245,245,1.00)),color-stop( 100% , rgba(221,221,221,1.00)));
	background-image: -webkit-linear-gradient(270deg,rgba(245,245,245,1.00) 0%,rgba(221,221,221,1.00) 100%);
	background-image: linear-gradient(180deg,rgba(245,245,245,1.00) 0%,rgba(221,221,221,1.00) 100%);
	width: 94%;
	margin-top: 5px;
	margin-bottom: 5px;
	color: #FF0000;
}
textarea[class=Input10] {
	font-size: 16px;
	width: 98%;
	line-height: 30px;
	border-radius: 10px;
	border: 1px solid #CCCCCC;
	text-indent: 10px;
}
.Search1 {
	width: 100%;
	line-height: 30px;
	background-image: url(IMG/search.png);
	background-repeat: no-repeat;
	text-indent: 35px;
	background-size: 18px 18px;
	background-position: 7px 7px;
	font-family: "THSarabun";
}
select[class=Search1] {
	width: 100%;
	line-height: 30px;
	height: 34px;
	background-image: url(IMG/search.png);
	background-repeat: no-repeat;
	text-indent: 35px;
	background-size: 18px 18px;
	background-position: 7px 7px;
	font-family: "THSarabun";
}
.Search2 {
	background-image: url(IMG/search.png);
	background-repeat: no-repeat;
	background-size: 18px 18px;
	background-position: 7px 7px;
	font-family: "THSarabun";
	font-size: 22px;
	width: 100%;
	line-height: 30px;
	border-radius: 10px;
	border: 1px solid #CCCCCC;
	text-indent: 30px;
}
.Search3 {
	font-family: "THSarabun";
	font-size: 22px;
	width: 100%;
	line-height: 30px;
	border-radius: 10px;
	border: 1px solid #CCCCCC;
	text-indent: 30px;
}
div[class=popup] {
	background: rgba(255, 255, 255, .5);
	position: fixed;
	z-index: 10;
	left: 0px;
	top: 0px;
	right: 0px;
	bottom: 0px;
	text-indent: 0;
	text-align: center;
	display:none;
}
.popupBG {
	/*display:none;*/
	z-index: 1000;
	position: fixed;
	left: 0px;
	right: 0px;
	top: 0px;
	bottom: 0px;
	background: rgba(255, 255, 255, .8);
	text-align: center;
}
@-webkit-keyframes _popupBox {
    from {margin-left: -280px;}
    to {margin-left: 0px;}
}
@keyframes _popupBox {
    from {margin-left: -280px;}
    to {margin-left: 0px;}
}
.popupBox {
	margin-left: auto;
	margin-right: auto;
	background: #FFF;
	margin-top: 100px;
	overflow: hidden;
	-webkit-box-shadow: 0px 0px 15px #E9E9E9;
	box-shadow: 0px 0px 15px #E9E9E9;
	border-radius: 8px;
	width: 90%;
	border: 2px solid #FFFFFF;
}
.popupBar {
	background-image: -webkit-gradient(linear, 50.00% 0.00%, 50.00% 100.00%, color-stop( 0% , rgba(202,228,255,1.00)),color-stop( 100% , rgba(120,185,227,1.00)));
	background-image: -webkit-linear-gradient(270deg,rgba(202,228,255,1.00) 0%,rgba(120,185,227,1.00) 100%);
	background-image: linear-gradient(180deg,rgba(202,228,255,1.00) 0%,rgba(120,185,227,1.00) 100%);
	line-height: 35px;
	height: 35px;
	text-indent: 10px;
	font-weight: bold;
}
.popupMes {
	padding: 10px;
	max-height: 500px;
	overflow-y: auto;
}
@-webkit-keyframes Icon0Ani {
    from { 
		opacity:0;
		right: -15px
	}
    to {
		opacity:1;
		right: 7px;
	}
}
@keyframes Icon0Ani {
    from { 
		opacity:0;
		right: -15px
	}
    to {
		opacity:1;
		right: 7px;
	}
}
.Icon0 {
	animation-name: Icon0Ani;
    animation-duration: 0.9s;
	position: fixed;
	z-index: 10;
	bottom: 7px;
	right: 7px;
}
@-webkit-keyframes Icon1Ani {
    from { 
		opacity:0;
		left: -15px
	}
    to {
		opacity:1;
		left: 7px;
	}
}
@keyframes Icon1Ani {
    from { 
		opacity:0;
		left: -15px
	}
    to {
		opacity:1;
		left: 7px;
	}
}
.Icon1 {
	animation-name: Icon1Ani;
    animation-duration: 0.9s;
	position: fixed;
	z-index: 10;
	top: 8px;
	left: 7px;
}
.Icon1Exit {
	float:right;
	margin-top: 6px;
	margin-right: 6px;
}
.Icon2 {
	animation-name: Icon0Ani;
	animation-duration: 0.9s;
	position: fixed;
	z-index: 10;
	top: 7px;
	right: 7px;
}
.Icon3 {
	margin-top: -5px;
	margin-right: 10px;
}
.Icon4 {
	margin-top: -5px;
}
.Icon5 {
	float: right;
	border: 1px solid #DDF7FF;
	border-radius: 12px;
	line-height: 24px;
	margin-top: 4px;
	padding-left: 15px;
	padding-right: 15px;
	text-indent: 0px;
	margin-right: 8px;
	background-image: -webkit-gradient(linear, 50.00% 0.00%, 50.00% 100.00%, color-stop( 0% , rgba(255,255,255,1.00)),color-stop( 100% , rgba(197,248,255,1.00)));
	background-image: -webkit-linear-gradient(270deg,rgba(255,255,255,1.00) 0%,rgba(197,248,255,1.00) 100%);
	background-image: linear-gradient(180deg,rgba(255,255,255,1.00) 0%,rgba(197,248,255,1.00) 100%);
	color: #2B99E0;
}
.Icon6 {
	margin-top: -3px;
}
.Icon7 {
	float:right;
	margin-top: 4px;
}
.Icon8 {
	float:right;
	margin-top: 7px;
	margin-right: 7px;
}
.Icon9 {
	float:right;
	margin-top: 11px;
	margin-right: 10px;
}
@-webkit-keyframes BoxHidden1Ani {
    from { opacity:0;}
    to {opacity:1;}
}
@keyframes BoxHidden1Ani {
    from { opacity:0;}
    to {opacity:1;}
}
.BoxHidden1 {
	display:none;
	animation-name: BoxHidden1Ani;
    animation-duration: 1s;
}
.Line1 {
	border-bottom: 1px solid #EEEEEE;
	border-radius: 5px 5px 5px 0px;
}
.Line2 {
	border-bottom: 2px solid  #54ACE8;
}
.hr[class=hr1] {
	border: 1px dashed #54ACE8;
}
div[class=button1] {
	width: 25px;
	height: 25px;
	float: left;
	border-radius: 14px;
	margin-left: 2px;
	margin-right: 2px;
	border: 2px dotted #CCCCCC;
	line-height: 25px;
	text-align: center;
	color: #000;
	font-weight: bold;
}
div[class=button2] {
	width: 25px;
	height: 25px;
	float: left;
	border-radius: 14px;
	margin-left: 2px;
	margin-right: 2px; 
	border: 2px solid #000 !important;
	line-height: 25px;
	text-align: center;
	color: #000;
	font-weight: bold;
}
.Over1:hover {
	color: #48A8EE;
	font-weight: bold;
	cursor: pointer;
}
.Table1 {
	width: 90%;
	border-radius: 8px;
}
.TableTitle1 {
	font-family: "THSarabun Bold";
	color: #1385D9;
	background-image: -webkit-gradient(linear, 50.00% 0.00%, 50.00% 100.00%, color-stop( 0% , rgba(202,228,255,1.00)),color-stop( 100% , rgba(163,215,248,1.00)));
	background-image: -webkit-linear-gradient(270deg,rgba(202,228,255,1.00) 0%,rgba(163,215,248,1.00) 100%);
	background-image: linear-gradient(180deg,rgba(202,228,255,1.00) 0%,rgba(163,215,248,1.00) 100%);
}
.TableList1 {
	border-top: 1px solid #DDDDDD;
	cursor: pointer;
	background-image: -webkit-gradient(linear, 50.00% 0.00%, 50.00% 100.00%, color-stop( 0% , rgba(255,255,255,1.00)),color-stop( 100% , rgba(244,244,244,1.00)));
	background-image: -webkit-linear-gradient(270deg,rgba(255,255,255,1.00) 0%,rgba(244,244,244,1.00) 100%);
	background-image: linear-gradient(180deg,rgba(255,255,255,1.00) 0%,rgba(244,244,244,1.00) 100%);
}
.TableList2 {
	/*border-top: 2px dashed #7598FF;*/
	cursor: pointer;
	background-image: -webkit-gradient(linear, 50.00% 0.00%, 50.00% 100.00%, color-stop( 0% , rgba(201,229,252,1.00)),color-stop( 100% , rgba(227,241,253,1.00)));
	background-image: -webkit-linear-gradient(270deg,rgba(201,229,252,1.00) 0%,rgba(227,241,253,1.00) 100%);
	background-image: linear-gradient(180deg,rgba(201,229,252,1.00) 0%,rgba(227,241,253,1.00) 100%);
	border-bottom-color: #3366FF;
	border-right-color: #3366FF;
	border-left-color: #3366FF;
}
.TableList3 {
	/*border-top: 2px dashed #7598FF;*/
	cursor: pointer;
	background-image: -webkit-gradient(linear, 50.00% 0.00%, 50.00% 100.00%, color-stop( 0% , rgba(193,193,193,1.00)),color-stop( 100% , rgba(232,232,232,1.00)));
	background-image: -webkit-linear-gradient(270deg,rgba(193,193,193,1.00) 0%,rgba(232,232,232,1.00) 100%);
	background-image: linear-gradient(180deg,rgba(193,193,193,1.00) 0%,rgba(232,232,232,1.00) 100%);
	border-bottom-color: #3366FF;
	border-right-color: #3366FF;
	border-left-color: #3366FF;
	color: #999999;
}
.Table4 {
	width: 100%;
	border: 0.5px solid #999999;
	font-size: 18px;
}
.BoxMes1 {
	border-bottom: 1px solid #BFBFBF;
}
.BoxMes2 {
	width: 90%; 
	margin-left:auto; 
	margin-right:auto; 
	text-align:center; 
	margin-top: 10px;
}
.Menu1 {
	border: 1px solid #DDDDDD;
	margin-top: 15px;
	border-radius: 8px;
	line-height: 35px;
	text-indent: 10px;
	background-color: #F6F6F6;
	-webkit-box-shadow: 0px 0px 10px 0px #CDD1DA;
	box-shadow: 0px 0px 10px 0px #CDD1DA;
	margin-left: 15px;
	margin-right: 15px;
	overflow: hidden;
}
.Menu1Title {
	font-family: "THSarabun Bold";
	color: #1385D9;
	background-image: -webkit-gradient(linear, 50.00% 0.00%, 50.00% 100.00%, color-stop( 0% , rgba(202,228,255,1.00)),color-stop( 100% , rgba(163,215,248,1.00)));
	background-image: -webkit-linear-gradient(270deg,rgba(202,228,255,1.00) 0%,rgba(163,215,248,1.00) 100%);
	background-image: linear-gradient(180deg,rgba(202,228,255,1.00) 0%,rgba(163,215,248,1.00) 100%);
}
.Menu1L {
	border-top: 1px solid #DDDDDD;
	text-indent: 20px;
	cursor: pointer;
	background-image: -webkit-gradient(linear, 50.00% 0.00%, 50.00% 100.00%, color-stop( 0% , rgba(255,255,255,1.00)),color-stop( 100% , rgba(244,244,244,1.00)));
	background-image: -webkit-linear-gradient(270deg,rgba(255,255,255,1.00) 0%,rgba(244,244,244,1.00) 100%);
	background-image: linear-gradient(180deg,rgba(255,255,255,1.00) 0%,rgba(244,244,244,1.00) 100%);
	float: left;
	width: 90%;
}
.Menu2 {
	border-top: 1px solid #DDDDDD;
	text-indent: 20px;
	cursor: pointer;
	background-image: -webkit-gradient(linear, 50.00% 0.00%, 50.00% 100.00%, color-stop( 0% , rgba(255,255,255,1.00)),color-stop( 100% , rgba(244,244,244,1.00)));
	background-image: -webkit-linear-gradient(270deg,rgba(255,255,255,1.00) 0%,rgba(244,244,244,1.00) 100%);
	background-image: linear-gradient(180deg,rgba(255,255,255,1.00) 0%,rgba(244,244,244,1.00) 100%);
}
.Menu3L {
	border-top: 1px solid #DDDDDD;
	text-indent: 20px;
	cursor: pointer;
	background-image: -webkit-gradient(linear, 50.00% 0.00%, 50.00% 100.00%, color-stop( 0% , rgba(255,255,255,1.00)),color-stop( 100% , rgba(244,244,244,1.00)));
	background-image: -webkit-linear-gradient(270deg,rgba(255,255,255,1.00) 0%,rgba(244,244,244,1.00) 100%);
	background-image: linear-gradient(180deg,rgba(255,255,255,1.00) 0%,rgba(244,244,244,1.00) 100%);
	float: left;
	width: 72%;
}
.Menu1L:hover, .Menu2:hover, .Menu3L:hover {
	-webkit-box-shadow: inset 0px 0px 10px #C4E1FF;
	box-shadow: inset 0px 0px 10px #C4E1FF;
	color: #48A8EE;
}
.Menu1R {
	width: 10%;
	float: right;
	border-top: 1px solid #DDDDDD;
	cursor: pointer;
	background-image: -webkit-gradient(linear, 50.00% 0.00%, 50.00% 100.00%, color-stop( 0% , rgba(255,255,255,1.00)),color-stop( 100% , rgba(244,244,244,1.00)));
	background-image: -webkit-linear-gradient(270deg,rgba(255,255,255,1.00) 0%,rgba(244,244,244,1.00) 100%);
	background-image: linear-gradient(180deg,rgba(255,255,255,1.00) 0%,rgba(244,244,244,1.00) 100%);
	text-align: right;
}
.Menu3R {
	width: 28%;
	float: right;
	border-top: 1px solid #DDDDDD;
	cursor: pointer;
	background-image: -webkit-gradient(linear, 50.00% 0.00%, 50.00% 100.00%, color-stop( 0% , rgba(255,255,255,1.00)),color-stop( 100% , rgba(244,244,244,1.00)));
	background-image: -webkit-linear-gradient(270deg,rgba(255,255,255,1.00) 0%,rgba(244,244,244,1.00) 100%);
	background-image: linear-gradient(180deg,rgba(255,255,255,1.00) 0%,rgba(244,244,244,1.00) 100%);
	text-align: right;
}
.Menu4 {
	border: 1px solid #DDDDDD;
	margin-top: 15px;
	border-radius: 8px;
	line-height: 35px;
	background-color: #F6F6F6;
	-webkit-box-shadow: 0px 0px 10px 0px #CDD1DA;
	box-shadow: 0px 0px 10px 0px #CDD1DA;
	margin-left: 15px;
	margin-right: 15px;
	overflow: hidden;
}
.Box1L {
	float: left;
	width: 83%;
}
.Box1R {
	float: right;
	width: 17%;
	text-indent: 0px;
	text-align: right;
}

@-webkit-keyframes AppMenuAni {
    from { 
		opacity:0;
		margin-top: -200px;
	}
    to {
		opacity:1;
		margin-top: 0px;
	}
}
@keyframes AppMenuAni {
    from { 
		opacity:0;
		margin-top: -200px;
	}
    to {
		opacity:1;
		margin-top: 0px;
	}
}
div[class=AppMenu] {
	overflow:hidden;
	animation-name: AppMenuAni;
    animation-duration: 0.8s;
}
div[class=AppList1] {
	float: left;
	/*width: 20%;*/
	margin-left: 10px;
	margin-right: 10px;
	margin-bottom: 5px;
	margin-top: 5px;
}
div[class=AppMenu1] {
	width: 80px;
	margin-bottom: 10px;
	margin-top: 10px;
	margin-left: 2.5%;
	margin-right: 2.5%;
	background-color: #FFF;
	border-radius: 10px;
	-webkit-box-shadow: 0px 0px 10px 20px #000000;
	box-shadow: 0px 0px 3px 1px #CCC;
	background-image: -webkit-gradient(linear, 50.00% 0.00%, 50.00% 100.00%, color-stop( 0% , rgba(255,255,255,1.00)),color-stop( 100% , rgba(223,223,223,1.00)));
	background-image: -webkit-linear-gradient(270deg,rgba(255,255,255,1.00) 0%,rgba(223,223,223,1.00) 100%);
	background-image: linear-gradient(180deg,rgba(255,255,255,1.00) 0%,rgba(223,223,223,1.00) 100%);
}

div[class=AppMenu1]:hover {
	background-image: -webkit-gradient(linear, 50.00% 0.00%, 50.00% 100.00%, color-stop( 0% , rgba(223,223,223,1.00)),color-stop( 100% , rgba(255,255,255,1.00)));
	background-image: -webkit-linear-gradient(270deg,rgba(223,223,223,1.00) 0%,rgba(255,255,255,1.00) 100%);
	background-image: linear-gradient(180deg,rgba(223,223,223,1.00) 0%,rgba(255,255,255,1.00) 100%);
}

div[class=AppIcon1] {
	width: 60px;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}
div[class=AppTitle1] {
	text-align: center;
	font-size: 11pt;
	font-weight: bold;
}

/* Simple fluid media
   Note: Fluid media requires that you remove the media's height and width attributes from the HTML
   http://www.alistapart.com/articles/fluid-images/ 
*/
img, object, embed, video {
	max-width: 100%;
}

/* IE 6 does not support max-width so default to width 100% */
.ie6 img {
	width:100%;
}

/*
	Dreamweaver Fluid Grid Properties
	----------------------------------
	dw-num-cols-mobile:		4;
	dw-num-cols-tablet:		8;
	dw-num-cols-desktop:	12;
	dw-gutter-percentage:	25;
	
	Inspiration from "Responsive Web Design" by Ethan Marcotte 
	http://www.alistapart.com/articles/responsive-web-design
	
	and Golden Grid System by Joni Korpi
	http://goldengridsystem.com/
*/

.fluid {
	clear: both;
	margin-left: 0;
	width: 100%;
	float: left;
	display: block;
}

.fluidList {
    list-style:none;
    list-style-image:none;
    margin:0;
    padding:0;        
}

/* Mobile Layout: 480px and below. */
  
.gridContainer {
	margin-left: auto;
	margin-right: auto;
	width: 86.45%;
	padding-left: 2.275%;
	padding-right: 2.275%;
	clear: none;
	float: none;
}
#div1 {
}
.zeroMargin_mobile {
    margin-left: 0;
}
.hide_mobile {
    display: none;
}

/* Tablet Layout: 481px to 768px. Inherits styles from: Mobile Layout. */

@media only screen and (min-width: 481px) {

.gridContainer {
	width: 90.675%;
	padding-left: 1.1625%;
	padding-right: 1.1625%;
	clear: none;
	float: none;
	margin-left: auto;
}
#div1 {
}
.zeroMargin_tablet {
    margin-left: 0;
}
.hide_tablet {
    display: none;
}
}

/* Desktop Layout: 769px to a max of 1232px.  Inherits styles from: Mobile Layout and Tablet Layout. */

@media only screen and (min-width: 769px) {

.gridContainer {
	width: 88.5%;
	max-width: 1232px;
	padding-left: 0.75%;
	padding-right: 0.75%;
	margin: auto;
	clear: none;
	float: none;
	margin-left: auto;
}
#div1 {
}
.zeroMargin_desktop {
    margin-left: 0;
}
.hide_desktop {
    display: none;
}

}

.ui-datepicker{
	font-size:16px !important;
	text-align:center !important;
}

.BoxL {
	width: 20%;
	float:left;
	background-color:#FF3;
}
.BoxR {
	width: 80%;
	float:right;
	background-color:#3F0;
}
.F1 {
	color: #FF0000;	
}
.F2 {
	color: #FF0000;
	font-size: 100px;
	line-height: 86px;
}
.F3 {
	color: #66FF00;
	font-size: 100px;
	line-height: 86px;
}
.F4 {
	font-size: 14px;
}
.F5 {
	font-size: 14px;
	color: #FF6600;
}
.F6 {
	font-size: 14px;
	color: #339900;
}
.F7 {
	background-color: #FFAAAA;
}
.F8 {
	background-color: #D8FAC0;
}
.F9 {
	background-color: #FFFF82;
}
.F10 {
	color: #FF0000;
	font-size: 30px;
	line-height: 30px;
}
.Text1 {
	-webkit-transform: rotate(-90deg);
	-moz-transform: rotate(-90deg);
	-ms-transform: rotate(-90deg);
	-o-transform: rotate(-90deg);
	float: left;
}
.Text2 {
	text-decoration: none;
	text-overflow: ellipsis;
	display: block; 
	overflow: hidden; 
	white-space: nowrap; 
	width: 320px;
}
.TextAlert1 {
	text-align: justify;
	text-indent: 30px;
	border: 1px dashed #FF6600;
	padding-top: 10px;
	padding-right: 10px;
	padding-bottom: 10px;
	padding-left: 10px;
	margin-bottom: 10px;
	border-top-left-radius: 10px;
	border-bottom-right-radius: 10px;
	color: #FF6600;
}
.TextAlert2 {
	text-align: justify;
	text-indent: 30px;
	border: 1px dashed #009933;
	padding-top: 10px;
	padding-right: 10px;
	padding-bottom: 10px;
	padding-left: 10px;
	margin-bottom: 10px;
	border-top-left-radius: 10px;
	border-bottom-right-radius: 10px;
	color: #009933;
}
.Box2 {
	float:left;
	margin-left: 2px;
}
.Box3 {
	border: 1px dashed #CCC;
	width: 600px;
	overflow: hidden;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 50px;
	padding-top: 10px;
	padding-bottom: 10px;
	padding-left: 10px;
	padding-right: 10px;
}
.Copyright {
	font-size: 13pt;
	opacity: 0.7;
}
.ONLINE {
	border-radius: 10px;
	width: 15px;
	height: 15px;
	background-image: -webkit-gradient(linear, 50.00% 0.00%, 50.00% 100.00%, color-stop( 0% , rgba(117,255,136,1.00)),color-stop( 100% , rgba(0,200,28,1.00)));
	background-image: -webkit-linear-gradient(270deg,rgba(117,255,136,1.00) 0%,rgba(0,200,28,1.00) 100%);
	background-image: linear-gradient(180deg,rgba(117,255,136,1.00) 0%,rgba(0,200,28,1.00) 100%);
	margin-top: 7px;
	float:left;
}
.OFFLINE {
	border-radius: 10px;
	width: 15px;
	height: 15px;
	background-image: -webkit-gradient(linear, 50.00% 0.00%, 50.00% 100.00%, color-stop( 0% , rgba(247,247,247,1.00)),color-stop( 100% , rgba(181,181,181,1.00)));
	background-image: -webkit-linear-gradient(270deg,rgba(247,247,247,1.00) 0%,rgba(181,181,181,1.00) 100%);
	background-image: linear-gradient(180deg,rgba(247,247,247,1.00) 0%,rgba(181,181,181,1.00) 100%);
	margin-top: 7px;
	float:left;
}
.OFFLINE2 {
	border-radius: 10px;
	width: 15px;
	height: 15px;
	background-image: -webkit-gradient(linear, 50.00% 0.00%, 50.00% 100.00%, color-stop( 0% , rgba(255,206,0,1.00)),color-stop( 100% , rgba(196,158,0,1.00)));
	background-image: -webkit-linear-gradient(270deg,rgba(255,206,0,1.00) 0%,rgba(196,158,0,1.00) 100%);
	background-image: linear-gradient(180deg,rgba(255,206,0,1.00) 0%,rgba(196,158,0,1.00) 100%);
	margin-top: 7px;
	float: left;
}
.CKONLINE {
	border-radius: 10px;
	width: 15px;
	height: 15px;
	background-image: -webkit-gradient(linear, 50.00% 0.00%, 50.00% 100.00%, color-stop( 0% , rgba(117,255,136,1.00)),color-stop( 100% , rgba(0,200,28,1.00)));
	background-image: -webkit-linear-gradient(270deg,rgba(117,255,136,1.00) 0%,rgba(0,200,28,1.00) 100%);
	background-image: linear-gradient(180deg,rgba(117,255,136,1.00) 0%,rgba(0,200,28,1.00) 100%);
	margin-top: 10px;
	margin-left: 5px;
	float: left;
	margin-right: -12px;
}
.CKOFFLINE {
	border-radius: 10px;
	width: 15px;
	height: 15px;
	background-image: -webkit-gradient(linear, 50.00% 0.00%, 50.00% 100.00%, color-stop( 0% , rgba(247,247,247,1.00)),color-stop( 100% , rgba(181,181,181,1.00)));
	background-image: -webkit-linear-gradient(270deg,rgba(247,247,247,1.00) 0%,rgba(181,181,181,1.00) 100%);
	background-image: linear-gradient(180deg,rgba(247,247,247,1.00) 0%,rgba(181,181,181,1.00) 100%);
	margin-top: 10px;
	margin-left: 5px;
	float: left;
	margin-right: -12px;
}

#signature-pad {
	border: 1px solid #000;
	width: 400px;
	height: 200px;
	touch-action: none;
	background: #FFFFFF;
}
#file-name {
	margin-top: 10px;
	font-weight: bold;
}