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

.preview-64 { width: 64px; height: 64px; }.preview-160 { width: 160px; height: 160px; }.preview-256 { width: 256px; height: 256px; }
.logo-image {
    background-image: url('../img/triggre_logo.png?A0135C4AD6FA3033024EB1EB33310C25');
}

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

.preview-64 {
    width: 64px;
    height: 64px;
}

.preview-160 {
    width: 160px;
    height: 160px;
}

.preview-256 {
    width: 256px;
    height: 256px;
}

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

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

.preview-64 {
    width: 64px;
    height: 64px;
}

.preview-160 {
    width: 160px;
    height: 160px;
}

.preview-256 {
    width: 256px;
    height: 256px;
}

/* Triggre base */
@media all {
    /* 
 * TRIGGRE DEFAULT TEMPLATE - YELLOW
 * 
 * This is the default Triggre CSS template, yellow edition, adapted to resemble MS. colors defined under 'root' can be
 * replaced to quickly create a different colored design (make sure to replace both * HEX and RGB ones if indicated):
  *
 * This design uses a different logo than the one set in designer; also it uses an image
 * on the error pages and vertical scroll forms. To change images, please make sure the image
 * is placed on cdn.triggre.com (otherwise it isn't accessible) and then replace:
 *
 *      Logo            https://cdn.triggre.com/triggre/img/triggre-white.png 
 *      Header          https://cdn.triggre.com/triggre/img/homepage.png
 */
    /* COLORS DEFINITIONS */
    :root {
        /* root fonts */
        --main-font: Trebuchet MS, sans-serif;
        /* root colors */
        --body-bg-color: #808080;
        --header-bg: transparent;
        --lite-bg: #FAF1F2;
        --lite-bg-active: rgba(219, 0, 14, 0.75);
        --dark-bg: #676767;
        --menu-level3: #ffffff;
        --header-color: #ffffff;
        --text-color: ;
        --full-white: #ffffff;
        --yellow: #F1D341;
        --link-color: #064797;
        --button-text: #ffffff;
        --button-bg: rgba(219, 0, 14, 0.75);
        --button-bg-hover: rgb(219, 37, 49);
        --button-border: 1px solid #a4a4a4;
        --grid-line: #e1e1e1;
        --transparent-line: 1px solid rgba(255,255,255,0.3);
        /* root FX */
        --body-bg-img: url("https://cdn.triggre.com/maarten-veerbeek/achtergrond app 6.png");
        --body-bg-inlog: url("https://cdn.triggre.com/maarten-veerbeek/inlog 3.png");
        /* --body-overlay: linear-gradient(180deg, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0.21612394957983194) 16%, rgba(0,0,0,0.21612394957983194) 100%); */
        /* --body-overlay: rgba(0,0,0,0.28); */
        /* --body-overlay: rgba(255,255,255,0.10); */
        --overlay-dark: rgba(0,0,0,0.34);
        --overlay-lite: rgba(255,255,255,0.43);
        /* --overlay-blend: darken; */
        /* --overlay-blend: lighten; */
        --text-shadow: 1px 1px 2px rgba(0,0,0,0.86);
        --td-box-shadow: inset 1px 0 0 #dadce0,inset -1px 0 0 #dadce0,0 1px 2px 0 rgba(60,64,67,.3),0 1px 3px 1px rgba(60,64,67,.15);
    }

    /* BODY BACKGROUND IMAGE AND OVERLAY */
    /* @media (min-width: 980px) { */
    body {
        background-image: var(--body-bg-img) !important;
        background-size: cover;
        background-position: center;
        z-index: -1;
    }

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

    /* } */
    /* Set fonts */
    body, html, pre {
        font: normal 15px / 1.5 var(--main-font);
        letter-spacing: 0;
        background-color: var(--body-bg-color);
    }

    h1, h2, h3, h4, h5, h6 {
        font: var(--main-font);
        font-weight: bold;
        font-style: normal;
        text-transform: uppercase;
        color: var(header-color);
    }

    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 {
        letter-spacing: 0;
    }

    /* Menu font size and weight */
    html:not(.mobile) #menu .level-1 > li > a {
        font-size: 16px;
        font-weight: 600;
    }

    #menu .level-2 > li {
        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;
    }

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

    /* Font for main page title on vertical scroll pages */
    body[class*="_vscroll"] #menu > ul::before, .error-page #menu > ul::before {
    }

    /* Font for page sub title on vertical scroll pages */
    body[class*="_vscroll"] #menu > ul::after, .error-page #menu > ul::after {
    }

    /* Font for login button on an error page */
    .error-page #user a.login {
    }

    /* 
 * TRIGGRE GENERAL DEFINITIONS
 * 
 * following definitions are general rules for widgets, buttons, etc. These form
 * base of Triggre visual style.
 *
 */
    /* Make sure charts don't have borders */
    .k-chart canvas {
        border: none;
    }

    /* No shadow on context bar, and use space cleared up by moving search to top */
    #context-bar {
        box-shadow: none;
        padding-right: 12px;
        height: 48px;
    }

    /* 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, var(--dark-bg) 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: var(--text-color);
    }

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

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

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

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

    canvas, input[type=email], input[type=password], input[type=text], textarea {
        border: var(--button-border);
    }

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

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

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

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

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

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

    /* search box bg color */
    .mobile #context-bar.search-box-opened {
        background: var(--menu-level3);
    }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    #menu a:hover {
        color: var(--dark-bg);
    }

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

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

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

    /* Logout link hover color */
    #user .user-menu-btn .drop-down .user-menu-footer .auth:hover {
        color: var(--dark-bg);
    }

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

    /* Context bar button color, including login button */
    #context-bar button {
        color: var(--text-color);
    }

    #context-bar button, #context-bar button:active, #context-bar button:focus, #context-bar button:visited {
        background-color: var(--button-bg);
        color: var(--full-white);
        text-transform: none;
        text-shadow: var(--text-shadow);
        border-radius: 16px;
        text-align: center;
    }

    /* 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 {
        background-color: var(--button-bg-hover);
        color: var(--full-white) !important;
    }

    /* login button  color */
    #auth .auth-control .footer .btn {
        background-color: var(--button-bg-hover);
        color: var(--full-white);
        text-transform: none;
    }

    #auth .auth-control .footer .btn:hover, #auth .auth-control .footer .btn:focus {
        background-color: var(--button-bg-hover);
        color: var(--full-white) !important;
    }

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

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

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

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

    /* Content */
    #inner {
        padding-left: 15px;
        background: var(--lite-bg) !important;
        border-left: 1px solid var(--grid-line);
        border-top: 1px solid var(--grid-line);
    }

    @media screen and (min-width: 980px) {
        #inner {
            left: 250px !important;
            top: 38px !important;
            bottom: 48px !important;
            padding-left: 15px;
            padding-top: 15px;
            background: rgba(255,255,255,0.93) !important;
        }
    }

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

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

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

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

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

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

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

    .k-grid tr.k-state-selected td, .k-grid tr:hover.k-state-selected td, .k-grid tr:hover td {
        color: var(--text-color);
    }

    /* 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: var(--dark-bg);
    }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    /* Grid row color */
    .k-grid tr:hover {
        background-color: var(--lite-bg-active);
    }

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

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

    /* Selected drop down items */
    .k-list-container .k-list [role=option].k-state-selected {
        color: var(--button-text);
        background-color: var(--dark-bg);
    }

    .k-list-container .k-list [role=option]:hover.k-state-selected {
        color: var(--button-text);
        background-color: var(--dark-bg);
        opacity: .9;
        border-color: var(--dark-bg);
    }

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

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

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

    /* Textarea, input and canvas border hover colors */
    input[type="email"]:hover, input[type="text"]:hover, input[type="password"]:hover, textarea:hover, canvas:hover, input[type="email"]:focus, input[type="text"]:focus, input[type="password"]:focus, textarea:focus, canvas:focus {
        border-color: #888888;
    }

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

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

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

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

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

    .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 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 right */
    html:not(.mobile) #menu .level-1 > li {
        float: left;
        display: inline-block;
        list-style: none;
    }

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

    /* Bigger logo size, lower position */
    html:not(.mobile) #header #logo {
        left: 28px;
        top: 16px;
        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;
        background: transparent;
        border-top: 1px solid var(--transparent-line);
    }

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

    /* Set context bar height */
    .mobile #context-bar {
        height: 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: 58px;
    }

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

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

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

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

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

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

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

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

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

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

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

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

    /* File upload button */
    .field .editor .k-upload .k-dropzone .k-upload-button {
        background-color: var(--button-bg);
        color: var(--button-text);
        border: var(--button-border);
        border-radius: 6px;
        padding: 5px 10px;
        transition: all 0.3s ease;
    }

    .field .editor .k-upload .k-dropzone .k-upload-button:hover {
        background-color: var(--link-color);
        color: var(--full-white);
    }

    /* 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 */
    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^="has-search page-"] header, body[class^="has-search page-"] #content, body[class^="has-search page-"] #header.menu-shown #menu, body[class^="has-search 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(0,103,184,0.2);
        border-right: 3px solid rgba(0,103,184,0.2);
        border-bottom: 3px solid rgba(0,103,184, 0.2);
        border-left: 3px solid rgba(0,103,184, 1.0);
    }

    #auth .auth-control .loader .spinner-layer {
        border-color: var(--lite-bg-active);
    }

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

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

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

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

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

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

    /* 
* SMALLER DESKTOP SCREENS
*
* For desktop screens that are smaller than 1280px wide, make all elements a bit smaller so more stuff fits.
*/
    @media only screen and (max-width: 1280px) {
        /* Standard font size */ html:not(.mobile), html:not(.mobile) body, html:not(.mobile) pre {
            font-size: 13px;
        }

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

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

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

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

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

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

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

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

        /* Page title size */
        html:not(.mobile) #title {
            font-size: 16px;
            top: 114px;
            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: 13px;
        }

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

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

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

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

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

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

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

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

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

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

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

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

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

    /* 
* SMALL DESKTOP SCREENS
*
* For desktop screens that are smaller than 1600px wide, make all elements a bit smaller so more stuff fits.
*/
    @media only screen and (max-width: 1600px) {
        /* Standard font size */ html:not(.mobile), html:not(.mobile) body, html:not(.mobile) pre {
            font-size: 13px;
        }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    /* Office template, resembling web version of onedrive */
    @media all {
        @media all {
            @media all {
                /* Main menu color */
                html:not(.mobile) #menu {
                    background-color: var(--header-bg);
                    border-bottom: var(--transparent-line);
                }

                #user {
                    color: var(--full-white);
                }

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

                html:not(.mobile) #menu .level-1>li>a {
                    color: var(--full-white);
                }

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

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

                /* Active section link color */
                html:not(.mobile) #menu .level-1>li.current>a {
                    color: var(--button-bg-hover);
                }

                /* Tile hover border color */
                html body[class*="_tiles"] #context-bar .button:hover {
                    border: 2px solid var(--lite-bg-active);
                }

                /* Mobile header */
                .mobile #header {
                    background: var(--eader-b);
                }

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

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

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

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

            /* Menu font size and weight */
            html:not(.mobile) #menu .level-1 > li > a {
                font-size: 16px;
                font-weight: 400;
            }

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

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

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

            /* Font for main page title on vertical scroll pages */
            body[class*="_vscroll"] #menu > ul::before, .error-page #menu > ul::before {
            }

            /* Font for page sub title on vertical scroll pages */
            body[class*="_vscroll"] #menu > ul::after, .error-page #menu > ul::after {
            }

            /* Font for login button on an error page */
            .error-page #user a.login {
            }
        }

        /* Auth screen */
        @media all {
            /* Use background landscape */
            #auth .decorator {
                background-image: var(--body-bg-inlog);
                background-size: cover;
                background-position: center;
            }

            /* Make header white */
            #auth .auth-control .header {
                background: var(--full-white);
            }

            /* Make text on header dark */
            #auth .auth-control .header .title {
                color: var(--text-color);
                font-weight: 600;
            }

            /* Remove border radius from button and auth window */
            #auth .auth-control, #auth .auth-control .footer .main {
                border-radius: 0;
            }
        }

        /* Desktop styles */
        @media all {
            /* Make main menu small */
            html:not(.mobile) #menu {
                height: 50px;
            }

            /* Make logo small */
            html:not(.mobile) #header #logo {
                left: 20px;
                top: 0px;
                width: 146px;
                height: 47px;
            }

            /* Reposition section menu */
            html:not(.mobile) #menu .level-1 {
                height: 50px;
                top: 0px;
                left: 270px;
                right: 0;
                padding: 0;
                margin: 0;
                max-width: calc(100vw - 440px);
            }

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

            html:not(.mobile) #menu .level-1>li {
                text-shadow: var(--text-shadow);
                color: var(--full-white);
            }

            html:not(.mobile) #menu .level-1>li:hover {
                /* background-color: var(--overlay-lite); */
                color: var(--full-white);
            }

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

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

            /* Section link hover */
            html:not(.mobile) #menu .level-1>li:not(.current):hover a {
                text-shadow: none;
                color: var(--full-white);
            }

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

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

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

            /* Reposition user menu and icon */
            #user {
                top: 0px;
            }

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

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

            /* Move search box left */
            html:not(.mobile) .search-box {
                left: 0px;
                right: initial;
                top: 56px;
                height: 44px;
                width: 270px;
                background-color: transparent;
                padding-right: 20px;
                border-bottom: var(--transparent-line) !important;
            }

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

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

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

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

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

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

            /* Add a search icon */
            html:not(.mobile) .search-box .content {
                font-size: 16px;
                line-height: 20px;
                background-color: rgba(0,0,0,0.20);
                /* border: 1px solid rgba(255,255,255,0.76); */
                border-radius: 20px;
            }

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

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

            html:not(.mobile) .search-box .open-advanced, html:not(.mobile) .search-box .close-advanced {
                color: #fff;
            }

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

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

            html:not(.mobile) body[class*="_tiles"] #context-bar {
                padding-top: 65px;
            }

            /* Color of scroll arrows for context bar */
            #context-bar>.buttons .scroll-btn-left, #context-bar>.buttons .scroll-btn-right, #context-bar>.buttons .scroll-btn-left, #context-bar>.buttons .scroll-btn-left {
                color: var(--button-text);
            }

            /* Make context bar buttons look office like */
            html:not(.mobile) #context-bar .button {
                color: var(--full-white);
                background: var(--button-bg);
                /* padding: 0 16px; */
                margin: 0;
                text-shadow: var(--text-shadow);
                /* 			border-radius: 16px; */
                font-size: 16px;
            }

            html:not(.mobile) #context-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 {
                margin-right: 2px;
            }

            html:not(.mobile) .scroller>.content {
                margin-left: 0;
                height: 49px;
            }

            html:not(.mobile) #context-bar .button:hover {
                background: var(--button-bg-hover);
                color: var(--full-white) !important;
            }

            #context-bar>.buttons {
                line-height: 50px;
                height: 50px;
            }

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

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

            /* Give first category a top border */
            html:not(.mobile) #menu .level-2>li {
            }

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

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

            /* Level3 'icon' */
            html:not(.mobile) #menu .level-3>li a {
                padding-left: 8px;
                color: var(--menu-level3);
                font-weight: 400;
            }

            html:not(.mobile) #menu .level-3>li a:before, html.mobile #menu .level-3>li a:before {
                content: '🍁 ';
                color: var(--menu-level3);
                font-size: 16px;
            }

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

            /* Hover color for left menu */
            html:not(.mobile) #menu .level-3>li:hover {
                background-color: var(--overlay-lite);
                border-radius: 0 18px 18px 0;
            }

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

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

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

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

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

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

            /* Inner content */
            html:not(.mobile) #inner {
                top: 110px;
                left: 280px;
                bottom: 0px;
            }

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

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

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

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

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

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

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

            /* Layout page title nicely */
            html:not(.mobile) .layout>.layout-cell>.layout-cell-title {
                padding-left: 9px;
            }

            /* Layout content page nicely */
            html:not(.mobile) .layout>.trg-control-layout>.layout-cell-content {
                padding-left: 8px;
            }

            /* Layout content nicely */
            .content {
                margin-left: 0;
                padding-left: 10px;
                padding-right: 15px;
            }

            /* context-bar dropdown */
            /* 			html:not(.mobile) #context-bar .button-with-dropdown-menu .dropdown-menu.active {
				top: 44px !important;
				left: 0px !important;
				position: absolute;
			}
			html:not(.mobile) #context-bar .button-with-dropdown-menu .dropdown-menu.active:hover {
				background: #fff;
				box-shadow: 2px 0 5px 0 rgba(0,0,0,.16),2px 0 10px 0 rgba(0,0,0,.12);
				opacity: 1 !important;
			}
			html:not(.mobile) #context-bar .button-with-dropdown-menu .dropdown-menu.active:after {
				top: -10px;
				left: 26px;
				-webkit-transform: rotate(0deg);
				transform: rotate(0deg);
			} */
            html:not(.mobile) #context-bar .dropdown-menu-content .menu-item {
                text-shadow: none;
            }

            /* 
        * SMALLER DESKTOP SCREENS
        *
        * For desktop screens that are smaller than 1280px wide, make all elements a bit smaller so more stuff fits.
        */
            @media only screen and (max-width: 1280px) {
                /* Keep menu width same */ html:not(.mobile) #menu .level-2 {
                    width: 270px;
                }

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

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

            /* 
        * SMALL DESKTOP SCREENS
        *
        * For desktop screens that are smaller than 1600px wide, make all elements a bit smaller so more stuff fits.
        */
            @media only screen and (max-width: 1600px) {
                /* Keep menu width same */ html:not(.mobile) #menu .level-2 {
                    width: 270px;
                }

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

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

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

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

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

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

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

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

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

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

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

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


