html, body {
	font-family: 'Roboto', sans-serif;
	font-size: 14px;
	font-weight: 400;
	/*line-height: 21px;*/
}

@media (min-width: 1200px) {
	html, body {
		font-size: 1.0em;
	}
}

body {
	background-color: #f8f8f8;
	color: #5f5f5f;
}

h1, h2, h3, h4, h5, h6, th, legend, .title, .title .select2-chosen {
	font-family: 'Open Sans', sans-serif;
	letter-spacing: -0.03em;
}

h4, h5, h6 {
	font-weight: 600;
}

/* -- action views ------------------------------------------------ */
.viewGroup {
	position: relative;
	background-color: white;
	z-index: 1000; /* modal backdrop is 1040 */
	height: 0;
	-webkit-overflow-scrolling:touch;
}

.viewGroup.in {
	height: auto;
}

.viewGroup .view {
	height: 0;
	opacity: 0;
	overflow: hidden;
	max-height: inherit;
	transition: opacity 0.2s ease-in-out;
}
.viewGroup .view.transitioning {
	height: auto;
	position: absolute;
	width: 100%;
	opacity: 0;
}
.viewGroup .view.active {
	height: auto;
	opacity: 1;
}

.viewGroup .modal-action-view .modal-dialog {
	margin-top: 150px;
}

@media (max-width: 767px) {
	.viewGroup .modal-action-view .modal-dialog {
		margin-top: 110px;
	}

	#Header .col-sm-1,
	#Header .col-sm-2,
	#Header .col-sm-3,
	#Header .col-sm-4,
	#Header .col-sm-5,
	#Header .col-sm-6,
	#Header .col-sm-7,
	#Header .col-sm-8,
	#Header .col-sm-9,
	#Header .col-sm-10,
	#Header .col-sm-11,
	#Header .col-sm-12,
	#Header .col-xs-1,
	#Header .col-xs-2,
	#Header .col-xs-3,
	#Header .col-xs-4,
	#Header .col-xs-5,
	#Header .col-xs-6,
	#Header .col-xs-7,
	#Header .col-xs-8,
	#Header .col-xs-9,
	#Header .col-xs-10,
	#Header .col-xs-11,
	#Header .col-xs-12 {
		padding: 0px;
	}
}

.viewGroup .modal-action-view,
.viewGroup .modal-action-view .view-content {
	color: black;
}

.viewGroup .view .view-content,
.viewGroup .view .close {
	display: none;
}

.viewGroup .modal-action-view .view-content,
.viewGroup .modal-action-view .modal-footer .view-actions,
.viewGroup .modal-full-action-view .modal-footer .view-actions {
	display: block !important;
	margin: 0;
	padding: 0;
	border: 0;
}

.viewGroup.full-height {
	position: fixed;
    width: 100%;
    top: 156px;
    z-index: 3;
    overflow: auto;
}

.viewGroup.full-height.in {
    bottom: 0;
}

.viewGroup.modal-active {
	z-index: 1050; /* modal backdrop is 1040 */
}
.viewGroup.modal-active:has(.child-frag-modal) {
	z-index: 1045; /* child frag modals need to have a smaller z-index so that condition modals show in front instead of behind */
}

.view-actions .btn {
	margin-left: 5px;
}

.view .view-actions {
	display: block;
	margin-top: 20px;
    padding: 20px 30px;
    border-top: 1px solid #dedede;
    background-color: white;
}

#ActionsViewGroup .view .view-actions {
	display: none;
}

#ActionsViewGroup .view .view-actions-minor {
	display: block;
}

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

.view .view-actions .btn-delete {
	float: left;
}
	
@media (max-width: 767px) {
	.view .view-actions .btn {
		display: block;
		width: 100%;
		margin-bottom: 10px;
	}
}

.view .view-actions .view-action-major {
	display: none; /* major actions are displayed in the #ActionsViewMenu */
}

.viewGroup .view.active .view-content {
	display: block;
	max-height: inherit;
	overflow: auto;
	color: black;
}

.viewGroup .modal-action-view.active .view-content {
	overflow: inherit;
}

.viewGroup .view-content form {
	min-height: auto;
	padding: 40px 0;
	/*overflow: hidden;*/ /* for row margins */
	overflow-x: hidden;
	overflow-y: auto;
}

.viewGroup .view-content form.add-attachment-form {
	min-height: 200px;
	padding: 40px 0;
	/*overflow: hidden;*/ /* for row margins */
	overflow-x: hidden;
	overflow-y: auto;
}

.menu-bar-left .viewGroup .view-content form {
	padding-right: 400px;
	padding-top: 40px;
	overflow: hidden;
	overflow-x: hidden;
	overflow-y: auto;
}

.viewGroup [data-view="Update"] .view-content form {
	padding-bottom: 20px;
}

.viewGroup .modal-action-view .view-content form {
	padding: 0;	
}

.viewGroup .view-content form.empty {
	padding: 0;
}

.viewGroup .view-instructions {
	padding: 15px;
	background-color: #2f2f2f;
	color: white;
}

.viewGroup .modal .view-instructions {
	padding: 0;
	background-color: inherit;
	color: inherit;
}

.viewGroup .scanner-view.active {
	height: 100%;
}
.scanner-view {
	background-color: #2f2f2f;
}
.scanner-viewport-container {
	width: 640px;
	margin: 80px auto;
}
.scanner-viewport {
	position: relative;
}
.scanner-viewport-container .select-camera {
	top: 80px;
}
.scanner-viewport canvas {
	position: absolute;
	top: 0;
	left: 0;
}

