/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/* 
    Created on : Jun 30, 2014, 2:11:18 PM
    Author     : hengky
*/
#form_space{
 height:30px;
 width:auto;
}
#form_header{
 height:30px;
 width:auto;
 background-color: #243349;
 /*#8BAC48;*/
}
#form_inti{
 margin-left:auto;
 margin-right:auto;
 height:auto;
 border:solid;
 border-color: #243349;
 border-width:5px;
}
#form_inti2{
 border:solid;
 border-color: #243349;
 border-width:5px;
}
.tengah1{
    margin: auto;
    position: absolute;
    top: 0; left: 0; bottom: 0; right: 0;
    height: 300px;
}
.tengah{
    margin-left:auto;
    margin-right:auto;
    margin-top:auto;
    margin-bottom:auto;
    left:0;
    right:0;
    top:0;
    bottom:0;
}
.tengah95{
    margin:0 auto;
    width:95%;
    border:0px solid #000000;
}
.solidH1{
    color: #142b17;
}
.solidH2{
    color: #b2e723;
    //color: #
}
.trans_hijau1{
    background: rgba(20,43,23,0.4);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#66142b17, endColorstr=#66142b17);
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#66142b17,endColorstr=#66142b17)";
}
.trans_hijau2{
    background: rgba(178,231,35,0.4);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#66b2e723, endColorstr=#66b2e723);
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#66b2e723,endColorstr=#66b2e723)";
}
.trans_putih{
    background: rgba(255,255,255,0.4);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#66ffffff, endColorstr=#66ffffff);
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#66ffffff,endColorstr=#66ffffff)";
}
.trans_putih1{
    background: rgba(255,255,255,0.8);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#66ffffff, endColorstr=#66ffffff);
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#66ffffff,endColorstr=#66ffffff)";
}
.trans_kuning{
    background: rgba(233,244,163,1);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#e9f4a3, endColorstr=#e9f4a3);
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#66e9f4a3,endColorstr=#66e9f4a3)";
}

.outline_hijau1{
    -webkit-text-stroke: 2px #243349;
}
.outline_hijau2{    
    -webkit-text-stroke: 2px #243349;
}
.tumpul_topleft{
    -webkit-border-radius-topleft:10px;-moz-border-radius-topleft:10px; border-top-left-radius:10px;
}
.tumpul_topright{
    -webkit-border-radius-topright:10px;-moz-border-radius-topright:10px; border-top-right-radius:10px;
}
.tumpul_botleft{
    -webkit-border-radius-bottomleft:10px;-moz-border-radius-bottomleft:10px; border-bottom-left-radius:10px;
}
.tumpul_botright{
    -webkit-border-radius:10px;-moz-border-radius-bottomright:10px; border-bottom-right-radius:10px; 
}
.garis_titik2{
    border-top: 1px dotted;
}
.coret{
    text-decoration: line-through;
}
.patern1 {
 width: auto;
 height: 10%;
 background:
 radial-gradient(black 15%, transparent 16%) 0 0,
 radial-gradient(black 15%, transparent 16%) 8px 8px,
 radial-gradient(rgba(255,255,255,.1) 15%, transparent 20%) 0 1px,
 radial-gradient(rgba(255,255,255,.1) 15%, transparent 20%) 8px 9px;
 background-color:#002000;
 background-size:16px 16px;
}

