.logo-image
{
    background-image: url('../img/triggre_logo.png?C290490C0015F86993A0A609E1376D83');
}
.logo-image.auth
{
    background-image: url('../img/triggre_logo_auth.png?C290490C0015F86993A0A609E1376D83');
}


.logo-image,
.logo-image.auth
{
    background-image: url('https://cdn.triggre.com/shuttel/ANWBLogopng_ANWBlogoF.png');
}
.preview-64 {
    width: 64px;
    height: 64px;
}


/* Triggre base */
    /*
 * TRIGGRE DEFAULT TEMPLATE - YELLOW
 * 
 * This is the default Triggre CSS template, yellow edition, adapted to resemble MS. colors defined under 'root' can be
 * replaced to quickly create a different colored design (make sure to replace both * HEX and RGB ones if indicated):
  *
 * This design uses a different logo than the one set in designer; also it uses an image
 * on the error pages and vertical scroll forms. To change images, please make sure the image
 * is placed on cdn.triggre.com (otherwise it isn't accessible) and then replace:
 *
 *      Logo            https://cdn.triggre.com/triggre/img/triggre-white.png 
 *      Header          https://cdn.triggre.com/triggre/img/homepage.png
 */

    /* FONT FAMILY */
    @font-face {
        font-family: BerninoSans Regular;
        src: url(https://cdn.triggre.com/shuttel/BerninoSans-Office-Regular.ttf);
    }

    @font-face {
        font-family: BerninoSans Bold;
        src: url(https://cdn.triggre.com/shuttel/BerninoSans-Office-Bold.ttf);
    }

    @font-face {
        font-family: ClanPro;
        src: url(https://cdn.triggre.com/shuttel/ClanPro-Bold.ttf);
    }

     @font-face {
        font-family: BerninoSans semibold;
        src: url(https://cdn.triggre.com/shuttel/BerninoSans-Office-SemiBold.ttf);
    }

    /* COLORS DEFINITIONS */
    :root {
        /* root fonts */
        --main-font: "BerninoSans Regular", Calibri, open sans, sans-serif;
        --header-font: "BerninoSans Bold", Calibri, open sans, sans-serif;

        /* root colors */
        --body-bg-color: #2C2D35;
        --header-bg: #002448;
        --lite-bg: #ffffff;
        --dark-bg: #2d2e83;
        --header-color: #556E8C;
        --main-header-color: #bdcedf;
        --text-color: #2C2D35;
        --full-white: #ffffff;
        --yellow: #bdcedf;
        --link-color: #005bac;
        --link-color-hover: #2D2E83;
        --button-bg: #2441FF;
        --button-text: #fff;
        --button-border: 1px solid #2441FF;
        --grid-line: #34363E;
        --move-line: #d53032;
        --user-icon-hover: #ff2441;
        --user-icon: #003D86;
        --left-menu: #fff;


        /* root FX */
        --body-bg-img: #f5f5f5;
        --overlay-dark: #2d2e83;
        --overlay-lite: #F1F5F9;
        --td-box-shadow: inset 1px 0 0 #dadce0, inset -1px 0 0 #dadce0, 0 1px 2px 0 rgba(60, 64, 67, .3), 0 1px 3px 1px rgba(60, 64, 67, .15);

        /* transitions */
        --transition: .1s cubic-bezier(0.455, 0.03, 0.515, 0.955);

        /* root colors ADDED BY NICK CALLEWAERT */
        /* Main ANWB colors */
        --anwb-geel: #FFCD00;
        --anwb-blauw: #003D86;
        --anwb-wit: #FFFFFF;

        /*accent colors */
        --anwb-lichtblauw: #0099DA;
        --anwb-oranje: #F28200;
        --anwb-rood: #CC2C26;
        --anwb-groen: #007000;
        --anwb-paars: #6E0078;


    }



    /* BODY BACKGROUND IMAGE AND OVERLAY */
  

    body {
        background-color: var(--body-bg-img) !important;
        background-size: cover;
    }

    #inner{
        background-color: var(--anwb-wit) !important;
    }

    body:before {
        content: ' ';
        display: block;
        width: 100vw !important;
        height: 100vh !important;
        left: 0;
        top: 0;
        position: fixed;
        background: var(--body-overlay);
        background-blend-mode: var(--overlay-blend);
    }

    /* Set fonts — font shorthand removed, office template sets 14px */
    body,
    html,
    pre {
        letter-spacing: 0;
        color: #000307;
    }

    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        font-family:  ClanPro, sans-serif;
        font-weight: 600;
        text-transform: none !important;
        color: var(--anwb-blauw);
    }

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


     h5{
        font-size: 19px;
        margin-bottom: -5px;
        color: var(--anwb-blauw);
     }

     h6{
        font-size: 16px;
        margin-block-end: 0px;
        margin-block-start: 0px;
        margin-bottom: -10px;
     }

    button,
    input,
    optgroup,
    select,
    textarea,
    #menu a,
    #menu a:link,
    #menu a:visited,
    #menu a:focus,
    #menu .level-2,
    #menu .level-2>li,
    #menu .level-2 .level-3 li,
    #context-bar button,
    #context-bar button:active,
    #context-bar button:focus,
    #context-bar button:visited {
        font-family:  ClanPro, sans-serif;
        letter-spacing: 0;

    }

    h3 {
        font-weight: bold;
        font-size: 20px !important;
        margin-bottom: 15px !important;
        margin-top: 10px !important;
    }

    p, ul, li {
        color: #000307;
        font-size: 16px;

    }

    html:not(.mobile) #menu .level-1>li>a {
        text-transform: none;
    }

    html:not(.mobile) #menu .level-2 a,
    html:not(.mobile) #menu .level-2 a:link,
    html:not(.mobile) #menu .level-2 a:visited,
    html:not(.mobile) #menu .level-2 a:focus {
        font-weight: normal;
    }

    /* Page title font size — font-weight/size defined in office template section */


    /* 
 * TRIGGRE GENERAL DEFINITIONS
 * 
 * following definitions are general rules for widgets, buttons, etc. These form
 * base of Triggre visual style.
 *
 */

    /* Make sure charts don't have borders */
    .k-chart canvas {
        border: none;
    }

    /* No shadow on context bar, and use space cleared up by moving search to top */
    #context-bar {
        box-shadow: none;
        padding-right: 12px;
        background-color: var(--lite-bg);
        padding-left: 318px;
    }

    /* Align mobile form descriptions correctly */
    .mobile .form .description {
        margin-left: 0;
    }

    /* Authentication screen background*/
    #auth .decorator {
        background: #f2f2f2 !important;
    }

    /* Authentication screen size */
    #auth .auth-control {
        min-height: 574px;
    }

    #auth .auth-control .footer {
        height: 90px;
    }

    /* Authentication screen header color */
    #auth .auth-control .header {
        background: transparent;
    }

    #auth .auth-control .header .logo {
        position: relative;
        bottom: 12px;
        padding: 15px;
        margin-left: 160px;
        margin-top: 50px;
    }



    /* Authentication screen main button styles */
    #auth .auth-control .footer .main {
        background: var(--dark-bg);
        color: var(--button-text);
        border-radius: 6px;
        padding: 14px 26px 13px 26px;
        font-weight: 600;
        font-size: 16px;
        height: auto;
        line-height: 20px;
        margin-bottom: 60px;
    }

    #auth .auth-control .footer .main:hover {
        background: var(--dark-bg);
        color: var(--button-text);
        opacity: 1;
    }



    /* Color for username and password inputs */
    #auth .auth-control .content .field input:focus,
    #auth .auth-control .content .field input:invalid:not(:focus).initial {
        border-bottom: 1px solid var(--dark-bg);
        box-shadow: 0 1px 0 0 var(--dark-bg);
    }

    #auth .auth-control .content .field input:focus+label,
    #auth .auth-control .content .field input.filled+label {
        color: var(--dark-bg);
    }

    canvas,
    input[type=email],
    input[type=password],
    input[type=text],
    textarea,
    .k-dropdown-wrap.k-state-default,
    .k-numeric-wrap.k-state-default,
    .k-picker-wrap.k-state-default {
        border: 1px solid #8BA1BC;
        font-family: "BerninoSans Regular", Calibri, open sans, sans-serif;
    }

    .field.type-text .editor textarea {
        padding-top: 8px;
    }


    /*
 * Use normal buttons on mobile app and move mobile search to top
 */
    .mobile #context-bar {
        background: transparent !important;
    }

    /* Hide context bar menu button */
    .mobile #context-bar.has-extra-buttons .show-menu {
        display: none;
    }

    /* Show all action buttons */
    .mobile #context-bar>.buttons button:not(.hidden) {
        display: inline-block;
    }

    /* Make buttons align vertically in middle */
    .mobile #context-bar>.buttons button {
        margin-bottom: 0px;
        margin-top: 0px;
    }

    /* Allow context bar to scroll horizontally */
    .mobile #context-bar>.buttons {
        display: inline-block;
        width: 100%;
        white-space: nowrap;
        padding-left: 8px;
        padding-right: 8px;
        height: 64px;
        line-height: 64px;
    }

    /* Remove horizontal scroll bar for buttons in context bar */
    .mobile body:not([class*="_tiles"]) #context-bar>.buttons .buttons-inner {
        overflow: hidden;
        height: 64px;
    }

    /* Place opened search box above context bar and make dark grey */
    .mobile .search-box.opened {
        top: -64px;
        background: var(--text-color);
    }

    /* Move mobile search button to top of screen */
    .mobile .search-box .open-search {
        background: transparent;
        top: 0;
        right: 64px;
        width: 64px;
        height: 64px;
        transition: all .2s ease-out;
        position: fixed;
    }

    /* Icon in search button */
    .mobile .search-box .open-search::before {
        margin: 0;
        line-height: 62px;
        width: 64px;
        height: 64px;
        padding-top: 0;
        padding-right: 0;
        font-size: 28px;
    }

    .mobile .search-box .content {
        background: transparent;
    }

    /* Make buttons white on dark background */
    .mobile .search-box .open-advanced,
    .mobile .search-box .close-search {
        color: #fff;
    }

    /* Make sure simple search bar fills width of screen */
    .mobile #context-bar.has-extra-buttons .search-box.opened .simple-search {
        background: transparent;
        left: 8px;
        width: calc(100% - 140px);
        color: #fff;
    }

    .mobile .search-box.advanced-filled:not(.advanced) {
        top: -64px;
        left: 0;
        background: var(--text-color);
    }

    .mobile .search-box.advanced-filled:not(.advanced) .content {
        width: 100%;
        padding-left: 6px;
    }

    /* Hide button that normally shows extra buttons */
    .mobile #context-bar.has-extra-buttons .search-box.opened .show-buttons-menu {
        display: none;
    }

    /* Make advanced search fill screen on mobile */
    .mobile .search-box.advanced .search-form {
        height: 100%;
        max-height: calc(100% - 64px);
        top: 0;
    }

    .mobile .search-box.advanced {
        bottom: 0;
    }

    /* Place mobile search buttons correctly */
    .mobile .search-box.opened .close-search,
    .mobile .search-box.opened .open-advanced {
        margin-top: 0;
        line-height: 56px;
        height: 64px;
    }

    /* Place mobile search input */
    .mobile .search-box.opened .simple-search {
        height: auto;
    }

    /*
 * General color settings
 */

    /* General link color */
    a,
    a:link,
    a:visited,
    a:focus {
        color: var(--link-color);
    }

    /* Active section underline */
    html:not(.mobile) #menu .level-1>li.current {
        border-bottom: 2px solid var(--dark-bg);
        color: var(--dark-bg);
    }

    /* Menu hover, line instead of color */
    html:not(.mobile) #menu .level-1>li:not(.current)>a:hover {
        text-decoration: underline;
    }

    html:not(.mobile) #menu .level-1>li {
        border-bottom: 2px solid transparent;
        transition: all .3s ease-out;
    }

    html:not(.mobile) #menu .level-1>li:hover {
        border-bottom: 2px solid var(--dark-bg);
    }

    /* Mobile logout link color */
    .mobile #header.menu-shown #user .logout {
        color: var(--dark-bg);
    }

    /* User hover color */
    #user .user-menu-btn .user-menu-icon:hover {
        color: var(--user-icon);
        opacity: 0.75;
        transition: all 0.3s ease;
    }

    /* User name color */
    #user .user-menu-btn .drop-down .user-menu-header .user-name {
        color: var(--dark-bg);
    }

    /* Side menu links */
    #menu .level-2 a:hover,
    #menu .level-2 a:active {
        color: var(--text-color);
        background: transparent;
    }

   

    /* login button  color */
    #auth .auth-control .footer .btn {
        background-color: var(--anwb-geel);
        color: var(--anwb-blauw);
        text-transform: none;
        margin-top: 55px
    }

    #auth .auth-control .footer .btn:hover,
    #auth .auth-control .footer .btn:focus {
        background-color: #E0B400 ;
        color: var(--text-color) !important;
    }


    /* Sort icon color */
    .k-grid-header .k-i-sort-asc-sm,
    .k-grid-header .k-i-sort-desc-sm,
    .k-grid-header .k-sort-order {
        color: var(--overlay-dark);
    }

    /* Color of selected role/permission item */
    .roles-and-permissions-template .k-state-selected .name .text-value {
        background-color: var(--dark-bg);
        color: var(--button-text);
    }

    /* Kendo header colors */
    .k-block,
    .k-header,
    .k-grid-header,
    .k-grouping-header,
    .k-pager-wrap,
    .k-draghandle,
    .k-treemap-tile,
    html .km-pane-wrapper .k-header {
        background-color: transparent;
    }


    /* No focused item should have a border around it */
    .k-state-focused,
    .k-list>.k-state-focused,
    .k-listview>.k-state-focused,
    .k-listview>.k-state-focused.k-state-selected,
    td.k-state-focused {
        box-shadow: none;
    }

    /* Content */

    #inner {
        padding-left: 15px;
    }

    @media screen and (min-width: 980px) {
        html:not(.mobile) #inner {
            width: 60%;
            left: 340px !important;
            padding-left: 16px;
            padding-right: 12px;
            padding-top: 16px;
            background: #fff;
        }
    }

    @media screen and (min-width: 1200px) {
        html:not(.mobile) #inner {
            width: 70%;
        }
    }

    @media screen and (min-width: 1600px) {
        html:not(.mobile) #inner {
            width: 76%;
        }

    }

    .layout.trg-layout-horizontal {
        background: transparent !important;
        width: auto !important;
    }

    /*
 * Form colors
 */

    /* Error color */
    .form .form-errors {
        color: #e51937;
    }

    /* Form element hover and focused colors */
    input[type="email"]:hover,
    input[type="text"]:hover,
    input[type="password"]:hover,
    input[type="email"]:focus,
    input[type="text"]:focus,
    input[type="password"]:focus,
    .form .type-lookup .editor .current:hover,
    .k-textbox:hover,
    .k-overflow-anchor:hover,
    .k-autocomplete.k-state-hover,
    .k-picker-wrap.k-state-hover,
    .k-numeric-wrap.k-state-hover,
    .k-dropdown-wrap.k-state-hover .k-textbox.k-state-default:hover,
    .k-overflow-anchor.k-state-default:hover,
    .k-autocomplete.k-state-default.k-state-hover,
    .k-picker-wrap.k-state-default.k-state-hover,
    .k-numeric-wrap.k-state-default.k-state-hover,
    .k-dropdown-wrap.k-state-default.k-state-hover,
    .k-textbox:focus,
    .k-autocomplete.k-state-focused,
    .k-picker-wrap.k-state-focused,
    .k-numeric-wrap.k-state-focused,
    .k-dropdown-wrap.k-state-focused,
    .k-multiselect.k-header.k-state-focused,
    .form .type-multiselect .editor select:focus,
    .field.type-multiselect .editor select:active,
    .field.type-multiselect .editor select:hover {
        border-color: var(--grid-line);
    }

    /* Selected dropdown item color */
    .k-scheduler-layout .k-state-selected,
    .k-scheduler .k-today.k-state-selected,
    .k-grid tr.k-state-selected,
    .k-grid td.k-state-selected,
    .k-grid td.k-state-selected.k-state-focused,
    .k-marquee-color,
    .k-gantt .k-treelist .k-state-selected,
    .k-gantt .k-treelist .k-state-selected td,
    .k-gantt .k-treelist .k-alt.k-state-selected,
    .k-gantt .k-treelist .k-alt.k-state-selected>td,
    .k-listview>.k-state-selected,
    .k-state-selected.k-line {
        background-color: #8BA1BC;
        color: var(--full-white);
    }

    /* Selected dropdown item color when hovered */
    .k-grid td.k-state-selected:hover,
    .k-grid tr.k-state-selected:hover td {
        background: transparent;
        color: var(--button-text);
    }

    /* Dropdown item color when selected and hovered */
    .form .type-lookup .editor .list-popup .list .k-grid-content tr.k-state-selected td.k-state-focused {
        color: var(--button-text);
    }

    /* Grid cells transition */
    .k-grid td,
    .k-grid td pre,
    .k-grid tr {
        transition: background-color .2s ease-out, color .2s ease-out;
        color: var(--text-color);
    }

    .k-grid tr.k-state-selected td,
    .k-grid tr:hover.k-state-selected td,
    .k-grid tr:hover td {
        color: #fff;
    }

    /* Do not highlight grid header on hover */
    .k-grid thead tr:hover {
        background-color: var(--link-color);
    }

    /* List selected item color */
    .k-grid tr.k-state-selected table,
    .k-grid tr.k-state-selected.k-state-focused table {
        background-color: var(--dark-bg);
    }

    /* Delete button on file upload border hover/focus color */
    .form .editor .k-upload .k-upload-files .k-upload-action:hover,
    .form .editor .k-upload .k-upload-files .k-upload-action:active,
    .form .editor .k-upload .k-upload-files .k-upload-action:focus {
        border-color: var(--link-color);
    }

    /* File upload button border hover/focus color */
    .form .editor .k-upload .k-dropzone .k-upload-button:hover,
    .form .editor .k-upload .k-dropzone .k-upload-button:active,
    .form .editor .k-upload .k-clear-selected:hover,
    .form .editor .k-upload .k-clear-selected:active,
    .form .editor .k-upload .k-dropzone .k-upload-button.k-state-focused,
    .form .editor .k-upload .k-clear-selected:focus {
        border-color: var(--link-color);
    }

    /* Image / file upload control name color */
    .k-file-success a.k-file-name,
    .k-file-success .k-upload-pct {
        color: var(--dark-bg);
    }

    /* Header background colors in kendo popups etc */
    .k-block,
    .k-grouping-header,
    .k-pager-wrap,
    .k-draghandle,
    .k-treemap-tile,
    html .km-pane-wrapper .k-header,
    .k-calendar .k-header {
        background-color: var(--dark-bg);
        color: var(--button-text);
    }

    .k-calendar .k-header .k-state-hover {
        opacity: 0.9;
        background-color: var(--dark-bg);
        color: var(--button-text);
    }

    #menu .level-2 .current a,
    #menu .level-2 .current a:link,
    #menu .level-2 .current a:hover,
    #menu .level-2 .current a:visited,
    #menu .level-2 .current a:focus,
    #menu .level-2 .current a:active {
        color: var(--text-color);
        font-weight: bold;
        
    }

    /* Calendar day link colors */
    .k-calendar .k-state-hover .k-link {
        color: var(--dark-bg);
    }

    .k-calendar .k-footer .k-nav-today {
        color: var(--dark-bg);
        border-color: var(--dark-bg);
    }

    /* Calendar today hover */
    .k-calendar .k-today.k-state-hover {
        background-color: var(--dark-bg);
    }

    .k-calendar .k-today.k-state-hover a {
        color: var(--button-text);
    }

    /* Calendar selected day color */
    .k-calendar td.k-state-selected {
        background: var(--dark-bg);
        border-color: var(--dark-bg);
    }

    .k-calendar td.k-state-selected.k-state-hover {
        background: var(--dark-bg);
        border-color: var(--dark-bg);
        box-shadow: none;
    }

    .k-calendar .k-today:active,
    .k-calendar td.k-state-focused,
    .k-calendar td.k-state-selected.k-state-focused,
    .k-calendar td.k-state-selected.k-state-hover {
        box-shadow: none;
    }

    .k-calendar td.k-state-selected.k-state-hover {
        background: var(--dark-bg);
        border-color: var(--dark-bg);
        box-shadow: none;
    }

    .k-calendar td.k-state-selected.k-state-focused .k-link,
    .k-calendar td.k-state-selected.k-state-hover .k-link {
        color: var(--text-color);
    }

    /* Scheduler and gantt bar buttons */
    .k-scheduler .k-scheduler-toolbar ul li.k-state-hover,
    .k-scheduler .k-scheduler-toolbar .k-state-selected,
    .k-gantt-toolbar .k-button,
    .k-grid .k-header .k-button,
    .k-scheduler .k-header .k-button,
    .k-scheduler .k-header li,
    .k-scheduler .k-header .k-link,
    .k-gantt>.k-header li,
    .k-gantt>.k-header .k-link,
    .k-gantt-toolbar .k-button,
    .km-pane-wrapper .k-header .k-button {
        background-color: var(--full-white);
        border-color: var(--dark-bg);
        color: var(--text-color);
    }

    /* Selected button in gantt and scheduler bar */
    .k-gantt .k-gantt-toolbar .k-gantt-views li.k-state-selected.k-state-hover,
    .k-scheduler .k-scheduler-toolbar .k-scheduler-views li.k-state-selected.k-state-hover,
    .k-scheduler-toolbar>.k-scheduler-views>li.k-state-selected {
        border-bottom-color: var(--dark-bg);
    }

    .k-gantt-toolbar>.k-gantt-views>li.k-state-selected {
        border-color: var(--dark-bg);
    }

    .k-gantt .k-gantt-toolbar .k-state-selected>.k-link {
        background-color: var(--full-white);
    }

    /* Gantt single task color */
    .k-task-single {
        background-color: var(--dark-bg);
        border-color: var(--dark-bg);
        color: var(--text-color);
    }

    /* Gantt single task color when selected */
    .k-state-selected.k-task-single {
        background-color: var(--dark-bg);
        border-color: var(--dark-bg);
        color: var(--text-color);
    }

    /* Make no distinction between selected rows and non-selected rows */
    .k-gantt .k-grid tr.k-state-selected>td {
        border-color: var(--grid-line);
    }

    .k-gantt .k-treelist tr.k-state-selected,
    .k-gantt .k-treelist tr.k-state-selected td {
        background-color: #fff;
        border-color: var(--grid-line);
    }

    .k-gantt .k-treelist tr.k-state-selected.k-alt,
    .k-gantt .k-treelist tr.k-state-selected.k-alt td {
        background-color: var(--lite-bg);
        border-color: var(--grid-line);
    }

    /* No hover color on rows */
    .k-gantt .k-treelist tr.k-alt:hover {
        background-color: var(--lite-bg);
    }

    .k-gantt .k-treelist tr td,
    .k-gantt .k-treelist tr.k-alt td,
    .k-gantt .k-treelist tr:hover td {
        color: var(--text-color);
        cursor: default;
    }

    /* No focused row header */
    .k-gantt .k-treelist .k-alt.k-state-selected:hover,
    .k-gantt .k-treelist .k-alt.k-state-selected:hover td {
        background-color: var(--lite-bg);
    }

    /* Scheduler and gantt bar buttons hover color */
    .k-grid .k-header .k-button:hover,
    .k-scheduler .k-header .k-button:hover,
    .k-scheduler .k-scheduler-toolbar .k-scheduler-views li.k-state-hover,
    .k-scheduler .k-scheduler-toolbar .k-scheduler-views li.k-state-hover .k-link,
    .k-gantt .k-gantt-toolbar .k-gantt-views li.k-state-hover,
    .k-gantt .k-gantt-toolbar .k-gantt-views li.k-state-hover .k-link,
    .k-gantt .k-gantt-toolbar .k-button:hover,
    .km-pane-wrapper .k-header .k-button:hover {
        background-color: var(--dark-bg);
        border-color: var(--dark-bg);
    }

    /* Handles and widget button colors */
    .k-state-selected,
    .k-state-selected:link,
    .k-state-selected:visited,
    .k-list>.k-state-selected,
    .k-list>.k-state-highlight,
    .k-panel>.k-state-selected,
    .k-ghost-splitbar-vertical,
    .k-ghost-splitbar-horizontal,
    .k-draghandle.k-state-selected:hover,
    .k-scheduler .k-scheduler-toolbar .k-state-selected,
    .k-scheduler .k-today.k-state-selected,
    .k-marquee-color,
    .k-drag-clue.k-state-selected {
        color: var(--dark-bg);
    }

    /* Grid row color */
    .k-grid tr:hover,
    .k-grid tr:active,
    .k-grid tr.k-state-selected
      {
        background-color: var(--link-color);
    }

    /* Grid link color */
    .k-grid tr:hover a,
    .k-state-selected td[role="gridcell"] a,
    .k-state-selected td[role="gridcell"] a:link,
    .k-state-selected td[role="gridcell"] a:visited,
    .k-state-selected td[role="gridcell"] a:active {
        color: var(--full-white);
    }

    .k-grid tr:hover a:hover {
        text-decoration: underline;
        color: var(--dark-bg);
    }

    /* Selected drop down items */
    .k-list-container .k-list [role=option].k-state-selected {
        color: var(--anwb-blauw);
        background-color:transparent;
    }

    .k-list-container .k-list [role=option]:hover, 
    .k-list-container .k-list [role=option]:hover.k-state-selected {
        color: var(--anwb-blauw);
        background-color:transparent;
        border-color:transparent;
        background-color:#E2EBF3;
    }

    .k-dropdown .k-state-hover .k-input {
        color: var(--text-color);
    }

    .k-dropdown-wrap .k-input,
    .k-numeric-wrap .k-input,
    .k-picker-wrap .k-input {
        line-height: 34px;
    }

    /* Hover/focus multiselect and lookup border color */
    .form .type-multiselect .editor select:hover,
    .form .type-multiselect .editor select:active,
    .form .type-lookup .editor .current:hover,
    .form .type-lookup .editor .current:focus {
        border-color: var(--dark-bg);
    }

    /* Textarea, input and canvas border hover colors */
    input[type="email"]:hover,
    input[type="text"]:hover,
    input[type="password"]:hover,
    textarea:hover,
    canvas:hover,
    input[type="email"]:focus,
    input[type="text"]:focus,
    input[type="password"]:focus,
    textarea:focus,
    canvas:focus {
        border-color:  var(--anwb-blauw) !important;
    }

    /* Make grid background transparent so any background image shows nicely */
    .k-grid table,
    .k-grid-header th.k-header,
    .k-filter-row th {
        background: var(--full-white);
    }

    /*
 * General layout settings for all pages
 */

    /* Fix Kendo select icon (datepickers, etc) positioning for current font */
    .search-box .search-form .k-picker-wrap .k-select,
    .search-box .search-form .k-numeric-wrap .k-select,
    .search-box .search-form .k-dropdown-wrap .k-select {
        margin-top: 0;
        height: calc(100% - 0);
    }

    /* search-box */
    .search-box .search-form {
        padding: 18px 16px 16px 16px;
    }

    .search-box .search-form .field .label {
        margin-top: 0;
    }

    /* Set header size */
    html:not(.mobile) #header {
        height: auto;
        background: #f1f5f9;
    }

    .mobile #header.menu-shown {
        width: auto;
        min-width: 100%;
        max-width: 100%;
    }

    /* Hide user menu when mobile menu opened */
    .mobile #header.menu-shown #user {
        display: none;
    }

    /* Mobile menu */
    .mobile #menu {
        min-width: initial;
        position: relative;
        top: 0;
        box-shadow: none;
    }

    /* Desktop menu height and position */
    html:not(.mobile) #menu {
        height: 152px;
        position: relative;
        top: 0;
        box-shadow: none;
        min-width: 0;
    }

    /* Move top level menu (sections) */
    html:not(.mobile) #menu .level-1 {
        position: absolute;
        left: 271px;
        bottom: 0;
        top: 0;
        border-left: 1px solid #E2EBF3;
        list-style: none;
        max-width: calc(100vw - 492px);
        display: inline-block;
    }

    /* Align sections to right */
    html:not(.mobile) #menu .level-1>li {
        float: left;
        display: inline-block;
        list-style: none;
    }

    /* More spacing next to user name */
    #user .user-name {
        margin-right: 4px;
    }

    /* Bigger logo size, lower position */
    html:not(.mobile) #header #logo {
        left: 28px;
        top: 0px;
        width: 260px;
        height: 56px;
        padding-top: 2px;
        padding-left: 35px;
    }

    /* Mobile logo slightly lower so it's centered */
    .mobile #header #logo {
        top: 17px;
    }

    /* Page title positioning on desktop */
    html:not(.mobile) #title {
        top: 172px;
    }

    /* Page title size */
    .layout>.layout-cell>.layout-cell-title {
        font-size: 20px;
    }

    .mobile .layout>.layout-cell>.layout-cell-title {
        font-size: 20px;
        padding: 12px 8px 0px 16px;
    }

    /* Content positioning on desktop */
    html:not(.mobile) #inner {
        top: 169px;
        bottom: 56px;
    }

    .mobile #inner {
        bottom: 65px;
    }

    /* Side menu positioning on desktop */
    html:not(.mobile) #menu .level-2 {
        top: 165px;
        background: transparent;
    }

    /* Move search box to top right */
    html:not(.mobile) .search-box {
        position: fixed;
        float: none;
        margin-right: 0;
        top: 86px;
        right: 48px;
        width: 220px;
        padding-right: 15px;
    }

    /* Set context bar height */
    .mobile #context-bar {
        height: 64px;
    }

    /* Context bar button width */
    #context-bar.has-search>.buttons {
        width: 100%;
    }

    /* Resize context bar button container to fit context bar */
    #context-bar>.buttons {
        height: 56px;
        line-height: 58px;
    }

    /* Align titles in advanced search form left */
    html:not(.mobile) .search-form .label .name {
        text-align: left;
    }

    /* Align text in advanced search drop down */
    .search-box.advanced .search-form .k-dropdown span.k-input {
        text-align: left;
        line-height: 28px;
    }

    /* Simple search box and clear button width */
    .search-box .simple-search,
    .search-box .clear-search {
        width: 140px;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* Move advanced search form to be positioned below search box */
    .search-box.advanced .search-form {
        bottom: auto;
        top: 58px;
        max-height: calc(100vh - 180px);
        border-radius: 6px;
    }

    .mobile .search-box.advanced .content {
        bottom: initial;
    }

    /* Re-align advanced search form items */
    .search-box.advanced .search-form .label {
        float: left;
        margin-left: 8px;
    }

    /* Background color of advanced search box */
    .mobile .search-box.advanced {
        background-color: var(--text-color);
    }

    /* Line height in advanced search */
    .search-box.advanced .search-form {
        line-height: 12px;
    }

    /* Switch up/down icons for advanced search */
    html:not(.mobile) #context-bar .search-box .content .icon-down-open::before {
        content: '\e802';
    }

    html:not(.mobile) #context-bar .search-box .content .icon-up-open::before {
        content: '\e803';
    }

    /* Make search bar in lookup control look better */
    .form .type-lookup .editor .search-input {
        padding: 8px 5px;
    }

    /* Make X button for file upload show a hand when hovered */
    .form .editor .k-upload .k-upload-files .k-upload-action {
        cursor: pointer;
    }

    /* File upload button */
    .field .editor .k-upload .k-dropzone {
        padding-left: 0;
    }

    .field .editor .k-upload .k-dropzone .k-upload-button,
    .field .editor .k-upload .k-dropzone .k-upload-button.k-state-focused {
        background-color: #fff;
        color: var(--button-bg);
        border: var(--button-border);
        font-weight: bold;
        padding: 8px 10px;
        transition: all 0.3s ease;
        border-radius: 36px;
        margin-top: 8px;
        text-transform: uppercase;
        font-family: var(--header-font);
    }

    html:not(.mobile) .field .editor .k-upload .k-dropzone .k-upload-button:hover,
    html:not(.mobile) .field .editor .k-upload .k-dropzone .k-upload-button:active,
    html:not(.mobile) .field .editor .k-upload .k-dropzone .k-upload-button.k-state-focused:hover,
    html:not(.mobile) .field .editor .k-upload .k-dropzone .k-upload-button.k-state-focused:active {
        border-color: var(--anwb-blauw);
        color: var(--anwb-blauw);
        background-color: #fff;
    }

    .field .editor .k-upload .k-upload-files {
        border-radius: 4px;
        overflow: hidden;
        margin-top: 16px;
        border-top: none;
        background-color: #F1F5F9;
    }

    .field .editor .k-upload .k-upload-files .k-upload-status {
        display: inline-block;
        right: 10px;
        position: absolute;
        top: 50%;
        margin-top: -9px;
    }

    /* File upload button show hand when hovered */
    .form .editor .k-upload .k-dropzone .k-upload-button:hover,
    .form .editor .k-upload .k-dropzone .k-upload-button:active,
    .form .editor .k-upload .k-clear-selected:hover,
    .form .editor .k-upload .k-clear-selected:active {
        cursor: pointer;
    }

    /* Make list view not scroll horizontally */
    .custom-list.k-grid table {
        width: auto;
        min-width: 100%;
    }

    /* Position arrow down better on list page */
    .custom-list .k-grid-header th.k-header .k-icon {
        position: absolute;
        left: 8px;
        top: 8px;
    }

    /* Make list sort less wide */
    .list-sort {
        width: 240px;
    }

    /* Loading spinner color */
    .k-loading-image {
        border-top: 3px solid rgba(0, 103, 184, 0.2);
        border-right: 3px solid rgba(0, 103, 184, 0.2);
        border-bottom: 3px solid rgba(0, 103, 184, 0.2);
        border-left: 3px solid rgba(0, 103, 184, 1.0);
    }

    #auth .auth-control .loader .spinner-layer {
        border-color: var(--link-color-hover);
    }

    /* Correct hover color for lookups */
    .field.type-lookup .editor .current:hover {
        border-color: var(--link-color-hover);
    }

    /* Make list popups scale correctly on mobile */
    .mobile .form .type-lookup .editor .list-popup {
        bottom: 64px;
    }

    .mobile .field.type-lookup .editor .list-popup {
        height: 200px;
        max-height: calc(100% - 128px);
        margin-left: -5px;
    }

    /* Make last item in table have more space at bottom to prevent search bar from overlapping */
    .mobile #inner .table-list .k-grid-content table {
        padding-bottom: 64px;
    }

    /* On mobile, use less padding for tables, and on pages with _smalltable in name */
    .mobile .k-grid td,
    body[class*="_smalltable"] .k-grid td {
        padding: .4em .6em;
    }

    .mobile .table-list tbody[role=rowgroup] tr[role=row],
    body[class*="_smalltable"] .table-list tbody[role=rowgroup] tr[role=row] {
        height: 40px;
    }

    /* 
* SMALLER DESKTOP SCREENS
*
* For desktop screens that are smaller than 1280px wide, make all elements a bit smaller so more stuff fits.
*/
    @media only screen and (max-width: 1280px) {

        /* Standard font size */
        html:not(.mobile),
        html:not(.mobile) body,
        html:not(.mobile) pre {
            font-size: 16px;
        }

        /* Make top menu smaller */
        html:not(.mobile) #menu {
            height: 100px;
        }

        /* Position logo */
        html:not(.mobile) #header #logo {
            left: 16px;
            top: 40px;
        }

        /* More space for main menu items */
        html:not(.mobile) #menu .level-1 {
            right: 216px;
            bottom: 16px;
            max-width: calc(100vw - 376px);
        }

        /* Make main menu items smaller */
        html:not(.mobile) #menu .level-1>li>a {
            font-size: 14px;
        }

        html:not(.mobile) #menu .level-1>li {
            height: 32px;
        }

        html:not(.mobile) #menu a,
        html:not(.mobile) #menu a:link,
        html:not(.mobile) #menu a:visited,
        html:not(.mobile) #menu a:focus {
            line-height: 32px;
        }

        /* Reposition user menu */
        html:not(.mobile) #user {
            top: 0px;
            font-size: 12px;
            padding-top: 0px;
        }

        /* Reposition search box, smaller font */
        html:not(.mobile) .search-box {
            top: 46px;
        }

        html:not(.mobile) .search-box .simple-search {
            font-size: 12px;
            height: 28px;
        }

        /* Context bar font size */
        html:not(.mobile) #context-bar {
            font-size: 13px;
        }

        /* Context bar button (including search bar button) */
        html:not(.mobile) #context-bar button,
        html:not(.mobile) #context-bar button:active,
        html:not(.mobile) #context-bar button:focus,
        html:not(.mobile) #context-bar button:visited {
            font-size: 13px;
            height: 28px;
        }

        /* Search form input size */
        html:not(.mobile) .search-box .search-form .type-range.time .k-input,
        html:not(.mobile) .search-box .search-form .type-range.datetime .k-input,
        html:not(.mobile) .search-box .search-form .type-range.date .k-input,
        html:not(.mobile) .form .type-text .editor>input[type=text],
        html:not(.mobile) .form .type-email .editor>input[type=text],
        html:not(.mobile) .form .type-link .editor>input[type=text],
        html:not(.mobile) .search-box .search-form .type-range.decimal .k-numeric-wrap .k-formatted-value,
        html:not(.mobile) .search-box .search-form .type-range.double .k-numeric-wrap .k-formatted-value,
        html:not(.mobile) .search-box .search-form .type-range.number .k-numeric-wrap .k-formatted-value,
        html:not(.mobile) .search-box .search-form .type-range.decimal .k-numeric-wrap .k-input,
        html:not(.mobile) .search-box .search-form .type-range.double .k-numeric-wrap .k-input,
        html:not(.mobile) .search-box .search-form .type-range.number .k-numeric-wrap .k-input {
            height: 28px;
        }

        html:not(.mobile) .search-box .search-form .k-picker-wrap .k-select,
        html:not(.mobile) .search-box .search-form .k-numeric-wrap .k-select,
        html:not(.mobile) .search-box .search-form .k-dropdown-wrap .k-select {
            margin-top: 1px;
        }

        /* Left menu position */
        html:not(.mobile) #menu .level-2 {
            top: 114px;
            width: 248px;
        }

        /* Left menu item size */
        html:not(.mobile) #menu .level-2>li {
            font-size: 16px;
            line-height: 24px;
            color: #ffffff;
            text-shadow: var(--text-shadow);
        }

        html:not(.mobile) #menu .level-2>li a {
            font-size: 13px;
            line-height: 22px;
        }

        /* Fix input text positioning for smaller font */
        html:not(.mobile) .form .editor input {
            padding: 2px 5px 2px 0;
        }

        /* Page title size */
        html:not(.mobile) #title {
            font-size: 16px;
            top: 114px;
        }

        /* Content positioning */
        html:not(.mobile) #inner {
            top: 50px;
            left: 270px;
        }

        /* Grid header */
        html:not(.mobile) .k-grid-header th.k-header,
        .k-filter-row th {
            padding: .5em;
        }

        /* Grid standard row height */
        html:not(.mobile) .table-list tbody[role=rowgroup] tr[role=row] {
            height: 32px;
        }

        .trg-layout-vertical>.layout-cell {
            margin: 11px !important;
        }

        /* Small table row height */
        html:not(.mobile) body[class*="_smalltable"] .k-grid td {
            padding: .2em .6em;
        }

        html:not(.mobile) body[class*="_smalltable"] .table-list tbody[role=rowgroup] tr[role=row] {
            height: 20px;
        }

        /* Context bar height and sizing */
        html:not(.mobile) #context-bar {
            padding: 3px 10px;
            padding-left: 258px;
        }

        /* Form dropdown height */
        html:not(.mobile) .form .type-select .editor .k-dropdown .k-dropdown-wrap {
            height: 28px;
        }

        /* Form dropdown arrow size */
        html:not(.mobile) [class^="icon-"]:not(.user-menu-icon):before,
        html:not(.mobile) [class*=" icon-"]:not(.user-menu-icon):before {
            font-size: 13px;
        }

        /* Form lookup height */
        html:not(.mobile) .form .type-lookup .editor .current {
            height: 28px;
        }

        html:not(.mobile) .form .type-lookup .editor .selection {
            top: .15em;
        }

        html:not(.mobile) .form .type-lookup .editor .open-list {
            margin-top: 2px;
        }

        html:not(.mobile) .form .type-lookup .label {
            margin-top: -10px;
        }

        /* Form date/time/number/etc input height */
        html:not(.mobile) .form .type-date .k-input,
        html:not(.mobile) .form .type-datetime .k-input,
        html:not(.mobile) .form .type-time .k-input,
        html:not(.mobile) .form .type-decimal .editor .k-numeric-wrap .k-formatted-value,
        html:not(.mobile) .form .type-double .editor .k-numeric-wrap .k-formatted-value,
        html:not(.mobile) .form .type-number .editor .k-numeric-wrap .k-formatted-value,
        html:not(.mobile) .form .type-decimal .editor .k-numeric-wrap .k-input,
        html:not(.mobile) .form .type-double .editor .k-numeric-wrap .k-input,
        html:not(.mobile) .form .type-number .editor .k-numeric-wrap .k-input {
            height: 28px;
        }

        /* Fix form icon size */
        html:not(.mobile) .k-icon,
        html:not(.mobile) .k-tool-icon {
            font-size: 14px;
        }

        html:not(.mobile) .k-picker-wrap .k-select,
        html:not(.mobile) .k-numeric-wrap .k-select,
        html:not(.mobile) .k-dropdown-wrap .k-select {
            line-height: calc(2em + 2px);
        }

        .k-dropdown-wrap .k-input,
        .k-numeric-wrap .k-input,
        .k-picker-wrap .k-input {
            line-height: 34px;
        }

        .k-numerictextbox .k-select {
            padding-top: 3px;
            box-sizing: border-box;
        }

        /* Fix numeric textbox icon */
        html:not(.mobile) .k-numerictextbox .k-link {
            padding-top: 1px;
        }

        /* Fix tile positioning and font size */
        html:not(.mobile) body[class*="_tiles"] #context-bar {
            padding-top: 114px;
        }

        html:not(.mobile) body[class*="_tiles"] #context-bar .button {
            font-size: 16px;
        }

        /* Tile icon size */
        html:not(.mobile) body[class*="_tiles"] #context-bar .button i {
            width: 64px;
            height: 64px;
        }
    }
    /*
* SMALL DESKTOP SCREENS
*
* For desktop screens that are smaller than 1600px wide, make all elements a bit smaller so more stuff fits.
*/
    @media only screen and (max-width: 1600px) {

        /* Standard font size */
        html:not(.mobile),
        html:not(.mobile) body,
        html:not(.mobile) pre {
            font-size: 14px;
            margin: 0;
        }

        /* Position logo */
        html:not(.mobile) #header #logo {
            left: 16px;
            top: 8px;
        }

        /* Make top menu smaller */
        html:not(.mobile) #menu {
            height: 100px;
        }

        /* More space for main menu items */
        html:not(.mobile) #menu .level-1 {
            right: 216px;
            bottom: 16px;
            max-width: calc(100vw - 376px);
        }

        /* Make main menu items smaller */
        html:not(.mobile) #menu .level-1>li>a {
            font-size: 14px;
        }

        html:not(.mobile) #menu .level-1>li {
            height: 32px;
        }

        html:not(.mobile) #menu a,
        html:not(.mobile) #menu a:link,
        html:not(.mobile) #menu a:visited,
        html:not(.mobile) #menu a:focus {
            line-height: 32px;
        }

        /* Reposition user menu */
        html:not(.mobile) #user {
            top: 46px;
            font-size: 13px;
        }

        /* Reposition search box, smaller font */
        html:not(.mobile) .search-box {
            top: 40px;
        }

        html:not(.mobile) .search-box .simple-search {
            font-size: 13px;
            height: 28px;
        }

        /* Move advanced search form to be positioned below search box */
        .search-box.advanced .search-form {
            bottom: auto;
            top: 56px;
            max-height: calc(100vh - 184px);
        }

        /* Context bar font size */
        html:not(.mobile) #context-bar {
            font-size: 13px;
        }

        /* Resize context bar button container to fit context bar */
        #context-bar>.buttons {
            height: 48px;
            line-height: 52px;
        }

        /* Reposition scroll handles */
        #context-bar>.buttons .scroll-btn-left,
        #context-bar>.buttons .scroll-btn-right {
            top: 18px;
        }

        /* Context bar button (including search bar button) */
        html:not(.mobile) #context-bar button,
        html:not(.mobile) #context-bar button:active,
        html:not(.mobile) #context-bar button:focus,
        html:not(.mobile) #context-bar button:visited {
            font-size: 13px;
            height: 28px;
            line-height: 22px;
        }

        /* Search form input size */
        html:not(.mobile) .search-box .search-form .type-range.time .k-input,
        html:not(.mobile) .search-box .search-form .type-range.datetime .k-input,
        html:not(.mobile) .search-box .search-form .type-range.date .k-input,
        html:not(.mobile) .form .type-text .editor>input[type=text],
        html:not(.mobile) .form .type-email .editor>input[type=text],
        html:not(.mobile) .form .type-link .editor>input[type=text],
        html:not(.mobile) .search-box .search-form .type-range.decimal .k-numeric-wrap .k-formatted-value,
        html:not(.mobile) .search-box .search-form .type-range.double .k-numeric-wrap .k-formatted-value,
        html:not(.mobile) .search-box .search-form .type-range.number .k-numeric-wrap .k-formatted-value,
        html:not(.mobile) .search-box .search-form .type-range.decimal .k-numeric-wrap .k-input,
        html:not(.mobile) .search-box .search-form .type-range.double .k-numeric-wrap .k-input,
        html:not(.mobile) .search-box .search-form .type-range.number .k-numeric-wrap .k-input {
            height: 28px;
        }

        html:not(.mobile) .search-box .search-form .k-picker-wrap .k-select,
        html:not(.mobile) .search-box .search-form .k-numeric-wrap .k-select,
        html:not(.mobile) .search-box .search-form .k-dropdown-wrap .k-select,
        html:not(.mobile) .search-box .search-form .type-range .k-datepicker .k-picker-wrap.k-state-default>.k-select,
        html:not(.mobile) .search-box .search-form .type-range .k-datetimepicker .k-picker-wrap.k-state-default>.k-select,
        html:not(.mobile) .search-box .search-form .type-range .k-timepicker .k-picker-wrap.k-state-default>.k-select {
            margin-top: 0px;
        }

        /* Left menu position */
        html:not(.mobile) #menu .level-2 {
            top: 114px;
            width: 248px;
        }

        /* Left menu item size */
        html:not(.mobile) #menu .level-2>li {
            font-size: 16px;
            line-height: 24px;
            color: #ffffff;
            text-shadow: var(--text-shadow);
        }

        html:not(.mobile) #menu .level-2>li a {
            font-size: 13px;
            line-height: 22px;
        }

        /* Fix input text positioning for smaller font */
        html:not(.mobile) .form .editor input {
            padding: 2px 5px 2px 0;
        }

        /* Page title size */
        html:not(.mobile) #title {
            font-size: 16px;
            top: 114px;
        }

        /* Content positioning */
        html:not(.mobile) #inner {
            top: 111px;
            left: 264px;
            bottom: 49px;
        }

        /* Grid header */
        html:not(.mobile) .k-grid-header th.k-header,
        .k-filter-row th {
            padding: .5em;
        }

        /* Grid standard row height */
        html:not(.mobile) .table-list tbody[role=rowgroup] tr[role=row] {
            height: 32px;
        }

        /* Small table row height */
        html:not(.mobile) body[class*="_smalltable"] .k-grid td {
            padding: .2em .6em;
        }

        html:not(.mobile) body[class*="_smalltable"] .table-list tbody[role=rowgroup] tr[role=row] {
            height: 20px;
        }

        /* Context bar height and sizing */
        html:not(.mobile) #context-bar {
            padding: 0 10px;
            padding-left: 258px;
        }

        /* Form dropdown height */
        html:not(.mobile) .form .type-select .editor .k-dropdown .k-dropdown-wrap {
            height: 28px;
        }

        /* Form dropdown arrow size */
        html:not(.mobile) [class^="icon-"]:not(.user-menu-icon):before,
        html:not(.mobile) [class*=" icon-"]:not(.user-menu-icon):before {
            font-size: 13px;
        }

        /* Form lookup height */
        html:not(.mobile) .form .type-lookup .editor .current {
            height: 28px;
        }

        html:not(.mobile) .form .type-lookup .editor .selection {
            top: .15em;
        }

        html:not(.mobile) .form .type-lookup .editor .open-list {
            margin-top: 2px;
        }

        html:not(.mobile) .form .type-lookup .label {
            margin-top: -10px;
        }

        /* Form date/time/number/etc input height */
        html:not(.mobile) .form .type-date .k-input,
        html:not(.mobile) .form .type-datetime .k-input,
        html:not(.mobile) .form .type-time .k-input,
        html:not(.mobile) .form .type-decimal .editor .k-numeric-wrap .k-formatted-value,
        html:not(.mobile) .form .type-double .editor .k-numeric-wrap .k-formatted-value,
        html:not(.mobile) .form .type-number .editor .k-numeric-wrap .k-formatted-value,
        html:not(.mobile) .form .type-decimal .editor .k-numeric-wrap .k-input,
        html:not(.mobile) .form .type-double .editor .k-numeric-wrap .k-input,
        html:not(.mobile) .form .type-number .editor .k-numeric-wrap .k-input {
            height: 28px;
        }

        /* Fix form icon size */
        html:not(.mobile) .k-icon,
        html:not(.mobile) .k-tool-icon {
            font-size: 14px;
        }

        html:not(.mobile) .k-picker-wrap .k-select,
        html:not(.mobile) .k-numeric-wrap .k-select,
        html:not(.mobile) .k-dropdown-wrap .k-select {
            line-height: calc(2em + 2px);
        }

        /* Fix numeric textbox icon */
        html:not(.mobile) .k-numerictextbox .k-link {
            padding-top: 1px;
        }

        /* Fix tile positioning and font size */
        html:not(.mobile) body[class*="_tiles"] #context-bar {
            padding-top: 114px;
        }

        html:not(.mobile) body[class*="_tiles"] #context-bar .button {
            font-size: 16px;
        }

        /* Tile icon size */
        html:not(.mobile) body[class*="_tiles"] #context-bar .button i {
            width: 64px;
            height: 64px;
        }
    }


    /* Office template, resembling web version of onedrive */

                /* Main menu color */
                html:not(.mobile) #menu {
                    background-color: var(--lite-bg);
                    border-bottom: var(--transparent-line);
                }

                #user {
                    color: var(--user-icon-hover);
                }

                /* User link and section menu item color */
                #user .user-name,
                #user a,
                #user a:hover,
                #user a:active,
                #user a:visited {
                    color: var(--link-color);
                }

                #user .user-menu-icon {
                    color: var(--full-white);
                    opacity: 1;
                    transition: opacity 0.3s ease;
                    
                }

        /* Section link hover color */
        html:not(.mobile) #menu .level-1>li>a {
                    color: var(--anwb-blauw);
                }

        html:not(.mobile) #menu .level-1 > li:not(.current) a {
            position: relative; /* Nodig voor het positioneren van de ::after */
            text-decoration: none !important; /* Verwijdert standaard onderstreping */
            display: inline-block; /* Zorgt ervoor dat de pseudo-elementen werken */
}

            /* Het pseudo-element voor de gele lijn */
            /*Hover knoppen bovenaan*/
            html:not(.mobile) #menu .level-1 > li:not(.current) a::after {
                content: ''; /* Creeert het pseudo-element */
                position: absolute; /* Absoluut gepositioneerd ten opzichte van <a> */
                bottom: -5px; /* Zet de lijn onder de tekst */
                left: 0;
                width: 100%; /* De lijn beslaat de volledige breedte */
                height: 3px; /* Hoogte van de lijn */
                background-color: #FFD700; /* Gele kleur */
                transform: scaleX(0); /* Start onzichtbaar */
                transform-origin: right; /* Laat de lijn beginnen aan de rechterkant */
                transition: transform 0.3s ease-out; /* Animatie */
                
            }

            /* Hover-effect: Lijn verschijnt */
            html:not(.mobile) #menu .level-1 > li:not(.current):hover a::after {
                transform: scaleX(1); /* De lijn wordt zichtbaar */
                transform-origin: left; /* Laat de lijn van links naar rechts gaan */
                
            }

                /* Mobile header */
                .mobile #header {
                    background: var(--body-bg-img);
                }

                /* Mobile context bar */
                .mobile #context-bar,
                .mobile #context-bar>.buttons {
                    background: transparent !important;
                }

                /* Background of mobile menu bar at bottom */
                .mobile #header.menu-shown #logo,
                .mobile #header.menu-shown #close-menu {
                    background: rgba(0, 0, 0, 0);
                }

                /* Make menu icons black and smaller */
                .mobile #close-menu,
                .mobile #open-menu,
                #user .open-search,
                #user .user-menu-btn .user-menu-icon {
                    color: var(--user-icon);
                    font-size: 32px;
                    transition: opacity 0.3s ease;
                }

                .mobile #user .open-search {
                    height: 50px;
                    line-height: 48px;
                }

        /* Fonts */

            /* Set fonts */
            body,
            html,
            pre {
                font: normal 14px / 1.5 var(--main-font);
            }

            /* Menu font-weight removed: overbodig, font-size staat in blok ~1993 */

            #menu .level-2>li {
                font-weight: normal;
                font-size: 16px;
            }

            html:not(.mobile) #menu .level-2 a,
            html:not(.mobile) #menu .level-2 a:link,
            html:not(.mobile) #menu .level-2 a:visited,
            html:not(.mobile) #menu .level-2 a:focus {
                font-weight: 400;
                font-size: 16px;
            }

            /* Page title font size */
            #title {
                font-weight: 600;
                font-size: 20px
            }

        /* Auth screen */

            /* Use background landscape */
            #auth .decorator {
                background-color: var(--body-bg-color);
                background-size: cover;
                background-repeat: no-repeat;
                background-position: 50% 50%;
            }

        /* Desktop styles */

            /* Make main menu small */
            html:not(.mobile) #menu {
                height: 64px;
            }

            /* Make logo small */
            html:not(.mobile) #header #logo {
                left: -20px;
                top: 8px;
                width: 148px;
                height: 64px;
            }

            /* No border on section items */
            html:not(.mobile) #menu .level-1>li,
            html:not(.mobile) #menu .level-1>li:hover,
            html:not(.mobile) #menu .level-1>li.current {
                border: none;
                height: 32px;
                padding: 0 8px;
                margin: 0;
                transition: color 0.2 ease;
                margin-right: 1px;
                background-color: transparent;
                margin-top: 20px;
                border-radius: 16px;
                text-shadow: none;
            }

            /* Section links height and font size */
            html:not(.mobile) #menu .level-1>li>a,
            html:not(.mobile) #menu .level-1>li>a:link,
            html:not(.mobile) #menu .level-1>li>a:visited,
            html:not(.mobile) #menu .level-1>li>a:focus {
                line-height: 30px;
                font-size: 16px;
            }


            /* Active section link color */
            html:not(.mobile) #menu .level-1>li.current {
                background-color: var(--full-white);
                color: var(--button-bg) !important;
            }

            html:not(.mobile) #menu .level-1>li.current>a {
                font-weight: 600;
            }

            /* If only 1 section is available, make sure it is completely invisible */
            html:not(.mobile) #menu .level-1>li:first-child:last-child {
                background-color: transparent;
            }

            /* Reposition user menu and icon */
            html:not(.mobile) #user {
                position: absolute;
                height: 64px;
                top: 0px;
            }

            html:not(.mobile) #user .user-menu-btn .drop-down {
                top: 64px;
                z-index: 9999;
            }

            /* Make user link underlined on hover */
            #user a:hover {
                text-decoration: underline;
            }

            /* Search box position — see duplicate block below (~2078) which overrides this */

            /* Make search transparent */
            html:not(.mobile) .search-box .simple-search {
                background: transparent;
                border: none;
            }

            /* Position search input nicely */
            html:not(.mobile) .search-box .simple-search {
                padding-top: 8px;
            }

            html:not(.mobile) .search-box input[type=text].simple-search {
                color: #606060;
            }

            /* Position clear search button nicely */
            html:not(.mobile) .search-box .clear-search {
                padding-top: 5px !important;
            }

            /* Make room for search icon */
            html:not(.mobile) .search-box .simple-search,
            html:not(.mobile) .search-box .clear-search {
                margin-left: 0px !important;
                width: 132px;
            }

            html:not(.mobile) .search-box .simple-search::placeholder {
                color: #606060;
            }

            /* Add a search icon */
            html:not(.mobile) .search-box .content {
                font-size: 16px;
                line-height: 16px;
                background-color: #f2f2f2;
                color: #606060;
                border: 1px solid rgb(229, 229, 229);
                border-radius: 8px;
            }
            
            html:not(.mobile) .search-box {
            right: initial;
            top: 0px;
            right: 60px;
            height: 64px;
            width: 270px;
            background-color: transparent;
            padding-right: 16px;
            padding-top: 13px;
            
        }

            html:not(.mobile) .search-box .content:before {
                position: absolute;
                font-family: fontello;
                content: '\e80e';
                height: 24px;
                width: 24px;
                left: 30px;
                top: 22px;
                color: var(--anwb-blauw);
            }

            /* Make advanced arrow dark */
            html:not(.mobile) .search-box .open-advanced,
            html:not(.mobile) .search-box .close-advanced,
            html:not(.mobile) .search-box .open-search {
                color: #000000;
            }

            html:not(.mobile) .search-box .open-advanced,
            html:not(.mobile) .search-box .close-advanced {
                color: var(--anwb-blauw);
            }

            /* Make advanced arrow bit smaller */
            .search-box .close-advanced,
            .search-box .open-advanced {
                font-size: 16px;
            }

            /* Move advanced search form to be aligned left */
            .search-box.advanced .search-form {
                right: 16px;
                top: 68px;
            }

            /* Position left menu */
            html:not(.mobile) #menu .level-2 {
                top: 64px;
                background: var(--left-menu);
                bottom: 0;
                padding: 63px 0 4px 0;
            }

            html:not(.mobile) #menu .level-2>li {
                text-indent: 16px;
                color: #556E8C;
                text-shadow: var(--text-shadow);
            }


            html:not(.mobile) #menu .level-2>li:first-child {
                border-top: 1px solid var(--transparent-line);
                padding-top: 4px;
            }

            /* Level3 */
            html:not(.mobile) #menu .level-2 .level-3 li {
                margin-bottom: 2px;
                transition: all 0.3s ease;
                
                
            }

            /* Level3 'icon' */

            html:not(.mobile) #menu .level-3>li a {
                padding-left: 8px;
                color: var(--anwb-blauw);
                font-weight: 400;
            }

            a.routed[title="Startpagina"],
            a.routed[title="UBO gegevens"],
            a.routed[title="Identiteitsverificatie"],
            a.routed[title="Vraag url opnieuw aan"],
            a.routed[title="Download ingevulde gegevens"]
            {
                pointer-events: none !important;
            }

            html:not(.mobile) #menu .level-3>li a:before,
            html.mobile #menu .level-3>li a:before {
                font-size: 14px;
            }

            html:not(.mobile) #menu .level-3>li:hover a:before,
            html:not(.mobile) #menu .level-3>li.current a:before {
                font-weight: 400;
            }


            /* Hover color for left menu */
            html:not(.mobile) #menu .level-3>li:hover {
                background-color: transparent;
                color: var(--anwb-lichtblauw);
            }

            html:not(.mobile) #menu .level-3>li:hover a {
                font-weight: 400;
            }

            /* Active menu item */
            html:not(.mobile) #menu .level-3 {
                width: 270px;
            }

            html:not(.mobile) #menu .level-3>li.current {
                background-color: var(--overlay-lite);
                color: #fff;
                border-radius: 0 18px 18px 0;
                
            }

            html:not(.mobile) #menu .level-3>li.current a,
            html:not(.mobile) #menu .level-3>li.current a:before {
                color: var(--anwb-lichtblauw);
                

            }


            /* Add numbers before userflow */
            html:not(.mobile) #menu .level-2>li:nth-child(1)>.level-3>li:first-child>a::before {
                content: "1. ";
                margin-right: 8px;
                
            }

            html:not(.mobile) #menu .level-2>li:nth-child(1)>.level-3>li:nth-child(2)>a::before {
                content: "2.";
                margin-right: 8px;

            }

            html:not(.mobile) #menu .level-2>li:nth-child(1)>.level-3>li:nth-child(3)>a::before {
                content: "3.";
                margin-right: 8px;

            }

            html:not(.mobile) #menu .level-2>li:nth-child(1)>.level-3>li:nth-child(4)>a::before {
                content: "4.";
                margin-right: 8px;

            }

            html:not(.mobile) #menu .level-2>li:nth-child(1)>.level-3>li:nth-child(5)>a::before {
                content: "5.";
                margin-right: 8px;

            }

            html:not(.mobile) #menu .level-2>li:nth-child(2)>.level-3>li:nth-child(6)>a::before {
                content: "6.";
                margin-right: 8px;

            }

            html:not(.mobile) #menu .level-2>li:nth-child(2)>.level-3>li:nth-child(7)>a::before {
                content: "7.";
                margin-right: 8px;

            }

            /* Add sign after userflow */
            html:not(.mobile) #menu .level-2>li:nth-child(2)>.level-3>li>a::after {
                content: url('https://cdn.triggre.com/shuttel/menu-arrow.png');
                float: right;
                margin-right: 16px;
            }

            html:not(.mobile) #menu .level-2>li:nth-child(2)>.level-3>li.current>a::after {
                content: url('https://cdn.triggre.com/shuttel/menu-arrow-selected.png');
            }

            /* Make block grey */
            html:not(.mobile) #menu .level-2>li:nth-child(2)>.level-3 {
                background-color: #F1F5F9;
                border-radius: 4px;
                padding: 12px 0;
                margin: 5px 16px 0 16px;
                width: auto;
            }

            html:not(.mobile) #menu .level-2>li:nth-child(2)>.level-3 a {
                padding-left: 0;
                font-family:  ClanPro, sans-serif;
            }

            html:not(.mobile) #menu .level-2>li:nth-child(2) {
                border-top: solid 2px #f1f5f9;
                border-bottom: solid 2px #f1f5f9;
                padding-bottom: 14px;
                padding-top: 7px;
                width: inherit;
            }

            html:not(.mobile) #menu .level-2>li:first-child,
            html:not(.mobile) #menu .level-2>li:nth-child(3) {
                visibility: hidden;
                margin-top: -32px;
            }

            html:not(.mobile) #menu .level-2>li:first-child>.level-3>li>a,
            html:not(.mobile) #menu .level-2>li:nth-child(3)>.level-3>li>a {
                visibility: visible;
            }


            /* Remove text indent left menu */
            html:not(.mobile) #menu .level-2 a {
                text-indent: 16px;
            }

            /* Page title */
            html:not(.mobile) #title {
                top: 143px;
            }

            /* Inner content */
            html:not(.mobile) #inner {
                top: 110px;
                left: 380px;
                bottom: 0px;
                border-radius: 16px;
                height: 76vh;
                padding-bottom: 16px;
            }

            /* Adjust table row size */
            .table-list tbody[role=rowgroup] tr[role=row] {
                height: 54px;
            }

            /* Adjust table headers */
            .k-grid-header th.k-header {
                font-weight: normal;
            }

            /* Adjust table sort icons */
            .k-grid-header th.k-header .k-icon {
                left: -8px;
            }

            .k-grid-header .k-link .k-icon.k-i-sort-asc-sm,
            .k-grid-header .k-link .k-icon.k-i-sort-desc-sm {
                margin-top: 2px;
            }

            /* Adjust table headers */
            html:not(.mobile) .k-grid-header th.k-header,
            .k-filter-row th {
                padding-left: 0;
                font-weight: bold;
            }

            /* Make tiles a bit lighter */
            html body[class*="_tiles"] #context-bar .button {
                background-color: var(--lite-bg);
                border-radius: 0;
                border: 2px solid transparent;
                transition: none !important;
            }

            /* Different tile hover style */
            html body[class*="_tiles"] #context-bar .button:hover {
                background-color: var(--lite-bg);
                background: linear-gradient(135deg, #fff 0%, #f3f2f1 60%);
            }

            /* Layout content nicely */
            html:not(.mobile) .content {
                margin-left: 0px;
                padding-left: 0px;
                padding-right: 3px;
            }

            html:not(.mobile) #inner {
                padding-left: 20px !important;
            }

            /* context-bar dropdown */
            html:not(.mobile) #context-bar .button-with-dropdown-menu .dropdown-menu.active {
                top: auto !important;                 /* overschrijft de oude top */
                bottom: 44px !important;              /* menu 44px boven de knop */
                left: 0px !important;
                position: absolute;
            }

            html:not(.mobile) #context-bar .button-with-dropdown-menu .dropdown-menu.active:hover {
                background: #fff;
                box-shadow: 2px 0 5px 0 rgba(0, 0, 0, .16), 2px 0 10px 0 rgba(0, 0, 0, .12);
                opacity: 1 !important;
            }

            html:not(.mobile) #context-bar .button-with-dropdown-menu .dropdown-menu.active:after {
                top: auto !important;
                bottom: -10px !important;   /* zet pijltje onder het menu */
                left: 26px;
                -webkit-transform: rotate(180deg);
                transform: rotate(180deg);
            }


            html:not(.mobile) #context-bar .dropdown-menu-content .menu-item {
                text-shadow: none;
            }

            input:hover,
            .k-dropdown-wrap.k-state-default:hover,
            .k-picker-wrap.k-state-default:hover {
                border-color: var(--anwb-blauw) !important;
            }

            /* 
        * SMALLER DESKTOP SCREENS
        *
        * For desktop screens that are smaller than 1280px wide, make all elements a bit smaller so more stuff fits.
        */
            @media only screen and (max-width: 1280px) {

                /* Keep menu width same */
                html:not(.mobile) #menu .level-2 {
                    width: 270px;
                }

                /* Position user menu correctly */
                html:not(.mobile) #user {
                    top: 0;
                }

                /* Scale search correctly */
                html:not(.mobile) .search-box .simple-search {
                    height: 36px;
                }
            }

            /* 
        * SMALL DESKTOP SCREENS
        *
        * For desktop screens that are smaller than 1600px wide, make all elements a bit smaller so more stuff fits.
        */
            @media only screen and (max-width: 1600px) {

                /* Keep menu width same */
                html:not(.mobile) #menu .level-2 {
                    width: 270px;
                }

                /* Scale search correctly */
                html:not(.mobile) .search-box .simple-search {
                    height: 36px;
                }

                /* Adjust table sort icon positioning */
                .k-grid-header .k-link .k-icon.k-i-sort-asc-sm,
                .k-grid-header .k-link .k-icon.k-i-sort-desc-sm {
                    margin-top: 3px;
                }

                /* Make sure menu items keep their size */
                html:not(.mobile) #menu .level-2>li a {
                    line-height: 30px;
                    color: var(--header-color);
                    text-shadow: var(--text-shadow);
                }

                html:not(.mobile) #menu .level-2>li {
                    font-size: 16px;
                    line-height: 38px;
                }

                /* Keep search text size same */
                html:not(.mobile) .search-box .simple-search {
                    font-size: 16px;
                }

                /* Keep search and download icons same size */
                html:not(.mobile) [class^="icon-"]:before,
                html:not(.mobile) [class*=" icon-"]:before {
                    font-size: 16px;
                }

                html:not(.mobile) .icon-account:before {
                    font-size: 32px;
                }

                html:not(.mobile) #context-bar .dropdown-menu-content {
                    font-size: 13px;
                    line-height: 20px;
                }

                html:not(.mobile) #context-bar .dropdown-menu-content .menu-item {
                    font-size: 13px;
                    line-height: 22px;
                    height: 22px;
                    padding-top: 0;
                    padding-bottom: 0;
                }

                /* Keep context bar buttons same text size */
                html:not(.mobile) #context-bar button,
                html:not(.mobile) #context-bar button:active,
                html:not(.mobile) #context-bar button:focus,
                html:not(.mobile) #context-bar button:visited {
                    font-size: 16px;
                    height: auto;
                    line-height: 1.8;
                }



                /* Keep clear search same size */
                html:not(.mobile) #context-bar button.clear-search,
                html:not(.mobile) #context-bar button.clear-search:active,
                html:not(.mobile) #context-bar button.clear-search:focus,
                html:not(.mobile) #context-bar button.clear-search:visited {
                    height: 36px;
                }
            }


