html body {
    font-family: Helvetica, sans-serif !important;
}

html body .lesson-content p {
    font-family: Helvetica, sans-serif !important;
}

body .btn {
    border-radius: 5px !important;
    border: 1px solid black !important;
}

.entry-blok.doen {
    background: #A8DFCE !important;
}

.entry-blok.opzoeken {
    background: #A1E3FA !important;
}

.entry-blok.verdieping {
    background: #BEBBDB !important;
}

.entry-blok.examen {
    background: #E5E4F1 !important;
}

.entry-blok.klassengesprek {
    background: #E5E4F1 !important;
}

.entry-blok.klassengesprek .fa-stack {
    background: #7E78B7;
}

.entry-blok.persoonlijk {
    background: #F7B3C9 !important;
}

.entry-blok.klassengesprek {
    background: #E5E4F1 !important;
}

.wp-block-embed__wrapper,
.video-container {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 56.25%;
}

.card-img-top img {
    height: 200px;
    object-fit: cover;
}

.wp-block-embed__wrapper iframe,
.video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}


/* set to taalrijk class */
.taalrijk {
    padding-right: 185px !important;
}

.taalrijk:after {
    content: "";
    width: 160px;
    height: 160px;
    background: url(/images/sources/taalrijk.png) no-repeat;
    background-size: contain;
    top: 10px;
    right: 5px;
    position: absolute;
    display: inline-block;
}

@media only screen and (max-width: 800px) {
    .taalrijk {
        padding-right: 0px !important;
        padding-top: 165px !important;
    }

    .taalrijk:after {
        right: auto;
    }

    blockquote strong {
        padding-right: 0px !important;
    }
}



dt {
    width: 30%;
}

dd {
    width: 70%;
}

.lesson-content h1,
.lesson-content h2 {
    color: black !important;
}

.lesson-content dl {
    background: #E5E4F1;
}

.lesson-content dt {
    text-align: left;
    padding-left: 25px;
}

.portfolio {
    background-color: #DCF2EB;
    padding: 25px;
    position: relative;
}

.entry-blok.opdrachten.portfolio {
    padding: 0;
    position: initial;
}

.entry-blok.opdrachten iframe {
	aspect-ratio: 16/9;
  	height: auto;
}

.entry-blok.opdrachten ol {
    margin: 0;
    padding: 0;
}

.entry-blok.opdrachten ol li {
    margin: 0;
    background: transparent;
    border-radius: 0px;
    padding: 0px 35px;
}

.entry-blok.opdrachten ol li::before {
    background-color: transparent;
    color: black !important;
    padding: 0;
    width: 0;
    height: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0px 8px 0px -30px;
    font-size: 100%;
    font-weight: normal;
    content: counter(list-item) ". ";
    margin-right:10px;
}

.portfolio h5,
.portfolio ol li {
    background: white !important;
}

.portfolio .fa-stack {
    position: absolute;
    right: 15px;
    top: 15px;
}

.definitionsTitle {
    background: #E5E4F1 !important;
}

.definitionsList dl {
    background-color: #FCE1E9;
}

.lesson-container-width {
    max-width: 1140px !important;
}

.portfolio .fa-stack:not(:first-of-type) {
    display: none;
}

.entry-blok.docenten {
    background: #7E78B8;
}

.exam-title {
    font-size: 1.3rem;
}

.iconslistList {
    font-family: Helvetica, sans-serif !important;
}

.iconslistList li {
    background: #DAF4FD;
    border-radius: 5px;
    color: black !important;
    padding: 10px 30px;
}

.iconslistList li i {
    display: inline-block;
    width: 33px;
    height: 33px;
    line-height: 33px;
    text-align: center;
    background: #12BAE9;
    color: #FFFFFF;
    border-radius: 50%;
    vertical-align: -1px;
    margin-left: -10px;
    margin-right: 5px;
}

html body .lesson-content h5 {
    padding: 25px;
    padding-top: 15px;
    padding-bottom: 15px;
    margin-bottom: 5px !important;
    border-radius: 5px;
    font-size: 1.3rem !important;
    color: black !important;
}

