:root {
    --banner-height: 4rem;
    /*--sidebar-height: fit-content;*/
    --main-margin: 1rem;
    --card-size: 12rem;
    --site-width: 291px;
    --navbar-height: 65px;
    --praksis-color-opaque: rgba(60, 162, 158, 0.3);
    --aktivitet-color-opaque: rgba(139, 173, 63, 0.3);
    --fokusomraade-color-opaque: rgba(55, 159, 203, 0.3);
    --technology-color-opaque: rgba(211, 151, 0, 0.3);
    --au-blue-default: rgb(0, 37, 70);
    --au-blue-default-opaque: rgba(0, 37, 70, 0.05);
    --au-blue-default-color: var(--au-blue-default);
    --au-blue-default-color-opaque: rgba(0, 37, 70, 0.05);
}

.collapsed {
    display: none;
}

* {
    box-sizing: border-box;
}

/* Overwriting Delphinus - course who needs that, amirite? */
p,
ul,
ol,
blockquote {
    max-width: 100% !important;
}

li {
    /* @TODO: This is Strapi - Does this change something somewhere else? */
    line-height: 2rem;
}

#content {
    padding: 0;
}

.page__content__wrapper {
    row-gap: 0;
}

body::before {
    display: none;
}

.wide {
    padding: 10px;
    width: 100%;
    max-width: 1400px;
    margin: auto;
}

.narrow {
    padding: 10px;
    width: 100%;
    max-width: 800px;
    margin: auto;
}

main {
    background: #fff;
    color: #000;
}

a {
    text-shadow: none !important;
}

html,
body,
.page,
#root,
.main-content {
    min-width: 0 !important;
    width: 100% !important;
}

/* Classes relevant for Navbar */
/* Navbar container */

/* conditionally set the navbar height to 0 when it is hidden */
body.navbar--hidden {
    --navbar-height: 0px;
}

.page__header {
    position: sticky;
    top: 0;
    z-index: 6;
}

.page__header.header--hidden {
    z-index: 0;
    pointer-events: none;
    transition: z-index 0.1s ease-in 0.3s;
}

.navbar {
    transition: transform 0.3s;
}

.navbar.navbar--hidden {
    transform: translateY(-100%);
    transition: transform 0.35s ease;
    pointer-events: none;
}

/* use this for sticky elements that should follow the navbar animations */
.sticky-below-navbar {
    position: sticky !important;
    top: var(--navbar-height);
    transition: top 0.3s ease;
}

.sticky-below-navbar.sidebar-bottom {
    top: calc(var(--navbar-height) + 2rem);
}

.navbar-notification-dropdown {
    margin-right: var(--spacing-side) !important;
    position: absolute;
    top: 68px;
    right: 20px;
    background: white;
    border: 1px solid black;
    color: black;
    min-width: 200px;
    padding: 1rem;
    box-shadow: 0 10px 24px rgba(1, 62, 77, 0.12);
    z-index: 1005;
}

.burger-menu-container {
    position: relative;
    margin-left: auto;
    padding-right: var(--spacing-side);
}

.burger-icon {
    display: flex;
    flex-direction: column;
    cursor: pointer;
    width: 32px;
    height: 32px;
    justify-content: center;
    align-items: center;
    margin-left: 1rem;
}

.burger-icon span {
    display: block;
    height: 3px;
    width: 28px;
    background: var(--color-foreground);
    margin: 3px 0;
    border-radius: 2px;
    transition: all 0.3s;
}

#burger-toggle:checked + .burger-icon span {
    margin: 1px 0;
}

.burger-menu {
    display: none;
    position: fixed;
    top: 58px;
    left: 0;
    right: 0;
    background: #fff;
    color: #013e4d;
    min-width: 320px;
    max-width: 99.999vw;
    padding-top: 1rem;
    padding-bottom: 2rem;
    box-shadow: 0 10px 24px rgba(1, 62, 77, 0.12);
    z-index: 1005;
}

.burger-grid {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 2rem;
}

.burger-icon {
    width: 24px;
    height: 24px;
    margin: 0;
}

.burger-col {
    min-width: 200px;
    flex-shrink: 2;
}

