@import 'colors.css';

body.scroll-locked-no-padding, body.scroll-locked {
    overflow: visible !important;
}

#nv-logo {
    position: sticky;
    float: left;
    height: 73px;
    width: auto;
    margin-left: 81px;
    top: 8px;
    margin-right: 21px;
}

:root {
    /* 
        Adjustable, adds some extra space over an scrolled anchor element.
        If no extra space, the header of the page gets too close to the scrolled anchor element, which will look bad if its a header for example.
    */
    --scroll-offset-extra: 20px;
}

[id] {
    /*
        Used for anchor scrolling, together with the scrollToFragment JS function in Page.js.
    */
    scroll-margin-top: calc(var(--mud-appbar-height, 64px) + var(--scroll-offset-extra));
}

.no-link-styles,
.no-link-styles > a,
.no-link-styles:visited,
.no-link-styles > a:visited,
.no-link-styles:hover,
.no-link-styles > a:hover,
.no-link-styles:active,
.no-link-styles > a:active,
.no-link-styles:focus,
.no-link-styles > a:focus {
    text-decoration: none !important;
    color: inherit !important;
}

    .no-link-styles:focus,
    .no-link-styles > a:focus {
        outline: none;
    }

        .no-link-styles:focus:not(:focus-visible),
        .no-link-styles:focus > a:not(:focus-visible) {
            outline: none;
        }

.server-response-snackbar .mud-snackbar-content-action .mud-icon-button-label .mud-icon-root {
    color: var(--white);
}

/*
    Overrides until we reach a solid version of MudBlazor (7.x and above)
*/
.mud-switch .mud-switch-button .mud-switch-thumb-medium {
    background-color: var(--mud-palette-grey-light);
}

.mud-switch .mud-switch-base.mud-checked .mud-switch-thumb-medium {
    background-color: var(--mud-palette-success);
}

.mud-switch .mud-switch-base:not(.mud-checked) .mud-switch-thumb-medium {
    background-color: var(--mud-palette-error);
}

.mud-switch .mud-switch-track.mud-success {
    background-color: var(--mud-palette-success);
}

.mud-switch .mud-switch-track.mud-error {
    background-color: var(--mud-palette-error);
}


/*
    Overrides until we reach a solid version of MudBlazor (7.x and above)
*/
.mud-switch .mud-switch-button .mud-switch-thumb-medium {
    background-color: var(--mud-palette-grey-light);
}

.mud-switch .mud-switch-base.mud-checked .mud-switch-thumb-medium {
    background-color: var(--mud-palette-success);
}

.mud-switch .mud-switch-base:not(.mud-checked) .mud-switch-thumb-medium {
    background-color: var(--mud-palette-error);
}

.mud-switch .mud-switch-track.mud-success {
    background-color: var(--mud-palette-success);
}

.mud-switch .mud-switch-track.mud-error {
    background-color: var(--mud-palette-error);
}

/*
    Utilities
*/
/* Font styling, add more sizes when needed. */
.fs-p-8 {
    font-size: 8pt;
}

.fs-px-12 {
    font-size: 12px;
}

.talign-right {
    text-align: right;
}

.talign-left {
    text-align: left;
}

.talign-center {
    text-align: center;
}

.faded {
    color: var(--medium-grey);
    font-style: italic;
}

    .faded.regular-style {
        font-style: normal;
    }

.text-bold {
    font-weight: bold;
}

.mb-6-px {
    margin-bottom: 6px;
}

.button-active {
    background-color: var(--mud-palette-action-default-hover);
}

.last-mud-item-right {
    margin-left: auto;
}

.text-center {
    text-align: center;
}

/* 
    Patchy/hacky css fix for when other attributes (flex & align-items center) 
    creates a different look from other similar elements.
    Increase as needed. 
*/
.minus-mb-1 {
    margin-bottom: -1px;
}

/* Background color utilities based on root variables in colors.css */
.bg-sea-blue {
    background-color: var(--sea-blue);
}

.bg-clear-blue {
    background-color: var(--clear-blue);
}

.bg-sky-blue {
    background-color: var(--sky-blue);
}

.bg-forest-green {
    background-color: var(--forest-green);
}

.bg-grass-green {
    background-color: var(--grass-green);
}

.bg-light-green {
    background-color: var(--light-green);
}

.bg-chanterelle {
    background-color: var(--chanterelle);
}

.bg-light-yellow {
    background-color: var(--light-yellow);
}

.bg-black {
    background-color: var(--black);
}

.bg-pitch-black {
    background-color: var(--pitch-black);
}

