/*
Theme Name: AllroundWeb Child
Theme URI: http://www.allroundweb.nl
Description: Designed by <a href="http://allroundweb.nl">Allround Web</a>.
Author: Rob Abrahams
Version: 1.0.0
Template: allroundweb-theme
*/

/* -----------------------------
*  Officiele kleuren van Provincie-utrecht
*
*  Basis kleuren:
*  Blauw: #0064be;
*  Zwart: rgb(0, 0, 0)
*
*  Ondersteunende kleuren:
*  Blauw: rgb(0, 152, 212)
*  Groen: rgb(131, 184, 26)
*  Oranje: rgb(243, 153, 16)
-------------------------------*/

/* -----------------------------
*  Custom Fonts van Provincie-utrecht
-------------------------------*/
@font-face {
    font-family: "RotisSemiSansStd";
    font-style: normal;
    font-weight: 400;
    src: url(./fonts/2811EC_0_0.eot?);
    src: url(./fonts/2811EC_0_0.eot?#iefix) format("embedded-opentype"), url(./fonts/2811EC_0_0.woff) format("woff"), url(./fonts/2811EC_0_0.ttf) format("truetype")
}

@font-face {
    font-family: "RotisSemiSansStd";
    font-style: normal;
    font-weight: 700;
    src: url(./fonts/2811EC_1_0.eot?);
    src: url(./fonts/2811EC_1_0.eot?) format("embedded-opentype"), url(./fonts/2811EC_1_0.woff) format("woff"), url(./fonts/2811EC_1_0.ttf) format("truetype")
}

@font-face {
    font-family: News Gothic Std;
    font-style: normal;
    font-weight: 400;
    src: local("News Gothic Std Regular"), local("News-Gothic-Std-Regular"),
        url(./fonts/NewsGothicStd.woff2) format("woff2"),
        url(./fonts/NewsGothicStd.woff) format("woff"),
        url(./fonts/NewsGothicStd.ttf) format("truetype");
}

@font-face {
    font-family: News Gothic Std;
    font-style: normal;
    font-weight: 700;
    src: local("News Gothic Std Bold"), local("News-Gothic-Std-Bold"),
        url(./fonts/NewsGothicStd-Bold.woff2) format("woff2"),
        url(./fonts/NewsGothicStd-Bold.woff) format("woff"),
        url(./fonts/NewsGothicStd-Bold.ttf) format("truetype");
}

/* -----------------------------
*  Custom Colors from diogram van Provincie-utrecht
-------------------------------*/
.colorbg-link1,
body main .colorbg-link1 h1,
body main .colorbg-link1 span {
    background-color: #B9E5FA;
    color: #0064BE !important;
}

.colorbg-link2 {
    background-color: #0064BE;
}

.colorbg-link3 {
    background-color: #F42837;
}

.colorbg-link4 {
    background-color: #1E3877;
}

.colorbg-link5 {
    background-color: #F76973;
}

/* -----------------------------
*  Main page color by selected "Pagina soort"
-------------------------------*/
.stap2-content main.link1 .h2-klimaatadaptatie,
.stap2-content main.link1 .h2-programma,
.stap2-content main.link1 .aw-programma-li,
.stap2-content main.link1 .aw-programmas-ul a,
.stap3-content main.link1 h2,
.stap2-content main.link1 .aw-programma-li.important-style-li:before,
.stap2-content main.link1 .aw-programma-li,
.stap2-content main.link1 .aw-programma-li a,
.stap3-content main.link1 .aw-ul-pages .aw-programmas-ul .aw-programma-li {
    /* color: #B9E5FA; */
    color: #0064BE;
}

.stap3-content main.link1 .aw-content-personen-ul,
.stap3-content main.link1 .aw-periodes-inner.active,
.stap3-content main.link1 .aw-jaartal-inner.active {
    background-color: #B9E5FA;
    color: #0064BE;
    /* background-color: #0064BE; */
}

.stap2-content main.link1 .aw-bar-wrapper .gauge-container.two>.gauge .value {
    stroke: #B9E5FA !important;
    /* stroke: #0064BE !important; */
}

.stap2-content main.link2 .h2-klimaatadaptatie,
.stap2-content main.link2 .h2-programma,
.stap2-content main.link2 .aw-programma-li,
.stap2-content main.link2 .aw-programmas-ul a,
.stap3-content main.link2 h2,
.stap2-content main.link2 .aw-programma-li.important-style-li:before,
.stap2-content main.link2 .aw-programma-li,
.stap2-content main.link2 .aw-programma-li a,
.stap3-content main.link2 .aw-ul-pages .aw-programmas-ul .aw-programma-li {
    color: #0064BE;
}

.stap3-content main.link2 .aw-content-personen-ul,
.stap3-content main.link2 .aw-periodes-inner.active,
.stap3-content main.link2 .aw-jaartal-inner.active {
    background-color: #0064BE;
}

.stap2-content main.link2 .aw-bar-wrapper .gauge-container.two>.gauge .value {
    stroke: #0064BE !important;
}

.stap2-content main.link3 .h2-klimaatadaptatie,
.stap2-content main.link3 .h2-programma,
.stap2-content main.link3 .aw-programma-li,
.stap2-content main.link3 .aw-programmas-ul a,
.stap3-content main.link3 h2,
.stap2-content main.link3 .aw-programma-li.important-style-li:before,
.stap2-content main.link3 .aw-programma-li,
.stap2-content main.link3 .aw-programma-li a,
.stap3-content main.link3 .aw-ul-pages .aw-programmas-ul .aw-programma-li {
    color: #F42837;
}

.stap3-content main.link3 .aw-content-personen-ul,
.stap3-content main.link3 .aw-periodes-inner.active,
.stap3-content main.link3 .aw-jaartal-inner.active {
    background-color: #F42837;
}

.stap2-content main.link3 .aw-bar-wrapper .gauge-container.two>.gauge .value {
    stroke: #F42837 !important;
}

.stap2-content main.link4 .h2-klimaatadaptatie,
.stap2-content main.link4 .h2-programma,
.stap2-content main.link4 .aw-programma-li,
.stap2-content main.link4 .aw-programmas-ul a,
.stap3-content main.link4 h2,
.stap2-content main.link4 .aw-programma-li.important-style-li:before,
.stap2-content main.link4 .aw-programma-li,
.stap2-content main.link4 .aw-programma-li a,
.stap3-content main.link4 .aw-ul-pages .aw-programmas-ul .aw-programma-li {
    color: #1E3877;
}

.stap3-content main.link4 .aw-content-personen-ul,
.stap3-content main.link4 .aw-periodes-inner.active,
.stap3-content main.link4 .aw-jaartal-inner.active {
    background-color: #1E3877;
}

.stap2-content main.link4 .aw-bar-wrapper .gauge-container.two>.gauge .value {
    stroke: #1E3877 !important;
}

.stap2-content main.link5 .h2-klimaatadaptatie,
.stap2-content main.link5 .h2-programma,
.stap2-content main.link5 .aw-programma-li,
.stap2-content main.link5 .aw-programmas-ul a,
.stap3-content main.link5 h2,
.stap2-content main.link5 .aw-programma-li.important-style-li:before,
.stap2-content main.link5 .aw-programma-li,
.stap2-content main.link5 .aw-programma-li a,
.stap3-content main.link5 .aw-ul-pages .aw-programmas-ul .aw-programma-li {
    color: #F76973;
}

.stap3-content main.link5 .aw-content-personen-ul,
.stap3-content main.link5 .aw-periodes-inner.active,
.stap3-content main.link5 .aw-jaartal-inner.active {
    background-color: #F76973;
}

.stap2-content main.link5 .aw-bar-wrapper .gauge-container.two>.gauge .value {
    stroke: #F76973 !important;
}

/* -----------------------------
*  Algemeen
-------------------------------*/
html,
body {
    padding: 0;
    margin: 0;
    font-family: RotisSemiSansStd, Arial, Helvetica, sans-serif;
    font-size: 17px;
    line-height: 1.5;
}

h1 {
    font-size: 1.5em;
    margin: 0 0 0.5em 0;
    color: #F42837;
}

h2 {
    font-size: 1.1em;
    margin: 0;
    color: #0064BE;
    padding-bottom: 0;
}

h3 {
    font-size: 1.1em;
    margin: 0 0 0.5em 0;
    color: #0064BE;
}

h4 {
    font-size: 1em;
    margin: 0 0 0.5em 0;
    color: #0064BE;
}

p {
    display: block;
    margin-block-start: 0.5em;
    margin-block-end: 0.5em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
}

/* -----------------------------
*  AW FLEX DIRS
-------------------------------*/
.aw-flex-wrapper {
    display: flex;
    position: relative;
    justify-content: flex-start;
    flex-wrap: nowrap;
    flex-direction: row;
    align-items: flex-start;
    align-content: center;
}

.aw-flex-wrapper.aw-stretch {
    align-items: stretch;
}

body .aw-flex-wrapper.aw-sub-content-vertical {
    flex-direction: column;
}

.aw-flex-base {
    display: block;
    position: relative;
    margin: 0;
    overflow: auto;
    flex-grow: 1;
    flex-shrink: 1;
    padding: 20px;
    box-sizing: border-box;
    height: inherit;
}

body .aw-flex-1 {
    flex: 1;
}

body .aw-flex-2 {
    flex: 2;
    flex-grow: 2;
    flex-shrink: 2;
}

body .aw-flex-3 {
    flex: 3;
    flex-grow: 3;
    flex-shrink: 3;
}

body .aw-flex-4 {
    flex: 4;
    flex-grow: 4;
    flex-shrink: 4;
}

body .aw-flex-5 {
    flex: 5;
    flex-grow: 5;
    flex-shrink: 5;
}

body .aw-flex-6 {
    flex: 6;
    flex-grow: 6;
    flex-shrink: 6;
}

body .aw-flex-7 {
    flex: 7;
    flex-grow: 7;
    flex-shrink: 7;
}

body .aw-flex-8 {
    flex: 8;
    flex-grow: 8;
    flex-shrink: 8;
}

@media (max-width: 992px) {
    .aw-flex-wrapper {
        display: flex;
        position: relative;
        justify-content: center;
        flex-wrap: nowrap;
        flex-direction: column;
        align-items: flex-start;
        align-content: flex-start;
    }
}

/* -----------------------------
*  Header
-------------------------------*/
.site-header {
    padding: 10px;
}

body header div .logo-base-header {
    padding: 0;
}

.site-header .aw-flex-wrapper {
    max-height: 80px;
    height: 80px;
    align-items: flex-end;
}

.site-header .aw-flex-wrapper .page-title-header {
    font-size: 2em;
    line-height: 0.9em;
    font-weight: bold;
    text-align: center;
    padding: 0;
    box-sizing: border-box;
}

.site-header .aw-flex-wrapper a {
    position: relative;
    width: 100%;
    display: block;
    text-align: center;
    height: 100%;
}

.site-header .aw-flex-wrapper img {
    width: 100%;
    max-width: 450px;
    height: 100%;
    aspect-ratio: auto;
    padding: 0;
    box-sizing: border-box;
    display: inline-block;
    object-fit: contain;
}

.site-header #logo {
    height: 100%;
    display: block;
    position: relative;
    overflow: hidden;
}

