body, html{
    height: 100%;
    width: 100%;
    margin: 0px;
    font-size: 18px;
    line-height: 1.3;
    }
.content{
    height: 100%;
    width: 100%;
    margin: 0px;
    }

table.main {
    width: 100%;
    height: 100%;
    table-layout: fixed;
    border: none;
}

input, select, button {
    font-size: 90%;
}

select, input[type=text], input[type=number] {
   overflow-x: hidden;
   width: 13em;
   font-family: 'Times New Roman', serif;
   background-color: #fafafa;
   border: none;
   box-shadow: inset 2px 2px #888;
}

input[type=range] {
   background: #ff0000;
}

td.sides {
    width: 12em;
    margin: 1px;
}
td.center {
    background-color: #fafafa;
}

div.top_header {
    margin: 1em 0px 1em 0px;
    text-align: center;
}
.top_header h1 {
    margin: 0px 0px 0px 0px;
}

img.top_logo {
      display: none;
      width: 8em;
      float: left;
      margin: 10px;
}

a {
    text-decoration: none;
    font-weight: bold;
    color: #444;
}
a:hover {
    text-decoration: underline;
    color: #000;
}

table.withborder {
  border-collapse: collapse;
  font-family: 'Times New Roman', serif;
}

table.withborder thead th {
    position: sticky;
    top: 0;
    background-color: #eee;
    z-index: 1;
}

table.withborder td,
table.withborder th {
      border: 1px solid black;
      padding:  1px 6px 1px 6px;
      max-width: 11em;
      white-space: nowrap;
      overflow: hidden;
    }
table.withborder td:hover {
      display: block;
      border: none;
      overflow: auto;
    }

table.noborder {
  border-collapse: collapse;
  font-family: 'Times New Roman', serif;
  background-color: #ddd;
  box-shadow: 4px 4px 3px #aaa;
}

table.noborder td,
table.noborder th {
      border: none;
      padding:  1px 6px 1px 6px;
      white-space: nowrap;
    }

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  text-align: center;
  overflow: hidden;
  background-color: #ddd;
}

li {
  float: left;
}

li a {
  display: block;
  color: #000;
  padding: 8px 16px;
  text-decoration: none;
}

li.active a {
  display: block;
  color: #000;
  background-color: #bbb;
  padding: 8px 16px;
  text-decoration: none;
}

li.active_about{
  float:right;
}

li.active_about a {
  display: block;
  color: #000;
  background-color: #bbb;
  padding: 8px 16px;
  text-decoration: none;
}

li.login{
  float:right;
}

li.about{
  float:right;
}

li.about a {
  display: block;
  color: #fff;
  background-color: #000;
  padding: 8px 16px;
  text-decoration: none;
}

/* Change the link color on hover */
li a:hover {
  text-decoration: none;
  background-color: #555;
  color: white;
}

/* Adapt design to smaller screens */
@media only screen and (max-width: 1671px) {
    body, html{
    font-size: 17px;
    }
}
@media only screen and (max-width: 1579px) {
    body, html{
    font-size: 16px;
    }
}
@media only screen and (max-width: 1486px) {
    body, html{
    font-size: 15px;
    }
}
@media only screen and (max-width: 1393px) {
    body, html{
    font-size: 14px;
    }
}

@media only screen and (max-width: 1300px) {
    td.sides {
      display: none;
    }

    img.top_logo {
          display: block;
          width: 5.5em;
    }
    div.top_header {
        margin: 0.3em 0px 0.7em 0px;
    }
    div.top_header h1 {
        margin: 0.3em 0px 0.3em 0px;
    }
}

@media only screen and (max-width: 900px) {
    .hide_mobile {
        display: none;
    }
}

/* phone in portrait */
@media only screen and (max-width: 530px) {
    li, li.login, li.about {
    }
    li.login, li.about {
        display: none;
    }
    .hide_mobile {
        display: none;
    }
    .desktop_scroll {
        overflow: visible;
        overflow-x: auto;
    }
    div.top_header {
        margin: 0px 0px 0px 0px;
    }
    img.top_logo {
          width: 3.5em;
    }
    div.top_header h1 {
        margin: 0em 0px 0em 0px;
    }
input, select, button {
    font-size: 150%;
}
select, input[type=text], input[type=number] {
   width: 8em;
}
}

/* phone in landscape */
@media only screen and (max-height: 480px) {
    td.sides {
      display: none;
    }
    tr.hide_mobile {
        display: none;
    }
    .desktop_scroll {
        overflow: visible;
        overflow-x: auto;
    }
    div.top_header {
        margin: 0px 0px 0px 0px;
    }
    img.top_logo {
          width: 3.5em;
    }
    div.top_header h1 {
        margin: 0em 0px 0em 0px;
    }
input, select, button {
    font-size: 150%;
}
select, input[type=text], input[type=number] {
   width: 8em;
}
}

.greybg {
    background-color: #fafafa;
}

.aligntop {
    vertical-align: text-top;
}

.alignright {
    text-align: right;
}

.aligncenter {
    text-align: center;
}

.nomargin {
    margin: 0px;
}

.full, .fullauto, .fullfixed {
    width: 100%;
    height: 100%;
}
.fullauto {overflow: auto;}
.fullfixed {table-layout: fixed;}

/* special buttons to be aware of */
.danger {
  background-color: #fdd;
  color: #d00;
}



.collapsible {
  background-color: #ddd;
  color: #444;
  cursor: pointer;
  width: 100%;
  border: none;
  text-align: center;
  outline: none;
}
.active {
  color: #444;
  border-bottom: 1px solid #fff;
  border-right: 1px solid #fff;
  border-top: 1px solid;
  border-left: 1px solid;
}

/* Style the collapsible content. Note: hidden by default */
.collapsed {
  background-color: #eee;
  display: none;
  overflow: hidden;
}

/* Tooltip container */
.tooltip {
  position: relative;
  display: inline-block;
  cursor: help;
}
.tooltip button {
  cursor: grab;
}


/* Tooltip text */
.tooltip .tooltiptext {
  visibility: hidden;
  width: 18em;
  background-color: #fff;
  color: #000;
  text-align: center;
  padding: 5px 5px;
  border: solid 1px;
  border-radius: 6px;
  top: 100%;
  left: 50%;
  margin-left: -9em; /* Use half of the width (120/2 = 60), to center the tooltip */
  white-space: normal;

  /* Position the tooltip text - see examples below! */
  position: absolute;
  z-index: 10;
}

/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
  visibility: visible;
}

.orso_validated, table.orso_validated td, table.orso_validated th {background-color: #dfd;}
.entry_used, table.entry_used td, table.entry_used th {background-color: #fff;}
.entry_unused, table.entry_unused td, table.entry_unused th {background-color: #ddd;}
.orso_invalid, table.orso_invalid td, table.orso_invalid th {background-color: #fdd;}