/*
  Main CSS File for the app
*/
html, body {
  margin: 0;
}

body {
  position: relative;
}

div.container {
  position: relative;
  width: auto;
}

div.visible {
  display: block !important;
}

.hidden {
  display:none !important;
}

.lead.lead-small {
  font-size: 17px;
}

/* OpenEI Skin Fix */

a:hover,
a:focus {
  text-decoration: none;
}

#mainContent {
  height: calc(100% - 45px);
  display: flex;
  flex-direction: column;
}

#mainContent .content {
  flex: 1 0 auto;
}

div#content {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  padding: 0 1.3em 1em;
  background: rgba(238,238,238,0.96);
  overflow: hidden;
}

div#app-container {
  background: white;
  padding: 1px 1em 1em; /* 1px top to force margin reset on any top of page headers */
  box-shadow: 0px 0px 2px rgba(0,0,0,0.1); /* subtle page border */
}

div#mw-footer {
  margin: 0 -15px;
}

.header {
  position: relative;
  overflow: auto; /* terribad OpenEI style rule */
}
.header .menu {
  height: auto;
}

h1, h2, h3, h4, h5, h6 {
  border: none;
}

h1.title {
  font-weight: normal;
  font-size: 36px;
}

#footer-info-copyright {
  position: relative;
  margin-top: 0.5em;
}

.xdr-body-container {
  padding-top: 15px;
}

/* Page Alert */
#pageAlert {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  border-radius: 0;
  margin-bottom: 0;
  z-index: 1061;
}

/* Nav */
.navbar {
  border-radius: 0;
  margin-bottom: 0;
}

.navbar-openei {
  margin-bottom: 0;
  background-color: #f5f3f2;
  min-height: 36px;
}

.navbar-openei .navbar-brand {
  height: 40px;
}

.navbar-openei .navbar-header {
  height: 42px;
}

.navbar-openei .nav.navbar-nav.primary-nav a {
  padding: 12px 15px;
}

.navbar-openei .navbar-nav > li.user-menu {
  padding: 4px;
}

.navbar-openei .navbar-nav > li.user-menu > a {
  font-size: 1.2em;
}

.navbar-openei .user-menu .first-initial {
  width: 16px;
}

.navbar-openei .user-menu .dropdown-menu {
  top: 45px;
}

.navbar-openei .user-menu .dropdown-menu:before {
  top: -5px;
  right: 25px;
}

.dropdown-menu > .active > a,
.dropdown-menu > .active > a:hover,
.dropdown-menu > .active > a:focus {
  color: #333333;
}

/* responsive nav */
@media (max-width: 767px) {
  .navbar-inverse .navbar-nav .open .dropdown-menu {
    background: #fff;
  }
  .navbar-inverse .navbar-nav .open .dropdown-menu > li > a {
    color: #5e6367;
    text-shadow: none;
  }
}

/* Main Index Page Styles */
div#app-container.main-page-background {
  background: transparent;
  box-shadow: none;
}

.main-page-background .dashboard-panel {
  background: white;
  box-shadow: 0px 1px 2px rgba(0,0,0,0.2);
}

.main-page-background .table-striped > tbody > tr:nth-of-type(odd) {
  background-color: rgba(249, 249, 249, 0.75);
}

.main-page-background .table-hover > tbody > tr:hover {
  background: white;
}

.intro-text-center {
  width: 40%;
  margin: 0 auto 2em;
  text-align: center;
}
.home-block {
  margin: 2em 12em;
}
.home-block h2 {
  color: #0055a5; /* GDR Logo text blue */
  margin-bottom: 10px;
}
.home-block .well.lead,
div#content .home-block .well.lead > .btn {
  font-size: 16px;
  vertical-align: baseline;
}
div#content .home-block > ol {
  margin: 1em 2em 2em 6em;
}

/* bootstrap OpenEI fix */
.modal-header h3 {
  margin: 0;
}

.modal.fade {
  top: 20%; /* manual center modals vertically */
}

.no-gutter > [class*='col-'] {
  padding-right:0;
  padding-left:0;
}

/* bootstrap OpenEI fix */
.progress {
  min-height: 0px;
  min-width: 0px;
}

div#content .dropdown-menu {
  margin: 0;
  padding: 0;
}

#mainContent .navbar-hydrocap {
  background-color: #325B79;
  border: 0;
  box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.25);
  min-height: 40px;
  z-index: 2;
}

#mainContent .navbar-hydrocap .navbar-brand {
  padding: 8px 10px 8px 50px;
  font-size: 24px;
  line-height: 1;
  height: 40px;
  position: relative;
}

#mainContent .navbar-hydrocap .navbar-brand::after {
  position: absolute;
  top: 13px;
  right: -15px;
  content: "1.0";
  color: #FAC02E;
  font-size: 14px;
}

#mainContent .navbar-hydrocap .navbar-brand img {
  display: inline-block;
  width: 37px;
  position: absolute;
  left: 8px;
  top: 2px;
}

#mainContent .navbar-hydrocap a {
  color: #FFFFFF;
}

