/*
//hiero: Optional visual refresh for the operator home page.
Rollback: remove the operator_refresh.css include from home.php or empty this file.
This file must only change presentation; keep page behavior in PHP/JS unchanged.
*/
html,
body
        {
        background:#ffffff;
        }
#hoofd,
#hoofd2
        {
        background:#ffffff;
        /* //hiero: #hoofd2 moet visueel wit blijven zoals de bestaande pagina. */
        }
#hoofd2
        {
        padding-top:18px;
        }
#service_workflow
        {
        background:#ffffff;
        border:1px solid #d9dee6;
        border-radius:8px;
        box-shadow:0 8px 24px rgba(22, 34, 51, 0.10);
        padding:12px 14px;
        }
#workflow
        {
        /* //hiero: Workflow-kaders visueel losmaken met lichtgrijze achtergrond en slagschaduw. */
        background:#efefef;
        border:1px solid #c3cad4;
        border-radius:6px;
        box-shadow:0 2px 5px rgba(24, 36, 52, 0.24);
        /* //hiero: Breedte workflow-vensters terug naar originele CSS; versmalde override verwijderd. */
        margin:3px auto 5px auto;
        }
#browsable.scrollable
        {
        /* //hiero: Rechts volgende workflowpagina blijven verbergen, maar verticale workflow-schaduw ruimte geven. */
        /* background:#ffffff; */
        overflow-x:hidden;
        overflow-y:visible;
        padding:1px 0 3px 0;
        }
#workflow_nav,
#workflow_nav_bol
        {
        width:90%;
        }
#workflow_nav_bol
        {
        /* //hiero: Paginapuntjes onder de workflow-kaders houden, niet door het onderste kader heen. */
        margin:-122px auto 0 auto;
        bottom:-105px;
        }
#workflow_nav_bol a
        {
        border-radius:50%;
        box-shadow:0 1px 3px rgba(0, 0, 0, 0.18);
        }
#workflow_nav_prec_next_left,
#workflow_nav_prec_next_right
        {
        background:#c90000;
        box-shadow:0 6px 14px rgba(0, 0, 0, 0.18);
        }
.workflow_onscreen_checker
        {
        border-radius:8px;
        }
.button_design,
.button_design_xcc,
.button_design_saas
        {
        border-radius:6px;
        border:1px solid #c4cad2;
        box-shadow:none;
        min-height:20px;
        transition:background-color 120ms ease, border-color 120ms ease, box-shadow 120ms ease;
        }
.button_design:hover,
.button_design_xcc:hover,
.button_design_saas:hover
        {
        box-shadow:0 2px 7px rgba(0, 0, 0, 0.16);
        }
.button_design_auto
        {
        border-radius:50%;
        box-shadow:0 3px 8px rgba(0, 0, 0, 0.22), inset 0 0 0 4px rgb(108, 175, 61);
        transition:box-shadow 120ms ease, transform 120ms ease;
        }
.button_design_auto:hover
        {
        transform:translateY(-1px);
        box-shadow:0 5px 12px rgba(0, 0, 0, 0.25), inset 0 0 0 4px rgb(108, 175, 61);
        }
.tbody_border,
.tbody_border tr td,
.td_top_border,
.td_bottom_border,
.td_left_border,
.td_right_border,
.td_left_right_border
        {
        border-color:#d8dde5;
        }
.NoBorder,
.NoBorder tr,
.NoBorder tr td:last-child,
.NoBorder tr td:first-child
        {
        border:none;
        }
#chat-button
        {
        /* //hiero: Kleine subtiele slagschaduw onder ColorChat zonder verdere knopstyling te wijzigen. */
        box-shadow:0 2px 6px rgba(0, 0, 0, 0.32);
        }













#overlay_Upload_error,
#overlay_show_project,
#overlay_security,
#overlay
        {
        /* //hiero: Apple overlay schaduw donkerder maken zonder overlay-werking te wijzigen. */
        -moz-box-shadow:0 0 12px 1px #505050;
        -webkit-box-shadow:0 0 12px 1px #505050;
        box-shadow:0 0 12px 1px #505050;
        }
