@font-face {
    font-family: 'A-Love-of-Thunder';
    src:url('fonts/A-Love-of-Thunder.ttf.woff') format('woff'),
        url('fonts/A-Love-of-Thunder.ttf.svg#A-Love-of-Thunder') format('svg'),
        url('fonts/A-Love-of-Thunder.ttf.eot'),
        url('fonts/A-Love-of-Thunder.ttf.eot?#iefix') format('embedded-opentype'); 
    font-weight: normal;
    font-style: normal;
}
.loading-page {
  text-align: center;
  position:absolute;
  width:100%;
  height:100%;
  top:0;
  margin-top:-75px;
  animation:load 1.25s infinite;
  padding-top:calc(50vh);
}

@keyframes juggler {
  0% {
    transform: translateX(0px) translateY(0px);
  }
  12.5% {
    transform: translateX(-40px) translateY(80px) scale(1.1);
  }
  25% {
    transform: translateX(-80px) translateY(0px);
  }
  37.5% {
    transform: translateX(-40px) translateY(-80px);
  }
  50% {
    transform: translateX(0px) translateY(0px);
  }
  62.5% {
    transform: translateX(40px) translateY(80px) scale(1.1);
  }
  75% {
    transform: translateX(80px) translateY(0px);
  }
  87.5% {
    transform: translateX(40px) translateY(-80px);
  }
  100% {
    transform: translateX(0px) translateY(0px);
  }
}
span.ball {
  position: absolute;
  background: rgba(255,255,255,0.2);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  animation: juggler 1.8s linear infinite;
}
span.ball:nth-child(1) {
  animation-delay: -0.6s;
}
span.ball:nth-child(2) {
  animation-delay: -1.2s;
}
.bg-carbon{
    position:fixed;
    z-index:-1;
    bottom:0;
    left:0;
    right:0;
    top:0px;
    width:100%;
    min-height:100%;
    background:
    radial-gradient(black 15%, transparent 16%) 0 0,
    radial-gradient(black 15%, transparent 16%) 8px 8px,
    radial-gradient(rgba(255,255,255,.1) 15%, transparent 20%) 0 1px,
    radial-gradient(rgba(255,255,255,.1) 15%, transparent 20%) 8px 9px;
    background-color:#282828;
    background-size:16px 16px;
}
.centered{
    margin-left:auto;
    margin-right:auto;
    margin-top:10px;
    width:25%;
    padding:10px;
}
.wrapper > img.bg {
    position: fixed;
    margin-left:calc(2.5% - 20px);
    margin-right:calc(2.5% - 20px);
    left: 0;
    top: 0;
    width: calc(100% - 5% + 20px);
    height:100% !important;
    height: auto;
    opacity: 0.55;
    z-index:-1;
}
.wrapper{
  z-index:100;
    padding:1%;
    margin-left: calc(2.5% - 20px);
    margin-right: calc(2.5% - 20px);
    margin-top:15px;
    margin-bottom:0;
    border: 2px solid rgba(255,255,255,0.3);
    border-radius: 5px 5px;
    font-family: Roboto, Arial, sans-serif;
    position: relative;
    height:100%;
    overflow-y:scroll;
    overflow-x:hidden;
  }
.header{
    font-weight:700;
    font-size:18px;
    text-align: center;
}
.datatype{
    font-weight:700;
    font-size:18px;
    text-align: center;
    border:0px;
    color:white;
}
html {
    width:100%;
    height:100%;
    overflow:hidden;
}
.btn-conv {
    background-color:#3E3E3E;
    color:white;
    height:10%;
    width:25%;
    font-weight:600;
    font-size:1.5em;
-webkit-box-shadow: 0px 0px 17px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 0px 17px 0px rgba(0,0,0,0.75);
box-shadow: 0px 0px 17px 0px rgba(0,0,0,0.75);
overflow:hidden;
    display:inline;
}
.export {
    background-color:darkolivegreen;
    margin-top:25px;
}

.btn-conv:hover{
    background-color:#3E3E3E;
    color:white;
}
.btn-table-toggle{
}
.btn-defaults-toggle{
}

/*Flexbox Stuff */

