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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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

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

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

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

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


        /* root FX */
        --body-bg-img: #f1f5f9;
        --bg-inlog: url("https://cdn.triggre.com/shuttel/background_1.png");
        --logo: url("https://cdn.triggre.com/shuttel/Shuttel logo.svg");
        --overlay-dark: #2d2e83;
        --overlay-lite: #F1F5F9;
        --td-box-shadow: inset 1px 0 0 #dadce0, inset -1px 0 0 #dadce0, 0 1px 2px 0 rgba(60, 64, 67, .3), 0 1px 3px 1px rgba(60, 64, 67, .15);

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



    /* BODY BACKGROUND IMAGE AND OVERLAY */
    .logo-image {
        background-image: var(--logo)
    }

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

    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 14px / 1.5 var(--main-font);
        letter-spacing: 0;
    }

    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        font-family: var(--header-font);
        font-weight: 600;
        text-transform: none;
        color: #000000;
    }

    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: var(--header-font);
        letter-spacing: 0;
    }

    h3 {
        text-transform: uppercase;
        font-weight: bold;
    }

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

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


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

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

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

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

    /* Authentication screen background*/
    #auth .decorator {
        background-image: var(--bg-inlog)
    }

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

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

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

    #auth .auth-control .header .logo {
        position: relative;
        bottom: 12px;
    }

    /* 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,
    .k-dropdown-wrap.k-state-default,
    .k-numeric-wrap.k-state-default,
    .k-picker-wrap.k-state-default {
        border: 1px solid #8BA1BC;
        font-family: "CiutadellaRounded Regular", Calibri, open sans, sans-serif;
    }

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

    .field.flexible {
        margin-left: 0px;
    }


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

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

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

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

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

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

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

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

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

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

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

    /* User hover color */
    #user .user-menu-btn .user-menu-icon:hover {
        color: var(--user-icon);
        opacity: 0;
        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;
    }

   

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

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


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

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

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


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

    /* Content */

    #inner {
        background: #fff !important;           
        width: 80%;
        top: 15%;
        padding-left: 21px;
        padding-right: 12px;
        padding-top: 16px;
        border-radius: 16px;
        margin-right: auto;
        margin-left: 50px;
    }

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

 /*   @media screen and (min-width: 1200px) {
        html:not(.mobile) #inner {
            width: 70%;
        }
    }
*/
    @media screen and (min-width: 1400px) {
        html:not(.mobile) #inner {
            top: 10%;
            width: 75%;
            height: 80%;
        }

    }

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

    /*
 * Form colors
 */

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

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

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

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

    /* Dropdown item color when selected and hovered */
    .form .type-lookup .editor .list-popup .list .k-grid-content tr.k-state-selected td.k-state-focused {
        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: #fff;
    }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    .k-list-container .k-list [role=option]:hover, 
    .k-list-container .k-list [role=option]:hover.k-state-selected {
        color: #2D2E83;
        background-color:transparent;
        border-color:transparent;
        background-color:#E2EBF3;
    }

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

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

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

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

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

    /*
 * General layout settings for all pages
 */

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

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

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

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

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

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

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

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

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

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

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

    /* Bigger logo size, lower position */
    html:not(.mobile) #header #logo {
        left: 28px;
        top: 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 0px 0px 0px;
    }

    /* 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;
        /* border-right: 1px solid var(--grid-line); */
        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: 64px;
    }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

        /* Standard font size */
        html:not(.mobile),
        html:not(.mobile) body,
        html:not(.mobile) pre {
            font-size: 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: 50px;
            left: 270px;
        }
