@charset "UTF-8";
/* COLORS */
/* SIZES */
#map {
  position: relative;
  background-color: #FAFAF8;
  width: 100%;
  height: 100%;
}
#map .label {
  text-transform: uppercase;
  font-size: 0.5rem;
  fill: #d0d0bd;
}
#map .land {
  fill: #FAFAF8;
}
#map .med-region {
  fill: #999;
  fill-opacity: 0;
  stroke-opacity: 0;
  stroke: #999;
  cursor: pointer;
  cursor: hand;
}
#map .med-contour {
  fill: #000;
  font-weight: 600;
}
#map .med-bathymetry {
  fill: none;
  stroke: #AAA;
  stroke-width: 0.15px;
}
#map .region-counts {
  font-size: 12px;
  fill: #000;
  text-anchor: middle;
  margin-top: 5px;
}
#map .region-circle {
  stroke-width: 0px;
  stroke: #666;
}
#map .circle-station {
  cursor: hand;
  cursor: pointer;
  stroke: #333 !important;
  stroke-width: 0.5 !important;
}

.d3-tip-label {
  display: block;
  text-transform: uppercase;
  font-size: 10px;
}

#timeheat .tick text,
#timeano .tick text {
  font-weight: 300;
  font-size: 0.65em;
}
#timeheat .timeheat-rect,
#timeheat .timeano-rect,
#timeano .timeheat-rect,
#timeano .timeano-rect {
  cursor: hand;
  cursor: pointer;
}
#timeheat .asRange,
#timeano .asRange {
  position: absolute;
  height: 8px;
  border-radius: 0px;
  top: -1px;
  width: 100%;
  background-color: transparent;
}
#timeheat .asRange .asRange-selected,
#timeano .asRange .asRange-selected {
  height: 0px;
  border-radius: 0px;
}
#timeheat .asRange .asRange-pointer,
#timeano .asRange .asRange-pointer {
  height: 100%;
  background-color: transparent;
}
#timeheat .asRange .asRange-pointer:before,
#timeano .asRange .asRange-pointer:before {
  margin: 0px;
  height: 100%;
  background-color: #2C2C2C;
  border-radius: 0px;
}
#timeheat .asRange .asRange-pointer:after,
#timeano .asRange .asRange-pointer:after {
  background-color: transparent;
}
#timeheat .asRange .asRange-pointer:focus,
#timeano .asRange .asRange-pointer:focus {
  box-shadow: none;
  outline: -webkit-focus-ring-color auto 0px;
  outline-color: -webkit-focus-ring-color;
  outline-style: auto;
  outline-width: 0px;
}
#timeheat .domain,
#timeano .domain {
  display: none;
}

.timeano-container > svg,
.timeheat-container > svg {
  position: relative;
  z-index: 1;
  pointer-events: none;
}
.timeano-container > svg .season-filter-button,
.timeano-container > svg .timeheat-rect,
.timeano-container > svg .timeano-rect,
.timeheat-container > svg .season-filter-button,
.timeheat-container > svg .timeheat-rect,
.timeheat-container > svg .timeano-rect {
  pointer-events: initial;
}
.timeano-container > svg .season-filter-button,
.timeheat-container > svg .season-filter-button {
  cursor: pointer;
  cursor: hand;
}
.timeano-container > svg .season-filter-button:hover,
.timeheat-container > svg .season-filter-button:hover {
  opacity: 0.5;
}

.ano-slider-container,
.heat-slider-container {
  position: absolute;
  border-top: 1px dotted #666;
}
.ano-slider-container .play-slider-heat,
.ano-slider-container .play-slider-ano,
.heat-slider-container .play-slider-heat,
.heat-slider-container .play-slider-ano {
  position: absolute;
  top: 12px;
  left: -15px;
  border-radius: 0px;
  text-transform: uppercase;
  cursor: hand;
  cursor: pointer;
}
.ano-slider-container .play-slider-heat:hover,
.ano-slider-container .play-slider-ano:hover,
.heat-slider-container .play-slider-heat:hover,
.heat-slider-container .play-slider-ano:hover {
  opacity: 0.5;
}
.ano-slider-container .play-slider-heat-year,
.ano-slider-container .play-slider-ano-year,
.heat-slider-container .play-slider-heat-year,
.heat-slider-container .play-slider-ano-year {
  position: absolute;
  font-weight: 600;
  top: 15px;
  left: 15px;
}

