/* Color Variables */
:root {
    --clr1: #7ba986;
    --clr2: #5e9190;
    --clr3: #48768a;
    --clr4: #617695;
    --clr5: #c78770;
}

/* Background Color Classes */
.bg-clr1 { background-color: var(--clr1) !important; }
.bg-clr2 { background-color: var(--clr2) !important; }
.bg-clr3 { background-color: var(--clr3) !important; }
.bg-clr4 { background-color: var(--clr4) !important; }
.bg-clr5 { background-color: var(--clr5) !important; }


/* Subtle Background Color Classes */
.bg-clr1-subtle { background-color: var(--clr1); opacity: 0.1 !important; }
.bg-clr2-subtle { background-color: var(--clr2); opacity: 0.1 !important; }
.bg-clr3-subtle { background-color: var(--clr3); opacity: 0.1 !important; }
.bg-clr4-subtle { background-color: var(--clr4); opacity: 0.1 !important; }
.bg-clr5-subtle { background-color: var(--clr5); opacity: 0.1 !important; }


/* Text Color Classes */
.text-clr1 { color: var(--clr1) !important; }
.text-clr2 { color: var(--clr2) !important; }
.text-clr3 { color: var(--clr3) !important; }
.text-clr4 { color: var(--clr4) !important; }
.text-clr5 { color: var(--clr5) !important; }

.overlay {
    display: none; /* Hidden by default */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7); /* Dark transparent background */
    z-index: 5000; /* High z-index to overlay other elements */
    display: flex;
    justify-content: center;
    align-items: center;
}

.spinner-container {
    text-align: center;
}

.speakers-section {
    margin-bottom: 1rem;
}

.speaker-badge {
    width: 40px;
    height: 40px;
    font-size: 16px;
}


.scrollable-content {
    height: 60vh; /* Default height for md and larger screens */
    overflow-y: auto;
}

@media (max-width: 767.98px) { /* Target xs and sm screens */
    .scrollable-content {
        height: auto; /* Change height to auto for xs and sm */
    }
}

.icon
{
    height: 64px;
}

.icon.folder
{
    
    fill:#ffad01;
}


.shared .icon.folder
{
    
    /*fill:#f68e6e;*/
    opacity: 0.6;
}

.icon.folderup
{
    stroke:#ccc;
}

.icon.file
{
    fill:#bee6fb;
}


/* Move tooltip down by 10px when positioned at the top */
.tooltip.bs-tooltip-top {
    margin-top: 40px; /* Adjust distance from the element */
}

/* Optionally, adjust the arrow position */
.tooltip.bs-tooltip-top .tooltip-arrow {
    margin-top: -40px; /* Move the arrow up to align with the tooltip */
}
.shared .icon.file
{
    /*fill:#98f1e7;*/
    opacity: 0.6;
}





.custom-tooltip {
  --bs-tooltip-bg: var(--bs-primary);
}

.icon.dataset
{
    
    fill:none;
    stroke: #bee6fb;
}


.ownership-star {
    position: absolute;
    width: 16px;
    height: 16px;
    top: 8px; /* Adjust positioning */
    left: 20px; /* Adjust positioning */
    pointer-events: none; /* Prevent interaction */
       background: url("data:image/svg+xml;charset=ISO-8859-1,%3Csvg xmlns='http://www.w3.org/2000/svg' height='16px' width='16px' viewBox='0 0 47.94 47.94'%3E%3Cpath style='fill:%23ED8A19;' d='M26.285,2.486l5.407,10.956c0.376,0.762,1.103,1.29,1.944,1.412l12.091,1.757 c2.118,0.308,2.963,2.91,1.431,4.403l-8.749,8.528c-0.608,0.593-0.886,1.448-0.742,2.285l2.065,12.042 c0.362,2.109-1.852,3.717-3.746,2.722l-10.814-5.685c-0.752-0.395-1.651-0.395-2.403,0l-10.814,5.685 c-1.894,0.996-4.108-0.613-3.746-2.722l2.065-12.042c0.144-0.837-0.134-1.692-0.742-2.285l-8.749-8.528 c-1.532-1.494-0.687-4.096,1.431-4.403l12.091-1.757c0.841-0.122,1.568-0.65,1.944-1.412l5.407-10.956 C22.602,0.567,25.338,0.567,26.285,2.486z'/%3E%3C/svg%3E") no-repeat center center;
    background-size: contain;
    z-index: 1;
}

