:root {
  --theme-gradient-0: #1D1D1D;
  --theme-gradient-1: #262626;
  --theme-gradient-2: #272727;
  --theme-gradient-3: #333231;
  --theme-gradient-4: #474747;
  --theme-gradient-5: #484848;
  --theme-gradient-6: #8a8a8a;
  --theme-border-1: #5C5C5C;
  --theme-highlight-color: #4ED9C2;
  --theme-highlight-alert: #f9aa18;
  --theme-highlight-ember: #FB6432;
  --theme-base-font-size: 12px;
}

html {
  scrollbar-color: #a1a1a1 #212121
}

body {
  background-color: var(--theme-gradient-0);
  color: #D1D1D1;
  font-family: vaisala-sans, sans-serif;
  font-size: var(--theme-base-font-size);
}

h1,
h2 {
  font-family: vaisala-sans-light, sans-serif;
  font-weight: normal;
}

h3,
h4,
h5,
h6 {
  font-family: vaisala-sans, sans-serif;
  font-weight: normal;
}

a {
  color: var(--theme-highlight-color)
}

a:visited {
  color: #02d3cd
}

a:hover {
  color: #1FA8A8
}

ul {
  list-style-type: none;
  margin: 5px 0 0 0;
  padding: 0;
}

input,
textarea,
select,
button {
  font-family: vaisala-sans, sans-serif;
  font-size: var(--theme-base-font-size);
}

header {
  box-shadow: 0px 5px 12px rgba(0, 0, 0, .35);
  color: #FFF;
  background: var(--theme-gradient-1) url('/components/core/images/xweather-icon.png') no-repeat top left;
  background-size: contain;
}

header h1 {
  display: none
}

header h2 a:visited,
header h2 a:hover {
  color: #EEE;
}

header h2 sup {
  color: #4170B2
}

header h2 {
  color: #EEEEEE;
}

header h2 a {
  color: #EEE;
}

#user_utility>a#release_bell.attention {
  color: var(--theme-highlight-ember);
  background-color: initial;
}

#user_profile_list #whats_new>a.attention {
  background-color: var(--theme-highlight-ember);
}

#user_utility #user_profile_action span {
  background-color: var(--theme-highlight-color);
}

#user_product_list .sortable_handle {
  background-color: var(--theme-highlight-color);
}

#subnav {
  background-color: var(--theme-gradient-3);
}

#subnav>ul {
  box-shadow: 0px 8px 8px rgba(0, 0, 0, .15);
}

#subnav>ul>li a {
  color: #d6d4ce
}

#subnav>ul>li a:hover,
#subnav>ul>li.active a:hover {
  background-color: rgba(237, 235, 232, 0.12);
  color: #FFF;
}

#subnav>ul>li.active a {
  color: var(--theme-highlight-color);
  font-weight: bold;
}

#subnav>ul>li.more {
  background: linear-gradient(to right, rgba(0, 0, 0, 0.05) 0%, rgba(0, 0, 0, 0.58) 26%, rgba(0, 0, 0, 0.6) 27%, rgba(0, 0, 0, 1) 100%);
  border-radius: 4px 4px 0 0
}

#switch_notice {
  background-color: var(--theme-highlight-alert);
  box-shadow: 0px -4px 12px rgba(0, 0, 0, 0.35);
  color: var(--theme-gradient-3);
}

#switch_notice a {
  color: var(--theme-gradient-3);
  background: var(--theme-highlight-ember);
}

#switch_notice a:hover {
  background-color: #eab464;
}

#subnav>ul>li.more ul {
  border-radius: 0px 0px 4px 4px;
  background: rgba(0, 0, 0, 0.90);
  box-shadow: 0px 4px 6px #000
}

body.dragging .placeholder {
  border-color: #CACACA;
}

.sortable_handle {
  background-color: var(--theme-highlight-color);
  border-radius: 4px;
  box-shadow: 0 0 6px #333;
}

input[type=text],
input[type=email],
input[type=password],
input[type=date],
input[type=number],
textarea {
  border-color: var(--theme-border-1);
  border-width: 1px;
  border-style: solid;
  background: var(--theme-gradient-1);
  color: #FFF;
  border-radius: 0;
  outline-color: #464646;
  line-height: 20px;
}

input:focus-visible,
textarea:focus-visible {
  border-color: #348FF4;
  outline: none;
}

#application_error {
  border-color: var(--theme-highlight-color);
  box-shadow: 0px 0px 12px #333;
  color: #FFFFFF;
  background-color: #242424;
}

#application_error a {
  color: #FFF
}

