/* ========================================================================
 * VARIABLES
 * ======================================================================== */
:root {
	--color-brand-blue: #067BC9;
	--color-brand-green: #54CC7A;
	--color-brand-red: #D90F43;

	--color-button-gray: #808080;
	--color-dark-green: #296e01;
	--color-gunmetal-black: #1D2939;
	--color-body-grey: #4A5159;
	--color-warning: #F5B800; /* Jewel: #F5C518, dark amber: #F5B800 */
	--color-danger: #D90F43;

	--color-input-border: #dddddd;
	--color-table-header: var(--color-brand-blue);

	--sidebar-background-color: var(--color-brand-blue);
	--sidebar-text-color: #ffffff;
	--sidebar-separator-color: #ffffff;
	--sidebar-width: 270px; /* 220px */
	--sidebar-minimized-width: 78px; /* 200px */

	--button-corner-radius: 12px;
	--row-action-button-corner-radius: 4px;
	--container-corner-radius: 4px;
	--input-corner-radius: 4px;
	--img-corner-radius: 6px;
	--color-row-action-icon: #595959;
	--color-row-alt: #f2f2f2;
}

.logo {
	/* -- two-line logo -- */
	/*
	width: 122px;
	margin-top: 15px !important;
	*/

	/* -- one-line logo -- */
	width: 180px;
	margin-top: 36px !important;
}

/* ========================================================================
 * SIDEBAR CATEGORY
 * ======================================================================== */
/* SIDEBAR WIDTH */
.header-left .navbar-header,
#sidebar-left,
#sidebar-left:after {
	width: var(--sidebar-width);
}
body.page-header-fixed .header-right {
	left: var(--sidebar-width);
}
body.page-footer-fixed #page-content .footer-content {
	left: var(--sidebar-width);
}

.right-footer-mini {
	display: block;
	position: fixed;
	bottom: 0px;
	right: 0px;

	background-color: white;
	color: #999;
	padding: 8px 11px;
	font-size: 12px;
	border-top: 1px solid #DDD;
	border-bottom: 1px solid #DDD;
	border-left: 1px solid #DDD;
	z-index: 999;
}
.left-sidebar-footer {
	display: block;
	position: fixed;
	bottom: 0px;
	left: 0px;
	background-color: var(--color-brand-blue);
	color: white;
	padding: 4px 9px;
	font-size: 11px;
	z-index: 999;
	width: var(--sidebar-width);
}

.left-sidebar-footer span,
.right-footer-mini span {
    text-wrap: nowrap;
}
.right-footer-mini span .fi {
    color: #BBB;
}
.left-sidebar-footer span .fi {
	color: white;
}

#page-content {
    margin-left: var(--sidebar-width);
}
/* SIDEBAR MINIMIZED STATE */
body.page-sidebar-minimize .menu-item .text,
body.page-sidebar-minimize #sidebar-left .sidebar-menu > li:hover > a > .text,
body.page-sidebar-minimize-auto #sidebar-left .sidebar-menu > li:hover > a > .text {
	display: none;
}

body.page-sidebar-minimize #sidebar-left,
body.page-sidebar-minimize-auto #sidebar-left,
body.page-sidebar-minimize #sidebar-left:after,
body.page-sidebar-minimize-auto #sidebar-left:after,
body.page-sidebar-minimize #sidebar-left .sidebar-menu,
body.page-sidebar-minimize-auto #sidebar-left .sidebar-menu,
body.page-sidebar-minimize #sidebar-left .sidebar-menu > li:hover,
body.page-sidebar-minimize-auto #sidebar-left .sidebar-menu > li:hover,
body.page-sidebar-minimize #sidebar-left .sidebar-menu > li.active,
body.page-sidebar-minimize-auto #sidebar-left .sidebar-menu > li.active {
	width: var(--sidebar-minimized-width);
}
body.page-footer-fixed.page-sidebar-minimize #page-content .footer-content,
body.page-footer-fixed.page-sidebar-minimize-auto #page-content .footer-content,
body.page-sidebar-minimize #header .header-right .navbar-toolbar:before,
body.page-sidebar-minimize-auto #header .header-right .navbar-toolbar:before {
	left: var(--sidebar-minimized-width);
}
body.page-sidebar-minimize #page-content,
body.page-sidebar-minimize-auto #page-content {
	margin-left: var(--sidebar-minimized-width);
}
body.page-sidebar-minimize .left-sidebar-footer {
	display: none;
}

#impersonateBanner {
	position: fixed;
	top: 0px;
	left: 0px;
	background-color: var(--color-brand-red);
	color: white;
	z-index: 10100;
	width: var(--sidebar-width);
	text-align: center;
	font-size: .9em;
}

@media (max-width: 768px) {
	body.page-sidebar-fixed.page-sidebar-left-show #header .header-right {
		left: var(--sidebar-width);
	}
	.sidebarMenuContent {
		margin-top: 50px !important;
	}
	body.page-sidebar-fixed #sidebar-left,
	body.page-sidebar-fixed #sidebar-left:after,
	.left-sidebar-footer,
	#impersonateBanner {
		left: calc(var(--sidebar-width) * -1);
	}

	body.page-sidebar-left-show #header {
		left: var(--sidebar-width);
	}
	body.page-sidebar-left-show #header .navbar-toolbar .navbar-form input {
		min-width: 400px;
	}
	body.page-sidebar-left-show #sidebar-left,
	body.page-sidebar-left-show #impersonateBanner {
		top: 0px;
		left: 0px;
	}
	body.page-sidebar-left-show #sidebar-left:after {
		left: 0px;
	}
	body.page-sidebar-left-show #page-content {
		margin-left: var(--sidebar-width) !important;
	}
}

