input[type="number"] {
  max-width: 80%;
}
p{
  font-family: 'Open Sans', sans-serif !important;
}
.navbar-nav {
    padding-top: 10px;
}

.navbar-default {
    background-color: #3aa0cb;
    border-color: #e7e7e7;
}

.navbar-default .navbar-nav>li>a {
    color: #ffffff;
}
.navbar-default .navbar-nav>.active>a, .navbar-default .navbar-nav>.active>a:focus, .navbar-default .navbar-nav>.active>a:hover {
    color: #3aa0cb;
    background-color: #ffffff;
}

.panel-default {
    border-color: #00000000;
    background-color: #00000000;
}
.legend i {
  margin-top : 4px !important;
  margin-left: 4px !important;
 
}
.btn{
   padding:8.5px !important;
}
#wq {
    font-size: 15px;
    color: #3ba0cb;
    font-weight: 700;
}
#img-id {
    position: absolute;
    top: 0;
    padding-top: 8px;
    padding-right: 8px;
    right:0;
    z-index:50;
    color: #fff;
    margin-right: 70px;
}

#img-circle {
  height:40px ;
  padding-top:5px;
  padding-bottom:5px;
  background-color: #fff;
}

@media (max-width: 500px) { 
#legendstitle{
  padding-top:3px !important;
  padding-bottom:3px !important;
  padding-left:10px !important;
  min-height:13px !important;
  font-size:12px !important;
}
#wqsmall{
  padding-top:3px !important;
  padding-bottom:3px !important;
  padding-left:10px !important;
  min-height:13px !important;
  font-size:12px !important;
}

.cbp-spmenu-vertical {
	height: 92% !important;
}

.leaflet-touch .leaflet-control-measure .leaflet-control-measure-toggle:hover{}
.leaflet-control-measure .leaflet-control-measure-toggle, .leaflet-control-measure .leaflet-control-measure-toggle:hover {
 width: 28px !important;
 height: 28px !important; 
}

.leaflet-touch .leaflet-control-layers-toggle {
	width: 25px !important;
	height: 25px !important;
	}
	.leaflet-retina .leaflet-control-layers-toggle {
	background-size: 22px 22px;
	}
.leaflet-touch .leaflet-bar a {
	width: 20px;
	height: 20px;
	line-height: 20px;
	}
	
.leaflet-touch .leaflet-control-zoom-in, .leaflet-touch .leaflet-control-zoom-out  {
	font-size: 15px;
	}
.shiny-input-container:not(.shiny-input-container-inline) {
  margin-bottom:0 !important;
}

.leaflet-left .leaflet-control{
  left:0px;
}

#leftside_btn {
    top: 43% !important;
    left: 1% !important;
    width:40% !important;
    bottom:auto !important;
}
#legendxwq{
  margin-top:2%;
  height:40%;
  overflow-y: scroll;
}
.panel-default>.panel-heading {
  padding:5px 15px;
  background-color:#ffffff;
}
.panel-body{
  padding: 0px;
  padding-top:5px !important;
  font-size:12.5px;
  color: #666;
  font-weight:200;
  background-color:#ffffff;
}
.panel-title{
  color:#ffffff;
  background-color:#3ba0cb;
  font-weight:600;
  padding:0px !important;
}
.btn{
  padding:0 !important;
}

.legendfloater-heading .legendfloater-toggle {

	font-size:14px !important;
	padding: 5px !important;
	color: #f5f5f5 !important;
	padding-left:20px !important;
	background: #3ba0cb !important;
	font-weight: 550 !important;
}



.buttons-fab {
  width: 33px !important;
  height: 33px !important;
  top:13px !important;
}
#legend {
  top:61% !important;
  right:0 !important;
  left:0 !important;
  bottom:20px !important;
  width:100% !important;
  height:auto !important;
	padding: 0 !important;
	

}

.legendfloater-inner {
    height: 150px !important;
    padding-top:2% !important;
    bottom:25px !important;
}
.legendfloater-inner:hover {
  /* Fade in while hovering */
     height: auto !important;
    
}

