:root {
    /* SLU FONT FAMILIES */
    --slu-font-merriweather: 'Merriweather', Georgia, 'Times New Roman', Times, serif;
    --slu-font-oswald: 'Oswald', Helvetica, Arial, sans-serif;
    --slu-font-roboto: 'Roboto', Helvetica, Arial, sans-serif;
    --slu-font-roboto-condensed: 'Roboto Condensed', 'Arial Narrow', Helvetica, Arial, sans-serif;

    /* FONT AWESOME */
    --font-awesome: 'Font Awesome 6 Pro';

    /* SLU COLORS - BLUE */
    --slu-duva: #b9d3dc;
    --slu-himmel: #6ad1e3;
    --slu-turkos: #00b0b9;
    --slu-turkos-rgb: 0, 176, 185;
    --slu-havsvik: #007681;
    --slu-havsvik-rgb: 0, 118, 129;
    --slu-havsdjup: #004851;
    --slu-havsdjup-rgb: 0, 72, 81;

    /* SLU COLORS - GREEN */
    --slu-lindblom: #d8ed96;
    --slu-apple:  #c4d600;
    --slu-skog:  #154734;
    --slu-skog-rgb: 21, 71, 52;

    /* SLU COLORS - GREY */
    --slu-fjader: #d9d9d6; /* use for lighter borders */
    --slu-glimmer: #bbbcbc; /* use for darker borders */
    --slu-betong: #888b8d;
    --slu-titan: #53565a;

    /* SLU COLORS - RED */
    --slu-hallon: #ce0037;

    /* SLU COLORS - YELLOW */
    --slu-kada: #ffb81c;
    --slu-kada-rgb: 255, 184, 28;
    --slu-choklad: #4b3d2a;

    /* MISC COLORS */
    --main-bg-color: #f2f2f0;
    --main-bg-color-rgb: 242, 242, 240;
    --panel-bg-color: #ffffff;
    --primary-color: var(--slu-havsdjup);
    --secondary-color: var(--slu-duva);
    --heading-color: #302f2f;
    --heading-color-rgb: 48, 47, 47;
    --white-text: var(--main-bg-color);
    --white-text-rgb: var(--main-bg-color-rgb);
    --link-blue: #3f41dc;
    --link-visited: #814180;
    --focus-blue: #0060df;

    /* OUTLINES */
    --focus-outline: 2px solid var(--slu-kada);
    --focus-outline-blue: 2px solid var(--focus-blue);
    --focus-outline-thick-blue: 4px solid var(--focus-blue);
    --focus-outline-offset: -2px;

    /* BORDER RADII */
    --small-radius: 5px;
    --medium-radius: 8px;
    --large-radius: 16px;

    /* TRANSITIONS */
    --default-transition: background-color .35s ease-out;

    /* SHADOWS */
    --default-box-shadow: 0 10px 10px rgba(0, 0, 0, 0.1), -8px 10px 10px rgba(0, 0, 0, 0.1), 8px 10px 10px rgba(0, 0, 0, 0.1);
    --alt-box-shadow: 0 5px 5px rgba(0, 0, 0, 0.1), -4px 5px 5px rgba(0, 0, 0, 0.1), 4px 5px 5px rgba(0, 0, 0, 0.1);
}

/* COMMON ELEMENTS */
body {
    background-color: var(--main-bg-color);
    display: flex;
    flex-direction: column;
    font-family: var(--slu-font-merriweather);
    margin: 0;
    min-height: 100vh;
}

main { flex: 1 0 auto }

p, table, ul { font-weight: 300 }

b { font-weight: bold                                               !important }

/* HEADINGS */
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    color: var(--heading-color);
    font-family: var(--slu-font-oswald);
}

h1, .h1 { font-size: clamp(1.75rem, 1.317rem + 1.923vw, 3rem) } /* 1.75rem at 360px and 3rem at 1400px */
h2, .h2 { font-size: clamp(1.313rem, 1.075rem + 1.057vw, 2rem) } /* 1.313rem at 360px and 2rem at 1400px */
h3, .h3 { font-size: clamp(1rem, 0.74rem + 1.154vw, 1.75rem) } /* 1rem at 360px and 1.75rem at 1400px */

