/*!
 * Cropper.js v1.5.1
 * https://fengyuanchen.github.io/cropperjs
 *
 * Copyright 2015-present Chen Fengyuan
 * Released under the MIT license
 *
 * Date: 2019-03-10T09:55:50.492Z
 */

.cropper-container {
  direction: ltr;
  font-size: 0;
  line-height: 0;
  position: relative;
  -ms-touch-action: none;
  touch-action: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.cropper-container img {
  display: block;
  height: 100%;
  image-orientation: 0deg;
  max-height: none !important;
  max-width: none !important;
  min-height: 0 !important;
  min-width: 0 !important;
  width: 100%;
}

.cropper-wrap-box,
.cropper-canvas,
.cropper-drag-box,
.cropper-crop-box,
.cropper-modal {
  bottom: 0;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
}

.cropper-wrap-box,
.cropper-canvas {
  overflow: hidden;
}

.cropper-drag-box {
  background-color: #fff;
  opacity: 0;
}

.cropper-modal {
  background-color: #000;
  opacity: 0.5;
}

.cropper-view-box {
  display: block;
  height: 100%;
  outline: 1px solid #39f;
  outline-color: rgba(51, 153, 255, 0.75);
  overflow: hidden;
  width: 100%;
}

.cropper-dashed {
  border: 0 dashed #eee;
  display: block;
  opacity: 0.5;
  position: absolute;
}

.cropper-dashed.dashed-h {
  border-bottom-width: 1px;
  border-top-width: 1px;
  height: calc(100% / 3);
  left: 0;
  top: calc(100% / 3);
  width: 100%;
}

.cropper-dashed.dashed-v {
  border-left-width: 1px;
  border-right-width: 1px;
  height: 100%;
  left: calc(100% / 3);
  top: 0;
  width: calc(100% / 3);
}

.cropper-center {
  display: block;
  height: 0;
  left: 50%;
  opacity: 0.75;
  position: absolute;
  top: 50%;
  width: 0;
}

.cropper-center::before,
.cropper-center::after {
  background-color: #eee;
  content: ' ';
  display: block;
  position: absolute;
}

.cropper-center::before {
  height: 1px;
  left: -3px;
  top: 0;
  width: 7px;
}

.cropper-center::after {
  height: 7px;
  left: 0;
  top: -3px;
  width: 1px;
}

.cropper-face,
.cropper-line,
.cropper-point {
  display: block;
  height: 100%;
  opacity: 0.1;
  position: absolute;
  width: 100%;
}

.cropper-face {
  background-color: #fff;
  left: 0;
  top: 0;
}

.cropper-line {
  background-color: #39f;
}

.cropper-line.line-e {
  cursor: ew-resize;
  right: -3px;
  top: 0;
  width: 5px;
}

.cropper-line.line-n {
  cursor: ns-resize;
  height: 5px;
  left: 0;
  top: -3px;
}

.cropper-line.line-w {
  cursor: ew-resize;
  left: -3px;
  top: 0;
  width: 5px;
}

.cropper-line.line-s {
  bottom: -3px;
  cursor: ns-resize;
  height: 5px;
  left: 0;
}

.cropper-point {
  background-color: #39f;
  height: 25px;
  opacity: 0.75;
  width: 25px;
}

.cropper-point.point-e {
  cursor: ew-resize;
  margin-top: -3px;
  right: -3px;
  top: 50%;
}

.cropper-point.point-n {
  cursor: ns-resize;
  left: 50%;
  margin-left: -3px;
  top: -3px;
}

.cropper-point.point-w {
  cursor: ew-resize;
  left: -3px;
  margin-top: -3px;
  top: 50%;
}

.cropper-point.point-s {
  bottom: -3px;
  cursor: s-resize;
  left: 50%;
  margin-left: -3px;
}

.cropper-point.point-ne {
  cursor: nesw-resize;
  right: -3px;
  top: -3px;
}

.cropper-point.point-nw {
  cursor: nwse-resize;
  left: -3px;
  top: -3px;
}

.cropper-point.point-sw {
  bottom: -3px;
  cursor: nesw-resize;
  left: -3px;
}

.cropper-point.point-se {
  bottom: -3px;
  cursor: nwse-resize;
  height: 20px;
  opacity: 1;
  right: -3px;
  width: 20px;
}

@media (min-width: 768px) {
  .cropper-point.point-se {
    height: 15px;
    width: 15px;
  }
}

@media (min-width: 992px) {
  .cropper-point.point-se {
    height: 10px;
    width: 10px;
  }
}

@media (min-width: 1200px) {
  .cropper-point.point-se {
    height: 5px;
    opacity: 0.75;
    width: 5px;
  }
}

.cropper-point.point-se::before {
  background-color: #39f;
  bottom: -50%;
  content: ' ';
  display: block;
  height: 200%;
  opacity: 0;
  position: absolute;
  right: -50%;
  width: 200%;
}

.cropper-invisible {
  opacity: 0;
}

.cropper-bg {
  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAAA3NCSVQICAjb4U/gAAAABlBMVEXMzMz////TjRV2AAAACXBIWXMAAArrAAAK6wGCiw1aAAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M26LyyjAAAABFJREFUCJlj+M/AgBVhF/0PAH6/D/HkDxOGAAAAAElFTkSuQmCC');
}

.cropper-hide {
  display: block;
  height: 0;
  position: absolute;
  width: 0;
}

.cropper-hidden {
  display: none !important;
}

.cropper-move {
  cursor: move;
}

.cropper-crop {
  cursor: crosshair;
}

.cropper-disabled .cropper-drag-box,
.cropper-disabled .cropper-face,
.cropper-disabled .cropper-line,
.cropper-disabled .cropper-point {
  cursor: not-allowed;
}

/*:root {
	--main-white: #FFFFFF;
	--main-color-green: #07bc83;
	--white-text: #EFEFEF;
	--light-border: #b0b0b0;
	--light-background: #F3F3F3;
	--dark-background: #2195d1;
}
body {*/
	/*background: url('../js/images/bg2.png');*/
	/*background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
	background-attachment: fixed;
}

html, body {
	margin: 0;
	padding: 0;
	font-family: 'Roboto', 'Arial', 'Helvetica', 'sans-serif';*/
	/*color: #ffffff;*/
	/*color: rgb(64,64,64);*/
	/*background-color: var(--main-bg-white);*/
	/*background-color: rgb(239, 240, 242);
	display: flex;
	flex-direction: column;
	height: 100%;
	-webkit-text-size-adjust: 100%;
	-ms-text-size-adjust: 100%;
}

input[type="button"]{
	color: rgb(255,255,255);*/
	/*background-color: #efefef;*/
	/*border: 1px solid var(--light-border);
	border-radius: 30px;
	padding: 10px;
	min-height: 40px;
	font-size: 14pt;
}

input[type="button"] {
	color: rgb(255,255,255);*/
	/*background-color: #efefef;*/
	/*border: 1px solid var(--light-border);
	border-radius: 30px;
	padding: 10px;
	min-height: 40px;
	font-size: 14pt;
}

#chartcontainer {*/
/*	display: block;
	width: 400px;
	height: 400px;*/
/*}

input[type="text"], input[type="time"], input[type="date"], input[type="tel"], input[type="password"], select {
	padding: 5px 15px;
	font-family: 'Roboto', 'Arial', 'Helvetica', 'sans-serif';*/
	/*color: #3d3d3d;*/
	/*font-size: inherit;*/
	/*background-color: var(--light-background);*/
	/*background-color: rgb(255,255,255);
	border: none; 
	min-height: 40px;
	width: 300px;
	border-radius: 40px;
	margin: 10px 0 0 0;
}

input[type="checkbox"]{
	opacity: 1;
	width: 20px;
	height: 20px;
}

* {
	box-sizing: border-box;
}

#divContent {*/
	/*width: 600px; */
	/*height: 100%;*/
	/*margin: 0 auto;*/
	/*padding: 0 10px;
}

#divContent > div:first-child {
	padding-bottom: 30px;
}

#mainDiv {
	flex-direction: column;
	display: flex;
	height: 100%;
}

	#mainDiv > div:first-child {
		min-height: 50px;
		flex: 0 0 0;
	}

	#mainDiv > div:last-child {
		flex: 1 0 0;
		overflow-y: scroll;
		-webkit-overflow-scrolling: touch;
	}*/

/*.card {
	margin-top: 10px;
	padding: 10px 5px;
	border: 1px solid var(--light-border);
	border-radius: 3px;
	background-color: #ffffff;
}*/


/*.nudge{
	margin-top: 20px;
}

.nudgeBlue {
	margin-top: 20px;
	color: rgb(24,54,98);
}



.indent {
	margin-left: 10px;
	margin-right: 10px;
}

.indent-small {
	margin-left: 3px;
	margin-right: 3px;
}

.remove{
	display: none !important;
}

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

.fit-width {
	width: 100% !important;
}

.fit-widthBlue {
	width: 100% !important;
	color: rgb(24,54,98);
}

.table-mobile {
	border: 1px solid #ccc;
	border-collapse: collapse;
	margin: 0;
	padding: 0;
	width: 100%;
	table-layout: fixed;
	border-radius: 25px;
	overflow: hidden;
}

	.table-mobile caption {
		font-size: 1.5em;
		margin: .5em 0 .75em;
	}

	.table-mobile tr {
		background-color: #f8f8f8;
		border: 1px solid #ddd;
		padding: .35em;
	}

	.table-mobile th,
	.table-mobile td {
		padding: .625em;
		text-align: center;
	}

	.table-mobile th {
		font-size: .85em;
		letter-spacing: .1em;
		text-transform: uppercase;
	}

.circle {
	border: 1px solid var(--light-background);
	border-radius: 100%;
	background-color: var(--dark-background);
	font-weight: bold;
	min-height: 40px;
}

.truncate {
	overflow: hidden;
	text-overflow: ellipsis;
}
.row{
	display: flex;
	flex-direction: row
}
	.row > * {
		margin: 0 5px;
		flex: 1;
	}

.listBlue {
	margin-top: 10px;
	color: rgb(24,54,98);
}

.blue {
	color: rgb(24,54,98);
}
.listTable {
	margin-top: 10px;
}

.listTable > div:first-child {*/
	/*border-top: 1px solid var(--light-border);*/
	/*border-bottom: 1px solid var(--light-border);
}

.listTable > div {
	border-bottom: 1px solid var(--light-border);
}
.list {
	margin-top: 10px;
}

	.list > div:first-child {
		border-top: 1px solid var(--light-border);
		border-bottom: 1px solid var(--light-border);
	}

	.list > div {
		border-bottom: 1px solid var(--light-border);
	}

.label-field {
	margin-top: 10px;
}

.label-fieldBlue {
	margin-top: 10px;
	color: rgb(24,54,98);
}

	.label-fieldBlue > div:first-child {
		font-size: 90%;*/
		/*font-weight: 100;*/
		/*color: rgb(24,54,98);
	}

.label-field > div:first-child {
	font-size: 90%;*/
	/*font-weight: 100;*/
/*}

	.label-field > div:last-child {
		font-size: 140%;
		font-weight: normal;
	}

.section-header {
	font-weight: 700;
	font-size: 150%;
	margin-top: 20px;
}

.icon-row {
	display: flex;
	flex-direction: row;
	min-height: 40px;
	align-items: center;
}

	.icon-row > div:first-child {*/
		/*min-width: 40px;*/
		/*height:100%;
		flex: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-right: 10px;
	}

	.icon-row > div {
		flex: 1;
	}

.right-icon-row {
	display: flex;
	flex-direction: row;
	min-height: 40px;
	align-items: center;*/
	/*margin-bottom: -6.5px;*/
/*}

	.right-icon-row > div {
		flex: 1;
	}

	.right-icon-row > div:last-child {*/
		/*min-width: 40px;*/
		/*flex: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-left: 10px;
	}

.right-icon-row-4column {
	display: flex;
	flex-direction: row;
	min-height: 40px;
	align-items: center;*/
	/*margin-bottom: -6.5px;*/
/*}

	.right-icon-row-4column > div {
		flex: 1;
	}

		.right-icon-row-4column > div:last-child {*/
			/*min-width: 40px;*/
			/*flex: 1;
			display: flex;
			align-items: center;
			justify-content: center;
			margin-left: 10px;
		}

.right-icon-row-no-space {
	display: flex;
	flex-direction: row;
	min-height: 40px;
	align-items: center;*/
	/*margin-bottom: -6.5px;*/
/*}

	.right-icon-row-no-space > div {
		white-space: nowrap;
		flex: 0;
	}

		.right-icon-row-no-space > div:last-child {*/
			/*min-width: 40px;*/
			/*flex: 0;
			display: flex;
			align-items: center;
			justify-content: center;
			margin-left: 10px;
		}


.double-icon-rowWhite {
	display: flex;
	flex-direction: row;
	height: 40px;
	align-items: center;
	background-color: rgb(255,255,255);
}
	.double-icon-rowWhite > div:first-child {
		height: 100%;
		min-width: 40px;
		flex: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-right: 10px;
		background-color: rgb(255,255,255);
	}

.double-icon-rowGray {
	display: flex;
	flex-direction: row;
	height: 40px;
	align-items: center;
	background-color: rgb(240,241,243);
}
	.double-icon-rowGray > div:first-child {
		height: 100%;
		min-width: 40px;
		flex: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-right: 10px;
		background-color: rgb(240,241,243);
	}


.double-icon-row {
	display: flex;
	flex-direction: row;
	height: 40px;
	align-items: center;
}

	.double-icon-row > div:first-child {
		height: 100%;
		min-width: 40px;
		flex: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-right: 10px;
	}

	.double-icon-row > div:last-child {*/
		/*min-width: 40px;*/
		/*flex: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-left: 10px;
	}

	.double-icon-row > div {
		flex: 1;
	}


.float-center {
	display: flex;
	flex-direction: row;
	width: 100%;
}

	.float-center > div {
		flex: 0;
		margin-left: auto;
		margin-right: auto;
	}

.float-middle {
	display: flex;
	flex-direction: column;
	height: 100%;
}

	.float-middle > div {
		margin-top: auto;
		margin-bottom: auto;
	}

.bold {
	font-weight: 900;
}

.login-box {
	background-color: var(--main-bg-white);
	width: 400px;*/
	/*border: 1px solid var(--light-border);
	border-radius: 5px;*/
	/*padding: 20px;
	margin: 0 auto;
}

.center {
	text-align: center;
}

.flex-center {
	text-align: center;
	display: flex !important;
	justify-content: center;
}

.alignRight {
	text-align: right;
}

.small{
	font-size: 80%;
}

.smallWhite {
	font-size: 80%;
	color: rgb(255,255,255);
}

.roundedBoxBlueBorder {
	border-color: rgb(8,40,87);
	border-radius: 25px;
	border-style: solid;
	border-width: thick;
	background-color: rgb(255,255,255);*/
	/*padding-bottom: 5px;*/
/*}

.roundedBoxRedBorder {
	border-color: red;
	border-radius: 25px;
	border-style: solid;
	border-width: thick;
	background-color: rgb(255,255,255);
	margin: 15px;*/

	/*padding-bottom: 5px;*/
/*}

.roundedBoxGreenBorder {
	border-color: green;
	border-radius: 25px;
	border-style: solid;
	border-width: thick;
	background-color: rgb(255,255,255);
	margin: 15px;*/
	/*padding-bottom: 5px;*/
/*}

.roundedBoxOrangeBorder {
	border-color: #FF9400;
	border-radius: 25px;
	border-style: solid;
	border-width: thick;
	background-color: rgb(255,255,255);
	margin: 15px;*/
	/*padding-bottom: 5px;*/
/*}

.roundedBoxNotifications {
	background: rgb(8,40,87);
	border-color: rgb(8,40,87);
	border-radius: 25px;
	border-style: solid;
	border-width: thick;
	padding: 5px;*/
	/*padding-bottom: 5px;*/
/*}
.label {
	font-size: 160%;
	font-weight: 100;
	margin-top: 25px;
}

.labelBlue {
	font-size: 160%;*/
	/*font-weight: 100;*/
	/*margin-top: 25px;
	color: rgb(24,54,98);
	margin-left: 10px;
}

.labelBlueSmall {
	font-size: 90%;*/
	/*font-weight: 100;*/
	/*margin-top: 25px;
	color: rgb(24,54,98);
	margin-left: 10px;
}

.boldBlue {
	font-weight: 900;
	color: rgb(24,54,98);
}

.labelWhite {
	font-size: 160%;*/
	/*font-weight: 100;*/
	/*margin-top: 25px;
	color: rgb(255,255,255);
	margin-left: 10px;
}

.label2 {
	font-size: 140%;
	font-weight: 700;
	margin: 10px 5px;
}

.rowGray {
	background-color: rgb(240,241,243);
}

.right-icon-row-gray {
	background-color: rgb(240,241,243);
	display: flex;
	flex-direction: row;
	min-height: 40px;
	align-items: center;*/
	/*margin-bottom: -6.5px;*/
/*}

.right-icon-row-white {
	background-color: rgb(255,255,255);
	display: flex;
	flex-direction: row;
	min-height: 40px;
	align-items: center;*/
	/*margin-bottom: -6.5px;*/
/*}

.rowWhite {
	background-color: rgb(255,255,255);
}


.label2Blue {
	font-size: 140%;
	font-weight: 700;
	margin: 10px 5px;
	color: rgb(24,54,98);
}


.clickable {
	cursor: pointer;
	-webkit-user-select: none;*/ /* Safari */
	/*-moz-user-select: none;*/ /* Firefox */
	/*-ms-user-select: none;*/ /* IE10+/Edge */
	/*user-select: none;*/ /* Standard */
	/*padding: 5px;
}

.clickableWhite {
	cursor: pointer;
	-webkit-user-select: none;*/ /* Safari */
	/*-moz-user-select: none;*/ /* Firefox */
	/*-ms-user-select: none;*/ /* IE10+/Edge */
	/*user-select: none;*/ /* Standard */
	/*padding: 5px;
	color:rgb(255,255,255);
}

	.clickable:hover {
		background-color: var(--dark-background);
	}

.large-button{
	width: 100%;
	margin: 10px 0;
	height: 60px;
	background-color:rgb(255,255,255)
}

.large-buttonGreen {
	width: 100%;
	margin: 10px 0;
	height: 60px;
	background-color: rgb(70,176,91);
	-webkit-appearance: none;
}

.large-buttonGray {
	width: 100%;
	margin: 10px 0;
	height: 60px;
	background-color: rgb(154,166,177);
	-webkit-appearance: none;
}

.modal-buttonGray {
	background-color: rgb(154,166,177);
	-webkit-appearance: none;
}

.modal-buttonGreen {
	background-color: rgb(70,176,91);
}


.large-buttonDarkBlue {
	width: 100%;
	margin: 10px 0;
	height: 60px;
	background-color: rgb(8,40,87);
	color: rgb(255,255,255);
	-webkit-appearance: none;
}

.large-buttonLightBlue {
	width: 100%;
	margin: 10px 0;
	height: 60px;
	background-color: rgb(41,181,243);
	color: rgb(255,255,255);
	-webkit-appearance: none;
}

.small-buttonGreen {*/
	/*color: rgb(255,255,255);*/
	/*background-color: rgb(70,176,91);
	border: 1px solid var(--light-border);
	border-radius: 30px;
	padding: 10px;
	min-height: 40px;
	font-size: 14pt;
	-webkit-appearance: none;
}

.small-buttonGray {*/
	/*color: rgb(255,255,255);*/
	/*background-color: rgb(154,166,177);
	border: 1px solid var(--light-border);
	border-radius: 30px;
	padding: 10px;
	min-height: 40px;
	font-size: 14pt;
	-webkit-appearance: none;
}

.small-buttonDarkBlue {*/
	/*color: rgb(255,255,255);*/
	/*background-color: rgb(8,40,87);
	border: 1px solid var(--light-border);
	border-radius: 30px;
	padding: 10px;
	min-height: 40px;
	font-size: 14pt;
	-webkit-appearance: none;
}

.small-buttonLightBlue {*/
	/*color: rgb(255,255,255);*/
	/*background-color: rgb(41,181,243);
	border: 1px solid var(--light-border);
	border-radius: 30px;
	padding: 10px;
	min-height: 40px;
	font-size: 14pt;
	-webkit-appearance: none;
}

.td{
	border:none;
}


.toastItem {
	color: #ffffff;
	background-color: var(--dark-background) !important;
	margin-bottom: 10px !important;
	border-radius: 5px;
}

.toastErrorItem {
	color: #ffffff;
	background-color: red !important;
	margin-bottom: 10px !important;
	border-radius: 5px;
}

.modalContent {
	color: #000000 !important;
	background-color: rgb(239, 240, 242) !important;
}

.yellow{
	color: yellow;
}

.redDashboard {
	color: red;
}

.greenDashboard {
	color: green;
}

.orangeDashboard {
	color: #FF9400;
}

[class*="col-"] {
	float: left;
	padding: 5px;
	margin: 0 auto;
}
[class*="col-"].middle {
	float:none;
}

	.grid-row::after {
		content: "";
		clear: both;
		display: table;
	}

@media screen and (max-width: 600px) {
	.login-box {
		width: 100%;
	}
	#divContent {
		width: 100%;
		margin: 0 auto;
		padding: 0 10px;
	}
	.table-mobile {
		border: 0;

	}

		.table-mobile caption {
			font-size: 1.3em;
		}

		.table-mobile thead {
			border: none;
			clip: rect(0 0 0 0);
			height: 1px;
			margin: -1px;
			overflow: hidden;
			padding: 0;
			position: absolute;
			width: 1px;
		}

		.table-mobile tr {
			border-bottom: 3px solid #ddd;
			display: block;
			margin-bottom: .625em;
		}

		.table-mobile td {
			border-bottom: 1px solid #ddd;
			display: block;
			font-size: .8em;
			text-align: right;
		}

			.table-mobile td::before {*/
				/*
    * aria-label has no advantage, it won't be read inside a .table-mobile
    content: attr(aria-label);
    */
				/*content: attr(data-label);
				float: left;
				font-weight: bold;
				text-transform: uppercase;
			}

			.table-mobile td:last-child {
				border-bottom: 0;
			}
}

@media (orientation: landscape) {
	body {*/
		/*background: url('../js/images/bg3.png');*/
		/*background-size: cover;
		background-repeat: no-repeat;
		background-position: center;
		background-attachment: fixed;
	}
}*/

/* Extra small devices (phones, 600px and down) */
/*@media only screen and (max-width: 600px) {
    .col-xs-1 {width: 8.33%;}
    .col-xs-2 {width: 16.66%;}
    .col-xs-3 {width: 25%;}
    .col-xs-4 {width: 33.33%;}
    .col-xs-5 {width: 41.66%;}
    .col-xs-6 {width: 50%;}
    .col-xs-7 {width: 58.33%;}
    .col-xs-8 {width: 66.66%;}
    .col-xs-9 {width: 75%;}
    .col-xs-10 {width: 83.33%;}
    .col-xs-11 {width: 91.66%;}
    .col-xs-12 {width: 100%;}
}*/

/* Small devices (portrait tablets and large phones, 600px and up) */
/*@media only screen and (min-width: 600px) {*/
    /* For tablets: */
    /*.col-s-1 {width: 8.33%;}
    .col-s-2 {width: 16.66%;}
    .col-s-3 {width: 25%;}
    .col-s-4 {width: 33.33%;}
    .col-s-5 {width: 41.66%;}
    .col-s-6 {width: 50%;}
    .col-s-7 {width: 58.33%;}
    .col-s-8 {width: 66.66%;}
    .col-s-9 {width: 75%;}
    .col-s-10 {width: 83.33%;}
    .col-s-11 {width: 91.66%;}
    .col-s-12 {width: 100%;}
}
@media only screen and (min-width: 768px) {*/
    /* For desktop: */
    /*.col-1 {width: 8.33%;}
    .col-2 {width: 16.66%;}
    .col-3 {width: 25%;}
    .col-4 {width: 33.33%;}
    .col-5 {width: 41.66%;}
    .col-6 {width: 50%;}
    .col-7 {width: 58.33%;}
    .col-8 {width: 66.66%;}
    .col-9 {width: 75%;}
    .col-10 {width: 83.33%;}
    .col-11 {width: 91.66%;}
    .col-12 {width: 100%;}
}*/

/* Large devices (laptops/desktops, 992px and up) */
/*@media only screen and (min-width: 992px) {
	.col-l-1 {width: 8.33%;}
    .col-l-2 {width: 16.66%;}
    .col-l-3 {width: 25%;}
    .col-l-4 {width: 33.33%;}
    .col-l-5 {width: 41.66%;}
    .col-l-6 {width: 50%;}
    .col-l-7 {width: 58.33%;}
    .col-l-8 {width: 66.66%;}
    .col-l-9 {width: 75%;}
    .col-l-10 {width: 83.33%;}
    .col-l-11 {width: 91.66%;}
    .col-l-12 {width: 100%;}
}*/

/* Extra large devices (large laptops and desktops, 1200px and up) */
/*@media only screen and (min-width: 1200px) {
	.col-xl-1 {width: 8.33%;}
    .col-xl-2 {width: 16.66%;}
    .col-xl-3 {width: 25%;}
    .col-xl-4 {width: 33.33%;}
    .col-xl-5 {width: 41.66%;}
    .col-xl-6 {width: 50%;}
    .col-xl-7 {width: 58.33%;}
    .col-xl-8 {width: 66.66%;}
    .col-xl-9 {width: 75%;}
    .col-xl-10 {width: 83.33%;}
    .col-xl-11 {width: 91.66%;}
    .col-xl-12 {width: 100%;}
}

.checkboxcontainer {
	margin: 0 auto;
}

.roundcheckbox {
	position: relative;
}

	.roundcheckbox label {
		background-color: #fff;
		border: 1px solid #ccc;
		border-radius: 50%;
		cursor: pointer;
		height: 28px;
		left: 0;
		position: absolute;*/
		/*top: 0;*/
		/*width: 28px;
	}

		.roundcheckbox label:after {
			border: 2px solid #fff;
			border-top: none;
			border-right: none;
			content: "";
			height: 6px;
			left: 7px;
			opacity: 0;
			position: absolute;
			top: 8px;
			transform: rotate(-45deg);
			width: 12px;
		}

	.roundcheckbox input[type="checkbox"] {
		visibility: hidden;
	}

		.roundcheckbox input[type="checkbox"]:checked + label {
			background-color: #3fb74f;
			border-color: #3fb74f;
		}

			.roundcheckbox input[type="checkbox"]:checked + label:after {
				opacity: 1;
			}*/
/* The switch - the box around the slider */
/*.switch {
	position: relative;
	display: inline-block;
	width: 60px;
	height: 34px;

}*/

	/* Hide default HTML checkbox */
	/*.switch input {
		opacity: 0;
		width: 0;
		height: 0;
	}*/

/* The slider */
/*.slider {
	position: absolute;
	cursor: pointer;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: #ccc;
	-webkit-transition: .4s;
	transition: .4s;
}

	.slider:before {
		position: absolute;
		content: "";
		height: 26px;
		width: 26px;
		left: 4px;
		bottom: 4px;
		background-color: white;
		-webkit-transition: .4s;
		transition: .4s;
	}

input:checked + .slider {
	background-color: #2196F3;
}

input:focus + .slider {
	box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
	-webkit-transform: translateX(26px);
	-ms-transform: translateX(26px);
	transform: translateX(26px);
}*/

/* Rounded sliders */
/*.slider.round {
	border-radius: 34px;
}

	.slider.round:before {
		border-radius: 50%;
	}
.switch h5 {
	position: absolute;
	right: -10rem;
	top: 0;
	margin: 0.3rem;
	font-weight: 500;
}
.switch h4 {
	position: absolute;
	left: -4rem;
	top: 0;
	margin: 0.3rem;
	font-weight:500;
}*/




:root {
	--main-white: #FFFFFF;
	--main-color-green: #07bc83;
	--white-text: #EFEFEF;
	--light-border: #b0b0b0;
	--light-background: #F3F3F3;
	--dark-background: #2195d1;
}

body {
	/*background: url('../js/images/bg2.png');*/
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
	background-attachment: fixed;
}

html, body {
	margin: 0;
	padding: 0;
	font-family: 'Roboto', 'Arial', 'Helvetica', 'sans-serif';
	/*color: #ffffff;*/
	color: rgb(64,64,64);
	/*background-color: var(--main-bg-white);*/
	/*background-color: rgb(239, 240, 242);*/
	display: flex;
	flex-direction: column;
	height: 100%;
	-webkit-text-size-adjust: 100%;
	-ms-text-size-adjust: 100%;
	/*new */
	/*	background: rgb(36,0,2);
	background: radial-gradient(circle, rgba(36,0,2,0.3024051966292135) 0%, rgba(239,240,242,1) 0%, rgba(18,20,20,0.12088585434173671) 100%);*/
	background: rgb(239,240,242);
	background: linear-gradient(180deg, rgba(239,240,242,0.3) 0%, rgba(239,240,242,1) 50%, rgba(205,212,212,0.5046393557422969) 100%);
}

input[type="button"] {
	color: rgb(255,255,255);
	/*background-color: #efefef;*/
	border: 1px solid var(--light-border);
	border-radius: 30px;
	padding: 10px;
	min-height: 40px;
	font-size: 14pt;
}

input[type="button"] {
	color: rgb(255,255,255);
	/*background-color: #efefef;*/
	border: 1px solid var(--light-border);
	border-radius: 30px;
	padding: 10px;
	min-height: 40px;
	font-size: 14pt;
}

#chartcontainer {
	/*	display: block;
	width: 400px;
	height: 400px;*/
}