.temp-lines-chart {
  width: 100%;
}
.temp-lines-chart svg {
  overflow: visible;
}
.temp-lines-chart .axis .domain {
  height: 1px;
  fill: none;
  stroke: #AAA;
  stroke-width: 2px;
}
.temp-lines-chart .tick text {
  font-size: 10px;
}
.temp-lines-chart .line {
  cursor: hand;
  cursor: pointer;
}
.temp-lines-chart .warming-line {
  cursor: hand;
  cursor: pointer;
}
.temp-lines-chart .x.axis text {
  font-size: 9px;
}

.bound {
  cursor: pointer;
  cursor: hand;
}

.ano-radar-chart {
  width: 98%;
}
.ano-radar-chart circle, .ano-radar-chart polygon {
  cursor: hand;
  cursor: pointer;
}
.points-key {
  width: 100%;
}

.showing {
  padding-top: 16px;
}
.showing h2, .showing p {
  display: inline-block;
  vertical-align: top;
}
.showing h2 {
  margin: 0px 0px 0px 0px;
  padding-right: 8px;
}
.showing p {
  padding-left: 8px;
  box-shadow: -1px 0px 0px 0px #9B9B9B;
  width: calc(100% - 80px);
  min-height: 30px;
  font-size: 0.75rem;
  margin: 0px;
}
.showing small {
  text-transform: uppercase;
}
.showing .showing-left,
.showing .showing-right {
  float: left;
}
.showing .showing-left {
  width: 30%;
}
.showing .showing-right {
  width: 70%;
}

.map-key-container {
  position: absolute;
  right: 16px;
  top: 48px;
  padding: 0px;
  padding-top: 32px;
  width: 20vw;
  margin-top: 5px;
}
.map-key-container .map-title {
  margin: 0px;
  text-transform: uppercase;
  padding-bottom: 16px;
}
.map-key-container .map-key .key-range {
  float: left;
  width: 100%;
}
.map-key-container .map-key .key-range span {
  clear: both;
  float: left;
  width: 20px;
  height: 30px;
}
.map-key-container .map-key .key-range p {
  margin: 0px;
  font-size: 0.75rem;
}
.map-key-container .map-key .key-range p.left-range {
  float: left;
  clear: left;
}
.map-key-container .map-key .key-range p.right-range {
  float: right;
}

.legend text {
  cursor: pointer;
  cursor: hand;
}

.coast-selector-container {
  position: absolute;
  top: 0px;
  padding: 0;
  padding-top: 16px;
  padding-left: 32px;
  pointer-events: none;
  /* The switch - the box around the slider */
  /* Hide default HTML checkbox */
  /* The slider */
}
.coast-selector-container #header_nav {
  pointer-events: auto;
}
.coast-selector-container .map-scope h2, .coast-selector-container .map-scope span {
  display: inline-block;
}
.coast-selector-container .map-scope span {
  cursor: hand;
  cursor: pointer;
}
.coast-selector-container .map-scope span:hover {
  opacity: 0.5;
}
.coast-selector-container .map-scope h2 {
  margin: 0px;
  margin-bottom: 10px;
}
.coast-selector-container .checkbox-label {
  display: inline-block;
  vertical-align: top;
  margin: 0px;
  line-height: 34px;
  margin-left: 10px;
  font-size: 0.75rem;
}
.coast-selector-container .switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
  pointer-events: auto;
}
.coast-selector-container .switch input {
  display: none;
}
.coast-selector-container .slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #CCC;
  -webkit-transition: 0.4s;
  transition: 0.4s;
}
.coast-selector-container .slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: 0.4s;
  transition: 0.4s;
}
.coast-selector-container input:checked + .slider {
  background-color: #000;
}
.coast-selector-container input:focus + .slider {
  box-shadow: 0 0 1px #000;
}
.coast-selector-container input:checked + .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}

