@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,600,400italic,600italic|Roboto+Slab:400,700');

/* ==================================================================================================== */
/* General document settings */
/* ==================================================================================================== */

/* Hide horizontal scroll */
body {
  overflow-x: hidden;
}

button {
  font-family: century gothic, trebuchet ms;
  font-family: 'Nunito Sans', trebuchet ms;
  cursor: pointer;
  border: none;
  margin: 0px;
  padding: 0px;
}

input {
  font-family: 'Nunito Sans', trebuchet ms;
}

select {
  font-family: 'Nunito Sans', trebuchet ms;
}

.no-select {
  -webkit-touch-callout: none; /* iOS Safari */
  -webkit-user-select: none; /* Safari */
  -khtml-user-select: none; /* 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 */
}

/* ==================================================================================================== */
/* Popup window */
/* ==================================================================================================== */

/* Popup window background */
.popup {
  width: 100%;
  height: 100%;

  background-color: rgb(0, 0, 0);
  background-color: rgba(0, 0, 0, 0.4);

  z-index: 900;

  opacity: 0;
  /*transition: opacity 0.3s ease-in-out;*/
}
#popup {
  display: none;
  position: fixed;
  top: 0px;
  left: 0px;
}

/* Popup window */
.popup #popup-window {
  width: 70%;
  position: fixed;

  background-color: white;

  z-index: 901;
  box-shadow: 0px 0px 15px #333333;
}

.popup #popup-top {
  width: 100%;
  text-align: left;
  font-size: 20px;
  font-weight: bold;
  color: white;
  position: relative;

  background: #3F7DD3;
}

.popup #popup-title {
  padding: 5px 15px;
}

/* Right x-button */
.popup #x {
  font-size: 25px;
  font-weight: bold;
  color: black;
  /*border-radius: 5px;*/
  cursor: pointer;
  background: #d60000;
  color: white;

  margin: 0;
  position: absolute;
  top: 50%;
  right: 0px; /* 8px */
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);

  -webkit-transition: background 0.1s;
  -moz-transition: background 0.1s;
  transition: background 0.1s;
}
.popup #x:hover {
  background: #8f0000;
}

.popup #x .padding {
  padding: 1px; /* 5 */
  padding-right: 15px; /* 8 */
  padding-left: 15px; /* 8 */
}

.popup #popup-content {
  overflow-y: scroll;
}

/* ==================================================================================================== */
/* Screen window */
/* ==================================================================================================== */

#screen {
  height: 100%;
  width: 100%;

  position: absolute;
  top: 0px;
  left: 0px;

  background-color: #ffffff;

  z-index: 899;

  /* opacity: 0.0; */
  overflow: auto;
}

.screen #screen-top {
  width: 100%;
  text-align: left;
  font-size: 25px;
  font-weight: bold;
  color: black;
  position: relative;

  background: #5eb4ea;
}

.screen #screen-title {
  padding: 5px 15px;
}

/* Right x-button */
.screen #x {
  font-size: 25px;
  font-weight: bold;
  color: black;
  border-radius: 5px;
  cursor: pointer;
  background: #d60000;
  color: white;

  margin: 0;
  position: absolute;
  top: 50%;
  right: 5px; /* 8px */
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);

  -webkit-transition: background 0.1s;
  -moz-transition: background 0.1s;
  transition: background 0.1s;
}
.screen #x:hover {
  background: #8f0000;
}

.screen #x .padding {
  padding: 1px; /* 5 */
  padding-right: 15px; /* 8 */
  padding-left: 15px; /* 8 */
}

.screen #screen-content {
  padding: 15px;
}

/* ==================================================================================================== */
/* Page top */
/* ==================================================================================================== */

/* Top floating menu */
.page-top {
  height: 40px; /* was 85px: the 45px blue header bar was removed */
  width: 100%;

  background-color: #00abff;

  text-align: left;
  position: absolute;

  z-index: 140;
  top: 0px;

  /*box-shadow: 0px 2px 2px #aaaaaa; /*565656*/
  border-bottom: 1px solid #555555;
}

/* ---------------------------------------------------------------------------------------------------- */
/* Header */
/* ---------------------------------------------------------------------------------------------------- */

/* Page title */
#page-top-title {
  font-size: 25px;
  font-weight: bold;
  color: white;
  padding-left: 15px;
  display: table-cell;
  vertical-align: middle;
}

#page-top-x {
  margin: none;
  text-align: center;
  vertical-align: bottom;
  display: table-cell;
}