.flex-container {
    margin-bottom:25px;
    -webkit-box-shadow: 0px 0px 8px 1px rgba(0,0,0,0.75);
    -moz-box-shadow: 0px 0px 8px 1px rgba(0,0,0,0.75);
    box-shadow: 0px 0px 8px 1px rgba(0,0,0,0.75);
  display: -webkit-box;
  display: -moz-box;
  display: -ms-box;
  display: -o-box;
  display: box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  height: 250px;
    border-radius: 0px 0px;
  -webkit-box-orient: vertical;
     -moz-box-orient: vertical;
      -ms-box-orient: vertical;
       -o-box-orient: vertical;
          box-orient: vertical;
  -webkit-flex-direction: column;
     -moz-flex-direction: column;
      -ms-flex-direction: column;
       -o-flex-direction: column;
          flex-direction: column;
}

section {
border-radius: 10px 10px;
position:relative;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-box;
  display: -o-box;
  display: box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  -webkit-flex: 1 1 auto;
     -moz-flex: 1 1 auto;
      -ms-flex: 1 1 auto;
       -o-flex: 1 1 auto;
          flex: 1 1 auto;
}

section span {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-box;
  display: -o-box;
  display: box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  -webkit-box-align: center;
     -moz-box-align: center;
      -ms-box-align: center;
       -o-box-align: center;
          box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
     -moz-align-items: center;
      -ms-align-items: center;
       -o-align-items: center;
          align-items: center;
}

.flex-container-table {
    background-color:white;
    margin-left:2%;
    margin-right:2%;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-box;
    display: -o-box;
    display: box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    opacity:.9;
    height: 500px;
    margin-top:20px;
    border-radius: 5px 5px;
    -webkit-box-orient: vertical;
     -moz-box-orient: vertical;
      -ms-box-orient: vertical;
       -o-box-orient: vertical;
          box-orient: vertical;
    -webkit-flex-direction: column;
     -moz-flex-direction: column;
      -ms-flex-direction: column;
       -o-flex-direction: column;
          flex-direction: column;
}

.flex-container-table:hover {
    opacity:1;
}
textarea {
    resize: none;

    outline: none;
    /* safari and its variants  */
    outline-offset: 0;
    /* IE and its variants  */
    -webkit-appearance: none;
    /* Chrome and its variants  */
}


.loading {
    top:0;
    font-size:10em;
    color: #5A79A5;
    left:0;
    margin-top: 10%;
    margin-left:25%;
    position:absolute;
    z-index:1000;
}
#log{
margin-top:50px;
    display:inline;
    height:500px;

}



/* COOL BUTTONS */
.wrap {
  max-width: 47rem;
  margin: 0 auto;
}

.md-button {
  display: inline-block;
  text-align: center;
  margin-left:auto;
  margin-right:auto;
  position: relative;
  background: #03a9f4;
  width: 225px;
  height: 50px;
  color: #E1F5FE;
  opacity:.65;
  font-family: 'A-Love-of-Thunder';
  box-shadow: 0 3px 7.5px #747474;
  font-size:22px;
  text-decoration: none;
  text-transform: uppercase;
  border-radius: 6px;
  -webkit-transition: all .4s ease-in-out;
  -moz-transition: all .4s ease-in-out;
  -o-transition: all .4s ease-in-out;
  transition: all .4s ease-in-out;
}
.md-button:hover{
  cursor:pointer;
  opacity:.9;

}

.md-button:hover span{
  text-shadow: rgb(0, 0, 0) 0px 0px 20px;
  color:white !important;
}

.md-button span {
  width: 100%;
  left:31px;
  top:8.5px;
  text-align: center;
  position: absolute;
  z-index: 9999;
  pointer-events: none;
}

.md-button span i{
margin-right:5px;
}

.md-button canvas {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 9998;
  border-radius: 6px;
  height:50px;
  width:225px;
}

.md-button--green {
  background: #4CAF50;
}

.md-button--orange {
  background: #FF9900;
}

.md-button--red {
  background: #880205;

}


