body {
    background-color: #F7F7F7;
    color: #333333;
    font-family: 'Arial', sans-serif;
}

h1, h2, h3, h4 {
    color: #2C3E50;
}

a, .btn-link {
    color: #3498DB;
}

.btn-primary {
    background-color: #3498DB;
    border-color: #3498DB;
}

/* Stili aggiuntivi per personalizzare ulteriormente la tua pagina */
.list-container {
    max-height: 200px; /* Imposta l'altezza massima desiderata */
    overflow-y: auto; /* Aggiunge la scrollbar verticale se il contenuto supera l'altezza massima */
    background-color: #f8f9fa; /* Colore di sfondo chiaro per il container */
    border: 1px solid #dee2e6; /* Bordo sottile per il container */
    border-radius: 5px; /* Bordi arrotondati per il container */
    padding: 15px; /* Spaziatura interna per il container */
    margin-bottom: 20px; /* Spazio sotto il container */
}

.form-check {
    margin-bottom: 10px; /* Spazio tra i checkbox */
}

.form-check-label {
    margin-left: 5px; /* Spazio tra il checkbox e la sua etichetta */
    font-weight: 500; /* Rende il testo dell'etichetta leggermente più grassetto */
}

.form-check-input {
    accent-color: #007bff; /* Colore del checkbox (funziona in alcuni browser come Chrome) */
}
.status-indicator {
    display: inline-block;
    width: 20px;
    height: 20px;
    border-radius: 50%;  /* Rende l'indicatore circolare */
}


.country-name {
    width: 150px; /* Imposta la larghezza desiderata */
    display: inline-block;
}

.status-indicator {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: inline-block;
}

.country-status {
    width: 200px; /* Imposta la larghezza desiderata */
    display: inline-block;
}

.status-container {
    display: flex;
    align-items: center;
    gap: 10px; /* Distanza tra gli elementi */
}


.overlay {
    position: fixed; 
    width: 100%; 
    height: 100%; 
    top: 0; 
    left: 0; 
    right: 0; 
    bottom: 0; 
    background-color: rgba(0,0,0,0.5); 
    z-index: 2; 
    cursor: pointer; 
}

.overlay-content {
    position: absolute; 
    top: 25%; 
    left: 25%; 
    width: 50%; 
    padding: 20px; 
    background-color: white; 
    border-radius: 10px; 
    cursor: default; 
}

.navbar {
    background-color: #004085; /* Cambia questo colore per abbinarlo al tema del tuo sito */
}

.navbar-light .navbar-brand,
.navbar-light .nav-link {
    color: #ffffff; /* Questo cambia il colore del testo */
}

.navbar-light .navbar-brand:hover,
.navbar-light .nav-link:hover {
    color: #cccccc; /* Colore del testo al passaggio del mouse */
}

.navbar-light .dropdown-menu {
    background-color: #004085; /* Background del menu a discesa */
}

.navbar-light .dropdown-item {
    color: #ffffff; /* Colore del testo degli elementi del menu a discesa */
}

.navbar-light .dropdown-item:hover {
    background-color: #0056b3; /* Background al passaggio del mouse */
}


.country-name { font-weight: 600; }
.status-indicator { width: 14px; height: 14px; border-radius: 50%; display: inline-block; }
.country-status { text-transform: lowercase; color: #555; }
.device-temperature { color: #555; white-space: nowrap; }

.actions{
  display: flex;
  gap: 10px;
  justify-content: flex-start;
  flex-wrap: nowrap;
}
.actions form{ margin: 0; }
.status-container {
    display: grid;
    grid-template-columns: 
        180px   /* country name */
        32px    /* status dot */
        60px    /* idle */
        220px   /* temperature */
        260px;  /* actions */
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid #f0f0f0;
}
.actions { display: flex; gap: 10px; justify-content: flex-start; }
.actions form { margin: 0; }
button:disabled { opacity: 0.45; cursor: not-allowed !important; }