/***
	Root
***/
:root,
[data-bs-theme="light"] {
	--cs-main-bg : #f1f3f5;
	--cs-profile-bg : #e9ecef;
	--csn-logo : url(resources/csn_software_light.png);
	--csn-logo-small : url(resources/csn_software_light_small.png);
	--bds-logo : url(resources/bds_topografie_light.png);
	--app-logo : url(resources/point_cloud_viewer_light.png);
}
[data-bs-theme="dark"] {
	--cs-main-bg : #1a1d20;
	--cs-profile-bg : #202226;
	--csn-logo : url(resources/csn_software_dark.png);
	--csn-logo-small : url(resources/csn_software_dark_small.png);
	--bds-logo : url(resources/bds_topografie_dark.png);
	--app-logo : url(resources/point_cloud_viewer_dark.png);
}

/***
	Potree
***/
.potree-body {
	margin: 0;
	padding: 0;
	position: absolute;
	width: 	100%;
	height: 100%;
	overflow: hidden;
}

.potree-container {
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
}

.potree-render-area {
	position: absolute;
	background-image: var(--bds-logo);
	background-repeat: no-repeat;
	background-position: center;
	background-color: var(--cs-main-bg);
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	overflow: hidden;
	z-index: 1;
	-webkit-transition: left .35s;
	transition: left .35s;
}

/* Potree Sidebar */
.potree-sidebar {
	position: absolute;
	z-index: 0;
	width: 22rem;
	height: 100%;
	overflow-y: scroll;
	border-right: none;
	background-color: var(--cs-main-bg);
}

.sidebar-logo {
	width: auto;
	margin: 2rem auto 1rem;
	height: 4.25rem;
	background-image: var(--bds-logo);
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}

.menu-title {
	display: flex;
	align-items: center;
	color: var(--bs-emphasis-color);
	margin: 0.15rem 0 0;
	padding: 0.25rem 0.75rem;
	font-size: 1.125rem;
	font-family: 'hos_sans_medium';
	cursor: pointer;
}

.menu-title-arrow-left {
	margin-top: 0.1rem;
	opacity: 0.5;
}

.menu-container {
	margin: 0.375rem 0.5rem;
	padding: 0.25rem 0 0.625rem;
	background-color: var(--bs-body-bg);
	border-radius: 1rem;
	font-size: 0.9375rem;
}

.menu-list {
	padding: 0;
	margin: 0;
	overflow: hidden;
	list-style-type: none;
}

.menu-list > * {
	margin: 0.25rem 0.625rem;
	padding: 0.125rem 0.25rem;
}

.menu-subtitle {
	font-size: 1rem;
	font-family: 'hos_sans_medium';
	overflow: hidden;
	white-space: nowrap;
}

.sidebar-footer-logo {
	margin: 1.5rem 0 0.5rem;
	width: auto;
	height: 2.5rem;
	background-image: var(--csn-logo-small);
	background-repeat: no-repeat;
	background-position: left;
	background-size: contain;
}

.menu-about-desc {
	margin: 0 0 0.25rem;
	font-size: 1rem;
}

.menu-about-link {
	margin: 0 0 0.25rem;
	font-size: 0.9375rem;
	font-family: 'hos_sans_medium';
}

.app-logo {
	margin: 0 auto;
	width: auto;
	height: 6rem;
	background-image: var(--app-logo);
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}

/***
	Profile
***/
#profile_window {
	background-color: var(--cs-profile-bg);
}

.profile-container-button {
	cursor: pointer;
}

.profile-button:hover {
	background-color: #0000CC;
}

.axis {
	font-size: 0.625rem;
	color: var(--bs-secondary-color);
}

.axis path{
	fill: var(--bs-tertiary-color);
	stroke: var(--bs-tertiary-color);
	shape-rendering: crispEdges;
	opacity: 0.7;
}

.axis line {
	fill: var(--bs-secondary-color);
	stroke: var(--bs-secondary-color);
	shape-rendering: crispEdges;
	opacity: 0.1;
}

.tick text{
	font-size: 0.75rem;
}

