.fas {
    color: #2e2e2e;
    padding:5px;
    font-size:130%;
}

.fa-trash {
    color:red;
}

.frenz-multilevel-wrap .button {
  background-color: white; /* Cambia questo colore con il colore che preferisci */
  border-color: green; /* Cambia anche questo colore per abbinarlo */
  color: #2e2e2e; /* Colore del testo, cambialo se necessario */
}

.frenz-multilevel-wrap .button:hover {
  background-color: #f2f2f2; /* Cambia questo colore con il colore che preferisci */
  border-color: green; /* Cambia anche questo colore per abbinarlo */
  color: #2e2e2e; /* Colore del testo, cambialo se necessario */
}

.frenz-multilevel-wrap .button:focus {
  background-color: #f2f2f2; /* Cambia questo colore con il colore che preferisci */
  border-color: green; /* Cambia anche questo colore per abbinarlo */
  color: #2e2e2e; /* Colore del testo, cambialo se necessario */
  box-shadow:none;
}

.frenz-multilevel-wrap .button.delete-template {
  background-color: red; /* Cambia questo colore con il colore che preferisci */
  border-color: red; /* Cambia anche questo colore per abbinarlo */
  color: #FFFFFF; /* Colore del testo, cambialo se necessario */
}

.frenz-multilevel-wrap .button-primary {
  background-color: green; /* Cambia questo colore con il colore che preferisci */
  border-color: green; /* Cambia anche questo colore per abbinarlo */
  color: #FFFFFF; /* Colore del testo, cambialo se necessario */
}

.frenz-multilevel-wrap .button-primary:hover {
  background-color: #005706; /* Cambia questo colore con il colore che preferisci */
  border-color: green; /* Cambia anche questo colore per abbinarlo */
  color: #FFFFFF; /* Colore del testo, cambialo se necessario */
}

input:checked + .slider {
    background-color: green !important;
}

    .frenz-multilevel-wrap {
        width:90%;
        margin: 20px auto;
        background: #fff;
        padding: 20px;
        box-shadow: 0 0 10px rgba(0,0,0,0.1);
        border-radius: 10px;
        font-family: 'Poppins', sans-serif !important;
    }
    
    .frenz-multilevel-wrap h1 {
        color: #23282d;
        border-bottom: 1px solid #eee;
        padding-bottom: 10px;
    }
    
        .frenz-multilevel-wrap h1::before {
        content: '\f6ff';
        font: var(--fa-font-solid);
        font-family: 'Font Awesome 6 Free'!important; 
        margin:10px 20px 10px 10px;
        color:green;
    }

    .frenz-multilevel-form-table {
        width: 100%;
        border-collapse: collapse;
    }
    .frenz-multilevel-form-table th {
        text-align: left;
        font-weight: normal;
        width: 200px;
        padding: 15px 10px 15px 0;
        vertical-align: top;
    }
    .frenz-multilevel-form-table td {
        padding: 15px 10px;
    }
    .frenz-multilevel-form-table input[type="text"],
    .frenz-multilevel-form-table input[type="number"],
    .frenz-multilevel-form-table select {
        width: 100%;
        max-width: 250px;
        padding: 5px;
    }
    .frenz-multilevel-description {
        font-style: italic;
        color: #666;
        margin-top: 5px;
    }
    .frenz-multilevel-section-title {
        background: #f1f1f1;
        padding: 10px;
        margin-top: 20px;
        font-size: 16px;
        color: #23282d;
    }
    .frenz-multilevel-bonus-container {
        background: #f9f9f9;
        padding: 15px;
        margin-bottom: 15px;
        border: 1px solid #e5e5e5;
    }
    .frenz-multilevel-bonus-container h4 {
        margin-top: 0;
    }
    .frenz-multilevel-submit {
        text-align: right;
        padding-top: 20px;
        border-top: 1px solid #eee;
    }
    

/* Stili per il popup di aggiunta */