.bg-grey {
    background-color: var(--grey);
}

.bg-medium-grey {
    background-color: var(--medium-grey);
}

.bg-white {
    background-color: var(--white);
}

.bg-gray {
    background-color: var(--mud-palette-background-grey);
}

.bg-light-blue {
    background-color: var(--light-blue);
}

.bg-background-grey {
    background-color: var(--background-grey);
}

.bg-stroke-natural-grey {
    background-color: var(--stroke-natrual-grey);
}

.bg-stroke-medium-blue {
    background-color: var(--stroke-medium-blue);
}

.bg-stroke-light-blue {
    background-color: var(--stroke-light-blue);
}

.bg-error-red {
    background-color: var(--error-red);
}

/* Text color utilities based on root variables in colors.css */
.text-sea-blue {
    color: var(--sea-blue);
}

.text-clear-blue {
    color: var(--clear-blue);
}

.text-sky-blue {
    color: var(--sky-blue);
}

.text-forest-green {
    color: var(--forest-green);
}

.text-grass-green {
    color: var(--grass-green);
}

.text-light-green {
    color: var(--light-green);
}

.text-chanterelle {
    color: var(--chanterelle);
}

.text-light-yellow {
    color: var(--light-yellow);
}

.text-black {
    color: var(--black);
}

.text-grey {
    color: var(--grey);
}

.text-medium-grey {
    color: var(--medium-grey);
}

.text-white {
    color: var(--white);
}

.text-light-blue {
    color: var(--light-blue);
}

.text-background-grey {
    color: var(--background-grey);
}

.text-stroke-natural-grey {
    color: var(--stroke-natrual-grey);
}

.text-stroke-medium-blue {
    color: var(--stroke-medium-blue);
}

.text-stroke-light-blue {
    color: var(--stroke-light-blue);
}

.text-error-red {
    color: var(--error-red) !important;
}

    .text-error-red.force-hover:hover {
        color: var(--error-red) !important;
    }

.text-plain-red {
    color: var(--plain-red);
}

#external-auth *:after {
    position: absolute;
}

#external-auth [type=button] {
    height: 60px;
}

#external-auth img {
    vertical-align: middle;
}

#external-auth .mud-button-label {
    text-transform: none;
    letter-spacing: 1px;
}

    #external-auth .mud-button-label span:nth-child(1) {
        width: 80px;
    }

    #external-auth .mud-button-label span:nth-child(2) {
        width: 110px;
    }

.p-list-style p {
    display: list-item;
    list-style-type: initial;
}

.checkbox-collection-system {
    border: 1px solid black;
    border-radius: 25px;
    width: fit-content;
    padding-right: 23px;
}

.header-culture-icon {
    margin-top: auto;
    margin-bottom: auto;
    position: sticky
}

.mud-navmenu.mud-navmenu-bordered .mud-nav-link.active:not(.mud-nav-link-disabled) {
    border-left-style: solid;
    border-left-width: 6px;
    border-right: none;
    background: rgba(0, 51, 102, 0.1);
    color: #003AA2;
}

.mud-drawer .mud-drawer-content {
    padding-top: 40px;
}

.mud-nav-link .mud-nav-link-text {
    width: 100%;
    text-align: start;
    margin-left: 12px;
    padding-top: 10px;
    margin-inline-start: 12px;
    margin-inline-end: unset;
    letter-spacing: 0;
    font-family: 'Tiempos Text';
    font-style: normal;
    font-weight: 400;
    font-size: 1rem;
    line-height: 1.1875rem;
    margin-top: auto;
    padding-bottom: 10px;
    color: #000000;
}

.culture-link-True {
    border-left: 4px solid #003AA2;
    border-left-width: 6px;
    border-right: none;
    background: rgba(0, 51, 102, 0.1);
}

.mud-button {
    border-radius: 40px;
}

.custom-list-text-color p {
    color: black;
    font-size: 17px;
    font-weight: 400;
}

#company-text {
    font-family: 'Tiempos Text';
    font-size: 16px;
    font-weight: 400;
    line-height: 26px;
    letter-spacing: 0em;
    text-align: left;
}

.appbar-custom-text {
    color: #737373;
}

#active-company-text.mud-typography-body1 {
    color: #737373;
}

#other-company-text.mud-typography-body1 {
    color: #737373;
}

.mud-typography-body2 {
    color: #737373;
}

.choose-actor-button:hover {
    background-color: rgba(0,51,102,0.058823529411764705);
}

.choose-actor-button {
    font-size: 17px;
    font-weight: 400;
    line-height: 25.5px;
    word-break: break-all;
}

