/*
Secapp brand guidelines: https://drive.google.com/drive/folders/1CzXzjXaBWoO1Rg5TuE4zEteX5KetOmtB

Brand colours used in this file:
- #0052cc (main colour: blue)
    * #003380 (additional shade)
- #ff991f (main colour: orange)
- #ffffff/white (main colour: white)
- (additional colour: neutral)
    * #172b4d (additional shade)
    * #b3bac5 (additional shade)
    * #ebecf0 (additional shade)

Non-brand colours used in this file (missing some legacy colours):
- #f7faff (Secapp website background colour for some of the darker surfaces)
- #6e7172 (Inspiritas muted gray with increased contrast for light backgrounds)
*/
@font-face {
    font-family: 'Noto Sans Symbols 2';
    src: url('fonts/NotoSansSymbols2-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    unicode-range: U+1F6C7, U+1F872, U+1F875, U+1F876;
}

body {
    background-color: white;
    background-image: none;
}

body,
input,
button,
select,
textarea {
    font-family: "Lucida Grande", "Helvetica Neue", Helvetica, Arial, sans-serif, "Noto Sans Symbols 2"
}

select:focus,
input[type="file"]:focus,
input[type="radio"]:focus,
input[type="checkbox"]:focus {
    outline: 2px solid #333;
    outline: 5px auto -webkit-focus-ring-color;
    outline-offset: -2px;
}

.btn:focus {
    outline: 2px solid #333;
    outline: 5px auto -webkit-focus-ring-color;
    outline-offset: -2px;
}

a {
    color: #0052cc;
}

a:focus {
    outline: 2px solid #333;
    outline: 5px auto -webkit-focus-ring-color;
    outline-offset: -2px;
}

a:hover {
    color: #003380;
}

.printOnly {
    display: none;
}

.onlyVerticalResize {
    resize: vertical;
}

.login {
	margin-top: 10%;
}

.loginWell {
    background-color: white;
    border-color: #b3bac5;
}

.loginWell .brand {
    margin-bottom: 10px;
}

.loginWell .brand img {
    max-height: none;
}

.loginWell .brand span {
    /* font size = (login view logo height / top bar logo height) * top bar font size */
    font-size: 19.5px;
}

#loginButton {
    background-image: none;
    background-color: #0052cc;
}

.maintenanceWell {
    background-color: white;
    border-color: #b3bac5;
}

.maintenanceWell .brand {
    display: inline;
    margin-bottom: 10px;
}

.maintenanceWell .brand img {
    max-height: none;
}

.maintenanceWell .brand span {
    /* font size = (maintenance view logo height / top bar logo height) * top bar font size */
    font-size: 32.5px;
}

.brand img {
    max-height: 30px;
}

.brand img.logo {
  width: 25%;
  height: 25%;
}

.brand span {
    color: #172b4d;
    font-family: "Lucida Grande", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 16px;
    font-weight: bold;
    margin-left: 1em;
    text-shadow: none;
    vertical-align: middle;
}

.auth img {
	width: 40px;
	height: 40px;
	margin-top: 3px ;
}

.container {
	width: 90% !important;
}

#wrapper {
    background-color: white;
}

body > #wrapper > .container {
    background-color: #f7faff;
    background-image: none;
    border-color: #b3bac5;
    border-style: solid;
    border-width: 1px;
}

.affix {
	width: 20.7%; /* This is eye-balled to fit navigation buttons inside navigation container */
	top: 0px;
}

.upperControls.affix {
	top: 20px;
	left: 70%;
	z-index: 5;
}

.user-select-container-sizer {
	min-height: 185px !important;
}

.detail-field {
    font-size: 13px;
	background-color: rgb(238, 238, 238);
}

.zero-margin-left {
	margin-left: 0px !important;
}

.detailFieldsContainer input:read-only {
	cursor: text !important;
}

.detailFieldsContainer input:-moz-read-only {
	cursor: text !important;
}

.force-cursor:read-only {
    cursor: text !important;
}

.force-cursor:-moz-read-only {
    cursor: text !important;
}

.detail-field p {
    white-space: normal;
    margin-left: 6px;
    margin-bottom: 1px;
    margin-top: 4px;
}

.detail-field.detailValue .text-input-multi-row {
    white-space: pre-line;
    max-height: 300px;
    overflow-y: auto;
}

textarea.detailValue.text-multi-row {
    max-height: 300px;
}

.size-allower {
    font-size: 13px;
}

.no-margin {
	margin-left: 0px !important;
}

.no-margin-bottom {
	margin-bottom: 0px !important;
}

.bigger {
	font-size: 110%;
}

.avatar {
	content: url('images/avatar.jpg');
}

.navNotification {
	margin-top: 6px;
	margin-right: 6px;
}

.container aside nav {
	border: none;
	margin-top: 10px !important;
}

.container aside nav ul li {
    background-color: #f7faff;
    border-top-width: 1px;
    border-left: none;
    border-right: none;
    border-bottom-width: 0;
    border-color: #b3bac5;
}

.container aside nav ul li:last-child {
    border-bottom-width: 1px;
}

.container aside nav ul li a:hover {
    background-color: #ff991f !important; /* Base color is marked as important. */
    color: #172b4d;
}

.container aside nav ul li.selected,
.container aside nav ul li.selected:hover {
    background-image: none;
    background-color: #0052cc;
    border-color: #b3bac5;
}

.container aside nav ul li.selected:not(:last-child),
.container aside nav ul li.selected:hover:not(:last-child) {
    border-bottom-width: 0;
}

.container aside nav ul li a {
    color: #172b4d;
    text-shadow: none;
}

.container aside nav ul li.selected a {
    color: white;
}

.container aside nav ul li i {
	margin-right: 5px;
	margin-left: 5px;
}
.container .toggledSidebar aside nav ul li a {
	padding-left: 0;
	padding-right: 0;
	position: relative;
}

.toggle-sidebar {
	margin: 10px 10px 0px 13px;
	display: inline-block;
	color: #0052cc;
}

.packageStatusIndicator {
	text-overflow: ellipsis;
	overflow: hidden;
	width: 100%;
	list-style: none;
}

.package-status-indicator-list {
	margin-left: 0px !important;
	padding-left: 0px !important;
}

.packageCollections {
	min-height: 50vh;
}

.packageCollections.dashed-border {
	border: 1px dashed gray;
}

.packageCollections.dashed-border .sortableCollection:last-child:after {
	height: 30px;
	content: "\00a0";
}

.horizontal {
	display: inline;
	margin-right: 3px;
}

.packagecollection-name {
	white-space: initial;
}

.packagecollectionContainer {
	padding: 8px !important;
	margin-bottom: 5px !important;
	cursor: -webkit-grab;
	cursor: -moz-grab;
	cursor: grab;
}

.packageContainer {
	margin-top: 7px;
}

.status-labeler {
	min-width: 11px;
}

.collapser:hover {
	cursor: pointer;
}

.buttonify:hover {
	cursor: pointer;
}

table.deletable i.fa-times-circle {
	cursor: pointer;
}

div.orderBillableHeader i.fa-times-circle {
	cursor: pointer;
}

.toggle-sidebar:hover {
	color: #003380;
}

tr.active-row td {
	background-color: #D3D3D3 !important;
}

.negate-margin {
	margin-left: 0px !important;
	margin-top: 5px !important;
}

.negate-padding {
	padding-left: 0px !important;
}

.vertical-trim {
	margin-top: 45px;
}

.header-inline-left {
	margin-right: 3px;
	display: inline;
}

.header-inline-right {
	margin-left: 3px;
	display: inline;
}

.behind {
	position: relative;
	z-index: 0;
}

.infront {
	position: relative;
	z-index: 1;
}

#content .condensed-text {
	color: black;
	font-size: 11px;
    line-height: 19px;
}

.side-by-side {
	float: left;
	margin-right: 6px;
}

.input-append.dateTime, .input-append.date {
	cursor: pointer !important;
}

tr.sum-row td {
	border-top: 1px solid black;
}

.pie-legend, .bar-legend {
  list-style: none;
}

pie-legend li {
	padding-left: 0px;
	line-height: 20px;
}

.pie-legend li span {
	float: left;
    width: 18px;
    height: 18px;
    border-radius: 5px;
    margin-right: 2px;
}
/*
 * .bar-legend is used by Chart.js's bar chart's legend (currently only used in
 * project statistics.
 * .bar-legend > li is a single legend item's full container, and
 * .bar-legend > li > span is the colored "emblem box" for the item.
 * Rest of the styling is done inline by chart.js.
 */
.bar-legend > li {
	display: inline-block;
	padding-right: 2em;
}

.bar-legend > li > span {
	display: inline-block;
    width: 18px;
    height: 18px;
    border-radius: 5px;
    margin-right: 2px;
	vertical-align: -20%;
}

.top-padding-small {
	padding-top: 4px;
}

.top-padding-medium {
	padding-top: 9px;
}

.align-right,
.table th.align-right,
.table td.align-right {
	text-align: right;
}

