@import url('site.css');
html {
    font-size: 16px;
}

@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}

html {
    position: relative;
    min-height: 100%;
}

body {
    margin-bottom: 60px;
    height: 100%;
}

#map {
    height: 100%;
    min-height: 500px;
}

.formatted {
    font-size: small;
}

h1, h2, h3 {
    color: #ed7000;
    margin-top: 30px;
    font-size:33px;
    margin-bottom: 10px;
}

h3.iframe {
    margin-top:10px;
}

#description {
    font-family: Roboto;
    font-size: 15px;
    font-weight: 300;
}

#infowindow-content .title {
    font-weight: bold;
}

#infowindow-content {
    display: none;
}

#map #infowindow-content {
    display: inline;
}

.pac-card {
    background-color: #fff;
    border: 0;
    border-radius: 2px;
    box-shadow: 0 1px 4px -1px rgba(0, 0, 0, 0.3);
    margin: 10px;
    padding: 0 0.5em;
    font: 400 18px Roboto, Arial, sans-serif;
    overflow: hidden;
    font-family: Roboto;
    padding: 0;
}

#pac-container {
    padding-bottom: 12px;
    margin-right: 12px;
}

.pac-controls {
    display: inline-block;
    padding: 5px 11px;
}

    .pac-controls label {
        font-family: Roboto;
        font-size: 13px;
        font-weight: 300;
    }

.pac-input {
    background-color: #fff;
    font-family: Roboto;
    font-size: 15px;
    font-weight: 300;
    margin-left: 12px;
    padding: 0 11px 0 13px;
    text-overflow: ellipsis;
    width: 400px;
}

.pac-postcode {
    width: 200px;
}

.pac-huisnr {
    width: 100px;
}

.pac-toevoeging {
    width: 50px;
}


.pac-input:focus {
    border-color: #4d90fe;
}

#title {
    color: #fff;
    background-color: #4d90fe;
    font-size: 25px;
    font-weight: 500;
    padding: 6px 12px;
}

table {
    width: 100%;
}

.bedrag {
    text-align: right;
    width: 30%;
}

.winkelmandje, .panel {
    border: 1px solid #999;
    box-shadow: #ccc 5px 5px 10px;
    padding: 20px;
    border-radius: 5px;
    margin-bottom: 20px;
    line-height: 1.6;
}

.activelink {
    margin-top: 10px;
    margin-bottom: 10px;
    font-size: larger;
    color: #ed7000;
    font-weight:600;
    cursor:pointer;
}
.activelink:hover{
    text-decoration:underline;
}


.subtotaal {
    border-top: 1px solid #888;
    color: #888;
}

.totaal {
    border-top: 2px solid #333;
    font-weight: 600;
}


.omschrijving {
    width: 70%;
}


.control-search {
    padding-right: 20px;
    background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='16' class='bi bi-search' viewBox='0 0 20 16'%3E%3Cpath d='M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z'%3E%3C/path%3E%3C/svg%3E") no-repeat right ;
}

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

.control-input {
    width: 100%;
    padding: 5px;
    border: 1px solid #ed7000;
    border-radius:5px;
    font-size:larger;
}

.more {
    padding: 5px;
    color: #333;
}

.morebutton:hover {
    text-decoration: underline;
    cursor:pointer;
}
    .control-input:focus {
        box-shadow: 0px 0px 5px #ed7000;
        border: 2px solid #ed7000;
    }
    .control-input.correct {
        border: 3px solid #2f9a92;
        background: url('check.svg');
        background-position: right 5px bottom .5em;
        background-repeat: no-repeat;
        padding-right: 20px;
    }
    .control-input.filled {
        background: url('check.svg');
        background-position: right 5px bottom .5em;
        background-repeat: no-repeat;
        background-size: var(--unity-global-font-size-20);
        padding-right: calc(var(--unity-global-font-size-20) + var(--unity-global-space-16));
    }
    .control-input.loading {
        background: url('hourglass.svg');
        background-position: right 5px bottom .5em;
        background-repeat: no-repeat;
    }

    /*.control-input.empty {
        background: #eae621;
    }*/

    .control-input.wrong {
        background: #EA7B9733 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='16' viewBox='0 0 20 16' %3E%3Cpath d='M6.95.435c.58-.58 1.52-.58 2.1 0l6.515 6.516c.58.58.58 1.519 0 2.098L9.05 15.565c-.58.58-1.519.58-2.098 0L.435 9.05a1.482 1.482 0 0 1 0-2.098L6.95.435zm1.4.7a.495.495 0 0 0-.7 0L1.134 7.65a.495.495 0 0 0 0 .7l6.516 6.516a.495.495 0 0 0 .7 0l6.516-6.516a.495.495 0 0 0 0-.7L8.35 1.134z'%3E%3C/path%3E %3E%3Cpath d='M7.002 11a1 1 0 1 1 2 0 1 1 0 0 1-2 0zM7.1 4.995a.905.905 0 1 1 1.8 0l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 4.995z'%3E%3C/path%3E  %3C/svg%3E ") no-repeat right;
        border: 1px solid #f3110a;
        padding-right: 20px;
    }


