:root {
  --aoclife-blue:#7FA8B6;
  --aoclife-red:#CD5B3F;
  --aoclife-sand:#BEBEA3;
  --aoclife-yellow:#EBBC36;
  --aoclife-green:#7EC28B;
  --aoclife-grey:#BFBDBE;

  --aoclife-blue-o-20:#7FA8B633;
  --aoclife-red-o-20:#CD5B3F33;
  --aoclife-sand-o-20:#BEBEA333;
  --aoclife-yellow-o-20:#EBBC3633;
  --aoclife-green-o-20:#7EC28B33;
  --aoclife-grey-o-20:#BFBDBE33;

  --aoclife-blue-o-35:#7FA8B659;
  --aoclife-red-o-35:#CD5B3F59;
  --aoclife-sand-o-35:#BEBEA359;
  --aoclife-yellow-o-35:#EBBC3659;
  --aoclife-green-o-35:#7EC28B59;
  --aoclife-grey-o-35:#BFBDBE59;

  --aoclife-blue-o-50:#7FA8B680;
  --aoclife-red-o-50:#CD5B3F80;
  --aoclife-sand-o-50:#BEBEA380;
  --aoclife-yellow-o-50:#EBBC3680;
  --aoclife-green-o-50:#7EC28B80;
  --aoclife-grey-o-50:#BFBDBE80;

  --aoclife-blue-o-65:#7FA8B6A6;
  --aoclife-red-o-65:#CD5B3FA6;
  --aoclife-sand-o-65:#BEBEA3A6;
  --aoclife-yellow-o-65:#EBBC36A6;
  --aoclife-green-o-65:#7EC28BA6;
  --aoclife-grey-o-65:#BFBDBEA6;

  --aoclife-blue-o-85:#7FA8B6D9;
  --aoclife-red-o-85:#CD5B3FD9;
  --aoclife-sand-o-85:#BEBEA3D9;
  --aoclife-yellow-o-85:#EBBC36D9;
  --aoclife-green-o-85:#7EC28BD9;
  --aoclife-grey-o-85:#BFBDBED9;
}

/* All color properties for aoclife-blue */
/* ------------ LEGACY COLORS BELOW -------------- */
.bg-aoc-blue {
  background-color:#6395D3!important;
}

.bg-aoc-blue-o-light {
  background-color:rgba(99,149,211, 0.3);
}

/* f6f6fa */

.bg-aoc-lightgrey{
  background-color:#C9C9C9!important;
}

.bg-aoc-grey {
  background-color:#4A525A!important;
}

.text-aoc-blue {
  color:#6395D3!important;
}

.text-aoc-lightgrey {
  color:#C9C9C9;
}

.text-aoc-grey {
  color:#4A525A!important;
}

/* ------------END LEGACY COLORS ------------- */

/* Background color classes below */

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

.bg-al-sand {
  background-color: var(--aoclife-sand);
}

.bg-al-green {
  background-color: var(--aoclife-green);
}

.bg-al-yellow {
  background-color:var(--aoclife-yellow);
}

.bg-al-grey {
  background-color:var(--aoclife-grey);
}

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

.bg-al-red-o-50 {
  background-color:var(--aoclife-red-o-50);
}

.bg-al-sand-o-50 {
  background-color: var(--aoclife-sand-o-50);
}

.bg-al-green-o-50 {
  background-color: var(--aoclife-green-o-50);
}

.bg-al-yellow-o-50 {
  background-color:var(--aoclife-yellow-o-50);
}

.bg-al-grey-o-50 {
  background-color:var(--aoclife-grey-o-50);
}

.bg-al-blue-o-50 {
  background-color:var(--aoclife-blue-o-50);
}

.bg-al-red-o-35 {
  background-color:var(--aoclife-red-o-35);
}

.bg-al-sand-o-35 {
  background-color: var(--aoclife-sand-o-35);
}

.bg-al-green-o-35 {
  background-color: var(--aoclife-green-o-35);
}

.bg-al-yellow-o-35 {
  background-color:var(--aoclife-yellow-o-35);
}

.bg-al-grey-o-35 {
  background-color:var(--aoclife-grey-o-35);
}

.bg-al-blue-o-35{
  background-color:var(--aoclife-blue-o-35);
}

.bg-al-red-o-85 {
  background-color:var(--aoclife-red-o-85);
}

.bg-al-sand-o-85 {
  background-color: var(--aoclife-sand-o-85);
}

.bg-al-green-o-85 {
  background-color: var(--aoclife-green-o-85);
}

.bg-al-yellow-o-85 {
  background-color:var(--aoclife-yellow-o-85);
}

.bg-al-grey-o-85 {
  background-color:var(--aoclife-grey-o-85);
}

.bg-al-blue-o-85{
  background-color:var(--aoclife-blue-o-85);
}

.bg-al-red-o-65 {
  background-color:var(--aoclife-red-o-65);
}

.bg-al-sand-o-65 {
  background-color: var(--aoclife-sand-o-65);
}

.bg-al-green-o-65 {
  background-color: var(--aoclife-green-o-65);
}

.bg-al-yellow-o-65 {
  background-color:var(--aoclife-yellow-o-65);
}

.bg-al-grey-o-65 {
  background-color:var(--aoclife-grey-o-65);
}

.bg-al-blue-o-65{
  background-color:var(--aoclife-blue-o-65);
}


/* End background color classes */

/* Text color classes below */

.text-al-red {
  color:var(--aoclife-red)!important;
}