table.Workflow_Database
        {
        /* //hiero: Workflow database tabel wit houden binnen de lichtgrijze workflow-kaart en subtiel losmaken. */
        background:#ffffff;
        box-shadow:0 2px 5px rgba(24, 36, 52, 0.18);
        /* //hiero: Vaste tabelbreedte voorkomt dat lange projectteksten de workflow-kolommen oprekken. */
        table-layout:fixed;
        /* //hiero: Tabel iets smaller houden zodat de grijze workflow-rand rechts zichtbaar blijft. */
        width:calc(100% - 8px);
        }
table.Workflow_Database tr,
table.Workflow_Database td
        {
        background:#ffffff;
        }
table.Workflow_Database td
        {
        /* //hiero: Lange workflowteksten afkappen zodat er geen horizontale scrollbar ontstaat. */
        overflow:hidden;
        text-overflow:ellipsis;
        white-space:nowrap;
        }
table.Workflow_Database td:nth-child(1)
        {
        /* //hiero: Kolomverdeling teruggezet naar de oorspronkelijke workflow-weergave. */
        width:70px;
        }
table.Workflow_Database td:nth-child(2)
        {
        /* //hiero: Naamkolom weer breder maken zoals in de oude workflow-tabel. */
        width:80px;
        }
table.Workflow_Database td:nth-child(3)
        {
        /* //hiero: Typekolom compact houden en alleen lange teksten afkappen. */
        width:92px;
        }
table.Workflow_Database td:nth-child(4)
        {
        /* //hiero: Lege workflowkolom terug naar de oude verhouding. */
        width:52px;
        }
table.Workflow_Database td:nth-child(5)
        {
        /* //hiero: Actiekolom ruim houden zodat knoppen zoals Download en Gestopt passen. */
        width:100px;
        }
table.Workflow_Database .button_design
        {
        /* //hiero: Workflow-knoppen binnen hun cel houden zonder de kolomverdeling te veranderen. */
        box-sizing:border-box;
        margin-right:0;
        max-width:100%;
        min-width:0;
        padding-left:6px;
        padding-right:6px;
        width:100%;
        }
#footer
        {
        /* //hiero: Footer iets lager zetten op de operator home pagina zonder theme-CSS aan te passen. */
        margin-top:12px;
        }


/* //hiero: Volledige ColorChat-knopstijl rechtstreeks overgenomen uit website_default_expert.css. */
/* Badge-stijling ColorChat */ 
#chat-button {
        position: fixed;
        bottom: 45px;
        right: 45px;
        background-color: rgb(204, 0, 0);
        color: white;
        /* padding: 10px 15px; */
        /* border-radius: 25px; */
        /* //hiero: ColorChat als ronde 44px knop tonen en het FA7-icoon exact centreren. */
        display: flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        padding: 0;
        box-sizing: border-box;
        border-radius: 50%;
        cursor: pointer;
        z-index: 9999;
        /* //hiero: De ronde ColorChat-knop een duidelijk zichtbare slagschaduw geven. */
        box-shadow: 0 3px 8px rgba(0, 0, 0, 0.38);
        /* //hiero: Oude zwarte operatorrand uitschakelen zodat de knop exact als de Expert-knop wordt getoond. */
        border: none;
        }

#chat-button .fa-comment-dots {
        /* //hiero: Het FA7 comment-dots icoon groter tonen binnen de ronde chatknop. */
        font-size: 22px;
        line-height: 1;
        /* //hiero: Het chat-icoon dezelfde handcursor geven als de klikbare ronde knop erachter. */
        cursor: pointer;
        }
  #chat-button .badge { /* //29-07-25 */
        position: absolute;
        top: -6px;
        right: -6px;
        /* background: rgb(255, 0, 0); */
        /* color: white; */
        /* //hiero: Foutbadge wit tonen met een rode omlijning en een rood uitroepteken. */
        background: #ffffff;
        color: #c90000;
        border: 2px solid #c90000;
        box-sizing: border-box;
        font-weight: bold;
        width: 20px;
        height: 20px;
        font-size: 14px;
        /* line-height: 20px; */
        /* //hiero: Het rode uitroepteken binnen de badge exact centreren. */
        display: flex;
        align-items: center;
        justify-content: center;
        line-height: 1;
        border-radius: 50%;
        cursor: pointer;
        text-align: center;
        pointer-events: auto;
        }
