html, body { height: 100%; font-family: Arial; line-height: 1.4; margin: 0; padding: 0; }
h1  { font-size: 40px; font-family: Arial; font-weight: bold; max-width: 950px; padding:10px 0 0 50px; }
h2  { font-size: 32px; font-family: Arial; font-weight: bold; max-width: 950px; padding:0 0 0 50px; }
h3  { font-size: 24px; font-family: Arial; font-weight: bold; max-width: 950px; padding:0 0 0 50px; }
a { text-decoration: none; color: inherit; }

nav { /* text-transform: uppercase;	*/ height: 40px; width: 100%; position: relative;}
nav ul {}
nav li {display: inline; float: left; width: 100%;}
nav a {display:inline-block; text-align: left; text-decoration: none; line-height: 30px; }
nav li:last-child a {border-right: 0;}
nav a:hover, nav a:active {background: rgba(255, 255, 255, 0.2); }
nav a#pull {display: none;}


acronym { text-decoration: none; }
p   { font-size: 16px; font-family: Arial; text-align: justify; text-indent: 50px; max-width: 950px; }
table { border-spacing: 0px; border-collapse: collapse; }

.p14 { font-size: 14px; font-family: Arial; }
.p16 { font-size: 16px; font-family: Arial; }
.p18 { font-size: 18px; font-family: Arial; }