#application_error a:visited {
  color: #FFF
}

#application_error .close_error {
  color: var(--theme-highlight-color);
}

.cd-top {
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
  background-color: rgba(255, 255, 255, 0.35);
}

.cd-top:hover {
  background-color: rgba(255, 255, 255, 0.85);
  color: var(--theme-gradient-2);
}

#overlay {
  background-color: rgba(0, 0, 0, 0.35);
}

button {
  color: #d6d4ce;
  border-color: #D1D1D1;
  background-color: var(--theme-gradient-3);
  outline: none;
  border: 1px solid #686965;
  cursor: pointer;
  text-overflow: ellipsis;
  font-family: vaisala-sans, sans-serif;
  min-width: 40px;
  font-size: var(--theme-base-font-size);
}

.ranges_table button,
#hours button,
#ranges button,
#meta button,
#tables button,
#presets button {
  padding: 2px 6px;
  width: 100%;
}

button.available {
  background-color: var(--theme-gradient-3);
  border-color: #686965;
}

button:hover {
  border-color: var(--theme-highlight-color);
  background-color: var(--theme-highlight-color);
  color: var(--theme-gradient-0);
}

button.active,
button.current,
button.playing {
  border-color: var(--theme-highlight-color);
  background-color: var(--theme-highlight-color);
  color: var(--theme-gradient-0);
  font-weight: bold;
}

button.unavailable,
button.unavailable:hover {
  background-color: var(--theme-gradient-4);
  color: var(--theme-gradient-6);
  border: 1px solid #696969;
  cursor: default;
}

.button {
  border-color: #686965;
  background-color: var(--theme-gradient-3);
  outline: none;
}

.button[type=submit],
.button.submit {
  background-color: var(--theme-highlight-color);
  border-color: var(--theme-highlight-color);
  color: var(--theme-gradient-0);
}

.button[disabled],
.button[disabled]:hover,
button[disabled],
button[disabled]:hover,
button[disabled].active,
button[disabled].active:hover,
button[disabled].current,
button[disabled].current:hover,
button[disabled].available,
button[disabled].available:hover,
button[disabled].playing,
button[disabled].playing:hover,
button.disabled,
button.disabled:hover,
button.disabled.active,
button.disabled.active:hover,
button.disabled.current,
button.disabled.current:hover,
button.disabled.available,
button.disabled.available:hover {
  pointer-events: none;
  background-color: var(--theme-gradient-4);
  color: var(--theme-gradient-6);
  border: 1px solid #696969;
}

button.non_interactive {
  background: var(--theme-gradient-2);
  border-color: #464646;
  cursor: default;
  -moz-user-select: none;
  -khtml-user-select: none;
  -ms-user-select: none;
  -webkit-user-select: none;
  -o-user-select: none;
}

button.non_interactive:hover {
  background: var(--theme-gradient-2);
  border-color: #464646;
  pointer-events: none;
  font-family: vaisala-sans, sans-serif;
  color: #D1D1D1;
}

a.button {
  background-color: var(--theme-highlight-color)
}

a.button:visited {
  background-color: var(--theme-highlight-color);
  color: var(--theme-gradient-0);
}

a.button:hover {
  background-color: var(--theme-highlight-color);
  color: var(--theme-gradient-0);
}

.button:hover {
  background-color: var(--theme-highlight-color);
  color: var(--theme-gradient-0);
}

.chosen-disabled {
  opacity: 0.35 !important
}

.chosen-container {
  font-size: var(--theme-base-font-size);
}

.chosen-container-multi .chosen-choices {
  border-color: #686965;
}

.chosen-container-multi .chosen-choices li.search-field input[type=text] {
  height: 20px;
  font-family: vaisala-sans, sans-serif;
}

.chosen-container-active .chosen-choices li.search-field input[type="text"] {
  color: #EEE !important;
}

.chosen-container-multi .chosen-choices li.search-choice {
  margin: 2px 5px 2px 0;
  padding: 2px 20px 2px 5px;
  border-radius: 0px;
  background-image: none;
  background-color: var(--theme-highlight-color);
  color: var(--theme-gradient-0);
  font-family: vaisala-sans, sans-serif;
  border: 1px solid var(--theme-highlight-color);
}

.chosen-container .chosen-results li.no-results {
  background: var(--theme-gradient-1);
  color: #FFFFFF;
}

.chosen-container .chosen-results li.highlighted,
.chosen-container-multi .chosen-drop .result-selected:hover,
.chosen-container .chosen-results li.result-selected:hover {
  background: var(--theme-gradient-5);
  color: #FFF;
}

