/*
*/
/*-- 1. Layout and base styles  --*/
/*** The new CSS Reset - version 1.4.2 (last updated 30.11.2021) ***/
/*
    Remove all the styles of the "User-Agent-Stylesheet", except for the 'display' property
    - The "symbol *" part is to solve Firefox SVG sprite bug
 */
*:where(:not(iframe, canvas, img, svg, video):not(svg *, symbol *)) {
  all: unset;
  display: revert;
}

/* Preferred box-sizing value */
*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
}

/* Remove list styles (bullets/numbers) */
ol,
ul,
menu {
  list-style: none;
}

/* For images to not be able to exceed their container */
img {
  max-width: 100%;
}

/* removes spacing between cells in tables */
table {
  border-collapse: collapse;
}

/* revert the 'white-space' property for textarea elements on Safari */
textarea {
  white-space: revert;
}

/* revert for bug in Chromium browsers
   - fix for the content editable attribute will work properly. */
:where([contenteditable]) {
  line-break: after-white-space;
  -webkit-line-break: after-white-space;
  -moz-line-break: after-white-space;
  -webkit-user-modify: read-write;
  -moz-user-modify: read-write;
  overflow-wrap: break-word;
}

a {
  text-decoration: none;
  color: inherit;
}

/*
    Set out base numbers for your design system.
    In this template we use material design principles, so multiples of 8: 
    8px / 16px / 24px / 32px / 40px / 48px / 56px and so on for all padding / margin between elements
*/
.text_color_range_low {
  color: #ffbf00 !important;
}

.background_color_range_low {
  background-color: #ffbf00 !important;
}

.border_color_range_low {
  border-color: #ffbf00 !important;
}

.border_bottom_color_range_low {
  border-bottom-color: #ffbf00 !important;
}

.fill_color_range_low {
  fill: #ffbf00 !important;
}

.text_color_range_medium {
  color: #ff7640 !important;
}

.background_color_range_medium {
  background-color: #ff7640 !important;
}

.border_color_range_medium {
  border-color: #ff7640 !important;
}

.border_bottom_color_range_medium {
  border-bottom-color: #ff7640 !important;
}

.fill_color_range_medium {
  fill: #ff7640 !important;
}

.text_color_range_high {
  color: #f53c3c !important;
}

.background_color_range_high {
  background-color: #f53c3c !important;
}

.border_color_range_high {
  border-color: #f53c3c !important;
}

.border_bottom_color_range_high {
  border-bottom-color: #f53c3c !important;
}

.fill_color_range_high {
  fill: #f53c3c !important;
}

.organization_government_agency {
  background: linear-gradient(0deg, rgb(2, 91, 151) 0%, rgb(0, 164, 205) 100%) !important;
}

.organization_university {
  background: linear-gradient(0deg, rgb(2, 151, 2) 0%, rgb(0, 205, 0) 100%) !important;
}

.organization_private_entity {
  background: linear-gradient(0deg, rgb(151, 2, 151) 0%, rgb(205, 0, 205) 100%) !important;
}

.cursor_auto {
  cursor: auto !important;
}

/*
    Here we will place a comment that explains what should be included in this file.
*/
html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  scroll-behavior: smooth;
}

.main {
  position: relative;
  overflow-x: hidden;
}

a {
  cursor: pointer;
}

p a {
  color: #3d3d3d;
}

ul li {
  list-style-type: circle;
}

.wrap {
  border: 0px solid rgb(0, 255, 234);
  display: flex;
  max-width: 1920px;
  width: 100%;
  height: auto;
}

.hide {
  display: none !important;
}

.hidden {
  visibility: hidden;
}

.display_flex {
  display: flex;
}

.flex_row {
  flex-flow: row;
}

.flex_column {
  flex-flow: column;
}

.display_block {
  display: block;
}

.rotate_up {
  transform: rotate(180deg);
}

.rotate_down {
  transform: rotate(-180deg);
}

#tooltip_container {
  position: absolute;
  top: 0;
  left: 0;
  display: none;
  width: -webkit-max-content;
  width: -moz-max-content;
  width: max-content;
  padding: 0.9rem;
  color: #ffffff;
  font-size: 0.75rem;
  background-color: rgba(0, 0, 0, 0.8);
  z-index: 99;
  border-radius: 20px;
  -webkit-touch-callout: none;
  /* iOS Safari */
  -webkit-user-select: none;
  /* Safari */
  /* Konqueror HTML */
  -moz-user-select: none;
  /* Old versions of Firefox */
  -ms-user-select: none;
  /* Internet Explorer/Edge */
  user-select: none;
  /* Non-prefixed version, currently supported by Chrome, Edge, Opera and Firefox */
  pointer-events: none;
  text-transform: uppercase;
  letter-spacing: 1px;
  line-height: 1.6rem;
}

/* Media queries */
@media only screen and (max-width: 1200px) {
  .wrap {
    padding: 0 60px;
  }
}
@media only screen and (max-width: 680px) {
  .wrap {
    padding: 0 36px;
  }
}
@media only screen and (max-width: 340px) {
  #tooltip_container {
    font-size: 10px;
    line-height: 0.9rem;
  }
}
/*
*/
@font-face {
  font-family: "LatoBold";
  src: url("../fonts/Lato-Bold.eot");
  src: url("../fonts/Lato-Bold.eot?#iefix") format("embedded-opentype"), url("../fonts/Lato-Bold.ttf") format("truetype");
  font-display: swap;
}
@font-face {
  font-family: "Roboto";
  src: url("../fonts/Roboto-Regular.eot");
  src: url("../fonts/Roboto-Regular.eot?#iefix") format("embedded-opentype"), url("../fonts/Roboto-Regular.ttf") format("truetype");
  font-display: swap;
}
html {
  font-size: 16px;
}

body {
  font-family: "Roboto", sans-serif;
  line-height: 3.75rem;
  letter-spacing: 0.1rem;
  color: #3d3d3d;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

#overview_chart_heading_mobile {
  font-size: 3rem;
  line-height: 3.5rem;
}