.bottom-padding-big {
	padding-bottom: 36px !important;
}

.margin-bottom {
	margin-bottom: 8px;
}

.navbar .navbar-inner {
    background-image: none;
    background-color: white;
    border-color: #b3bac5;
}

.navbar-inner {
	padding-left: 0;
}

.navbar .btn-navbar {
	background-image: none;
	background-color: white;
	border-color: #b3bac5;
}

.navbar .btn-navbar:hover {
	background-color: white;
}

.navbar .btn-navbar .icon-bar {
	background-color: #172b4d;
}

.navbar .auth {
	line-height: 17px !important;
	min-width: 250px;
}

.navbar .auth span.name {
	color: #172b4d;
	text-shadow: none;
}

.navbar .auth .companyName {
	display: inline-block;
	width: 14em;
	text-align: left;
	overflow: hidden;
	text-overflow: ellipsis;
}

.navbar .auth #NavbarCompanyDropdown {
	margin-left: 10px;
	margin-top: 5px;
}

.navbar .auth #NavbarCompanyDropdown > button {
	line-height: 1.3;
}

.navbar .auth #NavbarCompanyDropdown a {
	color: #172b4d;
}

.navbar .auth #NavbarCompanyDropdown a:hover {
	background-image: none;
	background-color: #0052cc;
	color: white;
}

.navbar .auth #NavbarCompanyDropdown li {
	max-width: 20em;
	overflow: hidden;
}


th.fixed-col-length {
	width: 10%;
}

.long-text-control {
	word-break: break-all;
}

.floater-area {
	position: fixed;
	left: 50%;
	top: 12%;
}

#content {
	border-color: #b3bac5;
	border-width: 0;
	border-left-width: 1px;
	min-height: 500px;
}

#content header {
    background-image: none;
    background-color: white;
    border: none;
}

#content header h1,
#content header h2 {
	color: #172b4d;
	text-shadow: none;
}

.pie-content-container {
	max-height: 190px;
}

.red-cluster-marker {
	line-height: 30px;
    color: #000;
    background-color: red;
    width: 30px !important;
    height: 30px !important;
    text-align: center;
    border: #aaa 3px solid;
    opacity: 0.7 !important;
    -webkit-border-radius: 13px;
    border-radius: 15px;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
}

.yellow-cluster-marker {
	line-height: 30px;
    color: #000;
    background-color: yellow;
    width: 30px !important;
    height: 30px !important;
    text-align: center;
    border: #aaa 3px solid;
    opacity: 0.6 !important;
    -webkit-border-radius: 13px;
    border-radius: 15px;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
}

.green-cluster-marker {
	line-height: 30px;
    color: #000;
    background-color: green;
    width: 30px !important;
    height: 30px !important;
    text-align: center;
    border: #aaa 3px solid;
    opacity: 0.6 !important;
    -webkit-border-radius: 13px;
    border-radius: 15px;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
}

.headerEditBtn {
	height: 25px;
	line-height: 20px !important;
	margin-top: 9px;
	margin-right: 10px !important;
}

.headerEdit {
	width: 100%;
	margin: 0 auto;
	background-color: white;
	border: none;
}

.headerEdit select{
	height: 25px;
	font-size: 11px;
}

header .searchInput {
	margin: 8px 30px 0 0 !important;
	line-height: normal !important;
}

.input-append .searchInput {
    width: 150px;
}

.headerEdit input{
	min-height: 22px !important;
	font-size: 11px;
	width: 125px;
	padding: 0 0 0 3px;
	/*margin-right: 30px !important;*/
}

.acceptance-comment-column i.fa-check-circle-o {
	color: green;
}

.acceptance-comment-column i.fa-exclamation-circle {
	color: red;
}
.statusHistoryEvent i.fa-exclamation-circle {
	color: red;
}

.sitesPerPage {
    margin: 5px !important;
    margin-right: 5px !important;
    width: 145px !important;
}

.siteListAnchor {
	width: 100%;
	height: 100%;
	display: block;
	text-decoration: none;
	margin-left: 4px;
}

.siteListAnchor:hover {
	text-decoration: none;
}

.searchBtn i {
	margin: 0 !important;
}

.td-hover:hover {
	background-color: #a3a3a3 !important;
}

.margin-small {
    padding-left: 5px;
}

.dropdown-submenu.pull-left .dropdown-menu {
	min-width: 180px;
}

.selectContainer label small {
	vertical-align: middle;
	color: #000 !important;
	margin-bottom: 3px;
	margin-right: -3px;
}

header.row-fluid {
	padding: 0 0 0 30px !important
}

.faded {
	opacity: 0.8;
}

.headerEdit .btn-toolbar {
	margin: 0;
}

.headerEdit .btn-group:first-child {
	margin-left: 30px;
}

.headerEdit .row-fluid {
	padding: 0 !important;
}

.selectedItem td {
    background: rgba(249, 96, 28, 0.29) !important;
}

.selectContainer {
	display: inline-block;
}

select {
	width: 150px;
}

label.nextToSelect {
    padding-bottom: 4px;
    padding-top: 4px;
}

label.nextToSelect > input[type="checkbox"] {
    margin-top: 0px;
}

label.nextToSelect > input[type="checkbox"] span {
    vertical-align: middle;
}

thead tr th label {
	height: 25px;
}

thead select {
	width: 100%;
	margin: 0;
}

.selectCheckbox {
	cursor: default !important;
}

div[draggable="true"] {
	cursor: move !important;
}

.itemRow,
.responsiveListContainer tr.extra-row,
.responsiveListContainer tr.total-row,
.pagination li:not(.active) {
	cursor: pointer !important;
}

.openColumn {
	width: 63px;
}

.breadcrumb {
	background-color: white;
	margin: 0;
}

h3 {
	margin: 0;
}

.infoBox h6 {
	display: inline;
}

#kpisInside img{
	width: 100%;
}

#firewallCarousel {
	margin-top: 20px;
}

.carousel-control {
	top: 45%;
}

.item {
  width: 100%;
  text-align: center;
}

.header .btn {
	margin: 6px 15px;
}
/*
header i {
	float: right;
	margin-top: 10px !important;
	margin-left: 5px !important;
	margin-right: 10px !important;
}
*/
.icon-caret-down {
	color: #141414;
}

.item .btn-group {
	display: inline-block;
}

.packageBtn {
    height: 140px;
    width: 195px;
    text-align: center;
    float: left;
}

.packageBtn h6 {
	vertical-align: top;
	margin: 0;
}

.packageBtnInside {
	position:relative;
	width: 100%;
	height: 100%;
}

.packageBtnInside i {
    display: block;
    margin-top: 25px;
}

.jobComplete {
  	position:absolute;
  	bottom:0;
  	left:0;
	width: 100%;
}

.packageBtn .progress {
    margin: 0 10px;
}

.siteContent .top {
    margin-right: 20px;
    position: relative;
}

.siteContent .top .actionControls {
    position: absolute;
    right: 0;
    top: 12px;
}

.siteContent .top .actionControls > * {
    display: block;
    margin-bottom: 0.5em;
}

.siteEditor {
	margin-top: 10px;
	padding-top: 0 !important;
}

.siteEditInfo h4{
	margin-top: 0;
}

.siteEditInfo {
	padding: 0 !important;
}

#siteDetailsInside {
	overflow: visible;
}

.detailControls {
	margin-right: 5px;
}

.editDetail tr:last-child {
	border-bottom: none;
}

.detailValueField .input {
	margin: 0;
}

textarea.detailValue {
    margin: 0 !important;
}

input.selectedTags {
	margin: 0 !important;
}

.detailValue.multiSelect {
	overflow-y: auto;
	max-height: 25vh;
	padding-top: 10px;
}

.detailValue p {
	word-break: break-word;
	overflow-wrap: break-word;
	word-wrap: break-word;
}

.multiSelect input[type="checkbox"] {
    margin-left: 50px;
    margin-right: 1em;
    width: auto;
    vertical-align: middle;
}

.multiSelect .row:hover {
    background-color: rgb(200,200,200);
}

.multiSelect .row.selected {
    background-color: rgb(20,60,80);
    color: white;
}

.multiSelect .row.selected:hover {
    background-color: rgb(60,100,120);
}

summary::-webkit-details-marker {
    float: right;
    margin-top: 5px;
}


/* Summary for all browsers */
summary{
    cursor:pointer;
    background-color: #dddddd;
    padding: 3px 0 0 5px;
    margin-bottom: 10px;
}

details > summary > h4 {
    display: inline;
}

/* Summary fixes for IE10 and IE11 */
@media (-ms-high-contrast: none), (-ms-high-contrast: active) {
    summary{
        display: block;
    }

    details > summary > h4 {
        display: inherit;
    }
}

.priceListContent summary h4 {
    margin-top: 6px;
}

.activeUsers {
	margin: 0 !important;
}

.editDetail {
	margin: 0;
	display: table;
	table-layout: fixed;
}