.trg-layout-vertical>.layout-cell {
    margin: 0px !important;
}


/* -------------------------------------------------------------------------------------------------
**************************************************
Styling added by Growrs
Added 08-2024 by Kimberley Eijskoot
**************************************************
--------------------------------------------------------------------------------------------------------*/

/*------------------------------------------------
Typography
-------------------------------------------------*/

h3.layout-cell-title {
    font-size: 25px !important;
    padding-left: 0 !important;
}

html h2, html h3 {
    font-size: 18px;
    margin-bottom:0;
    padding-bottom:0 !important;
}

html:not(.mobile) body:not(.page-Start_pagina):not([class*="page-Gegevens_opgeslagen"]):not(.page-Uploads):not(.page-Bedrijfsvragenformulier) .layout>.layout-cell>.layout-cell-title  {
    margin-left: 0px;
}

h2{
    font-size: 20px !important;
}

h2 + p,
h3 + p,
.content p:first-child
{
    margin-top:0;
}

.form-validation + .layout > .trg-control-html:first-child  {
    padding-top:0 !important;
}

h3>.text-value {
    font-size: 12px;
    color: #556E8C;
    font-family: "BerninoSans Regular", Calibri, open sans, sans-serif;
    font-weight: normal;
}

/* Set width of page introtext to max 75% of the page */
body:not(.page-Afronden) .layout > .trg-control-html:first-child .layout-cell-content,
.page-Company_overview1 .trg-control-html:nth-child(3) .layout-cell-content,
.page-Start_pagina .layout-cell-content,
.page-Code_is_verstuurd .layout-cell-content,
.page-Authenticate_succesvol .layout-cell-content,
.page-Gegevens_opgeslagen3 .layout-cell-content,
body.page-Afronden h3.layout-cell-title ~ .layout-cell-content > .trg-layout-vertical:first-child > .trg-control-html:first-child,
[class^="page-De_gegevens_zijn_ingestuurd_en_zijn_in_behandeling"] .layout-cell-content {
    color: #556E8C;
    padding-left: 6px;
}