.clientOrientationSignOffSelectTest {
	padding: 5px 15px;
	font-family: 'Roboto', 'Arial', 'Helvetica', 'sans-serif';
	/*color: #3d3d3d;*/
	font-size: inherit;
	/*background-color: var(--light-background);*/
	background-color: rgb(255,255,255);
	border: none;
	min-height: 40px;
	/*width: 300px;*/
	border-radius: 40px;
	margin: 10px 0 0 0;
}

input[type="text"], input[type="time"], input[type="date"], input[type="tel"], input[type="password"], select {
	padding: 5px 15px;
	font-family: 'Roboto', 'Arial', 'Helvetica', 'sans-serif';
	/*color: #3d3d3d;*/
	font-size: inherit;
	/*background-color: var(--light-background);*/
	background-color: rgb(255,255,255);
	border: none;
	min-height: 40px;
	width: 300px;
	border-radius: 40px;
	margin: 10px 0 0 0;
}

input[type="checkbox"] {
	opacity: 1;
	width: 20px;
	height: 20px;
}

* {
	box-sizing: border-box;
}

#divContent {
	/*width: 600px; */
	height: 100%;
	/*margin: 0 auto;*/
	padding: 0 10px;
}

	#divContent > div:first-child {
		padding-bottom: 30px;
	}