*/
        /* Grid header */
        html:not(.mobile) .k-grid-header th.k-header,
        .k-filter-row th {
            padding: .5em;
        }

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

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

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

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

        /* Context bar height and sizing */
        html:not(.mobile) #context-bar {
            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: 14px;
            margin: 0;
        }

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

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

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

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

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

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

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

        /* 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: 49px;
        }
*/
        /* Grid header */
        html:not(.mobile) .k-grid-header th.k-header,
        .k-filter-row th {
            padding: .5em;
        }

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

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

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

        /* Context bar height and sizing */
        html:not(.mobile) #context-bar {
            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(--lite-bg);
                    border-bottom: var(--transparent-line);
                }

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

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

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

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

                /* 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(--body-bg-img);
                }

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

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

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

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

        /* 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;
                font-weight: bold;
            }

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

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

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

        /* Auth screen */
        @media all {

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

        /* Desktop styles */
        @media all {

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

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

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

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

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

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

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

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

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

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

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

            /* Move search box left */
            html:not(.mobile) .search-box {
                right: initial;
                top: 4px;
                right: 150px;
                height: 64px;
                width: 270px;
                background-color: transparent;
                padding-right: 16px;
                padding-top: 12px;
            }

            /* 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: 16px;
                background-color: #8adcff;
                color: #fff;
                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: 24px;
                color: #fff;
            }

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

            html:not(.mobile) .search-box .open-advanced,
            html:not(.mobile) .search-box .close-advanced {
                color: #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: 16px;
                top: 68px;
            }

            /*  */

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

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

            html:not(.mobile) #menu .level-2>li:child::before {
                content: url('https://cdn.triggre.com/shuttel/shuttle_icon_16.png');
                display: inline;
                width: 1px;
                height: 1px;
            }

            html:not(.mobile) #menu .level-2>li:nth-child(1)::before {
                content: url('https://cdn.triggre.com/shuttel/shuttle_icon_16.png');
                display: inline;
                width: 1px;
                height: 1px;
            }

            /* 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: #556E8C;
                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: 14px;
            }

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


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

            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: 270px;
            }

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

            html:not(.mobile) #menu .level-3>li.current a,
            html:not(.mobile) #menu .level-3>li.current a:before {
                color: #2441ff;
            }

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

            }

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

            }

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

            }

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

            }

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

            }

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

            }

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

            }

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

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

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

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

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

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

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

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

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

            /* Inner content */
    /*        html:not(.mobile) #inner {
                top: 110px;
                left: 380px;
                bottom: 0px;
                border-radius: 16px;
                height: 76vh;
                padding-bottom: 16px;
            }
*/
            /* Adjust table row size */
            .table-list tbody[role=rowgroup] tr[role=row] {
                height: 54px;
            }

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

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

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

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

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

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

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

            /* UITGESCHAKELD SB20251023 SHU-465 - 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;
            }

            input:hover,
            .k-dropdown-wrap.k-state-default:hover,
            .k-picker-wrap.k-state-default:hover {
                border-color: #2441ff !important;
            }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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



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

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


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

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

h3.layout-cell-title {
    font-size: 22px;
}

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

html:not(.mobile) .layout>.layout-cell>.layout-cell-title  {
    margin-left: 0px;
    padding-left: 0px;
    padding-right: 0px;
}

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

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

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

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

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

button {
    text-transform:uppercase !important;
}




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

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

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

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

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

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

.field {
    margin: 0 0px;
}

.field .validation {
    max-width: initial;
}

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

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

.k-link-increase,
.k-link-decrease  {
    height:50% !important;
}
.k-group {
    background-color: #F1F5F9;
    color:#556E8C;
}
.page-Authenticatie_code #context-bar button:nth-child(2):hover,
.page-Your_authentication_code #context-bar button:nth-child(2):hover,
.page-Ihr_Authentifizierungscode #context-bar button:nth-child(2):hover,
 #user .user-menu-btn:hover {
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.15);
    transition: background-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

/* ============================================
   USER MENU ICON (SMILEY)
   ============================================ */
#user .user-menu-btn {
  background-image: url('https://cdn.triggre.com/shuttel/my_shuttel.png'); /* Smiley */
  background-repeat: no-repeat;
  background-position: center;

  position: fixed;
  top: 12px;
  right: 32px; /* naast wereldbol */
  z-index: 10000;

  width: 45px;
  height: 45px;
  border-radius: 50%;
  background-color: #F1F5F9;
  box-shadow: 4px 2px 4px 2px rgba(0, 0, 0, 0.1);
  box-sizing: border-box;
  cursor: pointer;
  transition: all 0.15s ease-in-out;
}

/* Hover effect */
#user .user-menu-btn:hover {
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.15);
  transform: scale(1.03);
}

/* Responsief gedrag */
@media (max-width: 1024px) {
  #user .user-menu-btn {
    right: 20px;
  }
}
/* -----------------------------------------------
Buttons
-------------------------------------------------*/
/* ============================================
   UITGESCHAKELD 2025-10-22 door Suzanne Boelens Context-bar knoppen (excl. wereldbol)
   ============================================ */