.page-top button:hover {
  cursor: pointer;
  background: #868686;
  background: #268ef5;
}

/* buttons on right side */
.button-contain {
  float: right;
  background: #bfbfbf;
  background: #3579d7;
  background: #278ce5;
  border-radius: 10px;
  width: 40px;
  height: 36px;
  margin-right: 5px;
  margin-top: 5px;
  display: table;
  text-align: middle;
  cursor: pointer;

  -moz-transition: background 0.1s;
  -webkit-transition: background 0.1s;
  transition: background 0.1s;
}
.button-contain:hover {
  cursor: pointer;
  background: #868686;
  background: #8bb7f5;
  background: #9ddbf7;
}

/* span containing text in div */
.button-contain-span {
  font-size: 25px;
  font-weight: bold;
  text-align: center;
  display: table-cell;
  vertical-align: middle;
  color: black;
  font-family: verdana;
}

/* ---------------------------------------------------------------------------------------------------- */
/* Slider */
/* ---------------------------------------------------------------------------------------------------- */

/* Container element for entirety of slider */
.slider {
  width: 100%;
  background: #c3dbf4;
  height: 40px;
}
.slider .padding {
  padding: 10px;
  padding-top: 5px;
  padding-bottom: 5px;
  /*padding-left: 10px;*/
  /*padding-right: 10px;*/
}
.slider .padding2 {
  /*width: 100%;
	display: table;*/
  display: flex;
  flex-direction: row;
  align-items: center;
}

.slider .padding2 > * + * {
  margin-left: 10px;
}

/* Play/pause buttons */
.slider .buttons-left {
  /*display: table-cell;
	float: left;
	margin-right: 10px;*/
  flex-shrink: 0;
}

.slider .buttons-left button {
  margin: none;
  margin-right: 0px;
  border-radius: 5px;
  /*background: #94BEEA;*/
  background: #c3dbf4;
  font-size: 20px;
  font-weight: bold;
  width: 35px;
  height: 30px;
  opacity: 0.4;

  -webkit-transition: opacity 0.1s;
  -moz-transition: opacity 0.1s;
  transition: opacity 0.1s;
}
.slider .buttons-left button:hover {
  /*background: #67A3E2;*/
  opacity: 1;
}

/* Element actually containing the slider */
.slider .slider-element {
  /*width: 60%;
	display:table-cell;
	float:left;*/
  flex-grow: 1;
}

#slider-container {
  width: 100%;
  margin: none;
  height: 30px;
  position: relative;
}

#preload-status {
  flex-shrink: 0;
}

/* ==================================================================================================== */
/* Hide buttons for left & right menus */
/* ==================================================================================================== */

/* Div containing text description and hide button */
.hide-button {
  height: 40px;
  background: #ffffff;
  position: relative;
  box-shadow: 0px 0px 15px #aaaaaa;
}

/* Text describing content of tab */
.hide-button .left {
  font-size: 16px;
  font-weight: bold;

  margin: 0;
  position: absolute;
  top: 50%;
  left: 7px; /* 8px */
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

/* Hide button itself */
.hide-button .right {
  background: #dddddd;
  cursor: pointer;
  font-size: 14px;
  border-radius: 5px;
  font-weight: normal;

  margin: 0;
  position: absolute;
  top: 50%;
  right: 6px; /* 8px */
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);

  -webkit-transition: background 0.2s;
  -moz-transition: background 0.2s;
  transition: background 0.2s;
}
.hide-button .right:hover {
  background: #bbbbbb;
}

/* ==================================================================================================== */
/* Page left */
/* ==================================================================================================== */

/* Left floating menu */
.page-left {
  height: 1175px;
  width: 280px;
  background-color: #f2f2f2;

  text-align: center;
  vertical-align: top;

  overflow-y: scroll;

  position: absolute;
  left: 0px;
  top: 40px; /*Adjusted from top of page (was 85px: 45px header bar removed)*/
  z-index: 100;

  border-right: 1px solid #333333;

  /*box-shadow: 3px 0px 3px #666666;*/
}

/* Hidden left fixed menu */
#page-left-hidden {
  width: 280px;
  height: 100%;
  display: table-cell;
}

/* ---------------------------------------------------------------------------------------------------- */
/* Entries */
/* ---------------------------------------------------------------------------------------------------- */

