/* Styles for entire app.py */



/* METHODOLOGY: highest level components at the top & vice versa, e.g. body>panels>panel components> children of ... */
/* within elements, properties in alphabetical order */


/* SECTION: OVERALL STYLES & PAGE STYLES */


/* Importing Rboto Mono */
@import url('https://fonts.googleapis.com/css2?family=Balsamiq+Sans:ital,wght@0,400;0,700;1,400;1,700&family=Roboto+Mono:ital,wght@0,100..700;1,100..700&display=swap');

body {
    background-color: #000000;
    font-family:Roboto Mono, sans-serif;
    overflow: hidden;
}

/* ChatGPT code . . . makes sure rendered size does not exceed specified dimensions, makes layout consistent */
*,
*::before,
*::after {
    box-sizing: border-box;
}



/* SECTION: PANEL STYLES */

.menu-div {
    background-color: #b8b5b9;
    border: 1vh solid #868188;
    border-radius: 2vh;
    box-shadow: inset -6px -6px 15px #868188;
    width: 100%;
}


.control-div {
    background-color: #b8b5b9;
    border: 1vh solid #868188;
    border-radius: 2vh;
    box-shadow: inset -6px -6px 15px #868188;
    height: 85vh;
    padding: 10px;
    width: 100%;
}

/* Control Div Styles for Smaller Screens */
@media (max-width: 1000px) {
    .control-div {
        height: 70vh; /* Smaller screen height */
    }
}

.tight-table {
    /* By default, many Bootstrap table styles use border-collapse: collapse.
       We need 'separate' to enable border-spacing. */
    border-collapse: separate !important;
    /* border-spacing: horizontal vertical */
    /* Example: 0.5rem horizontally and 0.3rem vertically: */
    border-spacing: 0.5rem 0.3rem;
    /* Or use the same spacing on both axes: border-spacing: 0.5rem; */
}

/* Then style the <td> elements as you already do: */
.tight-table td {
    background-color: #4B4158;
    border-radius: 3vh;
    color: #F2F0E5;
    padding-top: 0.7rem;
    padding-bottom: 0.7rem;
    /* You can also adjust left/right padding if you want
       space inside each cell horizontally: */
    padding-left: 1rem;
    padding-right: 1rem;

    line-height: 1.0;
    width: auto;
}


.info-div {
    background-color: #212123;
    border: 3px solid #45444F;
    border-radius: 0px;
    box-shadow: inset -6px -6px 15px #45444F;
    color: #f2f0e5;
    margin: 0;
    padding: 0.5vh;

    /* Let the container auto-adjust, but cap at 24vh */
    height: 12vh;          /* container grows/shrinks with content */
    max-height: 12vh;      /* cap the total height */
}

/* Adjust for smaller screens (e.g., iPhone) */
@media (max-width: 1000px) {
    .info-div {
        /* Same logic, but a smaller cap */
        height: auto;
        max-height: 12vh;
    }

    .info-div .row,
    .info-div .col {
        margin: 0 !important;
        padding: 0.1vh !important;
    }
}




.info-text-label {
    font-size: 2vh;
    /* colors and ofset create 3d effect */
    text-shadow:
        1px 1px 0px #9a9a97,
        2px 2px 0px #6f6776,
        3px 3px 0px #666092,
        4px 4px 0px #5d6872;
}

.info-text-actual {
    font-size: 2vh;
    text-align: center;
    /* colors and ofset create 3d effect */
    text-shadow:
        1px 1px 0px #9a9a97,
        2px 2px 0px #6f6776,
        3px 3px 0px #666092,
        4px 4px 0px #5d6872;
}

/*SECTION: CHILDREN OF PANELS*/

/* row-button */
/* this button is planned to be used on the "bottom row panel" */

/* Center content vertically and horizontally in buttons */
.bottom-row-button {
    align-items: center;
    background-color: #b8b5b9;
    border-radius: 50%;
    color: #5f556a !important;
    display: flex;
    font-size: 1vw;
    height: 8vh;
    justify-content: center;
    overflow: hidden;
    margin-left:1vw;
    transition: all 0.2s ease-in-out;
    width: 8vh;
}

/* Disabled state styles */
.bottom-row-button:disabled {
    opacity: 1; /* Ensure opacity is not reduced */
    cursor: not-allowed; /* Optionally change cursor */
    pointer-events: none; /* Disable interactions */
    /* Retain existing styles */
    background-color: #b8b5b9;
    color: #5f556a !important;
}

.bottom-row-button:active,
.bottom-row-button:focus,
.bottom-row-button.active {
    background-color: #868188!important;
    color: #68c2d3 !important;
    box-shadow: inset -20px 20px 5px #646365;
    border: 0.5vh solid #a2dcc7;
    outline: none;
}

.bottom-row-button:hover {
    background-color: #b8b5b9 !important;
    color: #4b80ca !important;
}

/* icon part of the button */
.icon-style-bottom-row {
    color: inherit;
    font-size: 4vh;
}

.algo-button {
    align-items: center;
    background-color: #5f556a;
    border-radius: 10%;
    box-shadow: 12px 12px 8px 0px #212123;
    color: #b8b5b9 !important;
    display: flex;
    font-size: 2.5vh;
    height: 10vh;
    width: 12vw;
    justify-content: center;
    margin-left: 0vh;
    overflow: hidden;
    padding: 0px;
    transition: box-shadow 0.2s ease-in-out, color 0.2s ease-in-out;
}

