body{
	background-color:#fdfdfd;
	color: #023D3F;
}
.gate {
  width: 20px;
  height: 20px;
  background-color: #023D3F;
border-radius:50px;
border:2px solid #f5f5f5;
text-aling:center;


	position:absolute;
	z-index:4;
	display:block;
}

.loading_data {
  width: 30px;
  height: 30px;
  background-color: #0B4D61;

  margin: 100px auto;
  -webkit-animation: rotateplane 1.2s infinite ease-in-out;
  animation: rotateplane 1.2s infinite ease-in-out;
}

@-webkit-keyframes rotateplane {
  0% { -webkit-transform: perspective(120px) }
  50% { -webkit-transform: perspective(120px) rotateY(180deg) }
  100% { -webkit-transform: perspective(120px) rotateY(180deg)  rotateX(180deg) }
}

@keyframes rotateplane {
  0% { 
    transform: perspective(120px) rotateX(0deg) rotateY(0deg);
    -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg) 
  } 50% { 
    transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
    -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg) 
  } 100% { 
    transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
    -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
  }
}

h1{
	font-size:4em;
}
#img_map{
	position:relative;
	margin:auto;
	z-index:1;
	width:1300px;

}
a:link {
	color:#023D3F;
		text-decoration:none;
}
a:link i{
	color:#023D3F;
		text-decoration:none;
	
}
i{
	color:#023D3F;
		text-decoration:none;
	
}

.text_red {
	color:red;
}
.box {
	position:absolute;
	background-color:#f5f5f5;
	border: 1px solid #ccc;
	box-shadow: 0 0 3px #ccc;
	border-radius:3px;
	z-index:3;
	font-size:0.8em;
	padding:3px;
	display: table-cell;
	text-decoration:none;
	   line-height: 100%;
}
.box:hover{
	position:absolute;
	background-color:#f5f5f5;
	border: 2px solid #027a7e;
	box-shadow: 0 0 3px #ccc;
	border-radius:3px;
	z-index:3;
	font-size:0.8em;
	padding:3px;
	display: table-cell;
	text-decoration:none;
	   line-height: 100%;
}
/*  status  tele */


.status{
	position:absolute;
	width:10px;
	height:10px;
	border-radius:50px;
	z-index:4;
	display:block;
	margin:1px;
	}

.status_red {
	width:10px;
	height:10px;
	border-radius:50px;
	z-index:3;
	display:block;
	margin:1px;

    -webkit-animation: status_red 1s infinite; 
    -webkit-animation-delay: 1s; 
    animation: status_red 1s infinite;
    animation-delay: 1s;
}


.status_brown {
	width:10px;
	height:10px;
	border-radius:50px;
	z-index:3;
	display:block;
		margin:1px;

    -webkit-animation: status_brown 1s infinite; /*Safari and Chrome*/
    -webkit-animation-delay: 1s; /*Safari and Chrome*/
    animation: status_brown 1s infinite;
    animation-delay: 1s;
}
.status_extra{
	width:15px;
	height:15px;
	border-radius:50px;
	z-index:3;
	display:block;
	margin:1px;
}
/*
span.status_blue {
	width:10px;
	height:10px;
	border-radius:50px;
	z-index:1;
	display:block;
		margin:1px;

    -webkit-animation: status_blue 0.5s infinite;
    -webkit-animation-delay: 0.5s;
    animation: status_blue 0.5s infinite;
    animation-delay: 0.5s;
}
span.status_green {
	width:10px;
	height:10px;
	border-radius:50px;
	z-index:1;
	display:block;
		margin:1px;

    -webkit-animation: status_green 0.5s infinite; 
    -webkit-animation-delay: 0.5s; 
    animation: status_green 0.5s infinite;
    animation-delay: 0.5s;
}

span.status_yellow {
	width:10px;
	height:10px;
	border-radius:50px;
	z-index:1;
	display:block;
		margin:1px;

    -webkit-animation: status_yellow 1s infinite; 
    -webkit-animation-delay: 1s; 
    animation: status_yellow 1s infinite;
    animation-delay: 1s;
}


span.status_gray {
	width:10px;
	height:10px;
	border-radius:50px;
	z-index:1;
	display:block;
		margin:1px;

    -webkit-animation: status_gray 1s infinite; //Safari and Chrome
    -webkit-animation-delay: 1s; Safari and Chrome
    animation: status_gray 1s infinite;
    animation-delay: 1s;
}
*/


