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


.logo-image
{
    background-image: url('../img/triggre_logo.png?144C8455B99BFB91789B569017DEA866');
}
.logo-image.auth
{
    background-image: url('../img/triggre_logo_auth.png?144C8455B99BFB91789B569017DEA866');
}
        
.preview-100 { width: 100px; height: 100px; }.preview-160 { width: 160px; height: 160px; }.preview-256 { width: 256px; height: 256px; }.preview-64 { width: 64px; height: 64px; }
.logo-image
{
    background-image: url('../img/triggre_logo.png?144C8455B99BFB91789B569017DEA866');
}
.logo-image.auth
{
    background-image: url('../img/triggre_logo_auth.png?144C8455B99BFB91789B569017DEA866');
}
        
.preview-100 { width: 100px; height: 100px; }.preview-160 { width: 160px; height: 160px; }.preview-256 { width: 256px; height: 256px; }.preview-64 { width: 64px; height: 64px; }
.logo-image
{
    background-image: url('../img/triggre_logo.png?144C8455B99BFB91789B569017DEA866');
}
.logo-image.auth
{
    background-image: url('../img/triggre_logo_auth.png?144C8455B99BFB91789B569017DEA866');
}
        
.preview-100 { width: 100px; height: 100px; }.preview-160 { width: 160px; height: 160px; }.preview-256 { width: 256px; height: 256px; }.preview-64 { width: 64px; height: 64px; }
.logo-image
{
    background-image: url('../img/triggre_logo.png?144C8455B99BFB91789B569017DEA866');
}
.logo-image.auth
{
    background-image: url('../img/triggre_logo_auth.png?144C8455B99BFB91789B569017DEA866');
}
        
.preview-100 { width: 100px; height: 100px; }.preview-160 { width: 160px; height: 160px; }.preview-256 { width: 256px; height: 256px; }.preview-64 { width: 64px; height: 64px; }
.logo-image
{
    background-image: url('../img/triggre_logo.png?144C8455B99BFB91789B569017DEA866');
}
.logo-image.auth
{
    background-image: url('../img/triggre_logo_auth.png?144C8455B99BFB91789B569017DEA866');
}
        
.preview-100 { width: 100px; height: 100px; }.preview-160 { width: 160px; height: 160px; }.preview-256 { width: 256px; height: 256px; }.preview-64 { width: 64px; height: 64px; }
 
/*
 * FOLDOUT MENU
 * 
 * This CSS template makes the menu appear as a bar under the main header,
 * with each section containing a foldout menu. This is compatible with
 * tile pages and no first category pages.
 * 
 * Warning: Do not use together with 'triggre-logo-image.css'.
 * 
 */

@media all {
    /* 
 * TRIGGRE DEFAULT TEMPLATE - YELLOW
 * 
 * This is the default Triggre CSS template, yellow edition. The following colors can be
 * replaced to quickly create a different colored design (make sure to replace both the
 * HEX and the RGB ones if indicated):
 * 
 *      Yellow          #F1D341 - 241,211,65
 *      Dark Yellow     #3297C1 
 *
 * This design uses a different logo than the one set in the designer; also it uses an image
 * on error pages and vertical scroll forms. To change the images, please make sure the image
 * is placed on cdn.triggre.com (otherwise it isn't accessible) and then replace:
 *
 *      Logo            https://cdn.triggre.com/triggre/img/triggre-white.png 
 *      Header          https://cdn.triggre.com/triggre/img/homepage.png
 */



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

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

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

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

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

/* Alex Schilder - 22-05-2020 */
h2 {
    background: #e1e1e1;
    padding: 10px;
    border-radius: 5px;
}

h4 {
    background: #e1e1e1;
    padding: 10px;
    border-radius: 5px;
}

.trg-layout-vertical>.layout-cell {
    margin-top: 5px;
    padding: 0;
}
/* Alex Schilder - 08-06-2020: styling for custom scrollbars */

/* width */
::-webkit-scrollbar {
    width: 10px;
  }
  
  /* Track */
  ::-webkit-scrollbar-track {
    box-shadow: inset 0 0 5px grey; 
    border-radius: 10px;
  }
   
  /* Handle */
  ::-webkit-scrollbar-thumb {
    background: #3297C18f; 
    border-radius: 10px;
  }
  
  /* Handle on hover */
  ::-webkit-scrollbar-thumb:hover {
    background: #3297C1; 
    box-shadow: inset 0 0 5px grey;
  }

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

h1,
h2,
h3,
h4,
h5,
h6
{
    font-family: "Proxima Nova",sans-serif;
    font-weight: 600;
    text-transform: none;
}
button,
input,
optgroup,
select,
textarea,
#menu a,
#menu a:link,
#menu a:visited,
#menu a:focus,
#menu .level-2,
#menu .level-2 > li,
#menu .level-2 .level-3 li,
#context-bar button,
#context-bar button:active,
#context-bar button:focus,
#context-bar button:visited {
    font-family: "Roboto",sans-serif;
}

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

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

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

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

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


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

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

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

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

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

