:root {
    /* The defaults of a portal without a company theme. With one, ThemeHelper's Mapping writes over each of these;
       the comment on each says with what. */

    /* Top bar */
    --color-topbar: #ffffff;                     /* theme: HeaderTextColor (readable on Topbjælke) */
    --color-topbar-background: #555555;          /* theme: HeaderBackgroundColor (Topbjælke) */

    /* Primary: the theme's one primary colour, and the text on it */
    --color-primary: #5896ab;                    /* theme: PrimaryColor (Primær): buttons, icons, links */
    --color-on-primary: #ffffff;                 /* theme: PrimaryContrastColor ("Tekst på primær"): text and icons ON Primary */
    --color-primary-border: #0d69aa;             /* theme: PrimaryColor */
    --color-primary-hover: #4691ab;              /* theme: PrimaryHoverColor (Primær, darkened) */

    /* Accent: the theme's second colour, and the text on it */
    --color-accent: #cfba89;                     /* theme: AccentColor (Accent): secondary buttons */
    --color-on-accent: #111111;                  /* theme: readable text on AccentColor */
    --color-accent-border: #cfba89;              /* theme: AccentColor */
    --color-accent-hover: #a58b5e;               /* theme: AccentColor, darkened */

    /* Page, cards and tables */
    --color-icon: #888888;                       /* theme: MutedColor */
    --color-background: #f5f5f5;                 /* theme: PageBackgroundColor */
    --color-surface: #ffffff;                    /* theme: SurfaceColor: cards and buttons */
    --color-booking-card-background: #f2f2f2;    /* theme: 6% Text mixed into Surface (as --color-panel) */
    --color-table-header-background: #dddddd;    /* theme: 13% Text mixed into Surface */
    --color-table-body-background: #f2f2f2;      /* theme: 6% Text mixed into Surface (as --color-panel) */

    /* Only in the theme; a portal without one uses these */
    --color-panel: #f2f2f2;                      /* theme: 6% Text mixed into Surface: hover, panels, modal footers */
    --color-divider: #eeeeee;                    /* theme: BorderColor: lines between rows */
    --color-focus: #258cfb;                      /* theme: FocusColor: the focus ring */

    /* Not in the theme: the soft shadow under the white boxes (surface-card, stay-card, stay-group) */
    --shadow-card: 0 1px 2px rgba(16, 24, 40, 0.06), 0 2px 8px rgba(16, 24, 40, 0.04);
}


html, body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    background-color: var(--color-background);
}

h1:focus {
    outline: none;
}

/* The company theme's heading font; inherit without one. */
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6, .page-title {
    font-family: var(--font-heading, inherit);
}

a, .btn-link {
    color: #0071c1;
}

.btn-primary {
    color: var(--color-on-primary) !important;
    background-color: var(--color-primary) !important;
    border-color: var(--color-primary-border) !important;
    box-shadow: none !important;
}


.btn.btn-primary:hover {
    background-color: var(--color-primary-hover) !important;
    border-color: var(--color-primary-border) !important;
}

.btn-secondary {
    color: var(--color-on-accent) !important;
    background-color: var(--color-accent) !important;
    border-color: var(--color-accent) !important;
    min-height: 44px;
    box-shadow: none !important;
    font-size: 16px !important;
}

.btn.btn-secondary:hover {
    background-color: var(--color-accent-hover) !important;
}

/* The company theme's button radius; Bootstrap's own without one. body: app.css loads before Bootstrap. */
body .btn {
    border-radius: var(--radius-button, var(--bs-btn-border-radius));
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem var(--color-focus);
}

.content {
    background-color: var(--color-background);
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    padding: 0px !important;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid red;
}

.validation-message {
    color: red;
}

#blazor-error-ui {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.install-banner {
    z-index: 9999;
    min-width: 320px;
    background: rgba(255,255,255,0.85);
    backdrop-filter: blur(12px);
    border: 0.5px solid rgba(0,0,0,0.12);
    /* border-radius: 16px; */
    border-radius: var(--radius-corner, 16px);
    box-shadow: 0 8px 32px rgba(0,0,0,0.12);
}

.install-banner-icon {
    width: 44px;
    height: 44px;
    /* background: #1f2937; */
    background: var(--color-primary);
    /* border-radius: 10px; */
    border-radius: var(--radius-control, 10px);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: Georgia, serif;
    font-weight: 700;
    font-size: 24px;
    /* color: white; */
    color: var(--color-on-primary);
}

