/*----------------------------------------------------------
The base color for this template is #5c87b2. If you'd like
to use a different color start by replacing all instances of
#5c87b2 with your new color.
----------------------------------------------------------*/
body {
   /* background-color: #5c87b2;*/
    font-size: .85em;
    font-family: Comfortaa, "Trebuchet MS", Verdana, Helvetica, Sans-Serif;
    margin: 0;
    padding: 0;
    color: #696969;
}

a img
{
    border:0
    }

a:link {
    color: #034af3;
    text-decoration: underline;
}

a:visited {
    color: #505abc;
}

a:hover {
    color: #1d60ff;
    text-decoration: none;
}

a:active {
    color: #12eb87;
}

p, ul {
    margin-bottom: 20px;
    line-height: 1.6em;
}

header,
footer,
nav,
section {
    display: block;
}

/* HEADINGS   
----------------------------------------------------------*/
h1, h2, h3, h4, h5, h6 {
    font-size: 1.5em;
    color: #696969;
}

h1 {
    font-size: 2em;
    padding-bottom: 0;
    margin-bottom: 0;
}

h2 {
    padding: 0 0 0 0;
    margin:0 0 5px 0;
}

h3 {
    font-size: 1.2em;
}

h4 {
    font-size: 1.1em;
}

h5, h6 {
    font-size: 1em;
}

/* PRIMARY LAYOUT ELEMENTS   
----------------------------------------------------------*/

/* you can specify a greater or lesser percentage for the 
page width. Or, you can specify an exact pixel width. */
.page 
{
    margin: 0 20px;
    max-width:970px;
    /*width: 90%;
    margin-left: auto;
    margin-right: auto;*/

}

header, #header {
    position: relative;
    margin-bottom: 0px;
    color: #000;
    padding: 0;
}

header h1, #header h1 {
    font-weight: bold;
    padding: 5px 0;
    margin: 0;
    border: none;
    line-height: 2em;
    font-size: 32px !important;
/*    text-shadow: 1px 1px 2px #111;*/
}

#main {
    padding: 30px 30px 15px 30px;
    background-color: #fff;
    border-radius: 4px 0 0 0;
    -webkit-border-radius: 4px 0 0 0;
    -moz-border-radius: 4px 0 0 0;
    min-height: 400px;
    overflow:hidden;
    position:relative;
}

footer, 
#footer {
    background-color: #fff;
    color: #999;
    line-height: normal;
    margin: 0 0 30px 0;
    font-size: .9em;
    border-radius: 0 0 4px 4px;
    -webkit-border-radius: 0 0 4px 4px;
    -moz-border-radius: 0 0 4px 4px;
    padding:25px 0 0 43px;
}

footer img
{
    padding-left:40px;
    margin-bottom:30px;
    }

.langSelector {
    width:auto; height:auto; padding-bottom:10px;
}




/* Styles for editor and display helpers
----------------------------------------------------------*/
.display-label, 
.editor-label {
    margin: 1em 0 0 0;
}

.display-field, 
.editor-field {
    margin: 0.5em 0 0 0;
}

.text-box {
    width: 30em;
}

.text-box.multi-line {
    height: 6.5em;
}

