/* Define global CSS variables */
:root {
    --bg-light-cyan: #E5FFFF;
    --bg-light-green: #DFF8DB;
    --bg-light-yellow: #FEFDCB;
    --bg-light-pink: #FBE8EE;
    --bg-white: #FFFFFF;
    --bg-light-gray: #ddd;
    --bg-gray: #d3d3d3;
    --bg-dark-gray: #ccc;
    --text-red: red;
    --text-black: #000000;
    --slider-thumb: #04AA6D;
    --button-border: #000000;
}

/* Base styles for the document */
body {
    /* margin: 2vw; */
    font-family: Verdana, Helvetica, sans-serif;
    background-color: var(--bg-white);
}

/* Main grid container: 3 columns, 2 rows for 6 divs */
.wrapper {
    display: grid;
    grid-template-columns: 13vw 40vw 41vw;
    grid-template-rows: 3vw auto;
    gap: 1vw;
}

/* Slider container: text input, slider, value label */
.sliderElement {
    display: grid;
    grid-template-columns: 7vw 16.5vw 3.5vw; /* Adjusted for 2vw gaps */
    gap: 2vw; /* Added 2vw gap between elements */
    width: 100%;
    align-items: center;
}

/* Slider styling */
.slider {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 2vw;
    background: var(--bg-gray);
    outline: none;
    opacity: 0.7;
    transition: opacity 0.2s;
}

.slider:hover {
    opacity: 1;
}

.slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    border-radius: 50%;
    width: 2vw;
    height: 2vw;
    background: var(--slider-thumb);
    cursor: pointer;
}

.slider::-moz-range-thumb {
    width: 2vw;
    height: 2vw;
    background: var(--slider-thumb);
    cursor: pointer;
}

input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
}

/* Value label next to slider */
.valueLabel {
    width: 3.5vw; /* Match column width */
    text-align: left;
    font-size: 1vw;
}

/* Textareas */
textarea {
    width: 100%;
    box-sizing: border-box;
    resize: vertical;
}

/* Section-specific styles */
.leftTop {
    background-color: var(--bg-light-pink);
    font-size: 1.4vw;
    font-family: Arial, Helvetica, sans-serif;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5vw;
    padding: 0.2vw 0.2vw;
    height: 100%;
    box-sizing: border-box;
}

.centerTop {
    font-size: 1.5vw;
    font-family: Arial, Helvetica, sans-serif;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1vw;
    padding: 0;
    height: 100%;
}

.rightTop {
    font-size: 1.5vw;
    font-family: Arial, Helvetica, sans-serif;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5vw;
    height: 100%;
}

/* Backgrounds for specific elements */
.dumbLabel {
    padding: 0;
}

.introTitleClass {
    background: var(--bg-light-cyan);
    padding: 0.1vw 0.5vw;
    line-height: 1;
}

.optionTitleClass {
    background: var(--bg-light-green);
    padding: 0.1vw 0.5vw;
    line-height: 1;
}

.reactionLabel {
    background-color: var(--bg-light-yellow);
    padding: 0.2vw 0.5vw;
}

.rightBottom {
    padding: 1vw;
    display: flex;
    flex-direction: column;
    gap: 0.5vw;
}

/* Interactive elements */
.bigButton {
    font-size: 1.5vw;
    padding: 0.2vw 0.5vw;
    height: 2vw;
    line-height: 1;
    cursor: pointer;
    border: 0.1vw solid var(--button-border);
    background-color: var(--bg-light-gray);
    box-sizing: border-box;
}

.bigButton:hover {
    background-color: var(--bg-dark-gray);
}

.conseqSelector {
    font-size: 1.5vw;
    width: 100%;
}

/* Content-specific styles */
.mainText {
    font-size: 1vw;
    font-family: "Georgia", serif;
    background-color: var(--bg-light-cyan);
}

.optionText {
    font-size: 1vw;
    font-family: "Georgia", serif;
    color: var(--text-red);
    background-color: var(--bg-light-green);
}

.reactionElement {
    font-size: 1vw;
    background-color: var(--bg-light-yellow);
}

.incidentClass {
    font-size: 1vw;
    min-width: 15vw;
    background-color: var(--bg-light-pink);
    width: 100%;
    box-sizing: border-box;
}

.sliderLabelClass {
    min-width: 7vw;
    font-size: 1vw;
    font-family: "Georgia", serif;
    max-height: 2vw;
}

.scrollContainer {
    border: 0.1vw solid var(--text-black);
    overflow: auto;
}

.optionGroup {
    display: flex;
    flex-direction: column;
    gap: 0.5vw;
    margin-bottom: 1vw;
}

.separator {
    font-size: 1.5vw;
}

.leafLabel { font-size: 1.2vw; text-align: center}

.upDownButton { border-radius: 50%; }

.quantifierMenu {
    min-width: 3vw;
    max-width: 5vw;
    font-size: 0.8vw;
    font-family: "Georgia", serif;
    max-height: 2vw;
}

.container {
  display: grid;
  grid-template-columns: auto auto auto;
  background-color: white;
  padding: 0.1vw;
  gap: 0.4vw;
}

.globalLabel {
	font-size: 0.8vw;
}