/*
    Root en globale styling
*/

:root {
    /* Jeugd kleuren */

    --dark-blue: #1F8BF2;
    --blue: #119df2;
    --light-blue: #D7ECF1;

    /* Wmo kleuren */

    --dark-green: #41CC35;
    --green: #46db39;
    --light-green: #D8EEDA;

    /* Beschermd Wonen kleuren */

    --dark-purple: #7247BD;
    --purple: #8357cf;
    --light-purple: #E8E3F3;

    /* Algemene kleuren */

    --text-blue: #1d606c;
    --dark-gray: #555555;
    --light-gray: #f5f5f5;
    --gray: #D3D3D3;
    --white: #ffffff;
    --black-1: #000000;
    --black-2: #30363F;
    --black-3: #262A2F;
    --yellow: #FDC532;
    --red: #ff0000;
    --orange: #f08d01;
    --transparent: #00000000;
}

@font-face {
    font-family: poppins-regular;
    src: url(/accounts/beschikbaarheidswijzer/dropbox/387m6.ttf);
}

@font-face {
    font-family: 'poppins-semibold';
    src: url(/accounts/beschikbaarheidswijzer/dropbox/2g2lf.ttf);
}

@font-face {
    font-family: 'poppins-bold';
    src: url(/accounts/beschikbaarheidswijzer/dropbox/1dd8m.ttf);
}

::-webkit-scrollbar {
    background: var(--gray);
    width: 6px;
}

::-webkit-scrollbar-thumb {
    background: var(--text-blue);
    border-radius: 10px;
}

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

body {
    margin: 0px;
    background: var(--white);
    overflow-x: hidden;
    min-width: 320px;
}

br, img {
    user-select: none;
}

strong, h3 {
    font-family: 'poppins-semibold';
}

strong, b {
    font-weight: normal;
}

.bsw a {
    text-decoration: none;
    color: var(--dark-blue);
}

.wmo a {
    text-decoration: none;
    color: var(--dark-green);
}

.won a {
    text-decoration: none;
    color: var(--dark-purple);
}

input {
    padding: 10px;
    font-size: 13pt;
}

td {
    font-family: poppins-regular;
    color: var(--text-blue);
    font-size: 9pt;
}

.hide, .hidden, .mobile-only {
    display: none;
}

.vanish {
    display: none !important;
}

.rotate {
   transform: rotate(90deg);
}

.close {
    float: right;
    font-family: 'poppins-bold';
    cursor: pointer;
    color: var(--black-2) !important;
    font-size: 9pt !important;
    margin: 10px;
}

.close:hover {
    color: #555;
}

.close:before {
    content: '';
    background-image: url(https://app.beschikbaarheidswijzer.nl/accounts/bsw3/links/1699859148.png);
    background-size: contain;
    background-repeat: no-repeat;
    display: inline-block;
    width: 10px;
    height: 10px;
    margin-right: 5px;
}

.disabled-cell {
    color: #aaa;
    pointer-events: none;
}

img#closeuitleg:hover {
    filter: invert(38%) sepia(60%) saturate(1762%) hue-rotate(190deg) brightness(101%) contrast(90%);
}

.wmo img#closeuitleg:hover {
    filter: invert(73%) sepia(22%) saturate(7342%) hue-rotate(69deg) brightness(105%) contrast(75%);
}

.won img#closeuitleg:hover {
    filter: invert(14%) sepia(61%) saturate(6662%) hue-rotate(294deg) brightness(75%) contrast(118%);
}

#loadpage {
    position: relative;
}

.alternate-background {
    background: var(--light-gray);
}

.modal_loading {
    position: absolute !important;
}

/*
    Account types styling
*/

#verwijzers,
#regiobeheer,
#aanbieders {
    display: none;
}

/*
    Regio specifieke styling
*/

.wmo.zou select#gemeentenOpties option[value^='HO'] {
    display: none;
}

.wmo.dre td.gemeentetd {
    display: none;
}

.twe .visible-option {
    display: none;
}

.bar .table_resultaat {
    font-size: 12pt;
}

/* 
    Popup styling
*/

.popup-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 9999;
}

.popup-content {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 300px;
    font-family: 'poppins-regular';
    padding: 20px;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    color: var(--dark-blue);
}

.wmo .popup-content {
    color: var(--dark-green);
}

.won .popup-content {
    color: var(--dark-purple);
}

#closePopup:after {
    content: '\f067';
    font-family: 'Font Awesome 5 Free';
    font-weight: bold;
    position: absolute;
    right: 8px;
    top: 5px;
    font-size: 13pt;
    transform: rotate(45deg);
}

.popup-content h2, .popup-content p {
    margin: 0px;
}

.popup-content h2 {
    font-size: 14pt;
}

 .popup-content p {
    font-size: 11pt;
}

.popup-bg {
    position: fixed;
    width: 100%;
    height: 100vh;
    top: 0px;
    left: 0px;
    z-index: 998;
    cursor: pointer;
    background: black;
    opacity: 0.4;
}

.popup-box {
    position: fixed;
    width: 300px;
    height: auto;
    text-align: center;
    top: 50%;
    left: 50%;
    background-color: white;
    border-radius: 3px;
    transform: translate(-50%,-50%);
    z-index: 999;
    font-family: poppins-regular;
    padding: 0px 20px 20px;
    
}

.popup-title {
    font-size: 15pt;
    margin-bottom: 10px;
    color: #1f8bf2;
}

.popup-text {
    font-size: 11pt;
}

.popup-close {
    cursor: pointer;
    width: 16px;
    height: 16px;
    display: block;
    position: absolute;
    top: 6px;
    right: 6px;
}

.popup-close:after {
    content: '+';
    font-size: 18pt;
    display: block;
    width: 100%;
    height: 100%;
    top: -6px;
    right: -6px;
    position: absolute;
    transform: rotate(45deg);
    font-weight: 400;
}

/* 
    Tool styling
*/


#tool, #mobile-filter {
    position: fixed;
    right: 0;
    top: 50%;
    transform: translate(0px, -50%);
    display: flex;
    flex-direction: column-reverse;
    background: var(--light-blue);
    padding: 0.4em;
    z-index: 9;
    border-radius: 4px 0 0 4px;
}

#mobile-filter {
    display: none;
    right: calc(100% - 45px);
    border-radius: 0 4px 4px 0;
}

.wmo #tool, .wmo #mobile-filter {
    background: var(--light-green);
}

.won #tool, .won #mobile-filter {
    background: var(--light-purple);
}

#tool button, #mobile-filter button {
    background: var(--white);
    color: var(--text-blue);
    border: none;
    width: 34px;
    margin-top: 6.6px;
    padding: 10px;
    font-size: 10pt;
    border-radius: 5px;
}

#mobile-filter button {
    font-family: 'poppins-bold';
    line-height: 1;
    font-size: 0pt;
}

#mobile-filter button::first-letter {
    font-size: 9pt;
}

#tool button:last-child, #mobile-filter button:last-child {
    margin-top: 0px;
}

/* 
    Header styling
*/

#header {
    background: var(--light-blue);
    padding: 6px 40px;
}

.wmo #header {
    background: var(--light-green);
}

.won #header {
    background: var(--light-purple);
}

.login-name {
    background: var(--white);
    width: 170px;
    height: 38px;
    border-radius: 3px;
    display: flex;
    margin-left: 5px;
    padding-right: 5px;
    position: relative;
    align-items: center;
    cursor: pointer;
    user-select: none;
}

.login-menu {
    position: absolute;
    top: 110%;
    left: 0;
    z-index: 9;
    background: var(--white);
    width: 100%;
    display: none;
    flex-direction: column;
    border-radius: 3px;
}

.login-name a {
    background: var(--light-blue);
    text-align: center;
    margin: 2px 5px;
    padding: 6px 5px;
    user-select: none;
    transition: 0.3s;
}

.wmo .login-name a {
    background: var(--light-green);
}

.won .login-name a {
    background: var(--light-purple);
}

.login-name a:first-child {
    margin-top: 5px;
}

.login-name a:last-child {
    margin-bottom: 5px;
}

.login-name a:hover {
    opacity: 0.7;
}

#account-icon {
    background: var(--light-blue);
    color: var(--blue);
    font-size: 16pt;
    padding: 6px 8px;
    margin-left: 4px;
    margin-right: 4px;
}

.wmo #account-icon {
    background: var(--light-green);
    color: var(--dark-green);
}

.won #account-icon {
    background: var(--light-purple);
    color: var(--dark-purple);
}

.account-name {
    overflow: hidden;
    text-align: left;
    align-content: center;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.bswlogo {
    display: flex;
    align-items: center;
    width: 465px;
}

.bswlogo img {
    width: 45px;
}

.bswregio {
    font-size: 12pt !important;
    font-family: 'poppins-regular';
}

.bsw .bswregio {
    color: var(--dark-blue);
}

.wmo .bswregio {
    color: var(--dark-green);
}

.won .bswregio {
    color: var(--dark-purple);
}

#header td.bsw {
    width: auto;
    margin-left: 10px;
    font-size: 13pt !important;
    line-height: 20px;
    font-family: 'poppins-bold';
}