#chatbox.colorchat_box {
        /* //hiero: Chatbox rechts boven de ronde knop uitlijnen en dezelfde panelstijl geven als de nieuwe Expert-layout. */
        position: fixed;
        right: 30px;
        bottom: 100px;
        width: 300px;
        height: 430px;
        box-sizing: border-box;
        /* overflow: hidden; */
        /* //hiero: InfoBox moet links buiten de chatbox zichtbaar kunnen openen. */
        overflow: visible;
        background: #efefef;
        border: 1px solid #c3cad4;
        border-radius: 8px;
        box-shadow: 0 5px 16px rgba(24, 36, 52, 0.28);
        z-index: 9999;
        }

#chatbox .colorchat_header {
        /* //hiero: Rustige compacte chatheader met vaste uitlijning voor titel en acties. */
        display: flex;
        align-items: center;
        justify-content: space-between;
        min-height: 42px;
        padding: 6px 8px 6px 12px;
        box-sizing: border-box;
        background: rgb(204, 0, 0);
        color: #ffffff;
        border-radius: 7px 7px 0 0;
        }

#chatbox .colorchat_header_title,
#chatbox .colorchat_header_actions {
        display: flex;
        align-items: center;
        gap: 6px;
        }

#chatbox .colorchat_header_title {
        font-size: 12px;
        font-weight: bold;
        }

#chatbox .colorchat_header_button {
        /* //hiero: Headeracties als gelijk uitgelijnde ronde icoonknoppen tonen. */
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 24px;
        height: 24px;
        box-sizing: border-box;
        border: 1px solid rgba(255, 255, 255, 0.72);
        border-radius: 50%;
        color: #ffffff;
        /* //hiero: Ronde headerknop als positioneringsanker gebruiken om het FA7-icoon exact te centreren. */
        position: relative;
        padding: 0;
        line-height: 1;
        cursor: pointer;
        }

#chatbox #infoIcon.colorchat_header_button {
        /* //hiero: Info-knop een volledig witte ronde rand en een witte losse i geven. */
        border-color: #ffffff;
        color: #ffffff;
        }
#chatbox .colorchat_header_button:hover {
        background: rgba(255, 255, 255, 0.16);
        border-color: #ffffff;
        }

#chatbox .colorchat_header_button .fa-solid {
        /* //hiero: FA7-glyph onafhankelijk van de tekstbaseline exact in het midden van de ronde knop plaatsen. */
        position: absolute;
        top: 53%;
        left: 49%;
        display: block;
        width: 14px;
        height: 14px;
        font-size: 13px;
        line-height: 14px;
        text-align: center;
        transform: translate(-50%, -50%);
        cursor: pointer;
        }

#chatbox .colorchat_messages {
        /* //hiero: Berichten een rustige witte leesruimte geven binnen het grijze chatpaneel. */
        height: 328px;
        padding: 12px;
        box-sizing: border-box;
        overflow-y: auto;
        background: #ffffff;
        border-bottom: 1px solid #d5dae1;
        font-size: 13px;
        line-height: 1.4;
        }

#chatbox .colorchat_input_row {
        display: flex;
        align-items: center;
        gap: 8px;
        height: 58px;
        padding: 10px;
        box-sizing: border-box;
        }

#chatbox .colorchat_input {
        /* //hiero: Chatinvoer laten aansluiten op de compacte invoervelden van de nieuwe layout. */
        flex: 1;
        min-width: 0;
        height: 34px;
        padding: 0 10px;
        box-sizing: border-box;
        border: 1px solid #b9c1cc;
        border-radius: 4px;
        background: #ffffff;
        color: #20252b;
        font-size: 13px;
        outline: none;
        }

