:root {
  --rot: #d40000;
  --gelb: #ffcc00;
  --grün: #00aa00;
  --grau: grey;
  --hintergrund: rgb(255, 255, 255);
  --vordergrund: rgb(27,27,27);
  /* --hintergrund: rgb(27,27,27);
  --vordergrund: rgb(202, 202, 202); */
  /* --button: #1f9423;
  --buttonhover: #036408; */
  --button: var(--grün);
  --buttonhover: var(--grün);
}

* {
    font-family: Helvetica, sans-serif; 
    /* font-family: Verdana, Geneva, sans-serif;  */
    background-color: var(--hintergrund);
    color: var(--vordergrund);
}

button[name="nothing"], .nothing {
  border: 0px;
}
  
table {
    border: 0px solid var(--vordergrund);
    border-collapse: collapse;
}

th, td {
    border: 1px solid var(--vordergrund);
    border-collapse: collapse;
}

input[type="checkbox"] {
  accent-color: var(--vordergrund);
}

.inactive {
  color: var(--grau);
  display: inline;
}

.mittig {
  text-align: center;
}

.klein {
  font-size: 75%;
}

table.mittig td {
  text-align: center;
}

.links {
  text-align: left;
}

.rechts {
  text-align: right;
}
.highlighted, .highlighted * {
  background-color: var(--gelb);
  color: var(--vordergrund);
}

.nok, .nok * {
  background-color: var(--rot);
  color: var(--hintergrund);
}

.nokk, .nokk * {
  background-color: violet;
  color: var(--vordergrund);
}

.ok, .ok * {
  background-color: var(--grün);
  color: var(--hintergrund);
}

.neutral .neutral * {
  background-color: var(--hintergrund);
  color: var(--vordergrund);
}

.inlineHighlighted, .inlineHighlighted * {
  background-color: var(--gelb);
  color: var(--hintergrund);
  font-weight: bold;
  font-size: 150%;
  display: inline;
}

.buttonHighlighted {
  border: 1px solid #000;  
}
.buttonHighlighted, .buttonHighlighted * {
  background-color: var(--button);
  color: var(--hintergrund);
  font-size: 100%;
  font-weight: bold;
  border-radius: 4px;
  cursor: pointer;
}

.buttonHighlighted:hover, .buttonHighlighted:hover * {
  background-color: var(--buttonhover);
  color: var(--vordergrund);
}

.budget_ok {
  font-size: 250%;
  background: var(--grün);
  color: var(--hintergrund);
  display: inline;
}

.budget_nok {
  font-size: 250%;
  background: var(--rot);
  color: var(--hintergrund);
  display: inline;
}

.popup {
  display: none;
  position: absolute;
}

.popup_inner {
  background: #F2F5A9;
  position: relative;
  top: -20px;
  left: 10px;
  font-weight: normal;
}

.mainblock {
  clear: both;
}

.my-form {
  display: inline-block;
  margin-right: 10px;
}

.grouped {
  background: var(--grau);
  color: var(--vordergrund);
}

input[type="submit"] {
  padding: 5px 10px;
  font-size: 110%;
  border-radius: 2px;
  cursor: pointer;
}

input[type="submit"]:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  background-color: var(--grau);
}

#main {
  overflow: hidden;
}

#main img#logo {
  float: right;
  margin-left: 10px;
}

#user {
  clear: both;
  text-align: right;
}





.button {
  display: inline-block;
  padding: 10px 20px;
  background-color: var(--button);
  color: white;
  text-decoration: none;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
  margin-top: 10px;
}
.button:hover {
  background-color: var(--buttonhover);
}

.back-link {
  display: inline-block;
  margin-right: 20px;
  margin-bottom: 20px;
}

.hint {
  margin-top: 20px;
  font-style: italic;
}