@keyframes lineInserted {
    from {
        height: 0;
        min-height:0px;
    }

    to {
        height: 120px; 
        min-height:0px;
    }
}
.autocomplete-results {
    border: 1px solid #000;
    overflow-y: scroll;
    width: 100%;
    min-height: 120px;
    max-height: 160px;
/*    animation-duration: 2s;
    animation-name: lineInserted;
    transition: height 2s;
*/}

.autocomplete-item-select {
    cursor: pointer;
    
    padding-bottom:5px;
}

    .autocomplete-item-select.autocomplete-item-selected {
        background: #ed700066;
    }

    .autocomplete-item-select:hover {
        background: #aae6fc;
    }

.autocomplete-item-icon {
    padding: 5px;
    color: #3440B6;
}

/*<div class="correct-check" >
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-check-circle-fill" viewBox="0 0 16 16" >
<path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z" / >
</svg >
</div >*/


.correct-panel, .summary {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='16' class='bi bi-search' viewBox='0 0 20 16'%3E%3Cpath d='M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z'%3E%3C/path%3E%3C/svg%3E");
    background-color: #EBF7EF;
    margin-top: 15px;
    border: 1px solid #7BC997;
    border-radius: 4px;
    padding: 12px;
    position: relative;
    background-position: right 5px;
    background-repeat: no-repeat;
}

    .summary.inactive {
        background-image: url('inactive.svg');
        background-color: #EA7B9733;
        border: 1px solid #EA7B9733;
        background-size: 10%;
    }
    .summary.bv {
        background-image: url('bv.svg');
        background-size: 10%;
    }
    .summary.eenmanszaak {
        background-image: url('eenmanszaak.svg');
        background-size: 10%;
    }
    .correct-panel.incorrect {
        background: #eb000066;
        border: 1px solid #7b0000;
    }


/*<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-exclamation-diamond" viewBox="0 0 16 16" >
<path d=""/ >
<path d="M7.002 11a1 1 0 1 1 2 0 1 1 0 0 1-2 0zM7.1 4.995a.905.905 0 1 1 1.8 0l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 4.995z"/ >
</svg >
*/
.incomplete-panel, .warning{
    background: #EA7B9733 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='16' viewBox='0 0 20 16' %3E%3Cpath d='M6.95.435c.58-.58 1.52-.58 2.1 0l6.515 6.516c.58.58.58 1.519 0 2.098L9.05 15.565c-.58.58-1.519.58-2.098 0L.435 9.05a1.482 1.482 0 0 1 0-2.098L6.95.435zm1.4.7a.495.495 0 0 0-.7 0L1.134 7.65a.495.495 0 0 0 0 .7l6.516 6.516a.495.495 0 0 0 .7 0l6.516-6.516a.495.495 0 0 0 0-.7L8.35 1.134z'%3E%3C/path%3E %3E%3Cpath d='M7.002 11a1 1 0 1 1 2 0 1 1 0 0 1-2 0zM7.1 4.995a.905.905 0 1 1 1.8 0l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 4.995z'%3E%3C/path%3E  %3C/svg%3E ") no-repeat right;
    margin-top: 15px;
    border: 1px solid #EA7B97;
    border-radius: 4px;
    padding: 12px;
    position: relative;
    cursor: pointer;
}

.correct-check {
    color: green;
    position: absolute;
    font-size: larger;
    top: 10px;
    left: 5px;
}

.correct-address {
    padding-left:30px;
    
}
.small-button {
    width: 150px;
}

.stappen {
    text-align: center;
    //background: #FBF8F5;
    padding: 20px;
    border-bottom: 1px solid #E5E2E0;
}

.stappen_next {
    color: #999;
}

.stappen_done {
    color: #5DB059;
}

.stappen_nu {
    color: #5DB059;
    font-weight: 800;
}

.pci-button {
    position: relative;
    display: flex;
    width: 200px;
    align-items: center;
    padding: 8px 24px;
    justify-content: center;
    border-radius: 20px;
    border: 1px solid #3440B6;
    transition: all .25s cubic-bezier(.4,0,.2,1);
    font-size: inherit;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    color: #3440b6;
    background-color: #fff;
}

.login_button {
    width: 100%;
    margin: 10px 0px 10px 0px;
    padding-top: 10px;
    padding-bottom: 10px;
    border-radius: 5px;
}

.login_button_pnl {
    background-color: #E09133;
    color: white;
}

.login_button_text {
    text-align: center;
    color: #666;
}

.control-account {
    margin-bottom: 10px;
}

.stappen_done {
    position: relative;
}

