:root {
  --color-valuebox: 240 240 240;

  --color-green:  49, 255, 86;
  --color-red:    229, 1, 125;
  --color-yellow: 209, 231, 18;
  --color-pink:   255, 46, 246;
  --color-blue:   1, 177, 238;
  --color-purple: 115, 48, 166;
  --color-gray:   97, 98, 100;

  --color-selectable: 230, 230, 230;
  --color-highlighted: var(--color-blue);
  --color-hover: var(--color-blue);
  --color-background2: var(--color-purple);

  --color-error: var(--color-red);
  --color-succes: var(--color-green);
  --color-warning: var(--color-yellow);
  --color-feedback: var(--color-pink);
  --color-notification: var(--color-blue);
  --color-ignore: var(--color-red);

  --color-pump: var(--color-red);
  --color-wing: var(--color-yellow);
  --color-downwind: var(--color-blue);
  --color-undefined: var(--color-gray);
}

.warning {
  background-color: rgb(var(--color-warning))
}

.tag.warning {
  color: rgb(var(--color-red));
}

.error {
  background-color: rgb(var(--color-red));
}

.tag.error {
  color: rgb(var(--color-yellow));
}

.default {
  background-color: rgb(var(--color-gray));
}

.tag.default {
  color: white;
}

.feedback {
  background-color: rgb(var(--color-feedback));
}

.unapproved {
  background-color: rgb(var(--color-feedback));
}

.tag.feedback,
.tag.unapproved {
  background-color: rgb(var(--color-feedback));
  color: rgb(var(--color-yellow));
}

.tag.ignored {
  background-color: rgb(var(--color-red));
  color: rgb(var(--color-yellow));
}

.tag.record,
.tag.approved {
  background-color: rgb(var(--color-warning));
  color: rgb(var(--color-red));
}

.tag.equipment {
  background-color: rgb(var(--color-purple));
  color: rgb(var(--color-yellow));
}

.info {
  background-color: rgb(var(--color-blue))
}

.dirty {
  background-color: rgb(var(--color-blue))
}

.selectable {
  background-color: rgb(var(--color-selectable));
}
.selectable:hover {
  background-color: rgb(var(--color-hover));
}

/* Hide / Hover */
.hidden {
  display: none;
}

.hideempty:empty {
  display: none;
}

.showonlyhover {
  opacity: 0.0;
}

.showonlyhover:hover {
  opacity: 1.0;
}

.showonlyhoverparent:hover .showonlyhover {
  opacity: 1.0;
}

/* padding */
.padding {
  padding-top: 12px;
  padding-bottom: 12px;
}

.paddingfull {
  padding: 12px;
}

.paddingH {
  padding-top: 6px;
  padding-bottom: 6px;
}

.padding:empty {
  padding: 0;
}

.tight {
  padding: 0;
  margin: 0;
}

.middle {
    vertical-align: middle;
}

/* position */
.parent {
  position: relative;
}

.parentcenter {
  position: relative;
  display: flex;
  justify-content: center; /* Horizontal center */
}

.absolute-topleft,
.absolute-topleft8{
  position: absolute;
  z-index: 1000;
  left: 0;
  top: 0;
}

.absolute-topleft8 {
  left: 8px;
  top: 8px;
}

.absolute-topright {
  position: absolute;
  z-index: 1000;
  right: 0;
  top: 0;
}

.absolute-topright8 {
  position: absolute;
  z-index: 1000;
  right: 8px;
  top: 8px;
}

.absolute-bottomleft {
  position: absolute;
  z-index: 1000;
  left: 0;
  bottom: 0;
}

.absolute-bottomleft8 {
  position: absolute;
  z-index: 1000;
  left: 8px;
  bottom: 8px;
}

.absolute-bottomright {
  position: absolute;
  z-index: 1000;
  right: 0;
  bottom: 0;
}

/** Row **/

.dummyrow, .flexrow, .fixrow {
  padding-top: 4px;
  padding-bottom: 4px;
  gap: 8px;
}


.fixrow {
  white-space: nowrap;
  align-items: center;
  display: flex;
}

.tightrow {
  display: flex;
  align-items: center;
}

