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

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


/* COLORS DEFINITIONS */
:root {
	/* root fonts */
    --main-font: open sans, sans-serif;

	/* root colors */
	--body-bg-color: #2C2D35;
    --header-bg: #002448;
    --lite-bg: #ffffff;
	/* 	--lite-bg-active: #fff; */
	--dark-bg: #2C2D35;
	/* 	--menu-level3: #ffffff; */
	--header-color: #2C2D35;
	--main-header-color: #54ABD0;
	--text-color: #2C2D35;
	--full-white: #ffffff;
	--yellow: #F1D341;
	--link-color: #1183B4;
	--link-color-hover: #34363E;
	--button-bg: #1183B4;
	--button-text: #F9F9F9;
	--button-border: 1px solid #1183B4;
	--grid-line: #34363E;
	/* 	--transparent-line: 1px solid */
	rgba(255,255,255,0.3);
	--move-line: #d53032;
	--user-icon-hover: #d53032;
	--user-icon: #F9F9F9;
	
	/* root FX */
	--body-bg-img: url(
	"https://cdn.triggre.com/my/Background Breeze - Nightfall.png");
	--bg-inlog: url("https://cdn.triggre.com/my/5.png");
	--overlay-dark:
	#1183B4;
	--overlay-lite:
	#1183B4;
	/* --text-shadow: 1px 1px 2px
	rgba(0,0,0,0.86); */
	--td-box-shadow: inset 1px 0 0 #dadce0,inset -1px 0 0 #dadce0,0 1px 2px 0
	rgba(60,64,67,.3),0 1px 3px 1px rgba(60,64,67,.15);
}

/* BODY BACKGROUND IMAGE AND OVERLAY */
/* @media (min-width: 980px) { */
	body {
		background-image: var(--body-bg-img) !important;
		background-size: cover;
	}
	body:before {
		content: ' ';
		display:block;
		width: 100vw !important;
		height: 100vh !important;
		left: 0;
		top: 0;
		position:fixed;
		background: var(--body-overlay);
		background-blend-mode: var(--overlay-blend);
	}
/* } */

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

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

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

/* Menu font size and weight */
html:not(.mobile) #menu .level-1 > li > a {
    font-size: 14px;
    font-weight: 600;
	text-transform: uppercase;
}
#menu .level-2 > li {
    text-transform: uppercase;
	font-weight: bold !important;
	font-color: var(--full-white);
}
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-image: var(--bg-inlog)
}

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

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

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

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

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

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


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

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

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

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

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

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

/*
 * General color settings
 */

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

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

/* Menu hover, line instead of color */
html:not(.mobile) #menu .level-1 > li:not(.current) > a:hover {
	text-decoration: underline;
}
html:not(.mobile) #menu .level-1 > li {
    border-bottom: 2px solid transparent;
    transition: all .3s ease-out;
}
html:not(.mobile) #menu .level-1 > li:hover {
    border-bottom: 2px solid var(--dark-bg);
}

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

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

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

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

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

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

#context-bar button, 
#context-bar button:active,
#context-bar button:focus,
#context-bar button:visited {
    background-color: var(--overlay-lite);
    color: var(--full-white);
    text-transform: none;
	text-shadow: var(--text-shadow);
	border-radius: 16px;
}
	
/* Context bar button hover color, including login button */
html:not(.mobile) #context-bar button:hover,
html:not(.mobile) #context-bar button:active:hover,
html:not(.mobile) #context-bar button:focus,
html:not(.mobile) #context-bar button:focus:hover,
html:not(.mobile) #context-bar button:visited:hover {
    background-color: var(--overlay-lite);
    color: var(--full-white) !important;
}

.mobile #context-bar button {
	background-color: #002448;
}
	
/* login button  color */
#auth .auth-control .footer .btn {
    background-color: var(--link-color);
    color: var(--full-white);
    text-transform: none;
}
	
#auth .auth-control .footer .btn:hover,
#auth .auth-control .footer .btn:focus {
    background-color: var(--yellow);
    color: var(--text-color) !important;
}


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

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

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


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

#inner 
{
	padding-left: 15px;
	background: var(--lite-bg) !important;
}

@media screen and (min-width: 980px) {
	#inner 
	{
	left: 270px !important;
	top: 114px !important;
	padding-left: 16px;
	padding-top: 16px;
	background: var(--lite-bg) !important;
	border: 1px solid var(--lite-bg);
	border-top-left-radius: 32px;
	}
}
	
