/* 
Main color: #88B04B
Secondary Darker: #A4FF19 | #255957
Teritiary Lighter: #9AFF00 | #EEEBD3
Complementary: #8F00B2 | #437C90
2nd Complementary: #CC00FF | #F7C548
 */
html,
body {
  height: 100%;
}

body.default,
.body-bg {
  background: #fbfffb;
}

body.default:before {
  content: "";
  display: block;
  height: 600px;
  width: 600px;
  bottom: 0;
  left: 0;
  z-index: -99;
  position: fixed;
  background-image: url("../../img/bg_container_2017_bottom_left.png");
  background-position: left bottom;
  background-repeat: no-repeat;
  pointer-events: none;
}


body.default:after {
  content: "";
  display: block;
  height: 200px;
  width: 200px;
  bottom: -200px;
  left: -200px;
  opacity: 0;
  z-index: 997;
  position: fixed;
  background-image: url("../../img/zoo/bunglon.gif");
  background-position: left bottom;
  background-repeat: no-repeat;
  pointer-events: none;
  -webkit-transition: bottom .4s cubic-bezier(.87,-.41,.19,1.44), 
                      left .4s cubic-bezier(.87,-.41,.19,1.44), 
                      opacity .25s ease-in;
     -moz-transition: bottom .4s cubic-bezier(.87,-.41,.19,1.44), 
                      left .4s cubic-bezier(.87,-.41,.19,1.44), 
                      opacity .25s ease-in;
      -ms-transition: bottom .4s cubic-bezier(.87,-.41,.19,1.44), 
                      left .4s cubic-bezier(.87,-.41,.19,1.44), 
                      opacity .25s ease-in;
       -o-transition: bottom .4s cubic-bezier(.87,-.41,.19,1.44), 
                      left .4s cubic-bezier(.87,-.41,.19,1.44), 
                      opacity .25s ease-in;
          transition: bottom .4s cubic-bezier(.87,-.41,.19,1.44), 
                      left .4s cubic-bezier(.87,-.41,.19,1.44), 
                      opacity .25s ease-in;
}
body.default.ayam:after {
  opacity: 1;
  bottom: 5px;
  left: -200px;
  background-image: url("../../img/zoo/ayam.gif");
  -moz-transform: scaleX(-1);
  -o-transform: scaleX(-1);
  -webkit-transform: scaleX(-1);
  transform: scaleX(-1);
}
body.default.kucing:after {
  opacity: 1;
  bottom: -200px;
  left: 20px;
  background-image: url("../../img/zoo/kucing.gif");
}
body.default.panda:after {
  opacity: 1;
  bottom: -200px;
  left: 20px;
  background-image: url("../../img/zoo/panda.gif");
}
body.default.sapi:after {
  bottom: -200px;
  left: 20px;
  background-image: url("../../img/zoo/sapi.gif");
}
body.default.penguin:after {
  bottom: 1000px;
  left: 20px;
  background-image: url("../../img/zoo/penguin.gif");
}
body.default.gajah:after {
  opacity: 1;
  bottom: 5px;
  left: -200px;
  background-image: url("../../img/zoo/gajah.gif");
  -moz-transform: scaleX(-1);
  -o-transform: scaleX(-1);
  -webkit-transform: scaleX(-1);
  transform: scaleX(-1);
}
body.default.bunglon:after {
  opacity: 1;
  bottom: -200px;
  left: 20px;
  background-image: url("../../img/zoo/bunglon.gif");
}
body.default.monyet:after {
  opacity: 1;
  bottom: 5px;
  left: -200px;
  background-image: url("../../img/zoo/monyet.gif");
}
body.default.beruang:after {
  opacity: 1;
  bottom: -200px;
  left: 20px;
  background-image: url("../../img/zoo/bear.gif");
}
body.default.kelinci:after {
  opacity: 1;
  bottom: 5px;
  left: -200px;
  background-image: url("../../img/zoo/rabbit.gif");
}
body.default.rusa:after {
  opacity: 1;
  bottom: 5px;
  left: -300px;
  height: 300px;
  width: 300px;
  background-image: url("../../img/zoo/reindeer.gif");
}
body.default.beruang-selow:after {
  opacity: 1;
  left: 20px;
  bottom: -250px;
  height: 250px;
  width: 250px;
  background-image: url("../../img/zoo/sitting_bear.gif");
}
body.default.parrot:after {
  opacity: 1;
  bottom: -200px;
  left: 20px;
  background-image: url("../../img/zoo/parrot.gif");
}
body.default.parrot:after {
  opacity: 1;
  bottom: -200px;
  left: 20px;
  background-image: url("../../img/zoo/parrot.gif");
}
body.default.dino:after {
  opacity: 1;
  bottom: 5px;
  left: -200px;
  background-image: url("../../img/zoo/dino.gif");
}
body.default.empat-ikan:after {
  opacity: 1;
  bottom: -200px;
  left: 20px;
  background-image: url("../../img/zoo/empat-ikan.gif");
}
body.default.avocado:after {
  opacity: 1;
  bottom: -200px;
  left: 20px;
  background-image: url("../../img/zoo/avocado.gif");
}
body.default.mama-sloth:after {
  opacity: 1;
  bottom: 5px;
  left: -200px;
  background-image: url("../../img/zoo/mama-sloth.gif");
}
body.default.lompat:after {
  opacity: 1;
  bottom: -200px;
  left: 20px;
  background-image: url("../../img/zoo/lompat.gif");
}
body.default.jerapah:after {
  opacity: 1;
  bottom: -200px;
  left: 20px;
  background-image: url("../../img/zoo/jerapah.gif");
}
body.default.mama-gajah:after {
  opacity: 1;
  bottom: 5px;
  left: -200px;
  background-image: url("../../img/zoo/mama-gajah.gif");
}
body.default.show-idle:after {
  display: block;
  bottom: 5px;
  left: 20px;
  opacity: 1;
  -moz-transform: scaleX(1);
  -o-transform: scaleX(1);
  -webkit-transform: scaleX(1);
  transform: scaleX(1);
}
body.default.show-idle.rusa:after,
body.default.show-idle.monyet:after {
  -moz-transform: scaleX(-1);
  -o-transform: scaleX(-1);
  -webkit-transform: scaleX(-1);
  transform: scaleX(-1);
}

