ion-header {
    ion-title {
        >img {
            width: 130px;
            margin-left: 10px;
            position: relative;
            top: -4px;
        }
    }

    app-message-notification-badge {
        float: right;
    }

    ion-toolbar {
        --background: var(--ion-color-white);
        box-shadow: 1px 1px 1px var(--ion-shadow);
        border-radius: 0;
    }
}

ion-content {
    .header-search {
        padding: var(--ion-padding-10) var(--ion-padding-15);
        background: var(--ion-color-white);

        ion-item {
            width: 100%;
            --min-height: 30px;

            ion-input {
                height: 30px;
                border-color: var(--ion-color);
                margin-top: 2px;
            }
        }

        ion-icon {
            background: var(--ion-background-card);
            border: 1px solid var(--ion-search-icon);
            color: var(--ion-search-icon);
            height: 18px;
            width: 20px;
            padding: 5px;
            margin-left: 5px;
            border-radius: 5px;
        }
    }

    .bg {
        background: var(--ion-background-content);
        min-height: 90%;

        ion-segment {
            background: var(--ion-color-white);
            width: auto;
            box-shadow: 2px 2px 7px var(--ion-shadow);

            ion-segment-button {
                min-width: 33.33%;
                min-height: 40px;

                ion-label {
                    margin: 8px var(--ion-margin-0);
                    line-height: inherit;
                    font-size: var(--ion-font-size-14);
                }

                &.segment-button-checked {

                    &::part(indicator) {
                        --indicator-color: var(--ion-color-sant);
                    }

                    ion-label {
                        color: var(--ion-color-sant);
                    }
                }

                &:nth-child(2) {
                    &.segment-button-checked {
                        --indicator-color: var(--ion-color-sangh);
                        --ion-color-sant: var(--ion-color-sangh);
                    }
                }

                &:nth-child(3) {
                    &.segment-button-checked {
                        --indicator-color: var(--ion-color);
                        --ion-color-sant: var(--ion-color);
                    }
                }
            }
        }

        .bottom-bg-location {

            ion-card {

                .welcome-data {

                    p {
                        font-size: var(--ion-font-size-18);
                        color: var(--ion-color-dark-medium);
                        font-weight: 600;

                        span {
                            color: var(--ion-color);
                            display: inline;
                        }
                    }

                    span {
                        display: block;
                    }

                    ion-button {
                        height: 35px;

                        &::part(native) {
                            background-color: var(--ion-color);
                        }
                    }
                }
            }

            .sant {
                --ion-background-button: var(--ion-color-sant);
                --ion-color: var(--ion-color-sant);
                --ion-color-light-text: var(--ion-color-sant);
            }

            .sangh {
                --ion-background-button: var(--ion-background-content-sangh);
                --ion-color: var(--ion-color-sangh);
                --ion-color-light-text: var(--ion-color-sangh);
            }
        }
    }
}

.medical-card {
    background: var(--ion-color-white);
    box-shadow: 1px 1px 1px var(--ion-shadow);
    display: flex;
    align-items: center;
    margin: 16px 0;
    box-shadow: none;
    padding: 15px;
    font-weight: 600;
}

.medical-card-content {
    display: flex;
    align-items: center;
}

.medical-card-icon {
    margin-right: 16px;
}

.medical-card-icon img {
    width: 60px;
    height: 60px;
}

.medical-card-text h3 {
    margin: 0;
    font-size: 16px;
    color: #449353;
}

.medical-card-text p {
    margin: 4px 0 0 0;
    font-size: 12px;
    color: #333;
}

.medical-card-text a {
    color: #449353;
    text-decoration: underline;
}