/********************************      Basic Structure      ********************************/

html {
    font-size: 100%;
    height: 100%;
    margin-bottom: 1px; /* Always show a scrollbar to avoid jumping when the scrollbar appears  */
}

body {
    font-family: Arial, Helvetica, sans-serif;
    color: #555;
    background: #f0f0f0 url('../gfx/bg-body.gif') top left repeat-y;
    font-size: 14px;
    /**letter-spacing:0.7px;*/
}

#body-wrapper {
    background: url('../gfx/bg-radial-gradient.gif') fixed 230px top no-repeat;
}

/********************************      Elements styling      ********************************/

h1, h2, h3, h4, h5, h6 {
    font-family: Helvetica, Arial, sans-serif;
    color: #555;
    /*font-weight: bold;*/
}

h1 {
    font-family: Calibri, Helvetica, Arial, sans-serif;
    font-size: 31px;
    font-weight: bold;
    color: #fff;
    position: absolute;
    top: -1000px; /* Remove this line and delete the logo (in the HTML) if you don't want an image as a logo */
}

h2 {
    font-size: 26px;
    padding: 0 0 10px 0;
}

h3 {
    font-size: 17px;
    padding: 0 0 10px 0;
}

h4 {
    font-size: 16px;
    padding: 0 0 5px 0;
    margin-bottom:10px;
}

h5 {
    font-size: 14px;
    padding: 0 0 5px 0;
}

h6 {
    font-size: 12px;
    padding: 0 0 5px 0;
}


a {
    color: #57a000;
    text-decoration: none;
}

    a:active {
        color: #777;
    }

    a:focus {
        outline: 1px;
    }

    a:not(.button):hover {
        color: #274700;
    }

strong {
    font-weight: bold;
    /**color: #333;*/
}

small {
    font-size: 0.85em;
}

pre {
    font-family: monospace;
}

p {
    padding: 5px 0 10px 0;
    line-height: 1.6em;
}

/********************************      General Classes      ********************************/

.clear {
    clear: both;
}

.align-left {
    float: left;
}

.align-right {
    float: right;
}

/************ Button ************/
.button, .buttonimportant, .buttonsuperimportant {
    padding: 10px 20px;
   
    background: #f9fafb;
    border: 1px solid #e5e7eb;
  
    color: #374151;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
    text-transform: uppercase;
    transition: all 0.2s ease;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 500;
    display:inline-block;
}

    .button:hover, .button:focus, .buttonimportant:hover, .buttonimportant:focus, .buttonsuperimportant:hover, .buttonsuperimportant:focus {
        filter: brightness(90%);
        transform: translateY(-1px);
        text-decoration: none;
    }


.buttonimportant {
    text-transform: uppercase;
    color: #FFFFFF !important;
    background-color: #57a000;
}

.buttonsuperimportant {
    text-transform: uppercase;
    color: #FFFFFF;
    background-color: #57a000;
}


a.remove-link {
    color: #bb0000;
}

    a.remove-link:hover {
        color: #000;
    }

/********************************      Sidebar      ********************************/

#sidebar {
    /**background: url('../gfx/bg-sidebar.gif') top left no-repeat;*/
    width: 180px;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    color: #888;
    font-size: 11px;
}

    #sidebar a,
    #sidebar a:active {
        color: #ccc;
    }

        #sidebar a:hover {
            color: #fff;
        }

    #sidebar #sidebar-title {
        margin: 40px 0 40px 15px;
    }

    #sidebar #logo {
        margin: 40px 0 40px 0;
    }

    #sidebar #profile-links {
        padding: 0 15px 20px 15px;
        text-align: right;
        line-height: 1.5em;
    }

    /************ Sidebar Accordion Menu ************/


    #sidebar #main-nav li {
        list-style: none;
        padding-bottom: 10px;
        text-align: right;
    }

        #sidebar #main-nav li a.nav-top-item {
            background: transparent url('../gfx/bg-menu-item-green.gif') right center no-repeat; /* Background image for default color scheme - green */
            padding: 10px 15px;
            color: #fff;
            font-size: 14px;
            cursor: pointer;
            display: block;
            text-decoration: none;
        }

        #sidebar #main-nav li a.current {
            background-image: url('../gfx/bg-menu-item-current.gif') !important;
            color: #333;
            font-weight: bold;
        }

            #sidebar #main-nav li a.current:hover {
                color: #333;
            }

    #sidebar #main-nav ul {
        padding: 0;
        font-size: 12px;
        margin: 0;
    }

        #sidebar #main-nav ul li {
            list-style: none;
            margin: 0;
            text-align: right;
            padding: 0;
        }

            #sidebar #main-nav ul li a {
                padding: 8px 15px;
                display: block;
                color: #aaa;
                font-size: 13px;
                line-height: 1.2em;
            }

                #sidebar #main-nav ul li a:hover,
                #sidebar #main-nav ul li a.current,
                #sidebar #main-nav ul li a.current:hover {
                    color: #fff;
                }

                #sidebar #main-nav ul li a.current {
                    background: transparent url('../gfx/menu-current-arrow.gif') right center no-repeat !important;
                }

    #sidebar #main-nav:last-child {
        margin-bottom: 30px;
    }

/************ Messages ************/

#messages p,
#messages form {
    border-top: 1px solid #ddd;
    padding: 10px 0;
}

#messages h4 {
    padding: 10px 0;
}

#messages fieldset {
    margin: 0;
}

#messages textarea {
    margin: 0 0 15px 0;
}
/********************************      Main Content      ********************************/

/************ Layout ************/

#main-content {
    margin: 0 0 0 190px;
    padding: 15px 15px 0 0;
}

.column-left {
    width: 48%;
    float: left;
}

.column-right {
    width: 48%;
    float: right;
}

    .column-right img {
        max-width: 150px;
        height: auto;
    }

#page-intro {
    font-size: 17px;
    padding: 0 0 20px 0;
    display: none;
}

#page-intro-dashboard {
    font-size: 17px;
    padding: 0 0 20px 0;
}

.page-intro {
    font-size: 17px;
    padding: 0 0 20px 0;
    display: none;
}


#footer {
    border-top: 1px solid #ccc;
    margin: 40px 0 0 0;
    padding: 20px 0;
    font-size: 12px;
}
/************ Lists ************/

#main-content ul,
#main-content ol {
    padding: 0px 0px 105px 0px;
}

/* Unordered List */

/**
    #main-content ul li {
        background: url('../gfx/icons/bullet_black.png') center left no-repeat;
        padding: 4px 0 4px 20px;
    }
        */

/* Ordered List */

#main-content ol {
    padding: 0 0 0 24px;
}

    #main-content ol li {
        list-style: decimal;
        padding: 4px 0;
    }

/*************** Content Box ***************/

.content-box {
    border: 1px solid #ccc;
    margin: 0 0 20px 0;
    background: #fff;
    min-width:fit-content;
}

.content-box-header {
    /**background: #e5e5e5 url('../gfx/bg-content-box.gif') top left repeat-x;*/
    margin-top: 1px;
    height: 40px;
    background-color: #F8F9FA;
}

    .content-box-header h3 {
        padding: 12px 15px 10px;
        float: left;
    }

ul.content-box-tabs {
    float: left;
    padding: 8px 0 0 15px !important;
    margin: 0 !important;
}

    ul.content-box-tabs li {
        float: left;
        margin: 0;
        padding: 0 !important;
        background-image: none !important;
    }

        ul.content-box-tabs li a {
            color: #333;
            padding: 8px 10px;
            display: block;
            margin: 1px;
            border-bottom: 0;
        }

            ul.content-box-tabs li a:hover {
                border-top: 1px solid #D1D5E4;
                border-left: 1px solid #D1D5E4;
                border-right: 1px solid #D1D5E4;
                border-radius:4px;
            }

            ul.content-box-tabs li a:hover {
                color: #57a000;
            }

            ul.content-box-tabs li a.current {
                border: 1px solid #ccc;
                border-bottom: 0;
                margin: 0;
            }

.content-box-content {
    padding: 15px;
    font-size: 14px;
    border-top: 1px solid #ccc;
}

/************ Table ************/

#main-content table {
    width: 100%;
    border-collapse: collapse;
}

    #main-content table th {
        font-weight: bold;
        /**font-size: 15px;**/
        border-bottom: 1px solid #ddd;
        /**text-transform:capitalize;*/
        white-space: nowrap;
    }

        #main-content table th::first-letter {
            text-transform: uppercase;
        }

#main-content tbody {
    /*border-bottom: 1px solid #ddd;*/
}

#main-content table:not(.datatable) tbody tr {
    background: #fff;
}

    #main-content table:not(.datatable) tbody tr:nth-child(even) {
        background: #f8f9fa;
    }

    #main-content table:not(.datatable) tbody tr th {
        background: #F9FAFB;
        border-top: 1px solid #D1D5E4;
        border-bottom: 1px solid #D1D5E4;
    }

        #main-content table:not(.datatable) tbody tr th:first-child {
            border-left: 1px solid #D1D5E4;
        }

        #main-content table:not(.datatable) tbody tr th:last-child {
            border-right: 1px solid #D1D5E4;
        }
        
        #main-content table:not(.datatable) tbody tr th:first-child:has(input[type="checkbox"]),
        #main-content table:not(.datatable) tbody tr th:first-child:has(input[type="radio"]) {
            border: 1px solid #D1D5E4;
        }

#main-content table td,
#main-content table th {
    padding: 10px 4px 10px 3px;
    /**line-height: 1.3em;*/
    /**border-bottom: 1px solid #DADADA;*/
}

#main-content table .pagerrow {
    border-top: 0px solid #ddd;
    border-bottom: 0px solid #ddd;
}

    #main-content table .pagerrow td {
        background-color: White;
    }

        #main-content table .pagerrow td .bulk-actions {
            padding: 14px 8px;
           color:#FFFFFF;
        }

            #main-content table .pagerrow td .bulk-actions select {
               
            }

                #main-content table .pagerrow td .bulk-actions select:focus {
                    color: black;
                }

                #main-content table .pagerrow td .bulk-actions select option {
                    font-size: 14px;
                }

/*************** Pagination ***************/

#main-content .pagination {
    text-align: right;
    padding: 20px 0 5px 0;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 10px;
}

.pagination a {
    margin: 0 5px 0 0;
    padding: 3px 6px;
}

    .pagination a.number {
        border: 1px solid #ddd;
    }

    .pagination a.current {
        background: #469400 url('../gfx/bg-button-green.gif') top left repeat-x !important;
        border-color: #459300 !important;
        color: #fff !important;
    }

        .pagination a.current:hover {
            text-decoration: underline;
        }

/************ Shortcut Buttons ************/

.shortcut-button {
    border: 1px solid #ccc;
    background: #f7f7f7 url('../gfx/shortcut-button-bg.gif') top left no-repeat;
    display: block;
    width: 100px;
    margin: 0 0 1px 0;
    transition: all 0.2s ease;
    box-shadow: 0 2px 6px rgba(0,0,0,0.05);
}

    .shortcut-button span {
        border: 1px solid #fff;
        display: block;
        padding: 6px 6px 6px 6px;
        text-align: center;
        color: #555;
        font-size: 11px;
        line-height: 1.3em;
    }

        .shortcut-button span img {
            margin-bottom: 6px;
            width: 40px;
        }

    .shortcut-button:hover {
        background: #fff;
        transform: translateY(-4px);
        box-shadow: 0 8px 18px rgba(0,0,0,0.1);
        border-color: #57a000;
    }

    .shortcut-button span:hover {
        color: #57a000;
    }

ul.shortcut-buttons-set li {
    float: left;
    margin: 0 10px 10px 0;
    padding: 0 !important;
    background: 0;
}

/*************** Forms ***************/

form label {
    display: block;
    padding: 0 0 10px;
    font-weight: bold;
}

form fieldset legend {
    font-weight: bold;
    margin-bottom: 10px;
    padding-top: 10px;
}

form p small {
    font-size: 0.75em;
    color: #777;
}


form input.text-input,
form select,
form textarea,
form .wysiwyg {
    padding: 6px;
    font-size: 15px;

    border: 1px solid #d5d5d5;
    color: #333;
}

form .small-input {
    width: 400px;
}

form .supersmall-input {
    width: 45px !important;
}

form .medium-input {
    width: 450px !important;
}

form .large-input {
    width: 97.5% !important;
    font-size: 16px !important;
    padding: 8px !important;
}

form textarea {
    width: 97.5% !important;
    font-family: Arial, Helvetica, sans-serif;
    height: 100px;
}

form select {
    padding: 4px;
    background: #fff;
}

form input[type="checkbox"],
form input[type="radio"] {
    padding: 0;
    background: none;
    border: none;
}

input[type="radio"] {
    padding: 0;
    background: none;
    border: 0;
}

/*************** Notifications ***************/

.notification {
    position: relative;
    margin: 0 0 15px 0;
    padding: 0;
    border: 1px solid;
    background-position: 10px 11px !important;
    background-repeat: no-repeat !important;
    font-size: 14px;
    width: 99.8%;
    display:inline-block;
}


.attention {
    background: #fffbcc url('../gfx/icons/exclamation.png') 10px 11px no-repeat;
    border-color: #ffecb5;
    color: #664d03;
}

    .attention strong {
        color: #664d03 !important;
    }

.information {
    background: #cfe2ff url('../gfx/icons/information.png');
    border-color: #b6d4fe;
    color: #084298;
}

    .information strong {
        color: #084298 !important;
    }

.success {
    background: #d5ffce url('../gfx/icons/tick_circle.png');
    border-color: #9adf8f;
    color: #556652;
}

.error {
    background: #f8d7da url('../gfx/icons/cross_circle.png');
    border-color: #f5c2c7;
    color: #842029;
}

    .error strong {
        color: #842029 !important;
    }

.attentiontrial {
    background-color: #fffbcc;
    border-color: #e6db55;
    color: #666452;
    background-image: url('../gfx/icons/information.png');
    background-position: 10px 15px !important;
}

.importantinformation {
    background-image: linear-gradient(to right, #00F260 0%, #0575E6 51%, #00F260 100%);
    background-position: 0px 0px !important;
    border: none;
    color: black;
    padding: 15px;
    line-height:22px;
}

    .importantinformation strong {
        color: black;
    }

    .importantinformation a {
        color: white;
    }

.notification div {
    display: block;
    font-style: normal;
    padding: 10px 10px 10px 36px;
    line-height: 1.5em;
}

.notification .close {
    color: #990000;
    font-size: 9px;
    position: absolute;
    right: 5px;
    top: 5px;
}

/* Notification for form inputs */

.input-notification {
    background-position: left 2px;
    background-repeat: no-repeat;
    padding: 2px 0 2px 22px;
    background-color: transparent;
    margin: 0 0 0 5px;
}

/* Notification for login page */

#login-wrapper .login-content .notification {
    border: 0;
    background-color: #141414;
    color: #fff !important;
}

/********************************      Login Page      ********************************/

body#login {
    color: #fff;
    background: #222 url('../gfx/bg-login.gif');
}

#login-wrapper {
    background: url('../gfx/bg-login-top.png') top left repeat-x;
}

    #login-wrapper #login-top {
        width: 100%;
        padding: 50px 0 50px 0;
        text-align: center;
    }

    #login-wrapper .login-content {
        text-align: left;
        width: 350px;
        margin: 0 auto;
    }

        #login-wrapper .login-content label {
            color: #fff;
            font-weight: normal;
            font-size: 14px;
            font-family: Helvetica, Arial, sans-serif;
            float: left;
            width: 70px;
            padding: 0;
        }

        #login-wrapper .login-content input {
            width: 200px;
            float: right;
            margin: 0 0 20px 0;
            border: 0;
            /*background: #fff;*/
        }

        #login-wrapper .login-content p {
            padding: 0;
        }

            #login-wrapper .login-content p#remember-password {
                float: right;
            }

                #login-wrapper .login-content p#remember-password input {
                    float: none;
                    width: auto;
                    border: 0;
                    background: none;
                    margin: 0 10px 0 0;
                }

            #login-wrapper .login-content p .button {
                width: auto;
                margin-top: 20px;
            }

/********************************      jQuery plugins styles      ********************************/

/*************** Facebox ***************/

#facebox .b {
    background: url(../gfx/b.png);
}

#facebox .tl {
    background: url(../gfx/tl.png);
}

#facebox .tr {
    background: url(../gfx/tr.png);
}

#facebox .bl {
    background: url(../gfx/bl.png);
}

#facebox .br {
    background: url(../gfx/br.png);
}

#facebox {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 100;
    text-align: left;
}

    #facebox .popup {
        position: relative;
    }

    #facebox table {
        border-collapse: collapse;
    }

    #facebox td {
        border-bottom: 0;
        padding: 0;
    }

    #facebox .body {
        padding: 10px;
        background: #fff;
        width: 695px;
    }

    #facebox .loading {
        text-align: center;
    }

    #facebox .image {
        text-align: center;
    }

    #facebox img {
        border: 0;
        margin: 0;
    }

    #facebox .footer {
        border-top: 1px solid #DDDDDD;
        padding-top: 5px;
        margin-top: 10px;
        text-align: right;
    }

    #facebox .tl, #facebox .tr, #facebox .bl, #facebox .br {
        height: 10px;
        width: 10px;
        overflow: hidden;
        padding: 0;
    }

#facebox_overlay {
    position: fixed;
    top: 0px;
    left: 0px;
    height: 100%;
    width: 100%;
}

.facebox_hide {
    z-index: -100;
}

.facebox_overlayBG {
    background-color: #000;
    z-index: 99;
}

/*************** jQuery WYSIWYG ***************/

div.wysiwyg {
    border: 1px solid #cccccc;
    padding: 5px;
    background-color: #ffffff;
    width: 97.5% !important;
}

    div.wysiwyg * {
        margin: 0;
        padding: 0;
    }

    div.wysiwyg ul.panel {
        border-bottom: 1px solid #cccccc;
        float: left;
        width: 100%;
        padding: 0 0 5px 0;
    }

        div.wysiwyg ul.panel li {
            list-style-type: none;
            float: left;
            margin: 0 2px;
            padding: 0 !important;
            background: #ffffff;
            background-image: none !important;
        }

            div.wysiwyg ul.panel li.separator {
                height: 16px;
                margin: 0 4px;
                border-left: 1px solid #cccccc;
            }

            div.wysiwyg ul.panel li a {
                display: block;
                padding: 0 !important;
                width: 16px;
                height: 16px;
                background: url('../gfx/icons/jquery.wysiwyg.gif') no-repeat -64px -80px;
                border: 0;
                cursor: pointer;
                padding: 1px;
            }

                div.wysiwyg ul.panel li a:hover, div.wysiwyg ul.panel li a.active {
                }

                div.wysiwyg ul.panel li a.active {
                    background-color: #f9f9f9;
                    border: 1px solid #cccccc;
                    border-left-color: #aaaaaa;
                    border-top-color: #aaaaaa;
                    padding: 0;
                }

                div.wysiwyg ul.panel li a.bold {
                    background-position: 0 -16px;
                }

                div.wysiwyg ul.panel li a.italic {
                    background-position: -16px -16px;
                }

                div.wysiwyg ul.panel li a.strikeThrough {
                    background-position: -32px -16px;
                }

                div.wysiwyg ul.panel li a.underline {
                    background-position: -48px -16px;
                }

                div.wysiwyg ul.panel li a.justifyLeft {
                    background-position: 0 0;
                }

                div.wysiwyg ul.panel li a.justifyCenter {
                    background-position: -16px 0;
                }

                div.wysiwyg ul.panel li a.justifyRight {
                    background-position: -32px 0;
                }

                div.wysiwyg ul.panel li a.justifyFull {
                    background-position: -48px 0;
                }

                div.wysiwyg ul.panel li a.indent {
                    background-position: -64px 0;
                }

                div.wysiwyg ul.panel li a.outdent {
                    background-position: -80px 0;
                }

                div.wysiwyg ul.panel li a.subscript {
                    background-position: -64px -16px;
                }

                div.wysiwyg ul.panel li a.superscript {
                    background-position: -80px -16px;
                }

                div.wysiwyg ul.panel li a.undo {
                    background-position: 0 -64px;
                }

                div.wysiwyg ul.panel li a.redo {
                    background-position: -16px -64px;
                }

                div.wysiwyg ul.panel li a.insertOrderedList {
                    background-position: -32px -48px;
                }

                div.wysiwyg ul.panel li a.insertUnorderedList {
                    background-position: -16px -48px;
                }

                div.wysiwyg ul.panel li a.insertHorizontalRule {
                    background-position: 0 -48px;
                }

                div.wysiwyg ul.panel li a.h1 {
                    background-position: 0 -32px;
                }

                div.wysiwyg ul.panel li a.h2 {
                    background-position: -16px -32px;
                }

                div.wysiwyg ul.panel li a.h3 {
                    background-position: -32px -32px;
                }

                div.wysiwyg ul.panel li a.h4 {
                    background-position: -48px -32px;
                }

                div.wysiwyg ul.panel li a.h5 {
                    background-position: -64px -32px;
                }

                div.wysiwyg ul.panel li a.h6 {
                    background-position: -80px -32px;
                }

                div.wysiwyg ul.panel li a.cut {
                    background-position: -32px -64px;
                }

                div.wysiwyg ul.panel li a.copy {
                    background-position: -48px -64px;
                }

                div.wysiwyg ul.panel li a.paste {
                    background-position: -64px -64px;
                }

                div.wysiwyg ul.panel li a.increaseFontSize {
                    background-position: -16px -80px;
                }

                div.wysiwyg ul.panel li a.decreaseFontSize {
                    background-position: -32px -80px;
                }

                div.wysiwyg ul.panel li a.createLink {
                    background-position: -80px -48px;
                }

                div.wysiwyg ul.panel li a.insertImage {
                    background-position: -80px -80px;
                }

                div.wysiwyg ul.panel li a.html {
                    background-position: -48px -48px;
                }

                div.wysiwyg ul.panel li a.removeFormat {
                    background-position: -80px -64px;
                }

                div.wysiwyg ul.panel li a.empty {
                    background-position: -64px -80px;
                }

    div.wysiwyg iframe {
        border: 0;
        margin: 5px 0 0 0;
        clear: left;
        width: 97.5% !important;
    }

/* custom by Redney */
.highlight {
    background-color: #C6D6E6;
    padding: 5px;
    margin-bottom: 10px;
}

.highlight-attention {
    background-color: #fffbcc;
    padding: 5px;
    margin-bottom: 10px;
    border-radius: 4px;
    box-shadow: #e6db55 0px 2px 8px 0px;
}

    .highlight-attention label {
        font-weight: normal;
    }

.settingshighlight {
    background-color: #FFFFFF;
    padding: 15px;
    margin-bottom: 30px;
    /**box-shadow: #C0C0C0 0px 2px 8px 0px;*/
}

    .settingshighlight > h3 {
        border-bottom: solid 1px #C0C0C0;
        margin-bottom: 15px;
    }

.disabled {
    color: #999999;
}

.addDetailLine td {
    background-color: #FFFFFF;
}

.plan dl {
    font-size: 18px;
}

.plan dd {
    float: left;
    margin: 10px;
    display: block;
    background: #ffffd7;
    border: 1px solid #cccccc;
    padding: 25px;
}

.draftlabel {
    vertical-align: middle;
    margin: 0px;
    background: #f8f9fa;
    text-align: center;
    border-radius: 3px;
    color: #212529;
    padding: 6px 10px;
    position: relative;
    width: 100px;
    white-space:nowrap;
}

.lockedlabel {
    vertical-align: middle;
    margin: 0px;
    background: #198754;
    text-align: center;
    border-radius: 3px;
    color: white;
    padding: 6px 10px;
    position: relative;
    width: 100px;
    white-space: nowrap;
}

.timeoutlabel {
    vertical-align: middle;
    margin: 0px;
    background: #FFC107;
    text-align: center;
    border-radius: 3px;
    color: white;
    padding: 6px 10px;
    position: relative;
    width: 100px;
    white-space: nowrap;
}

.orderlabel {
    vertical-align: middle;
    margin: 0px;
    background: #007BFF;
    text-align: center;
    border-radius: 3px;
    color: white;
    padding: 6px 10px;
    position: relative;
    width: 100px;
    white-space: nowrap;
}

.oklabel {
    vertical-align: middle;
    margin: 0px;
    background: #57C785;
    text-align: center;
    border-radius: 3px;
    color: white;
    padding: 6px 10px;
    position: relative;
    width: 100px;
    white-space: nowrap;
}

.noklabel {
    vertical-align: middle;
    margin: 0px;
    background: #DC3545;
    text-align: center;
    border-radius: 3px;
    color: white;
    padding: 6px 10px;
    position: relative;
    width: 100px;
    white-space: nowrap;
}

.donelabel {
    vertical-align: middle;
    margin: 0px;
    background: #00D26A;
    text-align: center;
    border-radius: 3px;
    color: white;
    padding: 6px 10px;
    position: relative;
    width: 100px;
    white-space: nowrap;
}

.darklabel {
    vertical-align: middle;
    margin: 0px;
    background: #212529;
    text-align: center;
    border-radius: 3px;
    color: white;
    padding: 6px 10px;
    position: relative;
    width: 100px;
    white-space: nowrap;
}

.productionlabel {
    vertical-align: middle;
    margin: 0px;
    background: #FFBF00;
    text-align: center;
    border-radius: 3px;
    color: white;
    padding: 6px 10px;
    position: relative;
    width: 100px;
    white-space: nowrap;
}

.draftlabel {
    background: #E5E7EB;
    color: #374151;
}

.lockedlabel {
    background: #16A34A;
    color: white;
}

.timeoutlabel {
    background: #F59E0B;
    color: white;
}

.orderlabel {
    background: #3B82F6;
    color: white;
}

.oklabel {
    background: #22C55E;
    color: white !important;
}

.noklabel {
    background: #EF4444;
    color: white !important;
}

.donelabel {
    background: #10B981;
    color: white;
}

.darklabel {
    background: #1F2937;
    color: white;
}

.productionlabel {
    background: #F59E0B;
    color: white;
}

table tr .actionscolumn {
    text-align: right;
    white-space: nowrap;
}

.invisible {
    display: none;
}

.visible {
    display: block;
}

form .checkboxlabel {
    display: inline;
    padding: 0 0 10px;
    font-weight: bold;
}

.login {
    background: #5BC1AF url('../gfx/bg-button-simpla.gif') top left repeat-x !important;
    font-size: 18px !important;
}

.forgotpassword {
    background: #5BC1AF url('../gfx/bg-button-simpla.gif') top left repeat-x !important;
}


/** CUSTOM BY REDNEY */
.bar {
    background-color: #459300 !important;
}

.addDetailLine td, .addedDetailLine td {
    white-space: nowrap;
}

.legenda {
    text-align: left;
    font-size: 14px;
}

    .legenda li {
        margin-bottom: 10px;
    }

    .legenda img {
        margin-right: 10px;
    }

.packetchoice tr td ul li {
    list-style-type: circle;
    margin-left: 20px;
    padding-bottom: 7px;
    font-size: 14px;
}

.graphinfo {
    font-size: 13px;
    font-style: italic;
}

.graphcontainer {
    padding-top: 25px;
}

/** 11/01/2017 */
.content-box-content table tr:hover {
    background-color: #f1f7f4 !important;
    transition: background-color .12s ease;
}

/** 08/03/2017*/
.chkSendCopyToSelf input[type='checkbox'] {
    float: none !important;
}

.chkSendCopyToSelf label {
    display: inherit !important;
    font-weight: normal;
}

/** 05/10/2017*/
.statusfilter {
    margin-bottom: 6px !important;
    border: 1px solid #D2D5E4;
    padding: 14px 8px !important;
}

    .statusfilter label {
        display: inline;
        vertical-align: text-top;
        font-weight: normal;
    }

    .statusfilter input[type='checkbox'] {
        float: none;
    }

/** 14/12/2017 */
.badge {
    color: black;
    min-width: 10px;
    padding: 2px 5px 2px 5px;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    background-color: #e6db55;
    border-radius: 4px;
    margin-left: 3px;
}

.badge_agenda {
    min-width: 10px;
    padding: 2px 5px 2px 5px;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    border-radius: 4px;
    margin-left: 3px;
    border: 1px solid #aaa;
}

/** 07/02/2018 **/
.ui-datepicker-trigger {
    vertical-align: middle;
    margin-left:-30px;
    height:20px;
}

#customproduct .ui-datepicker-trigger
{
    margin-left:0px;
}

/** 18/04/2018 **/
.badgeOnShortcut {
    background-color: #e6db55;
    border-radius: 4px;
    padding: 2px 5px 2px 5px;
}

.graphtooltip {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    line-height: 1.6em;
    padding: 7px;
    -webkit-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
    -moz-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
    box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
    background-color: #4C4C4C;
    color: white;
    border: solid 1px black;
}

    .graphtooltip strong {
        color: white;
    }

    .graphtooltip .profit {
        font-weight: bold;
        border: solid 1px #9adf8f;
        background-color: #d5ffce;
        color: #7CCC6C;
        width: 75px;
        text-align: center;
        font-style: italic;
        padding-left: 2px;
        padding-right: 2px;
    }

    .graphtooltip .loss {
        color: white;
        font-weight: bold;
        border: solid 1px #df8f8f;
        background-color: #ffcece;
        color: #df8f8f;
        width: 75px;
        text-align: center;
        font-style: italic;
        padding-left: 2px;
        padding-right: 2px;
    }

.nav-top-settings {
    float: right;
    font-size: 11px;
    margin-bottom: 8px;
}

    .nav-top-settings a {
        border-radius: 4px;
        margin: 0 0 0 5px;
        border: 1px solid #ddd;
        padding: 3px 6px;
    }

/** 14/11/2019 */
.dropzone {
    text-align: center;
    padding: 5px;
    vertical-align: middle;
    border-width: 4px !important;
    border-style: dashed !important;
}

    .dropzone:hover {
        cursor: pointer;
    }

    .dropzone p {
        margin: 5px;
    }

/** 21/01/2020 */
.dropzone-invoice {
    text-align: center;
    padding: 5px;
    vertical-align: middle;
    border-width: 4px !important;
    border-style: dashed !important;
}

    .dropzone-invoice:hover {
        cursor: pointer;
    }

    .dropzone-invoice p {
        margin: 5px;
    }

/** 16/02/2021 */
.dropzone-document {
    text-align: center;
    padding: 5px;
    vertical-align: middle;
    border-width: 4px !important;
    border-style: dashed !important;
}

    .dropzone-document:hover {
        cursor: pointer;
    }

    .dropzone-document p {
        margin: 5px;
    }

.dropzone-toggl {
    text-align: center;
    padding: 5px;
    vertical-align: middle;
    border-style: dashed !important;
    background: #F9F9F9 !important;
}

    .dropzone-toggl:hover {
        cursor: pointer;
    }

    .dropzone-toggl p {
        margin: 5px;
    }

.dropzone-onetwo {
    text-align: center;
    padding: 5px;
    vertical-align: middle;
    border-style: dashed !important;
    background: #F9F9F9 !important;
}

    .dropzone-onetwo:hover {
        cursor: pointer;
    }

    .dropzone-onetwo p {
        margin: 5px;
    }

.dropzone-lightspeed {
    text-align: center;
    padding: 5px;
    vertical-align: middle;
    border-width: 4px !important;
    border-style: dashed !important;
}

    .dropzone-lightspeed:hover {
        cursor: pointer;
    }

    .dropzone-lightspeed p {
        margin: 5px;
    }

/* Medium devices (landscape tablets, 1024px and down) */
@media only screen and (max-width: 1024px) {
    .shortcut-buttons-set > li {
        zoom: 0.75;
    }
}

/** 26/02/2020 */
.label {
    width: 150px;
    text-align: center;
    font-style: italic;
    padding: 4px;
    cursor: pointer;
}

.tblTasks tbody tr {
    background-color: #FFFFFF !important;
    border-bottom: #E8E8E8 solid 1px;
}

/** 26/03/2020 */
.chkAddToCashbook label {
    font-weight: normal;
    padding-top: 3px;
}

/** 07/05/2020 */
.blinking {
    animation: blinker 1.5s linear infinite;
}

@keyframes blinker {
    50% {
        opacity: 0;
    }
}

/** 26/05/2020 */
.shortcut-button-active, .search-shortcut-button-active {
    border: 2px solid #57a000;
    background: #F4FFF0;
}

    .shortcut-button-active span, .search-shortcut-button-active span {
        color: #57a000;
    }

.content-box-tabs .current {
    color: #57a000;
}

.actionscolumn a:hover, .actionbutton:hover {
    background: #F4FFF0;
    border: 1px solid #57a000;
}

