.timeline-steps {
    display: flex;
    justify-content: center;
    flex-wrap: wrap
}
.timeline-steps .timeline-step {
    align-items: center;
    display: flex;
    flex-direction: column;
    position: relative;
    margin: 1rem
}
.timeline-steps .timeline-step-active {
    align-items: center;
    display: flex;
    flex-direction: column;
    position: relative;
    margin: 1rem
}

@media (min-width:768px) {
    .timeline-steps .timeline-step-active:not(:last-child):after {
        content: "";
        display: block;
        border-top: .25rem dotted #3b82f6;
        width: 3.46rem;
        position: absolute;
        left: 7.5rem;
        top: .3125rem
    }
    .timeline-steps .timeline-step-active:not(:first-child):before {
        content: "";
        display: block;
        border-top: .25rem dotted #3b82f6;
        width: 3.8125rem;
        position: absolute;
        right: 7.5rem;
        top: .3125rem
    }
    .timeline-steps .timeline-step:not(:last-child):after {
        content: "";
        display: block;
        border-top: .25rem dotted #cacaca;
        width: 3.46rem;
        position: absolute;
        left: 7.5rem;
        top: .3125rem
    }
    .timeline-steps .timeline-step:not(:first-child):before {
        content: "";
        display: block;
        border-top: .25rem dotted #cacaca;
        width: 3.8125rem;
        position: absolute;
        right: 7.5rem;
        top: .3125rem
    }
}

.timeline-steps .timeline-content {
    width: 10rem;
    text-align: center
}

.timeline-steps .timeline-content .inner-circle {
    border-radius: 1.5rem;
    height: 1rem;
    width: 1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: #bababa
}
.timeline-steps .timeline-content .inner-circle-active {
    border-radius: 1.5rem;
    height: 1rem;
    width: 1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: #3b82f6
}

.timeline-steps .timeline-content .inner-circle:before {
    content: "";
    background-color: #cacaca;
    display: inline-block;
    height: 3rem;
    width: 3rem;
    min-width: 3rem;
    border-radius: 6.25rem;
    opacity: .5
}
.timeline-steps .timeline-content .inner-circle-active:before {
    content: "";
    background-color: #3b82f6;
    display: inline-block;
    height: 3rem;
    width: 3rem;
    min-width: 3rem;
    border-radius: 6.25rem;
    opacity: .5
}

.bd-callout {
	padding: 1.25rem;
	margin-top: 1.25rem;
	margin-bottom: 1.25rem;
	border: 0.5px solid #cacaca;
	border-left-width: 0.5rem;
	border-radius: 0rem;
}

.bd-callout h4 {
	margin-top: 0;
	margin-bottom: .25rem;
}

.bd-callout p:last-child {
	margin-bottom: 0;
}

.bd-callout code {
	border-radius: .25rem;
}

.bd-callout+.bd-callout {
	margin-top: -.25rem;
}

.bd-callout-info {
	border-left-color: #3b82f6;
}

.bd-callout-info h4 {
	color: #5bc0de;
}

.bd-callout-warning {
	border-left-color: #f0ad4e;
}

.bd-callout-warning h4 {
	color: #f0ad4e;
}

.bd-callout-danger {
	border-left-color: #d9534f;
}

.bd-callout-danger h4 {
	color: #d9534f;
}

.bd-callout-primary {
	border-left-color: #007bff;
}

.bd-callout-primaryh4 {
	color: #007bff;
}

.bd-callout-success {
	border-left-color: #28a745;
}

.bd-callout-successh4 {
	color: #28a745;
}

.bd-callout-default {
	border-left-color: #6c757d;
}

.bd-callout-defaulth4 {
	color: #6c757d;
}
.otp-field {
  flex-direction: row;
  column-gap: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.otp-field input {
  height: 45px;
  width: 42px;
  border-radius: 6px;
  outline: none;
  font-size: 1.125rem;
  text-align: center;
  border: 1px solid #ddd;
}
.otp-field input:focus {
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
}
.otp-field input::-webkit-inner-spin-button,
.otp-field input::-webkit-outer-spin-button {
  display: none;
}