body.page-Afronden h3.layout-cell-title ~ .layout-cell-content > .trg-layout-vertical:first-child > .trg-control-html:first-child {
    padding-left: 4px;
}

button {
    text-transform: none !important;
}




/* -----------------------------------------------
Form fields
-------------------------------------------------*/

.field .label .name.req::before,
.field .label .name.req:before {
    display: none;
}

.field .label .name.req::after,
.field .label .name.req:after {
    content: " *";
    color: #e51937;
}

.field .label .help {
    font-style: normal;
    color: #556E8C;
    text-align: left;
    width: 100%;
}

.field .label {
    display: block;
    text-align: left;
    width: 100%;
}

.field .label .name {
    text-align: left;
    width: auto;
}

.field {
    margin: 0 10px;
}

.field .validation {
    display:block;
    margin-left:0;
    line-height: 1.15;
    width: 100%;
    max-width: initial;
}

.field .editor .k-upload .k-upload-files .k-file-name-size-wrapper {
    margin-top: 5px;
    margin-left:0;
}

.trg-control-html {
    padding-left: 5px;
}

.k-link-increase,
.k-link-decrease  {
    height:50% !important;
}
.k-group {
    background-color: #F1F5F9;
    color:#556E8C;
}

/* -----------------------------------------------
User icon top right
-------------------------------------------------*/
#user .user-menu-btn {
    background-color: var(--anwb-geel);
    border-radius: 100%;
    width: 38px;
    height: 38px;
    background-image: url(https://cdn.triggre.com/shuttel/60523-profile.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100%;
    margin-top: 13px;
    margin-right: 15px;
}


