* {
    margin: 0;
    padding: 0;
    outline: none;
    font-family: 'Poppins', sans-serif;
}

body {
    display: flex;
    align-items: center;
    justify-content: center;
    background-size: cover;
    background-repeat: no-repeat;
}

.containerSignup {
    max-width: 62%;
    background-color: #fff;
    border-radius: 5px;
    text-align: center;
    padding: 2.67vw 1.87vw 0.53vw 1.87vw;
    margin-top: 3.20vw;
    opacity: 0.89;
    color: #040839;
}

.containerSignup header {
    font-size: 2.19vw;
    font-weight: 600;
    margin: 0 0 1.6vw 0;
}

/* --------------------------------- Progress Bar --------------------------------- */

/* The entire progress bar - categories and bullets */
.containerSignup .progress-bar {
    display: flex;
    margin: 2.13vw 0;
}

/* Similar to the above */
.containerSignup .progress-bar .step {
    position: relative;
    text-align: center;
    min-width: 25%;
}

/* Categories below Header */
.progress-bar .step p {
    font-size: 0.96vw;
    font-weight: 500;
    color: #040839;
    margin-bottom: 0.43vh;
    transition: 0.2s;
}

.progress-bar .step p.active {
    color: #91878c;
}

/* Bullet before its actioned */
.progress-bar .step .bullet {
    position: relative;
    min-height: 1.45vw;
    min-width: 1.45vw;
    border: .12vw solid #000;
    display: inline-block;
    border-radius: 50%;
    transition: 0.2s;
    margin-left: 0.1em;
}

.progress-bar .step .bullet.active {
    border-color: #91878c;
    background: #91878c;
}

/* The last line after bullet 4 */
.progress-bar .step:last-child .bullet:before,
.progress-bar .step:last-child .bullet:after {
    display: none;
}

/* line between bullets */
.progress-bar .step .bullet:before,
.progress-bar .step .bullet:after {
    position: absolute;
    content: '';
    bottom: 0.59vw;
    right: -10.77vw;
    min-height: 0.16vw;
    min-width: 8.3vw;
    background: #262626;
}

.progress-bar .step .bullet.active:after {
    background: #91878c;
    transform: scaleX(0);
    animation: animate 0.3s linear forwards;
}



@keyframes animate {
    100% {
        transform: scaleX(1);
    }
}

/* numbers in bullet */
.progress-bar .step span {
    font-weight: 500;
    font-size: 0.89vw;
    /* line-height: 160%; */
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

.progress-bar .step .bullet.active span {
    display: none;
}

/* Position of the tick inside the bullet */
.progress-bar .step .check {
    position: absolute;
    left: 50%;
    top: 67%;
    font-size: 0.80vw;
    transform: translate(-50%, -50%);
    display: none;
}

.progress-bar .step .check.active {
    display: block;
    color: #fff;
}

/* --------------------------------- Progress Bar End --------------------------------- */

/* --------------------------------- Form Outer --------------------------------- */

/* The entire container  */
.containerSignup .form-outer {
    max-width: 100%;
    overflow: hidden;
}


/* Puts the forms next to each other for each page 4 pages total*/
.form-outer form {
    display: flex;
    min-width: 400%;
}


/* Then sections this as 25% of the 400% above */
.form-outer form .page {
    min-width: 25%;
    transition: margin-left 0.3s ease-in-out;
}


#extraFields {
    display: none;
}



/* The Title of each page 'Select a product' */
.form-outer form .page .title {
    font-size: 1.5vw;
    font-weight: 500;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 2px;
    border-bottom: 0.11vw solid #040839;
}

/* The Add product an Tooltip Icon */
.form-outer form .page .title i {
    font-size: 1.39vw;
    color: #040839;
    cursor: pointer;
}


/* The add product icon only */
.form-outer form .page .title .addProd {
    margin-right: 4px;
}

.form-outer form .page .title i:hover {
    font-size: 1.55vw;
    color: #a3a4a7;
}