/* -----------------------------
*  Stap 1 CSS
-------------------------------*/
.stap1-content {
    margin: 0;
    padding: 0;
}

.page-template-page-stap1 header {
    height: 100px;
    max-height: 100px;
    box-sizing: border-box;
    background: #ffffff;
}

.page-template-page-stap1 .content-area,
.page-template-page-stap1 .content-area .aw-main-content-wrapper {
    height: calc(100vh - 100px);
    max-height: calc(100vh - 100px);
    box-sizing: border-box;
}

.stap1-content .aw-flex-wrapper {
    align-items: stretch;
}

.stap1-content .aw-content-blok-links {
    background-color: #B9E5FA;
    border-radius: 10px;
    padding: 20px 0 0 0;
}

.stap1-content .aw-content-blok-links .aw-text-inhoud,
.stap1-content .aw-content-blok-links h1 {
    padding: 0 20px;
}

.stap1-content .aw-content-blok-links .aw-text-inhoud.midden {
    padding: 0;
}

.stap1-content .aw-content-blok-rechts {
    text-align: center;
}

.stap1-content #awmapster_wrap_0 {
    display: inline-block !important;
}

.img-stap1 {
    /* height: 961px;
    width: 1016px; */
    max-width: 100%;
    width: auto;
    max-height: 80vh;
    height: auto;
    object-fit: contain;
    object-position: center top;
}