.selector-container {
  position: absolute;
  right: 16px;
  top: 16px;
  width: 20vw;
}
.selector-container p {
  margin: 0px;
}
.selector-container p small {
  font-size: 0.75rem;
  text-transform: uppercase;
}
.selector-container .custom-select {
  background-color: #333;
  padding: 16px;
}
.selector-container .custom-select select {
  font-family: "Montserrat", sans-serif;
  width: 100%;
  background: #333;
  color: #FFF;
  font-size: 24px;
  border: none;
  font-size: inherit;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-transform: uppercase;
}

.panel-right {
  position: fixed;
  z-index: 999;
  right: 0vw;
  width: calc(100% - 70% - 16px);
  height: 100%;
  background-color: #FFF;
  padding: 16px 0px;
  box-shadow: inset 1px 0px 0px 0px #AAA;
}
.panel-right .panel-right-close {
  text-transform: uppercase;
  position: absolute;
  right: 0px;
  top: 0px;
  margin: 0px;
  padding-right: 10px;
  padding-top: 10px;
  cursor: hand;
  cursor: pointer;
  font-size: 12px;
}
.panel-right .panel-right-close:hover {
  opacity: 0.6;
}
.panel-right .panel-right-title {
  padding: 0px 16px;
  font-size: 18px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.panel-right .panel-image {
  margin-left: 1px;
  width: 99%;
  display: block;
}
.panel-right p {
  font-size: 13px;
}
.panel-right p.highlight {
  padding: 10px 0px;
  border-top: 1px solid #CCC;
  font-size: 11px;
  margin-bottom: 30px;
}
.panel-right p.highlight strong {
  font-weight: 400;
}

.accordion-toggle {
  cursor: pointer;
  margin: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 16px;
  line-height: 24px;
  height: 24px;
  padding: 0px 16px;
  box-shadow: inset 0px -1px 0px 0px #CCC;
  padding-right: 24px;
  background-repeat: no-repeat;
  background-position: 100% 50%;
  background-image: url(../img/keyboard-arrow-down.svg);
}

.accordion-toggle.active {
  background-image: url(../img/keyboard-arrow-up.svg);
  pointer-events: none;
}

.accordion-content {
  box-shadow: inset 0px -1px 0px 0px #CCC;
  display: none;
  padding: 16px;
  padding-bottom: 0px;
  overflow: hidden;
  overflow-y: auto;
}

.elements-1 .accordion-content {
  height: calc(100% - 24px);
}

.elements-2 .accordion-content {
  height: calc(100% - 48px);
}

.elements-3 .accordion-content {
  height: calc(100% - 72px);
}

.accordion-content.default {
  display: block;
}

.season-options-container {
  margin-top: 5px;
}
.season-options-container .button-season {
  padding: 5px 5px;
  outline: none;
  background: none;
  border-left: none;
  border-top: none;
  border-right: none;
  border-bottom-width: 3px;
  cursor: hand;
  cursor: pointer;
  font-family: "Montserrat", sans-serif;
  font-size: 11px;
  text-transform: uppercase;
  font-weight: 400;
  color: #CCC;
}
.season-options-container .button-season:hover {
  color: #999 !important;
}
.season-options-container .button-season.active {
  pointer-events: none;
}
html,
body {
  height: 100%;
  margin: 0;
  font-family: "Montserrat", sans-serif;
  font-weight: 400;
  background-color: #FAFAF8;
  overflow: hidden;
}
html *,
body * {
  box-sizing: border-box;
}
html h1,
html h2,
html h3,
html h4,
html h5,
html h6,
body h1,
body h2,
body h3,
body h4,
body h5,
body h6 {
  font-weight: 600;
}
html strong,
body strong {
  font-weight: 600;
}
html a,
body a {
  font-weight: 300;
  cursor: pointer;
}
html p,
body p {
  font-weight: 300;
}
html .d3-tip,
body .d3-tip {
  z-index: 9;
}
html .loading,
body .loading {
  position: fixed;
  top: 0px;
  left: 0px;
  bottom: 0px;
  right: 0px;
  background-color: #000;
  color: #FFF;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  z-index: 999;
}
html .loading .loading-content,
body .loading .loading-content {
  max-width: 75%;
  text-align: center;
  position: relative;
}
html .loading .loading-content:before, html .loading .loading-content:after,
body .loading .loading-content:before,
body .loading .loading-content:after {
  position: absolute;
  display: none;
  height: 50px;
  bottom: 24px;
  box-sizing: border-box;
}
html .loading .loading-content:before,
body .loading .loading-content:before {
  content: "";
  width: 160px;
  background-image: url(../img/tmed.png);
  background-repeat: no-repeat;
  background-size: auto 100%;
}
html .loading .loading-content:after,
body .loading .loading-content:after {
  background-color: #F2F2F2;
  padding: 12px;
  text-align: left;
  width: calc(100% - 208px);
  right: 24px;
  font-size: 11px;
  font-weight: 400;
  content: "All data displayed was generated using E.U. Copernicus Marine Service Information and T-MEDNet data base";
}
html .loading h3,
body .loading h3 {
  min-width: 100%;
}
html .loading.as-modal,
body .loading.as-modal {
  background-color: rgba(0, 0, 0, 0.5);
  box-shadow: 0px 0px 0px 1px #666;
}
html .loading.as-modal .loading-content,
body .loading.as-modal .loading-content {
  padding: 24px;
  padding-bottom: 90px;
  background-color: #fff;
  color: #333;
  border-radius: 6px;
}
html .loading.as-modal .loading-content:before, html .loading.as-modal .loading-content:after,
body .loading.as-modal .loading-content:before,
body .loading.as-modal .loading-content:after {
  display: block;
}
html .loading .close-modal,
body .loading .close-modal {
  border-radius: 6px;
  display: inline-block;
  margin: 0 auto;
  background-color: #333;
  padding: 12px 24px;
  font-size: 14px;
  font-weight: 700;
  color: #FFF;
  cursor: pointer;
}
html .loading .close-modal.disabled,
body .loading .close-modal.disabled {
  opacity: 0.5;
  pointer-events: none;
}
html .loading .close-modal:hover,
body .loading .close-modal:hover {
  opacity: 0.9;
}

.hidden {
  display: none;
}

/*==============================
=            LAYOUT            =
==============================*/
.app-container {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  /* Safari 6.1+ */
  display: inline-flex;
  flex-wrap: wrap;
  padding: 16px;
  width: 100%;
  height: 100%;
  padding: 0px;
}

.header {
  position: fixed;
  z-index: 9;
  width: 100%;
  height: 44px;
  pointer-events: none;
}
.header .header-nav-back {
  margin-left: 16px;
  display: inline-block;
  line-height: 44px;
  pointer-events: auto;
}

.map-container,
.graph-container,
.timeheat-container,
.timeano-container {
  position: relative;
}

.map-container {
  width: 70%;
  height: 66%;
}

.graph-container {
  width: calc(100% - 70% - 16px);
  height: 100%;
  margin-left: 16px;
}
.graph-container .graph-left,
.graph-container .graph-right {
  float: left;
}
.graph-container .graph-left {
  padding-top: 32px;
  width: 30%;
}
.graph-container .graph-right {
  width: 70%;
}

.timeheat-container,
.timeano-container,
.seasons-selector-container {
  position: absolute;
  bottom: 0px;
  overflow: hidden;
  width: 70%;
  height: calc(100% - 66%);
}

footer {
  padding: 20px;
}
footer p {
  font-size: 12px;
}

/*=====  End of LAYOUT  ======*/
.layoutSlider {
  width: 90vw;
  margin-left: 1vw;
  margin-top: 3vh;
}

/* CHAPUS OSCAR: BORRAR */
.region-counts {
  pointer-events: none;
}

.region-circle {
  cursor: pointer;
}

.rect_centroids {
  pointer-events: none;
}

#panel_figures {
  height: calc(100% - 44px);
  overflow-y: auto;
}

