/* BASIC LAYOUT
============================================================================================= */
#header {
    background-color: #004b8d;
    position: relative;
    margin: 0 0 60px;
    min-width: 993px;
}

    #header.black {
        background-color: #000;
    }

.login #header {
    height: 96px;
}

#header > div {
    margin: 0 auto;
    min-height: 60px;
    padding: 0 4px 36px;
    position: relative;
    width: 985px;
}

.header__navigation {
    width: 100% !important;
    min-height: auto !important;
    display: flex !important;
    background: #11589B !important;
    padding: 0 !important;
}

    .header__navigation .nav-supp {
        align-items: center;
        height: 100%;
        left: inherit !important;
        position: relative !important;
        justify-content: flex-end;
    }

        .header__navigation .nav-supp .login-toggle-button button {
            background: none;
            padding-top: 15px;
        }

        .header__navigation .nav-supp .additional-info__left,
        .header__navigation .nav-supp .additional-info__right {
            margin: 0;
        }

            .header__navigation .nav-supp .additional-info__right a {
                color: #FFC17E !important;
            }

.service #header > div {
    min-height: 72px;
    padding-bottom: 48px;
}

.service.no-subnav #header > div {
    padding-bottom: 0;
}

.service.popup #header > div {
    min-height: 0;
    padding-bottom: 0;
}

.service #header {
    background-color: #1a1a1a;
    border-top: 48px solid #262626;
    margin-bottom: 0;
}

.service.webbkurs-arbetsratt #header,
.service.webbkurs-forvaltning #header,
.service.webbkurs-gdpr #header,
.service.webbkurs-samhallsbyggnad #header,
.service.webbkurs-mark-och-miljo #header,
.service.webbkurs-skola #header,
.service.webbkurs-social #header,
.service.webbkurs-upphandling #header,
.service.webbkurs-arbetsmiljo #header {
    border-color: #262626;
}

.service.arbetsmiljonet #header {
    border-color: #e5738f;
}

.service.playarbetsliv #header,
.service.arbetsrattsnet #header {
    border-color: #f26f7a;
}

.service.straffrattsnet #header {
    border-color: #54c4d6;
}

.service.djurnet #header {
    border-color: #d0d92b;
}

.service.eunet #header {
    border-color: #219ed9;
}

.service.familjenet #header {
    border-color: #694cbf;
}

.service.fastighetsnet #header,
.service.subject-fastighet #header {
    border-color: #9fd92b;
}

.service.foretagarnet #header {
    border-color: #d97c2b;
}

.service.forvaltningsnet #header,
.service.subject-offentlig-forvaltning #header {
    border-color: #d9682b;
}

.service.immaterialnet #header {
    border-color: #1d76c4;
}

.service.insolvensnet #header {
    border-color: #38c77f;
}

.service.itnet #header,
.service.playdataskydd #header,
.service.subject-it-och-dataskydd #header {
    border-color: #3288c9;
}

.service.juridiknet #header {
    border-color: #1b6db5;
}

.service.kommentarer #header {
    border-color: #2bb6d9;
}

.service.livsmedelsnet #header {
    border-color: #6bd149;
}

.service.marknadsnet #header {
    border-color: #0965b5;
}

.service.migrationsnet #header {
    border-color: #8360bf;
}

.service.playmiljo #header,
.service.miljonet #header,
.service.climatenet #header,
.service.subject-miljo #header {
    border-color: #52cc52;
}

.service.momsnet #header {
    border-color: #45c49e;
}

.service.polisnet #header {
    border-color: #2ba8d9;
}

.service.raddningsnet #header,
.service.playdronare #header,
.service.sakerhetsnet #header,
.service.subject-ordning-och-sakerhet #header {
    border-color: #44c244;
}

.service.rattsfallsnet #header {
    border-color: #005cad;
}

.service.service-blue #header {
    border-color: #11589B;
}

.service-blue #header {
    background-color: #06427C;
    border-top: 48px solid #06427C;
    margin-bottom: 0;
}

.service.playsamhallsbyggnad #header,
.service.samhallsbyggnadsnet #header,
.service.subject-samhallsplanering #header {
    border-color: #39bd39;
}

.service.serveringstillstandsnet #header {
    border-color: #9369bf;
}

.service.sjukvardsnet #header,
.service.subject-halso-sjukvard #header,
.service.subject--och-halso-sjukvard #header {
    border-color: #e58ade;
}

.service.skattenet #header {
    border-color: #44bec2;
}

.service.playskola #header,
.service.skolnet #header,
.service.subject-skola #header {
    border-color: #d92b2b;
}

.service.playsocial #header,
.service.socialnet #header,
.service.subject-sociala-fragor #header {
    border-color: #b07dd1;
}

.service.socialforsakringsnet #header {
    border-color: #c57bd4;
}

.service.trafiknet #header {
    border-color: #32c262;
}

.service.playupphandling #header,
.service.upphandlingsnet #header,
.service.subject-upphandling #header {
    border-color: #4246a6;
}

.service.myndighetsbeslut #header {
    border-color: #d9a52b;
}

.service.lagboken #header {
    border-color: #005cad;
}

.service.hrnet #header {
    border-color: #f26fa6;
}

.service.studentnet-skola #header {
    border-color: #d92b2b;
}

.service.studentnet-sjukvard #header {
    border-color: #e58ade;
}

.service.studentnet-social #header {
    border-color: #b07dd1;
}

.service.studentnet-arbetsratt #header,
.service.subject-arbetsratt #header {
    border-color: #f26f7a;
}

.service.studentnet-migration #header {
    border-color: #8360bf;
}

.service.studentnet-samhallsbyggnad #header {
    border-color: #39bd39;
}

.service.studentnet-forvaltning #header {
    border-color: #d9682b;
}

.service.kemikalienet #header {
    border-color: #6bd149;
}

.service.hyresnet #header {
    border-color: #9fd92b;
}

.service.skadestandsnet #header {
    border-color: #4ec3e0;
}

.service.subject-halso--och-sjukvard #header {
    border-color: #e58ade;
}

.service.popup #header {
    border-top: none;
    position: relative;
}

#main:not(.full-width),
.main:not(.full-width) {
    margin: 0 auto;
    padding: 36px 4px 72px;
    width: 985px;
}

.document #main {
    padding-top: 96px;
}

#footer {
    background: #004B8D;
    clear: both;
    color: #fff;
    padding: 40px 0 36px;
    overflow: hidden;
}

    #footer .col-title {
        padding-bottom: 0.5rem;
        border-bottom: 2px solid white;
        font-size: 24px;
        margin-bottom: 1rem;
        text-transform: uppercase;
    }

    #footer > div {
        margin: 0 auto;
        padding: 0 4px;
        position: relative;
        width: 985px;
    }

    #footer .list-items {
        list-style: none;
        margin: 0;
        padding: 0;
    }

        #footer .list-items li {
            margin-bottom: 0.5rem;
            color: white !important;
        }

            #footer .list-items li a {
                color: white;
            }

                #footer .list-items li a:hover {
                    text-decoration: none;
                    color: white;
                }

    #footer .footer-container {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 50px;
    }

        #footer .footer-container .footer-col {
            width: calc(33% - 78px);
        }

@media only screen and (max-width: 1024px) {
    #footer .footer-container {
        gap: 30px;
    }

        #footer .footer-container .footer-col {
            width: calc(50% - 25px);
        }
}

@media only screen and (max-width: 768px) {
    #footer .footer-container {
        gap: 25px;
    }

        #footer .footer-container .footer-col {
            width: 100%;
        }
}

.certificates:not(#foo) {
    position: relative;
    margin-top: 40px;
    padding-top: 40px;
}

.certificates::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
    width: 100vw;
    border-top: 1px solid #06427C;
}

.certificates {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: flex-start;
    list-style: none;
    margin-bottom: 0;
}

@media only screen and (max-width: 768px) {
    .certificates {
        flex-direction: column;
        gap: 20px;
    }
}

.certificates img {
    max-height: 80px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.service #header > div.no-menu {
    padding-bottom: 10px;
}

    .service #header > div.no-menu #service {
        padding-top: 15px;
    }

.service #header div.no-menu #service h1 {
    font: inherit;
    margin: 0;
}

    .service #header div.no-menu #service h1 > a,
    .service #header div.no-menu #service > a {
        font: inherit;
        font-family: "Myriad W01 Bd", sans-serif;
        padding-left: 0;
        max-width: 100%;
    }

        .service #header div.no-menu #service h1 > a::before,
        .service #header div.no-menu #service > a::before {
            display: none;
        }

@media only screen and (max-width:1023px) {
    .service #header > div.no-menu .nav-supp_2 {
        width: 100%;
        left: 0;
    }

    .service #header > div.no-menu .nav-supp_2__search[class],
    .service #header > div.no-menu .nav-supp_2__search-link[class] {
        position: absolute;
        bottom: 10px;
        top: auto;
        right: 0;
    }

    .service #header > div.no-menu .nav-supp_2 .icon-buoy {
        position: absolute;
        left: 0;
        /* width: 76px;*/
        text-decoration: none;
        bottom: 14px;
        line-height: 32px;
        color: #fff;
        font-size: 13px;
        text-align: left;
        margin-right: 0;
    }

    .service #header > div.no-menu .nav-supp_2 .icon2-a.icon-buoy:after {
        margin-left: 5px;
    }
}

@media only screen and (min-width: 992px) {
    .service #header > div.no-menu {
        min-height: initial;
    }

        .service #header > div.no-menu .nav-supp_2 .icon2-a.icon-buoy {
            margin-top: 11px;
        }
}

@media only screen and (min-width: 1280px) {
    #header {
        margin-bottom: 70px;
    }

    .login #header {
        height: 112px;
    }

    #header > div,
    #main:not(.full-width),
    .main:not(.full-width),
    #footer > div {
        width: 1215px;
    }

    #header > div {
        min-height: 70px;
        padding: 0 5px 56px;
    }

    .service #header > div {
        min-height: 84px;
        padding-bottom: 56px;
    }

    .service.no-subnav #header > div {
        min-height: 72px;
        padding-bottom: 0;
    }

    .service #header > div.no-menu {
        min-height: initial;
    }

    #footer > div {
        padding: 0 5px;
    }

    #main:not(.full-width) {
        padding: 42px 5px 84px;
    }

    .document #main {
        padding-top: 112px;
    }

    .service #header {
        border-top-width: 56px;
    }

    #footer {
        padding: 60px 0;
    }
}

@media only screen and (max-width: 1023px) {
    #header {
        min-width: 0;
    }

        .sticky-header .nav-main,
        #header > div,
        #main:not(.full-width),
        #footer > div {
            width: 685px;
        }

        #header > div {
            min-height: 96px;
            padding-bottom: 0;
            text-align: center;
        }

    .service #header > div {
        min-height: 60px;
        padding: 0px;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
    }

    .sticky-header .nav-main {
        bottom: auto;
        margin: 0;
        position: fixed;
        top: 0;
        z-index: 3;
    }
}

@media only screen and (max-width: 767px) {
    .sticky-header .nav-main,
    #header > div,
    .service #header > div,
    #main:not(.full-width),
    .main:not(.full-width),
    #footer > div {
        padding-left: 20px;
        padding-right: 20px;
        width: auto;
    }

    #header {
        margin-bottom: 42px;
    }

    .service #header {
        border-top-width: 42px;
    }

    #header > div {
        min-height: 42px;
    }

    .service #header > div {
        padding-bottom: 0;
    }

        .service #header > div.no-menu #service {
            margin: auto;
        }

    #main:not(.full-width) {
        padding-top: 18px;
    }

    .document #main {
        padding-top: 72px;
    }

    .login #header {
        height: auto;
    }

    .service #header > div.no-menu .nav-supp_2__search[class],
    .service #header > div.no-menu .nav-supp_2__search-link[class] {
        right: 10px;
    }

    .service #header > div.no-menu .nav-supp_2 .icon-buoy {
        left: 20px;
    }
}

@media only screen and (max-width:350px) {
    .service #header > div.no-menu .nav-supp_2 .icon-buoy {
        left: 10px;
    }
}

/* LAYOUT
 * Specific layouts based on body layout classes
============================================================================================= */

/* Layout-1 (Service)
 * Start page
-------------------------------------------------------------- */
.layout-1 .content-1 {
    float: left;
    width: 645px;
}

.layout-1 .content-1-1 {
    float: left;
    width: 305px;
}

.layout-1 .content-1-2 {
    float: right;
    width: 305px;
}

.layout-1 .content-2 {
    float: right;
    width: 305px;
}

@media only screen and (min-width: 1280px) {
    .layout-1 .content-1 {
        width: 795px;
    }

    .layout-1 .content-1-1 {
        width: 375px;
    }

    .layout-1 .content-1-2 {
        width: 375px;
    }

    .layout-1 .content-2 {
        width: 375px;
    }
}

@media only screen and (max-width: 1023px) {
    .layout-1 .content-1 {
        float: none;
        width: auto;
    }

    .layout-1 .content-1-1 {
        clear: both;
        float: left;
        width: 325px;
    }

    .layout-1 .content-1-2 {
        float: right;
        width: 325px;
    }

    .layout-1 .content-2 {
        clear: left;
        float: left;
        width: 325px;
    }
}

@media only screen and (max-width: 767px) {
    .layout-1 .content-1,
    .layout-1 .content-1-1,
    .layout-1 .content-1-2,
    .layout-1 .content-2 {
        float: none;
        width: auto;
    }
}

/* Layout-2 (jpinfonet.se)
 * Start page
-------------------------------------------------------------- */
.layout-2 .content-1 {
    float: left;
    width: 730px;
}

.layout-2 .content-2 {
    float: right;
    width: 220px;
}

.layout-2 h1 {
    float: left;
    margin-bottom: 48px;
    width: 475px;
}

    .layout-2 h1 a {
        color: #1a1a1a;
        text-decoration: none;
    }

        .layout-2 h1 a:hover,
        .layout-2 h1 a:focus,
        .layout-2 h1 a:active {
            color: #004b8d;
        }

        .layout-2 h1 a .more {
            color: #004b8d;
            text-decoration: underline;
        }

.layout-2 blockquote {
    float: right;
    width: 220px;
}

    .layout-2 blockquote p.quotee {
        margin-bottom: 48px;
    }

@media only screen and (min-width: 1280px) {
    .layout-2 .content-1 {
        width: 900px;
    }

    .layout-2 .content-2 {
        width: 270px;
    }

    .layout-2 h1 {
        margin-bottom: 56px;
        width: 585px;
    }

    .layout-2 blockquote {
        width: 270px;
    }

        .layout-2 blockquote p.quotee {
            margin-bottom: 56px;
        }
}

@media only screen and (max-width: 1023px) {
    .layout-2 .content-1,
    .layout-2 .content-2 {
        float: none;
        width: auto;
    }

    .layout-2 h1 {
        width: 415px;
    }

    .layout-2 blockquote {
        width: 235px;
    }

    .layout-2 h1 + .cta {
        float: right;
        margin-bottom: 0;
        width: 235px;
    }

        .layout-2 h1 + .cta > a {
            margin-bottom: 36px;
        }
}

@media only screen and (max-width: 767px) {
    .layout-2 h1 {
        float: none;
        margin-bottom: 24px;
        text-align: center;
        width: auto;
    }

        .layout-2 h1 a {
            display: block;
        }

    .layout-2 blockquote {
        float: none;
        text-align: center;
        width: auto;
    }

    .layout-2 .content-1,
    .layout-2 .content-2 {
        float: none;
        width: auto;
    }

    .layout-2 .cta {
        margin-bottom: 36px;
    }

        .layout-2 .cta a {
            margin: 0 auto;
            width: 170px;
        }

    .layout-2 blockquote p.quotee {
        margin-bottom: 24px;
    }
}

@media only screen and (max-width: 479px) {
    .layout-2 .cta a {
        width: auto;
    }
}

/* Layout-3 (jpinfonet.se)
 * Content page
-------------------------------------------------------------- */
.layout-3 .content-1 {
    float: left;
    width: 220px;
}

.layout-3 .content-2 {
    float: right;
    width: 730px;
}

.layout-3 .content-2-1 {
    float: left;
    width: 475px;
}

.layout-3 .content-2-2 {
    float: right;
    width: 220px;
}

@media only screen and (min-width: 1280px) {
    .layout-3 .content-1 {
        width: 270px;
    }

    .layout-3 .content-2 {
        width: 900px;
    }

    .layout-3 .content-2-1 {
        width: 585px;
    }

    .layout-3 .content-2-2 {
        width: 270px;
    }
}

@media only screen and (max-width: 1023px) {
    .layout-3 .content-1 {
        float: none;
        width: auto;
    }

    .layout-3 .content-2 {
        float: none;
        width: auto;
    }

    .layout-3 .content-2-1 {
        max-width: 415px;
        width: auto;
    }

    .layout-3 .content-2-2 {
        width: 235px;
    }
}

@media only screen and (max-width: 767px) {
    .layout-3 .content-2-1,
    .layout-3 .content-2-2 {
        float: none;
        max-width: none;
        width: auto;
    }
}

/* Layout-4 (Service)
 * Wide content left
 * Narrow right
-------------------------------------------------------------- */
.layout-4 .content-1 {
    float: left;
    width: 645px;
}

.layout-4 .content-2 {
    float: right;
    width: 305px;
}

@media only screen and (min-width: 1280px) {
    .layout-4 .content-1 {
        width: 585px;
    }

    .layout-4 .content-2 {
        width: 375px;
    }
}

@media only screen and (max-width: 1023px) {
    .layout-4 .content-1,
    .layout-4 .content-2 {
        float: none;
        width: auto;
    }
}

/* Layout-5 (Service)
 * Narrow left
 * Wide content right
-------------------------------------------------------------- */
.layout-5 .content-1 {
    float: left;
    width: 305px;
}

.layout-5 .content-2 {
    float: right;
    width: 645px;
}

@media only screen and (min-width: 1280px) {
    .layout-5 .content-1 {
        width: 375px;
    }

    .layout-5 .content-2 {
        width: 795px;
    }
}

@media only screen and (max-width: 1023px) {
    .layout-5 .content-1 {
        width: 235px;
    }

    .layout-5 .content-2 {
        width: 415px;
    }
}

@media only screen and (max-width: 767px) {
    .layout-5 .content-1,
    .layout-5 .content-2 {
        float: none;
        width: auto;
    }

    .layout-5 .content-1 {
        padding-bottom: 24px;
    }
}

/* Layout-6 (Service)
 * Full width
-------------------------------------------------------------- */

/* Layout-7
 * Log in (protected page)
-------------------------------------------------------------- */
.layout-7 .content-1 {
    width: 475px;
    margin: 0 auto;
}

@media only screen and (min-width: 1280px) {
    .layout-7 .content-1 {
        width: 585px;
    }
}

@media only screen and (max-width: 1023px) {
    .layout-7 .content-1 {
        width: 505px;
    }
}

@media only screen and (max-width: 767px) {
    .layout-7 .content-1 {
        width: auto;
    }
}

/* Layout-9
 * Wide content left
 * Narrow right
 * Keep left content wide on larger screens
-------------------------------------------------------------- */
.layout-9 .content-1 {
    float: left;
    width: 645px;
    position: relative;
}

.layout-9 .content-2 {
    float: right;
    width: 305px;
}

@media only screen and (min-width: 1280px) {
    .layout-9 .content-1 {
        width: 795px;
    }

    .layout-9 .content-2 {
        width: 375px;
    }
}

@media only screen and (max-width: 1023px) {
    .layout-9 .content-1,
    .layout-9 .content-2 {
        float: none;
        width: auto;
    }
}

/* Layout for Episerver Blocks
-------------------------------------------------------------- */
.header-blocks .col-100 {
    float: right;
    width: 730px;
}

.col-66 {
    float: left;
    width: 475px;
}

.col-33,
.main-blocks .col-50 {
    float: right;
    width: 220px;
}

.blocks {
    margin-left: -35px;
}

    .blocks ul,
    .blocks ol {
        margin-left: 23px;
    }

    .blocks h2.heading-first {
        margin-bottom: 5px;
    }

.layout-3 .main-blocks .col-100 {
    max-width: 475px;
    width: 100%;
}

.blocks > * {
    margin-left: 35px;
}

.main-blocks > * {
    margin-bottom: 20px;
}

.header-blocks .col-50 {
    width: 347.5px;
    float: left;
}

.header-blocks {
    margin-bottom: 35px;
}

@media only screen and (min-width: 1280px) {
    .col-33,
    .main-blocks .col-50 {
        width: 270px;
    }

    .header-blocks .col-100 {
        width: 900px;
    }

    .col-66 {
        width: 585px;
    }

    .blocks {
        margin-left: -45px;
    }

        .blocks > * {
            margin-left: 45px;
        }

    .header-blocks .col-50 {
        width: 427.5px;
    }

    .header-blocks {
        margin-bottom: 45px;
    }

    .layout-3 .main-blocks .col-100 {
        max-width: 585px;
    }
}

@media only screen and (max-width: 1023px) {
    .blocks {
        width: 415px;
    }

    .layout-3 .main-blocks > * {
        max-width: 475px;
        width: 100%;
    }

    .header-blocks .col-100 {
        width: 685px;
    }

    .col-66 {
        width: 445px;
    }

    .header-blocks .col-50 {
        width: 325px;
    }

    .col-33 {
        width: 205px;
    }

    .header-blocks {
        width: auto;
        margin-left: -35px;
    }

        .header-blocks > * {
            margin-left: 35px;
        }

        .header-blocks .content-1 {
            width: 205px;
            float: left;
        }

        .header-blocks .content-2 {
            width: 685px;
            float: left;
        }

        .header-blocks .content-2-1 {
            max-width: 445px;
        }

        .header-blocks.header-blocks_2 .col-100,
        .header-blocks.header-blocks_2 .col-66,
        .header-blocks.header-blocks_2 .col-50,
        .header-blocks.header-blocks_2 .col-33 {
            width: auto;
            float: none;
        }
}

@media only screen and (max-width: 767px) {
    .blocks {
        width: auto;
    }

    .header-blocks {
        display: none;
    }

        .header-blocks.header-blocks_2 {
            display: block;
        }

    .blocks {
        width: auto;
        margin-left: 0px;
    }

        .blocks > * {
            margin-left: 0px;
        }
}

/* ELEMENTS
================================================================================ */

/* Open in new window
-------------------------------------------------------------- */
a[target="_blank"]:not(.button):after {
    background: url(/static/i/icons-xxs.png) 10px 0 no-repeat;
    content: "";
    display: inline-block;
    height: 12px;
    margin: 1px 0 -1px 0;
    padding-left: 10px;
    width: 12px;
}

.svg a[target="_blank"]:after {
    background-image: url(/static/i/icons-xxs.svg);
}

a.t-color-white[target="_blank"]:not(.button):after {
    background-image: url(/static/i/target-blank.svg);
}

a[target="_blank"]:hover,
a[target="_blank"]:active,
a[target="_blank"]:focus {
    color: #1a1a1a;
}

#service a[target=_blank]:after,
.certificates a[target=_blank]:after, /* no icon on certificates footer links */
p.cta a[target=_blank]:after { /* no icon on call to action */
    content: none;
}

/* Facebook
-------------------------------------------------------------- */
p.facebook {
    padding-top: 12px;
}

    p.facebook a:before {
        background: url(/static/i/icon-facebook.png) center left no-repeat;
        content: "";
        display: inline-block;
        height: 24px;
        margin: 0 0 -8px;
        padding-right: 10px;
        width: 24px;
    }

.svg p.facebook a:before {
    background-image: url(/static/i/icon-facebook.svg);
}

p.facebook a:hover,
p.facebook a:active,
p.facebook a:focus {
    color: #1a1a1a;
}

@media only screen and (min-width: 1280px) {
    p.facebook {
        padding-top: 14px;
    }

        p.facebook a:before {
            margin: 0 0 -6px;
        }
}

/* Read more-links
-------------------------------------------------------------- */
h1 .more {
    font: 16px/20px "Myriad W01 Regular", sans-serif;
}

@media only screen and (max-width: 767px) {
    h1 .more {
        line-height: 18px;
    }
}

/* RSS
-------------------------------------------------------------- */
.rss {
    background: url(/static/i/icons-s.png) -400px 0 no-repeat #1a1a1a;
    display: block;
    float: right;
    height: 24px;
    overflow: hidden;
    position: absolute;
    right: 0;
    text-indent: -999px;
    top: 0;
    width: 24px;
}

.svg .rss {
    background-image: url(/static/i/icons-s.svg);
}

.rss:hover,
.rss:active,
.rss:focus {
    background-color: #004b8d;
}

@media only screen and (min-width: 1280px) {
    .rss {
        margin: 2px 0;
    }
}

/* Close
-------------------------------------------------------------- */
.close {
    background: url(/static/i/icons-s.png) -500px -100px no-repeat;
    display: block;
    float: right;
    height: 24px;
    overflow: hidden;
    position: absolute;
    right: 0;
    text-indent: -999px;
    top: 0;
    width: 24px;
}

.svg .close {
    background-image: url(/static/i/icons-s.svg);
}

.close:hover,
.close:active,
.close:focus {
    opacity: 0.8;
}

@media only screen and (min-width: 1280px) {
    .close {
        margin: 2px 0;
    }
}

/* Call to action
-------------------------------------------------------------- */
p.cta a {
    background: #004b8d;
    border-radius: 2px;
    color: #fff;
    display: block;
    font: 24px/48px "Myriad W01 Bd", sans-serif;
    margin: 0 0 48px;
    padding: 0 15px;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
}

    p.cta a:hover {
        color: #fff;
    }

@media only screen and (min-width: 1280px) {
    p.cta a {
        font-size: 28px;
        line-height: 56px;
        margin-bottom: 56px;
        padding: 0 20px;
    }
}

@media only screen and (max-width: 767px) {
    p.cta a {
        font-size: 20px;
    }
}

/* Edit
-------------------------------------------------------------- */
.edit {
    background: url(/static/i/icons-xs.png) -100px -300px no-repeat #004b8d;
    display: block;
    height: 16px;
    overflow: hidden;
    text-indent: -999px;
    width: 16px;
}

.svg .edit {
    background-image: url(/static/i/icons-xs.png);
    background-image: url(/static/i/icons-xs.svg);
}

.edit:hover,
.edit:active,
.edit:focus {
    background-color: #1a1a1a;
}

.section .edit {
    left: -24px;
    position: absolute;
}

@media only screen and (min-width: 1280px) {
    .edit {
        margin: 4px 0;
    }
}

@media only screen and (max-width: 479px) {
    .section .edit {
        left: 0;
    }

        .section .edit + h4 {
            padding-left: 24px;
        }
}

.section .edit.button {
    right: 0;
    left: auto;
    overflow: auto;
    text-indent: 0;
    width: auto;
    height: auto;
    text-transform: none;
    padding-left: 40px;
    background-image: none;
    line-height: 1.2;
}

    .section .edit.button::before {
        content: "";
        width: 32px;
        height: 32px;
        background-image: url(/static/i/legal-investigation-icons.svg);
        background-position: -694px -182px;
        transform: scale(0.7);
        position: absolute;
        left: 5px;
        top: 0;
    }

/* Clock
-------------------------------------------------------------- */
.clock {
    background: url(/static/i/icons-xs.png) -200px -789px no-repeat;
    display: block;
    height: 19px;
    overflow: hidden;
    text-indent: -999px;
    width: 19px;
}

.svg .clock {
    background-image: url(/static/i/icons-xs.svg);
}

/* Time and date
-------------------------------------------------------------- */
time {
    color: #575757;
    display: block;
    font-family: "Myriad W01 It", sans-serif;
}

.meta time,
.m-meta time {
    color: inherit;
    font-family: "Myriad W01 Regular", sans-serif;
}

/* Description
-------------------------------------------------------------- */
.description {
    font-family: "Myriad W01 It", sans-serif;
}

h2 + .description {
    margin-top: -12px;
}

@media only screen and (min-width: 1280px) {
    h2 + .description {
        margin-top: -14px;
    }
}

/* Mark
-------------------------------------------------------------- */
mark {
    background: #eee;
    color: inherit;
    display: inline-block;
}

    mark[data-selected] {
        background: #004b8d;
        color: #fff;
    }

/* Paging
-------------------------------------------------------------- */
.paging {
    margin: 12px 0;
    text-align: center;
    font-family: "Myriad W01 Bd", sans-serif;
}

.paging__wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    max-width: 100%;
    padding: 0 8px;
}

.paging a,
.paging .ellipsis,
.paging .current-page,
.paging .prev-page,
.paging .next-page {
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 32px; /* Slightly smaller for compactness */
    line-height: 32px;
    min-width: 32px;
    text-align: center;
    text-decoration: none;
    transition: all 0.2s ease;
    font-size: 16px;
}

    /* Focus states for accessibility */
    .paging a:focus,
    .paging .current-page:focus {
        outline: 2px solid #0066cc;
        outline-offset: 2px;
    }

/* Previous/Next buttons */
.paging .prev-page,
.paging .next-page {
    background: #f0f0f0;
    color: #666;
    margin-bottom: 5px;
}

    .paging .prev-page:hover,
    .paging .next-page:hover,
    .paging .prev-page:focus,
    .paging .next-page:focus {
        background: #004b8d;
        color: #fff;
    }

/* Active page */
.paging .current-page {
    background: #004b8d;
    color: #fff;
    font-weight: bold;
}

/* Page links */
.paging .pages a {
    background: #fff;
    color: #004b8d;
    border: 1px solid #ddd;
    margin-bottom: 5px;
}

    .paging .pages a:hover,
    .paging .pages a:focus {
        background: #004b8d;
        color: #fff;
        border-color: #004b8d;
    }

/* Ellipsis */
.paging .ellipsis {
    color: #666;
    line-height: 32px;
}

/* Hide structural text for screen readers */
.paging .structural {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
}

/* Responsive adjustments */
@media (max-width: 600px) {
    .paging__wrapper {
        gap: 6px; /* Tighter spacing for small screens */
    }

    .paging a,
    .paging .ellipsis,
    .paging .current-page,
    .paging .prev-page,
    .paging .next-page {
        height: 28px;
        line-height: 28px;
        min-width: 28px;
        font-size: 14px;
    }
}

/* Clearfix for older browsers */
.cf::after {
    content: "";
    display: table;
    clear: both;
}

.arbetsmiljonet .m.m-results .paging a {
    background: #e5738f;
    color: #1a1a1a;
}

.webbkurs-arbetsratt .m.m-results .paging a,
.playarbetsliv .m.m-results .paging a,
.arbetsrattsnet .m.m-results .paging a {
    background: #f26f7a;
    color: #1a1a1a;
}

.straffrattsnet .m.m-results .paging a {
    background: #54c4d6;
    color: #1a1a1a;
}

.djurnet .m.m-results .paging a {
    background: #d0d92b;
    color: #1a1a1a;
}

.eunet .m.m-results .paging a {
    background: #219ed9;
    color: #1a1a1a;
}

.familjenet .m.m-results .paging a {
    background: #694cbf;
}

.fastighetsnet .m.m-results .paging a {
    background: #9fd92b;
    color: #1a1a1a;
}

.foretagarnet .m.m-results .paging a {
    background: #d97c2b;
    color: #1a1a1a;
}

.webbkurs-forvaltning .m.m-results .paging a,
.forvaltningsnet .m.m-results .paging a {
    background: #d9682b;
    color: #1a1a1a;
}

.immaterialnet .m.m-results .paging a {
    background: #1d76c4;
}

.insolvensnet .m.m-results .paging a {
    background: #38c77f;
    color: #1a1a1a;
}

.playdataskydd .m.m-results .paging a,
.itnet .m.m-results .paging a,
.webbkurs-gdpr .m.m-results .paging a {
    background: #3288c9;
    color: #1a1a1a;
}

.juridiknet .m.m-results .paging a {
    background: #1b6db5;
}

.kommentarer .m.m-results .paging a {
    background: #2bb6d9;
    color: #1a1a1a;
}

.livsmedelsnet .m.m-results .paging a {
    background: #6bd149;
    color: #1a1a1a;
}

.marknadsnet .m.m-results .paging a {
    background: #0965b5;
}

.migrationsnet .m.m-results .paging a {
    background: #8360bf;
}

.playmiljo .m.m-results .paging a,
.miljonet .m.m-results .paging a,
.climatenet .m.m-results .paging a {
    background: #52cc52;
    color: #1a1a1a;
}

.momsnet .m.m-results .paging a {
    background: #45c49e;
    color: #1a1a1a;
}

.polisnet .m.m-results .paging a {
    background: #2ba8d9;
    color: #1a1a1a;
}

.raddningsnet .m.m-results .paging a,
.playdronare .m.m-results .paging a,
.sakerhetsnet .m.m-results .paging a {
    background: #44c244;
    color: #1a1a1a;
}

.rattsfallsnet .m.m-results .paging a {
    background: #005cad;
}

.webbkurs-samhalssbyggnad .m.m-results .paging a,
.playsamhallsbyggnad .m.m-results .paging a,
.samhallsbyggnadsnet .m.m-results .paging a {
    background: #39bd39;
    color: #1a1a1a;
}

.serveringstillstandsnet .m.m-results .paging a {
    background: #9369bf;
}

.sjukvardsnet .m.m-results .paging a {
    background: #e58ade;
    color: #1a1a1a;
}

.skattenet .m.m-results .paging a {
    background: #44bec2;
    color: #1a1a1a;
}

.playskola .m.m-results .paging a,
.skolnet .m.m-results .paging a {
    background: #d92b2b;
}

.playsocial .m.m-results .paging a,
.socialnet .m.m-results .paging a {
    background: #b07dd1;
    color: #1a1a1a;
}

.socialforsakringsnet .m.m-results .paging a {
    background: #c57bd4;
    color: #1a1a1a;
}

.trafiknet .m.m-results .paging a {
    background: #32c262;
    color: #1a1a1a;
}

.playupphandling .m.m-results .paging a,
.upphandlingsnet .m.m-results .paging a {
    background: #4246a6;
}

.myndighetsbeslut .m.m-results .paging a {
    background: #d9a52b;
}

.lagboken .m.m-results .paging a {
    background: #005cad;
}

.hrnet .m.m-results .paging a {
    background: #f26fa6;
}

.webbkurs-mark-och-miljo .m.m-results .paging a {
    background: #52cc52;
}

.webbkurs-skola .m.m-results .paging a {
    background: #d92b2b;
}

.webbkurs-social .m.m-results .paging a {
    background: #b07dd1;
}

.webbkurs-upphandling .m.m-results .paging a {
    background: #4246a6;
}

.studentnet-skola .m.m-results .paging a {
    background: #d92b2b;
}

.studentnet-sjukvard .m.m-results .paging a {
    background: #e58ade;
}

.studentnet-social .m.m-results .paging a {
    background: #b07dd1;
}

.studentnet-arbetsratt .m.m-results .paging a {
    background: #f26f7a;
}

.studentnet-migration .m.m-results .paging a {
    background: #8360bf;
}

.studentnet-samhallsbyggnad .m.m-results .paging a {
    background: #39bd39;
}

.studentnet-forvaltning .m.m-results .paging a {
    background: #d9682b;
}

.hyresnet .m.m-results .paging a {
    background: #9fd92b;
}

.kemikalienet .m.m-results .paging a {
    background: #6bd149;
}

.skadestandsnet .m.m-results .paging a {
    background: #4ec3e0;
}

.paging a:hover,
.paging a:focus,
.paging a:active {
    opacity: 0.8;
}

.paging em {
    background: #ddd;
    color: #1a1a1a;
}

.paging .ellipsis {
    background: none;
}

.paging .comma {
    left: -9999px;
    overflow: hidden;
    position: absolute;
}

fieldset.alt {
    box-sizing: border-box;
    padding: 10px;
    border: 1px solid #ccc;
}

    fieldset.alt legend {
        padding: 0 10px;
        margin: 0 10px;
        font-size: 18px;
    }

@media only screen and (min-width: 1280px) {
    .paging {
        margin: 14px 0 0;
    }

        .paging a,
        .paging .ellipsis,
        .paging em,
        .paging .prev-page,
        .paging .next-page,
        .paging .current-page {
            height: 42px;
            line-height: 42px;
            min-width: 42px;
        }

        .paging .pages > * + * {
            margin-left: 15px;
        }
}

/* Meta
-------------------------------------------------------------- */
.article .meta {
    border: 1px solid #d1d1d1;
    border-width: 1px 0;
    margin-top: 35px;
    overflow: hidden;
    padding: 12px 0 23px;
}

    .article .meta div {
        float: left;
        width: 135px;
    }

        .article .meta div + div {
            margin-left: 35px;
        }

        .article .meta div.tags {
            float: right;
            margin: 0;
            width: 305px;
        }

    .article .meta p {
        margin: 0;
    }

.meta .title {
    font-family: "Myriad W01 Bd", sans-serif;
}

.meta .job-title {
    font-family: "Myriad W01 It", sans-serif;
}

@media only screen and (min-width: 1280px) {
    .article .meta {
        margin-right: -210px;
        margin-top: 41px;
        padding: 14px 0 27px;
    }

        .article .meta div {
            float: left;
            width: 165px;
        }

            .article .meta div + div {
                margin-left: 45px;
                width: 210px;
            }

            .article .meta div.tags {
                float: right;
                margin: 0;
                width: 375px;
            }
}

@media only screen and (max-width: 1023px) {
    .article {
        margin-bottom: 42px;
    }

        .article .meta {
            padding-bottom: 11px;
        }

            .article .meta div,
            .article .meta div + div,
            .article .meta div.tags {
                float: none;
                margin: 0 0 12px;
                width: auto;
            }
}

/* FORMS
================================================================================ */

.login .form-general {
    margin: 0 auto;
    width: 475px;
}

input[type="text"],
input[type="email"],
input[type="search"],
input[type="password"],
input[type="number"],
textarea {
    background: #fff;
    border: 1px solid #1a1a1a;
    border-radius: 2px;
    margin: 0;
    padding: 5px 10px;
    -webkit-transition: border-color 0.162s ease-in-out;
    -moz-transition: border-color 0.162s ease-in-out;
    transition: border-color 0.162s ease-in-out;
}

    input[type="text"]:focus,
    input[type="email"]:focus,
    input[type="search"]:not(.service-border):focus,
    input[type="password"]:focus,
    textarea:focus {
        border-color: #004b8d;
        box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(0, 75, 141, 0.6)
    }

.administrative input[type="text"],
.administrative input[type="email"],
.administrative input[type="search"],
.administrative input[type="password"],
.administrative textarea,
#header input[type="text"],
#header input[type="email"],
#header input[type="search"],
#header input[type="password"],
#header textarea {
    border: none;
    padding: 6px 10px;
}

input::-webkit-input-placeholder {
    color: #ccc;
    font-family: "Myriad W01 It", sans-serif;
}

input::-moz-placeholder {
    color: #ccc;
    font-family: "Myriad W01 It", sans-serif;
}

input:-ms-input-placeholder {
    color: #ccc;
    font-family: "Myriad W01 It", sans-serif;
}

input[type="button"],
input[type="submit"],
button,
a.button,
service-button {
    background: #004b8d;
    border-radius: 2px;
    border: none;
    color: #fff;
    cursor: pointer;
    font-family: "Myriad W01 Bd", sans-serif;
    -webkit-font-smoothing: antialiased;
    margin: 0;
    padding: 6px 15px;
    text-transform: uppercase;
    text-decoration: none;
    transition: 0.15s ease;
}

.service-button {
    font-size: 16px !important;
    padding: 10px 25px !important;
}

.service-content-frontpage-buttons {
    flex-direction: row;
    display: flex;
    gap: 20px;
    justify-content: center;
}

@media only screen and (max-width: 767px) {
    .service-button {
        display: flex;
    }

    .service-content-frontpage-buttons {
        flex-direction: column;
        max-width: 200px;
    }
}

button .no-stroke {
    stroke: #fff;
}

/* BUTTON Label
 * 1. All elements inside the label will have horizontal spacing between them.
 * 		Use case: Buttons with icon.
----------------------------------------------------------------------------- */
.button__label {
    display: flex;
    align-items: center;
    margin: 0 -4px; /* [1]* */
}

    .button__label > * {
        margin: 0 4px; /* [1] */
    }

.button__label--center {
    justify-content: center;
}

.button--unstyled {
    padding: 0;
    background: transparent;
    border-width: 0;
    color: #1a1a1a;
}

button[disabled],
input[type="submit"][disabled] {
    opacity: 0.4;
    cursor: not-allowed;
}

.button--unstyled {
    padding: 0;
    background: transparent;
    border-width: 0;
    color: #1a1a1a;
}

.button--has-icon[class] {
    position: relative;
    padding-right: 50px;
}

.button--xl[class] {
    padding: 12px;
}

.button-wrapper {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    background-color: #fff;
    padding-left: 12px;
    display: flex;
    align-items: center;
}

.button-wrapper--disabled,
.button-wrapper--disabled button {
    background-color: #ddd;
}

@media screen and (min-width: 992px) {
    .button--xl[class] {
        font-size: 24px;
        padding: 24px;
    }
}

.button__icon {
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
    width: 40px;
    background-color: rgba(0, 0, 0, 0.2);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}

.button__folder {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    width: 100%;
    font-family: "Myriad W01 Regular", sans-serif;
    font-size: 16px;
    text-transform: none;
    padding: 15px 15px 15px 5px;
}

    .button__folder:hover,
    .button__folder:focus,
    .button__folder:hover span,
    .button__folder:focus span {
        color: #000;
        text-decoration: underline;
    }

.button__folder--back {
    padding: 0;
    -webkit-box-pack: flex-start;
    -ms-flex-pack: flex-start;
    justify-content: flex-start;
}

    .button__folder--back > span:first-child {
        transform: rotate(180deg);
    }

/* BUTTON Label
 * 1. All elements inside the label will have horizontal spacing between them.
 * 		Use case: Buttons with icon.
----------------------------------------------------------------------------- */
.button__label {
    display: flex;
    align-items: center;
    margin: 0 -4px; /* [1]* */
}

    .button__label > * {
        margin: 0 4px; /* [1] */
    }

.button__label--center {
    justify-content: center;
}

.form-general input[type="text"],
.form-general input[type="search"],
.form-general input[type="email"],
.form-general input[type="password"],
.form-general input[type="number"],
.form-general textarea {
    display: block;
    width: 100%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.form-general input.small,
.form-general select.small,
.custom-select-container.small {
    width: 220px;
}

.form-general input.medium,
.form-general select.medium,
.custom-select-container.medium {
    width: 305px;
}

.form-general input.w-auto,
.form-general select.w-auto,
.custom-select-container.w-auto {
    width: auto;
}

.form-general input.fw,
.form-general select.fw,
.custom-select-container.fw {
    width: 100%;
}

.form-general label.text {
    display: block;
    padding: 6px 0;
}

    .form-general label.text:not(.required, .clean):after {
        content: ":";
    }

.form-general input + label.text {
    margin-top: 12px;
}

.form-general label.checkbox,
.form-general label.radio {
    display: block;
    padding: 6px 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    white-space: normal;
}

.form-general label.radio--text-lg {
    font-size: 19px;
}

.form-general input[type="checkbox"] {
    margin: 2px 10px 3px 0;
}

.form-general input[type="radio"] {
    margin: 4px 5px 0px 0;
}

.form-general input[type="number"].no-arrows::-webkit-outer-spin-button,
.form-general input[type="number"].no-arrows::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.form-general input[type="number"].no-arrows {
    -moz-appearance: textfield;
}


.custom-select-container.x-small {
    display: inline-block;
    width: 200px;
    margin-left: 10px;
}

.custom-select-container.xx-small {
    width: 180px;
    font-size: 16px;
}

fieldset {
    border: none;
    margin: 0;
    padding: 0;
}

input + fieldset {
    margin-top: 24px;
}

legend {
    font-family: "Myriad W01 Bd", sans-serif;
    padding: 6px 0;
}

.legend--lg {
    font-size: 19px;
}

legend span {
    font-family: "Myriad W01 regular", sans-serif;
}
/* Needs to trump service-background color */
input[disabled][class] {
    background-color: #ddd;
    color: #545454;
    cursor: not-allowed;
}

.login input[type="password"] {
    float: left;
    margin-bottom: 24px;
}

.login input[type="submit"] {
    float: right;
}

.login #forgot-pw,
.login .login-help {
    float: right;
    font-family: "Myriad W01 It", sans-serif;
    line-height: 36px;
    margin-right: -255px;
    width: 220px;
}

.login .login-help {
    margin-right: -356px;
}

#login-box label[for="password"] {
    margin-top: 14px;
}

.visually-hidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

#login-box .visually-hidden {
    display: none;
}

#login-box input::placeholder {
    color: #757575;
    opacity: 1;
}

.administrative #forgot-pw,
.administrative .login-help {
    color: #fff;
}

.login label.checkbox {
    clear: both;
    float: left;
}

.checkbox,
.radio {
    white-space: nowrap;
}

input[type="text"],
input[type="email"],
input[type="search"],
input[type="password"],
input[type="number"],
textarea {
    min-height: 30px;
}

@media only screen and (min-width: 1280px) {
    .login .form-general {
        width: 585px;
    }

    input[type="text"],
    input[type="email"],
    input[type="search"],
    input[type="password"],
    input[type="number"],
    textarea {
        padding: 6px 10px;
    }

    .administrative input[type="text"],
    .administrative input[type="email"],
    .administrative input[type="search"],
    .administrative input[type="password"],
    .administrative textarea,
    #header input[type="text"],
    #header input[type="email"],
    #header input[type="search"],
    #header input[type="password"],
    #header textarea {
        padding: 7px 10px;
    }

    input[type="button"],
    input[type="submit"],
    button,
    a.button {
        padding: 7px 15px;
    }

    .form-general input.small,
    .form-general select.small,
    .custom-select-container.small {
        width: 270px;
    }

    .form-general input.medium,
    .form-general select.medium,
    .custom-select-container.medium {
        width: 375px;
    }

    .form-general label.text {
        padding: 7px 0;
    }

    .form-general input + label.text {
        margin-top: 14px;
    }

    .form-general label.checkbox,
    .form-general label.radio {
        padding: 7px 0;
        font-size: 17px;
        line-height: 21px;
    }

    .form-general input[type="checkbox"] {
        margin-right: 15px;
    }

    input + fieldset {
        margin-top: 28px;
    }

    legend {
        padding: 7px 0;
    }

    .login input[type="password"] {
        float: left;
        margin-bottom: 28px;
    }

    .login #forgot-pw,
    .login .login-help {
        line-height: 42px;
        margin-right: -210px;
        width: 165px;
    }

    .login .login-help {
        margin-right: -324px;
    }

    .form-general textarea.medium {
        width: 375px;
    }
}

@media only screen and (max-width: 1023px) {
    .login .form-general {
        width: 325px;
    }

    .form-general input.small,
    .form-general select.small,
    .custom-select-container.small {
        width: 145px;
    }

    .form-general input.medium,
    .form-general select.medium,
    .custom-select-container.medium {
        width: 325px;
    }

    .form-general textarea.medium {
        width: 325px;
    }
}

@media only screen and (max-width: 767px) {
    .login .form-general {
        width: auto;
    }

    .login #forgot-pw,
    .login .login-help {
        margin-right: 0;
        margin-top: -96px;
        width: auto;
    }

    .login .login-help {
        margin-top: 0;
        margin-right: 10px;
    }

    .form-general input.small,
    .form-general select.small,
    .custom-select-container.small,
    .form-general input.medium,
    .form-general select.medium,
    .custom-select-container.medium,
    .form-general input.large,
    .form-general select.large,
    .custom-select-container.large {
        width: 100%;
    }

    .form-general textarea.medium {
        width: 100%;
    }
}

/* LOGIN PAGE
================================================================================ */
.login #content-primary > p {
    padding: 24px 0;
}

.login #content-primary .m .m-c {
    border-bottom: none;
}

@media only screen and (min-width: 1280px) {
    .login #content-primary > p {
        padding: 28px 0;
    }
}

/* MODULES
================================================================================ */
.m {
    margin: 0 0 48px;
}

.layout-1 .m-info:first-child {
    margin-top: 36px;
}

.m.m-filter {
    margin-bottom: 36px;
}

    .m.m-filter + .m:not(.m-filter):not(.m--no-v-top) {
        border-top: 1px solid #d1d1d1;
        padding-top: 59px;
    }

.collapsable-block + .m {
    padding-top: 36px;
}

.m.m-filter_line {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

    .m.m-filter_line > .m-h {
        padding-bottom: 0;
    }

        .m.m-filter_line > .m-h h2 {
            margin: 0;
            text-transform: none;
        }

    .m.m-filter_line > .m-c {
        border-top: none;
        margin-left: auto;
        margin-top: 0;
        padding-top: 0;
    }

    .m.m-filter_line .custom-select-container.x-small {
        margin-top: 0;
    }

    .m.m-filter_line .m-c > label:first-child + .custom-select-container {
        margin-left: 0;
    }

@media only screen and (max-width: 1023px) {
    .m.m-filter_line {
        display: block;
    }

        .m.m-filter_line .custom-select-container.x-small {
            margin-left: 0;
            margin-top: 10px;
            margin-right: 10px;
        }

            .m.m-filter_line .custom-select-container.x-small:last-child {
                margin-right: 0;
            }
}

.m .m-h {
    padding-bottom: 12px;
    position: relative;
}

.m.collapsable .m-h {
    border-bottom: 1px solid #1a1a1a;
    padding-bottom: 11px;
}

.m-h a {
    text-decoration: none;
}

.m .m-h h2,
.m .m-h h3 {
    float: left;
}

.m.collapsable .m-h h2,
.m.collapsable .m-h h3 {
    padding: 0 34px;
}

.m .m-c--highlighted {
    background-color: #fbfbfb;
}

.m .m-c--highlighted-alternate {
    background-color: rgba(8, 77, 139, 0.15);
}

.m .m-c--highlighted-absolute {
    background-color: rgba(8, 77, 139, 0.15);
    position: absolute;
    top: 55px;
    right: 0;
    width: 15%;
}

@media only screen and (max-width: 767px) {
    .m .m-c--highlighted-absolute {
        position: unset;
        margin-right: auto;
        margin-left: auto;
        width: 50%;
    }
}

.m .m-c + .more {
    margin-top: 12px;
}

.m .m-c {
    border-bottom: 1px solid #d1d1d1;
    border-top: 1px solid #1a1a1a;
    margin-top: -1px;
    padding: 24px 0 35px;
}

.m.collapsable .m-c {
    border-top: none;
    margin-top: 0;
}

.m.form .m-c,
.m.m-filter .m-c {
    border-bottom: none;
    padding-bottom: 0;
}

.m.article .m-c {
    padding-bottom: 11px;
}

.m .m-c .section {
    position: relative;
}

    .m .m-c .section + .section {
        border-top: 1px solid #d1d1d1;
        margin-top: 35px;
        padding-top: 24px;
    }

.m .m-c h2 {
    margin: 0 0 12px;
}

.m.article .m-c h4 {
    margin: 0 0 24px;
}
/*.m.m-list li > a {
	font-size: 24px; TODO: uncomment this when services redesign is due
} */

.m .m-c > p {
    margin: 0;
}

    .m .m-c > p + p {
        margin-top: 12px;
    }

.m.article .m-c > p {
    margin: 0 0 24px;
}

/* zero margin on last paragraph child to avoid display of 
    "read more" if there is no more content */
.m.article .read-more > p:last-child {
    margin: 0 0 0;
}

.m .m-c > p + h2 {
    margin-top: 24px;
}

@media only screen and (min-width: 1280px) {
    .m {
        margin: 0 0 36px;
    }

    .layout-1 .m-info:first-child {
        margin-top: 42px;
    }

    .m.m-filter {
        margin-bottom: 42px;
    }

        .m.m-filter + .m:not(.m-filter):not(.m--no-v-top) {
            padding-top: 69px;
        }

    .collapsable-block + .m {
        padding-top: 42px;
    }

    .m .m-h {
        padding-bottom: 14px;
    }

    .m.collapsable .m-h {
        padding-bottom: 13px;
    }

        .m.collapsable .m-h h2,
        .m.collapsable .m-h h3 {
            padding: 0 39px;
        }

    .m .m-c + .more {
        margin-top: 14px;
    }

    .m .m-c {
        padding: 28px 0 41px;
    }

        .m .m-c .section + .section {
            margin-top: 41px;
            padding-top: 28px;
        }

        .m .m-c h2 {
            margin-bottom: 14px;
        }

    .m.article .m-c h4 {
        margin: 0 0 28px;
    }

    .m .m-c > p + p {
        margin-top: 14px;
    }

    .m.article .m-c > p {
        margin: 0 0 28px;
    }

    .m .m-c > p + h2 {
        margin-top: 28px;
    }

    .m.collapsable .m-h {
        padding-bottom: 13px;
    }

    .m.article .m-c {
        /*margin-right: -210px; extends horizontal rule in section elements too far
		padding-right: 210px;*/
        padding-bottom: 13px;
    }
}

@media only screen and (max-width: 1023px) {
    .collapsable-block + .m {
        padding-top: 24px;
    }
    /* Display teasers/modules in two "columns" when in "tablet" mode */
    .layout-2 .content-2 > div {
        margin: 0 -35px 0 0;
    }

    .layout-2 .content-2 .m {
        float: left;
        margin: 0 35px 0 0;
        width: 325px;
    }
    /* Prioritized modules should be half width */
    .m.prio {
        float: right;
        width: 325px;
    }
    /* Align info modules top */
    .m + .m-info {
        margin-top: 36px;
    }
}

@media only screen and (max-width: 767px) {
    .layout-2 .content-2 > div {
        margin: 0;
    }

    .m {
        margin-bottom: 36px;
    }

        .layout-2 .content-2 .m,
        .m.prio {
            float: none;
            margin-right: 0;
            width: auto;
        }

        .m .m-c {
            padding-bottom: 23px;
        }

            .m .m-c h2 {
                margin-bottom: 6px;
            }
}

@media only screen and (max-width: 479px) {
    .layout-2 .content-2 > div {
        margin: 0;
    }
}

/* Lists
-------------------------------------------------------------- */
.m--no-v-top.m .m-c {
    padding-top: 0;
}
/* Lists
-------------------------------------------------------------- */
.m-list .m-c > h4 {
    border-bottom: 1px solid #d1d1d1;
    padding-bottom: 11px;
}

.m.m-list ul {
    padding-left: 0;
    list-style: none;
    margin: 0;
}

.m.m-list li + li {
    margin: 24px 0 0;
}

.m.m-list li p {
    margin: 0;
}

.m.m-list li.empty p {
    color: #808080;
    font-family: "Myriad W01 It", sans-serif;
    text-align: center;
}

.m.m-list li > a,
.m.m-list li > .o-space-between > :first-child a {
    font-size: 24px;
}

@media screen and (max-width:480px) {
    .m.m-list li > .o-space-between > :first-child a {
        margin-bottom: 10px;
    }
}

@media only screen and (min-width: 1280px) {
    .m-list .m-c > h4 {
        border-bottom: 1px solid #d1d1d1;
        padding-bottom: 13px;
    }

    .m.m-list li + li {
        margin: 28px 0 0;
    }
}

/* Tight module
-------------------------------------------------------------- */

.m-tight .m-c {
    border-bottom: 0;
    padding-bottom: 0;
}

/* Library list
-------------------------------------------------------------- */
.m-list-library time {
    padding-left: 24px;
    font-size: 14px;
    line-height: 16px;
}

.library-content .error {
    color: red;
}

/* Comments module
-------------------------------------------------------------- */
.m-comments {
    position: relative;
}

    .m-comments .c-icon {
        position: absolute;
        right: 10px;
        top: 10px;
    }

    .m-comments a {
        max-width: 80%;
    }

/* Favorites list
-------------------------------------------------------------- */
.m-list-favorites .m-c {
    padding-top: 0;
    padding-bottom: 0;
    border-top-width: 0;
}

.m-list-favorites ul li {
    padding: 20px 0 20px 5px;
    margin: 0;
    border-top: 1px solid #d1d1d1;
    background: none;
}

.m-list-favorites h4 {
    font-size: 22px;
    line-height: 26px;
}

.list-favorites-head {
    display: block;
    font-size: 14px;
    line-height: 16px;
    text-transform: uppercase;
    padding: 5px;
    margin-top: 12px;
}

    .list-favorites-head .topic {
        font-family: "Myriad W01 Bd", sans-serif;
    }

.m-list-favorites time:first-child {
    border-top-width: 0;
}

.m-list-favorites li {
    position: relative;
}

.m-list-favorites ul li:first-child {
    border-top: 0;
}

.m.m-list-favorites li + li {
    margin-top: 0;
}

.favorites .m-list-favorites li {
    padding-right: 40px;
}

    .favorites .m-list-favorites li.button__wrapper {
        padding-right: 15px;
    }

.favorites .m-list-favorites ul li .remove {
    position: absolute;
    right: 5px;
    top: 50%;
    width: 25px;
    height: 24px;
    margin-top: -12px;
    text-indent: 300%;
    overflow: hidden;
    white-space: nowrap;
    background: transparent url(/static/i/icons-s.png) no-repeat -500px -205px;
}

.svg .favorites .m-list-favorites .remove {
    background-image: url(/static/i/icons-s.svg);
}

.m-list-favorites.empty .m-c {
    text-align: center;
    border-top: 1px solid #000;
}

.m-list-favorites .empty-message {
    display: inline-block;
    text-align: center;
    padding-top: 60px;
}
/* Saved search list
-------------------------------------------------------------- */
.m-list-saved-search .m-c {
    padding-top: 0;
    padding-bottom: 0;
    border-top-width: 0;
}

.m-list-saved-search ul li {
    padding: 20px 0 20px 5px;
    margin: 0;
    border-top: 1px solid #d1d1d1;
    background: none;
}

.m-list-saved-search h4 {
    font-size: 22px;
    line-height: 26px;
}

.list-saved-search-head {
    display: block;
    font-size: 14px;
    line-height: 16px;
    text-transform: uppercase;
    padding: 5px;
    color: #fff;
    background-color: #1a1a1a;
}

    .list-saved-search-head .topic {
        font-family: "Myriad W01 Bd", sans-serif;
    }

.m-list-saved-search time:first-child {
    border-top-width: 0;
}

.m-list-saved-search li {
    position: relative;
}

.m-list-saved-search ul li:first-child {
    border-top: 0;
}

.m.m-list-saved-search li + li {
    margin-top: 0;
}

.saved-search-and-favs :not(.sub-list) li {
    padding-right: 55px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

.saved-search-and-favs .m.m-list li > a {
    font: 19px/28px "Myriad W01 Bd", sans-serif;
}

.saved-search-and-favs li .share {
    margin-left: auto;
    padding-right: 30px;
    display: block;
}

.saved-search-and-favs .sub-list li {
    border-bottom: none;
    border-top: none;
    margin: 10px 10px 0 0;
    display: inline-block;
    padding: 0 10px 0 0;
    border-right: 1px solid #000;
}

    .saved-search-and-favs .sub-list li:last-child {
        border-right: none;
        margin-right: 0;
        padding-right: 0;
    }

@media screen and (max-width:768px) {
    .saved-search-and-favs .search-info {
        width: 100%;
        padding-bottom: 20px;
    }

    .m-list-favorites li:not(#foo),
    .saved-search-and-favs :not(.sub-list) li {
        flex-wrap: wrap;
    }

    .favorites .m-list-favorites li .share,
    .saved-search-and-favs li .share {
        margin-left: 0;
    }

    .favorites .m-list-favorites li h3 {
        margin-bottom: 10px;
    }
}

@media screen and (max-width:1279px) {
    .saved-search-and-favs .m.m-list li > a {
        font: 16px/24px "Myriad W01 Bd", sans-serif;
    }
}

.saved-search-and-favs li .share::before {
    content: "";
    background: url(/static/i/email.svg) no-repeat;
    background-size: 16px;
    height: 12px;
    width: 16px;
    display: inline-block;
    padding-right: 8px;
}

.saved-search-and-favs ul li .remove {
    position: absolute;
    right: 5px;
    top: 50%;
    width: 25px;
    height: 24px;
    margin-top: -12px;
    text-indent: 300%;
    overflow: hidden;
    white-space: nowrap;
    background: transparent url(/static/i/icons-s.png) no-repeat -500px -205px;
}

.svg .saved-search-and-favs .remove {
    background-image: url(/static/i/icons-s.svg);
}

.saved-search-and-favs .empty .m-c {
    text-align: center;
    border-top: 1px solid #000;
}

.saved-search-and-favs .empty-message {
    display: inline-block;
    text-align: center;
    padding-top: 60px;
    width: 100%;
}

.saved-search-and-favs h3,
.saved-search-and-favs a {
    font: 16px/24px "Myriad W01 Bd", sans-serif;
}

@media only screen and (min-width: 1280px) {
    .saved-search-and-favs h3,
    .saved-search-and-favs a {
        font: 19px/28px "Myriad W01 Bd", sans-serif;
    }
}
/* Generic dialog */
/* padding-right to prevent content from overflowing the close button */
.generic-dialog .dialog-title {
    padding: 24px;
    background: #ccc;
    padding-right: 83px;
}

.generic-dialog .dialog-main {
    padding: 24px;
}

/* Favorites sub tabs
-------------------------------------------------------------- */
.favorites-sub-tabs .tab-navigation {
    border: none;
    margin-top: 10px;
}

.favorites-sub-tabs .tabs {
    display: flex;
    justify-content: space-evenly;
}

    .favorites-sub-tabs .tabs[class] li {
        padding: 0;
        margin: 0;
        border: none;
        flex-basis: 100%;
        margin: 0 3px !important;
    }

#body .favorites-sub-tabs[class] .tabs[class] li a {
    border: 1px solid #7fa5c6;
    color: #000;
    display: block;
    width: 100%;
    text-align: center;
    padding: 2px 0;
    border-radius: 0;
}

#body .favorites-sub-tabs[class] .tabs[class] li.sel a {
    background-color: #004b8d;
    border-color: #004b8d;
    color: #fff;
}

/* Favorites sub nav
-------------------------------------------------------------- */
.favorites-sub-nav {
    display: none;
    width: 100%;
}

    .favorites-sub-nav li:first-child {
        border-top: 0 !important;
    }

    .favorites-sub-nav li:last-child {
        border-bottom: 0;
    }

/* Saved search list
-------------------------------------------------------------- */
.m-list-saved-search .m-c {
    padding-top: 0;
    padding-bottom: 0;
    border-top-width: 0;
}

.m-list-saved-search ul li {
    padding: 20px 0 20px 5px;
    margin: 0;
    border-top: 1px solid #d1d1d1;
    background: none;
}

.m-list-saved-search h4 {
    font-size: 22px;
    line-height: 26px;
}

.list-saved-search-head {
    display: block;
    font-size: 14px;
    line-height: 16px;
    text-transform: uppercase;
    padding: 5px;
    color: #fff;
    background-color: #1a1a1a;
}

    .list-saved-search-head .topic {
        font-family: 'Myriad W01 Bd', sans-serif;
    }

.m-list-saved-search time:first-child {
    border-top-width: 0;
}

.m-list-saved-search li {
    position: relative;
}

.m-list-saved-search ul li:first-child {
    border-top: 0;
}

.m.m-list-saved-search li + li {
    margin-top: 0;
}

.saved-search-and-favs :not(.sub-list) li {
    padding-right: 55px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

.saved-search-and-favs .m.m-list li > a {
    font: 19px/28px 'Myriad W01 Bd', sans-serif;
}

.saved-search-and-favs li .share {
    margin-left: auto;
    padding-right: 30px;
    display: block;
}

.saved-search-and-favs .sub-list li {
    border-bottom: none;
    border-top: none;
    margin: 10px 10px 0 0;
    display: inline-block;
    padding: 0 10px 0 0;
    border-right: 1px solid #000;
}

    .saved-search-and-favs .sub-list li:last-child {
        border-right: none;
        margin-right: 0;
        padding-right: 0;
    }

@media screen and (max-width:768px) {
    .saved-search-and-favs .search-info {
        width: 100%;
        padding-bottom: 20px;
    }

    .m-list-favorites li:not(#foo),
    .saved-search-and-favs :not(.sub-list) li {
        flex-wrap: wrap;
    }

    .favorites .m-list-favorites li .share,
    .saved-search-and-favs li .share {
        margin-left: 0;
    }

    .favorites .m-list-favorites li h3 {
        margin-bottom: 10px;
    }
}

@media screen and (max-width:1279px) {
    .saved-search-and-favs .m.m-list li > a {
        font: 16px/24px 'Myriad W01 Bd', sans-serif;
    }
}

.saved-search-and-favs li .share::before {
    content: '';
    background: url(/static/i/email.svg) no-repeat;
    background-size: 16px;
    height: 12px;
    width: 16px;
    display: inline-block;
    padding-right: 8px;
}

.saved-search-and-favs ul li .remove {
    position: absolute;
    right: 5px;
    top: 50%;
    width: 25px;
    height: 24px;
    margin-top: -12px;
    text-indent: 300%;
    overflow: hidden;
    white-space: nowrap;
    background: transparent url(/static/i/icons-s.png) no-repeat -500px -205px;
}

.svg .saved-search-and-favs .remove {
    background-image: url(/static/i/icons-s.svg);
}

.saved-search-and-favs .empty .m-c {
    text-align: center;
    border-top: 1px solid #000;
}

.saved-search-and-favs .empty-message {
    display: inline-block;
    text-align: center;
    padding-top: 60px;
    width: 100%;
}

.saved-search-and-favs h3,
.saved-search-and-favs a {
    font: 16px/24px 'Myriad W01 Bd', sans-serif;
}

@media only screen and (min-width: 1280px) {
    .saved-search-and-favs h3,
    .saved-search-and-favs a {
        font: 19px/28px 'Myriad W01 Bd', sans-serif;
    }
}
/* Generic dialog */
/* padding-right to prevent content from overflowing the close button */
.generic-dialog .dialog-title {
    padding: 24px;
    background: #ccc;
    padding-right: 83px;
}

.generic-dialog .dialog-main {
    padding: 24px;
}

@media (min-width:1280px) {
    .generic-dialog .dialog-close {
        height: 90px;
    }
}

.visually-hidden-dialog {
    position: absolute !important;
    width: 1px;
    height: 1px;
    margin: -1px;
    border: 0;
    padding: 0;
    white-space: nowrap;
    clip-path: inset(50%);
    clip: rect(0 0 0 0);
    overflow: hidden;
}

@media screen and (max-width:768px) {
    .saved-search-and-favs .search-info {
        width: 100%;
        padding-bottom: 20px;
    }

    .m-list-favorites li:not(#foo),
    .saved-search-and-favs :not(.sub-list) li {
        flex-wrap: wrap;
    }

    .favorites .m-list-favorites li .share,
    .saved-search-and-favs li .share {
        margin-left: 0;
    }
}

@media screen and (max-width:1279px) {
    .saved-search-and-favs .m.m-list li > a {
        font: 16px/24px 'Myriad W01 Bd', sans-serif;
    }

    .favorites .tab-navigation ul::before {
        display: none;
    }
}

.saved-search-and-favs li .share::before {
    content: '';
    background: url(/static/i/email.svg) no-repeat;
    background-size: 16px;
    height: 12px;
    width: 16px;
    display: inline-block;
    padding-right: 8px;
}

.saved-search-and-favs ul li .remove {
    position: absolute;
    right: 5px;
    top: 50%;
    width: 25px;
    height: 24px;
    margin-top: -12px;
    text-indent: 300%;
    overflow: hidden;
    white-space: nowrap;
    background: transparent url(/static/i/icons-s.png) no-repeat -500px -205px;
}

.svg .saved-search-and-favs .remove {
    background-image: url(/static/i/icons-s.svg);
}

.saved-search-and-favs .empty .m-c {
    text-align: center;
    border-top: 1px solid #000;
}

.saved-search-and-favs .empty-message {
    display: inline-block;
    text-align: center;
    padding-top: 60px;
    width: 100%;
}

.saved-search-and-favs h3,
.saved-search-and-favs a {
    font: 16px/24px 'Myriad W01 Bd', sans-serif;
}

@media only screen and (min-width: 1280px) {
    .saved-search-and-favs h3,
    .saved-search-and-favs a {
        font: 19px/28px 'Myriad W01 Bd', sans-serif;
    }
}

/* Generic dialog */

/* padding-right to prevent content from overflowing the close button */
.generic-dialog .dialog-title {
    padding: 24px;
    background: #ccc;
    padding-right: 83px;
}

.generic-dialog .dialog-main {
    padding: 24px;
}

@media (min-width:1280px) {
    .generic-dialog .dialog-close {
        height: 90px;
    }
}
/* Monitored keywords list
-------------------------------------------------------------- */
button.keyword-guide-button {
    position: absolute;
    right: 0;
    top: 0;
}

@media only screen and (min-width: 768px) {
    button.keyword-guide-button {
        top: 15px;
    }
}

.m.m-list-keywords h4 {
    font: 28px/28px "Myriad W01 Regular", sans-serif;
    padding-right: 50px;
    position: relative;
}

.m.m-list-keywords h3 {
    font-family: "Myriad W01 Regular", sans-serif;
    text-transform: uppercase;
}

    .m.m-list-keywords h3 .topic {
        font-family: "Myriad W01 Bd", sans-serif;
    }

.m.m-list-keywords h4 a {
    color: #1a1a1a;
    text-decoration: none;
}

    .m.m-list-keywords h4 a:first-child {
        padding-right: 14px;
    }

.m.m-list-keywords .keyword {
    padding-left: 28px;
    position: relative;
}

.m.m-list-keywords .deselect {
    display: inline-block;
    height: 12px;
    line-height: 12px;
    position: absolute;
    right: 0;
    text-indent: -1200%;
    top: 10px;
    overflow: hidden;
    width: 12px;
}

    .m.m-list-keywords .deselect::before,
    .m.m-list-keywords .deselect::after {
        background-color: #d1d1d1;
        content: "";
        display: block;
        height: 2px;
        left: 50%;
        margin-left: -6px;
        margin-top: -1px;
        position: absolute;
        top: 50%;
        width: 12px;
        -webkit-transform: rotate(-45deg);
        -ms-transform: rotate(-45deg);
        transform: rotate(-45deg);
        -webkit-transition: background-color 0.162s ease-in-out;
        -moz-transition: background-color 0.162s ease-in-out;
        transition: background-color 0.162s ease-in-out;
    }

    .m.m-list-keywords .deselect:hover::before,
    .m.m-list-keywords .deselect:focus::before,
    .m.m-list-keywords .deselect:hover::after,
    .m.m-list-keywords .deselect:focus::after {
        background-color: #004b8d;
    }

    .m.m-list-keywords .deselect::after {
        transform: rotate(45deg);
        -ms-transform: rotate(45deg);
        -webkit-transform: rotate(45deg);
    }

.m.m-list-keywords .edit-keyword {
    position: absolute;
    top: 7px;
    right: 20px;
    padding: 0;
}

.keyword-indicator {
    background-color: #d92b2b;
    border-radius: 100%;
    bottom: 3px;
    display: inline-block;
    color: #fff;
    font: 16px/28px "Myriad W01 Regular", sans-serif;
    font-weight: normal;
    height: 28px;
    margin-left: 14px;
    position: relative;
    text-align: center;
    width: 28px;
}

.m.m-list-keywords .keyword-indicator {
    margin-left: 0px;
}

.keyword-result-toggler {
    display: inline-block;
    height: 16px;
    line-height: 12px;
    position: absolute;
    left: -28px;
    text-indent: -1200%;
    top: 4px;
    overflow: hidden;
    width: 9px;
}

    .keyword-result-toggler::before,
    .keyword-result-toggler::after {
        background-color: #1a1a1a;
        content: "";
        display: block;
        height: 2px;
        left: 6px;
        margin-left: -6px;
        position: absolute;
        width: 9px;
        -webkit-transition: background-color 0.162s ease-in-out;
        -moz-transition: background-color 0.162s ease-in-out;
        transition: background-color 0.162s ease-in-out;
    }

    .keyword-result-toggler:hover::before,
    .keyword-result-toggler:focus::before,
    .keyword-result-toggler:hover::after,
    .keyword-result-toggler:focus::after {
        background-color: #004b8d;
    }

    .keyword-result-toggler::before {
        top: 5px;
        -webkit-transform: rotate(40deg);
        -ms-transform: rotate(40deg);
        transform: rotate(40deg);
    }

    .keyword-result-toggler::after {
        bottom: 4px;
        transform: rotate(-40deg);
        -ms-transform: rotate(-40deg);
        -webkit-transform: rotate(-40deg);
    }

.expanded .keyword-result-toggler {
    transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
}

.keyword-search-interval {
    color: #808080;
    font-family: "Myriad W01 It", sans-serif;
}

    .keyword-search-interval + a {
        color: #1a1a1a;
    }

.m-list-keywords time {
    display: inline-block;
}

.m-list-keywords .new a {
    font-weight: bold;
}

.m.m-list-keywords .keyword-results {
    margin-right: 14px;
    margin-top: 14px;
}

    .m.m-list-keywords .keyword-results a {
        text-decoration: none;
        display: inline-block;
    }

        .m.m-list-keywords .keyword-results a:focus,
        .m.m-list-keywords .keyword-results a:hover {
            text-decoration: underline;
        }

    .m.m-list-keywords .keyword-results ul li + li {
        margin-top: 0;
    }

    .m.m-list-keywords .keyword-results ul li {
        color: #808080;
        margin-bottom: 1rem;
    }

        .m.m-list-keywords .keyword-results ul li + a {
            color: #808080;
            display: block;
            font-family: "Myriad W01 It", sans-serif;
            margin-top: 14px;
        }

        .m.m-list-keywords .keyword-results ul li p {
            color: #000000;
        }

    .m.m-list-keywords .keyword-results ul span:not(.keyword-results__date) {
        text-transform: uppercase;
    }

.add-keyword.m .m-c {
    border-bottom: none;
}

.add-keyword .form-general .searchtext {
    margin-bottom: 50px;
}

.add-keyword .form-general input[type="search"] {
    display: block;
    width: 100%;
    box-sizing: border-box;
}

.add-keyword .form-general input[type="submit"] {
    float: right;
}

.js .keyword-dropdown {
    display: none;
    position: absolute;
    right: 0;
    width: 300px;
    padding: 20px;
    background: #fff;
    z-index: 10;
    margin-top: 10px;
    border: 1px solid black;
    border-radius: 5px;
    box-shadow: 0px 0px 16px 0px rgba(50, 50, 50, 0.35);
}

    .js .keyword-dropdown:after,
    .js .keyword-dropdown:before {
        bottom: 100%;
        border: solid transparent;
        content: "";
        height: 0;
        width: 0;
        position: absolute;
        pointer-events: none;
    }

    .js .keyword-dropdown:after {
        right: 19px;
        border-color: rgba(255, 255, 255, 0);
        border-bottom-color: #ffffff;
        border-width: 10px;
        margin-left: -10px;
    }

    .js .keyword-dropdown:before {
        right: 18px;
        border-color: rgba(0, 0, 0, 0);
        border-bottom-color: #000000;
        border-width: 11px;
        margin-left: -11px;
    }

.js .keyword-save-interval {
    margin-right: 1rem;
}

@media only screen and (max-width: 479px) {
    .js .keyword-dropdown {
        width: 240px;
    }
}

@media only screen and (min-width: 1024px) {
    .layout-9 .content-2 > .add-keyword {
        margin-top: 100px;
    }
}

@media only screen and (min-width: 1279px) {
    .layout-9 .content-2 > .add-keyword {
        margin-top: 113px;
    }
}

@media only screen and (min-width: 1024px) {
    .layout-9 .content-1 .m-no-keywords {
        margin-top: 76px;
    }
}

@media only screen and (min-width: 1279px) {
    .layout-9 .content-1 .m-no-keywords {
        margin-top: 85px;
    }
}

/* Course moment info
-------------------------------------------------------------- */
.m.m-list.m-course-moment-info p.cta a {
    font-size: 19px;
    line-height: 42px;
    margin-bottom: 28px;
}

.m.m-list.m-course-moment-info p.cta.not-active a {
    background-color: #ccc;
    pointer-events: none;
    cursor: not-allowed;
}

/* Services list
-------------------------------------------------------------- */
.m.m-list ul.services li + li {
    margin-top: 12px;
}

.m.m-list ul.services li h3 {
    line-height: 18px;
    padding: 3px 0;
}

.search .m.m-list ul.services li h3 {
    display: inline;
}

.m.m-list ul.services a {
    text-decoration: none;
}

@media only screen and (min-width: 1280px) {
    .m.m-list ul.services li + li {
        margin-top: 14px;
    }

    .m.m-list ul.services li h3 {
        line-height: 21px;
        padding: 3px 0 4px;
    }
}

/* Docs list
-------------------------------------------------------------- */
.m.m-list ul.docs li {
    overflow: hidden;
}

.m.m-list ul.docs time {
    float: right;
    width: 135px;
}

.m.m-list ul.docs h3 {
    background: url(/static/i/icons-xs-c.png) 2px 4px no-repeat;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    font-family: "Myriad W01 Regular", sans-serif;
    padding-left: 24px;
}

.svg .m.m-list ul.docs h3 {
    background-image: url(/static/i/icons-xs-c.svg);
}

.m.m-list ul.docs li.review h3 {
    background-position: 2px -432px;
}

.m.m-list ul.docs li.news h3 {
    background-position: 1px -868px;
}

.m.m-list ul.docs time + h3 {
    float: left;
    width: 475px;
}

@media only screen and (min-width: 1280px) {
    .m.m-list ul.docs time {
        width: 165px;
    }

    .m.m-list ul.docs h3 {
        padding-left: 28px;
    }

    .m.m-list ul.docs > li > h3 {
        width: 585px;
    }
}

@media only screen and (max-width: 1023px) {
    .m.m-list ul.docs time,
    .m.m-list ul.docs time + h3 {
        float: none;
        width: auto;
    }
}

/* Boxes in lists
-------------------------------------------------------------- */
.m-list .box {
    border: 1px solid #eee;
    padding: 20px;
}

/* Related searches
-------------------------------------------------------------- */
/*
.layout-5.search .content-1 > .m-related {
	margin-top: 60px;
}
*/
.m.m-related ul {
    list-style: none;
    margin: 0;
}

.m.m-related li {
    margin-bottom: 6px;
    position: relative;
}

.m.m-related a {
    display: block;
    padding: 0 15px;
    position: relative;
    z-index: 2;
}

.m.m-related .popularity {
    background: #e6e6e6;
    border-radius: 2px;
    bottom: 0;
    display: block;
    position: absolute;
    top: 0;
    z-index: 1;
}

    .m.m-related .popularity:not(.service-background--transparent) {
        background: #e6e6e6;
    }

@media only screen and (min-width: 1280px) {
    .m.m-related li {
        margin-bottom: 7px;
    }
}

/* Filter
-------------------------------------------------------------- */
.layout-5 .content-1 > .m-filter:first-child {
    margin-top: 60px;
}

.m.m-filter ul {
    list-style: none;
    margin: 0;
}

.m.m-filter li {
    position: relative;
}

.m.m-filter a {
    border-radius: 2px;
    color: #1a1a1a;
    display: block;
    padding: 6px 49px 6px 15px;
    text-decoration: none;
}

    .m.m-filter a:hover,
    .m.m-filter a:focus,
    .m.m-filter a:active,
    .m.m-filter a[data-selected] {
        background-color: #004b8d;
        color: #fff;
    }

.arbetsmiljonet .m.m-filter a:hover,
.arbetsmiljonet .m.m-filter a:focus,
.arbetsmiljonet .m.m-filter a:active,
.arbetsmiljonet .m.m-filter a[data-selected] {
    background-color: #e5738f;
    color: #1a1a1a;
}

.webbkurs-arbetsratt .m.m-filter a:hover,
.webbkurs-arbetsratt .m.m-filter a:focus,
.webbkurs-arbetsratt .m.m-filter a:active,
.webbkurs-arbetsratt .m.m-filter a[data-selected],
.playarbetsliv .m.m-filter a:hover,
.playarbetsliv .m.m-filter a:focus,
.playarbetsliv .m.m-filter a:active,
.playarbetsliv .m.m-filter a[data-selected],
.arbetsrattsnet .m.m-filter a:hover,
.arbetsrattsnet .m.m-filter a:focus,
.arbetsrattsnet .m.m-filter a:active,
.arbetsrattsnet .m.m-filter a[data-selected] {
    background-color: #f26f7a;
    color: #1a1a1a;
}

.straffrattsnet .m.m-filter a:hover,
.straffrattsnet .m.m-filter a:focus,
.straffrattsnet .m.m-filter a:active,
.straffrattsnet .m.m-filter a[data-selected] {
    background-color: #54c4d6;
    color: #1a1a1a;
}

.djurnet .m.m-filter a:hover,
.djurnet .m.m-filter a:focus,
.djurnet .m.m-filter a:active,
.djurnet .m.m-filter a[data-selected] {
    background-color: #d0d92b;
    color: #1a1a1a;
}

.eunet .m.m-filter a:hover,
.eunet .m.m-filter a:focus,
.eunet .m.m-filter a:active,
.eunet .m.m-filter a[data-selected] {
    background-color: #219ed9;
    color: #1a1a1a;
}

.familjenet .m.m-filter a:hover,
.familjenet .m.m-filter a:focus,
.familjenet .m.m-filter a:active,
.familjenet .m.m-filter a[data-selected] {
    background-color: #694cbf;
}

.fastighetsnet .m.m-filter a:hover,
.fastighetsnet .m.m-filter a:focus,
.fastighetsnet .m.m-filter a:active,
.fastighetsnet .m.m-filter a[data-selected] {
    background-color: #9fd92b;
    color: #1a1a1a;
}

.foretagarnet .m.m-filter a:hover,
.foretagarnet .m.m-filter a:focus,
.foretagarnet .m.m-filter a:active,
.foretagarnet .m.m-filter a[data-selected] {
    background-color: #d97c2b;
    color: #1a1a1a;
}

.webbkurs-forvaltning .m.m-filter a:hover,
.webbkurs-forvaltning .m.m-filter a:focus,
.webbkurs-forvaltning .m.m-filter a:active,
.webbkurs-forvaltning .m.m-filter a[data-selected],
.forvaltningsnet .m.m-filter a:hover,
.forvaltningsnet .m.m-filter a:focus,
.forvaltningsnet .m.m-filter a:active,
.forvaltningsnet .m.m-filter a[data-selected] {
    background-color: #d9682b;
    color: #1a1a1a;
}

.immaterialnet .m.m-filter a:hover,
.immaterialnet .m.m-filter a:focus,
.immaterialnet .m.m-filter a:active,
.immaterialnet .m.m-filter a[data-selected] {
    background-color: #1d76c4;
}

.insolvensnet .m.m-filter a:hover,
.insolvensnet .m.m-filter a:focus,
.insolvensnet .m.m-filter a:active,
.insolvensnet .m.m-filter a[data-selected] {
    background-color: #38c77f;
    color: #1a1a1a;
}

.playdataskydd .m.m-filter a:hover,
.playdataskydd .m.m-filter a:focus,
.playdataskydd .m.m-filter a:active,
.playdataskydd .m.m-filter a[data-selected],
.itnet .m.m-filter a:hover,
.itnet .m.m-filter a:focus,
.itnet .m.m-filter a:active,
.itnet .m.m-filter a[data-selected],
.webbkurs-gdpr .m.m-filter a:hover,
.webbkurs-gdpr .m.m-filter a:focus,
.webbkurs-gdpr .m.m-filter a:active,
.webbkurs-gdpr .m.m-filter a[data-selected] {
    background-color: #3288c9;
    color: #1a1a1a;
}

.juridiknet .m.m-filter a:hover,
.juridiknet .m.m-filter a:focus,
.juridiknet .m.m-filter a:active,
.juridiknet .m.m-filter a[data-selected] {
    background-color: #1b6db5;
}

.kommentarer .m.m-filter a:hover,
.kommentarer .m.m-filter a:focus,
.kommentarer .m.m-filter a:active,
.kommentarer .m.m-filter a[data-selected] {
    background-color: #2bb6d9;
    color: #1a1a1a;
}

.livsmedelsnet .m.m-filter a:hover,
.livsmedelsnet .m.m-filter a:focus,
.livsmedelsnet .m.m-filter a:active,
.livsmedelsnet .m.m-filter a[data-selected] {
    background-color: #6bd149;
    color: #1a1a1a;
}

.marknadsnet .m.m-filter a:hover,
.marknadsnet .m.m-filter a:focus,
.marknadsnet .m.m-filter a:active,
.marknadsnet .m.m-filter a[data-selected] {
    background-color: #0965b5;
}

.migrationsnet .m.m-filter a:hover,
.migrationsnet .m.m-filter a:focus,
.migrationsnet .m.m-filter a:active,
.migrationsnet .m.m-filter a[data-selected] {
    background-color: #8360bf;
}

.playmiljo .m.m-filter a:hover,
.playmiljo .m.m-filter a:focus,
.playmiljo .m.m-filter a:active,
.playmiljo .m.m-filter a[data-selected],
.miljonet .m.m-filter a:hover,
.miljonet .m.m-filter a:focus,
.miljonet .m.m-filter a:active,
.miljonet .m.m-filter a[data-selected],
.climatenet .m.m-filter a:hover,
.climatenet .m.m-filter a:focus,
.climatenet .m.m-filter a:active,
.climatenet .m.m-filter a[data-selected] {
    background-color: #52cc52;
    color: #1a1a1a;
}

.momsnet .m.m-filter a:hover,
.momsnet .m.m-filter a:focus,
.momsnet .m.m-filter a:active,
.momsnet .m.m-filter a[data-selected] {
    background-color: #45c49e;
    color: #1a1a1a;
}

.polisnet .m.m-filter a:hover,
.polisnet .m.m-filter a:focus,
.polisnet .m.m-filter a:active,
.polisnet .m.m-filter a[data-selected] {
    background-color: #2ba8d9;
    color: #1a1a1a;
}

.raddningsnet .m.m-filter a:hover,
.raddningsnet .m.m-filter a:focus,
.raddningsnet .m.m-filter a:active,
.raddningsnet .m.m-filter a[data-selected],
.playdronare .m.m-filter a:hover,
.playdronare .m.m-filter a:focus,
.playdronare .m.m-filter a:active,
.playdronare .m.m-filter a[data-selected],
.sakerhetsnet .m.m-filter a:hover,
.sakerhetsnet .m.m-filter a:focus,
.sakerhetsnet .m.m-filter a:active,
.sakerhetsnet .m.m-filter a[data-selected] {
    background-color: #44c244;
    color: #1a1a1a;
}

.rattsfallsnet .m.m-filter a:hover,
.rattsfallsnet .m.m-filter a:focus,
.rattsfallsnet .m.m-filter a:active,
.rattsfallsnet .m.m-filter a[data-selected] {
    background-color: #005cad;
}

.webbkurs-samhallsbyggnad .m.m-filter a:hover,
.webbkurs-samhallsbyggnad .m.m-filter a:focus,
.webbkurs-samhallsbyggnad .m.m-filter a:active,
.webbkurs-samhallsbyggnad .m.m-filter a[data-selected],
.playsamhallsbyggnad .m.m-filter a:hover,
.playsamhallsbyggnad .m.m-filter a:focus,
.playsamhallsbyggnad .m.m-filter a:active,
.playsamhallsbyggnad .m.m-filter a[data-selected],
.samhallsbyggnadsnet .m.m-filter a:hover,
.samhallsbyggnadsnet .m.m-filter a:focus,
.samhallsbyggnadsnet .m.m-filter a:active,
.samhallsbyggnadsnet .m.m-filter a[data-selected] {
    background-color: #39bd39;
    color: #1a1a1a;
}

.serveringstillstandsnet .m.m-filter a:hover,
.serveringstillstandsnet .m.m-filter a:focus,
.serveringstillstandsnet .m.m-filter a:active,
.serveringstillstandsnet .m.m-filter a[data-selected] {
    background-color: #9369bf;
}

.sjukvardsnet .m.m-filter a:hover,
.sjukvardsnet .m.m-filter a:focus,
.sjukvardsnet .m.m-filter a:active,
.sjukvardsnet .m.m-filter a[data-selected] {
    background-color: #e58ade;
    color: #1a1a1a;
}

.skattenet .m.m-filter a:hover,
.skattenet .m.m-filter a:focus,
.skattenet .m.m-filter a:active,
.skattenet .m.m-filter a[data-selected] {
    background-color: #44bec2;
    color: #1a1a1a;
}

.playskola .m.m-filter a:hover,
.playskola .m.m-filter a:focus,
.playskola .m.m-filter a:active,
.playskola .m.m-filter a[data-selected],
.skolnet .m.m-filter a:hover,
.skolnet .m.m-filter a:focus,
.skolnet .m.m-filter a:active,
.skolnet .m.m-filter a[data-selected] {
    background-color: #d92b2b;
}

.playsocial .m.m-filter a:hover,
.playsocial .m.m-filter a:focus,
.playsocial .m.m-filter a:active,
.playsocial .m.m-filter a[data-selected],
.socialnet .m.m-filter a:hover,
.socialnet .m.m-filter a:focus,
.socialnet .m.m-filter a:active,
.socialnet .m.m-filter a[data-selected] {
    background-color: #b07dd1;
    color: #1a1a1a;
}

.socialforsakringsnet .m.m-filter a:hover,
.socialforsakringsnet .m.m-filter a:focus,
.socialforsakringsnet .m.m-filter a:active,
.socialforsakringsnet .m.m-filter a[data-selected] {
    background-color: #c57bd4;
    color: #1a1a1a;
}

.trafiknet .m.m-filter a:hover,
.trafiknet .m.m-filter a:focus,
.trafiknet .m.m-filter a:active,
.trafiknet .m.m-filter a[data-selected] {
    background-color: #32c262;
    color: #1a1a1a;
}

.playupphandling .m.m-filter a:hover,
.playupphandling .m.m-filter a:focus,
.playupphandling .m.m-filter a:active,
.playupphandling .m.m-filter a[data-selected],
.upphandlingsnet .m.m-filter a:hover,
.upphandlingsnet .m.m-filter a:focus,
.upphandlingsnet .m.m-filter a:active,
.upphandlingsnet .m.m-filter a[data-selected] {
    background-color: #4246a6;
}

.myndighetsbeslut .m.m-filter a:hover,
.myndighetsbeslut .m.m-filter a:focus,
.myndighetsbeslut .m.m-filter a:active,
.myndighetsbeslut .m.m-filter a[data-selected] {
    background-color: #d9a52b;
}

.lagboken .m.m-filter a:hover,
.lagboken .m.m-filter a:focus,
.lagboken .m.m-filter a:active,
.lagboken .m.m-filter a[data-selected] {
    background-color: #005cad;
}

.hrnet .m.m-filter a:hover,
.hrnet .m.m-filter a:focus,
.hrnet .m.m-filter a:active,
.hrnet .m.m-filter a[data-selected] {
    background-color: #f26fa6;
}

.webbkurs-mark-och-miljo .m.m-filter a:hover,
.webbkurs-mark-och-miljo .m.m-filter a:focus,
.webbkurs-mark-och-miljo .m.m-filter a:active,
.webbkurs-mark-och-miljo .m.m-filter a[data-selected] {
    background-color: #52cc52;
}

.webbkurs-skola .m.m-filter a:hover,
.webbkurs-skola .m.m-filter a:focus,
.webbkurs-skola .m.m-filter a:active,
.webbkurs-skola .m.m-filter a[data-selected] {
    background-color: #d92b2b;
}

.webbkurs-social .m.m-filter a:hover,
.webbkurs-social .m.m-filter a:focus,
.webbkurs-social .m.m-filter a:active,
.webbkurs-social .m.m-filter a[data-selected] {
    background-color: #b07dd1;
}

.webbkurs-upphandling .m.m-filter a:hover,
.webbkurs-upphandling .m.m-filter a:focus,
.webbkurs-upphandling .m.m-filter a:active,
.webbkurs-upphandling .m.m-filter a[data-selected] {
    background-color: #4246a6;
}

.studentnet-skola .m.m-filter a:hover,
.studentnet-skola .m.m-filter a:focus,
.studentnet-skola .m.m-filter a:active,
.studentnet-skola .m.m-filter a[data-selected] {
    background-color: #d92b2b;
}

.studentnet-sjukvard .m.m-filter a:hover,
.studentnet-sjukvard .m.m-filter a:focus,
.studentnet-sjukvard .m.m-filter a:active,
.studentnet-sjukvard .m.m-filter a[data-selected] {
    background-color: #e58ade;
}

.studentnet-social .m.m-filter a:hover,
.studentnet-social .m.m-filter a:focus,
.studentnet-social .m.m-filter a:active,
.studentnet-social .m.m-filter a[data-selected] {
    background-color: #b07dd1;
}

.studentnet-arbetsratt .m.m-filter a:hover,
.studentnet-arbetsratt .m.m-filter a:focus,
.studentnet-arbetsratt .m.m-filter a:active,
.studentnet-arbetsratt .m.m-filter a[data-selected] {
    background-color: #f26f7a;
}

.studentnet-migration .m.m-filter a:hover,
.studentnet-migration .m.m-filter a:focus,
.studentnet-migration .m.m-filter a:active,
.studentnet-migration .m.m-filter a[data-selected] {
    background-color: #8360bf;
}

.studentnet-samhallsbyggnad .m.m-filter a:hover,
.studentnet-samhallsbyggnad .m.m-filter a:focus,
.studentnet-samhallsbyggnad .m.m-filter a:active,
.studentnet-samhallsbyggnad .m.m-filter a[data-selected] {
    background-color: #39bd39;
}

.studentnet-forvaltning .m.m-filter a:hover,
.studentnet-forvaltning .m.m-filter a:focus,
.studentnet-forvaltning .m.m-filter a:active,
.studentnet-forvaltning .m.m-filter a[data-selected] {
    background-color: #d9682b;
}

.hyresnet .m.m-filter a:hover,
.hyresnet .m.m-filter a:focus,
.hyresnet .m.m-filter a:active,
.hyresnet .m.m-filter a[data-selected] {
    background-color: #9fd92b;
}

.kemikalienet .m.m-filter a:hover,
.kemikalienet .m.m-filter a:focus,
.kemikalienet .m.m-filter a:active,
.kemikalienet .m.m-filter a[data-selected] {
    background-color: #6bd149;
}

.skadestandsnet .m.m-filter a:hover,
.skadestandsnet .m.m-filter a:focus,
.skadestandsnet .m.m-filter a:active,
.skadestandsnet .m.m-filter a[data-selected] {
    background-color: #4ec3e0;
}

.m.m-filter a.deselect {
    background: url(/static/i/icons-xxs.png) -94px -94px no-repeat;
    display: block;
    height: 24px;
    right: 0;
    margin: 6px 10px 6px 0;
    opacity: 1;
    overflow: hidden;
    padding: 0;
    position: absolute;
    text-indent: 120%;
    top: 0;
    width: 24px;
}

.svg .m.m-filter a.deselect {
    background-image: url(/static/i/icons-xxs.svg);
}

.arbetsmiljonet .m.m-filter a.deselect,
.playarbetsliv .m.m-filter a.deselect,
.arbetsrattsnet .m.m-filter a.deselect,
.webbkurs-arbetsratt .m.m-filter a.deselect,
.straffrattsnet .m.m-filter a.deselect,
.djurnet .m.m-filter a.deselect,
.eunet .m.m-filter a.deselect,
.fastighetsnet .m.m-filter a.deselect,
.foretagarnet .m.m-filter a.deselect,
.forvaltningsnet .m.m-filter a.deselect,
.webbkurs-forvaltning .m.m-filter a.deselect,
.insolvensnet .m.m-filter a.deselect,
.playdataskydd .m.m-filter a.deselect,
.itnet .m.m-filter a.deselect,
.kommentarer .m.m-filter a.deselect,
.livsmedelsnet .m.m-filter a.deselect,
.playmiljo .m.m-filter a.deselect,
.miljonet .m.m-filter a.deselect,
.climatenet .m.m-filter a.deselect,
.momsnet .m.m-filter a.deselect,
.polisnet .m.m-filter a.deselect,
.raddningsnet .m.m-filter a.deselect,
.sakerhetsnet .m.m-filter a.deselect,
.samhallsbyggnadsnet .m.m-filter a.deselect,
.playdronare .m.m-filter a.deselect,
.playsamhallsbyggnad .m.m-filter a.deselect,
.webbkurs-samhallsbyggnad .m.m-filter a.deselect,
.sjukvardsnet .m.m-filter a.deselect,
.skattenet .m.m-filter a.deselect,
.playsocial .m.m-filter a.deselect,
.socialnet .m.m-filter a.deselect,
.socialforsakringsnet .m.m-filter a.deselect,
.trafiknet .m.m-filter a.deselect {
    /* Black */
    background-position: -94px 6px;
}

.m.m-filter a.deselect:hover,
.m.m-filter a.deselect:focus,
.m.m-filter a.deselect:active {
    opacity: 0.8;
}

.m.m-filter select {
    display: block;
    width: 100%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

    .m.m-filter select + label + select {
        margin-top: 24px;
    }

.service .m.m-filter a.toggler {
    background: none;
    color: #004b8d;
    display: block;
    margin-top: 12px;
    padding: 0;
    text-decoration: underline;
}

    .service .m.m-filter a.toggler:hover,
    .service .m.m-filter a.toggler:active,
    .service .m.m-filter a.toggler:focus {
        color: #1a1a1a;
    }

@media only screen and (min-width: 1280px) {
    .layout-5 .content-1 > .m-filter:first-child {
        margin-top: 70px;
    }

    .m.m-filter a {
        padding: 7px 49px 7px 15px;
    }

        .m.m-filter a.deselect {
            margin: 8px 10px 8px 0;
        }

    .service .m.m-filter a.toggler {
        margin-top: 14px;
    }
}

@media only screen and (max-width: 767px) {
    .layout-5 .content-1 > .m-filter:first-child {
        margin-top: 0;
    }
}

/* Selected filters
-------------------------------------------------------------- */
ul.selected-filters {
    list-style: none;
    margin: -24px 0 24px;
    overflow: hidden;
}

    ul.selected-filters li {
        background-color: #004b8d;
        border-radius: 2px;
        color: #fff;
        display: block;
        float: left;
        margin: 0 10px 12px 0;
        padding: 0 32px 0 10px;
        position: relative;
        text-decoration: none;
    }

.arbetsmiljonet ul.selected-filters li {
    background-color: #e5738f;
    color: #1a1a1a;
}

.webbkurs-arbetsratt ul.selected-filters li,
.playarbetsliv ul.selected-filters li,
.arbetsrattsnet ul.selected-filters li {
    background-color: #f26f7a;
    color: #1a1a1a;
}

.straffrattsnet ul.selected-filters li {
    background-color: #54c4d6;
    color: #1a1a1a;
}

.djurnet ul.selected-filters li {
    background-color: #d0d92b;
    color: #1a1a1a;
}

.eunet ul.selected-filters li {
    background-color: #219ed9;
    color: #1a1a1a;
}

.familjenet ul.selected-filters li {
    background-color: #694cbf;
}

.fastighetsnet ul.selected-filters li {
    background-color: #9fd92b;
    color: #1a1a1a;
}

.foretagarnet ul.selected-filters li {
    background-color: #d97c2b;
    color: #1a1a1a;
}

.webkurs-forvaltning ul.selected-filters li,
.forvaltningsnet ul.selected-filters li {
    background-color: #d9682b;
    color: #1a1a1a;
}

.immaterialnet ul.selected-filters li {
    background-color: #1d76c4;
}

.insolvensnet ul.selected-filters li {
    background-color: #38c77f;
    color: #1a1a1a;
}

.playdataskydd ul.selected-filters li,
.itnet ul.selected-filters li,
.webbkurs-gdpr ul.selected-filters li {
    background-color: #3288c9;
    color: #1a1a1a;
}

.juridiknet ul.selected-filters li {
    background-color: #1b6db5;
}

.kommentarer ul.selected-filters li {
    background-color: #2bb6d9;
    color: #1a1a1a;
}

.livsmedelsnet ul.selected-filters li {
    background-color: #6bd149;
    color: #1a1a1a;
}

.marknadsnet ul.selected-filters li {
    background-color: #0965b5;
}

.migrationsnet ul.selected-filters li {
    background-color: #8360bf;
}

.playmiljo ul.selected-filters li,
.miljonet ul.selected-filters li,
.climatenet ul.selected-filters li {
    background-color: #52cc52;
    color: #1a1a1a;
}

.momsnet ul.selected-filters li {
    background-color: #45c49e;
    color: #1a1a1a;
}

.polisnet ul.selected-filters li {
    background-color: #2ba8d9;
    color: #1a1a1a;
}

.raddningsnet ul.selected-filters li,
.playdronare ul.selected-filters li,
.sakerhetsnet ul.selected-filters li {
    background-color: #44c244;
    color: #1a1a1a;
}

.rattsfallsnet ul.selected-filters li {
    background-color: #005cad;
}

.webbkurs-samhallsbyggnad ul.selected-filters li,
.playsamhallsbyggnad ul.selected-filters li,
.samhallsbyggnadsnet ul.selected-filters li {
    background-color: #39bd39;
    color: #1a1a1a;
}

.serveringstillstandsnet ul.selected-filters li {
    background-color: #9369bf;
}

.sjukvardsnet ul.selected-filters li {
    background-color: #e58ade;
    color: #1a1a1a;
}

.skattenet ul.selected-filters li {
    background-color: #44bec2;
    color: #1a1a1a;
}

.playskola ul.selected-filters li,
.skolnet ul.selected-filters li {
    background-color: #d92b2b;
}

.playsocial ul.selected-filters li,
.socialnet ul.selected-filters li {
    background-color: #b07dd1;
    color: #1a1a1a;
}

.socialforsakringsnet ul.selected-filters li {
    background-color: #c57bd4;
    color: #1a1a1a;
}

.trafiknet ul.selected-filters li {
    background-color: #32c262;
    color: #1a1a1a;
}

.playupphandling ul.selected-filters li,
.upphandlingsnet ul.selected-filters li {
    background-color: #4246a6;
}

.myndighetsbeslut ul.selected-filters li {
    background-color: #d9a52b;
}

.lagboken ul.selected-filters li {
    background-color: #005cad;
}

.hrnet ul.selected-filters li {
    background-color: #f26fa6;
}

.webbkurs-mark-och-miljo ul.selected-filters li {
    background-color: #52cc52;
}

.webbkurs-skola ul.selected-filters li {
    background-color: #d92b2b;
}

.webbkurs-social ul.selected-filters li {
    background-color: #b07dd1;
}

.webbkurs-upphandling ul.selected-filters li {
    background-color: #4246a6;
}

.studentnet-skola ul.selected-filters li {
    background-color: #d92b2b;
}

.studentnet-sjukvard ul.selected-filters li {
    background-color: #e58ade;
}

.studentnet-social ul.selected-filters li {
    background-color: #b07dd1;
}

.studentnet-arbetsratt ul.selected-filters li {
    background-color: #f26f7a;
}

.studentnet-migration ul.selected-filters li {
    background-color: #8360bf;
}

.studentnet-samhallsbyggnad ul.selected-filters li {
    background-color: #39bd39;
}

.studentnet-forvaltning ul.selected-filters li {
    background-color: #d9682b;
}

.hyresnet ul.selected-filters li {
    background-color: #9fd92b;
}

.kemikalienet ul.selected-filters li {
    background-color: #6bd149;
}

.skadestandsnet ul.selected-filters li {
    background-color: #4ec3e0;
}

ul.selected-filters a.deselect {
    background: url(/static/i/icons-xxs.png) -94px -94px no-repeat;
    display: block;
    height: 24px;
    right: 0;
    margin: 0 4px 0 0;
    opacity: 1;
    overflow: hidden;
    padding: 0;
    position: absolute;
    text-indent: 120%;
    top: 0;
    width: 24px;
}

ul.selected-filters a.deselect {
    background-image: url(/static/i/icons-xxs.svg);
}

.arbetsmiljonet ul.selected-filters a.deselect,
.playarbetsliv ul.selected-filters a.deselect,
.arbetsrattsnet ul.selected-filters a.deselect,
.webbkurs-arbetsratt ul.selected-filters a.deselect,
.straffrattsnet ul.selected-filters a.deselect,
.djurnet ul.selected-filters a.deselect,
.eunet ul.selected-filters a.deselect,
.fastighetsnet ul.selected-filters a.deselect,
.foretagarnet ul.selected-filters a.deselect,
.webbkurs-forvaltning ul.selected-filters a.deselect,
.forvaltningsnet ul.selected-filters a.deselect,
.insolvensnet ul.selected-filters a.deselect,
.playdataskydd ul.selected-filters a.deselect,
.itnet ul.selected-filters a.deselect,
.kommentarer ul.selected-filters a.deselect,
.livsmedelsnet ul.selected-filters a.deselect,
.playmiljo ul.selected-filters a.deselect,
.miljonet ul.selected-filters a.deselect,
.climatenet ul.selected-filters a.deselect,
.momsnet ul.selected-filters a.deselect,
.polisnet ul.selected-filters a.deselect,
.raddningsnet ul.selected-filters a.deselect,
.sakerhetsnet ul.selected-filters a.deselect,
.samhallsbyggnadsnet ul.selected-filters a.deselect,
.playdronare ul.selected-filters a.deselect,
.playsamhallsbyggnad ul.selected-filters a.deselect,
.webbkurs-samhallsbyggnad ul.selected-filters a.deselect,
.sjukvardsnet ul.selected-filters a.deselect,
.skattenet ul.selected-filters a.deselect,
.playsocial ul.selected-filters a.deselect,
.socialnet ul.selected-filters a.deselect,
.socialforsakringsnet ul.selected-filters a.deselect,
.trafiknet ul.selected-filters a.deselect {
    /* Black */
    background-position: -94px 6px;
}

ul.selected-filters a.deselect:hover,
ul.selected-filters a.deselect:focus,
ul.selected-filters a.deselect:active {
    opacity: 0.8;
}

@media only screen and (min-width: 1280px) {
    ul.selected-filters {
        margin: -28px 0 28px;
    }

        ul.selected-filters li {
            margin-bottom: 14px;
        }

        ul.selected-filters a.deselect {
            margin: 2px 4px 2px 0;
        }
}

/* Campaign
-------------------------------------------------------------- */
.m-campaign {
    clear: both;
}

    .m-campaign > img {
        float: right;
    }

    .m-campaign img.cover {
        float: none;
    }

.m.m-campaign img + .m-c {
    float: left;
    margin-top: 0;
    padding-top: 23px;
    width: 220px;
}

@media only screen and (min-width: 1280px) {
    .m-campaign > img {
        max-width: none;
        width: 480px;
    }

    .m.m-campaign img + .m-c {
        padding-top: 27px;
        width: 375px;
    }
}

@media only screen and (max-width: 1023px) {
    .m-campaign > img {
        max-width: 415px;
    }

    .m.m-campaign img + .m-c {
        width: 235px;
    }
}

@media only screen and (max-width: 767px) {
    .m-campaign {
        border-bottom: 1px solid #d1d1d1;
        border-top: 1px solid #1a1a1a;
        padding-top: 23px;
    }

        .m-campaign > img {
            max-width: 200px;
        }

    .m.m-campaign img + .m-c {
        border: none;
        padding-top: 0;
        width: 220px;
    }
}

@media only screen and (max-width: 479px) {
    .m-campaign > img {
        display: block;
        float: none;
        margin-bottom: 12px;
        max-width: 100%;
    }

    .m.m-campaign .m-c {
        float: none;
        width: auto;
    }

    .m.m-campaign img + .m-c {
        float: none;
        width: auto;
    }
}

/* About
-------------------------------------------------------------- */
.m.m-about .m-c > p + p {
    margin: 0;
    text-indent: 24px;
}

.m.m-about .m-c p.more {
    margin-top: 12px;
    text-indent: 0;
}

.m.m-about .m-c > .media {
    float: right;
    margin: 0 0 24px 35px;
    width: 305px;
    display: block !important;
    align-items: inherit !important;
}

.m.m-about .media > * + * {
    margin-top: 24px;
}

@media only screen and (min-width: 1280px) {
    .m.m-about .m-c > p + p {
        text-indent: 28px;
    }

    .m.m-about .m-c p.more {
        margin-top: 14px;
        text-indent: 0;
    }

    .m.m-about .m-c > .media {
        margin: 0 0 28px 45px;
        width: 375px;
    }

    .m.m-about .media > * + * {
        margin-top: 28px;
    }
}

@media only screen and (max-width: 1023px) {
    .m.m-about .m-c > .media {
        float: none;
        margin-left: 0;
        width: auto;
    }
}

/* Law-lists
-------------------------------------------------------------- */
.indicator {
    display: block;
    position: absolute;
    right: 0;
    height: 16px;
    width: 16px;
    margin-top: 5px;
    border-radius: 50%;
}

.indicator-inline {
    display: inline-block;
    right: auto !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
    position: static;
    margin: 0;
}

.indicator-small {
    height: 10px;
    width: 10px;
}

.export .icon {
    background-repeat: no-repeat;
    display: inline-block;
}

.icon-pdf {
    background-image: url(/static/i/pdf.svg);
}

.icon-word {
    background-image: url(/static/i/word.svg);
}

.icon-xsl {
    background-image: url(/static/i/xls.svg);
}

.icon-library {
    background-image: url(/static/i/library.svg);
}

.icon-export {
    background-image: url(/static/i/inbox.svg);
    background-size: 25px;
}

.indicator-approved {
    background-color: #178B2F;
}

.indicator-waiting {
    background-color: #F8E71C;
}

.indicator-declined {
    background-color: #D72C2B;
}
/* Teasers
-------------------------------------------------------------- */
.m-teasers {
    clear: both;
}

.m.m-teasers .m-c {
    border-bottom: none;
    overflow: hidden;
    padding-bottom: 0;
}

.m-teasers .m-c ul {
    border-bottom: 1px solid #d1d1d1;
    list-style: none;
    margin: 0 -35px 0 0;
    padding: 0 0 11px;
}

.m.m-teasers li {
    background-color: #004b8d;
    background-image: url(/static/i/services-l.png);
    background-position: 50% 20px;
    background-repeat: no-repeat;
    border-radius: 2px;
    float: left;
    height: 108px;
    margin: 0 35px 24px 0;
    position: relative;
    width: 220px;
}

.svg .m-teasers li {
    background-image: url(/static/i/services-l.svg);
}

.m.m-teasers li.playskola,
.m.m-teasers li.playsocial,
.m.m-teasers li.playupphandling,
.m.m-teasers li.playmiljo,
.m.m-teasers li.playdronare,
.m.m-teasers li.playsamhallsbyggnad,
.m.m-teasers li.playarbetsliv,
.m.m-teasers li.playdataskydd {
    background-image: url(/static/i/services-play-icons-l.png);
    background-position: 50% 17px;
}

.svg .m.m-teasers li.playskola,
.svg .m.m-teasers li.playsocial,
.svg .m.m-teasers li.playupphandling,
.svg .m.m-teasers li.playmiljo,
.svg .m.m-teasers li.playdronare,
.svg .m.m-teasers li.playsamhallsbyggnad,
.svg .m.m-teasers li.playarbetsliv,
.svg .m.m-teasers li.playdataskydd {
    background-image: url(/static/i/services-play-icons-l.svg);
    background-position: 50% 17px;
}

.svg .m.m-teasers li.sakerhetsnet {
    background-image: url(/static/i/service-icons/sakerhetsnet-white.svg);
}

.m-teasers li.playskola {
    background-color: #d92b2b;
}

.m-teasers li.playskola,
.m-teasers li.skolnet {
    background-position: 50% 15px;
    background-color: #d92b2b;
}

.m-teasers li.polisnet {
    background-position: 50% -285px;
    background-color: #2ba8d9;
}

.m-teasers li.djurnet {
    background-position: 50% -585px;
    background-color: #d0d92b;
}

.m-teasers li.forvaltningsnet {
    background-position: 50% -885px;
    background-color: #d9682b;
}

.m-teasers li.foretagarnet {
    background-position: 50% -1185px;
    background-color: #d97c2b;
}

.m-teasers li.fastighetsnet {
    background-position: 50% -1485px;
    background-color: #9fd92b;
}

.m-teasers li.livsmedelsnet {
    background-position: 50% -1785px;
    background-color: #6bd149;
}

.m-teasers li.playmiljo,
.m-teasers li.miljonet,
.m-teasers li.climatenet {
    background-position: 50% -2085px;
    background-color: #52cc52;
}

.m-teasers li.raddningsnet {
    background-position: 50% -2385px;
    background-color: #44c244;
}

.m-teasers li.sakerhetsnet,
.m-teasers li.playdronare {
    background-position: 50% 19px;
    background-color: #44c244;
}

.m-teasers li.webbkurs-samhallsbyggnad,
.m-teasers li.samhallsbyggnadsnet,
.m-teasers li.playsamhallsbyggnad {
    background-position: 50% -2685px;
    background-color: #39bd39;
}

.m-teasers li.insolvensnet {
    background-position: 50% -2985px;
    background-color: #38c77f;
}

.m-teasers li.momsnet {
    background-position: 50% -3285px;
    background-color: #45c49e;
}

.m-teasers li.skattenet {
    background-position: 50% -3585px;
    background-color: #44bec2;
}

.m-teasers li.playupphandling {
    background-color: #4246a6;
}

.m-teasers li.upphandlingsnet {
    background-position: 50% -3885px;
    background-color: #4246a6;
}

.m-teasers li.eunet {
    background-position: 50% -4185px;
    background-color: #219ed9;
}

.m-teasers li.playdataskydd {
    background-position: 50% 17px;
    background-color: #3288c9;
}

.m-teasers li.itnet {
    background-position: 50% -4485px;
    background-color: #3288c9;
}

.m-teasers li.immaterialnet {
    background-position: 50% -4785px;
    background-color: #1d76c4;
}

.m-teasers li.juridiknet {
    background-position: 50% -5085px;
    background-color: #1b6db5;
}

.m-teasers li.marknadsnet {
    background-position: 50% -5385px;
    background-color: #0965b5;
}

.m-teasers li.familjenet {
    background-position: 50% -5685px;
    background-color: #694cbf;
}

.m-teasers li.migrationsnet {
    background-position: 50% -5985px;
    background-color: #8360bf;
}

.m-teasers li.serveringstillstandsnet {
    background-position: 50% -6285px;
    background-color: #9369bf;
}

.m-teasers li.playsocial {
    background-color: #b07dd1;
}

.m-teasers li.socialnet {
    background-position: 50% -6585px;
    background-color: #b07dd1;
}

.m-teasers li.sjukvardsnet {
    background-position: 50% -6885px;
    background-color: #e58ade;
}

.m-teasers li.playarbetsliv {
    background-color: #f26f7a;
}

.m-teasers li.webbkurs-arbetsratt,
.m-teasers li.arbetsrattsnet {
    background-position: 50% -7185px;
    background-color: #f26f7a;
}

.m-teasers li.socialforsakringsnet {
    background-position: 50% -7485px;
    background-color: #c57bd4;
}

.m-teasers li.trafiknet {
    background-position: 50% -7785px;
    background-color: #32c262;
}

.m-teasers li.straffrattsnet {
    background-position: 50% -8085px;
    background-color: #54c4d6;
}

.m-teasers li.arbetsmiljonet {
    background-position: 50% -8385px;
    background-color: #e5738f;
}

.m-teasers li.yourpages {
    background-position: 50% -8765px;
    background-color: #004b8d;
}

.m-teasers li.myndighetsbeslut {
    background-position: 50% -9175px;
    background-color: #d9a52b;
}

.m-teasers li.hrnet {
    background-position: 50% -9470px;
    background-color: #f26fa6;
}

.m-teasers li.webbkurs-mark-och-miljo {
    background-position: 50% -9770px;
    background-color: #52cc52;
}

.m-teasers li.webbkurs-skola {
    background-position: 50% -9770px;
    background-color: #d92b2b;
}

.m-teasers li.webbkurs-social {
    background-position: 50% -9770px;
    background-color: #b07dd1;
}

.m-teasers li.webbkurs-upphandling {
    background-position: 50% -9770px;
    background-color: #4246a6;
}

.m-teasers li.webbkurs {
    background-position: 50% -9770px;
}

.m-teasers li.studentnet-skola {
    background-position: 50% -10178px;
    background-color: #d92b2b;
}

.m-teasers li.studentnet-sjukvard {
    background-position: 50% -10178px;
    background-color: #e58ade;
}

.m-teasers li.studentnet-social {
    background-position: 50% -10178px;
    background-color: #b07dd1;
}

.m-teasers li.studentnet-arbetsratt {
    background-position: 50% -10178px;
    background-color: #f26f7a;
}

.m-teasers li.studentnet-migration {
    background-position: 50% -10178px;
    background-color: #8360bf;
}

.m-teasers li.studentnet-samhallsbyggnad {
    background-position: 50% -10178px;
    background-color: #39bd39;
}

.m-teasers li.studentnet-forvaltning {
    background-position: 50% -10178px;
    background-color: #d9682b;
}

.m-teasers li a,
.m-teasers li a:hover {
    bottom: 0;
    color: #fff;
    left: 0;
    position: absolute;
    right: 0;
    text-decoration: none;
    top: 0;
}

.m-teasers li h3 {
    font-size: 16px;
    line-height: 16px;
    padding-top: 70px;
    text-align: center;
    text-shadow: 0 0 50px rgba(0,0,0,0.6);
}

@media only screen and (min-width: 1280px) {
    .m-teasers .m-c ul {
        margin-right: -45px;
        padding-bottom: 13px;
    }

    .m.m-teasers li {
        height: 126px;
        margin-bottom: 28px;
        margin-right: 45px;
        width: 270px;
    }

    .m-teasers li h3 {
        font-size: 19px;
        line-height: 21px;
        padding-top: 77px;
    }
}

@media only screen and (max-width: 1023px) {
    .m.m-teasers li {
        width: 325px;
    }
}

@media only screen and (max-width: 767px) {
    .m.m-teasers li {
        margin-right: 20px;
        width: 200px;
    }
}

@media only screen and (max-width: 479px) {
    .m-teasers .m-c ul {
        margin: 0;
    }

    .m.m-teasers li {
        float: none;
        margin-bottom: 12px;
        margin-right: 0;
        width: auto;
    }
}

/* Meta block
-------------------------------------------------------------- */
.m-meta .m-c {
    padding-bottom: 11px;
}

    .m-meta .m-c div {
        float: left;
        width: 305px;
    }

        .m-meta .m-c div + div {
            float: right;
        }

    .m-meta .m-c h3 {
        font-family: "Myriad W01 Bd", sans-serif;
        font-size: 16px;
    }

@media only screen and (min-width: 1280px) {
    .m-meta {
        margin-right: -210px;
    }

    .content-2 .m-meta {
        margin-right: 0;
    }

    .m-meta .m-c {
        padding-bottom: 13px;
    }

        .m-meta .m-c div {
            width: 375px;
        }

        .m-meta .m-c h3 {
            font-size: 19px;
        }
}

@media only screen and (max-width: 767px) {
    .m-meta .m-c div,
    .m-meta .m-c div + div {
        float: none;
    }
}

/* TOC
-------------------------------------------------------------- */
.m-toc .m-c div {
    float: left;
    width: 305px;
}

    .m-toc .m-c div + div {
        float: right;
    }

.m-toc ul {
    list-style: none;
    margin: 0;
}

.m.m-toc ul li {
    background-image: none;
    padding: 0;
}

.m-toc li + li {
    margin: 12px 0 0;
}

@media only screen and (min-width: 1280px) {
    .m-toc:not(.m-toc--responsive) {
        margin-right: -210px;
    }

    .m-toc .m-c div {
        width: 375px;
    }

    .m-toc li + li {
        margin: 14px 0 0;
    }
}

.m-toc--responsive .m-c div {
    width: 50%;
}

@media only screen and (max-width: 1023px) {
    .m-toc--responsive .m-c div {
        width: 100%;
    }
}

/* Large block
-------------------------------------------------------------- */
@media only screen and (min-width: 1280px) {
    .m-large {
        margin-right: -210px;
    }
}

/* Collapsable Box
-------------------------------------------------------------- */
.collapsable .toggler {
    background: url(/static/i/icons-s.png) 0 0 no-repeat #1a1a1a;
    display: block;
    height: 24px;
    left: 0;
    margin-right: 10px;
    overflow: hidden;
    position: absolute;
    text-indent: 120%;
    width: 24px;
    -webkit-transition: background-color 0.162s ease-in-out;
    -moz-transition: background-color 0.162s ease-in-out;
    transition: background-color 0.162s ease-in-out;
}

.collapsable button.toggler {
    padding: 0;
}

.collapsable.collapsed .toggler {
    background-position: -100px 0;
}

.svg .collapsable .toggler {
    background-image: url(/static/i/icons-s.svg);
}

.collapsable .toggler:hover,
.collapsable .toggler:active,
.collapsable .toggler:focus {
    background-color: #004b8d;
}

.js .collapsable.collapsed .m-c {
    display: none;
}

.js .collapsable.collapsed .more {
    display: none;
}

@media only screen and (min-width: 1280px) {
    .collapsable .toggler {
        margin: 2px 15px 2px 0;
    }
}

/* Collapsable Box - Alternative apperance
-------------------------------------------------------------- */
.collapsable-block.alt .collapsable .toggler {
    left: auto;
    right: 0;
    top: 50%;
    -webkit-transform: translateY(calc(-50% - 2px));
    -ms-transform: translateY(calc(-50% - 2px));
    transform: translateY(calc(-50% - 2px));
    margin-right: 8px;
}

.collapsable-block.alt .indicator {
    right: auto;
    left: 0;
    top: 50%;
    -webkit-transform: translateY(calc(-50% - 6px));
    -ms-transform: translateY(calc(-50% - 6px));
    transform: translateY(calc(-50% - 6px));
}

.collapsable-block.alt .m.collapsable .m-h h2,
.collapsable-block.alt .m.collapsable .m-h h3 {
    padding: 17px 34px;
    border-right: 1px solid #000;
    width: calc(100% - 132px);
    box-sizing: border-box;
    text-transform: none;
}

.js .collapsable-block.alt .collapsable.collapsed {
    margin-bottom: -1px;
}

.collapsable-block.alt .m.collapsable .m-h {
    border-top: 1px solid #000;
    padding-bottom: 0;
    position: relative;
}

.collapsable-block.alt .collapsable .toggler {
    position: absolute;
    display: inline-block;
    width: auto;
    padding-left: 36px;
    width: 68px;
    background: transparent;
    text-indent: 0;
    color: #004b8d;
    box-sizing: content-box;
}

.collapsable-block.alt .collapsable button.toggler {
    box-sizing: content-box;
}

.collapsable-block.alt .collapsable .toggler:before {
    background: url(/static/i/icons-s.png) 0 0 no-repeat #004b8d;
    display: inline-block;
    height: 24px;
    left: 0;
    margin-right: 10px;
    content: "";
    position: absolute;
    text-indent: 120%;
    width: 24px;
    -webkit-transition: background-color 0.162s ease-in-out;
    -moz-transition: background-color 0.162s ease-in-out;
    transition: background-color 0.162s ease-in-out;
}

.collapsable-block.alt .collapsable.collapsed .toggler:before {
    background-position: -100px 0;
}

.collapsable-block.alt .collapsable .toggler:focus,
.collapsable-block.alt .collapsable .toggler:hover {
    color: #1a1a1a;
}

    .collapsable-block.alt .collapsable .toggler:focus:before,
    .collapsable-block.alt .collapsable .toggler:hover:before {
        background-color: #1a1a1a;
    }

/* Collapsable Block
-------------------------------------------------------------- */
.collapsable-block .collapsable {
    margin-bottom: 36px;
}

.js .collapsable-block .collapsable.collapsed {
    margin-bottom: 24px;
}

.collapsable-block .m.m-list ul {
    padding-bottom: 0;
}

.collapsable-block .m.m-list .m-c {
    margin-bottom: 24px;
    padding-bottom: 23px;
}

p.toggle-all {
    font-family: "Myriad W01 It", sans-serif;
}

@media only screen and (min-width: 1280px) {
    .collapsable-block .collapsable {
        margin-bottom: 42px;
    }

    .js .collapsable-block .collapsable {
        margin-bottom: 28px;
    }

    .collapsable-block .m.m-list .m-c {
        margin-bottom: 28px;
        padding-bottom: 27px;
    }

    .collapsable-block > h2 + p.toggle-all {
        margin: -20px 0 42px;
    }
}

/* Collapsable filters
-------------------------------------------------------------- */
.filtering {
    padding: 0 0 24px;
}

    .filtering h2 .toggler {
        background: url(/static/i/icons-s.png) 0 0 no-repeat #1a1a1a;
        display: inline-block;
        height: 24px;
        margin-right: 10px;
        overflow: hidden;
        text-indent: 120%;
        vertical-align: top;
        width: 24px;
        -webkit-transition: background-color 0.162s ease-in-out;
        -moz-transition: background-color 0.162s ease-in-out;
        transition: background-color 0.162s ease-in-out;
    }

    .filtering h2.collapsed .toggler {
        background-position: -100px 0;
    }

.svg .filtering h2 .toggler {
    background-image: url(/static/i/icons-s.svg);
}

.filtering h2 .toggler:hover,
.filtering h2 .toggler:active,
.filtering h2 .toggler:focus {
    background-color: #004b8d;
}


/* Favs
-------------------------------------------------------------- */
#favs {
    color: #fff;
    margin: 0 auto;
    padding: 0 4px;
    position: relative;
    width: 985px;
    z-index: 2;
}

    #favs > div {
        background: url(/static/i/arrow.png) 116px 0 no-repeat;
        float: right;
        margin-top: -12px;
        padding-top: 12px;
        width: 305px;
    }

.svg #favs > div {
    background-image: url(/static/i/arrow.svg);
}

.js #favs > div {
    display: none;
    position: absolute;
    right: 4px;
    z-index: 2;
}

#favs.collapsed > div {
    display: none;
}

#favs ul {
    list-style: none;
    margin-bottom: 0;
}

#favs > div > ul {
    background: #1a1a1a;
    border-radius: 2px;
    padding: 24px 12px 12px;
}

    #favs > div > ul > li {
        padding: 0 0 24px 34px;
        position: relative;
    }

#favs ul ul li {
    font: 16px/24px "Myriad W01 Regular", sans-serif;
    margin: 12px 0 0;
    padding-right: 34px;
    position: relative;
    text-transform: none;
}

#favs .subtopic {
    display: inline-block;
}

#favs .collapsed ul {
    display: none;
}

#favs a,
#favs a:hover,
#favs a:focus,
#favs a:active {
    color: #fff;
    opacity: 1;
}

    #favs a:hover,
    #favs a:focus,
    #favs a:active {
        opacity: 0.8;
    }

    #favs a.toggler {
        background: url(/static/i/icons-s.png) 0 -100px no-repeat;
        display: block;
        height: 24px;
        left: 0;
        overflow: hidden;
        padding: 0;
        position: absolute;
        text-indent: 120%;
        top: 0;
        width: 24px;
        -webkit-transition: opacity 0.162s ease-in-out;
        -moz-transition: opacity 0.162s ease-in-out;
        transition: opacity 0.162s ease-in-out;
    }

.svg #favs a.toggler {
    background-image: url(/static/i/icons-s.svg);
}

#favs .collapsed .toggler {
    background-position: -100px -100px;
}

#favs a.delete {
    background: url(/static/i/icons-xxs.png) -94px -94px no-repeat;
    display: block;
    height: 24px;
    opacity: 0.4;
    overflow: hidden;
    padding: 0;
    position: absolute;
    right: 0;
    text-indent: 120%;
    top: 0;
    width: 24px;
}

.svg #favs a.delete {
    background-image: url(/static/i/icons-xxs.svg);
}

#favs a.delete:hover,
#favs a.delete:focus,
#favs a.delete:active {
    opacity: 1;
}

@media only screen and (min-width: 1280px) {
    #favs {
        padding: 0 5px;
        width: 1215px;
    }

        #favs > div {
            background-position: 158px 0;
            width: 375px;
        }

    .js #favs > div {
        right: 5px;
    }

    #favs > div > ul {
        padding: 28px 14px 14px;
    }

        #favs > div > ul > li {
            padding: 0 0 28px 39px;
        }

    #favs ul ul li {
        font-size: 19px;
        line-height: 28px;
        margin: 14px 0 0;
    }

    #favs a.toggler {
        margin: 2px 0;
    }

    #favs a.delete {
        margin: 2px 0;
    }
}

@media only screen and (max-width: 1023px) {
    #favs {
        width: 685px;
    }

        #favs > div {
            background-position: 136px 0;
        }

    .js #favs > div {
        width: 325px;
    }
}

@media only screen and (max-width: 767px) {
    #favs {
        max-width: 420px;
        width: auto;
    }

    .js #favs > div {
        background-position: 251px 0;
        width: 310px;
    }
}

@media only screen and (max-width: 479px) {
    #favs {
        max-width: none;
    }

    .js #favs > div {
        background-position: 221px 0;
        right: 20px;
        width: 280px;
    }
}

/* Top sliding box
-------------------------------------------------------------- */
.administrative {
    background: #1a1a1a;
    color: #fff;
}

.js .administrative,
.js .administrative.collapsed {
    display: none;
}

.administrative a,
.administrative a:hover,
.administrative a:focus,
.administrative a:active {
    color: #fff;
}

.administrative .close {
    margin: 0;
}

.administrative > div {
    margin: 0 auto;
    padding: 24px 0 36px;
    width: 985px;
}

.administrative .m {
    margin: 0;
}

    .administrative .m .m-c {
        border-bottom: none;
        border-top-color: #fff;
        padding-bottom: 0;
    }

    .administrative .m.m-list ul {
        border-bottom: none;
        float: left;
        padding-bottom: 0;
        width: 220px;
    }

        .administrative .m.m-list ul + ul {
            margin-left: 35px;
        }

    .administrative .m.m-list li {
        margin-bottom: 12px;
    }

.your-services li a {
    background: url(/static/i/services-s.png) -11000px 0 no-repeat;
    display: block;
    opacity: 1;
    padding-left: 36px;
    text-decoration: none;
}

    .your-services li a:not(#foo) {
        font-size: 16px;
    }

.svg .your-services li a,
.svg .service-icons .icon:before {
    background-image: url(/static/i/services-s.svg);
}

.service-icons .icon.lawlist:before {
    background-image: url(/static/i/laglista-s.png);
    height: 25px;
}

.service-icons .icon:before {
    background: url(/static/i/services-s.png) 0 0 no-repeat;
    display: inline-block;
    vertical-align: middle;
    content: " ";
    width: 24px;
    height: 24px;
    margin-right: 10px;
}

.your-services li.skadestandsnet a,
.service-icons .icon.skadestandsnet:before {
    background-position: -10802px -400px;
}

.your-services li.climatenet a,
.service-icons .icon.climatenet:before {
    background-position: -11228px -3px;
}

.your-services li.arbetsmiljonet a,
.service-icons .icon.arbetsmiljonet {
    background-position: -3600px -400px;
}

.your-services li.arbetsrattsnet a,
.service-icons .icon.arbetsrattsnet:before {
    background-position: 0 0;
}

.your-services li.straffrattsnet a,
.service-icons .icon.straffrattsnet:before {
    background-position: -3200px -400px;
}

.your-services li.djurnet a,
.service-icons .icon.djurnet:before {
    background-position: -2000px 0;
}

.your-services li.eunet a,
.service-icons .icon.eunet:before {
    background-position: -2400px 0;
}

.your-services li.familjenet a,
.service-icons .icon.familjenet:before {
    background-position: -400px 0;
}

.your-services li.fastighetsnet a,
.service-icons .icon.fastighetsnet:before {
    background-position: -2800px 0;
}

.your-services li.foretagarnet a,
.service-icons .icon.foretagarnet:before {
    background-position: -3200px 0;
}

.your-services li.forvaltningsnet a,
.service-icons .icon.forvaltningsnet:before {
    background-position: -3600px 0;
}

.your-services li.immaterialnet a,
.service-icons .icon.immaterialnet:before {
    background-position: -4000px 0;
}

.your-services li.insolvensnet a,
.service-icons .icon.insolvensnet:before {
    background-position: -4400px 0;
}

.your-services li.itnet a,
.service-icons .icon.itnet:before {
    background-position: -800px 0;
}

.your-services li.juridiknet a,
.service-icons .icon.juridiknet:before {
    background-position: -4800px 0;
}

.your-services li.kommentarer a,
.service-icons .icon.kommentarer:before {
    background-position: -2000px -400px;
}

.your-services li.livsmedelsnet a,
.service-icons .icon.livsmedelsnet:before {
    background-position: -1200px 0;
}

.your-services li.marknadsnet a,
.service-icons .icon.marknadsnet:before {
    background-position: -5200px 0;
}

.your-services li.migrationsnet a,
.service-icons .icon.migrationsnet:before {
    background-position: -5600px 0;
}

.your-services li.miljonet a,
.service-icons .icon.miljonet:before {
    background-position: -1600px 0;
}

.your-services li.momsnet a,
.service-icons .icon.momsnet:before {
    background-position: -6000px 0;
}

.your-services li.polisnet a,
.service-icons .icon.polisnet:before {
    background-position: -6400px 0;
}

.your-services li.raddningsnet a,
.service-icons .icon.raddningsnet:before {
    background-position: -6800px 0;
}

.your-services li.sakerhetsnet a,
.service-icons .icon.sakerhetsnet:before {
    background-image: url(/static/i/service-icons/sakerhetsnet.svg);
    background-position: 0;
    background-size: 24px;
}

.your-services li.rattsfallsnet a,
.service-icons .icon.rattsfallsnet:before {
    background-position: -7200px 0;
}

.your-services li.samhallsbyggnadsnet a,
.service-icons .icon.samhallsbyggnadsnet:before {
    background-position: -7600px 0;
}

.your-services li.serveringstillstandsnet a,
.service-icons .icon.serveringstillstandsnet:before {
    background-position: -8000px 0;
}

.your-services li.sjukvardsnet a,
.service-icons .icon.sjukvardsnet:before {
    background-position: 0 -400px;
}

.your-services li.skattenet a,
.service-icons .icon.skattenet:before {
    background-position: -400px -400px;
}

.your-services li.skolnet a,
.service-icons .icon.skolnet:before {
    background-position: -800px -400px;
}

.your-services li.socialnet a,
.service-icons .icon.socialnet:before {
    background-position: -1200px -400px;
}

.your-services li.socialforsakringsnet a,
.service-icons .icon.socialforsakringsnet:before {
    background-position: -2400px -400px;
}

.your-services li.trafiknet a,
.service-icons .icon.trafiknet:before {
    background-position: -2800px -400px;
}

.your-services li.upphandlingsnet a,
.service-icons .icon.upphandlingsnet:before {
    background-position: -1600px -400px;
}

.your-services li.yourpages a,
.service-icons .icon.yourpages:before {
    background-position: -4007px -400px;
}

.your-services li.myndighetsbeslut a,
.service-icons .icon.myndighetsbeslut:before {
    background-position: -4410px -398px;
}

.your-services li.lagboken a {
    background-position: -7200px 0;
}

.your-services li.hrnet a,
.service-icons .icon.hrnet:before {
    background-position: -4810px -400px;
}

.your-services li.webbkurs-mark-och-miljo a,
.service-icons .icon.webbkurs-mark-och-miljo:before {
    background-position: -5200px -400px;
}

.your-services li.webbkurs-skola a,
.service-icons .icon.webbkurs-skola:before {
    background-position: -5600px -400px;
}

.your-services li.webbkurs-social a,
.service-icons .icon.webbkurs-social:before {
    background-position: -6000px -400px;
}

.your-services li.webbkurs-upphandling a,
.service-icons .icon.webbkurs-upphandling:before {
    background-position: -6400px -400px;
}

.your-services li.webbkurs a,
.service-icons .icon.webbkurs:before {
    background-position: -8400px -400px;
}

.your-services li.webbkurs-arbetsmiljo a,
.service-icons .icon.webbkurs-arbetsmiljo:before {
    background-position: -8400px 0;
}

.your-services li.studentnet-skola a,
.service-icons .icon.studentnet-skola:before {
    background-position: -6800px -400px;
}

.your-services li.studentnet-sjukvard a,
.service-icons .icon.studentnet-sjukvard:before {
    background-position: -7200px -400px;
}

.your-services li.studentnet-social a,
.service-icons .icon.studentnet-social:before {
    background-position: -7600px -400px;
}

.your-services li.studentnet-arbetsratt a,
.service-icons .icon.studentnet-arbetsratt:before {
    background-position: -8000px -400px;
}

.your-services li.studentnet-migration a,
.service-icons .icon.studentnet-migration:before {
    background-position: -8800px -400px;
}

.your-services li.studentnet-samhallsbyggnad a,
.service-icons .icon.studentnet-samhallsbyggnad:before {
    background-position: -9200px -400px;
}

.your-services li.studentnet-forvaltning a,
.service-icons .icon.studentnet-forvaltning:before {
    background-position: -9600px -400px;
}

.your-services li.kemikalienet a,
.service-icons .icon.kemikalienet:before {
    background-position: -8800px 0;
}

.your-services li.hyresnet a,
.service-icons .icon.hyresnet:before {
    background-position: -9202px 0;
}

.your-services li.webbkurs-forvaltning a,
.service-icons .icon.webbkurs-forvaltning:before {
    background-position: -9600px 0;
}

.your-services li.juridiskt-bibliotek a,
.service-icons .icon.juridiskt-bibliotek:before {
    background-position: -10402px 0;
}

.your-services li.jp-infonet a,
.service-icons .icon.jp-infonet:before {
    background-position: -10801px 0;
}

.your-services li.playskola a,
.service-icons .icon.playskola:before,
.your-services li.playsocial a,
.service-icons .icon.playsocial:before,
.your-services li.playupphandling a,
.service-icons .icon.playupphandling:before,
.your-services li.playmiljo a,
.service-icons .icon.playmiljo:before,
.your-services li.playdronare a,
.your-services li.playsamhallsbyggnad a,
.service-icons .icon.playdronare:before,
.service-icons .icon.playsamhallsbyggnad:before,
.your-services li.playarbetsliv a,
.service-icons .icon.playarbetsliv:before,
.your-services li.playdataskydd a,
.service-icons .icon.playdataskydd:before {
    background-image: url(/static/i/services-play-icons-s.svg);
}

.your-services li.playskola a,
.service-icons .icon.playskola:before {
    background-position: 0 -432px;
}

.your-services li.playsocial a,
.service-icons .icon.playsocial:before {
    background-position: 0 -288px;
}

.your-services li.playupphandling a,
.service-icons .icon.playupphandling:before {
    background-position: 0 0;
}

.your-services li.playmiljo a,
.service-icons .icon.playmiljo:before {
    background-position: 0 -215px;
}

.your-services li.playsamhallsbyggnad a,
.service-icons .icon.playsamhallsbyggnad:before {
    background-position: 0 -143px;
}

.your-services li.playdronare a,
.service-icons .icon.playdronare:before {
    background-position: 0 -503px;
}

.your-services li.playarbetsliv a,
.service-icons .icon.playarbetsliv:before {
    background-position: 0 -71px;
}

.your-services li.playdataskydd a,
.service-icons .icon.playdataskydd:before {
    background-position: 0 -360px;
}

.your-services li.webbkurs-arbetsratt a,
.service-icons .icon.webbkurs-arbetsratt:before {
    background-position: -10002px -400px;
}

.your-services li.webbkurs-samhallsbyggnad a,
.service-icons .icon.webbkurs-samhallsbyggnad:before {
    background-position: -10000px 0;
}

.your-services li.juridiskt-bibliotek a,
.service-icons .icon.juridiskt-bibliotek:before {
    background-position: -10402px 0;
}

.your-services li a:hover,
.your-services li a:active,
.your-services li a:focus {
    opacity: 0.8;
}

@media only screen and (min-width: 1280px) {
    .administrative > div {
        padding: 28px 0 42px;
        width: 1215px;
    }

    .administrative .m.m-list ul {
        width: 270px;
    }

        .administrative .m.m-list ul + ul {
            margin-left: 45px;
        }

    .administrative .m.m-list li {
        margin-bottom: 14px;
    }

    .your-services li a:not(#foo) {
        /* padding: 0 0 1px 42px; */
        line-height: 27px; /* fonts.com renders wrong line-height */
    }
}

@media only screen and (max-width: 1023px) {
    .administrative > div {
        width: 685px;
    }

    .administrative .m .m-h {
        border-bottom: 1px solid #fff;
        padding-bottom: 11px;
    }

    .administrative .m .m-c {
        border-top: none;
        margin-top: 0;
    }


    .administrative .m.m-list ul {
        margin-right: 35px;
        width: 325px;
    }

        .administrative .m.m-list ul + ul {
            margin-left: 0;
        }
}

@media only screen and (max-width: 767px) {
    .administrative > div {
        max-width: 420px;
        padding-left: 20px;
        padding-right: 20px;
        width: auto;
    }
}

/* SKIP LINKS
================================================================================ */
#skip {
    left: -9999px;
    margin: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 200;
}

    #skip a:focus,
    #skip a:active {
        background: #fff;
        display: block;
        left: 9999px;
        position: absolute;
        top: 0;
        padding: 12px 0;
        text-align: center;
        width: 100%;
    }

/* LOGO
================================================================================ */
#logo {
    bottom: 0;
    left: 0;
    position: absolute;
    z-index: 50;
}

    #logo.jp-education {
        bottom: 0;
        left: auto;
        right: 0;
        position: absolute;
        z-index: 50;
    }

.service #logo {
    left: auto;
    right: 0;
}

.login #logo {
    left: 50%;
    right: auto;
    top: 32px;
}

#logo a img {
    display: block;
    height: 128px;
    margin: 0 0 -64px 0;
    overflow: hidden;
    text-indent: -999px;
    width: 128px;
}

.login #logo a {
    margin-left: -64px;
}

.service #logo p {
    background: url(/static/i/logo-service.png) center center no-repeat;
    height: 104px;
    margin: 0 0 -52px 0;
    overflow: hidden;
    text-indent: -999px;
    width: 104px;
}

.svg .service #logo p {
    background-image: url(/static/i/logo-service.svg);
}

#logo.jp-education a img {
    background-size: 128px;
}

@media only screen and (min-width: 1024px) {
    #logo.centered {
        left: 50%;
        display: inline-block;
        margin-left: -64px;
    }
}

@media only screen and (min-width: 1280px) {
    .login #logo {
        top: 37px;
    }

    #logo a img {
        height: 150px;
        margin-bottom: -75px;
        width: 150px;
    }

    .service #logo p {
        background-image: url(/static/i/logo-service-l.png);
        height: 120px;
        margin: 0 1px -60px 0;
        overflow: hidden;
        text-indent: -999px;
        width: 120px;
    }

    .svg .service #logo p {
        background-image: url(/static/i/logo-service-l.svg);
    }

    #logo.jp-education a img {
        background-size: 150px;
    }
}

@media only screen and (max-width: 1023px) {
    #logo {
        left: 50%;
        display: inline-block;
        /* z-index: 901; */
        margin-left: -64px;
        opacity: 1;
        -webkit-transition: opacity 0.162s ease;
        -moz-transition: opacity 0.162s ease;
        transition: opacity 0.162s ease;
    }

        #logo.jp-education {
            left: 50%;
        }

    .menu-open #logo {
        z-index: 1;
    }

    .login #logo a {
        margin-left: 0;
    }
}

@media only screen and (max-width: 767px) {
    #logo {
        margin-left: -27px;
    }

        #logo a img {
            background-size: 54px 54px;
            height: 54px;
            margin-bottom: -27px;
            width: 54px;
        }

    .service #logo {
        display: none;
    }

    .login #logo {
        top: auto;
    }

    #logo.jp-education {
        margin-left: -40px;
    }

        #logo.jp-education a img {
            background-size: 80px;
            height: 80px;
            width: 80px;
            margin-bottom: -40px;
        }
}

/* SERVICE LOGO
================================================================================ */
#service {
    display: inline-block;
    font-size: 24px;
    padding-top: 24px;
}

.no-subnav #service {
    padding-top: 15px;
}

.popup #service {
    padding: 12px 0;
}

#service a {
    position: relative;
    display: block;
    color: #fff;
    text-decoration: none;
    padding: 5px 0 6px 48px; /* fonts.com renders wrong line-height */
}

    #service a:before {
        display: block;
        position: absolute;
        top: 6px;
        left: 0;
        content: "";
        width: 42px;
        height: 42px;
        margin-top: -6px;
        margin-right: 8px;
        background-image: url(/static/i/services-m.png);
        background-position: left top;
        background-repeat: no-repeat;
        vertical-align: middle;
    }

.svg #service a:before {
    background-image: url(/static/i/services-m.svg);
    filter: brightness(0) invert(1);
}

.svg .newsletter-hero #service a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 70px;
    height: 70px;
    border-radius: 50%;
    box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);
    position: absolute;
    top: -20px;
    left: -7px;
    background-color: white;
    border: 3px solid;
    padding: 0;
}

    .svg .newsletter-hero #service a:before {
        filter: initial;
        position: absolute;
        margin: 0;
        transform: translateX(-50%) translateY(-50%);
        top: 50%;
        left: 50%;
        filter: brightness(0) invert(0);
    }

.skadestandsnet #service a:before,
.skadestandsnet-icon #service a:before {
    background-position: 0px -5406px;
}

.climatenet #service a:before,
.climatenet-icon #service a:before {
    background-position: 0px -5618px;
}

.webbkurs-bibliotek #service a:before {
    background-position: 0px -7010px;
}

.arbetsmiljonet #service a:before,
.arbetsmiljonet-icon #service a:before {
    background-position: 0 -3000px;
}

.arbetsrattsnet #service a:before,
.arbetsrattsnet-icon #service a:before {
    background-position: 0 -400px;
}

.webbkurs-arbetsratt #service a:before,
.webbkurs-arbetsratt-icon #service a:before {
    background-position: 0 -5098px;
}

.straffrattsnet #service a:before,
.straffrattsnet-icon #service a:before {
    background-position: 0 -2900px;
}

.djurnet #service a:before,
.djurnet-icon #service a:before {
    background-position: 0 -500px;
}

.eunet #service a:before,
.eunet-icon #service a:before {
    background-position: 0 -600px;
}

.familjenet #service a:before,
.familjenet-icon #service a:before {
    background-position: 0 -700px;
}

.fastighetsnet #service a:before,
.fastighetsnet-icon #service a:before {
    background-position: 0 -800px;
}

.foretagarnet #service a:before,
.foretagarnet-icon #service a:before {
    background-position: 0 -900px;
}

.webbkurs-forvaltning #service a:before,
.webbkurs-forvaltning-icon #service a:before {
    background-position: 0 -4896px;
}

.forvaltningsnet #service a:before,
.forvaltningsnet-icon #service a:before {
    background-position: 0 -1000px;
}

.immaterialnet #service a:before,
.immaterialnet-icon #service a:before {
    background-position: 0 -1100px;
}

.insolvensnet #service a:before,
.insolvensnet-icon #service a:before {
    background-position: 0 -1200px;
}

.itnet #service a:before,
.itnet-icon #service a:before {
    background-position: 0 -300px;
}

.juridiknet #service a:before,
.juridiknet-icon #service a:before {
    background-position: 0 -1300px;
}

.juridiskt-bibliotek #service a:before,
.juridiskt-bibliotek-icon #service a:before {
    background-position: 0 -5198px;
}

.kommentarer #service a:before,
.kommentarer-icon #service a:before {
    background-position: 0 -2500px;
}

.livsmedelsnet #service a:before,
.livsmedelsnet-icon #service a:before {
    background-position: 0 -2600px;
}

.marknadsnet #service a:before,
.marknadsnet-icon #service a:before {
    background-position: 0 -1400px;
}

.migrationsnet #service a:before,
.migrationsnet-icon #service a:before {
    background-position: 0 -1500px;
}

.miljonet #service a:before,
.miljonet-icon #service a:before {
    background-position: 0 -200px;
}

.momsnet #service a:before,
.momsnet-icon #service a:before {
    background-position: 0 -1600px;
}

.polisnet #service a:before,
.polisnet-icon #service a:before {
    background-position: 0 -1700px;
}

.raddningsnet #service a:before,
.raddningsnet-icon #service a:before {
    background-position: 0 -1800px;
}

.rattsfallsnet #service a:before,
.rattsfallsnet-icon #service a:before {
    background-position: 0 -100px;
}

.samhallsbyggnadsnet #service a:before,
.samhallsbyggnadsnet-icon #service a:before {
    background-position: 0 -1900px;
}

.webbkurs-samhallsbyggnad #service a:before,
.webbkurs-samhallsbyggnad-icon #service a:before {
    background-position: 0 -4996px;
}

.serveringstillstandsnet #service a:before,
.serveringstillstandsnet-icon #service a:before {
    background-position: 0 -2000px;
}

.sjukvardsnet #service a:before,
.sjukvardsnet-icon #service a:before {
    background-position: 0 -2100px;
}

.skattenet #service a:before,
.skattenet-icon #service a:before {
    background-position: 0 -2200px;
}

.skolnet #service a:before,
.skolnet-icon #service a:before {
    background-position: 0 -2300px;
}

.socialnet #service a:before,
.socialnet-icon #service a:before {
    background-position: 0 0;
}

.socialforsakringsnet #service a:before,
.socialforsakringsnet-icon #service a:before {
    background-position: 0 -2700px;
}

.trafiknet #service a:before,
.trafiknet-icon #service a:before {
    background-position: 0 -2800px;
}

.upphandlingsnet #service a:before,
.upphandlingsnet-icon #service a:before {
    background-position: 0 -2400px;
}

.yourpages #service a:before,
.yourpages-icon #service a:before {
    background-position: 0 -3100px;
}

.myndighetsbeslut #service a:before,
.myndighetsbeslut-icon #service a:before {
    background-position: 0 -3200px;
}

.lagboken #service a:before,
.lagboken-icon #service a:before {
    background-position: 0 -100px;
}

.hrnet #service a:before,
.hrnet-icon #service a:before {
    background-position: 0 -3300px;
}

.webbkurs-mark-och-miljo #service a:before,
.webbkurs-mark-och-miljo-icon #service a:before {
    background-position: 0 -3400px;
}

.webbkurs-skola #service a:before,
.webbkurs-skola-icon #service a:before {
    background-position: 0 -3500px;
}

.webbkurs-social #service a:before,
.webbkurs-social-icon #service a:before {
    background-position: 0 -3600px;
}

.webbkurs-upphandling #service a:before,
.webbkurs-upphandling-icon #service a:before {
    background-position: 0 -3700px;
}

.webbkurs #service a:before,
.webbkurs-icon #service a:before {
    background-position: 0 -4200px;
}

.webbkurs-arbetsmiljo #service a:before,
.webbkurs-arbetsmiljo-icon #service a:before {
    background-position: 0 -4598px;
}

.studentnet-skola #service a:before,
.studentnet-skola-icon #service a:before {
    background-position: 0 -3800px;
}

.studentnet-sjukvard #service a:before,
.studentnet-sjukvard-icon #service a:before {
    background-position: 0 -3900px;
}

.studentnet-social #service a:before,
.studentnet-social-icon #service a:before {
    background-position: 0 -4000px;
}

.studentnet-arbetsratt #service a:before,
.studentnet-arbetsratt-icon #service a:before {
    background-position: 0 -4100px;
}

.studentnet-migration #service a:before,
.studentnet-migration-icon #service a:before {
    background-position: 0 -4300px;
}

.studentnet-samhallsbyggnad #service a:before,
.studentnet-samhallsbyggnad-icon #service a:before {
    background-position: 0 -4400px;
}

.studentnet-forvaltning #service a:before,
.studentnet-forvaltning-icon #service a:before {
    background-position: 0 -4500px;
}

.kemikalienet #service a:before,
.kemikalienet-icon #service a:before {
    background-position: 0 -4700px;
}

.hyresnet #service a:before,
.hyresnet-icon #service a:before {
    background-position: 0 -4800px;
}

.default #service a {
    background: transparent;
    padding-left: 0;
}

    .default #service a:before {
        display: none;
    }

.subtopic {
    display: block;
}

.search .m-list .subtopic {
    display: inline-block;
}

/* NEW SERVICE LOGOS
----------------------------------------------------------------------------- */
.sakerhetsnet #service a:before,
.sakerhetsnet-icon #service a:before,
.svg .sakerhetsnet #service a:before,
.svg .sakerhetsnet-icon #service a:before {
    background-image: url(/static/i/service-icons/sakerhetsnet-color.svg);
}

/* small size */
.sakerhetsnet #service a:before,
.sakerhetsnet-icon #service a:before {
    background-size: 24px;
    background-position: 0 1px;
}

@media only screen and (min-width: 768px) {
    .sakerhetsnet #service a:before,
    .sakerhetsnet-icon #service a:before {
        background-size: 30px;
    }
}

/* Medium size */
@media only screen and (min-width: 1280px) {
    .sakerhetsnet #service a:before,
    .sakerhetsnet-icon #service a:before {
        background-size: 42px;
    }
}

/* SERVICE PLAY LOGOS
 * I didn't want to touch the old files, I created a new file for the JP Play
 * icons.
 * TODO: Stop using service icons as background images from a sprite files. Use SVG files instead.
----------------------------------------------------------------------------- */
.playskola #service a:before,
.playskola-icon #service a:before,
.playsocial #service a:before,
.playsocial-icon #service a:before,
.playupphandling #service a:before,
.playupphandling-icon #service a:before,
.playmiljo #service a:before,
.playmiljo-icon #service a:before,
.playsamhallsbyggnad #service a:before,
.playsamhallsbyggnad-icon #service a:before,
.playarbetsliv #service a:before,
.playarbetsliv-icon #service a:before,
.playdataskydd #service a:before,
.playdataskydd-icon #service a:before {
    background-image: url(/static/i/services-play-icons-m.png);
    background-repeat: no-repeat;
}

.svg .playskola #service a:before,
.svg .playsocial #service a:before,
.svg .playupphandling #service a:before,
.svg .playmiljo #service a:before,
.svg .playdronare #service a:before,
.svg .playsamhallsbyggnad #service a:before,
.svg .playarbetsliv #service a:before,
.svg .playdataskydd #service a:before {
    background-image: url(/static/i/services-play-icons-m.svg);
    background-repeat: no-repeat;
}

.lawlist #service a:before {
    background-image: url(/static/i/laglista-l.png);
    background-size: auto;
}

@media only screen and (max-width: 1023px) {
    .lawlist #service a:before {
        background-image: url(/static/i/laglista-m.png) !important;
    }
}

@media only screen and (max-width: 767px) {
    .lawlist #service a:before {
        background-image: url(/static/i/laglista-s.png) !important;
    }
}

.playskola #service a:before {
    background-position: 0 -593px;
}

.playsocial #service a:before {
    background-position: 0 -397px;
}

.playupphandling #service a:before {
    background-position: 0 0px;
}

.playmiljo #service a:before {
    background-position: 0 -298px;
}

.playsamhallsbyggnad #service a:before {
    background-position: 0 -199px;
}

.playdronare #service a:before {
    background-position: 0 -692px;
}

.playarbetsliv #service a:before {
    background-position: 0 -99px;
}

.playdataskydd #service a:before {
    background-position: 0 -495px;
}

@media only screen and (min-width: 1280px) {
    #service {
        font-size: 28px;
        line-height: 28px;
        padding-top: 28px;
    }

    .no-subnav #service {
        padding-top: 16px;
    }

    .popup #service {
        padding: 14px 0;
    }

    #service a {
        padding: 7px 0 6px 56px; /* fonts.com renders wrong line-height */
    }

        #service a:before {
            top: 8px;
            margin-top: -8px;
            background-size: 42px;
        }
    /* Calculation: normal position * (42/32) */
    .arbetsmiljonet #service a:before,
    .arbetsmiljonet-icon #service a:before {
        background-position: 0 -3938px;
    }

    .playarbetsliv #service a:before,
    .arbetsrattsnet #service a:before,
    .arbetsrattsnet-icon #service a:before {
        background-position: 0 -525px;
    }

    .webbkurs-arbetsratt #service a:before,
    .webbkurs-arbetsratt-icon #service a:before {
        background-position: 0 -6690px;
    }

    .straffrattsnet #service a:before,
    .straffrattsnet-icon #service a:before {
        background-position: 0 -3806px;
    }

    .djurnet #service a:before,
    .djurnet-icon #service a:before {
        background-position: 0 -656px;
    }

    .eunet #service a:before,
    .eunet-icon #service a:before {
        background-position: 0 -787px;
    }

    .familjenet #service a:before,
    .familjenet-icon #service a:before {
        background-position: 0 -919px;
    }

    .fastighetsnet #service a:before,
    .fastighetsnet-icon #service a:before {
        background-position: 0 -1050px;
    }

    .foretagarnet #service a:before,
    .foretagarnet-icon #service a:before {
        background-position: 0 -1181px;
    }

    .forvaltningsnet #service a:before,
    .forvaltningsnet-icon #service a:before {
        background-position: 0 -1312px;
    }

    .webbkurs-forvaltning #service a:before,
    .webbkurs-forvaltning-icon #service a:before {
        background-position: 0 -6428px;
    }

    .immaterialnet #service a:before,
    .immaterialnet-icon #service a:before {
        background-position: 0 -1444px;
    }

    .insolvensnet #service a:before,
    .insolvensnet-icon #service a:before {
        background-position: 0 -1575px;
    }

    .playdataskydd #service a:before,
    .itnet #service a:before,
    .itnet-icon #service a:before {
        background-position: 0 -394px;
    }

    .juridiknet #service a:before,
    .juridiknet-icon #service a:before {
        background-position: 0 -1706px;
    }

    .juridiskt-bibliotek #service a:before,
    .juridiskt-bibliotek-icon #service a:before {
        background-position: 0 -6824px;
    }

    .kommentarer #service a:before,
    .kommentarer-icon #service a:before {
        background-position: 0 -3281px;
    }

    .livsmedelsnet #service a:before,
    .livsmedelsnet-icon #service a:before {
        background-position: 0 -3413px;
    }

    .marknadsnet #service a:before,
    .marknadsnet-icon #service a:before {
        background-position: 0 -1838px;
    }

    .migrationsnet #service a:before,
    .migrationsnet-icon #service a:before {
        background-position: 0 -1969px;
    }

    .playmiljo #service a:before,
    .playmiljo-icon #service a:before,
    .miljonet #service a:before,
    .miljonet-icon #service a:before {
        background-position: 0 -263px;
    }

    .momsnet #service a:before,
    .momsnet-icon #service a:before {
        background-position: 0 -2100px;
    }

    .polisnet #service a:before,
    .polisnet-icon #service a:before {
        background-position: 0 -2231px;
    }

    .raddningsnet #service a:before,
    .raddningsnet-icon #service a:before {
        background-position: 0 -2363px;
    }

    .rattsfallsnet #service a:before,
    .rattsfallsnet-icon #service a:before {
        background-position: 0 -131px;
    }

    .samhallsbyggnadsnet #service a:before,
    .samhallsbyggnadsnet-icon #service a:before {
        background-position: 0 -2494px;
    }

    .playsamhallsbyggnad-icon #service a:before {
        background-position: 0 -282px;
    }

    .webbkurs-samhallsbyggnad #service a:before,
    .webbkurs-samhallsbyggnad-icon #service a:before {
        background-position: 0 -6560px;
    }

    .serveringstillstandsnet #service a:before,
    .serveringstillstandsnet-icon #service a:before {
        background-position: 0 -2625px;
    }

    .sjukvardsnet #service a:before,
    .sjukvardsnet-icon #service a:before {
        background-position: 0 -2756px;
    }

    .skattenet #service a:before,
    .skattenet-icon #service a:before {
        background-position: 0 -2888px;
    }

    .skolnet #service a:before,
    .skolnet-icon #service a:before {
        background-position: 0 -3019px;
    }

    .playsocial #service a:before,
    .socialnet #service a:before,
    .playsocial-icon #service a:before,
    .socialnet-icon #service a:before {
        background-position: 0 0;
    }

    .socialforsakringsnet #service a:before,
    .socialforsakringsnet-icon #service a:before {
        background-position: 0 -3544px;
    }

    .trafiknet #service a:before,
    .trafiknet-icon #service a:before {
        background-position: 0 -3675px;
    }

    .upphandlingsnet #service a:before,
    .upphandlingsnet-icon #service a:before {
        background-position: 0 -3150px;
    }

    .yourpages #service a:before,
    .yourpages-icon #service a:before {
        background-position: 0 -4068px;
    }

    .myndighetsbeslut #service a:before,
    .myndighetsbeslut-icon #service a:before {
        background-position: 0 -4200px;
    }

    .lagboken #service a:before,
    .lagboken-icon #service a:before {
        background-position: 0 -131px;
    }

    .hrnet #service a:before,
    .hrnet-icon #service a:before {
        background-position: 0 -4331px;
    }

    .webbkurs-mark-och-miljo #service a:before,
    .webbkurs-mark-och-miljo-icon #service a:before {
        background-position: 0 -4460px;
    }

    .webbkurs-skola #service a:before,
    .webbkurs-skola-icon #service a:before {
        background-position: 0 -4590px;
    }

    .webbkurs-social #service a:before,
    .webbkurs-social-icon #service a:before {
        background-position: 0 -4721px;
    }

    .webbkurs-upphandling #service a:before,
    .webbkurs-upphandling-icon #service a:before {
        background-position: 0 -4852px;
    }

    .webbkurs #service a:before,
    .webbkurs-icon #service a:before {
        background-position: 0 -5508px;
    }

    .webbkurs-arbetsmiljo #service a:before,
    .webbkurs-arbetsmiljo-icon #service a:before {
        background-position: 0 -6038px;
    }

    .webbkurs-gdpr #service a:before,
    .webbkurs-gdpr-icon #service a:before {
        background-position: 0 -6948px;
    }

    .studentnet-skola #service a:before,
    .studentnet-skola-icon #service a:before {
        background-position: 0 -4988px;
    }

    .studentnet-sjukvard #service a:before,
    .studentnet-sjukvard-icon #service a:before {
        background-position: 0 -5119px;
    }

    .studentnet-social #service a:before,
    .studentnet-social-icon #service a:before {
        background-position: 0 -5250px;
    }

    .studentnet-arbetsratt #service a:before,
    .studentnet-arbetsratt-icon #service a:before {
        background-position: 0 -5381px;
    }

    .studentnet-migration #service a:before,
    .studentnet-migration-icon #service a:before {
        background-position: 0 -5643px;
    }

    .studentnet-samhallsbyggnad #service a:before,
    .studentnet-samhallsbyggnad-icon #service a:before {
        background-position: 0 -5774px;
    }

    .studentnet-forvaltning #service a:before,
    .studentnet-forvaltning-icon #service a:before {
        background-position: 0 -5905px;
    }

    .kemikalienet #service a:before,
    .kemikalienet-icon #service a:before {
        background-position: 0 -6168px;
    }

    .hyresnet #service a:before,
    .hyresnet-icon #service a:before {
        background-position: 0 -6300px;
    }

    .playskola #service a:before,
    .playskola-icon #service a:before {
        background-position: 0 -834px;
    }

    .playsocial #service a:before,
    .playsocial-icon #service a:before {
        background-position: 0 -558px;
    }

    .playupphandling #service a:before,
    .playupphandling-icon #service a:before {
        background-position: 0 -3px;
    }

    .playmiljo #service a:before,
    .playmiljo-icon #service a:before {
        background-position: 0 -419px;
    }

    .playsamhallsbyggnad #service a:before,
    .playsamhallsbyggnad-icon #service a:before {
        background-position: 0 -280px;
    }

    .playarbetsliv #service a:before,
    .playarbetsliv-icon #service a:before {
        background-position: 0 -141px;
    }

    .playdataskydd #service a:before,
    .playdataskydd-icon #service a:before {
        background-position: 0 -695px;
    }

    .playdronare #service a:before,
    .playdronare-icon #service a:before {
        background-position: 0 -969px;
    }

    .climatenet #service a:before,
    .climatenet-icon #service a:before {
        background-position: 0 -7374px;
    }

    .skadestandsnet #service a:before,
    .skadestandsnet-icon #service a:before {
        background-position: 0 -7095px;
    }
}

.menu-open .nav-supp_2__search[class],
.menu-open #service a,
.menu-open .nav-supp_2__search-service-link[class] {
    display: none;
}

@media only screen and (max-width: 1023px) {
    #service {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        padding: 0;
        width: 100%;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
    }

        #service a {
            display: inline-block;
            float: none;
            width: auto;
            max-width: 55%;
        }

    .subtopic {
        display: inline;
    }

    #service.page-title {
        display: block;
        max-width: none;
    }

        #service.page-title a {
            margin-left: 0;
        }

    .nav-supp_2__search-service-link {
        padding-top: 2px !important;
        padding-bottom: 0 !important;
        padding-right: 0 !important;
    }
}

@media only screen and (max-width: 767px) {
    #service {
        font-size: 14px;
        max-width: 135px;
        padding-top: 5px;
        padding-bottom: 5px;
    }

    .service-title {
        padding-bottom: 0 !important;
        display: flex;
        align-items: center;
    }

    #service a {
        line-height: 1.3;
        margin-left: -15px;
        padding: 3px 0 3px 32px;
        text-overflow: ellipsis;
        overflow: hidden;
        max-width: none;
    }

    .service-title a {
        line-height: 1.7 !important;
    }

    #service a:before {
        top: 2px;
        background: url(/static/i/services-s.png) 0 0 no-repeat;
        margin-top: -3px;
    }

    .svg #service a:before {
        background-image: url(/static/i/services-s.svg);
    }

    .default #service a {
        padding-left: 0;
    }

    .skadestandsnet #service a:before,
    .skadestandsnet-icon #service a:before {
        background-position: -10802px -400px;
    }

    .climatenet #service a:before,
    .climatenet-icon #service a:before {
        background-position: -11228px -3px;
    }

    .arbetsmiljonet #service a:before,
    .arbetsmiljonet-icon #service a:before {
        background-position: -3600px -400px;
    }

    .playarbetsliv #service a:before,
    .playarbetsliv-icon #service a:before,
    .arbetsrattsnet #service a:before,
    .arbetsrattsnet-icon #service a:before {
        background-position: 0 0;
    }

    .webbkurs-arbetsratt #service a:before,
    .webbkurs-arbetsratt-icon #service a:before {
        background-position: -10002px -400px;
    }

    .straffrattsnet #service a:before,
    .straffrattsnet-icon #service a:before {
        background-position: -3200px -400px;
    }

    .djurnet #service a:before,
    .djurnet-icon #service a:before {
        background-position: -2000px 0;
    }

    .eunet #service a:before,
    .eunet-icon #service a:before {
        background-position: -2400px 0;
    }

    .familjenet #service a:before,
    .familjenet-icon #service a:before {
        background-position: -400px 0;
    }

    .fastighetsnet #service a:before,
    .fastighetsnet-icon #service a:before {
        background-position: -2800px 0;
    }

    .foretagarnet #service a:before,
    .foretagarnet-icon #service a:before {
        background-position: -3200px 0;
    }

    .forvaltningsnet #service a:before,
    .forvaltningsnet-icon #service a:before {
        background-position: -3600px 0;
    }

    .immaterialnet #service a:before,
    .immaterialnet-icon #service a:before {
        background-position: -4000px 0;
    }

    .insolvensnet #service a:before,
    .insolvensnet-icon #service a:before {
        background-position: -4400px 0;
    }

    .playdataskydd #service a:before,
    .playdataskydd-icon #service a:before,
    .itnet #service a:before,
    .itnet-icon #service a:before {
        background-position: -800px 0;
    }

    .juridiknet #service a:before,
    .juridiknet-icon #service a:before {
        background-position: -4800px 0;
    }

    .juridiskt-bibliotek #service a:before,
    .juridiskt-bibliotek-icon #service a:before {
        background-position: -10402px 0px;
    }

    .kommentarer #service a:before,
    .kommentarer-icon #service a:before {
        background-position: -2000px -400px;
    }

    .livsmedelsnet #service a:before,
    .livsmedelsnet-icon #service a:before {
        background-position: -1200px 0;
    }

    .marknadsnet #service a:before,
    .marknadsnet-icon #service a:before {
        background-position: -5200px 0;
    }

    .migrationsnet #service a:before,
    .migrationsnet-icon #service a:before {
        background-position: -5600px 0;
    }

    .playmiljo #service a:before,
    .playmiljo-icon #service a:before,
    .miljonet #service a:before,
    .miljonet-icon #service a:before {
        background-position: -1600px 0;
    }

    .momsnet #service a:before,
    .momsnet-icon #service a:before {
        background-position: -6000px 0;
    }

    .polisnet #service a:before,
    .polisnet-icon #service a:before {
        background-position: -6400px 0;
    }

    .raddningsnet #service a:before,
    .raddningsnet-icon #service a:before {
        background-position: -6800px 0;
    }

    .rattsfallsnet #service a:before,
    .rattsfallsnet-icon #service a:before {
        background-position: -7200px 0;
    }

    .playsamhallsbyggnad #service a:before,
    .playsamhallsbyggnad-icon #service a:before,
    .samhallsbyggnadsnet #service a:before,
    .samhallsbyggnadsnet-icon #service a:before {
        background-position: -7600px 0;
    }

    .webbkurs-samhallsbyggnad #service a:before,
    .webbkurs-samhallsbyggnad-icon #service a:before {
        background-position: -10000px 0;
    }

    .serveringstillstandsnet #service a:before,
    .serveringstillstandsnet-icon #service a:before {
        background-position: -8000px 0;
    }

    .sjukvardsnet #service a:before,
    .sjukvardsnet-icon #service a:before {
        background-position: 0 -400px;
    }

    .skattenet #service a:before,
    .skattenet-icon #service a:before {
        background-position: -400px -400px;
    }

    .skolnet #service a:before,
    .skolnet-icon #service a:before {
        background-position: -800px -400px;
    }

    .playsocial #service a:before,
    .playsocial-icon #service a:before,
    .socialnet #service a:before,
    .socialnet-icon #service a:before {
        background-position: -1199px -400px;
    }

    .socialforsakringsnet #service a:before,
    .socialforsakringsnet-icon #service a:before {
        background-position: -2400px -400px;
    }

    .trafiknet #service a:before,
    .trafiknet-icon #service a:before {
        background-position: -2800px -400px;
    }

    .upphandlingsnet #service a:before,
    .upphandlingsnet-icon #service a:before {
        background-position: -1600px -400px;
    }

    .yourpages #service a:before,
    .yourpages-icon #service a:before {
        background-position: -4007px -400px;
    }

    .myndighetsbeslut #service a:before,
    .myndighetsbeslut-icon #service a:before {
        background-position: -4410px -400px;
    }

    .lagboken #service a:before,
    .lagboken-icon #service a:before {
        background-position: -7200px 0;
    }

    .hrnet #service a:before,
    .hrnet-icon #service a:before {
        background-position: -4810px -400px;
    }

    .webbkurs-mark-och-miljo #service a:before,
    .webbkurs-mark-och-miljo-icon #service a:before {
        background-position: -5200px -400px;
    }

    .webbkurs-skola #service a:before,
    .webbkurs-skola-icon #service a:before {
        background-position: -5600px -400px;
    }

    .webbkurs-social #service a:before,
    .webbkurs-social-icon #service a:before {
        background-position: -6000px -400px;
    }

    .webbkurs-upphandling #service a:before,
    .webbkurs-upphandling-icon #service a:before {
        background-position: -6400px -400px;
    }

    .webbkurs #service a:before,
    .webbkurs-icon #service a:before {
        background-position: -8400px -400px;
    }

    .webbkurs-arbetsmiljo #service a:before,
    .webbkurs-arbetsmiljo-icon #service a:before {
        background-position: -8400px 4px;
    }

    .webbkurs-forvaltning #service a:before,
    .webbkurs-forvaltning-icon #service a:before {
        background-position: -9600px 4px;
    }

    .studentnet-skola #service a:before,
    .studentnet-skola-icon #service a:before {
        background-position: -6800px -400px;
    }

    .studentnet-sjukvard #service a:before,
    .studentnet-sjukvard-icon #service a:before {
        background-position: -7200px -400px;
    }

    .studentnet-social #service a:before,
    .studentnet-social-icon #service a:before {
        background-position: -7600px -400px;
    }

    .studentnet-arbetsratt #service a:before,
    .studentnet-arbetsratt-icon #service a:before {
        background-position: -8000px -400px;
    }

    .studentnet-migration #service a:before,
    .studentnet-migration-icon #service a:before {
        background-position: -8800px -400px;
    }

    .studentnet-samhallsbyggnad #service a:before,
    .studentnet-samhallsbyggnad-icon #service a:before {
        background-position: -9200px -400px;
    }

    .studentnet-forvaltning #service a:before,
    .studentnet-forvaltning-icon #service a:before {
        background-position: -9600px -400px;
    }

    .kemikalienet #service a:before,
    .kemikalienet-icon #service a:before {
        background-position: -8800px 0;
    }

    .hyresnet #service a:before,
    .hyresnet-icon #service a:before {
        background-position: -9200px 0;
    }

    .playskola #service a:before,
    .playsocial #service a:before,
    .playupphandling #service a:before,
    .playmiljo #service a:before,
    .playmiljo-icon #service a:before,
    .playdronare #service a:before,
    .playsamhallsbyggnad #service a:before,
    .playarbetsliv #service a:before,
    .playdataskydd #service a:before {
        background-image: url(/static/i/services-play-icons-s.png);
        background-repeat: no-repeat;
    }

    .svg .playskola #service a:before,
    .svg .playsocial #service a:before,
    .svg .playupphandling #service a:before,
    .svg .playmiljo #service a:before,
    .svg .playmiljo-icon #service a:before,
    .svg .playdronare #service a:before,
    .svg .playsamhallsbyggnad #service a:before,
    .svg .playarbetsliv #service a:before,
    .svg .playdataskydd #service a:before {
        background-image: url(/static/i/services-play-icons-s.svg);
        background-repeat: no-repeat;
    }

    .playskola #service a:before,
    .playskola-icon #service a:before {
        background-position: 0 -432px;
    }

    .playsocial #service a:before,
    .playsocial-icon #service a:before {
        background-position: 0 -288px;
    }

    .playupphandling #service a:before,
    .playupphandling-icon #service a:before {
        background-position: 0 0px;
    }

    .playmiljo #service a:before,
    .playmiljo-icon #service a:before {
        background-position: 0 -216px;
    }

    .playsamhallsbyggnad #service a:before,
    .playsamhallsbyggnad-icon #service a:before {
        background-position: 0 -144px;
    }

    .playarbetsliv #service a:before,
    .playarbetsliv-icon #service a:before {
        background-position: 0 -72px;
    }

    .playdataskydd #service a:before,
    .playdataskydd-icon #service a:before {
        background-position: 0 -360px;
    }

    .playdronare #service a:before,
    .playdronare-icon #service a:before {
        background-position: 0 -504px;
    }
}

@media only screen and (max-width: 350px) {
    #service {
        max-width: 116px;
    }

        #service a {
            margin-left: 0;
        }

    .nav-main #service a:before {
        top: calc(50% - 12px);
    }
}
/* No icon */
#service a.no-icon {
    padding: 6px 0;
    margin-left: 0;
}

    #service a.no-icon::before {
        content: none;
    }

/* MAIN NAVIGATION
================================================================================ */
.nav-main {
    bottom: 0;
    left: 0;
    margin: 0 4px;
    right: 0;
    position: absolute;
}

    .nav-main > ul {
        font-size: 0;
        display: flex;
        list-style: none;
        margin: 0 0 0 154px;
    }

.logo-right .nav-main ul {
    margin: 0 154px 0 0;
}

.service .nav-main ul {
    margin: 0;
    max-width: 100%;
    white-space: nowrap;
    overflow: -moz-scrollbars-none;
    -ms-overflow-style: none;
    overflow-y: hidden;
    overflow-x: auto;
}

    .service .nav-main ul::-webkit-scrollbar {
        display: none;
    }

.service-nav-button,
.service-nav-link {
    display: flex !important;
    align-items: center;
    gap: 7px;
    font-weight: bold;
    font-size: 18px;
}

.service-nav-link {
    font-size: 16px;
}

.menu-open .service-nav-link {
    justify-content: center;
}

.service-nav-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 30px;
}

.service-title {
    padding-top: 0 !important;
}

.service-nav-wrapper .nav-supp_2 {
    float: none;
    margin-top: 0;
}

.nav-main li {
    display: flex;
    align-items: flex-end;
    font-size: 16px;
    vertical-align: top;
}

.nav-main a:not(.your-details__link) {
    border-radius: 2px 2px 0 0;
    color: #fff;
    display: block;
    font-family: "Myriad W01 Bd";
    overflow: hidden;
    padding: 6px 14px;
    text-decoration: none;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-transition: background-color 0.162s ease-in-out;
    -moz-transition: background-color 0.162s ease-in-out;
    transition: background-color 0.162s ease-in-out;
}

.nav-main li {
    padding: 5px 5px 0px 5px;
}

.nav-main a:focus {
    outline-offset: 0px;
}

.nav-main li[data-selected] a:focus {
    outline-color: black;
}

.nav-main a:link:hover,
.nav-main a:focus,
.nav-main a:active {
    /* background: rgba(255,255,255,.1); */
    color: #fff;
}

.nav-main li[data-selected] a,
.nav-main li[data-selected] a:link:hover,
.nav-main li[data-selected] a:focus,
.nav-main li[data-selected] a:active {
    background: #fff;
    color: #1a1a1a;
}

@media screen and (min-width:1025px) {
    .nav-main.nav-main--hover a:hover,
    .nav-main.nav-main--hover a:focus {
        text-decoration: underline;
    }

    .nav-main li[data-selected] + .nav-main__group--first {
        margin-left: 10px;
    }
}

.nav__button {
    width: 48px;
    height: 48px;
    position: absolute;
    bottom: 0;
    background: linear-gradient(to right, rgba(255, 255, 255, 0), #004b8d 90%);
    opacity: 0;
    transition: opacity 0.1s;
    pointer-events: none;
}

    .nav__button.is-visible {
        opacity: 1;
        pointer-events: auto;
    }

.nav__button--start {
    left: -1px;
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
}

.nav__button--end {
    right: -1px;
}

    .nav__button--end::before,
    .nav__button--start::before {
        content: '▶';
        position: absolute;
        font-size: 24px;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        display: inline-block;
        color: #fff;
        line-height: 56px;
        text-align: right;
    }

.nav__button--start::before {
    line-height: 46px;
}

@media (max-width:992px) {
    .nav__button--end,
    .nav__button--start {
        display: none;
    }
}

/* Grouped nav items */
.nav-main__group {
    background-color: #11589B;
    padding-top: 12px;
}

.nav-main__group--first {
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
}

.nav-main__group--last {
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
}

.nav-main__group-icon {
    color: #fff;
}

    .nav-main__group-icon svg {
        height: 26px;
        width: 26px;
    }

.nav-main__group--first[data-selected] > a {
    padding-left: 7px;
    border-radius: 0px 2px 0 0;
}

.nav-main__group--first[data-selected] > .nav-main__group-icon {
    padding: 6px 1px 0 7px;
    color: #000;
    background-color: #fff;
    border-top-left-radius: 2px;
    margin-right: -1px;
}

@media only screen and (min-width: 1024px) {
    .nav-main__group--first {
        border-top-left-radius: 12px;
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
        border-top-right-radius: 0;
        padding-left: 12px;
    }

    .nav-main__group--last {
        border-top-right-radius: 12px;
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
        padding-right: 12px;
    }
}

@media only screen and (min-width: 1280px) {
    .nav-main {
        margin: 0 5px;
    }

        .nav-main ul {
            margin-left: 185px;
        }

    .service .nav-main ul {
        margin: 0;
    }

    .nav-main li {
        font-size: 19px;
    }

    .nav-main a {
        line-height: 28px;
        padding: 7px 20px;
    }
}

@media only screen and (max-width: 1023px) {
    .js .nav-main > ul {
        display: none;
    }

    .nav-main {
        background: #004b8d;
        min-height: 60px;
    }

    #header.black .nav-main {
        background-color: #000;
    }

    .service .nav-main {
        background: #06427C;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        top: 0px;
        -webkit-box-ordinal-group: 0;
        -ms-flex-order: -1;
        order: -1;
        bottom: initial;
    }

    .menu-open .nav-main {
        display: block;
        height: 100%;
        left: 0;
        margin: 0;
        overflow: auto;
        position: fixed;
        top: 0;
        width: 100%;
        z-index: 900;
    }

        .menu-open .nav-main > ul {
            border-top: 1px solid rgba(255, 255, 255, 0.2);
            display: block;
            margin: 0 auto;
            top: 60px;
            padding-top: 18px;
            position: relative;
            width: 685px;
        }

        .menu-open .nav-main li {
            margin: 0 auto;
            width: 325px;
        }

    .nav-main a:not(.remove) {
        border-radius: 2px;
        min-height: 32px;
        min-width: 22px;
    }

    .nav-main-toggler {
        background: url(/static/i/menu-m.png) 0 100% no-repeat;
        height: 36px;
        left: 0;
        top: 50%;
        -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        transform: translateY(-50%);
        margin: 0;
        overflow: hidden;
        padding: 0;
        position: absolute;
        text-indent: 300%;
        white-space: nowrap;
        width: 36px;
        z-index: 100;
        -webkit-transition: opacity 0.162s ease-in-out;
        -moz-transition: opacity 0.162s ease-in-out;
        transition: opacity 0.162s ease-in-out;
    }

    .svg .nav-main-toggler {
        background-image: url(/static/i/menu-m.svg);
        padding: 0;
        width: 36px;
    }

    .nav-main-toggler:hover {
        opacity: 0.8;
    }

    .menu-open .nav-main-toggler,
    .service.menu-open.sticky-header .nav-main-toggler {
        background-image: url(/static/i/icons-s.png);
        background-position: -494px -94px; /* -500px -100px and adjustment for padding */
        bottom: auto;
        left: 50%;
        margin-left: -342px;
        position: fixed;
        top: 0;
    }

    .svg .menu-open .nav-main-toggler {
        background-image: url(/static/i/icons-s.svg);
        top: 21px;
    }

    .nav-main > ul,
    .service .nav-main > ul {
        margin: 0 auto;
    }

    .nav-main li {
        display: block;
        max-width: none !important;
        text-align: center;
    }


        .nav-main li[data-selected] a,
        .nav-main li[data-selected] a:link:hover,
        .nav-main li[data-selected] a:focus,
        .nav-main li[data-selected] a:active {
            color: #004b8d;
        }

    .service .nav-main li[data-selected] a,
    .service .nav-main li[data-selected] a:link:hover,
    .service .nav-main li[data-selected] a:focus,
    .service .nav-main li[data-selected] a:active {
        color: #000;
    }

    .nav-main .nav-supp .your-details {
        padding-top: 3px;
    }

    .nav-main .nav-supp > ul > li.your-details > a {
        padding-left: 26px;
        padding-top: 4px;
        min-width: 0;
    }

    .nav-main .nav-supp > ul > li.my-favorites {
        padding-top: 15px;
        margin-right: 0;
    }

        .nav-main .nav-supp > ul > li.my-favorites > .my-favorites__toggle {
            margin-right: 0;
        }
}

@media only screen and (max-width: 767px) {
    .nav-main .nav-supp > ul > li.my-favorites {
        padding-top: 8px;
    }

    .nav-main {
        min-height: 48px;
    }

    .service .nav-main {
        min-height: 60px;
        margin: 0;
    }

    .menu-open .nav-main > ul {
        top: 42px;
        width: 420px;
    }

    .menu-open .nav-main li {
        width: 310px;
    }

    .nav-main-toggler {
        background-image: url(/static/i/menu-s.png);
        height: 30px;
        width: 30px;
        left: 20px;
    }

    .svg .nav-main-toggler {
        background-image: url(/static/i/menu-s.svg);
        width: 30px;
    }

    .menu-open .nav-main-toggler,
    .service.menu-open.sticky-header .nav-main-toggler {
        background-position: -497px -97px;
        margin-left: -210px;
    }
}

@media only screen and (max-width: 479px) {
    .nav-main {
        margin: 0;
    }

    .menu-open .nav-main > ul {
        margin: 0 20px;
        width: auto;
    }

    .menu-open .nav-main li {
        width: auto;
    }


    .menu-open .nav-main-toggler,
    .service.menu-open.sticky-header .nav-main-toggler {
        margin-left: 0;
        left: 20px;
    }

    .menu-open .nav-main > ul {
        width: auto;
    }
}

@media only screen and (max-width: 350px) {
    .nav-main-toggler {
        left: 10px;
    }
}

/* SUPPLEMENTAL NAVIGATION
================================================================================ */
#header .nav-supp {
    left: 0;
    margin: 0 4px;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 101;
}

.service #header .nav-supp {
    top: -48px;
}

.service .nav-supp .home {
    float: left;
    margin: 0;
}

    .service .nav-supp .home a {
        margin-top: 12px;
        padding: 0;
    }

        .service .nav-supp .home a:before {
            content: "\2190\00A0";
        }

.nav-supp .login-toggle-button .c-icon {
    margin-bottom: 4px;
}

.nav-supp ul,
.nav-supp .login-toggle-button {
    float: right;
    margin: 0;
    list-style: none;
}


.logo-right .nav-main .nav-supp ul {
    margin: 0;
}

.nav-supp li {
    float: left;
}

.nav-supp .login-toggle-button .your-services__toggle {
    padding-top: 14px;
}

@media only screen and (max-width: 1280px) {
    .nav-supp .login-toggle-button .your-services__toggle {
        padding-top: 12px;
    }
}

#footer .nav-supp li + li {
    margin-left: 30px;
}

#header .nav-supp a:focus,
#header .nav-supp a:hover,
#header .nav-supp a:focus span,
#header .nav-supp a:hover span {
    text-decoration: none;
    border-bottom: none;
}

#header .nav-supp--startpage .my-start-page .dropdown__content a:hover {
    border-bottom: 1px solid #ccc;
}

.nav-supp a,
.nav-supp .tab a {
    color: #fff;
    display: inline-block;
    padding: 12px 15px 6px;
}

.nav-supp li:last-child a {
    padding-right: 0;
}

.nav-supp li.tab:last-child a {
    padding-right: 15px;
}

.arbetsmiljonet #header .nav-supp a,
.playarbetsliv #header .nav-supp a,
.arbetsrattsnet #header .nav-supp a,
.straffrattsnet #header .nav-supp a,
.djurnet #header .nav-supp a,
.eunet #header .nav-supp a,
.fastighetsnet #header .nav-supp a,
.foretagarnet #header .nav-supp a,
.forvaltningsnet #header .nav-supp a,
.webbkurs-forvaltning #header .nav-supp a,
.insolvensnet #header .nav-supp a,
.playdataskydd #header .nav-supp a,
.itnet #header .nav-supp a,
.kommentarer #header .nav-supp a,
.livsmedelsnet #header .nav-supp a,
.playmiljo #header .nav-supp a,
.miljonet #header .nav-supp a,
.climatenet #header .nav-supp a,
.momsnet #header .nav-supp a,
.polisnet #header .nav-supp a,
.raddningsnet #header .nav-supp a,
.sakerhetsnet #header .nav-supp a,
.playdronare #header .nav-supp a,
.playsamhallsbyggnad #header .nav-supp a,
.samhallsbyggnadsnet #header .nav-supp a,
.sjukvardsnet #header .nav-supp a,
.skattenet #header .nav-supp a,
.playsocial #header .nav-supp a,
.socialnet #header .nav-supp a,
.socialforsakringsnet #header .nav-supp a,
.trafiknet #header .nav-supp a {
    /* The black ones */
    color: #fff;
}

.arbetsmiljonet #header .nav-supp .tab a,
.playarbetsliv #header .nav-supp .tab a,
.arbetsrattsnet #header .nav-supp .tab a,
.straffrattsnet #header .nav-supp .tab a,
.djurnet #header .nav-supp .tab a,
.eunet #header .nav-supp .tab a,
.fastighetsnet #header .nav-supp .tab a,
.foretagarnet #header .nav-supp .tab a,
.forvaltningsnet #header .nav-supp .tab a,
.webbkurs-forvaltning #header .nav-supp .tab a,
.insolvensnet #header .nav-supp .tab a,
.playdataskydd #header .nav-supp .tab a,
.itnet #header .nav-supp .tab a,
.kommentarer #header .nav-supp .tab a,
.livsmedelsnet #header .nav-supp .tab a,
.playmiljo #header .nav-supp .tab a,
.miljonet #header .nav-supp .tab a,
.climatenet #header .nav-supp .tab a,
.momsnet #header .nav-supp .tab a,
.polisnet #header .nav-supp .tab a,
.raddningsnet #header .nav-supp .tab a,
.sakerhetsnet #header .nav-supp .tab a,
.playdronare #header .nav-supp .tab a,
.playsamhallsbyggnad #header .nav-supp .tab a,
.samhallsbyggnadsnet #header .nav-supp .tab a,
.sjukvardsnet #header .nav-supp .tab a,
.skattenet #header .nav-supp .tab a,
.playsocial #header .nav-supp .tab a,
.socialnet #header .nav-supp .tab a,
.socialforsakringsnet #header .nav-supp .tab a,
.trafiknet #header .nav-supp .tab a {
    /* The black ones */
    color: #fff;
}

#footer .nav-supp a {
    color: #fff;
    display: inline;
    padding: 0;
}

#header .nav-supp ul li.unselected a {
    background-color: transparent;
}

.nav-supp .tab a {
    border-radius: 0 0 2px 2px;
}

.nav-supp a:hover,
.nav-supp a:active,
.nav-supp a:focus {
    color: #fff;
}

.nav-supp--startpage .my-start-page .dropdown__content a:hover,
.nav-supp--startpage .my-start-page .dropdown__content a:active,
.nav-supp--startpage .my-start-page .dropdown__content a:focus {
    color: initial;
}

#header .nav-supp--static .your-details > a {
    padding-right: 30px !important;
}

.my-favorites-link[class][class]::after {
    margin-top: 1px !important;
}

@media only screen and (min-width: 1280px) {
    #header .nav-supp {
        margin: 0 0 0 5px;
    }

    .service #header .nav-supp {
        top: -56px;
    }

    #footer .nav-supp li + li {
        margin-left: 40px;
    }

    .service .nav-supp .home a {
        margin-top: 14px;
    }

    .nav-supp a,
    .nav-supp .tab a {
        padding: 14px 20px 7px;
    }
}

@media only screen and (max-width: 1023px) {
    .service #header .nav-supp {
        top: -47px;
    }

    .service #footer .nav-supp ul,
    .service #footer .nav-supp li {
        float: none;
    }

    #header .nav-supp ul {
        margin-left: auto;
        position: absolute;
        right: 0;
    }

    #header .nav-supp--startpage .no-absolute {
        margin-left: auto;
        position: initial;
        right: 0;
    }

    body:not(.service) #header .nav-supp ul.your-details__items {
        position: absolute;
    }

    #header .nav-supp .your-details__items,
    #header .nav-supp .tabs,
    #header .nav-supp .m-list-favorites ul {
        position: static;
    }

    .nav-supp ul .icon2-a span {
        position: absolute;
        left: -9999px;
    }

    .service .nav-supp ul span:not(.subject-background) {
        position: static;
        left: auto;
    }

    .menu-open .nav-supp ul,
    .menu-open .nav-supp .login-toggle-button {
        display: none;
    }

    #footer .nav-supp li + li {
        margin-left: 0;
    }

    .service .nav-supp > ul {
        width: 100%;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
        -webkit-box-flex: 0;
        -ms-flex: 0 0 33.3333%;
        flex: 0 0 33.3333%;
        height: 47px;
    }

        .service .nav-supp > ul > li {
            width: 33.3333%;
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-align: center;
            -ms-flex-align: center;
            align-items: center;
            -webkit-box-pack: center;
            -ms-flex-pack: center;
            justify-content: center;
            position: relative;
            padding: 0;
            margin: 0;
            height: 100%;
            border-right: 1px solid rgba(0,0,0, 0.4);
        }

            .service .nav-supp > ul > li:first-child {
                -webkit-box-pack: start;
                -ms-flex-pack: start;
                justify-content: flex-start;
            }

            .service .nav-supp > ul > li:last-child {
                border-right: none;
                -webkit-box-pack: end;
                -ms-flex-pack: end;
                justify-content: flex-end;
            }

            .service .nav-supp > ul > li a.your-services__toggle {
                padding-right: 0;
                margin-right: 0;
            }

            .service .nav-supp > ul > li a {
                margin: 0;
                padding: 0;
                white-space: nowrap;
                font-size: 15px;
            }

            .service .nav-supp > ul > li.your-details:not(.your-functions) > a .c-icon {
                display: none;
            }

    .nav-supp > ul > li.your-details > a {
        padding-left: 26px;
        position: relative;
    }

        .nav-supp > ul > li.your-details > a::before {
            content: "";
            display: inline-block;
            position: absolute;
            left: 0;
            width: 22px;
            height: 22px;
            background-image: url(/static/i/icons-s.svg);
            background-position: -1100px 0;
        }

        .nav-supp > ul > li.your-details > a::after,
        .nav-supp > ul > li.your-functions > a::before {
            content: none;
        }

    .nav-supp > ul > li.your-functions > a .c-icon {
        position: static;
        left: 0;
        margin-right: 0;
    }

    .service .nav-supp > ul > li.your-functions > a .c-icon {
        margin-right: 10px;
    }

    .nav-supp > ul > li.your-functions[class] > a {
        padding-left: 0;
        padding-right: 0;
    }

    .my-favorites > .my-favorites__toggle span {
        padding-left: 48px;
        padding-right: 6px;
    }

    .my-favorites > .my-favorites__toggle .my-favorites-text-service {
        padding-left: 0;
        padding-right: 5px;
    }

    .my-favorites > .my-favorites__toggle[class][class]:after {
        display: none;
    }

    .nav-supp ul li[data-content="services-box"] a::before {
        background-image: url(/static/i/icons-s.svg);
        background-repeat: no-repeat;
        overflow: hidden;
        white-space: nowrap;
        background-position: -1098px -95px;
        content: "";
        display: inline-block;
        height: 34px;
        width: 40px;
    }

    .nav-supp ul li[data-content="services-box"] a::after {
        content: none;
    }

    .nav-supp ul li[data-content="services-box"] a {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        padding-left: 0;
        margin-right: 4px;
    }

    .service .nav-supp > ul > li a.your-services__toggle {
        white-space: normal;
        line-height: 1.2;
        padding: 0;
        padding-right: 3px;
        margin: 0;
        text-indent: 0;
        white-space: normal;
        width: 100%;
        background-image: none;
    }

    #header .nav-supp--mobile > ul {
        width: calc(100% - 130px);
    }

        #header .nav-supp--mobile > ul > li:first-child {
            border-left: 1px solid rgba(0,0,0, 0.4);
            justify-content: center;
        }

    #header .nav-supp--mobile > a {
        position: absolute;
        top: 0;
        left: -30px;
        padding-right: 10px;
    }

    #header .nav-supp--static > ul {
        margin-top: 0;
    }

    #header .your-details {
        margin: 0;
    }

    #header .nav-supp--static .your-details > a {
        min-width: 22px;
        min-height: 22px;
    }

    #header .nav-supp--static .dropdown__content {
        right: 0;
    }
}

@media only screen and (max-width: 1024px) {
    .menu-open #header .nav-supp {
        left: 0;
    }

    #header .nav-supp {
        justify-content: flex-end;
    }

        #header .nav-supp.half-width {
            left: 50%;
        }
}

@media only screen and (max-width: 767px) {
    #header .nav-supp {
        left: 50%; /* Do not cover menu and logo */
        margin: 0 20px;
    }

    body:not(.service) #header .nav-supp ul.your-details__items {
        position: absolute;
        margin-top: -6px;
    }

    .menu-open #header .nav-supp {
        left: 0;
    }

    .service #header .nav-supp {
        top: -42px;
        left: 0;
        margin: 0 10px;
    }

    #header .nav-supp .home {
        position: absolute;
        top: -9999px;
    }

    .service .nav-supp > ul {
        height: 42px;
    }


    .nav-supp > ul li.sign-out a {
        background: url(/static/i/icons-s.png) no-repeat;
        height: 24px;
        margin: 9px 0 0 18px;
        overflow: hidden;
        padding: 0;
        text-indent: 300%;
        white-space: nowrap;
        width: 24px;
    }

    .svg .nav-supp ul li.sign-out a {
        background-image: url(/static/i/icons-s.svg);
    }


    .nav-supp ul li.sign-out a {
        background-position: -1200px -102px;
    }

        .nav-supp ul li.your-details > a:hover,
        .nav-supp ul li.sign-out a:hover {
            opacity: 0.8;
        }

    .nav-supp ul li[data-content="login-box"] a,
    .nav-supp .login-toggle-button button {
        background-image: url("/static/i/key.png");
        background-repeat: no-repeat;
        overflow: hidden;
        white-space: nowrap;
        padding-left: 44px;
    }

    .nav-supp > ul > li.your-functions > a .c-icon {
        margin: 0;
        width: 22px;
        height: 22px;
    }

    .service .nav-supp:not(.nav-supp--mobile) > ul > li.your-details > a .c-icon {
        display: none;
    }

    .service .nav-supp > ul > li.your-functions > a .c-icon {
        margin-right: 5px;
    }

    .icon2-a.icon-down_double:not(#foo):after {
        content: none;
    }

    .service .nav-supp > ul > li a,
    .service .nav-supp > ul > li span {
        font-size: 13px;
    }

    .service .nav-supp ul.your-details__items > li a {
        white-space: normal;
        word-break: break-all;
        -webkit-hyphens: auto;
        -moz-hyphens: auto;
        hyphens: auto;
    }

    .nav-supp a,
    .nav-supp .tab a {
        padding-top: 6px;
    }

    #footer .nav-supp ul {
        text-align: left;
    }

        #footer .nav-supp ul li {
            display: block;
        }

    .my-favorites > .my-favorites__toggle span {
        padding-left: 48px;
        padding-right: 2px;
    }

    #header .nav-supp--mobile li > a > span:last-child {
        position: absolute;
        left: -9999px;
    }

    #header .nav-supp--mobile > a {
        top: 2px;
        left: 0;
    }

    .nav-supp--mobile .your-details .dropdown__content {
        width: max-content;
    }

    .nav-supp--mobile > ul > li.your-details > a {
        padding-left: 0;
    }

        .nav-supp--mobile > ul > li.your-details > a::before {
            position: static;
            margin-top: 5px;
        }

    #header .nav-supp--mobile > ul > li.my-favorites > a::after {
        top: calc(50% - 9px);
        left: -55px;
    }

    #header .nav-supp--static > ul {
        margin-top: 0;
    }
}

@media only screen and (max-width: 479px) {
    #footer .nav-supp ul,
    #footer .nav-supp li,
    #footer #address {
        float: none;
    }

    #address .more {
        margin-bottom: 0;
    }

    .service .nav-supp > ul > li:last-child {
        width: 45%;
    }

    .service .nav-supp--mobile > ul > li:last-child {
        width: 33%;
    }
}

@media only screen and (max-width: 350px) {
    #header .nav-supp {
        margin: 0 10px;
    }
}
/* SUB NAVIGATION
================================================================================ */
.nav-sub.alt {
    margin: 0 auto 12px;
    padding: 0;
    width: 985px;
}

.nav-sub ul {
    border-top: 1px solid #1a1a1a;
    margin: -1px 0 0;
    list-style: none;
}

.nav-sub.alt ul {
    border-bottom: 1px solid #1a1a1a;
    border-top: 1px solid #1a1a1a;
    margin: 0;
    overflow: hidden;
    padding: 11px 0;
}

.nav-sub li {
    border-bottom: 1px solid #1a1a1a;
    padding: 12px 0 11px;
}

.nav-sub.alt li {
    border: none;
    float: left;
    padding: 0;
}

@media (min-width: 1024px) {
    .nav-sub.alt.no-border-top ul {
        border-top: 0;
        padding-top: 0;
    }
}

/* Level one */
.service-background > .nav-sub li a {
    color: white;
}

.nav-sub li a {
    border-radius: 2px;
    color: #1a1a1a;
    display: block;
    font-family: "Myriad W01 Bd";
    padding: 6px 15px;
    text-decoration: none;
    text-transform: uppercase;
}

/* Children */
.nav-sub li > ul {
    margin-top: 11px;
}

/* Level two */
.nav-sub li li:last-child {
    padding-bottom: 0;
    border-bottom: none;
}

.nav-sub li li a {
    padding-left: 30px;
    text-transform: none;
}

/* Level three */
.nav-sub li li li a {
    padding-left: 50px;
    text-transform: none;
}

/* Level four */
.nav-sub li li li li a {
    padding-left: 70px;
    text-transform: none;
}

.nav-sub.collapsed li a[data-selected] {
    padding-left: 15px;
    text-transform: uppercase;
}

.nav-sub li a:hover,
.nav-sub li a:focus,
.nav-sub li a:active,
.nav-sub a[data-selected] {
    background: #004b8d;
    color: #fff;
}

.arbetsmiljonet .nav-sub.alt li a:hover,
.arbetsmiljonet .nav-sub.alt li a:focus,
.arbetsmiljonet .nav-sub.alt li a:active,
.arbetsmiljonet .nav-sub.alt a[data-selected] {
    background: #e5738f;
    color: #1a1a1a;
}

.playarbetsliv .nav-sub.alt li a:hover,
.playarbetsliv .nav-sub.alt li a:focus,
.playarbetsliv .nav-sub.alt li a:active,
.playarbetsliv .nav-sub.alt a[data-selected],
.arbetsrattsnet .nav-sub.alt li a:hover,
.arbetsrattsnet .nav-sub.alt li a:focus,
.arbetsrattsnet .nav-sub.alt li a:active,
.arbetsrattsnet .nav-sub.alt a[data-selected] {
    background: #f26f7a;
    color: #1a1a1a;
}

.straffrattsnet .nav-sub.alt li a:hover,
.straffrattsnet .nav-sub.alt li a:focus,
.straffrattsnet .nav-sub.alt li a:active,
.straffrattsnet .nav-sub.alt a[data-selected] {
    background: #54c4d6;
    color: #1a1a1a;
}

.djurnet .nav-sub.alt li a:hover,
.djurnet .nav-sub.alt li a:focus,
.djurnet .nav-sub.alt li a:active,
.djurnet .nav-sub.alt a[data-selected] {
    background: #d0d92b;
    color: #1a1a1a;
}

.eunet .nav-sub.alt li a:hover,
.eunet .nav-sub.alt li a:focus,
.eunet .nav-sub.alt li a:active,
.eunet .nav-sub.alt a[data-selected] {
    background: #219ed9;
    color: #1a1a1a;
}

.familjenet .nav-sub.alt li a:hover,
.familjenet .nav-sub.alt li a:focus,
.familjenet .nav-sub.alt li a:active,
.familjenet .nav-sub.alt a[data-selected] {
    background: #694cbf;
}

.fastighetsnet .nav-sub.alt li a:hover,
.fastighetsnet .nav-sub.alt li a:focus,
.fastighetsnet .nav-sub.alt li a:active,
.fastighetsnet .nav-sub.alt a[data-selected] {
    background: #9fd92b;
    color: #1a1a1a;
}

.foretagarnet .nav-sub.alt li a:hover,
.foretagarnet .nav-sub.alt li a:focus,
.foretagarnet .nav-sub.alt li a:active,
.foretagarnet .nav-sub.alt a[data-selected] {
    background: #d97c2b;
    color: #1a1a1a;
}

.webbkurs-forvaltning .nav-sub.alt li a:hover,
.webbkurs-forvaltning .nav-sub.alt li a:focus,
.webbkurs-forvaltning .nav-sub.alt li a:active,
.webbkurs-forvaltning .nav-sub.alt a[data-selected],
.forvaltningsnet .nav-sub.alt li a:hover,
.forvaltningsnet .nav-sub.alt li a:focus,
.forvaltningsnet .nav-sub.alt li a:active,
.forvaltningsnet .nav-sub.alt a[data-selected] {
    background: #d9682b;
    color: #1a1a1a;
}

.immaterialnet .nav-sub.alt li a:hover,
.immaterialnet .nav-sub.alt li a:focus,
.immaterialnet .nav-sub.alt li a:active,
.immaterialnet .nav-sub.alt a[data-selected] {
    background: #1d76c4;
}

.insolvensnet .nav-sub.alt li a:hover,
.insolvensnet .nav-sub.alt li a:focus,
.insolvensnet .nav-sub.alt li a:active,
.insolvensnet .nav-sub.alt a[data-selected] {
    background: #38c77f;
    color: #1a1a1a;
}

.playdataskydd .nav-sub.alt li a:hover,
.playdataskydd .nav-sub.alt li a:focus,
.playdataskydd .nav-sub.alt li a:active,
.playdataskydd .nav-sub.alt a[data-selected],
.itnet .nav-sub.alt li a:hover,
.itnet .nav-sub.alt li a:focus,
.itnet .nav-sub.alt li a:active,
.itnet .nav-sub.alt a[data-selected],
.webbkurs-gdpr .nav-sub.alt li a:hover,
.webbkurs-gdpr .nav-sub.alt li a:focus,
.webbkurs-gdpr .nav-sub.alt li a:active,
.webbkurs-gdpr .nav-sub.alt a[data-selected] {
    background: #3288c9;
    color: #1a1a1a;
}

.juridiknet .nav-sub.alt li a:hover,
.juridiknet .nav-sub.alt li a:focus,
.juridiknet .nav-sub.alt li a:active,
.juridiknet .nav-sub.alt a[data-selected] {
    background: #1b6db5;
}

.kommentarer .nav-sub.alt li a:hover,
.kommentarer .nav-sub.alt li a:focus,
.kommentarer .nav-sub.alt li a:active,
.kommentarer .nav-sub.alt a[data-selected] {
    background: #2bb6d9;
    color: #1a1a1a;
}

.livsmedelsnet .nav-sub.alt li a:hover,
.livsmedelsnet .nav-sub.alt li a:focus,
.livsmedelsnet .nav-sub.alt li a:active,
.livsmedelsnet .nav-sub.alt a[data-selected] {
    background: #6bd149;
    color: #1a1a1a;
}

.marknadsnet .nav-sub.alt li a:hover,
.marknadsnet .nav-sub.alt li a:focus,
.marknadsnet .nav-sub.alt li a:active,
.marknadsnet .nav-sub.alt a[data-selected] {
    background: #0965b5;
}

.migrationsnet .nav-sub.alt li a:hover,
.migrationsnet .nav-sub.alt li a:focus,
.migrationsnet .nav-sub.alt li a:active,
.migrationsnet .nav-sub.alt a[data-selected] {
    background: #8360bf;
}

.playmiljo .nav-sub.alt li a:hover,
.playmiljo .nav-sub.alt li a:focus,
.playmiljo .nav-sub.alt li a:active,
.playmiljo .nav-sub.alt a[data-selected],
.miljonet .nav-sub.alt li a:hover,
.miljonet .nav-sub.alt li a:focus,
.miljonet .nav-sub.alt li a:active,
.miljonet .nav-sub.alt a[data-selected],
.climatenet .nav-sub.alt li a:hover,
.climatenet .nav-sub.alt li a:focus,
.climatenet .nav-sub.alt li a:active,
.climatenet .nav-sub.alt a[data-selected] {
    background: #52cc52;
    color: #1a1a1a;
}

.momsnet .nav-sub.alt li a:hover,
.momsnet .nav-sub.alt li a:focus,
.momsnet .nav-sub.alt li a:active,
.momsnet .nav-sub.alt a[data-selected] {
    background: #45c49e;
    color: #1a1a1a;
}

.polisnet .nav-sub.alt li a:hover,
.polisnet .nav-sub.alt li a:focus,
.polisnet .nav-sub.alt li a:active,
.polisnet .nav-sub.alt a[data-selected] {
    background: #2ba8d9;
    color: #1a1a1a;
}

.raddningsnet .nav-sub.alt li a:hover,
.raddningsnet .nav-sub.alt li a:focus,
.raddningsnet .nav-sub.alt li a:active,
.raddningsnet .nav-sub.alt a[data-selected],
.playdronare .nav-sub.alt li a:hover,
.playdronare .nav-sub.alt li a:focus,
.playdronare .nav-sub.alt li a:active,
.playdronare .nav-sub.alt a[data-selected],
.sakerhetsnet .nav-sub.alt li a:hover,
.sakerhetsnet .nav-sub.alt li a:focus,
.sakerhetsnet .nav-sub.alt li a:active,
.sakerhetsnet .nav-sub.alt a[data-selected] {
    background: #44c244;
    color: #1a1a1a;
}

.rattsfallsnet .nav-sub.alt li a:hover,
.rattsfallsnet .nav-sub.alt li a:focus,
.rattsfallsnet .nav-sub.alt li a:active,
.rattsfallsnet .nav-sub.alt a[data-selected] {
    background: #005cad;
}

.webbkurs-samhallsbyggnad .nav-sub.alt li a:hover,
.webbkurs-samhallsbyggnad .nav-sub.alt li a:focus,
.webbkurs-samhallsbyggnad .nav-sub.alt li a:active,
.webbkurs-samhallsbyggnad .nav-sub.alt a[data-selected],
.playsamhallsbyggnad .nav-sub.alt li a:hover,
.playsamhallsbyggnad .nav-sub.alt li a:focus,
.playsamhallsbyggnad .nav-sub.alt li a:active,
.playsamhallsbyggnad .nav-sub.alt a[data-selected],
.samhallsbyggnadsnet .nav-sub.alt li a:hover,
.samhallsbyggnadsnet .nav-sub.alt li a:focus,
.samhallsbyggnadsnet .nav-sub.alt li a:active,
.samhallsbyggnadsnet .nav-sub.alt a[data-selected] {
    background: #39bd39;
    color: #1a1a1a;
}

.serveringstillstandsnet .nav-sub.alt li a:hover,
.serveringstillstandsnet .nav-sub.alt li a:focus,
.serveringstillstandsnet .nav-sub.alt li a:active,
.serveringstillstandsnet .nav-sub.alt a[data-selected] {
    background: #9369bf;
}

.sjukvardsnet .nav-sub.alt li a:hover,
.sjukvardsnet .nav-sub.alt li a:focus,
.sjukvardsnet .nav-sub.alt li a:active,
.sjukvardsnet .nav-sub.alt a[data-selected] {
    background: #e58ade;
    color: #1a1a1a;
}

.skattenet .nav-sub.alt li a:hover,
.skattenet .nav-sub.alt li a:focus,
.skattenet .nav-sub.alt li a:active,
.skattenet .nav-sub.alt a[data-selected] {
    background: #44bec2;
    color: #1a1a1a;
}

.playskola .nav-sub.alt li a:hover,
.playskola .nav-sub.alt li a:focus,
.playskola .nav-sub.alt li a:active,
.playskola .nav-sub.alt a[data-selected],
.skolnet .nav-sub.alt li a:hover,
.skolnet .nav-sub.alt li a:focus,
.skolnet .nav-sub.alt li a:active,
.skolnet .nav-sub.alt a[data-selected] {
    background: #d92b2b;
}

.playsocial .nav-sub.alt li a:hover,
.playsocial .nav-sub.alt li a:focus,
.playsocial .nav-sub.alt li a:active,
.playsocial .nav-sub.alt a[data-selected],
.socialnet .nav-sub.alt li a:hover,
.socialnet .nav-sub.alt li a:focus,
.socialnet .nav-sub.alt li a:active,
.socialnet .nav-sub.alt a[data-selected] {
    background: #b07dd1;
    color: #1a1a1a;
}

.socialforsakringsnet .nav-sub.alt li a:hover,
.socialforsakringsnet .nav-sub.alt li a:focus,
.socialforsakringsnet .nav-sub.alt li a:active,
.socialforsakringsnet .nav-sub.alt a[data-selected] {
    background: #c57bd4;
    color: #1a1a1a;
}

.trafiknet .nav-sub.alt li a:hover,
.trafiknet .nav-sub.alt li a:focus,
.trafiknet .nav-sub.alt li a:active,
.trafiknet .nav-sub.alt a[data-selected] {
    background: #32c262;
    color: #1a1a1a;
}

.playupphandling .nav-sub.alt li a:hover,
.playupphandling .nav-sub.alt li a:focus,
.playupphandling .nav-sub.alt li a:active,
.playupphandling .nav-sub.alt a[data-selected],
.upphandlingsnet .nav-sub.alt li a:hover,
.upphandlingsnet .nav-sub.alt li a:focus,
.upphandlingsnet .nav-sub.alt li a:active,
.upphandlingsnet .nav-sub.alt a[data-selected] {
    background: #4246a6;
}

.myndighetsbeslut .nav-sub.alt li a:hover,
.myndighetsbeslut .nav-sub.alt li a:focus,
.myndighetsbeslut .nav-sub.alt li a:active,
.myndighetsbeslut .nav-sub.alt a[data-selected] {
    background: #d9a52b;
}

.lagboken .nav-sub.alt li a:hover,
.lagboken .nav-sub.alt li a:focus,
.lagboken .nav-sub.alt li a:active,
.lagboken .nav-sub.alt a[data-selected] {
    background: #005cad;
}

.hrnet .nav-sub.alt li a:hover,
.hrnet .nav-sub.alt li a:focus,
.hrnet .nav-sub.alt li a:active,
.hrnet .nav-sub.alt a[data-selected] {
    background: #f26fa6;
}

.webbkurs-mark-och-miljo .nav-sub.alt li a:hover,
.webbkurs-mark-och-miljo .nav-sub.alt li a:focus,
.webbkurs-mark-och-miljo .nav-sub.alt li a:active,
.webbkurs-mark-och-miljo .nav-sub.alt a[data-selected] {
    background: #52cc52;
}

.webbkurs-skola .nav-sub.alt li a:hover,
.webbkurs-skola .nav-sub.alt li a:focus,
.webbkurs-skola .nav-sub.alt li a:active,
.webbkurs-skola .nav-sub.alt a[data-selected] {
    background: #d92b2b;
}

.webbkurs-social .nav-sub.alt li a:hover,
.webbkurs-social .nav-sub.alt li a:focus,
.webbkurs-social .nav-sub.alt li a:active,
.webbkurs-social .nav-sub.alt a[data-selected] {
    background: #b07dd1;
}

.webbkurs-upphandling .nav-sub.alt li a:hover,
.webbkurs-upphandling .nav-sub.alt li a:focus,
.webbkurs-upphandling .nav-sub.alt li a:active,
.webbkurs-upphandling .nav-sub.alt a[data-selected] {
    background: #4246a6;
}

.studentnet-skola .nav-sub.alt li a:hover,
.studentnet-skola .nav-sub.alt li a:focus,
.studentnet-skola .nav-sub.alt li a:active,
.studentnet-skola .nav-sub.alt a[data-selected] {
    background: #d92b2b;
}

.studentnet-sjukvard .nav-sub.alt li a:hover,
.studentnet-sjukvard .nav-sub.alt li a:focus,
.studentnet-sjukvard .nav-sub.alt li a:active,
.studentnet-sjukvard .nav-sub.alt a[data-selected] {
    background: #e58ade;
}

.studentnet-social .nav-sub.alt li a:hover,
.studentnet-social .nav-sub.alt li a:focus,
.studentnet-social .nav-sub.alt li a:active,
.studentnet-social .nav-sub.alt a[data-selected] {
    background: #b07dd1;
}

.studentnet-arbetsratt .nav-sub.alt li a:hover,
.studentnet-arbetsratt .nav-sub.alt li a:focus,
.studentnet-arbetsratt .nav-sub.alt li a:active,
.studentnet-arbetsratt .nav-sub.alt a[data-selected] {
    background: #f26f7a;
}

.studentnet-migration .nav-sub.alt li a:hover,
.studentnet-migration .nav-sub.alt li a:focus,
.studentnet-migration .nav-sub.alt li a:active,
.studentnet-migration .nav-sub.alt a[data-selected] {
    background: #8360bf;
}

.studentnet-samhallsbyggnad .nav-sub.alt li a:hover,
.studentnet-samhallsbyggnad .nav-sub.alt li a:focus,
.studentnet-samhallsbyggnad .nav-sub.alt li a:active,
.studentnet-samhallsbyggnad .nav-sub.alt a[data-selected] {
    background: #39bd39;
}

.studentnet-forvaltning .nav-sub.alt li a:hover,
.studentnet-forvaltning .nav-sub.alt li a:focus,
.studentnet-forvaltning .nav-sub.alt li a:active,
.studentnet-forvaltning .nav-sub.alt a[data-selected] {
    background: #d9682b;
}

.hyresnet .nav-sub.alt li a:hover,
.hyresnet .nav-sub.alt li a:focus,
.hyresnet .nav-sub.alt li a:active,
.hyresnet .nav-sub.alt a[data-selected] {
    background: #9fd92b;
}

.kemikalienet .nav-sub.alt li a:hover,
.kemikalienet .nav-sub.alt li a:focus,
.kemikalienet .nav-sub.alt li a:active,
.kemikalienet .nav-sub.alt a[data-selected] {
    background: #6bd149;
}

.skadestandsnet .nav-sub.alt li a:hover,
.skadestandsnet .nav-sub.alt li a:focus,
.skadestandsnet .nav-sub.alt li a:active,
.skadestandsnet .nav-sub.alt a[data-selected] {
    background: #4ec3e0;
    color: #1a1a1a;
}

@media only screen and (min-width: 1280px) {
    .nav-sub.alt {
        margin-bottom: 14px;
        padding: 0;
        width: 1215px;
    }

        .nav-sub.alt ul {
            padding: 13px 0;
        }

    .nav-sub li {
        padding: 14px 0 13px;
    }

        .nav-sub li a {
            padding: 7px 20px;
        }
}

@media only screen and (max-width: 1023px) {
    .nav-sub {
        margin-bottom: 42px;
    }

        .nav-sub.alt {
            padding: 0 20px;
            width: auto;
        }

            .nav-sub.alt:not(.t-inner-space-none) {
                max-width: 420px;
            }

        .nav-sub ul ul {
            border: none;
            margin-top: 0;
        }

        .nav-sub li li a {
            padding-left: 35px;
        }

        .nav-sub li li ul {
            display: block;
        }

        .nav-sub ul {
            overflow: hidden;
            padding: 12px 0 11px;
            border-color: #004b8d;
            -webkit-transition: padding 0.1s ease-in-out;
            -moz-transition: padding 0.1s ease-in-out;
            transition: padding 0.1s ease-in-out;
        }

    .arbetsmiljonet .nav-sub ul {
        border-color: #e5738f;
    }

    .playarbetsliv .nav-sub ul,
    .arbetsrattsnet .nav-sub ul {
        border-color: #f26f7a;
    }

    .straffrattsnet .nav-sub ul {
        border-color: #54c4d6;
    }

    .djurnet .nav-sub ul {
        border-color: #d0d92b;
    }

    .eunet .nav-sub ul {
        border-color: #219ed9;
    }

    .familjenet .nav-sub ul {
        border-color: #694cbf;
    }

    .fastighetsnet .nav-sub ul {
        border-color: #9fd92b;
    }

    .foretagarnet .nav-sub ul {
        border-color: #d97c2b;
    }

    .webbkurs-forvaltning .nav-sub ul,
    .forvaltningsnet .nav-sub ul {
        border-color: #d9682b;
    }

    .immaterialnet .nav-sub ul {
        border-color: #1d76c4;
    }

    .insolvensnet .nav-sub ul {
        border-color: #38c77f;
    }

    .playdataskydd .nav-sub ul,
    .itnet .nav-sub ul,
    .webbkurs-gdpr .nav-sub ul {
        border-color: #3288c9;
    }

    .juridiknet .nav-sub ul {
        border-color: #1b6db5;
    }

    .kommentarer .nav-sub ul {
        border-color: #2bb6d9;
    }

    .livsmedelsnet .nav-sub ul {
        border-color: #6bd149;
    }

    .marknadsnet .nav-sub ul {
        border-color: #0965b5;
    }

    .migrationsnet .nav-sub ul {
        border-color: #8360bf;
    }

    .playmiljo .nav-sub ul,
    .miljonet .nav-sub ul,
    .climatenet .nav-sub ul {
        border-color: #52cc52;
    }

    .momsnet .nav-sub ul {
        border-color: #45c49e;
    }

    .polisnet .nav-sub ul {
        border-color: #2ba8d9;
    }

    .raddningsnet .nav-sub ul,
    .playdronare .nav-sub ul,
    .sakerhetsnet .nav-sub ul {
        border-color: #44c244;
    }

    .rattsfallsnet .nav-sub ul {
        border-color: #005cad;
    }

    .playsamhallsbyggnad .nav-sub ul,
    .samhallsbyggnadsnet .nav-sub ul {
        border-color: #39bd39;
    }

    .serveringstillstandsnet .nav-sub ul {
        border-color: #9369bf;
    }

    .sjukvardsnet .nav-sub ul {
        border-color: #e58ade;
    }

    .skattenet .nav-sub ul {
        border-color: #44bec2;
    }

    .playskola .nav-sub ul,
    .skolnet .nav-sub ul {
        border-color: #d92b2b;
    }

    .playsocial .nav-sub ul,
    .socialnet .nav-sub ul {
        border-color: #b07dd1;
    }

    .socialforsakringsnet .nav-sub ul {
        border-color: #c57bd4;
    }

    .trafiknet .nav-sub ul {
        border-color: #32c262;
    }

    .playupphandling .nav-sub ul,
    .upphandlingsnet .nav-sub ul {
        border-color: #4246a6;
    }

    .myndighetsbeslut .nav-sub ul {
        border-color: #d9a52b;
    }

    .lagboken .nav-sub ul {
        border-color: #005cad;
    }

    .hrnet .nav-sub ul {
        border-color: #f26fa6;
    }

    .webbkurs-mark-och-miljo .nav-sub ul {
        border-color: #52cc52;
    }

    .webbkurs-skola .nav-sub ul {
        border-color: #d92b2b;
    }

    .webbkurs-social .nav-sub ul {
        border-color: #b07dd1;
    }

    .webbkurs-upphandling .nav-sub ul {
        border-color: #4246a6;
    }

    .studentnet-skola .nav-sub ul {
        border-color: #d92b2b;
    }

    .studentnet-sjukvard .nav-sub ul {
        border-color: #e58ade;
    }

    .studentnet-social .nav-sub ul {
        border-color: #b07dd1;
    }

    .studentnet-arbetsratt .nav-sub ul {
        border-color: #f26f7a;
    }

    .studentnet-migration .nav-sub ul {
        border-color: #8360bf;
    }

    .studentnet-samhallsbyggnad .nav-sub ul {
        border-color: #39bd39;
    }

    .studentnet-forvaltning .nav-sub ul {
        border-color: #d9682b;
    }

    .hyresnet .nav-sub ul {
        border-color: #9fd92b;
    }

    .kemikalienet .nav-sub ul {
        border-color: #6bd149;
    }

    .skadestandsnet .nav-sub ul {
        border-color: #4ec3e0;
    }

    .nav-sub ul,
    .nav-sub.alt ul {
        border-style: solid;
        border-width: 1px;
        border-radius: 2px;
        padding: 11px 0;
    }

    .nav-sub.collapsed ul {
        border-top-width: 1px;
        margin-top: -1px;
        padding: 0;
    }

    .nav-sub li,
    .nav-sub.alt li {
        border: none;
        padding: 0;
        float: none;
        position: relative;
    }

        .nav-sub li a {
            border-radius: 0;
        }

    .nav-sub.collapsed li a {
        padding-bottom: 5px;
    }

    .nav-sub .toggler {
        background: url(/static/i/icons-s.png) 0 -100px no-repeat;
        display: block;
        height: 24px;
        right: 0;
        margin: 6px 10px 6px 0;
        opacity: 1;
        overflow: hidden;
        padding: 0;
        position: absolute;
        text-indent: 120%;
        top: 0;
        width: 24px;
    }

    .svg .nav-sub .toggler {
        background-image: url(/static/i/icons-s.svg);
    }

    .nav-sub .toggler:hover,
    .nav-sub .toggler:active,
    .nav-sub .toggler:focus {
        opacity: 0.8;
    }

    .service.arbetsmiljonet .nav-sub .toggler,
    .service.playarbetsliv .nav-sub .toggler,
    .service.arbetsrattsnet .nav-sub .toggler,
    .service.straffrattsnet .nav-sub .toggler,
    .service.djurnet .nav-sub .toggler,
    .service.eunet .nav-sub .toggler,
    .service.fastighetsnet .nav-sub .toggler,
    .service.foretagarnet .nav-sub .toggler,
    .service.forvaltningsnet .nav-sub .toggler,
    .service.webbkurs-forvaltning .nav-sub .toggler,
    .service.insolvensnet .nav-sub .toggler,
    .service.playdataskydd .nav-sub .toggler,
    .service.itnet .nav-sub .toggler,
    .service.kommentarer .nav-sub .toggler,
    .service.livsmedelsnet .nav-sub .toggler,
    .service.playmiljo .nav-sub .toggler,
    .service.miljonet .nav-sub .toggler,
    .service.climatenet .nav-sub .toggler,
    .service.momsnet .nav-sub .toggler,
    .service.polisnet .nav-sub .toggler,
    .service.raddningsnet .nav-sub .toggler,
    .service.sakerhetsnet .nav-sub .toggler,
    .service.playdronare .nav-sub .toggler,
    .service.playsamhallsbyggnad .nav-sub .toggler,
    .service.samhallsbyggnadsnet .nav-sub .toggler,
    .service.sjukvardsnet .nav-sub .toggler,
    .service.skattenet .nav-sub .toggler,
    .service.playsocial .nav-sub .toggler,
    .service.socialnet .nav-sub .toggler,
    .service.socialforsakringsnet .nav-sub .toggler,
    .service.trafiknet .nav-sub .toggler {
        /* Black */
        background-position: 0 -200px;
    }

    .nav-sub.collapsed .toggler {
        /* White */
        background-position: -100px -100px;
    }

    .service.arbetsmiljonet .nav-sub.collapsed .toggler,
    .service.playarbetsliv .nav-sub.collapsed .toggler,
    .service.arbetsrattsnet .nav-sub.collapsed .toggler,
    .service.straffrattsnet .nav-sub.collapsed .toggler,
    .service.djurnet .nav-sub.collapsed .toggler,
    .service.eunet .nav-sub.collapsed .toggler,
    .service.fastighetsnet .nav-sub.collapsed .toggler,
    .service.foretagarnet .nav-sub.collapsed .toggler,
    .service.forvaltningsnet .nav-sub.collapsed .toggler,
    .service.webbkurs-forvaltning .nav-sub.collapsed .toggler,
    .service.insolvensnet .nav-sub.collapsed .toggler,
    .service.playdataskydd .nav-sub.collapsed .toggler,
    .service.itnet .nav-sub.collapsed .toggler,
    .service.kommentarer .nav-sub.collapsed .toggler,
    .service.livsmedelsnet .nav-sub.collapsed .toggler,
    .service.playmiljo .nav-sub.collapsed .toggler,
    .service.miljonet .nav-sub.collapsed .toggler,
    .service.climatenet .nav-sub.collapsed .toggler,
    .service.momsnet .nav-sub.collapsed .toggler,
    .service.polisnet .nav-sub.collapsed .toggler,
    .service.raddningsnet .nav-sub.collapsed .toggler,
    .service.sakerhetsnet .nav-sub.collapsed .toggler,
    .service.playdronare .nav-sub.collapsed .toggler,
    .service.playsamhallsbyggnad .nav-sub.collapsed .toggler,
    .service.samhallsbyggnadsnet .nav-sub.collapsed .toggler,
    .service.sjukvardsnet .nav-sub.collapsed .toggler,
    .service.skattenet .nav-sub.collapsed .toggler,
    .service.playsocial .nav-sub.collapsed .toggler,
    .service.socialnet .nav-sub.collapsed .toggler,
    .service.socialforsakringsnet .nav-sub .toggler,
    .service.trafiknet .nav-sub .toggler {
        /* Black */
        background-position: -100px -200px;
    }
}

/* DYNAMIC SUB NAVIGATION
================================================================================ */
.nav-dyn ul {
    border: 1px solid #004b8d;
    border-radius: 2px;
    list-style: none;
    margin: -1px 0 12px;
    padding: 12px 0 11px;
    -webkit-transition: padding 0.1s ease-in-out;
    -moz-transition: padding 0.1s ease-in-out;
    transition: padding 0.1s ease-in-out;
}

.arbetsmiljonet .nav-dyn ul {
    border-color: #e5738f;
}

.playarbetsliv .nav-dyn ul,
.arbetsrattsnet .nav-dyn ul {
    border-color: #f26f7a;
}

.straffrattsnet .nav-dyn ul {
    border-color: #54c4d6;
}

.djurnet .nav-dyn ul {
    border-color: #d0d92b;
}

.eunet .nav-dyn ul {
    border-color: #219ed9;
}

.familjenet .nav-dyn ul {
    border-color: #694cbf;
}

.fastighetsnet .nav-dyn ul {
    border-color: #9fd92b;
}

.foretagarnet .nav-dyn ul {
    border-color: #d97c2b;
}

.webbkurs-forvaltning .nav-dyn ul,
.forvaltningsnet .nav-dyn ul {
    border-color: #d9682b;
}

.immaterialnet .nav-dyn ul {
    border-color: #1d76c4;
}

.insolvensnet .nav-dyn ul {
    border-color: #38c77f;
}

.playdataskydd .nav-dyn ul,
.itnet .nav-dyn ul,
.webbkurs-gdpr .nav-dyn ul {
    border-color: #3288c9;
}

.juridiknet .nav-dyn ul {
    border-color: #1b6db5;
}

.kommentarer .nav-dyn ul {
    border-color: #2bb6d9;
}

.livsmedelsnet .nav-dyn ul {
    border-color: #6bd149;
}

.marknadsnet .nav-dyn ul {
    border-color: #0965b5;
}

.migrationsnet .nav-dyn ul {
    border-color: #8360bf;
}

.playmiljo .nav-dyn ul,
.miljonet .nav-dyn ul,
.climatenet .nav-dyn ul {
    border-color: #52cc52;
}

.momsnet .nav-dyn ul {
    border-color: #45c49e;
}

.polisnet .nav-dyn ul {
    border-color: #2ba8d9;
}

.raddningsnet .nav-dyn ul,
.playdronare .nav-dyn ul,
.sakerhetsnet .nav-dyn ul {
    border-color: #44c244;
}

.rattsfallsnet .nav-dyn ul {
    border-color: #005cad;
}

.playsamhallsbyggnad .nav-dyn ul,
.samhallsbyggnadsnet .nav-dyn ul {
    border-color: #39bd39;
}

.serveringstillstandsnet .nav-dyn ul {
    border-color: #9369bf;
}

.sjukvardsnet .nav-dyn ul {
    border-color: #e58ade;
}

.skattenet .nav-dyn ul {
    border-color: #44bec2;
}

.playskola .nav-dyn ul,
.skolnet .nav-dyn ul {
    border-color: #d92b2b;
}

.playsocial .nav-dyn ul,
.socialnet .nav-dyn ul {
    border-color: #b07dd1;
}

.socialforsakringsnet .nav-dyn ul {
    border-color: #c57bd4;
}

.trafiknet .nav-dyn ul {
    border-color: #32c262;
}

.playupphandling .nav-dyn ul,
.upphandlingsnet .nav-dyn ul {
    border-color: #4246a6;
}

.myndighetsbeslut .nav-dyn ul {
    border-color: #d9a52b;
}

.lagboken .nav-dyn ul {
    border-color: #005cad;
}

.hrnet .nav-dyn ul {
    border-color: #f26fa6;
}

.webbkurs-mark-och-miljo .nav-dyn ul {
    border-color: #52cc52;
}

.webbkurs-skola .nav-dyn ul {
    border-color: #d92b2b;
}

.webbkurs-social .nav-dyn ul {
    border-color: #b07dd1;
}

.webbkurs-upphandling .nav-dyn ul {
    border-color: #4246a6;
}

.studentnet-skola .nav-dyn ul {
    border-color: #d92b2b;
}

.studentnet-sjukvard .nav-dyn ul {
    border-color: #e58ade;
}

.studentnet-social .nav-dyn ul {
    border-color: #b07dd1;
}

.studentnet-arbetsratt .nav-dyn ul {
    border-color: #f26f7a;
}

.studentnet-migration .nav-dyn ul {
    border-color: #8360bf;
}

.studentnet-samhallsbyggnad .nav-dyn ul {
    border-color: #39bd39;
}

.studentnet-forvaltning .nav-dyn ul {
    border-color: #d9682b;
}

.hyresnet .nav-dyn ul {
    border-color: #9fd92b;
}

.kemikalienet .nav-dyn ul {
    border-color: #6bd149;
}

.skadestandsnet .nav-dyn ul {
    border-color: #4ec3e0;
}

.nav-dyn li {
    position: relative;
}

.nav-dyn a {
    color: #1a1a1a;
    display: block;
    padding: 6px 49px 6px 15px;
    text-decoration: none;
}

    .nav-dyn a:hover,
    .nav-dyn a:active,
    .nav-dyn a:focus,
    .nav-dyn a[data-selected] {
        background-color: #004b8d;
        color: #fff;
    }

.arbetsmiljonet .nav-dyn a:hover,
.arbetsmiljonet .nav-dyn a:active,
.arbetsmiljonet .nav-dyn a:focus,
.arbetsmiljonet .nav-dyn a[data-selected] {
    background-color: #e5738f;
    color: #1a1a1a;
}

.playarbetsliv .nav-dyn a:hover,
.playarbetsliv .nav-dyn a:active,
.playarbetsliv .nav-dyn a:focus,
.playarbetsliv .nav-dyn a[data-selected],
.arbetsrattsnet .nav-dyn a:hover,
.arbetsrattsnet .nav-dyn a:active,
.arbetsrattsnet .nav-dyn a:focus,
.arbetsrattsnet .nav-dyn a[data-selected] {
    background-color: #f26f7a;
    color: #1a1a1a;
}

.straffrattsnet .nav-dyn a:hover,
.straffrattsnet .nav-dyn a:active,
.straffrattsnet .nav-dyn a:focus,
.straffrattsnet .nav-dyn a[data-selected] {
    background-color: #54c4d6;
    color: #1a1a1a;
}

.djurnet .nav-dyn a:hover,
.djurnet .nav-dyn a:active,
.djurnet .nav-dyn a:focus,
.djurnet .nav-dyn a[data-selected] {
    background-color: #d0d92b;
    color: #1a1a1a;
}

.eunet .nav-dyn a:hover,
.eunet .nav-dyn a:active,
.eunet .nav-dyn a:focus,
.eunet .nav-dyn a[data-selected] {
    background-color: #219ed9;
    color: #1a1a1a;
}

.familjenet .nav-dyn a:hover,
.familjenet .nav-dyn a:active,
.familjenet .nav-dyn a:focus,
.familjenet .nav-dyn a[data-selected] {
    background-color: #694cbf;
}

.fastighetsnet .nav-dyn a:hover,
.fastighetsnet .nav-dyn a:active,
.fastighetsnet .nav-dyn a:focus,
.fastighetsnet .nav-dyn a[data-selected] {
    background-color: #9fd92b;
    color: #1a1a1a;
}

.foretagarnet .nav-dyn a:hover,
.foretagarnet .nav-dyn a:active,
.foretagarnet .nav-dyn a:focus,
.foretagarnet .nav-dyn a[data-selected] {
    background-color: #d97c2b;
    color: #1a1a1a;
}

.forvaltningsnet .nav-dyn a:hover,
.forvaltningsnet .nav-dyn a:active,
.forvaltningsnet .nav-dyn a:focus,
.forvaltningsnet .nav-dyn a[data-selected] {
    background-color: #d9682b;
    color: #1a1a1a;
}

.immaterialnet .nav-dyn a:hover,
.immaterialnet .nav-dyn a:active,
.immaterialnet .nav-dyn a:focus,
.immaterialnet .nav-dyn a[data-selected] {
    background-color: #1d76c4;
}

.insolvensnet .nav-dyn a:hover,
.insolvensnet .nav-dyn a:active,
.insolvensnet .nav-dyn a:focus,
.insolvensnet .nav-dyn a[data-selected] {
    background-color: #38c77f;
    color: #1a1a1a;
}

.playdataskydd .nav-dyn a:hover,
.playdataskydd .nav-dyn a:active,
.playdataskydd .nav-dyn a:focus,
.playdataskydd .nav-dyn a[data-selected],
.itnet .nav-dyn a:hover,
.itnet .nav-dyn a:active,
.itnet .nav-dyn a:focus,
.itnet .nav-dyn a[data-selected],
.webbkurs-gdpr .nav-dyn a:hover,
.webbkurs-gdpr .nav-dyn a:active,
.webbkurs-gdpr .nav-dyn a:focus,
.webbkurs-gdpr .nav-dyn a[data-selected] {
    background-color: #3288c9;
    color: #1a1a1a;
}

.juridiknet .nav-dyn a:hover,
.juridiknet .nav-dyn a:active,
.juridiknet .nav-dyn a:focus,
.juridiknet .nav-dyn a[data-selected] {
    background-color: #1b6db5;
}

.kommentarer .nav-dyn a:hover,
.kommentarer .nav-dyn a:active,
.kommentarer .nav-dyn a:focus,
.kommentarer .nav-dyn a[data-selected] {
    background-color: #2bb6d9;
    color: #1a1a1a;
}

.livsmedelsnet .nav-dyn a:hover,
.livsmedelsnet .nav-dyn a:active,
.livsmedelsnet .nav-dyn a:focus,
.livsmedelsnet .nav-dyn a[data-selected] {
    background-color: #6bd149;
    color: #1a1a1a;
}

.marknadsnet .nav-dyn a:hover,
.marknadsnet .nav-dyn a:active,
.marknadsnet .nav-dyn a:focus,
.marknadsnet .nav-dyn a[data-selected] {
    background-color: #0965b5;
}

.migrationsnet .nav-dyn a:hover,
.migrationsnet .nav-dyn a:active,
.migrationsnet .nav-dyn a:focus,
.migrationsnet .nav-dyn a[data-selected] {
    background-color: #8360bf;
}

.playmiljo .nav-dyn a:hover,
.playmiljo .nav-dyn a:active,
.playmiljo .nav-dyn a:focus,
.playmiljo .nav-dyn a[data-selected],
.miljonet .nav-dyn a:hover,
.miljonet .nav-dyn a:active,
.miljonet .nav-dyn a:focus,
.miljonet .nav-dyn a[data-selected],
.climatenet .nav-dyn a:hover,
.climatenet .nav-dyn a:active,
.climatenet .nav-dyn a:focus,
.climatenet .nav-dyn a[data-selected] {
    background-color: #52cc52;
    color: #1a1a1a;
}

.momsnet .nav-dyn a:hover,
.momsnet .nav-dyn a:active,
.momsnet .nav-dyn a:focus,
.momsnet .nav-dyn a[data-selected] {
    background-color: #45c49e;
    color: #1a1a1a;
}

.polisnet .nav-dyn a:hover,
.polisnet .nav-dyn a:active,
.polisnet .nav-dyn a:focus,
.polisnet .nav-dyn a[data-selected] {
    background-color: #2ba8d9;
    color: #1a1a1a;
}

.raddningsnet .nav-dyn a:hover,
.raddningsnet .nav-dyn a:active,
.raddningsnet .nav-dyn a:focus,
.raddningsnet .nav-dyn a[data-selected],
.playdronare .nav-dyn a:hover,
.playdronare .nav-dyn a:active,
.playdronare .nav-dyn a:focus,
.playdronare .nav-dyn a[data-selected],
.sakerhetsnet .nav-dyn a:hover,
.sakerhetsnet .nav-dyn a:active,
.sakerhetsnet .nav-dyn a:focus,
.sakerhetsnet .nav-dyn a[data-selected] {
    background-color: #44c244;
    color: #1a1a1a;
}

.rattsfallsnet .nav-dyn a:hover,
.rattsfallsnet .nav-dyn a:active,
.rattsfallsnet .nav-dyn a:focus,
.rattsfallsnet .nav-dyn a[data-selected] {
    background-color: #005cad;
}

.playsamhallsbyggnad .nav-dyn a:hover,
.playsamhallsbyggnad .nav-dyn a:active,
.playsamhallsbyggnad .nav-dyn a:focus,
.playsamhallsbyggnad .nav-dyn a[data-selected],
.samhallsbyggnadsnet .nav-dyn a:hover,
.samhallsbyggnadsnet .nav-dyn a:active,
.samhallsbyggnadsnet .nav-dyn a:focus,
.samhallsbyggnadsnet .nav-dyn a[data-selected] {
    background-color: #39bd39;
    color: #1a1a1a;
}

.serveringstillstandsnet .nav-dyn a:hover,
.serveringstillstandsnet .nav-dyn a:active,
.serveringstillstandsnet .nav-dyn a:focus,
.serveringstillstandsnet .nav-dyn a[data-selected] {
    background-color: #9369bf;
}

.sjukvardsnet .nav-dyn a:hover,
.sjukvardsnet .nav-dyn a:active,
.sjukvardsnet .nav-dyn a:focus,
.sjukvardsnet .nav-dyn a[data-selected] {
    background-color: #e58ade;
    color: #1a1a1a;
}

.skattenet .nav-dyn a:hover,
.skattenet .nav-dyn a:active,
.skattenet .nav-dyn a:focus,
.skattenet .nav-dyn a[data-selected] {
    background-color: #44bec2;
    color: #1a1a1a;
}

.playskola .nav-dyn a:hover,
.playskola .nav-dyn a:active,
.playskola .nav-dyn a:focus,
.playskola .nav-dyn a[data-selected],
.skolnet .nav-dyn a:hover,
.skolnet .nav-dyn a:active,
.skolnet .nav-dyn a:focus,
.skolnet .nav-dyn a[data-selected] {
    background-color: #d92b2b;
}

.playsocial .nav-dyn a:hover,
.playsocial .nav-dyn a:active,
.playsocial .nav-dyn a:focus,
.playsocial .nav-dyn a[data-selected],
.socialnet .nav-dyn a:hover,
.socialnet .nav-dyn a:active,
.socialnet .nav-dyn a:focus,
.socialnet .nav-dyn a[data-selected] {
    background-color: #b07dd1;
    color: #1a1a1a;
}

.socialforsakringsnet .nav-dyn a:hover,
.socialforsakringsnet .nav-dyn a:active,
.socialforsakringsnet .nav-dyn a:focus,
.socialforsakringsnet .nav-dyn a[data-selected] {
    background-color: #c57bd4;
    color: #1a1a1a;
}

.trafiknet .nav-dyn a:hover,
.trafiknet .nav-dyn a:active,
.trafiknet .nav-dyn a:focus,
.trafiknet .nav-dyn a[data-selected] {
    background-color: #32c262;
    color: #1a1a1a;
}

.playupphandling .nav-dyn a:hover,
.playupphandling .nav-dyn a:active,
.playupphandling .nav-dyn a:focus,
.playupphandling .nav-dyn a[data-selected],
.upphandlingsnet .nav-dyn a:hover,
.upphandlingsnet .nav-dyn a:active,
.upphandlingsnet .nav-dyn a:focus,
.upphandlingsnet .nav-dyn a[data-selected] {
    background-color: #4246a6;
}

.myndighetsbeslut .nav-dyn a:hover,
.myndighetsbeslut .nav-dyn a:active,
.myndighetsbeslut .nav-dyn a:focus,
.myndighetsbeslut .nav-dyn a[data-selected] {
    background-color: #d9a52b;
}

.lagboken .nav-dyn a:hover,
.lagboken .nav-dyn a:active,
.lagboken .nav-dyn a:focus,
.lagboken .nav-dyn a[data-selected] {
    background-color: #005cad;
}

.hrnet .nav-dyn a:hover,
.hrnet .nav-dyn a:active,
.hrnet .nav-dyn a:focus,
.hrnet .nav-dyn a[data-selected] {
    background-color: #f26fa6;
}

.webbkurs-mark-och-miljo .nav-dyn a:hover,
.webbkurs-mark-och-miljo .nav-dyn a:active,
.webbkurs-mark-och-miljo .nav-dyn a:focus,
.webbkurs-mark-och-miljo .nav-dyn a[data-selected] {
    background-color: #52cc52;
}

.webbkurs-skola .nav-dyn a:hover,
.webbkurs-skola .nav-dyn a:active,
.webbkurs-skola .nav-dyn a:focus,
.webbkurs-skola .nav-dyn a[data-selected] {
    background-color: #d92b2b;
}

.webbkurs-social .nav-dyn a:hover,
.webbkurs-social .nav-dyn a:active,
.webbkurs-social .nav-dyn a:focus,
.webbkurs-social .nav-dyn a[data-selected] {
    background-color: #b07dd1;
}

.webbkurs-upphandling .nav-dyn a:hover,
.webbkurs-upphandling .nav-dyn a:active,
.webbkurs-upphandling .nav-dyn a:focus,
.webbkurs-upphandling .nav-dyn a[data-selected] {
    background-color: #4246a6;
}

.studentnet-skola .nav-dyn a:hover,
.studentnet-skola .nav-dyn a:active,
.studentnet-skola .nav-dyn a:focus,
.studentnet-skola .nav-dyn a[data-selected] {
    background-color: #d92b2b;
}

.studentnet-sjukvard .nav-dyn a:hover,
.studentnet-sjukvard .nav-dyn a:active,
.studentnet-sjukvard .nav-dyn a:focus,
.studentnet-sjukvard .nav-dyn a[data-selected] {
    background-color: #e58ade;
}

.studentnet-social .nav-dyn a:hover,
.studentnet-social .nav-dyn a:active,
.studentnet-social .nav-dyn a:focus,
.studentnet-social .nav-dyn a[data-selected] {
    background-color: #b07dd1;
}

.studentnet-arbetsratt .nav-dyn a:hover,
.studentnet-arbetsratt .nav-dyn a:active,
.studentnet-arbetsratt .nav-dyn a:focus,
.studentnet-arbetsratt .nav-dyn a[data-selected] {
    background-color: #f26f7a;
}

.studentnet-migration .nav-dyn a:hover,
.studentnet-migration .nav-dyn a:active,
.studentnet-migration .nav-dyn a:focus,
.studentnet-migration .nav-dyn a[data-selected] {
    background-color: #8360bf;
}

.studentnet-samhallsbyggnad .nav-dyn a:hover,
.studentnet-samhallsbyggnad .nav-dyn a:active,
.studentnet-samhallsbyggnad .nav-dyn a:focus,
.studentnet-samhallsbyggnad .nav-dyn a[data-selected] {
    background-color: #39bd39;
}

.studentnet-forvaltning .nav-dyn a:hover,
.studentnet-forvaltning .nav-dyn a:active,
.studentnet-forvaltning .nav-dyn a:focus,
.studentnet-forvaltning .nav-dyn a[data-selected] {
    background-color: #d9682b;
}

.hyresnet .nav-dyn a:hover,
.hyresnet .nav-dyn a:active,
.hyresnet .nav-dyn a:focus,
.hyresnet .nav-dyn a[data-selected] {
    background-color: #9fd92b;
}

.kemikalienet .nav-dyn a:hover,
.kemikalienet .nav-dyn a:active,
.kemikalienet .nav-dyn a:focus,
.kemikalienet .nav-dyn a[data-selected] {
    background-color: #6bd149;
}

.nav-dyn .collapsed {
    padding: 0;
}

    .nav-dyn .collapsed li {
        display: none;
    }

        .nav-dyn .collapsed li[data-selected] {
            display: block;
        }

    .nav-dyn .collapsed a[data-selected] {
        padding-bottom: 5px;
    }

.service .nav-dyn a.toggler {
    /* White */
    background: url(/static/i/icons-s.png) 0 -100px no-repeat;
    display: block;
    height: 24px;
    right: 0;
    margin: 6px 10px 6px 0;
    opacity: 1;
    overflow: hidden;
    padding: 0;
    position: absolute;
    text-indent: 120%;
    top: 0;
    width: 24px;
}

.svg .service .nav-dyn .toggler {
    background-image: url(/static/i/icons-s.svg);
}

.service .nav-dyn .toggler:hover,
.service .nav-dyn .toggler:active,
.service .nav-dyn .toggler:focus {
    opacity: 0.8;
}

.service.arbetsmiljonet .nav-dyn .toggler,
.service.playarbetsliv .nav-dyn .toggler,
.service.arbetsrattsnet .nav-dyn .toggler,
.service.straffrattsnet .nav-dyn .toggler,
.service.djurnet .nav-dyn .toggler,
.service.eunet .nav-dyn .toggler,
.service.fastighetsnet .nav-dyn .toggler,
.service.foretagarnet .nav-dyn .toggler,
.service.forvaltningsnet .nav-dyn .toggler,
.service.insolvensnet .nav-dyn .toggler,
.service.playdataskydd .nav-dyn .toggler,
.service.itnet .nav-dyn .toggler,
.service.kommentarer .nav-dyn .toggler,
.service.livsmedelsnet .nav-dyn .toggler,
.service.playmiljo .nav-dyn .toggler,
.service.miljonet .nav-dyn .toggler,
.service.climatenet .nav-dyn .toggler,
.service.momsnet .nav-dyn .toggler,
.service.polisnet .nav-dyn .toggler,
.service.raddningsnet .nav-dyn .toggler,
.service.sakerhetsnet .nav-dyn .toggler,
.service.playdronare .nav-dyn .toggler,
.service.playsamhallsbyggnad .nav-dyn .toggler,
.service.samhallsbyggnadsnet .nav-dyn .toggler,
.service.sjukvardsnet .nav-dyn .toggler,
.service.skattenet .nav-dyn .toggler,
.service.playsocial .nav-dyn .toggler,
.service.socialnet .nav-dyn .toggler,
.service.socialforsakringsnet .nav-dyn .toggler,
.service.trafiknet .nav-dyn .toggler {
    /* Black */
    background-position: 0 -200px;
}

.service .nav-dyn .collapsed .toggler {
    /* White */
    background-position: -100px -100px;
}

.service.arbetsmiljonet .nav-dyn .collapsed .toggler,
.service.playarbetsliv .nav-dyn .collapsed .toggler,
.service.arbetsrattsnet .nav-dyn .collapsed .toggler,
.service.straffrattsnet .nav-dyn .collapsed .toggler,
.service.djurnet .nav-dyn .collapsed .toggler,
.service.eunet .nav-dyn .collapsed .toggler,
.service.fastighetsnet .nav-dyn .collapsed .toggler,
.service.foretagarnet .nav-dyn .collapsed .toggler,
.service.forvaltningsnet .nav-dyn .collapsed .toggler,
.service.insolvensnet .nav-dyn .collapsed .toggler,
.service.playdataskydd .nav-dyn .collapsed .toggler,
.service.itnet .nav-dyn .collapsed .toggler,
.service.kommentarer .nav-dyn .collapsed .toggler,
.service.livsmedelsnet .nav-dyn .collapsed .toggler,
.service.playmiljo .nav-dyn .collapsed .toggler,
.service.miljonet .nav-dyn .collapsed .toggler,
.service.climatenet .nav-dyn .collapsed .toggler,
.service.momsnet .nav-dyn .collapsed .toggler,
.service.polisnet .nav-dyn .collapsed .toggler,
.service.raddningsnet .nav-dyn .collapsed .toggler,
.service.sakerhetsnet .nav-dyn .collapsed .toggler,
.service.playdronare .nav-dyn .collapsed .toggler,
.service.playsamhallsbyggnad .nav-dyn .collapsed .toggler,
.service.samhallsbyggnadsnet .nav-dyn .collapsed .toggler,
.service.sjukvardsnet .nav-dyn .collapsed .toggler,
.service.skattenet .nav-dyn .collapsed .toggler,
.service.playsocial .nav-dyn .collapsed .toggler,
.service.socialnet .nav-dyn .collapsed .toggler,
.service.socialforsakringsnet .nav-dyn .collapsed .toggler,
.service.trafiknet .nav-dyn .collapsed .toggler {
    /* Black */
    background-position: -100px -200px;
}

@media only screen and (min-width: 1280px) {
    .nav-dyn ul {
        margin: -1px 0 14px;
        padding: 14px 0 13px;
    }

    .nav-dyn a {
        padding: 7px 49px 7px 15px;
    }

    .nav-dyn .collapsed {
        padding: 0;
    }

        .nav-dyn .collapsed a[data-selected] {
            padding-bottom: 6px;
        }

    .service .nav-dyn a.toggler {
        margin: 8px 10px 8px 0;
    }
}

@media only screen and (max-width: 767px) {
    .nav-dyn {
        margin-bottom: 24px;
    }
}

/* Anchor Navigation
================================================================================ */
.anchor-nav,
.export {
    max-width: 100%;
    padding: 24px;
    border: 1px solid #1a1a1a;
}

.service .export {
    border-color: #004b8d;
}

.service .export--inline {
    padding: 0;
    border: none;
}

    .service .export--inline ul {
        display: flex;
        flex-wrap: wrap;
        list-style-type: none;
    }

    .service .export--inline li {
        margin: 6px 0 0 12px;
    }

.anchor-nav li {
    width: 33.3333%;
    float: left;
    display: block;
    padding: 12px 0;
    box-sizing: border-box; /* Should be applied globally */
}

.anchor-nav.cf li {
    /* This is due to previous rules applied and not wanting to use !important */
    padding-right: 15px;
}

.anchor-nav--width-auto li {
    width: auto;
}

    .anchor-nav--width-auto li:last-child {
        padding: 0 !important;
    }

.cf.export li,
.cf.export li + li {
    width: 33.3333%;
    float: left;
    display: block;
    padding: 12px 0;
    margin: 0 0 0 0;
}

.anchor-nav a,
.export a {
    display: block;
    padding-left: 32px;
    position: relative;
    text-decoration: none;
}

    .anchor-nav a:hover,
    .anchor-nav a:focus,
    a:active {
        color: #1a1a1a;
    }

    .anchor-nav a:before {
        position: absolute;
        content: "";
        width: 20px;
        height: 20px;
        background-image: url("/static/i/subject-card-icons.png");
        background-image: url("/static/i/subject-card-icons.svg");
        background-repeat: no-repeat;
        left: 0;
        top: 0.2em;
    }

.amnesguide:before {
    background-position: 0 -200px;
}

.analyser-referat:before,
.analyser-och-referat:before {
    background-position: 0 0;
}

.blanketter:before,
.blanketter-och-mallar:before,
.blanketter-och-checklistor:before {
    background-position: 0 -20px;
}

.domar-och-beslut:before {
    background-position: 0 -40px;
}

.forarbeten:before {
    background-position: 0 -60px;
}

.fragor-svar:before,
.fragor-och-svar:before {
    background-position: 0 -80px;
}

.lagar-och-forardningar:before,
.nya-lagar-och-forordningar:before,
.lagar-och-regler:before {
    background-position: 0 -100px;
}

.lagkommentarer:before {
    background-position: 0 -120px;
}

.vagledande:before,
.vagledande-dokument:before {
    background-position: 0 -140px;
}

.nyheter:before {
    background-position: 0 -160px;
}

/* Anchor nav in article */
.article ul.anchor-nav li {
    background: none;
    padding: 0;
}

/* Anchor nav in small content-area */
.layout-4 .content-2 .anchor-nav li {
    width: auto;
    float: none;
}

@media only screen and (max-width: 1024px) {
    .anchor-nav,
    .export {
        padding: 12px;
    }

        .anchor-nav li,
        .export li {
            width: 48%;
            margin: 0 1%;
        }
}

@media only screen and (max-width: 470px) {
    .anchor-nav li,
    .export li {
        width: 100%;
        margin: 0;
        clear: left;
    }

    .anchor-nav.cf li {
        padding-right: 0;
    }

    .export[class] li,
    .export[class] li + li {
        width: 100%;
    }

        .export[class] li + li {
            margin-top: 10px;
        }
}

/* SUBJECT CARD
================================================================================ */

.subject-card .anchor-nav {
    border: none;
    padding: 0;
    margin-bottom: 0;
}

.subject-card {
    position: relative;
    background-color: #f4f4f4;
    padding: 24px;
    border: 1px solid #1a1a1a;
    margin-bottom: 24px;
}

.kicker {
    text-transform: uppercase;
    margin-bottom: 6px;
    display: block;
}

.subject-card h3 {
    font: 19px/28px "Myriad W01 Bd", sans-serif;
    text-transform: uppercase;
    margin-bottom: 12px;
}

.subject-card__footer {
    background-color: #e1e1e1;
    margin: 5px -24px -24px;
    padding: 5px 24px 5px;
}

@media only screen and (max-width: 1024px) {
    .subject-card__footer {
        margin: 5px -12px -12px;
        padding: 5px 12px 5px;
    }
}

.default .subject-card h3 {
    background-color: #1a1a1a;
}

.subject-card .ribbon-container span { /* override service colors - set to jp blue */
    background-color: #004b8d !important;
}

.arbetsmiljonet .ribbon-container span,
.arbetsmiljonet[class] > .ribbon-container span {
    background-color: #e5738f;
}

    .arbetsmiljonet .ribbon-container span:before,
    .arbetsmiljonet[class] > .ribbon-container span:before {
        border-top: 20px solid #e5738f;
        border-bottom: 20px solid #e5738f;
    }

.webbkurs-arbetsratt .ribbon-container span,
.playarbetsliv .ribbon-container span,
.arbetsrattsnet .ribbon-container span,
.arbetsrattsnet[class] > .ribbon-container span {
    background-color: #f26f7a;
}

    .webbkurs-arbetsratt .ribbon-container span:before,
    .playarbetsliv .ribbon-container span:before,
    .arbetsrattsnet .ribbon-container span:before,
    .arbetsrattsnet[class] > .ribbon-container span:before {
        border-top: 20px solid #f26f7a;
        border-bottom: 20px solid #f26f7a;
    }

.straffrattsnet .ribbon-container span,
.straffrattsnet[class] > .ribbon-container span {
    background-color: #54c4d6;
}

    .straffrattsnet .ribbon-container span:before,
    .straffrattsnet[class] > .ribbon-container span:before {
        border-top: 20px solid #54c4d6;
        border-bottom: 20px solid #54c4d6;
    }

.djurnet .ribbon-container span,
.djurnet[class] > .ribbon-container span {
    background-color: #d0d92b;
}

    .djurnet .ribbon-container span:before,
    .djurnet[class] > .ribbon-container span:before {
        border-top: 20px solid #d0d92b;
        border-bottom: 20px solid #d0d92b;
    }

.eunet .ribbon-container span,
.eunet[class] > .ribbon-container span {
    background-color: #219ed9;
}

    .eunet .ribbon-container span:before,
    .eunet[class] > .ribbon-container span:before {
        border-top: 20px solid #219ed9;
        border-bottom: 20px solid #219ed9;
    }

.familjenet .ribbon-container span,
.familjenet[class] > .ribbon-container span {
    background-color: #694cbf;
}

    .familjenet .ribbon-container span:before,
    .familjenet[class] > .ribbon-container span:before {
        border-top: 20px solid #694cbf;
        border-bottom: 20px solid #694cbf;
    }

.fastighetsnet .ribbon-container span,
.fastighetsnet[class] > .ribbon-container span {
    background-color: #9fd92b;
}

    .fastighetsnet .ribbon-container span:before,
    .fastighetsnet[class] > .ribbon-container span:before {
        border-top: 20px solid #9fd92b;
        border-bottom: 20px solid #9fd92b;
    }

.foretagarnet .ribbon-container span,
.foretagarnet[class] > .ribbon-container span {
    background-color: #d97c2b;
}

    .foretagarnet .ribbon-container span:before,
    .foretagarnet[class] > .ribbon-container span:before {
        border-top: 20px solid #d97c2b;
        border-bottom: 20px solid #d97c2b;
    }

.webbkurs-forvaltning .ribbon-container span,
.forvaltningsnet .ribbon-container span,
.forvaltningsnet[class] > .ribbon-container span {
    background-color: #d9682b;
}

    .webbkurs-forvaltning .ribbon-container span:before,
    .forvaltningsnet .ribbon-container span:before,
    .forvaltningsnet[class] > .ribbon-container span:before {
        border-top: 20px solid #d9682b;
        border-bottom: 20px solid #d9682b;
    }

.immaterialnet .ribbon-container span,
.immaterialnet[class] > .ribbon-container span {
    background-color: #1d76c4;
}

    .immaterialnet .ribbon-container span:before,
    .immaterialnet[class] > .ribbon-container span:before {
        border-top: 20px solid #1d76c4;
        border-bottom: 20px solid #1d76c4;
    }

.insolvensnet .ribbon-container span,
.insolvensnet[class] > .ribbon-container span {
    background-color: #38c77f;
}

    .insolvensnet .ribbon-container span:before,
    .insolvensnet[class] > .ribbon-container span:before {
        border-top: 20px solid #38c77f;
        border-bottom: 20px solid #38c77f;
    }

.playdataskydd .ribbon-container span,
.playdataskydd[class] > .ribbon-container span,
.itnet .ribbon-container span,
.itnet[class] > .ribbon-container span,
.webbkurs-gdpr .ribbon-container span,
.webbkurs-gdpr[class] > .ribbon-container span {
    background-color: #3288c9;
}

    .playdataskydd .ribbon-container span:before,
    .playdataskydd[class] > .ribbon-container span:before,
    .itnet .ribbon-container span:before,
    .itnet[class] > .ribbon-container span:before,
    .webbkurs-gdpr .ribbon-container span:before,
    .webbkurs-gdpr[class] > .ribbon-container span:before {
        border-top: 20px solid #3288c9;
        border-bottom: 20px solid #3288c9;
    }

.juridiknet .ribbon-container span,
.juridiknet[class] > .ribbon-container span {
    background-color: #1b6db5;
}

    .juridiknet .ribbon-container span:before,
    .juridiknet[class] > .ribbon-container span:before {
        border-top: 20px solid #1b6db5;
        border-bottom: 20px solid #1b6db5;
    }

.kommentarer .ribbon-container span,
.kommentarer[class] > .ribbon-container span {
    background-color: #2bb6d9;
}

    .kommentarer .ribbon-container span:before,
    .kommentarer[class] > .ribbon-container span:before {
        border-top: 20px solid #2bb6d9;
        border-bottom: 20px solid #2bb6d9;
    }

.livsmedelsnet .ribbon-container span,
.livsmedelsnet[class] > .ribbon-container span {
    background-color: #6bd149;
}

    .livsmedelsnet .ribbon-container span:before,
    .livsmedelsnet[class] > .ribbon-container span:before {
        border-top: 20px solid #6bd149;
        border-bottom: 20px solid #6bd149;
    }

.marknadsnet .ribbon-container span,
.marknadsnet[class] > .ribbon-container span {
    background-color: #0965b5;
}

    .marknadsnet .ribbon-container span:before,
    .marknadsnet[class] > .ribbon-container span:before {
        border-top: 20px solid #0965b5;
        border-bottom: 20px solid #0965b5;
    }

.migrationsnet .ribbon-container span,
.migrationsnet[class] > .ribbon-container span {
    background-color: #8360bf;
}

    .migrationsnet .ribbon-container span:before,
    .migrationsnet[class] > .ribbon-container span:before {
        border-top: 20px solid #8360bf;
        border-bottom: 20px solid #8360bf;
    }

.playmiljo .ribbon-container span,
.miljonet .ribbon-container span,
.miljonet[class] > .ribbon-container span,
.climatenet .ribbon-container span,
.climatenet[class] > .ribbon-container span {
    background-color: #52cc52;
}

    .playmiljo .ribbon-container span:before,
    .miljonet .ribbon-container span:before,
    .miljonet[class] > .ribbon-container span:before,
    .climatenet .ribbon-container span:before,
    .climatenet[class] > .ribbon-container span:before {
        border-top: 20px solid #52cc52;
        border-bottom: 20px solid #52cc52;
    }

.momsnet .ribbon-container span,
.momsnet[class] > .ribbon-container span {
    background-color: #45c49e;
}

    .momsnet .ribbon-container span:before,
    .momsnet[class] > .ribbon-container span:before {
        border-top: 20px solid #45c49e;
        border-bottom: 20px solid #45c49e;
    }

.raddningsnet .ribbon-container span,
.raddningsnet[class] > .ribbon-container span,
.playdronare .ribbon-container span,
.playdronare[class] > .ribbon-container span,
.sakerhetsnet .ribbon-container span,
.sakerhetsnet[class] > .ribbon-container span {
    background-color: #44c244;
}

    .raddningsnet .ribbon-container span:before,
    .raddningsnet[class] > .ribbon-container span:before,
    .playdronare .ribbon-container span:before,
    .playdronare[class] > .ribbon-container span:before,
    .sakerhetsnet .ribbon-container span:before,
    .sakerhetsnet[class] > .ribbon-container span:before {
        border-top: 20px solid #44c244;
        border-bottom: 20px solid #44c244;
    }

.rattsfallsnet .ribbon-container span,
.rattsfallsnet[class] > .ribbon-container span {
    background-color: #005cad;
}

    .rattsfallsnet .ribbon-container span:before,
    .rattsfallsnet[class] > .ribbon-container span:before {
        border-top: 20px solid #005cad;
        border-bottom: 20px solid #005cad;
    }

.webbkurs-samhallsbyggnad .ribbon-container span,
.playsamhallsbyggnad .ribbon-container span,
.samhallsbyggnadsnet .ribbon-container span,
.samhallsbyggnadsnet[class] > .ribbon-container span {
    background-color: #39bd39;
}

    .webbkurs-samhallsbyggnad .ribbon-container span:before,
    .playsamhallsbyggnad .ribbon-container span:before,
    .samhallsbyggnadsnet .ribbon-container span:before,
    .samhallsbyggnadsnet[class] > .ribbon-container span:before,
    .playsamhallsbyggnad[class] > .ribbon-container span:before {
        border-top: 20px solid #39bd39;
        border-bottom: 20px solid #39bd39;
    }

.serveringstillstandsnet .ribbon-container span,
.serveringstillstandsnet[class] > .ribbon-container span {
    background-color: #9369bf;
}

    .serveringstillstandsnet .ribbon-container span:before,
    .serveringstillstandsnet[class] > .ribbon-container span:before {
        border-top: 20px solid #9369bf;
        border-bottom: 20px solid #9369bf;
    }

.sjukvardsnet .ribbon-container span,
.sjukvardsnet[class] > .ribbon-container span {
    background-color: #e58ade;
}

    .sjukvardsnet .ribbon-container span:before,
    .sjukvardsnet[class] > .ribbon-container span:before {
        border-top: 20px solid #e58ade;
        border-bottom: 20px solid #e58ade;
    }

.skattenet .ribbon-container span,
.skattenet[class] > .ribbon-container span {
    background-color: #44bec2;
}

    .skattenet .ribbon-container span:before,
    .skattenet[class] > .ribbon-container span:before {
        border-top: 20px solid #44bec2;
        border-bottom: 20px solid #44bec2;
    }

.playskola .ribbon-container span,
.skolnet .ribbon-container span,
.skolnet[class] > .ribbon-container span {
    background-color: #d92b2b;
}

    .playskola .ribbon-container span:before,
    .skolnet .ribbon-container span:before,
    .skolnet[class] > .ribbon-container span:before {
        border-top: 20px solid #d92b2b;
        border-bottom: 20px solid #d92b2b;
    }

.playsocial .ribbon-container span,
.socialnet .ribbon-container span,
.socialnet[class] > .ribbon-container span {
    background-color: #b07dd1;
}

    .playsocial .ribbon-container span:before,
    .socialnet .ribbon-container span:before,
    .socialnet[class] > .ribbon-container span:before {
        border-top: 20px solid #b07dd1;
        border-bottom: 20px solid #b07dd1;
    }

.socialforsakringsnet .ribbon-container span,
.socialforsakringsnet[class] > .ribbon-container span {
    background-color: #c57bd4;
}

    .socialforsakringsnet .ribbon-container span:before,
    .socialforsakringsnet[class] > .ribbon-container span:before {
        border-top: 20px solid #c57bd4;
        border-bottom: 20px solid #c57bd4;
    }

.trafiknet .ribbon-container span,
.trafiknet[class] > .ribbon-container span {
    background-color: #32c262;
}

    .trafiknet .ribbon-container span:before,
    .trafiknet[class] > .ribbon-container span:before {
        border-top: 20px solid #32c262;
        border-bottom: 20px solid #32c262;
    }

.playupphandling .ribbon-container span,
.upphandlingsnet .ribbon-container span,
.upphandlingsnet[class] > .ribbon-container span {
    background-color: #4246a6;
}

    .playupphandling .ribbon-container span:before,
    .upphandlingsnet .ribbon-container span:before,
    .upphandlingsnet[class] > .ribbon-container span:before {
        border-top: 20px solid #4246a6;
        border-bottom: 20px solid #4246a6;
    }

.myndighetsbeslut .ribbon-container span,
.myndighetsbeslut[class] > .ribbon-container span {
    background-color: #d9a52b;
}

    .myndighetsbeslut .ribbon-container span:before,
    .myndighetsbeslut[class] > .ribbon-container span:before {
        border-top: 20px solid #d9a52b;
        border-bottom: 20px solid #d9a52b;
    }

.hrnet .ribbon-container span,
.hrnet[class] > .ribbon-container span {
    background-color: #f26fa6;
}

    .hrnet .ribbon-container span:before,
    .hrnet[class] > .ribbon-container span:before {
        border-top: 20px solid #f26fa6;
        border-bottom: 20px solid #f26fa6;
    }

.miljouppdateringar .ribbon-container span,
.miljouppdateringar[class] > .ribbon-container span {
    background-color: #52cc52;
}

    .miljouppdateringar .ribbon-container span:before,
    .miljouppdateringar[class] > .ribbon-container span:before {
        border-top: 20px solid #52cc52;
        border-bottom: 20px solid #52cc52;
    }

.skoluppdateringar .ribbon-container span,
.skoluppdateringar[class] > .ribbon-container span {
    background-color: #d92b2b;
}

    .skoluppdateringar .ribbon-container span:before,
    .skoluppdateringar[class] > .ribbon-container span:before {
        border-top: 20px solid #d92b2b;
        border-bottom: 20px solid #d92b2b;
    }

.socialuppdateringar .ribbon-container span,
.socialuppdateringar[class] > .ribbon-container span {
    background-color: #b07dd1;
}

    .socialuppdateringar .ribbon-container span:before,
    .socialuppdateringar[class] > .ribbon-container span:before {
        border-top: 20px solid #b07dd1;
        border-bottom: 20px solid #b07dd1;
    }

.upphandlingsuppdateringar .ribbon-container span,
.upphandlingsuppdateringar[class] > .ribbon-container span {
    background-color: #4246a6;
}

    .upphandlingsuppdateringar .ribbon-container span:before,
    .upphandlingsuppdateringar[class] > .ribbon-container span:before {
        border-top: 20px solid #4246a6;
        border-bottom: 20px solid #4246a6;
    }

.studentnet-skola .ribbon-container span,
.studentnet-skola[class] > .ribbon-container span {
    background-color: #d92b2b;
}

    .studentnet-skola .ribbon-container span:before,
    .studentnet-skola[class] > .ribbon-container span:before {
        border-top: 20px solid #d92b2b;
        border-bottom: 20px solid #d92b2b;
    }

.studentnet-sjukvard .ribbon-container span,
.studentnet-sjukvard[class] > .ribbon-container span {
    background-color: #e58ade;
}

    .studentnet-sjukvard .ribbon-container span:before,
    .studentnet-sjukvard[class] > .ribbon-container span:before {
        border-top: 20px solid #e58ade;
        border-bottom: 20px solid #e58ade;
    }

.studentnet-social .ribbon-container span,
.studentnet-social[class] > .ribbon-container span {
    background-color: #b07dd1;
}

    .studentnet-social .ribbon-container span:before,
    .studentnet-social[class] > .ribbon-container span:before {
        border-top: 20px solid #b07dd1;
        border-bottom: 20px solid #b07dd1;
    }

.studentnet-arbetsratt .ribbon-container span,
.studentnet-arbetsratt[class] > .ribbon-container span {
    background-color: #f26f7a;
}

    .studentnet-arbetsratt .ribbon-container span:before,
    .studentnet-arbetsratt[class] > .ribbon-container span:before {
        border-top: 20px solid #f26f7a;
        border-bottom: 20px solid #f26f7a;
    }

.studentnet-migration .ribbon-container span,
.studentnet-migration[class] > .ribbon-container span {
    background-color: #8360bf;
}

    .studentnet-migration .ribbon-container span:before,
    .studentnet-migration[class] > .ribbon-container span:before {
        border-top: 20px solid #8360bf;
        border-bottom: 20px solid #8360bf;
    }

.studentnet-samhallsbyggnad .ribbon-container span,
.studentnet-samhallsbyggnad[class] > .ribbon-container span {
    background-color: #39bd39;
}

    .studentnet-samhallsbyggnad .ribbon-container span:before,
    .studentnet-samhallsbyggnad[class] > .ribbon-container span:before {
        border-top: 20px solid #39bd39;
        border-bottom: 20px solid #39bd39;
    }

.studentnet-forvaltning .ribbon-container span,
.studentnet-forvaltning[class] > .ribbon-container span {
    background-color: #d9682b;
}

    .studentnet-forvaltning .ribbon-container span:before,
    .studentnet-forvaltning[class] > .ribbon-container span:before {
        border-top: 20px solid #d9682b;
        border-bottom: 20px solid #d9682b;
    }

.polisnet .ribbon-container span,
.polisnet[class] > .ribbon-container span {
    background-color: #2ba8d9;
}

    .polisnet .ribbon-container span:before,
    .polisnet[class] > .ribbon-container span:before {
        border-top: 20px solid #2ba8d9;
        border-bottom: 20px solid #2ba8d9;
    }

.webbkurs-mark-och-miljo .ribbon-container span,
.webbkurs-mark-och-miljo[class] > .ribbon-container span {
    background-color: #52cc52;
}

    .webbkurs-mark-och-miljo .ribbon-container span:before,
    .webbkurs-mark-och-miljo[class] > .ribbon-container span:before {
        border-top: 20px solid #52cc52;
        border-bottom: 20px solid #52cc52;
    }

.webbkurs-skola .ribbon-container span,
.webbkurs-skola[class] > .ribbon-container span {
    background-color: #d92b2b;
}

    .webbkurs-skola .ribbon-container span:before,
    .webbkurs-skola[class] > .ribbon-container span:before {
        border-top: 20px solid #d92b2b;
        border-bottom: 20px solid #d92b2b;
    }

.webbkurs-social .ribbon-container span,
.webbkurs-social[class] > .ribbon-container span {
    background-color: #b07dd1;
}

    .webbkurs-social .ribbon-container span:before,
    .webbkurs-social[class] > .ribbon-container span:before {
        border-top: 20px solid #b07dd1;
        border-bottom: 20px solid #b07dd1;
    }

.webbkurs-upphandling .ribbon-container span,
.webbkurs-upphandling[class] > .ribbon-container span {
    background-color: #4246a6;
}

    .webbkurs-upphandling .ribbon-container span:before,
    .webbkurs-upphandling[class] > .ribbon-container span:before {
        border-top: 20px solid #4246a6;
        border-bottom: 20px solid #4246a6;
    }

.hyresnet .ribbon-container span,
.hyresnet[class] > .ribbon-container span {
    background-color: #9fd92b;
}

    .hyresnet .ribbon-container span:before,
    .hyresnet[class] > .ribbon-container span:before {
        border-top: 20px solid #9fd92b;
        border-bottom: 20px solid #9fd92b;
    }

.kemikalienet .ribbon-container span,
.kemikalienet[class] > .ribbon-container span {
    background-color: #6bd149;
}

    .kemikalienet .ribbon-container span:before,
    .kemikalienet[class] > .ribbon-container span:before {
        border-top: 20px solid #6bd149;
        border-bottom: 20px solid #6bd149;
    }

.skadestandsnet .ribbon-container span,
.skadestandsnet[class] > .ribbon-container span {
    background-color: #4ec3e0;
}

    .skadestandsnet .ribbon-container span:before,
    .skadestandsnet[class] > .ribbon-container span:before {
        border-top: 20px solid #4ec3e0;
        border-bottom: 20px solid #4ec3e0;
    }

.arbetsmiljonet .anchor-nav,
.arbetsmiljonet .subject-card {
    border-color: #e5738f;
}

.webbkurs-arbetsratt .anchor-nav,
.webbkurs-arbetsratt .subject-card,
.playarbetsliv .anchor-nav,
.playarbetsliv .subject-card,
.arbetsrattsnet .anchor-nav,
.arbetsrattsnet .subject-card {
    border-color: #f26f7a;
}

.straffrattsnet .anchor-nav,
.straffrattsnet .subject-card {
    border-color: #54c4d6;
}

.djurnet .anchor-nav,
.djurnet .subject-card {
    border-color: #d0d92b;
}

.eunet .anchor-nav,
.eunet .subject-card {
    border-color: #219ed9;
}

.familjenet .anchor-nav,
.familjenet .subject-card {
    border-color: #694cbf;
}

.fastighetsnet .anchor-nav,
.fastighetsnet .subject-card {
    border-color: #9fd92b;
}

.foretagarnet .anchor-nav,
.foretagarnet .subject-card {
    border-color: #d97c2b;
}

.webbkurs-forvaltning .anchor-nav,
.webbkurs-forvaltning .subject-card,
.forvaltningsnet .anchor-nav,
.forvaltningsnet .subject-card {
    border-color: #d9682b;
}

.immaterialnet .anchor-nav,
.immaterialnet .subject-card {
    border-color: #1d76c4;
}

.insolvensnet .anchor-nav,
.insolvensnet .subject-card {
    border-color: #38c77f;
}

.playdataskydd .anchor-nav,
.playdataskydd .subject-card,
.itnet .anchor-nav,
.itnet .subject-card,
.webbkurs-gdpr .anchor-nav,
.webbkurs-gdpr .subject-card {
    border-color: #3288c9;
}

.juridiknet .anchor-nav,
.juridiknet .subject-card {
    border-color: #1b6db5;
}

.kommentarer .anchor-nav,
.kommentarer .subject-card {
    border-color: #2bb6d9;
}

.livsmedelsnet .anchor-nav,
.livsmedelsnet .subject-card {
    border-color: #6bd149;
}

.marknadsnet .anchor-nav,
.marknadsnet .subject-card {
    border-color: #0965b5;
}

.migrationsnet .anchor-nav,
.migrationsnet .subject-card {
    border-color: #8360bf;
}

.playmiljo .anchor-nav,
.playmiljo .subject-card,
.miljonet .anchor-nav,
.miljonet .subject-card,
.climatenet .anchor-nav,
.climatenet .subject-card {
    border-color: #52cc52;
}

.momsnet .anchor-nav,
.momsnet .subject-card {
    border-color: #45c49e;
}

.polisnet .anchor-nav,
.polisnet .subject-card {
    border-color: #2ba8d9;
}

.raddningsnet .anchor-nav,
.raddningsnet .subject-card,
.playdronare .anchor-nav,
.playdronare .subject-card,
.sakerhetsnet .anchor-nav,
.sakerhetsnet .subject-card {
    border-color: #44c244;
}

.rattsfallsnet .anchor-nav,
.rattsfallsnet .subject-card {
    border-color: #005cad;
}

.webbkurs-samhallsbyggnad .anchor-nav,
.webbkurs-samhallsbyggnad .subject-card,
.playsamhallsbyggnad .anchor-nav,
.playsamhallsbyggnad .subject-card,
.samhallsbyggnadsnet .anchor-nav,
.samhallsbyggnadsnet .subject-card {
    border-color: #39bd39;
}

.serveringstillstandsnet .anchor-nav,
.serveringstillstandsnet .subject-card {
    border-color: #9369bf;
}

.sjukvardsnet .anchor-nav,
.sjukvardsnet .subject-card {
    border-color: #e58ade;
}

.skattenet .anchor-nav,
.skattenet .subject-card {
    border-color: #44bec2;
}

.playskola .anchor-nav,
.playskola .subject-card,
.skolnet .anchor-nav,
.skolnet .subject-card {
    border-color: #d92b2b;
}

.playsocial .anchor-nav,
.playsocial .subject-card,
.socialnet .anchor-nav,
.socialnet .subject-card {
    border-color: #b07dd1;
}

.socialforsakringsnet .anchor-nav,
.socialforsakringsnet .subject-card {
    border-color: #c57bd4;
}

.trafiknet .anchor-nav,
.trafiknet .subject-card {
    border-color: #32c262;
}

.playupphandling .anchor-nav,
.playupphandling .subject-card,
.upphandlingsnet .anchor-nav,
.upphandlingsnet .subject-card {
    border-color: #4246a6;
}

.myndighetsbeslut .anchor-nav,
.myndighetsbeslut .subject-card {
    border-color: #d9a52b;
}

.hrnet .anchor-nav,
.hrnet .subject-card {
    border-color: #f26fa6;
}

.webbkurs-mark-och-miljo .anchor-nav,
.webbkurs-mark-och-miljo .subject-card {
    border-color: #52cc52;
}

.webbkurs-skola .anchor-nav,
.webbkurs-skola .subject-card {
    border-color: #d92b2b;
}

.webbkurs-social .anchor-nav,
.webbkurs-social .subject-card {
    border-color: #b07dd1;
}

.webbkurs-upphandling .anchor-nav,
.webbkurs-upphandling .subject-card {
    border-color: #4246a6;
}

.studentnet-skola .anchor-nav,
.studentnet-skola .subject-card {
    border-color: #d92b2b;
}

.studentnet-sjukvard .anchor-nav,
.studentnet-sjukvard .subject-card {
    border-color: #e58ade;
}

.studentnet-social .anchor-nav,
.studentnet-social .subject-card {
    border-color: #b07dd1;
}

.studentnet-arbetsratt .anchor-nav,
.studentnet-arbetsratt .subject-card {
    border-color: #f26f7a;
}

.studentnet-migration .anchor-nav,
.studentnet-migration .subject-card {
    border-color: #8360bf;
}

.studentnet-samhallsbyggnad .anchor-nav,
.studentnet-samhallsbyggnad .subject-card {
    border-color: #39bd39;
}

.studentnet-forvaltning .anchor-nav,
.studentnet-forvaltning .subject-card {
    border-color: #d9682b;
}

.hyresnet .anchor-nav,
.hyresnet .subject-card {
    border-color: #9fd92b;
}

.kemikalienet .anchor-nav,
.kemikalienet .subject-card {
    border-color: #9fd92b;
}

.skadestandsnet .anchor-nav,
.skadestandsnet .subject-card {
    border-color: #4ec3e0;
}

.search .subject-card h3 {
    width: calc(100% - 200px);
    background-color: transparent;
}

.subject-card p {
    margin-bottom: 12px;
}

.subject-card li {
    padding: 2px 0;
}

.related-subject-cards {
    width: 100%;
    background-color: #e1e1e1;
    padding: 12px 24px;
    margin: 12px 0 -24px -24px;
}

    .related-subject-cards dl,
    .related-subject-cards dt,
    .related-subject-cards dd {
        display: inline-block;
    }

    .related-subject-cards dd {
        margin-bottom: 0;
    }

    .related-subject-cards dt {
        padding-right: 3px;
    }

    .related-subject-cards dd:after {
        content: ',';
        color: #4b94d2;
        padding-right: 3px;
    }

    .related-subject-cards dd:last-child:after {
        content: none;
    }

@media only screen and (max-width: 1280px) {
    .subject-card h3 {
        max-width: 370px;
    }
}

@media only screen and (max-width: 1024px) {
    .subject-card {
        padding: 12px;
    }

    .related-subject-cards {
        padding: 12px;
        margin: 12px 0 -12px -12px;
    }

    .subject-card h3 {
        margin: -12px 0 0 -12px;
        padding: 12px;
    }
}

@media only screen and (max-width: 1024px) {
    .subject-card h3,
    .search .subject-card h3 {
        width: 100%;
        max-width: 100%;
    }
}

.handbook:first-child {
    margin-top: -13px;
}

@media only screen and (min-width: 1280px) {
    .handbook:first-child {
        margin-top: -21px;
    }
}

.handbook .subject-card {
    padding-top: 60px;
    padding-bottom: 12px;
}

.handbook h2 {
    margin-bottom: 12px;
}

.handbook ul {
    margin: 0 0 12px 16px;
}

.handbook .cta {
    position: absolute;
    bottom: 4px;
    right: 24px;
}

@media only screen and (max-width: 1023px) {
    .handbook .ribbon-container {
        display: block;
    }
}

@media only screen and (max-width: 767px) {
    .handbook .cta {
        position: static;
        text-align: center;
    }

    .handbook .subject-card h2 {
        margin-top: 24px;
    }

    .handbook .ribbon-container h2 {
        margin: 0;
    }
}

/* Ribbon
============================================================================================================================ */

.ribbon-container {
    position: absolute;
    top: 8px;
    right: 0;
    overflow: visible;
    font-size: 14px;
    line-height: 20px;
}

    .ribbon-container span {
        box-sizing: border-box;
        display: block;
        padding: 10px;
        position: relative;
        /* allows us to position our pseudo-elements properly */
        background: #4f4f4f;
        overflow: visible;
        height: 40px;
        margin-left: 20px;
        color: #fff;
        text-decoration: none;
        font-weight: bold;
        letter-spacing: 0.1em;
    }

        .ribbon-container span:before {
            /* this creates the "forked" part of our ribbon */
            content: "";
            height: 0;
            width: 0;
            display: block;
            position: absolute;
            top: 0;
            left: -20px;
            border-top: 20px solid #4f4f4f;
            border-bottom: 20px solid #4f4f4f;
            border-right: 20px solid transparent;
            border-left: 20px solid transparent;
        }

.ribbon-container--relative[class][class] {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end;
    margin: 5px 0;
}

@media only screen and (max-width: 1024px) {
    .ribbon-container {
        display: none;
    }
}

.ribbon-container-left {
    right: auto;
    left: -20px;
}

    .ribbon-container-left span:before {
        left: auto;
        right: -20px;
    }

    .ribbon-container-left:before {
        display: none;
    }

.ribbon-container--inline-block {
    display: inline-block;
    position: relative;
    margin: 5px 0;
}
/* SUB NAVIGATION VERTICAL
============================================================================================================================ */

.nav-sub-vertical {
    border: none;
    box-shadow: none;
    background: #fff;
}

    .nav-sub-vertical h2.section-name {
        margin: 0;
        padding: 0;
        color: #fff;
        font-weight: bold;
        font-size: 20px;
        text-transform: uppercase;
    }

        .nav-sub-vertical h2.section-name a {
            border-top: 1px solid #e1e1e0;
        }

.service .nav-sub-vertical.nav-menu-narrow button {
    padding: 9px;
    font-size: 20px;
    text-transform: inherit;
}

.service .treeview .toggle,
.service .nav-sub-vertical li.selected > a,
.service .nav-sub-vertical.nav-menu-narrow button {
    background-color: #005cad !important;
    color: #fff;
}

.service.arbetsmiljonet .treeview .toggle,
.service.arbetsmiljonet .nav-sub-vertical.nav-menu-narrow button,
.service.arbetsmiljonet .nav-sub-vertical li.selected > a {
    background-color: #e5738f;
    color: #1a1a1a;
}

.service.playarbetsliv .treeview .toggle,
.service.playarbetsliv .nav-sub-vertical.nav-menu-narrow button,
.service.playarbetsliv .nav-sub-vertical li.selected > a,
.service.arbetsrattsnet .treeview .toggle,
.service.arbetsrattsnet .nav-sub-vertical.nav-menu-narrow button,
.service.arbetsrattsnet .nav-sub-vertical li.selected > a,
.service.webbkurs-arbetsratt .treeview .toggle,
.service.webbkurs-arbetsratt .nav-sub-vertical.nav-menu-narrow button,
.service.webbkurs-arbetsratt .nav-sub-vertical li.selected > a {
    background-color: #f26f7a;
    color: #1a1a1a;
}

.service.straffrattsnet .treeview .toggle,
.service.straffrattsnet .nav-sub-vertical.nav-menu-narrow button,
.service.straffrattsnet .nav-sub-vertical li.selected > a {
    background-color: #54c4d6;
    color: #1a1a1a;
}

.service.djurnet .treeview .toggle,
.service.djurnet .nav-sub-vertical.nav-menu-narrow button,
.service.djurnet .nav-sub-vertical li.selected > a {
    background-color: #d0d92b;
    color: #1a1a1a;
}

.service.eunet .treeview .toggle,
.service.eunet .nav-sub-vertical.nav-menu-narrow button,
.service.eunet .nav-sub-vertical li.selected > a {
    background-color: #219ed9;
    color: #1a1a1a;
}

.service.familjenet .treeview .toggle,
.service.familjenet .nav-sub-vertical.nav-menu-narrow button,
.service.familjenet .nav-sub-vertical li.selected > a {
    background-color: #694cbf;
    color: #fff;
}

.service.fastighetsnet .treeview .toggle,
.service.fastighetsnet .nav-sub-vertical.nav-menu-narrow button,
.service.fastighetsnet .nav-sub-vertical li.selected > a {
    background-color: #9fd92b;
    color: #1a1a1a;
}

.service.foretagarnet .treeview .toggle,
.service.foretagarnet .nav-sub-vertical.nav-menu-narrow button,
.service.foretagarnet .nav-sub-vertical li.selected > a {
    background-color: #d97c2b;
    color: #1a1a1a;
}

.service.forvaltningsnet .treeview .toggle,
.service.forvaltningsnet .nav-sub-vertical.nav-menu-narrow button,
.service.forvaltningsnet .nav-sub-vertical li.selected > a {
    background-color: #d9682b;
    color: #1a1a1a;
}

.service.immaterialnet .treeview .toggle,
.service.immaterialnet .nav-sub-vertical.nav-menu-narrow button,
.service.immaterialnet .nav-sub-vertical li.selected > a {
    background-color: #1d76c4;
    color: #fff;
}

.service.insolvensnet .treeview .toggle,
.service.insolvensnet .nav-sub-vertical.nav-menu-narrow button,
.service.insolvensnet .nav-sub-vertical li.selected > a {
    background-color: #38c77f;
    color: #1a1a1a;
}

.service.playdataskydd .treeview .toggle,
.service.playdataskydd .nav-sub-vertical.nav-menu-narrow button,
.service.playdataskydd .nav-sub-vertical li.selected > a,
.service.itnet .treeview .toggle,
.service.itnet .nav-sub-vertical.nav-menu-narrow button,
.service.itnet .nav-sub-vertical li.selected > a,
.service.webbkurs-gdpr .treeview .toggle,
.service.webbkurs-gdpr .nav-sub-vertical.nav-menu-narrow button,
.service.webbkurs-gdpr .nav-sub-vertical li.selected > a {
    background-color: #3288c9;
    color: #fff;
}

.service.juridiknet .treeview .toggle,
.service.juridiknet .nav-sub-vertical.nav-menu-narrow button,
.service.juridiknet .nav-sub-vertical li.selected > a {
    background-color: #1b6db5;
    color: #fff;
}

.service.kommentarer .treeview .toggle,
.service.kommentarer .nav-sub-vertical.nav-menu-narrow button,
.service.kommentarer .nav-sub-vertical li.selected > a {
    background-color: #2bb6d9;
}

.service.livsmedelsnet .treeview .toggle,
.service.livsmedelsnet .nav-sub-vertical.nav-menu-narrow button,
.service.livsmedelsnet .nav-sub-vertical li.selected > a {
    background-color: #6bd149;
    color: #1a1a1a;
}

.service.marknadsnet .treeview .toggle,
.service.marknadsnet .nav-sub-vertical.nav-menu-narrow button,
.service.marknadsnet .nav-sub-vertical li.selected > a {
    background-color: #0965b5;
    color: #fff;
}

.service.migrationsnet .treeview .toggle,
.service.migrationsnet .nav-sub-vertical.nav-menu-narrow button,
.service.migrationsnet .nav-sub-vertical li.selected > a {
    background-color: #8360bf;
}

.service.playmiljo .treeview .toggle,
.service.playmiljo .nav-sub-vertical.nav-menu-narrow button,
.service.playmiljo .nav-sub-vertical li.selected > a,
.service.miljonet .treeview .toggle,
.service.miljonet .nav-sub-vertical.nav-menu-narrow button,
.service.miljonet .nav-sub-vertical li.selected > a,
.service.climatenet .treeview .toggle,
.service.climatenet .nav-sub-vertical.nav-menu-narrow button,
.service.climatenet .nav-sub-vertical li.selected > a {
    background-color: #52cc52;
    color: #1a1a1a;
}

.service.momsnet .treeview .toggle,
.service.momsnet .nav-sub-vertical.nav-menu-narrow button,
.service.momsnet .nav-sub-vertical li.selected > a {
    background-color: #45c49e;
    color: #1a1a1a;
}

.service.polisnet .treeview .toggle,
.service.polisnet .nav-sub-vertical.nav-menu-narrow button,
.service.polisnet .nav-sub-vertical li.selected > a {
    background-color: #2ba8d9;
    color: #fff;
}

.service.raddningsnet .treeview .toggle,
.service.raddningsnet .nav-sub-vertical.nav-menu-narrow button,
.service.raddningsnet .nav-sub-vertical li.selected > a,
.service.playdronare .treeview .toggle,
.service.playdronare .nav-sub-vertical.nav-menu-narrow button,
.service.playdronare .nav-sub-vertical li.selected > a,
.service.sakerhetsnet .treeview .toggle,
.service.sakerhetsnet .nav-sub-vertical.nav-menu-narrow button,
.service.sakerhetsnet .nav-sub-vertical li.selected > a {
    background-color: #44c244;
    color: #1a1a1a;
}

.service.rattsfallsnet .treeview .toggle,
.service.rattsfallsnet .nav-sub-vertical.nav-menu-narrow button,
.service.rattsfallsnet .nav-sub-vertical li.selected > a {
    background-color: #005cad;
    color: #fff;
}

.service.playsamhallsbyggnad .treeview .toggle,
.service.playsamhallsbyggnad .nav-sub-vertical.nav-menu-narrow button,
.service.playsamhallsbyggnad .nav-sub-vertical li.selected > a,
.service.samhallsbyggnadsnet .treeview .toggle,
.service.samhallsbyggnadsnet .nav-sub-vertical.nav-menu-narrow button,
.service.samhallsbyggnadsnet .nav-sub-vertical li.selected > a {
    background-color: #39bd39;
    color: #1a1a1a;
}

.service.serveringstillstandsnet .treeview .toggle,
.service.serveringstillstandsnet .nav-sub-vertical.nav-menu-narrow button,
.service.serveringstillstandsnet .nav-sub-vertical li.selected > a {
    background-color: #9369bf;
    color: #1a1a1a;
}

.service.sjukvardsnet .treeview .toggle,
.service.sjukvardsnet .nav-sub-vertical.nav-menu-narrow button,
.service.sjukvardsnet .nav-sub-vertical li.selected > a {
    background-color: #e58ade;
    color: #1a1a1a;
}

.service.skattenet .treeview .toggle,
.service.skattenet .nav-sub-vertical.nav-menu-narrow button,
.service.skattenet .nav-sub-vertical li.selected > a {
    background-color: #44bec2;
    color: #1a1a1a;
}

.service.playskola .treeview .toggle,
.service.playskola .nav-sub-vertical.nav-menu-narrow button,
.service.playskola .nav-sub-vertical li.selected > a,
.service.skolnet .treeview .toggle,
.service.skolnet .nav-sub-vertical.nav-menu-narrow button,
.service.skolnet .nav-sub-vertical li.selected > a {
    background-color: #d92b2b;
}

.service.playsocial .treeview .toggle,
.service.playsocial .nav-sub-vertical.nav-menu-narrow button,
.service.playsocial .nav-sub-vertical li.selected > a,
.service.socialnet .treeview .toggle,
.service.socialnet .nav-sub-vertical.nav-menu-narrow button,
.service.socialnet .nav-sub-vertical li.selected > a {
    background-color: #b07dd1;
    color: #1a1a1a;
}

.service.socialforsakringsnet .treeview .toggle,
.service.socialforsakringsnet .nav-sub-vertical.nav-menu-narrow button,
.service.socialforsakringsnet .nav-sub-vertical li.selected > a {
    background-color: #c57bd4;
    color: #1a1a1a;
}

.service.trafiknet .treeview .toggle,
.service.trafiknet .nav-sub-vertical.nav-menu-narrow button,
.service.trafiknet .nav-sub-vertical li.selected > a {
    background-color: #32c262;
    color: #1a1a1a;
}

.service.playupphandling .treeview .toggle,
.service.playupphandling .nav-sub-vertical.nav-menu-narrow button,
.service.playupphandling .nav-sub-vertical li.selected > a,
.service.upphandlingsnet .treeview .toggle,
.service.upphandlingsnet .nav-sub-vertical.nav-menu-narrow button,
.service.upphandlingsnet .nav-sub-vertical li.selected > a {
    background-color: #4246a6;
    color: #fff;
}

.service.myndighetsbeslut .treeview .toggle,
.service.myndighetsbeslut .nav-sub-vertical.nav-menu-narrow button,
.service.myndighetsbeslut .nav-sub-vertical li.selected > a {
    background-color: #d9a52b;
    color: #1a1a1a;
}

.service.hrnet .treeview .toggle,
.service.hrnet .nav-sub-vertical.nav-menu-narrow button,
.service.hrnet .nav-sub-vertical li.selected > a {
    background-color: #f26fa6;
    color: #1a1a1a;
}

.service.webbkurs-mark-och-miljo .treeview .toggle,
.service.webbkurs-mark-och-miljo .nav-sub-vertical.nav-menu-narrow button,
.service.webbkurs-mark-och-miljo .nav-sub-vertical li.selected > a {
    background-color: #52cc52;
    color: #1a1a1a;
}

.service.webbkurs-skola .treeview .toggle,
.service.webbkurs-skola .nav-sub-vertical.nav-menu-narrow button,
.service.webbkurs-skola .nav-sub-vertical li.selected > a {
    background-color: #d92b2b;
}

.service.webbkurs-social .treeview .toggle,
.service.webbkurs-social .nav-sub-vertical.nav-menu-narrow button,
.service.webbkurs-social .nav-sub-vertical li.selected > a {
    background-color: #b07dd1;
    color: #1a1a1a;
}

.service.webbkurs-upphandling .treeview .toggle,
.service.webbkurs-upphandling .nav-sub-vertical.nav-menu-narrow button,
.service.webbkurs-upphandling .nav-sub-vertical li.selected > a {
    background-color: #4246a6;
}

.service.studentnet-skola .treeview .toggle,
.service.studentnet-skola .nav-sub-vertical.nav-menu-narrow button,
.service.studentnet-skola .nav-sub-vertical li.selected > a {
    background-color: #d92b2b;
}

.service.studentnet-sjukvard .treeview .toggle,
.service.studentnet-sjukvard .nav-sub-vertical.nav-menu-narrow button,
.service.studentnet-sjukvard .nav-sub-vertical li.selected > a {
    background-color: #e58ade;
}

.service.studentnet-social .treeview .toggle,
.service.studentnet-social .nav-sub-vertical.nav-menu-narrow button,
.service.studentnet-social .nav-sub-vertical li.selected > a {
    background-color: #b07dd1;
    color: #1a1a1a;
}

.service.studentnet-arbetsratt .treeview .toggle,
.service.studentnet-arbetsratt .nav-sub-vertical.nav-menu-narrow button,
.service.studentnet-arbetsratt .nav-sub-vertical li.selected > a {
    background-color: #f26f7a;
}

.service.studentnet-migration .treeview .toggle,
.service.studentnet-migration .nav-sub-vertical.nav-menu-narrow button,
.service.studentnet-migration .nav-sub-vertical li.selected > a {
    background-color: #8360bf;
}

.service.studentnet-samhallsbyggnad .treeview .toggle,
.service.studentnet-samhallsbyggnad .nav-sub-vertical.nav-menu-narrow button,
.service.studentnet-samhallsbyggnad .nav-sub-vertical li.selected > a {
    background-color: #39bd39;
}

.service.studentnet-forvaltning .treeview .toggle,
.service.studentnet-forvaltning .nav-sub-vertical.nav-menu-narrow button,
.service.studentnet-forvaltning .nav-sub-vertical li.selected > a {
    background-color: #d9682b;
}

.service.webbkurs-arbetsmiljo .treeview .toggle,
.service.webbkurs-arbetsmiljo .nav-sub-vertical.nav-menu-narrow button,
.service.webbkurs-arbetsmiljo .nav-sub-vertical li.selected > a {
    background-color: #e5738f;
    color: #1a1a1a;
}

.service.hyresnet .treeview .toggle,
.service.hyresnet .nav-sub-vertical.nav-menu-narrow button,
.service.hyresnet .nav-sub-vertical li.selected > a {
    background-color: #9fd92b;
}

.service.kemikalienet .treeview .toggle,
.service.kemikalienet .nav-sub-vertical.nav-menu-narrow button,
.service.kemikalienet .nav-sub-vertical li.selected > a {
    background-color: #6bd149;
}

.service.skadestandsnet .treeview .toggle,
.service.skadestandsnet .nav-sub-vertical.nav-menu-narrow button,
.service.skadestandsnet .nav-sub-vertical li.selected > a {
    background-color: #4ec3e0;
    color: #1a1a1a;
}

.nav-sub-vertical h2.section-name a:hover {
    transition: all 0.2s ease-in-out;
}

.nav-sub-vertical ul {
    margin: 0;
    list-style: none;
}

.nav-sub-vertical li {
    margin: 0;
}

.nav-sub-vertical a {
    display: block;
    position: relative;
    padding: 7px 30px 7px 15px;
    border: 1px solid #e1e1e0;
    text-decoration: none;
    hyphens: auto;
    border-left: none;
    border-top: none;
    border-right: none;
    color: #1a1a1a;
}

.nav-sub-vertical > ul > li:first-child > a {
    border-top: none;
}

.nav-sub-vertical > ul > li:last-child > a {
    border-bottom: 1px solid #e9e8e8;
}

.nav-sub-vertical > ul > li.selected:last-child > a {
    border-bottom: none;
}

.nav-sub-vertical a:focus,
.nav-sub-vertical a:hover {
    background-color: #1a1a1a;
    background-color: rgba(26,26,26,0.2);
}

.default .nav-sub-vertical a:focus,
.default .nav-sub-vertical a:hover,
.default .your-details__link:hover,
.default .your-details__link:focus {
    background-color: #1a1a1a;
    background-color: rgba(26,26,26,0.2);
}

.arbetsmiljonet .nav-sub-vertical a:focus,
.arbetsmiljonet .nav-sub-vertical a:hover,
.arbetsmiljonet .your-details__link:hover,
.arbetsmiljonet .your-details__link:focus {
    background-color: rgb(229,115,143);
    background-color: rgba(229,115,143, 0.2);
}

.playarbetsliv .nav-sub-vertical a:focus,
.playarbetsliv .nav-sub-vertical a:hover,
.playarbetsliv .your-details__link:hover,
.playarbetsliv .your-details__link:focus,
.arbetsrattsnet .nav-sub-vertical a:focus,
.arbetsrattsnet .nav-sub-vertical a:hover,
.arbetsrattsnet .your-details__link:hover,
.arbetsrattsnet .your-details__link:focus {
    background-color: rgb(242,111,122);
    background-color: rgba(242,111,122, 0.2);
}

.straffrattsnet .nav-sub-vertical a:focus,
.straffrattsnet .nav-sub-vertical a:hover,
.straffrattsnet .your-details__link:hover,
.straffrattsnet .your-details__link:focus {
    background-color: rgb(84,196,214);
    background-color: rgba(84,196,214, 0.2);
}

.djurnet .nav-sub-vertical a:focus,
.djurnet .nav-sub-vertical a:hover,
.djurnet .your-details__link:hover,
.djurnet .your-details__link:focus {
    background-color: rgb(208,217,43);
    background-color: rgba(208,217,43, 0.2);
}

.eunet .nav-sub-vertical a:focus,
.eunet .nav-sub-vertical a:hover,
.eunet .your-details__link:hover,
.eunet .your-details__link:focus {
    background-color: rgb(33,158,217);
    background-color: rgba(33,158,217, 0.2);
}

.familjenet .nav-sub-vertical a:focus,
.familjenet .nav-sub-vertical a:hover,
.familjenet .your-details__link:hover,
.familjenet .your-details__link:focus {
    background-color: rgb(105,76,191);
    background-color: rgba(105,76,191, 0.2);
}

.fastighetsnet .nav-sub-vertical a:focus,
.fastighetsnet .nav-sub-vertical a:hover,
.fastighetsnet .your-details__link:hover,
.fastighetsnet .your-details__link:focus {
    background-color: rgb(159,217,43);
    background-color: rgba(159,217,43, 0.2);
}

.foretagarnet .nav-sub-vertical a:focus,
.foretagarnet .nav-sub-vertical a:hover,
.foretagarnet .your-details__link:hover,
.foretagarnet .your-details__link:focus {
    background-color: rgb(217,124,43);
    background-color: rgba(217,124,43, 0.2);
}

.forvaltningsnet .nav-sub-vertical a:focus,
.forvaltningsnet .nav-sub-vertical a:hover,
.forvaltningsnet .your-details__link:hover,
.forvaltningsnet .your-details__link:focus {
    background-color: rgb(217,104,43);
    background-color: rgba(217,104,43, 0.2);
}

.immaterialnet .nav-sub-vertical a:focus,
.immaterialnet .nav-sub-vertical a:hover,
.immaterialnet .your-details__link:hover,
.immaterialnet .your-details__link:focus {
    background-color: rgb(29,118,196);
    background-color: rgba(29,118,196, 0.2);
}

.insolvensnet .nav-sub-vertical a:focus,
.insolvensnet .nav-sub-vertical a:hover,
.insolvensnet .your-details__link:hover,
.insolvensnet .your-details__link:focus {
    background-color: rgb(56,199,127);
    background-color: rgba(56,199,127, 0.2);
}

.playdataskydd .nav-sub-vertical a:focus,
.playdataskydd .nav-sub-vertical a:hover,
.playdataskydd .your-details__link:hover,
.playdataskydd .your-details__link:focus,
.itnet .nav-sub-vertical a:focus,
.itnet .nav-sub-vertical a:hover,
.itnet .your-details__link:hover,
.itnet .your-details__link:focus,
.webbkurs-gdpr .nav-sub-vertical a:focus,
.webbkurs-gdpr .nav-sub-vertical a:hover,
.webbkurs-gdpr .your-details__link:hover,
.webbkurs-gdpr .your-details__link:focus {
    background-color: rgb(50,136,201);
    background-color: rgba(50,136,201, 0.2);
}

.juridiknet .nav-sub-vertical a:focus,
.juridiknet .nav-sub-vertical a:hover,
.juridiknet .your-details__link:hover,
.juridiknet .your-details__link:focus {
    background-color: rgb(27,109,181);
    background-color: rgba(27,109,181, 0.2);
}

.kommentarer .nav-sub-vertical a:focus,
.kommentarer .nav-sub-vertical a:hover,
.kommentarer .your-details__link:hover,
.kommentarer .your-details__link:focus {
    background-color: rgb(43,182,217);
    background-color: rgba(43,182,217, 0.2);
}

.livsmedelsnet .nav-sub-vertical a:focus,
.livsmedelsnet .nav-sub-vertical a:hover,
.livsmedelsnet .your-details__link:hover,
.livsmedelsnet .your-details__link:focus {
    background-color: rgb(107,209,73);
    background-color: rgba(107,209,73, 0.2);
}

.marknadsnet .nav-sub-vertical a:focus,
.marknadsnet .nav-sub-vertical a:hover,
.marknadsnet .your-details__link:hover,
.marknadsnet .your-details__link:focus {
    background-color: rgb(9,101,181);
    background-color: rgba(9,101,181, 0.2);
}

.migrationsnet .nav-sub-vertical a:focus,
.migrationsnet .nav-sub-vertical a:hover,
.migrationsnet .your-details__link:hover,
.migrationsnet .your-details__link:focus {
    background-color: rgb(131,96,191);
    background-color: rgba(131,96,191, 0.2);
}

.playmiljo .nav-sub-vertical a:focus,
.playmiljo .nav-sub-vertical a:hover,
.playmiljo .your-details__link:hover,
.playmiljo .your-details__link:focus,
.miljonet .nav-sub-vertical a:focus,
.miljonet .nav-sub-vertical a:hover,
.miljonet .your-details__link:hover,
.miljonet .your-details__link:focus,
.climatenet .nav-sub-vertical a:focus,
.climatenet .nav-sub-vertical a:hover,
.climatenet .your-details__link:hover,
.climatenet .your-details__link:focus {
    background-color: rgb(82,204,82);
    background-color: rgba(82,204,82, 0.2);
}

.momsnet .nav-sub-vertical a:focus,
.momsnet .nav-sub-vertical a:hover,
.momsnet .your-details__link:hover,
.momsnet .your-details__link:focus {
    background-color: rgb(69,196,158);
    background-color: rgba(69,196,158, 0.2);
}

.polisnet .nav-sub-vertical a:focus,
.polisnet .nav-sub-vertical a:hover,
.polisnet .your-details__link:hover,
.polisnet .your-details__link:focus {
    background-color: rgb(43,168,217);
    background-color: rgba(43,168,217, 0.2);
}

.raddningsnet .nav-sub-vertical a:focus,
.raddningsnet .nav-sub-vertical a:hover,
.raddningsnet .your-details__link:hover,
.raddningsnet .your-details__link:focus,
.playdronare .nav-sub-vertical a:focus,
.playdronare .nav-sub-vertical a:hover,
.playdronare .your-details__link:hover,
.playdronare .your-details__link:focus,
.sakerhetsnet .nav-sub-vertical a:focus,
.sakerhetsnet .nav-sub-vertical a:hover,
.sakerhetsnet .your-details__link:hover,
.sakerhetsnet .your-details__link:focus {
    background-color: rgb(68,194,68);
    background-color: rgba(68,194,68, 0.2);
}

.rattsfallsnet .nav-sub-vertical a:focus,
.rattsfallsnet .nav-sub-vertical a:hover,
.rattsfallsnet .your-details__link:hover,
.rattsfallsnet .your-details__link:focus {
    background-color: rgb(0,92,173);
    background-color: rgba(0,92,173, 0.2);
}

.playsamhallsbyggnad .nav-sub-vertical a:focus,
.playsamhallsbyggnad .nav-sub-vertical a:hover,
.playsamhallsbyggnad .your-details__link:hover,
.playsamhallsbyggnad .your-details__link:focus,
.samhallsbyggnadsnet .nav-sub-vertical a:focus,
.samhallsbyggnadsnet .nav-sub-vertical a:hover,
.samhallsbyggnadsnet .your-details__link:hover,
.samhallsbyggnadsnet .your-details__link:focus {
    background-color: rgb(57,189,57);
    background-color: rgba(57,189,57, 0.2);
}

.serveringstillstandsnet .nav-sub-vertical a:focus,
.serveringstillstandsnet .nav-sub-vertical a:hover,
.serveringstillstandsnet .your-details__link:hover,
.serveringstillstandsnet .your-details__link:focus {
    background-color: rgb(147,105,191);
    background-color: rgba(147,105,191, 0.2);
}

.sjukvardsnet .nav-sub-vertical a:focus,
.sjukvardsnet .nav-sub-vertical a:hover,
.sjukvardsnet .your-details__link:hover,
.sjukvardsnet .your-details__link:focus {
    background-color: rgb(229,138,222);
    background-color: rgba(229,138,222, 0.2);
}

.skattenet .nav-sub-vertical a:focus,
.skattenet .nav-sub-vertical a:hover,
.skattenet .your-details__link:hover,
.skattenet .your-details__link:focus {
    background-color: rgb(68,190,194);
    background-color: rgba(68,190,194, 0.2);
}

.playskola .nav-sub-vertical a:focus,
.playskola .nav-sub-vertical a:hover,
.playskola .your-details__link:hover,
.playskola .your-details__link:focus,
.skolnet .nav-sub-vertical a:focus,
.skolnet .nav-sub-vertical a:hover,
.skolnet .your-details__link:hover,
.skolnet .your-details__link:focus {
    background-color: rgb(217,43,43);
    background-color: rgba(217,43,43, 0.2);
}

.playsocial .nav-sub-vertical a:focus,
.playsocial .nav-sub-vertical a:hover,
.playsocial .your-details__link:hover,
.playsocial .your-details__link:focus,
.socialnet .nav-sub-vertical a:focus,
.socialnet .nav-sub-vertical a:hover,
.socialnet .your-details__link:hover,
.socialnet .your-details__link:focus {
    background-color: rgb(176,125,209);
    background-color: rgba(176,125,209, 0.2);
}

.socialforsakringsnet .nav-sub-vertical a:focus,
.socialforsakringsnet .nav-sub-vertical a:hover,
.socialforsakringsnet .your-details__link:hover,
.socialforsakringsnet .your-details__link:focus {
    background-color: rgb(197,123,212);
    background-color: rgba(197,123,212, 0.2);
}

.trafiknet .nav-sub-vertical a:focus,
.trafiknet .nav-sub-vertical a:hover,
.trafiknet .your-details__link:hover,
.trafiknet .your-details__link:focus {
    background-color: rgb(50,194,98);
    background-color: rgba(50,194,98, 0.2);
}

.playupphandling .nav-sub-vertical a:focus,
.playupphandling .nav-sub-vertical a:hover,
.playupphandling .your-details__link:hover,
.playupphandling .your-details__link:focus,
.upphandlingsnet .nav-sub-vertical a:focus,
.upphandlingsnet .nav-sub-vertical a:hover,
.upphandlingsnet .your-details__link:hover,
.upphandlingsnet .your-details__link:focus {
    background-color: rgb(66,70,166);
    background-color: rgba(66,70,166, 0.2);
}

.myndighetsbeslut .nav-sub-vertical a:focus,
.myndighetsbeslut .nav-sub-vertical a:hover,
.myndighetsbeslut .your-details__link:hover,
.myndighetsbeslut .your-details__link:focus {
    background-color: rgb(217,165,43);
    background-color: rgba(217,165,43, 0.2);
}

.hrnet .nav-sub-vertical a:focus,
.hrnet .nav-sub-vertical a:hover,
.hrnet .your-details__link:hover,
.hrnet .your-details__link:focus {
    background-color: rgb(242,111,166);
    background-color: rgba(242,111,166, 0.2);
}

.webbkurs-mark-och-miljo .nav-sub-vertical a:focus,
.webbkurs-mark-och-miljo .nav-sub-vertical a:hover,
.webbkurs-mark-och-miljo .your-details__link:hover,
.webbkurs-mark-och-miljo .your-details__link:focus {
    background-color: rgb(82,204,82);
    background-color: rgba(82,204,82, 0.2);
}

.webbkurs-skola .nav-sub-vertical a:focus,
.webbkurs-skola .nav-sub-vertical a:hover,
.webbkurs-skola .your-details__link:hover,
.webbkurs-skola .your-details__link:focus {
    background-color: rgb(217,43,43);
    background-color: rgba(217,43,43, 0.2);
}

.webbkurs-social .nav-sub-vertical a:focus,
.webbkurs-social .nav-sub-vertical a:hover,
.webbkurs-social .your-details__link:hover,
.webbkurs-social .your-details__link:focus {
    background-color: rgb(176,125,209);
    background-color: rgba(176,125,209, 0.2);
}

.webbkurs-upphandling .nav-sub-vertical a:focus,
.webbkurs-upphandling .nav-sub-vertical a:hover,
.webbkurs-upphandling .your-details__link:hover,
.webbkurs-upphandling .your-details__link:focus {
    background-color: rgb(66,70,166);
    background-color: rgba(66,70,166, 0.2);
}

.studentnet-skola .nav-sub-vertical a:focus,
.studentnet-skola .nav-sub-vertical a:hover,
.studentnet-skola .your-details__link:hover,
.studentnet-skola .your-details__link:focus {
    background-color: rgb(217,43,43);
    background-color: rgba(217,43,43, 0.2);
}

.studentnet-sjukvard .nav-sub-vertical a:focus,
.studentnet-sjukvard .nav-sub-vertical a:hover,
.studentnet-sjukvard .your-details__link:hover,
.studentnet-sjukvard .your-details__link:focus {
    background-color: rgb(229,138,222);
    background-color: rgba(229,138,222, 0.2);
}

.studentnet-social .nav-sub-vertical a:focus,
.studentnet-social .nav-sub-vertical a:hover,
.studentnet-social .your-details__link:hover,
.studentnet-social .your-details__link:focus {
    background-color: rgb(176,125,209);
    background-color: rgba(176,125,209, 0.2);
}

.studentnet-arbetsratt .nav-sub-vertical a:focus,
.studentnet-arbetsratt .nav-sub-vertical a:hover,
.studentnet-arbetsratt .your-details__link:hover,
.studentnet-arbetsratt .your-details__link:focus {
    background-color: rgb(242,111,122);
    background-color: rgba(242,111,122, 0.2);
}

.studentnet-migration .nav-sub-vertical a:focus,
.studentnet-migration .nav-sub-vertical a:hover,
.studentnet-migration .your-details__link:hover,
.studentnet-migration .your-details__link:focus {
    background-color: rgb(131,96,191);
    background-color: rgba(131,96,191, 0.2);
}

.studentnet-samhallsbyggnad .nav-sub-vertical a:focus,
.studentnet-samhallsbyggnad .nav-sub-vertical a:hover,
.studentnet-samhallsbyggnad .your-details__link:hover,
.studentnet-samhallsbyggnad .your-details__link:focus {
    background-color: rgb(57,189,57);
    background-color: rgba(57,189,57, 0.2);
}

.studentnet-forvaltning .nav-sub-vertical a:focus,
.studentnet-forvaltning .nav-sub-vertical a:hover,
.studentnet-forvaltning .your-details__link:hover,
.studentnet-forvaltning .your-details__link:focus {
    background-color: rgb(217,104,43);
    background-color: rgba(217,104,43, 0.2);
}

.hyresnet .nav-sub-vertical a:focus,
.hyresnet .nav-sub-vertical a:hover,
.hyresnet .your-details__link:hover,
.hyresnet .your-details__link:focus {
    background-color: rgb(159,217,43);
    background-color: rgba(159,217,43, 0.2);
}

.kemikalienet .nav-sub-vertical a:focus,
.kemikalienet .nav-sub-vertical a:hover,
.kemikalienet .your-details__link:hover,
.kemikalienet .your-details__link:focus {
    background-color: rgb(107,209,73);
    background-color: rgba(107,209,73, 0.2);
}

.skadestandsnet .nav-sub-vertical a:focus,
.skadestandsnet .nav-sub-vertical a:hover,
.skadestandsnet .your-details__link:hover,
.skadestandsnet .your-details__link:focus {
    background-color: rgb(78,195,224);
    background-color: rgba(22,107,128, 0.2);
}

.nav-sub-vertical > ul > li > a:hover,
.nav-sub-vertical > ul > li > a:focus {
    transition: all 0.2s ease-in-out;
}

.nav-sub-vertical > ul > li.has-children.expanded > a:hover {
    transition: all 0.2s ease-in-out;
}

.nav-sub-vertical strong {
    font-weight: inherit;
}

.nav-sub-vertical > ul > li.has-children.expanded a,
.nav-sub-vertical > ul > li.has-children.expanded.selected a {
    border-left: none;
}

.nav-sub-vertical li.expanded > a {
    border-bottom: none;
    border-top: none;
    padding: 8px 30px 8px 13px;
}

.nav-sub-vertical > ul > li.has-children.expanded > a,
.nav-sub-vertical > ul > li.selected > a {
    padding-left: 12px;
}

.nav-sub-vertical li.selected > a {
    border-top: none;
    border-left-width: 4px;
    border-left-color: #fff !important;
    color: #fff;
}

.nav-sub-vertical li.selected > a,
.nav-sub-vertical li.has-children.expanded > a,
.nav-sub-vertical li.selected > a {
    font-weight: bold;
}

.nav-sub-vertical li.expanded {
    /*background-color:#f7f6f4;*/
    background-color: #f2f0ee;
}

    .nav-sub-vertical li.expanded:not(.active) {
        background-color: transparent;
    }

    .nav-sub-vertical li.expanded > a {
        background-color: rgb(238,238,238);
    }

    .nav-sub-vertical li.expanded.selected > ul > li:first-child > a,
    .nav-sub-vertical li.selected:not(.expanded) + li > a {
        border-top: none;
    }

.nav-sub-vertical li li a {
    padding-left: 14px;
}
/*.nav-sub-vertical li li li > a {
	padding-left:16px;
}*/
.nav-sub-vertical li li li.selected > a {
    padding-top: 8px;
    padding-bottom: 8px;
}

/*.nav-sub-vertical li li li li > a {
	padding-left:24px;
}
.nav-sub-vertical li li li li li > a {
	padding-left:32px;
}
.nav-sub-vertical li li li li li li > a {
	padding-left:40px;
}*/
/*.nav-sub-vertical li.has-children > a:after,
.nav-sub-vertical li.has-children.expanded > a:after {
	position: absolute;
	top: 13px;
	right: 10px;
	z-index: 1;
	width: 20px;
	height: 20px;
	margin-top: -5px;
	background: url(/static/i/sub-menu-vertical-icons.svg) no-repeat 0 -40px;
	content: "";
}

.default .nav-sub-vertical li.has-children > a:hover:after,
.default .nav-sub-vertical li.has-children.expanded > a:hover:after{
	background-position: 0 -60px;
}

.nav-sub-vertical li.has-children.selected > a:after,
.nav-sub-vertical li.has-children.expanded > a:after {
	background-position: 0 0;
}

.default .nav-sub-vertical li.has-children.selected > a:hover:after,
.default .nav-sub-vertical li.has-children.expanded > a:hover:after {
	background-position: 0 -20px;
}

.nav-sub-vertical li.has-children.expanded.selected > a:after {
	background-position: 0 -200px;
}*/
.nav-sub-vertical li.expanded li.selected:not(.expanded):last-child > a:before {
    position: absolute;
    right: 0;
    bottom: -1px;
    left: -6px;
    z-index: 100;
    height: 1px;
    background: #fff;
    content: "";
    background-position: 0 -200px;
}

.has-nav-sub-vertical .page-meta:first-child + .content-1 + .content-2 {
    padding-top: 2.5em; /* Temporarily make room for the moved nav-sub-vertical */
}

.nav-sub-vertical.nav-menu-narrow button {
    position: relative;
    top: auto;
    right: auto;
    left: auto;
    width: 100%;
    border-radius: 0;
    background: #004b8d;
    text-align: left;
}

.treeview.nav-sub-vertical.nav-menu-narrow button:after {
    height: 36px;
    width: 36px;
    position: absolute;
    content: '';
    top: 2px;
    right: 10px;
    background-image: url(/static/i/menu-s.svg);
    background-repeat: no-repeat;
    background-size: 30px;
    background-position: 2px 3px;
}

.nav-sub-vertical.nav-menu-narrow {
    margin-top: -5px;
}

    .nav-sub-vertical.nav-menu-narrow > ul {
        display: none;
    }

    .nav-sub-vertical.nav-menu-narrow.expanded > ul {
        display: block;
    }

/* Hide the left column if it contained a .nav-sub-vertical */
.content-1.has-nav-sub-vertical {
    display: none;
}

    /* Let the content area expand */
    .content-1.has-nav-sub-vertical + .content-2 {
        float: none;
        width: auto;
    }

@media only screen and (max-width: 767px) {
    .nav-sub-vertical h2.section-name {
        display: none;
        visibility: hidden;
    }
}

/* Treeview
-------------------------------------------------------------- */

.treeview.nav-sub-vertical.nav-menu-narrow {
    max-height: 40px;
    overflow: hidden;
}

    .treeview.nav-sub-vertical.nav-menu-narrow.expanded {
        max-height: none;
    }

.treeview .tree:focus {
    outline: none;
}

.treeview .has-children {
    position: relative;
}

.treeview ul {
    margin: 0;
    list-style: none;
}

.treeview > ul {
    border-right: 1px solid #eee;
    border-left: 1px solid #eee;
}

.treeview ul ul {
    border-left: 8px solid rgba(0, 0, 0, 0.2);
    border-left-color: rgb(238,238,238);
}

.js .treeview > ul ul {
    display: none;
}

.ribbon-container--rounded .ribbon:before,
.ribbon-container--rounded .ribbon:after {
    display: none;
}
/* The toggle button */
.treeview .toggle {
    display: inline-block;
    border: 1px solid transparent;
    border-radius: 2px;
    vertical-align: -1px;
    cursor: pointer;
    position: absolute;
    right: 8px;
    top: 9px;
    height: 24px;
    width: 24px;
    background-color: #fff;
}

.treeview li.selected > .toggle,
.treeview li > a:focus + .toggle,
.treeview li > a:hover + .toggle {
    border: 1px solid #fff;
}

.treeview .toggle,
.treeview .toggle.expanded {
    border-color: #fff;
}

@media only screen and (max-width: 1280px) {
    .treeview .toggle {
        height: 20px;
        width: 20px;
    }
}

/* Use pseudo-elements to create a plus symbol */
.treeview .toggle:after {
    position: absolute;
    background-image: url('/static/i/sub-menu-vertical-icons.svg');
    background-repeat: no-repeat;
    background-position: 0 -60px;
    width: 20px;
    height: 20px;
    border-radius: 1px;
    content: "";
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.8);
    -ms-transform: translate(-50%, -50%) scale(0.8);
    -webkit-transform: translate(-50%, -50%) scale(0.8);
}

@media screen and (min-device-width: 1540px) and (-webkit-min-device-pixel-ratio: 2) and (min-resolution: 192dpi) {
    .treeview .toggle:after {
        height: 21px;
    }
}

.treeview .toggle.expanded:after {
    background-position: 0 -20px;
}

@media screen and (min-device-width: 1540px) and (-webkit-min-device-pixel-ratio: 2) and (min-resolution: 192dpi) {
    .treeview .toggle.expanded:after {
        height: 19px;
        width: 21px;
    }
}

.treeview .node:focus {
    outline: none; /* Hide outline if an unlinked node (folder name) is clicked on */
}

.ribbon-container--rounded .ribbon {
    border-top-left-radius: 6px;
    border-bottom-left-radius: 6px;
}

/* POPUP BUTTON
================================================================================ */
a[data-popup-url] {
    padding-right: 34px;
}

button.popup-opener {
    background: url(/static/i/icons-s.png) -1000px 0 #004b8d no-repeat;
    border-radius: 0;
    display: none;
    height: 24px;
    margin: 0 0 0 -24px;
    overflow: hidden;
    padding: 0;
    text-indent: 120%;
    white-space: nowrap;
    width: 24px;
    -webkit-transition: all 0.162s ease-in-out;
    -moz-transition: all 0.162s ease-in-out;
    transition: all 0.162s ease-in-out;
}

*:hover > button.popup-opener {
    display: inline-block;
}

button.popup-opener:hover {
    background-color: #1a1a1a;
}

/* TOOLBAR
================================================================================ */
#toolbar {
    margin: 0 auto;
    padding: 0 4px 12px;
    width: 985px;
}

    #toolbar ul {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        border-bottom: 1px solid #1a1a1a;
        list-style: none;
        font-size: 0;
        margin: 0 130px 0 0;
        padding: 12px 0 11px;
        flex-wrap: wrap;
    }

@media only screen and (max-width: 768px) {
    #toolbar ul {
        justify-content: flex-start;
        gap: 5px;
    }
}

#toolbar li {
    display: flex;
    align-items: center;
}

    #toolbar li + li {
        margin-left: 15px;
    }

#toolbar .add-jp-ai a svg path {
    stroke: #1a1a1a !important;
}

#toolbar .add-jp-ai a {
    padding-left: 0;
}

    #toolbar .add-jp-ai a::before {
        content: "";
        display: none;
    }

#toolbar li.add-fav,
#toolbar li.newsletter {
    float: left;
}

#toolbar li.newsletter {
    margin-left: 15px;
}

#toolbar a,
#toolbar button {
    font-family: 'Myriad W01 Regular', sans-serif;
    text-decoration: underline !important;
    text-transform: none;
    display: inline-flex;
    align-items: center;
    font-size: 16px !important;
    height: 24px;
    width: auto;
    padding-left: 30px;
    padding-right: 0;
    position: relative;
    text-indent: 0;
    border: none;
    cursor: pointer;
    background-color: transparent;
    text-decoration: none;
    color: #1a1a1a !important;
}

    #toolbar button:hover,
    #toolbar button:focus,
    #toolbar button:active {
        box-shadow: none;
    }

    #toolbar a::before,
    #toolbar button::before {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        width: 24px;
        height: 24px;
        background-color: #1a1a1a;
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
        mask-position: center;
        mask-size: contain;
    }

#toolbar li.add-fav a::before {
    -webkit-mask-image: url(/static/i/add-favourite.svg);
    mask-image: url(/static/i/add-favourite.svg);
}

#toolbar li.remove-fav a::before {
    -webkit-mask-image: url(/static/i/favourite-remove.svg);
    mask-image: url(/static/i/favourite-remove.svg);
}

#toolbar li.share button::before {
    -webkit-mask-image: url(/static/i/share-icon.svg);
    mask-image: url(/static/i/share-icon.svg);
}

#toolbar li.print button::before {
    -webkit-mask-image: url(/static/i/print-icon.svg);
    mask-image: url(/static/i/print-icon.svg);
}

#toolbar li.help button::before {
    -webkit-mask-image: url(/static/i/help-icon.svg);
    mask-image: url(/static/i/help-icon.svg);
}

#toolbar li.newsletter a::before {
    -webkit-mask-image: url(/static/i/mail-plus.svg);
    mask-image: url(/static/i/mail-plus.svg);
}

#toolbar li.edit-doc a::before {
    -webkit-mask-image: url(/static/i/edit-pencil.svg);
    mask-image: url(/static/i/edit-pencil.svg);
}

#toolbar li.link-doc a::before {
    -webkit-mask-image: url(/static/i/link.svg);
    mask-image: url(/static/i/link.svg);
}

#toolbar li.pub-page a::before {
    -webkit-mask-image: url(/static/i/folder-add.svg);
    mask-image: url(/static/i/folder-add.svg);
}

#toolbar li.unpub-doc a::before {
    -webkit-mask-image: url(/static/i/folder-remove.svg);
    mask-image: url(/static/i/folder-remove.svg);
}

#toolbar li.cat-doc a::before {
    -webkit-mask-image: url(/static/i/file-check.svg);
    mask-image: url(/static/i/file-check.svg);
}

#toolbar li.comments a::before {
    -webkit-mask-image: url(/static/i/comment-icon.svg);
    mask-image: url(/static/i/comment-icon.svg);
}

#toolbar li.comments a::before {
    position: relative;
    margin-right: 5px;
}

#toolbar li.comments a {
    padding: 0;
}

#toolbar li.comments .comment-number {
    top: -8px;
    left: 10px;
    background-color: red;
    position: absolute;
    width: 16px;
    height: 16px;
    padding: 1px;
    border-radius: 50%;
    border: 1px solid white;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 12px;
}

#toolbar .comments-number button {
    background-position: -1590px -100px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-indent: 0;
    color: #fff;
}

    #toolbar .comments-number button span:first-child {
        font-size: 14px;
        line-height: 1;
        margin-bottom: 4px;
        text-align: center;
        display: block;
    }

#toolbar .visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

@media only screen and (min-width: 1280px) {
    #toolbar {
        padding: 0 5px 14px;
        width: 1215px;
    }

        #toolbar ul {
            margin: 0 157px 0 0;
            padding: 14px 0 13px;
        }
}

@media only screen and (max-width: 1023px) {
    #toolbar {
        width: 685px;
    }
}

@media only screen and (max-width: 767px) {
    #toolbar {
        max-width: 420px;
        padding-left: 20px;
        padding-right: 20px;
        width: auto;
        margin-top: 10px;
    }

        #toolbar ul {
            margin-right: 0;
        }
}

/* FAVORITES
================================================================================ */
.content-1.favorites {
    width: 100%;
}

.favorites-header h2:before {
    content: " ";
    display: inline-block;
    vertical-align: text-bottom;
    height: 23px;
    width: 24px;
    margin-right: 10px;
    background: url(/static/i/icons-s.png) #004b8d no-repeat -200px -1px;
}

.nav-supp .my-favorites svg {
    vertical-align: text-bottom;
}

/* SEARCH NAV
================================================================================ */
#search-nav {
    left: 4px;
    padding-top: 12px;
    position: absolute;
    top: 0;
}

    #search-nav .hit-count {
        background: url(/static/i/icons-xs.png) -200px -596px no-repeat;
        float: left;
        margin: 0;
        min-width: 70px;
        padding-left: 24px;
    }

.svg #search-nav .hit-count {
    background-image: url(/static/i/icons-xs.svg);
}

#search-nav .hit-nav {
    float: left;
    margin: 0;
}

    #search-nav .hit-nav a.prev {
        background-position: -800px 0;
        margin-right: 10px;
    }

    #search-nav .hit-nav a.next {
        background-position: -900px 0;
    }

    #search-nav .hit-nav a.disabled,
    #search-nav .hit-nav a.disabled:hover,
    #search-nav .hit-nav a.disabled:active,
    #search-nav .hit-nav a.disabled:focus {
        background-color: #b3b3b3;
    }

@media only screen and (min-width: 1280px) {
    #search-nav {
        left: 5px;
        padding-top: 14px;
    }

        #search-nav .hit-count {
            background-position: -200px -594px;
            min-width: 80px;
            padding-left: 28px;
        }

        #search-nav .hit-nav a {
            margin-top: 2px;
        }
}

@media only screen and (max-width: 767px) {
    #search-nav {
        left: 20px;
    }
}

/* EMPTY MESSAGE
================================================================================ */
.empty-message {
    text-align: center;
}

    .empty-message h3,
    .m-list-grouped .m-c .empty-message h3,
    .empty-message p {
        max-width: 360px;
    }

    .empty-message h3,
    .m-list-grouped .m-c .empty-message h3 {
        font-size: 28px;
        line-height: 34px;
        margin-bottom: 10px;
        max-width: 480px;
        color: #808080;
        font-family: "Myriad W01 It", sans-serif;
    }

    .empty-message h3 {
        margin: 0 auto 10px;
    }

    .empty-message p {
        margin: 0 auto 60px;
    }

    .empty-message .add-to-favorites {
        content: " ";
        display: block;
        width: 25px;
        height: 25px;
        text-indent: -9999px;
        background: transparent url(/static/i/icons-s.png) no-repeat -700px -199px;
        margin: 15px auto;
    }

.svg .empty-message .add-to-favorites {
    background-image: url(/static/i/icons-s.svg);
}

.empty-message h4 {
    font-size: 22px;
    line-height: 28px;
    max-width: 480px;
    color: #808080;
    font-family: 'Myriad W01 It', sans-serif;
    text-align: left;
}

/* SEARCH
================================================================================ */
/* Main search form
-------------------------------------------------------------- */
#search {
    float: left;
    margin-left: 35px;
    padding-top: 24px;
}

    #search input[type="search"] {
        float: left;
        font-size: 24px;
        height: 36px;
        padding: 7px 10px 5px;
        width: 225px;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        -webkit-transition: width 0.162s ease-in-out 0.2s;
        -moz-transition: width 0.162s ease-in-out 0.2s;
        transition: width 0.162s ease-in-out 0.2s;
    }

        #search input[type="search"]:focus {
            width: 405px;
        }

    #search input[type="submit"],
    #main-search input[type="submit"] {
        float: left;
        height: 36px;
        line-height: 36px;
        margin-left: 10px;
        padding: 0;
        text-align: center;
        width: 70px;
    }

#main-search input[type="submit"] {
    float: right;
    margin-left: 0;
}

.arbetsmiljonet #search input[type="submit"],
.arbetsmiljonet #main-search input[type="submit"] {
    background: #e5738f;
    color: #1a1a1a;
}

.arbetsrattsnet #search input[type="submit"],
.arbetsrattsnet #main-search input[type="submit"],
.playarbetsliv #search input[type="submit"],
.playarbetsliv #main-search input[type="submit"] {
    background: #f26f7a;
    color: #1a1a1a;
}

.straffrattsnet #search input[type="submit"],
.straffrattsnet #main-search input[type="submit"] {
    background: #54c4d6;
    color: #1a1a1a;
}

.djurnet #search input[type="submit"],
.djurnet #main-search input[type="submit"] {
    background: #d0d92b;
    color: #1a1a1a;
}

.eunet #search input[type="submit"],
.eunet #main-search input[type="submit"] {
    background: #219ed9;
    color: #1a1a1a;
}

.familjenet #search input[type="submit"],
.familjenet #main-search input[type="submit"] {
    background: #694cbf;
}

.fastighetsnet #search input[type="submit"],
.fastighetsnet #main-search input[type="submit"] {
    background: #9fd92b;
    color: #1a1a1a;
}

.foretagarnet #search input[type="submit"],
.foretagarnet #main-search input[type="submit"] {
    background: #d97c2b;
    color: #1a1a1a;
}

.forvaltningsnet #search input[type="submit"],
.forvaltningsnet #main-search input[type="submit"] {
    background: #d9682b;
    color: #1a1a1a;
}

.immaterialnet #search input[type="submit"],
.immaterialnet #main-search input[type="submit"] {
    background: #1d76c4;
}

.insolvensnet #search input[type="submit"],
.insolvensnet #main-search input[type="submit"] {
    background: #38c77f;
    color: #1a1a1a;
}

.playdataskydd #search input[type="submit"],
.playdataskydd #main-search input[type="submit"],
.itnet #search input[type="submit"],
.itnet #main-search input[type="submit"],
.webbkurs-gdpr #search input[type="submit"],
.webbkurs-gdpr #main-search input[type="submit"] {
    background: #3288c9;
    color: #1a1a1a;
}

.juridiknet #search input[type="submit"],
.juridiknet #main-search input[type="submit"] {
    background: #1b6db5;
}

.kommentarer #search input[type="submit"],
.kommentarer #main-search input[type="submit"] {
    background: #2bb6d9;
    color: #1a1a1a;
}

.livsmedelsnet #search input[type="submit"],
.livsmedelsnet #main-search input[type="submit"] {
    background: #6bd149;
    color: #1a1a1a;
}

.marknadsnet #search input[type="submit"],
.marknadsnet #main-search input[type="submit"] {
    background: #0965b5;
}

.migrationsnet #search input[type="submit"],
.migrationsnet #main-search input[type="submit"] {
    background: #8360bf;
}

.playmiljo #search input[type="submit"],
.playmiljo #main-search input[type="submit"],
.miljonet #search input[type="submit"],
.miljonet #main-search input[type="submit"],
.climatenet #search input[type="submit"],
.climatenet #main-search input[type="submit"] {
    background: #52cc52;
    color: #1a1a1a;
}

.momsnet #search input[type="submit"],
.momsnet #main-search input[type="submit"] {
    background: #45c49e;
    color: #1a1a1a;
}

.polisnet #search input[type="submit"],
.polisnet #main-search input[type="submit"] {
    background: #2ba8d9;
    color: #1a1a1a;
}

.raddningsnet #search input[type="submit"],
.raddningsnet #main-search input[type="submit"],
.playdronare #search input[type="submit"],
.playdronare #main-search input[type="submit"],
.sakerhetsnet #search input[type="submit"],
.sakerhetsnet #main-search input[type="submit"] {
    background: #44c244;
    color: #1a1a1a;
}

.rattsfallsnet #search input[type="submit"],
.rattsfallsnet #main-search input[type="submit"] {
    background: #005cad;
}

.playsamhallsbyggnad #search input[type="submit"],
.playsamhallsbyggnad #main-search input[type="submit"],
.samhallsbyggnadsnet #search input[type="submit"],
.samhallsbyggnadsnet #main-search input[type="submit"] {
    background: #39bd39;
    color: #1a1a1a;
}

.serveringstillstandsnet #search input[type="submit"],
.serveringstillstandsnet #main-search input[type="submit"] {
    background: #9369bf;
}

.sjukvardsnet #search input[type="submit"],
.sjukvardsnet #main-search input[type="submit"] {
    background: #e58ade;
    color: #1a1a1a;
}

.skattenet #search input[type="submit"],
.skattenet #main-search input[type="submit"] {
    background: #44bec2;
    color: #1a1a1a;
}

.playskola #search input[type="submit"],
.playskola #main-search input[type="submit"],
.skolnet #search input[type="submit"],
.skolnet #main-search input[type="submit"] {
    background: #d92b2b;
}

.playsocial #search input[type="submit"],
.playsocial #main-search input[type="submit"],
.socialnet #search input[type="submit"],
.socialnet #main-search input[type="submit"] {
    background: #b07dd1;
    color: #1a1a1a;
}

.socialforsakringsnet #search input[type=submit],
.socialforsakringsnet #main-search input[type=submit] {
    background: #c57bd4;
    color: #1a1a1a;
}

.trafiknet #search input[type=submit],
.trafiknet #main-search input[type=submit] {
    background: #32c262;
    color: #1a1a1a;
}

playupphandling #search input[type="submit"],
playupphandling #main-search input[type="submit"],
.upphandlingsnet #search input[type="submit"],
.upphandlingsnet #main-search input[type="submit"] {
    background: #4246a6;
}

.myndighetsbeslut #search input[type="submit"],
.myndighetsbeslut #main-search input[type="submit"] {
    background: #d9a52b;
}

.lagboken #search input[type="submit"],
.lagboken #main-search input[type="submit"] {
    background: #005cad;
}

.hrnet #search input[type="submit"],
.hrnet #main-search input[type="submit"] {
    background: #f26fa6;
}

.webbkurs-mark-och-miljo #search input[type="submit"],
.webbkurs-mark-och-miljo #main-search input[type="submit"] {
    background: #52cc52;
}

.webbkurs-skola #search input[type="submit"],
.webbkurs-skola #main-search input[type="submit"] {
    background: #d92b2b;
}

.webbkurs-social #search input[type="submit"],
.webbkurs-social #main-search input[type="submit"] {
    background: #b07dd1;
}

.webbkurs-upphandling #search input[type="submit"],
.webbkurs-upphandling #main-search input[type="submit"] {
    background: #4246a6;
}

.studentnet-skola #search input[type="submit"],
.studentnet-skola #main-search input[type="submit"] {
    background: #d92b2b;
}

.studentnet-sjukvard #search input[type="submit"],
.studentnet-sjukvard #main-search input[type="submit"] {
    background: #e58ade;
}

.studentnet-social #search input[type="submit"],
.studentnet-social #main-search input[type="submit"] {
    background: #b07dd1;
}

.studentnet-arbetsratt #search input[type="submit"],
.studentnet-arbetsratt #main-search input[type="submit"] {
    background: #f26f7a;
}

.studentnet-migration #search input[type="submit"],
.studentnet-migration #main-search input[type="submit"] {
    background: #8360bf;
}

.studentnet-samhallsbyggnad #search input[type="submit"],
.studentnet-samhallsbyggnad #main-search input[type="submit"] {
    background: #39bd39;
}

.studentnet-forvaltning #search input[type="submit"],
.studentnet-forvaltning #main-search input[type="submit"] {
    background: #d9682b;
}

.hyresnet #search input[type="submit"],
.hyresnet #main-search input[type="submit"] {
    background: #9fd92b;
}

.kemikalienet #search input[type="submit"],
.kemikalienet #main-search input[type="submit"] {
    background: #6bd149;
}

@media only screen and (min-width: 1280px) {
    #search {
        margin-left: 45px;
        padding-top: 28px;
    }

        #search input[type="search"] {
            height: 42px;
            width: 280px;
        }

            #search input[type="search"]:focus {
                width: 490px;
            }

        #search input[type="submit"],
        #main-search input[type="submit"] {
            height: 42px;
            line-height: 42px;
            margin-left: 20px;
            width: 75px;
        }

    #main-search input[type="submit"] {
        margin-left: 0;
    }
}

@media only screen and (max-width: 1023px) {
    #search {
        bottom: 0;
        float: none;
        left: 20%;
        margin-left: 0;
        padding: 12px 0;
        position: absolute;
        right: 20%;
        z-index: 4;
    }

    .sticky-header.service #search {
        bottom: auto;
        position: fixed;
        top: 0;
    }

    #search input[type="search"],
    #search input[type="submit"] {
        display: inline-block;
        float: none;
        vertical-align: top;
    }

        #search input[type="search"],
        #search input[type="search"]:focus {
            width: 252px;
        }
}

@media only screen and (max-width: 767px) {
    #search {
        font-size: 0;
        left: 50%;
        margin-left: -100px;
        padding: 6px 0;
        right: auto;
        text-align: right;
        width: 310px;
    }

        #search input[type="search"],
        #search input[type="search"]:focus {
            font-size: 20px;
            height: 30px;
            width: 240px;
        }

        #search input[type="submit"],
        #main-search input[type="submit"] {
            font-size: 16px;
            height: 30px;
            line-height: 30px;
            width: 60px;
        }
}

@media only screen and (max-width: 479px) {
    #search {
        left: auto;
        margin-left: 0;
        right: 20px;
        width: auto;
    }

        #search input[type="search"],
        #search input[type="search"]:focus {
            width: 160px;
        }
}

/* Search results
-------------------------------------------------------------- */
#main-search {
    margin-bottom: 36px;
}

    #main-search input[type="search"] {
        float: left;
        font-size: 24px;
        height: 36px;
        padding: 6px 10px 4px;
        width: 565px;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }

.m-results mark {
    background: none;
    font-family: "Myriad W01 Bd", sans-serif;
    text-decoration: inherit;
    vertical-align: top;
}

.search-result-item {
    border-bottom: 2px solid #CCCCCC;
    padding-bottom: 20px;
    margin-bottom: 20px;
}

    .search-result-item:last-child {
        border-bottom: none;
        margin-bottom: 0;
        padding-bottom: 0;
    }

.search-result-item-title {
    font-size: 19px !important;
}

.search-result-item-description {
    color: #1A1A1A;
    font-size: 19px;
    line-height: 24px;
    margin-top: 8px !important;
    margin-bottom: 8px !important;
}

.search-result-item-breadcrumb-list {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: 16px;
}

    .search-result-item-breadcrumb-list li:not(:last-child)::after {
        content: "/";
        padding: 0 0.5em;
        color: #666;
    }

    .search-result-item-breadcrumb-list li {
        display: inline;
        margin-bottom: 0 !important;
        gap: 5px;
    }

.search-result-item-link:hover,
.search-result-item-link:focus {
    color: #0044BB;
}

.search-result-item-link {
    display: flex;
    align-items: center;
    margin: 0 !important;
    gap: 5px;
    color: #0044BB;
    text-decoration: underline;
}

    .search-result-item-link.is-added {
        text-decoration: none;
        pointer-events: none;
        cursor: default;
    }

.search-result-item-icon {
    display: flex;
    align-items: center;
}

    .search-result-item-icon svg {
        fill: transparent !important;
        width: 24px;
        height: 24px;
    }

        .search-result-item-icon svg path {
            stroke: #0044BB !important;
        }

.breadcrum-current-page {
    color: #1a1a1a;
}

.m-results .m-c {
    padding-top: 0;
}

.split-list .m-results .m-c {
    padding-top: 12px;
}

.search-sort {
    float: left;
}

.m-h .search-sort {
    margin: 0;
}

.search-sort a {
    color: #1a1a1a;
    display: inline-block;
    padding: 0 5px;
}

    .search-sort a:first-child {
        margin-left: 3px;
    }

    .search-sort a[data-selected] {
        background: #004b8d;
        border-radius: 2px;
        color: #fff;
        text-decoration: none;
    }

.arbetsmiljonet .search-sort a[data-selected] {
    background: #e5738f;
    color: #1a1a1a;
}

.playarbetsliv .search-sort a[data-selected],
.arbetsrattsnet .search-sort a[data-selected] {
    background: #f26f7a;
    color: #1a1a1a;
}

.straffrattsnet .search-sort a[data-selected] {
    background: #54c4d6;
    color: #1a1a1a;
}

.djurnet .search-sort a[data-selected] {
    background: #d0d92b;
    color: #1a1a1a;
}

.eunet .search-sort a[data-selected] {
    background: #219ed9;
    color: #1a1a1a;
}

.familjenet .search-sort a[data-selected] {
    background: #694cbf;
}

.fastighetsnet .search-sort a[data-selected] {
    background: #9fd92b;
    color: #1a1a1a;
}

.foretagarnet .search-sort a[data-selected] {
    background: #d97c2b;
    color: #1a1a1a;
}

.forvaltningsnet .search-sort a[data-selected] {
    background: #d9682b;
    color: #1a1a1a;
}

.immaterialnet .search-sort a[data-selected] {
    background: #1d76c4;
}

.insolvensnet .search-sort a[data-selected] {
    background: #38c77f;
    color: #1a1a1a;
}

.playdataskydd .search-sort a[data-selected],
.itnet .search-sort a[data-selected],
.webbkurs-gdpr .search-sort a[data-selected] {
    background: #3288c9;
    color: #1a1a1a;
}

.juridiknet .search-sort a[data-selected] {
    background: #1b6db5;
}

.kommentarer .search-sort a[data-selected] {
    background: #2bb6d9;
    color: #1a1a1a;
}

.livsmedelsnet .search-sort a[data-selected] {
    background: #6bd149;
    color: #1a1a1a;
}

.marknadsnet .search-sort a[data-selected] {
    background: #0965b5;
}

.migrationsnet .search-sort a[data-selected] {
    background: #8360bf;
}

.playmiljo .search-sort a[data-selected],
.miljonet .search-sort a[data-selected],
.climatenet .search-sort a[data-selected] {
    background: #52cc52;
    color: #1a1a1a;
}

.momsnet .search-sort a[data-selected] {
    background: #45c49e;
    color: #1a1a1a;
}

.polisnet .search-sort a[data-selected] {
    background: #2ba8d9;
    color: #1a1a1a;
}

.raddningsnet .search-sort a[data-selected],
.playdronare .search-sort a[data-selected],
.sakerhetsnet .search-sort a[data-selected] {
    background: #44c244;
    color: #1a1a1a;
}

.rattsfallsnet .search-sort a[data-selected] {
    background: #005cad;
}

.playsamhallsbyggnad .search-sort a[data-selected],
.samhallsbyggnadsnet .search-sort a[data-selected] {
    background: #39bd39;
    color: #1a1a1a;
}

.serveringstillstandsnet .search-sort a[data-selected] {
    background: #9369bf;
}

.sjukvardsnet .search-sort a[data-selected] {
    background: #e58ade;
    color: #1a1a1a;
}

.skattenet .search-sort a[data-selected] {
    background: #44bec2;
    color: #1a1a1a;
}

.playskola .search-sort a[data-selected],
.skolnet .search-sort a[data-selected] {
    background: #d92b2b;
}

.playsocial .search-sort a[data-selected],
.socialnet .search-sort a[data-selected] {
    background: #b07dd1;
    color: #1a1a1a;
}

.socialforsakringsnet .search-sort a[data-selected] {
    background: #c57bd4;
    color: #1a1a1a;
}

.trafiknet .search-sort a[data-selected] {
    background: #32c262;
    color: #1a1a1a;
}

.playupphandling .search-sort a[data-selected],
.upphandlingsnet .search-sort a[data-selected] {
    background: #4246a6;
}

.myndighetsbeslut .search-sort a[data-selected] {
    background: #d9a52b;
}

.lagboken .search-sort a[data-selected] {
    background: #005cad;
}

.hrnet .search-sort a[data-selected] {
    background: #f26fa6;
}

.webbkurs-mark-och-miljo .search-sort a[data-selected] {
    background: #52cc52;
}

.webbkurs-skola .search-sort a[data-selected] {
    background: #d92b2b;
}

.webbkurs-social .search-sort a[data-selected] {
    background: #b07dd1;
}

.webbkurs-upphandling .search-sort a[data-selected] {
    background: #4246a6;
}

.studentnet-skola .search-sort a[data-selected] {
    background: #d92b2b;
}

.studentnet-sjukvard .search-sort a[data-selected] {
    background: #e58ade;
}

.studentnet-social .search-sort a[data-selected] {
    background: #b07dd1;
}

.studentnet-arbetsratt .search-sort a[data-selected] {
    background: #f26f7a;
}

.studentnet-migration .search-sort a[data-selected] {
    background: #8360bf;
}

.studentnet-samhallsbyggnad .search-sort a[data-selected] {
    background: #39bd39;
}

.studentnet-forvaltning .search-sort a[data-selected] {
    background: #d9682b;
}

.studentnet-forvaltning .search-sort a[data-selected] {
    background: #9fd92b;
}

.m-results .m-h .hits,
.m-results .m-c .hits {
    color: #808080;
    float: right;
    font-family: "Myriad W01 It", sans-serif;
    margin: 0;
}

.m-results .m-c ul {
    clear: both;
    list-style: none;
    padding-left: 0;
    margin-bottom: 12px;
    padding-top: 24px;
}

.m-results li + li {
    margin-top: 24px;
}

.m-results li h3 {
    font-size: 24px;
}

.m-results li p {
    margin: 0;
}

.m-results p.meta * {
    color: #808080;
}

.m-results p.meta time {
    display: inline;
}

.m-results .toggler {
    display: block;
    margin: 24px 0 -12px;
}

@media only screen and (min-width: 1280px) {
    #main-search {
        margin-bottom: 42px;
    }

        #main-search input[type="search"] {
            font-size: 28px;
            height: 42px;
            padding: 7px 10px 5px;
            width: 700px;
        }

    .split-list .m-results .m-c {
        padding-top: 14px;
    }

    .m-results .m-c ul {
        margin-bottom: 14px;
        padding-top: 28px;
    }

    .m-results li + li {
        margin-top: 28px;
    }

    .m-results li h3 {
        font-size: 28px;
    }

    .m-results .toggler {
        margin: 28px 0 -14px;
    }
}

@media only screen and (max-width: 1023px) {
    #main-search input[type="search"] {
        width: 335px;
    }
}

@media only screen and (max-width: 767px) {
    #main-search input[type="search"] {
        font-size: 20px;
        height: 30px;
        width: 290px;
        width: calc(100% - 70px);
    }
}

/* BREADCRUMBS
================================================================================ */
#breadcrumbs {
    font-family: "Myriad W01 It", sans-serif;
    margin: 0 auto;
    padding: 0 4px 12px;
    width: 985px;
}

    #breadcrumbs a {
        margin-right: 8px;
        text-decoration: none;
    }

    #breadcrumbs span {
        display: inline-block;
    }

        #breadcrumbs span:after {
            content: "\00A0\00A0";
        }


.layout-10 #breadcrumbs.public {
    position: relative;
    bottom: -70px;
}

#breadcrumbs.public {
    padding: 0 0 10px 0;
    max-width: none;
    width: auto;
}

@media only screen and (min-width: 1024px) {
    #breadcrumbs.public {
        padding-bottom: 20px;
        margin-top: -10px;
    }
}

@media only screen and (min-width: 1280px) {
    #breadcrumbs,
    .popup #breadcrumbs {
        padding: 0 5px 14px;
        width: 1215px;
    }
}

@media only screen and (max-width: 1023px) {
    #breadcrumbs {
        width: 685px;
    }
}

@media only screen and (max-width: 767px) {
    #breadcrumbs,
    .popup #breadcrumbs {
        max-width: 420px;
        padding: 0 20px 12px;
        width: auto;
    }

    .layout-10 #breadcrumbs.public {
        position: relative;
        bottom: -70px;
    }
}

#breadcrumbs.widthless {
    width: auto;
    margin: initial;
    padding: 0;
    max-width: none;
}
/* ADDRESS
================================================================================ */
#address {
    float: left;
}

    #address .more {
        margin-top: 24px;
    }

    #address a {
        color: #fff;
    }

@media only screen and (min-width: 1280px) {
    #address .more {
        margin-top: 28px;
    }
}

/* Microformats
-------------------------------------------------------------- */
.vcard .street-address:after {
    content: ", ";
}

.vcard .postal-code:before {
    display: block;
    clear: left;
    height: 0;
    visibility: hidden;
    content: " ";
    font-size: 0;
}

/* CONTENT STYLING
================================================================================ */
/* Intro
-------------------------------------------------------------- */
.intro p {
    font-family: 'Myriad W01 Bd', sans-serif;
}

/* Custom select
-------------------------------------------------------------- */
/* Wrapper element to enable positioning */
.custom-select-container {
    position: relative;
}

.m-filter .custom-select-container + label + .custom-select-container {
    margin-top: 24px;
}
/*
 * Set the height of the select element to match the replacing span element
 * and make it transparent.
 */
select.custom.replaced {
    border: 0;
    display: block;
    filter: alpha(opacity=0);
    height: 36px;
    line-height: 36px;
    opacity: 0;
    position: relative;
    width: 100%;
    z-index: 10;
}
/* The span elements that are inserted underneath the real select */
.custom-select {
    display: block;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 1;
}

    .custom-select > span {
        background: url(/static/i/select.png) #fff 100% 50% no-repeat;
        border: 1px solid #1a1a1a;
        border-radius: 2px;
        display: block;
        line-height: 36px;
        opacity: 1;
        padding: 0 42px 0 9px;
        position: relative;
        -webkit-transition: all .162s ease-in-out;
        -moz-transition: all .162s ease-in-out;
        transition: all .162s ease-in-out;
    }

.svg .custom-select > span {
    background-image: url(/static/i/select.svg);
}

.custom-select span span {
    display: block;
    height: 34px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.custom-select.active > span {
    border-color: #004b8d;
    opacity: 0.9;
}

/* Disabled select */
select[disabled].custom.replaced + .custom-select {
    background-color: rgb(235, 235, 228);
}

    select[disabled].custom.replaced + .custom-select > span {
        opacity: 0.6;
    }

@media only screen and (min-width: 1280px) {
    .m-filter .custom-select-container + label + .custom-select-container {
        margin-top: 28px;
    }

    select.custom.replaced {
        height: 42px;
        line-height: 42px;
    }

    .custom-select > span {
        background-image: url(/static/i/select-l.png);
        line-height: 42px;
        padding: 0 42px 0 9px;
    }

    .svg .custom-select > span {
        background-image: url(/static/i/select-l.svg);
    }

    .custom-select span span {
        height: 40px;
    }
}

/* LISTS
================================================================================ */

/* Files
-------------------------------------------------------------- */
/* Generic files */
a.file {
    padding: 0 0 0 24px;
    background: url(/static/i/icons-xs.png) 2px -397px no-repeat;
    display: block;
}

.svg a.file {
    background-image: url(/static/i/icons-xs.svg);
}

h1 + a.file {
    margin: -36px 0 36px;
}
/* PDF */
a.pdf {
    background-position: 2px -497px;
}

@media only screen and (min-width: 1280px) {
    a.file {
        background-position: 2px -395px;
    }

    a.pdf {
        background-position: 2px -495px;
    }
}

@media only screen and (max-width: 767px) {
    h1 + a.file {
        margin-top: -30px;
    }
}

/* COPYRIGHT
================================================================================ */
#copyright {
    font-family: 'Myriad W01 It', sans-serif;
}

/* CUSTOM OVERRIDES AND STYLING
================================================================================ */

@media only screen and (max-width: 1023px) {
    .nav-supp ul li[data-content="services-box"] a,
    .nav-supp ul li[data-content="login-box"] a,
    .nav-supp .login-toggle-button button {
        background-image: url(/static/i/icons-s.svg);
        background-repeat: no-repeat;
        overflow: hidden;
        text-indent: 300%;
        white-space: nowrap;
        width: 24px;
        min-height: 40px;
        margin-top: 3px;
    }

    .nav-supp[class][class] ul li[data-content="login-box"] a,
    .nav-supp[class][class] .login-toggle-button button {
        background-image: url("/static/i/key.svg");
        background-size: cover;
        min-height: auto;
        width: 22px;
        height: 22px;
        padding: 0;
        margin-top: 10px;
        margin-right: 30px;
    }

    body:not(.service) .nav-supp ul li[data-content="services-box"] a,
    body:not(.service) .nav-supp ul li[data-content="login-box"] a,
    body:not(.service) .nav-supp .login-toggle-button button {
        margin-top: 12px;
    }

    .nav-supp ul li[data-content="services-box"] a {
        background-position: -1094px -95px;
    }

    .sticky-header .nav-main {
        z-index: 900;
        margin: auto;
        padding: 0;
    }

    #service .sticky-header .nav-main {
        height: 60px;
    }

    .sticky-header .nav-main::before {
        position: absolute;
        content: "";
        width: 100vw;
        height: 100%;
        top: 0;
        left: 50%;
        -webkit-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
        transform: translateX(-50%);
    }

    .service.sticky-header .nav-main::before {
        background-color: #004b8d;
    }

    .sticky-header .nav-main::before {
        background-color: #004b8d;
    }

    .layout-4 .content-1 table {
        width: auto;
    }
}

/* Layout-8 (jpinfonet.se)
 * Narrow left
 * Wide content right
-------------------------------------------------------------- */
.layout-8 .content-1 {
    float: left;
    width: 220px;
}

.layout-8 .content-2 {
    float: right;
    width: 730px;
}

@media only screen and (min-width: 1280px) {
    .layout-8 .content-1 {
        width: 270px;
    }

    .layout-8 .content-2 {
        width: 900px;
    }
}

@media only screen and (max-width: 1023px) {
    .layout-8 .content-1 {
        float: none;
        width: auto;
    }

    .layout-8 .content-2 {
        float: none;
        width: auto;
    }
}

/* Document count
-------------------------------------------------------------- */
div.count-info {
    background: #1a1a1a;
    border-radius: 2px;
    color: #fff;
    padding: 0 15px;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
}

    div.count-info h1 {
        font: 32px/24px "Myriad W01 Bd", sans-serif;
        padding: 14px 0 12px 0;
        margin: 0;
    }

    div.count-info p {
        font: 16px/24px "Myriad W01 Bd", sans-serif;
        padding: 0 0 12px 0;
        margin: 0;
    }

p.default-style {
    margin: 1.12em 0;
}

.login .form-general {
    margin: 0 auto;
    width: 475px;
}

@media only screen and (min-width: 1280px) {
    .login .form-general {
        width: 585px;
    }
}

@media only screen and (max-width: 1023px) {
    .login .form-general {
        width: 325px;
    }
}

@media only screen and (max-width: 767px) {
    .login .form-general {
        width: auto;
    }

    body:not(.service) .nav-supp ul li[data-content="services-box"] a,
    body:not(.service) .nav-supp ul li[data-content="login-box"] a {
        margin-top: 5px;
    }
}

/* Sidtyp: JP Publik - Formul�r */
#id_matrix {
    white-space: nowrap;
}

    #id_matrix label {
        display: inline-block;
        padding: 6px 0;
    }

    #id_matrix input:not([type="radio"]),
    #id_matrix textarea {
        box-sizing: border-box;
        display: block;
        width: 305px;
        background: none repeat scroll 0 0 #FFFFFF;
        border: 1px solid #1A1A1A;
        border-radius: 2px 2px 2px 2px;
        margin: 6px 0;
        padding: 5px 10px;
        transition: border-color 0.162s ease-in-out 0s;
        float: left; /* För att validators skall visas till höger om textfältet istället för under textfältet. */
    }

    #id_matrix input[type="submit"] {
        width: auto;
        background: #004b8d;
        border: none;
        border-radius: 2px;
        color: #fff;
        cursor: pointer;
        font-family: "Myriad W01 Bd", sans-serif;
        -webkit-font-smoothing: antialiased;
        margin: 0;
        padding: 6px 15px;
        text-transform: uppercase;
    }

.form-general .required input {
    display: inline-block;
    margin-bottom: 12px;
}

.form-general .required:after {
    content: " *";
}

.form-general input + div.required {
    margin-top: 12px;
}

.form-general input.search {
    display: inline;
    width: 400px;
    height: 36px;
}

    .form-general input.search + input[type="submit"] {
        margin-left: 10px;
    }

.form-general .form-heading {
    font: 16px/24px "Myriad W01 Bd", sans-serif;
    margin: 0 0 12px;
}

@media only screen and (min-width: 1280px) {
    .form-general .form-heading {
        font: 19px/28px "Myriad W01 Bd", sans-serif;
    }
}

.form-field[class].text:not(.required):after {
    content: "";
}

.form-field[class] input {
    width: calc(100% - 15px);
    margin-bottom: 12px;
}

@media only screen and (min-width: 1280px) {
    .form-general input.search {
        width: 500px;
        height: 42px;
    }
}

@media only screen and (max-width: 1023px) {
    .form-general input.search {
        width: 340px;
    }
}

@media only screen and (max-width: 767px) {
    .form-general input.search {
        width: 150px;
        font-size: 20px;
        height: 30px;
    }

        .form-general input.search + input[type="submit"] {
            font-size: 16px;
            height: 30px;
            line-height: 30px;
            width: 50px;
            vertical-align: top;
            margin-left: 0;
            padding: 0;
        }
}

#localAdminTable th {
    padding-right: 30px;
    text-align: left
}

.checkboxlist label {
    display: inline;
}

.error-message {
    color: #ff0000;
}

.autocomplete-suggestions {
    border: 1px solid #999;
    background: #fff;
    cursor: default;
    overflow: auto;
}

.autocomplete-suggestion {
    padding: 5px 20px 5px 10px;
    font-size: 1.2em;
    white-space: nowrap;
    overflow: hidden;
}

.autocomplete-selected {
    background: #f0f0f0;
}

.autocomplete-suggestions strong {
    font-weight: bold;
    color: #000;
}

/* PUBLIC NEWS PAGE */
.news-ingress {
    font-family: "Myriad W01 It", sans-serif;
}

.news-ingress-bold {
    font-family: "Myriad W01 Bd", sans-serif;
}

/* Employee
-------------------------------------------------------------- */
.m-employee .m-c {
    border: none;
}

.m.m-employee .m-c > .media {
    float: left;
    margin: 0 24px 0 0;
}

.m.m-employee .media > * + * {
    margin-top: 24px;
}

.m.m-employee .name {
    margin-bottom: 0;
}

    .m.m-employee .name + p,
    .m.m-employee .media + p {
        font-family: "Myriad W01 It", sans-serif;
        margin-bottom: 10px;
    }

/* QUICK LINK
-------------------------------------------------------------- */
.m.m-quick-link p {
    margin: 0;
}

    .m.m-quick-link p a {
        font-family: "Myriad W01 It", sans-serif;
    }

/* Favorites message
-------------------------------------------------------------- */
#favs-message {
    color: #fff;
    background-color: #1a1a1a;
    margin: 0 auto;
    position: absolute;
    width: 170px;
    z-index: 1001;
}

    #favs-message > div {
        background: url(/static/i/arrow.png) 5px 0 no-repeat;
        float: right;
        margin-top: -12px;
        padding-top: 12px;
        width: 170px;
    }

.svg #favs-message > div {
    background: url(/static/i/arrow.svg) 5px 0 no-repeat;
}

#favs-message > div > p {
    margin: 10px;
}

/* Help
-------------------------------------------------------------- */
#help {
    color: #fff;
    margin: 0 auto;
    padding: 0 4px;
    position: relative;
    width: 1062px;
    z-index: 800;
}

    #help > div {
        background: url(/static/i/arrow.png) 116px 0 no-repeat;
        float: right;
        margin-top: -12px;
        padding-top: 12px;
        width: 305px;
    }

.svg #help > div {
    background-image: url(/static/i/arrow.svg);
}

.js #help > div {
    display: none;
    position: absolute;
    right: 4px;
    z-index: 10000;
}

#help.collapsed > div {
    display: none;
}

#help > div > div {
    background: #1a1a1a;
    border-radius: 2px;
    padding: 24px 12px 12px;
}

    #help > div > div h2 {
        margin: 0 0 12px;
    }

#help a,
#help a:hover,
#help a:focus,
#help a:active {
    color: #fff;
    opacity: 1;
}

    #help a:hover,
    #help a:focus,
    #help a:active {
        opacity: 0.8;
    }

@media only screen and (min-width: 1280px) {
    #help {
        padding: 0 5px;
        width: 1292px;
    }

        #help > div {
            background-position: 158px 0;
            width: 375px;
        }

    .js #help > div {
        right: 5px;
    }

    #help > div > div {
        padding: 28px 14px 14px;
    }
}

@media only screen and (max-width: 1023px) {
    #help {
        width: 762px;
    }

        #help > div {
            background-position: 136px 0;
        }

    .js #help > div {
        width: 325px;
    }
}

@media only screen and (max-width: 767px) {
    #help {
        max-width: 497px;
        width: auto;
    }

    .js #help > div {
        background-position: 251px 0;
        width: 310px;
    }
}

@media only screen and (max-width: 479px) {
    #help {
        max-width: none;
    }

    .js #help > div {
        background-position: 260px 0;
        right: 20px;
        width: 280px;
    }
}

/* break on subtopic */
.search .m-list .subtopic {
    display: block;
}

@media only screen and (min-width: 1280px) {
    #search input[type="search"] {
        transition-delay: 500ms;
        -webkit-transition-delay: 500ms; /* Safari */
    }
}

/* Generic files */
a.file {
    padding: 0 0 0 30px;
    background: url(/static/i/icons-xs.png) 2px -397px no-repeat;
    /*font: 24px/24px 'Myriad W01 Regular', sans-serif;*/
}

h1 ~ a.file {
    margin: -28px 0 36px;
}
/* PDF */
a.pdf {
    background-position: 2px -497px;
}

/* CSS REPLACEMENT FOR HTML5 ATTRIBUTES
/=============================================================================== */
iframe[seamless] {
    background-color: transparent;
    border: 0px none transparent;
    padding: 0px;
    overflow: hidden;
}

/* AUTOMATED NEWSLETTER
================================================================================ */
.newsletter-selectors {
    height: 45px;
}

    .newsletter-selectors > span {
        float: left;
        width: 30px;
        padding-top: 8px;
    }

    .newsletter-selectors .custom-select-container {
        width: 280px;
        float: left;
        margin-right: 10px;
    }

@media only screen and (max-width: 1023px) {
    .newsletter-selectors {
        height: auto;
    }

        .newsletter-selectors .custom-select-container {
            float: none;
            width: auto;
            margin: 10px 30px;
        }

        .newsletter-selectors .button {
            margin-left: 30px;
        }
}

/* CATEGORY SELECTORS
================================================================================ */
.category-selectors {
    height: 45px;
}

    .category-selectors .custom-select-container {
        width: 375px;
        float: left;
        margin-right: 10px;
    }

@media (max-width:1279px) {
    .category-selectors .custom-select-container {
        width: 305px;
    }
}

@media (max-width:1023px) {
    .category-selectors .custom-select-container {
        width: 325px;
    }
}

@media (max-width: 767px) {
    .category-selectors {
        height: auto;
        margin-bottom: 24px;
    }

        .category-selectors .custom-select-container {
            width: 100%;
            margin: 0 0 12px;
        }

        .category-selectors input[type="submit"] {
            clear: both;
        }
}

.print-only {
    display: none;
}

.nav-main .home a:before {
    content: "\2190\00A0";
}

/* OrderLines table */
.orderlinestable th {
    text-align: left;
}

.orderlinestable .name {
    padding-left: 0.3em;
}

.orderlinestable .price {
    padding-left: 0.3em;
}

.orderlinestable .remove {
    padding-left: 0.3em;
    font-style: italic;
}

/* ContactMe.ascx */
span.contact-me-confirmation-message {
    font-style: italic;
    color: #228b22;
}

/* Download popup
-------------------------------------------------------------- */
.downloadpopup input[type="button"] {
    margin-top: 3px;
}

.downloadpopup {
    color: #fff;
    margin: 0 auto;
    padding: 0 4px;
    position: relative;
    width: 1062px;
    z-index: 800;
}

    .downloadpopup > div {
        background: url(/Static/i/arrow.png) 116px 0 no-repeat;
        float: left;
        margin-top: -45px;
        padding-top: 12px;
        width: 305px;
    }

.svg .downloadpopup > div {
    background-image: url(/Static/i/arrow.svg);
}

.js .downloadpopup > div {
    display: none;
    position: absolute;
    left: 4px;
    z-index: 10000;
}

.downloadpopup.collapsed > div {
    display: none;
}

.downloadpopup > div > div {
    background: #1a1a1a;
    border-radius: 2px;
    padding: 24px 12px 12px;
}

    .downloadpopup > div > div h2 {
        margin: 0 0 12px;
    }

.downloadpopup a,
.downloadpopup a:hover,
.downloadpopup a:focus,
.downloadpopup a:active {
    color: #fff;
    opacity: 1;
}

    .downloadpopup a:hover,
    .downloadpopup a:focus,
    .downloadpopup a:active {
        opacity: 0.8;
    }

@media only screen and (min-width: 1280px) {
    .downloadpopup {
        padding: 0 5px;
        width: 1292px;
    }

        .downloadpopup > div {
            background-position: 158px 0;
            width: 375px;
        }

    .js .downloadpopup > div {
        right: 5px;
    }

    .downloadpopup > div > div {
        padding: 28px 14px 14px;
    }
}

@media only screen and (max-width: 1023px) {
    .downloadpopup {
        width: 762px;
    }

        .downloadpopup > div {
            background-position: 136px 0;
        }

    .js .downloadpopup > div {
        width: 325px;
    }
}

@media only screen and (max-width: 767px) {
    .downloadpopup {
        max-width: 497px;
        width: auto;
    }

    .js .downloadpopup > div {
        background-position: 251px 0;
        width: 310px;
    }
}

@media only screen and (max-width: 479px) {
    .downloadpopup {
        max-width: none;
    }

    .js .downloadpopup > div {
        background-position: 260px 0;
        right: 20px;
        width: 260px;
    }
}
/* Favorites dialog
-------------------------------------------------------------- */
.js .favorites-dialog {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    background-color: transparent;
    background-color: rgba(255,255,255,0.8);
}

    .js .favorites-dialog[data-dialog-visible="true"] {
        display: block;
        zoom: 1;
        z-index: 9999;
    }

.favorites-content .favorites-dialog h2 {
    font-size: 19px;
    font-family: "Myriad W01 Bd", sans-serif;
    text-transform: uppercase;
}

.favorites-dialog .form-general {
    max-width: 400px;
    padding: 15px;
    margin: 0 auto;
    color: #fff;
    background-color: #1a1a1a;
    pointer-events: auto;
}

.favorites-dialog input[type="file"] {
    line-height: 1;
}

    .favorites-dialog input[type="file"]:focus {
        outline: none;
    }

.favorites-dialog-actions {
    float: right;
    margin-bottom: 0;
}

@media only screen and (max-width: 767px) {
    .js.dialog-open {
        position: fixed;
        overflow: hidden;
        height: 100%;
    }

    .js .favorites-dialog {
        position: fixed;
        bottom: 0;
        right: 0;
        z-index: 1000;
    }

    .favorites-dialog .form-general {
        max-width: none;
        height: 100%;
    }

    /* CUSTOM STYLING
-------------------------------------------------------------- */
    .list-favorites-head-transparent {
        background-color: #FFF;
    }
}

.block .m-c {
    border-bottom: none;
    border-top: 1px solid #1a1a1a;
    margin-top: -1px;
    padding: 0 0 0;
}

.m-list .m-c > h4.block {
    border-top: none;
    border-bottom: 1px solid #aaa;
    margin: 10px 0 0px 0;
    padding: 10px 0 0 0;
}

.block .list-favorites-head-transparent {
    padding-top: 10px;
}

.latestFiles {
    width: 100%;
}

    .latestFiles td {
        padding: 5px;
    }

.right {
    text-align: right;
    width: 25%;
}

.list-favorites-head .icon .anvandare a:before {
    background-position: -3600px -400px;
}

.latestFiles .td {
    padding: 5px;
}

.form-general.loading {
    filter: alpha(opacity=50);
    opacity: 0.5;
}

.form-general .m-c:after {
    content: " ";
    position: fixed;
    top: 50%;
    left: 50%;
    width: 32px;
    height: 32px;
    margin-top: -16px;
    margin-left: -16px;
    filter: alpha(opacity=100);
    opacity: 1;
    background: transparent url(/static/i/loading.gif) no-repeat 0 0;
}

.editable-list__editing-vue .form-general .m-c:after {
    content: none;
}

.contentBlocks {
    overflow-x: auto;
    overflow-y: hidden;
}

.left {
    float: left;
}

.divider {
    height: 1px;
    width: 100%;
}

.mainImage {
    padding-bottom: 30px;
}

.block h2 {
    padding-bottom: 5px;
}

.block input[type="text"] {
    width: 60%;
}

#id_matrix input[type="text"] {
    width: 100%;
}

.calendar {
    float: left;
    margin-bottom: 30px;
}

.readMore {
    font-style: italic;
}

.counselLabel {
    margin: 7px 0 -10px 0;
}

    .counselLabel label {
        display: inline;
    }

.overflow-hidden {
    overflow: hidden !important;
}

.rightContentArea p {
    margin: 0 0 12px;
}

.block ul {
    list-style: none;
}

    .block ul li {
        background: url(/Static/i/li.png) 0 6px no-repeat;
        padding: 0 0 12px 24px;
    }

.svg .block ul li {
    background-image: url(/Static/i/li.svg);
}

@media only screen and (min-width: 1280px) {
    .block ul li {
        background-position: 0 9px;
        padding: 0 0 14px 20px;
    }
}

.documentExport {
    margin-top: 20px;
    border: 1px #004b8d solid;
}

    .documentExport input {
        margin: 20px;
    }

.iframe-wrapper {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 */
    padding-top: 25px;
    height: 0;
}

    .iframe-wrapper iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }

.iconLoading {
    width: 18px;
    height: 18px;
    display: inline-block;
    padding-left: 20px;
    visibility: hidden;
}

/* media iframe
-------------------------------------------------------------- */
.m.m-about .m-c > .media > iframe {
    width: 305px;
    height: 158px;
    border: 1px solid #dfdfdf;
}

@media only screen and (min-width: 1280px) {
    .m.m-about .m-c > .media > iframe {
        width: 375px;
        height: 194px;
    }
}

/* section extra formatting
-------------------------------------------------------------- */
.form-general label.bold {
    font-family: "Myriad W01 Bd", sans-serif;
}

@media only screen and (min-width: 480px) {
    .section label.radio {
        clear: both;
        float: left;
    }
}

/* Slideshow */
.slideshow {
    border-top: solid 1px #000;
    border-bottom: solid 1px #aaaaaa;
    margin-bottom: 60px;
    overflow: hidden;
    /*height: 350px;*/
}
    /* set border-box so that percents can be used for width, padding, etc (personal preference) */
    .slideshow,
    .slideshow * {
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }

        .slideshow > div {
            /*
	some of these styles will be set by the plugin (by default) but setting them here
	helps avoid flash-of-unstyled-content
	*/
            position: absolute;
            top: -3000px;
            left: 0;
            width: 100%;
            padding: 10px 0;
            display: block;
            overflow: hidden;
        }

.m-portrait-list .slideshow > div {
    padding: 0;
}

.slideshow a {
    -webkit-transition: none;
    -moz-transition: none;
    transition: none;
}

.slideshow .m-campaign,
.slideshow .m-campaign .m-c {
    border: none;
}

@media only screen and (max-width: 479px) {
    .slideshow {
        height: 500px;
    }
}

/* pager */
.cycle-pager {
    text-align: right;
    width: 100%;
    z-index: 10000;
    position: absolute;
    bottom: 10px;
    right: 10px;
    overflow: hidden;
}

    .cycle-pager span {
        font-family: arial;
        font-size: 50px;
        width: 16px;
        height: 16px;
        display: inline-block;
        color: #757575;
        cursor: pointer;
    }

        .cycle-pager span.cycle-pager-active {
            color: #004b8d;
        }

    .cycle-pager > * {
        cursor: pointer;
    }

/* topic related documents and nodes */
a.doc,
a.node,
a.goto {
    padding: 0 0 0 24px;
    background: url(/static/i/icons-xs-c.png) 2px 4px no-repeat;
    display: block;
}

.svg a.doc,
.svg a.node {
    background-image: url(/static/i/icons-xs-c.svg);
}

a.node {
    background-position: 2px -432px;
}

a.goto {
    background-position: 0px -653px;
}

/* anchor navigation */
.anchor-nav li,
.cf.export li,
.cf.export li + li {
    padding: 0;
}

.Deleted {
    text-decoration: line-through;
}

.Added {
    text-decoration: underline;
    font-weight: bold;
}

/* course signup */
.participant .col[class][class][class] {
    border-top: none;
    padding: 0 0 12px;
    margin: 0;
}

.participant-placeholder .remove-participant-outer {
    display: none;
}

.separate-billing-address {
    display: none;
}


/* Dropdown in export */
.library-dropdown {
    visibility: hidden;
    opacity: 0;
    position: absolute;
    left: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    width: 170px;
    background: #ffffff;
    border: 1px solid black;
    z-index: 10;
    margin-top: 15px;
    padding: 1rem;
    text-align: center;
    border-radius: 7px;
    box-shadow: 0px 2px 20px 0px rgba(0,0,0,0.35);
    transition: all 0.162s;
}

.dropdown_visible .library-dropdown {
    visibility: visible;
    opacity: 1;
}


.library-dropdown:before,
.library-dropdown:after {
    content: "";
    bottom: 100%;
    left: 50%;
    border: solid transparent;
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
}

.library-dropdown:before {
    border-bottom-color: #000000;
    border-width: 11px;
    margin-left: -11px;
}

.library-dropdown:after {
    border-bottom-color: #ffffff;
    border-width: 10px;
    margin-left: -10px;
}

.library-dropdown legend {
    padding: 0 0 10px;
}

.library-dropdown label {
    display: inline-block;
    margin: 0 5px;
}

.library-dropdown input[type="radio"] {
    margin-left: 0;
}

.library-dropdown-button {
    margin-top: 1rem;
}

svg {
    fill: currentColor;
}

.hidden {
    display: none !important;
}

@media only screen and (max-width: 479px) {
    .hidden-s {
        display: none !important;
    }
}

@media only screen and (min-width: 480px) {
    .hidden-m {
        display: none !important;
    }
}

@media only screen and (max-width: 1023px) {
    .hidden-below-l {
        display: none !important;
    }
}

@media only screen and (min-width: 768px) {
    .hidden-l {
        display: none !important;
    }
}

.flex-grid {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin-left: -25px;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

.flex-grid--no-wrap {
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
}

.flex-grid--space-between {
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
}

.flex-grid--items-center {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.flex-grid--items-bottom {
    -webkit-box-align: end;
    -ms-flex-align: end;
    align-items: flex-end;
}

.flex-grid--bottom-spacing {
    margin-bottom: -25px;
}

.flex-grid--items-stretch {
    align-items: stretch;
}

.flex-grid > * {
    flex: 0 1 auto;
    padding-left: 25px;
}

.u-1\/1 {
    width: 100% !important;
    max-width: 100% !important;
    flex-basis: 100% !important;
}

.u-1\/2 {
    width: 50% !important;
    max-width: 50% !important;
    flex-basis: 50% !important;
}

.u-1\/3 {
    width: 33.33333% !important;
    max-width: 33.33333% !important;
    flex-basis: 33.33333% !important;
}

.u-2\/3 {
    width: 66.66667% !important;
    max-width: 66.66667% !important;
    flex-basis: 66.66667% !important;
}

.u-1\/4 {
    width: 25% !important;
    max-width: 25% !important;
    flex-basis: 25% !important;
}

.u-2\/4 {
    width: 50% !important;
    max-width: 50% !important;
    flex-basis: 50% !important;
}

.u-3\/4 {
    width: 75% !important;
    max-width: 75% !important;
    flex-basis: 75% !important;
}

.u-spaced-bottom-m {
    padding-bottom: 14px !important;
}

.u-spaced-bottom-l {
    padding-bottom: 28px !important;
}

.u-space-between-m > *:not(:first-child) {
    padding-top: 14px !important;
}

/* =============================================================================
* Space
* p ostcss-bem-linter: define space
============================================================================= */

/* All around margin
----------------------------------------------------------------------------- */
.t-space-none:not(#foo) {
    margin: 0;
}

.t-space-xs:not(#foo) {
    margin: 3px;
}

.t-space-s:not(#foo) {
    margin: 6px;
}

.t-space-l:not(#foo) {
    margin: 24px;
}

.t-space-m:not(#foo) {
    margin: 12px;
}

.t-space-xl:not(#foo) {
    margin: 48px;
}

.t-space-xxl:not(#foo) {
    margin: 72px;
}

@media(min-width:767px) {
    .t-space-none\@m:not(#foo) {
        margin: 0;
    }

    .t-space-xs\@m:not(#foo) {
        margin: 3px;
    }

    .t-space-s\@m:not(#foo) {
        margin: 6px;
    }

    .t-space-l\@m:not(#foo) {
        margin: 24px;
    }

    .t-space-m\@m:not(#foo) {
        margin: 12px;
    }

    .t-space-xl\@m:not(#foo) {
        margin: 48px;
    }

    .t-space-xxl\@m:not(#foo) {
        margin: 72px;
    }
}

@media(min-width:1022px) {
    .t-space-none\@l:not(#foo) {
        margin: 0;
    }

    .t-space-xs\@l:not(#foo) {
        margin: 3px;
    }

    .t-space-s\@l:not(#foo) {
        margin: 6px;
    }

    .t-space-l\@l:not(#foo) {
        margin: 24px;
    }

    .t-space-m\@l:not(#foo) {
        margin: 12px;
    }

    .t-space-xl\@l:not(#foo) {
        margin: 48px;
    }

    .t-space-xxl\@l:not(#foo) {
        margin: 72px;
    }
}

/* Top margin
----------------------------------------------------------------------------- */
.t-space-top-none:not(#foo) {
    margin-top: 0;
}

.t-space-top-xs:not(#foo) {
    margin-top: 3px;
}

.t-space-top-s:not(#foo) {
    margin-top: 6px;
}

.t-space-top-l:not(#foo) {
    margin-top: 24px;
}

.t-space-top-m:not(#foo) {
    margin-top: 12px;
}

.t-space-top-xl:not(#foo) {
    margin-top: 48px;
}

.t-space-top-xxl:not(#foo) {
    margin-top: 72px;
}

@media(min-width:600px) {
    .t-space-top-none\@m:not(#foo) {
        margin-top: 0;
    }

    .t-space-top-xs\@m:not(#foo) {
        margin-top: 3px;
    }

    .t-space-top-s\@m:not(#foo) {
        margin-top: 6px;
    }

    .t-space-top-l\@m:not(#foo) {
        margin-top: 24px;
    }

    .t-space-top-m\@m:not(#foo) {
        margin-top: 12px;
    }

    .t-space-top-xl\@m:not(#foo) {
        margin-top: 48px;
    }

    .t-space-top-xxl\@m:not(#foo) {
        margin-top: 72px;
    }
}

@media(min-width:900px) {
    .t-space-top-none\@l:not(#foo) {
        margin-top: 0;
    }

    .t-space-top-xs\@l:not(#foo) {
        margin-top: 3px;
    }

    .t-space-top-s\@l:not(#foo) {
        margin-top: 6px;
    }

    .t-space-top-l\@l:not(#foo) {
        margin-top: 24px;
    }

    .t-space-top-m\@l:not(#foo) {
        margin-top: 12px;
    }

    .t-space-top-xl\@l:not(#foo) {
        margin-top: 48px;
    }

    .t-space-top-xxl\@l:not(#foo) {
        margin-top: 72px;
    }
}

/* Right margin
----------------------------------------------------------------------------- */
.t-space-right-none:not(#foo) {
    margin-right: 0;
}

.t-space-right-xs:not(#foo) {
    margin-right: 3px;
}

.t-space-right-s:not(#foo) {
    margin-right: 6px;
}

.t-space-right-l:not(#foo) {
    margin-right: 24px;
}

.t-space-right-m:not(#foo) {
    margin-right: 12px;
}

.t-space-right-xl:not(#foo) {
    margin-right: 48px;
}

.t-space-right-xxl:not(#foo) {
    margin-right: 72px;
}

@media(min-width:600px) {
    .t-space-right-none\@m:not(#foo) {
        margin-right: 0;
    }

    .t-space-right-xs\@m:not(#foo) {
        margin-right: 3px;
    }

    .t-space-right-s\@m:not(#foo) {
        margin-right: 6px;
    }

    .t-space-right-l\@m:not(#foo) {
        margin-right: 24px;
    }

    .t-space-right-m\@m:not(#foo) {
        margin-right: 12px;
    }

    .t-space-right-xl\@m:not(#foo) {
        margin-right: 48px;
    }

    .t-space-right-xxl\@m:not(#foo) {
        margin-right: 72px;
    }
}

@media(min-width:900px) {
    .t-space-right-none\@l:not(#foo) {
        margin-right: 0;
    }

    .t-space-right-xs\@l:not(#foo) {
        margin-right: 3px;
    }

    .t-space-right-s\@l:not(#foo) {
        margin-right: 6px;
    }

    .t-space-right-l\@l:not(#foo) {
        margin-right: 24px;
    }

    .t-space-right-m\@l:not(#foo) {
        margin-right: 12px;
    }

    .t-space-right-xl\@l:not(#foo) {
        margin-right: 48px;
    }

    .t-space-right-xxl\@l:not(#foo) {
        margin-right: 72px;
    }
}

/* Bottom margin
----------------------------------------------------------------------------- */
.t-space-bottom-none:not(#foo) {
    margin-bottom: 0;
}

.t-space-bottom-xs:not(#foo) {
    margin-bottom: 3px;
}

.t-space-bottom-s:not(#foo) {
    margin-bottom: 6px
}

.t-space-bottom-l:not(#foo) {
    margin-bottom: 24px;
}

.t-space-bottom-m:not(#foo) {
    margin-bottom: 12px;
}

.t-space-bottom-xl:not(#foo) {
    margin-bottom: 48px;
}

.t-space-bottom-xxl:not(#foo) {
    margin-bottom: 72px;
}

@media(min-width:600px) {
    .t-space-bottom-none\@m:not(#foo) {
        margin-bottom: 0;
    }

    .t-space-bottom-xs\@m:not(#foo) {
        margin-bottom: 3px;
    }

    .t-space-bottom-s\@m:not(#foo) {
        margin-bottom: 6px;
    }

    .t-space-bottom-l\@m:not(#foo) {
        margin-bottom: 24px;
    }

    .t-space-bottom-m\@m:not(#foo) {
        margin-bottom: 12px;
    }

    .t-space-bottom-xl\@m:not(#foo) {
        margin-bottom: 48px;
    }

    .t-space-bottom-xxl\@m:not(#foo) {
        margin-bottom: 72px;
    }
}

@media(min-width:900px) {
    .t-space-bottom-none\@l:not(#foo) {
        margin-bottom: 0;
    }

    .t-space-bottom-xs\@l:not(#foo) {
        margin-bottom: 3px;
    }

    .t-space-bottom-s\@l:not(#foo) {
        margin-bottom: 6px;
    }

    .t-space-bottom-l\@l:not(#foo) {
        margin-bottom: 24px;
    }

    .t-space-bottom-m\@l:not(#foo) {
        margin-bottom: 12px;
    }

    .t-space-bottom-xl\@l:not(#foo) {
        margin-bottom: 48px;
    }

    .t-space-bottom-xxl\@l:not(#foo) {
        margin-bottom: 72px;
    }
}

/* Left margin
----------------------------------------------------------------------------- */
.t-space-left-none:not(#foo) {
    margin-left: 0;
}

.t-space-left-auto:not(#foo) {
    margin-left: auto;
}

.t-space-left-xs:not(#foo) {
    margin-left: 3px;
}

.t-space-left-s:not(#foo) {
    margin-left: 6px;
}

.t-space-left-l:not(#foo) {
    margin-left: 24px;
}

.t-space-left-m:not(#foo) {
    margin-left: 12px;
}

.t-space-left-xl:not(#foo) {
    margin-left: 48px;
}

.t-space-left-xxl:not(#foo) {
    margin-left: 72px;
}

@media(min-width:768px) {
    .t-space-left-none\@m:not(#foo) {
        margin-left: 0;
    }

    .t-space-left-auto\@m:not(#foo) {
        margin-left: auto;
    }

    .t-space-left-xs\@m:not(#foo) {
        margin-left: 3px;
    }

    .t-space-left-s\@m:not(#foo) {
        margin-left: 6px;
    }

    .t-space-left-l\@m:not(#foo) {
        margin-left: 24px;
    }

    .t-space-left-m\@m:not(#foo) {
        margin-left: 12px;
    }

    .t-space-left-xl\@m:not(#foo) {
        margin-left: 48px;
    }

    .t-space-left-xxl\@m:not(#foo) {
        margin-left: 72px;
    }
}

@media(min-width:900px) {
    .t-space-left-none\@l:not(#foo) {
        margin-left: 0;
    }

    .t-space-left-xs\@l:not(#foo) {
        margin-left: 3px;
    }

    .t-space-left-s\@l:not(#foo) {
        margin-left: 6px;
    }

    .t-space-left-l\@l:not(#foo) {
        margin-left: 24px;
    }

    .t-space-left-m\@l:not(#foo) {
        margin-left: 12px;
    }

    .t-space-left-xl\@l:not(#foo) {
        margin-left: 48px;
    }

    .t-space-left-xxl\@l:not(#foo) {
        margin-left: 72px;
    }
}

.t-text-style-1:not(#foo) {
    font: 20px/24px "Myriad W01 regular", sans-serif;
}

.t-text-style-2:not(#foo) {
    font: 14px/20px "Myriad W01 regular", sans-serif;
}

.social-media-icon {
    text-decoration: none;
    display: inline-block;
    padding: 10px 20px 10px 0;
}

    .social-media-icon:not(#foo)::after {
        content: none;
    }

.multiple-select-checkboxes {
    max-height: 210px;
    overflow-y: auto;
}

.editable-text__wrapper > div {
    min-height: 120px;
    border: 1px solid #1a1a1a;
    background-color: #fff;
}

.editable-text__wrapper .editable-text {
    padding: 10px;
}

.editable-text__wrapper .mce-edit-focus {
    outline: 0;
}

/* Hide content on desktop */
.show-on-mobile-tablet {
    display: none;
}

/* Show content on tablets and mobile devices */
@media (max-width: 1023px) {
    .show-on-mobile-tablet {
        display: block;
    }
}

/* Ai chat */
.ask-ai-box {
    margin: 0 auto;
    padding: 0 4px 12px;
    width: 985px;
    display: flex;
    flex-wrap: wrap;
    padding-top: 10px !important;
    padding-bottom: 0 !important;
}

    .ask-ai-box .popup-container {
        flex: 1;
        align-items: flex-end;
        margin-bottom: 0 !important;
        align-items: center;
    }

.ask-ai-text {
    display: flex;
    flex-direction: column;
    flex: 1;
}

    .ask-ai-text p {
        margin-bottom: 0;
    }

@media only screen and (min-width: 1280px) {
    .ask-ai-box {
        padding: 0 5px 14px;
        width: 1215px;
    }
}

@media only screen and (max-width: 1023px) {
    .ask-ai-box {
        width: 685px;
    }
}

@media only screen and (max-width: 767px) {
    .ask-ai-box {
        max-width: 420px;
        padding-left: 20px;
        padding-right: 20px;
        width: auto;
        margin-top: 10px;
    }
}

/* AI Tabs */
.ai-chat-section__mobile-subtitle {
    display: none;
}

@media only screen and (max-width: 767px) {
    .ai-chat-section__mobile-subtitle {
        display: block;
        font-size: 16px;
        color: black;
        margin: 0 0 8px;
        padding: 0;
    }
}

.ai-tabs {
    display: flex;
    gap: 8px;
}

.ai-tabs__tab {
    align-items: center;
    background: #fff;
    border: 2px solid #D3DDE8;
    border-top-right-radius: 12px;
    border-top-left-radius: 12px;
    border: 1px solid #E5EDF3;
    cursor: pointer;
    display: flex;
    gap: 10px;
    padding: 12px 16px;
    text-align: left;
    text-transform: none;
    transition: border-color 0.15s, background-color 0.15s;
}

    .ai-tabs__tab[aria-selected="false"] .ai-tabs__tab-title {
        color: #004B8D;
    }

    .ai-tabs__tab:hover {
        border-color: #88A6C7;
        border-bottom-color: transparent !important;
    }

    .ai-tabs__tab:focus {
        box-shadow: none;
    }

    .ai-tabs__tab.is-active .ai-tabs__tab-title {
        text-decoration: none;
    }

    .ai-tabs__tab.is-active {
        background: #EFF2F7;
        border-bottom: none !important;
    }

.ai-tabs__tab-icon {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    width: 22px;
    height: 22px;
}

    .ai-tabs__tab-icon svg {
        width: 100%;
        height: 100%;
        fill: none;
    }

.ai-tabs__tab-content {
    display: flex;
    flex-direction: column;
}

.ai-tabs__tab-title {
    color: #1a1a1a;
    font-family: "Myriad Pro", sans-serif;
    font-size: 20px;
    font-weight: bold;
    text-decoration: underline;
    text-decoration-thickness: 1px;
}

.ai-tabs__tab-title-letter {
    font-weight: 300;
    font-family: 'Myriad Regular', sans-serif;
}

.ai-tabs__tab-subtitle {
    font-family: "Myriad Pro", sans-serif;
    color: #5D5D5D;
    font-size: 16px;
    font-weight: 400;
}

@media only screen and (max-width: 767px) {
    .ai-tabs {
        flex-direction: row;
    }

    .ai-tabs__tab {
        padding: 10px 12px;
        min-width: 0;
        flex: 1;
    }

    .ai-tabs__tab-title {
        font-size: 16px;
    }

    .ai-tabs__tab-subtitle {
        display: none;
    }
}


.ai-chat-section,
.ai-chat-section-accordion {
    margin: 0 0 20px 0;
    border: 1px solid #D3DDE8;
    border-radius: 2px;
    background-color: #f0f4f8;
}

.ai-chat-section {
    border: none;
    background-color: transparent;
}

    .ai-chat-section p,
    .ai-chat-section-accordion p {
        margin: 0;
        margin-bottom: 10px;
    }

.ai-chat-tags {
    display: flex;
    margin-bottom: 20px;
    flex-direction: column;
}

@media only screen and (max-width: 1024px) {
    .ai-chat-tags {
        display: none;
    }

    .ai-chat-tags-items {
        padding-bottom: 120px;
        gap: 15px !important;
        text-decoration: underline;
    }

        .ai-chat-tags-items span {
            font-weight: bold !important;
            font-size: 16px !important;
        }

    .ai-chat-tags-text {
        margin-bottom: 20px;
    }

        .ai-chat-tags-text p {
            font-size: 19px;
        }
}

.ai-chat-tags-items {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
}

    .ai-chat-tags-items .icon-label-button-tags {
        display: inline-flex;
        align-items: center;
        gap: 5px;
    }

.ai-chat-tags-text {
    display: block;
    font-size: 18px;
}

.chat-filter-mobile {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
}

    .chat-filter-mobile .icon-label-button-tags {
        display: inline-flex;
        align-items: center;
        gap: 5px;
        border: 1px solid #B9C0C6;
    }

    .chat-filter-mobile .ai-chat-tags .icon-label-button-tags {
        padding-right: 15px;
    }

    .chat-filter-mobile .icon-label-button,
    .chat-filter-mobile .icon-label-button-tags {
        text-transform: initial;
        display: flex;
        align-items: center;
        gap: 10px;
        background: white;
        color: #004B8D;
        border-radius: 25px;
        padding-left: 0;
        padding-top: 0;
        padding-bottom: 0;
        font-size: 14px;
        text-decoration: none;
    }

    .chat-filter-mobile .icon-label-button-tags {
        background-color: white;
        font-weight: 700;
        color: #5C5C5C;
    }

        .chat-filter-mobile .icon-label-button-tags input[type="checkbox"] {
            display: none;
        }

        .chat-filter-mobile .icon-label-button-tags .checkmark {
            background-color: #D2DBE3;
            border-radius: 25px;
            padding: 6px;
            width: 20px;
            height: 20px;
            margin: 3px;
            fill: none;
            display: inline-flex;
            align-items: center;
            justify-content: center;
        }

        .chat-filter-mobile .icon-label-button-tags input[type="checkbox"]:not(:checked) + .checkmark path {
            display: none;
        }

        .chat-filter-mobile .icon-label-button-tags input[type="checkbox"]:checked + .checkmark {
            background-color: #004B8D;
        }

            .chat-filter-mobile .icon-label-button-tags input[type="checkbox"]:checked + .checkmark path {
                stroke: white;
                display: block;
            }

        .chat-filter-mobile .icon-label-button-tags input[type="checkbox"]:disabled + .checkmark {
            background-color: #D2DBE3;
            opacity: 0.6;
        }

        .chat-filter-mobile .icon-label-button-tags input[type="checkbox"]:not(:checked) + .checkmark path {
            display: none;
        }

        .chat-filter-mobile .icon-label-button-tags input[type="checkbox"]:disabled + .checkmark path {
            display: none;
        }

        .chat-filter-mobile .icon-label-button-tags input[type="checkbox"]:disabled:checked + .checkmark {
            background-color: #D2DBE3;
            opacity: 0.6;
        }

            .chat-filter-mobile .icon-label-button-tags input[type="checkbox"]:disabled:checked + .checkmark path {
                stroke: #5C5C5C;
                display: block;
            }

        .chat-filter-mobile .icon-label-button-tags.has-checked {
            border: 1px solid #004B8D;
        }

        .chat-filter-mobile .icon-label-button-tags input[type="checkbox"]:checked + .checkmark + span {
            color: #004B8D;
        }

.ai-chat-tags-dropdown-content {
    display: none;
    position: absolute;
    background-color: white;
    border: 1px solid #B9C0C6;
    border-radius: 5px;
    padding: 10px;
    z-index: 10;
    margin-top: 5px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    left: 0;
    width: auto;
    min-width: 150px;
    overflow-y: auto;
    max-height: 300px;
}

.ai-chat-tags-dropdown-heading {
    display: block;
    font-size: 14px;
    font-weight: 700;
    color: #1a1a1a;
    margin: 8px 0 4px;
}

@media only screen and (max-width: 1024px) {
    .ai-chat-tags-dropdown-heading {
        font-size: 18px;
        text-decoration: none;
    }
}

.ai-chat-tags-dropdown-heading:first-child {
    margin-top: 0;
}

.ai-chat-tags-dropdown-content label {
    display: flex;
    align-items: center;
    margin: 5px 0;
    font-size: 16px;
    cursor: pointer;
}

.ai-chat-tags-dropdown-content input[type="checkbox"] {
    cursor: pointer;
    margin-right: 10px;
    width: 20px;
    height: 20px;
    accent-color: #004B8D;
}

.ai-chat-tags .icon-label-button-tags {
    padding-right: 15px;
}

.ai-chat-accordion .accordion-header {
    background-color: #EFF2F7;
    padding: 10px 15px;
    cursor: pointer;
    width: 100%;
    border: none;
    text-align: left;
    font-size: 19px;
    font-weight: 500;
    display: flex;
    align-items: center;
    outline: none;
}

.hide-accordion-header-desktop[class] {
    display: none;
}

.ai-chat-accordion .ai-chat-wrapper[class] #accordion-content {
    flex: 3;
}

@media only screen and (max-width: 1024px) {
    .hide-accordion-header-desktop[class] {
        display: flex;
        background-color: white;
    }

    .ai-chat-wrapper[class] {
        display: none;
        height: 100%;
    }

    .ai-chat-accordion.fullscreen .ai-chat-wrapper[class] {
        display: flex !important;
        overflow: hidden;
    }

        .ai-chat-accordion.fullscreen .ai-chat-wrapper[class] #accordion-content {
            display: flex;
            flex-direction: column;
            flex: 1;
            overflow: hidden;
        }

        .ai-chat-accordion.fullscreen .ai-chat-wrapper[class] .chat-container {
            padding-right: 0;
            padding-left: 0;
        }

    .settings-close {
        display: block !important;
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        background: white;
        width: 100%;
        margin: 0 auto;
        text-align: center;
        z-index: 10;
    }

    .settings-wrapper {
        width: 100%;
        padding: 40px 0;
        box-shadow: 0px -4px 4px 0px #00000026;
    }

    .settings-button {
        background-color: #004B8D;
        color: white;
        border: none;
        padding: 10px 20px;
        border-radius: 25px;
        cursor: pointer;
        font-size: 18px;
        width: 80%;
    }
}

.settings-close {
    display: none;
}

.accordion-icon {
    color: white;
    display: flex;
    margin-right: 15px;
    align-items: center;
}

    .accordion-icon svg {
        fill: transparent !important;
    }

        .accordion-icon svg g path {
            stroke: #004B8D;
        }


.ai-chat-accordion .accordion-header:focus {
    outline: 1px solid #004B8D;
    outline-offset: 1px;
}

    .ai-chat-accordion .accordion-header:focus .accordion-header-title,
    .ai-chat-accordion .accordion-header:focus .accordion-toggle svg,
    .ai-chat-accordion .accordion-header:hover .accordion-header-title,
    .ai-chat-accordion .accordion-header:hover .accordion-toggle svg {
        color: #004B8D;
    }

.ai-chat-accordion .accordion-header .accordion-toggle svg {
    color: #004B8D;
}

.ai-chat-accordion .accordion-header-title {
    margin: 0;
    font-size: 19px;
    color: #1A1A1A;
    font-weight: 500;
    display: flex;
    align-items: center;
    color: #004B8D;
}

.accordion-header[aria-expanded="false"] .accordion-header-title {
    text-decoration: underline;
}

.ai-chat-accordion .accordion-toggle {
    transition: transform 0.3s;
    display: inline-block;
    margin-left: 15px;
    color: #1A1A1A;
}

    .ai-chat-accordion .accordion-toggle svg {
        width: 14px;
        height: 14px;
        vertical-align: middle;
        transition: transform 0.3s;
        color: #1A1A1A;
    }

.ai-chat-accordion .accordion-content {
    padding: 20px;
    display: none;
}

.ai-chat-accordion.active .accordion-content {
    gap: 15px;
}

.ai-chat-accordion.active .accordion-content,
.ai-chat-wrapper {
    display: flex;
    align-items: stretch;
}

    .ai-chat-wrapper > .accordion-content-start {
        flex: 3;
        min-width: 0;
    }

    .ai-chat-wrapper .chat-container {
        background-color: white;
        padding: 15px;
        border-radius: 12px;
        border-top-right-radius: 0px;
        border-bottom-right-radius: 0px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        overflow: initial !important;
        border: 1px solid #C5CADD;
    }

.accordion-toggle-mobile {
    display: none;
}

.fullscreen-header {
    display: none;
}

body.fullscreen-mode {
    overflow-y: hidden;
}

@media only screen and (max-width: 1024px) {
    body.fullscreen-mode {
        overflow-y: hidden;
    }

    .ai-chat-accordion.fullscreen {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: #f0f4f8;
        z-index: 1000;
        display: flex;
        flex-direction: column;
    }

    .ai-question {
        display: none;
    }

    .fullscreen .accordion-toggle-mobile {
        display: none;
    }

    .ai-chat-accordion.fullscreen .accordion-header {
        position: sticky;
        top: 0;
        z-index: 2;
        background-color: #EFF2F7;
    }

    .fullscreen .fullscreen-header {
        display: flex;
        background-color: #11589B;
        padding: 10px;
        justify-content: flex-end;
        align-items: center;
        position: sticky;
        top: 0;
        z-index: 3;
    }

    .ai-chat-accordion.fullscreen .accordion-content {
        display: flex;
        flex-direction: column;
        flex: 1;
        overflow: hidden;
        padding: 0;
    }

    .ai-chat-accordion.fullscreen .chat-container {
        flex: 1;
        display: flex;
        flex-direction: column;
        height: 100%;
        overflow: hidden;
    }

    .chat-header {
        flex: 1;
        overflow-y: auto;
        padding: 10px;
        padding-right: 10px !important;
        margin-bottom: 0;
        min-height: initial !important;
        max-height: initial !important;
    }

    .chat-body {
        position: sticky;
        bottom: 0;
        background-color: #f0f4f8;
        z-index: 2;
        padding: 10px;
        margin-top: 0 !important;
        width: initial !important;
        z-index: 5;
    }

    .chat-input {
        display: flex;
        flex-direction: column;
        width: 100%;
    }

    .chat-submit .chatbot-actions-right {
        justify-content: flex-end;
    }

    .fullscreen .close-fullscreen {
        display: flex;
        align-items: center;
        gap: 5px;
        background: none;
        border: none;
        font-size: 15px;
        font-weight: bold;
        cursor: pointer;
        color: white;
        padding: 0;
    }

    .close-fullscreen-title {
        display: flex;
        align-items: center;
        font-weight: 500;
        text-decoration: underline;
        margin-top: 2px;
    }

    .close-fullscreen-icon {
        display: flex;
        align-items: center;
        fill: transparent;
        color: transparent;
    }

        .close-fullscreen-icon:hover,
        .close-fullscreen:focus .close-fullscreen-icon,
        .close-fullscreen:hover .close-fullscreen-icon {
            fill: transparent;
            color: transparent;
        }

    .accordion-header-title {
        font-size: 16px !important;
    }

    .accordion-toggle {
        display: none !important;
    }

    .accordion-toggle-mobile {
        transition: transform 0.3s;
        display: flex;
        margin-left: 10px;
        color: transparent;
        fill: transparent;
    }

        .accordion-toggle-mobile:focus,
        .accordion-toggle-mobile:active {
            color: transparent;
            fill: transparent;
        }
}

.chat-filter-mobile {
    display: none;
}

    .chat-filter-mobile .ai-chat-tags-items {
        flex-direction: column;
        align-items: flex-start;
    }

.back-fullscreen-icon {
    display: flex;
}

    .back-fullscreen-icon svg path,
    .back-fullscreen-icon svg circle {
        stroke: #004B8D;
    }

@media only screen and (min-width: 1024px) {
    .ai-chat-accordion.fullscreen {
        position: static;
        width: auto;
        height: auto;
        padding: 0;
    }

    .close-fullscreen {
        display: none;
    }

    .ai-chat-accordion.active .accordion-content {
        display: flex;
    }
}

.ai-chat-accordion.active .accordion-toggle svg {
    transform: rotate(180deg);
}

.chat-container {
    flex: 3;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.chat-header {
    margin-bottom: 15px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    min-height: 400px;
    max-height: 400px;
    overflow-y: scroll;
}

    .chat-header::-webkit-scrollbar,
    .ai-chat-wrapper .chat-header::-webkit-scrollbar {
        width: 12px; /* Define scrollbar width */
    }


    .chat-header::-webkit-scrollbar-track,
    .ai-chat-wrapper .chat-header::-webkit-scrollbar-track {
        background: #EFF2F7;
    }

    .chat-header::-webkit-scrollbar-thumb,
    .ai-chat-wrapper .chat-header::-webkit-scrollbar-thumb {
        background: #888;
        border-radius: 6px;
    }

        .chat-header::-webkit-scrollbar-thumb:hover,
        .ai-chat-wrapper .chat-header::-webkit-scrollbar-thumb:hover {
            background: #555;
        }


.chat-header {
    scrollbar-width: thin;
    scrollbar-color: #888 white;
}

.ai-chat-wrapper .chat-header {
    scrollbar-width: thin;
    scrollbar-color: #888 #EFF2F7;
    overflow: auto;
}

.suggested-questions {
    display: flex;
    gap: 10px;
    list-style: none;
    flex-direction: column;
}

.suggested-question {
    align-self: flex-start;
}

.suggested-question__button {
    padding: 5px 8px;
    border-radius: 8px;
    background-color: #F2F7FB;
    text-decoration: underline;
    text-transform: initial;
    text-align: left;
    font-size: 16px;
    font-weight: 400;
    font-family: "Myriad W01", sans-serif;
    color: #004B8D;
}

    .suggested-question__button:hover {
        text-decoration: none;
    }

.border-separator {
    border-bottom: 1px solid #9ABAD1;
    margin-bottom: 15px;
}

.chat-response,
.chat-question {
    width: fit-content;
    max-width: 100%;
    padding: 15px 10px;
    border-radius: 12px;
    display: flex;
    gap: 10px;
    align-self: flex-start;
}

.ai-chat-wrapper .chat-question {
    background-color: #E5EDF3;
}

.chat-response {
    background-color: #C0D9EB;
    margin-right: 25px;
}

@media only screen and (max-width: 1024px) {
    .chat-response {
        margin-right: 0;
    }

    .chat-question {
        margin-left: 0 !important;
    }
}

.chat-question {
    margin-left: 25px;
    background-color: white;
    align-self: flex-end;
}

.chat-logo,
.chat-profile {
    display: flex;
    z-index: 5;
}

    .chat-logo svg {
        width: 33px;
        height: 33px;
    }

    .chat-profile svg {
        width: 33px;
        height: 33px;
        fill: transparent;
    }

.chat-header {
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0%;
    vertical-align: bottom;
}

.action-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    width: 100%;
    box-sizing: border-box;
}

.action-block {
    display: flex;
    align-items: center;
    box-sizing: border-box;
}

.action-block--fixed {
    flex: 0 0 auto;
    display: none;
}

.action-block--fill {
    flex: 1 0 auto;
}

.action-block .icon-label-button {
    width: 100%;
    box-sizing: border-box;
    text-align: center;
}

/* Responsive adjustments */
@media only screen and (max-width: 383px) {
    .action-block--fixed,
    .action-block--fill {
        flex: 0 0 100%;
    }
}

.chatbot-actions {
    display: flex;
    justify-content: space-between;
    gap: 10px;
}

@media only screen and (max-width: 1024px) {
    .action-block--fixed {
        display: flex;
    }

    .chatbot-actions {
        flex-wrap: wrap;
        margin-top: 15px;
    }

        .chatbot-actions .chat-button-submit-full {
            width: 100%;
            justify-content: center;
        }
}

.chatbot-actions-left {
    align-self: flex-start;
    display: flex;
    gap: 10px;
}

#accordion-content-docs .action-block-docs {
    height: 44px;
}

#accordion-content-docs .chat-submit {
    display: flex;
    align-items: center;
    gap: 10px;
    justify-content: space-between;
}

    #accordion-content-docs .chat-submit > .action-row {
        flex: 0 0 auto;
        width: auto;
    }

    #accordion-content-docs .chat-submit > .chatbot-actions {
        flex: 0 0 auto;
    }

.chatbot-actions-right {
    display: flex;
    gap: 10px;
    width: 100%;
    justify-content: flex-end;
}

@media only screen and (max-width: 1024px) {
    #accordion-content-docs .chat-submit {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
    }

    #accordion-content-docs .action-block-docs {
        height: 42px;
    }

    #accordion-content-docs .chatbot-actions-right {
        width: 100%;
    }

    .chatbot-actions-right {
        flex-wrap: wrap;
        justify-content: flex-start;
    }

    .chatbot-actions-left {
        flex-wrap: wrap;
    }
}

.chat-body {
    width: 100%;
}

.chat-submit {
    background-color: #EFF2F7;
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
    padding: 15px;
    margin-top: 0;
    border: 1px solid #C5CADD;
}

.chat-input {
    display: flex;
    flex-direction: column;
}

    .chat-input label {
        font-size: 14px;
        margin-bottom: 5px;
        color: #1A1A1A;
    }

    .chat-input textarea {
        border-top-left-radius: 12px;
        border-top-right-radius: 12px;
        width: auto;
        height: 80px;
        padding: 10px;
        border: 1px solid #C5CADD;
        border-bottom: none;
        resize: none;
        font-size: 16px;
        background-color: #F9F9F9;
    }

        .chat-input textarea::placeholder {
            color: #5C5C5C;
        }

#ai-docs-selected:not([hidden]) + #ai-question-docs {
    border-top: 0 !important;
    border-top-right-radius: 0 !important;
    border-top-left-radius: 0 !important;
}

.ai-chat-wrapper .chat-input textarea {
    background-color: #F9F9F9;
}

.chat-button-submit {
    background-color: #004B8D;
    color: white;
    border: none;
    padding: 8px 20px;
    border-radius: 25px;
    cursor: pointer;
    align-self: flex-end;
    width: auto;
    font-size: 14px;
    display: flex;
    gap: 5px;
    align-items: center;
    text-transform: initial;
    font-size: 18px;
}

@media only screen and (max-width: 1024px) {
    .chat-button-submit {
        padding: 9px 20px;
    }
}

.chat-button-submit svg {
    font-size: 12px;
    color: transparent;
    display: inline-block;
}

.btn-submit:hover {
    background-color: #0056b3;
}

.btn-submit:focus {
    outline: 2px solid #004B8D;
    outline-offset: 2px;
}

.example-text {
    display: block;
    font-size: 12px;
    color: #666;
    margin: 0;
}

.chat-side-panel,
.chat-filter-mobile {
    flex: 1;
    min-width: 280px;
}

.history-button,
.filter-button {
    display: none !important;
    font-size: 15px !important;
}

    .history-button svg,
    .filter-button svg {
        width: 20px !important;
        height: 22px !important;
    }

        .history-button svg path,
        .filter-button svg path {
            stroke: #004B8D;
        }

@media only screen and (max-width: 1024px) {
    .history-button,
    .filter-button {
        display: flex !important;
    }

    .chat-submit {
        flex-wrap: nowrap;
    }
}

.chat-history-wrapper,
.chat-filter-wrapper {
    border-radius: 12px;
    padding: 20px;
    background-color: white;
    margin-bottom: 20px;
    box-sizing: border-box;
}

@media only screen and (max-width: 1024px) {
    .chat-history-wrapper {
        margin-bottom: 10px;
        max-height: 430px;
        overflow-y: auto;
        height: 100%;
        max-height: 100%;
    }

    .chat-history-wrapper,
    .chat-filter-wrapper {
        width: 100%;
    }

    .chat-history-list {
        max-height: initial !important;
        padding-right: 0 !important;
    }
}

.chat-history-title,
.chat-filter-title {
    color: black;
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 15px;
}

.chat-history-list {
    display: flex;
    flex-direction: column;
    gap: 5px;
    list-style-type: none;
    margin-bottom: 10px;
    max-height: 430px;
    overflow-y: auto;
    padding-right: 10px;
}

.chat-filter-mobile .chat-filter-wrapper {
    margin-bottom: 10px;
    max-height: 430px;
    overflow-y: auto;
    height: 100%;
    max-height: 100%;
}

.chat-history-list::-webkit-scrollbar {
    width: 8px;
}

.chat-history-list::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 4px;
}

.chat-history-list::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 4px;
}

    .chat-history-list::-webkit-scrollbar-thumb:hover {
        background: #555;
    }

.chat-history-card-wrapper {
    position: relative;
    width: 100%;
}

.chat-history-card {
    display: flex;
    gap: 10px;
    background-color: #e5edf3;
    padding: 10px;
    border-radius: 3px;
    margin-bottom: 10px;
    border: none;
    width: 100%;
    text-align: left;
    cursor: pointer;
    font-size: 14px;
    color: #1a1a1a;
    transition: background-color 0.3s;
}

@media only screen and (max-width: 1024px) {
    .chat-history-card {
        flex-direction: column;
    }
}

.chat-history-card:hover,
.chat-history-card:focus {
    background-color: #d0d8e0;
    outline: none;
}

.close-chat-history {
    position: absolute;
    right: 10px;
    top: 10px;
    width: 22px;
    height: 22px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
}

    .close-chat-history svg {
        width: 100%;
        height: 100%;
        display: block;
    }

        .close-chat-history svg path {
            fill: #004b8d;
            stroke: #004b8d;
        }

    .close-chat-history:hover svg path,
    .close-chat-history:focus svg path {
        fill: #003a6b;
        stroke: #003a6b;
    }

.chat-history-icon {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 4px;
}

    .chat-history-icon svg {
        width: 100%;
        height: 100%;
        display: block;
        fill: transparent;
    }

.chat-history-content {
    display: flex;
    flex-direction: column;
}

.chat-history-date {
    font-size: 16px;
    padding-right: 28px;
    color: #494949;
    margin: 0;
    margin-bottom: 0 !important;
    font-family: "Myriad W01", sans-serif;
}

.chat-history-empty {
    background-color: #E5EDF3;
    display: flex;
    justify-content: center;
    flex-direction: column;
    text-align: center;
    border-radius: 12px;
    padding: 15px;
}

.chat-history-empty-icon svg {
    color: transparent;
    width: 35px;
    height: 35px;
}

.chat-history-empty-text {
    color: #5C5C5C;
    font-size: 16px;
    line-height: 1.4;
    margin-bottom: 0px !important;
}

.chat-history-text {
    font-size: 16px;
    margin: 0;
    line-height: 1.4;
    font-family: "Myriad W01", sans-serif;
    color: #1a1a1a;
    text-transform: initial;
    margin-bottom: 0 !important;
}

.chat-history-button,
.new-chat-button {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 15px;
    justify-content: center;
    border-radius: 25px;
    cursor: pointer;
    font-size: 18px;
    margin: 0 auto;
    min-height: 44px;
    text-transform: initial;
}

.chat-new-conversation {
    display: none;
}

@media only screen and (max-width: 1024px) {
    .chat-new-conversation {
        display: block;
        margin-top: 5px;
    }

    .new-chat-button {
        width: 100%;
    }

    .new-chat-separator {
        margin-top: 12px;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 15px;
    }

    .separator-text {
        text-align: center;
        font-size: 16px;
        color: #5C5C5C;
        text-transform: uppercase;
        font-weight: bold;
    }

    .separator-line {
        border-top: 1px solid #A8A8A8;
        width: 100%;
        flex: 1;
    }

    .continue-prompt {
        display: flex;
        align-items: center;
        margin-top: 10px;
        flex-direction: column;
    }

    .continue-prompt-icon svg {
        width: 24px;
        height: 24px;
    }

    .continue-prompt-text {
        font-size: 19px;
        font-weight: bold;
        color: #1A1A1A;
    }
}

.chat-history-button svg,
.new-chat-button svg {
    color: transparent;
}

.icon-label-button,
.icon-label-button-tags {
    text-transform: initial;
    display: flex;
    align-items: center;
    gap: 10px;
    background: white;
    color: #004B8D;
    border-radius: 25px;
    border: 1px solid #B9C0C6;
    padding-left: 0;
    padding-top: 0;
    padding-bottom: 0;
    font-size: 14px;
    text-decoration: underline;
}

.icon-label-button-tags {
    background-color: white;
    font-weight: 700;
    color: #5C5C5C;
    text-decoration: none;
}

.icon-label-button:hover,
.icon-button:hover {
    border: 1px solid #004b8d;
}

.icon-label-button svg,
.icon-label-button-tags svg {
    background-color: #E5EDF3;
    border-radius: 25px;
    padding: 6px;
    width: 18px;
    height: 18px;
    margin-left: 3px;
    margin-top: 3px;
    margin-bottom: 3px;
    fill: none;
}

.icon-button {
    display: flex;
    align-items: center;
    gap: 10px;
    background: white;
    color: #004B8D;
    border-radius: 25px;
    border: 1px solid #B9C0C6;
    font-size: 16px;
    text-decoration: underline;
    padding: 3px;
    align-items: center;
    justify-content: center;
}

    .icon-button svg {
        background-color: #E5EDF3;
        border-radius: 25px;
        padding: 5px;
        height: 18px;
        fill: none;
    }

.dots-horizontal {
    display: flex;
    gap: 3px;
    align-items: center;
    height: 100%;
}

    .dots-horizontal span {
        width: 6px;
        height: 6px;
        background-color: black;
        border-radius: 50%;
        display: block;
        animation: dot-flashing 1.2s infinite ease-in-out; /* Animation applied to each dot */
    }

/* Define the animation */
@keyframes dot-flashing {
    0% {
        opacity: 0.2;
    }

    50% {
        opacity: 1;
    }

    100% {
        opacity: 0.2;
    }
}

.dots-horizontal span:nth-child(1) {
    animation-delay: 0s;
}

.dots-horizontal span:nth-child(2) {
    animation-delay: 0.4s;
}

.dots-horizontal span:nth-child(3) {
    animation-delay: 0.8s;
}

.bullet-section {
    position: relative;
    border-bottom: 1px solid #9ABAD1;
    padding-bottom: 15px;
    padding-top: 15px;
}

.bullet-section-text {
    font-size: 16px;
    color: #1A1A1A;
}

.bullet-section::before {
    content: "";
    position: absolute;
    left: -28px;
    width: 2px;
    background-color: #9ABAD1;
    height: calc(100% + 1px);
    top: 0;
    z-index: 0;
}

.bullet-section::after {
    content: "";
    top: 21px;
    position: absolute;
    left: -32px;
    width: 10px;
    height: 10px;
    background-color: #004B8D;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 12px;
    font-weight: bold;
    z-index: 1;
}

.bullet-section:first-child {
    padding-top: 0;
}

    .bullet-section:first-child::after {
        display: none;
    }

.last-bullet-section::before {
    height: var(--before-height, calc(100% + 1px));
}

.bullet-section-title {
    font-size: 18px;
    font-weight: 700;
    color: #1A1A1A;
    margin-bottom: 10px;
}

.bullet-list {
    padding-left: 0;
    margin: 0;
}

.bullet-section ol, .bullet-section ul {
    padding-left: 15px;
}

    .bullet-section ol li, .bullet-section ul li {
        margin-bottom: 8px;
        padding-left: 10px;
    }

        .bullet-section ol li::marker {
            font-weight: bold;
            font-size: 16px;
            margin-right: 10px;
        }

.content-list .bullet-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

@media only screen and (max-width: 1024px) {
    .content-list .bullet-header {
        flex-wrap: wrap;
    }
}

.content-list .bullet-icon {
    display: inline-flex;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

    .content-list .bullet-icon svg {
        width: 100%;
        height: 100%;
        fill: #4d4d4d;
    }

.content-list .bullet-label,
.content-list .bullet-date {
    font-weight: 500;
    color: #3b3a3a;
    font-size: 16px;
}

.content-list a {
    color: #01407b;
    text-decoration: none;
    line-height: 1.4;
    display: inline-block;
    font-size: 16px;
}

    .content-list a[target="_blank"]:hover,
    .content-list a[target="_blank"]:active,
    .content-list a[target="_blank"]:focus {
        color: #01407b !important;
    }

    .content-list a svg {
        fill: transparent;
    }

    .content-list a::after {
        display: none !important;
    }

    .content-list a:hover {
        text-decoration: underline;
    }

.bullet-item:last-child {
    border-bottom: none;
}

.bullet-date {
    font-size: 14px;
    color: #494949;
    font-style: italic;
}

.source-section {
    padding: 20px 0;
    border-bottom: 1px solid #9ABAD1;
}

.source-heading {
    font-size: 16px;
    margin-bottom: 10px !important;
}

.source-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.source-tag {
    background-color: #f0f4f8;
    color: #333;
    padding: 0.3rem 0.8rem;
    border-radius: 999px;
    font-size: 0.9rem;
    white-space: nowrap;
}

.hidden-related-source {
    display: none;
}

.open-video-modal-btn {
    background-color: #074C8E;
    padding: 10px 15px 5px 15px;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    gap: 10px;
    max-width: 250px;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    text-decoration: none;
    border-radius: 3px;
    margin-top: 15px;
}

.video-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    z-index: 9999;
}

.video-modal-content {
    position: relative;
    max-width: 90%;
    border-radius: 5px;
}

@media (min-width: 768px) {
    .video-modal-content {
        max-width: 50%;
    }
}

.close-modal {
    position: absolute;
    top: 5px;
    right: 5px;
    font-size: 40px;
    cursor: pointer;
    color: black;
    background-color: white;
    padding: 5px;
    z-index: 10;
}

/* ──────────────────────────────────────────────────────────────
   Chat Side Panel (desktop right-hand panel)
   ────────────────────────────────────────────────────────────── */
.chat-side-panel {
    flex: 1;
    min-width: 270px;
    max-width: 270px;
    display: flex;
    flex-direction: column;
    background-color: white;
    border-bottom-right-radius: 12px;
    border-top-right-radius: 12px;
    padding: 15px;
    padding-top: 0px;
    box-sizing: border-box;
    overflow: hidden;
    min-height: 0;
    border: 1px solid #C5CADD;
    border-left: none;
}

.accordion-content .chat-side-panel {
    border-left: 1px solid #C5CADD;
    border-radius: 12px;
}

.chat-side-panel__sections {
    display: flex;
    flex-direction: column;
    flex: 1 1 0;
    overflow: hidden;
    min-height: 0;
    margin: 0 -16px;
}

    .chat-side-panel__sections > * {
        border-bottom: 1px solid #D7DBE3 !important;
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

/* Expanded sections grow to fill available space */
.chat-side-panel__section {
    display: flex;
    flex-direction: column;
    min-height: 0;
    flex-shrink: 0;
    padding: 0 !important;
}

.chat-side-panel__section--expanded {
    flex: 1 1 0;
    overflow: hidden;
}

/* Toggle buttons (Konversationshistorik, Favoritmarkerade) */
.chat-side-panel__toggle {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 12px 16px;
    background: white;
    border: none;
    cursor: pointer;
    text-align: left;
    font-size: 16px;
    font-weight: bold;
    color: #004B8D;
    text-transform: initial;
    box-sizing: border-box;
    box-shadow: none !important;
}

    .chat-side-panel__toggle:focus .chat-side-panel__toggle-label,
    .chat-side-panel__toggle:hover .chat-side-panel__toggle-label {
        color: #004B8D;
        box-shadow: none;
    }

    .chat-side-panel__toggle:focus .chat-side-panel__toggle-chevron,
    .chat-side-panel__toggle:hover .chat-side-panel__toggle-chevron {
        color: #004B8D;
        stroke: #004B8D;
        box-shadow: none;
    }

.chat-side-panel__toggle-icon {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .chat-side-panel__toggle-icon svg {
        width: 100%;
        height: 100%;
        fill: transparent;
    }

        .chat-side-panel__toggle-icon svg path {
            stroke: #004B8D;
        }

.chat-side-panel__toggle-label {
    flex: 1;
    min-width: 0;
}

.chat-side-panel__label {
    font-size: 16px !important;
    font-weight: bold !important;
    color: #004B8D !important;
}

.chat-side-panel__toggle-chevron {
    flex-shrink: 0;
    width: 14px;
    height: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s;
}

    .chat-side-panel__toggle-chevron svg {
        width: 100%;
        height: 100%;
    }

.chat-side-panel__toggle[aria-expanded="true"] .chat-side-panel__toggle-chevron {
    transform: rotate(180deg);
}

/* Collapsible content area */
.chat-side-panel__content {
    padding: 8px;
    flex: 1 1 0;
    min-height: 0;
    overflow-y: auto;
}

    .chat-side-panel__content .chat-history-list {
        padding-right: 6px;
        margin-bottom: 0;
        max-height: none;
        overflow-y: visible;
    }

    .chat-side-panel__content .chat-history-empty {
        padding: 12px;
    }

/* Action buttons (Kopiera konversationen, Söktips) */
.chat-side-panel__action {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 12px 16px;
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
    font-size: 16px;
    font-weight: 400;
    color: #004B8D;
    font-family: "Myriad W01", sans-serif;
    transition: background-color 0.15s;
    text-transform: initial;
    box-sizing: border-box;
    box-shadow: none !important;
}

    .chat-side-panel__action:active,
    .chat-side-panel__action:hover,
    .chat-side-panel__toggle:active,
    .chat-side-panel__toggle:hover {
        background-color: #F2F7FB;
        box-shadow: none !important;
    }

.chat-side-panel__action-icon {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .chat-side-panel__action-icon svg {
        width: 100%;
        height: 100%;
        fill: transparent;
    }

        .chat-side-panel__action-icon svg path {
            stroke: #004B8D;
        }

/* Footer with "Ställ ny fråga" always pinned at bottom */
.chat-side-panel__footer {
    margin-top: auto;
    border-top: 1px solid #E0E0E0;
    padding-top: 15px;
    padding-bottom: 15px;
    flex-shrink: 0;
}

.ai-chat-section-accordion .chat-side-panel__footer {
    padding-top: 15px;
    padding-bottom: 0 !important;
}

.chat-side-panel__footer .chat-history-button {
    width: 100%;
}

.chat-side-panel__tips {
    font-size: 13px;
    line-height: 1.5;
    color: #333;
}

    .chat-side-panel__tips p {
        margin: 0 0 8px;
    }

    .chat-side-panel__tips .button {
        margin-top: 4px;
        font-size: 13px;
    }

/* Mobile: hide the desktop side panel, keep mobile history button working */
@media only screen and (max-width: 1024px) {
    .chat-side-panel {
        display: none;
    }
}

/* ──────────────────────────────────────────────────────────────
   Selected documents display (docs tab)
   ────────────────────────────────────────────────────────────── */
.ai-docs-selected {
    border: 1px solid #C5CADD;
    border-radius: 8px;
    padding: 12px 14px;
    background-color: #F9F9F9;
    border-bottom: 0;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.ai-docs-selected__header {
    font-size: 16px;
    font-weight: 400;
    color: #5C5C5C;
    margin: 0 0 8px;
}

.ai-docs-selected__list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    border-bottom: 1px solid #c9c7c7;
    padding-bottom: 13px;
}

@media only screen and (max-width: 1024px) {
    .ai-docs-selected__list {
        border-bottom: none;
    }
}

.ai-docs-selected__item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    background-color: #C0D9EB;
    border: 1px solid #004B8D59;
    border-radius: 8px;
    min-width: 0;
}

.ai-docs-selected__label {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: white;
    color: #5C5C5C;
    font-size: 16px;
    font-weight: 700;
    border-radius: 4px;
}

.ai-docs-selected__title {
    flex: 1;
    min-width: 0;
    font-size: 14px;
    color: #004B8D;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-decoration: underline;
    text-decoration-thickness: 1px;
}

a.ai-docs-selected__title {
    cursor: pointer;
    transition: color 0.2s ease;
}

    a.ai-docs-selected__title:hover {
        color: #003366;
        text-decoration: none;
    }

.ai-docs-selected__remove {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 18px;
    line-height: 1;
    color: #555;
    padding: 0;
    border-radius: 4px;
    transition: background-color 0.15s;
}

    .ai-docs-selected__remove:hover {
        background-color: rgba(0, 0, 0, 0.08);
        color: #222;
    }

/* Compact mode: pills wrap horizontally */
.ai-docs-selected--compact .ai-docs-selected__list {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 8px;
}

.ai-docs-selected--compact .ai-docs-selected__item {
    padding: 5px 8px;
    border-radius: 8px;
    max-width: 260px;
}

.ai-docs-selected--compact .ai-docs-selected__label {
    width: 22px;
    height: 22px;
    font-size: 16px;
    border-radius: 50%;
}

.ai-docs-selected--compact .ai-docs-selected__title {
    font-size: 16px;
}

.ai-docs-selected--compact .ai-docs-selected__remove {
    width: 20px;
    height: 20px;
    font-size: 16px;
}

.icon-label-button.ai-docs-selected__show-all:focus,
.icon-label-button.ai-docs-selected__show-all:active {
    box-shadow: none !important;
}

.ai-docs-selected__show-all {
    margin-top: 10px;
}

/* Search & select documents button */
.ai-docs-selected__search {
    flex-shrink: 0;
    white-space: nowrap;
    margin-top: 8px;
}

/* ── Submitted docs state ─────────────────────── */
.ai-docs-selected--submitted {
    padding: 10px 14px;
}

.ai-docs-selected__summary-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.ai-docs-selected__summary-pill {
    display: inline-flex;
    align-items: center;
    padding: 3px 12px;
    background-color: #EFF2F7;
    border: 1px solid #C5CADD;
    border-radius: 8px;
    font-weight: 400;
    color: #5D5D5D;
    white-space: nowrap;
    font-size: 14px;
}

.ai-docs-selected--submitted .ai-docs-selected__search {
    margin-top: 0;
}

.ai-docs-selected__submitted-list {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
    border-bottom: 1px solid #c9c7c7;
    padding-bottom: 13px;
}

@media only screen and (max-width: 1024px) {
    .ai-docs-selected__submitted-list {
        border-bottom: none;
    }
}

.ai-docs-selected__submitted-list .ai-docs-selected__item {
    padding: 5px 8px;
    border-radius: 8px;
    max-width: 260px;
}

.ai-docs-selected__submitted-list .ai-docs-selected__label {
    width: 22px;
    height: 22px;
    font-size: 16px;
    border-radius: 50%;
}

.ai-docs-selected__submitted-list .ai-docs-selected__title {
    font-size: 16px;
}

.ai-docs-selected__item--disabled {
    opacity: 1;
    pointer-events: none;
    cursor: default;
    padding: 5px 8px;
    border-radius: 8px;
    max-width: 260px;
    background-color: #C0D9EB;
    border: 1px solid #004B8D59;
}

    .ai-docs-selected__item--disabled .ai-docs-selected__label {
        background-color: white;
        color: #5C5C5C;
        width: 22px;
        height: 22px;
        font-size: 16px;
        border-radius: 4px;
    }

    .ai-docs-selected__item--disabled .ai-docs-selected__title {
        font-size: 13px;
        color: #1a1a1a;
        text-decoration: none;
        pointer-events: none;
        cursor: default;
    }

/* Mobile: horizontal scroll for document pills */
@media only screen and (max-width: 1024px) {
    .ai-docs-selected__list {
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        gap: 8px !important;
        padding-bottom: 4px !important;
        scrollbar-width: none !important;
    }

        .ai-docs-selected__list::-webkit-scrollbar {
            display: none !important;
        }

    .ai-docs-selected__item {
        flex-shrink: 0;
        max-width: 260px;
        padding: 5px 8px;
        border-radius: 20px;
    }

    .ai-docs-selected__label {
        width: 22px;
        height: 22px;
        font-size: 15px;
        border-radius: 50%;
    }

    .ai-docs-selected__title {
        font-size: 15px;
    }

    .ai-docs-selected__remove {
        width: 20px;
        height: 20px;
        font-size: 16px;
    }

    .ai-docs-selected__item--hidden {
        display: flex !important;
    }

    /* Submitted state: show all docs in horizontal scroll */
    .ai-docs-selected__submitted-list {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        gap: 8px !important;
        padding-bottom: 4px !important;
        scrollbar-width: none !important;
    }

        .ai-docs-selected__submitted-list::-webkit-scrollbar {
            display: none !important;
        }

    /* Disabled items on mobile: same look as normal pills, just not clickable */
    .ai-docs-selected__item--disabled {
        opacity: 1;
        pointer-events: none;
        cursor: default;
        flex-shrink: 0;
        max-width: 260px;
        padding: 5px 8px;
        border-radius: 20px;
        background-color: #C0D9EB;
        border: 1px solid #004B8D59;
    }

        .ai-docs-selected__item--disabled .ai-docs-selected__label {
            background-color: white;
            color: #5C5C5C;
            width: 22px;
            height: 22px;
            font-size: 16px;
            border-radius: 50%;
        }

        .ai-docs-selected__item--disabled .ai-docs-selected__title {
            font-size: 13px;
            color: #1a1a1a;
            text-decoration: none;
        }
}