.burger-col-themes {
    min-width: 160px;
}

.burger-col-themes.burger-col {
    flex-grow: 2;
}

.burger-group {
    margin-top: 0.5rem;
}

.burger-link {
    color: #013e4d;
    text-decoration: none;
    font-weight: 500;
    font-size: var(--font-size-0);
    transition: color 0.2s;
}

.burger-li {
    margin-bottom: 0.5rem;
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    gap: 0.5rem;
    cursor: pointer;
}

.burger-li:hover {
    color: #007c92;
    text-decoration: underline;
}

.themes-list {
    display: flex;
    flex-direction: row;
    gap: 3rem;
    flex-wrap: wrap;
}

.burger-theme-icon {
    width: var(--font-size-0);
    height: var(--font-size-0);
    margin: 0;
}

.top-padding {
    padding-top: 4rem;
}

/* Classes relevant for navigatable sidebar */

.icon-collapse {
    transform: rotate(90deg);
    transition: transform 0.5s cubic-bezier(0.455, 0.03, 0.515, 0.955);
}

.nav-group:hover .icon-collapse,
.icon-collapse.rotated {
    transform: rotate(540deg);
    transition: transform 0.2s ease-in-out;
}

.nav-item {
    display: flex;
    flex-direction: column;
    font-size: var(--font-size-m1);
    padding: 0 0.5rem;
    border-radius: 4px;
    font-weight: normal;
    text-decoration: none;
    width: fit-content;
}

.nav-item-active {
    transition: font-weight 0.1s ease-in;
    font-weight: bold;
}

.nav-item-line {
    border: 0 solid black;
    width: 0;
}
.nav-item-line-active {
    position: relative;
    top: -6px;
    border-top: 1px solid black;
    width: 100%;
    transition: width 0.3s ease-in-out;
}

/* Classes relevant for HomePage */

.educhat-container {
    position: fixed;
    background-color: white;
    bottom: 5%;
    right: 5%;
    width: fit-content;
    max-width: 600px;
    z-index: 1000;
}

.educhat-container.chat-closed {
    height: 65px;
    width: 65px;
}

.educhat-messages-container {
    overflow-y: auto;
    max-height: 500px;
    min-width: 400px;
}

.home-banner {
    position: relative;
    max-width: 100%;
    height: 350px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.home-image {
    width: 100%;
    height: 350px;
    object-fit: cover;
    object-position: 50% 15%;
    position: absolute;
    top: 0;
    opacity: 40%;
}

.home-banner::after {
    content: "";
    width: 100%;
    position: absolute;
    top: 0;
    background: var(--au-blue-default); /* <-- blue tint, adjust color/opacity */
    opacity: 0.7;
    pointer-events: none;
    z-index: 2;
    height: 350px;
}

.fade-out-banner {
    animation: fadeOut 0.8s ease-in-out forwards;
}
@keyframes fadeOut {
    0% {
        opacity: 40%;
    }
    100% {
        opacity: 0;
    }
}

.fade-in-banner {
    animation: fadeIn 0.8s ease-in-out forwards;
}
@keyframes fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 40%;
    }
}

.search-bar-home {
    position: relative;
}

.search-bar-home input {
    width: 300px;
    height: 40px;
    padding: 5px;
}

.home-header-h2 {
    color: var(--au-blue-default);
    opacity: 0.7;
    font-weight: normal !important;
    text-align: center;
    margin-top: 0;
}

.home-block {
    padding: 4rem 0 6rem 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    gap: 2rem;
}

.home-block.block-colored {
    background-color: var(--au-blue-default-opaque);
}

.home-textbox {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 750px;
    margin: 0 auto;
    gap: 2rem;
    text-align: center;
}

.home-teaser {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    row-gap: 4rem;
    align-items: center;
    margin: 0 auto;
}

.home-teaser-icons {
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    align-items: flex-end;
    width: 370px;

    gap: 7rem 1rem;
}

.home-teaser-link:hover {
    box-shadow: 0 1px 2px grey;
    filter: brightness(99%);
    transition:
        box-shadow 0.2s ease,
        backdrop-filter 0.2s ease;
}

/*/ Classes relevant for AllContentsPage */

.all-contents-page {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
}

