body {
    /*background-color:powderblue;*/
    font-family: Arial;
    font-size : 18px;
  }

  textarea {
    resize: none;
    font-family: Arial;
    font-size : 18px;
    border-radius:6px;
    -moz-border-radius:6px;
    -webkit-border-radius:6px;
    width: 95%;
  }
  
  input {
    border:1px solid #386bbe;
    font-size : 18px;
    border-radius:6px;
    -moz-border-radius:6px;
    -webkit-border-radius:6px;
  }

  input[type=text], input[type=password] {
    width: 95%;
  }
  
  .selectedRow {
    background:#dddddd;
  }
  
  .pageTop { 
    margin-left: auto;
    margin-right: auto;
    color: #386bbe;
    font-weight: bold;
    font-size : 30px;
  }
  .pageTop img {
    height:50px;
  }
  .pageTop td, .pageTop th { width:15%; text-align:left; /*border: 1px solid black;*/ }
  .pageTop td + td, .pageTop th + th { width:70%; text-align:center;}
  .pageTop td + td + td, .pageTop th + th + th { width:15%; text-align:right; }

  .inputHalf {
    width: 35%;
  }

  input[type=checkbox] {
    transform: scale(1.5);
  }

  select {
    background-color: white;
    border:1px solid #386bbe;
    width: 98%;
    font-size : 18px;
    border-radius:6px;
    -moz-border-radius:6px;
    -webkit-border-radius:6px;
  }
  
  select:disabled {
    background: #dddddd;
  }
  
  .selectHalf {
    width: 40%;
  }
  
  .selectInput {
    width: auto;
	  display: inline-block;
  	color: #386bbe;
  	text-align: center;
  	font-weight: bold;
  	font-size : 24px;
  }
  
  table {
    width:100%; 
    max-width:420px;
  }
  
  table td {
    padding: 1px 2px 1px 2px;
  }
  
  .subtitle {
    font-weight: bold;
    column-span: all;
  }

  .title {
    color: #386bbe;
    text-align: center;
    font-weight: bold;
    font-size : 30px;
  }
  
  .title td {
    vertical-align:center;
    width:33%;
  }
  
  .title img {
    height:50px;
  }

  .dropTargets {
    cursor: pointer;
  }

  .dropbtn:hover, .dropbtn:focus {
    background-color: #2980B9;
  }

  .dropdown {
    position: relative;
    display: inline-block;
  }

  .dropdown-content {
    max-height:400px;
    font-size : 20px;
    font-weight: normal;
    text-align: left;
    display: none;
    position: absolute;
    background-color: #f1f1f1;
    min-width: 160px;
    overflow: auto;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
  }

  .dropdown-content td {
    height:50px;
    cursor:pointer;
  }
  
  .dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
  }

  .dropdown a:hover {background-color: #ddd;}

  .hide {display: none;}
  
  .show {display: block;}
  
  .center {
    margin-left: auto;
    margin-right: auto;
  }
  
  .centerDiv {
    margin: 0;
    position: relative;
    left: 50%;
  }
  
  .centerText {
    text-align: center;
  }

  .leftText {
    text-align: left;
  }

  .rightText {
    text-align: right;
  }

  .topText {
    vertical-align: top;
  }

/* The snackbar - position it at the bottom and in the middle of the screen */
.snackbar {
  visibility: hidden; /* Hidden by default. Visible on click */
  min-width: 30%; /* Set a default minimum width */
  max-width: 80%; /* Set a default minimum width */
  margin-left: 5%; /* Divide value of min-width by 2 */
  background-color: #333; /* Black background color */
  color: #fff; /* White text color */
  text-align: center; /* Centered text */
  border-radius: 10px; /* Rounded borders */
  padding: 16px; /* Padding */
  position: fixed; /* Sit on top of the screen */
  z-index: 1; /* Add a z-index if needed */
  /*left: 50%; Center the snackbar */
  top: 80px; /* 30px from the bottom */
}

/* Show the snackbar when clicking on a button (class added with JavaScript) */
.showAnimated {
  visibility: visible; /* Show the snackbar */
  /* Add animation: Take 0.5 seconds to fade in and out the snackbar.
  However, delay the fade out process for 2.5 seconds */
  -webkit-animation: fadein 0.5s/*, fadeout 0.5s 2.5s*/;
  animation: fadein 0.5s/*, fadeout 0.5s 2.5s*/;
}

.hideAnimated {
  visibility: visible; /* Show the snackbar */
  /* Add animation: Take 0.5 seconds to fade in and out the snackbar.
  However, delay the fade out process for 2.5 seconds */
  -webkit-animation: fadeout 0.5s/*, fadeout 0.5s 2.5s*/;
  animation: fadeout 0.5s/*, fadeout 0.5s 2.5s*/;
}

/* Animations to fade the snackbar in and out */
@-webkit-keyframes fadein {
  from {top: 0; opacity: 0;}
  to {top: 80px; opacity: 1;}
}

@keyframes fadein {
  from {top: 0; opacity: 0;}
  to {top: 80px; opacity: 1;}
}

@-webkit-keyframes fadeout {
  from {top: 80px; opacity: 1;}
  to {top: 0; opacity: 0;}
}

@keyframes fadeout {
  from {top: 80px; opacity: 1;}
  to {top: 0; opacity: 0;}
}  

.ddList {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  padding: 12px 16px;
  z-index: 1;
}

.clientSel {
  position: relative;
  display: inline-block;
}

.clientSelList {
  min-width: 260px;
  text-align: left;
}

.clientSel a {
  font-size : 20px;
  text-decoration: none;
}

.dot {
  height: 25px;
  width: 25px;
  background-color: #eee;
  border-radius: 50%;
  display: inline-block;
  border: 1px solid black;
}

.Hidden {
  display: none;
}
.CustomButton {
  background-color: #386bbe;
  border: none;
  border-radius: 15px;
  color: white;
  padding: 10px 10px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 18px;
  font-weight: normal;
  margin: 4px 2px;
  cursor: pointer;
}

.CustomUpload {
  background-color: #386bbe;
  border: none;
  border-radius: 15px;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 18px;
  margin: 4px 2px;
  cursor: pointer;
}

div.background {
  width: 100%;
  height: 100%;
  background: url(img/background.jpg) repeat;
  border: 0;
}

table.values {
  border-collapse: collapse;
  /* margin: 5px 5px; */
  /* font-size : 25px; */
  width:auto;
}

table.values td {
  padding: 0px 4px 0px 0px;
}

table.values td:first-child {
  padding: 0px 4px 0px 4px;
}

table.values td.val {
  text-align: right;
  padding: 0px 5px 0px 0px;
}

p {
  text-align: left;
  margin-left: 6px;
}

span.t1 {
  font-size : 34px;
}

form {
  margin:0px;
}

h1 {
  color: #386bbe;
  text-align: center;
  font-weight: bold;
  font-size : 24px;
}

h2 {
  color: #386bbe;
  text-align: center;
  font-weight: bold;
  font-size : 24px;
}

a.settings {
  text-decoration: none;
  color: #cccccc;
  /*font-size : 56px;*/
}
.connected {
  color: #4CAF50;
}
.disconnected {
  color: red;
}
.cross {
  position: relative;
}
.cross::after {
  pointer-events: none;
  content: "";
  position: absolute;
  top: 0; bottom: 0; left: 0; right: 0;
}
.cross2::after {
  background:
    linear-gradient(to top left, transparent 45%, red 46%, red 54%, transparent 55%),
    linear-gradient(to top right, transparent 45%, red 46%, red 54%, transparent 55%);
  opacity: 0.35;
}