/*
Click nbfs://nbhost/SystemFileSystem/Templates/Licenses/license-default.txt to change this license
Click nbfs://nbhost/SystemFileSystem/Templates/JSP_Servlet/CascadeStyleSheet.css to edit this template
*/
/* 
    Created on : Dec 12, 2024, 5:59:46 PM
    Author     : PC
*/

 /* Apply styles directly to the body */
 @media (max-width: 768px) {
    * {
      -webkit-tap-highlight-color: transparent; /* Removes the highlight */
      outline: none; /* Ensures no additional outline appears */
  }
body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
  min-height: 100vh;
  background: #f8f9fa;
  user-select: none; /* Disable text selection */
}

/* Watermark styles */
#watermark {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  background: rgba(248, 249, 250, 0.8);
  z-index: 1; /* Ensure it appears above everything else */
  visibility: visible; /* Default state */
}

#watermark .icon {
  font-size: 4rem;
  color: #ccc;
}

#watermark .message {
  font-size: 1.2rem;
  margin-top: 1rem;
  color: #888;
}

#watermark .explore-btn {
  margin-top: 1.5rem;
  padding: 0.7rem 1.5rem;
  border: none;
  background: #FFB74D;
  color: white;
  font-size: 1rem;
  border-radius: 5px;
  cursor: pointer;
  text-decoration: none;
}

#watermark .explore-btn:hover {
  background: rgb(255, 145, 0);
}

/* Hide watermark when content exists */
body.has-content #watermark {
  visibility: hidden;
  display: none; /* Ensure it does not take space */
}

.image-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15%, 1fr)); /* Auto-adjust columns */
  gap: 1rem; /* Space between items */
  justify-content: center; /* Center align the grid */
  margin: 1rem;
}

.image-container-ham, .image-container-ham-pend  {
  max-width: 100%; /* Ensure it doesn't exceed container width */
  background: #fff;
  border: 1px solid #ddd;
  border-radius:12px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  position: relative;
  margin:0;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-sizing: border-box;
}

@media (max-width: 490px) {
  .image-container-ham, .image-container-ham-pend  {
    flex: 0 1 80%; /* flex-grow: 0, flex-shrink: 1, flex-basis: 90% */
  }
}
@media only screen and (min-width: 370px) and (max-width: 490px) {
  .image-container-ham, .image-container-ham-pend  {
    max-width: 70%;
  }
}
@media only screen and (min-width: 490px) and (max-width: 709px) {
  .image-container-ham, .image-container-ham-pend {
    flex: 0 1 48%;
  }
}

.image-container-ham img, .image-container-ham-pend img, #image-container-ham-received img {
  width: 95%;
  max-height: 20vh; /* Maintain aspect ratio */
  border-radius:10px;
  display: block;
  z-index:5;
}

.status{ 
margin-top:0px;
}
.pstatus{
font-size:15px;
}
.pending{
font-size:15px;
color:#d7d3d3;
font-style:italic;
}

.image-description-ham-pend {
  font-size: 0.85rem;
  color: #333;
  margin: -1px 0; /* Separate paragraphs vertically */
  padding: 5px; /* Add inner spacing to improve readability */
  width: 90%; /* Ensure the text doesn’t exceed the container width */
  text-align: center; /* Center the text horizontally */
  box-sizing: border-box;
}


.image-description-ham {
  font-size: 0.85rem;
  color: #333;
  margin: -1px 0; /* Separate paragraphs vertically */
  padding: 5px; /* Add inner spacing to improve readability */
  width: 90%; /* Ensure the text doesn’t exceed the container width */
  text-align: center; /* Center the text horizontally */
  box-sizing: border-box;
}
.timer {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.4rem; /* Space between each child */
  width: fit-content;
  margin: 0 auto;
  padding: 8px;
  font-size: 1rem;
}

.time-block {
  display: flex;
  align-items: center; /* Align number and label in one line */
  gap: 0.2rem; /* Reduce space between number and label */
}
.toBeHidden{
  display: none;
}

.time-block h4, .time-label {
  margin: 0;
  color: grey;
}
.ends-in,.clock{
  font-size: 0.9rem; /* Adjust the size as needed */
}
.clock{
  color:#ff5722;
}
.button-container {
  display: flex;
  justify-content: center;
  gap:20px;
  margin-top:-15px; /* Add controlled spacing above buttons */
  margin-bottom:8px;
}

.conf,.revo,.ava,.unava {
  font-family: 'Arial', sans-serif;
  font-size: 0.56rem;
  border: none;
  border-radius: 2rem;
  cursor: pointer;
  transition: all 0.3s ease-in-out;
  text-transform: uppercase;
  letter-spacing: 0.1rem;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.08);
  margin-top:18px;
}
.conf,.revo{
  padding: 0.8rem 2.7rem;
}
.ava{
  padding: 0.8rem 2.4rem;
}
.unava{
  padding: 0.8rem 1.99rem;
}

