@charset "UTF-8";

/*****************************************************************************/
/*** Custom CSS. Makes HTML elements look unified. No additional classes.
/*****************************************************************************/


/*****************************************************************************/
/*** Extract from normalize.css by Nicolas Gallagher and Jonathan Neal ***/
/*****************************************************************************/
html {
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: 'Open Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
  font-size: 16px;
  line-height: 1.375;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
main,
menu,
nav,
section {
  display: block
}

summary {
  display: list-item
}

details:hover {
  cursor: pointer;
}

.details {
  padding-left: 1rem;
  font-size: 0.875em;
}

audio,
canvas,
progress,
video {
  display: inline-block;
}

progress {
  vertical-align: baseline
}

audio:not([controls]) {
  display: none;
  height: 0
}

[hidden],
template {
  display: none
}

a {
  background-color: transparent
}

a:active,
a:hover {
  outline-width: 0
}

abbr[title] {
  border-bottom: none;
  text-decoration: underline;
  text-decoration: underline dotted
}

b,
strong {
  font-weight: bolder
}

dfn {
  font-style: italic
}

mark {
  background: #ff0;
  color: #000
}

small {
  font-size: 80%
}

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline
}

sub {
  bottom: -0.25em
}

sup {
  top: -0.5em
}

figure {
  margin: 1em 40px
}

img {
  border-style: none
}

code,
kbd,
pre,
samp {
  font-family: monospace, monospace;
  font-size: 1em
}

hr {
  box-sizing: content-box;
  height: 0;
  overflow: visible
}

button,
input,
select,
textarea,
optgroup {
  font: inherit;
  margin: 0
}

optgroup {
  font-weight: bold
}

select {
  line-height: 1.5rem;
}

button,
input {
  overflow: visible
}

button,
select {
  text-transform: none;
  font: inherit;
}

button,
[type=button],
[type=reset],
[type=submit] {
  appearance: button;
  -webkit-appearance: button;
}

button::-moz-focus-inner,
[type=button]::-moz-focus-inner,
[type=reset]::-moz-focus-inner,
[type=submit]::-moz-focus-inner {
  border-style: none;
  padding: 0
}

button:-moz-focusring,
[type=button]:-moz-focusring,
[type=reset]:-moz-focusring,
[type=submit]:-moz-focusring {
  outline: 1px dotted ButtonText
}

fieldset {
  border: 1px solid #c0c0c0;
  margin: 0 2px;
  padding: .35em .625em .75em
}

legend {
  color: inherit;
  display: table;
  max-width: 100%;
  padding: 0;
  white-space: normal
}

textarea {
  overflow: auto
}

[type=checkbox],
[type=radio] {
  padding: 0px;
  margin: 0px;
}

[type=number]::-webkit-inner-spin-button,
[type=number]::-webkit-outer-spin-button {
  height: auto
}

[type=search] {
  appearance: textfield;
  -webkit-appearance: textfield;
  outline-offset: -2px
}

[type=search]::-webkit-search-decoration {
  appearance: none;
  -webkit-appearance: none;
}

::-webkit-file-upload-button {
  appearance: button;
  -webkit-appearance: button;
  font: inherit
}

/*****************************************************************************/
/* End extract */
/*****************************************************************************/


/*****************************************************************************/
/*** root variables ***/
/*****************************************************************************/
:root {
  --main-font: 'Open Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
  --main-font-size: 1rem;
  --heading-weight: 600;
  --padding-btn: 0.375rem 0.5rem;
  --border-radius: 4px;
  --border-color-input: hsl(210, 13%, 80%);
  --border-color-input-hover: hsl(210, 13%, 70%);
  --bg-color-button: hsl(210, 13%, 95%);
  --bg-color-button-hover: hsl(210, 13%, 85%);
  --bg-color-button-active: hsl(210, 13%, 75%);
  --bg-color-input-disabled: hsl(210, 13%, 95%);
  --slategrey: hsl(210, 13%, 50%);
  --blue: hsl(210, 100%, 56%);
  --blue-hover: hsl(210, 100%, 50%);
  --outline-color-focus: hsla(210, 100%, 56%, 0.6);
  --outline-focus: 3px solid var(--outline-color-focus);
  --text-dark: hsl(210, 13%, 20%);
  --text-light: hsl(210, 13%, 90%);
  --transition-border: border 0.2s ease-in-out 0s;
  --transition: 0.2s ease-in-out 0s;
  --range-thumb-size: 1rem;
  --range-thumb-radius: 100%;
  --astroblue: hsl(197, 100%, 43%);
}


