app-sangh-role-select {
    background: var(--ion-background-content);

    ion-content {
        --background: var(--ion-background-content);

        ion-card {
            margin: var(--ion-margin-15);
            border-radius: 5px;

            ion-card-header {
                ion-card-title {
                    .left-data {
                        display: flex;
                        align-items: center;

                        .icons {
                            width: 35px;
                            height: 35px;
                            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;
                            position: relative;
                            border-radius: 100%;
                            overflow: hidden;

                            ion-icon {
                                position: absolute;
                                right: 0;
                                bottom: 0;
                                background: var(--ion-color-white);
                                padding: 3px;
                                border-radius: var(--ion-border-radius-100);
                                color: var(--ion-color);
                                box-shadow: 0px 0px 2px #000;
                            }
                        }

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

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

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

            ion-card-content {
                padding: var(--ion-padding-0) !important;

                ion-label {
                    border-top: 1px solid #e7e7e7;
                    padding: var(--ion-padding-10) var(--ion-padding-15) var(--ion-padding-0);
                    display: block;
                }

                ion-item {
                    margin-bottom: var(--ion-margin-15);
                    --min-height: 35px;

                    ion-input {
                        height: 35px;
                    }
                }
            }

            >ion-icon {
                position: absolute;
                top: 8px;
                right: 6px;
                font-size: 20px;
                z-index: 99;
            }
        }
    }

    ion-footer {
        padding: var(--ion-padding-0) var(--ion-padding-15);
        background: var(--ion-background-content);

        ion-button {
            margin: var(--ion-margin-0);
        }
    }
}