/* SIDEBAR COLORS AND BEHAVIORS */
#sidebar-left,
#sidebar-left:after,
#header .navbar-header {
	background-color: var(--sidebar-background-color);
}
#header {
	z-index: 101;
}
.header-content h2 svg {
	height: 25px;
	width: 26px;
	position: relative;
	top: 2px;

}
.header-content h2 .svg-wrapper {
	margin-right: 10px;
	border-right: 1px solid #a5b1c0;
}
#sidebar-left {
	z-index: 99;
}
.sidebar-content, .sidebar-content h1, .sidebar-content h2, .sidebar-content h3 {
	color: var(--sidebar-text-color);
}
.menu-item:not(.active):not(.admin-item.openSubmenu):not(.enterprise-item.openSubmenu):hover {
	background-color: var(--sidebar-background-color);
	filter: brightness(1.33);
	transition: filter 0.3s ease;
}

.menu-item:not(.active):not(.admin-item.openSubmenu):not(.enterprise-item.openSubmenu)::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 0;
	height: 100%;
	background-color: #76aadb;
	transition: width 0.2s ease;
}
.menu-item:not(.active):not(.admin-item.openSubmenu):not(.enterprise-item.openSubmenu):hover::before {
	width: 5px;
}

.submenuItem:hover {
	background-color: var(--sidebar-background-color);
	filter: brightness(1.33);
}
.sidebar-menu > li > ul > li.active {
	background-color: var(--sidebar-background-color);
	filter: brightness(1.33);
}
.sidebar-menu ul li.active a {
	color: white;
}
.sidebar-menu .menu-item .submenu li:hover,
.sidebar-menu .menu-item .submenu li a:hover {
	background-color: var(--sidebar-background-color);
	filter: brightness(1.12);
}

.sidebarMenuContent {
	overflow-y: auto;
	height: calc(100vh - 92px);
}
body.page-sidebar-minimize .sidebarMenuContent {
	overflow-y: auto;
	height: calc(100vh - 30px);
	margin-top: 16px !important;
}

.sidebar-content {
	padding: 20px 14px 18px 10px;
	margin-bottom: 18px;
	border-bottom: none;
}
.sidebar-menu > li {
	padding: 6px 0px 6px 20px;
	/* one-line logo: 26px one-line centered, two-line logo: 4px 0px 4px 20 */
}
body.page-sidebar-minimize .sidebar-menu > li {
	padding: 1px 0px 1px 9px;
}

.openSubmenu {
	background-color: var(--sidebar-background-color);
	filter: brightness(1.1);
}

.sidebar-menu > li > ul > li > a:hover {
	color: white;
}
.sidebar-menu > li.active:not(.admin-item.openSubmenu):not(.enterprise-item.openSubmenu) {
	background-color: var(--sidebar-background-color);
	filter: brightness(1.33);
}
.sidebar-menu > li.active:not(.admin-item.openSubmenu):not(.enterprise-item.openSubmenu)::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	background-color: white;
	width: 5px;
}
.sidebar-menu > li.active .icon {
	text-shadow: 0px 1px 1px #777;
}
.navbar-minimized-top-left-block {
	background-color: var(--sidebar-background-color);
	width: var(--sidebar-minimized-width);
	height: 58px;
}
.sidebar-menu ul li a {
	color: #f2f2f2;
}

.sidebar-menu > li > a:hover span {
	color: #d0d0d0;
}
.sidebar-menu > li > a:hover .text, .sidebar-menu > li > a:hover .icon > i {
	color: white;
}

.menuIcon {
	display: inline-block;
	text-align: center;
	border-radius: 50%;
	background-color: transparent;
	height: 30px;
	width: 31px;
}
.menuIcon .fi {
	color: var(--sidebar-text-color);
	top: 1px;
	font-size: 20px;
}
.active .menuIcon .fi {
	color: white;
}
.sidebar-menu > li > a > span.text {
	color: var(--sidebar-text-color);
	margin-left: 8px;
	font-size: 16px;
	top: -3px;
}

.sidebar-menu .enterprise-item .menuIcon i {
	color: white;
}
.sidebar-menu .enterprise-item.active .menuIcon i {
	color: white;
}

.page-sidebar-minimize .navbar-minimized-top-left-block {
	display: block !important;
}

/* ========================================================================
 * NEW BUTTONS
 * ======================================================================== */
.btn {
	transition: background-color 0.3s ease;
	font-weight: 600;
	border-radius: var(--button-corner-radius);
}
.btn.active,
.btn:active {
	box-shadow: none;
	-webkit-box-shadow: none;
}

.btn.text i {
	margin-right: 6px;
}
.btn .fi, button .fi {
	color: #f2f2f2;
}

.btn-main,
.btn-primary.bootbox-accept {
	background-color: var(--color-brand-green) !important;
	color: #000000 !important;
	border: 1px solid var(--color-brand-green) !important;
}
.btn-main .fi {
	color: #000000 !important;
}
.btn-main:hover,
.btn-main:focus,
.btn-main:hover,
.btn-primary.bootbox-accept:hover,
.btn-primary.bootbox-accept:hover,
.btn-primary.bootbox-accept:hover {
	background-color: #000000 !important;
	color: var(--color-brand-green) !important;
	border-color: #000000 !important;
}
.btn-main:hover .fi,
.btn-main:focus .fi,
.btn-main:active .fi {
	color: var(--color-brand-green) !important;
}