/*****************************************************************************/
/*** Makes Width- and Height calculation correct (including padding) ***/
/*****************************************************************************/
*,
*::after,
*::before {
  box-sizing: border-box;
}


body {
  font-family: var(--main-font);
  font-size: 1rem;
  max-width: 100%;
}


/* main {
  padding: 1rem;
  padding-bottom: 2rem;
  max-width: 100%;
} */


fieldset {
  min-width: 0;
  max-width: 100%;
  width: 684px;
  margin-top: 2rem;
  padding: 1rem;
  border-color: var(--border-color-input);
  border-radius: var(--border-radius);
}

fieldset>legend {
  color: var(--text-dark);
  font-size: 1.25rem;
  margin-left: 0rem;
}

/*****************************************************************************/
/*** Aligning items
/*****************************************************************************/
.flex-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 1rem;
  align-items:flex-start;
  align-content:flex-start;
}

.flex-line {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 0.25rem;
  align-items:center;
  align-content:flex-start;
}

.centered-h {
  margin-left: auto;
  margin-right: auto;
}

.input-group {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  max-width: 100%;
}

.input-group>.form-control {
  position: relative;
  flex: 1 1 auto;
  width: 1%;
  min-width: 0
}

.centered-line {
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-start;
  gap: 0.25rem 0.25rem;
  align-items: center;
  vertical-align: middle;
  align-content: center;
}


/*****************************************************************************/
/*** Look when element has focus
/*****************************************************************************/
:focus-visible {
  transition: 0.1s ease-in-out;
  outline: 3px solid var(--outline-color-focus);
  outline-offset: 0;
}

input[type=range]:focus,
input[type=radio]:focus,
input[type=checkbox]:focus {
  transition: 0.1s ease-in-out;
  outline: 3px solid var(--outline-color-focus);
  outline-offset: 0;
}

/*****************************************************************************/
/*** Look when element disabled
/*****************************************************************************/
input[disabled]+label,
:disabled {
  opacity: 0.5;
  pointer-events: none;
}

input[type=text]:disabled,
input[type=search]:disabled,
input[type=password]:disabled,
input[type=number]:disabled,
input[type=radio]:disabled,
input[type=checkbox]:disabled,
input[type=tel]:disabled,
select:disabled {
  opacity: 0.5;
  pointer-events: none;
  background-color: var(--bg-color-input-disabled);
}



/*****************************************************************************/
/*** Default buttons
/*****************************************************************************/
button,
input[type=button],
input[type=submit],
input[type=reset] {
  appearance: none;
  font: inherit;
  line-height: 1.375;
  margin: 0;
  padding: var(--padding-btn);
  cursor: pointer;
  background-color: var(--bg-color-button);
  border-color: var(--border-color-input);
  border-width: 1px;
  border-style: solid;
  color: var(--text-dark);
  border-radius: var(--border-radius);
  min-width: 16px;
  max-width: 100%;
}



/*****************************************************************************/
/*** buttons hover
/*****************************************************************************/
button:hover,
input[type=button]:hover,
input[type=submit]:hover,
input[type=reset]:hover {
  background-color: var(--bg-color-button-hover);
  border-color: var(--border-color-input-hover);
}

/*****************************************************************************/
/*** buttons active
/*****************************************************************************/
button:active,
input[type=button]:active,
input[type=submit]:active,
input[type=reset]:active {
  background-color: var(--bg-color-button-active);
  transform: translateY(1px);
  /* outline: var(--outline-focus); */
}


/*****************************************************************************/
/*** Input elements (text-fields)
/*****************************************************************************/
input[type=text],
input[type=search],
input[type=password],
input[type=number],
input[type=tel] {
  appearance: none;
  font: inherit;
  margin: 0;
  padding: 0.25em;
  line-height: 1.375;
  min-width: 32px;
  max-width: 100%;
  width: fit-content;
  background-color: white;
  border: 1px solid hsl(210, 13%, 85%);
  border-radius: var(--border-radius);
  /* box-shadow: 0px 1px 3px 0px rgb(222,222,222) inset; */
  /* box-shadow: 0px 3px 3px 0px rgba(0,0,0,0.04) inset; */
  box-shadow: 0px -1px 0px 0px hsl(210, 13%, 85%) inset, 0px 3px 3px 0px rgba(0, 0, 0, 0.04) inset;
  color: var(--text-dark);
}