/* #context-bar button:not(:last-of-type),
#context-bar button:not(:last-of-type):active,
#context-bar button:not(:last-of-type):focus,
#context-bar button:not(:last-of-type):visited {
  background-color: #2441FF;
  color: #FFF;
  border: 1px solid #2441FF;
  border-radius: 38px;
  text-transform: none;
  text-shadow: var(--text-shadow);
}
/* Let op: wereldbol is uitgesloten via :not(:last-of-type) */
/* #context-bar button:not(:last-of-type):hover {
  background-color: #2D2E83;
  color: #E5E5E5; /* Lichtere tekstkleur 
} */
/* UITGESCHAKELD 2025-10 door Suzanne Boelens - veroorzaakte conflict tussen witte/blauwe knoppen */
/*
html:not(.mobile) #context-bar button:not(:last-of-type):hover,
html:not(.mobile) #context-bar button:not(:last-of-type):active:hover,
html:not(.mobile) #context-bar button:not(:last-of-type):focus,
html:not(.mobile) #context-bar button:not(:last-of-type):focus:hover,
html:not(.mobile) #context-bar button:not(:last-of-type):visited:hover,
html:not(.mobile) .page-Bestuurdersinformatieoverzicht #context-bar button:not(.hidden):not(:last-of-type)+button:nth-child(5):hover,
html:not(.mobile) .page-UBOoverzicht #context-bar button:not(.hidden):not(:last-of-type)+button:nth-child(5):hover {
  background-color: #2D2E83;
  color: #FFF;
  border: solid 1px #2D2E83;
}
*/

/* #context-bar button:first-child:not(:last-child),
.page-Bestuurdersinformatieoverzicht #context-bar button:not(.hidden)+button:nth-child(3),
.page-UBOoverzicht #context-bar button:not(.hidden)+button:nth-child(3) {
    background-color: #fff;
    color: #2441FF;
} */

/* #context-bar button:first-child:not(:last-child):hover,
.page-Bestuurdersinformatieoverzicht #context-bar button:not(.hidden)+button:nth-child(3):hover,
.page-UBOoverzicht #context-bar button:not(.hidden)+button:nth-child(3):hover {
    background-color: #FFF;
    color: #2D2E83;
    border: solid 1px #2D2E83;
}


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

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


html:not(.mobile) .page-Bestuurdersinformatieoverzicht #context-bar button:nth-child(4):hover,
html:not(.mobile) .page-Bestuurdersinformatieoverzicht #context-bar button:nth-child(4):active:hover,
html:not(.mobile) .page-Bestuurdersinformatieoverzicht #context-bar button:nth-child(4):focus,
html:not(.mobile) .page-Bestuurdersinformatieoverzicht #context-bar button:nth-child(4):focus:hover,
html:not(.mobile) .page-Bestuurdersinformatieoverzicht #context-bar button:nth-child(4):visited:hover,
html:not(.mobile) .page-UBOoverzicht #context-bar button:nth-child(4):hover,
html:not(.mobile) .page-UBOoverzicht #context-bar button:nth-child(4):active:hover,
html:not(.mobile) .page-UBOoverzicht #context-bar button:nth-child(4):focus,
html:not(.mobile) .page-UBOoverzicht #context-bar button:nth-child(4):focus:hover,
html:not(.mobile) .page-UBOoverzicht #context-bar button:nth-child(4):visited:hover {
    background-color: #AE2F3C;
    border-color: #AE2F3C;
    color: #fff;
} */
/* ============================================
   Toegevoegd 2025-10-22 door Suzanne Boelens CONTEXT BAR KNOPPEN (excl. wereldbol)
   ============================================ */

/* Basis: alle knoppen behalve de wereldbol (laatste) zijn blauw */
#context-bar button:not(:last-of-type),
#context-bar button:not(:last-of-type):active,
#context-bar button:not(:last-of-type):focus,
#context-bar button:not(:last-of-type):visited {
  background-color: #2441FF;
  color: #FFF;
  border: 1px solid #2441FF;
  border-radius: 38px;
  text-transform: none;
  text-shadow: var(--text-shadow);
}

/* Hover: blauwe knoppen worden donkerder blauw */
#context-bar button:not(:last-of-type):hover {
  background-color: #2D2E83;
  color: #E5E5E5;
}

/* ============================================
   WITTE KNOP (altijd de eerste knop)
   ============================================ */
#context-bar button:first-child:not(:last-child) {
  background-color: #FFF;
  color: #2441FF;
  border: 1px solid #2441FF;
}

/* Hover: witte knop blijft wit, tekst donkerder blauw */
#context-bar button:first-child:not(:last-child):hover {
  background-color: #FFF;
  color: #2D2E83;
  border: 1px solid #2D2E83;
}