/* Entry settings */
.page-left .entry {
  width: 100%;
  cursor: pointer;
  text-align: left;
  border-radius: 2px;
  line-height: 110%;
  color: #000055;
  margin-bottom: 5px;

  position: relative; /*needed for right X button*/
}

.page-left .entry .general-padding {
  padding: 15px;
  padding-top: 9px;
  padding-bottom: 9px;
  padding-left: 10px;
}
.page-left .entry .padding {
  padding: 15px;
  padding-left: 10px;
  padding-top: 6px;
  padding-bottom: 6px;
}

/* Right x-button */
.page-left .x {
  font-size: 20px;
  font-weight: bold;
  color: black;
  border-radius: 2px;
  cursor: pointer;
  text-shadow: 0px 0px 1px #000000;

  margin: 0;
  position: absolute;
  top: 50%;
  right: 7px; /* 8px */
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}
.page-left .x .padding {
  padding: 6px; /* 5 */
  padding-right: 9px; /* 8 */
  padding-left: 9px; /* 8 */
}
.page-left .y {
  right: 40px;
}
.page-left .x .y .padding {
  padding: 5px;
  padding-right: 8px;
  padding-left: 8px;
}

/* Top text label */
.page-left .top {
  font-weight: bold;
  font-size: 16px;
  margin: none;
}
/* Bottom text label */
.page-left .bottom {
  font-size: 12px;
  margin: none;
  opacity: 0.5;
}

/* General settings (e.g., model) */
.page-left .general {
  background: #e3e3e3;
  -moz-transition: background 0.2s;
  -webkit-transition: background 0.2s;
  transition: background 0.2s;
}
.page-left .general:hover {
  background: #cacaca;
}

/* Top text label */
.page-left .general .top {
  font-weight: bold;
  font-size: 18px;
  margin: none;
}
/* Bottom text label */
.page-left .general .bottom {
  font-size: 16px;
  margin: none;
  opacity: 0.4;
}

/* Base layer */
.page-left .base {
  background: #cee0f0; /*#BDD7EE;*/
  line-height: 85%;
  cursor: default;

  -webkit-transition: box-shadow 0.2s;
  -moz-transition: box-shadow 0.2s;
  transition: box-shadow 0.2s;
}
.page-left .base:hover {
  box-shadow: 0px 1px 7px #666666;
}
.page-left .base .x {
  opacity: 0.2;
  -webkit-transition: opacity 0.2s;
  -moz-transition: opacity 0.2s;
  transition: opacity 0.2s;
}
.page-left .base .x:hover {
  opacity: 1;
}
/* Overlay */
.page-left .overlay {
  background: #d4e7c8; /*#C5E0B4;*/
  line-height: 85%;
  cursor: move;

  -webkit-transition: box-shadow 0.2s;
  -moz-transition: box-shadow 0.2s;
  transition: box-shadow 0.2s;
}
.page-left .overlay:hover {
  box-shadow: 0px 1px 7px #666666;
}
.page-left .overlay .x {
  opacity: 0.2;
  -webkit-transition: opacity 0.2s;
  -moz-transition: opacity 0.2s;
  transition: opacity 0.2s;
}
.page-left .overlay .x:hover {
  opacity: 1;
}
/* Geography */
.page-left .geography {
  background: #fbecbc; /*#FFE699;*/
  line-height: 85%;
  cursor: default;
}
.page-left .geography .x {
  opacity: 0.2;
  -webkit-transition: opacity 0.2s;
  -moz-transition: opacity 0.2s;
  transition: opacity 0.2s;
}
.page-left .geography .x:hover {
  opacity: 1;
}

/* Highlight rearrange mode */
/*
.page-left .overlay .padding{
	border-radius: 10px;
	cursor: pointer;
	-webkit-transition: box-shadow 0.2s;
	   -moz-transition: box-shadow 0.2s;
            transition: box-shadow 0.2s;
}
.page-left .overlay .padding:hover{
	box-shadow: 0px 1px 7px #444444;
}
.page-left .overlay .x .padding{
	box-shadow: 0px;
}
.page-left .overlay .x .padding:hover{
	box-shadow: 0px;
}
.page-left .overlay .x {
	box-shadow: 0px;
}
.page-left .overlay .x:hover{
	box-shadow: 0px;
}
*/

/* ==================================================================================================== */
/* Page right */
/* ==================================================================================================== */