#mainContent .navbar-hydrocap a:hover,
#mainContent .navbar-hydrocap a:focus {
  color: #EAEAEA;
}

#mainContent .navbar-hydrocap .navbar-nav a {
  border-bottom: solid 3px transparent;
  padding-top: 10px;
  padding-bottom: 10px;
}

#mainContent .navbar-hydrocap .navbar-nav a.active {
  background-color: rgba(255, 255, 255, 0.25);
}

#mainContent .navbar-hydrocap .navbar-nav a:hover,
#mainContent .navbar-hydrocap .navbar-nav a:focus {
  border-color: #EAEAEA;
}

#mainContent .navbar-hydrocap .dropdown.open > a {
  background-color: rgba(255, 255, 255, 0.25);
}

#mainContent .navbar-hydrocap .dropdown.open .dropdown-menu a:hover,
#mainContent .navbar-hydrocap .dropdown.open .dropdown-menu a:focus {
  background-color: transparent;
}

.content-wrapper {
  display: flex;
  align-items: stretch;
  height: 100%;
  position: relative;
  z-index: 1;
}

.page-content .main-banner {
  /*background: transparent url('../img/hydrogen-capacity-bg.jpg') no-repeat scroll center center / cover !important;*/
  background: transparent url('../img/hydrocap-bg-2.jpg') no-repeat scroll center center / cover !important;
  min-height: 215px;
  margin-left: -15px;
  margin-right: -15px;
  position: relative;
  float: left;
  width: calc(100% + 30px);
}

.page-content .main-banner::before {
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background-image: linear-gradient(98deg, rgba(35,147,174,0.5) 0%, rgba(93,250,165,0.5) 100%);
}

.page-content .main-banner .page-heading {
  padding-top: 2em;
  padding-left: 6%;
  padding-bottom: 2em;
  min-height: 215px;
  color: #FFFFFF;
  background-color: rgba(0,0,0,0.5);
}

.page-content .main-banner .page-heading h1 {
  color: #FFFFFF;
  margin-top: 0;
}

.page-content .hydrocap-section {
  padding-bottom: 20px;
  border-bottom: solid 3px #EAEAEA;
  float: left;
  width: calc(100% + 30px);
}

.page-content .hydrocap-section:last-child {
  border-bottom: 0;
}

.page-content .hydrocap-section h2 {
  color: #325B79;
  font-weight: bold;
}

.hydrocap-form-sections-wrapper {
  display: flex;
  align-items: stretch;
  flex-wrap: wrap;
}

.hydrocap-form-section.default-wrapper {
  margin-top: 20px;
}

.hydrocap-form-section {
  flex: 1 1 400px;
  max-width: 400px;
  box-shadow: 2px 2px 5px rgba(0,0,0,0.25);
  margin-right: 20px;
  margin-bottom: 20px;
  background-color: #EAEAEA;
}

.hydrocap-form-section .section-heading {
  background-color: #2393AE;
  color: #FFFFFF;
  font-size: 24px;
  padding: 3px 10px;
  position: relative;
}

.hydrocap-form-section .section-heading::before {
  position: absolute;
  top: 2px;
  right: 7px;
  font-family: "FontAwesome";
  font-size: 24px;
  color: rgba(255,255,255,0.75);
}

.hydrocap-form-section .section-heading.defaults {
  background-color: #888888;
}

.hydrocap-form-section .section-heading.excel-file::before {
  content: "\f1c3";
}

.hydrocap-form-section .section-heading.other-inputs::before {
  content: "\f044";
}

.hydrocap-form-section .section-heading.defaults::before {
  content: "\f085";
}

.hydrocap-form-section .section-body {
  padding: 15px 10px;
  overflow: hidden;
}

.hydrocap-form-section .model-default {
  margin-bottom: 3px;
  border-bottom: solid 1px #CCCCCC;
}

.hydrocap-form-section .model-default:last-child {
  border-bottom: 0;
}

.hydrocap-form-section .model-default .default-desc {
  font-size: 12px;
  color: #888888;
}

.hydrocap-input-wrapper label {
  font-size: 16px;
  margin-bottom: 0;
}

.hydrocap-input-wrapper .help-block {
  font-size: 12px;
  margin-top: 0;
  margin-bottom: 5px;
}

.template-files p {
  margin-bottom: 3px;
  margin-top: -10px;
}

.template-files .btn,
.template-files .btn:active {
  width: 40%;
  font-weight: normal;
  font-size: 12px;
}

.hydrocap-input-file {
  width: 0.1px;
	height: 0.1px;
	opacity: 0;
	overflow: hidden;
	position: absolute;
	z-index: -1;
}

.hydrocap-input-file + label {
  color: #443100;
  border: 1px solid #FAC02E;
  background-color: #F1F1F1;
  padding: 0;
  cursor: pointer;
  width: 100%;
}

.hydrocap-input-file:focus + label {
	outline: 1px dotted #000;
	outline: -webkit-focus-ring-color auto 5px;
}

.hydrocap-input-file + label * {
	pointer-events: none;
}

.hydrocap-input-file + label span {
  width: 60%;
  min-width: 200px;
  min-height: 2em;
  display: inline-block;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  vertical-align: top;
  padding: 6px 12px;
  font-weight: normal;
}