#user .user-menu-btn .user-menu-icon:before {
    visibility: hidden;
}


/* -----------------------------------------------
Buttons
-------------------------------------------------*/
#context-bar button,
#context-bar button:active,
#context-bar button:focus,
#context-bar button:visited {
    background-color: var(--anwb-blauw);
    color: #fff;
    text-transform: none;
    text-shadow: var(--text-shadow);
    border-radius: 6px;
    border: solid 1px var(--anwb-blauw);
    padding-left: 20px !important;
    padding-right: 20px !important;
    padding-top: 3px !important;
    padding-bottom: 3px !important;

}

/* Context bar button hover color, including login button */







.page-Bestuurdersinformatieoverzicht #context-bar button:not(.hidden)+button:nth-child(5),
.page-UBOoverzicht #context-bar button:not(.hidden)+button:nth-child(5) {
    background-color: var(--anwb-blauw);
    color: #fff;
}

.page-Bestuurdersinformatieoverzicht #context-bar button:nth-child(4),
.page-UBOoverzicht #context-bar button:nth-child(4) {
    background-color: #FF2441;
    border-color: #FF2441;
}


html:not(.mobile) .page-Bestuurdersinformatieoverzicht #context-bar button:nth-child(4):hover,
html:not(.mobile) .page-Bestuurdersinformatieoverzicht #context-bar button:nth-child(4):active:hover,
html:not(.mobile) .page-Bestuurdersinformatieoverzicht #context-bar button:nth-child(4):focus,
html:not(.mobile) .page-Bestuurdersinformatieoverzicht #context-bar button:nth-child(4):focus:hover,
html:not(.mobile) .page-Bestuurdersinformatieoverzicht #context-bar button:nth-child(4):visited:hover,
html:not(.mobile) .page-UBOoverzicht #context-bar button:nth-child(4):hover,
html:not(.mobile) .page-UBOoverzicht #context-bar button:nth-child(4):active:hover,
html:not(.mobile) .page-UBOoverzicht #context-bar button:nth-child(4):focus,
html:not(.mobile) .page-UBOoverzicht #context-bar button:nth-child(4):focus:hover,
html:not(.mobile) .page-UBOoverzicht #context-bar button:nth-child(4):visited:hover {
    background-color: #AE2F3C;
    border-color: #AE2F3C;
    color: #fff;
}



