::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}
::-webkit-scrollbar-button {
  width: 0px;
  height: 0px;
}
::-webkit-scrollbar-thumb {
  background: #e1e1e1;
  border: 0px none #ffffff;
  border-radius: 52px;
}
::-webkit-scrollbar-thumb:hover {
  background: #ffffff;
}
::-webkit-scrollbar-thumb:active {
  background: #000000;
}
::-webkit-scrollbar-track {
  background: #666666;
  border: 0px none #ffffff;
  border-radius: 50px;
}
::-webkit-scrollbar-track:hover {
  background: #666666;
}
::-webkit-scrollbar-track:active {
  background: #333333;
}
::-webkit-scrollbar-corner {
  background: transparent;
}

  body{
    font-family: 'Roboto', sans-serif;
  }

  .billboard{
    color: white;
    padding-left: 7%;
    padding-top: 7px;
    height: 100vh;
    overflow:auto
  }

  .billboard .bill{
    width: 100%;
    border-radius: 4px;
    display:block;
      margin:auto;
  }

  .billboard .note{
    color: #bdb8ae;
    font-size: 12px;
  }

  .billboard .search {
    border: 0px;
    background: transparent;
    border-bottom: 1px solid #bdb8ae;
    width: 94%;
  }

  .billboard .search:focus {
    border: 0px;
    outline: none;
    background: transparent;
    border-bottom: 1px solid white;
    width: 94%;
  }

  .billboard .subjudul{
    font-weight: bold;
  }

  .green{
    color: #7ebc89;
  }

  .yellow{
    color: #fffd86;
  }

  .purple{
    color: #e87ce0;
  }

  .billboard table{
    width: 100%;
    height: 70vh;
    margin-top: 4%;
  }

  .billboard table th{
    color: #fffd86;
  }

  .billboard tr{
    height: 4vh;
  }

  .billboard td{
    max-width: 50px;
    padding: 7px;
    word-wrap: break-word;
  }

  .billboard .ganjil{
    background: rgb(0, 155, 76,0.1);
  }

  .billboard .infodiv{
    border: 2px solid #001d12;
    border-radius: 15px;
    height: 14vh;
    margin-top: 4vh;
  }

  .billboard .infodiv img{
    width: 50px;
    margin-top: -25px;
  }


.hexagon-wrapper {
  text-align: initial;
  width: 30px;
  height: 30px;
  cursor: pointer;
  position: fixed;
  top: 12px;
  right: 10px;
  z-index: 999;
}

.hexagon {
  position: relative;
  width: 100%;
  height: 61%;
  margin: auto;
  color: white;
  background: #011e12;
  display: flex;
  align-content: center;
  justify-content: center;
  transition: 0.5s;
}

.hexagon i {
  z-index: 1;
  margin: auto;
  font-size: 50px;
  color: transparent;
  background: #e37682;
  background-clip: text;
  -webkit-background-clip: text;
}

.hexagon:before,
.hexagon:after {
  position: absolute;
  content: "";
  background: inherit;
  height: 100%;
  width: 100%;
  border-radius: 0;
  transition: 0.5s;
  transform-origin: center;
}
.hexagon:before {
  transform: rotateZ(60deg);
}
.hexagon:after {
  transform: rotateZ(-60deg);
}
.hexagon:hover {
  border-radius: 50px;
  transition: 0.5s;
}
.hexagon:hover:before {
  border-radius: 50px;
  transition: 0.5s;
}
.hexagon:hover:after {
  border-radius: 50px;
  transition: 0.5s;
}
:root {
  /** sunny side **/
  --blue-background: #C2E9F6;
  --blue-border: #72cce3;
  --blue-color: #96dcee;
  --yellow-background: #fffaa8;
  --yellow-border: #f5eb71;
  /** dark side **/
  --indigo-background: #808fc7;
  --indigo-border: #5d6baa;
  --indigo-color: #6b7abb;
  --gray-border: #e8e8ea;
  --gray-dots: #e8e8ea;
  /** general **/
  --white: #fff;
}