/* -- page elements ----------------------------------------------- */
a {
	font-weight: 700;
}
legend {
	font-size: 1.4em;
	font-weight: 700;
	border-bottom: 0;
}
/* Removed this because it was way too much space after a fieldset
fieldset {
	margin-bottom: 40px;
}
*/
fieldset legend{
	margin-bottom: 5px;/* this reduces the bottom margin from bootstrap.css' 20px */
}

/* -- detail views ------------------------------------------------ */
.details-tabbed #Details.detail-view {
	margin-top: 0px;
	padding-top: 15px;
}

.details-tabbed .child-fragment{
	margin: 15px 0px 50px;
}

#Details.detail-view {
	/* compensate for header affix */
	margin-top: -50px;
	padding-top: 70px;
}
.detail-view {
	padding-top: 40px;
	padding-bottom: 20px;
	background-color: #ffffff;
	box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.16), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
}
.field-view {
	overflow: auto; /*ensure content margins (headers) are respected*/ 
}

.field-view .keyword-value-colored,
.field-view .lookup-value-colored,
.field-view .yn-colored{
	margin: -3px 0 0;
}

/* -- edit views -------------------------------------------------- */
.edit, .edit-form {
	color: inherit;
}
.edit-form .form-field .btn {
	margin: 0;
}
.filter-form .form-group label,
.edit-form .form-group label {
	margin: 8px 0;
}

/* -- form elements ----------------------------------------------- */
.form-group label {
	overflow: visible;
	/*text-overflow: ellipsis;*/
	text-align: right;
}
.form-group-inline label {
	margin: 8px 4px 2px 0;
	display: block;
	text-align: left;
}
.form-group-inline span {
	display: inline-block;
	margin: 6px 0 2px;
	font-size: 12px;
}
@media (min-width: 768px) {
	.form-group-inline {
		display: inline-block;
		margin-bottom: 0;
		margin-right: 12px;
		vertical-align: top;
	}
}

.readability-light-background {
	color: #3e3e3e;
}
.readability-dark-background {
	color: #ffffff;
}

.lookup-value-colored,
.tag-value-colored,
.keyword-value-colored,
.yn-colored {
	display: inline-block;
	margin: 4px 4px 0 0;
	padding: 0 8px;
	color: #3e3e3e;
	font-size: 12px;
	white-space: nowrap;
	background-color: #d0d0d0;
	border-radius: 3px;
	line-height: 24px;
	
	max-width: 100%;
	vertical-align: baseline;
	text-overflow: ellipsis;
	overflow: hidden;
	
	position: relative; /* hover */
}

a.lookup-value-colored {
	box-shadow: 0 0 0 rgba(0,0,0,0.12), 0 0 0 rgba(0,0,0,0.24);
	transition: all 0.15s cubic-bezier(.25,.8,.25,1);
}
a.lookup-value-colored:hover,
a.lookup-value-colored:focus {
	cursor: pointer;
	color: #3e3e3e;
	text-decoration: none;
	box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
	z-index: 1;
}

.hidden-off-screen {
	margin-left: -9999px;
	position: fixed;
}

.readability-light-background .navbar-nav .dropdown.open > a {
    color: white !important;
}

/* Hover color for menu items when dropdown is not open */
.menu-bar-left #Header #HeaderBar .collapse-inner #NavigationMenu > li:not(.open) > a:hover,
.menu-bar-left #Header #HeaderBar .readability-dark-background #TopMenu .user-nav-group > li:not(.open) > a:hover,
.menu-bar-left #Header #HeaderBar .readability-light-background #TopMenu .user-nav-group > li:not(.open) > a:hover,
.menu-bar-left #Header #HeaderBar .readability-dark-background #TopMenu .extra-nav-group > li:not(.open) > a:hover,
.menu-bar-left #Header #HeaderBar .readability-light-background #TopMenu .extra-nav-group > li:not(.open) > a:hover {
    color: #337ab7 !important;
}

/* Hover styles for dropdown menu items in light and dark readability modes */
.menu-bar-left #Header #HeaderBar .readability-light-background #TopMenu .extra-nav-group > li .dropdown-menu > li > a:hover,
.menu-bar-left #Header #HeaderBar .readability-dark-background #TopMenu .extra-nav-group > li .dropdown-menu > li > a:hover,
.menu-bar-left #Header #HeaderBar .readability-light-background #TopMenu .user-nav-group > li .dropdown-menu > li > a:hover,
.menu-bar-left #Header #HeaderBar .readability-dark-background #TopMenu .user-nav-group > li .dropdown-menu > li > a:hover,
.menu-bar-left #Header #HeaderBar .readability-light-background .collapse-inner #NavigationMenu > li > ul > li > a:hover {
    color: white;
    background-color: #727272 !important;
}

.readability-light-background.keyword-value-colored,
.readability-light-background.tag-value-colored,
.readability-light-background.lookup-value-colored,
a.readability-light-background.lookup-value-colored:hover,
a.readability-light-background.lookup-value-colored:focus,
.menu-bar-left #Header #HeaderBar .readability-light-background a,
.readability-light-background .nav > li > form > input.search-query::placeholder {
	color: #3e3e3e;
}
.readability-dark-background.keyword-value-colored,
.readability-dark-background.tag-value-colored,
.readability-dark-background.lookup-value-colored,
a.readability-dark-background.lookup-value-colored:hover,
a.readability-dark-background.lookup-value-colored:focus,
.menu-bar-left #Header #HeaderBar .readability-dark-background a,
.readability-dark-background .nav > li > form > input.search-query::placeholder,
#Header #HeaderBar .readability-dark-background .form-search input#UniversalNameSearch {
	color: #fff;
}

