* {
    font-family: Segoe UI, Frutiger, Frutiger Linotype, Dejavu Sans, Helvetica Neue, Arial, sans-serif !important;
    outline: none;
}

: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;
}