@charset "utf-8";
/*  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    Stylesheet: noaareports.css | Version: 5.01
    Author:     DNC Thomas      | April 2026
    -------------------------------------------
    Last edit:  2026-04-03 13:30:02
    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
*/

.noaaSelectors {
    display: grid;
    grid-template-columns: 6em 6em 5em 7.5em;
    grid-gap: 0.5em;
    align-items:baseline;
    & select {
        padding: .3em 1em;
        border-radius: 1em;
        background: var(--color0);
        color:var(--color1);
        cursor: pointer;
    }
    & select:hover {
        background: var(--gradient-down);
    }
}

#noaaCard {
    margin:auto;
	position:relative; 
	max-width:min-content;
	min-height: 8em;
}

#gull {
    position:absolute;
    top:3vw;
    right:11vw;
    height:2.5em; 
    width:auto;
    z-index:3
}

pre { padding-left: 1em; padding-right: 1em; }

#noaareport {
    & header {
	    text-align:center;
        margin-top:1em;
    }
    & table {
        border-collapse: collapse;
        & th {
            vertical-align: bottom;
            padding: .1em .25em;
            font-size: 80%;
        }
        & td {
            text-align:right; 
            padding: .3em .25em; 
            font-size: 80%; 
            border-right: thin dotted var(--color5);
        }
        & td:first-of-type{ 
            text-align:center;
            width: 60px;
        }
        & tr {
            border-left: 1em solid var(--color9);/* These should be the same colour as the background of the reports */
            border-right: 1em solid var(--color9);
        }
        & tr:first-of-type {
            border-bottom: 1px solid var(--color5);
        }
        & tr:hover {
            background: var(--gradient-databar);
        }
        & tr:first-of-type:hover {
            background:none;
        }
        & tr:last-of-type{
            border-bottom: 1px solid var(--color5);
            border-top: 1px solid var(--color5);
        }
    }
    & section:first-of-type table { width: 100%;}
    & section:nth-of-type(2) table{ 
        width:min-content; 
        margin:auto; /* Remove if you want your Precipitation table on the left */
    }
    & section:last-of-type table{
        width: min-content ;
        margin:auto;/* Remove if you want you Winds table on the left */
        margin-bottom: 1vh;
    }
}
			
#report-summary {
	margin: 1em 0 1em 8em!important; 
    & p { 
        line-height: 1.8em;
        margin:0;
        & b:first-of-type{ width:9em;display:inline-block;}
    }
}