.editDetail .row-fluid {
	padding: 5px 0 !important;
}

.editDetail .table {
	margin: 0;
}

.editDetail input{
	margin: 0;
}

.editDetail select{
	margin: 0;
}

.editDetail h6 {
	margin: 5px 0 0 0;
}

.editDetail input.inputComplete.span11.detailValue {
	width: 100% !important;
}

.smallItem {
	min-height: 250px;
}

#companyMap {
	min-height: 300px;
}

#siteMap {
	min-height: 200px;
}

.map {
	border: 1px solid #b8c1c7;
	text-align: center;
}

.smallMapWrapper {
	min-height: 250px !important;
}

.mapWrapper {
	min-height: 300px;
}

.bigMapWrapper {
	min-height: 600px !important;
}

.addMinHeight {
	min-height: 437px !important;
}

.calendarBorder {
	padding-left: 1%;
	padding-bottom: 3px;
	border: 1px solid #b8c1c7;
}

.calendarInput {
	width: 95%;
}

.smallCalendarInput {
	width: 90%;
}

.red {
	background-color: red;
}

.blue {
	background-color: blue;
}

.green {
	background-color: green;
}

.red-status {
	background: rgba(254, 10, 10, 0.25) !important;
}

.yellow-status {
	background: rgba(254, 254, 10, 0.2) !important;
}

.green-status {
	background: rgba(10, 254, 10, 0.2) !important;
}

.calendarLegend {
	margin: 3px;
	padding: 3px;
	text-align: center;
	width: auto;

}

.borders {
	border: 1px solid #b8c1c7;
}

legend {
	height: 35px;
	background: #eee;
	font-size: 11.049999999999999px;
	font-family: "Museo Slab",Georgia,"Times New Roman",Times,serif;
	font-weight: bold;
	color: #141414;
	text-rendering: optimizelegibility;
}

legend span {
	margin-left: 10px;
}

.uBorder {
	border: 1px solid #b8c1c7;
	border-top: none;
}

.imageUpload {
	border: 1px solid #e5e5e5;
}
.imageUpload input{
	width: 100%;
	line-height: 20px;
}

/* .hidden gets overridden in some cases so we need a more specific rule. */
input[type="file"].hidden {
    display: none;
}

#content-wrap {
	margin-left: 0;
	width: 77%;
	float: right;
}

.sidebarContainer {
	width: 23%;
	float: left;
}

.sideBarContentWrapper {
	background-color: #f7faff;
}

.toggledContent {
	margin-left: 0 !important;
	width: 95.9653511% !important;
	float: right !important;
}

.toggledSidebar {
	width: 49px !important;
}

.toggledBadge {
	/*width: 5px;*/
	height: 12px;
	position: absolute;
	bottom: 3px;
	left: 50%;
}

.hidden-long-text {
	display: inherit !important;
}
.visible-long-text {
	display: none !important;
}

.btnWrap .btn-group {
	margin-left: 0;
	width: 100%;
}
.btnWrap .btn-group >.btn:first-child {
	width: 100%;
}

div.input-append div.span11 table.table tbody tr td.fileCell {
	word-break: break-all; /* This is ok, since it should break only links that aren't broke into words */
	overflow-wrap: break-word;
	word-break: break-word;
}

/* Dialog buttons on modal header now look alike buttons in modal footer */
.modal-header .btn+.btn {
	margin-left: 5px;
	margin-bottom: 0;
}

/* Dialog buttons on modal header now look alike buttons in modal footer */
.modal-header .btn-group .btn+.btn {
	margin-left: -1px;
}

.btn-toolbar>.btn-group {
	white-space: normal;
}

@media (max-width: 767px) {
	body {
		padding: 0;
	}

	.bootstrap-datetimepicker-widget.dropdown-menu.pull-right {
		left: 0px !important; /*Used addon overflows left on small screens. Let´s avoid that*/
	}

	body > #wrapper > .container {
		margin-top: 20px;
	}

	#content-wrap {
		width: 100%;
	}

	.sidebarContainer {
		width: 100%;
	}

	.affix {
		position: relative;
		width: 100%;
		top: 0;
	}

	.toggledSidebar {
		width: 100% !important;
	}

	.sidebarContainer.toggledSidebar .nav {
		display: flex;
		flex-direction: row;
		flex: 1 0 auto;
		margin-bottom: 0;
	}
	.sidebarContainer.toggledSidebar .nav > * {
		flex: 1 0 auto;
	}

	.toggledContent {
		margin-left: 0 !important;
		width: 100% !important;
	}

	.limited-width-small-screen .btn-group {
		white-space: normal;
		width: 80%;
	}

	.limited-width-small-screen .btn-group > button.btn-large {
		width: 40%;
	}

	.detailValue, .detailTimeValue {
		width: 91.43646408839778%; /*Pre-calculated value from inspiritas for all other screen widths*/
		float: left !important;
		max-width: 88% !important;
	}
	.input-append {
		max-width: 88%;
	}

	.btnWrap .btn-group {
		margin-left: 0;
		width: 85% !important;
	}

	.btnWrap .btn-group >.btn:first-child {
		width: 85% !important;
	}

	.detailRow .input-append .span4+.span8 {
		display: block;
	}

	.editDetail table tbody tr td a.fileName {
		word-break: break-word;
		white-space: normal;
	}
}

@media (max-width: 500px){
	.detailRow {
		width: 100%;
	}

	.input-append {
		white-space: normal;
		max-width: 100%;
	}

	.limited-width-small-screen {
		margin-bottom: 20px;
	}

	.limited-width-small-screen.span11 {
		margin-bottom: 5px;
	}

	.limited-width-small-screen.dateContainer {
		margin-bottom: initial;
	}

	.detailValue,
	.detailValue.span11 {
		margin-bottom: 5px;
	}
}

@media (min-width: 768px) and (max-width: 978px) {
	.big-modal {
		max-height: 1000px;
		/*height: 80%;*/
		top: 40%;
		width: 90%;
		margin-left: -45%;
	}
	.medium-modal {
		width: 90%;
		margin-left: -45%;
	}

	.toggledSidebar {
		width: 5% !important;
	  	float: left;
	}

	.toggledContent {
		margin-left: 0 !important;
		width: 95% !important;
		float: right !important;
	}
}

@media (min-width: 768px) and (max-width: 1200px)  {
	.hidden-desktop-small {
		display: none !important;
	}
	.editDetail table tbody tr td a {
		word-break: break-word;
		white-space: normal;
	}
}

@media (min-width: 768px) {
    .toggledSidebar .affix {
        width: 4.5%;
    }
}

@media (min-width: 1700px) {
	.hidden-long-text {
		display: none !important;
	}
	.visible-long-text {
		display: inherit !important;
	}
}

@media (min-width: 979px) and (max-width: 1200px) {

	.big-modal {
		max-height: 15000px;
		/*height: 80%;*/
		top: 40%;
		width: 90%;
		margin-left: -45%;
	}
	.medium-modal {
		width: 90%;
		margin-left: -45%;
	}

	.toggledSidebar {
		width: 5% !important;
	  	float: left;
	}

	.toggledContent {
		margin-left: 0 !important;
		width: 95% !important;
		float: right !important;
	}
}

@media (min-width: 1201px) {
	.big-modal {
		max-height: 2000px;
		/*height: 80%;*/
		top: 40%;
		width: 90%;
		margin-left: -45%;
	}

	.medium-modal {
		width: 90%;
		margin-left: -45%;
	}

	.toggledSidebar {
		width: 4% !important;
	  	float: left;
	}
    .toggledSidebar .affix {
        width: 3.6%;
    }

	.toggledContent {
		margin-left: 0 !important;
		width: 96% !important;
		float: right !important;
	}

	.editDetail table tbody tr td a {
		word-break: break-word;
		white-space: normal;
	}
}

.high-modal {
	max-height: 100% !important;
	height: 75%;
}

.modalSelection div {
	margin-left: 20px;
}

.modalSelection > .checkbox {
	margin-left: 10px;
}

.modalSelection > .checkbox input {
	margin-top: 13px;
}

.modalSelection h4 {
	display: inline-block;
	margin: 0;
}

.modal {
    overflow-y:auto;
    max-height:65%;
}

.tall.modal {
	height: 75%;
}

.tall.modal.fade.in,
.tall.modal.fade.in .modal.fade.in {
	top: 10%;
	margin-top: 0;
}

.tall.modal > .modal-body {
	min-height: calc(100% - 140px);
}

.very.tall.modal {
    height: 80%;
    max-height: 80%;
}

.very.tall.modal > .modal-body {
    box-sizing: border-box;
}

#calendarViewModal {
	width: 750px;
	/*left: 35%;*/
}

.hidden, #pdfImgCanvas {
	display: none;
}

.modalBody div {
	margin-left: 15px;
}

#imageUploadCanvasContainer {
	border: 1px solid #aaa;
	max-width: 600px;
	margin: 3px;
}
#imageUploadOptions {
	max-width: 600px;
	border: 1px solid #aaa;
	margin: 3px;
}
.selectionListControls input{
	width: 94%;
}

