@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Black+Ops+One&family=Libre+Baskerville&display=swap');
@import url('https://fonts.googleapis.com/css2?family=K2D:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800&display=swap');



html, body {
  margin: 0;
  padding: 0;
  background-color: black;
  font-family: "Bebas Neue", sans-serif;
  background-color: rgba(0,0,17,255);
}

#visualization-container {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  height:100%;
  align-items: flex-start; /* Align items to the top of the container */
  justify-content: space-between; /* Put maximum space between items */

}

#globeViz {
  width: 100%; 
  height: 90%; 
  margin-left: auto; /* Push the globe to the right */
  transform: translateX(18%) translateY(-5%); 
}



#slider-container {
  max-width: 30%;
  display:flex;
  flex-direction: column;
  position: absolute;
  left:53%;
  bottom: 10%;
  text-align: center;
}

#dateSlider {
  width: 100%; /* Adjust as needed */
  margin-bottom: 10px;
  -webkit-appearance: none; /* Override default appearance */
  appearance: none;
  background: transparent; /* Remove default background */
}

/* Slider Track */
#dateSlider::-webkit-slider-runnable-track {
  width: 100%;
  height: 5px;
  background: #b2abab; /* Dark track */
  border-radius: 4px;
}

#dateSlider::-moz-range-track {
  /* width: 100%; */
  height: 12px; /* Increase track height */
  background: #333; /* Dark track */
  border-radius: 4px;
  width: auto; /* You may need to set a specific width or leave it auto */
  max-width: 400px; /* Example max width, adjust as needed */

}

/* Slider Thumb */
#dateSlider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 10px; /* Size of the thumb */
  height: 25px;
  background: #ad5c00; /* Red thumb */
  cursor: pointer; /* Cursor on hover */
  border-radius: 20%; /* Round shape */
  margin-top:-8px;

}


/* Progress Track (for WebKit/Blink browsers only) */
#dateSlider::-webkit-slider-runnable-track {
  
  background: linear-gradient(to right, #dab84b 0%, #fb8500 100%); /* Dark red progress track */
}


#dateDisplay {
  font-size: 4vw; /* Increase font size */
  color: #fb8500;
  /* bottom：10px; */
}

#unshownData-container {
  font-size: 12px;
  display: block; /* Changed from flex to block for a simple layout */
  flex-direction: column;
  position: fixed; /* Position it relative to the viewport */
  top: 20%; /* Adjust top position to give some space from the top of the viewport */
  left: 5%; /* Position it from the left side of the viewport */
  transform: translateY(-10%); /* Adjust vertical positioning */
  width: 30%; /* Set the width to take up a portion of the screen size */
  max-height: 90%; /* Control the maximum height */
  /* overflow-y: auto;  */
  background-color: #14143C; /* Dark background color */
  color: #f2f2f2; /* Light text color */
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5); /* Shadow for a pop-up effect */
  z-index: 100; /* Ensure it's above other elements */
  font-family: 'Poppins', sans-serif; /* Use Poppins for the font to match the rest of the style */
  /* overflow-x: hidden;  */
  background-color: rgba(20, 20, 60, 0); 
  
}


#unshownData-container table {
  font-family: "K2D", sans-serif;
  color: white;
  width: 100%;
  table-layout: fixed; 
  
}



#unshownData-container th, 
#unshownData-container td {
  padding: 1.5px;
  word-wrap: break-word;
  border-width: 2px;
  overflow: hidden;
  white-space: normal; 
  max-width: 0; 

}

#unshownData-container th {
  /* position: sticky;s */
  top: 0;
  z-index: 10;
  text-align: left; 

}


table {

  font-family: "K2D", sans-serif;
  border-collapse: separate; /* Use 'separate' to enable border spacing */
  border-spacing: 2px;
  width: 100%;
}

td, th {
  /* display:none; */
  padding: 10px; /* Reduced padding for less space between rows */
  white-space: nowrap; /* Keep content on the same line */
  overflow: hidden; /* Hide overflow */
  text-overflow: ellipsis; /* Add ellipsis for text that is too long */
  max-width: 150px; /* Set a max width for each column */
}

th {
  /* position: relative; */
  background-color: black; /* Header background color */
}

td {
  background-color: rgba(20, 20, 60, 0.5);
  border-radius:5px;
}
/* Formatting numbers with commas */
td.number {
  font-variant-numeric: tabular-nums;
}