.wq_swiperQuizPreviewInfoCtr {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.wq-skin-traditional .chosen .wq_answerTxtCtr:after {
    content: "\f00c" !important;
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    margin-left: 6px;
    margin-top: 7px !important;
    border: none !important;
}

.wq-skin-traditional .chosen.wq_incorrectAnswer .wq_answerTxtCtr:after {
    content: none !important;
}

.lesson-content h5.iconsTitle {
    background-color: #DAF4FD;
}

.lesson-content ol li::before,
ol li.hijacked-ol-counter div.ol-counter {
    background-color: #F9B456;
    color: black !important;
    padding: 0;
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0px 0px 0px -30px;
    transform: translateX(-10px);
}

.entry-blok.docenten {
    border-radius: 5px;
}

.lesson-content ol li {
    background: #FEF1E0;
    border-radius: 5px;
    padding-left: 63px;
}

textarea.methode-m-text-answer {
    border-radius: 10px;
    border: none;
    max-width: none !important;
}

.answerStatusBar {
    position: absolute;
    margin-top: 25px;
    width: 50% !important;
    left: 0;
    margin-left: 15px;
}

.answer-buttons {
    max-width: none !important;
    width: 100%;
}

.answer-buttons {
    position: absolute;
    right: 10px;
    bottom: 10px;
}

.btn-success {
    background-color: #51bf9d !important;
}

.btn-success:hover {
    background-color: #3cbb93 !important;
}

.answer-buttons .btn-success {
    background-color: #51BF9D;
    border-radius: 5px !important;
}

.answer-buttons .btn-warning {
    background-color: #f9b456;
    border-radius: 5px !important;
}

.answer-buttons .btn-warning:hover {
    background-color: #fdad3e;
}

.content ul {
    margin-left: -20px;
}

.btn-danger {
    background-color: #EB5B91 !important;
}

.btn-danger:hover {
    background-color: #e74a84 !important;
}

.answer-buttons .btn-danger {
    background-color: #EB5B91;
    border-radius: 5px !important;
}

.lesson-content ol li {
    margin-bottom: 5px;
}

.entry-blok.leerdoelen {
    border-radius: 5px;
}

.entry-blok.leerdoelen ul {
    list-style: none;
    padding-left: 0;
}

.tableTitle {
    background: #ffe1e9;
}

.docenten {
    min-height: 100px;
}

.docenten .hideTeacherBlock {
    cursor: pointer;
    transition: .3s ease;
}

.docenten .hideTeacherBlock {
    transform: rotate(0deg);
}

.docenten.hidden .hideTeacherBlock {
    transform: rotate(180deg);
}

.docenten .teacherBlockContent {
    display: none;
}

.docenten.hidden .teacherBlockContent {
    display: block;
}

.entry-blok.leerdoelen ul li:before {
    content: "\f00c";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    margin-right: 10px;
}

.lesson-content dt,
.lesson-content .table thead th,
.lesson-content .table td {
    border-right: 5px solid #fff !important;
    border-bottom: 5px solid #fff !important;
}

.lesson-content dd {
    border-bottom: 5px solid #fff !important;
}

.methode-m-question-container .methode-m-answer-text-container {
    margin-bottom: 35px !important;
}

.methode-m-question-container .methode-m-answer-text-container textarea {
    border-bottom: 40px solid white;
}

.methode-m-question-container .methode-m-answer-text-container .answer-buttons .answer-loader2 {
    left: 0px;
    position: absolute;
    margin-left: 23px !important;
    bottom: 0px;
}

blockquote {
    padding: 0px 0px 0px 25px;
    background: #F9F9F7;
    background-image: none !important;
    position: relative;
    outline: 28px solid #f9f9f7;
    margin: 3rem 28px 3rem 28px !important;
    margin-top: 55px;
    margin-bottom: 55px;
}

.wp-block-quote {
    padding: 0px 0px 0px 25px;
    background: #F9F9F7;
    background-image: none !important;
    position: relative;
    outline: 28px solid #f9f9f7;
    margin: 28px;
    margin-top: 55px;
    margin-bottom: 55px;
    padding-right: 75px;
}

.wp-block-quote strong {
    font-weight: 600 !important;
    font-size: 1.3rem;
}

.wp-block-gallery.has-nested-images.is-cropped figure.wp-block-image:not(#individual-image) {
    padding: 5px;
}

.wp-block-gallery.has-nested-images.is-cropped figure.wp-block-image:not(#individual-image):first-of-type {
    padding-left: 0;
}

.wp-block-gallery.has-nested-images.is-cropped figure.wp-block-image:not(#individual-image):last-of-type {
    padding-right: 0;
}

.entry-blok.opdrachten.portfolio {
    background-color: #DCF2EB;
}

.entry-blok.opdrachten.portfolio .exam-title,
.table-responsive thead,
.table-responsive th,
.table-responsive dt,
.definitionsList dt,
.entry-blok.docenten b,
.entry-blok.opdrachten .exam-title,
.entry-blok.leerdoelen strong {
    font-family: "Montserrat", Helvetica, sans-serif !important;
}

.table-responsive .table,
.wp-block-table table {
    background-color: #FFE1E9;
}

.table-responsive .table strong {
    font-weight: 700;
}

.main-navigation nav .lesson-title,
h3 {
    color: black !important;
}

.quiz-container iframe {
    border-radius: 5px;
}

.entry-blok.opdrachten .rubricsList {
    background-color: #DCF2EB !important;
}

.entry-blok.opdrachten.portfolio .fa-stack {
    background-color: #30B194;
}

.entry-blok.opdrachten.portfolio dt {
    background-color: white;
    border-right: 5px solid #DCF2EB !important;
    border-bottom: 5px solid #DCF2EB !important;
}

.entry-blok.opdrachten.portfolio dd {
    background-color: white;
    border-bottom: 5px solid #DCF2EB !important;
}

.lesson-content .rubricsTitle {
    background: #E5E4F1;
}

.entry-blok.opdrachten.portfolio .rubricsTitle {
    background: white;
    padding-top: 15px;
    padding-bottom: 15px;
    margin-bottom: 5px !important;
    padding-left: 15px;
}

blockquote.examenblad::before {
    content: "";
    position: absolute;
    right: 0px;
    display: block;
    width: 50px;
    height: 50px;
    border-color: #007bc7 !important;
    background-image: url(/images/sources/logo_bron_rijksoverheid.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: top right;
}

blockquote.nos::before {
    content: "";
    position: absolute;
    right: 0px;
    display: block;
    width: 50px;
    height: 50px;
    border-color: #c00 !important;
    background-image: url(/images/sources/logo_bron_nos.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: top right;
}

.wq_correctAnswer.wq_singleAnswerCtr .wq_answerTxtCtr::before {
    content: "\f00c";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    left: 0px;
    font-size: 16px;
    top: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.wq_incorrectAnswer.wq_singleAnswerCtr .wq_answerTxtCtr::before {
    content: "\f00d";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    font-size: 16px;
    border: none;
    margin: 6px 6px;
}

blockquote.telegraaf::before {
    content: "";
    position: absolute;
    right: 0px;
    display: block;
    width: 100px;
    height: 50px;
    border-color: #27509a !important;
    background-image: url(/images/sources/logo_bron_telegraaf.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: top right;
}

blockquote.parool::before {
    content: "";
    position: absolute;
    right: 0px;
    display: block;
    width: 100px;
    background-position: right top;
    height: 50px;
    border-color: #111 !important;
    background-image: url(/images/sources/logo_bron_parool.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: top right;
}

blockquote.volkskrant::before {
    content: "";
    position: absolute;
    right: 0px;
    display: block;
    width: 100px;
    background-position: right top;
    height: 50px;
    border-color: #3f97aa !important;
    background-image: url(/images/sources/logo_bron_volkskrant.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: top right;
}

blockquote.ad::before {
    content: "";
    position: absolute;
    right: 0px;
    display: block;
    width: 50px;
    height: 50px;
    border-color: #d10a10 !important;
    background-image: url(/images/sources/logo_bron_ad.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: top right;
}

blockquote.rijksoverheid::before {
    content: "";
    position: absolute;
    right: 0px;
    display: block;
    width: 50px;
    height: 50px;
    border-color: #01689b !important;
    background-image: url(/images/sources/logo_bron_rijksoverheid.png);
    background-repeat: no-repeat;
    padding-right: 75px;
    background-size: contain;
    background-position: top right;
}

blockquote.nrc::before {
    content: "";
    position: absolute;
    right: 0px;
    display: block;
    width: 100px;
    height: 50px;
    border-color: #000 !important;
    background-image: url(/images/sources/logo_bron_nrc.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: top right;
}

blockquote.trouw::before {
    content: "";
    position: absolute;
    right: 0px;
    display: block;
    width: 80px;
    background-position: right top;
    height: 50px;
    border-color: #95885f !important;
    background-image: url(/images/sources/logo_bron_trouw.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: top right;
}

blockquote.rtlnieuws::before {
    content: "";
    position: absolute;
    right: 0px;
    display: block;
    width: 80px;
    background-position: right top;
    height: 50px;
    border-color: #b3d4fc !important;
    background-image: url(/images/sources/logo_bron_rtlnieuws.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: top right;
}

blockquote.nu::before {
    content: "";
    position: absolute;
    right: 0px;
    display: block;
    width: 50px;
    height: 50px;
    border-color: #010050 !important;
    background-image: url(/images/sources/logo_bron_nu.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: top right;
}

blockquote.hartvannederland::before {
    content: "";
    position: absolute;
    right: 0px;
    display: block;
    width: 50px;
    height: 50px;
    border-color: #008CFF !important;
    background-image: url(/images/sources/logo_hartvannederland.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: top right;
}

blockquote.omroepbrabant::before {
    content: "";
    position: absolute;
    right: 0px;
    display: block;
    width: 50px;
    height: 50px;
    border-color: #e00 !important;
    background-image: url(/images/sources/logo_omroepbrabant.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: top right;
}

blockquote.leeuwardercourant::before {
    content: "";
    position: absolute;
    right: 0px;
    display: block;
    width: 150px;
    height: 50px;
    border-color: #5059b3 !important;
    background-image: url(/images/sources/logo_leeuwardercourant.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: top right;
}

blockquote.degelderlander::before {
    content: "";
    position: absolute;
    right: 0px;
    display: block;
    width: 125px;
    background-position: right top;
    height: 50px;
    border-color: #d10a10 !important;
    background-image: url(/images/sources/logo_degelderlander.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: top right;
}

blockquote.tubantia::before {
    content: "";
    position: absolute;
    right: 0px;
    display: block;
    width: 50px;
    height: 50px;
    border-color: #d10a10 !important;
    background-image: url(/images/sources/logo_tubantia.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: top right;
}

blockquote.bndestem::before {
    content: "";
    position: absolute;
    right: 0px;
    display: block;
    width: 50px;
    height: 50px;
    border-color: #d10a10 !important;
    background-image: url(/images/sources/logo_bndestem.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: top right;
}

blockquote.metronieuws::before {
    content: "";
    position: absolute;
    right: 0px;
    display: block;
    width: 50px;
    height: 50px;
    border-color: #34c600 !important;
    background-image: url(/images/sources/logo_metronieuws.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: top right;
}

blockquote.nhnieuws::before {
    content: "";
    position: absolute;
    right: 0px;
    display: block;
    width: 50px;
    height: 50px;
    border-color: #0ba3e1 !important;
    background-image: url(/images/sources/logo_nhnieuws.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: top right;
}

.fa-stack-2x {
    font-size: 1.5em !important;
}

.entry-blok.opdrachten {
    border-radius: 5px;
}

.entry-blok .fa-stack {
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 100px;
    border: 1px solid black;
}

.entry-blok.opdrachten .fa-stack i {
    font-size: 1.5em;
    color: white;
}

.entry-blok.opdrachten .fa-stack {
    background: #F9B456;
}

.entry-blok.doen .fa-stack {
    background: #30B194;
}

.entry-blok.opzoeken .fa-stack {
    background: #12BAE9;
}

.entry-blok.verdieping .fa-stack {
    background: #7E78B7;
}

.entry-blok.examen .fa-stack {
    background: #7E78B7;
}

.entry-blok.klassengesprek .fa-stack {
    background: #7E78B7;
}

.entry-blok.persoonlijk .fa-stack {
    background: #EB5B91;
}




.wq-skin-flat {
    background-color: #ECC661 !important;
}

.wq-skin-traditional {
    background-color: #51bf9d !important;
}

body .wq_quizCtr.wq-skin-traditional {
    background: #17b99a !important;
}

.wq-quiz-trivia h4 {
    font-family: Helvetica, sans-serif !important;
}

body .wq_quizCtr::before {
    width: 50px;
    height: 50px;
    color: white !important;
    padding: 2px 8px;
    border-radius: 100px;
    position: absolute;
    right: 15px;
}

body .wq_quizCtr h2 {
    font-size: 22px;
    margin-bottom: 30px;
}

body .wq-quiz-trivia .wq_quizProgressBar {
    width: 100% !important
}

body .wq-quiz-trivia::before {
    background: #000 !important;
    color: white !important;
}

.wq-quiz-trivia .wq_singleAnswerCtr {
    background-color: white !important;
    border: 0px ! important;
    border-radius: 0 ! important;
    margin-bottom: 12px ! important;
}

body .wq_singleAnswerCtr .wq_answerTxtCtr {
    padding: 10px 0 3px 35px;
    color: #000000 !important;
}

body .wq_questionTextCtr h4 {
    font-weight: bold ! important;
    margin-bottom: 5px ! important;
}

.quiz-user-result {
    margin-left: 0 ! important;
    margin-right: 0 ! important;
    margin-bottom: 1px ! important;
}

body .wq_quizProgressBarCtr {
    margin-bottom: 20px;
}

body .wq-quiz-trivia .wq_quizProgressBar {
    border-radius: 0;
    background-color: white;
    box-shadow: none;
    height: 24px;
}

body .wq-quiz-trivia .wq_quizProgressBar>span {
    border-radius: 0;
    box-shadow: none;
    border: none;
    font-weight: bold;
    font-size: 14px;
    color: black;
    height: 24px;
    line-height: 26px;
    padding-right: 10px;
    background-color: #8077bc;
}

.wq-swiper-actions {
    display: flex;
}

.wq-swiper-dislike-btn {
    display: flex;
    width: 150px;
    border-radius: 0px;
    background-color: #ffe7b5 !IMPORTANT;
    background-image: none;
    box-shadow: none;
    align-items: center;
    justify-content: center;
    color: black;
    font-size: 18px;
}

.wq-swiper-like-btn {
    display: flex;
    width: 150px;
    border-radius: 0px;
    background-color: #ffe7b5 !IMPORTANT;
    background-image: none;
    box-shadow: none;
    align-items: center;
    justify-content: center;
    color: black;
    font-size: 18px;
}

body .wq_singleAnswerCtr {
    border: 0px ! important;
    margin-bottom: 15px ! important;
    border-radius: 0px ! important;
}

body .wq-quiz-swiper.wq-skin-traditional {
    background: #00bdee ! important;
    border: none;
}

body .wq-quiz-swiper.wq-skin-traditional::before {
    content: "\e542" !important;
    background: #000 !important;
    color: white !important;
}

body .wq-quiz-swiper .wq_swiperQuizPreviewInfoCtr p {
    margin-bottom: 0;
    width: 100%;
    text-align: left;
    margin-bottom: 50px;
}

body .wq-skin-traditional.wq-should-show-correct-answer .wq_singleAnswerCtr.wq_correctAnswer {
    background: white ! important;
    opacity: 1;
}

body .wq_quizCtr.wq-skin-flat {
    background: #FCBA63 ! important;
}

body .wq_quizCtr.wq-skin-traditional .wq_quizProgressBar {
    width: 100% !important;
    margin-top: 10px !important;
}

.wq_retakeQuizCtr {
    text-align: end !important;
}

.wq_questionTextCtr {
    width: 100%;
}

.wq-retake-quiz-btn.wq_retakeQuizBtn {
    background-color: #8077bc;
}

body .wq_quizCtr.wq-skin-traditional .wq-result-title.wq_resultTitle,
body .wq_quizCtr.wq-skin-traditional .wq_resultDesc {
    background: white;
    padding: 10px 15px;
    margin-bottom: 15px;
}

body .wq_quizCtr.wq-skin-traditional .wq_quizProgressValue {
    background: #8077BC ! important;
}

body .wq-skin-traditional.wq-should-show-correct-answer .wq_singleAnswerCtr.wq_incorrectAnswer {
    opacity: 1;
    background: #FEA5C8 !important;
    border-color: #FEA5C8 !important;
}

body .wq-skin-traditional.wq-should-show-correct-answer .wq_singleAnswerCtr.wq_incorrectAnswer img::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #FEA5C8;
    mix-blend-mode: multiply;
    opacity: 0.5;
    /* Adjust the opacity to your liking */
}


.wq-skin-traditional.wq-should-show-correct-answer .wq_singleAnswerCtr.wq_correctAnswer {
    background: #ff0000 ! important;
}

.wq-quiz-personality h4 {
    font-family: Helvetica, sans-serif !important;
}

.wq-quiz-personality::before {
    background: #000 !important;
    color: white !important;
}

.wq-quiz-personality .wq_singleAnswerCtr {
    background-color: white !important;
}

body .wq_singleAnswerCtr .wq_answerTxtCtr:before,
body .wq_singleAnswerCtr.chosen .wq_answerTxtCtr:after {
    content: "";
    width: 25px;
    height: 25px;
    position: absolute;
    left: 0;
    top: 3px;
    margin-top: 3px;
    background: transparent;
    border: 1px solid;
}

body .wq-skin-traditional.wq-should-show-correct-answer .wq_singleAnswerCtr.wq_incorrectAnswer {
    background: #F06793 !important;
    border-color: #F06793 !important;
    opacity: .7;
}

.wq-quiz-personality .wq_quizProgressBar {
    border-radius: 0;
    background-color: white;
    box-shadow: none;
    height: 24px;
}

.wq-quiz-personality .wq_quizProgressBar>span {
    border-radius: 0;
    box-shadow: none;
    border: none;
    font-weight: bold;
    font-size: 13px;
    color: #000000;
    background-color: #ECC661;
    line-height: 24px;
    padding-right: 5px;
}

.wq-quiz-swiper .wq_beginQuizSwiperCtr {
    display: block;
}

.wq-quiz.wq-skin-flat.wq-should-show-correct-answer .wq_singleAnswerCtr.wq_correctAnswer {
    background: #30B194 !important;
}

.wq-quiz.wq-skin-flat.wq-should-show-correct-answer .wq_singleAnswerCtr.wq_incorrectAnswer {
    background: #EB5B91 !important;
}


.wq_quizCtr.wq-skin-traditional::before {
    content: "\f5a2" !important;
    padding: 2px 10px !important;
}

.wp-block-image figure.alignright {
    z-index: 2;
    position: relative;
}

body .wq-swiper-actions button {
    border-radius: 5px !important;
}

@media only screen and (min-width: 991px) and (max-width: 1300px) {
    nav .float-left {
        margin-left: 80px;
    }

    .clearfix {
        margin-left: 1rem !important;
        margin-right: 1rem !important;
        max-width: fit-content !important;
    }
}

@media only screen and (max-width: 991px) {
    .wp-block-quote {
        padding: 25px;
        margin: 0;
    }
}


.footer {
    background-color: #7e78b7 !important;
    color: white;
}

/* Set the lesson content to 100% on mobile */
@media only screen and (width <=768px) {
    .bg-lesson.col-12 {
        padding: 0;
    }

    .bg-lesson>div.my-4 {
        margin-top: 0 !important;
    }

    .bg-lesson .lesson-content {
        margin-top: 0;
    }
}

@media only screen and (max-width: 800px) {
    .col-12 .bg-lesson {
        padding: 0 !important;
    }

    blockquote strong {
        display: flex;
        width: 100%;
        padding-right: 0;
    }
}

.methode-m-answer-text-container {
    position: relative;
}

.btn-secondary:not(:disabled):not(.disabled).active,
.show>.btn-secondary.dropdown-toggle {
    background-color: #F06793;
    border: 1px solid black;
}

.btn-secondary:not(:disabled):not(.disabled).active {
    background-color: #F06793 !important;
    border: 1px solid black !important;
}

.wq-quiz-swiper .wq_retakeSwiperBtn {
    background-color: #f9b457 !important;
    color: black !important;
}

.wq-quiz-swiper .wq_retakeSwiperBtn:hover {
    background-color: #ffa939 !important;
    color: white !important;
}


.wq-quiz-swiper .wq_IsSwiperResult .userVote {
    background-color: #ffd8a5 !important;
    color: black !important;
    font-weight: bold;
    border-radius: 0 !important;
    margin-right: 10px;
    padding-top: 5px;
    padding-bottom: 5px;
}

.wq-quiz-swiper .wq_IsSwiperResult .userVote.positiveVote .sprite:after {
    content: "\f164";
    background-image: none;
    color: black;
    font-style: normal;
    font-family: "Font Awesome 5 Free"; 
    font-weight: normal;
}

.wq-quiz-swiper .wq_IsSwiperResult .userVote.negativeVote .sprite:after {
    content: "\f165";
    background-image: none;
    color: black;
    font-style: normal;
    font-family: "Font Awesome 5 Free"; 
    font-weight: normal;
}

/* Portflio block - Equal to StudioBX */
@media print {
    /* Only for MethodeM, Studio BX uses different font */
    h1, h2, h3, h4, h5, h6 {
        font-family: "Montserrat", Helvetica, sans-serif !important;
    }

    h1 {
        margin-bottom: 0;
    }
    a {
		text-decoration: none !important;
	}

    html body .lesson-content h2 {
        margin-top: 24px !important;
        margin-bottom: 8px !important;
    }
    .pagebreak>div.lesson-cover {
        padding-top: 0 !important;
    }
	.pagebreak>div.resource-object {
		padding-top: 0 !important;
	}
    .pagebreak>div {
		padding-top: 16px !important;
	}
    .pagebreak > .entry-blok {
        padding: 16px 24px !important;
    }

    .lesson-content a::after {
        display: none;
    }
    
    .portfolio {
        margin-bottom: 0;
        padding-left: 24px;
        padding-right: 24px;
        padding-bottom: 6px;
    }
    .lesson-content .portfolio .portfolio h5 {
        margin-bottom: 5px !important;
    }
    .pagebreak > .portfolio:last-of-type {
        margin-bottom: 30px;
        padding-bottom: 30px !important;
    }
	.portfolio ol li {
		min-height: 24px;
		padding-top: 4px;
		padding-bottom: 4px;
		padding-left: 55px;
	}
	.lesson-content .portfolio ol li::before {
		position: initial;
		width: 30px;
		height: 30px;
		margin-left: -12px;
        background-color: #F9B456;
	}
	.portfolio ol li::before {
		top: 8px;
	}
    .portfolio.split-up .portfolio strong {
		margin-top: 0;
	}
    strong.exam-title {
        font-size: 15px !important;
    }

    h5.iconsTitle {
		margin-top: .5em;
	}
	ul.iconslistList {
		margin-top: 0;
	}
	ul.iconslistList li {
		margin-bottom: 4px;
	}
    ul.iconslistList li a {
		color: #000;
	}

    .lesson-content .portfolio .portfolio h5 {
        margin-top: 0 !important;
		padding: 12px 10px !important;
	}
	.portfolio .entry-blok.opdrachten .content {
		border-bottom: 3px solid white !important;
    	border-bottom-color: transparent !important;
        padding-bottom: 8px;
	}
	.portfolio .portfolio.entry-blok.opdrachten {
		margin-bottom: 0 !important;
        padding-top: 0 !important;
	}
	.portfolio.split-up {
		padding-top: 0 !important;
	}
    .portfolio .content {
		margin-bottom: 0 !important;
	}
    .portfolio h5+ol {
		margin-bottom: 0;
	}
    .sheet-size.pagebreak > .portfolio:first-child .portfolio {
        padding-top: 12px !important;
    }
    .sheet-size.pagebreak .portfolio:has(+ div:not(.portfolio)) {
		margin-bottom: 16px !important;
	}
    .sheet-size.pagebreak > blockquote.wp-block-quote {
		margin-right: 0;
	}
    .sheet-size.pagebreak > blockquote.wp-block-quote.is-layout-flow.wp-block-quote-is-layout-flow {
        overflow: auto;
    }
    .sheet-size.pagebreak > blockquote.wp-block-quote.is-layout-flow.wp-block-quote-is-layout-flow p {
        margin-top: 0;
    }
    .sheet-size.pagebreak > blockquote.wp-block-quote.taalrijk.is-layout-flow.wp-block-quote-is-layout-flow {
		overflow: initial;
	}

    #lesson-container .sheet-size .youtube-container .youtube-link {
        font-size: 60%;
        color: #999;
    }
    blockquote strong, .wp-block-quote strong {
        line-height: 1.2;
    }
    .pagebreak>div.wp-block-image {
        padding-top: 8px !important;
    }
    .wp-block-quote .wp-block-image {
		float: right;
		width: fit-content;
	}
    .sheet-size.pagebreak > .module-title {
		margin-left: -6px;
	}

    div.sheet-size.pagebreak div div.iframe-container {
		margin-bottom: 12px;
	}
	div.sheet-size.pagebreak div div.iframe-container a {
		overflow-wrap: anywhere;
	}

    blockquote.nos,
	blockquote.telegraaf,
	blockquote.parool,
	blockquote.volkskrant,
	blockquote.nrc,
	blockquote.trouw,
	blockquote.rtlnieuws,
	blockquote.hartvannederland,
	blockquote.omroepbrabant,
	blockquote.leeuwardercourant,
	blockquote.degelderlander,
	blockquote.tubantia,
	blockquote.bndestem,
	blockquote.metronieuws,
	blockquote.nhnieuws {
		padding-right: 125px;
	}

    html body {
        padding: 0;
    }
    html body #lesson-container header {
        top: 0;
        padding-left: .5in;
        padding-right: .5in;
    }
    html body #lesson-container main .sheet-size header {
        display: none;
    }

    .entry-blok.leerdoelen strong,
    .lesson-content h5.definitionsTitle,
    html body .lesson-content h5 {
        font-size: 15px !important;
    }

    .entry-blok.leerdoelen ul {
        margin-top: 4px;
    }
    .wp-block-gallery.has-nested-images.aligncenter { /* Intended overwrite of aligncenter */
        justify-content: start;
    }
    .lesson-content ol li {
        padding: 4px 20px;
        padding-left: 55px;
    }
    ul.iconslistList li {
        padding: 4px 30px;
        padding-left: 42px;
    }
    ul.iconslistList li i {
        width: 24px;
        height: 24px;
        line-height: 24px;
        margin-right: 0;
        margin-left: -28px;
        transform: translateX(-4px);
    }

    .lesson-content ol li::before,
    .lesson-content .portfolio ol li::before {
        width: 24px;
        height: 24px;
    }
    #lesson-container strong.exam-title {
        margin-bottom: 0;
    }
    .sheet-size div.resource-object {
        margin-bottom: 8px;
    }
    .entry-blok.opdrachten ol li {
        margin: 4px 0;
        padding: 4px 35px;
    }

    .lesson-content h5.definitionsTitle,
    .lesson-content h5.list-title {
        padding: 12px 10px !important;
    }
    html body .lesson-content h5 {
		padding-top: 8px;
		padding-bottom: 8px;
	}
    .lesson-content h2.portfolioTitle {
        line-height: 1;
    }
}
#lesson-container h1,
#lesson-container h2,
#lesson-container h3,
#lesson-container h4,
#lesson-container h5,
#lesson-container h6 {
    font-family: "Montserrat", Helvetica, sans-serif !important;
}

#lesson-container h1 {
    margin-bottom: 0;
}
#lesson-container a {
    text-decoration: none !important;
}

html body #lesson-container .lesson-content h2 {
    margin-bottom: 8px !important;
}
#lesson-container .pagebreak>div.lesson-cover {
    padding-top: 0 !important;
}
#lesson-container .pagebreak>div.resource-object {
    padding-top: 0 !important;
}
#lesson-container .pagebreak>div {
    padding-top: 16px !important;
}
#lesson-container .pagebreak > .entry-blok {
    padding: 16px 24px !important;
}

#lesson-container .lesson-content a::after {
    display: none;
}

#lesson-container .portfolio {
    margin-bottom: 0;
    padding-bottom: 6px;
}
#lesson-container .lesson-content .portfolio .portfolio h5 {
    margin-bottom: 5px !important;
}
#lesson-container .pagebreak > .portfolio:last-of-type {
    margin-bottom: 30px;
    padding-bottom: 30px !important;
}
#lesson-container .portfolio ol li {
    min-height: 24px;
    padding-top: 4px;
    padding-bottom: 4px;
    padding-left: 55px;
}
#lesson-container .lesson-content .portfolio ol li::before {
    position: initial;
    width: 30px;
    height: 30px;
    margin-left: -12px;
    background-color: #F9B456;
}
#lesson-container .portfolio ol li::before {
    top: 8px;
}
#lesson-container .portfolio.split-up .portfolio strong {
    margin-top: 0;
}
#lesson-container strong.exam-title {
    font-size: 15px !important;
}