/* @TODO: Are "slides" and "slider" used for both cards and themes?? */
.content-slides {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: space-between;
    margin: 0 auto;
}

.content-slides--footer {
    margin: 2rem auto 0 auto;
    position: relative;
}

.footer-circle {
    border-radius: 50%;
    background: #013e4d;
    display: inline-block;
    transition:
        opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1),
        width 0.3s cubic-bezier(0.4, 0, 0.2, 1),
        height 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    width: 10px;
    height: 10px;
    opacity: 0.5;
}

.footer-circle.active {
    opacity: 1;
    width: 14px;
    height: 14px;
}

.content-slides--link:hover {
    text-decoration: underline 1px grey;
}

.content-slides--link {
    margin-left: 0.2rem;
}

.component-wrapper {
    width: var(--site-width);
    margin: 2rem auto;
}

.component-wrapper--no-margin {
    width: var(--site-width);
    margin: 0 auto;
}

/* Classes relevant for filterPage */

.filter-banner {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.slider-mobile {
    display: flex;
    width: 100vw;
    max-width: 100vw;
    padding: 1rem 3rem 1rem 3rem;
    margin: 0;
    gap: 0.5rem;
    flex-direction: row;
    overflow-x: auto;
    white-space: wrap;
    scrollbar-width: auto;
    justify-content: flex-start;
    align-items: center;
    -ms-overflow-style: none;
    position: relative;
    left: 50%;
    transform: translateX(-51%);
}

.slider-fade {
    mask-image: linear-gradient(
        to right,
        transparent 0%,
        black 10%,
        black 90%,
        transparent 100%
    );
    -webkit-mask-image: linear-gradient(
        to right,
        transparent 0%,
        black 10%,
        black 90%,
        transparent 100%
    );
}

.slider-mobile::-webkit-scrollbar {
    display: none; /* Chrome/Safari */
}

.theme-icon-container {
    flex: 0 0 auto; /* Prevent shrinking, allow horizontal scroll */
}
.theme-icon-container,
.tech-icon-container {
    overflow: visible;
    position: relative;
}

.theme-icon {
    width: 60px;
    height: 60px;
    margin: 0.2rem;
    transition:
        width 0.2s ease-in-out,
        height 0.2s ease-in-out;
}

.theme-icon-container:hover > .theme-icon,
.tech-icon-container:hover > .tech-selector-icon {
    transform: scale(1.15); /* ~15% larger; tweak as needed */
    z-index: 5; /* bring above neighbors */
    filter: none; /* or any hover filter you use */
}

.theme-icon,
.tech-selector-icon {
    /* keep a fixed base size (so layout is stable) */
    width: 60px; /* adjust to your desired base size */
    height: 60px;
    object-fit: contain;
    transition:
        transform 0.2s ease,
        filter 0.2s ease;
    transform-origin: center center;
    will-change: transform;
    backface-visibility: hidden;
    /* promote to its own layer for smoother animation */
    transform: translateZ(0) scale(1);
}

.theme-button {
    background-color: white;
    color: black;
    padding: 5px 0;
    margin: 0.2rem 0;
    font-size: var(--font-size-m1);
    hyphens: auto;
    max-width: 175px;
}

.active-theme {
    text-shadow: 0px 5px 10px rgb(157, 157, 157);
    font-weight: bold;
}

.triangle-btn-container {
    position: relative;
    text-align: center;
    hyphens: auto;
    word-break: break-word;
    overflow: visible;
    max-height: 70px;
    width: 130px;
}
/* classes for a triangle indicator under theme buttons - currently not in use 
.triangle-btn {
    z-index: 100;
}

.triangle-hr {
    margin: 20px auto 0 auto;
    width: 100%;
    position: relative;
}
    

.triangle {
    position: absolute;
    left: 50%;
    top: 100%;
    transform: translateX(-50%) translateY(15px) scaleY(0);
    border-left: 15px solid transparent;
    border-right: 15px solid transparent;
    
    border-top: 5.5px solid transparent; 
    transition: transform 0.15s ease-in-out;
    pointer-events: none;
}
    

.triangle-btn:hover + .triangle,
.triangle-btn:focus-visible + .triangle,
.theme-icon-container:hover .triangle,
.theme-icon-container:focus-within .triangle {
    transform: translateX(-50%) translateY(5px) scaleY(1);
}*/

.theme-icon-container:hover .theme-button {
    transition: all 0.2s ease-in-out;
    text-shadow: 0px 5px 10px rgb(157, 157, 157);
}

.tag-cloud {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    color: white;
    max-height: 0;
    overflow: visible;
    opacity: 0;
    transition:
        max-height 0.6s ease,
        padding 0.4s ease,
        opacity 0.4s ease;
}

/* Modify expanded class to work with grid transitions */
.tag-cloud.expanded {
    padding: 2.5rem 0;
    max-height: none; /* Let grid handle the height */
    opacity: 1;
}

#tag-cloud-triangle-top,
#tag-cloud-triangle-bottom {
    width: 10px;
    height: 10px;
    border-left: 25px solid transparent;
    border-right: 25px solid transparent;
    border-bottom: none;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

#tag-cloud-triangle-top {
    top: -1px;
    border-top: 20px solid white;
}