#unshownData-container th.total-deaths,
#unshownData-container td.total-deaths {
  color: #fb8500; /* Set the font color to red */
}

.total-cases,.total-deaths{
  width:25%;
}

#navbar {
  display: flex;
  align-items: center;
  justify-content: center; /* Center the items */
  width: 100%; /* Ensure full width */
  position: fixed; /* Or 'absolute', depending on your requirement */
  top: 5%; /* Position at the top */
  left: 5%; /* Align left */
  z-index: 1000; /* Ensure it stays on top of other content */
  padding: 0 10px; /* Add some padding on both sides */
}


#selectRegionContainer {
  display: flex;
  /* flex-direction: column;  */
  align-items: center; /* Center-align the items horizontally */
/* Space between the dropdown and the button */
  background-color: inherit;
  color: darkred;
  border: none;
  font-family: "Bebas Neue", sans-serif;
  width:100%;
  left:20%;
  font-size: 20px;
  cursor: pointer;
  flex-grow: 1; /* Allow it to grow */
  text-align: center; /* Center the text inside the container */
}


#leftSpacer, #buttonsContainer {
  display: flex;
  justify-content: center;
  flex: 1; /* This makes the spacer and buttons container flexible in taking up equal space */
}

#InfoBtn {
  margin-right:30px;
  background-color: inherit;
  color: rgb(175, 0, 0);
  border: none;
  font-family: "Bebas Neue", sans-serif;
  font-size: 20px;
  cursor: pointer;
}

#InfoBtn:hover {
  color: #fc4d4d;
}

#projectInfo {
  font-family:'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    display: none; /* Initially hidden */
    position: fixed; /* Fixed position relative to the viewport */
    top: 40%; /* Positioned 50% from the top */
    left: 50%; /* Positioned 50% from the left */
    transform: translate(-50%, -50%); /* Shifts the element back by its own half width and height */
    background-color: rgba(255, 255, 255, 0.175); /* Background color */
    color: rgb(180, 180, 180); /* Text color */
    padding: 20px; /* Padding inside the div */
    box-shadow: 0px 0px 10px rgba(0,0,0,0.5); /* Optional: Shadow for a pop-up effect */
    width: 100%; /* Width of the div */
    max-width: 700px; /* Maximum width */
    text-align: left; /* Center the text inside the div */
    z-index: 1000; /* Make sure it's above other elements */
    overflow-wrap: break-word; /* Ensures long words can be broken and wrap onto the next line */
    /* margin-bottom:2px; */
    /* inline-size: 1.5px */
    line-height: 30px; /* 4px +12px + 4px */
    font-size:15px;

}

#projectInfo a {
  color: #b5b4b4; /* Hyperlink text color */
  /* text-decoration: none; */
  /* font-weight: bold;  */
}




#continent {
  background-color: rgb(20,20,60); /* Dark background color */
  border-color:white;
  color: #f2f2f2; /* Light text color */
  padding: 10px 20px; /* Padding around the text */
  margin: 0 10px; /* Margin around the dropdown */
  border-radius: 10px; /* Rounded corners */
  border: 1px solid #555; /* Subtle border */
  outline: none; /* Remove the default focus outline */
  font-family: "Poppins", sans-serif; /* Custom font */
  font-size: 14px; /* Slightly larger font size */
  cursor: pointer; /* Change cursor to pointer */
  transition: background-color 0.3s, color 0.3s; /* Smooth transition for hover effect */
}

#continent:hover {
  background-color: #333; /* Darker background on hover */
  color: #fff; /* White text on hover */
}

#continent:focus {
  border-color: #ffb703; /* Highlight focus with a red border */
}

/* Style the dropdown options */
#continent option {
  background-color: #222; /* Dark background for options */
  color: #f2f2f2; /* Light text color for options */
}

/* This ensures the dropdown's text aligns well with other elements */
#selectRegionContainer {
  display: flex;
  align-items: center;
}


#showTableBtn {
  color: #f2f2f2;
  background-color: rgb(251,133,0,0.5); /* Match dropdown background */
  padding: 10px 20px; /* Consistent padding with dropdown */
