/* Turn the Alertify overlay into a flex container centered in the browser */
.ajs-modal.flex-alert {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: fixed !important; /* Forces overlay to span full viewport */
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
}

/* Let the dialog container shrinkwrap its content */
.ajs-modal.flex-alert .ajs-dialog {
    position: relative !important;   /* Overrides Alertify fixed/absolute position */
    top: auto !important;            /* Neutralize fixed positioning offsets */
    left: auto !important;           /* Neutralize left positioning offsets */
    transform: none !important;      /* Removes Alertify default transform translations */
    margin: 0 !important;            /* Remove default auto margins */
    
    width: auto !important;          /* Let content drive the width */
    max-width: 80vw !important;      /* Max width = 80% of browser window */
    min-width: 320px !important;     /* Prevents tiny alerts from looking crushed */
    
    /* Automatic height handling */
    height: auto !important;
    max-height: 85vh !important;     /* Max height = 85% of browser window height */
}

/* Ensure the inner body wraps and scrolls smoothly if text is extremely long */
.ajs-modal.flex-alert .ajs-body {
    height: auto !important;
    max-height: 60vh !important;
    overflow-y: auto !important;
}

.ajs-modal.flex-alert .ajs-content {
    white-space: normal !important;  /* Allows natural wrapping once max-width (80vw) is hit */
    word-break: break-word !important;
    width: max-content !important;   /* Forces dialog to expand horizontally to fit longest sentence */
    max-width: 100% !important;
}

/* Ensure input inside prompt takes full available dialog width */
.ajs-modal.flex-alert .ajs-input {
    width: 100% !important;
    box-sizing: border-box !important;
    margin-top: 10px !important;
}