.tri-state {
    width: 6em;
}
.status-panel
{
    position:relative;
    display:flex;
    flex-direction:column;
}
.home-stack
{
    display:flex;
    flex-direction:column;
    gap:24px;
}
.content-panel
{
    width:100%;
    border:1px solid #e0e5ea;
    border-radius:24px;
    background:linear-gradient(180deg, #fafcfd 0%, #f2f5f8 100%);
    box-shadow:0 10px 28px rgba(26, 37, 48, 0.06);
    padding:22px 24px;
    box-sizing:border-box;
    -moz-box-sizing:border-box;
}
.content-panel h2
{
    margin-bottom:16px;
}
#weatherInfo
{
    display:none;
}
#weatherInfo ul
{
    list-style-type:none;
    margin:0;
    padding:0;
    width:100%;
}

#weatherInfo ul li
{
    display:grid;
    grid-template-columns:minmax(88px, 108px) minmax(0, 1fr) minmax(94px, 120px) minmax(82px, 110px);
    align-items:center;
    gap:16px;
    padding:16px 18px;
}

#weatherInfo ul li img
{
    width:42px;
    height:42px;
}

#weatherInfo ul > li:first-child
{
    border-radius:18px 18px 0 0;
}
#weatherInfo ul > li:last-child
{
    border-radius:0 0 18px 18px;
}

#weatherInfo ul > li:nth-child(odd) { background-color:#f6f8fa; }

#weatherInfo ul > li:nth-child(even) { background-color:#dde4ea; }

.forecast-row-enter
{
    animation:forecastRowEnter 220ms ease-out;
}

@keyframes forecastRowEnter
{
    from
    {
        opacity:0;
        transform:translateY(8px);
    }
    to
    {
        opacity:1;
        transform:none;
    }
}

.forecast-time
{
    display:flex;
    flex-direction:column;
    gap:4px;
}
.forecast-day-label
{
    display:block;
    font-size:12px;
    line-height:1.1;
    text-transform:uppercase;
    letter-spacing:0.08em;
    color:#6d7985;
}
.forecast-hour-label
{
    font-size:24px;
    line-height:1;
}
.forecast-condition
{
    display:flex;
    align-items:center;
    gap:12px;
    min-width:0;
}
.forecast-precip
{
    display:block;
    font-size:23px;
    line-height:1.2;
}
.forecast-temp
{
    font-size:24px;
    line-height:1;
    text-align:right;
    white-space:nowrap;
}
.forecast-wind
{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:8px;
    color:#52606d;
    white-space:nowrap;
}
.forecast-wind-arrow
{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:28px;
    height:28px;
    border-radius:999px;
    background-color:rgba(255, 255, 255, 0.75);
    border:1px solid #ccd5dd;
    font-size:18px;
    line-height:1;
}
.forecast-wind-speed
{
    font-size:18px;
    line-height:1;
}
.forecast-load-more
{
    display:none;
    flex-direction:column;
    align-items:flex-start;
    gap:10px;
    margin-top:18px;
}
.forecast-load-more.is-visible
{
    display:flex;
}
.forecast-more-button
{
    display:none;
    align-items:center;
    justify-content:center;
    gap:10px;
    min-height:46px;
    padding:0 18px;
    border:1px solid #c9d7e5;
    border-radius:999px;
    background-color:#ffffff;
    color:#334250;
    transition:background-color 160ms ease, border-color 160ms ease, transform 160ms ease;
}
.forecast-more-button.is-visible
{
    display:inline-flex;
}
.forecast-more-button:hover
{
    background-color:#f7fafc;
    border-color:#b9c8d7;
}
.forecast-more-button:disabled
{
    cursor:wait;
    opacity:0.82;
}
.forecast-more-spinner
{
    display:none;
    width:16px;
    height:16px;
}
.forecast-more-button.is-loading .forecast-more-spinner
{
    display:inline-block;
}
.forecast-paging-status
{
    min-height:20px;
    font-size:14px;
    color:#5e6c79;
}
.forecast-paging-status.is-error
{
    color:#a31212;
}

.location-panel
{
    padding-bottom:20px;
}
.location-panel-header
{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:16px;
    margin-bottom:18px;
}
.location-panel-header h2
{
    margin-bottom:0;
}
#gmap
{
    display:none;
    margin-bottom:18px;
}
.location-details
{
    display:flex;
    flex-direction:column;
    gap:14px;
}
.location-place
{
    display:none;
    background-color:rgba(255, 255, 255, 0.8);
    border:1px solid #d7dfe6;
    border-radius:16px;
    padding:14px 16px;
}
.location-place.is-visible
{
    display:block;
}
.location-place-value
{
    display:block;
    font-size:19px;
    line-height:1.35;
    color:#334250;
}
.location-summary-grid
{
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:12px;
}
.location-summary-item
{
    background-color:rgba(255, 255, 255, 0.8);
    border:1px solid #d7dfe6;
    border-radius:16px;
    padding:14px 16px;
}
.location-summary-label
{
    display:block;
    font-size:13px;
    text-transform:uppercase;
    letter-spacing:0.08em;
    color:#5e6c79;
    margin-bottom:6px;
}
.location-summary-value
{
    display:block;
    font-size:24px;
    line-height:1.15;
    color:#334250;
}
.location-actions
{
    display:flex;
    flex-wrap:wrap;
    gap:12px;
}
.location-actions a
{
    display:inline-flex;
    align-items:center;
    min-height:42px;
    padding:0 16px;
    border-radius:999px;
    background-color:#ffffff;
    border:1px solid #c9d7e5;
    text-decoration:none;
}

#currentStatus
{
    width:100%;
    min-height:120px;
    font-size:clamp(72px, 13vw, 120px);
    line-height:0.95;
}
#currentStatusDetail
{
    font-size:clamp(20px, 3vw, 28px);
    width:100%;
    min-height:35px;
    margin-bottom:42px;
    max-width:760px;
}
.location-search-focus
{
    display:none;
    margin-bottom:24px;
}
.location-search-focus.is-visible
{
    display:block;
}
.location-search-focus #locationSearchPromotedSlot:empty
{
    display:none;
}
.location-search-focus .location-search-block
{
    margin-bottom:0;
}
#locationControls
{
    width:100%;
    max-width:none;
    margin-bottom:0;
}
.change-location-link
{
    display:inline-flex;
    align-items:center;
    min-height:42px;
    padding:0 16px;
    border:1px solid #c9d7e5;
    border-radius:999px;
    background-color:#ffffff;
    font-size:16px;
    margin-bottom:0;
    text-decoration:none;
}
#locationFormWrap
{
    display:none;
    border:1px solid #d5d5d5;
    border-radius:12px;
    background-color:rgba(255, 255, 255, 0.85);
    padding:16px;
}
.location-retry-wrap
{
    display:none;
    margin-bottom:14px;
}
.location-retry-button
{
    cursor:pointer;
}
.where-you-at
{
    margin-bottom:10px;
}
.location-search-block
{
    display:flex;
    flex-direction:column;
    gap:10px;
    margin-bottom:14px;
}
#locationSearchInlineSlot:empty
{
    display:none;
}
.location-search-field
{
    min-width:100%;
}
.location-search-input-row
{
    display:flex;
    align-items:stretch;
    gap:10px;
}
.location-search-input-row input
{
    flex:1 1 auto;
}
.place-search-help
{
    margin-top:6px;
    color:#5e6c79;
    font-size:13px;
}
.place-search-status
{
    min-height:18px;
    color:#5e6c79;
    font-size:13px;
}
.place-search-status.is-error
{
    color:#a31212;
}
.place-search-results
{
    display:flex;
    flex-direction:column;
    gap:8px;
}
.place-search-results:empty
{
    display:none;
}
.place-search-result
{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:4px;
    width:100%;
    padding:12px 14px;
    border:1px solid #d7dfe6;
    border-radius:12px;
    background-color:#ffffff;
    color:#334250;
    text-align:left;
}
.place-search-result:hover,
.place-search-result:focus
{
    background-color:#f6f9fc;
    border-color:#8caecc;
}
.place-search-result-title
{
    font-size:15px;
    line-height:1.35;
}
.place-search-result-meta
{
    color:#5e6c79;
    font-size:12px;
    line-height:1.25;
}
.location-form-divider
{
    margin:0 0 10px;
    color:#5e6c79;
    font-size:12px;
    text-transform:uppercase;
    letter-spacing:0.08em;
}
.location-form
{
    display:flex;
    flex-wrap:wrap;
    align-items:flex-end;
    gap:12px;
}
.location-form-field
{
    display:flex;
    flex-direction:column;
    flex:1 1 160px;
    min-width:140px;
}
.location-form-field.location-search-field
{
    flex:0 0 auto;
}
.location-form-field label
{
    margin-bottom:4px;
    font-size:13px;
}
.location-form-field input
{
    border:1px solid #bdbdbd;
    border-radius:6px;
    padding:6px 8px;
    color:#333;
    font-size:14px;
}
.location-form-actions
{
    display:flex;
    align-items:flex-end;
}
.location-validation
{
    margin-top:8px;
    min-height:18px;
    color:#a31212;
    font-size:13px;
}
.location-panel.is-search-promoted .location-panel-header
{
    margin-bottom:12px;
}
.location-panel.is-search-promoted #locationFormWrap
{
    background-color:rgba(255, 255, 255, 0.72);
}
.location-panel.is-search-promoted .where-you-at
{
    margin-bottom:8px;
    color:#5e6c79;
    font-size:1.15em;
}
.location-panel.is-search-promoted .location-form-divider
{
    margin-top:4px;
}
#bannerArea {
    width:100%;
    max-width:none;
    padding:0 0 20px 0;
    box-sizing:border-box;
    -moz-box-sizing:border-box;
    height:auto;
}
#spinner
{
    z-index:20;
    display:none;
    position:absolute;
    top:0;
    left:50%;
    margin:0;
    transform:translateX(-50%);
    width:84px;
    height:84px;
}
.social-media
{
    height:40px;
    padding-top: 10px;
    max-width:400px;
    }