.chosen-container .chosen-results li.disabled-result {
  color: #ababab;
}

.chosen-container .chosen-results li.result-selected,
.chosen-container-multi .chosen-drop .result-selected {
  color: #000;
  ;
  background-color: var(--theme-highlight-color);
  font-family: vaisala-sans, sans-serif;
}

.chosen-container-active.chosen-with-drop .chosen-single .chosen-container-active.chosen-with-drop .chosen-choices {
  box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.65);
  border-color: #348FF4;
  border-width: 2px;
}

.chosen-container .chosen-drop {
  border-color: var(--theme-gradient-1);
  box-shadow: 0px 6px 8px rgba(0, 0, 0, 0.65);
  background: var(--theme-gradient-1);
}

.chosen-container-single .chosen-drop {
  margin-top: 0px;
  border-radius: 0;
}

.chosen-container .chosen-results {
  color: #D1D1D1;
  padding: 0;
  margin: 0;
}

.chosen-container-single .chosen-search {
  padding: 0px;
}

.chosen-container-single .chosen-search input[type="text"] {
  background-image: none;
}

.chosen-container-single .chosen-search:before {
  position: absolute;
  top: 14px;
  left: 14px;
  display: inline-block;
  font-family: 'Glyphicons Halflings';
  font-style: normal;
  font-size: 10px;
  color: #DDD;
  font-weight: normal;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  content: "\e003"
}


.chosen-container-single .chosen-single,
.chosen-container .chosen-choices {
  border-color: var(--theme-border-1);
  border-width: 1px;
  border-radius: 0px;
  background: var(--theme-gradient-1);
  color: #D1D1D1;
}

.chosen-container-single.chosen-container-active .chosen-single,
.chosen-container.chosen-container-active .chosen-choices {
  background: var(--theme-gradient-1);
  border-color: #348FF4;
  box-shadow: none;
}

.chosen-container-single .chosen-search input[type=text] {
  border: 1px solid var(--theme-gradient-0);
  box-shadow: none;
  background-color: var(--theme-gradient-0);
  color: #FFF;
  font-family: vaisala-sans, sans-serif;
  box-shadow: 0 0 2px #7c7c7c inset;
  padding: 8px 8px 8px 30px;
}

.chosen-container-single .chosen-search input[type=text]:focus {
  box-shadow: 0 0 2px #D3D3D3 inset;
}

.indicator {
  height: 16px;
  width: 16px;
  position: relative;
  top: 2px;
  margin: 0 5px 0 0;
  cursor: pointer;
}

#settings_utility a#settings_snapshot:hover,
#settings_utility a#settings_snapshot.active {
  background-color: var(--theme-gradient-3);
}

#history_utility {
  color: #FFF;
  background-color: #4c4b48;
  box-shadow: 0px 3px 15px 3px rgba(0, 0, 0, 0.5);
}

#history_pane {
  color: #FFF;
  background-color: var(--theme-gradient-3);
  box-shadow: 0px 3px 15px 3px rgba(0, 0, 0, 0.5)
}

#history_pane span.glyphicon-pushpin {
  color: #C0C0C0;
  text-shadow: 2px -2px 5px #333;
}

#history_pane span.glyphicon-pushpin.active {
  color: #FFF;
  text-shadow: -2px 0px 5px #333, -2px 0px 5px #333, -2px 0px 5px #333;
}

#history_pane #action_history_container>div {
  border-color: #5c5c5c;
  ;
  border-radius: 0 4px 4px 4px;
  background-color: var(--theme-gradient-1);
  color: #FFF;
}

#history_pane #action_history_container>div div span:first-child {
  color: #FFF
}

#history_pane #action_history_container>div>div {
  color: #cecfcf
}

#operationalNews {
  color: #333;
}

#operationalNews ul li {
  background-color: var(--theme-highlight-ember);
  box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.75);
}

#operationalNews ul li+li {
  box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.75);
  border-radius: 4px 0 0 4px;
}

#operationalNews ul li a {
  color: #FFFFFF;
  text-decoration: none;
}

#operationalNews ul li a.dismiss {
  color: var(--theme-gradient-3);
}

#user_utility>a,
#settings_utility>a {
  color: #FFF;
}

#user_utility>a:hover {
  background-color: #4f6362
}

#user_utility a:hover,
#user_utility a.active {
  background-color: var(--theme-gradient-3);
}

#user_product_list {
  box-shadow: 0px 10px 12px rgba(0, 0, 0, 0.35);
  background: var(--theme-gradient-1);
  border-color: transparent;
}

