/* Reset default browser styles */
body,
h1,
h2,
h3,
p,
ul,
li {
    margin: 0;
    padding: 0;
}
h3 {
    margin-bottom:10px;
}

/* Set dark mode color variables */
:root {
    --bg-color: #121A29;
    /* Dark background color */
    --header-color: #0c5bda;
    /* Header background color */
    --main-color: #0c5bda;
    --main-background-color: #043b79;
    /* Icon color */
    --icon-color: #fff;
    /* Icon color */
}

body {
    background-color: var(--bg-color);
    color: #fff;
    font-family: "Segoe UI", Tahoma, Arial, Verdana, sans-serif;
}

header {
    background-color: var(--header-color);
    padding: 10px;
    min-height: 40px;
    display: flex;
    justify-content: space-between; /* Optional: adjust spacing */
    align-items: center; /* Align items vertically */
    width: 100%; /* Ensure the container spans the full width */
}

.header-left {
    width: 20%;
    display: flex; /* Enables Flexbox for alignment */
    align-items: center; /* Center content vertically */
    justify-content: flex-start; /* Align content to the left */
    padding: 10px; /* Optional: Add padding for spacing */
}
.header-right {
    width: 80%;
    padding-right: 20px; /* Optional: Add padding for spacing */
}

/* Footer styles */
footer {
    background-color: var(--header-color);
    height: 120px;
    position: fixed;
    bottom: 0;
    width: 100%;
    text-align: center;
    padding-top: 5px;
}

footer p {
    color: #fff;
    font-size: 14px;
}

footer a {
    color: #fff;
}


nav {
    display: flex;
    justify-content: right;
}

nav ul {
    list-style: none;
    display: flex;
}

nav li {
    margin: 0 10px;
}

.startpage {
    display: flex;
    flex-wrap: wrap; /* Allows items to wrap to the next line */
    justify-content: center; /* Centers items in the container */
    gap: 8px; /* Space between items */
    padding: 0;
    list-style: none;
}

.startpage li {
    margin: 0 -1px;
}

.startpage a {
    text-decoration: none;
    padding: 2px 15px; 
    display: flex; /* Use flexbox for centering */
    justify-content: center; /* Horizontal centering */
    align-items: center; /* Vertical centering */
    /*width: 80px; /* Set width and height */
    /*height:20px;*/

    border: 2px solid #333;
    border-radius: 5px; 
    background-color: var(--main-background-color);
    color: white;

    transition: background-color 0.3s ease;
    cursor: pointer;
}

nav a {
    display: block;
    text-align: center;
}

nav img {
    width: 100%;
    height: 100%;
    cursor: pointer;
    /*filter: invert(100%); /* Invert the icon color for dark mode */
}

/* Add additional styles for the main content */
main {
    padding: 0px 5px;
}

/*for charts*/
canvas {
    background-color: var(--bg-color);
}

/* Add your own styles for the main content and icons */

h1 {
    text-align: center;
    font-size: 25px;
}

h2 {
    text-align: center;
    font-size: 20px;
    margin-bottom: 10px;
}

/* for visible not visble switching */
.hidden {
    display: none;
}

.visible {
    display: block;
}

/*content styling*/
.submenu {
    position: relative;
    margin: 0px 10px 0px 10px;
    padding: 0px;
    display: flex;
    justify-content: left;
    align-items: flex-start;
    flex-wrap: wrap;
    min-height: 40px;
}

.content {
    margin: 0px 0px;
    position: relative;
    justify-content: center;
    min-height: 10%;
    align-items: flex-start;
    /* Set the height of the div as needed */
    overflow: hidden;
}

button {
    background-color: var(--main-background-color);
    cursor: pointer;
    
    height: 30px;
    border: 1px;
    border-radius: 5px;
    color: #fff;
    padding: 5px;
    margin: 5px;
}

button:disabled {
    background-color: black;
    cursor: progress;
    border-radius: 15px 0px 15px 0px;
}
.submenu-button{
    min-width: 80px;
}