@media (max-width: 767px) {
	.menu-bar-top #Header #HeaderBar .readability-dark-background #NavigationMenu a{
		color: #fff !important;
	}
	
	.menu-bar-top #Header #HeaderBar .readability-dark-background #SearchForm .search-query{
		border-bottom: 1px solid #fff;
	}
}

.menu-bar-left .readability-dark-background #SearchForm .search-query {
    border-bottom: 1px solid #fff;
}

.menu-bar-left .readability-light-background #SearchForm .search-query {
    border-bottom: 1px solid  #3e3e3e;
}

.keyword-value-color,
.lookup-value-color {
	display: inline-block;
	width: 20px;
	height: 20px;
	background-color: #d0d0d0;
	border-radius: 3px;
	vertical-align: middle;
	margin-right: 8px;
}

.lookup-value-title {
	font-weight: bold;
}
.lookup-value .association-option,
.lookup-value .lookup-value-detail {
	display: inline-block;
	margin-left: 8px;
}
.lookup-value .association-option:before,
.lookup-value .lookup-value-detail:before {
	content: "(";
}
.lookup-value .association-option:after,
.lookup-value .lookup-value-detail:after {
	content: ")";
}
.lookup-value-colored .association-option:before,
.lookup-value-colored .lookup-value-detail:before,
.lookup-value-colored .association-option:after,
.lookup-value-colored .lookup-value-detail:after {
	content: none;
}

.lookup-value-colored .association-option,
.lookup-value-colored .lookup-value-detail,
.select2-result-label .lookup-value-detail,
.select2-chosen .lookup-value-detail {
	display: inline-block;
	background-color: rgba(0,0,0,0.3);
	border-radius: 10px;
	padding: 0 8px;
	margin-left: 4px;
	font-size: 10px;
	font-weight: normal;
	line-height: 18px;
	vertical-align: middle;
	color: #fff;
	color: rgba(255,255,255,0.9);
	margin-top: -2px; /* trying to compensate for vertical align */
}

.lookup-value-overview {
	display: block;
	font-size: 0.8em;
	font-weight: normal;
	max-height: 4.0em;
	overflow: hidden;
	opacity: 0.8;
	margin-top: -10px;
}
.select2-result-label .lookup-value-detail {
	float: right;
	margin-top: 1px;
}

.select2-result-label .lookup-value-overview {
	margin-top: -2px;
}

.lookup-value-selection {
	overflow: hidden;
	text-overflow: ellipsis;
}

.bootstrapSkin .mceButton,
.bootstrapSkin .mceSplitButton a.mceAction,
.bootstrapSkin .mceSplitButton a.mceOpen {
	box-sizing: content-box;
}

.radio input[type="text"] {
	margin-top: -4px;
	height: 30px;
}

.allow-add-new,
.allow-scan {
	position: relative;
	white-space: nowrap;
	display: block;
	padding-right: 40px;
}
.allow-add-new .btn-new,
.allow-scan .btn-scan {
	position: absolute;
	height: 34px;
	padding: 6px 10px;
	top: 0;
	right: 0;
}
.allow-add-new .warning {
	position: absolute;
	top: 10px;
	right: 10px;
}

.checkbox {
	margin: 0;
	padding-top: 7px;
	padding-bottom: 7px;
}
.checkbox label,
.form-group .checkbox label {
	line-height: 20px;
	margin: 0;
}

.help-block {
	font-size: 0.8em;
}

.edit-form .form-group .file-input-btn-container .btn {
	margin: 0;
}
.file-input-btn {
    width: 0.1px;
    height: 0.1px;
    opacity: 0;
    overflow: hidden;
    position: absolute;
    z-index: -1;
}

.select2-container {
	height: auto;
	min-height: 34px;
	padding-bottom: 2px; /* compensate for chosen margin */
	 max-width: 100%;
}

/* -- dropdowns---------------------------------------------------- */

.menu-bar-top .dropdown-menu > li > a {
	padding: 6px 32px;
	font-size: 13px;
	font-weight: 400;
}
.dropdown-menu li .glyphicon {
	float: left;
	margin-top: 1px;
	margin-left: -20px;
}

/* -- sidebar ----------------------------------------------------- */

.sidebar-container {
	position: relative;
}

.sidebar {
    background-color: #2f2f2f;
    width: 100%;
    overflow-x: auto;
	overflow-y: auto;
}

.sidebar-content {
    overflow: auto;
    padding: 28px;
}

.sidebar .nav {
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 14px;
    font-weight: bold;
    white-space: nowrap;
}

.sidebar .nav li {
	display: inline-block;
}

.sidebar .nav li a {
    display: block;
   /* line-height: 20px;*/
   	line-height: 2.4em;
    font-size: 0.9em;
    letter-spacing: 1px;
    text-decoration: none;
    text-transform: uppercase;
    color: #999999;
}

.sidebar .nav li a:hover,
.sidebar .nav li a:focus {
	text-decoration: none;
	color: #ffffff;
	background: none;
}

.sidebar .nav li a:active,
.sidebar .nav li.active a {
    text-decoration: none;
    color: #ffffff;
    border-bottom: 3px solid #ffffff;
}