#tag-cloud-triangle-bottom {
    bottom: -20px;
    border-top: 20px solid var(--color-theme-partial);
}

.tag-list {
    max-width: 896px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    overflow: hidden;
    gap: 0.4rem;
}

.tag-list-left {
    justify-content: flex-start !important;
    margin-top: 1rem;
}

.fade-in.expand {
    animation:
        tagCloudFadeIn 0.4s ease-in forwards,
        tagCloudExpand 0.3s ease-in forwards;
}

.fade-in {
    animation: tagCloudFadeIn 0.4s ease-in forwards;
}

.expand {
    animation: tagCloudExpand 0.2s ease-in forwards;
}

@keyframes tagCloudFadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@keyframes tagCloudExpand {
    0% {
        max-height: 0;
        padding: 0;
    }
    75% {
        max-height: 200px;
    }
    100% {
        max-height: fit-content;
        padding: 2.5rem 0;
    }
}

.page--header-tags {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    /* gap: 0.4rem; /* Optional: adds space between tags */
}

.page--header-tagbutton {
    margin: 0.2rem;
    padding: 0px 10px;
    border-radius: 100px / 100px;
    font-size: var(--font-size-m1);
    white-space: nowrap; /* Avoid tag spanning multiple lines */
}

.tag-button {
    background-color: white;
    margin: 0.2rem;
    padding: 5px 10px;
    border-radius: 100px / 100px;
    font-size: var(--font-size-m1);
    white-space: nowrap; /* Avoid tag spanning multiple lines */
}

.tag-button:hover {
    box-shadow: 0 0 2px grey;
    filter: brightness(95%);
    transition:
        box-shadow 0.2s ease,
        backdrop-filter 0.2s ease;
}

.tag-button-selected {
    color: white !important;
    box-shadow: 0 0 2px black;
    text-shadow: 2px 2px 5px grey;
}

.filterContainer {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
}

.filters {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: top;
    margin: 0 var(--main-margin) 1rem var(--main-margin);
}

.filter-toggle-icon {
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 100%/100%;
    height: 25px;
    width: 25px;
    font-weight: normal !important;
}

.search-container {
    display: flex;
    background-color: white;
    z-index: 3;
    flex-direction: column;
    justify-content: space-between;
    gap: 1rem;
    position: sticky;
    width: 100%;
    padding: 2rem 0 2rem 0;
    font-size: var(--font-size-m1);
}

.search-container input {
    height: 27px;
}

select:focus,
input:focus {
    outline: none;
}
input::placeholder {
    color: grey;
    opacity: 1;
}

/* Classes relevant for TechPage */

.header-with-lines {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin: 6rem auto 2rem auto;
    width: 100%;
}
.header-with-lines h2 {
    margin: 0;
    white-space: nowrap;
}
.header-with-lines-p {
    text-align: center;
    margin: 2rem auto 4rem auto;
}

.line-header {
    border-top: 2px solid var(--color-theme);
    width: 100%;
}
.tech-selector-slider {
    margin: 2rem auto;
}

.tech-selector-icon {
    filter: opacity(60%);
}

