*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
}
body{
    background-color: #000;
    margin: 0px 0px 0px 0px;
}

.error{
    background: rgba(248, 238, 98, 0.445) !important;
}

.formContainer{
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background-image: url(../assets/img/signupBg.jpg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.formWrapper{
    /* border: 1px solid #000; */
    width: 732px;
    /* min-width: 732px; */
    display: flex;
    flex-direction: column;
    padding: 20px 60px;
    background: rgba(0, 0, 0, 0.555);
    backdrop-filter: blur(2px);
    border-radius: 8px;
    -webkit-box-shadow: 0px 0px 11px 0px rgba(0,0,0,0.36); 
    box-shadow: 0px 0px 11px 0px rgba(0,0,0,0.36);
    transition: all 0.5s ease;
    color: #ffffffff;
    margin: 50px 0;
    & form{
        display: flex;
        flex-direction: column;
        gap: 20px;
        & button{
            width: 100%;
            padding: 10px 20px;
            border-radius: 8px;
            border: none;
            outline: none;
            background: linear-gradient(315deg,#0bc4e2 0,#2c8cc2 100%);
            color: #fff;
            font-size: 18px;
            cursor: pointer;
            transition: 0.1s all ease-in-out;
            box-shadow: 0 10px 45px -10px rgba(11,196,226,.15), 
                        0 0 20px -10px rgba(11,196,226,.35), 
                        0 10px 30px -10px rgba(11,196,226,.25);
            &:hover{
                background: linear-gradient(315deg,#0bc4e2 0,#0bc4e2 50%,#2c8cc2 100%);
                /* color: #fff; */
                box-shadow: 0 10px 30px -10px rgba(11,196,226,.25), 
                            0 10px 30px -10px rgba(11,196,226,.5), 
                            0 10px 35px -10px rgba(11,196,226,.5);
            }
            &:active{
                scale: 0.9;
            }
        }
        & .field{
            display: flex;
            flex-direction: column;
            height: 60px;
            & label{
                margin-bottom: 5px;
            }
            & input{
                /* margin-bottom: 20px; */
                padding: 10px 20px;
                border-radius: 8px;
                border: none;
                outline: none;
                background: rgba(0, 0, 0, 0.212);
                backdrop-filter: blur(2px);
                color: #fff;
                font-size: 18px;
                &::placeholder{
                    color: #fff;
                }
                &:focus{
                    border: 3px solid #269AFF;
                }
            }
        }
        & div{
            /* display: flex; */
            /* flex-direction: column; */
            & .note{
                /* width: 100%; */
                margin-top: 10px;
                & textarea{
                    outline: none;
                    border: none;
                    background: rgba(0, 0, 0, 0.212);
                    backdrop-filter: blur(2px);
                    color: #fff;
                    font-size: 18px;
                    padding: 10px 20px;
                    border-radius: 8px;
                    width: 100%;
                    max-width: 100%;
                    min-height: 100px;
                    /* resize: none; */
                    &::placeholder{
                        color: #fff;
                    }
                }
            }
            & .nationaly{
                margin-top: 10px;
                height: 45px;
                display: flex;
                align-items: center;
                border-radius: 8px;
                /* padding: 10px; */
                & select{
                    width: 100%;
                    padding: 10px 20px;
                    border-radius: 8px;
                    border: none;
                    outline: none;
                    background: rgba(0, 0, 0, 0.212);
                    backdrop-filter: blur(2px);
                    color: #fff;
                    font-size: 18px;
                    & option{
                      background-color: #269AFF;
                      
                      
                    }
                    
                    &::placeholder{
                        color: #fff;
                    }
                    &:focus{
                        border: 3px solid #269AFF;
                    }

                }
            }
            & .hobby{
                padding: 10px;
                border-radius: 8px;
                border: 2px solid rgba(0, 0, 0, 0.603);
                margin-top: 10px;
                display: flex;
                .checkbox-wrapper-12 {
                    position: relative;
                    display: flex;
                    align-items: center;
                    gap: 10px;
                    margin-right: 20px;
                  }
                  
                  .checkbox-wrapper-12 > svg {
                    position: absolute;
                    top: -130%;
                    left: -170%;
                    width: 110px;
                    pointer-events: none;
                    
                  }
                  
                  .checkbox-wrapper-12 * {
                    box-sizing: border-box;
                  }
                  
                  .checkbox-wrapper-12 input[type="checkbox"] {
                    -webkit-appearance: none;
                    -moz-appearance: none;
                    appearance: none;
                    -webkit-tap-highlight-color: transparent;
                    cursor: pointer;
                    margin: 0;
                  }
                  
                  .checkbox-wrapper-12 input[type="checkbox"]:focus {
                    outline: 0;
                  }
                  
                  .checkbox-wrapper-12 .cbx {
                    width: 24px;
                    height: 24px;
                    top: calc(100px - 12px);
                    left: calc(100px - 12px);
                  }
                  
                  .checkbox-wrapper-12 .cbx input {
                    position: absolute;
                    top: 0;
                    left: 0;
                    width: 24px;
                    height: 24px;
                    border: 2px solid #bfbfc0;
                    border-radius: 30%;
                  }
                  
                  .checkbox-wrapper-12 .cbx label {
                    width: 24px;
                    height: 24px;
                    background: none;
                    border-radius: 30%;
                    position: absolute;
                    top: 0;
                    left: 0;
                    transform: trasnlate3d(0, 0, 0);
                    pointer-events: none;
                  }
                  
                  .checkbox-wrapper-12 .cbx svg {
                    position: absolute;
                    top: 5px;
                    left: 4px;
                    z-index: 1;
                    pointer-events: none;
                  }
                  
                  .checkbox-wrapper-12 .cbx svg path {
                    stroke: #fff;
                    stroke-width: 3;
                    stroke-linecap: round;
                    stroke-linejoin: round;
                    stroke-dasharray: 19;
                    stroke-dashoffset: 19;
                    transition: stroke-dashoffset 0.3s ease;
                    transition-delay: 0.2s;
                  }
                  
                  .checkbox-wrapper-12 .cbx input:checked + label {
                    animation: splash-12 0.6s ease forwards;
                  }
                  
                  .checkbox-wrapper-12 .cbx input:checked + label + svg path {
                    stroke-dashoffset: 0;
                  }

            }
            & .sex{
                padding: 10px;
                border-radius: 8px;
                border: 2px solid rgba(0, 0, 0, 0.603);
                margin-top: 10px;
                display: flex;
                .checkbox-wrapper-12 {
                    position: relative;
                    display: flex;
                    align-items: center;
                    gap: 10px;
                    margin-right: 20px;
                  }
                  
                  .checkbox-wrapper-12 > svg {
                    position: absolute;
                    top: -130%;
                    left: -170%;
                    width: 110px;
                    pointer-events: none;
                    
                  }
                  
                  .checkbox-wrapper-12 * {
                    box-sizing: border-box;
                  }
                  
                  .checkbox-wrapper-12 input[type="checkbox"] {
                    -webkit-appearance: none;
                    -moz-appearance: none;
                    appearance: none;
                    -webkit-tap-highlight-color: transparent;
                    cursor: pointer;
                    margin: 0;
                  }
                  
                  .checkbox-wrapper-12 input[type="checkbox"]:focus {
                    outline: 0;
                  }
                  
                  .checkbox-wrapper-12 .cbx {
                    width: 24px;
                    height: 24px;
                    top: calc(100px - 12px);
                    left: calc(100px - 12px);
                  }
                  
                  .checkbox-wrapper-12 .cbx input {
                    position: absolute;
                    top: 0;
                    left: 0;
                    width: 24px;
                    height: 24px;
                    border: 2px solid #bfbfc0;
                    border-radius: 50%;
                  }
                  
                  .checkbox-wrapper-12 .cbx label {
                    width: 24px;
                    height: 24px;
                    background: none;
                    border-radius: 50%;
                    position: absolute;
                    top: 0;
                    left: 0;
                    transform: trasnlate3d(0, 0, 0);
                    pointer-events: none;
                  }
                  
                  .checkbox-wrapper-12 .cbx svg {
                    position: absolute;
                    top: 5px;
                    left: 4px;
                    z-index: 1;
                    pointer-events: none;
                  }
                  
                  .checkbox-wrapper-12 .cbx svg path {
                    stroke: #fff;
                    stroke-width: 3;
                    stroke-linecap: round;
                    stroke-linejoin: round;
                    stroke-dasharray: 19;
                    stroke-dashoffset: 19;
                    transition: stroke-dashoffset 0.3s ease;
                    transition-delay: 0.2s;
                  }
                  
                  .checkbox-wrapper-12 .cbx #cbx-12:checked + label {
                    animation: splash-12 0.6s ease forwards;
                  }
                  .checkbox-wrapper-12 .cbx #cbx-13:checked + label {
                    animation: splash-13 0.6s ease forwards;
                  }
                  
                  .checkbox-wrapper-12 .cbx input:checked + label + svg path {
                    stroke-dashoffset: 0;
                  }
                  
                  
            }
        }
    }
    & .formTitle{
        text-align: center;
        font-size: 36px;
        font-weight: 600;
        color: #fff;
        margin-bottom: 20px;

        background: #269AFF;
        background: linear-gradient(to right, #269AFF 25%, #8AFBFF 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        font-size: 40px;
        font-weight: bold;
    }
}


@-moz-keyframes splash-12 {
40% {
    background: #269AFF;
    box-shadow: 0 -18px 0 -8px #269AFF, 16px -8px 0 -8px #269AFF, 16px 8px 0 -8px #269AFF, 0 18px 0 -8px #269AFF, -16px 8px 0 -8px #269AFF, -16px -8px 0 -8px #269AFF;
}

100% {
    background: #269AFF;
    box-shadow: 0 -36px 0 -10px transparent, 32px -16px 0 -10px transparent, 32px 16px 0 -10px transparent, 0 36px 0 -10px transparent, -32px 16px 0 -10px transparent, -32px -16px 0 -10px transparent;
}
}

@-webkit-keyframes splash-12 {
40% {
    background: #269AFF;
    box-shadow: 0 -18px 0 -8px #269AFF, 16px -8px 0 -8px #269AFF, 16px 8px 0 -8px #269AFF, 0 18px 0 -8px #269AFF, -16px 8px 0 -8px #269AFF, -16px -8px 0 -8px #269AFF;
}

100% {
    background: #269AFF;
    box-shadow: 0 -36px 0 -10px transparent, 32px -16px 0 -10px transparent, 32px 16px 0 -10px transparent, 0 36px 0 -10px transparent, -32px 16px 0 -10px transparent, -32px -16px 0 -10px transparent;
}
}

@-o-keyframes splash-12 {
40% {
    background: #269AFF;
    box-shadow: 0 -18px 0 -8px #269AFF, 16px -8px 0 -8px #269AFF, 16px 8px 0 -8px #269AFF, 0 18px 0 -8px #269AFF, -16px 8px 0 -8px #269AFF, -16px -8px 0 -8px #269AFF;
}

100% {
    background: #269AFF;
    box-shadow: 0 -36px 0 -10px transparent, 32px -16px 0 -10px transparent, 32px 16px 0 -10px transparent, 0 36px 0 -10px transparent, -32px 16px 0 -10px transparent, -32px -16px 0 -10px transparent;
}
}

@keyframes splash-12 {
40% {
    background: #269AFF;
    box-shadow: 0 -18px 0 -8px #269AFF, 16px -8px 0 -8px #269AFF, 16px 8px 0 -8px #269AFF, 0 18px 0 -8px #269AFF, -16px 8px 0 -8px #269AFF, -16px -8px 0 -8px #269AFF;
}

100% {
    background: #269AFF;
    box-shadow: 0 -36px 0 -10px transparent, 32px -16px 0 -10px transparent, 32px 16px 0 -10px transparent, 0 36px 0 -10px transparent, -32px 16px 0 -10px transparent, -32px -16px 0 -10px transparent;
}
}



@-moz-keyframes splash-13 {
40% {
    background: #f27185;
    box-shadow: 0 -18px 0 -8px #f27185, 16px -8px 0 -8px #f27185, 16px 8px 0 -8px #f27185, 0 18px 0 -8px #f27185, -16px 8px 0 -8px #f27185, -16px -8px 0 -8px #f27185;
}

100% {
    background: #f27185;
    box-shadow: 0 -36px 0 -10px transparent, 32px -16px 0 -10px transparent, 32px 16px 0 -10px transparent, 0 36px 0 -10px transparent, -32px 16px 0 -10px transparent, -32px -16px 0 -10px transparent;
}
}

@-webkit-keyframes splash-13 {
40% {
    background: #f27185;
    box-shadow: 0 -18px 0 -8px #f27185, 16px -8px 0 -8px #f27185, 16px 8px 0 -8px #f27185, 0 18px 0 -8px #f27185, -16px 8px 0 -8px #f27185, -16px -8px 0 -8px #f27185;
}

100% {
    background: #f27185;
    box-shadow: 0 -36px 0 -10px transparent, 32px -16px 0 -10px transparent, 32px 16px 0 -10px transparent, 0 36px 0 -10px transparent, -32px 16px 0 -10px transparent, -32px -16px 0 -10px transparent;
}
}

@-o-keyframes splash-13 {
40% {
    background: #f27185;
    box-shadow: 0 -18px 0 -8px #f27185, 16px -8px 0 -8px #f27185, 16px 8px 0 -8px #f27185, 0 18px 0 -8px #f27185, -16px 8px 0 -8px #f27185, -16px -8px 0 -8px #f27185;
}

100% {
    background: #f27185;
    box-shadow: 0 -36px 0 -10px transparent, 32px -16px 0 -10px transparent, 32px 16px 0 -10px transparent, 0 36px 0 -10px transparent, -32px 16px 0 -10px transparent, -32px -16px 0 -10px transparent;
}
}

@keyframes splash-13 {
40% {
    background: #f27185;
    box-shadow: 0 -18px 0 -8px #f27185, 16px -8px 0 -8px #f27185, 16px 8px 0 -8px #f27185, 0 18px 0 -8px #f27185, -16px 8px 0 -8px #f27185, -16px -8px 0 -8px #f27185;
}

100% {
    background: #f27185;
    box-shadow: 0 -36px 0 -10px transparent, 32px -16px 0 -10px transparent, 32px 16px 0 -10px transparent, 0 36px 0 -10px transparent, -32px 16px 0 -10px transparent, -32px -16px 0 -10px transparent;
}
}