.btn-secondary:not(.bootbox-cancel),
.btn-primary.editable-submit {
	background-color: white;
	color: var(--color-button-gray);
	border-radius: 8px;
	border: 1px solid var(--color-brand-green);
}
.btn-secondary .fi,
.btn-primary.editable-submit .fi {
	color: var(--color-button-gray);
}
.btn-secondary:not(.bootbox-cancel):hover,
.btn-secondary:not(.bootbox-cancel):focus,
.btn-secondary:not(.bootbox-cancel):active,
.btn-primary.editable-submit:hover,
.btn-primary.editable-submit:focus,
.btn-primary.editable-submit:active {
	background-color: var(--color-brand-green);
	color: #000000;
	border-color: var(--color-brand-green);
}
.btn-secondary:hover .fi,
.btn-secondary:focus .fi,
.btn-secondary:active .fi,
.btn-primary.editable-submit:hover .fi,
.btn-primary.editable-submit:focus .fi,
.btn-primary.editable-submit:active .fi{
	color: #000000;
}

.btn-tertiary,
.btn-danger.editable-cancel,
.bootbox-cancel {
	background-color: transparent;
	color: var(--color-button-gray);
	border-radius: 8px;
	border: none;
	text-decoration: underline;
}
.btn-tertiary .fi,
.btn-danger.editable-cancel .fi {
	color: var(--color-button-gray);
}
.btn-tertiary:hover,
.btn-tertiary:focus,
.btn-tertiary:active,
.btn-danger.editable-cancel:hover,
.btn-danger.editable-cancel:focus,
.btn-danger.editable-cancel:active,
.btn-secondary.bootbox-cancel:hover,
.btn-secondary.bootbox-cancel:focus,
.btn-secondary.bootbox-cancel:active {
	color: var(--color-brand-green);
	background-color: transparent;
	text-decoration: underline;
}
.btn-tertiary.warning:hover,
.btn-tertiary.warning:focus,
.btn-tertiary.warning:active {
	color: var(--color-brand-red);
	text-decoration: underline;
}
.btn-tertiary:hover .fi,
.btn-tertiary:focus .fi,
.btn-tertiary:active .fi,
.btn-tertiary.editable-cancel:hover .fi,
.btn-tertiary.editable-cancel:focus .fi,
.btn-tertiary.editable-cancel:active .fi {
	color: var(--color-brand-green);
}
.btn-tertiary.warning:hover .fi,
.btn-tertiary.warning:focus .fi,
.btn-tertiary.warning:active .fi{
	color: var(--color-brand-red);
}


/* Datatables Buttons */
.buttons-collection,
.btn-datatable-action {
	background: white !important;
	color: var(--color-button-gray) !important;
	border-radius: 8px !important;
	border: 1px solid var(--color-brand-green) !important;
}
.buttons-collection .fi,
.btn-datatable-action .fi {
	color: var(--color-button-gray);
	margin-right: 4px;
}
.buttons-collection:hover,
.buttons-collection:focus,
.buttons-collection:active,
.btn-datatable-action:hover,
.btn-datatable-action:focus,
.btn-datatable-action:active {
	background-color: var(--color-brand-green) !important;
	color: #000000 !important;
	border-color: var(--color-brand-green) !important;
}
.buttons-collection:hover .fi,
.buttons-collection:focus .fi,
.btn-datatable-action:active .fi,
.btn-datatable-action:focus .fi {
	background-color: var(--color-brand-green) !important;
	color: #000000;
	border-color: var(--color-brand-green) !important;
}

div.dt-container .dt-paging .dt-paging-button.current, div.dt-container .dt-paging .dt-paging-button.current:hover {
	border: 1px solid transparent;
	text-decoration: none !important;
	color: var(--color-button-gray);
	background: none;
	font-weight: 900;
}
div.dt-container .dt-paging .dt-paging-button:hover {
	border: 1px solid transparent;
	text-decoration: underline !important;
	color: var(--color-brand-green) !important;
	background: none;
}

/* ========================================================================
 * COMMON COMPONENTS
 * ======================================================================== */
body, html {
	background-color: white;
}
.body-content.centeredForm {
	margin: auto !important;
	max-width: 1100px;
}
.body-content.centeredForm.smallForm {
	max-width: 800px;
}

a {
	text-decoration: none;
	transition: background-color 0.3s ease;
}
a:focus, a:hover {
	text-decoration: underline !important;
}
a.no-underline:focus,
a.no-underline:hover,
.dropdown-menu li a:focus,
.dropdown-menu li a:hover {
	text-decoration: none !important;
}

th a:focus, th a:hover {
	color: white;
	text-decoration: underline;
}

input[type="text"],
input[type="password"],
input[type="time"],
input[type="week"],
input[type="number"],
input[type="email"],
input[type="url"],
input[type="search"],
input[type="tel"],
input[type="color"],
textarea,
select {
	border: 1px solid var(--color-input-border);
	box-shadow: none !important;
	font-size: 13px !important;
	border-radius: var(--input-corner-radius);
	padding: 5px 12px;
}

