:root {
--main-bg-color: #FFFAFA;
--main-brand-color: #0074d9;
--brand-font: 'Inter', san-serif;
}


html, body, #container {
  width: 100%;
  background-color: var(--main-bg-color);
  font-family: "Roboto", san-serif;
}

body {
  padding-top: 4.5rem;
}


/*Logo Branding*/
#brand-text {
color: var(--main-brand-color);
font-family: var(--brand-font);
}

/* latin-ext */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v20/KFOmCnqEu92Fr1Mu7GxKOzY.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v20/KFOmCnqEu92Fr1Mu4mxK.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/inter/v2/UcCO3FwrK3iLTeHuS_fvQtMwCp50KnMw2boKoduKmMEVuLyfAZFhiI2B.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/inter/v2/UcCO3FwrK3iLTeHuS_fvQtMwCp50KnMw2boKoduKmMEVuLyfAZ9hiA.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

.breadcrumb {
background-color: #FFF;
border: 1px solid #dfdfdf;
}

.nav-link > svg, .fas, .fab {
padding-right: 0.125rem;
}

.navbar-light .navbar-nav .nav-link{color:rgba(0,0,0,1)}
.navbar-light .navbar-nav .nav-link:hover, .bd-navbar .navbar-nav .nav-link:active {color:rgba(204,204,204,1)}



/* Branding */
.bg-brand { background-color: var(--main-brand-color); }
.btn-brand{color:#fff;background-color:var(--main-brand-color); border-color:var(--main-brand-color); }


/*SVG icons */
.icon {
width: 32px;
height: 26px;
}

.icon-yellow {fill: #FFE923; stroke: #000000; stroke-width: 20; overflow:visible;}
.icon-amber {fill: #FF9900; stroke: #000000; stroke-width: 20; overflow:visible;}
.icon-red {fill: #CC0033; stroke: #000000; stroke-width: 20; overflow:visible;}

/* Extra background*/
.bg-yellow {
background-color: #FFE923;
}
.bg-amber {
background-color: #FF9900;
}
.bg-red {
background-color: #CC0033;
}

.bg-green {
background-color: #198754;
}


#currenttime {
font-size: 1.5rem;
}


#mainnav {
    background-color: var(--main-bg-color);
    border-bottom: 1px solid #000;
}

.navbar-collapse.in {
  overflow-y: hidden;
}



.areaaffected {
margin:0;
}

.text-link {
color: #0074d9;
text-decoration: none;
/*84D7E6*/
}
.text-link:hover, .text-link:focus {
text-decoration: none;
}

.alert-link {
text-decoration: none;
}

.card-body > a {
color: #0074d9;
text-decoration: none;
}

/*Met Office stuff*/
.text-amber { color: #ff9900; text-shadow: -1px 1px 0 #000, 1px 1px 0 #000, 1px 1px 0 #000, 1px -1px 0 #000; }
.text-yellow {color: #FFE923; text-shadow: -1px 1px 0 #000, 1px 1px 0 #000, 1px 1px 0 #000, 1px -1px 0 #000; }
.text-red {color: #CC0033;}

.border-amber {border-color: #ff9900!important; border-width: 2px !important;}
.border-yellow {border-color: #FFE923!important}
.border-red {border-color: #CC0033!important; border-width: 3px !important;}

input:focus {
outline: 3px solid #2E1BA6;   
}

.temperatureContainer {
font-size:1.75rem;
width: 3rem; 
height: 3rem;
display: flex;
justify-content: center;
align-items: center;
}


details[open] {
padding-bottom: 0.25rem;
margin-bottom: 0.5rem;
}

summary {
padding: 0.125rem;
font-weight: bold;
}

details[open] summary {
border-bottom: 1px solid #aaa;
margin-bottom: 0.5rem;
}

.breadcrumb{padding:.5rem 1rem !important;border-radius:.25rem !important}