.btn-success {
  background: 'success';
  font-size: 18px;
  font-family: inherit;
  padding: 5px 12px;
  height: 55px;

  margin: 0px 10px 14px 20px;
  text-align: left;
  color: white;
  text-indent: 4px;
  vertical-align: middle;
  border-radius: 0px;
  border-color: transparent;
  box-shadow: 0 2px 5px 0 rgba(0,0,0,0.18), 0 1px 5px 0 rgba(0,0,0,0.15);
  text-transform: uppercase;
  -webkit-transition: all 0.25s cubic-bezier(0.02, 0.01, 0.47, 1);
  transition: all 0.25s cubic-bezier(0.02, 0.01, 0.47, 1);
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

/*#wq_tab-base_ions img {
    vertical-align: top;
} */

.btn-primary {
  background: 'primary';
  font-size: 18px;
  font-family: inherit;
  padding: 5px 12px;
  height: 55px;
  margin: 0px 10px 14px 20px;
  text-align: left;
  color: white;
  text-indent: 4px;
  vertical-align: middle;
  border-radius: 0px;
  border-color: transparent;
  box-shadow: 0 2px 5px 0 rgba(0,0,0,0.18), 0 1px 5px 0 rgba(0,0,0,0.15);
  text-transform: uppercase;
  -webkit-transition: all 0.25s cubic-bezier(0.02, 0.01, 0.47, 1);
  transition: all 0.25s cubic-bezier(0.02, 0.01, 0.47, 1);
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}
.navbar-custom-menu>.navbar-nav>li>.dropdown-menu {
  width:350px;}

/* Make header wider to accomodate full title */
@media (min-width: 769px) {
  .main-header .navbar {
    margin-left: 325px;
  }
  .main-header .logo {
    width: 325px;
  }
}

@media (min-width: 800px) and (max-width: 1200px) {
  /* This is for the title */
  .main-header .logo {
    width: 100% !important;
    text-align: center !important;
    float: none !important;
    display: block !important;
  }
  .main-header .navbar {
    margin-left: 0 !important;
    padding: 5px 10px;
    min-height: 30px;
  }
  .main-sidebar {
    margin-top: 60px; /* When header gets smushed on small screen, this drops the sidebar lower so it's no obscured */
  }
}
/* Use different mobile sizing */
@media (max-width: 900px) {
  /* This is for the title */
  .main-header .logo {
    width: 100% !important;
    text-align: center !important;
    float: none !important;
    display: block !important;
  }
  .main-header .navbar {
    margin-left: 0 !important;
    padding: 5px 10px;
    min-height: 30px;
  }
  /* This is for the other buttons in the header */
  .main-header .navbar .dropdown-toggle {
    font-size: 12px;
    padding: 5px 10px;
  }
  .main-header .navbar .dropdown-toggle .icon {
    font-size: 12px;
  }
  /* This is for the logo */
  .main-header .dropdown img {
    width: 70px; /* Adjust the width as needed */
    height: auto;
  }
  .main-header .dropdown > a {
    padding: 5px 10px !important;
  }
  /* This is for the sidebar toggle */
  .main-header .sidebar-toggle {
    height: auto;
    padding: 5px 10px;
  }
  /* Something like this for the treatment buttons, but I couldn't quite solve it.*/
  .content-wrapper .btn {
    font-size: 12px;
    padding: 5px 10px;
    height: auto;
    line-height: 1.3;
  }
  .content-wrapper .btn .icon {
    font-size: 12px;
  }
  .main-sidebar {
    margin-top: 40px; /* When header gets smushed on small screen, this drops the sidebar lower so it's no obscured */
  }
}

@media (max-width: 386px) {
  .main-sidebar {
    margin-top: 120px; /* When header gets smushed on small screen, this drops the sidebar lower so it's no obscured */
  }
}

.shiny-output-error{visibility: hidden}

.shiny-output-error:after{content: ' \a😢 Water is outside modeling range. Please adjust water quality or chemicals in the sidebar.';
visibility: visible}