.icon.delete
{
    height: 24px;
    stroke: #999;
}


.node
{
    flex: 0 0 auto;
    width: 12.5%; 
    padding-top: 20px;
}

.card-node
{
    padding: 0.5rem !important;
    position: relative;
    box-sizing: border-box;
    --bs-bg-opacity: 1;
    background-color: rgba(var(--bs-light-rgb),var(--bs-bg-opacity)) !important;
    border-radius: 15px;

}

.bs-tooltip-top .tooltip-arrow, 
.bs-tooltip-auto[data-popper-placement^=top] .tooltip-arrow,
.tooltip-inner
{
    margin-bottom: -10px;
}



.card-node:hover
{
    background-color: #e1e1e1;
}


.drag-over > .card-node {
    background-color: rgba(0, 123, 255, 0.1) !important; /* Light blue background */
}


.nodeText
{
    font-size: 14px;
}


.breadcrumb {
    --bs-breadcrumb-divider: '›'; /* Unicode for a right-pointing chevron */
}


.offcanvas {
    transition: transform 0.7s ease-in-out;
}


.offcanvas.custom-width {
        width: 90vw; /* Default for larger screens */
        height: calc(100vh - 40px);
        top:20px;
        border-top-right-radius: 20px;
        border-bottom-right-radius: 20px;
    }

@media (max-width: 992px) { /* Applies to tablets and below (Bootstrap md breakpoint) */
    .offcanvas.custom-width {
        width: 100vw;
        height: 100vh;
        top:0px;
    }
}

.btn-close
{
    --bs-btn-close-focus-shadow : none;
}

.input-group .btn.btn-light
{
    border: 1px solid var(--bs-border-color);
}


.font-xs
{
    font-size: 12px;
}


.table-container {
    max-height: calc(90vh - 300px); /* Set your desired height */
    height: calc(90vh - 300px); /* Set your desired height */
    overflow-y: auto; /* Enable vertical scrolling */
    border: 1px solid #efefef; /* Optional: Add a border around the table */
    padding:10px;
}

.scrollable-table {
    border-collapse: collapse;
    width: 100%;
}

.scrollable-table thead {
    position: sticky; /* Keep the header fixed */
    top: 0;
    z-index: 1;
    margin-top:-1px;
}

.scrollable-table tr 
{
    border-width:0px !important;
}

.scrollable-table thead th{
background: #efefef; /* Optional: Add background for the header */
}

.scrollable-table th,
.scrollable-table td {
    padding: 8px 12px;
    border: 1px solid #efefef; /* Optional: Add borders */
    border-top-width:0px;
    text-align: left;
}



div.dt-container .dt-length, div.dt-container .dt-search, div.dt-container .dt-info, div.dt-container .dt-processing, div.dt-container .dt-paging {
    font-size: 12px;
}


.swal2-modal-override {
    z-index: 1080 !important; /* Place it above Bootstrap modals and offcanvas */
}


.datasetsContainer
{

    max-height: 380px;
    height: 380px;
    overflow-y: auto;
    border-bottom: 2px dotted #efefef;
    border-top: 2px dotted #efefef;
    padding-top: 15px;
}


.transfer-ownership-link 
{
    font-size: 12px;
}


.dropzone {
    min-height: 150px;
    border: 2px dashed rgba(0,0,0,0.2);
    border-radius: 25px;
    padding: 20px 20px;
    max-width: 800px;
    width: 100%;
    height: 400px;
    min-width: 300px;
    z-index:2;
}


.uploadBackground
{
    position: absolute;
    top: 0px;
    width: 100%;
    height: 100%;
    left: 0px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 400px;

}