@font-face {
    font-family: 'inter-var';
    font-display: swap;
    src: url(fonts/intervar/inter-var.woff2) format("woff2");
}
/****************************************/
/* Colors
/****************************************/
    :root {
    --primary: #111047; /* dark blue arvidsjaur web */
    --primary-dark: #047b42; /* green */
    --primary-light: #2f7f86; /* light green web */
    --secondary: #ffe610; /* logo-yellow web */
    --secondary-dark: #009dcc; /*  blue */
    --secondary-light: #f7f2ed; /* light gray footer */
    --graytone-dark: #a5abb4; /* dark gray 40 */
    --graytone-mid: #dde0e3; /* gray 20 */
    --graytone-light: #f5f5f5; /* gray bg arvidsjaur web */
    --complementary-1: white; /*  */
    --complementary-2: white; /*  */
    --complementary-3: white; /*  */
    --text: black; /* font color web */
    --anchor-text: var(--primary); /* link color */
    --anchor-text-light: white;
    --body-bg: var(--graytone-light);
    --header-bg: white;
    --header-border: var(--primary);
    --header-text: var(--primary);
    --header-tab-focus: var(--secondary);
    --path-text: var(--primary);
    --path-bg: var(--graytone-light);
    --path-border: var(--graytone-mid);
    --button-bg: var(--primary);
    --button-border: var(--primary  );
    --button-text: var(--anchor-text-light);
    --menu-bg: var(--primary);
    --menu-text: var(--anchor-text-light);
    --menu-selected-bg: var(--primary-light);
    --menu-focus-bg: var(--primary-dark);
    --submenu-bg: white;
    --submenu-border: var(--graytone-mid);
    --submenu-text: var(--text);
    --submenu-header-bg: var(--primary);
    --submenu-header-border: white;
    --submenu-header-text: var(--anchor-text-light);
    --submenu-selected-bg: var(--graytone-mid);
    --submenu-selected-border: var(--primary);
    --submenu-selected-text: var(--text);
    --submenu-focus-bg: var(--graytone-light);
    --submenu-focus-border: var(--graytone-mid);
    --submenu-focus-text: var(--text);
    --tab-border: var(--graytone-mid);
    --tab-bg: white;
    --tab-selected-border: var(--primary);
    --tab-focus-border: var(--graytone-dark);
    --tab-selected-bg: var(--body-bg);
    --caption-bg: var(--primary); /* graph header */
    --caption-text: var(--anchor-text-light);
    --table-bg: white;
    --table-head-bg: var(--graytone-light);
    --table-head-text: var(--text);
    --pageinfo-bg: white; /* Page Info, Measure areas, Activities/MeasureList */
    --pageinfo-border: white;
    --pageinfo-text: var(--text);
    --pageinfo-anchor-text: var(--anchor-text);
    --barometer-bg: var(--pageinfo-bg);
    --blockquote-bg: white;
    --blockquote-border: white;
    --content-header-wide-bg: transparent;
    --content-item-border: var(--primary-light);
    --content-itemgroup-1-bg: var(--complementary-1);
    --content-itemgroup-1-item-bg: white;
    --content-itemgroup-2-bg: var(--complementary-3);
    --content-itemgroup-2-item-bg: var(--graytone-light);
    --subcontent-wide-bg: white;
    --subcontent-itemgroup-1-bg: var(--complementary-1);
    --subcontent-itemgroup-2-bg: var(--complementary-2);
    --subcontent-itemgroup-3-bg: var(--complementary-3);
    --subcontent-itemgroup-text: var(--text);
    --subcontent-itemgroup-anchor-text: var(--anchor-text);
    --footer-bg: var(--primary);
    --footer-text: var(--complementary-1);
    --footer-border: var(--secondary);
    --footer-tab-focus: var(--secondary);
}
#mbPath div a:first-child {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 576 512'%3E%3Cpath fill='%2300555c' d='M543.8 287.6c17 0 32-14 32-32.1c1-9-3-17-11-24L512 185V64c0-17.7-14.3-32-32-32H448c-17.7 0-32 14.3-32 32v36.7L309.5 7c-6-5-14-7-21-7s-15 1-22 8L10 231.5c-7 7-10 15-10 24c0 18 14 32.1 32 32.1h32v69.7c-.1 .9-.1 1.8-.1 2.8V472c0 22.1 17.9 40 40 40h16c1.2 0 2.4-.1 3.6-.2c1.5 .1 3 .2 4.5 .2H160h24c22.1 0 40-17.9 40-40V448 384c0-17.7 14.3-32 32-32h64c17.7 0 32 14.3 32 32v64 24c0 22.1 17.9 40 40 40h24 32.5c1.4 0 2.8 0 4.2-.1c1.1 .1 2.2 .1 3.3 .1h16c22.1 0 40-17.9 40-40V455.8c.3-2.6 .5-5.3 .5-8.1l-.7-160.2h32z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: left center;
    background-size: 16px;
    padding-left: 22px;
}
.mb-wide:not(.mb-all) #mbContentMain .ItemGroup,
.mb-wide #mbContentMain .ChildList .ItemGroup.green {
    background-color: var(--complementary-1);
}
.mb-wide #mbContentMain .ItemGroup:nth-child(3n-1),
.mb-wide #mbContentMain .ChildList .ItemGroup.yellow {
    background-color: var(--complementary-3);
}
.mb-wide #mbContentMain .ItemGroup:nth-child(3n-0),
.mb-wide #mbContentMain .ChildList .ItemGroup.blue {
    background-color: var(--complementary-2);
}
.mb-wide #mbContentMain .ChildList .ItemGroup.gray {
    background-color: var(--graytone-light);
}
.mb-cards #mbContentMain .Item {
    background-color: var(--graytone-light);
}
/****************************************/
/* Settings
/****************************************/
:root {
    --header-border-width: 3px;
    --path-border-width: 0px;
    --footer-border-width: 0px;
    --logo-max-width: 186px;
    --logo-min-widht: 120px;
    --sitename-font-size: 30px;
    --sitename-top-position: 0px;
    --sitename-left-border-widht: 0;
    --card-content-padding: 0.5em 1em;
    --card-border-width: 0;
    --card-header-align: center;
    --text-max-widht: 950px;
}
/****************************************/
/* Logo size
/****************************************/
#mbHeader a img {
    width: clamp(var(--logo-min-widht), 26vw, var(--logo-max-width));
}
/****************************************/
/* Fonts
/****************************************/
body, input, button {
    font-family: 'inter-var', Arial, sans-serif;
    font-weight: 400;
    font-size: 20px;
    line-height: 1.5em;
}
#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;
}
h4 {
    font-size: 20px;
    line-height: 1.3em;
    font-weight: 600;
}
#mbSubContent .Item:not(.Barometer) .Caption {
    font-size: 19px;
    font-weight: 600;
}
p {
    margin-bottom: 20px;
    margin-top: 0;
}
#mbMenu, #mbSubMenu, #mbUpdated, #mbPath {
    font-size: 18px;
}
#mbFooter {
    font-size: 18px;
    line-height: 27px;
}
.MB .Ingress, .MB .Ingress p {
    font-size: 24px;
    line-height: 1.5em;
    font-weight: normal;
}
@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;
}
/****************************************/
/* Footer
/****************************************/
#mbFooter {
    overflow: hidden;
    font-weight: 600;
}
#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: 100px;
}
@media screen and (max-width:900px) {
    #mbFooter ul {
        flex-direction: column;
        align-items: flex-start;
    }
    #mbFooter img {
        width: 70px;
    }
}
@media screen and (max-width:600px) {
    #mbFooter img {
        width: 60px;
    }
}
/****************************************/
/* SubMenu
/****************************************/
/* Not mp - wide */
#mbSubMenu ul.Level1>li.Menu {
    display: none;
}
/* Not mp - narrow */
@media screen and (max-width:1200px) {
    #mbSubMenu ul.Level1>li.Menu {
        display: block;
    }
}
/* Mp - wide */
.mb-mp #mbSubMenu ul.Level1>li {
    display: none;
}
.mb-mp #mbSubMenu ul.Level1>li.Expanded {
    display: block;
}
/* Mp - narrow */
@media screen and (max-width:1200px) {
    .mb-mp #mbSubMenu ul.Level1>li.About {
        display: block;
    }
}
/****************************************/
/* Section templates
/****************************************/
#mbSubContent .ItemGroup.blue {
    background-color: #deeaf4;
}
#mbSubContent .ItemGroup.green {
    background-color: #eaf8d3;
}
#mbSubContent .ItemGroup.pink {
    background-color: #fbd0e3;
}
#mbSubContent .ItemGroup.yellow {
    background-color: #fff8cc;
}
#mbSubContent .ItemGroup.gray {
    background-color: #eff2ef;
}
#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;
    }
}
/* Custom graph colors */
.mb-green .highcharts-color-0,
.green .highcharts-color-0 {
    stroke: #046a38 !important;
    fill: #046a38 !important;
}
.mb-yellow .highcharts-color-0,
.yellow .highcharts-color-0 {
    stroke: #e0b700 !important;
    fill: #e0b700 !important;
}
.mb-orange .highcharts-color-0,
.orange .highcharts-color-0 {
    stroke: #e06b00 !important;
    fill: #e06b00 !important;
}
.mb-red .highcharts-color-0,
.red .highcharts-color-0 {
    stroke: #c8102e !important;
    fill: #c8102e !important;
}
.mb-blue-l .highcharts-color-0,
.blue-l .highcharts-color-0 {
    stroke: #9adbe8 !important;
    fill: #9adbe8 !important;
}
.mb-green-l .highcharts-color-0,
.green-l .highcharts-color-0 {
    stroke: #9abeaa !important;
    fill: #9abeaa !important;
}
.mb-yellow-l .highcharts-color-0,
.yellow-l .highcharts-color-0 {
    stroke: #decd63 !important;
    fill: #decd63 !important;
}
.mb-orange-l .highcharts-color-0,
.orange-l .highcharts-color-0 {
    stroke: #d86018 !important;
    fill: #d86018 !important;
}
.mb-pink .highcharts-color-0,
.pink .highcharts-color-0 {
    stroke: #e35d77 !important;
    fill: #e35d77 !important;
}
.mb-gray .highcharts-color-0,
.gray .highcharts-color-0 {
    stroke: #8e8e8b !important;
    fill: #8e8e8b !important;
}