body {
  font-family: Arial, sans-serif;
  background-color: #f0f0f0;
  display: flex;
  flex-direction: column; /* Vertikale Anordnung */
  /*align-items: center;
  /*    height: 100vh;*/
  margin: 0;
  overflow:hidden;
}

h2{
  margin-top:.75rem;
  margin-bottom:.5rem;
}

html, body {
  touch-action: manipulation;
  overflow-x: auto;
  overflow-y:auto;
  width: 100%;
}

#supercontainer {
  min-width: max-content;
  transform-origin: 0 0;
  touch-action: pan-x pan-y pinch-zoom;
  overflow-y:hidden;
}

.placeholder {
  height: 2.5em;
  line-height: 2.5em;
  width:2.5em;
  background-color: #f0f0f0;
  border: 1px dashed #333;
  margin-bottom: 10px;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  margin-left:auto;
  margin-right:auto;
  border-radius:50%;
}
select[multiple] {
  width: 200px;
  padding: 5px;
}

.placeholder::after {
  content: "+";
  font-size: 24px;
  color: #999;
}

.placeholder:hover {
  background-color: #e0e0e0;
}


.menu-container {
  /*    width: 200px; */ /* Feste Breite für die Menüs */
  margin-right: 0px;
  margin-left: 0px;
  margin-top: 0px;
  margin-bottom: 0px; /* Abstand zwischen den Menüs */
  position: relative;
  vertical-align: middle;
  height:calc(100dvh - 3rem);
  overflow-y:auto;
  overflow-x:visible;
  padding-bottom:3rem;
  /*align-self: center;*/
}
.menu-container.left {
  min-width: 20em;
  max-width:25%;
  float:left;
  margin-right:auto;
  z-index:4;
}

.menu-container.right {
  min-width: 20em;
  max-width:25%;
  float:right;
  margin-left:auto;
  overflow-x:visible;
  overflow-y:auto;
  z-index:4;
}
.menu-container.center {
  width:40rem;
  z-index:4;
}

.spacer {
  position: relative;
  min-width: 10em;
  width:18%;
}
.no-menu {
  margin-left: auto;
}
.mkr-menu {
  text-align: left;
  padding-left: .5em;
}
.mkr-menu > div {
  margin-inline: auto;
}

div.year {
  background: #eeeeeec0;
  border-radius: 50%;
  border: 1px solid #808080;
  width: 1.6em;
  height: 1.6em;
  line-height: 1.6em;
  vertical-align: middle;
  text-align: center;
  font-family: inherit;
  margin-right: auto;
  margin-left: 0.5em;
  float: left;
}
div.reihentitel {
  min-width: 10em;
  margin-left: 0.5em;
  line-height: 1.6em;
}
.main-menu {
  background-color: #4caf50;
  color: white;
  padding: 13px;
  border-radius: 0.5em;
  cursor: pointer;
  text-align: center;
  z-index: 2;
  width: max-content;
  right: 0px;
  left: 0px;
  margin-inline: auto;
  width: auto;
  text-align: center;
  margin-top:.25em;
  margin-bottom:.25em;
}

.menu-container * {
  font-weight: bold;
}

#tools-container{
  padding-right:0.5em;
}

.sub-menu {
  transform: scaleY(1); /* Anfangszustand: nicht sichtbar */
  padding-top: 0em;
  transform-origin: top;
  overflow-x: visible;
  margin-bottom: .5em;
  margin-top:0em;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
}

.leader-line {
  z-index: 3;
}

.sub-menu > div {
  overflow-x: visible;
}

.sub-item {
  overflow-x: visible;
  background-color: #fff;
  color: #333;
  padding: 6px 3px 6px 3px;
  border: 1px solid #ddd;
  border-radius: 5px;
  margin-top: 5px;
  text-align: center;
  width: auto;
}
/*
.numbered-item[draggable="true"] {
  cursor: grab;
}

.numbered-item[draggable="true"]:hover {
  outline: 2px solid #4CAF50;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.numbered-item[draggable="false"] {
  cursor: not-allowed;
  opacity: 0.8;
}
  */

.sub-item.drop-target {
  background: rgba(76, 175, 80, 0.1);
  border: 2px dashed #4CAF50;
}

.sub-item.drop-target.invalid {
  background: rgba(244, 67, 54, 0.1);
  border: 2px dashed #F44336;
}


.gn {
  background: green;
  color: white;
}

.lb {
  background: skyblue;
  color: black;
}

.bl {
  background: blue;
  color: white;
}

.pn {
  background: lightpink;
  color: black;
}
.rd {
  background: red;
  color: white;
}
.or {
  background: orange;
  color: black;
}

.selected {
  border: 2px dashed red;
}

.row {
  display: flex;
  width: 100%;     
  gap:5em;
justify-content:space-evenly;
}
.no-menu {
  width: 100%;
}
.no-menu > div {
  margin-right: 1em;
}

.div-with-marker {
  position: relative; /* Ensure the div is a positioned element */
  overflow:visible;
}

.div-with-marker::after {
  content: '';
  position: absolute;
  top: 0.1em;
  right: .75em;
  width: 1em; /* Circle diameter */
  height: 1em; /* Circle diameter */
  background-color: yellow; /* Change to your preferred color */
  border-radius: 50%; /* Makes the element a circle */
}

.sub-item:hover {
  border: 2px solid #c03f22a0;
  border-collapse:collapse;
}

.sub-item:last-child{
  margin-bottom:0px;
}

.highlightedline {
  stroke: #c03f22a0 !important;
}

input[type="checkbox"] {
  margin-inline-start: auto;
}

#linesLayer {
  pointer-events: none;
  z-index: 3;
  position: absolute;

  top: 0;
  left: 0;
  margin-left: 0;
  margin-right: 0;
}
#linesLayer>path{
  pointer-events:stroke;
}

h2{
  text-align:center;
}

div#supercontainer{
  position:relative;
  width:100%;
}

.sub-item.highlight{
  background:lightgreen;
}

#globalSaveButton {
  position: fixed;
  bottom: 4rem;
  right: 1rem;
  width: 4rem;
  height: 4rem;
  border-radius: 50%;
  background-color: #4caf50;
  color: white;
  border: none;
  font-size: 2rem;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
  z-index:11;
}

.connection-saved {
  opacity: 0.5;
}

.connection-new {
  opacity: 0.8;
  stroke: #22a322;
}

.connection-delete {
  opacity: 0.8;
  stroke: #d33030;
}
.connection-revert-button {
  background: white;
  border: 1px solid #ccc;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  cursor: pointer;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.connection-revert-button:hover {
  background: #f0f0f0;
}