.conf, .ava {
  background: linear-gradient(135deg, #ff8c42, #ff5a1f); /* Sweet orange gradient */
  color: #fff;
  box-shadow: 0 4px 8px rgba(255, 138, 66, 0.3); /* Soft glowing shadow */
  transition: all 0.3s ease-in-out;
}

.conf:hover, .ava:hover {
  background: linear-gradient(135deg, #ff5a1f, #e64a19); /* Slightly deeper orange on hover */
  transform: scale(1.05);
  box-shadow: 0 6px 10px rgba(255, 90, 31, 0.4);
}

.revo, .unava {
  background: linear-gradient(135deg, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.5)); /* Smooth, deep black-glass effect */
  color: #fff;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* Soft shadow for richness */
  transition: all 0.3s ease-in-out;
}

.revo:hover, .unava:hover {
  background: linear-gradient(135deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.3)); /* Slightly lighter on hover for depth */
  transform: scale(1.05);
  box-shadow: 0 6px 10px rgba(0, 0, 0, 0.4); /* Slightly stronger glow */
}

.conf:active,.revo:active,.ava:active,.unava:active {
  transform: scale(0.95);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.messagebtn{
  margin-top: 1.5rem;
  padding: 0.7rem 1.5rem;
  border: none;
  background: #FFB74D;
  color: white;
  font-size: 1rem;
  border-radius: 5px;
  cursor: pointer;
  text-decoration: none;   
}
.messagebtn:hover{
  background: rgb(255, 145, 0);
}
.owner2 {
  display: flex;
  align-items: center; /* Vertically align icon and text */
  gap: 5px; /* Space between icon and text container */
  font-family: Arial, sans-serif;
  margin: 5px;
}

/* .itemOwner2 {
  display: none;
} */

.owner2 p {
  display: flex;
  align-items: center; /* Vertically align name and follow */
/*    gap: 10px;  Maintain space between username and follow */
  margin: 0; /* Remove default paragraph margin */
}

.ownerName2 {
  display: inline-block;
  width: 180px; /* Fixed width for consistent spacing */
  overflow: hidden; /* Hide overflowed text */
  text-overflow: ellipsis; /* Add ellipsis for long names */
  white-space: nowrap; /* Prevent text wrapping */
  font-weight: bold;
  color: #333;
  text-align: left;
}

.telplane:hover{
  transform: scale(1.2);
}

/*Login css*/
.login-body,.signup-body {
  margin: 0;
  padding: 0;
  overflow-y:auto;
  max-width: 100vw; /* Limit body width to viewport width */
  overflow-x: hidden; /* Prevent horizontal scrolling */
  box-sizing: border-box; /* Include padding and border in width/height calculations */
  
}

.container {
  position:fixed;
  width: 100%;
  margin:0;
  display: flex;
  /* overflow: hidden; */
   box-sizing: border-box; /* Include padding and border in width/height calculations */ 
}

.form-container {
width:100%;
  background: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  border-radius:5px;
 /* padding-bottom:118px; */
 margin-bottom:0%;
 border:none;
}

.form-container h2 {
  font-size: 1.8rem;
  color:rgba(0, 0, 0, 0.65);
}

.form-container form {
  width: 100%; /* Full width for mobile responsiveness */
  display: flex;
  flex-direction: column;
}

.form-container input {
  max-width: 70%; /* Full width for mobile responsiveness */
  margin:0 auto;
  border: 1px solid orange;
  border-radius: 25px;
  font-size: 1rem;
  color: #333;
  outline: none;
  transition: 0.3s ease;
}

.btn {
  max-width:75%;
  border: none;
  margin:0 auto;
  border-radius: 25px;
  background:orange;
  color: #fff;
  font-size: 1rem;
  font-weight: bold;
  cursor: pointer;
  transition: 0.5s ease;
}

@media (max-width: 500px) {
  .form-container input {
    max-width: 100%;
  }
  .btn {
    max-width:100%;
  }
}

.btn:hover {
  transform: scale(1.02);
  box-shadow: 0 0.3px 5px 0range;
}

.form-container .social-icons {
  display: flex;
  gap: 1rem;
  margin-top: 30.4rem;
  position:absolute;
  margin-left:35%;
}

.form-container .social-icons i {
  font-size: 1.5rem;
 color: #2575fc;
  transition: 0.6s ease;
}

.form-container .social-icons i:hover,.Gsignin:hover,.Gsignup:hover,.container a:hover{
  transform: scale(1.08);
}

.logo {
  font-size: 1.8rem;
}
.logo-icon {
  font-size: 2rem;;
  }

.Gsignup{
margin-bottom:-22rem;
  transition: 0.6s ease;
}
.google2{
margin-top:-39.6px;
right:-18px;
}
.Gsignin{
  position:absolute;
  margin-top:31.5rem;
  margin-right:3%;
  transition: 0.6s ease;
}
.noaccount{
margin-top:10%;  
}
.forgot-pwd a, form a{
          color: #007BFF;
          text-decoration: none;
          transition: color 0.5s ease;   
}

.gsi-material-button {
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
-webkit-appearance: none;
background-color: WHITE;
background-image: none;
border: 1px solid #747775;
-webkit-border-radius: 20px;
border-radius: 20px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
color: rgba(0, 0, 0, 0.65);
cursor: pointer;
font-family: 'Roboto', arial, sans-serif;
font-size: 14px;
height: 40px;
letter-spacing: 0.25px;
outline: none;
overflow: hidden;
padding: 0 50px;
position: relative;
text-align: center;
-webkit-transition: background-color .218s, border-color .218s, box-shadow .218s;
transition: background-color .218s, border-color .218s, box-shadow .218s;
vertical-align: middle;
white-space: nowrap;
width: auto;
max-width: 400px;
min-width: min-content;
}

.gsi-material-button .gsi-material-button-icon {
height: 20px;
margin-right: 12px;
min-width: 20px;
width: 20px;
}

.gsi-material-button .gsi-material-button-content-wrapper {
-webkit-align-items: center;
align-items: center;
display: flex;
-webkit-flex-direction: row;
flex-direction: row;
-webkit-flex-wrap: nowrap;
flex-wrap: nowrap;
height: 100%;
justify-content: space-between;
position: relative;
width: 100%;
}

.gsi-material-button .gsi-material-button-contents {
-webkit-flex-grow: 1;
flex-grow: 1;
font-family: 'Roboto', arial, sans-serif;
font-weight: 500;
overflow: hidden;
text-overflow: ellipsis;
vertical-align: top;
}

.gsi-material-button .gsi-material-button-state {
-webkit-transition: opacity .218s;
transition: opacity .218s;
bottom: 0;
left: 0;
opacity: 0;
position: absolute;
right: 0;
top: 0;
}

.gsi-material-button:disabled {
cursor: default;
background-color: #ffffff61;
border-color: #1f1f1f1f;
}

.gsi-material-button:disabled .gsi-material-button-contents {
opacity: 38%;
}

.gsi-material-button:disabled .gsi-material-button-icon {
opacity: 38%;
}

.gsi-material-button:not(:disabled):active .gsi-material-button-state, 
.gsi-material-button:not(:disabled):focus .gsi-material-button-state {
background-color: #303030;
opacity: 12%;
}

.gsi-material-button:not(:disabled):hover {
-webkit-box-shadow: 0 1px 2px 0 rgba(60, 64, 67, .30), 0 1px 3px 1px rgba(60, 64, 67, .15);
box-shadow: 0 1px 2px 0 rgba(60, 64, 67, .30), 0 1px 3px 1px rgba(60, 64, 67, .15);
}

.gsi-material-button:not(:disabled):hover .gsi-material-button-state {
background-color: #303030;
opacity: 8%;
}

.modal-image-container{
  max-width: 100%;
  max-height: 100%;
}

.modal-content{
    max-width: 100%;
    max-height: 100%;
    border-radius: 0;
    animation: zoomIn 0.3s ease;
}

.inner2{
  visibility:hidden;
  background-color:#fff;
  border: 1px solid rgba(255, 255, 255, 0.3);
  width:100vw;
  min-height:30%;
  bottom:0;
  right:0;
  left:0;
  border-radius:5px;
  position:absolute;
  }
  
  .inner2-description {
  color:#333;
  max-width: 100%; /* Adjust width as per your requirement */
  overflow-wrap: break-word; /* Break words that exceed container width */
  hyphens: auto; /* Automatically add hyphens when breaking words */
  white-space: normal;
  padding-right:7%;/*Adjusts where words begin*/
  padding-left:7%;/*Adjusts where words begin*/
  margin-bottom:5%;/*Adjusts the paragraph separation*/
  }
  
  .inner2 hr{
  margin-top: 5%;
  margin-left: 40%;
  margin-bottom: 5%;
  width: 20%;
  border: none; /* Remove default styling */
  border-top: 5px solid transparent;
  border-image: linear-gradient(to right, #ff7f50, #ff4500); /* Gradient effect with orange shades */
  border-image-slice: 1; /* Use the entire gradient */
  border-radius: 5px; /* Smooth rounded edges */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2); /* Add depth with shadow */
  transition: transform 0.3s ease, box-shadow 0.3s ease; /* Smooth hover effects */
  }
  
  .inner2 hr:hover{
  transform: scale(1.1); /* Slightly enlarge on hover */
  box-shadow: 0 6px 10px rgba(0, 0, 0, 0.4); /* Enhance shadow on hover */
  }

 }