/*****************  3D Box ***************/
.scene-wrapper {
  width: 100%;
  display: flex;
  justify-content: center;
  perspective: 1000px;
  padding-top: 0;
  padding: 30px;
}

.scene {
  perspective: 1600px;
  filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.6));
}

.cube {
  position: relative;
  transform-style: preserve-3d;
  transition: transform 0.3s ease;
}

.face {
  position: absolute;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
}

.front img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 2px;
}

.gallery {
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
}

.front::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle at center, rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, 0.4) 100%);
}



.thumbnails {
    display: flex;
    gap: 10px;
}

.thumbnail {
    wwidth: 100px; /* Adjust as needed */
    cursor: pointer;
    transition: transform 0.3s ease;
}

.thumbnail:hover {
    transform: scale(1.1);
}

#largeImageContainer {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: none;
    z-index: 1000;
    border: 2px solid #ccc;
    background: rgba(255, 255, 255, 0.9);
    padding: 10px;
}

#largeImageContainer img {
    max-width: 80vw;  /* Ensures the image is not too large for the viewport */
    max-height: 80vh;
}

 


.dropshadow {
 -moz-box-shadow: 3px 3px 4px #999; /* Firefox */
 -webkit-box-shadow: 3px 3px 4px #999; /* Safari/Chrome */
 box-shadow: 3px 3px 4px #999; /* Opera and other CSS3 supporting browsers */
 -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#999999')";/* IE 8 */
 : progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#999999');/* IE 5.5 - 7 */ 
} 
td.row1			{ background-color: #FFFFFF;} 
td.row2			{ background-color: #FFFFFF;}
td.hover		{ background-color: #eeFFFF;}

tr.row1			{ background-color: #F9F9F9;}
tr.row2			{ background-color: #F9F9F9;}
tr.row3			{ background-color: #FFFFA0;}
tr.hover		{ background-color: #EEFFFF;}

tr.new			{ background-color: #ECFFD9;}
tr.today		{ background-color: #DCEFC9;}
tr.deleted		{ background-color: #FFDDDD;}
tr.rush			{ background-color: #BBFF99;} 


#upload_form {
	font-family: Geneva, Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: normal;
	color: #666666;
}

#upload_progbar{
   z-index:100;
   visibility:hidden;
   position:absolute;
   text-align:center;
   width:400px;
}


.navigationMenu {
	background: #d0d0d0;
	padding: 8px 0px;
	font-size: 10px;
	color: #333;
	font-weight: bold;
	text-align: right;
	}

.pagerNotCurrent {
	color: #333; 
	background-color: #e0e0e0; 
	padding: 1px 2px; 
	border: 1px solid #e0e0e0; 
	margin-right: 5px;
	cursor: pointer;
}	

.pagerCurrent {
	color: #333; 
	background-color: #F0F0E0; 
	padding: 1px 4px; 
	font-size:11px;
	border: 1px solid #F0F0C0; 
	margin-right: 5px;
}

.pagerNav{
	color: #333; 
	background-color: #f0f0f0; 
	padding: 1px 4px; 
	border: 0px solid #f0f0f0; 
	margin-right: 5px;
	cursor: pointer;
}	

.h16  {font-weight: bold; font-size: 17px;}

.h15  {font-weight: bold; font-size: 15px;}
.h14  {font-weight: bold; font-size: 14px;}
.h13  {font-weight: bold; font-size: 13px;}
.h12  {font-weight: bold; font-size: 12px;}

 
 
 div#pop-up {
   display: none;
   position: absolute;
   width: 240px;
   padding: 10px;
   background: #AAFFFF;
   color: #000000;
   border: 1px solid #1a1a1a;
   font-size: 100%;
 }

.slideshow-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: black;
  z-index: 9999;
  justify-content: center;
  align-items: center;
}

/* SLIDE CONTAINER for each image+title */
.slide {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: left;
  max-width: 90vw;
  padding-top: 10px;
}

/* TITLE ABOVE IMAGE */
.slide-caption {
	align-self: flex-start;
	color: white;
	font-size: 1rem;
	font-family: sans-serif;
	margin-bottom: 5px; 
	padding: 25px 20px 5px 10px; /* top, right, bottom, left */
	bbackground-color: #333333;
	wwidth: 640px;
}

.slide-id {
  color: #cccccc;
  font-size: 0.9rem;
  margin-top: 6px;
  font-family: sans-serif;
  text-align: left;       /*  Center the text */
  width: 100%;
  padding-left: 10px;          /*   Remove left padding */
  padding: 4px;
}

.slide.active {
  display: flex;
}


 

/* IMAGE */
.slide-image {
  max-width: 100%;
  max-height: 80vh;
  display: block;
  padding:1 px;
  // background-color: #000000; 
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5); /*   Soft black shadow */
  border-radius: 4px; /* Optional: rounded corners */
}

.slideshow-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: black; /* <-- OLD */
  z-index: 9999;
  justify-content: center;
  align-items: center;
  background-color: #333333;
}


/* LAYOUT CONTAINERS */
.slide-wrapper {
  // display: flex;
  position: fixed;
  top: 100px;

  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px; /* Vertical spacing between caption/image/arrow */
  background-color: #555;
  padding: 40px;
}

.arrow-controls {
  position: fixed;
  top: 50px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 40px;
  z-index: 10002;
  background-color: #3a3a3a;
}


.slideshow-arrow,.slideshow-close,
.slideshow-stop {
  font-size: 1rem;
  color: white;
  cursor: pointer;
  user-select: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
}

.slideshow-stop {
  font-size: 1.3rem; 
}

.start-slideshow-btn {
  padding: 10px 20px;
  font-size: 1rem;
  background-color: #ffcc00;
  color: #000;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-family: sans-serif;
  font-weight: bold;
  transition: background-color 0.2s ease, transform 0.1s ease;
}

.start-slideshow-btn:hover {
  background-color: #ffdb4d;
  transform: translateY(-1px);
}

.start-slideshow-btn:active {
  transform: translateY(1px);
}