@font-face {
    font-family: 'Comic Neue';
    src: url('../fonts/ComicNeue-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Comic Neue';
    src: url('../fonts/ComicNeue-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* Alleen toevoegen als je cursief gebruikt in je app: */
@font-face {
    font-family: 'Comic Neue';
    src: url('../fonts/ComicNeue-Italic.ttf') format('truetype');
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: 'Playpen Sans';
    src: url('../fonts/Playpen_Sans/PlaypenSans-VariableFont_wght.ttf') format('truetype');
    font-weight: 100 800;   /* het hele bereik in één declaratie */
    font-style: normal;
    font-display: swap;
}
html {
    font-size: 21px;
    height: 100vh;
    color:black;
    font-family: 'Playpen Sans', 'Comic Neue', sans-serif;
}
/*Kleurenschema's - de accentkleur en icon-filter worden overal in de CSS via deze
variabelen gebruikt, zodat een thema-wissel (zie theme.js / gho-detail-page.js)
overal meteen doorwerkt zonder los element voor element te hoeven bijwerken.*/
:root{
    --theme-color: rgb(237, 125, 49);
    --theme-icon-filter: invert(72%) sepia(18%) saturate(3889%) hue-rotate(339deg) brightness(100%) contrast(87%);
}
:root[data-theme="blue"]{
    --theme-color: rgb(43, 120, 230);
    --theme-icon-filter: brightness(0) saturate(100%) invert(72%) sepia(18%) saturate(3889%) hue-rotate(170deg) brightness(100%) contrast(87%);
}
:root[data-theme="black"]{
    --theme-color: rgb(20, 20, 20);
    --theme-icon-filter: brightness(0) saturate(100%);
}
:root[data-theme="purple"]{
    --theme-color: rgb(147, 51, 234);
    --theme-icon-filter: brightness(0) saturate(100%) invert(72%) sepia(18%) saturate(3889%) hue-rotate(241deg) brightness(100%) contrast(87%);
}
:root[data-theme="green"]{
    --theme-color: rgb(34, 160, 90);
    --theme-icon-filter: brightness(0) saturate(100%) invert(72%) sepia(18%) saturate(3889%) hue-rotate(117deg) brightness(100%) contrast(87%);
}
:root[data-theme="red"]{
    --theme-color: rgb(220, 53, 53);
    --theme-icon-filter: brightness(0) saturate(100%) invert(43%) sepia(86%) saturate(919%) hue-rotate(324deg) brightness(78%) contrast(132%);
}
/*General styles for whole page setup*/
body{
    background-color: white;
}
.header{
    position: fixed;
    background-color: rgb(233, 231, 230);
    left:0px;
    top:0px;
    width: 100%;
    height: 7.5%;
    z-index:11;
}
.footer{
    position: fixed;
    display: flex;
    background-color: rgb(233, 231, 230);
    left:20%;
    top:93%;
    width: 60%;
    height: 7%;
    font-size: 0.8em;
    z-index:11;
    border-radius: 1.8em;
    box-shadow: 0px -2px 10px rgba(0,0,0,0.12);
    transition: transform 0.35s ease;
    transform: translateY(0%);
}
/* menu pas tonen na het inloggen (navi.js toggle_navigation haalt deze class weg) */
.footer.footer-uit{
    display: none !important;
}
.footer.footer-hidden{
    transform: translateY(100%);
}
/*button menu below*/
.button-menu{
    width:33.33%;
    height:100%;
    background-size: 50%;
    background-repeat: no-repeat;
    background-position: center;
    mix-blend-mode: multiply;
    filter: var(--theme-icon-filter);
    cursor: pointer;
}
@media (min-width: 1024px) {
    .button-menu {
        background-size: 15%;
    }
    #button-home, #button-inoutbox{
        background-size: 15% !important;
    }
}
#button-home{
    background-image: url('../img/huis-icon-removebg.png');
    background-size: 60%;
}
#button-inoutbox{
    background-image: url('../img/inoutbox-icon-removebg.png');
    background-size: 50%;
}
/* testschakelaar voor de bureaubladlayout (js/layout.js) - alleen zichtbaar op
   brede schermen EN alleen op de homepage (via de sibling-selector hieronder,
   die meelift op dezelfde .fadein-class die switch_screen_by_id al gebruikt -
   dus geen aparte JS-logica nodig om 'm per pagina te tonen/verbergen).
   Staat bewust als sibling van #home-page i.p.v. erin genest: #home-page
   (.fadein + position) vormt zijn eigen stacking-context, waardoor een z-index
   van een kind daarbinnen nooit boven .header kan uitkomen, ongeacht de
   waarde. Ongeacht of de nieuwe layout net aan of uit staat moet de schakelaar
   zelf altijd bedienbaar zijn, vandaar geen koppeling aan [data-layout]. De
   daadwerkelijke desktop-layout-regels staan in css/desktop.css. */