/* Authentication screen size */
#auth .auth-control {
    min-height: 474px;
    background-color: rgba(255, 255, 255, 0.9);
}
#auth .auth-control .footer {
    height: 96px;
}

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

/* Authentication screen main button styles */
#auth .auth-control .footer .main {
    background: #34363e;
    color: #000;
    border-radius: 6px;
    padding: 14px 26px 13px 26px;
    font-weight: 600;
    font-size: 18px;
    height: auto;
    line-height: 20px;
}
#auth .auth-control .footer .main:hover {
    background: #3297C18f;
    color: #000;
    opacity: 0.9;
}

/* Color for the username and password inputs */
#auth .auth-control .content .field input:focus, 
#auth .auth-control .content .field input:invalid:not(:focus).initial {
    border-bottom: 1px solid #3297C1;
    box-shadow: 0 1px 0 0 #3297C1;
}
#auth .auth-control .content .field input:focus+label, 
#auth .auth-control .content .field input.filled+label {
    color: #34363e;
}

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

/* Hide context bar menu button */
.mobile #context-bar.has-extra-buttons .show-menu {
    display: none;
}
/* Show all action buttons */
.mobile #context-bar>.buttons button:not(.hidden) {
    display: inline-block;
}
/* Make buttons align vertically in the middle */
.mobile #context-bar>.buttons button {
    margin-bottom: 24px;
    margin-top: 10px;
}
/* Allow the context bar to scroll horizontally */
.mobile #context-bar>.buttons {
    display: inline-block;
    width: 100%;
    white-space: nowrap;
    padding-left: 8px;
    padding-right: 8px;
    height: 56px;
    line-height: 56px;
}
/* Remove horizontal scroll bar for buttons in context bar */
.mobile body:not([class*="_tiles"]) #context-bar>.buttons .buttons-inner {
    overflow: hidden;
    height: 56px;
}
/* Make the search box dark gray */
.mobile #context-bar.search-box-opened {
    background: #34363E;
}
/* Place the opened search box above the context bar and make it dark grey */
.mobile .search-box.opened {
    top: -64px;
    background: #2c2d35;
}
/* Move the mobile search button to the top of the screen */
.mobile .search-box .open-search {
    background: transparent;
    top: 0;
    right: 64px;
    width: 64px;
    height: 64px;
    transition: all .2s ease-out;
    position: fixed;
}
/* Icon in the search button */
.mobile .search-box .open-search::before {
    margin: 0;
    line-height: 62px;
    width: 64px;
    height: 64px;
    padding-top: 0;
    padding-right: 0;
    font-size: 28px;
}
/* Make the buttons white, because of the dark background */
.mobile .search-box .open-advanced,
.mobile .search-box .close-search {
    color: #fff;
}
/* Make sure the simple search bar fills the width of the screen */
.mobile #context-bar.has-extra-buttons .search-box.opened .simple-search {
    background: transparent;
    left: 8px;
    width: calc(100% - 140px);
    color: #fff;
}
.mobile .search-box.advanced-filled:not(.advanced) {
    top: -64px;
    left: 0;
    background: #2c2d35;
}
.mobile .search-box.advanced-filled:not(.advanced) .content {
    width: 100%;
    padding-left: 6px;
}

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

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

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

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

/*
 * General color settings
 */

 /* General link color */
a,
a:link,
a:visited,
a:focus {
    color: #34363e;
}

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

/* Menu hover, line instead of color */
html:not(.mobile) #menu .level-1 > li > a:hover {
    color: #fff;
}
html:not(.mobile) #menu .level-1 > li {
    border-bottom: 2px solid transparent;
    transition: all .3s ease-out;
}
html:not(.mobile) #menu .level-1 > li:hover {
    border-bottom: 2px solid #3297C18f;
}
#menu a:hover {
    color: #3297C18f;
}

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

/* User hover color */
#user .user-menu-btn .user-menu-icon:hover {
    color: #67686e8f;
}

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

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

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

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

/* Context bar button hover color, including login button */
#context-bar button:hover,
#context-bar button:active:hover,
#context-bar button:focus,
#context-bar button:focus:hover,
#context-bar button:visited:hover,
#auth .auth-control .footer .btn:hover,
#auth .auth-control .footer .btn:focus {
    background-color: #3297C18f;
    border-radius: 5px;
    color: #fff;
    opacity: 0.9;
}

/* Sort icon color */
.k-grid-header .k-i-sort-asc-sm, 
.k-grid-header .k-i-sort-desc-sm, 
.k-grid-header .k-sort-order {
    color: #3297C1;
}

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

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


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

/*
 * Form colors
 */

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

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

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

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

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

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

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

/* Delete button on file upload hover/focus color */
.form .editor .k-upload .k-upload-files .k-upload-action:hover, 
.form .editor .k-upload .k-upload-files .k-upload-action:active,
.form .editor .k-upload .k-upload-files .k-upload-action:focus {
    border-color: #3297C18f;
}

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

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