/* Chrome, Safari, Opera */
@-webkit-keyframes status_red {
    0%   {	    background: none repeat scroll 0 0 #fff;
    border: 1px solid #fd7072;
    box-shadow: 1px 1px 1px #fd7072;}
    100% {	    background: none repeat scroll 0 0 #fb0004;
    border: 1px solid #fd7072;
    box-shadow: 1px 1px 3px #fd7072;}
}

/* Standard syntax */
@keyframes status_red {
    0%   {	    background: none repeat scroll 0 0 #fff;
    border: 1px solid #fd7072;
    box-shadow: 1px 1px 1px #fd7072;}
    100% {	    background: none repeat scroll 0 0 #fb0004;
    border: 1px solid #fd7072;
    box-shadow: 1px 1px 3px #fd7072;}
}
/* Chrome, Safari, Opera */
@-webkit-keyframes status_brown {
    0%   {	      background:#E9C5AC;
	border:1px solid #95470F;
	box-shadow: 1px 1px 1px #6C4343;}
    100% {	     background:#7E3602;
	border:1px solid #95470F;
	box-shadow: 1px 1px 3px #B26C39;}
}

/* Standard syntax */
@keyframes status_brown {
    0%   {	       background:#E9C5AC;
	border:1px solid #95470F;
	box-shadow: 1px 1px 1px #6C4343;}
    100% {	     background:#7E3602;
	border:1px solid #95470F;
	box-shadow: 1px 1px 3px #B26C39;}
}

/* 
 Chrome, Safari, Opera 
@-webkit-keyframes status_yellow {
    0%   {	background:#3C7E9D;
	border:1px solid #3C7E9D;
}
    100% {	background:yellow;
	border:1px solid #FAF9C6;
	box-shadow: 1px 1px 3px #FAF9C6;}
}
 Standard syntax 
@keyframes status_yellow {
    0%   {	background:#3C7E9D;
	border:1px solid #3C7E9D;
}
    100% {	background:yellow;
	border:1px solid #FAF9C6;
	box-shadow: 1px 1px 3px #FAF9C6;}
}Chrome, Safari, Opera 
@-webkit-keyframes status_green {
    0%   {	        background: none repeat scroll 0 0 #fff;
    border: 1px solid #75fa7b;
    box-shadow: 1px 1px 1px #3ffa48;}
    100% {	       background: none repeat scroll 0 0 #04f810;
    border: 1px solid #75fa7b;
    box-shadow: 1px 1px 3px #3ffa48;}
}

 Standard syntax 
@keyframes status_green {
    0%   {	        background: none repeat scroll 0 0 #fff;
    border: 1px solid #75fa7b;
    box-shadow: 1px 1px 1px #3ffa48;}
    100% {	       background: none repeat scroll 0 0 #04f810;
    border: 1px solid #75fa7b;
    box-shadow: 1px 1px 3px #3ffa48;}
}
 Chrome, Safari, Opera
@-webkit-keyframes status_blue {
    0%   {	       background: none repeat scroll 0 0 #fff;
    border: 1px solid #42cafc;
    box-shadow: 1px 1px 1px #32b4f5;}
    100% {	      background: none repeat scroll 0 0 #059ff8;
    border: 1px solid #42cafc;
    box-shadow: 1px 1px 3px #32b4f5;}
}

 Standard syntax
@keyframes status_blue {
    0%   {	       background: none repeat scroll 0 0 #fff;
    border: 1px solid #42cafc;
    box-shadow: 1px 1px 1px #32b4f5;}
    100% {	      background: none repeat scroll 0 0 #059ff8;
    border: 1px solid #42cafc;
    box-shadow: 1px 1px 3px #32b4f5;}
}

 Chrome, Safari, Opera
@-webkit-keyframes status_gray {
    0%   {	     background:#fff;
	border:1px solid #C6CED4;
	box-shadow: 1px 1px 1px #C6CED4;}
    100% {	    background:gray;
	border:1px solid #C6CED4;
	box-shadow: 1px 1px 3px #C6CED4;}
}

 Standard syntax 
@keyframes status_gray {
    0%   {	      background:#fff;
	border:1px solid #C6CED4;
	box-shadow: 1px 1px 1px #C6CED4;}
    100% {	     background:gray;
	border:1px solid #C6CED4;
	box-shadow: 1px 1px 3px #C6CED4;}
}
*/

.status_blue{
    background: none repeat scroll 0 0 #059ff8;
    border: 1px solid #42cafc;
    box-shadow: 1px 1px 3px #32b4f5;
}

.status_green{

    background: none repeat scroll 0 0 #04f810;
    border: 1px solid #75fa7b;
    box-shadow: 1px 1px 3px #3ffa48;
}

.status_yellow{
	background:yellow;
	border:1px solid #FAF9C6;
	box-shadow: 1px 1px 3px #FAF9C6;
}

.status_gray{
	background:gray;
	border:1px solid #C6CED4;
	box-shadow: 1px 1px 3px #C6CED4;
}
/*
.status_red{
    background: none repeat scroll 0 0 #fb0004;
    border: 1px solid #fd7072;
    box-shadow: 1px 1px 3px #fd7072;
}

.status_brown{
	background:#660000;
	border:1px solid #C3696D;
	box-shadow: 1px 1px 3px #C3696D;
}

*/

/* end  */
.previous,.nextday,.fa-print {
	cursor:pointer;
}

.level-warn ul {
    list-style: none outside none;

    text-align: left;
    z-index: 600;
}
.level-warn ul li {
    float: left;
    margin-left: 8px;
}
.powered {
    float: right;
    padding-right: 10px;
    text-align: right;
    z-index: 600;
}


/* test */
	.warn_box_test{
	        left: 294px;
    top: 153px;
		z-index: 600;
	}
	

    .gate_data_1{  
	       left: 182px;
    top: 389px;
	}
	.gate_data_2{  
	       left: 182px;
		top: 601px;
	}
	.gate_data_3{  
	       left: 182px;
		top: 815px;
	}
	
	.gate_data_4{  
	       left: 182px;
		top: 1287px;
	}
	.gate_data_5{  
	       left: 182px;
		top: 1365px;
	}
	.gate_data_6{  
	       left: 182px;
		top: 1440px;
	}
	.gate_data_7{  
  left: 248px;
    top: 1489px;
	}
	.gate_data_8{  
	      left: 385px;
    top: 899px;
	}
	.gate_data_9{  
	       left: 378px;
    top: 386px;
	}
	.gate_data_10{  
    left: 208px;
    top: 930px;
	}


/*  สถานีที่ไม่มีข้อมูล  */
	.gate_data_1794{  
		left: 380px;
		top: 417px;
	}
	.ridtele_1145{  
		left: 308px;
		top: 86px;
	}
	.warn_ridtele_1145{  
       left: 289px;
		top: 94px;
	}
	.ridtele_1146{  
		left: 443px;
		top: 351px;
	}
	.warn_ridtele_1146{  
		left: 444px;
		top: 389px;
	}
	.ridtele_1148{  
		left: 82px;
		top: 707px;
	}
	.warn_ridtele_1148{  
		left: 211px;
		top: 715px;
	}
	
	.data_blank_5{  
		left: 250px;
		top: 690px;
	}
	.warn_data_blank_5{  
      left: 251px;
    top: 668px;
	}
	.data_blank_6 {
		left: 348px;
		top: 626px;
	}
	.warn_data_blank_6 {
		left: 350px;
		top: 668px;
	}

.ridtele_484 {
    left: 348px;
    top: 625px;
}
.warn_ridtele_484 {
    left: 368px;
    top: 667px;
}
.ridtele_1143 {
    left: 539px;
    top: 626px;
}

.warn_ridtele_1143 {
    left: 519px;
    top: 637px;
}
.ridtele_1142 {
    left: 619px;
    top: 690px;
}
.warn_ridtele_1142 {
    left: 619px;
    top: 668px;
}
.ridtele_1144 {
      left: 93px;
    top: 998px;
}
.warn_ridtele_1144 {
    left: 211px;
	top: 1008px;
}
.catchment_data_732{  
      left: 825px;
    top: 1423px;
} 
.warn_catchment_data_732{
    left: 841px;
    top: 1492px;
}
	
.catchment_data_395{  
	left: 1146px;
	top: 558px;
}
.warn_catchment_data_395{  
    left: 1238px;
    top: 625px;
}
/*  /  สถานีที่ไม่มีข้อมูล  */	
	
	
    .dam_data_38{  
	      left: 804px;
    top: 322px;
	}
	.warn_dam_data_38{
	       left: 806px;
    top: 390px;
	}
    .dam_data_36{  
        left: 492px;
    top: 834px;
	} 
	.warn_dam_data_36{
    left: 507px;
    top: 902px;
	}	
    .gate_data_302{  
	    left: 117px;
    top: 1387px;
	}
	.warn_gate_data_302{
	    left: 174px;
		top: 1376px;
	}	
    .gate_data_460{  
     left: 390px;
    top: 928px;
	}
	.warn_gate_data_460{
    left: 392px;
    top: 902px;
	}	
    .gate_data_462{  
    left: 252px;
    top: 1518px;
	}
	.warn_gate_data_462{
    left: 249px;
    top: 1492px;
	}	
    .gate_data_488{  
    left: 236px;
    top: 931px;
	}
	.warn_gate_data_488{
    left: 211px;
    top: 933px;
	}	
    .gate_data_342{  
       left: 77px;
    top: 411px;
	} 
	.warn_gate_data_342{
	    left: 172px;
		top: 401px;
	}	
    .gate_data_340{  
	        left: 138px;
    top: 624px;
	}
	.warn_gate_data_340{
	    left: 180px;
		top: 612px;
	}	
    .gate_data_275{  
	    left: 100px;
    top: 836px;
	}
	.warn_gate_data_275{
	    left: 169px;
		top: 825px;
	}	
    .gate_data_301{  
        left: 116px;
    top: 1309px;
	}
	.warn_gate_data_301{
	    left: 181px;
		top: 1299px;
	}	
    .gate_data_321{  
	  left: 120px;
    top: 1462px;
	}
	.warn_gate_data_321{
	    left: 182px;
		top: 1451px;
	}	
    .ridtele_497{  
       left: 929px;
		top: 519px;
	}
	.warn_ridtele_497{
	       left: 930px;
    top: 554px;
	}	
    .ridtele_494{  
        left: 931px;
    top: 575px;
	}
	.warn_ridtele_494{
    left: 929px;
    top: 610px;
	}	
    .ridtele_476{  
	       left: 682px;
    top: 413px;
	} 
	.warn_ridtele_476{
    left: 679px;
    top: 391px;
	}	
    .ridtele_1058{  
    left: 591px;
    top: 920px;
	}
	.warn_ridtele_1058{
	       left: 589px;
    top: 902px;
	}	
    .ridtele_592{  
    left: 1028px;
    top: 414px;
	}
	.warn_ridtele_592{
	      left: 1025px;
    top: 391px;
	}	
    .ridtele_588{  
	      left: 1190px;
    top: 807px;
	}
	.warn_ridtele_588{
	     left: 1187px;
    top: 788px;
	}	
    .ridtele_591{  
	       left: 309px;
    top: 173px;
	}
	.warn_ridtele_591{
    left: 289px;
    top: 174px;
	}	
    .ridtele_92{  
	    left: 1011px;
    top: 630px;
	}
	.warn_ridtele_92{
	      left: 1013px;
    top: 669px;
	}	
    .ridtele_93{  
	       left: 771px;
    top: 690px;
	}
	.warn_ridtele_93{
	       left: 771px;
    top: 668px;
	}	
    .ridtele_94{  
	     left: 682px;
    top: 1456px;
	}
	.warn_ridtele_94{
    left: 682px;
    top: 1492px;
	}	
    .ridtele_91{  
    left: 918px;
    top: 808px;
	} 
	.warn_ridtele_91{
	    
   left: 916px;
    top: 790px;
	}

.ridtele_1147{
    left: 259px;
    top: 691px;
}
.warn_ridtele_1147{
    left: 275px;
    top: 667px;
}


    .haiitele_1180{  
    left: 911px;
    top: 690px;
	}
	.warn_haiitele_1180{
    left: 908px;
    top: 667px;
	}	
    .haiitele_1181{  
    left: 967px;
    top: 753px;
	}
	.warn_haiitele_1181{
    left: 964px;
    top: 789px;
	}	
    .haiitele_249{  
    left: 514px;
    top: 154px;
    width: 86px;
	} 
	.warn_haiitele_249{
	     left: 494px;
    top: 167px;
	}	
    .haiitele_251{  
    left: 632px;
    top: 161px;
	}
	.warn_haiitele_251{
	      left: 613px;
    top: 168px;
	}	
    .haiitele_256{  
	       left: 645px;
    top: 530px;
	}
	.warn_haiitele_256{
    left: 644px;
    top: 509px;
	}	
    .haiitele_948{  
    left: 682px;
    top: 627px;
	}
	.warn_haiitele_948{
    left: 681px;
    top: 667px;
	}	
    .haiitele_1175{  
    left: 236px;
    top: 436px;
	}
	.warn_haiitele_1175{
	      left: 211px;
    top: 442px;
	}	
    .haiitele_255{  
    left: 622px;
    top: 351px;
	}
	.warn_haiitele_255{
	      left: 622px;
    top: 391px;
	}	
    .haiitele_254{  
    left: 310px;
    top: 276px;
	}
	.warn_haiitele_254{
   left: 288px;
    top: 283px;
	}	
    .haiitele_261{  
    left: 235px;
    top: 572px;
	}
	.warn_haiitele_261{
    left: 211px;
    top: 579px;
	}	
    .haiitele_248{  
    left: 309px;
    top: 122px;
	}
	.warn_haiitele_248{
	       left: 289px;
    top: 128px;
	}	
    .haiitele_253{  
	    left: 324px;
    top: 210px;
    width: 95px; 
	}
	.warn_haiitele_253{
    left: 426px;
    top: 226px;
	}	
    .haiitele_260{  
    left: 94px;
    top: 341px;
	}
	.warn_haiitele_260{
    left: 215px;
    top: 349px;
	}	
    .haiitele_1150{  
     left: 301px;
    top: 866px;
	}
	.warn_haiitele_1150{
    left: 313px;
    top: 902px;
	}	
    .haiitele_1149{  
    left: 236px;
    top: 796px;
	} 
	.warn_haiitele_1149 {
   left: 211px;
    top: 802px;
	}	
	.haiitele_926 {
		    left: 236px;
    top: 1405px;
	}
	.warn_haiitele_926 {
		left: 210px;
		top: 1411px;
	}	
	
    .haiitele_927{  
    left: 236px;
    top: 1330px;
	}
	.warn_haiitele_927{
    left: 211px;
    top: 1335px;
	}	
    .haiitele_1145{  
    left: 829px;
    top: 505px;
	}
	.warn_haiitele_1145{
    left: 809px;
    top: 512px;
	}	
    .haiitele_949{     
    left: 470px;
    top: 690px;
	}  
	.warn_haiitele_949{
    left: 467px;
    top: 667px;
	}
	
/* style footer */
.level-warn ul {
    list-style: none outside none;
    position: relative;
    text-align: left;
    z-index: 600;
}
.level-warn ul li {
    float: left;

}
.level-warn ul li p {
    margin-left: 18px;
    line-height: 1px;
    line-height: 11px;
}
.text-door{
    color: #fff;
    font-weight: bold;
    margin-top: -4px;
    padding: 2px 0 0 3px;
}