:root {
  --blue: #16149bff; /* color dels fons */
  --red: #d63441ff; /* color dels fons dels botons */
  --white: white; /* color dels text també als botons */
  --lred: rgb(141, 35, 43); /* color dels fons dels quan desactivats */
  --font: 'Rubik', sans-serif /* familia de font */
}

.bg-hp {
  background-color: var(--blue);
}

.bg-hp-red {
  background-color: var(--red);
}

body {
  color: white;
  background-color: var(--blue) !important;
  font-family: var(--font);
  font-size: 14px;
  text-align: center;
}

h1 {
  color: var(--red);
  font-family: var(--font);
}

.dropdown-item.active {
  color: var(--white) !important;
  text-decoration: none;
  background-color: var(--red);
}

.dropdown-item {
  color: whitesmoke;
}

.click {
  cursor: pointer;
}

.btn-buscar {
  background-color: var(--red);
  color: #010101 !important;
  border: none !important;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  width: 100%;
  height: auto !important;
  font-size: 14px !important;
  height: 40px !important;
  display: inline-block;
  text-align: center;
  line-height: 40px;
  cursor: pointer;
}

/* apartir d'aquí va a l'iframe */

div.post>div.active span {
  color: var(--white) !important;
  background-color: var(--red);
}

btn-success.disabled,
.btn-success:disabled {
  color: var(--white) !important;
  background-color: var(--lred);
  border-color: var(--lred);
}

.btn-success {
  color: var(--white) !important;
  background-color: var(--red);
  border-color: var(--red);
}

.btn-success:hover {
  color: var(--white) !important;
  background-color: var(--red);
  border-color: white;
}

.btn-primary {
  color: var(--white) !important;
  background-color: var(--red);
  border-color: var(--red);
}

btn-primary.disabled,
.btn-primary:disabled {
  color: var(--white) !important;
  background-color: var(--lred);
  border-color: var(--lred);
}

.btn-primary:hover {
  color: var(--white) !important;
  background-color: var(--red);
  border-color: white;
}

.btn-secondary {
  color: var(--white) !important;
  background-color: var(--red);
  border-color: var(--red);
}

btn-secondary.disabled,
.btn-secondary:disabled {
  color: var(--white) !important;
  background-color: var(--lred);
  border-color: var(--lred);
}

.btn-secondary:hover {
  color: var(--white) !important;
  background-color: var(--red);
  border-color: white;
}

.modal-content {
  color: var(--blue) !important;
  background-color: var(--white);
  border-color: var(--blue);
}

.card-body {
  color: var(--white) !important;
  background-color: var(--blue);
  border-color: var(--white);
}

.bg-secondary {
  color: var(--white) !important;
  background-color: var(--red)!important;
  border-radius: .25rem;
}