#lesson-container h5.iconsTitle {
    margin-top: .5em;
}
#lesson-container ul.iconslistList {
    margin-top: 0;
}
#lesson-container ul.iconslistList li {
    margin-bottom: 4px;
}
#lesson-container ul.iconslistList li a {
    color: #000;
}

#lesson-container .lesson-content .portfolio .portfolio h5 {
    margin-top: 0 !important;
    padding: 12px 10px !important;
}
#lesson-container .portfolio .entry-blok.opdrachten .content {
    border-bottom: 3px solid white !important;
    border-bottom-color: transparent !important;
    padding-bottom: 8px;
}
#lesson-container .portfolio .portfolio.entry-blok.opdrachten {
    margin-bottom: 0 !important;
    padding-top: 0 !important;
}
#lesson-container .portfolio.split-up {
    padding-top: 0 !important;
}
#lesson-container .portfolio .content {
    margin-bottom: 0 !important;
}
#lesson-container .portfolio h5+ol {
    margin-bottom: 0;
}
#lesson-container .sheet-size.pagebreak .portfolio:has(+ div:not(.portfolio)) {
    margin-bottom: 16px !important;
}
#lesson-container .sheet-size.pagebreak > blockquote.wp-block-quote {
    margin-right: 0;
}
#lesson-container .sheet-size.pagebreak > blockquote.wp-block-quote.is-layout-flow.wp-block-quote-is-layout-flow {
    overflow: auto;
}
#lesson-container .sheet-size.pagebreak > blockquote.wp-block-quote.is-layout-flow.wp-block-quote-is-layout-flow p {
    margin-top: 0;
}
#lesson-container .sheet-size.pagebreak > blockquote.wp-block-quote.taalrijk.is-layout-flow.wp-block-quote-is-layout-flow {
    overflow: initial;
}