.profile-window {
	display: none;
	position: absolute; 
	width: 84%;
	height: 48%;
	top: 55%;
	left: 15%;
	margin: 0.25rem;
	border: solid var(--bs-border-color);
	border-width: var(--bs-border-width);
	border-radius: 0.5rem;
	z-index: 10000;
}

.profile_titlebar {
	display: flex;
	position: absolute;
	width: 100%;
	height: 1.875rem;
	border-radius: 0.75rem;
}

.profile-title {
	position: absolute;
	margin: 0.5rem 0.75rem 0;
	color: var(--bs-body-color);
	font-size: 1rem;
	font-family: 'hos_sans_medium';
}

.profile-title-sp {
	flex-grow: 1;
	flex-direction: row;
}

.profile-close {
	width: 1.5rem;
	height: 1.5rem;
	margin: 0.25rem 0.5rem 0;
}

.profile-content {
	position: absolute;
	top: 2.125rem;
	width: 100%;
	height: calc(100% - 3.75rem);
	padding: 0px 0.75rem 0.5rem;
}

.profile-toolbar {
	width: 100%;
	height: auto;
	margin: 0 0 0.25rem;
	display: flex;
	flex-direction: row;
	align-items: center;
	font-size: 0.875rem;
	color: var(--bs-body-color);
}

.profile-rotate-amount {
	width: 4rem;
	padding: 0 !important;
	display: inline-block;
	vertical-align: top;
	text-align: center;
}

.profile-draw-container {
	width: 100%;
	flex-grow: 1;
	position: relative; height: 100%;
	box-sizing: border-box;
	user-select: none;
}

.profile-canvas-bg {
	position: absolute;
	width: calc(100% - 2.5rem);
	height: calc(100% - 1.25rem);
	bottom: 1.25rem;
	left: 2.5rem;
	top: 0;
	background-color: var(--bs-tertiary-bg);
}

.profile-axis {
	position: absolute;
	left: 0; right: 0;
	top: 0; bottom: 0;
	width: 100%;
	height: 100%;
	color: var(--bs-body-color);
	fill: var(--bs-tertiary-color);
}

.profile-canvas-container {
	position: absolute;
	left: 2.5rem;
	top: 0;
	bottom: 1.25rem;
	width: calc(100% - 2.5rem);
	height: calc(100% - 1.25rem);
}

.profile-properties {
	position: absolute;
	left: 3rem;
	top: 0.25rem;
	background-color: var(--bs-body-bg);
	color: var(--bs-body-color);
	opacity: 0.8;
	padding: 0.5rem;
	border: solid var(--bs-border-color);
	border-width: var(--bs-border-width);
	border-radius: var(--bs-border-radius);
	user-select: text;
	font-size: 0.8125rem;
	text-transform: capitalize;
	line-height: 1.2;
}

/***
	Checkbox
***/
input[type="checkbox"] {
	-webkit-appearance: none;
	appearance: none;
	width: calc(1rem + 3px);
	height: calc(1rem + 3px);
	margin: 0.1875rem;
	position: relative;
	border: var(--bs-border-width) solid var(--bs-border-color);
	border-radius: 0.25rem;
	background-color: var(--bs-tertiary-bg);
	transition: transform 0.2s cubic-bezier(.12, .32, .54, 2), background-color 0.15s;
	pointer-events: none;
	line-height: 1.2;
	cursor: pointer;
}

/* Checkbox checked */
input[type="checkbox"]:checked {
	background-color: var(--bs-primary);
	border: var(--bs-border-width) solid var(--bs-primary-border-subtle);
}

/* Checkbox after */
input[type="checkbox"]::after {
	content: "";
	display: inline-block;
	width: 0;
	height: 0;
	border: solid #ffffff;
	border-width: 0.1875rem 0 0 0.1875rem;
	box-sizing: border-box;
	transform-origin: 0 0;
	position: absolute;
	top: 0.75rem;
	left: 0.45rem;
	transform: scale(0.55) rotate(-135deg);
	opacity: 0;
}

input[type="checkbox"]:checked::after {
	opacity: 1;
	width: 0.625rem;
	height: 1.0625rem;
}

