html {
	height: 100%;
}

body {
	background: -moz-linear-gradient(top, rgba(125, 185, 232, 0) 0, rgba(51, 122, 183, 1) 100%);
	background: -webkit-linear-gradient(top, rgba(125, 185, 232, 0) 0, rgba(51, 122, 183, 1) 100%);
	background: linear-gradient(to bottom, rgba(125, 185, 232, 0) 0, rgba(51, 122, 183, 1) 100%);
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	overscroll-behavior-y: contain;
	-webkit-overflow-scrolling: touch;
	overflow-x: hidden;
}

.navbar-static-top {
	-moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
	-webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
	background-color: #fff;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
	margin-left: 3px;
	margin-right: 3px;
	margin-bottom: 5px;
	padding-top: 5px;
	position: relative;
}

.breadcrumb {
	margin: 0 !important;
	padding: 8px 5px 5px 5px !important;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: flex-end;
}

	.breadcrumb > li + li:before {
		padding: 0 0 0 10px !important;
	}

@media only screen and (max-width: 1024px) {
	.breadcrumb > li + li:before {
		visibility: hidden;
		padding: 0 0 0 10px !important;
	}
}

.container {
	margin-bottom: 3px;
	padding-left: 0;
	padding-right: 0;
	width: 100%;
	margin-left: auto;
	margin-right: auto;
}

@media only screen and (max-width: 1024px) {
	.container {
		padding-left: 3px !important;
		padding-right: 3px !important;
	}
}

.row {
	margin-left: 0 !important;
	margin-right: 0 !important;
}

.scrollable-panel.panel {
	height: 100%;
	overflow: hidden;
	display: flex;
	flex-direction: column;
}

	.scrollable-panel.panel .panel-body {
		overflow-y: auto;
	}

#idView {
	margin: 0;
	padding: 0;
	flex: 1;
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

#idDashboard {
	margin: 0;
	overflow: hidden;
	height: 100%;
	display: flex;
	flex-direction: column;
}

	#idDashboard .panel-body {
		overflow-x: hidden;
		overflow-y: auto;
		margin-bottom: 10px;
	}

.glyphicon {
	color: #0f4573;
}

.dropdown-menu {
	margin-top: 0;
}

.dropdown:hover .dropdown-menu {
	display: block;
}

footer {
	color: white;
	margin-right: 5px;
}

.col-lg-fixed {
	min-height: 1px;
	position: relative;
}

#idCallHistoryBox {
	border: 1px solid #337ab7;
	border-radius: 5px;
	height: 71vh;
	padding: 5px;
}

#idUnansweredCallsBox {
	border: 1px solid #337ab7;
	border-radius: 5px;
	height: 71vh;
	padding: 5px;
}

#idCallHistory {
	margin: 0 !important;
	padding: 0 !important;
	flex: 1;
}

#idNewClaims {
	margin: 0 !important;
	padding: 0 !important;
	flex: 1;
	overflow: hidden;
}

#idAddressBook {
	margin: 0 !important;
	padding: 0 !important;
	flex: 1;
	overflow: hidden;
}

#idCallQueue {
	margin: 0 !important;
	padding: 0 !important;
	flex: 1;
}

#idOnlineUsers {
	margin: 0 !important;
	padding: 0 !important;
	flex: 1;
}

	#idOnlineUsers .panel {
		height: 100%;
		margin: 0;
	}

#idCallHistory .panel-body {
	padding: 15px;
}

#idCase {
	flex: 0 0 auto;
}

#idCases {
	flex: 0 0 auto;
}

#idNewClaims .panel-body {
	padding: 5px 10px 10px 10px;
	height: 100%;
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

#idAddressBook .panel-body {
	padding: 15px;
	height: 100%;
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

#idCallQueue .panel-body {
	padding: 15px;
}

#idCallHistory .panel {
	height: 100%;
	margin: 0;
}

#idNewClaims .panel {
	height: 100%;
	margin: 0;
}

#idAddressBook .panel {
	height: 100%;
	margin: 0;
}

#idUnansweredCalls {
	margin: 0 !important;
	padding: 0 !important;
	flex: 1;
}

	#idUnansweredCalls .panel {
		height: 100%;
		margin: 0;
	}

#idCallQueue .panel {
	height: 100%;
}

#idDescription {
	padding: 0;
}

