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


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


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



@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
        #user > .auth {
        color: #67686e;
        }
}


/* new base*/
@media all {
    /* 
 * TRIGGRE DEFAULT TEMPLATE - YELLOW
 * 
 * This is the default Triggre CSS template, yellow edition. The following colors can be
 * replaced to quickly create a different colored design (make sure to replace both the
 * HEX and the RGB ones if indicated):
 * 
 *      Yellow          #F1D341 - 241,211,65
 *      Dark Yellow     #DDBB16 
 *
 * This design uses a different logo than the one set in the designer; also it uses an image
 * on error pages and vertical scroll forms. To change the 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
 */



    /* 
 * TRIGGRE FONT DEFINITIONS
 * 
 * These are the default fonts that Triggre uses. Proxima Nova Semibold for headings, and
 * Roboto regular for normal text and buttons.
 *
 */

    /* Proxima Nova */
    @font-face {
        font-family: 'Proxima Nova';
        src: url('https://cdn.triggre.com/triggre/fonts/Proxima-Nova/ProximaNova-SemiboldIt.woff2') format('woff2'), url('https://cdn.triggre.com/triggre/fonts/Proxima-Nova/ProximaNova-SemiboldIt.woff') format('woff'), url('https://cdn.triggre.com/triggre/fonts/Proxima-Nova/ProximaNova-SemiboldIt.ttf') format('truetype');
        font-weight: 600;
        font-style: italic;
    }

    @font-face {
        font-family: 'Proxima Nova';
        src: url('https://cdn.triggre.com/triggre/fonts/Proxima-Nova/ProximaNova-Semibold.woff2') format('woff2'), url('https://cdn.triggre.com/triggre/fonts/Proxima-Nova/ProximaNova-Semibold.woff') format('woff'), url('https://cdn.triggre.com/triggre/fonts/Proxima-Nova/ProximaNova-Semibold.ttf') format('truetype');
        font-weight: 600;
        font-style: normal;
    }

    @font-face {
        font-family: 'Proxima Nova';
        src: url('https://cdn.triggre.com/triggre/fonts/Proxima-Nova/ProximaNova-Regular.woff2') format('woff2'), url('https://cdn.triggre.com/triggre/fonts/Proxima-Nova/ProximaNova-Regular.woff') format('woff'), url('https://cdn.triggre.com/triggre/fonts/Proxima-Nova/ProximaNova-Regular.ttf') format('truetype');
        font-weight: normal;
        font-style: normal;
    }

    /* Roboto */
    @font-face {
        font-family: 'Roboto';
        src: url('https://cdn.triggre.com/triggre/fonts/Roboto/hinted-Roboto-Bold.eot');
        font-weight: bold;
        font-style: normal;
    }

    @font-face {
        font-family: 'Roboto';
        src: url('https://cdn.triggre.com/triggre/fonts/Roboto/hinted-Roboto-Light.eot');
        font-weight: 300;
        font-style: normal;
    }

    @font-face {
        font-family: 'Roboto';
        src: url('https://cdn.triggre.com/triggre/fonts/Roboto/hinted-Roboto-Medium.eot');
        font-weight: 500;
        font-style: normal;
    }

    @font-face {
        font-family: 'Roboto';
        src: url('https://cdn.triggre.com/triggre/fonts/Roboto/hinted-Roboto-Regular.eot');
        font-weight: normal;
        font-style: normal;
    }

    /* Set fonts */
    body,
    html,
    pre {
        font: normal 16px / 20px "Roboto",sans-serif;
    }

    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        font-family: "Proxima Nova",sans-serif;
        font-weight: 600;
        text-transform: none;
    }

    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: "Roboto",sans-serif;
    }

    /* Menu font size and weight */
    html:not(.mobile) #menu .level-1 > li > a {
        font-size: 18px;
        font-family: "Proxima Nova", Arial, sans-serif;
        font-weight: 600;
    }

    #menu .level-2 > li {
        font-family: "Proxima Nova",sans-serif;
        font-weight: 600;
    }

    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;
        font-family: "Roboto", sans-serif;
    }

    /* Page title font size */
    #title {
        font-family: "Proxima Nova", sans-serif;
        font-weight: 600;
    }

    /* Font for the main page title on vertical scroll pages */
    body[class*="_vscroll"] #menu > ul::before,
    .error-page #menu > ul::before {
        font-family: 'Proxima Nova', Arial, Tahoma;
    }

    /* Font for the page sub title on vertical scroll pages */
    body[class*="_vscroll"] #menu > ul::after,
    .error-page #menu > ul::after {
        font-family: 'Proxima Nova', Arial, Tahoma;
    }

    /* Font for the login button on an error page */
    .error-page #user a.login {
        font-family: "Proxima Nova", sans-serif;
    }


    /* 
 * TRIGGRE GENERAL DEFINITIONS
 * 
 * The following definitions are general rules for widgets, buttons, etc. These form
 * the base of the 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;
    }

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

    /* Authentication screen background*/
    #auth .decorator {
        background: radial-gradient(ellipse at center, rgba(241,211,65,0.5) 0, #f1d441 100%);
    }

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

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

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

        /* Authentication screen main button styles */
        #auth .auth-control .footer .main {
            background: #f1d441;
            color: #000;
            border-radius: 6px;
            padding: 14px 26px 13px 26px;
            font-weight: 600;
            font-size: 18px;
            height: auto;
            line-height: 20px;
            margin-right: 12px;
        }

            #auth .auth-control .footer .main:hover {
                background: #f1d441;
                color: #000;
                opacity: 0.9;
            }

        /* Color for the 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 #f1d441;
            box-shadow: 0 1px 0 0 #f1d441;
        }

            #auth .auth-control .content .field input:focus + label,
            #auth .auth-control .content .field input.filled + label {
                color: #DDBB16;
            }

    /*
 * Use normal buttons on mobile app and move mobile search to the top
 */

    /* 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 the middle */
    .mobile #context-bar > .buttons button {
        margin-bottom: 24px;
        margin-top: 10px;
    }
    /* Allow the context bar to scroll horizontally */
    .mobile #context-bar > .buttons {
        display: inline-block;
        width: 100%;
        white-space: nowrap;
        padding-left: 8px;
        padding-right: 8px;
        height: 56px;
        line-height: 56px;
        /*! padding: 0; */
    }
    /* Remove horizontal scroll bar for buttons in context bar */
    .mobile body:not([class*="_tiles"]) #context-bar > .buttons .buttons-inner {
        overflow: hidden;
        height: 56px;
    }
    /* Make the search box dark gray */
    .mobile #context-bar.search-box-opened {
        background: #34363E;
    }
    /* Place the opened search box above the context bar and make it dark grey */
    .mobile .search-box.opened {
        top: -64px;
        background: #2c2d35;
    }
    /* Move the mobile search button to the top of the 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 the 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;
        }
    /* Make the buttons white, because of the dark background */
    .mobile .search-box .open-advanced,
    .mobile .search-box .close-search {
        color: #fff;
    }
    /* Make sure the simple search bar fills the width of the 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: #2c2d35;
    }

        .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: #DDBB16;
    }

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

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

    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 #f1d441;
        }

    #menu a:hover {
        color: #f1d441;
    }

    /* Mobile logout link color */
    .mobile #header.menu-shown #user .logout {
        color: #f1d441;
    }

    /* User color profile */
    #user .user-menu-btn .user-menu-icon {
        color: #168cd9;
    }
    
    /* User hover color */
    #user .user-menu-btn .user-menu-icon:hover {
        color: #555;
    }

    /* User name color */
    #user .user-menu-btn .drop-down .user-menu-header .user-name {
        color: #168cd9;
    }

    /* Logout link hover color */
    #user .user-menu-btn .drop-down .user-menu-footer .auth:hover {
        color: #DDBB16;
    }

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

    /* Context bar button color, including login button */
    #context-bar button,
    #context-bar button:active,
    #context-bar button:focus,
    #context-bar button:visited,
    #auth .auth-control .footer .btn {
        background-color: #f1d441;
        color: #fff;
        text-transform: none;
    }

        /* Context bar button hover color, including login button */
        #context-bar button:hover,
        #context-bar button:active:hover,
        #context-bar button:focus,
        #context-bar button:focus:hover,
        #context-bar button:visited:hover,
        #auth .auth-control .footer .btn:hover,
        #auth .auth-control .footer .btn:focus {
            background-color: #f1d441;
            color: #000;
            opacity: 0.9;
        }

    /* 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: #DDBB16;
    }

    /* Color of selected role/permission item */
    .roles-and-permissions-template .k-state-selected .name .text-value {
        background-color: #f1d441;
        color: #000;
    }

    /* 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;
    }

    /*
 * 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: #f1d441;
    }

    /* 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: #f1d441;
    }
        /* Selected dropdown item color when hovered */
        .k-grid td.k-state-selected:hover,
        .k-grid tr.k-state-selected:hover td {
            background-color: #f1d441;
            color: #000;
        }

    /* 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 {
        background-color: #DDBB16;
        color: #000;
    }

    /* Grid cells transition */
    .k-grid td,
    .k-grid td pre,
    .k-grid tr {
        transition: background-color .2s ease-out, color .2s ease-out;
        color: #67686e;
    }

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

        .k-grid tr:hover td {
            color: #000;
        }

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

    /* List selected item color */
    .k-grid tr.k-state-selected table,
    .k-grid tr.k-state-selected.k-state-focused table {
        background-color: #f1d441;
    }

    /* Delete button on file upload 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: #DDBB16;
    }

    /* 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: #f1d441;
    }

    /* Image / file upload control name color */
    .k-file-success a.k-file-name,
    .k-file-success .k-upload-pct {
        color: #f1d441;
    }

    /* 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: #168cd9;
        color: #000;
    }

        .k-calendar .k-header .k-state-hover {
            opacity: 0.9;
            background-color: #f1d441;
            color: #000;
        }

    #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: #DDBB16;
    }

    /* Calendar day link colors */
    .k-calendar .k-state-hover .k-link {
        color: #DDBB16;
    }

    .k-calendar .k-footer .k-nav-today {
        color: #DDBB16;
        border-color: #DDBB16;
    }

    /* Calendar today hover */
    .k-calendar .k-today.k-state-hover {
        background-color: #f1d441;
    }

        .k-calendar .k-today.k-state-hover a {
            color: #000;
        }

    /* Calendar selected day color */
    .k-calendar td.k-state-selected {
        background: #DDBB16;
        border-color: #DDBB16;
    }

        .k-calendar td.k-state-selected.k-state-hover {
            background: #f1d441;
            border-color: #f1d441;
            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: #f1d441;
            border-color: #f1d441;
            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: #67686e;
            }

    /* 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: #f1d441;
        border-color: #f1d441;
        color: #2c2d35;
    }
    /* 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: #f1d441;
    }

    .k-gantt-toolbar > .k-gantt-views > li.k-state-selected {
        border-color: #DDBB16;
    }

    .k-gantt .k-gantt-toolbar .k-state-selected > .k-link {
        background-color: #DDBB16;
    }

    /* Gantt single task color */
    .k-task-single {
        background-color: #f1d441;
        border-color: #f1d441;
        color: #2c2d35;
    }

    /* Gantt single task color when selected */
    .k-state-selected.k-task-single {
        background-color: #f1d441;
        border-color: #f1d441;
        color: #2c2d35;
    }

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

    .k-gantt .k-treelist tr.k-state-selected,
    .k-gantt .k-treelist tr.k-state-selected td {
        background-color: #fff;
        border-color: #e1e1e1;
    }

        .k-gantt .k-treelist tr.k-state-selected.k-alt,
        .k-gantt .k-treelist tr.k-state-selected.k-alt td {
            background-color: #f2f2f2;
            border-color: #e1e1e1;
        }

    /* No hover color on rows */
    .k-gantt .k-treelist tr.k-alt:hover {
        background-color: #f2f2f2;
    }

    .k-gantt .k-treelist tr td,
    .k-gantt .k-treelist tr.k-alt td,
    .k-gantt .k-treelist tr:hover td {
        color: #2c2d35;
        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: #f2f2f2;
    }

    /* 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: #DDBB16;
        border-color: #DDBB16;
    }

    /* 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: #f1d441;
    }

        /* 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: #000;
        }

            .k-grid tr:hover a:hover {
                text-decoration: underline;
            }

    /* Selected drop down items */
    .k-list-container .k-list [role=option].k-state-selected {
        color: #000;
        background-color: #f1d441;
    }

    .k-list-container .k-list [role=option]:hover.k-state-selected {
        color: #000;
        background-color: #f1d441;
        opacity: .9;
        border-color: #f1d441;
    }

    .k-dropdown .k-state-hover .k-input {
        color: #2c2d35;
    }

    /* 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: #f1d441;
    }

    /* 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: #f1d441;
    }

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


    /*
 * 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: 3px;*/
        height: calc(100% - 3px);
    }

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

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

    /* Move user name / link */
    #user {
        top: 90px;
        padding: 0 8px;
    }

    .mobile #user {
        top: 8px;
    }

    /* 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 the top level menu (sections) */
        html:not(.mobile) #menu .level-1 {
            /*! position: absolute; */
            /*! right: 228px; */
            /*! bottom: 13px; */
            /*! list-style: none; */
            /*! max-width: calc(100vw - 492px); */
            /*! display: inline-block; */
        }

            /* Align sections to the 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: 19px;
        top: 10px;
        width: 260px;
        height: 56px;
    }

    /* 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; */
    }

    /* Move search box to the top right */
    html:not(.mobile) .search-box {
        position: fixed;
        height: 40px;
        float: none;
        margin-right: 0;
        /*! top: 86px; */
        right: 44px;
        width: 220px;
    }

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

    /* 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: 52px;
        padding-left: 6px;
        /*! top: 10px; */
    }

    /* 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: 54px; */
        /*! max-height: calc(100vh - 180px); */
    }

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

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

    html:not(.mobile) .search-box.advanced .search-form .field.type-multiselect .editor select,
    .field.type-email .editor input[type=password],
    .field.type-email .editor input[type=text],
    .field.type-email .editor textarea,
    .field.type-link .editor input[type=password],
    .field.type-link .editor input[type=text],
    .field.type-link .editor textarea,
    .field.type-text .editor input[type=password],
    .field.type-text .editor input[type=text],
    .field.type-text .editor textarea {
        width: 458px;
    }

    /* Background color of the advanced search box */
    .mobile .search-box.advanced {
        background-color: #34363E;
    }

    /* 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;
    }

    /* Adjust lookup control height */
    .field.type-lookup .editor .current {
        height: 32px;
    }

    /* Position lookup control down arrow */
    .field.type-lookup .editor .open-list {
        margin-top: 6px;
    }

    /* 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 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;
    }

    /* Make body hidden until content loaded, MAKE THIS UNAVAILABLE LEADS TO WHITE PAGES */
    /*
    body header,
    body #content,
    body #context-bar {
        display: none !important;
    }
    */

    body[class^="page-"] header,
    body[class^="page-"] #content,
    body[class^="page-"] #header.menu-shown #menu,
    body[class^="page-"] #context-bar,
    body[class^="error-page"] header,
    body[class^="error-page"] #menu,
    body[class^="error-page"] #context-bar {
        display: block !important;
    }

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

    #auth .auth-control .loader .spinner-layer {
        border-color: rgb(241,211,65);
    }

    /* Correct hover color for lookups */
    .field.type-lookup .editor .current:hover {
        border-color: rgb(241,211,65);
    }

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

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

    /* Make last item in table have more space at the 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 the 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;
    }

    
    
/* Old stylesheet IBKI*/
@media all {

    /*
    IBKI Colors
    Yellow: #ffe700
	Grey: #555
    Dark-blue: #133b96
    Blue: #168cd9, 22, 140, 217
    */

    /*
    Roboto Slab font for headers
    */
    /* cyrillic-ext */
    @font-face {
        font-family: 'Roboto Slab';
        font-style: normal;
        font-weight: 400;
        src: local('Roboto Slab Regular'), local('RobotoSlab-Regular'), url(https://cdn.triggre.com/ibki/fonts/roboto-slab-cyrillic-ext.woff2) format('woff2');
        unicode-range: U+0460-052F, U+20B4, U+2DE0-2DFF, U+A640-A69F;
    }
    /* cyrillic */
    @font-face {
        font-family: 'Roboto Slab';
        font-style: normal;
        font-weight: 400;
        src: local('Roboto Slab Regular'), local('RobotoSlab-Regular'), url(https://cdn.triggre.com/ibki/fonts/roboto-slab-cyrillic.woff2) format('woff2');
        unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
    }
    /* greek-ext */
    @font-face {
        font-family: 'Roboto Slab';
        font-style: normal;
        font-weight: 400;
        src: local('Roboto Slab Regular'), local('RobotoSlab-Regular'), url(https://cdn.triggre.com/ibki/fonts/roboto-slab-greek-ext.woff2) format('woff2');
        unicode-range: U+1F00-1FFF;
    }
    /* greek */
    @font-face {
        font-family: 'Roboto Slab';
        font-style: normal;
        font-weight: 400;
        src: local('Roboto Slab Regular'), local('RobotoSlab-Regular'), url(https://cdn.triggre.com/ibki/fonts/roboto-slab-greek.woff2) format('woff2');
        unicode-range: U+0370-03FF;
    }
    /* vietnamese */
    @font-face {
        font-family: 'Roboto Slab';
        font-style: normal;
        font-weight: 400;
        src: local('Roboto Slab Regular'), local('RobotoSlab-Regular'), url(https://cdn.triggre.com/ibki/fonts/roboto-slab-vietnamese.woff2) format('woff2');
        unicode-range: U+0102-0103, U+1EA0-1EF9, U+20AB;
    }
    /* latin-ext */
    @font-face {
        font-family: 'Roboto Slab';
        font-style: normal;
        font-weight: 400;
        src: local('Roboto Slab Regular'), local('RobotoSlab-Regular'), url(https://cdn.triggre.com/ibki/fonts/roboto-slab-latin-ext.woff2) format('woff2');
        unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
    }
    /* latin */
    @font-face {
        font-family: 'Roboto Slab';
        font-style: normal;
        font-weight: 400;
        src: local('Roboto Slab Regular'), local('RobotoSlab-Regular'), url(https://cdn.triggre.com/ibki/fonts/roboto-slab-latin.woff2) format('woff2');
        unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
    }

    /*
    Standard color changes for Triggre
*/

    /* Set font */
    body,
    html,
    pre {
        font: normal 12pt / 20pt 'Roboto', sans-serif;
        color: #67686e;
    }

    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        font-family: 'Roboto Slab', serif;
        color: #67686e;
        background-color: #fff;
    }

    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: 'Roboto', sans-serif;
    }

    /* Set body color */
    body {
        /*! background: #ececec; */
    }

    /* Menu font size and weight */
    #menu a,
    #menu a:link,
    #menu a:visited,
    #menu a:focus {
        font-size: 14pt;
    }

    #menu .level-2 > li {
        font-size: 16pt;
        font-weight: normal;
        font-family: 'Roboto Slab', serif;
        text-indent: 14px;
        background: #fff;
        padding-bottom: 0;
        line-height: 46px;
        color: #67686e;
    }

    #menu .level-2 a,
    #menu .level-2 a:link,
    #menu .level-2 a:visited,
    #menu .level-2 a:focus {
        font-size: 12pt;
        font-weight: normal;
        font-family: 'Roboto', sans-serif;
        text-indent: 14px;
        line-height: 48px;
        transition: background-color .2s ease-out, color .2s ease-out;
    }

    /* Page title font size */
    #title {
        font-size: 16pt;
        font-weight: normal;
        background: #ffffff;
        height: 46px;
        left: 310px;
        top: 134px;
        padding: 10px 14px;
    }

    /* User name and sign out font size */
    #user {
        font-size: 12pt;
    }

    /* General link color */
    a,
    a:link,
    a:visited,
    a:focus {
        color: #133b96;
    }

        /* General link color when hovered */
        a:hover {
            color: #168cd9;
        }

    /* Link in selected grid cell color, when hovered */
    .k-state-selected td[role="gridcell"] a:hover {
        color: #168cd9;
    }

    /* Main header color */
    #header {
        background-color: #fff;
    }

    /* Color of the open menu link on mobile */
    .mobile #open-menu {
        color: #67686e;
    }

    /* Main header user name color */
    #user .user-name {
        color: #67686e;
    }

    .mobile #open-menu {
        position: fixed;
        top: 4px;
    }

    /* Main header log out color */
    #user a,
    #user a:active,
    #user a:visited,
    #user > .auth {
        color: #67686e;
        color: black; // /*test*/
    }

        /* Main header log out color when hovered */
        #user a:hover {
            color: #168cd9;
        }

    /* Section menu background */
    #menu {
        background-color: #555;
        box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16), 0 2px 10px 0 rgba(0,0,0,0.12);
    }

    /* Shadow on menu and content */
    html:not(.mobile) #menu .level-2 {
        box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16), 0 2px 10px 0 rgba(0,0,0,0.12);
    }

    html:not(.mobile) #content {
        overflow: hidden;
        width: auto;
        height: auto;
        position: absolute;
        left: 310px;
        top: 134px;
        bottom: 20px;
        right: 20px;
        margin-left: 0;
        margin-right: 0;
        padding: 0;
        background: transparent;
        box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16), 0 2px 10px 0 rgba(0,0,0,0.12);
    }

    /* Rounded corners on menu and content */
    html:not(.mobile) #menu .level-2 {
        border-radius: 4px;
        padding-bottom: 60px;
    }

    html:not(.mobile) #title {
        border-top-left-radius: 4px;
        border-top-right-radius: 4px;
    }

    html:not(.mobile) #context-bar,
    html:not(.mobile) #content {
        border-bottom-left-radius: 4px;
        border-bottom-right-radius: 4px;
    }

    /* Active section underline */
    #menu .level-1 > li.current {
        border-bottom: 3px solid #ffe700;
    }

    /* Section link color */
    #menu a:hover {
        color: #fff;
        background-color: #000;
    }

    /* Side menu links */
    #menu .level-2 a:hover,
    #menu .level-2 a:active {
        color: #67686e;
        background: #e1e1e1;
    }

    /* Active side menu link */
    #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 {
        font-weight: normal;
        color: #67686e;
        /*! background: #ffe700; */
    }

    /* Context bar */
    #context-bar {
        box-shadow: none;
        background-color: #fff;
        right: 20px;
        left: 308px;
        bottom: 20px;
        z-index: 4;
        min-width: 480px;
        height: 48px;
        padding-left: 0px;
        padding-right: 175px;
        padding-top: 0;
        padding-bottom: 0;
    }

        /* Context bar button color, including login button */
        #context-bar button,
        #context-bar button:active,
        #context-bar button:focus,
        #context-bar button:visited,
        #auth .auth-control .footer .btn {
            background-color: #168cd9;
        }

            /* Context bar button hover color, including login button */
            #context-bar button:hover,
            #context-bar button:active:hover,
            #context-bar button:focus,
            #context-bar button:focus:hover,
            #context-bar button:visited:hover,
            #auth .auth-control .footer .btn:hover {
                background-color: #ffe700;
                color: #67686e;
            }

    /* Format help texts */
    .form .help {
        padding-right: 0px;
        font-weight: normal;
    }

    /************************
  Loading animation color
************************/
    .k-loading-image {
        border-top: 3px solid rgba(22, 140, 217, 0.2);
        border-right: 3px solid rgba(22, 140, 217, 0.2);
        border-bottom: 3px solid rgba(22, 140, 217, 0.2);
        border-left: 3px solid rgba(22, 140, 217, 1.0);
    }

    /************
  Auth screen
************/

    /* Logo alignment */
    #auth .auth-control .header .logo,
    #auth .auth-control .custom .logo {
        background-position: 0% 50%;
        background: url(https://cdn.triggre.com/ibki/logo_ibki_soesv_groenkeur.png) no-repeat;
        margin: 32px 40px;
        width: 200px;
    }

    /* Less padding around logo */
    #auth .auth-control .custom .nap .logo {
        margin: 24px;
        margin-left: 32px;
    }

    /* Hover transition for sign in button */
    #auth .auth-control .footer .btn {
        transition: background-color .2s ease-out;
    }

    /* Hide auth header */
    #auth .title {
        display: none;
    }

    /* Login background */
    #auth .decorator {
        background: radial-gradient(ellipse at center, rgba(255,231,0,0.25) 0, #ffe700 100%);
    }

    /* Login header background */
    #auth .auth-control .header {
        height: 80px;
        background: #fff;
    }

    /* Custom login background color */
    #auth .auth-control .custom .nap {
        background: #fff;
    }

    /* Login title color */
    #auth .auth-control .header .title {
        color: #67686e;
    }


    /************
  Form colors
************/

    /* 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 {
        border-color: #168cd9;
    }

    /* 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: #168cd9;
    }
        /* Selected dropdown item color when hovered */
        .k-grid td.k-state-selected:hover,
        .k-grid tr.k-state-selected:hover td {
            background-color: #ffe700;
            color: #67686e;
        }

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

    /* Logo positioning correction */
    #auth .auth-control .header .logo,
    #header #logo a,
    .mobile #context-bar.menu-open .buttons-header .logo a {
        background-size: contain;
        background-image: url(https://cdn.triggre.com/ibki/logo_ibki_soesv_groenkeur.png);
    }
    /* Position mobile lookup correctly */
    .mobile .form .type-lookup .editor .list-popup {
        top: 108px;
    }
    /* Prevent mobile header from moving */
    .mobile #header {
        position: fixed;
    }



    /*
    Extra CSS changes for IBKI
*/

    /* Show menu item always */
    #menu .level-1 > li:first-child:last-child > a {
        display: block;
    }

    /* Position and color of menu */
    #menu .level-2 {
        bottom: 20px;
        left: 20px;
        background: #f7f7f7;
        padding: 0px;
    }

    #menu .level-3 {
        background: #f7f7f7;
        padding: 0px;
    }
    
    /* Color of menu when selected */
    #menu .level-3 .current {
        background-color: #ffe700;
    }
    
    
    /* Position and color of main content */
    #inner {
        bottom: 64px;
        left: 310px;
        right: 20px;
        background: #f7f7f7;
    }

    .mobile #inner {
        /*! top: 110px; */
    }

    /* Padding for forms */
    #inner .form {
        padding: 0px 16px 16px 16px;
    }

    /* Change search input */
    input[type="text"].simple-search,
    input[type="text"].simple-search:hover,
    input[type="text"].simple-search:focus {
        border: none;
        background: transparent;
        border-radius: 0;
        border-bottom: 3px solid #168cd9;
    }

    /* Change advanced search button color */
    .search-box .open-advanced,
    .search-box .close-advanced,
    .search-box .open-search {
        color: #168cd9;
        transition: color .2s ease-out;
    }

        .search-box .open-advanced:hover,
        .search-box .close-advanced:hover,
        .search-box .open-search:hover {
            color: #ffe700;
        }

    html:not(.mobile) .search-box .open-advanced:before,
    html:not(.mobile) .search-box .close-advanced:before {
        line-height: 29px;
        margin: .35em .35em .35em 0;
        width: 32px;
        height: 32px;
        position: relative;
        bottom: 56px;
        left: 52px;
    }

    html:not(.mobile) .search-box .open-advanced:before {
        /*! border-bottom: 3px solid #168cd9; */
    }

    html:not(.mobile) .search-box .close-advanced:before {
        border-bottom: 3px solid transparent;
    }

    /* Link color for selected rows */
    .k-state-selected td[role="gridcell"] a:link {
        color: #fff;
    }

    .k-state-selected:hover td[role="gridcell"] a:link {
        color: #67686e;
    }

    .k-state-selected td[role="gridcell"] a:link:hover {
        color: #168cd9;
    }

    /* Kendo text color */
    .k-block,
    .k-widget,
    .k-popup,
    .k-content,
    .k-dropdown .k-input {
        color: #67686e;
    }


    /* Table row color */
    .k-grid table {
        background: transparent;
    }

    /* Text color of selected table row */
    .k-grid tr.k-state-selected,
    .k-grid td.k-state-selected,
    .k-listview > .k-state-selected,
    .k-state-selected .k-progress-status {
        color: #fff;
    }

    .k-grid-header .k-header .k-link,
    .k-grid-header .k-header,
    .k-grid-header .k-link,
    .k-grid-header .k-link:link,
    .k-pager-info,
    .k-scheduler-header,
    .k-scheduler-agendaview .k-scheduler-datecolumn {
        color: #888;
    }


    /* Adjust title on mobile */
    .mobile #title {
        right: 0;
        left: 0;
        top: 64px;
    }

    /* Adjust context bar on mobile */
    .mobile #context-bar {
        left: 0;
        right: 0;
        bottom: 0;
    }

        /* Color mobile button */
        .mobile #context-bar .show-menu,
        .mobile .search-box.advanced-filled .open-advanced {
            color: #67686e;
        }

    .mobile .search-box.opened .close-search,
    .mobile .search-box.opened .open-advanced {
        color: #67686e;
    }

    .mobile .search-box .open-advanced,
    .mobile .search-box .close-advanced,
    .mobile .search-box .open-search {
        color: #67686e;
    }

        .mobile .search-box .open-advanced:hover,
        .mobile .search-box .close-advanced:hover,
        .mobile .search-box .open-search:hover {
            color: #67686e;
        }

    .mobile .search-box {
        background: #fff;
    }

    /* Mobile menu changes */
    .mobile #header.menu-shown #menu .level-2 {
        padding-left: 0;
    }

    .mobile #menu .level-2 > li {
        text-indent: 10px;
    }

    .mobile #menu .level-2 a,
    .mobile #menu .level-2 a:link,
    .mobile #menu .level-2 a:visited,
    .mobile #menu .level-2 a:focus {
        text-indent: 24px;
    }

    .mobile #header.menu-shown #menu .level-1 > li > a {
        text-transform: uppercase;
        line-height: normal;
    }

    /* Hide logo in mobile menu */
    .mobile #header.menu-shown #logo a {
        display: none;
    }

    /* Mobile logo size */
    .mobile #header #logo a {
        width: 128px;
        height: 36px;
    }

    @media only screen and (max-width: 1056px) {
        .form .name {
            display: inline;
            text-indent: 2px;
        }
    }

    /* Make form descriptions show new lines */
    .form .description {
        white-space: pre-line;
        margin: 0;
        margin-bottom: 16px;
    }

    /* Text spacing for content pages */
    #inner p {
        /*! padding: 0 16px; */
    }

    /* Make sure preformatted text has the correct color in grids */
    .k-grid tr.k-state-selected:not(:hover) > td pre {
        color: #fff;
    }

    /* Make long texts wrap */
    pre.text-value {
        white-space: pre-line;
    }

    /* Error page content positioning */
    body.error-page #inner {
        background: #fff;
    }

    html:not(.mobile) body.error-page #inner,
    html:not(.mobile) body.error-page #title,
    html:not(.mobile) body.error-page #content,
    html:not(.mobile) body.error-page #context-bar {
        left: 20px;
    }

    /* Make text in dropdowns align correctly when nothing selected */
    .editor .selection {
        line-height: 18px;
    }

        /* Translate empty drop down */
        .editor .selection.empty {
            font-size: 0;
        }

            .editor .selection.empty:after {
                content: "Niets geselecteerd";
                font-size: 12pt;
                line-height: 30px;
            }

    /* Move search box to lower left corner */
    html:not(.mobile) .search-box {
        position: fixed;
        left: 20px;
        bottom: 30px;
        padding-left: 8px;
        background-color: #f7f7f7;
    }

        html:not(.mobile) .search-box input.simple-search {
            width: 206px;
            height: 24px;
            padding-bottom: 16px;
        }

        html:not(.mobile) .search-box .clear-search {
            width: 200px;
        }

        html:not(.mobile) .search-box .search-form {
            right: unset;
            left: 12px;
        }

    html:not(.mobile) .search-form .label label {
        text-align: left;
    }

    html:not(.mobile) #context-bar {
        padding-right: 0;
        margin-left: 2px;
    }

    /* Make login button black instead of grey */
    #auth .auth-control .custom .nap .providers .link.ibki,
    #auth .auth-control .custom .nap .providers .link.ibki:visited,
    #auth .auth-control .custom .nap .providers .link.ibki:hover,
    #auth .auth-control .custom .nap .providers .link.ibki:active {
        color: #000;
    }

    /* Payment link as button */
    .portal-externen #c9_betalenval {
        background: #633786;
        color: #fff !important;
        font-weight: 500;
        font-size: 18px;
        padding: 4px 16px;
        border-radius: 20px;
        line-height: 36px;
        display: inline-block;
        cursor: pointer;
        transition: background 0.2s linear 0s;
    }

        .portal-externen #c9_betalenval a {
            color: #fff !important;
        }

        .portal-externen #c9_betalenval:hover {
            background: #502078;
        }

    /* Betaal link weergeven als knop */
    a[href^="https://payments.triggre.com"] {
        background: #168cd9;
        color: #fff !important;
        font-weight: 500;
        font-size: 0;
        padding: 4px 44px;
        border-radius: 2px;
        display: inline-block;
        cursor: pointer;
        position: relative;
        top: -6px;
        transition: background 0.2s linear 0s;
    }

        a[href^="https://payments.triggre.com"]:after {
            content: "iDeal";
            font-size: 16px;
            position: absolute;
            left: 16px;
        }

        a[href^="https://payments.triggre.com"]:hover {
            background: #ffe700;
            color: #555 !important;
        }

    /* wachtwoord wijzigen link weergeven als knop */
    a[href*="wachtwoord_gewijzigd&userid="] {
        background: #168cd9;
        color: #fff !important;
        font-weight: 500;
        font-size: 0;
        padding: 4px 46px;
        border-radius: 2px;
        display: inline-block;
        cursor: pointer;
        position: relative;
        top: -6px;
        transition: background 0.2s linear 0s;
    }

        a[href*="wachtwoord_gewijzigd&userid="]:after {
            content: "Wachtwoord wijzigen";
            font-size: 16px;
            position: absolute;
            left: 16px;
        }

        a[href*="wachtwoord_gewijzigd&userid="]:hover {
            background: #ffe700;
            color: #555 !important;
        }


    .link.ibki, .link.facebook, .link.linkedin, .link.mobiid {
        font-size: 0px;
    }

        .link.ibki:before {
            content: "Login met gebruikersnaam IBKI";
            font-size: 12pt;
        }

        .link.facebook:before {
            content: "Login via Facebook";
            font-size: 12pt;
        }

        .link.linkedin:before {
            content: "Login via LinkedIn";
            font-size: 12pt;
        }

        .link.mobiid:before {
            content: "Login via Mobi-ID";
            font-size: 12pt;
        }
    
}

    
    
    
    
    /* 
* 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: 12px;
        }

            /* 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: 4px;
                font-size: 12px;
            }

            /* 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: 12px;
            }

                /* 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: 12px;
                    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;
                }

                    html:not(.mobile) #menu .level-2 > li a {
                        font-size: 12px;
                        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;
                left: 264px;
            }

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

            /* 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 {
                height: 48px;
                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: 12px;
            }

            /* 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;
            }

        /* Position pulldown down icon */
        .field.type-select .k-icon.icon-down-open {
            top: 3px;
        }

        /* Position date/time picker icons */
        .k-datetimepicker .k-select .k-link,
        .field.type-date .k-picker-wrap .k-select {
            margin-top: 3px;
        }

        /* 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: 12px;
        }

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

            /* Make top menu smaller */
            html:not(.mobile) #menu {
           height: 32px; /* makes changed for header */
            }

                /* 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: 12px;
            }

        /* Page title size */
        html:not(.mobile) .layout > .layout-cell > .layout-cell-title {
             font-size: 16px;
             line-height: 16px;
                text-indent: 8px;
        }
        
        html:not(.mobile) .k-link {
             text-indent: 6px;
        }

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

            html:not(.mobile) .search-box .simple-search {
                font-size: 12px;
                height: 28px;
            }
        
        /* Position clear button to other buttons */ 
        html:not(.mobile) #context-bar .clear-search {
            position: relative;
            bottom: -4px;
        }        
        
        /* Move advanced search form to be positioned below search box */
        .search-box.advanced .search-form {
            max-height: calc(100vh - 184px);
        }

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

        /* 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: 12px;
            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: 120px;
            width: 248px;
        }

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

                html:not(.mobile) #menu .level-2 > li a {
                    font-size: 12px;
                    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;
            left: 264px;
        }

        /* Content positioning */
        html:not(.mobile) #content {