.page-Select_category .k-header, 
.page-Select_category_kits .k-header,
.page-Select_part_category_CAD .k-header,
.page-Select_kit_category_CAD .k-header,
.page-Select_kit_category_USD .k-header,
.page-Select_category_CAD .k-header{
    display: none !important;
}

.page-Select_category .k-grid tr td, 
.page-Select_category_kits .k-grid tr td,
.page-Select_part_category_CAD .k-grid tr td,
.page-Select_part_category_USD .k-grid tr td,
.page-Select_kit_category_CAD .k-grid tr td,
.page-Select_category_CAD .k-grid tr td,
.page-Select_kit_category_USD .k-grid tr td {
    text-align: center;
}

.page-Select_category .k-grid tr td figure, 
.page-Select_category_kits .k-grid tr td figure,
.page-Select_part_category_CAD .k-grid tr td figure,
.page-Select_kit_category_CAD .k-grid tr td figure,
.page-Select_kit_category_USD .k-grid tr td figure,
.page-Select_category_CAD .k-grid tr td figure,
.page-Select_part_category_USD .k-grid tr td figure {
    margin: 0 auto;
}

.page-Select_category .k-grid .k-selectable, 
.page-Select_category_kits .k-grid .k-selectable,
.page-Select_part_category_CAD .k-grid .k-selectable,
.page-Select_kit_category_CAD .k-grid .k-selectable,
.page-Select_kit_category_USD .k-grid .k-selectable,
.page-Select_category_CAD .k-grid .k-selectable,
.page-Select_part_category_USD .k-grid .k-selectable{
    border-spacing: 30px;
    border-collapse: separate;
    table-layout: auto;
}