#lesson-container .sheet-size .youtube-container .youtube-link {
    font-size: 60%;
    color: #999;
}
#lesson-container .sheet-size .youtube-container .youtube-playlist-icon {
    display: block;
    width: 100%;
    height: 250px;
    background: #f5f4f9;
    background-image: url(https://cdn.methodem.nl/images/youtube.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 30%;
}
#lesson-container blockquote strong, .wp-block-quote strong {
    line-height: 1.2;
}
#lesson-container .pagebreak>div.wp-block-image {
    padding-top: 8px !important;
}
#lesson-container .wp-block-quote .wp-block-image {
    float: right;
    width: fit-content;
}
#lesson-container .sheet-size.pagebreak > .module-title {
    margin-left: -6px;
}

#lesson-container div.sheet-size.pagebreak div div.iframe-container {
    margin-bottom: 12px;
}
#lesson-container div.sheet-size.pagebreak div div.iframe-container a {
    overflow-wrap: anywhere;
}

#lesson-container blockquote.nos,
#lesson-container blockquote.telegraaf,
#lesson-container blockquote.parool,
#lesson-container blockquote.volkskrant,
#lesson-container blockquote.nrc,
#lesson-container blockquote.trouw,
#lesson-container blockquote.rtlnieuws,
#lesson-container blockquote.hartvannederland,
#lesson-container blockquote.omroepbrabant,
#lesson-container blockquote.leeuwardercourant,
#lesson-container blockquote.degelderlander,
#lesson-container blockquote.tubantia,
#lesson-container blockquote.bndestem,
#lesson-container blockquote.metronieuws,
#lesson-container blockquote.nhnieuws {
    padding-right: 125px;
}

