@font-face {
    font-family: 'Stockholmtype';
    font-weight: 400;
    font-display: swap;
    src: url(fonts/stockholmtype/stockholmtype-regular.woff2) format("woff2");
}
@font-face {
    font-family: 'stockholmtype';
    font-weight: 700;
    font-display: swap;
    src: url(fonts/stockholmtype/stockholmtype-bold.woff2) format("woff2");
}
/****************************************/
/* Colors
/****************************************/
    :root {
    --primary: #00837c; /* Stockholm green profile */
    --primary-dark: #006c65; /* Stockholm dark green */
    --primary-light: #c2eee7; /* Stockholm light green */
    --secondary: #006ebf; /* Stockholm blue profile */
    --secondary-dark: #f2a900; /* Not in use */
    --secondary-light: #fcd7b3; /* Not in use */
    --graytone-dark: #878787; /* dark gray profile */
    --graytone-mid: #b2b2b2; /* gray profile */
    --graytone-light: #f5f3ee; /* Stockholm light gray web */
    --complementary-1: #e1f1ef; /* Stockholm lighter green profile */
    --complementary-2: #d9dfcb; /* light green web */
    --complementary-3: #dff0f0; /* light blue web */
    --text: #333333; /* Stockholm font color web */
    --anchor-text: #0664aa; /* Stockholm blue web */
    --anchor-text-light: white;
    --body-bg: var(--graytone-light);
    --header-bg: white;
    --header-border: var(--primary-dark);
    --header-text: var(--text);
    --header-tab-focus: #fcca32; /* Stockholm orange web */
    --path-text: var(--anchor-text);
    --path-bg: var(--graytone-light);
    --path-border: var(--graytone-mid);
    --button-bg: var(--primary-dark);
    --button-border: var(--primary-dark);
    --button-text: var(--anchor-text-light);
    --menu-bg: var(--primary);
    --menu-text: var(--anchor-text-light);
    --menu-selected-bg: var(--primary-dark);
    --menu-focus-bg: var(--primary-dark);
    --submenu-bg: white;
    --submenu-border: white;
    --submenu-text: var(--anchor-text);
    --submenu-header-bg: var(--primary);
    --submenu-header-border: White;
    --submenu-header-text: var(--anchor-text-light);
    --submenu-selected-bg: var(--primary-light);
    --submenu-selected-border: var(--primary);
    --submenu-focus-bg: var(--complementary-1);
    --submenu-focus-border: var(--complementary-1);
    --tab-border: var(--primary-light);
    --tab-bg: white;
    --tab-selected-border: var(--primary);
    --tab-focus-border: var(--primary);
    --tab-selected-bg: var(--graytone-light);
    --caption-bg: var(--primary); /* Graph header */
    --caption-text: var(--anchor-text-light);
    --pageinfo-bg: white; /* Page Info, Measure areas, Activities/MeasureList */
    --pageinfo-border: white;
    --pageinfo-text: var(--text);
    --content-header-wide-bg: N/A;
    --content-item-border: transparent;
    --content-itemgroup-1-bg: var(--graytone-light);
    --content-itemgroup-1-item-bg: white;
    --content-itemgroup-2-bg: white;
    --content-itemgroup-2-item-bg: var(--graytone-light);
    --subcontent-wide-bg: white;
    --subcontent-itemgroup-1-bg: white;
    --subcontent-itemgroup-2-bg: white;
    --subcontent-itemgroup-3-bg: white;
    --footer-bg: var(--text);
    --footer-text: var(--anchor-text-light);
    --footer-border: var(--secondary);
    --footer-tab-focus: #fcca32; /* Stockholm orange web */
}