.stap1-content .aw-hoe-werkt-het-wrap {
    width: 100%;
    margin-top: 10px;
    font-size: 1em;
    color: #000000;
    cursor: pointer;
    display: inline-block;
}

.stap1-content .aw-text-midden-met-kleur {
    color: #ffffff;
    background-color: #0064BE;
    padding: 5px 20px;
    margin-bottom: 15px;
}

.stap1-content .aw-hoe-werkt-het-wrap .aw-hoe-werkt-het-icon {
    width: 27px;
    height: 27px;
    display: inline-block;
    position: relative;
    border-radius: 20px;
    color: #ffffff;
    background-color: #000000;
    text-align: center;
    font-size: 20px;
    padding: 4px;
    margin-right: 5px;
}

.stap1-content .aw-hoe-werkt-het-wrap[data-balloon-length="large"]:after {
    width: 100%;
    font-size: 0.9em;
    line-height: 1.3em;
}

/* -----------------------------
*  Stap 2 CSS
-------------------------------*/
.stap2-content {
    margin: 0;
    padding: 0;
}

.stap2-content #awmapster_wrap_0 {
    display: inline-block !important;
}

.page-template-page-stap2 .content-area,
.page-template-page-stap2 .content-area .aw-main-content-wrapper {
    height: calc(100vh - 100px);
    max-height: calc(100vh - 100px);
    box-sizing: border-box;
}

.stap2-content .flex-inner-content-vertical {
    display: block;
    width: 100%;
    height: auto;
    position: relative;
}

.stap2-content .aw-bar-wrapper {
    display: block;
    width: auto;
    /* max-width: 20vw; */
    /* height: 10vw !important; */
    overflow: hidden !important;
    position: relative;
    margin: 0 10px;
}

.stap2-content .aw-bar-wrapper>.gauge-container {
    margin: 0;
}

.stap2-content .aw-bar-wrapper .gauge-container.two>.gauge .dial {
    stroke: #334455;
    stroke-width: 10;
}

.stap2-content .aw-bar-wrapper .gauge-container.two>.gauge .value {
    stroke: rgb(0, 152, 212) !important;
    stroke-dasharray: none;
    stroke-width: 10;
}

.stap2-content .aw-bar-wrapper .gauge-container.two>.gauge .value-text {
    fill: rgb(91, 91, 91);
    font-weight: 100;
    font-size: 1em;
}

.stap2-content .aw-programmas-ul {
    padding: 0;
}

.stap2-content .aw-programma-li {
    padding: 10px 15px;
    margin: 10px 0;
    list-style-type: none;
    box-shadow: 1px 1px 8px 1px rgb(69 69 69 / 10%);
}

.stap2-content .programmas-flex-inner {
    box-sizing: border-box;
    padding: 15px;
    width: 100%;
    max-width: 500px;
}

.stap2-content .aw-programma-li.important-style-li:before {
    content: "\f005";
    /* FontAwesome Unicode */
    font-family: FontAwesome;
    display: inline-block;
    margin-left: -2em;
    /* same as padding-left set on li */
    width: 2em;
    /* same as padding-left set on li */
    font-size: 18px;
    line-height: 18px;
    text-align: center;
}

.stap2-content .aw-programma-li,
.stap2-content .aw-programmas-ul a {
    text-decoration: none;
    position: relative;
    display: block;
}

.stap2-content .aw-programma-li:hover {
    opacity: 0.7;
}