/* Disabled state styles */
.algo-button:disabled {
    opacity: 1;
    cursor: not-allowed;
    pointer-events: none;
    /* Retain existing styles */
    background-color: #5f556a;
    color: #b8b5b9 !important;
}

.algo-button:hover {
    background-color: #6a536e !important;
    border: 8px double #68c2d3;
    box-shadow: 3px 3px 4px 0px #212123;
    color: #f2f0e5 !important;
    transition: box-shadow 0.1s ease-in-out, border 0.2s ease-in-out,color 0.1s ease-in-out;
}

.algo-button:active,
.algo-button:focus,
.algo-button.active {
    background-color: #4b4158 !important;
    border: 8px double #a2dcc7 !important;
    color: #68c2d3 !important;
    box-shadow: inset 25px 25px 5px 0px #212123;
    outline: none;
    /* No change to border, so it stays consistent */
    transition: box-shadow 0.1s ease-in-out, border 0.2s ease-in-out, color 0.2s ease-in-out;
}


/* Media Query: Adjust for Screens 1000px or Smaller */
@media (max-width: 1000px) {
    .algo-button {
        height: 6vh; /* Smaller height */
        width: 8vw; /* Smaller width */
        font-size: 1.5vh; /* Reduce font size */
        margin-left: 0vh; /* Reduce left margin */
        border: 4px double #68c2d3; /* Thinner border */
        box-shadow: 6px 6px 4px 0px #212123; /* Adjust shadow for smaller size */
    }

    .algo-button:hover {
        border: 4px double #68c2d3; /* Match hover border size */
        box-shadow: 2px 2px 3px 0px #212123; /* Adjust hover shadow */
    }

    .algo-button:active,
    .algo-button:focus,
    .algo-button.active {
        border: 4px double #a2dcc7 !important; /* Match active border size */
        box-shadow: inset 12px 12px 4px 0px #212123; /* Adjust active shadow */
    }
}



/* alt-button */
/* can be a part of any panel or panel-child; gives an alternative look to the bottom-row button */
.book-button {
    align-items: center;
    background-color: #b8b5b9 !important;
    border: none;
    border-radius: 20%;
    box-shadow: 0px 12px 18px rgba(0, 0, 0, 0.3);
    color: #a77b5b !important;
    display: flex;
    height: 10vh;
    justify-content: center;
    outline: none;
    overflow: hidden;
    transition: all 0.2s ease-in-out;
    width: 5vw;
}

.book-button:hover {
    background-color: #b8b5b9 !important;
    box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.3);
    color: #d3a068 !important;
    outline: none;
}

/* Is icon part of the button */
.icon-style-book {
    font-size: 4vw; /* Increase or decrease as needed */
    color: inherit;

}

        /* Media query for screens 1000px or less */
@media screen and (max-width: 1200px) {
    .book-button {
        height: 8vh; /* Reduce height */
        width: 4vw; /* Reduce width */
        box-shadow: 0px 8px 12px rgba(0, 0, 0, 0.3); /* Adjust shadow size */
        font-size: 0.9rem; /* Optional adjustment for text if needed */
    }

    .book-button:hover {
        box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.3); /* Lighter hover shadow */
        color: #d3a068 !important; /* Keep hover color consistent */
    }

    .icon-style-book {
        font-size: 3vw; /* Reduce font size for smaller screens */
    }
}

/* Modal button
 Inside modal  */
.modal-button {
    align-items: center;
    background-color: #43436a !important;
    border: none;
    border-radius: 20%;
    box-shadow: 0px 12px 18px rgba(0, 0, 0, 0.3);
    color: #f2f0e5 !important;
    display: flex;
    height: 50px;
    justify-content: center;
    outline: none;
    overflow: hidden;
    padding: 0px;
    transition: all 0.2s ease-in-out;
    width: 75px;
}

.modal-button:hover {
    background-color: #b8b5b9 !important;
    box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.3);
    color: #d3a068 !important;
    outline: none;
}

/* dbc.Card */
.home-card {
    background-color: #868188;
    border-radius: 50px;
    box-shadow: inset 0 8px 16px #45444f;
    color: #f2f0e5;
    padding: 2vh;
    transition: transform 0.2s ease-in-out;
}

.home-card:hover {
    color: #a2dcc7;
}

.home-card-title {
    color: #f2f0e5;
    font-size: 1vh;
    font-weight: bold;
}

.home-card-text {
    color: #f2f0e5;
    font-size: 1vh;
}

/* attempt to double style the card? */
.home-card-body {
    background-color: #d3a068;
    border-radius: 50px;
    box-shadow: inset 0 8px 16px #646365;
}

/* Verify which part of the modal this is */
.book-modal-header {
    background-color: #f2f0e5;
}

.book-modal-body {
    background-color: #f2f0e5;
}

.book-modal-footer {
    background-color: #b8b5b9;
}

/* H1 title of edit page */
.edit-header-text {
    color: #6a536e;
    font-weight: bold;
    text-align: center;
    font-size: 3vw;
    text-shadow:
        -3px -3px 3px #4b4158;
}