input[type="datetime"],
input[type="datetime-local"],
input[type="date"],
input[type="month"] {
	padding: 2px 12px;
	line-height: 24px;
	color: black;
}
@media screen and (-webkit-min-device-pixel-ratio:0) {
	input[type=date].form-control, input[type=time].form-control, input[type=datetime-local].form-control, input[type=month].form-control {
		line-height: 24px;
	}
}


/* these are visually linked; change the padding in one, you must change it in the other */
.select2-selection__rendered {
	padding: 2px 8px;
}

.bottom-action-bar {
	position: fixed;
	bottom: 0;
	right: 0;
	background: white;
	width: 100%;
	padding: 12px 0 12px var(--sidebar-width);
	margin: 0;
	z-index: 2;
	border-top: 1px solid var(--color-input-border);
}
@media (max-width: 768px) {
	.bottom-action-bar {
		padding: 12px 164px 12px 0px;
		bottom: 0px;
	}
}

.input-group .form-control:last-child,
.input-group-addon:last-child,
.input-group-btn:first-child>.btn-group:not(:first-child)>.btn,
.input-group-btn:first-child>.btn:not(:first-child),
.input-group-btn:last-child>.btn,
.input-group-btn:last-child>.btn-group>.btn,
.input-group-btn:last-child>.dropdown-toggle,
.input-group-addon:first-child,
.input-group-btn:first-child>.btn,
.input-group-btn:first-child>.btn-group>.btn,
.input-group-btn:first-child>.dropdown-toggle,
.input-group-btn:last-child>.btn-group:not(:last-child)>.btn,
.input-group-btn:last-child>.btn:not(:last-child):not(.dropdown-toggle) {
	border-radius: var(--input-corner-radius);
}

.btn-group .btn {
	border-radius: var(--row-action-button-corner-radius);
}

.label-primary {
	background-color: #0c7bc9;
	color: white;
}
.label-danger {
	color: var(--color-brand-red);
	border: 1px solid var(--color-brand-red);
	background-color: white;
}
.label-success {
	background-color: var(--color-brand-green);
	color: black;
}
.label-hidden {
	visibility: hidden;
}
.label-default.border {
	border: 1px solid #bdbdbd;
}

.greenIcons .fi {
	color: var(--color-brand-green);
}

.multiSelectActions {
	transition: display 0.15s ease-in-out;
	visibility: hidden;
}
.multiSelectActions.danger:hover,
.multiSelectActions.danger:hover .fi {
	color: white !important;
}
.btn-datatable-action.danger:hover {
	background-color: var(--color-danger) !important;
	border-color: var(--color-danger) !important;
}

.brand img {
	max-width: 55vw;
}

.banner {
	margin-bottom: 26px;
}
.banner hr {
	border: 1px #d1d1d1 solid;
	margin: 0;
}

h1, h2, h3, h4, h5, h6 {
	font-family: "Helvetica Neue Light", "HelveticaNeue-Light", "Helvetica Neue", Calibri, Helvetica, Arial, sans-serif;
	color: var(--color-gunmetal-black);
}
h3 {
	font-size: 22px;
}
h4 {
	font-size: 19px;
	font-weight: bold;
	color: var(--color-brand-blue) !important;
}

.header-content h2 a.titleLink {
	color: #1D2939;
}

img {
	border-radius: var(--img-corner-radius);
}

.panel-new .panel-heading ul li {
	font-size: 1.2em;
	font-family: "Helvetica Neue Light", "HelveticaNeue-Light", "Helvetica Neue", Calibri, Helvetica, Arial, sans-serif;
	color: #4f4f4f;
	background: transparent !important;
}
.panel-new .panel-heading ul li.active {
	font-weight: 600;
	color: #2a2a2a;
	border-bottom: 3px #0c7bc9 solid;
	border-bottom-left-radius: 2px;
	border-bottom-right-radius: 2px;
	border-right: none;
	border-left: none;
	border-top: none;
}
.panel-new ul li {
	border-right: none;
	border-left: none;
	border-top: none;
	background: transparent;
}

.newPanelTab {
	border-right: none;
	border-right-color: transparent;
	border-left: none;
	border-left-color: transparent;
	border-top: none;
	border-top-color: transparent;
	background: transparent;
}
.panel-heading.fixed {
	position: fixed;
	z-index: 32;
	width: 100%;
	padding-top: 13px;
}
.panel-heading.fixed .nav-tabs span {
	display: inline;
}

.body-content.fixed-tab-headers {
	margin: 0px;
	padding: 0px 20px;
}

.divNoWrapEllipsis {
	text-wrap: nowrap;
	text-overflow: ellipsis;
	overflow-x: clip;
}

.divHeaderRow {
	background-color: var(--color-table-header);
	color: white;
	border: 1px var(--color-table-header) solid;
	border-top-left-radius: var(--container-corner-radius);
	border-top-right-radius: var(--container-corner-radius);
	font-size: 14px;
	font-weight: 700;
}
.divHeaderRow div {
	padding: 10px;
}
.divTable .row>div {
	padding: 8px 10px;
}

.panel-table-title {
	font-size: 18px;
	margin: 7px 0px 0 4px;
	color: var(--color-gunmetal-black);
}
.panel-footer {
	background-color: #ffffff;
}

.input-group:not(.md) input.left-icon {
	padding-left: 50px !important;
}

/* ========================================================================
 * TABLE MENUS - DROPDOWNS
 * ======================================================================== */
