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

.preview-64 { width: 64px; height: 64px; }
.logo-image
{
    background-image: url('../img/triggre_logo.png?C5300604EC19DC2FC66BF9D3CAD06308');
}
.logo-image.auth
{
    background-image: url('../img/triggre_logo_auth.png?C5300604EC19DC2FC66BF9D3CAD06308');
}

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


/* COLORS DEFINITIONS */
:root {
	/* root fonts */
    --main-font:
	"Roboto", "Arial", "Tahoma", sans-serif;

	/* root colors */
	--body-bg: #fff2db;
    --header-bg: #e0dbc4d7;
    --lite-bg: #eceaea;
	--lite-bg-active: #e2d9cb;
	--menu-level3: #3B3B3B;
	--header-color: #222222;
	--text-color: #333333;
	--full-white: #ffffff;
	--link-color: #004A84;
	--button-text: #000000;
	--grid-line: #c4a5509d;
}
	
/* Temporary adjustment to fake dark logotype */
	
#header #logo a {
  -webkit-filter: invert(100%);
  filter: drop-shadow(8px 8px 10px #6d6c6c);
}
	
/* 
 * TRIGGRE FONT DEFINITIONS
 * 
 * These are default fonts that Triggre uses. Roboto Bold for headings, and
 * Roboto regular for normal text and buttons.
 *
 */
	
/* 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;
}

/* GENERAL */


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

h1,
h2,
h3,
h4,
h5,
h6
{
    font-weight: 600;
    text-transform: none;
	color: var(header-color);
}
	h3 {
		font-family: 'Yanone Kaffeesatz', sans-serif;
		color: #f67716;
	}
button,
input,
optgroup,
select,
textarea,
#menu a,
#menu a:link,
#menu a:visited,
#menu a:focus,
#menu .level-2,
#menu .level-2 > li,
#menu .level-2 .level-3 li,
#context-bar button,
#context-bar button:active,
#context-bar button:focus,
#context-bar button:visited {
	letter-spacing: 0;
}

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

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

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

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

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


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

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

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

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

/* Authentication screen background*/
#auth .decorator {
    background: radial-gradient(ellipse at center, rgb(65 93 241 / 50%) 0, var(--header-bg) 100%);
}

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

/* Authentication screen header color */
#auth .auth-control .header {
    background: var(--text-color);
}

/* Authentication screen main button styles */
#auth .auth-control .footer .main {
    background: var(--header-bg);
    color: var(--button-text);
    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: var(--header-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(--header-bg);
    box-shadow: 0 1px 0 0 var(--header-bg);
}
#auth .auth-control .content .field input:focus+label, 
#auth .auth-control .content .field input.filled+label {
    color: var(--header-bg);
}

/*
 * Use normal buttons on mobile app and move mobile search to 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 middle */
.mobile #context-bar>.buttons button {
    margin-bottom: 24px;
    margin-top: 10px;
}
/* Allow context bar to scroll horizontally */
.mobile #context-bar>.buttons {
    display: inline-block;
    width: 100%;
    white-space: nowrap;
    padding-left: 8px;
    padding-right: 8px;
    height: 56px;
    line-height: 56px;
}
/* Remove horizontal scroll bar for buttons in context bar */
.mobile body:not([class*="_tiles"]) #context-bar>.buttons .buttons-inner {
    overflow: hidden;
    height: 56px;
}
/* Make search box dark gray */
.mobile #context-bar.search-box-opened {
    background: var(--menu-level3);
}
/* Place opened search box above context bar and make it 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;
}
/* Make buttons white, because of 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(--header-bg);
}

/* 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 var(--header-bg);
}
#menu a:hover {
    color: var(--header-bg);
}

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

/* User menu repositioning */
html:not(.mobile) #user .user-menu-btn .drop-down {
top: 0;
}
	
/* User hover color */
#user .user-menu-btn .user-menu-icon:hover {
    color: var(--full-white);
}

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

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

/* Side menu links */
#menu .level-2 a:hover{
    color: #fafac1;
    background: #4af978;
}
	