h2.discreet, h3.discreet {
    font-family: var(--slu-font-roboto);
    font-size: 1.125rem;
    font-weight: 700;
}

/* LINKS */
a {
    border-bottom: 1px dotted;
    color: var(--link-blue);
    text-decoration: none;
}
a:hover, a:focus {
    background-color: var(--secondary-color);
    border-bottom: 1px solid;
    -webkit-box-shadow: -0.25rem 0px 0 var(--secondary-color), 0.25rem 0px 0 var(--secondary-color);
    -moz-box-shadow: -0.25rem 0px 0 var(--secondary-color), 0.25rem 0px 0 var(--secondary-color);
    box-shadow: -0.25rem 0px 0 var(--secondary-color), 0.25rem 0px 0 var(--secondary-color);
    color: black;
    outline: none;
}
a:visited { color: var(--link-visited) }
a:visited:hover, a:visited:focus { color: black }
a[href^="http"]::after { /* external links */
    content: '\f08e' / '';
    font-family: var(--font-awesome);
    font-size: .625em;
    font-weight: 400;
    padding-left: .5em;
    vertical-align: .125em;
}

li > a { border: none }

/* TYPOGRAPHY */
.text-column p.lead {
    font-family: var(--slu-font-oswald);
    font-size: 1.125rem;
    font-weight: 400;
    line-height: 1.375;
}

/* COMPONENTS */
.panel {
    background-color: var(--panel-bg-color);
    border: 1px solid var(--slu-fjader);
    border-radius: var(--large-radius);
    overflow: hidden;
}
.banner {
    background-color: var(--slu-havsvik);
    background-image: url('../img/web_fargplatta_havsvik.png');
    background-position: center;
    background-size: cover;
    color: var(--white-text);
    text-shadow: 0 0 16px var(--primary-color);
}
.banner.panel { border: none }
.banner :is(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6) { color: var(--white-text) }
.banner p.lead {
    color: var(--white-text);
    font-family: var(--slu-font-roboto);
    font-size: clamp(1.25rem, 1.163rem + 0.385vw, 1.5rem); /* 1.25rem at 360px and 1.5rem at 1400px */
    margin: 1rem 0 0;
    text-shadow: 0 0 16px black;
}

/* BOOTSTRAP - POPOVER */
.popover {
    border: none;
    border-radius: var(--large-radius);
    box-shadow: var(--default-box-shadow);
    font-family: var(--slu-font-roboto-condensed);
    font-size: 1rem;
    font-weight: 300;
}

.popover-body {
    color: var(--slu-titan);
    padding: 0.625rem 1rem;
}

.popover ul {
    margin: .5rem 0 0;
    padding-left: 1.25rem;
}

/* CUSTOM CLASSES */
a.dark-bg { color: var(--main-bg-color) }
a.dark-bg:hover, a.dark-bg:focus, a.dark-bg:visited:hover, a.dark-bg:visited:focus { color: black }
a.dark-bg:visited { color: var(--main-bg-color) }

a.skip-to-main-link {
    background: var(--slu-kada);
    border: none;
    color: black;
    display: block;
    font-family: var(--slu-font-roboto-condensed);
    font-size: 1.125rem;
    font-weight: 600;
    left: -200%;
    padding: 16px;
    position: absolute;
}
a.skip-to-main-link:focus {
    left: auto;
    outline: none;
    position: relative;
    width: auto;
    z-index: 999999;
}
a.skip-to-main-link:focus, a.skip-to-main-link:visited:focus { background-color: var(--slu-kada) }

a.unstyled, a.image-link {
    background-color: transparent;
    border: none;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
}

a.image-link { display: block }

a[href^="http"].image-link { position: relative }
a[href^="http"].image-link::after {
    color: var(--slu-betong);
    line-height: 1;
    font-size: 1rem;
    opacity: .75;
    position: absolute;
    top: .5rem;
    right: .5rem;
}
a[href^="http"].image-link:hover::after { opacity: 1 }

a.image-link img {
    pointer-events: none;
    width: 100%;
    height: 100%;
}
a.image-link:focus-visible img { outline: var(--focus-outline-thick-blue) }

/* A ELEMENT OVERRIDES */
a.slu-button, a.text-button { text-decoration: none }
a.slu-button:hover, a.slu-button:focus, a.text-button:hover, a.text-button:focus {
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
}

