/*
@font-face {
  font-family: 'standard';
  src: url(../fonts/simhei.ttf);
}
*/

body {
  overflow: hidden; 
  font-family: Arial, Helvetica, san-serif;
}

input::placeholder,
textarea::placeholder {
  color: #F0F0F0;
}

input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
  color: #F0F0F0;
}
input:-moz-placeholder,
textarea:-moz-placeholder {
  color: #F0F0F0;
}
input::-moz-placeholder,
textarea::-moz-placeholder {
  color: #F0F0F0;
}
input:-ms-input-placeholder,
textarea:-ms-input-placeholder {
  color: #F0F0F0;
}

:root {
  --main-color1: #EEFFEE;
  --main-color2: #11BB11;
  --main-color3: #118811;
  --main-color4: #116611;
}

.navbar-offset { margin-top: 50px; }
#map { position: absolute; top: 30px; bottom: 0px; left: 0px; right: 0px; }
#map .ol-zoom { font-size: 1.2em; }

.infoboxstyle{
  margin-top: 30px;
  height:calc(100vh - 30px);
  background-color: #FFFFFF; 
}


.zoom-top-opened-sidebar { margin-top: 5px; }
.zoom-top-collapsed { margin-top: 45px; }

.mini-submenu{
  display:none;  
  background-color: rgba(255, 255, 255, 0.46);
  border: 1px solid rgba(0, 0, 0, 0.9);
  border-radius: 4px;
  padding: 9px;  
  /*position: relative;*/
  width: 42px;
  text-align: center;
}

.topspacer{
  height: 44px;
}

.mini-submenu-left {
  position: absolute;
  top: 60px;
  left: .5em;
  z-index: 40;
}

#map { z-index: 35; }

.sidebar { z-index: 45; }

.main-row { position: relative; top: 0; }

.mini-submenu:hover{
  cursor: pointer;
}

