body {
    background: #777;
    font-family: helvetica,arial,sans-serif;
    padding: 7px;
    overflow-x: hidden
}

.col-lg-4 {
    width: 32.8%
}

.box {
    border: 1px solid rgba(255,255,255,0.6);
    padding: 0;
    background: #000;
    margin: 3px
}

.innerTitle {
    font-weight: 500;
    text-transform: uppercase;
    border-bottom: 3px solid rgba(51,238,255,0.45);
    display: block;
    padding: 11px 0 7px 0;
    text-align: center;
    margin: 0 auto 14px auto;
    min-height: 43px
}

.innerTitleSide {
    font-weight: 500;
    font-size: 1.9em;
    text-transform: uppercase;
    display: block;
    padding: 7px 0;
    text-align: center;
    margin: 0 auto 0 auto
}

h1 {
    font-size: 2.8em;
    color: #fff;
    margin: 7px 0
}

h2 {
    font-size: 2.2em
}

h3 {
    font-size: 2.3em;
    margin-top: 7px
}

h4 {
    font-size: 1.5em
}

h5 {
    font-size: 1.2em
}

.mainCtn {
    width: 100%;
    text-align: center;
    background: #777;
    padding: 0 21px;
    color: #fff;
    box-shadow: 0 8px 10px 0 rgba(0,0,0,0.20)
}

.row1Col3 {
    min-height: 515px
}

.row2Col3 {
    min-height: 575px
}

.sideBox {
    border-top: 0;
    background: none !important;
    border-bottom: none !important;
    border-left: none !important;
    border-right: none !important;
    margin: 0 auto;
    padding: 4px 0
}

.outline {
    border: 1px solid #fff
}

.ddbX {
    text-align: right;
    display: inline-block;
    margin-right: 7px;
    font-size: 1.3em !important;
    min-width: 170px
}

.db {
    width: 150px;
    text-align: left;
    display: inline-block
}

table.outer {
    margin: 3px auto 3px auto;
    border-color: #515772;
    border-collapse: collapse;
    font: 21px helvetica,arial,sans-serif;
    font-weight: 500;
    text-align: left;
    width: 100%;
    height: 100%
}

.unit {
    text-transform: none !important
}

table.inner {
    margin: 3px auto 3px auto;
    border-style: none;
    font: 16px verdana,arial,sans-serif;
    border-collapse: collapse
}

.section {
    margin: 0 0 14px 0
}

.windGraphics {
    margin-top: 21px
}

.windRanges {
    text-align: left
}

.humInfo {
    margin: 0 auto;
    display: block
}

.al {
    text-align: left
}

.br {
    border-right: 1px solid rgba(155,155,155,0.2)
}

.bb {
    margin-bottom: 14px
}

.row p, .row span {
    font-size: 21px
}

.im span {
    font-size: 1em
}

.info p {
    font-size: 1em
}

.btb {
    border-top: 1px solid #515772;
    border-bottom: 1px solid #515772
}

.di {
    display: inline
}

.ib {
    display: inline-block
}

.fl {
    float: left
}

.np {
    padding: 0
}

.nb {
    border: none !important
}

.vam {
    vertical-align: middle !important
}

.pd {
    padding: 7px
}

.bpd {
    padding: 14px 7px;
    background: #121215
}

.tc {
    text-align: center
}

.bd {
    margin-left: 3px;
    margin-right: 7px;
    font-weight: 600
}

.rainCtn {
    margin: 7px auto;
    vertical-align: middle;
    padding: 2px 0
}

    .rainCtn span {
        font-size: 2em
    }

.otherCtn {
    margin: 7px auto;
    vertical-align: middle;
    border-bottom: 1px solid #222;
    padding: 2px 0
}

.rain {
    margin-right: 7px;
    float: left
}

.inner td {
    border: 0
}

.high {
    color: #ff3f3f;
    font-weight: bold;
    display: inline-block;
    text-align: left;
    margin-right: 7px
}

.highHum {
    color: #ff3f3f;
    font-weight: bold;
    display: inline-block;
    text-align: left;
    margin-right: 7px
}