#user_profile_list hr {
  background-color: #545453;
  color: #545453;
}

#user_product_list li a,
#user_product_list li a:visited {
  color: #FFF;
}

#user_product_list li {
  background-color: var(--theme-gradient-1);
}

#user_product_list li.product_section_header {
  background: var(--theme-gradient-3);
}

#user_product_list li.extra:last-child {
  border-bottom: 10px solid #1E1E1E;
}

#user_product_list li.extra {
  background-color: #1E1E1E;
}

#user_product_list li.extra a,
#user_product_list li.extra a:visited {
  color: #afafaf;
}

#user_profile_list {
  box-shadow: 0px 10px 12px rgba(0, 0, 0, 0.35);
  background-color: var(--theme-gradient-1);
  min-width: 235px;
}

#user_profile_list li a {
  border-radius: 0px;
  color: #FFF;
}

#user_product_list li a:hover,
#user_profile_list li a:hover,
#user_product_list li a:visited:hover,
#user_profile_list li a:visited:hover {
  background: var(--theme-gradient-5);
}

#user_product_list li.extra a:hover {
  background-color: var(--theme-gradient-1);
}

a.weather_config,
a.weather_config:visited {
  border-color: transparent;
  background-color: var(--theme-gradient-3);
  color: #D1D1D1;
  box-shadow: 0px -2px 4px rgba(0, 0, 0, 0.65);
}

a.weather_config:hover {
  color: #EEE;
}

a.weather_config.active {
  color: #EEE;
}

div.pager span.pagedisplay {
  color: #5f5f5f;
}

#sidebar {
  background: var(--theme-gradient-3);
  box-shadow: -8px 0px 12px rgba(0, 0, 0, 0.65);
  border-color: var(--theme-gradient-3);
}

fieldset legend {
  color: #FFFFFF;
}

fieldset legend:empty {
  display: none;
}

.profile-popout-details {
  box-shadow: 0px 10px 12px rgba(0, 0, 0, 0.35);
  background-color: var(--theme-gradient-3);
  border-color: #686965;
}

.profile-popout-details .basic_form fieldset {
  background-color: var(--theme-gradient-3);
}

#toggle_support {
  background-color: #121932;
  color: #FFF;
  box-shadow: 0px 0px 12px #AAA;
}

.info {
  color: #b2afaa;
  outline: none;
}

.info:hover {
  color: #FFFFFF;
}

.inline_button {
  border-color: #686965;
  border-radius: 0px;
  background-color: var(--theme-gradient-3);
  color: #FFF;
  outline: none;
  padding: 3px 8px;
}

.inline_button.active {
  background-color: var(--theme-highlight-color);
  border-color: var(--theme-highlight-color);
  color: var(--theme-gradient-0);
}

.inline_button:visited {
  color: #D1D1D1;
}

.inline_button.active:visited {
  color: var(--theme-gradient-0);
}

.inline_button:hover {
  color: var(--theme-gradient-0);
  background-color: var(--theme-highlight-color);
  border-color: var(--theme-highlight-color);
  font-weight: bold;
}

.date_range_start,
.date_range_end {
  border-radius: 4px;
  border-color: #CCC;
  box-shadow: 2px 2px 2px #d6d4ce inset;
  background-color: #FFF;
}

div.tabs>ul>li>a {
  background: #2d2d2d;
  border-radius: 0;
  color: #FFF;
}

div.tabs>ul>li>a>img {
  width: 20px;
  vertical-align: bottom;
}

div.tabs>ul>li:hover>a {
  color: var(--theme-highlight-color);
}

div.tabs>ul>li.active>a {
  background: var(--theme-gradient-3);
  color: var(--theme-highlight-color);
  box-shadow: none;
}

div.tabs>ul>li.disabled>a,
div.tabs>ul>li.disabled:hover>a {
  background: #4c4848 !important;
  color: #909090 !important;
  box-shadow: none;
  cursor: auto;
}

div.tabs>ul>li.disabled img,
div.tabs>ul>li.disabled:hover img {
  opacity: 0.3;
}

div.tabs div.tab {
  background: var(--theme-gradient-3);
}

div.subtabs div.subtab {
  background: #434343;
}

div.tabs.subtabs>ul>li>a {
  background: #3a3a3a
}

div.tabs.subtabs>ul>li.active>a {
  background: #434343
}

table.form td {
  padding: 5px 0;
}

table.form span.custom_input span.custom_radio+label {
  font-size: 14px;
  color: #FFF;
  display: inline;
}

.data_table table:not(.crop_table) tbody tr:not(.graph_row):not(.graph-row):hover {
  background-color: #4c4b48 !important;
  color: #FFF;
}