/* -----------------------------------------------
Specific styling for "klant menu"
-------------------------------------------------*/
a[href$="/pages/klant"]+.level-2>li:nth-child(2):before,
a[href$="/klant/_welkom/start"]:before,
a[href$="/klant/_voortgang/overzicht"]:before,
a[href$="/klant/_voortgang/afronden"]:before {
    display: inline-block;
    width: 19px;
    height: 19px;
    content: "";
    vertical-align: middle;
    margin-top: -3px;
    margin-right: 8px;
    background-repeat: no-repeat;
}

a[href$="/klant/_welkom/start"]:before {
    background-image: url('https://cdn.triggre.com/shuttel/Home.png');
}

li.current>a[href$="/klant/_welkom/start"]:before {
    background-image: url('https://cdn.triggre.com/shuttel/Home-selected.png');
}

a[href$="/klant/_voortgang/overzicht"]:before {
    background-image: url('https://cdn.triggre.com/shuttel/aanmeldingsoverzicht.png');
}

li.current>a[href$="/klant/_voortgang/overzicht"]:before {
    background-image: url('https://cdn.triggre.com/shuttel/aanmeldingsoverzicht-selected.png');
}

a[href$="/klant/_voortgang/afronden"]:before {
    background-image: url('https://cdn.triggre.com/shuttel/check.png');
}

