#spinner-div {
    position: fixed;
    display: none; /* Hide by default */
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    text-align: center;
    background-color: rgba(255, 255, 255, 0.8);
    z-index: 9999;
    display: flex; /* Use flexbox */
    justify-content: center; /* Center horizontally */
    align-items: center; /* Center vertically */
}

/* Modal Popup */
.message-modal.error .modal-header{background-color:#d2322d}
.message-modal.error .modal-header .fa::before{content:"\f12a"}
.message-modal.error .modal-body{color:#525B75}
.message-modal.warning .modal-header{background-color:#f0ad4e}
.message-modal.warning .modal-header .fa::before{content:"\f0f3"}
.message-modal.warning .modal-body{color:#525B75}
.message-modal.success .modal-header{background-color:#25b003}
.message-modal.success .modal-header .fa::before{content:"\f00c"}
.message-modal.success .modal-body{color:#525B75}
.message-modal.info .modal-header{background-color:#138496}
.message-modal.info .modal-header .fa::before{content:"\f129"}
.message-modal.info .modal-body{color:#525B75}
.message-modal.confirm .modal-header{background-color:#f0ad4e}
.message-modal.confirm .modal-header .fa::before{content:"\f0f3"}
.message-modal.confirm .modal-body{color:#525B75}

.required::after {
    content: "*" !important;
    color: red !important;
}

/* Display file/image modal popup */
.modal-body-center {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 450px; /* Ensure the modal body has a minimum height */
    height: 100%;
}

.file-popup {
    width: 100%;
    min-height: 450px;
    height: 100%;
}

.image-popup {
    max-width: 100%;
    max-height: 100%;
    height: auto;
    object-fit: contain;
}

/* Make the file-viewer-i div a flex container */
.file-viewer-i {
    cursor: pointer;
    position: relative;
    display: flex;                 /* Use flexbox for layout */
    justify-content: flex-start;   /* Align items to the start (left) */
    align-items: center;           /* Vertically center items */
}

/* Ensure file name and icon are grouped together */
.file-name-container {
    display: flex;                 /* Use flexbox for the file name and icon */
    align-items: center;           /* Vertically center file name and icon */
}

/* Adjust the icon in the ::before pseudo-element */
.file-viewer-i::before {
    content: '\e94b';              /* Your icon content */
    font-family: unicons-line;     /* Icon font */
    font-style: normal;
    font-weight: 400;
    display: inline-block;         /* Make it inline to align with text */
    margin-right: 5px;             /* Space between icon and text (adjust as needed) */
    vertical-align: middle;        /* Align the icon vertically with the text */
}

.file-details {
    display: block; /* Ensures the second span starts on a new line */
    font-size: 0.700em;
    padding-left: 1px;
}

/* Custom style for the delete button */
.fileupload-delete {
    padding: 0;               /* Remove padding to fit within the div */
    font-size: 1rem;          /* Optional: Adjust size */
    background: transparent;  /* Optional: Make button background transparent */
    border: none;             /* Optional: Remove border */
    color: black;          /* Optional: Change color to black */
    cursor: pointer;         /* Optional: Change cursor to pointer on hover */
    margin-left: auto;
}