::-webkit-scrollbar {
	width: 10px;
	height: 10px;
}

::-webkit-scrollbar-track {
	background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
	background: #888;
}

::-webkit-scrollbar-thumb:hover {
	background: #555;
}

html {
	height: calc(100% - 80px) !important;
	overflow-y: auto !important;
}

.danger {
    color: red;
    font-style: italic;
}

.navbar-toggle .icon-bar {
	width: 18px;
}

.messagebox,#messagebox {
	position: absolute;
	top: auto;
	width: 100%;
	z-index: 99;
}

#main-content {
	margin-top: 75px;
	height: 100%;
	padding-right: 15px; 
	padding-left: 15px;
}

.modal .submodal {
	padding-top: 25%;
	position: fixed;
	overflow: hidden;
}
.modal-open {
	overflow: unset !important;
}
.confirmation-modal {
	z-index: 2000;
}

.centered {
	text-align: center;
	vertical-align: middle;
}

.lockicon{
	float: right;
	margin-right: 12px;
	margin-top: -24px;
	position: relative;
	z-index: 2;
	color: #3A4246;
	cursor: pointer;
}
.copyicon{
	float: left;
	margin-left: 10px;
	margin-top: -26px;
	position: relative;
	z-index: 2;
	color: #3A4246;
	cursor: pointer;
}

.help-block {
	margin: 0px !important;
}

.has-feedback {
	min-height: 74px !important;
}

#building_other_information {
	min-height: 124px !important;
}
#room_other_information {
	min-height: 124px !important;
}
#room_sound_system_information {
	min-height: 124px !important;
}

legend {
	margin-top: 15px !important;
}

#owner_type {
	min-height: 147px !important;
}

#echoing, #backgroundnoise, #testing_device {
	padding-bottom: 15px !important;
}

.no-spinner{
	appearance: textfield;
	-moz-appearance:textfield;
	text-align: right;
}

.no-spinner::-webkit-outer-spin-button,
.no-spinner::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
	text-align: right;
}

.multiple-rooms {
	position: relative;
	padding-left: 24px;
}
	.multiple-rooms > i { 
		position: absolute; 
		top: 3px;
	}
	.multiple-rooms > i:nth-child(1) { left: 8px; color: #b2da8d; }
	.multiple-rooms > i:nth-child(2) { left: 4px; color: #99ce67; }
	.multiple-rooms > i:nth-child(3) { left: 0px; color: #7FC241; }
.multiple-rooms-container > ul {
	margin-bottom: 0px;
	margin-left: -24px;
}
.tooltip-suboffers {
	position: absolute;
	background-color: #3A4246;
	color: white;
}
	.tooltip-suboffers > div {
		padding: 6px 9px;
		font-size: 12px;
	}
	.tooltip-suboffers > div > ul {
		padding: 0px;
		margin: 0px 0px 0px 24px;
	}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
	background-color: #7FC241 !important;
	color: white;
}
.select2-container--classic .select2-selection--single:focus {
	border: 1px solid #7FC241 !important;
}
.select2-container--classic.select2-container--open .select2-selection--single {
	border: 1px solid #7FC241 !important;
}
.select2-container--classic .select2-selection--multiple:focus {
	border: 1px solid #7FC241 !important;
}
.select2-container--classic.select2-container--open .select2-selection--multiple {
	border: 1px solid #7FC241 !important;
}
.select2-container--classic.select2-container--open .select2-dropdown {
	border-color: #7FC241 !important;
}

.select2-container--default .select2-search--inline .select2-search__field {
	padding-left: 6px !important;
}

.form-control.datepicker {
	padding: 6px 12px;
}

[readonly] {
	cursor: text !important;
}

.btn-qlu-grey {
	background: #3A4246;
	color: white;
}
	.btn-qlu-grey:hover {
		background: #262b2d;
		color: white;
	}

.btn-primary.disabled,
 .btn-primary[disabled],
 fieldset[disabled] .btn-primary,
 .btn-primary.disabled:hover,
 .btn-primary[disabled]:hover,
 fieldset[disabled] .btn-primary:hover,
 .btn-primary.disabled:focus,
 .btn-primary[disabled]:focus,
 fieldset[disabled] .btn-primary:focus,
 .btn-primary.disabled:active,
 .btn-primary[disabled]:active,
 fieldset[disabled] .btn-primary:active,
 .btn-primary.disabled.active,
 .btn-primary[disabled].active,
 fieldset[disabled] .btn-primary.active {
	 background-color: #7FC241;
	 border-color: #7FC241;
 }

.item-block {
	width: 10px;
	height: 10px;
	display: inline-block;
	background-color: black;
	left: 2px;
	margin-right: 4px;
	top: 2px;
	border: 1px solid black;
}
div[id^="poi_names_"] {
	margin-left: 52px;
}
.col-centered {
	margin: 0 auto;
	float: none;
}
 #triangle-left {
	width: 0;
	height: 0;
	border-top: 20px solid transparent;
	border-bottom: 20px solid transparent;
	border-right:20px solid #F0F1EF;
	position: relative;
	margin-right: -15px !important;
	margin-top: -10px !important;
}
.item-heading {
  padding: 9px 15px;
  border-bottom: 1px solid transparent;
  border-top-left-radius: 0px;
  border-top-right-radius: 0px;
  max-height: 37px;
  height: 37px;
  margin: -1px;
}
.panel-default > .item-heading {
  color: white;
  background-color: #3A4246;
  border-color: #3A4246;
}
.center-img {
  margin-left: auto;
  margin-right: auto;
  display: block;
}

.item-panel {
    margin-bottom: 15px;
}
.item-panel:last-child{
	margin-bottom: 0px;
}
#loading_img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255,255,255,.6);
    z-index: 10000;
    display: flex;
	justify-content: center;
	align-items: center;
}

.fadeInOut {
	opacity: 1;
	-webkit-animation: fade 5s linear; /* Safari, Chrome and Opera > 12.1 */
       -moz-animation: fade 5s linear; /* Firefox < 16 */
        -ms-animation: fade 5s linear; /* Internet Explorer */
         -o-animation: fade 5s linear; /* Opera < 12.1 */
            animation: fade 5s linear;
}

@keyframes fade {
    0%,100% { opacity: 0; }
    5% 	{ opacity: 1; }
    70%   	{ opacity: 1; }
}