.right-button {
    position: absolute;
    top: 0px;
    /* Align the button vertically in the middle of the div */
    right: -10px;
    /* Adjust the value to move the button closer/further from the right edge */
    /*transform: translateY(-100%);*/
    /* Center the button vertically using transform */
}



/* Styling the select element */
div.select {
    position: absolute;
    margin: 10px;
    display: flex;
    justify-content: left;
    align-items: flex-start;
}

select {
    background-color: #121A29;
    /* Darker background for the select */
    color: #fff;
    /* Light text color */
    border: 2px solid #0658B7;
    /* Magenta border */
    padding: 5px;
    margin: 5px;
    border-radius: 5px;
    appearance: none;
    /* Removes default appearance on some browsers */
    cursor: pointer;
    margin-left: 10px;
    min-width: 80px;
}

/* Styling the arrow of the select element (optional) */
select::-ms-expand {
    display: none;
    /* Hide arrow on Internet Explorer */
}


.spinner {
    position: absolute;
    top: 250px;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80px;
    height: 80px;
    border-radius: 50%;
    border: 4px solid rgba(0, 0, 0, 0.1);
    border-top: 4px solid #0658B7;
    /* Choose your spinner color here */
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

input[type="datetime-local"] {
    padding: 5px;
    margin: 5px;
    border: 1px solid #0658b7;
    border-radius: 5px;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    min-width: 160px;
    background-color: #121A29;
    color: white;
}

/* Change color of datetime input icon */
input[type="datetime-local"]::-webkit-calendar-picker-indicator {
    filter: invert(1);
}

input[type="number"] {
    width: 50px;
    padding: 5px;
    margin: 5px;
    border: 1px solid #0658b7;
    border-radius: 5px;
    background-color: #121A29;
    color: white;
}

label {
    padding: 5px;
    margin: 5px 0px 0px 0px;
    border: 0px;
    border-radius: 5px;
    min-width: 80px;
}

/* Optional styling for the tooltip */
.tooltip {
    position: absolute;
    background-color: #333;
    color: white;
    padding: 5px;
    border-radius: 5px;
    font-size: 12px;
    display: none;
    z-index: 9999; /* Bring tooltip to the front */
}

table {
    width: 100%;
    border-collapse: collapse;
  }
  
  /* Style for the header */
  th {
    background-color: #0658B7;
    color: white;
    padding: 10px;
    text-align: left;
  }
  
  /* Style for table cells */
  td {
    padding: 10px;
    border: 1px solid #FFF;
  }
  
  /* Alternate row background colors */
  tbody tr:nth-child(odd) {
    background-color: #222; 
  }
  
  tbody tr:nth-child(even) {
    background-color: #444; 
  }

  .loginform {
    width: 300px; /* Set width as needed */
    padding: 20px;
    border: 2px solid white; /* White border */
    background-color: #333; /* Dark background for contrast */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* Center the div */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* Optional shadow for style */
    border-radius: 8px; /* Optional rounded corners */
    color: white; /* White text color */
  }

  #debugTextBox {
    font-size: 10px;
  }

  #map {
    height: 500px;
    width: 100%;
    margin:10px;
  }
  .tooltipMap {
    position: absolute;
    background-color: white;
    color: blue;
    border: 1px solid black;
    padding: 5px;
    border-radius: 4px;
    white-space: nowrap;
    font-size: 12px;
  }
  .tooltipMap.hidden {
    display: none;
  }

  /* Dark style for the textarea */
  #consoleOutput {
    width: 100%;
    height: 500px;
    resize: none; /* Disable manual resizing */
    font-family: monospace; /* Monospace font for log output */
    background-color: #043b79; /* background */
    color: #d4d4d4; /* Light text color */
    border: 1px solid #3c3c3c; /* Subtle dark border */
    padding: 10px; /* Inner padding for better readability */
    box-sizing: border-box; /* Include padding and border in the element's total width and height */
    overflow-y: auto; /* Show scrollbar only when necessary */
  }