/* temp start */

.metaweb-otp-verification-widget h4 {
    color: black !important;
    font-size: 21px !important;
    font-weight: 600 !important;
    margin-bottom: 0px;
}
.metaweb-otp-verification-widget p{
    font-size: 15px;
    color: black;
    line-height: 23px;
}
input#name {
    color: #000;
    padding: 20px 10px 20px 60px;
    border-radius: 13px;
    border: 1px solid #CDCDCD;
    font-size: 15px;
    width: 100%;
    background-color: #fff;
}
input#phonenumber {
    color: #000;
    padding: 20px 10px 20px 78px;
    border-radius: 13px;
    border: 1px solid #CDCDCD;
    font-size: 15px;
    width: 100%;
    background-color: #fff;
}
.name-wrapper {
    position: relative;
}
.phone-wrapper {
    position: relative;
}
.name-wrapper:before {
    content: '';
    background: url(https://tricall.ai/wp-content/uploads/2025/07/tricall-user-icon.png) !important;
    background-repeat: no-repeat !important;
    background-size: contain !important;
    height: 20px !important;
    width: 20px !important;
    display: block;
    position: absolute;
    top: 22px;
    left: 22px;
}
.phone-wrapper:before {
    content: '';
    background: url(https://tricall.ai/wp-content/uploads/2025/07/tricall-phone-icon.png) !important;
    background-repeat: no-repeat !important;
    background-size: contain !important;
    height: 20px !important;
    width: 20px !important;
    display: block;
    position: absolute;
    top: 25px;
    left: 21px;
} 
.phone-prefix {
    color: #000000;
    position: absolute;
    left: 48px;
    top: 21px;
    font-size: 15px;
}
button.submission {
    padding: 23px 0px 23px 0px !important;
    width: 100%;
    font-size: 17px !important;
    text-align: center !important;
    background-color: #2565AE !important;
    background-image: linear-gradient(90deg, #2565AE 0%, #2565AE 100%) !important;
    border-radius: 13px !important;
    text-transform: none !important;
}
.phone-wrapper input::placeholder, .name-wrapper input::placeholder {
    color: black;
}
.verifysection {
    background: #ffffff00;
    box-shadow: 0 9px 5px rgb(37 101 174 / 11%);
    text-align: center;
    border-radius: 12px;
    width: 100%;
    padding: 8px 15px 20px 15px;
    border-width: 1px 0px 0px 0px;
    border-style: solid;
    border-color: #2565ae17;
    margin-top: 35px !important;
}

span#countdown {
    font-weight: 500 !important;
}
.otp-inputs {
  display: flex;
  justify-content: space-between;
  margin-bottom: 25px;
}

.otp-inputs input{
    width: 38px;
    height: 43px;
    font-size: 20px;
    text-align: center;
    border: 1px solid #ccc;
    border-radius: 8px;
    outline: none;
    transition: border-color 0.2s;
    color: #000;
    padding: 0px !important;
}
.verifysection p.otp-response{
    color: #008500 !important;
}
#countdownMsg{
  font-size: 14px !important;
    color: rgba(0, 0, 0, 0.904) !important;
    margin-top: 10px !important;
}
#verifyOtpBtn{
   background-image: linear-gradient(90deg, #2565AE 0%, #2565AE 100%) !important;
   font-size: 15px !important;
}
#verifyOtpBtn:hover, #resendOtpBtn:hover{
   background-image: linear-gradient(90deg, #2e7bd3 0%, #2565AE 100%) !important;
   font-size: 15px !important;
}
.submission:hover{
   background-image: linear-gradient(90deg, #2e7bd3 0%, #2565AE 100%) !important;
   font-size: 17px !important;
}
#resendOtpBtn{
  background-image: linear-gradient(90deg, #2565AE 0%, #2565AE 100%) !important;
   font-size: 15px !important;
}
.otp-inputs input:focus {
  border-color: #007bff;
}
.otp-inputs input.error,#otpform input.error {
  border: 2px solid red !important;
}
.loading {
  position: relative;
  padding-left: 45px; /* leave space for icon */
}
.response.response-error {
    color: red;
    text-align: center;
}
.loading::before {
  content: '';
  position: absolute;
  /* left: 120px; */
  right: 50px !important;
  top: 50%;
  width: 35px;
  height: 35px;
  transform: translateY(-50%);
  background-image: url('https://tricall.ai/wp-content/uploads/2025/08/robot-loading.png'); /* replace with your actual image */
  background-size: contain;
  background-repeat: no-repeat;
  animation: jumpTwiceRotate 2s infinite ease-in-out;
}
.verify-response.otperror {
    color: red;
    font-size: 15px !important;
    margin-bottom: 10px !important;
}
.verify-response {
    color: #008500;
    font-size: 15px !important;
    margin-bottom: 10px !important;
}
.elementor-widget-metaweb_otp_validator {
    height: 387px !important;
}
#verifysection h3 {
    color: black !important;
    font-size: 20px !important;
    text-align: center !important;
    font-weight: 600 !important;
    margin-bottom: 0px !important;
}
.slide-left {
  /*position: absolute;*/
  /*width: 100%;*/
  animation: slideLeftOut 0.4s forwards;
}
..slide-right.verifysection .otp-inputs input{
padding: 0px;
}
.slide-right {
  /*position: absolute;*/
  /*width: 100%;*/
  animation: slideRightIn 0.4s forwards;
}
.metaweb-otp-verification-widget{
    width: 80%;
    margin: 0 auto;
}
/* temp end */

@keyframes slideLeftOut {
  from { left: 0; opacity: 1; }
  to { left: -100%; opacity: 0; }
}

@keyframes slideRightIn {
  from { left: 100%; opacity: 0; }
  to { left: 0; opacity: 1; }
}

/*Loading icon */
@keyframes jumpTwiceRotate {
  0% {
    transform: translateY(-50%) rotate(0deg);
  }
  10% {
    transform: translateY(-80%) rotate(0deg); /* jump 1 */
  }
  20% {
    transform: translateY(-50%) rotate(0deg);
  }
  30% {
    transform: translateY(-80%) rotate(0deg); /* jump 2 */
  }
  40% {
    transform: translateY(-50%) rotate(0deg);
  }
  100% {
    transform: translateY(-50%) rotate(360deg); /* rotate once at the end */
  }
}