/*            position: relative; */
            left: 290px;
        }
        
        
        
        html:not(.mobile) #inner {
            top: 120px;
            left: 290px;
            bottom: 68px;
        }
        
        /* Box shadow for inner */
        html:not(.mobile) #inner {
            box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16), 0 2px 10px 0 rgba(0,0,0,0.12);
        }
        
        

        /* 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 {
            height: 48px;
            padding: 0 10px;
            /*! padding-left: 258px; */
            left: 288px;
        }

        /* 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: 12px;
            left: 46px;
        }

        /* 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 pulldown height */
        .k-autocomplete .k-input,
        .k-dropdown-wrap .k-input,
        .k-multiselect-wrap .k-input,
        .k-numeric-wrap .k-input,
        .k-picker-wrap .k-input,
        .k-selectbox .k-input,
        .k-textbox > input {
            line-height: 2.65em;
        }

        /* 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;
                }
    }

    /* 
 * HIDE SIDE MENU
 * 
 * All pages that have '_nomenu' in their name in the Triggre designer, will hide the left menu.
 */

    /* Hide side menu */
    html:not(.mobile) body[class*="_nomenu"] #menu .level-2 {
        display: none;
    }

    /* Move content and title left */
    html:not(.mobile) body[class*="_nomenu"] #title,
    html:not(.mobile) body[class*="_nomenu"] #inner {
        left: 20px;
    }

    /* Move context bar buttons left */
    html:not(.mobile) body[class*="_nomenu"] #context-bar {
        padding-left: 4px;
    }

    /* 
 * VERTICAL SCROLL PAGES
 * 
 * All pages that have 'vscroll' in their name in the Triggre designer, will place all content in such a way that
 * it is vertically scrollable. Also includes error pages.
 * 
 * NOTE: This is only compatible with form pages and (not tested) content pages.
 */

    /* Make pages automatically show scroll bar */
    html {
        overflow: initial;
    }

        /* Menu size dependent on contents on dekstop */
        html:not(.mobile) body[class*="_vscroll"] #menu,
        html:not(.mobile) .error-page #menu {
            height: auto;
        }

    /* Allow vertical scrolling in body */
    body[class*="_vscroll"],
    .error-page {
        overflow-y: auto;
        overflow-x: hidden;
    }

    /* Mobile header height depends on contents */
    .mobile body[class*="_vscroll"] #header:not(.menu-shown) #header,
    .mobile .error-page #header:not(.menu-shown) #header {
        height: auto;
    }

    /* Header positioning and color */
    body[class*="_vscroll"] #header,
    .mobile body[class*="_vscroll"] #header,
    .error-page #header,
    .mobile .error-page #header {
        background: #2c2d35;
        position: relative;
        box-shadow: none;
        height: auto;
    }

        /* Logo positioning and image */
        body[class*="_vscroll"] #header #logo a,
        .error-page #header #logo a {
            left: 24px;
            top: 30px;
            width: 260px;
            height: 120px;
            background: url('https://cdn.triggre.com/triggre/img/triggre-white.png');
            background-size: contain;
            background-repeat: no-repeat;
        }

        /* Logo positioning on mobile */
        .mobile body[class*="_vscroll"] #header #logo a,
        .mobile .error-page #header #logo a {
            left: 16px;
            top: 8px;
            width: 100px;
            height: 48px;
        }

    /* User link hover color (log in/out) */
    body[class*="_vscroll"] #user a:hover,
    .error-page #user a:hover {
        color: #f1d441;
        opacity: 0.9;
    }

    /* Header height on desktop */
    html:not(.mobile) body[class*="_vscroll"] #menu,
    html:not(.mobile) .error-page #menu {
        height: 636px;
        position: relative;
        top: 0;
        box-shadow: none;
        min-width: 0;
    }

    /* Header height on mobile */
    .mobile body[class*="_vscroll"] #menu,
    .mobile .error-page #menu {
        display: block;
        height: 200px;
    }

    /* Make a vertical scroll page show a nice image */
    body[class*="_vscroll"] #menu > ul,
    .error-page #menu > ul {
        background: url('https://cdn.triggre.com/triggre/img/homepage.png');
        background-position: center;
        background-repeat: no-repeat;
        background-size: contain;
        width: 100%;
        height: 100%;
        max-height: 227px;
        position: absolute !important;
        bottom: 36px !important;
        padding: 0;
        margin: 0;
        right: 0 !important;
        left: 0 !important;
        max-width: 100% !important;
    }

    /* Hide the content of the menu, other than the image */
    .mobile body[class*="_vscroll"] #menu > ul,
    .mobile .error-page #menu > ul {
        background: none;
        height: 0px;
    }

    /* Format the main page title. Add the title to 'content' here. */
    body[class*="_vscroll"] #menu > ul::before,
    .error-page #menu > ul::before {
        content: " ";
        position: absolute;
        color: #fff;
        font-weight: 700;
        font-size: 60px;
        line-height: 64px;
        margin: auto;
        display: block;
        width: 100%;
        text-align: center;
        top: -150px;
    }

    /* Format the main page title on mobile. */
    .mobile body[class*="_vscroll"] #menu > ul::before,
    .mobile .error-page #menu > ul::before {
        position: relative;
        font-size: 32px;
        line-height: 32px;
        top: -100px;
    }

    /* Format the page sub title. Add the title to 'content' here. */
    body[class*="_vscroll"] #menu > ul::after,
    .error-page #menu > ul::after {
        content: " ";
        position: absolute;
        color: #fff;
        font-weight: 600;
        font-size: 28px;
        line-height: 32px;
        margin: auto;
        display: block;
        width: 100%;
        text-align: center;
        top: -66px;
    }

    /* Format the page sub title on mobile. */
    .mobile body[class*="_vscroll"] #menu > ul::after,
    .mobile .error-page #menu > ul::after {
        position: relative;
        font-size: 20px;
        line-height: 24px;
        margin: 0px 8px;
        width: calc(100% - 16px);
        top: -88px;
    }

    /* Hide all other menus */
    html body[class*="_vscroll"] #menu ul li,
    html .error-page #menu ul li {
        display: none;
    }

    /* Position the page content */
    body[class*="_vscroll"] #content,
    .error-page #content {
        overflow-y: auto;
        overflow-x: hidden;
        margin-left: auto;
        margin-right: auto;
        max-width: 480px;
        width: auto;
        padding: 0;
    }

    /* Position the regular page title */
    html body[class*="_vscroll"] #title,
    html .error-page #title {
        display: inline-block;
        position: relative;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        margin-top: 32px;
        font-size: 24px;
        line-height: 28px;
        margin-bottom: 0px;
        white-space: normal;
    }

    /* Regular page title on mobile positioning */
    .mobile body[class*="_vscroll"] #title,
    .mobile .error-page #title {
        margin-left: 16px;
    }

    /* Position the inner content relative so it sizes correctly */
    html body[class*="_vscroll"] #inner,
    html .error-page #inner {
        position: relative;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
    }

    /* Add some padding to the inner content on mobile to make sure it doesn't touch the edges of the screen */
    .mobile body[class*="_vscroll"] #inner,
    .mobile .error-page #inner {
        padding-left: 16px;
        padding-right: 16px;
    }

    /* Format H1 titles in content pages */
    html:not(.mobile) body[class*="_vscroll"] #inner h1,
    html:not(.mobile) .error-page #inner h1 {
        margin-top: 32px;
        font-size: 24px;
        line-height: 28px;
        text-transform: none;
    }

    /* Format forms */
    body[class*="_vscroll"] #inner .form {
        margin: 0;
        margin-top: 16px;
    }

        /* Format form fiels */
        body[class*="_vscroll"] #inner .form .fields {
            min-width: 100px;
            overflow: hidden;
        }

    /* Format mobile form fields */
    html:not(.mobile) body[class*="_vscroll"] #inner .form .field {
        margin: 4px 0;
    }

    /* Make labels fill entire width */
    body[class*="_vscroll"] #inner .form .label {
        width: 100%;
    }

        /* Align form labels left and apply extra spacing below */
        body[class*="_vscroll"] #inner .form .label label {
            text-align: left;
            margin-bottom: 4px;
        }

        /* Format form help text */
        body[class*="_vscroll"] #inner .form .label .help {
            text-align: left;
            margin-left: 2px;
            width: 100%;
            color: #999A9E;
        }

    /* Format form validation text */
    body[class*="_vscroll"] #inner .form .validation {
        text-align: left;
        margin-left: 2px;
        width: 100%;
        max-width: 480px;
    }

    /* Format the context bar to be at bottom of form and look as part of page */
    body[class*="_vscroll"] #context-bar {
        position: relative;
        padding-left: 0;
        padding-right: 0;
        background: transparent;
        box-shadow: none;
        height: 80px;
    }

        /* Position the button placeholder in the context bar */
        body[class*="_vscroll"] #context-bar .buttons {
            position: absolute;
            max-width: 480px;
            width: 100%;
            margin: auto;
            left: 0;
            right: 0;
            overflow-x: auto;
        }

            /* Format each button in the context bar */
            body[class*="_vscroll"] #context-bar .buttons button {
                float: right;
                margin-right: 20px;
                background: #f1d441;
                color: #000;
                border-radius: 6px;
                padding: 14px 26px 13px 26px;
                font-weight: 600;
                font-size: 18px;
                height: auto;
            }

    /* Mobile context bar buttons get different spacing */
    .mobile body[class*="_vscroll"] #context-bar .buttons button {
        margin-right: 16px;
        margin-top: 16px;
    }

    /* Hover color of context bar buttons */
    body[class*="_vscroll"] #context-bar .buttons button:hover {
        opacity: 0.9;
    }


    /*
 * TILE PAGES
 *
 * Create a tile page by adding 'tiles' to the name of a page in the designer. This is only compatible with content pages that have
 * no content, since all content will be hidden. The action buttons in the context bar will be used as tiles. The side menu is also
 * hidden (categories and user flows).
 * 
 * Alternatively, you can add 'tilesmenu' to the name of the page to include a side menu on your tiles page.
 */

    /* Make mobile page scroll vertically in case of too many tiles */
    html.mobile body[class*="_tiles"] {
        overflow-y: auto;
    }
    
    /* Make content for whole page */
    html:not(.mobile) body[class*="_tiles_nomenu"] #content {
    top: 130px;
    left:20px;

    }

    /* Place header on top of tiles so it can be clicked */
    html body[class*="_tiles"] #header {
        z-index: 5;
    }

    /* Make header scroll with tiles on mobile */
    html.mobile body[class*="_tiles"] #header {
        position: fixed;
    }

    /* Hide side menu, contents and title */
    html body[class*="_tiles"][class*="_nomenu"] #menu .level-2,
    html body[class*="_tiles"] #title,
    html body[class*="_tiles"] #inner {
        display: none;
    }
    
    html body[class*="_tiles_nomenu"] #context-bar {
        left: 40px;
    }

    /* Use context bar as tile container */
    html body[class*="_tiles"] #context-bar {
        position: absolute;
        top: 0;
        bottom: 0px;
        height: auto;
        box-shadow: none;
        padding: 20px;
        padding-top: 153px;
        padding-right: 4px; /* 20 - 16 from the right margin of each tile */
        padding-bottom: 0;
        overflow-y: auto;
        background: transparent !important;
    }

        /* Remove padding on button container */
        html body[class*="_tiles"] #context-bar .buttons,
        html.mobile body[class*="_tiles"] #context-bar .buttons {
            padding: 0;
            background: transparent;
        }

    /* Spacing for side menu */
    html:not(.mobile) body[class*="_tiles"]:not([class*="_nomenu"]) #context-bar {
        padding-left: 38px;
    }

    /* Move tiles down to make space for header */
    html.mobile body[class*="_tiles"] #context-bar {
        padding-top: 80px;
    }

    /* Make the tiles fill the entire width */
    html body[class*="_tiles"] #context-bar .buttons {
        width: 100%;
        height: auto;
        overflow-y: auto;
        overflow-x: hidden;
        white-space: initial;
    }

    /* Make the menu go all the way to the bottom on tiles pages and add little spacing between menu and tiles for scrollbar */
    html body[class*="_tiles"] #menu .level-2 {
        bottom: 20px;
        /*! width: 256px; */
    }

    /*
 * Format tiles 
 */

    /* 6 or more tiles per line without menu */
    html body[class*="_tiles"][class*="_nomenu"] #context-bar .button {
        width: calc(16.6% - 16px);
        min-width: 196px;
        height: 196px;
        transition: all .2s ease-out;
    }

    /* 5 tiles per line without menu */
    @media only screen and (max-width: 1701px) {
        html body[class*="_tiles"][class*="_nomenu"] #context-bar .button {
            width: calc(20% - 16px);
        }
    }

    /* 4 tiles per line without menu */
    @media only screen and (max-width: 1367px) {
        html body[class*="_tiles"][class*="_nomenu"] #context-bar .button {
            width: calc(25% - 16px);
        }
    }

    /* 3 tiles per line without menu */
    @media only screen and (max-width: 871px) {
        html body[class*="_tiles"][class*="_nomenu"] #context-bar .button {
            width: calc(33% - 16px);
        }
    }

    /* 2 tiles per line without menu */
    @media only screen and (max-width: 659px) {
        html body[class*="_tiles"][class*="_nomenu"] #context-bar .button {
            width: calc(50% - 16px);
        }
    }

    /* 1 tile per line without menu */
    @media only screen and (max-width: 447px) {
        html body[class*="_tiles"][class*="_nomenu"] #context-bar .button {
            width: calc(100% - 16px);
            max-width: 100%;
        }
    }

    /* 6 or more tiles per line with menu */
    html:not(.mobile) body[class*="_tiles"] #context-bar .button {
        width: calc(16.6% - 16px);
        min-width: 196px;
        height: 196px;
        transition: all .2s ease-out;
    }

    /* 5 tiles per line with menu */
    @media only screen and (max-width: 2101px) {
        html:not(.mobile) body[class*="_tiles"] #context-bar .button {
            width: calc(20% - 16px);
        }
    }

    /* 4 tiles per line with menu */
    @media only screen and (max-width: 1767px) {
        html:not(.mobile) body[class*="_tiles"] #context-bar .button {
            width: calc(25% - 16px);
        }
    }

    /* 3 tiles per line with menu */
    @media only screen and (max-width: 1121px) {
        html:not(.mobile) body[class*="_tiles"] #context-bar .button {
            width: calc(33% - 16px);
        }
    }

    /* 2 tiles per line with menu */
    @media only screen and (max-width: 1009px) {
        html:not(.mobile) body[class*="_tiles"] #context-bar .button {
            width: calc(50% - 16px);
        }
    }

    /* 1 tile per line with menu */
    @media only screen and (max-width: 847px) {
        html:not(.mobile) body[class*="_tiles"] #context-bar .button {
            width: calc(100% - 16px);
            max-width: 100%;
        }
    }

    /* Tile color and size. If you change this, you also have to change the sizes at which to display 6, 5, 4, 3, 2 or 1 tile(s) per line! */
    html body[class*="_tiles"] #context-bar .button {
        background-color: #e1e1e1;
        color: #2c2d35;
        font-size: 20px;
        margin: 0;
        margin-right: 16px;
        margin-bottom: 16px;
        vertical-align: middle;
    }

        /* Tile hover color */
        html body[class*="_tiles"] #context-bar .button:hover {
            background-color: #ffe700;
            color: #2c2d35;
        }

    /* Tile hover icon size */
    html body[class*="_tiles"].page-Dashboard_tiles_nomenu #context-bar .button i {
        transition: all .2s ease-out;
    }

    html body[class*="_tiles"].page-Dashboard_tiles_nomenu #context-bar .button:hover i {
        background-size: 90%;
    }

    /* Allow users to remove the first category or userflow in a menu on a page. This is useful if the first category
 * or userflow contains a tile page that allow navigation to the other userflows. Now, when the user clicks the
 * section, they will see the tiles page, but cannot in any other way navigate there. This provides cleaner 
 * navigation, but should be used with care! */

    /* Hide first category from menu */
    body[class*="_nofirstcat"] #menu .level-2 > li:first-child {
        display: none;
    }

    /* Hide first user flow from menu */
    body[class*="_nofirstflow"] #menu .level-2 > li:first-child .level-3 > li:first-child {
        display: none;
    }


    /*
 * ERROR PAGES
 * 
 * Below are overrides for specific error pages.
 */

    /* Hide all content */
    html .error-page #inner {
        display: none;
    }

    /* Login link as button */
    .error-page #user a.login {
        margin-right: 20px;
        background: #ffe700;
        color: #000;
        border-radius: 6px;
        padding: 14px 26px 13px 26px;
        font-weight: 600;
        font-size: 18px;
        height: auto;
        display: inline-block;
        margin-top: 8px;
        line-height: 20px;
        text-transform: none;
        letter-spacing: initial;
        font-weight: 600;
    }

    /* Hide all menu items on error pages */
    html:not(.mobile) .error-page #menu .level-1 > li {
        display: none;
    }

    /* Hide context bar */
    body.error-page #context-bar {
        display: none !important;
    }

    /* Login button hover color */
    .error-page #user a.login:hover {
        opacity: 0.9;
        color: #000;
    }

    /* Set general main title */
    .error-page #menu > ul::before {
        content: "Oops. This is embarassing";
    }

    /* Set general sub title */
    .error-page #menu > ul::after {
        content: "Something went wrong. This almost never happens. No, really.";
    }

    /* Set 404 main title */
    .error-page.error-404 #menu > ul::before {
        content: "Nope. Nothing here.";
    }

    /* Set 404 sub title */
    .error-page.error-404 #menu > ul::after {
        content: "The page you requested doesn't exist.";
    }

    /* Set 403 main title */
    .error-page.error-403 #menu > ul::before {
        content: "Yeah. Nice try, but no.";
    }

    /* Set 403 sub title */
    .error-page.error-403 #menu > ul::after {
        content: "You do not have access to this page.";
    }
}



