:root {
    --active-color: #5F3362;
    --warning-color: #c1272d;
    --running-color: #00b4e2;
    --error-color: #ffa42a;
    --complete-color: #1a3358;
    --enqueued-color: #85278f;
    --button-background: #c6d9e7;
    --button-background-primary: #84bbd4;
    --button-background-primary-hover: #007ba5;
    --button-background-hover: #84bbd4;
    --button-background-active: #0d407c;
    --button-background-warning: #c1272d;
    --button-background-warning-hover: #e22f0d;
    --button-background-warning-active: #992813;
    --button-text: #1a3358;
    --button-text-active: #FFFFFF;
    --button-text-warning: #FFFFFF;
    --checkbox-background: #FFFFFF;
    --checkbox-background-checked: #1a3358;
    --checkbox-border: #1a3358;
    --checkbox-checkmark: #FFFFFF;
    --radiobutton-background: #FFFFFF;
    --radiobutton-background-selected: #1a3358;
    --radiobutton-border: #1a3358;
    --radiobutton-selected: #1a3358;
    --link-text: #0d407c;
    --link-text-hover: #007ba5;
    --title-color: #1a3358;
    --text-color: #1a3358;
    --icon-color: #0d407c;
    --border-color: #e1e9ee;
    --blue-1: #eaf2f7;
    --blue-2: #e1e9ee;
    --blue-3: #c6d9e7;
    --blue-4: #84bbd4;
    --blue-5: #007ba5;
    --blue-6: #0d407c;
    --blue-7: #1a3358;
    --lavender: #e4cfe6;
    --magenta: #a10068;
    --purple: #85278f;
    --dark-purple: #531b5e;
    --pop-up-background: #FFFFFF;
    --feedback-neutral: #84bbd4;
    --feedback-success: #008257;
    --feedback-warning: #ffa42a;
    --feedback-error: #c1272d;
    --feedback-errors: #c1272d;
}

/* NEW STYLE FOR COMPONENTS */
/* THESE STYLES SHOULD BE USED FOR ALL COMPONENTS IN THE PORTAL */
/* PLEASE BE CAREFUL IF YOU DELETE OLD CSS!!! */

/* BUTTON */

button:where(:not(.aifButton)),
.button {
  --button-height: 30px; /* The height of the button, given that the label doesn't wrap */
  --font-size: 12px;
  --line-height: 14px;
  color: var(--button-text);
  background: var(--button-background);
  border: none;
  outline: none;
  text-transform: uppercase;
  margin-right: 10px;
  font-weight: 500;
  /* Make the button match the desired height, but also look nice even if the text wraps */
  font-size: var(--font-size);
  line-height: var(--line-height);
  padding: calc((var(--button-height) - var(--line-height)) / 2) 8px;
  cursor: pointer;
}

.button a {
  color: var(--button-text);
  background: var(--button-background);
  font-size: 12px;
  font-weight: 500;
}

.button a:hover {
  color: var(--button-text);
}

button:where(:not(.aifButton)):hover,
.button:hover {
  background: var(--button-background-hover);
}

.button:hover a {
  background: var(--button-background-hover);
}

button:where(:not(.aifButton)):active,
.button:active {
  color: var(--button-text-active);
  background: var(--button-background-active);
}

.button:active a {
  color: var(--button-text-active);
  background: var(--button-background-active);
}

.button a:active {
  color: var(--button-text-active);
  background: var(--button-background-active);
}

button:where(:not(.aifButton)):disabled,
.button:disabled,
.button.disabled {
  opacity: 0.66;
  cursor: not-allowed;
}

button:where(:not(.aifButton)) .fa,
.button .fa {
  line-height: var(--line-height); /* Font Awesome doesn't respect line height by default */
  margin-right: 5px;
  margin-left: 5px;
  font-size: 15px;
}

button.btn,
.button.btn {
  height: initial;
  text-transform: initial;
}

button.primary,
.button.primary {
  background: var(--button-background-primary);
}

button.primary:hover,
.button.primary:hover {
  background: var(--button-background-primary-hover);
  color: white;
}

