@import url('open-iconic/font/css/open-iconic-bootstrap.min.css');
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;500;600&display=swap');


@font-face {
    font-family: 'PoppinsBold';
    src: url('../fonts/Poppins-SemiBold.ttf');
}

* {
    color: var(--turqSemiDark);
}

html, body {
    font-family: 'Poppins', sans-serif;
    font-weight: 300;
    font-size: 16px;
    background-color: var(--turqLight);
    color: var(--turqSemiDark);
    /*/////Firefox scrollbar*/
    scrollbar-color: var(--turq) var(--turqLight);
    --turq: #4CAEA8;
    --turqLight: #EBF6F6;
    --turqMedium: #449A94;
    --turqSemiDark: #317575;
    --turqDark: #184A4E;
    --steunkleur: #EE7444;
    --wit: #FFFFFF;
    --zwart: #000000;
    --waarschuwing: #ee7444;
    --fixed-top: 150px;
    /*    /////////////////logos*/
    --beeldmerk-hoofd-turq: (https://acceptatiecdn.apcholland.nl/images/logos/beeldmerk_hoofd_rgb.svg);
}

@media(max-width: 991px) {
    html, body {
        font-size: 15px;
    }

    html, body {
        font-size: 15px;
    }
}

@media(max-width: 600px) {
    html, body {
        font-size: 14px;
    }

    html, body {
        font-size: 14px;
    }
}

.apc-chapter {
    font-family: 'PoppinsBold';
    font-weight: bolder;
    font-size: 2.2em;
    color: var(--turqSemiDark);
}

/*////////disable arrows inputfield number*/
/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.page-container {
    position: relative;
    min-height: 85vh !important;
}

@media(max-width: 767px) {
    .page-container {
        min-width: 90%;
    }
}


a.anker {
    color: var(--turq);
}

    a.anker:hover {
        color: var(--turq);
        text-decoration: underline;
    }

.content-wrap {
    padding-bottom: 2.5rem;
}

/*////////////scrollbar*/
.styled-scrollbars {
    /* Foreground, Background */
    scrollbar-color: var(--turq) var(--turqLight);
}

/*///////Chrome scrollbar*/
::-webkit-scrollbar {
    width: 10px;
    border: solid 1px red;
}

::-webkit-scrollbar-track {
    background: var(--turqLight);
}

::-webkit-scrollbar-thumb {
    background: var(--turq);
    border-left: 0.2px solid white;
}

    ::-webkit-scrollbar-thumb:hover {
        background: var(--turqMedium);
    }

    ::-webkit-scrollbar-thumb:active {
        background: var(--turqSemiDark);
    }

/* Firefox */
input[type=number] {
    -moz-appearance: textfield;
}

/*///////////////links*/
a:hover, a:visited, a:link, a:active {
    text-decoration: none;
}

/*//////////////////Spinner loading*/
.buttonSpinner {
    color: var(--turq);
    position: relative;
    top: 29%;
    left: 35%;
    right: 5%;
    /*    or: left: 50%;*/
    -webkit-animation: fa-spin 1s infinite linear !important;
}

@media(max-width: 767px) {
    .buttonSpinner {
        top: 60%;
        left: 50%;
        right: 50%;
    }
}

.postcodeZoekerSpinner {
    top: 70%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation: fa-spin 1s infinite linear !important;
}

@media (max-width: 991px) {
    .postcode-spinner-container {
        height: 100px;
    }
}

.herbouwwaardeSpinner {
    top: 50%;
    left: 10%;
    position: relative;
    -webkit-animation: fa-spin 1s infinite linear !important;
}

/*/////////////////////////styling algemeen*/
.apc-pagina-wijzer {
    color: var(--turqSemiDark);
    font-weight: 600;
    font-size: 0.8em;
}

.apc-pagina-titel {
    color: var(--turqSemiDark);
    font-size: 3em;
}

.apc-col {
    position: absolute;
    inset: 0px;
    width: auto;
    height: auto;
}

.apc-tileform-container {
    margin: 30px 0px 250px 0px;
    padding: 30px;
    z-index: 1 !important;
    border-radius: 0px 50px 0px 0px !important;
    -webkit-border-radius: 0px 50px 0px 0px !important;
    -moz-border-radius: 0px 50px 0px 0px !important;
}

.apc-button-sm-container {
    z-index: 1 !important;
    border-radius: 0px 17px 0px 0px !important;
    -webkit-border-radius: 0px 17px 0px 0px !important;
    -moz-border-radius: 0px 17px 0px 0px !important;
}

.apc-form-container {
    margin: 50px 50px 250px 50px;
    background-color: var(--wit);
    padding: 50px;
    z-index: 1 !important;
    border-radius: 0px 50px 0px 0px !important;
    -webkit-border-radius: 0px 50px 0px 0px !important;
    -moz-border-radius: 0px 50px 0px 0px !important;
}

.apc-input-text {
    color: var(--turqDark);
    background-color: var(--turqLight);
    border: none;
    padding: 10px;
}

.apc-input-check {
    border: none;
    padding: 10px;
    margin-left: 25px;
    color: var(--turq);
}

.apc-arrow {
    color: var(--turqMedium);
    font-weight: bold;
}

.apc-button-sm {
    color: var(--wit) !important;
    background-color: var(--turq);
    border-color: var(--wit);
    display: block;
    width: 105px;
    height: 40px;
}

    .apc-button-sm:disabled {
        color: var(--wit) !important;
        background-color: var(--turqLight);
    }

.apc-label-verplicht {
    color: var(--steunkleur) !important;
    margin-left: 20px;
}

.apc-button-back-sm {
    color: var(--turq);
    background-color: var(--wit);
    border: none;
    display: block;
    width: 105px;
    height: 40px;
}

.apc-button-svg {
    display: inline-block;
    vertical-align: top;
    padding: 3% 25% 3% 1%;
    height: auto;
    width: 64px;
}

.apc-image-button {
    background-color: var(--turq);
    border-color: var(--wit);
    /*color: var(--wit);*/
    width: 40px;
    height: 40px;
}

.apc-radius-end {
    border-radius: 0px 50px 0px 0px !important;
    -webkit-border-radius: 0px 50px 0px 0px !important;
    -moz-border-radius: 0px 50px 0px 0px !important;
}

.apc-radius-sm-end {
    border-radius: 0px 17px 0px 0px !important;
    -webkit-border-radius: 0px 17px 0px 0px !important;
    -moz-border-radius: 0px 17px 0px 0px !important;
}

.apc-link {
    text-decoration: none;
    color: var(--wit);
}

.apc-link-hover:hover {
    text-decoration: none;
    color: var(--wit);
    font-weight: bolder;
}

.apc-link-button {
    text-decoration: none;
    color: var(--wit);
    vertical-align: bottom;
}

/*////////////////////////////Dropdown*/
.apc-dropdown {
    color: var(--turqDark);
    background: var(--turqLight);
    border: none;
}

.apc-dropdown-item {
    text-decoration: none;
    color: var(--turqDark);
    background: var(--turqLight);
}

    .apc-dropdown-item:hover {
        text-decoration: none;
        color: var(--wit);
        background: var(--turqMedium);
    }

.ham {
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: transform 400ms;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.hamRotate.active {
    transform: rotate(45deg);
}

.hamRotate180.active {
    transform: rotate(180deg);
}

.line {
    fill: none;
    transition: stroke-dasharray 400ms, stroke-dashoffset 400ms;
    stroke: white;
    stroke-width: 5.5px;
    stroke-linecap: round;
}

.ham8 .top {
    stroke-dasharray: 40 160;
}

.ham8 .middle {
    stroke-dasharray: 40 142;
    transform-origin: 50%;
    transition: transform 400ms;
}

.ham8 .bottom {
    stroke-dasharray: 40 85;
    transform-origin: 50%;
    transition: transform 400ms, stroke-dashoffset 400ms;
}

.ham8.active .top {
    stroke-dashoffset: -64px;
}

.ham8.active .middle {
    /*    //stroke-dashoffset: -20px;*/
    transform: rotate(90deg);
}

.ham8.active .bottom {
    stroke-dashoffset: -64px;
}

/*/////////////*/
.apc-hover-button:hover {
    color: var(--wit);
    background-color: var(--turq);
}

.apc-link-adviseur {
    text-decoration: none;
    color: var(--turqDark);
    display: grid;
}

    .apc-link-adviseur:hover {
        text-decoration: none;
        color: var(--turqDark);
    }

.apc-textbox {
    background-color: var(--turqLight);
    color: var(--turqDark);
    width: 400px;
    height: 40px;
    border: none;
}

.apc-textarea {
    background-color: var(--turqLight);
    color: var(--turqDark);
    width: 400px;
    border: none;
}

.apc-text-info {
    background-color: transparent;
    color: var(--turqDark);
}

.apc-text-warning {
    background-color: transparent;
    /*color: var(--turqSemiDark);*/
    color: var(--steunkleur);
}

.apc-text-error {
    background-color: transparent;
    color: var(--steunkleur);
}

.apc-margin {
    margin: 14px 0px 21px 0px;
}

/*//////////////Header*/
/*.menu-container{
    margin-right: 10px;
}

@media(max-width: 1399px ){
    .menu-container{
        margin-right: 22px;
    }
}

@media(max-width: 1199px ) {
    .menu-container {
        margin-right: 38px;
    }
}*/

@media(max-width: 625px ) {
    .menu-container {
        margin-right: 20%;
    }
}

.header-logo {
    width: 128px;
}

.apc-header {
    height: 110px;
    color: var(--wit);
    background-color: var(--turq);
    width: auto;
}

@media(max-width: 767px) {
    .apc-header {
        height: 100px !important
    }
}

@media(max-width: 600px) {
    .apc-header {
        height: 80px !important;
    }
}

.apc-header-tekst-app {
    color: var(--wit);
}

.backgroundBeeldmerk {
    background-image: url(https://acceptatiecdn.apcholland.nl/images/logos/apcholland_icoon_mens_turquoise_RGB.svg);
}

.headerMenu {
    z-index: 99;
    position: absolute;
    width: 80%;
    top: 50%;
    left: 50%;
    border-radius: 100%;
    transform: translate(-50%, -50%);
    background-color: white;
    cursor: pointer;
}

    .headerMenu:after {
        content: "";
        display: block;
        padding-bottom: 100%;
    }

    .headerMenu:hover + .headerMenu-outline {
        width: 95%;
    }

.headerMenu-outline {
    position: absolute;
    width: 75%;
    top: 50%;
    left: 50%;
    border-radius: 100%;
    border: 2px solid white;
    transform: translate(-50%, -50%);
    transition: all 0.25s cubic-bezier(.7, .11, .32, 2);
}

    .headerMenu-outline:after {
        content: "";
        display: block;
        padding-bottom: 100%;
    }

.headerMenu-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -55%);
    font-size: 2.3rem;
    font-weight: 500;
}

.headerMenu-text-logo {
    color: var(--turq);
}

.headerMenu-container {
    position: relative;
    margin: 0 auto;
    width: 80px;
}

    .headerMenu-container:after {
        content: "";
        display: block;
        padding-bottom: 100%;
    }

.header-menu-img {
    max-width: 100px;
    align-items: center;
}

/*/////////////////////////*/
.apc-body {
    top: var(--fixed-top);
}

.dropdown-menu {
    border: 1px solid white;
}

.apc-footer {
    position: absolute;
    text-align: center;
    position: relative;
    bottom: 0;
    width: 100%;
    left: 0;
    width: 100%;
    background-color: var(--turqDark);
    color: var(--wit);
    height: 270px; /*    ///zelfde als .content-wrap padding*/
    z-index: 999;
}

.apc-footer-menutekst-bg {
    color: var(--turq);
    font-weight: bolder;
    font-size: 2.2em;
}

.apc-link-footer {
    text-decoration: none;
    color: var(--turq);
    font-weight: 600;
}

.apc-footer-tekst-bg {
    color: var(--wit);
    font-weight: 600;
    font-size: 1.5em;
}

.apc-footer-tekst-sm {
    color: var(--wit);
}

/* Media query for small screens */
@media (max-width: 640px) {
    .apc-footer {
        height: auto; /* Adjust the height for small screens */
    }
}

/* Media query for medium-sized screens */
@media (min-width: 641px) and (max-width: 1024px) {
    .apc-footer {
        height: 200px; /* Adjust the height for medium-sized screens */
    }
}

/* Media query for larger screens */
@media (min-width: 1025px) {
    .apc-footer {
        height: 270px; /* Keep the default height for larger screens */
    }
}

.apc-modal-header {
    font-weight: bolder;
    font-size: 1.8em;
    color: var(--turqDark);
    margin: 5px 0px 5px 0px;
}

.apc-modal-border {
    border: none !important;
}

.apc-title {
    font-weight: lighter;
    font-size: 3em;
    color: var(--turqDark);
}

.apc-subtitle {
    font-weight: bolder;
    font-size: 3em;
    color: var(--turqDark);
}

.apc-content-title {
    font-weight: 600;
    font-size: 1.5em;
    color: var(--turqDark);
}

.apc-logo {
    width: auto;
    height: 80px;
    background-image: url('http://docs.apcholland.nl/_images/logo-wit_rgb_1200dpi.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position-y: center;
}

.apc-grid-col {
    color: var(--turqDark);
}

.apc-grid-button {
    color: var(--turqMedium);
    background-color: transparent;
    font-weight: 600;
    border: none;
}

.apc-grid-button-disabled {
    color: var(--steunkleur);
    background-color: transparent;
    border: none;
}

.apc-grid-header {
    color: var(--turqDark) !important;
    background-color: var(--wit) !important;
    border-bottom-width: 0px !important;
}

.apc-row {
    margin-top: 0px !important;
    margin-left: 0px !important;
    margin-right: 0px !important;
}

.apc-drag-and-drop {
    color: var(--turq);
    text-align: right;
    font-size: 1.85rem;
}

.d-and-d-pijl {
    transform: rotate(180deg);
    background-image: url("../images/apc-holland_pijl_1-2_turquoise_vul_RGB_300dpi.png");
    background-repeat: no-repeat;
}

input::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
    /*color: var(--turqLight) !important;*/
    color: white !important;
    opacity: 1; /* Firefox */
}

input:-ms-input-placeholder { /* Internet Explorer 10-11 Microsoft Edge */
    color: var(--turqLight) !important;
}

.margin-left-minus-30 {
    margin-left: -30px;
}

.margin-left-minus-20 {
    margin-left: -20px;
}

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

.margin-left-minus-10 {
    margin-left: -10px;
}

.no-bullets {
    list-style: none;
}

/*.footer-menu ul {
    margin-top: 74px;
    margin-left: -20px;
}*/

.p-10 {
    padding: 10px;
}

.p-20 {
    padding: 20px;
}

.table > :not(caption) > * > * {
    border-bottom-width: 0px;
    box-shadow: none;
}

.sort-th {
    cursor: pointer;
}

.fa {
    float: right;
}

.pointer.active.desc:after {
    content: "▲";
}

.pointer.active.asc:after {
    content: "▼";
}

.apc-button-text {
    vertical-align: bottom;
    padding: 35% 35% 3% 1%;
}

.apc-tile {
    color: var(--turqDark);
    background-color: var(--wit);
    display: block;
    text-align: left;
    border: none;
    width: 225px;
    height: 225px;
    font-size: 1.8em;
    padding: 0px !important;
    margin: 0px !important;
    z-index: auto !important;
}

.apc-tile-end {
    border-radius: 0px 50px 0px 0px !important;
    -webkit-border-radius: 0px 50px 0px 0px !important;
    -moz-border-radius: 0px 50px 0px 0px !important;
}

.apc-tile-container {
    width: 225px;
    margin: 0px 0px 0px -40px;
    padding: 0px;
    z-index: 1 !important;
    border-radius: 0px 50px 0px 0px !important;
    -webkit-border-radius: 0px 50px 0px 0px !important;
    -moz-border-radius: 0px 50px 0px 0px !important;
}

.apc-button {
    color: var(--turq);
    background-color: transparent;
    border-color: var(--turq);
    display: block;
    width: 155px;
    height: 50px;
    padding: 0px !important;
    margin: 0px !important;
    z-index: auto !important;
}

.apc-block-end {
    padding: 0px;
    margin: 0px;
    border-color: var(--turq);
    border: 1px;
    border-radius: 0px 17px 0px 0px !important;
    z-index: 1 !important;
    -webkit-border-radius: 0px 17px 0px 0px !important;
    -moz-border-radius: 0px 17px 0px 0px !important;
}

.apc-button-container {
    padding: 0px;
    margin: 0px 0px 0px -40px;
    z-index: 2 !important;
    display: block;
}

.form-switch .form-check-input {
    background-color: var(--wit) !important;
    border-color: var(--turq) !important;
}

.form-check-input, .form-check-input:checked {
    background-color: var(--turq) !important;
    border-color: var(--turq) !important;
}


.required::after {
    content: ' *';
    color: var(--steunkleur);
}

input:valid {
    color: var(--turq);
}

input:invalid {
    color: var(--steunkleur);
}

.form-select:focus {
    border-color: var(--turq);
    outline: 0;
    box-shadow: 0 0 0 0.25rem var(--turqSemiDark);
}

.form-select[multiple], .form-select[size]:not([size="1"]) {
    padding-right: 0.75rem;
    background-image: none;
}

.form-select:disabled {
    background-color: var(--turqLight);
}

.form-select:-moz-focusring {
    color: transparent;
    text-shadow: 0 0 0 var(--turqDark);
}


.selector {
    background-color: var(--turqLight);
    color: var(--turqDark);
    border: none;
    border: 1px solid #595E57;
    padding: 5px;
    width: 400px;
    overflow: hidden;
}

    .selector option {
        padding: 5px;
    }

        .selector option:hover {
            background-color: var(--turqDark);
            color: var(--turqLight);
        }



.apc-page-background {
    background-color: var(--wit);
    border-top-right-radius: 25px;
}

.apc-bedankt-container {
    display: flex;
    justify-content: center;
    align-items: center;
}

.apc-bedankt-content {
    text-align: center;
}

.apc-bedankt-text {
    font-size: 1.4em;
}

.apc-bedankt-image {
    width: 128px;
    height: 128px;
}







/*    ///////////////////////*/
.btnZoekKvk {
    padding: 10px;
    padding-inline: 32px !important;
}

@media(max-width: 1399px) {
    .btnZoekKvk {
        padding-inline: 22px !important;
    }
}

@media(max-width: 1199px) {
    .btnZoekKvk {
        padding-inline: 12px !important;
    }
}

@media(max-width: 991px) {
    .btnZoekKvk {
        padding-inline: 37px !important;
    }
}

@media(max-width: 768px) {
    .btnZoekKvk {
        margin-top: 1.5rem;
        width: 100%;
    }
}

.btnZoekPostcode {
    margin-top: 1.5rem;
    padding: 10px;
    padding-inline: 33px !important;
}

@media(max-width: 1399px) {
    .btnZoekPostcode {
        padding-inline: 22px !important;
    }
}

@media(max-width: 1199px) {
    .btnZoekPostcode {
        padding-inline: 12px !important;
    }
}

@media(max-width: 992px) {
    .btnZoekPostcode {
        width: 100%;
    }
}





/*@media(max-width: 1399px) {
    .btnZoekPostcode {
        padding-inline: 27px !important;
    }
}

@media(max-width: 1199px) {
    .btnZoekPostcode {
        padding-inline: 16px !important;
    }
}

@media(max-width: 991px) {
    .btnZoekPostcode {
        padding-inline: 108px !important;
        margin-left: -5px;
    }
}

@media(max-width: 767px) {
    .btnZoekPostcode {
        padding-inline: 44.8% !important;
    }
}

@media(max-width: 667px) {
    .btnZoekPostcode {
        padding-inline: 44.2% !important;
    }
}

@media(max-width: 634px) {
    .btnZoekPostcode {
        padding-inline: 43.8% !important;
    }
}

@media(max-width: 575px) {
    .btnZoekPostcode {
        padding-inline: 46.8% !important;
        margin-left: -19px;
    }
}

@media(max-width: 445px) {
    .btnZoekPostcode {
        padding-inline: 46% !important;
        margin-left: -19px;
    }
}

@media(max-width: 380px) {
    .btnZoekPostcode {
        padding-inline: 44.5% !important;
        margin-left: -19px;
    }
}
*/

/*Compontents styling*/
.btn {
    border-radius: 0px 0px 0px 0px;
    height: 50px;
}

    .btn:hover {
        color: #FFFFFF;
        background-color: var(--turqMedium);
    }

.bkgdPrimary {
    color: #FFFFFF;
    background-color: var(--turq);
    min-width: 105px;
}

    .bkgdPrimary:active {
        background-color: var(--turqSemiDark);
    }

.bkgdNone {
    background-color: none;
}

.borderPrimary {
    border-style: solid;
    border-width: thin;
    border-color: var(--turq);
}

    .borderPrimary:hover {
        background-color: var(--turq);
    }

    .borderPrimary:active {
        background-color: var(--turqMedium);
    }

.BtnBorderless {
    border-radius: 0px 0px 0px 0px;
    height: 50px;
    border: none;
    background: none;
}

    .BtnBorderless:hover {
        background-color: none;
        color: var(--turqMedium);
    }

    .BtnBorderless:active {
        background-color: none;
        color: var(--turqSemiDark);
    }

.BtnPrimaryText {
    color: var(--turq);
}

.btn-corner-rounded {
    border-radius: 0px 20px 0px 0px !important;
}

.btnCompact {
    min-width: 110px !important;
    max-width: 125px;
    vertical-align: text-bottom;
}

.fas {
    border-style: solid;
    border-width: thin;
    border-color: var(--turq);
    color: var(--turq);
    padding: 15px;
}

    .fas:hover {
        background-color: var(--turq);
    }

    .fas:active {
        background-color: var(--turqMedium);
    }

.fa-user-plus {
    border-radius: 0px 20px 0px 0px !important;
}

.fa-arrow-left {
    color: var(--turq);
}

.fa-arrow-right {
    color: white;
}

.row-user-icons {
    display: flex;
    justify-content: flex-start;
    gap: 60px;
}

@media(max-width: 767px) {
    .row-user-icons {
        justify-content: flex-end;
        gap: 15px;
        margin-top: 10px;
    }
}

.user-icons {
    margin-top: auto;
}

.button-custom {
    color: red !important;
}

.btnTerug {
    text-decoration: none;
    color: var(--turq) !important;
}

    .btnTerug:hover {
        color: var(--turqMedium);
    }


/*////////////////////////////Radio */
.radio-solo {
    font-size: 30px;
}

.custom_radio {
    display: flex;
}

    .custom_radio input[type="radio"] {
        display: none;
        font-size: 30px;
        cursor: pointer;
    }

        .custom_radio input[type="radio"] + label {
            display: flex;
            align-items: center;
            position: relative;
            padding-left: 1em;
            margin-right: 2em;
            line-height: 1.5em;
            transition: all 0.3s ease-in-out;
            cursor: pointer; /* Ensures pointer cursor */
        }

            .custom_radio input[type="radio"] + label:before {
                content: '';
                width: 1em;
                height: 1em;
                border-radius: 50%;
                border: 1px solid #4CAEA8;
                box-shadow: inset 0 0 0 0em #4CAEA8, inset 0 0 0 1em #EBF6F6;
                transition: all 0.3s ease;
                margin-right: 0.5em; /* Space between the circle and text */
                display: inline-block;
                flex-shrink: 0;
                cursor: pointer; /* Ensures pointer cursor */
            }

        /* Disabled radio button */
        .custom_radio input[type="radio"]:disabled + label {
            color: #999;
            cursor: not-allowed;
        }

        .custom_radio input[type="radio"]:checked + label:before {
            box-shadow: inset 0 0 0 0.15em #EBF6F6, inset 0 0 0 1em #4CAEA8;
            cursor: pointer; /* Ensures pointer cursor */
        }

/*        .custom_radio input[type="radio"] + label:hover:before {
            box-shadow: inset 0 0 0 0.15em #EBF6F6, inset 0 0 0 .9em rgba(76, 174, 168, 0.5);
        }*/






.radio-item {
    display: flex;
    align-items: center;
    cursor: pointer;
    padding: 10px; /* Adjust padding as needed */
}


/*////////////Checkboxes */
.checkbox-item {
    display: inline-block;
    position: relative;
    padding: 0 6px;
    margin: 11px 0 0;
}

    .checkbox-item input[type='checkbox'] {
        display: none;
    }

    .checkbox-item label {
        color: var(--turqDark);
        font-weight: normal;
    }

        .checkbox-item label:before {
            content: " ";
            display: inline-block;
            position: relative;
            top: 5px;
            margin: 0px 5px 0 5px;
            width: 20px;
            height: 20px;
            border: 2px solid var(--turqMedium);
            background-color: transparent;
        }

    .checkbox-item input[type=checkbox]:checked + label:after {
        width: 12px;
        height: 12px;
        position: absolute;
        top: 9px;
        margin: 0px 5px 0 5px;
        left: 10px;
        content: " ";
        display: block;
        background-color: var(--turqMedium) !important;
    }

    .checkbox-item input[type='checkbox']:disabled + label {
        color: var(--turquoise-light); /* Aangepaste kleur voor uitgeschakelde labeltekst */
        cursor: not-allowed; /* Optioneel: Wijzig de cursorstijl om aan te geven dat de checkbox is uitgeschakeld */
        opacity: 0.6; /* Vervaag de checkbox visueel om aan te geven dat deze is uitgeschakeld */
    }

        .checkbox-item input[type='checkbox']:disabled + label:before {
            border-color: var(--turquoise-light); /* Pas de kleur van de checkbox-rand aan */
        }

        .checkbox-item input[type='checkbox']:disabled + label:after {
            background-color: var(--turquoise-light) !important; /* Pas de kleur van de checkbox-achtergrond aan */
        }


.apc-checkbox-item {
    margin-bottom: -3px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    border: 2px solid var(--turq);
    background-color: var(--wit) !important;
    box-shadow: inset 0 0 0 1px var(--wit);
}

    .apc-checkbox-item:checked {
        background-color: var(--turq) !important;
    }

    .apc-checkbox-item:disabled {
        cursor: not-allowed; /* Optioneel: Wijzig de cursorstijl om aan te geven dat de checkbox is uitgeschakeld */
        opacity: 0.6; /* Vervaag de checkbox visueel om aan te geven dat deze is uitgeschakeld */
    }

        .apc-checkbox-item:disabled:before {
            border-color: var(--turquoise-light); /* Pas de kleur van de checkbox-rand aan */
            background-color: var(--wit) !important; /* Pas de achtergrondkleur van de checkbox aan */
        }

    .apc-checkbox-item:checked:disabled:before {
        background-color: var(--turqMedium) !important; /* Pas de achtergrondkleur van de checkbox aan wanneer ingeschakeld */
    }




.apc-radio-item {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    border: 2px solid var(--turqMedium);
    background-color: var(--wit) !important;
    border-radius: 50%;
    position: relative;
    float: left;
}

    .apc-radio-item::before {
        content: '';
        position: absolute;
        top: 2px;
        left: 2px;
        width: 12px;
        height: 12px;
        border-radius: 50%;
        /*        box-shadow: inset 0 0 0 1px var(--wit);*/
    }

    .apc-radio-item:checked::before {
        background-color: var(--turqMedium) !important;
        border: 1px solid var(--turqMedium);
    }

    .apc-radio-item:disabled {
        cursor: not-allowed; /* Optioneel: Wijzig de cursorstijl om aan te geven dat de checkbox is uitgeschakeld */
        opacity: 0.6; /* Vervaag de checkbox visueel om aan te geven dat deze is uitgeschakeld */
    }

        .apc-radio-item:disabled:before {
            border-color: var(--turquoise-light); /* Pas de kleur van de checkbox-rand aan */
            background-color: var(--wit) !important; /* Pas de achtergrondkleur van de checkbox aan */
        }

    .apc-radio-item:checked:disabled:before {
        background-color: var(--turqMedium) !important; /* Pas de achtergrondkleur van de checkbox aan wanneer ingeschakeld */
    }

input[type="radio"] {
    margin-top: 1.7px;
    vertical-align: middle;
}

.radioLabel {
    margin-left: 5px;
    margin-bottom: 5px;
}

.apc-editcontrol {
    color: var(--turqDark);
    background: var(--turqLight) !important;
    border: none;
    padding: 12px;
    height: 50px;
    width: 400px;
    cursor: pointer;
}

    .apc-editcontrol:focus {
        color: var(--turqDark) !important;
        background-color: var(--turqLight) !important;
    }

.rowRadioButtons {
    display: flex;
    justify-content: space-between; /* Creates space between the two divs */
    width: 100%; /* Makes the container full width */
}

#radioBool2 {
    background-color: blue;
}