#mainDiv {
	flex-direction: column;
	display: flex;
	height: 100%;
}

	#mainDiv > div:first-child {
		min-height: 50px;
		flex: 0 0 0;
	}

	#mainDiv > div:last-child {
		flex: 1 0 0;
		overflow-y: scroll;
		-webkit-overflow-scrolling: touch;
	}

/*.card {
	margin-top: 10px;
	padding: 10px 5px;
	border: 1px solid var(--light-border);
	border-radius: 3px;
	background-color: #ffffff;
}*/


.nudge {
	margin-top: 20px;
}

.nudgeBlue {
	margin-top: 20px;
	color: rgb(24,54,98);
}



.indent {
	margin-left: 10px;
	margin-right: 10px;
}

.indent-small {
	margin-left: 3px;
	margin-right: 3px;
}

.remove {
	display: none !important;
}

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

.fit-width {
	width: 100% !important;
}

.fit-widthBlue {
	width: 100% !important;
	color: rgb(24,54,98);
}

.table-mobile {
	border: 1px solid #ccc;
	border-collapse: collapse;
	margin: 0;
	padding: 0;
	width: 100%;
	table-layout: fixed;
	border-radius: 25px;
	overflow: hidden;

}

	.table-mobile caption {
		font-size: 1.5em;
		margin: .5em 0 .75em;
	}

	.table-mobile tr {
		background-color: #f8f8f8;
		border: 1px solid #ddd;
		padding: .35em;
	}

	.table-mobile th,
	.table-mobile td {
		padding: .625em;
		text-align: center;
	}

	.table-mobile th {
		font-size: .85em;
		letter-spacing: .1em;
		text-transform: uppercase;
	}