a.slu-button:hover, a.slu-button:focus { border-color: var(--slu-havsvik) }
a.slu-button:visited, a.slu-button:visited:hover, a.slu-button:visited:focus { color: white }
a.slu-button.light:visited { color: var(--primary-color)            !important }
a.slu-button.light:hover, a.slu-button.light:focus { color: white   !important }

.primary, .secondary { font-family: var(--slu-font-roboto-condensed) }
.primary { font-size: 1.5em }
.secondary { font-size: 1.25em }

.primary a, .secondary a { font-weight: 400 }

/* SEARCH INFO */
.search-info {
    color: var(--white-text);
    font-size: 2rem;
    margin-left: .75rem;
}
.search-info:focus-visible { outline: var(--focus-outline-thick-blue) }

.subheading img { height: 1em }

/* BUTTONS - WRAPPER */
.slu-button-wrapper {
    column-gap: 10px;
    display: flex;
    padding: 0 5px;
}

/* BUTTONS - DEFAULT BUTTON */
.slu-button {
    flex: 1;
    align-items: center;
    background-color: var(--slu-havsvik);
    border: 1px solid var(--slu-havsvik);
    border-radius: 22px;
    color: var(--white-text);
    display: inline-block;
    font-family: var(--slu-font-oswald);
    font-size: 1.5rem;
    font-weight: 300                                                !important;
    justify-content: center;
    line-height: 1.5;
    margin-bottom: 10px;
    padding: 16px 17px;
    text-align: center;
    overflow-wrap: anywhere;
}
.slu-button:hover, .slu-button:focus {
    background-color: var(--primary-color);
    color: var(--white-text);
}
.slu-button:focus-visible {
    outline: var(--focus-outline);
    outline-offset: var(--focus-outline-offset);
}

.slu-button.light {
    background-color: white;
    color: var(--primary-color);
}
.slu-button.light:hover, .slu-button.light:focus {
    background-color: var(--slu-havsvik);
    color: var(--white-text);
}

.slu-button.slim {
    width: unset;
    font-size: 1.25rem;
    padding: 5px 16px 6px;
}

/* hover background color change for buttons inside of search area for contrast */
.search .slu-button.light:hover, .search .slu-button.light:focus, .search .slu-button.light:visited:hover, .search .slu-button.light:visited:focus {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}

/* BUTTONS - ICON BUTTON */
.icon-button span { padding: .25rem }

.icon-button:focus-visible { outline: none }
.icon-button:focus-visible span {
    background-color: var(--slu-kada);
    color: black;
}

/* BUTTONS - TEXT BUTTON */
.text-button {
    background-color: transparent;
    border: none;
    padding: 0 .325rem;
}
.text-button:focus, .text-button:hover {
    background-color: transparent;
    border: none;
    text-decoration: underline;
}
.text-button:focus-visible {
    background-color: var(--slu-kada);
    color: black                                                    !important;
    text-shadow: none;
    outline: none;
}

/* iOS FIX */
input[type="search"] {
    -webkit-appearance: none;
            appearance: none;
}

/* HEADER */
header {
    background-color: var(--primary-color);
    font-family: var(--slu-font-oswald);
    font-size: clamp(1.5rem, 1rem + 2vw, 2rem);
    font-weight: 500;
}

#sluMainLogo {
    /* background-color: white; */
    /* border-radius: var(--small-radius); */
    display: block;
    /* padding: 8px; */
    width: 3.5rem;
    height: 3.5rem;
}

.logotype { margin: 16px 0.625rem 10px 16px }

.global-heading {
    color: var(--white-text);
    margin-bottom: 10px;
}

/* NAVBAR BOOTSTRAP OVERRIDE */
.navbar {
    padding-top: 10px;
    padding-bottom: 0;
}

.navbar-toggler {
    background-color: var(--main-bg-color);
    border-radius: var(--small-radius);
    color: black;
    font-size: 2rem;
    margin-right: 10px;
}

.navbar-toggler.collapsed {
    background-color: var(--secondary-color);
}

.navbar-toggler:focus,
.navbar-toggler:active {
    outline: none;
    box-shadow: none;
}

.navbar-toggler:focus-visible {
    outline: var(--focus-outline);
    outline-offset: var(--focus-outline-offset);
    transition: none;
}