#menu .level-2 a:active {
    color: #fff;
    background: #208bbd;
}
#menu .level-2 a:focus {
    color: #fff;
    background: #e1f02f;
}

#menu .level-3 a:hover{
    color: #fafac1;
    background: #4af978;
}
	
#menu .level-3 a:active {
    color: #fff;
    background: #208bbd;
}
#menu .level-3 a:focus {
    color: #fff;
    background: #9affd4;
}
	#menu .level-3 a:visited {
    color: #fff;
    background: #208bbd;
}

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

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

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


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

#inner 
{
	padding-left: 15px;
	background: transparent !important;
}

@media screen and (min-width: 980px) {
	#inner 
	{
	left: 270px !important;
	top: 100px !important;
	padding-left: 10px;
	padding-top: 10px;
	background: transparent !important;
	}
}
	
.layout.trg-layout-horizontal {
	background:transparent !important;
}

/*
 * Form colors
 */

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

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

/* 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:  #208bbd;;
}
/* Selected dropdown item color when hovered */
.k-grid td.k-state-selected:hover,
.k-grid tr.k-state-selected:hover td {
    background-color: #205bbd;
    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: var(--header-bg);
    color:  #208bbd9e;;
}

/* 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);
	padding: 8px;
	;
	
}
.k-grid tr.k-state-selected td {
    color: var(--button-text);
	
	
}
.k-grid tr:hover td {
    color: var(--text-color);
	padding: 10px 5px 10px 5px;
	font-stretch: expanded;
	font-size: 1.15em;
	
	
}

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

/* List selected item color */
.k-grid tr.k-state-selected table,
.k-grid tr.k-state-selected.k-state-focused table {
    background-color: var(--header-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(--header-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: #34363e;
    color: blue;
}
.k-calendar .k-header .k-state-hover {
    opacity: 0.95;
    background-color: var(--header-bg);
    color: #999a9e;
}
#menu .level-2 .current a, 
#menu .level-2 .current a:link, 
#menu .level-2 .current a:visited, 
	{
    color: whitesmoke;
	font-weight: bold;
    background: #208bbd;
}

/* Calendar day link colors */
.k-calendar .k-state-hover .k-link {
	    background: #f1d341;
    color: #208bbd;
}
.k-calendar .k-footer .k-nav-today {
    color: #34363e;
    border-color: var(--header-bg);
}

/* Calendar today hover */
.k-calendar .k-today.k-state-hover {
    background-color: var(--header-bg);
}
.k-calendar .k-today.k-state-hover a {
    color: #34363e;
}

/* Calendar selected day color */
.k-calendar td.k-state-selected {
    background: var(--header-bg);
    border-color: var(--header-bg);
}
.k-calendar td.k-state-selected.k-state-hover {
    background: var(--header-bg);
    border-color: var(--header-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(--header-bg);
    border-color: var(--header-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(--header-bg);
    border-color: var(--header-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(--header-bg);
}
.k-gantt-toolbar>.k-gantt-views>li.k-state-selected {
    border-color: var(--header-bg);
}
.k-gantt .k-gantt-toolbar .k-state-selected>.k-link {
    background-color: var(--header-bg);
}

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

/* Gantt single task color when selected */
.k-state-selected.k-task-single {
    background-color: var(--header-bg);
    border-color: var(--header-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(--header-bg);
    border-color: var(--header-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(--header-bg);
}

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

/* Selected drop down items */
.k-list-container .k-list [role=option].k-state-selected {
    color: var(--button-text);
    background-color: var(--header-bg);
}
.k-list-container .k-list [role=option]:hover.k-state-selected {
    color: var(--button-text);
    background-color: var(--header-bg);
    opacity: .9;
    border-color: var(--header-bg);
}
.k-dropdown .k-state-hover .k-input {
    color: var(--text-color);
}

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

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

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

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

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

.k-grid-header .k-header .k-link,
.k-grid-header .k-header,
.k-grid-header .k-link,
.k-grid-header .k-link:link,
.k-pager-info,
.k-scheduler-header,
.k-scheduler-agendaview .k-scheduler-datecolumn {
    color: #888;
}
	
/*
 * 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 top level menu (sections) */
html:not(.mobile) #menu .level-1 {
    position: absolute;
    right: 228px;
    bottom: 13px;
    list-style: none;
    max-width: calc(100vw - 492px);
    display: inline-block;
}

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

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

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

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

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

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

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

/* Side menu positioning on desktop */
html:not(.mobile) #menu .level-2 {
    top: 165px;
	border-right: 1px solid var(--grid-line);
	background: blue;
	
}

/* Move search box to 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;
} */
.field.type-text .editor textarea {
    width: 300px;
    height: 380px;
} 

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

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

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

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

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

/* File upload button */
.field .editor .k-upload .k-dropzone .k-upload-button {
	background-color: var(--header-bg);
	color: var(--text-color);
	transition: all 0.3s ease;
}

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

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

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

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

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

/* Make body hidden until content loaded */
body header,
body #content,
body #context-bar {
    display: none !important;
}
body[class^="page-"] header,
body[class^="page-"] #content,
body[class^="page-"] #header.menu-shown #menu,
body[class^="page-"] #context-bar,
body[class^="has-search page-"] header,
body[class^="has-search page-"] #content,
body[class^="has-search page-"] #header.menu-shown #menu,
body[class^="has-search page-"] #context-bar,
body[class^="error-page"] header,
body[class^="error-page"] #menu,
body[class^="error-page"] #context-bar {
    display: block !important;
}

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

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

/* 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 bottom to prevent search bar from overlapping */
.mobile #inner .table-list .k-grid-content table {
    padding-bottom: 64px;
	margin-bottom: 32px;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

            /* User link and section menu item color */
            #user .user-name,
            #user a,
            #user a:hover, 
            #user a:active, 
            #user a:visited,
            html:not(.mobile) #menu .level-1>li>a
            {
                color: var(--link-color);
            }

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

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

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

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

            /* Mobile context bar */
            .mobile #context-bar,
            .mobile #context-bar>.buttons {
                background: var(--light-bg);
            }

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

            /* Make menu icons black and smaller */
            .mobile #close-menu, .mobile #open-menu,
            #user .open-search,
            #user .user-menu-btn .user-menu-icon {
                color: var(--text-color);
                font-size: 26px;
            }
        }
    }

    /* 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: 18px;
            font-weight: 400;
        }
        #menu .level-2 > li {
            font-weight: 600;
            font-size: 14px;
        }
        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:active {
            font-weight: normal;
            font-size: 14px;
        }

        html:not(.mobile) #menu .level-2 a:focus{
            font-weight: normal;
            font-size: 14px;
        }

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

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

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

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

    /* Auth screen */
    @media all {
        /* Use background landscape */
        #auth .decorator {
            background-image: url('https://cdn.triggre.com/triggre/img/morraine-lake.jpg');
            background-size: cover;
            background-repeat: no-repeat;
            background-position: 50% 50%;
        }

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

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

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

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

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

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

        /* No border on section items */
        html:not(.mobile) #menu .level-1>li,
        html:not(.mobile) #menu .level-1>li:hover,
        html:not(.mobile) #menu .level-1>li.current {
            border: none;
            height: 50px;
            padding: 0 4px;
            margin: 0;
			transition: color 0.2 ease;
			margin-right: 1px;
			background-color: rgba(255,255,255,0.3);
        }
		html:not(.mobile) #menu .level-1>li:hover {
			background-color: transparent;
		}

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

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

        /* Active section link color */
        html:not(.mobile) #menu .level-1>li.current {
            background-color: #208BBD;
        }
        html:not(.mobile) #menu .level-1>li.current>a {
            font-weight: 600;
        }

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

        /* Reposition user menu and icon */
        #user {
            top: 0px;
        }
        html:not(.mobile) #user .user-menu-btn .drop-down {
            top: 110px;
			z-index: 9999;
        }

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

        /* Move search box left */
        html:not(.mobile) .search-box {
            left: 0;
            right: initial;
            top: 50px;
            height: 50px;
            width: 270px;
            background-color: var(--lite-bg);
            border-bottom: 1px solid var(--lite-bg);
        }

        /* 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: 22px;
        }
        
        /* Position clear search button nicely */
        html:not(.mobile) .search-box .clear-search {
            padding-top: 2px !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: 172px;
        }
        
        /* Add a search icon */
        html:not(.mobile) .search-box .content {
            font-size: 16px;
            line-height: 46px;
        }
        html:not(.mobile) .search-box .content:before {
            position: absolute;
            font-family: fontello;
            content: '\e80e';
            height: 24px;
            width: 24px;
            left: 8px;
            top: 3px;
            color: var(--text-color);
        }

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

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

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

        /* Move context bar up */
        html:not(.mobile) body:not([class*="_tiles"]) #context-bar {
            top: 50px;
            height: 50px;
            left: 270px;
            background-color: #fff;
            border-bottom: 1px solid var(--grid-line);
            padding: 0 16px 0 0;
        }
        
		.scroller {
			padding: 0;
		}
		
		html:not(.mobile) body[class*="_tiles"] #context-bar {
            padding-top: 65px;
        }

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

        /* Make context bar buttons look office like */
        html:not(.mobile) #context-bar .button {
            background: var(--lite-bg);
			color: var(--text-color);
            padding: 0 16px;
            margin: 0;
            border-radius: 0;
            height: 50px;
            line-height: 50px;
        }
		
		html:not(.mobile) #context-bar .button, html:not(.mobile) #context-bar button, html:not(.mobile) #context-bar button:active, html:not(.mobile) #context-bar button:focus, html:not(.mobile) #context-bar button:visited {
			margin-right: 4px;
			-webkit-box-shadow: inset 0px 9px 12px -13px rgba(0,0,0,0.7); 
			box-shadow: inset 0px 9px 12px -13px rgba(0,0,0,0.7);
			border-radius: 0;
		}
		
		html:not(.mobile) .scroller>.content {
			margin-left: 0;
			height: 49px;
		}
		
        html:not(.mobile) #context-bar .button:hover {
            background: var(--header-bg);
			font-size: 1.5em;
        }
        #context-bar>.buttons {
            line-height: 50px;
            height: 50px;
        }
		#context-bar button, #context-bar button:active, #context-bar button:focus, #context-bar button:visited {
			height: 50px;
		}

        /* Position left menu */
        html:not(.mobile) #menu .level-2 {
            top: 99px;
            background: var(--full-white);
            bottom: 0;
            padding: 0 0 4px 0;
        }
        html:not(.mobile) #menu .level-2>li {
            text-indent: 16px;
        }

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

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

		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;
			font-weight: 600;
		}

		html:not(.mobile) #menu .level-3>li:hover a:before, html:not(.mobile) #menu .level-3>li.current a:before {
			font-weight: 600;
		}
		
        /* Hover color for left menu */
        html:not(.mobile) #menu .level-3>li:hover {
            background-color: var(--lite-bg-active);
        }
        html:not(.mobile) #menu .level-3>li:hover a {
            color: var(--menu-level3);
			font-weight: 600;
        }

        /* Active menu item */
        html:not(.mobile) #menu .level-3>li.current {
            background-color: #208bbd;
			color-: #ffffff;
			font-weight: 600;
        }
        html:not(.mobile) #menu .level-3>li.current a {
            color: var(--menu-level3);
			font-weight: 600;
        }

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

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

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

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

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

        /* Adjust table sort icons */
        .k-grid-header th.k-header .k-icon {
            left: -8px;
        }
        .k-grid-header .k-link .k-icon.k-i-sort-asc-sm, 
        .k-grid-header .k-link .k-icon.k-i-sort-desc-sm {
            margin-top: 2px;
        }

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

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

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

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

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

        /* Layout content nicely */
        .content {
            margin-left: 0;
        }

			/* 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: 16px;
				-webkit-transform: rotate(0deg);
				transform: rotate(0deg);
			}

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

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

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

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

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

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

            /* Make sure menu items keep their size */
            html:not(.mobile) #menu .level-2>li a {
                line-height: 30px;
            }
            html:not(.mobile) #menu .level-2>li {
                font-size: 16px;
                line-height: 38px;
				border-bottom: 3px solid #0099ff;
            }

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

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