.dropdown-menu a,
a.actionLink {
	-ms-touch-action: manipulation;
	touch-action: manipulation;
	cursor: pointer;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}
.dropdown-menu a i {
	padding-right: 3px;
}
.dropdown-menu a img {
	height: 14px;
	width: 15px;
	margin-left: -1px;
	margin-right: 2px;
	border-radius: 0px;
	position: relative;
	top: -1px;
}
ul.dropdown-menu {
	margin-top: 0;
}

.rowActionsDropdownContainer {
	color: #333;
	font-style: normal;
	display: inline-block;
}
.btn-toolbar object {
	filter: grayscale(100%) brightness(0.9);
}
.rowActionButton {
	width: 30px;
	height: 26px;
	border: transparent 1px solid;
	border-radius: 8px !important;
}
.rowActionButton .fi {
	color: var(--color-row-action-icon);
	font-size: 15px;
}
.rowActionButton img {
	border-radius: 0px;
	width: 17px;
	height: 17px;
}
.rowActionButton:hover,
.rowActionButton:focus,
.rowActionButton:active	{
	border: #d2d2d2 1px solid !important;
}
.rowActionButton:hover .fi,
.rowActionButton:focus .fi,
.rowActionButton:active .fi	{
	color: var(--color-brand-blue);
	filter: drop-shadow(4px 4px 8px rgba(86, 86, 86, .8));
}
.rowActionButton:hover img:not(.no-blue-hover),
.rowActionButton:focus img:not(.no-blue-hover),
.rowActionButton:active img:not(.no-blue-hover)	{
	filter: drop-shadow(4px 4px 8px rgba(86, 86, 86, .8)) invert(21%) sepia(100%) saturate(7500%) hue-rotate(195deg) brightness(105%) contrast(97%);
}
.rowActionButton:hover img.no-blue-hover,
.rowActionButton:focus img.no-blue-hover,
.rowActionButton:active img.no-blue-hover {
	filter: drop-shadow(4px 4px 8px rgba(86, 86, 86, .8)) brightness(115%);
}
.rowActionButton.redHover:hover .fi,
.rowActionButton.redHover:focus .fi,
.rowActionButton.redHover:active .fi	{
	color: var(--color-brand-red);
	filter: drop-shadow(4px 4px 8px rgba(86, 86, 86, .8));
}
.rowActionButton.greenHover:hover .fi,
.rowActionButton.greenHover:focus .fi,
.rowActionButton.greenHover:active .fi	{
	color: #296e01;
	filter: drop-shadow(4px 4px 8px rgba(86, 86, 86, .8));
}
.rowActionButton.dropdown-toggle {
	width: 20px !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
}

/* ========================================================================
 * COLORS
 * ======================================================================== */
.navbar li a {
	color: #717984;
}
.navbar-toolbar .navbar-right .navbar-profile .dropdown-menu li a {
	color: #717984;
	font-weight: 600;
}
.row.alt,
.list-group-item.alt,
.list-group .list-group-item:nth-child(odd),
.whiteBackgroundEditable .row.alt .editableform {
	background-color: var(--color-row-alt);
}

tr.systemTemplate td {
	background-color: rgba(88, 88, 214, .2);

}

.input-group-addon {
	background-color: #FAF9F9;
}

.blueBackground {
	background-color: var(--color-brand-blue);
	color: white;
}
.blueColor {
	color: var(--color-brand-blue) !important;
}
.warningRed {
	color: var(--color-brand-red) !important;
}
.blackColor {
	color: var(--color-gunmetal-black) !important;
}
.whiteColor {
	color: #f9f9f9 !important;
}
.greenColor {
	color: var(--color-dark-green) !important;
}

.sunsetBackground {
	background: linear-gradient(to bottom, #F56217, #e1a33a);
}
.sunsetMutedColor {
	background: linear-gradient(to bottom, hsl(20 42% 53% / 1), hsl(38 24% 55% / 1));
}
.greenStaticGlow {
	color: #296e01 !important;
	filter: drop-shadow(4px 4px 8px rgba(86, 86, 86, .8));
}

/* ========================================================================
 * COMPONENTS - FlatIcon
 * ======================================================================== */
.fi {
	position: relative;
	top: 2px;
	color: var(--color-brand-blue);
	display: inline-block;
}

.fi.inline {
	color: var(--color-body-grey);
	cursor: pointer;
	opacity: .3;
}

.fi-inline-div {
	left: -0px;
	top: 8px;
	position: absolute;
}

.input-group-addon .fi {
	color: #636e7b;
}
.input-group.md .fi {
	font-size: 14px;
	padding: 7px 0px;
	left: -2px;
}

.fi-spin {
	display: inline-block; /* Ensures the element can rotate */
	animation: fi-spin 2s infinite linear;
	font-size: 1.33333333em;
	line-height: .75em;
	vertical-align: -15%;
	margin-right: 5px;
	color: var(--color-brand-blue);
}
@keyframes fi-spin {
	0% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(360deg); /* Ensures a smooth full spin */
	}
}

.fi-sr-interrogation {
	color: var(--color-brand-blue);
}

.fi-sm {
	font-size: .75em;
	vertical-align: 15%;
}
.fi-lg {
	font-size: 1.5em;
	line-height: .75em;
	vertical-align: -15%;
}
.fi-xl {
	font-size: 2.1em;
}

