body, html {
	padding:0px;
	margin:0px;
	background-image:url(../img/background.jpg);
}

.select2-selection__rendered {

	padding:5px;
	height:35px;
}

.select2-selection {
	height: 40px !important;
}

.select2-search__field {
	background:#e8e8e8;
	color: black;
}

input::placeholder {
	font-size: 1em;
	color:#8f8f8f !important;
	transform:translate(-2px,-6px)
}

div.invalid-feedback {
	text-transform: capitalize;
	letter-spacing: -1px;
	background: #eddddd;
	border-radius: 3px;
	padding: 1px 5px;
}

input[type="text"]:focus,
input[type="password"]:focus,
.form-select:focus {
	box-shadow:none;
	border: var(--bs-border-width) solid var(--bs-border-color)
}


#overlay {
    position: fixed;
    top: 0;
    z-index: 9999;
    width: 100%;
    height:100%;
    display: none;
    background: rgba(0,0,0,0.6);
}
#overlay .cv-spinner {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;  
}
#overlay .cv-spinner .spinner {
  width: 40px;
  height: 40px;
  border: 4px #ddd solid;
  border-top: 4px #2e93e6 solid;
  border-radius: 50%;
  animation: sp-anime 0.8s infinite linear;
}
@keyframes sp-anime {
  100% { 
    transform: rotate(360deg); 
  }
}



/* login form  */

div#loginUI {
	overflow:auto;
	display:flex;
	position: absolute;
	top: 50%;
	transform: translate(-50%, -50%);
	left: 50%;
	padding:0px;
	background-image:url(../img/login-background.jpg);
	flex-direction: column;
	border-radius: 5px;
	max-width: 500px;
}

div#loginUI div[logo-container] {
	/* border:solid 1px red; */
	padding:1rem;
}
 
div#loginUI div[logo] {
	background-image: url(../img/logo.png);
	width: 7em;
	height: 7em;
	background-size:cover;
	margin: 1em auto;
}

div#loginUI div[login-form] {
	padding: 1em;
	width: 100%;
}


/* login form */


/* home page  */

div#homeUI {
	position:absolute;
	/* right:0px; */
	top: 20px;
	/* left:0px; */
	bottom: 20px;
	width: 100%;
	max-width: 1400px;
	left: 50%;
	transform: translateX(-50%);
	/* margin: 10px; */
}



 
 
div#homeUI div[page-header] {
	position: absolute;
	left: 10px;
	right: 10px;
	top: 00px;
	display:flex;
	overflow: hidden;
	height: 45px;
	text-align: center;
	background:#ffffff3d;
}

div#homeUI div[page-header] span {
	display:block;
	 
	font-size: 30px;
	margin:0 auto;
}

div#homeUI div[cimitero-header] {
	position: absolute;
	left: 10px;
	right: 10px;
	top: 65px;
	display:flex;
	overflow: hidden;
	height: 45px;
}

div#homeUI div[cimitero-header] div[selezione-cimitero] {
	 
	flex:0 0 400px;
}


div#homeUI div[cimitero-header] div[center] {
	flex: 1 1 auto;
	padding: 0px 10px;
}

div#homeUI div[cimitero-header] div[center] button {
	height: 100%;
}
div#homeUI div[cimitero-header] div[center] button label {
	padding:3px;
	display:inline-block;
	line-height:10px;
}
div#homeUI div[cimitero-header] div[sezione-utente] {
	/* border:solid 1px red; */
	display: flex;
	flex:0 0 auto;
	background: #ffffff6e;
	border-radius: 4px;
}

div#homeUI div[cimitero-header] div[sezione-utente] > h5 {
	margin: 8px 10px;
	text-transform: capitalize;
}

div#homeUI div[cimitero-header] div[sezione-utente] > img {
	/* width: 4rem; */
	height: 100%;
}

div#homeUI div[cimitero-header] div[sezione-utente] button {
	margin:3px;
}


div#homeUI div[list-posizioni] {
	position: absolute;
	left: 10px;
	right: 10px;
	top: 140px;
	bottom: 0px;
	display:flex;
	flex-direction: column;
	overflow: hidden;
}

div#homeUI div[list-posizioni] #cmb-pagination {
	height: 100%;
	text-align:center;
}






div#homeUI div[list-posizioni] div[filters-bar] {
	display:flex;
	position: relative;
	border: solid 1px #f4f4f4;
	overflow: visible;
	padding-top: 21px;
	PADDING-LEFT: 10PX;
	padding-right: 10px;
	/* padding-bottom: 5px; */
	border-radius: 5px;
}
div#homeUI div[list-posizioni] div[filters-bar] > label {
	position:absolute;
	top: 0px;
	left: 10px;
	z-index: 1;
}

