body{
  background-image: url('BG.png');
  background-repeat: no-repeat;
  background-attachment: fixed;
  font-family: "Arial";
}
table, th, td {
  
    border: 1px solid black;
    border-collapse: collapse;
    text-align: left;
    font-family: "Arial";
    /*text-shadow: .5px .5px 0px #DCDCDC; /* FF3.5+, Opera 9+, Saf1+, Chrome, IE10 */
    /*box-shadow: 5px 10px #ffbb00;*/
}

table{ 
    width: 98%;
    box-shadow:
       inset 0 -3em 3em rgba(0,0,0,0),             
             0.5em 0.5em .5em rgba(255,187,0,0.8);
}


thead{
    background-color: black;
    color: #ffbb00;
}

.button {
  display: block;
  width: 100%;
  border: none;
  background-color: #FFFAF0;
  padding: 14px 28px;
  font-size: 12px;
  cursor: pointer;
  text-align: center;
}

.button:hover {
  background-color: #FFFAF0;
  color: #ffbb00;
}

h1 {
    color: black; /* FF3.5+, Opera 9+, Saf1+, Chrome, IE10 */
    text-shadow: 1px 1px 0px #ffbb00; /* FF3.5+, Opera 9+, Saf1+, Chrome, IE10 */
}

h2 {
    font-size: 16px;
    color: black; /* FF3.5+, Opera 9+, Saf1+, Chrome, IE10 */
    /*text-shadow: .5px .5px 0px #ffbb00; /* FF3.5+, Opera 9+, Saf1+, Chrome, IE10 */
    padding: 25px 0px 15px 15px;
    text-shadow: 1px 1px 0px #ffbb00;
  
}

h3 {
    font-size: 12px;
    color: black; /* FF3.5+, Opera 9+, Saf1+, Chrome, IE10 */
    /*text-shadow: .5px .5px 0px #ffbb00; /* FF3.5+, Opera 9+, Saf1+, Chrome, IE10 */
    padding: 5px 0px 15px 0px;
   }

p {
    font-size: 12px;
    color: black; /* FF3.5+, Opera 9+, Saf1+, Chrome, IE10 */
    text-shadow: .3px .3px 0px #ffbb00; /* FF3.5+, Opera 9+, Saf1+, Chrome, IE10 */
}

div {
    color: black; /* FF3.5+, Opera 9+, Saf1+, Chrome, IE10 */
    /*text-shadow: 1px 1px 0px #DCDCDC; /* FF3.5+, Opera 9+, Saf1+, Chrome, IE10 */
}

a {
    color: black; /* FF3.5+, Opera 9+, Saf1+, Chrome, IE10 */
    /*text-shadow: .5px .5px 0px #DCDCDC; /* FF3.5+, Opera 9+, Saf1+, Chrome, IE10 */
}

#status {
   margin-top: 5px;
  margin-bottom: 5px;
  margin-right: 5px;
  margin-left: 5px;
}


.spinner {
  display: none;
  border: 16px solid #ffbb00;
  border-radius: 50%;
  border-top: 16px solid #000000;
  width: 50px;
  height: 50px;
  -webkit-animation: spin 2s linear infinite; /* Safari */
  animation: spin 2s linear infinite;
}

/* Safari */
@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@media screen and (max-width: 600px) {

   #table table {
      width: 100%;
      border: 0;
      margin-left: auto;
      margin-right: auto;
      background: transparent;
      box-shadow:
       inset 0 -3em 3em rgba(0,0,0,0),             
             0.3em 0.3em 1em rgba(0,0,0,0);

    }

   #table table thead {
      display: none;
    }

   #table table tr {
      margin-bottom: 20px;
      display: block;
      border-bottom: 1px solid black;
      border-top: 1px solid black;
      

    }



   #table table td {
      display: block;
      text-align: right;
      font-size: 15px;
      padding: 1px;
      
      background: rgba(243, 187, 74, 0.1);
      color: black;
      border: 0px solid black;
     
      

    }

   #table table td:last-child {
      border-bottom: 0;
    }

   #table table td::before {
      content: attr(data-label);
      float: left;
      font-weight: bold;
      /*text-transform: uppercase;
      font-weight: bold;*/
    }
      #table tbody{
      line-height:2!important;
      
    }

   
    #table td.Start {display:none; }
    #table td.Finish {display:none; }
    #table td.IRC {display:none; }
    #table td.Corrected {display:none; }
    


  }




    
