/* CSS Document */
		/*src:url(../fonts02/Raleway-VariableFont_wght.ttf);*/
		/*src:url(../fonts02/Ubuntu-Regular.ttf);*/
@font-face{
		font-family:"myfont";
		
		src:url(../fonts02/Raleway-VariableFont_wght.ttf);

	}
@media only screen and (max-width: 2560px) {
 body{
	left:0;
	top:0;
	margin-left:0;
	margin-top:0;	
/*	font-family:myfont;*/
	font-family:calibri;
	font-size:20px;
	font-weight:bold;
	
	color:#000000;
	background:#FFF;
/*	background-image: linear-gradient(0deg,#87d0f4 0%, #22a0cb 50%);*/
	background-attachment: fixed;

}  
}

@media only screen and (min-width: 600px)  AND (max-width:1920px) {
 body{
	left:0;
	top:0;
	margin-left:0;
	margin-top:0;	
/*	font-family:myfont;*/
   font-family:calibri;
	font-size:20px;
/*	font-weight:bold;*/
	color:#000000;
	background:#FFF;
	background-attachment: fixed;

}  
}
@media only screen and (max-width: 599px) {
 body{
	left:0;
	top:0;
	margin-left:0;
	margin-top:0;	
	font-family:myfont;
	font-size:8px;
	background:#FFF;
	color:rgba(0,0,0,1.00);	
/*	background-image: linear-gradient(0deg,#22a0cb 0%, #FFFFFF 50%);*/
}  

}

/* CSS Document */
.overlay {
    background-color:#000;
    position: fixed;
    width: 100vw;
    height: 100vh;
    z-index: 4000;
    top: 0px;
    left: 0px;
    opacity: .5; /* in FireFox */ 
    filter: alpha(opacity=70); /* in IE */	
}
 .row, .col {
	   overflow: hidden; 
	   position: absolute; 
 }
 .row { 
  	left: 0;
   	right: 0; 
 }
  .col {
	top:0; 
	bottom:0; 
}
.scroll-x { overflow-x: auto; }
 .scroll-y { overflow-y: auto; }