.layout.trg-layout-horizontal {
	background:transparent !important;
}

/*
 * Form colors
 */

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

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

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

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

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

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

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

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

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

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

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

/* Header background colors in kendo popups etc */
.k-block,
.k-grouping-header, 
.k-pager-wrap, 
.k-draghandle, 
.k-treemap-tile, 
html .km-pane-wrapper .k-header,
.k-calendar .k-header {
    background-color: var(--dark-bg);
    color: var(--button-text);
}
.k-calendar .k-header .k-state-hover {
    opacity: 0.9;
    background-color: var(--dark-bg);
    color: var(--button-text);
}
#menu .level-2 .current a, 
#menu .level-2 .current a:link, 
#menu .level-2 .current a:hover, 
#menu .level-2 .current a:visited, 
#menu .level-2 .current a:focus, 
#menu .level-2 .current a:active {
    color: var(--text-color);
	font-weight: bold;
}

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

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

/* Calendar selected day color */
.k-calendar td.k-state-selected {
    background: var(--dark-bg);
    border-color: var(--dark-bg);
}
.k-calendar td.k-state-selected.k-state-hover {
    background: var(--dark-bg);
    border-color: var(--dark-bg);
    box-shadow: none;
}
.k-calendar .k-today:active,
.k-calendar td.k-state-focused,
.k-calendar td.k-state-selected.k-state-focused,
.k-calendar td.k-state-selected.k-state-hover {
    box-shadow: none;
}
.k-calendar td.k-state-selected.k-state-hover {
    background: var(--dark-bg);
    border-color: var(--dark-bg);
    box-shadow: none;
}
.k-calendar td.k-state-selected.k-state-focused .k-link,
.k-calendar td.k-state-selected.k-state-hover .k-link {
    color: var(--text-color);
}

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

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

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

/* Make no distinction between selected rows and non-selected rows */
.k-gantt .k-grid tr.k-state-selected>td {
    border-color: var(--grid-line);
}
.k-gantt .k-treelist tr.k-state-selected,
.k-gantt .k-treelist tr.k-state-selected td {    
    background-color: #fff;
    border-color: var(--grid-line);
}
.k-gantt .k-treelist tr.k-state-selected.k-alt,
.k-gantt .k-treelist tr.k-state-selected.k-alt td {
    background-color: var(--lite-bg);
    border-color: var(--grid-line);
}

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

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

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

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

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

/* Selected drop down items */
.k-list-container .k-list [role=option].k-state-selected {
    color: var(--button-text);
    background-color: var(--dark-bg);
}
.k-list-container .k-list [role=option]:hover.k-state-selected {
    color: var(--button-text);
    background-color: var(--dark-bg);
    opacity: .9;
    border-color: var(--dark-bg);
}
.k-dropdown .k-state-hover .k-input {
    color: var(--text-color);
}
.k-dropdown-wrap .k-input, .k-numeric-wrap .k-input, .k-picker-wrap .k-input {
	line-height: 34px;
}

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

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

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

/*
 * General layout settings for all pages
 */

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

/* search-box */
.search-box .search-form {
	padding: 18px 16px 16px 16px;
}
.search-box .search-form .field .label {
		margin-top: 0;
	}

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

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

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

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