.navbar .nav-link {
    border: none;
    padding-top: 0.188rem;
    padding-bottom: 0.313rem;
    padding-left: 20px;
}

nav .dropdown-menu {
    background-color: var(--slu-havsvik);
    border: none;
    border-radius: 0;
}

.navigation-items a.nav-link, .navigation-items a.nav-link:visited {
    color: black;
}

.navigation-items a.nav-link:focus, .navigation-items a.nav-link:hover, .navigation-items a.nav-link:visited:hover, .navigation-items a.nav-link:visited:focus {
    background-color: var(--slu-havsvik)                            !important;
    border: none;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    color: var(--white-text)                                        !important;
    text-decoration: none;
}

.navigation-items a.nav-link.active { background-color: var(--main-bg-color) }

.navigation-items a.dropdown-item, .navigation-items a.dropdown-item:visited {
    color: var(--white-text);
    font-size: 1.25rem;
    font-weight: 300;
}

.nav-link.dropdown-toggle.show {
    background-color: var(--slu-havsvik)                            !important;
    color: var(--white-text)                                        !important;
}

.dropdown-item.active, .dropdown-item:active {
    background-color: var(--main-bg-color);
    color: black                                                    !important;
}

.navigation-items a.dropdown-item:focus, .navigation-items a.dropdown-item:hover, .navigation-items a.dropdown-item:visited:hover, .navigation-items a.dropdown-item:visited:focus {
    background-color: var(--primary-color);
    border: none;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    color: var(--white-text)                                        !important;
    text-decoration: none;
}

.navigation-items a.nav-link:focus-visible, .navigation-items a.dropdown-item:focus-visible {
    outline: var(--focus-outline);
    outline-offset: var(--focus-outline-offset);
    transition: none;
}

@media (hover: hover) {
    .navbar-toggler:hover, .navbar-toggler:focus-visible {
        background-color: var(--slu-havsvik);
        color: var(--white-text);
    }
}

/* NAVBAR */
.navigation {
    background-color: var(--main-bg-color);
    color: black;
    font-family: var(--slu-font-oswald);
    font-size: 1.5rem;
    font-weight: 300;
}

.external-links {
    font-family: var(--slu-font-roboto);
    font-size: 1.25rem;
    margin-top: 0.5rem;
    text-transform: uppercase;
}

.external-links ul {
    margin-bottom: 0;
    padding-left: 1.25rem;
}

.external-links li {
    display: inline;
}

.external-links li:not(:last-child)::after {
    color: var(--slu-havsvik);
    content: '|';
    padding: 0 0.5rem;
}

.external-links li > a, .external-links li > a:visited {
    color: black;
}

.external-links li > a:hover, .external-links li > a:focus {
    background-color: var(--slu-havsvik);
    border-bottom: 1px solid;
    -webkit-box-shadow: -0.25rem 0px 0 var(--slu-havsvik), 0.25rem 0px 0 var(--slu-havsvik);
    -moz-box-shadow: -0.25rem 0px 0 var(--slu-havsvik), 0.25rem 0px 0 var(--slu-havsvik);
    box-shadow: -0.25rem 0px 0 var(--slu-havsvik), 0.25rem 0px 0 var(--slu-havsvik);
    color: var(--white-text);
    outline: none;
}

.breadcrumbs {
    font-family: var(--slu-font-roboto);
    font-size: 1rem;
    font-weight: 300;
}

.breadcrumbs a:visited { color: var(--link-blue); }

.breadcrumbs ol {
    display: flex;
    padding-left: 1.625rem; /* custom padding to align with nav button text */
}

.breadcrumbs li { display: block; }

.breadcrumbs li:not(:last-child)::after {
    content: '/';
    margin: 0 .25em 0;
}

/* FOOTER */
footer {
    background-color: var(--slu-titan);
    color: white;
    font-family: var(--slu-font-roboto-condensed);
    font-size: 1.125rem;
    font-weight: 300;
    padding-top: 1.5rem;
}

footer h2 {
    color: var(--white-text);
    font-size: 1.375rem;
    font-weight: 300;
}

/* SEARCH */
.search { text-align: center }

.search .search-info::before { vertical-align: sub }
.search .search-info:focus-visible {
    outline: none;
    color: var(--slu-kada);
}