.header-last {
    display: flex;
    align-items: center;
}

#favorietenButton {
    position: relative;
    font-size: 0 !important;
    display: flex;
    align-items: center;
    margin-left: 10px;
}

#favorietenButton:after {
    content: '';
    background-image: url(/accounts/bsw3/links/1701734790.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: bottom;
    display: block;
    width: 22px;
    height: 22px;
    filter: invert(27%) sepia(75%) saturate(424%) hue-rotate(141deg) brightness(98%) contrast(90%);
}

.inverted:after {
    filter: brightness(0) invert(1) !important;
}

/* 
    Footer styling
*/

.footer-inner {
    background: var(--black-2);
    padding-top: 5em;
    margin-top: 4em;
    position: relative;
}

.footer-inner img {
    position: absolute;
    width: 70px;
    top: 0px;
    left: 50%;
    transform: translate(-50%, -50%);
}

.footer-titel {
    font-size: 12pt;
    font-family: 'poppins-bold'
}

.footer-links {
    font-size: 10pt;
    line-height: 34px;
}

.footer-links a {
    color: var(--white);
}

.footer-links span {
    color: var(--white);
    cursor: pointer;
}

.footer-links a:hover,
.footer-links span:hover {
    font-family: 'poppins-bold';
}

#copyright {
    background: var(--black-3);
    display: grid;
    padding: 8px;
}

.footer-inner td,
#copyright td {
    color: var(--white);
}

.copyright a {
    color: var(--white);
}

.copyright a:hover {
    text-decoration: underline;
}

#mobile-footer {
    display: none;
    position: fixed;
    bottom: 0;
    width: 100%;
    min-width: 320px;
    background: var(--white);
    z-index: 99;
    border-radius: 10px 10px 0 0;
    box-shadow: #363636 0px 0px 10px -3px;
}

#mobile-footer button {
    width: 25%;
    min-height: 40px;
    font-size: 18pt !important;
}

#mobile-footer button.active-footer-btn {
    background: var(--light-blue);
}

.wmo #mobile-footer button.active-footer-btn {
    background: var(--light-green);
}

.won #mobile-footer button.active-footer-btn {
    background: var(--light-purple);
}

#mobile-footer button:last-child {
    border-right: 0px solid;
}

#mobile-footer #pk-btn img {
    width: 26px;
}

#pk-btn-close {
    position: absolute;
    right: 24px;
    top: 20px;
    transform: rotate(45deg);
    z-index: 1;
    font-size: 20pt;
    color: var(--text-blue);
    display: none;
}

.pk-btn-show {
    position: fixed;
    bottom: 80px;
    left: 50%;
    transform: translate(-50%, 0);
    z-index: 99;
    padding: 5px 10px;
    border-radius: 3px;
    color: var(--white);
    display: none;
}

.bsw .pk-btn-show {
    background: var(--dark-blue);
}

.wmo .pk-btn-show {
    background: var(--dark-green);
}

.won .pk-btn-show {
    background: var(--dark-purple);
}

.regiofooter {
    font-size: 10pt;
    font-family: 'poppins-regular';
    text-align: center;
    padding: 7.5px 5px;
    background-color: var(--dark-blue);
    color: var(--white);
    width: 100%;
}

.wmo .regiofooter {
    background-color: var(--dark-green);
}

.won .regiofooter {
    background-color: var(--dark-purple);
}

/* 
    Iframe chatbot styling
*/

.iframe-chatbot {
    width: 420px;
    box-shadow: none !important;
    border: none;
}

/* 
    Filter styling
*/

.sorteertd, .sorteertw, .gemeentetd {
    vertical-align: middle;
    user-select: none;
    display: inline-block;
    margin-right: 5px;
    order: 1;
}

.gemeentetd.def-show {
    display: inline-block !important;
}

.downloadpdftd {
    display: flex;
    order: 2;
    align-items: center;
    margin-top: 16px;
    margin-left: auto;
}

.mapimagetd, .setuserloctd, .mapimagetd {
    display: flex;
    order: 3;
    align-items: center;
    margin-left: 5px;
    margin-top: 16px;
}

table.optiestable tr {
    display: inline-flex;
    flex-wrap: wrap;
    width: 100%;
}

.setuserloctd a, .downloadpdftd a, #DownloadPDF button {
    color: var(--text-blue);
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
}

.downloadpdftd img, 
.setuserloctd img {
    margin-right: 5px;
    width: 14px;
    height: auto;
}

#DownloadPDF {
    position: relative;
}

#DownloadPDF button, .unactive-btn {
    filter: blur(0.8px);
    opacity: 0.5;
    pointer-events: none;
}

#DownloadPDF button br {
    display: none;
}

#DownloadPDF a {
    display: flex;
    align-items: center;
    flex-direction: row-reverse;
    width: fit-content;
}

/* 
    Tooltips styling
*/

.tooltip-kaart {
    position: absolute;
    background-color: var(--text-blue);
    color: var(--white);
    border-radius: 5px;
    padding: 5px;
    text-align: left;
    display: none;
}

.tooltip-regio {
    font-size: 12px;
}

.tooltip-gemeente {
    font-size: 10px;
}

.checkdisplay {
    display: none;
    width: auto;
    background-color: #555;
    color: #fff;
    border-radius: 3px;
    padding: 5px 10px;
    font-size: 10pt;
    z-index: 1000;
    position: absolute;
    font-family: 'poppins-regular';
}

.zoeken-tooltip-text, 
.clear-tooltip-text, 
.favorieten-tooltip-text,
.downloadpdf-tooltip-text,
.pdfcheckbox-tooltip-text,
.sublocaties-tooltip-text {
    visibility: hidden;
    width: auto;
    background-color: #555;
    color: #fff;
    border-radius: 3px;
    padding: 5px 10px;
    position: absolute;
    z-index: 9;
    bottom: 145%;
    right: -98%;
    opacity: 0;
    transition: opacity 0.3s;
    font-size: 10pt;
    width: max-content;
}

.zoeken-tooltip-text:after, 
.clear-tooltip-text:after, 
.favorieten-tooltip-text:after,
.downloadpdf-tooltip-text:after,
.sublocaties-tooltip-text:after {
    content: "";
    position: absolute;
    top: 98%;
    left: 50%;
    margin-left: -5px;
    border-width: 8px;
    border-style: solid;
    border-color: #555 transparent transparent transparent;
}

.pdfcheckbox-tooltip-text:after {
    content: "";
    position: absolute;
    top: 25%;
    right: -10%;
    border-width: 8px;
    border-style: solid;
    border-color: transparent transparent transparent #555;
}

.favorieten-tooltip-text {
    bottom: 79%;
    right: -192%;
}

.downloadpdf-tooltip-text {
    bottom: 65%;
    right: 50%;
    transform: translate(50%, -50%);
}

.pdfcheckbox-tooltip-text {
    bottom: -20%;
    right: 180%;
    z-index: 10;
    height: min-content;
}

.sublocaties-tooltip-text {
    bottom: 120%;
    right: 53%;
    transform: translate(50%, 0);
}

.tooltip-content {
    position: absolute;
    bottom: 84%;
    background: #555;
    color: #fff;
    width: auto;
    border-radius: 6px;
    padding: 5px 10px;
    margin-left: -9px;
    font-size: 10pt;
    z-index: 10;
    transition: opacity 0.3s;
    visibility: hidden;
    opacity: 0;
}

.tooltip-content:after {
    content: "";
    position: absolute;
    top: 98%;
    left: 10px;
    margin-left: -5px;
    border-width: 8px;
    border-style: solid;
    border-color: #555 transparent transparent transparent;
}

#zoek-button:hover .zoeken-tooltip-text,
#clear-button:hover .clear-tooltip-text,
#favorietenButton:hover .favorieten-tooltip-text,
#DownloadPDF:hover .downloadpdf-tooltip-text,
.zpdf-checkbox:hover .pdfcheckbox-tooltip-text,
.rsubloc:hover .sublocaties-tooltip-text {
    visibility: visible;
    opacity: 1;
}

/* 
    Jeugdgids
*/

.subtitel_gids {
   color: var(--text-blue);
   font-size: 14pt;
}

a.deskwmogidsbtn {
   color: #41CC35;
}

.productenboek .desksearchstring {
    display: none;
}

.productenboek br {
    display: none;
}

.boek-instelling form {
    margin-bottom: 0px;
}

form#checkradiozoeken {
    margin-bottom: 0px;
}

#desktopresults {
    background-color: var(--light-blue);
    padding: 20px;
    border-radius: 3px;
}