/** 04/06/2020 */
.tooltipster-base strong {
    color: white;
    font-weight: 700;
}

#dialog-modal-copybill {
    overflow: visible !important;
}

/** 18/06/2020 */
table > tbody > tr:first-child > td > .setPagination, table > tbody > tr:first-child > td > .pagination {
    display: none;
}

table > tbody > tr:last-child > td > .actionbuttons {
    display: none;
}

table > tbody > .pagerrow:first-child {
    border-top: none !important;
    /**border-bottom: 1px solid #ddd !important;*/
}

.actionbuttontable tr td {
    white-space: nowrap;
    text-align: right;
    padding: 2px !important;
    border-bottom:none !important;
}

.actionbuttons {
    border: 3px solid #FFFFFF;
}

.highlight > p, .nohighlight > p {
    padding: 0;
}

    .highlight > p:not(:first-child) > label, .nohighlight > p:not(:first-child) > label {
        margin-top: 18px;
    }

    .highlight > p > label, .nohighlight > p > label {
        padding: 0;
        padding-bottom: 5px;
    }

.nohighlight {
    background-color: #F9FAFB;
    padding: 5px;
    margin-bottom: 10px;
}

    .nohighlight > table > tbody > tr > td {
        background-color: #F7F7FA;
    }

.highlight > table > tbody > tr > th {
    background-color: #C6D6E6;
    border-bottom: none !important;
    padding-bottom: 0px !important;
    padding-top: 2px !important;
    padding-left: 0px !important;
    /**font-size: 100% !important;*/
}

    .highlight > table > tbody > tr > th:first-letter {
        text-transform: capitalize;
    }

.highlight > table > tbody > tr > td {
    padding-left: 0px !important;
}

.addedDetailLine > td {
    background-color: #FFFFFF;
}

.totalRow > td {
    background-color: #FFFFFF;
}

#sidebar-wrapper {
    top: 0;
    bottom: 0;
    position: fixed;
    overflow-y: scroll;
    overflow-x: hidden;
    width: 180px;
}

/* width */
::-webkit-scrollbar {
    width: 6px;
}

/* Track */
::-webkit-scrollbar-track {
    background: #f1f1f1;
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: #888;
}

    /* Handle on hover */
    ::-webkit-scrollbar-thumb:hover {
        background: #555;
    }

svg > g:last-child > g:last-child {
    pointer-events: none
}

div.google-visualization-tooltip {
    pointer-events: none
}

.tblGraphTooltip th, .tblGraphTooltip td {
    background-color: #4C4C4C !important;
    color: white !important;
    font-size: 13px !important;
    padding: 5px !important;
}

.checkboxListInHightlight > tbody > tr > td {
    background-color: #FFFFFF;
}



.actionscolumn a, .actionbutton {
    font-family: "Lucida Grande", "Segoe UI", "Tahoma", "Helvetica Neue", "Helvetica", sans-serif;
    font-size: 16px;
    font-weight: 600;
    color: #636363;
    text-decoration: none;
    padding: 3px 3px 3px 3px;
    border: 1px solid #ebebeb;
    border-radius: 2px;
    border-bottom-color: #d4d4d4;
    background: #fcfcfc;
    background: -moz-linear-gradient(top, #fcfcfc 0%, #f5f5f5 100%);
    background: -webkit-linear-gradient(top, #fcfcfc 0%, #f5f5f5 100%);
    background: linear-gradient(to bottom, #fcfcfc 0%, #f5f5f5 100%);
}





.textbutton {
    font-size: 11px !important;
    max-width: 130px;
}

.actionscolumn input[type=text] {
    max-width: unset;
    min-width: 350px;
}

.actionscolumn a img {
    height: 16px;
}

.checkboxList tr {
    background: none !important;
}

.checkboxList td {
    padding-top: 2px !important;
    padding-bottom: 2px !important;
}

    .checkboxList td label {
        padding-top: 2px;
        font-weight: normal;
    }

.lnkBack {
    position: absolute;
    right: 220px;
    top: 60px;
    z-index: 10;
    font-size: 10px;
    opacity: 0.3;
}

.lnkNext {
    position: absolute;
    right: 40px;
    top: 60px;
    z-index: 10;
    font-size: 10px;
    opacity: 0.3;
}

.lnkCancel {
    position: absolute;
    right: 130px;
    top: 60px;
    z-index: 10;
    font-size: 10px;
    opacity: 0.3;
}

    .lnkBack:hover, .lnkNext:hover, .lnkCancel:hover, .lnkBack_bottom:hover, .lnkNext_bottom:hover, .lnkCancel_bottom:hover {
        text-decoration: none;
        opacity: 1;
    }

.lnkBack_bottom {
    position: absolute;
    right: 220px;
    z-index: 10;
    font-size: 10px;
    opacity: 0.3;
    margin-top: -50px;
}

.lnkNext_bottom {
    position: absolute;
    right: 40px;
    z-index: 10;
    font-size: 10px;
    opacity: 0.3;
    margin-top: -50px;
}

.lnkCancel_bottom {
    position: absolute;
    right: 130px;
    z-index: 10;
    font-size: 10px;
    opacity: 0.3;
    margin-top: -50px;
}

.showNavigation:hover, .hideNavigation:hover, .lnkCancel:hover {
    opacity: 1;
}

.trTitle td input {
    font-weight: bold;
}

.disabled {
    color: #1b1e21;
    background-color: #d6d8d9;
    border: 1px solid #c6c8ca;
    padding: 6px 10px;
    font-size: 12px;
    font-weight: normal;
    border-radius: .25rem;
    display: inline-block;
    white-space: nowrap;
    line-height: 1em;
}

.badge_red {
    color: #721c24;
    background-color: #f8d7da;
    border: 1px solid #f5c6cb;
    padding: 6px 10px;
    font-size: 12px;
    font-weight: normal;
    border-radius: .25rem;
    display: inline-block;
    white-space: nowrap;
    line-height: 1em;
}

    .badge_red a {
        color: #721c24 !important;
    }

.badge_orange {
    color: #FFFFFF;
    background-color: #FFA500;
    border: 1px solid #FFA500;
    padding: 6px 10px;
    font-size: 12px;
    font-weight: normal;
    border-radius: .25rem;
    display: inline-block;
    white-space: nowrap;
    line-height: 1em;
}

    .badge_orange a {
        color: #FFFFFF !important;
    }

.badge_green {
    color: #155724;
    background-color: #d4edda;
    border: 1px solid #c3e6cb;
    padding: 6px 10px;
    font-size: 12px;
    font-weight: normal;
    border-radius: .25rem;
    display: inline-block;
    white-space: nowrap;
    line-height: 1em;
}

    .badge_green a {
        color: #155724 !important;
    }

.badge_default {
    color: #004085;
    background-color: #cce5ff;
    border: 1px solid #b8daff;
    padding: 6px 10px;
    font-size: 12px;
    font-weight: normal;
    border-radius: .25rem;
    display: inline-block;
    white-space: nowrap;
    line-height: 1em;
}

    .badge_default a {
        color: #004085 !important;
    }

.badge_yellow {
    color: #664d03;
    background-color: #fff3cd;
    border: 1px solid #ffecb5;
    padding: 6px 10px;
    font-size: 12px;
    font-weight: normal;
    border-radius: .25rem;
    display: inline-block;
    white-space: nowrap;
    line-height: 1em;
}

    .badge_yellow a {
        color: #664d03 !important;
    }

.chkCustomerNoVAT > label {
    font-weight: normal;
}

/** TOP NAV BAR **/
/* Navbar container */
.navbar {
    overflow: hidden;
    background: #222 url('/gfx/bg-topnav.png');
    margin-top: -15px;
    margin-right: -15px;
    margin-left: -15px;
    margin-bottom: 10px;
    letter-spacing:1px;
}

    /* Links inside the navbar */
    .navbar a {
        float: left;
        color: #aaa;
        text-align: center;
        padding: 12px 14px;
        text-decoration: none;
    }

    .navbar a:hover {
        color:#FFFFFF !important;
    }

/* The dropdown container */
.dropdown {
    float: left;
    overflow: hidden;
    cursor: pointer;
}

    /* Dropdown button */
    .dropdown .dropbtn {
        border: none;
        outline: none;
        color: #aaa;
        padding: 12px 15px;
        background-color: inherit;
        margin: 0; /* Important for vertical align on mobile phones */
    }

        .dropdown .dropbtn img {
            vertical-align: middle;
        }

    /* Add a red background color to navbar links on hover */
    .navbar a:hover, .dropdown:hover .dropbtn {
        /**background-color: red;*/
        color: white;
    }

/* Dropdown content (hidden by default) */
.dropdown-content {
    display: none;
    position: absolute;
    background: #222 url('/gfx/bg-topnav.png');
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 999;
    top: 30px;
}

    /* Links inside the dropdown */
    .dropdown-content a {
        float: none;
        color: #aaa;
        padding: 12px 15px;
        text-decoration: none;
        display: block;
        text-align: left;
    }

        /* Add a grey background color to dropdown links on hover */
        .dropdown-content a:hover {
            /*background-color: #ddd;*/
        }

.navbar .right {
    float: right;
}

    .navbar .right .txtSearch {
        float: left;
        padding: 3px;
        font-size: 13px;
        background: #fff url(../gfx/bg-form-field.gif) top left repeat-x;
        border: 1px solid #d5d5d5;
        color: #333;
        border-radius: 4px;
        margin-top: 8px;
        width: 125px;
    }

    .navbar .right .button {
        margin-top: 6px;
        margin-left: 5px;
        height:28px;
        padding:0px 6px 4px 4px;
        border:0px;
    }

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
    display: block;
}

.printbutton {
    margin-top: 15px;
}

.file-upload {
    background-color: #ffffff;
    width: 600px;
}

.file-upload-input {
    position: absolute;
    margin: 0;
    padding: 0;
    width: 100% !important;
    height: 100%;
    outline: none;
    opacity: 0;
    cursor: pointer;
}

.file-upload-wrap {
    position: relative;
}

    .image-dropping,
    .-file-upload-wrap:hover {
        
        border-width: 4px;
        border-style: dashed;
    }

.drag-text {
    border: 2px dashed #ccc;
    border-radius: 6px;
    padding: 22px;
    text-align: center;
    cursor: pointer;
    background: #fafafa;
    transition: border-color .2s ease, background-color .2s ease;
    box-sizing: border-box;
    max-width: 550px;
}

    .drag-text h3 {
        padding: 0 !important;
        margin: 0;
        font-size: 14px !important;
        font-weight: normal;
        line-height: 20px;
    }

        .drag-text h3::before {
            content: "📎";
            display: block;
            font-size: 28px;
            line-height: 32px;
            margin-bottom: 6px;
        }

        .drag-text h3 strong {
            font-size: 14px;
            color: #333;
            font-weight: 600;
        }

        .drag-text h3 span {
            font-size: 12px;
            color: #888;
            font-weight: normal;
        }

        .file-upload-wrap
        {
            border:unset !important;
            height:unset !important;
        }

        .drag-text h3{
            color:unset !important;
        }

.lnkDeleteFile {
    display: inline-block;
    margin-top: 8px;
}

    .lnkDeleteFile a {
        padding: 10px 20px;
        background: #f9fafb;
        border: 1px solid #e5e7eb;
        color: #374151;
        text-decoration: none;
        cursor: pointer;
        white-space: nowrap;
        text-transform: uppercase;
        transition: all 0.2s ease;
        border-radius: 4px;
        font-size: 14px;
        font-weight: 500;
        display: inline-block;
    }

        .lnkDeleteFile a:hover {
            filter: brightness(90%);
            transform: translateY(-1px);
            text-decoration: none;
        }

        .lnkDeleteFile a:active {
            color: #777;
        }

        .lnkDeleteFile a:focus {
            outline: 1px;
        }

.statusinfo {
    cursor: pointer;
}

.addshortcut {
    position: relative;
    top: -85px;
    left: 85px;
}

    .addshortcut img {
        height: 24px;
        opacity: 0.5;
    }

        .addshortcut img:hover {
            opacity: 1;
        }

.tblShortcuts {
    border: 0px;
    padding: 0px;
    margin: 0px;
    margin-left: -10px;
    width: 100%;
    border-spacing: 6px;
    border-collapse: unset !important;
}

    .tblShortcuts tr {
        background: none !important;
    }

        .tblShortcuts tr td {
            white-space: nowrap;
            background-color: #FFFFFF;
            padding: 12px !important;
            vertical-align: top;
            box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
        }

            .tblShortcuts tr td ul li {
                max-height: 90px;
                margin-bottom: 0px;
            }

.tblDashboardFunctions {
    border: 0px;
    padding: 0px;
    margin: 0px;
    margin-left: -10px;
    width: 100%;
    border-spacing: 10px;
    border-collapse: unset !important;
}

    .tblDashboardFunctions tr {
        background: none !important;
    }

        .tblDashboardFunctions tr td {
            background-color: #FFFFFF;
            padding: 15px !important;
            vertical-align: top;
            box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
        }

/** PROGESS */
.pace {
    -webkit-pointer-events: none;
    pointer-events: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
}

.pace-inactive {
    display: none;
}

.pace .pace-progress {
    background: #57A000;
    position: fixed;
    z-index: 2000;
    top: 0;
    right: 100%;
    width: 100%;
    height: 5px;
}

.statusinfo a {
    color: white;
    text-decoration: underline;
}

tabs-min {
    background: transparent;
    border: none;
}

    tabs-min .ui-widget-header {
        background: transparent;
        border: none;
        border-bottom: 1px solid #c0c0c0;
        -moz-border-radius: 0px;
        -webkit-border-radius: 0px;
        border-radius: 0px;
    }

    tabs-min .ui-tabs-nav .ui-state-default {
        background: transparent;
        border: none;
    }

    tabs-min .ui-tabs-nav .ui-state-active {
        background: transparent url(img/uiTabsArrow.png) no-repeat bottom center;
        border: none;
    }

    tabs-min .ui-tabs-nav .ui-state-default a {
        color: #c0c0c0;
    }

    tabs-min .ui-tabs-nav .ui-state-active a {
        color: #459e00;
    }

.content-box-header {
    /**background-color: #F7F7FA;*/
    border-bottom: 1px solid #EAEAEB;
}

.content-box-content {
    border: none;
}

ul.content-box-tabs li a {
    border: none;
}

    ul.content-box-tabs li a.current {
        border: none;
        border-top: 1px solid;
        border-left: 1px solid;
        border-right: 1px solid;
        border-radius:4px;
    }

.content-box-header > h3 {
}

.content-box {
    border-radius: 4px;
    border: 1px solid #D5D5D5;
}

#main-content > h2 {
    display: none;
}

table tbody tr td, table tbody tr th {
    vertical-align: middle;
}

.dropzoneinfo, .dropzoneinfo-invoice, .dropzoneinfo-document {
    font-size: 12px;
}

#tab1_send table tbody tr td {
    white-space: nowrap;
    padding-right: 3px;
}

.tblAddNewLine tbody tr th {
    background-color: #FFFFFF !important;
}

.chosen-results {
    padding: 0 !important;
}

a[id*='btnUp'], a[id*='btnDown'] {
    /*display: none;*/
}

/**
.homeIconTopNav {
    height: 15px;
    margin-top: -5px;
    vertical-align: bottom;
}
    */

.ui-dialog {
    border-radius: 0 !important;
    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px !important;
}

.ui-widget-header {
    background: #F8F9FA !important;
    border: none !important;
    /**background-color: #F7F7FA !important;*/
    border-bottom: 1px solid #EAEAEB !important;
}

.ui-dialog-title {
    font-weight: normal !important;
    color: #555555 !important;
}

.ui-widget-content {
    border-color: #F7F7FA !important;
    font-size:1em !important;
}

.txtFilter, .txtFilterSearch {
    background-image: url(/gfx/filtericon.png) !important;
    background-position: 4px 5px !important;
    background-repeat: no-repeat !important;
    padding-left: 25px !important;
}

/*.actionbuttontable tbody tr:nth-child(even) td:not(:first-child) {
    background-color: #F3F3F3 !important;
}*/

.companyname {
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.pagerrow td {
    padding: 0px !important;
    border-bottom:none !important;
}

.borderactive {
    border: 3px solid #57A000;
    animation: blink-animation 1s linear 0s 1 reverse;
}

@keyframes blink-animation {
    to {
        border: 3px solid #FFFFFF;
    }
}

.content-box-content .highlight, .content-box-content .nohighlight {
    margin-bottom: 25px;
}

a[id$="_btnUp"], a[id$="_btnDown"] {
    display: none;
}

.manage-box {
    background-color: #F4F6F9;
}

    .manage-box .highlight, .manage-box .nohighlight, .manage-box #tab2, .manage-box #tab3 {
        background-color: #FFFFFF;
        padding: 15px;
    }

        .manage-box .nohighlight > table > tbody > tr > td {
            background-color: #FFFFFF;
        }

    .manage-box .column-right {
        width: 30%;
     
    }

    .manage-box .column-left {
        width: 64%;
    }

    .manage-box #tab2 h3, .manage-box #tab3 h3 {
        border-bottom: solid 1px #C0C0C0;
    }

/** switch toggle */
.switch {
    position: relative;
    display: inline-block;
    width: 55px;
    height: 28px;
}

    .switch input {
        opacity: 0;
        width: 0;
        height: 0;
    }

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    -webkit-transition: .4s;
    transition: .4s;
}

    .slider:before {
        position: absolute;
        content: "";
        height: 20px;
        width: 20px;
        left: 4px;
        bottom: 4px;
        background-color: white;
        -webkit-transition: .4s;
        transition: .4s;
    }

input:checked + .slider {
    background-color: #2196F3;
}

input:focus + .slider {
    box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
    -webkit-transform: translateX(26px);
    -ms-transform: translateX(26px);
    transform: translateX(26px);
}

/* Rounded sliders */
.slider.round {
    border-radius: 34px;
}

    .slider.round:before {
        border-radius: 50%;
    }
/** end switch toggle */

td:has(.actionbuttons) {
    position: sticky;
    top: 0px;
    z-index: 100;
}

    td:has(.actionbuttons).no-sticky {
        position: static !important;
    }

.actionbuttons {
    /*box-shadow: 0px 15px 10px -15px rgba(99, 99, 99, 0.2);*/
    border-bottom: 1px solid #D2D5E4;
    margin-bottom:-1px;
}

.txtFilter, .txtFilterSearch {
    border: 1px solid #E6E9EE;
}

.ui-dialog
{
    padding:0px !important;
}

.ui-dialog-title {
    font-size: 17px !important;
    padding: 6px 0px 6px !important;
}

.filteryearbutton {
    color: #636363;
    text-decoration: none;
    padding: 3px 3px 3px 3px;
    border: 1px solid #ebebeb;
    border-radius: 2px;
    border-bottom-color: #d4d4d4;
    background: #fcfcfc;
    background: -moz-linear-gradient(top, #fcfcfc 0%, #f5f5f5 100%);
    background: -webkit-linear-gradient(top, #fcfcfc 0%, #f5f5f5 100%);
    background: linear-gradient(to bottom, #fcfcfc 0%, #f5f5f5 100%);
}

    .filteryearbutton:hover, .filteryearbutton:focus {
        font-weight:600;
        border-color:#000000;
    }

.selectedtreeviewnode
{
    font-weight:bold;
}

.treenode table tbody tr td:not(.treeviewnode)
{
    padding:2px !important;
    width:20px;
}

.treenode table tbody tr .treeviewnode
{
    padding:2px !important;
}

.ui-dialog-content fieldset p label
{
    font-size:14px;
}

.ui-dialog-content fieldset p {
    line-height:1.1em;
}

.txtCustomerTAV, .txtSupplierTAV {
    text-transform: uppercase;
}

.message_new {
    max-width: 600px;
    display: block;
    padding-top: 15px;
}

    .message_new .badge_default table tbody tr td {
        color: #555;
    }

.verticalnavigation {
    position:sticky;
    top:150px;
}

    .verticalnavigation ul {
        list-style-type: none;
        margin: 0;
        margin-left: 10px;
        padding: 15px 0px 15px 0px !important;
        width: 100%;
        border-left: 1px solid #EAEAEB;
    }

.verticalnavigation li a {
    display: block;
    padding: 8px 16px;
}

    /* Change the link color on hover */
.verticalnavigation li a:hover {

}

.tblHistory_modal
{
    width:100%;
}

.tblHistory_modal tr td {
    vertical-align: top;
    padding: 10px 4px 10px 3px;
    border-bottom: 1px solid #DADADA;
}

.tblHistory_modal tr:nth-child(even) {
    background: #f8f9fa;
}

.tblHistory_modal tr:hover {
    background-color: #E8E8E8 !important;
}

.tblHistory
{
    width:100%;
    max-height:150px;
    overflow-y:scroll;
    display:block;
    font-size:12px;
}

.tblHistory tr td {
    vertical-align: top;
    padding: 4px 4px 4px 3px !important;
}

.tblProfitInfo {
    font-size: 12px;
}

    .tblProfitInfo tr td {
        vertical-align: top;
        padding: 4px 4px 4px 3px !important;
    }


.profitinfoinline {
    display: block;
    /**padding-top: 15px;*/
    line-height: normal;
}

p a
{
    line-height:14px;
}

.tooltipster-content a, .ui-dialog-content .meetingInfo a:not(.button):not(.tooltip) {
    color: #636363 !important;
    text-decoration: none !important;
    padding: 3px 3px 3px 3px !important;
    border: 1px solid #ebebeb !important;
    border-radius: 2px !important;
    border-bottom-color: #d4d4d4 !important;
    background: #fcfcfc !important;
    background: -moz-linear-gradient(top, #fcfcfc 0%, #f5f5f5 100%) !important;
    background: -webkit-linear-gradient(top, #fcfcfc 0%, #f5f5f5 100%) !important;
    background: linear-gradient(to bottom, #fcfcfc 0%, #f5f5f5 100%) !important;
    line-height: 30px !important;
}

.tooltipster-content a {
    font-size: 11px !important;
}

.ui-dialog-content .meetingInfo a:not(.button), .ui-dialog-content .meetingInfo a:not(.button) small {
    font-size: 13px !important;
}

.ui-datepicker-current, .ui-datepicker-close
{
    font-weight:normal !important;
}

.ddlProductVariants
{
    margin-top:25px;
    width:300px;
}

fieldset {
    border-radius: 4px;
}

label, th, .tblPaymentInfo tbody tr td {
    color: #555555;
    font-weight: normal !important;
    font-size: 17px;
}

th {
    color: #555555 !important;
}

    input[type="checkbox"] + label, label a, a label {
        font-size: 14px !important;
    }

#dialog-modal-addcustomer fieldset
{
    border:none;
}

.noklabel > label
{
    color:#FFFFFF;
}

.actionbuttontable tr:nth-child(n+2) .button {
    width: 300px;
    text-align:left;
}


.trTitle td:first-child, .tdindented {
    padding-left: 63px !important;
}

.trTitleH1 td:first-child, .tdindentedH1 {
    padding-left: 3px !important;
}

.trTitleH2 td:first-child, .tdindentedH2 {
    padding-left: 18px !important;
}

.trTitleH3 td:first-child, .tdindentedH3 {
    padding-left: 33px !important;
}

.trTitleH4 td:first-child, .tdindentedH4 {
    padding-left: 48px !important;
}

#ui-datepicker-div {
    z-index: 999999 !important;
    border-width:3px;
}

.text-align-right
{
    text-align:right;
}

.bulk-actions
{
    /*white-space:nowrap;*/
}

    .bulk-actions label, .bulk-actions .chkSendCopyToSelf {
        white-space: nowrap;
    }

.txtAmountTitle {
    min-width: 20px !important;
    width: 30px;
}

.installation_overview_tblInstallations th.thInstallationId,
.installation_overview_tblInstallations td.tdInstallationId {
    display: none;
}

@media (max-width: 1440px) {
    .shortcut-buttons-set {
        zoom: 0.85;
    }

    .navbar a
    {
        padding-right:2px !important;
    }

    .navbar .badge
    {
        display:none;
    }

    .statusfilter 
    {white-space:nowrap;}
}

/*.actionscolumn {
    position: relative;
    white-space: nowrap;
    transition: all 0.7s ease;
}*/

    /* Verberg alles behalve de toggle */
    /*.actionscolumn.collapsed a:not(.actions-toggle),
    .actionscolumn.collapsed img {
        display: none;
    }*/

/* Styling drie puntjes */
/*.actions-toggle {
    font-size: 18px;
    padding: 4px 8px;
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
}*/

tr.itemrow td.actionscolumn {
    opacity: 0.4;
}

tr.itemrow:hover td.actionscolumn {
    opacity:1;
    transition: opacity 0.3s ease;*/ /* optioneel voor animatie */
}

tr.itemrow {
    border: 1px solid #D1D5E4;
}
    tr.itemrow td:first-child:has(input[type="checkbox"]),
    tr.itemrow td:first-child:has(input[type="radio"]) {
        border: 1px solid #D1D5E4;
    }

.mce-fullscreen {
    z-index: 9999999 !important;
}

    fieldset.column-right div.file-upload-wrap {
        margin-left: 15px;
        margin-right: 15px;
    }

    fieldset.column-right .button:first-of-type {
        margin-left: 15px;
    }

    fieldset.column-right .profitinfoinline {
        margin-left: 15px !important;
        margin-bottom: 15px !important;
        margin-right:15px;
    }

    fieldset.column-right .loghistory .content-box {
        margin-left: 15px !important;
        margin-bottom: 15px !important;
        margin-right: 15px;
    }

.chosen-single, .chosen-container {
    background: #FFFFFF !important;
    font-size: 15px !important;
    box-shadow: none !important;
    border-color: #d5d5d5 !important;
}

    input[type="checkbox"] + label {
        white-space: nowrap;
        margin-right:5px;
    }


input[type="button"][value*="TOEVOEGEN"] {
    background-image: url("/gfx/svg/add.svg");
    background-repeat: no-repeat;
    background-position: 10px center;
    padding-left: 40px !important;
}

input[type="button"][value*="OPSLAAN"] {
    background-image: url("/gfx/svg/save.svg");
    background-repeat: no-repeat;
    background-position: 10px center;
    padding-left: 40px !important;
}

input[type="button"][value*="VERSTUREN"] {
    background-image: url("/gfx/svg/mail.svg");
    background-repeat: no-repeat;
    background-position: 10px center;
    padding-left: 40px !important;
}

input[type="button"][value*="VOORBEELD"] {
    background-image: url("/gfx/svg/preview.svg");
    background-repeat: no-repeat;
    background-position: 10px center;
    padding-left: 40px !important;
}

input[type="button"][value*="AFSPRAAK"] {
    background-image: url("/gfx/svg/calendar.svg");
    background-repeat: no-repeat;
    background-position: 10px center;
    padding-left: 40px !important;
}

input[type="button"][value*="ACTUALISEREN"] {
    background-image: url("/gfx/svg/sync.svg");
    background-repeat: no-repeat;
    background-position: 10px center;
    padding-left: 40px !important;
}

input[type="button"][value*="AFDRUKKEN"] {
    background-image: url("/gfx/svg/print.svg");
    background-repeat: no-repeat;
    background-position: 10px center;
    padding-left: 40px !important;
}

input[type="button"][value*="DOWNLOADEN"] {
    background-image: url("/gfx/svg/download.svg");
    background-repeat: no-repeat;
    background-position: 10px center;
    padding-left: 40px !important;
}

input[type="button"][value*="VERWIJDEREN"] {
    background-image: url("/gfx/svg/delete.svg");
    background-repeat: no-repeat;
    background-position: 10px center;
    padding-left: 40px !important;
}

input[type="button"][value*="BLOKKEREN"] {
    background-image: url("/gfx/svg/block.svg");
    background-repeat: no-repeat;
    background-position: 10px center;
    padding-left: 40px !important;
}

input[type="button"][value*="ALS BETAALD"] {
    background-image: url("/gfx/svg/euro.svg");
    background-repeat: no-repeat;
    background-position: 10px center;
    padding-left: 40px !important;
}

input[type="button"][value*="ALS GEFACTUREERD"] {
    background-image: url("/gfx/svg/check.svg");
    background-repeat: no-repeat;
    background-position: 10px center;
    padding-left: 40px !important;
}

input[type="button"][value*="EXCEL"] {
    background-image: url("/gfx/svg/dataset.svg");
    background-repeat: no-repeat;
    background-position: 10px center;
    padding-left: 40px !important;
}

input[type="button"][value*="SAMENVOEGEN"] {
    background-image: url("/gfx/svg/merge.svg");
    background-repeat: no-repeat;
    background-position: 10px center;
    padding-left: 40px !important;
}

/**
input[type="button"][value*="NAAR "] {
    background-image: url("/gfx/svg/check.svg");
    background-repeat: no-repeat;
    background-position: 10px center;
    padding-left: 40px !important;
}*/

input[type="checkbox"] {
    accent-color: #3B82F6;
}

.statusinfo, .statusinfo_order, .statusinfo_bill, .statusinfo_creditnote, .statusinfo_quote {
    display: inline-block;
    margin-right: 6px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.addedDetailLine {
    border: 1px solid #D2D5E4;
}

[id$="divToTitle"] {
    border: 1px solid #D2D5E4;
    margin-bottom: -1px;
}

.tblAddNewLine tbody tr th {
    border-left: none !important;
    border-right: none !important;
    border-top: none !important;
}

.totalRow td
{
    white-space:nowrap;
}


.content-box-tabs {
    display: flex;
}

    .content-box-tabs li {
        flex: 1;
        white-space:nowrap;
    }

.banksaldo {
    color: #555;
}
/*.itemrow td span
{
    white-space:nowrap;
}

*/

.navbarAI img {
    opacity: 0.8;
}

    .navbarAI img:hover {
        opacity: 1;
    }

#addDeliveryAddress {
    border: 1px solid #D5D5D5 !important;
    background: none !important;
    width: 520px !important;
    padding-top: 20px;
    padding-bottom: 20px;
    margin: 0px !important;
}

    #addDeliveryAddress .button {
        display: block;
        width:400px;
        margin-bottom:15px;
    }

.content-box.loading {
    filter: blur(5px);
    opacity: 0.5;
}

.litCustomerVATCheck {
    display: flex;
    flex-wrap: wrap;
    padding-top: 10px;
}

    .litCustomerVATCheck .button {
        margin-right: 5px;
        margin-bottom: 5px;
    }

#ctl00_content_trSendUploadedAttachment td .button, #ctl00_content_trSendUploadedAttachmentPeppol td .button {
    display: inline-block;
    margin-right: 5px;
    margin-bottom: 5px;
}

.statusfilter div:not(.chosen-container) {
    align-items: center;
}

#ctl00_content_divToTitle {
    display: flex;
    gap: 0px;
}

#ctl00_content_divToTitle button {

    display: flex;
    align-items: center;
    justify-content: center;
}

.customerMessage
{
    display:block;
    padding-top:10px;
    padding-bottom:0px;
}

.supplierMessage {
    display: block;
    padding-top: 10px;
    padding-bottom: 10px;
}

.customerDetails, .contactInfoDetails, .customerDistance, .projectDetails, .installationDetails, .supplierDetails, .messageInternalInfo {
    border: 1px solid lightgray;
    padding: 15px;
    border-radius: 6px;
    margin-top: 10px;
    background-color: #F8F9FA;
}

.uploadMessageWrapper
{
    margin-top:10px;
    display:inline-block;
}

.ui-dialog-content .settingshighlight
{
    margin-bottom:15px;
}

form input.text-input:focus,
form select:focus,
form textarea:focus,
form .wysiwyg:focus-within {
    outline: none;
    border-color: #6A9F19;
    box-shadow: 0 0 0 3px #F4FCE9;
}

.content-box-content table tr:hover {
    background-color: #F4FCE9 !important;
    transition: background-color .12s ease;
}

/** prikklok */
.prikklok {
    background: #fff;
    border: 1px solid #dcdcdc;
    border-radius: 8px;
    padding: 25px;
    box-shadow: 0 2px 4px rgba(0,0,0,.05);
}

.prikklok-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 30px;
}

.status {
    display: flex;
    align-items: center;
    gap: 20px;
}

    .status img {
        width: 72px;
        height: 72px;
    }

.status-info h2 {
    margin: 0;
    font-size: 36px;
}

.status-info .label {
    color: #666;
    text-transform: uppercase;
    font-size: 13px;
    letter-spacing: 1px;
}

.status-info .since {
    color: #777;
    margin-top: 5px;
}

.stats {
    display: flex;
    gap: 50px;
}

