.payment-box {
    margin-top: $space30;

    .head {
        @include font-size(16px);
        line-height: 20px;
        font-family: $robotomedium;
        color: $title-color;
        margin-bottom: $space10;
    }

    .list-type {
        margin-bottom: $space25;

        .list-item {
            display: flex;
            @include font-size(15px);
            line-height: 16px;
            color: $subtitle-color;
            margin-bottom: $space10;

            &:nth-last-of-type(1) {
                margin-bottom: 0;
            }

            img {
                width: 14px;
                height: 14px;
                margin-right: $space5+3;
                vertical-align: top;
            }
        }
    }

    .delete-payment {
        width: 17px;
        height: 22px;
        display: block;
        margin: auto;
        cursor: pointer;
    }

    .d-payment-list {
        display: none;
    }

    .m-payment-list {
        margin-bottom: $space10;

        .payment-detail {
            border: $common-border;
            border-radius: 5px;
            padding: $space15 $space10;
            margin-bottom: $space15;

            .p-item {
                @include font-size(14px);
                line-height: 15px;
                display: flex;
                margin-bottom: $space10;

                &:nth-of-type(1) {
                    .pvalue {
                        width: 185px;
                    }
                }

                &:nth-last-of-type(1) {
                    justify-content: space-between;
                    margin-bottom: 0;
                }

                .phead {
                    font-family: $robotomedium;
                    color: $title-color;
                }

                .pvalue {
                    color: $subtitle-color;
                    margin-left: $space10;

                    &.fee-amt {
                        font-family: $robotomedium;
                        color: $success-color-light;
                    }
                }
            }
        }

        .delete-payment {
            margin: unset;
        }
    }

    .fees {
        display: flex;
        justify-content: flex-end;
        align-items: flex-end;
        flex-direction: column;

        .f-head {
            @include font-size(15px);
            line-height: 18px;
            color: $title-color;
            margin-bottom: $space10;

            .fee-amt {
                font-family: $robotomedium;
                margin-left: $space10;
            }
        }

        .pay-btn {
            @include font-size(15px);
            line-height: 18px;
            font-family: $robotomedium;
            color: $white;
            background: $success-color-light;
            border-radius: 5px;
            padding: $space10 $space20;
        }
    }
}

.delete-popup {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    width: 90%;
    height: fit-content;
    background: $white;
    border-radius: 10px;
    z-index: 13;
    box-shadow: 0px 0px 16px 0px #00000024;
    text-align: center;

    .popup-body {
        padding: $space20;
    }

    .head {
        @include font-size(16px);
        line-height: 20px;
        color: $title-color;
        font-family: $robotomedium;
        padding: $space10 $space15;
        background: $bg-light;
        border-radius: 10px 10px 0 0;
        text-align: left;
    }

    img {
        width: 50px;
        height: 50px;
        display: block;
        margin: $space20 auto;
    }

    .m-head {
        @include font-size(16px);
        font-family: $robotoregular;
        padding: 0 $space30;
        margin-bottom: $space20;
    }

    .btns {
        display: flex;
        justify-content: center;

        .common-btn {
            @include font-size(16px);
            line-height: 18px;
            font-family: $robotomedium;
            color: $white;
            background: $primary-color;
            border-radius: 5px;
            padding: $space10 $space20;
            margin-top: $space25;
            width: fit-content;
            display: block;
            transition: 0.3s all ease-in-out;

            @media (hover:hover) {
                &:hover {
                    background: $primary-hover;
                }
            }
        }

        .close-btn {
            margin-right: $space15;
            background: #dcdcdd;
            color: $subtitle-color;

            @media (hover:hover) {
                &:hover {
                    background: #d0d0d0;
                }
            }

        }
    }
}

@media screen and (min-width:768px) {
    .payment-box {
        .head {
            @include font-size(22px);
            line-height: 24px;
            margin-bottom: $space15;
        }

        .list-type {
            .list-item {
                display: block;
            }
        }

        .d-payment-list {
            display: block;
            border: $common-border;
            border-radius: 5px;
            padding: $space10;
            margin-bottom: $space10+1;

            .payment-table {
                border-collapse: collapse;
                width: 100%;

                .t-head {
                    font-family: $robotomedium;
                    color: $title-color;
                    background: $bg-light;
                    font-weight: normal;
                    text-align: left;
                    text-transform: uppercase;
                    vertical-align: top;

                    &:nth-of-type(1) {
                        border-radius: 5px 0 0 5px;
                    }

                    &:nth-last-of-type(1) {
                        border-radius: 0 5px 5px 0;
                    }
                }

                .t-head,
                .t-col {
                    @include font-size(15px);
                    line-height: 18px;
                    padding: $space10+1 $space20;
                }

                .t-col {
                    text-transform: capitalize;
                    color: $subtitle-color;
                }

                tr {
                    border-bottom: $common-border;

                    &:nth-last-of-type(1) {
                        border-bottom: none;

                        .t-col {
                            padding-bottom: 0;
                        }
                    }
                }

                .course-name {
                    width: 210px;
                    text-overflow: ellipsis;
                    overflow: hidden;
                    white-space: nowrap;
                }
            }
        }

        .m-payment-list {
            display: none;
        }

        .fees {
            flex-direction: row;
            align-items: center;

            .f-head {
                margin-right: $space40+4;
                margin-bottom: 0;
            }

            .pay-btn {
                @include font-size(16px);
            }
        }
    }

    .delete-popup {
        width: 50%;
    }
}

@media screen and (min-width:1024px) {
    .payment-box {
        margin-top: 0;

        .d-payment-list {
            padding: $space20;

            .payment-table {
                .course-name {
                    width: 300px;
                }
            }
        }
    }

    .delete-popup {
        width: 40%;

        .m-head {
            @include font-size(18px);
        }
    }
}

@media screen and (min-width:1366px) {
    .delete-popup {
        width: 30%;
    }
}