@import url('https://fonts.googleapis.com/css2?family=Lato:wght@400;700&display=swap');
* {
    box-sizing: border-box;
}

/* body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    font-family: 'Lato', sans-serif;
    background-color: whitesmoke;
} */

body {
    font-family: "Segoe UI Webfont",-apple-system,"Helvetica Neue","Lucida Grande","Roboto","Ebrima","Nirmala UI","Gadugi","Segoe Xbox Symbol","Segoe UI Symbol","Meiryo UI","Khmer UI","Tunga","Lao UI","Raavi","Iskoola Pota","Latha","Leelawadee","Microsoft YaHei UI","Microsoft JhengHei UI","Malgun Gothic","Estrangelo Edessa","Microsoft Himalaya","Microsoft New Tai Lue","Microsoft PhagsPa","Microsoft Tai Le","Microsoft Yi Baiti","Mongolian Baiti","MV Boli","Myanmar Text","Cambria Math";
    color: #000;
    background-color: whitesmoke;
    width: 100%;
    height: 100vh;
    margin: 0;
    padding: 0;
    background-image: url("IMAGE/images.jpeg");
    background-repeat: no-repeat;
    background-size: cover;
    /* background-color: rgba(255,255,255,0.65) */ 
}

.container {
    max-width: 400px;
    height: fit-content;
    margin-top: 80px;
    margin-bottom: 20px;
    margin-left: auto;
    margin-right: auto;
    /* border: 1px solid gainsboro; */
    box-shadow: 0px 0px 3px gray;
    border-radius: 0;
    background-color: #fff;
}

.container_element {
    width: 100%;
    margin: 0 auto;
    padding-left: 30px;
    padding-right: 30px;
    padding-bottom: 30px;
    padding-top: 0;
    /* padding: 30px; */
}

.after_container {
    max-width: 400px;
    height: 50px;
    margin: 0 auto;
    /* border: 1px solid gainsboro; */
    box-shadow: 0px 0px 3px gray;
    background-color: #fff;
    padding-left: 30px;
    padding-right: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.after_container_element {
    width: 100%;
    margin: 0 auto;
    padding-left: 20px;
}

.micro_image {
    width: 100px;
    height: 50px;
    object-fit: fill;
    margin-top: 30px;
}

.Sign {
    margin-top: 0;
    padding-top: 0;
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 10px;
    padding-bottom: 0;
}

.two input {
    width: 100%;
    border: none;
    border-bottom: 1px solid gainsboro;
    padding-bottom: 5px;
    outline: none;
    border-radius: 0;
    font-size: 15px;
    font-weight: 500;
}

.two input:focus {
    border-bottom: 1px solid rgb(23, 143, 248);
}

.three p{
    font-size: 13px;
    font-weight: 500;
    color: rgb(49, 49, 49);
}

.three span {
    color: rgb(17, 127, 223);
    font-size: 13px;
    font-weight: 500;
    
}

.shift_left {
    padding-left: 5px;
}

.button {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 3px;
}

.button button {
    width: 80px;
    height: 28px;
    border: none;
    margin-top: 20px;
}

.next {
    font-size: 11px;
    font-weight: 500;
    color: #fff;
    background-color: rgb(10, 111, 218);
}

.back {
    font-size: 11px;
    font-weight: 500;
    color: black;
    background-color: rgb(206, 206, 206);
}

.after_container_element p {
    font-size: 14px;
    font-weight: 400;
    color: rgb(49, 49, 49);
    display: flex;
    justify-content: left;
    align-items: center;
    gap: 15px;
}

.after_container_element img {
    width: 25px;
    height: 25px;
    object-fit: fill;
}

.footer {
    display: flex;
    justify-content: right;
    align-items: center;
    gap: 15px;
    padding-right: 10px;
    margin-top: 50px;
    position: absolute;
    bottom: 0;
    right: 10px;
}

.footer p {
    font-size: 13px;
    font-weight: 500;
    color: rgb(49, 49, 49);
}


/* error message */
.error_message_alert {
    font-size: 14px;
    font-weight: 400;
    color: red;
    margin-top: 0;
    padding-top: 0;
    display: none;
}

.show_it_again {
    display: flex;
}

/* ANIMATE STYLE */
.round {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 50px;
    display: none;
}

.showround {
    display: flex;
}

.round div {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background-color: rgb(10, 111, 218);
    margin-top: 0;
    padding-top: 0;
    animation: scaling 2.5s ease-in-out infinite;
}


@keyframes scaling {
    0%, 100% {
        /* transform: scale(0.3); */
        transform: translateX(800%);
    }
    50%{
        transform: scale(1);
    }
}

.round div:nth-child(0){
    animation-delay: 0s;
}

.round div:nth-child(1){
    animation-delay: 0.2s;
}

.round div:nth-child(2){
    animation-delay: 0.4s;
}

.round div:nth-child(3){
    animation-delay: 0.6s;
}

.round div:nth-child(4){
    animation-delay: 0.8s;
}

.round div:nth-child(5){
    animation-delay: 1s;
}


.showopac {
    opacity: .5;
}

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

    body {
        background-image: none;
    }


    .container  {
        border: none;
        box-shadow: none;
        background-color: whitesmoke;
        margin-top: 10px;
    }

    .two input {
        background-color: whitesmoke;
    }

    .after_container {
        border: none;
        box-shadow: none;
        background-color: whitesmoke;
    }

    .after_container_element {
        width: 100%;
        margin: 0 auto;
        padding-left: 20px;
         max-width: 350px;
        height: fit-content;
        margin: 0 auto;
        border: 1px solid gainsboro;
        box-shadow: 0px 0px 3px gainsboro;
        background-color: whitesmoke;
    }

    .footer {
        display: flex;
        justify-content: left;
        align-items: center;
        gap: 15px;
        padding-left: 10px;
        margin-top: 100px;
        position: absolute;
        bottom: 0;
        left: 10px;
    }

}