@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;
}

/*
    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;
    }
}