.stat {
    text-align: center;
}

    .stat .title {
        font-size: 13px;
        color: #777;
        text-transform: uppercase;
    }

    .stat .value {
        margin-top: 5px;
        font-size: 32px;
        font-weight: 300;
    }

.actions {
    display: flex;
    gap: 15px;
}



.btn-pause {
    background: #ffb400;
    color: white;
}

.btn-stop {
    background: #dc3545;
    color: white;
}

.btn-start {
    background: #00A300;
    color: white;
}

.extra {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid #eee;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

    .extra a {
        text-decoration: none;
        color: #007bff;
    }

@media(max-width:1200px) {

    .prikklok-container {
        flex-direction: column;
        align-items: flex-start;
    }

    .stats {
        width: 100%;
        justify-content: space-between;
    }
}
/** end prikklok */

.yearDropdown {
    position: absolute;
    right: 0;
    top: 100%;
    margin-top: 2px;
    background: #fff;
    border: 1px solid #ccc;
    z-index: 9999;
    min-width: 70px;
}

    .yearDropdown a {
        display: block;
        padding: 6px 10px;
        text-decoration: none;
        white-space: nowrap;
        text-align:center;
    }

        .yearDropdown a:hover {
            background: #f2f2f2;
        }


/* =========================================================================
   SIMPLA DASHBOARD — MODERN LAYER
   Enkel toe te voegen NA style.css. Wijzigt geen markup, enkel opmaak.
   Link toevoegen in dashboard.aspx (head-sectie):
   <link rel="stylesheet" type="text/css" href="css/dashboard-modern.css?v=1" />
   ========================================================================= */

/* ---------- 1. Basis / typografie ---------- */



#main-content h2 {

    padding-bottom: 20px;
    letter-spacing: -0.2px;
}

#main-content h3 {
    letter-spacing: 1px;
}

/* ---------- 2. Content boxes (kaarten) ---------- */

#main-content .content-box {
    border: 1px solid #E5E7EB;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
    margin: 0 0 24px 0;
    transition: box-shadow .15s ease;
}

    #main-content .content-box:hover {
        box-shadow: 0 4px 14px rgba(16, 24, 40, 0.06);
    }

#main-content .content-box-header {
    background-color: #FAFBFC;
    border-bottom: 1px solid #EEF0F2;
    height: auto;
    min-height: 48px;
    display: flex;
    align-items: end;
    padding: 0 4px;
}

fieldset > h3 {
    background-color: #FAFBFC;
    border-bottom: 1px solid #EEF0F2 !important;
    height: auto;
    min-height: 48px;
    display: flex;
    align-items: center;
    padding: 0 15px;
    margin-left:-15px;
    margin-right:-15px;
    margin-top:-15px;
}

    #main-content .content-box-header h3 {
        padding: 13px 16px;
        float: none;
    }

#main-content .content-box-content {
    border-top: none;
}

/* Kleine kaartjes die als tabelcel-headers worden hergebruikt (Verkopen / Aankopen / ...) */
#main-content td > .content-box-header {
    background: transparent;
    border-bottom: 2px solid #F1F3F5;
    margin: -12px -12px 16px -12px !important;
    min-height: 0;
    padding: 0;
}

    #main-content td > .content-box-header h3 {
        letter-spacing: 1px;
    }



/* ---------- 4. Snelkoppelingen (Verkopen / Aankopen / Relaties / ...) ---------- */

/* De bestaande <table class="tblShortcuts"> wordt visueel een responsieve grid,
   zonder de markup te moeten aanpassen. */
#main-content .tblShortcuts {
    display: block;
    width: 100%;
    border-spacing: 0;
    margin-left: 0;
}

    #main-content .tblShortcuts tbody,
    #main-content .tblShortcuts tr {
        display: flex;
        flex-wrap: wrap;
        gap: 16px;
        width: 100%;
    }

        #main-content .tblShortcuts tr td {
            display: block;
            flex: 1 1 190px;
            min-width: 190px;
            box-shadow: none;
            border: 1px solid #E5E7EB;
            border-radius: 12px;
            padding: 14px !important;
            white-space: normal;
        }

#main-content ul.shortcut-buttons-set {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 0;
}

    #main-content ul.shortcut-buttons-set li {
        float: none;
        margin: 0;
    }

#main-content .shortcut-button {
    border-radius: 10px;
    box-shadow: none;
}

    #main-content .shortcut-button span {
      
    }

        #main-content .shortcut-button span img {
            width: 32px;
            margin-bottom: 8px;
            filter: saturate(0.9);
        }


#main-content .addshortcut {
    border-radius: 50%;
}

/* Grote uploadtegels (CODA / facturen inscannen) */
#main-content .dropzone-invoice,
#main-content li[class*="dropzone"] {
    border-radius: 10px;
    overflow: hidden;
}

/* ---------- 5. Agenda / tabellen ---------- */
#main-content .tblAgenda th {
    background-color: #FFFFFF !important;
}





/* ---------- 6. Meldingen ---------- */



#main-content .dashboardnotifications {
    display: block;
}



/* ---------- 8. Responsief ---------- */

@media (max-width: 1300px) {
    #main-content .tblShortcuts tr {
        flex-wrap: wrap;
    }
}

@media (max-width: 900px) {
    #main-content .tblShortcuts tr td {
        flex: 1 1 100%;
    }

    #main-content .prikklok-container {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }

    #main-content .stats {
        flex-wrap: wrap;
        gap: 20px;
    }
}


/** fileuploads drag & drop */
.file-dropzone {
    border: 2px dashed #ccc;
    border-radius: 6px;
    padding: 22px;
    text-align: center;
    cursor: pointer;
    background: #fafafa;
    transition: border-color .2s ease, background-color .2s ease;
    box-sizing: border-box;
    max-width: 550px;
    color: #555;
}

    .file-dropzone:hover {
        border-color: #999;
        background: #f7f7f7;
    }

    .file-dropzone.dragover {
        border-color: #4a90e2;
        background: #eef6ff;
    }

.file-dropzone-icon {
    font-size: 28px;
    line-height: 32px;
    margin-bottom: 6px;
}

.file-dropzone-text strong {
    font-size: 14px;
}

.file-dropzone-text span {
    font-size: 12px;
}


/* Bestanden */

.file-dropzone-files {
    margin-top: 15px;
}

.selected-files {
    width: 100%;
    text-align: left;
}

.selected-file {
    display: flex;
    align-items: center;
    padding: 8px;
    margin-top: 6px;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 5px;
}


/* Thumbnail / icoon */

.selected-file-preview {
    width: 52px;
    height: 52px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 10px;
    border-radius: 4px;
    overflow: hidden;
    background: #f5f5f5;
}

.selected-file-thumbnail {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.selected-file-icon {
    font-size: 26px;
}


/* Bestandsgegevens */

.selected-file-details {
    flex: 1;
    min-width: 0;
}

.selected-file-name {
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 390px;
}

.selected-file-size {
    margin-top: 3px;
    font-size: 11px;
    color: #999;
}


/* Verwijder knop */

.remove-file {
    flex-shrink: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    font-size: 23px;
    line-height: 23px;
    color: #999;
    padding: 4px 8px;
    margin-left: 5px;
}

    .remove-file:hover {
        color: #d9534f;
    }


.column-right table.image-thumbnails {
    display: block;
    width: 100%;
}

    .column-right table.image-thumbnails tbody {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
    }

    .column-right table.image-thumbnails tr {
        display: block;
    }

    .column-right table.image-thumbnails td {
        display: block;
        padding: 0;
    }

    .column-right table.image-thumbnails img {
        width: 100px;
        height: 100px;
        object-fit: cover;
        border-radius: 5px;
        cursor: pointer;
        border: 1px solid #ddd;
        transition: transform 0.15s ease, opacity 0.15s ease;
    }

        .column-right table.image-thumbnails img:hover {
            transform: scale(1.05);
            opacity: 0.85;
        }

/* Lightbox */
#imageLightbox {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.85);
    z-index: 999999;
    display: none;
    align-items: center;
    justify-content: center;
}

    #imageLightbox img {
        max-width: 90vw;
        max-height: 90vh;
        width: auto;
        height: auto;
        object-fit: contain;
        border-radius: 4px;
    }

    /* Vorige / volgende */
    #imageLightbox .lightbox-prev,
    #imageLightbox .lightbox-next {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        width: 55px;
        height: 70px;
        border: 0;
        border-radius: 5px;
        background: rgba(0, 0, 0, 0.45);
        color: #fff;
        font-size: 42px;
        line-height: 60px;
        text-align: center;
        cursor: pointer;
        z-index: 2;
    }

    #imageLightbox .lightbox-prev {
        left: 25px;
    }

    #imageLightbox .lightbox-next {
        right: 25px;
    }

        #imageLightbox .lightbox-prev:hover,
        #imageLightbox .lightbox-next:hover {
            background: rgba(0, 0, 0, 0.75);
        }

    /* Sluiten */
    #imageLightbox .lightbox-close {
        position: absolute;
        right: 25px;
        top: 20px;
        color: #fff;
        font-size: 38px;
        cursor: pointer;
        z-index: 2;
    }

    /* Teller */
    #imageLightbox .lightbox-counter {
        position: absolute;
        bottom: 20px;
        left: 50%;
        transform: translateX(-50%);
        color: #fff;
        font-size: 14px;
    }



#dialog-modal-senddocument td {
    padding-top:5px;
    padding-bottom:5px;
}

    #dialog-modal-senddocument td .file-dropzone
    {

        padding:0px;
    }




    /* ============================================
   Simpla – aanvullende fixes HD-resolutie (vervolg)
   ============================================ */

/* Dashboard – voorkomt horizontale overflow op HD-resolutie */
.content-box {
    min-width: 0 !important;
}

.content-box-header {
    flex-wrap: wrap !important;
}

.content-box-tabs {
    flex-wrap: wrap !important;
    width: auto !important;
}

    /* Tabs: altijd natuurlijke (tekstgebonden) breedte, ook wanneer
   ze door de eerdere fix naar een tweede rij afbreken. Voorkomt dat
   een afgebroken rij tabs kunstmatig gelijk opgerekt wordt. */
    .content-box-tabs li {
        flex: 0 1 auto !important;
    }

/* Zwarte menubalk: bij smallere (HD) breedtes past menu + instellingen +
   zoekbalk + iconen niet op één lijn, waardoor de zoekbalk/iconen los en
   scheef op een tweede regel belanden. Compactere opmaak + het optionele
   AI-vertaalknopje verbergen houdt alles op één nette lijn.
   Pas de max-width hieronder aan indien nodig voor jouw schermbreedte. */
@media (max-width: 1500px) {
    .navbar .dropdown > a,
    .navbar > a.navbar_dashboard,
    .navbar > a.navbar_contract,
    .navbar > a.navbar_project,
    .navbar > a.navbar_time {
        padding-left: 6px !important;
        padding-right: 0 !important;
    }

    .navbar .right a {
        padding-left: 6px !important;
        padding-right: 0 !important;
    }

    .navbar .right input.txtSearch {
        width: 75px !important;
    }

    .navbar .right a.navbarAI {
        display: none !important;
    }
}

.content-box {
    min-width: 0 !important;
    max-width: 100% !important;
}

.content-box-content {
    overflow: visible !important; /* niet meer scrollbaar zelf */
}

.table-scroll-wrapper {
    overflow-x: auto;
    max-width: 100%;
}

.pagerrow-outside {
    position: sticky;
    top: 0;
    z-index: 100;
    background: #fff;
}


/* =========================================================
   Simpla – linkernavigatie in lijn met de topnavigatie
   Plaats NA de bestaande stylesheets (bv. in MasterPage <head>)
   ========================================================= */

/* ---------- Kleurthema (volgt het geladen kleurbestand) ----------
   Standaard = groen (style.css). Als blue/purple/red/orange/pink.css
   geladen is, neemt :root:has(...) automatisch die kleuren over.   */
:root {
    --theme: #57a000;
    --theme-dark: #459300;
    --theme-soft: #eef7e0; /* groen */
}

    :root:has(link[href*="blue.css"]) {
        --theme: #0078cc;
        --theme-dark: #004a95;
        --theme-soft: #eff6ff;
    }

    :root:has(link[href*="purple.css"]) {
        --theme: #5634dd;
        --theme-dark: #4326b8;
        --theme-soft: #f2e6ff;
    }

    :root:has(link[href*="red.css"]) {
        --theme: #bb0000;
        --theme-dark: #950000;
        --theme-soft: #ffe6e6;
    }

    :root:has(link[href*="orange.css"]) {
        --theme: #cd7b00;
        --theme-dark: #ab6600;
        --theme-soft: #fff2e6;
    }

    :root:has(link[href*="pink.css"]) {
        --theme: #e91e63;
        --theme-dark: #ad1457;
        --theme-soft: #fce4ec;
    }

:root {
    --sb-bg: #222222; /* = .navbar achtergrond            */
    --sb-bg-hover: #2c2c2c;
    --sb-bg-active: #333333;
    --sb-border: #2f2f2f;
    --sb-text: #aaaaaa; /* = .dropbtn kleur                 */
    --sb-text-hover: #ffffff; /* = hover/actief in topnav         */
    --sb-muted: #6f6f6f;
    --sb-accent: var(--theme); /* actieve link-streep  */
    --sb-section-bg: var(--theme); /* sectiekoppen         */
    --sb-section-bg-hover: var(--theme-dark);
    --sb-badge-bg: #e6db55; /* = gele badge in topnav           */
    --sb-badge-text: #000000;
    --sb-width: 180px;
    --sb-topbar-h: 40px; /* = hoogte .navbar                 */
}

/* ---------- Container ---------- */
#sidebar #sidebar-wrapper {
    width: var(--sb-width);
    height: 100vh;
    overflow-y: auto;
    overflow-x: hidden;
    background: var(--sb-bg) !important;
    border-right: 1px solid #111;
    font-family: Arial, Helvetica, sans-serif;
    scrollbar-width: thin;
    scrollbar-color: #444 var(--sb-bg);
}

    #sidebar #sidebar-wrapper::-webkit-scrollbar {
        width: 6px;
    }

    #sidebar #sidebar-wrapper::-webkit-scrollbar-thumb {
        background: #444;
    }

    #sidebar #sidebar-wrapper::-webkit-scrollbar-track {
        background: var(--sb-bg);
    }

/* ---------- Profiel / welkom: zelfde hoogte als topbalk ---------- */
#sidebar #profile-links {
    box-sizing: border-box;
    height: var(--sb-topbar-h);
    display: flex;
    align-items: center;
    gap: 4px;
    text-align: left;
    padding: 0 15px;
    margin: 0 0 8px;
    width: auto;
    color: var(--sb-muted);
    font-size: 12px;
    border-bottom: 1px solid #111;
    background: #1b1b1b;
}

    #sidebar #profile-links a,
    #sidebar #profile-links a.companyname {
        color: var(--sb-text-hover);
        font-size: 13px;
        text-decoration: none;
    }

/* ---------- Hoofdnavigatie ---------- */
#sidebar #main-nav {
    margin: 0;
    padding: 0 0 24px;
    list-style: none;
    text-align: left;
}

    #sidebar #main-nav > li {
        text-align: left;
        padding: 0;
        margin: 0;
        background: none;
    }

        /* Sectiekoppen (Agenda, Klanten & contacten, ...) */
        #sidebar #main-nav > li > a.nav-top-item {
            display: flex;
            align-items: center;
            gap: 6px;
            background: none !important;
            color: var(--sb-muted) !important;
            font-size: 11px;
            font-weight: bold;
            letter-spacing: .06em;
            text-transform: uppercase;
            text-align: left;
            padding: 16px 15px 6px;
            margin: 0;
            border: 0;
            text-decoration: none;
            transition: color .15s;
        }

            #sidebar #main-nav > li > a.nav-top-item:hover {
                color: var(--sb-text-hover) !important;
            }

            /* Sectiekoppen in kleur (blauwe balk, zoals de oorspronkelijke Simpla-look) */
            #sidebar #main-nav > li > a.nav-top-item:not(.no-submenu) {
                background: var(--sb-section-bg) !important;
                color: #ffffff !important;
                padding: 8px 15px;
                margin: 12px 0 4px;
                font-size: 11.5px;
            }

                #sidebar #main-nav > li > a.nav-top-item:not(.no-submenu):hover {
                    background: var(--sb-section-bg-hover) !important;
                    color: #ffffff !important;
                }

            #sidebar #main-nav > li > a.nav-top-item.current:not(.no-submenu) {
                background: var(--sb-section-bg-hover) !important;
                color: #ffffff !important;
            }

            /* Items zonder submenu (Dashboard, ...) = gewone link zoals in topnav */
            #sidebar #main-nav > li > a.nav-top-item.no-submenu {
                text-transform: none;
                letter-spacing: 0;
                font-size: 14px;
                font-weight: normal;
                color: var(--sb-text) !important;
                padding: 10px 15px 10px 12px;
                border-left: 3px solid transparent;
            }

                #sidebar #main-nav > li > a.nav-top-item.no-submenu:hover {
                    background: var(--sb-bg-hover) !important;
                    color: var(--sb-text-hover) !important;
                }

                #sidebar #main-nav > li > a.nav-top-item.no-submenu.current {
                    background: var(--sb-bg-active) !important;
                    color: var(--sb-text-hover) !important;
                    border-left-color: var(--sb-accent);
                }

    /* Badge: identiek aan topnav (gele badge, zwarte tekst) */
    #sidebar #main-nav .badge {
        margin-left: auto;
        background: var(--sb-badge-bg) !important;
        color: var(--sb-badge-text) !important;
        font-size: 11px;
        font-weight: normal;
        letter-spacing: 0;
        text-transform: none;
        line-height: 1;
        padding: 2px 5px;
        border-radius: 4px;
        text-shadow: none;
        box-shadow: none;
    }

    /* ---------- Submenu ---------- */
    #sidebar #main-nav > li > ul {
        list-style: none;
        margin: 0;
        padding: 0;
        text-align: left;
    }

        #sidebar #main-nav > li > ul > li {
            margin: 0;
            padding: 0;
            text-align: left;
            background: none;
        }

            #sidebar #main-nav > li > ul > li > a {
                display: block;
                text-align: left;
                color: var(--sb-text) !important;
                font-size: 13px;
                line-height: 1.35;
                padding: 7px 15px 7px 12px;
                border-left: 3px solid transparent;
                background: none !important;
                text-decoration: none;
                transition: background-color .15s, color .15s;
            }

                #sidebar #main-nav > li > ul > li > a:hover {
                    background: var(--sb-bg-hover) !important;
                    color: var(--sb-text-hover) !important;
                }

                #sidebar #main-nav > li > ul > li > a.current {
                    background: var(--sb-bg-active) !important;
                    color: var(--sb-text-hover) !important;
                    border-left-color: var(--sb-accent);
                }

    /* Toetsenbordfocus */
    #sidebar #main-nav a:focus-visible {
        outline: 2px solid var(--sb-accent);
        outline-offset: -2px;
    }

/* Oude achtergrondkolom (bg-body.gif) uitschakelen */
body {
    background-image: none !important;
}

#body-wrapper {
    background-image: none !important;
}


/* =========================================================================
   Simpla – DETAILSCHERMEN (offerte, factuur, bestelbon, ...) — 16/10/2026
   Enkel CSS, geen markup-wijzigingen. Alles gescoped op .manage-box
   (= <div class="content-box-content manage-box"> op de detailpagina's).
   Kleuren volgen het geladen kleurthema via --theme / --theme-dark /
   --theme-soft (zie blok "Kleurthema" hierboven).
   Uitschakelen: dit volledige blok verwijderen.
   ========================================================================= */

/* ---------- 0. Kleurthema: SIMPLA-thema (defaultcolor.css) ontbrak ---------- */
:root:has(link[href*="defaultcolor.css"]) {
    --theme: #5BC1AF;
    --theme-dark: #3E9E8D;
    --theme-soft: #EDF8F6;
}

:root {
    --dt-border: #E5E7EB;
    --dt-border-input: #D1D5DB;
    --dt-border-hover: #9CA3AF;
    --dt-text: #374151;
    --dt-muted: #6B7280;
    --dt-surface: #FFFFFF;
    --dt-subtle: #F9FAFB;
    --dt-radius: 8px;
    --dt-radius-sm: 6px;
    --dt-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 1px 3px rgba(16, 24, 40, .05);
}

/* ---------- 1. Kaarten (fieldsets) op de grijze .manage-box-achtergrond ---------- */

    .manage-box fieldset.highlight,
    .manage-box fieldset.nohighlight,
    .manage-box > #tab2,
    .manage-box > #tab3 {
        background-color: var(--dt-surface);
        border: 1px solid var(--dt-border);
        border-radius: var(--dt-radius);
        box-shadow: var(--dt-shadow);
        padding: 20px;
        box-sizing: border-box;
    }

    .manage-box .content-box.column-right {
        border-radius: var(--dt-radius);
        overflow: hidden;
    }

/* ---------- 2. Labels: compacter en rustiger ---------- */
    .manage-box .highlight > p > label,
    .manage-box .nohighlight > p > label,
    .manage-box fieldset > label {
        font-size: 13px;
        color: var(--dt-muted);
        letter-spacing: .01em;
        padding-bottom: 6px;
    }

    .manage-box .highlight > p:not(:first-child) > label,
    .manage-box .nohighlight > p:not(:first-child) > label {
        margin-top: 16px;
    }

/* ---------- 3. Invoervelden ---------- */
    /* Horizontale padding blijft 6px (= origineel) zodat breedtes niet verschuiven */
    .manage-box input.text-input,
    .manage-box select,
    .manage-box textarea {
        padding-top: 7px;
        padding-bottom: 7px;
        line-height: 20px;
        font-size: 14px;
        color: var(--dt-text);
        background-color: var(--dt-surface);
        border: 1px solid var(--dt-border-input);
        border-radius: var(--dt-radius-sm);
        transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
    }

    .manage-box textarea {
        line-height: 1.5;
    }

    .manage-box select.textbutton {
        padding-top: 3px;
        padding-bottom: 3px;
        line-height: normal;
    }

        .manage-box input.text-input:hover,
        .manage-box select:hover,
        .manage-box textarea:hover {
            border-color: var(--dt-border-hover);
        }

        .manage-box input.text-input:focus,
        .manage-box select:focus,
        .manage-box textarea:focus {
            outline: none;
            border-color: var(--theme);
            box-shadow: 0 0 0 3px var(--theme-soft);
        }

        .manage-box input.text-input[readonly],
        .manage-box input.text-input:disabled,
        .manage-box select:disabled,
        .manage-box textarea[readonly],
        .manage-box .aspNetDisabled {
            background-color: #F3F4F6;
            color: var(--dt-muted);
        }

    .manage-box input::placeholder,
    .manage-box textarea::placeholder {
        color: #9CA3AF;
    }

    .manage-box input[type="checkbox"],
    .manage-box input[type="radio"] {
        accent-color: var(--theme);
    }

    /* Chosen-dropdowns (product, klant) in dezelfde stijl */
    .manage-box .chosen-container-single .chosen-single {
        border-radius: var(--dt-radius-sm) !important;
        border-color: var(--dt-border-input) !important;
        background-image: none !important;
    }

    .manage-box .chosen-container-active .chosen-single,
    .manage-box .chosen-container-active.chosen-with-drop .chosen-single {
        border-color: var(--theme) !important;
        box-shadow: 0 0 0 3px var(--theme-soft) !important;
    }

    .manage-box .chosen-container .chosen-drop {
        border-color: var(--dt-border-input);
        border-radius: 0 0 var(--dt-radius-sm) var(--dt-radius-sm);
        box-shadow: 0 8px 20px rgba(16, 24, 40, .10);
    }

    /* (selectiekleur voor alle Chosen-lijsten: zie sectie 10) */

/* ---------- 4. Documentlijnen ---------- */

    /* Kolomkoppen "Nieuwe offertelijn maken / aantal / stukprijs / ..." */
    .manage-box .tblAddNewLine th {
        font-size: 12px !important;
        font-weight: 600 !important;
        text-transform: uppercase;
        letter-spacing: .05em;
        padding: 8px 6px !important;
        border-bottom: 2px solid var(--dt-border) !important;
    }

    /* Invoerrij voor een nieuwe lijn: subtiel getint zodat ze opvalt */
    .manage-box tr.addDetailLine > td {
        background-color: var(--theme-soft) !important;
        padding-top: 10px !important;
        padding-bottom: 10px !important;
    }

    /* Bestaande lijnen: enkel scheidingslijn i.p.v. kader rond elke rij */
    .manage-box tr.addedDetailLine {
        border: 0;
        border-bottom: 1px solid #EDEFF2;
    }

        .manage-box tr.addedDetailLine > td {
            padding-top: 6px !important;
            padding-bottom: 6px !important;
            vertical-align: middle;
            font-variant-numeric: tabular-nums;
            transition: background-color .12s ease;
        }

        .manage-box tr.addedDetailLine:hover > td {
            background-color: color-mix(in srgb, var(--theme) 5%, #FFFFFF);
        }

        /* Velden in de lijnen: kader pas zichtbaar bij hover/focus → rustig raster */
        .manage-box tr.addedDetailLine input.text-input:not(.txtProductCodeLine) {
            border-color: transparent;
            background-color: transparent;
        }

        .manage-box tr.addedDetailLine:hover input.text-input:not(.txtProductCodeLine):not([readonly]):not(:disabled) {
            border-color: var(--dt-border-input);
            background-color: var(--dt-surface);
        }

        .manage-box tr.addedDetailLine input.text-input:not(.txtProductCodeLine):focus {
            border-color: var(--theme);
            background-color: var(--dt-surface);
            box-shadow: 0 0 0 3px var(--theme-soft);
        }

        /* Productcode + omschrijving + knop "..." (lange omschrijving) moeten samen in
           de eerste kolom passen. De velden zijn in procenten breed (20% / 68% / 88%)
           en de cel mag niet afbreken; op HD-schermen schoof de knop daardoor buiten
           de cel, onder de kolom "aantal". Nu: velden inclusief opvulling meten en de
           omschrijving smaller maken met de ruimte voor vinkje + knop. */
        #main-content .manage-box tr.addedDetailLine > td:first-child > input.text-input {
            box-sizing: border-box;
            height: 36px;
            vertical-align: middle;
        }

        /* minimumbreedtes: tellen mee bij het verdelen van de tabelkolommen, zodat de
           eerste kolom nooit smaller wordt dan code + omschrijving + knop */
        #main-content .manage-box tr.addedDetailLine > td:first-child > input.text-input:not(.txtProductCodeLine) {
            min-width: 140px;
        }

        #main-content .manage-box tr.addedDetailLine > td:first-child > input.txtProductCodeLine {
            min-width: 70px;
        }

        /* HD-schermen: de actiekolom (kleur, omhoog/omlaag, kopiëren, optioneel, #) mag
           over twee regels lopen, zodat de omschrijving genoeg plaats krijgt */
        @media (max-width: 1500px) {
            #main-content .manage-box tr.addedDetailLine > td.actionscolumn {
                white-space: normal !important;
                min-width: 200px;
                line-height: 2;
            }
        }

        .manage-box tr.addedDetailLine > td:first-child > input.text-input:not(.txtProductCodeLine) {
            width: calc(88% - 56px) !important;
        }

        .manage-box tr.addedDetailLine > td:first-child:has(> input.txtProductCodeLine) > input.text-input:not(.txtProductCodeLine) {
            width: calc(68% - 56px) !important;
        }

        /* knop "..." compacter */
        .manage-box tr.addedDetailLine > td:first-child > a.button {
            padding: 8px 10px;
            vertical-align: middle;
        }

        /* Getallen rechts uitlijnen (aantal, prijs, korting, BTW, incl.) */
        .manage-box tr.addedDetailLine input.supersmall-input,
        .manage-box tr.addDetailLine input.supersmall-input {
            text-align: right;
            font-variant-numeric: tabular-nums;
        }

        .manage-box tr.addedDetailLine input.txtLineIndexInfo {
            text-align: center;
        }

        /* Actiekolom (omhoog/omlaag, kopiëren, verwijderen) gedempt tot hover,
           zoals al op de overzichtslijsten (tr.itemrow) */
        .manage-box tr.addedDetailLine > td.actionscolumn {
            opacity: .45;
            transition: opacity .2s ease;
        }

        .manage-box tr.addedDetailLine:hover > td.actionscolumn,
        .manage-box tr.addedDetailLine:focus-within > td.actionscolumn {
            opacity: 1;
        }

    /* Actieknopjes: vlak i.p.v. verloop */
    /* (geen 'display' zetten: a[id$="_btnUp"]/_btnDown moeten verborgen blijven) */
    .manage-box .actionscolumn a {
        padding: 2px 5px;
        background: var(--dt-surface);
        border: 1px solid var(--dt-border);
        border-radius: var(--dt-radius-sm);
        vertical-align: middle;
        transition: background-color .15s ease, border-color .15s ease;
    }

        .manage-box .actionscolumn a:hover {
            background: var(--theme-soft);
            border-color: var(--theme);
        }

    .manage-box .chkOptional {
        background: var(--dt-surface);
        border: 1px solid var(--dt-border);
        border-radius: var(--dt-radius-sm);
        padding: 2px 6px;
    }

    /* Bulkacties boven de lijnen */
    .manage-box [id$="divToTitle"] {
        border-color: var(--dt-border);
        border-radius: var(--dt-radius-sm) var(--dt-radius-sm) 0 0;
        background: var(--dt-subtle);
    }

/* ---------- 5. Totalen ---------- */
    .manage-box tr.totalRow > td {
        font-variant-numeric: tabular-nums;
        padding-top: 6px !important;
        padding-bottom: 6px !important;
        color: var(--dt-text);
    }

        .manage-box tr.totalRow > td strong {
            font-weight: 600;
        }

    /* Label (Totaal excl. BTW: / BTW-bedrag: / TOTAAL INCL. BTW: ...) rechts uitlijnen
       tegen het bedrag, met een vaste tussenruimte. Hoe breed de kolom ook is
       (hangt af van de lijnen erboven), de afstand is overal dezelfde. */
    .manage-box tr.totalRow > td:first-child {
        text-align: right !important;
        white-space: nowrap;
        padding-right: 20px !important;
    }

    .manage-box tr.totalRow > td:nth-child(2) {
        text-align: left !important;
        white-space: nowrap;
        padding-left: 0 !important;
    }

    /* Optielinks links naast de totalen (BTW-percentage, korting, marge, eenheid, ...)
       staan in één cel die over alle totaalrijen loopt (rowspan). Stonden ze onder
       elkaar, dan werd die cel hoger dan de totalen en trok ze de totaalrijen uit
       elkaar. Nu: onder elkaar, maar compact (13px, kleine tussenruimte). */
    .manage-box tr > td[rowspan] {
        padding-top: 10px !important;
        padding-right: 24px !important;
        line-height: 1.5;
    }

        .manage-box tr > td[rowspan] > span {
            display: inline;
        }

            .manage-box tr > td[rowspan] > span > label {
                display: block;
                margin: 0 0 2px 0;
                padding: 0;
                font-size: 13px;
                line-height: 18px;
            }

                .manage-box tr > td[rowspan] > span > label a {
                    font-size: 13px !important;
                }

            /* opengeklapte optie: eigen vakje op een nieuwe regel */
            .manage-box tr > td[rowspan] > span > span:not([style*="none"]) {
                display: block !important;
                margin: 2px 0 10px;
                padding: 10px 12px;
                font-size: 13px;
                background: var(--dt-subtle);
                border: 1px solid var(--dt-border);
                border-radius: var(--dt-radius-sm);
            }

                .manage-box tr > td[rowspan] > span > span br {
                    display: none;
                }

    /* Eindtotaal (offerte / factuur / bestelbon) valt op */
    .manage-box tr.totalRow:has(.spnTotal, .litBillTotal, .litOrderTotal) > td {
        border-top: 2px solid var(--dt-border);
        padding-top: 12px !important;
        padding-bottom: 12px !important;
        font-size: 18px;
    }

        .manage-box tr.totalRow:has(.spnTotal, .litBillTotal, .litOrderTotal) > td strong {
            font-weight: 700;
            color: #111827;
        }

    /* Factuur: "nog te betalen" in themakleur */
    .manage-box tr.totalRow:has(.amountToPay) > td strong {
        color: var(--theme-dark);
        font-weight: 700;
    }