div#homeUI div[list-posizioni] div[filters-bar] div[options] {
	flex:1;
}

div#homeUI div[list-posizioni] div[filters-bar] div[buttons] {
	width: 50px;
}
div#homeUI div[list-posizioni] div[filters-bar] div[buttons] button#btn-min-max-filter{
	 display:none;
}
div#homeUI div[list-posizioni] div[filters-bar] div[options] div[option-row] {overflow: auto;display: flex;}

div#homeUI div[list-posizioni] div[filters-bar] div[options] div[option-row] > div {
	min-width: 200px;
	padding: 5px 10px;
	flex: 1;
}

div#homeUI div[list-posizioni] div[filters-bar] div[options] div[option-row] > div > label {
	background:#a29f9f;
	padding:0px 10px;
	border-radius:3px;
	font-size: 15px;
	color: white;
}






div#homeUI div[list-posizioni] div[navbar] {
	display:flex;
}

div#homeUI div[list-posizioni] div[navbar] > div {
	margin-right:0.5rem;
}
div#homeUI div[list-posizioni] div[navbar] > div:last-child {
	margin-right:0px;
}



div#homeUI div[list-posizioni] div[navbar] i.bi {
	font-size:1.3rem;
}

div#homeUI div[list-posizioni] div[navbar] div[center] {
	flex:1;
	text-align:center;
	/* padding: 0px 10px; */
}
div#homeUI div[list-posizioni] div[container] {
	/* margin-top:1rem; */
	background:#ada8a854;
	flex: 1;
	/* border:solid 1px red; */
	/* padding-right: 1rem; */
	/* padding-left: 1rem; */
	/* padding-top: 1rem; */
	/* padding-bottom: 1rem; */
	overflow-x: hidden;
	overflow-y: auto;
	/* margin-left: 0; */
	padding: 0;
	/* margin: 0; */
	/* width: 100%; */
	max-width: unset;
	margin-bottom: 10px;
	border-radius: 4px;
}

div#homeUI div[list-posizioni] div[container] div[no-record] {
	color:#ce0a0a;
	margin:1rem;
	text-align: center;
	background: #f0f8ff54;
	padding: 1rem;
	border-radius: 0.7rem;
	text-transform: none;
}


div#homeUI div[list-posizioni] div[container] div.row {
	padding: 0.5rem;
	margin: 0.6rem 0.5rem 0rem 0.6rem;
	background: #e8eff4;
	border: solid 1px #b4adad;
}



div#homeUI div[list-posizioni] div[container] div[pair].row {
	background: #c2cad1;
	border: solid 1px #acb4ba;
}

div#homeUI div[list-posizioni] div[container] div.row div[data] {
	flex: 1;
	padding: 0;
	/* text-transform: unset; */
}
div#homeUI div[list-posizioni] div[container] div.row div[buttons] {
	flex: unset;
	width: 6rem;
	padding: 0;
	text-align: right;
	overflow: auto;
}
div#homeUI div[list-posizioni] div[container] div.row div[data] div[tag] {
	/* border:solid 1px gray; */
	display: inline-block;
	text-transform: none;
	display: inline-flex;
}

div#homeUI div[list-posizioni] div[container] div.row div[data] div[tag] label {
	background: #a29f9f;
	color:white;
	text-transform: capitalize;
	margin-right: 4px;
	padding: 0px 6px;
	margin: 1px;
	border-radius: 2px;
	font-size:15px;
}

div#homeUI div[list-posizioni] div[container] div.row div[data] div[tag] div[value] {/* color:Red; */padding: 1px 0px 0px 5px;}


/* home page */





/* interfaccia posizione */
div#posizioneUI {
	position:absolute;
	top:0;
	left:0;
	right:0;
	bottom:0;
	overflow-x: hidden;
	overflow-y: auto;
	/* border: solid 1px red; */
}

div#posizioneUI div.img-zoom {
	position:absolute;
	top: 10px;
	left:10px;
	right:10px;
	height:400px;
	border-radius:5px;
	z-index:1000;
	background:#d6d6d6;
	overflow: hidden;
}