.layout-switch{
    display: none;
}
@media (min-width: 1024px) {
    #home-page.fadein ~ .layout-switch{
        display: flex;
        align-items: center;
        gap: 0.6em;
        position: fixed;
        top: 0;
        height: 4.5em;
        right: 1.5em;
        z-index: 50;
        font-size: 0.7em;
        color: rgb(120, 120, 120);
    }
    .layout-switch-toggle{
        width: 2.4em;
        height: 1.3em;
        border-radius: 1em;
        background: rgb(200, 198, 196);
        position: relative;
        cursor: pointer;
        transition: background 0.2s ease;
    }
    .layout-switch-toggle::after{
        content: "";
        position: absolute;
        top: 0.15em;
        left: 0.15em;
        width: 1em;
        height: 1em;
        border-radius: 50%;
        background: white;
        transition: left 0.2s ease;
        box-shadow: 0 1px 3px rgba(0,0,0,0.3);
    }
    .layout-switch-toggle.on{
        background: var(--theme-color);
    }
    .layout-switch-toggle.on::after{
        left: 1.25em;
    }
}
/*content area */
.back-to-previous-page{
    position: absolute;
    left: 0.2em;
    font-size: 1.0em;
    cursor: pointer;
    color: var(--theme-color);
    top:0.5em;
    z-index: 100;
}
.content_pages{
    position:absolute;
    left:0px;
    top:7.5%;
    height:82.5%;
    width:100%;
    overflow-y: scroll;
    overflow-x: hidden;
    display: block;
    opacity: 0%;
}
/*pages styles*/
#loading-login-page{
    display:block;
}
/*loading page */
#loading-progres-text{
    position:absolute;
    left:15%;
    width:70%;
    height:1em;
    font-size:0.8em;
    text-align: center;
    top:40%;
    filter: var(--theme-icon-filter);
}
#loading-progres-icon{
    filter: var(--theme-icon-filter);
    position:absolute;
    left:50%;
    margin-left: -25px;
    width:50px;
    height:50px;
    font-size:0.8em;
    text-align: center;
    top:45%;
    background-repeat: no-repeat;
    background-size: 100%;
}
.loading-progres-icon-security{
    background-image: url('../img/security-icon-removebg.png');
}
.loading-progres-icon-handshake{
    background-image: url('../img/handshake-icon-removebg.png');
}
.loading-progres-icon-wifi{
    background-image: url('../img/wifi-icon-removebg.png');
    animation: blinker 1s linear infinite;
}
/*Enter pin code page*/
#pin-code-text{
    position:absolute;
    left:15%;
    width:70%;
    height:1em;
    font-size:0.8em;
    text-align: center;
    top:40%;
    filter: var(--theme-icon-filter);
}
#pin-code-timer{
    position:absolute;
    left:0;
    width:30%;
    height:1em;
    font-size:0.8em;
    text-align: left;
    top:0;
    filter: var(--theme-icon-filter);
}
#pin-code-code-wrapper{
    position:absolute;
    left:0;
    right:0;
    width:14.1em;
    height:1em;
    top:53%;
    margin-left: auto;
    margin-right: auto;
}
.pin-code-code{
    position:relative;
    float:left;
    border: 1px solid;
    width:1.5em;
    height:1.5em;
    font-size:1.5em;
    border-color: rgb(233, 231, 230);
    text-align: center;
}
#pin-code-code-wrapper input{
    border: none;
    height:250%;
    width:100%;
    opacity:0;
    top:0;
    left:0;
    z-index: 99;
    position: absolute;
}
#pin-code-code-wrapper input:focus{
    outline: none;
}
#pin-code-verify-icon{
    filter: var(--theme-icon-filter);
    position:absolute;
    left:50%;
    margin-left: -25px;
    width:50px;
    height:50px;
    font-size:0.8em;
    text-align: center;
    top:45%;
    background-repeat: no-repeat;
    background-size: 100%;
    display:none;
}
.pin-code-verify-icon-error{
    background-image: url('../img/error-icon-removebg.png');
}
.pin-code-verify-icon-succes{
    background-image: url('../img/verify-icon-removebg-preview.png');
}
.pin-code-verify-icon-email{
    background-image: url('../img/email-icon-removebg.png');
}
#pin-code-close-app{
    display:none;
    position:absolute;
    left:50%;
    margin-left: -50px;
    width:100px;
    height:50px;
    line-height: 50px;
    font-size:0.8em;
    text-align: center;
    top:55%;
    background-repeat: no-repeat;
    background-size: 100%;
    background-color:#ee9632;
    color:white;
    border-radius: 10px;

}
/*error page */
#error-page-icon{
    filter: var(--theme-icon-filter);
    position:absolute;
    left:50%;
    margin-left: -25px;
    width:50px;
    height:50px;
    font-size:0.8em;
    text-align: center;
    top:45%;
    background-repeat: no-repeat;
    background-size: 100%;
    background-image: url('../img/error-icon-removebg.png');
}
#error-page-text{
    position:absolute;
    left:15%;
    width:70%;
    height:1em;
    font-size:0.8em;
    text-align: center;
    top:40%;
    filter: var(--theme-icon-filter);
}
/*first start page*/
.first-start-button{
    position:relative;
    width:100%;
    height:50%;
    background-repeat: no-repeat;
    background-position: center;
    filter: var(--theme-icon-filter);
    cursor: pointer;
}
.first-start-text{
    position:relative;
    text-align: center;
    top:90%;
}
#nieuw-gezinshuis{
    background-image: url('../img/plus-icon-removebg.png');
    background-size: contain;
}
#koppel-gezinshuis{
    background-image: url('../img/scan-qr-icon-removebg.png');
    background-size: contain;
}
/*end first start page*/
/*Home page after setup*/
/*or initial page after launch*/
.home-page-sections{
    position:relative;
}
.section-header{
    color:var(--theme-color);
    width:100%;
    height:1.2em;
    font-size: 1.5em;
    text-indent: 1em;
}
.section-content:before{
    content : "";
    position:absolute;    
    border-top: 1px solid;
    border-color: rgb(165, 165, 165);
    top:0;
    left:-3em;
    width:100%;
}
.section-content{
    position:relative;
    display:flex;
    flex-direction: column;
    top:5%;
    left:3.5em;
    height:25%;
    width:92%;
    font-size: 0.9em;
    line-height: 1.5em;
}
.content-section-button-top{
    position:absolute;
    font-size: 0.6em;
    top:-10%;
    right:5em;
    color:var(--theme-color);
    cursor: pointer;
}
.section-footer{
    top:0px;
    left:0px;
    width:100%;
    padding-top: 5%;
}

