@charset "UTF-8";
/* CSS Document */

* {
  box-sizing: border-box;
}

#content{
    margin-top: 120px;
    z-index: 0;
    position: absolute;
    width: 100%
}
    
    
  div.divwidth {
  height: 400px;
  width: 75%;
  margin: auto;
}
    
/* Create four equal columns that floats next to each other */
.column1 {
  float: left;
  width: 10%;
  padding: 10px;
}
.column2 {
  float: left;
  width: 50%;
  padding: 10px;
}

.column3 {
  float: left;
  width: 30%;
  padding: 10px;
}

.columnReports {
   margin: auto;
  width: 70%;
  border: none;
  padding: 0px;     
}
    
/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}
    
header.topbar{
    background-color: white;
    position: sticky;
    width: 100%;
    height: 125px;
    opacity: 1.0;
    z-index: 1;
    top: 0;
    left: 0;
}
    
    
.theRedButton {
background-color: darkred; 
color: white; 
font-weight:normal; 
font-family:Arial;
height:30px; 
width:120px;
}
      
.theGreenButton {
background-color: lightgreen; 
color: black; 
font-weight:normal; 
font-family:Arial;
height:30px; 
width:120px;
}
    
.hoverTimeRecords tbody:hover {
    background: #BFACAD !important;
}
.hoverTimeRecordsInput input:hover {
    background: white !important;
}
    

    #overlay{	
  position: fixed;
  top: 0;
  z-index: 100;
  width: 100%;
  height:100%;
  display: none;
  background: rgba(0,0,0,0.6);
}
.cv-spinner {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;  
}
.spinner {
  width: 100px;
  height: 100px;
  border: 4px #ddd solid;
  border-top: 4px #2e93e6 solid;
  border-radius: 50%;
  animation: sp-anime 0.8s infinite linear;
}
@keyframes sp-anime {
  100% { 
    transform: rotate(360deg); 
  }
}
.is-hide{
  display:none;
}
    
    
    
.TFTable tr:nth-child(even){background-color: #f2f2f2;}
    
/* Responsive layout - makes the four columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .column1 {
    width: 100%;
  }
     .column2 {
    width: 100%;
  }
}