:root,
.light,
.light-theme {
  --base-button-solid-active-filter: brightness(0.92) saturate(1.1);

  /* Primary */
  --green-1: #f9fcfa;
  --green-2: #f3faf4;
  --green-3: #e6f4e9;
  --green-4: #d9eddc;
  --green-5: #cce6d0;
  --green-6: #bfdcc4;
  --green-7: #aacfb3;
  --green-8: #95c2a3;
  --green-9: #6da686;
  --green-10: #4e9170;
  --green-11: #3b7a5d;
  --green-12: #294f3e;

  --green-a1: #00ff0005;
  --green-a2: #00ff0012;
  --green-a3: #00ff0020;
  --green-a4: #00ff0030;
  --green-a5: #00ff003f;
  --green-a6: #00ff0050;
  --green-a7: #00e00066;
  --green-a8: #00cc007d;
  --green-a9: #00b300ba;
  --green-a10: #009900ce;
  --green-a11: #007f00b3;
  --green-a12: #004d007d;

  --green-contrast: #3b7a5d;
  --green-surface: #f4f8f5cc;
  --green-indicator: #6da686;
  --green-track: #aacfb3;

  /* Primary Old */
  --red-1: #fffcfc;
  --red-2: #fff7f6;
  --red-3: #ffebe9;
  --red-4: #ffdbd6;
  --red-5: #ffcdc6;
  --red-6: #ffbdb5;
  --red-7: #f7a9a0;
  --red-8: #ee8e85;
  --red-9: #dd3636;
  --red-10: #ce2027;
  --red-11: #d1282b;
  --red-12: #651817;

  --red-a1: #ff000003;
  --red-a2: #ff1d0009;
  --red-a3: #ff180016;
  --red-a4: #ff200029;
  --red-a5: #ff200039;
  --red-a6: #ff1c014a;
  --red-a7: #ea19005f;
  --red-a8: #dc13017a;
  --red-a9: #d40000c9;
  --red-a10: #c70008df;
  --red-a11: #c90004d7;
  --red-a12: #560100e8;

  --red-contrast: #fff;
  --red-surface: #fff5f4cc;
  --red-indicator: #dd3636;
  --red-track: #dd3636;

  /* Secondary */
  --blue-1: #fafdff;
  --blue-2: #f4fafe;
  --blue-3: #e3f4ff;
  --blue-4: #d2edff;
  --blue-5: #c0e4fe;
  --blue-6: #abd7f8;
  --blue-7: #90c7ef;
  --blue-8: #62b0e6;
  --blue-9: #369ddd;
  --blue-10: #3191cc;
  --blue-11: #0077b5;
  --blue-12: #153950;

  --blue-a1: #0099ff05;
  --blue-a2: #008ce80b;
  --blue-a3: #009bff1c;
  --blue-a4: #0099ff2d;
  --blue-a5: #0092fb3f;
  --blue-a6: #0086ea54;
  --blue-a7: #007fdb6f;
  --blue-a8: #007fd79d;
  --blue-a9: #0083d4c9;
  --blue-a10: #0077c0ce;
  --blue-a11: #0077b5;
  --blue-a12: #002740ea;

  --blue-contrast: #fff;
  --blue-surface: #f1f9fecc;
  --blue-indicator: #369ddd;
  --blue-track: #369ddd;

  /* Yellow */
  --yellow-1: #fdfdf9;
  --yellow-2: #fcfdea;
  --yellow-3: #f8fdba;
  --yellow-4: #f2f799;
  --yellow-5: #eaef7a;
  --yellow-6: #dce072;
  --yellow-7: #ccd170;
  --yellow-8: #b7bb47;
  --yellow-9: #eef200;
  --yellow-10: #e3e732;
  --yellow-11: #7d7f00;
  --yellow-12: #3d3f22;

  --yellow-a1: #aaaa0006;
  --yellow-a2: #dbe70015;
  --yellow-a3: #e6f80045;
  --yellow-a4: #dfeb0066;
  --yellow-a5: #d7e10085;
  --yellow-a6: #c0c7008d;
  --yellow-a7: #a4ad008f;
  --yellow-a8: #9ba100b8;
  --yellow-a9: #eef200;
  --yellow-a10: #dce100cd;
  --yellow-a11: #7d7f00;
  --yellow-a12: #1f2200dd;

  --yellow-contrast: #22230b;
  --yellow-surface: #fbfde5cc;
  --yellow-indicator: #eef200;
  --yellow-track: #eef200;

  /* Purple */
  --purple-1: #fffcff;
  --purple-2: #fdf7ff;
  --purple-3: #fbeaff;
  --purple-4: #f7dcff;
  --purple-5: #f2ceff;
  --purple-6: #eabdff;
  --purple-7: #e0a7f9;
  --purple-8: #d388f2;
  --purple-9: #cf4dff;
  --purple-10: #c23ef1;
  --purple-11: #9b1bc4;
  --purple-12: #570072;

  --purple-a1: #ff00ff03;
  --purple-a2: #c000ff08;
  --purple-a3: #cf00ff15;
  --purple-a4: #c500ff23;
  --purple-a5: #bc00ff31;
  --purple-a6: #ae00ff42;
  --purple-a7: #a600ee58;
  --purple-a8: #a100e477;
  --purple-a9: #ba00ffb2;
  --purple-a10: #af00edc1;
  --purple-a11: #8f00bde4;
  --purple-a12: #570072;

  --purple-contrast: #fff;
  --purple-surface: #fdf5ffcc;
  --purple-indicator: #cf4dff;
  --purple-track: #cf4dff;

  --gray-1: #fcfcfd;
  --gray-2: #f9f9fb;
  --gray-3: #eff0f3;
  --gray-4: #e7e8ec;
  --gray-5: #e0e1e6;
  --gray-6: #d8d9e0;
  --gray-7: #cdced7;
  --gray-8: #b9bbc6;
  --gray-9: #8b8d98;
  --gray-10: #80828d;
  --gray-11: #62636c;
  --gray-12: #1e1f24;

  --gray-a1: #00005503;
  --gray-a2: #00005506;
  --gray-a3: #00104010;
  --gray-a4: #000b3618;
  --gray-a5: #0009321f;
  --gray-a6: #00073527;
  --gray-a7: #00063332;
  --gray-a8: #00083046;
  --gray-a9: #00051d74;
  --gray-a10: #00051b7f;
  --gray-a11: #0002119d;
  --gray-a12: #000107e1;

  --gray-contrast: #ffffff;
  --gray-surface: #ffffffcc;
  --gray-indicator: #8b8d98;
  --gray-track: #8b8d98;
}