/*New device overview page after setup*/
.new-device-sections{
    position:relative;
}
.new-device-qr-code-wrapper{
    left:-30%;
    width:130%;
    height:auto;
    position: relative;
}
.new-device-qr-code-img{
    height: 250px;
    left:55%;
    width:250px;
    position: relative;
    margin-left: -125px;
    margin-top: 5%;
}
.fadeout{
    transition: 0.7s;
    opacity: 0% !important;
    z-index: 1;
}
.fadein{
    transition: 1s;
    opacity: 100% !important;
    z-index: 10;
}
.blinking{
    animation: blink 2s linear infinite;
}
.functionaliteit-uit{
    opacity: 0.6 !important;
    filter: grayscale(100%);
}
@keyframes blink {
    0% {
      opacity: 0;
    }
    50% {
      opacity: .3;
    }
    100% {
      opacity: 6;
    }
  }
.koppel-gh-qr-code-message, .scan-gh-qr-code-message, .new-device-qr-code-message, .scan-login-qr-code-message{
    width:90%;
}
.qr-code-scan-manual-wrapper{
    display: flex;
    align-items: center;
    gap: 0.5em;
    width: 90%;
}
#qr-code-scan-manual-input{
    flex: 1;
    min-width: 0;
    padding: 0.4em 0.6em;
    font-size: 0.9em;
    border: 1px solid #ccc;
    border-radius: 6px;
}
.qr-code-scan-manual-submit{
    color: var(--theme-color);
    border: 1px solid var(--theme-color);
    border-radius: 12px;
    padding: 0.4em 1em;
    font-size: 0.85em;
    cursor: pointer;
    white-space: nowrap;
}
/*popup pages*/
.popup_page{
    position:absolute;
    left:0px;
    top:5%;
    height:100vh;
    width:100%;
    background-color: rgb(156 156 156 / 70%);
    opacity: 0;
}
.popup_content{
    position: relative;
    opacity: 100%;
    top:-40%;
    height: 25%;
    width: 100%;
    background-color: white;
}
.pop-up{
    transition: 1s;
    opacity: 100% !important;
    z-index: 99;
}
.pop-up-slide-in{
    top:0%;
    transition: 1s;
}
.pop-out{
    transition: 1s;
    opacity: 0% !important;
    z-index: 1;
}
#popup-tuf-display_image-container{
    display: flex;
    margin-left: 30%;
}
#popup-tuf-display_image{
    position: relative;
    margin-top: 1.5em;
    margin-left: 1.5em;
    float:left;
    border: 1px solid;
    border-radius: 50%;
    overflow:hidden;
    height:75px;
    width:75px;
    background-size: contain;
    border-color: var(--theme-color);
    background-repeat: no-repeat;
}
/* default: show placeholder icon */
#popup-tuf-display_image::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 60px;           /* icon size */
    height: 60px;
    transform: translate(-50%, -50%);
    opacity: 0.6;
    pointer-events: none;
}