.add-popup {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: white;
    padding: 30px;
    width: 800px;
    max-height: 80vh;
    overflow-y: auto;
    box-shadow: 0 0 500px rgba(0, 0, 0, 1);
    border-radius: 10px;
}
.add-popup.visible {
    display: block;
}
.add-popup form {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}
.add-popup form .column {
    width: 48%;
}
.add-popup form label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
}
.add-popup form input,
.add-popup form select {
    width: 100%;
    padding: 8px;
    margin-bottom: 15px;
    border: 1px solid #ccc;
    border-radius: 5px;
}
.add-popup form h3 {
    width: 100%;
    font-size: 18px;
    margin-top: 20px;
    border-bottom: 1px solid #ddd;
    padding-bottom: 5px;
}
.add-popup .button-group {
    width: 100%;
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
}
.add-popup .button-group button {
    padding: 10px 20px;
    font-size: 16px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}
.add-popup .button-group button[type="submit"] {
    background-color: #4CAF50;
    color: white;
}
.add-popup .button-group button[type="button"] {
    background-color: #f44336;
    color: white;
}

/* Stili per il popup di modifica */
.edit-popup {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: white;
    padding: 30px;
    width: 800px; /* Stessa larghezza del popup di aggiunta */
    max-height: 80vh;
    overflow-y: auto;
    box-shadow: 0 0 500px rgba(0, 0, 0, 1);
    border-radius: 10px;
}
.edit-popup.visible {
    display: block;
}
.edit-popup form {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}
.edit-popup form .column {
    width: 48%;
}
.edit-popup form label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
}
.edit-popup form input,
.edit-popup form select {
    width: 100%;
    padding: 8px;
    margin-bottom: 15px;
    border: 1px solid #ccc;
    border-radius: 5px;
}
.edit-popup form h3 {
    width: 100%;
    font-size: 18px;
    margin-top: 20px;
    border-bottom: 1px solid #ddd;
    padding-bottom: 5px;
}
.edit-popup .button-group {
    width: 100%;
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
}
.edit-popup .button-group button {
    padding: 10px 20px;
    font-size: 16px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}
.edit-popup .button-group button[type="submit"] {
    background-color: #4CAF50;
    color: white;
}
.edit-popup .button-group button[type="button"] {
    background-color: #f44336;
    color: white;
}

.status-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
}
    .status-dot.active { background-color: #4CAF50; }
    .status-dot.pending { background-color: #FFC107; }
    .status-dot.offline { background-color: #F44336; }

.image-preview-wrapper {
    background: #f7f7f7;
    padding: 15px;
    border-radius: 4px;
    margin-bottom: 10px;
    width:fit-content;
}

/* Container per mantenere le proporzioni delle anteprime */
.image-container {
    position: relative;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

/* Dimensioni delle anteprime (ridotte mantenendo le proporzioni) */
.logo-wrapper .image-container {
    width: 240px;  /* Metà della dimensione reale */
    height: 120px;
}

.cover-wrapper .image-container {
    width: 410px;  /* Metà della dimensione reale */
    height: 156px;
}

/* Stile comune per entrambe le immagini */
.image-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.image-dimensions {
    font-size: 11px;
    color: #666;
    margin-top: 5px;
    text-align: center;
    font-style: italic;
}

.button {
    margin-right: 10px !important;
    margin-top: 10px;
}

/* Stile per i pulsanti */
.upload-logo-button,
.upload-cover-button,
.remove-logo-button,
.remove-cover-button {
    min-width: 120px;
    text-align: center;
}

/* Responsive design per le anteprime */
@media screen and (max-width: 782px) {
    .logo-wrapper .image-container {
        width: 200px;
        height: 100px;
    }
    
    .cover-wrapper .image-container {
        width: 300px;
        height: 114px;
    }
}

@media screen and (max-width: 480px) {
    .cover-wrapper .image-container {
        width: 250px;
        height: 95px;
    }
}


.tabs-navigation {
    border-bottom: 1px solid #ddd;
    margin-bottom: 20px;
}

.tab-button {
    background: none;
    border: 1px solid transparent;
    padding: 10px 20px;
    cursor: pointer;
    margin-bottom: -1px;
    position: relative;
}

.tab-button.active {
    background: white;
    border: 1px solid #ddd;
    border-bottom-color: white;
}

.tab-pane {
    display: none;
}

.tab-pane.active {
    display: block;
}