/* ============================================
   RODE KNOPPEN (alleen specifieke paginas)
   ============================================ */
/* .page-Bestuurdersinformatieoverzicht #context-bar button:nth-child(4),
.page-UBOoverzicht #context-bar button:nth-child(4) {
  background-color: #FF2441;
  border-color: #FF2441;
  color: #FFF;
} */

/* NL Hover Bestuurdersinformatieoverzicht: rood > donkerrood */
/* html:not(.mobile)
  .page-Bestuurdersinformatieoverzicht #context-bar button:nth-child(4):hover,
html:not(.mobile)
  .page-Bestuurdersinformatieoverzicht #context-bar button:nth-child(4):active:hover,
html:not(.mobile)
  .page-Bestuurdersinformatieoverzicht #context-bar button:nth-child(4):focus,
html:not(.mobile)
  .page-Bestuurdersinformatieoverzicht #context-bar button:nth-child(4):focus:hover,
html:not(.mobile)
  .page-Bestuurdersinformatieoverzicht #context-bar button:nth-child(4):visited:hover,
html:not(.mobile) */
/* NL Hover UBOoverzicht: rood > donkerrood */
  /* .page-UBOoverzicht #context-bar button:nth-child(4):hover,
html:not(.mobile)
  .page-UBOoverzicht #context-bar button:nth-child(4):active:hover,
html:not(.mobile)
  .page-UBOoverzicht #context-bar button:nth-child(4):focus,
html:not(.mobile)
  .page-UBOoverzicht #context-bar button:nth-child(4):focus:hover,
html:not(.mobile)
  .page-UBOoverzicht #context-bar button:nth-child(4):visited:hover,
  {
  background-color: #AE2F3C;
  border-color: #AE2F3C;
  color: #FFF;
}
/* ============================================
   Toevoeging Suzanne Boelens 22-10-2025 compacter RODE KNOPPEN (specifieke pagina's)
   ============================================ */

/* 1️⃣ Basis rood – knop 4 op deze pagina's */
.page-Bestuurdersinformatieoverzicht #context-bar button:nth-child(4),
.page-UBOoverzicht #context-bar button:nth-child(4),
.page-Overview_of_information_on_directors #context-bar button:nth-child(4),
.page-Overview_of_company_UBOs #context-bar button:nth-child(4),
.page-Risk_levels_overview #context-bar button:nth-child(4) {
  background-color: #FF2441;
  border-color: #FF2441;
  color: #FFF;
}

/* 2️⃣ Hover/focus/visited – donkerrood bij interactie */
html:not(.mobile)
  .page-Bestuurdersinformatieoverzicht #context-bar button:nth-child(4):is(:hover, :active:hover, :focus, :focus:hover, :visited:hover),
html:not(.mobile)
  .page-UBOoverzicht #context-bar button:nth-child(4):is(:hover, :active:hover, :focus, :focus:hover, :visited:hover),
html:not(.mobile)
  .page-Overview_of_information_on_directors #context-bar button:nth-child(4):is(:hover, :active:hover, :focus, :focus:hover, :visited:hover),
html:not(.mobile)
  .page-Overview_of_company_UBOs #context-bar button:nth-child(4):is(:hover, :active:hover, :focus, :focus:hover, :visited:hover),
html:not(.mobile)
  .page-Risk_levels_overview #context-bar button:nth-child(4):is(:hover, :active:hover, :focus, :focus:hover, :visited:hover) {
  background-color: #AE2F3C;
  border-color: #AE2F3C;
  color: #FFF;
}
/* -----------------------------------------------
Specific styling for "klant menu"
-------------------------------------------------*/
/* a[href$="/pages/klant"]+.level-2>li:nth-child(2):before,
a[href$="/klant/_welkom/start"]:before,
a[href$="/klant/_voortgang/overzicht"]:before,
a[href$="/klant/_voortgang/afronden"]:before {
    display: inline-block;
    width: 19px;
    height: 19px;
    content: "";
    vertical-align: middle;
    margin-top: -3px;
    margin-right: 8px;
    background-repeat: no-repeat;
}

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

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

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

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


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

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

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

/* move table header text to right */


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

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

/* -----------------------------------------------
[SHU-459] SB20251022 - Menu-iconen (NL + EN, compact)
-------------------------------------------------*/

