@font-face {
    font-family: 'latomedium';
    src: url('/fonts/Lato/lato-medium-webfont.woff2') format('woff2'),
        url('/fonts/Lato/lato-medium-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family:'arialbold';
    src: url('/fonts/Arial/Arialbold.ttf');
}

@font-face {
    font-family:'bree_serifregular';
    src: url('/fonts/bree-serif/BreeSerif-Regular.otf');
}

@font-face {
    font-family:'patua_oneregular';
    src: url('/fonts/Patua_One/PatuaOne-Regular.ttf');
}

:root {
    --bs-blue: #0d6efd;
    --bs-indigo: #6610f2;
    --bs-purple: #6f42c1;
    --bs-pink: #d63384;
    --bs-red: #dc3545;
    --bs-orange: #fd7e14;
    --bs-yellow: #ffc107;
    --bs-green: #198754;
    --bs-teal: #20c997;
    --bs-cyan: #0dcaf0;
    --bs-white: #fff;
    --bs-gray: #6c757d;
    --bs-gray-dark: #343a40;
    --bs-gray-100: #f8f9fa;
    --bs-gray-200: #e9ecef;
    --bs-gray-300: #dee2e6;
    --bs-gray-400: #ced4da;
    --bs-gray-500: #adb5bd;
    --bs-gray-600: #6c757d;
    --bs-gray-700: #495057;
    --bs-gray-800: #343a40;
    --bs-gray-900: #212529;
    --bs-primary: #0d6efd;
    --bs-secondary: #6c757d;
    --bs-success: #198754;
    --bs-info: #0dcaf0;
    --bs-warning: #ffc107;
    --bs-danger: #dc3545;
    --bs-light: #f8f9fa;
    --bs-dark: #212529;
    --bs-primary-rgb: 13, 110, 253;
    --bs-secondary-rgb: 108, 117, 125;
    --bs-success-rgb: 25, 135, 84;
    --bs-info-rgb: 13, 202, 240;
    --bs-warning-rgb: 255, 193, 7;
    --bs-danger-rgb: 220, 53, 69;
    --bs-light-rgb: 248, 249, 250;
    --bs-dark-rgb: 33, 37, 41;
    --bs-white-rgb: 255, 255, 255;
    --bs-black-rgb: 0, 0, 0;
    --bs-body-color-rgb: 33, 37, 41;
    --bs-body-bg-rgb: 248, 250, 252;
    --bs-font-sans-serif: "Nunito", sans-serif;
    --bs-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    --bs-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
    --bs-body-font-family: var(--bs-font-sans-serif);
    --bs-body-font-size: 0.9rem;
    --bs-body-font-weight: 400;
    --bs-body-line-height: 1.6;
    --bs-body-color: #212529;
    --bs-body-bg: #f8fafc;

      /* Mijn situatie */
      --a-k-corporate-black: #2D2D2D;
      --a-k-corporate-white: #FFFFFF;
      --a-k-corporate-light-blue: #E7F2FE;
      --a-k-corporate-blue-button: #AFD3FB;
      --a-k-corporate-blue-primary: #3891F5;
      --a-k-corporate-blue-hover: #1B72D5;
      --a-k-corporate-dark-blue-primary: #002546;
      --a-k-persoonlijk-blue-dark: #173454;
      --a-k-persoonlijk-blue: #4E88C7;
      --a-k-persoonlijk-light-blue: #6797CB;
      --a-k-thuis-orange-dark: #693900;
      --a-k-thuis-orange: #EF9122;
      --a-k-thuis-orange-light: #FCE9D3;
      --a-k-zakelijk-brown: #8F796E;
      --a-k-zakelijk-light-brown: #C7BCB6;
      --a-k-agrarisch-green: #68AA08;
      --a-k-agrarisch-light-green: #B3D483;

      --unnamed-font-family-patua-one: patua_oneregular;
      --unnamed-font-family-lato: latomedium;
      --unnamed-font-style-normal: normal;
      --unnamed-font-weight-900: 900px;
      --unnamed-font-weight-normal: normal;
      --unnamed-font-weight-bold: bold;
      --unnamed-font-weight-medium: medium;
      --unnamed-font-size-12: 12px;
      --unnamed-font-size-16: 16px;
      --unnamed-font-size-14: 14px;
      --unnamed-font-size-20: 20px;
      --unnamed-font-size-25: 25px;
      --unnamed-font-size-30: 30px;
      --unnamed-font-size-40: 40px;
      --unnamed-character-spacing-0: 0px;
      --unnamed-character-spacing-0-08: 0.08px;
      --unnamed-line-spacing-20: 20px;
      --unnamed-line-spacing-25: 25px;
      --unnamed-line-spacing-30: 30px;
      --unnamed-line-spacing-35: 35px;
      --unnamed-line-spacing-45: 45px;
  }



  .bg-persoonlijk{
      background-color: var(--a-k-corporate-light-blue);
  }
  .bg-persoonlijk-icon{
      background-color: var(--a-k-persoonlijk-blue);
  }
  .mijnsp-text-bold{
      font-weight: var(--unnamed-font-weight-bold);
      font-family: var(--unnamed-font-family-lato);
      font-size: var(--unnamed-font-size-16);
      text-align: left;
      color: var(--a-k-persoonlijk-blue-dark);
  }
  .mijnsp-text{
      font-weight: var(--unnamed-font-weight-normal);
      font-family: var(--unnamed-font-family-lato);
      font-size: var(--unnamed-font-size-14);
      text-align: left;
      color: var(--a-k-persoonlijk-blue-dark);
  }
  .mijns-item{
      border-radius: 45px;
      width: 100%;
      min-height: 90px;
      align-items: center;
      display: flex;
      padding: 25px;
  }

  @media screen and (max-width: 768px) {
      #cardMijnsituatie .card-body {
          padding-left: 10px;
          padding-right: 10px;
      }
  }