#idVideo {
	-moz-box-shadow: 0px 0px 10px 4px rgba(119, 119, 119, 0.75);
	-webkit-box-shadow: 0px 0px 10px 4px rgba(119, 119, 119, 0.75);
	border: 2px solid black;
	border-radius: 6px;
	box-shadow: 0px 0px 10px 4px rgba(119, 119, 119, 0.75);
	margin: 2px 10px 0 0;
	min-height: 1px;
	padding: 5px;
	flex: 1;
	display: flex;
	flex-direction: column;
}

#idVideoContainer {
	position: relative;
	width: 100%;
	height: 100%;
}

#idVideoControl {
	width: 100%;
	height: 100%;
}

#idThumbnails {
	margin: 0;
	padding: 0;
}

	#idThumbnails .panel {
		margin-bottom: 0;
	}

	#idThumbnails .zoombox img {
		margin: 3px;
		max-width: 100%;
		max-height: 290px;
	}

hr {
	border-top: 1px dashed #bbb;
	margin-left: -15px;
	margin-right: -15px;
	margin-top: 0;
}

input[type="text"] {
	width: 100%;
}

input[readonly] {
	background-color: #fff !important;
}

select {
	width: 100%;
	max-width: 300px;
}

.text-area {
	max-height: 600px;
	max-width: 1000px;
}

input[type="password"] {
	width: 100%;
	padding-left: 10px;
}

input[type="number"] {
	-moz-appearance: textfield;
	text-align: center;
	width: 100px;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

input[type="datetime"] {
	width: 100px;
}

#idLoading[src=""] {
	display: none;
}

#idLoading {
	display: inline-block;
	height: auto;
	margin: 0;
	padding-top: 3px;
	vertical-align: middle;
	width: auto;
}

#idError {
	font-size: 16px;
	font-weight: normal;
	padding-top: 15px;
}

.no-bold {
	font-weight: normal;
}

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

.align-top {
	vertical-align: top !important;
}

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

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

.required-field {
	color: red;
	font-size: 1.2em;
}

.validation-summary-errors {
	color: red;
	text-align: left;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.validationMessage {
	color: red;
}

.panel {
	-moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
	-webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
	background-color: #fff;
	border: 2px solid #888;
	border-radius: 8px;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
	position: relative;
}

	.panel .panel-heading {
		padding: 5px 15px !important;
	}

	.panel:before, .panel:after {
		-moz-border-radius: 100px/10px;
		-moz-box-shadow: 0 0 20px rgba(0, 0, 0, 0.8);
		-webkit-box-shadow: 0 0 20px rgba(0, 0, 0, 0.8);
		border-radius: 100px/10px;
		bottom: 10px;
		box-shadow: 0 0 20px rgba(0, 0, 0, 0.8);
		content: "";
		left: 0;
		position: absolute;
		right: 0;
		top: 10px;
		z-index: -1;
	}

	.panel:after {
		-moz-transform: skew(8deg) rotate(3deg);
		-ms-transform: skew(8deg) rotate(3deg);
		-o-transform: skew(8deg) rotate(3deg);
		-webkit-transform: skew(8deg) rotate(3deg);
		left: auto;
		right: 10px;
		transform: skew(8deg) rotate(3deg);
	}

#idTabControl {
	height: 100%;
	display: flex;
	flex-direction: column;
	margin: 0;
	text-align: center;
	overflow: hidden;
}

@media only screen and (min-width: 768px) {
	#idTabControl ul.nav.nav-tabs li {
		width: 200px;
	}
}

#idTabControl ul.nav.nav-tabs li h4 {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
}

	#idTabControl ul.nav.nav-tabs li h4 span {
		margin: 3px 0 0 10px;
	}

#idTabControl .panel {
	-moz-box-shadow: none;
	-webkit-box-shadow: none;
	background-color: #fff;
	border-bottom: 2px solid #888;
	border-left: 2px solid #888;
	border-radius: 0 8px 8px 8px;
	border-right: 2px solid #888;
	border-top: 0;
	box-shadow: none;
	margin-top: -1px;
	position: relative;
}

	#idTabControl .panel:before, .panel:after {
		top: 0;
	}

#idTabControl .tab-content {
	flex: 1;
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

#idTabControl .nav.nav-tabs {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
}