.area-control {
    color: var(--turqSemiDark);
    background-color: #EBF6F6;
    width: 100%;
    border: none;
    border-radius: 0px;
    resize: none;
}

    .area-control:valid {
        color: var(--turqSemiDark);
    }

    .area-control:focus {
        border-color: var(--turq);
        box-shadow: 0 0 0 0.2rem rgba(76, 174, 168, 0.25);
    }

.form-control {
    color: var(--turqSemiDark);
    background-color: #EBF6F6;
    height: 50px;
    border: none;
    border-radius: 0px;
}

    .form-control:valid {
        color: var(--turqSemiDark);
    }

    .form-control:focus {
        border-color: var(--turq);
        box-shadow: 0 0 0 0.2rem rgba(76, 174, 168, 0.25);
    }


#selector {
    color: var(--turqSemiDark);
    background-color: #EBF6F6;
    height: 50px;
    border: none !important;
    border-radius: 0px;
    border-color: none;
}

    #selector:focus {
        border-color: var(--turq);
        box-shadow: 0 0 0 0.2rem rgba(76, 174, 168, 0.25);
    }

.selector {
    border: none;
    border-radius: 0px;
    background-color: var(--turqLight);
}

@media(max-width: 1399px) {
    .apc-editcontrol {
        width: 350px;
    }
}

