body 
{
   
}


        #dropZone {
            border: 2px dashed #ccc;
            border-radius: 10px;
            padding: 30px ;
            background-color: #fff;
            cursor: pointer;
            transition: 0.3s ease;
             text-align: center;
        }

        #dropZone.hover {
            border-color: #007bff;
            background-color: #f0f8ff;
        }

        #dropZone img {
            width: 40px;
            opacity: 0.5;
            margin-bottom: 10px;
        }

        #dropZone p {
            margin: 8px 0;
            color: #666;
        }

        .browse-btn {
            display: inline-block;
            background-color: #007bff;
            color: #fff;
            padding: 6px 14px;
            border-radius: 5px;
            font-size: 14px;
            text-decoration: none;
            cursor: pointer;
        }

        .browse-btn:hover {
            background-color: #0056b3;
        }
        
       
        
     
     /* hospital regitration tab */
.form-field-wrapper 
{
    float: left;
    width: 300px; /* Adjust as needed */
    margin-bottom: 20px;
 margin-left:20px;
    background-color: #fff;
    border-radius: 5px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); 
    overflow: hidden;  gap: 20px;
}

.form-field-wrapper input[type="text"] {
    width: 100%;
    padding: 15px;
    border: none; /* Remove default input border */
    font-size: 16px;
    outline: none; /* Remove outline on focus */
    box-sizing: border-box; /* Include padding in the width */
}

/*.form-field-wrapper input[type="text"]::placeholder {
    color: #999;
}*/

/* Styling for the green bordered input */
.form-field-wrapper {
   /* border: 1px solid #4CAF50;  Green border */
    border-left: 3px solid #45B6B6;
  border-top: 2px solid #45B6B6;
}
.form-field-wrapper.scol {
   /* border: 1px solid #4CAF50;  Green border */
    border-left: 4px solid #B768BA;
  border-top: 4px solid #B768BA;
}

/* Optional: Add a slight hover effect */
.form-field-wrapper:hover {
    box-shadow: 0 8px 8px rgba(0, 0, 0, 0.15);
}


/* Doctor list scroll start*/
    .table-container {
    max-height: 350px;  /* scroll height */
    overflow-y: auto;
    border: 1px solid #ddd;
}

/* Keep header visible */
#tblDoctorList {
    width: 100%;
    border-collapse: collapse;
    table-layout: auto; /* let columns size naturally */
}

#tblDoctorList thead th {
    position: sticky;
    top: 0;
    background-color: #45B6B6;
    color: white;
    text-align: center;
    z-index: 2;
}

/* Cells styling */
#tblDoctorList th,
#tblDoctorList td {
    border: 1px solid #ddd;
    padding: 8px;
    text-align: center;
    white-space: nowrap; /* prevents text wrapping from breaking width */
}

/* optional: alternate rows */
#tblDoctorList tbody tr:nth-child(even) {
    background-color: #f9f9f9;
}
/* Doctor list scroll end */


/* Gallary tab start */
   /* .gallery-container {
           /* max-width: 800px;
            margin: 40px auto; *
            padding: 20px;
            background: #fff;
            border-radius: 10px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        }

        .upload-box {
            border: 2px dashed #b0c4de;
            padding: 40px;
            text-align: center;
            border-radius: 10px;
            background: #f9fafc;
            cursor: pointer;
        }

        .upload-box:hover {
            background: #eef3fa;
        }

        .upload-icon {
            font-size: 32px;
            display: block;
            color: #007bff;
        }

        .image-preview {
            display: flex;
            flex-wrap: wrap;
            margin-top: 20px;
            gap: 10px;
        }

        .image-card {
            position: relative;
            width: 160px;
            height: 120px;
            overflow: hidden;
            border-radius: 10px;
            box-shadow: 0 2px 5px rgba(0,0,0,0.15);
        }

        .image-card img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .image-card button {
            position: absolute;
            bottom: 6px;
            left: 6px;
            background: rgba(0,0,0,0.6);
            color: white;
            border: none;
            border-radius: 4px;
            padding: 3px 8px;
            font-size: 12px;
            cursor: pointer;
        }

        .image-card .remove-btn {
            right: 6px;
            left: auto;
            background: rgba(255,0,0,0.7);
        }

        .main-label {
            position: absolute;
            top: 0;
            left: 0;
            background: #007bff;
            color: #fff;
            font-size: 12px;
            padding: 3px 5px;
            border-bottom-right-radius: 5px;
        }*/
        
        .gallery-container {
  /* max-width: 800px;
    margin: 20px auto;*/
    padding: 20px;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
.upload-box {
    border: 2px dashed #b0c4de;
    padding: 40px;
    text-align: center;
    border-radius: 10px;
    background: #f9fafc;
    cursor: pointer;
}
.upload-box:hover { background: #eef3fa; }
.image-preview {
    display: flex;
    flex-wrap: wrap;
    margin-top: 20px;
    gap: 15px;
}
.image-card {
    position: relative;
    width: 250px;
    height: 180px;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 2px 5px rgba(0,0,0,0.15);
}
.image-card img { width: 100%; height: 100%; object-fit: cover; }
.image-card button {
    position: absolute;
    bottom: 5px;
    left: 5px;
    background: rgba(0,0,0,0.6);
    color: white;
    border: none;
    border-radius: 4px;
    padding: 3px 8px;
    font-size: 12px;
    cursor: pointer;
}
.image-card .remove-btn { right: 5px; left: auto; background: rgba(255,0,0,0.7); }
.main-label {
    position: absolute;
    top: 0; left: 0;
    background: #007bff;
    color: white;
    padding: 4px 6px;
    font-size: 12px;
    border-bottom-right-radius: 6px;
}
   .upload-wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;              /* space between upload and preview */
  width: 100%;
  max-width: 800px;       /* optional, for layout control */
  margin: 20px auto;
}

.upload-box {
  flex: 1;
  border: 2px dashed #aaa;
  border-radius: 10px;
  padding: 30px;
  text-align: center;
  cursor: pointer;
  transition: 0.3s;
  background-color: #fafafa;
}

.upload-box:hover {
  border-color: #4a90e2;
  background-color: #f0f8ff;
}

.upload-icon {
  font-size: 40px;
  display: block;
  margin-bottom: 10px;
}

.selected-preview {
  flex: 1;
  border-radius: 10px;
  min-height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.selected-preview img {
  max-width: 100%;
  max-height: 100%;
  border-radius: 10px;
  object-fit: contain;
}

/* specialization*/

.specialization-container {
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
  }

  .spec-box {
    flex: 1 1 100%;
  }

  /* On larger screens (side-by-side) */
  @media (min-width: 768px) {
    .spec-box {
      flex: 1 1 45%;
    }
  }

.spec-table-wrapper {
    width: 100%;
    height: 180px;
    overflow: auto;
    border: 1px solid #E8ECF2;
    border-radius: 6px;
    background: #fff;
    margin-top: 8px;
  }

  .tblSpecializations,
  #tblSelectedSpec {
    width: 100%;
    border-collapse: collapse;
  }