/* 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: #3297C18f;
    color: #000;
}
.k-calendar .k-header .k-state-hover {
    opacity: 0.9;
    background-color: #3297C18f;
    color: #000;
}
#menu .level-2 .current a, 
#menu .level-2 .current a:link, 
#menu .level-2 .current a:hover, 
#menu .level-2 .current a:visited, 
#menu .level-2 .current a:focus, 
#menu .level-2 .current a:active {
    color: #3297C1;
}

/* Calendar day link colors */
.k-calendar .k-state-hover .k-link {
    color: #3297C18f;
}
.k-calendar .k-footer .k-nav-today {
    color: #3297C18f;
    border-color: #3297C18f;
}

/* Calendar today hover */
.k-calendar .k-today.k-state-hover {
    background-color: #3297C18f;
}
.k-calendar .k-today.k-state-hover a {
    color: #000;
}

/* Calendar selected day color */
.k-calendar td.k-state-selected {
    background: #3297C18f;
    border-color: #3297C18f;
}
.k-calendar td.k-state-selected.k-state-hover {
    background: #3297C18f;
    border-color: #3297C18f;
    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: #3297C18f;
    border-color: #3297C18f;
    box-shadow: none;
}
.k-calendar td.k-state-selected.k-state-focused .k-link,
.k-calendar td.k-state-selected.k-state-hover .k-link {
    color: #67686e;
}

/* Scheduler and gantt bar buttons */
.k-scheduler .k-scheduler-toolbar ul li.k-state-hover, 
.k-scheduler .k-scheduler-toolbar .k-state-selected, 
.k-gantt-toolbar .k-button,
.k-grid .k-header .k-button, 
.k-scheduler .k-header .k-button, 
.k-scheduler .k-header li, 
.k-scheduler .k-header .k-link, 
.k-gantt>.k-header li, 
.k-gantt>.k-header .k-link, 
.k-gantt-toolbar .k-button, 
.km-pane-wrapper .k-header .k-button {
    background-color: #3297C18f;
    border-color: #3297C18f;
    color: #2c2d35;
}
/* Selected button in gantt and scheduler bar */ 
.k-gantt .k-gantt-toolbar .k-gantt-views li.k-state-selected.k-state-hover, 
.k-scheduler .k-scheduler-toolbar .k-scheduler-views li.k-state-selected.k-state-hover, 
.k-scheduler-toolbar>.k-scheduler-views>li.k-state-selected {
    border-bottom-color: #3297C18f;
}
.k-gantt-toolbar>.k-gantt-views>li.k-state-selected {
    border-color: #3297C1;
}
.k-gantt .k-gantt-toolbar .k-state-selected>.k-link {
    background-color: #3297C1;
}

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

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

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

/* No hover color on rows */
.k-gantt .k-treelist tr.k-alt:hover {
    background-color: #f2f2f2;
}
.k-gantt .k-treelist tr td,
.k-gantt .k-treelist tr.k-alt td,
.k-gantt .k-treelist tr:hover td {
    color: #2c2d35;
    cursor: default;
}

/* No focused row header */
.k-gantt .k-treelist .k-alt.k-state-selected:hover,
.k-gantt .k-treelist .k-alt.k-state-selected:hover td {
    background-color: #f2f2f2;
}

/* Scheduler and gantt bar buttons hover color */
.k-grid .k-header .k-button:hover, 
.k-scheduler .k-header .k-button:hover, 
.k-scheduler .k-scheduler-toolbar .k-scheduler-views li.k-state-hover, 
.k-scheduler .k-scheduler-toolbar .k-scheduler-views li.k-state-hover .k-link, 
.k-gantt .k-gantt-toolbar .k-gantt-views li.k-state-hover, 
.k-gantt .k-gantt-toolbar .k-gantt-views li.k-state-hover .k-link, 
.k-gantt .k-gantt-toolbar .k-button:hover, 
.km-pane-wrapper .k-header .k-button:hover {
    background-color: #3297C1;
    border-color: #3297C1;
}

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

/* 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: #fff;
}
.k-grid tr:hover a:hover {
    text-decoration: underline;
}

/* Selected drop down items */
.k-list-container .k-list [role=option].k-state-selected {
    color: #fff;
    background-color: #34363e;
}
.k-list-container .k-list [role=option]:hover.k-state-selected {
    color: #fff;
    background-color: #34363e;
    opacity: .9;
    border-color: #34363e;
}
.k-dropdown .k-state-hover .k-input {
    color: #2c2d35;
}

/* Hover/focus multiselect and lookup border color */
.form .type-multiselect .editor select:hover,
.form .type-multiselect .editor select:active,
.form .type-lookup .editor .current:hover, 
.form .type-lookup .editor .current:focus {
    border-color: #3297C18f;
}

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

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


/*
 * General layout settings for all pages
 */

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