.productenboek {
    background: white;
    border-radius: 5px;
}

.boek-instelling {
    padding-left: 10px;
    color: #1d606c;
    font-size: 11pt;
}

.website a {
    color: #1D606c;
}

.website a:hover {
    color: #3c98d2;
    text-decoration: underline;
}

a.deskjeugdgidsbtn {
    color: #3C98D2;
}

/* FILTER STYLING */

.kopjes {
    padding: 6px 0px;
    font-family: gthmbook;
    font-size: 14pt;
    color: #1d606c;
}

select#hoofdcat, select#subcat, select#gemeente, select#kenmerken {
    width: 100%;
    font-size: 12pt;
    font-family: gthmbook;
    color: #1d606c;
    border: 1px solid #1d606c;
    height: 30px;
    border-radius: 3px;
}

select option[disabled] {
    display: none;
}

/* 
    Kaart knop styling
*/

table.kaart-jeugd,
table.kaart-wmo,
table.kaart-won,
table.kaart-lta {
    display: none;
}

.kaart-jeugd-btn, .kaart-wmo-btn, .kaart-won-btn, .kaart-lta-btn {
    border: 2px solid;
    border-radius: 3px;
    padding: 5px 2px;
    margin: 0px 2px;
    color: var(--white);
}

.kaart-wmo-btn {
    background: var(--dark-green);
    border-color: var(--dark-green) !important;
}

.kaart-jeugd-btn, .kaart-lta-btn {
    background: var(--dark-blue);
    border-color: var(--dark-blue) !important;
}

.kaart-won-btn {
    background: var(--dark-purple);
    border-color: var(--dark-purple) !important;
}

.kaart-wmo-btn:hover, .kaart-jeugd-btn:hover, .kaart-won-btn:hover, .kaart-lta-btn:hover {
    opacity: 0.7;
}

#showMap {
    position: relative;
    overflow: hidden;
}

.map-legenda {
    width: auto;
    height: 100vh;
    background: rgb(255 255 255 / 85%);
    position: absolute;
    top: 0;
    left: 0;
    margin: 8px;
    padding: 7px;
    padding-right: 20px;
    font-family: 'poppins-regular';
    font-size: 9pt;
}

.map-legenda.closed {
    width: 75px;
    height: 19px;
    padding: 0px;
    padding-left: 5px;
}

.map-legenda.closed .map-legenda-info,
.map-legenda.closed .map-legenda-title {
    display: none;
}

.map-legenda-title {
    border-top: 2px solid;
    margin-top: 5px;
}

.map-legenda-close {
    font-family: 'poppins-bold';
}

.map-legenda-close:after {
    content: '\f067';
    font-family: 'Font Awesome 5 Free';
    font-weight: bold;
    position: absolute;
    right: 5px;
    top: 2px;
    font-size: 11pt;
    transform: rotate(45deg);
    cursor: pointer;
}

.map-legenda.closed .map-legenda-close:after {
    content: '\f077';
    transform: rotate(180deg);
    top: 1px;
}

.map-legenda img {
    margin-top: -5px;
    margin-right: 8px;
    width: 22px;
}

.map-legenda div {
    display: flex;
    align-items: center;
}

#toggleMap {
    min-width: 102px;
    cursor: pointer;
    display: flex;
}

#toggleMap:before {
    content: '';
    background-image: url(https://beschikbaarheidswijzer.webapp.to/accounts/bsw3/links/1724766805.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    width: 14px;
    height: auto;
    display: block;
    margin-right: 5px;
}

#toggleMap:after {
    content: 'Toon op kaart';
    width: 100%;
}

#toggleMap.open:after {
    content: 'Kaart sluiten';
}

#mapImage {
    display: none;
}

#show-map iframe {
    height: 540px;
}

.regios {
    margin-top: 10px;
}

.regios td {
    padding: 5px 3px;
    font-family: 'poppins-semibold';
}

/*
    Resultatenbalk header styling
*/

.table_produkten,
.table_kenmerken {
    display: none;
}

.table_resultaat {
    background-color: var(--light-blue);
    color: var(--black-2);
    font-family: 'poppins-bold';
    letter-spacing: 0.5px;
    padding: 8px;
    text-align: center;
    font-size: 14pt;
    display: flex;
    width: auto !important;
    justify-content: center;
    padding-bottom: 2em;
    padding-top: 3em;
    height: 29px;
    padding-right: 0;
}

.wmo .table_resultaat,
.wmo .table_produkten,
.wmo .table_kenmerken {
    background-color: var(--light-green) !important;
}

.won .table_resultaat,
.won .table_produkten,
.won .table_kenmerken {
    background-color: var(--light-purple) !important;
}

.table_kenmerken:last-child {
    display: none;
}

/* 
    Start informatie tekst styling
*/

.start-info {
    color: var(--blue);
    font-size: 10pt;
    text-decoration: underline;
    font-family: 'poppins-bold';
    display: block;
    margin-bottom: 2em;
}

.wmo .start-info {
    color: var(--dark-green);
}

.won .start-info {
    color: var(--dark-purple);
}

.start-title {
    color: var(--blue);
    font-size: 18pt;
    font-family: 'poppins-bold';
    line-height: 34px;
    margin-bottom: 1em;
}

.wmo .start-title {
    color: var(--dark-green);
}

.won .start-title {
    color: var(--dark-purple);
}

.start-text {
    font-size: 11pt;
}

.start-btn {
    font-size: 11pt;
    text-decoration: underline;
    transition: 0.2s;
    margin-top: 1.5em;
}

.start-terug-btn {
    font-size: 11pt;
    background: var(--dark-blue);
    color: var(--white);
    padding: 5px 10px;
    border-radius: 3px;
    transition: 0.2s;
    margin-top: 1.5em;
}

.wmo .start-terug-btn {
    background: var(--dark-green);
}

.start-btn:hover, .start-terug-btn:hover {
    opacity: 0.7;
}

.start-vakken {
    background: var(--light-gray);
    color: var(--dark-gray);
    height: 100px;
    padding-left: 25px;
    border-radius: 10px;
    cursor: pointer;
    transition: 0.3s;
    overflow: hidden;
    max-width: 350px;
    position: relative;
}

.start-vakken:hover {
    background: var(--gray);
}

.start-vakken-title {
    color: var(--dark-gray);
    font-size: 12pt;
    font-family: 'poppins-bold';
    padding-right: 10px;
    line-height: 18px;
}

.start-vakken-text {
    color: var(--dark-gray);
    font-size: 9pt;
    padding-right: 10px;
}

.start-vakken-btn,
.start-vakken-btn-bsw,
.start-vakken-btn-wmo,
.start-vakken-btn-won {
    background: var(--blue);
    clip-path: ellipse(80% 50% at 100% 100%);
    border-radius: 0px 10px 10px 0px;
    width: 18% !important;
    vertical-align: bottom;
    text-align: right !important;
    padding-right: 15px;
    user-select: none;
}

.bsw .start-vakken-btn,
.start-vakken-btn-bsw {
    background: var(--blue);
}

.wmo .start-vakken-btn,
.start-vakken-btn-wmo {
    background: var(--green);
}

.won .start-vakken-btn,
.start-vakken-btn-won {
    background: var(--purple);
}

.bsw .start-vakken:hover .start-vakken-btn, 
.start-vakken:hover .start-vakken-btn-bsw {
    background: var(--dark-blue);
}

.wmo .start-vakken:hover .start-vakken-btn, 
.start-vakken:hover .start-vakken-btn-wmo{
    background: var(--dark-green);
}

.won .start-vakken:hover .start-vakken-btn,
.start-vakken:hover .start-vakken-btn-won {
    background: var(--dark-purple);
}

.start-vakken-btn .fa,
.start-vakken-btn-bsw .fa,
.start-vakken-btn-wmo .fa,
.start-vakken-btn-won .fa {
    padding-top: 10px;
    padding-right: 7px;
    color: var(--white);
}

.start-link, .start-link a {
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    font-size: 0 !important;
}

.mobile-only td.start-vakken-btn:before {
    content: '';
    background-image: url(/accounts/bsw3/links/1731059921.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    display: inline-block;
    width: 27px;
    height: 27px;
    filter: invert(1);
    position: absolute;
    bottom: 5px;
    right: 1%;
}

span#btn-lokale-teams {
    text-decoration: underline;
    cursor: pointer;
}

.introductie-titel {
    color: var(--blue);
}

.wmo .introductie-titel {
    color: var(--dark-green);
}

.won .introductie-titel {
    color: var(--dark-purple);
}

.frl_container {
    background: var(--light-gray);
    color: var(--dark-gray);
    height: 50px;
    border-radius: 10px;
    cursor: pointer;
    transition: 0.3s;
    overflow: hidden;
    max-width: 100px;
    text-align: center;
}