.mud-tab.mud-tab-active {
    border-bottom: 3px solid;
}

h1.startsida-h1-text-1 {
    color: #f4dba1;
    font-size: 1.25rem;
    font-family: 'Akkurat Pro';
}

h1.startsida-h1-text-2 {
    color: #f4dba1;
    font-family: 'Tiempos Fine';
    font-size: 2.5rem;
}

p.startsida-ingress-text {
    padding-top: 5%;
    font-size: 1.1rem;
    font-family: 'Akkurat Pro';
    color: #ffffff;
}

    p.startsida-ingress-text.municipality-specific {
        padding-right: 150px;
    }

#select-company-h1-text-1 {
    color: #f4dba1;
    font-size: 1.25rem;
    font-family: 'Akkurat Pro';
}

#select-company-h1-text-2 {
    color: #f4dba1;
    font-family: 'Tiempos Fine';
    font-size: 2.5rem;
}

.producer-landing-page-text-image {
    background: #003366;
    padding-left: 5% !important;
    padding-top: 10% !important;
}

.municipality-landing-page-text-image {
    background: #005643;
    padding-left: 5% !important;
    padding-top: 10% !important;
}

.select-company-page-text-image {
    background: #005643;
    padding-left: 5% !important;
    padding-top: 10% !important;
}

.bordered-left-item {
    border-right: 0.5px solid #c4c4c4;
}

.special-block-header-text {
    color: #F4DBA1;
}

.footer-links .mud-button-label {
    color: white;
    font-size: var(--mud-typography-body1-size);
    font-family: var(--mud-typography-body1-family);
    font-weight: var(--mud-typography-body1-weight);
    line-height: var(--mud-typography-body1-lineheight);
    letter-spacing: var(--mud-typography-body1-letterspacing);
    text-transform: var(--mud-typography-body1-text-transform);
}

.footer-links .mud-button-icon-size-medium > *:first-child {
    font-size: var(--mud-typography-body1-size) !important;
}

.companyCard:hover {
    background-color: var(--mud-palette-action-default-hover)
}

.mud-input.mud-input-outlined.mud-shrink.mud-disabled input.mud-input-slot.mud-input-root.mud-input-root-outlined {
    background-color: #D7D7D7 !important;
}

.actorinformation-form .mud-input.mud-input-outlined.mud-shrink.mud-disabled {
    background-color: #D7D7D7 !important;
}

.actorinformation-form .mud-input.mud-input-outlined.mud-shrink {
    background-color: white;
}

.actorinformation-form .mud-input.mud-input-outlined.mud-disabled input.mud-input-slot.mud-input-root.mud-input-root-outlined {
    background-color: #D7D7D7 !important;
}

.field-read-only input {
    background-color: #D7D7D7 !important;
}

.field-uppercase-only input {
    text-transform: uppercase;
}

.actorinformation-form .mud-input.mud-input-outlined.mud-input-error {
    background-color: white;
}

.actorinformation-form .mud-input.mud-input-outlined {
    background-color: white;
}

    .actorinformation-form .mud-input.mud-input-outlined.mud-disabled {
        background-color: #D7D7D7 !important;
    }


.pagination {
    position: fixed !important;
    bottom: 0 !important;
    background-color: white;
    min-width: -webkit-fill-available;
    padding-top: 25px;
    padding-bottom: 25px;
}

    .pagination .mud-grid {
        padding-left: 20%;
        padding-right: 20%;
    }

.header-culture-dropdown-button {
    width: 100%;
    padding: 0;
    margin: 0;
    height: 55px;
    border-radius: 0;
}

.header-culture-dropdown-button-active {
    width: 100%;
    padding: 0;
    margin: 0;
    height: 55px;
    border-radius: 0;
    border-left: 6px solid #003AA2;
    background-color: rgba(0, 51, 102, 0.1);
}

.header-dropdown-mud-grid {
    width: 250px;
    top: 75px;
    right: 40px;
    box-shadow: var(--mud-elevation-8);
    position: fixed;
    background-color: var(--mud-palette-surface);
}

.cleaning-cost-img {
    position: fixed !important;
    object-position: 58% 96% !important;
}

/*Overrides mudblazor defaults. This affects css on timeline.*/
/*.mud-timeline-horizontal.mud-timeline-position-top .mud-timeline-item-opposite, .mud-timeline-horizontal.mud-timeline-position-bottom .mud-timeline-item-opposite {
    display : block;
}*/

/*.mud-timeline-item {
    padding: 0;
    word-wrap: break-word;
    hyphens: auto;
}*/