/* Set header size */
html:not(.mobile) #header {
    height: auto;
}
.mobile #header.menu-shown {
    width: auto;
    min-width: 100%;
    max-width: 100%;
}

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

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

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

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

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

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

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

/* Bigger logo size, lower position */
html:not(.mobile) #header #logo {
    left: 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: 24px;
}
.mobile .layout>.layout-cell>.layout-cell-title {
    font-size: 24px;
    padding: 12px 8px 0px 16px;
}

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

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

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

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

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

/* Resize context bar button container to fit context bar */
#context-bar>.buttons {
    height: 56px;
    line-height: 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: 54px;
    max-height: calc(100vh - 180px);
}
.mobile .search-box.advanced .content {
    bottom: initial;
}

/* Re-align advanced search form items */
.search-box.advanced .search-form .label {
    float: left;
    margin-left: 8px;
}
html:not(.mobile) .search-box.advanced .search-form .field.type-multiselect .editor select,
.field.type-email .editor input[type=password], 
.field.type-email .editor input[type=text], 
.field.type-email .editor textarea, 
.field.type-link .editor input[type=password], 
.field.type-link .editor input[type=text], 
.field.type-link .editor textarea, 
.field.type-text .editor input[type=password], 
.field.type-text .editor input[type=text], 
.field.type-text .editor textarea {
    width: 454px;
}

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

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

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

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

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

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

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

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

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

/* Make body hidden until content loaded */
body header,
body #content,
body #context-bar {
    /*display: none !important; -> creates white screen after deleting item*/
}
body[class^="page-"] header,
body[class^="page-"] #content,
body[class^="page-"] #header.menu-shown #menu,
body[class^="page-"] #context-bar,
body[class^="error-page"] header,
body[class^="error-page"] #menu,
body[class^="error-page"] #context-bar {
    display: block !important;
}

/* Loading spinner color */
.k-loading-image {
    border-top: 3px solid rgba(50,151,193, 0.2);
    border-right: 3px solid rgba(50,151,193, 0.2);
    border-bottom: 3px solid rgba(50,151,193, 0.2);
    border-left: 3px solid rgba(50,151,193, 0.5);
}
#auth .auth-control .loader .spinner-layer {
    border-color: rgb(50,151,193);
}

/* Correct hover color for lookups */
.field.type-lookup .editor .current:hover {
    border-color: #34363e;
}

/* Make list popups scale correctly on mobile */
.mobile .form .type-lookup .editor .list-popup {
    bottom: 64px;
}
.mobile .field.type-lookup .editor .list-popup {
    max-height: calc(100% - 128px);
    margin-left: -5px;
}

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

/* On mobile, use less padding for tables, and on pages with _smalltable in the name */
.mobile .k-grid td,
body[class*="_smalltable"] .k-grid td {
    padding: .4em .6em;
}
.mobile .table-list tbody[role=rowgroup] tr[role=row],
body[class*="_smalltable"] .table-list tbody[role=rowgroup] tr[role=row] {
    height: 40px;
}

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

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

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

    /* More space for main menu items */
    html:not(.mobile) #menu .level-1 {
        right: 216px;
        bottom: 16px;
        max-width: calc(100vw - 376px);
    }
    
    /* Make main menu items smaller */
    html:not(.mobile) #menu .level-1 > li > a {
        font-size: 14px;
    }
    html:not(.mobile) #menu .level-1>li {
        height: 32px;
    }
    html:not(.mobile) #menu a, 
    html:not(.mobile) #menu a:link, 
    html:not(.mobile) #menu a:visited, 
    html:not(.mobile) #menu a:focus {
        line-height: 32px;
    }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    /* Form lookup height */
    html:not(.mobile) .form .type-lookup .editor .current {
        height: 28px;
    }
    html:not(.mobile) .form .type-lookup .editor .selection {
        top: .15em;
    }
    html:not(.mobile) .form .type-lookup .editor .open-list {
        margin-top: 2px;
    }
    html:not(.mobile) .form .type-lookup .label {
        margin-top: -10px;
    }

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

    /* Fix form icon size */
    html:not(.mobile) .k-icon, 
    html:not(.mobile) .k-tool-icon {
        font-size: 14px;
    }
    html:not(.mobile) .k-picker-wrap .k-select, 
    html:not(.mobile) .k-numeric-wrap .k-select, 
    html:not(.mobile) .k-dropdown-wrap .k-select {
        line-height: calc(2em + 2px);
    }

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

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

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

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

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

    /* Make top menu smaller */
    html:not(.mobile) #menu {
        height: 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: 12px;
    }

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

    /* Reposition search box, smaller font */
    html:not(.mobile) .search-box {
        top: 40px;
    }
    html:not(.mobile) .search-box .simple-search {
        font-size: 12px;
        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: 12px;
    }

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

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

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

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

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

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

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

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

    /* Content positioning */
    html:not(.mobile) #inner {
        top: 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: 12px;
    }

    /* Form lookup height */
    html:not(.mobile) .form .type-lookup .editor .current {
        height: 28px;
    }
    html:not(.mobile) .form .type-lookup .editor .selection {
        top: .15em;
    }
    html:not(.mobile) .form .type-lookup .editor .open-list {
        margin-top: 2px;
    }
    html:not(.mobile) .form .type-lookup .label {
        margin-top: -10px;
    }

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

    /* Fix form icon size */
    html:not(.mobile) .k-icon, 
    html:not(.mobile) .k-tool-icon {
        font-size: 14px;
    }
    html:not(.mobile) .k-picker-wrap .k-select, 
    html:not(.mobile) .k-numeric-wrap .k-select, 
    html:not(.mobile) .k-dropdown-wrap .k-select {
        line-height: calc(2em + 2px);
    }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


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

