html, body {
    height: 100%;
    width: 100%;
    margin: 0;
    font-family: Calibri Regular, Arial, sans-serif;
    color: #333
}

body {
    display: flex;
    flex-flow: column;
}

h1 {
    font-size: 32px;
    /* padding: 24px 0; */
    margin: 48px 0 24px 0;
}

h1:first-of-type {
    margin: 0 0 24px 0;
}

h2 {
    margin: 32px 0 20px 0;
}

h3 {
    font-size: 21px;
}

h4 {
    font-size: 18px;
    color: #333;
    font-weight: 600;
}

h5 {
    padding-bottom: 24px;
    margin: 0;
    font-weight: 500;
}

p {
    font-size: 21px;
    line-height: 140%;
    margin: 0 0 21px 0;
}

a {
    text-underline-offset: 4px;
    color: #3274AB;
}

a:hover {
    opacity: 0.75;
}

ul {
    margin: 0;
    padding: 0;
}

li {
    font-size: 21px;
    list-style-type: none;
    padding-bottom: 9px;
}

li > a {
    color: #3274AB;
    text-underline-offset: 4px;
}

article {
    max-width: 820px;
    padding: 0 0 2px 0;
}

@media screen and (max-width: 960px) {
    h1 {
        font-size: 3.3vw;
        padding: 2.5vw 0;
    }

    h2 {
        font-size: 2.5vw;
    }

    h3 {
        font-size: 2.2vw;
    }

    h4 {
        font-size: 1.6vw;
    }

    p {
        font-size: 2.2vw;
        margin: 0 0 2.2vw 0;
    }

    li {
        font-size: 2.2vw;;
    }
}

@media screen and (max-width: 720px) {
    h1 {
        font-size: 24px;
        padding: 18px 0;
    }

    h2 {
        font-size: 18px;
    }

    h3 {
        font-size: 16px;
    }

    h4 {
        font-size: 12px;
    }

    p {
        font-size: 16px;
        margin: 0 0 16px 0;
    }

    li {
        font-size: 16px;;
    }
}

sup, sub { 
    vertical-align: 0;
    position: relative; }
sup { bottom: 1ex; }
sub { top: 0.8ex; }

.header-container {
    max-width: 1170px;
    margin: auto;
}

.header-container img {
    margin: 15px;
    max-height: 120px;
}

@media screen and (max-width: 720px) {
    .header-container img {
        max-height: 16vw;
    }
}

@media screen and (max-width: 500px) {
    .header-container img {
        max-height: 80px;
    }
}

.topnav-container {
    max-width: 680px;
    margin: auto;
    width: 100%;
    overflow: hidden;
}

/* Style the links inside the navigation bar */

.topnav-container a {
    color: #fff;
    font-weight: 600;
    padding: 14px;
    text-decoration: none;
    font-size: 16px;
}

.topnav-menu {
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* Change the color of links on hover */

.topnav-container a:hover {
    color: #F7E8C3;
}

/* Add a color to the active/current link */

.topnav-container a.active {
    color: #F7E8C3;
}

/* The dropdown container */
.dropdown {
    float: left;
    overflow: hidden;
}

/* Dropdown button */
.dropdown .dropbtn {
    font-size: 16px;
    font-weight: 600;
    border: none;
    outline: none;
    color: white;
    padding: 14px;
    background-color: inherit;
    font-family: inherit; /* Important for vertical align on mobile phones */
    margin: 0; /* Important for vertical align on mobile phones */
}

/* Add a red background color to navbar links on hover */
.navbar a:hover, .dropdown:hover .dropbtn {
    color: #F7E8C3;
}

/* Dropdown content (hidden by default) */
.dropdown-content {
    display: none;
    position: absolute;
    background-color: #3274AB;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 9999;
}

/* Links inside the dropdown */
.dropdown-content a {
    font-size: 16px;
    float: none;
    color: white;
    padding: 10px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
    display: block;
}

/* Hide the link that should open and close the topnav on small screens */

.topnav-container .icon {
    display: none;
}

@media screen and (max-width: 600px) {
    .topnav-container {
        flex-wrap: wrap;
    }
    .topnav-menu {
        display: none;
    }
    .topnav-container a.icon {
        text-align: center;
        margin: auto;
        display: block;
    }
}

/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */

@media screen and (max-width: 600px) {
    .topnav-menu.responsive {
        display: flex;
        flex-direction: column;
        flex-grow: 0;
        flex-basis: 100%;
    }
    .topnav-menu.responsive a.icon {
        position: absolute;
        right: 0;
        top: 0;
    }
    .topnav-menu.responsive {
        display: flex;
    }

    .topnav-menu.responsive .dropdown {float: none;}
    .topnav-menu.responsive .dropdown-content {
        position: relative;
        background-color: #5A7291;
    }
    .topnav-menu.responsive .dropdown-content a {
        text-align: center;
        color: white
    }
    .topnav-menu.responsive .dropdown .dropbtn {
        /* display: block; */
        width: 100%;
        /* text-align: left; */
    }
}

/* Warning section */

.warning-container {
    padding: 24px 64px;
    max-width: 1200px;
    margin: auto;
    font-size: 24px;
    font-weight: 600;
    line-height: 130%;
}


/* Intro section */

#intro-container {
    background-image: url('../img/axiom-pattern.png')
}

