html {
	height: 100%;
	width: 100%;
	overflow: hidden;
	background-color: #343a41;
}

body {
	margin: 0px;
	padding: 0px;
	height: 100%;
	width: 100%;
	font-family: Calibri;
	/* Using this as the standard framework font since it is the only one of the CBS fonts which is standard*/
	color: white;
	background-color: #343a41;
	/* Dark CBS background color*/
	overflow: hidden;
	font-size: 14px;
}

/*Loading throbber*/
.throbber {
	/*margin: 200px auto;*/
	width: 100%;
	height: 100%;
	overflow: hidden;
	background-color: white;
}
	/*Loading throbber*/
	.throbber.dark {
		overflow: hidden;
		background-color: #343a41;
		color: white;
	}

	.throbber > img {
		display: block;
		margin: 0 auto;
		margin-top: 20%;
		transform: scale(2);
	}

	.throbber > h3 {
		text-align: center;
		padding: 20px;
	}
/*Sizing Classes*/
.full-size {
	width: 100%;
	height: 100%;
	overflow: hidden;
}

.scroll-vertical {
	overflow-y: auto;
}

.scroll-horizontal {
	overflow-x: auto;
}

.scroll-both {
	overflow: auto;
}

/*General Classes*/
.hide {
	display: none !important;
}

.no-wrap {
	white-space: nowrap;
}

.wrap {
	white-space: normal;
}

.align-left {
	text-align: left;
}

.align-right {
	text-align: right;
}

.align-center {
	text-align: center;
}

.center {
	text-align: center;
}

.bold {
	font-weight: bold;
}

.cursor {
	cursor: pointer;
}

.error-text {
	color: red;
}

.negative {
	color: red;
}

.k-grouping-row .currency {
	display: inline-block;
}

.currency {
	text-align: right;
}

/*Bigger checkboxes*/
input[type="checkbox"] {
	vertical-align: middle;
	width: 20px;
	height: 18px;
}


/* ngToast messages*/
/*.Toast{ background-color:#a3d0e4;;padding:5px;border-radius:5px;}
.Toast .close{background-color:#a3d0e4;float:right;border:none}*/

/* toast stylings ==================================================*/
.ng-toast {
	z-index: 1000000 !important;
}

.ng-toast__list {
	right: 10px;
}

.ng-toast__message {
	margin-bottom: 5px;
}

.Toast {
	color: white;
	background-color: #343a41;
	border-radius: 20px;
	padding: 4px 5px 3px 15px;
	border: 1px solid #343a41;
	font-size: 16px;
	background-image: none,linear-gradient(to bottom,rgba(255,255,255,.4) 0,rgba(255,255,255,0) 100%);
	/*box-shadow: white 0px 0px 5px 3px;*/
}

	.Toast > span {
		vertical-align: middle;
	}

	.Toast .close {
		background-color: rgba(0,0,0,0.2);
		margin-left: 10px;
		float: right;
		border-radius: 16px;
		padding: 0px;
		width: 24px;
		height: 24px;
		border: none;
		cursor: pointer;
		/* margin-bottom:5px; */
		font-size: 20px;
	}

		.Toast .close:hover {
			background-color: white;
		}

.Toast-Error {
	background-color: red;
	/*box-shadow: red 0px 0px 5px 3px;*/
}

.Toast-Warning {
	background-color: yellow;
	color: black;
	/*box-shadow: yellow 0px 0px 5px 3px;*/
}

.Toast-Success {
	background-color: #5ab303;
	/*box-shadow: #5ab303 0px 0px 5px 3px;*/
}

.Toast-Info {
	background-color: #EEEEEE;
	color: black;
	/*box-shadow: #EEEEEE 0px 0px 5px 3px;*/
}

/*Popup Dialog box stylings ========================================*/
.popup {
}

	.popup img.logo {
		display: block;
		margin: 0 auto;
		padding-top: 10px;
		padding-bottom: 20px;
	}


/*Change titlebox color based on context*/
.k-dialog.success-dialog .k-dialog-titlebar {
	text-shadow: 1px 1px 5px lightgrey;
	background-color: lawngreen;
}

.k-dialog.warning-dialog .k-dialog-titlebar {
	text-shadow: 1px 1px 5px lightgrey;
	background-color: #ffe000;
}

.k-dialog.error-dialog .k-dialog-titlebar {
	text-shadow: 1px 1px 5px lightgrey;
	/*background-color:#F50;*/
	background-color: red;
}

/*Seperate buttons from dialog content*/
.k-dialog .k-dialog-buttongroup {
	background-color: #EEE;
	overflow: hidden;
}

	/*Seperate buttons from dialog content*/
	.k-dialog .k-dialog-buttongroup button {
		min-width: 100px;
	}
/*Unsaved Changes*/
/*Shifts the last action to the left, away from main actions.*/
.unsaved-dialog .k-dialog-buttongroup .k-button:last-child {
	float: left;
	border: 0px;
	background-color: transparent;
	background-image: none;
	text-decoration: underline;
	text-shadow: 1px 1px 1px lightgray;
}
/*Highlights the main action as green.*/
.k-dialog .k-dialog-buttongroup .k-primary {
	min-width: 100px;
	background-color: #11ab11;
	color: white;
}


