/* Backend */

.table-row {
	background-color: #d9d9d9; /* Hervorhebung der Umfrage-Zeile */
}

.survey-row {
    background-color: #eaeaea; /* Hervorhebung der Umfrage-Zeile */
}

.question-row {
    background-color: #fff; /* Hintergrundfarbe für Frage-Zeilen */
}

.survey-group-divider td {
    padding: 10px 0; /* oder ein beliebiger Abstand, den Sie wünschen */
    border-bottom:1px solid #ccc;
}

.widefat td {
	vertical-align: inherit;
}

.question-row {
    background-color: #F5F5F5; /* Hervorhebung der Umfrage-Zeile */

}

/* Frontend */

.survey-container {
    margin: auto;
    padding: 20px;
    text-align: center;
}

.survey-container .survey-question {
    font-size: 18px;
    margin-bottom: 20px;
}

.survey-container .survey-next-question {
	margin-top: 20px;
    transition: all 0.65s ease; 
}

.survey-container .survey-question p {
    font-size: 1.2em; /* Größe der Frage anpassen */
    margin-bottom: 25px;
    text-align: center;
}



/* Radiobuttons als Buttons */
.survey-container .survey-question input[type="radio"] {
    display: none; /* Verstecke die Standard-Radiobuttons */
}

.survey-container .survey-question label {
    display: inline-block; /* Buttons nebeneinander */
    background-color: #f0f0f0;
    padding: 10px 20px;
    border: 1px solid #d4d4d4;
    border-radius: var(--wp--custom--borderradius);
    margin: 5px;
    cursor: pointer;
    transition: all 0.65s ease; 

}

.survey-container .survey-question label:hover {
    background-color: var(--wp--preset--color--secondary);
}

.survey-container .survey-question input[type="radio"]:checked + label {
    background-color: var(--wp--preset--color--secondary);
    color: white;
}


.survey-container input[type="radio"] {
    margin-right: 5px;
}

.survey-container label {
    display: inline-block;
    margin-right: 10px;
    padding: 10px;
    background-color: #f0f0f0; /* Hintergrundfarbe für die Labels */
    border: 1px solid #ddd; /* Rand für die Labels */
    border-radius: 5px; /* Abgerundete Ecken */
    min-width: 100px; /* Mindestbreite für die Labels */
    text-align: center;
}

/* Styling für aktive Auswahl */
.survey-container input[type="radio"]:checked + label {
    background-color: var(--wp--preset--color--secondary); /* Hintergrundfarbe für ausgewählte Optionen */
    color: #000; /* Textfarbe für ausgewählte Optionen */
}

/* Styling für Mauszeiger-Hover-Effekt */
.survey-container label:hover {
    background-color: #eaeaea; /* Hintergrundfarbe beim Hover */
    cursor: pointer; /* Mauszeiger */
}

/* Styling für Textfelder */
.survey-container .survey-question input[type="text"] {
    background: transparent;
    border: none;
    border-bottom: 1px solid #333; /* Dicke und Farbe der Unterstreichung */
    outline: none;
    width: 80%; /* Breite des Textfeldes */
    font-size: 1.2em; /* Schriftgröße, passend zur Frage */
	font-weight:100;
    color: #333; /* Textfarbe */
    padding: 10px 0; /* Abstand oben und unten */
    margin: 10px auto; /* Zentrierung und Abstand */
    display: block;
}

/* Höhere Spezifität, um Standard-Styles zu überschreiben */
.survey-container .survey-question input[type="text"]:focus {
    border-bottom-color: var(--wp--preset--color--secondary); /* Farbe der Unterstreichung beim Fokussieren */
}



@media (max-width: 767px) {
    .survey-container .survey-question label {
        display: block; /* Buttons untereinander */
    }
}

/* CSS-Regel, um das Div mit data-question-type="scale" anzusprechen */
div[data-question-type="scale"] {
    /* Deine CSS-Stile hier */
    position: relative; /* Positionierung des Pseudo-Elements relativ zum Elternelement */
}

/* Pseudo-Element :after für die Beschreibung */
div[data-question-type="scale"]:after {
    content: "1 = schlecht / 5 = perfekt"; /* Der Text für die Beschreibung */
    position: absolute; /* Positionierung relativ zum Elternelement */
    top: 100%; /* Unterhalb des Elternelements positionieren */
    left: 50%; /* Zur horizontalen Mitte des Elternelements verschieben */
    transform: translateX(-50%); /* Zur horizontalen Mitte zentrieren */
    font-size: var(--wp--preset--font-size--x-small);
    padding: 5px; /* Innenabstand für die Beschreibung */
	width:100%;
}