/*##########################################*/
/* FORECAST MATRIX */

div.dv0forc { float:left; position: relative; margin: 0 auto; padding: 0 0; width:100%; height: 500px; }
div.dv0forc:before, div.dv0forc:after { content: ""; display: table; }
div.dv0forc:after { clear: both; }
div.dv0forc { background:#0a5943; opacity:1.0; border-radius: 0.5rem;
 box-shadow: inset 0 1.5px 4px rgba(255, 255, 255, 0.25), inset 0 1.5px 6px rgba(255, 255, 255, 0.25);
 margin: 20px auto; min-height: 200px; overflow: hidden;
}
div.dv1forc { color:#f1f8f9; font-weight: bold; font-size: 14px; padding: 1rem; text-align: center; overflow: hidden; }
div.dv1forc { width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
div.dv2forc:before, div.dv2forc:after { content: ""; display: table; }
div.dv2forc:after { clear: both; }
div.dv4forc { float: left; display: block; margin-bottom: 0px; vertical-align: top; padding: 0px; }
div.dv4forc.dv3forc { width: 33.33%; }
div.dv4forc.dv8forc { width: 20%; opacity: 0; }
div.dv5forc { height: 200px; line-height: 200px; display:flex; }
div.dv6forc { height:40px; display: flex; align-items:center; }
div.dv7forc { color: #f1f8f9; font-size: 14px; font-weight: 700; text-align: center; }
div.dv8forc { border-right: 0px solid #aaaaaa; z-index:2; position: relative; }
div.dv8forc:hover { cursor:pointer; }
div.dv8forc:last-child { border: none; }
div.dv8forc:nth-child(1) { animation-delay: 0.2s; }
div.dv8forc:nth-child(2) { animation-delay: 0.4s; }
div.dv8forc:nth-child(3) { animation-delay: 0.6s; }
div.dv8forc:nth-child(4) { animation-delay: 0.8s; }
div.dv8forc:nth-child(5) { animation-delay: 1s; }
div.dv9forc { color: #f1f8f9; float:left; position: relative; margin: 0 auto; padding: 0 0; width:100%; height: 500px; }
div.dv9forc { background:#0a5943; opacity:1.0; border-radius: 0.5rem;
 box-shadow: inset 0 1.5px 4px rgba(255, 255, 255, 0.25), inset 0 1.5px 6px rgba(255, 255, 255, 0.25);
 margin: 20px auto; min-height: 200px; overflow: auto;
}
div.dayforc { color: #f1f8f9; border: solid #aaaaaa; border-width: 2px 0px; padding: 3px; }
div.wicforc, div.winforc { margin: 1rem 0; }
div.wicforc { font-size: 2.5rem; }
span.sp0forc { color:#f1f8f9; font-size: 15px; font-weight: bold; width: 100%;
              text-overflow: ellipsis; display: inline-block; vertical-align: middle; line-height: 18px; margin:auto;
}
span.sp1forc { margin:auto; font-size: 14px; font-weight: bold; }
span.sp2forc { color: #f1f8f9; text-align: center; font-size: 14px; font-weight: bold; margin: auto;}
img.im0forc { width: 35px; display: block; margin-top: auto; margin-bottom: auto; }
img.im1forc { width: 25px; vertical-align: middle; }
img.im2forc { width: 25px; vertical-align: middle; }
img.im2forc:hover { cursor:pointer; }
table.tb0forc { width:70%; margin:20px auto; }
@media screen and (max-device-width: 900px){
 table.tb0forc { width:100%; margin:auto; }
}
table.tb1forc { border-collapse: collapse; border-spacing: 0px; width: 100%; position:sticky; top:0px; background: #0a5943;
 height: 30px; z-index:2; border-radius: 0.5rem 0.5rem 0px 0px;
 box-shadow: inset 0 1.5px 4px rgba(255, 255, 255, 0.25), inset 0 1.5px 6px rgba(255, 255, 255, 0.25);
}
table.tb2forc { z-index:1; border-collapse: collapse; border-spacing: 0px; width: 100%; border-radius: 0.5rem; animation-delay: 0.2s; opacity: 0; }
tr.tr0forc { border-bottom: 2px solid #aaaaaa; }
td.td0forc { width:20%; background:#04372a; opacity:1.0; }
td.td1forc { width:60%; background:#04372a; opacity:1.0; z-index:1; }
td.td2forc { width:17%; text-align: center; padding: 0px; margin: auto; }
td.td3forc { width:16%; text-align: center; padding: 0px; margin: auto; }
td.td4forc { width:20%; background:#04372a; opacity:1.0; z-index:1; }

@media screen and (min-device-width: 802px) {
 p.p01forc { color: #f1f8f9; font-size: 14px; font-weight: bold; margin: auto; }
 p.p02forc { color: #f1f8f9; font-size: 13px; font-weight: bold; margin: auto; }
}
@media screen and (max-device-width: 801px) {
 p.p01forc { color: #f1f8f9; font-size: 10px; font-weight: bold; margin: auto; }
 p.p02forc { color: #f1f8f9; font-size: 10px; font-weight: bold; margin: auto; }
}
select.sl0forc { width: 100%; padding: 12px 20px; margin: 4px 0; display: block; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; text-align: center; font-size: 12px; font-weight: bold; }
label.lb0forc { display: block; padding: 8px 20px; color: #f1f8f9; text-align: center; font-size: 14px; font-weight: bold; margin: auto; }

div.curr-weather { font-size: 4rem; }
i.wi { margin:auto; }

#sortable { list-style-type: none; margin: 0; padding: 0; width: 100%; }

/* Keyframes */
@keyframes fadeInUp {
 0% { opacity: 0; transform: translate3d(0, 100%, 0); }
 100% { opacity: 1; transform: none; }
}
.fadeInUp { animation-name: fadeInUp; animation-duration: 1s; animation-fill-mode: both; }

@keyframes fadeIn {
  0% { transform: scale(0.8); }
  100% { opacity: 1; transform: scale(1); }
}
.fadeIn, div.dv4forc.dv8forc, table.tb2forc { animation-name: fadeIn; animation-duration: 1s; animation-fill-mode: both; }
/*##########################################*/