/* Basis opmaak alle hoofditems */
:is(
  a[href$="/klant/_welkom/startpagina"],
  a[href$="/customer/_welcome/start_page"],
  a[href$="/klant/_voortgang/overzicht"],
  a[href$="/customer/_progress/overview"],
  a[href$="/klant/_voortgang/afronden"],
  a[href$="/customer/_progress/finalize"],
  a[href$="/pages/klant"] + .level-2 > li:nth-child(2),
  a[href$="/pages/customer"] + .level-2 > li:nth-child(2)
):before {
  display: inline-block;
  width: 19px;
  height: 19px;
  content: "";
  vertical-align: middle;
  margin-top: -3px;
  margin-right: 8px;
  background-repeat: no-repeat;
  background-size: contain;
}

/* Iconen per item */
:is(a[href$="/klant/_welkom/startpagina"], a[href$="/customer/_welcome/start_page"]):before {
  background-image: url('https://cdn.triggre.com/shuttel/Home.png');
}
:is(a[href$="/klant/_voortgang/overzicht"], a[href$="/customer/_progress/overview"]):before {
  background-image: url('https://cdn.triggre.com/shuttel/aanmeldingsoverzicht.png') !important;
}
:is(a[href$="/klant/_voortgang/afronden"], a[href$="/customer/_progress/finalize"]):before {
  background-image: url('https://cdn.triggre.com/shuttel/check.png');
}
:is(a[href$="/pages/klant"], a[href$="/pages/customer"]) + .level-2 > li:nth-child(2):before {
  margin-left: 8px;
  background-image: url('https://cdn.triggre.com/shuttel/My_info.png');
}

/* Selected state */
:is(li.current > a[href$="/klant/_welkom/startpagina"], li.current > a[href$="/customer/_welcome/start_page"], 
    a[aria-current="page"][href$="/klant/_welkom/startpagina"], a[aria-current="page"][href$="/customer/_welcome/start_page"]):before {
  background-image: url('https://cdn.triggre.com/shuttel/Home-selected.png');
}
:is(li.current > a[href$="/klant/_voortgang/overzicht"], li.current > a[href$="/customer/_progress/overview"],
    a[aria-current="page"][href$="/klant/_voortgang/overzicht"], a[aria-current="page"][href$="/customer/_progress/overview"]):before {
  background-image: url('https://cdn.triggre.com/shuttel/aanmeldingsoverzicht-selected.png');
}
:is(li.current > a[href$="/klant/_voortgang/afronden"], li.current > a[href$="/customer/_progress/finalize"],
    a[aria-current="page"][href$="/klant/_voortgang/afronden"], a[aria-current="page"][href$="/customer/_progress/finalize"]):before {
  background-image: url('https://cdn.triggre.com/shuttel/check-selected.png');
}


/* -----------------------------------------------
Specific styling for pages
-------------------------------------------------*/

.form-validation+.trg-layout-vertical>.layout-cell:not(:last-of-type, :nth-child(3)),
.form-validation+.trg-layout-vertical>.layout-cell:not(:last-of-type),
.form-validation+.trg-layout-vertical>.layout-cell:not(:last-of-type),
.form-validation+.trg-layout-vertical>.layout-cell:not(:last-of-type),
.form-validation+.trg-layout-vertical>.layout-cell:not(:last-of-type),
.form-validation+.trg-layout-vertical>.layout-cell:not(:last-of-type),
.form-validation+.trg-layout-vertical>.layout-cell:not(:last-of-type),
.form-validation+.trg-layout-vertical>.layout-cell:not(:last-of-type),
/* inactief is niet nodig. Door SB20251022.page-Afronden .layout-cell-title+.layout-cell-content>.layout>.layout-cell:not(:nth-child(3),:nth-child(4),:nth-child(6),:nth-child(7),:nth-child(9), :nth-child(10),:nth-child(12),:nth-child(13),:nth-child(15),:nth-child(16),:nth-child(17),:nth-child(19), :nth-child(20),:nth-child(22), :nth-child(23), :last-child),*/
.form-validation+.trg-layout-vertical>.layout-cell:not(:last-of-type),
.form-validation+.trg-layout-vertical>.layout-cell:not(:last-of-type),
.form-validation+.trg-layout-vertical>.layout-cell:not(:last-of-type),
.form-validation+.trg-layout-vertical>.layout-cell:not(:last-of-type),
.form-validation+.trg-layout-vertical>.layout-cell:not(:last-of-type),
.form-validation+.trg-layout-vertical>.layout-cell:not(:last-of-type),
.form-validation+.trg-layout-vertical>.layout-cell:not(:last-of-type),
.form-validation+.trg-layout-vertical>.layout-cell:not(:last-of-type, :first-of-type) {
    border-bottom: 2px solid #F1F5F9;
}