/* Firefox < 16 */
@-moz-keyframes fade {
    0%,100% { opacity: 0; }
    5% {opacity: 1;}
    70%   { opacity: 1; }
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fade {
    0%,100% { opacity: 0; }
    5% {opacity: 1;}
    70%   { opacity: 1; }
}

/* Internet Explorer */
@-ms-keyframes fade {
    0%,100% { opacity: 0; }
    5% {opacity: 1;}
    70%   { opacity: 1; }
}

/* Opera < 12.1 */
@-o-keyframes fade {
    0%,100% { opacity: 0; }
    5% {opacity: 1;}
    70%   { opacity: 1; }
}

.servicemapunit_details_table tr {
	background-color: inherit !important;
}
.servicemap_index {
    font-style: italic;
    font-weight: bold;
    text-transform: capitalize;
}

.clickable {
	cursor: pointer;
}
.clickable:not(button):hover {
	background-color: '#D3D3D3';
}
.link_progress {
	min-width: 200px;
}
.combobutton {
	padding-left: 0px;
}
.combobutton button {
	width: 100%;
}
.topmost {
	z-index: 10000;
}
.btn {
	padding: 6px 8px !important;
}

.dt-button:hover,
.dt-button:focus,
.dt-button:active {
	background: #76b63a !important;
	border: 1px solid #76b63a !important;
	text-shadow: none !important;
}

.dt-button:focus {
	box-shadow: 0 0 0 2px black;
}

.dt-button.export-btn-open,
.dt-button.export-btn {
	background: #7FC241;
	color: white;
	border-radius: 0px;
	border: 1px solid #7FC241;
}

.dt-button.export-btn-open {
	min-width: 40px;
	padding: 4px 6px;
	margin: -4px 10px 0px 0px;
}

.dt-button.export-btn {
	margin-bottom: 6px !important;
}

.dt-button-collection {
	background: #F0F1EF !important;
	width: 120px !important;
}
.datatable-container {
	position: relative;
}

.lds-ring:not(.hidden):not(.hidden) {
    position: absolute;
    left: 0;
    top: -4px;
    width: 100%;
    height: calc(100% + 4px);
    padding: 10% calc(50% - 45px);
    background: #F0F1EF;
    z-index: 1000;
	top: 62px;
    height: calc(100% - 114px);
}

.lds-ring:not(.hidden):not(.hidden) div {
	box-sizing: border-box;
	display: block;
	position: absolute;
	width: 90px;
	height: 90px;
	margin: 8px;
	border-width: 8px;
	border-style: solid;
	border-radius: 50%;
	animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
	border-color: #7FC241 transparent transparent transparent;
}

.lds-ring:not(.hidden) div:nth-child(1) {
	animation-delay: -0.45s;
}
.lds-ring:not(.hidden) div:nth-child(2) {
	animation-delay: -0.3s;
}
.lds-ring:not(.hidden) div:nth-child(3) {
	animation-delay: -0.15s;
}
@keyframes lds-ring {
	0% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(360deg);
	}
}