/*===============================
=            TOOLTIP            =
===============================*/
.d3-tip {
  line-height: 1;
  font-weight: bold;
  padding: 12px;
  background: rgba(0, 0, 0, 0.8);
  color: #fff;
  border-radius: 2px;
  pointer-events: none;
}

/* Creates a small triangle extender for the tooltip */
.d3-tip:after {
  box-sizing: border-box;
  display: inline;
  font-size: 10px;
  width: 100%;
  line-height: 1;
  color: rgba(0, 0, 0, 0.8);
  position: absolute;
  pointer-events: none;
}

/* Northward tooltips */
.d3-tip.n:after {
  content: "▼";
  margin: -1px 0 0 0;
  top: 100%;
  left: 0;
  text-align: center;
}

/* Eastward tooltips */
.d3-tip.e:after {
  content: "◀";
  margin: -4px 0 0 0;
  top: 50%;
  left: -8px;
}

/* Southward tooltips */
.d3-tip.s:after {
  content: "▲";
  margin: 0 0 1px 0;
  top: -8px;
  left: 0;
  text-align: center;
}

/* Westward tooltips */
.d3-tip.w:after {
  content: "▶";
  margin: -4px 0 0 -1px;
  top: 50%;
  left: 100%;
}

/*=====  End of TOOLTIP  ======*/
footer {
  z-index: 9;
  position: fixed;
  width: 70%;
  bottom: 0px;
  padding: 12px;
  padding-left: 32px;
  padding-top: 0px;
  cursor: hand;
  cursor: pointer;
  opacity: 0.7;
}
footer:hover {
  opacity: 1;
}
footer button {
  cursor: pointer;
  height: 18px;
  width: 18px;
  position: absolute;
  top: 2px;
  overflow-y: hidden;
  text-indent: -9999px;
  background-image: url(../img/info.svg);
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: 99%;
  border: none;
}
footer p {
  padding-left: 24px;
  color: #333;
  font-size: 10px;
  margin: 0px;
  line-height: 20px;
}

