/*!Uncontained*/

@font-face {
  font-family: 'Ubuntu';
  font-style: normal;
  font-weight: 300;
  src: url("fonts/ubuntu-l-webfont.woff2") format("woff2"), url("fonts/ubuntu-l-webfont.woff") format("woff"); }


* {
  padding: 0;
  margin: 0;
}

html,
body {
  background:#F1F1F1;
  min-height:100vh;
  overflow-x: hidden;
  font-family:Ubuntu;
  color:black;
}

#headertext{
    text-align:center;
    font-size:60px;
    line-height: 1.6;
    font-weight:300;
}

.nav-tabs{
    border-bottom:1px solid #3a3737;;
}

#main{
    min-height:75vh;
}

.description{
    margin-top:20px;
    font-size:15px;
}

#upload-wrapper {
	margin-right: auto;
	margin-left: auto;
	padding: 15px;
}
#upload-wrapper h3 {
	padding: 0px 0px 10px 0px;
	margin: 0px 0px 20px 0px;
	margin-top: -30px;
	border-bottom: 1px dotted #DDD;
}
#upload-wrapper input[type=file] {
    display:none;
}

#encresults, #decresults{
    display:none;
}

#encprogressbox, #decprogressbox{
    display:none;
    margin-top:15px;
}

#encoutput{
	padding: 5px;
	font-size: 12px;
}

#huffmancodes{
    border-radius:5px;
    border:1px solid #d7d7d7;
    padding:15px;
    height:400px;
    overflow-y:scroll;
}

pre{
    border:none;
    background:black;
    color:white;
}


#encdownload{
    border-radius:5px;
    border:1px solid #d7d7d7;
    padding:15px;
    height:400px;
    text-align:justify;
    font-size:16px;
}

#decresults{
    border:1px solid #d7d7d7;
    margin-top:35px;
    text-align:center;
    padding:20px;
}

#decdownload{
    font-size:16px;
}




#loading {
  width: 100%;
  line-height: 30px;
  position: absolute;
  top: 50%;
  margin-top: -15px;
  text-align: center;
  display:none;
}

#loading li {
  display: inline-block;
  width: 10px;
  height: 10px;
  background: black;
  border-radius: 100%;
  position: absolute;
  left: -10px;
}

#loading li:nth-child(1) {
  animation: first 4s infinite;
}

#loading li:nth-child(2) {
  animation: second 4s infinite;
  animation-delay: .3s;
}

#loading li:nth-child(3) {
  animation: third 4s infinite;
  animation-delay: .6s;
}

#loading li:nth-child(4) {
  animation: fourth 4s infinite;
  animation-delay: .9s;
}

#loading li:nth-child(5) {
  animation: fifth 4s infinite;
  animation-delay: 1.2s;
}

@keyframes first {
  0% {
    left: -10px;
  }
  25% {
    left: calc(50% + 22px);
  }
  50% {
    left: calc(50% + 22px);
  }
  75% {
    left: calc(100% + 10px);
  }
  100% {
    left: calc(100% + 10px);
  }
}

@keyframes second {
  0% {
    left: -10px;
  }
  25% {
    left: calc(50% + 11px);
  }
  50% {
    left: calc(50% + 11px);
  }
  75% {
    left: calc(100% + 10px);
  }
  100% {
    left: calc(100% + 10px);
  }
}

@keyframes third {
  0% {
    left: -10px;
  }
  25% {
    left: 50%;
  }
  50% {
    left: 50%;
  }
  75% {
    left: calc(100% + 10px);
  }
  100% {
    left: calc(100% + 10px);
  }
}

@keyframes fourth {
  0% {
    left: -10px;
  }
  25% {
    left: calc(50% - 11px);
  }
  50% {
    left: calc(50% - 11px);
  }
  75% {
    left: calc(100% + 10px);
  }
  100% {
    left: calc(100% + 10px);
  }
}

@keyframes fifth {
  0% {
    left: -10px;
  }
  25% {
    left: calc(50% - 22px);
  }
  50% {
    left: calc(50% - 22px);
  }
  75% {
    left: calc(100% + 10px);
  }
  100% {
    left: calc(100% + 10px);
  }
}

#footer {
    bottom:10px;
    width:100%;
}