/*****************************************************************************/
/*** Input elements (text-fields) hover
/*****************************************************************************/
input[type=text]:hover,
input[type=search]:hover,
input[type=password]:hover,
input[type=number]:hover,
input[type=tel]:hover {
  border: 1px solid var(--border-color-input-hover);
  transition-duration: 0.1s;
  box-shadow: 0px -1px 0px 0px var(--border-color-input-hover) inset, 0px 3px 3px 0px rgba(0, 0, 0, 0.04) inset;
}

/*****************************************************************************/
/*** Drop container (are) for file input
/*****************************************************************************/
.drop-container {
  padding: 2rem;
  position: relative;
  display: flex;
  gap: 1rem;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  overflow-x: auto;
  border-radius: var(--border-radius);
  border: 1px dashed hsl(210, 13%, 56%);
  background: hsl(210, 13%, 99%);
  color: hsl(210, 13%, 20%);
  cursor: pointer;
  transition: background .2s ease-in-out, border .2s ease-in-out;
}

.drop-container:hover {
  background: hsl(210, 13%, 97%);
  border-color: #111;
}

.drop-container:hover .drop-title {
  color: #222;
}

.drop-title {
  color: #444;
  font-size: 20px;
  font-weight: bold;
  text-align: center;
  transition: color .2s ease-in-out;
}


/*****************************************************************************/
/*** File upload field
/*****************************************************************************/
input[type=file] {
  -webkit-appearance: none;
  appearance: none;
  font: inherit;
  margin: 0;
  padding: 0rem;
  padding-right: 0.375rem;
  line-height: 1.375;
  background-color: white;
  color: var(--text-dark);
  border: 1px solid var(--border-color-input);
  border-radius: var(--border-radius);
  max-width: 100%;
  min-width: 32px;
  width:100%;
}

/*****************************************************************************/
/*** File upload field hover
/*****************************************************************************/
input[type=file]:hover:not(:disabled) {
  border: 1px solid var(--border-color-input-hover);
  transition: background .2s ease-in-out;
}

/*****************************************************************************/
/*** File upload button
/*****************************************************************************/
input[type=file]::file-selector-button {
  -webkit-appearance: none;
  appearance: none;
  margin: 0;
  margin-right: 0.5rem;
  padding: var(--padding-btn);
  line-height: 1.375;
  background: var(--bg-color-button);
  color: var(--text-dark);
  content: '';
  border-radius: 0;
  border-top-left-radius: var(--border-radius);
  border-bottom-left-radius: var(--border-radius);
  border: none;
  font: inherit;
  cursor: pointer;
  transition: background .2s ease-in-out;
}

/*****************************************************************************/
/*** File upload button hover
/*****************************************************************************/
input[type=file]::file-selector-button:hover {
  background: var(--bg-color-button-hover);
  transition: background 0.2s;
  cursor: pointer;
}


/*****************************************************************************/
/*** Input number
/*****************************************************************************/
input[type=number] {
  appearance: none;
  font: inherit;
  line-height: 1.375;
  background-color: white;
  color: var(--text-dark);
  border: 1px solid var(--border-color-input);
  border-radius: var(--border-radius);
  width: 3rem;
  height: 1.375rem;
  margin: 0;
  padding: 1px 8px 1px 2px;
  text-align: right;
}

/*****************************************************************************/
/*** Input number: Remove up-down arrows in Chrome, Safari, Edge, Opera
/*****************************************************************************/
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button {
  appearance: none;
  -webkit-appearance: none;
  margin: 0;
}

/*****************************************************************************/
/*** Input number: Remove up-down arrows in Firefox
/*****************************************************************************/
input[type=number] {
  appearance: textfield;
  -moz-appearance: textfield;
}

/*****************************************************************************/
/*** Input number hover
/*****************************************************************************/
input[type=number]:not(:disabled):hover {
  background-color: white;
  border: 1px solid var(--border-color-input-hover);
}