/* Right floating menu */
.page-right {
  height: 1175px;
  width: 280px;
  background-color: #f2f2f2;

  text-align: center;
  vertical-align: top;

  overflow-y: scroll;

  position: absolute;
  top: 40px; /*Adjusted from top of page (was 85px: 45px header bar removed)*/
  right: 0px;
  z-index: 100;

  border-left: 1px solid #333333;
}

/* Hidden right fixed menu */
#page-right-hidden {
  width: 280px;
  height: 100%;
  display: table-cell;
}

/* ---------------------------------------------------------------------------------------------------- */
/* Toggle button for on/off */
/* ---------------------------------------------------------------------------------------------------- */

/* overall toggle class */
.toggle {
  text-align: left;
  width: 100%;
}

/* margin for toggle div */
.toggle .toggle-padding {
  padding-right: 10px;
  padding-left: 10px;
  margin-bottom: 15px;
  display: table;
}

/* Left side of toggle (containing the switch) */
.toggle .toggle-left {
  display: table-cell;
  width: 60px;
}

/* Right side of toggle (containing text) */
.toggle .toggle-right {
  display: table-cell;
}
.toggle .toggle-right span {
  font-size: 14px;
  font-weight: bold;
}

/* label containing entirety of switch */
.toggle .switch {
  position: relative;
  display: inline-block;
  width: 100%;
}

.toggle .switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.toggle .slider {
  width: 52px;
  height: 25px;

  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #cccccc;

  -webkit-transition: 0.2s;
  -moz-transition: 0.2s;
  transition: 0.2s;
}

.toggle .slider:before {
  position: absolute;
  content: '';
  height: 17px;
  width: 17px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  box-shadow: 0px 0px 10px #aaaaaa;
  -webkit-transition: 0.2s;
  -moz-transition: 0.2s;
  transition: 0.2s;
}

.toggle input:checked + .slider {
  background-color: #00a400;
}

.toggle input:focus + .slider {
  box-shadow: 0 0 1px white;
}

.toggle input:checked + .slider:before {
  -webkit-transform: translateX(27px);
  -moz-transform: translateX(27px);
  -ms-transform: translateX(27px);
  transform: translateX(27px);
}

/* Rounded sliders */
.toggle .slider.round {
  border-radius: 25px;
}

.toggle .slider.round:before {
  border-radius: 50%;
}

/* ---------------------------------------------------------------------------------------------------- */
/* Entries */
/* ---------------------------------------------------------------------------------------------------- */

.page-right .entry {
  position: relative; /* required for v button */
}

/* Title of sub0 */
.page-right .sub0 {
  background: #273974; /*9DC3E6*/
  color: white;
  font-weight: bold;
  font-size: 14px; /*17*/
  cursor: pointer;
}
.page-right .entry .sub0 .padding {
  padding: 10px;
  padding-top: 4px;
  padding-bottom: 4px;
}

/* Title of sub1 */
.page-right .entry .sub1 {
  background: #d9d9d9;
  font-weight: bold;
  font-size: 13px;
  cursor: pointer;

  -webkit-transition: background 0.2s;
  -moz-transition: background 0.2s;
  transition: background 0.2s;
}
.page-right .entry .sub1:hover {
  background: #c5c5c5;
}
.page-right .entry .sub1 .padding {
  padding: 10px;
  padding-top: 4px;
  padding-bottom: 4px;
}

/* Actual option list element */
.page-right .entry .sub2 {
  background: white;
  font-size: 13px;
}

/* Right x-button */
.page-right .x {
  font-size: 15px;
  font-weight: bold;
  color: black;
  border-radius: 5px;

  margin: 0;
  position: absolute;
  top: 50%;
  right: 4px;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}
.page-right .x .padding {
  padding: 2px;
  padding-right: 6px;
  padding-left: 6px;
}

.page-right .dropdown {
  height: 0;
  overflow: hidden;
  margin: auto;
}

/* ==================================================================================================== */
/* Page center (image) */
/* ==================================================================================================== */

/* Center element */
.page-center {
  height: 1175px;

  text-align: center;
  vertical-align: top;

  overflow-y: scroll;

  position: absolute;
  top: 40px; /*Adjusted from top of page (was 85px: 45px header bar removed)*/
  z-index: 50;
}

/* Image container */
#map-container {
  width: 100%;
  position: relative;
  display: block;
  margin: auto;
  text-align: center;
  z-index: 2;
}

/* Images */
#map-container img {
  width: 100%;
  position: absolute;
  left: 0px;
  right: 0px;
  margin-left: auto;
  margin-right: auto;
}