/* ---------- 6. Knoppen: duidelijke hiërarchie (normaal gewicht, niet vet) ----------
   Geldt op de detailschermen (.manage-box) én in de actiebalk van alle
   andere detailschermen (klant, product, leverancier, contact, project, ...). */
    .manage-box .button,
    #main-content :is(div, span, fieldset):has(> p > input[id*="btnConfirm"]):not(:has(input.text-input, textarea, select)) .button {
        border-radius: var(--dt-radius-sm);
    }



    /* Primair (OPSLAAN, OPSLAAN & VERSTUREN): themakleur + lichte diepte */
    .manage-box .buttonsuperimportant:not(.secondarybutton),
    .manage-box .buttonimportant,
    #main-content :is(div, span, fieldset):has(> p > input[id*="btnConfirm"]):not(:has(input.text-input, textarea, select)) .buttonsuperimportant:not(.secondarybutton) {
        border: 1px solid transparent;
        box-shadow: 0 1px 2px rgba(16, 24, 40, .12);
    }

        .manage-box .buttonsuperimportant:not(.secondarybutton):hover,
        .manage-box .buttonimportant:hover,
        #main-content :is(div, span, fieldset):has(> p > input[id*="btnConfirm"]):not(:has(input.text-input, textarea, select)) .buttonsuperimportant:not(.secondarybutton):hover {
            box-shadow: 0 4px 10px rgba(16, 24, 40, .16);
        }

    /* Primair-maar-secundair (VOORBEELD BEKIJKEN, OPSLAAN EN NIEUW PRODUCT, ...): omlijnd */
    .manage-box .buttonsuperimportant.secondarybutton,
    #main-content :is(div, span, fieldset):has(> p > input[id*="btnConfirm"]):not(:has(input.text-input, textarea, select)) .buttonsuperimportant.secondarybutton {
        background: var(--dt-surface);
        color: var(--theme-dark);
        border: 1px solid var(--theme);
    }

        .manage-box .buttonsuperimportant.secondarybutton:hover,
        #main-content :is(div, span, fieldset):has(> p > input[id*="btnConfirm"]):not(:has(input.text-input, textarea, select)) .buttonsuperimportant.secondarybutton:hover {
            filter: none;
            background: var(--theme-soft);
        }

    .manage-box .button:focus-visible,
    #main-content :is(div, span, fieldset):has(> p > input[id*="btnConfirm"]):not(:has(input.text-input, textarea, select)) .button:focus-visible {
        outline: none;
        box-shadow: 0 0 0 3px var(--theme-soft), 0 0 0 1px var(--theme);
    }

/* ---------- 7. Sticky actiebalk onderaan (alle detailschermen) ----------
   Herkent automatisch het blok (div / span / fieldset) dat enkel de
   opslaanknoppen (btnConfirm...) bevat en geen invoervelden.
   Werkt o.a. op offerte, factuur, bestelbon, creditnota, leveringsbon,
   aankoopbestelling, contract, installatie, klant, product, leverancier,
   contactpersoon, project en gebruiker. */
#main-content :is(div, span, fieldset):has(> p > input[id*="btnConfirm"]):not(:has(input.text-input, textarea, select)) {
    display: block;
    clear: both; /* zwevende knoppen (opslaan / vorige / volgende) erboven, niet ernaast */
    position: sticky;
    bottom: 12px;
    z-index: 50;
    
    padding: 12px 16px 4px;
    background: rgba(255, 255, 255, .94);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    border: 1px solid var(--dt-border);
    border-radius: var(--dt-radius);
    box-shadow: 0 6px 20px rgba(16, 24, 40, .10);
}

    #main-content :is(div, span, fieldset):has(> p > input[id*="btnConfirm"]):not(:has(input.text-input, textarea, select)) > p {
        padding: 0 0 8px;
        margin: 0;
    }

        #main-content :is(div, span, fieldset):has(> p > input[id*="btnConfirm"]):not(:has(input.text-input, textarea, select)) > p[style*="italic"] {
            font-size: 12px;
            color: var(--dt-muted);
        }

    /* Zwevende knoppen rechts (opslaan / overzicht / vorige / volgende) in de balk */
    #main-content :is(div, span, fieldset):has(> p > input[id*="btnConfirm"]):not(:has(input.text-input, textarea, select)) > span[style*="float"] {
        padding-top: 0 !important;
    }

/* Klant / product / leverancier / gebruiker / ...: de knoppen staan in een <span>
   die óók het hele formulier omvat → dan wordt de knoppenrij (<p>) zelf de balk */
#main-content :is(div, span, fieldset):has(> p > input[id*="btnConfirm"]):has(input.text-input, textarea, select) > p:has(> input[id*="btnConfirm"]) {
    position: sticky;
    bottom: 12px;
    z-index: 50;
    clear: both;
    margin: 20px 0 0;
    padding: 12px 16px;
    background: rgba(255, 255, 255, .94);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    border: 1px solid var(--dt-border);
    border-radius: var(--dt-radius);
    box-shadow: 0 6px 20px rgba(16, 24, 40, .10);
}

    #main-content :is(div, span, fieldset):has(> p > input[id*="btnConfirm"]):has(input.text-input, textarea, select) > p:has(> input[id*="btnConfirm"]) .buttonsuperimportant:not(.secondarybutton) {
        border: 1px solid transparent;
        box-shadow: 0 1px 2px rgba(16, 24, 40, .12);
    }

    #main-content :is(div, span, fieldset):has(> p > input[id*="btnConfirm"]):has(input.text-input, textarea, select) > p:has(> input[id*="btnConfirm"]) .buttonsuperimportant.secondarybutton {
        background: var(--dt-surface);
        color: var(--theme-dark);
        border: 1px solid var(--theme);
    }

        #main-content :is(div, span, fieldset):has(> p > input[id*="btnConfirm"]):has(input.text-input, textarea, select) > p:has(> input[id*="btnConfirm"]) .buttonsuperimportant.secondarybutton:hover {
            filter: none;
            background: var(--theme-soft);
        }

    /* Zwevende knoppen (opslaan / overzicht / vorige / volgende) vlak vóór die balk */
    #main-content :is(div, span, fieldset):has(> p > input[id*="btnConfirm"]):has(input.text-input, textarea, select) > span[style*="float"]:has(> [id$="lnkSaveBottom"]) {
        position: static; /* onder de vastgeplakte balk schuiven, niet erover */
        padding-top: 0 !important;
        margin-top: 16px;
    }

        #main-content :is(div, span, fieldset):has(> p > input[id*="btnConfirm"]):has(input.text-input, textarea, select) > span[style*="float"]:has(> [id$="lnkSaveBottom"]) .button.secondarybutton {
            background: var(--dt-surface);
            border: 1px solid var(--dt-border-input);
            color: var(--dt-text);
            border-radius: var(--dt-radius-sm);
        }

/* Offerte / factuur / bestelbon: de zwevende knoppen staan op een eigen lijn boven de balk */
#main-content .tab-content > span:has(> [id$="lnkSaveBottom"]) {
    position: static; /* onder de vastgeplakte balk schuiven, niet erover */
    padding-top: 0 !important;
    margin-top: 16px;
}

/* ---------- 8. Tabs, meldingen, info-blokken ---------- */
ul.content-box-tabs li a.current {
    border-radius: var(--dt-radius-sm) var(--dt-radius-sm) 0 0;
    box-shadow: inset 0 -2px 0 var(--theme);
}

.manage-box .notification {
    border-radius: var(--dt-radius-sm);
}

.manage-box .customerDetails,
.manage-box .contactInfoDetails,
.manage-box .customerDistance,
.manage-box .projectDetails,
.manage-box .installationDetails,
.manage-box .supplierDetails,
.manage-box .messageInternalInfo {
    border-color: var(--dt-border);
    border-radius: var(--dt-radius);
    background-color: var(--dt-subtle);
}

.manage-box .file-upload-wrap {
    border-radius: var(--dt-radius);
}

/* ---------- 10. Selectiekleur in keuzelijsten (zachter, leesbaar) ----------
   Chosen-lijsten overal + gewone <select>-lijsten (Chrome/Edge 135+;
   andere browsers tonen hun standaardlijst, er gaat niets stuk). */
html .chosen-container .chosen-results li.highlighted {
    background: var(--theme-soft, #EEF2F7) !important;
    background-image: none !important;
    color: #111827 !important;
    font-weight: normal;
    box-shadow: inset 3px 0 0 var(--theme, #57a000);
}

html .chosen-container .chosen-results li.result-selected {
    font-weight: 600;
    color: var(--theme-dark, #459300);
}

html .chosen-container .chosen-results li {
    padding: 6px 10px;
    line-height: 1.35;
}

@supports (appearance: base-select) {
    #main-content select:not([multiple]):not([size]),
    .ui-dialog select:not([multiple]):not([size]),
    #main-content select:not([multiple]):not([size])::picker(select),
    .ui-dialog select:not([multiple]):not([size])::picker(select) {
        appearance: base-select;
    }

    /* Eigen tekstkleur (niet erven: .bulk-actions heeft witte tekst), op één regel */
    #main-content select:not([multiple]):not([size]),
    .ui-dialog select:not([multiple]):not([size]) {
        background-color: #FFFFFF;
        color: #374151;
        border: 1px solid #D1D5DB;
        border-radius: 6px;
        cursor: pointer;
        align-items: center;
        gap: 6px;
        white-space: nowrap;
        overflow: hidden;
    }

        #main-content select:not([multiple]):not([size]):focus,
        #main-content select:not([multiple]):not([size]):open,
        .ui-dialog select:not([multiple]):not([size]):focus {
            color: #111827;
        }

    /* Eigen pijltje (vast rechts, verspringt niet) i.p.v. het standaardpijltje.
       Te lange tekst wordt netjes vóór het pijltje afgeknipt. */
    #main-content select:not([multiple]):not([size]),
    .ui-dialog select:not([multiple]):not([size]) {
        display: inline-flex;
        align-items: center;
        white-space: nowrap;
        overflow: hidden;
        padding-right: 26px !important;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%236B7280' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: right 9px center;
        background-size: 10px 6px;
    }

        #main-content select:not([multiple]):not([size])::picker-icon,
        .ui-dialog select:not([multiple]):not([size])::picker-icon {
            display: none;
        }

    /* Actieve bulkacties (themakleur) → wit pijltje */
    #main-content select.buttonimportant:not([multiple]):not([size]) {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23FFFFFF' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    }

        #main-content select:not([multiple]):not([size])::picker(select),
        .ui-dialog select:not([multiple]):not([size])::picker(select) {
            border: 1px solid #D1D5DB;
            border-radius: 6px;
            background: #FFFFFF;
            box-shadow: 0 8px 20px rgba(16, 24, 40, .12);
            padding: 4px 0;
            margin-top: 2px;
            max-height: 360px;
        }

        #main-content select:not([multiple]):not([size]) option,
        .ui-dialog select:not([multiple]):not([size]) option {
            text-transform: none;
            font-size: 14px;
            font-weight: normal;
            white-space: nowrap;
            padding: 6px 10px;
            color: #111827;
            background: #FFFFFF;
            line-height: 1.35;
        }

            #main-content select:not([multiple]):not([size]) option::checkmark,
            .ui-dialog select:not([multiple]):not([size]) option::checkmark {
                display: none;
            }

            #main-content select:not([multiple]):not([size]) option:hover,
            #main-content select:not([multiple]):not([size]) option:focus-visible,
            .ui-dialog select:not([multiple]):not([size]) option:hover,
            .ui-dialog select:not([multiple]):not([size]) option:focus-visible {
                outline: none;
                background: var(--theme-soft, #EEF2F7);
                box-shadow: inset 3px 0 0 var(--theme, #57a000);
            }

            #main-content select:not([multiple]):not([size]) option:checked,
            .ui-dialog select:not([multiple]):not([size]) option:checked {
                font-weight: 600;
                color: var(--theme-dark, #459300);
            }

            #main-content select:not([multiple]):not([size]) option:disabled,
            .ui-dialog select:not([multiple]):not([size]) option:disabled {
                color: #9CA3AF;
                cursor: default;
            }
}

/* ---------- 11. Bulkacties + status per rij in overzichten ---------- */

/* Bulkacties (AFDRUKKEN, DOWNLOADEN, VIA E-MAIL VERSTUREN, [STATUS AANPASSEN], ...):
   zelfde hoogte en lijn als de knoppen ernaast, allemaal even breed */
#main-content .actionbuttons .button {
    vertical-align: middle;
}

#main-content .actionbuttons select.button {
    box-sizing: border-box;
    width: 180px !important;
    height: 38px;
    padding: 0 8px 0 12px;
    font-size: 14px;
    line-height: normal;
    vertical-align: middle;
    text-align: left;
    background-color: #F9FAFB;
    color: #374151;
    border: 1px solid #E5E7EB;
    border-radius: 6px;
    transform: none !important;
    filter: none !important;
}

    #main-content .actionbuttons select.button:hover {
        background-color: #F3F4F6;
        border-color: #D1D5DB;
    }

    #main-content .actionbuttons select.button:focus {
        outline: none;
        border-color: var(--theme, #57a000);
        box-shadow: 0 0 0 3px var(--theme-soft, #eef7e0);
    }

    /* Actief (rijen/lijnen aangevinkt → simpla.js voegt .buttonimportant toe):
       themakleur met witte tekst, net als de knoppen ernaast.
       Geldt ook voor de lijnacties op de detailschermen (ddlToTitle: verplaatsen, ...) */
    #main-content .actionbuttons select.button.buttonimportant,
    #main-content .actionbuttons select.button.buttonimportant:hover,
    #main-content select.button.buttonimportant,
    #main-content select.button.buttonimportant:hover {
        background-color: var(--theme, #57a000);
        border-color: var(--theme, #57a000);
        color: #FFFFFF !important;
    }

        /* opties in de uitgeklapte lijst blijven donker op wit */
        #main-content .actionbuttons select.button option,
        #main-content select.button.buttonimportant option {
            background: #FFFFFF;
            color: #111827;
            text-transform: none;
        }

/* Statuskeuzelijst per rij in de overzichten: overal even breed */
#main-content td select.textbutton {
    box-sizing: border-box;
    width: 140px !important;
    max-width: 140px;
    height: 26px;
    padding: 0 4px 0 6px;
    vertical-align: middle;
    border: 1px solid #E5E7EB;
    border-radius: 6px;
    background-color: #FFFFFF;
    color: #374151;
}

/* ---------- 12. HD-resolutie, knoppen zonder icoon, rechterkolom, overzichten ---------- */

/* 12a. Omlijnde knoppen (VOORBEELD BEKIJKEN, AFSPRAAK PLANNEN, KLANTENFICHE BEKIJKEN, ...)
        tonen geen icoon (lichtgrijs icoon is onzichtbaar op wit) → ook geen
        lege ruimte links reserveren */
.manage-box input.buttonsuperimportant.secondarybutton,
#main-content :is(div, span, fieldset) > p:has(> input[id*="btnConfirm"]) > input.buttonsuperimportant.secondarybutton {
    background-image: none !important;
    padding-left: 16px !important;
}

/* 12b. Actiebalk onderaan: knoppen netjes naast elkaar met vaste tussenruimte,
        compacter zodat alles op HD-schermen op één lijn past */
#main-content :is(div, span, fieldset) > p:has(> input[id*="btnConfirm"]) {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    font-size: 0; /* &nbsp;-tekens tussen de knoppen geen ruimte laten innemen */
}

    #main-content :is(div, span, fieldset) > p:has(> input[id*="btnConfirm"]) > * {
        font-size: 14px;
    }

    #main-content :is(div, span, fieldset) > p:has(> input[id*="btnConfirm"]) > .button {
        margin: 0;
        padding-top: 9px;
        padding-bottom: 9px;
        padding-right: 16px;
    }

    #main-content :is(div, span, fieldset) > p:has(> input[id*="btnConfirm"]) > input.button[style*="none"],
    #main-content :is(div, span, fieldset) > p:has(> input[id*="btnConfirm"]) > span[style*="none"] {
        display: none !important;
    }

@media (max-width: 1500px) {
    #main-content :is(div, span, fieldset) > p:has(> input[id*="btnConfirm"]) {
        gap: 6px;
    }

        #main-content :is(div, span, fieldset) > p:has(> input[id*="btnConfirm"]) > * {
            font-size: 13px;
        }

        #main-content :is(div, span, fieldset) > p:has(> input[id*="btnConfirm"]) > .button {
            padding-top: 8px;
            padding-bottom: 8px;
            padding-right: 12px;
            background-position: 8px center;
        }

        #main-content :is(div, span, fieldset) > p:has(> input[id*="btnConfirm"]) > input.button[value*="OPSLAAN"]:not(.secondarybutton),
        #main-content :is(div, span, fieldset) > p:has(> input[id*="btnConfirm"]) > input.button[value*="VERSTUREN"]:not(.secondarybutton) {
            padding-left: 34px !important;
        }

        #main-content :is(div, span, fieldset) > p:has(> input[id*="btnConfirm"]) > input.buttonsuperimportant.secondarybutton {
            padding-left: 12px !important;
        }

    /* Zwevende knoppen rechts (opslaan / vorige / volgende) compacter */
    #main-content .tab-content span[style*="float"]:has(> [id$="lnkSaveBottom"]) .button {
        padding: 8px 12px;
        font-size: 13px;
    }
}

/* 12c. Rechterkolom op de detailschermen (leveranciers-PDF, calculatiebestand,
        interne informatie, ...): allemaal even breed, rechts uitgelijnd en
        netjes onder elkaar */
.manage-box > .tab-content > .column-right {
    box-sizing: border-box;
    float: right;
    clear: right;
    width: 32%;
    min-width: 0;
    margin: 0 0 20px 0 !important;
}

.manage-box > .tab-content > .column-left {
    box-sizing: border-box;
    width: calc(68% - 20px);
    min-width: 0;
}

.manage-box > .tab-content > fieldset.column-right {
    min-inline-size: 0;
}

    .manage-box > .tab-content > .column-right img {
        max-width: 100%;
        height: auto;
    }

.manage-box > .tab-content > .content-box.column-right .content-box-header {
    min-height: 0;
}

    .manage-box > .tab-content > .content-box.column-right .content-box-header h3 {
        font-size: 15px;
        line-height: 1.35;
        letter-spacing: 0;
        padding: 14px 20px;
    }

.manage-box > .tab-content > .content-box.column-right .content-box-content {
    padding: 16px 20px;
}

/* 12d. Overzichten: de pagina is nooit breder dan het scherm.
        Enkel de tabel zelf scrolt horizontaal (in .table-scroll-wrapper,
        zie simpla.js); de bulkactiebalk loopt door naar een volgende lijn. */
#main-content .content-box-content:has(> .table-scroll-wrapper),
#main-content .content-box-content:has(.pagerrow-outside) {
    min-width: 0;
    max-width: 100%;
}

#main-content .table-scroll-wrapper {
    overflow-x: auto;
    max-width: 100%;
    scrollbar-width: thin;
}

#main-content .pagerrow-outside {
    max-width: 100%;
}

    /* De bulktabel als blokken opbouwen (een tabelcel met flex verliest zijn breedte) */
    #main-content .pagerrow-outside .actionbuttontable,
    #main-content .pagerrow-outside .actionbuttontable > tbody {
        display: block;
        width: 100% !important;
    }

        #main-content .pagerrow-outside .actionbuttontable > tbody > tr {
            display: flex;
            flex-wrap: wrap;
            justify-content: flex-end;
            align-items: center;
            gap: 8px;
            background: transparent !important;
        }

            #main-content .pagerrow-outside .actionbuttontable > tbody > tr > td {
                display: block;
            }

            #main-content .pagerrow-outside .actionbuttontable > tbody > tr:first-child > td {
                flex: 1 1 100%;
            }

    /* Eerste lijn van de bulkacties: filter links, acties rechts, mag afbreken */
    #main-content .pagerrow-outside .bulk-actions:not(:has(table)),
    #main-content .pagerrow-outside .actionbuttontable > tbody > tr:first-child > td {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: flex-end;
        gap: 8px;
        white-space: normal !important;
        font-size: 0; /* "SELECTIE:" en "|" waren al onzichtbaar (witte tekst) */
        padding: 8px !important;
    }

        #main-content .pagerrow-outside .bulk-actions:not(:has(table)) > *,
        #main-content .pagerrow-outside .actionbuttontable > tbody > tr:first-child > td > * {
            font-size: 14px;
            margin: 0;
        }

        #main-content .pagerrow-outside .bulk-actions:not(:has(table)) > div[style*="float"],
        #main-content .pagerrow-outside .actionbuttontable > tbody > tr:first-child > td > div[style*="float"] {
            float: none !important;
            margin-right: auto;
        }

        #main-content .pagerrow-outside .bulk-actions:not(:has(table)) > *:empty,
        #main-content .pagerrow-outside .actionbuttontable > tbody > tr:first-child > td > span:empty {
            display: none;
        }

    /* Volgende lijnen (SELECTIE NAAR VOORSCHOTFACTUUR / BESTELBON / ...) mogen ook afbreken */
    #main-content .pagerrow-outside .actionbuttontable > tbody > tr:nth-child(n+2) > td {
        white-space: normal !important;
    }

    #main-content .pagerrow-outside .actionbuttontable > tbody > tr:nth-child(n+2) > td:last-child {
        width: auto !important;
    }

    #main-content .pagerrow-outside .actionbuttontable tr:nth-child(n+2) .button {
        width: 300px;
        max-width: 100%;
        box-sizing: border-box;
    }

/* 12e. Bulkactiebalk compacter op HD-schermen */
@media (max-width: 1500px) {
    #main-content .pagerrow-outside .actionbuttons .button:not(select) {
        padding: 8px 12px;
        font-size: 13px;
        background-position: 8px center;
    }

    #main-content .pagerrow-outside .actionbuttons input.button[style*="background"],
    #main-content .pagerrow-outside .actionbuttons input[type="button"][value*="AFDRUKKEN"],
    #main-content .pagerrow-outside .actionbuttons input[type="button"][value*="DOWNLOADEN"],
    #main-content .pagerrow-outside .actionbuttons input[type="button"][value*="VERSTUREN"],
    #main-content .pagerrow-outside .actionbuttons input[type="button"][value*="VERWIJDEREN"],
    #main-content .pagerrow-outside .actionbuttons input[type="button"][value*="BLOKKEREN"],
    #main-content .pagerrow-outside .actionbuttons input[type="button"][value*="ALS BETAALD"],
    #main-content .pagerrow-outside .actionbuttons input[type="button"][value*="ALS GEFACTUREERD"],
    #main-content .pagerrow-outside .actionbuttons input[type="button"][value*="EXCEL"],
    #main-content .pagerrow-outside .actionbuttons input[type="button"][value*="SAMENVOEGEN"],
    #main-content .pagerrow-outside .actionbuttons input[type="button"][value*="TOEVOEGEN"],
    #main-content .pagerrow-outside .actionbuttons input[type="button"][value*="ACTUALISEREN"] {
        padding-left: 34px !important;
    }

    #main-content .pagerrow-outside .actionbuttons select.button {
        width: 165px !important;
        height: 34px;
        font-size: 13px;
    }

    #main-content .pagerrow-outside .actionbuttontable tr:nth-child(n+2) .button {
        width: 285px;
    }
}

/* 12f. Statusfilter bovenaan de overzichten: rijen met statuslabels en het
        jaarfilter (alles / 2026 / Ouder) krijgen vaste tussenruimte */
#main-content fieldset.statusfilter {
    display: flow-root;
    white-space: normal; /* mag afbreken naar een volgende rij (stond op nowrap bij HD) */
    min-inline-size: 0; /* een fieldset is standaard minstens zo breed als zijn inhoud → duwde de pagina breder */
    line-height: 1.4;
    padding: 10px 12px !important;
}

    /* elk aanvinkvakje + label = één blok dat niet in twee breekt */
    #main-content fieldset.statusfilter > span:has(> input[type="checkbox"]) {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        margin: 4px 10px 4px 0;
        vertical-align: middle;
        white-space: nowrap;
    }

        #main-content fieldset.statusfilter > span:has(> input[type="checkbox"]) > label {
            display: inline-block;
            padding: 0;
        }

            #main-content fieldset.statusfilter > span > label > span[class*="label"] {
                display: inline-block;
                width: auto;
                line-height: 1.3;
            }

    /* jaarfilter rechts: eigen ruimte, verticaal gecentreerd op de labels */
    #main-content fieldset.statusfilter > div[style*="float"] {
        display: flex;
        align-items: center;
        gap: 4px;
        margin: 4px 0 4px 16px;
        white-space: nowrap;
        line-height: normal;
    }

/* 12g. Geen enkele fieldset in een overzicht mag de pagina breder duwen dan het scherm */
#main-content .content-box-content > .tab-content > fieldset {
    min-inline-size: 0;
    max-width: 100%;
    box-sizing: border-box;
}

/* ...maar blokken onder twee naast elkaar zwevende kaders (column-left / column-right,
   bv. tab "naar boekhouding") moeten eronder beginnen, niet ertussen */
#main-content .tab-content > :is(.column-left, .column-right) ~ fieldset:not(.column-left):not(.column-right) {
    clear: both;
}

/* twee kaders naast elkaar: elk de helft, met tussenruimte */
#main-content .content-box-content > .tab-content > .content-box.column-left,
#main-content .content-box-content > .tab-content > .content-box.column-right {
    box-sizing: border-box;
    
}

/* ---------- 13. Gelijke hoogte: tekstvelden, keuzelijsten en Chosen (36px) ---------- */
:root {
    --dt-field-h: 36px;
}

/* Tekstvelden: 7px + 20px + 7px + 2 × 1px rand = 36px (horizontale padding blijft) */
#main-content input.text-input:not(.large-input),
.ui-dialog input.text-input:not(.large-input) {
    padding-top: 7px;
    padding-bottom: 7px;
    line-height: 20px;
    height: 20px;
    vertical-align: middle;
}

/* Gewone keuzelijsten (niet de compacte status- of bulkactielijsten) */
#main-content select:not([multiple]):not([size]):not(.textbutton):not(.button),
.ui-dialog select:not([multiple]):not([size]):not(.textbutton):not(.button) {
    box-sizing: border-box;
    height: var(--dt-field-h);
    padding-top: 0;
    padding-bottom: 0;
    vertical-align: middle;
}

/* Chosen-keuzelijsten: zelfde hoogte, rand en pijltje als de gewone keuzelijsten */
#main-content .chosen-container-single .chosen-single,
.ui-dialog .chosen-container-single .chosen-single {
    box-sizing: border-box;
    height: var(--dt-field-h);
    line-height: calc(var(--dt-field-h) - 2px);
    padding: 0 0 0 10px;
    border: 1px solid #D1D5DB !important;
    border-radius: 6px !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%236B7280' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 9px center !important;
    background-size: 10px 6px !important;
    color: #374151;
}

    #main-content .chosen-container-single .chosen-single span,
    .ui-dialog .chosen-container-single .chosen-single span {
        margin-right: 28px;
    }

    /* eigen pijltje hierboven → sprite-pijltje verbergen */
    #main-content .chosen-container-single .chosen-single div,
    .ui-dialog .chosen-container-single .chosen-single div {
        display: none;
    }

    /* kruisje om te wissen (allow_single_deselect) verticaal centreren */
    #main-content .chosen-container-single .chosen-single abbr,
    .ui-dialog .chosen-container-single .chosen-single abbr {
        top: 50%;
        right: 28px;
        margin-top: -6px;
    }

    #main-content .chosen-container-single .chosen-single:hover,
    .ui-dialog .chosen-container-single .chosen-single:hover {
        border-color: #9CA3AF !important;
    }

    #main-content .chosen-container-active .chosen-single,
    .ui-dialog .chosen-container-active .chosen-single {
        border-color: var(--theme, #57a000) !important;
        box-shadow: 0 0 0 3px var(--theme-soft, #eef7e0) !important;
    }

    #main-content .chosen-container-active.chosen-with-drop .chosen-single,
    .ui-dialog .chosen-container-active.chosen-with-drop .chosen-single {
        border-radius: 6px 6px 0 0 !important;
    }

/* Chosen meervoudige keuze (bv. gebruikersfilter): minstens even hoog */
#main-content .chosen-container-multi .chosen-choices {
    min-height: var(--dt-field-h);
    box-sizing: border-box;
    border-radius: 6px;
    border-color: #D1D5DB;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

/* ---------- 14. Bijlage-uploadzones (.file-upload-wrap / .drag-text) ----------
   Zelfde tegel als op het dashboard en de overzichten (dropzone-tiles.css):
   witte kaart, gestippelde rand, icoon links, titel + uitleg rechts,
   themakleur bij hover of tijdens het slepen. Markup blijft ongewijzigd. */
/* even breed als de gewone tekstvelden (.small-input: 400px + 2 × 6px padding + 2 × 1px rand) */
#main-content .file-upload {
    background-color: transparent;
    width: 414px !important;
    max-width: 100%;
}

#main-content .file-upload-wrap {
    position: relative;
}

#main-content .drag-text {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 83px;
    max-width: 100%;
    padding: 10px 16px 10px 14px;
    text-align: left;
    background: #FFFFFF;
    border: 1.5px dashed #C5CED8;
    border-radius: 8px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
    transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}

    /* icoon links */
    #main-content .drag-text::before {
        content: "";
        flex: 0 0 36px;
        width: 36px;
        height: 36px;
        background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='36' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 18a4.5 4.5 0 0 1-.6-8.96A6 6 0 0 1 18 8.5h.5a4 4 0 0 1 .5 7.97'/%3E%3Cpath d='M12 12v8'/%3E%3Cpath d='M9 15l3-3 3 3'/%3E%3C/svg%3E") no-repeat center / 36px 36px;
    }

    /* titel (eerste regel) + uitleg (tweede regel) */
    #main-content .drag-text h3 {
        flex: 1 1 auto;
        margin: 0;
        padding: 0 !important;
        font-size: 12px !important;
        font-weight: normal;
        line-height: 1.35;
        letter-spacing: 0;
        text-align: left;
        color: #888888 !important;
    }

        #main-content .drag-text h3::before {
            content: none;
        }

        #main-content .drag-text h3::first-line {
            font-size: 13px;
            font-weight: 600;
            color: #444444;
        }

        #main-content .drag-text h3 strong {
            display: block;
            margin-bottom: 2px;
            font-size: 13px;
            font-weight: 600;
            color: #444444;
        }

        #main-content .drag-text h3 span {
            font-size: 12px;
            color: #888888;
        }

/* hover in de themakleur */
#main-content .file-upload-wrap:hover .drag-text {
    border-color: var(--theme, #57a000);
    background-color: var(--theme-soft, #eef7e0);
    box-shadow: 0 2px 10px color-mix(in srgb, var(--theme, #57a000) 15%, transparent);
}

/* Tijdens het slepen zet simpla.js een vaste groene achtergrond (#9ADF8F) op
   .file-upload-wrap. Die groene kleur zelf verbergen we en we tonen in de
   plaats een duidelijke "hier neerzetten"-staat in de themakleur. */
#main-content .file-upload-wrap {
    background-color: transparent !important;
    border-radius: 8px;
}

#main-content .file-upload-wrap[style*="154, 223, 143"] .drag-text,
#main-content .file-upload-wrap[style*="9ADF8F" i] .drag-text {
    border: 2px dashed var(--theme, #57a000);
    background-color: var(--theme-soft, #eef7e0);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--theme, #57a000) 18%, transparent);
}

    #main-content .file-upload-wrap[style*="154, 223, 143"] .drag-text h3::first-line,
    #main-content .file-upload-wrap[style*="9ADF8F" i] .drag-text h3::first-line {
        color: var(--theme-dark, #459300);
    }

/* ---------- 15. Filter- en zoekvelden = zelfde uitzicht als de andere tekstvelden ----------
   (filter op huidige pagina, snel zoeken, ... op alle overzichten) */

/* zoekvelden (type="search") rekenen in Chrome de opvulling binnen de hoogte →
   zelfde boxmodel als een gewoon tekstveld, zodat ze ook 36px hoog zijn */
#main-content input[type="search"].text-input,
#main-content input[type="search"].txtFilter,
#main-content input[type="search"].txtFilterSearch,
.ui-dialog input[type="search"].text-input {
    box-sizing: content-box;
    -webkit-appearance: none;
    appearance: none;
}

/* rand, hoeken, tekst en focus overal gelijk */
#main-content input.text-input,
#main-content input.txtFilter,
#main-content input.txtFilterSearch,
.ui-dialog input.text-input {
    border: 1px solid #D1D5DB;
    border-radius: 6px;
    background-color: #FFFFFF;
    color: #374151;
    font-size: 14px;
    transition: border-color .15s ease, box-shadow .15s ease;
}

#main-content input.txtFilter:not(.text-input),
#main-content input.txtFilterSearch:not(.text-input) {
    padding-top: 7px;
    padding-bottom: 7px;
    line-height: 20px;
    height: 20px;
    vertical-align: middle;
}

    #main-content input.text-input:hover:not(:focus):not([readonly]):not(:disabled),
    #main-content input.txtFilter:hover:not(:focus),
    #main-content input.txtFilterSearch:hover:not(:focus) {
        border-color: #9CA3AF;
    }

    #main-content input.text-input:focus,
    #main-content input.txtFilter:focus,
    #main-content input.txtFilterSearch:focus,
    .ui-dialog input.text-input:focus {
        outline: none;
        border-color: var(--theme, #57a000);
        box-shadow: 0 0 0 3px var(--theme-soft, #eef7e0);
    }

    #main-content input.text-input::placeholder,
    #main-content input.txtFilter::placeholder,
    #main-content input.txtFilterSearch::placeholder {
        color: #9CA3AF;
    }

/* filtericoon verticaal gecentreerd in het hogere veld */
#main-content input.txtFilter,
#main-content input.txtFilterSearch {
    background-position: 9px center !important;
    padding-left: 30px !important;
}

/* ---------- 16. Loginscherm (login.aspx) ----------
   Enkel CSS: donkere achtergrond met de Simpla-merkkleuren (groen → blauw uit het
   logo), witte kaart in het midden, labels boven de velden, brede inlogknop. */
body#login {
    --lg-green: #00E66C;
    --lg-blue: #057BDF;
    --lg-text: #1F2937;
    --lg-muted: #6B7280;
    --lg-border: #D1D5DB;

    min-height: 100vh;
    margin: 0;
    color: var(--lg-text);
    font-family: "Segoe UI", -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif;
    background-color: #0B1626 !important;
    background-image:
        radial-gradient(circle at 12% 18%, rgba(0, 230, 108, .28) 0, transparent 38%),
        radial-gradient(circle at 88% 82%, rgba(5, 123, 223, .38) 0, transparent 42%),
        radial-gradient(circle at 70% 10%, rgba(5, 123, 223, .18) 0, transparent 30%),
        linear-gradient(160deg, #0B1626 0%, #0E2238 100%) !important;
    background-attachment: fixed !important;
}

    body#login form {
        box-sizing: border-box;
        min-height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 32px 16px;
    }