.addNewCategory {
	width: 108px;
}

.btnWordWrap {
	white-space: normal;
	word-wrap: break-word;
}

.categoryChild {
	margin-left: 10px;
}

.detailsColumn .btn-toolbar {
	margin: 0;
}

.itemContainer {
	margin-left: 15px;
}
.itemContainer.invisibleContainer {
	margin: 0;
}
.itemContainer summary.type-condition {
	background-color: #5ba78e;
}
.itemContainer.invisibleContainer summary.type-condition,
.itemContainer.invisibleContainer .dropdownContainer {
	display: none;
}

.loose-left {
	margin-left: 7px;
}

.loose-left-medium {
	margin-left: 14px;
}

.loose-top {
	margin-top: 7px;
}

.loose-top-block {
    display: block;
    margin-top: 7px;
}

.medium-input {
	width: 40%;
}

.wide-input {
	width: 80%;
}

#ProjectMap {
	height: 400px;
}

.zeroBottomMargin {
	margin-bottom: 0 !important;
}

.zeroTopMargin {
	margin-top: 0 !important;
}

.tableHeader {
	display: inline-block;
	margin-right: 10px;
}

.saveWell {
	padding: 5px;
}

.tableRow {
	padding: 0 !important;
}

.tableRow h6 {
	margin: 5px 0 5px 0 !important;
}

.input-append input {
	width: 100px;
}

.headeredItemNameBlur {
	height: 14px !important;
	margin-bottom: 3px !important;
}

.scrollPackageStatusHistory {
	max-height: 800px;
	overflow-y: scroll;
}

.itemNameInput {
	margin: 0 !important;
	height: 10px !important;
	width: 80px;
}

.advancedOptions {
	padding: 0 30px !important;
}
.advancedOptions summary {
	border: 0 !important;
}

.detailTable {
	margin: 0 !important;
}

table.scheduledMassReportsTable th.runActionTitle,
table.scheduledMassReportsTable td.runAction {
	text-align: center;
}

.projectPairs ul {
	margin-bottom: 0 !important;
}

.mandatory {
	font-weight: bold;
}

.title {
	margin: 0;
}

.statusHistoryEvent {
	margin-bottom: 10px !important;
}

.inputBorder {
	-webkit-box-shadow: 0 0 0 5px #eef0f2,inset 0 2px 3px #eef0f2 !important;
	-moz-box-shadow: 0 0 0 5px #eef0f2,inset 0 2px 3px #eef0f2 !important;
	box-shadow: 0 0 0 5px #eef0f2,inset 0 2px 3px #eef0f2 !important;
}

.inputError {
	-webkit-box-shadow: -8px 0 0 0 #FF9999,inset 0 2px 3px #eef0f2 !important;
	-moz-box-shadow: -8px 0 0 0 #FF9999,inset 0 2px 3px #eef0f2 !important;
	box-shadow: -8px 0 0 0 #FF9999,inset 0 2px 3px #eef0f2 !important;
}

.inputWarning {
	-webkit-box-shadow: -8px 0 0 0 #FFFF99,inset 0 2px 3px #eef0f2 !important;
	-moz-box-shadow: -8px 0 0 0 #FFFF99,inset 0 2px 3px #eef0f2 !important;
	box-shadow: -8px 0 0 0 #FFFF99,inset 0 2px 3px #eef0f2 !important;
}

.inputComplete {
    -webkit-box-shadow: -8px 0 0 0 #B6FF99,inset 0 2px 3px #eef0f2 !important;
    -moz-box-shadow: -8px 0 0 0 #B6FF99,inset 0 2px 3px #eef0f2 !important;
    box-shadow: -8px 0 0 0 #B6FF99,inset 0 2px 3px #eef0f2 !important;
}

.inputNotice {
	-webkit-box-shadow: -8px 0 0 0 #99CCFF,inset 0 2px 3px #eef0f2 !important;
	-moz-box-shadow: -8px 0 0 0 #99CCFF,inset 0 2px 3px #eef0f2 !important;
	box-shadow: -8px 0 0 0 #99CCFF,inset 0 2px 3px #eef0f2 !important;
}

.btn {
	background-color: #f7faff;
	background-image: none;
	color: #172b4d;
	text-shadow: none;
}

.btn:hover {
	background-color: #f7faff;
	color: #172b4d;
}

.btn:active {
	background-color: #ebecf0;
	color: #172b4d;
}

/* These rules are from the Inspiritas theme in inspiritas.css to to override the .btn rules above. Otherwise the .btn
   rules above will override the rules for .btn-* elements, causing them to appear similar to 'regular' buttons. If you
   customize these rules, move the customized rules out of this inspiritas.css section and format them properly! */