/* Fixes for upgrade and pages */
@media all{

/* Fix content header */

   html:not(.mobile) h3  {

        font-size: 16pt;
        font-weight: normal;
        font-family: 'Roboto Slab', serif;
        text-indent: 10px;
        background: #fff;
        padding-bottom: 0;
        line-height: 34px;
        background: #ffe700;
        color: #67686e; 
    }
    
    /* Fix height profile button */
    html:not(.mobile) #user {
        position: absolute;
        top: 8px;
        right: 4px;
    }

    /* Hide top menu, THIS will result in hiding the first header menu */
    body[class="page-Welkom_nomenu_tiles"] #menu .level-1 > li:first-child {
        display: none;
    }
    
    
    /* Hide side menu */
    body[class="page-Welkom_nomenu_tiles"] #menu .level-2 {
        display: none;
    }
        
    /* Remove box shadow */
    body[class="page-Welkom_nomenu_tiles"] #content {
        box-shadow: none;
    }

    body[class="page-Welkom_nomenu_tiles"] #content,
    body[class="page-Welkom_nomenu_tiles"] #context-bar {
        position: absolute;
        left:0;
    }
    
}

/* Fix detailpages */
@media all {
    /* uitlijning van detailpagina */
    #inner >  .layout > .layout-cell > .layout-cell-content > .layout > .layout-cell > .layout-cell-content > .field
    {
    padding-left: 20px;
    }    
    
    #inner .layout-cell-content > .content {
         padding-left: 6px;
    }
    
    /* Zet cancel button op de juiste plaats */ 
    #auth .auth-control .footer .secondary {
        position: relative;
        left: 12px;
        top: 4px;
    }
    
    #user .user-email {
        visibility: hidden;
    }
    
    /* Fix details fields */
    .field.trg-named-view .label {
        text-indent: 8px;
        direction: rtl;
        text-align: right;
    }
    
}