@media(max-width: 1199px) {
    .apc-editcontrol {
        width: 47%;
    }
}

.apc-editcontrol-multiple {
    width: 100%;
    height: auto;
}


@media(min-width: 1199px ) {
    .radioNoSideMenu {
        width: 400px;
    }
}

@media(min-width: 1399px ) {
    .radioNoSideMenu {
        width: 500px;
    }
}




/*////////////////////////titels////////////////////*/
.pagetitle {
    margin-top: 10px;
    margin-bottom: 15px;
}

@media(max-width: 600px) {
    .pagetitle {
        margin-top: 0px;
        margin-bottom: 0px;
    }
}

.pagetitle1 {
    font-size: 36px;
    color: var(--turqSemiDark);
}

.pagetitle2 {
    font-size: 36px;
    color: var(--turqSemiDark);
}

@media(max-width: 991px) {
    .pagetitle1 {
        font-size: 30px;
        color: var(--turqSemiDark);
    }

    .pagetitle2 {
        font-size: 30px;
        color: var(--turqSemiDark);
    }
}

@media(max-width: 600px) {
    .pagetitle1 {
        font-size: 25px;
        color: var(--turqSemiDark);
        margin-bottom: 0px;
    }

    .pagetitle2 {
        font-size: 25px;
        color: var(--turqSemiDark);
    }
}