.lds-ring-modal {
    background: #f5f5f599 !important;
    left: 0 !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

.lds-ring-modal div {
	width: 45px !important;
	height: 45px !important;
	border-width: 5px;
	top: calc(50% - 22px);
	left: calc(50% - 22px);
}

.lds-ring.page {
	margin-top: 65px; 
	height: calc(100% - 140px);
}
.lds-ring.grey div {
	border-color: #b8b8b8 transparent transparent transparent;
}


path#wave-S,
path#wave-M,
path#wave-L
{
    opacity: 1;
    animation: wave-loading 1.5s linear infinite;
}

path#wave-S { animation-delay: 0.25s; }
path#wave-M { animation-delay: 0.50s; }
path#wave-L { animation-delay: 0.75s; }

@keyframes wave-loading {
	0% {
		opacity: 0.25;
	}
    50% {
        opacity: 1.0;
    }
	100% {
		opacity: 0.25;
	}
}

.jstree-default-large .jstree-anchor {
	height: unset !important;
	white-space: break-spaces;
	max-width: 323px;
}
.jstree-default .jstree-anchor {
	height: unset !important;
}
 
.page-break-indicator {
	border-top: 1px dashed lightgrey;
}

.page-break {
	border-top: 1px dotted #b2b2b2;
	text-align: center;
	margin: 32px 0;
}
	.page-break div {
		margin-top: -12px;
	}

	.page-break div span {
		background-color: #fff;
		color: #b2b2b2;
		padding: 0 5px;
		font-size: 12px;
	}

.footer-flex {
	display: flex;
	justify-content: flex-end;
	flex-wrap: wrap;
	margin: 0em 1em;
}
	.footer-flex .flex-grow {
		flex: 3 1 auto;
		margin: 1em 0.25em;
	}
	.footer-flex .flex-item {
		flex: 0 1 auto;
		margin: 1em 0.25em;
	}
	.footer-flex .price {
		max-width: 380px;
	}

.footer-btn-container {
	display: inline-grid;
	grid-template-columns: auto auto;
	padding: 15px 15px 15px;
	width: 100%;
	justify-content: space-between;
	grid-gap: 10px;
}
	.footer-btn-container > div {
		display: inline-grid;
		grid-gap: 8px;
	}
	.footer-btn-container > div:nth-child(1) {
		grid-template-columns: auto minmax(0px, 370px);
		justify-content: start;
	}
	.footer-btn-container > div:nth-child(2) {
		grid-auto-flow: column;
		grid-auto-columns: auto;
		justify-content: end;
	}

.modal-header-custom h3 {
	text-overflow: ellipsis;
	white-space: nowrap;
	width: calc(100% - 96px);
	overflow: hidden;
	min-height: 18px;
}

.btn-toolbar-offers {
	margin-left: -5px !important;
}
	.btn-toolbar-offers > .btn {
		margin-bottom: 6px;
	}

.center {
	width: 100%;
    text-align: center;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

.select2-container--default .select2-selection--multiple .select2-selection__clear {
	margin: 0 !important;
	top: 10px;
	right: 10px;
	position: absolute;
	background: #DEDEDE;
	width: 16px;
	height: 16px;
	text-align: center;
	border-radius: 26px;
	padding: 0px 5px !important;
	font-size: 12px;
	box-shadow: 0 0 0 1px #ccc;
}

.select2-container--default .select2-selection--multiple .select2-selection__clear:hover {
	background: #ececec;
	color: red;
} 

.select2-container--default .select2-selection--multiple .select2-selection__choice {
	max-width: calc(100% - 26px);
	overflow: hidden;
	text-overflow: ellipsis;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice:hover {
	background: #ececec;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice .select2-selection__choice__remove:hover {
	color: red !important;
	transform: scale(1.5);
}

.publish-flex {
	display: flex; 
	margin: 0px 15px 15px 15px;
}
	.publish-flex .flex-grow {
		flex: 3 1 auto;
	}
	.publish-flex .flex-fixed {
		flex: 0 1 auto;
	}

.dz-previews .file-row .blocks {
	display: inline-flex !important;
	justify-content: space-between;
	flex-wrap: wrap;
}
	.dz-previews .file-row .left-block {
		flex: 1 0 0;
	}
	.dz-previews .file-row .left-block > div.file-name {
		width: calc(100% - 120px);
		height: 100%;
	}
	.dz-previews .file-controls {
		float: right;
		margin-top: 19px;
	}
	.dz-previews .fileable-text .task_fileable {
		color: #428bca;
	}
	.dz-previews .fileable-text .task_fileable:hover {
		cursor: pointer;
		color: #2a6496;
	}

.multiline-toolbar {
	margin-bottom: -10px;
}
.multiline-toolbar > a {
	margin-bottom: 10px;
}

.btn-group .dropdown-menu {
	text-align: left;
}
.modal-footer .btn-group + .btn {
	margin-left: 5px;
}
.modal-footer  .btn + .btn-group {
	margin-left: 5px;
}

.no-pad-l {
	padding-left: 0px !important;
}
.no-pad-r {
	padding-right: 0px !important;
}

.loading-tasks {
	text-align: center;
	padding: 24px 0px 9px 0px;
	font-size: 16px;
	outline: 15px solid #fafafa;
	margin-top: 5px;
}

/* top container for room modal's single offer */
#room_offers_tbody {
	display: grid;
}
[data-group="room-offers-group"] {
	margin-bottom: 6px;
}
.room-offer-header {
	min-height: 37px;
}
[data-group="room-offers-group"][data-container="open"] .room-offer-header {
	font-weight: bold;
	background-color: #dedede;
	font-size: 16px;
}
[data-group="room-offers-group"][data-container="open"] .room-offer-header > div {
	padding-top: 6px;
	padding-bottom: 6px;
}
[data-group="room-offers-group"][data-container="open"] .room-offer-header > [data-caret] {
    background-color: #3A4246;
    color: white;
}
	.room-offer-header .offer-title {
		display: grid;
	}
	[data-group="room-offers-group"][data-container="closed"] .offer-title {
		grid-template-columns: 1fr auto;
		column-gap: 6px;
	}
		[data-group="room-offers-group"][data-container="open"] .offer-date {
			font-size: 12px;
			margin-top: -2px;
		}
		[data-group="room-offers-group"][data-container="closed"] .offer-name {
			grid-column: 2;
			grid-row: 1;
		}
		[data-group="room-offers-group"][data-container="closed"] .offer-date {
			grid-column: 1;
			grid-row: 1;
		}

	.room-offer-header {
		display: grid;
		grid-template-columns: 1fr 37px; 
		background-color: #F0F1EF;
		cursor: pointer;
	}
	.room-offer-header > div {
		transition: 0.2s;
	}
	[data-container="open"] .room-offer-tasks {
		margin-bottom: 10px;
	}

	/* container for room-task-info and room-task-links. located inside room-offer-header container */
	.room-task {
		display: grid;
		grid-template-columns: 1fr 37px;
		align-items: center;
	}
	.room-task:not(:first-child) > div {
		border-top: 1px solid #dedede;
	}

	.room-task.room-task-other {
		background-color: #FFFAEE;
	}
	.room-task.room-task-other.closed {
		max-height: 0;
	}

	.task-other-divider {
		user-select: none;
		cursor: pointer;
		display: grid;
		place-items: baseline;
		position: relative;
		transition: 200ms;
		margin: 5px 0px;
		font-size: 12px;
		color: #428bca;
	}
	.task-other-divider.open > span {
		border-bottom: none;
	}
	.task-other-divider > div {
		z-index: 1;
		background-color: #fafafa;
		padding: 0px 6px;
		width: 100%;
	}
	.task-other-divider > span {
		display: block;
		/* border-bottom: 1px solid #dedede; */
		width: 100%;
		margin-top: 0px;
		position: absolute;
		top: 50%;
		z-index: 0;
	}
	.task-other-divider:not(.open):hover {
		text-decoration: underline;
	}
	.task-other-divider.open:hover {
		text-decoration: underline;
	}


	.room-task.ready,
	.room-task.unfinished {
		border-left-width: 8px;
		border-left-style: solid;
	}
	.room-task.ready { border-left-color: #7FC241; }
	.room-task.unfinished { border-left-color: #eb9f3c; }

	/* info is under room-task */
	.room-task-info {
		display: grid;
		font-size: 14px;
		transition: 0.2s all;
		padding: 9px;
		cursor: pointer;
	}
		.room-task-info .fa {
			font-size: 18px;
		}
		.room-task-info .type {
			font-weight: bold;
		}

		.room-task-info ul {
			margin-bottom: 0px;
			padding: 4px 0px 0px 21px;
			font-size: 14px;
		}
		.room-task-info .actor {
			list-style-type: disclosure-closed;
		}
		.room-task-info .no-actor {
			list-style-type: disclosure-closed;
			color: #d2322d; 
		}

	/* links are also under room-task */
	.room-task-links {
		width: 100%;
		height: 100%;
		display: grid;
		align-items: center;
		justify-items: center;
	}
		.room-task-links > div {
			width: 37px;
			height: 37px;
			display: grid;
			justify-items: center;
			align-items: center;
			border-radius: 100%;
			transition: 0.2s;
		}
		.room-task-links > div:hover {
			background: #d3d3d3;
		}
		.room-task-links i {
			font-size: 20px;
		}
		.room-modal-room {
			position: relative;
			width: 37px;
			height: 100%;
			cursor: pointer;
		}

.room-modal-link {
	padding: 9px 0px 9px 12px;
	display: flex;
	transition: 0.2s;
}
	.room-modal-link > i {
		font-size: 20px;
		padding-right: 8px;
	}

.table-older-header {
	background: #dedede;
    padding: 9px 15px;
    display: block;
    float: left;
    width: calc(100% - 37px);
	cursor: pointer;
}
#room_offers_other {
    max-height: 2000px;
    display: inline-block;
    width: 100%;
    transition: 0.2s all;
    overflow: visible;
}
.table-collapsed {
	max-height: 0px !important;
	overflow: hidden !important;
}

.offer-status {
	padding-top: 4px;
}

.offer-details {
	display: flex;
	flex-direction: column;
	height: 100%;
}
	.offer-details .details-row {
		display: flex;
		flex-direction: row;
	}
	.offer-details .details-row > div {
		flex: 0 0 50%;
		padding: 6px 9px;
	}

.task-not-owned {
	box-shadow: 0 0 0 3px #d9534f !important;
}

.dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus {
	background: #101010 !important;
	cursor: pointer;
}
.dropdown-menu > li > a {
	min-height: 30px;
	transition: 100ms;
}
.dropdown-menu > li.active > a {
	font-weight: bold;
}
.dropdown-menu {
	padding: 0px 0px !important;
}
.dropdown-hover:hover .dropdown-menu {
	display: block !important;
}
.dropdown-menu > li.spacer {
    background: darkolivegreen;
    pointer-events: none;
    color: white;
    text-shadow: none;
    padding: 2px 0px 2px 10px;
	font-variant: all-small-caps;
}

#taskTogglePanel,
#roomCreateCopy {
	user-select: none;
	background: #DEDEDE;
	display: block;
	color: #3A4246;
	margin: -27px 0px 0px 0px;
	height: 37px;
	width: 37px;
	line-height: 38px;

	font-size: 13px;
	display: block;
	float: right;
	cursor: pointer;
	text-align: center;
	-webkit-transition: background-color 200ms ease-in-out, width 100ms ease-in-out;
		-moz-transition: background-color 200ms ease-in-out, width 100ms ease-in-out;
		-o-transition: background-color 200ms ease-in-out, width 100ms ease-in-out;
			transition: background-color 200ms ease-in-out, width 100ms ease-in-out;
}
	#taskTogglePanel:hover,
	#roomCreateCopy:hover {
		background-color: #7FC241;
		color: white;
		width: auto;
		padding: 0px 12px;
	}
	#roomCreateCopy div {
		display: none;
	}
	#roomCreateCopy:hover div {
		display: inline-block;
		content: "test";
		font-family: "PT Sans";
		font-size: 14px;
		padding: 0px 0px 0px 6px;
	}