div#posizioneUI div.img-zoom button[close-zoom-panel] {
	position:absolute;
	z-index:10;
	top:10px;
	left:10px
}
div#posizioneUI div.img-zoom button[zoom-in] {
	position:absolute;
	z-index:10;
	top:10px;
	left:50px
}
div#posizioneUI div.img-zoom button[zoom-out] {
	position:absolute;
	z-index:10;
	top:10px;
	left: 82px;
}
 div#posizioneUI div.img-zoom  #viewer{
    position: absolute;
    width:100%;
    height: 100%;
    border:1px solid #ccc;
    overflow:hidden;
    background: #969090;
    top: 0;
    left: 0;
    bottom: 0;
    /* border: solid 2px red; */
    }
   div#posizioneUI div.img-zoom #img{user-select:none;pointer-events:none;transform-origin:0 0;image-rendering:auto}
   div#posizioneUI div.img-zoom #viewer.grab{cursor:grab} #viewer.grabbing{cursor:grabbing}
   div#posizioneUI div.img-zoom .ctrls{position:absolute;right:.5rem;top:.5rem;display:flex;gap:.25rem}
   div#posizioneUI div.img-zoom .ctrls button{padding:.4rem .6rem}



div#posizioneUI label,
div#adminUI label,
div#cimiteroUI label,
div#utenteUI label {
	background: #a29f9f;
	text-transform: capitalize;
	color:white;
	display:inline-block;
	font-size: 12px;
	border-radius:2px;
	padding: 1px 4px;
	margin:0px 0px 5px 0px;
}
div#posizioneUI div[image-and-map-container] {
	display:flex;
}
div#posizioneUI div[image-container],
div#posizioneUI div[map-container] {
	border:solid 1px #c8c8c8;
	padding:5px;
	border-radius: 7px;
	min-height: 6rem;
	flex:1;
	position: relative;
	display: flex;
	flex-direction: column;
}

div#posizioneUI div[image-container].highlight {
  outline: 3px dashed #007aff;
}

div#posizioneUI div[image-container] {
	margin-right:5px;
	position:relative;
}
div#posizioneUI div[image-container] a#btn-add-photo {
	float:right;
	margin-right:5px;
}

div#posizioneUI div[image-container] div.invalid-feedback {
	position: absolute;
	left:10px;
	right:10px;
	width:unset;
	bottom: 12px;
}

div#posizioneUI div[image-container] > button {
	position:absolute;
	right: 5px;
	top: 5px;
	z-index: 1;
}

div#posizioneUI div[image-container] > div[image-content] {
	/* border: solid 1px green; */
	position: absolute !important;
	top: 30px;
	bottom: 5px;
	min-height: unset !important;
	height: unset;
	right: 5px;
	left: 5px;
}



div#posizioneUI div[image-container] > div[image-content] #swiper-control {
	position:absolute;
	top:0;
	left:0;
	right:0;
	bottom:0;
	text-align: center;
}

div#posizioneUI div[image-container] > div[image-content] #swiper-pagination {
	background: #ffffff59;
	display:block;
	width: auto;
	margin: 0 auto;
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	border-radius: 5px;
	height: 28px;
	bottom:5px;
}

div#posizioneUI div[image-container] > div[image-content]  div.swiper-button-next,
div#posizioneUI div[image-container] > div[image-content]  div.swiper-button-prev {
	width: 27px;
	height: 27px;
	background:#ffffff8c;
	border-radius:50%;
	padding:5px;
	bottom: 5px;
	top: unset;
	left:unset;
	right:unset;
}

div#posizioneUI div[image-container] > div[image-content]  div.swiper-button-next {
	right:5px;
}
div#posizioneUI div[image-container] > div[image-content]  div.swiper-button-prev {
	left:5px;
}
div#posizioneUI div[image-container] > div[image-content]  div.swiper-button-next > svg {
	margin-left:1px;
}
div#posizioneUI div[image-container] > div[image-content]  div.swiper-button-prev > svg {
	margin-left:-2px;
}

div#posizioneUI div[image-container] > div[image-content] #swiper-control div.swiper-slide {
    position: relative;
    background: black;
}

div#posizioneUI div[image-container] > div[image-content] #swiper-control div.swiper-slide img {
	max-width:100%;
	max-height:100%;
	object-fit: cover;
}
div#posizioneUI div[image-container] > div[image-content] #swiper-control button[remove-img-hash] {
    position:absolute;
    top: 5px;
    left:5px;
}
div#posizioneUI div[image-container] > div[image-content] #swiper-control button[latitudine][longitudine] {
    position:absolute;
    top: 69px;
    left:5px;
}
div#posizioneUI div[image-container] > div[image-content] #swiper-control button[maximize-img-hash] {
    position:absolute;
    top: 37px;
    left:5px;
}