.frl_btn {
    color: var(--dark-gray);
    font-family: 'poppins-bold';
    letter-spacing: 0.5px;
    font-size: 12px;
    width: 100%;
    height: 100%:
}

.frl_container:hover {
    background: var(--green);
}

#frl_arrow {
    transition: transform 0.5s;
}

.frl_box {
    display: none;
}

/* 
    Resultatenbalk menu items styling 
*/

#preselected-cat, #preselected-kenmerken {
    border: 5px solid var(--white);
    background: var(--white);
    border-radius: 5px;
    position: relative;
    z-index: 1;
    min-width: 200px;
}

#preselected-cat:before, #preselected-kenmerken:before {
    content: 'Section';
    display: block;
    width: 92%;
    margin: 10px auto;
    padding-bottom: 10px;
    font-size: 12pt;
    font-family: 'poppins-bold';
    color: var(--black);
    border-bottom: 1px solid var(--gray);
}

#preselected-cat:before {
    content: 'Producten';
}

#preselected-kenmerken:before {
    content: 'Kenmerken';
}

.cat-dropdown-content input.checkboxkp, .cat-dropdown-btn input.checkboxkp {
    pointer-events: none;
}

.cat-dropdown-content:has(input[value="Jeugdhulp Rijnmond"]){
    display: none;
}

.hoofdcategorie {
    position: relative;
}

.hoofdcategorie .tablekpcat {
    height: 0px;
    padding-top: 0px;
    padding-bottom: 0px;
    padding-right: 28px;
    background: var(--transparent);
    color: var(--black-1);
    font-family: 'poppins-semibold';
}

.hoofdcategorie .tablekpcat:before {
    content: '\f077';
    display: block;
    font-family: 'Font Awesome 5 Free';
    font-weight: 700;
    font-size: 14px;
    color: var(--text-blue);
    position: absolute;
    right: 3px;
    top: 35%;
    transition: 0.5s;
    transform: rotate(0deg);
    pointer-events: none;
    z-index: 1;
}

.hoofdcategorie .clicked.tablekpcat:before {
    transform: rotate(180deg);
    top: 31%;
}

.toggle-categories {
    margin-top: 5px;
}

.toggle-categories .tablekpcat {
    display: none;
}

.bsw .toggle-categories {
    background-color: var(--light-blue);
    padding-left: 10px;
    margin-top: 0px;
}

.wmo .toggle-categories {
    background-color: var(--light-green);
    padding-left: 10px;
    margin-top: 0px;
}

.won .toggle-categories {
    background-color: var(--light-purple);
    padding-left: 10px;
    margin-top: 0px;
}

.toggle-categories:last-child {
    margin-bottom: 3px;
}

#plus .tablekp {
    position: relative;
    padding-right: 20px;
}

#plus .tablekp:after {
    content: '\f067';
    font-family: 'Font Awesome 5 Free';
    font-weight: bold;
    position: absolute;
    right: 8px;
    top: 7px;
    font-size: 10pt;
    transition: 1s;
}

#rows-results > span {
    display: none;
}

input[type="checkbox"] {
    appearance: none;
    border: 1px solid var(--black-1);
    border-radius: 3px;
    width: 15px;
    height: 15px;
    padding: 0px;
    position: relative;
    cursor: pointer;
}

input[type="checkbox"]:checked, 
input[type="checkbox"]:disabled {
    border: none;
    border-radius: 3px;
    clip-path: border-box;
}

.btn-box:has(.tablekpc input[type="checkbox"]:checked) .tablekp:after {
    transform: rotateZ(225deg);
}

input[type="checkbox"]:checked::before {
    content: '\2714';
    font-size: 13px;
    color: var(--black-1);
    margin-right: 5px;
    width: 100%;
    height: 100%;
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
}

.bsw input[type="checkbox"]:checked::before {
    color: var(--white);
    background: var(--dark-blue);
}

.wmo input[type="checkbox"]:checked::before {
    color: var(--white);
    background: var(--dark-green);
}

.won input[type="checkbox"]:checked::before {
    color: var(--white);
    background: var(--dark-purple);
}

input[type="checkbox"]:disabled::before {
    content: '\2716';
    font-size: 13px;
    color: var(--white);
    background: var(--gray);
    margin-right: 5px;
    width: 100%;
    height: 100%;
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    border: none;
}

.kenmerk-tag-parent {
    display: flex;
    margin-bottom: 10px;
    flex-wrap: wrap;
    font-size: 9pt;
    font-family: 'poppins-regular';
    margin: 10px 5px 0px 5px;
}

.kenmerk-tag {
    background: var(--light-blue);
    color: var(--text-blue);
    border-radius: 3px;
    padding: 5px;
    width: fit-content;
    margin-right: 10px;
    margin-bottom: 5px;
}

.wmo .kenmerk-tag {
    background: var(--light-green);
}

.won .kenmerk-tag {
    background: var(--light-purple);
}

.kenmerk-tag-icon {
    content: '\f067';
    display: inline-block;
    transform: rotate(45deg);
    color: var(--text-blue);
    font-family: 'Font Awesome 5 Free';
    font-weight: bold;
    font-style: normal;
    margin-left: 4px;
    margin-right: 6px;
    cursor: pointer;
}

.remove-all-tags {
    order: 1;
    align-self: center;
    font-family: 'poppins-bold';
    text-decoration-line: underline;
    cursor: pointer;
    margin-bottom: 5px;
    margin-left: auto;
    color: var(--text-blue);
}

.remove-all-tags .kenmerk-tag-icon {
    color: var(--text-blue);
    margin-left: 0px;
}

/* 
    Kenmerken styling 
*/

.kenmerken-titles {
    color: var(--black-1);
    padding-left: 10px;
    padding-top: 10px;
    font-family: 'poppins-semibold'
}

.kenmerken-lijst {
    display: inline-block;
    width: 100%;
    min-width: 200px;
    cursor: pointer;
    position: relative;
    user-select: none;
}

.kenmerken-lijst:before {
    content: '\f077';
    display: block;
    font-family: 'Font Awesome 5 Free';
    font-weight: bold;
    font-size: 14px;
    color: var(--text-blue);
    position: absolute;
    right: 3px;
    top: 35%;
    transition: 0.5s;
    transform: rotate(180deg);
    pointer-events: none;
    z-index: 1;
}

.clicked.kenmerken-lijst:before {
    transform: rotate(0deg);
    top: 31%;
}

/*
    Zorginstellingen result styling
*/

.hide-favorieten .zfav,
.hide-melden .zalert,
.hide-notificatie .znot,
.hide-feedback .zfeedback {
    display: none;
}

#search-results {
    overflow-x: hidden;
    max-height: 250vh;
    padding: 0px 10px;
}

.result-container {
    margin-left: 5px;
}

.result-table {
    border-radius: 3px;
    background: var(--light-gray);
    position: relative;
}

.empty-table,
.empty-table td {
    background: none;
}

#next {
    height: auto;
}

.znaam {
    font-family: 'poppins-bold';
    font-size: 12pt !important;
    color: var(--dark-blue) !important;
}

.wmo .znaam {
    color: var(--dark-green) !important;
}

.won .znaam {
    color: var(--dark-purple) !important;
}

.zcontact a {
    display: inline-block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: auto;
    max-width: 100%;
}

.zcontact a:hover {
    overflow: visible;
    text-overflow: unset;
    position: absolute;
    width: max-content;
    background: #f5f5f5;
}

[id^="profielLink"] b, a.toonsub, .teamsbtn {
    background: var(--dark-blue);
    color: var(--white);
    font-weight: normal;
    border-radius: 5px;
    padding: 8px 15px;
    transition: 0.2s;
    display: inline-block;
    border: 2px solid var(--dark-blue);
}

.wmo [id^="profielLink"] b, .wmo a.toonsub, .wmo .teamsbtn {
    background: var(--dark-green);
    border: 2px solid var(--dark-green);
}

.won [id^="profielLink"] b, .won a.toonsub, .won .teamsbtn {
    background: var(--dark-purple);
    border: 2px solid var(--dark-purple);
}

[id^="profielLink"] b:hover, a.toonsub:hover, .teamsbtn:hover {
    opacity: 0.7;
}

a.toonsub {
    margin-top: 5px;
}

[id^="profielLink"] br {
    display: none;
}

.result-table tbody {
    display: flex;
}

.zcollumleft {
    width: 190px;
    min-width: 170px;
}

.zcollumright {
    width: -webkit-fill-available;
}

#zorglogo {
    height: 170px;
    width: 200px;
}

#zorglogo h3 {
    margin: 0;
    font-size: 0 !important;
    user-select: none;
}

#zorglogo h3:first-letter {
    font-size: 30pt;
}

#zorglogo img {
    width: 100%;
    object-fit: contain;
}

.zicons {
    padding: 3px 0px;
}

.zicons img {
    height: 16px;
    margin-left: auto;
    margin-right: auto;
    display: block;
}

