:root {
    --dialog_padding: 18px;
    --dialog_border_radius: 10px;
}

#blazor-error-ui {
    display: none;
}

    #blazor-error-ui .error-dialog-container {
        display: flex;
        justify-content: center;
        align-items: center;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.3);
    }

        #blazor-error-ui .error-dialog-container .error-dialog {
            background-color: white;
            border-radius: var(--dialog_border_radius);
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
            max-width: 400px;
            width: 80%;
            position: relative;
        }

            #blazor-error-ui .error-dialog-container .error-dialog .error-heading-div {
                width: 100%;
                background: rgba(136, 8, 8, 0.35);
                border-top-left-radius: var(--dialog_border_radius);
                border-top-right-radius: var(--dialog_border_radius);
            }

                #blazor-error-ui .error-dialog-container .error-dialog .error-heading-div .error-heading {
                    padding-left: var(--dialog_padding);
                    padding-right: var(--dialog_padding);
                    padding-top: var(--dialog_padding);
                    padding-bottom: 10px;
                    margin-top: 0;
                    margin-bottom: 0;
                    text-align: left;
                    width: 84%;
                    width: calc(100% - calc(var(--dialog_padding) * 3.4));
                    color: var(--font_colour_dark);
                }

            #blazor-error-ui .error-dialog-container .error-dialog .dismiss {
                right: calc(var(--dialog_padding) / 1.5);
                top: calc(var(--dialog_padding) / 1);
                position: absolute;
                user-select: none;
                cursor: pointer;
            }

                #blazor-error-ui .error-dialog-container .error-dialog .dismiss:hover {
                    color: rgba(31, 23, 23, 0.8)
                }

            #blazor-error-ui .error-dialog-container .error-dialog .error-body-div {
                /*padding-left: var(--dialog_padding);*/
                /*padding-right: var(--dialog_padding);*/
                border-bottom-left-radius: var(--dialog_border_radius);
                border-bottom-right-radius: var(--dialog_border_radius);
                font-size: 16px;
                margin-top: 0;
                margin-bottom: 0;
                text-align: left;
                background: rgba(136, 8, 8, 0.05);
                display: flex;
                align-items: center;
            }

                #blazor-error-ui .error-dialog-container .error-dialog .error-body-div .error-body-icon {
                    /*width: 25%;*/
                    display: inline-block;
                    text-align: center;
                    padding-left: var(--dialog_padding);
                }

                    #blazor-error-ui .error-dialog-container .error-dialog .error-body-div .error-body-icon .error-icon {
                        font-size: 75px;
                        color: rgba(136, 8, 8, 0.4);
                        vertical-align: middle;
                    }

                #blazor-error-ui .error-dialog-container .error-dialog .error-body-div .error-body-content {
                    /*width: 100%;*/
                    display: inline-block;
                    padding-left: var(--dialog_padding);
                    padding-right: var(--dialog_padding);
                    padding-top: var(--dialog_padding);
                    padding-bottom: var(--dialog_padding);
                }

                    #blazor-error-ui .error-dialog-container .error-dialog .error-body-div .error-body-content .error-body-text {
                    }

                        #blazor-error-ui .error-dialog-container .error-dialog .error-body-div .error-body-content .error-body-text .error-content {
                            margin: 0
                        }

                    #blazor-error-ui .error-dialog-container .error-dialog .error-body-div .error-body-content .error-refresh {
                        text-align: right;
                        padding-top: calc(var(--dialog_padding) / 2);
                    }


@media (max-width: 450px) {
    #blazor-error-ui .error-dialog-container .error-dialog .error-body-div .error-body-icon {
        display: none;
    }
}