button.warning,
.button.warning {
  background: var(--button-background-warning);
  color: var(--button-text-warning);
}

button.warning:hover,
.button.warning:hover {
  background: var(--button-background-warning-hover);
  color: var(--button-text-warning);
}

button.warning:active,
.button.warning:active {
  background: var(--button-background-warning-active);
  color: var(--button-text-warning);
}

input.button {
  height: unset;
}

/* CHECKBOX */
/* Usage:
    <label class="checkboxContainer"> Label Text
        <input type="checkbox" />
        <span class="checkmark"></span>
    </label>
*/

.checkboxContainer {
  position: relative;
  cursor: pointer;
  padding-left: 19px;
  overflow: visible;
  padding-top: 3px !important;
  font-weight: 300;
  font-size: 14px;
}

.checkboxContainer input {
  position: absolute;
  opacity: 0 !important;
  cursor: pointer;
  width: 10px;
  height: 10px;
  margin: 0 5px 0 0;
}

.checkboxContainer input:checked ~ .checkmark,
.checkboxContainer .reactCheckmark.checked {
  background-color: var(--checkbox-background-checked);
}

.checkboxContainer input:disabled ~ .checkmark,
.checkboxContainer input:disabled ~ .reactCheckmark {
  cursor: not-allowed;
  opacity: 0.66;
}

.checkboxContainer input:checked ~ .checkmark:after,
.checkboxContainer .reactCheckmark.checked:after {
  display: block;
}

.checkboxContainer .checkmark:after,
.checkboxContainer .reactCheckmark:after {
  left: 4px;
  top: 1px;
  width: 5px;
  height: 8px;
  border: solid var(--checkbox-checkmark);
  border-width: 0 2px 2px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
  content: '';
  position: absolute;
  display: none;
}

.checkmark,
.reactCheckmark {
  position: absolute;
  top: 3px;
  left: 0;
  height: 15px;
  width: 15px;
  border: 1px solid #1a3358;
  border-radius: 2pt;
  cursor: pointer;
  margin: 0 !important;
}

/* RADIO BUTTON */
/*  Usage:
    <label class="radioButtonContainer">Label Text
        <input type="radio">
        <span class="customRadioButton"></span>
    </label>
*/

.radioButtonContainer {
  position: relative;
  padding-left: 21px;
  margin-bottom: 12px;
  margin-right: 5px;
  cursor: pointer;
  font-size: 13px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  overflow: visible;
  font-weight: 300;
}

.radioButtonContainer.disabled,
.radioButtonContainer:disabled {
  cursor: not-allowed;
  opacity: 0.66;
}

.radioButtonContainer input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}

.radioButtonContainer input:checked ~ .customRadioButton:after {
  display: block;
}

.radioButtonContainer input:disabled ~ .customRadioButton {
  cursor: not-allowed;
  opacity: 0.66;
}

.radioButtonContainer .customRadioButton:after {
  top: 2px;
  left: 2px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--radiobutton-background-selected);
}

.customRadioButton {
  background-color: var(--radiobutton-background);
  position: absolute;
  top: 2px;
  left: 0px;
  height: 15px;
  width: 15px;
  border: 1px solid var(--radiobutton-border);
  border-radius: 50%;
}

.customRadioButton:after {
  content: '';
  position: absolute;
  display: none;
}

input:where(:not(.aifInput)) {
  height: 26px;
  border-radius: 1pt;
  border: 1px solid var(--blue-7);
}
.trainingAdmin input[type='checkbox'] {
  height: auto;
}

input:focus.ng-invalid {
  box-shadow: 0 0 2px #ff1743;
  border-color: #ff1743;
  outline: none;
}

input:focus,
textarea:focus {
  box-shadow: 0 0 2px var(--blue-7);
  border-color: var(--blue-7);
  outline: none;
}

input[type='range']:focus {
  box-shadow: none;
}

input[type='text']:focus {
  box-shadow: none;
}

#inviteUsers-Dialog-input {
  border: 0;
}