@charset "utf-8";
/* CSS Document */
body {
	background:#ccc;padding:5px;
}
h1{
	margin-top:10px;
	margin-buttom:10px;
	text-align:center;
	color:#000000;
	padding:10px;
}
h2{
	margin:10px;
	text-align:center;
	color:#004040;
	padding:8px;
}
h3{
	margin:10px;
	text-align:left;
	font-weight:bold;
}
/* loginbox */
#loginbox{
	margin: auto;
	width: 400px;
}
@media screen and (max-width: 450px) {
#loginbox {
	margin: auto;
	width: 100%;
}
}
#loginbox table{
	width: 100%;
	border:1px solid #bbbbbb;
	box-shadow: 0 15px 20px 0 rgba(0, 0, 0, .05);
	background-color: #FFF;
	padding: 1.5em 2em;
	border-radius:10px;
}
#loginbox input{
	height:20px;
	width: 100%;
}
#loginbox input[type="submit"]{
	height:30px;
	width:100%;
}
.ErrorMessage{
	color:red;
	text-align:center;
	font-weight:bold;
}
/* main_container */
#main_container{
	background:#fff;
	padding:10px;
	border-radius: 10px;
	box-shadow: 0 0 5px 1px #aaa;
}
.frame {
	background: linear-gradient(45deg, #99e6ff  80%, #ccf3ff 80%);
    border: 3px solid #ccf3ff;
    padding: 10px;
    border-radius: 4px;
}

/* myButton */
.myButton.disable{			
	background-color:#bbb;
	text-shadow: 0px 1px 0px #fff;
	color: #555;
}
.myButton.disable:hover {
	cursor:no-drop;
	background-color:#bbb;
	background-image: linear-gradient(135deg,rgba(50,50,50,0) 10%, rgba(50,50,50,1) 90%);
}
.myButton.disable:active {
	position: initial;
}
.myButton.red{			
	background-color:#400;
}
.myButton.gold{			
	background-color:gold;
}
.myButton.gray{			
	background-color:gray;
}
.myButton.green{			
	background-color:#0b7;
}
.myButton.black{			
	background-color:#111;
}
.myButton {
	user-select: none;
	appearance:none;
	transition: all 0.5s;
	-webkit-appearance:none;
	-moz-appearance:none;
	/*background-image: linear-gradient(225deg,rgba(50,50,50,0) 40%, rgba(50,50,50,0.4) 80%);*/
	background-blend-mode: screen, difference, lighten;
	background-image: linear-gradient(135deg,rgba(50,50,50,0) 10%, rgba(50,50,50,1) 90%);
	background-color:#003040;
	text-align:center;
	border-radius:2px;
	/*border:1px outset #ccc;*/
	border:none;
	display:inline-block;
	cursor:pointer;
	color:#fff;
	font-weight: bold;
	padding:6px;
	line-height:16px;
	min-height:16px;
	text-align:center;
	vertical-align:center;
	text-decoration:none;
	text-shadow:0px 1px 0px #000;
	border:1px solid #fff;
}
.myButton:hover {
	/*box-shadow:inset 0px 0px 0px 0px;*/
	background-image:none;
	background-color:#555;
	box-shadow: 0px 0px 2px 1px #888;
}
.myButton:active {
	position:relative;
	right:-1px;
	top:-1px;
}
	
/* loading */
@keyframes Gradient {
	0% {background-position: 0% 50%;text-indent:-80%;color: rgba(0, 64, 64, 0);}
	50% {background-position: 100% 50%;text-indent:0%;color: rgba(0, 64, 64, 1);}
	100% {background-position: 0% 50%;color: rgba(0, 64, 64, 0);}
}
.loading {
	margin-top:20px;
	z-index: 999;
	padding:10px;text-align:center;
	font-size: 1.5em;
	font-weight: bold;
	border:2px solid #EAFAF1;
	border-radius:4px;
	color: #004040;
	background: linear-gradient(-60deg, #99ffff, #99b3ff, #23d58d, #99ffff);
	background-size: 400% 400%;
	/*-webkit-animation: Gradient 4s ease infinite;
	-moz-animation: Gradient 4s ease infinite;*/
	animation: Gradient 4s ease infinite;
}
.noselect{
	cursor:default;
	-webkit-touch-callout: none; /* iOS Safari */
	-webkit-user-select: none;   /* Chrome/Safari/Opera */
	-khtml-user-select: none;    /* Konqueror */
	-moz-user-select: none;      /* Firefox */
	-ms-user-select: none;       /* Internet Explorer/Edge */
	user-select: none;           /* Non-prefixed version, currently
									not supported by any browser */
}
	
/* เรียง + dropdown*/
.center{
	text-align:center;
}
#header{
	top:0px;
	left:0px;
	position:fixed;
	background:linear-gradient(90deg, #77f 0%, #4af 100%);
	box-shadow: 0 0 5px 1px #014;
	width:100%;
	z-index: 998;
}
#header + *{
	margin-top:42px;
}
.loginbar {
	float: left;
	padding:0;
}
.loginbar.right {		  
	float: right;
}
#logout,#SessionTimer{
	padding: 0px 10px 0px 5px;
	height:40px;
	line-height: 40px;
	font-size: 1em;
	text-align: center;
}
#logout{
	text-decoration:none;
	color: #fff;
	background-color:#016;
	cursor:pointer;
	font-weight:bold;
}
#logout:hover{
	background-color:#f00b;
}
#logout:hover:after{
	content:" logout";
}
		
