/* Container */
.df-tab-container {
    width: 100%;
    margin: auto;
    border-radius: 12px;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
}

/* Tab buttons */
.df-tab-buttons {
    display: flex;
    border-bottom: 2px solid #ddd;
}

    .df-tab-buttons label {
        flex: 1;
        text-align: center;
        color: #323b89;
        padding: 12px 0;
        cursor: pointer;
        background: #eee;
        font-weight: bold;
        transition: 0.3s;
        border-top-left-radius: 12px;
        border-top-right-radius: 12px;
    }

        .df-tab-buttons label:hover {
            background: #ddd;
        }

/* Hide radio buttons */
input[type="radio"] {
    display: none;
}

/* Tab content */
.df-tab-content {
    display: none;
    padding: 20px;
}

/* Active state */
#df-tab1:checked ~ .df-tabs #df-content1,
#df-tab2:checked ~ .df-tabs #df-content2,
#df-tab3:checked ~ .df-tabs #df-content3,
#df-tab4:checked ~ .df-tabs #df-content4,
#df-tab5:checked ~ .df-tabs #df-content5 {
    display: block;
}

#df-tab1:checked ~ .df-tab-buttons label[for="df-tab1"],
#df-tab2:checked ~ .df-tab-buttons label[for="df-tab2"],
#df-tab3:checked ~ .df-tab-buttons label[for="df-tab3"],
#df-tab4:checked ~ .df-tab-buttons label[for="df-tab4"],
#df-tab5:checked ~ .df-tab-buttons label[for="df-tab5"] {
    background: #5daf78;
    border-bottom: 2px solid #5daf78;
}


.panel-theme-container {
    display: flex;
    flex-wrap: wrap; /* allow wrapping to next row */
    gap: 20px; /* space between items */
}

.panel-theme-item {
    flex: 1 1 calc(50% - 20px); /* two per row (minus gap) */
    padding: 20px;
    box-sizing: border-box;
}

@media (max-width: 600px) {
    .flex-item {
        flex: 1 1 100%;
    }
}