.circle {
	border: 1px solid var(--light-background);
	border-radius: 100%;
	background-color: var(--dark-background);
	font-weight: bold;
	min-height: 40px;
}

.truncate {
	overflow: hidden;
	text-overflow: ellipsis;
}

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

	.row > * {
		margin: 0 5px;
		flex: 1;
	}

.listBlue {
	margin-top: 10px;
	color: rgb(24,54,98);
}

.blue {
	color: rgb(24,54,98);
}

.listTable {
	margin-top: 10px;
}

	.listTable > div:first-child {
		/*border-top: 1px solid var(--light-border);*/
		border-bottom: 1px solid var(--light-border);
	}

	.listTable > div {
		border-bottom: 1px solid var(--light-border);
	}

.list {
	margin-top: 10px;
}

	.list > div:first-child {
		border-top: 1px solid var(--light-border);
		border-bottom: 1px solid var(--light-border);
	}

	.list > div {
		border-bottom: 1px solid var(--light-border);
	}

.label-field {
	margin-top: 10px;
}

.label-fieldBlue {
	margin-top: 10px;
	color: rgb(24,54,98);
}

	.label-fieldBlue > div:first-child {
		font-size: 90%;
		/*font-weight: 100;*/
		color: rgb(24,54,98);
	}

.label-field > div:first-child {
	font-size: 90%;
	/*font-weight: 100;*/
}

.label-field > div:last-child {
	font-size: 140%;
	font-weight: normal;
}

.section-header {
	font-weight: 700;
	font-size: 150%;
	margin-top: 20px;
}

.icon-row {
	display: flex;
	flex-direction: row;
	min-height: 40px;
	align-items: center;
}

	.icon-row > div:first-child {
		/*min-width: 40px;*/
		height: 100%;
		flex: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-right: 10px;
	}

	.icon-row > div {
		flex: 1;
	}

.right-icon-row {
	display: flex;
	flex-direction: row;
	min-height: 40px;
	align-items: center;
	/*margin-bottom: -6.5px;*/
}

	.right-icon-row > div {
		flex: 1;
	}

		.right-icon-row > div:last-child {
			/*min-width: 40px;*/
			flex: 0;
			display: flex;
			align-items: center;
			justify-content: center;
			margin-left: 10px;
		}

.right-icon-row-4column {
	display: flex;
	flex-direction: row;
	min-height: 40px;
	align-items: center;
	/*margin-bottom: -6.5px;*/
}

	.right-icon-row-4column > div {
		flex: 1;
	}

		.right-icon-row-4column > div:last-child {
			/*min-width: 40px;*/
			flex: 1;
			display: flex;
			align-items: center;
			justify-content: center;
			margin-left: 10px;
		}

.right-icon-row-no-space {
	display: flex;
	flex-direction: row;
	min-height: 40px;
	align-items: center;
	/*margin-bottom: -6.5px;*/
}

	.right-icon-row-no-space > div {
		white-space: nowrap;
		flex: 0;
	}

		.right-icon-row-no-space > div:last-child {
			/*min-width: 40px;*/
			flex: 0;
			display: flex;
			align-items: center;
			justify-content: center;
			margin-left: 10px;
		}


.double-icon-rowWhite {
	display: flex;
	flex-direction: row;
	height: 40px;
	align-items: center;
	background-color: rgb(255,255,255);
}

	.double-icon-rowWhite > div:first-child {
		height: 100%;
		min-width: 40px;
		flex: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-right: 10px;
		background-color: rgb(255,255,255);
	}

.multiselectfieldset {
	border: none;
	padding: 0;
	margin: 0;
}

.multiselectlegend {
	padding: 0;
	margin: 0;
}

.multiselectlabel {
	cursor: pointer;
	display: block;
	float: left;
	padding: .2em .4em;
	background-color: #ddd;
	border-style: solid;
	border-width: 1px 1px 1px 0;
	border-color: #666;
	/*background-image: -moz-linear-gradient(rgba(255,255,255,.2), rgba(0,0,0,.2));*/
	/*background-image: -webkit-linear-gradient(rgba(255,255,255,.2), rgba(0,0,0,.2));*/
	/*background-image: linear-gradient(rgba(255,255,255,.2), rgba(0,0,0,.2));*/
	/*box-shadow: 1px 1px 1px rgba(255,255,255,.2) inset, -1px -1px 1px rgba(0,0,0,.2) inset;*/
}

	.multiselectlabel:first-child {
		border-left-width: 1px;
		border-top-left-radius: .2em;
		border-bottom-left-radius: .2em;
	}

	.multiselectlabel:last-child {
		border-top-right-radius: .2em;
		border-bottom-right-radius: .2em;
	}

	.multiselectlabel.selected {
		background-color: #0066CC;
		color: white;
		border-color: darkblue;
		background-image: -moz-linear-gradient(rgba(0,0,0,.2), rgba(255,255,255,.2));
		background-image: -webkit-linear-gradient(rgba(0,0,0,.2), rgba(255,255,255,.2));
		background-image: linear-gradient(rgba(0,0,0,.2), rgba(255,255,255,.2));
		box-shadow: 1px 1px 1px rgba(0,0,0,.2) inset;
	}

	.multiselectlabel.warning.selected {
		background-color: #0066CC;
		color: white;
		border-color: darkblue;
		background-image: -moz-linear-gradient(rgba(0,0,0,.2), rgba(255,255,255,.2));
		background-image: -webkit-linear-gradient(rgba(0,0,0,.2), rgba(255,255,255,.2));
		background-image: linear-gradient(rgba(0,0,0,.2), rgba(255,255,255,.2));
		box-shadow: 1px 1px 1px rgba(0,0,0,.2) inset;
	}

.multiselectradio {
	position: absolute;
	top: -9999px;
	left: -9999px;
}

.double-icon-rowGray {
	display: flex;
	flex-direction: row;
	height: 40px;
	align-items: center;
	background-color: rgb(240,241,243);
}

	.double-icon-rowGray > div:first-child {
		height: 100%;
		min-width: 40px;
		flex: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-right: 10px;
		background-color: rgb(240,241,243);
	}


.double-icon-row {
	display: flex;
	flex-direction: row;
	height: 40px;
	align-items: center;
}

	.double-icon-row > div:first-child {
		height: 100%;
		min-width: 40px;
		flex: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-right: 10px;
	}

	.double-icon-row > div:last-child {
		/*min-width: 40px;*/
		flex: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-left: 10px;
	}

	.double-icon-row > div {
		flex: 1;
	}


.float-center {
	display: flex;
	flex-direction: row;
	width: 100%;
}

	.float-center > div {
		flex: 0;
		margin-left: auto;
		margin-right: auto;
	}

.float-middle {
	display: flex;
	flex-direction: column;
	height: 100%;
}

	.float-middle > div {
		margin-top: auto;
		margin-bottom: auto;
	}

.bold {
	font-weight: 900;
}