/*.mud-timeline-item .mud-timeline-item-divider*/

.timeline-wrapper {
    position: relative;
    overflow: hidden;
}

    .timeline-wrapper .mud-timeline.mud-timeline-horizontal {
        position: initial;
        height: 130px;
        gap: 25px;
        overflow-x: scroll;
        /*padding-left: 25px;
        padding-right: 25px;*/
    }

        .timeline-wrapper .mud-timeline.mud-timeline-horizontal:before {
            bottom: 57px;
        }

        .timeline-wrapper .mud-timeline.mud-timeline-horizontal .mud-timeline-item {
            min-width: auto;
            padding: 0;
        }

            .timeline-wrapper .mud-timeline.mud-timeline-horizontal .mud-timeline-item:first-child {
                padding-left: 25px;
            }

            .timeline-wrapper .mud-timeline.mud-timeline-horizontal .mud-timeline-item:last-child {
                padding-right: 25px;
            }

.custom-expansion {
    border: 1px solid #9FB3D8 !important;
}

    .custom-expansion .mud-expand-panel-header {
        background-color: #E4EEFF;
    }

.mud-input.mud-disabled > .mud-input-outlined-border {
    background-color: #d7d7d766;
}

.forecastField > .mud-input-control-input-container > .mud-input.mud-input-outlined.mud-shrink.mud-disabled input.mud-input-slot.mud-input-root.mud-input-root-outlined {
    background-color: transparent !important;
}

.forecast-item-field {
    min-width: 22%;
    padding-right: 2px !important;
}

.forecast-year-field {
    min-width: 10%;
    max-width: 10%;
}

.mud-tab.mud-tab-active.mud-ripple {
    background-color: var(--mud-palette-primary-hover);
}

.mud-tab.mud-ripple {
    padding-left: 20px;
    padding-right: 20px;
}

.mud-badge {
    line-height: 1.3 !important;
}

.Validation-Warning {
    color: rgb(0 0 0) !important;
    background-color: #eafd0321 !important;
}

    .Validation-Warning .mud-alert-icon {
        color: rgb(0 0 0) !important;
    }

.custom-alpha-list {
    list-style: none;
    counter-reset: alpha;
    padding-left: 0;
}

    .custom-alpha-list li {
        counter-increment: alpha;
        position: relative;
        padding-left: 1em;
    }

        .custom-alpha-list li::before {
            content: counter(alpha, lower-alpha) ") ";
            position: absolute;
            left: 0;
            width: 0.5em;
            text-align: right;
        }

.mud-input-helper-text.mud-input-error {
    color: red !important;
    font-size: inherit;
}

.mud-alert.mud-alert-text-info {
    background-color: var(--light-blue);
    color: var(--black);
}

.mud-alert-text-info .mud-alert-icon {
    color: var(--clear-blue);
}

.mud-icon-button {
    color: var(--sea-blue) !important;
}

.cards {
    margin-bottom: 12px;
}

    .cards:nth-last-child(-n+2) {
        margin-bottom: 0;
    }

.paper-grid {
    max-width: 100%;
    min-height: 90px;
}

.form-control.bg-white {
    background-color: transparent;
}

    .form-control.bg-white .mud-input {
        background-color: var(--white);
    }

.v-section-borders {
    border-top: 1px solid #c5c5c5;
    border-bottom: 1px solid #c5c5c5;
}

.v-section-distance {
    margin: 20px 0 20px 0;
    padding: 20px 0;
}

    .v-section-distance.with-sibling-subtraction {
        margin: calc(30px - 12px) 0 calc(30px - 12px) 0;
        padding: 38px 0;
    }

.form-control.input .mud-input-helper-text .ms-auto {
    white-space: nowrap;
    padding-left: 5px;
}

.context-menu button {
    width: 100%;
}

    .context-menu button:hover,
    .context-menu a:hover {
        background-color: transparent;
    }

    .context-menu button .mud-button-label,
    .context-menu a .mud-button-label {
        justify-content: start;
    }

/* 
    Used when rendering UL and OL lists in plain HTML, outside MudBlazor,
    since MudBlazor neutralizes plain HTML lists.
*/
ul.custom-list {
    list-style: disc !important;
    padding-left: 1.5rem !important;
    margin: 1em 0 !important;
}

ol.custom-list {
    list-style: decimal !important;
    padding-left: 1.5rem !important;
    margin: 1em 0 !important;
}

.custom-switch {
    margin-top: 6px !important; /* TODO: Borde inte behöva sättas statiskt!! */
    height: 56px; /* TODO: Borde inte behöva sättas statiskt!! */
    flex-direction: row;
    align-items: center;
}