/* de kaart */
body#login #login-wrapper {
    box-sizing: border-box;
    width: 100%;
    max-width: 420px;
    padding: 40px 40px 24px;
    background: #FFFFFF !important;
    border-radius: 18px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .35), 0 2px 6px rgba(0, 0, 0, .12);
    animation: lg-in .35s ease-out both;
}

@keyframes lg-in {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: none; }
}

/* kop: logo, appnaam, ondertitel */
body#login #login-wrapper #login-top {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 0 24px;
    text-align: center;
}

    body#login #login-wrapper #login-top #logo {
        order: -1;
        width: 64px;
        height: 64px !important;
        border-radius: 16px !important;
        box-shadow: 0 8px 20px rgba(5, 123, 223, .30);
        margin-bottom: 18px;
    }

    body#login #login-wrapper #login-top h1 {
        position: static;
        top: auto;
        margin: 0;
        padding: 0;
        font-family: inherit;
        font-size: 24px;
        font-weight: 600;
        letter-spacing: -.01em;
        color: var(--lg-text);
    }

    body#login #login-wrapper #login-top::after {
        content: "Meld je aan om verder te gaan";
        display: block;
        margin-top: 6px;
        font-size: 14px;
        color: var(--lg-muted);
    }

body#login:has(#txtCode) #login-wrapper #login-top::after {
    content: "Aanmelden als boekhouder met de code van je klant";
}

body#login:has(#divGetPassword) #login-wrapper #login-top::after {
    content: "Vul je e-mailadres in om je paswoord op te vragen";
}

/* meldingen */
body#login #login-wrapper .alert {
    box-sizing: border-box;
    width: 100%;
    margin: 18px 0 0;
    padding: 12px 14px;
    font-size: 13px;
    line-height: 1.45;
    text-align: left;
    border-radius: 10px;
}

body#login #login-wrapper .login-content .notification {
    border-radius: 10px;
    width: 100%;
    box-sizing: border-box;
}

/* formulier */
body#login #login-wrapper .login-content {
    width: 100%;
    margin: 0;
}

    body#login #login-wrapper .login-content > p:nth-child(1),
    body#login #login-wrapper .login-content > p:nth-child(2) {
        display: none; /* lege &nbsp;-regels bovenaan */
    }

    body#login #login-wrapper .login-content > p {
        margin: 0 0 16px;
        padding: 0;
    }

    body#login #login-wrapper .login-content label {
        display: block;
        float: none;
        width: auto;
        margin: 0 0 6px;
        padding: 0;
        font-family: inherit;
        font-size: 13px;
        font-weight: 600 !important;
        color: #374151;
    }

    body#login #login-wrapper .login-content input.text-input {
        box-sizing: border-box;
        float: none;
        display: block;
        width: 100%;
        height: 46px;
        margin: 0;
        padding: 0 14px;
        font-family: inherit;
        font-size: 15px;
        color: var(--lg-text);
        background: #F9FAFB;
        border: 1px solid var(--lg-border) !important;
        border-radius: 10px;
        transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
    }

        body#login #login-wrapper .login-content input.text-input:hover {
            border-color: #9CA3AF !important;
        }

        body#login #login-wrapper .login-content input.text-input:focus {
            outline: none;
            background: #FFFFFF;
            border-color: var(--lg-blue) !important;
            box-shadow: 0 0 0 4px rgba(5, 123, 223, .15);
        }

        body#login #login-wrapper .login-content input.text-input:-webkit-autofill {
            -webkit-box-shadow: 0 0 0 40px #F9FAFB inset;
            -webkit-text-fill-color: var(--lg-text);
        }

    /* ingelogd blijven */
    body#login #login-wrapper .login-content p#remember-password {
        float: none;
        display: flex;
        align-items: center;
        gap: 8px;
        margin: 4px 0 20px;
        font-size: 13px;
        color: #4B5563;
    }

        body#login #login-wrapper .login-content p#remember-password input {
            width: 16px;
            height: 16px;
            margin: 0;
            accent-color: var(--lg-blue);
            cursor: pointer;
        }

    /* knoppen: primair = brede knop in merkverloop, secundair = link */
    body#login #login-wrapper .login-content input.buttonsuperimportant {
        box-sizing: border-box;
        float: none;
        display: block;
        width: 100%;
        height: 48px;
        margin: 0 0 4px;
        padding: 0 16px;
        font-family: inherit;
        font-size: 15px;
        font-weight: 600;
        letter-spacing: .02em;
        text-transform: none;
        color: #FFFFFF !important;
        background: linear-gradient(90deg, var(--lg-green) 0%, var(--lg-blue) 100%) !important;
        background-size: 140% 100% !important;
        background-position: 0 0 !important;
        border: 0 !important;
        border-radius: 10px;
        box-shadow: 0 8px 18px rgba(5, 123, 223, .28);
        cursor: pointer;
        transition: background-position .3s ease, box-shadow .2s ease, transform .1s ease;
    }

        body#login #login-wrapper .login-content input.buttonsuperimportant:hover {
            filter: none;
            transform: none;
            background-position: 100% 0 !important;
            box-shadow: 0 10px 24px rgba(5, 123, 223, .38);
        }

        body#login #login-wrapper .login-content input.buttonsuperimportant:active {
            transform: translateY(1px);
        }

        body#login #login-wrapper .login-content input.buttonsuperimportant:focus-visible {
            outline: none;
            box-shadow: 0 0 0 4px rgba(5, 123, 223, .25), 0 8px 18px rgba(5, 123, 223, .28);
        }

        body#login #login-wrapper .login-content input.buttonsuperimportant:disabled {
            opacity: .8;
            cursor: wait;
        }

    body#login #login-wrapper .login-content input.buttonimportant {
        float: none;
        display: block;
        width: 100%;
        height: auto;
        margin: 0;
        padding: 6px 0;
        font-family: inherit;
        font-size: 13px;
        font-weight: normal;
        text-transform: none;
        text-align: center;
        color: var(--lg-blue) !important;
        background: none !important;
        border: 0 !important;
        box-shadow: none;
        cursor: pointer;
    }

        body#login #login-wrapper .login-content input.buttonimportant:hover {
            filter: none;
            transform: none;
            text-decoration: underline;
        }

/* links onderaan */
body#login #login-wrapper p.links {
    margin: 20px 0 0;
    padding: 18px 0 0;
    border-top: 1px solid #EEF0F3;
    font-size: 12px;
    line-height: 1.8;
    text-align: center;
    color: #D1D5DB;
}

    body#login #login-wrapper p.links a {
        margin: 0 4px;
        color: var(--lg-muted);
        text-decoration: none;
    }

        body#login #login-wrapper p.links a:hover {
            color: var(--lg-blue);
        }

@media (max-width: 480px) {
    body#login #login-wrapper {
        padding: 28px 20px 18px;
        border-radius: 14px;
    }
}

@media (prefers-reduced-motion: reduce) {
    body#login #login-wrapper {
        animation: none;
    }
}

/* ---------- 16b. Loginscherm: extra's ---------- */

/* "ingelogd blijven" (label nu gekoppeld aan het vinkje) */
body#login #login-wrapper .login-content p#remember-password label {
    display: inline;
    margin: 0;
    font-size: 13px;
    font-weight: normal !important;
    color: #4B5563;
    cursor: pointer;
}

/* paswoord tonen / verbergen */
body#login .pw-field {
    position: relative;
    display: block;
}

    body#login #login-wrapper .login-content .pw-field input.text-input {
        padding-right: 46px;
    }

    body#login .pw-toggle {
        position: absolute;
        top: 50%;
        right: 6px;
        width: 36px;
        height: 36px;
        margin-top: -18px;
        padding: 0;
        border: 0;
        border-radius: 8px;
        background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7S2 12 2 12z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E") no-repeat center / 20px 20px;
        cursor: pointer;
    }

        body#login .pw-toggle:hover {
            background-color: #EEF2F7;
        }

        body#login .pw-toggle:focus-visible {
            outline: none;
            box-shadow: 0 0 0 3px rgba(5, 123, 223, .25);
        }

        body#login .pw-toggle.is-visible {
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23057BDF' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17.94 17.94A10.07 10.07 0 0 1 12 19c-6.5 0-10-7-10-7a18.5 18.5 0 0 1 5.06-5.94'/%3E%3Cpath d='M9.9 4.24A9.12 9.12 0 0 1 12 4c6.5 0 10 7 10 7a18.5 18.5 0 0 1-2.16 3.19'/%3E%3Cpath d='M14.12 14.12a3 3 0 1 1-4.24-4.24'/%3E%3Cpath d='M1 1l22 22'/%3E%3C/svg%3E");
        }

/* Caps Lock-melding */
body#login .capslock-warning {
    margin-top: 6px;
    font-size: 12px;
    color: #B45309;
}

    body#login .capslock-warning::before {
        content: "⇪ ";
        font-weight: 700;
    }

/* meldingen: onder de ondertitel, vlak boven de velden */
body#login #login-wrapper #login-top::after {
    order: 1;
}

body#login #login-wrapper #login-top .alert {
    order: 2;
}

/* meldingen: info (blauw) en fout (rood) */
body#login #login-wrapper .alert.info {
    background: #EFF6FF;
    border: 1px solid #BFDBFE;
    color: #1E40AF;
}

body#login #login-wrapper .alert.error {
    background: #FEF2F2;
    border: 1px solid #FECACA;
    color: #B91C1C;
}

body#login #login-wrapper .alert h3 {
    margin: 0 0 4px;
    padding: 0;
    font-size: 14px;
    color: inherit;
}

body#login #login-wrapper .alert p {
    margin: 0;
    padding: 0;
    line-height: 1.45;
}

/* bij een foute login: velden rood en kort schudden */
body#login:has(.alert.error) #login-wrapper .login-content input.text-input {
    border-color: #F87171 !important;
    animation: lg-shake .4s ease-in-out;
}

@keyframes lg-shake {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-6px); }
    40% { transform: translateX(6px); }
    60% { transform: translateX(-4px); }
    80% { transform: translateX(4px); }
}

/* laadstatus in de knop na het klikken */
body#login #login-wrapper .login-content input.buttonsuperimportant.is-loading {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='9' fill='none' stroke='rgba(255,255,255,.35)' stroke-width='3'/%3E%3Cpath d='M12 3a9 9 0 0 1 9 9' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round'%3E%3CanimateTransform attributeName='transform' type='rotate' from='0 12 12' to='360 12 12' dur='.8s' repeatCount='indefinite'/%3E%3C/path%3E%3C/svg%3E"), linear-gradient(90deg, var(--lg-green) 0%, var(--lg-blue) 100%) !important;
    background-repeat: no-repeat, no-repeat !important;
    background-position: left 18px center, 0 0 !important;
    background-size: 18px 18px, 140% 100% !important;
    opacity: .9;
}

body#login #login-wrapper .login-content input.buttonimportant.is-loading {
    opacity: .6;
}

/* zijpaneel met korte boodschap: enkel op brede schermen */
body#login #login-aside {
    display: none;
}

@media (min-width: 1000px) {
    body#login form {
        gap: 80px;
    }

    body#login #login-aside {
        display: block;
        max-width: 380px;
        color: #E5EDF7;
        animation: lg-in .45s ease-out both;
    }

        body#login #login-aside .login-aside-kicker {
            margin: 0 0 14px;
            padding: 0;
            font-size: 13px;
            font-weight: 600;
            letter-spacing: .12em;
            text-transform: uppercase;
            color: var(--lg-green);
        }

        body#login #login-aside .login-aside-title {
            margin: 0 0 28px;
            padding: 0;
            font-size: 32px;
            line-height: 1.2;
            font-weight: 600;
            letter-spacing: -.015em;
            color: #FFFFFF;
        }

        body#login #login-aside ul {
            margin: 0;
            padding: 0;
            list-style: none;
        }

            body#login #login-aside li {
                margin: 0 0 14px;
                padding: 0 0 0 32px;
                font-size: 15px;
                line-height: 1.5;
                color: #C7D4E4;
                background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%2300E66C' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") no-repeat 0 1px / 20px 20px;
            }
}

/* donkere variant voor wie het systeem op donker heeft staan */
@media (prefers-color-scheme: dark) {
    body#login #login-wrapper {
        background: #111827 !important;
        box-shadow: 0 24px 60px rgba(0, 0, 0, .5), 0 0 0 1px rgba(255, 255, 255, .06);
    }

        body#login #login-wrapper #login-top h1 {
            color: #F9FAFB;
        }

        body#login #login-wrapper #login-top::after {
            color: #9CA3AF;
        }

        body#login #login-wrapper .login-content label,
        body#login #login-wrapper .login-content p#remember-password,
        body#login #login-wrapper .login-content p#remember-password label {
            color: #D1D5DB;
        }

        body#login #login-wrapper .login-content input.text-input {
            background: #1F2937;
            border-color: #374151 !important;
            color: #F9FAFB;
        }

            body#login #login-wrapper .login-content input.text-input:focus {
                background: #1F2937;
                border-color: #3B9BF0 !important;
            }

            body#login #login-wrapper .login-content input.text-input:-webkit-autofill {
                -webkit-box-shadow: 0 0 0 40px #1F2937 inset;
                -webkit-text-fill-color: #F9FAFB;
            }

        body#login #login-wrapper .login-content input.buttonimportant {
            color: #60A5FA !important;
        }

        body#login .pw-toggle:hover {
            background-color: #374151;
        }

        body#login #login-wrapper p.links {
            border-top-color: #1F2937;
            color: #4B5563;
        }

            body#login #login-wrapper p.links a {
                color: #9CA3AF;
            }

        body#login #login-wrapper .alert.info {
            background: rgba(59, 130, 246, .12);
            border-color: rgba(59, 130, 246, .35);
            color: #BFDBFE;
        }

        body#login #login-wrapper .alert.error {
            background: rgba(239, 68, 68, .12);
            border-color: rgba(239, 68, 68, .4);
            color: #FECACA;
        }

        body#login .capslock-warning {
            color: #FBBF24;
        }
}

@media (prefers-reduced-motion: reduce) {
    body#login #login-aside,
    body#login:has(.alert.error) #login-wrapper .login-content input.text-input {
        animation: none;
    }
}

/* ---------- 16c. Loginscherm: link naar de mobiele app (mobileAppURL) ----------
   gsm / tablet: tip bovenaan de kaart (wegklikbaar, onthouden via cookie)
   brede schermen: QR-code onderaan het zijpaneel */
body#login .login-mobileapp-tip {
    position: relative;
    margin: -12px -12px 24px;
}

    body#login .login-mobileapp-tip a {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 11px 44px 11px 14px;
        font-size: 13px;
        line-height: 1.35;
        color: #065F46;
        text-decoration: none;
        background: linear-gradient(90deg, rgba(0, 230, 108, .14), rgba(5, 123, 223, .12));
        border: 1px solid rgba(0, 180, 110, .28);
        border-radius: 12px;
        transition: background-color .15s ease, border-color .15s ease;
    }

        body#login .login-mobileapp-tip a:hover {
            border-color: rgba(5, 123, 223, .45);
        }

        body#login .login-mobileapp-tip a strong {
            font-weight: 600;
            color: #064E3B;
        }

    body#login .login-mobileapp-icon {
        font-size: 18px;
    }

    body#login .login-mobileapp-arrow {
        margin-left: auto;
        font-size: 16px;
        color: var(--lg-blue);
    }

    body#login .login-mobileapp-close {
        position: absolute;
        top: 50%;
        right: 8px;
        width: 28px;
        height: 28px;
        margin-top: -14px;
        padding: 0;
        font-size: 18px;
        line-height: 26px;
        color: #6B7280;
        background: transparent;
        border: 0;
        border-radius: 6px;
        cursor: pointer;
    }

        body#login .login-mobileapp-close:hover {
            background: rgba(0, 0, 0, .06);
            color: #111827;
        }

    /* tip enkel op gsm / tablet: daar staat het zijpaneel met de QR-code niet */
    @media (min-width: 1000px) {
        body#login .login-mobileapp-tip {
            display: none;
        }
    }

    @media (max-width: 480px) {
        body#login .login-mobileapp-tip {
            margin: -6px -6px 20px;
        }
    }

/* QR-code in het zijpaneel */
body#login #login-aside .login-mobileapp-qr {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 36px;
    padding: 16px;
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .10);
    border-radius: 14px;
}

    body#login #login-aside .login-mobileapp-qr img {
        flex: 0 0 96px;
        width: 96px;
        height: 96px;
        padding: 6px;
        background: #FFFFFF;
        border-radius: 10px;
    }

    body#login #login-aside .login-mobileapp-qr p {
        margin: 0;
        padding: 0;
        font-size: 13px;
        line-height: 1.5;
        color: #C7D4E4;
    }

        body#login #login-aside .login-mobileapp-qr p.login-mobileapp-title {
            margin-bottom: 4px;
            font-size: 15px;
            font-weight: 600;
            color: #FFFFFF;
        }

@media (prefers-color-scheme: dark) {
    body#login .login-mobileapp-tip a {
        color: #A7F3D0;
    }

        body#login .login-mobileapp-tip a strong {
            color: #D1FAE5;
        }

    body#login .login-mobileapp-close {
        color: #9CA3AF;
    }

        body#login .login-mobileapp-close:hover {
            background: rgba(255, 255, 255, .08);
            color: #F9FAFB;
        }
}

/* ---------- 17. Label "Laatst gewijzigd op" bij het selecteren van een product ----------
   ouder dan 180 dagen = oranje, zodat een mogelijk verouderde prijs opvalt */
.badge_lastmodified {
    margin-left: 6px;
}

    .badge_lastmodified.is-old {
        background: #FEF3C7 !important;
        color: #92400E !important;
        border: 1px solid #FCD34D;
    }

/* ---------- 18. Labels na het selecteren van een product (voorraad, laatste prijs, marge, ...) ----------
   offerte / factuur / bestelbon / contract / creditnota: td#lblAddLine bevat de knop
   "DEZE LIJN ... TOEVOEGEN" en de containers .message_new / _margin / _unit / _pricing / _stock.
   Labels komen op een eigen regel onder de knop, als rustige afgeronde labels die mogen afbreken. */
#lblAddLine > span[class^="message_"]:not(:empty) {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-top: 10px;
}

#lblAddLine > span[class^="message_"] .badge_default,
#lblAddLine > span[class^="message_"] .badge_yellow {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    max-width: 100%;
    box-sizing: border-box;
    padding: 5px 10px;
    font-size: 12px !important;
    line-height: 1.45;
    white-space: normal;
    text-align: left;
    border-radius: 999px;
}

/* algemene info (voorraad, laatste verkoopprijs, ...): neutraal */
#lblAddLine > span[class^="message_"] .badge_default {
    color: #374151;
    background: #F3F4F6;
    border: 1px solid #E5E7EB;
}

/* aandachtspunten (prijs/marge): zacht geel */
#lblAddLine > span[class^="message_"] .badge_yellow {
    color: #854D0E;
    background: #FEF9C3;
    border: 1px solid #FDE68A;
}

/* links in de labels (gereserveerd, verwacht, laatste factuur): leesbaar in plaats van wit */
#lblAddLine > span[class^="message_"] .badge_default a,
#lblAddLine > span[class^="message_"] .badge_yellow a {
    color: var(--theme-dark, #459300) !important;
    text-decoration: underline !important;
    text-underline-offset: 2px;
}

    #lblAddLine > span[class^="message_"] .badge_default a:hover,
    #lblAddLine > span[class^="message_"] .badge_yellow a:hover {
        color: var(--theme, #57a000) !important;
    }

/* "Laatst gewijzigd op": recent = neutraal, ouder dan 180 dagen = oranje */
#lblAddLine > span[class^="message_"] .badge_lastmodified {
    margin-left: 0;
    color: #4B5563;
    background: #FFFFFF;
    border-style: dashed;
}

    #lblAddLine > span[class^="message_"] .badge_lastmodified.is-old {
        color: #92400E !important;
        background: #FFF7ED !important;
        border: 1px solid #FDBA74;
    }

/* ---------- 19. Modals (jQuery UI-dialogs) ----------
   19a: alle dialogen (kader, titelbalk, sluitknop, achtergrond, knoppen)
   19b: labels en hulpteksten in alle dialogen
   19c: snelle formulieren "Nieuwe … toevoegen" (klant, leverancier, wagen, installatie)
        = alle dialogen met id dialog-modal-add… */

/* 19a. Alle dialogen */
.ui-widget-overlay {
    background: rgba(17, 24, 39, .45) !important;
    opacity: 1 !important;
    filter: none !important;
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}

.ui-dialog {
    border: none !important;
    border-radius: 12px !important;
    overflow: hidden;
    box-shadow: 0 24px 48px -12px rgba(16, 24, 40, .28), 0 0 0 1px rgba(16, 24, 40, .06) !important;
    animation: sp-dialog-in .18s ease-out;
}

/* Modal blijft in beeld wanneer de pagina scrolt: vast gecentreerd in het venster
   (jQuery UI 1.8 plaatst dialogen absoluut in het document) */
.ui-dialog.ui-widget {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    translate: -50% -50%;
    max-height: 100vh;
    overflow-y: auto;
}

    .ui-dialog.ui-widget .ui-dialog-titlebar {
        cursor: default;
    }

/* zelfde lettertype en grootte als de rest van Simpla (jQuery UI zet Verdana 1.1em) */
.ui-dialog.ui-widget {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
}

    .ui-dialog.ui-widget :is(input, select, textarea, button) {
        font-family: Arial, Helvetica, sans-serif;
    }

@keyframes sp-dialog-in {
    from { opacity: 0; transform: translateY(8px) scale(.985); }
    to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .ui-dialog { animation: none; }
}

.ui-dialog.ui-widget .ui-dialog-titlebar {
    padding: 14px 56px 14px 20px !important;
    background: #FFFFFF !important;
    border: none !important;
    border-bottom: 1px solid #EEF0F3 !important;
    border-radius: 0 !important;
}

.ui-dialog.ui-widget .ui-dialog-title {
    float: none;
    display: block;
    margin: 0;
    padding: 0 !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    line-height: 24px;
    color: #111827 !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* sluitknop: groter klikvlak, eigen kruisje */
.ui-dialog.ui-widget .ui-dialog-titlebar-close {
    right: 12px !important;
    width: 32px !important;
    height: 32px !important;
    margin-top: -16px !important;
    padding: 0 !important;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none !important;
    border-radius: 8px !important;
    background: transparent !important;
    transition: background-color .15s ease;
}

    .ui-dialog.ui-widget .ui-dialog-titlebar-close:hover,
    .ui-dialog.ui-widget .ui-dialog-titlebar-close.ui-state-hover,
    .ui-dialog.ui-widget .ui-dialog-titlebar-close:focus-visible {
        padding: 0 !important;
        background: #F3F4F6 !important;
        outline: none;
    }

    .ui-dialog.ui-widget .ui-dialog-titlebar-close .ui-icon {
        margin: 0 !important;
        width: 16px;
        height: 16px;
        background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 4l8 8M12 4l-8 8' stroke='%236B7280' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") center / 16px 16px no-repeat !important;
    }

    .ui-dialog.ui-widget .ui-dialog-titlebar-close:hover .ui-icon {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 4l8 8M12 4l-8 8' stroke='%23111827' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") !important;
    }

.ui-dialog.ui-widget .ui-dialog-content {
    padding: 18px 20px;
    background: #FFFFFF;
}

/* knoppenbalk van bevestigingsdialogen */
.ui-dialog.ui-widget .ui-dialog-buttonpane {
    margin: 0 !important;
    padding: 10px 16px !important;
    background: #F9FAFB !important;
    border: none !important;
    border-top: 1px solid #EEF0F3 !important;
}

    .ui-dialog.ui-widget .ui-dialog-buttonpane button {
        margin: 0 0 0 8px !important;
        min-height: 36px;
        padding: 0 16px !important;
        border: 1px solid #D1D5DB !important;
        border-radius: 6px !important;
        background: #FFFFFF !important;
        color: #374151 !important;
        font-weight: normal !important;
        cursor: pointer;
    }

        .ui-dialog.ui-widget .ui-dialog-buttonpane button .ui-button-text {
            padding: 0 !important;
        }

        .ui-dialog.ui-widget .ui-dialog-buttonpane button:hover {
            background: #F3F4F6 !important;
            border-color: #9CA3AF !important;
        }

/* 19b. Labels en hulpteksten: overal dezelfde grootte */
.ui-dialog.ui-widget .ui-dialog-content :is(p, td) > label:not([style]) {
    font-size: 13px;
    font-weight: 500;
    color: #374151;
}

.ui-dialog.ui-widget .ui-dialog-content small {
    font-size: 12px;
    color: #6B7280;
}

/* 19c. Snelle formulieren: nieuwe klant / leverancier / wagen / installatie */
.ui-dialog:has(> [id^="dialog-modal-add"]) {
    height: auto !important;
}

    /* hoogte volgt de inhoud (max. 90% van het scherm), scrollen binnen de modal */
    .ui-dialog:has(> [id^="dialog-modal-add"]) .ui-resizable-handle {
        display: none !important;
    }

[id^="dialog-modal-add"].ui-dialog-content {
    height: auto !important;
    max-height: calc(90vh - 53px) !important;
    padding-bottom: 0 !important;
    overflow-y: auto;
}

    [id^="dialog-modal-add"].ui-dialog-content > :is(fieldset, div) {
        margin: 0;
        padding: 0;
        border: none;
        min-inline-size: 0;
    }

.ui-dialog.ui-widget :is([id^="dialog-modal-add"].ui-dialog-content > :is(fieldset, div), [id^="dialog-modal-add"] .installationTypeFields) > p {
    margin: 0 0 14px;
    padding: 0;
    font-size: 0; /* &nbsp; en <br /> tussen de velden wegwerken */
    line-height: 0;
}

    .ui-dialog.ui-widget :is([id^="dialog-modal-add"].ui-dialog-content > :is(fieldset, div), [id^="dialog-modal-add"] .installationTypeFields) > p > * {
        font-size: 14px;
        line-height: 1.4;
    }

    .ui-dialog.ui-widget :is([id^="dialog-modal-add"].ui-dialog-content > :is(fieldset, div), [id^="dialog-modal-add"] .installationTypeFields) > p > br,
    .ui-dialog.ui-widget :is([id^="dialog-modal-add"].ui-dialog-content > :is(fieldset, div), [id^="dialog-modal-add"] .installationTypeFields) > p > span:empty {
        display: none;
    }

    /* lege paragrafen */
    .ui-dialog.ui-widget :is([id^="dialog-modal-add"].ui-dialog-content > :is(fieldset, div), [id^="dialog-modal-add"] .installationTypeFields) > p:not(:has(*)) {
        display: none;
    }

    /* veldlabels */
    .ui-dialog.ui-widget :is([id^="dialog-modal-add"].ui-dialog-content > :is(fieldset, div), [id^="dialog-modal-add"] .installationTypeFields) > p > label {
        display: block;
        margin: 0 0 6px;
        padding: 0;
        font-size: 13px;
        font-weight: 500;
        color: #374151;
    }

    /* alle velden even breed en even hoog */
    .ui-dialog.ui-widget :is([id^="dialog-modal-add"].ui-dialog-content > :is(fieldset, div), [id^="dialog-modal-add"] .installationTypeFields) > p > input.text-input,
    .ui-dialog.ui-widget :is([id^="dialog-modal-add"].ui-dialog-content > :is(fieldset, div), [id^="dialog-modal-add"] .installationTypeFields) > p > select {
        box-sizing: border-box !important;
        width: 100% !important;
        max-width: none;
        height: 36px !important;
        margin: 0;
        padding-left: 10px;
        padding-right: 10px;
    }

    .ui-dialog.ui-widget :is([id^="dialog-modal-add"].ui-dialog-content > :is(fieldset, div), [id^="dialog-modal-add"] .installationTypeFields) > p > input.text-input {
        display: block;
    }

    /* keuzelijsten: tekst verticaal gecentreerd (flex i.p.v. block) */
    .ui-dialog.ui-widget :is([id^="dialog-modal-add"].ui-dialog-content > :is(fieldset, div), [id^="dialog-modal-add"] .installationTypeFields) > p > select {
        display: flex !important;
        align-items: center;
        padding-top: 0;
        padding-bottom: 0;
        padding-right: 32px;
    }

    /* adres: straat / postcode + gemeente / land */
    .ui-dialog.ui-widget :is([id^="dialog-modal-add"].ui-dialog-content > :is(fieldset, div), [id^="dialog-modal-add"] .installationTypeFields) > p > input.text-input + input.text-input,
    .ui-dialog.ui-widget :is([id^="dialog-modal-add"].ui-dialog-content > :is(fieldset, div), [id^="dialog-modal-add"] .installationTypeFields) > p > br + input.text-input {
        margin-top: 8px;
    }

    .ui-dialog.ui-widget :is([id^="dialog-modal-add"].ui-dialog-content > :is(fieldset, div), [id^="dialog-modal-add"] .installationTypeFields) > p > input[class*="Postal"] {
        display: inline-block;
        width: 30% !important;
        margin-top: 8px;
        vertical-align: top;
    }

    .ui-dialog.ui-widget :is([id^="dialog-modal-add"].ui-dialog-content > :is(fieldset, div), [id^="dialog-modal-add"] .installationTypeFields) > p > input[class*="City"] {
        display: inline-block;
        width: calc(70% - 8px) !important;
        margin: 8px 0 0 8px;
        vertical-align: top;
    }

    /* datumvelden: kalendericoon rechts in het tekstvak */
    .ui-dialog.ui-widget :is([id^="dialog-modal-add"].ui-dialog-content > :is(fieldset, div), [id^="dialog-modal-add"] .installationTypeFields) > p:has(> .ui-datepicker-trigger) {
        position: relative;
    }

        .ui-dialog.ui-widget :is([id^="dialog-modal-add"].ui-dialog-content > :is(fieldset, div), [id^="dialog-modal-add"] .installationTypeFields) > p:has(> .ui-datepicker-trigger) > input.text-input {
            padding-right: 38px;
        }

        .ui-dialog.ui-widget :is([id^="dialog-modal-add"].ui-dialog-content > :is(fieldset, div), [id^="dialog-modal-add"] .installationTypeFields) > p > .ui-datepicker-trigger {
            position: absolute;
            right: 10px;
            bottom: 8px;
            height: 20px;
            margin: 0;
            cursor: pointer;
        }

    /* hulpteksten onder een veld */
    .ui-dialog.ui-widget :is([id^="dialog-modal-add"].ui-dialog-content > :is(fieldset, div), [id^="dialog-modal-add"] .installationTypeFields) > p > small {
        display: block;
        margin: 4px 0 10px;
    }

        .ui-dialog.ui-widget :is([id^="dialog-modal-add"].ui-dialog-content > :is(fieldset, div), [id^="dialog-modal-add"] .installationTypeFields) > p > small:last-child {
            margin-bottom: 0;
        }

    /* knop in een veldgroep (bv. "naam automatisch invullen") */
    .ui-dialog.ui-widget :is([id^="dialog-modal-add"].ui-dialog-content > :is(fieldset, div), [id^="dialog-modal-add"] .installationTypeFields) > p > a.button {
        display: inline-block;
        margin: 8px 0 0;
        font-size: 13px;
    }

    /* groepen (adres, contactgegevens) visueel scheiden */
    .ui-dialog.ui-widget :is([id^="dialog-modal-add"].ui-dialog-content > :is(fieldset, div), [id^="dialog-modal-add"] .installationTypeFields) > p:is(:has(> input[class*="Postal"]), :has(> small + br + br + input)) {
        padding-top: 14px;
        border-top: 1px solid #EEF0F3;
    }

    /* ondernemingsnummer: placeholder niet in hoofdletters */
    [id^="dialog-modal-add"].ui-dialog-content input:is(.txtCustomerTAV, .txtSupplierTAV)::placeholder {
        text-transform: none;
    }

    /* aanvinkvakjes: klikbaar blok i.p.v. los vinkje */
    .ui-dialog.ui-widget :is([id^="dialog-modal-add"].ui-dialog-content > :is(fieldset, div), [id^="dialog-modal-add"] .installationTypeFields) > p > span:has(> input[type="checkbox"]) {
        display: flex;
        align-items: center;
        gap: 10px;
        box-sizing: border-box;
        width: 100%;
        min-height: 40px;
        padding: 8px 12px;
        border: 1px solid #D1D5DB;
        border-radius: 6px;
        background: #FFFFFF;
        cursor: pointer;
        transition: border-color .15s ease, background-color .15s ease;
    }

        .ui-dialog.ui-widget :is([id^="dialog-modal-add"].ui-dialog-content > :is(fieldset, div), [id^="dialog-modal-add"] .installationTypeFields) > p > span:has(> input[type="checkbox"]):hover {
            border-color: #9CA3AF;
        }

        .ui-dialog.ui-widget :is([id^="dialog-modal-add"].ui-dialog-content > :is(fieldset, div), [id^="dialog-modal-add"] .installationTypeFields) > p > span:has(> input[type="checkbox"]:checked) {
            border-color: var(--theme, #57a000);
            background: var(--theme-soft, #eef7e0);
        }

        .ui-dialog.ui-widget :is([id^="dialog-modal-add"].ui-dialog-content > :is(fieldset, div), [id^="dialog-modal-add"] .installationTypeFields) > p > span > input[type="checkbox"] {
            flex: none;
            width: 16px;
            height: 16px;
            margin: 0;
            accent-color: var(--theme, #57a000);
            cursor: pointer;
        }

        .ui-dialog.ui-widget :is([id^="dialog-modal-add"].ui-dialog-content > :is(fieldset, div), [id^="dialog-modal-add"] .installationTypeFields) > p > span > label {
            flex: 1;
            margin: 0;
            padding: 0;
            font-size: 14px;
            font-weight: normal;
            color: #374151;
            cursor: pointer;
        }

    /* knoppen: vaste balk onderaan de modal, op één lijn */
    .ui-dialog.ui-widget :is([id^="dialog-modal-add"].ui-dialog-content > :is(fieldset, div), [id^="dialog-modal-add"] .installationTypeFields) > p:has(> input[id*="btnConfirm"]) {
        position: sticky;
        bottom: 0;
        z-index: 2;
        display: flex;
        align-items: stretch;
        flex-wrap: nowrap;
        gap: 0;
        margin: 18px -20px 0;
        padding: 12px 20px;
        background: #F9FAFB;
        border-top: 1px solid #EEF0F3;
    }

        .ui-dialog.ui-widget :is([id^="dialog-modal-add"].ui-dialog-content > :is(fieldset, div), [id^="dialog-modal-add"] .installationTypeFields) > p:has(> input[id*="btnConfirm"]) > input.button {
            flex: none;
            margin: 0;
        }

        /* "Meer informatie invullen" als secundaire knop */
        .ui-dialog.ui-widget :is([id^="dialog-modal-add"].ui-dialog-content > :is(fieldset, div), [id^="dialog-modal-add"] .installationTypeFields) > p:has(> input[id*="btnConfirm"]) > a {
            display: inline-flex;
            align-items: center;
            flex: 0 1 auto;
            min-width: 0;
            box-sizing: border-box;
            min-height: 36px;
            margin-left: 8px;
            padding: 0 12px;
            border: 1px solid #D1D5DB;
            border-radius: 6px;
            background: #FFFFFF;
            color: #374151 !important;
            font-size: 13px;
            white-space: nowrap;
            text-decoration: none;
            transition: background-color .15s ease, border-color .15s ease;
        }

            .ui-dialog.ui-widget :is([id^="dialog-modal-add"].ui-dialog-content > :is(fieldset, div), [id^="dialog-modal-add"] .installationTypeFields) > p:has(> input[id*="btnConfirm"]) > a:hover {
                background: #F3F4F6;
                border-color: #9CA3AF;
            }

            .ui-dialog.ui-widget :is([id^="dialog-modal-add"].ui-dialog-content > :is(fieldset, div), [id^="dialog-modal-add"] .installationTypeFields) > p:has(> input[id*="btnConfirm"]) > a u {
                text-decoration: none;
            }

/* smal scherm: schermvullend */
@media (max-width: 600px) {
    .ui-dialog:has(> [id^="dialog-modal-add"]) {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        border-radius: 0 !important;
        translate: none;
        max-height: none;
    }

    [id^="dialog-modal-add"].ui-dialog-content {
        max-height: calc(100% - 53px);
        height: calc(100% - 53px) !important;
        box-sizing: border-box;
    }
}

/* ---------- 20. Modal "Factuurlijn koppelen" (aankoopfactuur) ---------- */
#dialog-modal-linkLine.ui-dialog-content {
    box-sizing: border-box;
    display: flex;
    flex-direction: column; /* knoppenbalk altijd onderaan, ook bij weinig inhoud */
    padding: 20px 24px 0 !important;
    overflow-y: auto;
    background-color: #F8F9FA !important;
}

.ui-dialog:has(> #dialog-modal-linkLine) .ui-resizable-handle {
    display: none !important;
}

/* kaarten */
#dialog-modal-linkLine > fieldset.settingshighlight {
    margin: 0 0 16px;
    padding: 20px;
    background: #FFFFFF;
    border: 1px solid #E5E7EB;
    border-radius: 10px;
    min-inline-size: 0;
}

    /* blok waarop geklikt werd (bv. "aan project koppelen") kort markeren */
    #dialog-modal-linkLine > fieldset.settingshighlight {
        transition: border-color .3s ease, box-shadow .3s ease;
    }

        #dialog-modal-linkLine > fieldset.settingshighlight.is-focus {
            border-color: var(--theme, #57a000);
            box-shadow: 0 0 0 3px var(--theme-soft, #eef7e0);
        }

    /* kop: zelfde balk als de andere kaarten (fieldset > h3), afgeronde hoeken */
    #dialog-modal-linkLine > fieldset.settingshighlight > h3 {
        gap: 8px;
        margin: -20px -20px 20px;
        padding: 0 20px;
        border-radius: 10px 10px 0 0;
        font-size: 15px;
        font-weight: 600;
        color: #111827;
    }

    #dialog-modal-linkLine label {
        display: block;
        margin: 0 0 8px;
        padding: 0;
        font-size: 13px;
        font-weight: 500;
        color: #374151;
    }

    /* aanvinkvakjes: vakje en tekst netjes naast elkaar */
    #dialog-modal-linkLine :is(.chkCreateDelivery, .chkProforma) {
        display: inline-flex;
        align-items: flex-start;
        gap: 8px;
        max-width: 100%;
        white-space: normal;
    }

        #dialog-modal-linkLine :is(.chkCreateDelivery, .chkProforma) input[type="checkbox"] {
            flex: none;
            margin: 2px 0 0;
            accent-color: var(--theme, #57a000);
        }

        #dialog-modal-linkLine :is(.chkCreateDelivery, .chkProforma) label {
            display: inline;
            margin: 0;
            font-weight: normal;
            line-height: 1.45;
            white-space: normal;
        }

    #dialog-modal-linkLine .link-hint {
        display: block;
        margin-top: 8px;
        font-size: 12px;
        color: #6B7280;
    }