/* Make mobile page scroll vertically in case of too many tiles */
html.mobile body[class*="_tiles"] {
    overflow-y: auto;
}

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

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

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

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

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

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

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

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

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

/*
 * Format tiles 
 */

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

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

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

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

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

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

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

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

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

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

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

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

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

/* Tile hover color */
html body[class*="_tiles"] #context-bar .button:hover {
    background-color: #34363e;
    color: #fff;
    text-transform: uppercase;
}

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

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

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

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


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

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

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

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

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

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

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

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

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

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

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

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

/* Make sure header is on top of everything else */
html:not(.mobile) #header {
    z-index: 10;
}

/* Make sure menu is small (needed for use with base.css which has a bigger header) */
html:not(.mobile) #menu {
    height: 80px;
}

/* Reposition user icon */
#user {
    top: 16px;
    right: 8px;
}

/* Reposition logo */
html:not(.mobile) #header #logo {
    left: 24px;
    top: 20px;
    width: 160px;
    height: 40px;
}
#header #logo a {
    width: 160px;
    height: 40px;
    margin: 10px;
}

/* Reposition user icon */
#user {
    top: 80px;
}

/* Position the section menu */
html:not(.mobile)  body:not([class*="_vscroll"]) #menu .level-1 {
    left: 0;
    right: 0;
    bottom: initial;
    top: 80px;
    background: #3297C1;
    max-width: 100%;
    box-shadow: 0px 2px 2px 0 rgba(0,0,0,.16), 0px 4px 4px 0 rgba(0,0,0,.12);
}

/* Make all submenus placed under parent section */
html:not(.mobile) body:not([class*="_vscroll"]) #menu .level-1 li {
    position: relative;
}

/* Hide all submenus initially */
html:not(.mobile) body:not([class*="_vscroll"]) #menu .level-1 li .level-2 {
    display: block;
    position: absolute;
    top: 48px;
    border-radius: 4px;
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
    left: 0px;
    bottom: initial;
    max-height: calc(100vh - 200px);
    padding: 0;
    width: auto;
    min-width: 100%;
    overflow: hidden;
    visibility: hidden;
    box-shadow: -2px 5px 10px 0px rgba(0,0,0,0.1), 4px 4px 4px 0px rgba(0,0,0,0.2);
    transform: scale(1, 0);
    transform-origin: 50% 0%;
    transition: 
        transform .2s ease-out 0s,
        overflow 0s ease .2s,
        visibility 0s ease .2s;
}
html:not(.mobile)  body:not([class*="_vscroll"]) #menu .level-1 li .level-2 > li {
    padding: 0px 16px 0px 4px;
    left: -48px;
    opacity: 0;
    font-size: 16px;
    transition: 
        left 0s ease-out .1s,
        opacity .1s ease-out 0s;
}
html:not(.mobile)  body:not([class*="_vscroll"]) #menu .level-1 li .level-2 > li:first-child {
    padding-top: 6px;
}
html:not(.mobile)  body:not([class*="_vscroll"]) #menu .level-1 li .level-2 > li:last-child {
    padding-bottom: 12px;
}

/* When hovering the section, show submenu */
html:not(.mobile)  body:not([class*="_vscroll"]) #menu .level-1 li:hover .level-2 {
    display: block;
    position: absolute;
    visibility: visible;
    overflow: auto;
    transform: scale(1, 1);
    transition: 
        transform .2s ease-out 0s,
        overflow 0s ease 0s,
        visibility 0s ease 0s;
}
html:not(.mobile)  body:not([class*="_vscroll"]) #menu .level-1 li:hover .level-2 > li {
    left: 0px;
    opacity: 1;
    transition:
        left .1s ease .25s,
        opacity .1s ease-out .25s;
}

/* Section background animation*/
html:not(.mobile)  body:not([class*="_vscroll"]) #menu .level-1 li {
    transition:
        border-color .1s ease-out .2s, 
        background-color .1s ease-out .2s;
}
html:not(.mobile)  body:not([class*="_vscroll"]) #menu .level-1 li > a {
    transition: color .1s ease-out .2s;
}