input[type="checkbox"]:hover::after {
	transition: width 0.1s, height 0.25s;
}

/* Checkbox focus ring */
input[type="checkbox"]:focus-ring {
	box-shadow: 0 0 0 var(--bs-focus-ring-width) var(--bs-focus-ring-color);
}

/* Checkbox disabled */
input[type="checkbox"]:disabled {
	opacity: 0.5;
	cursor: none;
}

/* Checkbox before */
input[type="checkbox"]::before {
	content: "\2003";
	color: transparent;
	display: inline-block;
	width: 100%;
	height: 100%;
	border-radius: inherit;
	background-color: inherit;
	transform: scale(1.4);
	opacity: 0;
	transition: transform 0.1s, opacity 0.8s;
}

/* Checkbox hover */
input[type="checkbox"]:not([checked]):not([indeterminate]):not([disabled]):hover {
	box-shadow: 0 0 0 var(--bs-focus-ring-width) var(--bs-focus-ring-color);
}

/* Checkbox active */
input[type="checkbox"]:active {
	transform: scale(0.9);
	transition-duration: 0.05s;
}

input[type="checkbox"]:active:checked {
	transform: scale(1.1);
}

input[type="checkbox"]:active:not([checked])::before {
	transition-duration: 0.01s, 0.01s;
	transform: scale(0);
	opacity: 0.4;
}

/* Checkbox label */
.checkbox-label {
	padding: 0 0.125rem;
	font-size: 0.9375rem;
	color: var(--bs-body-color);
}

/***
	Slider
***/
.ui-slider {
	margin: 0.5rem 0em;
}

.ui-slider .ui-slider-handle {
	top: -0.375rem !important;
	background-color: var(--bs-body-bg) !important;
	border: var(--bs-border-width) solid var(--bs-border-color) !important;
	border-radius: 0.5rem !important;
}

.ui-slider .ui-slider-range {
	background-color: var(--bs-primary) !important; 
}

.ui-slider-horizontal {
	height: 0.375rem !important;
	background-color: var(--bs-secondary-bg) !important;
	border: none !important;
}

.ui-slider .ui-slider-handle:active,
.ui-slider .ui-slider-handle:hover,
.ui-slider .ui-slider-handle:focus,
.ui-slider .ui-state-focus,
.ui-slider .ui-state-active
{
	box-shadow: 0 0 0 var(--bs-focus-ring-width) var(--bs-focus-ring-color) !important;
	outline: none;
}

.ui-state-default{
	background: var(--bs-tertiary-bg) !important;
	border: var(--bs-border-width) solid var(--bs-border-color) !important;
	color: var(--bs-body-color) !important;
}

.ui-state-active{
	background: var(--bs-primary) !important;
	background-image: linear-gradient( 140deg, rgb(13, 101, 253), rgb(10, 133, 237) 50%, rgb(12, 99, 231) 75% ) !important;
    transition: background-position 0.5s ease-in-out !important;
    background-size: 200% 200% !important;
    background-position: 0% 0% !important;
	border: none !important;
	color: var(--bs-white) !important;
}

.ui-state-active:hover {
	background-position: 100% 100% !important;
}

.ui-button {
	border-radius: 0.5rem;
}

.ui-selectmenu-button.ui-button{
	width: 100% !important;
}

.ui-selectmenu-button {
	padding: 0.4375rem 0.9375rem 0.375rem !important;
	margin: 0.375rem 0 0;
	background: var(--bs-tertiary-bg) !important;
	border: var(--bs-border-width) solid var(--bs-border-color) !important;
	border-radius: 0.5rem !important;
	color: var(--bs-body-color) !important;
	text-transform: capitalize;
}

.ui-menu {
	background: var(--bs-body-bg) !important;
	border: var(--bs-border-width) solid var(--bs-border-color) !important;
	border-radius: 0.6rem !important;
	color: var(--bs-body-color) !important;
	font-size: 0.875em !important;
	text-transform: capitalize;
}

.ui-menu-item-wrapper {
	padding: 0.3rem 0.8rem !important;
	line-height: 1.2 !important;
}

