/*---
    Formulier met meerdere stappen - BLOK
 ---*/

 div[id*="WebFormControl"] {
    --font-size: 14px;
    --font-size-h3: 20px;
    --font-weight: 700;
    --radius-xs: 4px;
    --vms-color-base: #00378a;
    --vms-color-base-tertiary: #eef2f9;
    --icon-size: 32;
 }

 div[id*="WebFormControl"] .progress {
    box-shadow: unset;
    background-color: unset;
    hyphens: auto;
}

div[id*="WebFormControl"] .progress li {
     min-width: 100%;
 }
    
div[id*="WebFormControl"] .progress .list-group-item {
    position: relative;
    padding-left:calc( calc(var(--icon-size, 32) + calc(var(--icon-size, 32) / 4)) * 1px);

    background-color: unset;
    border: none;
    font-size: var(--font-size);
    font-weight: var(--font-weight);
    color: var(--vms-color-base);
}

div[id*="WebFormControl"] .progress .list-group-item::before { 
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='currentColor' class='icon-xxlg ColorDanger'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='m9.8 9.8 4.4 4.4m0-4.4-4.4 4.4M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0z'/%3E%3C/svg%3E");
    filter: invert(48%) sepia(4%) saturate(208%) hue-rotate(182deg) brightness(97%) contrast(90%);
    position: absolute;
    left: 0;
    width:calc(var(--icon-size, 32px) * 1px) ;
    height:calc(var(--icon-size, 32px) * 1px) ;
    top: 50%;
    transform: translateY(-50%);
}

div[id*="WebFormControl"] .progress .list-group-item-success {
    position: relative;
    padding-left: calc( calc(var(--icon-size, 32) + calc(var(--icon-size, 32) / 4)) * 1px);
}

div[id*="WebFormControl"] .progress .list-group-item-success::before {
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='%23000000' class='icon-xxlg ColorSuccess'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='m9 12.8 2.3 2.2L15 9.7m6 2.3a9 9 0 1 1-18 0 9 9 0 0 1 18 0z'/%3E%3C/svg%3E");
    filter: invert(40%) sepia(92%) saturate(4855%) hue-rotate(140deg) brightness(94%) contrast(96%);
}

div[id*="WebFormControl"] .progress .list-group-item-success > .glyphicon {
    display: none;
}


div[id*="WebFormControl"] .progress .list-group-item.active {
    background-color: var(--vms-color-base-tertiary);
}

div[id*="WebFormControl"] .entity-form {
    border: 1px solid var(--vms-color-base);
    border-radius: var(--radius-xs, 4px);
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
    padding: 1rem 3rem;
}

div[id*="WebFormControl"] .section-title h3 {
    font-size: var(--font-size-h3);
}

div[id*="WebFormControl"] label {
    font-size: 16px;
    font-weight: 600;
}

div[id*="WebFormControl"] .subgrid .grid-actions a.action {
    margin-left: 0;
}



/*---
    Formulier met meerdere stappen - EINDE VAN BLOK
---*/

/*---
    Formulier reset - BLOK
 ---*/

 .form-readonly .form-control {
    padding-left: 24px;
 }

 .crmEntityFormView .validation-summary {
    margin-top: 2em;
 }

 .crmEntityFormView .cell.crmquickform-cell:first-child {
    border: none;   
}

/*---
    Formulier reset - EINDE VAN BLOK
---*/

/*---
    Formulier action buttons - BLOK
 ---*/

/* Voegt wit ruimte toe tussen de knoppen wanneer ze onder elkaar komen te staan*/

@media(max-width: 576px) {
    .crmEntityFormView .actions .entity-action-button ~ .entity-action-button {
        margin-top: 1rem;
    }
}

.div-button{
    margin-bottom: 8px;
}

@media(max-width: 576px) {
    html[dir=ltr] .grid-actions a.btn.action {
        margin-left: 0px;
    }
}