.data_table table.crop_table tbody tr:hover {
  background: #2f2f2f;
  color: #D1D1D1;
}

.terms_of_use {
  color: #C1C2C2;
}

.terms_of_use .terms_bold {
  color: #eee;
}


.terms_of_use .terms_underline {
  color: #eee;
}

.terms_of_use table th,
.terms_of_use table td {
  border-color: #d6d4ce;
}

.terms_of_use table th {
  color: #eee;
}

.basic_form fieldset {
  background-color: var(--theme-gradient-1);
  border: none;
  box-shadow: 0px 0px 8px 4px rgba(0, 0, 0, .35);
}

.basic_form label {
  color: #EEEEEE;
}

.basic_form div.message {
  border-color: transparent;
}

.basic_form div.message a {
  color: #4c4b48;
  text-decoration: underline;
}

.basic_form div.message a:hover {
  color: #FFF;
}

.basic_form dl {
  margin: 0;
  padding: 0
}


#whats_new span {
  color: #FFFFFF;
  background-color: var(--theme-gradient-3);
  box-shadow: 0px 10px 12px rgba(0, 0, 0, 0.35);
  border: 1px solid #292927;
}

#whats_new h1.special_release {
  color: var(--theme-highlight-color);
}

*::-webkit-scrollbar {
  background: #212121;
}

*::-webkit-scrollbar-thumb {
  background-color: var(--theme-gradient-4);
}

#tropical_refresh_container button {
  background-color: var(--theme-highlight-ember);
  border-color: var(--theme-highlight-ember);
  color: var(--theme-gradient-1);
}

#tropical_refresh_container button.disabled {
  border-color: #555;
  background-color: #555;
  color: #898989;
}

#pass_requirements {
  background-color: var(--theme-gradient-3);
}

.loader {
  border-color: rgba(107, 105, 101, 0.5);
  border-top-color: var(--theme-gradient-3);
}

.highcharts-button-hover rect {
  fill: var(--theme-highlight-color);
}

.highcharts-button-hover text {
  color: var(--theme-gradient-0) !important;
  fill: var(--theme-gradient-0) !important;
}

.highcharts-button-pressed rect {
  fill: var(--theme-highlight-color);
}

.highcharts-button-pressed text {
  color: var(--theme-gradient-0) !important;
  fill: var(--theme-gradient-0) !important;
}

.highcharts-menu-item:hover {
  background-color: var(--theme-highlight-color);
  color: var(--theme-gradient-0);
}

.leaflet-container #view-config {
  font-family: vaisals-sans, sans-serif;
  font-size: 12px;
}

.leaflet-control-container .leaflet-bar button .glyphicon {
  top: 3px;
}

.leaflet-control-container .leaflet-bar button,
.leaflet-control-container .leaflet-bar a {
  background: #000;
  color: #EEE;
}

.leaflet-control-container .leaflet-bar a:hover,
.leaflet-control-container .leaflet-bar a.polyline-measure-controlOnBgColor,
.leaflet-control-container .leaflet-bar button:hover {
  background-color: var(--theme-highlight-color);
  color: var(--theme-gradient-0);
}

.leaflet-control-container .leaflet-bar button.leaflet-disabled,
.leaflet-control-container .leaflet-bar a.leaflet-disabled {
  background-color: rgba(0, 0, 0, 0.5);
}

div.panel {
  position: relative;
  padding: 10px 0 0 0;
  margin: 0 auto;
}

div.panel+div.panel {
  margin-top: 15px;
}

div.panel h3 {
  position: relative;
  margin: 0;
  color: #EEE;
  padding: 8px 8px 8px 10px;
  background-color: var(--theme-gradient-3);
  padding-left: 10px;
  font-family: vaisals-sans, sans-serif;
  font-size: var(--theme-base-font-size);
}

div.panel h3.update_ready,
div.panel h3.active {
  color: #FFFFFF;
  background-image: linear-gradient(45deg, #03605e, #4ed9c2);
}

div.panel h3:hover {
  color: var(--theme-highlight-color);
  background-color: var(--theme-gradient-5);
}

div.panel.running h3 {
  background: var(--theme-highlight-color);
}

div.panel.running h3:hover {
  background: var(--theme-highlight-color);
  color: var(--theme-gradient-5);
}

.marketing-details {
  background: var(--theme-gradient-1);
  box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.85);
}

.marketing-details nav a {
  color: var(--theme-highlight-color);
}

.marketing-details nav a:hover {
  background-color: #1E1E1E;
}