.stap2-content .aw-content-blok-midden {
    text-align: center;
    height: 100%;
}

.stap2-content .aw-content-blok-midden img {
    display: inline-block;
    width: auto;
    height: auto;
    max-width: 100%;
    position: relative;
    max-height: 80vh;
}

.stap2-content .aw-content-blok-links {
    height: 100%;
    background-color: #B9E5FA;
    border-radius: 10px;
    padding: 20px 0;
}

.stap2-content .aw-accordion-inhoud .aw-accordion {
    background-color: transparent;
    color: #0064BE;
    cursor: pointer;
    padding: 0 18px;
    width: 100%;
    text-align: left;
    border: none;
    outline: none;
    transition: 0.4s;
    border-radius: 10px;
    margin-bottom: 10px;
}

.stap2-content .aw-accordion-inhoud .aw-accordion-active,
.stap2-content .aw-accordion-inhoud .aw-accordion:hover {
    /* background-color: #ccc; */
}

.stap2-content .aw-accordion-inhoud .aw-accordion-panel {
    padding: 0 18px;
    background-color: transparent;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease-out;
    border-radius: 10px;
    margin-bottom: 10px;
}

.stap2-content .aw-accordion-inhoud .aw-accordion-panel p {
    padding: 0;
    margin: 0 0 10px 0;
}

.stap2-content .aw-accordion-inhoud .aw-accordion:before {
    content: "\02795";
    font-size: 13px;
    color: #0064BE;
    float: left;
    margin-right: 10px;
    margin-top: 3px;
    padding-bottom: 7px;
    font-family: fontawesome;
}

.stap2-content .aw-text-inhoud.boven {
    padding: 0 20px;
}

.stap2-content .aw-text-inhoud.boven h1 {
    font-size: 1em;
    color: #F42837;
}

.stap2-content .aw-text-midden-met-kleur {
    color: #ffffff;
    background-color: #0064BE;
    padding: 5px 20px;
    margin-bottom: 15px;
}

.stap2-content .aw-accordion-inhoud .aw-accordion-active:before {
    content: "\2796";
    /* Unicode character for "minus" sign (-) */
}

.stap2-content .aw-content-blok-rechts>.aw-sub-content-vertical {
    background-color: #f9f9f9;
    padding: 20px 10px 10px 10px;
    width: 100%;
    max-width: 500px;
    box-sizing: border-box;
    position: relative;
    border-radius: 10px;
}

.stap2-content .h2-klimaatadaptatie {
    width: 100%;
    display: inline-block;
    text-align: center;
}

.stap2-content .li-icon-gereed,
.stap2-content .li-icon-vertraging,
.stap2-content .li-icon-lopend,
.stap2-content .li-icon-nog-niet-van-start {
    display: inline-block;
    font-size: 18px;
    position: absolute;
    right: 15px;
    background: #ededed;
    width: 32px;
    text-align: center;
    height: 28px;
    border-radius: 20px;
    padding: 2px;
    top: 10px;
    padding-top: 5px;
}

.stap2-content .gauge-container .text-container {
    display: none;
}

.stap2-content .aw-content-relevantie-li-inner-flex,
.stap2-content .aw-flex-relevant-antw {
    display: flex;
    align-content: center;
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
}

.stap2-content .aw-content-relevantie-li-inner-flex {
    margin: 0;
}

.stap2-content .aw-content-relevantie-li-inner-flex .aw-in-text-box {
    flex: 1;
    background-color: #ebebeb;
    border-radius: 35px;
}

.stap2-content .aw-content-relevantie-li-inner-flex .aw-flex-relevant-antw .aw-schuif-balk.aw-begin-schuif-balk {
    border-top-left-radius: 35px;
    border-bottom-left-radius: 35px;
}

.stap2-content .aw-content-relevantie-li-inner-flex .aw-flex-relevant-antw .aw-schuif-balk {
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    flex: 1;
    padding: 7px;
    font-size: 12px;
    line-height: 12px;
    box-sizing: border-box;
}

.stap2-content .aw-content-relevantie-li-inner-flex .aw-flex-relevant-antw .aw-schuif-balk.active {
    border-top-right-radius: 35px;
    border-bottom-right-radius: 35px;
    background-color: #0064BE;
    color: #ffffff;
}

.stap2-content .aw-content-relevantie-li-inner-flex .aw-flex-relevant-antw .aw-schuif-balk.light-active {
    background-color: #0064BE;
}

.stap2-content .aw-content-personen-ul,
.stap2-content .aw-content-personen-li,
.stap2-content .aw-content-relevantie-ul,
.stap2-content .aw-content-personen-li,
.stap2-content .aw-content-aanknopingspunten-ul,
.stap2-content .aw-content-aanknopingspunten-li {
    list-style-type: none;
}

.stap2-content .aw-content-personen-ul,
.stap2-content .aw-content-relevantie-ul,
.stap2-content .aw-content-aanknopingspunten-ul {
    padding: 0;
    margin: 0;
}

/* -----------------------------
*  Stap 3 CSS
-------------------------------*/
.stap3-content {
    margin: 0;
    padding: 0;
}

.stap3-content .aw-content-personen-ul,
.stap3-content .aw-content-relevantie-ul,
.stap3-content .aw-content-aanknopingspunten-ul {
    padding: 0;
    margin: 0;
}