.zicons br {
    display: none;
}

.zomschrijving {
    width: auto !important;
    text-align: left;
    margin-top: 10px;
    -webkit-line-clamp: 10;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tdleft {
    width: 240px;
    min-width: 240px;
    max-width: 240px;
    padding-right: 0px;
    padding-left: 0px;
}

.tdright {
    width: 100%;
    padding: 10px 0px;
}

.tdright br,
.swachttijd {
    display: none;
}

.swachttijd {
    padding-bottom: 5px;
}

.swachttijd b {
    font-family: 'poppins-bold';
}

.swachttijd i {
    color: var(--dark-blue);
}

.wmo .swachttijd i {
    color: var(--dark-green);
}

.won .swachttijd i {
    color: var(--dark-purple);
}

.swachttijd i:before {
    content: '- ';
    color: var(--text-blue);
}

.swachttijd div[class^='catgem'],
.swachttijd div[class^='tarief'] {
    font-size: 8pt !important;
    font-style: italic;
}

.stv .swachttijd div[class^='tarief'] {
    color: var(--orange);
    display: none;
}

.wachttijden-bijgewerkt {
    background: var(--light-blue);
    color: var(--dark-blue) !important;
    display: block;
    text-align: left;
    padding: 10px;
    font-size: 10pt !important;
    font-family: 'poppins-bold';
}

.wmo .wachttijden-bijgewerkt {
    background: var(--light-green);
    color: var(--dark-green) !important;
}

.won .wachttijden-bijgewerkt {
    background: var(--light-purple);
    color: var(--dark-purple) !important;
}

.gezochtop {
    background: var(--light-blue);
    display: block;
    text-align: left;
    padding: 0px 10px;
}

.wmo .gezochtop {
    background: var(--light-green);
}

.won .gezochtop {
    background: var(--light-purple);
}

.toevoegenpdf {
    padding: 0px;
    display: block;
}

.toevoegenpdf br {
    display: none;
}

.toevoegenpdf tr {
    display: flex;
    align-items: center;
}

.zpdf {
    display: none;
}

.zpdf-checkbox {
    position: absolute;
    top: 4px;
    right: 3px;
}

.zpdf-checkbox input {
    position: relative;
    margin: 0px;
}

.active {
    display: block !important;
}

table.result-table.wijkteam {
    background: var(--orange);
}

table.result-table.wijkteam a {
    color: var(--white);
    text-decoration: underline;
}

table.result-table.wijkteam .rsubloc a {
    display: none;
}

table.result-table.wijkteam .wachttijden-bijgewerkt,
table.result-table.wijkteam .zicons,
table.result-table.wijkteam .zcontact,
table.result-table.wijkteam .tdleft br,
table.result-table.wijkteam .gezochtop {
    display: none;
}

table.result-table.wijkteam .znaam,
table.result-table.wijkteam .zomschrijving {
    color: var(--white) !important;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

table.result-table.wijkteam [id^="profielLink"] b {
    background: var(--black-1);
    border-color: var(--black-1);
    color: var(--white);
    position: absolute;
    bottom: 20px;
    left: 180px;
}

table.result-table.wijkteam .zcontact a:hover {
    background: var(--orange);
}

table.result-table.wijkteam .zcollumright {
    display: flex;
    flex-direction: column;
}

table.result-table.wijkteam .tdleft {
    width: 100%;
    max-width: none;
    padding-bottom: 0;
    font-size: 0 !important;
}

table.result-table.wijkteam .tdright {
    padding-top: 0;
}

.kra table.result-table.wijkteam {
    background: linear-gradient(90deg, #8ed8c7 0%, #a9e0c2 100%);
    color: #fff !important;
}

.kra table.result-table.wijkteam .zomschrijving a {
    width: 24%;
    background: black;
    color: #fff;
    padding: 5px 5px;
    box-sizing: border-box;
    border-radius: 5px;
    text-align: center;
    text-decoration: none;
    align-content: center;
}

.kra table.result-table.wijkteam .zomschrijving br {
    display: block;
}

.kra table.result-table.wijkteam [id^="profielLink"] b,
.kra table.result-table.wijkteam .zpdf-checkbox input,
.duo table.result-table.wijkteam [id^="profielLink"] b,
.duo table.result-table.wijkteam .zpdf-checkbox input {
    display: none;
}

/* 
    Sorteer op filter styling 
*/

#sorteerOpties, #sorteerWeken, #gemeentenOpties {
    font-family: poppins-regular;
    padding: 5px 10px;
    border-radius: 3px;
    background-color: var(--white);
    color: var(--black-1);
    outline: none;
    cursor: pointer;
    max-width: 200px;
}

#sorteerOpties option {
    padding: 5px;
    background: var(--white);
}

.bsw #sorteerOpties option:hover {
    background: var(--dark-blue);
}

.wmo #sorteerOpties option:hover {
    background: var(--dark-green);
}

.won #sorteerOpties option:hover {
    background: var(--dark-purple);
}

/* 
    Zoekbar styling 
*/

#zoekbalk {
    width: 250px;
}

#zoekbar {
    background: var(--light-blue);
    width: 100%;
    padding-top: 30px;
    border-collapse: unset;
    padding-left: 22%;
    padding-right: 22%;
}

.wmo #zoekbar {
    background: var(--light-green);
}

.won #zoekbar {
    background: var(--light-purple);
}

#search-table {
    padding: 0px !important;
    min-width: 243px;
}

#search-table div:first-child {
    z-index: 99;
}

#search-input, #search-shadow {
    font-family: 'poppins-regular';
    border: none;
    border-radius: 3px;
    height: 40px;
    font-size: 10pt;
    padding-left: 35px !important;
}

#search-input:focus-visible {
    outline: 0px;
}

#zoekFormulier {
    width: 100%;
    max-width: 300px;
}

#zoekInput {
    padding: 10px;
    width: 100%;
    box-sizing: border-box;
    border: 2px solid #ccc;
    border-radius: 4px;
}

.resultantencontainer {
    position: absolute;
    margin: 0px 0px;
    z-index: 11;
}

.zoekbalk-resultaten {
    width: 80%;
    z-index: 100;
    position: absolute;
    left: 50%;
    transform: translate(-50%, 0);
}

#suggesties, #suggestiesprodukten, #suggestieskenmerken {
    font-family: poppins-regular;
    background: #fff;
    border: 2px solid #eee;
    border-radius: 5px;
    margin-top: 3px;
    display: none;
    width: calc(100% - 4px);
}

#suggesties .suggestie, #suggestiesprodukten .suggestieprodukten, #suggestieskenmerken .suggestiekenmerken {
    padding: 6px 10px;
    cursor: pointer;
    transition: background-color 0.3s;
    font-size: 10pt;
    color: var(--text-blue);
    font-family: poppins-regular;
    border: 2px solid #eee;
    border-top: 0px;
}

.suggestie span:first-child {
    font-size: 11pt;
    color: var(--blue) !important;
}

.wmo .suggestie span:first-child {
    color: var(--green) !important;
}

.won .suggestie span:first-child {
    color: var(--purple) !important;
}

#suggesties .suggestie:hover, #suggestiesprodukten .suggestieprodukten:hover, #suggestieskenmerken .suggestiekenmerken:hover {
    background-color: var(--light-blue);
}

.wmo #suggesties .suggestie:hover, .wmo #suggestiesprodukten .suggestieprodukten:hover, .wmo #suggestieskenmerken .suggestiekenmerken:hover {
    background-color: var(--light-green);
}

.won #suggesties .suggestie:hover, .won #suggestiesprodukten .suggestieprodukten:hover, .won #suggestieskenmerken .suggestiekenmerken:hover {
    background-color: var(--light-purple);
}

div#suggesties:before, div#suggestiesprodukten:before, div#suggestieskenmerken:before {
    display: block;
    padding-right: 10px;
    text-align: right;
    color: var(--dark-blue);
    font-size: 12pt;
    border-top: 1px solid #eee;
    border-left: 2px solid #eee;
    border-right: 2px solid #eee;
}

.wmo div#suggesties:before, .wmo div#suggestiesprodukten:before, .wmo div#suggestieskenmerken:before {
    color: var(--dark-green);
}

.won div#suggesties:before, .won div#suggestiesprodukten:before, .won div#suggestieskenmerken:before {
    color: var(--dark-purple);
}

div#suggesties:before {
    content: 'Zorgaanbieders';
}

div#suggestiesprodukten:before {
    content: 'Producten';
}

div#suggestieskenmerken:before {
    content: 'Kenmerken';
}

.resultantencontainer .resultaten {
    margin-bottom: 100px;
}

#zoek-button {
    position: absolute;
    top: 50%;
    left: 9px;
    transform: translate(0, -50%);
    cursor: pointer;
    z-index: 11;
}