.kopje {
    color: var(--turqSemiDark);
    font-weight: 500;
    padding-top: 25px;
}

.ondertitel {
    font-weight: 500;
}



/*/////////////////// Tables -- table striped - input colored alternatively*/
.table {
    border: 0;
}

    .table > tbody > tr > td,
    .table > tbody > tr > th,
    .table > tfoot > tr > td,
    .table > tfoot > tr > th,
    .table > thead > tr > td,
    .table > thead > tr > th {
        border: none;
    }

.table-striped > tbody > tr:nth-child(2n+1) > td, .table-striped > tbody > tr:nth-child(2n+1) > th {
    background-color: var(--turqLight);
}

.input-number-table {
    background-color: inherit;
}


.table-striped > tbody > tr > border-colored:nth-child(2n+1) > td, .table-striped > tbody > tr > border-striped:nth-child(2n+1) > th {
    background-color: var(--turqLight);
}

.border-colored input {
    border: 2px solid white; /* Set initial border color */
    background-color: var(--turqLight);
    height: 50px;
    border: none;
    border-radius: 0px;
}

.table-white .border-colored input {
    border: 2px solid white; /* Set initial border color */
    background-color: var(--turqLight);
}

.alternate-row:nth-child(even) .border-colored input {
    border-color: var(--turqLight); /* Change border color for even rows */
}