.hydrocap-input-file + label strong {
  width: 40%;
  height: 100%;
  color: #443100;
  background-color: #FAC02E;
  display: inline-block;
  padding: 6px 12px;
  font-weight: normall
}

.form-group.has-error .hydrocap-input-file + label {
  border-color: #a94442;
}

.form-group.has-error .hydrocap-input-file + label strong {
  background-color: #a94442;
  color: #FFFFFF;
}

.overlay {
  position: fixed;
  display: none;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0,0,0,0.5);
  z-index: 20000;
}

.overlay .processing-message {
  position: relative;
  margin: 0 auto;
  width: 400px;
  height: 200px;
  background-color: #EAEAEA;
  padding: 10px;
  margin-top: 10%;
}

/* Output styles */
.result-files {
  display: flex;
  align-items: stretch;
  flex-wrap: wrap;
  margin-bottom: 15px;
}

.result-files .result-file {
  position: relative;
  background-color: #FFFFFF;
  border: solid 2px #CCC;
  max-width: 400px;
  width: 400px;
  display: flex;
  align-items: center;
  margin: 0 5px 5px 0;
  padding: 10px;
  text-align: center;
  color: #888888;
  flex: 1 1 auto;
}

.result-files .result-file img {
  width: 100%;
  position: relative;
}

.result-files .result-file .download-file {
  position: absolute;
  right: 10px;
  bottom: 10px;
  opacity: 0;
  transition: opacity 0.5s;
}

.result-files .result-file:hover .download-file {
  opacity: 1;
}

.result-files .result-file .file-name {
  font-size: 24px;
  width: 100%;
  color: #337733;
}

.result-files .result-file .file-name i.fa {
  font-size: 100px;
}

/* General styles */
.hydrocap-yellow-text {
  color: #FAC02E;
}

.btn {
  border-radius: 0;
}

.btn:focus,
.btn:active {
  outline: none;
}

.btn-hydrocap-yellow-cta,
.btn-hydrocap-yellow-cta:active {
  background-color: #FAC02E;
  color: #443100;
  font-size: 28px;
  font-weight: bold;
  border: solid 2px #9A710A;
  padding: 6px 27px;
  transition: background-color 0.25s, color 0.25s;
  box-shadow: 2px 2px 5px rgba(0,0,0,0.25);
}

.btn-hydrocap-yellow-cta:hover,
.btn-hydrocap-yellow-cta:focus {
  background-color: #f9cb57;
}

.btn-hydrocap-submit,
.btn-hydrocap-submit:active {
  background-color: #0B7A2A;
  color: #FFFFFF;
  font-size: 20px;
  font-weight: bold;
  border: solid 2px #014E20;
  padding: 6px 27px;
  transition: background-color 0.25s, border-color 0.25s;
  box-shadow: 2px 2px 5px rgba(0,0,0,0.25);
}

.btn-hydrocap-submit:hover,
.btn-hydrocap-submit:focus {
  background-color: #13b340;
  border-color: #028a39;
  color: #FFFFFF;
}

.btn-hydrocap-reset,
.btn-hydrocap-reset:active {
  background-color: #9E9E9E;
  color: #FFFFFF;
  font-size: 16px;
  font-weight: bold;
  border: 0;
  padding: 6px 23px;
  transition: background-color 0.25s, border-color 0.25s;
  margin: 3px 15px;
}

.btn-hydrocap-reset:hover,
.btn-hydrocap-reset:focus {
  background-color: #CCCCCC;
  border-color: #480400;
  color: #FFFFFF;
}

.btn-hyscape-download,
.btn-hyscape-download:active {
  background-color: #A50900;
  color: #FFFFFF;
  font-size: 16px;
  border: solid 2px #6C0600;
  padding: 6px 23px;
  box-shadow: 1px 2px 2px #DDDDDD;
  transition: background-color 0.25s, border-color 0.25s;
}

.btn-hyscape-download:hover,
.btn-hyscape-download:focus {
  background-color: #6C0600;
  border-color: #480400;
  color: #FFFFFF;
}

.btn-hyscape-img-download,
.btn-hyscape-img-download:active {
  background-color: #A50900;
  color: #FFFFFF;
  font-size: 16px;
  border: solid 2px #6C0600;
  border-radius: 50%;
  padding: 4px 8px;
  box-shadow: 1px 2px 2px #DDDDDD;
  transition: background-color 0.25s;
}

.btn-hyscape-img-download:hover,
.btn-hyscape-img-download:focus {
  background-color: #6C0600;
  border-color: #480400;
  color: #FFFFFF;
}

.col-no-padding {
  padding-left: 0;
  padding-right: 0;
}

/* Small Devices, Tablets */
@media (min-width : 768px) {
  .page-content .hydrocap-section {
    padding-left: calc(6% - 15px);
  }
}

/* Medium Devices, Desktops */
@media (min-width : 992px) {
  .hydrocap-form-section.default-wrapper {
    float: right;
    margin-top: 0;
  }
}

/* Custom XL screens */
@media (min-width : 1400px) {

}