:root {
--gray-1: #070707;
--gray-2: #0D0D0D;
--gray-3: #141414;
--gray-4: #1B1B1B;
--gray-5: #212121;
--gray-6: #282828;
--gray-7: #2E2E2E;
--gray-8: #353535;
--gray-9: #3C3C3C;
--gray-10: #424242;
--gray-11: #494949;
--gray-12: #4F4F4F;

--bg-1: #020E11;
--bg-2: #061D23;
--bg-3: #0B2B34;
--bg-4: #113A46;
--bg-5: #174857;
--bg-6: #1C5668;
--bg-7: #22657A;
--bg-8: #28738B;
--bg-9: #2E829D;
    }
code {
    display:inline-block;
    font-family: SFMono-Regular, Consolas, Liberation Mono, Menlo, monospace !important;
    padding:4px;
    background:rgba(0,0,0,0.2);
    border:1px solid rgba(0, 0, 0, 0.1);
    border-radius:5px;
}
a {
    color:#FFF;
}
.bg-blur {
    background: url(/static/images/blur.png) 0% 0% / cover no-repeat;
}
#search-results {
    border:1px solid #012025;
    background: linear-gradient(180deg, #000000 -95.87%, #01181C 100%);
    background: linear-gradient(180deg, rgba(0, 0, 0, 1.0) -95.87%, rgba(1, 24, 28, 1.0) 100%);
}
.border-g {
    border-color: #0A4048;
}
*::-webkit-scrollbar-thumb {
    background: var(--gray-7);
    border-radius: 8px;
}
*::-webkit-scrollbar-track {
    background: var(--gray-5);
}
/* Handle on hover */
*::-webkit-scrollbar-thumb:hover {
    background: var(--gray-9);
}

/* Works on Chrome, Edge, and Safari */
*::-webkit-scrollbar {
    width: 10px;
}

#search-results::-webkit-scrollbar-track {
    background: var(--gray-10);
}
#search-results::-webkit-scrollbar-thumb:hover {
    background: var(--gray-12);
}

.green {
    color: #007700;
    color:#8AFF71;
}
.red {
    color: #810000;
    color: #9e0505;
    color:#E55534;
    font-weight:500;
}
.copy-icon, .done {
    fill: rgba(255, 255, 255, 0.8);
}

.copy-icon:hover {
    fill: #ffffff;
}

.tooltip-popup {
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translate(-50%, -5px);
    background-color: rgb(34, 34, 34);
    border: 1px solid #ddd;
    border-radius: .25rem;
    padding: .5rem;
    box-shadow: 0 1px 3px rgba(0,0,0,.1);
    z-index: 1000;
    width:200px;
    color:rgba(255,255,255,0.8);
    overflow-wrap: break-word;
    white-space: normal;
}

/* Existing styles */
.tooltip-popup {
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    /* Other styles remain the same */
}

/* New styles for different positions */
.tooltip-top {
    bottom: auto;
    top: 100%;
}

.tooltip-left {
    left: auto;
    right: 100%;
    transform: translateY(-5px);
}

.tooltip-right {
    left: 100%;
    transform: translateY(-5px);
}

.material-symbols-outlined {
    font-variation-settings:
        'FILL' 0,
        'wght' 400,
        'GRAD' 0,
        'opsz' 24
}

.sort-icon svg, .sort-icon img {
    width:12px !important;
    height:12px !important;
    flex-shrink: 0 !important;
    max-width:none !important;
}

.p-0 {
    padding:0;
}
.tt {
    background: rgb(38,120,145);
    background: linear-gradient(180deg, rgba(38,120,145,1) 0%, rgba(28,86,104,1) 100%);
    padding:2px;
    border:1px solid #448AA5;
}
.hero-row:nth-child(even) {
    background-color: rgba(20,20,20,1)
}
.hero-row:nth-child(odd) {
    background-color: rgba(10,10,10,1)
}

.ui-slider .ui-slider-handle {
    /* Handle color and style */
    background-color: rgba(9,53,38,1);
    border:1px solid rgb(11, 66, 48);
}
.ui-slider .ui-slider-handle:hover {
    background-color: rgb(11, 66, 48);
    cursor: pointer;
}

.ui-slider .ui-slider-range {
    /* Range color (between handles) */
    background: rgb(139, 212, 188);
    background-color: #2B5C70;
    border:none;
}

.ui-slider {
    /* Track color and style */
    border:none;
    background-color: rgba(255,255,255,0.9);
    
}
.btn-tag {
    background: linear-gradient(180deg, rgba(38,120,145,1) 0%, rgba(28,86,104,1) 100%);
}
input:focus {
    outline: none;
    box-shadow: none;
  }
img {
    max-width:none!important;
}