div#posizioneUI div[map-container] {
	margin-left:5px;
}

div#posizioneUI div[with-record-button] {
	position:relative;
}

div#posizioneUI div[type-related] {
	display:none;
}


div#posizioneUI div[with-record-button] button[record-to] {
	position:absolute;
	right:0px;
	border-top-left-radius: 0px;
	border-bottom-left-radius: 0px;
	border-radius: 50%;
	height: 3.2rem;
	width: 3.2rem;
	transform: translate(0.3rem, -0.3rem);
}

div#posizioneUI div[with-record-button] button[record-to].recording {
	border-color: #424f71;
	background: #67778d;
	animation: pulse-recording 2s infinite;
}

div#posizioneUI div[image-container] div[image-content],
div#posizioneUI div[map-container] div[map-content] {
	display:block;
	text-align: center;
	flex: 1;
	position: relative;
	min-height: 260px;
}



div#posizioneUI div[image-container] div[image-content] #btn_take_photo {
	position:absolute;
	top:50%;
	left:50%;
	transform:translate(-50%,-50%)
}

div#posizioneUI div[map-container] div[map-content] div#map-content {
	position:absolute;
	top:0;
	left:0;
	/* right:0; */
	/* bottom:0; */
	width: 100%;
	height: 100%;
}


div#posizioneUI div[image-container] div[image-content] div[image-block] {
	/* border:solid 1px green; */
	position: relative;
	background: #d7d7d7;
}

div#posizioneUI div[image-container] div[image-content] div[image-block] button#btn_remove_photo {
	position: absolute;
	top:0.5rem;
	left:0.5rem;
	z-index: 1;
}
div#posizioneUI div[image-container] div[image-content] div[image-block] button#btn_minimize_maximize {
	position: absolute;
	top:3.5rem;
	left:0.5rem;
	z-index: 1;
}

div#posizioneUI div[image-container] div[image-content] div[image-block] img[preview] {
	border-radius:5px;
}
div#posizioneUI div[image-container] div[image-content] div[image-block] img[preview][size="small"]{
	/* width: 25%; */
	object-fit: contain;
	/* height: 100%; */
	/* width: 100%; */
	max-width: 100%;
}

div#posizioneUI div[image-container] div[image-content] div[image-block] img[preview].portrait {
	/* border:solid 3px red; */
	height: 220px;
}

div#posizioneUI div[image-container] div[image-content] div[image-block] img[preview].landscape {
	/* border:solid 3px green; */
	width: 100%;
	/* position: absolute; */
	/* left: 0; */
	z-index: 0;
	/* top: 50%; */
}


div#posizioneUI div[image-container] div[image-content] div[image-block] img[preview][size="large"]{
	width: 100%;
}
/* interfaccia posizione  */



/* bootboxes  */
div.bootbox.dialog-fullscreen div.modal-dialog {
	width: 70%;
	max-width: 1250px;
}
div.bootbox.dialog-fullscreen div.modal-content {
	height:100%;
	position:absolute;
}

div.bootbox.bootbox-error {
	z-index:1100;
}

div.bootbox.bootbox-error div.modal-content {
	margin:4px;
	background:#ffffff;
	-webkit-box-shadow: 5px 5px 15px 5px rgba(0,0,0,0.5);
	box-shadow: 5px 5px 15px 5px rgba(0,0,0,0.5);
}


#adminUI {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

#adminUI div[admin-container] {
    position: absolute;
    top: 10px;
    left: 10px;
    right: 10px;
    bottom: 10px;
    display: flex;
    flex-direction: column;
}

#adminUI div[admin-container] > div {
	display: flex;
	flex-direction: column;
}

#adminUI div[admin-container] > div:last-child {
	margin-top:20px;
}


#adminUI div[admin-container] > div[list-cimiteri] {
    flex: 6;
    height: 100%;
}
#adminUI div[admin-container] > div[list-utenti] {
    flex: 9;
}

#adminUI div[admin-container] > div > div[button-bar] {
	flex: 0 0 auto;
	margin-bottom: 5px;
}
#adminUI div[admin-container] > div > div[content] {
	/* border: solid 1px #1f3924; */
	flex: 1 1 0px;
	overflow-y: auto;
	min-height:0;
	padding:10px;
	font-size: 0.9em;
}

#adminUI div.row {
	display:flex;
	width:100%;
	margin: 3px 0px;
	padding: 3px 0px;
}



