.sssinput {
  border-color: rgba(68, 114, 196, 0.3);
  width: 50%;
}

/* Base input style */
.sssinput {
  color: #111827; /* text-gray-900 */
  background-color: rgba(255, 255, 255, 0.9);
}

/* Placeholder color (equivalent to placeholder:text-gray-500) */
.sssinput::placeholder {
  color: #6b7280; /* Tailwind's gray-500 */
  opacity: 1; /* Ensure it's visible */
}

/* Selection styling (equivalent to selection:bg-indigo-200 selection:text-gray-900) */
.sssinput::selection {
  background-color: #c7d2fe; /* Tailwind indigo-200 */
  color: #111827; /* gray-900 */
}

/* Optional: focus border and subtle glow */
.sssinput:focus {
  outline: none;
  border-color: #4472C4;
  box-shadow: 0 0 0 3px rgba(68, 114, 196, 0.1);
}

/* Optional: Error border (if you toggle .error class dynamically) */
.sssinput.error {
  border-color: #ef4444; /* Tailwind red-500 */
}


.othcreenlogoav {
  left: 50px;
  top: 50px;
}

.mainscreenlogoav {
  position: absolute;
  left: 35px;
  top: 20px;
  z-index: 30;
}
.mainscreenlogoav img {
  width: 190px;
  height: auto;
  object-fit: contain;
}

@media (min-width: 1291px) and (max-width: 1490px) {
  .othcreenlogoav {
    left: 10px;
    top: 50px;
  }
}

@media (max-width: 1400px) {
  .othcreenlogoav {
    position: unset;
    margin: 0 auto;
    display: inline-block;
    width: 100%;
  }
  .othcreenlogoav img {
    margin: 0 auto;
  }
}
@media (max-width: 1290px) {
  .sssinput {
    width: 80%;
  }
  .mainscreenlogoav {
    left: 18px;
    top: 16px;
    position: relative;
  }
  .mainscreenlogoav img {
    width: 190px;
  }
  .othcreenlogoav {
    position: unset;
    margin: 0 auto;
    display: inline-block;
    width: 100%;
  }
  .othcreenlogoav img {
    margin: 0 auto;
  }
}

@media (max-width: 640px) {
  .sssinput {
    width: 100%;
  }
  .mainscreenlogoav {
    left: 18px;
    top: 18px;
    position: relative;
  }
  .mainscreenlogoav img {
    width: 190px;
  }
}

@media (max-width: 420px) {
  .steptext span {
    display: none;
  }
}