.stap3-content .aw-content-personen-ul,
.stap3-content .aw-content-personen-li,
.stap3-content .aw-content-relevantie-ul,
.stap3-content .aw-content-personen-li,
.stap3-content .aw-content-aanknopingspunten-ul,
.stap3-content .aw-content-aanknopingspunten-li {
    list-style-type: none;
}

.stap3-content .page-header {
    color: #ffffff;
    padding: 20px;
    text-align: center;
}

.stap3-content .page-header span,
.stap3-content .page-header h1 {
    color: #ffffff;
    padding: 0;
    margin: 0;
}

.stap3-content h2 {
    color: rgb(0, 152, 212);
}

.stap3-content .aw-inner-box {
    background-color: #f6f6f6;
    padding: 15px;
    height: 100%;
    box-sizing: border-box;
    border-radius: 10px;
}

.stap3-content .aw-content-personen-ul .aw-content-personen-li {
    padding: 5px 0;
}

.stap3-content .aw-content-personen-ul {
    padding: 5px 15px;
    background-color: rgb(0, 152, 212);
    color: #ffffff;
    border-radius: 0 0 10px 10px;
}

.stap3-content .aw-content-personen-ul .aw-content-personen-li a,
.stap3-content .aw-content-personen-ul .aw-content-personen-li span {
    color: #ffffff;
    text-decoration: none;
}

.stap3-content .aw-main-content-wrapper-boven,
.stap3-content .aw-main-content-wrapper-onder {
    align-items: stretch;
}

.stap3-content .aw-flex-wrapper .aw-flex-base {
    padding: 20px 10px 0 10px;
}

.stap3-content .aw-flex-wrapper .aw-flex-base:first-child {
    padding-left: 20px;
    height: inherit;
}

.stap3-content .aw-flex-wrapper .aw-flex-base:last-child {
    padding-right: 20px;
}

.stap3-content .aw-content-relevantie-li-inner-flex,
.stap3-content .aw-flex-relevant-antw {
    display: flex;
    align-content: center;
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
}

.stap3-content .aw-flex-relevant-antw {
    border-radius: 35px;
    background-color: #ebebeb;
}

.stap3-content .aw-content-relevantie-li-inner-flex {
    margin: 0;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
}

.stap3-content .aw-content-relevantie-li-inner-flex .aw-in-text-box {
    flex: 1;
    margin-top: 15px;
    width: 100%;
}

.stap3-content .aw-content-relevantie-li-inner-flex .aw-flex-relevant-antw .aw-schuif-balk.aw-begin-schuif-balk {
    border-top-left-radius: 35px;
    border-bottom-left-radius: 35px;
}

.stap3-content .aw-content-relevantie-li-inner-flex .aw-flex-relevant-antw .aw-schuif-balk {
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    flex: 1;
    padding: 7px;
    /* font-size: 12px;
    line-height: 12px; */
    box-sizing: border-box;
}

.stap3-content .aw-content-relevantie-li-inner-flex .aw-flex-relevant-antw .aw-schuif-balk.active {
    border-radius: 35px;
    background-color: #0064BE;
    color: #ffffff;
}

.stap3-content .aw-content-relevantie-li-inner-flex .aw-flex-relevant-antw .aw-schuif-balk.light-green-active {
    background-color: transparent;
}

.stap3-content .aanknopingspunten-flex {
    display: flex;
}

.stap3-content .aanknopingspunten-flex {
    display: flex;
    align-items: center;
    align-content: center;
    justify-content: flex-start;
    flex-wrap: nowrap;
    flex-direction: row;
    margin-bottom: 15px;
}

.stap3-content .aanknopingspunten-flex .aanknopingspunten-flex-inner-content.aw-fic-1 {
    flex: 2;
}

.stap3-content .aanknopingspunten-flex .aanknopingspunten-flex-inner-content.aw-fic-2 {
    padding: 20px;
    flex: 1;
}

.stap3-content .aanknopingspunten-flex .aanknopingspunten-flex-inner-content.aw-fic-3 {
    flex: 2;
}

.stap3-content .aw-voortgang-box {
    display: flex;
    height: 50px;
    width: 100%;
    background-color: #c5c5c5;
    border-radius: 25px;
}

.stap3-content .aw-voortgang-box .aw-voortgang-rondje {
    height: 50px;
    width: 50px;
    border-radius: 25px;
}

.stap3-content .aw-voortgang-inner {
    flex: 1;
    display: flex;
    justify-content: center;
}

.stap3-content .aw-voortgang-inner:last-child {
    justify-content: flex-end;
    border-top-right-radius: 25px;
    border-bottom-right-radius: 25px;
}

.stap3-content .aw-voortgang-inner:first-child {
    justify-content: flex-start;
    border-top-left-radius: 25px;
    border-bottom-left-radius: 25px;
}

.stap3-content .aw-voortgang-inner .checkmark {
    display: none;
}

.stap3-content .aw-voortgang-inner.active .checkmark {
    display: inline-block;
    width: 50px;
    height: 50px;
    -ms-transform: rotate(45deg);
    /* IE 9 */
    -webkit-transform: rotate(45deg);
    /* Chrome, Safari, Opera */
    transform: rotate(45deg);
    background-color: #fff;
    border: 2px solid gray;
    border-radius: 25px;
    box-sizing: border-box;
}

.stap3-content .aw-voortgang-inner.aw-active-green,
.stap3-content .aw-voortgang-inner.active {
    background-color: rgb(7, 173, 7);
}

