:root {
  /* The Main Palette
  --darkblue: #294172;
  --blue:     #3c6eb4;
  --newblue:  #51a2da;
  --green:    #79db32;
  --magenta:  #db3279;
  --orange:   #e59728;
  --purple:   #a07cbc;
  */

  /* Color-blind safe palette */
  --darkblue: #294172;
  --blue: #3c6eb4;
  --newblue: #51a2da;
  --green: #38bc3b;
  --lightgreen: #afea85;
  --magenta: #db3279;
  --orange: #eb7434;
  --purple: #603e79;
  --lightpurple: #cfbddd; /* This one is from the main palette */

  --white: #f8f9fa; /* This one isn't in any Fedora scheme */
  --gray-0: #eff0f1;
  --gray-1: #dfe0e3;
  --gray-2: #dedede;
  --gray-3: #c5c7cc;
  --gray-4: #8c8c8c;
  --gray-5: #9a9fa6;
  --gray-6: #79818b;
  --gray-7: #535961;
  --gray-8: #4c4c4c;
  --gray-9: #1d252e;

  --bs-primary-rgb: 81,162,218;
  /* --bs-warning-rgb: 235,116,52; */
  --bs-danger-rgb: 219,50,121;

}

body {
  background-color: var(--gray-0);
}

#menu {
  background-color: var(--newblue);
  padding-top: 0px;
  padding-bottom: 0px;
}

#menu > .container {
  max-width: 1700px;
}

#menu #logo {
  height: 50px;
  filter: invert(100%) sepia(96%) saturate(15%) hue-rotate(212deg)
    brightness(104%) contrast(104%);
}

.card-img-top {
  width: 60px;
  float: left;
}

#content {
  max-width: 1000px;
}

#content-wide {
  margin-top: 30px;
  max-width: 1700px;
}

h1 {
  color: var(--darkblue);
}

h2 {
  color: var(--green);
}

.lead {
  color: var(--gray-8) !important;
}

#app-homepage .card {
  border-color: var(--gray-3);
}

.card-header {
  background-color: var(--gray-0);
}

.nav-link {
  font-weight: 500;
  --bs-nav-link-color: var(--newblue);
  --bs-nav-link-hover-color: var(--newblue);
  --bs-nav-tabs-link-active-bg: var(--white);
  --bs-nav-tabs-link-active-border-color: var(--gray-3);
}

#app-homepage a.nav-link:hover {
  border-bottom-color: var(--gray-3) !important;
  border-left-color: var(--gray-0) !important;
  border-top-color: var(--gray-0) !important;
  border-right-color: var(--gray-0) !important;
}

#app-homepage a.active:hover {
  border-bottom-color: white !important;
  border-left-color: var(--gray-3) !important;
  border-top-color: var(--gray-3) !important;
  border-right-color: var(--gray-3) !important;
}

.btn-outline-primary {
  font-weight: 500;
  --bs-btn-color: var(--newblue);
  --bs-btn-border-color: var(--newblue);
  --bs-btn-hover-bg: var(--newblue);
  --bs-btn-hover-border-color: var(--newblue);
  --bs-btn-active-bg: var(--newblue);
  --bs-btn-active-border-color: var(--newblue);
}

.btn-secondary {
  font-weight: 500;
  --bs-btn-bg: var(--gray-4);
  --bs-btn-border-color: var(--gray-4);
  --bs-btn-hover-bg: var(--gray-4);
  --bs-btn-hover-border-color: var(--gray-4);
  --bs-btn-active-bg: var(--gray-4);
  --bs-btn-active-border-color: var(--gray-4);
}

.btn-outline-danger {
  font-weight: 500;
  --bs-btn-color: var(--magenta);
  --bs-btn-border-color: var(--magenta);
  --bs-btn-hover-bg: var(--magenta);
  --bs-btn-hover-border-color: var(--magenta);
  --bs-btn-active-bg: var(--magenta);
  --bs-btn-active-border-color: var(--magenta);
}

#app-homepage .card-title {
  margin-top: 15px;
  margin-bottom: 15px;
  color: var(--green);
}

#app-homepage .card-body {
  min-height: 250px;
}

#app-homepage input.validation-error {
  border-color: var(--magenta);
}

#app-homepage .input-group {
  max-width: 600px;
}

a,
a:hover {
  font-weight: 500;
  color: var(--newblue);
}

#log {
  background-color: var(--white);
  border: 1px solid var(--gray-2);
  padding: 20px;
  height: 84vh;
}

.btn-primary {
  border-color: var(--newblue);
  background-color: var(--newblue);
  --bs-btn-hover-bg: var(--newblue);
  --bs-btn-hover-border-color: var(--newblue);
  --bs-btn-active-bg: var(--newblue);
  --bs-btn-active-border-color: var(--newblue);
  --bs-btn-disabled-bg: var(--gray-6);
  --bs-btn-disabled-border-color: var(--gray-4);
}


#about {
  margin-top: 80px;
  margin-bottom: 100px;
}

#about .card {
  background-color: var(--gray-0);
  border: none;
  color: var(--gray-8);
}

#about h5 {
  color: var(--darkblue);
}

#error {
  --color: var(--magenta);
}

#loading {
  --color: var(--newblue);
}

#succeeded {
  --color: var(--green);
}

#error,
#loading,
#succeeded {
  margin-top: 100px;
  background-color: white;
  max-width: 720px;
  border: 1px solid var(--color);
  min-height: 340px;
}

#error i {
  color: var(--color);
  margin-top: 20px;
  font-size: 80px;
}

#loading .spinner-border {
  color: var(--color);
  --bs-spinner-width: 80px;
  --bs-spinner-height: 80px;
}

#progressbar {
  width: 100%;
  background-color: var(--gray-0);
}

#progress {
  height: 30px;
  background-color: var(--newblue);
  text-align: center;
  line-height: 30px;
  font-weight: 500;
  color: var(--darkblue);
  overflow-wrap: normal;
}

#progressbar-number {
  position: absolute;
  margin-left: auto;
  margin-right: auto;
  margin-top: 0px;
  left: 0;
  right: 0;
  text-align: center;
}

button.btn-vote:hover {
  /* Remove hover for vote buttons to easily distinguish clicked and */
  /* unclicked buttons  */
  background-color: var(--bs-btn-bg) !important;
  color: var(--bs-btn-color) !important;
}

#dataset-banner {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}