/* Dummy element */
#map-container #dummy-mobile {
  width: 100%;
  position: absolute;
  left: 0px;
  right: 0px;
  margin-left: auto;
  margin-right: auto;
}

/* ---------------------------------------------------------------------------------------------------- */
/* Right click menu for saving images/GIFs */
/* ---------------------------------------------------------------------------------------------------- */

#map-container #rightclick_menu {
  position: absolute;
  width: auto;
  height: auto;

  background: #ffffff;
  box-shadow: 0px 0px 10px #666666;
  color: black;
  border-radius: 10px;
  z-index: 999;

  display: none;
  overflow: hidden;
}
#map-container #rightclick_menu span {
  font-size: 14px;
  line-height: 14px;
  font-weight: bold;

  padding: 8px 20px;
  display: block;
  cursor: pointer;
  white-space: nowrap;
  text-align: center;

  -webkit-transition: background 0.2s;
  -moz-transition: background 0.2s;
  transition: background 0.2s;
}
#map-container #rightclick_menu span:hover {
  background: #dddddd;
}

/* ---------------------------------------------------------------------------------------------------- */
/* Map panel */
/* ---------------------------------------------------------------------------------------------------- */

/* Div containing map panel */
#map-panel {
  position: fixed;
  margin: auto;
  z-index: 100;

  background: #eeeeee;
  text-align: center;
  text-align: center;
  font-size: 16px;

  box-shadow: 0px 2px 2px #cccccc;
}

/* Regular div element (button) */
.map-panel div {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 3px;
  background: #dddddd;
  /* box-shadow: 0px 0px 5px #aaaaaa; */
  cursor: pointer;
  margin-left: 1px;
  margin-right: 1px;
  margin-top: 6px;
  max-height: 20px;
  overflow: hidden;

  -webkit-transition: background 0.2s;
  -moz-transition: background 0.2s;
  transition: background 0.2s;
}
.map-panel div:hover {
  background: #bbbbbb;
}

/* Active class */
.map-panel .active {
  background: #00de00;

  -webkit-transition: background 0.2s;
  -moz-transition: background 0.2s;
  transition: background 0.2s;
}
.map-panel .active:hover {
  background: #00ae00;
}

/* Buttons to show/hide menu */
.map-panel #show-left-page {
  visibility: hidden;
  background: #aaaaaa;
  float: left;
  left: 5px;
  margin-right: 5px;
  margin-left: 5px;
  margin-top: 4px;
  margin-bottom: 4px;
  color: white;
  font-weight: bold;

  -webkit-transition: background 0.2s;
  -moz-transition: background 0.2s;
  transition: background 0.2s;
}
.map-panel #show-left-page:hover {
  background: #888888;
}

.map-panel #show-right-page {
  visibility: hidden;
  background: #aaaaaa;
  float: right;
  right: 5px;
  margin-right: 5px;
  margin-left: 5px;
  margin-top: 4px;
  margin-bottom: 4px;
  color: white;
  font-weight: bold;

  -webkit-transition: background 0.2s;
  -moz-transition: background 0.2s;
  transition: background 0.2s;
}
.map-panel #show-right-page:hover {
  background: #888888;
}

/* ---------------------------------------------------------------------------------------------------- */
/* Presentation mode toolkit */
/* ---------------------------------------------------------------------------------------------------- */

/* Div containing canvas toolkit */
#presentation-toolkit {
  opacity: 0.8;
  z-index: 102;
}

#presentation-toolkit .standard{
  display: inline-block;
  background:black;
  opacity: 0.8;
  font-size: 22px;
  padding: 5px;
  width: 30px;
  height: 30px;
  color: white;
}

#presentation-toolkit .button{
  display: inline-block;
  background:black;
  opacity: 0.8;
  font-size: 22px;
  padding: 5px;
  width: 30px;
  height: 30px;
  color: white;
  cursor: pointer;

  -webkit-transition: background 0.2s;
  -moz-transition: background 0.2s;
  transition: background 0.2s;
}
#presentation-toolkit .button:hover {
  background: #666666;
}

/* ---------------------------------------------------------------------------------------------------- */
/* Canvas drawing toolkit */
/* ---------------------------------------------------------------------------------------------------- */

/* Div containing canvas toolkit */
#canvas-toolkit {
  background: #ffffff;
  border: 2px solid black;
  opacity: 0.8;
  border-radius: 10px;
  z-index: 101;
}