#idCallTabControl {
	margin: 0;
	flex: 1;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	padding-top: 10px;
}

	#idCallTabControl .nav {
		border-bottom: 1px solid #888;
		margin-right: 6px;
	}

	#idCallTabControl .tab-content {
		flex: 1;
		display: flex;
		flex-direction: column;
		overflow: hidden;
	}

		#idCallTabControl .tab-content > .tab-pane {
			overflow: hidden;
		}

			#idCallTabControl .tab-content > .tab-pane.active {
				flex: 1;
				display: flex;
				flex-direction: column;
			}

		#idCallTabControl .tab-content > div > .panel {
			flex: 1;
			display: flex;
			flex-direction: column;
			margin-bottom: 0;
			overflow: hidden;
		}

			#idCallTabControl .tab-content > div > .panel > .panel-body {
				flex: 1;
				display: flex;
				flex-direction: column;
				overflow-x: hidden;
				overflow-y: auto;
			}

#idChat > .panel, #idDescription > .panel, #idThumbnails .panel, #idPhoto > .panel, #idGpsPosition > .panel, #idRecording > .panel {
	background-color: #fff;
	border-bottom: 2px solid #888;
	border-left: 2px solid #888;
	border-radius: 0 8px 8px 8px;
	border-right: 2px solid #888;
	border-top: none;
	position: relative;
	box-shadow: none;
}

#idChat > .panel, #idDescription > .panel, #idGpsPosition > .panel {
	top: 0;
}

.nav-tabs li:before, .nav-tabs li:after {
	-moz-box-shadow: 0 0 20px rgba(0, 0, 0, 0.8);
	-webkit-box-shadow: 0 0 20px rgba(0, 0, 0, 0.8);
	bottom: 0;
	box-shadow: 0 0 20px rgba(0, 0, 0, 0.8);
	content: "";
	left: 5px;
	position: absolute;
	right: 5px;
	top: 10px;
	z-index: -1;
}

.nav-tabs > li {
	display: flex;
	flex-direction: column;
}

.nav-tabs li a {
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
	background: #337ab7;
	border-bottom: none;
	border-left: 2px solid #888;
	border-radius: 8px 8px 0 0;
	border-right: 2px solid #888;
	border-top: 2px solid #888;
	color: white;
	position: relative;
	padding: 5px 15px 5px 15px;
}

.nav-tabs > li > a:hover {
	background: white;
	border-left: 2px solid #888;
	border-right: 2px solid #888;
	border-top: 2px solid #888;
	color: #337ab7;
}

.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
	background: white;
	border-left: 2px solid #888;
	border-right: 2px solid #888;
	border-top: 2px solid #888;
	color: #337ab7;
}

#idCategoriesTabControl .nav-tabs > li > a,
#idCategoriesTabControl .nav-tabs > li:hover > a
#idCategoriesTabControl .nav-tabs > li.active > a,
#idCategoriesTabControl .nav-tabs > li.active > a:hover,
#idCategoriesTabControl .nav-tabs > li.active > a:focus {
	padding: 5px 15px 5px 15px;
}

#idCallTabControl .nav-tabs > li > a,
#idCallTabControl .nav-tabs > li:hover > a
#idCallTabControl .nav-tabs > li.active > a,
#idCallTabControl .nav-tabs > li.active > a:hover,
#idCallTabControl .nav-tabs > li.active > a:focus {
	padding: 5px 15px 5px 15px;
}

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

.col-centered {
	display: inline-block;
	float: none;
	margin-right: -4px;
	vertical-align: middle;
}

.col-fixed {
	width: 150px;
}

.col-fixed-small {
	display: inline-block;
	margin-left: 10px;
	width: 130px;
}

.page-count {
	width: 72px;
}

.navbar-header {
	display: flex;
	flex-direction: row;
	align-items: flex-end;
}

.navbar-brand {
	font-size: 24px;
	line-height: 16px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 0 15px;
	height: 40px;
}

#idPendingCalls {
	-ms-border-radius: 5px;
	background: #fcf8e3;
	border: 1px solid #faebcc;
	border-radius: 5px;
	color: #8a6d3b;
	display: inline-block;
	font-size: 14px;
	font-style: italic;
	line-height: 17px;
	margin-top: -3px;
	padding: 3px 5px 3px 5px;
	vertical-align: top;
}

.modal {
	overflow-y: auto;
	text-align: center;
}

.modal-dialog {
	display: inline-block;
	margin-top: 200px;
	margin-left: 0;
	margin-right: 0;
	text-align: left;
	vertical-align: middle;
	width: 350px;
}