#clear-button {
    top: 50% !important;
    right: 4px !important;
    transform: translate(0px, -50%);
    z-index: 98;
}

#clear-button img {
    width: 12px;
    margin-right: 5px;
}

.vetgedrukt {
    font-family: 'poppins-bold';
    background: var(--light-blue);
}

.wmo .vetgedrukt {
    background: var(--light-green);
}

.won .vetgedrukt {
    background: var(--light-purple);
}

.zoekinput {
    padding: 10px;
    font-size: 12pt;
    color: var(--text-blue);
    border-radius: 5px;
    border: 1px solid var(--text-blue);
    margin: 0px 20px;
    width: -webkit-fill-available !important;
}

.zoekadres {
    padding: 10px;
    font-size: 12pt;
    color: var(--text-blue);
    border-radius: 5px;
    border: 1px solid var(--text-blue);
    width: 380px;
}

.submitadres {
    padding: 10px;
    font-size: 12pt;
    color: var(--text-blue);
    border-radius: 5px;
    border: 1px solid var(--text-blue);
}

.searchbar-child {
    position: relative;
}

.zoekinput:focus {
    position: relative;
    z-index: 11;
}

.zoekinput-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgb(20 53 59 / 30%);
    z-index: 10;
}

.blue-overlay {
    background: rgb(20 53 59 / 70%);
    position: fixed;
    z-index: 2;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
}

.highlighted-area {
    z-index: 5;
    background: var(--white);
    padding: 0px 20px;
    border-radius: 5px;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
}

.overlay-btn,
.overlay-btn-selproducten {
    position: fixed;
    top: 80px;
    left: 50%;
    transform: translate(-50%, 0px);
    z-index: 3;
    padding: 7.5px 10px;
    border-radius: 3px;
    background: var(--dark-blue);
    color: var(--white);
}

.overlay-btn:hover,
.overlay-btn-selproducten:hover {
    opacity: 0.7;
}

/*
   Volume button styling
*/

#preselected-cat button.fas.fa-volume-up, #preselected-kenmerken button.fas.fa-volume-up {
    position: absolute;
    top: 10px;
    right: 12px;
    font-size: 18pt !important;
    color: var(--black-2);
}

.all-speech {
    margin-right: 5px;
}

#main-volume-up {
    position: absolute;
    right: 50%;
    transform: translate(50%, 0%);
    bottom: 10px;
    font-size: 18pt;
    color: var(--black-2);
}

/* Informatie pagina styling */

[class^="infobtns-"] {
    width: 23%;
    padding: 0.5em 0px;
    color: var(--text-blue);
    background-color: var(--light-blue);
    text-align: center;
    cursor: pointer;
}

.wmo [class^="infobtns-"] {
    background-color: var(--light-green);
}

.won [class^="infobtns-"] {
    background-color: var(--light-purple);
}

[class^="infobtns-"]:hover {
    color: var(--white);
    background-color: var( --dark-blue);
}

.wmo [class^="infobtns-"]:hover {
    color: var(--white);
    background-color: var( --dark-green);
}

.won [class^="infobtns-"]:hover {
    color: var(--white);
    background-color: var( --dark-purple);
}

[class^="informatie-content-"] {
    background-color: var(--light-blue);
    color: var(--text-blue);
}

.wmo [class^="informatie-content-"] {
    background-color: var(--light-green);
}

.won [class^="informatie-content-"] {
    background-color: var(--light-purple);
}

/* Firefox */

.single-select-weken {
    vertical-align: middle;
    margin-right: 5px;
}

.single-select-gemeenten {
    vertical-align: middle;
    margin-right: 5px;
}

hr {
    border: none;
    height: 1px;
    background-color: var(--dark-blue);
}

.wmo hr {
    background-color: var(--dark-green);
}

.won hr {
    background-color: var(--dark-purple);
}

/* Stijl voor de aangepaste ronde checkbox met class "checkboxkp" */

.tablekpc {
    -webkit-user-select: none; 
    -moz-user-select: none;   
    -ms-user-select: none;   
    user-select: none;      
    cursor: pointer;       
    width: 20px;
    height: 20px;
    padding-bottom: 5px;
    padding: 5px;
    vertical-align: middle;
}

.tablekp {
    -webkit-user-select: none;
    -moz-user-select: none;  
    -ms-user-select: none;  
    user-select: none;     
    cursor: pointer;      
    padding: 5px;
    vertical-align: middle;
}

.tablekpcat {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    padding-bottom: 5px;
    background-color: var(--light-gray);
    padding-left: 5px;
    position: relative;
    z-index: 0;
}

.tablekpken {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    cursor: pointer;
    background-color: var(--white);
    padding: 5px;
}

.tablekpken:first-child {
    width: 22px;
}

.tablekp span,
.tablekpken span {
    color: var(--text-blue) !important;
}

button {
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    outline: none;
    font-family: poppins-regular;
    font-size: inherit;
    color: inherit;
    cursor: pointer;
}

/* Stijl voor de modal */

.modal {
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 999;
}

/* Stijl voor de modal-inhoud */

.modal-content {
    position: fixed;
    top: 50% !important;
    left: 50%;
    background-color: #ffffff;
    margin: 0% auto;
    border: 1px solid #ddd;
    height: 80vh !important;
    width: 80%;
    max-width: 1700;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
    border-radius: 5px;
    transform: translate(-50%, -50%) !important;
}

.modal-content iframe {
    height: calc(100% - 37px) !important;
}

.menu {
    font-family: poppins-regular;
    color: var(--text-blue);
    font-size: 13pt;
}

/* Stijl voor het zoekresultaatcontainer */

.found-search {
    font-family: 'poppins-bold';
}

.table-container {
    width: calc(100% - 80px);
    margin-left: auto;
    margin-right: auto;
    margin-top: -90px;
    display: grid;
    grid-template-columns: 20% 60% 20%;
    justify-content: center;
}

.col2 {
    width: auto !important;
    margin-top: 100px;
    min-height: 60vh;
    padding: 0px 20px;
}

#top-results table {
    width: 100%;
}

#kenmerken_table table {
    display: block;
}

#kenmerken_table tbody {
    display: table;
    width: 100%;
}

.table2 {
    width: 100%;
}

#zoekFormulier {
    width: 100%;
    max-width: 300px;
}

#zoekInput {
    padding: 10px;
    width: 100%;
    box-sizing: border-box;
    border: 2px solid #ccc;
    border-radius: 4px;
}

#suggesties, #suggestiesprodukten {
    font-family: poppins-regular;
    border: 2px solid #eee;
    border-radius: 5px;
    margin-top: 3px;
    display: none;
    max-height: 500px;
    overflow-y: auto;
}

#suggesties .suggestie, #suggestiesprodukten .suggestieprodukten {
    padding: 6px 10px;
    cursor: pointer;
    transition: background-color 0.3s;
    font-size: 10pt;
    color: var(--text-blue);
    font-family: poppins-regular;
    border: 2px solid #eee;
    border-top: 0px;
    max-height: 300px;
    overflow-y: auto;
}

#suggesties .suggestie:hover, #suggestiesprodukten .suggestieprodukten:hover {
    background-color: #eee;
}

/* style menu opties */

#tabButtons {
    text-align: center;
    user-select: none;
}

.tab {
    font-family: 'poppins-regular';
    font-size: 11pt;
    margin: 5px 20px;
    cursor: pointer;
    background-color: transparent;
    color: var(--black-1);
    border: none;
    outline: none;
    transition: background-color 0.3s, color 0.3s;
    border-radius: 4px;
    margin-right: 8px;
    width: auto;
    vertical-align: middle;
}

.tab:first-child {
    margin-left: auto;
}

.tab[active="true"] {
    text-decoration: underline;
    font-family: 'poppins-bold';
    pointer-events: none;
}

.tab[name="Sociale dienst Drechtsteden"] {
    width: 110px;
}

.tab[name="Login"] {
    border: 1px solid;
    margin: 5px 0px;
    padding: 2px 20px 2px 10px;
    width: 100px;
    height: 40px;
}

.tab[name="Login"]:before {
    content: '';
    display: inline-table;
    background-image: url(/accounts/bsw3/links/1724245700.png);
    background-size: contain;
    background-repeat: no-repeat;
    width: 20px;
    height: 16px;
}

.tab[name="Keuzehulp"],
.tab[name="Nieuws"],
.tab[name="Jeugdgids"],
.tab[name="Wmo-gids"],
.tab[name='Perceelindeling'] {
    display: none;
}

span[name="Andere Regio"] {
    display: none;
}

.tab:hover, .active-tab {
    font-family: 'poppins-bold';
}

.tab-content {
    display: none;
    background-color: white;
    padding: 20px;
    border: 1px solid #ddd;
    border-radius: 0 8px 8px 8px;
    margin-top: -1px;
}

#tabContents {
    font-family: 'poppins-regular';
    border-radius: 0 0 8px 8px;
    overflow: hidden;
}