#cardMijnsituatie{
    border-radius: 45px;
    position: relative;
}

/* error message fix */
.loginBox .invalid-feedback{
    display:block;
}

/* Header fix */

@media (max-width: 767px){
    .site-header .menu-left {
        position: fixed;
        z-index: 999;
        background-color: var(--white);
        right: 0;
    }
}

.medewerkers-reset{
    margin-left: -170px !important;
}

.klanten-reset{
    margin-left: -170px !important;
}

.klanten-row-reset{
    margin-right: -175px !important;
}

.popup {
    width: 45%;
    min-width: 450px;
}

/* Dan maar zo */
body {
    background-color: var(--lightBlue)!important;
    padding: 0!important;
}
.p-4 .col-12 .float-right span a i.fa-plus{
    height: 20px;
}
/* --------------- plus  --------------- */


.top {
    background-color: var(--blue);
    padding-top: 5px;
}

/* --------------- datatable --------------- */

.dataTables_length  {
    width: auto;
    float: right;
    text-align: right;
    /*padding-left: 3vh;*/
}
.dataTables_filter {
    padding-left: 5vh;
}

.dataTables_info, #medewerker_info,
.dataTables_info, #korting_info,
.dataTables_info, #klanten_info {
    padding-top: 0;
    padding-left: 0.5vh;
}