/* when there is an actual image: hide placeholder */
#popup-tuf-display_image.has-image::before {
    display: none;
}
#popup-tuf-take-picture{
    background-image: url("../img/camera-removebg-preview.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    filter: var(--theme-icon-filter);
}
.tuf-popup-options{
    position: relative;
    margin-top: 1.2em;
    display: block;
    left: 50%;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    width: 30px;
    height: 30px;
    filter: var(--theme-icon-filter);
    cursor: pointer;
}
#popup-tuf-image_input{
    display:none;
}
#popup-tuf-media-upload{
    background-image: url("../img/popup-tuf-display_image_blank.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 120%;
    filter: var(--theme-icon-filter);
}
#popup-tuf-ok, #popup-apof-ok{
    background-image: url("../img/verify-icon-removebg-preview.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    filter: var(--theme-icon-filter);
}
/* Apotheekfoto popup — zelfde layout als popup-take-picture */
#popup-apof-display_image-container{
    display: flex;
    margin-left: 30%;
}
#popup-apof-display_image{
    position: relative;
    margin-top: 1.5em;
    margin-left: 1.5em;
    border: 1px solid;
    border-radius: 50%;
    overflow: hidden;
    height: 75px;
    width: 75px;
    background-size: contain;
    border-color: var(--theme-color);
    background-repeat: no-repeat;
}
#popup-apof-take-picture{
    background-image: url("../img/camera-removebg-preview.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    filter: var(--theme-icon-filter);
}
#popup-apof-media-upload{
    background-image: url("../img/popup-tuf-display_image_blank.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 120%;
    filter: var(--theme-icon-filter);
}
#popup-apof-image_input{
    display: none;
}
.medi-apof-thumb{
    cursor: pointer;
}
/* foutmelding-banner (popup-error): de hele inhoud is klikbaar om een foutrapport
   te sturen, zie send_log_popup_bound in navi.js - alleen hier, .popup_content
   is op andere popups niet klikbaar */