@media(min-width:768px) {
	.sidebar {
		position: absolute;
		/*padding-top: 45px;*/
		height: 100%;
		width: 250px;
	}
	.sidebar-content {
		position: absolute;
		height: 100%;
		left: 250px;
		right: 0;
	}
	.sidebar .nav li {
		text-indent: 20px;
		display: block;
		float: none;
	}
	.sidebar .nav li a:active,
	.sidebar .nav li.active a {
	    background: rgba(255,255,255,0.2);
	    border-bottom: 0;
	}
}

/* -- fields ------------------------------------------------------ */
.color-picker.pop {
	display: block;
	border: 1px solid #cccccc;
	background-color: #fff;
	padding: 2px;
	width: 34px;
	height: 34px;
	border-radius: 4px;
	box-sizing: border-box;
}
.color-picker.flat {
	display: block;
}
.color-picker .color {
	background-color: #dcdcdc;
	width: 28px;
	height: 28px;
	border-radius: 2px;
	outline: none;
}

.color-picker-container{
	display: block;
	padding-right: 65%;
	position: absolute;
}

.calendar-edit-color .color-picker-container{
	position: relative;
}

input.color-picker{
	width: 75px !important;
}

.cp-container .cp-swatch {
	width: 28px !important;
	height: 28px !important;
}
.color-box {
	display: inline-block;
	vertical-align: middle;
	width: 20px;
	height: 20px;
	border: 1px solid rgba(0,0,0,0.3);
	border-radius: 3px;
	box-shadow: inset 0 1px 2px rgba(0,0,0,0.2);
    box-sizing: border-box;
}

.location-view-map {
	width: auto;
	height: 250px;
	background-color: white;
	box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.16), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
}

.location-selector-map {
	width: auto;
	height: 300px;
	background-color: white;
	box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.16), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
}
.location-selector-container {
	position: relative;
}
.location-selector-container .control-coords {
	position: absolute;
	z-index: 1;
	left: 50%;
	top: 50%;
	width: 120px;
	margin-top: 10px;
	margin-left: -60px;
	background-color: #ffffff;
	border: 1px solid #999999;
	border-radius: 5px;
}
.location-selector-container .location-title {
	border-radius: 4px 4px 0 0;
}
.location-selector-container .control-coords .control-group {
	position: relative;
	margin: 0;
}
.location-selector-container .control-coords label {
	position: absolute;
	top: 6px;
	left: 8px;
	color: #424242;
	font-weight: bold;
	text-shadow: none;
	margin: 0;
}
.location-selector-container .control-coords input {
	height: 30px;
	width: 100%;
	margin: 0;
	padding-left: 40px;
	padding-right: 8px;
	text-align: right;
	border: 0;
	background: transparent;
	box-shadow: none;
}
.location-selector-container .control-longitude {
	border-top: 1px solid #d6d6d6;
}

.mapbox-legend {
	min-width: 100%;
}

.mapbox-legend label {
	display: inline;
	font-family: 'Roboto', sans-serif;
    font-size: 10px;
    font-weight: 400;
	color: #5f5f5f;
}

.mapbox-legend span {
	width:16px;
	margin-right: 5%;
	float: left;
	height: 15px;
}

.percent-field {
	position: relative;
}
.percent-field input {
	padding-right: 26px;
}
.percent-field span {
	position: absolute;
	top: 6px;
	right: 12px;
	font-size: 16px;
}

.subview-dropdown .subview .form-control {
	margin-top: 2px;
}

.dependent-field-message {
	display: inline-block;
	margin: 6px 0;
	font-style: italic;
	color: #b7b7b7;
}

/* -- CK editor --------------------------------------------------- */

/* Added 96px font option to ckeditor fontsize richcombo and thus it needed to be a little bigger.
This way was a quick fix; otherwise you have to rebuild the editor, or edit "all" the different flavors of css files in all the skins (which is bad).*/
.cke_combopanel__fontsize {
	width:150px !important;
}

.cke_dialog.cke_ltr {
	z-index: 1060 !important;
}

.cke_dialog,
.cke_dialog * {
	font-family: 'Roboto', sans-serif !important;
    font-weight: 400;
}
.cke_dialog .cke_dialog_title {
	background-color: white;
	font-family: 'Open Sans', sans-serif;
    letter-spacing: -0.03em;
    font-size: 24px;
    font-weight: normal;
    border-bottom: 1px solid #e5e5e5;
    padding: 15px;
    border-radius: 6px 6px 0 0;
}
.cke_dialog .cke_dialog_body {
	background-color: white;
	border: 0;
	border-radius: 6px;
	-webkit-box-shadow: 0 5px 15px rgba(0, 0, 0, .5);
    box-shadow: 0 5px 15px rgba(0, 0, 0, .5);
}
.cke_dialog .cke_dialog_contents {
	border-radius: 0 0 6px 6px;
}
.cke_dialog .cke_dialog_contents_body {
	padding: 17px 15px 5px;
}
.cke_dialog .cke_dialog_footer {
	background-color: white;
	border-radius: 0 0 6px 6px;
}
.cke_dialog .cke_dialog_footer_buttons {
	margin: 15px;
}
.cke_dialog .cke_dialog_body label {
	color: #757575;
    font-size: 12px;
    font-weight: bold;
}
.cke_dialog_background_cover {
    background-color: black !important;
}
.cke_dialog a.cke_dialog_ui_button,
.cke_dialog a.cke_dialog_ui_button:active,
.cke_dialog a.cke_dialog_ui_button:focus {
	color: #1e8adf;
    border: 2px solid #1e8adf;
	padding: 8px 16px;
	background-color: white;
}
.cke_dialog .cke_dialog_ui_button,
.cke_dialog .cke_dialog_ui_button span,
.cke_dialog .cke_dialog_footer_buttons .cke_dialog_ui_button span {
	font-weight: bold;
    font-size: 0.8rem;
    line-height: 1.42857143;
    text-transform: uppercase;
    padding: 0;
}

