.woocomerce {
    &__signin {
        max-width: 690px;
        margin: 150px auto 200px;

        @media #{$lg} {
            margin: 120px auto;
        }

        @media #{$md} {
            margin: 100px auto;
        }

        @media #{$sm} {
            margin: 60px auto;
        }

        &-titlewrap {
            padding-bottom: 30px;
        }

        &-title {
            font-family: $font_primary;
            font-weight: 400;
            font-size: 40px;
            line-height: 1.8;
            color: var(--black-2);
            display: block;
        }

        &-dis {
            font-family: $font_primary;
            font-weight: 400;
            font-size: 18px;
            line-height: 25px;
            color: var(--black-7);

            span {
                font-weight: 500;
                color: var(--black-2);
            }
        }

        &-field {
            margin-bottom: 25px;

            label {
                display: block;
                padding-bottom: 7px;
                font-size: 14px;
                font-family: $font_primary;
            }

            input {
                width: 100%;
                border: 1px solid #E9E9E9;
                height: 50px;
                padding: 15px;
                padding-right: 46px;

                &::placeholder {
                    font-family: $font_primary;
                    font-weight: 400;
                    font-size: 14px;
                    line-height: 20px;
                    color: #999999;
                }

                &:focus {
                    outline: 0;
                }
            }
        }

        &-passwordfield {
            position: relative;
        }

        &-view {
            position: absolute;
            right: 20px;
            top: 50%;
            transform: translateY(-50%);
        }

        &-checkbox {
            input {
                appearance: none;

                &:checked~label::after {
                    opacity: 1;
                    visibility: visible;
                }
            }

            label {
                font-family: $font_primary;
                font-weight: 400;
                font-size: 14px;
                line-height: 14px;
                color: var(--black-2);
                position: relative;
                padding-left: 30px;
                cursor: pointer;

                &::before {
                    content: "";
                    width: 20px;
                    height: 20px;
                    border: 1px solid #999999;
                    top: -3px;
                    left: 0;
                    position: absolute;
                }

                &::after {
                    content: "";
                    position: absolute;
                    background-image: url(../imgs/woocomerce/check-sign.png);
                    top: 3px;
                    left: 6px;
                    width: 100%;
                    height: 100%;
                    z-index: 99;
                    border-radius: 50px;
                    opacity: 0;
                    visibility: hidden;
                    background-repeat: no-repeat;
                    transition: 0.5s;
                }
            }
        }

        &-btnwrap {
            padding-top: 30px;
            padding-bottom: 50px;

            &.signupbtn {
                padding-top: 8px;
                padding-bottom: 30px;
            }
        }

        &-resetbuton {
            padding-top: 5px;
        }

        &-formfooter {
            p {
                font-family: $font_primary;
                font-weight: 400;
                font-size: 18px;
                line-height: 20px;
                color: var(--black-7);
                padding-bottom: 10px;

                a {
                    color: var(--black-2);
                    text-decoration: underline;

                    &:hover {
                        color: var(--black-7);
                    }
                }
            }

            a {
                font-family: $font_primary;
                font-weight: 400;
                font-size: 18px;
                line-height: 20px;
                color: var(--black-7);
                transition: .5s;

                &:hover {
                    color: var(--black-2);
                }
            }
        }
    }
}