.jumbotron {
  border-top: #263015 5px solid;
  border-bottom: #263015 5px solid;
  position: relative;
  padding: 5px 0;
  color: #000;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .4), 0 0 30px rgba(0, 0, 0, .075);
  background: #88B04B;
  background-image: url("../../img/bg_header_2017.png");
  background-size: auto 100%;
  background-position: left center;
  background-repeat: no-repeat;
/*  -webkit-box-shadow: inset 0 3px 7px rgba(0, 0, 0, .2), inset 0 -3px 7px rgba(0, 0, 0, .2);
  -moz-box-shadow: inset 0 3px 7px rgba(0, 0, 0, .2), inset 0 -3px 7px rgba(0, 0, 0, .2);
  box-shadow: inset 0 3px 7px rgba(0, 0, 0, .2), inset 0 -3px 7px rgba(0, 0, 0, .2);*/
}

.jumbotron:after {
  content: "";
  position: absolute;
  display: block;
  background: transparent;
  background-image: url("../../img/bg_header_2017_right.png");
  background-size: auto 100%;
  background-position: right top;
  background-repeat: no-repeat;
}

.simrslogotext {
  margin-top: 15px;
  color: #eee;
}

img.simrs-symbol {
  vertical-align: super;
  width: 20px;
  position: absolute;
  top: 10px;
  margin-left: 5px;
  opacity: .8;
}

.simrslogotext .blue {
  color: #6D2914;
}

.simrslogotext .cap {
  color: #000;
}
.simrslogotext .subcap {
  color: #000;
  font-family: 'Gugi', sans-serif;
  vertical-align: top;
  font-size: 22px;
}
#judulDashboard {
  margin-top: -10px;
  color: #252F15;
  text-shadow: 0 1px 0 #FCEFCD, 0 -1px 0 #FCEFCD, 0 2px 1px #F9DA8A, 0 3px 2px #9F8B58;
}

#judulDashboard .subtitle {
  color: #252F15;
  text-shadow: 0 1px 0 #FCEFCD, 0 -1px 0 #FCEFCD, 0 2px 1px #F9DA8A, 0 3px 2px #9F8B58;
}

.ray {
  top: 2px;
  height: 43px;
}

.btn-simrs-header {
  color: #32401C;
  padding: 10px;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
  text-shadow: none;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 3px;
  border: 1px solid rgba(0, 0, 0, .5);
  border: none;
  box-shadow: none;
  margin-top: 3px;
}

.btn-simrs-header a {
  color: #E0BD64;
}

.simrslogindiv p,
#clock {
  font-size: 1.3em;
  line-height: 1.5em;
  margin: 0;
  text-transform: uppercase;
  font-weight: bold;
}

#topmenu {
  border: none;
}

#topmenu .navbar-inner.navbar-header {
  border: none;
  border-bottom: 1px solid rgba(0, 0, 0, .3);
/*  box-shadow: 0px 0px 10px rgba(33, 62, 83, 0.5) inset;*/
}

.show-grid [class*="span"] {
  background-color: #EEEBD3;
}

.show-grid [class*="span"]:hover {
  background-color: #EEEBD3;
}

.yamm-content .accordion  .accordion-heading .accordion-toggle,
.yamm-content .row-fluid [class*="span"] a {
  margin-left: 0;
  padding-left: 10px;
}

.show-grid .accordion-inner a {
  background-color: transparent;
  color: #255957;
}

