/*
    Copyright 2017 Esri

    Licensed under the Apache License, Version 2.0 (the 'License');
    you may not use this file except in compliance with the License.
    You may obtain a copy of the License at:
    https://www.apache.org/licenses/LICENSE-2.0

    Unless required by applicable law or agreed to in writing, software
    distributed under the License is distributed on an 'AS IS' BASIS,
    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
    See the License for the specific language governing permissions and
    limitations under the License.
*/

html, body {
  overflow           : hidden;
  margin             : 0;
  padding            : 0;
  height             : 100%;
  width              : 100%;
  font-family        : 'Avenir Next W00', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  -moz-box-sizing    : border-box;
  -webkit-box-sizing : border-box;
  box-sizing         : border-box;
  background-color   : #232227;
}

#map {
  position : absolute;
  top      : 0;
  left     : 0;
  right    : 0;
  bottom   : 0;
}

#title {
  position       : absolute;
  top            : 10px;
  left           : 50px;
  right          : 50px;
  text-align     : center;
  font-size      : 26px;
  color          : rgb(255, 255, 255);
  pointer-events : none;
}

#underline {
  position       : absolute;
  top            : 50px;
  left           : 50%;
  width          : 400px;
  height         : 1px;
  margin-left    : -200px;
  pointer-events : none;
  background     : -webkit-linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
  background     : -moz-linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
  background     : -o-linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
  background     : linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
}

#links {
  position    : absolute;
  top         : 53px;
  left        : 50%;
  width       : 240px;
  margin-left : -120px;
}

#top {
  position   : absolute;
  height     : 210px;
  left       : 0;
  right      : 0;
  top        : 0;
  /*pointer-events : none;*/
  background : -webkit-linear-gradient(rgba(35, 34, 39, 1), rgba(35, 34, 39, 0) 50%);
  background : -moz-linear-gradient(rgba(35, 34, 39, 1), rgba(35, 34, 39, 0) 50%);
  background : -o-linear-gradient(rgba(35, 34, 39, 1), rgba(35, 34, 39, 0) 50%);
  background : linear-gradient(rgba(35, 34, 39, 1), rgba(35, 34, 39, 0) 50%);
}

#carousel-captions {
  height : 100px;
}

#logo {
  position   : absolute;
  top        : 10px;
  right      : 0;
  opacity    : 0.5;
  transition : opacity 0.5s linear;
}

#logo:hover {
  opacity    : 1.0;
  transition : opacity 0.5s linear;
}

#mora-logo {
  position        : absolute;
  top             : 10px;
  left            : 10px;
  padding         : 2px 5px;
  color           : rgb(255, 255, 255);
  opacity         : 0.5;
  transition      : opacity 0.5s linear;
  text-decoration : none;
}

#mora-logo:hover {
  opacity    : 1.0;
  transition : opacity 0.5s linear;
}

.mora-logo-lab {
  color : #78bbe6;
}

.rc-link {
  display      : inline-block;
  font-size    : 11px;
  color        : rgb(255, 255, 255);
  margin-right : 10px;
  cursor       : pointer;
}

.rc-link:hover {
  font-weight : bold;
}

.rc-center {
  display      : block;
  margin-left  : auto;
  margin-right : auto;
}

.rc-axis-label text {
  font-family : 'Avenir Next W00', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size   : 12px;
  fill        : rgb(255, 255, 255);
  text-anchor : middle;
}

.rc-legend-variable {
  font-family    : 'Avenir Next W00', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size      : 10px;
  fill           : rgb(255, 255, 255);
  text-anchor    : start;
  pointer-events : auto;
  cursor         : default;
}

.rc-legend-variable.selected {
  fill        : rgb(0, 255, 255);
  font-weight : 700;
}

.rc-legend-heading {
  font-family : 'Avenir Next W00', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size   : 12px;
  fill        : rgb(255, 255, 255);
  text-anchor : start;
}

.rc-legend-rcp {
  font-family : 'Avenir Next W00', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  fill        : rgb(255, 255, 255);
  font-size   : 10px;
  text-anchor : end;
}

.rc-legend-rcp.selected {
  fill        : rgb(0, 255, 255);
  font-weight : 700;
}

.rc-heading {
  position  : absolute;
  top       : 0;
  left      : 10px;
  font-size : 16pt;
}

.rc-modal {
  max-width : 60vw !important;
}

.rc-modal-body {
  font-size  : 14px;
  max-height : 80vh;
  overflow-y : scroll;
}

.rc-caption-item.active {
  display     : block;
  padding-top : 5px;
}

.rc-caption-item:not(.active) {
  display : none;
}

.rc-hazard-count {
  font-family : 'Avenir Next W00', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  fill        : rgb(255, 255, 255);
  font-size   : 125px;
  font-weight : bold;
  text-anchor : middle;
}

.rc-hazard-description {
  font-family : 'Avenir Next W00', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  fill        : rgb(255, 255, 255);
  font-size   : 16px;
  text-anchor : middle;
}

.rc-body-video {
  margin-bottom : 5px;
  margin-top    : 0;
}

.rc-body-video > p {
  margin-bottom : 5px;
}

#loading-map {
  display           : none;
  background-image  : url(img/loading.gif);
  background-repeat : no-repeat;
  background-size   : 58px 74px;
  pointer-events    : none;
  width             : 58px;
  height            : 74px;
  position          : absolute;
  left              : 50%;
  top               : 50%;
  margin-left       : -29px;
  margin-top        : -110px;
}