/*/////////////////// Tables -- table white - horizontale grens turqLight*/
.table-white {
    border-collapse: collapse;
    /*    border: 2px solid;*/
    /*    border-inline-color: red;*/
}

th, td {
    border-bottom: 2px solid var(--turqLight) !important;
    text-align: left;
    vertical-align: middle;
}

/*////////////////Progress bar*/
.progress {
    background-color: var(--wit);
    height: 6px;
}

.progress-bar {
    background-color: var(--turq) !important;
}

.progress-moved .progress-bar {
    width: 20%;
    background-color: #EF476F;
    animation: progressAnimation 2s;
}

@keyframes progressAnimation {
    0% {
        /*        width: 10%;*/
        background-color: #F9BCCA;
    }

    100% {
        /*        width: 10%;*/
        background-color: #EF476F;
    }
}


/*////////////////Main row -- side menu && content container*/
.main-row {
    /*    /////////////////TODO MARGIN*/
    margin-top: 48px;
    margin-bottom: 150px;
    margin-left: -20px;
    margin-right: 0px;
}

@media(max-width: 600px) {
    .main-row {
        margin-top: 20px;
    }
}

.navButtons {
    padding-bottom: 50px;
    margin-top: 25px;
    display: flex;
    justify-content: space-between;
}


.menuitemEnabledHighlighted {
    color: var(--turq);
    font-weight: 600;
}

.menuitemDisabledHighlighted {
    color: var(--turq);
    font-weight: 600;
}

.menuitemEnabled {
    color: var(--turqMedium);
}

.menuitemDisabled {
    color: var(--turqSemiDark);
}

.sideMenu {
    color: var(--turq);
    text-transform: lowercase;
}

    .sideMenu a:visited {
        color: var(--turq);
    }

    .sideMenu a:hover {
        color: var(--turqMedium);
    }

    .sideMenu a:active {
        color: var(--turqSemiDark);
    }

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


/*//////page layout styling*/
.main-containerNoSideMenu {
    width: 98%;
    margin-inline: 20px;
}

.align-container {
    margin-top: 50px;
    border-radius: 0px 100px 0px 0px;
    cursor: default;
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 90%;
    margin-bottom: -25px;
}

@media(max-width: 600px) {
    .align-container {
        margin-top: 25px;
    }
}

@media(max-width: 500px) {
    .align-container {
        padding-inline: 0px;
        width: 95%;
    }
}

#main-container {
    border-radius: 0px 150px 0px 0px;
    display: flex;
}

@media(max-width: 991px) {
    #main-container {
        width: 97%;
        margin-left: 20px;
    }
}

@media(max-width: 500px) {
    #main-container {
        width: 96%;
        padding: 20px;
    }
}

@media(max-width: 400px) {
    #main-container {
        align-content: center;
    }
}

.content-container {
    min-height: 235px;
    /*    min-width: 110%;*/
}


.container-divider {
    width: 100vw;
    max-width: 116%;
    height: 2rem !important;
    margin-top: 40px;
    margin-bottom: 30px;
    opacity: 1;
    transform: translateX(-50%);
    left: 50%;
    position: relative;
    color: var(--turqLight) !important;
}

@media(max-width: 502px) {
    .container-divider {
        max-width: 123%;
        margin-top: 20px;
        margin-bottom: 20px;
    }
}

/*tooltip styling */
.tooltip-wrapper {
    position: relative;
}

#spanText {
    visibility: hidden;
    position: absolute;
    width: max-content;
    bottom: 100%;
    left: 50%;
    margin-left: -60px;
    background-color: var(--turqLight);
    text-align: center;
    padding: 10px 20px;
    border-radius: 0px 20px 0px 0px;
    margin: 10px;
}

    #spanText::after {
        content: "";
        position: absolute;
        top: 100%;
        left: 50%;
        margin-left: -5px;
        border-width: 5px;
        border-style: solid;
        border-color: transparent;
    }

.tooltip-wrapper:hover #spanText {
    visibility: visible;
    -webkit-animation: fadeIn 3s ease normal;
}


/*/////////////header styling*/
.header {
    margin-left: -15px;
}

.header-ondertitel {
    color: white;
    font-weight: 600;
}

@media(max-width: 600px) {
    .header-ondertitel {
        display: none;
    }
}

.apc-header-container {
    padding-inline: -100px;
}

.apc-title-container {
    margin-left: -13px;
}

.apc-header-row {
    display: flex;
    justify-content: space-between;
}

@media (max-width: 576px) {
    .justify-content-sm-start {
        justify-content: flex-start !important;
    }
}


/*/////////////footer styling*/
.footer {
    background-color: var(--turqSemiDark);
    padding-top: 50px;
    text-align: left;
    min-height: 250px;
}

.footer-content {
    max-width: 1296px;
    margin: 0 auto;
    display: flex;
}

.footer-menu {
    white-space: nowrap;
}


.layout {
    /*    width: 1920px;*/
    height: 200px;
    display: flex;
    gap: 50px;
    justify-content: space-between;
    align-items: flex-end;
}

.marginLeft {
    margin-left: auto;
}

.footerList {
    color: white;
}

.footerLogo {
    margin-left: -20px;
    padding-top: 60px;
}

.alignLeft {
    text-align: left;
}

@media(max-width: 767px) {
    .layout {
        min-height: 500px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-around;
    }

    .marginLeft {
        margin-left: inherit;
    }

    .footerLogo {
        margin-left: 11px;
        padding-top: 10px;
        margin-bottom: -25px;
    }

    .apc-footer-menutekst-bg {
        margin-left: 30px;
    }

    .footer-widget {
        margin-top: -70px;
    }
}

.apc-footer-menutekst-bg {
    color: var(--turq);
    font-weight: 700;
    font-size: 2.2em;
}

.apc-footer-tekst-bg {
    color: var(--wit);
    font-weight: 500;
    font-size: 1.5em;
}