/***
	Textfield
***/
input[type="text"], input[type="textfield"] {
	-webkit-appearance: none;
	appearance: none;
	padding: 0.25rem 0.5rem;
	margin: 0 0.375rem;
	background-color: var(--bs-tertiary-bg);
	border: var(--bs-border-width) solid var(--bs-border-color);
	border-radius: 0.5rem;
	color: var(--bs-body-color);
	font-size: 0.9375rem !important;
}

input[type="text"]:focus, input[type="text"]:hover,
input[type="textfield"]:focus, input[type="textfield"]:hover {
	border: var(--bs-border-width) solid var(--bs-primary);
	outline: none;
}

/***
	Button
***/
input[type="button"] {
	-webkit-appearance: none;
	appearance: none;
	padding: 0.25rem 0.75rem;
	margin: 0 0.25rem;
	background: var(--bs-primary);
    background-image: linear-gradient( 140deg, rgb(13, 101, 253), rgb(10, 133, 237) 50%, rgb(12, 99, 231) 75% );
    transition: background-position 0.5s ease-in-out;
    background-size: 200% 200%;
    background-position: 0% 0%;
	border: none;
	color: var(--bs-white);
	border-radius: 0.5rem;
	font-size: 0.9375rem;
	font-family: 'hos_sans_medium';
	text-transform: capitalize;
	cursor: pointer;
	transition: all 200ms ease;
	-webkit-transition: all 200ms ease;
}

input[type="button"]:focus,
input[type="button"]:hover {
	background-position: 100% 100%;
}

input[type="button"][disabled] {
	cursor: default;
	opacity: 0.5;
}

input[type="button"][disabled]:focus,
input[type="button"][disabled]:hover {
	opacity: 0.5;
}

.btn-danger {
	background: var(--bs-danger) !important;
    background-image: linear-gradient( 140deg, rgb(220, 53, 69), rgb(210, 20, 58) 50%, rgb(229, 40, 48) 75% ) !important;
}

.btn-danger:hover {
	background-position: 100% 100% !important;
}

.copy-link-btn {
	margin: 0 !important;
    border: none !important;
	background-color: var(--bs-primary) !important;
    background-image: linear-gradient( 140deg, rgb(13, 101, 253), rgb(10, 133, 237) 50%, rgb(12, 99, 231) 75% ) !important;
    transition: background-position 0.5s ease-in-out !important;
    background-size: 200% 200% !important;
    background-position: 0% 0% !important;
    color: var(--bs-white) !important;
}

.copy-link-btn:hover {
	background-position: 100% 100% !important;
}

/***
	Spinner
***/
.ui-spinner {
	background: var(--bs-tertiary-bg) !important;
	border: var(--bs-border-width) solid var(--bs-border-color) !important;
	border-radius: 0.5rem !important;
	color: var(--bs-body-color) !important;
}


.ui-spinner > a {
	border: none !important;
	border-radius: 0 !important;
}

.ui-spinner-input{
	color: var(--bs-body-color);
	padding: 0.25rem 0 !important;
	margin: 0 0.375rem !important;
}

.ui-spinner-input:focus,
.ui-spinner-input:hover {
	outline: none;
}

/***
	JSTree
***/
#jstree_scene a{
	color: var(--bs-body-color);
	cursor: default;
}

.jstree-checkbox {
	cursor: pointer;
}

.jstree-themeicon-custom{
	background-size: 1rem !important;
}

.jstree-default .jstree-clicked{
	background-color: var(--bs-border-color-translucent) !important;
}

.jstree-default .jstree-hovered{
	background-color: var(--bs-border-color-translucent) !important;
}

.jstree-anchor{
	width: 100% !important;
}

/***
	Scrollbar
***/
::-webkit-scrollbar {
	width: 0.375rem;
	background-color: var(--bs-secondary-bg);
	border-radius: 0.1875rem;
	opacity: 0.5;
}

::-webkit-scrollbar-thumb {
	background-color: var(--bs-tertiary-color);
	border-radius: 0.1875rem;
}