.status-message {
    font-family: var(--slu-font-roboto);
    text-align: left;
}

.form-input {
    background-color: var(--main-bg-color);
    border: none;
    border-radius: var(--medium-radius) 0 0 var(--medium-radius);
    font-family: var(--slu-font-roboto);
    font-size: 1.25rem;
    font-weight: 300;
    padding: 0.563rem 0.625rem;
}
.form-input:focus-visible {
    outline: var(--focus-outline);
    outline-offset: var(--focus-outline-offset);
}
.form-input::placeholder { overflow: visible }

.search-button {
    background-color: var(--secondary-color);
    border: none;
    border-radius: 0 var(--medium-radius) var(--medium-radius) 0;
    color: black;
    font-size: 1.5rem;
    line-height: 1;
    padding: 0 0.625em;
}

.search-button:hover, .search-button:focus {
    background-color: var(--primary-color); /* this color needs to work both in search box and navbar */
    color: white;
}

.search-button:focus-visible {
    outline: var(--focus-outline);
    outline-offset: var(--focus-outline-offset);
}

.search-form-checkbox {
    display: flex;
}

.search-form-checkbox input {
    margin-right: .25em;
    position: relative;
    top: 0.125rem;
    width: 1rem;
    height: 1rem;
}

.search-area-control {
    color: var(--white-text)                                        !important;
    font-family: var(--slu-font-roboto-condensed);
    font-weight: 400;
    line-height: 1.375;
    text-shadow: 0 0 .25rem var(--primary-color);
}

.advanced-button {
    display: flex;
    align-items: center;
    padding-top: 1rem;
}

.advanced-button .slu-button {
    flex: 1 0 auto;
    margin-bottom: 0;
}

#searchInfo {
    padding-top: 30px;
}

#searchInfo .slu-accordion-item {
    border-color: var(--white-text);
}

#searchInfo .slu-accordion-heading button {
    color: var(--white-text);
    background-color: var(--primary-color);
}

#searchInfo .slu-accordion-heading button > span {
    margin-right: .5rem;
}

#searchInfo .slu-accordion-heading button.collapsed {
    background-color: transparent;
}

#searchInfo .slu-accordion-content {
    background-color: var(--main-bg-color);
    font-family: var(--slu-font-roboto);
    text-align: left;
}

.banner .slu-accordion-content {
    color: #212529;
    text-shadow: none;
}
.banner .slu-accordion-content h3 { color: var(--heading-color) }

#searchInfo p {
    font-family: var(--slu-font-roboto);
}

.search-categories {
    margin-bottom: 1rem;
}

/* select-dropdown select element styling based on https://moderncss.dev/custom-select-styles-with-pure-css/ */
.select-dropdown {
    background-color: var(--secondary-color);
    border-radius: var(--small-radius);
    color: var(--heading-color);
    cursor: pointer;
    display: inline-block;
    font-family: var(--slu-font-roboto);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.5;
    position: relative;
}

.select-dropdown:focus-visible {
    outline: var(--focus-outline);
    outline-offset: var(--focus-outline-offset);
}

.select-dropdown::after, .search-functions-dropdown button::after {
    border: none;
    content: "\f078";
    font-family: var(--font-awesome);
    font-weight: 400;
    pointer-events: none;
    position: absolute;
    top: 0.5rem;
    right: 1rem;
}

.select-dropdown select, .search-functions-dropdown button {
    appearance: none;
    border: none;
    color: inherit;
    cursor: inherit;
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
    margin: 0;
    outline: none;
    padding: .5rem 2.5rem .5rem 1rem;
}

.select-dropdown select {
    background-color: transparent;
    width: 100%;
}

.select-dropdown select::-ms-expand {
    display: none;
}

