/* Modal Header */
/*.custom-messagebox .modal-header {
    background-color: #0d6efd;*/ /* Primary Blue */
/*color: white;
    border-bottom: none;
}*/

/* Title */
/*.custom-messagebox .modal-title {
    font-weight: bold;
    font-size: 18px;
}*/

/* Modal Body */
/*.custom-messagebox .modal-body {
    font-size: 16px;
    padding: 20px;
}*/

/* Buttons */
/*.custom-messagebox .btn-primary {
    background-color: #198754;*/ /* Green */
/*border: none;
}

.custom-messagebox .btn-secondary {
    background-color: #dc3545;*/ /* Red */
/*border: none;
}*/

/* Rounded modal */
/*.custom-messagebox .modal-content {
    border-radius: 10px;
}*/

/* Fade animation */
/*.custom-messagebox.fade .modal-dialog {
    transform: scale(0.9);
    transition: transform 0.3s ease-in-out;
}

.custom-messagebox.show .modal-dialog {
    transform: scale(1);
}

.info    { background-color: #0dcaf0; color: white; }
.success { background-color: #198754; color: white; }
.warning { background-color: #ffc107; color: black; }
.error   { background-color: #dc3545; color: white; }*/



.custom-messagebox .modal-content {
    border-radius: 8px;
    background-color: #ffffff;
    box-shadow: 0 10px 25px rgba(0,0,0,.15);
}

/* Header */
.custom-messagebox .modal-header {
    border-bottom: 1px solid #e5e5e5;
    padding: 12px 16px;
}

/* Header themes */
.msg-info {
    background-color: #f1f9ff;
    color: #0d6efd;
}

.msg-success {
    background-color: #f1fff7;
    color: #198754;
}

.msg-warning {
    background-color: #fff9e6;
    color: #856404;
}

.msg-error {
    background-color: #fff1f2;
    color: #dc3545;
}

/* Body */
.custom-messagebox .modal-body {
    font-size: 15px;
    color: #333;
}

/* Buttons */
.custom-messagebox .btn-primary {
    background-color: #0d6efd;
    border: none;
}

.custom-messagebox .btn-secondary {
    background-color: #6c757d;
    border: none;
}

#msgBody {
    word-break: break-word;
}

#msgIcon {
    flex-shrink: 0;
}

#msgProgressContainer {
    height: 6px;
    background-color: #e0e0e0; /* light gray background */
    border-radius: 10px;
    overflow: hidden; /* round the progress bar inside */
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.1);
}

#msgProgressBar {
    width: 0%;
    height: 100%;
    background: linear-gradient(90deg, #04869a, #00c4ff); /* gradient color */
    border-radius: 10px 0 0 10px; /* rounded left end */
    transition: width 0.3s ease, background 0.3s ease;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

.inline-message-box {
    position: absolute;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 3px 8px rgba(0,0,0,0.2);
    padding: 10px 15px;
    min-width: 200px;
    z-index: 9999;
    font-family: Arial, sans-serif;
}

#inlineMsgProgressContainer {
    height: 5px;
    background-color: #e0e0e0;
    border-radius: 5px;
    overflow: hidden;
}

#inlineMsgProgressBar {
    width: 0%;
    height: 100%;
    border-radius: 5px 0 0 5px;
    transition: width 0.3s ease, background 0.3s ease;
}