/*---
    Formulier action buttons - EINDE VAN BLOK
---*/

/*---
    Quickview reset - BLOK
 ---*/

.container.quickform {
    width: 100%
}

html[dir=ltr] .crmEntityFormView .cell.crmquickform-cell:first-child {
    border-right: none;
}

.quickform div[id*="_quickview"] {
    background-color: rgb(240, 241, 247);
    padding-top: 2em;
    padding-left: 2em;
}

/*---
    Quickview reset - EINDE VAN BLOK
---*/

/*---
    Page Header - BLOK
---*/

.img-breadcrumb {
    padding-bottom: 3px;
    height: 2em;
    width: 2em;
}

.breadcrumb--flex {
    display: flex;
    flex-wrap: wrap;
}

.breadcrumb--toppadding {
    padding-top: 30px;
}

.breadcrumb--padding{
    padding-left: 16px;
}

.active-submenu-item {
    border-bottom: 5px solid #e1001a;
}

.page-header {
    display: flex;
    align-items: stretch;
}

.fluid-container {
    flex-grow: 1;
    padding-right: 0;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.fluid-container h1 {
    margin: 0;
    padding-right: 20px;
}

.navigation-container {
    background-color: white;
    padding: 11px 0 0px 15px;
    border: 1px solid rgba(217,217,214, 0.5);
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;
    flex-wrap: nowrap;
    white-space: nowrap;
    scroll-behavior: smooth;
}

.navigation-container-wrapper {
    position: relative;
    overflow: hidden;
}

.fade-indicator-right {
    position: absolute;
    top: 0;
    right: 0;
    width: 40px;
    height: 100%;
    pointer-events: none;
    background: linear-gradient(to left, white, transparent);
    opacity: 1;
    transition: opacity 0.2s ease;
    z-index: 10;
}

.fade-indicator-right.hidden {
     opacity: 0;
}


.sibling-container {
    display: inline-block;
    margin-right: 40px;
}

.img-module {
    max-height: min(60px, 3em);
    max-width: 30em;
}

.sibling-container:hover {
    border-bottom: 5px solid #e1001a;
}

.sibling-container a {
    width: max-content;
    display: inline-block;
}

.page-header--overflowing .navigation-container::after {
    content: '';
    position: absolute;
    top: 0;
    right: -8px;
    width: 72px;
    height: 100%;
    transition: width .25s ease;
    pointer-events: none;
}
.siblinglink--textcolor {
    color: #00378a;
    height: 100%;
}

.Navigate-back {
    padding-top: 20px;
    padding-bottom: 20px;
}

/*---
    Page Header - EINDE VAN BLOK
---*/

/*---
    Global Header - BLOK
---*/

a[aria-label="Startpagina"] {
    visibility: hidden;
}

/*---
    Global Header - EINDE VAN BLOK
---*/

/*---
    Sub sub menu navigatie - BLOK
---*/

.ChildPagePlaceholder {
    font-style: italic;
}

.submenu--mobile {
    display: none;
}

.submenu--desktop {
    display: block;
}

.vertical-tabs-header {
    width: 100%; /* Adjust width as needed */
    float: left; /* Align it to the left */
    margin-bottom: 2rem;
}

.vertical-tabs-header .parent-title {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid #00378a; /* Horizontal line to separate the title */
    width: 100%;
}

.vertical-tabs-header ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

.vertical-tabs-header ul li a {
    display: block;
    font-size: 16px;
    padding: 1px; /* Keep minimal padding for a compact layout */
    color: #00378a;
    text-decoration: none; /* Ensure no underline on links */
    border-radius: 0; /* No rounded corners */
}

.vertical-tabs-header ul li.active a {
    background-color: #eef2f9; /* Active background color */
    color: #ff6600;
    pointer-events: none;
}

.vertical-tabs-header ul li a:hover {
    background-color: #ddd; /* Hover effect */
    color: #000;
}

.parent-title-link {
    text-decoration: none;
    color: inherit;
}

.parent-title-link:hover {
    text-decoration: underline;
    color: #00378a;
}

.ul li {
    position: relative;
}

.vertical-tabs-header ul li {
    position: relative;
}

.submenuleft {
    padding-top: 100px;
}

.fullpage--geensubmenu {
    background-color: #E5E8ED; /* Override for sm and up */
}

/*---
    Sub sub menu navigatie - EINDE VAN BLOK
---*/

/*---
    Opmaak mobiel - BLOK
---*/

@media (max-width: 991px) {
    .filter-vertical {
        display: none;
    }

    .submenuleft {
        padding-top: 0px; /* Override for sm and up */
    }

    .fullpage--geensubmenu {
        background-color: #ffff; /* Override for sm and up */
    }

    iframe#WebResource_jouwgegevens {
        max-height: 60px;
    }

    .crmEntityFormView .cell {
        padding: 0px;
        margin-bottom: 0px;
    }

    iframe#WebResource_onderwijs_tekst {
        height: 250px;
    }

    iframe#WebResource_dienst {
        height: 280px;
    }

    iframe#WebResource_ervaring_tekst {
        height: 80px;
    }

    iframe#WebResource_interesses_tekst {
        height: 60px;
    }

    iframe#WebResource_benaderen_tekst {
        height: 80px;
    }

    iframe#WebResource_infosheet {
        height: 990px;
    }

    iframe#WebResource_socialmedia {
        height: 120px;
    }

    iframe#WebResource_foto_tekst {
        height: 80px;
    }

    iframe#WebResource_sportieveprestaties_tekst {
        height: 190px;
    }

    iframe#WebResource_bijzonderefeitjes_tekst {
        height: 270px;
    }

    iframe#WebResource_genereerinfosheet {
        height: 60px;
    }

    iframe#WebResource_persoonlijkgesprek_tekst {
        height: 250px;
    }

    /* scroll buttons */
    .scrollToBottomBtn {
        display: block;
        position: fixed;
        bottom: 20px;
        right: 20px;
        z-index: 1000;
    }

    .scrollToTopBtn {
        display: block;
        position: fixed;
        bottom: 20px;
        right: 61px;
        z-index: 1000;
    }

    .img-scroll {
        width: 20px;
        height: 20px;
    }

    /* Remove default > separator */
    .breadcrumb li::before {
        content: none !important;
    }

    .img-breadcrumb {
        display: none !important;
    }

    /* Hide all but the parent page */
    .breadcrumb-item:not(.last-before-active),
    .breadcrumb-current {
        display: none !important;
    }

    /* Show only the last breadcrumb before current page */
    .breadcrumb-item.last-before-active {
        display: inline-block !important;
        position: relative;
    }

     /* Add "Terug naar" and < before link*/
     .breadcrumb-item.last-before-active a::before {
         content: "← Terug naar ";
         font-style: italic;
     }

     /*submenu on mobile*/
    .submenu--mobile {
        display: block;
        width: 100%;
        margin: 10px 0;
        padding: 8px;
    }

    /*submenu on desktop*/
    .submenu--desktop {
        display: none;
    }
}

