:root {
    --main-bg-color: #121212;
    --accent-color: #48b46c;
}


body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: var(--main-bg-color); /* Dark background */
    color: #E0E0E0; /* Light text color */
    display: flex;
    flex-direction: column;
    align-items: center; /* Center <main> horizontally */
    min-height: 100vh;
}



footer {
    background-color: #1F1F1F; /* Slightly lighter dark background */
    color: #29663d; /* Accent color for text */
    text-align: center;
    padding: 0.5em 0;
    width: 100%;
    bottom: 0;
    margin-top: 2.5em;
}



header {
    background-color: #1F1F1F;
    padding: 0.5em 0;
    text-align: center;
    position: relative;
    z-index: 0;
    width: 100%;
}
header::before {    /* make color above the header be consistant */
    content: '';
    position: absolute;
    top: -25vh; /* Adjust this value to extend the background as far up as you want */
    left: 0;
    right: 0;
    height: 25vh; /* This should match the top value */
    background-color: #1F1F1F;
    z-index: -1; /* Ensures the pseudo-element stays behind the header */
}
.asset {
    background: linear-gradient(to bottom, #ddd, #aaa);
    background-clip: text;
}
.asset-rank {
    font-size: 1.8em;
    letter-spacing: -0.5px;
    font-weight: bold;
    background: linear-gradient(to bottom, #54d37f, #40a160);
    background-clip: text;
    color: transparent;
    position: relative;
}
.asset-rank:after {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    text-shadow: 0px 0px 6px rgba(0, 0, 0), 0px 0px 1px rgb(0, 0, 0);
    z-index: -1;
}
 .AssetRankText {
    letter-spacing: -0.5px;
 }

 


/* Flex Container for Main Content and Sidebars */
.content-wrapper {
    display: flex;
    width: 100%;
    justify-content: center;
    overflow-x: hidden;
}

/* Main Content Styles */
main {
    display: flex;
    flex-direction: column; /* Arrange items vertically */
    align-items: center; /* Center items horizontally */
    justify-content: center;
    width: 100%;
    max-width: 50em; /* Maximum width for the main content */
    flex: 1 1 auto; /* Allow the main content to grow and shrink */
}

/* Sidebar Styles */
.left-sidebar, .right-sidebar {
    min-width: 15em; /* Set a minimum width for the sidebars */
    flex: 1; /* Allow the sidebars to grow and shrink */
    display: block; /* Ensure they are visible by default */
    z-index: -1;
}

/* Responsive Behavior */
@media (max-width: 81em) { /* Adjust this based on your specific sidebar widths (main:max-width + both_sidebars:min-width + a little bit extra) */
    .left-sidebar, .right-sidebar {
        display: none; /* Hide the sidebars */
    }
}




/* Welcome */
.welcome-container {
    margin: 1.5em;
    text-align: justify;
}
.welcome-container > h1 {
    text-align: left;
    font-size: 1.1em;
}




#chartContainer {
    width: 95%;
    height: 15em;
    padding-bottom: 1em;
    padding-right: 1em;
}





.new-gauge-container {
    position: relative;
    width: 200px;
    height: 100px;
    margin-top: 1em;
    /* filter: drop-shadow(5px 0px 0px rgb(255, 0, 0)) drop-shadow(-5px 0px 0px rgb(255, 0, 0)) drop-shadow(0px -5px 0px rgb(255, 0, 0)) drop-shadow(0px 5px 0px rgb(255, 0, 0)); */
}

.new-gauge-container *:focus {
    outline: none;
}
.new-gauge-container * {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0.2);
}

.new-gauge {
    /* clip-path: path('M 50,100 A 50,50 0 0,1 150,100 L 200 100 A 50,50 0 0,0 0,100 Z'); */
    /* clip-path: path('M 165,100 A 50,50 0 0,0 35,100 L 0 100 A 50,50 0 0,1 200,100 Z'); */
    clip-path: path('M 167,100 A 3,3 0 0,1 164,97 A 62,60.5 0 0,0 36,97 A 3,3 0 0,1 33,100 L 0 100 A 50,50 0 0,1 200,100 Z');

    position: relative;
    width: 100%;
    height: 100%;
    background: conic-gradient(from 0.5turn at 50% 100%,#e91414 90deg, rgb(252, 228, 9) 175deg 185deg, rgb(30, 122, 2) 270deg);
}

.circle {
    display: block;
    max-width: 500px;
}
.segment-text {
    font-size: 12px;
    font-weight: bold;
    text-anchor: middle;
    stroke: none;
    letter-spacing: 2.5px;
}
.segment {
    transition: fill 0.1s, fill-opacity 0.1s;
    fill: black;
    fill-opacity: 0.1;
}
#segment2 {
    fill: black;
    fill-opacity: 0.2;
}
.segment:hover, #segment2:hover,
.segment-text:hover textPath{
    fill: white;
    fill-opacity: 0.2;
}
/* Disable hover effects on touch devices */
@media (hover: none) {
    .segment:hover,
    .segment-text:hover textPath {
        fill: black;
        fill-opacity: 0.1;
    }
    #segment2:hover {
        fill: black;
        fill-opacity: 0.2;
    }
}
.segment:active, #segment2:active,
.segment-text:active textPath{
    fill: white;
    fill-opacity: 0.3;
}
.segment-text {
    pointer-events: none;
  }
.circle a {
    stroke: black;
    stroke-width: 0px;
}









