body {
  --bs-text-opacity: 1;
  color: var(--bs-secondary-color) !important;
  background-color: #f8f9fa;
  font-size: 15px !important;
}

a {
    color: #08f;
}

h1 {
    font-size:1.75rem !important;
    font-weight: bold !important;
}

h3 {
    color: #379ffa;
}

h4 {
    color: #379ffa;
    margin-bottom: 1rem;
}

.main {
  font-size: 16px;
}

footer {
    background-color: rgb(35, 139, 242) !important;
    /*background: linear-gradient(135deg, #2c3e50, #1a2530) !important;*/
}

:root {
    /*
    --bar-color-default: linear-gradient(90deg, #0191e9, #0cdde8);
    --bar-color-default-right: linear-gradient(90deg, #0cdde8, #0191e9);
    --bar-color-latency: linear-gradient(90deg, #3161b9, #7c9df8);
    --bar-color-latency-right: linear-gradient(90deg, #7c9df8, #3161b9);
    */
    --bar-color-default: linear-gradient(90deg, #3161b9, #7c9df8);
    --bar-color-default-right: linear-gradient(90deg, #7c9df8, #3161b9);
    --bar-color-latency: linear-gradient(90deg, #0191e9, #0cdde8);
    --bar-color-latency-right: linear-gradient(90deg, #0cdde8, #0191e9);
    
    --bar-color-single-core: linear-gradient(90deg, #3ad142, #5ef06f);
    --bar-color-single-core-right: linear-gradient(90deg, #5ef06f, #3ad142);
    
    --bar-color-multi-core: linear-gradient(90deg, #3ad142, #aee08f);
    --bar-color-multi-core-right: linear-gradient(90deg, #aee08f, #3ad142);
    --bar-color-mbps: linear-gradient(90deg, #ff7e5f, #feb47b);
    --bar-color-mbps-right: linear-gradient(90deg, #feb47b, #ff7e5f);
    --bar-color-fps: linear-gradient(90deg, #6a11cb, #2575fc);
    --bar-color-fps-right: linear-gradient(90deg, #2575fc, #6a11cb);
    --bar-color-gbs: linear-gradient(90deg, #0072ff, #00c6ff);
    --bar-color-gbs-right: linear-gradient(90deg, #00c6ff, #0072ff);
    --bar-color-other: linear-gradient(90deg, #8a7cc9, #462bbe);
    --bar-color-other-right: linear-gradient(90deg, #462bbe, #8a7cc9);
    --bar-color-iops: linear-gradient(90deg, #8360c3, #2ebf91);
    --bar-color-iops-right: linear-gradient(90deg, #2ebf91, #8360c3);
    --bar-color-texture: linear-gradient(90deg, #2ebf91, #51ff85);
    --bar-color-texture-right: linear-gradient(90deg, #51ff85, #2ebf91);
    --bar-color-gpu-score: linear-gradient(90deg, #6a11cb, #2575fc);
    --bar-color-gpu-score-right: linear-gradient(90deg, #2575fc, #6a11cb);
    --bar-color-ssd-score: linear-gradient(90deg, #00c6ff, #0072ff);
    --bar-color-ssd-score-right: linear-gradient(90deg, #0072ff, #00c6ff);
    --bar-color-ram-score: linear-gradient(90deg, #f7971e, #ffd200);
    --bar-color-ram-score-right: linear-gradient(90deg, #ffd200, #f7971e);
    /*
    --bar-color-multi-core-mb-per-second: linear-gradient(90deg, #ff7e5f, #feb47b);
    --bar-color-single-core-mb-per-second: linear-gradient(90deg, #3170f8, #7b9efe);
    --bar-color-multi-core-hashingzip: linear-gradient(90deg, #ffc107, #ff9800);
    --bar-color-single-core-hashingzip: linear-gradient(90deg, #ffc107, #ff9800);
    --bar-color-gb-per-second: linear-gradient(90deg, #00c6ff, #0072ff);
    --bar-color-msamples-per-second: linear-gradient(90deg, #00c6ff, #0072ff);
    --bar-color-us: linear-gradient(90deg, #f7971e, #ffd200);
    */
    --section-border-color: #6089fa;
}

.bar-default {
    background: var(--bar-color-default) !important;
}
.bar-default-right {
    background: var(--bar-color-default-right) !important;
}

.bar-latency {
    background: var(--bar-color-latency) !important;
}
.bar-latency-right {
    background: var(--bar-color-latency-right) !important;
}

.bar-single-core {
    background: var(--bar-color-single-core) !important;
}
.bar-single-core-right {
    background: var(--bar-color-single-core-right) !important;
}

.bg-dark {
    background: linear-gradient(135deg, #0a84ff, #08294a) !important;
    /*background-color: rgb(35, 139, 242) !important;*/
    /*background: linear-gradient(135deg, #2c3e50, #1a2530) !important;*/
}

.list-unstyled-right {
    padding-left: 0;
    list-style: none;
    float: inline-end !important;
}

.category-header {
    border-bottom: 2px solid var(--section-border-color);
    padding-bottom: 0.5rem;
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
.category-header .bi {
    font-size: 1.75rem;
    color: #379ffa;
}

.stat-card {
    background: white;
    border-radius: 12px;
    padding: 2rem;
    margin: 1rem;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);
    transition: transform 0.2s;
}
.stat-card:hover {
    transform: translateY(-5px);
}

.nav-card {
    background: #fff;
    border: none;
    border-radius: 12px;
    padding: 2rem;
    /*margin: 1rem;*/
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);
    height: 100%;
    border: 1px solid lightgray;    
}

.nav-item > a {
    color: white !important;
    font-size: 16px !important;
}

.container {
    max-width: 1200px;
}

.benchmark-row-display {
    display: flex;
    align-items: center;
    justify-content: flex-start; /* Align items to the start */
    width: 100%; /* Ensure it takes full width of its parent td */
    gap: 10px; /* Add some space between the bar and the value */
}

.bar-container {
    position: relative;
    height: 20px;
    background: #e9ecef;
    border-radius: 4px;
    overflow: hidden;
    /*margin: 0; */
    width: 100%; /* Set a fixed width for the bar container */
    /* Ensure the container doesn't clip the absolutely positioned bar */
    position: relative;
    margin-top:0.25rem;    
}

.bar {
    height: 100%;
    background: var(--bar-color-default);
    transition: width 0.3s ease;
    flex-shrink: 0; /* Prevent the bar from shrinking */
}

.benchmark-value-display {
    font-weight: bold;
    color: #333;
    white-space: nowrap;
    flex-shrink: 0; /* Prevent the text from shrinking */
    width: 120px; /* Set a fixed width */
    text-align: left;
}

.hero-section {
    background: #f0f1f1; /*linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);*/
    border-radius: 16px;
    padding: 4rem 2rem;
    margin-bottom: 4rem;
    text-align: center;
}

.top-section {
    background: #ffffff;
    border: 1px solid #ffffff;    
    padding: 4rem 2rem;
    text-align: center;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);
    border: 1px solid lightgray;    
}

.top-section-mini {
    background: #ffffff;
    border: 1px solid #ffffff;  
    padding-top: 1rem;
    text-align: center;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);
}


.table-striped tbody tr:nth-of-type(odd) {
    background-color: rgba(0, 0, 0, 0.03);
}

.table-bordered {
    border: 1px solid #dee2e6;
}
.table-bordered td, .table-bordered th {
    border: 1px solid #dee2e6;
    font-size: 14px !important;
}

.gradient-text {
    /*background: linear-gradient(90deg, #6089fa, #37fad9);*/
    background: #073399;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.feature-icon {
    font-size: 2.5rem;
    margin-bottom: 1rem;
    background: linear-gradient(90deg, #6089fa, #37fad9);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.error-code {
    font-size: 8rem;
    line-height: 1;
    background: linear-gradient(90deg, #6089fa 0%, #37fad9 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.title {
    font-size: 3rem;
    line-height: 1;
    background: #379ffa;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-align: center;
}

.btn-primary {
  --bs-btn-bg: #379ffa;
}

.btn:hover {
  color: var(--bs-btn-hover-color);
  background-color: var(--bs-btn-hover-bg);
  border-color: var(--bs-btn-hover-border-color);
}

.btn-outline-primary {
  --bs-btn-color: #379ffa;
  --bs-btn-border-color: #0d6efd;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #379ffa;
  --bs-btn-hover-border-color: #379ffa;
  --bs-btn-active-border-color: #379ffa;
}

.btn-wide {
    width: 300px;
}
    

.error-actions {
    margin-top: 2rem;
}

.description-section {
    background: #f8f9fa;
    border-radius: 8px;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
    margin: 0;
    padding: 2rem;
    margin-bottom: 2rem;
    border: 1px solid lightgray;     
}

.comparison-section {
    background: #f8f9fa;
    border-radius: 8px;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
    margin: 2rem 0;
    padding: 2rem;
    border: 1px solid lightgray;
}

.cpu-select {
    max-width: 100%;
    margin: 1rem 0 2rem 0;
    padding: 1rem;
    font-size: 1.1rem;
}

.table tbody tr td:first-child {
    background-color: #f3f4f5;
}

.list-group-flush > .list-group-item {
	border-width: 0 0 var(--bs-list-group-border-width) !important;
	color: var(--bs-secondary-color) !important;
}

.bar-container .bar {
    height: 100%;
    transition: width 0.3s ease;
    display: flex;
    align-items: center;
    padding: 0;
    min-width: 0;
    color: white;
    font-weight: bold;
    z-index: 1;
    border-radius: 4px;    
}

.bar-container .bar-right {
    height: 100%;
    transition: width 0.3s ease;
    display: flex;
    flex-direction: row-reverse; /* Reverse direction for right-to-left growth */
    align-items: center;
    justify-content: flex-end; /* Align content to the right */
    padding: 0;
    color: white;
    font-weight: bold;
    border-radius: 0 4px 4px 0; /* Rounded on right side */
    position: absolute;
    right: 0;
    top: 0;
    min-width: 0;
    border-radius: 4px;
}

.download-section {
    background: #f8f9fa;
    border-radius: 8px;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
    margin-bottom: 2rem;
    padding: 2rem;
    border: 1px solid lightgray;    
}
.screenshot-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1rem;
    margin-top: 2rem;
}
.screenshot-grid img {
    width: 100%;
    border-radius: 8px;
    box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.1);
}
.testimonial-card {
    background: #ffffff;
    border-left: 5px solid #6089fa;
    padding: 1.5rem;
    border-radius: 8px;
    box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.05);
    margin-bottom: 1.5rem;
    text-align: right;
    font-size: 1.1rem;
}
.testimonial-card p {
    font-style: italic;
    margin-bottom: 0.5rem;
}
.foot {
    font-weight: bold;
    text-align: right;
}
.bottom-section {
    text-align: center;
    background: linear-gradient(135deg, #e7fffd, #bcf7eb);
    /*background: #e9f7ef;*/
    /*border-radius: 8px;*/
    border: 1px solid #d4edda;
    padding-top: 1rem;    
}
.bottom-section img {
    max-width: 150px;
    margin-bottom: 1rem;
}
.download-button-container {
    text-align: center;
    margin-top: 3rem;
}
.download-button {
    background-color: #28a745;
    color: white;
    padding: 10px 20px;
    font-size: 1.5rem;
    border-radius: 8px;
    text-decoration: none;
    transition: background-color 0.3s ease;
}
.download-button:hover {
    background-color: #218838;
    color: white;
}

#scrollToTopBtn {
    display: none;
    position: fixed;
    bottom: 20px;
    right: 30px;
    z-index: 99;
    font-size: 18px;
    border: none;
    outline: none;
    background-color: #007bff;
    color: white;
    cursor: pointer;
    padding: 15px;
    border-radius: 4px;
}

.system-overview-section {
    background-color: #d0f6ff33;
    border: 1px solid lightgray;
}

.navbar-brand img {
    width: 140px;
}

/* Tooltip/Popup Styles */
.benchmark-info {
    position: relative;
    display: inline-block;
    margin-left: 5px;
    cursor: pointer;
}

.benchmark-info .info-icon {
    color: #007bff;
    font-size: 0.9em;
}

.benchmark-info .info-popup {
    visibility: hidden;
    width: 250px;
    background-color: #fff;
    color: #333;
    text-align: left;
    border-radius: 8px;
    padding: 15px;
    position: absolute;
    z-index: 1000; /* Higher z-index to ensure it appears above other elements */
    bottom: calc(100% + 10px); /* Position above the icon with 10px gap */
    left: 0; /* Align left edge with icon */
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
    opacity: 0;
    transition: opacity 0.3s, visibility 0.3s;
}

.benchmark-info .info-popup::after {
    content: "";
    position: absolute;
    top: 100%; /* Position arrow at bottom of popup */
    left: 10px; /* Align arrow with left edge of popup */
    border-width: 5px;
    border-style: solid;
    border-color: #fff transparent transparent transparent;
}

.benchmark-info:hover .info-popup {
    visibility: visible;
    opacity: 1;
}

/* New classes for compare.php charts */
.compare-bar-container {
    position: relative;
    width: 100%; /* Ensure it takes full width of its parent td */
    height: 30px;
    background: #e9ecef;
    border-radius: 4px;
    overflow: hidden;
}
.compare-bar-left {
    height: 100%;
    position: absolute;
    right: 0;
    top: 0;
    background: linear-gradient(90deg,#8ba8f8,#2e64f8);

    transition: width 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 0 10px;
    color: white;
    font-weight: bold;
    z-index: 1;
}
.compare-bar-right {
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    justify-content: flex-start;
    padding: 0 10px 0 0;
    background: linear-gradient(90deg,#2e64f8, #8ba8f8);
    transition: width 0.3s ease;
    display: flex;
    align-items: center;
    color: white;
    font-weight: bold;
    z-index: 1;
}

.compare-bar-left,
.compare-bar-right {
    width: 0%; /* Initial width */
}

.bar.single_core_score-bar {
  background: var(--bar-color-single-core);
}

.bar.multi_core_score-bar {
  background: var(--bar-color-single-core);
}

.bar.fps-bar {
  background: var(--bar-color-latency);
}

.bar.latency-bar {
  background: var(--bar-color-latency);
}

@media (max-width: 767px) {
    
    /* Ensure popups stay within viewport on mobile */
    .benchmark-info .info-popup {
        max-width: 50vw; /* Prevent overflow on small screens */
        left: 0;
        right: auto;
    }    
    
    .col-md-6 {
        margin-bottom: 20px !important;
    }
    
    .container {
        padding: 0 15px;
    }
    .spec-section, .benchmark-section {
        overflow-x: hidden;
        overflow-y: hidden; /* Prevent vertical scrolling */
        max-height: 100%; /* Ensure it doesn't exceed viewport */
    }
    .category-header .bi {
        font-size: 1.5rem;
    }
    .bar-container {
        width: 100%; /* Full width for mobile */
        margin-bottom: 0.75rem;
    }
    .description-section.mt-0-sm {
        margin-top: 2rem !important;
    }
    .cpu-select.mt-0-sm {
        margin: 0rem 0 !important;
    }
    .row.g-4.gap-0-sm {
        gap: 0rem !important;
    }
    .description-section {
        margin: 1rem 0 !important;
    }
    .cpu-select {
        margin: 0.5rem 0 !important;
    }
    .list-unstyled-right {
        padding-left: 0;
        list-style: none;
        float: left !important;
    }
    
    /* Mobile layout for benchmark rows */
    .benchmark-row-display {
        flex-direction: column;
        align-items: flex-start;
        gap: 5px;
    }
    .benchmark-value-display {
        margin-left: 0;
        padding-left: 0px;
    }

    .comparison-section {
        padding: 1rem;
    }   
    
    .bottom-section {
        padding-left: 20px;
        padding-right: 20px;        
    }
    
    .btn-wide {
        width: 250px;
    }
}

@media (max-width: 550x) {
    .bar-container {
        width: 20%; /* Set a fixed width for the bar container */
    }
}

/* Chart container for radar charts */
.chart-container {
    position: relative;
    width: 100%;
    margin: 20px 0;
}

/* General chart height */
#general-comparison-section .chart-container {
    height: 600px;
}

/* Detailed chart height - taller for better visibility */
#performance-overview-section .chart-container {
    height: 800px;
}

/* Mobile adjustments for General Comparison Chart */
@media (max-width: 767px) {
    #general-comparison-section .chart-container {
        height: 450px; /* Reduced height for mobile */
        margin: 10px 0; /* Reduced margin */
    }
}

/* Make canvas elements full width */
.chart-container canvas {
    width: 100% !important;
    height: 100% !important;
    display: block;
}

/* Unified vertical legend for all devices */
.chart-legend {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-bottom: 15px;
    width: 100%;
}

.chart-legend ul {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0;
    margin: 0;
    width: 100%;
    list-style: none;
}

.chart-legend li {
    display: flex;
    align-items: center;
    margin-bottom: 5px;
    width: 100%;
}

.chart-legend .legend-item {
    display: flex;
    align-items: center;
}

.chart-legend .legend-color-box {
    width: 12px;
    height: 12px;
    margin-right: 8px;
    border-radius: 3px;
}

.chart-legend .legend-label {
    font-size: 14px;
    white-space: nowrap;
}

/* Mobile view - show only general chart */
@media (max-width: 767px) {
    #performance-overview-section {
        display: none;
    }
}

/* Desktop view - show both charts */
@media (min-width: 768px) {
    #general-comparison-section {
        display: block;
    }
}

.custom-legend, .component-legend {
    position: absolute;
    top: 10px;
    display: flex;
    flex-direction: column;
    background-color: rgba(255, 255, 255, 0.8);
    padding: 10px;
    border-radius: 5px;
    z-index: 10;
}

.custom-legend {
    left: 10px;
}

.component-legend {
    right: 10px;
}

.custom-legend .legend-item, .component-legend .legend-item {
    display: flex;
    align-items: center;
    margin-bottom: 5px;
}

.custom-legend .legend-color-box, .component-legend .legend-color-box {
    width: 12px;
    height: 12px;
    margin-right: 8px;
    border-radius: 2px;
}

/* Force-hide the default Chart.js legend */
.chart-container > .chartjs-legend {
    display: none !important;
}

.percentage-diff {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: #5f80bd; /*#3161b9;*/
    font-weight: bold;
}