/* Disabled state styles */
.edit-button:disabled {
    opacity: 1;
    cursor: not-allowed;
    pointer-events: none;
    /* Retain existing styles */
    background-color: #352b42 !important;
    color: #868188 !important;
}


/* edit-button */
/* used for modifying the tree in "edit" section */
.edit-button {
    align-items: center;
    background-color: #352b42 !important;
    border: 8px solid #4b4158;
    border-radius: 33%;
    box-shadow: 6px 6px 4px 0px #212123;
    color: #868188 !important;
    display: flex;
    height: 6vw;
    justify-content: center;
    outline: none;
    overflow: hidden;
    padding: 0px;
    transition: all 0.2s ease-in-out;
    width: 7vw;
}

/* While button is selected, managed in callback */

.edit-button-selected {
    align-items: center;
    background-color: #352b42 !important;
    border: 8px solid #4b4158;
    border-radius: 33%;
    box-shadow: 0px 12px 18px rgba(0, 0, 0, 0.3);
    color: #f2f0e5 !important;
    display: flex;
    height: 6vw;
    justify-content: center;
    outline: none;
    overflow: hidden;
    padding: 0px;
    transition: all 0.2s ease-in-out;
    width: 7vw;
}

.edit-button:hover {
    background-color: #352b42 !important;
    border: 10px solid #4b4158;
    box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.3);
    color: #f2f0e5 !important;
    outline: none;
}

/* Is icon part of the button */
.icon-style-edit {
    font-size: 7vh; /* Increase or decrease as needed */
    color: inherit;

}

/* For the tooltip question mark */
/* Standalone icon */
.icon-style-question-mark {
    font-size: 8vh;
    color: #352b42;
    opacity: 0.2;
    transition: color 0.5s ease-in-out;
}

.icon-style-question-mark:hover {
    color: #6a536e;
    opacity: 0.6;
    text-shadow: -3px -3px 3px #352b42;

}

.edit-input-button,
 .edit-input-button:active,
 .edit-input-button:focus{
    align-items: center;
    background-color: #6a536e;
    border-radius: 20%;
    box-shadow: 2px 2px 5px #4b4158;
    color: #f2f0e5;
    display: flex;
    font-size: 2vh;
    justify-content: center;
    margin-right: 3vw;
    outline: none;
    overflow: hidden;
    padding: 0px;
    transition: all 0.2s ease-in-out;
    height: 7vh;
    width: 9vh;
}


.edit-input-button:hover {
    background-color: #6a536e !important;
    box-shadow: 4px 4px 5px #646365;
    color: #f2f0e5 !important;
    outline: none;
}

.weights-input-button,
 .weights-input-button:active,
 .weights-input-button:focus {
    align-items: center;
    background-color: #4e584a;
    border-radius: 20%;
    box-shadow: 2px 2px 2px #212123;
    color: #f2f0e5;
    display: flex;
    font-size: 2vh;
    justify-content: center;
    outline: none;
    overflow: hidden;
    padding: 0px;
    transition: all 0.2s ease-in-out;
    height: 8vh;
    width: 8vh;
}

/* Adjust styles for screens 1000px or smaller */
@media (max-width: 1000px) {
    .weights-input-button,
    .weights-input-button:active,
    .weights-input-button:focus {
        font-size: 1.6vh; /* Smaller font size */
        height: 6vh;      /* Smaller height */
        width: 6vh;       /* Smaller width */
        border-radius: 15%; /* Slightly less rounded corners */
        box-shadow: 1px 1px 1px #212123; /* Subtler shadow */
    }
}


.weights-input-button:hover {
    background-color: #567b79 !important;
    box-shadow: 4px 4px 5px #212123;
    color: #f2f0e5 !important;
    outline: none;
}

/* Feedback screen that pops up in edit mode */
.input-feedback-div {
    background-color: #3a3858;
    border: 2vh solid #5f556a;
    border-radius: 24vh;
    box-shadow: 5px 5px 5px #45444f;
    color: #f2f0e5;
    display: block;
    font-size: 1vh;
    height: 12vh;
    padding: 5px;
    text-align: left;
    vertical-align: top;
    width: 80%;
}

/* Feedback screen that pops up in edit mode */
.input-feedback-div-weights {
    background-color: #567b79;
    border: 12px solid #4e584a;
    border-radius: 35px;
    box-shadow: 5px 5px 5px #45444f;
    color: #f2f0e5;
    display: block;
    height: 14vh;
    padding: 5px;
    text-align: left;
    vertical-align: top;
    width: 100%;
}

/* Styles for screens 1000px or smaller */
@media (max-width: 1000px) {
    .input-feedback-div-weights {
        border: 2vh solid #4e584a;  /* Thinner border */
        border-radius: 20px;        /* Smaller rounded corners */
        height: 16vh;               /* Reduce height */
        padding: 3px;               /* Smaller padding */
        font-size: 0.9em;           /* Slightly smaller text */
    }
}
/* The input that pops up in edit mode */

.edit-input {
    border: 2vh solid #b8b5b9;
    background-color: #f2f0e5;
    border-radius: 2vh;
    box-shadow: 2px 2px 5px #646365;
    color: #352b42;
    font-size: 1.5vw;
    margin-right: 2vw;
    outline: none;
    padding: 1vh;
    transition: box-shadow 0.3s ease-in-out;
}