/* ADD CSS FOR GROENKEUR */
@media all {
    /* Change colours for specific page */
    body[class="page-Welkom_bij_Bureau_Erkenningen_lab"] h3 {
        background-color: #ffe700;
        color: #286549;
    }

    /* Active section underline */
    body[class="page-Welkom_bij_Bureau_Erkenningen_lab"] #menu .level-1 > li.current {
        border-bottom: 2px solid #ffe700;
    }

    body[class="page-Welkom_bij_Bureau_Erkenningen_lab"] #menu .level-2 > li{
        background-color: #286549;
        color: #fff;
    }

    body[class="page-Welkom_bij_Bureau_Erkenningen_lab"] #menu .level-3 .current {
    background-color: #286549;
    }

    body[class="page-Welkom_bij_Bureau_Erkenningen_lab"] {
    background-color: #fff;
    }

    body[class="page-Welkom_bij_Bureau_Erkenningen_lab"] #menu .level-2 {
        background-color: #D5E1DD;
    }

    body[class="page-Welkom_bij_Bureau_Erkenningen_lab"] #menu .level-2 a.routed {
        color: #fff;;
    }

    body[class="page-Welkom_bij_Bureau_Erkenningen_lab"] #menu {
        background-color: #f46425;
    }

    body[class="page-Welkom_bij_Bureau_Erkenningen_lab"] #context-bar {
        background-color: #ffe700;			;
    }

    body[class="page-Welkom_bij_Bureau_Erkenningen_lab"] #inner {
         color: #286549			;
        background-color: #D5E1DD;
    }

