@import url("wsWcs.css");

#spinnerbackground.infoload{
  position: fixed;
  background-image: none;
}
#spinnerbox {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 150px;
  height: 150px;
  display: inline-block;
  border-radius: 15px;
}
.infoload #spinnerbox {
  background-color: white;
  box-shadow: 0 0 4px gray;
}
    
.content-box{max-width: 100vw;width: 100%;}
.page-header { margin-top: 0;}
.page-header .tlx {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 2rem;
  margin-top: 1rem;
  margin-bottom: 0rem;
}
.page-header .tlx h2 { margin: 0; margin-bottom: 0.8rem;}
.page-header .tlx .goto { text-decoration: none; }
.page-header .tlx .goto .lbtn {
  display: flex;
  justify-content: center;
  align-items: center;
}
.page-header .tlx .goto .lbtn .lnkrrw {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  background: #bdbdbd52;
  width: 3rem;
  height: 3rem;

  color: black;
  font-size: 3.5rem;
  padding-bottom: 0.5rem;
}
.page-header .tlx .goto .lbtn .lnkrrw.lft {
  padding-right: 0.25rem;
}
.page-header .tlx .goto .lbtn .lnkrrw.rht {
  padding-left: 0.25rem;
}
.page-header .tlx .goto .lnkrrw:hover {
  background:  rgb(0, 153, 255);
  color: black;
}
.page-header .tlx .goto .lnkn{
  font-size: 0.8rem;
  text-decoration: underline;
  color: black;
}
.page-header .tlx .goto:hover .lnkn{ color:rgb(0, 153, 255);}
.page-header .lnkx{ color:#777; }
.page-header .lnkx a{ color:#333; margin-top: -1rem;}
.page-header .lnkx a:hover{ color: darkblue; }
.page-header .lnkx a:visited{ color: darkviolet; }


.guide-basics{ flex-direction:column-reverse; }
.info-guide{
  display: flex;
  justify-content: end;
  margin-top: 0.5rem;
  width: 100%;
}


.stuff {
  display:flex;
  gap: 1rem;
  width: 100%;
  flex-direction: row;
  flex-wrap:wrap;
  justify-content: center;
  height: max-content;
  margin-bottom: 1rem;
}

.c-c .img-box {
  max-height: 60vh;
  overflow: hidden;
  position: relative;
  display: flex;
  justify-content: center;
  transition: all 0.2s ease-in-out 0s;
}


/* hydrograph */
.c.c .charter{
  width:100%;
  height:145px;
  position:relative;
  transition: 0.4s;
}


.dc-i .dci-sh {
  font-weight: bold;
  color: #777;
  text-align: center;
  margin-bottom: 0.5rem;
}

.dc-i.c-d {margin-bottom: 0.6rem;}



.stuff .c-i{
  align-self: start;
  gap: 0.5rem;
  width: auto;
  min-width: 300px;
  transition: 0.5s ease-in-out;
}



/* Magnifglass */
.im-c {
  position:relative;
}
.im-c #main-image{
  width:100%;
}
.im-g {
  position: absolute;
  border: 3px solid #000;
  border-radius: 50%;
  cursor: none;
  width: 200px;
  height: 200px;
}

/* custom times */
.ci-t {
  text-align: center;
}
select.selector {
  background: rgb(0, 153, 255);
  color: #fff;
  padding: 0.5rem;
  font-size: 1rem;
  border: none;
  text-align: center;
}
.ci-t .select-image-time fieldset .date-range{
  display: flex;
  flex-flow: row wrap;
}
.ci-t .select-image-time label {
  display: block;
  text-align: start;
}
.ci-t .select-image-time input {
  margin-left: 1rem;
  color: #444;
  padding: 5px;
  border: 1px solid #cecece;
}
.ci-t .select-image-time .select-img-btn{
  margin: 0.5rem;
}
.ci-t .select-image-time .select-img-btn button{
  border: none;
  padding: 5px;
  background:rgb(0, 153, 255);
  color:white;
  cursor: pointer;
  font-size: 1rem;
}
/* endcustom times */

/* timelapse */
.stuff .ci-l{ }
.stuff .cil-r{
  display: flex;
  gap:1rem;
}
.stuff .cil-pp{ }

/* play slideshow */
.cil-t .btn-loop{
  display: flex;
  border-width: 18.75px 0px 18.75px 18.5px;
}
.playpause  label {
  display: block;

  width: 0;
  height: 37px;

  cursor: pointer;

  border-color: transparent transparent transparent #202020;
  transition: 100ms all ease;
  will-change: border-width;

  border-style: solid;
  border-width: 18.5px 0 18.5px 30px;
}
.playpause input[type='checkbox'] {
  visibility: hidden;
}

.playpause  input[type='checkbox']:checked + label {
  border-style: double;
  border-width: 0px 0 0px 30px;
}
.playpause-name {font-size: 0.8rem;}
.playpausemini{
  display: inline-block;

  width: 0;
  height: 18.5px;
  margin: 0 10px;

  border-color: transparent transparent transparent #555;
  border-style: solid;
  border-width: 9.25px 0 9.25px 15px;
}
.playpausemini.pause {
  border-style: double;
  border-width: 0px 0 0px 15px;
}
/* end play slideshow */
/* Plus & Minus */
.moveside {
  width: 36px;
  height: 36px;
  border: 0;
  position: relative;
}

.moveside:hover span {
  background: grey;
}
.moveside span {
  position: absolute;
  background: #424242;
  border-radius: 2px;
}

.moveside span:nth-child(2) {
  top: 0;
  bottom: 0;
  width: 20%;
  left: 40%;
}

.moveside span:first-child {
  left: 0;
  right: 0;
  height: 20%;
  top: 40%;
}
/* END Plus & Minus */
/* end timelapse */

/* settings */
.cie .user-header {
  display: flex;
  justify-content: center;
  margin-top: 0.5rem;
  font-weight: bold;
}
.cie-m .user-header {
  margin-right: -2rem;
}
.cie-f{
  width: 100%;
}

.control-box {
  position: relative;
  background: white;
  padding: 1rem;
  border-radius: 5px;
  background: #eee;
  border: 1px solid #cecece;
}
.control-box .cbf-r{
  display:flex;
  flex-direction:column;
}
.control-box input.filters {
  width: 80%;
  margin-left: 10%;
}
.range-label{
  font-weight:bold;
  color: gray;
}
.fdflts{
  justify-content: center;
  display: flex;
}
button#fdflt{
  font-size: 1.2rem;
  background: white;
  border: 1px solid grey;
  cursor: pointer;
  color: #5a5a5a;
}
button#fdflt:hover{
  background: #5a5a5a;
  color: white;
}
/* magnify */
.mnfyb {
  display: flex;
  flex-direction: row;
}
.mnfyb button{
  background: white;
  font-size: 1.1rem;
  margin: 0.5rem;
}
.mnfyb button.zoom-enabled {
  background: #09f;
  color: white;
  border: 1px solid #777;
  padding: 5px;
  line-height: 1rem;
}
/* end magnify */

