.ingress{
    max-width: 600px;
}

h3.ingress{
    margin-bottom:20px;
}

.lower {
    background: var(--md-sys-color-Surface-Container, #EBF8FF);
    width: 100%;
    padding: 40px 32px;
}

.lower-inner{
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
}

section:not(:last-of-type){
    margin-bottom: 40px;
}

.result-label {
    font-size: var(--md-sys-typescale-body-large-size, 18px);
    font-weight: var(--md-sys-typescale-body-large-weight, var(--weight-regular, 400));
    margin-bottom: 12px;
}

.result-label:last-of-type {
    margin-bottom: 30px;
}

.filter-modal-button {
    margin-bottom: 30px;
}

.publiceringskalender-mobile-results {
    display: none;
}

.publiceringsKalenderCard + .publiceringsKalenderCard {
    margin-top: var(--Spacing-7, 24px);
}

.publiceringsKalenderCard {
    display: block;
    --scb-card-size-container-gap: 0;
}

.publiceringsKalenderCardDescription {
    color: var(--md-sys-color-On-Surface, #0F0865);
    font-family: var(--Brand, Inter);
    font-size: var(--md-sys-typescale-label-large-size, 18px);
    font-weight: var(--Weight-Bold, 700);
    line-height: var(--md-sys-typescale-label-large-line-height, 26px);
    letter-spacing: var(--md-sys-typescale-label-large-tracking, -0.3px);
    display: block;
}

.publiceringsKalenderCardValue {
    color: var(--md-sys-color-On-Surface, #0F0865);
    font-family: var(--Brand, Inter);
    font-size: var(--md-sys-typescale-body-large-size, 18px);
    font-weight: var(--Weight-Regular, 400);
    line-height: var(--md-sys-typescale-body-large-line-height, 26px);
    letter-spacing: var(--md-sys-typescale-body-large-tracking, -0.3px);
    overflow-wrap: anywhere;
    display: block;
}


/*Should probably be 768 but then the headers clips. Needs to be discussed.*/
@media (max-width: 1250px) {
    .publiceringskalender-desktop-results {
        display: none;
    }

    .publiceringskalender-mobile-results {
        display: block;
    }
}

@media (min-width: 933px) {
    #filter scb-grid scb-grid-item:nth-of-type(-n+2) {
        margin-top: var(--spacing-1, 2px);
        margin-bottom: var(--spacing-7, 28px);
    }
}

@media (max-width: 932px) {
    #filter scb-grid {
        --scb-grid-row-gap: var(--spacing-5, 16px) !important;
    }
}

@media (max-width: 711px) {
    .publiceringsKalenderCard scb-divider {
        display: none;
    }

    .publiceringsKalenderCard scb-grid {
        --scb-grid-row-gap: 0px !important;
    }

    .publiceringsKalenderCard scb-divider + scb-grid-item .publiceringskalender-label {
        margin-top: var(--Spacing-5, 16px);
    }
}

table {
    margin-bottom: 0;
}

.publiceringsKalenderTable .sub-product-label,
.publiceringsKalenderTable .corr-component,
.publiceringsKalenderTable .corr-component p {
    font-size: var(--md-sys-typescale-body-medium-size, 16px);
    line-height: var(--md-sys-typescale-body-medium-line-height, 24px);
    letter-spacing: var(--md-sys-typescale-body-medium-tracking, -0.2px);
}

.product-label:not(a) {
    font-style: normal;
    font-weight: var(--Weight-Semibold, 600);
}

a.product-label {
    color: var(--md-sys-color-primary, var(--p-40, #1f44ff));
    font-weight: var(--Weight-Semibold, 600);
}

.publiceringsKalenderTable a.product-label[lang] {
    overflow-wrap: anywhere;
    hyphens: auto;
}

.sub-product-label {
    margin: 0;
}


#filter {
    position: relative;
}

#publiceringsKalenderLoadingOverlay{
    border-radius: 25px;
}

#publiceringsKalenderFiltreringValue scb-chip {
    margin-right: var(--spacing-3, 8px);
}

#publiceringsKalenderFiltreringValue scb-chip:first-of-type {
    margin-left: var(--spacing-2, 4px);
}

.publiceringskalender-label {
    color: var(--md-sys-color-On-Surface, #0F0865);
    font-family: var(--Brand, Inter);
    font-size: var(--md-sys-typescale-label-large-size, 18px);
    font-style: normal;
    font-weight: var(--Weight-Bold, 700);
    line-height: var(--md-sys-typescale-label-large-line-height, 26px);
    letter-spacing: var(--md-sys-typescale-label-large-tracking, -0.3px);
}

.publiceringskalender-value {
    color: var(--md-sys-color-On-Surface, #0F0865);
    font-family: var(--Brand, Inter);
    font-size: var(--md-sys-typescale-body-large-size, 18px);
    font-style: normal;
    font-weight: var(--Weight-Regular, 400);
    line-height: var(--md-sys-typescale-body-large-line-height, 26px);
    letter-spacing: var(--md-sys-typescale-body-large-tracking, -0.3px);
}

.publiceringskalender-label, .publiceringskalender-value{
    margin-bottom: 0;
}

.publiceringskalender-loading-overlay {
    position: absolute;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.72);
    backdrop-filter: blur(1px);
    pointer-events: all;
}

.is-hidden {
    display: none !important;
}



.corr-component {
    border-radius: 8px;
    padding: var(--Spacing-4, 12px) var(--spacing-1, 4px) var(--spacing-4, 12px) var(--spacing-5, 16px);
    background: var(--md-sys-color-Error-Container, #FFD7C7);
    display: flex;
    justify-content: space-between;
}

.corr-component.corr-date-passed {
    background: unset;
    border-radius: var(--Radius-Small, 8px);
    border: 1px solid var(--md-sys-color-Outline-Variant, #CCC);
    margin: -1px 0 -1px -1px;
}

.corr-component p{
    margin: 0;
}

.corr-component p:last-of-type {
    margin-top: var(--Spacing-4, 12px);
}

.corr-component scb-icon-button[data-collapse-toggle] {
    --md-sys-state-hover-state-layer-opacity: 0;
    --md-sys-state-pressed-state-layer-opacity: 0;
    --scb-icon-button-state-layer-color: transparent;
    --md-icon-button-icon-color: var(--md-sys-color-On-Error-Container, #942500);
    --md-icon-button-selected-icon-color: var(--md-sys-color-On-Error-Container, #942500);
}

.corr-component.corr-date-passed scb-icon-button[data-collapse-toggle] {
    --md-icon-button-icon-color: var(--md-sys-color-On-Surface, #0F0865);
    --md-icon-button-selected-icon-color:  
}

.new-date {
    margin-bottom: var(--Spacing-4, 12px);
}

.old-date {
    margin-bottom: var(--Spacing-4, 12px);
    color: var(--N-40, #666);
    text-decoration-line: line-through;
}