html body #lesson-container  {
    padding: 0;
}
html body #lesson-container header {
    top: 0;
    padding-left: .5in;
    padding-right: .5in;
}
html body #lesson-container main .sheet-size header {
    display: none;
}

#lesson-container  .entry-blok.leerdoelen strong,
#lesson-container .lesson-content h5.definitionsTitle,
html body #lesson-container .lesson-content h5 {
    font-size: 15px !important;
}

#lesson-container .entry-blok.leerdoelen ul {
    margin-top: 4px;
}
#lesson-container .wp-block-gallery.has-nested-images.aligncenter { /* Intended overwrite of aligncenter */
    justify-content: start;
}
#lesson-container .lesson-content ol li {
    padding: 4px 20px;
    padding-left: 55px;
}
#lesson-container ul.iconslistList li {
    padding: 4px 30px;
    padding-left: 42px;
}
#lesson-container ul.iconslistList li i {
    width: 24px;
    height: 24px;
    line-height: 24px;
    margin-right: 0;
    margin-left: -28px;
    transform: translateX(-4px);
}

#lesson-container .lesson-content ol li::before,
#lesson-container .lesson-content .portfolio ol li::before {
    width: 24px;
    height: 24px;
}
#lesson-container strong.exam-title {
    margin-bottom: 0;
}
#lesson-container .sheet-size div.resource-object {
    margin-bottom: 8px;
}
#lesson-container .entry-blok.opdrachten ol li {
    margin: 4px 0;
    padding: 4px 35px;
}

#lesson-container .lesson-content h5.definitionsTitle,
#lesson-container .lesson-content h5.list-title {
    padding: 12px 10px !important;
}
html body #lesson-container .lesson-content h5 {
    padding-top: 8px;
    padding-bottom: 8px;
}
#lesson-container .lesson-content h2.portfolioTitle {
    line-height: 1;
}
/* End Portfolio block */


.extend-intention-container {
    color:#000 ! important;
}

.extend-intention-title {
    color:#000 ! important;
    font-weight:bold;
    font-family: "Montserrat", Helvetica, sans-serif !important;
}

.extend-intention-container > div {
    width: 100%;
    white-space: nowrap;
}