/* Change colours for specific page */
    body[class="page-Welkom_bij_Bureau_Erkenningen"] h3 {
        background-color: #ffe700;
        color: #286549;
    }

    /* Active section underline */
    body[class="page-Welkom_bij_Bureau_Erkenningen"] #menu .level-1 > li.current {
        border-bottom: 2px solid #ffe700;
    }

    body[class="page-Welkom_bij_Bureau_Erkenningen"] #menu .level-2 > li{
        background-color: #286549;
        color: #fff;
    }

    body[class="page-Welkom_bij_Bureau_Erkenningen"] #menu .level-3 .current {
    background-color: #286549;
    }

    body[class="page-Welkom_bij_Bureau_Erkenningen"] {
    background-color: #fff;
    }

    body[class="page-Welkom_bij_Bureau_Erkenningen"] #menu .level-2 {
        background-color: #D5E1DD;
    }

    body[class="page-Welkom_bij_Bureau_Erkenningen"] #menu .level-2 a.routed {
        color: #fff;;
    }

    body[class="page-Welkom_bij_Bureau_Erkenningen"] #menu {
        background-color: #f46425;
    }

    body[class="page-Welkom_bij_Bureau_Erkenningen"] #context-bar {
        background-color: #ffe700;			;
    }

    body[class="page-Welkom_bij_Bureau_Erkenningen"] #inner {
         color: #286549			;
        background-color: #D5E1DD;
    }
    
}

/*
start custom css 
ref: F3100
date: 19 feb 2025
by: RM
*/

table[role=grid] thead th a.k-link:after {
    content: "\e125";
    margin-left: 2px;
    font: 14px/1 WebComponentsIcons;
	position:absolute;
	margin-top:2px;
}

table[role=grid] thead{
background-color:#f2f2f2;
}

table[role=grid] thead th a.k-link{
	text-decoration:underline
} 

table[role=grid] thead th a.k-link:hover{
	text-decoration:none;
}

/*
end custom css
*/