/* dropdown */	
.dropdown {float: left;margin:0;	padding:0;}
.dropdown li,.dropdown ul {list-style:none;margin:0;}
.dropdown > li {float:left;}
.dropdown > li li{
	display:block;
	position:relative;
}
.dropdown > li  > span {
    background-color: rgba(100,100,100,0.5);
    color: white;
	padding: 0px 5px;
    height:40px;
	line-height: 40px;
    font-size: 1em;
	text-align: center;
	display:block;
    border: none;
    cursor: pointer;
    text-decoration: none;
}
.dropdown ul {
    display: none;
	padding:0px;
    position: absolute;
	top:100%;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
.dropdown ul ul{
	float:left;
	top:0;
	left:100%;
}
.dropdown a {
    display: block;
	padding:8px 10px;
    color: black;
    text-decoration: none;
	white-space: nowrap;
}
.dropdown li:hover ul{z-index: 999;}
.dropdown li li:hover , .dropdown li li.hover {background-color: #d8d8d8;}
.dropdown li:hover > ul , .dropdown li.hover > ul {display: block;}
.dropdown li.title:hover > span , .dropdown li.title.hover > span {background-color: #000000 !important;color:#fff !important;}
.dropdown li.title.head > span {background-color: rgba(1,1,1,0.5);font-weight: bold;}
.dropdown li.title.gray > span  {background-color: rgba(40,40,40,.5);}
.dropdown li.title.yellow > span  {background-color: #b3b300;}
.dropdown .collapsible:before {
    content: "◥";
    right: 5px;
    float: right;
    position: relative;
    color: lightgray;
}
.dropdown li.lastactive > *{color:navy;}
.dropdown li.lastactive > *:after{content:" (เปิดอยู่)";color:gray;}

/* popup */	
		
#popup {
	z-index:999;
	overflow: scroll;
	-webkit-overflow-scrolling: touch;
	position:fixed;
	display:none;
	top:0;bottom: 0;
	left: 0;right: 0;
	padding:15px;
	margin: 10px 10px 10px 10px;
	border: 1px solid #ccc;
	border-radius: 5px;
	background:linear-gradient(100deg, #dddddd 30%, #e4e4e4 30%);
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
	text-align: center;
}

/* เก็บข้อมุลที่เป็นตาราง */
.table.content { 
    border-spacing: 0;
	width:100%;
	align:center;
	text-align:center;
    margin:auto; 
	border:1px solid #bbb;
	border-radius:5px;
	box-shadow: 0 15px 20px 0 rgba(0, 0, 0, .05);
}
.table.content tr td:not(:first-child),.table.content tr th:not(:first-child){
	border-left: 1px dashed gray;
}
.table.content th{background-color:#aaaaaa;color:#000000;}
.table.content tr:first-child>th:first-child{border-radius: 5px 0 0 0;}
.table.content tr:first-child>th:last-child{border-radius: 0 5px 0 0;}
.table.content tr:last-child>*:first-child{border-radius: 0 0 0 5px !important;}
.table.content tr:last-child>*:last-child{border-radius: 0 0 5px 0 !important;}
.table.content tr:nth-child(odd) td{background-color: white;}
.table.content tr:nth-child(even) td{background-color: #dddddd;}
.table.content tr:nth-child(odd).highlight td{background-color:#c0ffef;}
.table.content tr:nth-child(even).highlight td{background-color:#8dffe2;}
.table.content .summary{background-color:#000040;color:white;}
.table.content.lastcol tr th:last-child{background-color:#333 !important;color:yellow !important;}
.table.content.lastcol tr td:last-child{font-weight:bold;background-color:#888 !important;}

@media screen and (min-width: 700px){
	.block.right{
		width:calc(50% - 10px);
		margin-left:10px;
		float:right;
	}
	.block.left{
		width:calc(50% - 10px);
		margin-right:10px;
		float:left;
	}
}
.block,.linebreak{
	display:inline-block;
	box-sizing: border-box;
	width:100%;
}
.block > table {
	margin:auto;
	width:100%;
}
.block textarea:read-only, .block input:read-only{
	background-color:lightslategray;
	border-color:dimgray !important;
	color:white;
}
.block select, .block textarea, .block input:not([type='checkbox']){
    box-sizing:border-box;
	border-radius:3px;
	text-align:center;
	font-family:Tahoma;
	font-size:0.9em;
	padding:3px;
	width:100%;
}
.block select, .block textarea, .block input:not([type='checkbox']):not([type='submit']):not([type='file']){
	appearance:none;
	-webkit-appearance:none;
	-moz-appearance:none;
	border:1px solid #999999;
	height:26px;
	line-height:20px;
}
.block input[type=file],.block .image_url{
	background-color:#eeeeee;
	width:100%;
	padding-left:35px;
	border:1px solid #999999;
	background-position: left; 
	background-repeat: no-repeat;
	background-size: auto 100%;
}

.block textarea{
	height:40px;
	resize: none;
}
.block select {
	text-align-last:center; 
	padding:3px 26px 3px 10px;
	background-image:linear-gradient(135deg, transparent 50%, #555555 50%);
	background-position:calc(100% - 8px);
	background-size: 8px 8px;
	background-repeat: no-repeat;
	background-color:#eeeeee;
	color:#222222;
	cursor:pointer;
}
.block > table > * > tr > th{
	color:navy;
	border-color:navy;
	border-width:2px;
	border-style: none none ridge none;
}

.form_table button{
	width:100%;
	height:20px;
	border:1px solid #669999;
	border-radius:3px;
	cursor:pointer;
	color:#00310f;
	font-family:Tahoma;
	font-size:14px;
	text-shadow:0px 1px 0px #9ee68d;
	font-weight:bold;
	background-color:#3ed872;
	box-shadow:inset 0px 30px 0px -20px #66e691;
}
.form_table button:hover {
	box-shadow:inset 0px 0px 0px 0px;
	background-color:#56d4b7;
}
.form_table button:active {
	position:relative;
	top:1px;
}
.form_table{
	border-spacing: 0px !important;
	margin:auto;
	width:95%;
	border-radius:3px;
	background-color: #2d682f;
}
.form_table thead th {
	border-radius:3px;
	background-color: #003040;
	
}
.form_table , .form_table tr , .form_table td , .form_table th{
	border:1px solid #2d682f;
	text-align:center;
}
.form_table th {
	color:#fff;
}
.form_table td {
	color:#ffff00;
}
.form_table input:not([type='checkbox']) {
	display:block; 
	margin:0; 
	border:0; 
	width:100%;
	height:100%;
	text-align:center;
}
.form_table td, .form_table th{
	margin:0; 
	padding:0;
}
.block .cellcontent{
	border-radius:5px;
	background-color:rgba(255,255,255,0.65);
	color:#000040 !important;
	text-align:center;
}