::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: gray;
  opacity: 1; /* Firefox */
}

:-ms-input-placeholder { /* Internet Explorer 10-11 */
  color: gray;
}

::-ms-input-placeholder { /* Microsoft Edge */
  color: gray;
}

/* Page layout */

:root {
  --background-color: #ffffff;
  --text-color: #343a40;
  --link-color: #2c68a0;
  --link-visited-color: #33d1ff;
  --external-link-color: #2c68a8;
  --hover-color: #9400D3;
  --sitebar-background-color: #f5f5f5;
  --toc-background-color: #f8f9fa;
  --toc2-background-color: #ffffff;
  --toc2-color: black;
  --head-background-color: #e6e6ff;
  --white-background-color: #ffffff;
  --yellow-background-color: #ffb84d;
  --background-image: url('./img/Globe10SVG_Gray_1000.png');
}

.ec-theme-light {
  --background-color: #ffffff;
  --text-color: #212529;
  --external-link-color: #2c68a8;
  --link-visited-color: #33d1ff;
  --link-color: #2c68a0;
  --hover-color: #9400D3;
  --sitebar-background-color: #f5f5f5;
  --toc-background-color: #f8f9fa;
  --toc2-background-color: #ffffff;
  --toc2-color: black;
  --head-background-color: #e6e6ff;
  --white-background-color: #ffffff;
  --yellow-background-color: #ffb84d;
  --background-image: url('./img/Globe10SVG_Gray_1000.png');
}

/* Dark mode switch */
.ec-theme-dark  {
  --background-color: #3F3F3F;
  --text-color: #fff;
  --link-color: #ffb84d;
  --external-link-color:#ccccff;
  --link-visited-color: #99ccff;
  --hover-color:  #9bedfe;
  --sitebar-background-color: #353935;
  --toc-background-color: #353935;
  --toc2-background-color: #3f3f3f;
  --toc2-color: #f6a11a;
  --head-background-color: #4a235a;
  --white-background-color: #353935;
  --yellow-background-color: #ac6a07;
  --background-image: url('./img/Globe10SVG_Dark_1000.png');
}


/* The switch - the box around the darkslider */
.darkswitch {
  position: relative;
  display: inline-block;
  width: 50px;
  height: 26px;
  float: right;
  margin-left: 10px;
  margin-right: 10px;
  margin-top: 12px;
}

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

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

.darkslider:before {
  position: absolute;
  content: "";
  height: 30px;
  width: 30px;
  left: 0px;
  bottom: 4px;
  top: 0;
  bottom: 0;
  margin: auto 0;
  -webkit-transition: 0.4s;
  transition: 0.4s;
  box-shadow: 0 0px 15px #2020203d;
  background: white url('/r/img/sunny.png');
  background-repeat: no-repeat;
  background-position: center;
}

input:checked + .darkslider {
  background-color: #2196f3;
}

input:focus + .darkslider {
  box-shadow: 0 0 1px #2196f3;
}

input:checked + .darkslider:before {
  -webkit-transform: translateX(24px);
  -ms-transform: translateX(24px);
  transform: translateX(24px);
  background: #0077b8 url('/r/img/night.png');
  background-repeat: no-repeat;
  background-position: center;
}

/* Rounded darksliders */
.darkslider.round {
  border-radius: 30px;
}

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