/* Change info icons to table icons */

div#hour {
    --tile-width: 96vw;
    --main-icon-width: calc( .164 * var(--tile-width ) );
    --icon-width: calc( .0775 * var( --tile-width ) );
    --title-height: calc( .725 * var( --icon-width ) );
    --border-width: calc( .2 * var( --cubit ) );
    --border-style: solid;
    --border-color: var( --cg6 );
    --border: var( --border-width ) var(--border-style) var(--border-color);
    --shadow: .05vw .05vw .15vwvar( --cg3 );
    --font-size: calc( .0375 * var( --tile-width ) );
    --left-box-width: var( --main-icon-width );
    --right-box-width: calc( var( --tile-width ) - var( --left-box-width ) );
    --astro-temp-width: calc( 3 * var( --icon-width ) );
    --astro-cloud-width: calc( var( --right-box-width ) - calc( var( --astro-temp-width ) + calc( 2 * var( --border-width ) ) ) );
    --clouds-width: calc( 5.4 * var( --icon-width ) );
    --humidity-width: calc( var(--astro-cloud-width) - calc( var( --clouds-width ) + var(--border-width) ) );

    position: relative;
    overflow-x: hidden;
    overflow-y: scroll;
    font-size: 0;
}

div#hour > div.hour-tile {
    margin: calc( .5 * var( --icon-width ) ) auto 0 auto;
    width: var( --tile-width );
    background: transparent;
    box-shadow: var( --shadow );
}

div#weatherPage.dayIndex0 div#hour > :not( div.day-index0 ),
div#weatherPage.dayIndex1 div#hour > :not( div.day-index1 ),
div#weatherPage.dayIndex2 div#hour > :not( div.day-index2 ),
div#weatherPage.dayIndex3 div#hour > :not( div.day-index3 ),
div#weatherPage.dayIndex4 div#hour > :not( div.day-index4 ),
div#weatherPage.dayIndex5 div#hour > :not( div.day-index5 ),
div#weatherPage.dayIndex6 div#hour > :not( div.day-index6 ),
div#weatherPage.dayIndex7 div#hour > :not( div.day-index7 ),
div#weatherPage.dayIndex8 div#hour > :not( div.day-index8 ),
div#weatherPage.dayIndex9 div#hour > :not( div.day-index9 ),
div#weatherPage.dayIndex10 div#hour > :not( div.day-index10 ),
div#weatherPage.dayIndex11 div#hour > :not( div.day-index11 ),
div#weatherPage.dayIndex12 div#hour > :not( div.day-index12 ),
div#weatherPage.dayIndex13 div#hour > :not( div.day-index13 ) { display: none; }

div#hour h4.date-time {
    width: var( --tile-width );
    height: var( --title-height );
    font-size: calc( .03 * var( --tile-width ) );
    font-weight: 100;
    font-style: italic;
    background-color: rgba( var( --cgn6 ), .1);
    color: var( --cg6 );
    text-shadow: 2px 2px 5px var( --cg1 );
    border-top-left-radius: calc( .25 * var( --icon-width ) );
    border-top-right-radius: calc( .25 * var( --icon-width ) );
    border-bottom: var( --border );
  }
  
div#hour > div:nth-of-type(2n) h4 {
    background-color: rgba( var( --cgn0 ), .1);
}

div#hour h4.date-time span {
    display: inline-block;
    padding-top: calc( .1 * var( --icon-width ) );
}
div#hour h4.date-time span.hour {
    width: calc( 1.25 * var( --main-icon-width) );
    text-align: left;
}
div#hour h4.date-time span.day {
    width: calc( var( --tile-width ) - calc( 1.25 * var( --main-icon-width) ) );
    text-align: right;
}

div#hour div.hour-tile div.hour-details-wrapper {
    background-color: rgba( var( --cgn6 ), .4 );
}

