.fp-cmn-modal {
    .modal-content {
        padding: 20px;
        background: $bgLightPurplev2;

        @media only screen and (max-width: $md_991) {
            padding: 10px;
        }
    }

    .modal-body,
    .modal-header,
    .modal-footer {
        border: 0;

        @media only screen and (max-width: $xs_575) {
            padding-left: 0;
            padding-right: 0;
        }
    }

    .modal-body {
        p {
            a {
                color: $textPink;
                &:hover {
                    text-decoration: underline;
                }
            }
        }
        @media only screen and (max-width: $xs_575) {
            padding-top: 0;
        }
    }

    .modal-header {
        position: relative;
        display: block;
        text-align: center;

        .btn-close {
            position: absolute;
            top: 15px;
            right: 15px;
            opacity: 1;

            &:focus {
                box-shadow: none;
            }

            @media only screen and (max-width: $xs_575) {
                top: 0;
                right: 0;
            }
        }
    }

    .fp-modal-box-list {
        display: flex;
        cursor: pointer;
        padding: 20px 30px;
        align-items: center;
        border-radius: 10px;
        margin-bottom: 15px;
        background: $bgWhite;

        @media only screen and (max-width: $md_991) {
            display: block;
            padding: 20px;
        }

        * {
            @include fpTransition;
        }

        .fp-modal-box-img {
            width: 68px;
            height: 68px;
            line-height: 65px;
            text-align: center;
            border-radius: 12px;
            background: $bgBlack;

            @media only screen and (max-width: $md_991) {
                width: 60px;
                height: 60px;
                line-height: 58px;

                .fp-svg {
                    width: 25px;
                    height: 25px;
                }
            }
        }

        .fp-modal-box-des {
            padding-left: 25px;

            @media only screen and (max-width: $md_991) {
                padding-left: 0;
                padding-top: 15px;
            }

            .fp-head-24 {
                margin-bottom: 5px;
            }

            p {
                margin-bottom: 0;
            }
        }

        &:hover,
        &.fp-select-box {
            background-color: $bgBlack;

            .fp-modal-box-img {
                background-color: $bgPurple;

                .fp-svg {
                    path {
                        fill: $bgBlack;
                    }
                }
            }

            .fp-modal-box-des {

                p,
                .fp-head-24 {
                    color: $textPurple;
                }
            }
        }
    }

    .modal-footer {
        display: block;
        text-align: center;

        .fp-black-btn {
            min-width: 260px;
        }

        .fp-modal-signin-des {
            padding-top: 15px;

            p {
                color: $textBlack;

                a {
                    @include fpCommonLink;
                }
            }
        }
    }

    .fp-cmn-form {
        .form-control {
            border-color: $bgLightPink;
        }

        .fp-signin-checkbox {
            display: flex;
            justify-content: space-between;

            a {
                @include fpCommonLink;
            }
        }

        .fp-cmn-btn {
            width: 100%;
        }

        .fp-or-divider {
            position: relative;
            margin-top: 25px;

            &::after {
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                width: 100%;
                height: 1px;
                content: '';
                margin: auto;
                background: rgba($color: $bgBlack, $alpha: 0.3);
            }

            span {
                position: relative;
                z-index: 1;
                margin: 0 auto;
                display: block;
                padding: 0 12px;
                width: max-content;
                text-transform: capitalize;
                background: $bgLightPurplev2;
            }
        }

        .fp-check-des {
            font-size: $font14;
        }
    }
}

// SignIn Modal
.fp-signin-modal {
    .modal-footer {
        padding-top: 0;

        .fp-modal-signin-des {
            padding-top: 0;
        }

        .fp-cmn-btn {
            width: 100%;
        }
    }
}