.social-media-item
{
    float:left; width:100px
}
.social-media-item:last-child
{
    width:80px
}
.social-comments
{
    min-height:40px; max-width:400px
    }        
@media only screen and (max-width: 760px)
{
    #weatherInfo ul li
    {
        grid-template-columns:minmax(72px, 82px) minmax(0, 1fr) minmax(68px, 82px);
        gap:10px;
        padding:14px;
    }
    .forecast-hour-label,
    .forecast-temp
    {
        font-size:18px;
    }
    .forecast-precip
    {
        font-size:17px;
    }
    #weatherInfo ul li img
    {
        width:34px;
        height:34px;
    }
    .forecast-condition
    {
        gap:8px;
    }
    .forecast-wind
    {
        display:none;
    }
    .location-panel-header
    {
        flex-direction:column;
        align-items:flex-start;
    }
    .location-search-focus
    {
        margin-bottom:18px;
    }
    .location-search-input-row
    {
        flex-direction:column;
    }
    .forecast-load-more
    {
        align-items:stretch;
    }
    .forecast-more-button.is-visible
    {
        width:100%;
    }
}
@media only screen and (max-width: 430px)
{
    #weatherInfo ul li
    {
        grid-template-columns:1fr auto;
        grid-template-areas:
            "time temp"
            "condition condition";
    }
    .forecast-time
    {
        grid-area:time;
    }
    .forecast-condition
    {
        grid-area:condition;
    }
    .forecast-temp
    {
        grid-area:temp;
    }
    .location-summary-grid
    {
        grid-template-columns:1fr;
    }
}
@media only screen and (max-width: 385px)
{
    .page
    {
        -moz-box-sizing: border-box;

        -webkit-box-sizing: border-box;

        box-sizing: border-box;
        margin: 0 5px;

        }
    #main
    {
        padding-left:15px; padding-right:15px
        }
    #fb-root
    {
        display:none
        }
    footer, #footer
    {
        padding-left:15px
        }
    #currentStatusDetail
    {
        margin-bottom:32px
        }
    .content-panel
    {
        padding:18px 16px;
        border-radius:20px;
    }
    .location-form
    {
        display:block;
    }
    .location-form-actions
    {
        margin-top:10px;
    }
    .location-form-field
    {
        min-width:100%;
        margin-bottom:8px;
    }

    #spinner
    {
        width:70px;
        height:70px;
    }

}