a[href="#previous"],
a[href="#next"],
a[href="#finish"] {
  position: relative !important;
  text-decoration: none !important;
  padding: 6px 24px !important; /* Reduced vertical padding by 50% */
  transition: all 0.6s ease !important;
  overflow: hidden !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 1 !important;
  margin: 10px !important;
  border-radius: 50px !important;
  border: 2px solid #296b77 !important;
  font-weight: bold !important;
  width: 120px !important;
  box-sizing: border-box !important;
  min-height: 22px !important; /* Reduced by 50% from 44px */
  font-size: 14px !important; /* Optional: smaller font to match smaller height */
}

/* Reset pseudo-elements for full coverage */
a[href="#previous"]::before,
a[href="#next"]::before,
a[href="#finish"]::before,
#fileInput {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  z-index: -1 !important;
  border-radius: inherit !important;
}

/* Previous button wave (left to right) */
a[href="#previous"]::before {
  left: -100% !important;
  background: linear-gradient(90deg, 
              transparent 0%, 
              #069a6c 30%, 
              #069a6c 70%, 
              transparent 100%) !important;
  transition: left 0.8s ease !important;
}

/* Next button wave (right to left) */
a[href="#next"]::before {
  left: auto !important;
  right: -100% !important;
  background: linear-gradient(90deg, 
              transparent 0%, 
              #069a6c 30%, 
              #069a6c 70%, 
              transparent 100%) !important;
  transition: right 0.8s ease !important;
}

/* Finish button wave (center outwards) */
a[href="#finish"]::before,
#fileInput {
  top: 50% !important;
  left: 50% !important;
  width: 0 !important;
  height: 0 !important;
  background: #296b77 !important;
  transition: all 0.8s ease !important;
  border-radius: 50% !important;
  transform: translate(-50%, -50%) !important;
}

/* Previous and Next buttons */
a[href="#previous"],
a[href="#next"] {
  color: white !important;
  background: #296b77 !important;
}

/* Finish button */
a[href="#finish"],
#fileInput {
  color: #296b77 !important;
  background: white !important;
}

a[href="#previous"]:hover,
a[href="#next"]:hover,
a[href="#finish"]:hover,
#fileInput {
  color: white !important;
  border-color: #069a6c !important;
}

/* Previous hover animation */
a[href="#previous"]:hover::before {
  left: 100% !important;
}

/* Next hover animation */
a[href="#next"]:hover::before {
  right: 100% !important;
}

/* Finish hover animation */
a[href="#finish"]:hover::before,
#fileInput {
  width: 300% !important;
  height: 300% !important;
}

/* Active state */
a[href="#previous"].active,
a[href="#next"].active,
a[href="#finish"].active,
#fileInput {
  background: #069a6c !important;
  color: white !important;
  border-color: #069a6c !important;
  transform: scale(1.05) !important;
  box-shadow: 0 4px 12px rgba(6, 154, 108, 0.4) !important;
}

/*Back button*/
#BasicInfoForm {
  position: relative;
  padding-top: 50px; /* Add space for the arrow */
  padding-top: 0px !important;
}

legend::before {
  content: "<  عودة  ";
  position: absolute;
  top: -20px;
  right: 15px;
  font-size: 20px;
  font-weight: bold;
  cursor: pointer;
  z-index: 10;
  margin-top:5px;
  padding-left:10px;
  padding-right:10px;
  border:solid;
  margin-bottom:-10px;
  border-color:gray;
  border-radius:5px;
  background-color: lightgray;
  height:30px;
}
/*legend{padding-bottom:10px;}*/
legend::before:hover {
    background: #e9ecef;
    transform: translateX(-3px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

/* Optional: Add hover effect */
#BasicInfoForm::before:hover {
  background-color: #007bff;
}

/* Spinner styles only when loading class is present */
a[href="#finish"].loading::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  background-image: url('/Content/images/Icons/color/spinner.gif') !important;
  background-repeat: no-repeat !important;
  background-position: 50% 50% !important;
  background-size: 20px 20px !important;
  z-index: 100 !important;
  pointer-events: none !important;
}