.amp-container {
	border: 1px solid #cecece;
	background: #ececec;
	padding: 6px 12px;
	display: grid;
}
.amp-details {
	margin-top: 12px;
	display: grid;
	grid-template-columns: repeat(13, auto);
	column-gap: 4px;
	font-size: 12px;
	justify-items: end;
}
	.amp-details > span {
		font-weight: bold;
	}
	.amp-details > .invalid {
		color: red;
	}
	.amp-details > .invalid.response {
		width: 100%;
		text-align: center;
		grid-column: span 10;
	}


.amp-file {
	font-size: 12px;
	float: right;
	margin-left: 2px;
}

.select-none.form-control {
	pointer-events: none;
}

.select-none.form-control,
.select-grey.form-control,
.select-grey + .select2-container .select2-selection {
	background: #ececec;
}

.form-control:focus-visible {
    outline: 2px solid black;
    outline-offset: -2px;
}

.select-none input {
	border: 1px solid black;
	margin-bottom: 1px;
	margin-top: 1px;
}
.select-none input,
.select-none select {
	pointer-events: none;
	background: #dedede;
}
.select-none a,
.select-none input,
.select-none button {
	opacity: 0.7;
	pointer-events: none;
}
.select-none-all .floatleft,
.select-none-all .floatright,
.select-none-all .sorting {
	opacity: 0.7;
	pointer-events: none;
}

.row-equal {
	display: flex;
	flex-wrap: wrap;
	margin-left: -15px;
    margin-right: -15px;
}
	.row-equal > [class*='col-'] {
		display: flex;
		flex-direction: column;
	}
	.row-equal .form-group:last-child {
		height: 100%;
	}
	.row-equal .form-group:last-child > [class*='col-'] {
		height: 100%;
		display: flex;
		flex-direction: column;
	}
	.row-equal .form-group:last-child > [class*='col-'] > :nth-child(2):not(.no-grow) {
		flex: 1 1 auto;
	}

	.space-removed-buttons {
		height: 42px;
	}
		.space-removed-buttons form {
			display: inline;
		}
	
	.even-buttons {
		display: inline-grid;
		grid-auto-flow: column;
		grid-auto-columns: 1fr;
		grid-column-gap: 10px;
		margin-left: 5px;
		float: left;
		height: 34px;
		text-align: center;
	}
		.even-buttons .btn-width {
			padding: 6px 16px !important;
		}

	.removed {
		color: darkmagenta;
	}
	
	.offer-id {
		position: relative;
	}
	.offer-id:hover > * {
		display: unset !important;
	}
		.offer-id > div {
			display: none;
			position: absolute;
			right: calc(100% + 12px);
			top: -4px;
			text-overflow: ellipsis;
			white-space: nowrap;
			padding: 10px 12px;
			background: navajowhite;
			border-radius: 12px;
			z-index: 1;
		}	
.row-equal-50 {
	flex: 0 0 50%;
	padding: 6px;
	user-select: none;
}

.page-report {
	width: 240mm !important;
}

.modal-hover-body {
	position: absolute;
	top: 0;
	right: 0;
	width: auto;
	background-color: #F0F1EF;
	z-index: -1;
	transition: 0.2s all;
	border-top-right-radius: 12px;
	border-bottom-right-radius: 12px;
	display: inline-grid !important;
	grid-auto-flow: row;
}
.modal-hover-body.show {
	transform: translateX(100%);
} 
	.modal-hover-body .row-header {
		font-weight: bold;
		border-bottom: 1px solid #cecece;
		padding: 10px 6px 6px 10px;
	}

	.modal-hover-body .row-data {
		padding: 6px 10px;
		cursor: pointer;
		transition: 0.1s all;
		min-width: 155px;
	}
		.modal-hover-body .row-data > span {
			font-size: 13px;
			font-style: italic;
			color: mediumblue;
		}
		.modal-hover-body .row-data:hover {
			background-color: #cecece;
		}
		.modal-hover-body .row-data:last-child:hover {
			border-bottom-right-radius: 12px;
		}

.api-results {
	position: absolute;
	left: 15px;
	width: calc(100% - 30px);
	background: #fcf8e3;
	border-top: 0px;
	transition: 0.2s all;
	display: none;
}
.api-results.show-api {
	border: 1px solid #cecece;
	transform: translateY(0%);
	z-index: 1;
	display: block !important;
	border-top: 0px;
}
.api-results.load-api {
	pointer-events: none;
	filter: saturate(0.25);
}
	.api-results > div {
		padding: 6px 10px;
		cursor: pointer;
	}
	.api-results > div:focus,
	.api-results > div:focus-visible {
		outline: 2px solid black;
		outline-offset: -1px;
		background-color: #cecece;
	}
	.api-results > div:hover {
		background-color: #cecece;
	}

.offer-add-room {
	display: grid;
	grid-template-columns: minmax(0%, 100%) auto;
	margin: 12px 1px;
	align-items: baseline;
	grid-column-gap: 6px;
	transition: 0.2s all;
}
	.offer-add-room button {
		height: 34px;
	}
.offer-add-room.queue {
	background: #dedede;
	margin-top: 6px;
	margin-bottom: 7px;
}
.offer-add-room.queue.error-msg {
	background: mistyrose;
}
.offer-add-room.queue.ok-msg {
	background: rgba(127, 194, 65, 0.565);
}
	.offer-add-room.queue .left {
		padding: 0px 0px 0px 15px;
	}
	.offer-add-room.queue .left .error-msg {
		color: red;
		float: right;
		
	}
	.offer-add-room.queue .right button {
		width: 37px;
		height: 37px;
	}
#offerBody .remove-queued {
	transition: 0.2s all;
	max-height: 1000px;
}
#offerBody .remove-queued.ok-msg {
	max-height: 0px;
	margin: 0px;
    border: none;
	overflow: hidden;
}
#offerBody .remove-queued .panel-suboffer, 
#offerBody .remove-queued .table-responsive {
	opacity: 0.5;
}