.page-Select_part_category_CAD .trg-block-1  tbody[role="rowgroup"], 
.page-Select_part_category .trg-block-1  tbody[role="rowgroup"], 
.page-Select_part_category_USD .trg-block-1  tbody[role="rowgroup"],
.page-Select_category_CAD .trg-block-1  tbody[role="rowgroup"],
.page-Select_kit_category_CAD .trg-block-1  tbody[role="rowgroup"],
.page-Select_kit_category_USD .trg-block-1  tbody[role="rowgroup"],
.page-Select_kit_category .trg-block-1  tbody[role="rowgroup"],
.page-Select_category_kits .trg-block-1  tbody[role="rowgroup"],
.page-Select_category .trg-block-1  tbody[role="rowgroup"]{
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* 4 columns */
  gap: 20px; /* spacing */
}

.page-Select_category .trg-block-1 .table-list tbody[role=rowgroup] tr[role=row], 
.page-Select_category_kits .trg-block-1 .table-list tbody[role=rowgroup] tr[role=row],
.page-Select_part_category_CAD .trg-block-1 .table-list tbody[role=rowgroup] tr[role=row],
.page-Select_category_CAD .trg-block-1 .table-list tbody[role=rowgroup] tr[role=row],
.page-Select_kit_category_CAD .trg-block-1 .table-list tbody[role=rowgroup] tr[role=row],
.page-Select_kit_category_USD .trg-block-1 .table-list tbody[role=rowgroup] tr[role=row],
.page-Select_part_category_USD .trg-block-1 .table-list tbody[role=rowgroup] tr[role=row] {
  display: block; /* make each row behave like a card */
  border: 1px solid #ccc;
  padding: 10px;
  text-align: center;
  height: 140px !important;
}

