@page {
    size: auto;
    size: A4 landscape;
    margin: 5mm;
    -webkit-print-color-adjust: exact;
}

@media print {
    body{
        background-color: #ffffff;
        -webkit-print-color-adjust: exact;
        transform: scale(0.95);
    }

    nav, footer.d-flex, .export-btns{
        display: none !important;
    }
    
    .station-water-report-container.d-flex{
        display: block !important;
    }
    
    .first-station{
        margin: auto;
        margin-top: 2em;
    }
    
    .station-report{
        display: inline-block !important;
        clear: both;
        page-break-inside: avoid;
    }
}

.first-station{
    background-color: #ffffff;
    border: 1px solid #eeeeee;
    max-width: 500px;
}

.first-station canvas{
    max-width: 100%;
    object-fit: contain;
}

.station-report{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background-color: #ffffff;
    border: 1px solid #eeeeee;
    border-left: none;
}

.station-report .distance-info{
    padding: 5px;
    text-align: center;
    font-size: 12px;
    color: #6e6e6e;
    border-bottom: 2px solid #6e6e6e;
}

.station-name{
    min-height: 42px;
    min-width: 250px;
    font-size: 14px;
}

.trapezoid{
    border-bottom: 60px solid #a6a6a6;
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
    height: 0;
    width: 80px;
}

.trapezoid.station-type-1{
    border-bottom: 60px solid #b8aaa2;
}

.trapezoid.station-type-2{
    border-bottom: 60px solid #ed7d31;
}

.trapezoid.station-type-3{
    border-bottom: 60px solid #5b9bd5;
}

.station-type{
    margin-top: -40px;
    text-align: center;
    font-size: 14px;
}

.statation-dataTable{
    font-size: 12px;
}

.statation-dataTable tr td{
    padding: 5px;
    white-space: nowrap;
}

.circleDiv{
    width: 20px;
    height: 20px;
    border: 2px solid #ffffff;
    border-radius: 50%;
    background-color: grey;
}

.circleDiv.green{
    background-color: green;
}

.circleDiv.orange{
    background-color: orange;
}

.circleDiv.red{
    background-color: red;
}

.station-link a{
    text-decoration: none;
    color: inherit;
}

.station-link a:hover{
    color: var(--bs-link-color);
}

.fs-12{
    font-size: 12px;
}

.fs-14{
    font-size: 14px;
}