.tech-selector-icon-active {
    filter: opacity(100%);
}

.two-column-layout {
    display: grid;
    grid-template-rows: auto 1fr;
}

.sidebar-top {
    height: fit-content;
}

/* Horizontal design - used on techselector */
.theme-selector-one-row {
    display: flex;
    flex-direction: row;
    gap: 1rem;
    flex-wrap: nowrap;
    justify-content: space-around;
    margin: 0 auto;
    align-items: center;
    width: var(--site-width);
    max-width: 1000px;
}

.sidebar {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 0.5rem;
}

.sidebar-scrollable {
    overflow-y: auto;
    overflow-x: clip;
    max-height: calc(100vh - var(--navbar-height) - 2rem);
}

.sidebar-button {
    color: black;
    justify-content: left;
}

.sidebar-button:hover {
    background-color: var(--color-theme-hover) !important;
}

.search-dropdown-item {
    font-size: var(--font-size-m1);
    padding-top: 4px;
    padding-left: 8px;
    cursor: pointer;
    text-align: left;
    color: black;
    overflow: visible;
    z-index: 1000;
}

/* Classes for ContentSection used in TechPage and CasePage */
.section-title {
    margin-top: 0;
}

.content-section {
    margin-bottom: 80px;
}

/* Classes relevant for praksisPage */
/* Defines the grid layout */
.main-content {
    display: grid;
    grid-template-areas:
        "image"
        "main"
        "right"
        "links" !important;
    width: 100%;
    max-width: var(--site-width);
    /*width: */
    margin: auto;
    height: fit-content;
}
.default-content-colors {
    --color-theme: rgb(0, 37, 70);
    --color-theme-partial: rgba(0, 37, 70, 0.05);
    --color-theme-border: rgba(0, 37, 70, 0.2);
}

.case-content-colors {
    /* based on turquoise */
    /* Specific for our setup */
    --color-theme-partial: rgba(0, 171, 164, 0.4);
    --color-theme-light: rgba(0, 171, 164, 0.1);

    /* These overwrites works on Delphinus components,
    they are equivalent to setting a Delphinus theme */
    --color-border-theme: rgb(0, 171, 164);
    --color-theme: rgb(0, 171, 164);
    --color-theme-foreground: rgb(10, 10, 10);
    --color-theme-shadow: rgba(0, 0, 0, 0.4);
    --color-theme-hover: #009b95;
}

.article-content-colors {
    /* based on cyan */
    /* Specific for our setup */
    --color-theme-partial: rgba(55, 160, 203, 0.4);
    --color-theme-light: rgba(55, 160, 203, 0.1);

    /* These overwrites works on Delphinus components,
    they are equivalent to setting a Delphinus theme */
    --color-border-theme: rgb(55, 160, 203);
    --color-theme: rgb(55, 160, 203);
    --color-theme-foreground: rgb(10, 10, 10);
    --color-theme-shadow: rgba(0, 0, 0, 0.4);
    --color-theme-hover: rgb(50, 145, 183);
}

.activity-content-colors {
    /* based on cyan */
    /* Specific for our setup */
    --color-theme-partial: rgba(127, 157, 57, 0.4);
    --color-theme-light: rgba(127, 157, 57, 0.1);

    /* These overwrites works on Delphinus components,
    they are equivalent to setting a Delphinus theme */
    --color-border-theme: rgb(139, 173, 63);
    --color-theme: rgb(127, 157, 57);
    --color-theme-foreground: rgb(10, 10, 10);
    --color-theme-shadow: rgba(0, 0, 0, 0.4);
    --color-theme-hover: rgb(127, 157, 57);
}

.technology-content-colors {
    /* based on cyan */
    /* Specific for our setup */
    --color-theme-partial: rgba(250, 187, 0, 0.4);
    --color-theme-light: rgba(250, 187, 0, 0.1);

    /* These overwrites works on Delphinus components,
    they are equivalent to setting a Delphinus theme */
    --color-border-theme: #fabb00;
    --color-theme: rgb(250, 187, 0);
    --color-theme-foreground: rgb(10, 10, 10);
    --color-theme-shadow: rgba(0, 0, 0, 0.4);
    --color-theme-hover: rgb(228, 171, 0);
}