.flexrow {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

.flexrow.start {
  align-items: flex-start;
}

.flexrow .label {
  min-width: 75px;
}

.flex1 {
  flex: 1;
}


/** ------------ Text ------------ **/
a, .link {
  text-decoration: underline;
  text-decoration-color: #0a58ca88;
  color: #0a58ca;
  cursor: pointer;
}

.second a, .second .link {
    color: rgb(var(--color-yellow));
    text-decoration-color: rgb(var(--color-yellow));
}

.link {
  padding: 2px;
  margin-right: 8px;
}

.link .selected {
  color: #c05dc6;
  text-decoration: underline;
}

a:hover, .link:hover {
  text-decoration: underline;
  color: #E5017D;
  text-decoration-color: #E5017D;
}

div.spacer {
  height: 12px;
}

.chapter {
  padding-top: 24px;
  padding-bottom: 12px;
}

p {
  margin: 0;
}

p:not(:last-child) {
  margin-bottom: 1em;
}

h1 {
  font-size: 24px;
  font-weight: 600;
}

h2 {
  font-size: 22px;
  font-weight: 600;
}

h3 {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 2px;
  margin-top: 2px;
}

h4 {
  font-size: 14px;
  font-weight: 600;
}

/** ------------ Valuebox ------------ **/
.label, .valuelabel {
  font-size: 14px;
  font-weight: 600;
}

.valuelabel {
  min-width: 120px;
}

.valuebox .info {
  display: none;
  position: absolute;
  left: 0;
  top: 0;
  cursor: pointer;
  z-index: 10;
}

.valuebox .info img {
  width: 20px;
  height: 20px;
  opacity: 0.5;
  display: block;
}

.valuebox:hover .info {
  display: inline-block;
}

.valuebox {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: rgb(var(--color-valuebox));
  color: #111111;
  padding: 0;
  border-radius: 5px;
  text-align: center;
}

.dummyvaluebox, .valuebox {
  min-width: 90px;
}

.dummyvaluebox {
  display: block;
}

.valueboxlink:hover .valuebox {
  background-color: rgb(var(--color-hover));
}

.valuebox .desc {
  font-size: 12px;
  color: #666;
  margin: 0;
  margin-top: -5px;
  padding: 0;
}

.valuebox .value {
  font-size: 16px;
  font-weight: 600;
  margin: 0;
  padding: 0;
}

.valueboxlink {
  text-decoration: none;
  color: inherit;
}

/* unit */
.valuebox i {
  padding-left: 5px;
  font-size: 12px;
  font-weight: normal;
}

/** ------------ Info / Tooltip ------------ **/
.info .tooltip {
  display: none;
  position: absolute;
  bottom: 100%; /* Position above the info image */
  left: 50%;
  transform: translateX(-20%);
  background-color: #333;
  color: #fff;
  padding: 5px;
  border-radius: 3px;
  white-space: nowrap;
  font-size: 12px;
  z-index: 1000;
  opacity: 0;
  transition: opacity 0.3s;
}

.info:hover .tooltip {
  display: block;
  opacity: 1;
}


/** ------------ Second / Dialog ------------ **/
.second {
  color: white;
}

.secondbg {
  background-color: rgb(var(--color-background2));
}

.dialog {
  padding: 10px;
  z-index: 100;
  width: 100%;
  max-width: 600px;
}

.second.dialog, .second .dialog {
  background-color: rgb(var(--color-background2));
}



/** ------------ H6 ------------ **/
h6 span, h6 u {
  color: white;
  text-decoration: none;
  font-size: 26px;
  font-weight: 400;
  display: inline-block;
  line-height: 1;
  padding: 0;
  margin: 0;
}

/* letter */
h6 u {
  width: 1em;
  aspect-ratio: 1;
}

/* text */
h6 span {
  font-size: 20px;
  padding-left: 2px;
  padding-right: 2px;
}

.warning h6 {
  color: #b29c9a;
  background-color: white;
}

h6.wing {
  background-color: rgb(var(--color-wing));
}

h6.pump {
  background-color: rgb(var(--color-pump));
}

h6.downwind {
  background-color: rgb(var(--color-downwind));
}

/** ------------ Form ------------ **/
.form-group {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  padding-top: 6px;
  padding-bottom: 6px;
}

form button.showDirty {
  visibility: hidden;
}

form.dirty button.showDirty {
  visibility: visible;
}

form label {
  width: 120px;
  word-wrap: normal;
  min-width: 75px;
  font-weight: 600;
  font-size: 16px;
}

/** ------------ Styled Table ------------ **/
.styled-table {
  width: 100%;
  border-collapse: collapse;
  margin: 20px 0;
  font-size: 1em;
}

.styled-table thead tr {
  background-color: #333333;
  color: #ffffff;
  text-align: left;
}

.styled-table th, .styled-table td {
  padding: 8px;
  border: 1px solid #dddddd;
}

/* some states */
.ok-row, .known-row {
  background-color: rgba(var(--color-succes), 0.6);
}

.duplicated-row, .outdated-row, .overlapping-row {
  background-color: rgba(var(--color-warning), 0.6);
}

.failed-row {
  background-color: rgba(var(--color-error), 0.6);
}

.styled-table p {
  margin: 0;
}