/* Hovered section background and text color */
html:not(.mobile)  body:not([class*="_vscroll"]) #menu .level-1 li:hover {
    background-color: #e1e1e1;
    border-color: transparent;
    transition: 
        border-color .1s ease-out 0s,
        background-color .1s ease-out 0s;
}
html:not(.mobile)  body:not([class*="_vscroll"]) #menu .level-1 li:hover > a {
    color: #2c3d35;
    transition:
        color .1s ease-out 0s;
}

/* Background color foldout menu */
html:not(.mobile) body:not([class*="_vscroll"]) #menu .level-2 {
    background: #e1e1e1;
}

/* Position context bar for tiles pages */
html:not(.mobile) body[class*="_tiles"] #context-bar {
    top: 48px;
}

/* Make search a bit wider */
html:not(.mobile) .search-box {
    width: 300px;
    right: 50px;
}
body:not([class*="_vscroll"]) .search-box .simple-search, 
.search-box .clear-search {
    width: 220px;
}

/* Position search */
html:not(.mobile) .search-box {
    top: 76px;
}

/* Position page title and content */
html:not(.mobile) body:not([class*="_vscroll"]) #title {
    top: 144px;
    left: 24px;
}
html:not(.mobile) body:not([class*="_vscroll"]) #inner {
    top: 146px;
    left: 24px;
}

/* Move buttons all the way left in context bar */
html:not(.mobile) body:not([class*="_vscroll"]):not([class*="_tiles"]) #context-bar {
    padding-left: 6px;
    z-index: 10;
}

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

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

/* Position elements on smaller desktop screens */
@media only screen and (max-width: 1600px) {
    /* Resize menu */
    html:not(.mobile) #menu {
        height: 56px;
    }

    /* Reposition logo */
    html:not(.mobile) #header #logo {
        left: 16px;
        top: 12px;
        width: 124px;
        height: 32px;
    }
    #header #logo a {
        width: 126px;
        height: 32px;
        margin: 8px;
    }

    /* User menu */
    html:not(.mobile) #user {
        top: 5px;
    }

    /* Section menu */
    html:not(.mobile)  body:not([class*="_vscroll"]) #menu .level-1 {
        top: 56px;
    }

    /* Fold out menus */
    html:not(.mobile)  body:not([class*="_vscroll"]) #menu .level-1 li .level-2 {
        top: 32px;
        max-height: calc(100vh - 150px);
    }

    /* Search box */
    html:not(.mobile) .search-box {
        top: 0px;
    }
    body:not([class*="_vscroll"]) .search-box .simple-search, 
    .search-box .clear-search {
        width: 136px;
    }

    /* Advanced search popup */
    .search-box.advanced .search-form {
        max-height: calc(100vh - 104px);
    }

    /* Page content */
    html:not(.mobile)  body:not([class*="_vscroll"]) #inner {
        top: 100px;
    }

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

    /* Do not display foldout menu for tiles pages */
    html:not(.mobile) body[class*="_nomenu"] #menu .level-2 > li {
        display: block;
    }
   
    html:not(.mobile) #menu .content.level-1 {
        overflow: unset;
    }
}






/*
 * This is the default Triggre CSS template, color override. The following colors can be
 * replaced to quickly create a different colored design (make sure to replace both the
 * HEX and the RGB ones if indicated):
 * 
 *      Yellow          #F1D341 - 241,211,65
 *      Dark Yellow     #3297C1 
 *
 * NOTE: this template expects the default Triggre CSS template to be imported before it,
 * which can be done by adding the following line to your custom CSS:
 * 
 *      @import https://cdn.triggre.com/triggre/css/triggre-base.css
 */

/* General Kendo hover color */
.k-state-hover {
    color: #34363e;
}

/* Loading spinner color */
.k-loading-image {
    border-top: 3px solid rgba(50,151,193, 0.2);
    border-right: 3px solid rgba(50,151,193, 0.2);
    border-bottom: 3px solid rgba(50,151,193, 0.2);
    border-left: 3px solid rgb(50,151,193, 0.5);
}
#auth .auth-control .loader .spinner-layer {
    border-color: rgb(50,151,193);
}

/* Authentication screen background*/
#auth .decorator {
    /* background: url("https://cdn.triggre.com/managit/kras-stoelen-oranje_aangepast.jpg"); */
    background-size: cover;

/* Authentication screen main button styles */
#auth .auth-control .footer .main {
    background: #34363e;
}
#auth .auth-control .footer .main:hover {
    background: #34363e;
}

/* Color for the username and password inputs */
#auth .auth-control .content .field input:focus, 
#auth .auth-control .content .field input:invalid:not(:focus).initial {
    border-bottom: 1px solid #34363e;
    box-shadow: 0 1px 0 0 #34363e;
}
#auth .auth-control .content .field input:focus+label, 
#auth .auth-control .content .field input.filled+label {
    color: #34363e;
}

/* General link color */
a,
a:link,
a:visited,
a:focus {
    color: #34363e;
}

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