.btn-primary{color:#ffffff;text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);background-color:#e66f37;background-image:-moz-linear-gradient(top, #f8844b, #cb501a);background-image:-webkit-gradient(linear, 0 0, 0 100%, from(#f8844b), to(#cb501a));background-image:-webkit-linear-gradient(top, #f8844b, #cb501a);background-image:-o-linear-gradient(top, #f8844b, #cb501a);background-image:linear-gradient(to bottom, #f8844b, #cb501a);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff8844b', endColorstr='#ffcb501a', GradientType=0);border-color:#cb501a #cb501a #873511;border-color:rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);*background-color:#cb501a;filter:progid:DXImageTransform.Microsoft.gradient(enabled = false);}.btn-primary:hover,.btn-primary:active,.btn-primary.active,.btn-primary.disabled,.btn-primary[disabled]{color:#ffffff;background-color:#cb501a;*background-color:#b44717;}
.btn-primary:active,.btn-primary.active{background-color:#9e3e14 \9;}
.btn-primary:hover,.btn-primary:active,.btn-primary.active,.btn-primary.disabled,.btn-primary[disabled]{color:#ffffff;background-color:#cb501a;*background-color:#b44717;}
.btn-primary:active,.btn-primary.active{background-color:#9e3e14 \9;}
.btn-warning{color:#ffffff;text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);background-color:#fa7f49;background-image:-moz-linear-gradient(top, #fb9467, #f9601c);background-image:-webkit-gradient(linear, 0 0, 0 100%, from(#fb9467), to(#f9601c));background-image:-webkit-linear-gradient(top, #fb9467, #f9601c);background-image:-o-linear-gradient(top, #fb9467, #f9601c);background-image:linear-gradient(to bottom, #fb9467, #f9601c);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fffb9467', endColorstr='#fff9601c', GradientType=0);border-color:#f9601c #f9601c #c34005;border-color:rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);*background-color:#f9601c;filter:progid:DXImageTransform.Microsoft.gradient(enabled = false);}.btn-warning:hover,.btn-warning:active,.btn-warning.active,.btn-warning.disabled,.btn-warning[disabled]{color:#ffffff;background-color:#f9601c;*background-color:#f55006;}
.btn-warning:active,.btn-warning.active{background-color:#dc4806 \9;}
.btn-warning:hover,.btn-warning:active,.btn-warning.active,.btn-warning.disabled,.btn-warning[disabled]{color:#ffffff;background-color:#f9601c;*background-color:#f55006;}
.btn-warning:active,.btn-warning.active{background-color:#dc4806 \9;}
.btn-danger{color:#ffffff;text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);background-color:#da4f49;background-image:-moz-linear-gradient(top, #ee5f5b, #bd362f);background-image:-webkit-gradient(linear, 0 0, 0 100%, from(#ee5f5b), to(#bd362f));background-image:-webkit-linear-gradient(top, #ee5f5b, #bd362f);background-image:-o-linear-gradient(top, #ee5f5b, #bd362f);background-image:linear-gradient(to bottom, #ee5f5b, #bd362f);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffee5f5b', endColorstr='#ffbd362f', GradientType=0);border-color:#bd362f #bd362f #802420;border-color:rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);*background-color:#bd362f;filter:progid:DXImageTransform.Microsoft.gradient(enabled = false);}.btn-danger:hover,.btn-danger:active,.btn-danger.active,.btn-danger.disabled,.btn-danger[disabled]{color:#ffffff;background-color:#bd362f;*background-color:#a9302a;}
.btn-danger:active,.btn-danger.active{background-color:#942a25 \9;}
.btn-danger:hover,.btn-danger:active,.btn-danger.active,.btn-danger.disabled,.btn-danger[disabled]{color:#ffffff;background-color:#bd362f;*background-color:#a9302a;}
.btn-danger:active,.btn-danger.active{background-color:#942a25 \9;}
.btn-success{color:#ffffff;text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);background-color:#5bb75b;background-image:-moz-linear-gradient(top, #62c462, #51a351);background-image:-webkit-gradient(linear, 0 0, 0 100%, from(#62c462), to(#51a351));background-image:-webkit-linear-gradient(top, #62c462, #51a351);background-image:-o-linear-gradient(top, #62c462, #51a351);background-image:linear-gradient(to bottom, #62c462, #51a351);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff62c462', endColorstr='#ff51a351', GradientType=0);border-color:#51a351 #51a351 #387038;border-color:rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);*background-color:#51a351;filter:progid:DXImageTransform.Microsoft.gradient(enabled = false);}.btn-success:hover,.btn-success:active,.btn-success.active,.btn-success.disabled,.btn-success[disabled]{color:#ffffff;background-color:#51a351;*background-color:#499249;}
.btn-success:active,.btn-success.active{background-color:#408140 \9;}
.btn-success:hover,.btn-success:active,.btn-success.active,.btn-success.disabled,.btn-success[disabled]{color:#ffffff;background-color:#51a351;*background-color:#499249;}
.btn-success:active,.btn-success.active{background-color:#408140 \9;}
.btn-info{color:#ffffff;text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);background-color:#49afcd;background-image:-moz-linear-gradient(top, #5bc0de, #2f96b4);background-image:-webkit-gradient(linear, 0 0, 0 100%, from(#5bc0de), to(#2f96b4));background-image:-webkit-linear-gradient(top, #5bc0de, #2f96b4);background-image:-o-linear-gradient(top, #5bc0de, #2f96b4);background-image:linear-gradient(to bottom, #5bc0de, #2f96b4);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff5bc0de', endColorstr='#ff2f96b4', GradientType=0);border-color:#2f96b4 #2f96b4 #1f6377;border-color:rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);*background-color:#2f96b4;filter:progid:DXImageTransform.Microsoft.gradient(enabled = false);}.btn-info:hover,.btn-info:active,.btn-info.active,.btn-info.disabled,.btn-info[disabled]{color:#ffffff;background-color:#2f96b4;*background-color:#2a85a0;}
.btn-info:active,.btn-info.active{background-color:#24748c \9;}
.btn-info:hover,.btn-info:active,.btn-info.active,.btn-info.disabled,.btn-info[disabled]{color:#ffffff;background-color:#2f96b4;*background-color:#2a85a0;}
.btn-info:active,.btn-info.active{background-color:#24748c \9;}
.btn-inverse{color:#ffffff;text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);background-color:#363636;background-image:-moz-linear-gradient(top, #444444, #222222);background-image:-webkit-gradient(linear, 0 0, 0 100%, from(#444444), to(#222222));background-image:-webkit-linear-gradient(top, #444444, #222222);background-image:-o-linear-gradient(top, #444444, #222222);background-image:linear-gradient(to bottom, #444444, #222222);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff444444', endColorstr='#ff222222', GradientType=0);border-color:#222222 #222222 #000000;border-color:rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);*background-color:#222222;filter:progid:DXImageTransform.Microsoft.gradient(enabled = false);}.btn-inverse:hover,.btn-inverse:active,.btn-inverse.active,.btn-inverse.disabled,.btn-inverse[disabled]{color:#ffffff;background-color:#222222;*background-color:#151515;}
.btn-inverse:active,.btn-inverse.active{background-color:#080808 \9;}
.btn-inverse:hover,.btn-inverse:active,.btn-inverse.active,.btn-inverse.disabled,.btn-inverse[disabled]{color:#ffffff;background-color:#222222;*background-color:#151515;}
.btn-inverse:active,.btn-inverse.active{background-color:#080808 \9;}
/* The inspiritas.css snippet ends here. */

.btn.btn-active {
	color: white;
	text-shadow: 0 1px 1px rgba(0, 0, 0, 0.75);
	background-color: #0052cc;
	background-image: none;
	text-shadow: none;
}

.btn-active:hover {
	color: #FFF;
	text-shadow: 0 1px 1px rgba(0, 0, 0, 0.75);
}

.btn-active:active {
	color: #FFF;
	text-shadow: 0 1px 1px rgba(0, 0, 0, 0.75);
	background-color: #003380;
	background-image: none;
}

.resultList li:not(:last-child) {
	border-bottom: 1px solid #ddd;
	padding-bottom: 10px;
	margin-bottom: 10px;
}

.modal-body {
	overflow-y: visible;
	max-height: none;
}

/* Avoid wasting vertical space in modals */
#content section .modal-body .row-fluid {
	padding-top: 0;
	padding-bottom: 0;
}

.tinyCell {
	width: 10%;
}

.shortCell {
	width: 15%;
}

.mediumCell {
	width: 50%;
}

.controls, .massRow {
	margin-bottom: 5px !important;
	padding-bottom: 0 !important;
}

.descriptionContainer {
	min-height: 0 !important;
}

.descriptionInside {
	word-wrap: break-word;
}

.inlineHeader {
	display: inline-block;
	margin: 0;
}

.jobPackageList .row-fluid {
	padding: 0 !important;
	height: 30px !important;
	line-height: 0px !important;
	border-bottom: 1px solid #dddddd;
}

.jobPackageList .span5 {
	margin-top: 5px;
	min-height: 0 !important;
}

.jobPackageList .span7 {
	margin-top: 5px;
	min-height: 0 !important;
}

.jobPackageList .row-fluid:last-child {
	border-bottom: none;
}

.jobPackageList .progress {
	margin: 0 !important;
	min-height: 0 !important;
}

#GenerationModal .modal-body div, .checkboxTree div {
	margin-left: 15px;
}

#massReportModalContainer .modal-body div {
	margin-left: 15px;
}

#SiteMassReportTimingContainer {
    width: 100%;
}

.massReportTimingOption input,
.massReportTimingOption select {
    width: 150px;
}

.massReportTimingOption input[type="checkbox"] {
    width: auto;
}

#content section .row-fluid.massReportTimingOption {
    padding-left: 0;
}

.massReportTimingDaysOfWeek label {
    display: inline;
}

#content section .row-fluid.massReportTimingOption.runPerpetuallyContainer {
    padding-top: 0;
}

.cb-header {
	font-weight: bold;
}
.cb-header.condition {
	font-weight: normal;
	font-style: italic;
}

.recursor {
	margin-left: 10px;
}

.task-recursor {
	margin-left: 20px;
}

.small-recursor {
	margin-left: 10px;
}

.priceListContent summary {
	height: 34px;
}

.priceListContent summary .input-prepend {
	margin-right: 10px;
}

.priceListContent summary::-webkit-details-marker {
    float: right;
    margin-top: 13px;
}

.mouseDrag :hover{
	cursor: pointer;
}

.dragSpace {
	height: 0px;
	border: 2px solid #000;
}

.dragSpacePlace {
	height: 3px;
}

.spaceAfterCategory {
	height: 10px;
}

.packageInfo .row-fluid {
	padding: 0 !important;
}

.packageInfo .progress {
	margin: 0 !important;
}

.thumbnail {
	margin-bottom: 5px;
}

.thumbnail .thumbnail {
	top: -2px;
	left: -5px;
	background-color: #f5f5f5;
	display: inline;
	position: relative;
}

.thumbnailInput {
    margin-top: 7px;
}

.input-loose-left {
	margin-left: 10px;
}

.loose-bottom {
	margin-left: 10px !important;
}

.feedback-area {
	height: 20px;
}

.pictureCarousel .item {
	background-color: rgb(230, 230, 230);
}

.pictureCarousel .item img {
	max-height: 300px;
}

.pictureCarousel ol {
	display:none;
}

#ImagesModal {
	max-width: 100%;
	max-height: 100%;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	top: 0;
	left: 0;
}

.pictureCaption {
	padding: 1px;
	text-align: left;
}

.pictureCaption h5 {
	color: rgb(192, 192, 192);
	font-size: 11px;
	font-weight: normal;
	margin: 0;
	padding: 1px 0 0 2px;
	line-height: 12px;
}

.pictureCaption p {
	color: rgb(192, 192, 192);
	font-size: 11px;
	font-weight: normal;
	margin: 0;
	padding: 1px 0 0 2px;
	line-height: 12px;
}

.fixedFeedback {
	position: fixed;
	top: 10px;
	width: 200px;
	padding: 20px;
	margin: 20px;
}

/*
	LOADING ANIMATION
 */

#loadingContainer {
	width: 100%;
	height: 100%;
	top: 0;
	position: fixed;
	background-color: rgba(0, 0, 0, 0.8);
    z-index: 1100;
}

#loadingContainer h4 {
	color: #fff;
	text-align: center;
	margin-top: 200px;
}

.orb-container {
	width: 190px;
	height: 230px;
	position: fixed;
	top: 10%;
	left: 50%;
	background-color: rgba(0, 0, 0, 0.5);

	-webkit-border-radius: 12px;
        border-radius: 12px;
  	background-clip: padding-box;
}

.loading-orb {
    position: absolute;
    top: 0;
    left: 50%;
    z-index: 11;
    margin: -8px 0 0 -8px;
    width: 16px;
    height: 16px;
    -webkit-border-radius: 999px;
    -moz-border-radius: 999px;
    border-radius: 999px;
    background: #ff991f;
    -webkit-animation: bounce 1.2s infinite forwards;
    -moz-animation: bounce 1.2s infinite forwards;
    -ms-animation: bounce 1.2s infinite forwards;
    -o-animation: bounce 1.2s infinite forwards;
    animation: bounce 1.2s infinite forwards;
}

#loading-orb-0{
    left: 20%;
}

#loading-orb-1{
    -webkit-animation-delay: 0.2s;
    -moz-animation-delay: 0.2s;
    -ms-animation-delay: 0.2s;
    -o-animation-delay: 0.2s;
    animation-delay: 0.2s;
}

#loading-orb-2{
    left: 80%;
    -webkit-animation-delay: 0.4s;
    -moz-animation-delay: 0.4s;
    -ms-animation-delay: 0.4s;
    -o-animation-delay: 0.4s;
    animation-delay: 0.4s;
}

@-webkit-keyframes bounce {
    0% {top: 20px;
        -webkit-animation-timing-function: ease-in;
    }
    50% {top: 140px;
        height: 16px;
        -webkit-animation-timing-function: ease-out;
    }
    55% {top: 160px; height: 14px;
        -webkit-animation-timing-function: ease-in;}
    65% {top: 120px; height: 16px;
        -webkit-animation-timing-function: ease-out;}
    95% {
        top: 20px;
        -webkit-animation-timing-function: ease-in;
    }
    100% {top: 20px;
        -webkit-animation-timing-function: ease-in;
    }
}

@-moz-keyframes bounce {
    0% {top: 20px;
        -moz-animation-timing-function: ease-in;
    }
    50% {top: 140px;
        height: 16px;
        -moz-animation-timing-function: ease-out;
    }
    55% {top: 160px; height: 14px;
        -moz-animation-timing-function: ease-in;}
    65% {top: 120px; height: 16px;
        -moz-animation-timing-function: ease-out;}
    95% {
        top: 20px;
        -moz-animation-timing-function: ease-in;
    }
    100% {top: 20px;
        -moz-animation-timing-function: ease-in;
    }
}

@-o-keyframes bounce {
    0% {top: 20px;
        -o-animation-timing-function: ease-in;
    }
    50% {top: 140px;
        height: 16px;
        -o-animation-timing-function: ease-out;
    }
    55% {top: 160px; height: 14px;
        -o-animation-timing-function: ease-in;}
    65% {top: 120px; height: 16px;
        -o-animation-timing-function: ease-out;}
    95% {
        top: 20px;
        -o-animation-timing-function: ease-in;
    }
    100% {top: 20px;
        -o-animation-timing-function: ease-in;
    }
}

@keyframes bounce {
    0% {
        top: 20px;
        animation-timing-function: ease-in;
    }
    50% {
        top: 140px;
        height: 16px;
        animation-timing-function: ease-out;
    }
    55% {
        top: 160px;
        height: 14px;
        animation-timing-function: ease-in;
    }
    65% {
        top: 120px;
        height: 16px;
        animation-timing-function: ease-out;
    }
    95% {
        top: 20px;
        animation-timing-function: ease-in;
    }
    100% {
        top: 20px;
        animation-timing-function: ease-in;
    }
}
/*
	/ LOADING ANIMATION
 */

/*
    NEW ITEM LAYOUT
 */
.detailRow .row-fluid {
    padding: 0 !important;
}

.detailRow:not(:last-child), .siteRow:not(:last-child) {
    border-bottom: 1px solid #b8c1c7;
}

.detailRow :disabled {
    cursor: auto;
}
/*
    NEW ITEM LAYOUT
 */

.siteRow {
    padding: 0 !important;
}

.siteRow .row-fluid {
    padding: 0 !important;
}

.siteRow h6 {
    margin-top: 3px !important;
    margin-bottom: 3px !important;
}

.utilsError {
	margin: 10px 5px 10px 10px;
}

.sortButton {
	font-weight: bold;
	margin: 0;
	padding: 2px 0 2px 0;
}

.sortActive {
	background: rgb(210, 220, 230);
}

.popover-title {
    color: #FF0000 !important;
}

.popover-content {
	color: #000;
	font-size: 12px;
    white-space: normal;
}

.searchDetailPath {
	background: rgb(231, 231, 231);
	color: rgb(128, 128, 128);
	padding-left: 5px;
}

.pagination {
    margin: 15px 0 0 0 !important;
}

.searchForm {
    margin-top: 10px !important;
}

.checkboxTree > .checkbox {
    margin-left: 10px;
}

.checkboxTree > .checkbox input {
    margin-top: 13px;
}

.bottom-space {
	margin-bottom: 10px !important;
}

.graphHeight {
    height: 400px;
}

.zeroMargin {
    margin: 0 !important;
}

.disabledLabel {
    opacity: 0.6;
}

.small-indent {
	margin-left: 8px !important;
}

.medium-indent {
	margin-left: 16px !important;
}

.large-indent {
	margin-left: 24px !important;
}

.word-wrap {
	word-wrap: break-word;
}

.appendixHintButton {
    margin-top: 5px;
}

.text-input-word-break {
	word-break: break-word;
	word-wrap: break-word;
}

.preselectedSite {
	background-color: lightgreen;
}

.googlePlayImage {
	margin-left: 15px;
}

.taskTotalsExceeded {
	font-weight: bold;
	color: red;
}

.packageTaskModify {
	height: 42px;
}

.importNotificationSummary {
	background-color: transparent;
	margin-bottom: 0;
}

.importNotificationPre {
	font-family: "Lucida Grande","Helvetica Neue",Helvetica,Arial,sans-serif;
    border-radius: 0;
    margin-top: 0;
    word-break: normal;
}

.modifiedInfo {
    clear: both;
}

.notesInfo {
    clear: both;
	color:black;
	font-weight: bold;
}

.notesInfo a {
	font-weight: normal;
	margin-left: 5px;
}

.statusColumn {
    display: inline-block;

    vertical-align: top;
	overflow-y: auto;
	min-height: 80vh; /* see also .packageCollections */
	max-height: 80vh;
    width: 200px;
    margin-right: 3px;
    padding: 0px 5px;
    border-radius: 3px;
    border: 1px solid #d1d2d3;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    -webkit-transition: border linear .2s, box-shadow linear .2s;
    -moz-transition: border linear .2s, box-shadow linear .2s;
    -o-transition: border linear .2s, box-shadow linear .2s;
    transition: border linear .2s, box-shadow linear .2s;
}

.customStatusRow {
    white-space: nowrap;
    overflow-x: scroll;
    margin-bottom: 15px;
    padding-bottom: 10px;
}

.nav-wizard>.disabled>a:hover {
	cursor: pointer;
}

.float-right {
	float: right;
}

.m-signature-pad {
	margin-bottom: 20px;
	border: 1px solid #e8e8e8;
	background-color: #fff;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.08) inset;
	border-radius: 4px;
}
.m-signature-pad:before, .m-signature-pad:after {
	z-index: -1;
	content: "";
	width: 40%;
	height: 10px;
	background: transparent;
	-webkit-transform: skew(-3deg) rotate(-3deg);
	-moz-transform: skew(-3deg) rotate(-3deg);
	-ms-transform: skew(-3deg) rotate(-3deg);
	-o-transform: skew(-3deg) rotate(-3deg);
	transform: skew(-3deg) rotate(-3deg);
	box-shadow: 0 8px 12px rgba(0, 0, 0, 0.4);
}

.m-signature-pad:after {
	-webkit-transform: skew(3deg) rotate(3deg);
	-moz-transform: skew(3deg) rotate(3deg);
	-ms-transform: skew(3deg) rotate(3deg);
	-o-transform: skew(3deg) rotate(3deg);
	transform: skew(3deg) rotate(3deg);
}

.m-signature-pad--body {
	border: 1px solid #f4f4f4;
}

.m-signature-pad--body canvas {
	width: 100%;
	height: 100%;
	border-radius: 4px;
	box-shadow: 0 0 5px rgba(0, 0, 0, 0.02) inset;
	cursor: pointer !important
}

.batchListContainer table tbody tr[data-rawstatus='ok'] td {
	background-color: #99FF99	;
}
.batchListContainer table tbody tr[data-rawstatus='running'] td {
	background-color: #99FFFF;
}
.batchListContainer table tbody tr[data-rawstatus='fail'] td {
	background-color: #FF9999;
}
.batchListContainer table tbody tr[data-rawstatus='not-started'] td {
	background-color: #FF9999;
}
.batchListContainer table tbody tr[data-rawstatus='deviant'] td {
	background-color: #FFFF99;
}

.verticalLimit {
	overflow-y: auto;
	overflow-x: hidden;
	max-height: 5em;
}
.verticalLimit.verticalLimit5  { max-height: 5em; }
.verticalLimit.verticalLimit10 { max-height: 10em; }
.verticalLimit.verticalLimit15 { max-height: 15em; }
.verticalLimit.verticalLimit20 { max-height: 20em; }

.overflow-x-auto {
	overflow-x: auto;
	max-width: 100%;
}

.halfScreenHeight {
	height: 50vh;
}

/* Picture carousel */

.pictureCarouselView .carouselControlContainer {
    display: table;
    width: 100%;
}

.pictureCarouselView .carousel-control.below {
    position: static;
    display: table-cell;
    font-size: 1.5em;
    height: auto;
    line-height: normal;
    padding: 0.5em;
}

/* Site summaries */

.summarySelectorContainer {
    padding-bottom: 0;
    width: 100%;
}

#SiteSummarySelector {
    margin-bottom: 0;
    width: 25em; /** for IE - should be enough for most cases but still not too too long */
    width: initial;
}

#content .siteContent .summary {
    padding-top: 0;
}

.siteSummaryContainer {
    position: relative;
    max-width: 100%;
    overflow: auto;
}
.siteSummaryContainer.grabbable {
    cursor: all-scroll;
    cursor: grab;
}

.siteSummaryContainer.grabbing {
    cursor: grabbing;
}

.siteSummaryContainer.grabbing.scrolling {
    overflow-y: hidden;
}

.siteSummaryContainer.grabbing.scrolling > .siteSummary {
    margin-bottom: -1em;
}

.siteSummaryContainer.grabbing.scrolling > .siteSummary::after {
    display: block;
    content: ' ';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: transparent;
    background-image: linear-gradient(90deg, #c2c9cd 0%, transparent 1%, transparent 99%, #c2c9cd 100%);
}

.siteSummary .cell {
    vertical-align: top;
}

.siteSummary .cell .cellContent {
    width: 100%;
}

.siteSummary .cell .cellContent > * {
    display: inline-block;
}

.siteSummary .pictureDetail .pictureCarousel .carousel-inner {
    border-color: #b8c1c7;
    border-style: solid;
    border-width: 1px;
    min-width: 5em;
}

.siteSummary .pictureDetail .pictureCarouselView .carousel-control.below {
    font-size: 1em;
}

.siteSummary .details {
    margin: 0;
    vertical-align: top;
}

.siteSummary .details .detail:not(:first-of-type) {
    margin-top: 0.5em;
}

.siteSummary .multi.detail .value {
    margin-bottom: 0.2em;
}

.siteSummary .existing.single.detail:hover,
.siteSummary .existing.single.detail:hover h6,
.siteSummary .existing.multi.detail .value:hover,
.siteSummary .cellHeading:hover,
.siteSummary .rowHeading:hover {
    cursor: pointer;
    color: #005580;
}

.siteSummary .detail .name h6 {
    margin: 0;
}

.siteSummary .missing.detail {
    cursor: not-allowed;
}

.siteSummary .missing.detail .name h6 {
    opacity: 0.5;
}

.siteSummary .detail .value {
    word-wrap: break-word;
}

@media screen and (max-width: 767px) {
    .siteSummary {
        padding-bottom: 0.5em;
        padding-top: 0.5em;
    }

    .siteSummary .cell {
        width: 100%;
    }

    .siteSummary .cell:not(:first-of-type) {
        padding-top: 0;
    }
}

/* This is really the 'else' case for the media query above. */
@media not screen, (min-width: 768px) {
    .siteContent .summary {
        overflow: auto;
    }

    .siteSummary {
        border-spacing: 1em;
        display: table;
        position: relative;
    }

    .summaryRow h3.rowHeading {
        page-break-after: avoid;
        break-after: avoid;
        position: absolute;
        margin-top: -40px;
        width: 100%;
        text-align: center;
        white-space: nowrap;
    }

    .summaryRow.withRowHeading .cell {
        padding-top: 40px;
    }

    .siteSummary .summaryRow {
        page-break-inside: avoid;
        break-inside: avoid;
        display: table-row;
    }

    .siteSummary .cell {
        page-break-inside: avoid;
        break-inside: avoid;
        display: table-cell;
    }

    .siteSummary .cell:not(:first-of-type) {
        padding-left: 0;
    }

    .siteSummary .cell .cellContent > * {
        display: table-cell;
    }

    .siteSummary .pictureDetail .pictureCarousel {
        border-spacing: 0;
        width: 10em;
    }

    .siteSummary .details .value {
        max-width: 20em;
    }
}

/* Site summary templates */

.siteSummaryTemplateRowCell {
    padding: 1em;
}

.siteSummaryTemplateRowCell > .valueContainer > * {
    display: table-cell;
    height: 100%;
}

.siteSummaryTemplateRowCell .icon {
    text-align: center;
    width: 2em;
}

.siteSummaryTemplateRowCell .textFieldWithEditButton > .value {
    max-width: 30em;
}

/* TextFieldWithEditButton */

.textFieldWithEditButton {
    width: 100%;
}

.textFieldWithEditButton > * {
    display: table-cell;
}

.textFieldWithEditButton > .value {
    background-color: rgba(0, 0, 0, 0.05);
    height: 100%;
    min-width: 5em;
    padding-left: 0.5em;
    padding-right: 0.5em;
    width: 100%;
    word-wrap: break-word;
}

/* DynamicViewList */
/* FYI: IE makes this really fragile. */

.dynamicViewList .addHighlight {
    background-color: rgba(0, 255, 0, 0.2);
}

.dynamicViewList .removeHighlight {
    background-color: rgba(255, 0, 0, 0.2);
}

.dynamicViewList .moveHighlight {
    background-color: rgba(0, 170, 255, 0.2);
}

.dynamicViewList .addElement i {
    color: rgb(0, 144, 0);
}

.dynamicViewList .removeElement i {
    color: rgb(220, 0, 0);
}

.dynamicViewList .moveElementContainer a:hover {
    text-decoration: none;
}

.dynamicViewList .moveElementContainer i {
    color: #0088cc;
    text-decoration: none;
}

.dynamicViewList.vertical > * {
    padding-bottom: 0.5em;
    padding-left: 1em;
    padding-top: 0.5em;
}

.dynamicViewList.vertical > .addElement {
    display: block;
}

.dynamicViewList > .elementContainer {
    display: flex;
}

.dynamicViewList > .elementContainer > .viewContainer {
    width: 100%;
}

.dynamicViewList.vertical > .elementContainer {
    align-items: center;
    flex-direction: row;
    overflow: auto;
}

.dynamicViewList.vertical > .elementContainer > * {
    align-items: center;
    display: table-cell; /* for bad browsers */
    display: flex;
    vertical-align: middle; /* for display: table-cell */
}

.dynamicViewList.horizontal {
    display: flex;
    flex-direction: row;
}

.dynamicViewList.horizontal > .elementContainer {
    flex-direction: column;
}

.dynamicViewList.vertical > .addElementButtonContainer:not(:first-of-type) {
    border-top-color: #eeeeee;
    border-top-width: 1px;
    border-top-style: solid;
}

.dynamicViewList.vertical > .addElementButtonContainer:not(:last-of-type) {
    border-bottom-color: #eeeeee;
    border-bottom-width: 1px;
    border-bottom-style: solid;
}

.dynamicViewList.horizontal > * {
    display: table-cell;
    padding: 1em;
}

.dynamicViewList.horizontal > .addElementButtonContainer {
    border-color: #eeeeee;
    border-left-style: solid;
    border-right-style: solid;
    border-width: 1px;
}

.dynamicViewList > .elementContainer > .elementControlContainer {
    white-space: nowrap;
}
.dynamicViewList.horizontal > .elementContainer > .elementControlContainer {
    text-align: right;
}
.dynamicViewList > .elementContainer > .elementControlContainer > .removeElementContainer,
.dynamicViewList > .elementContainer > .elementControlContainer > .moveElementContainer {
    display: inline-block;
    white-space: normal;
    vertical-align: middle;
}

.dynamicViewList.horizontal > .elementContainer > .elementControlContainer > .moveElementContainer {
    margin-right: 0.7em;
}

.dynamicViewList.vertical > .elementContainer > .elementControlContainer a {
    display: block;
    margin-right: 0.5em;
}

/* ResponsiveList additions */
.responsiveListContainer.overflow-scroll {
	overflow: auto;
	width: 100%;
}

.responsiveListContainer .btn {
    /*
        For whatever reason Firefox does not render table drop-down menu buttons consistently
        causing bloated sorting buttons breaking UI noticeably in alternative themes.
        This glitch might be caused by a browser bug as two tables with the exact same HTML
        will render differently in the same view.
        This seems to fix the problem for Firefox and not affect other browsers noticeably.
    */
    line-height: 22px;
}

.respListConfigBar {
	clear: right;
	display: block;
	float: right;
	color: #666;
	background-color: #DDD;
	padding: 0.1em 0.4em 0 0.8em;
	border-radius: 0 5px 5px 0;
	position: relative;
	overflow: hidden;
	box-sizing: border-box;
	width: 20px;
	height: 2em;
	transition-property: width, margin-bottom, height;
	transition-duration: 0.5s, 0s, 0s;
	transition-delay: 0s, 0.5s, 0.5s;
	line-height: 2em;
	z-index: 1;
	margin-bottom: -2em;
	margin-right: -20px;
}

.respListConfigBar.height-2 {
	height: 4em;
	margin-bottom: -4em;
}

.respListConfigBar.active {
	height: 2em;
	width: 100%;
	width: calc(100% + 20px);
	margin-bottom: 0;
	border-radius: 5px 5px 5px 0;
	transition-delay: 0s, 0s, 0s;
}
.respListConfigBar .respListConfigToggle {
	position: absolute;
	top: 0;
	right: 0.4em;
	display: inline-block;
}
.respListConfigBar .respListConfigExcelExport {
	position: absolute;
	top: 2em;
	right: 0.4em;
	display: inline-block;
}

.respListConfigBar.active .respListConfigExcelExport {
	top: 0em;
	right: 1.9em;
}

.respListConfigBar .respListConfigOptionContainer {
	margin-right: 1.4em;
	position: absolute;
	top: 100%;
	opacity: 0;
	transition-property: none;
	transition-duration: 0.5s;
	transition-delay: 0.3s;
	white-space: nowrap;
	visibility: hidden;
}
.respListConfigBar.active .respListConfigOptionContainer {
	top: 0;
	opacity: 1;
	transition-property: top, opacity;
	visibility: visible;
}
.respListConfigBar label {
	margin-bottom: 0;
}
.respListConfigBar input[type="number"] {
	width: 4em;
}
.respListConfigBar .respListConfigOptionColumnsAuto {
	vertical-align: top;
}
.respListConfigBar label {
	padding: 0 0.4em;
}
.respListConfigBar + .responsiveListContainer .table {
	border-top-right-radius: 0;
}
.respListConfigBar.active + .responsiveListContainer .table,
.respListConfigBar.active + .responsiveListContainer .table thead:first-child tr:first-child th:first-child,
.respListConfigBar.active + .responsiveListContainer .table tbody:first-child tr:first-child td:first-child {
	border-top-left-radius: 0;
}
.respListConfigBar button {
	vertical-align: top;
}
/* ResponsiveList column filter */
table li.columnFilterContainer {
    padding: 0 5px;
    position: relative;
}

table li.columnFilterContainer input.columnFilter {
    display: block;
    z-index: 2;
}

table li.columnFilterContainer button.columnFilterResetButton {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 5px;
    border: 0 none transparent;
    background-color: transparent;
}
table li.dropdown-header {
	padding-left: 5px;
}

/* Sites / Add job package */

#PackageAddModal .packageSpecificSetup label {
    min-height: 1px;
}

/* Sites / Job packages  */

td.job-package-arrange-column {
    vertical-align: middle;
}

button.btn.btn-vertical {
    display: block;
    float: none;
    width: 100%;
    margin-top: 10px;
    margin-bottom: 10px;
}

/* Item activity log */

#content section .item-activity {
    padding-top: 5px;
    padding-bottom: 5px;
    border-bottom: 1px solid #ddd;
}

#content section .item-activity.item-activity-last {
    border-bottom: 0;
}

#content section .item-activity div.row-fluid {
    padding-top: 0;
    padding-bottom: 0;
}

.item-activity-field {
    text-transform: lowercase;
}

.item-activity-user {
    font-weight: bold;
}

/* Leaflet additions */
.leaflet-control.fullscreen-button,
.leaflet-control.layer-button {
    box-shadow: 0 1px 5px rgba(0,0,0,0.4);
    background: #fff;
    border-radius: 5px;
    width: 36px;
    height: 36px;
    font-size: 25px;
    text-align: center;
    color: #777a7c;
    cursor: pointer;
}
.leaflet-control.fullscreen-button:hover {
    color: #f9601c;
}
.leaflet-control.layer-button:hover {
    min-width: min-content;
    text-align: inherit;
    height: auto;
}
.leaflet-control.layer-button > label {
    display: none;
}
.leaflet-control.layer-button:hover > i {
    display:none;
}
.leaflet-control.layer-button:hover > label {
    display: block;
    white-space: nowrap;
    margin: 0.5em;
    text-align: start;
}
.leaflet-control.layer-button:hover > label > input {
    margin: 0 0.5em;
}

.leaflet-marker-icon.directionAngleLayerIcon {
    font-size: 65px;
}

.leaflet-marker-icon.directionAngleLayerIcon .directionAngleLayerIconArrow {
    position: absolute;
    top: 0;
    left: 0;
    width: 120px;
    height: 120px;
    text-align: center;
}
.leaflet-marker-icon.directionAngleLayerIcon .directionAngleLayerIconArrow i {
    display: block;
}

.full-screen-map {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0,0,0,0.7);
    z-index: 6;
}

.full-screen-map div#MapWrapper {
    height: 100%;
    width: 100%;
}

/* See RowsAndPies.tpl */
.designatedContainer {
    min-height: 300px; /* To be able to do initial check whether the element fits into screen. Pie takes at least this amount of pixels. */
}

/* Handsontable */
div#HandsOnTableContainer {
    clear: right; /* In mass edit/report, there is a float:right button bar (.upperControls) we need to take care of */
}

/* Minimal job package view for Secapp users */

/*
 * Here, positioning seems to work right now even without explicitly setting it,
 * but setting it explicitly should be more future-proof.
 */
#wrapper.zenMode .container {
    background-color: white;
    background-image: none;
    margin: 0;
    min-height: 100vh;
    left: 0;
    position: absolute;
    top: 0;
    width: 100% !important;
}

#wrapper.zenMode #content-wrap {
    width: 100%;
}

#wrapper.zenMode #content {
    border: 0;
}

#wrapper.zenMode .navbar,
#wrapper.zenMode .sidebarContainer,
#wrapper.zenMode #site > *:not(.siteContent),
#wrapper.zenMode .siteContent > div > div > *:not(#packageContainer):not(#JobPackage):not(#packageImageContainer),
#wrapper.zenMode #JobPackage button[name="invoice"]
{
    display: none;
}

#wrapper.zenMode #content {
    min-height: auto;
}

