* { box-sizing: border-box; }
/* Position the image container (needed to position the left and right arrows) */
.cursor {cursor: pointer;}
.button {min-width:200px;}

/* Per Real Media Library 
.rml-attachment-filter-folder-selector {margin-right: inherit !important; }
*/
.media-toolbar-secondary {
    float: unset !important;
}

.image-preview-wrapper {
  position: relative;
  display: flex;
  margin: 6px;
  /* height: 350; width: 400; */
  overflow: visible;
  overflow-x:auto;
  overflow-y: hidden;
  white-space: nowrap;
  clear:left;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  border-radius: 10px;
  }

/* Hide the images by default */
.Slide {
  height: 200px;
  width: 200px;
  position: relative;
  margin:10px !important;
  padding:4px;
 /*overflow: hidden; opacity: 0.5;
  margin:4px !important;
  background-color: blue;
  object-fit: contain;
  */
  object-fit: cover;
  border-style: 2px dashed blue;
  border-radius: 10px !important;
}
.Slide:hover {
  /* zoom */
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  background-color: #fff;
  cursor: pointer;
  z-index: 1;
  transform: scale(1.1);
  transform-origin: center center;
  box-shadow: rgb(0 0 0 / 40%) 0px 18px 24px 0px;
  transition: all 0.2s cubic-bezier(0.64, 0.04, 0.35, 1) 0s;
  border-radius: 3px;
  }
  
.selected {
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 1), 0 6px 20px 0 rgba(0, 0, 0, 1) !important;
	border-top: 5px solid #3498db !important;
}
.predef {border: 5px solid #3498db !important;}

.loader {
  border: 16px solid #f3f3f3;
  border-radius: 50%;
  border-top: 16px solid #3498db;
  width: 120px;
  height: 120px;
  -webkit-animation: spin 2s linear infinite; /* Safari */
  animation: spin 2s linear infinite;
}
.cont-loader {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 100vh;
	background-color: #ededed;
}

.loaderA {
	max-width: 15rem;
	width: 100%;
	height: auto;
	stroke-linecap: round;
}

.buttonDoc {
	margin: 2px 4px 2px 4px;
	padding: 8px 10px;
	font-size: 14px;
	text-align: center;
	cursor: pointer;
	outline: none;
	color: #fff;
	background-color: cornflowerblue;
	border: none;
	border-radius: 5px;
	box-shadow: 0 5px #999;
}

.buttonDoc:hover {background-color: #3498db}

.buttonDoc:active {
	background-color: #3498db;
	box-shadow: 0 5px #666;
	transform: translateY(4px);
}

/* form media slider */

.card-image-preview-wrapper {
	position: relative;
	display: flex;
	margin: 6px;
	/* height: 350; width: 400; */
	overflow: visible;
	overflow-x:auto;
	overflow-y: hidden;
	white-space: nowrap;
	clear:left;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
	border-radius: 10px;
}

/* Hide the images by default */
.card-Slide {
	height: 200px;
	width: 200px;
	position: relative;
	margin:10px !important;
	padding:4px;
	/*overflow: hidden; opacity: 0.5;
	margin:4px !important;
	background-color: blue;
	object-fit: contain;
	*/
	object-fit: cover;
	border-style: 2px dashed blue;
	border-radius: 10px;
}
.card-Slide:hover {
	/* zoom */
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
	background-color: #fff;
	cursor: pointer;
	z-index: 1;
	transform: scale(1.1);
	transform-origin: center center;
	box-shadow: rgb(0 0 0 / 40%) 0px 18px 24px 0px;
	transition: all 0.2s cubic-bezier(0.64, 0.04, 0.35, 1) 0s;
	border-radius: 3px;
}

/* modal view */
#mImg {
    border-radius: 5px;
    cursor: pointer;
    transition: 0.3s;
}

#mImg:hover {opacity: 0.7;}

/* The Modal (background) */
.modal-img {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 100;
	background-color: #000 !important;
    padding-top: 100px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
	max-width: unset  !important;
}

/* Modal Content (image) */
.modal-img-content {
    margin: auto;
    display: grid;
	max-width: 100%;
	max-height: 90%;
/* 
    //width: 80%;
    //max-width: 700px;
        * {
            margin: 0;
            padding: 0;
        }
        .imgbox {
            display: grid;
            height: 100%;
        }
        .center-fit {
            max-width: 100%;
            max-height: 100vh;
            margin: auto;
        }
*/}

/* Caption of Modal Image */
.modal-img-caption {
	color:white;
	text-align: center;
}

#caption {
    margin: auto;
    display: block;
    width: 80%;
    max-width: 700px;
    text-align: center;
    color: #ccc;
    padding: 10px 0;
    height: 150px;
}

