:root {
    --shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);  
    --small_radius: 4px;
    --medium_radius: 8px;
    --border_radius_large: 24px;
}
html{font-size: 14px;}
body { font-size: 14px; font-family: 'Poppins' !important;}
body, .kt-login__wrapper { background-color: #FFF !important; color: #000; }
h1{font-size: 38px;}
h2 { font-weight: 900; }
h2 span { color: var(--kleur1); }
h5{font-size: 14px;}

#kt_aside_menu_wrapper { height: calc(100vh - 65px) !important; justify-content: space-between; }
.kt-menu__item a:hover { color: var(--kleur1); }
.kt-menu__item a:hover span { color: var(--kleur1) !important; }
.kt-menu__item--here a span { color: var(--kleur1) !important; }
form input::placeholder { color: #7B7B7B; opacity: 1; }
form input::-webkit-input-placeholder { color: #7B7B7B; }
form input:-ms-input-placeholder { color: #7B7B7B; }
.kleur1 { color: var(--kleur1); }
.alert { border-radius: var(--medium_radius); font-weight: 500; }
p.center { text-align: center; }
.password-wrapper { position: relative; }
.password-wrapper input { padding-right: 42px;}
.toggle-password { position: absolute; top: 50%; right: 12px; transform: translateY(-50%); cursor: pointer; color: #999; font-size: 16px; }
.toggle-password:hover { color: #333; }
.form-group.has-error input { border: 1px #e74c3c solid !important; }
.form-group.has-error .alert { display: block; }
.floating-field { position: relative; }
.floating-label { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); font-size: 14px; color: #7B7B7B; pointer-events: none; transition: all .2s ease; background: #fff; padding: 0 4px; opacity: 0; z-index: 2; }
.floating-field.active .floating-label { top: -10px; font-size: 12px; opacity: 1; left: 0px; color: #1b1b1b; font-weight: 500; }
.col-md-6 .floating-label { left: 23px !important; }
.floating-field.active input::placeholder { opacity: 0; }
.invite_form { width: 100%; max-width: 600px; }
.invite_form h2 { text-align: center; font-size: 35px; }
.invite_form p.top { font-weight: 500; font-size: 17px; color: #727271; }
.invite_form form { margin-top: 30px; }
.invite_form form input { margin-bottom: 40px; }
.invite_form form input:is([type="text"], [type="tel"], [type="email"], [type="password"]) { border: 0; height: 50px; line-height: 50px; border-radius: var(--medium_radius); box-shadow: var(--shadow) !important; }
.invite_form .form-group { margin-bottom: 0; }
.invite_form .form-group label { margin-right: 10px; }
.btn-primary.prev { margin-right: 10px; background-color: transparent; border: 1px var(--primary) solid; color: var(--primary); }
.foto_invite { margin-bottom: 30px; max-width: 350px; max-height: 400px; }
.foto_invite img { border-radius: var(--medium_radius); max-width: 100%; max-height: 100%; }
.kt-login__actions button { min-width: 110px; font-weight: 500; border-radius: var(--small_radius); }
#menudown { padding-bottom: 16px; }
#menudown ul { list-style: none; margin: 0; padding: 0; }
#menudown ul li { text-align: center; list-style: none; margin: 0; padding: 0; }
#menudown ul li a { font-size: 12px; background-color: var(--kleur2); color:  var(--tekstkleur2); text-align: center; display: inline-block; border-radius: 5px; padding: 9px 25px; }
#menudown ul li a:hover .kt-menu__link-text { color: var(--tekstkleur2) !important; }
.poweredby { margin-top: 16px; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 400; line-height: 20px; }
.poweredby img { height: 20px; margin-left: 5px; }
.socialflex .info { padding-left: 20px; }

.centerdiv { display: flex; justify-content: center; align-items: center; }
.floating-label{background-color: transparent;}
.justify-content-space-around{display: flex; justify-content: space-around;}
/*
.dashboard .row{border: dotted 1px #254c84;}
.dashboard [class^="col-"], [class*=" col-"] {border: dotted 1px #f0b845;}
*/
.dashboard h1{margin-bottom: 0px; font-weight: bold;}
.dashboard h2{margin-bottom: 0px; font-weight: bold; color: var(--kleur2);}
.dashboard h3{margin-bottom: 0px; font-weight: bold;}
.dashboard h4{margin-bottom: 0px; font-weight: bold;}
.dashboard h5{margin-bottom: 0px; font-weight: 600;}
.dashboard h6{margin-bottom: 0px; font-weight: 500;}
.dashboard p{margin-bottom: 0px; font-weight: 400;}
.dashboard span{color: var(--kleur1);}
.dashboard span2{color: var(--kleur2);}
/*.dashboard spanred{color: var(--kleur2);}*/
.dashboard spanred{color: red;}
.dashboard i{ color: var(--kleur1);}
@media (min-width: 767px){ 
    #kt_wrapper:has(.dashboard){padding-top: 32px !important ;}
}
/*.kt-grid:has(.dashboard){background-color: var(--kleur1_10kt-menu__link);}*/
.dashboard .woningafbeelding{position: absolute; top: 4px; right: 32px; width: 96px; height: 96px; background-size: cover; background-position: center center; background-repeat: no-repeat; z-index: 1; border-radius: 50%; border: 4px solid var(--kleur1)}
.dashboard .row{margin: 16px 0px}
.dashboard .row.center{justify-content: center; margin: 8px; padding: 16px; background-color: var(--kleur1_10); border-radius: 24px;; box-shadow: 0px 1px 5px rgba(0,0,0,0.3);}
.dashboard .row.nomargin{margin: 0px;}
.dashboard .nopadding{padding: 0px !important;}
.dashboard [class^="col-"], .dashboard [class*=" col-"] {padding: 10px;}
.dashboard .kaart{padding: 32px 0px; border-radius: 16px; background-color: var(--kleur2); color: var(--tekstkleur2); text-align: center; box-shadow: 0px 1px 5px rgba(0,0,0,0.3);}
.dashboard .kaart h2{color: var(--tekstkleur2);}
.dashboard .kaartwit{padding: 8px; border-radius: 16px; background-color: var(--kleur1_10); color: var(--tekstkleur1_10); box-shadow: 0px 1px 5px rgba(0,0,0,0.3); height: 100%}
.dashboard .kaartwit { background-color: #FFF; }
.dashboard .rowwit > .minikaart{border: 1px solid var(--kleur1_70); padding: 16px;}
.dashboard .rowwit > .minikaart { border-color: #EBECF0; }
.dashboard .rowwit > .minikaart + .minikaart{border-left: 0;}
.dashboard .rowwit > .minikaart:not(.minikaart ~ .minikaart){border-top-left-radius: 16px; border-bottom-left-radius: 16px;}
.dashboard .rowwit > .minikaart:not(:has(~ .minikaart)){border-top-right-radius: 16px; border-bottom-right-radius: 16px;}
.dashboard p{line-height: 1;}
.dashboard [class*="minikaart"]{padding: 16px 16px 16px !important;}
.dashboard [class*="minikaart"] h2{margin-bottom: 4px;}
.dashboard .geenborder > [class*="minikaart"]{border: none;}
.dashboard .relative{position: relative;}
.dashboard .wrap{position: absolute; top: 8px; right: 8px;}
.dashboard .minikaart.social{padding: 16px !important;}
.dashboard .socialrow .col-xl-1{display: flex; align-items: center; justify-content: center; }
.dashboard .minikaart.social .col-xl-10{padding-left: 12px;}
.dashboard .socialflex{position: absolute; left: -16px; height: calc(200% - 16px); display: flex; align-items: flex-start; flex-direction: column; justify-content: center;}
.dashboard .socialflex .socialbig h2 { font-size: 48px; }
.dashboard .titel{padding-bottom: 0px;}
.dashboard .minikaart .icon {width: 30px; max-width: 30px; padding: 0px 0px 0px 0px; display: flex; justify-content: flex-end;}
.dashboard .minikaart .icon i:before{width: 30px; max-width: 30px;}
.dashboard .minikaart .info {width: calc(100% - 46px); max-width: calc(100% - 46px);padding: 0 8px;}
.dashboard .fa-whatsapp{font-weight: 700; color: var(--tekstkleur);}
.dashboard .wrap{display: flex; align-items: flex-end; justify-content: flex-end}
.dashboard .legend{margin: 0; padding: 0; list-style: none;}
.dashboard .legend li{display: flex; align-items: center; gap: 8px; margin: 4px 0;}
.dashboard .dot{width: 16px; height: 16px; border-radius: 4px; display: inline-block;}
.dashboard .fundadatum{text-align: right; padding-right: 30px;}
.topheader { text-align: center; padding: 45px 0 !important; }
.topheader p{ line-height: 1.7 !important; }
.topheader h2 { font-size: 38px; color: #000; margin-bottom: 15px; }
.blokbig { border:1px var(--kleur1) solid; border-radius: var(--border_radius_large); padding: 65px !important; }
.blokbig h2 { color: #000; font-size: 35px; }
/*.blokbig .btn { border-radius: 7px; margin-top: -30px; margin-right: -15px; font-weight: 500 !important; float: right; background-color: var(--kleur1); color: #FFF; text-transform: uppercase; }*/
.dashboardpage { margin-bottom: 90px; }
.dashboardpage .blokken4{
    margin-top: 30px;
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 2 kolommen */
    gap: 20px;
}
.fullwidth.blokken4 { font-weight: 400; display: block; }
.fullwidth.blokken4 .cijfer { font-size: 50px; }
.fullwidth.blokken4 .blok { margin-top: 30px; }
.sociallogos {display: flex; justify-content: space-evenly}
.sociallogos i { font-size: 45px; color: var(--kleur1) !important; }
.dashboardpage .blok{
    border:1px var(--kleur1) solid;
    background: #fff;
    padding: 25px;
    border-radius: var(--border_radius_large);
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    aspect-ratio: 1 / 1; /* zorgt voor exact gelijke hoogte/breedte */
    max-height: 135px;
    width: 100%;
}
.dashboardpage .cijfer{
    font-size: 40px;
    color: var(--kleur1);
    font-weight: 700;
    margin-bottom: 0;
}
.blokfunda {border-radius: var(--border_radius_large); margin: 45px !important; padding: 45px !important; box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.3); border: none; background-color: #e4e4e4;}
.blokfunda h2 { color: #000; }
.dashboardpage .blokfunda .blok { box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.3); border: none; display: flex; justify-content: center;}
.dashboardpage .blokfunda .cijfer { font-size: 30px; color: #000; }
.blokbig .actiedown { border-radius: 30px; padding: 15px 30px; font-size: 16px; bottom: -28px; color: var(--tekstkleur1); font-weight: 500; background-color: var(--kleur1); cursor: pointer; position: absolute; left: 50%; transform: translateX(-50%); }
.blokfunda .actiedown { border-radius: 30px; padding: 10px 20px; font-size: 14px; bottom: -20px; color: #FFF; font-weight: 500; background-color: #747473; cursor: pointer; position: absolute; left: 50%; transform: translateX(-50%); }
.promo { margin-top: 20px; line-height: 30px; }
.promo span { font-size: 30px; }
.verkoopprijs .blokvulsdfg{color: var(--tekstkleur2) !important; background-color: var(--kleur2) !important;  border-color: var(--kleur2) !important; text-align: center !important;}
.blokvul{color: #fff !important; background-color: var(--kleur1) !important; text-align: center !important;}
.blokvul .cijfer{ color: #fff !important;}
.kt-login__form{border-radius: 8px; position: absolute; top: 50%; transform: translateY(-50%); border: none !important; box-shadow: var(--shadow) !important; color: #1b1b1b}
.bannerbalk{height: 50vh !important;}
.btn-primary{background-color: var(--kleur1); color: var(--tekstkleur1); border-color: var(--kleur1);}
.btn-primary:hover{background-color: var(--kleur2); color: var(--tekstkleur2); border-color: var(--kleur1);}
.btn-secondary{background-color: var(--kleur2); color: var(--tekstkleur2); border-color: var(--kleur2);}
.btn-secondary:hover{background-color: var(--kleur1); color: var(--tekstkleur1); border-color: var(--kleur2);}
.kt-menu__item{color: #1b1b1b;}
.kt-menu__item.nohover:hover{color: none !important; background-color: transparent !important;}
.kt-menu__item:hover{color: var(--kleur1); background-color: var(--tekstkleur1_10);}
.verkochtblok .verkochtblokbig{background-color: var(--kleur1_10); box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.3); border: none;}
.eigendata{background-color: var(--kleur1_10); box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.3); border: none;}
.blok.bloknoborder{box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.3); border: none;}
.kt-menu__item.nohover .kt-menu__link.primary{color: var(--tekstkleur1)!important; background-color: var(--kleur1) !important;}
.kt-menu__item.nohover .kt-menu__link.primary:hover{color: var(--tekstkleur2) !important; background-color: var(--kleur2) !important;}
.kt-menu__item.nohover .kt-menu__link.secondary{color: var(--tekstkleur2)!important; background-color: var(--kleur2) !important;}
.kt-menu__item.nohover .kt-menu__link.secondary:hover{color: var(--tekstkleur1) !important; background-color: var(--kleur1) !important;}
.invite_form .form-group {position: relative;}
.invite_form .form-group .floating-label{left: 0px !important;}
.invite_form form input{margin-bottom: 32px;}
.verstuuruitnodiging{text-align: center; margin-bottom: -130px;}
.verstuuruitnodiging button{width: 100%; padding: 16px; font-size: 24px; border-radius: 16px;}
.alert-success{background: var(--kleur2) !important; border: 1px solid var(--kleur2) !important; color: var(--tekstkleur2) !important;}
#youtubeFrame{margin-bottom: -7px !important;}
.showmob{display: none;}
@media (min-width: 1398px){
    .verkoopprijs{justify-content: center !important; margin-top: 50px !important; margin-bottom: -130px !important;}
    .verkochtblok .verkochtblokbig{padding-top: 20px !important;}
    .verkochtblok{margin-bottom: 200px !important;}
    .donuttitel{margin-bottom: 32px;}
}
@media (max-width: 1024px){
}
@media (max-width: 1398px){
    .hidemob{display: none;}
    .showmob{display: block;}
    .geenborder .minikaart {border: none !important;}
    .geenborder .minikaart h2{text-align: center; margin: 0px;}
    .minikaart{border-left: 1px !important; border-right: 1px !important; border-radius: 8px !important; margin-bottom: 4px;}
    .dashboard .woningafbeelding {width: 72px; height: 72px;}
    
    .blokbig{padding: 16px !important;}
    .blok{margin-bottom: 16px !important; text-align: center !important;}
    .verkoopprijs{margin-top: -16px !important; margin-bottom: 0px !important;}
    .verkoopprijs .blokvul{margin-bottom: 0px !important;}
    .verkochtblok .blokbig{padding-top: 0px !important;}
    .verkochtblok{margin-bottom: 64px !important;}
    .topheader{padding: 16px 0 !important;}
    .topheader h2{margin-bottom: 8px;}
    .paginatitel{margin-bottom: 64px !important;}
    .paginatitel h1, .paginatitel h5{text-align: center;}
    .sociallogos i{font-size: 32px;}
    .blokken4{margin-top: 16px !important;}
    .fullwidth.blokken4 .blok {margin-top: 0px;}    
    .actiedown{white-space: nowrap; bottom: -28px !important;}
    .eigendata{padding-bottom: 32px !important;}
    .blokfunda{margin: 64px 0 0 !important; padding: 16px !important;}
    .dashboard .row.center{margin: 0; padding: 16px;}
    .nopaddingmob{padding: 0px 0px 16px !important;}
    .minikaart{border: 1px solid #EBECF0 !important;}
    .dashboard .socialflex{height: unset; left: 0px; display: flex; align-items: center;}
    .introtekst{margin: 0px 0px 16px !important;}
    .promo {margin: 0 -20px; text-align: center;}
    .promo span{margin: 0 -10px;}
    .socialbreaker{padding-top: 100px !important;}
    .socialflex .info {padding-left: 0px; text-align: center;}
    .dashboard .titel {text-align: center;}
    .kaartwit{padding: 8px !important;}
    .fundablok .fundadatum{position: relative !important; top: unset !important; right:unset !important; text-align: center !important; padding: 0px !important; width: 100%; margin-top: -8px;}
    .sptekst{text-align: center;}
    .dashboard .wrap {position: unset; padding: 8px; justify-content: space-between}
    .dashboard #donut{width: 100px !important; height: 100px !important;}
    .woningdelenrow .col-xl-5{padding: 0 !important;}
    .modal-footer{display: none;}
    .minikaart .row{display: flex; flex-direction: column; align-content: center; align-items: center;}
    .minikaart.col-6{display: flex; flex-direction: column; align-content: center; align-items: center; margin-bottom: 0px;}
    .minikaart.col-6 .info{min-width: 100%;}
    .minikaart.col-6 h2{text-align: center;}
    .minikaart.col-6 p{text-align: center;}
    .minikaart.col-8{display: flex; flex-direction: column; align-content: center; align-items: center; margin-bottom: 0px;}
    .minikaart.col-8 .info{min-width: 100%;}
    .minikaart.col-8 h2{text-align: center;}
    .minikaart.col-8 p{text-align: center; height: unset !important;}
    .fa-4x.fa-instagram{margin-top: 32px;}
    .titel{margin-bottom: 20px !important;}
    .titelextramargin{margin-bottom: 30px !important;}
    .nopaddingmobtop{padding-top: 0px; padding-bottom: 0px;}
    .sneakinfo{flex-direction: column; white-space: normal !important;}
    .sneakinfo p{margin: 0px !important;}
    .justify-content-center-mob{justify-content: center !important;}
}
@media (min-width: 1024px) and (max-width: 1398px) {
    .dashboard{padding: 0 128px;}
}
    
@media (min-width: 1398px) and (max-width: 1720px) {
    .dashboard .minikaart .info {align-items: flex-start !important; flex-direction: column;}
    .fundarow .col-xl-6{width: 100%; max-width: 100%;}
    .uitlegtekst{display: none;}
    .fa-video{margin-right: 0px !important;}
    #kt_aside{width: 220px;}
    #kt_wrapper{padding-left: 220px;}
    .kt-aside__brand-logo a img {max-width: 170px !important;}
    .promo{text-align: center;
    /* overflow: visible; */
    white-space: nowrap;
    margin-left: -50px;
    margin-right: -50px;}
    .eigendata .actiedown{white-space: nowrap;}
    .kt-menu__link{padding: 9px 10px !important;}
}
    
@media (max-width: 767px){
    .links, .rechts{padding: 0px !important;}
    #videoModal{padding: 0px !important;}
    #youtubeFrame{min-height: 240px !important;}
    h1{font-size: 28px;}
    .topheader h2{font-size: 28px; text-align: left;}
    .topheader p{text-align: left;}
    .topheader {align-items: flex-start !important;}
    .paginatitel .col-xl-6{padding: 0;}
    .paginatitel h1 {text-align: left;}
    .paginatitel h5 {text-align: left;}
    #kt_wrapper{padding-top: 0px !important;}
    .introtekst{font-size: 11px;}
    .promomarginfix{margin-bottom: 8px;}
    
    
    /*
    .eigendata { z-index: 2; width: 60%; position: absolute; left: 10px; }
    .blokfunda { transform: scale(0.6); }
    */
    
    /*
    .eigendata {z-index: 2;position: absolute;left: 10px;transform: scale(0.6);transform-origin: left;}
    .blokfunda {transform: scale(0.5);transform-origin: right;}
    */
}
    
@media (min-width: 768px){
    .hidedelendis{display: none;}
    .showdelendis{display: block;}
}
@media (max-width: 768px){
    .hidedelendis{display: block;}
    .showdelendis{display: none;}
}
    
@media (max-width: 1024px){
    #kt_aside{
    transform: translateX(-110%);
    transition: transform .2s ease;
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    z-index: 1050;
    padding-top: 50px;
    }
    #kt_aside.kt-aside--on{
    transform: translateX(0);
    }
    .kt-header-mobile__toggler i{display: block;}
    #kt_header_mobile{background-color: #fff; box-shadow:var(--shadow); z-index: 1051;}
    body{padding-top: 50px;}
    .kt-header-mobile__toolbar{flex-direction: row-reverse;}
    .kt-header-mobile__logo{z-index: 1052;}
} 
.fullheightdiv{min-height: 100vh; display: flex;align-items: flex-start; align-items: stretch; flex-direction: column; justify-content: center;}
.mtmochat{left: unset !important; top: unset !important; right: 10px !important; bottom: 10px !important;}
.mtmochat.chatleft .mtmomessages{left: unset !important; top: unset !important; right: -10px !important; bottom: 62px !important;}
.required-radio{ margin-top: 16px;}
.kt-aside__brand-logo{max-height: 63px;}
.kt-aside__brand-logo a{max-height: 100%;}
.kt-aside__brand-logo a img{max-height: 100%; width: auto; max-width: 215px;}
.kt-header-mobile__logo{max-height: 48px;}
.kt-header-mobile__logo a{max-height: 100%;}
.kt-header-mobile__logo a img{max-height: 48px; width: auto; max-width: 215px; margin-top: 1px;}
.form-group p{    line-height: 1.3;}


.datadisplay .blokken4{margin-top: 0px !important;}
.datadisplay .bloknoborder{font-size: 14px; border-radius: 16px; margin-bottom: 0px !important;}
.datadisplay .bloknoborder.fundablok{font-size: 10px; max-height: 110px; box-shadow: none;}
.datadisplay .cijfer.mtmomob{font-size: 36px !important;}
.datadisplay .cijfer.fundamob{font-size: 18px !important; color: grey;}
.datadisplay .sociallogos{justify-content: center; gap: 10px;}
.datadisplay .sociallogos i{font-size: 24px; margin-bottom: 8px;}
.datadisplay [class^="col-"], .datadisplay [class*=" col-"] {
    padding: 5px;}
.datadisplay svg{height: 25px !important; margin-bottom: 4px;}

.datadisplay .promo span{font-size: 24px; margin-right: 2px;}