/***
	Annotation
***/
.annotation{
	position: absolute;
	padding: 0.625rem;
	opacity: 0.5;
	transform: translate(-50%, -30px);
	will-change: left, top;
}

.annotation-titlebar{
	color: var(--bs-white);
	background-color: var(--bs-black);
	border-radius: var(--bs-border-radius);
	border: var(--bs-border-width) solid var(--bs-border-color);
	font-size: 0.875rem;
	opacity: 1;
	margin: auto;
	display: table;
	padding: 0.125rem 0.5rem;
	cursor: pointer;
}

.annotation-expand{
	color: var(--bs-white);
	font-size: 0.625rem;
	opacity: 1;
}

.annotation-action-icon{
	width: 1.25rem;
	height: 1.25rem;
	display: inline-block;
	vertical-align: middle;
	line-height: 1.5em;
	text-align: center;
	font-family: 'hos_sans_medium';
	cursor: pointer;
}

.annotation-action-icon:hover{
	filter: drop-shadow(0px 0px 1px var(--bs-border-color));
	width: 1.5rem;
	height: 1.5rem;
	cursor: pointer;
	
}

.annotation-item {
	color: var(--bs-white);
	background-color: var(--bs-black);
	opacity: 0.5;
	border-radius: 1.5rem;
	font-size: 1rem;
	line-height: 1.5rem;
	padding: 0.125rem 0.5rem 0px 0.5rem;
	font-family: 'hos_sans_medium';
	display: flex;
	cursor: default;
}

.annotation-item:hover {
	opacity: 1;
	box-shadow: 0 0 0.25rem var(--bs-border-color);
}

.annotation-main{
	display: flex;
	flex-grow: 1;
}

.annotation-label{
	display: inline-block;
	height: 100%;
	flex-grow: 1;
	user-select: none;
	-moz-user-select: none;
	z-index: 100;
	line-height: 1.5rem;
	font-family: 'hos_sans_medium';
	cursor: pointer;
	white-space: nowrap;
}

.annotation-description{
	position: relative;
	display: none;
	color: var(--bs-white);
	background-color: var(--bs-black);
	padding: 0.375rem 0.5rem;
	margin: 0.25rem 0 0;
	border: var(--bs-border-width) solid var(--bs-border-color);
	border-radius: var(--bs-border-radius);
	max-width: 30rem;
	width: 30rem;
	font-size: 0.875rem;
}

.annotation-description-close {
	margin: 0;
	float: right;
	opacity: 0.5;
}


.annotation-description-content{
	color: var(--bs-white);
}

.annotation-icon{
	width: 1.25rem;
	height: 1.25rem;
	filter: invert(100%);
	margin: 0.125rem;
	opacity: 0.5;
}

/***
	Divider
***/
.divider {
	display: block;
	text-align: center;
	overflow: hidden;
	white-space: nowrap; 
	font-family: 'hos_sans_medium';
	font-size: 90%;
	letter-spacing: 1px;
	margin: 1px 0;
	padding: 1px !important;
}

.divider > span {
	position: relative;
	display: inline-block;
}

.divider > span:before,
.divider > span:after {
	content: "";
	position: absolute;
	top: 50%;
	width: 9999px;
	height: 1px;
	background: #b2b2b2;
}

.divider > span:before {
	right: 100%;
	margin-right: 5px;
}

.divider > span:after {
	left: 100%;
	margin-left: 5px;
}

/***
	ZS
***/
.zs_widget{
	padding: 0.125rem;
	height: 4rem;
	user-select: none;
}

.zs_core{
	overflow: hidden;
	position: relative;
	height: 100%;
}

.zs_handle{
	position: absolute;
	top: 0;
	bottom: 0;
	border: var(--bs-border-width) solid red;
	border-radius: 0.1875rem;
	background-color: rgb(166, 169, 170);
	width: 0.5rem;
	user-select: none;
	width: 1.2rem;
	height: 1.2rem;
	top: calc(50% - 0.6rem);
}