body .stap3-content .aw-voortgang-inner.aw-voortgang-gemiddeld.active {
    background: rgb(7, 173, 7);
    background: linear-gradient(90deg, rgba(7, 173, 7, 1) 50%, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0) 50%);
}

body .stap3-content .aw-voortgang-inner.aw-voortgang-niet.active {
    background: transparent;
}

.stap3-content .aw-voortgang-inner .checkmark_stem {
    position: absolute;
    width: 6px;
    height: 18px;
    background-color: rgb(7, 173, 7);
    left: 22px;
    top: 13px;
}

.stap3-content .aw-voortgang-inner .checkmark_kick {
    position: absolute;
    width: 9px;
    height: 6px;
    background-color: rgb(7, 173, 7);
    left: 17px;
    top: 25px;
}

.page-template-page-stap3 .page-content {
    padding-bottom: 20px;
}

.stap3-content .aw-gewenste-periode {
    text-align: center;
}

.stap3-content .aw-gewenste-periode-wrap {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    flex-wrap: nowrap;
}

.stap3-content .aw-gewenste-periode-wrap .aw-gewenste-periode {
    flex: 2;
    padding: 20px;
    background-color: #ffffff;
}

.stap3-content .aw-gewenste-periode-wrap .aw-gewenste-periode-uitvoering {
    flex: 1;
    padding: 20px;
}

.stap3-content .aw-gewenste-periode-uitleg {
    padding: 20px;
    background-color: #ffffff;
}

.stap3-content .aw-gewenste-select-wrapper {
    display: flex;
    text-align: center;
}

.stap3-content .aw-gewenste-select-wrapper .aw-jaartal-wrap,
.stap3-content .aw-gewenste-select-wrapper .aw-periodes-wrap {
    flex: 1;
}

.stap3-content .aw-gewenste-select-wrapper .aw-jaartal-inner,
.stap3-content .aw-gewenste-select-wrapper .aw-periodes-inner {
    padding: 5px;
    margin: 5px;
    border: 1px solid gray;
}

.stap3-content .aw-periodes-inner {
    display: none;
    cursor: pointer;
}

.stap3-content .aw-jaartal-inner {
    cursor: pointer;
}

.stap3-content .aw-periodes-inner.active,
.stap3-content .aw-jaartal-inner.active {
    background-color: #0198d8;
    color: #ffffff;
}

.stap3-content .aw-gewenste-periode-uitvoering {
    text-align: center;
}

.stap3-content .aw-gewenste-periode-uitvoering .aw-status-icon {
    font-size: 30px;
}

.stap3-content .aw-ul-pages {
    display: flex;
}

.stap3-content .aw-ul-pages .aw-programmas-ul {
    display: flex;
    align-content: center;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    flex: 1;
    list-style: none;
    padding-left: 0;
}

.stap3-content .aw-ul-pages .aw-programmas-ul .aw-programma-li {
    padding: 10px;
    margin: 10px 0;
    list-style-type: none;
    box-shadow: 1px 1px 8px 1px rgb(69 69 69 / 10%);
}

.stap3-content .aw-ul-pages .aw-programmas-ul .aw-programma-li .fa-solid {
    margin-right: 15px;
    margin-left: 5px;
    margin-top: 5px;
}

.stap3-content .display-inline-txt {
    display: inline;
    cursor: pointer;
}

.stap3-content .aw-ul-pages .aw-programmas-ul .aw-programma-li.important-style-li:before {
    content: "\f005";
    /* FontAwesome Unicode */
    font-family: FontAwesome;
    display: inline-block;
    margin-left: -2em;
    /* same as padding-left set on li */
    width: 2em;
    /* same as padding-left set on li */
    font-size: 18px;
    line-height: 18px;
    text-align: center;
}

.stap3-content .aw-ul-pages .aw-programmas-ul .aw-programma-li,
.stap3-content .aw-ul-pages .aw-programmas-ul a {
    text-decoration: none;
    position: relative;
    display: block;
}

.stap3-content .aw-ul-pages .aw-programmas-ul .aw-programma-li:hover {
    opacity: 0.7;
}

.stap3-content .li-icon-gereed,
.stap3-content .li-icon-vertraging,
.stap3-content .li-icon-lopend,
.stap3-content .li-icon-nog-niet-van-start {
    display: inline-block;
    font-size: 18px;
    position: absolute;
    left: 5px;
    background: #ededed;
    width: 32px;
    text-align: center;
    height: 28px;
    border-radius: 20px;
    padding: 2px;
    top: 10px;
    padding-top: 5px;
}

/* -----------------------------
*  Stap 4 CSS
-------------------------------*/
.stap4-content {
    margin: 0;
    padding: 0;
}

.stap4-content .aw-inner-box {
    background-color: #f6f6f6;
    padding: 15px;
    height: 100%;
    box-sizing: border-box;
    border-radius: 10px;
}

.stap4-content .inner-toelichting {
    background-color: #B9E5FA;
    padding: 0;
}