/* The field div with all the input boxes and select drop downs */
.form-outer form .page .field {
    max-height: 2.5vw;
    max-width: 62vw;
    margin: 2.30vw 0;
    display: flex;
    position: relative;
    justify-content: center;
}

/* each input/select */
.input-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 95%;
    margin-left: 5%;
}

/* The select box container on the first screen */
.input-container:first-child {
    margin-left: 11.5%;
}


.input-container:last-child {
    margin-right: 10px;
}

/* All select boxes */
form .page .field select {
    width: 90%;
    padding: 0 0 0 0.53vw;
    font-size: 0.75vw;
    font-weight: 500;
    border-radius: 5px;
    min-height: 2.55vw;
    border: 0.1vw solid #040839;
    /* margin-right: 2px; */
}

#userPerm {
    margin-left: -10px;
}

/* The titles for each of the fields */
.form-outer form .page .field .label {
    position: absolute;
    top: -1.60vw;
    font-weight: 500;
    margin-bottom: 5px;
    margin-left: -10px;
    font-size: 0.88vw;
}

/* All the input boxes */
.form-outer form .page .field input {
    height: 2.5vw;
    width: 100%;
    border: 1px solid #040839;
    border-radius: 5px;
    font-size: 0.75vw;
    padding-left: 3.5%;
    /* text-transform: uppercase; */
    margin-left: -10px;
}


.delete {
    padding-top: 0.37vw;
    font-size: 1.60vw;
    text-decoration: none;
    color: #040839;
    font-weight: bold;
    cursor: pointer;
}

.delete:hover {
    font-size: 2.13vw;
}

/* All the buttons */
.form-outer form .page .field button {
    min-width: 42.3%;
    max-height: 50px;
    margin-top: -0.85vw;
    border: none;
    background-color: #040839;
    border-radius: 5px;
    color: #fff;
    font-size: 1.1vw;
    font-weight: 500;
    letter-spacing: 1px;
    text-transform: uppercase;
    cursor: pointer;
    margin-left: 2.4vw;
    padding: 0.53vw 0.53vw;
}

.form-outer form .page .field button:hover {
    background: linear-gradient(135deg, #030834, #195FA4);
}

/* .form-outer form .page .btns button {
    margin-top: -20px !important;
} */

/* The previous buttons  */
form .page .btns button.prev {
    margin-left: 7.8%;
}

form .page .btns button.prev2 {
    margin-left: 6%;
}

/* The last prev button */
form .page .btns button.prev3 {
    margin-left: 9.5%;
}

/* Next button */
form .page .btns button.next {
    /* margin-right: -1.4vw; */
    margin-right: -1.7%;
}

form .page .btns button.next2 {
    margin-right: -2vw;
}


u {
    color: #fff;
    font-size: 0.75vw;
    font-weight: 500;
}

/* The icon with tooltip text */
.tooltip {
    position: relative;
    display: inline-block;
    top: 1px;
}

.tooltip .fa-solid {
    color: #706d6f;
    animation: colorChange 1s infinite alternate;
}

/* The actual tooltip text */
#tooltiptext {
    display: none;
    position: absolute;
    right: -2.15vw;
    transform: translate(80%, -30%);
    background-color: #040839;
    color: #fff;
    padding: 15px 15px 15px 15px;
    border-radius: 7px;
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.5s ease;
    letter-spacing: 1px;
    font-size: 0.59vw;
    max-width: 8.47vw;
    height: auto;
    word-wrap: break-word;
    text-align: left;
    z-index: 1;
}

.tooltip:hover #tooltiptext {
    display: block;
    top: 130%;
    visibility: visible;
    opacity: 1;
}


/* The icon with tooltip text */
.tooltip2 {
    position: relative;
    display: inline-block;
    top: 1px;
}

.tooltip2 .fa-solid {
    color: #706d6f;
    animation: colorChange 1s infinite alternate;
}