.gauge-container {
    position: relative;
    width: 200px;
    height: 100px;
    margin-top: 1em;
}

.gauge {
    position: relative;
    width: 100%;
    height: 100%;
    background: conic-gradient(from 0.5turn at 50% 100%,red 90deg, rgba(255, 255, 0, 0.842), green 270deg);
    border-radius: 100px 100px 0 0;
    mask-image: radial-gradient(farthest-side at 50% 100%, transparent 64%, black 64.5%);
}

.pointer {
    width: 2px;
    height: 64.5%;
    background: linear-gradient(to top, #444, var(--main-bg-color) 99%);
    position: absolute;
    bottom: 0;
    left: 50%;
    transform-origin: bottom;
    transform: translateX(-50%) rotate(0.01deg);
    transition: transform 0.6s ease;
}

.arrowhead {
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-bottom: 11px solid var(--main-bg-color);
    border-radius: 3px;
    position: absolute;
    left: 50%;
    transform: translateX(-50%) translateY(-100%);
}
.base-circle {
    width: 0;
    height: 0;
    border: 2px solid #444;
    border-radius: 100px;
    position: absolute;
    bottom: -2px;
    left: 50%;
    transform: translateX(-50%);
}

.buttons {
    margin-top: 20px;
}

button {
    padding: 3px 5px;
    margin: 0 10px;
    font-size: 14px;
    color: #aaa;
    cursor: pointer;
    border: solid;
    border-color: #666;
    background-color: #0000;
    border-width: 1px;
    border-radius: 3px;
}




/* Toggle Switch */
.switch {
    margin-left: 0.4em;
}
.toggle-container {
    display: flex;
    align-items: center;
    margin-top: 1em;
    margin-bottom: 0.6em;
}
.toggle-container > * {
    margin: 0;
    -webkit-tap-highlight-color: transparent;
}
.toggle-label {
    color: #a8a8a8; /* Default color for label */
    transition: color 0.4s; /* Smooth transition for color change */
}
.active-label {
    background: linear-gradient(22deg,
        rgb(222, 44, 27),
        rgb(222, 175, 25),
        rgb(200, 231, 35),
        rgb(22, 177, 17),
        var(--accent-color),
        rgb(25, 152, 255),
        rgb(158, 75, 190),
        rgb(222, 115, 217),
        rgb(222, 44, 27),
        rgb(222, 175, 25),
        rgb(200, 231, 35),
        rgb(22, 177, 17),
        var(--accent-color),
        rgb(25, 152, 255),
        rgb(158, 75, 190),
        rgb(222, 115, 217),
        rgb(222, 44, 27));
    background-size: 800% 100%;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: rainbow 4s linear infinite;
}

@keyframes rainbow {
    0% { background-position: 0% 0%; }
    100% { background-position: 59% 0%; }
}




.switch {
    --switch-width: 35px;
    --switch-height: 18px;
    --slider-diameter: calc(var(--switch-height) / 1.41);
    --slider-radius: calc(var(--switch-height) / 2);
    --slider-offset: calc(var(--switch-height) / 7);
    position: relative;
    display: inline-block;
    width: var(--switch-width);
    height: var(--switch-height);
}

.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    transition: .4s;
    border-radius: var(--slider-radius);
}

.slider:before {
    position: absolute;
    content: "";
    height: var(--slider-diameter);
    width: var(--slider-diameter);
    left: var(--slider-offset);
    bottom: var(--slider-offset);
    background-color: #1E1E1E;
    transition: .4s;
    border-radius: 50%;
}

input:checked + .slider {
    background-color: var(--accent-color);
}

input:checked + .slider:before {
    transform: translateX(calc(var(--switch-width) - var(--slider-diameter) - (var(--slider-offset) * 2)));
    background-color: white;
}




.sort-icon {
    display: inline-block;
    width: 0;
    height: 0;
    border: solid 5px transparent;
    background: transparent;
    margin: 4px -3px 0px 4px;
    position: relative;
}
.sort-icon-up {
    border-top: solid 6px var(--accent-color);
    border-bottom-width: 0;
}
.sort-icon-down {
    border-bottom: solid 6px var(--accent-color);
    border-top-width: 0;
    top: -6px;
}
.transparent {
    visibility: hidden;
}




/* Table */
table {
    width: 93vw;
    max-width: 80ch;
    min-height: 25ch;
    border-collapse: collapse;
    border-radius: 3px 3px 0px 0px; /* Rounded edges */
    overflow: hidden;
    margin: 0 1.5em;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0.2);
}
th, td {
    max-width: 10ch;
    padding: 6px 8px;
    border: 1px solid #333; /* Dark border */
    text-align: left;
    white-space: nowrap; /* Ensure text does not wrap */
}
th {
    cursor: pointer;
    background-color: #333333; /* Dark header background */
    color: var(--accent-color); /* Accent color for text */
}
.no-pointer {
    cursor: default;
}
th .sort-icon.transparent {
    color: transparent;
}
th.col1, td:nth-child(1) {
    width: 0ch;
    font-weight: bold;
}
th.col2, td:nth-child(2) {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: auto;
}
th:nth-child(3) {
    text-align: right;
}
th.col3, td:nth-child(3) {
    width: 4ch;
    font-weight: bold;
    text-align: right;
}
th:nth-child(4) {
    text-align: right;
}
th.col4, td:nth-child(4) {
    width: 2ch;
    text-align: right;
}
tr:nth-child(even) {
    background-color: #1E1E1E; /* Alternate row color */
}