.install-button {
    position: relative;
    padding: 10px 20px;
    /* background: #1f2937; */
    background: var(--color-primary);
    /* color: white; */
    color: var(--color-on-primary);
    border: none;
    /* border-radius: 8px; */
    border-radius: var(--radius-button, 8px);
    cursor: pointer;
    font-size: 16px;
}

.loading-progress {
    position: relative;
    display: block;
    width: 8rem;
    height: 8rem;
    margin: 20vh auto 1rem auto;
}

    .loading-progress circle {
        fill: none;
        stroke: #e0e0e0;
        stroke-width: 0.6rem;
        transform-origin: 50% 50%;
        transform: rotate(-90deg);
    }

        .loading-progress circle:last-child {
            stroke: #1b6ec2;
            stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%;
            transition: stroke-dasharray 0.05s ease-in-out;
        }

.loading-progress-text {
    position: absolute;
    text-align: center;
    font-weight: bold;
    inset: calc(20vh + 3.25rem) 0 auto 0.2rem;
}

    .loading-progress-text:after {
        content: var(--blazor-load-percentage-text, "Loading");
    }

code {
    color: #c02d76;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}

.drop-shadow {
    box-shadow: 3px 3px 10px 0px rgba(150, 150, 150, 0.4);
}

.container-wrapper {
    position: relative;
    margin: 0 auto;
    /* Old design: padding 16px 36px, a white box (--color-surface) and 10px between the boxes. Now the boxes are only
       a width: one page background behind everything, and the same 12px between every block. */
    /* padding: 16px 36px 16px 36px; */
    padding: 0 36px;
    /* background-color: var(--color-surface); */
    background-color: transparent;
    width: 100%;
    max-width: 900px;
    /* margin-bottom: 10px; */
    margin-bottom: 12px;
}

    /* The first block under the top bar */
    .top-bar + .container-wrapper {
        margin-top: 12px;
    }

    /* Old design: .drop-shadow on the white box. The box is gone, so the shadow goes with it. */
    .container-wrapper.drop-shadow {
        box-shadow: none;
    }
    .container-wrapper i {
        font-size: 24px;
        cursor: pointer;
    }

.page-title {
    color: var(--bs-heading-color, inherit);
    font-weight: bold;
    font-size: 24px;
    text-align: center;
}

.mt-n5{
    margin-top: -5px;
}

.title {
    text-align: center;
}

.stay-dates {
    margin-top: -5px;
    text-align: center;
}

.content-text-size {
    font-size: 16px;
}

.content-text-size i {
    font-size: 16px;
}

.buttons-container {
    display: grid;
    /* grid-template-columns: repeat(5, 1fr); */
    /* Fixed columns spread over the width: the first and last button of a row sit flush with the cards' edges */
    grid-template-columns: repeat(5, 100px);
    justify-content: space-between;
    gap: 20px;
    /* background-color: var(--color-surface); */
    padding-top: 20px;
    padding-bottom: 20px;
    justify-items: center;
}

@media (max-width: 768px) {
    .content-text-size {
        font-size: 13px !important;
    }

    .content-text-size i {
        font-size: 13px !important;
    }

    .btn-primary {
        font-size: 13px !important;
    }

    .btn-secondary{
        font-size: 13px !important;
    }

    .container-wrapper {
        /* padding: 16px 16px 16px 16px; */
        padding: 0 16px;
    }

    .buttons-container {
        /* grid-template-columns: repeat(4, 1fr); */
        grid-template-columns: repeat(4, 82px);
    }
}

@media (max-width: 480px) {
    .buttons-container {
        grid-template-columns: repeat(4, 1fr);
        gap: 0px;
        row-gap: 12px;
    }
}

.modal-title {
    color: var(--color-on-primary);
}

.modal-footer {
    background-color: var(--color-panel) !important;
}

.modal-header {
    color: var(--color-on-primary);
    background-color: var(--color-primary);
}

.modal-footer.btn{
    color: var(--color-on-accent);
    color: var(--color-accent)
}

.background-container {
    background-color: var(--color-panel);
    max-width: 100%;
}

.layout {
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    background-color: var(--color-background);
}

.text-small {
    font-size: 12px;
}

.custom-dropdown-container {
    position: relative;
    z-index: 1000;
}

    .custom-dropdown-container .display-item {
        white-space: nowrap;
        display: block;
    }

    .custom-dropdown-container ul.custom-dropdown {
        display: none;
        position: absolute;
        top: 100%;
        padding-left: 0px;
        z-index: 1001;
        box-shadow: 0px 3px 3px 0px rgba(0,0,0,0.6);
        background-color: var(--color-surface);
    }

    .custom-dropdown-container .custom-dropdown .custom-dropdown-item {
        white-space: nowrap;
    }

    .custom-dropdown-container .custom-dropdown .custom-dropdown-item {
        list-style-type: none;
        cursor: pointer;
    }

    .custom-dropdown-container:hover .custom-dropdown {
        display: block;
    }

        .custom-dropdown-container:hover .custom-dropdown .custom-dropdown-item a {
            display: block;
        }

.language-selector-flag {
    max-width: 35px;
    margin: 8px;
    width: 40px;
    border-radius: 10%;
    cursor: pointer;
}

.pointer {
    cursor: pointer;
}

.go-to-cart-padding {
    padding-bottom: 135px !important;
}

@media (max-width: 768px) {
    .go-to-cart-padding {
        padding-bottom: 200px !important;
    }
}

@media (max-width: 480px) {
    .go-to-cart-padding {
        padding-bottom: 187px !important;
    }
}

.logo-img {
    max-width: 300px;
    /*width: 100%;*/
    height: auto;
    display: block;
    margin: 0 auto;
    max-height: 175px;
}

.loading-logo-img {
    max-width: 600px;
    height: auto;
    display: block;
    margin: 0 auto;
    max-height: 350px;
}

.mobile-only {
    display: none;
}

@media (max-width: 480px) {

    .pc-only {
        display: none;
    }

    .mobile-only {
        display: block;
    }
}

.delete-style {
    text-align: end;
    align-content: center;
    cursor: pointer;
    color: var(--color-icon);
}

/* Addon/orderitems */
.btn-add {
    aspect-ratio: 1/1;
    height: 40px;
    width: 40px;
    font-size: 30px;
}

.quantity-input {
    width: 50px !important;
    height: 40px !important;
    text-align: center !important;
    padding-left: 5px !important;
    padding-right: 5px !important;
}

.add-icon {
    color: var(--color-on-primary);
    font-weight: bold;
    font-size: 40px;
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-bottom: 8px;
}

.addon-row {
    min-height: 50px;
}

.addon-description {
    font-size: 16px;
    border-bottom: 1px solid var(--color-divider);
}

@media (max-width: 768px) {
    .btn-add {
        width: 36px;
        height: 36px;
        font-size: 20px;
    }

    .quantity-input {
        width: 40px !important;
        height: 36px !important;
        font-size: 15px !important;
    }

    .add-icon {
        font-size: 22px;
        padding-bottom: 4px;
    }

    .addon-row {
        min-height: 60px;
    }
}

@media (max-width: 480px) {
    .addon-row {
        min-height: 65px;
    }

    .addon-description {
        font-size: 15px;
    }
}

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type=number] {
    -moz-appearance: textfield;
}
/* Addon/orderitems */