/* The actual tooltip text */
.tooltip2 #tooltiptext {
    display: none;
    position: absolute;
    right: -4.15vw;
    transform: translate(80%, -30%);
    background-color: #040839;
    color: #fff;
    padding: 15px 15px 15px 15px;
    border-radius: 7px;
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.5s ease;
    letter-spacing: 1px;
    font-size: 0.59vw;
    max-width: 13.47vw;
    height: auto;
    word-wrap: break-word;
    text-align: left;
    z-index: 1;
}

.tooltip2:hover #tooltiptext {
    display: block;
    top: 130%;
    visibility: visible;
    opacity: 1;
}


/* The icon with tooltip text */
.tooltip3 {
    position: relative;
    display: inline-block;
    top: 1px;
}

.tooltip3 .fa-solid {
    color: #706d6f;
    animation: colorChange 1s infinite alternate;
}

/* The actual tooltip text */
.tooltip3 #tooltiptext {
    display: none;
    position: absolute;
    right: -3.15vw;
    transform: translate(50%, -4%);
    background-color: #040839;
    color: #fff;
    padding: 15px 15px 15px 15px;
    border-radius: 7px;
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.5s ease;
    letter-spacing: 1px;
    font-size: 0.59vw;
    max-width: 13.47vw;
    height: auto;
    word-wrap: break-word;
    text-align: left;
    z-index: 1;
}

.tooltip3:hover #tooltiptext {
    display: block;
    top: 130%;
    visibility: visible;
    opacity: 1;
}

.hover-effect {
    text-decoration: none;
    color: inherit;
    display: inline-block;
    /* Ensure it behaves like a block */
}

