body {
    margin: 0;
    padding-bottom: 60px; /* Height of the footer */
    box-sizing: border-box;
}

/* ACTRIS brand palette, semantic button/text-hover roles only (see
   reference_actris_brand_guidelines memory for the full palette). Resting
   button colours stay the existing NILU teal below -- these vars are hover-
   only plus the info-text colour pair. */
:root {
    --actris-hover-default: #629EE4; /* Day C */
    --actris-info-default: #2C347F;  /* Night B */
    --actris-info-hover: #5F54A6;    /* Night A */
}

/* Typography */
p, h1, h2, h3 {
    font-family: "Poppins", sans-serif;
}

.page-title {
    color: var(--actris-info-default);
}

.section-heading {
    color: var(--actris-info-default);
}

.icon-info {
    color: var(--actris-info-default);
}

.section-divider {
    border: 1px solid #00aab5;
    opacity: 1;
    margin-top: 5px;
}

/* Layout */
.form-group {
    margin-bottom: 10px;
}

.main-container {
    margin: 30px;
    margin-bottom: 100px;
}

#search-results {
    margin-bottom: 50px;
}

/* Components */
.accordion-item-map {
    height: 260%;
}

.custom-multiselect, .select2 {
    width: 100% !important;
}

.accordion {
    margin: 10px;
}

.accordion-button {
    color: #ffffff;
    background-color: #00aab5;
}

.accordion-button:not(.collapsed) {
    color: #ffffff;
    background-color: #00aab5;
}

.accordion-button .collapsed {
    color: #495057;
    background-color: red;
}

.btn, #submit {
    background-color: #00aab5;
    border-color: #00aab5;
    color: #ffffff;
}

/* Shepherd.js tour buttons (static/js/tutorial.js) aren't plain Bootstrap
   .btn elements, so they get Shepherd's own generic default styling unless
   explicitly classed -- give them the same teal/default-hover look as the
   rest of the site. transition: none avoids a colour-fade flicker on the
   fast Next/Back clicks typical of stepping through a tour. */
.tutorial-next-button {
    background-color: #00aab5 !important;
    border-color: #00aab5 !important;
    color: #ffffff !important;
    transition: none !important;
}

.tutorial-next-button:hover {
    background-color: var(--actris-hover-default) !important;
    border-color: var(--actris-hover-default) !important;
    color: #00aab5 !important;
    transition: none !important;
}

/* Standardized default hover for plain buttons -- replaces whichever
   Bootstrap variant's own hover shade would otherwise show through.
   .btn-success/.btn-danger are excluded so they keep Bootstrap's own
   green/red hover (tried the ACTRIS palette there, looked bad -- kept
   it only for the generic/default button and info-text colours). */
.btn:hover:not(.btn-success):not(.btn-danger) {
    background-color: var(--actris-hover-default);
    border-color: var(--actris-hover-default);
    color: #ffffff;
}

.page-link {
    color: #00aab5;   
}

.active>.page-link, .page-link.active {
    background-color: #00aab5;
    border-color: #00aab5;
    color: #ffffff;
}

/* Navigation */
#main-nav {
    background-color: #010025 !important;
    color: #ffffff !important;
}

#main-nav .nav-link {
    font-weight: bold;
}

#main-nav .navbar-brand {
    padding-top: 0;
    padding-bottom: 0;
}

#main-nav .logo-crop {
    display: inline-block;
    height: 85px;
    overflow: hidden;
}

#main-nav .logo-crop img {
    display: block;
    height: 154.55px;
    margin-top: -38.64px;
}

#front-menu {
    margin: 0.5em;
}

/* Other */
pre {
    background: #ddd;
    padding: 10px;
}

footer {
    margin-top: 10px;
    padding-top: 12px;
}

table {
    table-layout: auto;
}

td {
    word-wrap: break-word;
}

label {
    margin-right: 10px;
}

#map {
    width: 100%;
    height: 535px;
}