#chatbox .colorchat_input:focus {
        border-color: #7d8997;
        box-shadow: 0 0 0 2px rgba(125, 137, 151, 0.16);
        }

#chatbox .colorchat_send_button {
        /* //hiero: Verzenden als vaste ronde rode FA7-icoonknop tonen zonder layoutverschuiving. */
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 34px;
        width: 34px;
        height: 34px;
        padding: 0;
        box-sizing: border-box;
        border: 1px solid #a90000;
        border-radius: 50%;
        /* //hiero: Ronde verzendknop als positioneringsanker gebruiken voor exacte icooncentrering. */
        position: relative;
        background: rgb(204, 0, 0);
        color: #ffffff;
        cursor: pointer;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
        }

#chatbox .colorchat_send_button:hover {
        background: #b80000;
        }

#chatbox .colorchat_send_button .fa-solid {
        /* //hiero: Paper-plane glyph exact in het midden van de ronde verzendknop plaatsen. */
        position: absolute;
        top: 54%;
        left: 47%;
        display: block;
        width: 16px;
        height: 16px;
        font-size: 14px;
        line-height: 16px;
        text-align: center;
        transform: translate(-50%, -50%);
        cursor: pointer;
        }

#chatbox #infoBox {
        /* //hiero: Informatiepaneel visueel laten aansluiten op het vernieuwde chatpaneel. */
        border-color: #c3cad4 !important;
        border-radius: 6px !important;
        box-shadow: 0 4px 12px rgba(24, 36, 52, 0.24) !important;
        font-size: 12px;
        line-height: 1.4;
        }

@media (max-width: 600px) {
        #chatbox.colorchat_box {
                right: 12px;
                bottom: 94px;
                width: calc(100vw - 24px);
                max-width: 340px;
                }
        }

