body {
            font-family: Arial, sans-serif;

            margin: 0;
        }
        .dashboard {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-around;
        }
        .category-card {
            background-color: #fff;
            border: 1px solid #ddd;
            border-radius: 8px;
            margin: 10px;
            padding: 20px;
            width: 300px;
            text-align: center;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
        }
        .status-card .count {
            font-size: 2em;
            font-weight: bold;
        }
        .online { background-color: #4CAF50; color: white; }
        .delay { background-color: #FFC107; color: white; }
        .offline { background-color: #F44336; color: white; }
        .names-list {
            
            list-style-type: none;
            padding-left: 0;
            margin-top: 10px;
            max-height: 300px; /* Set a max height for scrolling */
            overflow-y: auto; /* Enable vertical scrolling */
        }
        .names-list li {
            padding: 5px;
        }
        .show-names-btn {
            margin-top: 10px;
            padding: 8px 15px;
            background-color: #4CAF50;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
        }
        .show-names-btn:hover {
            background-color: #45a049;
        }
        .popup {
            display: none;
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background-color: #fff;
            border: 1px solid #ddd;
            border-radius: 8px;
            padding: 20px;
            width: 80%;
            max-width: 600px;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
            z-index: 1000;
        }
        .popup-overlay {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: rgba(0, 0, 0, 0.5);
            z-index: 999;
        }
        .popup h3 {
            margin-top: 0;
        }
        .close-btn {
            color: #aaa;
            float: right;
            font-size: 28px;
            font-weight: bold;
            cursor: pointer;
        }
        .close-btn:hover,
        .close-btn:focus {
            color: black;
            text-decoration: none;
        }
        .download-btn {
            margin-top: 10px;
            padding: 8px 15px;
            background-color: #007bff;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
        }
        .download-btn:hover {
            background-color: #0056b3;
        }
		.chart-container {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
        } button {
            background-color: transparent;
            border: none;
            color: black; /* Text color */
            padding: 10px 20px;
            font-size: 16px;
            cursor: pointer;
        }
        .chart-card {
            background-color: #fff;
            border: 1px solid #ddd;
            border-radius: 8px;
            margin: 10px;
            padding: 20px;
            width: 31%;
            text-align: center;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
        }
        .chart-card h3 {
            margin: 10px 0;
        }
        /* Popup styling */
        .modal {
            display: none;
            position: fixed;
            z-index: 1;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            overflow: auto;
            background-color: rgba(0,0,0,0.4);
            padding-top: 60px;
        }
        .modal-content {
            background-color: #fefefe;
            margin: 5% auto;
            padding: 20px;
            border: 1px solid #888;
            width: 80%;
            max-width: 600px;
            border-radius: 8px;
            position: relative;
        }
        .close {
            color: #aaa;
            float: right;
            font-size: 28px;
            font-weight: bold;
            cursor: pointer;
        }
        .close:hover,
        .close:focus {
            color: black;
            text-decoration: none;
        }
        /* Scrollable list styling */
        .client-list {
            list-style-type: none;
            padding: 0;
            max-height: 300px;
            overflow-y: auto;
        }
        .client-list li {
            padding: 8px;
            margin: 5px 0;
            border-bottom: 1px solid #ddd;
        }
        /* Download button styling */
        .download-btn {
            padding: 10px 20px;
            background-color: #4CAF50;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            margin-top: 20px;
        }
        .download-btn:hover {
            background-color: #45a049;
        }



 .text-container {
            position: fixed;
            bottom: 0;
            width: 100%;
            display: flex;
            background-color: #0099ff;
            color: #000000;
            padding: 10px 0;
        }

        /* Fixed text part - takes up 50% width */
        .fixed-text {
            width: 50%;
            text-align: left;
            font-size: 15px;
    padding-left: 65px;

        }

        /* Scrolling text part - takes up 50% width */
        .scrolling-text-container {
            width: 80%;
            overflow: hidden; /* Hide any text outside the container */
        }

        /* Scrolling text itself */
        .scrolling-text {
            display: inline-block;
            white-space: nowrap;
            animation: scroll-text 20s linear infinite;
            font-size: 15px;
        }

        /* Keyframes for scrolling effect */
        @keyframes scroll-text {
            0% {
                transform: translateX(100%);
            }
            100% {
                transform: translateX(-100%);
            }
        }




#map {
    width: 100%;
    height: 100vh; /* Ensure the map takes up the full height of the viewport */
}




* {
  margin:0;
  padding:0;
}
body {

  font-family: 'Raleway', sans-serif;
}
#ribbon {
  position:absolute;
  background-color:red;
  color:white;
  top:40px;
  left:-30px;
  width:160px;
  transform:rotate(-45deg);
  text-align:center;
}
#container {

  }
#container > nav {
  width:100%;
  display:flex;
  max-height:100px;
background-color:#4e66ff;

}
#logo {
  line-height:60px;
  font-size:25px;
  padding: 0 50px;
  color: white;
  width:100%;
  letter-spacing:2px;
  text-shadow:2px 2px 5px;
}
#container > nav > ul {
  margin:-8px;
  paddding:0;
  list-style-type:none;
  display:flex;
  position:absolute;
    right:50px;
/*   min-width:60%; */
}
#container > nav > ul > li {
  line-height:60px;
  margin: 0 0px;
  padding:0;
  text-align:center;
    font-size: small;

  display:inline-block;
  
/*   background-color:green; */
  min-width:120px;

} 
#container > nav > ul > li > a {
  position:relative;
/*   background-color:red; */
  margin: 0 8px;
    color:white;
}
#container > nav > ul > li:hover {
     border-radius: 10px;}
#container > nav > ul > .dropdown:hover {
  border-bottom:none;
}
#container > nav > ul > .dropdown:hover >  .dd
{
  display:block;
}
.dropdown:hover > a .fa-caret-down {
  display:none;
}
a {
  text-decoration:none;

}

#container > nav > ul > li > div {
  position:absolute;
  padding: 0 10px;
  border-radius: 10px;
  background-color:black;
  display:none;
  background-color:aliceblue;
  min-width:100px;
}

#container > nav > ul > li > div > ul {
  margin:0px 0 10px 0;
  padding:0;
  list-style:none;
}
#u_a_c {
  position:relative;
  width:100%;
/*   background-color:red; */
}
#up_arrow {
  position:relative;
  width:20px;
  height:20px;
  left:42%;
  top:-10px;
  background-color:aliceblue;
  transform:rotate(45deg);
}
#container > nav > ul > li> div > ul > li:hover {
  background-color: rgb(17 4 131 / 33%);
border-radius: 10px;
}
#container > nav > ul > li > div > ul > li > a {
  padding : 5px;
    color:black;
}