/* Her starter beskrivelsen af image-området */

/* @TODO: Change this to something less generic!! */
/* I think ".image" refers to Banner, but I have duplicated for ArticlePage + CasePage */
.image {
    grid-area: image;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 250px;
    width: 100%;
    border-bottom: 2px solid var(--color-theme);
}

.top-image {
    opacity: 40%;
    width: 100%;
    height: 250px;
    object-fit: cover;
    object-position: 50% 15%;
}

.image-overlay {
    display: flex;
    position: absolute;
    flex: wrap;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    text-align: center;
    margin: 1rem auto;
    max-width: 60%;
    height: 250px;
    z-index: 3;
}

.image-overlay p {
    font-size: var(--font-size-p1);
}

.image-tagline {
    font-weight: bold;
    margin: auto var(--main-margin);
}

.image-icon-nav {
    width: calc(var(--font-size-p2) * 1);
    height: auto;
}

.image-icon-small {
    width: calc(var(--font-size-p3) * 1.2);
    height: auto;
}

.image-icon-medium {
    width: 8rem;
    height: auto;
}

.image-icon-large {
    width: 14rem;
    height: auto;
}

/* Basisinformation */
.basisinfo div {
    line-height: normal;
    padding: 5px 0px;
    font-size: var(--font-size-m1);
}

/* Her starter beskrivelsen af sidebar-området */
.sidebar-box {
    grid-area: right;
    /*height: var(--sidebar-height);*/
    color: white;
    font-size: var(--font-size-m1);
    overflow-y: auto;
    overflow-x: clip;
    height: 90vh;
    /*margin-bottom: 10px;
  max-width: 425px !important;*/
}

.sidebar-box-inner {
    padding: 1rem;
}

.sidebar--image-reg {
    margin: 0 auto;
    max-width: 150px;
    max-height: auto;
}

.sidebar-top {
    grid-area: sidebar-top;
}

.sidebar-bottom {
    grid-area: sidebar-bottom;
}

.content-column {
    grid-area: content-column;
}

/* SidebarGroup styles */
.sidebar-group {
    margin-bottom: 1rem;
}

.sidebar-group-header {
    margin-bottom: 0.5rem;
    font-weight: bold;
}

.sidebar-group-content {
    padding-bottom: 0.5rem;
}
/* SidebarItem styles */
.sidebar-item {
    margin: 0.25rem 0;
}

.clicky-boxes {
    display: flex;
    flex-wrap: wrap;
    justify-content: left;
    align-items: center;
    margin-top: 10%;
}
.button-box {
    margin: 1%;
    background-color: white;
    color: var(--color-theme);
    padding: 2.7px 12px;
    border-radius: 8% / 50%;
}

.button-box:hover {
    background-color: #c7d2fe;
}

.teacher-img {
    border-radius: 50%;
    object-fit: scale-down;
    width: 80%;
    height: auto;
}
.img-cell {
    width: 40%;
}
.img-row {
    display: flex;
    justify-content: center;
    align-items: center;
}
.material-list {
    line-height: 1.5rem;
    margin-left: 2.5%;
    margin-bottom: 20px;
    margin-top: 10px;
}

/* Her starter beskrivelsen af main-området (brødtekst) */
.main-text {
    grid-area: main;
    margin: 0 var(--main-margin) 0 var(--main-margin);
    position: relative;
    z-index: 0;
    text-align: justify;
    max-width: 409px !important;
}

/* Her starter beskrivelsen af området fra divideren efter brødtekst */

.main-text > hr:first-of-type {
    margin-top: 50px;
}

.links-divider {
    border: 2px solid var(--color-theme);
    width: auto;
    margin: 25px auto;
}

/* Her starter beskrivelsen af links-området */
.links {
    /*grid-area: links;*/
    background-color: var(--color-theme);
    color: white;
    padding-bottom: 10px;
    padding-top: 1px;
    text-align: center;
    justify-items: center;
    /*max-width: 425px !important;*/
}