select {
    width: 100%;
    height: 38px;
    border-radius: var(--radius-control, 5px);
    border: var(--bs-border-width) solid var(--bs-border-color);
    padding-left: 5px;
}


/*featurebutton*/
.feature-button-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100px;
    flex-shrink: 0;
}

.feature-button {
    display: flex;
    justify-content: center;
    align-items: center;
    /* Old design: Primary as the button, the icon on it in Primary's text colour. Now Surface as the button and Primary as the icon. */
    /* background-color: var(--color-primary); */
    /* background-color: var(--color-surface); */
    background-color: var(--color-surface);
    height: auto;
    width: 100%;
    aspect-ratio: 1/1;
    max-width: 100px;
    border-radius: var(--radius-corner, 12px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    cursor: pointer;
    flex-shrink: 0;
}

    .feature-button:hover {
        /* background-color: var(--color-primary-hover); */
        background-color: var(--color-panel);
    }

    .feature-button i {
        font-size: 48px;
        /* color: white; */
        color: var(--color-primary);
        flex-shrink: 0;
    }

.title-row {
    font-size: 20px;
    width: 160px;
    text-align: center;
}


@media (max-width: 768px) {
    .feature-button {
        max-width: 82px;
        max-height: 82px;
    }

    .feature-button-container {
        width: 82px;
    }

        .feature-button i {
            font-size: 36px;
        }

    .title-row {
        font-size: 16px;
    }
}

@media (max-width: 480px) {
    .feature-button {
        max-width: 65px;
        max-height: 65px;
    }

        .feature-button i {
            font-size: 24px;
        }

    .title-row {
        font-size: 12px;
        width: 100px;
    }

    .feature-button-container {
        width: 65px;
    }

    .buttons-container {
        grid-template-columns: repeat(4, 72px);
        justify-content: space-between;
    }
}
/*featurebutton*/

/*cards*/
/* The white box: the selected booking, and each stay on the subpages */
.surface-card {
    padding: 12px 14px;
    background-color: var(--color-surface);
    border-radius: var(--radius-corner, 12px);
    box-shadow: var(--shadow-card);
}

    /* .container-wrapper i above gives every icon 24px; here the size is set on the icon's own box. */
    .surface-card i {
        font-size: inherit;
        cursor: inherit;
    }

/* The icon in front and the round toggle: Accent as the button, Primary as the icon */
.card-icon,
.card-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background-color: var(--color-accent);
    color: var(--color-primary);
}