.intro-container {
    padding: 128px 64px;
    display: flex;
    flex-direction: row;
    gap: 36px;
    max-width: 1170px;
    margin: auto;
}

.img-big-container {
    flex: 1;
}

.img-big-container img {
    width: 100%;
}

.presentation-container {
    flex: 3;
}

.link-to-isiaq a {
    color: #3274AB;
    font-weight: 600;
}

.link-to-isiaq a:hover {
    opacity: 0.75;
}

.link-to-isiaq p {
    display: inline;
}

.link-to-isiaq img {
    vertical-align: middle;
    padding-right: 8px;
}

@media screen and (max-width: 960px) {

    .intro-container {
        padding: 12vw 6vw;
        gap: 3vw;
    }

    .presentation-container h4 {
        font-size: 2.5vw;
        margin-bottom: 1.5vw;
    }
}

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

    .intro-container {
        padding: 64px 16px;
        gap: 18px;
    }

    .img-big-container {
        display: none;
    }
}

#objectives-container {
    background: #EBF1F7;
}

.objectives-container {
    padding: 64px;
    max-width: 1170px;
    margin: auto;
}

.objectives {
    display: flex;
    flex-direction: row;
    gap: 32px;
    text-align: center;
    padding-top: 32px;
}

.objectives p {
    margin: 24px 0 0 0;
}

.objectives img {
    width: 120px;
}

@media screen and (max-width: 960px) {

    .objectives-container {
        padding: 6vw;
    }

    .objectives {
        gap: 3.3vw;
    }

    .objectives img {
        width: 10vw;
    }
}

@media screen and (max-width: 720px) {

    .objectives {
        gap: 24px;
        flex-wrap: wrap;
    }

    .objectives img {
        width: 90px;
    }
}

@media screen and (max-width: 600px) {
    .objectives-container {
        padding: 36px 16px;
    }
}

/* Collapsibles section  */
details {
    border-bottom: 1px solid black;

}

summary:hover {
    color: #999;
    cursor: pointer;
}

summary {
    font-size: 32px;
    font-weight: 600;
    margin: 32px 0 32px 0;
}

/* How to section */

.howto-container {
    padding: 64px;
    max-width: 1170px;
    margin: auto;
}

.tip > p {
    padding-bottom: 32px;
    margin: 0;
}

.tip > p > a {
    text-underline-offset: 4px;
    color: #3274AB;
    font-weight: 600;
}

.howto-container > div:last-child {
    padding-top: 48px;
}

.screenshots {
    display: flex;
    flex-direction: row;
    gap: 36px;
    font-size: 12px;
    line-height: 140%;
    text-align: center;
}

.screenshots img {
    width: 100%;
    padding-bottom: 12px;
}

.screenshots p {
    font-size: 18px;
    line-height: 140%;
    margin: 0;
}

@media screen and (max-width: 960px) {

    .howto-container {
        padding: 6vw;
    }

    .tip > p {
        padding-bottom: 3.3vw;
    }

    .screenshots {
        font-size: 2.5vw;
        gap: 3.3vw;
    }

    .screenshots p {
        font-size: 1.8vw;
        margin: 0;
    }
}

@media screen and (max-width: 720px) {

    .tip > p {
        padding-bottom: 24px;
    }

    .screenshots {
        font-size: 18px;
        flex-wrap: wrap;
        gap: 27px
    }

    .screenshots p {
        font-size: 13px;
        margin: 0;
    }
}

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

    .howto-container {
        padding: 36px 16px;
    }
}

