/* plotly graph title */
@media (max-width: 768px) {
    .xtitle {
        font-size: 0.75rem !important;
    }
}

select {
    color: #000 !important;
}

option:not(:first-of-type) {
    color: #111827 !important;
}

.icon-filter:hover {
    color: #43B3E6;
}

/* Custom Scrollbars */
::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 1px rgba(0,0,0,0.3);
    border-radius: 10px;
    background-color: #F5F5F5;
}

::-webkit-scrollbar {
    height: 12px;
    width: 12px;
    background-color: #F5F5F5;
    border-radius: 10px;
}

::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 1px rgba(0,0,0,.3);
    background-color: #b4b4b4;
}

    /* Handle on hover */
    ::-webkit-scrollbar-thumb:hover {
        background: #757575;
    }


/* This will create a custom scrollbar for WebKit browsers (Chrome, Safari, etc.) */
.custom-scrollbar::-webkit-scrollbar {
    width: 8px; /* Width of the first scrollbar */
}

/* Style for the first scrollbar thumb */
.custom-scrollbar::-webkit-scrollbar-thumb {
    background-color: #b4b4b4;
}

/* This will create a custom scrollbar for WebKit browsers (Chrome, Safari, etc.) */
.table-x-scrollbar::-webkit-scrollbar {
    height: 8px; /* Width of the first scrollbar */
}

.table-x-scrollbar-lg::-webkit-scrollbar {
    height: 12px; /* Width of the first scrollbar */
}

.scroll-grabbable {
    cursor: grab; 
}

    .scroll-grabbable:active {
        cursor: grabbing;
    }


/* This will create a custom scrollbar for WebKit browsers (Chrome, Safari, etc.) */
.custom-x-scrollbar::-webkit-scrollbar {
    height: 4px; /* Width of the first scrollbar */
}

/* Style for the first scrollbar thumb */
.custom-x-scrollbar::-webkit-scrollbar-thumb {
    background-color: #b4b4b4;
}


/*map Popup*/
.popup-content {
    min-width: 10rem;
    max-height: 200px !important; /* Set the height of the popup */
    overflow-y: auto !important; /* Enable vertical scrolling */
    padding-right: 8px !important; /* Add padding for scrollbar */
}

.popup-item {
    margin-bottom: 8px !important;
}

    .popup-item:last-child {
        margin-bottom: 0 !important;
    }


.maplibregl-popup-content {
    padding: 15px !important;
}

.maplibregl-popup-close-button {
    right: 5px !important;
    top: 3px !important;
    font-size: 1.5rem;
}

.bg-white-imp {
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1)) !important;
}

.focus-selector:focus {
    --tw-ring-opacity: 1;
    --tw-ring-color: rgb(67 179 230 / var(--tw-ring-opacity, 1));
    --tw-border-opacity: 1;
    border-color: rgb(67 179 230 / var(--tw-border-opacity, 1)) !important;
}

/*.scrollable-data-table {
    cursor: grab !important;*/ /* Add a grabbing cursor for the draggable effect */
    /*-webkit-overflow-scrolling: touch !important;*/ /* For smooth scrolling on iOS */
    /*position: relative !important;*/ /* To ensure proper containment of scrolling events */
    /*box-shadow: -2px 0px 5px rgba(0, 0, 0, 0.1) inset;
}

    .scrollable-data-table:active {
        cursor: grabbing !important;*/ /* Change cursor when dragging */
        /*cursor: -webkit-grabbing !important;
    }*/



/*FLOWBITE DATATABLE CUSTOM*/

/* Adjust the table width to 100% for screens larger than 96rem */
@media (max-width: 96rem) {
    .scrollable-data-table {
        cursor: grab !important; /* Add a grabbing cursor for the draggable effect */
        -webkit-overflow-scrolling: touch !important; /* For smooth scrolling on iOS */
        position: relative !important; /* To ensure proper containment of scrolling events */
        box-shadow: -2px 0px 5px rgba(0, 0, 0, 0.1) inset;
    }

        .scrollable-data-table:active {
            cursor: grabbing !important; /* Change cursor when dragging */
            cursor: -webkit-grabbing !important;
        }
}


.scrollable-data-table-y {
    max-height: 48rem; /* Limit table height */
    overflow-y: auto; /* Enable vertical scrolling */
}

    /*.scrollable-data-table-y table {
        border-collapse: collapse;
        width: 100%;
    }*/

    .scrollable-data-table-y thead {
        position: sticky;
        top: 0;
        /*background-color: #f9fafb;*/ /* Match Flowbite table header background */
        /*z-index: 10;*/
    }

.datatable-wrapper .datatable-table thead {
    --tw-bg-opacity: 1;
    background-color: rgb(245 245 245 / var(--tw-bg-opacity, 1));
}



/* Fix width for datatable */
.datatable-table {
    table-layout: fixed !important;
    width: 76rem !important;
}

/* Adjust the table width to 100% for screens larger than 76rem */
@media (min-width: 96rem) {
    .datatable-table {
        width: 100% !important;
    }
}

.datatable-wrapper .datatable-container {
    user-select:text !important;
}

/* Ensure the canvas scales to the container */
/*canvas {
    width: 100% !important;
    height: 40rem !important;
}*/

/*Plotly Chart*/
.js-plotly-plot .plotly .modebar-group {
    display: flex !important;
}

.legendtoggle {
    cursor: default;
    pointer-events: none;
}


/* KENEX MAP LEGEND - GRANITE FRACTIONATION*/

/* The smooth gradient bar */
/*.legend-bar {
    height: 15px;
    background: linear-gradient(to right, #f1d6d8 0%, #FCCEE8 11%, #FDA5D5 22%, #FB64B6 33%, #F6339A 44%, #E60076 55%, #C6005C 66%, #A3004C 77%, #861043 88%, #510424 100% );
}*/

.legend-bar {
    height: 15px;
    background: linear-gradient(to left, #f1d6d8 0%, #FCCEE8 11%, #FDA5D5 22%, #FB64B6 33%, #F6339A 44%, #E60076 55%, #C6005C 66%, #A3004C 77%, #861043 88%, #510424 100% );
}

/* The three labels below, spaced out */
.legend-labels {
    display: flex;
    justify-content: space-between;
    margin-top: 4px;
}

    .legend-labels span {
        font-size: 11px;
        color: #333;
    }