/*dialog - No padding class*/
.k-dialog.no-padding .k-dialog-buttongroup {
	/*padding-top: 54px !important*/
}

.k-dialog.no-padding .k-dialog-content {
	padding: 0px !important;
	overflow: hidden;
}


/* class for title content each screen */
.title {
	float: left;
}

/* GRID HEADER CONTROLS ===============================*/
.k-grid-toolbar .pre-button {
	float: left;
	padding: 2px;
	margin-right: 2px;
}

	.k-grid-toolbar .pre-button > img {
		height: 32px;
	}

.k-grid-toolbar button {
	background-image: none,linear-gradient(to bottom,rgba(255,255,255,0.8) 0,rgba(255,255,255,0) 100%) !important;
}

	.k-grid-toolbar button.Row-Dirty {
		background-image: none,linear-gradient(to bottom,rgba(255,255,255,0.4) 0,rgba(255,255,255,0) 100%) !important;
	}

.k-grid-toolbar .k-dropdown-wrap {
	background-image: none,linear-gradient(to bottom,rgba(255,255,255,0.8) 0,rgba(255,255,255,0) 100%) !important;
}

.k-grid-toolbar .k-menu {
	background-image: none,linear-gradient(to bottom,rgba(255,255,255,0.8) 0,rgba(255,255,255,0) 100%) !important;
}

/*.k-button-solid { --deprecated with new kendo
    background-image: none,linear-gradient(to bottom,rgba(255,255,255,0.8) 0,rgba(255,255,255,0) 100%) !important;
}*/

.k-picker-solid {
	background-image: none,linear-gradient(to bottom,rgba(255,255,255,0.8) 0,rgba(255,255,255,0) 100%) !important;
}


.k-header .grid-title {
	font-size: 24px;
	font-weight: bold;
	margin: 0px 5px;
	float: left;
	margin-left: 15px;
	margin-top: 5px;
}

.k-header .grid-pre-title {
	color: #777777;
	font-weight: bold;
	font-size: 18px;
	position: relative;
	top: -4px;
	height: 0px;
	margin-left: 15px;
	float: left;
}

	.k-header .grid-pre-title + .grid-title {
		margin-bottom: 0px;
		position: relative;
		top: 8px;
		min-width: 100px;
	}

.k-header .grid-sub-title {
	font-size: 20px;
	margin: 5px 20px;
	float: left;
}
/*For additional grid headers*/
.k-header .extra-info {
	float: left;
	margin: 0px 5px;
}

	.k-header .extra-info .grid-title {
		min-width: initial;
		font-size: 18px;
		padding-top: 2px;
	}

	.k-header .extra-info .grid-pre-title {
		font-weight: normal;
		font-size: 14px;
		position: relative;
		top: -2px;
	}
/* links on the grid header */
.k-header .grid-title-links {
	float: left;
	background-color: #f0faff;
	padding: 5px 20px;
	border-radius: 8px;
}

.k-grid-toolbar {
	padding: 4px;
	padding-bottom: 2px;
	display: flex;
	border-bottom: 1px solid #a3d0e4;
}

.k-header .back-button {
	float: left;
	height: 38px;
}
/* class for toolbar (controls on right side of grid header*/
.toolbar {
	/*float: right;*/
	margin-left: auto;
}

	.toolbar > * {
		float: left;
	}

	.toolbar.left {
		float: left;
	}

/* class for shortcut buttons on the screen */
.toolbar-quick-access {
	float: left;
}


/*add some spacing between button labels and images*/
.k-button > img + span {
	margin-left: 5px;
}

.k-button > img + label {
	margin-left: 5px;
}


/*New rounded buttons*/
.toolbar-quick-access .k-button {
	float: left;
	border-radius: 40px;
	margin: 0px 2px;
	padding: 4px 9px;
	/*min-width:0px !important;*/
	height: 38px;
}

	.toolbar-quick-access .k-button span {
		margin-right: 5px;
	}

		.toolbar-quick-access .k-button span.k-icon {
			margin-right: 0px;
			font-size: 18px;
		}

	.toolbar-quick-access .k-button.active {
		background-color: #7bd2f6;
	}

.toolbar-object {
	margin-right: 20px;
	display: flex;
	align-items: center;
	justify-content: center;
	/*padding: 5px;*/
}

	.toolbar-object label {
		vertical-align: middle;
		font-size: 18px;
		margin-right: 5px;
		white-space: nowrap;
	}

	.toolbar-object > .k-button {
		border-radius: 40px;
		margin: 0px 2px;
		/*padding: 4px 9px;*/
	}

	.toolbar-object .k-dropdownlist .k-button {
		margin: 0px 2px;
		height: unset;
		/*padding: 4px 9px;*/
	}

	.toolbar-object .k-dropdownlist.k-input {
		line-height: 31px;
	}

	.toolbar-object .k-dropdownlist.k-icon {
		top: 4px;
	}