li.current>a[href$="/klant/_voortgang/afronden"]:before {
    background-image: url('https://cdn.triggre.com/shuttel/check-selected.png');
}

a[href$="/pages/klant"]+.level-2>li:nth-child(2):before {
    margin-left: 8px;
    background-image: url('https://cdn.triggre.com/shuttel/My_info.png');
}

/* move table header text to right */


html:not(.mobile) .k-grid-header {
    margin-left: 12px;
}

.mobile .k-grid-header {
    margin-left: -6px;
}


/* -----------------------------------------------
Specific styling for pages
-------------------------------------------------*/
.page-Bedrijfsdetailsformulier .editor,
.page-Bedrijfsdetailsformulier .editor>input,
.page-Bedrijfsdetailsformulier .editor>textarea {
    width: 100% !important;
}

.page-Bedrijfsdetailsformulier .form-validation+.trg-layout-vertical>.layout-cell:not(:last-of-type, :nth-child(3)),
.page-Uploads .form-validation+.trg-layout-vertical>.layout-cell:not(:last-of-type),
.page-Bedrijfsvragenformulier .form-validation+.trg-layout-vertical>.layout-cell:not(:last-of-type),
.page-Bedrijfsomschrijvingformulier .form-validation+.trg-layout-vertical>.layout-cell:not(:last-of-type),
.page-Bankdetailsformulier .form-validation+.trg-layout-vertical>.layout-cell:not(:last-of-type),
.page-Afronden .layout-cell-title+.layout-cell-content>.layout>.layout-cell:not(:nth-child(3),:nth-child(4),:nth-child(6),:nth-child(7),:nth-child(9), :nth-child(10),:nth-child(12),:nth-child(13),:nth-child(15),:nth-child(16),:nth-child(17),:nth-child(19), :nth-child(20),:nth-child(22), :nth-child(23), :last-child),
.page-Specifieke_bestuurdersinformatie_invullen .form-validation+.trg-layout-vertical>.layout-cell:not(:last-of-type),
.page-Wijzigen_bestuurder_toezicht_nee_vervolgd_nee .form-validation+.trg-layout-vertical>.layout-cell:not(:last-of-type),
.page-Wijzigen_bestuurder_toezicht_ja_vervolgd_nee .form-validation+.trg-layout-vertical>.layout-cell:not(:last-of-type),
.page-Wijzigen_bestuurder_toezicht_ja_vervolgd_ja .form-validation+.trg-layout-vertical>.layout-cell:not(:last-of-type),
.page-Wijzigen_bestuurder_toezicht_nee_vervolgd_ja .form-validation+.trg-layout-vertical>.layout-cell:not(:last-of-type),
.page-Wijzigen_bestuurder_toezicht_nee_vervolgd_nee .form-validation+.trg-layout-vertical>.layout-cell:not(:last-of-type),
.page-Specifieke_bestuurdersinformatie_wijzigen .form-validation+.trg-layout-vertical>.layout-cell:not(:last-of-type),
.page-Toevoegen_UBO .form-validation+.trg-layout-vertical>.layout-cell:not(:last-of-type, :first-of-type) {
    border-bottom: 2px solid #F1F5F9;
}