/* samenvatting van de factuurlijn */
#dialog-modal-linkLine .link-summary {
    margin: 0 0 16px;
    padding: 18px 22px;
    background: #FFFFFF;
    border: 1px solid #E5E7EB;
    border-left: 4px solid var(--theme, #57a000);
    border-radius: 10px;
}

    #dialog-modal-linkLine .link-summary:empty {
        display: none !important;
    }

#dialog-modal-linkLine .link-summary-main {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 10px;
}

#dialog-modal-linkLine .link-summary-label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #6B7280;
}

#dialog-modal-linkLine .link-summary-name {
    font-size: 15px;
    font-weight: 600;
    color: #111827;
}

#dialog-modal-linkLine .link-summary-code {
    font-size: 12px;
    color: #6B7280;
}

#dialog-modal-linkLine .link-summary-facts {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 40px;
    margin: 14px 0 0;
    padding: 14px 0 0;
    border-top: 1px solid #F1F2F4;
}

    #dialog-modal-linkLine .link-summary-facts > div {
        margin: 0;
    }

    #dialog-modal-linkLine .link-summary-facts dt {
        margin: 0;
        font-size: 12px;
        color: #6B7280;
    }

    #dialog-modal-linkLine .link-summary-facts dd {
        margin: 4px 0 0;
        font-size: 14px;
        font-weight: 500;
        color: #111827;
        font-variant-numeric: tabular-nums;
    }

#dialog-modal-linkLine .link-summary-sub {
    font-size: 12px;
    font-weight: normal;
    color: #6B7280;
}

/* keuze: bestaand of nieuw product (Simpla-knoppen; actieve keuze omlijnd in themakleur) */
#dialog-modal-linkLine .link-choice {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0 0 22px;
}

#dialog-modal-linkLine .link-choice-btn {
    margin: 0;
    font-family: inherit;
    line-height: normal;
}

    #dialog-modal-linkLine .link-choice-btn.is-active {
        background: #FFFFFF;
        border-color: var(--theme, #57a000);
        color: var(--theme-dark, #459300);
        box-shadow: inset 0 0 0 1px var(--theme, #57a000);
    }

    #dialog-modal-linkLine .link-choice-btn:not(.is-active) {
        background: #F9FAFB;
        color: #6B7280;
    }

    #dialog-modal-linkLine .link-choice-btn:focus-visible {
        outline: none;
        box-shadow: 0 0 0 3px var(--theme-soft, #eef7e0), 0 0 0 1px var(--theme, #57a000);
    }

/* bestaand product */
/* openklaplijst van Chosen even breed als het veld */
#dialog-modal-linkLine .chosen-container .chosen-drop {
    width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box;
}

#dialog-modal-linkLine .link-panel-existing .chosen-container {
    width: 100% !important;
    max-width: 560px;
}

#dialog-modal-linkLine .ddlLinkProductImage img {
    margin: 6px 0 0;
    border-radius: 4px;
}

/* voorgestelde match */
#dialog-modal-linkLine .link-match {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px 20px;
    margin: 0 0 20px;
    padding: 14px 18px;
    background: var(--theme-soft, #eef7e0);
    border: 1px solid var(--theme, #57a000);
    border-radius: 8px;
}

    #dialog-modal-linkLine .link-match[style*="none"] {
        display: none !important;
    }

    #dialog-modal-linkLine .link-match .link-match-text {
        font-size: 13px;
        color: #111827;
    }

    #dialog-modal-linkLine .link-match .button {
        margin: 0;
    }

    #dialog-modal-linkLine .link-match.is-done {
        background: #F0FDF4;
        border-color: #86EFAC;
    }

/* nieuw product: labels boven de velden, 2 kolommen */
#dialog-modal-linkLine .link-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px 24px;
}

#dialog-modal-linkLine .link-field .button {
    margin-top: 10px;
    font-family: inherit;
}

#dialog-modal-linkLine .link-field-full {
    grid-column: 1 / -1;
}

#dialog-modal-linkLine :is(.link-grid, .link-calc) select {
    display: flex !important;
    align-items: center;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

#dialog-modal-linkLine :is(.link-grid, .link-calc) input.text-input {
    display: block;
}

#dialog-modal-linkLine :is(.link-grid, .link-calc) input.text-input,
#dialog-modal-linkLine :is(.link-grid, .link-calc) select {
    box-sizing: border-box !important;
    width: 100% !important;
    min-width: 100% !important; /* wint van de inline breedte die setDynamicWidth zet bij klikken */
    max-width: 100% !important;
    height: 36px !important;
    margin: 0;
}

#dialog-modal-linkLine .link-grid .chosen-container {
    width: 100% !important;
}

/* prijsberekening op één rij */
#dialog-modal-linkLine .link-calc {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 14px 10px;
    margin: 24px 0 0;
    padding: 18px 20px;
    background: #F9FAFB;
    border: 1px solid #EEF0F3;
    border-radius: 8px;
}

#dialog-modal-linkLine .link-calc-step {
    flex: 1 1 120px;
    min-width: 110px;
}

    #dialog-modal-linkLine .link-calc-step:has(select) {
        flex-basis: 170px;
    }

    #dialog-modal-linkLine .link-calc-step label {
        white-space: nowrap;
    }

#dialog-modal-linkLine .link-calc-op {
    flex: none;
    padding: 0 2px 9px;
    font-size: 16px;
    color: #9CA3AF;
}

/* € en % in het veld zelf, bedragen rechts uitgelijnd */
#dialog-modal-linkLine .input-affix {
    position: relative;
    display: block;
}

    #dialog-modal-linkLine .input-affix::before {
        content: attr(data-affix);
        position: absolute;
        top: 50%;
        left: 10px;
        transform: translateY(-50%);
        font-size: 13px;
        color: #6B7280;
        pointer-events: none;
    }

    #dialog-modal-linkLine .input-affix input.text-input {
        padding-left: 26px !important;
        padding-right: 10px !important;
        text-align: right;
        font-variant-numeric: tabular-nums;
    }

    #dialog-modal-linkLine .input-affix[data-affix="%"]::before {
        left: auto;
        right: 10px;
    }

    #dialog-modal-linkLine .input-affix[data-affix="%"] input.text-input {
        padding-left: 10px !important;
        padding-right: 26px !important;
    }

#dialog-modal-linkLine .link-new-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 16px;
    margin-top: 24px;
}

    #dialog-modal-linkLine .link-new-actions .button {
        margin: 0;
    }

    #dialog-modal-linkLine .link-new-actions .link-hint {
        margin: 0;
    }

/* optionele secties: inklapbaar */
#dialog-modal-linkLine .link-optional > h3.link-optional-toggle {
    cursor: pointer;
    user-select: none;
}

    /* ingeklapt: enkel de kopbalk */
    #dialog-modal-linkLine .link-optional:not(.is-open) {
        padding-bottom: 0;
    }

        #dialog-modal-linkLine .link-optional:not(.is-open) > h3.link-optional-toggle {
            margin-bottom: 0;
            border-bottom-color: transparent !important;
            border-radius: 10px;
        }

    #dialog-modal-linkLine .link-optional > h3.link-optional-toggle::after {
        content: "";
        width: 8px;
        height: 8px;
        margin-left: auto;
        border-right: 2px solid #6B7280;
        border-bottom: 2px solid #6B7280;
        transform: rotate(45deg) translateY(-3px);
        transition: transform .15s ease;
    }

    #dialog-modal-linkLine .link-optional.is-open > h3.link-optional-toggle::after {
        transform: rotate(-135deg) translate(-2px, -1px);
    }

#dialog-modal-linkLine .link-optional:not(.is-open) > .link-optional-body {
    display: none;
}

#dialog-modal-linkLine .link-optional-badge {
    padding: 2px 8px;
    border-radius: 999px;
    background: #F3F4F6;
    font-size: 11px;
    font-weight: normal;
    color: #6B7280;
}

/* project / grootboek / verkoopfactuur: luchtiger */
#dialog-modal-linkLine fieldset.settingshighlight > p,
#dialog-modal-linkLine .link-optional-body > p {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 16px;
    margin: 0;
    padding: 0;
    font-size: 0;
}

    #dialog-modal-linkLine fieldset.settingshighlight > p > *,
    #dialog-modal-linkLine .link-optional-body > p > * {
        font-size: 14px;
    }

    #dialog-modal-linkLine fieldset.settingshighlight > p > .button {
        margin: 0;
    }

    /* keuzelijsten (Chosen) in deze rijen: vaste, ruime breedte (ook als ze verborgen geïnitialiseerd werden) */
    #dialog-modal-linkLine fieldset.settingshighlight > p > .chosen-container,
    #dialog-modal-linkLine .link-optional-body > p > .chosen-container {
        flex: 0 1 420px;
        width: 420px !important;
        min-width: 240px;
    }

#dialog-modal-linkLine .link-optional-body > table {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
}

    #dialog-modal-linkLine .link-optional-body > table td {
        padding: 0 24px 14px 0;
        vertical-align: top;
        white-space: normal;
        line-height: 1.6;
    }

        /* lege tussenrij en <br /> weg: vaste tussenruimtes */
        #dialog-modal-linkLine .link-optional-body > table tr:has(> td[colspan]) {
            display: none;
        }

        #dialog-modal-linkLine .link-optional-body > table td > br {
            display: none;
        }

        #dialog-modal-linkLine .link-optional-body > table td > .chkProforma {
            display: flex;
            width: 100%;
            margin-top: 12px;
        }

        #dialog-modal-linkLine .link-optional-body > table td > .button {
            margin-top: 16px;
        }

        #dialog-modal-linkLine .link-optional-body > table td:last-child {
            padding-right: 0;
        }

        #dialog-modal-linkLine .link-optional-body > table td label {
            line-height: 1.4;
        }

        #dialog-modal-linkLine .link-optional-body > table td input.text-input {
            vertical-align: middle;
        }

        /* getalvelden: vaste breedte (Simpla past de breedte anders aan bij klikken) */
        #dialog-modal-linkLine .link-optional-body > table td input.supersmall-input {
            min-width: 80px !important;
            max-width: 80px !important;
            text-align: right;
        }

    #dialog-modal-linkLine .link-optional-body > table td .chosen-container {
        width: 100% !important;
        max-width: 420px;
    }

#dialog-modal-linkLine .chkLinkCreateDelivery.is-disabled {
    opacity: .5;
    cursor: not-allowed;
}

/* vaste knoppenbalk onderaan */
#dialog-modal-linkLine > * {
    flex: none;
}

#dialog-modal-linkLine > .link-footer {
    position: sticky;
    bottom: 0;
    margin-top: auto !important;
    z-index: 3;
    margin: 8px -24px 0;
    padding: 14px 24px;
    background: #FFFFFF;
    border-top: 1px solid #E5E7EB;
}

    #dialog-modal-linkLine > .link-footer > p {
        display: flex;
        align-items: center;
        gap: 10px;
        margin: 0;
        padding: 0;
        font-size: 0;
    }

        #dialog-modal-linkLine > .link-footer > p > * {
            margin: 0;
            font-size: 14px;
        }

    #dialog-modal-linkLine > .link-footer .notification {
        margin: 0 0 10px;
    }

@media (max-width: 700px) {
    #dialog-modal-linkLine .link-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    #dialog-modal-linkLine .link-calc-op {
        display: none;
    }
}

/* ---------- 21. Agenda: visuele overzichten (planning, week, week naast elkaar, dag) ----------
   Enkel #tab1 (planning van de agenda) en #spnPlanning (visueel overzicht van de tijdsregistraties); de lijsten blijven ongewijzigd.
   Uurweergaven herkennen we aan .divHour: daar blijven de hoogtes (30px of 60px per uur) exact,
   omdat de afspraken op basis daarvan gepositioneerd worden. */