/*stlying algemeen*/
h1, h3 {
    color: var(--turq);
    font-weight: 300;
}

    h1.semibold {
        font-weight: 600;
    }

    h1:focus {
        outline: none;
    }

.semibold {
    font-weight: 600;
}

a, .btn-link {
    color: #0071c1;
}

.btn-primary {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

/*    .btn-primary:focus {
        box-shadow: 0 0 0 0.2rem var(--turq);
    }
*/
.content {
    padding-top: 1.1rem;
}

.invalid {
    outline: 1px solid red;
}

.validation-message {
    color: red;
}

#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }


.form-group {
    padding-top: 5px;
    padding-bottom: 10px;
}

.input-icon {
    position: relative;
}

    .input-icon > i {
        position: absolute;
        display: block;
        transform: translate(0, -50%);
        top: 50%;
        pointer-events: none;
        width: 25px;
        text-align: center;
        font-style: normal;
    }

    .input-icon > input {
        padding-left: 25px;
        padding-right: 0;
    }

.input-percentage {
    position: relative;
}

    .input-percentage > i {
        position: absolute;
        display: block;
        transform: translate(0, -50%);
        top: 50%;
        right: 1.5rem;
        pointer-events: none;
        width: 25px;
        text-align: center;
        font-style: normal;
    }

    .input-percentage > input {
        padding-right: 25px;
    }

/*custom main page css*/
.agent-container {
    background-color: #FFFFFF;
    min-height: 950px;
    width: 900px;
    border-radius: 0px 10px 0px 0px !important;
    border: none !important;
}

.search-bar {
    /*    padding-right: 20%;*/
}

.blazored-typeahead {
    border: none !important;
    border-color: none !important;
}

.blazored-typeahead__clear {
    background-color: #EBF6F6;
}

.blazored-typeahead__loader {
    background-color: #EBF6F6 !important;
    color: #EBF6F6 !important;
}

.blazored-typeahead__active-item {
    background-color: #EBF6F6;
    color: #184A4E;
}

.blazored-typeahead__result {
    background-color: #EBF6F6;
}

    .blazored-typeahead__result:hover {
        background-color: #4CAEA8;
    }

.blazored-typeahead__input {
    background-color: #EBF6F6;
    height: 50px;
    border: none !important;
    border-radius: 0px;
    color: var(--turqDark);
}

.blazored-typeahead input::placeholder {
    color: var(--turq) !important;
}

.blazored-typeahead__input-hidden {
    visibility: visible !important;
}

.blazored-typeahead__input-mask {
    background-color: #EBF6F6;
    height: 50px;
    border: none !important;
    border-radius: 0px;
}

.blazored-typeahead__notfound {
    background-color: #EBF6F6;
    height: 50px;
    border: none !important;
    border-radius: 0px;
}

.blazored-typeahead__results-help-template {
    background-color: #EBF6F6;
    height: 50px;
    border: none !important;
    border-radius: 0px;
}

.blazored-typeahead__input-icon {
    background-color: var(--turqLight);
}

    .blazored-typeahead__input-icon:hover {
        background-color: var(--turqLight);
    }

.nummer-bar {
    padding-right: 20%;
}

#aplazaNr {
    background-color: #EBF6F6;
    height: 50px;
    border: none !important;
    border-radius: 0px;
    border-color: none;
}

#extranetAccount {
    background-color: #EBF6F6;
    height: 50px;
    border: none !important;
    border-radius: 0px;
    border-color: none;
}

.form-padding {
    padding-top: 25px;
}

.top-row {
    height: 1000px;
}

.bi-info-circle:hover {
}

/*Bootstrap overrides*/
.buttons-alignment {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: flex-start;
    width: 105px;
}

.btn-default, .btn-annuleren {
    background-color: none !important;
    border-radius: 0px !important;
    color: var(--turq);
    border: solid 1px var(--turq);
}

    .btn-default:hover, .btn-annuleren:hover {
        color: var(--turq);
        background-color: var(--turqLight) !important;
    }

.btn-default-selected {
    background-color: var(--turq) !important;
    border-radius: 0px !important;
    color: white;
    border: solid 1px var(--turq);
}

.btn-opslaan {
    color: #FFFFFF;
    background-color: #4CAEA8;
    border-radius: 0px !important;
    border-radius: 0px 20px 0px 0px !important;
}

    .btn-opslaan:hover {
        border-radius: 0px 20px 0px 0px !important;
        border: solid 1px var(--turq) !important;
        background-color: #F5F5F5 !important;
        color: var(--turq);
    }

.validation-message {
    color: var(--steunkleur) !important;
}

.invalid {
    outline: 1px solid var(--steunkleur);
}

.errorMsg {
    padding: 1rem;
    margin-right: 1rem;
    margin-top: 1rem;
    color: var(--steunkleur);
    font-weight: 500;
    outline: 2px solid var(--steunkleur);
}

