#loading {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    xfont-size: 1.5em;
    display: none;
}    

.spinner-container {
    width: 100px; /* Adjust the size as needed */
    height: 100px; /* Adjust the size as needed */
    position: relative;
}

.spinner {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    animation: spin 2s linear infinite;
}

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

.onright {
    float: right
}

.bulk_add_container {

    background-color: rgb(221, 221, 221);
    border: 1px solid #ccc;
    margin-top: 30px;
    padding: 12px;
}

.scrollable-list {
    background-color:rgb(221,221,221);
    margin-top: 15px;
    max-width: 300px;
    overflow-y: auto;
}

.scrollable-list ul {
    list-style-type: none;
}

.xbox-body {
    margin-top: 10px;
}

.live-search-results {
    margin-bottom: 12px;
    position: absolute;
    xtop: 100%;
    xleft: 0;
    xz-index: 999;
    background-color: white;
    width: 75%;
    /* Adjust width as needed */
    max-height: 200px;
    /* Adjust max height as needed */
    overflow-y: auto;
}

.live-search-results ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

.live-search-results li {
    padding: 8px 16px;
    cursor: pointer;
}

.live-search-results li:hover {
    background-color: #f0f0f0;
}

.headerLike {
    padding:10px;
    font-size: 16px;
    font-weight: 800;
    background-color:rgb(135, 141, 197);
    color: rgb(255, 255, 255);
}

.blue-outline-box {
    margin-bottom: 15px;
}

.blue-outline-box h4 {
    padding:10px;
    margin:0px;
    letter-spacing: 1px;

    background-color: rgb(44, 53, 159);
    color: rgb(255, 255, 255);
}

.action-success {
    background-color: rgb(135, 141, 197);
    font-weight: bold;
    color: rgb(255, 255, 255);
    border: 1px solid #ccc;
    padding: 2px;        
}

.collapsible-content {
    display: none;
}    

.my-form-control{
    display: inline !important
}

#action-success-div {
    position: absolute;
    /* Position the div */
    background-color: rgb(135, 141, 197);
    font-weight: bold;
    color: rgb(255, 255, 255);
    border: 1px solid #ccc;
    /* Add border */
    padding: 2px;
    /* Add some padding */
    z-index: 999;
    /* Set z-index higher than other table elements */
}

.frs_tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black; /* If you want dots under the hoverable text */
}

.frs_tooltip .frs_tooltiptext {
width: 440px;
top: 100%;
left: 50%;
margin-left: -60px; /* Use half of the width (120/2 = 60), to center the tooltip */
}

/* Tooltip text */
.frs_tooltip .frs_tooltiptext {
visibility: hidden;
width: 440px;
background-color: black;
color: #fff;
text-align: center;
padding: 5px 0;
border-radius: 6px;

/* Position the tooltip text - see examples below! */
position: absolute;
z-index: 1;
}

/* Show the tooltip text when you mouse over the tooltip container */
.frs_tooltip:hover .frs_tooltiptext {
visibility: visible;
}    

.numeric {
text-align: right;
}

.nowrap {
white-space: nowrap;
}