.extend-intention-container input {
	position: relative;
  	top: -4px ! important;
  	padding-top: 10px ! important;
	width:100% ! important;
}

.extend-intention-container > div:first-child {
    width: auto;
    white-space: nowrap;
}

.extend-intention-container button {
  	top: -4px ! important;
}

body .wq_quizCtr::before {
  padding: 0px 10px;
  margin: -10px 0 -15px 0;
  margin-top: -10px;
  margin-right: 0px;
  height: 46px;
  width: 46px;
  font-size: 20px;
  line-height: 46px;
  text-align: center;
  margin-right: 6px;
  margin-top: -10px;
  background: black;
  color: white !important;
}

body .wq-quiz-swiper.wq-skin-traditional::before {
	line-height: 42px;	
}

.wq_quizCtr h2 {
	width:100%;
}

.lesson-content .portfolio-bewijs h2, .lesson-content .portfolio-reflectie h2 {
    margin: 0 !important;
}

.portfolio-bewijs,.portfolio-reflectie {
    margin-top: 15px;
    margin-bottom: 15px;
    padding: 25px;
    border-radius: 5px;
    background-color: #f4afcf;
    
    span.fa-stack {
        width: 50px;
        height: 50px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 100px;
        border: 1px solid black;
        background: #F06793;
        i {
            color: white;
        }
    }
    h2 {
        font-size: 1.3rem !important;
	margin: 0 !important;
	clear:none ! important;
    }

    .intro {
        margin-bottom: 10px;
    }

    textarea {
        border: none;
        border-radius: 10px;
        padding: 0.375rem 0.75rem;
        font-size: 1rem;
        color: #495057;
        line-height: 1.5;
        outline: none;
	margin-bottom:10px;
    }
    .status-message {
        color: #212529 !important;
        i {
            animation: spinner 1s infinite linear;
        }
    }
}
.portfolio-reflectie .status-message {
    position: absolute;
    bottom: 0;
}

.portfolio-reflectie > .portfolio-reflectie {
    padding: 0;
      margin: 0;
        margin-top: 0px;
      margin-top: 15px;
}

.files {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    max-width: 100%;
    align-items: end;
    box-sizing:border-box;
}

.loading.portfolio-file .imagePreview {
    filter: brightness(.5);
}

.loading.portfolio-file::before {
    display: inline-block;
    font-style: normal;
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: "";
    margin-right: 10px;
    -webkit-animation: rotate 1s linear infinite;
    animation: rotate 1s linear infinite;
    z-index: 999;
    color: white;
    font-size: 40px;
    position: relative;
    top: 25%;
}

html body .portfolio-file.tiny {
    pointer-events: none;
    flex: 0 0 auto;
    max-width: calc(calc(50% - 60px) / 3);
    min-height: 100%;

    label {
        color: transparent;
        margin: 0;
    }
}

.portfolio-file.filled ~ * {
    max-width: calc(50% - 12px);
}