/*****************************************************************************/
/*** Input range line
/*****************************************************************************/
input[type=range] {
  -webkit-appearance: none;
  appearance: none;
  height: 0.5rem;
  border-radius: 4px;
  background: hsl(210, 13%, 65%);
  border: 1px solid white;
  outline: none;
  margin: 0.25rem;
  position: relative;
  top: 0px;
}

/*****************************************************************************/
/*** Input range line hover
/*****************************************************************************/
input[type=range]:hover {
  background: var(--slategrey);
}

/*****************************************************************************/
/*** Input range line on webkit browsers has focus
/*****************************************************************************/
input[type=range]:focus::-webkit-slider-thumb {
  outline: 3px solid var(--outline-onfocus);
  outline-offset: 0px;
}

input[type=range]:focus::-moz-range-thumb {
  outline: 3px solid var(--outline-onfocus);
  outline-offset: 0px;
}

input[type=range]:focus::-ms-thumb {
  outline: 3px solid var(--outline-onfocus);
  outline-offset: 0px;
}

/*****************************************************************************/
/*** Input range line on webkit browsers.
/*** Must be separated selectors for each browser!
/*****************************************************************************/
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
  border: 0px solid white;
  border-radius: var(--range-thumb-radius);
  height: 1rem;
  width: 1rem;
  background-color: var(--blue);
  cursor: pointer;
}

/*****************************************************************************/
/*** Input range line on webkit browsers.
/*** Must be separated selectors for each browser!
/*****************************************************************************/
input[type=range]::-moz-range-thumb {
  -webkit-appearance: none;
  appearance: none;
  box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
  border: 0px solid white;
  border-radius: var(--range-thumb-radius);
  height: 1rem;
  width: 1rem;
  background-color: var(--blue);
  cursor: pointer;
}

/*****************************************************************************/
/*** Input range line on webkit browsers.
/*** Must be separated selectors for each browser!
/*****************************************************************************/
input[type=range]::-ms-thumb {
  -webkit-appearance: none;
  appearance: none;
  box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
  border: 0px solid white;
  border-radius: var(--range-thumb-radius);
  height: 1rem;
  width: 1rem;
  background-color: var(--blue);
  cursor: pointer;
}

/*****************************************************************************/
/*** Input range line on webkit browsers.
/*** Must be separated selectors for each browser!
/*****************************************************************************/
input[type=range]::-webkit-slider-thumb:hover {
  background-color: var(--blue-hover);
}

/*****************************************************************************/
/*** Input range line on webkit browsers.
/*** Must be separated selectors for each browser!
/*****************************************************************************/
input[type=range]::-moz-range-thumb:hover {
  background-color: var(--blue-hover);
}

/*****************************************************************************/
/*** Input range line on webkit browsers.
/*** Must be separated selectors for each browser!
/*****************************************************************************/
input[type=range]::-ms-thumb:hover {
  background-color: var(--blue-hover);
}


/*****************************************************************************/
/*** Select
/*****************************************************************************/
select {
  /* reset */
  margin: 0;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  /* styling */
  color: var(--text-dark);
  font: inherit;
  background-color: white;
  border: 1px solid var(--border-color-input);
  border-radius: var(--border-radius);
  line-height: 1.25em;
  padding: var(--padding-btn);
  padding-right: 2rem;
  color: var(--text-dark);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10' height='100' width='100'%3E%3Cpath d='M1,3 L5,7 L9,3' stroke='rgb(33, 38, 43)' stroke-width='1' fill='none' /%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.5rem center;
  background-size: 1rem;
  min-width: 64px;
  max-width: 100%;
  width: fit-content;
}

select:hover {
  border: 1px solid var(--border-color-input-hover);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10' height='100' width='100'%3E%3Cpath d='M1,3 L5,7 L9,3' stroke='rgb(0, 128, 255)' stroke-width='1' fill='none' /%3E%3C/svg%3E");
}


/*****************************************************************************/
/*** Radio, Checkbox: label right
/*****************************************************************************/
input[type=radio]+label,
input[type=checkbox]+label {
  color: var(--text-dark);
  display: inline-block;
  /* vertical-align: middle; */
  user-select: none;
  margin: 0 2px;
  line-height: 1.25em;
}

label {
  line-height: 1.25em;
  margin: 0 1px;
}

label>input { 
  color: var(--text-dark);
  display: flex; 
  align-items: center; 
  line-height: 1.25em;
  margin: 0 2px;
  user-select: none;
} 