.show-grid .accordion-inner a:hover {
  background-color: #F7C548;
  text-decoration: none;
}

.well {
  background-color: #F8F7EF;
  border: 1px solid #88B04B;
}

ul.nav-tabs.nav-well li.active a {
  background-color: #F8F7EF;
  border: 1px solid #88B04B;
  border-bottom-color: #F8F7EF;
}

.wallpaper {
  display: block;
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: -9999;
  opacity: 0.3;
  background: transparent url('../../img/wallpaper_sardjito_2017.jpg?v=1.1') top no-repeat;
  background-size: cover;
  background-position: right center;
}

.wallpaper .wallpaper-image {
  display: block;
  position: relative;
  width: 100%;
}

.wallpaper:after {
  content: " ";
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAADCAYAAABWKLW/AAAAF0lEQVQYV2NkQAKMUPZ/BgYGRhgHLAYAEnEBBJU1VYUAAAAASUVORK5CYII=);
  opacity: .5;
}

#left-bottom-anim-container {
  display: block;
  position: fixed;
  bottom: 0;
  left: 0;
  width: 150px;
  height: 400px;
  overflow: hidden;
  background: transparent;
  z-index: -98;
  pointer-events: none;
}

.leaf {
  width: 25px;
  height: 25px;
  position: absolute;
  background: url(../../img/leaf1.png);
  background-size: 100% 100%;
  pointer-events: none;
}

.text-darker {
  color: #333;
}

.blinker {
  color: #006d27;
}

div.wrapper-judul {
  background-color: #437526;
  color: #FFF;
/*  box-shadow: inset 0px -2px 8px rgba(0, 0, 0, .2);*/
}

#system-loading > .spinner{
  background: transparent url('../../img/spinner-rainbow.gif') 0 0 no-repeat;
  text-align: center;
  position: relative;
  margin: 0 auto;
  width: 127px;
  height: 127px;
}

#system-loading {
    background-color: transparent;
    border: none;
    box-shadow: none;
    clear: both;
}

#system-loading > .div-notif {
    text-align: center;
    position: relative;
    margin: 0 auto;
    padding-top: 10px;
}

#loading > .spinner{
  background: transparent url('../../img/spinner-rainbow.gif') 0 0 no-repeat;
  text-align: center;
  position: relative;
  margin: 0 auto;
  width: 127px;
  height: 127px;
}
/* orbitron-regular - latin */
@font-face {
  font-family: 'Orbitron';
  font-style: normal;
  font-weight: 400;
  src: url('../../fonts/orbitron-v15-latin-regular.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../../fonts/orbitron-v15-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../../fonts/orbitron-v15-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../../fonts/orbitron-v15-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../../fonts/orbitron-v15-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../../fonts/orbitron-v15-latin-regular.svg#Orbitron') format('svg'); /* Legacy iOS */
}
/* orbitron-600 - latin */
@font-face {
  font-family: 'Orbitron';
  font-style: normal;
  font-weight: 600;
  src: url('../../fonts/orbitron-v15-latin-600.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../../fonts/orbitron-v15-latin-600.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../../fonts/orbitron-v15-latin-600.woff2') format('woff2'), /* Super Modern Browsers */
       url('../../fonts/orbitron-v15-latin-600.woff') format('woff'), /* Modern Browsers */
       url('../../fonts/orbitron-v15-latin-600.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../../fonts/orbitron-v15-latin-600.svg#Orbitron') format('svg'); /* Legacy iOS */
}
/* orbitron-800 - latin */
@font-face {
  font-family: 'Orbitron';
  font-style: normal;
  font-weight: 800;
  src: url('../../fonts/orbitron-v15-latin-800.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../../fonts/orbitron-v15-latin-800.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../../fonts/orbitron-v15-latin-800.woff2') format('woff2'), /* Super Modern Browsers */
       url('../../fonts/orbitron-v15-latin-800.woff') format('woff'), /* Modern Browsers */
       url('../../fonts/orbitron-v15-latin-800.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../../fonts/orbitron-v15-latin-800.svg#Orbitron') format('svg'); /* Legacy iOS */
}
/* orbitron-900 - latin */
@font-face {
  font-family: 'Orbitron';
  font-style: normal;
  font-weight: 900;
  src: url('../../fonts/orbitron-v15-latin-900.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../../fonts/orbitron-v15-latin-900.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../../fonts/orbitron-v15-latin-900.woff2') format('woff2'), /* Super Modern Browsers */
       url('../../fonts/orbitron-v15-latin-900.woff') format('woff'), /* Modern Browsers */
       url('../../fonts/orbitron-v15-latin-900.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../../fonts/orbitron-v15-latin-900.svg#Orbitron') format('svg'); /* Legacy iOS */
}
.simrslogotext .cap {
  font-family: 'Orbitron', 'Faster One', sans-serif;
  font-weight: 900;
  font-size: 45px;
}