/* Style for contact section */

.contact-container {
    padding: 64px;
    max-width: 1170px;
    margin: auto;
}

.contact-container > a {
    font-size: 24px;
    margin: 0;
    text-decoration: none;
    color: #3274AB;
}

@media screen and (max-width: 1200px) {

    .contact-container > a {
        font-size: 2vw;
    }
}

@media screen and (max-width: 900px) {

    .contact-container > a {
        font-size: 18px;
    }
}

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

    .contact-container {
        padding: 36px 24px;
    }
}

/* Style for the grant section */

.grant-section {
    max-width: 960px;
    width: fit-content;
    padding: 32px 64px 24px 64px;
    margin: auto;
    text-align: center;
    color: #FFFFFF;
    font-weight: 600;
    font-size: 21px;
}

@media screen and (max-width: 500px) {
    .grant-section {
        padding: 32px 32px 24px 32px;
        text-align: center;
    }
}

.grant-section img {
    height: 24px;
    padding: 0px 8px 2px 0px;
    vertical-align: middle;
}

.grant-section p {
    display: inline;
}

.grant-section a {
    color: #FFFFFF;
    text-underline-offset: 4px;
}

.grant-section a:hover {
    color: #F7E8C3;
}

.privacy-section {
    display: flex;
    justify-content: center;
    color: #FFFFFF;
    font-weight: 600;
    font-size: 14px;
}

.privacy-section a {
    border-top: 2px solid white;
    text-underline-offset: 4px;
    padding-top: 24px;
    color: #FFFFFF;
    padding-bottom: 24px;
}

.privacy-section a:first-child {
    padding-right: 12px;
}

.privacy-section a:hover {
    color: #F7E8C3;
}

.cc-section {
    text-align: center;
    padding-bottom: 16px;
}

.cc-section li {
    font-size: 14px;
    font-weight: 600;
    color: #FFFFFF;
}

.cc-section a {
    color: #FFFFFF;
}

/* Style for the table page */

.forms-banner {
    padding-left: 16px;
    margin: 24px 0;
}

.forms-banner li {
    display: inline;
    font-size: 16px;
    line-height: 140%;
    font-weight: 600;
    margin: 0 12px 0 0;
    padding: 0;
    list-style-type: none;
}

.forms-banner li:last-child {
    font-size: 12px;
    float: right;
}

#submit-button {
    padding: 12px 24px;
    color: #FFFFFF;
    background-color: #3274AB;
    text-decoration: none;
    border-radius: 6px;
}

/* Style for map page */

.map-container {
    flex: 1 1 auto;
}

#mapid {
    height: 100%;
    width: 100%;
}

.info {
    max-width: 320px;
    width: calc(100% - 200px);
    max-height: 550px;
    height: calc(100% - 70px);
    margin-bottom: 30px;
    padding: 12px 16px;
    font: 14px/130% Arial, Helvetica, sans-serif;
    background: rgba(255, 255, 255, 0.8);
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
    border-radius: 5px;
    overflow: auto;
}

#close-button {
    color: #3274AB;
    text-decoration: underline;
    cursor: pointer;
    float: right;
}

.info h1 {
    font-size: 18px;
    margin: 0 0 16px 0;
    color: #777;
}

.info h2 {
    margin: 0 0 4px 0;
    padding: 0;
    font-size: 16px;
}

.info h3 {
    margin: 0 0 12px 0;
    padding: 0;
    font-size: 14px;
    color: #666666;
}

.info .inactive {
    display: None;
}

.info button {
    background-color: #3274AB;
    border-color: #3274AB;
    border-style: solid;
    border-width: 2px;
    border-radius: 4px;
    color: white;
    padding: 8px 16px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 14px;
    font-weight: 500;
    margin: 0 4px 4px 0;
}

.info button.active {
    background-color: transparent;
    color: #3274AB;
}

.info .environment-label {
    display: inline-block;
    font-size: 12px;
    font-weight: 400;
    line-height: 130%;
    padding: 2px 8px;
    background-color: #9DE5A6;
    border-radius: 20px;
    margin: 0 4px 0 0;
}

.info .guideline-content {
    padding: 12px 0 0 12px;
    margin-bottom: 16px;
    border-left: 1px solid #333;
}