/*****************************************************************************/
/*** Radio, Checkbox
/*****************************************************************************/
input[type=radio],
input[type=checkbox] {
  -webkit-appearance: none;
  appearance: none;
  background: #fff;
  /* this is needed for iOS. Otherwise the background just becomes black. */
  border: 1px solid var(--border-color-input);
  border-radius: var(--border-radius);
  height: 1.25rem;
  width: 1.25rem;
  line-height: 1.25em;
  display:inline-flex;
  align-items: center; 
  vertical-align:middle;
  position: relative;
  padding: 0px;
  margin: 0;
  margin-right: 2px;
  color: var(--text-dark);
  top: -2px;
}

/*****************************************************************************/
/*** Radio
/*****************************************************************************/
input[type=radio] {
  border-radius: 100%;
}

/*****************************************************************************/
/*** Radio, Checkbox :before element (dot/hack sign)
/*****************************************************************************/
input[type=radio]::before,
input[type=checkbox]::before {
  content: '';
  position: absolute;
  margin: auto;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
  top: 0px;
}


/*****************************************************************************/
/*** Radio border on circle when checked
/*****************************************************************************/
input[type=radio]:checked {
  border: 2px solid var(--blue);
}

/*****************************************************************************/
/*** Radio [::before] dot in the middle of circle
/*****************************************************************************/
input[type=radio]::before {
  height: 0;
  width: 0;
}

/*****************************************************************************/
/*** Radio [::before]:checked dot in the middle of circle
/*****************************************************************************/
input[type=radio]:checked::before {
  border: 5px solid var(--blue);
  border-radius: 100%;
  background: var(--blue);
}

/*****************************************************************************/
/*** Checkbox square checked
/*****************************************************************************/
input[type=checkbox]:checked {
  background-color: var(--blue);
  border: 1px solid var(--blue);
  border-radius: var(--border-radius);
}

/*****************************************************************************/
/*** Checkbox[::before] hak sign (two lines)
/*****************************************************************************/
input[type=checkbox]:checked::before {
  border-right: 2px solid white;
  border-bottom: 2px solid white;
  height: 65%;
  width: 40%;
  transform: rotate(45deg) translateY(-10%) translateX(-10%);
}

/*****************************************************************************/
/*** Radio + Checkbox hover
/*****************************************************************************/
input[type=radio]:not(:checked):not(:disabled):hover,
input[type=checkbox]:not(:checked):not(:disabled):hover {
  border: 1px solid var(--border-color-input-hover);
  background-color: var(--bg-color-button);
}

input[type=radio]:checked:hover:not(:disabled) {
  border-color: var(--blue-hover);
}

input[type=radio]:checked:hover:not(:disabled)::before {
  border-color: var(--blue-hover);
  background-color: var(--blue-hover);
}

input[type=checkbox]:checked:hover:not(:disabled) {
  background-color: var(--blue-hover);
  border-color: var(--blue-hover);
}


/*****************************************************************************/
/*** Table default look
/*****************************************************************************/
.table-wrapper {
  max-width: 100%;
  overflow-x: auto;
}

table {
  border-collapse: separate;
  border-spacing: 0px;
  table-layout: auto;
  overflow-wrap: break-word;
  overflow: hidden;

  /* initial colors for default table */
  --color-h: 210;
  --color-s: 13%;
  --color-l-head: 80%;
  --color-l-head-light: 92%;
  --color-l-head-dark: calc(var(--color-l-head) - 40%);
  --color-l-body: 98%;
  --color-l-body-light: 99%;
  --color-l-body-dark: calc(var(--color-l-head) - 30%);

  --color-head-text: black;
}

table thead {
  background-color: hsl(var(--color-h), var(--color-s), var(--color-l-head));
  color:  var(--color-head-text);

}

table.light thead {
  background-color: hsl(var(--color-h), var(--color-s), var(--color-l-head-light));
  color: black;
}

table.dark thead {
  background-color: hsl(var(--color-h), var(--color-s), var(--color-l-head-dark));
  color: white;
}


table th,
table td {
  padding: 0.375rem 0.5rem;
  line-height: 1.5;
  white-space: nowrap;
  vertical-align: middle;
  border-color: hsl(var(--color-h), var(--color-s), var(--color-l-head));
  border-style: solid;
  border-width: 0px;
}