#idErrorMessageBox .modal-dialog {
		width: auto;
	}

	.thumbnails-horizontal {
		/*max-height: 500px;*/
		overflow-y: auto;
		white-space: nowrap;
	}

	.thumbnails-vertical {
		height: 100%;
		overflow-y: auto;
	}

	.thumbnail-item {
		display: flex;
		flex-direction: column;
		width: calc(100% / 5.15);
		border: 1px solid #337ab7;
		background: #e9f1f8;
		margin-right: 10px;
		margin-bottom: 10px;
		box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
	}

	.thumbnail-item-image {
		flex: 1;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 3px;
	}

	.thumbnail-item-details {
		padding-top: 5px;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		font-size: 14px;
		font-weight: bold;
		margin: 0 3px 0 3px;
	}

		.thumbnail-item-details .time-details {
		}

		.thumbnail-item-details .gps-details {
		}

	.panel-body {
		padding: 10px;
	}

		.panel-body .thumbnails-wrapper {
			padding: 5px;
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;
			align-items: stretch;
			min-height: 400px;
		}

			.panel-body .thumbnails-wrapper .thumbnail-item-image a {
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: center;
			}

				.panel-body .thumbnails-wrapper .thumbnail-item-image a img {
					display: block !important;
				}

	#idSelectButton, #idDeleteButton {
		-ms-border-radius: 10px;
		border-radius: 10px;
		cursor: pointer;
		height: 32px;
		padding: 2px;
		position: absolute;
		width: 32px;
		z-index: 1000;
	}

		#idSelectButton:hover {
			background-color: #87ceeb;
		}

		#idDeleteButton:hover {
			background-color: red;
		}

	.align-middle {
		display: inline-block;
		vertical-align: middle;
	}

	#idSnapshotButton {
		border-radius: 10px;
		cursor: pointer;
		width: 40px;
		height: 40px;
		margin: 0 0 0 0;
		opacity: 0.5;
		padding: 6px 6px;
		position: absolute;
		z-index: 1000;
	}

		#idSnapshotButton:hover {
			background-color: #337ab7;
			opacity: 1;
		}

		#idSnapshotButton.window-mode {
			right: 0;
			top: 0;
		}

		#idSnapshotButton.fullscreen-mode {
			right: 0;
			top: 0;
		}

	#idRecordButton {
		border-radius: 10px;
		cursor: pointer;
		width: 40px;
		height: 40px;
		margin: 0 0 0 0;
		opacity: 0.5;
		padding: 6px 6px;
		position: absolute;
		z-index: 1000;
	}

		#idRecordButton:hover {
			background-color: #337ab7;
			opacity: 1;
		}

		#idRecordButton.window-mode {
			bottom: 0;
			left: calc(100% / 2 - 20px);
		}

		#idRecordButton.fullscreen-mode {
			bottom: 0;
			left: calc(100% / 2 - 20px);
		}

	#idSnapshotLargeButton {
		border-radius: 10px;
		cursor: pointer;
		width: 40px;
		height: 40px;
		margin: 0 0 0 0;
		opacity: 0.5;
		padding: 6px 6px;
		position: absolute;
		z-index: 1000;
	}

		#idSnapshotLargeButton:hover {
			background-color: #337ab7;
			opacity: 1;
		}

		#idSnapshotLargeButton.window-mode {
			right: 60px;
			top: 0;
		}

		#idSnapshotLargeButton.fullscreen-mode {
			right: 60px;
			top: 0;
		}

	#idSnapshotLoading {
		margin: 0 0 0 0;
		position: absolute;
		z-index: 1000;
	}

		#idSnapshotLoading.window-mode {
			right: 0;
			top: 0;
		}

		#idSnapshotLoading.fullscreen-mode {
			right: 0;
			top: 0;
		}

	#idFullscreenButton {
		border-radius: 10px;
		cursor: pointer;
		margin: 0 0 0 0;
		opacity: 0.5;
		padding: 6px 6px;
		position: absolute;
		width: 40px;
		height: 40px;
		z-index: 1000;
	}

		#idFullscreenButton:hover {
			background-color: #337ab7;
			opacity: 1;
		}

		#idFullscreenButton.window-mode {
			right: 0;
			bottom: 0;
		}

		#idFullscreenButton.fullscreen-mode {
			right: 0;
			bottom: 0;
		}

	#idFlashButton {
		border-radius: 10px;
		cursor: pointer;
		height: 48px;
		margin: 0 0 0 0;
		padding: 4px 4px;
		position: absolute;
		z-index: 1000;
	}

		#idFlashButton.window-mode {
			left: 0;
			top: 0;
		}

		#idFlashButton.fullscreen-mode {
			left: 0;
			top: 0;
		}

	.flash-disabled {
		content: url(Images/flash-disabled.png);
	}

	.flash-enabled {
		content: url(Images/flash-enabled.png);
	}


	#idVolumeSliderContainer {
		position: absolute;
		z-index: 1000;
	}

		#idVolumeSliderContainer.window-mode {
			left: 60px;
			bottom: 0;
		}

		#idVolumeSliderContainer.fullscreen-mode {
			left: 60px;
			bottom: 0;
		}

	#idMuteButton {
		border-radius: 10px;
		cursor: pointer;
		height: 48px;
		margin: 0 0 0 0;
		padding: 4px 4px;
		position: absolute;
		z-index: 1000;
	}

		#idMuteButton.window-mode {
			left: 0;
			bottom: 0;
		}

		#idMuteButton.fullscreen-mode {
			left: 0;
			bottom: 0;
		}

	.sound-disabled {
		content: url(Images/sound-disabled.png);
	}

	.sound-enabled {
		content: url(Images/sound-enabled.png);
	}

	#idEndCall img {
		height: 24px;
		width: 24px;
	}

	.checkbox {
		width: 100%;
	}

	.chart-container {
		background: #fff;
	}

	.chart-body {
		height: 400px;
		border-radius: 2px;
		box-shadow: 0 4px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
		margin-bottom: 25px;
		text-align: center;
		vertical-align: middle;
		padding-top: 20px;
	}

		.chart-body:hover {
			box-shadow: 0 2px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
		}

		.chart-body span {
			padding: 20px 0 20px 0;
			font-size: 20px;
			font-weight: bold;
			font-style: italic;
		}

	.chart-loading {
		margin: 135px auto 0 auto;
		height: 50px;
		display: block;
		text-align: center;
		vertical-align: middle;
	}

	#idIceServers td {
		text-align: center;
	}

	@-moz-keyframes fadeIn {
		from {
			opacity: 0.2;
		}
	}

	@-webkit-keyframes fadeIn {
		from {
			opacity: 0.2;
		}
	}

	@keyframes fadeIn {
		from {
			opacity: 0.2;
		}
	}

	.overflow-hidden {
		overflow: hidden !important;
	}

	.flex-1 {
		-webkit-flex: 1;
		-ms-flex: 1;
		-o-flex: 1;
		flex: 1;
	}

	.flex-2 {
		-webkit-flex: 2;
		-ms-flex: 2;
		-o-flex: 2;
		flex: 2;
	}

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

	.flex-col {
		display: flex;
		flex-direction: column;
	}

	.flex-align-center {
		-ms-align-items: center;
		-o-align-items: center;
		-webkit-align-items: center;
		align-items: center;
	}

	.flex-align-end {
		-ms-align-items: flex-end;
		-o-align-items: flex-end;
		-webkit-align-items: flex-end;
		align-items: flex-end;
	}

	.flex-justify-end {
		justify-content: flex-end;
	}

	.flex-justify-center {
		-o-justify-content: center;
		-webkit-justify-content: center;
		justify-content: center;
	}

	.flex-justify-between {
		-o-justify-content: space-between;
		-webkit-justify-content: space-between;
		justify-content: space-between;
	}

	.flex-stretch {
		justify-content: stretch;
	}

	#idGuestCall {
		display: flex;
		flex-direction: column;
		flex: 1;
	}

		#idGuestCall h4 {
			margin: 0;
		}

		#idGuestCall #idLocalVideoControl {
			padding: 0;
			min-width: 100%;
			min-height: 100%;
			width: auto;
			height: auto;
			border-radius: 8px;
		}

		#idGuestCall #idCallEnded {
			color: #ffffff;
			padding-top: 175px;
			border-radius: 8px;
			-moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
			-webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
			box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
		}

		#idGuestCall .call-header {
			padding: 5px 5px 5px 8px;
			color: #fff;
			position: absolute;
			width: 100%;
			z-index: 1000;
			background: transparent;
			border: none;
		}

			#idGuestCall .call-header .btn {
				width: 30px;
				height: 30px;
				padding: 2px;
			}

			#idGuestCall .call-header .navbar-brand {
				color: #888888;
				padding-top: 20px;
			}

		#idGuestCall #idGuestCallLogo {
			color: #fff;
			margin-left: 5px;
		}

	#idCallHeader {
		font-size: 14px;
		margin: 0;
		padding: 0;
		flex: 1;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

		#idCallHeader span {
			padding: 15px;
			border-radius: 4px;
		}

	#idProgress .modal-dialog, #idCapturePopup .modal-dialog {
		margin-top: 150px;
	}

	.placeholder {
		height: 10px;
	}

	.cookie-footer {
		background: #3b4045;
		opacity: 0.75;
		position: fixed;
		left: 0;
		bottom: 0;
		height: 70px;
		width: 100%;
		color: white;
		font-size: 16px;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
	}

		.cookie-footer a {
			margin: 0 10px 0 5px;
		}

		.cookie-footer button span {
			margin-right: 10px;
		}

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

	.margin-right {
		margin-right: 10px !important;
	}

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

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

	#idCharacters, #idParts, #idMessagePrice {
		font-weight: bold;
		margin: 0 15px 0 5px;
	}

	.padding {
		padding-left: 10px;
		padding-right: 10px;
	}

	.col-xs-auto {
		float: left;
		width: 12%;
		position: relative;
		min-height: 1px;
	}

	.case-fields-grid, #idCaseIdContainer {
		width: 100%;
		margin: 0 0 10px 0;
		display: grid;
		grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
		padding-right: 10px;
	}

		.case-fields-grid .control-label, #idCaseIdContainer .control-label {
			text-align: left;
			padding: 5px;
			margin: 5px 5px 5px 10px;
			align-self: center;
		}

		.case-fields-grid .form-control, #idCaseIdContainer .form-control {
			align-self: center;
		}

		.case-fields-grid .control-label, .case-fields-grid .form-control, #idCaseIdContainer .control-label, #idCaseIdContainer .form-control {
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: flex-start;
		}

	.full-height {
		height: 100%;
	}

	.call-body {
		height: 100%;
		display: flex;
		flex-direction: column;
		flex: 1;
	}

	.confirmation-modal {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

		.confirmation-modal .panel-body {
			font-weight: bold;
		}

		.confirmation-modal .modal-dialog {
			margin-top: 0 !important;
		}

			.confirmation-modal .modal-dialog .confirm {
				margin-right: 15px;
			}


	.slider.slider-vertical {
		position: absolute;
		z-index: 1000;
		height: 200px;
		left: 13px;
		top: calc(50% - 200px / 2);
	}

	#idColoring {
		flex: 1;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: flex-end;
	}

		#idColoring label {
			margin: 0 0 0 0;
		}

		#idColoring input {
			margin: 0 5px 0 15px;
		}

	#idCallbackProgressDetails {
	}

	#idCallLogsToolbar {
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	#idLoginView {
		margin-top: 30px;
	}

		#idLoginView .panel .panel-body {
			padding-top: 0;
		}

	#idLoginTabControl .tab-content {
		padding-top: 40px;
	}

	#idLoginTabControl ul.nav.nav-tabs {
		background-color: #fff;
		border-radius: 8px;
		box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
		-moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
		-webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
	}

		#idLoginTabControl ul.nav.nav-tabs li a {
			padding: 5px;
		}


		#idLoginTabControl ul.nav.nav-tabs li h4 {
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: space-evenly;
		}

	#idSelfServiceTakePhoto {
		width: 48px !important;
		height: 48px !important;
		background: url(/Content/Images/snapshot.png);
		background-size: 40px 40px;
		background-position: center -3px;
		background-repeat: no-repeat;
	}

	#idSelfServiceUploadFromGallery {
		width: 48px !important;
		height: 48px !important;
		background: url(/Content/Images/photo_upload.png);
		background-size: 40px 40px;
		background-position: center -3px;
		background-repeat: no-repeat;
		margin-right: 15px;
	}

	#idSelfServiceUploadFromGalleryPicker {
		width: 0;
	}

	#idSelfServiceRejectPhoto, #idSelfServiceConfirmPhoto {
		width: 48px !important;
		height: 48px !important;
	}

	#idReconnecting {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: 1001;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		background: rgba(106, 154, 195, 0.85);
	}

	#idPhoto .panel-body {
		display: flex;
		flex-direction: row;
	}

	#idRecording .panel-body {
		display: flex;
		flex-direction: row;
	}

	#idPhoto #idPhotoPreview {
		flex: 1;
		max-width: 100%;
		max-height: 100%;
		object-fit: contain;
		border: 1px solid #aaa;
		border-radius: 4px;
		cursor: pointer;
		overflow: hidden;
		border: 1px solid #337ab7;
		background: #e9f1f8;
	}

	#idPhoto #idPhotoDescriptionText {
		flex: 1;
		margin-top: 15px;
		resize: none;
	}

	#idPhotoPreviewContainer {
		overflow: hidden;
	}

	#idPhotoDescriptionText {
		resize: none;
	}

	.circular-progress {
		-webkit-appearance: none;
		-moz-appearance: none;
		appearance: none;
		box-sizing: border-box;
		border: none;
		border-radius: 50%;
		padding: 0.25em;
		width: 60px;
		height: 60px;
		color: rgb(var(--pure-material-primary-rgb, 33, 150, 243));
		background-color: transparent;
		font-size: 16px;
		overflow: hidden;
		visibility: hidden;
		-webkit-mask-image: linear-gradient(transparent 50%, black 50%), linear-gradient(to right, transparent 50%, black 50%);
		mask-image: linear-gradient(transparent 50%, black 50%), linear-gradient(to right, transparent 50%, black 50%);
		animation: circular-progress 6s infinite cubic-bezier(0.3, 0.6, 1, 1);
	}

		.circular-progress::before {
			content: "";
			display: block;
			box-sizing: border-box;
			margin-bottom: 0.25em;
			border: solid 0.25em transparent;
			border-top-color: currentColor;
			border-radius: 50%;
			width: 100% !important;
			height: 100%;
			background-color: transparent;
			animation: circular-progress-pseudo 0.75s infinite linear alternate;
			box-sizing: border-box;
			border: solid 0.25em transparent;
			border-top-color: currentColor;
			border-radius: 50%;
			width: 100%;
			height: 100%;
			background-color: transparent;
			animation: circular-progress-pseudo 0.75s infinite linear alternate;
		}

	@keyframes circular-progress {
		0% {
			transform: rotate(0deg);
		}

		12.5% {
			transform: rotate(180deg);
			animation-timing-function: linear;
		}

		25% {
			transform: rotate(630deg);
		}

		37.5% {
			transform: rotate(810deg);
			animation-timing-function: linear;
		}

		50% {
			transform: rotate(1260deg);
		}

		62.5% {
			transform: rotate(1440deg);
			animation-timing-function: linear;
		}

		75% {
			transform: rotate(1890deg);
		}

		87.5% {
			transform: rotate(2070deg);
			animation-timing-function: linear;
		}

		100% {
			transform: rotate(2520deg);
		}
	}

	@keyframes circular-progress-pseudo {
		0% {
			transform: rotate(-30deg);
		}

		29.4% {
			border-left-color: transparent;
		}

		29.41% {
			border-left-color: currentColor;
		}

		64.7% {
			border-bottom-color: transparent;
		}

		64.71% {
			border-bottom-color: currentColor;
		}

		100% {
			border-left-color: currentColor;
			border-bottom-color: currentColor;
			transform: rotate(225deg);
		}
	}

	.material-icons {
		font-size: 36px;
		color: #337ab7;
		width: 60px;
		height: 60px;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	button .material-icons {
		width: unset;
		height: unset;
		font-size: 20px;
	}

	.progress-icon {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin: 0 15px 0 15px;
	}

		.progress-icon span {
			font-weight: bold;
			width: 100px;
			height: 100px;
			text-align: center;
		}

		.progress-icon.running .circular-progress {
			visibility: visible;
		}

		.progress-icon.success .material-icons {
			color: green;
		}

		.progress-icon.fail .material-icons {
			color: red;
		}

		.progress-icon .material-icons {
			transform: translateY(100%);
		}

	#idCallSteps {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		transform: translateY(-30px);
	}

	#idCallbackProgress .modal-dialog {
		min-width: 700px;
		height: 500px;
		width: auto;
	}

	.invalid {
		border: 1px solid red !important;
	}

	#idSectionTicket label {
		margin-bottom: 0 !important;
	}

	#idFeedback .material-icons {
		color: #ffaa1d;
		width: 40px;
		height: 40px;
		cursor: pointer
	}

		#idFeedback .material-icons:hover {
			content: 'star_rate';
		}

	#idFeedback textarea {
		resize: none;
	}

	#idCallsListTable {
		width: 100%;
	}

		#idCallsListTable td {
			padding: 3px;
			text-align: center;
		}

		#idCallsListTable .material-icons {
			color: #ffaa1d;
			font-size: 16px;
			width: 16px;
			height: 16px;
		}

	#idCallLogsTable {
		table-layout: fixed;
	}

		#idCallLogsTable th:nth-child(4), #idCallLogsTable th:nth-child(5),
		#idCallLogsTable td:nth-child(4), #idCallLogsTable td:nth-child(5) {
			width: 40%;
			max-width: 40%;
			min-width: 40%;
			overflow: auto;
		}

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

	#idCasesListTable {
		width: 100% !important;
	}

		#idCasesListTable td {
			text-align: left;
		}

	#idDescriptionText {
		flex: 1;
		font-size: 20px;
		resize: none;
	}

	.dataTables_processing {
		left: 0 !important;
		top: 0 !important;
		width: 100% !important;
		height: 100% !important;
		margin: 0 !important;
		padding: 10% !important;
		background: rgba(51, 122, 183, 0.3) !important;
		border-radius: 6px !important;
	}

	#idCaseSelectionPopup {
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

		#idCaseSelectionPopup .modal-dialog {
			width: auto;
			margin: 0;
		}

	table.table {
		border-radius: 8px;
	}

	#idLogoSmall {
		max-width: 128px;
	}

	/* FONTS */
	/*@font-face {
	font-family: "Koop";
	src: url("https://youcit.at/Content/CZ/koop_office_regular-webfont.woff") format("woff");
}

@font-face {
	font-family: "Koop";
	src: url("https://youcit.at/Content/CZ/koop_pro_bold-webfont.woff") format("woff");
}

@font-face {
	font-family: "Koop";
	src: url("https://youcit.at/Content/CZ/koop_pro_light-webfont.woff") format("woff");
}

@font-face {
	font-family: "Koop";
	src: url("https://youcit.at/Content/CZ/koop_pro_medium-webfont.woff") format("woff");
}

@font-face {
	font-family: "Koop";
	src: url("https://youcit.at/Content/CZ/koop_pro_regular-webfont.woff") format("woff");
}*/

	.reactapp-root {
		padding: 0;
	}

	#reactapp-claims {
		padding-top: 10px;
		flex: 1;
		overflow: hidden;
	}

	#reactapp-address-book {
		padding-top: 10px;
		flex: 1;
		overflow: hidden;
	}

	#reactapp-organization-groups {
		padding-top: 10px;
		flex: 1;
		overflow: hidden;
	}