.low {
    color: #3fd3fd;
    font-weight: bold;
    display: inline-block;
    text-align: left;
    margin-right: 7px
}

.lowHum {
    color: #3fd3fd;
    font-weight: bold;
    display: inline-block;
    text-align: left;
    margin-right: 7px
}

.hiLoNeutral {
    display: inline-block;
    text-align: left;
    margin-right: 7px
}

.hiLoNeutralHum {
    display: inline-block;
    text-align: left;
    margin-right: 7px
}

.labels {
    display: inline-block;
    font-weight: bold;
    color: #fff;
    min-width: 18px;
    margin-right: 3px
}

.hiLo {
    margin: 0 auto 7px auto;
    display: block
}

    .hiLo p, .hiLo span, .high, .low {
        font-size: 28px !important
    }

.hiRed {
    color: #ff3f3f;
    background: #000;
    font-size: 14px;
    display: inline-block
}

.loBlue {
    color: #3fd3fd;
    background: #000;
    font-size: 14px;
    display: inline-block
}

.hiLoWhite {
    color: #bbb;
    background: #000;
    font-size: 14px;
    display: inline-block
}

p {
    display: inline
}

.title {
    font: 22px verdana,arial,sans-serif;
    font-weight: 600
}

.small {
    font: 14px verdana,arial,sans-serif
}

.c {
    color: #3fbffd;
    font-size: 3.5em !important;
    font-weight: normal
}

.c2 {
    font-size: 2em !important
}

.cSmall {
    color: #3fbffd;
    font-size: 3em !important;
    display: inline-block;
    margin: 0 4px
}

#gustInfo, #cdir {
    font-size: 1.5em
}

.va {
    vertical-align: middle;
    font-size: 28px !important
}

.ib {
    display: inline-block
}

.cm {
    font-size: 21px
}

#h3 {
    margin-bottom: 14px
}

.CamButton {
    color: black;
    width: 100px
        
}

@media(min-width:1920px) {
    .row1Col3 {
        min-height: 457px
    }

    .c {
        font-size: 75px !important
    }

    #lblTemp {
        font-size: 90px !important
    }

    #cSpeed, #cDir {
        font-size: 75px !important
    }

    .c2 {
        font-size: 1.2em !important
    }

    .cSmall {
        font-size: 2em !important
    }

    .ddbX {
        font-size: 1.2em !important
    }

    .row2Col3 {
        min-height: 422px
    }

    #gustInfo, #cdir {
        font-size: 1.2em
    }

    .footerCtn .row {
        margin: 10px 0
    }

    #lblCurrentTime {
        font-size: 29px
    }
}
@media(max-width:4000px) { /*was 1919px jk 1/16/25*/
    .row1Col3 {
        min-height: 305px
    }

    .row2Col3 {
        min-height: 295px
    }

    h1 {
        font-size: 29px;
        margin: 4px 0
    }

    h2 {
        font-size: 23px
    }

    h3 {
        font-size: 22px !important
    }

    h4 {
        font-size: 21px
    }

    p {
        margin: 0
    }

    .row p {
        font-size: 18px
    }

    .innerTitle {
        padding: 7px 0 0 0;
        min-height: 39px;
        margin: 0 auto 7px auto
    }

    .cSmall {
        font-size: 27px !important
    }

    .c {
        font-size: 41px !important
    }

    #lblTemp {
        font-size: 60px !important
    }

    #cSpeed, #cDir {
        font-size: 42px !important
    }

    .ddbX {
        font-size: 24px !important
    }

    .c2 {
        font-size: 24px !important
    }

    .hiLo {
        margin-bottom: 3px
    }

        .hiLo p, .hiLo span, .high, .low {
            font-size: 21px !important
        }

    .rainCtn {
        margin: 0 auto;
        padding: 0
    }

        .rainCtn span {
            font-size: 20px
        }

    .info p {
        font-size: 18px
    }

    #wind_canvas {
        width: 35%;
        max-width: 155px
    }

    #pressure_canvas {
        width: 65%;
        max-width: 320px
    }

    .sideBox {
        padding: 0
    }

    #gustInfo {
        margin-top: -16px
    }

    .footerCtn .row {
        margin: 3px 0
    }

    .bd {
        font-size: 18px !important
    }

    #lblCurrentTime {
        font-size: 21px
    }
}