.login-box {
	background-color: var(--main-bg-white);
	width: 400px;
	/*border: 1px solid var(--light-border);
	border-radius: 5px;*/
	padding: 20px;
	margin: 0 auto;
}

.center {
	text-align: center;
}

.flex-center {
	text-align: center;
	display: flex !important;
	justify-content: center;
}

.alignRight {
	text-align: right;
}

.small {
	font-size: 80%;
}

.smallNoFlex {
	flex: none;
	font-size: 80%;
}

.smallWhite {
	font-size: 80%;
	color: rgb(255,255,255);
}

.roundedBoxBlueBorder {
	padding:5px;
	border-color: rgb(8,40,87);
	border-radius: 25px;
	border-style: solid;
	border-width: thick;
	background-color: rgb(255,255,255);
	/*padding-bottom: 5px;*/
}

.roundedBoxRedBorder {
	
	border-color: red;
	border-radius: 25px;
	border-style: solid;
	border-width: thick;
	background-color: rgb(255,255,255);
	margin: 15px;
	/*padding-bottom: 5px;*/
}

.roundedBoxGreenBorder {
	
	border-color: green;
	border-radius: 25px;
	border-style: solid;
	border-width: thick;
	background-color: rgb(255,255,255);
	margin: 15px;
	/*padding-bottom: 5px;*/
}

.roundedBoxOrangeBorder {
	
	border-color: #FF9400;
	border-radius: 25px;
	border-style: solid;
	border-width: thick;
	background-color: rgb(255,255,255);
	margin: 15px;
	/*padding-bottom: 5px;*/
}

.roundedBoxNotifications {
	background: rgb(8,40,87);
	border-color: rgb(8,40,87);
	border-radius: 25px;
	border-style: solid;
	border-width: thick;
	padding: 5px;
	/*padding-bottom: 5px;*/
}

.label {
	font-size: 160%;
	font-weight: 100;
	margin-top: 25px;
}

.labelBlue {
	font-size: 160%;
	/*font-weight: 100;*/
	margin-top: 25px;
	color: rgb(24,54,98);
	margin-left: 10px;
}

.labelBlueSmall {
	font-size: 90%;
	/*font-weight: 100;*/
	margin-top: 25px;
	color: rgb(24,54,98);
	margin-left: 10px;
}

.boldBlue {
	font-weight: 900;
	color: rgb(24,54,98);
}

.labelWhite {
	font-size: 160%;
	/*font-weight: 100;*/
	margin-top: 25px;
	color: rgb(255,255,255);
	margin-left: 10px;
}

.label2 {
	font-size: 140%;
	font-weight: 700;
	margin: 10px 5px;
}

.rowGray {
	background-color: rgb(240,241,243);
}

.right-icon-row-gray {
	background-color: rgb(240,241,243);
	display: flex;
	flex-direction: row;
	min-height: 40px;
	align-items: center;
	/*margin-bottom: -6.5px;*/
}

.right-icon-row-white {
	background-color: rgb(255,255,255);
	display: flex;
	flex-direction: row;
	min-height: 40px;
	align-items: center;
	/*margin-bottom: -6.5px;*/
}

.rowWhite {
	background-color: rgb(255,255,255);
}


.label2Blue {
	font-size: 140%;
	font-weight: 700;
	margin: 10px 5px;
	color: rgb(24,54,98);
}


.clickable {
	cursor: pointer;
	-webkit-user-select: none; /* Safari */
	-moz-user-select: none; /* Firefox */
	-ms-user-select: none; /* IE10+/Edge */
	user-select: none; /* Standard */
	padding: 5px;
}

.clickableWhite {
	cursor: pointer;
	-webkit-user-select: none; /* Safari */
	-moz-user-select: none; /* Firefox */
	-ms-user-select: none; /* IE10+/Edge */
	user-select: none; /* Standard */
	padding: 5px;
	color: rgb(255,255,255);
}

.clickable:hover {
	background-color: var(--dark-background);
}

.large-button {
	width: 100%;
	margin: 10px 0;
	height: 60px;
	background-color: rgb(255,255,255)
}

.large-buttonGreen {
	width: 100%;
	margin: 10px 0;
	height: 60px;
	background-color: rgb(70,176,91);
	-webkit-appearance: none;
}

.large-buttonGray {
	width: 100%;
	margin: 10px 0;
	height: 60px;
	background-color: rgb(154,166,177);
	-webkit-appearance: none;
}

.modal-buttonGray {
	background-color: rgb(154,166,177);
	-webkit-appearance: none;
}

.modal-buttonGreen {
	background-color: rgb(70,176,91);
}


.large-buttonDarkBlue {
	width: 100%;
	margin: 10px 0;
	height: 60px;
	background-color: rgb(8,40,87);
	color: rgb(255,255,255);
	-webkit-appearance: none;
}

.large-buttonLightBlue {
	width: 100%;
	margin: 10px 0;
	height: 60px;
	background-color: rgb(41,181,243);
	color: rgb(255,255,255);
	-webkit-appearance: none;
}

.small-buttonGreen {
	/*color: rgb(255,255,255);*/
	background-color: rgb(70,176,91);
	border: 1px solid var(--light-border);
	border-radius: 30px;
	padding: 10px;
	min-height: 40px;
	font-size: 14pt;
	-webkit-appearance: none;
}

.small-buttonGray {
	/*color: rgb(255,255,255);*/
	background-color: rgb(154,166,177);
	border: 1px solid var(--light-border);
	border-radius: 30px;
	padding: 10px;
	min-height: 40px;
	font-size: 14pt;
	-webkit-appearance: none;
}

.small-buttonDarkBlue {
	/*color: rgb(255,255,255);*/
	background-color: rgb(8,40,87);
	border: 1px solid var(--light-border);
	border-radius: 30px;
	padding: 10px;
	min-height: 40px;
	font-size: 14pt;
	-webkit-appearance: none;
}

.small-buttonLightBlue {
	/*color: rgb(255,255,255);*/
	background-color: rgb(41,181,243);
	border: 1px solid var(--light-border);
	border-radius: 30px;
	padding: 10px;
	min-height: 40px;
	font-size: 14pt;
	-webkit-appearance: none;
}

.td {
	border: none;
}


.toastItem {
	color: #ffffff;
	background-color: var(--dark-background) !important;
	margin-bottom: 10px !important;
	border-radius: 5px;
}

.toastErrorItem {
	color: #ffffff;
	background-color: red !important;
	margin-bottom: 10px !important;
	border-radius: 5px;
}

.modalContent {
	color: #000000 !important;
	background-color: rgb(239, 240, 242) !important;
}

.yellow {
	color: yellow;
}

.buttonGreenColor {
	color: rgb(70,176,91);
}

.buttonLightBlueColor {
	color: rgb(41,181,243);
}

.redDashboard {
	color: red;
}

.greenDashboard {
	color: green;
}

.orangeDashboard {
	color: #FF9400;
}

[class*="col-"] {
	float: left;
	padding: 5px;
	margin: 0 auto;
}

	[class*="col-"].middle {
		float: none;
	}

.grid-row::after {
	content: "";
	clear: both;
	display: table;
}

@media screen and (max-width: 600px) {
	.login-box {
		width: 100%;
	}

	#divContent {
		width: 100%;
		margin: 0 auto;
		padding: 0 10px;
	}

	.table-mobile {
		border: 0;
	}

		.table-mobile caption {
			font-size: 1.3em;
		}

		.table-mobile thead {
			border: none;
			clip: rect(0 0 0 0);
			height: 1px;
			margin: -1px;
			overflow: hidden;
			padding: 0;
			position: absolute;
			width: 1px;
		}

		.table-mobile tr {
			border-bottom: 3px solid #ddd;
			display: block;
			margin-bottom: .625em;
		}

		.table-mobile td {
			border-bottom: 1px solid #ddd;
			display: block;
			font-size: .8em;
			text-align: right;
		}

			.table-mobile td::before {
				/*
    * aria-label has no advantage, it won't be read inside a .table-mobile
    content: attr(aria-label);
    */
				content: attr(data-label);
				float: left;
				font-weight: bold;
				text-transform: uppercase;
			}

			.table-mobile td:last-child {
				border-bottom: 0;
			}
}

@media (orientation: landscape) {
	body {
		/*background: url('../js/images/bg3.png');*/
		background-size: cover;
		background-repeat: no-repeat;
		background-position: center;
		background-attachment: fixed;
	}
}

/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
	.col-xs-1 {
		width: 8.33%;
	}

	.col-xs-2 {
		width: 16.66%;
	}

	.col-xs-3 {
		width: 25%;
	}

	.col-xs-4 {
		width: 33.33%;
	}

	.col-xs-5 {
		width: 41.66%;
	}

	.col-xs-6 {
		width: 50%;
	}

	.col-xs-7 {
		width: 58.33%;
	}

	.col-xs-8 {
		width: 66.66%;
	}

	.col-xs-9 {
		width: 75%;
	}

	.col-xs-10 {
		width: 83.33%;
	}

	.col-xs-11 {
		width: 91.66%;
	}

	.col-xs-12 {
		width: 100%;
	}
}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {
	/* For tablets: */
	.col-s-1 {
		width: 8.33%;
	}

	.col-s-2 {
		width: 16.66%;
	}

	.col-s-3 {
		width: 25%;
	}

	.col-s-4 {
		width: 33.33%;
	}

	.col-s-5 {
		width: 41.66%;
	}

	.col-s-6 {
		width: 50%;
	}

	.col-s-7 {
		width: 58.33%;
	}

	.col-s-8 {
		width: 66.66%;
	}

	.col-s-9 {
		width: 75%;
	}

	.col-s-10 {
		width: 83.33%;
	}

	.col-s-11 {
		width: 91.66%;
	}

	.col-s-12 {
		width: 100%;
	}
}