.vscroll{
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

.slide-submenu{
  background: rgba(0, 0, 0, 0.45);
  display: inline-block;
  padding: 0 8px;
  border-radius: 4px;
  cursor: pointer;
}

.headbar{
  background: rgba(0, 128, 0, 1);
}

.tablefont{
  font-size: 14pt;
}

.tranfont{
  font-size: 14pt;
}


.menufont{
  font-size: 20pt;
  color: #FFFFFF;
}

.ppform{
  font-size: 11pt;
}

.wfont{
  color:  #FFFFFF !important;
  font-size: 16pt;
}



.mapbutton{
  background-color: #FFFFFF;
  width: 35px;
  height: 35px;
  border-radius: 5px;
  border: 1px solid #C0C0C0;
  padding-left: 2px;
  padding-top: 3px;
  cursor: pointer;
}

.mapbutton:hover{
  background-color: #F0F0F0;
}

.buttonbox{
  background-color: #FFFFFF;
  width: 39px;
  height: 39px;
  border-radius: 5px;
  border: 1px solid #C0C0C0;
  padding-left: 4px;
  padding-top: -1px;
  cursor: pointer;
}

.buttonbox:hover{
  background-color: #F0F0F0;
}

.inputbox{
  font-size: 12pt;
}

.sidemenu{
  position: absolute;
  width: 340px;
  height: 100vh;
  left: -340px;
  top: 50px;
  background-color: #116611;
  z-index: 1000;
}

.pcmenutitle{
  cursor: pointer;
  padding-left: 20px; 
  padding-right: 20px; 
}

.pcmenutitle:hover{
  background-color: #11BB11;
}

.pcmenu{
  color:  #FFFFFF !important;
  font-size: 14pt;
  padding-top: 5px;
  padding-bottom: 5px;
}

.pcmenuicon{
  width:25px;
  height:25px;
}

.poplabel{
  cursor: pointer;
  font-size: 14px;
  width: 80%;
  padding: 5px;
  text-align: center;
}

.poplabel:hover{
  border-radius: 10px;
  border: 1px solid #118811;
  background-color: #FFEECC;
}

.fontsize1{
  font-size: 12pt;
}

.fontsize2{
  font-size: 15pt;
}

.fontsize3{
  font-size: 18pt;
}

.fontsize20{
  font-size: 20pt;
}


.fontcolorg{
  color:#A0A0A0;
}

.fontcolor1{
  color:#EEFFEE;
}

.fontcolor2{
  color:#11BB11;
}

.fontcolor3{
  color:#118811 !important;
}

.fontcolor4{
  color:#116611 !important;
}

.buttoncolorb{
  background-color: #1166AA;
  border: 1px solid #FFFFFF;
  color: #FFFFFF;
}

.buttoncolorg{
  background-color: #118812;
  border: 1px solid #FFFFFF;
  color: #FFFFFF;
}

.buttoncolorc{
  background-color: #0055b8;
  border: 1px solid #FFFFFF;
  color: #FFFFFF;
}

.buttoncolorc2{
  background-color: #11BB11;
  border: 1px solid #FFFFFF;
  color: #FFFFFF;
}

.font12{
  font-size: 14px !important;
}

.font13{
  font-size: 13px !important;
}

.font16{
  font-size: 16px !important;
}

.font18{
  font-size: 18px !important;
}

.font20{
  font-size: 20px !important;
}

.font24{
  font-size: 24px !important;
}


.buttoncolorcdisable{
  cursor: default;
  background-color: #A0A0A0;
  border: 1px solid #A0A0A0;
  color: #FFFFFF;
}

.buttoncolorwdisable{
  cursor: default;
  background-color: #FFFFFF;
  border: 1px solid #A0A0A0;
  color: #A0A0A0;
}

.buttoncolorcdisable:hover{
  background-color: #A0A0A0;
  color: #FFFFFF;
}

.buttoncolorwdisable:hover{
  background-color: #FFFFFF;
  color: #A0A0A0;
}

.buttoncolorw{
  background-color: #FFFFFF;
  border: 1px solid #118811;
  color: #118811;
}

.backcolorw{
  background-color: #FFFFFF;
}

.backcolor1{
  background-color: #EEFFEE;
  /*background-color: #EDFEFF;*/
}
      
.backcolor2{
  background-color: #11BB11;
  /*background-color: #1199FF;*/
}

.bottomline2{
  border-bottom: 1px solid #11BB11;
}

.topline2{
  border-top: 1px solid #11BB11;
}

.backcolor3{
  background-color: #118811;
  /*background-color: #1166AA;*/
}

.bbackcolor3{
  background-color: #0055b8;
}

.backcolor4{
  background-color: #0055b8;
  /*background-color: #115588;*/
}


.tablerow{
  border-bottom: 1px solid #FFFFFF;
  cursor: pointer;
}

.tablecell{
   vertical-align: middle !important;
}

.tablerow:hover{
  background-color: #11BB11;
  color: #FFFFFF;
}

.stdrow{
  background-color: #FFFFFF;
  cursor: pointer;
}

.stdrow:hover{
   background-color: #F0F0F0;
}

.settinglabeltop{
  font-size: 18pt;
  text-align: center;
}


.tranlabeltop{
  font-size: 20pt;
  text-left: center;
}

.settinglabel{
  font-size: 20pt;
  text-align: center;
  border-top: 1px solid #116611;
}

.mobilebar{
  height:50px;
  width: 100%;
  border-bottom: 1px solid #116611;
}

.topline{
  border-top: 1px solid #116611;
}

.tranbutton{
  text-align: center;
  vertical-align: bottom;
  padding-top: 10px;
}

.roundcorner{
  background-color: #FFFFFF;
  border-radius: 5px;
  border: 1px solid #116611;
  padding: 3 3 3 3;
}

.roundcorner:hover{
  background-color: #F0F0F0;
}

.tranicon{
  display: table-cell;
  width: 120px;
  height: 100px;
  padding-bottom: 5px;
  vertical-align: middle;
  cursor: pointer;
}

.popover-content {
  min-width: 250px;
}

.setstartbut{
  color: #FFFFFF;
  /*background-color: #116612;*/
  background-color: #253E1E;
  border-radius: 5px;
  border: 1px solid #C0C0C0;
  padding-left: 5px;
  padding-bottom: 3px;
  margin-top: 3px;
  cursor: pointer;
}

.setstartbut:hover{
  /*background-color: #11BB11;*/
  background-color: #385E2C;
}

.setendbut{
  color: #FFFFFF;
  /*background-color: #FF0000;*/
  background-color: #831212;
  border-radius: 5px;
  border: 1px solid #C0C0C0;
  padding-left: 5px;
  padding-bottom: 3px;
  margin-top: 3px;
  cursor: pointer;
}

.setendbut:hover{
  /*background-color: #FF6060;*/
  background-color: #AE1717;
}


.addbookmark{
  color: #FFFFFF;
  /*background-color: #FF8800;*/
  background-color: #63370C;
  border-radius: 5px;
  border: 1px solid #C0C0C0;
  padding-left: 5px;
  padding-bottom: 3px;
  margin-top: 3px;
  cursor: pointer;
}

.addbookmark:hover{
  /*background-color: #FFA040;*/
  background-color: #854A0F;
}

.mapsmallclose{
  color: #FFFFFF;
  cursor: pointer;
  font-weight: bold;
  position: absolute;
  top: 6px;
  right: 6px;  
}

.mapsmallclose:hover{
  color: #FFFFFF;
  opacity: 0.5;
  text-decoration: none;
}

.smallclose{
  color: #FFFFFF;
  cursor: pointer;
  font-weight: bold;
  position: absolute;
  top: -8px;
  right: 6px;  
}

.smallclose:hover{
  color: #FF0000;
  text-decoration: none;
}

.popupname{
  width: :100%;
  height: 50px;
}

.tcell{
  padding-top:5px;
  padding-bottom:5px;
  padding-left:5px;
  padding-right:5px;
  font-size: 12pt;
  text-decoration: strong;
}

.backbutton{
  background-image: url("v-back10623.png");
  background-size: 50px 25px;  
  background-repeat: no-repeat; 
  cursor: pointer;
  color: #FFFFFF;
}

.backbutton:hover{
  background-image: url("v-back20623.png");
  background-size: 50px 25px;  
  background-repeat: no-repeat; 
  /*color: #FF8800 !important;*/
}

.trancell{
  vertical-align: middle !important;
  font-size: 12pt;
}

.trancellbottom{
  vertical-align: bottom !important;
  font-size: 12pt;
}

.tranrow{
  cursor: pointer;
}

.tranrow:hover{
  background-color: #F0F0F0;
}

.stopstyle{
  font-size: 14pt;
}

.lrtbox{
  font-size: 12pt;
  color: #000000;
  background-color: #FFFFFF;
  border-radius: 15px;
  width: 44px;
  height: 20px;
  text-align: center;
  vertical-align: middle;
  padding-bottom: 22px !important;
}

.mtrbox{
  color: #000000;
  background-color: #FFFFFF;
  border-radius: 5px;
  border: 1px solid #000000;
  width: 36px;
  height: 28px;
  text-align: center;
}

.updownbox{
  color: #118811;
  background-color: #FFFFFF;
  border-radius: 5px;
  border: 1px solid #118811;
  width: 36px;
  height: 28px;
  text-align: center;
}

.rightbuttonbox{
  color: #118811;
  border-radius: 5px;
  border: 1px solid #118811;
  width: 80px;
  height: 32px;
  cursor: pointer;
  text-align: middle;
  margin-right: 5px;
  margin-left: 5px;
  padding-left: 2px;
  font-size: 14pt;
}

.bottombutton{
  cursor: pointer;
  padding-top: 3px;
  background-color: #0055b8;
  border-radius: 5px;
  border: 2px solid #FFFFFF;
  color: #FFFFFF;
  width: 80px;
  height: 32px;
  text-align: center;
  #box-shadow:0 0 10px rgba(0, 0, 0, .5);
}

.bottombutton:hover{
  /*background-color: #C0C0C0;
  color: #000000;*/
  background-color: #DDDDDD !important;
  color: #444444 !important;
}


.rightbuttonbox:hover{
  background-color: #FFE0D0;
}

.hintbox{
    position:absolute;
    background:#fff;
    border: 1px solid #000000;
    border-radius:5px;
    padding:5px;
    box-shadow:0 0 3px rgba(0, 0, 0, .5);
    background-color:#F0F0F0;
    width: 120px;
}

.hotspotpopupstyle{
    position:absolute;
    background-image: url(poipopup.png);
    background-size: 470px 400px;
    background-position: 0px 0px;
    background-repeat: no-repeat;
    width: 470px;  
    height: 400px;  
    left:-231px;
    top:-440px;
    z-index: 50001;
}


.hpopupcontentstyle{
  width: 400px;
  height: 327px;
  margin-left: 32px;
  margin-top: 33px;
}

.markerpopupstyle{
    position:absolute;
    background-image: url(new_webpopupv.png);
    background-size: 410px 590px;
    background-position: 0px 0px;
    background-repeat: no-repeat;
    width: 410px;  
    height: 590px;  
    left:-24px;
    top:-590px;
    z-index: 50000;
}


.popupcontentstyle{
  width: 326px;
  height: 490px;
  margin-left: 52px;
  margin-top: 25px;
}

.overlaytopbar{
  padding-left: 5px;
  background-color: #0055b8;
  color: #FFFFFF;
  font-size: 12pt;
}

.overlayframe{
  position: absolute;
  top:30px;
  border: none;
  width: 100%;
  height: calc(100% - 30px);
}



.fullstreetview{
  z-index: 30000;
}

.tranlayerstyle{
  position: absolute;
  color: #FFFFFF;
  background-color: #EEFFEE;  
  top: 50px;
  right: 0px;
  bottom: 0px;
  width: 300px;
  height: calc(100% - 50px);
  z-index: 100;
  text-align: left;
  padding-right: 10px;
  padding-top: 10px;  
  padding-bottom: 10px;
  padding-left: 10px;  
  border-left:1px solid #118811;
  display: none;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

.layertitle{
  color: #000000;
  font-size: 18px;
}

.legendstyle{
  color: #000000;
  font-size: 15px;
}

.rpanelbut{
  position: absolute;
  left: 10px;
  top: 60px;
  width: 70px;
  height: 30px;
  z-index: 40;
  color: #FFFFFF;
  font-size: 18px;
  text-align: center;
  background-color: #0055b8;
  border: 2px solid #FFFFFF;
  border-radius: 7px;
}

.rmapbuttop{
  position: absolute;
  right: 10px;
  top: 10px;
  width: 70px;
  height: 30px;
  z-index: 800000;
  color: #FFFFFF;
  font-size: 18px;
  text-align: center;
  border-radius: 7px;
}

.rmapbut{
  position: absolute;
  right: 10px;
  top: 10px;
  width: 70px;
  height: 30px;
  z-index: 4001;
  color: #FFFFFF;
  font-size: 18px;
  text-align: center;
  background-color: #0055b8;
  border: 2px solid #FFFFFF;
  border-radius: 7px;
}
.rmapbut2{
  position: absolute;
  right: 25px;
  top: 40px;
  width: 70px;
  height: 30px;
  z-index: 4001;
  color: #FFFFFF;
  font-size: 18px;
  text-align: center;
  background-color: #0055b8;
  border: 2px solid #FFFFFF;
  border-radius: 7px;  
}

.toolboxstyle{
  position: absolute;
  right: 0px;
  bottom: 0px;
  width: 400px;
  height: 100px;
  z-index: 40;
  text-align: right;
  padding-right: 10px;
  padding-top: 5px;
}

.layerbutton{
  border: 2px solid #118811;
  border-radius: 10px;
  background-color: #FFFFFF;  
  color: #000000;
  font-size: 15px;
  padding-top: 5px;
  padding-bottom: 5px;
  width: 220px;
  margin-left: 30px;
  margin-bottom: 8px;
  cursor: pointer;
}

.layerbutton:hover{
  background-color: #C0C0C0;  
}

.textoutline{
  text-shadow: 0 0 2px #000; /* horizontal-offset vertical-offset 'blur' colour */
  -moz-text-shadow: 0 0 2px #000;
  -webkit-text-shadow: 0 0 2px #000;
}

.tranpage{
  font-size: 22px;
  padding: 20px;
}

.tranfromto{
  width: 100%;
  padding-top: 5px;
  text-align: center;
}

.tranbackground {
    background-image: url(icons/t.png);
    background-position: 330px 5px;
    background-size: 13px 22px;
    background-repeat: no-repeat;
}

.rightbutton{
  cursor: pointer;
}

.closebut{
  cursor: pointer;
}

.closebut:hover{
  color: #FF8800;
}

.bmhead{
  width:100%;
  font-size: 16px;
}

.bmfoot{
  width:100%;
  font-size: 12px;
}

.toplinkw{
  background-color:#FFFFFF;
  /*color:#FFFFFF;*/
  color:#0055b8;
  cursor: pointer;
}

.toplinkg{
  color:#A0A0A0;
  cursor: pointer;
}

.toplinkg:hover{
  color:#FF6600;
  text-decoration: none;
}

.toplink{
  /*color:#A0A0A0;*/
  color: white;
  cursor: pointer;
}


.toplink:hover{
  color:#FFFFFF;
  background-color: #0266d9;
  text-decoration: none;
}

.but_300_44{
  width:300px;
  height:44px;
  font-size: 16pt;
}

.but_150_44{
  width:150px;
  height:44px;
  font-size: 16pt;
}

.but_180_44{
  width:180px;
  height:44px;
  font-size: 16pt;
}

.but_185_44{
  width:185px;
  height:44px;
  font-size: 14pt;
  color:#FFFFFF;
}

.but_110_33{
  width:110px;
  height:36px;
  font-size: 12pt;
}

.but_8_28{
  width:80px;
  height:28px;
  font-size: 12pt;
}
.but_100p_44{
  width:100%;
  height:44px;
  font-size: 16pt;
}

.but_100_44{
  width:100px;
  height:44px;
  font-size: 16pt;
}

.but_120_36{
  width:120px;
  height:36px;
  font-size: 14pt;
}

.but_80_36{
  width:80px;
  height:36px;
}


.ppoption{
  border-radius: 5px;
  border: 1px solid #118811;
  font-size: 14px;
  width:95%;
  background-color: #FFFFFF;
  text-align: left;
  padding-left: 5px;
  padding-right: 5px;
  padding-top: 3px;
  padding-bottom: 3px;
  cursor: pointer;
  color: #000000;
}

.ppoption:hover{
  background-color: #FFDD88;
}

.optionboxstyle{
  border-radius: 5px;
  border: 1px solid #118811;
  font-size: 14px;
  position: absolute;
  background-color: #FFFFFF;
  width: 150px;
  left: 18px;  
  top: 212px;
  z-index: 100;  
  box-shadow:0 0 3px rgba(0, 0, 0, .5);
  padding: 3px;
  display: none;
}

.ppoptionitem{
  cursor: pointer;
  padding: 3px;
  width:100%;
  font-size: 16px;
  color: #000000;
}

.ppoptionitem:hover{
  color: #FF6600;
}

.loadingbox{
  width:100%;
  height:100%;
  background-color: #FFFFFF;
  text-align: center;
}

.audiobarstyle{
  position: absolute;
  width:100%;
  height:40px;
  bottom: 0px;
  background-color: rgba(0, 0, 0, 0.6); 
  z-index: 200;
  text-align: center;
  vertical-align: middle;
  padding-top: 8px;
  display: none;
  
  font-size: 20px;
}

.audiobut{
  color: #FFFFFF;
  cursor: pointer;
}

.audiobut:hover{
  color: #FFDD88;
}

.activebutton{
  background-color: #FF6600 !important;
}

.tableround{
  border:1px solid #cccccc; 
  /*background-color:#eeeeee;*/
  background-color:#dddddd; 
  border-radius: 5px !important;
  border-collapse: separate !important;
}

.vpadding{
  padding-top: 5px !important;
  padding-bottom: 5px !important;
}

.getbookmarkliststyle{
  border: 1px solid #202020;
  font-size: 14px;
  position: absolute;
  background-color: #FFFFFF;
  width: 200px;
  max-height: 400px;
  overflow: auto;
  left: 20px;  
  top: 212px;
  z-index: 10000;  
  box-shadow:0 0 3px rgba(0, 0, 0, .5);
  padding: 3px;
  display: none;
}

.selectbookmark{

}

.selectbookmark:hover{
  background-color: #D0D0D0;
}

.hotspotcat{
	color: #000000;
}

.hotspotcat:hover{
	color: #FFFFFF;
	background-color: #404040;
}

.visuallyhidden {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}

#wrapper10{
  text-align: left;
  top: 10px;
  left: 10px;
  width: 906px;
  height: 606px;
  position: absolute;
}