/* MAIN STYLES */

@import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,opsz,wght@0,6..12,200..1000;1,6..12,200..1000&display=swap');

body{
	font-family: "Nunito Sans";
}

p{
	margin: 0;
}

.bg-purple{
	background: #8678B5;
}

.text-white{
	color: #fff;
}

.logo-125{
	max-width: 125px;
}

.btn{
	border-radius: 25px;
}

.btn-purple-2{
	background: #819BC9;
	color: #fff!important;
}

.btn-purple-2:hover{
	background: #5D7FBA;
  color: #fff!important;
}

.btn-purple{
	background: #816FB0!important;
	color: #fff!important;
}

.btn-purple:hover{
	background: #675498!important;
}

/* STEPS*/
.container-steps {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
  width: 100%;
  margin: auto;
}
.container-steps .steps {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  position: relative;
}
.steps .circle {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  width: 50px;
  color: #816FB0;
  font-size: 22px;
  font-weight: 500;
  border-radius: 50%;
  background: #fff;
  border: 2px solid #816FB0;
  transition: all 200ms ease;
  transition-delay: 0s;
}
.steps .circle.active {
  transition-delay: 100ms;
  border-color: #816FB0;
  background: #816FB0;
  color: #fff;
}
.steps .progress-bar {
  position: absolute;
  height: 2px;
  width: 100%;
  background: #816FB0;
  z-index: -1;
}
.progress-bar .indicator {
  position: absolute;
  height: 100%;
  width: 0%;
  background: #816FB0;
  transition: all 300ms ease;
}
.container-steps .buttons {
  display: flex;
  gap: 20px;
}

.step-title{
	max-width: 70px;
}

.buttons button {
  padding: 8px 25px;
  background: #4070f4;
  border: none;
  border-radius: 8px;
  color: #fff;
  font-size: 16px;
  font-weight: 400;
  cursor: pointer;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.05);
  transition: all 200ms linear;
}
.buttons button:active {
  transform: scale(0.97);
}
.buttons button:disabled {
  background: #87a5f8;
  cursor: not-allowed;
}


.card-purple{
	border-color: #816FB0;
}

.grey-text{
	color: #9A9EA2;
}

.prod-name{
	font-size: 0.9em;
	color: #3C3C3C;
}

.prod-qty{
	font-size: 0.85em;
	color: #9A9EA2;
}

.grey-text2{
	color: #3C3C3C;
}

.sm-title{
	font-size: 1.1em;
}


/* OTP */


.otp-form {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.digit-group input {
  width: 40px;
  height: 50px;
  background-color: #FAFAFA;
  border: 1px solid #816FB0;
  border-radius: 4px;
  line-height: 50px;
  text-align: center;
  font-size: 24px;
  font-weight: 200;
  color: #000;
  margin: 0 2px;
}

.digit-group .splitter {
  padding: 0 5px;
  color: #000;
  font-size: 24px;
}

.prompt {
  margin-bottom: 20px;
  font-size: 20px;
  color: #000;
}


.btn-text-grey{
	text-decoration: underline;
	color: #6C757D;
	font-size: 0.9em;
}


/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 768px) {

	.step-title {
	    max-width: 78px;
	    font-size: 0.9em;
	}

	.digit-group input {
	    width: 38px;
	    height: 40px;
	}

}



/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 380px) {

	.digit-group input {
	    width: 32px;
	}

}


/*LOADER*/
.loader {
    position: fixed;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    z-index: 9999;
    background: url('../img/loader.gif') 50% 50% no-repeat rgb(249,249,249);
    opacity: 0.5;
    display: none;
}