.select-dropdown select:focus-visible + .select-dropdown-focus {
    border: var(--focus-outline-blue);
    border-radius: inherit;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

/* search form within navbar */
nav .form-input {
    background-color: var(--main-bg-color);
    margin-left: 16px;
}

nav .search-button {
    background-color: var(--slu-havsvik);
    color: white;
    margin-right: 16px;
}

/* ADVANCED SEARCH */
.query-input-group {
    display: flex;
    margin-bottom: .5rem;
}

.query-input-group .select-dropdown:first-child {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.query-input-group .select-dropdown:last-of-type {
    border-bottom-left-radius: 0;
    border-top-left-radius: 0;
}
.query-input-group:last-child .select-dropdown:last-of-type { display: none }

.query-input-group .text-input { flex: 1 }
.query-input-group .text-input { font-family: var(--slu-font-roboto) }

.query-input-group .text-input input {
    border: none;
    padding-left: .5em;
    width: 100%;
    height: 100%;
}
.query-input-group .text-input input:focus-visible {
    outline: var(--focus-outline-blue);
    outline-offset: var(--focus-outline-offset);
}
.query-input-group .text-input input.is-invalid {
    background-color: pink;
    border: 1px solid red;
}
.query-input-group:last-child .text-input input {
    border-top-right-radius: var(--small-radius);
    border-bottom-right-radius: var(--small-radius);
}

.query-input-group button {
    background-color: transparent;
    border: none;
    color: white;
    font-size: 1rem;
    line-height: 0;
    padding: 0;
    margin-left: .825rem;
}
.query-input-group button:focus-visible {
    outline: none;
    color: var(--slu-kada);
}
#advancedFormTableBody.single .query-input-group button { display: none }

#addQuery {
    background-color: transparent;
    border: .125rem dashed rgba(var(--white-text-rgb), .625);
    border-radius: var(--small-radius);
    margin: 0 2.1875rem 1rem 0;
    padding: .375rem 0;
}
#addQuery:focus, #addQuery:hover {
    border-color: var(--white-text);
    text-decoration: underline;
}
#addQuery:focus-visible {
    outline: var(--focus-outline);
    outline-offset: var(--focus-outline-offset);
}
#advancedFormTableBody.single + #addQuery { margin-right: 0 }

/* autogrowing textarea
 * https://css-tricks.com/the-cleanest-trick-for-autogrowing-textareas/
 * replace when support for field-sizing is good enough. there's code in
 * search_advanced.php and search-advanced.js as well.
 */
.textarea-wrapper {
    display: grid;
    flex-grow: 1;
    font-family: var(--slu-font-roboto);
    font-size: 1.25rem;
    font-weight: 300;
}
.textarea-wrapper::after {
    content: attr(data-replicated-value);
    visibility: hidden;
    white-space: pre-wrap;
}
#queryString, .textarea-wrapper::after {
    border: none;
    font: inherit;
    grid-area: 1 / 1 / 2 / 2;
    padding: .563rem .625rem;
    width: 100%;
}
#queryString {
    border-radius: var(--medium-radius) 0 0 var(--medium-radius);
    overflow: hidden;
    resize: none;
}

/*#queryString {
    border: none;
    border-radius: var(--medium-radius) 0 0 var(--medium-radius);
    field-sizing: content;
    flex-grow: 1;
    font-family: var(--slu-font-roboto);
    font-size: 1.25rem;
    font-weight: 300;
    padding: 0.563rem 0.625rem;
    resize: none;
    width: 100%;
    min-height: 3rem;
}*/
#queryString:focus-visible {
    outline: var(--focus-outline);
    outline-offset: var(--focus-outline-offset);
}

#queryString.inactive {
    background-color: rgba(var(--slu-havsdjup-rgb), .5);
    color: var(--white-text);
    cursor: default;
}
#queryString.inactive:focus-visible { outline: none }