.info .occupant-label {
    display: inline-block;
    font-size: 12px;
    font-weight: 400;
    line-height: 130%;
    padding: 2px 8px;
    background-color: #FCF17C;
    border-radius: 20px;
    margin: 0 0 0 0;
}

#buttons-container {
    padding-bottom: 24px;
}

.leaflet-control-container {
    height: 100%;
}

.leaflet-top.leaflet-right {
    width: 100%;
    height: 100%;
}

.info p {
    font-size: 14px;
    line-height: 130%;
    margin: 0 0 8px 0;
}

hr.solid {
    border-top: 1px solid #DADADA;
    margin: 16px 0 16px 0;
}

/* Style for the forms pop-up on the left side of the map */

.forms {
    max-width: 128px;
    max-height: 150px;
    padding: 12px 16px;
    background: rgba(255, 255, 255, 0.8);
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
    border-radius: 5px;
    position: absolute;
    left: 12px;
    top: 280px;
    z-index: 1990;
    float: left
}

.forms li {
    font-size: 16px;
    line-height: 140%;
    font-weight: 600;
    margin: 8px 0;
    padding: 0;
    list-style-type: none;
}

.forms li:last-child {
    margin: 12px 0 12px 0;
    font-size: 14px;
}

.filter-container {
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-width: 128px;
    max-height: 550px;
    padding: 12px 16px;
    background: rgba(255, 255, 255, 0.8);
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
    border-radius: 5px;
    position: absolute;
    left: 12px;
    top: 390px;
    z-index: 1990;
    float: left;
    font-size: 14px;
}

@media screen and (max-width: 550px) {

    .forms {
        display: none;
    }
}

/* Loading animation */

.spinner-wrapper{
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.5);
    position: absolute;
    top: 0;
    left: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
}

.spinner {
    border: 8px solid #f3f3f3; /* Light grey */
    border-top: 8px solid #3274AB; /* Blue */
    border-radius: 50%;
    width: 80px;
    height: 80px;
    animation: spin 1s linear infinite;
  }
  
  @keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
  }


/* About section */

.acknowledgment-container {
    padding: 64px;
    max-width: 1170px;
    margin: auto;
}

@media screen and (max-width: 960px) {
    .acknowledgment-container {
        padding: 6vw;
    }
}

@media screen and (max-width: 800px) {
    .acknowledgment-container {
        padding: 48px 16px;
    }
}

/* Privacy section */ 

.privacy-container {
    padding: 64px;
    max-width: 1170px;
    margin: auto;
}

@media screen and (max-width: 960px) {
    .privacy-container{
        padding: 6vw;
    }
}

@media screen and (max-width: 800px) {
    .privacy-container {
        padding: 48px 16px;
    }
}

/* Styling for infographics table  */

#infographics {
    width: 100%;
    border: none;
    border-collapse: collapse;
}

#infographics td, #infographics th {
    padding: 8px;
    text-align: left;
}

#infographics th {
    border-bottom: 1px solid rgb(204, 204, 204, 1);
}

#infographics td {
    border-bottom: 1px solid rgb(204, 204, 204, 0.5);
}

#guideline-types td {
    border-bottom: none;
    padding: 8px;
}

#infographics td:last-child {
    padding: 8px 0;
}

.legend {
    width: auto;
    max-width: 100px;
    line-height: 18px;
    color: #555;
}

.legend h1 {
    font-size: 14px;
}

.legend2 {
    width: auto;
    max-width: 240px;
}

.legend2 li {
    font-size: 14px;
}

.legend2 li > img {
    width: 12px;
    height: 12px;
    padding-right: 4px;
}

.legend i {
    width: 18px;
    height: 18px;
    float: left;
    margin-right: 8px;
    opacity: 0.7;
}

th, td {
    font-size: 14px;
    min-width: 100px;
    max-width: 800px;
}

.search-input {
    width: 300px;
    padding: 10px 20px;
    margin-bottom: 24px;
    border-radius: 50px;
    border: 1px solid #ccc;
    outline: none;
    transition: box-shadow 0.3s ease, border-color 0.3s ease;
    font-size: 16px;
}

.search-input:focus {
    border-color: #007BFF;
    box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
}

.search-container::before {
    content: '🔍';
    font-size: 18px;
    position: absolute;
    margin-left: 20px;
    color: #aaa;
}

.content-wrapper {
    flex: 1;
}