.toolbar-quick-access .toolbar-object {
	float: left;
}

/* toolbar saving throbber*/
.toolbar.saving {
	font-size: 20px;
	font-weight: bold;
	vertical-align: middle;
}

	.toolbar.saving span {
		vertical-align: middle;
		margin-left: 10px;
		margin-right: 10px;
	}

	.toolbar.saving img {
		float: left;
	}

/* action menu style*/
.toolbar .actionmenu {
	float: left;
	margin-left: 2px;
}
	/*Rounded actions menu*/
	.toolbar .actionmenu .k-menu {
		border-radius: 40px;
		border-color: #93c8df;
	}

		.toolbar .actionmenu .k-menu > .k-item {
			border: 0px;
			border-radius: 40px;
		}

			.toolbar .actionmenu .k-menu > .k-item .k-link {
				font-size: 16px;
			}

			/*main action label*/
			.toolbar .actionmenu .k-menu > .k-item > .k-link {
				border-radius: 40px;
				padding: 0.5em 1.1em 0.4em;
				border-style: none;
			}

	.toolbar .actionmenu hr {
		margin-top: 0px;
		margin-bottom: 0px;
		width: 100%
	}
/*shrink the toolbar when mini*/
.toolbar-mini .actionmenu .k-menu > .k-item .k-link {
	padding: .5em 1.1em .4em 0.6em
}

	.toolbar-mini .actionmenu .k-menu > .k-item .k-link label {
		display: none;
	}

	.toolbar-mini .actionmenu .k-menu > .k-item .k-link > .k-icon {
		transform: scale(1.5);
	}

/*Align checkbox correctly*/
.toolbar .actionmenu .k-menu > .k-item .k-link input[type=checkbox] {
	margin-left: -3px;
	margin-right: -1px;
}

.toolbar .actionmenu .k-menu .k-animation-container .k-menu-group {
	border-radius: 8px;
}
/*make sure actionsmenu is alligned to the right*/
.toolbar .actionmenu .k-menu .k-animation-container {
	left: auto !important;
	right: 1px !important;
}

/*toolbar class configurations editable/not spreadsheet/grid*/
.toolbar .require-grid {
	display: none !important;
}

.toolbar .require-spreadsheet {
	display: none !important;
}

.toolbar.grid-mode .require-grid {
	display: block !important;
}

.toolbar.spreadsheet-mode .require-spreadsheet {
	display: block !important;
}

.toolbar.security-readonly .require-edit {
	display: none !important;
}


/* Smaller screen */
@media only screen and (max-width: 580px) {

	.toolbar-object {
		margin-right: 8px;
	}

		.toolbar-object .k-dropdownlist {
			max-width: 140px;
		}

			.toolbar-object .k-dropdownlist.k-input {
				line-height: 30px;
			}

	.toolbar .no-mobile {
		display: none !important;
	}

	.toolbar .actionmenu {
		float: left;
		margin-left: 2px;
	}

		.toolbar .actionmenu .k-menu > li {
			width: 64px;
		}

			.toolbar .actionmenu .k-menu > li > .k-menu-link {
				padding: .5em .5em .4em;
			}

				.toolbar .actionmenu .k-menu > li > .k-menu-link > .k-icon {
					display: none;
				}
}


/*GRID CONTROLS =================================*/
/*wrapping on grid columns*/
.k-grid .k-column-title {
	white-space: normal;
	line-height: 12px;
	min-height: 16px;
}