#logos {
    bottom: 0.5px !important;
    z-index:-1 !important;
}
#img-circle {
  height:35px !important;
}
.control-label {
  position : fixed !important;
  left:5%;
}
#controls_right {
	z-index: 4000 !important;
}
#monmap{
  height:50% !important;
}
.navbar-header {
    height: 73px !important;
    }
#apptitle {
	font-size :20px !important;
  font-weight:530 !important;
  margin-block-end: 0.1em ! important;
    }
#subtitle {
    color: #0a3e5d;
    text-transform: capitalize;
    font-size: 11.5px ! important;
    font-weight: 500 ! important;;
}
#img-id {
    position: absolute;
  	top: 17px !important;
    padding: 0px !important;
    color: #fff;
    margin-right: 0px !important;
    height: 20px !important;
}
#selected_language {
  margin:0;
}
.navbar-brand{
  float:left;
  height:50px;
  padding-top:10px !important;
  font-size:18px;
  padding:8px ;
}

.navbar-toggle {
  background-color: #f5f5f5 !important;
}
 
.navbar-toggle .icon-bar {
  width:15px;
  height:1px;
}
 
.navbar-default .navbar-toggle:focus, .navbar-default .navbar-toggle:hover:{
  background-color: #f5f5f5 !important;
}

#subtitle {
	position: absolute;
	color: #0a3e5d;
	/* margin-top: 40px; */
	text-transform: capitalize;
	font-size: 11px;
	font-weight: 400;
	width:96% !important;
	/* line-height: 20px; */
}

}

/*.appname*/
.appname a, .appname a:hover, .appname a:focus{
    color: #fff;
    font-size:22px;
    font-family: "brandon-grotesque",sans-serif;
    text-transform: capitalize;
    font-weight: 600;
    margin: 14px 0px 0;
    padding: 10px 0 0 0;
    text-decoration: none;
}
#apptitle {
   color: #fff;
    font-size: 22px;
    font-family: "brandon-grotesque",sans-serif !important;
    text-transform: capitalize;
    font-weight: 600;
    text-decoration: none;
    margin-block-end:0.15em ! important
}
#subtitle {
    color: #0a3e5d;
    text-transform: capitalize;
    font-size: 13px;
      font-weight: 600;
}
.appname a span{
    color: #0a3e5d;
    text-transform: capitalize;
    font-size:13px;
}

/*.appname*/
.navbar-header {
    height: 70px;}
div.outer {
  position: fixed;
  top: 41px;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
  padding-top:30px;
}


/* Customize fonts */
body, label, input, button, select { 
  font-family: 'Helvetica Neue', Helvetica;
  font-weight: 200;
}
h1, h2, h3, h4 { font-weight: 400; }

#controls {
  /* Appearance */
  background-color: white;
  padding: 0 20px 20px 20px;
  cursor: move;
  /* Fade out while not hovering */
  opacity: 1;
  zoom: 0.9;
  transition: opacity 500ms 1s;
}

#controls:hover {
  /* Fade in while hovering */
  opacity: 0.95;
  transition-delay: 0;
  overflow-y: scroll;
}
/* Position and style citation */
#logos {
    position: absolute;
    bottom: 10px;
    left: 10px;
    font-size: 12px;
    background-color: #ffffff;
    box-shadow: 0 1px 1px rgba(0,0,0,.05);
    border-radius: 4px;
    border: 1px solid transparent;
}


#top_btn {
    position: absolute;
    bottom: 70px;
    left: 10px;
    font-size: 12px;
    background-color: rgba(255,255,255,0);;
    box-shadow: 0 1px 1px rgba(0,0,0,.05);
    border-radius: 4px;
    border: 1px solid transparent;
}

#stationname {
    font-size: 13px;
}