.custom-select,
.custom-select .mud-select-input {
    height: 56px;
}

    .custom-select .mud-select-input .mud-input-adornment-end {
        justify-content: flex-end;
    }

.responsibility-icon-wrapper {
    width: 60px;
    align-items: center;
}

/*
    MudBlazor 6.7.0 → 8.15.0
*/
.mud-input-label {
    white-space: normal;
}

.mud-input-control {
    margin-top: 6px;
}

.dynamic-form-content .dynamic-form-control .mud-paper .mud-grid.d-flex.flex-column {
    align-items: flex-start;
    flex-wrap: nowrap;
}

    .dynamic-form-content .dynamic-form-control .mud-paper .mud-grid.d-flex.flex-column > .mud-grid-item {
        align-self: stretch;
    }

.dynamic-form-content .dynamic-form-control .mud-paper .mud-grid.d-block > .mud-grid-item {
    margin-bottom: 24px;
}

    .dynamic-form-content .dynamic-form-control .mud-paper .mud-grid.d-block > .mud-grid-item:last-child {
        margin-bottom: 0;
    }

.dynamic-form-content .dynamic-form-control .mud-expansion-panels .mud-expand-panel:not(.custom-expansion) .mud-expand-panel-content {
    padding-bottom: 24px;
}

.dynamic-form-content .dynamic-form-control .mud-expansion-panels .mud-expand-panel:not(.custom-expansion) .mud-collapse-container .mud-collapse-wrapper .mud-collapse-wrapper-inner {
    padding-top: 44px;
}

.mudswitch-inline {
    margin-top: -10px !important;
}

    .mudswitch-inline .mud-switch {
        margin-right: 0 !important;
    }

/*
    Administration pages
*/
/*.administration-page .administration-header {
    min-height: 36px;
}*/

.administration-page .collection-points > .mud-grid-item > .mud-paper {
    border-bottom: 2px solid var(--background-grey);
    padding: 12px 0 !important;
    border-radius: 0;
}

    .administration-page .collection-points > .mud-grid-item > .mud-paper.edit-mode {
        padding: 16px 0 !important;
    }

.administration-page .collection-points > .mud-grid-item:last-child > .mud-paper {
    border-bottom: none;
}

.administration-page .collection-points-expantion-panels .mud-expand-panel-header {
    padding: 16px 28px 16px 16px !important;
    border-bottom: 1px solid var(--background-grey);
    transition: background-color .5s ease-in-out;
}

    .administration-page .collection-points-expantion-panels .mud-expand-panel-header .mud-expand-panel-text > .mud-grid {
        align-items: center;
    }

    .administration-page .collection-points-expantion-panels .mud-expand-panel-header .mud-divider-vertical {
        height: 22px;
    }

.administration-page .collection-points-expantion-panels .highlight-on-render.highlight .mud-expand-panel-header {
    background-color: rgb(0 51 102 / 15%);
}

/*.administration-page .collection-points-expantion-panels .mud-collapse-wrapper-inner {
    position: relative;
}*/

.administration-page .collection-points-expantion-panels .mud-expand-panel-content {
    padding: 0 16px 0 16px !important;
}

.administration-page .collection-points .name-column {
    min-width: 200px;
    max-width: 200px;
}

.administration-page .collection-points .group-column {
    min-width: 150px;
}

    .administration-page .collection-points .name-column p,
    .administration-page .collection-points .group-column p {
        text-decoration: none;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
    }

.administration-page .collection-point-row .mud-input-control {
    width: 100%;
}

.administration-page .collection-point-row .status-icon {
    font-size: 10px;
}

    .administration-page .collection-point-row .status-icon.positive {
        color: var(--color-green-lighten2);
    }

    .administration-page .collection-point-row .status-icon.negative {
        color: var(--color-red-lighten2);
    }