/* < sm */
@media screen and (max-width: 767px) {
    nav form {
        margin-top: 10px;
    }

    /* NAVBAR BOOTSTRAP OVERRIDE */
    .navbar > .container-fluid {
        padding-bottom: 10px;
    }

    .nav-item:first-child {
        margin-top: 10px;
    }

    .navbar .nav-link {
        padding-top: 6px;
        padding-bottom: 10px;
    }

    /* NAVBAR */
    .navigation {
        -webkit-transition: var(--default-transition);
        -moz-transition: var(--default-transition);
        -o-transition: var(--default-transition);
        transition: var(--default-transition);
    }

    .navigation.expanded { background-color: var(--secondary-color) }

    /* ADVANCED SEARCH */
    .query-input-group {
        display: grid;
        grid-template-columns: 1fr auto;
        grid-template-rows: 1fr 1fr 1rem 1fr;
        margin-bottom: 1rem;
    }
    .query-input-group:last-child, .query-input-group:only-child {
        grid-template-columns: 1fr;
        grid-template-rows: 1fr 1fr;
    }

    .query-input-group .select-dropdown:first-child {
        border-top-right-radius: var(--small-radius);
        border-bottom-left-radius: 0;
        grid-column-start: 1;
        grid-row-start: 1;
    }

    .query-input-group .text-input {
        grid-column-start: 1;
        grid-row-start: 2;
    }

    .query-input-group .text-input input {
        border-top-right-radius: 0                                  !important;
        border-bottom-right-radius: var(--small-radius);
        border-bottom-left-radius: var(--small-radius);
        border-top-left-radius: 0;
    }

    .query-input-group .select-dropdown:last-of-type {
        border-top-left-radius: var(--small-radius);
        border-bottom-left-radius: var(--small-radius);
        grid-column-start: 1;
        grid-row-start: 4;
    }

    .query-input-group .icon-button {
        grid-column-start: 2;
        grid-row-start: 1;
        grid-row-end: 3;
    }
}

/* >= md */
@media screen and (min-width: 768px) {
    /* TYPOGRAPHY */
    .text-column p.lead { font-size: 1.25rem }

    /* SEARCH INFO */
    .search-info {
        font-size: 3rem;
        margin-left: 1.25rem;
    }
    .search-info::before { vertical-align: unset }

    /* NAVBAR BOOTSTRAP OVERRIDE */
    .navbar {
        padding-top: 0;
        position: unset;
    }

    .navbar-expand-md .navbar-nav .nav-link {
        padding: 3px 1rem 5px 1rem;
    }

    .dropdown-menu {
        box-shadow: var(--default-box-shadow);
        min-width: unset;
        right: 0;
    }

    /* NAVBAR */
    .navigation { background-color: var(--secondary-color); }

    .external-links {
        font-size: 0.75rem;
        margin-top: 0;
        padding-top: 0.25rem;
        padding-right: 0.5rem;
        position: absolute;
        top: 0;
        right: 0;
    }

    .external-links li:not(:last-child)::after {
        color: var(--white-text);
    }

    .external-links li > a, .external-links li > a:visited {
        color: var(--white-text);
    }

    .external-links li > a:hover, .external-links li > a:focus {
        background-color: var(--main-bg-color);
        -webkit-box-shadow: -0.25rem 0px 0 var(--main-bg-color), 0.25rem 0px 0 var(--main-bg-color);
        -moz-box-shadow: -0.25rem 0px 0 var(--main-bg-color), 0.25rem 0px 0 var(--main-bg-color);
        box-shadow: -0.25rem 0px 0 var(--main-bg-color), 0.25rem 0px 0 var(--main-bg-color);
        color: black;
    }

    .navigation-items {
        margin-right: 10px;
        margin-left: 10px;
    }

    .breadcrumbs {
        font-size: .813rem;
        min-height: 1.75rem;
    }

    /* SEARCH */
    .search .search-info::before { vertical-align: unset }

    nav .form-input {
        font-size: 1rem;
        padding: 0.188rem 0.5rem;
    }

    nav .search-button {
        font-size: 1.25rem;
    }

    .advanced-button {
        padding-top: 0;
    }

    .advanced-button .slu-button {
        margin-left: 1rem;
    }

    .advanced-button.simple {
        align-items: start;
        margin-top: 0.125rem;
    }
}

/* >= lg */
@media screen and (min-width: 992px) {
    /* NAVBAR */
    .external-links {
        right: 16.66666667%;
    }
}

/* >= xxl */
@media screen and (min-width: 1400px) {
    /* NAVBAR */
    .external-links { right: 25% }

    .search-categories, .search-facets { margin-right: 1.5rem }
}

/* >= full hd */
@media screen and (min-width: 1920px) {
    .search-categories, .search-facets {
        margin-right: 1.5rem;
    }
}


/* below is a workaround for centering three col-3 elements in lg and xl viewport sizes */
@media screen and (min-width: 992px) and (max-width: 1399px) {
    .search-categories {
        /* 16.66666667% is Bootstrap standard*/
        padding-right: calc(16.66666667%);
        padding-left: calc(16.66666667%);
    }
}