body.swing-stories {
    #dashboardheader, .mosaic-top-header {
        position: static;
        z-index: 1;
    }
}

#dashboardheader {
    background: #FFF;
}

#innerheader {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    max-width: 1188px;
    margin: 0 auto;
    padding: 16px 24px;
        
    #logo {
        width: 110px;
    }
    
    h1 {
        color: #000;
        margin: 0;
        font-size: 1.5rem;
        font-weight: normal;
    }
}

#dashboardviews a {
    color: #003A60;
    font-weight: 600;

    &:hover {
        text-decoration: none;
    }
}

body.screenshot {
	background: #FFF;
}

.wrapper-sidebar .theme-link {
    font-weight: 400;
}

body.swing-stories #dashboardwrapper.transparent-background.sidebar, body.swing-stories #dashboardwrapper.sidebar {
    max-width: 1200px;
    width: 100%;
    padding-top: 30px;
    padding-right: 30px;
    padding-left: 30px;
    margin-top: -100px;
    background: #FFF;
}

.name_mosaic2 #dashboardheader {
    border-bottom: 4px solid #9000B7;
}

.name_mosaic2 #innerheader {
    max-width: 1140px;
    width: 100%;
    margin: 0 auto;
    padding: 20px 10px;
}

.name_mosaic2 #mainwrapper {
	min-height: 100vh;
    position: relative;
    background: #fafafa;
	padding-bottom: 170px;
	box-sizing: border-box;
}

.name_mosaic2 #mainwrapper.themeview {
    background: none;
}

.name_dashboard #tile_10,
.name_dashboard #tile_20,
.name_dashboard #tile_92,
.name_dashboard #tile_93,
.name_dashboard #tile_112,
.name_dashboard #tile_118 {
    position: relative;
    padding-left: 50px;
}

.name_dashboard #tile_10:before,
.name_dashboard #tile_20:before,
.name_dashboard #tile_92:before,
.name_dashboard #tile_93:before,
.name_dashboard #tile_112:before,
.name_dashboard #tile_118:before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    width: 30px;
    height: 30px;
    background: url(images/bookmark.svg) no-repeat center;
    background-size: contain;
    transform: translateY(-50%);
}

.score .free-tile {
    position: relative;
    padding: 0 0 0 56px!important;
}

.score .free-tile::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    width: 40px;
    height: 40px;
    background: url(images/score.svg) no-repeat center;
    background-size: contain;
    transform: translateY(-50%);
}

#sticky {
	top: 0;
	background-color: #003A60;
	box-shadow: 5px 5px 6px 0px rgb(0 0 0 / 10%);
	position: fixed;
	left: 0;
	z-index: 90;
	width: 100%;
	height: 45px;
	transition: opacity 0.3s ease-in;
}

#sticky.sticky-hidden {
	opacity: 0;
	height: 0px;
	transition: height 0.1s ease-out;
}

.mosaic-sticky-content {
	max-width: 1140px;
	width: 100%;
	margin: 0 auto;
	padding: 0 10px;
}

#sticky .mosaic-sticky-content h2 {
	margin: 0;
	padding: 0;
	line-height: 45px;
	font-size: 1.2em;
	color: #fff;
}

section.tile h2.no-subtitle, section.tile h3.tile-header.no-subtitle, section.tile header.free-table h2.no-subtitle, section.tile header.free-table h3.tile-header.no-subtitle {
    /*overflow: visible;*/
    height: 24px;
}

.name_dashboard .sticky-visible #dashboard-icon-wrapper {
	color: #FFF;
}

.name_dashboard .sticky-visible #breadcrumb-container, #UserInfo {
	display: none!important;
}

.name_dashboard .sticky-visible:not(.scroll-up) #dashboardwrapper {
	margin-top: 70px;
}

.name_dashboard .sticky-visible #dashboardViewsHeader {
	max-width: 1140px;
	position: fixed;
	top: 0;
	margin-top: 0;
	z-index: 91;
}

.name_mosaic2 .theme {
	border: 3px solid rgba(0, 0, 0, 0.125) !important;
    border-radius: 0.35rem;
	transition: all 0.2s ease-in-out;
	height: 230px;
    width: 190px;
}

.name_mosaic2 .theme .theme__image {
    height: 185px;
}

.name_mosaic2 .theme .theme__name>.name_wrapper {
    font-weight: 700;
    font-size: 16px;
}

.name_mosaic2 .theme.caption {
    border: none !important;
	width: 100%;
	height: auto;
}

.name_mosaic2 .theme.theme-empty {
    border: none !important;
}

.name_mosaic2 .theme: hover {
    border-color: #343a40 !important;
}

.name_mosaic2 #theme_3 {
	background: #8ed427 !important;
}

.name_mosaic2 #theme_3:hover {
    background: #a0dd45 !important;
}

.name_mosaic2 #theme_4 {
	background: #ff49a4 !important;
}

.name_mosaic2 #theme_4:hover {
    background: #ff70b8 !important;
}

.name_mosaic2 #theme_5 {
	background: #31b0d0 !important;
}

.name_mosaic2 #theme_5:hover {
    background: #51bcd7 !important;
}

.name_mosaic2 #theme_6 {
	background: #ff6c13 !important;
}

.name_mosaic2 #theme_6:hover {
    background: #ff843a !important;
}

.name_mosaic2 .theme .theme__name {
	background: none !important;
}

section.tile.free.width2.height1.nolink._5 .free-tile {
    background: none !important;
    box-shadow: none;
}

.name_mosaic2 footer#footer {
    background: #9000B7;
	padding: 20px 0;
	position: absolute;
    bottom: 0;
    width: 100%;
}