.premie-zelf-regelen-knop {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

    .premie-zelf-regelen-knop:hover .zelf-regelen-icon {
        animation: fa-beat 2s infinite;
    }




/*/////////////sweetalert2 popup*/
.swal2-confirm, swal2-styled {
    background-color: var(--turq) !important;
    border-style: solid !important;
    border-width: thin !important;
    border-color: var(--turq) !important;
    border-radius: 0 0 0 0 !important;
}

    .swal2-confirm:hover {
        background-color: var(--turq) !important;
        color: #FFFFFF !important;
        border-style: solid !important;
        border-width: 1px !important;
        border-color: var(--turq) !important;
    }

    .swal2-confirm:active {
        background-color: var(--turqSemiDark) !important;
    }

.swal2-cancel, swal2-styled {
    border-style: solid !important;
    border-width: thin !important;
    border-color: var(--turq) !important;
    background-color: var(--turqLight) !important;
    border-radius: 0px 20px 0px 0px !important;
    color: var(--turq) !important;
}

    .swal2-cancel:hover {
        background-color: var(--turq) !important;
        color: white !important;
    }

.swal2-canel:active {
    background-color: var(--turqSemiDark) !important;
    color: white !important;
}

.swal2-popup, swal2-modal {
    background-color: var(--turqLight) !important;
    color: var(--turqSemiDark) !important;
    border-radius: 0px 125px 0px 0px !important;
}

.swal2-loader {
    border-color: var(--turq) transparent var(--turq) transparent !important;
}

.swal2-icon.swal2-warning {
    border-color: var(--turq) !important;
    color: var(--turq) !important;
    font-weight: 300;
}

    .swal2-icon.swal2-warning.swal2-icon-show {
        animation: swal2-animate-error-icon 1s !important;
    }

.swal2-icon.swal2-info {
    border-color: var(--turq) !important;
    color: var(--turq) !important;
    font-weight: 300;
}

    .swal2-icon.swal2-info.swal2-icon-show {
        animation: swal2-animate-error-icon 1s !important;
    }

.swal2-icon .swal2-icon-content {
    color: var(--turq);
}

.swal2-title {
    font-weight: 400 !important;
}

.swal2-popup .swal2-styled:focus {
    box-shadow: none !important;
}

.line {
    color: #4CAEA8;
}

input.disabled-radio {
    pointer-events: none;
    opacity: 0.5;
}

.bedragtablecel {
    text-align: right;
}

    .bedragtablecel.bold {
        font-weight: 600;
    }

.premie-buttons {
    margin-bottom: 10px;
}

@media (max-width: 767px) {
    .premie-buttons {
        width: 100% !important;
    }
}

.flex-container-premie {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: stretch;
    align-content: stretch;
}

.flex-items-premie:nth-child(1) {
    display: block;
    flex-grow: 0;
    flex-shrink: 1;
    flex-basis: auto;
    align-self: auto;
    order: 0;
}

.flex-items-premie:nth-child(2) {
    display: block;
    flex-grow: 0;
    flex-shrink: 1;
    flex-basis: auto;
    align-self: auto;
    order: 0;
}

.flex-items-premie:nth-child(3) {
    display: block;
    flex-grow: 0;
    flex-shrink: 1;
    flex-basis: auto;
    align-self: auto;
    order: 0;
}

.width-100 {
    width: 100%;
}

.premie-buttons-wrapper {
    width: 66%;
}

@media(max-width: 991px) {
    .premie-buttons-wrapper {
        width: 100%;
    }
}


/*/////////////////verschillende beeldschermen*/
@media (min-width:320px) { /* smartphones, iPhone, portrait 480x320 phones */
    /*    .apc-footer {
                height: 470px;
    }

    .apc-header {
        height: 250px !important;
    }*/

    .apc-direction {
        flex-direction: column;
    }


    .apc-tile-container {
        width: 267px;
    }

    .apc-button-container {
        width: 170px;
    }
}

@media (min-width:481px) { /* portrait e-readers (Nook/Kindle), smaller tablets @ 600 or @ 640 wide. */
    .apc-direction {
        flex-direction: column;
    }


    .apc-tile-container {
        width: 267px;
    }

    .apc-button-container {
        width: 170px;
    }
}

@media (min-width:641px) { /* portrait tablets, portrait iPad, landscape e-readers, landscape 800x480 or 854x480 phones */
    .apc-drag-and-drop {
        font-size: 1.25rem !important;
    }

    .apc-direction {
        flex-direction: row;
    }

    .apc-tile-container {
        width: 267px;
    }

    .apc-button-container {
        width: 170px;
    }
}

@media (min-width:961px) { /* tablet, landscape iPad, lo-res laptops ands desktops */
    .apc-drag-and-drop {
        font-size: 1.25rem !important;
        text-align: left !important;
    }

    .apc-direction {
        flex-direction: row;
    }

    .apc-tile-container {
        width: 537px;
    }

    .apc-button-container {
        width: 340px;
    }
}

@media (min-width:1025px) { /* big landscape tablets, laptops, and desktops */
    .apc-footer {
        /*        height: 270px;*/
    }

    .apc-direction {
        flex-direction: row;
    }


    .apc-tile-container {
        width: 805px;
    }

    .apc-button-container {
        width: 509px;
    }
}

@media (min-width:1281px) { /* hi-res laptops and desktops */
    .apc-drag-and-drop {
        font-size: 1.8rem !important;
    }

    .apc-direction {
        flex-direction: row;
    }

    .apc-tile-container {
        width: 805px;
    }

    .apc-button-container {
        width: 509px;
    }
}

.form-switch .form-check-input {
    background-color: var(--wit) !important;
    border-color: var(--hoofdkleur) !important;
}

.form-check-input, .form-check-input:checked {
    background-color: var(--hoofdkleur) !important;
    border-color: var(--hoofdkleur) !important;
}


.required::after {
    content: ' *';
    color: var(--steunkleur);
}

input:valid {
    color: var(--hoofdkleur);
}

input:invalid {
    color: var(--steunkleur);
}

.form-select:focus {
    border-color: var(--hoofdkleur);
    outline: 0;
    box-shadow: 0 0 0 0.25rem var(--medium-donker);
}

.form-select[multiple], .form-select[size]:not([size="1"]) {
    padding-right: 0.75rem;
    background-image: none;
}

.form-select:disabled {
    background-color: var(--licht);
}

.form-select:-moz-focusring {
    color: transparent;
    text-shadow: 0 0 0 var(--turquoise-donker);
}


.selector {
    background-color: var(--licht);
    color: var(--turquoise-donker);
    border: none;
    border: 1px solid #595E57;
    padding: 5px;
    width: 400px;
    overflow: hidden;
}

    .selector option {
        padding: 5px;
    }

        .selector option:hover {
            background-color: var(--turquoise-donker);
            color: var(--licht);
        }

.apc-page-background {
    background-color: var(--wit);
    border-top-right-radius: 25px;
}


/*============================ SEPA ================================*/
.SEPA {
    color: white;
    font-weight: 500;
    height: 50px;
    display: flex;
    align-items: center;
    background-color: var(--turq);
}

.SEPAimg {
    height: 25px;
    /*    padding-left: 25px;*/
    margin-left: auto;
}

@media(max-width: 750px) {
    .SEPAimg {
        /*        margin-right: 10%;*/
        padding-right: 100%;
    }
}

.SEPAitems {
    padding-left: 12px;
    width: 101.55%;
}

.labelSepa {
    display: flex;
    align-items: center;
}

@media(max-width: 575px) {
    .titelSepa {
        display: none;
    }
}

@media(max-width: 575px) {
    .row-sepa-adres {
        padding-bottom: 10px;
    }
}

.labelSepa {
}

/*============================ Handtekening================================*/
.signature-pad-styling {
    border: 4px solid var(--turqLight) !important;
    /*    width: 652px;*/
    /*    width: 100%;*/
}

/*============================ PDF Vieweer================================*/
.Header {
    background-color: red !important;
    color: red !important;
}

.custom-ribbons-container {
    color: red !important;
}

.DocumentContainer {
    width: 120%;
}

.Button.Icon {
    color: red !important;
}

#clear-signature {
    color: var(--turq);
    border: 1px solid var(--turq);
    padding-inline: 20px;
}

.fa-trash-can {
    color: var(--turq);
}

#clear-signature:hover {
    background-color: var(--turq);
    color: white;
}

#clear-signature:active {
    background-color: var(--turqMedium);
}


/*============= ExtranetWebAppV2 =====================*/
.apc-zelfregelen-icoon {
    text-align: center;
}

    .apc-zelfregelen-icoon .bi {
        cursor: pointer;
        color: var(--turq) !important;
        font-size: 1.2rem;
    }

.offertebeheertabel thead tr th:nth-last-child(1) .col-title-text {
    width: 100%;
    text-align: center !important;
}

@media(max-width: 575px) {
    .quickgrid {
        font-size: 10px !important;
    }
}


/*============= quickgrid =====================*/
/*============= hide columns=====================*/
@media (max-width: 1199px) {
    .column-hidden-md {
        display: none;
    }
}

@media (max-width: 991px) {
    .column-hidden-sm {
        display: none;
    }
}

@media (max-width: 767px) {
    .column-hidden-xs {
        display: none;
    }
}

@media (max-width: 685px) {
    .column-hidden-xxs {
        display: none;
    }
}

@media (max-width: 404px) {
    .column-hidden-xxxs {
        display: none;
    }
}

.column-hidden {
    display: none;
}

/*============= show columns=====================*/
@media (min-width: 1199px) {
    .column-show-md {
        display: none;
    }
}

@media (min-width: 991px) {
    .column-show-sm {
        display: none;
    }
}

@media (min-width: 767px) {
    .column-show-xs {
        display: none;
    }
}

@media (min-width: 685px) {
    .column-show-xxs {
        display: none;
    }
}

@media (min-width: 404px) {
    .column-show-xxxs {
        display: none;
    }
}