.fi-stack {
	position: relative;
	display: inline-block;
	width: 2em;
	height: 2em;
	line-height: 2em;
	vertical-align: middle;
}
.fi-stack .fi {
	position: absolute;
	left: 0;
	width: 100%;
	text-align: center;
}
.fi-stack .fi-sr-ban.fi-lg {
	top: 4px;
	z-index: 2;
}
.fi-stack .fi-sr-ban {
	color: var(--color-brand-red) !important;
	left: -3px;
	top: 3px;
}

.btnWithText .fi {
	padding-right: 5px;
}
.noData i.fi {
	color: #999999;
}
.noData img {
	opacity: .6;
}

/* patching x-editable classes to work around dependency on yet another glyph font */
.glyphicon {
	font-family: "uicons-solid-rounded";
}
.glyphicon-ok:before {
	content: "\e35f";
}
.glyphicon-remove:before {
	content: "\e4cd";
}

/* ========================================================================
 * COMPONENTS - Simple Switch
 * ======================================================================== */
.simpleSwitch {
	position: relative;
	display: inline-block;
	width: 55px;
	height: 28px;
}
.simpleSwitch input:disabled + .slider {
	opacity: .33;
}
.simpleSwitch.small {
	width: 40px;
	height: 20px;
}

/* Hide the default checkbox */
.simpleSwitch input {
	opacity: 0;
	width: 0;
	height: 0;
}
.simpleSwitch .slider {
	position: absolute;
	cursor: pointer;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: #ccc;
	transition: .4s;
	border-radius: 34px;
}
.simpleSwitch .slider:before {
	position: absolute;
	content: "";
	height: 20px;
	width: 20px;
	left: 6px;
	bottom: 4px;
	background-color: white;
	transition: .4s;
	border-radius: 50%;
}
.simpleSwitch.small .slider:before {
	height: 12px;
	width: 12px;
	left: 6px;
}
/* When checked, move the slider */
input:checked + .slider {
	background-color: var(--color-brand-green);
}
input:checked + .slider:before {
	transform: translateX(23px);
}
.simpleSwitch.small input:checked + .slider:before {
	transform: translateX(16px);
}

.simpleSwitch .slider.round {
	border-radius: 34px;
}
.simpleSwitch .slider.round:before {
	border-radius: 50%;
}

.simpleSwitchLabel {
	position: relative;
	top: 4px;
	padding-right: 4px;
	font-size: 1.1em;
}
/* pardon the inconsistency with Small; there's a class called "small" that does things we don't want */
.simpleSwitchLabelSmall {
	font-size: 1em;
	top: 0px;
	padding-right: 4px;
}

/* ========================================================================
 * COMPONENTS - DATATABLES
 * ======================================================================== */
.dataTable thead {
	background-color: var(--color-table-header);
	color: white;
	border: 1px var(--color-table-header) solid;
	font-size: 14px;
}

.dataTable {
	border: 1px #909eb6 solid !important;
	border-radius: var(--container-corner-radius);
	border-collapse: separate;
}
table.dataTable.display.noAutoStripe>tbody>tr:nth-child(odd)>*,
table.dataTable.display.noAutoStripe>tbody>tr:nth-child(even)>* {
	box-shadow: none;
}
table.dataTable.display.noAutoStripe>tbody>tr:hover,
table.dataTable.display.noAutoStripe>tbody>tr:active,
table.dataTable.display.noAutoStripe>tbody>tr:focus {
	box-shadow: inset 0 0 0 9999px rgba(var(--dt-row-stripe), 0.040);
}
table.dataTable.display.noAutoStripe>tbody>tr.alt {
	box-shadow: inset 0 0 0 9999px rgba(var(--dt-row-stripe), 0.025);
}

/* the div containing buttons called by a datatables dropdown button */
.dt-button-collection {
	border-radius: 0px !important;
	margin-top: 0px !important;
}
.dt-button-collection i.fi {
	color: var(--color-button-gray);
	padding-right: 4px;
}
.btn-datatable-action:hover {
	--bg-opacity: 1 !important;
}
.dtrCB {
	min-width: 34px;
	padding-left: 0px !important;
	padding-right: 0px !important;
	text-align: center;
}
.dtrCB .dt-column-order {
	display: none;
}

.dtr-data {
	max-width: 60vw;
	display: inline-block;
	word-wrap: break-word !important;
	overflow-wrap: break-word !important;
	white-space: normal !important;
}
.dtr-title {
	vertical-align: top;
}
.dtr-control:before {
	margin-right: 6px;
}

div.dt-buttons>.dt-button,
div.dt-buttons>div.dt-button-split .dt-button {
	border-radius: var(--button-corner-radius) !important;
}
.dt-input {
	border-radius: var(--input-corner-radius) !important;
}

.dataTable thead tr th:first-child,
.dataTable tbody tr td:first-child {
	padding-left: 16px;
}
.dataTable tr {
	vertical-align: top;
}

.btn-datatable-action {
	padding: 6px 16px !important;
	font-size: 1em !important;
	font-weight: 600 !important;
}