@media only screen and (max-width: 900px) {
.page-Select_part_category_CAD .trg-block-1  tbody[role="rowgroup"], 
.page-Select_part_category .trg-block-1  tbody[role="rowgroup"], 
.page-Select_category_CAD .trg-block-1  tbody[role="rowgroup"], 
.page-Select_part_category_USD .trg-block-1  tbody[role="rowgroup"],
.page-Select_category_kits .trg-block-1  tbody[role="rowgroup"]{
        width: 120% !important;
    }
}

.page-Select_category .k-grid tr td, 
.page-Select_category_CAD .k-grid tr td,
.page-Select_category_kits .k-grid tr td,
.page-Select_part_category_CAD .k-grid tr td,
.page-Select_part_category_USD .k-grid tr td,
.page-Select_kit_category_CAD .k-grid tr td,
.page-Select_kit_category_USD .k-grid tr td,
.page-Select_part_category_USD .k-grid tr td
 {
    border: 0 !important;
}

.page-Select_category .table-list td, 
.page-Select_category_kits .table-list td,
.page-Select_category_CAD .table-list td,
.page-Select_part_category_CAD .table-list td,
.page-Select_part_category_USD .table-list td,
.page-Select_kit_category_CAD .table-list td,
.page-Select_kit_category_USD .table-list td, 
.page-Select_part_category_USD .table-list td{
    clear: both !important;
    display: block !important;
}