.menu_panel{
	box-shadow:1px 1px 5px #F8EFEF;
	border-radius: 0px 3px 3px 0px;	
	border-style:solid;
	border-width:3px;
	border-color:#FFF;
	background-image: linear-gradient(90deg,#01d27f 0%, #FFFFFF 45%,#01d27f 90%);
}
.menu_panel input,select{
	border-radius:3px;	
	border-style:solid;
	border-width:1px;
	border-color:#066317;
}
.menu_panel input{
	width:90%;
}
.menu_tab_menu{
	position:relative;
	text-align:center;
	vertical-align:central;
	box-shadow:1px 1px 5px #F8EFEF;
	border-radius: 0px 5px 5px 0px;	
	border-style:solid;
	border-width:2px;
	border-color:#FFFFFF;
	left:6px;
	width:100%;
	height:100px;
	color:#FFFFFF;
	background-image: linear-gradient(45deg,#51D7F3 0%, #08F498 90%);
}
.layout_header {
	   height: 80px;
	    top: 0;
		z-index:3000;		
	}
.layout_menu_show{
	position:absolute;
	left: 0;
	width:400px;
	z-index:3000;
	animation:menu_show_run 0.5s  linear ;					
}
.layout_bottom{
	position:absolute;
	left: 0;
	right:0;
	top:100%;
	margin-top:-80px;
	z-index:3000;
	text-align:center;
	background:#FFFFFF;
	height:80px;
}
.box_caption_hide{
	position:absolute;
	width:100%; 
	height:100%;	
	animation:image_fade_out 2s   ease-out;	
	opacity:0;
	overflow:hidden;
}
.box_caption_show{
	position:absolute;
	width:100%; 
	height:100%;
	animation:image_fade_in 5s   linear;						
	opacity:1;	
}
.box_caption_border{
	border-style:solid;
	border-width:0px;
	border-color:rgb(192,192,192);
	border-bottom-width:2px;
	
}
.box_caption01{
	background:url(../img/caption_bg01.jpg);	
}
.box_caption02{
	background:url(../img/caption_bg02.jpg);
}
.box_caption03{
	background:url(../img/caption_bg03.jpg?=1);
}
.box_caption04{
	background:url(../img/caption_bg04.jpg);	
}
.box_text_show {
	padding:10px;
	border-radius: 15px 15px 5px 5px;	
	position:absolute;
	left:100%;
	margin-left:-600px;
	width:550px;
	top:50%;
	margin-top:-120px;
	height:240px;		
	animation:text_fade_in 2s   linear;						
}

.box_text_hide {
	position:absolute;
	padding:10px;
	border-radius: 15px 15px 5px 5px;		
	left:100%;
	margin-left:-600px;
	width:550px;
	top:50%;
	margin-top:-120px;
	height:240px;		
	opacity:0;
	background:rgba(200,200,200,0.5);
	animation:text_fade_out 2s   linear;						
}

.box_text_bg01{
	background:rgba(100,100,100,0.5);
}
.box_text_bg02{
	background:rgba(255,255,255,0.5);
}

.box_text_show span.h1{
	font-size:30px;
	color:#FFFFFF;
	text-shadow: 2px 2px 5px rgba(20,20,20,1.00);
}
.box_text_show span.b1{
	font-size:25px;
	color:rgba(253,151,21,1.00);
	text-shadow: 1px 1px 5px rgba(20,20,20,1.00);
}
.box_text_hide span.h1{
	font-size:30px;
	color:#FFFFFF;
	text-shadow: 2px 2px 5px rgba(20,20,20,1.00);
}
.box_text_hide span.b1{
	font-size:25px;
	color:rgba(253,151,21,1.00);
	text-shadow: 1px 1px 5px rgba(20,20,20,1.00);
}

@keyframes image_fade_in {
  	0% {opacity:0;}	
	100% {opacity:1;}
}
@keyframes image_fade_out {
  	0% {opacity:1;}
	100%{opacity:0.1;}
}
@keyframes text_fade_in {
	0% {
				opacity:0;
				top:-240px;
				}	
  	50% {opacity:0.5;top:50%;}
	100% {opacity:1;top:50%;}
}
@keyframes text_fade_out{
	0% {
				opacity:1;
				top:50%;
				}	
  	50% {opacity:0.5;top:50%;}
	100% {opacity:0.2;top:150%;}
}


.layout_menu_hide{
	position:absolute;
	left: -350px;
	width:400px;
	z-index:3000;
	animation:menu_hide_run 0.5s  linear;				
}
@keyframes menu_hide_run {
  0% {left:0px} 
  100% {left:-350px}
}
@keyframes menu_show_run {
  0% {left:-350px} 
  100% {left:0px}
}

.layout_left {
    z-index:1000;		
	left: 0;
	width:350px;
	
}
.layout_client {
	position:absolute;	
	text-align:left;
	left:0;
	right:0;
  	top: 105px; 
	bottom: 0;    
}
.layout_top{
  	top: 0px;
	height:100px;
	text-align:left;
	padding:3px;
}
.layout_decreate_footer{
    bottom: 61px;
}
.layout_footer { 
    position:absolute;
    z-index:3001;
  	 height: 60px; 
     bottom: 0;
     right: 0;
     left: 0;
 }
 .bg01{
	 background-image: linear-gradient(0deg, #c1e0f5 0%,#f6f3ec 60%);
 }
 
.layout_panel{
   background-image: linear-gradient(90deg,#01d27f 0%, #FFFFFF 45%,#01d27f 90%);
}
.layout_border{
	border-style:solid;
	border-width:2px;
	border-color:#FF0000;    
}
.block_icon{
    position: absolute;
    height: 70px;
    left: 0;
    right: 800px;    
    overflow: scroll;
}
.box_icon {
    position: absolute;
	border-radius: 5px 5px 0px 0px;	
	border-style:solid;
	border-width:1px;
	border-color:#EAE1E1;  
    background: #FFFFFF;
}
.box_icon:hover {
    position: absolute;
	border-radius: 5px 5px 0px 0px;	
	border-style:solid;
	border-width:2px;
	border-color:#F75809;  
    background: #FFFFFF;
}
.body_dia_header {
	   height:35px;
	    top: 0; 
		background:#4B79F7;
		color:#F8F8F8;
		border-radius: 5px 5px  0 0;	
}
.body_dia_header-b {
	   height: 40px;
	    top: 0; 
		background:#4B79F7;
		color:#F8F8F8;
		border-radius: 5px 5px  0 0;	
}

.body_dia_client { 
  	top: 5vh; 
	bottom: 50px; 
}
.body_dia_footer { 
  	 height: 40px; 
     bottom: 0; 
 }
 .css_bg{
	position:absolute;
	top:0px;
	left:0px;
    width: 100vw;
    height: 100vh;	
	z-index:8000;	
	opacity:0.5;
	background:rgb(20,20,20);
}
.css_window{
	position: fixed;
	border-radius: 3px;	
	border-style:solid;
	border-width:0px;
	border-color:#000;		
	top:0px;
	left:0px;
    width: 100vw;
    height: 100vh;	
	opacity:1;
	z-index:10;
}
.css_box_load{
	position:absolute;
	width:50%;
	left:50%;
	margin-left:-25%;
}
.panel_box{
	border-style:dashed;
	border-width:1px;
	border-color:#FB0004;		
}
.panel_box2{
	border-style:dashed;
	border-width:1px;
	border-color:#035DFB;	
	
}
.panel_box3{
	border-style:dotted;
	border-width:2px;
	border-color:#0BF525;	
	
}

.panel_header{
	box-shadow: 1px 1px  5px 1px rgba(112,104,105,1.00);
	border-radius: 3px;	
	border-style:dashed;
	border-width:1px;
	border-color:#CCC;	
	z-index:3000;
		color:#FFF;
	background:#AA0609;
	background-image: linear-gradient(90deg,#04A22E 0%, #F3FCF5 45%,#04A22E 90%);
	text-align:left;
}
.css_client_frames{
	width:100%;
	height:100%;	
}
.panel_bottom{
	box-shadow: 1px 1px  5px 1px rgba(112,104,105,1.00);
	border-radius: 3px;	
	border-style:dashed;
	border-width:1px;
	border-color:#CCC;	
	z-index:3000;
	background:#b22222;
	background-image: linear-gradient(90deg,#0B60F5 0%, #E4E8F8 45%,#0B60F5 90%);
}
.css_main_dialog{
    position: fixed;
    width: 100vw;
    height: 100vh;
    z-index: 4000;
    top: 0px;
    left: 0px;	
	background:	rgba(0,0,0,0.8)	;
}
.css_main_dialog2{
    position: fixed;
    width: 100vw;
    height: 100vh;
    z-index: 4000;
    top: 0px;
    left: 0px;	
	background:	rgba(255,0,0,0.5)	;
}
.css_dialog{
	position:absolute;
	box-shadow: 1px 1px  5px 1px rgba(112,104,105,1.00);
	border-radius:5px;
	border-style:solid;
	border-color:#FFF;
	border-width:2px;		
	width:98vw;
	left:1vw;
	top:5vh;
	height:95vh;	
	z-index:2900;
	background:	rgba(255,255,255,1)	;
}
.css_dialog_msg{
	position:absolute;
	box-shadow: 1px 1px  5px 1px rgba(112,104,105,1.00);
	border-radius:5px;
	border-style:solid;
	border-color:#FFF;
	border-width:2px;	
	
	width:90vw;
	left:5vw;
	top:30vh;
	height:40vh;	
	z-index:2900;
	background:	rgba(255,255,255,1)	;
}
.css_time{
	position:absolute;
	box-shadow:1px 1px 5px #F8EFEF;
	border-radius: 0px 5px 5px 0px;	
	border-style:solid;
	border-width:2px;
	border-color:#FFFFFF;	
	top:0px;
	width:300px;
	height:30px;
	left:100%;
	margin-left:-300px;
	z-index:5000;
	color:#FFFFFF;
}
.css_dialog_login{
	position:absolute;
	box-shadow: 1px 1px  5px 1px rgba(112,104,105,1.00);
	border-radius:5px;
	border-style:solid;
	border-color:#20F907;
	border-width:2px;	
	
	width:90vw;
	left:5vw;
	top:30vh;
	height:40vh;	
	z-index:2900;
	background:#ECECEC;
	background-image: linear-gradient(90deg,#ECECEC 0%, #FFFFFF 45%,#ECECEC 90%);
	font-size:1em;	
}
.css_dialog_login-caption{
	position:absolute;
	border-radius:5px;
	border-style:solid;
	border-color:#59F45C;
	border-width:1px;
	padding:3px;
	left:1.5%;
	top:-5%;
	background:#9CF98E;
	background-image: linear-gradient(90deg,#9CF98E 0%, #FFFFFF 45%,#9CF98E 90%);
}
.css_dialog_login-msg{
	position:absolute;
	
	padding:3px;
	left:1.5%;
	top:2%;
	color:#F81216;
	
}
.css_dialog_login input {
    border-radius:5px;
	border-style:solid;
	border-width:2px;
	border-color:#459A09;	
	background:#F7F8D3;
	font-size:1em;	
}
.css_dialog_login input:focus {
    border-radius:5px;
	border-style:solid;
	border-width:2px;
	border-color:#CBFB35;	
	background:#FFFFFF;
	font-size:1em;	
}
.css_logo{
	box-shadow: 1px 1px  5px 1px rgba(255,255,255,1.00);
	border-radius: 3px;	
	border-style:solid;
	border-width:2px;
	border-color:#FFF;	
}

.css_program{
	font-size:1em;
	color:#0C9;
	font-weight:bold;
}
.css_datetime{
	font-size:0.8em;
	color:#FFF;
	font-weight:bold;
}
.css_welcom{
	font-size:1em;
	color:#ccff99;
	font-weight:bold;
}
.css_warning{
	font-size:1em;
	color:#F30;
	font-weight:bold;
}
.css_version{
	font-size:1.5em;
	color:#ccff99;
	font-weight:bold;
}
.css_subject{
	font-size:1em;
	color:#9acce2;
	font-weight:bold;
}
.css_header{
	font-size:0.8em;
	color:#FFF;
	font-weight:bold;
}
.css_select{
	font-size:0.8em;
	color:#0C9;
	font-weight:bold;
}

.css_user_name{
	font-size:1em;
	color:#ffcc99;
	font-weight:bold;
}
.css_alarm{
	font-size:1em;
	color:#F30;
	font-weight:bold;
}
.css-input-01{
    border-radius:5px;
	border-style:solid;
	border-width:2px;
	border-color:#3AEEF7;	
	background:#F7F8D3;
	font-size:1em;	
}
.css-input{
	width:95%;
}
.css-input-year{
	width:30%;
	font-size:1.2em;
	color:#0729F4;	
}
.css-input-month{
	width:25%;
	font-size:1.2em;
	color:#0729F4;	
	
}
.css-input-day{
	width:25%;
	font-size:1.2em;
	color:#0729F4;	
	
}


.combo-select{
	 border-style:solid;
	 border-color:#09C;
	 border-width:0.1em;			
	 width:100%;	
}
.textarea{
	 border-style:solid;
	 border-color:#09C;
	 border-width:0.1em;			
	 width:100%;	
}
.css_input_text{
	font-size: 1em;
	border-radius: 5px  5px  5px  5px;				
	border-width:1px;
	border-style:solid;
	border-color:#999;
	background :rgba(255,255,255,1);
}
.css_input__text_disable{
	font-size: 1em;
	border-radius: 5px  5px  5px  5px;				
	border-width:1px;
	border-style:solid;
	border-color:#999;
	background :#CCC;
}
.css_text_input{
	font-size:1em;
	color:#ccff99;
	font-weight:bold;
}
.css_debug{
	position:absolute;
	border-radius: 3px;	
	border-style:solid;
	border-width:2px;
	border-color:#666;	
	z-index:1301;
	left:70%;
	top:0%;
	width:30%;
	height:600px;
	
	overflow:scroll;
    display: none;
}
.css_calender_block{
	width:100%;
	height:80vh;
}

.css_calender{
	position:relative;
	font-size:1em;	
}
.css_calender_tittle_bar{
	border-radius: 3px;	
	border-style:solid;
	border-width:0px;
	border-color:#666;	
	width:100%;
	left:0%;
	top:0px;
}
.css_calender_title{
	border-radius: 3px;	
	border-style:solid;
	border-width:0px;
	border-color:#666;
	left:20%;	
	top:0px;
	text-align:center;	
}
.css_calender_arrow_left{
	float:left;
	border-radius: 45% 0px 0px 45%;	
	border-style:solid;
	border-width:1px;
	border-color:#666;
	left:2%;	
	width:30%;
	top:5px;
	text-align:center;	
}
.css_calender_arrow_right{
	float:right;
	border-radius: 0px 45% 45% 0px;	
	border-style:solid;
	border-width:1px;
	border-color:#666;
	left:82%;	
	width:30%;
	top:5px;	
	text-align:center;	
}
.css_table_calenter{
	border-collapse: collapse !important;		
}
.css_table_calenter th{	
	border-style:solid;
	border-color:#CCC;
	border-width:2px;		
	font-size:0.8em;	
	color:#FFF;
	background:#999;
}
.css_table_calenter td{	
		
	border-style:solid;
	border-color:#CCC;
	border-width:1px;	
	font-size:0.7em;	
	/*background:#FFF;*/

}
.css_table_calenter th table{
	font-size:1.3em;		
}
.css_table_calenter th table td{
	border-width:0px;
	border-left-width:1px;	
}

.css_calenter_memo{
	border-collapse: collapse !important;		
}
.css_calenter_memo td{	

	border-style:dashed;
	border-collapse:0.2em;
	border-color:#CCC;
	border-width:1px;
	
}
.css_calenter_memo td{	
	padding: 3px 3px;
	font-size:1em;	
}





.css_table_list{
	left:0px;
	top:0px;
	width:25%;
	/*height:100vh;	*/
}
.css_table_field{
	position:relative;
	left:0%;
	top:15px;
	width:73%;
	/*height:100vh;*/
	
}
.table_config{
	    border-collapse: collapse !important;	
}
.table_config th{	
	border-style:solid;
	border-color:#CCC;
	border-width:2px;		
	font-size:0.8em;	
	color:#FFF;
	background:#999;
}
.table_config td{	
		
	border-style:solid;
	border-color:#CCC;
	border-width:2px;	
	font-size:0.7em;	
	background:#FFC;
	cursor:pointer;
}
.table_report{
	    border-collapse: collapse !important;	
}
.table_report th{	
	border-style:solid;
	border-color:#CCC;
	border-width:1px;		
	font-size:0.8em;	
	color:#000;
	background:#E6E6E6;
}
.table_report td{
	padding: 3px;		
	border-style:solid;
	border-color:#CCC;
	border-width:1px;	
	font-size:0.7em;	
}
.table_report td table{			
	border-style:solid;
	border-color:#CCC;
	border-width:1px;	
	font-size:1.4em;	
	background:#FFF;
	height:30px;
}
.table_report td table tr td{
	padding:3px;
}

.table_reset{
	    border-collapse: collapse !important;	
		border-width:0px;	
}
.table_reset td{	
	border-width:0px;	
}

.div_product_page{
	position:absolute;
	border-radius: 3px;	
	border-style:solid;
	border-width:2px;
	border-color:#666;	
	left:0%;
	width:99%;
	top:52px;
	z-index:1;
	height:85%;
	background:#FFF;
	overflow:scroll;
}

.div_product_menu_bottom{
	position:absolute;
	border-radius: 3px;	
	border-style:solid;
	border-width:0px;
	border-color:#666;	
	top:100%;
	width:90%;
	height:3ex;
	margin-top:-4ex;	
	z-index:100;
	background:#FFF;
}
.css_button{
	font-size:1em;
	border-radius:5px;
	border-width:1px;
	border:#06C;
	width:10vw;
	height:5vh;	
}
.btn-glyphicon {
    padding:4px;
    background:#ffffff;
    margin-right:4px;
}
.icon-btn {
    padding: 1px 15px 3px 2px;
    border-radius:50px;
	border-style:solid;
	border-width:2px;
	border-color:#CCC;	
	
}
.css_cmd_button{
	position:absolute;
	top:0px;
}

.css_cmd_edit{
	position:absolute;
	top:0px;
}
.css_location_select{
	background:#FF9;	
}
.css_product_td{
	padding:5px;
}
.css_adjust_value{
	color:#090;
}

.table_subject_header{
	 border-collapse: collapse !important;
}
.table_subject_header td{
	border-radius:0px  5px 5px  0px;
	border-style:solid;
	border-color:#616161;
	border-width:1px;	
	font-size:1em;	
	background:#27BAF8;
	text-align:left;
}
.table_customer_info{
	 border-collapse: collapse !important;
}
.table_customer_info th{	
	border-style:solid;
	border-color:#CCC;
	border-width:1px;		
	font-size:1em;	
	color:#000;
	background:#FF9;
}
.table_customer_info td{			
	border-style:solid;
	border-color:#CCC;
	border-width:1px;	
	font-size:1em;	
	background:#FFF;
}
.table_customer_info td input{			
	font-size:1.5em;
	color:#0729F4;
}
.table_data_info{
	 border-collapse: collapse !important;
}
.table_data_info th{	
	border-style:solid;
	border-color:#CCC;
	border-width:1px;		
	font-size:1em;	
	color:#000;
	background:#D8D6D6;
}
.table_data_info td{			
	border-style:solid;
	border-color:#CCC;
	border-width:1px;	
	font-size:1em;		
}
.row_select{
	background:#FF9;
	border-style:solid;
	border-color:#F93204;
	border-width:1px;	
	
}

.css_row_normal{
	background:#FFF;
	
}
.css_row_select{
	background:#F3F598;
	border-style:solid;
	border-color:#F93204;
	border-width:1px;		
}
.css_group_normal{
	border-style:solid;
	border-color:#CCC;
	border-width:1px;	

}
.css_group_select{
	border-style:solid;
	border-color:#F4CE07;
	border-width:2px;	

}

.table_data_add{
	 border-collapse: collapse !important;
}
.table_data_add th{	
	border-style:solid;
	border-color:#CCC;
	border-width:1px;		
	font-size:1em;	
	color:#000;
	background:#84B5F0;
}
.table_data_add td{			
	border-style:solid;
	border-color:#CCC;
	border-width:0px;	
	font-size:1em;		
}
.table_data_add td input{			
	font-size:1.2em;
	color:#0729F4;
	width:100%;
}
.table_data_add td textarea{			
	font-size:1.2em;
	color:#0729F4;
	width:100%;
}
.table_data_add td select{			
	font-size:1.2em;
	color:#0729F4;
}
.table_data_detail{
	 border-collapse: collapse !important;
}
.table_data_detail th{	
	border-style:solid;
	border-color:#CCC;
	border-width:1px;		
	font-size:1em;	
	color:#000;
	background:#ECEDD3;
}
.table_data_detail td{			
	border-style:dotted;
	border-color:#CCC;
	border-width:1px;	
	font-size:1em;		
}
.css_message{
	color:#FB0532;
	font-size:1.5em;
}
.custom-file-input {
  color: transparent;
  /*
  color:#F00A0E;
  font-weight: 500;
  font-size: 1em;
  */
}
.custom-file-input::-webkit-file-upload-button {
  visibility: hidden;
}
.custom-file-input::before {
  content: 'Select some files';
  color: black;  
  border: 1px solid #999;
  border-radius: 3px;
  padding: 5px 8px;
  user-select: none;
  cursor: pointer;  
  font-size: 0.7em;
}
.custom-file-input:hover::before {
  border-color:#F00;
}
.custom-file-input:active {
  outline: 0;
}
.custom-file-input:active::before {
 /* background: -webkit-linear-gradient(top, #e3e3e3, #f9f9f9); */
}
.css-buttom-upload {
  color: black;  
  border: 1px solid #999;
  border-radius: 3px;
  padding: 5px 8px;
  user-select: none;
  cursor: pointer;  
  font-size: 1.5em;
}

.css_fram_pic{
	border-radius: 3px;	
	border-style:dashed;
	border-width:1px;
	border-color:#3A50FB;	
	
	color:#FFF;
	width:100%;
}
.css_pic_border{
	border-radius: 3px;	
	border-style:solid;
	border-width:3px;
	border-color:#CCC;	
	z-index:3000;
	color:#FFF;
	width:30vw
}
.css_pic02{
	border-radius: 3px;	
	border-style:solid;
	border-width:3px;
	border-color:#F89608;	
	z-index:3000;
	color:#FFF;
}

.body_filter{
	top:0;
	height:60px;
	border-style:solid;
	border-width:0px;
	border-color:#F89608;		
}
.body_filter_hide{
	height:0px;	
}
.css_main_colum_data{
	position:absolute;
	border-style:solid;
	border-width:1px;
	border-color:#CCC;		
	left:0px;
	right:0;
	top:62px;
	bottom:0;
}

.css_main_colum_data_left{
	position:absolute;
	left:0px;
	width:100px;
}
.css_main_colum_client{
	position:absolute;
	border-style:solid;
	border-width:1px;
	border-color:#CCC;		
	left:100px;
	right:0;
	top:0px;
	bottom:0; 
}
.css_data_colum{
	position:absolute;
	 border: 1px solid #999;	 
	 top:0px;
}
.css_data_colum_select{
	position:absolute;
	 border: 1px solid #F00;
	 top:0px;
}
.css_input_listmenu_panel{
	position:relative;
	box-shadow:1px 1px 5px 1px rgba(126,123,123,1.00);
	border-radius:0px 0px 5px 5px;	
	border-style:solid;
	border-color:#0D35F3;
	border-width:1px;
	left:0vw;
	width:80vw;
	height:30vh;
	background:rgba(249,249,249,1.00);
	overflow:auto;
}
.css_listmenu_row_normal{
	border-style:solid;
	border-color:#CCC;
	border-width:0px;
	border-bottom-width:1px;
	
}
.css_box_listmenu{
	border-style:solid;
	border-color:#CCC;
	border-width:0px;
	border-bottom-width:1px;
	
}
.css_project_header{
	position:relative;
	box-shadow:1px 1px 5px 1px rgba(126,123,123,1.00);
	border-radius:5px;	
	border-style:solid;
	border-color:#0621F7;
	border-width:1px;
	background:#5CBDFB;
	overflow:auto;
	color:#FFFFFF;
}
.css_img_people{
border-radius:50%;	
	border-style:solid;
	border-color:#02F790;
	border-width:2px;

}
/*   ไปพบลูกค้า*/
.plan_op_customer{
	background-color:#97faff;
}
/*   เข้าออฟฟิต*/
.plan_op_office{
	background-color:#65e5d8;
}
/*   ลางาน*/
.plan_op_workstop{
	background-color:#FC696C;
}

/*   ไปพบลูกค้ากับคนอื่น*/
.plan_op_customer2{
	background-color:#8eeaef;
}
/*   ทำรายงาน*/

.plan_op_report{
	background-color:#CFC;
}


.css_week_end{
	
	background:#F8D9D9;
}
.css_day_working{
	background:#f1f1f1;
}
.css_day_working2{
	background:#FFFFFF;
}
.css_day_now{
	background:#FFC;
}
.css_customer_report{
	 border-collapse: collapse !important;
}
.css_customer_report th{	
	border-style:solid;
	border-color:#CCC;
	border-width:1px;		
	font-size:1em;	
	color:#000;
	background:#ECEDD3;
}
.css_customer_report td{			
	border-style:dotted;
	border-color:#CCC;
	border-width:1px;	
	font-size:1em;		
}
.css_monthly_report{
	 border-collapse: collapse !important;
}
.css_monthly_report th{	
	border-style:solid;
	border-color:#CCC;
	border-width:1px;		
	font-size:1em;	
	color:#000;
	background:#ECEDD3;
}
.css_monthly_report td{			
	border-style:dotted;
	border-color:#CCC;
	border-width:1px;	
	font-size:1em;		
}
.css_table_noeffect{
	 border-collapse: collapse !important;
}
.css_table_noeffect th{	
	border-style:solid;
	border-color:#CCC;
	border-width:0px;		
}
.css_table_noeffect td{			
	border-style:dotted;
	border-color:#CCC;
	border-width:0px;	
}
.table_date_header{
	border-radius:0px  10px 10px  0px;
	border-style:solid;
	border-color:#333298;
	border-width:1px;	
	font-size:1em;	
	text-align:left;
}
.table_date_header_off{
	border-radius:0px  10px 10px  0px;
	border-style:solid;
	border-color:#FB4E00;
	border-width:1px;	
	font-size:1em;	
	text-align:left;
}
.header_label{
	border-radius:0px  10px 10px  0px;
	border-style:solid;
	border-color:#333298;
	border-width:1px;	
	background:#EFF79E;
}
.button_style01{
	border-radius:10px  10px 10px  10px;
	border-style:solid;
	border-color:#333298;
	border-width:1px;	
	background:#C5C7BA;
	background-image: linear-gradient(90deg,#4CC2F4 0%, #F3FCF5 90%);
}
.button_style02{
	padding:10px;
	border-radius:10px  10px 10px  10px;
	border-style:solid;
	border-color:#333298;
	border-width:1px;	
	background:#C5C7BA;
	background-image: linear-gradient(90deg,#4CC2F4 0%, #F3FCF5 90%);
}

.box_chart{
	position:absolute;
	border-style:solid;
	border-color:#FF0000;
	border-width:0px;		
	left:0%;
	top:0px;	
	width:100%;
	height:100%;
	overflow:hidden;	
	color:#FFFFFF;
	background:#000000;
}
.chart_component{
	position:absolute;
	top:2%;
	left:72%;
	width:25%;
}
.box_graph{
	position:absolute;
	border-style:solid;
	border-color:#F5B208;
	border-width:0px;			
	left:0;
	right:0;
	top:0;
	bottom:0;
	background:#000000;
	color:#FFFFFF;;
}
.area_graph{
	border-style:solid;
	border-color:#F5B208;
	border-width:2px;	
	width:99%;
	height:99%;
	z-index:10;
	background:#000000;
	font-size:1em;
}
.area_graph2{
	border-style:solid;
	border-color:#F5B208;
	border-width:2px;	
	z-index:10;
	background:#000000;
	font-size:1em;
}

.left_axis_title{	
	stroke:#39F103;
	fill:#39F103;
	font-size:1em;
}
.right_axis_title{
	position:absolute;
	right:10px;
	top:10px;
	z-index:100;
	color:#0806F5;
	font-size:25px;
}
.chart_title{
	position:absolute;
	right:30%;
	top:10px;
	z-index:100;
	color:#0806F5;
	font-size:25px;
}
.text_rotate{
	transform:rotate(45,45,45);
}
.css_font_debug{
	font-size:30px;	
	color:rgba(241,3,62,1.00);
}
.css_temp_data{
    position: absolute;
    z-index: 5000;
	border-style:solid;
	border-color:#FFFF00;
	border-width:1px;		
    top:75%;
    left:80%;
    width: 20%;    
    height: 20%;        
}
.css_mouse_report{
    position: absolute;
    z-index: 5000;
	border-style:solid;
	border-color:#FF0000;
	border-width:1px;		
    left:100%;
    width: 200px;
    top:0px;
    height: 50px;
    margin-left: -200px;
    background: #A8F4D3;    
}

/* width */
::-webkit-scrollbar {
  width: 15px;
  height:15px;
}

/* Track */
::-webkit-scrollbar-track {
  box-shadow: inset 0 0 5px grey; 
  border-radius: 10px;
}
 
/* Handle */
::-webkit-scrollbar-thumb {
  background: #D3D0D0; 
  border-radius: 10px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #FF0000; 
}

.quick_menu{
	position:absolute;
	right:0;
	width:400px;
	border-style:solid;
	border-color:rgb(255,64,64);
	border-width:1px;	    
    border-radius:5px;	
}
.css_panel_back{
	position:absolute;
	top:80.2%;
	right:0;
	width:400px;
	height:19.6%;
	border-style:solid;
	border-color:#FFFFFF;
	border-width:2px;	    
    border-radius:5px;
    padding: 5px;
	font-size:1em;	     
	color:rgb(192,192,192);  
    background-image: linear-gradient(90deg,rgba(52,61,61,1) 20%, rgba(36,45,46,1) 75%);	
}
.css_dialog_pos_modify{
	position:absolute;
	width:60vw;
	left:1vw;
	top:3vh;
	height:90vh;	
	z-index:10001;
	
}
.css_dialog_modify{	
	position:absolute;
	border-radius:5px;
	border-style:solid;
	border-color:#FFF;
	border-width:2px;
	box-shadow: 1px 1px  5px 1px rgba(200,200,200,1.00);
	background:	rgba(255,255,255,1)	;
	font-size:14px;
	color:#000000;
	width:100%;
	height:100%;
}
.css_dialog_modify div.caption{	
	border-radius:5px  5px 0px 0px ;
	border-style:solid;
	border-color:#FFF;
	border-width:2px;
	background:	rgba(255,0,0,1)	;
	font-size:14px;
	color:#FFFFFF;
	width:100%;
	height:40px;
	padding:5px;
	 background-image: linear-gradient(90deg,rgba(50,50,50,1) 5%, rgba(200,200,200,1) 50%,rgba(50,50,50,1) 100%);	
}
.css_dialog_modify div.client{	
	position:absolute;
	width:100%;
	top:41px;
	bottom:0;
	overflow-y:auto;
}
.css_dialog_modify div.close{	
position:absolute;
text-align:center;
top:5px;
left:100%;
width:30px;
height:30px;
margin-left:-40px;
border-style:solid;
border-color:#5C0303;
border-width:2px;
cursor:pointer;
background-image: linear-gradient(135deg,rgba(200,200,200,1) 5%, rgba(191,31,55,1) 50%);	
}
.css_table_add{
	border-collapse: collapse !important;		
}
.css_table_add th{	
	border-style:solid;
	border-color:#CCC;
	border-width:2px;		
	font-size:1.2em;	
	color:#FFF;
	background:#999;
}
.css_table_add td{	
		
	border-style:solid;
	border-color:#CCC;
	border-width:1px;	
	font-size:1em;	
	padding:3px;
	/*background:#FFF;*/

}
.css_table_add input{
	border-radius:5px;
	border-style:solid;
	border-color:#CCC;
	border-width:1px;	
	font-size:1em;	
	padding:3px;
	color:rgb(150,150,150);	
}
.css_table_add input:focus{
	border-radius:5px;
    border:2px solid #F58507 !important;
    box-shadow:0 1px 2px rgba(0, 0, 0, 0.3) inset !important;
    outline: none !important;	
	font-size:1em;		 
	padding:3px;
	color:#0373F9;		
}
.main_box{
	width:100%;
	border-radius:10px;
	background:#FFFFFF;
	padding:5px;
}
.main_menu{
    border:0px solid rgb(192,192,192);
	border-bottom-width:2px;
	padding:5px;
	text-align:right;
/*	background-image: linear-gradient(180deg,rgba(199,230,242,1) 0%, rgba(4,146,201,1) 50%);	*/
	font-size:20px;
	width:100%;

	font-weight:bold;
}
.main_menu table{
	border-collapse: collapse !important;		
}
.main_menu span.menu1{
	text-align:center;
	padding:3px;
	cursor:pointer;
	height:50px;
	color:#1F1E1E;

}
.main_menu span.menu1:hover{
	text-align:center;
	padding:3px;
/*	background:#046a9b;*/
	color:#000000;

	 border:0px solid #000000;
	 border-bottom-width:2px;
	
}
.main_menu span.menu2{
	text-align:center;

	padding:3px;
	cursor:pointer;
	height:50px;
	 border:0px solid #F58507;
	 border-bottom-width:2px;
	 color:#000000;
	 
	/*background:#046a9b;*/
}

.main_menu table{
	padding:5px;
	color:#FFFFFF;
}
.menu_sub{
	position:absolute;
	top:0%;
	margin-top:10px;
	left:0px;

	text-align:center;	
	width:200px;	
	z-index:1000;	

}
.menu_sub div{
	border-radius:3px;
	background:rgba(4,106,155,0.99);
	text-align:left;
	padding:3px;
	height:40px;		
}
.menu_sub div:hover{
	border-radius:3px;
	background:rgba(1,16,163,0.99);
	text-align:left;
	padding:3px;
	height:40px;		
}

.ourproducts_box{
	border-radius:10px;
    border:2px solid #adadad !important;		
	font-size:14px;
	width:100%;	
	color:#142E80;
}
.ourproducts_box div.t1{
	position:absolute;
	left:2px;
	top:-2px;
	width:98%;
	border-radius:5px;
	background:rgba(255,255,255,0.2);
	height:25px;
	
}
.ourproducts_box div.t2{
	position:absolute;
	left:15px;
	top:10px;
}
	
.ourproducts_box td.row1{
	border-radius:6px 6px  0px 0px;
	background-image: linear-gradient(180deg,rgba(9,138,226,1) 0%, rgba(10,214,255,1) 50%);	
	padding:5px;
	color:#FFFFFF;
	height:50px;
	font-size:16px;
	font-weight:bold;
}
.ourproducts_box td.row2 li.normal{
	 list-style-style:inside;
  	color: blue;
	cursor:pointer;
	}
.ourproducts_box td.row2 li.normal:hover{
	 list-style-style:inside;
  	color: blue;
	cursor:pointer;
	background:#F4E69D;
	}
.ourproducts_box td.row2 li.active{
	 list-style-style:inside;
  	color: blue;
	cursor:pointer;
	background:#F4E69D;
	}

.box_loading{
	position:absolute;
	left:50%;
	top:50%;
	margin-left:-100px;
	margin-top:-100px;
}
.box_loading_layout{
	border-style:solid;
	border-color:#CCC;
	border-width:1px;	
	
}
.report01{
	font-size:14;
}
.report01 img{
	border-radius:5px;
    border:3px solid rgb(200,200,200) !important;
    box-shadow:1px 1px 4px rgba(192, 192, 192, 1) ;
    display: block;
   margin-left: auto;
   margin-right: auto;	
   padding :5px 5px 5px 5px ;
   background:#FFFFFF;
}
.report01 img.v2{
	border-radius:5px;
    border:1px solid rgb(200,200,200) !important;
    box-shadow:1px 1px 4px rgba(192, 192, 192, 1) ;
    display: block;
   margin-left: auto;
   margin-right: auto;	
   padding :5px 5px 5px 5px ;
   background:#FFFFFF;
}

.report01 img.right{    
	float:right; 
	margin : 15px;
}
.report01 img.left{    
	float:left; 
	margin : 15px;
}
.report01  font.band{
	color:#0000FF;
}
.report01  font.model{
	color:#0000FF;
}

.report01  font.header{
		font-size:16;
		color:#000000;
}

.caption_top{
	background:url(../img/caption_bg01.jpg);
	background-repeat: no-repeat;
	background-size: cover;
}
.css_contact{
	border-radius:5px;
    border:1px  dashed #CCC !important;
    box-shadow:1px 1px 4px rgba(192, 192, 192, 1) ;
    display: block;
	padding :5px 5px 5px 5px ;
	background:rgba(255,255,255,0.8);
}
.css_contact span{
	font-weight:bold;	
	color:#FC1216;
}
.css_contact font.v1{
	font-weight:bold;	
	font-size:20px;
	color:rgb(130,130,130);
}
.css_contact font.v2{
	font-weight:bold;	
	font-size:22px;
	color:#01b4bf;
}

.css_band{
	color:#0000FF;
	font-size:28px;	
}
.css_model{
	color:#0000FF;
	font-size:28px;	
}

.css_head01{
	font-size:18px;
}