.page-bg {
    background-image: url('../assets/media/images/2600x1200/bg-10.png');
}

.dark .page-bg {
    background-image: url('../assets/media/images/2600x1200/bg-10-dark.png');
}

.dt-container > :first-child {
    direction: ltr !important;
}

.dt-container > :last-child {
    direction: ltr !important;
}

.dt-column-header > :first-child {
    text-align: start;
}


.success-dialog.e-dialog {
    border-color: #22c55e;
}

.success-dialog .e-dlg-header {
    color: #22c55e;
}

.success-dialog .e-dlg-content {
    background-color: #f0fdf4;
}

.warning-dialog.e-dialog {
    border-color: #ffc107;
}

.warning-dialog .e-dlg-header {
    color: #ffc107;
}



.danger-dialog.e-dialog {
    border-color: #dc3545;
}

.danger-dialog .e-dlg-header {
    color: #dc3545;
}


.e-custom .e-frame {
    border-radius: 100%;
}

.e-checkicon.e-checkbox-wrapper .e-frame.e-check::before {
    content: '\e77d';
}

.e-checkicon.e-checkbox-wrapper .e-check {
    font-size: 8.5px;
}

.e-checkicon.e-checkbox-wrapper .e-frame.e-check {
    background-color: white;
    border-color: grey;
    color: grey;
}

.e-checkicon.e-checkbox-wrapper:hover .e-frame.e-check {
    background-color: white;
    border-color: grey;
    color: grey;
}

.e-checkicon.e-checkbox-wrapper .e-checkbox:focus + .e-frame.e-check {
    background-color: white;
    border-color: grey;
    box-shadow: none;
    color: grey;
}

.center-numeric.e-input-group.e-control-wrapper input.e-input,
.center-numeric .e-input {
    text-align: center !important;
}





#components-reconnect-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    z-index: 9999;
    justify-content: center;
    align-items: center;
}

    /* Hide all messages by default inside the modal */
    #components-reconnect-modal .msg-show,
    #components-reconnect-modal .msg-retrying,
    #components-reconnect-modal .msg-failed,
    #components-reconnect-modal .spinner {
        display: none;
    }

    /* Display the modal when any reconnect state is active */
    #components-reconnect-modal.components-reconnect-show,
    #components-reconnect-modal.components-reconnect-retrying,
    #components-reconnect-modal.components-reconnect-failed {
        display: flex;
    }

        /* Show the specific text matching Blazor's current state */
        #components-reconnect-modal.components-reconnect-show .msg-show {
            display: block;
        }

        #components-reconnect-modal.components-reconnect-retrying .msg-retrying {
            display: block;
        }

        #components-reconnect-modal.components-reconnect-retrying .spinner {
            display: block;
        }

        #components-reconnect-modal.components-reconnect-failed .msg-failed {
            display: block;
        }