body {
  color: #181818;
  background: url(../images/background2.jpg) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

#header h1 {
  font-family: "Oswald", sans-serif;
  color: #ffffff;
}

#customer_code {
  display: none;
}

#customer_vat {
  display: none;
}

#customer_user_uuid {
  display: none;
}

#note {
  display: none;
}

.cloudy {
  background-color: rgb(233, 236, 239) !important;
  /* This is for ie8 and below */
  background-color: rgba(233, 236, 239, 0.2) !important;
}

#logo {
  height: 30px;
}

#footer {
  font-family: "Oswald", sans-serif;
  font-size: 10px;
}

#systemInfo {
  font-family: "Oswald", sans-serif;
}

#privacy {
  font-size: 10px;
}

video {
  max-width: 100%;
  height: auto;
  border: 1px solid black;
}

/* TREEVIEW */
.tree {
  --spacing : 1.5rem;
  --radius  : 10px;
}

.tree li {
  display      : block;
  position     : relative;
  padding-left : calc(2 * var(--spacing) - var(--radius) - 2px);
}

.tree ul {
  margin-left  : calc(var(--radius) - var(--spacing));
  padding-left : 0;
}

.tree ul li {
  border-left : 2px solid gray;
}

.tree.kit-data-info li:last-child {
  border-color : transparent;
}

.tree.kit-data-info-disposed li:last-child {
  border-color : transparent;
}

.tree .last-element {
  border-color : transparent;
}

.tree ul li::before {
  content      : '';
  display      : block;
  position     : absolute;
  top          : calc(var(--spacing) / -2);
  left         : -2px;
  width        : calc(var(--spacing) + 2px);
  height       : calc(var(--spacing) + 1px);
  border       : solid gray;
  border-width : 0 0 2px 2px;
}

.tree summary {
  display : block;
  cursor  : pointer;
}

.tree summary::marker,
.tree summary::-webkit-details-marker {
  display : none;
}

.tree summary:focus {
  outline : none;
}

.tree summary:focus-visible {
  outline : 1px dotted black;
}

.tree li::after,
.tree summary::before {
  content       : '';
  display       : block;
  position      : absolute;
  top           : calc(var(--spacing) / 2 - var(--radius));
  left          : calc(var(--spacing) - var(--radius) - 1px);
  width         : calc(2 * var(--radius));
  height        : calc(2 * var(--radius));
  border-radius : 50%;
  background    : gray;
}

.tree.kit-data-info li::after {
  content       : '';
  display       : block;
  position      : absolute;
  top           : calc(var(--spacing) / 2 - var(--radius));
  left          : calc(var(--spacing) - var(--radius) - 1px);
  width         : calc(2 * var(--radius));
  height        : calc(2 * var(--radius));
  border-radius : 50%;
  background    : gray;
}

.tree.kit-data-info-disposed li::after {
  content       : '';
  display       : block;
  position      : absolute;
  top           : calc(var(--spacing) / 2 - var(--radius));
  left          : calc(var(--spacing) - var(--radius) - 1px);
  width         : calc(2 * var(--radius));
  height        : calc(2 * var(--radius));
  border-radius : 50%;
  background    : red;
}

.tree.kit-data-disposed summary::before {
  content     : '+';
  z-index     : 1;
  background  : red !important;
  color       : $white;
  line-height : calc(2 * var(--radius) - 2px);
  text-align  : center;
}

.tree.kit-data summary::before {
  content     : '+';
  z-index     : 1;
  background  : gray;
  color       : white;
  line-height : calc(2 * var(--radius) - 2px);
  text-align  : center;
}

.tree.disposal summary::before {
  content     : '+';
  z-index     : 1;
  background  : red;
  color       : white;
  line-height : calc(2 * var(--radius) - 2px);
  text-align  : center;
}

.tree summary::before {
  content     : '+';
  z-index     : 1;
  background  : green;
  color       : white;
  line-height : calc(2 * var(--radius) - 2px);
  text-align  : center;
}

.tree details[open] > summary::before {
  content : '−';
}

.tree .selected {
  background: cyan;
}