#popup-error .popup_content{
    cursor: pointer;
}
.popup_content-error{
    position: relative;
    opacity: 100%;
    height: 7.5% !important;
    background-color: rgb(255, 90, 90) !important;
    margin: 2%;
    width: 96%;
    border-radius: 5px;
}
#popup-error-report{
    position: absolute;
    right: 2%;
    top:2%;
    color: white;
}
.popup_content-functionaliteit-uit{
    position: relative;
    opacity: 100%;
    height: auto !important;
    background-color: var(--theme-color);
    color: white;
    margin: 2%;
    width: 96%;
    box-sizing: border-box;
    padding: 1em;
    border-radius: 5px;
    text-align: center;
}
#popup-functionaliteit-uit .popup_content{
    height: auto;
}
#popup-functionaliteit-uit-link{
    text-decoration: underline;
    font-weight: bold;
    cursor: pointer;
}
#popup-generic-message{
    width:93%;
}
#popup-generic-ok{
    color: var(--theme-color);
    cursor: pointer;
}
#popup-error-message{
    font-size: 18px;
}
.popup_content-error-confirm{
    position: relative;
    opacity: 100%;
    height: auto !important;
    background-color: white;
    margin: 2%;
    width: 96%;
    box-sizing: border-box;
    padding: 1.2em;
    border-radius: 5px;
    text-align: center;
}
#popup-error-confirm .popup_content{
    height: auto;
}
.popup-version-blocked-content{
    position: relative;
    opacity: 100%;
    height: auto !important;
    background-color: white;
    margin: 2%;
    width: 96%;
    box-sizing: border-box;
    padding: 1.5em;
    border-radius: 5px;
    text-align: center;
}
#popup-version-blocked .popup_content{
    height: auto;
}
.popup-version-blocked-titel{
    font-size: 1.2em;
    font-weight: bold;
    color: var(--theme-color);
    margin-bottom: 0.6em;
}
#popup-version-blocked-message{
    margin-bottom: 1em;
}
.popup-version-blocked-update-btn{
    display: inline-block;
    padding: 0.6em 1.5em;
    border-radius: 5px;
    background-color: var(--theme-color);
    color: white;
    text-decoration: none;
    cursor: pointer;
}
.popup-version-blocked-alternatief{
    margin-top: 1em;
    font-size: 0.85em;
    color: rgb(120, 120, 120);
}
#popup-error-confirm-message{
    font-size: 18px;
    margin-bottom: 1em;
}
#popup-error-confirm-cancel,
#popup-error-confirm-send{
    display: inline-block;
    padding: 0.6em 1.2em;
    margin: 0.3em;
    border-radius: 5px;
    cursor: pointer;
}
#popup-error-confirm-cancel{
    color: var(--theme-color);
}
#popup-error-confirm-send{
    background-color: rgb(255, 90, 90);
    color: white;
}
.popup-button-close{
    background-image: url('../img/close-square-icon.png');
    background-size: cover;
    background-repeat: no-repeat;
    filter: var(--theme-icon-filter);
    width: 35px;
    height:35px;
    top: 1% !important;
    right: 1% !important;
    position: absolute !important;
    cursor: pointer;
}
.popup-button-save, #popup-tuf-ok, #popup-apof-ok{
    background-image: url('../img/verify-icon-removebg-preview.png');
    background-size: cover;
    background-repeat: no-repeat;
    filter: var(--theme-icon-filter);
    width: 35px;
    height:35px;
    bottom: 0px !important;
    left: 50% !important;
    position: absolute !important;
    margin-left:-17px !important;
    cursor: pointer;
}
.global-loader {
    position: absolute;
    inset: 0;
    background: rgba(255,255,255,0.6);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 900;
}

.global-loader-img {
    width: 32px;
    height: 32px;
}
#popup-inloggen-qr-qrcode{
    left:50%;
    margin-left: -125px;
    position: relative;
}
#popup_inloggen_qr .popup_content{
    height:auto;
}
#popup-error .popup_content{
    height:auto;
}
/* Gezinshuisouders iconengrid op het startscherm */
.hp-gho-wrapper{
    display: flex;
    flex-wrap: wrap;
    gap: 1.2em;
    padding: 1.8em 0 0.2em;
    margin-left: -2em;
    min-height: 4.5em;
}
.hp-gho-item{
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 5.5em;
    text-align: center;
}
.hp-gho-item.hp-gho-self{
    cursor: pointer;
}
.hp-gho-naam{
    margin-top: 0.4em;
    margin-left: -0.9em;
    font-size: 0.7em;
    white-space: nowrap;
    max-width: 100%;
}

