@import url("https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap");

* {

    margin: 0;

    padding: 0;

    outline: none;

    font-family: "Poppins", sans-serif;

}

:root {

    --primary: #fff;

    --secondary: #f88206;
    --main-color: #fe940d;
    --text: #888;

    --errorColor: red;

    --sucessColor: green;

    --stepNumber: 6;

    --containerWidth: 600px;

    --bgColor: #efefef;

    --inputBorderColor: #f88206;

    --box-bg: #004080;

    --text-color: #ffffff;

    --nav-height: 60px;

    --space-top: 30px;

}

a{

    color: #fff;

}


body {

    min-height: 100vh;

    overflow-x: hidden;

    background: var(--bgColor);

    color: #f88206;

}

::selection {

    color: var(--main-color);

    background: var(--box-bg);

}

span{
    color: var(--text);
}

.bamba{

 min-height: 100vh;

 display: flex;

 align-items: center;

 justify-content: center;



}

.m-txt{
    color: var(--text);
}
.flex {
  display: flex;
  align-items: center;
}


.lgcontainer {

    width: var(--containerWidth);

    background: transparent;

    text-align: center;

    border-radius: 5px;

    padding: 50px 35px 10px 35px;

}

.lgcontainer header {

    font-size: 35px;

    font-weight: 600;

}

.lgcontainer .form-outer {

    width: 100%;

    overflow: hidden;

}

.lgcontainer .form-outer form {

    display: flex;

    width: calc(100% * var(--stepNumber));

}

.form-outer form .page {

    width: calc(100% / var(--stepNumber));

    transition: margin-left 0.3s ease-in-out;

}

.form-outer form .page .title {

    text-align: left;

    font-size: 25px;

    font-weight: 500;

}

.form-outer form .page .field {

    width: 100%;

    height: 45px;

    margin: 45px 0 0 0;

    display: flex;

    position: relative;

}

form .page .field .label {

    position: absolute;

    top: -30px;

    font-weight: 500;
color: var(--text);    
}

form .page .field input, textarea{

    box-sizing: border-box;

    height: 100%;

    width: 100%;
    border:none;

    border-bottom: 2px solid var(--secondary);


    padding-left: 15px;

    margin: 0 1px;

    font-size: 18px;

    transition: border-color 150ms ease;

    background: transparent;

    color: #888;

}

form .page .field input.invalid-input, textarea.invalid-input {

    border-color: var(--errorColor);

}



form .page .field input.has-success {

    border-color: var(--sucessColor);

}

form .page .field select {

    width: 100%;

    padding-left: 10px;

    font-size: 17px;
    color: #888;

    font-weight: 500;

    border: 1px solid var(--inputBorderColor);





}

form .page .field button, form .page .field input.submit, form .page .field input.login, .piggi {

    width: 100%;

    height: calc(100% + 5px);

    border: none;

    background: var(--secondary);

    margin-top: -20px;

    border-radius: 5px;

    padding-left: 0px;

    color: #fff;

    cursor: pointer;

    font-size: 18px;

    font-weight: 500;

    letter-spacing: 1px;

    transition: 0.5s ease;

}



form .page .field button i{

    font-size: 0.8em;

}

form .page .field button:hover {

    background: #000;

}

form .page .btns button {

    margin-top: -20px !important;

}

form .page .btns button.prev {

    margin-right: 3px;

    font-size: 17px;

}

form .page .btns button.next {

    margin-left: 3px;

}

.lgcontainer .progress-bar {

    display: flex;

    margin: 40px 0;

    user-select: none;

}

.lgcontainer .progress-bar .step {

    text-align: center;

    width: 100%;

    position: relative;

}

.lgcontainer .progress-bar .step p {

    font-weight: 500;

    font-size: 18px;

    color: #000;

    margin-bottom: 8px;

}

.progress-bar .step .bullet {

    height: 25px;

    width: 25px;

    border: 2px solid #000;

    display: inline-block;

    border-radius: 50%;

    position: relative;

    transition: 0.2s;

    font-weight: 500;

    font-size: 17px;

    line-height: 25px;

}







.progress-bar .step .bullet.active {

    border-color: var(--primary);

    background: var(--primary);

}

.progress-bar .step .bullet span {

    position: absolute;

    left: 50%;

    transform: translateX(-50%);

}

.progress-bar .step .bullet.active span {

    display: none;

}

.progress-bar .step .bullet:before,

.progress-bar .step .bullet:after {

    position: absolute;

    content: "";

    bottom: 11px;

    right: -51px;

    height: 3px;

    width: 44px;

    background: #262626;

}

.progress-bar .step .bullet.active:after {

    background: var(--primary);

    transform: scaleX(0);

    transform-origin: left;

    animation: animate 0.3s linear forwards;

}

@keyframes animate {

    100% {

        transform: scaleX(1);

    }

}

.progress-bar .step:last-child .bullet:before,

.progress-bar .step:last-child .bullet:after {

    display: none;

}

.progress-bar .step p.active {

    color: var(--primary);

    transition: 0.2s linear;

}

.progress-bar .step .check {

    position: absolute;

    left: 50%;

    top: 70%;

    font-size: 15px;

    transform: translate(-50%, -50%);

    display: none;

}

.progress-bar .step .check.active {

    display: block;

    color: #fff;

}



@media screen and (max-width: 660px) {

    :root {

        --containerWidth: 400px;

    }

    .progress-bar .step p {

        display: none;

    }

    .progress-bar .step .bullet::after,

    .progress-bar .step .bullet::before {

        display: none;

    }

    .progress-bar .step .bullet {

        display: flex;

        align-items: center;

        justify-content: center;

    }

    .progress-bar .step .check {

        position: absolute;

        left: 50%;

        top: 50%;

        font-size: 15px;

        transform: translate(-50%, -50%);

        display: none;

    }

    .step {

        display: flex;

        align-items: center;

        justify-content: center;

    }

}

@media screen and (max-width: 490px) {

    :root {

        --containerWidth: 100%;

    }

    .lgcontainer {

        box-sizing: border-box;

        border-radius: 0;

    }

}