/*
  Work around for issue where Reach UI is adding type="button" to our span elements in the banner even though they are not buttons.
  So here we override the base styles, setting webkit-appearance to none unless the element is actually a button.
*/
[type="button"],
[type="reset"],
[type="submit"],
button {
  -webkit-appearance: none;
}
button[type="button"],
button[type="reset"],
button[type="submit"],
button {
  -webkit-appearance: button;
}

reach-portal {
  z-index: 1002;
  position: fixed;
}

[data-reach-dialog-content] {
  background: none;
}

body.fixed-nav .topnav-navbar {
  position: fixed;
}
body.fixed-nav > div.wrapper > div.content-page > div.content {
  padding-top: 70px;
}

.form-control.invalid,
.form-select.invalid,
.form-select.invalid ~ .select2-container > .selection > .select2-selection {
  border-color: #fa6767;
  padding-right: calc(1.5em + 0.9rem);
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23fa6767'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23fa6767' stroke='none'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right calc(0.375em + 0.225rem) center;
  background-size: calc(0.75em + 0.45rem) calc(0.75em + 0.45rem);
}

.invalid ~ .invalid-tooltip,
.invalid ~ .invalid-tooltip {
  display: block;
}

.dropdown-align-right {
  position: relative;
}
.dropdown-align-right [data-reach-menu-popover],
.dropdown-align-right .dropdown-menu {
  right: 0;
}

.btn-link-no-pad {
  padding: 0 !important;
  border-width: 0;
}

.logo-text {
  color: #8691a0;
  font-size: 19px;
  vertical-align: middle;
  font-weight: 700;
  letter-spacing: 0.5px;
  margin-left: 8px;
  line-height: 0;
}

.big-refresh-link .spinner-border {
  height: 1em;
  width: 1em;
  border-width: 0.15em;
}

.global-progress-bar {
  display: block;
  position: fixed;
  top: 0;
  z-index: 1002;
  width: 100%;
}
.global-progress-bar .progress {
  border-radius: 0;
  height: 2px;
}