﻿.product-lbl{
font-size: 22px;
font-weight: 600;
line-height: 28px;
letter-spacing: 0em; 
}
/* Container holding the OTP field */
.otp-container {
  position: relative;
  width: 240px; /* Adjust to make it fit the six boxes width */
  margin: 20px auto;
}

/* Styling the input box to look like 6 small boxes */
.otp-box {
  width: 100%; /* Use full width of container */
  height: 40px; /* Adjust height to match the OTP box height */
  text-align: center;
  font-size: 24px;
  padding: 0;
  border: 2px solid #ccc;
  border-radius: 5px;
  letter-spacing: 10px; /* Space between characters */
  box-sizing: border-box;
  outline: none;
}

/* Add a different border color when focusing on the input */
.otp-box:focus {
  border-color: #4CAF50;
  background-color: #f0f8ff; /* Optional: Light background color when focused */
}

/* Adding custom styling to the individual digits to make them appear as separate boxes */
.otp-box::before {
  content: ' ';
  display: inline-block;
  width: 10px;
  height: 10px;
  position: absolute;
  top: 50%;
  left: 50%;
  background-color: transparent;
}

.loader {

    width: 48px;

    height: 48px;

    border: 5px solid #FFF;

    border-bottom-color: #FF3D00;

    border-radius: 50%;

    display: inline-block;

    box-sizing: border-box;

    animation: rotation 1s linear infinite;
    
     position: fixed;
     top: 50%;
     z-index: 9999999999;
     overflow: hidden;
     background: #fff;
     left: 50%;
     margin-left: -4em;

    }



    @keyframes rotation {

    0% {

        transform: rotate(0deg);

    }

    100% {

        transform: rotate(360deg);

    }

    } 