.collection-points-empty-state {
    width: 100%;
}

    .collection-points-empty-state.clickable {
        cursor: pointer;
        transition: all 250ms cubic-bezier(.4,0,.2,1) 0ms,box-shadow 250ms cubic-bezier(.4,0,.2,1) 0ms,border 250ms cubic-bezier(.4,0,.2,1) 0ms;
    }

        .collection-points-empty-state.clickable .clickable-icon {
            font-size: 30px;
        }

            .collection-points-empty-state.clickable .clickable-icon.medium {
                font-size: 20px;
            }

        .collection-points-empty-state.clickable .button-simulation {
            box-shadow: none;
        }

        .collection-points-empty-state.clickable.with-inset-border {
            position: relative;
        }

            .collection-points-empty-state.clickable.with-inset-border:after {
                content: "";
                position: absolute;
                width: 1px;
                height: 90%;
                left: 0;
                right: 0;
                margin: 0 auto;
                box-shadow: inset -6px 0 8px rgba(0, 0, 0, 0.025);
                border-right: 1px solid var(--stroke-natrual-grey);
                border-radius: 100%;
                opacity: .75;
            }

        .collection-points-empty-state.clickable:hover {
            background-color: #fdfdfd;
            box-shadow: 0 2px 4px -1px rgba(0, 0, 0, .2), 0 4px 5px 0 rgba(0, 0, 0, .1), 0 1px 10px 0 rgba(0, 0, 0, .05);
        }

            .collection-points-empty-state.clickable:hover .button-simulation {
                background-color: var(--mud-palette-primary-darken);
            }

.generic-excel-import-dialog,
.collection-point-dialog {
    min-width: 400px;
}

    .generic-excel-import-dialog .excel-import-wrapper .mud-input-control-input-container {
        display: flex !important;
        flex-flow: row;
    }

        .generic-excel-import-dialog .excel-import-wrapper .mud-input-control-input-container .custom-file-input {
            cursor: pointer;
        }

    .generic-excel-import-dialog .excel-import-wrapper:hover .excel-import-button,
    .generic-excel-import-dialog .excel-import-wrapper:focus-visible .excel-import-button {
        cursor: pointer;
        background-color: var(--mud-palette-primary-darken);
        box-shadow: 0 2px 4px -1px rgba(0, 0, 0, .2), 0 4px 5px 0 rgba(0, 0, 0, .14), 0 1px 10px 0 rgba(0, 0, 0, .12);
    }

    .generic-excel-import-dialog .mud-dialog-actions,
    .collection-point-dialog .mud-dialog-actions {
        justify-content: flex-start;
        padding: 16px;
        border-top: 1px solid var(--background-grey);
    }

    .generic-excel-import-dialog .mud-dialog-title,
    .collection-point-dialog .mud-dialog-title {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 8px 16px; /* 8px vertical padding due to the 12px padding on the child element ".mud-button-close" */
        padding-inline-end: 16px !important;
        border-bottom: 1px solid var(--background-grey);
    }

        .generic-excel-import-dialog .mud-dialog-title .mud-button-close,
        .collection-point-dialog .mud-dialog-title .mud-button-close {
            position: relative;
            top: 0;
            right: 0;
            margin-left: auto;
        }

    .generic-excel-import-dialog .mud-dialog-content,
    .collection-point-dialog .mud-dialog-content {
        padding: 16px;
    }

.collection-points .highlight-on-render {
    position: relative;
}

    .collection-points .highlight-on-render form {
        position: relative;
        z-index: 1;
    }

    .collection-points .highlight-on-render:after {
        content: "";
        position: absolute;
        top: 0;
        right: -16px; /* Override the .mud-expand-panel-content padding */
        bottom: 0;
        left: -16px; /* Override the .mud-expand-panel-content padding */
        transition: background-color .5s ease-in-out;
        z-index: 0;
    }

.highlight-on-render.highlight:after {
    background-color: rgb(0 51 102 / 15%);
}

/*
    Collection point components in dynamic form
*/
.mcp-report .mcp-inner-expansion .mud-collapse-wrapper-inner {
    padding-top: 0 !important;
}

.mcp-report .mcp-inner-expansion .mud-expand-panel-content {
    padding-bottom: 16px;
}

.mcp-report .mcp-wcag-px-6 {
    padding-left: 6px !important;
    padding-right: 6px !important;
}

.mcp-report .mcp-wcag-pl-6 {
    padding-left: 6px !important;
}

.mcp-report .mcp-wcag-pr-6 {
    padding-right: 6px !important;
}

.mcp-report .mud-expand-panel {
    border-radius: 0 !important;
}

.mcp-report .mcp-ml-6 {
    margin-left: 6px;
}

.mcp-report .mcp-nested .mcp-ml-x {
    margin-left: 6px;
}

.mcp-report .mcp-non-nested .mcp-ml-x {
    margin-left: 6px;
}

/* Keep the bottom border on expanded panels */
.mcp-report .mud-expand-panel.mud-panel-expanded:not(:last-child),
.mcp-report .mud-expand-panel.mud-panel-next-expanded:not(:last-child) {
    border-bottom: 1px solid var(--mud-palette-lines-default) !important;
}