.cke_dialog .cke_dialog_contents_body .cke_dialog_ui_button {
	height: auto;
	line-height: 1.42857143;
	background-color: white;
}

.cke_dialog a.cke_dialog_ui_button_ok,
.cke_dialog a.cke_dialog_ui_button_ok:active,
.cke_dialog a.cke_dialog_ui_button_ok:focus {
	color: white;
	background-color: #1e8adf
}

.cke_dialog a.cke_dialog_ui_button:hover {
	color: white;
	background-color: #1e8adf;
	border: 2px solid #1e8adf;
}
 
.cke_dialog input.cke_dialog_ui_input_text, 
.cke_dialog textarea.cke_dialog_ui_input_textarea,
.cke_dialog select.cke_dialog_ui_input_select,
.cke_dialog .form-control {
	display: block;
    width: 100%;
    height: 34px;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.42857143;
    color: #555;
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
	-webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.cke_dialog .form-group {
	margin-bottom: 15px;
}
.cke_dialog .cke_dialog_contents_body .ImagePreviewBox {
	width: 100%;
	max-width: 580px;
	border-radius: 0;
	border: 1px solid #ccc;
}
.cke_dialog .image-preview {
	display: inline-block;
	border: 1px solid #ddd;
	border-radius: 4px;
	padding: 5px;
	vertical-align: middle;
	margin-right: 14px;
}
.cke_dialog .image-preview img {
	display: block;
}
.cke_dialog .cke_dialog_contents_body a.btn-browse-images,
.cke_dialog .cke_dialog_contents_body a.btn-browse-images:active,
.cke_dialog .cke_dialog_contents_body a.btn-browse-images:focus,
.cke_dialog .cke_dialog_contents_body a.btn-browse-images:hover {
	color: #ffffff;
    background-color: #4caf50;
    border: 2px solid #4caf50;
    box-shadow: 0 2px 2px 0 rgba(0,0,0,.14), 0 3px 1px -2px rgba(0,0,0,.2), 0 1px 5px 0 rgba(0,0,0,.12);
}
.cke_dialog a.btn-browse-images {
	float: right;
}

.cke_dialog .no-image {
	text-align: center;
}
.cke_dialog .no-image .btn-browse-images {
	display: inline-block;
	float: none;
	margin-bottom: 20px;
}
.cke_dialog .image-options {
	margin-top: 20px;
}
.cke_dialog .instructions {
	text-align: center;
	font-size: 14px;
	margin-bottom: 20px;
	display: none;
}
.cke_dialog .no-image .instructions {
	display: block;
	white-space: pre-wrap;
}
.cke_dialog .instructions b {
	font-size: 14px;
	font-weight: bold;
}

.cke_dialog a.cke_btn_locked,
.cke_dialog a.cke_btn_reset {
	margin-top: 6px;
}

.cke_notification {
	background-color: gray;
	border-radius: 4px;
    padding: 8px 20px 8px 8px;
    position: relative;
}
.cke_notification p {
	margin: 0;
}
.cke_notification .cke_notification_close {
	position: absolute;
    right: 8px;
    top: 8px;
    color: inherit;
}
.cke_notification_success {
	background-color: #97e882;
    color: #3d8c28;
}

/* -- modals ------------------------------------------------------ */
.modal-center {
	text-align: center;
}
.modal-center .modal-dialog {
	display: inline-block;
	text-align: left;
	vertical-align: middle;
}
@media screen and (min-width: 768px) { 
	.modal-center:before {
		display: inline-block;
		vertical-align: middle;
		content: " ";
		height: 100%;
	}
}

.modal-center.fade .modal-dialog {
    -webkit-transform: scale(0.9);
    -moz-transform: scale(0.9);
    -ms-transform: scale(0.9);
    transform: scale(0.9);
    opacity: 0;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    transition: all 0.3s ease;
}
.modal-center.fade.in .modal-dialog {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
    opacity: 1;
}
.modal-confirm.modal-sm .btn {
	width: 48%;
}
/* animation for angular strap */
.modal-backdrop.am-fade {
	opacity: .5;
	transition: opacity .15s linear;
}
.modal-backdrop.am-fade.ng-enter {
		opacity: 0;
}
.modal-backdrop.am-fade.ng-enter-active {
      opacity: .5;
}
.modal-backdrop.am-fade.ng-leave {
    opacity: .5;
}
.modal-backdrop.am-fade.ng-leave-active {
      opacity: 0;
}

/* Works with common.js to support "stacked" modals */
.modal-occluded {
	z-index: 1030; /* backdrop is 1040 */
}

.modal-header .close {
	margin: 7px 5px 5px 20px;
}
.modal-header .btn {
	float: right;
	padding: 6px 10px;
	margin-top: 2px;
}

/* -- popovers ---------------------------------------------------- */
.popover {
	border: 0;
	padding: 0;
	border-radius: 3px;
	box-shadow: 0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22), 0 0 8px rgba(0,0,0,0.18);
}

