body {
  background: #fafafa;
  color: #333333;
  font-size: 12pt;
  margin-top: 74px;
}

h1,
h2,
h3,
h4,
h5,
h6,
a {
  color: #001a57;
  font-weight: 600;
}

.container {
  margin: 0 auto;
  max-width: 1600px;
  width: 100%;
}

.hazel-tabs .active {
  border-bottom-color: #f8f9fa !important;
}

.btn-outline-upload-excel {
  background-color: white;
  border-color: #008000;
  color: #008000;
}

.btn-outline-upload-excel:hover {
  background-color: #008000;
  border-color: white;
  color: white;
}

.btn-outline-upload-pdf {
  background-color: white;
  border-color: #f40f02;
  color: #f40f02;
}

.btn-outline-upload-pdf:hover {
  background-color: #f40f02;
  border-color: white;
  color: white;
}

.btn-primary {
  background-color: #136daf;
}

.btn-basic {
  color: #136daf;
}

.li-success {
  color: #003f3f;
}

.btn-warning {
  background-color: #f39200;
}

.li-warning {
  color: #f39200;
}

.btn-danger {
  background-color: #880c52;
}

a.link-danger,
a.link-danger:hover {
  color: #880c52;
}

.li-danger {
  color: #880c52;
}

.btn-success {
  background-color: #00a29a;
}

.nav-item {
  font-size: 12pt;
}

.input-group > .input-group-prepend {
  flex: 0 0 15%;
}

.input-group .input-group-text {
  width: 100%;
}

.site-header .dropdown:hover > .dropdown-menu {
  display: block;
}

.site-header .dropdown-item:hover {
  background-color: #001a57;
  color: #ccd1dd;
}

.bg-steel {
  background-color: #001a57;
}

.site-header .navbar-nav .nav-link {
  color: #ccd1dd;
}

.site-header .navbar-nav .nav-link:hover {
  color: #ffffff;
}

.site-header .navbar-nav .nav-link.active {
  font-weight: 500;
}

.content-section {
  background: #ffffff;
  padding: 10px 20px;
  border: 1px solid #dddddd;
  border-radius: 3px;
  margin-bottom: 20px;
}

.article-title {
  color: #444444;
}

a.article-title:hover {
  color: #136daf;
  text-decoration: none;
}

.article-content {
  white-space: pre-line;
}

.article-img {
  height: 65px;
  width: 65px;
  margin-right: 16px;
}

.article-metadata {
  padding-bottom: 1px;
  margin-bottom: 4px;
  border-bottom: 1px solid #e3e3e3;
}

.article-metadata a:hover {
  color: #333;
  text-decoration: none;
}

.article-svg {
  width: 25px;
  height: 25px;
  vertical-align: middle;
}

.account-img {
  height: 125px;
  width: 125px;
  margin-right: 20px;
  margin-bottom: 16px;
}

.account-heading {
  font-size: 2.5rem;
}

.table-small-text {
  font-size: 10pt;
}

#hazel-page-content {
  display: block;
}

#hazel-page-loading {
  display: none;
  position: center;
  top: 0;
  left: 0;
  margin-left: auto;
  margin-right: auto;
  z-index: 100;
  width: 100vw;
  height: 100vh;
  background-image: url("assets/loading.91463fe534dd.gif");
  background-repeat: no-repeat;
  background-position: center;
}

#substance-concentration-note {
  font-style: italic;
}

.dropdown-header {
  cursor: pointer;
}

.substance-title {
  position: relative;
  font-size: large;
  color: #001a57;
  background-color: #ccd1dd;
  border-color: #001a57;
  font-weight: 600;
  line-height: 27px;
}
.substance-title:hover {
  color: rgb(0, 86, 179);
  cursor: pointer;
}
.section-title {
  font-size: x-large;
  color: white;
  background-color: #001a57;
}

.closed {
  display: none;
}

.site-header .dropdown {
  border-color: #001a57;
  border-style: solid;
  border-width: 0.5pt;
}

.environment-warning {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 9999;
  color: #f00;
  pointer-events: none;
  font-size: xxx-large;
  font-weight: normal;
}

ul.pagination li {
  padding: 0px 5px;
}

.embed-responsive {
  position: unset;
}

.no-hover:hover {
  background-color: #e6e8ee;
}

.settings-table tr {
  cursor: pointer;
}

.sds-reject-link {
  color: red;
}

/*
This is Bootstrap's `sticky-top` class with the `top` property set to 85px
If we use the default 0px, then the region select bar _is_ sticky, but it's
only becomes sticky when the top edge of it reaches the top of the screen, at
which point it has already gone behind the navbar so it isn't visible.

By increasing the `top` property we can make the element become sticky before
it goes behind the nav bar. The navbar is 65px high, plus 8px of padding on
top and bottom, giving 74px.
*/
.region-select-bar {
  position: -webkit-sticky;
  position: sticky;
  top: 74px;
  z-index: 1000;
  background-color: #fafafa;
  /* Add some padding to the top so there's space between the nav bar and the
  contents of the region select bar */
  padding-top: 8px;
}
/* Make dropdown  */
.select2-container,
.select2-selection {
  min-height: 38px !important;
  font-size: 16px !important;
}
/* Make the multi-select selected options bigger */
.select2-selection--multiple > .select2-selection__rendered {
  line-height: 32px !important;
}
/* Remove the ugly default remove selected option button styling */
.select2-selection__choice__remove {
  background-color: white !important;
  border: none !important;
}
/* Reduce padding and left align lists for display in a tooltip */
ul.tooltip-list,
ol.tooltip-list {
  text-align: left;
  padding-left: 5px;
  margin-left: 5px;
}
.subtitle {
  font-size: 1.1rem;
  font-weight: 400;
  margin: 15px 0px 5px 0px;
}