#offerBody .panel-body {
	border: 1px solid #dedede;
	border-top: 0px;
}

[data-placeholder]::before {
	content: attr(data-placeholder);
	color: grey;
}

.button-bar {
	display: flex !important;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: stretch;
    margin: -4px -4px 12px -4px;
}
.button-bar > a {
    margin: 4px;
}
.button-bar > div {
	display: grid;
	grid-auto-flow: row;
	grid-template-columns: auto auto;
	grid-gap: 6px;
	align-items: baseline;
	align-content: center;
	box-shadow: 0px 0px 0px 1px #d3d3d3;
    padding: 9px;
	position: relative;
	margin: 0px 9px 15px 0px;
	align-content: flex-start;
}
.button-bar > div:before {
	content: attr(data-heading);
    position: absolute;
    top: -8px;
    left: 6px;
    font-size: 11px;
    color: #777;
    z-index: 1;
    background: #F0F1EF;
    padding: 0px 4px;
}

.dropdown-item > div {
	display: inline-grid;
    grid-template-columns: 14px 1fr 50px;
    grid-gap: 8px;
    width: 100%;
    justify-items: center;
	align-items: center;
	margin: 2px 0px;
	color: #eee;
}
.dropdown-item > div > div:nth-child(2) {
	justify-self: left;
}
.dropdown-item > div > div:nth-child(3) {
	font-size: 12px;
	text-transform: lowercase;
}
	.dropdown-item .ready > div {
		opacity: 0.5;
	}
	.dropdown-item .ready > div:nth-child(3) {
		border-bottom: 1px solid #7fc241;
	}
	.dropdown-item .unfinished > div {
		opacity: 1.0;
	}
	.dropdown-item .unfinished > div:nth-child(3) {
		border-bottom: 1px solid #f0ad4e;
	}

.refresh-icon {
	float: right;
	color: #ccc;
	padding: 0px 12px;
	transition: 100ms;
}
.refresh-icon:hover {
	color: #3A4246;
	cursor: pointer;
	transform: scale(1.25);
	transform-origin: center;
}


.disabled-sw {
	opacity: 0;
}
	.disabled-sw .switch {
		pointer-events: none;
		cursor: not-allowed;
	}

.disabled-btn {
	position: relative;
	cursor: not-allowed;
}
	.disabled-btn:active {
		pointer-events: none;
	}
	.disabled-btn > *:not(.exclude-filter) {
		filter: grayscale(0.5) opacity(0.5);
	}
	.disabled-btn:hover,
	.disabled-btn:focus,
	.disabled-btn:active {
		outline: 1px solid #2b313450 !important;
	}
	.disabled-btn.btn-red:hover,
	.disabled-btn.btn-red:focus,
	.disabled-btn.btn-red:active {
		background-color: #d9534f;
		border-color: #d9534f
	}
	.disabled-btn .fa-home {
		display: none;
	}
	.disabled-btn .offer-indicator::before {
		content: "\279c";
	}
	
.panel-suboffer {
	display: grid;
	color: #202224;
	grid-template-columns: auto 1fr auto 37px;
	position: relative;
	align-items: self-start;
}
.panel-newoffer {
	min-height: 44px;
	grid-template-columns: 0px 1fr 37px;
	align-items: center;
	background: #dedede;
	padding-left: 9px;
}
	.panel-newoffer > div {
		padding: 2px 0px;
	}
.panel-suboffer > div {
	background-color: #dedede;
}
.panel-suboffer .offer-additional {
	writing-mode: vertical-rl;
	font-size: 10px;
	align-self: center;
	user-select: none;
	height: 100%;
	text-align: center;
	padding: 8px 4px;
	text-transform: lowercase;
	letter-spacing: 0.1rem;
}
	.offer-additional.published,
	.offer-additional.unpublished,
	.offer-additional.warning {
		border-bottom-left-radius: 9px;
		border-top-left-radius: 9px;
	}

	.offer-additional.published {
		background-color: #7fc241;
	}
	.offer-additional.unpublished {
		background-color: #f0ad4e;
	}
	.offer-additional.warning {
		background-color: #d9534f;
		color: white;
	}
	.offer-additional.warning i {
		color: white;
		transform: rotateZ(90deg);
		font-size: 9px;
		margin-bottom: 2px;
	}
.panel-suboffer .panel-info-wrapper {
	padding: 1px;
	height: 100%;
	user-select: none;
}
.panel-suboffer .panel-info-wrapper > div {
	height: 100%;
	width: 100%;
}
	.panel-info-wrapper .offer-type,
	.panel-info-wrapper .offer-status {
		display: inline;
		font-size: 12px;
		border-radius: 6px;
	}
	.panel-info-wrapper .offer-type {
		font-weight: bold;
	}
	.panel-info-wrapper .offer-status {
		padding-top: 0px;
		text-transform: lowercase;
	}
	.panel-info-wrapper .offer-status::before {
		content: "\2022";
		margin-right: 3px;
	}
	.panel-info-wrapper .offer-name-container {
		display: flex;
		align-items: baseline;
	}
		.panel-info-wrapper .offer-indicator {
			margin-right: 4px;
		}
		.offer-name+.notice,
		.offer-name+.warning {
			margin-top: 2px;
		}
	.panel-info-wrapper .warning {
		color: darkred;
	}
	.panel-info-wrapper :is(.warning, .notice) {
		margin-top: 2px;
		font-size: 13px;
		text-transform: lowercase;
	}
		.panel-info-wrapper :is(.warning, .notice)::before {
			content: "-";
			margin-left: 4px;
			margin-right: 2px;
		}

.panel-suboffer .collapse-btn {
	background: none repeat scroll 0% 0% #3A4246;
	display: block;
	color: #dedede;
	font-size: 14px;
	float: right;
	cursor: pointer;
	height: 100%;
	position: relative;
	user-select: none;
}
.collapse-btn i {
	line-height: 0px;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
}
.panel-button-wrapper button {
	width: 100%;
	display: inline-grid;
	grid-auto-columns: 20px auto;
	grid-auto-flow: column;
	align-items: center;
	padding: 3px 6px !important;
	grid-gap: 4px;
	height: 34px;
	width: 34px;
}

