body:has(#wpadminbar),
body:has(#wpadminbar) #portal{
    min-height: calc(100vh - var(--wp-admin--admin-bar--height));
}

body{
    background-image: url('/wp-content/themes/pk-theme-child/assets/images/background_pattern.svg');
    background-size: max(18.875rem, calc(18.875 * var(--su))) max(14.0625rem, calc(14.0625 * var(--su)));
    background-color: var(--pk-page-bg-color);
}

#portal{
    display: flex;
    min-height: 100vh;
    padding-block: max(1.5rem, calc(1.5 * var(--su)));
    padding-inline: max(1.25rem, calc(1.25 * var(--su)));
}

#portal a:not(.underline){
    text-decoration: none;
}
#portal a.pk-btn.transparent{
    font-size: max(1rem, var(--su));
    font-weight: 400;
    line-height: 1.5;
    color: var(--dia-blue);
}
#portal a.pk-btn,
#portal a.pk-btn .btn-text{
    transition: all .2s ease;
}
#portal a.pk-btn:has(.icon-wrapper),
#portal a.pk-btn:has(> svg){
    display: flex;
    align-items: center;
    gap: max(.5rem, calc(.5 * var(--su)));
}

#portal a.pk-btn.animate-text:hover .btn-text,
#portal a.pk-btn.animate-text:focus .btn-text,
#portal a.pk-btn:not(.animate-text):hover .icon-wrapper,
#portal a.pk-btn:not(.animate-text):focus .icon-wrapper{
    translate: .125em 0;
}

#portal a.pk-button{
    font-size: max(1rem, var(--su));
    line-height: 1.5;
    font-weight: 400;
    padding-block: max(.75rem, calc(.75 * var(--su)));
    padding-inline: max(2.5rem, calc(2.5 * var(--su)));
    border-radius: 100px;
}
#portal a.pk-button.transparent{
    padding: 0;
    background: transparent;
}

#portal a.pk-button .icon-wrapper svg path{
    stroke: currentColor;
}

#portal a.pk-button.icon-no-border .icon-wrapper{
    border: none;
}

#portal a.pk-button.icon-small .icon-wrapper{
    width: auto;
    height: auto;
    border: none;
}
#portal a.pk-button.icon-small .icon-wrapper svg{
    width: .625em;
    height: auto;
}

#portal .pk-button-group.top-button{
    margin-bottom: max(.5rem, calc(.5 * var(--su)));
}
#portal .pk-button-group.top-button .pk-button{
    padding-block: max(.75rem, calc(.75 * var(--su)));
}
#portal .pk-button-group.top-button .pk-button .icon-wrapper{
    width: auto;
    height: auto;
}
#portal .pk-button-group.top-button .pk-button .icon-wrapper svg{
    width: 1.25em;
    height: auto;
}



#portal .icon-wrapper{
    display: flex;
    align-items: center;
    justify-content: center;
    width: max(1.5em, calc(1.5 * var(--su)));
    height: max(1.5em, calc(1.5 * var(--su)));
    border: 1px solid rgba(10, 55, 124, .15);
    border-radius: 50%;
}
#portal .icon-wrapper span{
    font-size: 1em;
}

body:has(.portal-page){
    background-color: #fff;
}
#portal .portal-page{
    width: 100%;
    background-color: var(--dia-blue-light);
    border-radius: max(2rem, calc(2 * var(--su)));
    padding-block: max(2rem, calc(3.75 * var(--su)));
    padding-inline: max(1.5rem, calc(5 * var(--su)));
}

#portal .portal-page > .pk-grid-container{
    row-gap: max(2rem, calc(2 * var(--su)));
}

#portal .portal-page .pk-module-heading{
    font-family: var(--pk-text-font-family);
    font-weight: 600;
}
#portal .portal-page .pk-module-heading:has(+ .pk-text){
    margin-bottom: max(1rem, calc(1.5 * var(--su)));
}

#portal .portal-page .pk-text:not(:last-child){
    margin-bottom: max(2rem, calc(2.5 * var(--su)));
}