.page-Bedrijfsdetailsformulier .form-validation+.trg-layout-vertical>.layout-cell:nth-child(4),
.page-Bedrijfsomschrijvingformulier .form-validation+.trg-layout-vertical>.layout-cell:nth-child(2),
.page-Toevoegen_UBO .form-validation+.trg-layout-vertical>.layout-cell:not(:last-of-type) {
    padding-bottom: 16px;
}

.page-Bedrijfsdetailsformulier .form-validation+.trg-layout-vertical>.layout-cell:nth-child(3),
.page-Bedrijfsomschrijvingformulier .form-validation+.trg-layout-vertical>.layout-cell:last-of-type,
.page-Bedrijfsomschrijvingformulier .form-validation+.trg-layout-vertical>.layout-cell:nth-child(2),
.page-Toevoegen_UBO .form-validation+.trg-layout-vertical>.layout-cell:last-of-type {
    padding-top: 16px;
}

.page-Bedrijfsdetailsformulier .form-validation+.trg-layout-vertical>.layout-cell:not(:first-child, :nth-child(3),:nth-child(4)),
.page-Uploads .form-validation+.trg-layout-vertical>.layout-cell,
.page-Bedrijfsvragenformulier .form-validation+.trg-layout-vertical>.layout-cell,
.page-Bankdetailsformulier .form-validation+.trg-layout-vertical>.layout-cell:not(:first-child),
.page-Specifieke_bestuurdersinformatie_invullen .form-validation+.trg-layout-vertical>.layout-cell,
.page-Wijzigen_bestuurder_toezicht_nee_vervolgd_nee .form-validation+.trg-layout-vertical>.layout-cell,
.page-Wijzigen_bestuurder_toezicht_ja_vervolgd_nee .form-validation+.trg-layout-vertical>.layout-cell,
.page-Wijzigen_bestuurder_toezicht_nee_vervolgd_ja .form-validation+.trg-layout-vertical>.layout-cell,
.page-Wijzigen_bestuurder_toezicht_ja_vervolgd_ja .form-validation+.trg-layout-vertical>.layout-cell,
.page-Wijzigen_bestuurder_toezicht_nee_vervolgd_nee .form-validation+.trg-layout-vertical>.layout-cell,
.page-Specifieke_bestuurdersinformatie_wijzigen .form-validation+.trg-layout-vertical>.layout-cell,
.page-Afronden .layout-cell-title+.layout-cell-content>.layout>.layout-cell:not(:first-child, :nth-child(3),:nth-child(4),:nth-child(6),:nth-child(7),:nth-child(9), :nth-child(10),:nth-child(12),:nth-child(13),:nth-child(15),:nth-child(16),:nth-child(17),:nth-child(19), :nth-child(20),:nth-child(22), :nth-child(23), :last-child) {
    padding: 16px 0;
}


.page-Bedrijfsdetailsformulier .form-validation+.trg-layout-vertical>.layout-cell:first-of-type .layout>.layout-cell:last-child .help {
    visibility: hidden;
}

@media screen and (min-width: 1308px) {

    .page-Bedrijfsvragenformulier .form-validation+.trg-layout-vertical>.layout-cell .trg-layout-horizontal>.layout-cell:last-child .label,
    .page-Bankdetailsformulier .form-validation+.trg-layout-vertical>.layout-cell:last-of-type .trg-layout-horizontal>.layout-cell:last-child .label,
    .page-Specifieke_bestuurdersinformatie_invullen .form-validation+.trg-layout-vertical>.layout-cell:last-of-type .trg-layout-horizontal>.layout-cell:last-child .layout-cell .label,
    .page-Specifieke_bestuurdersinformatie_invullen .form-validation+.trg-layout-vertical>.layout-cell:first-of-type .trg-layout-horizontal>.layout-cell:not(:first-child) .label,
    .page-Specifieke_bestuurdersinformatie_wijzigen .form-validation+.trg-layout-vertical>.layout-cell:last-of-type .trg-layout-horizontal>.layout-cell:last-child .layout-cell .label,
    .page-Specifieke_bestuurdersinformatie_wijzigen .form-validation+.trg-layout-vertical>.layout-cell:first-of-type .trg-layout-horizontal>.layout-cell:not(:first-child) .label,
    .page-Wijzigen_bestuurder_toezicht_ja_vervolgd_nee .form-validation+.trg-layout-vertical>.layout-cell:last-of-type .trg-layout-horizontal>.layout-cell:last-child .layout-cell .label,
    .page-Wijzigen_bestuurder_toezicht_ja_vervolgd_nee .form-validation+.trg-layout-vertical>.layout-cell:first-of-type .trg-layout-horizontal>.layout-cell:not(:first-child) .label,
    .page-Wijzigen_bestuurder_toezicht_ja_vervolgd_ja .form-validation+.trg-layout-vertical>.layout-cell:last-of-type .trg-layout-horizontal>.layout-cell:last-child .layout-cell:first-child .label,
    .page-Wijzigen_bestuurder_toezicht_ja_vervolgd_ja .form-validation+.trg-layout-vertical>.layout-cell:first-of-type .trg-layout-horizontal>.layout-cell:not(:first-child) .label,
    .page-Wijzigen_bestuurder_toezicht_nee_vervolgd_ja .form-validation+.trg-layout-vertical>.layout-cell:last-of-type .trg-layout-horizontal>.layout-cell:last-child .layout-cell .label,
    .page-Wijzigen_bestuurder_toezicht_nee_vervolgd_ja .form-validation+.trg-layout-vertical>.layout-cell:first-of-type .trg-layout-horizontal>.layout-cell:not(:first-child) .label,
    .page-Wijzigen_bestuurder_toezicht_nee_vervolgd_nee .form-validation+.trg-layout-vertical>.layout-cell:last-of-type .trg-layout-horizontal>.layout-cell:last-child .layout-cell .label,
    .page-Wijzigen_bestuurder_toezicht_nee_vervolgd_nee .form-validation+.trg-layout-vertical>.layout-cell:first-of-type .trg-layout-horizontal>.layout-cell:not(:first-child) .label,
    .page-Toevoegen_UBO .form-validation+.trg-layout-vertical>.layout-cell:nth-child(2) .trg-layout-horizontal>.layout-cell:not(:first-child) .layout-cell:first-child .label,
    .page-Bewerken_UBO .form-validation+.trg-layout-vertical>.layout-cell:nth-child(2) .trg-layout-horizontal>.layout-cell:not(:first-child) .layout-cell:first-child .label,
    .page-Bedrijfsomschrijvingformulier .form-validation+.trg-layout-vertical>.layout-cell:nth-child(2) .trg-layout-horizontal>.layout-cell:last-child .layout-cell:first-child .label,
    .page-Bedrijfsomschrijvingformulier .form-validation+.trg-layout-vertical>.layout-cell:first-of-type .trg-layout-horizontal>.layout-cell:last-child .layout-cell:first-child .label {
        margin-bottom: 21px;
    }
    .page-Bedrijfsvragenformulier .form-validation+.trg-layout-vertical>.layout-cell:last-child .trg-layout-horizontal>.layout-cell:last-child .layout > .layout-cell:not(:nth-child(2)) .label,
    .page-Toevoegen_UBO .form-validation+.trg-layout-vertical>.layout-cell:last-of-type .trg-layout-horizontal>.layout-cell:not(:first-child) .label,
    .page-Bewerken_UBO .form-validation+.trg-layout-vertical>.layout-cell:last-of-type .trg-layout-horizontal>.layout-cell:not(:first-child) .label
   {
        margin-bottom: 42px;
    }

    .page-Specifieke_bestuurdersinformatie_invullen .form-validation+.trg-layout-vertical>.layout-cell:last-of-type .trg-layout-horizontal>.layout-cell:last-child .layout-cell:last-child .label,
    .page-Wijzigen_bestuurder_toezicht_nee_vervolgd_nee .form-validation+.trg-layout-vertical>.layout-cell:last-of-type .trg-layout-horizontal>.layout-cell:last-child .layout-cell:last-child .label,
    .page-Wijzigen_bestuurder_toezicht_ja_vervolgd_nee .form-validation+.trg-layout-vertical>.layout-cell:last-of-type .trg-layout-horizontal>.layout-cell:last-child .layout-cell:last-child .label,
    .page-Wijzigen_bestuurder_toezicht_ja_vervolgd_ja .form-validation+.trg-layout-vertical>.layout-cell:last-of-type .trg-layout-horizontal>.layout-cell:last-child .layout-cell:last-child .label,
    .page-Wijzigen_bestuurder_toezicht_nee_vervolgd_ja .form-validation+.trg-layout-vertical>.layout-cell:last-of-type .trg-layout-horizontal>.layout-cell:last-child .layout-cell:last-child .label,
    .page-Wijzigen_bestuurder_toezicht_nee_vervolgd_nee .form-validation+.trg-layout-vertical>.layout-cell:last-of-type .trg-layout-horizontal>.layout-cell:last-child .layout-cell:last-child .label,
    .page-Specifieke_bestuurdersinformatie_wijzigen .form-validation+.trg-layout-vertical>.layout-cell:last-of-type .trg-layout-horizontal>.layout-cell:last-child .layout-cell:last-child .label {
        margin-top: 10px;
    }

    .page-Bedrijfsvragenformulier .form-validation+.trg-layout-vertical>.layout-cell:last-of-type .trg-layout-horizontal>.layout-cell:last-child .layout>.layout-cell:not(:first-child) .label {
        margin-top: 11px;
    }
}

@media screen and (min-width: 1950px) {
    .page-Toevoegen_UBO .form-validation+.trg-layout-vertical>.layout-cell:last-of-type .trg-layout-horizontal>.layout-cell:not(:first-child) .label,
    .page-Bewerken_UBO .form-validation+.trg-layout-vertical>.layout-cell:last-of-type .trg-layout-horizontal>.layout-cell:not(:first-child) .label {
        margin-bottom:21px;
    }
}

.page-Afronden a[data-route] {
    display: inline-block;
    background-color: #FFF;
    color: var(--anwb-blauw);
    text-transform: none;
    border-radius: 38px;
    border: solid 1px var(--anwb-blauw);
    text-transform: uppercase;
    font-weight: bold;
    font-family: "BerninoSans Bold", Calibri, open sans, sans-serif;
    padding: 6px 16px;
}

html:not(.mobile) .page-Afronden a[data-route]:hover {
    background-color: #fff;
    color: var(--anwb-blauw);
    border-color: var(--blauw);
}

.page-Afronden ul li strong{
    color:#556E8C;
}

.page-Bankdetailsformulier .field .editor,
.page-Bankdetailsformulier .field.type-text .editor input[type=text],
.page-Bankdetailsformulier .field.type-select .editor .k-dropdown {
    width:100% !important;
}

.page-Company_overview1 ol {
    padding-left:15px;
    width:300px;
}

.page-Company_overview1 ol .text-value {
    float: right;
    width: 50%;
}

.page-Company_overview1 ol .text-value:after {
    content:'';
    display:block;
    clear:both;
}

/* -------------------------------------------------------------------------------------------------
**************************************************
END Styling added by Growrs
Kimberley Eijskoot
**************************************************
--------------------------------------------------------------------------------------------------------*/

/* -------------------------------------------------------------------------------------------------
**************************************************
Styling added by Growrs
Added 01-2025 by Nick Callewaert
**************************************************
--------------------------------------------------------------------------------------------------------*/
.text-value{
    color: var(--anwb-blauw);
}

/* buttons on the left*/
html:not(.mobile) #menu .level-2 a, html:not(.mobile) #menu .level-2 a:link, html:not(.mobile) #menu .level-2 a:visited, html:not(.mobile) #menu .level-2 a:focus{
    font-size: 18px;
    line-height: 50px;
}



/* Startpagina_2 button positioning */
.page-Startpagina_2 #context-bar button {
    margin-top: 15px;
}


.page-Startpagina_2 #context-bar button:hover{
    background-color: #1F3B69 !important;
    transform: none !important;
}

/* kleur van verstuur gegevens knop aanpassen */
.page-Selecteer_de_correcte_UBO #context-bar button:nth-child(6) {
    background-color: var(--anwb-geel);
    border: none;
    color: var(--anwb-blauw);
    margin-top: 15px;
}

.page-Selecteer_de_correcte_UBO #context-bar button:nth-child(6):hover,
.page-Selecteer_de_correcte_UBO #context-bar button:nth-child(6):focus,
.page-Selecteer_de_correcte_UBO #context-bar button:nth-child(6):active {
    background-color: #E0B400;
    border: none;
    color: var(--anwb-blauw);
}