.stap4-content .aw-trekker-inspanning-wrap {
    padding: 20px;
    background-color: #ffc1c5;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}

.stap4-content .aw-trekker-inspanning-wrap strong {
    color: #000;
    font-weight: 600;
}

.stap4-content .inner-toelichting h2 {
    padding-top: 20px;
    padding-right: 20px;
    padding-left: 20px;
}

.stap4-content .inner-toelichting p {
    padding: 0 20px 20px 20px;
    margin: 0;
}

.stap4-content .aw-inner-box.inner-realisatie {
    background: transparent;
}

.stap4-content .page-header {
    color: #ffffff;
    padding: 20px;
    text-align: center;
}

.stap4-content .page-header span,
.stap4-content .page-header h1 {
    color: #ffffff;
    padding: 0;
    margin: 0;
}

.stap4-content .aw-bar-wrapper>.gauge-container {
    margin: -15px 0 0 0;
}

.stap4-content .aw-bar-wrapper .gauge-container.two>.gauge .dial {
    stroke: #f7f7f7;
    stroke-width: 12;
}

.stap4-content .aw-bar-wrapper .gauge-container.two>.gauge .value {
    stroke-dasharray: none;
    stroke-width: 12;
}

.stap4-content .aw-bar-wrapper .gauge-container.two>.gauge .value-text {
    fill: rgb(190, 190, 190);
    font-weight: 100;
    font-size: 1em;
}

.stap4-content .aw-bar-wrapper {
    display: block;
    width: 100%;
    max-width: 25vw;
    height: 15vw !important;
    overflow: hidden !important;
    position: relative;
    margin: auto;
}

.stap4-content .gauge-container .text-container {
    display: none;
}

.stap4-content .aw-voortgang-wrapper {
    display: flex;
}

.stap4-content .halverwege-txt {
    display: inline-block;
    width: 100%;
    text-align: center;
    font-size: 11px;
    padding: 5px;
}

.stap4-content .afgerond-txt {
    padding: 0;
    margin: 0;
    text-align: right;
    flex: 1;
    font-size: 11px;
    padding: 5px 1vw;
}

.stap4-content .vanstart-txt {
    padding: 0;
    margin: 0;
    flex: 1;
    font-size: 11px;
    padding: 5px 1vw;
}

.stap4-content .aw-bar-wrapper-txt {
    display: flex;
}

.stap4-content .aw-voortgang-wrapper h2 {
    text-align: center;
}

.stap4-content .kleuren-legend {
    font-size: 11px;
    line-height: 20px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    flex-wrap: nowrap;
    align-content: center;
    align-items: flex-start;
    height: 100%;
}

.stap4-content .kleuren-legend .rood-legend .legend-kleurtje {
    display: inline-block;
    width: 25px;
    height: 25px;
    background-color: #e97a7a;
    margin-right: 5px;
    margin-top: 10px;
    margin-bottom: -8px;
}

.stap4-content .kleuren-legend .blauw-legend .legend-kleurtje {
    display: inline-block;
    width: 25px;
    height: 25px;
    background-color: #7abaf2;
    margin-right: 5px;
    margin-top: 10px;
    margin-bottom: -8px;
}

.stap4-content .kleuren-legend .donker-blauw-legend {
    margin-bottom: 0.3vw;
}

.stap4-content .kleuren-legend .donker-blauw-legend .legend-kleurtje {
    display: inline-block;
    width: 25px;
    height: 25px;
    background-color: #065daa;
    margin-right: 5px;
    margin-top: 10px;
    margin-bottom: -8px;
}

.stap4-content .achter_op_planning .aw-bar-wrapper .gauge-container.two>.gauge .value {
    stroke: #e97a7a !important;
}

.stap4-content .gelijk_met_planning .aw-bar-wrapper .gauge-container.two>.gauge .value {
    stroke: #7abaf2 !important;
}

.stap4-content .voor_op_planning .aw-bar-wrapper .gauge-container.two>.gauge .value {
    stroke: #065daa !important;
}

.stap4-content .planning-flex {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-content: stretch;
    justify-content: space-between;
    align-items: stretch;
    border-top: 1px solid gray;
}

.stap4-content .planning-flex .aw-row-planning {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: stretch;
    align-content: center;
    flex: 1;
    padding: 0;
    border-bottom: 1px solid gray;
    border-left: 1px solid gray;
    border-right: 1px solid gray;
}

.stap4-content .planning-flex .aw-row-planning.afgerond {
    background-color: #B9E5FA;
}

.stap4-content .planning-flex .aw-row-planning .aw-planning-date {
    border-right: 1px solid gray;
}

.stap4-content .planning-flex .aw-row-planning .aw-planning-date,
.stap4-content .planning-flex .aw-row-planning .aw-planning-toelichting {
    flex: 1;
    padding: 7px;
}

.stap4-content .aw-flex-middle-blocks .aw-inner-box {
    margin-bottom: 10px;
}

.stap4-content .aw-inner-box.aw-inner-box-voortgang {
    margin-top: 20px;
    background-color: transparent;
    padding: 0;
}

.stap4-content .aw-gewenste-periode {
    text-align: center;
}

.stap4-content .aw-gewenste-periode-wrap {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    flex-wrap: nowrap;
}

.stap4-content .aw-gewenste-periode-wrap .aw-gewenste-periode {
    flex: 2;
    padding: 0 20px;
    background-color: #ffffff;
}

.stap4-content .aw-gewenste-periode-wrap .aw-gewenste-periode-uitvoering {
    flex: 1;
    padding: 20px;
}

.stap4-content .aw-gewenste-periode-uitleg {
    padding: 20px;
    background-color: #f6f6f6;
    border-radius: 10px;
}

.stap4-content .aw-gewenste-select-wrapper {
    display: flex;
    text-align: center;
}

.stap4-content .aw-gewenste-select-wrapper .aw-jaartal-wrap,
.stap4-content .aw-gewenste-select-wrapper .aw-periodes-wrap {
    flex: 1;
}

.stap4-content .aw-gewenste-select-wrapper .aw-jaartal-inner,
.stap4-content .aw-gewenste-select-wrapper .aw-periodes-inner {
    padding: 5px;
    margin: 5px;
    border: 1px solid gray;
}

.stap4-content .aw-periodes-inner {
    display: none;
    cursor: pointer;
}

.stap4-content .aw-jaartal-inner {
    cursor: pointer;
}

.stap4-content .aw-periodes-inner.active,
.stap4-content .aw-jaartal-inner.active {
    background-color: #0198d8;
    color: #ffffff;
}

.stap4-content .aw-gewenste-periode-uitvoering {
    text-align: center;
}

.stap4-content .aw-gewenste-periode-uitvoering .aw-status-icon {
    font-size: 30px;
}

.stap4-content .aw-inner-box-welke-partijen-insp {
    margin-top: 20px;
}

.stap4-content .aw-gewenste-periode-wrap-flex {
    display: flex;
    justify-content: space-between;
    align-content: stretch;
    flex-wrap: nowrap;
    flex-direction: row;
    align-items: flex-start;
}

.stap4-content .aw-gewenste-periode-wrap-flex .aw-gewenste-periode-wrap,
.stap4-content .aw-gewenste-periode-wrap-flex .aw-gewenste-periode-uitleg-wrap {
    flex: 1;
}

.stap4-content .aw-inner-status-box-realisatie {
    background: transparent;
    display: flex;
    justify-content: space-evenly;
    align-content: center;
    flex-direction: row;
    align-items: flex-start;
    padding: 10px 0;
}

.stap4-content .div-voortgang-icon {
    padding: 20px 22px;
    display: inline-block;
    margin: 0 20px 0 0;
    font-size: 25px;
    /* background: #B9E5FA; */
    background: #f6f6f6;
    border-radius: 35px;
    height: 25px;
    width: 20px;
    line-height: 15px;
    color: #0064BE;
}

.stap4-content .aw-inner-status-box-realisatie .status-box-2 {
    padding: 15px;
    background: #f6f6f6;
    border-radius: 10px;
}

/* -----------------------------
*  Algemene functionaliteit
-------------------------------*/
.aw-custom-scroll-wrap {
    height: 215px;
}

.aw-custom-scroll-wrap .aw-custom-scroll {
    overflow-y: hidden;
    height: 190px;
    padding-right: 3px;
}

.aw-custom-scroll-wrap .aw-custom-scroll.open {
    overflow-y: scroll;
}

.aw-custom-scroll-wrap span.aw-lees-meer {
    font-weight: bold;
    text-decoration: none;
    cursor: pointer;
    display: none;
}

.aw-custom-scroll-wrap span.aw-lees-meer:hover {
    text-decoration: underline;
}

.aw-custom-scroll-wrap.small-scroll {
    height: 155px;
}

.aw-custom-scroll-wrap .aw-custom-scroll.small-scroll {
    height: 140px;
}

/* -----------------------------
*  Mobiele optimalisatie
-------------------------------*/
@media(max-width: 767px){
    .page-template-page-stap1 header,
    .site-header .aw-flex-wrapper {
        height: auto;
        max-height: 99999px;
    }

    .aw-flex-wrapper .aw-flex-base {
        margin: auto;
    }

    .site-header .aw-flex-wrapper img {
        width: 130px;
    }

    .site-header .aw-flex-wrapper .page-title-header {
        font-size: 1em;
    }

    .page-content {
        padding: 0 10px;
    }

    .page-template-page-stap1 .content-area, .page-template-page-stap1 .content-area .aw-main-content-wrapper,
    .page-template-page-stap2 .content-area, .page-template-page-stap2 .content-area .aw-main-content-wrapper,
    .page-template-page-stap3 .content-area, .page-template-page-stap3 .content-area .aw-main-content-wrapper,
    .page-template-page-stap4 .content-area, .page-template-page-stap4 .content-area .aw-main-content-wrapper {
        height: auto;
        max-height: 99999px;
    }

    .stap1-content .aw-content-blok-links {
        padding-bottom: 20px;
    }

    .stap3-content .aw-flex-wrapper .aw-flex-base:first-child,
    .stap3-content .aw-flex-wrapper .aw-flex-base:last-child {
        padding: 20px 10px 0 10px;
        max-width: 100%;
    }

    .aw-flex-wrapper .aw-flex-base.blok-links-onder {
        margin: 0;
    }

    .stap4-content .aw-voortgang-wrapper {
        display: flex;
        flex-direction: column;
    }

    .stap4-content .aw-voortgang-wrapper .aw-flex-3 {
        order: 2;
    } 

    .stap4-content .aw-voortgang-wrapper .aw-flex-1 {
        order: 1;
    } 

    .stap4-content .aw-bar-wrapper {
        width: 100%;
        max-width: 100%;
    }

    .stap4-content .aw-bar-wrapper>.gauge-container {
        max-height: 165px;
    }

    .stap4-content .aw-flex-middle-blocks {
        padding-top: 0;
        margin-top: 0;
    }

    .stap4-content .kleuren-legend {
        margin-bottom: 10px;
    }
}