table.dataTable thead>tr>th.dt-orderable-asc span.dt-column-order:before,
table.dataTable thead>tr>th.dt-orderable-asc span.dt-column-order:after,
table.dataTable thead>tr>th.dt-orderable-desc span.dt-column-order:before,
table.dataTable thead>tr>th.dt-orderable-desc span.dt-column-order:after,
table.dataTable thead>tr>th.dt-ordering-asc span.dt-column-order:before,
table.dataTable thead>tr>th.dt-ordering-asc span.dt-column-order:after,
table.dataTable thead>tr>th.dt-ordering-desc span.dt-column-order:before,
table.dataTable thead>tr>th.dt-ordering-desc span.dt-column-order:after,
table.dataTable thead>tr>td.dt-orderable-asc span.dt-column-order:before,
table.dataTable thead>tr>td.dt-orderable-asc span.dt-column-order:after,
table.dataTable thead>tr>td.dt-orderable-desc span.dt-column-order:before,
table.dataTable thead>tr>td.dt-orderable-desc span.dt-column-order:after,
table.dataTable thead>tr>td.dt-ordering-asc span.dt-column-order:before,
table.dataTable thead>tr>td.dt-ordering-asc span.dt-column-order:after,
table.dataTable thead>tr>td.dt-ordering-desc span.dt-column-order:before,
table.dataTable thead>tr>td.dt-ordering-desc span.dt-column-order:after {
	opacity: .18;
}
table.dataTable thead>tr>th.dt-ordering-asc span.dt-column-order:before,
table.dataTable thead>tr>th.dt-ordering-desc span.dt-column-order:after,
table.dataTable thead>tr>td.dt-ordering-asc span.dt-column-order:before,
table.dataTable thead>tr>td.dt-ordering-desc span.dt-column-order:after {
	opacity: .6 !important;
}
table.dataTable thead>tr>th.dt-ordering-asc span.dt-column-order:before,
table.dataTable thead>tr>th.dt-ordering-desc span.dt-column-order:after,
table.dataTable thead>tr>td.dt-ordering-asc span.dt-column-order:before,
table.dataTable thead>tr>td.dt-ordering-desc span.dt-column-order:after {
	opacity: .6 !important;
}

table.dataTable thead > tr > th.dt-orderable-asc span.dt-column-order::before,
table.dataTable thead > tr > th.dt-ordering-asc span.dt-column-order::before,
table.dataTable thead > tr > td.dt-orderable-asc span.dt-column-order::before,
table.dataTable thead > tr > td.dt-ordering-asc span.dt-column-order::before {
	padding-bottom: 2px;
}
table.dataTable thead > tr > th.dt-orderable-desc span.dt-column-order::after,
table.dataTable thead > tr > th.dt-ordering-desc span.dt-column-order::after,
table.dataTable thead > tr > td.dt-orderable-desc span.dt-column-order::after,
table.dataTable thead > tr > td.dt-ordering-desc span.dt-column-order::after {
	padding-top: 2px;
}


@media screen and (min-width: 441px) and (max-width: 767px) {
	div.dt-container div.dt-layout-row:not(.dt-layout-table) {
		display: flex !important;
	}
	div.dt-container div.dt-layout-row:not(.dt-layout-table) div.dt-layout-cell,
	.dt-layout-start,
	.dt-layout-end {
		display: flex !important;
		text-align: start;
	}

	div.dt-container div.dt-layout-row:not(.dt-layout-table) div.dt-layout-cell>* {
		margin: .5em .5em .5em 0;
	}
}

/* ========================================================================
 * COMPONENTS - Assorted Plugins
 * ======================================================================== */
/*  --- SELECT2 ---  */
.select2-container--default .select2-selection--single {
	border-radius: var(--input-corner-radius) !important;
	border-color: #dddddd;
	padding-left: 4px;
}
.select2-container .select2-selection--single {
	height: 34px;
}
.select2-container--default .select2-selection--single .select2-selection__arrow {
	height: 34px !important;
}

/*  --- ION SLIDER ---  */
.irs-slider {
	border-radius: 14px;
}

/* --- BOOTSTRAP X-EDITABLE --- */
.editable-container.editable-inline {
	position: relative;
	z-index: 10;
}
.whiteBackgroundEditable .editableform {
	background-color: white;
}

.editable-input select.input-sm {
	max-width: 300px;
}

/* --- FLASH ALERTS --- */
.flash-container {
	padding: 18px 10px 18px 5px;
	border-radius: 16px;
}
.alert-danger {
	background-color: var(--color-brand-red);
	border-color: var(--color-brand-red);
	color: white;
	filter: saturate(0.8);
}
.alert-success {
	background-color: var(--color-brand-green);
	border-color: var(--color-brand-green);
	filter: brightness(1.2)saturate(0.7);
	color: #25520b;
}
.alert-warning .alert-icon {
	background-color: transparent;
}
.alert-warning .alert-icon .fi {
	color: var(--color-warning);
}
.alert-warning .alert-link, .alert-warning a {
	color: #a06d08;
}
.alert-success .alert-link, .alert-warning a {
	color: white;
}
.alert-success .alert-icon {
	background-color: transparent;
}
.alert-success .alert-icon .fi {
	color: #25520b;
}
.alert-dismissable .close, .alert-dismissible .close {
	right: 8px;
	color: #f3f3f3;
	opacity: .4;
}
.alert-warning.alert-dismissable .close, .alert-warning.alert-dismissible .close {
	color: #a06d08;
}
.alert-danger .alert-icon {
	background-color: transparent;
}
.alert-danger .alert-link, .alert-danger a {
	color: white !important;
	text-decoration: underline !important;
}
.alert-icon i {
	font-size: 24px;
}
.flash-text {
	font-size: 16px;
}
.modal-content {
	border-radius: var(--container-corner-radius);
}
.modal-footer {
	border-bottom-left-radius: var(--container-corner-radius);
	border-bottom-right-radius: var(--container-corner-radius);
}