@media only screen and (max-width: 970px) {
  h2 {
    font-size: 2rem;
    line-height: 2.5rem;
  }
}
/*-- 2. Main styles  --*/
/*
*/
#navbar {
  border: 0px solid rgb(0, 255, 234);
  position: fixed;
  top: 0;
  bottom: 0;
  right: 0;
  width: 300px;
  padding: 24px 48px;
  color: #ffffff;
  font-size: 2.5rem;
  background-color: #32333e;
  z-index: 99;
  overflow-y: scroll;
  overflow-x: hidden;
}
#navbar #navbar_close_button_container {
  border: 0px solid rgb(0, 255, 234);
  display: flex;
  justify-content: flex-end;
  margin-bottom: 48px;
}
#navbar #navbar_close_button_container svg {
  border: 0px solid rgb(0, 255, 234);
  cursor: pointer;
}
#navbar .nav_buttons_container {
  border: 0px solid rgb(0, 255, 234);
  margin-bottom: 48px;
}
#navbar .nav_buttons_container .nav_button_container {
  border: 0px solid rgb(0, 255, 234);
  cursor: pointer;
  border-bottom: 1px solid #575966;
  padding-bottom: 16px;
  margin-bottom: 20px;
}
#navbar .nav_buttons_container .nav_button_container .nav_button {
  border: 0px solid rgb(0, 255, 234);
  display: flex;
  justify-content: space-between;
  width: auto;
  padding: 1rem;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}
#navbar .nav_buttons_container .nav_button_container .nav_button i {
  border: 0px solid rgb(0, 255, 234);
  width: 22px;
  height: 22px;
  margin-top: -2px;
}
#navbar .nav_buttons_container .nav_button_container .nav_button:hover {
  background-color: #575966;
}
#navbar .nav_buttons_container .nav_button_container .dropdown_container {
  border: 0px solid rgb(0, 255, 234);
}
#navbar .nav_buttons_container .nav_button_container .dropdown_container .dropdown_button {
  border: 0px solid rgb(0, 255, 234);
  padding: 0.5rem 1rem;
  font-size: 1.8rem;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}
#navbar .nav_buttons_container .nav_button_container .dropdown_container .dropdown_button:hover {
  background-color: #575966;
}
#navbar .sign_in_button_container {
  border: 1px solid #ffffff;
  padding: 1rem;
  border-radius: 50px;
  cursor: pointer;
}
#navbar .sign_in_button_container .sign_in_button {
  border: 0px solid rgb(0, 255, 234);
  text-align: center;
}
#navbar .sign_in_button_container:hover {
  background-color: #ffffff;
  color: #000000;
}

/* Hide scrollbar for Chrome, Safari and Opera */
#navbar::-webkit-scrollbar {
  display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
#navbar {
  -ms-overflow-style: none; /* IE and Edge */
  scrollbar-width: none; /* Firefox */
}

@media only screen and (max-width: 970px) {
  #navbar {
    width: 100%;
  }
}
/*
*/
#homepage_top_section {
  border: 0px solid rgb(0, 255, 234);
  position: relative;
  z-index: 0;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}
#homepage_top_section #hero_video {
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  transform: translate(-50%, -50%);
  max-width: initial;
}
#homepage_top_section #homepage_top_main_container {
  position: absolute;
  display: flex;
  justify-content: center;
  width: 100%;
  height: 100%;
  background-color: rgba(24, 30, 56, 0.75);
}
#homepage_top_section #homepage_top_main_container .wrap {
  height: 80%;
  margin-top: 152px;
}
#homepage_top_section #homepage_top_main_container #overview_chart_heading_mobile {
  border: 0px solid rgb(0, 255, 234);
  display: none;
  margin-bottom: 24px;
  text-align: center;
}

@media only screen and (max-width: 970px) {
  #homepage_top_section {
    height: auto;
    background: url("++resource++hurricanes.home/img/image_nasa_hurricane.jpg") no-repeat center center fixed;
    background-size: cover;
  }
  #homepage_top_section #hero_video {
    display: none;
  }
  #homepage_top_section #homepage_top_main_container {
    position: static;
    align-items: center;
    height: auto;
    padding-top: 168px;
    padding-bottom: 144px;
  }
  #homepage_top_section #homepage_top_main_container .wrap {
    flex-flow: column;
    height: auto;
    margin-top: 0;
    align-items: center;
  }
  #homepage_top_section #homepage_top_main_container .wrap #overview_chart_container #overview_chart_heading {
    display: none;
  }
  #homepage_top_section #homepage_top_main_container #overview_chart_heading_mobile {
    display: block;
    color: #ffffff;
  }
}
@media screen and (min-height: 580px) and (max-height: 870px) and (min-width: 680px) {
  #homepage_top_section #homepage_top_main_container .wrap {
    height: 76%;
    margin-top: 134px;
  }
}
@media only screen and (max-width: 970px) and (max-height: 870px) {
  #homepage_top_section {
    height: auto;
    background: url("++resource++hurricanes.home/img/image_nasa_hurricane.jpg") no-repeat center center fixed;
    background-size: cover;
  }
  #homepage_top_section #hero_video {
    display: none;
  }
  #homepage_top_section #homepage_top_main_container {
    position: static;
    align-items: center;
    height: auto;
    padding-top: 168px;
    padding-bottom: 144px;
  }
  #homepage_top_section #homepage_top_main_container .wrap {
    flex-flow: column;
    height: auto;
    margin-top: 0;
    align-items: center;
  }
  #homepage_top_section #homepage_top_main_container .wrap #overview_chart_container #overview_chart_heading {
    display: none;
  }
  #homepage_top_section #homepage_top_main_container #overview_chart_heading_mobile {
    display: block;
    color: #ffffff;
  }
}
@media screen and (max-height: 580px) {
  #homepage_top_section {
    height: auto;
    background: url("++resource++hurricanes.home/img/image_nasa_hurricane.jpg") no-repeat center center fixed;
    background-size: cover;
  }
  #homepage_top_section #hero_video {
    display: none;
  }
  #homepage_top_section #homepage_top_main_container {
    position: static;
    align-items: center;
    height: auto;
    padding-top: 168px;
    padding-bottom: 144px;
  }
  #homepage_top_section #homepage_top_main_container .wrap {
    flex-flow: column;
    height: auto;
    margin-top: 0;
    align-items: center;
  }
  #homepage_top_section #homepage_top_main_container .wrap #overview_chart_container #overview_chart_heading {
    display: none;
  }
  #homepage_top_section #homepage_top_main_container #overview_chart_heading_mobile {
    display: block;
    color: #ffffff;
  }
}
/*
*/
#homepage_bottom_section {
  display: flex;
  justify-content: center;
  border: 0px solid rgb(0, 255, 234);
  width: 100%;
  padding-top: 120px;
  padding-bottom: 192px;
  background: #272C2C;
  background: linear-gradient(0deg, #1f354a 0%, #0d112c 100%);
}
#homepage_bottom_section .wrap {
  display: flex;
  height: auto;
  flex-flow: column;
}
#homepage_bottom_section .wrap h1 {
  margin-bottom: 24px;
  color: #ffffff;
}
#homepage_bottom_section .wrap #forecast_explanation {
  border: 0px solid rgb(0, 255, 234);
  color: #ffffff;
  width: 60%;
  text-align: left;
  margin-bottom: 48px;
}
#homepage_bottom_section .wrap #forecast_explanation h1 {
  margin-bottom: 24px;
}