.portfolio-file.filled {
    border: none;
    border-radius: 5px;
    pointer-events: all;

    img {
        border-radius: 5px;
    }
    span.remove-portfolio {
        position: absolute;
        z-index: 1;
        top: 50%;
        transform: translateY(-50%);
        width: 44px;
        height: 44px;
        background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMjAiIHZpZXdCb3g9IjAgMCAxNiAyMCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4NCjxwYXRoIGQ9Ik00LjY2NjUgMC43NDA3NDFWMi45NjI5NkgxMS4zMzMyVjAuNzQwNzQxQzExLjMzMzIgMC41NDQyODQgMTEuMjU1MSAwLjM1NTg3NCAxMS4xMTYyIDAuMjE2OTU4QzEwLjk3NzMgMC4wNzgwNDIxIDEwLjc4ODkgMCAxMC41OTI0IDBINS40MDcyNEM1LjIxMDc5IDAgNS4wMjIzOCAwLjA3ODA0MjEgNC44ODM0NiAwLjIxNjk1OEM0Ljc0NDU1IDAuMzU1ODc0IDQuNjY2NSAwLjU0NDI4NCA0LjY2NjUgMC43NDA3NDFaIiBmaWxsPSJ3aGl0ZSIvPg0KPHBhdGggZD0iTTAuMjIyMTY4IDMuNzAzNjlWNC40NDQ0M0gxNS43Nzc3VjMuNzAzNjlDMTUuNzc3NyAzLjUwNzI0IDE1LjY5OTcgMy4zMTg4MyAxNS41NjA4IDMuMTc5OTFDMTUuNDIxOSAzLjA0MDk5IDE1LjIzMzQgMi45NjI5NSAxNS4wMzcgMi45NjI5NUgwLjk2MjkwOUMwLjc2NjQ1MiAyLjk2Mjk1IDAuNTc4MDQyIDMuMDQwOTkgMC40MzkxMjYgMy4xNzk5MUMwLjMwMDIxIDMuMzE4ODMgMC4yMjIxNjggMy41MDcyNCAwLjIyMjE2OCAzLjcwMzY5Wk0xLjcwMzY1IDUuOTI1OTFMMy4wNDU4NyAxOC42NzMzQzMuMDg0MTMgMTkuMDM3NCAzLjI1NTg1IDE5LjM3NDUgMy41Mjc5MSAxOS42MTk0QzMuNzk5OTcgMTkuODY0NCA0LjE1MzEgMjAgNC41MTkyIDIwSDExLjQ4MTRDMTEuODQ3NSAyMCAxMi4yMDA3IDE5Ljg2NDQgMTIuNDcyNyAxOS42MTk0QzEyLjc0NDggMTkuMzc0NSAxMi45MTY1IDE5LjAzNzQgMTIuOTU0OCAxOC42NzMzTDE0LjI5NjIgNS45MjU5MUgxLjcwMzY1Wk01LjA5NDAyIDE4LjUxNjNDNC45OTcwMiAxOC41MjM5IDQuODk5NDcgMTguNTEyMyA0LjgwNjk2IDE4LjQ4MjFDNC43MTQ0NiAxOC40NTE5IDQuNjI4OCAxOC40MDM4IDQuNTU0OTEgMTguMzQwNUM0LjQ4MTAxIDE4LjI3NzIgNC40MjAzMyAxOC4yIDQuMzc2MzIgMTguMTEzMkM0LjMzMjMyIDE4LjAyNjQgNC4zMDU4NiAxNy45MzE4IDQuMjk4NDYgMTcuODM0OEwzLjU1NzcyIDguMjA1MTdDMy41NDI2IDguMDA5MzEgMy42MDU5IDcuODE1NDYgMy43MzM3MSA3LjY2NjI2QzMuODYxNTEgNy41MTcwNyA0LjA0MzM0IDcuNDI0NzUgNC4yMzkyMSA3LjQwOTYyQzQuMzM2NDEgNy40MDEwMiA0LjQzNDM1IDcuNDExOTMgNC41MjcyNyA3LjQ0MTdDNC42MjAyIDcuNDcxNDcgNC43MDYyNSA3LjUxOTUxIDQuNzgwMzUgNy41ODI5OUM0Ljg1NDQ2IDcuNjQ2NDcgNC45MTUxNCA3LjcyNDEyIDQuOTU4ODMgNy44MTEzN0M1LjAwMjUyIDcuODk4NjMgNS4wMjgzMyA3Ljk5MzczIDUuMDM0NzYgOC4wOTExTDUuNzc1NSAxNy43MjA3QzUuNzkwNjIgMTcuOTE2NiA1LjcyNzMyIDE4LjExMDQgNS41OTk1MiAxOC4yNTk2QzUuNDcxNzIgMTguNDA4OCA1LjI4OTg4IDE4LjUwMTIgNS4wOTQwMiAxOC41MTYzWk04Ljc0MDY5IDE3Ljc3NzhDOC43NDA2OSAxNy45NzQyIDguNjYyNjQgMTguMTYyNiA4LjUyMzczIDE4LjMwMTVDOC4zODQ4MSAxOC40NDA1IDguMTk2NCAxOC41MTg1IDcuOTk5OTUgMTguNTE4NUM3LjgwMzQ5IDE4LjUxODUgNy42MTUwOCAxOC40NDA1IDcuNDc2MTYgMTguMzAxNUM3LjMzNzI1IDE4LjE2MjYgNy4yNTkyIDE3Ljk3NDIgNy4yNTkyIDE3Ljc3NzhWOC4xNDgxNEM3LjI1OTIgNy45NTE2OCA3LjMzNzI1IDcuNzYzMjcgNy40NzYxNiA3LjYyNDM1QzcuNjE1MDggNy40ODU0NCA3LjgwMzQ5IDcuNDA3NCA3Ljk5OTk1IDcuNDA3NEM4LjE5NjQgNy40MDc0IDguMzg0ODEgNy40ODU0NCA4LjUyMzczIDcuNjI0MzVDOC42NjI2NCA3Ljc2MzI3IDguNzQwNjkgNy45NTE2OCA4Ljc0MDY5IDguMTQ4MTRWMTcuNzc3OFpNMTEuNzAxNCAxNy44MzQ4QzExLjY5MzkgMTcuOTMxOCAxMS42Njc0IDE4LjAyNjMgMTEuNjIzNCAxOC4xMTMxQzExLjU3OTMgMTguMTk5OCAxMS41MTg3IDE4LjI3NyAxMS40NDQ4IDE4LjM0MDNDMTEuMzcwOSAxOC40MDM2IDExLjI4NTMgMTguNDUxNyAxMS4xOTI4IDE4LjQ4MTlDMTEuMTAwNCAxOC41MTIxIDExLjAwMjkgMTguNTIzOCAxMC45MDU5IDE4LjUxNjNDMTAuODA4OSAxOC41MDg4IDEwLjcxNDMgMTguNDgyMyAxMC42Mjc2IDE4LjQzODJDMTAuNTQwOSAxOC4zOTQyIDEwLjQ2MzYgMTguMzMzNSAxMC40MDA0IDE4LjI1OTZDMTAuMzM3MSAxOC4xODU4IDEwLjI4OSAxOC4xMDAyIDEwLjI1ODggMTguMDA3N0MxMC4yMjg2IDE3LjkxNTIgMTAuMjE2OSAxNy44MTc3IDEwLjIyNDQgMTcuNzIwN0wxMC45NjUxIDguMDkxMUMxMC45NzEyIDcuOTkzNTkgMTAuOTk2NyA3Ljg5ODI4IDExLjA0MDMgNy44MTA4M0MxMS4wODM4IDcuNzIzMzggMTEuMTQ0NSA3LjY0NTU3IDExLjIxODcgNy41ODIwMUMxMS4yOTI5IDcuNTE4NDYgMTEuMzc5MSA3LjQ3MDQ1IDExLjQ3MjIgNy40NDA4M0MxMS41NjUzIDcuNDExMjIgMTEuNjYzNCA3LjQwMDYgMTEuNzYwNyA3LjQwOTYyQzExLjk1NjYgNy40MjQ3NSAxMi4xMzg0IDcuNTE3MDcgMTIuMjY2MiA3LjY2NjI2QzEyLjM5NCA3LjgxNTQ2IDEyLjQ1NzMgOC4wMDkzMSAxMi40NDIyIDguMjA1MTdMMTEuNzAxNCAxNy44MzQ4WiIgZmlsbD0id2hpdGUiLz4NCjwvc3ZnPg0K);
        background-repeat: no-repeat;
        background-position: center;
        border-radius: 50%;
        cursor: pointer;
    }
    &:hover span.remove-portfolio {
        background: rgba(255, 255, 255, 0.8);
        background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMjAiIHZpZXdCb3g9IjAgMCAxNiAyMCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4NCjxwYXRoIGQ9Ik00LjY2NjUgMC43NDA3NDFWMi45NjI5NkgxMS4zMzMyVjAuNzQwNzQxQzExLjMzMzIgMC41NDQyODQgMTEuMjU1MSAwLjM1NTg3NCAxMS4xMTYyIDAuMjE2OTU4QzEwLjk3NzMgMC4wNzgwNDIxIDEwLjc4ODkgMCAxMC41OTI0IDBINS40MDcyNEM1LjIxMDc5IDAgNS4wMjIzOCAwLjA3ODA0MjEgNC44ODM0NiAwLjIxNjk1OEM0Ljc0NDU1IDAuMzU1ODc0IDQuNjY2NSAwLjU0NDI4NCA0LjY2NjUgMC43NDA3NDFaIiBmaWxsPSIjRUI1QjkxIi8+DQo8cGF0aCBkPSJNMC4yMjIxNjggMy43MDM2OVY0LjQ0NDQzSDE1Ljc3NzdWMy43MDM2OUMxNS43Nzc3IDMuNTA3MjQgMTUuNjk5NyAzLjMxODgzIDE1LjU2MDggMy4xNzk5MUMxNS40MjE5IDMuMDQwOTkgMTUuMjMzNCAyLjk2Mjk1IDE1LjAzNyAyLjk2Mjk1SDAuOTYyOTA5QzAuNzY2NDUyIDIuOTYyOTUgMC41NzgwNDIgMy4wNDA5OSAwLjQzOTEyNiAzLjE3OTkxQzAuMzAwMjEgMy4zMTg4MyAwLjIyMjE2OCAzLjUwNzI0IDAuMjIyMTY4IDMuNzAzNjlaTTEuNzAzNjUgNS45MjU5MUwzLjA0NTg3IDE4LjY3MzNDMy4wODQxMyAxOS4wMzc0IDMuMjU1ODUgMTkuMzc0NSAzLjUyNzkxIDE5LjYxOTRDMy43OTk5NyAxOS44NjQ0IDQuMTUzMSAyMCA0LjUxOTIgMjBIMTEuNDgxNEMxMS44NDc1IDIwIDEyLjIwMDcgMTkuODY0NCAxMi40NzI3IDE5LjYxOTRDMTIuNzQ0OCAxOS4zNzQ1IDEyLjkxNjUgMTkuMDM3NCAxMi45NTQ4IDE4LjY3MzNMMTQuMjk2MiA1LjkyNTkxSDEuNzAzNjVaTTUuMDk0MDIgMTguNTE2M0M0Ljk5NzAyIDE4LjUyMzkgNC44OTk0NyAxOC41MTIzIDQuODA2OTYgMTguNDgyMUM0LjcxNDQ2IDE4LjQ1MTkgNC42Mjg4IDE4LjQwMzggNC41NTQ5MSAxOC4zNDA1QzQuNDgxMDEgMTguMjc3MiA0LjQyMDMzIDE4LjIgNC4zNzYzMiAxOC4xMTMyQzQuMzMyMzIgMTguMDI2NCA0LjMwNTg2IDE3LjkzMTggNC4yOTg0NiAxNy44MzQ4TDMuNTU3NzIgOC4yMDUxN0MzLjU0MjYgOC4wMDkzMSAzLjYwNTkgNy44MTU0NiAzLjczMzcxIDcuNjY2MjZDMy44NjE1MSA3LjUxNzA3IDQuMDQzMzQgNy40MjQ3NSA0LjIzOTIxIDcuNDA5NjJDNC4zMzY0MSA3LjQwMTAyIDQuNDM0MzUgNy40MTE5MyA0LjUyNzI3IDcuNDQxN0M0LjYyMDIgNy40NzE0NyA0LjcwNjI1IDcuNTE5NTEgNC43ODAzNSA3LjU4Mjk5QzQuODU0NDYgNy42NDY0NyA0LjkxNTE0IDcuNzI0MTIgNC45NTg4MyA3LjgxMTM3QzUuMDAyNTIgNy44OTg2MyA1LjAyODMzIDcuOTkzNzMgNS4wMzQ3NiA4LjA5MTFMNS43NzU1IDE3LjcyMDdDNS43OTA2MiAxNy45MTY2IDUuNzI3MzIgMTguMTEwNCA1LjU5OTUyIDE4LjI1OTZDNS40NzE3MiAxOC40MDg4IDUuMjg5ODggMTguNTAxMiA1LjA5NDAyIDE4LjUxNjNaTTguNzQwNjkgMTcuNzc3OEM4Ljc0MDY5IDE3Ljk3NDIgOC42NjI2NCAxOC4xNjI2IDguNTIzNzMgMTguMzAxNUM4LjM4NDgxIDE4LjQ0MDUgOC4xOTY0IDE4LjUxODUgNy45OTk5NSAxOC41MTg1QzcuODAzNDkgMTguNTE4NSA3LjYxNTA4IDE4LjQ0MDUgNy40NzYxNiAxOC4zMDE1QzcuMzM3MjUgMTguMTYyNiA3LjI1OTIgMTcuOTc0MiA3LjI1OTIgMTcuNzc3OFY4LjE0ODE0QzcuMjU5MiA3Ljk1MTY4IDcuMzM3MjUgNy43NjMyNyA3LjQ3NjE2IDcuNjI0MzVDNy42MTUwOCA3LjQ4NTQ0IDcuODAzNDkgNy40MDc0IDcuOTk5OTUgNy40MDc0QzguMTk2NCA3LjQwNzQgOC4zODQ4MSA3LjQ4NTQ0IDguNTIzNzMgNy42MjQzNUM4LjY2MjY0IDcuNzYzMjcgOC43NDA2OSA3Ljk1MTY4IDguNzQwNjkgOC4xNDgxNFYxNy43Nzc4Wk0xMS43MDE0IDE3LjgzNDhDMTEuNjkzOSAxNy45MzE4IDExLjY2NzQgMTguMDI2MyAxMS42MjM0IDE4LjExMzFDMTEuNTc5MyAxOC4xOTk4IDExLjUxODcgMTguMjc3IDExLjQ0NDggMTguMzQwM0MxMS4zNzA5IDE4LjQwMzYgMTEuMjg1MyAxOC40NTE3IDExLjE5MjggMTguNDgxOUMxMS4xMDA0IDE4LjUxMjEgMTEuMDAyOSAxOC41MjM4IDEwLjkwNTkgMTguNTE2M0MxMC44MDg5IDE4LjUwODggMTAuNzE0MyAxOC40ODIzIDEwLjYyNzYgMTguNDM4MkMxMC41NDA5IDE4LjM5NDIgMTAuNDYzNiAxOC4zMzM1IDEwLjQwMDQgMTguMjU5NkMxMC4zMzcxIDE4LjE4NTggMTAuMjg5IDE4LjEwMDIgMTAuMjU4OCAxOC4wMDc3QzEwLjIyODYgMTcuOTE1MiAxMC4yMTY5IDE3LjgxNzcgMTAuMjI0NCAxNy43MjA3TDEwLjk2NTEgOC4wOTExQzEwLjk3MTIgNy45OTM1OSAxMC45OTY3IDcuODk4MjggMTEuMDQwMyA3LjgxMDgzQzExLjA4MzggNy43MjMzOCAxMS4xNDQ1IDcuNjQ1NTcgMTEuMjE4NyA3LjU4MjAxQzExLjI5MjkgNy41MTg0NiAxMS4zNzkxIDcuNDcwNDUgMTEuNDcyMiA3LjQ0MDgzQzExLjU2NTMgNy40MTEyMiAxMS42NjM0IDcuNDAwNiAxMS43NjA3IDcuNDA5NjJDMTEuOTU2NiA3LjQyNDc1IDEyLjEzODQgNy41MTcwNyAxMi4yNjYyIDcuNjY2MjZDMTIuMzk0IDcuODE1NDYgMTIuNDU3MyA4LjAwOTMxIDEyLjQ0MjIgOC4yMDUxN0wxMS43MDE0IDE3LjgzNDhaIiBmaWxsPSIjRUI1QjkxIi8+DQo8L3N2Zz4=);
        background-repeat: no-repeat;
        background-position: center;
    }
}