@media (min-width: 992px) {
    .scrollToTopBtn {
        display: none;
    }

    .scrollToBottomBtn {
        display: none;
    }
}

/*---
    Opmaak mobiel - EINDE VAN BLOK
---*/

/*---
    NOC*NSF pagina templates - BLOK
---*/
.page-copy {
     width: 100%;
}

.page-heading {
     padding-left: 4rem;
}

.Content {
     width: 100%;
     font-weight: 400;
     font-size: 14px;
     line-height: 20px;
}


.fullpage {
     background-color: #E5E8ED;
}

fullpage--geensubemnu {
     background-color: #E5E8ED;
}

.contentblok {
     background-color: white;
     min-height: max(400px, calc(100vh - 585px));
}

.contentblok--large {
     background-color: white;
     min-height: 1000px;
}

a.addnote.btn.btn-primary {
    color: #ffffff !important;
    padding-bottom: 12px;
}

a.btn.btn-primary.pull-right.action.create-action {
    color: #ffffff !important;
}

/*---
    NOC*NSF pagina templates - EINDE VAN BLOK
---*/

/*---
    Home page tiles - BLOK
---*/

.tile {
    display: inline-block;
    border-bottom: 3px solid transparent;
}

.tile::after {
    content: '';
    display: block;
    width: 0;
    height: 3px;
    background: #ff6600;
    transition: width .3s;
}