#languageid {
    position: absolute;
    top: 15px;
    right: 0px;
    z-index:1000;
}
#leftside_btn {
    position: absolute;
    bottom: 70px;
    left: 10px;
    font-size: 12px;
    background-color: rgba(255,255,255,0);
    box-shadow: 0 1px 1px rgba(0,0,0,0);
    border-radius: 4px;
    border: 1px solid transparent;
}
#legend2 {
    position: absolute;
    bottom: 90px;
    left: 100px;
    font-size: 12px;
    background-color: rgba(255,255,255,0);
    box-shadow: 0 1px 1px rgba(0,0,0,0);
    border-radius: 4px;
    border: 1px solid transparent;
}
#wqpanel{
    inset: 93px auto auto 131px;
    width: 320px;
    padding-left: 5px;
    height: auto;
    position: absolute;
    cursor: move;
    background-color: #ffffff;
}
#rightside_btn {
    position: absolute;
    top: 90px;
    font-size: 12px;
    background-color: rgba(255,255,255,0);
    box-shadow: 0 1px 1px rgba(0,0,0,0);
    border-radius: 4px;
    border: 1px solid transparent;
  -webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	transition: all 0.3s ease;
}
.shiny-bound-input.rotate {
transform: rotate(-180deg);
}
.bttn-unite.bttn-primary {
    border-color: #3ba0cb;
    color: #3ba0cb;
}
.bttn-unite.bttn-primary:after {
    background: #9dcfe5;
}
.bttn-unite.bttn-primary:before {
    background: #3ba0cb;
}
.rightside-toggle {
	right: 240px;
}
#language {
    position: absolute;
    top: 70px;
    left: 50%;
    font-size: 12px;
    background-color: rgba(255,255,255,0);;
    box-shadow: 0 1px 1px rgba(0,0,0,.05);
    border-radius: 4px;
    border: 1px solid transparent;

}
/* Position and style citation 
#rightside {
  position: absolute;
  top: 110px;
  right: 300px;
  font-size: 12px;
  position: fixed;
  height: 250px;
  background-color: #111;
  overflow-x: hidden;
  transition: 0.5s;
  padding-top: 60px;
  transition: right 0.5s, width 0.5s;
  
}

*/

.info {
    padding: 0;
}


#reset_input.btn{
    padding: 10px 10.5px;
}

/* If not using map tiles, show a white background */
.leaflet-container {
  background-color: white !important;
}

.accordion {
  	margin-bottom: 20px;
}

.accordion-group {
  	margin-bottom: 2px;
  	border: none;
  	-webkit-border-radius: 0;
       -moz-border-radius: 0;
          	border-radius: 0;
}

.accordion-heading {
  	border-bottom: 0 none;
}

.accordion-heading i {
	font-size:14px;
}

.accordion-heading .accordion-toggle {
	position: relative;
	text-decoration:none;
	font-size:14px;
	outline:0;
  	display: block;
  	padding: 15px;
	color: #23262C;
	background:#ededed;
	font-weight: 600;
	-webkit-transition: all 0.1s linear 0s;
	-moz-transition: all 0.1s linear 0s;
	-ms-transition: all 0.1s linear 0s;
	-o-transition: all 0.1s linear 0s;
	transition: all 0.1s linear 0s;
}

.accordion-toggle {
  	cursor: pointer;
}

.accordion-heading .accordion-toggle:hover,.accordion-heading .accordion-toggle.active{
	text-decoration:none;
}

.accordion-heading:hover .accordion-toggle,
.accordion-heading:hover .accordion-toggle.inactive {
	color:#FFFFFF;
	text-decoration:none;
	background-color: #3aa0cb;
}

.accordion-heading .accordion-toggle.active {
	color:#FFFFFF;
}

.accordion-heading .accordion-toggle.inactive {
	background:#333;
	text-decoration:none;
}

