/*****************  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%;
 }