.dataTables_paginate a, .dataTables_paginate a:active {
    color: black;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover,
.dataTables_paginate .paginate_button.active,
.dataTables_paginate .paginate_button.active:hover,
.dataTables_paginate .paginate_button.active:active {
    background: var(--blue) !important;
    border-color: var(--darkBlue) !important;
}

.dataTables_paginate .paginate_button.active a,
.dataTables_paginate .paginate_button.active a:active {
    color: white;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:not(.active):hover,
.dataTables_wrapper .dataTables_paginate .paginate_button:not(.active) a:hover {
    background: transparent !important;
    color: black !important;
    border-color: transparent !important;
}


/* --------------- arrow --------------- */

.opdrachtGever.collapse-heading .fa-icon-arrow-up-black {
    background:url(https://mijnadviesenkies.nl/images/black/icon-arrow-up-black.svg) no-repeat center center;
}
.opdrachtGever.collapse-heading .fa-icon-arrow-down-black {
    background:url(https://mijnadviesenkies.nl/images/black/icon-arrow-down-black.svg) no-repeat center center;
}

.opdrachtGever.collapse-heading.collapsed .fa-icon-arrow-up-black,
.opdrachtGever.collapse-heading .fa-icon-arrow-down-black {
    display: none;
    transform: scale(0.70);
}
.opdrachtGever.collapse-heading.collapsed .fa-icon-arrow-down-black,
.opdrachtGever.collapse-heading .fa-icon-arrow-up-black {
    display: inline-block;
    transform: scale(0.70);
}

/* --------------- Table --------------- */

#korting_length select, #klanten_length select, #medewerker_length select {
    margin-right: 10px;
}

.dataTables_Filter{
    float: right !important;
}

#korting th, #korting .even td,
#klanten th, #klanten .even td,
#berichten th, #berichten .even td,
#berichtenKlant th, #berichtenKlant .even td,
#medewerker th, #medewerker .even td {
    background-color: #ffffff;
}


#korting th, #korting td,
#klanten th, #klanten td,
#berichten th, #berichten td,
#berichtenKlant th, #berichtenKlant td,
#medewerker th, #medewerker td {
    /*text-align: center;*/
    vertical-align: middle;
}

table.klanten tbody {
    background-color: var(--dubbleLightOrange);
}

table.klanten > tbody > tr > td .vl {
    height: 60px;
    padding-left: 20px;
    /*border-left: 1px solid var(--orange);*/
}

/* --- Orange --- */
table.klanten.colorOrange thead th {
    background-color: var(--orange);
}

table.klanten thead .fa-icon-house:after, table.klanten tbody .fa-icon-house:after {
    background:url(https://mijnadviesenkies.nl/images/orange/Icoon-thuis.svg) no-repeat center center;
    border-radius: 100px;
}

table.klanten.colorOrange .vl {
   border-left: 1px solid var(--orange);
}

/* --- Blue --- */
table.klanten.colorBlue thead th {
    background-color: var(--blue);
}

table.klanten thead .fa-icon-personal:after, table.klanten tbody .fa-icon-personal:after{
    background:url(https://mijnadviesenkies.nl/images/blue/Icoon-Persoonlijk.svg) no-repeat center center;
    border-radius: 100px;
}

table.klanten thead .fa-icon-products:after, table.klanten tbody .fa-icon-products:after {
    background:url(https://mijnadviesenkies.nl/images/blue/icon-products.svg) no-repeat center center;
    border-radius: 100px;
}

table.klanten.colorBlue .vl {
   border-left: 1px solid var(--blue);
}

/* --- Brown --- */
table.klanten.colorBrown thead th {
    background-color: var(--brown);
}

table.klanten thead .fa-icon-business:after, table.klanten tbody .fa-icon-business:after {
    background:url(https://mijnadviesenkies.nl/images/brown/Icoon-Zakelijk-Brown.svg) no-repeat center center;
    border-radius: 100px;
}

table.klanten.colorBrown .vl {
   border-left: 1px solid var(--brown);
}

/* --- Green --- */
table.klanten.colorGreen thead th {
    background-color: var(--green);
}

table.klanten thead .fa-icon-farm:after, table.klanten tbody .fa-icon-farm:after {
    background:url(https://mijnadviesenkies.nl/images/green/Icoon-Agrarisch-Green.svg) no-repeat center center;
    border-radius: 100px;
}

table.klanten.colorGreen .vl {
   border-left: 1px solid var(--green);
}

/* --- machtiging tabel --- */
/* machtiging voor entiteit tabel */

.table thead tr th:nth-child(1){
    width: 200px;
}
.table tbody tr td:nth-child(4) .machtiging{
    width: 150px;
}

/* --- entiteit tabel --- */
/* Styling voor entiteit tabel */
table.klanten tbody td .vl p.prijzen{
    padding-top: 25px;
}
table.klanten tbody td .vl p.prijsStuk{
    margin-top: -10px;
}
table.klanten tbody td:nth-child(4) .vl p.prijzen{
    padding-left: 40px;
}
table.klanten tbody td:nth-child(4) .vl p.productAantal{
    padding-left: 50px;
}
table.klanten tbody td:nth-child(4){
    width: 170px;
}

table.klanten tbody td:nth-child(3){
    width: 150px !important;
}

table.klanten thead th:nth-child(3){
    padding-left: 25px !important;
    width: 125px !important;
}

table.klanten thead th.productAantal{
    padding-left: 40px !important;
}

table.klanten thead th:nth-child(5){
    padding-left: 25px !important;
}

.login-button{
    width: 240px;
    margin-left: 285px;
    margin-top: 10px;
}
.login-button p.text-white{
    margin-left: 10px;
    margin-top: -2px;
}

.klanten-overzicht{
    width: 155% !important;
    margin-left: -333px;
}

.circle-center{
    margin-left: 60px;
}

#korting_filter{
    margin-left: 10px;
}

#korting_form{
    margin-top: -380px;
    border-top: 1px solid #dee2e6;
    border-bottom: 1px solid #dee2e6;
    padding-bottom: 10px;
    padding-top: 10px;
}

.add-button{
    font-size: 15px;
    padding-top: 9px;
    background:#88bdf9;
}

.Update-button{
    width: 125px;
    font-size: 16px;
    padding-top: 9px;
    background:#88bdf9;
}

.Delete-button{
    width: 130px;
    font-size: 15px;
    padding-top: 9px;
    background:#88bdf9;
}

.Delete-button-link{
    color: black !important;
    text-decoration: none;
}

.Update-input{
    width: 100%;
    margin: 0 auto;
    border: 2px solid black !important;
    padding: 12px 22px;
    background-color: #ffffff;
    border-radius: 100px;
    margin-top: 5px;
    min-height: 50px;
}

.Update-input input{
    color: black;
    width: 100%;
    border:0px;
}
.Update-input #months, .Update-input #maandPrijs{
    width: 28%;
}
.Update-input #maandPrijs{
    float: left;
    margin-top: -20px;
    margin-left: 45%;
}

#nieuw_entiteit{
    z-index: 1051;
}
.Update-input p#maandentext{
    margin-top: -25px;
    margin-left: 35%;
}