.lds-tmed {
  display: inline-block;
  position: relative;
  width: 64px;
  height: 64px;
}

.lds-tmed div {
  display: inline-block;
  position: absolute;
  left: 6px;
  width: 13px;
  background: #fff;
  animation: lds-tmed 1.2s cubic-bezier(0, 0.5, 0.5, 1) infinite;
}

.lds-tmed div:nth-child(1) {
  left: 6px;
  animation-delay: -0.24s;
}

.lds-tmed div:nth-child(2) {
  left: 26px;
  animation-delay: -0.12s;
}

.lds-tmed div:nth-child(3) {
  left: 45px;
  animation-delay: 0;
}

.lds-tmed-black {
  display: inline-block;
  position: relative;
  width: 64px;
  height: 64px;
}

.lds-tmed-black div {
  display: inline-block;
  position: absolute;
  left: 6px;
  width: 13px;
  background: #333;
  animation: lds-tmed 1.2s cubic-bezier(0, 0.5, 0.5, 1) infinite;
}

.lds-tmed-black div:nth-child(1) {
  left: 6px;
  animation-delay: -0.24s;
}

.lds-tmed-black div:nth-child(2) {
  left: 26px;
  animation-delay: -0.12s;
}

.lds-tmed-black div:nth-child(3) {
  left: 45px;
  animation-delay: 0;
}

@keyframes lds-tmed {
  0% {
    top: 6px;
    height: 51px;
  }
  50%, 100% {
    top: 19px;
    height: 26px;
  }
}

/*# sourceMappingURL=main.css.map */