@media only screen and (max-width: 970px) {
  #homepage_bottom_section {
    padding-top: 48px;
    padding-bottom: 48px;
  }
  #homepage_bottom_section .wrap #forecast_explanation {
    width: 100%;
  }
}
/*
*/
#loading_data {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  z-index: 90;
  color: #ffffff;
}
#loading_data #overlay {
  background-color: rgba(13, 17, 44, 0.8);
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-flow: column;
}
#loading_data #overlay .blink_me {
  -webkit-animation: blinker 1.5s ease infinite;
          animation: blinker 1.5s ease infinite;
}
@-webkit-keyframes blinker {
  50% {
    opacity: 0;
  }
}
@keyframes blinker {
  50% {
    opacity: 0;
  }
}

@media only screen and (max-width: 970px) {
  #navbar {
    width: 100%;
  }
}
/*-- 3. Historical chart styles  --*/
/*
*/
#historical_chart_container {
  border: 0px solid rgb(0, 255, 234);
  position: relative;
  width: 12%;
  max-width: 200px;
  min-width: 150px;
  height: 100%;
}
#historical_chart_container #historical_average_container {
  border: 0px solid rgb(0, 255, 234);
  margin-bottom: 24px;
}
#historical_chart_container #past_activity_container {
  border: 0px solid rgb(0, 255, 234);
  height: 81%;
  display: flow-root;
  overflow-y: clip;
}
#historical_chart_container #past_activity_list_container {
  border: 0px solid rgb(0, 255, 234);
  height: 100%;
  display: flow-root;
  overflow-y: clip;
}
#historical_chart_container #past_activity_list {
  border: 0px solid rgb(0, 255, 234);
}
#historical_chart_container .average_indicator_container {
  display: flex;
  align-items: center;
  width: 100%;
  height: 30px;
  cursor: pointer;
}
#historical_chart_container .average_indicator_container .year {
  margin-right: 10px;
  margin-left: -50px;
}
#historical_chart_container .average_indicator_container .bar {
  width: 60%;
  height: 6px;
  margin-right: 10px;
}
#historical_chart_container .average_indicator_container .number,
#historical_chart_container .average_indicator_container .year {
  color: #ffffff;
  opacity: 1;
}
#historical_chart_container .inactive .bar {
  background-color: #666666 !important;
}
#historical_chart_container .inactive .number {
  opacity: 0;
}
#historical_chart_container .inactive .year {
  color: #666666;
  font-weight: 100;
  /*opacity: 0;*/
}
#historical_chart_container .up_down_buttons {
  border: 0px solid rgb(0, 255, 234);
  position: absolute;
  bottom: 0;
  display: flex;
  margin-top: 24px;
}
#historical_chart_container .up_down_buttons .down_button,
#historical_chart_container .up_down_buttons .up_button {
  border: 0px solid rgb(0, 255, 234);
  width: 24px;
  height: 24px;
  margin: 0 5px;
  cursor: pointer;
}
#historical_chart_container .up_down_buttons .up_button {
  opacity: 0.3;
}
#historical_chart_container .up_down_buttons .down_button img,
#historical_chart_container .up_down_buttons .up_button img {
  width: 100%;
  height: 100%;
}