.select-center{
    margin-left: 52px !important;
}

.select-order{
    margin-top: -650px;
    margin-bottom: 500px;
}

.select-order--large{
    margin-top: -775px !important;
    margin-bottom: 625px !important;
}
.select-order--Xlarge{
    margin-top: -900px !important;
    margin-bottom: 750px !important;
}

.custom-select{
    color: black;
    width: 100%;
    border: 2px solid black;
    margin: 0 auto;
    border-radius: 100px;
    margin-bottom: 15px;
}

.totaal{
    margin-top: 160px;
}

.admin-select{
    padding: 0;
    margin-left: 35px;
}
.admin-select h6{
    margin-left: 15px;
}
.Update-input h6{
    margin-left: 15px;
}

.korting-popup{
    height: 70% !important;
    min-width: 450px;
    overflow: none !important;
}

.pakket-popup{
    width: 50%;
    overflow-y: auto !important;
}

.pakket-popup .modal-content{
    padding-bottom: 170px;
}

.medewerker-popup{
    height: 97% !important;
    overflow: auto;
}

#medewerker_administrator{
    margin-left: 48px;
}

/* Select2 modal fix */
.select2-container:nth-child(2) {
    z-index: 1052;
}
.select2-container{
    z-index: 1052;
    /* top: 210px !important;
    left: 75px !important; */
}