@media only screen and (min-width: 768px) {
	/* For desktop: */
	.col-1 {
		width: 8.33%;
	}

	.col-2 {
		width: 16.66%;
	}

	.col-3 {
		width: 25%;
	}

	.col-4 {
		width: 33.33%;
	}

	.col-5 {
		width: 41.66%;
	}

	.col-6 {
		width: 50%;
	}

	.col-7 {
		width: 58.33%;
	}

	.col-8 {
		width: 66.66%;
	}

	.col-9 {
		width: 75%;
	}

	.col-10 {
		width: 83.33%;
	}

	.col-11 {
		width: 91.66%;
	}

	.col-12 {
		width: 100%;
	}
}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {
	.col-l-1 {
		width: 8.33%;
	}

	.col-l-2 {
		width: 16.66%;
	}

	.col-l-3 {
		width: 25%;
	}

	.col-l-4 {
		width: 33.33%;
	}

	.col-l-5 {
		width: 41.66%;
	}

	.col-l-6 {
		width: 50%;
	}

	.col-l-7 {
		width: 58.33%;
	}

	.col-l-8 {
		width: 66.66%;
	}

	.col-l-9 {
		width: 75%;
	}

	.col-l-10 {
		width: 83.33%;
	}

	.col-l-11 {
		width: 91.66%;
	}

	.col-l-12 {
		width: 100%;
	}
}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {
	.col-xl-1 {
		width: 8.33%;
	}

	.col-xl-2 {
		width: 16.66%;
	}

	.col-xl-3 {
		width: 25%;
	}

	.col-xl-4 {
		width: 33.33%;
	}

	.col-xl-5 {
		width: 41.66%;
	}

	.col-xl-6 {
		width: 50%;
	}

	.col-xl-7 {
		width: 58.33%;
	}

	.col-xl-8 {
		width: 66.66%;
	}

	.col-xl-9 {
		width: 75%;
	}

	.col-xl-10 {
		width: 83.33%;
	}

	.col-xl-11 {
		width: 91.66%;
	}

	.col-xl-12 {
		width: 100%;
	}
}

.checkboxcontainer {
	margin: 0 auto;
}

.roundcheckbox {
	position: relative;
}

	.roundcheckbox label {
		background-color: #fff;
		border: 1px solid #ccc;
		border-radius: 50%;
		cursor: pointer;
		height: 28px;
		left: 0;
		position: absolute;
		/*top: 0;*/
		width: 28px;
	}

		.roundcheckbox label:after {
			border: 2px solid #fff;
			border-top: none;
			border-right: none;
			content: "";
			height: 6px;
			left: 7px;
			opacity: 0;
			position: absolute;
			top: 8px;
			transform: rotate(-45deg);
			width: 12px;
		}

	.roundcheckbox input[type="checkbox"] {
		visibility: hidden;
	}

		.roundcheckbox input[type="checkbox"]:checked + label {
			background-color: #3fb74f;
			border-color: #3fb74f;
		}

			.roundcheckbox input[type="checkbox"]:checked + label:after {
				opacity: 1;
			}
/* The switch - the box around the slider */
.switch {
	position: relative;
	display: inline-block;
	width: 60px;
	height: 34px;
}

	/* Hide default HTML checkbox */
	.switch input {
		opacity: 0;
		width: 0;
		height: 0;
	}

/* The slider */
.slider {
	position: absolute;
	cursor: pointer;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: #ccc;
	-webkit-transition: .4s;
	transition: .4s;
}

	.slider:before {
		position: absolute;
		content: "";
		height: 26px;
		width: 26px;
		left: 4px;
		bottom: 4px;
		background-color: white;
		-webkit-transition: .4s;
		transition: .4s;
	}

input:checked + .slider {
	background-color: #2196F3;
}

input:focus + .slider {
	box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
	-webkit-transform: translateX(26px);
	-ms-transform: translateX(26px);
	transform: translateX(26px);
}

/* Rounded sliders */
.slider.round {
	border-radius: 34px;
}

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

.switch h5 {
	position: absolute;
	right: -10rem;
	top: 0;
	margin: 0.3rem;
	font-weight: 500;
}

.switch h4 {
	position: absolute;
	left: -4rem;
	top: 0;
	margin: 0.3rem;
	font-weight: 500;
}

.loadingWindow {
	z-index: 999999;
}

.cs-loader {
	position: fixed;
	/*z-index: 999999999;*/
	opacity: 1;
}

.cs-loader-inner {
	transform: translateX(-50%);
	top: 50%;
	left: 50%;
	position: fixed;
	width: calc(100% - 200px);
	color: #FFFFFF;
	text-align: center;
}

	.cs-loader-inner label {
		font-size: 20px;
		opacity: 0;
		display: inline-block;
	}

@keyframes loading {
	0% {
		opacity: 0;
		transform: translateX(-300px);
	}

	33% {
		opacity: 1;
		transform: translateX(0px);
	}

	66% {
		opacity: 1;
		transform: translateX(0px);
	}

	100% {
		opacity: 0;
		transform: translateX(300px);
	}
}

@-webkit-keyframes loading {
	0% {
		opacity: 0;
		-webkit-transform: translateX(-300px);
	}

	33% {
		opacity: 1;
		-webkit-transform: translateX(0px);
	}

	66% {
		opacity: 1;
		-webkit-transform: translateX(0px);
	}

	100% {
		opacity: 0;
		-webkit-transform: translateX(300px);
	}
}

.cs-loader-inner label:nth-child(6) {
	-webkit-animation: loading 3s infinite ease-in-out;
	animation: loading 3s infinite ease-in-out;
}

.cs-loader-inner label:nth-child(5) {
	-webkit-animation: loading 3s 100ms infinite ease-in-out;
	animation: loading 3s 100ms infinite ease-in-out;
}

.cs-loader-inner label:nth-child(4) {
	-webkit-animation: loading 3s 200ms infinite ease-in-out;
	animation: loading 3s 200ms infinite ease-in-out;
}

.cs-loader-inner label:nth-child(3) {
	-webkit-animation: loading 3s 300ms infinite ease-in-out;
	animation: loading 3s 300ms infinite ease-in-out;
}

.cs-loader-inner label:nth-child(2) {
	-webkit-animation: loading 3s 400ms infinite ease-in-out;
	animation: loading 3s 400ms infinite ease-in-out;
}

.cs-loader-inner label:nth-child(1) {
	-webkit-animation: loading 3s 500ms infinite ease-in-out;
	animation: loading 3s 500ms infinite ease-in-out;
}

.modalBackground {
	position: fixed;
	left: 0;
	top: 0;
	background-color: #000000;
	width: 100%;
	height: 100%;
	opacity: .75;
}

.modalWindowWrapper {
	display: flex;
	align-items: center;
	justify-content: center;
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	z-index: 9999;
}

.modalWindow {
	overflow-y: scroll;
}

.modalWindowWrapper .modalTitle {
	background-color: #188272;
	text-align: center;
	color: #ffffff;
	border-top-left-radius: 5px;
	border-top-right-radius: 5px;
	font-size: 150%;
	padding: 10px 10px;
	font-weight: 900;
}

.modalWindowWrapper .modalWindow {
	opacity: 1;
	width: 98%;
	max-height: 90%;
	background-color: #ffffff;
	padding: 0;
	border-radius: 5px;
}

.modalWindowWrapper .modalContent {
	padding: 40px;
}

.hidden {
	visibility: hidden;
}

@media only screen and (min-width: 801px) {
	.modalWindowWrapper .modalWindow {
		max-width: 600px;
	}
}

#toastMain {
	position: fixed;
	bottom: 0px;
	left: 50%;
	width: 400px;
	margin-left: -200px;
	z-index: 9999999999;
	text-align: center;
}

.toastItem {
	font-size: 100%;
	transition: all 1s ease-out;
	height: 0px;
	overflow: hidden;
	background-color: #ffffff;
	border: 1px solid black;
	margin: 0;
}

.toastErrorItem {
	font-size: 100%;
	transition: all 1s ease-out;
	height: 0px;
	overflow: hidden;
	background-color: red;
	border: 1px solid black;
	margin: 0;
}

.toastItem.open {
	border: 1px solid black;
	height: 40px;
}

.toastErrorItem.open {
	border: 1px solid black;
	height: 40px;
}

.signature-pad {
	position: relative;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-ms-flex-direction: column;
	flex-direction: column;
	font-size: 10px;
	width: 100%;
	height: 75%;
	max-width: 700px;
	max-height: 460px;
	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;
	padding: 16px;
}

	.signature-pad::before,
	.signature-pad::after {
		position: absolute;
		z-index: -1;
		content: "";
		width: 40%;
		height: 10px;
		bottom: 10px;
		background: transparent;
		box-shadow: 0 8px 12px rgba(0, 0, 0, 0.4);
	}

	.signature-pad::before {
		left: 20px;
		-webkit-transform: skew(-3deg) rotate(-3deg);
		transform: skew(-3deg) rotate(-3deg);
	}

	.signature-pad::after {
		right: 20px;
		-webkit-transform: skew(3deg) rotate(3deg);
		transform: skew(3deg) rotate(3deg);
	}

.signature-pad--body {
	position: relative;
	-webkit-box-flex: 1;
	-ms-flex: 1;
	flex: 1;
	border: 1px solid #f4f4f4;
}

	.signature-pad--body
	canvas {
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		border-radius: 4px;
		box-shadow: 0 0 5px rgba(0, 0, 0, 0.02) inset;
	}

.signature-pad--footer {
	color: #C3C3C3;
	text-align: center;
	font-size: 1.2em;
	margin-top: 8px;
}

.signature-pad--actions {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between;
	margin-top: 8px;
}

#github img {
	border: 0;
}

@media (max-width: 940px) {
	#github img {
		width: 90px;
		height: 90px;
	}
}

.select-wrapper {
	margin: auto;
	max-width: 600px;
	width: calc(100% - 40px);
}

.select-pure__select {
	align-items: center;
	background: #f9f9f8;
	border-radius: 4px;
	border: 1px solid rgba(0, 0, 0, 0.15);
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
	box-sizing: border-box;
	color: #363b3e;
	cursor: pointer;
	display: flex;
	font-size: 16px;
	font-weight: 500;
	justify-content: left;
	min-height: 44px;
	padding: 5px 10px;
	position: relative;
	transition: 0.2s;
	width: 100%;
	border-radius:30px;
}