.portfolio-file label {
    transform: translateY(25%);
}
html body .portfolio-file {
    aspect-ratio: 16/9;

    position: relative;

    background-color: #f8cfe2;
    border: 3px dashed #eb5b91;

    width: 49%;
    max-width: calc(50% - 12px);
    flex-direction: column;
    font-weight: bold;

    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1 1 auto;

    input[type="file"] {
        display: none;
    }

    .imagePreview {
        width: 100%;
        height: 100%;
        position: absolute;
        transition: .3s ease;
    }

    label {
        cursor: pointer;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-content: center;
        align-items: center;
    }

    label::before {
        font-style: normal;
        font-family: "Font Awesome 5 Free";
        font-weight: 900;
        content: '\2b';
        width: 40px;
        height: 40px;
        line-height: 40px;
        text-align: center;
        background: #eb5b91;
        color: #FFFFFF;
        border-radius: 50%;
    }
    &.tiny {
        display: block !important;
    }
    &.filled {
        display: flex !important;
        max-width: calc(50% - 12px);
        pointer-events: all;
    }
    &.tiny label {
        height: 100%;
        transform: translateY(0);
        font-size: 0;
    }
    &.tiny label::before {
        width: 32px;
        height: 32px;
        line-height: 32px;
        font-size: 14px;
        transform: translateY(0%);
    }

    input {
        border: 1px solid #ccc;
        display: inline-block;
        padding: 6px 12px;
        cursor: pointer;
    }
}

@keyframes rotate {
from {
    transform: rotate(0deg);
}

to {
    transform: rotate(360deg);
}
}


@media screen and (max-width: 670px) {

    .files {
        flex-direction: column;
    }

.portfolio-file {
    width: 100%;
}

}

.portfolio-bewijs, .portfolio-reflectie {
.portfolio-submit-container.is-submitted {
    .portfolio-submit-button:not(.submitted) {
        display: none;
    }
}
.portfolio-submit-container:not(.is-submitted) {
    .portfolio-submit-button.submitted {
        display: none;
    }
}
.portfolio-submit-button {
    position: relative;
    display: block;
    margin-top: 8px;
    margin-left: auto;
    padding: 4px 12px;
    font-size: 13px;
    font-weight: 700;
    color: #ffffff;

    background: #f06793;
    &:hover {
        background: rgba(237, 68, 121, 0.6980392157);
        color: #ffffff;
    }
    &.submitted {
        background: #30b194;
        &:hover {
            background: rgb(48, 177, 148, 0.7);
        }
    }

    i {
        margin-left: 8px;
    }
    span.submitted-date {
        position: absolute;
        right: 0;
        bottom: 0;
        transform: translateY(125%);
        font-size: 10px;
        font-weight: 300;
        font-style: italic;
	color: #000000;
    }

    &.loading {
        display: flex;
        align-items: center;
    }
    &.loading::before {
        content: '';
        display: block;
        width: 10px;
        height: 10px;
        margin-right: 8px;
        border: 2px dotted #fff;
        border-radius: 50%;
        border-right-color: transparent;
        animation: spinner 1s infinite linear;
    }
}
}

.portfolio-reflectie .portfolio-reflectie-item {
position: relative;
}
.portfolio-reflectie .portfolio-reflectie-item span.character-limit {
display: block;
margin: 0;
margin-top: -8px;
font-size: 12px;
text-align: right;
}

#trialBanner {
	background-color: #dbd9eb;
}

#trialBanner .fa-caret-right {
    color: #f06793;
}

html body.wp-admin .portfolio-file {
    width:47%;
}

.check-request-action-link {
    color: #6969FF; 
    cursor: pointer;
}

/*
*	Portal wishlist
*/
.mx-portal .main nav a {
	position:relative;
}