div#day {
    --tile-width: 96vw;
    --main-icon-width: calc( calc( .23455 * var(--tile-width) ) + calc( .2 * var( --cubit ) ) );
    --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: calc( var( --main-icon-width ) + var( --border-width ) );
    --right-box-width: calc( var( --tile-width ) - var( --left-box-width ) );
    --astro-temp-width: calc( 2.25 * var( --icon-width ) );
    --astro-cloud-width: calc( var( --right-box-width ) - calc( var( --astro-temp-width ) + var( --border-width ) ) );
    --clouds-width: calc( 5.15 * 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#day div.day-info-wrapper {
    background-color: rgba( var( --cgn6 ), .4 );
}

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

div#day 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#day > div:nth-of-type(2n) h4 {
    background-color: rgba( var( --cgn0 ), .1);
}

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

div#day div.day-tile div.icon-wrapper {
    display: inline-block;
    width: var( --main-icon-width) ;
    height: calc( calc( .9825 * var(--main-icon-width) ) + calc( 2* var( --border-width ) ) );
    border-right: var( --border );
    vertical-align: top;
}

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

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

div#day div.day-tile div.day-details div.upper-rows {
    display: inline-block;
    border-bottom: var( --border );
    vertical-align: top;
}

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

div#day aside.temp {
    display: inline-block;
}

div#day aside.temp svg.thermostat rect.cover,
div#day aside.temp svg.thermostat g.measure {
    stroke: lightgray;
    stroke-width: 2px;
}

div#day dl.astro-temp {
    display: inline-block;
    width: var( --astro-temp-width );
    border-right: var(--border);
    vertical-align: top;
    list-style: none;
}

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

div#day div.day-details dl.sunrise dt.astro-icon img,
div#day div.day-details div.clouds img,
div#day div.day-details div.humidity-wrapper img {
    width: var( --icon-width );
    height: var( --icon-width );
}


div#day div.day-details div.wind-wrapper img,
div#day div.moon-phase img,
div#day div.table-view-icon img ,
div#day div.hour-filter svg {
    width: calc( .8 * var( --icon-width ) );
    height: calc( .8 * var( --icon-width ) );
}

div#day div.day-details dt.astro-icon img {
    width: calc( .7 * var( --icon-width ) );
    height: var( --icon-width );
}

div#day dl.astro-temp dt.temp-icon {
    vertical-align: middle;
}

div#day dl.astro-temp span.astro-wrap,
div#day dl.astro-temp span.temp-wrap {
    display: inline-block;
    width: 100%;
    border-bottom: var( --border );
}

div#day dl.astro-temp dt {
    display: inline-block;
}

div#day dl.astro-temp dt.temp-icon + dd {
    width: calc( var( --astro-temp-width ) - calc( .9 * var( --icon-width ) ) );
    vertical-align: middle;
    text-align: right;
}


div#day dl.astro-temp dt.temp-icon > img {
    width: calc( .7 * var( --icon-width ) );
}

div#day dl.astro-temp dd {
    display: inline-block;
}

div#day dl.sunrise {
    display: inline-block;
    width: 100%;
    vertical-align: top;
    border-bottom: var( --border );
}

div#day dl.sunrise dt.astro-icon img {
    position: relative;
    bottom: calc( .175 * var( --icon-width ) );
}

div#day div.astro-cloud {
    display: inline-block;
    width: var( --astro-cloud-width );
}

div#day dl.sunrise span.astro-wrap {
    display: inline-block;
    width: calc( 3.6 * var( --icon-width ) );
    border-right: var( --border );
}

div#day dl.sunrise dt,
div#day dl.sunrise dd {
    display: inline-block;
    vertical-align: middle;
}

div#day dl.sunrise dt {
    margin-left: calc( .1 * var( --icon-width ) );
}

div#day dl.sunrise dd {
    width: calc( 2.4 * var( --icon-width ) );
    text-align: right;
}

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

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

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

div#day div.day-details div.humidity-wrapper span.humidity-text {
    display: inline-block;
    vertical-align: middle;
}

div#day div.day-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#day div.day-details div.wind-wrapper,
div#day div.day-details div.moon-phase,
div#day div.day-details div.table-view-icon,
div#day div.day-details div.hour-filter {
    display: inline-block;
    height: var( --icon-width );
    border-right: var( --border );
    vertical-align: middle;
 }

 div#day div.day-details div.hour-filter {
    border-right: none;
    text-align: center;
 }

