.wrapper {
    border-radius: 5px;
    border: 2px solid transparent;
    display: inline-block;
    line-height: 0 !important;
    margin: 0 !important;
    padding: 5px !important;
}

.wrapper:hover {
    background: linear-gradient(0deg, rgb(40 200 250 / 5%) 0%, rgb(40 200 250 / 0) 20%, rgb(40 200 250 / 0) 80%, rgb(40 200 250 / 5%) 100%);
    border: 1px solid #e8f3ff00;
    box-shadow: 0 0 6px 0px rgb(40 190 250 / 40%);
}

.wrapper:active {
    background: linear-gradient(0deg, rgb(40 200 250 / 10%) 0%, rgb(40 200 250 / 0) 20%, rgb(40 200 250 / 0) 80%, rgb(40 200 250 / 10%) 100%);
    border: 1px solid #c1d4e8db;
    box-shadow: 0 0 6px 0px rgb(40 190 250 / 50%);
}

.canvas-container {
    position: relative;
    display: inline-block; /* To wrap around the canvas size */
}

.canvas-container canvas {
    display: block;
}

.hover-icon {
    position: absolute;
    top: 5%;
    left: 80%;
    text-align: center;
    display: none; /* Initially hidden */
    cursor: pointer; /* Makes it clear that the icon is clickable */
    border-radius: 5px; /* Optional: Makes the icon background circular */
}

.canvas-container:hover .hover-icon {
    display: block; /* Show on hover */
}

.containerx {
    margin: auto;
}

.overlapping-row {
    position: relative;
    top: 20px;
    z-index: 1;
}

.row {
    display: flex;
}

.left-column {
    flex-grow: 1; /* Takes up the remaining space */
}

.right-column {
    flex-shrink: 1; /* Takes minimal space needed for its content */
}

.container {
  display: flex;
  flex-wrap: wrap;
}

.column-left {
flex-grow: 1;
  flex: 75%; /* Jede Spalte nimmt 50% der Breite ein */
}

.column-right {
flex-shrink: 1;
  flex: 25%; /* Jede Spalte nimmt 50% der Breite ein */
}

/* Media Query für Hochformat Bildschirme */
@media screen and (orientation: portrait) {
  .column-left{
    flex: 100%; /* Jede Spalte nimmt 100% der Breite ein */
  }
}

@media screen and (orientation: portrait) {
  .column-right{
    flex: 100%; /* Jede Spalte nimmt 100% der Breite ein */
  }
}

.tooltip {
    position: absolute;
    box-shadow: 2px 2px 5px rgba(0,0,0,0.2);
    z-index: 1000;
}

/* Optional: Arrow for the tooltip */
.tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-color: #ccc transparent transparent transparent;
}



.contain {
    margin-left: 15px;
    display: flex;
    align-items: center;     /* Vertically center items */
}

button {
    margin-right: 10px; /* Space between button and text area */
}


#txtMsg {
    padding: 10px;
    font-size: 15px; /* Gut lesbare Schriftgröße */
    border: 1px solid #ccc;
    border-radius: 4px;
    width: 80%; /* Responsiv, passt sich der Bildschirmbreite an */
    max-width: 400px; /* Maximale Breite */
}

/* Kleinere Geräte (Handys) */
@media screen and (max-width: 600px) {
    #txtMsg {
        width: 90%; /* Mehr Breite auf kleineren Geräten */
    }
}