/* size text labels above table*/
html:not(.mobile) .k-grid-header th.k-header, .k-filter-row th{
    font-size: 16px;
    font-weight: 500;
    
}
/* color text labels above table*/
.k-grid-header .k-header, .k-grid-header .k-header .k-link, .k-grid-header .k-link, .k-grid-header .k-link:link{
    color: var(--anwb-blauw) !important;
}

/* bigger logo */
#header #logo a{
    height: 56px
}

#context-bar .button button:active:hover, #context-bar button:focus, #context-bar button:focus:hover, #context-bar button:hover, #context-bar button:visited:hover{
    background-color: #1F3B69;
    border: 1px solid #1F3B69;
    
}


#context-bar{
    height: 70px;
}



#user.logged-in .user-menu-btn .drop-down .menu-item:hover, 
#user.logged-in .user-menu-btn .drop-down .user-email:hover, 
#user.logged-in .user-menu-btn .drop-down .user-name:hover {
    color: var(--anwb-blauw); /* Pas de hover-kleur aan naar wens */
}

#context-bar button {
    transition: transform 0.1s ease-in-out;
    margin-top: 20px;
}
#user .user-menu-btn .drop-down .user-menu-header .user-name{
    color: var(--anwb-blauw);
}

#user .user-menu-btn .drop-down .user-menu-footer .auth {
    color: var(--anwb-blauw);
} 

#user .user-menu-btn .drop-down .user-menu-footer .auth:hover {
    color: var(--anwb-blauw);
    text-decoration: underline;
    transition: color 0.2s ease-in-out;
}


html:not(.mobile) #menu .level-2 > li:first-child > .level-3 > li > a.routed[title="Nieuwe link aanvragen"],
html:not(.mobile) #menu .level-2 > li:nth-child(3) > .level-3 > li > a.routed[title="Nieuwe link aanvragen"],
html:not(.mobile) #menu .level-2 > li:first-child > .level-3 > li > a.routed[title="Download gegevens"],
html:not(.mobile) #menu .level-2 > li:nth-child(3) > .level-3 > li > a.routed[title="Download gegevens"] {
  visibility: hidden;
  }

.layout-cell-content{
    margin-left: -2px !important;
  }



/* Zorg dat elke .field zijn eigen hoogte behoudt */
.field.trg-named-view.trg-detail {
  overflow: hidden;             /* clear floats automatisch */
  margin-bottom: 0.5rem;        /* ruimte tussen de rijen */
}

/* 2 Label links, vaste breedte */
.field.trg-named-view.trg-detail .label {
  float: left !important;
  width: 160px !important;      /* PAS AAN naar de breedte van je langste label */
  font-weight: bold !important;
  margin: 0 !important;
  padding: 0 !important;
  white-space: nowrap !important;
}

/* 3 View opvullen tot precies onder de labels */
.field.trg-named-view.trg-detail .view {
  display: block !important;
  margin: 0 !important;
  padding-left: 250px !important;  /* exact dezelfde 160px */
  text-align: left !important;
}

.page-Controleer_de_UBO_gegevens #context-bar .scroller.buttons .content.buttons-inner > button.trg-action-btn:nth-child(1),
.page-Toevoegen_UBO #context-bar .scroller.buttons .content.buttons-inner > button.trg-action-btn:nth-child(1),
.page-Versturen_gegevens #context-bar .scroller.buttons .content.buttons-inner > button.trg-action-btn:nth-child(1),
.page-Handmatige_controle #context-bar .scroller.buttons .content.buttons-inner > button.trg-action-btn:nth-child(1),
.page-Bankgegevens #context-bar .scroller.buttons .content.buttons-inner > button.trg-action-btn:nth-child(1), 
.page-Vragen_bankgegevens #context-bar .scroller.buttons .content.buttons-inner > button.trg-action-btn:nth-child(1),
.page-Controleer_de_bank_gegevens0 #context-bar .scroller.buttons .content.buttons-inner > button.trg-action-btn:nth-child(1),
.page-Alle_gegevens_zijn_ingevuld #context-bar .scroller.buttons .content.buttons-inner > button.trg-action-btn:nth-child(1),
.page-Download_ingevulde_gegevens #context-bar .scroller.buttons .content.buttons-inner > button.trg-action-btn:nth-child(1),
.page-Selecteer_de_UBO_voor_een_nieuwe_URL #context-bar .scroller.buttons .content.buttons-inner > button.trg-action-btn:nth-child(2)
{
  background-color: white !important;
  color: var(--anwb-blauw) !important;
}

/* Align action-buttons under the card & add spacing */

/* 1) Reserveer ruimte onder de card zodat hij niet onder de bar schiet */
#inner {
  /* minimaal de hoogte van de context-bar (70px) + 16px breathing room */
  padding-bottom: 96px;  
}

/* 2) Zorg dat de buttons altijd onder de content vallen */
/* Op desktop matcht de padding-left van de bar de left-offset van #inner */
/* Op mobile draait de bar full-width zonder extra padding */
#context-bar {
  background-color: var(--lite-bg); /* behoud je bestaande achtergrond */
}
html:not(.mobile) #context-bar {
  padding-left: 320px !important;   /* dezelfde left-offset als #inner */
  padding-right: 16px !important;   /* gelijk aan #inner's right padding */
}
html.only-mobile #context-bar,
html.mobile #context-bar {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* 3) Optioneel: een klein extra gap tussen card en bar
     als je een fijne scheiding wil in plaats van direct tegen elkaar */
#inner .layout-cell-content {
  margin-bottom: 16px;  /* lucht tussen content-card en bar */
}

    /* Content */
    body.page-Overzicht span:nth-of-type(odd) {
        background-color: #e6f0fa;
        color: #003087;
        font-weight: 600;
        font-size: 1rem;
        padding: 0.35rem 0.9rem;
        border-radius: 999px;
        min-width: 48px;
        text-align: center;
  }
      
  .chart.k-chart {
    position: relative;
    top: -79px; /* pulls it up 20 pixels */
    left: -60px;
  }

  label {
  font-weight: 600;
  color: #000307;
  font-size: 16px; 
}

/* Algemene voorwaarden checkbox*/

/* Zet de checkbox + tekst naast elkaar */
body.page-Algemene_voorwaarden .field.trg-input-checkbox .editor {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 80% !important;
  padding-bottom: 9%;
}

/* Verberg de originele label boven de checkbox */
body.page-Algemene_voorwaarden .field.trg-input-checkbox .label {
  display: none;
}

/* Voeg nieuwe tekst toe naast de checkbox */
body.page-Algemene_voorwaarden .field.trg-input-checkbox .editor::after {
  content: "Ik ga akkoord met bovenstaande voorwaarden en verklaar dat ik de gegevens naar waarheid zal invullen.";
  font-size: 16px;
  color: #000307;
  margin-left: 0.5rem;
  line-height: 1.5;
  padding-top: 4px;
}
/* Verwijder extra ruimte rond de editor toevoeging 14-10-2025 */
body.page-Algemene_voorwaarden .field.trg-input-checkbox {
    position: relative;
    padding-bottom: 0;
}
body.page-Algemene_voorwaarden .field.trg-input-checkbox .editor {
    margin-bottom: 0;
    padding-bottom: 0;
}
/* Breng de validation dichter bij de tekst erboven */
body.page-Algemene_voorwaarden .field.trg-input-checkbox .validation {
    margin-top: 0px; /* Pas aan tussen -10px en -5px voor gewenste afstand */
    margin-left: 0px
}
body.page-Keur_UBO_gegevens 
  .trg-footer .content.buttons-inner 
  button.trg-action-btn:nth-of-type(2) {
  
  background-color: white !important;
  color: #c20000 !important; /* helder ANWB-rood */
  border: 2px solid #c20000 !important;
  font-weight: bold;
}

body.page-Keur_UBO_gegevens 
  .trg-footer .content.buttons-inner 
  button.trg-action-btn:nth-of-type(1) {
  
  background-color: white !important;
  color: var(--anwb-blauw) !important; /* helder ANWB-rood */
  border: 2px solid var(--anwb-blauw) !important;
  font-weight: bold;
}

/* Hover effect optioneel */
body.page-Keur_UBO_gegevens
  .trg-footer .content.buttons-inner 
  button.trg-action-btn:nth-of-type(2):hover {
  
  background-color: #ffe5e5 !important;
  color: #a00000 !important;
  border-color: #a00000 !important;
  cursor: pointer;
}


body.page-Toevoegen_UBO .text-value {
    color: #000307;
}

body.page-De_gegevens_zijn_verstuurd_voor_controle
 .text-value {
    color: #c20000 !important;
}

/* Zet de checkbox + tekst naast elkaar */
body.page-Controleer_gegevens_UBO .field.trg-input-checkbox .editor {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 80% !important;
}

/* Verberg de originele label boven de checkbox */
body.page-Controleer_gegevens_UBO .field.trg-input-checkbox .label {
  display: none;
}

/* Voeg nieuwe tekst toe naast de checkbox */
body.page-Controleer_gegevens_UBO .field.trg-input-checkbox .editor::after {
  content: "De gegevens zijn correct en mogen worden verzonden.";
  font-size: 15.5px;
  color: #000307;
  margin-left: 0.5rem;
  line-height: 1.5;
  padding-top: 4px;
}

.field.type-boolean {
  display: flex;
  align-items: center;
  flex-direction: row-reverse;     /* label stays right of checkbox */
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

/* Validation message spans full width */
.field.type-boolean .validation {
  flex-basis: 100%;
  font-size: 0.95rem;
  color: var(--anwb-rood);
  margin-left: 2.1rem;
}

/* Keep spacing tight and clean */
.field.type-boolean .label,
.field.type-boolean .editor {
  margin: 0;
  padding: 0;
}

/* Tweak checkbox size if needed */
.field.type-boolean .editor input[type="checkbox"] {
  width: 16px;
  height: 16px;
  cursor: pointer;
}




/* Wisselende rijkleur voor rust */
.k-grid-content tr:nth-child(odd) td {
  background-color: #f7f9fc;
}

/* Sticky header bij veel UBO's */
.k-grid-header th {
  position: sticky;
  top: 0;
  z-index: 1;
}


/* Tabelcellen netjes opmaken */
.k-grid-content table {
  width: 100%;
  border-collapse: collapse;
  color: #002f6c;
}

.k-grid-content th {
  background-color: #ebf2fa;
  font-weight: bold;
  text-align: left;
}

.k-grid-content td {
  background-color: white;
  border-bottom: 1px solid #d6e3f3;
  padding-top: 15px;
  padding-bottom: 15px;
}

/* Selected row background and text */
tr.k-state-selected,
tr.k-state-selected td {
  background-color: #d6e3f3 !important; /* light blue */
  color: #002f6c !important;            /* dark readable text */
}

.k-grid td[role="gridcell"] span {
  font-size: 16px;
}


/* Styling voor alle "Details bekijken" links in de stat divs */
/* BEHALVE op de dashboard/overzicht pagina */
body:not(.page-Overzicht) .stat a,
body:not(.page-Overzicht) .stat .details-link,
body:not(.page-Overzicht) .routed.with-context {
    display: inline-block !important;
    background-color: #FFC917 !important;
    color: #003D86 !important;
    border-radius: 6px !important;
    border: 2px solid #FFC917 !important;
    font-weight: bold !important;
    padding: 10px 20px !important;
    text-align: center !important;
    transition: all 0.2s !important;
    text-decoration: none !important;
    min-width: 150px !important;
}

body:not(.page-Dashboard):not(.page-Overzicht) .stat a:hover,
body:not(.page-Dashboard):not(.page-Overzicht) .stat .details-link:hover,
body:not(.page-Dashboard):not(.page-Overzicht) .routed.with-context:hover {
    background-color: #003D86 !important;
    color: #ffffff !important;
    border-color: #003D86 !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 8px rgba(255, 201, 23, 0.3) !important;
    text-decoration: none !important;
}

/* rerouting URL text, en verwijder en replace met juiste text 'Details bekijken' op klant_dossier pagina's */
body.page-Klant_dossier .routed.with-context,
body.page-Klant_dossier_beoordeling_route .routed.with-context,
body.page-Klant_dossier_afgekeurd_route .routed.with-context,
body.page-Klant_dossier_goedgekeurd_route .routed.with-context,
body.page-Klant_dossier_bezig_route .routed.with-context {
    font-size: 0 !important;
    line-height: 0 !important;
}

body.page-Klant_dossier .routed.with-context::after,
body.page-Klant_dossier_beoordeling_route .routed.with-context::after,
body.page-Klant_dossier_afgekeurd_route .routed.with-context::after,
body.page-Klant_dossier_goedgekeurd_route .routed.with-context::after,
body.page-Klant_dossier_bezig_route .routed.with-context::after {
    content: "Details bekijken" !important;
    font-size: 14px !important;
    line-height: normal !important;
    font-family: ClanPro, sans-serif !important;
}

.k-grid-content{
    height: auto !important;
}

.table-list.trg-col-table.k-grid.k-widget.k-grid-display-block{
    height: auto !important;
}
div.layout-cell-content{
    padding-left: 0 !important;
}