/*disable text wrapping so row heights are consistent*/
.k-grid .k-grid-content {
	white-space: nowrap;
}
	/*Make sure text on a grid is selectable*/
	.k-grid .k-grid-content td {
		-webkit-user-select: text; /* Safari */
		-moz-user-select: text; /* Firefox */
		-ms-user-select: text; /* Internet Explorer/Edge */
		user-select: text;
		/* Don't wrap subgrids locked columns*/
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	/*Make sure buttons take up the extra space */
	.k-grid .k-grid-content tr > td > button {
		margin: -0.3em 0px;
	}

		/*Dim the disabled buttons more*/
		.k-grid .k-grid-content tr > td > button.k-disabled {
			color: #9fcee2 !important;
		}

	/*primary big column*/
	.k-grid .k-grid-content .primary-column {
		font-weight: bold;
		font-size: 18px;
		line-height: 12px;
	}
		/*kendo elements on primaries not big*/
		.k-grid .k-grid-content .primary-column .k-widget {
			font-size: initial;
			font-weight: initial;
			line-height: initial;
		}

		/*kendo elements on primaries not big*/
		.k-grid .k-grid-content .primary-column .k-combobox {
			font-size: 14px;
		}
		/*kendo elements on primaries not big*/
		.k-grid .k-grid-content .primary-column .k-combobox .k-input-inner {
			padding-top: 0px;
			padding-bottom: 0px;
		}


	.k-grid .k-grid-content .bold-column {
		font-weight: bold;
	}

		.k-grid .k-grid-content .bold-column .k-widget {
			font-weight: initial;
		}

/*Shrink down the grouping header*/
.k-grid .k-grouping-header {
	padding: 0px 5px;
	font-size: 12px;
	display: none;
}

/*The column header with wrapping enabled*/
.k-grid .k-grid-header tr > th {
	font-weight: bold;
	/*vertical-align: middle;
    padding: 8px 10px 4px 10px;
    line-height: 14px;
    white-space: normal;*/
}

/*The header link*/
/*.k-grid .k-grid-header th.k-with-icon .k-link {
    padding: 0px;
    margin: 0px;
    white-space: normal;
    line-height: 14px;
}*/


.k-grid .k-edit-cell {
	padding: 4px;
}

/*By default this option will not appear until activated by the DataBoundExt - hidable via gridOptions.filterable.autoHide*/
.k-grid .k-filter-row {
	display: none;
}

	/*shrink down grid filters*/
	.k-grid .k-filter-row > td {
		padding: 0px 0px 1px 0px;
		white-space: nowrap;
	}

.k-filtercell .k-filtercell-wrapper, .k-filtercell > span {
	gap: 0px !important;
}

/*filter textbox*/
/*.k-grid .k-grid-header .k-filter-row > th .k-filtercell > span{
    padding-right:30px;
}*/
/*filter boolean*/
/*.k-grid .k-grid-header .k-filter-row > th .k-operator-hidden > label {
	padding-left:8px;
}*/
/*filter operator dropdown*/
/*.k-grid .k-grid-header .k-filter-row > th .k-filtercell > span .k-dropdown-operator{
    right:1px;
    margin:0px;
    z-index:2;
}*/
/*filter operator clear - hidden*/
/*.k-grid .k-grid-header .k-filter-row > th .k-filtercell > span .k-button{
    display:block !important;
    z-index:1;
}*/

/*Add filter background color*/
.k-grid .k-grid-header .k-filter-row .k-input {
	background-color: #eaf9ff;
	font-style: italic;
}
/*Remove extra filter controls (numeric textbox)*/
.k-grid .k-grid-header .k-filter-row .k-numerictextbox .k-numeric-wrap {
	padding-right: 0px;
}

	.k-grid .k-grid-header .k-filter-row .k-numerictextbox .k-numeric-wrap .k-select {
		display: none;
	}

/*Display links in white when selected row*/
.k-grid tr.k-selected td a {
	color: white !important;
}

/*changed padding of the no-records*/
.k-grid .k-grid-norecords {
	padding: 20px 0;
	display: flex;
    justify-content: center;
    align-items: center;
}


/*add extra padding to bottom of detail cell*/
.k-grid .k-detail-cell {
	padding: 1.5em 0.6em;
}
	/*remove padding from detail tabstrips*/
	.k-grid .k-detail-cell .k-tabstrip-items-wrapper {
		border: 0px;
		background-color: transparent;
		background-image: none;
		box-shadow: -5px 5px 5px 0px rgba(0,0,0,0.3);
	}
	/*remove border/background from tabstrip*/
	.k-grid .k-detail-cell .k-tabstrip {
		border: 0px;
		background-color: transparent;
		background-image: none;
		box-shadow: -5px 5px 5px 0px rgba(0,0,0,0.3);
		padding: 0px;
	}

/*TODO: is this deprecated? should */
/*Grid detail rows*/
.k-grid .detailtab {
	height: 450px;
}
	/*Disable the overflow scroll on tabstrip content for actions menus*/
	.k-grid .detailtab .k-tabstrip > .k-content.k-active {
		overflow: visible;
	}
	/*Disable the overflow scroll on tabstrip content for actions menus*/
	.k-grid .detailtab .k-tabstrip > .k-content {
		height: 400px;
		padding: 0px;
	}
	/*Disable the overflow scroll on tabstrip content for actions menus*/
	.k-grid .detailtab .k-tabstrip.k-spreadsheet-tabstrip > .k-content {
		height: auto;
	}
	/*Disable the overflow scroll on tabstrip content for actions menus*/
	.k-grid .detailtab .k-tabstrip.k-spreadsheet-tabstrip > .k-content {
		height: auto;
		overflow: auto;
		padding: 0;
	}

tr.k-selected td {
	/*color: white !important;*/
}
/*invisible Filler column*/
.k-grid .spacer-column {
	/* display:none; - THIS DOES NOT WORK ON IE. Use white BG colour instead :( */
	background-color: white !important;
}
/*No padding on the pager*/
.k-grid .k-pager-wrap {
	padding: 0px;
}

/*bigger expand triangles*/
.k-grid .k-icon.k-i-collapse {
	transform: scale(2,2);
}

	/*undo expansion on non-triangle icons*/
	.k-grid .k-icon.k-i-collapse.k-i-reload {
		transform: scale(1.25,1.25) !important;
	}

	.k-grid .k-icon.k-i-collapse.k-i-loading {
		transform: scale(1.25,1.25) !important;
	}

.k-grid .k-icon.k-i-expand {
	transform: scale(2,2);
}

/*Widen datepicker to cover the clear filter button*/
.k-grid tr.k-filter-row td .k-filtercell .k-operator-hidden {
	width: 100%;
}

/*Move clear filter button to the right*/
.k-filtercell .k-filtercell-wrapper > .k-button, .k-filtercell > span > .k-button {
	margin-left: auto;
}

/*Left margin for labels on filtercell*/
.k-filtercell > span > label {
	margin-left: 8px;
}
/*footer stats available*/
.footer-label {
	font-size: 12px;
	line-height: 12px;
	display: block;
}

.footer-stat {
	font-size: 18px;
	line-height: 18px;
	display: block;
}

/*ROW HIGHLIGHTS =================================*/
/*
    these are automatically added to rows via the GridDataBoundExt function. 
    highlight = checkbox checked
    dirty = row data has been changed
    new = new row
    error = row has errored
*/
.Row-Highlight {
	background-color: #a2a2a2 !important;
	color: white !important;
}

.k-alt.Row-Highlight {
	background-color: #989898 !important;
}

.Row-Dirty {
	background-color: #ffae25 !important;
	color: white !important;
}

.k-alt.Row-Dirty {
	background-color: #ffa000 !important
}


/*Selected - more important than dirty & highlight, less important than New/Error*/
.k-selected {
	background-color: #13688c !important;
	color: white !important;
}

	.k-selected:hover {
		background-image: none,linear-gradient(to bottom,rgba(255,255,255,.2) 0,rgba(255,255,255,0) 100%) !important;
	}
/*Selected - more important than dirty & highlight, less important than New/Error*/
.k-alt.k-selected {
	background-color: #13688c !important;
	color: white !important;
}

/*Errored Row = red*/
.Row-Error {
	background-color: #ff0000 !important;
	color: white !important;
}

.k-alt.Row-Error {
	background-color: #e00202 !important;
}

.Row-Error .negative {
	color: white !important;
}

/*New Row = Green*/
.Row-New {
	background-color: #1dc146 !important;
	color: white !important;
}

.k-alt.Row-New {
	background-color: #0cb737 !important;
}

/*New + Error*/
.Row-New.Row-Error {
	background-color: #ff0000 !important;
	color: white !important;
}

.k-alt.Row-New.Row-Error {
	background-color: #e00202 !important;
}



.Row-Highlight > span {
	color: white !important;
}

.Row-Dirty > span {
	color: white !important;
}

.Row-New > span {
	color: white !important;
}

.Row-Error > span {
	color: white !important;
}

.Row-Highlight > a {
	color: white !important;
}

.Row-Dirty > a {
	color: white !important;
}

.Row-New > a {
	color: white !important;
}

.Row-Error > a {
	color: white !important;
}



/*SPREADSHEET CONTROLS =================================*/
.k-spreadsheet {
	width: 100%;
	height: 100%;
}
/*style for spreadsheet in the detail row of grid*/
.k-grid .spreadsheet {
	width: 100%;
	height: 800px;
}

.spreadsheet {
	width: 100%;
	height: 100%;
}
/*style for spreadsheet toolbar*/
.spreadsheet-toolbar {
	margin: 0;
	cursor: default;
	padding: .22em .2em .28em;
	overflow: visible;
	border-width: 0;
}
/*Firefox spreadsheet::after give room form scrollbars*/
@-moz-document url-prefix() {
	.k-spreadsheet-fixed-container {
		height: calc( 100% - 12px) !important;
		width: calc( 100% - 12px) !important;
	}
}


/*NUMERIC TEXTBOX CONTROLS ==========right aligned!=======================*/
.k-numerictextbox .k-input {
	/*width: 100%;
    padding-right: 5px;
    padding-left: 5px;
    text-align: right;*/
}

.k-numerictextbox .k-input-inner {
	width: 100%;
	padding-right: 5px;
	padding-left: 5px;
	text-align: right;
}

.k-numerictextbox .k-icon {
	height: 16px;
}
/*COMBOBOX CONTROLS =================================*/
.k-list-container .k-group-header {
	padding: 0px;
	text-align: left;
}


/*TABSTRIP CONTROLS =================================*/

/*remove tabstrip focusing*/
.k-tabstrip:focus {
	box-shadow: none;
}

/*tabstrip with no background*/
.k-tabstrip.k-widget.no-back {
	background-color: transparent;
	border: 0px;
	box-shadow: none;
	background: none;
}



.k-tabstrip-items-wrapper {
	border-top-color: #68b1d2;
}

	/*hidden initial tab should still show a border*/
	.k-tabstrip-items-wrapper .k-item.ng-hide + .k-item {
		margin-left: 0px;
	}
/*Change padding of the tabs (more horizontal, less vertical)*/
.k-tabstrip > .k-tabstrip-items-wrapper > .k-tabstrip-items .k-link {
	padding: 4px 30px;
}
/*No default padding on tab content*/
.k-tabstrip > .k-content {
	padding: 0px;
	margin: 0px;
}

.k-tabstrip-items-wrapper .k-item {
	border: 1px solid #a3d0e4;
}
/*Make tooltips bright and yellow to stand out*/
.k-widget.k-tooltip.k-popup {
	background-color: yellow;
}

.inside-wizard {
	/*position: absolute;   
    left: 400px;
    right: 400px;*/
	margin: 0 auto;
	text-align: left;
	width: 800px;
}

.noselect {
	-webkit-touch-callout: none; /* iOS Safari */
	-webkit-user-select: none; /* Safari */
	-moz-user-select: none; /* Firefox */
	-ms-user-select: none; /* Internet Explorer/Edge */
	user-select: none;
}


/*Adds light to the background image*/
.background-gradient {
	background-image: none,linear-gradient(to bottom,rgba(255,255,255,.4) 0,rgba(255,255,255,0) 100%);
}

.background-gradient2 {
	background-image: none,linear-gradient(to bottom,rgba(255,255,255,.8) 0,rgba(255,255,255,0) 100%);
}

/* Position the Help Tooltip button*/
.get-help-div {
	display: inline-block;
	padding-top: 6px;
	padding-left: 6px;
}

.toolbar-object .k-picker {
	min-width: 150px;
	line-height: 26px;
}

.k-separator .k-menu-link {
	padding: 0px;
}

.k-separator .k-menu-link-text {
	display: none;
}

.menu-collapse-button {
	height: 36px !important;
}

/* This clashes with colapsed menu
    .framework-header {
    height: 105px !important;
}*/


/***************************
	WIZARD STYLES
***************************/
/**container*/
.wizard-container {
	height: 100%;
	width: 100%;
	background-color: #fdfeff;
}
	/*What happens when the tab is active*/
	.wizard-container > .k-tabstrip > .k-tabstrip-items-wrapper > .k-tabstrip-items > .k-item.k-active {
		box-shadow: 0px -3px 0px 2px #68b1d2;
	}
	/*What happens when the tab is marked as complete*/
	.wizard-container > .k-tabstrip > .k-tabstrip-items-wrapper > .k-tabstrip-items > .k-item.k-state-complete {
		background-color: #91ff27;
		font-style: italic;
	}
		/*when complete and Active*/
		.wizard-container > .k-tabstrip > .k-tabstrip-items-wrapper > .k-tabstrip-items > .k-item.k-state-complete.k-active {
			background-color: #bcff7c;
		}
	/*The wizard header*/
	.wizard-container > .k-header {
		border-bottom: 0px;
	}
	/*The wizard header title*/
	/*.wizard-container > .k-header .grid-title {
			position: absolute;
			font-size: 20px;
			z-index: 1000;
		}*/
	/*The tab section*/
	.wizard-container > .k-tabstrip {
		width: 100%;
		border: 0px;
		padding: 0px;
	}
		/*The tab section  - dont show box shadow when focused on*/
		.wizard-container > .k-tabstrip:focus {
			box-shadow: none;
		}

		.wizard-container > .k-tabstrip > .k-tabstrip-items-wrapper {
			border-bottom-width: 0px;
		}
			/*The tabstrip tab layer + background*/
			.wizard-container > .k-tabstrip > .k-tabstrip-items-wrapper > .k-tabstrip-items {
				text-align: center;
				padding: 0px;
				background-image: none, linear-gradient(rgb(218, 236, 245) 0px, rgb(163, 208, 228) 100%);
				width: 100%;
				justify-content: center;
			}
				/*The tabs themselves*/
				.wizard-container > .k-tabstrip > .k-tabstrip-items-wrapper > .k-tabstrip-items > .k-item {
					margin: 0px 1%;
					border-top-left-radius: 12px;
					border-top-right-radius: 12px;
					position: relative;
					top: 1px;
				}
					/*The tab titles*/
					.wizard-container > .k-tabstrip > .k-tabstrip-items-wrapper > .k-tabstrip-items > .k-item > .k-link {
						padding: 10px 30px;
						font-weight: bold;
						font-size: 18px;
					}
		/*The tab content*/
		.wizard-container > .k-tabstrip > .k-content {
			padding: 0px;
			border: 0px;
			overflow: visible;
		}

/***************************
	REPORT STYLES
***************************/

.report-compatibility-frame {
	width: 100%;
	height: 100%;
	background: white;
}

	.report-compatibility-frame > iframe {
		width: 100%;
		height: 100%;
	}
	
	.report-compatibility-frame .k-panelbar-group .k-panelbar-item-text {
		width: 100%;
		min-height: 40px;
	}

	.report-compatibility-frame .view-report {
		float: right;
		position: absolute;
		top: 10px;
		right: 20px;
		font-weight: bold;
	}

	.report-compatibility-frame .control-container {
		display: block;
		clear: both;
		padding: 5px;
	}

	.report-compatibility-frame .label {
		float: left;
		font-size: larger;
		font-weight: bold;
		line-height: 180%;
		padding-right: 6px;
		width: 200px;
	}

		.report-compatibility-frame .label.small-label {
			font-weight: normal;
			padding-left: 6px;
			padding-right: 6px;
		}

	.report-compatibility-frame .filter-combo {
		float: left;
	}

	.report-compatibility-frame .k-combobox {
		float: left;
		width: 175px;
		margin-right: 16px;
	}

	.report-compatibility-frame .k-button {
		float: left;
	}

	.report-compatibility-frame .hide-loader {
		height: 100%;
		width: 100%;
		background: white;
	}

	.report-compatibility-frame .view-report {
		margin-left: 10px;
	}

.color-add {
	color: #00ed28 !important;
}

.color-refresh {
	color: #00BBBB !important;
}

.color-delete {
	color: #EE0000 !important;
}

.color-undo {
	color: #00BBBB !important;
}

.color-save {
	color: #3c5da5 !important;
}

.color-cancel {
	color: #FF0000 !important;
}
.k-list *, .k-list *::before, .k-list *::after {
	box-sizing: border-box;
}

.k-grid td.new-column {
	background-color: #00ff2222;
}

.k-grid .k-grid-header-new-column {
	width: 100%;
	border-bottom-width: 3px;
	border-bottom-style: solid;
	text-align: center;
	background-color: #00ff2222;
}

	.k-grid .k-grid-header-new-column .top {
		font-weight: bold;
		font-size: 18px;
	}

	.k-grid .k-grid-header-new-column .k-button {
		font-weight: bold;
		margin: 5px;
		min-width: 50px;
		border-radius: 30px;
	}


/*******************************
	INTERNAL BILLING MODULE CSS CLASSES
********************************/
.note-div {
    float: right;
    width: 25px;
    height: 25px;
    cursor: pointer;
}

.note-header {
    font-size: 20px;
    font-weight: bold;
    display: block;
    margin-bottom: 5px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

.pre-note-header {
    line-height: 10px;
    font-size: 12px;
    text-transform: uppercase;
    color: #777777;
}

.action-note-div {
    float: left;
    margin-right: 2px;
}

/*Required field asterisk*/
.required:after {
    content: "*";
    color: red;
}

/* Details screen */
.k-header .k-grid-toolbar {
    max-height: 200px;
}

.detail-container {
    height: 100%;
    width: 100%;
    background-color: #f8fbff !important;
}

    .detail-container .ib-main-toolbar {
        display: grid;
        column-gap: 5px;
        grid-template-columns: 40px auto max-content;
        grid-template-rows: min-content min-content;
        grid-template-areas:
            "back title menu"
            "back detais detais";
        justify-content: stretch;
    }

        .detail-container .ib-main-toolbar .back-button-block {
            grid-area: back;
            padding: 2px;
        }
            .detail-container .ib-main-toolbar .back-button-block .back-btn {
                max-height: 36px;
                max-width: 36px;
                padding: 0px;
            }

        .detail-container .ib-main-toolbar .page-title-block {
            grid-area: title;
            float: left;
            display: grid;
            column-gap: 10px;
            grid-template-columns: max-content auto;
            min-height: 40px;
            margin: 0px 0px 0px 10px;
        }

        .detail-container .ib-main-toolbar .ib-menu {
            grid-area: menu;
        }

        .detail-container .ib-main-toolbar .short-detail-block {
            grid-area: detais;
        }

    .detail-container .ib-title {
        font-weight: bold;
        font-size: 24px;
        line-height: 24px;
        min-height: 26px;
        align-self: center;
        /*	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;*/
    }

    .detail-container .ib-sub-title {
        font-size: 18px;
        line-height: 18px;
        min-height: 22px;
        align-self: center;
    }

    .detail-container .ib-label {
        color: #777777;
        /*make sure labels are not selectable*/
        -webkit-touch-callout: none; /* iOS Safari */
        -webkit-user-select: none; /* Safari */
        -khtml-user-select: none; /* Konqueror HTML */
        -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
        user-select: none; /* Non-prefixed version, currently */
    }

        .detail-container .ib-label:after {
            content: ":";
        }

    .detail-container .ib-value {
        margin-right: 10px;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
    }

    .detail-container .tab-main-detail {
        display: grid;
        column-gap: 5px;
        grid-template-columns: auto max-content;
        grid-template-areas: "editors stats";
        justify-content: stretch;
        overflow: auto;
        max-height: 185px;
        padding: 10px 20px 20px 20px;
        min-width: 550px;
    }

        .detail-container .tab-main-detail .edit-details-block {
            grid-area: editors;
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
        }

        .detail-container .tab-main-detail .ib-stats-block {
            grid-area: stats;
        }

    .detail-container .ib-statistics-grid, .ib-details-grid {
        display: grid;
        column-gap: 0.5em;
        align-items: baseline;
        margin: 2px 10px;
    }

    .detail-container .ib-main-toolbar .short-detail-block {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: flex-start;
    }

/***************************
	Placeholder
***************************/

::-webkit-input-placeholder { /* Edge */
    color: grey;
}

:-ms-input-placeholder { /* Internet Explorer */
    color: grey !important;
}

::placeholder {
    color: grey;
}

/***************************
	Toolbar spectific locks
***************************/

/*Require Tags: attach these tags to elements that should only appear in grid or spreadsheet modes*/
.toolbar .require-grid {
    display: none !important;
}

.toolbar .require-spreadsheet {
    display: none !important;
}

.toolbar.grid-mode .require-grid {
    display: block !important;
}

.toolbar.spreadsheet-mode .require-spreadsheet {
    display: block !important;
}

.toolbar.security-readonly .require-edit {
    display: none !important;
}

.toolbar .actionmenu hr {
    margin-top: 0px;
    margin-bottom: 0px;
}

.k-grid tbody button.k-button {
    min-width: unset;
}

/***************************
	DEFAULTED STYLES
***************************/
.cell-defaulted {
    float: right;
}

/***************************
	SUB-GRID STYLES
***************************/
.sub-grid-container {
    width: 100%;
    height: 100%;
}

    .sub-grid-container .k-grid tr td {
        white-space: nowrap;
        text-overflow: ellipsis
    }

.open-period {
    width: 100%;
    height: 100%;
    background-color: silver;
}

.k-grid tr:not(.k-detail-row):hover .open-period {
    background-color: #AAA;
}

.k-state-selected .open-period {
    background-color: gray;
}

/***************************
	TOOLTIP STYLES
***************************/
/*Make tooltips more standard and less overpowering*/
.k-animation-container .k-widget.k-tooltip.k-popup {
    background-color: white;
    color: #5b5b5b;
    padding: 6px 9px;
    overflow: hidden;
    white-space: nowrap;
    border-radius: 0px;
    box-shadow: 0 0px 0px;
    border-style: solid;
    border-color: #808080;
    border-width: 2px;
    text-align: left;
}
/***************************
	TABSTRIP STYLES
***************************/
/**container*/
.tabstrip-container {
    height: 100%;
    width: 100%;
    background-color: #fdfeff;
}

    .tabstrip-container .combobox-container {
        margin-left: 20px;
        display: inline-block;
        vertical-align: middle;
        margin-top: 2px;
    }

        .tabstrip-container .combobox-container > .department-combo {
            width: 350px;
            display: inline-block;
        }

        .tabstrip-container .combobox-container label {
            vertical-align: middle;
            font-size: 18px;
        }
    /*What happens when the tab is active*/
    .tabstrip-container > .k-tabstrip-wrapper > .k-tabstrip > .k-tabstrip-items > li.k-state-active {
        box-shadow: 0px -3px 0px 2px #68b1d2;
    }
    /*What happens when the tab is marked as complete*/
    .tabstrip-container > .k-tabstrip-wrapper > .k-tabstrip > .k-tabstrip-items > li.k-state-complete {
        background-color: #91ff27;
        font-style: italic;
    }
        /*when complete and Active*/
        .tabstrip-container > .k-tabstrip-wrapper > .k-tabstrip > .k-tabstrip-items > li.k-state-complete.k-state-active {
            background-color: #bcff7c;
        }
    /*The wizard header*/
    .tabstrip-container > .k-header {
        height: 30px;
        padding: 4px;
        border-bottom: 0px;
        padding-bottom: 10px;
    }
        /*The wizard header title*/
        .tabstrip-container > .k-header .grid-title {
            font-size: 28px;
            z-index: 1000;
        }
    /*The tab section*/
    .tabstrip-container > .k-tabstrip-wrapper > .k-tabstrip {
        height: 100%;
        width: 100%;
        border-top: 0px;
    }
        /*The tab section  - dont show box shadow when focused on*/
        .tabstrip-container > .k-tabstrip-wrapper > .k-tabstrip:focus {
            box-shadow: none;
        }
        /*The tabstrip tab layer + background*/
        .tabstrip-container > .k-tabstrip-wrapper > .k-tabstrip > .k-tabstrip-items {
            text-align: center;
            padding: 0px;
            background-image: none, linear-gradient(rgb(218, 236, 245) 0px, rgb(163, 208, 228) 100%);
        }
            /*The tabs themselves*/
            .tabstrip-container > .k-tabstrip-wrapper > .k-tabstrip > .k-tabstrip-items > .k-item {
                margin: 0px 1%;
                border-top-left-radius: 12px;
                border-top-right-radius: 12px;
                position: relative;
                top: 1px;
            }
                /*The tab titles*/
                .tabstrip-container > .k-tabstrip-wrapper > .k-tabstrip > .k-tabstrip-items > .k-item > .k-link {
                    padding: 10px 30px;
                    font-weight: bold;
                    font-size: 18px;
                }
        /*The tab content*/
        .tabstrip-container > .k-tabstrip-wrapper > .k-tabstrip > .k-content {
            padding: 0px;
            overflow: visible;
        }

.tabstrip-subsection > .k-content {
    padding: 0px;
    overflow: visible;
}

/* Smaller screen */
@media only screen and (max-width: 1024px) {
    .detail-container .page-title-block {
        width: auto;
        max-width: unset;
    }

    .toolbar-quick-access .k-button > label {
        display: none;
    }
}