/*!**********************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??clonedRuleSet-3.use[2]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-3.use[4]!./src/scss/outages.scss ***!
  \**********************************************************************************************************************************************************************************************************/
@import url(https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700&family=Nunito:wght@400;600;800;900&family=Rajdhani:wght@600;700&display=swap);
/*!**************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/postcss-loader/dist/cjs.js!./node_modules/floating-vue/dist/style.css ***!
  \**************************************************************************************************************************************/
.resize-observer[data-v-8859cc6c]{position:absolute;top:0;left:0;z-index:-1;width:100%;height:100%;border:none;background-color:transparent;pointer-events:none;display:block;overflow:hidden;opacity:0}.resize-observer[data-v-8859cc6c] object{display:block;position:absolute;top:0;left:0;height:100%;width:100%;overflow:hidden;pointer-events:none;z-index:-1}.v-popper__popper{z-index:10000;top:0;left:0;outline:none}.v-popper__popper.v-popper__popper--hidden{visibility:hidden;opacity:0;transition:opacity .15s,visibility .15s;pointer-events:none}.v-popper__popper.v-popper__popper--shown{visibility:visible;opacity:1;transition:opacity .15s}.v-popper__popper.v-popper__popper--skip-transition,.v-popper__popper.v-popper__popper--skip-transition>.v-popper__wrapper{transition:none!important}.v-popper__backdrop{position:absolute;top:0;left:0;width:100%;height:100%;display:none}.v-popper__inner{position:relative;box-sizing:border-box;overflow-y:auto}.v-popper__inner>div{position:relative;z-index:1;max-width:inherit;max-height:inherit}.v-popper__arrow-container{position:absolute;width:10px;height:10px}.v-popper__popper--arrow-overflow .v-popper__arrow-container,.v-popper__popper--no-positioning .v-popper__arrow-container{display:none}.v-popper__arrow-inner,.v-popper__arrow-outer{border-style:solid;position:absolute;top:0;left:0;width:0;height:0}.v-popper__arrow-inner{visibility:hidden;border-width:7px}.v-popper__arrow-outer{border-width:6px}.v-popper__popper[data-popper-placement^=top] .v-popper__arrow-inner,.v-popper__popper[data-popper-placement^=bottom] .v-popper__arrow-inner{left:-2px}.v-popper__popper[data-popper-placement^=top] .v-popper__arrow-outer,.v-popper__popper[data-popper-placement^=bottom] .v-popper__arrow-outer{left:-1px}.v-popper__popper[data-popper-placement^=top] .v-popper__arrow-inner,.v-popper__popper[data-popper-placement^=top] .v-popper__arrow-outer{border-bottom-width:0;border-left-color:transparent!important;border-right-color:transparent!important;border-bottom-color:transparent!important}.v-popper__popper[data-popper-placement^=top] .v-popper__arrow-inner{top:-2px}.v-popper__popper[data-popper-placement^=bottom] .v-popper__arrow-container{top:0}.v-popper__popper[data-popper-placement^=bottom] .v-popper__arrow-inner,.v-popper__popper[data-popper-placement^=bottom] .v-popper__arrow-outer{border-top-width:0;border-left-color:transparent!important;border-right-color:transparent!important;border-top-color:transparent!important}.v-popper__popper[data-popper-placement^=bottom] .v-popper__arrow-inner{top:-4px}.v-popper__popper[data-popper-placement^=bottom] .v-popper__arrow-outer{top:-6px}.v-popper__popper[data-popper-placement^=left] .v-popper__arrow-inner,.v-popper__popper[data-popper-placement^=right] .v-popper__arrow-inner{top:-2px}.v-popper__popper[data-popper-placement^=left] .v-popper__arrow-outer,.v-popper__popper[data-popper-placement^=right] .v-popper__arrow-outer{top:-1px}.v-popper__popper[data-popper-placement^=right] .v-popper__arrow-inner,.v-popper__popper[data-popper-placement^=right] .v-popper__arrow-outer{border-left-width:0;border-left-color:transparent!important;border-top-color:transparent!important;border-bottom-color:transparent!important}.v-popper__popper[data-popper-placement^=right] .v-popper__arrow-inner{left:-4px}.v-popper__popper[data-popper-placement^=right] .v-popper__arrow-outer{left:-6px}.v-popper__popper[data-popper-placement^=left] .v-popper__arrow-container{right:-10px}.v-popper__popper[data-popper-placement^=left] .v-popper__arrow-inner,.v-popper__popper[data-popper-placement^=left] .v-popper__arrow-outer{border-right-width:0;border-top-color:transparent!important;border-right-color:transparent!important;border-bottom-color:transparent!important}.v-popper__popper[data-popper-placement^=left] .v-popper__arrow-inner{left:-2px}.v-popper--theme-dropdown .v-popper__inner{background:#fff;color:#000;border-radius:6px;border:1px solid #ddd;box-shadow:0 6px 30px #0000001a}.v-popper--theme-dropdown .v-popper__arrow-inner{visibility:visible;border-color:#fff}.v-popper--theme-dropdown .v-popper__arrow-outer{border-color:#ddd}.v-popper--theme-tooltip .v-popper__inner{background:rgba(0,0,0,.8);color:#fff;border-radius:6px;padding:7px 12px 6px}.v-popper--theme-tooltip .v-popper__arrow-outer{border-color:#000c}

/*!**************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??clonedRuleSet-3.use[2]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-3.use[4]!./src/scss/outages.scss (1) ***!
  \**************************************************************************************************************************************************************************************************************/
/*
	Link box style
	Use any element but put text in a <p> and if you want an arrow add a <span>
	eg: <a href="" class="readmore readmore__linkBox"><p>Text</p><span></span></a>
*/
/*
	Size in pixels, either 12, 8, or 6
	Angle will rotate the whole bracket, either 0 or 90
	Add styles for top, right, bottom, left etc. Margin is set to auto.
*/
/*
	Size in pixels (no px)
	Angle will rotate the whole bracket
*/
/**
 * Clearfix
 **/
/**
 * [Subtracts the border and padding from the width of the element.]
 */
/**
 * [scale description]
 * @param  {[int]} $zoom [The level of zoom you want on the element. eg: '1.1'.]
 */
/**
 * [Pass the angle you want the element to rotate. eg: 90deg. NOTE: You need to add 'deg' to the angle. eg: 90deg.]
 * @param  {[int with 'deg' appended]} $deg [The angle of the rotation]
 */
/**
 * [Rotate and vertically align element within a relatively positioned element. NOTE: You need to add 'deg' to the angle. eg: 90deg.]
 * @param  {[percentage]} $topPos [Pass the vertical position as a percetage. eg 50% will horizontally center align the element.]
 * @param  {[int with 'deg' appended]} $deg [The angle of the rotation]
 */
/**
 * [Rotate and horizontally align element within a relatively positioned element. NOTE: You need to add 'deg' to the angle. eg: 90deg.]
 * @param  {[percentage]} $topPos [Pass the vertical position as a percetage. eg 50% will horizontally center align the element.]
 * @param  {[int with 'deg' appended]} $deg [The angle of the rotation]
 */
/**
 * [Vertically align element within a relatively positioned element.]
 * @param  {[percentage]} $topPos [Pass the vertical position as a percetage. eg 50% will vertically center align the element.]
 */
/**
 * [Horizontally align element within a relatively positioned element.]
 * @param  {[percentage]} $leftPos [Pass the vertical position as a percetage. eg 50% will horizontally center align the element.]
 */
/**
 * [Horizontally and vertically align element within a relatively positioned element.]
 * @param  {[percentage]} $leftPos [Pass the horizontally position as a percetage. eg 50% will horizontally center align the element.]
 * @param  {[percentage]} $topPos [Pass the vertical position as a percetage. eg 50% will horizontally center align the element.]
 */
/**
 * [transition description]
 * @param  {[style]} $propertie [The style you want to animate. Defaults to 'all'.]
 * @param  {[int in seconds]} $time      [The speed at which you want the transition to take. Defaults to '0.3s'.]
 * @param  {[movement type]} $mode      [The type of movement you want eg: linear, ease, ease-in, ease-out. Defaults to 'linear'.]
 */
/**
 * Grid panels
 * Creates a grid of items that have a fixed height
 * @param $cols int = number of items per row
 * @param $col_gap percent = gap between items in each row (optional, defaults to 2%)
 * @param $row_gap percent = gap between row (optional, defaults to two times col_gap (4%))
 **/
/**
 * Ease between states
 * Use this to smooth hover/active/focus events
 **/
/**
 * Multi-column
 * @param $cols int = number of columns to span
 * @param $sum int = total number of columns
 * @param $gap mixed = gap between items (optional, defaults to 1rem)
 **/
/* String Replace */
/* Font Face */
@keyframes spin {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
/* Fonts */
@font-face {
  font-family: "BetaSans";
  src: url("/_resources/app/client/assets/fonts/betasans-normal-webfont.eot?") format("eot"), url("/_resources/app/client/assets/fonts/betasans-normal-webfont.woff2") format("woff2"), url("/_resources/app/client/assets/fonts/betasans-normal-webfont.woff") format("woff"), url("/_resources/app/client/assets/fonts/betasans-normal-webfont.ttf") format("truetype"), url("/_resources/app/client/assets/fonts/betasans-normal-webfont.svg#BetaSans") format("svg");
  font-display: swap;
}
@font-face {
  font-family: "BetaSansBold";
  src: url("/_resources/app/client/assets/fonts/betasans-bold-webfont.eot?") format("eot"), url("/_resources/app/client/assets/fonts/betasans-bold-webfont.woff2") format("woff2"), url("/_resources/app/client/assets/fonts/betasans-bold-webfont.woff") format("woff"), url("/_resources/app/client/assets/fonts/betasans-bold-webfont.ttf") format("truetype"), url("/_resources/app/client/assets/fonts/betasans-bold-webfont.svg#BetaSansBold") format("svg");
  font-display: swap;
}
/* Breakpoints */
/**
 * Colours
 **/
/**
 * Map names to colours
 * @type {[type]}
 */
.black-text {
  color: #000000 !important;
}
.black-text a {
  color: #000000 !important;
}

.black_bg {
  background-color: #000000 !important;
}

.dark_blue-text {
  color: #10193F !important;
}
.dark_blue-text a {
  color: #10193F !important;
}

.dark_blue_bg {
  background-color: #10193F !important;
}

.white-text {
  color: #FFFFFF !important;
}
.white-text a {
  color: #FFFFFF !important;
}

.white_bg {
  background-color: #FFFFFF !important;
}

.yellow-text {
  color: #FDB930 !important;
}
.yellow-text a {
  color: #FDB930 !important;
}

.yellow_bg {
  background-color: #FDB930 !important;
}

.orange-text {
  color: #FD9030 !important;
}
.orange-text a {
  color: #FD9030 !important;
}

.orange_bg {
  background-color: #FD9030 !important;
}

.off_white-text {
  color: #ECECEC !important;
}
.off_white-text a {
  color: #ECECEC !important;
}

.off_white_bg {
  background-color: #ECECEC !important;
}

.light_grey-text {
  color: #BFBFBF !important;
}
.light_grey-text a {
  color: #BFBFBF !important;
}

.light_grey_bg {
  background-color: #BFBFBF !important;
}

.medium_grey-text {
  color: #8F8F8F !important;
}
.medium_grey-text a {
  color: #8F8F8F !important;
}

.medium_grey_bg {
  background-color: #8F8F8F !important;
}

.grey-text {
  color: #707070 !important;
}
.grey-text a {
  color: #707070 !important;
}

.grey_bg {
  background-color: #707070 !important;
}

.dark_grey-text {
  color: #313131 !important;
}
.dark_grey-text a {
  color: #313131 !important;
}

.dark_grey_bg {
  background-color: #313131 !important;
}

.charcoal-text {
  color: #282828 !important;
}
.charcoal-text a {
  color: #282828 !important;
}

.charcoal_bg {
  background-color: #282828 !important;
}

.light_yellow-text {
  color: rgba(253, 185, 48, 0.2) !important;
}
.light_yellow-text a {
  color: rgba(253, 185, 48, 0.2) !important;
}

.light_yellow_bg {
  background-color: rgba(253, 185, 48, 0.2) !important;
}

.light_orange-text {
  color: rgba(253, 144, 48, 0.2) !important;
}
.light_orange-text a {
  color: rgba(253, 144, 48, 0.2) !important;
}

.light_orange_bg {
  background-color: rgba(253, 144, 48, 0.2) !important;
}

.dark_orange-text {
  color: #FD6830 !important;
}
.dark_orange-text a {
  color: #FD6830 !important;
}

.dark_orange_bg {
  background-color: #FD6830 !important;
}

.burnt_orange-text {
  color: #c93f0b !important;
}
.burnt_orange-text a {
  color: #c93f0b !important;
}

.burnt_orange_bg {
  background-color: #c93f0b !important;
}

.red-text {
  color: red !important;
}
.red-text a {
  color: red !important;
}

.red_bg {
  background-color: red !important;
}

.stay_orange-text {
  color: #FC9232 !important;
}
.stay_orange-text a {
  color: #FC9232 !important;
}

.stay_orange_bg {
  background-color: #FC9232 !important;
}

.stay_blue-text {
  color: #6AB0C6 !important;
}
.stay_blue-text a {
  color: #6AB0C6 !important;
}

.stay_blue_bg {
  background-color: #6AB0C6 !important;
}

.sp-green-text {
  color: #087C37 !important;
}
.sp-green-text a {
  color: #087C37 !important;
}

.sp-green_bg {
  background-color: #087C37 !important;
}

.sp-gold-text {
  color: #FDB930 !important;
}
.sp-gold-text a {
  color: #FDB930 !important;
}

.sp-gold_bg {
  background-color: #FDB930 !important;
}

.sp-purple-text {
  color: #9D489B !important;
}
.sp-purple-text a {
  color: #9D489B !important;
}

.sp-purple_bg {
  background-color: #9D489B !important;
}

.sp-dark-purple-text {
  color: #7A4278 !important;
}
.sp-dark-purple-text a {
  color: #7A4278 !important;
}

.sp-dark-purple_bg {
  background-color: #7A4278 !important;
}

.sp-blue-text {
  color: #2393FF !important;
}
.sp-blue-text a {
  color: #2393FF !important;
}

.sp-blue_bg {
  background-color: #2393FF !important;
}

.sp-light_grey-text {
  color: #ECECEC !important;
}
.sp-light_grey-text a {
  color: #ECECEC !important;
}

.sp-light_grey_bg {
  background-color: #ECECEC !important;
}

.sp-medium_grey-text {
  color: #707070 !important;
}
.sp-medium_grey-text a {
  color: #707070 !important;
}

.sp-medium_grey_bg {
  background-color: #707070 !important;
}

.we-black-text {
  color: #000000 !important;
}
.we-black-text a {
  color: #000000 !important;
}

.we-black_bg {
  background-color: #000000 !important;
}

.we-white-text {
  color: #FFFFFF !important;
}
.we-white-text a {
  color: #FFFFFF !important;
}

.we-white_bg {
  background-color: #FFFFFF !important;
}

.we-yellow-text {
  color: #FDB930 !important;
}
.we-yellow-text a {
  color: #FDB930 !important;
}

.we-yellow_bg {
  background-color: #FDB930 !important;
}

.we-orange-text {
  color: #FD9030 !important;
}
.we-orange-text a {
  color: #FD9030 !important;
}

.we-orange_bg {
  background-color: #FD9030 !important;
}

/**
 * Retrieve colour from $colours map
 * @param  {string} $key [name of colour, as defined in $colours map]
 * @return hex colour
 */
/** 
 * Responsive rules
 * Creates @media wrappers
 **/
.c-outages-nav {
  width: 100%;
  position: relative;
  border-bottom: 1px solid #000000;
  background: #ECECEC;
  box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.25);
  display: flex;
  justify-content: space-between;
  padding: 10px 0px;
  z-index: 1;
}
@media (max-width: 900px) {
  .c-outages-nav {
    flex-direction: column-reverse;
    gap: 16px;
  }
}

.c-outages-nav__filter {
  display: flex;
  flex-direction: row;
  margin-left: 75px;
  gap: 24px;
}
@media (max-width: 900px) {
  .c-outages-nav__filter {
    align-items: center;
    justify-content: center;
    gap: 0 20px;
    margin: 0px 20px;
    flex-wrap: wrap;
  }
}

.c-outages-nav__filter-tooltip {
  display: flex;
  align-self: start;
  margin-top: 4px;
}

.c-outages-nav__filter-button {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  border: none;
  gap: 4px;
  background: #ECECEC;
  width: fit-content;
  padding: 0px;
}

.c-outages-nav__filter-input {
  position: relative;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 1px solid #000000;
  background: #FFFFFF;
  accent-color: #000000;
  cursor: pointer;
}

.c-outages-nav__filter-label {
  color: #313131;
  font-family: Nunito;
  font-size: 14px;
  font-style: normal;
  font-weight: 800;
  line-height: normal;
  padding: 10px 0px;
  display: flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
}

.c-outages-nav__view {
  display: flex;
  flex-direction: row;
  margin-right: 75px;
  gap: 24px;
}
@media (max-width: 900px) {
  .c-outages-nav__view {
    margin: 0 20px;
    gap: 15px;
    align-self: flex-end;
    flex-wrap: wrap;
  }
}

.c-outages-nav__view-button {
  border: 2px solid #000000;
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 8px 16px;
  height: auto;
  column-gap: 6px;
  width: fit-content;
  font-family: Nunito;
  font-size: 14px;
  font-style: normal;
  font-weight: 800;
  line-height: normal;
  cursor: pointer;
}
.c-outages-nav__view-button--toggled {
  background: #FDB930;
}

.c-outages-nav__view-label {
  color: #000000;
}

.c-outages-nav__bottom {
  display: block;
  width: 100%;
}

.c-outages-container {
  position: relative;
  width: 100%;
}

.c-outages-container__mapview-wrapper {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  height: 80vh;
  max-height: 800px;
  position: relative;
}

.c-outages-container__mapview-outages {
  min-width: 500px;
  width: 30%;
  background: #ECECEC;
  height: 100%;
  display: flex;
  flex-direction: column;
}
@media (max-width: 900px) {
  .c-outages-container__mapview-outages {
    display: none;
  }
}

.c-outages-container__mapview-map {
  position: relative;
  height: 100%;
  flex: 1 1 auto;
}

.c-outages-container__mapview-map-legend {
  position: absolute;
  bottom: 0;
  right: 0;
  border: 1px solid #000000;
  border-bottom: 0;
  border-right: 0;
  width: fit-content;
  background: #FFFFFF;
  display: flex;
  flex-direction: row;
  gap: 32px;
  padding: 8px 16px;
  flex-wrap: wrap;
}

.c-outages-container__mapview-map-legend-outage {
  display: flex;
  flex-direction: row;
  gap: 4px;
  align-items: center;
}

.c-outages-container__mapview-map-legend-text {
  color: #000000;
  font-family: Nunito;
  font-size: 14px;
  font-style: normal;
  font-weight: 800;
  line-height: normal;
}

.c-outages-container__mapview-map-legend-icon {
  width: 18px;
  height: 30px;
}

.c-outages-container__mapview-footer {
  width: 100%;
  border-top: 2px solid #000000;
}

.c-outages-container__listview {
  display: flex;
  flex-direction: column;
}

.c-outages-container__listview-results-wrapper {
  display: flex;
  flex-direction: row;
}
@media (max-width: 900px) {
  .c-outages-container__listview-results-wrapper {
    flex-direction: column;
  }
}

.c-outages-container__listview-results {
  width: 70%;
}
@media (max-width: 900px) {
  .c-outages-container__listview-results {
    width: 100%;
  }
}

.c-outages-container__listview-sidebar {
  width: 30%;
}
@media (max-width: 900px) {
  .c-outages-container__listview-sidebar {
    width: 100%;
  }
}

.c-outages-search {
  width: 100%;
  background: #ECECEC;
}

.c-outages-search__form {
  width: 75%;
  margin: auto;
  display: flex;
  flex-direction: row;
  padding: 30px 0px;
  gap: 8px;
}
.c-outages-search__form--list-view {
  margin-left: 75px;
  width: 35%;
}
@media (max-width: 900px) {
  .c-outages-search__form--list-view {
    width: 90%;
    margin: 0px auto;
  }
}

.c-outages-search__label {
  margin: 0 5px;
  color: #313131;
  font-family: Nunito;
  font-size: 16px;
  font-style: normal;
  font-weight: 800;
  line-height: normal;
  margin-top: 10px;
}

.c-outages-search__input-wrapper {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}

.c-outages-search__input {
  border: 2px solid #000000;
  color: #313131;
  font-family: Nunito;
  font-size: 16px;
  font-weight: 600;
  line-height: normal;
}

.c-outages-search__information {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  margin-top: 16px;
}

.c-outages-search__results {
  color: #000000;
  font-family: Nunito;
  font-size: 16px;
  font-style: italic;
  font-weight: 700;
  line-height: normal;
}

.c-outages-search__clear {
  color: #000000;
  font-family: Nunito;
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
  line-height: normal;
  text-decoration-line: underline;
  cursor: pointer;
  background: #FFFFFF;
  padding: 6px 16px;
  border: 1px solid #000000;
}

.c-outages-results {
  width: 100%;
  position: relative;
  background: #ECECEC;
  height: 100%;
  overflow: auto;
}
.c-outages-results--list-view {
  background: #FFFFFF;
}

.c-outage-result__unplanned {
  border-top: 1px solid #8F8F8F;
  background: rgba(253, 144, 48, 0.2);
  padding: 24px 0px;
  position: relative;
  width: 100%;
}
.c-outage-result__unplanned--list-view {
  width: auto;
  margin: 32px 5%;
  border: 1px solid #8F8F8F;
}
.c-outage-result__unplanned:last-of-type {
  border-bottom: 1px solid #8F8F8F;
}

.c-outage-result__planned {
  border-top: 1px solid #8F8F8F;
  border-bottom: 1px solid #8F8F8F;
  background: rgba(253, 185, 48, 0.2);
  padding: 24px 0px;
  position: relative;
  width: 100%;
}
.c-outage-result__planned--list-view {
  width: auto;
  margin: 32px 5%;
  border: 1px solid #8F8F8F;
}

.c-outage-result__planned-triangle {
  position: absolute;
  top: 0;
  left: 0;
  display: inline-block;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 62px 62px 0 0;
  border-color: #FDB930 transparent transparent transparent;
}
.c-outage-result__planned-triangle--cancelled {
  border-color: #10193F transparent transparent transparent;
}

.c-outage-result__unplanned-triangle {
  position: absolute;
  top: 0;
  left: 0;
  width: 62px;
  height: 62px;
  display: inline-block;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 62px 62px 0 0;
  border-color: #FD9030 transparent transparent transparent;
}

.c-outage-result__wrapper {
  position: relative;
  width: 84%;
  margin: auto;
  display: flex;
  flex-direction: row;
  column-gap: 16px;
  padding-left: 16px;
}

.c-outage-result__graphic {
  width: 28px;
  height: 46px;
}

.c-outage-result__details-holder {
  margin-bottom: 18px;
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.c-outage-result__outage-number {
  position: absolute;
  top: -10px;
  right: 0;
  margin: 0;
  color: #000000;
  text-align: right;
  font-family: Nunito;
  font-size: 10px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}

.c-outage-result__outage-title {
  color: #000000;
  font-family: Nunito;
  font-size: 21px;
  font-style: normal;
  font-weight: 800;
  line-height: normal;
  margin-bottom: -5px;
}
@media (max-width: 900px) {
  .c-outage-result__outage-title {
    margin-top: 10px;
  }
}
.c-outage-result__outage-title a {
  color: #000000;
}

.c-outage-result__outage-type {
  color: var(--black, #000);
  font-family: Nunito;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  margin-bottom: 18px;
}

.c-outage-result__outage-type-cancelled {
  text-decoration: line-through;
}

.c-outage-result__outage-cancelled {
  background: #10193F;
  color: #FFFFFF;
  color: var(--white, #fff);
  font-family: Nunito;
  font-size: 14px;
  font-style: normal;
  font-weight: 800;
  line-height: normal;
  padding: 0px 8px;
}

.c-outage-result__outage-alternate-date-wrapper {
  white-space: nowrap;
}

.c-outage-result__outage-alternate-date {
  background: #5cc4ff;
  color: #10193f;
  font-family: Nunito;
  font-size: 14px;
  font-style: normal;
  font-weight: 800;
  line-height: normal;
  padding: 0px 8px;
}
.c-outage-result__outage-alternate-date--strike {
  text-decoration: line-through;
}

.c-outage-result__start-time {
  color: var(--black, #000);
  font-family: Nunito;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}
.c-outage-result__start-time--cancelled {
  text-decoration: line-through;
}

.c-outage-result__end-time {
  color: var(--black, #000);
  font-family: Nunito;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}
.c-outage-result__end-time--cancelled {
  text-decoration: line-through;
}

.c-outage-result__alternate-date {
  color: var(--black, #000);
  font-family: Nunito;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}
.c-outage-result__alternate-date--cancelled {
  text-decoration: line-through;
}

.c-outage-result__bold {
  color: #000000;
  font-family: Nunito;
  font-size: 14px;
  font-style: normal;
  font-weight: 800;
  line-height: normal;
}

.c-outage-result__additional-details {
  color: #000000;
  font-family: Nunito;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}

.c-outage-result__update {
  color: var(--black, #000);
  font-family: Nunito;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  margin: 16px 0px;
}

.c-outage-result__last-updated {
  color: var(--black, #000);
  font-family: Nunito;
  font-size: 10px;
  font-style: italic;
  font-weight: 400;
  line-height: normal;
}

.c-outage-result__link {
  color: var(--black, #000);
  font-family: Nunito;
  font-size: 16px;
  font-style: normal;
  font-weight: 800;
  line-height: normal;
  text-decoration-line: underline;
  display: flex;
  flex-direction: row;
  align-items: center;
  column-gap: 8px;
  margin-top: 8px;
}

.c-outage-result__zoom {
  cursor: pointer;
  position: absolute;
  bottom: 0;
  right: 0;
}

.c-outages-results__no-outages {
  background: #FFFFFF;
  margin: 32px;
  padding: 24px 0px;
}

.c-outages-results__no-outages-inner {
  width: 80%;
  margin: auto;
}

.c-outages-results__no-outages-title {
  color: var(--black, #000);
  text-align: center;
  font-family: Nunito;
  font-size: 21px;
  font-style: normal;
  font-weight: 800;
  line-height: normal;
}

.c-outages-results__no-outages-text {
  color: var(--black, #000);
  text-align: center;
  font-family: Nunito;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}

.c-outages-results__no-outages-button {
  width: fit-content;
  margin: auto;
  margin-top: 32px;
  display: block;
}

/** Feature panel after no results panel **/
.c-outages-results__feature-panel {
  display: block;
  margin: 30px auto 0;
  max-width: 570px;
}

.c-outages-map {
  width: 100%;
  height: 100%;
}

.c-outages-footer {
  width: 100%;
  display: flex;
  flex-direction: row;
}
.c-outages-footer--list-view {
  flex-direction: column;
}
@media (max-width: 900px) {
  .c-outages-footer {
    flex-direction: column;
  }
}

.c-outages-footer__report {
  width: 30%;
  background: #FD6830;
}
.c-outages-footer__report--list-view {
  width: 100%;
}
@media (max-width: 900px) {
  .c-outages-footer__report {
    width: 100%;
  }
}

.c-outages-footer__report-inner {
  width: 80%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  margin: 10% auto;
}

.c-outages-footer__report-icon {
  width: 25%;
  height: auto;
}

.c-outages-footer__report-title {
  color: var(--black, #000);
  text-align: center;
  font-family: Nunito;
  font-size: 43px;
  font-style: normal;
  font-weight: 800;
  line-height: 120%;
}

.c-outages-footer__report-button {
  background: #FFFFFF;
  border: 2px solid #000000;
  color: var(--black, #000);
  font-family: Nunito;
  font-size: 18px;
  font-style: normal;
  font-weight: 800;
  line-height: normal;
  text-transform: uppercase;
  width: fit-content;
  cursor: pointer;
}

.c-outages-footer__panels {
  width: 70%;
  background: #ECECEC;
  display: flex;
  flex-direction: row;
  gap: 30px;
  justify-content: center;
  padding: 40px 0px;
}
.c-outages-footer__panels--list-view {
  width: 100%;
  flex-direction: column;
  background: #FFFFFF;
}
@media (max-width: 900px) {
  .c-outages-footer__panels {
    width: 100%;
    flex-direction: column;
  }
}

.c-outages-footer__panel {
  width: 45%;
  max-width: 600px;
  position: relative;
  display: flex;
  flex-direction: column;
}
.c-outages-footer__panel--list-view {
  width: 100%;
}
@media (max-width: 900px) {
  .c-outages-footer__panel {
    width: 80%;
    margin: auto;
  }
}

.c-outages-footer__panel-image-wrapper {
  position: relative;
  padding-bottom: 63%;
}

.c-outages-footer__panel-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.c-outages-footer__panel-link {
  background: #313131;
  color: #FDB930;
  font-family: Nunito;
  font-size: 18px;
  font-style: normal;
  font-weight: 800;
  line-height: 120%;
  padding: 20px 40px;
}

.c-outage-tooltip {
  width: 15px;
  height: 15px;
  padding: 0;
  border-radius: 50%;
  background: #FFFFFF;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.c-outage-tooltip__inner {
  color: var(--black, #000);
  font-family: Nunito;
  font-size: 10px;
  font-style: normal;
  font-weight: 800;
  line-height: normal;
}

.v-popper--theme-tooltip .v-popper__inner {
  background: white;
  box-shadow: 0 6px 30px rgba(0, 0, 0, 0.1);
  color: #313131;
  font-family: Nunito;
}

.v-popper--theme-tooltip .v-popper__arrow-outer {
  border-color: white;
}

.c-outages-messages {
  position: absolute;
  top: 80px;
  right: 0;
  width: 0;
}

.c-outages-messages__message {
  padding: 10px 30px 10px 20px;
  background-color: #FFFFFF;
  display: flex;
  flex-flow: row nowrap;
  gap: 15px;
  position: absolute;
  right: -350px;
  width: 300px;
  box-shadow: 2px 4px 8px rgba(0, 0, 0, 0.6);
  transition: right 0.8s ease-in-out;
}
.c-outages-messages__message--show {
  right: 0;
}

.c-outages-messages__message-close {
  width: 20px;
  height: 20px;
  overflow: hidden;
  background-image: url("/_resources/app/client/assets/images/icon-close-black.svg");
  background-position: bottom;
  position: absolute;
  top: 10px;
  right: 10px;
  cursor: pointer;
}

.c-outages-messages__message-text {
  font-family: "Nunito";
}
.c-outages-messages__message-text a {
  color: #FD9030;
  text-decoration: underline;
}

.c-outages-messages__cookies {
  position: absolute;
  top: 200px;
  right: 0;
  background-color: white;
  padding: 10px;
  cursor: pointer;
}

/*# sourceMappingURL=outages-app.css.map*/