.links-tags {
    margin: 20px auto;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.links-tags > .tag-button {
    background: white;
    color: var(--color-theme);
    cursor: pointer;
    padding: 0px 10px;
}

.links-box-inner {
    margin: 0 calc(0.5 * var(--main-margin));
    padding: 0.5rem calc(0.5 * var(--main-margin));
    /*background-color: white;*/
    color: black;
    width: calc(100% - 2 * var(--main-margin));
}

.links-box-inner > h3 {
    text-align: left;
    display: flex;
    justify-content: space-between;
    flex-direction: row;
}

.toggle_open::after {
    content: "+";
    font-size: 18px;
    margin-right: 0.5rem;
}

.toggle_close::after {
    content: "-";
    font-size: 18px;
    margin-right: 0.5rem;
}

/* Responsivitet */
/* alt større end en mobilenhed på 425px */

@media (min-width: 426px) {
    :root {
        --card-size: 14rem;
        --main-margin: 2rem;
        --site-width: 80%;
    }

    /* NavBar */

    .burger-menu {
        padding-right: var(--spacing-side);
        top: 64px;
    }

    .navbar-notification-dropdown {
        right: 250px;
    }

    /* HomePage */
    .home-banner,
    .highlights {
        /*max-width: 769px;*/
        overflow: visible;
    }

    .search-bar-home input {
        width: 400px;
        height: 50px;
        padding: 8px;
    }

    .home-teaser-icons {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 1fr 1fr;
        width: auto;

        gap: 7rem 1rem;
    }

    /* AllContentsPage */

    .component-wrapper {
        margin: 3.5rem auto;
    }

    .slider-mobile {
        padding-left: 5rem;
        padding-right: 5rem;
    }

    /* filterPage */

    .filter-banner {
        flex-direction: row;
        justify-content: left;
        align-items: center;
    }

    .filterContainer {
        display: grid;
        align-items: start;
        justify-content: start;
        grid-template-areas:
            "search search"
            "filters cards";
        grid-template-columns: 190px fit-content;
        grid-template-rows: 50px fit-content;
        column-gap: 1rem;
    }

    .search-container {
        grid-area: search;
        background-color: white;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        padding: 2rem 0 2rem 0;
    }

    .filters-parent {
        grid-area: filters;
        position: sticky !important;
        max-width: 190px;
        top: calc(var(--navbar-height) + 4rem + 31px);
        transition: top 0.3s ease;
    }

    .filters {
        display: flex;
        flex-direction: column;
        margin-left: 1rem;
        background-color: white;
        gap: 0.5rem;
        margin: 0;
    }

    .filter-toggle {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        margin-top: 0.5rem;
        width: 190px;
    }

    .filter-section {
        display: flex !important;
        flex-direction: column;
        align-items: flex-start;
        font-size: var(--font-size-m1);
        overflow-y: auto;
        max-height: 300px;
        margin-bottom: 1rem;
    }

    .filter-selected-container {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        font-size: var(--font-size-m1);
        justify-content: flex-start;
        align-items: flex-start;
        row-gap: 0.5rem;
        line-height: 1 !important;
        margin-bottom: 2rem;
    }

    .filter-selected {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        color: white;
        padding: 2px 4px 2px 8px;
        margin: 0 0.2rem;
        border-radius: 100px / 100px;
        height: fit-content;
    }

    /* Custom filled checkbox used in filters */
    .filters label input[type="checkbox"],
    .filter-section label input[type="checkbox"] {
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        width: 18px;
        height: 18px;
        border: 2px solid #c0c0c0;
        border-radius: 4px;
        background: #fff;
        display: inline-block;
        vertical-align: middle;
        margin-right: 0.5rem;
        cursor: pointer;
        transition:
            background-color 0.12s ease,
            border-color 0.12s ease,
            box-shadow 0.12s ease;
        position: relative;
    }

    .load-more-button-container {
        max-width: calc(14rem * 1.4); /* Previously --card-size=14rem */
    }

    .load-more-button {
        width: calc(14rem * 1.4); /* Previously --card-size=14rem */
        text-align: left;
    }

    /* Praksispage */
    .main-content {
        display: block;
        height: fit-content;
        margin-bottom: 80px;
        width: 100%;
        max-width: var(--site-width);
    }

    .image-text {
        width: 50%;
    }

    .main-text {
        margin: 0 var(--main-margin);
        position: relative;
        float: none;
        word-wrap: break-word;
    }
    /*
  .right-margin-box {
    float: right;
    position: relative;
    z-index: 1;
    margin-bottom: var(--main-margin);
    margin-left: calc(1*var(--main-margin));
    width: 35%;
  }
  */

    .links {
        padding-bottom: 50px;
        max-width: none !important;
    }
}

/* alt større end tablet på 768px */

@media (min-width: 769px) {
    :root {
        --main-margin: 4rem;
        --site-width: 670px;
    }

    /* Navbar */
    .burger-menu {
        top: 69px;
    }

    /* AllContentsPage */

    .theme-selector {
        width: var(--site-width);
        max-width: 1100px;
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        grid-auto-rows: auto;
        justify-content: space-evenly;
        align-items: center;
        margin: 0 auto;
        overflow: hidden;
        row-gap: 2rem;
    }

    .selector-with-cloud {
        padding: 0 0 2rem 0;
    }

    /* TechPage */

    .tech-icon-container {
        max-width: 120px;
        width: calc((var(--site-width) - 6rem) / 6);
    }

    /* Praksispage */

    .main-text {
        max-width: none !important;
    }

    p {
        line-height: 2rem;
    }

    .icon-wrap {
        padding: 0 1.5rem;
    }
}

/* alt større end tablet på 1024px */
@media (min-width: 1025px) {
    :root {
        --card-size: 12rem;
        --main-margin: 4rem;
        --site-width: 861px;
    }

    /* HomePage */

    /* filterPage */

    .triangle-btn-container {
        width: 175px;
    }

    .theme-button {
        font-size: calc(var(--font-size-0) * 0.9);
    }

    .filterContainer {
        grid-template-columns: 230px 1fr;
        column-gap: 5.3rem;
    }

    .filters-parent {
        max-width: 230px;
    }

    .filter-toggle {
        width: 230px;
    }

    .load-more-button-container {
        max-width: calc(12rem * 1.4 * 2 + 0.5rem); /* Previously --card-size=12rem */
    }

    .load-more-button {
        width: calc(12rem * 1.4 * 2 + 0.5rem); /* Previously --size-card=12rem */
        text-align: center;
    }

    /* Praksispage */

    .links-box-inner {
        padding: 0.5rem calc(0.2 * var(--main-margin));
        margin: 30px auto;
        width: 100%;
        max-width: 900px;
    }
}

@media (min-width: 1400px) {
    :root {
        --card-size: 13rem;
        --main-margin: 10rem;
        --site-width: 1200px;
    }

    /* Navbar */
    .burger-grid {
        display: grid;
        gap: 7rem;
        grid-template-columns: 4fr 1fr 1.5fr;
        padding-right: calc(50vw - 52.875rem + var(--spacing-side));
    }

    /* FilterPage */

    .filterContainer {
        column-gap: 5rem;
    }

    .load-more-button-container {
        max-width: calc(
            13rem * 1.4 * 3 + 0.5rem * 2
        ); /* Previously --card-size=13rem */
    }

    .load-more-button {
        width: calc(13rem * 1.4 * 3 + 0.5rem * 2); /* Previously --card-size=13rem */
    }
}

/* alt større end desktop på 2000px */
@media (min-width: 2000px) {
    :root {
        --card-size: 17rem;
        --main-margin: 12rem;
        --site-width: 1600px;
    }

    /* AllContentsPage */

    /* filterPage */

    /* tagcloud animations - not currently used */

    /*
  .fade-in.expand {
    animation: tagCloudFadeIn 0.7s ease-in forwards, tagCloudExpand 0.2s ease-in forwards;
  }

  .fade-in {
    animation: tagCloudFadeIn 0.4s ease-in forwards;
  }

  .expand {
    animation: tagCloudExpand 0.4s ease-in forwards;
  }

  @keyframes tagCloudFadeIn {
    0% { opacity: 0; }
    75% { opacity: 0.5; }
    100% { opacity: 1; }
  }

  @keyframes tagCloudExpand {
    0% { max-height: 0;}
    75% { max-height: 200px; }
    100% { max-height: 1000px;}
  }
*/
}