.kebab-menu-container {
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.kebab-icon {
    cursor: pointer;
    font-size: 18px;
    color: var(--turq);
    display: flex;
    justify-content: center;
    line-height: 20px;
    font-size: 20px;
}

.kebab-dropdown {
    display: none;
    position: absolute;
    background-color: #fff;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
    padding: 10px;
    border-radius: 5px;
    z-index: 9999;
    min-width: 200px;
    top: -30px;
    border: 2px solid var(--turq);
    right: 10px;
}

    .kebab-dropdown div {
        padding: 5px 0;
        font-size: 0.875rem;
    }

.kebab-menu-column {
    border-left: 5px solid var(--turqLight);
    position: relative;
    width: 7%;
    height: 100%;
}

@media(min-width: 1199px) {
    .kebab-menu-column {
        display: none;
    }
}

@media(max-width: 575px) {
    .kebab-menu-column {
        width: 11%;
    }
}



/* Styling for the dropdown */
.inputselect-dropdown {
    color: var(--turq); /* Text color inside the dropdown */
    background-color: white; /* Background color for the dropdown */
    border: none; /* Removes the border of the dropdown */
    outline: none; /* Remove the outline that appears when focused */
    padding: 10px; /* Adjust padding as needed */
    font-size: 1rem; /* Font size inside the dropdown */
}

    /* Styling for individual dropdown items */
    .inputselect-dropdown option {
        text-decoration: none; /* Removes any default underline styling */
        color: var(--turq); /* Text color for options */
        background-color: white; /* Background color for options */
    }

        /* Styling for hovered dropdown items */
        .inputselect-dropdown option:hover {
            text-decoration: none; /* Removes underline styling when hovering */
            background-color: var(--turq); /* Background color for hovered options */
        }


.fa-rotate-180 {
    -ms-transform: rotate(45deg); /* Internet Explorer 9 */
    -webkit-transform: rotate(45deg); /* Chrome, Safari, Opera */
    transform: rotate(45deg); /* Standard syntax */
}

.ApcTable {
    height: auto;
}

.offertebeheer-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

@media (max-width: 767px) {
    .offertebeheer-titel {
        display: none;
    }

    .offertebeheer-dropdown-titel {
        float: left !important;
    }
}

/*.offertebeheer-container {
	font-size: 14px !important;
}

	.offertebeheer-container * {
		font-size: inherit !important;
	}*/


/*====================  ========================*/
.input-decimal-teken {
    text-align: center;
}

/*============= shortcuts =====================*/
.vertical-center {
    display: flex;
    align-items: center;
}



/*============= VTOM =================================*/
#variant-counter {
    color: var(--wit);
}


/*============= Radzen ===============================*/

.rz-text-h1,
.rz-text-h2,
.rz-text-h3,
.rz-text-h4,
.rz-text-h5,
.rz-text-h6 {
    font-family: 'Poppins', sans-serif;
}

/* RadzenDropDown */
.rz-dropdown:not(.rz-calendar-month-dropdown):not(.rz-calendar-year-dropdown) {
    color: var(--turqSemiDark);
    background-color: var(--turqLight);
    border-radius: 0px;
    border: none !important;
    box-shadow: none !important;
    justify-content: center;
    width: 100% !important;
    height: 3rem;
}

.rz-chkbox-box.rz-state-active {
    background-color: var(--turq) !important;
}

.rz-dropdown-chips .rz-chip .rz-button {
    background-color: transparent !important;
}

    .rz-dropdown-chips .rz-chip .rz-button:hover {
        box-shadow: none !important;
        transition: background-color 0.2s ease-in-out;
        background-color: var(--turqLight) !important;
    }

.rz-chip {
    background-color: var(--wit) !important;
    border-radius: 0px !important;
}

.rz-multiselect-items li.rz-state-highlight {
    background-color: var(--turqLight);
}

    .rz-multiselect-items li.rz-state-highlight:hover {
        background-color: var(--turqLight);
    }

/* RadzenDatePicker */
.rz-datepicker,
.rz-datepicker > .rz-inputtext,
.rz-calendar-month-dropdown,
.rz-calendar-year-dropdown {
    color: var(--turqSemiDark);
    background-color: var(--turqLight);
    border-radius: 0px;
    border: none !important;
    box-shadow: none !important;
    justify-content: center;
    display: flex;
    height: 3rem;
}

.rz-calendar-view td .rz-state-active.rz-state-focused {
    background-color: var(--turq) !important;
}

.rzi-chevron-down,
.rz-calendar-prev .rzi,
.rz-calendar-next .rzi {
    color: var(--turq);
}

.rz-textbox:not(:disabled):not(.rz-state-disabled):focus {
    outline: none !important;
    border: none !important;
    box-shadow: 0 0 0 0.2rem var(--turqLight) !important;
    background-color: var(--wit);
    color: var(--turqSemiDark);
}

.rz-textbox:not(:disabled):not(.rz-state-disabled):hover {
    border: none !important;
}

/* RadzenNotification */
.rz-notification-info, .rz-notification-error {
    position: fixed;
    bottom: 0rem;
    left: 1rem;
}

    .rz-notification-info .rz-notification-item {
        background-color: var(--turq);
    }

    .rz-notification-error .rz-notification-item {
        background-color: var(--waarschuwing)
    }

.rz-progressbar.rz-progressbar-primary {
    background-color: rgb(255, 255, 255, 0.2);
}

.rz-progressbar-determinate.rz-progressbar-primary .rz-progressbar-value {
    background-color: var(--wit);
}

.rz-notification-icon.rzi-info-circle, .rz-notification-icon.rzi-times {
    display: none;
}

.rz-notification-item > .rz-notification-close {
    color: var(--wit);
    opacity: 1;
    align-self: center;
}


.rz-dialog-content {
    background-color: var(--turqMedium) !important;
    color: var(--turqLight) !important;
}

.custom-modal-content {
    background: none !important;
    color: var(--turqLight) !important;
}

.rz-button.popup-btn {
    background-color: var(--turqLight) !important;
    color: var(--turqMedium) !important;
    border: 1px solid var(--turqMedium) !important;
}

    .rz-button.popup-btn:hover,
    .rz-button.popup-btn:focus {
        background-color: var(--turqMedium) !important;
        color: var(--turqLight) !important;
    }

.rz-button.attentie-btn {
    background-color: var(--steunkleur) !important;
    color: var(--wit) !important;
    border: 1px solid var(--steunkleur) !important;
}

    .rz-button.attentie-btn:hover,
    .rz-button.attentie-btn:focus {
        background-color: var(--turqDark) !important;
        color: var(--wit) !important;
    }

.rz-button.popup-btn,
.rz-button.attentie-btn {
    text-transform: lowercase !important; /* voorkomt hoofdletters */
}

.rz-dialog-titlebar,
.rz-dialog-titlebar *,
.rz-dialog-titlebar h5,
.rz-dialog-titlebar span {
    color: var(--turqLight) !important;
    background-color: var(--turqMedium) !important;
}

.modal-actions {
    background-color: var(--turqMedium) !important;
    color: var(--turqLight) !important;
}

.blurred {
    filter: blur(8px);
    pointer-events: none; /* Optioneel: voorkomt interactie met de achtergrond */
    user-select: none; /* Optioneel: voorkomt selectie van tekst */
    transition: filter 0.2s;
}

.popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.2); /* optioneel: donkere overlay */
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.popup-content {
    background: white;
    border-radius: 8px;
    padding: 32px;
    z-index: 1001;
    /* overige styling */
}

@media (max-width: 768px) {

    .rz-notification-info, .rz-notification-error {
        width: 95%;
        left: 50%;
        transform: translateX(-50%);
    }
}

/*============= file uploader ===============================*/
.ff_fileupload_remove_file {
    border-color: var(--turq) !important;
}

    .ff_fileupload_remove_file:hover {
        background-color: var(--turq) !important;
    }

.ff_fileupload_wrap .ff_fileupload_dropzone:hover{
    background-color: var(--turq) !important;
}
/*============= productvergelijker loading animatie ===============================*/
.dot-loader {
    width: 40px;
    aspect-ratio: 5;
    --_g: no-repeat radial-gradient(circle closest-side,var(--turq) 90%,#0000);
    background: var(--_g) 0% 50%, var(--_g) 50% 50%, var(--_g) 100% 50%;
    background-size: calc(100%/3) 100%;
    animation: l7 1s infinite linear;
}

@keyframes l7 {
    33% {
        background-size: calc(100%/3) 0%,calc(100%/3) 100%,calc(100%/3) 100%
    }

    50% {
        background-size: calc(100%/3) 100%,calc(100%/3) 0%,calc(100%/3) 100%
    }

    66% {
        background-size: calc(100%/3) 100%,calc(100%/3) 100%,calc(100%/3) 0%
    }
}