:is(#tab1, #spnPlanning) .tblAgendaoverview {
    width: 100%;
    border-collapse: separate !important;
    border-spacing: 0;
    background: #FFFFFF;
    border: 1px solid #E5E7EB;
    border-radius: 10px;
    font-size: 13px;
    color: #374151;
}

    :is(#tab1, #spnPlanning) .tblAgendaoverview :is(td, th) {
        border: 0 !important;
        border-right: 1px solid #EEF0F3 !important;
        border-bottom: 1px solid #EEF0F3 !important;
    }

    :is(#tab1, #spnPlanning) .tblAgendaoverview tr > :is(td, th):last-child {
        border-right: 0 !important;
    }

    /* achtergronden: rustiger dan de vaste inline kleuren */
    :is(#tab1, #spnPlanning) .tblAgendaoverview :is(td, th)[style*="background-color:#FFFFFF"] {
        background-color: #FFFFFF !important;
    }

    :is(#tab1, #spnPlanning) .tblAgendaoverview :is(td, th)[style*="background-color:#F5F5F5"],
    :is(#tab1, #spnPlanning) .tblAgendaoverview td.weekend {
        background-color: #FAFAFB !important;
    }

    :is(#tab1, #spnPlanning) .tblAgendaoverview :is(td, th)[style*="background-color:#F7F7FA"] {
        background-color: #F9FAFB !important;
        color: #6B7280;
    }

    /* rij met de dagnamen */
    :is(#tab1, #spnPlanning) .tblAgendaoverview .trDays td {
        padding: 10px 8px !important;
        background-color: #F9FAFB !important;
        font-size: 11px;
        font-weight: 600;
        letter-spacing: .05em;
        text-transform: uppercase;
        color: #6B7280;
    }

        :is(#tab1, #spnPlanning) .tblAgendaoverview .trDays td:first-child {
            border-top-left-radius: 10px;
        }

        :is(#tab1, #spnPlanning) .tblAgendaoverview .trDays td:last-child {
            border-top-right-radius: 10px;
        }

    /* datumcellen */
    :is(#tab1, #spnPlanning) .tblAgendaoverview thead td[data-date] {
        padding: 8px 10px !important;
        font-size: 12px;
        font-weight: 600;
        color: #374151;
    }

    /* vandaag + gekozen startdatum + feestdag */
    :is(#tab1, #spnPlanning) .tblAgendaoverview td[data-date] .orderlabel {
        display: inline-block;
        padding: 2px 9px;
        border-radius: 8px;
        background: var(--theme, #57a000) !important;
        color: #FFFFFF !important;
        font-weight: 600;
        line-height: 1.5;
    }

    :is(#tab1, #spnPlanning) .tblAgendaoverview td[data-date] .oklabel {
        display: inline-block;
        padding: 1px 8px;
        border: 1px solid var(--theme, #57a000);
        border-radius: 8px;
        background: var(--theme-soft, #eef7e0) !important;
        color: var(--theme-dark, #459300) !important;
        font-weight: 600;
        line-height: 1.5;
    }

    :is(#tab1, #spnPlanning) .tblAgendaoverview td[data-date] .timeoutlabel {
        display: inline-block;
        margin-left: 4px;
        padding: 1px 7px;
        border-radius: 999px;
        background: #FEF3C7 !important;
        color: #92400E !important;
        font-size: 11px;
        font-weight: 500;
        line-height: 1.5;
        white-space: nowrap;
    }

    /* lege cel: klik = nieuwe afspraak */
    :is(#tab1, #spnPlanning) .tblAgendaoverview td.notplanned {
        transition: background-color .12s ease;
    }

        :is(#tab1, #spnPlanning) .tblAgendaoverview td.notplanned:hover {
            background-color: var(--theme-soft, #eef7e0) !important;
        }

    /* plaatshouder tijdens het verslepen */
    :is(#tab1, #spnPlanning) .tblAgendaoverview .placeholder {
        min-height: 44px;
        margin: 0 0 6px;
        border: 2px dashed var(--theme, #57a000);
        border-radius: 6px;
        background: var(--theme-soft, #eef7e0);
    }

    /* ---- afspraken ---- */
    :is(#tab1, #spnPlanning) .tblAgendaoverview .meetingItem {
        border: 1px solid rgba(17, 24, 39, .10) !important;
        border-left: 3px solid rgba(17, 24, 39, .30) !important;
        border-radius: 6px !important;
        box-shadow: 0 1px 2px rgba(16, 24, 40, .06);
        font-size: 12px;
        line-height: 1.35 !important;
        text-align: left;
        cursor: pointer;
        transition: box-shadow .15s ease, filter .15s ease;
    }

        :is(#tab1, #spnPlanning) .tblAgendaoverview .meetingItem:hover {
            box-shadow: 0 4px 12px rgba(16, 24, 40, .16);
            filter: brightness(.97);
        }

        :is(#tab1, #spnPlanning) .tblAgendaoverview .meetingItem small {
            display: inline-block;
            width: auto !important;
            min-width: 0 !important;
            margin-left: 2px;
            padding: 0 6px;
            border-radius: 999px;
            font-size: 10px;
            line-height: 16px;
            vertical-align: 1px;
        }

        /* kaartje: kleur(verloop) van de deelnemers vult het hele vlak; binnenruimte zit in .mi-inner */
        :is(#tab1, #spnPlanning) .tblAgendaoverview .meetingItem {
            padding: 0 !important;
            overflow: hidden;
        }

        /* planning (zonder uren): kaartjes onder elkaar */
        :is(#tab1, #spnPlanning) .tblAgendaoverview .meetingItem:not([style*="position"]) {
            margin: 0 0 6px;
        }

        /* uurweergaven: vaste positie, geen schuifbalken */
        :is(#tab1, #spnPlanning) .tblAgendaoverview .meetingItem[style*="position"] {
            display: block !important;
            box-sizing: border-box;
            overflow: hidden !important;
            z-index: 1;
        }

            :is(#tab1, #spnPlanning) .tblAgendaoverview .meetingItem[style*="position"]:hover {
                z-index: 4;
            }

/* ---- inhoud van een afspraak: uur + icoontjes / titel / klant · project · installatie / labels ---- */
:is(#tab1, #spnPlanning) .tblAgendaoverview .mi-inner {
    display: flex;
    flex-direction: column;
    gap: 1px;
    box-sizing: border-box;
    min-width: 0;
    padding: 6px 8px;
}

:is(#tab1, #spnPlanning) .tblAgendaoverview .meetingItem[style*="position"] .mi-inner {
    padding: 3px 6px;
}

:is(#tab1, #spnPlanning) .tblAgendaoverview .mi-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 6px;
    min-width: 0;
    font-size: 11px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

    :is(#tab1, #spnPlanning) .tblAgendaoverview .mi-head .mi-time {
        opacity: .85;
    }

    :is(#tab1, #spnPlanning) .tblAgendaoverview .mi-head .mi-icons {
        flex: none;
        font-size: 11px;
        letter-spacing: 1px;
    }

:is(#tab1, #spnPlanning) .tblAgendaoverview .mi-title {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    overflow-wrap: anywhere;
    font-size: 12px;
    line-height: 1.3;
}

    :is(#tab1, #spnPlanning) .tblAgendaoverview .mi-title strong {
        font-weight: 600;
    }

:is(#tab1, #spnPlanning) .tblAgendaoverview .mi-sub {
    overflow: hidden;
    font-size: 11px;
    line-height: 1.35;
    opacity: .8;
    white-space: nowrap;
    text-overflow: ellipsis;
}

:is(#tab1, #spnPlanning) .tblAgendaoverview .mi-labels {
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
    margin-top: 3px;
}

    :is(#tab1, #spnPlanning) .tblAgendaoverview .mi-labels small {
        margin: 0 !important;
    }

/* korte afspraken in de uurweergaven: inhoud volgens de beschikbare hoogte (container queries) */
:is(#tab1, #spnPlanning) .tblAgendaoverview .meetingItem[style*="position"] {
    container-type: size;
}

/* tot ± 2 uur in de weekweergave: geen labels, titel op één regel */
@container (max-height: 72px) {
    :is(#tab1, #spnPlanning) .tblAgendaoverview .mi-labels {
        display: none;
    }

    :is(#tab1, #spnPlanning) .tblAgendaoverview .mi-title {
        -webkit-line-clamp: 1;
    }
}

/* tot ± 1u30 in de weekweergave: enkel uur en titel */
@container (max-height: 52px) {
    :is(#tab1, #spnPlanning) .tblAgendaoverview .mi-sub,
    :is(#tab1, #spnPlanning) .tblAgendaoverview .mi-labels {
        display: none;
    }

    :is(#tab1, #spnPlanning) .tblAgendaoverview .mi-title {
        -webkit-line-clamp: 1;
    }
}

/* tot ± 1 uur in de weekweergave: alles op één regel */
@container (max-height: 34px) {
    :is(#tab1, #spnPlanning) .tblAgendaoverview .mi-inner {
        flex-direction: row;
        align-items: center;
        gap: 6px;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        white-space: nowrap;
    }

    :is(#tab1, #spnPlanning) .tblAgendaoverview .mi-head {
        flex: none;
    }

        :is(#tab1, #spnPlanning) .tblAgendaoverview .mi-head .mi-icons {
            display: none;
        }

    :is(#tab1, #spnPlanning) .tblAgendaoverview .mi-title {
        display: block;
        min-width: 0;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}

/* smalle kolom (overlappende afspraken naast elkaar): uur boven de titel, geen icoontjes */
@container (max-width: 90px) {
    :is(#tab1, #spnPlanning) .tblAgendaoverview .mi-head .mi-icons {
        display: none;
    }
}

/* ---- status zichtbaar zonder labels ---- */
/* ---- kleuren: achtergrond- en tekstkleur van de gebruiker (zoals ingesteld bij de gebruiker), iets donkerdere balk links ---- */
:is(#tab1, #spnPlanning) .tblAgendaoverview .meetingItem {
    border: 1px solid rgba(17, 24, 39, .12) !important;
}

    :is(#tab1, #spnPlanning) .tblAgendaoverview .meetingItem .mi-inner {
        position: relative;
        padding-left: 11px !important;
    }

        :is(#tab1, #spnPlanning) .tblAgendaoverview .meetingItem .mi-inner::before {
            content: "";
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            width: 4px;
            background: var(--mi-color, #9CA3AF);
        }

    /* nog niet bevestigd: onderbroken balk */
    :is(#tab1, #spnPlanning) .tblAgendaoverview .meetingItem.is-unconfirmed .mi-inner::before {
        background: repeating-linear-gradient(to bottom, var(--mi-color, #9CA3AF) 0 5px, transparent 5px 8px);
    }

    :is(#tab1, #spnPlanning) .tblAgendaoverview .meetingItem .mi-time {
        opacity: .75;
    }

:is(#tab1, #spnPlanning) .tblAgendaoverview .meetingItem.is-past {
    opacity: 1; /* voorbije dagen worden al als geheel gedimd; niet nog eens extra (kleur blijft herkenbaar) */
}

:is(#tab1, #spnPlanning) .tblAgendaoverview .meetingItem.is-done {
    opacity: .8;
}

    :is(#tab1, #spnPlanning) .tblAgendaoverview .meetingItem.is-done .mi-title strong::before {
        content: "✓ ";
    }

:is(#tab1, #spnPlanning) .tblAgendaoverview .meetingItem:is(.is-past, .is-done):hover {
    opacity: 1;
}

/* ---- vandaag ---- */
:is(#tab1, #spnPlanning) .tblAgendaoverview td.is-today {
    background-color: color-mix(in srgb, var(--theme-soft, #eef7e0) 55%, #FFFFFF) !important;
}

:is(#tab1, #spnPlanning) .tblAgendaoverview .agenda-now {
    position: absolute;
    left: 0;
    right: 0;
    z-index: 5;
    height: 0;
    border-top: 2px solid #EF4444;
    pointer-events: none;
}

    :is(#tab1, #spnPlanning) .tblAgendaoverview .agenda-now::before {
        content: "";
        position: absolute;
        top: -5px;
        left: -4px;
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: #EF4444;
    }

/* planning: gelijke kolommen (lange klantnamen worden afgekort i.p.v. de kolom te verbreden) */
:is(#tab1, #spnPlanning) .tblAgendaoverview.tbl-planning {
    table-layout: fixed;
}

    :is(#tab1, #spnPlanning) .tblAgendaoverview.tbl-planning .trDays td:first-child {
        width: 48px;
    }

    :is(#tab1, #spnPlanning) .tblAgendaoverview.tbl-planning .trDays td:not(:first-child) {
        width: auto !important;
    }

/* planning: lagere minimumhoogte per dag */
:is(#tab1, #spnPlanning) .tblAgendaoverview.tbl-planning tbody td {
    padding: 2px 8px 8px !important;
    vertical-align: top;
}

    :is(#tab1, #spnPlanning) .tblAgendaoverview.tbl-planning thead td[data-date] {
        border-bottom: 0 !important; /* datum en afspraken vormen één vak */
        text-align: left;
    }

:is(#tab1, #spnPlanning) .tblAgendaoverview.tbl-planning .agendaDate {
    min-height: 140px;
}

/* ---- uurweergaven (week, week naast elkaar, dag) ---- */
:is(#tab1, #spnPlanning) .tblAgendaoverview.tbl-hours tbody td {
    position: relative;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* dagkolom = tijdlijn van 06:00 tot 21:00 (15 uur × 30px; dagweergave × 60px) */
:is(#tab1, #spnPlanning) .tblAgendaoverview.tbl-hours .agendaDate {
    position: relative;
    height: 450px;
    min-height: 0;
}

:is(#tab1, #spnPlanning) .tblAgendaoverview.tbl-day .agendaDate {
    height: 900px;
}

/* uurkolom: neutraal en rechts uitgelijnd */
:is(#tab1, #spnPlanning) .tblAgendaoverview td.td-hours {
    background-color: #F9FAFB !important;
    color: #6B7280 !important;
}

:is(#tab1, #spnPlanning) .tblAgendaoverview .divHour {
    box-sizing: border-box;
    padding: 2px 8px 0 0;
    border-top: 1px solid #EEF0F3;
    font-size: 11px;
    color: #9CA3AF;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* uurlijnen in de dagkolommen (30px per uur; dagweergave 60px) */
:is(#tab1, #spnPlanning) .tblAgendaoverview.tbl-hours tbody td[data-user]:not([data-user=""]) {
    background-image: linear-gradient(#F1F2F4 1px, transparent 1px);
    background-size: 100% 30px;
}

:is(#tab1, #spnPlanning) .tblAgendaoverview.tbl-day tbody td[data-user]:not([data-user=""]) {
    background-size: 100% 60px;
}

/* gebruiker (verticale naam) */
:is(#tab1, #spnPlanning) .tblAgendaoverview td[style*="writing-mode"] .button {
    padding: 10px 6px;
    border-radius: 999px;
    font-size: 12px;
    letter-spacing: .02em;
}

/* week naast elkaar: scheiding tussen de weken */
:is(#tab1, #spnPlanning) .tblAgendaoverviewHorizontal :is(td, th)[style*="#3B82F6"] {
    border-bottom: 2px solid var(--theme, #57a000) !important;
}

:is(#tab1, #spnPlanning) .tblAgendaoverviewHorizontal th {
    padding: 10px 8px !important;
}

@media print {
    :is(#tab1, #spnPlanning) .tblAgendaoverview .meetingItem {
        box-shadow: none;
    }
}

/* ---------- 22. Agenda: tooltip bij een afspraak (.mt) en modal "afspraak raadplegen" (.mm) ---------- */

/* -- tooltipster-kader: lichte kaart i.p.v. donkergrijs (enkel voor afspraak-tooltips) -- */
.tooltipster-base:has(.mt) .tooltipster-box {
    background: #FFFFFF !important;
    border: 1px solid #E5E7EB !important;
    border-radius: 12px !important;
    box-shadow: 0 18px 40px -10px rgba(16, 24, 40, .28), 0 2px 6px rgba(16, 24, 40, .08);
}

.tooltipster-base:has(.mt) .tooltipster-content {
    padding: 0 !important;
    color: #374151 !important;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
    line-height: 1.45 !important;
}

.tooltipster-base:has(.mt).tooltipster-top .tooltipster-arrow-background { border-top-color: #FFFFFF !important; }
.tooltipster-base:has(.mt).tooltipster-top .tooltipster-arrow-border { border-top-color: #E5E7EB !important; }
.tooltipster-base:has(.mt).tooltipster-bottom .tooltipster-arrow-background { border-bottom-color: #F9FAFB !important; }
.tooltipster-base:has(.mt).tooltipster-bottom .tooltipster-arrow-border { border-bottom-color: #E5E7EB !important; }
.tooltipster-base:has(.mt).tooltipster-left .tooltipster-arrow-background { border-left-color: #FFFFFF !important; }
.tooltipster-base:has(.mt).tooltipster-left .tooltipster-arrow-border { border-left-color: #E5E7EB !important; }
.tooltipster-base:has(.mt).tooltipster-right .tooltipster-arrow-background { border-right-color: #FFFFFF !important; }
.tooltipster-base:has(.mt).tooltipster-right .tooltipster-arrow-border { border-right-color: #E5E7EB !important; }

.mt {
    width: 400px;
    max-width: calc(100vw - 32px);
    text-align: left;
}

    .mt strong {
        color: inherit !important;
    }

.mt-head {
    padding: 14px 16px 12px;
    border-bottom: 1px solid #F1F2F4;
}

.mt-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: 6px;
}

.mt-badge,
.mm-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 999px;
    color: #FFFFFF !important;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .04em;
    line-height: 1.6;
    text-transform: uppercase;
}

.mt-title {
    font-size: 15px;
    font-weight: 600;
    line-height: 1.3;
    color: #111827;
}

.mt-when {
    margin-top: 4px;
    font-size: 12px;
    color: #6B7280;
    font-variant-numeric: tabular-nums;
}

.mt-facts {
    display: grid;
    gap: 7px;
    margin: 0;
    padding: 12px 16px;
}

.mt-row {
    display: grid;
    grid-template-columns: 84px minmax(0, 1fr);
    gap: 10px;
    margin: 0;
}

    .mt-row dt {
        margin: 0;
        padding-top: 2px;
        font-size: 10px;
        font-weight: 600;
        letter-spacing: .05em;
        text-transform: uppercase;
        color: #9CA3AF;
    }

    .mt-row dd {
        margin: 0;
        font-size: 13px;
        color: #374151;
        overflow-wrap: anywhere;
    }

.mt-chips,
.mm-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.mt-person,
.mt-chip,
.mm-person {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 1px 8px;
    border-radius: 999px;
    background: #F3F4F6;
    font-size: 12px;
    color: #374151;
    line-height: 1.6;
}

.mt-dot {
    flex: none;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    box-shadow: inset 0 0 0 1px rgba(17, 24, 39, .15);
}

.mt-warning {
    margin: 0 16px 12px;
    padding: 8px 10px;
    border: 1px solid #FDE68A;
    border-radius: 8px;
    background: #FFFBEB;
    font-size: 12px;
    color: #92400E;
}

.mt-states {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 0 16px 12px;
}

.mt-state,
.mm-state {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 9px;
    border-radius: 999px;
    background: #ECFDF5;
    font-size: 11px;
    font-weight: 500;
    color: #047857;
    line-height: 1.6;
}

/* knoppen en links in de tooltip (overschrijft de algemene stijl van links in tooltips) */
.tooltipster-content .mt a {
    line-height: 1.4 !important;
    font-size: 12px !important;
}

.mt-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 12px 16px;
    border-top: 1px solid #F1F2F4;
}

.tooltipster-content .mt a.mt-btn {
    display: inline-flex;
    align-items: center;
    padding: 5px 11px !important;
    border: 1px solid #E5E7EB !important;
    border-radius: 6px !important;
    background: #FFFFFF !important;
    color: #374151 !important;
    font-weight: 500;
    transition: background-color .12s ease, border-color .12s ease;
}

    .tooltipster-content .mt a.mt-btn:hover {
        border-color: #D1D5DB !important;
        background: #F9FAFB !important;
    }

    .tooltipster-content .mt a.mt-btn.mt-btn-primary {
        border-color: var(--theme, #57a000) !important;
        background: var(--theme, #57a000) !important;
        color: #FFFFFF !important;
    }

        .tooltipster-content .mt a.mt-btn.mt-btn-primary:hover {
            filter: brightness(.93);
        }

    .tooltipster-content .mt a.mt-btn.mt-btn-danger {
        color: #B91C1C !important;
    }

        .tooltipster-content .mt a.mt-btn.mt-btn-danger:hover {
            border-color: #FECACA !important;
            background: #FEF2F2 !important;
        }

.mt-followup {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2px 6px;
    padding: 8px 10px;
    border-top: 1px solid #F1F2F4;
    background: #F9FAFB;
}

.tooltipster-content .mt a.mt-link,
.tooltipster-content .mt a.mt-inline {
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: none !important;
    color: var(--theme-dark, #459300) !important;
}

.tooltipster-content .mt-followup a.mt-link {
    display: block;
    padding: 5px 6px !important;
    border-radius: 6px !important;
    color: #374151 !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

    .tooltipster-content .mt-followup a.mt-link:hover {
        background: #FFFFFF !important;
        color: var(--theme-dark, #459300) !important;
    }

.tooltipster-content .mt a.mt-inline {
    text-decoration: underline !important;
}

.mt-hint {
    padding: 8px 16px;
    border-top: 1px solid #F1F2F4;
    border-radius: 0 0 12px 12px;
    background: #F9FAFB;
    font-size: 11px;
    color: #9CA3AF;
}

/* -- modal "afspraak raadplegen" -- */
.ui-dialog.meeting-dialog .ui-dialog-content {
    padding: 20px 24px;
}

.mm {
    font-size: 14px;
    color: #374151;
    line-height: 1.5;
}

.mm-top {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 12px;
    padding-bottom: 14px;
    border-bottom: 1px solid #F1F2F4;
}

.mm-when {
    font-size: 15px;
    font-weight: 600;
    color: #111827;
    font-variant-numeric: tabular-nums;
}

.mm-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.mm-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 14px;
}

.ui-dialog .ui-dialog-content .mm a.mm-action {
    display: inline-flex;
    align-items: center;
    padding: 6px 12px !important;
    border: 1px solid #E5E7EB !important;
    border-radius: 6px !important;
    background: #FFFFFF !important;
    color: #374151 !important;
    font-size: 13px !important;
    font-weight: 500;
    line-height: 1.4 !important;
    text-decoration: none !important;
    transition: background-color .12s ease, border-color .12s ease;
}

    .ui-dialog .ui-dialog-content .mm a.mm-action:hover {
        border-color: #D1D5DB !important;
        background: #F9FAFB !important;
    }

.mm-facts {
    margin: 16px 0 0;
    padding: 0;
}

.mm-row {
    display: grid;
    grid-template-columns: 130px minmax(0, 1fr);
    gap: 12px;
    margin: 0;
    padding: 9px 0;
    border-bottom: 1px solid #F3F4F6;
}

    .mm-row:last-child {
        border-bottom: 0;
    }

    .mm-row dt {
        margin: 0;
        font-size: 12px;
        color: #6B7280;
    }

    .mm-row dd {
        margin: 0;
        color: #111827;
        overflow-wrap: anywhere;
    }

.mm-links {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 4px 10px;
    margin-left: 10px;
}

.ui-dialog .ui-dialog-content .mm a.mm-link {
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: none !important;
    color: var(--theme-dark, #459300) !important;
    font-size: 12px !important;
    line-height: 1.4 !important;
    text-decoration: underline !important;
    text-underline-offset: 2px;
}

.mm-section {
    margin-top: 20px;
}

    .mm-section h4 {
        margin: 0 0 8px;
        padding: 0;
        border: 0;
        font-size: 11px;
        font-weight: 600;
        letter-spacing: .06em;
        text-transform: uppercase;
        color: #6B7280;
    }

.mm-description {
    padding: 12px 14px;
    border: 1px solid #EEF0F3;
    border-radius: 8px;
    background: #F9FAFB;
    overflow-wrap: anywhere;
}

    .mm-description > :first-child {
        margin-top: 0;
    }

    .mm-description > :last-child {
        margin-bottom: 0;
    }

.mm-files {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.ui-dialog .ui-dialog-content .mm a.mm-file {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px !important;
    border: 1px solid #E5E7EB !important;
    border-radius: 999px !important;
    background: #FFFFFF !important;
    color: #374151 !important;
    font-size: 13px !important;
    line-height: 1.4 !important;
    text-decoration: none !important;
}

    .ui-dialog .ui-dialog-content .mm a.mm-file::before {
        content: "📎";
        font-size: 12px;
    }

    .ui-dialog .ui-dialog-content .mm a.mm-file:hover {
        border-color: var(--theme, #57a000) !important;
        color: var(--theme-dark, #459300) !important;
    }

.mm-products {
    margin: 0;
    padding: 0;
    list-style: none;
    border: 1px solid #EEF0F3;
    border-radius: 8px;
}

    .mm-products > li {
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
        gap: 4px 8px;
        margin: 0;
        padding: 9px 12px;
        border-bottom: 1px solid #F3F4F6;
    }

        .mm-products > li:last-child {
            border-bottom: 0;
        }

.ui-dialog .ui-dialog-content .mm .mm-products a {
    padding: 0 !important;
    border: 0 !important;
    background: none !important;
    color: #111827 !important;
    font-size: 14px !important;
    line-height: 1.4 !important;
}

.mm-qty {
    margin-left: auto;
    padding: 1px 8px;
    border-radius: 999px;
    background: #F3F4F6;
    font-size: 12px;
    color: #374151;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.mm-subproduct {
    display: flex;
    flex-basis: 100%;
    align-items: baseline;
    gap: 6px;
    padding-left: 14px;
    font-size: 12px;
    color: #6B7280;
}

.ui-dialog .ui-dialog-content .mm .mm-subproduct a {
    color: #4B5563 !important;
    font-size: 12px !important;
}

.mm-history {
    margin-top: 20px;
    border-top: 1px solid #F1F2F4;
    padding-top: 12px;
}

    .mm-history > summary {
        cursor: pointer;
        font-size: 12px;
        font-weight: 600;
        color: #6B7280;
    }

.mm-history-list {
    max-height: 220px;
    margin-top: 8px;
    overflow-y: auto;
    font-size: 12px;
    color: #555;
    line-height: 1.45;
}

    .mm-history-list .historyItem {
        display: block;
        padding: 4px 0;
        border-bottom: 1px dashed #EEF0F3;
    }

/* hoofdknop in de knoppenbalk van de modal */
.ui-dialog.ui-widget .ui-dialog-buttonpane button.meeting-dialog-primary {
    border-color: var(--theme, #57a000) !important;
    background: var(--theme, #57a000) !important;
    color: #FFFFFF !important;
}

    .ui-dialog.ui-widget .ui-dialog-buttonpane button.meeting-dialog-primary:hover {
        filter: brightness(.93);
    }

@media (max-width: 600px) {
    .mm-row {
        grid-template-columns: minmax(0, 1fr);
        gap: 2px;
    }

    .mm-links {
        display: flex;
        margin: 4px 0 0;
    }

    .mt-followup {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ---------- 23. TinyMCE (teksteditor): frissere rand, werkbalk, menu's en vensters ----------
   Enkel de buitenkant van de editor (skin lightgray van TinyMCE 4); de tekst zelf volgt /css/editor.css. */

/* kader */
.mce-tinymce.mce-container.mce-panel {
    box-sizing: border-box;
    border: 1px solid #D1D5DB !important;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: none !important;
    background: #FFFFFF;
    transition: border-color .15s ease, box-shadow .15s ease;
}

    .mce-tinymce.mce-container.mce-panel:hover {
        border-color: #9CA3AF !important;
    }

    .mce-tinymce.mce-container.mce-panel:focus-within {
        border-color: var(--theme, #57a000) !important;
        box-shadow: 0 0 0 3px var(--theme-soft, #eef7e0) !important;
    }

    /* volledig scherm: geen afgeronde hoeken */
    .mce-tinymce.mce-container.mce-fullscreen {
        border-radius: 0;
    }

/* werkbalk */
.mce-tinymce .mce-top-part::before {
    box-shadow: none !important;
}

.mce-tinymce .mce-toolbar-grp.mce-container.mce-panel {
    padding: 4px 6px !important;
    border: 0 !important;
    border-bottom: 1px solid #E5E7EB !important;
    background: #F9FAFB !important;
}

.mce-tinymce .mce-toolbar .mce-btn-group {
    padding: 0 4px !important;
}

    .mce-tinymce .mce-toolbar .mce-btn-group:not(:first-child) {
        margin-left: 2px !important;
        border-left: 1px solid #E5E7EB !important;
    }

/* knoppen */
.mce-tinymce .mce-toolbar .mce-btn,
.mce-floatpanel .mce-toolbar .mce-btn {
    margin: 1px !important;
    border: 1px solid transparent !important;
    border-radius: 6px !important;
    background: transparent !important;
    box-shadow: none !important;
    transition: background-color .12s ease, border-color .12s ease;
}

    .mce-tinymce .mce-toolbar .mce-btn button {
        padding: 4px 6px !important;
    }

    .mce-tinymce .mce-toolbar .mce-btn:hover,
    .mce-tinymce .mce-toolbar .mce-btn:focus,
    .mce-floatpanel .mce-toolbar .mce-btn:hover {
        border-color: #E5E7EB !important;
        background: #FFFFFF !important;
    }

    .mce-tinymce .mce-toolbar .mce-btn.mce-active,
    .mce-tinymce .mce-toolbar .mce-btn.mce-active:hover,
    .mce-floatpanel .mce-toolbar .mce-btn.mce-active {
        border-color: transparent !important;
        background: var(--theme-soft, #eef7e0) !important;
    }

        .mce-tinymce .mce-toolbar .mce-btn.mce-active .mce-ico,
        .mce-floatpanel .mce-toolbar .mce-btn.mce-active .mce-ico {
            color: var(--theme-dark, #459300) !important;
        }

    .mce-tinymce .mce-toolbar .mce-btn.mce-disabled,
    .mce-tinymce .mce-toolbar .mce-btn.mce-disabled:hover {
        border-color: transparent !important;
        background: transparent !important;
        opacity: .45;
    }

.mce-tinymce .mce-ico {
    color: #4B5563 !important;
}

/* keuzelijsten in de werkbalk (opmaak, grootte, lettertype) */
.mce-tinymce .mce-toolbar .mce-btn.mce-listbox,
.mce-tinymce .mce-toolbar .mce-btn.mce-menubtn:has(.mce-txt) {
    border-color: #E5E7EB !important;
    background: #FFFFFF !important;
}

    .mce-tinymce .mce-toolbar .mce-btn.mce-listbox:hover,
    .mce-tinymce .mce-toolbar .mce-btn.mce-menubtn:has(.mce-txt):hover {
        border-color: #9CA3AF !important;
    }

    .mce-tinymce .mce-toolbar .mce-btn.mce-listbox button {
        padding-right: 22px !important;
    }

    .mce-tinymce .mce-toolbar .mce-btn.mce-listbox .mce-txt,
    .mce-tinymce .mce-toolbar .mce-btn.mce-menubtn .mce-txt {
        font-family: Arial, Helvetica, sans-serif !important;
        font-size: 13px !important;
        color: #374151 !important;
    }

/* knop met pijltje (tabel, tekstkleur) */
.mce-tinymce .mce-toolbar .mce-splitbtn:hover .mce-open,
.mce-tinymce .mce-toolbar .mce-splitbtn .mce-open.mce-active {
    border-left-color: #E5E7EB !important;
}

/* tekstvak */
.mce-tinymce .mce-edit-area {
    border: 0 !important;
}

/* statusbalk */
.mce-tinymce .mce-statusbar.mce-container {
    border: 0 !important;
    border-top: 1px solid #EEF0F3 !important;
    background: #F9FAFB !important;
}

    .mce-tinymce .mce-statusbar .mce-path-item,
    .mce-tinymce .mce-statusbar .mce-wordcount,
    .mce-tinymce .mce-statusbar .mce-branding {
        font-size: 11px !important;
        color: #9CA3AF !important;
    }

/* openklapmenu's (opmaak, grootte, tabel, kleuren) */
.mce-floatpanel.mce-menu,
.mce-floatpanel.mce-colorbutton-grid,
.mce-floatpanel.mce-popover {
    padding: 4px 0 !important;
    border: 1px solid #E5E7EB !important;
    border-radius: 8px !important;
    background: #FFFFFF !important;
    box-shadow: 0 12px 28px -6px rgba(16, 24, 40, .22), 0 2px 6px rgba(16, 24, 40, .06) !important;
}

.mce-menu .mce-menu-item {
    margin: 0 4px !important;
    padding: 6px 14px 6px 10px !important;
    border-radius: 6px !important;
}

    .mce-menu .mce-menu-item:hover,
    .mce-menu .mce-menu-item:focus,
    .mce-menu .mce-menu-item.mce-selected {
        background: var(--theme-soft, #eef7e0) !important;
    }

        .mce-menu .mce-menu-item:hover .mce-text,
        .mce-menu .mce-menu-item:focus .mce-text,
        .mce-menu .mce-menu-item.mce-selected .mce-text,
        .mce-menu .mce-menu-item:hover .mce-ico,
        .mce-menu .mce-menu-item.mce-selected .mce-ico {
            color: var(--theme-dark, #459300) !important;
        }

        .mce-menu .mce-menu-item.mce-active .mce-text,
        .mce-menu .mce-menu-item.mce-active .mce-ico {
            color: var(--theme-dark, #459300) !important;
        }

/* vensters (link, afbeelding, tabel, broncode) */
.mce-window.mce-container.mce-panel {
    border: 0 !important;
    border-radius: 12px !important;
    overflow: hidden;
    box-shadow: 0 24px 48px -12px rgba(16, 24, 40, .35) !important;
}

    .mce-window .mce-window-head {
        padding: 14px 20px !important;
        border-bottom: 1px solid #EEF0F3 !important;
        background: #FFFFFF !important;
    }

        .mce-window .mce-window-head .mce-title {
            font-family: Arial, Helvetica, sans-serif !important;
            font-size: 16px !important;
            font-weight: 600 !important;
            color: #111827 !important;
        }

    .mce-window .mce-foot {
        border-top: 1px solid #EEF0F3 !important;
        background: #F9FAFB !important;
    }

    .mce-window .mce-textbox,
    .mce-window .mce-combobox input,
    .mce-window .mce-listbox {
        border: 1px solid #D1D5DB !important;
        border-radius: 6px !important;
        box-shadow: none !important;
    }

        .mce-window .mce-textbox:focus,
        .mce-window .mce-combobox input:focus {
            border-color: var(--theme, #57a000) !important;
            box-shadow: 0 0 0 3px var(--theme-soft, #eef7e0) !important;
        }

    .mce-window .mce-foot .mce-btn {
        border: 1px solid #D1D5DB !important;
        border-radius: 6px !important;
        background: #FFFFFF !important;
        box-shadow: none !important;
    }

        .mce-window .mce-foot .mce-btn:hover {
            background: #F3F4F6 !important;
        }

        .mce-window .mce-foot .mce-btn.mce-primary {
            border-color: var(--theme, #57a000) !important;
            background: var(--theme, #57a000) !important;
        }

            .mce-window .mce-foot .mce-btn.mce-primary button,
            .mce-window .mce-foot .mce-btn.mce-primary button span {
                color: #FFFFFF !important;
            }

            .mce-window .mce-foot .mce-btn.mce-primary:hover {
                filter: brightness(.93);
            }

#mce-modal-block.mce-in {
    opacity: 1 !important;
    background: rgba(17, 24, 39, .45) !important;
}

/* ---------- 24. Tijdsregistraties: visueel overzicht (planning) ----------
   Gebruikt de opmaak van de agenda (sectie 21, tooltip en modal uit sectie 22); hier enkel wat eigen is aan tijdsregistraties. */

/* totaal per dag (in de datumcel) en per week (onder het weeknummer) */
#spnPlanning .tblAgendaoverview .day-total {
    float: right;
    padding: 0 7px;
    border-radius: 999px;
    background: #F3F4F6;
    font-size: 11px;
    font-weight: 600;
    line-height: 20px;
    color: #4B5563;
    font-variant-numeric: tabular-nums;
}

#spnPlanning .tblAgendaoverview .week-total {
    display: block;
    margin-top: 2px;
    font-size: 10px;
    font-weight: 600;
    color: #6B7280;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* duur rechts bovenaan de tegel */
#spnPlanning .tblAgendaoverview .mi-head .mi-duration {
    margin-left: 4px;
    font-weight: 700;
    letter-spacing: 0;
}

/* nog niet beëindigd: onderbroken balk */
#spnPlanning .tblAgendaoverview .meetingItem.is-running .mi-inner::before {
    background: repeating-linear-gradient(to bottom, var(--mi-color, #9CA3AF) 0 5px, transparent 5px 8px);
}

/* gefactureerd / afgehandeld: wat rustiger */
#spnPlanning .tblAgendaoverview .meetingItem.is-closed {
    opacity: .7;
}

    #spnPlanning .tblAgendaoverview .meetingItem.is-closed:hover {
        opacity: 1;
    }

/* modal: lopend / pauze */
.mm-state.mm-state-running {
    background: #FEF3C7;
    color: #92400E;
}

.mm-state.mm-state-pause {
    background: #F3F4F6;
    color: #4B5563;
}

/* ---------- 25. Tooltips (tooltipster): modern en rustig ----------
   Donkere, afgeronde kaart met zachte schaduw; links in een tooltip als kleine knoppen.
   De lichte kaart van de agenda/tijdsregistraties (.mt, sectie 22) blijft ongewijzigd. */

.tooltipster-sidetip .tooltipster-box {
    background: #1F2937 !important;
    border: 1px solid #111827 !important;
    border-radius: 8px !important;
    box-shadow: 0 12px 28px -8px rgba(16, 24, 40, .45), 0 2px 6px rgba(16, 24, 40, .15);
}

.tooltipster-sidetip .tooltipster-content {
    padding: 8px 12px !important;
    color: #F3F4F6 !important;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12.5px;
    line-height: 1.5 !important;
    overflow-wrap: anywhere;
}

    .tooltipster-sidetip .tooltipster-content :is(small, i):not(.mt *) {
        color: #D1D5DB;
    }

    .tooltipster-sidetip .tooltipster-content hr:not(.mt *) {
        height: 0;
        margin: 8px 0;
        border: 0;
        border-top: 1px solid rgba(255, 255, 255, .14);
        background: none;
    }

    .tooltipster-sidetip .tooltipster-content img:not(.mt *) {
        vertical-align: middle;
    }

/* pijltje in dezelfde kleur als de kaart */
.tooltipster-sidetip.tooltipster-top .tooltipster-arrow-background { border-top-color: #1F2937 !important; }
.tooltipster-sidetip.tooltipster-top .tooltipster-arrow-border { border-top-color: #111827 !important; }
.tooltipster-sidetip.tooltipster-bottom .tooltipster-arrow-background { border-bottom-color: #1F2937 !important; }
.tooltipster-sidetip.tooltipster-bottom .tooltipster-arrow-border { border-bottom-color: #111827 !important; }
.tooltipster-sidetip.tooltipster-left .tooltipster-arrow-background { border-left-color: #1F2937 !important; }
.tooltipster-sidetip.tooltipster-left .tooltipster-arrow-border { border-left-color: #111827 !important; }
.tooltipster-sidetip.tooltipster-right .tooltipster-arrow-background { border-right-color: #1F2937 !important; }
.tooltipster-sidetip.tooltipster-right .tooltipster-arrow-border { border-right-color: #111827 !important; }

/* links in een tooltip: kleine knoppen (vroeger grijze verloopknoppen) */
.tooltipster-content a:not(.mt a) {
    display: inline-block;
    margin: 2px 2px 2px 0;
    padding: 3px 9px !important;
    border: 1px solid rgba(255, 255, 255, .16) !important;
    border-radius: 6px !important;
    background: rgba(255, 255, 255, .08) !important;
    color: #F9FAFB !important;
    font-size: 11.5px !important;
    font-weight: 500;
    line-height: 1.5 !important;
    text-decoration: none !important;
    transition: background-color .12s ease, border-color .12s ease;
}

    .tooltipster-content a:not(.mt a):hover {
        border-color: var(--theme, #57a000) !important;
        background: var(--theme, #57a000) !important;
        color: #FFFFFF !important;
    }

    .tooltipster-content a:not(.mt a) img {
        vertical-align: -3px;
    }

/* animatie: korter */
.tooltipster-sidetip.tooltipster-fade {
    transition-duration: .15s !important;
}

/* ---------- 26. Historiek in een modal (klik op de status in een overzicht) ----------
   Tijdlijn per dag: icoontje per soort actie, bericht, wie/hoe, uur rechts; zoekveld bij veel acties. */

.ui-dialog.history-dialog .ui-dialog-content {
    max-height: 70vh;
    overflow-y: auto;
    padding: 0 !important;
}

.hl {
    padding: 4px 20px 16px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
    color: #374151;
}

/* zoekbalk + aantal */
.hl-toolbar {
    position: sticky;
    top: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 0 -20px;
    padding: 12px 20px 10px;
    border-bottom: 1px solid #EEF0F3;
    background: #FFFFFF;
}

.hl-count {
    font-size: 12px;
    font-weight: 600;
    color: #6B7280;
    white-space: nowrap;
}

.hl .hl-search {
    flex: 1;
    max-width: 280px;
    width: auto !important;
    margin: 0 !important;
}

/* dag */
.hl-day {
    margin-top: 14px;
}

.hl-day-title {
    margin: 0 0 6px;
    padding: 0;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: #9CA3AF;
}

/* acties: tijdlijn met lijn links */
.hl-list {
    position: relative;
    margin: 0;
    padding: 0;
    list-style: none;
}

    .hl-list::before {
        content: "";
        position: absolute;
        top: 14px;
        bottom: 14px;
        left: 13px;
        width: 2px;
        background: #EEF0F3;
    }

.hl-item {
    position: relative;
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr) auto;
    align-items: start;
    gap: 10px;
    margin: 0 !important;
    padding: 6px 8px 6px 0 !important;
    border-radius: 8px;
    background: none !important;
    list-style: none !important;
}

    .hl-item:hover {
        background: #F9FAFB !important;
    }

.hl-icon {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: 2px solid #FFFFFF;
    border-radius: 50%;
    background: #F3F4F6;
    font-size: 13px;
    line-height: 1;
    box-sizing: border-box;
}

.hl-item:hover .hl-icon {
    border-color: #F9FAFB;
}

/* kleur per soort actie */
.hl-create .hl-icon { background: #E0F2FE; }
.hl-edit .hl-icon { background: #F3F4F6; }
.hl-sent .hl-icon { background: #EDE9FE; }
.hl-read .hl-icon { background: #ECFDF5; }
.hl-approved .hl-icon { background: #DCFCE7; }
.hl-paid .hl-icon { background: #DCFCE7; }
.hl-accounting .hl-icon { background: #FEF3C7; }
.hl-print .hl-icon,
.hl-download .hl-icon { background: #F3F4F6; }
.hl-delete .hl-icon { background: #FEE2E2; }

.hl-body {
    min-width: 0;
    padding-top: 4px;
}

.hl-msg {
    line-height: 1.45;
    overflow-wrap: anywhere;
}

    .hl-msg strong {
        font-weight: 600;
        color: #111827;
    }

    .hl-msg a:not(.button) {
        color: var(--theme-dark, #459300) !important;
        text-decoration: none;
    }

        .hl-msg a:not(.button):hover {
            text-decoration: underline;
        }

    .hl-msg .button {
        margin-top: 6px;
    }

    .hl-msg .actionscolumn {
        margin-left: 6px;
    }

        .hl-msg .actionscolumn img {
            vertical-align: -3px;
        }

.hl-info {
    margin-top: 2px;
    font-size: 12px;
    color: #6B7280;
    overflow-wrap: anywhere;
}

.hl-time {
    padding-top: 5px;
    font-size: 12px;
    font-weight: 600;
    color: #9CA3AF;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    cursor: default;
}

.hl-delete .hl-msg strong { color: #B91C1C; }

.hl-empty {
    margin: 24px 0 8px;
    text-align: center;
    color: #9CA3AF;
}

/* samenvatting bovenaan */
.hl-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 14px 0 0;
}

.hl-sum {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: 999px;
    background: #F3F4F6;
    font-size: 12px;
    color: #374151;
    white-space: nowrap;
}

    .hl-sum strong {
        font-weight: 600;
        color: #111827;
    }

.hl-sum-sent { background: #EDE9FE; }
.hl-sum-read { background: #ECFDF5; }
.hl-sum-paid { background: #DCFCE7; }
.hl-sum-create { background: #E0F2FE; }

/* filterknoppen per soort */
.hl-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 12px 0 0;
}

.hl-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border: 1px solid #E5E7EB;
    border-radius: 999px;
    background: #FFFFFF;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    color: #374151;
    cursor: pointer;
    transition: background-color .12s ease, border-color .12s ease;
}

    .hl-chip span {
        min-width: 16px;
        padding: 0 5px;
        border-radius: 999px;
        background: #F3F4F6;
        font-size: 11px;
        font-weight: 600;
        color: #6B7280;
        text-align: center;
    }

    .hl-chip:hover {
        border-color: #9CA3AF;
    }

    .hl-chip.is-active {
        border-color: var(--theme, #57a000);
        background: var(--theme-soft, #eef7e0);
        color: var(--theme-dark, #459300);
        font-weight: 600;
    }

        .hl-chip.is-active span {
            background: var(--theme, #57a000);
            color: #FFFFFF;
        }

/* zoekbalk: niet meer plakken als de filters erboven staan */
.hl-filters + .hl-toolbar {
    margin-top: 8px;
}

/* statuswijziging: van -> naar */
.hl-msg .hl-status {
    display: inline-block;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    margin: 0 2px;
    padding: 0 8px;
    border-radius: 999px;
    font-size: 11px;
    line-height: 18px;
    vertical-align: 1px;
}

    .hl-msg .hl-status:not([class*="label"]) {
        background: #F3F4F6;
        color: #374151;
    }

.hl-arrow {
    margin: 0 2px;
    color: #9CA3AF;
}

/* wie: gebruiker met kleur, of systeem */
.hl-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 8px;
    margin-top: 3px;
}

    .hl-meta .hl-info {
        margin: 0;
    }

.hl-user {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 1px 8px;
    border-radius: 999px;
    background: #F3F4F6;
    font-size: 11.5px;
    font-weight: 600;
    color: #374151;
    line-height: 1.6;
}

    .hl-user.hl-system {
        background: #FEF3C7;
        color: #92400E;
        font-weight: 500;
    }

.hl-dot {
    flex: none;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    box-shadow: inset 0 0 0 1px rgba(17, 24, 39, .15);
}

/* acties bij een regel */
.hl-meta a.hl-action {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 1px 8px;
    border: 1px solid #E5E7EB;
    border-radius: 999px;
    background: #FFFFFF;
    font-size: 11.5px;
    color: #374151 !important;
    text-decoration: none !important;
    line-height: 1.6;
}

    .hl-meta a.hl-action:hover {
        border-color: var(--theme, #57a000);
        color: var(--theme-dark, #459300) !important;
    }

/* herhalingen samengevoegd */
.hl-repeat {
    margin-left: 4px;
    padding: 0 7px;
    border: 0;
    border-radius: 999px;
    background: #E5E7EB;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    font-weight: 700;
    color: #374151;
    line-height: 18px;
    cursor: pointer;
    vertical-align: 1px;
}

    .hl-repeat:hover,
    .hl-repeat.is-open {
        background: var(--theme-soft, #eef7e0);
        color: var(--theme-dark, #459300);
    }

.hl-repeat-list {
    margin: 6px 0 0;
    padding: 6px 10px;
    border-radius: 6px;
    background: #F9FAFB;
    list-style: none;
    font-size: 12px;
    color: #6B7280;
    font-variant-numeric: tabular-nums;
}

    .hl-repeat-list li {
        margin: 0 !important;
        padding: 1px 0 !important;
        background: none !important;
    }

/* knoppen afdrukken / exporteren */
.ui-dialog.history-dialog .ui-dialog-buttonpane button.history-dialog-secondary {
    background: #FFFFFF;
}

@media (max-width: 640px) {
    .hl-toolbar {
        flex-wrap: wrap;
    }

    .hl .hl-search {
        max-width: none;
    }
}

/* ---------- 27. Installaties: QR-code (sticker op de installatie) ---------- */
.installation-qr {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 20px;
}

    .installation-qr .installation-qr-image {
        flex: none;
        width: 150px;
        height: 150px;
        padding: 8px;
        border: 1px solid #E5E7EB;
        border-radius: 10px;
        background: #FFFFFF;
    }

    .installation-qr .installation-qr-missing {
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 12px;
        color: #9CA3AF;
        text-align: center;
    }

    .installation-qr .installation-qr-actions {
        flex: 1;
        min-width: 260px;
    }

        .installation-qr .installation-qr-actions p {
            margin: 0 0 10px;
        }

        .installation-qr .installation-qr-actions small {
            display: inline-block;
            margin-top: 6px;
            color: #6B7280;
        }

        .installation-qr .installation-qr-actions input[type="number"] {
            padding: 3px 6px !important;
        }

/* overzicht: sticker-icoontje bij elke installatie */
a.qr-label-link {
    display: inline-block;
    font-size: 15px;
    line-height: 16px;
    text-decoration: none !important;
    vertical-align: middle;
}

/* ---------- 28. Overzichten: statusfilter als chips + compacte bulkactiebalk ---------- */
/* Opt-in per pagina: <fieldset class="statusfilter ov-chips"> en <div class="actionbuttons ov-bulk"> */

/* 28a. Statusfilter: één rij klikbare chips, jaarfilter rechts */
#main-content fieldset.statusfilter.ov-chips {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    padding: 10px 12px !important;
    border: 1px solid #E5E7EB;
    border-radius: 8px;
    background: #FFFFFF;
    white-space: normal;
}

    #main-content fieldset.ov-chips .ov-chips-title {
        font-size: 13px;
        font-weight: 600;
        color: #6B7280;
        margin-right: 4px;
    }

    /* aanvinkvakje onzichtbaar (blijft wel bedienbaar met het toetsenbord) */
    #main-content fieldset.ov-chips input[type="checkbox"] {
        position: absolute;
        opacity: 0;
        width: 1px;
        height: 1px;
        margin: 0;
        pointer-events: none;
    }

    #main-content fieldset.ov-chips > span:has(> input[type="checkbox"]) {
        display: contents;
    }

    #main-content fieldset.ov-chips input[type="checkbox"] + label {
        display: inline-flex;
        margin: 0;
        padding: 0;
        cursor: pointer;
        transition: opacity .15s ease, filter .15s ease;
    }

        /* labelstijl van Simpla behouden (zelfde kleuren, hoeken en maat als de statuslabels),
           met een vakje vooraan zodat duidelijk is dat je erop kan klikken */
        #main-content fieldset.ov-chips input[type="checkbox"] + label > span {
            display: inline-flex;
            align-items: center;
            gap: 7px;
            width: auto;
            min-width: 0;
            font-size: 13px;
            line-height: 18px;
            box-sizing: border-box;
            cursor: pointer;
            user-select: none;
            transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
        }

            #main-content fieldset.ov-chips input[type="checkbox"] + label > span::before {
                content: "";
                flex: none;
                display: inline-flex;
                align-items: center;
                justify-content: center;
                width: 14px;
                height: 14px;
                box-sizing: border-box;
                border: 1.5px solid currentColor;
                border-radius: 3px;
                opacity: .8;
                font-size: 11px;
                font-weight: 700;
                line-height: 1;
            }

        #main-content fieldset.ov-chips input[type="checkbox"] + label:hover > span {
            transform: translateY(-1px);
            box-shadow: 0 2px 6px rgba(16, 24, 40, .18);
            filter: brightness(.96);
        }

    /* filter actief: niet-gekozen labels gedempt */
    #main-content fieldset.ov-chips:has(:not(.ov-chip-toggle) > input[type="checkbox"]:checked, > input[type="checkbox"]:checked) input[type="checkbox"]:not(:checked) + label {
        opacity: .5;
    }

        #main-content fieldset.ov-chips:has(:not(.ov-chip-toggle) > input[type="checkbox"]:checked, > input[type="checkbox"]:checked) input[type="checkbox"]:not(:checked) + label:hover {
            opacity: .85;
        }

    /* aparte schakelaars (bv. "prikklok verbergen") worden nooit gedempt */
    #main-content fieldset.ov-chips .ov-chip-toggle > input[type="checkbox"] + label {
        opacity: 1 !important;
    }

    /* aangevinkt: gevuld vakje met vinkje */
    #main-content fieldset.ov-chips input[type="checkbox"]:checked + label > span::before {
        content: "\2713";
        opacity: 1;
    }

    #main-content fieldset.ov-chips input[type="checkbox"]:checked + label > span {
        box-shadow: inset 0 0 0 2px rgba(0, 0, 0, .18);
    }

    #main-content fieldset.ov-chips input[type="checkbox"]:focus-visible + label > span {
        outline: 2px solid var(--theme, #57a000);
        outline-offset: 2px;
    }

    /* statuslijsten zonder eigen label (bv. eigen projectstatussen): zelfde labelvorm */
    #main-content fieldset.ov-chips input[type="checkbox"] + label:not(:has(> span)) {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        padding: 6px 10px;
        border-radius: 3px;
        background: #E5E7EB;
        color: #374151;
        font-size: 13px;
        line-height: 18px;
        cursor: pointer;
        user-select: none;
        transition: transform .12s ease, box-shadow .12s ease;
    }

        #main-content fieldset.ov-chips input[type="checkbox"] + label:not(:has(> span))::before {
            content: "";
            flex: none;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 14px;
            height: 14px;
            box-sizing: border-box;
            border: 1.5px solid currentColor;
            border-radius: 3px;
            opacity: .8;
            font-size: 11px;
            font-weight: 700;
            line-height: 1;
        }

        #main-content fieldset.ov-chips input[type="checkbox"]:checked + label:not(:has(> span))::before {
            content: "\2713";
            opacity: 1;
        }

        #main-content fieldset.ov-chips input[type="checkbox"]:checked + label:not(:has(> span)) {
            box-shadow: inset 0 0 0 2px rgba(0, 0, 0, .18);
        }

        #main-content fieldset.ov-chips input[type="checkbox"] + label:not(:has(> span)):hover {
            transform: translateY(-1px);
            box-shadow: 0 2px 6px rgba(16, 24, 40, .18);
        }

    /* filters in een eigen blok (bv. offertes): ook als rij labels */
    #main-content fieldset.ov-chips > div:not(.ov-year) {
        flex: 1 1 0%;
        min-width: 0;
    }

    #main-content fieldset.ov-chips div:has(> input[type="checkbox"]),
    #main-content fieldset.ov-chips div:has(> span > input[type="checkbox"]) {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 6px;
        margin-bottom: 6px;
    }

    #main-content fieldset.ov-chips div > span:has(> input[type="checkbox"]) {
        display: contents;
    }

    /* rechts uitgelijnde extra filters (bv. "aangemaakt door") */
    #main-content fieldset.ov-chips > [style*="float:right"]:not(.ov-year),
    #main-content fieldset.ov-chips > [style*="float: right"]:not(.ov-year) {
        float: none !important;
        margin-left: auto;
    }

    #main-content fieldset.ov-chips .chosen-container {
        vertical-align: middle;
    }

    /* jaarfilter: gesegmenteerde knop (alles | 2026 | ouder) */
    #main-content fieldset.ov-chips > .ov-year {
        float: none !important;
        margin: 0 0 0 auto !important;
        display: inline-flex;
        align-items: center;
        gap: 0;
        position: relative;
    }

        /* vóór simpla.js het jaarmenu opbouwt: enkel "alles" + het eerste jaar tonen en de plaats
           van "Ouder" al voorzien, zodat het jaarfilter bij het laden niet verspringt */
        #main-content fieldset.ov-chips > .ov-year {
            font-size: 0;
            min-height: 30px;
        }

            #main-content fieldset.ov-chips > .ov-year:not(.ov-ready) > a.filteryearbutton:nth-of-type(n+3) {
                display: none;
            }

            #main-content fieldset.ov-chips > .ov-year:not(.ov-ready):has(> a.filteryearbutton:nth-of-type(3))::after {
                content: "Ouder \25BE";
                display: inline-flex;
                align-items: center;
                height: 30px;
                padding: 0 12px;
                margin-left: -1px;
                font-size: 13px;
                font-weight: 500;
                color: #374151;
                background: #FFFFFF;
                border: 1px solid #D1D5DB;
                border-radius: 0 6px 6px 0;
                box-sizing: border-box;
            }

            #main-content fieldset.ov-chips > .ov-year:not(.ov-ready):has(> a.filteryearbutton:nth-of-type(3))::after,
            #main-content fieldset.ov-chips > .ov-year.ov-ready > a.filteryearbutton:nth-of-type(3) {
                width: 86px;
                justify-content: center;
                padding: 0 8px;
                font-family: inherit;
                font-size: 13px;
                font-weight: 500;
            }

            #main-content fieldset.ov-chips > .ov-year:not(.ov-ready) > a.filteryearbutton:nth-of-type(2) {
                border-radius: 0;
            }

            #main-content fieldset.ov-chips > .ov-year:not(.ov-ready) > a.filteryearbutton:nth-of-type(2):last-of-type {
                border-radius: 0 6px 6px 0;
            }

            #main-content fieldset.ov-chips > .ov-year .yearDropdown {
                font-size: 13px;
            }

        #main-content fieldset.ov-chips > .ov-year > a.filteryearbutton {
            display: inline-flex;
            align-items: center;
            height: 30px;
            padding: 0 12px;
            margin: 0 0 0 -1px;
            font-size: 13px;
            font-weight: 500;
            color: #374151;
            background: #FFFFFF;
            border: 1px solid #D1D5DB !important;
            border-radius: 0;
            box-sizing: border-box;
        }

            #main-content fieldset.ov-chips > .ov-year > a.filteryearbutton:first-of-type {
                border-radius: 6px 0 0 6px;
                margin-left: 0;
            }

            #main-content fieldset.ov-chips > .ov-year > a.filteryearbutton:last-of-type {
                border-radius: 0 6px 6px 0;
            }

            #main-content fieldset.ov-chips > .ov-year > a.filteryearbutton:hover {
                background: #F3F4F6;
                font-weight: 500;
            }

            #main-content fieldset.ov-chips > .ov-year > a.filteryearbutton.borderactive {
                background: var(--theme, #57a000);
                border-color: var(--theme, #57a000) !important;
                color: #FFFFFF;
                position: relative;
                z-index: 1;
            }

                #main-content fieldset.ov-chips > .ov-year > a.filteryearbutton.borderactive strong {
                    font-weight: 600;
                }

/* 28b. Bulkactiebalk: filterveld links, acties rechts (enkel bij een selectie) */
#main-content .ov-bulk {
    position: relative;
    z-index: 50;
    border: 0;
    border-bottom: 1px solid #E5E7EB;
    background: #FFFFFF;
    margin: 0;
    text-align: left;
}

    #main-content .ov-bulk.ov-bulk-duplicate {
        display: none !important;
    }

    #main-content .ov-bulk .ov-bulk-bar {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 8px;
        padding: 8px;
        min-height: 36px;
    }

    #main-content .ov-bulk .ov-bulk-filter input {
        width: 260px;
        max-width: 100%;
        height: 36px;
        box-sizing: border-box;
        border-radius: 6px;
        margin: 0;
    }

    /* snel zoeken (klanten): veld + zoekknop als één geheel */
    #main-content .ov-bulk .ov-bulk-search {
        display: inline-flex;
        align-items: center;
        gap: 4px;
    }

        #main-content .ov-bulk .ov-bulk-search input[type="search"],
        #main-content .ov-bulk .ov-bulk-search input.text-input {
            width: 220px;
            height: 36px;
            box-sizing: border-box;
            border-radius: 6px;
            margin: 0;
        }

        #main-content .ov-bulk .ov-bulk-search .button {
            width: 40px;
            justify-content: center;
            padding: 0 !important;
        }

    #main-content .ov-bulk .ov-bulk-hint {
        flex: 1 1 auto;
        text-align: right;
        font-size: 13px;
        color: #9CA3AF;
    }

    #main-content .ov-bulk .ov-bulk-actions {
        flex: 1 1 auto;
        display: none;
        flex-wrap: wrap;
        align-items: center;
        justify-content: flex-end;
        gap: 6px;
    }

    #main-content .ov-bulk.ov-has-selection .ov-bulk-actions {
        display: flex;
    }

    #main-content .ov-bulk.ov-has-selection .ov-bulk-hint {
        display: none;
    }

    #main-content .ov-bulk .ov-bulk-count {
        font-size: 13px;
        color: #374151;
        margin-right: 4px;
        padding: 0 10px;
        height: 36px;
        box-sizing: border-box;
        display: inline-flex;
        align-items: center;
        gap: 4px;
        background: var(--theme-soft, #EEF7E0);
        border-radius: 6px;
    }

    /* knoppen: themastijl (.button / .buttonimportant) blijft, enkel maat en uitlijning */
    #main-content .ov-bulk .button {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        height: 36px;
        margin: 0;
        line-height: normal;
        box-sizing: border-box;
        font-family: inherit;
        vertical-align: middle;
    }

    /* keuzelijsten als knop (AFDRUKKEN, DOWNLOADEN, [STATUS AANPASSEN], ...): zelfde hoogte en hoeken */
    #main-content .ov-bulk select.button {
        height: 36px !important;
        min-height: 36px;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        border-radius: 4px !important;
        line-height: normal;
        vertical-align: middle;
        box-sizing: border-box;
        margin: 0;
    }

    #main-content .ov-bulk .ov-toggle.ov-active {
        box-shadow: 0 0 0 3px var(--theme-soft, #EEF7E0);
    }

    #main-content .ov-bulk .ov-caret {
        font-size: 10px;
    }

    #main-content .ov-bulk .ov-bulk-clear {
        width: 36px;
        justify-content: center;
        padding: 0 !important;
    }

    /* bevestiging na een bulkactie ("Even geduld...") zweeft onder de balk: niets verspringt */
    #main-content .ov-bulk .ov-bulk-message {
        position: absolute;
        right: 8px;
        top: calc(100% + 6px);
        z-index: 80;
        max-width: min(520px, calc(100% - 16px));
        pointer-events: none;
    }

        #main-content .ov-bulk .ov-bulk-message:empty {
            display: none;
        }

        #main-content .ov-bulk .ov-bulk-message .notification {
            margin: 0 !important;
            box-shadow: 0 10px 24px rgba(16, 24, 40, .16);
            white-space: normal;
        }

            #main-content .ov-bulk .ov-bulk-message .notification:not(:last-child) {
                display: none;
            }

    /* 28c. Panelen (Meer / Factureren / Aankoopbestelling) */
    #main-content .ov-bulk .ov-panel {
        display: none;
        position: fixed;
        z-index: 9000;
        overflow-y: auto;
        overscroll-behavior: contain;
        box-sizing: border-box;
        background: #FFFFFF;
        border: 1px solid #E5E7EB;
        border-radius: 8px;
        box-shadow: 0 12px 28px rgba(16, 24, 40, .14);
        text-align: left;
        white-space: normal;
    }

        #main-content .ov-bulk .ov-panel.ov-open {
            display: block;
        }

    #main-content .ov-bulk .ov-panel-menu {
        width: 320px;
        padding: 8px;
    }

        #main-content .ov-bulk .ov-panel-menu .button {
            display: flex;
            width: 100%;
            justify-content: flex-start;
            text-align: left;
            margin: 0 0 6px;
        }

        #main-content .ov-bulk .ov-panel-menu .ov-sep {
            height: 1px;
            background: #E5E7EB;
            margin: 4px 2px;
        }

    #main-content .ov-bulk .ov-panel-form {
        width: 540px;
        max-width: calc(100vw - 40px);
        padding: 6px 20px;
        font-size: 14px;
    }

        #main-content .ov-bulk .ov-panel-form .ov-section {
            padding: 16px 0;
            border-bottom: 1px solid #F3F4F6;
        }

            #main-content .ov-bulk .ov-panel-form .ov-section:last-child {
                border-bottom: 0;
            }

            #main-content .ov-bulk .ov-panel-form .ov-section h4 {
                margin: 0 0 12px;
                padding: 0;
                font-size: 16px;
                font-weight: 600;
                line-height: 1.3;
                color: #111827;
                text-transform: none;
            }

        #main-content .ov-bulk .ov-panel-form .ov-note {
            margin: -6px 0 12px;
            padding: 0;
            font-size: 13px;
            color: #6B7280;
        }

        #main-content .ov-bulk .ov-panel-form .ov-fields {
            display: flex;
            flex-wrap: wrap;
            align-items: flex-end;
            gap: 12px;
            margin-bottom: 14px;
        }

        #main-content .ov-bulk .ov-panel-form .ov-field {
            display: flex;
            flex-direction: column;
            gap: 6px;
            min-width: 0;
        }

            #main-content .ov-bulk .ov-panel-form .ov-field > label {
                display: block;
                float: none;
                margin: 0;
                padding: 0;
                font-size: 13px !important;
                font-weight: 500 !important;
                line-height: 1.3;
                color: #374151;
            }

            #main-content .ov-bulk .ov-panel-form .ov-field input[type="text"],
            #main-content .ov-bulk .ov-panel-form .ov-field select {
                width: 140px !important;
                height: var(--dt-field-h, 36px);
                font-size: 14px;
                box-sizing: border-box;
                margin: 0;
            }

            #main-content .ov-bulk .ov-panel-form .ov-field.ov-small input[type="text"] {
                width: 90px !important;
            }

            #main-content .ov-bulk .ov-panel-form .ov-field select {
                width: 190px !important;
            }

            #main-content .ov-bulk .ov-panel-form .ov-field.ov-wide {
                flex: 1 1 100%;
            }

                #main-content .ov-bulk .ov-panel-form .ov-field.ov-wide select,
                #main-content .ov-bulk .ov-panel-form .ov-field.ov-wide .chosen-container {
                    width: 100% !important;
                }

            /* keuzelijst "bestaande factuur / aankoopbestelling": duidelijk zolang er niets gekozen is */
            

            #main-content .ov-bulk .ov-panel-form .ov-field.ov-pick select {
                height: 40px;
                font-size: 14px;
                border: 1.5px solid var(--theme, #57a000) !important;
                background-color: #FFFFFF;
            }

            #main-content .ov-bulk .ov-panel-form .ov-field.ov-pick.ov-empty select {
                border-style: dashed !important;
                color: #6B7280;
                background-color: var(--theme-soft, #F7FBF0);
            }

            #main-content .ov-bulk .ov-panel-form .ov-field.ov-pick select:focus {
                outline: none;
                box-shadow: 0 0 0 3px var(--theme-soft, #EEF7E0);
            }

            #main-content .ov-bulk .ov-panel-form .ov-field.ov-pick .chosen-container .chosen-single {
                height: 40px;
                line-height: 38px;
                border: 1.5px solid var(--theme, #57a000);
            }

            #main-content .ov-bulk .ov-panel-form .ov-field.ov-pick.ov-empty .chosen-container .chosen-single {
                border-style: dashed;
                background: var(--theme-soft, #F7FBF0);
            }

        #main-content .ov-bulk .ov-panel-form .button.ov-primary:disabled,
        #main-content .ov-bulk .ov-panel-form .button.ov-primary.ov-disabled {
            opacity: .45;
            cursor: not-allowed;
            transform: none !important;
            filter: none !important;
        }

            #main-content .ov-bulk .ov-panel-form .ov-field.ov-check {
                flex-direction: row;
                align-items: center;
                min-height: var(--dt-field-h, 36px);
                max-width: 100%;
            }

            #main-content .ov-bulk .ov-panel-form .ov-field .ui-datepicker-trigger {
                display: none;
            }

        #main-content .ov-bulk .ov-panel-form .ov-options {
            display: flex;
            flex-direction: column;
            gap: 8px;
            font-size: 14px;
        }

            /* lange teksten bij de vinkjes afbreken binnen het kader */
            #main-content .ov-bulk .ov-panel-form .ov-options > span {
                display: flex !important;
                align-items: flex-start;
                gap: 0;
                white-space: normal !important;
            }

                #main-content .ov-bulk .ov-panel-form .ov-options > span > input {
                    flex: none;
                    margin-top: 3px !important;
                }

            #main-content .ov-bulk .ov-panel-form .ov-options label,
            #main-content .ov-bulk .ov-panel-form .ov-check label {
                white-space: normal !important;
                overflow-wrap: anywhere;
                float: none !important;
                display: inline !important;
                margin: 0 0 0 6px !important;
                padding: 0 !important;
                font-size: 14px !important;
                font-weight: normal;
                color: #374151;
            }

            #main-content .ov-bulk .ov-panel-form .ov-options input,
            #main-content .ov-bulk .ov-panel-form .ov-check input {
                float: none !important;
                margin: 0 !important;
                vertical-align: middle;
            }

            #main-content .ov-bulk .ov-panel-form .ov-options > span {
                display: block;
                text-align: left;
                margin: 0;
            }

            #main-content .ov-bulk .ov-panel-form .ov-options .noklabel,
            #main-content .ov-bulk .ov-panel-form .ov-options .badge_red {
                background: none;
                border: 0;
                padding: 0;
                color: #374151;
                width: auto;
            }

        #main-content .ov-bulk .ov-panel-form .button.ov-primary {
            color: #FFFFFF !important;
            background-color: var(--theme, #57a000);
            border-color: var(--theme, #57a000);
        }

@media print {
    #main-content .ov-bulk {
        display: none !important;
    }
}