.zs_stretch{
	position: absolute;
	top: 0px;
	bottom: 0px;
	border: var(--bs-border-width) solid red;
	border-radius: 0.1875rem;
	background-color: rgb(166, 169, 170);
	width: 0.5rem;
	user-select: none;
	width: 1.2rem;
	height: 1.2rem;
	top: calc(50% - 0.6rem);
	color: black;
	font-family: 'hos_sans_medium';
	font-size: 1.2rem;
}

.zs_handle:hover{
	background-color: lightgreen;
}

.zs_inside{
	position: absolute !important;
	width: 100%;
	border: var(--bs-border-width) solid red;
	background-color: white;
	top: calc(50% - 0.325rem);
	height: 0.625rem;
	cursor: zoom-in;
}

.zs_outside{
	position: absolute !important;
	width: 100%;
	background-color: var(--bs-primary) !important;
	top: calc(50% - 0.325rem);
	height: 0.625rem;
	cursor: zoom-in;
}

.zs_visible_range_label{
	position: absolute;
	bottom: 0;
	pointer-events:none;
}

.zs_visible_range_label_left{
	left: 0;
}

.zs_visible_range_label_right{
	right: 0;
}

.zs_chosen_range_label{
	position: absolute;
	pointer-events:none;
}

/***
	Other
***/
.potree_failpage {
	width: 100%;
	height: 100%;
	background-color: white;
	position: absolute;
	margin: 1rem;
}

.potree_failpage a{
	color: initial !important;
	text-decoration: underline !important;
}

.potree_info_text {
	color: var(--bs-emphasis-color);
	font-family: 'hos_sans_medium';
	text-shadow:  1px  1px 1px var(--bs-secondary-bg-subtle),
				  1px -1px 1px var(--bs-secondary-bg-subtle),
				 -1px  1px 1px var(--bs-secondary-bg-subtle),
				 -1px -1px 1px var(--bs-secondary-bg-subtle);
}

.potree_message {
	width: 31.25rem;
	background-color: var(--bs-body-bg);
	padding: 0.25rem;
	margin: 0.25rem;
	border-radius: 0.25rem;
	color: var(--bs-body-color);
	opacity: 0.8;
	border: var(--bs-border-width) solid var(--bs-border-color);
	display: flex;
	overflow: auto;
	border-radius: 0.75rem;
}

.potree_message_error {
	background-color: var(--bs-danger-bg-subtle);
	border: var(--bs-border-width) solid var(--bs-danger);
}

#potree_description {
	position: absolute;
	top: 0.625rem;
	left: 50%;
	transform: translateX(-50%);
	text-align: center;
	font-size: 1rem;
	z-index: 1000;
}

#potree_sidebar_container a {
	color: var(--bs-primary);
	cursor: pointer;
	font-size: 1rem;
}

#potree_quick_buttons {
	position: absolute;
	left: 0.25rem;
	top: 0.25rem;
	width: 0.625rem;
	height: 0.625rem;
	z-index: 10000;
	float: left;
}

.potree_menu_toggle {
	float: left;
	margin: 0;
	background: none;
	width: 2.5rem;
	height: 2.5rem;
	z-index: 100;
	cursor: pointer;
	margin: 0.25rem;
}

#potree_map_toggle {
	float: left;
	margin: 0;
	background: none;
	width: 2.5rem;
	height: 2.5rem;
	z-index: 100;
	cursor: pointer;
	margin: 0.25rem;
}

.potree-panel {
	border: var(--bs-border-width) solid red;
	border-radius: 0.4rem;
	padding: 0;
	background-color: var(--bg-light-color);
}

.potree-panel-heading {
	background-color: var(--bg-dark-color);
}

a:hover, a:visited, a:link, a:active {
	text-decoration: none;
}

canvas {
	width: 100%;
	height: 100%
}

.scene_header {
	display: flex;
	cursor: pointer;
	padding: 0.125rem;
}

.measurement_content {
	padding: 0.25rem 1rem 0.25rem 0.75rem;
}

.propertypanel_content {
	padding: 0.25rem 1rem 0.25rem 0.75rem;
	font-size: 0.875rem;
}

.measurement_value_table {
	width: 100%;
	font-size: 0.875rem;
}

