/*LOGIN**/
/* ---------- Hero Background (same as index) ---------- */
.hero-login {
  height: 92.5vh;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}
.hero-login::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.55);
}

/* ---------- Login Card ---------- */
.login-card {
  position: relative;
  z-index: 2;
  max-width: 500px;
  width: 100%;
  background: rgb(22 21 21 / 95%);
  box-shadow: 0 0 25px rgba(0,0,0,0.3);
  border-radius: 12px;
  padding: 35px 30px;
  animation: fadeInUp 0.7s ease-in-out;
  opacity: 80%;
}

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

.login-title {
  font-weight: bold;
  font-size: 1.7rem;
  margin-bottom: 20px;
  color: #fff;
}

.sub-title{ 
  color: #fff !important;
  margin-bottom: 10px;
  border-bottom: 2px solid #ac8b69; 
}

.form-control {
  height: 45px;
  border-radius: 6px;
}

label{
  color: #fff !important;
  font-weight: bold;
}

.btn-login {
  background-color: #c49a6c;
  color: #000;
  height: 45px;
  font-weight: 600;
  border-radius: 6px;
  width: 100%;
  font-size: 1.3rem !important;
}
.btn-login:hover {
  background-color: #c49a6c;
}

/* Set uniform height for all input-group elements */
.custom-input-group .form-control,
.custom-input-group .input-group-text,
.custom-input-group .btn-otp {
  height: 48px;                 /* Adjust this to any height you want */
  line-height: 48px;
}

/* Fix input’s internal text vertical alignment */
.custom-input-group .form-control {
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
  line-height: normal;
}

/* Button styling */
.btn-otp {
  background-color: #c49a6c;
  color: #000;
  border: none;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* Left icon background */
.input-group-text {
  background: #f9f9f9;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Smooth border radius */
/* .custom-input-group .input-group-text,
.custom-input-group .form-control,
.custom-input-group .btn-otp {
  border-radius: 6px !important;
} */


/*********************CAPTCHA**********************/
/***********************CAPTCHA***************************/
#captcha_img {
  display: block;
  width: 180px;   /* match generated width */
  height: 48px;   /* match generated height */
  object-fit: contain; /* don't crop */
  border: 1px solid #e6e6e6;
  border-radius: 6px;
}

#refreshCaptcha {
  background-color: #c49a6c;
  border-color: #c49a6c;
  color: #000;
  margin-left: 4px;
}



.captcha-input {
width: 100%;
max-width: 100%;
border-radius: 10px;
padding: 0.55rem 0.85rem;
font-size: 0.9rem;
}

/* Row containing image + refresh text (left aligned under the input) */
.captcha-row {
margin-top: 6px;
align-items: center;
justify-content: flex-start;
}

/* Captcha image styling */
.captcha_image {
width: 160px;
height: 52px;
object-fit: cover;            /* keeps distortion low, uses whole box */
border: 1px solid #e6e6e6;
border-radius: 8px;
background: #fff;
}

/* small visual tweaks */
.captcha-actions .small { font-size: 0.8rem; color: #6c757d; }
@media (max-width: 480px) {
.captcha_image { width: 140px; height: 48px; }
.captcha-row { gap: 10px; }
}


/* Refresh link */
#refreshCaptcha {
font-size: 0.85rem;
text-decoration: none;
}
#refreshCaptcha:hover { text-decoration: underline; }

.logo_pic{
float: right;
}
.logo_pic img{
width: 100%;
height: 30px;
}
/* search ju*/
.page {
  overflow-x: auto;
}

.table1 {
  margin-top: 5px;
}

.test {
  float: right;
  font-size: 0.6vw;
}

.test1 {
  padding: 0px;
  margin: 0px;
}

.test2 {
  width: 2vw;
}

.test3 {
  font-size: 1vw;
}

.nav1,
.img_icon {
  height: 80px;
}

.label {
  color: red;
}

.srch {
  text-align: center;
}

/* index*/
.abc {
  display: show;
}

.nav {
  height: 50px;
}

.img {
  max-width: 100%;
  height: auto;
}

/*Books*/
.previous button prev_btn { display: none; }

.book_style1 { text-align: center; }

.logo {
  max-width: 100%;
  height: auto;
}


/* jo_dcm*/
.body { background: #77c5e3; }

/**HIGH COURT PAGE**/


/* Fix the icons on HC page */
#hc-service .service-icon img {
  width: 100%;
  height: auto;
  object-fit: contain;
  max-height: 200px; /* adjust if needed */
}

/* Prevent zoom-out/stretch */
#hc-service .service-item {
  padding: 20px;
  background: #0f1112;
  border: 2px solid #c49a6c;
  border-radius: 5px;
}

/* Keep white background full height */

#hc-service {
  background: #fff !important;
  padding-top: 80px;
  padding-bottom: 80px;
  min-height: 70vh !important;      /* auto responsive height */
  position: relative;
  z-index: 10;
}
#hc-service:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #fff;  /* completely hide theme background */
  z-index: -1;
}



/* Ensure the section expands */
#hc-service .container {
  min-height: 700px !important;
}

/* CENTER the 2 columns like in jo_dist */
#hc-service .row {
  justify-content: center !important;
}

/* FIX column width so card size matches jo_dist */
#hc-service .col-lg-6 {
  max-width: 350px;   /* Same as 4-column layout */
}

#book {
margin-top: 30px !important; /* adjust: 20–50px */
}

/****NEW ***/
#captcha_img { width: 140px; height: 42px; }
.input-group-text { border-radius: 0 !important;}
.btn{  border-radius: 0 !important; }

@media (max-width: 767.98px) {
  .brand-text h1 {
    font-size: 1rem;
    padding-left: 10px
  }
  .brand-text small {
    display: none;
    font-size: 0.8rem;
    padding-left: 10px;
  }
  #user_name{  display: none; }
  .display-4 { font-size: 1.5rem; }
  .lead {
      font-size: 1rem;
      font-weight: 300;
  }
}

.hc_{ color: #d4af37 !important;}
/****************SEARCH MODAL******************/
.modal {
  pointer-events: auto;
}
.modal-title{
  font-weight: 600;
}
.modal-body,
.modal-body * {
  /* display: block !important; */
  visibility: visible !important;
  opacity: 1 !important;
}

.modal-body label{ color: #3a3838 !important; }
.impt_field{ color: red; }
select#officer_type, select#dist, select#desg {
  width: inherit;
  height: 48px;
  border-radius: 5px;
  border: 1px solid #ced4da;
}
.close { font-size: 1.2rem; }
.captcha_err{
  display: none;
  color: red;
}