/*! explorer3d.css
 * (c) 2017, Dylan Nelson
 */

#viewport {
    position: absolute;
    top: 50px;
    right: 0; 
    left: 0;
    bottom: 0;
    padding: 0;
    background-color: black;
}


.modal {
    overflow-y: auto; /* disable scrollbar from appearing */
    z-index: 100001; /* over leaflet controls */
}
.modal-dialog {
    width: 60%;
}
@media(max-width:767px){
    /* let galaxy modal take whole screen (like sidebar) for small screens */
    .modal-dialog {
    width: 100%;
    margin-top: 50px;
    padding: 0;
    }
    .modal-content {
    /* height: 100%; */
    border-radius: 0;
    }
    }
    .modalHeader {
    margin-top: 0;
}


/* https://github.com/tobiasahlin/SpinKit/blob/master/css/spinkit.css */
#loading {
 /*display: none;*/
 z-index: 100;
 position: fixed;
 top: 50%;
 left: 50%;
 margin-top: -70px; /* 20+50 */
 margin-left: -25px;
 text-align: center;
}

.sk-wave {
  margin: 40px auto;
  width: 50px;
  height: 40px;
  text-align: center;
  font-size: 10px; }
  .sk-wave .sk-rect {
    background-color: #bbb;
    height: 100%;
    width: 6px;
    display: inline-block;
    -webkit-animation: sk-waveStretchDelay 1.2s infinite ease-in-out;
            animation: sk-waveStretchDelay 1.2s infinite ease-in-out; }
  .sk-wave .sk-rect1 {
    -webkit-animation-delay: -1.2s;
            animation-delay: -1.2s; }
  .sk-wave .sk-rect2 {
    -webkit-animation-delay: -1.1s;
            animation-delay: -1.1s; }
  .sk-wave .sk-rect3 {
    -webkit-animation-delay: -1s;
            animation-delay: -1s; }
  .sk-wave .sk-rect4 {
    -webkit-animation-delay: -0.9s;
            animation-delay: -0.9s; }
  .sk-wave .sk-rect5 {
    -webkit-animation-delay: -0.8s;
            animation-delay: -0.8s; }

@-webkit-keyframes sk-waveStretchDelay {
  0%, 40%, 100% {
    -webkit-transform: scaleY(0.4);
            transform: scaleY(0.4); }
  20% {
    -webkit-transform: scaleY(1);
            transform: scaleY(1); } }

@keyframes sk-waveStretchDelay {
  0%, 40%, 100% {
    -webkit-transform: scaleY(0.4);
            transform: scaleY(0.4); }
  20% {
    -webkit-transform: scaleY(1);
transform: scaleY(1); } }

#notSupported {
  width: 50%;
  margin: auto;
  border: 2px red solid;
  margin-top: 20px;
  padding: 10px;
  background: orange;
}

#info {
  position: absolute;
  bottom: 0;
  width: 100%;
  color: #444;
  padding: 6px;
  text-align: center;
  z-index: 100;
  display: none;
}

#haloinfo {
  position: absolute;
  top: 60px;
  right: 10px;
  width: 340px;
  height: auto;
  background-color: rgba(40,40,40,0.5);
  color: #666;
  padding: 6px;
  z-index: 100;
  font-size: 9px;
  overflow: hidden;
  display: none;
}

#haloinfo .skey {
  color: #999;
}

#haloinfo h3 {
  margin-top: 0;
  padding-top: 0;
  font-size: 13px;
  color: #ccc;
}

#colorbar {
  width:256px;
  height:30px;
  background: #000;
  opacity: 0.5;
  border:1px solid #aaa;
  position:absolute;
  top: 60px;
  right: 10px;
  margin: 0 auto;
  display: none;
  text-align: center;
  z-index: 10001;
}
#colorbar:hover {
  opacity: 0.8;
}
#colorbar p {
  margin: 0;
  padding: 0px 8px;
  font-size: 18px;
  color:#fff;
}

.dg input[type="text"], textarea {
  background-color : red; 
}
.c select {
  background-color : #333;
  color: #fff; 
}

.about-text {
  color: #888;
  /*display: block;*/
  /*overflow: visible;*/
  line-height: auto; /*200px;*/
  padding: 4px;
  text-align: center;
  font-size: 10px;
  /*height: 80px;
  width: 200px;
  display: block;*/
}