/* -------------- Primary ------------------- */

.text-primary {
  color: var(--green-11) !important;
}

/* Btn */
.btn-primary {
  background-color: var(--green-11);
  border-color: var(--green-contrast);
}

.btn-primary.disabled,
.btn-primary:disabled,
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:not(:disabled):not(.disabled):active {
  background-color: var(--green-10);
  filter: var(--base-button-solid-active-filter);
  border: 1px solid var(--green-contrast);
}

.btn-custom-red {
  background-color: var(--green-11);
  color: white;
}

.btn-custom-red.active,
.btn-custom-red:active,
.btn-custom-red:hover {
  /* background-color: rgb(165, 0, 0); */
  /* background-color: var(--green-a10); */
  background-color: var(--red-a10);
  color: white;
}

.btn-primary-link {
  color: var(--green-11);
}

.bg-primary-soft {
  background-color: var(--green-a3) !important;
  color: var(--green-11) !important;
}

.bg-warning-soft {
  background-color: var(--yellow-a3) !important;
  color: var(--yellow-11) !important;
}

.bg-blue-soft {
  background-color: var(--blue-a3) !important;
  color: var(--blue-11) !important;
}

.bg-purple-soft {
  background-color: var(--purple-a3) !important;
  color: var(--purple-11) !important;
}

.badge-primary-sucface {
  background-color: var(--green-surface);
  box-shadow: inset 0 0 0 1px var(--green-a7);
  color: var(--green-a11);
}

.badge-secondary-sucface {
  background-color: var(--blue-surface);
  box-shadow: inset 0 0 0 1px var(--blue-a7);
  color: var(--blue-a11);
}

.badge-info-sucface {
  background-color: var(--blue-surface);
  box-shadow: inset 0 0 0 1px #bee5eb;
  color: #0d8da3;
}

.badge-gray-sucface {
  background-color: var(--gray-surface);
  box-shadow: inset 0 0 0 1px var(--gray-a7);
  color: var(--gray-a11);
}

.badge-warning-sucface {
  background-color: var(--yellow-surface);
  box-shadow: inset 0 0 0 1px var(--yellow-a7);
  color: var(--yellow-a11);
}

.badge-purple-sucface {
  background-color: var(--purple-surface);
  box-shadow: inset 0 0 0 1px var(--purple-a7);
  color: var(--purple-a11);
}

.badge-blue-sucface {
  background-color: var(--blue-surface);
  box-shadow: inset 0 0 0 1px var(--blue-a7);
  color: var(--blue-a11);
}

/* Form control */
.form-control:focus {
  color: #495057;
  background-color: #fff;
  border-color: var(--green-contrast) !important;
  outline: 0;
  box-shadow: inset 0 0 0 1px var(--green-a7);
}

/* Select 2 */
.select2-container--bootstrap4
  .select2-selection--single
  .select2-selection__placeholder {
  color: #939ba3 !important;
}

/* .select2-container--bootstrap4 .select2-selection--single {
    height: calc(1.8125rem + 2px) !important;
    padding: 0;
    font-size: 0.875rem;
    line-height: 1.5;
    border-radius: 0.2rem;
} */

.select2-container--bootstrap4.select2-container--focus .select2-selection {
  border-color: var(--green-contrast) !important;
  -webkit-box-shadow: inset 0 0 0 1px var(--green-a7) !important;
  box-shadow: inset 0 0 0 1px var(--green-a7) !important;
}

.select2-container--bootstrap4 .select2-results__option--highlighted,
.select2-container--bootstrap4
  .select2-results__option--highlighted.select2-results__option[aria-selected="true"] {
  color: #fff;
  background-color: var(--green-10);
}

/* -------------- Secondary -------------- */
.bg-secondary-soft {
  background-color: var(--gray-a3) !important;
  color: var(--gray-a11) !important;
}

.text-responsive {
  font-size: 0.8rem;
}

.text-h2-responsive {
  font-size: 1.4em;
}

.text-h4-responsive {
  font-size: 1.2em;
}

@media (min-width: 768px) and (max-width: 991.98px) {
  .text-responsive {
    font-size: 0.9rem;
  }

  .text-h2-responsive {
    font-size: 1.4em;
  }

  .text-h4-responsive {
    font-size: 1.2em;
  }

  #toggle-column-candidate {
    display: none;
  }
}

@media (min-width: 992px) and (max-width: 1199.98px) {
  .text-responsive {
    font-size: 0.97em;
  }

  .text-h2-responsive {
    font-size: 2em;
  }

  .text-h4-responsive {
    font-size: 1.5em;
  }
}

@media (min-width: 1200px) {
  .text-responsive {
    font-size: 0.97em;
  }

  .text-h2-responsive {
    font-size: 2em;
  }

  .text-h4-responsive {
    font-size: 1.5em;
  }
}