table.light th,
table.light td {
  border-color: hsl(var(--color-h), var(--color-s), var(--color-l-head-light));
}

table.dark th,
table.dark td {
  border-color: hsl(var(--color-h), var(--color-s), var(--color-l-head-dark));
}

table tbody tr {
  background-color: hsl(var(--color-h), var(--color-s), var(--color-l-body));
  color: var(--body-color-text); 
}

table.light tbody tr {
  background-color: hsl(var(--color-h), var(--color-s), var(--color-l-body-light));
  color: black;
}

table.dark tbody tr {
  background-color: hsl(var(--color-h), var(--color-s), var(--color-l-body-dark));
  color: white;
}

table tbody tr:hover {
  background-color: hsl(var(--color-h), var(--color-s), calc(var(--color-l-body) - 3%));
}

table.light tbody tr:hover {
  background-color: hsl(var(--color-h), var(--color-s), calc(var(--color-l-body-light) - 3%));
}

table.dark tbody tr:hover {
  background-color: hsl(var(--color-h), var(--color-s), calc(var(--color-l-body-dark) - 3%));
}

tr td, 
tr th {
  border-right-width: 1px;
  border-bottom-width: 1px;
}

tr th:first-child,
tr td:first-child {
  border-left-width: 1px;
}

/* required css to make rounded table (below) */
tr:first-child th:first-child {
  border-top-left-radius: var(--border-radius);
}
tr:first-child th:last-child {
  border-top-right-radius: var(--border-radius);
}
tr:last-child td:first-child {
  border-bottom-left-radius: var(--border-radius);
}
tr:last-child td:last-child {
  border-bottom-right-radius: var(--border-radius);
}



/*****************************************************************************/
/*****************************************************************************/
/*****************************************************************************/
/*** Custom classes
/*****************************************************************************/
/*****************************************************************************/
/*****************************************************************************/
/*** Tables */
/* grey */
table.table-grey {
  --color-h: 210;
  --color-s: 13%;
  --color-l-head: 50%;
  --color-head-text: white;
}

/* blue */
table.table-blue {
  --color-h: 210;
  --color-s: 100%;
  --color-l-head: 56%;
  --color-head-text: white;
}

/* orange */
table.table-orange {
  --color-h: 36;
  --color-s: 100%;
  --color-l-head: 50%;
  --color-head-text: white;
}

/* green */
table.table-green {
  --color-h: 150;
  --color-s: 50%;
  --color-l-head: 50%;
  --color-head-text: white;
}

/* red */
table.table-red {
  --color-h: 0;
  --color-s: 100%;
  --color-l-head: 50%;
  --color-head-text: white;
}




/*** Buttons */
.btn {
  --color-h: 210;
  --color-s: 13%;
  --color-l: 50%;

  --color-bg: hsl(var(--color-h), var(--color-s), var(--color-l));
  --color-bg-hover: hsl(var(--color-h), var(--color-s), calc(var(--color-l) - 5%));
  --color-bg-active: hsl(var(--color-h), var(--color-s), calc(var(--color-l) - 10%));

  --color-border: hsl(var(--color-h), var(--color-s), var(--color-l));
  --color-border-hover: hsl(var(--color-h), var(--color-s), calc(var(--color-l) - 5%));
  --color-border-active: hsl(var(--color-h), var(--color-s), calc(var(--color-l) - 10%));

  background-color: var(--color-bg);
  border-color: var(--color-border);
  border-width: 1px;
  border-style: solid;
  color: white;
}

.btn:hover {
  background-color: var(--color-bg-hover);
  border-color: var(--color-border-hover);
}

.btn:active {
  background-color: var(--color-bg-active);
  border-color: var(--color-border-active);
}

.btn.blue {
  --color-h: 210;
  --color-s: 100%;
  --color-l: 56%;
}

.btn.astroblue {
  --color-h: 197;
  --color-s: 100%;
  --color-l: 44%;
}

/*****************************************************************************/
/*** Media queries
/*****************************************************************************/
@media (pointer: coarse) {
  /* mobile device */
}

@media (pointer: fine),
(pointer: none) {
  /* desktop */
}

@media (pointer: fine) and (any-pointer: coarse) {
  /* touch desktop */
}


@media screen and (max-width: 800px) {
}