.popover-title {
	padding: 24px 14px 10px;
	background-color: transparent;
	font-weight: bold;
	border: 0;
}
.popover-title h2, .popover-title h3, .popover-title p {
	font-weight: bold;
}
.popover-title h2, .popover-title h3, .popover-title p {
	margin: 0;
}

.popover-actions {
	padding: 0 14px 14px;
	text-align: right;
}
/* -- spacing ----------------------------------------------------- */
.space-sm,
.space-top-sm {
	margin-top: 15px;
}
.space-md,
.space-top-md {
	margin-top: 30px;
}
.space-lg,
.space-top-lg {
	margin-top: 50px;
}

.space-sm,
.space-bottom-sm {
	margin-bottom: 15px;
}
.space-md,
.space-bottom-md {
	margin-bottom: 30px;
}
.space-lg,
.space-bottom-lg {
	margin-bottom: 50px;
}

/* -- misc -------------------------------------------------------- */
.icon {
	display: none;
}
.menu-bar-top #Content {
	padding-top: 106px;
}

.thumbnails {
    margin-left: 0;
    padding: 20px 16px 0 20px;
    list-style: none;
    *zoom: 1;
}
.thumbnails > li {
    float: left;
    margin-bottom: 8px;
    margin-right: 8px;
    min-height: 64px;
}
.thumbnails:before,
.thumbnails:after {
  display: table;
  content: "";
  line-height: 0;
}
.thumbnails:after {
  clear: both;
}
.thumbnails .thumbnail {
	margin-bottom: 0;
}
.modal-file-selector .btn-fileinput {
	padding: 14px 10px;
	height: 62px;
	text-shadow: none;
}
.modal-file-selector .btn-fileinput:hover {
	background-color: #6fbe6f;
	color: white;
}
.modal-file-selector .btn-fileinput .glyphicon,
.modal-image-selector .btn-fileinput .glyphicon {
	display: block;
	margin: 0 auto 4px;
	font-size: 16px;
}

.page-loading:after {
	content: '';
	position: fixed;
	display: block;
	border-radius: 50%;
	width: 6em;
	height: 6em;
	top: 50%;
	left: 50%;
	margin-top: -3em;
	margin-left: -3em;
	border-top: 0.6em solid rgba(0, 136, 204, 0.2);
	border-right: 0.6em solid rgba(0, 136, 204, 0.2);
	border-bottom: 0.6em solid rgba(0, 136, 204, 0.2);
	border-left: 0.6em solid #0088cc;
	-webkit-transform: translateZ(0);
	-ms-transform: translateZ(0);
	transform: translateZ(0);
	-webkit-animation: load8 1.1s infinite linear;
	animation: load8 1.1s infinite linear;
	z-index: 3;
}

.page-loading:before {
	content: '';
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	z-index: 2;
	background-color: rgba(255, 255, 255, 0.8);
}

.loadable {
	position: relative;
}
.loadable:after {
	content: '';
	position: absolute;
	display: block;
	border-radius: 50%;
	width: 6em;
	height: 6em;
	top: 50%;
	left: 50%;
	margin-top: -3em;
	margin-left: -3em;
	border-top: 0.6em solid rgba(0, 136, 204, 0.2);
	border-right: 0.6em solid rgba(0, 136, 204, 0.2);
	border-bottom: 0.6em solid rgba(0, 136, 204, 0.2);
	border-left: 0.6em solid #0088cc;
	-webkit-transform: translateZ(0);
	-ms-transform: translateZ(0);
	transform: translateZ(0);
	-webkit-animation: load8 1.1s infinite linear;
	animation: load8 1.1s infinite linear;
	z-index: 3;
	opacity: 0;
	pointer-events: none;
	transition: opacity 1.0s ease-in-out;
}
.loadable:before {
	content: '';
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	z-index: 2;
	background-color: rgba(255, 255, 255, 0.8);
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.4s ease-in-out;
}
.loadable.is-loading:before,
.loadable.is-loading:after {
	opacity: 1;
}

.page-notice {
	font-family: 'Open Sans', sans-serif;
	font-size: 2rem;
	text-align: center;
	line-height: normal;
	margin: 80px 10%;
}

.page-notice p {
	font-size: 1.2rem;
}

/* centered notices to the user for example "no results" */
.notice {
	color: #999999;
	text-align: center;
	font-size: 1.1rem;
	margin: 15px 0;
}

.no-scroll {
	position: fixed;
	overflow: hidden !important;
}

.no-transition {
	transition: none !important;
	-o-transition: all 0 ease-in !important;
	-moz-transition: none !important;
	-webkit-transition: none !important;
}

/* for use with the ErrorMessageElement */
.error-message {
	text-align: center;
}

.error-message .glyphicon {
	font-size: 1.4em;
	display: inline;
}
.error-message .glyphicon:after {
	content: "\a";
    white-space: pre;
}

.associationElement th,
.associationElement td {
	text-align: left !important;
}