* {
  margin: 0;
  padding: 0;
}

body {
  display: grid;
  place-items: center;
  min-height: 100vh;
  position: relative;
}

.background {
  position: absolute;
  left: 0;
  top: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  transition: all 250ms ease-in;
}

.toggle--checkbox {
  display: none;
}
.toggle--checkbox:checked {
  /** This will all flip from sun to moon **/
  /** Change the label color **/
}
.toggle--checkbox:checked ~ .background {
}
.toggle--checkbox:checked + .toggle--label {
  background: #484848;
  border-color: black;
  /** Change the cloud to stars **/
  /** Change the sun into the moon **/
  /** Show the dimples on the moon **/
}
.toggle--checkbox:checked + .toggle--label .toggle--label-background {
  left: 33px;
  width: 5px;
}
.toggle--checkbox:checked + .toggle--label .toggle--label-background:before {
  width: 5px;
  height: 5px;
  top: -11px;
}
.toggle--checkbox:checked + .toggle--label .toggle--label-background:after {
  width: 5px;
  height: 5px;
  left: -19px;
  top: 8px;
}
.toggle--checkbox:checked + .toggle--label:before {
  background: var(--white);
  border-color: var(--gray-border);
  animation-name: switch;
  animation-duration: 350ms;
  animation-fill-mode: forwards;
}
.toggle--label {
  /** Placeholder element, starting at blue **/
  width: 100%;
  height: 50px;
  background: var(--blue-color);
  border-radius: 100px;
  border: 5px solid var(--blue-border);
  display: flex;
  position: relative;
  transition: all 350ms ease-in;
  /** The sun cloud and moon stars **/
  /** Sun/Moon element **/
  /** Gray dots on the moon **/
}
.toggle--label-background {
  width: 10px;
  height: 5px;
  border-radius: 5px;
  position: relative;
  background: var(--white);
  left: 68%;
  top: 50%;
  transition: all 150ms ease-in;
}
.toggle--label-background:before {
  content: "";
  position: absolute;
  top: -5px;
  width: 30px;
  height: 5px;
  border-radius: 5px;
  background: var(--white);
  left: -14px;
  transition: all 150ms ease-in;
}
.toggle--label-background:after {
  content: "";
  position: absolute;
  top: 5px;
  width: 29px;
  height: 5px;
  border-radius: 5px;
  background: var(--white);
  left: -5px;
  transition: all 150ms ease-in;
}
.toggle--label:before {
  animation-name: reverse;
  animation-duration: 350ms;
  animation-fill-mode: forwards;
  transition: all 350ms ease-in;
  content: "";
  width: 40px;
  height: 40px;
  border: 5px solid var(--yellow-border);
  position: absolute;
  border-radius: 82px;
  background: var(--yellow-background);
}
.toggle--label:after {
  transition-delay: 0ms;
  transition: all 250ms ease-in;
  position: absolute;
  content: "";
  box-shadow: var(--gray-dots) -13px 0 0 2px, var(--gray-dots) -24px 14px 0 -2px;
  left: 143px;
  top: 23px;
  width: 10px;
  height: 10px;
  background: transparent;
  border-radius: 50%;
  opacity: 0;
}

@keyframes switch {
  0% {
    left: 4px;
  }
  60% {
    left: 4px;
    width: 80px;
  }
  100% {
    left: 55%;
  }
}
@keyframes reverse {
  0% {
    left: 55%;
  }
  60% {
    left: 4px;
    width: 80px;
  }
  100% {
    left: 4px;
  }
}

#nav{
    text-align: right;
    margin-top:14px;
}

#nav a{
    text-decoration: none;
    border-radius:5px;
    padding:12px;
    background:#03502e;
    font-weight:bold;
    color:white;
}

.button{
    background: #03472a;
}

.button:hover{
    background: #103021;
}