.toggleButton {
    cursor: pointer;
    position: relative;
}

.toggleButton::before {
    content: "u"; /* Uitklapicoon */
    position: absolute;
    left: 170px;
}

.toggleButton.active::before {
    content: "i"; /* Inklapicoon */
}

/*
    Nieuws Icon styling
*/

.rread {
    display: inline-block;
    background-color: red;
    color: var(--white);
    width: 14px;
    height: 14px;
    border-radius: 50%;
    text-align: center;
    line-height: 17px;
    font-size: 9px;
    font-weight: bold;
    position: absolute;
    top: -6px;
    right: -8px;
}

.nonewstocheck {
    width: 100%;
    top: 0;
    left: 0;
    opacity: 0;
}

.rread a.orginallink {
    position: absolute;
    width: 26px;
    height: 24px;
    right: 0;
    opacity: 0;
}

.rnieuws {
    display: flex;
    position: relative;
    user-select: none;
}

.rnieuws:before {
    content: '\f27a';
    font-family: 'Font Awesome 5 Free';
    font-size: 12pt;
    font-weight: bold;
    color: var(--text-blue);
}

.rread a {
    color: var(--white);
    width: 100%;
    display: flex;
    height: 14px;
    justify-content: center;
    align-items: center;
}

/*
    Sublocatie icon styling
*/

.rsubloc {
    padding: 0px;
    position: relative;
}

.rsubloc a {
    font-family: 'poppins-semibold';
    border: 2px solid var(--dark-blue);
    color: var(--dark-blue);
    font-weight: normal;
    border-radius: 5px;
    padding: 8px 15px;
    margin-left: -10px;
    transition: 0.2s;
    display: inline-block;
}

.rsubloc a:before {
    content: 'Bekijk locaties ('; 
}

.rsubloc a:after { 
    content: ')'; 
}

.wmo .rsubloc a {
    border: 2px solid var(--dark-green);
    color: var(--dark-green);
}

.won .rsubloc a {
    border: 2px solid var(--dark-purple);
    color: var(--dark-purple);
}

.rsubloc a:hover {
    opacity: 0.7;
}

/*
    Sublocatie uitleg styling
*/

.subcattitel {
    background: var(--light-blue);
    padding: 5px;
    margin-bottom: 5px;
    margin-top: 5px;
}

.wmo .subcattitel {
    background: var(--light-green);
}

.won .subcattitel {
    background: var(--light-purple);
}

.subcattitel table tr:nth-child(odd) {
    background: var(--light-gray);
}

.subcattitel table tr:nth-child(even) {
    background: var(--white);
}

/*
    Categorie uitleg styling
*/


[class^="dropdown"] {
    cursor: pointer;
    position: relative;
    width: -webkit-fill-available;
    display: block;
    background: var(--light-gray);
    margin-top: 12px;
    padding: 10px 15px;
    border-radius: 3px;
}

[class^="dropdown"]:before {
    content: '\f077';
    display: block;
    font-family: 'Font Awesome 5 Free';
    font-weight: 700;
    font-size: 14px;
    color: var(--text-blue);
    position: absolute;
    right: 15px;
    transition: 0.5s;
    transform: rotate(180deg);
    pointer-events: none;
    z-index: 1;
}

.rotated[class^="dropdown"]:before {
    transform: rotate(0deg);
}

#rows-uitleg [class$="-content"] {
    background: var(--light-gray);
    padding: 10px 15px;
    margin-top: -2px;
    border-radius: 0px 3px;
}

#rows-uitleg p:has([class^="dropdown"]) {
    margin: 0;
    display: flex;
}

.informatie-begrippen [class$="-content"] {
    background: var(--light-gray);
    padding: 10px 15px;
    margin-top: -14px;
    border-radius: 0px 3px;
}

#rows-uitleg .row-styling {
    border-bottom: 1px solid #e1e1e1;
    height: 30px;
    color: var(--black-2);
    position: relative;
}

#rows-uitleg tr.row-styling td:first-child:after {
    content: '-';
    display: block;
    position: absolute;
    left: 77px;
    top: 3px;
}

/*
    categorie dropdown btn styling
*/

.btn-option {
    width: -webkit-fill-available;
    box-sizing: border-box;
    margin-left: 35px;
    padding: 6px 2px;
    font-size: 9pt;
    font-family: 'poppins-semibold';
    color: var(--text-blue);
    position: relative;
    cursor: pointer;
}

.btn-option:before {
    content: '\f077';
    font-family: 'Font Awesome 5 Free';
    font-weight: 700;
    font-size: 14px;
    color: var(--text-blue);
    position: absolute;
    right: 8px;
    top: 6px;
    transition: 0.5s;
    transform: rotate(180deg);
    pointer-events: none;
    z-index: 1;
}

.active.btn-option:before {
    transform: rotate(0deg);
}

/*
    Pagina knoppen styling
*/

div#pages-container button {
    transition: 0.5s;
}

div#pages-container button:hover {
    opacity: 0.7;
}

/*
    informatie styling
*/

.informatie-downloads {
    border-radius: 3px;
}

.informatie-downloads a {
    background-image: url(/accounts/bsw3/links/1707978340.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: right;
    padding-right: 18px;
    text-decoration: underline;
}

.informatie-hulpnodig {
    margin-top: 10px;
    display: block;
}

.informatie-hulpnodig > td {
    display: block;
    padding-top: 1px !important;
}

.informatie-hulpnodig a {
    padding-left: inherit;
    padding-right: inherit;
}

/*
    Responsive styling
*/

@media screen and (min-width: 1301px) and (max-width: 1500px) {
    .bswlogo {
        width: 300px;
    }
}

@media screen and (max-width: 1300px) {
    #header td.bsw {
        display: none;
    }

    .bswlogo {
        width: auto;
    }
}

@media screen and (max-width: 1200px) {

    .rows-results tr:has(.start-vakken) {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .rows-results td:has(.start-vakken) {
        width: 80% !important;
    }

    .table-container {
        grid-template-columns: 25% 75%;
        grid-template-rows: auto auto;
    }

    #kenmerken_table {
        grid-column: 1;
        grid-row: 2;
    }

    .producten_table {
        grid-column: 1;
        grid-row: 1;
    }

    #top-results {
        grid-row: 1 / span 3;
        grid-column: 2;
    }

    #mobile-filter {
        display: flex;
    }

    .table_resultaat {
        padding-left: 29%;
    }
}

@media screen and (min-width: 901px) {
    .lokaleteams > tbody > tr> td {
        border-bottom: 1px solid black;
    }
}

@media screen and (max-width: 900px) {
    .lokaleteams > tbody > tr {
        display: flex;
        flex-direction: column;
        border-bottom: 1px solid;
        margin-bottom: 10px;
        padding-bottom: 5px;
    }

    .lokaleteams > tbody > tr > td {
        padding: 0px !important;
        width: 100% !important;
    }

    .lokaleteams > tbody > tr > td:nth-child(even) {
        display: none;
    }

    .informatie-begrippen .collum-begrippen {
        display: flex;
        flex-direction: column;
    }

    .informatie-begrippen .collum-begrippen > td {
        width: 100% !important;
        padding: 0px !important;
    }

    .informatie-begrippen .collum-begrippen > td:last-child {
        margin-top: -10px;
    }
}