.select-pure__options {
	border-radius: 4px;
	border: 1px solid rgba(0, 0, 0, 0.15);
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
	box-sizing: border-box;
	color: #363b3e;
	display: none;
	left: 0;
	max-height: 221px;
	overflow-y: scroll;
	position: absolute;
	top: 50px;
	width: 100%;
	z-index: 5;
}

.select-pure__select--opened .select-pure__options {
	display: block;
}

.select-pure__option {
	background: #fff;
	border-bottom: 1px solid #e4e4e4;
	box-sizing: border-box;
	height: 44px;
	line-height: 25px;
	padding: 10px;
}

.select-pure__option--selected {
	color: #e4e4e4;
	cursor: initial;
	pointer-events: none;
}

.select-pure__option--hidden {
	display: none;
}

.select-pure__selected-label {
	background: #5e6264;
	border-radius: 4px;
	color: #fff;
	cursor: initial;
	display: inline-block;
	margin: 5px 10px 5px 0;
	padding: 3px 7px;
}

	.select-pure__selected-label:last-of-type {
		margin-right: 0;
	}

	.select-pure__selected-label i {
		cursor: pointer;
		display: inline-block;
		margin-left: 7px;
	}

		.select-pure__selected-label i:hover {
			color: #e4e4e4;
		}

.select-pure__autocomplete {
	background: #f9f9f8 !important;
	border-bottom: 1px solid #e4e4e4 !important;
	border-left: none !important;
	border-right: none !important;
	border-top: none !important;
	box-sizing: border-box !important;
	font-size: 16px !important;
	outline: none !important;
	padding: 10px !important;
	width: 100% !important;
	border-radius: 0px !important;
	margin: 0px !important;
}

.chat-textarea-container {
	position: relative;
	display: inline-block;
}

#txtSendChat {
	padding-right: 30px; /* add space for the icon */
	box-sizing: border-box;
}

.chat-attachment-icon {
	position: absolute;
	right: 8px;
	top: 8px;
	cursor: pointer;
	font-size: 18px;
	color: #555;
}
/* chat history*/
.chat-message {
	font-size: 1em;
	color: #333;
	white-space: pre-wrap; /* This is the key */
}
.chat-bubble {
	background-color: #e0f7ff;
	border-radius: 12px;
	padding: 10px 14px;
	margin-bottom: 8px;
	width: 100%;
	box-sizing: border-box;
	word-wrap: break-word;
}

.chat-meta {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 4px;
	font-size: 0.9em;
}

.chat-name {
	font-weight: bold;
	color: #0077cc;
}

.chat-time {
	font-size: 0.8em;
	color: #888;
	white-space: nowrap;
}
#chatDisplay {
	flex: 1 1 auto;
	min-height: 150px;
	max-height: 50vh; /* 50% of the viewport height */
	overflow-y: auto;
	padding: 10px;
	border: 1px solid #ccc;
	border-radius: 8px;
	background-color: #f9f9f9;
	font-family: sans-serif;
	box-sizing: border-box;
}

.chat-attachment {
	margin-top: 6px;
	font-size: 0.9em;
}


.chat-attachment-preview {
	max-width: 120px;
	max-height: 120px;
	border: 1px solid #ccc;
	border-radius: 4px;
	display: block;
}

.notification-wrapper {
	position: relative;
	display: inline-block;
}

.badge {
	position: absolute;
	top: -4px;
	right: -4px;
	padding: 2px 6px;
	border-radius: 50%;
	background-color: red;
	color: white;
	font-size: 12px;
	font-weight: bold;
	display: none; /* hidden until > 0 */
}

/* Main container for each clickable row */
.dsmChatRow {
	display: grid !important; /* override any flex rules */
	grid-template-columns: 1fr auto; /* left flexible, right auto */
	column-gap: 12px;
	row-gap: 2px; /* space between the two lines */
	align-items: center;
}

	/* 1) Location (top-left) */
	.dsmChatRow > div:nth-child(1) {
		grid-column: 1;
		grid-row: 1;
	}

	/* 2) Date (top-right) */
	.dsmChatRow > div:nth-child(2) {
		grid-column: 2;
		grid-row: 1;
		text-align: right;
		white-space: nowrap; /* keep date on one line */
	}

	/* 3) Message count (bottom-left) */
	.dsmChatRow > div:nth-child(3) {
		grid-column: 1;
		grid-row: 2;
		opacity: 0.9; /* optional subtlety */
		font-size: 0.95em; /* optional slightly smaller */
	}

	/* 4) Minutes (bottom-right) */
	.dsmChatRow > div:nth-child(4) {
		grid-column: 2;
		grid-row: 2;
		text-align: right;
		white-space: nowrap; /* keep minutes on one line */
	}

	/* Optional: tighter vertical rhythm for this block only */
	.dsmChatRow > div {
		padding: 2px 0;
	}

.lastMessage {
	display: flex;
	align-items: center;
}

	.lastMessage > :first-child {
		flex: 1; /* take remaining space */
		min-width: 0; /* allow shrinking (important for long text) */
	}

	.lastMessage .material-icons {
		margin-left: 0; /* not required if first child flexes */
		cursor: pointer;
	}

.chat-find-tools {
	display: flex;
	gap: 8px;
	align-items: center;
}

	.chat-find-tools .material-icons {
		cursor: pointer;
		user-select: none;
	}

	.chat-find-tools .find-count {
		font-weight: 600;
		font-size: 12px;
		opacity: .8;
	}

.chat-highlight {
	background: #ffeb3b;
	padding: 0 .05em;
}

.chat-highlight--active {
	background: #ffc107;
}
.italic {
	font-style: italic;
}


.loadingWindow {
	z-index: 999999;
}

.cs-loader {
	position: fixed;
	/*z-index: 999999999;*/
	opacity: 1;
}

.cs-loader-inner {
	transform: translateX(-50%);
	top: 50%;
	left: 50%;
	position: fixed;
	width: calc(100% - 200px);
	color: #FFFFFF;
	text-align: center;
}

	.cs-loader-inner label {
		font-size: 20px;
		opacity: 0;
		display: inline-block;
	}

@keyframes loading {
	0% {
		opacity: 0;
		transform: translateX(-300px);
	}

	33% {
		opacity: 1;
		transform: translateX(0px);
	}

	66% {
		opacity: 1;
		transform: translateX(0px);
	}

	100% {
		opacity: 0;
		transform: translateX(300px);
	}
}

@-webkit-keyframes loading {
	0% {
		opacity: 0;
		-webkit-transform: translateX(-300px);
	}

	33% {
		opacity: 1;
		-webkit-transform: translateX(0px);
	}

	66% {
		opacity: 1;
		-webkit-transform: translateX(0px);
	}

	100% {
		opacity: 0;
		-webkit-transform: translateX(300px);
	}
}

.cs-loader-inner label:nth-child(6) {
	-webkit-animation: loading 3s infinite ease-in-out;
	animation: loading 3s infinite ease-in-out;
}

.cs-loader-inner label:nth-child(5) {
	-webkit-animation: loading 3s 100ms infinite ease-in-out;
	animation: loading 3s 100ms infinite ease-in-out;
}

.cs-loader-inner label:nth-child(4) {
	-webkit-animation: loading 3s 200ms infinite ease-in-out;
	animation: loading 3s 200ms infinite ease-in-out;
}

.cs-loader-inner label:nth-child(3) {
	-webkit-animation: loading 3s 300ms infinite ease-in-out;
	animation: loading 3s 300ms infinite ease-in-out;
}

.cs-loader-inner label:nth-child(2) {
	-webkit-animation: loading 3s 400ms infinite ease-in-out;
	animation: loading 3s 400ms infinite ease-in-out;
}

.cs-loader-inner label:nth-child(1) {
	-webkit-animation: loading 3s 500ms infinite ease-in-out;
	animation: loading 3s 500ms infinite ease-in-out;
}

.modalBackground {
	position: fixed;
	left: 0;
	top: 0;
	background-color: #000000;
	width: 100%;
	height: 100%;
	opacity: .75;
}

.modalWindowWrapper {
	display: flex;
	align-items: center;
	justify-content: center;
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	z-index: 9999;
}
	.modalWindow{
		overflow-y: scroll;
	}

	.modalWindowWrapper .modalTitle {
		background-color: #188272;
		text-align: center;
		color: #ffffff;
		border-top-left-radius: 5px;
		border-top-right-radius: 5px;
		font-size: 150%;
		padding: 10px 10px;
		font-weight: 900;
	}

	.modalWindowWrapper .modalWindow {
		opacity: 1;
		width: 98%;
		max-height: 90%;
		background-color: #ffffff;
		padding: 0;
		border-radius: 5px;
	}

	.modalWindowWrapper .modalContent {
		padding: 40px;
	}

.hidden {
	visibility: hidden;
}

@media only screen and (min-width: 801px){
	.modalWindowWrapper .modalWindow {
		max-width: 600px;
	}
}

#toastMain {
	position: fixed;
	bottom: 0px;
	left: 50%;
	width: 400px;
	margin-left: -200px;
	z-index: 9999999999;
	text-align: center;
}

.toastItem {
	font-size: 100%;
	transition: all 1s ease-out;
	height: 0px;
	overflow: hidden;
	background-color: #ffffff;
	border: 1px solid black;
	margin: 0;
}

.toastErrorItem {
	font-size: 100%;
	transition: all 1s ease-out;
	height: 0px;
	overflow: hidden;
	background-color: red;
	border: 1px solid black;
	margin: 0;
}

.toastItem.open {
	border: 1px solid black;
	height: 40px;
}

.toastErrorItem.open {
	border: 1px solid black;
	height: 40px;
}

.signature-pad {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  font-size: 10px;
  width: 100%;
  height: 75%;
  max-width: 700px;
  max-height: 460px;
  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;
  padding: 16px;
}