.accordion-heading.accordionize .accordion-toggle span,
.accordion-heading.togglize .accordion-toggle span {
    position: absolute;
    top: 50%;
    right: 20px;
    margin: -8px 0 0 0;
    color: #23262C;
    font-size: 18px;

	-webkit-transition: all 0.1s linear 0s;
	-moz-transition: all 0.1s linear 0s;
	-ms-transition: all 0.1s linear 0s;
	-o-transition: all 0.1s linear 0s;
	transition: all 0.1s linear 0s;
}

.accordion-heading:hover .accordion-toggle span {
	color: #FFFFFF;
}

.accordion-heading .accordion-toggle.active span,
.accordion-heading:hover .accordion-toggle.inactive span {
	color: #FFFFFF;
}

.accordion-heading.accordionize .accordion-toggle.active span,
.accordion-heading.togglize .accordion-toggle.active span {
	-webkit-transform: rotate(180deg);
	-moz-transform: rotate(180deg);
	-ms-transform: rotate(180deg);
	-o-transform: rotate(180deg);
	transform: rotate(180deg);
}

.accordion-heading.togglize .accordion-toggle span {
	margin: -8px 0 0 0;
	font-size: 18px;
}

.accordion-heading.togglize .accordion-toggle.active span {
	opacity:0;
	filter: alpha(opacity=0);
}

.accordion-heading.togglize .accordion-toggle.active span + span {
	opacity:1;
	filter: alpha(opacity=100);
}

.accordion-inner {
background: #f8f8f8;
border: none;
padding-top: 0;
padding-bottom: 7px;
padding-left:15px;
padding-right:15px;
font-size:13.5px;
}




.cbp-spmenu-horizontal {
	background: #ffffff;
	position: fixed;
	width: 100%;
	height: 5%;
	bottom: 0px;
	z-index: 1000;
}

.cbp-spmenu {
	background: #ffffff;
	position: fixed;
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	transition: all 0.3s ease;
	padding: 10px;
  z-index: 2000; 
}
.cbp-spmenu-vertical {
	width: 240px;
	height: 92%;
	top: 69px;
	z-index: 600;
}

.cbp-spmenu-left {
	left: 0px;
}

.cbp-spmenu-right {
	right: 0px;
}

.cbp-spmenu-left.cbp-spmenu-open {
	left: -240px;
}

.cbp-spmenu-right.cbp-spmenu-open {
	right: -240px;
}


.leftside-toggle {
	left: 240px;
}

.rightside-toggle {
	right: 240px;
}

.leftside-toggle.toggle-open {
	left: 5px;
}

.rightside-toggle.toggle-open {
	right: 5px;
}


/*LEGEND*/
.legendfloater-inner {
    background: #ffffff;
    padding: 16px 20px;
    border: none;
    height: 270px;
}
.legendfloater-inner:hover {
  /* Fade in while hovering */
  opacity: 0.95;
  transition-delay: 0;
  overflow-y: scroll;
  overflow-y: scroll;
    overflow-x: scroll;
    height: 270px;
}

.legendfloater-body.collapse.in {
    height: 270px !important;
    /*overflow-y: scroll !important;*/
    /*overflow-x: scroll !important;*/
}
/* Legend floater*/
.legendfloater {
  	margin-bottom: 8px;
}

.legendfloater-group {
  	margin-bottom: 2px;
  	border: none;
          	border-radius: 0;
}

.legendfloater-heading {
  	border-bottom: 0 none;
}

.legendfloater-heading i {
	font-size:14px;
}

.legendfloater-heading:hover .legendfloater-toggle, .legendfloater-heading:hover .legendfoater-toggle.inactive {
    color: #ffffff;
    text-decoration: none;
}
.legendfloater-heading .legendfloater-toggle {
	position: relative;
	text-decoration:none;
	font-size:15px;
	outline:0;
  	display: block;
  	padding: 6px;
	color:#3ba0cb;
	padding-left:20px;
	background:#ededed;
	font-weight: 600;
	-webkit-transition: all 0.1s linear 0s;
	-moz-transition: all 0.1s linear 0s;
	-ms-transition: all 0.1s linear 0s;
	-o-transition: all 0.1s linear 0s;
	transition: all 0.1s linear 0s;
}