border-color: white;
  border-radius: 10px; /* Rounded corners like the dropdown */
  border: 1px solid #555; /* Subtle border like the s sdropdown */
  font-family: "Poppins", sans-serif; /* Consistent font with the dropdown */
  font-size: 14px; /* Consistent font size with the dropdown */
  cursor: pointer; /* Pointer cursor on hover */
  transition: background-color 0.3s, color 0.3s; /* Smooth transition effect */
  display: block; /* Ensure it's a block-level element for proper margin handling */
  text-align: center; /* Center the button text */
}

#showTableBtn:hover {
  background-color: rgb(251,133,0,0.8); /* Darker background on hover */
  color: #fff; /* White text on hover */
}

/* Position the button container right under the dropdown for visual grouping */
#buttonsContainer {
  display: flex;
  font-size:14px;
  flex-direction: column; /* Stack the elements vertically */
  align-items: center; /* Center-align the items */
  margin-top: 20px; /* Space from the dropdown */
}


#discription{
  padding: 15px;
}

#sliderdiscription{
  font-family: "K2D", sans-serif;
  font-weight: 100;
  font-style: normal;
  font-size:14px;
  /* max-width:80%; */
  padding:30px;
  color:white;
}

/* #tooltip{
  background-color: rgba(255, 255, 255, 0.8); 
  border: 1px solid #ccc; 
  padding: 10px; 
  border-radius: 5px; 
  box-shadow: 0px 0px 10px rgba(0,0,0,0.5);
  color:white;
} */

.tooltip-container {
  font-family: "K2D", sans-serif;
  background-color: rgba(0, 0, 0, 0.5);
  width: 200px;
  padding: 10px;
  border-radius: 5px;
  box-shadow: 0px 0px 10px rgba(200, 200, 200, 0.5);
  color: white;  /* Sets text color for all child elements */
  font-size: 14px; /* Default font size for text in the tooltip */
}

.tooltip-date{
font-size:12px;
color:grey;
font-weight: 200;
}

.tooltip-title {
  font-family: "K2D", sans-serif;
  padding-bottom: 50px;
  font-weight: 800;  /* Make title bold */
}

.tooltip-data {
  font-family: "K2D", sans-serif;
  margin-top: 5px; /* Space between data entries */
}

/* Media query for mobile devices */
@media (max-width: 768px) { /* Adjust the max-width as needed for different mobile breakpoints */
  #globeViz {
   
  width: 100%; 
  height: 100%; 
  transform: translateX(-0%) translateY(-10%); 
    /* transform: translateX(-50%) translateY(-5%);  */
  }

  #slider-container{
    max-width: 60%;
    display:flex;
    flex-direction: column;
    position: absolute;
    transform: translateX(-50%) translateY(-0%);
    left: 50%;
    bottom:10%;
    text-align: center;
    font-size:3vw;
  }
  #dateDisplay {
    font-size: 10vw;
    color: #fb8500;
}

#sliderdiscription {
  font-family: "K2D", sans-serif;
  font-weight: 100;
  font-style: normal;
  font-size: 12px;
  /* max-width: 80%; */
  margin-top: 20px;
  padding: 1px;
  color: white;
}
#navbar{
  width:80%;
  left: 55%;
  transform: translateX(-50%);
}
#showTableBtn {
  color: #f2f2f2;
  background-color: rgb(251,133,0,0.5);
  padding: 5px 5px;
  border-color: white;
  border-radius: 5px;
  border: 1px solid #555;
  font-family: "Poppins", sans-serif;
  font-size: 10px;
  cursor: pointer;
  transition: background-color 0.3s, color 0.3s;
  display: block;
  text-align: center;
}

#continent {
  background-color: rgb(20, 20, 60);
  border-color: white;
  color: #f2f2f2;
  padding: 5px 5px;
  margin: 0 10px;
  border-radius: 5px;
  border: 1px solid #555;
  outline: none;
  font-family: "Poppins", sans-serif;
  font-size: 10px;
  cursor: pointer;
  transition: background-color 0.3s, color 0.3s;
}

#unshownData-container {
  font-size: 12px;
  display: block;
  flex-direction: column;
  position: fixed;
  top: 20%;
  left: 5%;
  transform: translateY(-10%);
  width: 80%;
  max-height: 50%;
  overflow-y: auto;
  background-color: #14143C;
  color: #f2f2f2;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
  z-index: 100;
  font-family: 'Poppins', sans-serif;
  /* overflow: hidden; */
  background-color: rgba(20, 20, 60, 0);
}
#discription{
  padding:10px;
}

}