.patern2{
background:
linear-gradient(45deg, #92baac 45px, transparent 45px)64px 64px,
linear-gradient(45deg, #92baac 45px, transparent 45px,transparent 91px, #e1ebbd 91px, #e1ebbd 135px, transparent 135px),
linear-gradient(-45deg, #92baac 23px, transparent 23px, transparent 68px,#92baac 68px,#92baac 113px,transparent 113px,transparent 158px,#92baac 158px);
background-color:#e1ebbd;
background-size: 128px 128px; 
}
.patern3{    
background:
linear-gradient(27deg, #151515 5px, transparent 5px) 0 5px,
linear-gradient(207deg, #151515 5px, transparent 5px) 10px 0px,
linear-gradient(27deg, #222 5px, transparent 5px) 0px 10px,
linear-gradient(207deg, #222 5px, transparent 5px) 10px 5px,
linear-gradient(90deg, #1b1b1b 10px, transparent 10px),
linear-gradient(#1d1d1d 25%, #1a1a1a 25%, #1a1a1a 50%, transparent 50%, transparent 75%, #242424 75%, #242424);
background-color: #002000;
background-size: 20px 20px;
}
.patern4{    
background: 
linear-gradient(135deg, #ECEDDC 25%, transparent 25%) -50px 0,
linear-gradient(225deg, #ECEDDC 25%, transparent 25%) -50px 0,
linear-gradient(315deg, #ECEDDC 25%, transparent 25%),
linear-gradient(45deg, #ECEDDC 25%, transparent 25%);
background-size: 100px 100px;
background-color: #EC173A;
}
.patern5{    
background:
linear-gradient(135deg, #708090 22px, #d9ecff 22px, #d9ecff 24px, transparent 24px, transparent 67px, #d9ecff 67px, #d9ecff 69px, transparent 69px),
linear-gradient(225deg, #708090 22px, #d9ecff 22px, #d9ecff 24px, transparent 24px, transparent 67px, #d9ecff 67px, #d9ecff 69px, transparent 69px)0 64px;
background-color:#708090;
background-size: 64px 128px
}
.patern6{
    background-color: hsl(34, 53%, 82%);
    background-image: repeating-linear-gradient(45deg, transparent 5px, hsla(197, 62%, 11%, 0.5) 5px, hsla(197, 62%, 11%, 0.5) 10px,                  
      hsla(5, 53%, 63%, 0) 10px, hsla(5, 53%, 63%, 0) 35px, hsla(5, 53%, 63%, 0.5) 35px, hsla(5, 53%, 63%, 0.5) 40px,
      hsla(197, 62%, 11%, 0.5) 40px, hsla(197, 62%, 11%, 0.5) 50px, hsla(197, 62%, 11%, 0) 50px, hsla(197, 62%, 11%, 0) 60px,                
      hsla(5, 53%, 63%, 0.5) 60px, hsla(5, 53%, 63%, 0.5) 70px, hsla(35, 91%, 65%, 0.5) 70px, hsla(35, 91%, 65%, 0.5) 80px,
      hsla(35, 91%, 65%, 0) 80px, hsla(35, 91%, 65%, 0) 90px, hsla(5, 53%, 63%, 0.5) 90px, hsla(5, 53%, 63%, 0.5) 110px,
      hsla(5, 53%, 63%, 0) 110px, hsla(5, 53%, 63%, 0) 120px, hsla(197, 62%, 11%, 0.5) 120px, hsla(197, 62%, 11%, 0.5) 140px       
      ),
    repeating-linear-gradient(135deg, transparent 5px, hsla(197, 62%, 11%, 0.5) 5px, hsla(197, 62%, 11%, 0.5) 10px, 
      hsla(5, 53%, 63%, 0) 10px, hsla(5, 53%, 63%, 0) 35px, hsla(5, 53%, 63%, 0.5) 35px, hsla(5, 53%, 63%, 0.5) 40px,
      hsla(197, 62%, 11%, 0.5) 40px, hsla(197, 62%, 11%, 0.5) 50px, hsla(197, 62%, 11%, 0) 50px, hsla(197, 62%, 11%, 0) 60px,                
      hsla(5, 53%, 63%, 0.5) 60px, hsla(5, 53%, 63%, 0.5) 70px, hsla(35, 91%, 65%, 0.5) 70px, hsla(35, 91%, 65%, 0.5) 80px,
      hsla(35, 91%, 65%, 0) 80px, hsla(35, 91%, 65%, 0) 90px, hsla(5, 53%, 63%, 0.5) 90px, hsla(5, 53%, 63%, 0.5) 110px,
      hsla(5, 53%, 63%, 0) 110px, hsla(5, 53%, 63%, 0) 140px, hsla(197, 62%, 11%, 0.5) 140px, hsla(197, 62%, 11%, 0.5) 160px       
    );
}
.patern7{
    background-color: #0b5629;
    background-image: linear-gradient(90deg, rgba(255,255,255,.07) 50%, transparent 50%),
    linear-gradient(90deg, rgba(255,255,255,.13) 50%, transparent 50%),
    linear-gradient(90deg, transparent 50%, rgba(255,255,255,.17) 50%),
    linear-gradient(90deg, transparent 50%, rgba(255,255,255,.19) 50%);
    background-size: 13px, 29px, 37px, 53px;
}
.patern8{
    background-color:#556;
    background-image: linear-gradient(30deg, #445 12%, transparent 12.5%, transparent 87%, #445 87.5%, #445),
    linear-gradient(150deg, #445 12%, transparent 12.5%, transparent 87%, #445 87.5%, #445),
    linear-gradient(30deg, #445 12%, transparent 12.5%, transparent 87%, #445 87.5%, #445),
    linear-gradient(150deg, #445 12%, transparent 12.5%, transparent 87%, #445 87.5%, #445),
    linear-gradient(60deg, #99a 25%, transparent 25.5%, transparent 75%, #99a 75%, #99a), 
    linear-gradient(60deg, #99a 25%, transparent 25.5%, transparent 75%, #99a 75%, #99a);
    background-size:80px 140px;
    background-position: 0 0, 0 0, 40px 70px, 40px 70px, 0 0, 40px 70px;
}
.patern9{
    background:
    radial-gradient(hsl(0, 100%, 27%) 4%, hsl(0, 100%, 18%) 9%, hsla(0, 100%, 20%, 0) 9%) 0 0,
    radial-gradient(hsl(0, 100%, 27%) 4%, hsl(0, 100%, 18%) 8%, hsla(0, 100%, 20%, 0) 10%) 50px 50px,
    radial-gradient(hsla(0, 100%, 30%, 0.8) 20%, hsla(0, 100%, 20%, 0)) 50px 0,
    radial-gradient(hsla(0, 100%, 30%, 0.8) 20%, hsla(0, 100%, 20%, 0)) 0 50px,
    radial-gradient(hsla(0, 100%, 20%, 1) 35%, hsla(0, 100%, 20%, 0) 60%) 50px 0,
    radial-gradient(hsla(0, 100%, 20%, 1) 35%, hsla(0, 100%, 20%, 0) 60%) 100px 50px,
    radial-gradient(hsla(0, 100%, 15%, 0.7), hsla(0, 100%, 20%, 0)) 0 0,
    radial-gradient(hsla(0, 100%, 15%, 0.7), hsla(0, 100%, 20%, 0)) 50px 50px,
    linear-gradient(45deg, hsla(0, 100%, 20%, 0) 49%, hsla(0, 100%, 0%, 1) 50%, hsla(0, 100%, 20%, 0) 70%) 0 0,
    linear-gradient(-45deg, hsla(0, 100%, 20%, 0) 49%, hsla(0, 100%, 0%, 1) 50%, hsla(0, 100%, 20%, 0) 70%) 0 0;
    background-color: #300; 
    background-size: 100px 100px;
}
.bg_gradient1{
    background: #000;
    background: -moz-linear-gradient(top, #009900, #000000);
    background: -ms-linear-gradient(top, #009900, #000000);
    background: -o-linear-gradient(top, #009900, #000000);
    background: -webkit-linear-gradient(top, #009900, #000000);
    background: linear-gradient(top, #009900, #000000);
}
.bg_gradient2{
    background: #009900;
    background: -moz-linear-gradient(center top, black 20%, #009900 100%);
    background: -ms-linear-gradient(center top, black 20%, #009900 100%);
    background: -o-linear-gradient(center top, black 20%, #009900 100% );
    background: -webkit-linear-gradient(center top, black 20%, #009900 100%);
    background: linear-gradient(center top, black 20%, #009900 100%); 
}
.bg_body1{
    background: url('../images/bg.jpg') no-repeat center center fixed;
    -moz-background-size: cover;
    -webkit-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}
.bg_body{
    background: url('../images/bg1.jpg') no-repeat center center fixed;
    -moz-background-size: cover;
    -webkit-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}
.bg_body2{
    background: url('../images/bg2.jpg') no-repeat center center fixed;
    -moz-background-size: cover;
    -webkit-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}
.spinner {
    position: fixed;
    top: 50%;
    left: 50%;
    margin-left: -50px; /* half width of the spinner gif */
    margin-top: -50px; /* half height of the spinner gif */
    text-align:center;
    z-index:1234;
    overflow: auto;
    width: 100px; /* width of the spinner gif */
    height: 102px; /*hight of the spinner gif +2px to fix IE8 issue */
}
.baris1{
    background-color: #c6ff00;
}
.baris2{
    background-color: #fbff83;
}
.headertbl{
    padding: 3px 18px 3px 10px;
    border-bottom: 1px solid black;
    border-top: 1px solid black;
    font-weight: bold;
    background-color: white;
}
.fixed-th{
	width:100%;
	border-collapse:collapse;
	box-shadow: 0 2px 3px 1px #ddd;
	table-layout:fixed;
	border:10px solid #fff;
}
.fixed-th thead{
	background-color:#b6e70b;
	color:#fff;
	display:block;
}
/* membuat jadi scroll */
.fixed-th tbody{
	display:block;
	overflow-y:auto;
	width:100%;
	max-height:300px;
	position:static;
}
/* akhir scroll */
.fixed-th th,.fixed-th td{
	vertical-align:top;
	padding:10px 7px;
	text-align:center;
}
.fixed-th th + th,.fixed-th td + td{
	border-left:1px solid #ddd;
}
.fixed-th th:nth-child(1),.fixed-th td:nth-child(1){
	min-width:40px;
}
.fixed-th th:nth-child(2),.fixed-th td:nth-child(2){
	width:300px;
}
.fixed-th th:nth-child(3),.fixed-th td:nth-child(3){
	width:300px;
}
/*
.fixed-th tr:hover td{
	background: #f2f2f2;
	background: -webkit-gradient(linear, left top,left bottom, from(#f2f2f2), to(#f0f0f0));
	background: -moz-linear-gradient(top, #f2f2f2,#f0f0f0);
}
*/

html, body {
  height: 100%;
}

.jumbotron.vertical-center {
  margin-bottom: 0; /* Remove the default bottom margin of .jumbotron */
}

.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;
}
.bghotel {
    background-image: url('images/bghotel1.jpg');
    background-repeat: no-repeat;
    background-position: center center;
    background-attachment: fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

html {
  position: relative;
  min-height: 100%;
}
body {
  /* Margin bottom by footer height */
  margin-bottom: 0px;
}
.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  /* Set the fixed height of the footer here */
  height: 50px;
  background-color: #f5f5f5;
}
.grad1 {
    /*height: 200px;*/
    background: #a9e8db; /* For browsers that do not support gradients */
    background: -webkit-linear-gradient(#a9e8db, #e0f7e6); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(#a9e8db, #e0f7e6); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(#a9e8db, #e0f7e6); /* For Firefox 3.6 to 15 */
    background: linear-gradient(#a9e8db, #e0f7e6); /* Standard syntax (must be last) */
}
.grad2 {
    /*height: 200px;*/
    background: #5BC8AC; /* For browsers that do not support gradients */
    background: -webkit-linear-gradient(#5BC8AC, #98DBC6); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(#5BC8AC, #98DBC6); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(#5BC8AC, #98DBC6); /* For Firefox 3.6 to 15 */
    background: linear-gradient(#5BC8AC, #98DBC6); /* Standard syntax (must be last) */
}
.grad3 {
    /*height: 200px;*/
    background: #66A5AD; /* For browsers that do not support gradients */
    background: -webkit-linear-gradient(#66A5AD, #C4DFE6); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(#66A5AD, #C4DFE6); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(#66A5AD, #C4DFE6); /* For Firefox 3.6 to 15 */
    background: linear-gradient(#66A5AD, #C4DFE6); /* Standard syntax (must be last) */
}
.grad4 {
    /*height: 200px;*/
    background: #C4DFE6; /* For browsers that do not support gradients */
    background: -webkit-linear-gradient(	#B4D3DB, #ffffff); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(#B4D3DB, #ffffff); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(#B4D3DB, #ffffff); /* For Firefox 3.6 to 15 */
    background: linear-gradient(#B4D3DB, #ffffff); /* Standard syntax (must be last) */
}
.grad5 {
    /*height: 200px;*/
    background: #66A5AD; /* For browsers that do not support gradients */
    background: -webkit-linear-gradient(#C4DFE6, #C4DFE6); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(#C4DFE6, #C4DFE6); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(#C4DFE6, #C4DFE6); /* For Firefox 3.6 to 15 */
    background: linear-gradient(#C4DFE6, #C4DFE6); /* Standard syntax (must be last) */
}

.fbutton{
  width: 55px;
  height: 55px;
  border-radius: 50%;
  background: #5c7aa5;
  position: fixed;
  bottom: 30px;
  right: 30px;
  cursor: pointer;
  box-shadow: 0px 2px 5px #666;
}
.Tbutton{
  width: 55px;
  height: 55px;
  border-radius: 50%;
  background: #5c7aa5;
  position: fixed;
  top: 200px;
  right: 50px;
  cursor: pointer;
  box-shadow: 0px 2px 5px #666;
}
.ketwarna1{
  border: 1px solid #000;
  width: 35px;
  height: 35px;
  border-radius: 100px;
  background: #ddd;
}

.plus{
  color: white;
  position: absolute;
  top: 0;
  display: block;
  bottom: 0;
  left: 0;
  right: 0;
  text-align: center;
  padding: 0;
  margin: 0;
  line-height: 55px;
  font-size: 38px;
  font-family: 'Roboto';
  font-weight: 300;
  animation: plus-out 0.3s;
  transition: all 0.3s;
}
.modal.modal-wide .modal-dialog{
	width: 90%;
}
.modal-wide .modal-body{
	overflow-y: auto;
}
/*body{text-align: center;}*/
body p{
	max-width: 400px;
	margin: 20px auto;
}
#tallModal .modal-body p { margin-bottom: 900px}

/* Dropdown Button */
.dropbtn {
    background-color: #4CAF50;
    color: white;
    padding: 16px;
    font-size: 16px;
    border: none;
    cursor: pointer;
}

/* Dropdown button on hover & focus */
.dropbtn:hover, .dropbtn:focus {
    background-color: #3e8e41;
}

/* The search field */
#myInput {
  border-box: box-sizing;
  background-image: url('searchicon.png');
  background-position: 14px 12px;
  background-repeat: no-repeat;
  font-size: 16px;
  padding: 14px 20px 12px 45px;
  border: none;
  border-bottom: 1px solid #ddd;
}

/* The search field when it gets focus/clicked on */
#myInput:focus {outline: 3px solid #ddd;}

/* The container <div> - needed to position the dropdown content */
.dropdown {
    position: relative;
    display: inline-block;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f6f6f6;
    min-width: 230px;
    border: 1px solid #ddd;
    z-index: 1;
}

/* Links inside the dropdown */
.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #f1f1f1}

/* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */
.show {display:block;}
.blinking{
	animation:blinkingText 0.8s infinite;
}
@keyframes blinkingText{
	0%{	color: #000;	}
	49%{	color: transparent;	}
	50%{	color: transparent;	}
	99%{	color: transparent;	}
	100%{	color: #000;	}
}
#tempatgauge1 {
    height: 200px;
}
#tempatgauge2 {
    height: 200px;
}
.highcharts-figure,
.highcharts-data-table table {
    min-width: 310px;
    max-width: 500px;
    margin: 1em auto;
}

.highcharts-data-table table {
    font-family: Verdana, sans-serif;
    border-collapse: collapse;
    border: 1px solid #ebebeb;
    margin: 10px auto;
    text-align: center;
    width: 100%;
    max-width: 500px;
}

.highcharts-data-table caption {
    padding: 1em 0;
    font-size: 1.2em;
    color: #555;
}

.highcharts-data-table th {
    font-weight: 600;
    padding: 0.5em;
}

.highcharts-data-table td,
.highcharts-data-table th,
.highcharts-data-table caption {
    padding: 0.5em;
}

.highcharts-data-table thead tr,
.highcharts-data-table tr:nth-child(even) {
    background: #f8f8f8;
}

.highcharts-data-table tr:hover {
    background: #f1f7ff;
}