/* Add Animation */
.modal-img-content, #caption {    
    -webkit-animation-name: zoom;
    -webkit-animation-duration: 0.6s;
    animation-name: zoom;
    animation-duration: 0.6s;
}

@-webkit-keyframes zoom {
    from {-webkit-transform:scale(0)} 
    to {-webkit-transform:scale(1)}
}

@keyframes zoom {
    from {transform:scale(0)} 
    to {transform:scale(1)}
}

/* The Close Button */
.close {
    position: absolute;
    top: 15px;
    right: 35px;
    color: #f1f1f1;
    font-size: 40px;
    font-weight: bold;
    transition: 0.3s;
}

.close:hover,
.close:focus {
    color: #bbb;
    text-decoration: none;
    cursor: pointer;
}

/* 100% Image Width on Smaller Screens */
@media only screen and (max-width: 700px){
    .modal-img-content {
        width: 100%;
    }
}

.ruota{
	animation-iteration-count: 1;
	animation: ruotare 0.4s linear;
	transform-style: preserve-3d;
	perspective: 1000px;
}

.ruota:before {
	content: '';
	position: absolute;
	background: #000;
	border-radius: 50%;
	filter: blur(14px);
}

@keyframes ruotare {
	from {
			transform: rotateY(90deg);
			background-color: green;
		}
	to {
			transform: rotateY(-90deg);
			background-color: #7FFF00;
		}
}

#zoom-overlay {
	display: flex;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.3s ease;
	position: fixed;
	top: 0; left: 0;
	width: 100vw;
	height: 100vh;
	background: rgba(0, 0, 0, 0.85);
	justify-content: center;
	align-items: center;
	flex-direction: column;
	z-index: 9999;
	pointer-events: none; /* disabilita click quando nascosto */
}

#zoom-overlay.visible {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}

#zoom-container {
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
	overflow: hidden;
	width: 100%;
	height: 90%;
	background: black;
	cursor: grab;
}

#zoom-image {
	position: relative;
	z-index: 1;
	max-width: none;
	max-height: none;
	user-select: none;
	pointer-events: none;
	transition: transform 0.2s ease;
}

#zoom-controls {
	position: relative;
	z-index: 10;
	display: flex;
	gap: 0.5em;
	margin-top: 10px;
	padding: 0.5em;
	border-radius: 6px;
	background: rgba(0,0,0,0.4);
}
#zoom-controls button {
/*
*/
	font-family:Arial;
	font-size:15px;
	width:115px;
	height:32px;
	border-width:1px;
	color:#14396a;
	border-color:#333333;
	font-weight:bold;
	border-top-left-radius:6px;
	border-top-right-radius:6px;
	border-bottom-left-radius:6px;
	border-bottom-right-radius:6px;
	box-shadow:inset 0px 1px 0px 0px #fff6af;
	text-shadow:inset 1px 1px 0px #ffee66;
	background:linear-gradient(#ffec64, #ffab23);
}

#zoom-controls button:hover {
	background: linear-gradient(#ffab23, #ffec64);
}