/* inactief is niet nodig. Door SB20251022.page-Afronden .layout-cell-title+.layout-cell-content>.layout>.layout-cell:not(:first-child, :nth-child(3),:nth-child(4),:nth-child(6),:nth-child(7),:nth-child(9), :nth-child(10),:nth-child(12),:nth-child(13),:nth-child(15),:nth-child(16),:nth-child(17),:nth-child(19), :nth-child(20),:nth-child(22), :nth-child(23), :last-child)  */
.form-validation+.trg-layout-vertical>.layout-cell:not(:first-child, :nth-child(3),:nth-child(4)),
.form-validation+.trg-layout-vertical>.layout-cell,
.form-validation+.trg-layout-vertical>.layout-cell,
.form-validation+.trg-layout-vertical>.layout-cell,
.form-validation+.trg-layout-vertical>.layout-cell:not(:first-child),
.form-validation+.trg-layout-vertical>.layout-cell:not(:first-child),
.form-validation+.trg-layout-vertical>.layout-cell,
.form-validation+.trg-layout-vertical>.layout-cell,
.form-validation+.trg-layout-vertical>.layout-cell,
.form-validation+.trg-layout-vertical>.layout-cell,
.form-validation+.trg-layout-vertical>.layout-cell,
.form-validation+.trg-layout-vertical>.layout-cell,
.form-validation+.trg-layout-vertical>.layout-cell,
.form-validation+.trg-layout-vertical>.layout-cell,
.form-validation+.trg-layout-vertical>.layout-cell{
    padding-bottom: 10px;
}


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

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

/* inactief vervangen door compacter blok toetevoegen documentatie in SHU-400. Door SB20251022 .page-Afronden a[data-route] {
    display: inline-block;
    background-color: #FFF;
    color: #2441FF;
    text-transform: none;
    border-radius: 38px;
    border: solid 1px #2441FF;
    text-transform: uppercase;
    font-weight: bold;
    font-family: "CiutadellaRounded Bold", Calibri, open sans, sans-serif;
    padding: 6px 16px;
}

html:not(.mobile) .page-Afronden a[data-route]:hover {
    background-color: #fff;
    color: #2D2E83;
    border-color:2px solid #2D2E83;
}

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

/* ============================================
   SHU-439 - Door SB20251029 - pagina knoppen & Vraag- en antwoordstijl (lijsten + paragrafen)
   ============================================ */
a[data-route] {
  display: inline-block;
  background-color: #FFF;
  color: #2441FF;
  border-radius: 38px;
  border: 1px solid #2441FF;
  text-transform: uppercase;
  font-weight: bold;
  font-family: "CiutadellaRounded Bold", Calibri, "Open Sans", sans-serif;
  padding: 6px 16px;
  margin-top: 16px;
}

/* Hover: iets donkerder blauw */
html:not(.mobile) a[data-route]:hover {
  background-color: #FFF;
  color: #2D2E83;
  border: 1px solid #2D2E83;
}

/* Vragen in lijsten of paragrafen */
ul li,
.trg-control-html strong,
.trg-text p {
  color: #556E8C;      /* hoofdkleur voor vragen */
}

/* Antwoorden */
.trg-control-html .text-value,
.trg-text p > .text-value,
.trg-text p > span,
.trg-text li > span {
  color: #2C2D35 !important;   /* standaard sitekleur */
  font-weight: 400 !important; /* normale tekstdikte */
  display: inline;
}


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

/*inactief vervangen door compacter blok toetevoegen documentatie in SHU-439, onbekend wat deze pagina's zijn. Door SB20251030.
.page-Company_overview1 ol {
    padding-left:15px;
    width:300px;
}

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

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


/**************************************************
Styling added by Growrs
Added 12-2024 by Nick Callewaert
**************************************************/
--------------------------------------------------------------------------------------------------------





html:not(.mobile) .search-box {
    right: initial;
    top: 4px;
    right: 700px;
    height: 64px;
    width: 270px;
    background-color: transparent;
    padding-right: 16px;
    padding-top: 12px;
}

html:not(.mobile) #context-bar button:hover, html:not(.mobile) #context-bar button:active:hover, html:not(.mobile) #context-bar button:focus, html:not(.mobile) #context-bar button:focus:hover, html:not(.mobile) #context-bar button:visited:hover, html:not(.mobile) .page-Bestuurdersinformatieoverzicht #context-bar button:not(.hidden)+button:nth-child(5):hover, html:not(.mobile) .page-UBOoverzicht #context-bar button:not(.hidden)+button:nth-child(5):hover {
    /* background-color: #2D2E83; */
    }