.panel-button-wrapper {
	display: grid;
	grid-gap: 6px;
	height: 100%;
	align-content: center;
	padding: 10px;
	grid-auto-flow: column;
}
	.taskbutton_edit {
		color: #fff;
		border-radius: 30px;
	}
		.taskbutton_edit.ready {
			background-color: #7FC241;
		}
		.taskbutton_edit.unfinished {
			background-color: #f0ad4e;
		}
		.taskbutton_edit.warning {
			background-color: #d9534f;
		}
	.roombutton_edit {
		color: black;
		background-color: #dedede;
		text-align: left;
		border: unset;
		padding: 6px 9px;
		height: 100%;
	}
	.btn-add {
		color: #fff;
		background-color: #39b3d7;
		border-radius: 30px;
	}
	.roombutton_edit:focus,
	.roombutton_edit:active,
	.roombutton_edit:hover {
		outline: 1px solid #2b3134 !important;
	}
	.taskbutton_edit:focus,
	.taskbutton_edit:active,
	.taskbutton_edit:hover,
	.btn-add:focus,
	.btn-add:active,
	.btn-add:hover {
		color: #fff;
	}
	.taskbutton_edit.ready:not(.disabled-btn):focus,
	.taskbutton_edit.ready:not(.disabled-btn):active,
	.taskbutton_edit.ready:not(.disabled-btn):hover {
		background-color: #76b63a;
	}
	.taskbutton_edit.unfinished:not(.disabled-btn):focus,
	.taskbutton_edit.unfinished:not(.disabled-btn):active,
	.taskbutton_edit.unfinished:not(.disabled-btn):hover {
		background-color: #ed9c28;
	}
	.btn-add:not(.disabled-btn):focus,
	.btn-add:not(.disabled-btn):active,
	.btn-add:not(.disabled-btn):hover {
		background-color: #33a0c1;
	}

.panel-dev {
	position: absolute;
	transform: translate(calc(-100% - 44px), -16px);
	background: navajowhite;
	border-radius: 12px;
	padding: 12px;
	column-gap: 8px;
	width: calc(50vw - 472px);
	z-index: 1;
}
table.dataTable.offer_info :is(tbody, thead) :is(td, th) {
	padding-left: 5px !important;
    padding-right: 5px;
}
.existing-offer-container .access-contact {
	width: calc(50% - 15px);
}

.task-legend-container {
	display: grid;
	grid-auto-flow: row;
	align-items: center;
	justify-items: end;
	font-size: 13px;
	margin-top: -10px;
	user-select: none;
	text-transform: lowercase;
}
	.task-legend-container > div {
		position: relative;
		margin-right: 20px;
	}
	.task-legend-container > div::after {
		content: " ";
		width: 8px;
		height: 8px;
		position: absolute;
		right: -12px;
		top: 50%;
		transform: translateY(-50%);
		border-radius: 30px;
	}
		.task-legend-container > div.ready::after {
			background-color: #7FC241;
		}
		.task-legend-container > div.unfinished::after {
			background-color: #f0ad4e;
		}
		.task-legend-container > div.new::after {
			background-color: #f0ad4e;
		}
		.task-legend-container > div.add::after {
			background-color: #39b3d7;
		}

.new-offer-pricing-container .pricing-additional-container > * {
	transition: 150ms;
	max-height: 500px;
	max-width: 1000px;
}
.new-offer-pricing-container.closed-container {
	display: flex;
	justify-content: space-between;
	align-items: center;
	white-space: nowrap;
}
.new-offer-pricing-container.closed-container .pricing-type-change {
	display: flex;
	padding-left: 9px;
	gap: 4px;
	pointer-events: none;
	margin-top: 4px;
	margin-bottom: 4px;
	overflow: hidden;
}
.new-offer-pricing-container.closed-container .pricing-type-change > div {
	padding: 0;
	background-color: unset;
}
.new-offer-pricing-container:not(.closed-container) .pricing-type-change > div:nth-child(1) {
	margin-bottom: 4px;
}
.new-offer-pricing-container.closed-container .pricing-type-change > div:not(div:nth-child(1)) {
	text-transform: lowercase;
}
.new-offer-pricing-container.closed-container .pricing-type-change > div:nth-child(1)::after {
	content: ":";
} 
.new-offer-pricing-container.closed-container .pricing-additional-container > *:not(.buttons) {
    max-height: 0;
    overflow: hidden;
    margin: 0;
    padding: 0;
    border: 0;
	max-width: 0;
}
.new-offer-pricing-container.closed-container .buttons {
	margin: 4px;
}
.new-offer-pricing-container:not(.closed-container) .buttons {
	margin: 0px 4px 4px 0;
}
.new-offer-pricing-container.closed-container .pricing-type-change input,
.new-offer-pricing-container.closed-container .pricing-type-change > div:not(:has(input:checked)):not(div:nth-child(1)),
.new-offer-pricing-container:not(.closed-container) .btn-show,
.new-offer-pricing-container.closed-container .btn-hide {
	display: none;
}

.new-offer-pricing-container .btn-grey {
	padding: 2px 6px !important;
	border-radius: 4px;
	font-size: 12px;
	text-transform: lowercase;
	background-color: #f1f1f1;
}
.new-offer-pricing-container .btn-grey:hover {
	background-color: #e7e7e7;
}

.new-offer-pricing-container {
	border: 1px solid #dedede;
	border-top: 0px;
}

	.pricing-type-change > div:has(input[type="radio"]) {
		display: flex;
		gap: 4px;
		padding-left: 15px;
	}
		.offer-type-label {
			user-select: none;
			cursor: pointer;
		}
		.pricing-type-change input[type="radio"] {
			margin-top: 0px;
			cursor: pointer;

		}
		.offer-type-label.warning {
			color: red;
		}
		.pricing-radio-label.orig-selection {
			font-style: italic;
		}

.pricing-additional-container {
	max-height: 540px;
	transition: 400ms all;
	overflow: hidden;
}

[data-for-offer] {
	display: none;
}

.pricing-additional-container[data-offer-type="room_loop"] [data-for-offer*="room_loop"],
.pricing-additional-container[data-offer-type="servicepoint_loop"] [data-for-offer*="servicepoint_loop"],
.pricing-additional-container[data-offer-type="inspection"] [data-for-offer*="inspection"],
.pricing-additional-container[data-offer-type="maintenance"] [data-for-offer*="maintenance_roomloop"],
.pricing-additional-container[data-offer-type="maintenance_counterloop"] [data-for-offer*="maintenance_counterloop"],
.pricing-additional-container[data-offer-type="loop_design"] [data-for-offer*="loop_design"],
.pricing-additional-container[data-offer-type="loop_not_known"] [data-for-offer*="loop_not_known"],
.pricing-additional-container[data-offer-type="loop_not_installed"] [data-for-offer*="loop_not_installed"]
{
	display: block;
}

.pricing-type-change > div:nth-child(1),
.pricing-additional-parameters > div > div:nth-child(1) {
	padding: 4px 0px 4px 9px;
	background-color: #f0f0f0;
}
.pricing-additional-parameters > div > div:nth-child(2) {
	padding: 4px 0px 6px 15px;
	display: grid;
	grid-auto-flow: row;
	grid-template-columns: 1fr 1fr;
	gap: 4px;
	align-items: center;
}
	.pricing-radio-container > div {
		display: flex;
		gap: 4px;
	}
		.pricing-radio-label {
			user-select: none;
			cursor: pointer;
			line-break: anywhere;
		}
		.pricing-radio-container input {
			cursor: pointer;
			margin: 0;
		}