/* Toggle Switch */
/* box around the slider */
.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
  margin-left: 1rem;
}

/* Hide default HTML checkbox */
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

/* The slider */
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
  font-weight: normal;
}

.slider::before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}
.slider::after {
  content: 'OFF';
  color: white;
  display: block;
  position: absolute;
  transform: translate(25%,-50%);
  top: 50%;
  left: 50%;
  font-size: 10px;
  font-family: Verdana, sans-serif;
}

input:focus + .slider {
  box-shadow: 0 0 1px #2196F3;
}
input:checked + .slider {
  background-color: #2196F3;
}
input:checked + .slider::after {
  content: 'ON';
  transform: translateX(26px);
  transform: translate(-150%,-50%);
}
input:checked + .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}

/* Rounded sliders */
.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}

/* Custom colors */
.slider.redoff {
  background-color: #c1010175;
}
input:checked + .slider.greenon {
  background-color: #00c87d;
}

input:focus + .slider.greenon {
  box-shadow: 0 0 1px #00c87d;
}
/*
 * END sliders 
 */

/* end settings */
/* thumbnail */
.i-c {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-evenly;
  gap: 1rem;
}
.i-c img {
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 5px;
  width: 150px;
}
.i-c img:hover {
  box-shadow: 0 0 2px 1px rgba(0, 140, 186, 0.5);
}

.img-thumb{
  display: flex;
  justify-content: end;
}
figcaption {font-size:1.25rem;}