.coordinates_table_container table td {
	width: 33%;
	text-align: center;
}

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

.ui-widget {
	box-sizing: border-box;
}

.panel-body > li > .ui-slider {
	background-color: var(--bs-primary) !important;
	background: none;
}

.panel-body > div > li > .ui-slider {
	background-color: var(--bs-primary) !important;
	background: none;
}

.pv-select-label {
	margin: 0.125rem;
	font-size: 90%;
	font-weight: 100;
}

.button-icon {
	width: 1.5rem;
	height: 1.5rem;
	cursor: pointer;
}

.button-bi {
	font-size: 1.25rem;
	cursor: pointer;
}
.button-bi-tools {
	vertical-align: -0.125rem;
	font-size: 1rem;
	cursor: pointer;
}

.button-icon:hover {
	filter: drop-shadow(0px 0px 0.25rem var(--bs-body-color));
}

.button-bi:hover {
	filter: drop-shadow(0px 0px 0.25rem var(--bs-body-color));
}

.button-bi-tools:hover {
	filter: drop-shadow(0px 0px 0.25rem var(--bs-body-color));
}

.shadow-icon:hover {
	filter: drop-shadow(0px 0px 0.25rem var(--bs-body-color));
}

.icon-bar {
	height: 0.25rem !important;
	border: var(--bs-border-width) solid black;
	background-color: white;
	border-radius: 0.125rem;
}

.canvas {
	-webkit-transition: top .35s, left .35s, bottom .35s, right .35s, width .35s;
	transition: top .35s, left .35s, bottom .35s, right .35s, width .35s;
}

.unselectable {
	user-select: none;
}

.selectable {
	user-select: text;
}

.ol-dragbox {
  background-color: rgba(255,255,255,0.4);
  border-color: rgba(100,150,0,1);
  border: var(--bs-border-width) solid red;
}

.text-icon {
	height: 1.5rem;
	cursor: pointer;
	opacity: 0.8;
}

.text-icon:hover {
	filter: drop-shadow(0px 0px 0.25rem var(--bs-body-color));
}

.input-grid-cell {
	flex-grow: 1;
	margin: 0px 0.1875rem;
}

.input-grid-label {
	flex-grow: 1;
	margin: 0 0.1875rem;
	text-align: center;
	font-family: 'hos_sans_medium';
}

.input-grid-cell > input {
	width: 100%
}

.invalid_value {
	color: #e05e5e;
}

.cesium-viewer .cesium-viewer-cesiumWidgetContainer {
	position: absolute;
	height: 100%;
	width: 100%;
}

.propertypanel_content .heading {
	font-family: 'hos_sans_medium';
	padding-top: 0.6rem;
	padding-bottom: 0.125rem;
}

.bi {
	width: 1.5rem;
	height: auto;
	fill: currentcolor;
	font-size: 1rem;
}


/***
	Theme
***/
.dropdown-menu {
	padding: 0 var(--bs-dropdown-padding-x) !important;
}

.sp-container {
    background-color: var(--bs-tertiary-bg) !important;
    border: solid var(--bs-border-width) var(--bs-border-color) !important;
    border-radius: 0.5rem !important;
}

.sp-picker-container {
    width: 182px;
    border-left: none !important;
}

.sp-input {
	margin: 0 !important;
	font-family: 'hos_sans_regular' !important;
}

.sp-choose {
	appearance: none !important;
	padding: 0.25rem 0.75rem !important;
	margin: 0 0.25rem !important;
	background: var(--bs-primary) !important;
	border: var(--bs-border-width) solid var(--bs-primary) !important;
	color: var(--bs-white) !important;
	border-radius: 0.5rem !important;
	font-size: 0.9375rem !important;
	font-family: 'hos_sans_medium' !important;
	text-transform: capitalize !important;
	text-shadow: none !important;
	line-height: 1.5 !important;
	cursor: pointer !important;
	transition: all 200ms ease !important;
}

.sp-choose:focus,
.sp-choose:hover {
	opacity: 0.8 !important;
	transition: all 200ms ease !important;
	-webkit-transition: all 200ms ease !important;
}