.legendfloater-toggle {
  	cursor: pointer;
}
.legendfloater-body.collapse.in{
  height:270px;
}

.legendfloater-heading .legendfloater-toggle:hover,.legendfloater-heading .legendfloater-toggle.active{
	text-decoration:none;
}

.legendfloater-heading:hover .legendfloater-toggle,
.legendfloater-heading:hover .legendfoater-toggle.inactive {
	color:#666;
	text-decoration:none;
}

.legendfloater-heading .legendfloater-toggle.active {
	color: #fff;
}

.legendfloater-heading .legendfloater-toggle.inactive {
	background:#333;
	text-decoration:none;
}

.legendfloater-heading.accordionize .legendfloater-toggle span,
.legendfloater-heading.togglize .legendfloater-toggle span {
    position: absolute;
    top: 50%;
    right: 20px;
    margin: -8px 0 0 0;
    color: #4eb478;
    font-size: 18px;

	transition: all 0.1s linear 0s;
}

.legendfloater-heading:hover .legendfloater-toggle span {
	color: #FFFFFF;
}

.legendfloater-heading .legendfloater-toggle.active span,
.legendfloater-heading:hover .legendfloater-toggle.inactive span {
	color: #FFFFFF;
}

.legendfloater-heading.accordionize .legendfloater-toggle.active span,
.legendfloater-heading.togglize .legendfloater-toggle.active span {

	transform: rotate(180deg);
}

.legendfloater-heading.togglize .legendfloater-toggle span {
	margin: -8px 0 0 0;
	font-size: 18px;
}

.legendfloater-heading.togglize .legendfloater-toggle.active span {
	opacity:0;
	filter: alpha(opacity=0);
}

.legendfloater-heading.togglize .legendfloater-toggle.active span + span {
	opacity:1;
	filter: alpha(opacity=100);
}

.legendfloater-inner {
	background: #ffffff;
  	padding: 10px 15px;
  	padding-top:0;
	border: none;
	opacity:1;
	overflow-x: scroll;
overflow-y: scroll;
}

/* legendfloater */
.legendfloater-heading:hover .legendfloater-toggle,
.legendfloater-heading:hover .legendfloater-toggle.inactive {
	background:#3ba0cb;
}
/*''''''''''''''*/ 

/*------------------------------------------------------------------
		ABOUT TAB _ MONGOLIA PROJECT _ NGOC ANH
	-------------------------------------------------------------------*/

#project_title {
	font-size: 22px;
    line-height: 28px;
    margin-bottom: 20px;
    text-transform: uppercase;
    margin-top: 15px;
    color: #000;
    font-weight: 600;color: #0a3e5e;
	position: relative;
	text-transform: uppercase;
}
#p_subtitle{
	color: #898989;
    font-size: 14px;
    font-weight: 400;
    margin: 0 0 10px 0;
}	
.main_heading::after {
  background: #3ba0cb;
}

.main_heading {
		margin-bottom: 20px;
	}
	
	
.main_heading {
	position: relative;
	margin-bottom: 55px;
}

.main_heading::after {
	content: "";
	display: block;
	margin: 20px auto 0;
	width: 80px;
	height: 5px;
	background: #3ba0cb;
}

.main_heading.text_align_left::after {
	margin-left: 0;
}

.main_heading.text_align_right::after {
	margin-right: 0;
}


.about_mon {
    background: #f5f5f5;
}

.about_cont_mon {
	padding: 15px;
}

.about_cont_mon p {
	margin: 0;
	line-height: 24px;
}

.about_cont_mon ul {
	margin-top: 15px;
}

.about_cont_mon ul li {
	float: left;
	width: 100%;
	margin: 5px 0;
	font-size: 15px;
	color: #0a3e5e;
	font-weight: 500;
}

.about_cont_mon ul li i {
	margin-right: 10px;
}

.padding_right_0 {
	padding-right: 0;
}
.about_feature_img.padding_right_0 {
    padding: 75px 15px 25px;
}