@media(max-width:1300px) {
    .windRanges {
        padding: 0 0 0 28px
    }

    .small {
        font-size: 11px !important
    }
}

@media(max-width:1200px) {
    .col-lg-4 {
        width: 49.4%
    }

    .row1Col3 {
        min-height: 375px
    }

    .row2Col2 {
        min-height: 315px
    }

    .row3Col2 {
        min-height: 401px
    }

    #cSpeed, #cDir {
        font-size: 45px !important
    }

    #lblTemp, #lblHumidity, #lblPressure {
        font-size: 45px !important
    }
}

@media(max-width:1100px) {
    #pressure_canvas {
        margin-left: -26px
    }

    .ddbX {
        min-width: 144px;
        text-align: right;
        margin-right: 0;
        margin-bottom: 7px
    }

    .db {
        width: 210px;
        text-align: left
    }
}

@media(max-width:1200px) {
    .col-lg-4 {
        width: 49.2%
    }
}

@media(max-width:991px) {
    .mainCtn {
        max-width: 100%;
        width: 100%
    }

    .br {
        border: 0
    }

    .heatIndexCtn {
        margin-top: 0
    }

    .windGraphics {
        margin-top: 0
    }

    .windRanges {
        padding: 0 0 0 78px
    }

    #therm_canvas {
        display: none;
        height: 0;
        width: 0
    }

    .humInfo {
        text-align: center
    }

    .c {
        display: inline-block;
        margin-top: 7px
    }

    #cdir {
        margin-bottom: 21px
    }

    .windRanges {
        text-align: center;
        margin-bottom: 14px
    }

    #h3, #l3 {
        display: inline-block
    }

    .solarCtn {
        margin-top: 21px
    }

    .locInfo {
        margin-bottom: 14px
    }

    .db {
        width: 150px
    }
     

    @media(max-width:880px) {
        .col-lg-4 {
            width: 49.1%
        }
    }

    @media(max-width:768px) {
        .col-lg-4 {
            width: 98%
        }

        .c, #cSpeed, #cDir, #lblTemp, #lblHumidity, #lblPressure {
            font-size: 42px !important
        }

        .mainCtn {
            padding: 0 14px
        }

        .row1Col3, .row2Col3, .row1Col2, .row2Col2, .row3Col2 {
            min-height: 100%
        }

        .box {
            margin-bottom: 7px
        }

        .db {
            width: 200px
        }

        .tempInfo {
            text-align: center;
            max-width: 100%
        }

        .humCtn {
            margin-bottom: 14px
        }

        .humInfo {
            padding-bottom: 14px
        }

        .sideBox {
            margin: 0
        }

        #therm_canvas {
            display: none;
            width: 0;
            height: 0
        }

        .outer {
            font-size: 21px !important
        }

        .br {
            border: 0
        }

        .inner td, p.c {
            font-size: 25px !important
        }

        td {
            display: block !important;
            text-align: center;
            padding: 6px 0
        }

        .single {
            padding: 14px 0
        }

        .hi, .low {
            display: inline-block
        }

        .rain {
            margin-right: 7px
        }

        .noMobile {
            display: none
        }

        .cm {
            text-align: center !important
        }

        .im {
            display: inline-block
        }

        .ib {
            margin: 4px 0
        }

        .hiLo {
            max-width: 430px;
            margin-bottom: 14px
        }

        .windRanges {
            padding: 0
        }
    }

    @media(max-width:590px) {
        .col-xs-6 {
            width: 100% !important
        }

        #pressure_canvas {
            width: 88%
        }

        .al {
            text-align: center
        }

        .humInfo {
            max-width: 100%;
            padding-bottom: 14px
        }

        body {
            border: 0
        }
    }

    @media(max-width:460px) {
        .main {
            max-width: 100%;
            width: 100%;
            border-radius: 0;
            margin: 0
        }
    }
    
    .vertical-align {
        display: flex;
        align-items: center;
    }
    .border-light {
        border: 4px dotted #000;
    }
  


}