.max-height-0 {
	max-height: 0px;
	border-color: rgba(255, 255, 255, 0);
}
.additional-header {
	background-color: #3A4246;
	color: white;
	padding: 6px 9px;
	text-align: center;
}
.additional-header-space {
	background-color: palegoldenrod;
	padding: 6px 9px;
	text-align: center;
}
.pricing-amptable {
	padding: 6px 9px 9px 9px;
	display: grid;
	grid-template-columns: auto 1fr;
	column-gap: 10px;
	row-gap: 2px;
}

[class^="dotify"] {
    position: relative;
    z-index: 1;
    text-align: center;
    line-height: 0em;
    overflow: hidden;
	background-color: rgba(0, 0, 0, 0);
	user-select: none;
}
.dotify-2em {
    width: 2em;
    height: 2em;
    padding: 1em 0em !important;
}
.dotify-25em {
    width: 2.5em;
    height: 2.5em;
    padding: 1.25em 0em !important;
}
[class^="dotify"]::after {
    content: " ";
    position: absolute;
    width: 100%;
    height: 100%;
    background: #dedede;
    z-index: -1;
    left: 0;
    top: 0;
    border-radius: 100%;
}
[class^="dotify"].white::after {
	background: #fff;
}

.outline-input { 
	outline: 1px solid #ccc;
	outline-offset: -1px;
	user-select: none;
	background-color: #f7f7f7;
	cursor: not-allowed;
}

.task-other-amp:not(.clicked):hover > div:nth-child(1) {
	background: #ececec;
	outline: 4px solid #ececec;
}
.task-other-amp:not(.clicked):hover * {
	color: black;
}
.task-other-amp:not(.clicked) * {
	color: #bbb;
	user-select: none;
}
.task-other-amp:not(.clicked) a {
	pointer-events: none;
}

.task-other-amp > div:nth-child(2) {
	transition: 200ms all;
}
.task-other-amp:not(.clicked) > div:nth-child(2) { max-height: 0px; overflow: hidden;}
.task-other-amp.clicked > div:nth-child(2) { max-height: 200px; }

#reportfiles_container > div:not(:nth-child(1)) {
	border-top: #ddd solid 1px;
}
#reportfiles_container > div:nth-child(2n+2) {
	background-color: #f9f9f9;
}

.grouped-together-radio:has([contenteditable]:focus-visible),
.grouped-together-radio:has(.open) {
	display: flex;
	column-gap: 6px;
}
.grouped-together-radio:has([contenteditable]:focus-visible) .radio-button-container,
.grouped-together-radio:has(.open) .radio-button-container {
	flex: 1 0;
}
.grouped-together-radio > div {
	display: inline-block;
}
.grouped-together-radio > div:first-child {
	font-weight: bold;
}

.grouped-together-radio {
	position: relative;
}

.radio-button-container:not(.grouped-together-radio .radio-button-container) {
	position: relative;
}
.radio-button-container.disabled > .radio-buttons {
	filter: grayscale(1);
	pointer-events: none;
	user-select: none;
	opacity: 0.5;
}
	.radio-button-container .clear-selection {
		position: absolute;
		left: -20px;
		color: #bdbdbd;
		cursor: pointer;
		transition: 150ms;
		top: 50%;
		transform: translateY(-50%);
	}
	.radio-button-container .clear-selection:hover {
		color: black;
		z-index: 3;
		transform: scale(1.45) translate(-2px, -50%);
		transform-origin: 0 0;
	}
	.radio-button-container ul,
	.radio-button-container ol {
		margin-top: 0;
		margin-bottom: 0;
	}

.radio-buttons * {
	transition: 0.15s ease background-color;
}

.radio-buttons {
	/* transition: 0.3s ease-in-out max-height; */
	transition: 0.3s;
	user-select: none;
	overflow: hidden;
}
.radio-buttons.bordered {
    outline: 2px solid #7FC241;
    border-radius: 6px;
    padding: 6px 4px;
	width: 100%;
}

.radio-buttons.peek {
	outline: 2px solid #7fc24181;
}
	.radio-buttons.peek label,
	.radio-buttons.peek div:last-child {
		display: none;
	}
.radio-buttons.closed {
	max-height: 0 !important;
}
.radio-buttons.closed.finished {
	outline: none;
	margin: 0;
	padding: 0;
	display: none;
}

.radio-buttons .peek-heading,
.radio-buttons .radio-heading {
    border-top: 0;
    left: 50%;
    width: fit-content;
    font-size: 13px;
    font-family: 'PT Sans';
    font-weight: bold;
    padding-left: 6px;
}
.radio-buttons .radio-heading {
    margin-bottom: -3px;
}
.radio-buttons .peek-heading {
	width: 100%;
}

.radio-buttons label {
	display: flex;
	cursor: pointer;
	font-weight: 500;
	position: relative;
	overflow: hidden;
	margin-bottom: 0;
}
.radio-buttons label input {
	position: absolute;
	left: -9999px;
}
.radio-buttons label input:checked + span {
	background-color: #7FC241;
	color: #fff;
}

.radio-buttons label input:checked + span:before {
	box-shadow: none;
}


/* container for symbol, ring and selection value */
.radio-buttons label span {
    display: grid;
    align-items: center;
    border-radius: 1em;
    min-height: 2em;
    grid-template-columns: auto 1fr;
    grid-gap: 0.5em;
	padding-right: 0.75em;
	line-height: 1;
}

/* checked symbol */
.radio-buttons label input + span:after {
    content: "\e013";
    font-family: 'Glyphicons Halflings';
    color: #7fc241;
    position: absolute;
    opacity: 0;
    font-weight: bold;
    display: grid;
    align-items: center;
    justify-items: center;
	
	/* left, width, height = 1/0.65 * [PARENT VALUE, .radio-buttons label span:before] */
	font-size: 0.65em;
    left: 0.38em;
    width: 2.31em;
    height: 2.31em;
}
.radio-buttons label input:checked + span:after {
	opacity: 1;
	color: #7fc241 !important;
}

.radio-buttons label:hover input:not(:checked) + span:after {
	opacity: 1;
}

.radio-buttons label:hover span:before {
	box-shadow: inset 0 0 0 0.1em #7fc241;
}

.radio-buttons label span:before {
    display: grid;
    justify-items: center;
    align-items: center;
    content: "";
    background-color: #fff;
    width: 1.5em;
    height: 1.5em;
    border-radius: 50%;
    font-size: 1em;
    margin-left: 0.25em;
    box-shadow: inset 0 0 0 0.1em #3a4246;
}