/* -- print ------------------------------------------------------- */
@media print {
	* {
		-webkit-transition: none !important;
		transition: none !important;
	}
	html, body {
		font-size: 0.9em;
		background: transparent;
	}
	#Notifications {
		display: none;
	}
	#Content {
		padding-top: 0 !important;
	}
	#Details {
		margin: 0 !important;
	}

	/* Print media renders at xs resolutions. Reset #Details .col-sm-x to still layout as floated columns. */
	#Details .col-sm-1, #Details .col-sm-2, #Details .col-sm-3, #Details .col-sm-4, #Details .col-sm-5, #Details .col-sm-6, #Details .col-sm-7, #Details .col-sm-8, #Details .col-sm-9, #Details .col-sm-10, #Details .col-sm-11, #Details .col-sm-12 { 
		float: left;
		position: relative;
		min-height: 1px;
		padding-right: 15px;
		padding-left: 15px;
	}
	#Details .col-sm-12 { width: 100%; }
	#Details .col-sm-11 { width: 91.66666667%; }
	#Details .col-sm-10 { width: 83.33333333%; }
	#Details .col-sm-9 { width: 75%; }
	#Details .col-sm-8 { width: 66.66666667%; }
	#Details .col-sm-7 { width: 58.33333333%; }
	#Details .col-sm-6 { width: 50%; }
	#Details .col-sm-5 { width: 41.66666667%; }
	#Details .col-sm-4 { width: 33.33333333%; }
	#Details .col-sm-3 { width: 25%; }
	#Details .col-sm-2 { width: 16.66666667%; }
	#Details .col-sm-1 { width: 8.33333333%; }
	
	.fixed-table-body {
		overflow: visible;
	}
}

/* -- temporary hacks --------------------------------------------- */
.ui-autocomplete {
	/* remove once all ui-autocompletes (including universal search) 
	have been replaced */
	z-index: 9999 !important;
}
.form-actions {
	/* support some older pages admin_duplicate_merge */
	padding: 20px 0;
}

#AuditDetailsModal .modal-dialog {
    width: 50% !important;
    margin: 30px auto;
}
#IWAuditDetailsView input#myInput {
	width: 200px;
}

#IWAuditDetailsView #NewAuditDetail {
	margin-bottom: 20px;
	margin-top: 15px;
	
}

#NewAuditDetail tbody > tr > th, .table tfoot > tr > th {
    text-align: left !important;
}

#AuditDetailsModal h3#AuditDetailsHeader div {
	font-size: 22px;
    text-align: center;
}

/* 
this is a copy of the bootstrap form-control:focus styling... it was added 
here because the select boxes that are generated by select2 do not use the 
bootstrap form-control styling which is what makes bootstrap inputs glow on 
:focus, thus we're adding it here as a workaround.  This class is removed and 
applied to select2 inputs as users tab through the form 
*/
.glowing-input {
	border-color: #66afe9 !important;
  	outline: 0 !important;
  	-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, .6) !important;
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, .6) !important;
}

/* -- browser zoom issue fix for Report Add Form module/view dropdowns ------------------------------------ */
[data-title="Add Reports"] #DataSourceFields .prepopulated-dropdown{
	width: auto !important;
}

.modal-dialog {
    display: flex;
    align-items: center; 
    justify-content: center; 
    min-height: calc(100vh - 20rem);
}

.modal-content {
    width: 100%;
}

@media(max-width:950px) {
    .modal-content {
        width: 100%;
    }
}

/* Menu Bar Left Config */

.menu-bar-left #Header {
    box-shadow: unset;
}

.menu-bar-left #Header #Logo {
    padding: 10px;
}

/* Added padding to search bar icon */
/*.menu-bar-left #TopMenu .nav > li .lnr { 
    padding-top: 10px;
}*/

.menu-bar-left #HeaderBar {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh; 
    width: 240px; 
    z-index: 1030;
    box-shadow: unset !important;
}

.menu-bar-left #Content,
.menu-bar-left #SubHeader {
	margin-left: 240px;
}

.menu-bar-left #NavigationMenu > li > a {
    display: block;
    padding: 10px 20px !important;
}
 /* Padding for search bar line */
.menu-bar-left #SearchForm {
    padding: 0px 20px;
}

.menu-bar-left #SearchForm .search-query {
    width: 100% !important;
    height: 40px;
    font-size: 16px;
    border-bottom: 1px solid gray;
}


.menu-bar-left #NavigationMenu {
    display: flex;
    flex-direction: column;
    gap: 5px;
    width: 100%;
    height: calc(100vh - 190px);
    overflow-y: auto;
    overflow-x: hidden;
    position: relative;
}

.menu-bar-left .container-fluid {
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
}

.menu-bar-left .navbar-header {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.menu-bar-left #HeaderCollapse {
    flex-grow: 1;
    max-height: unset;
}

.menu-bar-left .collapse-inner {
    height: 100%;
    display: flex;
    flex-direction: column;
}

body:has(> .menu-bar-left) > #Footer {
	width: calc(100% - 240px);
    margin-left: 240px;
}

.menu-bar-left #Content .container {
	margin: unset;
	width: 100%;
	padding: 0;
}

.menu-bar-left #Content .container > .row {
	margin: unset;
}

.menu-bar-left #ActionsViewGroup form .row {
    margin-right: unset !important;
    margin-left: -15px !important;
}

/* This Media Query is if we ever want to make a smaller left menu bar with Icons */

/*@media(max-width:768px) {
    .menu-bar-left .sidebar {
        padding-top: 45px !important;
    }
    .menu-bar-left .visible-xs-inline {
        display: none !important;
    }

    .menu-bar-left .navbar-nav {
        float: left;
        margin: 0;
    }

    #TopMenu .nav > li {
        float: left;
    }

    .menu-bar-left #NavigationMenu > li > a {
        display: block;
        padding: 10px 20px !important;
    }
    
    .menu-bar-left .navbar-header > button {
        display: none;
    }
    
    .menu-bar-left #Header .navbar-brand {
        width: 100%;
        margin-top: 1rem;
        margin-left: 4rem;
    }
    
    .menu-bar-left #HeaderBar {
	    height: 100%; 
	}
}*/

