/* Grundlegendes Layout und Styling */
body {
    font-family: 'Helvetica Neue', sans-serif;
    background-color: #F4F4F4; /* Modernes Hellgrau als Hintergrund */
    margin: 0;
    padding: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #333; /* Dunkelgrau für guten Kontrast */
}

#main-container {
    width: 80%;
    max-width: 1200px;
    background-color: #FFFFFF; /* Reines Weiß für das Haupt-Widget */
    padding: 20px;
    border-radius: 12px;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1); /* Feinerer Schatten */
    margin: 20px;
    overflow: hidden;
}

/* Buttons und Tabs */
.style-button {
    background-color: #FF8C00; /* Beibehaltenes kräftiges Orange */
    color: white;
    padding: 12px 20px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    margin: 10px 0;
    font-size: 16px;
    transition: background-color 0.3s, transform 0.2s, box-shadow 0.2s;
}

button:hover {
    background-color: #FFA500; /* Helles Orange beim Hover */
    transform: translateY(-3px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.tab {
    background-color: #FFDAB9; /* Modernisiertes helles Orange */
    color: #333;
    border: none;
    padding: 12px 20px;
    margin-right: 10px;
    margin-bottom: 20px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 16px;
    transition: background-color 0.3s;
}

.tab:hover {
    background-color: #FFB347; /* Etwas dunkleres Orange beim Hover */
}

.tab.active {
    background-color: #FF4500; /* Dunkles Orange für aktive Tabs */
    color: white;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    border-bottom: 4px solid #D2691E; /* Dunkleres Orange für die Hervorhebung */
}

/* Formularelemente */
label {
    margin-bottom: 12px;
    font-size: 14px;
    color: #505050;
}

textarea{
    resize: none; /* Verhindert das manuelle Ändern der Größe */
    overflow: hidden; /* Erlaubt Scrollen, falls notwendig */
}

input[type="text"], textarea {
    width: 100%;
    padding: 10px;
    margin: 8px 0 20px 0;
    display: inline-block;
    border: 1px solid #CED4DA; 
    border-radius: 8px;
    box-sizing: border-box;
    font-size: 16px;
    background-color: #FFFFFF;
}

input[type="checkbox"] {
    width: 20px;
    height: 20px;
    margin: 8px 0 20px 0;
}

/* Tabellen für Antworten */
.answer-table, #result-table, .result-table-for-question {
    width: 100%;
    border-collapse: collapse;
    margin: 25px 0;
}

.answer-table-column1 {
    width: 100%;
}


.answer-table-column2 {
    width: 0;
}

.answer-table-column3 {
    width: 0;
}



.result-table-column1 {
    width: 100px;
}

.result-table-column5 {
    width: 0;
}
.answer-table th, .answer-table td, #result-table th, #result-table td, .result-table-for-question th, .result-table-for-question td{
    border: 1px solid #CED4DA; 
    padding: 10px;
    text-align: left;
}

.answer-table th, #result-table th, .result-table-for-question th {
    background-color: #eff1f3; /* Sehr helles Orange für den Tabellenkopf */
    color: #505050;
}


/* CSS */
.answer-table .checkbox-cell {
    text-align: center; /* Horizontale Zentrierung */
    vertical-align: middle; /* Vertikale Zentrierung */
}

.correct-answer-checkbox {
    width: 20px;
    height: 20px;
}

.delete-button-inactive
{
    display: none;
}

/* Tab-Inhalt */
.tab-content {
    display: none;
}

.active-tab {
    display: block;
}

/* Responsive Design */
@media screen and (max-width: 600px) {
    #main-container {
        width: 95%;
        margin: 10px;
    }

    .tab, .tab.active {
        padding: 10px 15px;
    }
}


/* correct and answer explanation triggers */
.show_correct_answer_element, .show_answer_explanation_element {
    display: none;
}

.correct_answer_shown .show_correct_answer_element {
    display: block;
}

.answer_explanation_shown .show_answer_explanation_element {
    display: block;
}
.checkbox-label {
    margin-bottom: 5px; /* Weniger Abstand für Labels mit Checkboxen */
}
  
.image-preview {
    max-width: 100%; /* Maximale Breite */
    max-height: 150px; /* Maximale Höhe */
    /* Weitere Stilisierungen nach Bedarf */
}

#previewIframe {
    width: 60%;
    height: 940px;
}


/* Stil für die Dropdown-Menüs */
select.result-dropdown {
    padding: 10px; /* Komfortabler Innenabstand */
    margin: 8px 0 20px 0; /* Abstand nach außen */
    display: inline-block; /* Ermöglicht das korrekte Fließen im Layout */
    border: 1px solid #CED4DA; /* Farblich abgestimmte Grenze */
    border-radius: 8px; /* Abgerundete Ecken */
    box-sizing: border-box; /* Grenzbox-Modell zur Vermeidung von Layout-Problemen */
    font-size: 16px; /* Erhöhte Schriftgröße für bessere Lesbarkeit */
    background-color: #FFFFFF; /* Weißer Hintergrund */
    color: #333; /* Dunkelgraue Schriftfarbe */
    cursor: pointer; /* Cursor als Zeiger, um Interaktivität anzuzeigen */
}

/* Stiländerung beim Hover über Dropdown-Menüs */
select.result-dropdown:hover {
    border-color: #FF8C00; /* Auffällige Grenzfarbe beim Hover */
    background-color: #FFFAF0; /* Sehr helles Orange als Hintergrund beim Hover */
}

/* Stil für Optionen innerhalb der Dropdowns */
select.result-dropdown option {
    padding: 8px; /* Komfortabler Innenabstand */
    background-color: #FFFFFF; /* Weißer Hintergrund für Optionen */
    color: #333; /* Dunkelgraue Schriftfarbe */
}


/* mode hide and show elements */
/*truefalse*/
.truefalse-quiztype-element
{
    display: none;
}

.true-false-mode .truefalse-quiztype-element
{
    display: block;
}

.true-false-mode th.truefalse-quiztype-element,
.true-false-mode td.truefalse-quiztype-element
{
    display: table-cell;
}

/* points */
.points-quiztype-element
{
    display: none;
}

.points-mode .points-quiztype-element
{
    display: block;
}

.points-mode th.points-quiztype-element,
.points-mode td.points-quiztype-element
{
    display: table-cell;
}


/* result link */
.result-link-quiztype-element
{
    display: none;
}

.result-link-mode .result-link-quiztype-element
{
    display: block;
}

.result-link-mode th.result-link-quiztype-element,
.result-link-mode td.result-link-quiztype-element
{
    display: table-cell;
}


/* abort */
.abort-quiztype-element
{
    display: none;
}

.abort-mode .abort-quiztype-element
{
    display: block;
}

.abort-mode th.abort-quiztype-element,
.abort-mode td.abort-quiztype-element
{
    display: table-cell;
}

/* quiz loading */
#load-quiz-container {
    margin-top: 20px;
}

#quiz-import-text {
    width: 100%;
    padding: 10px;
    margin-bottom: 10px;
    border-radius: 8px;
    border: 1px solid #CED4DA;
    font-size: 14px;
    resize: vertical; /* Ermöglicht vertikale Größenänderung */
}