html:not(.mobile) #menu .level-3>li a:before{
 color:   #556E8C
}

.user-menu-footer{
    
background-image: url('https://cdn.triggre.com/shuttel/shuttel-uitloggen.png');
    
background-repeat: no-repeat;
    
background-position: center;
    
background-size: 20%;


    

}

#user .user-menu-btn .drop-down .user-menu-footer .auth {
    color: black;
    line-height: 1;
    text-align: center;
    display: flex;
    justify-content: center; 
  align-items: center;
   position: relative;
  text-indent: -9999px;

    
}

#user .user-menu-btn .drop-down .user-menu-footer .auth:hover {
    color: white;
    line-height: 1;
}

.k-button.k-upload-button {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
/* === Compact info banner for UBO pages === */
.shuttel-banner {
  background-color: #f0f3ff;
  border-left: 5px solid #3B5BFF;
  padding: 8px 12px;        /* compactere hoogte */
  margin-bottom: 15px;
  display: flex;
  align-items: center;
  border-radius: 4px;
}

.shuttel-banner p {
  margin: 0;
  font-size: 15px;          /* iets kleiner */
  line-height: 1.3;         /* compacter */
}

.shuttel-banner svg {
  margin-right: 8px;
  flex-shrink: 0;
}
/* ============================================
   TAALKNOP (WERELDBOL) — algemeen voor alle pagina’s
   ============================================ */

#context-bar button:is(:not(.hidden)):last-of-type {
  width: 42px !important;
  height: 43px !important;
  border-radius: 50% !important;
  border: none !important;
  background: #F1F5F9 url('https://cdn.triggre.com/shuttel/shuttel-taal.png')
    center/65% no-repeat !important;
  box-shadow: 4px 2px 4px 2px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  text-indent: -9999px;
  position: fixed !important;
  top: 12px;
  right: 90px;
  z-index: 9999;
  transition: all 0.15s ease-in-out;
}

/* Hover-effect */
#context-bar button:is(:not(.hidden)):last-of-type:hover {
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.15);
  transform: scale(1.03);
}

/* Responsief */
@media (max-width: 768px) {
  #context-bar button:is(:not(.hidden)):last-of-type {
    top: 10px;
    right: 70px;
    width: 38px;
    height: 39px;
  }
}

/* Herstel context-bar layout zodat knoppen niet afgekapt worden */
#context-bar {
  display: flex !important;
  justify-content: flex-end !important;
  flex-wrap: wrap !important;
  overflow: visible !important;
}
/* ============================================
   TAALKNOP (WERELDBOL) — finale stabiele versie
   ============================================ */

/* Algemene wereldbol */
body #context-bar button:is(:not(.hidden)):last-of-type {
  width: 42px !important;
  height: 43px !important;
  border-radius: 50% !important;
  border: none !important;
  background: #F1F5F9 url('https://cdn.triggre.com/shuttel/shuttel-taal.png')
    center/65% no-repeat !important;
  box-shadow: 4px 2px 4px 2px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  text-indent: -9999px;
  position: fixed !important;
  top: 12px !important;
  right: 90px !important;
  z-index: 99999 !important;
  transition: all 0.15s ease-in-out;
}

/* Hover-effect */
body #context-bar button:is(:not(.hidden)):last-of-type:hover {
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.15);
  transform: scale(1.03);
}

/* ============================================
   Wereldbol fix voor Afronden & Complete (knop 6)
   ============================================ */
  .content.buttons-inner
  .button.trg-action-btn:not(.hidden):not(:has(~ .button.trg-action-btn:not(.hidden))) {
  width: 42px !important;
  height: 43px !important;
  border-radius: 50% !important;
  border: none !important;
  background: #F1F5F9 url('https://cdn.triggre.com/shuttel/shuttel-taal.png')
    center/65% no-repeat !important;
  box-shadow: 4px 2px 4px 2px rgba(0, 0, 0, 0.1) !important;
  cursor: pointer !important;
  text-indent: -9999px !important;
  position: fixed !important; /* Altijd in viewport */
  top: 12px !important;
  right: 90px !important;
  z-index: 99999 !important;
  transition: all 0.15s ease-in-out !important;
}

/* Hover-effect Afronden & Complete */
body.page-Afronden #context-bar button:nth-of-type(6):hover,
body.page-Complete #context-bar button:nth-of-type(6):hover {
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.15) !important;
  transform: scale(1.03) !important;
}