/****************************************/
/* Settings
/****************************************/
:root {
    --header-border-width: 0px;
    --path-border-width: 0px;
    --footer-border-width: 0px;
}
/****************************************/
/* Logo size
/****************************************/
#mbHeader a img {
    width: clamp(94px, 20vw, 140px);
}
@media screen and (max-width:400px) {
    #mbHeader a strong {
        display: none;
    }
}
#mbHeader .logo strong {
    font-size: 20px;
    line-height: 48px;
    padding-left: 3%;
    margin-left: 5%;
    font-weight: 600;
    border-left: 1px solid #e5e2db;
}
/****************************************/
/* Fonts
/****************************************/
body, input, button, .Item.button h3, .ItemGroup.buttons h3 {
    font-family: Verdana, Arial, sans-serif;
    font-weight: 400;
    font-size: 18px;
    line-height: 1.5em;
}
h1, h2, h3, h4, h5, h6, #mbHeader .logo {
    font-weight: 600;
    font-family: stockholmtype, Arial, sans-serif;
}
#mbHeader .logo strong {
    font-weight: 400;
}
h1 {
    font-size: 42px;
    line-height: 1.3em;
    font-weight: 600;
    margin-top: 6px;
    margin-bottom: 20px;
}
h2 {
    font-size: 30px;
    line-height: 1.2em;
    font-weight: 600;
}
#mbSubContent h2 {
    font-size: 22px;
}
h3 {
    font-size: 22px;
    line-height: 1.3em;
    font-weight: 600;
    margin: 1.5em 0 0.5em 0;
}
.mb-cards .Item h3 {
    font-size: 20px;
    margin: 0 0 0.5em 0;
    font-weight: 400;
}
h4 {
    font-size: 20px;
    line-height: 1.3em;
    font-weight: 600;
    margin: 1.5em 0 0.5em 0;
}
#mbSubContent .Item:not(.Barometer) .Caption {
    font-size: 19px;
    font-weight: 400;
}
p {
    margin-bottom: 20px;
    margin-top: 0;
}
#mbContentDescr .MeasureTool {
    margin-bottom: 20px;
}
#mbMenu, #mbSubMenu, #mbUpdated, #mbPath, .mb-cards .Item p {
    font-size: 16px;
}
#mbFooter {
    font-size: 18px;
    line-height: 27px;
}
.MB .Ingress, .MB .Ingress p,
#mbContentDescr p:first-of-type strong,
#mbContentMenuContent p:first-of-type strong {
    font-size: 24px;
    line-height: 1.5em;
    font-weight: 500;
    font-family: stockholmtype, Arial, sans-serif;
}
#mbMenu li a {
    font-weight: 400;
}
@media screen and (max-width:1350px) {
    h1 {
        font-size: 38px;
    }
    h2 {
        font-size: 28px;
    }
    h3 {
        font-size: 21px;
    }
    .MB .Item h3 {
        font-size: 19px;
    }
    h4 {
        font-size: 19px;
    }
    body {
        font-size: 19px;
    }
    p {
        margin-bottom: 19px;
    }
    #mbMenu, #mbSubMenu {
        font-size: 16px;
    }
}
@media screen and (max-width:768px) {
    h1 {
        font-size: 30px;
    }
    h2 {
        font-size: 26px;
    }
    h3 {
        font-size: 20px;
    }
    h4, #mbSubContent .Caption, .MB .Item h3 {
        font-size: 19px;
    }
    body {
        font-size: 18px;
    }
    p {
        margin-bottom: 18px;
    }
    .MB .Ingress, .MB .Ingress p {
        font-size: 20px;
    }
}
@media screen and (max-width:480px) {
    h1 {
        font-size: 28px;
    }
    h2, #mbSubContent h2 {
        font-size: 24px;
    }
    h3 {
        font-size: 20px;
    }
    h4 {
        font-size: 18px;
    }
    body {
        font-size: 18px;
        line-height: 1.5em;
    }
    p {
        margin-bottom: 18px;
    }
    .MB .Ingress, .MB .Ingress p {
        font-size: 18px;
    }
}
#mbCaption {
    display: none;
}

/****************************************/
/* SubMenu
/****************************************/
/* wide */
    #mbContainer.mb-tema #mbSubMenu ul.Level1>li.Menu {
        display: none;
    }
    #mbContainer:not(.mb-tema) #mbSubMenu ul.Level1>li:not(.Expanded) {
        display: none;
    }
/* narrow */
@media screen and (max-width:1200px) {
    #mbSubMenu ul.Level1>li.Menu {
        display: block;
    }
    #mbContainer.mb-tema #mbSubMenu ul.Level1>li.Menu {
        display: block;
    }
    #mbContainer:not(.mb-tema) #mbSubMenu ul.Level1>li:not(.Expanded) {
        display: block;
    }
}

/****************************************/
/* Footer
/****************************************/
#mbFooter {
    overflow: hidden;
    font-weight: 400;
}
#mbFooter ul {
    margin: 2em 0;
    padding: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
#mbFooter li {
    list-style: none;
    padding: 0;
}
#mbFooter img {
    width: 133.5px;
}
@media screen and (max-width:900px) {
    #mbFooter ul {
        flex-direction: column;
        align-items: flex-start;
    }
}

/****************************************/
/* Section templates
/****************************************/

#mbSubContent .ItemGroup.blue {
    background-color: #deeaf4; /* Light blue */
}
#mbSubContent .ItemGroup.green {
    background-color: #eaf8d3; /* Light green */
}
#mbSubContent .ItemGroup.pink {
    background-color: #fbd0e3; /* Pink */
}
#mbSubContent .ItemGroup.yellow {
    background-color: #fff8cc; /* Light yellow */
}
#mbSubContent .ItemGroup.gray {
    background-color: #eff2ef; /* Light gray */
}
#mbSubContent .ItemGroup.white {
    background-color: White;
}
#mbSubContent .ItemGroup.transparent {
    background-color: transparent;
}
/****************************************/
/* Page customizations
/****************************************/
@media screen and (min-width:700px) {
    .mb-img-left #mbContentImage {
        float: left;
        width: 30%;
        margin-right: 1em;
    }
    .mb-img-right #mbContentImage {
        float: right;
        width: 30%;
        margin-left: 1em;
    }
    .mb-img-left #mbContentImage img,
    .mb-img-right #mbContentImage img {
        object-fit: contain;
        height: auto;
    }
    .xmb-wide.mb-img-left #mbContentHeader,
    .xmb-wide.mb-img-right #mbContentHeader {
        max-width: 1000px;
        overflow: hidden;
    }
}

@media print {
    * {
        font-family: Arial, sans-serif;
        font-size: 14px;
    }
    .mb-articlepage p {
        font-family: serif;
    }
    .MB *.Ingress {
        font-size: 18px;
        font-weight: bold;
    }
    h1 {
        font-size: 36px;
    }
    html body {
        background: none;
    }
    #mbContainer div {
        margin: 0 !important;
        padding: 12px;
        width: 100%;
        border: none;
    }
    #mbContainer, #mbHeader, #mbMenu, #mbMain, #mbContent {
    }
    #mbInternal, #mbHeader, #mbMenu, #mbPath, #mbSubMenu, #mbSubContent, #mbFooter, #mbContact {
        display: none;
    }
}