/* Adjust styles for screens 1000px or smaller */
@media (max-width: 1000px) {
    .edit-input {
        border: 8px solid #b8b5b9;  /* Thinner border */
        font-size: 1vh;           /* Smaller font size */
        padding: 3px;              /* Reduce padding */
        border-radius: 1vh;       /* Slightly smaller border-radius */
        margin-right: 1.5vw;       /* Adjust margin for spacing */
        box-shadow: 1px 1px 4px #646365; /* Subtler shadow for smaller input */
    }
}

/* Change border and shadow when the input is focused */
.edit-input:focus {
    background-color: #f2f0e5;
    border: 12px solid #b8b5b9;
    box-shadow: 4px 4px 5px #646365;
    color: #352b42;
}

.edit-input-font {
    font-size: 2vh;
    text-shadow: 2px 2px 4px #b8b5b9;
}


.weights-input {
    border: 12px solid #b8b5b9;
    background-color: #f2f0e5;
    border-radius: 20px;
    box-shadow: 2px 2px 5px #646365;
    color: #352b42;
    font-size: 24px;
    outline: none;
    padding: 10px;
    transition: box-shadow 0.3s ease-in-out;
}

@media (max-width: 1000px) {
    .weights-input {
        border: 4px solid #b8b5b9;  /* Thinner border */
        font-size: 1vh;           /* Smaller font size */
        padding: 3px;              /* Reduce padding */
        border-radius: 1vh;       /* Slightly smaller border-radius */
        margin-right: 4vw;       /* Adjust margin for spacing */
        box-shadow: 1px 1px 4px #646365; /* Subtler shadow for smaller input */
    }
}

/* Change border and shadow when the input is focused */
.weights-input:focus {
    background-color: #f2f0e5;
    border: 12px solid #b8b5b9;
    box-shadow: 4px 4px 5px #646365;
    color: #352b42;
}

.weights-input-font {
    font-size: 2vh;
    text-shadow: 2px 2px 4px #b8b5b9;
}
.auto-manual-button {
    align-items: center;
    background-color: #868188 !important;
    border: 6px solid #646365;
    border-radius: 10%;
    box-shadow: 2px 2px 4px #45444f;
    color: #f2f0e5 !important;
    font-size: 2vh;
    display: flex;
    height: 8vh;
    justify-content: center;
    outline: none;
    overflow: hidden;
    padding: 0px;
    transition: all 0.2s ease-in-out;
    width: 8vw;
    transform: translateY(-2px); /* Gives a slightly raised effect */
}

/* Active state to show button is pressed */
.auto-manual-button.active {
    background-color: #868188 !important;
    border: 2px solid #646365;
    box-shadow: inset 10px 10px 8px #45444f;
    color: #a2dcc7 !important;
    transform: translateY(2px); /* Keeps it pressed */
    transition: background-color 0.2s ease, transform 0.2s ease;
}

/* Hover state to pop the button out */
.auto-manual-button:hover:not(.active) {
    background-color: #868188 !important;
    border: 2px solid #646365;
    box-shadow: 0px 6px 12px #45444f; /* Pops out on hover */
    color: #a2dcc7 !important;
    outline: none;
    transform: translateY(-4px); /* Slightly more raised on hover */
}

/* Remove :active pseudo-class to avoid separate press appearance */
.hidden-opacity {
    opacity: 0; /* Fully transparent */
    transition: opacity 0.3s ease-in-out; /* Smooth transition effect */
}

.visible-opacity {
    opacity: 1; /* Fully visible */
    transition: opacity 0.3s ease-in-out; /* Smooth transition effect */
}

.algo-output-active {
    width: 25vh;
    height: 25vh;
    border-radius: 50%;
    display: flex; /* Make sure it's flex to align text */
    justify-content: center;
    align-items: center;
    background-color: #4b80ca;
    border: 8px double #68c2d3;
    border-opacity: 0.75;
    box-shadow: -3px 3px 3px #f2f0e5, 10px -10px 5px #45444f;
    font-size: 3vh;
    font-weight: bold;
    color: #f2f0e5;
    margin: 20px auto;
    text-align: center; /* Ensure text is centered */
    transition: background-color 2s ease-in-out, border 2s ease-in-out, box-shadow 4s ease-in-out, color 6s;
}

.algo-output-passive {
    width: 25vh;
    height: 25vh;
    border-radius: 50%;
    display: flex; /* Use flex to allow centering of children */
    justify-content: center; /* Horizontally center text */
    align-items: center; /* Vertically center text */
    background-color: #868188;
    box-shadow: inset -20px 20px 5px #45444f, inset 3px -3px 1px #f2f0e5;
    font-size: 4vh;
    font-weight: bold;
    color: #868188;
    margin: 20px auto;
    text-align: center; /* Ensure text is centered */
}

/* Slider styling */
/* General styling for the slider container */
.algo-slider-text {
    color: #352b42;
    font-size: 1.5vw;
    text-align: center;
    margin-top: 2vh; /* Ensure no additional top margin */
    vertical-align: top; /* Aligns inline content to the top */
}

/* Adjust font size for screens 1000px or smaller */
@media (max-width: 1000px) {
    .algo-slider-text {
        font-size: 1.25vw; /* Smaller font size for smaller screens */
        margin-top: 0vh; /* Ensure no additional top margin */
        margin-bottom: 2vh; /* Ensure no additional top margin */
    }
}