/* .select2-selection__placeholder{
    margin-left: 75px;
} */

.step--3{
    margin-top: 0 !important;
    margin-left: 0 !important;
}

/* .select2-selection--single, .select2-results__options, .select2-search__field{
    margin-left: 75px !important;
} */

.select2-search__field{
    border: 1px solid black;
}

.select2-search--dropdown{
    border: none !important;
}

.select2-results__options{
    border: 2px solid black !important;
    padding: 12px 22px;
    background-color: #ffffff;
}

/* .searchKvK{
    display: none;
} */

.entiteitKvK{
    margin-left: 60px !important;
    z-index: 2000 !important;
}

.modal-dialog{
    margin-top: -22.5%;
    margin-left: -20%;
    max-width: 800px;
    width: 800px !important;
}

.modal-pakketToevoegen .modal-footer{
    display: block;
    margin-left: 52px;
}

#pakket_modal_footer{
    height: 150px;
    margin-top: 15px;
    margin-right: 50px;
}
#pakket_modal_footer button{
    margin-top: -70px;
}

/* #adres_gegevens .Update-input:nth-child(3) {
    margin-left: 100px;
}

#adres_gegevens .Update-input:nth-child(4), #adres_gegevens .Update-input:nth-child(5){
    margin-left: -65px !important;
} */

#machtiging_adres_gegevens .Update-input{
    width: auto;
}
#machtiging_adres_gegevens .Update-input:nth-child(1){
    width: 25%;
    margin-left: 0;
}
#nieuw_machtiging_entiteit .invoer input{
    border: none;
}

#korting_form .form-group .row .Update-input{
    margin-left: 65px;
}




/* --------------- Colors --------------- */
/*.blue-circle {
    background-color: var(--blue);
    position: relative;
    width: 43px;
    height: 43px;
    display: inline-block;
    border-radius: 100px;
    vertical-align: middle;
    margin-right: 10px;
}*/

.circle {
    position: relative;
    width: 43px;
    height: 43px;
    display: inline-block;
    border-radius: 100px;
    vertical-align: middle;
    margin-right: 10px;
}

.blue-circle {
    background-color: var(--blue);
}


.brown-circle {
    background-color: var(--brown);
}

.text-blue {
    color: var(--blue);
}

.text-brown {
    color: var(--brown);
}

.bg-blue {
    background-color: var(--blue);
}

.bg-brown {
    background-color: var(--brown);
}

/* Pakket instellingen */
.instellingenForm .Update-input{
    width: 28%;
    border: 1px solid black !important;
    padding: 12px 22px;
    background-color: #ffffff;
    border-radius: 100px;
    margin-top: 5px;
    min-height: 50px;
    margin-left: 110px;
}

.Update-input select{
    color: black;
    width: 100%;
    border:0px;
    background-color: #ffffff;
}


.alert-danger h5{
    margin-bottom: 10px;
}

.alert-danger ul li{
    list-style-type: disc !important;
}


/* Styling when files are being dragged over the dropzone */
.toUpload.dropzone.is-dragover {
    background-color: rgba(0,0,0,0.6) !important;
}


/* KVK */
#kvkItems{
    max-height: 100%;
    overflow-y: scroll;
    padding: 0px 15px;
}
.kvkItem{
    border: 1px solid black !important;
    padding: 12px 22px;
    background-color: #ffffff;
    border-radius: 100px;
    margin-top: 5px;
    min-height: 50px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
}
.kvkItem:hover{
    background-color: #f0f0f0;
}

.kvkItemName{
    margin-right: 0px;
}
.kvkItemKvk{
    margin-right: 0px;
}

.kvkItemNAV{
    margin-right: 0px;
}