#data-scale-container {
  position   : absolute;
  bottom     : 310px;
  left       : 10px;
  transition : bottom 1s linear;
}

#data-scale-container.collapsed {
  bottom     : 80px;
  transition : bottom 1s 0.5s linear;
}

#data-scale-label {
  color     : rgb(255, 255, 255);
  font-size : 10pt;
}

#data-scale {
  height     : 21px;
  width      : 100%;
  background : -webkit-linear-gradient(to right, rgba(34, 34, 34, 1) 20%, rgba(255, 0, 0, 1) 100%);
  background : -moz-linear-gradient(to right, rgba(34, 34, 34, 1) 20%, rgba(255, 0, 0, 1) 100%);
  background : -o-linear-gradient(to right, rgba(34, 34, 34, 1) 20%, rgba(255, 0, 0, 1) 100%);
  background : linear-gradient(to right, rgba(34, 34, 34, 1) 20%, rgba(255, 0, 0, 1) 100%);
  box-shadow : 0 1px 2px rgba(0, 0, 0, 0.3);
}

#data-scale-range {
  color           : rgb(255, 255, 255);
  font-size       : 9pt;
  display         : flex;
  flex-direction  : row;
  justify-content : space-between;
}

#bottom {
  position       : absolute;
  height         : 300px;
  width          : 100%;
  left           : 0;
  bottom         : 0;
  padding-bottom : 10px;
  color          : white;
  background     : #232227;
  display        : flex;
  flex-direction : column;
  transition     : height 1s linear;
}

#bottom.collapsed {
  height     : 70px;
  transition : height 1s 0.5s linear;
}

.can-hide {
  opacity    : 1.0;
  transition : opacity 0.5s 1s linear;
}

#bottom.collapsed .can-hide {
  opacity    : 0.0;
  transition : opacity 0.5s linear;
}

#bottom-header {
  flex-grow    : 0;
  flex-shrink  : 0;
  font-size    : 1.5rem;
  text-align   : center;
  padding-left : 10px;
}

#options-score {
  flex-grow      : 1;
  flex-shrink    : 1;
  display        : flex;
  flex-direction : column;
  border-top     : solid 1px rgba(255, 255, 255, 0.4);
}

#chart-parent {
  flex-grow      : 1;
  flex-shrink    : 1;
  display        : flex;
  flex-direction : row;
}

#chart {
  height : 180px;
  width  : 100%;
}

#score {
  width           : 300px;
  padding         : 10px;
  flex-grow       : 0;
  flex-shrink     : 0;
  text-align      : center;
  display         : flex;
  flex-direction  : column;
  justify-content : space-between;
}

.score-label {
  padding   : 0;
  font-size : 11pt;
}

#mag-min,
#mag-max {
  padding   : 0;
  font-size : 22pt;
}

#options {
  flex-grow      : 0;
  flex-shrink    : 0;
  width          : 100%;
  padding        : 10px 0 10px 0;
  display        : flex;
  flex-direction : row;

}

#input-year-container {
  flex-grow      : 1;
  flex-shrink    : 1;
  display        : flex;
  flex-direction : column;
  padding        : 0;
}

#input-rcp-year {
  flex-grow          : 1;
  flex-shrink        : 1;
  -webkit-appearance : none;
  -moz-appearance    : none;
  width              : auto;
  margin             : 0 6px 0 12px;
}

#input-rcp-year-labels {
  font-size       : 9pt;
  flex-grow       : 0;
  flex-shrink     : 0;
  height          : 1rem;
  display         : flex;
  flex-direction  : row;
  justify-content : space-between;
}

#input-rcp-year-labels span {
  cursor : pointer;
}

#select-rcp-container {
  flex-grow   : 0;
  flex-shrink : 0;
  padding     : 0 0 0 15px;
  width       : 300px;
}

#experiment-label {
  font-size : 9pt;
}

#select-rcp {
  font-size : 12pt;
  width     : 100%;
}

#toggle-node {
  flex-grow   : 0;
  flex-shrink : 0;
  line-height : 1.5em;
  padding     : 0 24px;
}

#bottom-toggle {
  font-size : x-large;
  position  : absolute;
  top       : 26px;
}

.dijitTooltipContainer {
  padding       : 3px 6px;
  margin-bottom : 5px;
  border        : solid orange 1px !important;
  color         : #fff !important;
  background    : #242424 !important;
  font-size     : 11pt !important;
  text-align    : center;
  min-width     : 100px;
}

@media screen and (max-width : 670px) {

  #mora-logo,
  #logo {
    display : none;
  }

  #bottom {
    padding : 10px;
  }

  #bottom-header {
    font-size : 0.8rem;
  }

  #score {
    display : none;
  }

  #select-rcp-container {
    width : 200px;
  }

}

@media screen and (min-width : 670px) and (max-width : 799px) {

  #mora-logo,
  #logo {
    display : none;
  }

  #bottom {
    padding : 0 5%;
  }

  #bottom-header {
    font-size : 0.8rem;
  }

  #score {
    display : none;
  }

  #select-rcp-container {
    width : 250px;
  }
}

@media screen and (min-width : 800px) and (max-width : 1279px) {
  #bottom {
    padding : 0 10%;
  }

  #bottom-header {
    font-size : 1rem;
  }

  #score {
    display : flex;
  }
}

@media screen and (min-width : 1280px) {
  #bottom {
    padding : 0 20%;
  }

  #score {
    display : flex;
  }
}