html {
    background-color: #0D0E12;
    background-image: url('bgimage.jpg');
    background-size: 100% auto;
}

body{
    -webkit-print-color-adjust:exact !important;
    print-color-adjust:exact !important;
}

h1,
h2,
h3,
h4,
h5
{
color: white !important;
}


p {
    color: rgb(188, 197, 197);
    font-size: 16px;
    margin-bottom: 50px;
}

h1 {
    margin-top: 2em;
}

h2 {
    margin-top: 2em;
    margin-bottom: 1em;
}


h4 {
    font-size: 16px;
}



section {
    position: relative;
    border: 1px solid rgb(42, 57, 57);
    border-radius: 20px;
    padding: 24px;
    color: white;
    overflow: hidden;
}

section h3 {
    font-size: 18px;
}

section p {
    color: rgb(188, 197, 197) !important;
    font-size: 14px;
}

section > h4 {
    margin-top: 20px;
}

#visualization {
    width: 600px;
    height: 400px;
    border: 1px solid lightgray;
}

/* Interactive timeline */
/* Zoom manually turned off by editing library js */
.brusher { 
    display: none;
}

line {
    display: none;
}

.y-axis .tick {
    display: none;
}

.y-axis .tick .chart-tooltip {
    display: none;
}

.chart-tooltip {
    color: #eee;
    background: rgba(0, 0, 0, 0.85);
    border-radius: 3px;
    font: 11px sans-serif;
    z-index: 4000;
}



.timelines-chart .axises .grp-axis text {
    fill: #fff !important;
}

.timelines-chart .series-group {
    fill-opacity: 0;
}   

.timelines-chart .reset-zoom-btn {
    fill: white !important;
    font-size: 20px !important;
}

.generated-content {
    display: none;
    text-align: center;
}

.button-container {
    display: flex;
    align-items: center;
    gap: 10px; /* Space between the button and input */
    margin-top: 1em;
}

input[type="file"] {
    display: none;
}


button, .custom-file-upload {
    cursor: pointer;
    padding: 0.7em 1em;
    font-size: 16px;
    color: rgb(255, 255, 255);
    border-radius: 8px;
    text-align: center;
    margin: 0;
}

button:hover, .custom-file-upload:hover {
    border: 1px solid rgba(255, 255, 255, 0.387);
}

.custom-file-upload {
    background-color: rgb(0, 0, 0);
    border: 1px solid rgb(0, 0, 0);
}

 button {
    background-color:transparent;
    border: 1px solid rgba(255, 255, 255, 0.095);
    color: rgb(243, 243, 243);
}

.sponsor-logo-img {
    height: 60px;
    background: white;
    border-radius: 8px;
    margin: 20px 0;
    padding: 8px;
}

#summary-of-data section {
    margin-top: 30px;
}

#summary-of-data h2{
    margin-top: 16px;
    margin-bottom: 0;
}

/* Hide broken images */
img.sponsor-logo-img[src$=".png"] {
    min-height: 50px;  /* Reserve space while loading */
}

img.sponsor-logo-img[src$=".png"]:not([src=""]):broken {
    display: none;
}

@media print {

    .button-container{
        display: none;
    }

    body {
        background-color: white !important;
        color: black !important;
        font-size: 12pt;
    }

    h1, h2, h3, h4, h5, h6 {
        color: black !important;
    }

    .button-container, .generated-content {
        display: none;
    }

    #visualization {
        width: 100%;
        height: auto;
        border: none;
    }

    section {
        border: none;
        padding: 0;
        width: 100% !important;
        height: auto !important;
        page-break-inside: avoid;
        margin-bottom: 20px;
        border-radius: 0;
        overflow: auto;
    }

    p {
        color: black !important;
    }

    /* Timeline chart text colors */
    .timelines-chart .axises text {
        fill: black !important;
    }
    
    .timelines-chart .axises .grp-axis text {
        fill: black !important;
    }
    
    .chart-tooltip {
        color: black !important;
        background: white !important;
    }
    
    .timelines-chart .reset-zoom-btn {
        fill: black !important;
    }
    
    /* Ensure all text elements are black */
    text {
        fill: black !important;
    }
    
    /* Chart legends */
    .legendText {
        fill: black !important;
    }

    /* Make sure SVGs scale properly */
    svg {
        width: 100% !important;
        height: auto !important;
        max-height: 100vh !important;
    }

    /* Ensure timeline chart fits */
    #timeline-os {
        width: 100% !important;
        height: auto !important;
        overflow: visible !important;
    }

    /* Ensure Google Charts containers fit */
    #placement-time-of-total,
    #share-of-placement {
        width: 100% !important;
        height: auto !important;
        overflow: visible !important;
    }
}

#timeline-os {
    width: 100%;
    height: auto;
    overflow: visible;
}

@media print {
    #timeline-os {
        width: 100% !important;
        height: auto !important;
        overflow: visible !important;
    }
}