#wrapper.zenMode .itemWrap {
    margin-bottom: 1em;
}

/* Honor line breaks in tooltips */
.tooltip {
	white-space: pre-line;
}

/* Hide element but keep its space */
.hidden-keep-space {
    visibility: hidden;
}

/* Spinner on company pages */
.companyContent .spinnerContainer {
    position: relative;
    top: 150px;
}

/* SmartfieldNG editor styles */

.smartfield .formula {
    background-color: white;
    margin: 0.5em 0;
    padding: 0.2em 0.4em;
    border: thin #ddd inset;
    border-radius: 0.2em;
    white-space: pre-wrap;
}

.smartfield .formula .constant {
    font-weight: bold;
    color: #005580;
    cursor: pointer;
}

span.smartfield-syntax.detail,
span.smartfield-syntax.detail-encloser {
    color: #DDD;
    background-color: black;
    font-family: monospace;
    font-weight: bold;
}

span.smartfield-syntax.detail {
    cursor: pointer;
}

.smartfield-syntax.function {
    cursor: pointer;
    font-weight: bold;
    color: #990099;
}

.functionList .functionCatalog tbody tr td.selected {
    font-weight: bold;
    background-color: #FFFF99;
}

/* Package category assign select widget */
.viewPackageCategorySelectWidget .btn-group {
    max-width: 100%;
}

