/* Define some colors */
        .color1 {
            background-color: #ffcccb7a;
        }

        .color2 {
            background-color: #ffebcd7a;
        }

        .color3 {
            background-color: #d1e7dd7c;
        }

        .color4 {
            background-color: #c2e0f97e;
        }

        .color5 {
            background-color: #f3f9c27e;
        }

        .color6 {
            background-color: #f4c2f97e;
        }

        /* Add more colors as needed */

        body {
            font-family: Verdana, Geneva, Tahoma, sans-serif
        }

        table {
            border-collapse: collapse;
            border: 2px solid #7f8fa5;
            /* Set the border color and thickness */
            top: 180px;
            /* width: 100vw; */
            position: relative;
            /* touch-action: manipulation; */
            /* width: auto; */
            /* z-index: 1; */
            overflow: auto;
            /* Enable scrolling for the table */
            /* table-layout: fixed; Ensure consistent column widths */
            margin-bottom: 500px;
        }

        #spreadsheet th,
        td {
            border: 1px solid #7f8fa5;
            /* Apply the border color to table cells (th and td) */
            padding: 8px;
            /* Add some padding for better spacing */
            width: 80px;
            height: 20px;
            border-collapse: collapse;

        }

        html {
            scroll-behavior: smooth;
        }

        #spreadsheet {
            transition: width 0.05s ease-out;
            /* touch-action: none; */
            transform-origin: 0 0;
            /* disables built-in panning */
        }

        .selected {
            background-color: #4b9154de;
        }

        .highlighted {
            background-color: rgb(175, 175, 133);
        }

        /* CSS to style the fixed header and tabs */
        .fixed-header {
            position: sticky;
            top: 175px;
            left: 0px;
            right: 0px;
            /* width: 100vw; */
            /* left: 10px; */
            background-color: #ffffff;
            /* Background color for the fixed header */
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
            /* Add a shadow for a raised effect */
            z-index: 2;
        }

        .sticky-column {
            position: sticky;
            left: 0;
            background-color: #ffffff;
            /* Background color for the sticky column */
            box-shadow: 2px 0 4px rgba(0, 0, 0, 0.1);
            /* Add a shadow for a raised effect */
            z-index: 1;
            /* Ensure the z-index is set for the sticky column */
        }

        .popup {
            display: none;
            position: absolute;
            background-color: #f9f9f9;
            border: 1px solid #ccc;
            padding: 10px;
            flex: 1;
            width: 300px;
            z-index: 3;
        }

        .quickrange {
            display: none;
            position: absolute;
            background-color: #f9f9f9;
            border: 1px solid #ccc;
            padding: 10px;
            flex: 1;
            flex-direction: column;
            /* Stack items vertically */
            width: 150px;
            z-index: 3;
        }

        .quickrange input {
            width: 100%;
            /* Makes inputs fit inside the div */
            height: 20px;
            box-sizing: border-box;
            /* Ensures padding/border don’t make inputs larger */
            max-width: 100%;
            /* Prevents overflow */
        }


        #enlargeButton {
            position: absolute;
            top: 0px;
            right: 0px;
            cursor: pointer;
        }

        .popup.enlarged {
            width: 90vw !important;
            height: 90vh !important;
        }




        /* Hide scrollbar for WebKit browsers (Chrome, Safari) */
        /* .slideDiv::-webkit-scrollbar {
            display: none;
        } */

        /***************************************[ BUTTONS AND TABS ]************************************************/

        /* Fixed background bar */
        .back {
            position: fixed;
            top: 0;
            left: 0;
            width: 100vw;
            background: var(--bs-background);
            box-shadow: var(--shadow-subtle);
            z-index: 10;
            border-bottom: 1px solid var(--bs-light-accent);
        }

        /* Buttons container (top row) */
        .buttons-container {
            display: flex;
            align-items: center;
            gap: 6px;
            padding: 0.6rem 1rem;
            background: var(--bs-background);
            border-bottom: 1px solid var(--bs-light-accent);
            z-index: 5;
        }

        /* Buttons */
        button {
            padding: 0.45rem 0.9rem;
            font-size: 0.9rem;
            font-weight: 500;
            color: var(--bs-alternative);
            background: var(--bs-primary);
            border: none;
            border-radius: var(--radius-sm);
            cursor: pointer;
            transition: var(--transition-fast);
            box-shadow: var(--shadow-subtle);
            /* text-transform: uppercase; */
            letter-spacing: 0.02em;
        }

        button:hover {
            background: var(--bs-secondary);
            color: var(--bs-alternative);
        }

        button:active {
            background: var(--bs-dark-accent);
            color: var(--bs-alternative);
        }

        button.popupBtn {
            padding: 0.35rem 0.75rem;
            font-size: 0.85rem;
        }

        /* Horizontal tab bar */
        .fixed-tabs {
            display: flex;
            align-items: center;
            gap: 0.4rem;
            padding: 0.5rem 1rem;
            background: var(--bs-background);
            overflow-x: auto;
            scrollbar-width: thin;
            scrollbar-color: var(--bs-primary) transparent;
        }

        /* Optional subtle scrollbar for Chrome */
        .fixed-tabs::-webkit-scrollbar {
            height: 5px;
        }

        .fixed-tabs::-webkit-scrollbar-thumb {
            background: var(--bs-primary);
            border-radius: var(--radius-sm);
        }

        /* Tabs */
        .fixed-tabs div {
            flex-shrink: 0;
            padding: 0.45rem 0.9rem;
            background: var(--bs-background-accent);
            color: var(--bs-foreground);
            border: 1px solid var(--bs-light-accent);
            border-radius: var(--radius-sm);
            font-size: 0.9rem;
            font-weight: 500;
            cursor: pointer;
            transition: var(--transition-fast);
        }

        .fixed-tabs div:hover {
            background: var(--bs-break);
            color: var(--bs-dark);
            border-color: var(--bs-break);
        }

        .fixed-tabs div:active {
            background: var(--bs-secondary);
            color: var(--bs-alternative);
        }

        .tab.active_tab {
            background: var(--bs-primary);
            color: var(--bs-alternative);
            border-color: var(--bs-primary);
        }

        /* TAB SCROLLER */
        .slideDiv {
            transform: rotateX(180deg);
            overflow-x: auto;
            overflow-y: hidden;
            white-space: nowrap;
            background-color: var(--bs-background);
            position: relative;
        }

        /* CUSTOM TOP SCROLLBAR */
        .slideDiv::-webkit-scrollbar {
            height: 6px;
        }

        .slideDiv::-webkit-scrollbar-track {
            background: var(--bs-background-accent);
        }

        .slideDiv::-webkit-scrollbar-thumb {
            background: var(--bs-primary);
            border-radius: 3px;
        }

        .slideDiv::-webkit-scrollbar-thumb:hover {
            background: var(--bs-secondary);
        }

        .slideDiv::-webkit-scrollbar-button {
            display: none;
            /* remove arrows */
        }

        /* FIXED TABS
  .fixed-tabs div {
            flex-shrink: 0;
            padding: 0.45rem 0.9rem;
            background: var(--bs-background-accent);
            color: var(--bs-foreground);
            border: 1px solid var(--bs-light-accent);
            border-radius: var(--radius-sm);
            font-size: 0.9rem;
            font-weight: 500;
            cursor: pointer;
            transition: var(--transition-fast);
        } */

        /* .wrapper1{width: 300px; border: none 0px RED;
overflow-x: scroll; overflow-y:hidden;}
.wrapper1{height: 20px; }
.div1 {width:100%; height: 20px; } */

        /* INDIVIDUAL TAB */
        .fixed-tabs .tab {
            transform: rotateX(180deg);
            /* margin: 0 8px; */
            padding: 0.45rem 0.9rem;
            background-color: var(--bs-light-accent);
            color: var(--bs-foreground);
            font-weight: 500;
            cursor: pointer;
            border: 1px solid var(--bs-light-accent);
            border-radius: var(--radius-sm);
            transition: var(--transition-fast);
            position: relative;
        }

        /* Hover & Active Styles */
        .fixed-tabs .tab:hover {
            background-color: var(--bs-primary);
            color: #fff;
        }

        .fixed-tabs .tab.active_tab {
            background-color: var(--bs-background);
            color: var(--bs-primary);
            font-weight: 600;
        }

        /* UNDERLINE FOR ACTIVE TAB */
        /* .fixed-tabs::after {
            content: "";
            position: absolute;
            left: 0;
            right: 0;
            bottom: 0;
            height: 3px;
            background: var(--bs-primary);
            opacity: 0.3;
        } */

        .fixed-tabs .tab.active_tab::after {
            content: "";
            position: absolute;
            left: 0;
            right: 0;
            bottom: -3px;
            height: 3px;
            background-color: var(--bs-primary);
            border-radius: 2px;
            box-shadow: 0 1px 4px rgba(178, 86, 13, 0.4);
        }


        /***************************************[ BUTTONS AND TABS END ]************************************************/

        /* DROPDOWN WRAPPER */
        .dropdown {
            position: relative;
            display: inline-block;
        }

        /* HAMBURGER BUTTON */
        .dropdown-toggle {
            background-color: var(--bs-primary);
            color: var(--bs-alternative);
            border: none;
            border-radius: 4px;
            padding: 7px 12px;
            font-size: 1.2rem;
            cursor: pointer;
            transition: background-color 0.3s ease;
        }

        .dropdown-toggle:hover {
            background-color: var(--bs-secondary);
        }

        /* DROPDOWN MENU */
        .dropdown-menu {
            display: none;
            position: absolute;
            right: 0;
            top: 110%;
            background-color: var(--bs-background);
            border: 1px solid var(--bs-light-accent);
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
            border-radius: 4px;
            z-index: 20;
            padding: 6px;
            min-width: 160px;
        }

        /* BUTTONS INSIDE MENU */
        .dropdown-menu button {
            display: block;
            width: 100%;
            text-align: left;
            background-color: var(--bs-light-accent);
            color: var(--bs-foreground);
            border: none;
            border-radius: 3px;
            padding: 8px 10px;
            margin: 3px 0;
            cursor: pointer;
            transition: background-color 0.2s ease;
        }

        .dropdown-menu button:hover {
            background-color: var(--bs-primary);
            color: #fff;
        }

        /* SHOW MENU */
        .dropdown-menu.show {
            display: block;
        }

        /* Default style for the button */
        #mobileButton {
            display: none;
            /* Hide the button by default */
        }

        .copyDiv {
            top: 50px;
            position: fixed;
            /* scroll-snap-type: y mandatory; */
            /* overflow: auto; */
            /* max-width: 90vw; */
            /* max-height: 90vh; */
            /* -webkit-overflow-scrolling: auto; */
            overflow-x: scroll;
            /* Enable horizontal scrolling */
            overflow-y: scroll;
            /* Enable horizontal scrolling */
            z-index: 1;
        }



        .no-select {
            -webkit-user-select: none;
            user-select: none;
        }

        /* .buttons-container {
            position: sticky;
            width: fit-content;
            top: 0px;
            /* Adjust the top position to leave space for the fixed header */
        /* background-color: #ffffff; */
        /* Background color for the fixed tabs */
        /* box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); */
        /* Add a shadow for a raised effect */
        /* } */

        #downloadContainer {
            margin: 2.5px;
            display: inline-block;
        }

        #fileExtension {
            width: 100px;
        }

        #downloadContainer select,
        #downloadContainer button {
            padding: 10px 20px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            transition: background-color 0.3s ease;
        }

        #downloadContainer select {
            margin-right: 2px;
            cursor: auto;
        }





        /* border: 1px solid #ccc;
            padding: 5px 10px;
            display: inline-block;
            cursor: pointer;
            background-color: #f2f2f2;
            /* margin-right: 5px; */
        /* margin-left: 5px;
            transition: background-color 0.3s ease;
        } */

        #insertBtn.active {
            background-color: #7ea380 !important;
            box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2) !important;
        }


        .plus-button {
            border: 1px solid #ccc;
            padding: 2px 20px;
            background-color: #7f8d82;
            cursor: pointer;
            font-size: 20px;
            margin-left: 5px;
            display: inline-block;
        }

        .tabline {
            top: 10px;
            left: 0;
            right: 0;
            /* width: 100vw; */
            /* border-bottom: 2px solid #637a94; */
            border-bottom: 2px solid var(--bs-primary);
            /* Change the color to your preference */
        }





        .spaceline {
            position: sticky;
            top: 10px;
            left: 0;
            right: 0;
            width: 100%;
            height: 10px;
            bottom: 25px;
            /* width: 100%; */
            /* border-bottom: 2px solid #637a94; */
            /* Change the color to your preference */
        }

        .popup {
            padding: 10px;
            border: 1px solid #ccc;
        }

        .textarea-container {
            display: flex;

            line-height: 1em;
            /* height: 700px; */
        }

        #textarea-end-container {
            display: flex;
            /* display: none; */
            height: 700px;
            overflow: hidden;
        }

        .line-numbers {

            padding-right: 10px;
            text-align: right;
            color: #999;
        }

        .invisible-item {
            width: 6000px;
            /* This makes the page scrollable to the right */
            height: 1px;
            /* Make it small in height to keep it hidden */
            visibility: hidden;
            /* Invisible but takes up space */
        }

        textarea {
            width: 100%;
            /* flex: 1; */
            font-family: monospace;
            resize: none;
            border: none;
        }

        #scrollContainer {
            /* flex: 1; */
            display: flex;
            width: 25px;
            height: 100%;
            overflow-y: hidden;
            /* height: 600px; */
            /* display: none; */
            /* position: absolute; */
        }

        #popup_scrollbar {
            /* display: flex; */
            width: 10px;
            height: 100%;
            /* height: 600px; */
            background-color: #ccc;
            /* flex: 1; */
            position: absolute;
            top: 0;
            bottom: 0;
            right: 0;
            /* display: none; */
        }

        #popup_content {
            /* display: flex; */
            /* flex: 1; */
            /* resize: none; */
            /* overflow-y: auto; */
            /* left: 0; */
            /* display: none; */
            height: 100%;
        }

        .n_input {
            color: rgb(0, 0, 0);
            caret-color: black;
            /* Set the caret color to black */
            /* Set the font color to white */
            font-family: "Palatino Linotype", serif;
            font-size: 16px;
            line-height: 1.5;
            padding: 5px;
            margin-left: 5px;
            flex-wrap: wrap;
            /* display: flex; */
            /* z-index: 5; */
            background-color: #ffffff;
            box-sizing: border-box;
        }

        .input_container {
            position: absolute;
            width: auto;
            display: flex;
            /* color: rgb(0, 0, 0); */
            /* caret-color: black; Set the caret color to black */
            /* Set the font color to white */
            /* font-family: "Palatino Linotype", serif; */
            /* font-size: 16px; */
            /* line-height: 1.5; */
            /* z-index: 5; */
            /* background-color: #ffffff; */
        }



        .overlay-text {
            position: absolute;
            color: rgba(255, 255, 255, 0.062);
            top: 0px;
            left: 5px;
            padding: 0px;
            pointer-events: none;
            font-size: 16px;
            line-height: 4.5;
            /* z-index: 2; */
            /* background-color: rgba(255, 0, 0, 0.5); */
            /* Allows clicks to go through the overlay to the input field */
        }

        .line-number {
            width: 40px;
            overflow: hidden;
            resize: none;
            border: none;
            background-color: #f0f0f0;
            padding: 4px;
            box-sizing: border-box;
            line-height: 1em;
            text-align: center;
            color: #666;
            font-family: monospace;
            /* height: 100%; */
            /* font-size: 14px; */
        }

        #extrax {
            flex: 1;
            border: 1px solid #ccc;
            /* padding: 4px; */
            line-height: 1em;
            color: #000000;
            overflow: hidden;
            /* Hide scrollbar */
            /* font-family: 'Courier New', Courier, monospace; */
        }

        #extrax_end {
            flex: 1;
            border: 1px solid #ccc;
            /* padding: 4px; */
            overflow: hidden;
            /* Hide scrollbar */
            line-height: 1em;
            color: #000000;
            /* font-family: 'Courier New', Courier, monospace; */
        }

        #reset_line_button {
            display: none;
        }

        /* Styles for the play button */
        .play-button {
            background-color: #4CAF50;
            border: none;
            color: white;
            /* padding: 15px 32px; */
            text-align: center;
            text-decoration: none;
            display: inline-block;
            font-size: 20px;
            height: 40px;
            margin: 4px 2px;
            cursor: pointer;
            border-radius: 4px;
            margin-left: 5px;
        }

        #varNumber {
            display: flex;
            justify-content: center;
        }

        /* Styles for the input field */
        .number-input {
            padding: 4px;
            font-size: 16px;
            border: 1px solid #ccc;
            border-radius: 4px;
            margin-left: 10px;
            margin-bottom: 2px;
        }

        .center-btn {
            position: relative;
            /* top: 50%; */
            left: 50%;
            transform: translate(-50%, -50%);
            margin-top: 20px;
            /* Adjust the margin to create space between the div and the button */
        }

        /* Styles for the loading animation */
        .loading-container {
            display: none;
            /* Initially hidden */
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(255, 255, 255, 0.7);
            z-index: 10;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .loading-spinner {
            border: 5px solid #f3f3f3;
            border-top: 5px solid #3498db;
            border-radius: 50%;
            width: 50px;
            height: 50px;
            animation: spin 1s linear infinite;
        }

        .overlay-plot {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100vw;
            /* min-height: 800px; */
            height: 100vh;
            background-color: rgba(0, 0, 0, 0.7);
            justify-content: center;
            align-items: center;
            z-index: 10;
        }

        .overlay-plot-content {
            background-color: #fff;
            padding: 20px;
            border: 10px solid #333;
            box-sizing: border-box;
            /* top: 700px; */
            width: 95%;
            height: 95%;
            overflow-y: auto;
            /* max-width: 2000px; */
            /* min-height: 1000px; */
            /* position: relative; */
        }

        .offcanvas {
            background-color: #f9f9f9;
            border-left: 3px solid var(--bs-primary);
        }

        .list-group-item {
            border: none;
            border-bottom: 1px solid #ddd;
        }

        .variable-display-panel {
            position: fixed;
            top: 0;
            right: -100%;
            width: calc(100% - 350px);
            height: 100%;
            background-color: var(--bs-background);
            transition: right 0.4s ease;
            z-index: 1056;
            display: flex;
            flex-direction: column;
            overflow-x: auto;
        }

        .variable-display-panel.visible {
            right: 350px;
        }

        .variable-column textarea {
            resize: vertical;
            font-family: monospace;
            font-size: 0.9rem;
        }

        .resize-div {
            width: 98%;
        }

        .close-btn {
            position: absolute;
            top: 5%;
            left: 95%;
            cursor: pointer;
            /* color: #333; */
            float: left;
            font-size: 28px;
            z-index: 30;
        }

        /* .close-btn:hover {
            color: #ffffff;
        } */

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

            100% {
                transform: rotate(360deg);
            }
        }

        .upload-popup {
            display: none;
            position: fixed;
            top: 100px;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
            z-index: 15;
        }

        .upload-popup-content {
            background-color: #fefefe;
            margin: 20% auto;
            padding: 20px;
            width: 80%;
            max-width: 400px;
            border-radius: 8px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }

        .upload-close {
            float: right;
            cursor: pointer;
            font-size: 24px;
        }



        /* Media query to show the button for mobile devices */
        @media (max-width: 1068px) {

            .slideDiv::-webkit-scrollbar {
                height: 8px;
            }

            .close-btn {

                left: 90%;


                font-size: 36px;

            }

            #mobileButton {
                display: inline-block;

            }

            body {
                font-size: 18px;
                /* Adjust this value based on your preferences */
            }

            button {
                font-size: 1.5em;
            }

            /* textarea {
                font-size: 1em;
            } */

            .slideDiv {
                position: sticky;
                /* width: 100vw; */
                top: 220px;
                /* max-width: 100px; */

                overflow: auto;
                /* scrollbar-width: none; */
                /* Firefox */
                -ms-overflow-style: none;
                /* Internet Explorer and Edge */
                z-index: 0;
            }

            .fixed-tabs div {
                font-size: 1.5em;
            }

            .fixed-tabs {
                max-height: 100px;
                /* width: 100%; */
                width: max-content;
            }

            #popupDiv {
                flex: 1;
                flex-direction: column;
                /* Stack items vertically */
                width: 80vw;
                left: 0;
            }

            .toast {
                font-size: 1.5em;
            }

            /* #scrollContainer { */
            /* -webkit-overflow-scrolling: touch; */
            /* } */

            /* .back { */
            /* top: 0; */
            /* display: block; */
            /* position: fixed; */
            /* overflow-y: clip; */
            /* } */

            /* .line-numbers {
                /* line-height: 1.5em; */
            /* font-size: 1.5em; */
            /* line-height: 1em; */
            /* width: 200px; */
            /* } */

            textarea {
                font-size: 1em;
            }

            .line-number {
                /* line-height: 1.5em; */
                font-size: 1.34em;
                /* line-height: 1em; */
                /* width: 1000px; */
            }

            .buttons-container {
                /* position: fixed; */
                width: 100vw;
                background-color: #ffffff;
                box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
                /* display: flex; */
                padding: 10px;
            }

            /* #popupDiv { */
            /* position: fixed; */
            /* left: 10px; */
            /* } */


            /* Custom scrollbar styles */
            ::-webkit-scrollbar {
                width: 20px;
                /* Set the width of the scrollbar */
            }

            /* Track styles */
            ::-webkit-scrollbar-track {
                background-color: #f1f1f1;
                /* Set the background color of the track */
            }

            /* Handle styles */
            ::-webkit-scrollbar-thumb {
                background-color: #888;
                /* Set the color of the thumb/handle */
                border-radius: 10px;
                /* Set the border radius to make it rounder */
            }

            /* Handle on hover styles */
            ::-webkit-scrollbar-thumb:hover {
                background-color: #555;
                /* Set a different color on hover */
            }
        }