/* ---------- 29. Overzichten: compacte acties per rij (icoontjes + "⋯") ---------- */
#main-content td.actionscolumn:has(> .ov-row-actions) {
    white-space: nowrap;
    width: 1%;
}

/* de actiekolom is gedempt zolang de muis niet op de rij staat (opacity .4):
   met een open menu blijft ze volledig zichtbaar, anders wordt het menu doorschijnend */
#main-content tr.itemrow td.actionscolumn.ov-menu-open,
#main-content tr.itemrow td.actionscolumn:has(.ov-row-menu.ov-open) {
    opacity: 1 !important;
}

#main-content .ov-row-actions {
    display: inline-flex;
    align-items: center;
    gap: 2px;
}

    #main-content .ov-row-actions .ov-row-main {
        display: inline-flex;
        align-items: center;
        gap: 2px;
    }

    /* uitgeschakelde "verwijderen" (bv. betaalde factuur) niet tonen: verwijderen zit in het menu */
    #main-content .ov-row-actions .ov-row-main a:has(> img[src*="cross_disabled"]) {
        display: none;
    }

    #main-content .ov-row-actions .ov-row-more {
        position: static;
        display: inline-flex;
    }

#main-content .ov-row-more-btn {
    position: relative;
    width: 30px;
    height: 28px;
    padding: 0;
    margin-left: 2px;
    border: 1px solid #E5E7EB;
    border-radius: 6px;
    background: #FFFFFF;
    color: #374151;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    font-family: inherit;
}

    #main-content .ov-row-more-btn:hover,
    #main-content .ov-row-more-btn[aria-expanded=true] {
        background: #F3F4F6;
        border-color: #9CA3AF;
    }

    /* signaal: er staat een vervolgstap klaar (ondertekenen, leveren, project maken, ...) */
    #main-content .ov-row-more-btn.ov-signal::after {
        content: "";
        position: absolute;
        top: -3px;
        right: -3px;
        width: 9px;
        height: 9px;
        border-radius: 50%;
        background: var(--theme, #57a000);
        border: 2px solid #FFFFFF;
    }

/* het menu zelf: vast t.o.v. het scherm, nooit afgeknipt; zelfde opmaak als de vensters van de bulkacties */
#main-content .ov-row-menu {
    display: none;
    position: fixed;
    z-index: 9600;
    width: 340px;
    max-width: calc(100vw - 16px);
    padding: 4px 18px;
    overflow-y: auto;
    box-sizing: border-box;
    background: #FFFFFF;
    border: 1px solid #E5E7EB;
    border-radius: 8px;
    box-shadow: 0 12px 28px rgba(16, 24, 40, .16);
    white-space: normal;
    text-align: left;
}

    #main-content .ov-row-menu.ov-open {
        display: block;
    }

    #main-content .ov-row-menu .ov-row-group {
        display: flex;
        flex-direction: column;
        gap: 8px;
        padding: 14px 0;
        border-top: 1px solid #F3F4F6;
    }

        #main-content .ov-row-menu .ov-row-group:first-child,
        #main-content .ov-row-menu .ov-row-group.ov-empty + .ov-row-group {
            border-top: 0;
        }

        #main-content .ov-row-menu .ov-row-group.ov-empty {
            display: none;
        }

        /* titels zoals in de vensters van Simpla (16px, halfvet) */
        #main-content .ov-row-menu .ov-row-group[data-title]::before {
            content: attr(data-title);
            display: block;
            margin: 0 0 2px;
            font-size: 16px;
            font-weight: 600;
            line-height: 1.3;
            color: #111827;
        }

        /* elk item als knop in de Simpla-stijl (themakleur, hoofdletters), volle breedte met icoon */
        #main-content .ov-row-menu .ov-row-group > a {
            display: flex !important;
            align-items: center;
            gap: 10px;
            width: 100%;
            max-width: none !important;
            min-height: 38px;
            box-sizing: border-box;
            margin: 0 !important;
            padding: 8px 14px !important;
            font-family: inherit !important;
            letter-spacing: normal;
            border: 1px solid var(--theme, #57a000) !important;
            border-radius: 4px;
            background: var(--theme, #57a000) !important;
            color: #FFFFFF !important;
            font-size: 14px !important;
            font-weight: 500;
            line-height: 1.3;
            text-transform: uppercase;
            text-align: left;
            text-decoration: none;
            white-space: normal;
            box-shadow: none !important;
            cursor: pointer;
            transition: filter .15s ease, transform .15s ease;
        }

            #main-content .ov-row-menu .ov-row-group > a:hover,
            #main-content .ov-row-menu .ov-row-group > a:focus-visible {
                filter: brightness(90%);
                transform: translateY(-1px);
            }

            /* icoontjes wit op de themakleur */
            #main-content .ov-row-menu .ov-row-group > a img {
                width: 16px;
                height: 16px;
                flex: none;
                filter: brightness(0) invert(1);
            }

            #main-content .ov-row-menu .ov-row-group > a[data-ov-label]::after {
                content: attr(data-ov-label);
            }

            /* kopiëren: rustige tweede knop; verwijderen: rood */
            #main-content .ov-row-menu .ov-row-manage > a {
                background: #F9FAFB !important;
                border-color: #E5E7EB !important;
                color: #374151 !important;
            }

                #main-content .ov-row-menu .ov-row-manage > a img {
                    filter: none;
                }

            #main-content .ov-row-menu .ov-row-group > a.ov-danger {
                background: #FFFFFF !important;
                border-color: #FCA5A5 !important;
                color: #B91C1C !important;
            }

                #main-content .ov-row-menu .ov-row-group > a.ov-danger:hover {
                    background: #FEF2F2 !important;
                    filter: none;
                }

                #main-content .ov-row-menu .ov-row-group > a.ov-danger img {
                    filter: invert(17%) sepia(83%) saturate(4000%) hue-rotate(350deg);
                }

        /* statuslijst zoals de velden in de vensters (36px) */
        #main-content .ov-row-menu .ov-row-status select {
            width: 100% !important;
            max-width: none !important;
            height: 38px !important;
            margin: 0;
            padding-left: 10px !important;
            font-size: 14px !important;
            border: 1.5px solid var(--theme, #57a000) !important;
            border-radius: 6px !important;
            background-color: #FFFFFF !important;
            color: #111827 !important;
        }

            #main-content .ov-row-menu .ov-row-status select:focus {
                outline: none;
                box-shadow: 0 0 0 3px var(--theme-soft, #EEF7E0);
            }

        #main-content .ov-row-menu .ov-row-status::after {
            content: "Wordt meteen opgeslagen.";
            font-size: 12.5px;
            color: #6B7280;
        }

/* statuslabel in de rij: klikbaar om de status te wijzigen */
#main-content td.ov-status-click {
    cursor: pointer;
}

    #main-content td.ov-status-click > span,
    #main-content td.ov-status-click > * {
        transition: box-shadow .12s ease, transform .12s ease;
    }

    #main-content td.ov-status-click:hover > span {
        box-shadow: 0 0 0 2px #FFFFFF, 0 0 0 3.5px rgba(17, 24, 39, .35);
    }

    #main-content td.ov-status-click:hover > span::after {
        content: " \25BE";
        font-size: 10px;
    }

/* ---------- 9. Toegankelijkheid / afdruk ---------- */
@media (prefers-reduced-motion: reduce) {
    .manage-box *,
    .manage-box *::before,
    .manage-box *::after {
        transition: none !important;
    }
}

@media print {
    #main-content :is(div, span, fieldset):has(> p > input[id*="btnConfirm"]):not(:has(input.text-input, textarea, select)) {
        position: static;
        box-shadow: none;
    }
}
/* ========================= einde DETAILSCHERMEN ========================= */

.chkSaveOption.draftlabel, .chkSaveOption.oklabel, .chkSaveOption.noklabel {
    width: auto;
}