.bigdigits { position: absolute; margin: 70px auto auto 970px; line-height: 34px; }
.left { float: left; }
.right { float: right; }
.tright { text-align: right; }
.bold { font-weight: bold; }
.button { padding: 30px 10px 10px 30px; }
.center {text-align: center; }
.dstr { padding: 0 0 0 15px; }
.div_leg { width: 40px; height: 3px; display: inline-block; margin: 0 5px 3px 25px; }
.div_leg1 { width: 16px; height: 3px; display: inline-block; margin-right: 7px; margin-bottom: 3px; }
.div_leg2 { width: 3px; height: 3px; display: inline-block; margin-right: 3px; margin-bottom: 3px; }
.emo { position: absolute; margin: -23px 0 0 -5px; font-size: 110px;  }
.emo2 { position: absolute; margin: -10px 0 0 8px; font-size: 90px;  }
.emo3 { position: absolute; margin: -14px 0 0 71px; font-size: 90px;  }
.emo4 { position: absolute; margin: -10px auto auto 1235px; font-size: 303px; opacity: 0.1; }
.gray { color: #1a7fc7; }
.hand { cursor: pointer; }
.hr { background-color: white; border: none; margin: -2px 52px 0 0; height: 2px; }
.log { width: 860px; height: auto; float: right; white-space: pre-wrap; overflow-y: auto; border: 1px solid #c3c3c3; padding: 10px; }
.logcontrol { vertical-align: top; }
.mart1 { margin-top: 1px; }
.mar25 { margin-left: 25px; }
.mar35 { margin-left: 35px; }
.mar55 { margin-left: 55px; }
.mar150 { margin-left: 150px; }
.max150 { max-height: 150px; }
.max1050 { max-width: 1050px; }
.pad10 { padding: 0 0 0 10px; }
.pad15 { padding: 0 0 0 15px; }
.pad30 { padding: 0 0 0 30px; }
.pad35 { padding: 0 0 0 35px; }
.pad40 { padding: 0 0 0 40px; }
.pad50 { padding: 0 0 0 50px; }
.pad60 { padding: 0 0 0 60px; }
.padb60 { padding-bottom: 60px; }
.padr20 { padding: 0 20px 0 0; }
.pada20 { padding: 0 20px 0 20px; }
.paddst { padding: 0 0 0 20px; }
.offmenu { display: none; visibility: hidden; }
.offmenu2 { display: none; visibility: collapse; }
.onmenu2 { display: block; visibility: visible; }
.opacity0 { opacity: 0; }
.pretendename { font-size: 28px; }
.regionline { display: inline; }
.w70 { width: 70px; }
.white { color: #ffffff; }
.white_back { background-color: #ffffff; }
.white_red_back { background-color: #f0d0d0; }
.text_indent0 { text-indent: 0; }


.vtop { vertical-align: top; }
.row { display: flex; flex-direction: row; }
.left_pointer { margin: -13px 0 0 -46px; position: absolute; font-size: xx-large; }
.right_pointer { margin: -13px 0 0 37px; position: absolute; font-size: xx-large; }
.xx { margin: -29px 0 0 6px; position: absolute; font-size: xx-large; }

.table1 { border-collapse: collapse }
.table1 td { border: 1px solid #ddd; padding: 5px; vertical-align: top; min-height: 42px; height: 42px; }

.table2 { border-collapse: collapse; margin: 0 0 0 15px; padding: 0 0 0 15px; border: 2px solid lightgray; user-select: none; }
.table2 td { padding-top: 0px; padding-bottom: 0px; font-size: 18px; font-family: Arial; }
.table2 td input { width: 75px; font-size: 16px; }

.table22 table { border-collapse: collapse; margin: 0 0 0 0px; table-layout: fixed; max-width: 1050px; font-size: 14px; font-family: Arial; }
.table22 table th { border: 1px solid #ddd; padding: 4px 12px 4px 12px; vertical-align: middle; min-height: 32px; height: 32px; font-weight: bold; }
.table22 table td { border: 1px solid #ddd; padding: 4px 12px 4px 12px; vertical-align: middle; min-height: 20px; height: 20px; }

.table_index table { border-collapse: collapse; margin: 0 0 0 20px; table-layout: fixed; }
.table_index table th { border: 1px solid #aaa; padding: 8px 10px 8px 10px; vertical-align: middle; min-height: 32px; height: 32px; font-size: 20px; font-family: Arial; font-weight: bold; }
.table_index table td { border: 1px solid #aaa; padding: 8px 0 8px 10px; vertical-align: middle; min-height: 32px; height: 32px; font-size: 20px; font-family: Arial; font-weight: bold; }
.table_index table td div { max-width: 80px; overflow: hidden; white-space: nowrap; }

.td_decor { text-decoration-style: solid; text-decoration-line: underline; text-decoration-thickness: 3px; }

.button_circle { background-color: #f0f0f0; padding: 6px; margin: 0px 6px; display: flex; flex-direction: row; justify-content: center; align-items: center; border-radius: 50%; border: 1px solid #aaa; max-width: 10px; max-height: 10px; font-size: 15px; font-weight: bold; }
.button_circle01 { background-color: #f0f0f0; padding: 6px; margin: 0px 1px; display: flex; flex-direction: row; justify-content: center; align-items: center; border-radius: 50%; border: 1px solid #aaa; max-width: 10px; max-height: 10px; font-size: 15px; font-weight: bold; }
.button_ellipse { background-color: #f0f0f0; padding: 0px 15px; margin: 0 6px; display: inline-block; border-radius: 1000px; border: 1px solid #aaa; text-align: center; font-size: 14px; font-weight: bold; }

.gis_parent { position: relative; top: 0; left: 0; }
.gis_image1 { position: relative; top: 0; left: 0; border: 0; width: 960px; }
.gis_image2 { position: absolute; top: 0; left: 0; border: 0; width: 960px; }



.all {
  float: left;
}  


.relative { position: relative; }
.gr_canvas { position: absolute; width: 950px; top: 0; left: 0; border: 0; }
.gr_log { position: absolute; top: 0; left: 0; border: 0; }
.empty_canvas { position: relative; width: 950px; top: 0; left: 0; border: 0; }

.left_column {
  display: block;
  float: left;
  height: 100%; 
  width: 338px;
  background: #1a7fc7;
  position: fixed;
  height: 100%;
  font-size: 16px;
  line-height: 1.4;
  color: #ffffff;
  box-sizing: border-box;  
}
.left_column a {display:inline-block; text-align: left; text-decoration: none; line-height: 30px; padding: 0 5px 0 5px;}

.content {
  display: block;
  height: 100%; 
  background: #fff;
  font-size: 16px;
  line-height: 1.4;
  margin-left: 380px;
  margin-right: 20px;
  box-sizing: border-box;  
}

#left_menu {
  position: relative; 
  display: block; 
  overflow-y: scroll; 
  overflow-x: hidden; 
  margin-top: 38px;
  padding-left: 30px;
}


.imgh { 
  width: 100%; 
  position: relative; 
  display: block;
  top: 0; 
}


.input_range {
display: inline-block;
width: 20px;
height: 350px;
padding: 0;
}

.input_range input {
appearance: none;
background: lightblue;
cursor: pointer;
border-radius: 20px;
border: 1px solid black;
width: 320px;
height: 20px;
margin: 0;
transform-origin: 165px 165px;
transform: rotate(-90deg);
}
input[type=range] { -webkit-appearance: none; }


/*------------------------------------ media ------------------------------------*/


@media all and (max-width: 1420px) { .gr_canvas { width: 950px; } .empty_canvas{ width: 950px; } .gis_image1 { width: 960px; } .gis_image2 { width: 960px; } }
@media all and (max-width: 1370px) { .gr_canvas { width: 900px; } .empty_canvas{ width: 900px; } .gis_image1 { width: 900px; } .gis_image2 { width: 900px; } }
@media all and (max-width: 1320px) { .gr_canvas { width: 850px; } .empty_canvas{ width: 850px; } .gis_image1 { width: 850px; } .gis_image2 { width: 850px; } }
@media all and (max-width: 1270px) { .gr_canvas { width: 800px; } .empty_canvas{ width: 800px; } .gis_image1 { width: 800px; } .gis_image2 { width: 800px; } }
@media all and (max-width: 1220px) { .gr_canvas { width: 750px; } .empty_canvas{ width: 750px; } .gis_image1 { width: 750px; } .gis_image2 { width: 750px; } }
@media all and (max-width: 1170px) { .gr_canvas { width: 700px; } .empty_canvas{ width: 700px; } .gis_image1 { width: 700px; } .gis_image2 { width: 700px; } }
@media all and (max-width: 1120px) { .gr_canvas { width: 650px; } .empty_canvas{ width: 650px; } .gis_image1 { width: 650px; } .gis_image2 { width: 650px; } }



@media all and (max-width: 1090px)  {

.all { float: none; }  
.left_column { width: 100%; height: 405px; float: none; z-index: 50; position: inherit; }
.imgh { width: 235px; padding-left: 50px; }
.content { margin-left: 20px; }

.gr_canvas { width: 960px; }
.empty_canvas { width: 960px; }
.p16 { font-size: 35px; }

}


@media all and (max-width: 1070px) { .gr_canvas { width: 950px; } .empty_canvas{ width: 950px; } .p16 { font-size: 34px; } .gis_image1 { width: 950px; } .gis_image2 { width: 950px; } }
@media all and (max-width: 1020px) { .gr_canvas { width: 900px; } .empty_canvas{ width: 900px; } .p16 { font-size: 33px; } .gis_image1 { width: 900px; } .gis_image2 { width: 900px; } }
@media all and (max-width: 970px)  { .gr_canvas { width: 850px; } .empty_canvas{ width: 850px; } .p16 { font-size: 32px; } .gis_image1 { width: 850px; } .gis_image2 { width: 850px; } }
@media all and (max-width: 920px)  { .gr_canvas { width: 800px; } .empty_canvas{ width: 800px; } .p16 { font-size: 31px; } .gis_image1 { width: 800px; } .gis_image2 { width: 800px; } }
@media all and (max-width: 870px)  { .gr_canvas { width: 750px; } .empty_canvas{ width: 750px; } .p16 { font-size: 30px; } .gis_image1 { width: 750px; } .gis_image2 { width: 750px; } }
@media all and (max-width: 820px)  { .gr_canvas { width: 700px; } .empty_canvas{ width: 700px; } .p16 { font-size: 29px; } .gis_image1 { width: 700px; } .gis_image2 { width: 700px; } }
@media all and (max-width: 770px)  { .gr_canvas { width: 650px; } .empty_canvas{ width: 650px; } .p16 { font-size: 28px; } .gis_image1 { width: 650px; } .gis_image2 { width: 650px; } }
@media all and (max-width: 720px)  { .gr_canvas { width: 600px; } .empty_canvas{ width: 600px; } .p16 { font-size: 27px; } .gis_image1 { width: 600px; } .gis_image2 { width: 600px; } }
@media all and (max-width: 670px)  { .gr_canvas { width: 550px; } .empty_canvas{ width: 550px; } .p16 { font-size: 26px; } .gis_image1 { width: 550px; } .gis_image2 { width: 550px; } }
@media all and (max-width: 620px)  { .gr_canvas { width: 500px; } .empty_canvas{ width: 500px; } .p16 { font-size: 25px; } .gis_image1 { width: 500px; } .gis_image2 { width: 500px; } }
@media all and (max-width: 570px)  { .gr_canvas { width: 450px; } .empty_canvas{ width: 450px; } .p16 { font-size: 24px; } .gis_image1 { width: 450px; } .gis_image2 { width: 450px; } }
@media all and (max-width: 520px)  { .gr_canvas { width: 400px; } .empty_canvas{ width: 400px; } .p16 { font-size: 23px; } .gis_image1 { width: 400px; } .gis_image2 { width: 400px; } }
@media all and (max-width: 470px)  { .gr_canvas { width: 350px; } .empty_canvas{ width: 350px; } .p16 { font-size: 22px; } .gis_image1 { width: 350px; } .gis_image2 { width: 350px; } }