.contentRefresh-loading {
    opacity: 0.5;
    position: relative;
}

.contentRefresh-loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 30px;
    height: 30px;
    border: 3px solid #f3f3f3;
    border-top: 3px solid #3498db;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

.fade:not(.show) {
    opacity: 99999 !important;
}

.daterangepicker.opensright {
    z-index: 99999 !important;
}

.click-to-copy {
    /* Adding a border to make it visually distinct */
    border-bottom: 1px dashed #666;

    /* Adding some padding for better visual appeal */
    padding: 1px;

    /* Making sure the text is centered */
    text-align: center;

    /* Setting a background color to differentiate it from regular text */
    /*background-color: #f5f5f5;*/

    /* Rounded corners for a smoother look */
    border-radius: 2px;

    /* Adding a transition for the hover effect */
    transition: background-color 0.3s, transform 0.3s;

    /* Setting a relative position to position the hover message accordingly */
    position: relative;
}

/* Changing the background color and giving a slight transform effect on hover */
.click-to-copy:hover {
    cursor: pointer; /* Changing the cursor to pointer on hover */
    background-color: #e0e0e0;
    transform: scale(1.02); /* Slight scaling effect to indicate it's clickable */
}

/* Add the hover message using ::after pseudo-element */
.click-to-copy:hover::after {
    font-size: 0.8em;
    position: absolute;
    top: 100%;  /* Positioning it right below the element */
    left: 50%;  /* Centering the text */
    transform: translateX(-50%);  /* Ensuring it's centered based on its own width */
    padding: 5px;
    background-color: #333;  /* Background color for the message */
    color: #fff;  /* Text color for the message */
    border-radius: 3px;
    margin-top: 5px;  /* Little space between the element and the message */
    white-space: nowrap;  /* Ensuring the text doesn't wrap and stays in one line */
}

@keyframes spin {
    0% { transform: translate(-50%, -50%) rotate(0deg); }
    100% { transform: translate(-50%, -50%) rotate(360deg); }
}

#left-modal {
    background: none !important;
    width: 20%;
}

#left-modal .modal-dialog {
    box-shadow: 1px 0 5px 0 #dfe4e6;
    bottom: 0;
    top: 0;
    max-height: 100% !important;
}
#left-modal .modal-dialog-scrollable .modal-content{
    max-height: 100% !important;
}

@media (min-width: 576px) {
    #left-modal .modal-dialog-scrollable {
        max-height: 100%;
    }

    #left-modal .modal-dialog-scrollable .modal-content {
        max-height: 100%;
    }
}