app-sangh-members-admin-view {
    background: var(--ion-background-content);

    ion-header {
        ion-button {
            margin: var(--ion-margin-0) 15px var(--ion-margin-0) var(--ion-margin-0);
            height: auto;

            &::part(native) {
                --background: var(--ion-color-white);
                color: var(--ion-color-sangh);
                height: 27px;
            }
        }
    }

    ion-content {
        --background: var(--ion-background-content);
        --padding-start: var(--ion-padding-15);
        --padding-end: var(--ion-padding-15);

        ion-segment {
            padding: var(--ion-padding-10);
            background: var(--ion-color-white);
            border-radius: 8px 8px 0 0;
            margin-top: var(--ion-margin-15);
            box-shadow: 2px 2px 7px #ebebeb;

            ion-segment-button {
                min-height: 30px;
                --indicator-height: 0;
                background: #efefef;
                text-transform: capitalize;

                ion-label {
                    margin: var(--ion-margin-0);
                    font-size: var(--ion-font-size-14);
                    letter-spacing: 0;
                }

                &.segment-button-checked {
                    background: var(--ion-color-sangh);
                    border-radius: 5px !important;
                    color: #fff;

                    ion-label {
                        color: #fff;
                    }
                }

                &:first-child {
                    border-radius: 5px 0 0 5px;
                }

                &:last-child {
                    border-radius: 0 5px 5px 0;
                }
            }
        }

        .data {
            box-shadow: 2px 2px 7px #ebebeb;
            border-radius: 0 0 8px 8px;

            ion-card {
                margin: var(--ion-margin-0);
                margin-bottom: var(--ion-margin-15);
                box-shadow: none;
                border-radius: 0 0 8px 8px;

                ion-card-header {
                    padding: var(--ion-padding-0);

                    ion-card-title {
                        font-size: var(--ion-font-size-14);
                        display: flex;
                        justify-content: space-between;
                        align-items: center;
                        padding: var(--ion-padding-10);
                        border-bottom: 1px solid #efefef;
                        margin: var(--ion-margin-0);

                        &:last-child {
                            border-bottom: 0;
                        }

                        .left-data {
                            display: flex;
                            align-items: center;

                            .icons {
                                width: 50px;
                                height: 50px;
                                padding: 8px;
                                background: var(--ion-background-content);
                                border-radius: var(--ion-border-radius-100);
                                color: var(--ion-color);
                                margin-right: var(--ion-margin-10);
                                display: flex;
                                align-items: center;
                                justify-content: center;

                                &.family-members {
                                    padding: var(--ion-padding-0);
                                    border-radius: 100%;
                                    overflow: hidden;
                                }
                            }

                            p {
                                padding: var(--ion-padding-0);
                                margin: var(--ion-margin-0);
                                font-size: var(--ion-font-size-14);
                                color: #000;
                                font-weight: 600;

                                span {
                                    color: var(--ion-content-color);
                                    font-size: var(--ion-font-size-14);
                                    display: block;
                                }
                            }

                            .content {
                                width: calc(100% - 60px);
                            }
                        }

                        .right-icon {
                            display: flex;

                            .edit-icon {
                                border-width: 0px;
                                height: 30px;
                                width: 30px;
                                padding: 5px;
                                border-radius: 5px;
                                background: rgb(0 0 0 / 5%);
                                color: var(--ion-color-sangh);
                                display: flex;
                                align-items: center;
                                justify-content: center;

                                img {
                                    width: auto;
                                    height: 14px;
                                }
                            }
                        }
                    }
                }
            }
        }
    }

    .action-btn {
        border-width: 0px;
        height: 20px;
        width: 20px;
        padding: 5px;
        border-radius: 5px;

        &:first-child {
            color: #0BAB00;
            background: rgb(11 171 0 / 15%);
        }

        &:last-child {
            color: #EA0000;
            background: rgb(234 0 0 / 15%);
            margin-left: 10px;
        }
    }
}