/* Styling for the entire slider */
.algo-slider {
    width: 100%;
    margin: auto;
    position: relative;
    display: flex;
    align-items: flex-start; /* Align children to the top */
    justify-content: center; /* Center horizontally (optional) */
}

@media (max-width: 1000px) {
    .algo-slider {
        width: 175%;               /* Wider than parent container */
        margin-left: -37%;         /* Shift it left by half of the extra width */
        position: relative;        /* Ensure it respects the centering */
    }
}

/* Track styling (the line on which the slider handle moves) */
.rc-slider-track {
    background-color: #4b80ca; /* Track color */
    border: 4px solid #68c2d3;    /* Handle border */
    height: 5vh;               /* Track height */
    border-radius: 40px;        /* Rounded corners */
}

/* Slider handle styling */
.rc-slider-handle {
    width: 6vh;               /* Handle width */
    height: 6vh;              /* Handle height */
    background-color: #4b80ca; /* Handle color */
    border: 2px solid #68c2d3;    /* Handle border */
    box-shadow: 0 0 5px #a2dcc7; /* Handle shadow */
    cursor: pointer;           /* Pointer cursor when hovered */
}

/* Handle styling when focused */
.rc-slider-handle:focus {
    background-color: #4b80ca; /* Handle color */
    border: 4px solid #68c2d3;    /* Handle border */
    box-shadow: 0 0 5px #a2dcc7; /* Handle shadow */
}

/* Styling for the handle when it is being actively clicked or dragged */
.rc-slider-handle:active {
    background-color: #4b80ca; /* Handle color */
    border: 4px solid #68c2d3;    /* Handle border */
    box-shadow: 0 0 5px #a2dcc7; /* Handle shadow */
}

/* Styling for the slider's inactive track (part without a handle) */
.rc-slider-rail {
    background-color: #646365; /* Track color */
    border: 4px solid #868188;    /* Handle border */
    height: 5vh;               /* Track height */
    border-radius: 40px;        /* Rounded corners */
}

/* Styling for slider marks (the label on specific points of the slider) */
.rc-slider-mark {
    visibility: hidden;        /* Keep marks in the DOM but make them invisible */
}

/* Styling for the active mark (selected value label) */
.rc-slider-mark-text-active {
    color: #43436a;             /* Highlighted mark color */
}

/* Styling for the hover state of the slider handle */
.rc-slider-handle:hover {
    background-color: #4b80ca; /* Handle color */
    border: 4px solid #68c2d3;    /* Handle border */
    box-shadow: 0 0 5px #a2dcc7; /* Handle shadow */
}