/* ============================================
   Responsieve aanpassing
   ============================================ */
@media (max-width: 1280px) {
  body #context-bar button:is(:not(.hidden)):last-of-type,
  body.page-Afronden #context-bar button:nth-of-type(6),
  body.page-Complete #context-bar button:nth-of-type(6) {
    right: 75px !important;
  }
}

@media (max-width: 768px) {
  body #context-bar button:is(:not(.hidden)):last-of-type,
  body.page-Afronden #context-bar button:nth-of-type(6),
  body.page-Complete #context-bar button:nth-of-type(6) {
    top: 10px !important;
    right: 60px !important;
    width: 38px;
    height: 39px;
  }
}

/* Zorg dat knoppen niet afgekapt worden */
#context-bar {
  display: flex !important;
  justify-content: flex-end !important;
  flex-wrap: wrap !important;
  overflow: visible !important;
}

/*  Eddie V3  */

.layout.trg-layout-horizontal {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch
}

.trg-layout-vertical>.layout-cell.layout-cell-content>.trg-layout-horizontal>.layout-cell,
.layout>.layout-cell>.layout-cell-content:not(:first-child),
.trg-layout-vertical>.layout-cell>.layout-cell-content>.trg-layout-horizontal>.layout-cell,
.layout-cell-content,
.layout-cell.trg-control-editor{
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex: 1;
  box-sizing: border-box;
}

.trg-page > .layout.trg-layout-horizontal 
  > .layout-cell.trg-control-layout.trg-block-1.trg-stacked 
  > .layout-cell-content 
  > .layout.trg-layout-vertical {
    display: block !important;
}

.layout.trg-layout-vertical{
  display: flex;
  flex-direction: column;
  flex: 1;
  box-sizing: border-box;
}

.trg-layout-vertical>.layout-cell:not(:first-child){
  display: flex;
  flex-direction: column;
}

.editor:has(input[type="checkbox"]) {
  margin-top: 0 !important;
}

.field .editor,
.field.flexible .editor{
    margin-top: auto;
    height: 36px;
}

.editor:has(input[type="file"]),
.editor:has(textarea),
.editor:has(.k-upload) {
  height: auto !important;
}

.field.flexible .editor>span{
    margin-bottom: 0px;
}

.field,
.field.flexible{
  display: flex;
  flex-direction: column;
  flex: 1;
  box-sizing: border-box;
  margin-right: 10px;
}

.field .validation,
.layout-cell .validation {
  display: block !important;    
  visibility: hidden;           
  transition: none;
  margin-left: 0;
}

.field .validation:not(:empty) {
  visibility: visible;
}

@media (max-width: 2536px){
.layout.trg-layout-horizontal:has(.validation:not(:empty)) .validation {
  min-height: 20px !important;  
  visibility: visible !important;
}
}

@media (min-width: 2536px){
.layout.trg-layout-horizontal:has(.validation:not(:empty)) .validation {
  min-height: 34px !important;  
  visibility: visible !important;
}
}

.layout.trg-layout-horizontal .layout-cell.trg-control-editor,
.layout.trg-layout-horizontal .layout-cell.trg-control-editor .layout-cell-content {
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-end !important;  
  align-items: stretch !important;    
}

/* Aanpassingen aan tabellen */

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

.table-list.trg-col-table.k-grid.k-widget.k-grid-display-block{
    height: auto !important;
}


/* EvL Verplaatst om aan te geven dat dit uitgeschakeld is op 29-10-2025
Uitschakeling is i.v.m. vinkje bij klant pagina "Voorwaarden" en "Terms and Conditions"
.editor,
.editor>input,
.editor>textarea,
.editor,
.editor>input,
.editor>textarea {
    width: 100% !important;
}
    */

/* Ter aanpassing van Sales waarbij de grote invult tektsen een mini scrollbar hadden voor het veld zelf */

.layout>.layout-cell>.layout-cell-content{
    overflow:unset
}
/* SHU-476 SB20251104 - Verberg de language menu item bij positie 1 */
a.routed.menu-item[href="/lab/pages/user_menu/language"],
a.routed.menu-item[href="/main/pages/user_menu/language"] {
    display: none !important;
}

ul:has(> li:first-of-type:last-of-type) {
  padding: 0 !important;
}

a.action.secondary {
  color: #2441FF !important;
}

a.action.secondary:hover {
  color: #BDCEDF !important;
}