.card-icon {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-control, 12px);
    font-size: 18px;
}

.card-toggle {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    font-size: 13px;
}

    .card-toggle i {
        transition: transform 0.2s;
    }

    /* A card that is open turns its toggle's chevron up */
    .card-toggle.open i {
        transform: rotate(180deg);
    }
/*cards*/

/*bookingcard*/
.booking-card {
    display: flex;
    align-items: center;
    gap: 12px;
}

.booking-card-text {
    flex: 1;
    min-width: 0;
}

.booking-card-label {
    font-size: 11px;
    font-weight: 600;
    line-height: 1.2;
    color: var(--color-icon);
}

.booking-card-title {
    font-size: 16px;
    /* font-weight: 800; */
    font-weight: 700;
    line-height: 1.2;
}

/* Arrival and departure, one under the other, each with its arrow icon */
.booking-card-dates {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
}

    .booking-card-dates i {
        width: 14px;
        margin-right: 4px;
        font-size: 11px;
        text-align: center;
        color: var(--color-icon);
    }
/*bookingcard*/

/*welcomecard*/
/* The first item in .buttons-container: the whole row on mobile, 3 of the 5 columns on PC. The buttons follow it and fill the rest of its row. */
.welcome-card {
    grid-column: span 4;
    justify-self: stretch;
    display: flex;
    align-items: center;
    gap: 12px;
    text-align: left;
}

.welcome-card-text {
    flex: 1;
    min-width: 0;
}

.welcome-card-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    line-height: 1.2;
    color: var(--color-primary);
}

.welcome-card-title {
    font-size: 22px;
    font-weight: 700;
    line-height: 1.2;
}

.welcome-card-message {
    margin-top: 4px;
    font-size: 13px;
    line-height: 1.3;
    color: var(--color-icon);
}

/* The days left: a number on Primary with a small caption under it */
.welcome-card-badge {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    min-width: 64px;
    padding: 8px 10px;
    border-radius: var(--radius-corner, 12px);
    background-color: var(--color-primary);
    color: var(--color-on-primary);
    line-height: 1.1;
}

.welcome-card-badge-value {
    font-size: 24px;
    font-weight: 700;
}

.welcome-card-badge-caption {
    font-size: 11px;
}

/* The sun on site: no box, just a bigger icon in Primary */
.welcome-card-sun {
    background-color: transparent;
    color: var(--color-primary);
    font-size: 44px;
    padding: 0;
    min-width: 0;
}