/* #fixed_image_container {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	background-color: rgba(0, 0, 0, .25);
	z-index: 10000;
} */
	/* #fixed_image_container > img {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		max-height: 90vh;
		max-width: 90vw;

		background-color: #dedede;
		object-fit: contain;
		border: 9px solid #dedede;
		border-radius: 12px;
	} */

	#fixed_image_container {
		position: fixed;
		top: 0;
		left: 0;
		width: 100vw;
		height: 100vh;
		background-color: rgba(0, 0, 0, .25);
		z-index: 10000;
	}
	#fixed_image_container > .close-bg {
		z-index: 1;
		width: 100%;
		height: 100%;
	}
	#fixed_image_container > .fore {
		z-index: 2;

		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		background-color: #fff;
		border: 9px solid #fff;

		border-radius: 12px;
		display: grid;
	}
		#fixed_image_container .grid {
			padding-top: 9px;
			user-select: none;
		}
		#fixed_image_container img {
			max-height: 90vh;
			max-width: 90vw;
			object-fit: contain;
		}
		#fixed_image_container .img-buttons {
			position: absolute;
			left: 50%;
			transform: translate(-50%, 0%);
			top: 0.35em;
			display: grid;
			gap: 1em;
			grid-auto-flow: column;
			font-size: 1.5em;
		}
		#fixed_image_container .img-buttons > i {
			opacity: 0.25;
			background-color: dimgrey;
			width: 1.5em;
			border-radius: 100%;
			height: 1.5em;
			display: grid;
			align-items: center;
			justify-items: center;
		}

#float_image_container {
	position: absolute;
	z-index: 10000;
}
	#float_image_container > img {
		background-color: #dedede;
		object-fit: contain;
		border: 4px solid #dedede;
		border-radius: 12px;
	}
	#float_image_container > img[alt]:after {  
		display: block;
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: #fff;
		font-family: 'Helvetica';
		font-weight: 300;
		line-height: 2;  
		text-align: center;
		content: attr(alt);
	}
#fixed_image_container img[src=""],
#float_image_container img[src=""] {
	display: none;
}

.disabled-flag {
	user-select: none;
	filter: grayscale(1);
}
	.disabled-flag > .radio-buttons > label {
		pointer-events: none;
	}
	.disabled-flag input {
		pointer-events: none;
	}
	.disabled-flag .radio-buttons label span:before {
		background-color: #efefef;
		box-shadow: inset 0 0 0 0.1em #ccc;
	}
	.disabled-hover-info {
		align-items: center;
		overflow: hidden;
		transition: 200ms;
		font-weight: bold;
	}
		.disabled-flag:not(:hover) .disabled-hover-info {
			height: 0;
		}
		.disabled-flag:hover .disabled-hover-info {
			height: 2em;
		}

.fit-contain-50-child > img {
	object-fit: contain !important;
	max-height: 50vh;
}

.task-floating-info,
.task-floating-result {
	position: absolute;
    z-index: 1;
    padding: 6px 9px;
    color: white;
    border-radius: 9px;
	max-width: 250px;
    width: max-content;
	user-select: none;
}
.task-floating-info {
	background-color: #428bca;
}
.task-floating-result {
    background-color: #3A4246;
}

.task-field-input-container {
	display: grid;
	align-items: start;
	column-gap: 20px;
}
	.task-field-input-container.create, 
	.task-field-input-container.update {
		grid-template-columns: 1fr;
	}
	.task-field-input-container.report {
		grid-template-columns: 1fr 245px;

	}

.sub-container-fields {
	display: grid !important;
	grid-template-columns: 1fr auto;
	grid-template-rows: auto auto;
	grid-template-areas:
		"head head"
		"input preset";
}
.sub-container-fields:has(> *:nth-child(3)) {
	column-gap: 6px;
}
	/* heading, label, info, icons... */
	.sub-container-heading {
		min-height: 20px;
		grid-template-columns:  auto 1fr auto;
		display: grid;
		column-gap: 6px;
		user-select: none;
		grid-area: head;
	}
		
	/* input(s) */
	.sub-container-inputs {
		display: grid;
		grid-template-columns: 1fr auto;
		align-items: center;
		row-gap: 5px;
		margin-bottom: 10px;
	}
	:is(.create, .update) .sub-container-inputs.multi {
		grid-column: span 2;
	}
	.create .sub-container-inputs.multi,
	.update .sub-container-inputs.multi,
	.report .sub-container-inputs.multi {
		background-color: #f5f5f5;
	}
	.sub-container-inputs img {
		max-height: 300px;
		object-fit: contain;
	}
		.create .sub-container-inputs img,
		.update .sub-container-inputs img {
			width: fit-content;
		}
		.report .sub-container-inputs img {
			max-width: 570px;
		}
		.sub-container-inputs.multi {
			padding: 12px 12px; 
			border-width: 1px;
			border-style: solid;
			border-radius: 9px;
		}
		.sub-container-inputs.multi.normal {
			border-color: #cecece;
		}
		.sub-container-inputs.multi.emphasis,
		.sub-container-inputs.single.emphasis input,
		.sub-container-inputs.single.emphasis textarea {
			border-color: #d9534f;
		}
		.sub-container-inputs.multi.emphasis:focus-visible,
		.sub-container-inputs.single.emphasis input:focus-visible,
		.sub-container-inputs.single.emphasis textarea:focus-visible {
			outline: 2px solid red;
		}

		.sub-container-inputs .prefill input,
		.sub-container-inputs .prefill textarea {
			background-color: #5f9ea010;
		}
		.sub-container-inputs .prefill label {
			color: #5f9ea0;
		}

.task-field-result-container {
	display: grid !important;
	grid-template-columns: 1fr 3fr;
}
	.task-field-result-container .span {
		grid-column: span 2;
	}
	.task-field-result-container ul {
		margin-bottom: 0px;
		padding-left: 24px;
	}
	.task-field-result-container [data-col="1"] {
		padding: 5px 9px 5px 0px;
	}
	.task-field-result-container [data-col="2"] {
		padding: 5px 3px 6px 9px;
	}

.task-field-result-buttons {
	display: grid;
	grid-auto-flow: column;
	column-gap: 9px;
	margin-top: 9px;
	justify-content: left;
}

i.fa.fa-wrench {
	transform: rotateY(180deg);
}

.list-add-button {
    border-radius: 99%;
    width: 22px;
    height: 22px;
    display: grid;
    place-content: center;
    font-size: 14px;
    margin-top: 6px;
}

.preset-container {
	display: grid;
	gap: 4px;
	margin-bottom: 10px;
	grid-auto-flow: column;
}

.preset-button {
    border-radius: 9px;
    display: grid;
    place-content: center;
    font-size: 12px;
	padding: 4px 9px;
	border: 1px solid #ccc;
}


@media (min-width: 768px) {
	.not-collapsed-desktop.invert-collapsed {
		display: none !important;
		visibility: hidden !important;
	}
	.is-rotated-desktop:not(.invert-rotated) {
		transform: rotateZ(180deg);
	}
}

@media (max-width: 768px) {
	.is-collapsed-mobile:not(.invert-collapsed) {
		display: none !important;
		visibility: hidden !important;
	}
	.not-rotated-mobile.invert-rotated {
		transform: rotateZ(180deg);
	}
}