html, body {	margin: 0px; height: 100%; }
body { padding-top: 50px; }
.lorem { color: #303030; font: 12px/1.4 "RobotoRegular", "Helvetica Neue", Helvetica, Arial, sans-serif;}
#mainSplitter {
	margin: 0 0 0 0;
	padding: 0 0 0 0;
}

.leftViewContainer {
	font: 12px/1.1 "RobotoRegular", "Helvetica Neue", Helvetica, Arial, sans-serif;
	padding: 0px 0px 0px 0px;
	border:0px;
	z-index:1;/*biar diatas appRightToolBar*/
}
.rightViewContainer {
	height: 100%;
	margin: 0 0 0 0;
	padding: 0 0 0 0;
	border:0px;
}

.rightViewWrapper {
    height: 100%;
	margin: 0 0 0 0;
	padding: 0 0 0 0;
	width: 100%;
	position: absolute;
	border:0px;
}


/*di override disini untuk menghilangkan border radius*/
#primaryTab
{
	border-radius:0 !important;
	border: none;
	-webkit-border-radius: 0 !important;
	-moz-border-radius: 0 !important;
	background-image: -webkit-gradient(linear, 0% top, 100% top, from(#446E9B), to(#2A435F));
	background-image: -webkit-linear-gradient(bottom, color-stop(#446E9B 0%), color-stop(#2A435F 100%));
	background-image: -moz-linear-gradient(bottom, #446E9B 0%, #2A435F 100%);
	background-image: linear-gradient(to bottom, #446E9B 0%, #2A435F 100%);
	background-repeat: repeat-y;
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff446E9B', endColorstr='#ff2A435F', GradientType=1);
}



.black-bar
{
	background-color: #333333;
	background: #333333;
	border-color: #ddd;
	border-radius:0;
	border: none;
	-webkit-border-radius: 0;
	-moz-border-radius: 0;
	background-image: -webkit-gradient(linear, 0% top, 100% top, from(#555555), to(#111111));
	background-image: -webkit-linear-gradient(bottom, color-stop(#555555 0%), color-stop(#111111 100%));
	background-image: -moz-linear-gradient(bottom, #555555 0%, #111111 100%);
	background-image: linear-gradient(to bottom, #555555 0%, #111111 100%);
	background-repeat: repeat-y;
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff555555', endColorstr='#ff111111', GradientType=1);
}

.pixel-font-white-bgblack {
	color: #e6e6e6;
	/* font:8px/1.2 'standard_07_55regular'; */ 
	font: 9.5px/1 sans-serif;
	font-weight:500;
	font-smooth: auto; 							/*auto, never, always*/
	-webkit-font-smoothing : subpixel-antialiased ;			    /*none, antialiased , subpixel-antialiased  */
	text-shadow:
   -1px -1px 0 #000,  
    1px -1px 0 #000,
    -1px 1px 0 #000,
     1px 1px 0 #000;
}

.pixel-font-uppercase-white-bgblue {
	padding: 0 0 0 0 !important;
	color: #e6e6e6;
	/* font:8px/1.2 'standard_07_55regular'; */
	font: 11px/1.1 "RobotoRegular", "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-weight:normal;
	font-smooth: auto; 							/*auto, never, always*/
	-webkit-font-smoothing : subpixel-antialiased ;			    /*none, antialiased , subpixel-antialiased  */
	text-shadow:
   -1px -1px 0 #203346,  
    1px -1px 0 #203346,
    -1px 1px 0 #203346,
     1px 1px 0 #203346;
}
	
#map {
	height: 100%;
	width: 100%;
	margin: 0 0 0 0;
	padding: 0 0 0 0;
	border:0px;
}

#mapTopBar {
	display: flex;
	justify-content: flex-start;
    -webkit-box-align: center;
    align-items: center;
	top:0px;
	border:none;
	/*untuk horizontallly middle seharusnya height dan lineheight bernilai sama*/
	height:30px;
	/* 
	line-height: 30px; 
	padding-left:5px;
	*/
	border:0px;
	background-color:rgba(50,50,50,1);
	-webkit-box-shadow: inset 0px 4px 6px 0px rgba(18,18,18,1);
	-moz-box-shadow: inset 0px 4px 6px 0px rgba(18,18,18,1);
	box-shadow: inset 0px 4px 6px 0px rgba(18,18,18,1);
}

#chartView { background-color:rgba(255,0,0,0.5); }
#tableView { }
#optionsView { background-color:rgba(255,255,255,1); }
#mapViewWrapper, #chartView, #tableView, #iframeTabelView {
	height: 100%;
	margin: 0 0 0 0;
	padding: 0 0 0 0;
	width: 100%;
	top:0px;
	position: absolute;
	border:0px;
}

.horizontalBlock {
	display: inline-block; 
	*display: inline; 
	zoom: 1; 
	vertical-align: top;
}

#appRightToolBar{
	position:fixed;
	right:0;
	background-color:rgba(225,225,225,1);
	-webkit-box-shadow: 0 -1px 10px rgba(0,0,0,0.5);
    -moz-box-shadow: 0 -1px 10px rgba(0,0,0,0.5);
    box-shadow: 0 -1px 10px rgba(0,0,0,0.5);
}



.jumbotron.vertical-center {
	margin-bottom: 0; /* Remove the default bottom margin of .jumbotron */
	height:100%;
	/*background-color:#E6E6FA;*/
	background-color: transparent;
}
.vertical-center {
	/*min-height: 100%;*/  /* Fallback for vh unit */
	/*min-height: 100vh;*/ /* You might also want to use
							'height' property instead.
							
							Note that for percentage values of
							'height' or 'min-height' properties,
							the 'height' of the parent element
							should be specified explicitly.
	  
							In this case the parent of '.vertical-center'
							is the <body> element */

	/* Make it a flex container */

	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex; 
	
	/* Align the bootstrap's container vertically */
	-webkit-box-align : center;
	-webkit-align-items : center;
	-moz-box-align : center;
	-ms-flex-align : center;
	align-items : center;
	
	/* In legacy web browsers such as Firefox 9
	we need to specify the width of the flex container */
	
	width: 100%;
	
	/* Also 'margin: 0 auto' doesn't have any effect on flex items in such web browsers
	hence the bootstrap's container won't be aligned to the center anymore.
	Therefore, we should use the following declarations to get it centered again */
	
	-webkit-box-pack : center;
	-moz-box-pack : center;
	-ms-flex-pack : center;
	-webkit-justify-content : center;
	justify-content : center;
}

.jumbotron-content {
	width:60%;
	margin-top:-120px;/*diatasin sedikit*/
	background-color: gold;
	padding:20px 40px 20px 40px;
	
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px;
	border-radius: 8px;
	-webkit-box-shadow: 0 -1px 10px rgba(0,0,0,0.5);
    -moz-box-shadow: 0 -1px 10px rgba(0,0,0,0.5);
    box-shadow: 0 -1px 10px rgba(0,0,0,0.5);
}

/* overview */
.popover-trigger {
  text-decoration: none;
  /*border-bottom: 1px dashed;*/
  font-weight: bold; 
}

.yellow-popover{
	background-color:#FFFFCC;
	font: 12px/1.2 "RobotoRegular", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.yellow-popover.top > .arrow:after { border-top-color: #FFFFCC; }
.yellow-popover.bottom > .arrow:after { border-bottom-color: #FFFFCC; }
.black-popover{
	color:#FFFFFF;
	background-color:rgba(0,0,0,0.70);
	font: 12px/1.2 "RobotoRegular", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.black-popover.top > .arrow:after { border-top-color: rgba(0,0,0,0.5); }
.black-popover.bottom > .arrow:after { border-bottom-color: rgba(0,0,0,0.5); }


.info-demo {
	color:#666666;
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffaa+0,ffff88+100 */
background: #ffffaa; /* Old browsers */
background: -moz-linear-gradient(top,  #ffffaa 0%, #ffff88 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  #ffffaa 0%,#ffff88 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  #ffffaa 0%,#ffff88 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffaa', endColorstr='#ffff88',GradientType=0 ); /* IE6-9 */


}

.social-links {
    margin-top: 12px;
	padding-top: 10px;
	padding-bottom: 10px;
}

#about > div [class*=" icon-"]:before,
#about > div [class^=icon-]:before {
    font-family: fontello;
    font-style: normal;
    font-weight: 400;
    speak: none;
    display: inline-block;
    text-decoration: inherit;
    width: 1em;
    margin-right: .2em;
    text-align: center;
    font-size: 1.3em;
    -webkit-transition-duration: .5s;
    transition-duration: .5s;
    font-variant: normal;
    text-transform: none;
    line-height: 1em;
    margin-left: .2em;
    text-shadow: 1px 1px 1px rgba(127, 127, 127, .3)
}
.icon-facebook-rect:before { content: '\e800'; }
.icon-facebook-rect:hover { color: #3B5998 }
.icon-twitter-bird:before { content: '\e801' }
.icon-twitter-bird:hover { color: #4099FF }
.icon-googleplus-rect:before { content: '\e802' }
.icon-googleplus-rect:hover { color: #d34836 }
.icon-linkedin-rect:before { content: '\e803' }
.icon-linkedin-rect:hover { color: #0077b5 }

[class*=" icon-black"]:before,
[class^=icon-black]:before {
    font-family: fontello;
    font-style: normal;
    font-weight: 400;
    speak: none;
    display: inline-block;
    text-decoration: inherit;
    width: 1em;
    margin-right: .2em;
    text-align: center;
    font-size: 1.3em;
    -webkit-transition-duration: .4s;
    transition-duration: .4s;
    font-variant: normal;
    text-transform: none;
    line-height: 1em;
    margin-left: .2em;
    text-shadow: 1px 1px 1px rgba(127, 127, 127, .3)
}
.icon-black-facebook-rect{ color:#444444; }
.icon-black-facebook-rect:before { content: '\e800'; }
.icon-black-facebook-rect:hover { color: #3B5998 }
.icon-black-twitter-bird{ color:#444444; }
.icon-black-twitter-bird:before { content: '\e801' }
.icon-black-twitter-bird:hover { color: #4099FF }
.icon-black-googleplus-rect{ color:#444444; }
.icon-black-googleplus-rect:before { content: '\e802' }
.icon-black-googleplus-rect:hover { color: #d34836 }
.icon-black-linkedin-rect{ color:#444444; }
.icon-black-linkedin-rect:before { content: '\e803' }
.icon-black-linkedin-rect:hover { color: #0077b5 }


.inline-color-picker
{
	
}

.Hydrological {
	background: #4f81bc;
	display: inline-block;
	vertical-align: top;
	padding-right: 5px;
	padding-left: 5px;
	text-transform: none;
	font-size: 12px;
	color:#fff;
}

.table-form-title{
    overflow: hidden;
    text-align: center;
}
.table-form-title:before,
.table-form-title:after {
    background-color: #BBBBBB;
    content: "";
    display: inline-block;
    height: 1px;
    /*position: relative*/;
    vertical-align: middle;
    min-width: 40%;
}
.table-form-title:before {
    right: 20px;
    margin-left: -50%;
}
.table-form-title:after {
    left: 20px;
    margin-right: -50%;
}


/* =================================================================== */
/* ======================== INPUT =============================== */
/* =================================================================== */
/* Color Chroma Bar */
div.gradient {
    padding: 4px 4px 0px 4px;
    border-radius:4px;
    background: Gainsboro;
    text-align: center;
}
div.gradient div {
    display: inline-block;
    height: 16px;
    color: rgba(0,0,0,0);
}
/* membuat href tdk tampak seperti href*/
.main-accordion .panel-heading
{
	border-radius: 0px 0px 0px 0px;
	-moz-border-radius: 0px 0px 0px 0px;
	-webkit-border-radius: 0px 0px 0px 0px;
	border: 0px none #000000;
	-webkit-box-shadow: 0px 2px 1px 0px rgba(0,0,0,0.5);
	-moz-box-shadow: 0px 2px 1px 0px rgba(0,0,0,0.5);
	box-shadow: 0px 2px 1px 0px rgba(0,0,0,0.5);
}
.main-accordion .panel-heading a,
.main-accordion .panel-heading a:hover,
.main-accordion .panel-heading a:focus,
.main-accordion .panel-heading a:active
{
	text-decoration: none; 
	color:inherit;
}

#accSimProps .panel-heading i{
	width: 16px;
	height: 16px;
	margin-right:10px;
	margin-bottom:-1px;
	padding-bottom:0px;
	display: inline-block;
	opacity: 1;
	-webkit-border-radius: 1px;
	-moz-border-radius: 1px;
	border-radius: 1px;
	-webkit-box-shadow: 1px 1px 1px 0px rgba(51,51,51,1),inset 1px 1px 2px 0px rgba(230,230,230,0.8);
	-moz-box-shadow: 1px 1px 1px 0px rgba(51,51,51,1),inset 1px 1px 2px 0px rgba(230,230,230,0.8);
	box-shadow: 1px 1px 1px 0px rgba(51,51,51,1),inset 1px 1px 2px 0px rgba(230,230,230,0.8);
}
#accSimProps li > a {
	display: block;
	padding: 9px 24px;
	border: 1px solid #E5E5E5; 
}

/*biar gak konflik dengan yg pake regex match buta icon share */
#accSimProps .iconActive {
	opacity: 0.8; 
	color: #ff5722;
	font-size: 16px;
}

#accSimProps  [id^=accSimPropsBody] li
{
	list-style: none;
}

#accSimProps .metrics-dropdown ul {
  padding: 10px 10px 10px 16px;
  margin: 0;
  /*
  border-left: 1px solid #e5e5e5;
  border-right: 1px solid #e5e5e5;
  */
  border-left: none;
  border-right: none;
  border-right: transparent;
  font-size: 0.9em;
  list-style: none;
}


/*Disable accordion animation*/
/*
.collapsing {
    -webkit-transition: none;
    transition: none;
}
*/

.collapsing {
    transition: height 0.08s;
}

.tab-info-dampak > li > a
{
	padding: 5px 16px 5px 16px;
}

/*Ngecilin button select and deselect provider*/
[class*="actions-btn bs-"]
{
	font: 12px/1.2 "RobotoRegular", "Helvetica Neue", Helvetica, Arial, sans-serif !important;
	/* button-xs */
	padding: 1px 5px!important;
	font-size: 12px!important;
	line-height: 1.5!important;
	border-radius: 3px!important;
	
	/* tambah margin sedikit */
	margin-bottom:5px;
}

.bs-select{
	font: 12px/1.2 "RobotoRegular", "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-smooth: never; 							/*auto, never, always*/
	-webkit-font-smoothing : none;			    /*none, antialiased , subpixel-antialiased  */
}
.bs-select,
.bs-select .btn:focus {
    outline: none !important;
}
.bs-select .dropdown-menu {
	font: 12px/1.2 "RobotoRegular", "Helvetica Neue", Helvetica, Arial, sans-serif;
}


/*
.basemap-select{}
.basemap-select > .dropdown-header{font: 12px/1.1 "RobotoRegular", "Helvetica Neue", Helvetica, Arial, sans-serif;}
.basemap-select > .dropdown-menu > .popover-title > .close{color: #ffffff;}
.basemap-select > .dropdown-menu > .popover-title,
.basemap-select > .dropdown-menu,
.basemap-select > .dropdown-menu > .open,
.basemap-select > .dropdown-menu > .inner
 {
	color: #ffffff;
    background-color: rgba(50,50,50,0.6);
}
*/

#gfiWindowHeader
{
	padding: 5px 10 5px 20px !important;
	background-color: #333333;
	background: #333333;
	border-color: #ddd;
	border-radius:0 !important;
	border: none;
	-webkit-border-radius: 0 !important;
	-moz-border-radius: 0 !important;
	background-image: -webkit-gradient(linear, 0% top, 100% top, from(#555555), to(#111111));
	background-image: -webkit-linear-gradient(bottom, color-stop(#555555 0%), color-stop(#111111 100%));
	background-image: -moz-linear-gradient(bottom, #555555 0%, #111111 100%);
	background-image: linear-gradient(to bottom, #555555 0%, #111111 100%);
	background-repeat: repeat-y;
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff555555', endColorstr='#ff111111', GradientType=1);
}

.gfiWindowHeaderTitle
{
	color: #e6e6e6;
	font: 11px/1.1 "RobotoRegular", "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-weight:normal;
	font-smooth: auto; 							/*auto, never, always*/
	-webkit-font-smoothing : none ;			    /*none, antialiased , subpixel-antialiased  */
	text-shadow:
   -1px -1px 0 #000,  
    1px -1px 0 #000,
    -1px 1px 0 #000,
     1px 1px 0 #000;
}

input[type=number].input-number–noSpinners { -moz-appearance: textfield; }
input[type=number].input-number–noSpinners::-webkit-inner-spin-button,
input[type=number].input-number–noSpinners::-webkit-outer-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

@media (max-width: 992px) {
	.navbar .navbar-brand {
		font-size: 18px;
		float: left;
	}
	.leaflet-control-attribution {
		display: none;
	}
}
@media (max-width: 768px){

}
/* Print Handling */
@media print {
	.navbar, .toggle {
		display: none !important;
	}
}