html, body {
         font-family: "Open Sans", sans-serif;
         background-color: #1c313a;
         margin-top: 43px; /* Match the height of #top-header */
     }


.progress-ring2 {
         width: 43px;
         height: 43px;
         border: 6px solid #ddd;
         border-radius: 50%;
         border-top-color: #007bff;
         animation: spin 1s linear infinite;
         display: none; /* Hidden by default */
         margin-left: auto;
         margin-right: auto;
         margin-top:20px;
         margin-bottom:20px;
 }

/* Tooltip styling */
.tooltip {
 position: absolute;
 background-color: rgba(0, 0, 0, 0.8);
 color: #fff;
 padding: 6px 10px;
 border-radius: 5px;
 white-space: nowrap;
 font-size: 14px;
 pointer-events: none;
 opacity: 0;
 transition: opacity 0.3s;
 z-index: 1000;
}


 /* Modal Background */
.modal {
display: none; /* Hidden by default */
position: fixed;
z-index: 1000; /* Ensure it's above other content */
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgba(0, 0, 0, 0.5); /* Black with opacity */
}

/* Modal Content */
.modal-content {
background-color: #fff;
margin: 15% auto; /* 15% from top, centered */
padding: 20px;
border: 1px solid #888;
width: 80%; /* Width of the modal */
border-radius: 5px;
text-align: center;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

/* Close Button */
.close-button {
color: #aaa;
float: right;
font-size: 28px;
font-weight: bold;
cursor: pointer;
}

.close-button:hover,
.close-button:focus {
color: black;
text-decoration: none;
}

.playing-station-wrap{
         width:400px;
         margin:auto;
}


.player-container {
         display: flex;
         flex-direction: row;
         justify-content: space-between;
         align-items: center;
         width: 100%;
         padding: 10px;
         background-color: #142229;
         color: white;
}



#countryList li ul{
       background-color:#142229;
       padding:10px;
       border-radius: 5px;
       display: flex; /* Use flexbox to align items */
       align-items: center; /* Center items vertically */
       justify-content: center; /* Center items horizontally */
       list-style-type: none;
       padding: 0;
       display: grid; /* Use grid layout */
       grid-template-columns: repeat(100px, minmax(100px, 1fr)); /* Responsive columns */
       gap: 10px; /* Space between items */

   }
     /* First column: Station Image */
 .station-image {
         width: 140px;
         height: 140px;
         background-color:#fff;
         border-radius: 5px;
          object-fit: cover;  /* Ensure the image covers the circle */
     }


 #countryList li{
         margin:0px;
         height:60px;
    }


   .wrapper {
         display: flex;
         flex-direction: column;
         min-height: 100vh;
     }
   .content {
        flex: 1; /* This allows the content to take up all the remaining space */
   }

     .footer-links a {
         color: white;
         text-decoration: none;
         margin-right: 10px;
     }


      #web_title h4{
          margin-botom:0px;
          margin-top:8px;
          margin-right:20px;
          width:90px;
      }

      .player-header h5{
          margin-top:7px;
      }

      #sidebaer_topBar{
          width:100%;
          height:9px;
      }

     .player-header img {
         height: 40px;
         align-items: center;
         width:100%;
     }

     /* Main container */
     .main-container {
         display: flex;
         flex: 1;
         width:1030px;
         flex-direction: row;
         background-color: #212529;
         height: auto; /* Adjust height minus header (80px) and bottom-row (80px) */
         overflow-y: auto;
         padding:20px;
         gap: 20px; /* Space between columns */
     }

     /* Sidebar (Country list) */
     .country-list {
         width: 300px;
         height:100%;
         overflow-y: auto;
         padding: 10px;
         display: block; /* Default visible on desktop/tablet */
         top: 85px; /* Adjust to appear below the header */
         justify-content: center;  /* Center horizontally */
         align-items: center;      /* Center vertically */
     }



          /* Center the pagination controls */
     #paginationControls {
         display: flex;
         color:white;
         justify-content: center; /* Centers the controls horizontally */
         align-items: center; /* Aligns items vertically in the center */
         margin-top: 10px; /* Optional, to add some spacing */
     }

     #paginationControls span {
         margin: 0 5px;
         cursor: pointer;
     }

    .img {
         width: 100%; /* Set width */
         height: 50px; /* Set height */
         object-fit: cover; /* Ensure the image covers the circle */
         background-color:#142229;
     }

     ul {
         list-style-type: none;
         padding: 0;
         display: grid; /* Use grid layout */
         grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); /* Responsive columns */
         gap: 10px; /* Space between items */
     }
     li {
         padding: 10px;
         border: 1px solid #ccc;
         margin: 5px 0;
         border-radius: 5px;
         display: flex; /* Use flexbox to align items */
         align-items: center; /* Center items vertically */
         justify-content: center; /* Center items horizontally */
     }

   /* Middle column: Radio station list */
     .station-list {
         flex: 1;
         width:100%;
         padding: 0px 10px 10px 10px;
     }

     .station-list h2 {
         margin: 10px 5;
         align-items: center;
         width: 100%;
         text-align: center;
     }

     .station-grid {
         display: grid;
         grid-template-columns: repeat(auto-fill, minmax(135px, 1fr));
         gap: 7px;
     }



   .country-grid {
         display: grid;
         grid-template-columns: repeat(auto-fill, minmax(60px, 1fr));
         gap: 4px;
         overflow:auto;
     }

     .station-item {
         text-align: center;
         cursor: pointer;
          height: 170px;
         color: #ccc;
         font-size:14px;
         transition: background-color 0.2s;
         padding: 0px 0px 0px 0px;
         background-color: #142229;
         border-radius: 5px 5px 0px 0px;
     }

     .station-item:hover {
         color:#fff;
     }

    /*.station-item img {
         width: 100%;
         height: 140px;
         transition: all 0.3s ease-in-out;
         border-radius: 5px 5px 0px 0px;
         object-fit: scale-down;
          background-image: url('${station.logo}');
     }*/

   .toFactory{
         width:auto;
          display: flex;
          justify-content: start;
          align-items: start;
      }

  .volume-slider {
             margin: 10px 0;
             width: 30%;
   }


     /* Hide sidebar in mobile view */
     @media screen and (max-width: 768px) {
         .country-list {
             width:180px;
             transform: translateX(-100%); /* Hide off-screen */
             left: 0;
             top: 0;
             flex: 1; /* Make both columns equal in width */
             height: 100%;
              position: fixed;
             top: 85px; /* Adjust to appear below the header */
             left: 0;
             z-index: 1000; /* Ensure it stays on top */
             transition: transform 0.3s ease; /* For slide effect */
         }

         .country-list.active {
             transform: translateX(0); /* Slide in */
         }


           /* Middle column: Radio station list */
     .station-list {
         flex: 1;
         padding: 0px 30px 30px 30px;
         height: calc(100vh - 160px); /* Adjust height minus header (80px) and bottom-row (80px) */
         overflow-y: auto;
         }
     }

     .country-list h2 {
         margin: 10px 0;
         color:#f4f4f4;
     }

     .country-list ul {
         list-style-type: none;
         padding: 0;
         color:#f4f4f4;
     }

     .country-list li {
         padding: 8px;
         cursor: pointer;
         color:#f4f4f4;
         transition: background-color 0.2s;
     }

     .country-list li:hover {
         background-color: #999;
     }



     #Logo{
          width: 40px;
         height: 40px;
         border-radius: 100px;
         margin-right: 20px; /* Margin for spacing */
         object-fit: cover; /* Ensure the image covers the circle */
     }

      .countryTitle{
          color: white;
          text-align: center;
          font-weight:700;
          font-size:2.0rem;
      }

      #countryTitle{
          color: #f4f4f4;
          margin-bottom:12px;
          font-size:1.0rem;
      }

     #downloadTitle{
         color: #f4f4f4;
          margin-bottom:12px;
          font-size:1.0rem;
     }

     /* Second column: Play button and progress ring */
     .play-control {
         position: relative;
         display: flex;
         justify-content: center;
         align-items: center;
         margin-top:10px;
     }

     .play-button {
         width: 70px;
         height: 70px;
         border: none;
         border-radius: 50%;
         background-color: #007bff;
         color: white;
         font-size: 24px;
         cursor: pointer;
         z-index: 1;
     }

     .progress-ring {
         position: absolute;
         width: 73px;
         height: 73px;
         border: 6px solid #ddd;
         border-radius: 50%;
         border-top-color: #007bff;
         animation: spin 1s linear infinite;
         display: none; /* Hidden by default */
         margin-left: auto;
         margin-right: auto;

     }

     @keyframes spin {
         to { transform: rotate(360deg); }
     }


     .volume-control {
             margin: 8px 0;
             width: 100%;
      }


     /* Responsive styles */
     @media screen and (max-width: 768px) {
.container{
     width:100%
 }

      .countryTitle {
          color: white;
          margin-bottom:20px;
          margin-top: 20px;
          text-align: center;
          font-weight:700;
          font-size:1.3rem;
      }


         .play-button {
             width: 70px;
             height: 70px;
             font-size: 18px; /* Reduce button size */
         }

         .progress-ring {
             width: 73px;
             height: 73px;
             margin-left: auto;
             margin-right: auto;
         }

           .volume-control {
             margin: 8px 0;
             width: 30%;
         }
            /* Middle column: Radio station list */
         .station-list {
             flex: 1;
             padding: 0px 30px 30px 30px;
             height: calc(100vh - 160px); /* Adjust height minus header (80px) and bottom-row (80px) */
             overflow-y: auto;
         }
     }

     /* Drawable menu icon */
     .menu-icon {
         display: none; /* Default hidden */
         cursor: pointer;
     }

     @media screen and (min-width: 600) and (max-width: 768px) {

     .container{
               width:100%
     }


    .footer-div-wraaper {
             flex-direction: column;
             align-items: center;
         }
         .player-container {
             flex-direction: column;
         }
         .station-image, .play-button{
             margin: 10px 0;
         }


         .countryTitle {
          color: white;
          margin-bottom:20px;
          margin-top: 20px;
          text-align: center;
          font-weight:700;
          font-size:1.3rem;
      }
        /* .menu-icon {
             display: block; /* Show only on mobile */
             /*position: fixed;*/
             /*background-color:#f4f4f4;*/
             /*width:18px;*/
             /*height:18px;*/
             /*flex: 1; /* Make both columns equal in width */
             /*z-index: 1001;*/ /* Ensure it stays on top */
             /*color: #333;*/
             /*border: none;*/
             /*padding:5px 5px 8px 5px;*/
             /*border-radius: 5px;*/


      #searchInput{
           background-color:#c4c4c4;
          border-color: #c4c4c4;
          border-radius:50px;
          color:#333;
          margin-left:18px;
          margin-right: 12px;
          padding-left:12px;
          width:100%;
      }

      #web_title h4{
          margin-botom:0px;
          margin-top:8px;
          margin-right:20px;
      }
        /* }*/
      #Logo{
         width: 40px;
         height: 40px;
         border-radius: 100px;
         margin-left: 0px;
         margin-right: 20px; /* Margin for spacing */
         object-fit: cover; /* Ensure the image covers the circle */
     }

     #sidebaer_topBar{
         width:100%;
         height:9px;
     }

            /* Middle column: Radio station list */
     .station-list {
         flex: 1;
         padding: 0px 30px 30px 30px;
         height: calc(100vh - 160px); /* Adjust height minus header (80px) and bottom-row (80px) */
         overflow-y: auto;
     }
     .station-item {
         text-align: center;
         cursor: pointer;
          height: 170px;
         color: #ccc;
         font-size:14px;
         transition: background-color 0.2s;
         padding: 0px 0px 0px 0px;
         background-color: #142229;
         border-radius: 5px 5px 0px 0px;
     }
  }


 @media only screen and (min-width: 435) and (max-width: 600px){
    .container{
            width:100%
     }

     .player-container {
         flex-direction: column;
     }

     .station-image, .play-button{
         margin: 10px 0;
     }

     .volume-control {
         margin: 8px 0;
         width: 25%;
     }

     #playing-station-name{
         display: none;
     }
      #web_title{
          display: none;
      }
       #font-awesome-icon{
          display: none;
      }

      html, body {
         margin: 0;
         padding: 0;
         font-family: "Open Sans", sans-serif;
         background-color: #1c313a;
         overflow-x: hidden; /* Prevent horizontal scrolling */
         display: flex;
         justify-content: center; /* Center horizontally */
         align-items: center;     /* Center vertically if needed */
         flex-direction: column;
         margin-top: 33px; /* Match the height of #top-header */
     }

      .toFactory{

      }

      .countryTitle {
          color: white;
          margin-bottom:20px;
          margin-top: 20px;
          text-align: center;
          font-weight:700;
          font-size:1.0rem;
      }

      .playing-station-wrap{
         width:300px;
         margin:auto;
     }

     .p-m-player-v{
         width:119px;
         margin:auto;
     }
     .station-item {
         text-align: center;
         cursor: pointer;
          height: 170px;
         color: #ccc;
         font-size:14px;
         transition: background-color 0.2s;
         padding: 0px 0px 0px 0px;
         background-color: #142229;
         border-radius: 5px 5px 0px 0px;
     }
      #searchInput{
          margin-right:12px;

      }
  }



 @media only screen and (min-width: 375) and (max-width: 435){

     .container{
     width:100%
 }
     .player-container {
         flex-direction: column;
     }

     .station-image, .play-button{
         margin: 2px 0;
     }

     .volume-control {
         margin: 8px 0;
         width: 20%;
     }

     #playing-station-name{
         display: none;
     }
      #web_title{
          display: none;
      }
       #font-awesome-icon{
          display: none;
      }

    html, body {
         margin: 0;
         padding: 0;
         font-family: "Open Sans", sans-serif;
         background-color: #1c313a;
         overflow-x: hidden; /* Prevent horizontal scrolling */
         display: flex;
         justify-content: center; /* Center horizontally */
         align-items: center;     /* Center vertically if needed */
         flex-direction: column;
         margin-top: 33px; /* Match the height of #top-header */
     }

      .toFactory{

      }

       .countryTitle {
          color: white;
          margin-bottom:20px;
          margin-top: 20px;
          text-align: center;
          font-weight:700;
          font-size:1.0rem;
      }

     .playing-station-wrap{
         width:300px;
         margin:auto;
     }

     .p-m-player-v{
         width:119px;
         margin:auto;
     }
      .station-item {
         text-align: center;
         cursor: pointer;
          height: 170px;
         color: #ccc;
         font-size:14px;
         transition: background-color 0.2s;
         padding: 0px 0px 0px 0px;
         background-color: #142229;
         border-radius: 5px 5px 0px 0px;
     }
       #searchInput{
          margin-right:12px;

      }


  }