#canvas-toolkit .padding-toolkit {
  display: table;
  border-spacing: 1px 7px;
  border-collapse: separate;
}

#canvas-toolkit .color {
  display: table-cell;
  width: 20px;
  height: 20px;
  border-radius: 8px;
  cursor: pointer;
}

#canvas-toolkit .width {
  display: table-cell;
  height: 20px;
  background: black;
  cursor: pointer;
}

#canvas-toolkit .clear {
  display: table-cell;
  font-size: 16px;
  color: red;
  font-weight: bold;
  cursor: pointer;
}

/* ---------------------------------------------------------------------------------------------------- */
/* Setting for image size */
/* ---------------------------------------------------------------------------------------------------- */

/* Div containing image size slider */
.page-center #image-size-slider {
  background: #ffffff;
  border: 2px solid black;
  opacity: 0.8;
  border-radius: 10px;
  z-index: 101;
}

/* ---------------------------------------------------------------------------------------------------- */
/* Text describing maps (e.g., model, forecast hour) */
/* ---------------------------------------------------------------------------------------------------- */

.page-center #map-info {
  width: 100%;
  display: inline-block;
  z-index: 20;
  vertical-align: bottom;
}

.page-center #map-info #map-info-left {
  float: left;
  margin-left: 8px;
  font-weight: bold;
  font-size: 20px;
  text-align: left;
  vertical-align: bottom;
}

.page-center #map-info #map-info-right {
  float: right;
  margin-right: 8px;
  font-size: 14px;
  line-height: 100%;
  text-align: right;
  vertical-align: top;
}

/* ---------------------------------------------------------------------------------------------------- */
/* Colorbars */
/* ---------------------------------------------------------------------------------------------------- */

.colorbars .colorbar-container {
  display: table;
  position: relative;
}

.colorbars .colorbar-left {
  display: table-cell;
  width: 80%;
}

.colorbars .colorbar-left img {
  vertical-align: middle;
  width: 100%;
}

.colorbars .colorbar-right {
  display: table-cell;
  width: 20%;
  text-align: left;
  font-weight: bold;
  vertical-align: top;
}

/* ==================================================================================================== */
/* Hidden popup window content */
/* ==================================================================================================== */

/* ---------------------------------------------------------------------------------------------------- */
/* Projections menu */
/* ---------------------------------------------------------------------------------------------------- */

.popup .projections {
  text-align: center;
}

/* First layer div for scale container */
.popup .projections .scale-outer {
  width: 100%;
  background: #ecf5fa;
  border-radius: 15px;
  margin: auto;
  margin-bottom: 15px;
}

/* First layer div for scale container */
.popup .projections .scale-inner {
  padding: 10px;
  padding-bottom: 0px;
  display: flex;
  flex-flow: row wrap;
  justify-content: flex-start;
}

.popup .projections .projection-display {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 240px;
  background: white;
  box-shadow: 0px 0px 10px #aaaaaa;
  border-radius: 10px;
  margin-right: 15px;
  margin-bottom: 15px;
  cursor: pointer;

  -webkit-transition: box-shadow 0.2s;
  -moz-transition: box-shadow 0.2s;
  transition: box-shadow 0.2s;
}

.popup .projections .projection-display:hover {
  box-shadow: 0px 0px 10px #222222;
}

@media only screen and (max-width: 600px) {
  .popup .projections .projection-display {
    width: 100%;
    text-align: center;
    margin-right: 0px;
  }
}

/* ---------------------------------------------------------------------------------------------------- */
/* Models menu */
/* ---------------------------------------------------------------------------------------------------- */

.popup .models {
  text-align: center;
}

/* Entire containing div */
.popup .models .container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  font-size: 16px;
}

/* category (global/regional/etc) header style */
.popup .models .category-container {
  width: 30%;
  margin-left: 1%;
  margin-right: 1%;
}

/* category (global/regional/etc) name header style */
.popup .models .category-name {
  width: 100%;
  text-align: center;
  margin-bottom: 15px;
  font-size: 18px;
  font-weight: bold;
}

/* First layer div for scale container */
.popup .models .model-container {
  text-align: left;
  margin-bottom: 10px;
  cursor: pointer;
  background: #eeeeee;

  -webkit-transition: background 0.2s;
  -moz-transition: background 0.2s;
  transition: background 0.2s;
}
.popup .models .model-container:hover {
  background: #dddddd;
}