/* ========================================================================
 * MISC
 * ======================================================================== */
.w100 {
	width: 100%;
}
.ta-l {
	text-align: left;
}
.ta-c {
	text-align: center;
}
.ta-r {
	text-align: right;
}
.va-t {
	vertical-align: top;
}
.noNudge {
	top: 0 !important;
}
.nudgeDown-1 {
	position: relative;
	top: 1px;
}
.nudgeDown-2 {
	position: relative;
	top: 3px;
}
.nudgeDown-2 {
	position: relative;
	top: 2px;
}
.nudgeUp-1 {
	position: relative;
	top: -1px;
}
.nudgeUp-2 {
	position: relative;
	top: -2px;
}

.pr-1 {
	padding-right: 1px;
}
.pr-2 {
	padding-right: 3px;
}
.pr-3 {
	padding-right: 5px;
}

.pt-3 {
	padding-top: 5px;
}
.pb-15r {
	padding-bottom: 1.5rem;
}

.man {
	margin: 0;
}
.pan {
	padding: 0;
}

.noData {
	font-style: italic;
	color: #999999;
}

@keyframes fadeIn {
	from { opacity: 0; }
	to { opacity: 1; }
}
.fade-in {
	animation: fadeIn 250ms ease-in;  /* Adjust duration and timing function as needed */
}

.inactive {
	display: none;
}

.flipX {
	transform: scaleX(-1);
}

.invert {
	filter: invert(1);
}
.font-italic {
	font-style: italic;
}

/* ========================================================================
 * CUSTOM, CROSS-PAGE COMPONENT STYLES
 * ======================================================================== */
.deletePDF {
	cursor: pointer;
}
.cloud_space_warning,
.cloud_space_warning .fi {
	font-weight: bold;
	color: var(--color-warning) !important;
}
.cloud_space_danger,
.cloud_space_danger .fi {
	font-weight: bold;
	color: var(--color-brand-red) !important;
}
.left-sidebar-footer.cloud_space_warning,
.left-sidebar-footer.cloud_space_warning .fi {
	font-weight: bold;
	background-color: #f5c518 !important;
	color: black !important;
}
.left-sidebar-footer.cloud_space_danger,
.left-sidebar-footer.cloud_space_danger .fi {
	font-weight: bold;
	background-color: var(--color-brand-red) !important;
	color: white !important;
}
select[name='inspectiondata_length'] {
	margin-right: 6px;
}

#page-content .copyright {
	float: right;
	color: #808080;
	padding: 2px 20px;
	background-color: white;
	margin-bottom: .5em;
}
#page-content.activation .copyright {
	background-color: transparent;
	color: #505050;
	padding: 2px 12px;
}

/* ========================================================================
 * PAGE-SPECIFIC STYLES -- THESE SHOULD BE MOVED AT SOME POINT
 * ======================================================================== */
.viewPicturesModal {
	width: 70vw;
	max-height: calc(100vh - 256px);
}

.viewPicturesModal .picSlide {
	max-height: calc(90vh - 356px);
	min-height: 50px;
	min-width: 50px;
	width: auto !important;
	margin-left: auto;
	margin-right: auto;

	-webkit-box-shadow: 0 1px 4px rgb(0 0 0 / 20%);
	-moz-box-shadow: 0 1px 4px rgba(0,0,0,.2);
	-o-box-shadow: 0 1px 4px rgba(0,0,0,.2);
	box-shadow: 0 1px 4px rgb(0 0 0 / 20%);
}
.viewPicturesModal .flex-control-thumbs {
	max-height: 17rem;
	overflow: scroll;
}
.viewPicturesModal .flex-control-thumbs li {
	height: 7rem;
	width: 7rem;
	margin-right: 6px;
	margin-bottom: 8px;
}
.viewPicturesModal .flex-control-thumbs img {
	height: 100%;
	width: 100%;
	object-fit: contain;
}

.viewPicturesModal .modal-content .modal-body .bootbox-body .flexslider {
	-webkit-box-shadow: none;
	-moz-box-shadow: none;
	box-shadow: none;
}

.inspectionFileName {
	max-width: 306px;
	overflow: hidden;
	text-overflow-ellipsis: auto;
	display: block;
	text-overflow: ellipsis;
}
.inspectionFileName.home {
	max-width: 54vw;
}

.tableEditableCell {
	position: relative;
	padding-left: 18px !important;
}
.tableEditableCell:hover,
.tableEditableCell:active,
.tableEditableCell:focus {
	cursor: pointer;
	color: var(--color-brand-blue);
	opacity: 1;
}

.tableEditableCell:hover .fi.inline,
.tableEditableCell:active .fi.inline,
.tableEditableCell:focus .fi.inline {
	opacity: 1;
	color: var(--color-brand-blue);
}

.statusNameSpan.bold {
	font-weight: bold;
}
#editInlineStatusSelect {
	z-index: 19;
	position: absolute;
	top: 4px;
	left: 1px;
}

/* safari specific fixes */
@supports (-webkit-hyphens: none) {
	@media screen and (-webkit-min-device-pixel-ratio:0) {
		#editInlineStatusSelect {
			top: 10px;
			left: -1px;
		}
	}
}