@media (min-width: 769px) {
    .welcome-card {
        grid-column: span 3;
    }

    /* On PC the card is as high as the row (the buttons and their titles); the text is centred in it, with a little air under the caption */
    .welcome-card-text {
        align-self: stretch;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .welcome-card-label {
        margin-bottom: 6px;
        font-size: 13px;
    }

    /* Bigger type on PC, in step with the buttons' titles (20px) */
    .welcome-card-title {
        font-size: 28px;
    }

    .welcome-card-message {
        font-size: 16px;
    }

    .welcome-card-badge-value {
        font-size: 30px;
    }

    .welcome-card-badge-caption {
        font-size: 13px;
    }

    .welcome-card-sun {
        font-size: 64px;
    }
}
/*welcomecard*/

/*featuredcard*/
/* A featured card in .buttons-container: 2 places on mobile and on PC, as high as its row, after the welcome card and before the buttons */
.featured-card {
    grid-column: span 2;
    justify-self: stretch;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    /* Compact on mobile so the card is no higher than the buttons beside it and their titles; PC gets its sizes back below */
    gap: 4px;
    padding: 10px 12px;
    cursor: pointer;
    text-align: left;
}

.featured-card-top {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.featured-card-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    border-radius: var(--radius-control, 8px);
    background-color: var(--color-accent);
    color: var(--color-primary);
    font-size: 12px;
}

/* One line, cut with an ellipsis: a long (or missing) label must never make the card higher than the buttons beside it */
.featured-card-label {
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 13px;
    font-weight: 600;
    color: var(--color-icon);
}

.featured-card-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.featured-card-amount {
    font-size: 18px;
    font-weight: 700;
    line-height: 1.1;
}

/* The round arrow: Primary as the button */
.featured-card-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background-color: var(--color-primary);
    color: var(--color-on-primary);
    font-size: 12px;
}

@media (min-width: 769px) {
    .featured-card {
        gap: 8px;
        padding: 12px 14px;
    }

    .featured-card-icon {
        width: 28px;
        height: 28px;
        font-size: 13px;
    }

    .featured-card-label {
        font-size: 16px;
    }

    .featured-card-amount {
        font-size: 26px;
    }

    .featured-card-arrow {
        width: 36px;
        height: 36px;
        font-size: 15px;
    }
}
/*featuredcard*/

/*stay*/
/* A stay's header (BookingProductHeader): icon, name and dates, and the toggle where the stay can be folded */
.stay-header {
    display: flex;
    align-items: center;
    gap: 12px;
}

    .stay-header.collapsible {
        cursor: pointer;
    }

.stay-header-text {
    flex: 1;
    min-width: 0;
}

.stay-header-title {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.2;
}

.stay-header-dates {
    font-size: 13px;
    line-height: 1.2;
    color: var(--color-icon);
}

/* After the dates, with some space (the stay's add-ons on the add-on page) */
.stay-header-dates-suffix {
    margin-left: 8px;
}

/* A section under the header, split from it by a light line (the stay's add-ons on the add-on page) */
.stay-header-footer {
    margin-top: 10px;
    border-top: 1px solid var(--color-panel);
}

/* Old design: the stay's content was folded out inside its card (StayCard puts it under the card now)
.stay-card-body {
    margin-top: 12px;
    border-top: 1px solid var(--color-divider);
} */

/* A stay's card (StayCard): no line when closed, Primary when open. The border is there when closed as well (transparent),
   so the card and its text do not move when it opens. */
.stay-card {
    position: relative;
    padding: 12px 14px;
    background-color: var(--color-surface);
    border: 2px solid transparent;
    border-radius: var(--radius-corner, 12px);
    box-shadow: var(--shadow-card);
}

    .stay-card i {
        font-size: inherit;
        cursor: inherit;
    }

    /* The open stay: outlined in Primary, with an arrow from the outline down to its content */
    .stay-card.open {
        border-color: var(--color-primary);
    }

        /* The arrow: a Surface square turned 45° with the outline (2px) on its two lower sides, centred on the card's bottom border,
           so its edges are as thick as the card's and it covers the border where it sits.
           Old design: a Primary border triangle with a Surface one 1px above it, which made the arrow's edges about 1px (thinner than the card's). */
        .stay-card.open.has-content::after {
            content: "";
            position: absolute;
            left: 50%;
            top: calc(100% - 7px);
            width: 16px;
            height: 16px;
            background-color: var(--color-surface);
            border-right: 2px solid var(--color-primary);
            border-bottom: 2px solid var(--color-primary);
            transform: translateX(-50%) rotate(45deg);
        }