/* Top to-do blok op het startscherm */
.hp-todo-wrapper{
    width: 100%;
    margin-left: -1.5em;
}
.hp-todo-item{
    padding: 0.6em 0;
    border-top: 1px solid rgb(165, 165, 165);
    font-size: 0.7em;
    max-height: 15em; /* ruim genoeg voor een uitgeklapt item; dient als "van"-waarde voor onderstaande close-animatie */
    overflow: hidden;
    transition: max-height 0.3s ease, opacity 0.3s ease, padding 0.3s ease, margin 0.3s ease, border-color 0.3s ease;
}
/* klik op het vinkje: eerst rustig laten verdwijnen i.p.v. spontaan weg + volgende
   item dat abrupt omhoog springt (zie close_todo in home-pages.js/todo-page.js) */
.hp-todo-item.hp-todo-item-closing{
    opacity: 0;
    max-height: 0;
    padding-top: 0;
    padding-bottom: 0;
    margin-top: 0;
    margin-bottom: 0;
    border-top-color: transparent;
}
.hp-todo-item:first-child{
    border-top: none;
}
.hp-todo-item-row{
    display: flex;
    align-items: center;
}
.hp-todo-collapse{
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url("../img/btn-arrow-right-removebg.png");
    width: 20px;
    height: 20px;
    min-width: 20px;
    filter: var(--theme-icon-filter);
    cursor: pointer;
}
.hp-todo-titel{
    flex: 1;
    max-width: 75%;
    margin-left: 0.6em;
    word-break: break-word;
    cursor: pointer;
}
.hp-todo-check{
    background-image: url('../img/setactive-inactive-icon-removebg-preview.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    filter: var(--theme-icon-filter);
    width: 28px;
    height: 28px;
    min-width: 28px;
    margin-left: 0.6em;
    cursor: pointer;
    opacity: 0.85;
}
.hp-todo-check.hp-todo-check-processing{
    opacity: 0.3;
    pointer-events: none;
}
/* archief-lijst op de to-do-detailpagina: "actief"-icoon i.p.v. "inactief", klik heropent */
.hp-todo-check.hp-todo-check-archief{
    background-image: url('../img/setactive-active-icon-removebg-preview.png');
}
.hp-todo-header{
    cursor: pointer;
}
/* Actiemenu-items op het homescherm - geen eigen class, dus direct op id */
#hp-section-bevestig-inlog, #hp-section-new-device, #hp-section-protocollen{
    cursor: pointer;
}
.hp-todo-instructie{
    display: none; /* pas zichtbaar na uitklappen (zie toggle_expand in home-pages.js) */
    margin-left: 1.7em;
    margin-top: 0.3em;
    cursor: pointer;
}
.hp-todo-empty{
    font-size: 0.9em;
    color: rgb(120, 120, 120);
}
#todo-section-archief{
    color:rgb(120, 120, 120);
}
/* Gezinshuisouder detailscherm */
#gho-detail-page .section-content,
#gh-naam-detail-page .section-content{
    /* .section-content schuift 3.5em naar rechts zonder de breedte te compenseren;
       op smalle schermen (bv. 414px) loopt de inhoud daardoor rechts uit beeld */
    width: calc(92% - 3.5em);
}
.gho-detail-foto-wrapper{
    display: flex;
    justify-content: center;
    padding: 0.5em 0 1em;
}
/* .kid-foto wordt ook (vaker) gebruikt waar 'ie NIET klikbaar is, dus hier
   specifiek op de twee plekken waar een klik de foto-upload-popup opent */