.viewPackageCategorySelectWidget button.multiselect.dropdown-toggle.btn {
    max-width: 100%;
    overflow: hidden;
}

.viewPackageCategorySelectWidget span.multiselect-selected-text {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    display: inline-block;
    line-height: 1.5;
}

/* Support for wide modals for wide screens */
@media (min-width: 1200px) {
    .wide.modal {
        width: 1030px;
        margin-left: -500px;
        margin-right: -500px;
    }
}


@media (max-width: 979px) {
    .navbar .auth #NavbarCompanyDropdown {
        width: calc(100% - 60px);
    }
}

.changeActiveLanguageTab,
.deleteLanguageTab,
.addLanguageDropdownOption,
.addLanguageDropdown {
   cursor: pointer;
}

.translationInputFieldContainer {
  border: 1px lightgray solid;
  border-top: none;
  border-radius: 0px;
  background-color: #f7fafc;

  padding: 1em;
  margin-bottom: 1em;
}


.language-nav-tabs {
  margin-bottom: 0;
  border-bottom: 1px lightgray solid;
}

.input-append .btn:last-child.taskActionStatusButton {
    border-radius: 4px;
}

.remoteDirectoryContentSeparator {
    margin: 0;
}
.targetCategoryNotFound {
    padding-left: 3px;
    padding-right: 3px;
    padding-top: 0;
    padding-bottom: 0;
}

.remoteConnectionBackButtonContainer {
    padding-bottom: 10px;
}

/*
 * Default Inspiritas color (777a7c) has too low contrast for WGAC AA (req: 4.5:1).
 * This has 4.51:1 against #F5F5F5 background (.thumbnail) and 4.92:1 against #FFFFFF
 */
#content small {
    color: #6E7172;
}