.signature-pad::before,
.signature-pad::after {
  position: absolute;
  z-index: -1;
  content: "";
  width: 40%;
  height: 10px;
  bottom: 10px;
  background: transparent;
  box-shadow: 0 8px 12px rgba(0, 0, 0, 0.4);
}

.signature-pad::before {
  left: 20px;
  -webkit-transform: skew(-3deg) rotate(-3deg);
          transform: skew(-3deg) rotate(-3deg);
}

.signature-pad::after {
  right: 20px;
  -webkit-transform: skew(3deg) rotate(3deg);
          transform: skew(3deg) rotate(3deg);
}

.signature-pad--body {
  position: relative;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  border: 1px solid #f4f4f4;
}

.signature-pad--body
canvas {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  border-radius: 4px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.02) inset;
}

.signature-pad--footer {
  color: #C3C3C3;
  text-align: center;
  font-size: 1.2em;
  margin-top: 8px;
}

.signature-pad--actions {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  margin-top: 8px;
}

#github img {
  border: 0;
}

@media (max-width: 940px) {
  #github img {
    width: 90px;
    height: 90px;
  }
}

.reporting-page {
	--reporting-navy: rgb(24, 54, 98);
	--reporting-blue: #2195d1;
	--reporting-green: #46b05b;
	--reporting-border: #dce3ea;
	--reporting-muted: #647180;
	--reporting-surface: #ffffff;
	--reporting-background: #f4f7f9;
	box-sizing: border-box;
	max-width: 1600px;
	margin: 0 auto;
	padding: 16px;
	color: #26333d;
}

.reporting-page *, .reporting-page *::before, .reporting-page *::after { box-sizing: border-box; }
.reporting-hero { display: flex; justify-content: space-between; align-items: end; margin: 8px 0 18px; }
.reporting-hero h1 { margin: 0; color: var(--reporting-navy); font-size: 160%; font-weight: 400; }
.reporting-eyebrow { margin: 0 0 3px; color: var(--reporting-green); font-size: .75rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.reporting-subtitle, .reporting-panel-heading p, .reporting-results-toolbar p { margin: 4px 0 0; color: var(--reporting-muted); }
.reporting-panel { margin-bottom: 16px; border: 1px solid var(--reporting-border); border-radius: 14px; background: var(--reporting-surface); box-shadow: 0 5px 18px rgba(24, 54, 98, .07); }
.reporting-filters { position: relative; z-index: 100; overflow: visible; padding: 18px; }
.reporting-panel-heading, .reporting-results-toolbar { display: flex; justify-content: space-between; gap: 16px; align-items: center; }
.reporting-panel h2 { margin: 0; color: var(--reporting-navy); font-size: 1.15rem; }
.reporting-filter-grid { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(4, minmax(150px, 1fr)); gap: 14px; margin-top: 16px; }
.reporting-field { position: relative; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.reporting-field:focus-within { z-index: 110; }
.reporting-field-wide { grid-column: span 2; }
.reporting-field span { color: var(--reporting-navy); font-size: .84rem; font-weight: 700; }
.reporting-field input, .reporting-field select, .reporting-search input { width: 100%; min-height: 44px; border: 1px solid #bcc8d2; border-radius: 8px; background: white; padding: 9px 11px; color: #26333d; font: inherit; }
.reporting-field input:focus, .reporting-field select:focus, .reporting-search input:focus { outline: 3px solid rgba(33, 149, 209, .18); border-color: var(--reporting-blue); }
.reporting-lookup { position: relative; width: 100%; min-width: 0; }
.reporting-lookup-results { position: absolute; z-index: 120; top: calc(100% + 5px); left: 0; width: 100%; max-height: 260px; overflow-y: auto; border: 1px solid #bcc8d2; border-radius: 8px; background: white; box-shadow: 0 10px 28px rgba(24,54,98,.18); }
.reporting-lookup-results button { display: block; width: 100%; min-height: 44px; border: 0; border-bottom: 1px solid #edf0f2; background: white; padding: 10px 12px; color: #26333d; font: inherit; text-align: left; cursor: pointer; }
.reporting-lookup-results button:hover, .reporting-lookup-results .reporting-lookup-active { background: #edf7fb; color: var(--reporting-navy); }
.reporting-lookup-empty { padding: 12px; color: var(--reporting-muted); }
.reporting-actions { display: flex; justify-content: flex-end; margin-top: 16px; }
.reporting-primary-button, .reporting-secondary-button, .reporting-text-button { min-height: 42px; border-radius: 8px; padding: 9px 16px; font: inherit; font-weight: 700; cursor: pointer; }
.reporting-primary-button { min-width: 150px; border: 1px solid var(--reporting-green); background: var(--reporting-green); color: white; }
.reporting-secondary-button { border: 1px solid #b9c5cf; background: white; color: var(--reporting-navy); }
.reporting-text-button { border: 0; background: transparent; color: var(--reporting-blue); }
.reporting-results { position: relative; z-index: 1; overflow: hidden; }
.reporting-results-toolbar { padding: 16px 18px; border-bottom: 1px solid var(--reporting-border); }
.reporting-toolbar-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.reporting-search { display: flex; align-items: center; min-width: min(280px, 35vw); position: relative; }
.reporting-search .material-icons { position: absolute; left: 10px; color: #71808c; font-size: 20px; }
.reporting-search input { padding-left: 36px; }
.reporting-grid { width: 100%; height: min(68vh, 760px); min-height: 440px; --ag-odd-row-background-color: rgb(240, 241, 243); --ag-row-hover-color: #e8f4fa; }
.reporting-grid .ag-row-even { background-color: rgb(255, 255, 255); }
.reporting-grid .ag-row-odd { background-color: rgb(240, 241, 243); }
.reporting-grid .ag-row-hover { background-color: #e8f4fa; }
.reporting-grid .ag-filter-filter .ag-input-field-input { padding-left: 36px !important; }
.reporting-grid .ag-filter-filter .ag-input-field-before-start { left: 11px; z-index: 1; pointer-events: none; }
.reporting-empty { min-height: 360px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; color: var(--reporting-muted); text-align: center; padding: 30px; }
.reporting-empty .material-icons { color: #9fadb8; font-size: 48px; }
.reporting-export-menu { position: relative; }
.reporting-export-menu summary { list-style: none; display: flex; align-items: center; }
.reporting-export-menu summary::-webkit-details-marker { display: none; }
.reporting-export-menu > div { position: absolute; z-index: 20; top: calc(100% + 6px); right: 0; min-width: 190px; padding: 6px; border: 1px solid var(--reporting-border); border-radius: 9px; background: white; box-shadow: 0 10px 28px rgba(24,54,98,.18); }
.reporting-export-menu button { width: 100%; border: 0; border-radius: 6px; background: transparent; padding: 10px; text-align: left; cursor: pointer; }
.reporting-export-menu button:hover { background: var(--reporting-background); }
.reporting-thumbnail { width: 72px; height: 48px; object-fit: cover; border-radius: 6px; vertical-align: middle; cursor: zoom-in; }
.reporting-boolean-cell { text-align: center; }
.reporting-boolean { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; font-size: 20px; font-weight: 800; line-height: 1; }
.reporting-boolean-yes { color: #16733a; background: #e5f6eb; }
.reporting-boolean-no { color: #b42318; background: #fde8e7; }
.reporting-boolean-filter { padding: 12px; min-width: 180px; }
.reporting-boolean-filter select { width: 100%; min-height: 42px; padding: 8px 34px 8px 10px; border: 1px solid #bdc9d7; border-radius: 7px; background-color: #fff; color: #182b49; font: inherit; }
.reporting-detail-dialog { width: min(620px, calc(100% - 24px)); max-height: 86vh; border: 0; border-radius: 14px; padding: 0; box-shadow: 0 18px 60px rgba(0,0,0,.3); }
.reporting-detail-dialog::backdrop { background: rgba(10,25,40,.5); }
.reporting-detail-header { position: sticky; top: 0; display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid var(--reporting-border); background: white; }
.reporting-detail-header h2 { margin: 0; color: var(--reporting-navy); }
.reporting-detail-header button { border: 0; background: transparent; cursor: pointer; }
.reporting-detail-body { padding: 8px 18px 18px; }
.reporting-detail-row { display: grid; grid-template-columns: minmax(110px, 35%) 1fr; gap: 12px; padding: 10px 0; border-bottom: 1px solid #edf0f2; }
.reporting-detail-label { color: var(--reporting-muted); font-weight: 700; }
.reporting-detail-image { max-width: 100%; max-height: 320px; border-radius: 8px; }
.reporting-detail-action { display: block; margin: 0 18px 18px; width: calc(100% - 36px); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

@media (max-width: 900px) {
	.reporting-filter-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.reporting-results-toolbar { align-items: flex-start; }
	.reporting-toolbar-actions { flex-wrap: wrap; }
	.reporting-search { flex: 1 1 100%; min-width: 100%; }
}

@media (max-width: 600px) {
	.reporting-page { padding: 10px max(10px, env(safe-area-inset-right)) calc(14px + env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left)); }
	.reporting-panel { border-radius: 11px; }
	.reporting-filters { padding: 14px; }
	.reporting-filter-grid { grid-template-columns: 1fr; gap: 12px; }
	.reporting-field-wide { grid-column: auto; }
	.reporting-actions, .reporting-primary-button { width: 100%; }
	.reporting-panel-heading, .reporting-results-toolbar { align-items: flex-start; }
	.reporting-results-toolbar { flex-direction: column; padding: 14px; }
	.reporting-toolbar-actions { width: 100%; justify-content: stretch; }
	.reporting-toolbar-actions > button, .reporting-export-menu { flex: 1; }
	.reporting-export-menu summary { justify-content: center; }
	.reporting-grid { height: 62vh; min-height: 380px; }
	.reporting-detail-dialog { margin: auto 0 0; width: 100%; max-width: none; max-height: 88vh; border-radius: 16px 16px 0 0; }
	.reporting-detail-row { grid-template-columns: 1fr; gap: 3px; }
}