/* Move top level menu (sections) */
html:not(.mobile) #menu .level-1 {
    position: absolute;
    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:
    transparent;
    /* border-top: 1px solid var(--transparent-line); */
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* Loading spinner color */
.k-loading-image {
    border-top: 3px solid rgba(0,103,184,0.2);
    border-right: 3px solid rgba(0,103,184,0.2);
    border-bottom: 3px solid rgba(0,103,184, 0.2);
    border-left: 3px solid rgba(0,103,184, 1.0);
}
#auth .auth-control .loader .spinner-layer {
    border-color: var(--link-color-hover);
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


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

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

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

            /* Section link hover color */
			html:not(.mobile) #menu .level-1>li>a {
                color: var(--main-header-color);
            }
						
			 /* Tile hover border color */
            html body[class*="_tiles"] #context-bar .button:hover {
                border: 2px solid var(--lite-bg-active);
            }

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

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

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

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

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

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

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

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

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

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

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

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

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

        /* Reposition section menu */
        html:not(.mobile) #menu .level-1 {
            height: 50px;
            top: 0px;
            left: 284px;
            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: 32px;
            padding: 0 8px;
            margin: 0;
            transition: color 0.2 ease;
            margin-right: 1px;
            background-color: transparent;
            margin-top: 16px;
            border-radius: 16px;
            color: var(--lite-bg-active);
            text-shadow: none;
        }

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

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

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

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

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

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

        /* Move search box left */
        html:not(.mobile) .search-box {
            left: 0px;
            right: initial;
            top: 50px;
            height: 64px;
            width: 270px;
            background-color: transparent;
            padding-right: 16px;
            padding-top: 12px;
  }
        
        /* Make search transparent */
        html:not(.mobile) .search-box .simple-search {
            background: transparent;
            border: none;
        }

        /* Position search input nicely */
        html:not(.mobile) .search-box .simple-search {
            padding-top: 8px;
        }
		html:not(.mobile) .search-box input[type=text].simple-search {
			color: #fff;
		}
        
        /* Position clear search button nicely */
        html:not(.mobile) .search-box .clear-search {
            padding-top: 5px !important;
        }

        /* Make room for search icon */
        html:not(.mobile) .search-box .simple-search,
        html:not(.mobile) .search-box .clear-search {
            margin-left: 0px !important;
            width: 132px;
        }
		html:not(.mobile) .search-box .simple-search::placeholder {
			color: #fff;
		}
        
        /* Add a search icon */
        html:not(.mobile) .search-box .content {
            font-size: 16px;
            line-height: 16px;
            background-color: rgb(17 131 180);
            /* border: 1px solid rgba(255,255,255,0.76); */
            border-radius: 20px;
        }
        html:not(.mobile) .search-box .content:before {
            position: absolute;
            font-family: fontello;
            content: '\e80e';
            height: 24px;
            width: 24px;
            left: 22px;
            top: 24px;
            color: #ffffff;
        }

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

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

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

        /* Move context bar up */
        html:not(.mobile) body:not([class*="_tiles"]) #context-bar {
            top: 52px;
            height: 64px;
            left: 270px;
            background-color: transparent;
            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(--button-bg);
            color: var(--full-white);
            /* padding: 0 16px; */
            margin: 0;
            text-shadow: var(--text-shadow);
            border-radius: 16px;
            font-size: 16px;
        }
		
		html:not(.mobile) #context-bar .button, 
		html:not(.mobile) #context-bar button, 
		html:not(.mobile) #context-bar button:active, 
		html:not(.mobile) #context-bar button:focus, 
		html:not(.mobile) #context-bar button:visited {
			margin-right: 8px;
		}
		
		html:not(.mobile) .scroller>.content {
			margin-left: 0;
			height: 64px;
		}
		
        html:not(.mobile) #context-bar .button:hover {
            background: var(--link-color);
			color: var(--full-white) !important;
        }
        #context-bar>.buttons {
            line-height: 64px;
            height: 64px;
        }

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

        /* Give first category a top border */
		html:not(.mobile) #menu .level-2>li {
			
		}
        html:not(.mobile) #menu .level-2>li:first-child {
            border-top: 1px solid var(--transparent-line);
            padding-top: 4px;
        }
		
		/* Level3 */
		html:not(.mobile) #menu .level-2 .level-3 li {
			margin-bottom: 2px;
			transition: all 0.3s ease;
		}

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

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

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

		
        /* Hover color for left menu */
        html:not(.mobile) #menu .level-3>li:hover {
            background-color: var(--overlay-lite);
            color: var(--full-white);
        }
        html:not(.mobile) #menu .level-3>li:hover a {
            color: var(--menu-level3);
			font-weight: 400;
        }

        /* Active menu item */
	    html:not(.mobile) #menu .level-3 {
			width: 270px;
		}
        html:not(.mobile) #menu .level-3>li.current {
            background-color: var(--overlay-lite);
            /* border-radius: 0 18px 18px 0; */
        }
        html:not(.mobile) #menu .level-3>li.current a, html:not(.mobile) #menu .level-3>li.current a:before {
            color: var(--full-white);
            font-weight: 400;
        }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

            /* Keep search and download icons same size */
            html:not(.mobile) [class^="icon-"]:before,
            html:not(.mobile) [class*=" icon-"]:before {
                font-size: 16px;
            }
            html:not(.mobile) .icon-account:before {
                font-size: 32px;
            }
			html:not(.mobile) #context-bar .dropdown-menu-content {
				font-size: 13px;
				line-height: 20px;
			}
			html:not(.mobile) #context-bar .dropdown-menu-content .menu-item {
				font-size: 13px;
				line-height: 22px;
				height: 22px;
				padding-top: 0;
				padding-bottom: 0;
			}

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

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