h4{
  font-size: 1em;
  font-weight: bolder;
  height: 40px;

}
.page-header{
}
.container{
  width: 100%;
}
.noUi-background {
  height: 8px;
      margin-top: 8px;
          margin-bottom: 8px;
}
.macron .noUi-base .noUi-handle{
  background-color: #542788;
}
.lepen .noUi-base .noUi-handle{
  background-color: #4575b4;
}
.abs .noUi-base .noUi-handle{
  background-color: #878787;
}
.macron {
  background-color: #542788;
}
.lepen {
  background-color: #4575b4;
}
.abs {
  background-color: #878787;
}
.noUi-base .noUi-handle {
  border: none;
  border-radius: 6px;
  box-shadow: none;
  color: #FFFFFF;
  display: table;
  font-size: 1.3em;
  height: 20px;
  left: 0;
  margin-left: -11px;
  margin-top: -10px;
  padding: 0;
  position: absolute;
  text-align: center;
  top: 0;
  width: 40px;
  z-index: 2;
}
.noUi-horizontal .noUi-base .noUi-handle {
  cursor: ew-resize;
}
.noUi-vertical .noUi-base .noUi-handle {
  cursor: ns-resize;
  margin-left: -32px;
}
.noUi-base .noUi-handle:hover {
}
.noUi-base .noUi-handle.noUi-active {
  z-index: 3;
}
.noUi-base .noUi-handle::before {
  background: transparent;
  content: attr(data-value);
  display: table-cell;
  font-size: 1em;
  font-weight: 100;
  position: static;
  width: 100%;
  vertical-align: middle;
}
.noUi-base .noUi-handle::after {
  display: none;
}
@media only screen and (min-width : 481px) {
   .flex-row.row {
   display: flex;
   flex-wrap: wrap;
   }
   .flex-row.row > [class*='col-'] {
   display: flex;
   flex-direction: column;
   }
  .flex-row.row:after, 
  .flex-row.row:before {
   display: flex;
  }
}