/* //hiero: Alle gedeelde operator-overlays gebruiken de nieuwe ronde FA7-closeknop in plaats van close2.png. */
#overlay.apple_overlay > .close {
        right: -12px;
        top: -12px;
        width: 24px;
        height: 24px;
        box-sizing: border-box;
        border: 1px solid #9aa7b5;
        border-radius: 50%;
        background: #ffffff !important;
        background-image: none !important;
        color: #2f3a46;
        cursor: pointer;
        box-shadow: 0 2px 6px rgba(32, 43, 56, 0.25);
        font-size: 0;
        text-align: center;
}
#overlay.apple_overlay > .close::before {
        content: "\f00d";
        display: block;
        font-family: "Font Awesome 7 Free";
        font-size: 13px;
        font-weight: 900;
        line-height: 22px;
}
#overlay.apple_overlay > .close:hover {
        border-color: #6f7d8c;
        background: #e5e8ec !important;
        color: #17212b;
}
/* //hiero: Gebruikersmenu compact en consistent vormgeven zonder de bestaande OEM-headerpositie te overschrijven. */
#User.user_menu {
        min-width: 185px;
        color: #2f3a46;
        font: 13px Arial, Helvetica, sans-serif;
        cursor: default;
        z-index: 10020;
}
#User.user_menu_oem_2 {
        position: relative;
}
#User .user_menu_trigger {
        display: flex;
        align-items: center;
        gap: 8px;
        min-height: 32px;
        padding: 0 10px;
        box-sizing: border-box;
        border: 1px solid #c3cad4;
        border-radius: 5px;
        background: #efefef; /* //hiero: Zichtbare gebruikersknop dezelfde grijze achtergrond geven als de nieuwe vensters. */
        box-shadow: 0 2px 5px rgba(32, 43, 56, 0.16);
        cursor: pointer;
}
#User .user_menu_trigger > .fa-circle-user {
        flex: 0 0 auto;
        color: #596675;
        font-size: 16px;
}
#User .user_menu_name {
        flex: 1 1 auto;
        min-width: 0;
        overflow: hidden;
        color: #2f3a46;
        font-weight: 600;
        text-overflow: ellipsis;
        white-space: nowrap;
}
#User .user_menu_chevron {
        flex: 0 0 auto;
        color: #6c7784;
        font-size: 10px;
        transition: transform 120ms ease;
}
#User:hover .user_menu_chevron {
        transform: rotate(180deg);
}
#User #drop.user_menu_dropdown {
        display: none;
        position: absolute;
        top: 100%;
        right: 0;
        width: 100%;
        min-width: 185px;
        padding: 6px;
        box-sizing: border-box;
        border: 1px solid #c3cad4;
        border-radius: 0 0 6px 6px;
        background: #ffffff;
        box-shadow: 0 5px 14px rgba(32, 43, 56, 0.22);
        z-index: 10021;
}
#User .user_menu_form {
        margin: 0;
        padding: 0;
}
#User .user_menu_form + .user_menu_form {
        margin-top: 5px;
}
#User .user_menu_action.button_design {
        display: flex;
        align-items: center;
        gap: 8px;
        width: 100%;
        height: 30px;
        margin: 0;
        padding: 0 10px;
        box-sizing: border-box;
        border: 1px solid transparent;
        border-radius: 4px;
        background: #f2f3f5;
        color: #303943;
        font: 12px Arial, Helvetica, sans-serif;
        text-align: left;
        cursor: pointer;
}
#User .user_menu_action.button_design:hover {
        border-color: #c3cad4;
        background: #e6e9ed;
}
#User .user_menu_action .fa-solid {
        width: 16px;
        color: #596675;
        text-align: center;
}
/* //hiero: Gebruikersmenu compacter maken en op OEM 2 boven de rode scheidingslijn centreren. */
#User.user_menu {
        min-width: 165px;
        font-size: 12px;
}
/* //hiero: OEM 2-menu onder de rode lijn zetten; JavaScript lijnt de rechterrand met het workflowvenster uit. */
#User.user_menu_oem_2 {
        position: absolute;
        top: 75px; /* //hiero: Gebruikersmenu op verzoek op 75px plaatsen. */
        right: auto;
        bottom: auto;
        left: 0; /* //hiero: JavaScript lijnt deze fallbackpositie uit op de rechterrand van #service_workflow. */
        float: none;
}
#User .user_menu_trigger {
        gap: 6px;
        min-height: 27px;
        padding: 0 8px;
}
#User .user_menu_trigger > .fa-circle-user {
        font-size: 14px;
}
#User .user_menu_name {
        text-align: center;
}
#User #drop.user_menu_dropdown {
        min-width: 165px;
        padding: 5px;
}
#User .user_menu_action.button_design {
        gap: 6px;
        height: 27px;
        padding: 0 8px;
        font-size: 11px;
}
/* //hiero: Operator en Expert dezelfde paginabasis geven zodat body en footer niet verspringen bij omschakelen. */
html {
        overflow-y: auto; /* //hiero: Scrollbar alleen tonen wanneer de pagina werkelijk hoger is dan het venster. */
        scrollbar-gutter: auto; /* //hiero: Geen witte gereserveerde strook tonen wanneer er geen scrollbar aanwezig is. */
}
html,
body {
        width: 100%;
        height: 100%;
        background: #ffffff;
}
body {
        color: #575757;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 10.5px;
        line-height: 1.22;
}
#hoofd2 {
        box-sizing: border-box;
        width: 95%;
        min-width: 1300px;
        max-width: 1300px;
        height: 740px;
        margin: -40px auto 0;
        padding-top: 18px;
}
#footer {
        width: 100%;
        height: 12px; /* //hiero: OEM operator- en Expert-footer exact dezelfde hoogte geven. */
        margin-top: 12px;
        box-sizing: border-box;
}
#Copyright_position {
        top: 12px;
        min-width: 1300px;
        max-width: 1300px;
        box-sizing: border-box;
}
/* //hiero: Dezelfde volledige PNG-achtergrond als home_service.php uitsluitend via operator_refresh.css activeren. */
html {
        min-width: 1300px;
        min-height: 100%;
        background: #f7f8fa;
}
body {
        min-width: 1300px;
        min-height: 100%;
        background-color: #f7f8fa;
        background-image: url('../images/background_xcc.png?v=2026072803');
        background-repeat: no-repeat;
        background-position: center top;
        background-size: cover;
        background-attachment: fixed;
}
/* //hiero: Oude effen Operator-paginavlakken transparant maken zodat de PNG overal zichtbaar blijft. */
#pageheader,
#pagecenter,
#hoofd2,
#footer,
#Copyright_position,
#Copyright {
        background-color: transparent;
}
#pageheader {
        height: 96px; /* //hiero: Zelfde compacte headerhoogte als home_service.php. */
}
#hoofd2 {
        box-sizing: border-box;
        width: 95%;
        min-width: 1300px;
        max-width: 1300px;
        height: 790px;
        margin: -30px auto 0;
        padding-top: 18px;
        border-top: 0; /* //hiero: Rode lijn komt uit background_xcc.png en mag niet dubbel worden getekend. */
}
/* //hiero: Operator-logo's exact gelijk plaatsen aan de actuele Expert-header. */
#logo-left {
        top: -47px;
        left: 18px;
        width: 220px;
        height: 52px;
        background-size: 205px auto;
}
#logo-right {
        top: -40px;
        left: 255px;
        width: calc(100% - 273px);
        height: 48px;
        margin-left: 0;
        color: #000000;
        font-size: 30px;
        line-height: 44px;
}
/* //hiero: Operator-usermenu dezelfde verticale positie geven als het Expert-usermenu. */
#User.user_menu_oem_2 {
        top: 35px;
}
/* //hiero: Chatknop qua positie en icoongrootte gelijkmaken aan home_service.php. */
#chat-button.colorchat_button {
        right: 25px;
        bottom: 25px;
}
#chat-button.colorchat_button .fa-comment-dots {
        font-size: 24px;
}
/* //hiero: Chatvenster dezelfde vaste aansluiting boven de chatknop geven als home_service.php. */
#chatbox.colorchat_box {
        right: 20px;
        bottom: 80px;
}
/* //hiero: Footer en copyright exact op de actuele Expert-posities zetten. */
#footer {
        margin-top: 10px;
}
#Copyright_position {
        top: -2px;
}
#Copyright {
        color: #30363d;
}
/* //hiero: Het volledige operator-workflowvenster iets omlaag plaatsen zonder de interne workflowposities te wijzigen. */
#workflow_overview {
        margin: 12px auto 0;
}
/* //hiero: XeikonColorControl horizontaal in het midden van de operatorheader plaatsen; usermenu blijft apart rechts uitgelijnd. */
#logo-right {
        left: 0;
        width: 100%;
        text-align: center;
}
/* //hiero: Gecentreerde XeikonColorControl-headertekst iets groter tonen met behoud van verticale uitlijning. */
#logo-right {
        font-size: 45px; /* //hiero: XeikonColorControl op verzoek op 45px tonen. */
        line-height: 48px;
}
/* //hiero: Serverchecktabel compact en op beide pagina's identiek tonen, los van de grote Workflow_Database-tabellen. */
#servercheck_popup {
        width:max-content;
        max-width:calc(100% - 120px);
        box-sizing:border-box;
        /* //hiero: Servercheck-popup laten aansluiten op de nieuwe site met afgeronde hoeken en subtiele slagschaduw. */
        padding:4px;
        border:1px solid #c3cad4 !important;
        border-radius:7px;
        background:#ffffff;
        box-shadow:0 3px 10px rgba(24, 36, 52, 0.20);
        overflow:hidden;
}
#servercheck_popup table.Servercheck_Database {
        width:auto;
        margin:0;
        border:0;
        border-collapse:collapse;
        table-layout:auto;
        background:#ffffff;
        box-shadow:none;
}
#servercheck_popup table.Servercheck_Database td {
        padding:2px 5px;
        border:1px solid #c0c0c0;
        background:#ffffff;
        text-align:left;
        white-space:nowrap;
}