html {
  overflow-x: hidden;    /* kein horizontaler Scroll */
}

body {
  margin: 20px;
  overflow-y: auto;      /* vertikales Scroll erlauben */
}

:root {
  /* Schriftgröße skaliert zwischen 14px und 18px je nach Viewport-Breite */
  font-size: clamp(14px, 1.5vw, 18px);
}

body {
  font-size: 1rem;  /* 1rem = Root-Schriftgröße */
}

* {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

        body {
            font-family: Arial, sans-serif;
            background-color: #2e2e2e;
            color: white;
            margin: 20px;
        }

        .container {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            height: calc(100vh - 40px); /* berücksichtigt body-Margin oben/unten */
            box-sizing: border-box;
        }

        .left-column {
            flex-grow: 1;
            display: flex;
            justify-content: center;
            align-items: flex-start;
            margin-right: 20px;
            position: relative;
            height: 100%;
        }

        .video-container {
            background-color: rgba(0, 0, 0, 0.5);
            width: 100%;
            height: 100%;
            position: relative;
        }

        video {
            width: 100%;
            height: auto;
            aspect-ratio: 16 / 9;
        }

        .small-video {
            position: absolute;
            bottom: 10px;
            right: 10px;
            width: 21%;
            height: auto;
            aspect-ratio: 16 / 9;
            border: 2px solid #fff;
        }

        .right-column {
            width: 25%;
            flex-shrink: 0;
            display: flex;
            flex-direction: column;
            height: 100%;
            /* Volle Höhe des Eltern-Elements */
        }

        .control-label {
            margin-bottom: 5px;
            text-align: left;
            width: 100%;
            font-size: 16px;
        }

        .dropdown,
        .slider,
        .button {
            width: 100%;
            margin-bottom: 10px; /* Halbiere den freien Platz unter den Buttons */
            padding: 10px;
            background-color: #000;
            color: #fff;
            border: 1px solid #fff;
            border-radius: 5px;
        }

        .slider {
            -webkit-appearance: none;
            appearance: none;
            height: 15px;
            /* background-color: #000; */
            background: linear-gradient(to right, darkgreen, darkred);
            border-radius: 5px;
            outline: none;
        }

        .slider::-webkit-slider-thumb {
            -webkit-appearance: none;
            appearance: none;
            width: 15px;
            height: 15px;
            background: #fff;
            border-radius: 50%;
            cursor: pointer;
        }

        .slider-device-inactive {
            background: rgba(255, 0, 0, 0.35);
        }

        .slider:disabled::-webkit-slider-thumb {
            /* display: none; Slider-Thumb ausblenden, wenn deaktiviert */
            background: rgba(255, 128, 128, 0.5);
        }

        .slider:disabled::-moz-range-thumb {
            /* display: none; Slider-Thumb ausblenden, wenn deaktiviert */
            background: rgba(255, 128, 128, 0.5);
        }

        .button {
            text-align: center;
            cursor: pointer;
        }

        .button:disabled {
            background-color: rgba(255, 255, 255, 0.1) !important; /* Transparenter Hintergrund */
            color: rgba(255, 255, 255, 0.5) !important; /* Textfarbe ändern, um deaktivierte Buttons besser sichtbar zu machen */
            cursor: not-allowed; /* Zeigt an, dass der Button nicht klickbar ist */
        }

        .button-row {
            display: flex;
            justify-content: space-between;
            margin-bottom: 0px; /* Halbiere den freien Platz unter der Button-Reihe */
        }

        .button-row .button {
            flex-grow: 1;
            margin-right: 3px;
        }

        .button-row .button:last-child {
            margin-right: 0;
        }

        .overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
            color: #fff;
            display: flex;
            justify-content: center;
            align-items: center;
            opacity: 0;
            visibility: hidden;
            transition: opacity 0.5s;
            z-index: 1000;
        }

        .overlay.active {
            opacity: 1;
            visibility: visible;
        }

        .overlay p {
            width: 50%;
            text-align: center;
            font-size: 2vw;
        }

        .checkbox {
            margin-bottom: 20px;
            display: flex;
            align-items: center;
            width: 100%;
        }

        .checkbox input {
            display: none;
        }

        .checkbox label {
            font-size: 16px;
            line-height: 20px;
            position: relative;
            cursor: pointer;
            padding-left: 30px;
        }

        .checkbox label::before {
            content: '';
            display: inline-block;
            position: absolute;
            left: 0;
            top: 50%;
            transform: translateY(-50%);
            width: 20px;
            height: 20px;
            border: 2px solid #fff;
            background-color: transparent;
            border-radius: 3px;
        }

        .checkbox input:checked+label::before {
            background-color: rgba(255, 255, 255, 0.5);
        }

        .message {
            margin-bottom: 10px;
            max-width: 80%;
            padding: 8px 12px;
            border-radius: 10px;
            font-size: 14px;
            line-height: 1.4;
            word-wrap: break-word;
            display: inline-block;
            position: relative;
        }

        .sender {
            align-self: flex-end;
        }

        .receiver {
            align-self: flex-start;
        }

        .message-boy {
            background-color: #4c99af;
            color: white;
        }

        .message-girl {
            background-color: #f327af;
            color: white;
        }

        .message-system {
            background-color: rgba(0, 0, 0, 0.0);
            color: rgb(122, 122, 122);
        }

        .message-force {
            background-color: rgb(255, 0, 0);
            color: white;
        }

        .message-preplist{
            background-color: rgba(0, 255, 157, 0.082);
            color: white;
            margin-left: auto;
            margin-right: auto;
            max-width: 95%;
            border: 1px solid #00ffdd;
        }

        .message-preplist li {
            margin-left: 15px;
        }

        .chat-container {
            display: flex;
            flex-direction: column;
            flex-grow: 1;
            /* Nimmt den verfügbaren Platz in der rechten Spalte ein */
            margin-top: 20px;
            height: 100%;
            /* Volle Höhe des Containers */
            overflow: hidden;
            /* Verhindert, dass die Chatbox ausläuft */
        }

        .chatbox {
            flex-grow: 1;
            background-color: #1e1e1e;
            border: 1px solid #444;
            border-radius: 5px;
            padding: 10px;
            overflow-y: scroll;
            /* Scrollen beibehalten */
            display: flex;
            flex-direction: column;
        }

        /* Scrollbar ausblenden für Webkit-Browser (Chrome, Safari) */
        .chatbox::-webkit-scrollbar {
            display: none;
        }

        /* Scrollbar ausblenden für Firefox */
        .chatbox {
            scrollbar-width: none;
            /* Versteckt die Scrollbar in Firefox */
        }

        .chat-input {
            display: flex;
            margin-top: 10px;
            width: 100%;
        }

        .chat-input input {
            flex-grow: 1;
            padding: 8px;
            border: 1px solid #444;
            border-radius: 5px;
            background-color: #2e2e2e;
            color: white;
            outline: none;
        }

        .chat-input button {
            margin-left: 5px;
            padding: 8px 12px;
            background-color: #4caf50;
            border: none;
            border-radius: 5px;
            color: white;
            cursor: pointer;
        }

        .emoji-button {
            margin-left: 5px;
            padding: 8px;
            background-color: #555;
            border: none;
            border-radius: 5px;
            color: white;
            cursor: pointer;
        }

        .message.emoji {
            font-size: 4em;
            /* Emoji Größe anpassen */
        }

        .hidden {
            display: none;
        }

        .slider-container {
            position: relative;
            width: 100%;
            display: flex;
            align-items: center;
        }

        .slider-percentage {
            position: absolute;
            top: 25%;
            left: 50%;
            transform: translate(-50%, -50%);
            color: white;
            font-size: 14px;
            pointer-events: none; /* Verhindert, dass die Prozentanzeige interaktiv ist */
            display: flex;
            align-items: center;
            justify-content: center;
            height: auto;
            mix-blend-mode: difference; /* Setzt die Farbe auf die umgekehrte Farbe des Hintergrunds */
        }

        .separator {
            border: 0;
            height: 1px;
            background: transparent;
            margin: 20px 0;
        }

        .special-message {
            width: 100%;
            background-color: #444;
            color: white;
            padding: 10px;
            border-radius: 5px;
            display: flex;
            flex-direction: column;
            align-items: center;
            border: 2px solid #000;
        }

        .special-message-text {
            margin-bottom: 10px;
            text-align: center;
        }

        .special-message-buttons {
            display: flex;
            justify-content: space-around;
            width: 100%;
        }

        .special-message-status {
            margin-top: 10px;
            text-align: center;
            font-weight: bold;
        }

        .accept-button {
            background-color: #4caf50;
        }

        .reject-button {
            background-color: #f44336;
        }

        .modal {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.5);
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 2000;
        }

        .modal.hidden {
            display: none;
        }

        .modal-content {
            position: relative;
            background: #333;
            color: #fff;
            padding: 20px;
            border-radius: 5px;
            width: 90%;
            max-width: 400px;
            max-height: 90vh; /* Maximale Höhe der Modal */

        }

        .modal-content .description {
            margin-bottom: 10px;
            font-size: 14px;
            color: #ccc;
        }

        .modal-close {
            position: absolute;
            top: 10px;
            right: 15px;
            font-size: 1.5em;
            cursor: pointer;
        }

        #modal-preplist-options-list {
            list-style: none;
            margin: 0 0 10px 0;
            padding: 0;
            overflow-y: auto;
            max-height: 50vh;  /* Maximale Listenhöhe, dann Scrollen */
        }

        #modal-preplist-options-list li {
            display: flex;
            flex-direction: column;      /* Stapelt Kinder vertikal */
            justify-content: flex-start; /* Entfernt horizontales Space-Between */
            margin-bottom: 2px;
            padding: 3px;
            background-color: rgba(255, 255, 255, 0.116);
            color: rgb(255, 255, 255);
        }

        /* hide remove-button and align checkboxes */
        #modal-preplist-options-list li button {
            display: none;
        }

        .option-container {
            display: flex;
            justify-content: space-between; /* Nur Text und Checkbox in einer Zeile */
            width: 100%;
        }

        /* Verstecke die echten Checkboxen in der modal-preplist-options-liste */
        #modal-preplist-options-list li input[type="checkbox"] {
          position: absolute;
          opacity: 0;
          pointer-events: none;
        }

        /* Gesamt-li als klickbare Checkbox gestalten */
        #modal-preplist-options-list li {
          cursor: pointer;
          user-select: none;
        }

        #modal-preplist-options-list li input[type="checkbox"] {
            margin-left: 0; /* Entfernt das bisherige auto-Margin */
            cursor: pointer;
        }

        .checklist-selected-item {
            background-color: rgba(0, 255, 157, 0.233) !important;
            color: rgb(0, 255, 157) !important;
            border-radius: 2px;
            /* border: 1px solid #00ffdd; */

        }

        .option-tooltip {
            display: none;
            font-size: 10px;
            color: #cccccc7c;
            margin-top: 2px;
        }

        /* Auf Mobilgeräten Tooltip unter der Option einblenden */
        @media (max-width: 768px) {
          .option-tooltip {
            display: block;
          }
          .left-column {
            display: none;
          }
          .right-column {
            width: 100%;
            flex-grow: 1;
          }
          .container {
            justify-content: center;
          }
        }

        .message-coinflip {
            border-color: rgb(219, 255, 88);
            background-color: rgba(219, 255, 88, 0.1);
            color: white;
        }

        .message-coinflip .coin {
          width: 50px;
          height: 50px;
          border-radius: 50%;
          margin: 5px auto;
          animation: spin 1s linear infinite;
          border-color: #333333;
          box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);

        }

        .message-coinflip .coin.red { background: red; }
        .message-coinflip .coin.blue { background: skyblue; }

        @keyframes spin {
            0% {
                transform: scaleX(1);
                background-color: red;
            }

            25% {
                transform: scaleX(0);
                background-color: red;
            }
            26% {
                transform: scaleX(0);
                background-color: skyblue;
            }

            50% {
                transform: scaleX(1);
                background-color: skyblue;
            }

            75% {
                transform: scaleX(0);
                background-color: skyblue;
            }
            76% {
                transform: scaleX(0);
                background-color: red;
            }
            100% {
                transform: scaleX(1);
                background-color: red;
            }
        }

        /* Gradient für Wahrscheinlichkeits-Slider im GC-CoinFlip-Modal */
.slider.gc-prob-slider {
  background: linear-gradient(to right, blue 0%, red 100%);
}