/*
Historical chart on mobile
*/
#historical_chart_container_mobile {
  border: 0px solid rgb(0, 255, 234);
  display: none;
  position: relative;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  margin-top: 24px;
  max-width: 400px;
  width: 100%;
  min-width: 200px;
  height: auto;
}
#historical_chart_container_mobile h4 {
  text-align: center;
}
#historical_chart_container_mobile #historical_average_container_mobile {
  border: 0px solid rgb(0, 255, 234);
  margin-bottom: 24px;
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
}
#historical_chart_container_mobile #past_activity_container_mobile {
  border: 0px solid rgb(0, 255, 234);
  height: auto;
  display: flex;
  flex-flow: column;
  /* Hide scrollbar for Chrome, Safari and Opera */
}
#historical_chart_container_mobile #past_activity_container_mobile #past_activity_list_container_mobile {
  border: 0px solid rgb(0, 255, 234);
  height: 100px;
  margin-bottom: 12px;
  overflow-x: scroll;
  overflow-y: hidden;
  -ms-overflow-style: none; /* IE and Edge */
  scrollbar-width: none; /* Firefox */
}
#historical_chart_container_mobile #past_activity_container_mobile #past_activity_list_container_mobile #past_activity_list_mobile {
  display: flex;
  flex-flow: row;
  height: 100%;
}
#historical_chart_container_mobile #past_activity_container_mobile #past_activity_list_container_mobile #past_activity_list_mobile .average_indicator_container_vertical {
  position: relative;
  width: 24px;
  border: 0px solid rgb(0, 255, 234);
  /*margin-right: 8px;*/
  flex-shrink: 0;
}
#historical_chart_container_mobile #past_activity_container_mobile #past_activity_list_container_mobile #past_activity_list_mobile .average_indicator_container_vertical .bar_vertical {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 8px;
  transform-origin: center bottom;
}
#historical_chart_container_mobile #past_activity_container_mobile #past_activity_list_container_mobile #past_activity_list_mobile #left_spacer {
  width: 47.3%;
  flex-shrink: 0;
}
#historical_chart_container_mobile #past_activity_container_mobile #past_activity_list_container_mobile #past_activity_list_mobile #right_spacer {
  width: 46.6%;
  flex-shrink: 0;
}
#historical_chart_container_mobile #past_activity_container_mobile #past_activity_list_container_mobile::-webkit-scrollbar {
  display: none;
}
#historical_chart_container_mobile #past_activity_container_mobile #past_activity_year_and_number_container {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-flow: column;
  color: #ffffff;
}
#historical_chart_container_mobile #past_activity_container_mobile #past_activity_year_and_number_container #year_and_number {
  border-bottom-width: 2px;
  border-bottom-style: solid;
  border-bottom-color: #666666;
  text-transform: capitalize;
  text-align: center;
}
#historical_chart_container_mobile #past_activity_container_mobile #past_activity_year_and_number_container #indicator {
  width: 2px;
  height: 40px;
  background-color: #666666;
  margin: 0 0 6px 0;
}
#historical_chart_container_mobile .up_down_buttons_mobile {
  border: 0px solid rgb(0, 255, 234);
  display: flex;
  margin-top: 6px;
  justify-content: center;
}
#historical_chart_container_mobile .up_down_buttons_mobile .left_button, #historical_chart_container_mobile .up_down_buttons_mobile .right_button {
  border: 0px solid rgb(0, 255, 234);
  width: 36px;
  height: 36px;
  margin: 0 12px;
  cursor: pointer;
  transform: rotate(90deg);
}
#historical_chart_container_mobile .average_indicator_container {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 50%;
  height: 30px;
  cursor: pointer;
}
#historical_chart_container_mobile .average_indicator_container .year {
  margin-right: 10px;
  margin-left: -50px;
}
#historical_chart_container_mobile .average_indicator_container .bar {
  width: 60%;
  height: 6px;
  margin-right: 10px;
}
#historical_chart_container_mobile .average_indicator_container .number,
#historical_chart_container_mobile .average_indicator_container .year {
  color: #ffffff;
  opacity: 1;
}
#historical_chart_container_mobile .inactive .bar_vertical {
  background-color: #666666 !important;
}
#historical_chart_container_mobile .up_down_buttons {
  border: 0px solid rgb(0, 255, 234);
  position: absolute;
  bottom: 0;
  display: flex;
  margin-top: 24px;
}
#historical_chart_container_mobile .up_down_buttons .down_button,
#historical_chart_container_mobile .up_down_buttons .up_button {
  border: 0px solid rgb(0, 255, 234);
  width: 24px;
  height: 24px;
  margin: 0 5px;
  cursor: pointer;
}
#historical_chart_container_mobile .up_down_buttons .down_button img,
#historical_chart_container_mobile .up_down_buttons .up_button img {
  width: 100%;
  height: 100%;
}

@media only screen and (max-width: 970px) {
  #historical_chart_container {
    display: none;
  }
  #historical_chart_container_mobile {
    border: 0px solid rgb(0, 255, 234);
    display: block;
    margin-top: 8rem;
  }
}
@media only screen and (max-width: 400px) {
  #left_spacer {
    width: 46.6% !important;
    flex-shrink: 0;
  }
  #right_spacer {
    width: 46% !important;
    flex-shrink: 0;
  }
}
@media screen and (min-height: 580px) and (max-height: 870px) and (min-width: 680px) {
  #historical_chart_container #past_activity_container {
    height: 73%;
  }
}
@media screen and (max-height: 580px) {
  #historical_chart_container {
    display: none;
  }
  #historical_chart_container_mobile {
    border: 0px solid rgb(0, 255, 234);
    display: block;
  }
}
/*-- 4. Overview chart styles  --*/
/*
*/
#overview_chart_container {
  border: 0px solid rgb(0, 255, 234);
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
}
#overview_chart_container #overview_chart {
  border: 0px solid rgb(0, 255, 234);
  position: relative;
  width: 640px;
  height: 640px;
  margin-left: -8%;
  transition: all 0.4s ease-out;
}
#overview_chart_container #overview_chart #overview_chart_up_container h2 {
  position: absolute;
  top: 18%;
  left: 50%;
  transform: translateX(-50%);
  width: 50%;
  color: #ffffff;
  text-align: center;
}
#overview_chart_container #overview_chart #overview_chart_up_container .overview_chart_line svg {
  position: absolute;
  top: 0;
  left: 0;
}
#overview_chart_container #overview_chart #overview_chart_up_container #predicted_indicator_container,
#overview_chart_container #overview_chart #overview_chart_up_container #current_indicator_container {
  border: 0px solid rgb(0, 255, 234);
  position: absolute;
  left: 50%;
  top: 50%;
  width: 490px;
  height: 490px;
  margin-left: -245px;
  margin-top: -245px;
  transition: all 0.4s ease-out;
}
#overview_chart_container #overview_chart #overview_chart_up_container #predicted_indicator,
#overview_chart_container #overview_chart #overview_chart_up_container #current_indicator {
  border: 0px solid rgb(0, 255, 234);
  display: flex;
  justify-content: space-around;
  align-items: center;
  position: absolute;
  height: 20px;
  margin-left: -80px;
  font-size: 0.75rem;
  color: #fff;
  line-height: 12px;
  text-align: center;
  text-transform: uppercase;
}
#overview_chart_container #overview_chart #overview_chart_up_container #predicted_indicator i,
#overview_chart_container #overview_chart #overview_chart_up_container #current_indicator i {
  display: block;
  width: 8px;
  height: 8px;
  background-color: #666666;
  border-radius: 12px;
}
#overview_chart_container #overview_chart #overview_chart_up_container #predicted_indicator i {
  background-color: #666666;
}
#overview_chart_container #overview_chart #overview_chart_up_container #current_indicator i {
  background-color: #666666;
}
#overview_chart_container #overview_chart #overview_chart_up_container #icon_hurricane_path {
  fill: #666666;
}
#overview_chart_container #overview_chart #overview_chart_hover_container {
  border: 0px solid rgb(0, 255, 234);
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-flow: column;
  text-align: center;
  color: #ffffff;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(24, 30, 56, 0.15);
  border-radius: 50%;
  border: 16px solid;
  cursor: pointer;
  opacity: 0;
}
#overview_chart_container #overview_chart #overview_chart_hover_container h2 {
  margin-bottom: 12px;
  text-transform: uppercase;
  letter-spacing: 4px;
}
#overview_chart_container #overview_chart #overview_chart_hover_container .number {
  margin-bottom: 24px;
  font-size: 3rem;
  color: #999999;
}
#overview_chart_container #overview_chart_hotspot {
  border: 0px solid rgb(0, 255, 234);
  position: absolute;
  width: 640px;
  height: 640px;
  margin-left: -8%;
  cursor: pointer;
}
#overview_chart_container #info_button {
  border: 0px solid rgb(0, 255, 234);
  position: absolute;
  bottom: 0;
  right: 0;
  cursor: pointer;
  width: 40px;
  height: 40px;
}
#overview_chart_container #info_button img {
  width: 100%;
  height: 100%;
}

