/* Style the spinner */
.spinner {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.8); /* semi-transparent white background */
    z-index: 9999; /* ensure spinner is above other content */
    display: none; /* hide by default */
}

/* Style for spinner animation (e.g., using CSS animation or image) */
.spinner::after {
    content: '';
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 40px;
    height: 40px;
    margin: -20px;
    border: 4px solid #ddd; /* spinner color */
    border-radius: 50%;
    border-top-color: #333; /* spinner color */
    animation: spin 1s linear infinite; /* example of CSS animation */
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

 .custom-file-label {
     overflow: hidden;
     white-space: nowrap;
     text-overflow: ellipsis;
     max-width: calc(100% - 30px); /* Adjust the max-width value as needed */
 }

.ql-tooltip input[type="text"] {
    display: none;
}

.gprev,
.gnext {
    display: none !important;
}

.custom-modal-dialog {
    max-width: 70%;
    max-height: 90%
}

.hidden {
    display: none;
}

/* Style for the spinner modal */
#modal-loadings {
    display: none; /* Hide the modal by default */
}

/*  invitations  CSS for responsive design */
@media (max-width: 768px) {
    .table-responsive {
        overflow-x: auto;
    }

    .table-dark-gray td, .table-dark-gray th {
        white-space: nowrap;
    }

    th, td {
        padding: 0.5rem;
        font-size: 0.875rem; /* Smaller font size for mobile */
    }


    .role-radio + label {
        display: block;
    }
}

.form-check-inline {
    display: flex;
    align-items: center;
}

.form-check-label {
    margin-left: 0.25rem;
    margin-right: 0.75rem;
}

.ms-auto {
    margin-left: auto;
}

#modal-loading {
    display: none; /* Hide the modal by default */
}

.single-line {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.single-line h2,
.single-line h5 {
    display: inline;
    margin: 0;
}

 .responsive-title {
     max-width: 100%;       /* Prevents the title from exceeding the width */
     word-wrap: break-word;  /* Breaks long words to prevent overflow */
     font-size: 24px;        /* Adjust font size for smaller screens */
 }

.dashboard-title {
    margin-top: 66px; /* Desktop-specific margin */
    margin-left: 262px; /* Desktop alignment */
}

.title-banner {
    height: 200px; /* Large screen height */
    max-width: 100%; /* Full width */
}

#submit-button {
    margin-top:.5%
}
#import-buttons {
    margin-top: .5%;
}

@media (max-width: 768px) {
    .responsive-title {
        font-size: 20px;      /* Smaller font size on mobile */
    }

    .dashboard-title {
        margin-top: 20px; /* New margin for mobile */
        margin-left: 0; /* Remove left margin for mobile */
        text-align: center; /* Center the text for mobile */
    }

    .title-banner {
        padding: 20px;
        height: 100px;/* Add padding to avoid overlap in smaller screens */
        max-width: 100%;
    }
    #submit-button{
        margin-top: 5%;
    }
    #import-buttons{
        margin-top: 5%;
    }
    .avatar-img-moved{
        margin-left: 100%;
    }
}
.long-text {
    display: flex; /* Ensure inline and block elements align properly */
    align-items: center; /* Vertically center the icon */
    line-height: 1.2; /* Adjust line spacing if needed */
}