div#hour div.hour-tile div.icon-wrapper {
    display: inline-block;
    width: var( --main-icon-width) ;
    vertical-align: top;
}

div#hour div.hour-tile div.icon-wrapper img {
    width: 100%;
}

div#hour div.hour-tile div.hour-details {
    display: inline-block;
    width: var( --right-box-width );
}

/* Astrology and High / Low Temperature CSS */
div#hour dl.astro-temp aside.temp {
    display: inline-block;
    width: var(--astro-temp-width );
    vertical-align: middle;
}

div#hour dd,
div#hour div.humidity-wrapper span.humidity-text,
div#hour div.wind-wrapper span.wind-text {
    font-size: var( --font-size );
    vertical-align: middle;
}

div#hour dl.astro-temp span:first-of-type img,
div#hour div.clouds img,
div#hour div.humidity-wrapper img {
    margin: 0;
    width: var( --icon-width );
    height: var( --icon-width );
    vertical-align: middle;
}

div#hour dl.astro-temp aside img,
div#hour div.hour-wind img,
div#hour div.hour-wind svg {
    margin: calc( .1 * var( --icon-width ) ) 0;
    width: calc( .8 * var( --icon-width ) );
    height: calc( .8 * var( --icon-width ) );
    vertical-align: middle;
}

div#hour div.hour-details dl.astro-temp {
    display: inline-block;
    width: var( --astro-temp-width );
    height: var( --main-icon-width );
    border-right: var( --border );
    border-left: var( --border );
    text-align: center;
}

div#hour dl.astro-temp dt.temp-icon {
    position: relative;
    display: inline-block;
    width: var( --icon-width );
    top: calc( .025 * var( --icon-width ) );
}

div#hour dl.astro-temp dd.temp-data {
    display: inline-block;
    width: calc( 1.5 * var( --icon-width ) );
    text-align: right;
}

div#hour dl.astro-temp aside.temp span.temp-wrap {
    padding-left: calc( .075 * var( --icon-width ) );
}

div#hour dl.astro-temp aside.temp span:first-of-type {
    display: inline-block;
    width: var( --astro-temp-width );
    border-bottom: var( --border );
}

div#hour div.astro-cloud {
    display: inline-block;
    width: var( --astro-cloud-width );
    vertical-align: top;
}

div#hour div.hour-details div.cloud {
    display: inline-block;
}

div#hour div.hour-details div.clouds {
    display: inline-block;
    width: var( --clouds-width );
    text-align: center;
    border-right: var( --border );
}

div#hour div.hour-details div.humidity-wrapper {
    position: relative;
    display: inline-block;
    width: var( --humidity-width );
    left: calc( .175 * var( --icon-width ) );
    text-align: center;
}

div#hour div.hour-details div.humidity-wrapper span.humidity-text {
    display: inline-block;
}

div#hour div.hour-details div.humidity-wrapper img {
    position: relative;
    bottom: calc( .075 * var( --icon-width) );
    transform: scale(.75) translate( calc( -.2 * var( --icon-width ) ), calc( .05 * var(--icon-width) ) );
    vertical-align: middle;
}

div#hour div.hour-wind {
    width: var( --astro-cloud-width );
    border-top: var( --border );
}

div#hour div.hour-wind div.wind-wrapper {
    display: inline-block;
    padding: calc( .045 * var( --icon-width ) ) 0;
    width: var( --clouds-width );
    border-right: var( --border );
    text-align: center;
}

div#hour div.wind-wrapper span.wind-text {
    display: inline-block;
    width: calc( 3 * var(--icon-width) );
    text-align: center;
}

div#hour span.subscript {
    font-size: .6em;
    vertical-align: sub;
}

div#hour div.table-view-icon {
    display: inline-block;
    width: var( --humidity-width );
    text-align: center;
}

@media screen and ( orientation: landscape ) and ( min-width: 992px ) {
    div#hour {
        --tile-width: calc( 96vw / 3 );
    }
}