#accordion {
	margin: 15px 0 0 0;
	padding: 0;
}

#accordion .panel.panel-default {
	border: none;
	border-radius: 0;
	margin: 0 0 16px 0;
	box-shadow: none;
	background: transparent;
	float: left;
	width: 100%;
}

#accordion .panel.panel-default .panel-heading {
	border: none;
	background: transparent;
	border-radius: 0;
	min-height: 50px;
	padding: 0;
	float: left;
	width: 100%;
}

#accordion .panel-collapse {
	float: left;
	width: 100%;
}

#accordion .panel.panel-default .panel-heading p a[aria-expanded="true"],
#accordion .panel.panel-default:nth-child(1) .panel-heading p a {
	background: #3ba0cb;
	border-color: #3ba0cb;
	color: #fff;
}

#accordion .panel.panel-default .panel-heading p a[aria-expanded="true"] i,
#accordion .panel.panel-default:nth-child(1) .panel-heading p a i {
	color: #fff !important;
}

#accordion .panel.panel-default .panel-heading p a[aria-expanded="true"] i.fa-angle-down,
#accordion .panel.panel-default:nth-child(1) .panel-heading p a i.fa-angle-down {
	transform: rotate(180deg);
	transition: ease all 0.5s;
}

#accordion .panel.panel-default .panel-heading p a,
#accordion .panel.panel-default .panel-heading p a[aria-expanded="false"] {
	border: solid #e4e4e4 1px;
	background: #fff;
	border-radius: 0;
	min-height: 50px;
	padding: 17px 25px 15px;
}

#accordion .panel.panel-default .panel-heading p a[aria-expanded="false"] {
	color: #000 !important;
}

#accordion .panel.panel-default .panel-heading p a[aria-expanded="false"] i {
	color: #3ba0cb !important;
}

#accordion .panel.panel-default .panel-heading p a[aria-expanded="false"] i.fa-angle-down {
	color: #000 !important;
}

#accordion .panel.panel-default .panel-heading p {
	font-size: 15px;
}

#accordion .panel.panel-default .panel-body {
	border: none;
	padding: 0 25px;
	margin: 15px 0 0 0;
	box-shadow: none;
	height: auto;
}

#accordion .panel.panel-default .panel-body p {
	margin-bottom: 0;
	font-size: 14px;
	line-height: 24px;
}

#accordion .panel.panel-default .panel-heading p a {
	float: left;
	width: 100%;
	font-weight: 500;
	position: relative;
}

#accordion .panel.panel-default .panel-heading p a i.fa-angle-down {
	float: right;
	color: #000;
	margin: 0;
}

#accordion .panel.panel-default .panel-heading p a>i {
	font-size: 20px;
	color: #3ba0cb;
	margin: 0 10px 0 0;
}

.without_border #accordion .panel.panel-default .panel-heading p a,
.without_border #accordion .panel.panel-default .panel-heading p a[aria-expanded="false"] {
	border: none;
	background: #fff;
	border-radius: 0;
	min-height: 50px;
	padding: 15px 0 12px;
}

.without_border #accordion .panel.panel-default .panel-heading p a[aria-expanded="true"] i,
.without_border #accordion .panel.panel-default:nth-child(1) .panel-heading p a i {
	color: #000 !important;
}

.without_border #accordion .panel.panel-default .panel-heading p a[aria-expanded="true"],
.without_border #accordion .panel.panel-default:nth-child(1) .panel-heading p a {
	color: #000 !important;
}

.without_border #accordion .panel.panel-default .panel-heading p a[aria-expanded="false"] {
	color: #000 !important;
}

.without_border #accordion .panel.panel-default .panel-heading p a>i {
	color: #000 !important;
}

.cprt_mon {
    width: 100%;
    text-align: left;
    background-color: #3ba0cb;
    bottom: 0;
    float: left;
    height: auto;
    left: 0;
    padding: 18px 20px;
    color: #eee;
}