.v-t {
  position: absolute;
  border: 1px solid;
  color: #aeaeae;
  color: green;
  border-radius: 10px;
  padding: 0 3px;
}
.v-t:hover {
  color:white ;
  background: green;
}
.v-t::after {  content: '\2713';}
.v-t::after { 
  /*content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='eye-slash-fill' viewBox='0 0 16 16'%3E%3Cpath d='m10.79 12.912-1.614-1.615a3.5 3.5 0 0 1-4.474-4.474l-2.06-2.06C.938 6.278 0 8 0 8s3 5.5 8 5.5a7.029 7.029 0 0 0 2.79-.588zM5.21 3.088A7.028 7.028 0 0 1 8 2.5c5 0 8 5.5 8 5.5s-.939 1.721-2.641 3.238l-2.062-2.062a3.5 3.5 0 0 0-4.474-4.474L5.21 3.089z'/%3E%3Cpath d='M5.525 7.646a2.5 2.5 0 0 0 2.829 2.829l-2.83-2.829zm4.95.708-2.829-2.83a2.5 2.5 0 0 1 2.829 2.829zm3.171 6-12-12 .708-.708 12 12-.708.708z'/%3E%3C/svg%3E"); */
}
.img-thumb.active img{ border: 3px solid #bf1f1f !important; }
.img-thumb.disabled img {
  filter: blur(0.2rem);
}
.img-thumb.disabled .v-t {
  color: white;
  background: #778;
}
.img-thumb.disabled .v-t:hover {
  color: #ff6b49;
  background: white;
}
.img-thumb.disabled .v-t::after { 
  /* content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='eye' viewBox='0 0 16 16'%3E%3Cpath d='M16 8s-3-5.5-8-5.5S0 8 0 8s3 5.5 8 5.5S16 8 16 8zM1.173 8a13.133 13.133 0 0 1 1.66-2.043C4.12 4.668 5.88 3.5 8 3.5c2.12 0 3.879 1.168 5.168 2.457A13.133 13.133 0 0 1 14.828 8c-.058.087-.122.183-.195.288-.335.48-.83 1.12-1.465 1.755C11.879 11.332 10.119 12.5 8 12.5c-2.12 0-3.879-1.168-5.168-2.457A13.134 13.134 0 0 1 1.172 8z'/%3E%3Cpath d='M8 5.5a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5zM4.5 8a3.5 3.5 0 1 1 7 0 3.5 3.5 0 0 1-7 0z'/%3E%3C/svg%3E");*/
  content: '\2717';
}
/* end thumbnail */

.stuff .c-c{
  display: flex;
  align-self: start;
}
.stuff .c-i {margin-right: rem;}
.guide-basics{
  flex-direction:column;
}




/* Available Images */
.more{
  border-top: 1px solid #cacaca;
  border-bottom: 1px solid #cacaca;
}
.availimgs, .hg{
  padding-bottom: 0.5rem;
  width: 100%;
  display: flex;
  justify-content: center;
  cursor:pointer;
  margin-top: 5px;
}
.hg{margin-top:10px;}
.availimgs .avltitle, .hg .hgtitle{
  display: flex;
  flex-direction: row;
  color: #777;
  /* justify-content: center; */
  padding: 0.5rem 1rem 0.5rem 1rem;
  font-size: 1rem;
  font-weight: bold;
  margin-bottom: 10px;
  text-align: center;
}

.hg .hgtitle {margin-bottom: 0; padding-bottom:0;}

.availimgs .wso, .hg .hgo{
    display: block;
    width: 1.2rem;
    height: 1.2rem;
    margin-top: 0.4rem;
    border-top: 0.25rem solid #667;
    border-right: 0.25rem solid #667;
    transform: rotate(135deg);
}
.availimgs .wso.odwn, .hg .hgo.odwn {transform: rotate(45deg);}


/* The Modal (background) */
.modal {
  display: block;
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgb(0,0,0);
  background-color: rgba(0,0,0,0.4); 
}
.modal-header {
  padding: 2px 16px;
  background-color: #bdbdbd52;
}

.modal-body {padding: 2px 16px;}
.modal-body li{margin-bottom: 1rem;}

.modal-content {
  background-color: #fefefe;
  margin:10vh auto;
  padding: 20px;
  border: 1px solid #888;
  width: 80%; /* Could be more or less, depending on screen size */
}

.closemod {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.closemod:hover, .closemod:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}
/* end MODAL */
                                

@media (max-width: 768px){
	.hdsm{display: none;}
	.dc-i.c-d {margin-bottom: -10px;}
	.c-c .img-box{overflow: visible;max-height: 100%;}
}
@media (min-width: 768px){
	
	.hdlg{display: none;}
  .stuff {
    flex-wrap: nowrap;
  }
  .img-box{ max-height:65vh;height: 60vh;width:auto;}
  .info-guide{margin-top: 0; margin-bottom: 0.5rem;}
  .im-c #main-image {
    object-fit: contain;
    height: 100%;
  }
  .stuff .c-i {margin-right: 2rem;}
  .stuff .c-c { max-width: 75vw; }
}


@media only screen and (min-width: 760px) and (max-width: 1300px)  {
  .content-box {
    margin-top: 1.1rem;
  }
}