body{
	font-family: Helvetica, Arial, sans-serif;
	color: #354c5f;
}

.h1{
	padding: 1%;
}

.upload{
  padding: 1%;
}

.error{
	color: red;
}

.wrapper{
  padding:1%;
	box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
}

#plot_wrapper{
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.loader{
	position: absolute;
	height: 100%;
	width: 100%;
	display: flex;
	justify-content: center;
}

.slider{
  height: 30px;
  padding = 2%;
}

.bin-label{
  width: 15%;
}

.slider-range {
  -webkit-appearance: none;
  width: 75%;
  height: 10px;
  border-radius: 5px;  
  background: #aec6d6;
  outline: none;
  -webkit-transition: .2s;
  transition: opacity .2s;
}

.slider-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 15px;
  height: 15px;
  border-radius: 50%; 
  background: #0033A0;
  cursor: pointer;
}

.slider-range::-moz-range-thumb {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: #0033A0;
  cursor: pointer;
}

.slider-value{
  width:  10%;
  background:  #0033A0;
  color:  white;
  padding: 1%;
  border-radius:  10%;
  -moz-border-radius:  10%;
  -webkit-border-radius:  10%;
}

.fit-log{
  padding:  2%;
}


.loader-wrapper {
  display: inline-block;
  position: relative;
  width: 80px;
  height: 80px;
}
.loader-wrapper div {
  display: inline-block;
  position: absolute;
  left: 8px;
  width: 16px;
  background: #0033A0;
  animation: loaderAnim 1.2s cubic-bezier(0, 0.5, 0.5, 1) infinite;
}
.loader-wrapper div:nth-child(1) {
  left: 8px;
  animation-delay: -0.24s;
}
.loader-wrapper div:nth-child(2) {
  left: 32px;
  animation-delay: -0.12s;
}
.loader-wrapper div:nth-child(3) {
  left: 56px;
  animation-delay: 0;
}
@keyframes loaderAnim {
  0% {
    top: 8px;
    height: 64px;
  }
  50%, 100% {
    top: 24px;
    height: 32px;
  }
}