app-shravak-about {
    background: var(--ion-background-content);

    h3 {
        padding: var(--ion-padding-0) var(--ion-padding-15);
        margin: var(--ion-margin-0) var(--ion-margin-0) 0.25rem var(--ion-margin-0);
        font-weight: 700;
    }

    ion-button {
        margin: var(--ion-margin-0);
        --border-radius: 0.313rem;
    }

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

        p {
            font-size: var(--ion-font-size-14);
            padding: var(--ion-padding-0) var(--ion-padding-15);
            margin-top: var(--ion-margin-0);
            color: var(--ion-content-color);
        }

        h5 {
            color: var(--ion-color);
            font-weight: 600;

            span {
                float: right;
            }
        }

        ion-button {
            height: 30px;
            min-width: 49%;
            color: var(--ion-color);

            &::part(native) {
                --background: var(--ion-background-content);
                box-shadow: none;
            }
        }

        .bg {
            background: var(--ion-color-white);
            text-align: var(--ion-text-align-center);
            padding: var(--ion-padding-15);
            margin-bottom: var(--ion-margin-15);

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

        .bottom-bg-location {
            padding: var(--ion-padding-0) var(--ion-padding-15) var(--ion-padding-15);

            ion-card {
                margin: var(--ion-margin-0);
                padding: var(--ion-padding-10);
                margin-bottom: var(--ion-margin-15);
                box-shadow: none;
                border-radius: 8px;
                box-shadow: 2px 2px 7px #ebebeb;

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

                    .edit-icon {
                        width: 25px;
                        height: 25px;
                        padding: var(--ion-padding-0);
                        background: var(--ion-background-content);
                        border-radius: var(--ion-border-radius-100);
                        color: var(--ion-color);
                        display: flex;
                        align-items: center;
                        justify-content: center;

                        &.delete {
                            img {
                                width: 11px;
                            }
                        }
                    }

                    .delete-icon {
                        width: 25px;
                        height: 25px;
                        padding: var(--ion-padding-0);
                        background: var(--ion-background-content);
                        border-radius: var(--ion-border-radius-100);
                        color: var(--ion-color);
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        margin-left: 10px;

                        img {
                            width: 11px;
                        }
                    }

                    .work-edit-icon {
                        display: flex;
                        justify-content: flex-end;
                        position: absolute;
                        top: 0;
                        right: 0;
                        z-index: 9999;
                    }

                    ion-card-title {
                        font-size: var(--ion-font-size-14);
                        display: flex;
                        justify-content: space-between;
                        margin-top: var(--ion-margin-0);
                        align-items: center;
                        padding-top: 17px;

                        ion-icon {
                            width: 19px;
                            height: 19px;
                            padding: 10px;
                            background: var(--ion-background-content);
                            border-radius: var(--ion-border-radius-100);
                            color: var(--ion-color);
                            margin-right: var(--ion-margin-10);
                        }

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

                            .icons {
                                width: 39px;
                                height: 39px;
                                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;
                                overflow: hidden;

                                &.family-members {
                                    padding: var(--ion-padding-0);
                                }
                            }

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

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

                                &.points {
                                    font-size: var(--ion-font-size-12);
                                    color: var(--ion-content-color);
                                    display: flex;
                                    margin-top: 2px;

                                    ion-icon {
                                        background: none;
                                        width: 12px;
                                        height: 12px;
                                        margin: var(--ion-margin-0) 2px var(--ion-margin-0) var(--ion-margin-0);
                                        padding: var(--ion-padding-0);
                                        color: var(--ion-content-color);
                                    }
                                }
                            }

                            &.qualification {
                                align-items: flex-start;

                                .mid-content {
                                    margin: var(--ion-margin-10) var(--ion-margin-0);
                                }
                            }

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

                        .edit-icon {
                            width: 25px;
                            height: 25px;
                            padding: var(--ion-padding-0);
                            background: var(--ion-background-content);
                            border-radius: var(--ion-border-radius-100);
                            color: var(--ion-color);
                            display: flex;
                            align-items: center;
                            justify-content: center;
                        }

                        .icon-child {
                            display: flex;
                        }
                    }
                }

                .qualification-btn {
                    display: flex;
                    justify-content: space-between;
                }
            }
        }
    }

    ion-footer {
        height: 50px;
        height: calc(env(safe-area-inset-bottom) + 60px);

        ion-tab-bar {

            &.ios {
                padding: 0;
                padding-bottom: calc(env(safe-area-inset-bottom) + 10px);
            }
        }
    }
}

ion-alert {
    .alert-head {
        padding: var(--ion-padding-15) !important;
    }

    .alert-message {
        padding: var(--ion-padding-0) var(--ion-padding-15) !important;
    }

    .alert-button-group {
        padding: var(--ion-padding-0);
    }
}