app-vihar-modal {
    ion-header {
        background: var(--ion-background-content);
    }

    ion-content {
        .top-line {
            padding: var(--ion-padding-15);
            line-height: 0.375rem;

            ion-chip {
                width: 48%;
                padding: var(--ion-padding-0);
                margin: var(--ion-margin-0) 3% var(--ion-margin-0) var(--ion-margin-0);
                height: 0.25rem;
                background: var(--ion-background-gray);

                &:last-child {
                    margin: var(--ion-margin-0);
                }

                &.orange-color {
                    background: var(--ion-color-sant);
                }
            }
        }

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

            ion-item {
                margin: var(--ion-margin-0);
                padding: var(--ion-padding-10) var(--ion-padding-15);
                border-bottom: 1px solid #efefef;

                ion-avatar {
                    width: 50px;
                    height: 50px;
                    margin: var(--ion-margin-0);
                    position: relative;

                    img {
                        background: #e2f0ff;
                    }

                    .thana-icon {
                        position: absolute;
                        right: 0;
                        bottom: 0;
                        background: var(--ion-color-white);
                        padding: 0;
                        border-radius: var(--ion-border-radius-100);
                        color: var(--ion-color);
                        box-shadow: 0px 0px 2px #000;
                        width: 20px;
                        height: 20px;
                        overflow: hidden;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                    }
                }

                ion-checkbox {
                    margin: var(--ion-margin-0);
                    width: 21px;
                    height: 21px;

                    &::part(container) {
                        border-radius: 5px;
                        --border-width: 1px;
                        padding: 2px;
                        width: 21px;
                        height: 21px;
                    }

                    &.ion-color-primary {
                        --ion-color-base: var(--ion-color-sant) !important;
                    }
                }

                ion-label {
                    display: flex !important;
                    align-items: center;
                    margin: var(--ion-margin-0);

                    h3 {
                        margin: var(--ion-margin-0) !important;
                        font-weight: 600 !important;
                        white-space: normal;
                        width: calc(100% - 50px);

                        p {
                            font-weight: 400;
                            color: #999;
                            font-size: var(--ion-font-size-14) !important;
                            line-height: 13px !important;
                            padding: var(--ion-padding-0);
                        }
                    }

                    ion-icon {
                        font-size: 18px;
                    }
                }
            }
        }

        ion-radio-group {
            display: flex;

            ion-item {
                margin: var(--ion-margin-0);
                --min-height: inherit;

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

                ion-radio {
                    margin-right: var(--ion-margin-10);
                    --color-checked: var(--ion-color-sant) !important;

                    &::part(container) {
                        --border-width: 1px;
                        border-color: var(--ion-color-sant);
                    }

                    &.radio-checked {
                        --color-checked: var(--ion-color-sant) !important;
                    }
                }
            }
        }
    }

    h3 {
        color: var(--ion-color-sant);
        padding: var(--ion-padding-10) var(--ion-padding-15);
        margin: var(--ion-margin-0);
    }

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

        &.agreed-content {
            display: flex;

            ion-label {
                padding-left: var(--ion-padding-10);
                width: calc(100% - 28px);
            }

            ion-checkbox {
                &.checkbox-checked {
                    --checkbox-background-checked: var(--ion-color-sant);
                    --border-color-checked: var(--ion-color-sant);
                }
            }
        }
    }

    input[type="text"] {
        padding: var(--ion-padding-15) !important;
        font-size: var(--ion-font-size-14) !important;
        border: 1px solid var(--ion-content-color-sant);
        border-radius: 0.25rem;
        height: 2.813rem;
        width: 100%;
        background: transparent;
    }

    .start-end-date {
        display: flex;
    }

    ion-input[type=date],
    ion-input {
        padding: var(--ion-padding-0) !important;
        border-color: var(--ion-content-color-sant);
    }

    ion-text {
        border-color: var(--ion-content-color-sant) !important;
    }

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

        .back-button {
            width: 48%;
            margin: var(--ion-margin-0);

            &:first-child {
                margin-right: 4%;

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

.add-edit-vihar-alert {
    .alert-title {
        margin: 5px auto !important;
    }

    .alert-sub-title {
        color: initial;
    }

    .alert-head {
        padding: 5px !important;
    }
}

ion-modal {
    &.date-modal {
        --width: 290px;
        --height: auto;
        --border-radius: 8px;
    }

    ion-datetime {
        height: auto;
    }

    ionic-selectable-modal {
        ion-header {
            ion-toolbar {
                ion-buttons {
                    ion-button::part(native) {
                        --background: var(--ion-color-sant)
                    }
                }
            }
        }

        ion-title {
            color: var(--ion-color) !important;
        }

        .searchbar-input-container {
            .searchbar-input {
                border-radius: inherit;
            }

            .searchbar-clear-icon {
                color: var(--clear-button-color);
                margin-right: 0;
            }
        }

        ion-content {
            ion-list {
                padding-top: 10px;

                ion-item-group {
                    ion-item {

                        ion-icon {
                            &.ion-color-primary {
                                --ion-color-base: var(--ion-color-sant) !important;
                            }
                        }

                        ion-label {
                            margin: var(--ion-margin-0) var(--ion-margin-0) var(--ion-margin-0) var(--ion-margin-10);
                        }
                    }
                }
            }
        }
    }
}

.sangh-avatar {
    width: 36px;
    min-width: 36px;
    height: 36px;
}