.page-Loose_parts .trg-block-2, 
.page-Loose_parts .trg-block-2 *,
.page-Loose_parts_CAD .trg-block-2, 
.page-Loose_parts_CAD .trg-block-2 th, 
.page-Loose_parts_CAD .trg-block-2 td, 
.page-Loose_parts_CAD .trg-block-2 tr, 
.page-Loose_parts_CAD .trg-block-2 table,
.page-Loose_parts_USD .trg-block-2, 
.page-Loose_parts_USD .trg-block-2 th, 
.page-Loose_parts_USD .trg-block-2 td, 
.page-Loose_parts_USD .trg-block-2 tr, 
.page-Loose_parts_USD .trg-block-2 table
{
    background: #efefef !important;
}
 



.page-Add_kits .trg-block-2,
.page-Add_kits .trg-block-2 *,
.page-Loose_parts .trg-block-2,
.page-Loose_parts .trg-block-2 *,
.page-Assembled_parts .trg-block-2,
.page-Assembled_parts .trg-block-2 *,
.page-Loose_parts_CAD .trg-block-2,
.page-Loose_parts_CAD .trg-block-2 *,
.page-Add_kits_CAD .trg-block-2,
.page-Add_kits_CAD .trg-block-2 *,
.page-Assembled_parts_CAD .trg-block-2,
.page-Assembled_parts_CAD .trg-block-2 *,
.page-Add_kits_USD .trg-block-2,
.page-Add_kits_USD .trg-block-2 *,
.page-Loose_parts_USD .trg-block-2,
.page-Loose_parts_USD .trg-block-2 *,
.page-Assembled_parts_USD .trg-block-2,
.page-Assembled_parts_USD .trg-block-2 *
{
    background: #efefef !important;
}

.trg-section-menu{
    padding-bottom:  70px !important;
}


html:not(.mobile) #context-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: 14px !important;
}