body{
	color: #eee;
	background-color: #111;
	font-size:1rem;
}
h6{
	font-size:1rem;
	font-weight:600;
}
.collection-col{
	width: 170px;
	font-size: 1.2rem;
}
.elements-col{
	margin-left: 10px;
	width: calc(100% - 200px);
	font-size: 1.2rem;
}
.bootbox, #modal-collection, #modal-element, #modal-marker, #modal-settings, #modal-cti{
	background-color:hsla(0, 0%, 0%, 0.659);
}

.main{	
	height: calc(100vh - 86px);
}
.bg-panel{
	height: 75px;
}
.swal2-popup{
	color: #eee;
	background-color: #212529;
	font-family:sans-serif;
}
.modal-xl{
	max-width: 1600px;
}
.modal-lg{
	max-width: 700px;
}
.modal-content{
	background-color: #212529;
}
.logo-image-parent{
	height:100px;
}
.logo-container{
	border: solid 2px white;
}
.collection-image-parent{
	height: 50vh;
}

.element-image-parent, .marker-image-parent, .cti-image-parent{
	width: 100%;
	height: 65vh;
}
.thumbnail{
	display: inline-block; /* makes it fit in like an <img> */
	vertical-align: top;
	margin-left:5px
}
.thumbnail p{
	height: 36px;
	width: 150px;
	margin-top: 0;
	white-space: normal;
	text-align: left;
	font-size:.8rem
}
.thumbnail img {
    position:relative;
	background-color: black;
    width: 150px;
    height: 100px;
	object-fit: contain;
}
.thumbnail img:hover{
	border: medium solid rgba(255,255,255,0.5);
	opacity: 0.8;
}
.thumbnail.dragging{
	cursor:grabbing;
}
.thumbnail.dragging img{
	border: medium solid red;
}
.carousel{
	overflow-x: auto;
	overflow-y: hidden;
	white-space: nowrap;
	scroll-behavior: smooth;
}
carousel::-webkit-scrollbar{
	width: 0px;
	display:none;
}
.image{
	width: 100%;
}
#left-arrow, #right-arrow{
    width: 100px;
    height: 100px;
	object-fit: contain;
	margin: auto;
}
#left-arrow:hover, #right-arrow:hover{
	opacity: 0.8;
}
.flip{
	-webkit-transform: scaleX(-1);
	transform: scaleX(-1);
}
#spinner{
	position: absolute;
	top:0;
	bottom: 0;
	left: 0;
	right: 0;	
	margin: auto;
	color:white;
	width: 10vw;
	height: 10vw;
	margin:auto;
	z-index: 2000;
	display:none;
}
#editor-element, #editor-marker, #editor-cti{
	font-family: var(--bs-font-sans-serif);
	font-weight: 400;
	font-size:1rem;
	line-height:1.5rem
}
#editor-element, #editor-cti{
	height: 54vh;
}
#editor-marker{
	height: 48vh;
}
#modal-element-title, #modal-marker-title, #modal-marker-wtitle{
	background-color: transparent;
	color: white;
}
.ql-size, .ql-picker-label, .ql-picker-item  {
    color: #fff!important;
}
.ql-picker-options{
	background-color:#212529!important;
}
.ql-toolbar .ql-stroke {
    fill: none!important;
    stroke: #fff!important;
}

.ql-toolbar .ql-fill {
    fill: #fff !important;
    stroke: none!important;
}

.ql-toolbar .ql-picker {
    color: #fff!important;
}
.ql-active {
	border: solid 1px white!important;
}

.img-btn img{
	opacity: 0.85;
}
.img-btn img:hover{
	transform: scale(1.2); opacity: 1
}
#drag-and-drop img{
	height:3vw;
}
.drag-div{
	position:absolute;
	width:inherit;
	height:100%;
	opacity: 0.5;
}
.drag-div img{
	object-fit:contain;
}
.overlay { position: absolute;  transition: all .5s ease;}
.pin
{
	width: 200px;
	height: 330px;
	transform: translate(-50%, -100%);
}

.pin img
{
	transition: all .3s ease;
	transform-origin: 50% 100%;
	position: absolute;
	left: 0;
	right: 0;
	margin: 0 auto;
	width: 100%;
	opacity: .85;
}
.pin:hover img { border: red solid 1px; opacity: 1;
}

.drag{
    position: absolute;
    top: 0;
    left: 0;
    width: 24px;
    height: 24px;
    display: block;
	background-image: url("/img/drag.svg");
	background-color:gray;
	border: solid 1px white;
	border-radius:3px;
	cursor:move;
}

.drag img{
	width:24px;
	height:24px;
	opacity:0.8;
	background-color: #555;
}
.drag:hover{
	opacity: 1;
	transform: scale(1.2);	
}
.pad-less{
	padding: 0.375rem;
}
.bg-musea{
	background-color: #eeece9
}
.dropdown-menu li{
	position: relative;
}
.dropdown-menu .submenu{ 
	display: none;
	position: absolute;
	left:100%; top:-7px;
}
.dropdown-menu .submenu-left{ 
	right:100%; left:auto;
}

.dropdown-menu > li:hover{ background-color: #f1f1f1 }
.dropdown-menu > li:hover > .submenu{
	display: block;
}
.toggle-password{
	display: inline;
	margin-left: -34px;
	color: #111;
	font-size: 24px;
}
#table-body{
	cursor:pointer;
}
.cloud-project, .submenu li, .submenu li a{
	text-align: left!important;
	float:left!important;
}
#editor-cti .ql-container{
	font-size: 20px!important;
}
#table-devices-body tr>:nth-child(2){
	background-color : white;
	color: black;
}
.it, .en{
	display:none;
}
.f08{
	margin-top:0.3rem;
	font-size:0.8rem;
	margin-bottom:0.3rem;
}
#feedback-min, #feedback-sec, #restart-min, #restart-sec{
	height: 1.6rem;
}
ul li{
	width:100%;
}
.narrow-form{
	width: 100%;
	max-width: 576px;
}