.text-al-blue {
  color:var(--aoclife-blue)!important;
}

.text-al-grey {
  color:var(--aoclife-grey)!important;
}

.text-al-yellow {
  color:var(--aoclife-yellow)!important;
}

.text-al-green {
  color: var(--aoclife-green)!important;
}

.text-al-sand {
  color: var(--aoclife-sand)!important;
}

/* End text color classes */

/* Border color classes below */

.border-al-yellow {
  border: var(--aoclife-yellow) solid 1px;
}

.border-al-grey {
  border: var(--aoclife-grey) solid 1px;
}

.border-al-blue {
  border: var(--aoclife-blue) solid 1px;
}

.border-al-red {
  border: var(--aoclife-red) solid 1px;
}

.border-al-green {
  border: var(--aoclife-green) solid 1px;
}

.border-al-sand {
  border: var(--aoclife-sand) solid 1px;
}

/* End border color classes */

/* Overlay classes below */

.overlay-blue, .overlay-al-blue {
  background-color: var(--aoclife-blue-o-65);
}

.overlay-yellow, .overlay-al-yellow {
  background-color: var(--aoclife-yellow-o-65);
}

.overlay-red, .overlay-al-red {
  background-color: var(--aoclife-red-o-65);
}

.overlay-grey, .overlay-al-grey {
  background-color: var(--aoclife-grey-o-65);
}

.overlay-green, .overlay-al-green {
  background-color: var(--aoclife-green-o-65);
}

.overlay-sand, .overlay-al-sand {
  background-color: var(--aoclife-sand-o-65);
}

.overlay-light {
  opacity:0.2!important;
}

.overlay-blue-l, .overlay-al-blue-light {
  background-color: var(--aoclife-blue-o-50);
  z-index: -1!important;
}

.overlay-yellow-l, .overlay-al-yellow-light {
  background-color: var(--aoclife-yellow-o-50);
  z-index: -1!important;
}

.overlay-red-l, .overlay-al-red-light {
  background-color: var(--aoclife-red-o-50);
  z-index: -1!important;
}

.overlay-grey-l, .overlay-al-grey-light {
  background-color: var(--aoclife-grey-o-50);
  z-index: -1!important;
}

.overlay-green-l, .overlay-al-green-light {
  background-color: var(--aoclife-green-o-50);
  z-index: -1!important;
}

.overlay-sand-l, .overlay-al-sand-light {
  background-color: var(--aoclife-sand-o-50);
  z-index: -1!important;
}

.overlay-black {
  background-color:#00000080;
}

/* End Overlay */

/* Button color classes */

.btn-al-blue {
  background-color:var(--aoclife-blue);
  border-color:var(--aoclife-blue);
  color:white;
}

.btn-al-red {
  background-color:var(--aoclife-red);
  border-color:var(--aoclife-red);
  color:white;
}

.btn-al-grey {
  background-color:var(--aoclife-grey);
  border-color:var(--aoclife-grey);
  color:white;
}

.btn-al-yellow {
  background-color:var(--aoclife-yellow);
  border-color:var(--aoclife-yellow);
  color:white;
}

.btn-al-green {
  background-color:var(--aoclife-green);
  border-color:var(--aoclife-green);
  color:white;
}

.btn-al-sand {
  background-color:var(--aoclife-sand);
  border-color:var(--aoclife-sand);
  color:white;
}

/* End Button color classes */

/* Input (checkbox/radio) color classes */
.form-radio-blue, .form-checkbox-blue, .form-radio-blue:checked, .form-checkbox-blue:checked {
  background-color:var(--aoclife-blue-o-35);
}

.form-radio-yellow, .form-checkbox-yellow, .form-radio-yellow:checked, .form-checkbox-yellow:checked {
  background-color:var(--aoclife-yellow-o-35);
}

.form-radio-red, .form-checkbox-red, .form-radio-red:checked, .form-checkbox-red:checked {
  background-color:var(--aoclife-red-o-35);
}

.form-radio-sand, .form-checkbox-sand, .form-radio-sand:checked, .form-checkbox-sand:checked {
  background-color:var(--aoclife-sand-o-35);
}

.form-radio-grey, .form-checkbox-grey, .form-radio-grey:checked, .form-checkbox-grey:checked {
  background-color:var(--aoclife-grey-o-35);
}

.form-radio-green, .form-checkbox-green, .form-radio-green:checked, .form-checkbox-green:checked {
  background-color:var(--aoclife-green-o-35);
}

input[type=radio]:checked.form-radio-yellow + label, input[type=checkbox]:checked.form-checkbox-yellow + label {
  background-color:var(--aoclife-yellow-o-20);
}

input[type=radio]:checked.form-radio-blue + label, input[type=checkbox]:checked.form-checkbox-blue + label {
  background-color:var(--aoclife-blue-o-20);
}

input[type=radio]:checked.form-radio-red + label, input[type=checkbox]:checked.form-checkbox-red + label {
  background-color:var(--aoclife-red-o-20);
}

input[type=radio]:checked.form-radio-grey + label, input[type=checkbox]:checked.form-checkbox-grey + label {
  background-color:var(--aoclife-grey-o-20);
}

input[type=radio]:checked.form-radio-sand + label, input[type=checkbox]:checked.form-checkbox-sand + label {
  background-color:var(--aoclife-sand-o-20);
}

input[type=radio]:checked.form-radio-green + label, input[type=checkbox]:checked.form-checkbox-green + label {
  background-color:var(--aoclife-green-o-20);
}



/* End Input color classes */