@media only screen and (max-width: 1200px) and (min-height: 870px) {
  #overview_chart_container #overview_chart {
    width: 500px;
    height: 500px;
    margin-left: 0;
  }
  #overview_chart_container #overview_chart #overview_chart_up_container #predicted_indicator_container,
  #overview_chart_container #overview_chart #overview_chart_up_container #current_indicator_container {
    width: 400px;
    height: 400px;
    margin-left: -200px;
    margin-top: -200px;
  }
  #overview_chart_container #overview_chart_hotspot {
    width: 500px;
    height: 500px;
    margin-left: 0;
  }
}
@media screen and (max-height: 870px) and (min-width: 970px) {
  #overview_chart_container #overview_chart {
    width: 450px;
    height: 450px;
  }
  #overview_chart_container #overview_chart #overview_chart_up_container #predicted_indicator_container,
  #overview_chart_container #overview_chart #overview_chart_up_container #current_indicator_container {
    width: 380px;
    height: 380px;
    margin-left: -190px;
    margin-top: -190px;
  }
  #overview_chart_container #overview_chart_hotspot {
    width: 400px;
    height: 400px;
  }
}
@media screen and (max-height: 870px) and (min-width: 680px) {
  #overview_chart_container #overview_chart {
    width: 450px;
    height: 450px;
    margin-left: 0;
  }
  #overview_chart_container #overview_chart #overview_chart_up_container #predicted_indicator_container,
  #overview_chart_container #overview_chart #overview_chart_up_container #current_indicator_container {
    width: 380px;
    height: 380px;
    margin-left: -190px;
    margin-top: -190px;
  }
  #overview_chart_container #overview_chart_hotspot {
    width: 400px;
    height: 400px;
    margin-left: 0;
  }
}
@media only screen and (max-width: 680px) {
  #overview_chart_container #overview_chart {
    width: 320px;
    height: 320px;
    margin-left: 0;
  }
  #overview_chart_container #overview_chart #overview_chart_up_container #predicted_indicator_container,
  #overview_chart_container #overview_chart #overview_chart_up_container #current_indicator_container {
    display: none;
  }
  #overview_chart_container #overview_chart_hotspot {
    width: 320px;
    height: 320px;
    margin-left: 0;
  }
  #overview_chart_hover_container h2 {
    font-size: 0.75rem !important;
    margin-bottom: 2px !important;
    letter-spacing: 1.8px;
  }
}
@media only screen and (max-width: 420px) {
  #overview_chart_container #overview_chart {
    width: 240px;
    height: 240px;
    margin-left: 0;
  }
  #overview_chart_container #overview_chart #overview_chart_up_container #predicted_indicator_container,
  #overview_chart_container #overview_chart #overview_chart_up_container #current_indicator_container {
    display: none;
  }
  #overview_chart_container #overview_chart_hotspot {
    width: 240px;
    height: 240px;
    margin-left: 0;
  }
}
/*
*/
#overview_chart_modal_window {
  border: 0px solid rgb(0, 255, 234);
  position: absolute;
  resize: both;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.7);
  z-index: 100;
}
#overview_chart_modal_window #info_container {
  position: relative;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  transform-origin: center center;
  width: 800px;
  height: 800px;
  padding: 36px;
  background-color: #000000;
  border: 4px solid #ffffff;
  color: #ffffff;
}
#overview_chart_modal_window #info_container #close_button {
  position: absolute;
  top: -34px;
  right: -34px;
  cursor: pointer;
}
#overview_chart_modal_window #info_container h2 {
  text-align: center;
  margin: 24px 0;
}
#overview_chart_modal_window #info_container #hurricane_activity_container {
  border: 0px solid rgb(0, 255, 234);
  display: flex;
  flex-flow: row;
  justify-content: space-between;
  width: 100%;
  height: 160px;
}
#overview_chart_modal_window #info_container #hurricane_activity_container .hurricane_activity_icon {
  border: 0px solid rgb(0, 255, 234);
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  width: 26%;
  color: #ffffff;
}
#overview_chart_modal_window #info_container #hurricane_activity_container .hurricane_activity_icon svg {
  margin-bottom: 12px;
  width: 80px;
}
#overview_chart_modal_window #info_container #activty_line_legend {
  border: 0px solid rgb(0, 255, 234);
  width: 100%;
  height: 4px;
  border-radius: 10px;
  background: linear-gradient(90deg, #f6ed1e 0%, #e33208 100%);
  margin: 24px 0;
}
#overview_chart_modal_window #info_container #types_of_activity_container {
  border: 0px solid rgb(0, 255, 234);
  position: relative;
  display: flex;
  flex-flow: row;
  justify-content: space-evenly;
  width: 100%;
  height: 160px;
}
#overview_chart_modal_window #info_container #types_of_activity_container .activity_type {
  border: 0px solid rgb(0, 255, 234);
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 35%;
  font-size: 0.875rem;
}
#overview_chart_modal_window #info_container #types_of_activity_container .activity_type svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/*-- 3. Predictions chart styles  --*/
/*
    The predictions chart legends have their own scss file: _predictions_chart_legends_and_filters.scss 
*/
#predictions_chart_container {
  width: 100%;
  margin-bottom: 48px;
}
#predictions_chart_container #predictions_chart_title_container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
#predictions_chart_container #predictions_chart_title_container #predictions_chart_printable_logos_container {
  display: flex;
}
#predictions_chart_container #predictions_chart_title_container #predictions_chart_printable_logos_container .printable_logo {
  max-height: 75px;
  height: 100%;
  padding-bottom: 12px;
  padding-left: 24px;
}
#predictions_chart_container #predictions_chart_title_container #predictions_chart_printable_logos_container #printable_logo_bsc {
  margin-right: 9px;
}
#predictions_chart_container #type_of_chart_info_container {
  border: 0px solid rgb(0, 255, 234);
  display: flex;
  flex-flow: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  color: #999999;
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-bottom: 48px;
  word-wrap: break-word;
}
#predictions_chart_container #predictions_chart {
  border: 0px solid rgb(0, 255, 234);
  position: relative;
  display: flex;
  width: 95%;
  height: 480px;
  margin-bottom: 168px;
}
#predictions_chart_container #predictions_chart .chart_range_indicators {
  border: 0px solid rgb(0, 255, 234);
  position: absolute;
  top: 0;
  left: 3%;
  width: 97%;
  height: 100%;
  z-index: 0;
}
#predictions_chart_container #predictions_chart .chart_range_indicators #low_indicator_range {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 0%;
  border-bottom: 1px dashed #ffff00;
  border-right: 1px dashed #ffff00;
  background-color: rgba(255, 255, 0, 0.05);
}
#predictions_chart_container #predictions_chart .chart_range_indicators #low_indicator_text {
  position: absolute;
  top: 0;
  right: -45px;
  font-size: 14px;
  color: #ffff00;
  margin-top: -15px;
}
#predictions_chart_container #predictions_chart .chart_range_indicators #normal_indicator_range {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 0%;
  border-bottom: 2px dashed #ff9900;
  border-right: 1px dashed #ff9900;
  background-color: rgba(255, 153, 0, 0.05);
}
#predictions_chart_container #predictions_chart .chart_range_indicators #normal_indicator_text {
  position: absolute;
  top: 0;
  right: -63px;
  font-size: 14px;
  color: #ff9900;
  margin-top: -15px;
}
#predictions_chart_container #predictions_chart .chart_range_indicators #high_indicator_range {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 0%;
  border-bottom: 2px dashed #ff0000;
  border-right: 1px dashed #ff0000;
  border-top: 1px dashed #ff0000;
  background-color: rgba(255, 0, 0, 0.05);
}
#predictions_chart_container #predictions_chart .chart_range_indicators #high_indicator_text {
  position: absolute;
  top: 0;
  right: -45px;
  font-size: 14px;
  color: #ff0000;
  margin-top: -15px;
}
#predictions_chart_container #predictions_chart #no_data_available_message {
  border: 0px solid rgb(0, 255, 234);
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  flex-flow: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  color: #ff7640;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 1rem;
  word-wrap: break-word;
  text-align: center;
}
#predictions_chart_container #predictions_chart .chart_range_indicators_mobile {
  position: absolute;
  top: 50px;
  left: 0;
  width: 100%;
  height: 100%;
  display: none;
}
#predictions_chart_container #predictions_chart .chart_range_indicators_mobile #low_indicator_range_mobile {
  top: 0;
  left: 0;
  width: 44%;
  height: 100%;
  border-left: 1px dashed #ffff00;
  border-bottom: 1px dashed #ffff00;
  border-right: 0px;
  background-color: rgba(255, 255, 0, 0.05);
}
#predictions_chart_container #predictions_chart .chart_range_indicators_mobile #low_indicator_text_mobile {
  position: absolute;
  top: 102%;
  left: 20%;
  right: unset;
  color: #ffff00;
}
#predictions_chart_container #predictions_chart .chart_range_indicators_mobile #normal_indicator_range_mobile {
  top: 0;
  left: 44%;
  width: 18%;
  height: 100%;
  border-left: 2px dashed #ff9900;
  border-bottom: 1px dashed #ff9900;
  border-right: 0px;
  background-color: rgba(255, 153, 0, 0.05);
}
#predictions_chart_container #predictions_chart .chart_range_indicators_mobile #normal_indicator_text_mobile {
  position: absolute;
  top: 102%;
  left: 49%;
  right: unset;
  color: #ff9900;
}
#predictions_chart_container #predictions_chart .chart_range_indicators_mobile #high_indicator_range_mobile {
  top: 0;
  left: 62%;
  width: 38%;
  height: 100%;
  border-left: 1px dashed #ff0000;
  border-bottom: 2px dashed #ff0000;
  border-right: 1px dashed #ff0000;
  background-color: rgba(255, 0, 0, 0.05);
}
#predictions_chart_container #predictions_chart .chart_range_indicators_mobile #high_indicator_text_mobile {
  position: absolute;
  top: 102%;
  left: 78%;
  right: unset;
  color: #ff0000;
}
#predictions_chart_container #predictions_chart .columns {
  border: 0px solid rgb(0, 255, 234);
  display: flex;
  flex-flow: row;
  width: 100%;
}
#predictions_chart_container #predictions_chart .columns .column {
  border: 0px solid rgb(0, 255, 234);
  display: flex;
  flex-flow: column;
  z-index: 1;
}
#predictions_chart_container #predictions_chart .columns .months_range {
  position: absolute;
  top: -40px;
  font-size: 12px;
  padding: 4px 6px;
  border-radius: 12px;
  line-height: 14px;
  background-color: #666666;
  color: #ffffff;
  text-transform: capitalize;
}
#predictions_chart_container #predictions_chart .columns .column_1 .numbers {
  border: 0px solid rgb(0, 255, 234);
  height: 100%;
  display: flex;
  flex-flow: column;
  justify-content: space-between;
  text-align: right;
}
#predictions_chart_container #predictions_chart .columns .column_1 .numbers * {
  color: #ffffff !important;
}
#predictions_chart_container #predictions_chart .columns .column_2 {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 40px;
}
#predictions_chart_container #predictions_chart .columns .column_2 .vertical_bar {
  width: 5px;
  height: 100%;
  background: rgb(255, 220, 0);
  background: linear-gradient(0deg, rgb(255, 220, 0) 0%, rgb(255, 0, 0) 100%);
}
#predictions_chart_container #predictions_chart .columns .column_2 .circle_1 {
  position: absolute;
  bottom: 0.6%;
  width: 32px;
  height: 32px;
  background: rgb(255, 147, 0);
  background: linear-gradient(0deg, rgb(255, 147, 0) 0%, rgb(255, 224, 0) 100%);
  border-radius: 50%;
  cursor: pointer;
}
#predictions_chart_container #predictions_chart .columns .column_2 .circle_2 {
  position: absolute;
  bottom: 0.6%;
  width: 20px;
  height: 20px;
  background: rgb(201, 2, 2);
  background: linear-gradient(0deg, rgb(201, 2, 2) 0%, rgb(255, 0, 0) 100%);
  border-radius: 12px;
  cursor: pointer;
}
#predictions_chart_container #predictions_chart .columns .forecast_column {
  display: flex;
  flex-grow: 1;
  align-items: center;
  cursor: pointer;
}
#predictions_chart_container #predictions_chart .columns .forecast_column .vertical_line {
  width: 1px;
  height: 100%;
  background-color: #666666;
}
#predictions_chart_container #predictions_chart .columns .forecast_column .circle_indicator {
  position: absolute;
  bottom: 9%;
  width: 21px;
  height: 4.2%;
  background: #666666;
  border-radius: 12px;
}
#predictions_chart_container #predictions_chart .columns .forecast_column .entity {
  border: 0px solid rgb(0, 255, 234);
  display: block;
  position: absolute;
  top: 100%;
  padding: 0 0px 9px 3px;
  color: #ffffff;
  font-size: 15px;
  transform-origin: left;
  text-align: right;
  -ms-writing-mode: tb-rl;
      writing-mode: tb-rl;
  transform: rotate(210deg);
  white-space: nowrap;
  width: auto;
  height: 150px;
}
#predictions_chart_container #predictions_chart .columns .forecast_column .printable_entity {
  width: 100% !important;
  height: auto !important;
  transform-origin: right !important;
  transform: rotate(270deg);
  -webkit-transform: rotate(270deg);
  -moz-transform: rotate(270deg);
  -o-transform: rotate(270deg);
  -ms-transform: rotate(270deg);
  -ms-writing-mode: unset !important;
      writing-mode: unset !important;
  margin-left: -100% !important;
  padding: 0 !important;
}
#predictions_chart_container #predictions_chart .columns .forecast_column .months_range {
  position: absolute;
  top: -20px;
  font-size: 0.75rem;
  padding: 4px 12px;
  border-radius: 12px;
  line-height: 14px;
  background-color: purple;
  color: #ffffff;
  white-space: nowrap;
}
#predictions_chart_container #predictions_chart #predictions_chart_rows_container {
  min-height: 140px;
}
#predictions_chart_container #predictions_chart .rows {
  border: 0px solid rgb(0, 255, 234);
  display: none;
  width: 100% !important;
  height: 100% !important;
}
#predictions_chart_container #predictions_chart .rows .row {
  border: 0px solid rgb(0, 255, 234);
}
#predictions_chart_container #predictions_chart .rows .forecast_row {
  position: relative;
  height: 60px;
}
#predictions_chart_container #predictions_chart .rows .forecast_row .horizontal_line {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 100%;
  height: 1px;
  background-color: #666666;
}
#predictions_chart_container #predictions_chart .rows .forecast_row .prediction_and_organization_container {
  border: 0px solid rgb(0, 255, 234);
  position: absolute;
  display: flex;
  flex-flow: column;
  align-items: center;
  height: auto;
}
#predictions_chart_container #predictions_chart .rows .forecast_row .prediction_and_organization_container .entity {
  width: -webkit-max-content;
  width: -moz-max-content;
  width: max-content;
  color: #ffffff;
  font-size: 12px;
  cursor: pointer;
}
#predictions_chart_container #predictions_chart .rows .forecast_row .prediction_and_organization_container .prediction_indicator {
  width: 100%;
  height: 12px;
  border-radius: 12px;
  cursor: pointer;
}
#predictions_chart_container #predictions_chart .rows .numbers {
  width: 100%;
  display: flex;
  flex-flow: row;
  justify-content: space-around;
  align-items: center;
  color: #ffffff !important;
}
#predictions_chart_container #predictions_chart .rows .row_1 .numbers * {
  color: #ffffff !important;
}
#predictions_chart_container #predictions_chart .rows .row_2 {
  border: 0px solid rgb(0, 255, 234);
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 40px;
}
#predictions_chart_container #predictions_chart .rows .row_2 .horizontal_bar {
  width: 100%;
  height: 5px;
  background: rgb(255, 220, 0);
  background: linear-gradient(90deg, rgb(255, 220, 0) 0%, rgb(255, 0, 0) 100%);
}
#predictions_chart_container #predictions_chart .rows .row_2 .circle_1 {
  position: absolute;
  width: 22px;
  height: 22px;
  left: 0;
  transform: translate(-50%);
  background: rgb(255, 147, 0);
  background: linear-gradient(0deg, rgb(255, 147, 0) 0%, rgb(255, 224, 0) 100%);
  border-radius: 50%;
  cursor: pointer;
}
#predictions_chart_container #predictions_chart .rows .row_2 .circle_2 {
  position: absolute;
  width: 16px;
  height: 16px;
  left: 0;
  transform: translate(-50%);
  background: rgb(201, 2, 2);
  background: linear-gradient(0deg, rgb(201, 2, 2) 0%, rgb(255, 0, 0) 100%);
  border-radius: 12px;
  cursor: pointer;
}
#predictions_chart_container #predictions_chart .dark {
  opacity: 0.3;
}

