body {
    background-image: linear-gradient(#cdcdcd, #ffffff);
    font-family: Helvetica, Arial, sans-serif;
    height:100%;
    width:100%;
}

select {
   -webkit-appearance: none; 
   -moz-appearance: none;
   appearance: none;       /* remove default arrow */
   //background-image: url(...);   /* add custom arrow */
}

.datetime {
    font-family: Helvetica, Arial, sans-serif;
    color: whitesmoke;
}

.historyMainInput{
   border: none; 
   background: white;
   margin: 0px;
   width: 100%;
}

table.historyMainTable{
    border: 1px solid #000;
    border-collapse: collapse; 
}

tr.historyMainTable {
    margin: 0px;
    background: #fff;
    border: 1px solid green;
}

tr.historyMainTableHead {
    border: 1px solid black;
    margin: 0px;
    background: transparent;
}

tr.description {
    border-bottom: 2px solid black;
    margin: 0px;
    background: transparent;
}

.smallInput {
  background: #fff;
  color: #525865;
  border-radius: 4px;
  border: 1px solid #000;
  box-shadow: inset 1px 2px 4px rgba(0, 0, 0, 0.7);
  font-family: inherit;
}

textarea {
    font-size: 18px;
    border-radius: 0;
    line-height: 22px;
    background-color: #fbfbfb;
    padding: 13px 13px 13px 54px;
    margin-bottom: 10px;
    width: 70%;
    box-sizing: border-box;
    border: 3px solid rgba(0,0,0,0);
}

textarea:focus {
    border: 3px solid #3498db;
}

#container {
    width: 50%;
    margin: 0 auto;
}

.bodydiv {
    top: 0px;
    bottom: 0px;
    margin:0; 
    padding:0; 
    min-height:80vh; 
    width: 100%;
    z-index: 0;
    display:block;
    overflow:auto;
    position:relative;
} 

#headerdiv {
    height: 150px;
    width: 100%;
    min-width: 500px;
    background-color: #000000;
    box-shadow: 0 5px 25px -5px #333;
    z-index: 1;
    position:relative;
    color: white;
}

button {
    width: 30%;
    border: #fbfbfb solid 2px;
    cursor: pointer;
    background-color: #3498db;
    color: white;
    font-size: 18px;
    padding-top: 5px;
    padding-bottom: 5px;
}

button:disabled {
    background-color: #d1736d
}

td {
    border-top: 0px solid black;
}

#lightBox {
  background:silver;
  position:absolute;
  color:#fff;
  top:50vh;
  left:50%;
  padding:5px;
  box-shadow: 2px 2px 7px #1c2228;
  -ms-transform: translateX(-50%) translateY(-50%);
  -webkit-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%); 
  z-index: 100;
  border-radius: 5px;
}

.lb-head {
    width: 100%;
    text-align: right;
}

#errorLabel {
  background:silver;
  position:absolute;
  color:#fff;
  top:50vh;
  left:50%;
  padding:5px;
  width: 50%;
  max-width: 450px;
  box-shadow: 2px 2px 7px #1c2228;
  -ms-transform: translateX(-50%) translateY(-50%);
  -webkit-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%); 
  z-index: 100;
  border-radius: 5px;
}

.error-head {
    width: 100%;
    text-align: right;
}

.headCancel {
    width: 100%;
    font-size: 20px;
    font-weight: bold;
    text-align: right;
    color: red;
    cursor: pointer;
}

.showStyle {
    color: #d1736d; 
    cursor: pointer;
}

.boldStyle {
    font-weight: bold;
    color: #EBEBEB
}

.devices {
  background:silver;
  position:absolute;
  color:#fff;
  top:240px;
  left:15px;
  padding:5px;
  min-height: 50px;
  width: 250px;
  border-radius: 5px;
  box-shadow: 2px 2px 7px #1c2228;
  z-index: 100;
}

.history {
  background:silver;
  position:absolute;
  color:#fff;
  top:240px;
  right:15px;
  padding:5px;
  min-height: 50px;
  width: 60%;
  border-radius: 5px;
  box-shadow: 2px 2px 7px #1c2228;
  z-index: 100;
}

.timeLabel {
    padding-top: 15px;
    padding-left: 15px;
    color: white;
    font-size: 25px;
    font-family: Verdana, Arial, sans-serif;
}
 /* unvisited link */
a:link {
    color: gray;
}

/* visited link */
a:visited {
    color: green;
}

/* mouse over link */
a:hover {
    color: navajowhite;
}

/* selected link */
a:active {
    color: #d1736d;
} 

.devicesTable {
    font-family: Helvetica, Arial, sans-serif;
    font-size: 12px;
    color: grey;
    border: 0px;
}

.historyTable {
    font-family: Helvetica, Arial, sans-serif;
    font-size: 12px;
    color: grey;
    border: 0px;
}

.type {
    font-family: Helvetica, Arial, sans-serif;
    font-size: 12px;
    color: grey;
    border: 0px;
}

.name {
    font-family: Helvetica, Arial, sans-serif;
    font-size: 12px;
    color: grey;
    border: 0px;
    width: 110px;
}

.description {
    font-family: Helvetica, Arial, sans-serif;
    font-size: 10px;
    color: white;
    border: 0px;
}

.historyTableHead {
    font-size: 10px;
    font-weight: bold;
    color: white;
}

.slidecontainer {
    width: 100%; /* Width of the outside container */
    font-size: 12px;
}

/* The slider itself */
.slider {
    width: 100%; /* Full-width */
    height: 10px; /* Specified height */
    background: #000; /* Grey background */
    outline: none; /* Remove outline */
    opacity: 0.7; /* Set transparency (for mouse-over effects on hover) */
}

/* Mouse-over effects */
.slider:hover {
    opacity: 1; /* Fully shown on mouse-over */
}

/* The slider handle (use -webkit- (Chrome, Opera, Safari, Edge) and -moz- (Firefox) to override default look) */
.slider::-webkit-slider-thumb {
    width: 10px; /* Set a specific slider handle width */
    height: 10px; /* Slider handle height */
    background: #FFFFFF; /* Green background */
    cursor: pointer; /* Cursor on hover */
}

.slider::-moz-range-thumb {
    width: 10px; /* Set a specific slider handle width */
    height: 10px; /* Slider handle height */
    background: #FFFFFF; /* Green background */
    cursor: pointer; /* Cursor on hover */
}