/* First layer div for scale container */
.popup .models .model-container-selected {
  text-align: left;
  margin-bottom: 10px;
  cursor: pointer;
  background: #daeafc;
}

@media only screen and (max-width: 1100px) {
  .popup .models .container {
    justify-content: left;
  }
  .popup .models .category-container {
    width: 47%;
    margin-left: 1%;
    margin-right: 1%;
  }
}

@media only screen and (max-width: 600px) {
  .popup .models .container {
    width: 100%;
    display: inline-block;
  }
  .popup .models .category-container {
    width: 98%;
    margin-left: 1%;
    margin-right: 1%;
  }
}

/* ---------------------------------------------------------------------------------------------------- */
/* Layer settings menu */
/* ---------------------------------------------------------------------------------------------------- */

.popup .layers {
  text-align: center;
}

/* ---------------------------------------------------------------------------------------------------- */
/* Run selection menu */
/* ---------------------------------------------------------------------------------------------------- */

.popup .runs .element {
  margin-bottom: 3px;
  box-shadow: 0px 2px 6px #bbbbbb;
  border-radius: 0px;
  cursor: pointer;

  -webkit-transition: background 0.2s;
  -moz-transition: background 0.2s;
  transition: background 0.2s;
}
.popup .runs .element:hover {
  background: #ceebfb;
}

.popup .runs .element .padding {
  padding: 5px 10px;
  text-align: center;
  font-weight: bold;
  font-size: 14px;
}

/* ---------------------------------------------------------------------------------------------------- */
/* Popup for product info */
/* ---------------------------------------------------------------------------------------------------- */

.popup .product-info {
  text-align: left;
}

/* ---------------------------------------------------------------------------------------------------- */
/* Present mode menu */
/* ---------------------------------------------------------------------------------------------------- */

.popup .present-mode{
  font-size: 16px;
}

.popup .present-mode button{
  padding: 5px;
  padding-left: 8px;
  padding-right: 8px;
  background: white;
  border-radius: 8px;
  border: 2px solid #000066;
  color: #000066;
  font-weight: bold;
  margin-right: 10px;
  font-size: 16px;

  -webkit-transition: background 0.2s;
  -moz-transition: background 0.2s;
  transition: background 0.2s;
}
.popup .present-mode button:hover{
  background: #ceebfb;
}

.popup .present-mode .table{
  display: table;
  width: 100%;
  font-size: 16px;
}

.popup .present-mode .table-row{
  width: 100%;
  display: table-row;
  cursor: move;
}

.popup .present-mode .table-cell{
  display: table-cell;
}

/* First column */
.popup .present-mode .entry-first{
  padding: 5px;
  background: #eeeeee;
  margin-right: 5px;
  margin-bottom: 5px;
  text-align: center;
}

/* Normal column */
.popup .present-mode .entry{
  padding: 5px;
  background: #eeeeee;
  margin-right: 5px;
}

/* Last entry (X button) */
.popup .present-mode .entry-last{
  padding: 5px;
  background: #eeeeee;
  text-align: center;
  font-weight: bold;
  color: #880000;
  cursor: pointer;

  -webkit-transition: background 0.2s;
  -moz-transition: background 0.2s;
  transition: background 0.2s;
}

.popup .present-mode .entry-last:hover{
  background: #ffbebe;
}

/* ---------------------------------------------------------------------------------------------------- */
/* Make GIF menu */
/* ---------------------------------------------------------------------------------------------------- */

.popup .make-gif {
  text-align: center;
  font-size: 16px;
}

.popup .make-gif button {
  padding: 5px 10px;
  background: white;
  border: 2px solid #00096e;
  border-radius: 10px;
  font-weight: bold;
  color: #00096e;
  font-size: 16px;

  -webkit-transition: background 0.2s;
  -moz-transition: background 0.2s;
  transition: background 0.2s;
}

.popup .make-gif button:hover {
  background: #d2e0fa;
}

/* ---------------------------------------------------------------------------------------------------- */
/* Page help */
/* ---------------------------------------------------------------------------------------------------- */

.popup .help {
}

.popup .help .top-button {
  margin: 5px;
  background: #d3e8f7;
  text-align: center;
  font-weight: bold;
  cursor: pointer;

  -webkit-transition: background 0.2s;
  -moz-transition: background 0.2s;
  transition: background 0.2s;
}

.popup .help .top-button:hover {
  background: #8bbee6;
}

.popup .help .top-button .active {
  background: #8bbee6;
}