@media only screen and (max-width: 970px) {
  #predictions_chart_container #predictions_chart {
    position: relative;
    width: 100%;
    height: auto;
  }
  #predictions_chart_container #predictions_chart .chart_range_indicators_mobile {
    display: flex;
  }
  #predictions_chart_container #predictions_chart .chart_range_indicators {
    display: none;
  }
  #predictions_chart_container #predictions_chart .columns {
    display: none;
  }
  #predictions_chart_container #predictions_chart .rows {
    display: block;
  }
  #predictions_chart_container #predictions_chart #no_data_available_message {
    margin-top: 48px;
  }
}
@media only screen and (max-width: 420px) {
  #predictions_chart_container #type_of_chart_info_container {
    font-size: 1.5rem;
    line-height: 2.5rem;
  }
  #predictions_chart_container #predictions_chart #no_data_available_message {
    margin-top: 3rem;
  }
}
/*
*/
#legends_and_filters_container {
  border: 0px solid rgb(0, 255, 234);
  border-top: 1px solid #666666;
  display: flex;
  flex-flow: column;
  padding-top: 36px;
  padding-bottom: 36px;
}
#legends_and_filters_container #legends_container {
  border: 0px solid rgb(0, 255, 234);
  display: flex;
}
#legends_and_filters_container #legends_container .legends {
  border: 0px solid rgb(0, 255, 234);
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
}
#legends_and_filters_container #legends_container .legends .legend_indicator {
  border: 0px solid rgb(0, 255, 234);
  display: flex;
  flex-flow: row;
  align-items: center;
  width: auto;
  margin-right: 24px;
}
#legends_and_filters_container #legends_container .legends .legend_indicator .bar {
  width: 40px;
  height: 6px;
  margin-right: 10px;
  border-radius: 4px;
}
#legends_and_filters_container #legends_container .legends .legend_indicator .circle_1 {
  width: 10px;
  height: 10px;
  background: rgb(255, 147, 0);
  background: linear-gradient(0deg, rgb(255, 147, 0) 0%, rgb(255, 224, 0) 100%);
  margin-right: 10px;
  border-radius: 4px;
}
#legends_and_filters_container #legends_container .legends .legend_indicator .circle_2 {
  width: 10px;
  height: 10px;
  background: rgb(201, 2, 2);
  background: linear-gradient(0deg, rgb(201, 2, 2) 0%, rgb(255, 0, 0) 100%);
  margin-right: 10px;
  border-radius: 4px;
}
#legends_and_filters_container #filters_container {
  border: 0px solid rgb(0, 255, 234);
  display: flex;
  flex-flow: row;
  flex-flow: wrap;
  margin-top: 24px;
  margin-bottom: 24px;
}
#legends_and_filters_container #filters_container .filter_multioption {
  border: 0px solid rgb(0, 255, 234);
  position: relative;
  -webkit-touch-callout: none;
  /* iOS Safari */
  -webkit-user-select: none;
  /* Safari */
  /* Konqueror HTML */
  -moz-user-select: none;
  /* Old versions of Firefox */
  -ms-user-select: none;
  /* Internet Explorer/Edge */
  user-select: none;
  /* Non-prefixed version, currently supported by Chrome, Edge, Opera and Firefox */
}
#legends_and_filters_container #filters_container .filter_multioption .filter_button {
  border: 1px solid #666666;
  display: flex;
  justify-content: space-between;
  width: 170px;
  padding: 0.5rem;
  background-color: #ffffff;
  cursor: pointer;
}
#legends_and_filters_container #filters_container .filter_multioption .filter_dropdown {
  position: absolute;
  width: 100%;
  border: 1px solid #666666;
  background-color: #ffffff;
  z-index: 99;
}
#legends_and_filters_container #filters_container .filter_multioption .filter_dropdown li {
  white-space: nowrap;
  list-style: none;
  padding: 0.5rem 1rem;
  cursor: default;
}
#legends_and_filters_container #filters_container .filter_multioption .filter_dropdown li:hover {
  background-color: #499E8A;
  color: #ffffff;
}
#legends_and_filters_container #filters_container .filters {
  border: 0px solid rgb(0, 255, 234);
  margin-right: 24px;
}
#legends_and_filters_container #filters_container #apply_filters_button {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #499E8A;
  border-radius: 50px;
  color: #ffffff;
  text-transform: uppercase;
  height: 50px;
  cursor: pointer;
  -webkit-touch-callout: none;
  /* iOS Safari */
  -webkit-user-select: none;
  /* Safari */
  /* Konqueror HTML */
  -moz-user-select: none;
  /* Old versions of Firefox */
  -ms-user-select: none;
  /* Internet Explorer/Edge */
  user-select: none;
  /* Non-prefixed version, currently supported by Chrome, Edge, Opera and Firefox */
}
#legends_and_filters_container #filters_container #apply_filters_button:hover {
  background-color: #428f7d;
}
#legends_and_filters_container #filters_container #apply_filters_button:active {
  background-color: #46d8d3;
}