#portal form .input-group:not(:last-child){
    margin-bottom: max(1rem, var(--su));
}

#portal .form-notification{
    display: flex;
    flex-wrap: wrap;
    gap: .25em;
    align-items: center;
    width: fit-content;
    max-width: 100%;
    margin-bottom: max(2rem, calc(2 * var(--su)));
    padding-block: max(.6875rem, calc(.6875 * var(--su)));
    padding-inline: max(1rem, var(--su));
    border-radius: max(.3125rem, calc(.3125 * var(--su)));
    color: var(--dia-blue-dark, #042454);
    font-family: var(--pk-text-font-family);
    font-size: max(1rem, var(--su));
    font-weight: 400;
    line-height: 1.2;
}

#portal .form-notification strong{
    font-weight: 700;
}

#portal .form-notification--success{
    background-color: #F4F7FC;
}

#portal .form-notification--error{
    background-color: #CF2B740D;
}

#portal .portal-page .pk-text p{
    font-size: max(.875rem, var(--su));
}

#portal form.custom-form input[type="text"],
#portal form.custom-form input[type="email"],
#portal form.custom-form input[type="password"],
#portal form.custom-form input[type="tel"],
#portal form.custom-form select{
    transition: border .25s ease-in-out;
    width: 100%;
    border: 1px solid rgba(var(--dia-blue-rgb), .1);
    border-radius: max(.375rem, calc(.375 * var(--su)));
    padding-block: max(1rem, var(--su));
    padding-inline: max(1.5rem, calc(1.5 * var(--su)));
    background-color: var(--form-input-background-color);
    outline: none;
    color: var(--form-input-text-color);
    font-family: var(--pk-text-font-family);
    font-size: max(1rem, var(--su));
    line-height: 1.5;
    font-weight: 400;
}

#portal form.custom-form input[type="text"]::placeholder,
#portal form.custom-form input[type="email"]::placeholder,
#portal form.custom-form input[type="password"]::placeholder,
#portal form.custom-form input[type="tel"]::placeholder{
    color: var(--form-input-placeholder-color);
}

#portal form.custom-form input[type="text"]:focus,
#portal form.custom-form input[type="email"]:focus,
#portal form.custom-form input[type="password"]:focus,
#portal form.custom-form input[type="tel"]:focus,
#portal form.custom-form select:focus{
    border: 1px solid rgba(var(--dia-blue-rgb), .3);
}

#portal form .form-footer{
    margin-top: max(2.5rem, calc(2.5 * var(--su)));
}

#portal form .form-footer button{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    transition: background-color .2s ease, color .2s ease;
    cursor: pointer;
    font-size: max(1rem, var(--su));
    color: var(--button-text-color-1);
    line-height: 1.5;
    background-color: var(--button-bg-1);
    padding-inline: max(1rem, var(--su));
    padding-block: max(.75rem, calc(.75 * var(--su)));
    width: 100%;
    border: none;
    outline: none;
    border-radius: 100px;
}
#portal form.submitting .form-footer button,
#portal form .form-footer button:hover,
#portal form .form-footer button:focus{
    background-color: var(--button-bg-1-hover);
    color: var(--button-text-color-1-hover);
}

#portal form .form-footer button svg{
    transition: translate .2s ease;
    width: max(.4625rem, calc(.4625 * var(--su)));
    height: auto;
}

#portal form .form-footer button:hover svg,
#portal form .form-footer button:focus svg{
    translate: max(.125rem, calc(.125 * var(--su)));
}

#portal .gform_wrapper form .gfield > .gform-field-label{
    font-family: var(--pk-text-font-family);
    font-size: max(1rem, var(--su));
}
#portal .gform_wrapper form .gfield.regular-label > .gform-field-label,
#portal .gform_wrapper form .gfield.starttijd > .gform-field-label,
#portal .gform_wrapper form .gfield.klinische-chemie > .gform-field-label{
    font-weight: 600;
}