/* ---------------------------------------------------------------------------------------------------- */
/* Exit page */
/* ---------------------------------------------------------------------------------------------------- */

.popup .exit {
  text-align: center;
}

/* ---------------------------------------------------------------------------------------------------- */
/* Load / save maps */
/* ---------------------------------------------------------------------------------------------------- */

.popup .save {
  text-align: left;
}

/* Index buttons */
.popup .save .esa-button, .esa-button-selected{
	border: 2px solid #0000C9;
	color: #0000C9;
	background: white;
	cursor: pointer;
	
	border-radius: 5px;
	padding-right: 7px;
	padding-left: 7px;
	margin-left: 1px;
	margin-right: 1px;
	font-size: 18px;

	-moz-transition: background 0.2s;
	-webkit-transition: background 0.2s;
    transition: background 0.2s;
}
.popup .save .esa-button:hover {
    background: #C0E4FF;
}

.popup .save input {
  margin: auto;
  font-size: 16px;
  padding: 3px;
  border-radius: 5px;
  border: 1px solid #7cc8f7;
  color: #0d5887;
  box-shadow: 0px 0px 10px #b9e2fc;
}

.popup .save .button-normal {
  font-size: 16px;
  font-weight: bold;
  padding: 3px;
  border-radius: 5px;
  border: 1px solid #7cc8f7;
  background: #c8e8fb;
  padding-left: 7px;
  padding-right: 7px;
  box-shadow: 0px 0px 10px #b9e2fc;

  -webkit-transition: background 0.2s;
  -moz-transition: background 0.2s;
  transition: background 0.2s;
}
.popup .save .button-normal:hover {
  background: #a4d3f0;
}

/* First layer div for scale container */
.popup .save .scale-outer {
  width: 100%;
  background: #ecf5fa;
  border-radius: 15px;
  margin: auto;
  margin-bottom: 15px;
}

/* First layer div for scale container */
.popup .save .scale-inner {
  padding: 10px;
  padding-bottom: 0px;
  display: flex;
  flex-flow: row wrap;
  justify-content: flex-start;
  text-align: left;
}

.popup .save .entry-display {
  display: flex;
  justify-content: left;
  align-items: left;
  width: 240px;
  background: white;
  box-shadow: 0px 0px 10px #aaaaaa;
  border-radius: 10px;
  margin-right: 15px;
  margin-bottom: 15px;
  cursor: pointer;
  text-align: left;

  padding-bottom: 10px;
  padding-top: 10px;

  -webkit-transition: box-shadow 0.2s;
  -moz-transition: box-shadow 0.2s;
  transition: box-shadow 0.2s;
}

.popup .save .entry-display:hover {
  box-shadow: 0px 0px 10px #222222;
}

/* New entry styling */
.popup .save .entry-new{
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  margin-bottom: 12px;
}

.popup .save .entry-new .name{
  flex-shrink: 0; 
  font-weight: bold;
}

.popup .save .entry-new .name {
  flex-shrink: 0; 
  font-weight: bold;
}

.popup .save .entry-new .buttons {
  flex-grow: 1;
  margin-left: 10px;
}

.popup .save #table-container {
  display: table;
  width: 100%;
}

.popup .save #left-side {
  display: table-cell;
  width: 400px;
  margin-bottom: 0px;
}

.popup .save #right-side {
  display: table-cell;
  padding-left: 10px;
}

.popup .save #category-list {
  margin-bottom: 10px;
  vertical-align: top;
  width: 400px;
  height: 300px;
  padding: 5px;
  font-size: 18px
}

.popup .save #save-map-container {
  border-radius: 10px;
  box-shadow: 0px 0px 10px #0D5887;
  width: 80%;
  max-width: 500px;
  margin: auto;
  margin-bottom: 25px;
}

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

  .popup .save #category-list {
    width: 100%;
    height: 100px;
  }

  .popup .save #table-container {
    display: inline-block;
    width: 100%;
  }

  .popup .save #left-side {
    display: inline-block;
    width: 100%;
    margin-bottom: 20px;
  }
  
  .popup .save #right-side {
    display: inline-block;
    width: 100%;
    padding-left: 0px;
    margin-bottom: 50px;
  }
}

@media only screen and (max-width: 600px) {
  .popup .save #category-list {
    width: 100%;
    height: 50px;
  }

  .popup .save .entry-display {
    width: 100%;
    text-align: center;
    margin-right: 0px;
  }
}