.name_mosaic2 footer#footer .footer-inner {
    max-width: 1140px;
    width: 100%;
    margin: 0 auto;
    padding: 0 10px;
}

.name_mosaic2 footer#footer .footer-inner img {
    height: 120px;
}

.background-wrapper, .story-title1, .story-title2 {
	display: none;
}

.name_dashboard .story-title1, .name_monitor_onderwijs_en_kindontwikkeling .story-title2 {
    display: inline-block;
}

.name_dashboard .background-wrapper, .name_monitor_onderwijs_en_kindontwikkeling .background-wrapper {
	display: block;
	position: relative;
	height: 500px;
}

.header-image {
	position: absolute;
	top: 0;
	right: 0;
	width: 100%;
	height: 100%;
	-webkit-transition: opacity 1s ease-in-out;
	-moz-transition: opacity 1s ease-in-out;
	-ms-transition: opacity 1s ease-in-out;
	-o-transition: opacity 1s ease-in-out;
	transition: opacity 1s ease-in-out;
	opacity: 1;
	background-size: cover;
	background-repeat: no-repeat;
    background-position: center center;
}

.cgdhjihtxfogev .inleiding {
    background: url(images/shutterstock_490906510.jpg);
    background-position-y: 35%;
}

.cgdhjiht5jeihop .leeswijzer, .cgdhjihtxgciiihj  .colofon {
    background-image: url(images/brunssum.jpg);
    background-position-y: 54%;
}

.cgdhjihrehivtd .leefbaarheid {
    background-image: url(images/leefbaarheid.jpg);
    background-position-y: 30%;
}

.cgdhjihreibgfthd .veiligheid {
    background-image: url(images/veiligheid.jpg);
    background-position-y: 0%;
}

.cgdhjihreiehj1y .wonen {
    background-image: url(images/wonen.jpg);
	background-position-y: 68%;
}

.cgdhjjbibrjga8ge .vrijetijdsbesteding {
    background-image: url(images/vrijetijdsbesteding.jpg);
	background-position-y: 36%;
}

.cgdhjjbibyicb0gi .gezondheid {
    background-image: url(images/gezondheidwelzijn.jpg);
	background-position-y: 58%;
}

.cgdhjjbichelhfgfa .beheeronderhoud {
    background-image: url(images/onderhoud.jpg);
	background-position-y: 22%;
}

.cgdhjiht8hfnes .onderzoeksverantwoording, .cgdiarhdjejajfk .databank {
    background-image: url(images/databank.jpg);
	background-position-y: 51%;
}

.cgdihpd6tfgjk, .cgdih7jd7hj4fhc, .cgdihgfjjkgfjghcjh, .cgdiitsnjiyiat, .cgdiitsv7ahji {
    .inleiding {
        background-image: url(images/default.jpg);
        background-position: left center;
    }
}

.cgdih7jd9idiawgg {
    .veiligheid-op-school {
        background-image: url(images/veiligheid-op-school.jpg);
    }
}

.cgdih7jdgehcjabia {
    .taalontwikkeling {
        background-image: url(images/taalontwikkeling.jpg);
    }
}

.cgdiiejicigeua {
    .leefstijl {
        background-image: url(images/leefstijl.jpg);
    }
}

.cgdih7jflnihib9 {
    .talent {
        background-image: url(images/talent.jpg);
    }
}

.cgdih7jfqcie7n {
    .zorg {
        background-image: url(images/zorg.jpg);
    }
}

@media only screen and (min-width: 1px) and (max-width: 1200px) {
    body.swing-stories #dashboardwrapper.sidebar .wrapper-main {
        width: 100%;
    }
}

@media only screen and (min-width: 1px) and (max-width: 593px) {
	.name_mosaic2 #mainwrapper {
		padding-bottom: 100px;
	}
	.name_mosaic2 footer#footer .footer-inner img {
		height: 60px;
	}
	#sticky .mosaic-sticky-content h2 {
		font-size: 1em;
	}
}

.swing-stories #dashboardviews {
    	.quote-tile, .highlight-tile {
        
        .free-tile {
            padding-top: 39px;
            padding-bottom: 39px;
        }
    }
}

#dashboardviews {
	.quote-tile, .highlight-tile {
        
        .free-tile {
            position: relative;
            border: 2px solid #ccc;
            max-width: 100%;
            padding-right: 39px;
            padding-left: 39px;
            font-size: 18px;
                        
            &:before {
                content: "";
                width: 50px;
                height: 12px;
                background: #FFF;
                position: absolute;
                bottom: -5px;
                left: 27px;
                display: flex;
                justify-content: center;
                align-items: center;
            }

            .freecontent {
                font-size: 18px;
            }

            &:after {
                content: "";
                width: 30px;
                height: 5px;
                border-radius: 20px;
                background: #000;
                position: absolute;
                bottom: -3px;
                left: 37px;
            }
        }  

        &:before {
            font-family: "Font Awesome 6 Pro";
            font-weight: bold;
            font-size: 30px;
            position: absolute;
            top: -16px;
            left: 27px;
            width: 50px;
            text-align: center;
            color: #000000;
            background: #FFF;
            z-index: 1;
        }

        .report-source {
            position: absolute;
            bottom: 10px;
            right: 10px;
            margin: 0;
            font-size: 14px;
            color: #01496d;

            a {
                display: flex;
                align-items: center;
                gap: 8px;
                color: #01496d;
                text-decoration: none;

                &:hover {
                    text-decoration: underline;
                }
            }
        }
    }

    .quote-tile {
        &:before {
            content: "\f10d";
        }
    }

    .highlight-tile {
        &:before {
            content: "\f648";
        }
    }
}