#portal .gform_wrapper form > .gform-body > .gform_fields{
    grid-row-gap: unset;
}
#portal .gform_wrapper form .gfield:not(:last-child){
    margin-bottom: max(1.5rem, calc(1.5 * var(--su)));
}
#portal .gform_wrapper form .gfield.name:not(:last-child){
    margin-bottom: max(1rem, var(--su));
}
#portal .gform_wrapper form .gfield .gfield_required{
    display: none;
}
#portal .gform_wrapper form .gfield.gfield--type-choice:not(.gfield--type-consent) .gchoice input{
    display: none;
}
#portal .gform_wrapper form .gfield.gfield--type-choice:not(.gfield--type-consent) .gchoice label{
    max-width: 100%;
    display: flex;
    align-items: center;
    gap: max(.75rem, calc(.75 * var(--su)));
    position: relative;
    padding-block: max(.625rem, calc(.625 * var(--su)));
    padding-inline: max(1.5rem, calc(1.5 * var(--su)));
    border-radius: max(.375rem, calc(.375 * var(--su)));
    border: 1px solid rgba(10, 55, 124, 0.10);
    font-size: max(1rem, var(--su));
    line-height: 1.5;
    cursor: pointer;
}
#portal .gform_wrapper form .gfield.gfield--type-choice:not(.gfield--type-consent) .gchoice label:before{
    content: "";
    display: inline-block;
    flex-shrink: 0;
    width: 1.25em;
    height: 1.25em;
    border: 1px solid var(--dia-blue);
    border-radius: 50%;
}
#portal .gform_wrapper form .gfield.gfield--type-choice:not(.gfield--type-consent) .gchoice input:checked + label:before{
    background-image: url('/wp-content/themes/pk-theme-child/assets/images/check.svg');
    background-size: .575em .415em;
    background-position: center;
    background-repeat: no-repeat;
}

#portal .gform_wrapper form .gfield.starttijd .ginput_container > div{
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-gap: max(1rem, var(--su));
}

#portal .gform_wrapper form .gfield.starttijd .gchoice,
#portal .gform_wrapper form .gfield.starttijd .gchoice label{
    height: 100%;
}

#portal .gform_wrapper form .gform-phone{
    position: relative;
}

#portal .gform_wrapper form .gform-phone__input-wrapper{
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    align-items: start;
    gap: 0;
}

#portal .gform_wrapper form .ginput_country-selector_container,
#portal .gform_wrapper form .ginput_phone_container{
    display: flex;
    min-width: 0;
    flex-direction: column;
}

#portal .gform_wrapper form .gform-phone__country-selector,
#portal .gform_wrapper form input.gform-phone__input{
    min-height: max(3.375rem, calc(3.375 * var(--su)));
    margin: 0;
    border: 1px solid var(--form-input-border-color);
    background-color: var(--form-input-background-color);
    color: var(--form-input-text-color);
    font-family: var(--pk-text-font-family);
    font-size: var(--desktop-body-md);
    font-weight: 300;
}

#portal .gform_wrapper form .gform-phone__country-selector{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: max(.5rem, calc(.5 * var(--su)));
    padding-inline: max(.875rem, calc(.875 * var(--su)));
    border-radius: max(.5rem, calc(.5 * var(--su))) 0 0 max(.5rem, calc(.5 * var(--su)));
    cursor: pointer;
}

#portal .gform_wrapper form input.gform-phone__input{
    width: 100%;
    border-left: 0;
    border-radius: 0 max(.5rem, calc(.5 * var(--su))) max(.5rem, calc(.5 * var(--su))) 0;
}

#portal .gform_wrapper form .gform-phone .gform-field-label--type-sub{
    position: static;
    margin: max(.375rem, calc(.375 * var(--su))) 0 0;
    padding: 0;
    color: var(--dia-blue);
    font-size: max(.75rem, calc(.875 * var(--su)));
    font-weight: 300;
    line-height: 1.4;
    pointer-events: none;
    transform: none;
    translate: none;
}

#portal .gform_wrapper form .ginput_phone_container .gform-field-label--type-sub{
    padding-left: max(1.25rem, calc(1.25 * var(--su)));
}

