@keyframes stretch {
    0% {
        transform: scale(0.1);
    }

    100% {
        transform: scale(2);
    }
}

.sparkle {
    position: fixed;
    animation: stretch .5s 1;
    height: 50px;
    width: 50px;
    z-index: 1000;
    border-radius: 100%;
    border: 1px solid red;
}

.oneline {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

div.customtrack canvas:hover {
    background-color: #bfdbfe;/*bg-blue-200*/
}
span.page_title {
    font-size: 1.6rem;
    font-family: 'Source Sans Pro';
    font-weight: 600;
}

span.page_sub_title {
    font-size: 1.2rem;
    font-family: 'Source Sans Pro';
    font-weight: 500;
}

/*
 *  STYLE 1
 */

::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgb(211,211,211);
    border-radius: 1rem;
    background-color: #D3D3D3;
}

::-webkit-scrollbar {
    width: 8px;
    height: 0.7rem;
    background-color: #E0E0E0;
    border-radius: 1rem;
}

::-webkit-scrollbar-thumb {
    border-radius: 0.5rem;
    -webkit-box-shadow: inset 0 0 6px rgb(192,192,192);
    background-color: #C0C0C0;
    cursor: pointer;
}
 ::-webkit-scrollbar-thumb:hover {
        background: #bdbbbb;
    }


/*for customising theme*/
:root {
    /*Menu style*/
    --left-nav-menu-fontcolor: white;
    --left-nav-menu-fontsize: 16px;
    --left-nav-menu-fontfamily: "Source Sans Pro";
    --menuitem-hover-bgcolor: white;
    --menuitem-hover-fontcolor: rgba(0,0,0,0.5);
    /**title style*/
    --title-fontcolor: black;
    --title-fontsize: 30px;
    --title-fontfamily: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    /**Table Header Style*/
    --tableheader-fontcolor: rgb(0,0,0);
    --tableheader-fontsize: 16px;
    --tableheader-fontfamily: "Source Sans Pro", sans-serif;
    --tableheader-bgcolor: white-lilac;
    /*Table content style*/
    --tablecontent-fontcolor: rgba(107, 114, 128);
    --tablecontent-fontsize: 16px;
    --tablecontent-fontfamily: "Source Sans Pro", sans-serif;
    --tablecontent-bgcolor: white-lilac;
    /*Table Background Color*/
    --tablecontainer-bgcolor: rgba(0,0,0,0);
    /*Icon Buttons Fonts*/
    --icon-size: 1.5rem;
    --icon-color: purple;
    --icon-hover-color: blue;
}

.sidebar-nav li {
    font-family: var(--left-nav-menu-fontfamily);
    font-size: var(--left-nav-menu-fontsize);
    color: var(--left-nav-menu-fontcolor);
}

    .sidebar-nav li :hover {
        background-color: var(--menuitem-hover-bgcolor);
        color: var(--menuitem-hover-fontcolor);
    }

/*Table*/
div.overflow-y-auto.rounded-xl.p-2.flex-1, .bear-tbcontainer {
    background-color: var(--tablecontainer-bgcolor);
}

/*Table Title*/
h3.flex.items-center.justify-between.text-2xl, .bear-tbtitle {
    font-family: var(--title-fontfamily);
    font-size: var(--title-fontsize);
    color: var(--title-fontcolor);
}

/*Table Header*/
div.overflow-y-auto.rounded-xl.p-2.flex-1 table thead th, .bear-tbheader {
    background-color: var(--tableheader-bgcolor);
    font-family: var(--tableheader-fontfamily);
    font-size: var(--tableheader-fontsize);
    color: var(--tableheader-fontcolor);
}

/*Table Content*/
div.overflow-y-auto.rounded-xl.p-2.flex-1 table tbody td, .bear-tbcontent {
    background-color: var(--tablecontent-bgcolor);
    font-family: var(--tablecontent-fontfamily);
    font-size: var(--tablecontent-fontsize);
    color: var(--tablecontent-fontcolor);
}
/*
td a svg {
    width: var(--icon-size) !important;
    height: var(--icon-size) !important;
}

td a svg:hover {
    stroke: var(--icon-hover-color) !important;
}
*/