#idCallbackProgress .material-icons {
	font-size: 32px !important;
	display: flex !important;
	justify-content: center !important;
	align-items: center !important;
}

	#idCallsTabContent, #idConnectionsTabContent {
		flex: 1;
		overflow: hidden;
	}

		#idCallsTabContent .panel, #idConnectionsTabContent .panel {
			height: 100%;
			overflow: hidden;
		}

			#idCallsTabContent .panel .panel-body, #idConnectionsTabContent .panel .panel-body {
				height: 100%;
				overflow: auto;
			}

	#idStartCallPopup .modal-dialog {
		width: 600px;
	}

	#idAgentsListTable {
		width: 100% !important;
	}

	#idGpsPosition {
		min-height: 550px;
	}

	#idDisclaimerText {
		overflow-x: auto;
	}

	#idCategoriesTabControl #idPhotoSettings {
		position: absolute;
		right: 0;
		height: 40px;
		z-index: 1000;
	}

		#idCategoriesTabControl #idPhotoSettings button {
			outline: none !important;
		}

			#idCategoriesTabControl #idPhotoSettings button:focus {
				background: none;
			}

			#idCategoriesTabControl #idPhotoSettings button.active {
				background: #337ab7;
			}

				#idCategoriesTabControl #idPhotoSettings button.active:focus {
					background: #337ab7;
				}

#idRecordingState {
	position: absolute; 
	width: 100%; 
	height: 100%; 
	display: flex; 
	flex-direction: column; 
	align-items: center;
	justify-content: flex-end;
	padding-bottom: 15px;
}