html {
    font-family: sans-serif;
    background: #eee;
    padding: 1rem;
  }
  
  body {
    margin: 0 auto;
    background: white;
  }
  
  h1, h2, h3, h4, h5, h6 {
    font-family: serif;
    color: #377ba8;
    margin: 1rem 0;
  }
  
  a {
    color: #377ba8;
  }
  
  hr {
    border: none;
    border-top: 1px solid lightgray;
  }
  
  nav {
    background: lightgray;
    align-items: right;
    text-align: right;
    padding: 0 0.5rem;
  }
  
  nav h1 {
    flex: auto;
    margin: 0;
  }
  
  nav a {
    text-decoration: none;
    padding: 0.25rem 0.5rem;
    text-align: right;
  }
  
  nav ul  {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
  }
  
  nav ul li a, nav ul li span, header .action {
    display: block;
    padding: 0.5rem;
  }
  
  .content {
    padding: 0 1rem 1rem;
  }
  
  .content > header {
    border-bottom: 1px solid lightgray;
    display: flex;
    align-items: flex-end;
  }
  
  .content > header h1 {
    flex: auto;
    margin: 1rem 0 0.25rem 0;
  }
  
  .flash {
    margin: 1em 0;
    padding: 1em;
    background: #cae6f6;
    border: 1px solid #377ba8;
  }
  
  .post > header {
    display: flex;
    align-items: flex-end;
    font-size: 0.85em;
  }
  
  .post > header > div:first-of-type {
    flex: auto;
  }
  
  .post > header h1 {
    font-size: 1.5em;
    margin-bottom: 0;
  }
  
  .post .about {
    color: slategray;
    font-style: italic;
  }
  
  .post .body {
    white-space: pre-line;
  }
  
  .content:last-child {
    margin-bottom: 0;
  }
  
  .content form {
    margin: 1em 0;
    display: flex;
    flex-direction: column;
  }
  
  .content label {
    font-weight: bold;
    margin-bottom: 0.5em;
  }
  
  .content input, .content textarea {
    margin-bottom: 1em;
  }
  
  .content textarea {
    min-height: 12em;
    resize: vertical;
  }
  
  input.danger {
    color: #cc2f2e;
  }
  
  input[type=submit] {
    align-self: start;
    min-width: 10em;
  }
  
  td, th {
    max-width: 960px;

    border: 1px solid #ddd;
    padding: 15px;
    text-align: left;
  }
  
tr:nth-child(even){background-color: #f2f2f2;}

tr:hover {background-color: #ddd;}
  
th {
    padding-top: 12px;
    padding-bottom: 12px;
    text-align: left;
    background-color: #04AA6D;
    color: white;
  }

  #search-input {
    background-position: 10px 12px; /* Position the search icon */
    background-repeat: no-repeat; /* Do not repeat the icon image */
    width: 80%; /* Full-width */
    font-size: 16px; /* Increase font-size */
    padding: 12px 20px 12px 40px; /* Add some padding */
    border: 1px solid #ddd; /* Add a grey border */
    margin-bottom: 12px; /* Add some space below the input */
  }
  
  #myUL {
    /* Remove default list styling */
    list-style-type: none;
    padding: 0;
    margin: 0;
  }
  
  #myUL li a {
    border: 1px solid #ddd; /* Add a border to all links */
    margin-top: -1px; /* Prevent double borders */
    background-color: #f6f6f6; /* Grey background color */
    padding: 12px; /* Add some padding */
    text-decoration: none; /* Remove default text underline */
    font-size: 18px; /* Increase the font-size */
    color: black; /* Add a black text color */
    display: block; /* Make it into a block element to fill the whole list */
  }
  
  #myUL li a:hover:not(.header) {
    background-color: #eee; /* Add a hover effect to all links, except for headers */
  }

  /* Customize the chart container */
#chart-container {
  width: 100%;
  height: 400px;
}

/* Style the chart line */
.ct-series .ct-line {
  stroke-width: 3px;
}

/* Style the chart dots */
.ct-series .ct-point {
  stroke-width: 10px;
  fill: white;
  stroke: #ff5722;
}

/* Style the chart labels */
.ct-label {
  fill: #333;
  font-family: Arial, sans-serif;
  font-size: 12px;
}

/* Style the chart grid lines */
.ct-grid {
  stroke: #eee;
  stroke-width: 1px;
}

/* Style the chart tooltip */
.ct-tooltip {
  background-color: #333;
  color: #fff;
  padding: 8px;
  font-family: Arial, sans-serif;
  font-size: 12px;
}

.btn-primary {
  color: #fff;
  background-color: gray;
  border-color: gray;
}

#mapa {
  width: relative;
  height: 450px;
}

.bg-gradient {
  background-image: var(--bs-gradient)!important;
}

.text-green {
  color: green;
}

.text-red {
  color: red;
}