table {
    font-family: Source Sans Pro, sans-serif;
    min-width: 100%;
}
thead {
    overflow: hidden;
    position: sticky; /* Make the header sticky */
    top: 0; /* Stick the header to the top */
    z-index: 0; /* Ensure the header is above other elements */
    background-color: #ffffff;
}

thead td, thead th {
    padding: 0.75rem 1.5rem;
    font-weight: 700;
    font-size: 0.875rem;
    line-height: 1.25rem;
}

tbody td {
    padding: 1rem 1.5rem;
}

td.firsttd {
    background-color: rgb(59, 130, 246) !important;
    color: white !important;
}
.scroll-container {
    overflow: auto;
    border-radius: 10px;
    border-top-right-radius: 0.75rem;
    border-bottom-right-radius: 0.75rem;
    max-height: calc(100vh - 10rem); /* Adjust based on your layout */
    transition: overflow 0.3s ease;
    scrollbar-width: thin; /* For Firefox */
  
}

.scroll-containerNavMenu {
    overflow: hidden;  /*Hide the scrollbar by default */
    border-radius: 10px;
    border-top-right-radius: 0.75rem;
    border-bottom-right-radius: 0.75rem;
    max-height: calc(100vh - 8rem);  /*Adjust based on your layout */
    transition: overflow 0.3s ease;
    scrollbar-width: thin;  /*For Firefox */
}
    .scroll-containerNavMenu:hover {
        overflow: auto;
        border-radius: 10px;
        border-top-right-radius: 0.75rem;
        border-bottom-right-radius: 0.75rem;
    }

/* Default for smallest mobile screens */
.menu-container {
    max-height: calc(100vh - 8rem); /* Adjust for mobile screens */
    overflow-y: auto;
}

@media (min-width: 768px) {
    .menu-container {
        max-height: calc(100vh - 38rem);
        overflow-y: auto;
    }
}

@media (min-width: 820px) {
    .menu-container {
        max-height: calc(100vh - 6rem);
        overflow-y: auto;
    }
}

@media (min-width: 1024px) {
    .menu-container {
        max-height: calc(100vh - 22rem);
        overflow-y: auto;
    }
}

@media (min-width: 1180px) {
    .menu-container {
        max-height: calc(100vh - 22rem);
        overflow-y: auto;
    }
}

@media (min-width: 1025px) {
    .menu-container {
        max-height: calc(100vh - 8rem); /* Larger screens */
        overflow-y: hidden; /* Hidden by default */
    }

        .menu-container:hover {
            overflow-y: auto; /* Show scrollbar on hover */
        }
}

/* Customize scrollbar width and thumb */
.menu-container::-webkit-scrollbar {
    width: 6px; /* Width of scrollbar */
}

.menu-container::-webkit-scrollbar-thumb {
    background-color: #888; /* Color of the scrollbar thumb */
    border-radius: 8px;
}

.menu-container::-webkit-scrollbar-thumb:hover {
        background-color: #555; /* Darker on hover */
    }



/* Default height for the container */
.tablet-height {
    height: 100%; /* Adjust this as needed for default behavior */
}

/* iPad Air Portrait (approx 768px width) */
@media screen and (max-width: 768px) {
    .tablet-height {
        height: 500px; /* Set the desired scroll height */
    }
}

/* iPad Air Landscape (approx 1024px width) */
@media screen and (max-width: 1024px) {
    .tablet-height {
        height: 600px; /* Adjust the height for landscape mode */
    }
}

@media (min-height: 768px) {
    .h-custom {
        height: 75vh;
    }
}
@media (max-height: 768px) {
    .h-custom {
        height: 85vh;
    }
}


.blocklyheight {
    width: 100%;
    height: 100%;
    max-height: calc(100vh - 4rem);
}

/* Tablet (1024px width) */
@media (max-width: 1024px) {
    .blocklyheight {
        max-height: calc(100vh - 3rem); /* Adjust as needed for tablet */
    }
}

/* Small devices (mobile) */
@media (max-width: 768px) {
    .blocklyheight {
        max-height: calc(100vh - 2rem); /* Adjust for mobile */
    }
}


/* Hide from users, visible to crawlers */
.seo-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    clip: rect(1px, 1px, 1px, 1px);
    white-space: nowrap !important;
}