.tile:hover::after {
    width: 100%;
    //transition: width .3s;
}

.card-text--fixedheight {
    height: 5em;
    color: black;
}

img.card-img-top {
    max-width: 100%;
    height: auto;
    object-fit: contain;
    display: block; /* Removes any extra space below the image */
    margin: 0 auto; /* Center the image if it’s smaller than the container */
}

.card {
    margin-bottom: 20px; /* Add some space between the cards */
}

.card-body {
    padding: 10px; /* Adjust padding inside the card body */
    height: 136px;
}

.container {
    padding-top: 20px; /* Adjust padding around the container if needed */
    padding-bottom: 20px;
}

.row {
    margin-left: 0;
    margin-right: 0;
}

.col-md-4 {
    padding-left: 0;
    padding-right: 0;
}

/*---
    Home page tiles - EINDE VAN BLOK
---*/

/*---
    Footer - BLOK
---*/

.tile {
    display: inline-block;
    border-bottom: 3px solid transparent;
}

.tile::after {
    content: '';
    display: block;
    width: 0;
    height: 3px;
    background: #ff6600;
    transition: width .3s;
}

.tile:hover::after {
    width: 100%;
    //transition: width .3s;
}

.support--padding {
    padding-bottom: 5px;
}

/*---
    Footer - EINDE VAN BLOK
---*/

/*---
    Home page - BLOK
---*/

section.main-content-container {
    width: 100%;
    max-width: 1200px; /* Adjust to your desired max width */
    margin-left: auto;
    margin-right: auto;
}

.title {
    color: #00378a;
}

.meldingblok--normaal {
    background-color: #e5e8ed;
}

.meldingblok--urgent {
    background-color: #ff0014;
}

.meldingtekst--normaal {
    color: #00378a;
    padding: 8px;
}

.meldingtekst--urgent {
    color: white;
    padding: 8px;
}

.openlink_img {
    max-height: 16px;
}

/*---
    Home page - EINDE VAN BLOK
---*/

/*---
    Accordion button - BLOK
---*/

.accordion {
    background-color: #f0f1f7;
    color: #00378a;
    cursor: pointer;
    padding: 18px;
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
    transition: 0.4s;
}

.accordion:hover {
    background-color: #f0f1f7;
}

.center {
    margin: auto;
    width: 75%;
}

.accordion:after {
    content: '\002B';
    color: #ff6600;
    font-weight: bold;
    float: right;
    margin-left: 5px;
}

.faq_antwoord {
    padding: 0 18px;
    background-color: #f0f1f7;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease-out;
    margin-bottom: 8px;
}

button.accordion {
    color: #00378a;
    font-weight: bold;
}

/*---
    Accordion button - EINDE VAN BLOK
---*/

/*---
    Extra - BLOK
---*/

.button--goback {
     margin-left: 4px;
}

.box--goback {
     padding-top: 8px;
     padding-bottom: 8px;
}

.btn-entitylist-filter-delete {
     color: #ffff;
}

/*---
    Extra - EINDE VAN BLOK
---*/

/*---
    Onboarding - BLOK
---*/

.crmEntityFormView div.description.above {
     font-size: 15px;
}