#adminUI div[pair].row {
	background:#d4d4d4;
}

#adminUI div.row:first-child > div {
	background:gray;
	color:white;
}
#adminUI div.row > div {
	display:flex;
	flex:1;
}

#adminUI div.row > div:nth-last-child(-n+2) {
	border:none;
	flex:unset;
	width:50px;
}

#utenteUI div[lista-cimiteri-accessibili] {
	font-size:0.7em;
	height:100px;
	overflow:auto;
	letter-spacing: -1px;
}
#utenteUI div.row {
	display:flex;
	width:100%;
	margin: 0px 0px 3px 0px;
	padding: 0px 0px 3px 0px;
	border-bottom: solid 1px #d3d3d3;
}
#utenteUI div[pair].row {
	background:#d4d4d4;
}
#utenteUI div.row > div {
	display:flex;
	flex:1;
}
#utenteUI div.row button {
	width:1.4em;;
	height:1.4em;
	padding:0.1em;
	line-height:0.2em;
}
#utenteUI div.row i {
	font-size: 0.8em !important;
}
#utenteUI div.row > div:last-child {
	border:none;
	flex:unset;
	width:40px;
}

@media (max-width: 1000px) {

	div.bootbox.dialog-fullscreen div.modal-dialog {
		position:absolute;
		top:10px;
		left:10px;
		right:10px;
		bottom:10px;
		width:unset;
		padding: 0;
		margin: 0;
	}

	div#homeUI div[cimitero-header] div[sezione-utente] label {
		display:none;
	}

	div#homeUI div[cimitero-header] div[selezione-cimitero] {
        flex: 0 0 calc(100% - 50px);
    }

	div#homeUI div[cimitero-header] div[center] button label {
		display:none;
	}


	div#posizioneUI div.img-zoom {
		border:solid;
		position:fixed;
	}

	div#posizioneUI div[image-and-map-container] {
		flex-direction:column;
	}

	div#posizioneUI div[image-container] {
		margin-right:0px;
		/* border:solid 1px green; */
		min-height: 260px;
	}

    div#posizioneUI div[map-container] {
        /* border:solid 1px red; */
        margin-left: 0px;
    }

	div#posizioneUI div[image-container] div[image-content],
	div#posizioneUI div[map-container] div[map-content] {
		min-height: 200px;
	}

	div#homeUI div[list-posizioni] div[filters-bar] {
		flex-direction:column;
		border: solid 1px gray;
	}

	div#homeUI div[list-posizioni] div[filters-bar] div[options] div[option-row] {
		display:block
	}

	div#homeUI div[list-posizioni] div[filters-bar] div[options] div[option-row] > div {
		float:left;
		width:100%;
	}

	div#homeUI div[list-posizioni] div[filters-bar].minimized div[options] {
	    /* border:solid 2px green; */
	    /* max-height: 0px; */
	    /* overflow:hidden; */
	    /* position:relative; */
	    display: none;
	}

	div#homeUI div[list-posizioni] div[filters-bar].minimized div[options]:after {
		content: " ";
		top: 0;
		left:0;
		right:0;
		bottom:0;
		position: absolute;
		background: #c9c9c9;
		background: linear-gradient(180deg, rgba(201, 201, 201, 1) 0%, rgba(227, 227, 227, 0.73) 66%, rgba(255, 255, 255, 0) 100%);
	}

	div#homeUI div[list-posizioni] div[filters-bar].minimized #btn-search,
	div#homeUI div[list-posizioni] div[filters-bar].minimized #btn-clear {
	    display:none;
	}

	div#homeUI div[list-posizioni] div[filters-bar] div[buttons] {
		float:left;
		width:100%;
	}

	div#homeUI div[list-posizioni] div[filters-bar] div[buttons] i{
		font-size:28px;
	}


	div#homeUI div[list-posizioni] div[filters-bar] div[buttons] button#btn-min-max-filter {
		display:inline-block;
		float:right;
	}

	div#homeUI div[sezione-utente] {
	    position: fixed;
	    top: 0px;
	    right:10px;
	    height: 46px;
	    /* background: none !important; */
	}

	div#homeUI div[page-header] {
		text-align:left;
		background:none;
	}

	div#homeUI div[page-header]  > span {
		float:left;
		font-size: 22px;
		margin: 5px;
		/* display: none; */
		width: 40%;
		line-height: 18px;
	}

	div#homeUI div[cimitero-header] div[center] {
		padding: 0;
		text-align: right;
	}

}