/* Menu hover, line instead of color */
html:not(.mobile) #menu .level-1 > li > a:hover {
    color: #fff;
}
html:not(.mobile) #menu .level-1 > li {
    border-bottom: 2px solid transparent;
    transition: all .3s ease-out;
}
html:not(.mobile) #menu .level-1 > li:hover {
    border-bottom: 2px solid #34363e;
}
#menu a:hover {
    color: #34363e;
}

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

/* User hover color */
#user a:hover {
    color: #34363e;
}

/* User hover color */
#user .user-menu-btn .user-menu-icon:hover {
    color: #34363e;
}

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

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

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

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

/* Context bar button hover color, including login button */
#context-bar button:hover,
#context-bar button:active:hover,
#context-bar button:focus,
#context-bar button:focus:hover,
#context-bar button:visited:hover,
#auth .auth-control .footer .btn:hover,
#auth .auth-control .footer .btn:focus {
    background-color: #34363e;
    border-radius: 5px;
    color: #fff;
    opacity: 0.9;
}

/* Sort icon color */
.k-grid-header .k-i-sort-asc-sm, 
.k-grid-header .k-i-sort-desc-sm, 
.k-grid-header .k-sort-order {
    color: #34363e;
}

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

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


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

/*
 * Form colors
 */

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

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

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

/* 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: #34363e;
    color: #fff;
}

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

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

/* Delete button on file upload hover/focus color */
.form .editor .k-upload .k-upload-files .k-upload-action:hover, 
.form .editor .k-upload .k-upload-files .k-upload-action:active,
.form .editor .k-upload .k-upload-files .k-upload-action:focus {
    border-color: #34363e;
}

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

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

/* New style checkbox colors */
.form .type-boolean .editor input[type=checkbox]:after {
    background-color: rgba(241,211,65,.1);
    box-shadow: 0 0 0 0 transparent, 0 0 0 15px rgba(241,211,65, .1);
}

/* 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: #34363e;
    color: #fff;
}
.k-calendar .k-header .k-state-hover {
    opacity: 0.9;
    background-color: #34363e;
    color: #fff;
}
#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: #34363e;
}

/* Calendar day link colors */
.k-calendar .k-state-hover .k-link {
    color: #34363e;
}
.k-calendar .k-footer .k-nav-today {
    color: #34363e;
    border-color: #34363e;
}

/* Calendar today hover */
.k-calendar .k-today.k-state-hover {
    background-color: #34363e;
}
.k-calendar .k-today.k-state-hover a {
    color: #2c2d35;
}

/* Calendar selected day color */
.k-calendar td.k-state-selected {
    background: #34363e;
    border-color: #34363e;
}
.k-calendar td.k-state-selected.k-state-hover {
    background: #3297C18f;
    border-color: #3297C18f;
    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: #34363e;
    border-color: #34363e;
    box-shadow: none;
}
.k-calendar td.k-state-selected.k-state-focused .k-link,
.k-calendar td.k-state-selected.k-state-hover .k-link {
    color: #67686e;
}

/* Scheduler and gantt bar buttons */
.k-scheduler .k-scheduler-toolbar ul li.k-state-hover, 
.k-scheduler .k-scheduler-toolbar .k-state-selected, 
.k-gantt-toolbar .k-button,
.k-grid .k-header .k-button, 
.k-scheduler .k-header .k-button, 
.k-scheduler .k-header li, 
.k-scheduler .k-header .k-link, 
.k-gantt>.k-header li, 
.k-gantt>.k-header .k-link, 
.k-gantt-toolbar .k-button, 
.km-pane-wrapper .k-header .k-button {
    background-color: #34363e;
    border-color: #34363e;
    color: #fff;
}
/* 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: #34363e;
}
.k-gantt-toolbar>.k-gantt-views>li.k-state-selected {
    border-color: #34363e;
}
.k-gantt .k-gantt-toolbar .k-state-selected>.k-link {
    background-color: #34363e;
}

/* Gantt single task color */
.k-task-single {
    background-color: #34363e;
    border-color: #34363e;
    color: #fff;
}

/* Gantt single task color when selected */
.k-state-selected.k-task-single {
    background-color: #34363e;
    border-color: #34363e;
    color: #fff;
}

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

/* No hover color on rows */
.k-gantt .k-treelist tr.k-alt:hover {
    background-color: #f2f2f2;
}
.k-gantt .k-treelist tr td,
.k-gantt .k-treelist tr.k-alt td,
.k-gantt .k-treelist tr:hover td {
    color: #2c2d35;
    cursor: default;
}

/* No focused row header */
.k-gantt .k-treelist .k-alt.k-state-selected:hover,
.k-gantt .k-treelist .k-alt.k-state-selected:hover td {
    background-color: #f2f2f2;
}

/* Scheduler and gantt bar buttons hover color */
.k-grid .k-header .k-button:hover, 
.k-scheduler .k-header .k-button:hover, 
.k-scheduler .k-scheduler-toolbar .k-scheduler-views li.k-state-hover, 
.k-scheduler .k-scheduler-toolbar .k-scheduler-views li.k-state-hover .k-link, 
.k-gantt .k-gantt-toolbar .k-gantt-views li.k-state-hover, 
.k-gantt .k-gantt-toolbar .k-gantt-views li.k-state-hover .k-link, 
.k-gantt .k-gantt-toolbar .k-button:hover, 
.km-pane-wrapper .k-header .k-button:hover {
    background-color: #34363e;
    border-color: #34363e;
}

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