#gho-detail-foto, #section-mijn-kd-foto{
    cursor: pointer;
}
.gho-detail-field{
    padding: 0.4em 0;
}
.gho-detail-label{
    font-size: 0.75em;
    color: grey;
}
.gho-detail-editable{
    font-size: 1em;
    cursor: pointer;
    border-bottom: 1px solid var(--theme-color);
    padding: 0.2em 0;
    min-height: 1.2em;
}
.gho-detail-editable input{
    border: none;
    font-size: 1em;
    width: 100%;
    outline: none;
}
#gho-detail-save, #gh-naam-detail-save {
	appearance: none;
	border: 1px solid var(--theme-color);
	background: transparent;
	color: var(--theme-color);
	border-radius: 15px;
	font-weight: 500;
	padding: 0.5rem 1rem;
	font-size: 0.8rem;
	cursor: pointer;
	letter-spacing: .01em;
    margin-top: 1em;
    display: inline-block;
}
.gho-detail-save-disabled{
    border: 1px solid grey !important;
    color: grey !important;
    cursor: default !important;
}
#gho-detail-access-log-list{
    min-height: 3em;
}
.gho-detail-access-log-row{
    font-size: 0.85em;
    padding: 0.2em 0;
}
.gho-detail-access-log-failed{
    color: rgb(200, 60, 60);
}
.gho-theme-swatches{
    display: flex;
    justify-content: center;
    gap: 1em;
    padding: 0.5em 0;
}
.gho-theme-swatch{
    width: 2em;
    height: 2em;
    border-radius: 50%;
    border: 1px solid rgb(200, 200, 200);
    cursor: pointer;
}
.gho-theme-swatch-selected{
    border: 3px solid rgb(80, 80, 80);
}
.gho-theme-swatch-orange{
    background-color: rgb(237, 125, 49);
}
.gho-theme-swatch-blue{
    background-color: rgb(43, 120, 230);
}
.gho-theme-swatch-black{
    background-color: rgb(20, 20, 20);
}
.gho-theme-swatch-purple{
    background-color: rgb(147, 51, 234);
}
.gho-theme-swatch-green{
    background-color: rgb(34, 160, 90);
}
.gho-theme-swatch-red{
    background-color: rgb(220, 53, 53);
}

/* Gezinshuisouder foto-popup — zelfde layout als popup-apotheekfoto */
#popup-ghof-display_image-container{
    display: flex;
    margin-left: 30%;
}
#popup-ghof-display_image{
    position: relative;
    margin-top: 1.5em;
    margin-left: 1.5em;
    border: 1px solid;
    border-radius: 50%;
    overflow: hidden;
    height: 75px;
    width: 75px;
    background-size: contain;
    border-color: var(--theme-color);
    background-repeat: no-repeat;
}
#popup-ghof-take-picture{
    background-image: url("../img/camera-removebg-preview.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    filter: var(--theme-icon-filter);
}
#popup-ghof-media-upload{
    background-image: url("../img/popup-tuf-display_image_blank.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 120%;
    filter: var(--theme-icon-filter);
}
#popup-ghof-ok{
    background-image: url("../img/verify-icon-removebg-preview.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    filter: var(--theme-icon-filter);
}
#popup-ghof-image_input{
    display: none;
}

#popup-inloggen-qr-qrcode-header, #popup-inloggen-qr-qrcode-status{
    text-align: center;
}

/* Mededeling (gepland onderhoud e.d.) en feedbackvraag op het homescherm,
   zie home-pages.js: check_mededeling_feedback() */
.popup-mededeling-content,
.popup-feedback-content{
    max-width: 28em;
    margin: 0 auto;
    padding: 1.2em 1.4em;
    box-sizing: border-box;
    border-radius: 12px;
    box-shadow: 0 8px 30px rgba(0,0,0,0.18);
    /* .popup_content zelf heeft een vaste height:25% - zonder deze override liep
       langere tekst gewoon door buiten de kaart i.p.v. dat de kaart meegroeide */
    height: auto;
    max-height: 80vh;
    overflow-y: auto;
}
.popup-mededeling-titel,
.popup-feedback-titel{
    font-weight: bold;
    font-size: 1em;
    color: var(--theme-color);
    margin-bottom: 0.6em;
    padding-bottom: 0.5em;
    border-bottom: 1px solid rgb(230, 230, 230);
}
.popup-mededeling-tekst{
    white-space: pre-wrap;
    font-size: 0.9em;
    line-height: 1.5em;
}
.popup-feedback-titel{
    text-align: center;
}
.popup-feedback-sterren{
    display: flex;
    justify-content: center;
    gap: 0.3em;
    margin: 0.8em 0 1em;
}
.popup-feedback-ster{
    font-size: 2em;
    line-height: 1;
    color: rgb(210, 210, 210);
    cursor: pointer;
}
.popup-feedback-ster::before{
    content: "★";
}
.popup-feedback-ster-actief{
    color: var(--theme-color);
}
.popup-feedback-label{
    font-size: 0.85em;
    color: rgb(120, 120, 120);
    margin-bottom: 0.3em;
}
.popup-feedback-toelichting{
    display: block;
    width: 100%;
    min-height: 4em;
    box-sizing: border-box;
    padding: 0.3em 0.4em;
    font: inherit;
    resize: vertical;
}