.menu-bar-left #Header .nav > li.dropdown.open > .dropdown-menu {
	background-color: transparent;
    margin-top: 0;
    height: auto;
    visibility: visible;
}

.menu-bar-left #Header .nav > li.dropdown > .dropdown-menu {
    position: relative;
    box-shadow: none;
    border-radius: 0;
    margin-top: -20px;
    height: 0;
    overflow: hidden;
    visibility: hidden;
    transition: margin .15s ease-out;
    float: none;
}

.menu-bar-left #Header .nav > li > .dropdown-menu .icon {
    display: none;
}

.menu-bar-left #Header .nav > li .dropdown-menu > li > a {
    font-size: 14px;
    font-weight: 400;
    color: #545454;
}

.menu-bar-left #TopMenu ul.extra-nav-group {
    position: absolute;
    bottom: 0;
    left: 15px;
}

.menu-bar-left #Header #TopMenu ul.extra-nav-group > li > ul {
    height: 100%;
    min-height: fit-content;
    width: 240px !important;
    position: absolute;
    background-color: transparent;
    transform: translateY(-100%);
    right: unset;
    top: calc(-50% + 20px);
    left: -15px;
}

.menu-bar-left #TopMenu ul.user-nav-group {
    position: absolute;
    bottom: 0;
    right: 15px;
}

.menu-bar-left #Header #TopMenu ul.user-nav-group > li > ul {
    height: 100%;
    min-height: fit-content;
    width: 240px !important;
    position: absolute;
    background-color: transparent;
    transform: translateY(-100%);
    top: calc(-50% + 20px);
    right: -15px;
}

.menu-bar-left #TopMenu ul[class*="-nav-group"] > li.dropdown {
    position: unset !important;
}

.menu-bar-left #Header .nav > li.dropdown.open > .dropdown-toggle::after {
    bottom: unset;
    top: -7px;
}

.menu-bar-left #TopMenu ul > li> ul > li > a {
    padding: 6px 55px;
    font-size: 14px;
    font-weight: 400;
}

.menu-bar-left #NavigationMenu > li > ul > li > a {
    padding-right: unset !important;
    font-size: 14px;
}

 .menu-bar-left #NavigationMenu > li > a {
    font-size: 14px;
}

.menu-bar-left #SearchForm .search-query {
    cursor: auto;
}

.menu-bar-left #NavigationMenu li.dropdown .dropdown-menu {
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: opacity 0.3s ease-out, transform 0.3s ease-out;
    pointer-events: none;
}

.menu-bar-left #NavigationMenu li.dropdown.open .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
}

.menu-bar-left #NavigationMenu li.dropdown .dropdown-menu {
    display: block !important; 
}

.menu-bar-left #PageContent .title {
    padding: 0px 15px;
}

.menu-bar-left #PageSelectorContainer .select2-container .select2-choice .select2-arrow {
    right: -5px;
}

.menu-bar-left #TopMenu > .search-nav-group > li.divider {
    display: none;
}

.questionnaire .row {
    margin-right: -5px;
    margin-left: -5px;
}

/* Scroll bar for left menu */
.menu-bar-left #NavigationMenu::-webkit-scrollbar {
    width: 8px; 
}

.menu-bar-left #NavigationMenu::-webkit-scrollbar-thumb {
    background-color: #888;
    border-radius: 5px;
}

.menu-bar-left #NavigationMenu::-webkit-scrollbar-thumb:hover {
    background-color: #555;
}

.menu-bar-left #NavigationMenu::-webkit-scrollbar-track {
    background: rgba(241,241,241,0);
}

.menu-bar-left .dropdown-menu > li > a {
    padding: 6px 30px;
    font-size: 13px;
    font-weight: 400;
}

.menu-bar-left #NavigationMenu .dropdown-menu > li > a {
    padding: 6px 18px;
    font-size: 13px;
    font-weight: 400;
}

.menu-bar-left .nav > li > a:hover, .nav > li > a:focus {
    text-decoration: none;
    background-color: #545454;
}

.menu-bar-left .child-fragment .display {
    padding: 0px 10px;
}

/* Add border to menu bar */
@media (max-height: 1000px) {
    .menu-bar-left #NavigationMenu {
        border-bottom: 1px solid gray;
        width: 90%; 
        margin: 0 auto; 
    }
}

/* Fix duplicate menu line. Issue was caused by ORD/SORT chevron */
.menu-bar-left .fixed-table-container thead th .th-inner {
    padding: 8px 4px !important;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
}

/* fix color picker on field grids */
#FieldGridList .color-picker-container {
    position: relative;
}

/* fix color picker on manager edit screens */
/* UPDATE this has caused issues with color picker being added in other places so we removed it and just let container have scroll over flow */
/*.viewGroup .view-content form .color-picker-container:not(.form-field .color-picker-container, .calendar-edit-color .color-picker-container) {
    position: fixed !important;
    top: auto !important;
    left: auto !important;
    z-index: 9999 !important;
}*/

/* Fix MapBox z-index issue with modal workfows */
mapbox-search-listbox div div {
    z-index: 10000 !important;
}

/* Dashboard filters input fix */
#Filters .select2-container {
    display: flex;
    width: unset !important;
    min-width: fit-content;
}

#Filters .form-group-inline span {
    display:  unset !important;
    margin:  unset !important;
    font-size: unset !important;
}

#Filters .date-picker input.date-picker-input {
    width: unset !important;
    display: flex;
}