style.css

@import url('https://use.fontawesome.com/releases/v5.8.1/css/all.css');

body {
    font-family: "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
}

#reportrange {
    background: #fff; 
    cursor: pointer; 
    padding: 5px 10px; 
    border: 1px solid #ccc; 
    text-align: center;
    width: 100%;
}

p:not(:last-child) {
  margin: 0 0 20px;
}

main {
  max-width: 1000px;
  padding: 10px;

  margin-left: auto;
  margin-right: auto;
}

main > section {
  display: none;
  padding: 20px 0 0;
  border-top: 1px solid #abc;
}

main > input {
  display: none;
}

main > label {
  display: inline-block;
  margin: 0 0 -1px;
  padding: 15px 25px;
  font-weight: 600;
  text-align: center;
  color: #abc;
  border: 1px solid transparent;
}

main > label:before {
  font-family: 'Font Awesome 5 Free';
  font-weight: normal;
  margin-right: 10px;
}

main > label[for*='1']:before { content: '\f56d'; font-weight: 900;}
main > label[for*='2']:before { content: '\f574'; font-weight: 900;}
main > label[for*='3']:before { content: '\f247'; font-weight: 900;}


main > label:hover {
  color: #789;
  cursor: pointer;
}

main > input:checked + label {
  color: #45535d;
  border: 1px solid #abc;
  border-bottom: 1px solid #fff;
}

#tab1:checked ~ #content1,
#tab2:checked ~ #content2,
#tab3:checked ~ #content3 {
  display: block;
  text-align: left;
  height: 235px;
}

#fileList {
  height:150px; 
  width:350px;
  overflow:hidden; 
  overflow-y:scroll;
}

@media screen and (max-width: 575px) {
  label {
    padding: 15px;
  }
  #tab1:checked ~ #content1,
  #tab2:checked ~ #content2,
  #tab3:checked ~ #content3 {
  height: 100%;
}
}

.row-centered {
    text-align: center;
}

.page-header {
    background: #6d8394;
    color: #f5f0d7;
}

.page-header a {
    color: #f5f0d7;
    text-decoration: underline;
}

.page-nav-bar {
    background: linear-gradient(#fff, #e1f0fd)
}

.spinner {
    z-index: 100;
    width: 30px;
    height: 30px;
    background-color: #333;
    margin: 100px auto;
    -webkit-animation: rotateplane 1.2s infinite ease-in-out;
    animation: rotateplane 1.2s infinite ease-in-out;
}

.chart{
  margin-bottom: 50px;
}

blockquote{
    margin: 30px 0px 20px 0px;
}

#act-display{
    display: table;
}

div > div.input-group {
    width: 320px;
}

#customControls {
    display: inline-flex;
}

.highcharts-point {
    stroke-width: 0px;
}

@-webkit-keyframes rotateplane {
    0% {
        -webkit-transform: perspective(120px)
    }
    50% {
        -webkit-transform: perspective(120px) rotateY(180deg)
    }
    100% {
        -webkit-transform: perspective(120px) rotateY(180deg) rotateX(180deg)
    }
}

@keyframes rotateplane {
    0% {
        transform: perspective(120px) rotateX(0deg) rotateY(0deg);
        -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg)
    }
    50% {
        transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
        -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg)
    }
    100% {
        transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
        -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
    }
}