@media screen and (max-width: 800px) {

    .start-vakken-text {
        font-size: 0;
    }

    .start-vakken {
        height: 50px;
    }

    .start-vakken-title {
        height: 50px !important;
        align-content: center;
        display: flex;
        align-items: center;
    }

    .mobile-only td.start-vakken-btn:before {
        bottom: 2px;
    }

    .start-vakken-btn, .start-vakken-btn-bsw, .start-vakken-btn-wmo, .start-vakken-btn-won {
        clip-path: ellipse(80% 80% at 100% 100%);
    }

    .start-vakken-btn .fa, .start-vakken-btn-bsw .fa, .start-vakken-btn-wmo .fa, .start-vakken-btn-won .fa {
        position: relative;
        top: 5px;
    }

    span[name="Andere Regio"] {
        display: unset;
    }

    .tab[name="Sociale dienst Drechtsteden"] {
        width: 50%;
    }

    .start-btn {
        display: none;
    }

    #footer, #tool {
        display: none;
    }

    #mobile-footer {
        display: flex;
        flex-wrap: wrap;
        overflow: auto;
    }

    .table_resultaat {
        padding: 0px 20px 30px 20px !important;
        height: auto;
        font-size: 12pt;
    }

    .producten_table, #kenmerken_table {
        display: none;
        position: relative;
        z-index: 98;
        margin-top: -30px;
        width: 100vw;
        min-width: 320px;
    }

    #preselected-cat {
        border-radius: 30px 30px 0px 0px;
    }

    #kenmerken_table {
        margin-top: -15px;
        padding-bottom: 7em;
    }

    .table-container {
        grid-template-columns: auto;
        width: 100%;
        margin-top: 0px;
    }

    #tabButtons {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        z-index: 2;
        background: var(--light-blue);
        height: 100vh;
        flex-direction: column;
        display: none;
        align-items: center;
    }

    .wmo #tabButtons {
        background: var(--light-green);
    }

    .won #tabButtons {
        background: var(--light-purple);
    }

    #mobile-menu-btn {
        position: absolute;
        top: 22px;
        right: 42px;
        font-size: 16pt;
        z-index: 2;
        display: block !important;
        cursor: pointer;
    }

    #mobile-menu-btn.fa-plus {
        transform: rotate(45deg);
    }

    .bswlogo {
        margin-left: inherit;
        z-index: 4;
        position: relative;
    }

    #header td.bsw {
        display: none;
    }

    .tab {
        margin: 5px 20px;
        border-bottom: 2px solid;
        width: 50%;
        border-radius: 0;
        font-size: 20pt;
    }

    .tab:first-child {
        margin-top: 6em;
        margin-left: 20px;
    }

    .tab[name="Login"], #account-icon {
        display: none;
    }

    .login-name {
        display: none;
        position: fixed;
        left: 0;
        top: 0;
        width: 100%;
        height: 100vh;
        padding: 0;
        margin: 0;
        z-index: 3;
        background: var(--light-blue);
        cursor: auto;
    }

    .wmo .login-name {
        background: var(--light-green);
    }

    .won .login-name {
        background: var(--light-purple);
    }

    .account-name {
        display: none;
    }

    .login-name a {
        font-size: 20pt;
        border-bottom: 2px solid var(--black-1);
        color: var(--black-1);
    }

    .login-menu {
        width: 200px;
        position: initial;
        margin-left: auto;
        margin-right: auto;
        margin-top: 14em;
        background: var(--transparent)
    }

    .tab[name="Login"] {
        width: 100%;
        z-index: 99;
        position: fixed;
        top: 0px;
        left: 0px;
        background: var(--light-blue);
        padding: 30px 10%;
        margin: 0;
        border: none;
        height: auto;
        align-items: center;
        justify-content: center;
        box-shadow: #363636 0px 0px 10px -3px;
    }

    #zoekbalk {
        display: none;
        width: 100%;
        margin-left: auto;
        margin-right: auto;
        position: fixed;
        top: 0px;
        left: 0px;
        z-index: 4;
        background: var(--light-blue);
        padding: 24px 10%;
        box-shadow: #363636 0px 0px 10px -3px;
    }

    .wmo #zoekbalk {
        background: var(--light-green);
    }

    .won #zoekbalk {
        background: var(--light-purple);
    }

    #zoekbalk td:last-child {
        display: none;
    }

    #top-results {
        margin-top: 0;
        position: absolute;
        left: 0;
        width: 100% !important;
        padding: 0px;
        padding-bottom: 4em;
    }

    .start-text br {
        display: none;
    }

    .kenmerk-tag-parent {
        justify-content: center;
    }

    .zomschrijving {
        height: 0px;
    }

    .zomschrijving.edited a {
        position: absolute;
        left: 0px;
        top: 0px;
        width: 100%;
        height: 100%;
        opacity: 0;
    }

    .gezochtop {
        background: unset !important;
        margin-top: 2px;
        font-family: 'poppins-regular';
        font-size: 10pt !important;
        padding: 0px;
        margin-bottom: 5px;
    }

    .tdleft, .tdright, .zcollumleft {
        width: auto;
        min-width: auto;
        max-width: unset;
        padding: 0px;
    }

    .tdleft {
        width: 100%;
        text-align: right;
    }

    .tdright {
        width: 100%;
    }

    .zcollumleft {
        display: flex;
        flex: 1 1 30%;
        box-sizing: border-box;
        max-width: 92px !important;
    }

    .result-table tbody {
        flex-wrap: wrap;
    }

    .zcollumright {
        display: flex;
        flex: 1 1 70%;
        box-sizing: border-box;
        flex-direction: column;
        padding-left: 5px;
        padding-top: 5px;
        padding-right: 5px;
    }

    .mobile-tr {
        flex: 1 1 100%;
        flex-direction: column;
        padding-bottom: 15px;
        background: var(--light-gray);
    }

    .zcontact a, .zcontact br, .tdleft br, .gezochtop br {
        display: none;
    }

    .zcontact br:nth-of-type(1), .zcontact br:nth-of-type(2) {
        display: block;
    }

    #zorglogo {
        height: 50px;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .zfav, .zalert, .znot, .zfeedback {
        width: auto;
    }

    .rnieuws {
        top: 2px;
    }

    .znaam {
        display: block;
        font-size: 10pt !important;
    }

    #zorglogo h3 {
        font-size: 0pt;
        width: 80px;
    }

    #zorglogo h3:first-letter {
        font-size: 9pt;
    }

    #zorglogo img {
       width: 80px;
       height: 50px;
       object-fit: contain;
    }

    .zcontact {
        display: none;
    }

    .wachttijden-bijgewerkt {
        background: transparent !important;
        padding: 0px;
        text-align: right;
        font-family: 'poppins-regular';
        color: var(--text-blue) !important;
        font-size: 9pt !important;
    }

    .zoekbalk-resultaten {
        width: 95%;
    }

    #search-results {
        max-height: unset;
        margin-bottom: 2em;
    }

    #search-input, #search-shadow {
        font-size: 16px;
    }

    .image-map-container img {
       width: 100%;
       max-width: 600px;
    }

    .kenmerk-tag {
        order: 2;
        margin: 5px;
    }

    .remove-all-tags {
        width: 100%;
        text-align: center;
    }

    .zpdf-checkbox {
        bottom: 0px;
        top: auto;
        display: none;
    }

    .overlay-btn {
        top: 40px;
        width: 90%;
    }

    .blue-overlay {
        z-index: 4;
    }

    .rsubloc a, [id^="profielLink"] b {
        padding: 4px 6px;
        margin-left: 0px;
        font-family: 'poppins-semibold';
    }

    .sorteertd, .sorteertw, .gemeentetd {
        width: 100%;
        padding-left: 10%;
        padding-right: 10%;
    }

    #sorteerOpties, #sorteerWeken, #gemeentenOpties {
        width: 100%;
        border: 1px solid;
        height: 33px;
        max-width: unset;
    }

    .modal-content {
        width: 100%;
        height: 100% !important;
    }

    .result-table {
        border-collapse: collapse;
        background: var(--white);
        border: 4px solid var(--light-gray);
        max-width: 500px;
        margin-left: auto;
        margin-right: auto;
    }

    [id^="profielLink"] {
        width: fit-content;
        float: left;
    }

    tr:has(.rsubloc) {
        float: right;
    }

    .swachttijd b {
        font-family: 'poppins-semibold';
    }

    .mapimagetd, .setuserloctd, .mapimagetd, .downloadpdftd {
        margin: 10px 2px;
        margin-left: auto;
        margin-right: auto;
    }

    .downloadpdftd {
        display: none;
    }

    #kenmerken_table tbody {
        display: inline-block;
    }

    #pk-btn-close {
        display: block;
    }

    .regios {
        display: block;
    }

    .image-map-container img, .image-map-container .tooltip-kaart {
        pointer-events: none;
    }

    #chat-widget-container {
        overflow: visible !important;
        bottom: 70px !important;
    }

    .zicons img {
       margin: 0px 6px;
    }

    table.result-table.wijkteam [id^="profielLink"] b {
        position: inherit;
    }

    table.result-table.wijkteam .znaam {
        display: block;
        color: var(--orange) !important;
    }

    .kra table.result-table.wijkteam .znaam {
        color: #8ed8c7 !important;
    }

    table.result-table.wijkteam .mobile-tr {
        background: var(--orange);
        margin-top: 20px;
    }

    .kra table.result-table.wijkteam .mobile-tr {
        background: linear-gradient(90deg, #8ed8c7 0%, #a9e0c2 100%);
    }

    table.result-table.wijkteam {
        border-color: var(--orange);
    }

    .kra table.result-table.wijkteam {
        border-color: #8ed8c7;
    }

    .kra table.result-table.wijkteam .zomschrijving {
        position: absolute;
        left: 0px;
        bottom: 1px;
        height: auto;
        font-size: 0 !important;
        z-index: 0 !important;
    }

    .kra table.result-table.wijkteam .zomschrijving a {
        width: auto;
        margin-right: 5px;
        display: inline-block;
    }

    table.result-table.wijkteam .zcollumright {
        background: var(--white);
    }

    #favorietenButton {
        position: absolute;
        top: 19px;
        right: 70px;
    }

    .linkfeedbackbtn {
        display: none;
    }

    .start-title, .start-text {
        padding: 0px 10px;
    }
}