/*-- 4. Predictions page styles  --*/
/*
*/
#predictions_section {
  display: flex;
  justify-content: center;
  border: 0px solid rgb(0, 255, 234);
  width: 100%;
  padding-top: 192px;
  padding-bottom: 192px;
  background: #272C2C;
  background: linear-gradient(0deg, #1f354a 0%, #0d112c 100%);
}
#predictions_section h1 {
  margin-bottom: 24px;
  color: #ffffff;
}
#predictions_section .wrap {
  display: flex;
  height: auto;
  flex-flow: column;
}
#predictions_section .wrap #forecast_explanation {
  border: 0px solid rgb(0, 255, 234);
  color: #ffffff;
  width: 60%;
  text-align: left;
  margin-top: 24px;
}
#predictions_section .wrap #forecast_explanation h1 {
  margin-bottom: 24px;
}
#predictions_section .wrap #plot_description_container {
  border: 0px solid rgb(0, 255, 234);
  display: flex;
  flex-flow: column;
  width: 60%;
  margin-bottom: 48px;
}
#predictions_section .wrap #plot_description_container h4 {
  margin-bottom: 12px;
}
#predictions_section .wrap #plot_description_container p {
  color: #ffffff;
}

@media only screen and (max-width: 970px) {
  #predictions_section {
    padding-top: 48px;
    padding-bottom: 48px;
  }
  #predictions_section .wrap #plot_description_container,
  #predictions_section .wrap #forecast_explanation {
    width: 100%;
  }
}
/*
*/
#forecasters_banner {
  display: flex;
  justify-content: center;
  border: 0px solid rgb(0, 255, 234);
  width: 100%;
  background-color: #0D112C;
}
#forecasters_banner .wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-flow: column;
  color: #ffffff;
  padding-top: 96px;
  padding-bottom: 96px;
}
#forecasters_banner .wrap h1 {
  margin-bottom: 24px;
  text-align: center;
}
#forecasters_banner .wrap p {
  max-width: 970px;
  text-align: center;
}
#forecasters_banner .wrap #forecasters_cta {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 24px;
  background-color: #499E8A;
  border-radius: 50px;
  padding: 12px 48px;
  text-transform: uppercase;
  cursor: pointer;
}
#forecasters_banner .wrap #forecasters_cta:hover {
  background-color: #428f7d;
}

@media only screen and (max-width: 970px) {
  #forecasters_banner .wrap {
    padding-top: 48px;
    padding-bottom: 48px;
  }
}