.mcp-report .mud-expand-panel.mud-panel-expanded .mud-expand-panel.mud-panel-expanded {
    /*
        Removing the collapsing transition unfortunately (more than it already is).
        The original one transitions the last 16px of margin when collapsed, this causes it
        to not transition anything at all, but also makes the layout better.
    */
    margin: 0;
}

/*
    List page
*/
.events-list-page .list-page-body {
    background-color: var(--mud-palette-background);
}

    .events-list-page .list-page-body .list-skeleton > .mud-paper {
        margin-top: -4px;
        box-shadow: none;
    }

        .events-list-page .list-page-body .list-skeleton > .mud-paper > div {
            border-color: var(--list-body-row-border-color);
            margin-left: 50px;
        }

        .events-list-page .list-page-body .list-skeleton > .mud-paper .skeleton-body-wrapper {
            position: relative;
        }

            .events-list-page .list-page-body .list-skeleton > .mud-paper .skeleton-body-wrapper .skeleton-body {
                /*margin-left: 50px;*/
            }

            .events-list-page .list-page-body .list-skeleton > .mud-paper .skeleton-body-wrapper .skeleton-action {
                position: absolute;
                top: 26px;
                right: 0;
            }

        .events-list-page .list-page-body .list-skeleton > .mud-paper .skeleton-footer {
            margin-top: 7px;
            margin-bottom: -43px;
            margin-left: auto;
        }

    .events-list-page .list-page-body .list-body-wrapper {
        position: relative;
    }

        .events-list-page .list-page-body .list-body-wrapper .list-actions {
            position: absolute;
            bottom: 0;
            right: 0;
            display: inline-block !important;
            width: auto;
        }

            .events-list-page .list-page-body .list-body-wrapper .list-actions .custom-event-list-details-button {
                border: none;
                padding-right: 0;
                justify-content: flex-end;
                color: var(--grey);
                opacity: 0;
                transition: opacity 250ms cubic-bezier(.4,0,.2,1);
            }

            .events-list-page .list-page-body .list-body-row:hover .list-actions .custom-event-list-details-button {
                opacity: 1;
            }

            .events-list-page .list-page-body .list-body-wrapper .list-actions .custom-event-list-details-button .action-label {
                margin-right: 2px;
            }

            .events-list-page .list-page-body .list-body-wrapper .list-actions .custom-event-list-details-button svg {
                fill: var(--grey);
            }

    .events-list-page .list-page-body .list-body-wrapper .event-date-cell {
        display: flex;
        align-items: flex-start;
        gap: 6px;
        padding-left: 35px;
        font-size: 16px;
    }

    .events-list-page .list-page-body .list-body-wrapper .list-body-column.event-status-chip-wrapper {
        position: absolute;
        top: 0;
        right: 0;
    }

        .events-list-page .list-page-body .list-body-wrapper .list-body-column .event-status-chip {
            border-radius: 25px;
            margin: 0;
        }

        .events-list-page .list-page-body .list-body-wrapper .list-body-column .event-status-chip.event-status-created {
            border-color: #E3F2FD;
            color: #1976D2;
        }

        .events-list-page .list-page-body .list-body-wrapper .list-body-column .event-status-chip.event-status-updated {
            border-color: #E8F5E9;
            color: #2E7D32;
        }

        .events-list-page .list-page-body .list-body-wrapper .list-body-column .event-status-chip.event-status-deleted {
            border-color: #FFF3E0;
            color: #EF6C00;
        }

        .events-list-page .list-page-body .list-body-wrapper .event-date-cell svg {
            font-size: 23px;
            display: none;
        }

    .events-list-page .list-page-body .list-body-row:not(.no-results) {
        position: relative;
        max-height: 148px;
    }

        .events-list-page .list-page-body .list-body-row:not(.no-results):after {
            content: "";
            position: absolute;
            bottom: -2px;
            left: 0;
            width: 50px;
            height: 4px;
            background-color: #fff;
        }

        .events-list-page .list-page-body .list-body-row .list-body-column {
            position: relative;
        }

            .events-list-page .list-page-body .list-body-row .list-body-column strong {
                color: #313131;
                letter-spacing: .35px;
            }

            .events-list-page .list-page-body .list-body-row .list-body-column:first-child:after {
                content: "";
                position: absolute;
                top: -15px;
                left: 12px;
                background-color: var(--mud-palette-lines-inputs);
                width: 2px;
                height: 170px;
                z-index: 100;
            }

        .events-list-page .list-page-body .list-body-row:last-child .list-body-column:first-child:after,
        .events-list-page .list-page-body .list-body-row.only-child .list-body-column:first-child:after {
            content: "";
            position: absolute;
            top: -15px;
            left: 12px;
            background-color: var(--mud-palette-lines-inputs);
            width: 2px;
            height: 30px;
            z-index: 100;
        }

    .events-list-page .list-page-body.has-more-pages:not(.last-page) .list-body-row:last-child .list-body-column:first-child:after,
    .events-list-page .list-page-body.paginated:not(.last-page) .list-body-row:last-child .list-body-column:first-child:after {
        height: 121px;
    }

            .events-list-page .list-page-body .list-body-row.no-results .list-body-column:first-child:after {
                display: none;
            }

            .events-list-page .list-page-body .list-body-row .list-body-column:first-child > p {
                position: relative;
            }

                .events-list-page .list-page-body .list-body-row .list-body-column:first-child > p:before {
                    content: "";
                    position: absolute;
                    top: 6px;
                    left: 7px;
                    background-color: var(--mud-palette-lines-inputs);
                    width: 12px;
                    height: 12px;
                    border-radius: 50%;
                    z-index: 101;
                    box-shadow: 0px 0px 0px 8px #fff;
                }

                .events-list-page .list-page-body .list-body-row .list-body-column:first-child > p span.event-date-time {
                    display: inline-block;
                    white-space: nowrap;
                    clip-path: inset(0 100% 0 0);
                    transition:
                        clip-path 250ms cubic-bezier(.4,0,.2,1),
                        opacity 350ms cubic-bezier(.4,0,.2,1);
                    opacity: 0;
                }

            .events-list-page .list-page-body .list-body-row:hover .list-body-column:first-child > p span.event-date-time {
                clip-path: inset(0 0 0 0);
                opacity: 1;
            }

            .events-list-page .list-page-body .list-body-row:hover .list-body-column:first-child > p:after {
                opacity: .35;
                width: 100%;
            }

            .events-list-page .list-page-body .list-body-row .list-body-column:first-child > p:after {
                content: "";
                position: absolute;
                left: 12px;
                height: 100%;
                width: 0;
                background-color: var(--stroke-natrual-grey);
                opacity: 0;
                border-top-right-radius: 10px;
                border-bottom-right-radius: 10px;
                transition: 
                    all 250ms cubic-bezier(.4,0,.2,1) 0ms,
                    box-shadow 250ms cubic-bezier(.4,0,.2,1) 0ms,
                    border 250ms cubic-bezier(.4,0,.2,1) 0ms;
            }

            .events-list-page .list-page-body .list-body-row .list-body-column:first-child > p.today:after {
                background-color: var(--light-green);
            }

            .events-list-page .list-page-body .list-body-row .list-body-column:first-child > p.yesterday:after {
                background-color: var(--light-yellow);
            }

            .events-list-page .list-page-body .list-body-row .list-body-column:first-child > p.today:before {
                background-color: var(--light-green);
            }

            .events-list-page .list-page-body .list-body-row .list-body-column:first-child > p.yesterday:before {
                background-color: var(--light-yellow);
            }

            .events-list-page .list-page-body .list-body-row.no-results .list-body-column:first-child > p:before,
            .events-list-page .list-page-body .list-body-row.no-results .list-body-column:first-child > p:after {
                display: none;
            }

            .events-list-page .list-page-body .list-body-row .list-body-column:last-child {
                padding-left: 50px;
            }

/*
    Media queries - custom responsive adaptness
*/
            @media (max-width: 1279px) {
                .cards:nth-last-child(-n+2) {
                    margin-bottom: 12px;
                }

                .cards:last-child {
                    margin-bottom: 0;
                }
            }

            @media (max-width: 1113px) {
                #nv-logo {
                    margin-left: 20px;
                }
            }

            @media (max-width: 960px) {
                .collection-point-row {
                    flex-direction: column;
                }

                .collection-points-empty-state .empty-state-action {
                    justify-content: flex-start !important;
                }

                .collection-points-empty-state.clickable {
                    text-align: center;
                }

                    .collection-points-empty-state.clickable .empty-state-action {
                        justify-content: center !important;
                        margin-top: 24px;
                    }

                    .collection-points-empty-state.clickable.with-inset-border:after {
                        display: none;
                    }
            }

            @media (max-height: 600px) {
                #nv-logo {
                    width: 70px;
                }
            }

@media (max-width: 600px) {
    .collection-point-row {
        flex-direction: column;
    }
}


/*NVB-679 visa historiska värden i kvartal */
.history-row-sum {
    font-style: italic;
    margin-top: 20px; 
}
/**/