/* Optional: animate the handle transitions */
.rc-slider-handle {
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

/* Optional: set marks to be more prominent */
.rc-slider-mark-text {
    font-weight: bold;          /* Bold text for marks */
    font-size: 14px;            /* Font size for marks */
    color: #43436a;             /* Color for the mark labels */
}

/* Styling for slider marks/ticks (the small white dots) */
.rc-slider-dot {
    /* To completely hide the dots */
    visibility: hidden;  /* Alternatively, use display: none; to remove them completely */

    /* To modify the dots' appearance */
    width: 0px; /* You can reduce the size to make them smaller */
    height: 0px; /* Set to 0 to make them invisible without removing them */
    background-color: transparent; /* Make them transparent if needed */
    border: none; /* Remove any border around the dot */
}

/* To make the dots invisible but keep their interaction */
.rc-slider-dot-active {
    visibility: hidden;  /* Hide active dots as well */
}

/* Optional: Adjust the spacing between the dots and the rail */
.algo-slider .rc-slider-mark {
    margin-top: 10px; /* Adjust to make sure the invisible dots don't affect alignment */
}

/* Existing styles for the slider */

/* Additional styling for the disabled state */
.algo-slider .rc-slider-disabled {
    pointer-events: none; /* Disable interactions */
}

/* Override unexpected background in the disabled state */
.algo-slider .rc-slider-disabled .rc-slider-rail {
    background-color: #646365; /* Set to match your active rail color */
    border: 4px solid #868188;
}

/* Ensure the track and handle look the same when disabled */
.algo-slider .rc-slider-disabled .rc-slider-track {
    background-color: #4b80ca; /* Same as enabled */
    border: 4px solid #68c2d3;
}

.algo-slider .rc-slider-disabled .rc-slider-handle {
    background-color: #4b80ca; /* Same as enabled */
    border: 2px solid #68c2d3;
    box-shadow: 0 0 5px #a2dcc7;
    opacity: 1; /* Prevent handle from appearing grayed out */
}

/* Additional overrides to prevent any unexpected backgrounds */
.algo-slider .rc-slider-disabled {
    background: none !important; /* Remove any additional background */
}

/* Ensure no background is applied to the slider wrapper or container */
.algo-slider .rc-slider-disabled .rc-slider {
    background: none !important;
}


/* Position the spinner at the bottom center */
.dash-spinner {
    position: fixed !important;
    bottom: 20px !important;  /* Adjust this value to move the spinner up/down */
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 4vh !important;    /* Adjust spinner size */
    height: 4vh !important;

}
/* Style the background of the progress bar */
.algo-progress {
    background-color: #b8b5b9;
    border-radius: 40px;
    display: none;
    height: 4vh;
    padding: 0 0px;
    width: 90%;
}

/* Style the filled bar */
.algo-progress .progress-bar {
    background-color: #a2dcc7;
    border-radius: 40px;
    color: #352b42;
    font-size: 18px;
    height: 4vh;
    transition: width 0.6s ease;
}

/* Add stripes */
.algo-progress .progress-bar {
    background-image: linear-gradient(
        45deg,
        rgba(255, 255, 255, 0.15) 25%,
        transparent 25%,
        transparent 50%,
        rgba(255, 255, 255, 0.15) 50%,
        rgba(255, 255, 255, 0.15) 75%,
        transparent 75%,
        transparent
    );
    background-size: 1rem 1rem;
}

/* Add animation */
.algo-progress .progress-bar {
    animation: progress-bar-stripes 1s linear infinite;
}

@keyframes progress-bar-stripes {
    from {
        background-position: 1rem 0;
    }
    to {
        background-position: 0 0;
    }
}

/* Responsive height */
@media (max-width: 600px) {
    .algo-progress {
        height: 3vh;
    }
}

/* Custom tooltip styling */
.algo-tooltip .tooltip-inner {
    width: 50vh; /* Make tooltip large */
    height: 50vh; /* Make tooltip square */
    max-width: none; /* Override default max-width */
    background-color: #4b80ca; /* Custom background color */
    color: #ffffff; /* Text color */
    font-size: 2vh; /* Font size for readability */
    text-align: center; /* Center text */
    border-radius: 10px; /* Optional: adjust radius for softer edges */
    padding: 10px; /* Add padding */
}

/* Adjust tooltip arrow color to match the background */
.algo-tooltip.bs-tooltip-right .arrow::before {
    border-right-color: #4b80ca; /* Same as tooltip background color */
}

/* Disabled state styles */
.edit-button:disabled {
    opacity: 1;
    cursor: not-allowed;
    pointer-events: none;
    /* Retain existing styles */
    background-color: #646365 !important;
    color: #b8b5b9 !important;
}

.fields-button {
    align-items: center;
    background-color: #646365 !important;
    border: 6px solid #45444f;
    border-radius: 25%;
    box-shadow: 6px 6px 4px 0px #212123;
    color: #b8b5b9 !important;
    display: flex;
    font-size: 1.5vw;
    height: 6vw;
    justify-content: center;
    outline: none;
    overflow: hidden;
    padding: 0px;
    transition: all 0.2s ease-in-out;
    height: 10vh;
    width: 8vw;
}

/* While button is selected, managed in callback */

.fields-button.active {
    align-items: center;
    background-color: #646365 !important;
    border: 0px solid #45444f;
    border-radius: 25%;
    box-shadow: inset -15px 15px 4px #45444f; /* Enhance the shadow on hover */
    color: #f2f0e5 !important;
    display: flex;
    font-size: 1.5vw;
    height: 6vw;
    justify-content: center;
    outline: none;
    overflow: hidden;
    padding: 0px;
    transition: all 0.2s ease-in-out;
    height: 10vh;
    width: 8vw;
}

.fields-button:hover {
    background-color: #646365 !important;
    border: 6px solid #45444f;
    box-shadow: 2px 2px 2px 0px #212123;
    color: #f2f0e5 !important;
    outline: none;
}

/* Remove the default blue outline for all buttons with the class 'fields-button' */
.fields-button:focus {
    align-items: center;
    background-color: #646365 !important;
    border: 0px solid #45444f;
    border-radius: 25%;
    box-shadow: inset -15px 15px 4px #45444f; /* Enhance the shadow on hover */
    color: #f2f0e5 !important;
    display: flex;
    font-size: 1.5vw;
    height: 6vw;
    justify-content: center;
    outline: none;
    overflow: hidden;
    padding: 0px;
    transition: all 0.2s ease-in-out;
    height: 10vh;
    width: 8vw;
}

/* Media query for screens 1000px or smaller */
@media screen and (max-width: 1200px) {
    .fields-button {
        font-size: 1vw; /* Increase relative font size for smaller buttons */
        height: 8vh; /* Reduce height for smaller screens */
        width: 6vw; /* Reduce width to fit better */
        border: 4px solid #45444f; /* Adjust border thickness */
        box-shadow: 4px 4px 2px 0px #212123; /* Slightly smaller shadow */
    }

    .fields-button.active {
        font-size: 1vw;
        height: 8vh;
        width: 6vw;
        border: 4px solid #45444f;
        box-shadow: inset -10px 10px 4px #45444f;
    }

    .fields-button:hover {
        font-size: 1vw;
        height: 8vh;
        width: 6vw;
        border: 4px solid #45444f;
        box-shadow: 3px 3px 2px 0px #212123;
    }
}

.fields-update-button {
    align-items: center;
    background-color: #646365 !important;
    border: 6px solid #6a536e;
    border-radius: 40%;
    box-shadow: 6px 6px 4px 0px #212123;
    color: #b8b5b9 !important;
    display: flex;
    font-size: 1.5vw;
    height: 6vw;
    justify-content: center;
    outline: none;
    overflow: hidden;
    padding: 0px;
    transition: all 0.2s ease-in-out;
    height: 10vh;
    width: 8vw;
}

.fields-label {
    align-items: center;
    text-shadow: 2px 2px 2px #352b42;
    color: #6a536e;
    display: flex;      /* Allows for vertical centering */
    font-size: 1.5vw;
    height: 100%;       /* Ensure it spans its container */
    justify-content: center;
    margin: 0 auto;     /* Centers the block element */
    text-align: center; /* Centers text horizontally */

}

.template-button {
    width: 15vh;
    height: 15vh;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #4b80ca;
    border: 8px double #68c2d3;
    border-opacity: 0.75;
    box-shadow: -3px 3px 3px #f2f0e5, 10px -10px 5px #45444f;
    font-size: 3vh;
    font-weight: bold;
    color: #f2f0e5;
    margin: 20px auto;
    text-align: center;
    outline: none;
}

.template-button:hover {
    background-color: #4b80ca; /* Lighter shade on hover */
    border: 8px double #a2dcc7;
    color: #f2f0e5;
    box-shadow: -2px 2px 5px #e2dfd0, 8px -8px 4px #3b3a4f;
    outline: none;
}

.template-button:active,
.template-button:focus {
    background-color: #b45252; /* Turn red when pressed */
    border: 8px double #d3a068;
    box-shadow: inset -3px 3px 8px #2e2e34, inset 5px -5px 10px #1a1a1f;
    color: #f2f0e5;
    outline: none;
}

/* Add this CSS rule for the active class */
.template-button.active {
    background-color: #b45252; /* Keep red background when active */
    border: 8px double #d3a068;
    box-shadow: inset -3px 3px 8px #2e2e34, inset 5px -5px 10px #1a1a1f;
    color: #f2f0e5;
    outline: none;
}

        /* Media Query for Smaller Screens */
@media (max-width: 1000px) {
    .template-button {
        width: 15vh; /* Reduce button size */
        height: 15vh;
        border: 4px double #68c2d3; /* Thinner border */
        box-shadow: -2px 2px 2px #f2f0e5, 8px -8px 4px #45444f; /* Adjust shadow */
        font-size: 2.5vh; /* Smaller font size */
        margin: 1vh; /* Smaller margin */
    }

    .template-button:hover {
        background-color: #4b80ca;
        border: 4px double #a2dcc7; /* Match border size */
        box-shadow: inset -1px 1px 3px #2e2e34, inset 2px -2px 4px #1a1a1f; /* Adjust pressed shadow */
    }

    .template-button:active,
    .template-button:focus {
        background-color: #b45252;
        border: 4px double #d3a068; /* Match border size */
        box-shadow: inset -1px 1px 3px #2e2e34, inset 2px -2px 4px #1a1a1f; /* Adjust pressed shadow */
    }

    .template-button.active {
        background-color: #b45252;
        border: 4px double #d3a068;
        box-shadow: inset -1px 1px 3px #2e2e34, inset 2px -2px 4px #1a1a1f; /* Adjust pressed shadow */
    }
}



/* Center content vertically and horizontally in buttons */
.theme-button {
    align-items: center;
    background-color: #b8b5b9;
    border-radius: 50%;
    color: #5f556a !important;
    display: flex;
    font-size: 14px;
    height: 8vh;
    justify-content: center;
    overflow: hidden;
    padding:0px;
    transition: all 0.2s ease-in-out;
    width: 8vh;
}

/* Disabled state styles */
.theme-button:disabled {
    opacity: 1; /* Ensure opacity is not reduced */
    cursor: not-allowed; /* Optionally change cursor */
    pointer-events: none; /* Disable interactions */
    /* Retain existing styles */
    background-color: #b8b5b9;
    color: #45444f !important;
}

.theme-button:active,
.theme-button:focus,
.theme-button.active {
    background-color: #868188!important;
    color: #f2f0e5 !important;
    box-shadow: inset -20px 20px 5px #646365;
    border: 5px solid #f2f0e5;
    outline: none;
}

.theme-button:hover {
    background-color: #b8b5b9 !important;
    color: #e5ceb4 !important;
}

/* icon part of the button */
.icon-style-theme-button {
    color: inherit;
    font-size: 4vh;
}

/* Media Query: Adjust for Smaller Screens */
@media (max-width: 1000px) {
    .theme-button {
        font-size: 12px; /* Slightly smaller font size */
        height: 6vh;     /* Reduce height */
        width: 6vh;      /* Reduce width */
        border-radius: 50%; /* Maintain circular shape */
    }

    .theme-button:active,
    .theme-button:focus,
    .theme-button.active {
        border: 0.5vh solid #f2f0e5; /* Thinner border for smaller buttons */
        box-shadow: inset -15px 15px 4px #646365; /* Adjust shadow for smaller size */
    }
}

.pixel-art {
    image-rendering: pixelated; /* Ensure pixel-perfect scaling */
    image-rendering: crisp-edges; /* Fallback for non-Chrome browsers */
    height: 50px;
    width: 50px;
    transition: filter 0.3s ease; /* Smooth transition for hover and active state */
}

/* Adjust for smaller screens */
@media (max-width: 1000px) {
    .pixel-art {
        height: 4vh; /* Reduced height */
        width: 4vh;  /* Reduced width */
    }
}

.pixel-art:hover,
.pixel-art:focus,
.pixel-art:active {
    filter: brightness(1.5); /* Brighten icon */
}

/* Ensure brightness persists when the button is active */
.theme-button.active,
.theme-button.focus {
    filter: brightness(1.5); /* Keep icon bright while active */
}

.save-load-button {
    align-items: center;
    background-color: #b8b5b9 !important;
    border: none;
    border-radius: 20%;
    box-shadow: 0px 12px 18px rgba(0, 0, 0, 0.3);
    color: #45444f !important;
    display: flex;
    height: 8vh;
    justify-content: center;
    outline: none;
    overflow: hidden;
    transition: all 0.2s ease-in-out;
    width: 4vw;
}

.save-load-button:hover {
    background-color: #b8b5b9 !important;
    box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.3);
    color: #567b79 !important;
    outline: none;
}