@media (min-width: 992px) {
     iframe#WebResource_onderwijs_tekst {
         height: 110px;
     }

     iframe#WebResource_ervaring_tekst {
         height: 40px;
     }

     iframe#WebResource_interesses_tekst {
         height: 40px;
     }
 
     iframe#WebResource_benaderen_tekst {
         height: 40px;
     }

     iframe#WebResource_persoonlijkgesprek_tekst {
         height: 80px;
     }
 
     iframe#WebResource_foto_tekst {
         height: 6rem;
     }

     iframe#WebResource_sportieveprestaties_tekst {
         height: 80px;
     }

     iframe#WebResource_bijzonderefeitjes_tekst {
         height: 100px;
     }

     iframe#WebResource_new_1 {
         height: 100px;
     }

     iframe#WebResource_new_2 {
         height: 80px;
     }
  
     iframe#WebResource_dienst {
         height: 110px;
     }

     iframe#WebResource_jouwgegevens {
         max-height: 40px;
     }

     iframe#WebResource_infosheet {
         min-height: 440px !important;
     }

     iframe#WebResource_genereerinfosheet {
         height: 1em;
     }

     iframe#WebResource_socialmedia {
         height: 40px;
     }

     iframe#WebResource_dienst {
         height: 110px;
     }
}

label#pix_portfolio_label {
    font-weight: 400;
}

input#pix_inpiratieroluurpermaand {
    width: 70px;
}


iframe[id*="hide"] {
    display: none;
}

/*---
    Onboarding - EINDE VAN BLOK
---*/

/*---
    Dropdowns - BLOK
---*/


.dropdown-menu > .active > a, .dropdown-menu > .active > a:focus, .dropdown-menu > .active > a:hover {
    border: none;
}

.dropdown-menu > li > a:focus, .dropdown-menu > li > a:hover {
    border: none;
}

/*---
    Dropdowns - EINDE VAN BLOK
    --*/

/*---
    Skiplink - BLOK
---*/

.skip {
    pointer-events: none; /* disables all mouse interaction */
    background: none;
    border: none;
    color: transparent;
    display: block;
    height: 0px;
}

/* Allow interaction when focused via keyboard (Tab) */
.skip:focus {
    pointer-events: auto; /* re-enable interaction when focused */
    background: #ff6600;
    color: white;
    cursor: pointer;
    padding: 4px;
    display: inline;
    height: auto;
}

/* Prevent any hover effects */
.skip:hover {
    background: none;
    text-decoration: none;
}

/*---
    Skiplink - EINDE VAN BLOK
---*/

/*---
    Skeleton loader (voor voorkeuren pagina) - BLOK
---*/

/* Overlay covers only .page-copy */
#skeleton-overlay {
    position: absolute;
    inset: 0; /* top:0; right:0; bottom:0; left:0 */
    background: #f5f5f5;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 999;
    padding: 20px;
}

/* Skeleton shimmer effect */
.skeleton {
    background: linear-gradient(90deg, #eee, #ddd, #eee);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
    border-radius: 8px;
    margin: 10px 0;
}

.skeleton-block {
    height: 20px;
    width: 80%;
}

@keyframes shimmer {
    0% {
        background-position: -200% 0;
    }

    100% {
        background-position: 200% 0;
    }
}

/*---
    Skeleton loader (voor voorkeuren pagina) - EINDE VAN BLOK
---*/

/*---
    Search bar - BLOK
 ---*/

.form-search {
    display: none;
}

.dropdown-search .form-search {
    display: block;
}

.navbar-icon {
    width: 100px;
}

/*---
    Search bar - EINDE VAN BLOK
 ---*/

/*---
    Info Modal - BLOK
 ---*/

.table__infomodal {
    width: 100%;
    border-collapse: collapse;
    font-size: 1.5rem;
}

.table__infomodal th {
    padding: 5px;
}

.table__infomodal td {
    padding: 5px;
}

#infoModal .btn {
    color: #ffffff;
}

/*---
    Info Modal - EINDE VAN BLOK
 ---*/