#portal .gform_wrapper form .gform-phone__dropdown{
    z-index: 20;
}

#portal .gform_wrapper form .gfield.klinische-chemie .ginput_container > div{
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-gap: max(1rem, var(--su));
}

#portal .gform_wrapper form .gfield.gfield--type-consent{
    margin-top: max(1rem, var(--su));
}
#portal .gform_wrapper form .gfield.gfield--type-consent .ginput_container input{
    display: none;
}
#portal .gform_wrapper form .gfield.gfield--type-consent .ginput_container label{
    position: relative;
    font-size: max(1rem, var(--su));
    line-height: 1.5;
    color: var(--dia-blue);
    padding-left: calc(max(1.5rem, calc(1.875 * var(--su))) + max(.5rem, calc(.75 * var(--su))));
}
#portal .gform_wrapper form .gfield.gfield--type-consent .ginput_container label a{
    color: inherit;
    text-decoration: underline !important;
}

#portal .gform_wrapper form .gfield.gfield--type-consent .ginput_container label:before{
    content: "";
    position: absolute;
    width: max(1.5rem, calc(1.875 * var(--su)));
    height: max(1.5rem, calc(1.875 * var(--su)));
    border-radius: max(.25rem, calc(.25 * var(--su)));
    background-color: var(--dia-blue-light);
    left: 0;
}

#portal .gform_wrapper form .gfield.gfield--type-consent .ginput_container input:checked + label:before{
    background-image: url('/wp-content/themes/pk-theme-child/assets/images/check.svg');
    background-size: max(.75rem, calc(.75 * var(--su))) max(.5625rem, calc(.5625 * var(--su)));
    background-position: center;
    background-repeat: no-repeat;
}

#portal .gform_wrapper form .gform-footer > .gform_button{
    padding-block: max(.75rem, calc(.75 * var(--su)));
    padding-inline: max(2.5rem, calc(2.5 * var(--su)));
    border-radius: 100px;
    font-size: max(1rem, var(--su));
    line-height: 1.5 !important;
}
#portal .gform_wrapper form .gform-footer{
    margin-top: max(1.5rem, calc(2 * var(--su)));
}
#portal .gform_wrapper form .gform-footer > .gform_button .material-symbols-outlined{
    font-size: inherit;
}
#portal .gform_wrapper form .gform-footer > .gform_button{
    margin-bottom: 0;
}

#portal form.filter{
    display: flex;
    gap: max(1.5rem, calc(1.5 * var(--su)));
    margin-bottom: max(2rem, calc(2.5 * var(--su)));
}
#portal form.filter select{
    font-size: max(1rem, var(--su));
    border-radius: 100px;
    background-color: rgba(25, 81, 160, 0.04);
    padding-block: max(.875rem, calc(.875 * var(--su)));
    padding-inline: max(1.75rem, calc(1.75 * var(--su)));
    padding-right: calc(max(0.64125rem, calc(0.64125 * var(--su))) + max(1.75rem, calc(1.75 * var(--su))));
    border: none;
    outline: none;
    cursor: pointer;
    color: var(--dia-blue-dark);
    width: 100%;
    -webkit-appearance: none;
    appearance: none;
    background-image: url('/wp-content/themes/pk-theme-child/assets/images/icons/down-arrow.svg');
    background-repeat: no-repeat;
    background-size: max(0.64125rem, calc(0.64125 * var(--su))) max(0.320625rem, calc(0.320625 * var(--su)));
    background-position: calc(100% - max(1.75rem, calc(1.75 * var(--su)))) center;
}

#portal .portal-filter,
#portal .filter-results{
    transition: opacity .25s ease-in-out;
}
#portal .is-loading{
    opacity: .75;
}

#portal p.no-results{
    font-size: max(1rem, var(--su));
}

@media screen and (max-width: 767px){
    #portal .gform_wrapper form .gfield.starttijd .ginput_container > div{
        grid-template-columns: 1fr;
    }

    #portal .gform_wrapper form .gfield.klinische-chemie .ginput_container > div{
        grid-template-columns: 1fr;
    }
}