@media screen and (max-width: 1200px) {
    .save-load-button {
        height: 2vh; /* Reduce height */
        width: 1vw; /* Reduce width */
        box-shadow: 0px 8px 12px rgba(0, 0, 0, 0.3); /* Adjust shadow size */
        font-size: 0.8rem; /* Add font size adjustment for better proportions */
        margin-right: 2vh;
    }

    .save-load-button:hover {
        box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.3); /* Smaller hover shadow */
        color: #567b79 !important; /* Keep hover color consistent */
    }
}

/* Is icon part of the button */
.icon-style-save-load {
    font-size: 4vh; /* Increase or decrease as needed */
    color: inherit;

}

@media screen and (max-width: 1200px) {
    .icon-style-save-load {
        font-size: 1vh; /* Reduce font size for smaller screens */
    }
}

.save-load-text {
    color: #646365;
    font-size: 1.5vw;
    line-height: 1.5;
}

.upload-area {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 18vh;
    border: 1vh inset #868188; /* Bootstrap gray */
    border-radius: 8px;
    background-color: #f2f0e5; /* Bootstrap light */
    cursor: pointer;
    transition: all 0.3s ease;
    text-align: center;
    vertical-align: center;
    font-size: 3vh;
    color: #45444f; /* Bootstrap dark */
}