.hover-effect .item {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.hover-effect .item:hover {
    transform: scale(1.05);
    /* Slightly enlarge the div */
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
    /* Add a shadow */
}

.containerSignup .item-1 {
    display: flex;
    align-items: center;
    /* padding: 1.20vw 2.6vw; */
    /* background-color: red; */
    margin-left: 3.3vw;
}

/* Image inside the containerSignup */
.containerSignup .item-1 img {
    max-width: 55%;
    max-height: 18vw;
    margin-left: 22%;
}


/*                                           Sign Up Commencement : Start                                                  */

.containerSignupComm {
    width: 55vw;
    background-color: #fff;
    border-radius: 5px;
    text-align: center;
    padding: 2.67vw 1.87vw 0.53vw 1.87vw;
    margin-top: 3.20vw;
    opacity: 0.89;
    color: #040839;
}

.containerSignupComm header {
    font-size: 2.19vw;
    font-weight: 600;
    margin: 0 0 1.6vw 0;
}

.containerSignupComm .form-outerComm {
    max-width: 100%;
}

.form-outerComm form {
    display: flex;
    min-width: 100%;
}

.form-outerComm form .page {
    min-width: 100%;
    transition: margin-left 0.3s ease-in-out;
}

.form-outerComm form .page .field {
    max-height: 2.5vw;
    max-width: 50vw;
    margin: 2.30vw 0;
    display: flex;
    position: relative;
    justify-content: center;
    /* background-color: red; */
}

.input-containerComm {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 50%;
    margin-left: 8%;
}

.form-outerComm form .page .field .label {
    position: absolute;
    top: -1.60vw;
    font-weight: 500;
    margin-bottom: 5px;
    margin-left: -10px;
    font-size: 0.88vw;
}

.form-outerComm form .page .field input {
    height: 2.5vw;
    width: 100%;
    border: 1px solid #040839;
    border-radius: 5px;
    font-size: 0.75vw;
    padding-left: 3.5%;
    /* text-transform: uppercase; */
    margin-left: -10px;
}

.form-outerComm form .page .field button {
    min-width: 42.3%;
    max-height: 50px;
    margin-top: -0.85vw;
    border: none;
    background-color: #040839;
    border-radius: 5px;
    color: #fff;
    font-size: 1.1vw;
    font-weight: 500;
    letter-spacing: 1px;
    /* text-transform: uppercase; */
    cursor: pointer;
    margin-left: 2.4vw;
    padding: 0.53vw 0.53vw;
}

.form-outerComm form .page .field button:hover {
    background: linear-gradient(135deg, #030834, #195FA4);
}

.commTerms1 {
    margin-bottom: 1vw;
    font-size: 0.9vw;
}

.commTerms2 {
    margin-top: 1vw;
    margin-bottom: 1vw;
    font-size: 0.7vw;
}

/*                                           Sign Up Commencement : End                                                  */


/* ---------------------------- On Boarding of additional users ---------------------------- */

.containerSignupAdd {
    width: 60%;
    background-color: #fff;
    border-radius: 5px;
    text-align: center;
    padding: 2.67vw 1.87vw 0.53vw 1.87vw;
    margin-top: 3.20vw;
    opacity: 0.89;
    color: #040839;
}

.containerSignupAdd header {
    font-size: 2.19vw;
    font-weight: 600;
    margin: 0 0 1.6vw 0;
}

.containerSignupAdd .progress-barAdd {
    display: flex;
    margin: 2.13vw 0;
}

.containerSignupAdd .progress-barAdd .stepAdd {
    position: relative;
    text-align: center;
    width: 100%;
}

.progress-barAdd .stepAdd p {
    font-size: 0.96vw;
    font-weight: 500;
    color: #040839;
    margin-bottom: 0.43vh;
    transition: 0.2s;
}

.progress-barAdd .stepAdd p.active {
    color: #91878c;
}

.progress-barAdd .stepAdd .bulletAdd {
    position: relative;
    min-height: 1.45vw;
    min-width: 1.45vw;
    border: .12vw solid #000;
    display: inline-block;
    border-radius: 50%;
    transition: 0.2s;

}

.progress-barAdd .stepAdd .bulletAdd.active {
    border-color: #91878c;
    background: #91878c;
}

.progress-barAdd .stepAdd:last-child .bulletAdd:before,
.progress-barAdd .stepAdd:last-child .bulletAdd:after {
    display: none;
}


.progress-barAdd .stepAdd .bulletAdd:before,
.progress-barAdd .stepAdd .bulletAdd:after {
    position: absolute;
    content: '';
    bottom: 0.59vw;
    right: -22.30vw;
    min-height: 0.16vw;
    min-width: 16.53vw;
    background: #262626;
}

.progress-barAdd .stepAdd .bulletAdd.active:after {
    background: #91878c;
    transform: scaleX(0);
    animation: animate 0.3s linear forwards;
}


@keyframes animate {
    100% {
        transform: scaleX(1);
    }
}

.progress-barAdd .stepAdd span {
    font-weight: 500;
    font-size: 0.89vw;
    position: absolute;
    left: 50%;
    transform: translateX(-50%)
}

.progress-barAdd .stepAdd .bulletAdd.active span {
    display: none;
}

.progress-barAdd .stepAdd .check {
    position: absolute;
    left: 50%;
    top: 67%;
    font-size: 0.80vw;
    transform: translate(-50%, -50%);
    display: none;

}

.progress-barAdd .stepAdd .check.active {
    display: block;
    color: #fff;
}

.containerSignupAdd .form-outerAdd {
    width: 100%;
    overflow: hidden;
}

/* Puts the forms next to each other for each page */
.form-outerAdd form {
    display: flex;
    width: 200%;
}

/* Then sections this as 50% of the 200% above */
.form-outerAdd form .page {
    width: 50%;
    transition: margin-left 0.3s ease-in-out;
}

/* Add Button for Products */

.form-outerAdd form .page .title {
    font-size: 1.5vw;
    font-weight: 500;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 2px;
    border-bottom: 0.14vw solid #040839;
}


.form-outerAdd form .page .field {
    height: 2.5vw;
    max-width: 62vw;
    margin: 2.30vw 0;
    display: flex;
    position: relative;
    justify-content: center;
}

.form-outerAdd form .page .field .label {
    position: absolute;
    top: -1.6vw;
    font-weight: 500;
    margin-left: -50px;
    font-size: 0.88vw;
}

.form-outerAdd form .page .field input {
    height: 2.5vw;
    width: 95%;
    border: 1px solid #040839;
    border-radius: 5px;
    font-size: 0.85vw;
    padding-left: 0.80vw;
    margin-left: -50px;
    text-transform: uppercase;
}

.form-outerAdd form .page .field button {
    min-width: 41%;
    max-height: 50px;
    margin-top: -0.85vw;
    border: none;
    background-color: #040839;
    border-radius: 5px;
    color: #fff;
    font-size: 1.1vw;
    font-weight: 500;
    letter-spacing: 1px;
    text-transform: uppercase;
    cursor: pointer;
    margin-left: 2.4vw;
}

.form-outerAdd form .page .field button:hover {
    background: linear-gradient(135deg, #030834, #195FA4);
}

form .page .btns button.prevAdd {
    margin-left: -2%;
}

.icon {
    position: absolute;
    left: 0.8vw;
    top: 0;
    font-size: 1.33vw;
    color: #0F3464;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ---------------------------- On Boarding End ---------------------------- */

/* ---------------------------- Forgot Password | Reset Password ---------------------------- */


/* Puts the forms next to each other for each page */
.form-outerPw form {
    display: flex;
    width: 100%;
}

/* Then sections this as 50% of the 200% above */
.form-outerPw form .page {
    width: 100%;
    /* transition: margin-left 0.3s ease-in-out; */
}

/* Add Button for Products */

.form-outerPw form .page .title {
    font-size: 1.5vw;
    font-weight: 500;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 2px;
    border-bottom: 0.14vw solid #040839;
}


.form-outerPw form .page .field {
    height: 2.5vw;
    max-width: 62vw;
    margin: 2.30vw 0;
    display: flex;
    position: relative;
    justify-content: center;
    /* background-color: red; */
}

.form-outerPw form .page .field .label {
    position: absolute;
    top: -1.6vw;
    font-weight: 500;
    margin-left: 7.50vw;
    font-size: 0.88vw;
}

.form-outerPw form .page .field input {
    height: 2.5vw;
    width: 60%;
    border: 1px solid #040839;
    border-radius: 5px;
    font-size: 0.85vw;
    padding-left: 0.80vw;
    margin-left: 7.50vw;
    text-transform: uppercase;
}

.form-outerPw form .page .field button {
    min-width: 41%;
    max-height: 50px;
    margin-top: -0.85vw;
    border: none;
    background-color: #040839;
    border-radius: 5px;
    color: #fff;
    font-size: 1.1vw;
    font-weight: 500;
    letter-spacing: 1px;
    text-transform: uppercase;
    cursor: pointer;
    margin-left: 1.4vw;
}

.form-outerPw form .page a {
    min-width: 41%;
    max-height: 50px;
    margin-top: -11.85vw;
    border: none;
    /* background-color: #040839; */
    border-radius: 5px;
    color: #333;
    font-size: 0.96vw;
    font-weight: 500;
    letter-spacing: 1px;
    /* text-transform: uppercase; */
    cursor: pointer;
    margin-left: 1.4vw;
}

.form-outerPw form .page .field button:hover {
    background: linear-gradient(135deg, #030834, #195FA4);
}








.add {
    text-decoration: none;
    display: inline-block;
}


/* The tool tip box with text - also gives distance to tool tip icon */


/* .tooltip2 {
    position: relative;
    cursor: pointer;
    padding: 7px;
    top: 1px;
    left: -395px
} */



.logInRef.white {
    color: #fff;
}


@keyframes colorChange {
    0% {
        color: #999;
    }

    100% {
        color: #040839;
    }
}


/* ---------------------------------------- Not clear - Maybe Onboarding ---------------------------------------- */



/* .field .input-container .button {
    height: 45px;
}

.field .input-container .button input {
    font-weight: 600;
    border-radius: 8px;
    letter-spacing: 1px;
    cursor: pointer;
    background-color: #706d6f;
    color: #fff;
}

.field .input-container .button input:hover {
    font-size: 24px;
    background: linear-gradient(135deg, #706d6f, #302d2f);
    color: #fff;
    border: 2px solid #fff;
} */



/* ---------------------------------------- Media Queries ---------------------------------------- */