div#day div.day-details div.wind-wrapper {
    --icon-box: calc( 1.35 * calc( var( --icon-width ) + var( --border-width) ) );
    --boxes-width: calc( 3 * var(--icon-box) );
    --padding-left: calc( .2 * var( --icon-width) );
    padding-left: var( --padding-left );
    width: calc( var( --right-box-width ) - calc( var( --boxes-width ) + var( --padding-left ) ) );
    text-align: left;
}

div#day div.day-details div.wind-wrapper img {
    vertical-align: middle;
}

div#day div.day-details div.wind-wrapper span.wind-text {
    display: inline-block;
    width: calc( 3.225 * var(--icon-width) );
    vertical-align: middle;
    text-align: center;
}

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

 div#day div.day-details div.moon-phase,
 div#day div.day-details div.table-view-icon,
 div#day div.day-details div.hour-filter {
    width: calc( 1.35 * var( --icon-width ) );
    text-align: center;
 }

div#day div.day-details div.wind-wrapper img,
div#day div.day-details div.wind-wrapper span.wind-text,
div#day div.day-details div.moon-phase img,
div#day div.day-details div.table-view-icon img,
div#day div.day-details div.hour-filter svg {
    position: relative;
    top: calc( .1 * var( --icon-width ) );
 }

 div#weatherPage > div#day svg.hourly-icon > .clock-face {
    stroke: var( --cg6 );
    fill: var( --c4 );
 } 
 
 div#weatherPage > div#day svg.hourly-icon > .jewel,
 div#weatherPage > div#day svg.hourly-icon > .clock-hand {
    fill: var( --cg6 );
 }

 div#weatherPage.dayIndex0 >  div#day > div.dayIndex0 div.hour-filter svg.hourly-icon > .clock-face,
 div#weatherPage.dayIndex1 >  div#day > div.dayIndex1 div.hour-filter svg.hourly-icon > .clock-face,
 div#weatherPage.dayIndex2 >  div#day > div.dayIndex2 div.hour-filter svg.hourly-icon > .clock-face,
 div#weatherPage.dayIndex3 >  div#day > div.dayIndex3 div.hour-filter svg.hourly-icon > .clock-face,
 div#weatherPage.dayIndex4 >  div#day > div.dayIndex4 div.hour-filter svg.hourly-icon > .clock-face,
 div#weatherPage.dayIndex5 >  div#day > div.dayIndex5 div.hour-filter svg.hourly-icon > .clock-face,
 div#weatherPage.dayIndex6 >  div#day > div.dayIndex6 div.hour-filter svg.hourly-icon > .clock-face,
 div#weatherPage.dayIndex7 >  div#day > div.dayIndex7 div.hour-filter svg.hourly-icon > .clock-face,
 div#weatherPage.dayIndex8 >  div#day > div.dayIndex8 div.hour-filter svg.hourly-icon > .clock-face,
 div#weatherPage.dayIndex9 >  div#day > div.dayIndex9 div.hour-filter svg.hourly-icon > .clock-face,
 div#weatherPage.dayIndex10 > div#day > div.dayIndex10 div.hour-filter svg.hourly-icon > .clock-face,
 div#weatherPage.dayIndex11 > div#day > div.dayIndex11 div.hour-filter svg.hourly-icon > .clock-face,
 div#weatherPage.dayIndex12 > div#day > div.dayIndex12 div.hour-filter svg.hourly-icon > .clock-face,
 div#weatherPage.dayIndex13 > div#day > div.dayIndex13 div.hour-filter  svg.hourly-icon > .clock-face {
    stroke: var( --cg1 );
    fill: var( --cg6 );
 }

 div#weatherPage.dayIndex0 >  div#day > div.dayIndex0 div.hour-filter svg.hourly-icon > .jewel,
 div#weatherPage.dayIndex1 >  div#day > div.dayIndex1 div.hour-filter svg.hourly-icon > .jewel,
 div#weatherPage.dayIndex2 >  div#day > div.dayIndex2 div.hour-filter svg.hourly-icon > .jewel,
 div#weatherPage.dayIndex3 >  div#day > div.dayIndex3 div.hour-filter svg.hourly-icon > .jewel,
 div#weatherPage.dayIndex4 >  div#day > div.dayIndex4 div.hour-filter svg.hourly-icon > .jewel,
 div#weatherPage.dayIndex5 >  div#day > div.dayIndex5 div.hour-filter svg.hourly-icon > .jewel,
 div#weatherPage.dayIndex6 >  div#day > div.dayIndex6 div.hour-filter svg.hourly-icon > .jewel,
 div#weatherPage.dayIndex7 >  div#day > div.dayIndex7 div.hour-filter svg.hourly-icon > .jewel,
 div#weatherPage.dayIndex8 >  div#day > div.dayIndex8 div.hour-filter svg.hourly-icon > .jewel,
 div#weatherPage.dayIndex9 >  div#day > div.dayIndex9 div.hour-filter svg.hourly-icon > .jewel,
 div#weatherPage.dayIndex10 > div#day > div.dayIndex10 div.hour-filter svg.hourly-icon > .jewel,
 div#weatherPage.dayIndex11 > div#day > div.dayIndex11 div.hour-filter svg.hourly-icon > .jewel,
 div#weatherPage.dayIndex12 > div#day > div.dayIndex12 div.hour-filter svg.hourly-icon > .jewel,
 div#weatherPage.dayIndex13 > div#day > div.dayIndex13 div.hour-filter  svg.hourly-icon > .jewel,
  div#weatherPage.dayIndex0 >  div#day > div.dayIndex0 div.hour-filter svg.hourly-icon > .clock-hand,
 div#weatherPage.dayIndex1 >  div#day > div.dayIndex1 div.hour-filter svg.hourly-icon > .clock-hand,
 div#weatherPage.dayIndex2 >  div#day > div.dayIndex2 div.hour-filter svg.hourly-icon > .clock-hand,
 div#weatherPage.dayIndex3 >  div#day > div.dayIndex3 div.hour-filter svg.hourly-icon > .clock-hand,
 div#weatherPage.dayIndex4 >  div#day > div.dayIndex4 div.hour-filter svg.hourly-icon > .clock-hand,
 div#weatherPage.dayIndex5 >  div#day > div.dayIndex5 div.hour-filter svg.hourly-icon > .clock-hand,
 div#weatherPage.dayIndex6 >  div#day > div.dayIndex6 div.hour-filter svg.hourly-icon > .clock-hand,
 div#weatherPage.dayIndex7 >  div#day > div.dayIndex7 div.hour-filter svg.hourly-icon > .clock-hand,
 div#weatherPage.dayIndex8 >  div#day > div.dayIndex8 div.hour-filter svg.hourly-icon > .clock-hand,
 div#weatherPage.dayIndex9 >  div#day > div.dayIndex9 div.hour-filter svg.hourly-icon > .clock-hand,
 div#weatherPage.dayIndex10 > div#day > div.dayIndex10 div.hour-filter svg.hourly-icon > .clock-hand,
 div#weatherPage.dayIndex11 > div#day > div.dayIndex11 div.hour-filter svg.hourly-icon > .clock-hand,
 div#weatherPage.dayIndex12 > div#day > div.dayIndex12 div.hour-filter svg.hourly-icon > .clock-hand,
 div#weatherPage.dayIndex13 > div#day > div.dayIndex13 div.hour-filter  svg.hourly-icon > .clock-hand {
   fill: var( --c4 );
 }

 div#weatherPage.dayIndex0 >  div#day > div.dayIndex0 div.hour-filter,
 div#weatherPage.dayIndex1 >  div#day > div.dayIndex1 div.hour-filter,
 div#weatherPage.dayIndex2 >  div#day > div.dayIndex2 div.hour-filter,
 div#weatherPage.dayIndex3 >  div#day > div.dayIndex3 div.hour-filter,
 div#weatherPage.dayIndex4 >  div#day > div.dayIndex4 div.hour-filter,
 div#weatherPage.dayIndex5 >  div#day > div.dayIndex5 div.hour-filter,
 div#weatherPage.dayIndex6 >  div#day > div.dayIndex6 div.hour-filter,
 div#weatherPage.dayIndex7 >  div#day > div.dayIndex7 div.hour-filter,
 div#weatherPage.dayIndex8 >  div#day > div.dayIndex8 div.hour-filter,
 div#weatherPage.dayIndex9 >  div#day > div.dayIndex9 div.hour-filter,
 div#weatherPage.dayIndex10 > div#day > div.dayIndex10 div.hour-filter,
 div#weatherPage.dayIndex11 > div#day > div.dayIndex11 div.hour-filter,
 div#weatherPage.dayIndex12 > div#day > div.dayIndex12 div.hour-filter,
 div#weatherPage.dayIndex13 > div#day > div.dayIndex13 div.hour-filter {
    background-color: var( --c4 );
 }


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