* {margin: 0; padding: 0; font-family: inherit;}
html, body, table.main {height: 100%; width: 100%;}
html {min-width: 280px;}
body {position: relative;}
table {border-collapse: collapse;}
table.header, table.main, table.footer {width: 100%;}
td.centermain {height: 50%;}
td.expand {height: 100%;}

.max-width {width: 100%;}
.max-height {height: 100%;}
.max-size {height: 100%; width: 100%;}

/* Adapt the header content so the header fit on the screen */
#header-title {font-size: 2rem; font-weight: normal; padding: 0; margin: 0;}
@media only screen and (max-width : 435px) {#header-title {font-size: 1.75rem;}}
@media only screen and (max-width : 400px) {#header-title {font-size: 1.5rem;}}
@media only screen and (max-width : 370px) {#header-title {font-size: 1.25rem;}}
@media only screen and (max-width : 335px) {#header-title {font-size: 1rem;}}

/* Navigation bar in the TDV icon */
label.sidebar-menu-button {
  display: inline-block;
  padding: 10px;
}
/* Sidebar */
#sidebar-menu {
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: 999;
  text-align: left;
}
#sidebar-menu, #sidebar-menu div.shadow, #sidebar-menu #sidebar {
  transform: translateX(-100%);
  transition: all 0.5s ease;
}
#show-sidebar-menu:checked ~ #sidebar-menu, #show-sidebar-menu:checked ~ #sidebar-menu #sidebar, #show-sidebar-menu:checked ~ #sidebar-menu #sidebar-shadow {
    transform: translateX(0);
}
#sidebar-menu div.shadow, #sidebar-menu #sidebar {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
}
input.hidden-input {
  visibility: hidden;
  height: 0;
  width: 0;
  overflow: hidden;
}
#sidebar-menu div.shadow {
  width: 100%;
  opacity: 0.75;
}
#sidebar-menu #sidebar {
  width: 25vw;
  min-width: 280px;
}
label.close-sidebar {
  display: block;
  font-size: 2rem;
  text-align: right;
}
label.close-sidebar div.x {
  display: inline-block;
  height: 3px;
  width: 27px;
  position: absolute;
  bottom: 7px;
  left: 0;
}
#sidebar ul {
  margin: 0 0 0 10px;
  list-style-type: "- ";
}

.hide-scrollbar {
  -ms-overflow-style: none;
  overflow: -moz-scrollbars-none;
  scrollbar-width: none;
}.hide-scrollbar::-webkit-scrollbar {
    display: none;
}

a.hidden-link {
  text-decoration: none;
  color: inherit;
}a.hidden-link:hover {
  text-decoration: underline;
}

/* Force to use firefox button (or really close) (my favorites) */
button {
  padding: 2px 10px;
  cursor: pointer;
  border-radius: 3px;
  font-family: inherit;
  font-size: 1rem;
}
button.invisible-button {
  display: inline-block;
  border: none;
  text-align: left;
  border-radius: 0%;
  padding: 5px;
  margin: 0;
}
button.invisible-button:hover {
  background:rgba(0, 0, 0, 0.1);
}

/* Some useful settings */
.hidden {display: none;}
.inline-block {display: inline-block;}
.left-text {text-align: left;}
.center-text {text-align: center;}
.margin {margin: 10px;}
.hmargin {margin: 0 10px;}
.vmargin {margin: 10px 0;}
.padding {padding: 10px;}
.hpadding {padding: 0 10px;}
.vpadding {padding: 10px 0;}
.lpadding {padding: 0 0 0 10px;}
.rpadding {padding: 0 10px 0 0;}
table.css-loading {display: none;}

/* Text color */
.grey-text {color:rgba(127, 127, 127, 1);}
.red-text {color:rgba(255, 0, 0, 1);}
.blue-text {color: rgba(0, 0, 255, 1);}

/* Font family */
.serif {font-family: "Liberation Serif", "Times New Roman", Times, serif;}
.sans-serif {font-family: "Liberation Sans", Arial, Helvetica, sans-serif;}
.monospace {font-family: "Liberation Mono", "Courier New", Courier, monospace;}
.cursive {font-family: "Comic Sans MS", serif;}
.fantasy {font-family: Chalkduster, "Marker Felt", Luminari, fantasy;}/* DOES NOT WORK */
.default-font {font-family: initial !important;}