/*
    Styles and  mixins common to both components
*/
/* NOTE: the order of these three is critical to make all gel & gel-grid breakpoints available to sass-mq */
/*
    This defines or replaces all defined breakpoints, so if breakpoint are updated in
        https://github.com/bbc/gel-sass-tools/blob/master/lib/settings/_globals.scss
    this list would need to be updated.
*/
/*
    https://confluence.dev.bbc.co.uk/display/weather/02+-+Colour

    https://confluence.dev.bbc.co.uk/display/weather/02+-+Ambiences

    Values are lower-cased here for readability.
*/
/* blues */
/* aka 'highlight 1' */
/* aka 'highlight 2' */
/* referenced in ambiences */
/* greys */
/* see https://github.com/bbc/weather-source-svg */
/*
    NOTE: this will apply to ALL weather icons on the page
*/
.wr-icon-weather-type__svg-background {
  fill: none; }

/* Icons displayed on a dark background */
/* Reference: see links on https://confluence.dev.bbc.co.uk/display/weather/06+-+Icons */
/* These colours updated Jan 2018 from the master Illustrator file (for apps and web) by Robyn Porter <robyn.porter@bbc.co.uk> */
/* Astronomical objects */
.wr-icon-weather-type__svg-sun {
  fill: #ffd700; }

.wr-icon-weather-type__svg-partial-sun {
  fill: #ffd700; }

.wr-icon-weather-type__svg-moon {
  fill: #dbdbdb; }

.wr-icon-weather-type__svg-partial-moon {
  fill: #dbdbdb; }

/* Cloud */
.wr-icon-weather-type__svg-light-cloud {
  fill: #dbdbdb; }

.wr-icon-weather-type__svg-thick-cloud {
  fill: #000000; }

/* Precipitation */
.wr-icon-weather-type__svg-raindrop {
  fill: #afdbff; }

.wr-icon-weather-type__svg-drizzle {
  fill: #afdbff; }

.wr-icon-weather-type__svg-snowflake {
  fill: #dbdbdb; }

.wr-icon-weather-type__svg-hailstone {
  fill: #dbdbdb; }

/* Storms */
.wr-icon-weather-type__svg-lightning {
  fill: #afdbff; }

.wr-icon-weather-type__svg-tropical-storm {
  fill: #ffffff; }

/* Text */
.wr-icon-weather-type__svg-text {
  fill: #ffffff; }

.wr-icon-weather-type__svg-dash {
  fill: #ffffff; }

/* WEATHER TYPE ICONS */
.wr-weather-type__icon svg {
  height: 100%;
  width: 100%; }

.wr-weather-type__text {
  display: none; }

.wr-weather-type__icon {
  height: 3rem;
  width: 3rem; }

/*
// the following extra imports are only needed if weather page styles are not supplied in a separate component.

@import './location-boxes/partial-grandstand';

// Note: weather page utilities are not scoped and must come *after* the custom grandstand styles
@import './weather-page';

*/
@-webkit-keyframes spin {
  100% {
    transform: rotate(360deg); } }

@-moz-keyframes spin {
  100% {
    transform: rotate(360deg); } }

@-o-keyframes spin {
  100% {
    transform: rotate(360deg); } }

@keyframes spin {
  100% {
    transform: rotate(360deg); } }

@-webkit-keyframes fadeIn {
  0% {
    opacity: 0; }
  50% {
    opacity: 0.5; }
  100% {
    opacity: 1; } }

@-moz-keyframes fadeIn {
  0% {
    opacity: 0; }
  50% {
    opacity: 0.5; }
  100% {
    opacity: 1; } }

@-o-keyframes fadeIn {
  0% {
    opacity: 0; }
  50% {
    opacity: 0.5; }
  100% {
    opacity: 1; } }

@keyframes fadeIn {
  0% {
    opacity: 0; }
  50% {
    opacity: 0.5; }
  100% {
    opacity: 1; } }

@-webkit-keyframes barBlip {
  0% {
    border-bottom-width: 0px;
    transition-property: border;
    animation-timing-function: ease; }
  50% {
    border-bottom-width: 8px;
    transition-property: border;
    animation-timing-function: ease-out; }
  100% {
    border-bottom-width: 6px;
    transition-property: border; } }

@-moz-keyframes barBlip {
  0% {
    border-bottom-width: 0px;
    transition-property: border;
    animation-timing-function: ease; }
  50% {
    border-bottom-width: 8px;
    transition-property: border;
    animation-timing-function: ease-out; }
  100% {
    border-bottom-width: 6px;
    transition-property: border; } }

@-o-keyframes barBlip {
  0% {
    border-bottom-width: 0px;
    transition-property: border;
    animation-timing-function: ease; }
  50% {
    border-bottom-width: 8px;
    transition-property: border;
    animation-timing-function: ease-out; }
  100% {
    border-bottom-width: 6px;
    transition-property: border; } }

@keyframes barBlip {
  0% {
    border-bottom-width: 0px;
    transition-property: border;
    animation-timing-function: ease; }
  50% {
    border-bottom-width: 8px;
    transition-property: border;
    animation-timing-function: ease-out; }
  100% {
    border-bottom-width: 6px;
    transition-property: border; } }

.wr-home-location-box-container {
  /* Extracted from:
    https://codepen.io/terkel/pen/dvejH
    "Reset button style" by Takeru Suzuki (@terkel)
*/
  /* Reset `button` and button-style `input` default styles */
  -webkit-font-smoothing: antialiased;
  color: #FFFFFF;
  -webkit-animation-delay: 0s;
  -webkit-animation-duration: 0.7s;
  -webkit-animation-name: fadeIn;
  -webkit-animation-fill-mode: both;
  -moz-animation-delay: 0s;
  -moz-animation-duration: 0.7s;
  -moz-animation-name: fadeIn;
  -moz-animation-fill-mode: both;
  -o-animation-delay: 0s;
  -o-animation-duration: 0.7s;
  -o-animation-name: fadeIn;
  -o-animation-fill-mode: both;
  animation-delay: 0s;
  animation-duration: 0.7s;
  animation-name: fadeIn;
  animation-fill-mode: both;
  /* ICONS */
  /* HOME LOCATION BOX */ }
  .wr-home-location-box-container input[type="submit"],
  .wr-home-location-box-container input[type="reset"],
  .wr-home-location-box-container input[type="button"],
  .wr-home-location-box-container button {
    background: none;
    border: 0;
    color: inherit;
    /* cursor: default; */
    font: inherit;
    line-height: normal;
    overflow: visible;
    padding: 0;
    -webkit-appearance: button;
    /* for input */
    -webkit-user-select: none;
    /* for button */
    -moz-user-select: none;
    -ms-user-select: none; }
    .wr-home-location-box-container input[type="submit"]::-moz-focus-inner,
    .wr-home-location-box-container input[type="reset"]::-moz-focus-inner,
    .wr-home-location-box-container input[type="button"]::-moz-focus-inner,
    .wr-home-location-box-container button::-moz-focus-inner {
      border: 0;
      padding: 0; }
  .wr-home-location-box-container .gel-canon-bold,
  .wr-home-location-box-container .gel-trafalgar-bold,
  .wr-home-location-box-container .gel-double-pica-bold,
  .wr-home-location-box-container .gel-great-primer-bold {
    letter-spacing: normal; }
  .wr-home-location-box-container a {
    color: #FFFFFF;
    text-decoration: none; }
  .wr-home-location-box-container a:hover {
    text-decoration: underline; }
  .wr-home-location-box-container a.disabled {
    pointer-events: none;
    cursor: default; }
  .wr-home-location-box-container .wr-loading-icon {
    height: 2rem;
    width: 2rem;
    fill: #FFFFFF;
    -webkit-animation: spin 2s linear infinite;
    -moz-animation: spin 2s linear infinite;
    animation: spin 2s linear infinite; }
  .wr-home-location-box-container .wr-error-icon {
    height: 2rem;
    width: 2rem;
    color: #FFFFFF; }
  .wr-home-location-box-container .wr-home-location-box {
    /* TODAYS FORECAST SUMMARY */
    /* DAY TAB */ }
    .wr-home-location-box-container .wr-home-location-box__main-section {
      background: rgba(30, 67, 109, 0.32);
      min-height: 10rem; }
      .wr-home-location-box-container .wr-home-location-box__main-section [tabindex="-1"] {
        outline: none; }
      .wr-home-location-box-container .wr-home-location-box__main-section > .wr-home-location-box__forecast-today,
      .wr-home-location-box-container .wr-home-location-box__main-section > .wr-home-location-box__edit,
      .wr-home-location-box-container .wr-home-location-box__main-section .wr-home-location-box__warning,
      .wr-home-location-box-container .wr-home-location-box__main-section > .wr-home-location-box__forecast-today--edit-location > * {
        -webkit-animation-delay: 0s;
        -webkit-animation-duration: 0.7s;
        -webkit-animation-name: fadeIn;
        -webkit-animation-fill-mode: both;
        -moz-animation-delay: 0s;
        -moz-animation-duration: 0.7s;
        -moz-animation-name: fadeIn;
        -moz-animation-fill-mode: both;
        -o-animation-delay: 0s;
        -o-animation-duration: 0.7s;
        -o-animation-name: fadeIn;
        -o-animation-fill-mode: both;
        animation-delay: 0s;
        animation-duration: 0.7s;
        animation-name: fadeIn;
        animation-fill-mode: both; }
      .wr-home-location-box-container .wr-home-location-box__main-section--with-data:hover, .wr-home-location-box-container .wr-home-location-box__main-section--with-data:focus, .wr-home-location-box-container .wr-home-location-box__main-section--with-data:active {
        background: rgba(30, 67, 109, 0.55); }
      .wr-home-location-box-container .wr-home-location-box__main-section__temperature-bar {
        border-top: 8px solid;
        -webkit-transition: border-top 0.7s;
        transition: border-top 0.7s; }
    .wr-home-location-box-container .wr-home-location-box__location-name-part-two {
      color: rgba(255, 255, 255, 0.85); }
    .wr-home-location-box-container .wr-home-location-box__title a:focus,
    .wr-home-location-box-container .wr-home-location-box__title a:active {
      text-decoration: underline; }
    .wr-home-location-box-container .wr-home-location-box__title a:focus > div {
      background-color: rgba(30, 67, 109, 0.55); }
    .wr-home-location-box-container .wr-home-location-box__title-icon {
      border: 1px solid #FFFFFF;
      background: rgba(255, 255, 255, 0.2); }
    .wr-home-location-box-container .wr-home-location-box__warning {
      color: #FFFFFF; }
      .wr-home-location-box-container .wr-home-location-box__warning-icon {
        width: 1rem;
        height: 1rem; }
    .wr-home-location-box-container .wr-home-location-box__edit {
      height: 2.85rem;
      right: 0;
      top: 0;
      z-index: 2;
      text-decoration: none; }
      .wr-home-location-box-container .wr-home-location-box__edit:hover div,
      .wr-home-location-box-container .wr-home-location-box__edit:focus div,
      .wr-home-location-box-container .wr-home-location-box__edit:active div {
        text-decoration: underline; }
      .wr-home-location-box-container .wr-home-location-box__edit:focus {
        background-color: rgba(30, 67, 109, 0.55); }
      .wr-home-location-box-container .wr-home-location-box__edit-icon {
        width: 0.75rem;
        height: 0.75rem; }
      .wr-home-location-box-container .wr-home-location-box__edit-link-placeholder {
        min-width: 7rem;
        height: 2.85rem; }
    .wr-home-location-box-container .wr-home-location-box__forecast-today {
      overflow: hidden; }
      .wr-home-location-box-container .wr-home-location-box__forecast-today__details-container {
        float: left;
        position: relative;
        padding-right: calc(16px + 2.25em); }
        @media (min-width: 37.5em) {
          .wr-home-location-box-container .wr-home-location-box__forecast-today__details-container {
            width: 10rem; } }
      .wr-home-location-box-container .wr-home-location-box__forecast-today__summary-container {
        float: left;
        max-width: calc(100% - 24px - 4rem - 2.25em);
        min-width: 8em; }
        @media (min-width: 37.5em) {
          .wr-home-location-box-container .wr-home-location-box__forecast-today__summary-container {
            display: inline-block;
            max-width: calc(100% - 10rem); } }
      .wr-home-location-box-container .wr-home-location-box__forecast-today__temperature {
        position: absolute;
        right: 0;
        top: 0; }
      .wr-home-location-box-container .wr-home-location-box__forecast-today__icon {
        flex-shrink: 0; }
      .wr-home-location-box-container .wr-home-location-box__forecast-today__edit-location-btn {
        background-color: #000000; }
      .wr-home-location-box-container .wr-home-location-box__forecast-today .wr-weather-type__icon {
        height: 4rem;
        width: 4rem; }
      .wr-home-location-box-container .wr-home-location-box__forecast-today a:hover .wr-home-location-box__forecast-today__edit-location-btn,
      .wr-home-location-box-container .wr-home-location-box__forecast-today a:focus .wr-home-location-box__forecast-today__edit-location-btn,
      .wr-home-location-box-container .wr-home-location-box__forecast-today a:active .wr-home-location-box__forecast-today__edit-location-btn, .wr-home-location-box-container .wr-home-location-box__forecast-today__edit-location-btn:hover, .wr-home-location-box-container .wr-home-location-box__forecast-today__edit-location-btn:focus, .wr-home-location-box-container .wr-home-location-box__forecast-today__edit-location-btn:active {
        background-color: #0090ff; }
      .wr-home-location-box-container .wr-home-location-box__forecast-today__summary {
        border-left: 1px solid #FFFFFF;
        height: 100%;
        min-height: 4rem; }
      .wr-home-location-box-container .wr-home-location-box__forecast-today--error .wr-home-location-box__forecast-today__summary {
        height: auto;
        min-height: auto; }
    .wr-home-location-box-container .wr-home-location-box__low-label {
      bottom: -0.3125rem;
      opacity: 0.8;
      position: relative; }
    .wr-home-location-box-container .wr-home-location-box .show.show1 .wr-home-location-box__day-tab__content,
    .wr-home-location-box-container .wr-home-location-box .show.show1 .wr-home-location-box__day-tab__title h4,
    .wr-home-location-box-container .wr-home-location-box .show.show1 .wr-home-location-box__day-tab__title .wr-home-location-box__warning {
      -webkit-animation-delay: 0.85s;
      -webkit-animation-duration: 0.7s;
      -webkit-animation-name: fadeIn;
      -webkit-animation-fill-mode: both;
      -moz-animation-delay: 0.85s;
      -moz-animation-duration: 0.7s;
      -moz-animation-name: fadeIn;
      -moz-animation-fill-mode: both;
      -o-animation-delay: 0.85s;
      -o-animation-duration: 0.7s;
      -o-animation-name: fadeIn;
      -o-animation-fill-mode: both;
      animation-delay: 0.85s;
      animation-duration: 0.7s;
      animation-name: fadeIn;
      animation-fill-mode: both; }
    .wr-home-location-box-container .wr-home-location-box .show.show1 .wr-home-location-box__day-tab {
      -webkit-animation-delay: 0.7s;
      -webkit-animation-duration: 1.4s;
      -webkit-animation-name: barBlip;
      -webkit-animation-fill-mode: both;
      -moz-animation-delay: 0.7s;
      -moz-animation-duration: 1.4s;
      -moz-animation-name: barBlip;
      -moz-animation-fill-mode: both;
      -o-animation-delay: 0.7s;
      -o-animation-duration: 1.4s;
      -o-animation-name: barBlip;
      -o-animation-fill-mode: both;
      animation-delay: 0.7s;
      animation-duration: 1.4s;
      animation-name: barBlip;
      animation-fill-mode: both; }
    .wr-home-location-box-container .wr-home-location-box .show.show2 .wr-home-location-box__day-tab__content,
    .wr-home-location-box-container .wr-home-location-box .show.show2 .wr-home-location-box__day-tab__title h4,
    .wr-home-location-box-container .wr-home-location-box .show.show2 .wr-home-location-box__day-tab__title .wr-home-location-box__warning {
      -webkit-animation-delay: 1s;
      -webkit-animation-duration: 0.7s;
      -webkit-animation-name: fadeIn;
      -webkit-animation-fill-mode: both;
      -moz-animation-delay: 1s;
      -moz-animation-duration: 0.7s;
      -moz-animation-name: fadeIn;
      -moz-animation-fill-mode: both;
      -o-animation-delay: 1s;
      -o-animation-duration: 0.7s;
      -o-animation-name: fadeIn;
      -o-animation-fill-mode: both;
      animation-delay: 1s;
      animation-duration: 0.7s;
      animation-name: fadeIn;
      animation-fill-mode: both; }
    .wr-home-location-box-container .wr-home-location-box .show.show2 .wr-home-location-box__day-tab {
      -webkit-animation-delay: 0.85s;
      -webkit-animation-duration: 1.4s;
      -webkit-animation-name: barBlip;
      -webkit-animation-fill-mode: both;
      -moz-animation-delay: 0.85s;
      -moz-animation-duration: 1.4s;
      -moz-animation-name: barBlip;
      -moz-animation-fill-mode: both;
      -o-animation-delay: 0.85s;
      -o-animation-duration: 1.4s;
      -o-animation-name: barBlip;
      -o-animation-fill-mode: both;
      animation-delay: 0.85s;
      animation-duration: 1.4s;
      animation-name: barBlip;
      animation-fill-mode: both; }
    .wr-home-location-box-container .wr-home-location-box .show.show3 .wr-home-location-box__day-tab__content,
    .wr-home-location-box-container .wr-home-location-box .show.show3 .wr-home-location-box__day-tab__title h4,
    .wr-home-location-box-container .wr-home-location-box .show.show3 .wr-home-location-box__day-tab__title .wr-home-location-box__warning {
      -webkit-animation-delay: 1.15s;
      -webkit-animation-duration: 0.7s;
      -webkit-animation-name: fadeIn;
      -webkit-animation-fill-mode: both;
      -moz-animation-delay: 1.15s;
      -moz-animation-duration: 0.7s;
      -moz-animation-name: fadeIn;
      -moz-animation-fill-mode: both;
      -o-animation-delay: 1.15s;
      -o-animation-duration: 0.7s;
      -o-animation-name: fadeIn;
      -o-animation-fill-mode: both;
      animation-delay: 1.15s;
      animation-duration: 0.7s;
      animation-name: fadeIn;
      animation-fill-mode: both; }
    .wr-home-location-box-container .wr-home-location-box .show.show3 .wr-home-location-box__day-tab {
      -webkit-animation-delay: 1s;
      -webkit-animation-duration: 1.4s;
      -webkit-animation-name: barBlip;
      -webkit-animation-fill-mode: both;
      -moz-animation-delay: 1s;
      -moz-animation-duration: 1.4s;
      -moz-animation-name: barBlip;
      -moz-animation-fill-mode: both;
      -o-animation-delay: 1s;
      -o-animation-duration: 1.4s;
      -o-animation-name: barBlip;
      -o-animation-fill-mode: both;
      animation-delay: 1s;
      animation-duration: 1.4s;
      animation-name: barBlip;
      animation-fill-mode: both; }
    .wr-home-location-box-container .wr-home-location-box .show.show4 .wr-home-location-box__day-tab__content,
    .wr-home-location-box-container .wr-home-location-box .show.show4 .wr-home-location-box__day-tab__title h4,
    .wr-home-location-box-container .wr-home-location-box .show.show4 .wr-home-location-box__day-tab__title .wr-home-location-box__warning {
      -webkit-animation-delay: 1.3s;
      -webkit-animation-duration: 0.7s;
      -webkit-animation-name: fadeIn;
      -webkit-animation-fill-mode: both;
      -moz-animation-delay: 1.3s;
      -moz-animation-duration: 0.7s;
      -moz-animation-name: fadeIn;
      -moz-animation-fill-mode: both;
      -o-animation-delay: 1.3s;
      -o-animation-duration: 0.7s;
      -o-animation-name: fadeIn;
      -o-animation-fill-mode: both;
      animation-delay: 1.3s;
      animation-duration: 0.7s;
      animation-name: fadeIn;
      animation-fill-mode: both; }
    .wr-home-location-box-container .wr-home-location-box .show.show4 .wr-home-location-box__day-tab {
      -webkit-animation-delay: 1.15s;
      -webkit-animation-duration: 1.4s;
      -webkit-animation-name: barBlip;
      -webkit-animation-fill-mode: both;
      -moz-animation-delay: 1.15s;
      -moz-animation-duration: 1.4s;
      -moz-animation-name: barBlip;
      -moz-animation-fill-mode: both;
      -o-animation-delay: 1.15s;
      -o-animation-duration: 1.4s;
      -o-animation-name: barBlip;
      -o-animation-fill-mode: both;
      animation-delay: 1.15s;
      animation-duration: 1.4s;
      animation-name: barBlip;
      animation-fill-mode: both; }
    .wr-home-location-box-container .wr-home-location-box__day-tab-container {
      min-width: 6rem; }
    .wr-home-location-box-container .wr-home-location-box__day-tab, .wr-home-location-box-container .wr-home-location-box__day-tab--error, .wr-home-location-box-container .wr-home-location-box__day-tab--loading, .wr-home-location-box-container .wr-home-location-box__day-tab--edit-location {
      border-bottom: 6px solid;
      background: rgba(30, 67, 109, 0.32);
      color: #FFFFFF;
      min-height: 6rem; }
    .wr-home-location-box-container .wr-home-location-box__day-tab--edit-location, .wr-home-location-box-container .wr-home-location-box__day-tab--loading {
      border-bottom-width: 0px; }
    .wr-home-location-box-container .wr-home-location-box__day-tab:hover {
      background: rgba(30, 67, 109, 0.55);
      border-bottom-width: 8px !important; }
    .wr-home-location-box-container .wr-home-location-box__day-tab__title {
      min-height: 1.875rem; }
      .wr-home-location-box-container .wr-home-location-box__day-tab__title a:hover h4,
      .wr-home-location-box-container .wr-home-location-box__day-tab__title a:focus h4,
      .wr-home-location-box-container .wr-home-location-box__day-tab__title a:active h4 {
        text-decoration: underline; }
      .wr-home-location-box-container .wr-home-location-box__day-tab__title a:focus h4 {
        background-color: rgba(30, 67, 109, 0.55); }
    .wr-home-location-box-container .wr-home-location-box__day-tab__date {
      color: rgba(255, 255, 255, 0.85); }
    .wr-home-location-box-container .wr-home-location-box .wr-day-temperature--temp41andhigher {
      border-color: #9a1b1e; }
    .wr-home-location-box-container .wr-home-location-box .wr-day-temperature--temp36to40 {
      border-color: #c12026; }
    .wr-home-location-box-container .wr-home-location-box .wr-day-temperature--temp30to35 {
      border-color: #ee2d29; }
    .wr-home-location-box-container .wr-home-location-box .wr-day-temperature--temp25to29 {
      border-color: #eb5038; }
    .wr-home-location-box-container .wr-home-location-box .wr-day-temperature--temp21to24 {
      border-color: #f26a30; }
    .wr-home-location-box-container .wr-home-location-box .wr-day-temperature--temp19to20 {
      border-color: #f68a1f; }
    .wr-home-location-box-container .wr-home-location-box .wr-day-temperature--temp17to18 {
      border-color: #faa31a; }
    .wr-home-location-box-container .wr-home-location-box .wr-day-temperature--temp15to16 {
      border-color: #fbb616; }
    .wr-home-location-box-container .wr-home-location-box .wr-day-temperature--temp13to14 {
      border-color: #fcc90d; }
    .wr-home-location-box-container .wr-home-location-box .wr-day-temperature--temp11to12 {
      border-color: #fedb00; }
    .wr-home-location-box-container .wr-home-location-box .wr-day-temperature--temp9to10 {
      border-color: #d0d73e; }
    .wr-home-location-box-container .wr-home-location-box .wr-day-temperature--temp7to8 {
      border-color: #afd251; }
    .wr-home-location-box-container .wr-home-location-box .wr-day-temperature--temp5to6 {
      border-color: #9fcd80; }
    .wr-home-location-box-container .wr-home-location-box .wr-day-temperature--temp3to4 {
      border-color: #aad6ae; }
    .wr-home-location-box-container .wr-home-location-box .wr-day-temperature--temp1to2 {
      border-color: #aedcd8; }
    .wr-home-location-box-container .wr-home-location-box .wr-day-temperature--temp0to-2 {
      border-color: #51bfed; }
    .wr-home-location-box-container .wr-home-location-box .wr-day-temperature--temp-3to-5 {
      border-color: #43a3d9; }
    .wr-home-location-box-container .wr-home-location-box .wr-day-temperature--temp-6to-10 {
      border-color: #3789c6; }
    .wr-home-location-box-container .wr-home-location-box .wr-day-temperature--temp-11to-15 {
      border-color: #2374b6; }
    .wr-home-location-box-container .wr-home-location-box .wr-day-temperature--temp-16to-22 {
      border-color: #0262a9; }
    .wr-home-location-box-container .wr-home-location-box .wr-day-temperature--temp-23andlower {
      border-color: #1f4799; }
    .wr-home-location-box-container .wr-home-location-box .wr-day-temperature--temp-invalid {
      border-color: #d5d0cd; }

/*
    Styles and  mixins common to both components
*/
/* NOTE: the order of these three is critical to make all gel & gel-grid breakpoints available to sass-mq */
/*
    This defines or replaces all defined breakpoints, so if breakpoint are updated in
        https://github.com/bbc/gel-sass-tools/blob/master/lib/settings/_globals.scss
    this list would need to be updated.
*/
/*
    https://confluence.dev.bbc.co.uk/display/weather/02+-+Colour

    https://confluence.dev.bbc.co.uk/display/weather/02+-+Ambiences

    Values are lower-cased here for readability.
*/
/* blues */
/* aka 'highlight 1' */
/* aka 'highlight 2' */
/* referenced in ambiences */
/* greys */
/* see https://github.com/bbc/weather-source-svg */
/*
    NOTE: this will apply to ALL weather icons on the page
*/
.wr-icon-weather-type__svg-background {
  fill: none; }

/* Icons displayed on a dark background */
/* Reference: see links on https://confluence.dev.bbc.co.uk/display/weather/06+-+Icons */
/* These colours updated Jan 2018 from the master Illustrator file (for apps and web) by Robyn Porter <robyn.porter@bbc.co.uk> */
/* Astronomical objects */
.wr-icon-weather-type__svg-sun {
  fill: #ffd700; }

.wr-icon-weather-type__svg-partial-sun {
  fill: #ffd700; }

.wr-icon-weather-type__svg-moon {
  fill: #dbdbdb; }

.wr-icon-weather-type__svg-partial-moon {
  fill: #dbdbdb; }

/* Cloud */
.wr-icon-weather-type__svg-light-cloud {
  fill: #dbdbdb; }

.wr-icon-weather-type__svg-thick-cloud {
  fill: #000000; }

/* Precipitation */
.wr-icon-weather-type__svg-raindrop {
  fill: #afdbff; }

.wr-icon-weather-type__svg-drizzle {
  fill: #afdbff; }

.wr-icon-weather-type__svg-snowflake {
  fill: #dbdbdb; }

.wr-icon-weather-type__svg-hailstone {
  fill: #dbdbdb; }

/* Storms */
.wr-icon-weather-type__svg-lightning {
  fill: #afdbff; }

.wr-icon-weather-type__svg-tropical-storm {
  fill: #ffffff; }

/* Text */
.wr-icon-weather-type__svg-text {
  fill: #ffffff; }

.wr-icon-weather-type__svg-dash {
  fill: #ffffff; }

/* WEATHER TYPE ICONS */
.wr-weather-type__icon svg {
  height: 100%;
  width: 100%; }

.wr-weather-type__text {
  display: none; }

.wr-weather-type__icon {
  height: 3rem;
  width: 3rem; }

/*
// the following extra imports are only needed if weather page styles are not supplied in a separate component.

@import './location-boxes/partial-grandstand';

// Note: weather page utilities are not scoped and must come *after* the custom grandstand styles
@import './weather-page';

*/
@-webkit-keyframes fadeInOnFirstRender {
  0% {
    opacity: 0; }
  50% {
    opacity: 0.5; }
  100% {
    opacity: 1; } }

@-moz-keyframes fadeInOnFirstRender {
  0% {
    opacity: 0; }
  50% {
    opacity: 0.5; }
  100% {
    opacity: 1; } }

@-o-keyframes fadeInOnFirstRender {
  0% {
    opacity: 0; }
  50% {
    opacity: 0.5; }
  100% {
    opacity: 1; } }

@keyframes fadeInOnFirstRender {
  0% {
    opacity: 0; }
  50% {
    opacity: 0.5; }
  100% {
    opacity: 1; } }

@-webkit-keyframes fadeInAfterRemoveSLB {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }

@-moz-keyframes fadeInAfterRemoveSLB {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }

@-o-keyframes fadeInAfterRemoveSLB {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }

@keyframes fadeInAfterRemoveSLB {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }

@-webkit-keyframes barBlip {
  0% {
    border-bottom-width: 0px;
    transition-property: border;
    animation-timing-function: ease; }
  50% {
    border-bottom-width: 8px;
    transition-property: border;
    animation-timing-function: ease-out; }
  100% {
    border-bottom-width: 6px;
    transition-property: border; } }

@-moz-keyframes barBlip {
  0% {
    border-bottom-width: 0px;
    transition-property: border;
    animation-timing-function: ease; }
  50% {
    border-bottom-width: 8px;
    transition-property: border;
    animation-timing-function: ease-out; }
  100% {
    border-bottom-width: 6px;
    transition-property: border; } }

@-o-keyframes barBlip {
  0% {
    border-bottom-width: 0px;
    transition-property: border;
    animation-timing-function: ease; }
  50% {
    border-bottom-width: 8px;
    transition-property: border;
    animation-timing-function: ease-out; }
  100% {
    border-bottom-width: 6px;
    transition-property: border; } }

@keyframes barBlip {
  0% {
    border-bottom-width: 0px;
    transition-property: border;
    animation-timing-function: ease; }
  50% {
    border-bottom-width: 8px;
    transition-property: border;
    animation-timing-function: ease-out; }
  100% {
    border-bottom-width: 6px;
    transition-property: border; } }

@-webkit-keyframes barHover {
  0% {
    border-bottom-width: 6px;
    transition-property: border;
    animation-timing-function: ease; }
  100% {
    border-bottom-width: 8px;
    transition-property: border;
    animation-timing-function: ease-out; } }

@-moz-keyframes barHover {
  0% {
    border-bottom-width: 6px;
    transition-property: border;
    animation-timing-function: ease; }
  100% {
    border-bottom-width: 8px;
    transition-property: border;
    animation-timing-function: ease-out; } }

@-o-keyframes barHover {
  0% {
    border-bottom-width: 6px;
    transition-property: border;
    animation-timing-function: ease; }
  100% {
    border-bottom-width: 8px;
    transition-property: border;
    animation-timing-function: ease-out; } }

@keyframes barHover {
  0% {
    border-bottom-width: 6px;
    transition-property: border;
    animation-timing-function: ease; }
  100% {
    border-bottom-width: 8px;
    transition-property: border;
    animation-timing-function: ease-out; } }

.wr-saved-location-boxes__box-wrapper--0 {
  -webkit-animation-delay: 1.3s;
  -webkit-animation-duration: 1.4s;
  -webkit-animation-name: fadeInOnFirstRender;
  -webkit-animation-fill-mode: both;
  -moz-animation-delay: 1.3s;
  -moz-animation-duration: 1.4s;
  -moz-animation-name: fadeInOnFirstRender;
  -moz-animation-fill-mode: both;
  -o-animation-delay: 1.3s;
  -o-animation-duration: 1.4s;
  -o-animation-name: fadeInOnFirstRender;
  -o-animation-fill-mode: both;
  animation-delay: 1.3s;
  animation-duration: 1.4s;
  animation-name: fadeInOnFirstRender;
  animation-fill-mode: both; }

.wr-saved-location-boxes__box-wrapper--1 {
  -webkit-animation-delay: 1.45s;
  -webkit-animation-duration: 1.4s;
  -webkit-animation-name: fadeInOnFirstRender;
  -webkit-animation-fill-mode: both;
  -moz-animation-delay: 1.45s;
  -moz-animation-duration: 1.4s;
  -moz-animation-name: fadeInOnFirstRender;
  -moz-animation-fill-mode: both;
  -o-animation-delay: 1.45s;
  -o-animation-duration: 1.4s;
  -o-animation-name: fadeInOnFirstRender;
  -o-animation-fill-mode: both;
  animation-delay: 1.45s;
  animation-duration: 1.4s;
  animation-name: fadeInOnFirstRender;
  animation-fill-mode: both; }

.wr-saved-location-boxes__box-wrapper--2 {
  -webkit-animation-delay: 1.6s;
  -webkit-animation-duration: 1.4s;
  -webkit-animation-name: fadeInOnFirstRender;
  -webkit-animation-fill-mode: both;
  -moz-animation-delay: 1.6s;
  -moz-animation-duration: 1.4s;
  -moz-animation-name: fadeInOnFirstRender;
  -moz-animation-fill-mode: both;
  -o-animation-delay: 1.6s;
  -o-animation-duration: 1.4s;
  -o-animation-name: fadeInOnFirstRender;
  -o-animation-fill-mode: both;
  animation-delay: 1.6s;
  animation-duration: 1.4s;
  animation-name: fadeInOnFirstRender;
  animation-fill-mode: both; }

.wr-saved-location-boxes__box-wrapper--3 {
  -webkit-animation-delay: 1.75s;
  -webkit-animation-duration: 1.4s;
  -webkit-animation-name: fadeInOnFirstRender;
  -webkit-animation-fill-mode: both;
  -moz-animation-delay: 1.75s;
  -moz-animation-duration: 1.4s;
  -moz-animation-name: fadeInOnFirstRender;
  -moz-animation-fill-mode: both;
  -o-animation-delay: 1.75s;
  -o-animation-duration: 1.4s;
  -o-animation-name: fadeInOnFirstRender;
  -o-animation-fill-mode: both;
  animation-delay: 1.75s;
  animation-duration: 1.4s;
  animation-name: fadeInOnFirstRender;
  animation-fill-mode: both; }

.wr-saved-location-boxes__box-wrapper--4 {
  -webkit-animation-delay: 1.9s;
  -webkit-animation-duration: 1.4s;
  -webkit-animation-name: fadeInOnFirstRender;
  -webkit-animation-fill-mode: both;
  -moz-animation-delay: 1.9s;
  -moz-animation-duration: 1.4s;
  -moz-animation-name: fadeInOnFirstRender;
  -moz-animation-fill-mode: both;
  -o-animation-delay: 1.9s;
  -o-animation-duration: 1.4s;
  -o-animation-name: fadeInOnFirstRender;
  -o-animation-fill-mode: both;
  animation-delay: 1.9s;
  animation-duration: 1.4s;
  animation-name: fadeInOnFirstRender;
  animation-fill-mode: both; }

.wr-saved-location-boxes__box-wrapper--5 {
  -webkit-animation-delay: 2.05s;
  -webkit-animation-duration: 1.4s;
  -webkit-animation-name: fadeInOnFirstRender;
  -webkit-animation-fill-mode: both;
  -moz-animation-delay: 2.05s;
  -moz-animation-duration: 1.4s;
  -moz-animation-name: fadeInOnFirstRender;
  -moz-animation-fill-mode: both;
  -o-animation-delay: 2.05s;
  -o-animation-duration: 1.4s;
  -o-animation-name: fadeInOnFirstRender;
  -o-animation-fill-mode: both;
  animation-delay: 2.05s;
  animation-duration: 1.4s;
  animation-name: fadeInOnFirstRender;
  animation-fill-mode: both; }

.wr-saved-location-boxes__box-wrapper--6 {
  -webkit-animation-delay: 2.2s;
  -webkit-animation-duration: 1.4s;
  -webkit-animation-name: fadeInOnFirstRender;
  -webkit-animation-fill-mode: both;
  -moz-animation-delay: 2.2s;
  -moz-animation-duration: 1.4s;
  -moz-animation-name: fadeInOnFirstRender;
  -moz-animation-fill-mode: both;
  -o-animation-delay: 2.2s;
  -o-animation-duration: 1.4s;
  -o-animation-name: fadeInOnFirstRender;
  -o-animation-fill-mode: both;
  animation-delay: 2.2s;
  animation-duration: 1.4s;
  animation-name: fadeInOnFirstRender;
  animation-fill-mode: both; }

.wr-saved-location-boxes__box-wrapper--7 {
  -webkit-animation-delay: 2.35s;
  -webkit-animation-duration: 1.4s;
  -webkit-animation-name: fadeInOnFirstRender;
  -webkit-animation-fill-mode: both;
  -moz-animation-delay: 2.35s;
  -moz-animation-duration: 1.4s;
  -moz-animation-name: fadeInOnFirstRender;
  -moz-animation-fill-mode: both;
  -o-animation-delay: 2.35s;
  -o-animation-duration: 1.4s;
  -o-animation-name: fadeInOnFirstRender;
  -o-animation-fill-mode: both;
  animation-delay: 2.35s;
  animation-duration: 1.4s;
  animation-name: fadeInOnFirstRender;
  animation-fill-mode: both; }

.wr-saved-location-boxes__box-wrapper--8 {
  -webkit-animation-delay: 2.5s;
  -webkit-animation-duration: 1.4s;
  -webkit-animation-name: fadeInOnFirstRender;
  -webkit-animation-fill-mode: both;
  -moz-animation-delay: 2.5s;
  -moz-animation-duration: 1.4s;
  -moz-animation-name: fadeInOnFirstRender;
  -moz-animation-fill-mode: both;
  -o-animation-delay: 2.5s;
  -o-animation-duration: 1.4s;
  -o-animation-name: fadeInOnFirstRender;
  -o-animation-fill-mode: both;
  animation-delay: 2.5s;
  animation-duration: 1.4s;
  animation-name: fadeInOnFirstRender;
  animation-fill-mode: both; }

.wr-saved-location-boxes__box-wrapper--9 {
  -webkit-animation-delay: 2.65s;
  -webkit-animation-duration: 1.4s;
  -webkit-animation-name: fadeInOnFirstRender;
  -webkit-animation-fill-mode: both;
  -moz-animation-delay: 2.65s;
  -moz-animation-duration: 1.4s;
  -moz-animation-name: fadeInOnFirstRender;
  -moz-animation-fill-mode: both;
  -o-animation-delay: 2.65s;
  -o-animation-duration: 1.4s;
  -o-animation-name: fadeInOnFirstRender;
  -o-animation-fill-mode: both;
  animation-delay: 2.65s;
  animation-duration: 1.4s;
  animation-name: fadeInOnFirstRender;
  animation-fill-mode: both; }

.wr-saved-location-boxes__box-wrapper--10 {
  -webkit-animation-delay: 2.8s;
  -webkit-animation-duration: 1.4s;
  -webkit-animation-name: fadeInOnFirstRender;
  -webkit-animation-fill-mode: both;
  -moz-animation-delay: 2.8s;
  -moz-animation-duration: 1.4s;
  -moz-animation-name: fadeInOnFirstRender;
  -moz-animation-fill-mode: both;
  -o-animation-delay: 2.8s;
  -o-animation-duration: 1.4s;
  -o-animation-name: fadeInOnFirstRender;
  -o-animation-fill-mode: both;
  animation-delay: 2.8s;
  animation-duration: 1.4s;
  animation-name: fadeInOnFirstRender;
  animation-fill-mode: both; }

.wr-saved-location-box-container {
  /* Extracted from:
    https://codepen.io/terkel/pen/dvejH
    "Reset button style" by Takeru Suzuki (@terkel)
*/
  /* Reset `button` and button-style `input` default styles */
  -webkit-font-smoothing: antialiased;
  min-width: 9rem;
  min-height: 9.5rem;
  height: 100%;
  /* SAVED LOCATION BOX */ }
  .wr-saved-location-box-container input[type="submit"],
  .wr-saved-location-box-container input[type="reset"],
  .wr-saved-location-box-container input[type="button"],
  .wr-saved-location-box-container button {
    background: none;
    border: 0;
    color: inherit;
    /* cursor: default; */
    font: inherit;
    line-height: normal;
    overflow: visible;
    padding: 0;
    -webkit-appearance: button;
    /* for input */
    -webkit-user-select: none;
    /* for button */
    -moz-user-select: none;
    -ms-user-select: none; }
    .wr-saved-location-box-container input[type="submit"]::-moz-focus-inner,
    .wr-saved-location-box-container input[type="reset"]::-moz-focus-inner,
    .wr-saved-location-box-container input[type="button"]::-moz-focus-inner,
    .wr-saved-location-box-container button::-moz-focus-inner {
      border: 0;
      padding: 0; }
  .wr-saved-location-box-container .gel-canon-bold,
  .wr-saved-location-box-container .gel-trafalgar-bold,
  .wr-saved-location-box-container .gel-double-pica-bold,
  .wr-saved-location-box-container .gel-great-primer-bold {
    letter-spacing: normal; }
  .wr-saved-location-box-container a {
    color: #FFFFFF;
    text-decoration: none; }
  .wr-saved-location-box-container a:hover {
    text-decoration: underline; }
  .wr-saved-location-box-container a.disabled {
    pointer-events: none;
    cursor: default; }
  .wr-saved-location-box-container .gs-o-faux-block-link {
    height: 100%; }
  .wr-saved-location-box-container .wr-saved-location-box {
    min-height: inherit;
    height: 100%;
    transition: opacity 3s;
    opacity: 1;
    -webkit-animation-delay: 0s;
    -webkit-animation-duration: 3s;
    -webkit-animation-name: fadeInAfterRemoveSLB;
    -webkit-animation-fill-mode: none;
    -moz-animation-delay: 0s;
    -moz-animation-duration: 3s;
    -moz-animation-name: fadeInAfterRemoveSLB;
    -moz-animation-fill-mode: none;
    -o-animation-delay: 0s;
    -o-animation-duration: 3s;
    -o-animation-name: fadeInAfterRemoveSLB;
    -o-animation-fill-mode: none;
    animation-delay: 0s;
    animation-duration: 3s;
    animation-name: fadeInAfterRemoveSLB;
    animation-fill-mode: none;
    /* ICONS */ }
    .wr-saved-location-box-container .wr-saved-location-box:not(.wr-saved-location-box--first-render) .wr-saved-location-box__warnings,
    .wr-saved-location-box-container .wr-saved-location-box:not(.wr-saved-location-box--first-render) .wr-saved-location-box__loading,
    .wr-saved-location-box-container .wr-saved-location-box:not(.wr-saved-location-box--first-render) .wr-saved-location-box__warning,
    .wr-saved-location-box-container .wr-saved-location-box:not(.wr-saved-location-box--first-render) .wr-saved-location-box__weather-icon,
    .wr-saved-location-box-container .wr-saved-location-box:not(.wr-saved-location-box--first-render) .wr-saved-location-box__temperature,
    .wr-saved-location-box-container .wr-saved-location-box:not(.wr-saved-location-box--first-render) .wr-saved-location-box__forecast-description {
      -webkit-animation-delay: 0s;
      -webkit-animation-duration: 1.4s;
      -webkit-animation-name: fadeInOnFirstRender;
      -webkit-animation-fill-mode: both;
      -moz-animation-delay: 0s;
      -moz-animation-duration: 1.4s;
      -moz-animation-name: fadeInOnFirstRender;
      -moz-animation-fill-mode: both;
      -o-animation-delay: 0s;
      -o-animation-duration: 1.4s;
      -o-animation-name: fadeInOnFirstRender;
      -o-animation-fill-mode: both;
      animation-delay: 0s;
      animation-duration: 1.4s;
      animation-name: fadeInOnFirstRender;
      animation-fill-mode: both; }
    .wr-saved-location-box-container .wr-saved-location-box a:hover .wr-saved-location-box__location-name-visible,
    .wr-saved-location-box-container .wr-saved-location-box a:active .wr-saved-location-box__location-name-visible,
    .wr-saved-location-box-container .wr-saved-location-box a:focus .wr-saved-location-box__location-name-visible {
      text-decoration: underline; }
    .wr-touch--inactive .wr-saved-location-box:hover {
      cursor: pointer;
      background: rgba(30, 67, 109, 0.55); }
    .wr-touch--inactive .wr-saved-location-box:hover .wr-saved-location-box__temperature-bar {
      -webkit-animation-delay: 0;
      -webkit-animation-duration: 0.35s;
      -webkit-animation-name: barHover;
      -webkit-animation-fill-mode: both;
      -moz-animation-delay: 0;
      -moz-animation-duration: 0.35s;
      -moz-animation-name: barHover;
      -moz-animation-fill-mode: both;
      -o-animation-delay: 0;
      -o-animation-duration: 0.35s;
      -o-animation-name: barHover;
      -o-animation-fill-mode: both;
      animation-delay: 0;
      animation-duration: 0.35s;
      animation-name: barHover;
      animation-fill-mode: both; }
    .wr-saved-location-box-container .wr-saved-location-box__temperature {
      width: 2em; }
    .wr-saved-location-box-container .wr-saved-location-box__low-label {
      opacity: 1; }
    .wr-saved-location-box-container .wr-saved-location-box__temperature-bar {
      border-bottom: 6px solid;
      bottom: 0;
      -webkit-transition: border-bottom 1.4s;
      transition: border-bottom 1.4s; }
    .wr-saved-location-box-container .wr-saved-location-box__remove-location-btn-touch-area {
      z-index: 1;
      float: right;
      height: 2rem;
      width: 2rem;
      position: absolute;
      top: 0;
      right: 0; }
      .wr-saved-location-box-container .wr-saved-location-box__remove-location-btn-touch-area--enlarged {
        height: 2.75rem;
        width: 2.75rem; }
    .wr-saved-location-box-container .wr-saved-location-box__add-location-btn, .wr-saved-location-box-container .wr-saved-location-box__search-location-btn, .wr-saved-location-box-container .wr-saved-location-box__remove-location-btn-background {
      z-index: 1;
      background: rgba(30, 67, 109, 0.32);
      float: right;
      text-align: center;
      height: 2rem;
      width: 2rem;
      position: absolute;
      top: 0;
      right: 0; }
      .wr-saved-location-box-container .wr-saved-location-box__add-location-btn svg, .wr-saved-location-box-container .wr-saved-location-box__search-location-btn svg, .wr-saved-location-box-container .wr-saved-location-box__remove-location-btn-background svg {
        width: 1rem;
        height: 1rem; }
    .wr-saved-location-box-container .wr-saved-location-box__warning {
      position: absolute;
      top: -1px;
      right: 2rem;
      height: 1rem;
      width: 1rem; }
    .wr-saved-location-box-container .wr-saved-location-box__title {
      height: 3.5rem;
      max-width: calc(100% - 2rem);
      overflow: hidden;
      padding-right: 4px; }
      a:focus .wr-saved-location-box-container .wr-saved-location-box__title {
        background: rgba(30, 67, 109, 0.32); }
    .wr-saved-location-box-container .wr-saved-location-box__title--warnings {
      max-width: calc(100% - 3rem - 4px); }
    .wr-saved-location-box-container .wr-saved-location-box__remove-disabled .wr-saved-location-box__title {
      max-width: 100%;
      padding-right: 8px; }
    .wr-saved-location-box-container .wr-saved-location-box__remove-disabled .wr-saved-location-box__title--warnings {
      max-width: calc(100% - 1rem - 8px);
      padding-right: 4px; }
    .wr-saved-location-box-container .wr-saved-location-box__remove-disabled .wr-saved-location-box__warning {
      right: 4px; }
    .wr-saved-location-box-container .wr-saved-location-box__location-name {
      display: block;
      overflow: hidden;
      hyphens: auto;
      word-wrap: break-word;
      overflow-wrap: break-word;
      height: auto;
      width: 100%;
      position: relative; }
    .wr-saved-location-box-container .wr-saved-location-box__location-name-visible {
      white-space: pre-line;
      overflow: hidden;
      text-overflow: ellipsis;
      -webkit-box-orient: vertical;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      position: absolute;
      width: 100%;
      left: 0;
      top: 0; }
    .wr-saved-location-box-container .wr-saved-location-box__add-location-btn:hover, .wr-saved-location-box-container .wr-saved-location-box__add-location-btn:active, .wr-saved-location-box-container .wr-saved-location-box__add-location-btn:focus, .wr-saved-location-box-container .wr-saved-location-box__search-location-btn:hover, .wr-saved-location-box-container .wr-saved-location-box__search-location-btn:active, .wr-saved-location-box-container .wr-saved-location-box__search-location-btn:focus {
      background: #0090ff; }
    .wr-saved-location-box-container .wr-saved-location-box__remove-location-btn-touch-area .wr-saved-location-box__remove-icon {
      display: none; }
    .wr-saved-location-box-container .wr-saved-location-box__remove-location-btn-touch-area .wr-saved-location-box__saved-icon {
      display: block; }
    .wr-touch--inactive .wr-saved-location-box__remove-location-btn-touch-area:hover .wr-saved-location-box__remove-location-btn-background {
      background: #0090ff; }
    .wr-touch--inactive .wr-saved-location-box__remove-location-btn-touch-area:hover .wr-saved-location-box__saved-icon {
      display: none; }
    .wr-touch--inactive .wr-saved-location-box__remove-location-btn-touch-area:hover .wr-saved-location-box__remove-icon {
      display: block; }
    .wr-saved-location-box-container .wr-saved-location-box__remove-location-btn-touch-area:active .wr-saved-location-box__remove-location-btn-background,
    .wr-saved-location-box-container .wr-saved-location-box__remove-location-btn-touch-area:focus .wr-saved-location-box__remove-location-btn-background {
      background: #0090ff; }
    .wr-saved-location-box-container .wr-saved-location-box__remove-location-btn-touch-area:active .wr-saved-location-box__saved-icon,
    .wr-saved-location-box-container .wr-saved-location-box__remove-location-btn-touch-area:focus .wr-saved-location-box__saved-icon {
      display: none; }
    .wr-saved-location-box-container .wr-saved-location-box__remove-location-btn-touch-area:active .wr-saved-location-box__remove-icon,
    .wr-saved-location-box-container .wr-saved-location-box__remove-location-btn-touch-area:focus .wr-saved-location-box__remove-icon {
      display: block; }
    .wr-saved-location-box-container .wr-saved-location-box .wr-loading-icon {
      height: 1.5rem;
      width: 1.5rem;
      fill: #FFFFFF;
      -webkit-animation-duration: 2.1s;
      -webkit-animation-name: spin;
      -webkit-animation-iteration-count: infinite;
      -webkit-animation-timing-function: linear;
      -moz-animation-duration: 2.1s;
      -moz-animation-name: spin;
      -moz-animation-iteration-count: infinite;
      -moz-animation-timing-function: linear;
      -o-animation-duration: 2.1s;
      -o-animation-name: spin;
      -o-animation-iteration-count: infinite;
      -o-animation-timing-function: linear;
      animation-duration: 2.1s;
      animation-name: spin;
      animation-iteration-count: infinite;
      animation-timing-function: linear; }
    .wr-saved-location-box-container .wr-saved-location-box .wr-error-icon {
      height: 1.5rem;
      width: 1.5rem;
      color: #FFFFFF; }
    .wr-saved-location-box-container .wr-saved-location-box .wr-day-temperature--temp41andhigher {
      border-color: #9a1b1e; }
    .wr-saved-location-box-container .wr-saved-location-box .wr-day-temperature--temp36to40 {
      border-color: #c12026; }
    .wr-saved-location-box-container .wr-saved-location-box .wr-day-temperature--temp30to35 {
      border-color: #ee2d29; }
    .wr-saved-location-box-container .wr-saved-location-box .wr-day-temperature--temp25to29 {
      border-color: #eb5038; }
    .wr-saved-location-box-container .wr-saved-location-box .wr-day-temperature--temp21to24 {
      border-color: #f26a30; }
    .wr-saved-location-box-container .wr-saved-location-box .wr-day-temperature--temp19to20 {
      border-color: #f68a1f; }
    .wr-saved-location-box-container .wr-saved-location-box .wr-day-temperature--temp17to18 {
      border-color: #faa31a; }
    .wr-saved-location-box-container .wr-saved-location-box .wr-day-temperature--temp15to16 {
      border-color: #fbb616; }
    .wr-saved-location-box-container .wr-saved-location-box .wr-day-temperature--temp13to14 {
      border-color: #fcc90d; }
    .wr-saved-location-box-container .wr-saved-location-box .wr-day-temperature--temp11to12 {
      border-color: #fedb00; }
    .wr-saved-location-box-container .wr-saved-location-box .wr-day-temperature--temp9to10 {
      border-color: #d0d73e; }
    .wr-saved-location-box-container .wr-saved-location-box .wr-day-temperature--temp7to8 {
      border-color: #afd251; }
    .wr-saved-location-box-container .wr-saved-location-box .wr-day-temperature--temp5to6 {
      border-color: #9fcd80; }
    .wr-saved-location-box-container .wr-saved-location-box .wr-day-temperature--temp3to4 {
      border-color: #aad6ae; }
    .wr-saved-location-box-container .wr-saved-location-box .wr-day-temperature--temp1to2 {
      border-color: #aedcd8; }
    .wr-saved-location-box-container .wr-saved-location-box .wr-day-temperature--temp0to-2 {
      border-color: #51bfed; }
    .wr-saved-location-box-container .wr-saved-location-box .wr-day-temperature--temp-3to-5 {
      border-color: #43a3d9; }
    .wr-saved-location-box-container .wr-saved-location-box .wr-day-temperature--temp-6to-10 {
      border-color: #3789c6; }
    .wr-saved-location-box-container .wr-saved-location-box .wr-day-temperature--temp-11to-15 {
      border-color: #2374b6; }
    .wr-saved-location-box-container .wr-saved-location-box .wr-day-temperature--temp-16to-22 {
      border-color: #0262a9; }
    .wr-saved-location-box-container .wr-saved-location-box .wr-day-temperature--temp-23andlower {
      border-color: #1f4799; }
    .wr-saved-location-box-container .wr-saved-location-box .wr-day-temperature--temp-invalid {
      border-color: #d5d0cd; }
    .wr-saved-location-box-container .wr-saved-location-box--touched-remove-btn {
      background: rgba(30, 67, 109, 0.55); }
      .wr-saved-location-box-container .wr-saved-location-box--touched-remove-btn a:focus .wr-saved-location-box__title {
        background: none;
        outline: none; }
      .wr-saved-location-box-container .wr-saved-location-box--touched-remove-btn .wr-saved-location-box__remove-icon {
        display: block; }
      .wr-saved-location-box-container .wr-saved-location-box--touched-remove-btn .wr-saved-location-box__saved-icon {
        display: none; }
      .wr-saved-location-box-container .wr-saved-location-box--touched-remove-btn .wr-saved-location-box__remove-location-btn-background {
        background: #0090ff; }
      .wr-saved-location-box-container .wr-saved-location-box--touched-remove-btn .wr-saved-location-box__remove-location-btn-touch-area {
        outline: none; }

.wr-saved-location-box-container-inner {
  color: white;
  background: rgba(30, 67, 109, 0.32);
  height: 100%; }

.wr-u-remove-location--selected .wr-saved-location-box-container-inner {
  transition: height 0.7s;
  transition-timing-function: cubic-bezier(0.25, 0.1, 0, 1);
  transition-delay: 0.1s;
  height: 0; }

.wr-u-remove-location--selected .wr-saved-location-box {
  transition: opacity 0.1s linear;
  opacity: 0; }

.wr-u-remove-location--fade .wr-saved-location-box {
  transition: opacity 0.4s linear;
  opacity: 0; }

.wr-u-remove-location--disappear .wr-saved-location-box {
  transition: opacity 0.4s linear;
  opacity: 0; }

.wr-u-remove-location--disappear-last .wr-saved-location-box {
  transition: opacity 0.4s linear;
  opacity: 0; }

.wr-u-remove-location--disappear-last .wr-saved-location-box-container-inner {
  transition: background 0.4s linear;
  background: none; }

@media (min-width: 63em) {
  .wr-u-remove-location--disappear .wr-saved-location-box-container-inner {
    transition: background 0.4s linear;
    background: none; } }