/*
  Manual error message styling using alert-danger from bootstrap
  (no alert-error styling is provided by bootstrap,
  reference: https://stackoverflow.com/a/52565426/5104295)
*/
.alert-error {
  color: #721c24;
  background-color: #f8d7da;
  border-color: #f5c6cb;
}

/* Relevant/not relevant displays dropdown toggle */
.displayToggle {
  cursor: pointer;
  font-weight: bold;
  color: #001a57;
}

.smallText {
  font-size: small;
}

.groupLabel {
  font-weight: bold;
}

.displayList {
  list-style: none;
  padding-left: 5px;
}
.displayLabel {
  font-style: italic;
  font-size: smaller;
}

/* Div for hidden relevant/not relevant displays */
.hiddenDisplays {
  display: none;
}
.substance-disabled {
  pointer-events: none;
}
/* When an indexed substance is 'deleted', it is marked as disabled until re-enabled */
.substance-disabled .substance-title-text {
  text-decoration: line-through;
  opacity: 0.5;
  transition: all 0.25s ease-in-out;
}
.substance-enabled .substance-title-text {
  text-decoration: none;
  opacity: 1;
  transition: all 0.25s ease-in-out;
}
.enable-substance-button {
  display: none;
  position: absolute;
  right: 10px;
  bottom: 10px;
  width: 60px;
  height: 30px;
  line-height: 30px;
  border-radius: 5px;
  background-color: grey;
  border: none;
  color: white;
  text-align: center;
  pointer-events: all;
  opacity: 1;
}
.enable-substance-button:hover {
  cursor: pointer;
}
.disable-substance-button {
  position: absolute;
  right: 10px;
  bottom: 10px;
  background-color: transparent;
  border: none;
}
.disable-substance-button:hover {
  cursor: pointer;
}
.delete-button-icon {
  font-size: 1.425em;
}

/* Sweet alert styling */
.colored-toast .swal2-html-container {
  font-weight: bold !important;
}
.colored-toast .swal2-confirm {
  background-color: #00a29a !important;
}

.dropzone .dz-preview.dz-file-preview .dz-image.dz-warning {
  color: #856404;
  background: #fff3cd;
  border-color: #ffeeba;
}

td[colspan] {
  text-align: center;
}

a.locked::before {
  content: "\f023  ";
  font-family: "FontAwesome";
  opacity: 70%;
}

.fixed-top {
  /* Reduce z-index from 1030 to anything <1002 so that the Google Drive
  Picker appears on top of it in the onboarding file picker page */
  z-index: 1001;
}

tr[data-sds-obsolete=true] {
  display: none;
  color: #666666;
}

tr[data-sds-obsolete=true] a {
  opacity: .6;
}

.showing-obsolete-sds tr[data-sds-obsolete=true] {
  display: table-row;
}

.attach-sds-form input[type="file"] {
  max-width: 300px;
}

.attach-sds-form .sds-superseding {
  background: #ffc107;
  border-radius: 4px;
  margin-block-end: 1rem;
}

.sds-superseding-info {
  display: none;
}

.attach-sds-form .sds-superseding .sds-superseding-info {
  width: 100%;
  padding: 1em;
  font-size: small;
  display: block;
}

.attach-sds-form .sds-superseding .sds-superseding-info-title {
  font-size: medium;
}

.opacity-50 {
  opacity: 50%;
}

.select2-result-substance__meta div {
  display: inline-block;
  padding-left: 10px;
  padding-right: 10px;
}

button:disabled,button[disabled] {
  pointer-events: none;
}

/*
Make [readonly] select2s behave as readonly
https://stackoverflow.com/questions/41807096/select2-make-it-readonly-not-disabled-from-js
*/
select[readonly].select2-hidden-accessible + .select2-container {
  pointer-events: none;
  touch-action: none;

  .select2-selection {
      background: #eee;
      box-shadow: none;
  }

  .select2-selection__arrow, select[readonly].select2-hidden-accessible + .select2-container .select2-selection__clear {
      display: none;
  }
}

.select2-additional-info{
  color: #6c757d;
  line-height: 1.2;
}

.select2-container--bootstrap .select2-results__option--highlighted[aria-selected] .select2-additional-info{
  color: #fff;
}

.hive-substance-select-name-choice {
  padding: 12px;
  background: #f1f2f3;
  border-left: 6px solid #d8dce0;
  margin-bottom: 1rem;
}

.hive-substance-select-name-choice ul {
  margin-bottom: 0;
}