/* Adjust styles for screens 1000px or smaller */
@media (max-width: 1000px) {
    .upload-area {
        height: 14vh; /* Reduce height */
        font-size: 2vh; /* Adjust font size to match smaller height */
    }
}

.upload-area:hover {
    background-color: #f2f0e5; /* Slightly darker light */
    border-color: #8ab060; /* Bootstrap dark */
    color: #352b42; /* Bootstrap darker */
}

.upload-area:active {
    background-color: #f2f0e5; /* Even darker light */
    border-color: #567b79; /* Bootstrap darker gray */
}

.upload-text {
    font-size: 1vh;
    font-weight: bold;
}


/* Sleek link styling */
.sleek-link {
    font-size: 2vh;
    color: #68c2d3;
    transition: all 0.3s ease-in-out;
    text-align: center;
    vertical-align: top; /* Aligns the link to the top */
}

.sleek-link:hover {
    color: #a2dcc7;
    transform: scale(1.25);
}


.switch-button {
    color: #f2f0e5 !important;
    background-color: #3a3858 !important;
    font-size: 3vh !important;
    outline: none !important;
    width: auto !important;
    border-radius: 0px !important;
    padding: 0.5vh 0.8vh !important;
    line-height: 1 !important;
    margin-right: 3vh !important;
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
}

.switch-button:active {
    color: #f2f0e5 !important;
    background-color: #6a536e !important;
    outline: none !important;
}

.switch-button:focus {
    color: #f2f0e5 !important;
    background-color: #3a3858 !important;
    outline: none !important;
}


.top-div {
    background-color: #45444f;
    height: 5vh;
    position: relative; /* Needed for child absolute positioning */
}

/* Control Column Styles */
.default-control-style {
    padding: 0;
    height: 100%;
    display: flex;
}

.hidden-control-style {
    padding: 0;
    height: 100%;
    display: none;
}

.theme-spacer {
    height: 2vw;
}

/* Cytoscape Styles for Smaller Screens */
@media (max-width: 1000px) {
    .theme-spacer {
        height: .5vh; /* Smaller screen height */
    }
}

.tree-height {
    height: 73vh;
}

/* Cytoscape Styles for Smaller Screens */
@media (max-width: 1000px) {
    .tree-height {
        height: 52vh; /* Smaller screen height */
    }
}

/* Default Cytoscape Style */
.default-cyto-style {
    height: 73vh;
    width: 100%;
    background-color: #352b42;
    border: 3px solid #868188;
    border-radius: 30px;
    box-shadow: inset 0px 0px 10px 10px #646365;
    flex: 1;
}

/* Adjust for smaller screens */
@media (max-width: 1000px) {
    .default-cyto-style {
        height: 52vh; /* Smaller height */
    }
}

/* Full-Screen Cytoscape Style */
.full-screen-cyto-style {
    height: 95vh;
    width: 100%;
    background-color: #352b42;
    border: 3px solid #868188;
    border-radius: 30px;
    box-shadow: inset 0px 0px 10px 10px #646365;
    flex: 1;
}




/* Adjust for smaller screens */
@media (max-width: 1000px) {
    .full-screen-cyto-style {
        height: 85vh; /* Smaller height */
    }
}