/* 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: #2c2d35;
}
.k-grid tr:hover a:hover {
    text-decoration: underline;
}

/* Selected drop down items */
.k-list-container .k-list [role=option].k-state-selected {
    color: #2c2d35;
    background-color: #34363e;
}
.k-list-container .k-list [role=option]:hover.k-state-selected {
    color: #2c2d35;
    background-color: #34363e;
    opacity: .9;
    border-color: #34363e;
}
.k-dropdown .k-state-hover .k-input {
    color: #2c2d35;
}

/* Hover/focus multiselect and lookup border color */
.form .type-multiselect .editor select:hover,
.form .type-multiselect .editor select:active,
.form .type-lookup .editor .current:hover, 
.form .type-lookup .editor .current:focus {
    border-color: #34363e;
}

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

/*
 * Vertical scroll page specific overrides
 */

/* Format each button in the context bar */
body[class*="_vscroll"] #context-bar .buttons button {
    background: #34363e;
}

/*
 * Tile page specific overrides
 */

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

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

/*
 * Error page specific overrides
 */

/* Login link as button */
.error-page #user a.login {
    background: #34363e;
}

}


*
 * This CSS allows you to change the logo image in the default Triggre layout, which
 * is the image that is shown instead of the logo set in the designer (on desktop, the
 * mobile version uses the logo from the designer).
 *
 * Please make sure the image is available over an HTTPS connection.
 *
 * NOTE: this template expects the default Triggre CSS template to be imported before it,
 * which can be done by adding the following line to your custom CSS:
 * 
 *      @import https://cdn.triggre.com/triggre/css/triggre-base.css
 */

/* Desktop logo */
html:not(.mobile) #header #logo a,
body[class*="_vscroll"] #header #logo a,
.error-page #header #logo a {
    background: url('https://cdn.triggre.com/triggre/img/triggre-white.png');
    background-size: contain;
    background-repeat: no-repeat;
}

/*
 * Makes the logo size position different, changing with the scale of the screen.
 */

/* Bigger logo size, lower position */
html:not(.mobile) #header #logo {
    left: -58px;
    top: 0px;
    width: 260px;
    height: 80px;
}
html:not(.mobile) #header #logo a {
    width: 180px;
    height: 60px;
    margin: 10px 0px 18px 80px;
}

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

/* 
* 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) { 
    /* Position logo, make smaller */
    html:not(.mobile) #header #logo {
        left: 0px;
        top: -4px;
        width: 130px;
        height: 60px;
    }
    html:not(.mobile) #header #logo a {
        width: 130px;
        height: 60px;
        margin: 10px;
    }
}

/* FIXES */

/* Update header to white */
 
    html:not(.mobile) #menu {
        background-color: #34363e;
 }



/* Do not display foldout menu for tiles pages */

    html:not(.mobile) body[class*="_nomenu"] #menu .level-2 > li {
        display: block;
    }
   
    html:not(.mobile) #menu .content.level-1 {
        overflow: unset;
    }



/* show icon */
html:not(.mobile) #user .user-menu-btn .user-menu-icon {
    color: #34363e;
}

html:not(.mobile) #user .user-menu-btn .user-menu-icon:hover {
    color: #34363e;
}

@media only screen and (max-width: 1600px) {
    html:not(.mobile) #user .user-menu-btn .user-menu-icon {
    color: #3297C1;
}
}

/* Do not show first level menu when tiles */ 
/*html:not(.mobile) body[class*="_tiles"] #menu .level-1 a {
    display: none;
}

/* Change color of context-bar */
html:not(.mobile) #context-bar {
    background-color: #34363e;
}

/* VRAAGTYPE TILES */
html body[class*="_tiles"][class*="page-Export_tiles_nomenu"] #context-bar .button  {
    opacity: 0.8;
    font-size: 40px;
    transition: font-size .2s ease-out;

    
}
html body[class*="_tiles"][class*="page-Export_tiles_nomenu"] #context-bar .button:hover {
    font-size: 36px;
}

/* TERUG */
html body[class*="_tiles"][class*="page-Export_tiles_nomenu"] #context-bar .button:nth-child(1) i {
    background: url('https://cdn.triggre.com/managit/terug.png');
    background-size: 100%;
    opacity: 0.8;

    background-repeat: no-repeat;
    background-position: center center;
    display: block;
    width: 96px;
    height: 96px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 8px;
    transition: background-size .2s ease-out;
}
html body[class*="_tiles"][class*="page-Export_tiles_nomenu"] #context-bar .button:nth-child(1):hover i {
    background-image: url('https://cdn.triggre.com/managit/terug.png');
    background-size: 85%;
}