textarea.rawdatabox::-webkit-input-placeholder { /* WebKit, Blink, Edge */
    color: #3E3E3E;
    opacity:.85;
}
textarea.rawdatabox{
  background:rgba(255,255,255,0.6);
  color:black;
  font-weight:bold;
  padding:5px;
  margin:1px;
  border-radius:0 0 0 0;
  text-align: center;
  padding-top:35px;
  padding-bottom: 75px;
  -webkit-box-pack: center; -moz-box-pack: center; -webkit-flex: 5 1 auto; -moz-flex: 5 1 auto; -ms-flex: 5 1 auto; -o-flex: 5 1 auto; flex: 5 1 auto;
  -ms-flex-pack: center; -webkit-justify-content: center; -moz-justify-content: center; -ms-justify-content: center; -o-justify-content: center; justify-content: center;
  resize: none;
}
.flex-container section:after{
    font-family: 'FontAwesome';
    display:inline-block;
    content:'\f0ea';
    position: absolute;
    left:0;
    width:100%;
    height:0;
    top:50%;
    margin-top:-60px;
    text-align: center;
    font-size:70px;
    z-index:-1;
    color:black;
}
.alert-warning.instructions{
  position:absolute;
  top:0;
  left:0;
  width:calc(100% - 2px);
  opacity:.85;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  margin:0 1px 0 1px !important;
  padding-top:10px;
  padding-bottom: 10px;
  -webkit-transition: all .4s ease-in-out;
  -moz-transition: all .4s ease-in-out;
  -o-transition: all .4s ease-in-out;
  transition: all .4s ease-in-out;
}
.alert-warning.instructions:hover{
  opacity:1;
}
.red-badge.badge{
      background-color: rgb(159, 3, 3);
    color: white;
}
.red-badge .badge:hover{
  cursor: pointer;
}

.alert-warning.view-stats{
  position:absolute;
  bottom:0;
  left:0;
  width:calc(100% - 2px);
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  margin:0 1px 0 1px !important;
  padding-top:12px;
  padding-bottom: 10px;
  -webkit-transition: all .4s ease-in-out;
  -moz-transition: all .4s ease-in-out;
  -o-transition: all .4s ease-in-out;
  transition: all .4s ease-in-out;
  background:rgba(252, 248, 227, .5);
  border-top:0;
}
.alert-warning.instructions:hover{
  opacity:1;
}
.well-playbyplay{
  opacity:.8;
}
#loadSampleData:hover{
  cursor:pointer;
}
#loadSampleData{
  margin-left:5px;
}
#rawData::-webkit-input-placeholder {
   font-family:'A-Love-of-Thunder';
   font-color:rgba(0,0,0,0.65);
   font-size:20px;
}

#rawData:-moz-placeholder { /* Firefox 18- */
   color: red;  
}

#rawData::-moz-placeholder {  /* Firefox 19+ */
   color: red;  
}

#rawData:-ms-input-placeholder {  
   color: red;  
}

.h1title{
    font-family: 'A-Love-of-Thunder';
    font-weight: normal;
}
.table-player-header{
  background-color:rgba(255,255,255,0.8);
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
  padding-top:10px;
  padding-bottom:10px;
  margin-top:20px;
  position: relative;
  overflow:hidden;
}
#warning{
  position:fixed;
  bottom:0;
  left:2px;
  border-top-right-radius: 0;
  border-top-left-radius: 0;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
  width:calc(100% - 5% + 20px);
  margin-bottom:0;
  opacity:.85;
  line-height:25px;
  margin-left:calc(2.5% - 20px);
  margin-right:calc(2.5% - 20px);
  padding-top:7.5px;
  padding-bottom:7.5px;
  z-index:500;
}
.md-button.disabled{
  opacity:.45 !important;
}
.md-button.disabled:hover{
  cursor:not-allowed;
}
.md-button.share{
  position:absolute;
  right:5px;
  top:5px;
  overflow:hidden;
  width: 125px;
  text-align:left;
  height: 35px;
  border-radius:2px;
}
.md-button.share span {
  font-size:18px;
  top:5px;
  text-align:left;
  left:20px;
}
.md-button.share canvas{
  width: 125px;
  height: 40px;
}
#doorbell-button{
  opacity:.75;
  z-index:1000;
}
#warning:hover, #doorbell-button:hover{
  opacity:1 !important;
}
body.modal-open,
.modal-open .navbar-fixed-top,
.modal-open .navbar-fixed-bottom {
margin-right: 0 !important;
padding-right:0 !important;
}
.st-sort-ascent:before{
    content: '\25B2';
}

.st-sort-descent:before{
    content: '\25BC';
}