:root {
  /* primary color and shades */
  --purple-main: #240f6e;
  --purple-shade1: #503f8b;
  --purple-shade2: #7c6ca7;
  --purple-shade3: #a79fc5;
  /* secondary colors */
  --blue: #005de8;
  --green: #287d21;
  --chartreuse: #c0df16;
  --yellow: #ffc82e;
  --red: #d6083b;
  --pink: #de1b90;
  /* dark secondary colors */
  --dark-blue: #082ecf;
  --dark-green: #00491e;
  --dark-chartreuse: #8fad15;
  --dark-yellow: #cf7f00;
  --dark-red: #9e1539;
  --dark-pink: #ab0c78;
  /* light secondary colors */
  --light-blue: #c8e1fc;
  --light-green: #c8e1c8;
  --light-chartreuse: #d9ea9a;
  --light-yellow: #f8e59a;
  --light-red: #f5cabf;
  --light-pink: #f8bed6;
  /* neutral colors -- not in use */
  --black: #000000;
  --dark-grey: #212121;
  --medium-grey: #4a4a4a;
  --grey: #a0a0a0;
  --light-grey: #d9d9d9;
  --lighter-grey: #efefef;
  --white: #ffffff;
}

.merriweather-light {
  font-family: "Merriweather", serif;
  font-weight: 300;
  font-style: normal;
}

.merriweather-regular {
  font-family: "Merriweather", serif;
  font-weight: 400;
  font-style: normal;
}

.merriweather-bold {
  font-family: "Merriweather", serif;
  font-weight: 700;
  font-style: normal;
}

.merriweather-black {
  font-family: "Merriweather", serif;
  font-weight: 900;
  font-style: normal;
}

.merriweather-light-italic {
  font-family: "Merriweather", serif;
  font-weight: 300;
  font-style: italic;
}

.merriweather-regular-italic {
  font-family: "Merriweather", serif;
  font-weight: 400;
  font-style: italic;
}

.merriweather-bold-italic {
  font-family: "Merriweather", serif;
  font-weight: 700;
  font-style: italic;
}

.merriweather-black-italic {
  font-family: "Merriweather", serif;
  font-weight: 900;
  font-style: italic;
}

.open-sans-regular {
  font-family: "Open Sans", sans-serif;
  font-optical-sizing: auto;
  /* Use a value from 300 to 800 */
  font-weight: 400;
  font-style: normal;
  font-variation-settings: "wdth" 100;
}

h1,
h2,
h3,
h4 {
  font-family: "Merriweather", serif;
  font-weight: 700;
  color: #240f6e;
}

h1 {
  font-style: italic;
}

textarea {
  height: 75px;
  padding: 12px 20px;
  box-sizing: border-box;
  font-size: 16px;
  resize: none;
}

input[type="date"] {
  border: 0px solid darkgrey;
  font-family: monospace;
  font-size: smaller;
  border-radius: 4px;
  height: 36px;
  width: 110px;
  background-color: rgb(248, 249, 250);
}

/* applied to grid cards so they fill their spot */
.task-card {
  height: 100%;
}

/* leave navbar transparent and add bg color */
.navbar {
  background-color: #240f6e;
}

/* make the my_trainees buttons dynamic */

.badge a {
  color: var(--white);
  text-decoration: none;
  font-size: 10px;
}

.badge a:hover {
  color: var(--light-blue);
}

.badge a:active {
  color: var(--light-blue);
  font-size: 11px;
}

.bg-danger:hover {
  color: var(--light-red);
  cursor: pointer;
}

.bg-warning:hover {
  color: var(--light-yellow);
  cursor: pointer;
}

.bg-primary:hover {
  color: var(--light-blue);
  cursor: pointer;
}

.bg-secondary:hover {
  color: var(--light-grey);
  cursor: pointer;
}

.bg-success:hover {
  color: var(--light-green);
  cursor: pointer;
}

.bg-danger:active,
.bg-warning:active,
.bg-primary:active,
.bg-success:active {
  font-size: 11px;
}

/* for sorting tables */
th {
  cursor: pointer;
}

th:hover {
  color: var(--medium-grey);
  text-decoration: underline;
}

/* all buttons pretty much */
.btn {
  background-color: #a79fc5;
}

.back-to-top {
  background-color: var(--pink);
}

.btn:hover {
  background-color: #7c6ca7;
}

.tjg-toggle {
  margin: 20px;
}

.form-check-input:checked {
  background-color: var(--purple-main);
  border-color: var(--purple-main);
}

#ngn-toggle:not(:checked),
#tj21-toggle:not(:checked) {
  --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e");
  background-color: var(--purple-main);
  border-color: var(--purple-main);
}

/* little helper texts */
.grey-label {
  color: #a0a0a0;
  font-size: small;
}

.grey-label a {
  color: #a0a0a0;
}

/* training progress section */
.moodle-link-bubbles {
  text-align: center;
  border-radius: 8px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  span {
    color: #ffffff;
    text-decoration: none;
  }
}

.moodle-link-bubbles:active {
  opacity: 33%;
  transition: opacity 0.5s;
}

.kb-bubble {
  background-color: #8fad15;
}

.kb-bubble:hover {
  background-color: #60740e;
  transition: background-color 0.5s;
}

.ps-bubble {
  background-color: #cf7f00;
}

.ps-bubble:hover {
  background-color: #925a01;
  transition: background-color 0.5s;
}

.ip-bubble {
  background-color: #005de8;
}

.ip-bubble:hover {
  background-color: var(--dark-blue);
  transition: background-color 0.5s;
}

.tu-bubble {
  background-color: #de1b90;
}

.tu-bubble:hover {
  background-color: var(--dark-pink);
  transition: background-color 0.5s;
}

.lol-bubble {
  background-color: #287d21;
}

.lol-bubble:hover {
  background-color: var(--dark-green);
  transition: background-color 0.5s;
}

.inst-bubble {
  background-color: #9e1539;
}

.inst-bubble:hover {
  background-color: #6c0f28;
  transition: background-color 0.5s;
}

/* editable dropdowns */

.profile-dropdown,
.edit-field {
  width: 100%;
  border: 0px;
  background-color: transparent;
}

#no-plan {
  color: var(--red);
  font-weight: 800;
}

.no-plan {
  color: var(--grey);
  font-style: italic;
  font-size: smaller;
}

.reset-filters {
  cursor: pointer;
}