/* The bread order page: its blocks are white cards (surface-card) on the page's background, the same 12px apart as the other pages */
.pos-cards {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* A stay (or "order in own name") to pick on the bread order page: a white card, the whole card is the button */
.stay-pick {
    display: block;
    width: 100%;
    padding: 12px 14px;
    text-align: left;
    color: inherit;
    background-color: var(--color-surface);
    border: 0;
    border-radius: var(--radius-corner, 12px);
    box-shadow: var(--shadow-card);
}

    .stay-pick i {
        font-size: inherit;
        cursor: inherit;
    }

/* What the open stay shows, under its card: sections in cards of their own on the page's background */
.stay-content {
    padding-top: 22px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* The white box round every stay (StayCard), open or closed: the stay's card 8px inside it, as the content's cards under it,
   so their edges line up and nothing moves when the stay folds in or out. The cards inside it have a light line instead of a shadow. */
.stay-group {
    padding: 8px;
    background-color: var(--color-surface);
    border-radius: calc(var(--radius-corner, 12px) + 4px);
    box-shadow: var(--shadow-card);
}

    .stay-group .stay-card {
        box-shadow: none;
    }

    .stay-group .stay-content {
        padding: 22px 0 4px;
    }

    .stay-group .stay-content .surface-card {
        box-shadow: none;
        border: 1px solid var(--color-divider);
    }

    .stay-group .stay-section-title {
        padding-left: 4px;
    }

/* A section's heading above its card, on the page's background */
.stay-section-title {
    margin-bottom: -6px;
    font-size: 17px;
    font-weight: 700;
}

/* The open stay has nothing to show (no add-ons, invoices or keys), or it is loading: the arrow points at this text */
.stay-empty {
    font-size: 14px;
    color: var(--color-icon);
    text-align: center;
}
/*stay*/

/*addondetails*/
/* "Læs mere" on an add-on (AddonDetailsModal): the photo reaches the box's edges, no border, the box's own rounded corners */
.addon-details-modal .modal-content {
    border: 0;
    border-radius: var(--radius-corner, 16px);
    overflow: hidden;
}

.addon-details-modal .modal-body {
    padding: 0;
}
/*addondetails*/

/*topbar*/
.top-bar {
    width: 100%;
    min-height: 40px;
    background-color: var(--color-topbar-background);
    color: var(--color-topbar);
    font-size: 18px;
}

.top-bar .container{
    max-width: 900px;
    margin: 0 auto;
}

.cart-icon {
    font-size: 24px;
    color: var(--color-primary);
    cursor: pointer;
}

.top-bar-logo {
    display: block;
    margin: 0 auto;
    max-width: 100%;
    max-height: 40px;
    height: auto;
}

.cart-price {
    font-size: 18px;
}

.language {
}

/* PC: a higher top bar, so the logo has room round it (it filled the whole 40px) */
@media (min-width: 769px) {
    .top-bar {
        min-height: 64px;
    }

    .top-bar-logo {
        max-height: 48px;
    }
}

@media (max-width: 480px) {
    .top-bar .cart-icon {
        font-size: 24px;
    }

    .cart-price {
        font-size: 13px;
    }

    .top-bar {
        min-height: 60px;
        font-size: 16px;
    }

    .language {
        text-align: left;
    }
}
/*topbar*/

.subline {
    background-color: var(--color-panel);
}

.dates-description {
    font-size: 12px;
    align-content: center;
}

.comment-box {
    width: 100%;
    border-radius: var(--radius-control, 5px);
}

.table-rowhead {
    padding: 10px 3px 10px 3px;
    margin: 0px;
    font-weight: bold;
    border-radius: var(--radius-corner, 8px) var(--radius-corner, 8px) 0px 0px;
    background-color: var(--color-table-header-background);
}

.table-row {
    padding: 3px 3px 3px 3px;
    margin: 0px;
    background-color: var(--color-table-body-background);
}

.content-img-first{
    display: block;
    margin: 0 auto;
    max-width: 100%;
    border-radius: var(--radius-corner, 10px);
}

.mw-30p{
    min-width: 30%
}

/*.chart-container {
    position: relative;
    width: 100%;
    height: 450px;
}

@media (max-width: 768px) {
    .chart-container {
        height: 300px;
    }
}*/

.chart-container {
    position: relative;
    width: 100%;
}

    .chart-container canvas {
        max-height: 500px !important;
    }

@media (max-width: 768px) {
    .chart-container canvas {
        max-height: 300px !important;
        height: 300px !important;
    }
}

.alert-small {
    font-size: 14px;
    border-radius: var(--radius-control, 8px) !important;
    padding: 2px 50px 2px 50px !important;
    margin-top: 10px !important;
    margin-bottom: -15px !important;
}

@media (max-width: 768px){
    .alert-small {
        width: 100% !important;
        margin-bottom: 0px !important;
        padding: 2px 10px 2px 10px !important;
    }
}