/* HTML and body */
html body {
  height: 100%;
  width: 100%;
  position: fixed;
}

/* LOADING PROGRESS BAR */
.progressBarLoadScreen {
  animation: progressBarAnimation 1s linear infinite;
}
@keyframes progressBarAnimation {
  0% {background: rgba(11, 85, 122, 1)}
  50% {background: rgb(7, 54, 77)}
  100% {background: rgba(11, 85, 122, 1)}
}

/* Limit SVG size */
.icon-svg {
  width: 45px;
  height: 45px;
}

.icon-svg:hover {
  border-width: 2px;
  border-color: black;
  border-style: solid;
  border-radius: 50%;
  background-color: rgb(176, 176, 176);
}

.roundButton {
  border-style: none;
  padding: 0;
  margin-bottom: 10px;
  border-radius: 50%;
}



/* SLIDERS */ 
.input-slider {
  -webkit-appearance: none;
  outline-width: thick;
  background: #f5faff;
  height: 10px;
  border-radius: 10px;
}

.input-slider:hover {
  background: #ddedff;
}

.input-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: #00608d;
  cursor: pointer;
}
.input-slider::-moz-range-thumb {
  width: 25px;
  height: 25px;
  background: #00608d;
  cursor: pointer;
}

/* SCROLLBAR */
/* Works on Firefox */
* {
  scrollbar-width: auto;
  scrollbar-color: #d7effa #90b1c1;
}

/* Works on Chrome, Edge, and Safari */
*::-webkit-scrollbar {
  width: 10px;
}
*::-webkit-scrollbar-track {
  background: #d7effa;
}

*::-webkit-scrollbar-thumb {
  background-color: #90b1c1;
  border-radius: 5px;
  border: 1px solid #5f8698;
}

*::-webkit-scrollbar-thumb:hover {
  background-color: #719baf;
  border-radius: 5px;
  border: 1px solid #5f8698;
}



/* INFO PANELS */
.content {
  padding: 20px;
  overflow: auto;
  font-size: 14px;
}

.container-columns {
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  align-items: center;
}

.container-rows {
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;
  flex-wrap: nowrap;
}


/* BUTTON */
button {
  pointer-events: visible;
}





@media (max-width: 770px) or (max-height: 700px) {

  .icon-svg {
    width: 35px;
    height: 35px;
  }

}