.noline {
    background: white;
    z-index: -3;
    width: 32px;
    height: 32px;
    margin: auto;
}
/*
.noline:before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    border-top: 1px solid black;
   
    width: 100%;
    z-index:-5;
    transform: translateY(-50%);
}*/
.full_line {
    background-image: linear-gradient(to right, #5DB059 0%, #5DB059 100%);
    background-position: center;
    background-size: 100% 2px;
    background-repeat: repeat-x;
}

.right_line {
    background-image: linear-gradient(to right, #fff 48%, #5DB059 50%, #5DB059 100%);
    background-position: center;
    background-size: 100% 2px;
    background-repeat: repeat-x;
}

.left_line {
    background-image: linear-gradient(to left, #fff 48%, #5DB059 50%, #5DB059 100%);
    background-position: center;
    background-size: 100% 2px;
    background-repeat: repeat-x;
}

.full_line_next {
    background-image: linear-gradient(to right, #999 0%, #999 100%);
    background-position: center;
    background-size: 100% 2px;
    background-repeat: repeat-x;
}

.left_line_right_next {
    background-image: linear-gradient(to right, #5DB059 0%, #5DB059 49%, #999 50%, #999 100%);
    background-position: center;
    background-size: 100% 2px;
    background-repeat: repeat-x;
}

.left_line_next {
    background-image: linear-gradient(to left, #fff 48%, #999 50%, #999 100%);
    background-position: center;
    background-size: 100% 2px;
    background-repeat: repeat-x;
}

.error {
    width: 100%;
    color: red;
}


/* The Modal (background) */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 5; /* Sit on top */
    padding-top: 100px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

.modal-iframe {
    padding-top:0px;
}

/* Modal Content */
.modal-content {
    background-color: #fefefe;
    margin: auto;
    max-width: 450px;
    padding: 20px;
    border: 1px solid #888;
    width: 80%;
}

.modal-content-iframe {
    background-color: #fefefe;
    margin: auto;
    max-width: 450px;
    padding: 20px;
    border: 1px solid #888;
    width: 80%;
    height:600px;
    overflow:auto;
    position:relative;
}

/* The Close Button */
.close {
    color: #aaaaaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

    .close:hover,
    .close:focus {
        color: #000;
        text-decoration: none;
        cursor: pointer;
    }

.close-iframe {
    position: absolute;
    right: 20px;
    top: 20px;
}

.land {
    margin-top:10px;
    margin-bottom:10px
}
.vlag {
    margin-right: 10px;
}

.land_clickable {
    cursor: pointer;
}
    .land_clickable:hover {
        color: #3440B6;
        text-decoration: underline;
    }
.tab-pane {
    margin-top:20px;
}

.resetform {
    background: none;
    width: 150px;
    border: 2px solid #eee;
    border-radius: 3px;
    color: #ed7000;
    margin-top: 5px;
    cursor: pointer;
    text-align: center;
    text-decoration: underline;
}
    .resetform:hover {
        color: #3440B6;
        border-color: #ed7000;
    }


.hidden {
    display: none;
}


.button, p.buttons button {
    --primary-color: #ed7000;
    --default-color: #27324c;
    --lighter-default-color: #2c3956;
    --lightest-default-color: #415477;
    --secondary-color: #3440b6;
    --secondary-darker-color: #001a73;
    --inverted-default-color: #FFFFFF;
    --hover-color: #f3f4f7;
    --card-default-bg-color: #f1f2f9;
    --card-secondary-bg-color: #ebdbc8;
    --border-color: #d4d9e3;
    --inactive-color: #8a95af;
    --inverted-postnl-color: #66728a;
    --default-bg-color: #FFFFFF;
    color: var(--inverted-default-color);
    cursor: pointer;
    background-color: var(--button-color,var(--secondary-color));
    padding: 8px 24px;
    display: block;
    border-radius: 100px;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.5;
    text-align: center;
    font-family: inherit;
    outline: 0;
    border: none;
    text-decoration: none;
    -webkit-transition: background-color .1s;
    transition: background-color .1s;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    inline-size: 100%;
    position: relative;
    text-decoration: none;
    -webkit-transition: background-color .1s ease,color .1s ease;
    transition: background-color .1s ease,color .1s ease
}

.TestResult {
    border: 1px solid #666;
    padding: 5px;
    margin: 15px;
    background: #aaa;
}

    .TestResult.success {
        background: #0a0;
    }

    .TestResult.fail{
        background: #a00;
        color: white;
    }

.container {
    width: 100%;
    padding-right: var(--bs-gutter-x,.75rem);
    padding-left: var(--bs-gutter-x,.75rem);
    margin-right: auto;
    margin-left: auto;
}
.img {width:100%;
      aspect-ratio: initial;

}

.imglarge{
    max-width:100%;
}
.discount{
    border:0px;
    box-shadow: 3px 3px 5px rgba(0,0,0,.2);
    border-radius: 5px
}

.pnl-label{
    margin-block-end:0em;
}