/*Custom Bootstrap Colors*/

:root {
  /*Primary (Blue shades for Model Aviation)*/
  --primary-t1: #004080;  /* Darker blue */
  --primary-t2: #00264d;  /* Navy blue */
  --primary-t3: #3f579f;  /* Medium blue */
  --primary-t4: #5b94d6;  /* Lighter blue */
  --primary-t5: #ffffff;  /* White */
  --primary-t6: #001a33;  /* Deep navy */
  --primary-t7: #003366;  /* Medium dark blue */
  --primary-t8: #000000;  /* Black */
  --primary-t9: #bfdfec;  /* Powder blue */
  --primary-shadow: rgba(0, 64, 128, 0.5);
  --primary-text-color-dark-bright: #fff;

  /*Secondary (Grays and red tones)*/
  --secondary-t1: #933424;  /* Subtle red */
  --secondary-t2: #6a2519;
  --secondary-t3: #dd8677;
  --secondary-t4: #e2988b;
  --secondary-t5: #30110b;
  --secondary-t6: #5d2116;
  --secondary-t7: #76291c;
  --secondary-t8: #070201;
  --secondary-t9: #e6a69c;
  --secondary-shadow: rgba(147, 52, 36, 0.5);
  --secondary-text-color-dark-bright: #fff;

  /*Info (Alert and notice colors)*/
  --info-t1: #ef6c57;
  --info-t2: #ea4328;
  --info-t3: #fceae7;
  --info-t4: #fefefe;
  --info-t5: #b92811;
  --info-t6: #e9371a;
  --info-t7: #eb4f36;
  --info-t8: #8b1e0d;
  --info-t9: #10010e;
  --info-shadow: rgba(239, 108, 87, 0.5);
  --info-text-color-dark-bright: #212529;

  /* Accent 1 (Light Gray for background sections) */
  --accent1-t1: #f0f5fa;  /* Very light blue/gray */
  --accent1-t2: #dfe5eb;  
  --accent1-t3: #cbd2d9;  
  --accent1-t4: #b8bfc5;  
  --accent1-t5: #a7aeb4;  
  --accent1-t6: #959ba1;  
  --accent1-t7: #838a90;  
  --accent1-t8: #72787e;  
  --accent1-t9: #60666c;  
  --accent1-shadow: rgba(240, 245, 250, 0.5);  
  --accent1-text-color-dark-bright: #212529;

  /* Accent 2 (Darker Grays for text and borders) */
  --accent2-t1: #404040;
  --accent2-t2: #333333;
  --accent2-t3: #4d4d4d;
  --accent2-t4: #666666;
  --accent2-t5: #999999;
  --accent2-t6: #b3b3b3;
  --accent2-t7: #cccccc;
  --accent2-t8: #e6e6e6;
  --accent2-t9: #f2f2f2;
  --accent2-shadow: rgba(64, 64, 64, 0.5);
  --accent2-text-color-dark-bright: #ffffff;

  /* Accent 3 (Goldenrod) */
  --accent3-t1: #daa428;  /* Goldenrod */
  --accent3-t2: #e0a269;  /* Lighter gold */
  --accent3-t3: #ffc734;  
  --accent3-t4: #ffae00;  
  --accent3-t5: #ff9800;  
  --accent3-t6: #e68a00;  
  --accent3-t7: #ffad33;  
  --accent3-t8: #ffcc66;  
  --accent3-t9: #ffe6b3;  
  --accent3-shadow: rgba(218, 164, 40, 0.5);  /* Goldenrod shadow */
  --accent3-text-color-dark-bright: #212529;

  /*Light (White and off-whites)*/
  --light-t1: #ffffff;
  --light-t2: #f5f5f5;
  --light-t3: #e0e0e0;
  --light-t4: #d6d6d6;
  --light-t5: #cccccc;
  --light-t6: #e6e6e6;
  --light-t7: #f2f2f2;
  --light-t8: #fafafa;
  --light-t9: #fdfdfd;
  --light-shadow: rgba(255, 255, 255, 0.5);
  --light-text-color-dark-bright: #212529;

  /*Dark (Black and darker tones for typography)*/
  --dark-t1: #000000;
  --dark-t2: #1a1a1a;
  --dark-t3: #333333;
  --dark-t4: #4d4d4d;
  --dark-t5: #666666;
  --dark-t6: #808080;
  --dark-t7: #999999;
  --dark-t8: #b3b3b3;
  --dark-t9: #cccccc;
  --dark-shadow: rgba(0, 0, 0, 0.5);
  --dark-text-color-dark-bright: #ffffff;
}

  /*only change colors above here*/

  /*success*/
  --success-t1: #2cb069;
  --success-t2: #218750;
  --success-t3: #95e4ba;
  --success-t4: #a9e9c7;
  --success-t5: #134e2e;
  --success-t6: #1e7a49;
  --success-t7: #249357;
  --success-t8: #092516;
  --success-t9: #baedd2;
  --success-shadow: rgba(44, 176, 105, 0.5);
  --success-text-color-dark-bright: #212529;

  /*danger*/
  --danger-t1: #f61d16;
  --danger-t2: #d00e08;
  --danger-t3: #fbb0ae;
  --danger-t4: #fcc8c6;
  --danger-t5: #8c0905;
  --danger-t6: #c20d07;
  --danger-t7: #df0f08;
  --danger-t8: #5b0603;
  --danger-t9: #fddbda;
  --danger-shadow: rgba(246, 29, 22, 0.5);
  --danger-text-color-dark-bright: #fff;
}

/*------------------------------------
- COLOR primary
------------------------------------*/
.alert-primary {
  color: var(--primary-t5);
  background-color: var(--primary-t9);
  border-color: var(--primary-t4);

  & hr {
    border-top-color: var(--primary-t3);
  }

  & .alert-link {
    color: var(--primary-t8);
  }
}

.badge-primary {
  color: var(--primary-text-color-dark-bright);
  background-color: var(--primary-t1);

  &[href]:hover, &[href]:focus {
    background-color: var(--primary-t2);
  }
}

.bg-primary {
  background-color: var(--primary-t1) !important;

  a&, button& {
    &:hover, &:focus {
      background-color: var(--primary-t2) !important;
    }
  }
}

.border-primary {
  border-color: var(--primary-t1) !important;
}

.btn-primary {
  color: var(--primary-text-color-dark-bright);
  background-color: var(--primary-t1);
  border-color: var(--primary-t1);

  &:hover {
    background-color: var(--primary-t7);
    border-color: var(--primary-t2);
  }

  &:focus, &.focus {
    box-shadow: 0 0 0 0.2rem var(--primary-shadow);
  }

  &.disabled, &:disabled {
    background-color: var(--primary-t1);
    border-color: var(--primary-t1);
  }

  &:not(:disabled):not(.disabled):active, &:not(:disabled):not(.disabled).active, .show > &.dropdown-toggle {
    background-color: var(--primary-t2);
    border-color: var(--primary-t6);
  }
}

.btn-outline-primary {
  color: var(--primary-t1);
  background-color: transparent;
  border-color: var(--primary-t1);

  &:hover {
    color: var(--primary-text-color-dark-bright);
    background-color: var(--primary-t1);
    border-color: var(--primary-t1);
  }

  &:focus, &.focus {
    box-shadow: 0 0 0 0.2rem var(--primary-shadow);
  }
}

.list-group-item-primary {
  color: var(--primary-t5);
  background-color: var(--primary-t4);

  &.list-group-item-action:hover, &.list-group-item-action:focus {
    background-color: var(--primary-t3);
  }

  &.list-group-item-action.active {
    color: var(--primary-text-color-dark-bright);
    background-color: var(--primary-t5);
    border-color: var(--primary-t5);
  }
}

.table-primary {
  background-color: var(--primary-t4);

  &:hover {
    background-color: var(--primary-t3);
  }

  &:hover > th, &:hover > td {
    background-color: var(--primary-t3);
  }
}

.text-primary {
  color: var(--primary-t1) !important;

  a&:hover, a&:focus {
    color: var(--primary-t2) !important;
  }
}

/*------------------------------------
- COLOR secondary
------------------------------------*/
.alert-secondary {
  color: var(--secondary-t5);
  background-color: var(--secondary-t9);
  border-color: var(--secondary-t4);

  & hr {
    border-top-color: var(--secondary-t3);
  }

  & .alert-link {
    color: var(--secondary-t8);
  }
}

.badge-secondary {
  color: var(--secondary-text-color-dark-bright);
  background-color: var(--secondary-t1);

  &[href]:hover, &[href]:focus {
    background-color: var(--secondary-t2);
  }
}

.bg-secondary {
  background-color: var(--secondary-t1) !important;

  a&, button& {
    &:hover, &:focus {
      background-color: var(--secondary-t2) !important;
    }
  }
}

.border-secondary {
  border-color: var(--secondary-t1) !important;
}

.btn-secondary {
  color: var(--secondary-text-color-dark-bright);
  background-color: var(--secondary-t1);
  border-color: var(--secondary-t1);

  &:hover {
    background-color: var(--secondary-t7);
    border-color: var(--secondary-t2);
  }

  &:focus, &.focus {
    box-shadow: 0 0 0 0.2rem var(--secondary-shadow);
  }

  &.disabled, &:disabled {
    background-color: var(--secondary-t1);
    border-color: var(--secondary-t1);
  }

  &:not(:disabled):not(.disabled):active, &:not(:disabled):not(.disabled).active, .show > &.dropdown-toggle {
    background-color: var(--secondary-t2);
    border-color: var(--secondary-t6);
  }
}

.btn-outline-secondary {
  color: var(--secondary-t1);
  background-color: transparent;
  border-color: var(--secondary-t1);

  &:hover {
    color: var(--secondary-text-color-dark-bright);
    background-color: var(--secondary-t1);
    border-color: var(--secondary-t1);
  }
}

.list-group-item-secondary {
  color: var(--secondary-t5);
  background-color: var(--secondary-t4);

  &.list-group-item-action:hover, &.list-group-item-action:focus {
    background-color: var(--secondary-t3);
  }

  &.list-group-item-action.active {
    color: var(--secondary-text-color-dark-bright);
    background-color: var(--secondary-t5);
    border-color: var(--secondary-t5);
  }
}

.table-secondary {
  background-color: var(--secondary-t4);

  &:hover {
    background-color: var(--secondary-t3);
  }

  &:hover > th, &:hover > td {
    background-color: var(--secondary-t3);
  }
}

.text-secondary {
  color: var(--secondary-t1) !important;

  a&:hover, a&:focus {
    color: var(--secondary-t2) !important;
  }
}

/*------------------------------------
- COLOR info
------------------------------------*/
.alert-info {
  color: var(--info-t5);
  background-color: var(--info-t9);
  border-color: var(--info-t4);

  & hr {
    border-top-color: var(--info-t3);
  }

  & .alert-link {
    color: var(--info-t8);
  }
}

.badge-info {
  color: var(--info-text-color-dark-bright);
  background-color: var(--info-t1);

  &[href]:hover, &[href]:focus {
    background-color: var(--info-t2);
  }
}

.bg-info {
  background-color: var(--info-t1) !important;

  a&, button& {
    &:hover, &:focus {
      background-color: var(--info-t2) !important;
    }
  }
}

.border-info {
  border-color: var(--info-t1) !important;
}

.btn-info {
  color: var(--info-text-color-dark-bright);
  background-color: var(--info-t1);
  border-color: var(--info-t1);

  &:hover {
    background-color: var(--info-t7);
    border-color: var(--info-t2);
  }

  &:focus, &.focus {
    box-shadow: 0 0 0 0.2rem var(--info-shadow);
  }

  &.disabled, &:disabled {
    background-color: var(--info-t1);
    border-color: var(--info-t1);
  }

  &:not(:disabled):not(.disabled):active, &:not(:disabled):not(.disabled).active, .show > &.dropdown-toggle {
    background-color: var(--info-t2);
    border-color: var(--info-t6);
  }
}

.btn-outline-info {
  color: var(--info-t1);
  background-color: transparent;
  border-color: var(--info-t1);

  &:hover {
    color: var(--info-text-color-dark-bright);
    background-color: var(--info-t1);
    border-color: var(--info-t1);
  }
}

.list-group-item-info {
  color: var(--info-t5);
  background-color: var(--info-t4);

  &.list-group-item-action:hover, &.list-group-item-action:focus {
    background-color: var(--info-t3);
  }

  &.list-group-item-action.active {
    color: var(--info-text-color-dark-bright);
    background-color: var(--info-t5);
    border-color: var(--info-t5);
  }
}

.table-info {
  background-color: var(--info-t4);

  &:hover {
    background-color: var(--info-t3);
  }

  &:hover > th, &:hover > td {
    background-color: var(--info-t3);
  }
}

.text-info {
  color: var(--info-t1) !important;

  a&:hover, a&:focus {
    color: var(--info-t2) !important;
  }
}

/*------------------------------------
- COLOR accent1
------------------------------------*/
.alert-accent1 {
  color: var(--accent1-t5);
  background-color: var(--accent1-t9);
  border-color: var(--accent1-t4);

  & hr {
    border-top-color: var(--accent1-t3);
  }

  & .alert-link {
    color: var(--accent1-t8);
  }
}

.badge-accent1 {
  color: var(--accent1-text-color-dark-bright);
  background-color: var(--accent1-t1);

  &[href]:hover, &[href]:focus {
    background-color: var(--accent1-t2);
  }
}

.bg-accent1 {
  background-color: var(--accent1-t1) !important;

  a&, button& {
    &:hover, &:focus {
      background-color: var(--accent1-t2) !important;
    }
  }
}

.border-accent1 {
  border-color: var(--accent1-t1) !important;
}

.btn-accent1 {
  color: var(--accent1-text-color-dark-bright);
  background-color: var(--accent1-t1);
  border-color: var(--accent1-t1);

  &:hover {
    background-color: var(--accent1-t7);
    border-color: var(--accent1-t2);
  }

  &:focus, &.focus {
    box-shadow: 0 0 0 0.2rem var(--accent1-shadow);
  }

  &.disabled, &:disabled {
    background-color: var(--accent1-t1);
    border-color: var(--accent1-t1);
  }

  &:not(:disabled):not(.disabled):active, &:not(:disabled):not(.disabled).active, .show > &.dropdown-toggle {
    background-color: var(--accent1-t2);
    border-color: var(--accent1-t6);
  }
}

.btn-outline-accent1 {
  color: var(--accent1-t1);
  background-color: transparent;
  border-color: var(--accent1-t1);

  &:hover {
    color: var(--accent1-text-color-dark-bright);
    background-color: var(--accent1-t1);
    border-color: var(--accent1-t1);
  }
}

.list-group-item-accent1 {
  color: var(--accent1-t5);
  background-color: var(--accent1-t4);

  &.list-group-item-action:hover, &.list-group-item-action:focus {
    background-color: var(--accent1-t3);
  }

  &.list-group-item-action.active {
    color: var(--accent1-text-color-dark-bright);
    background-color: var(--accent1-t5);
    border-color: var(--accent1-t5);
  }
}

.table-accent1,
.table-accent1 > th,
.table-accent1 > td {
  background-color: var(--accent1-t4);

  &:hover {
    background-color: var(--accent1-t3);
  }

  &:hover > th, &:hover > td {
    background-color: var(--accent1-t3);
  }
}

.text-accent1 {
  color: var(--accent1-t1) !important;

  a&:hover, a&:focus {
    color: var(--accent1-t2) !important;
  }
}

/*------------------------------------
- COLOR accent2
------------------------------------*/
.alert-accent2 {
  color: var(--accent2-t5);
  background-color: var(--accent2-t9);
  border-color: var(--accent2-t4);

  & hr {
    border-top-color: var(--accent2-t3);
  }

  & .alert-link {
    color: var(--accent2-t8);
  }
}

.badge-accent2 {
  color: var(--accent2-text-color-dark-bright);
  background-color: var(--accent2-t1);

  &[href]:hover, &[href]:focus {
    background-color: var(--accent2-t2);
  }
}

.bg-accent2 {
  background-color: var(--accent2-t1) !important;

  a&, button& {
    &:hover, &:focus {
      background-color: var(--accent2-t2) !important;
    }
  }
}

.border-accent2 {
  border-color: var(--accent2-t1) !important;
}

.btn-accent2 {
  color: var(--accent2-text-color-dark-bright);
  background-color: var(--accent2-t1);
  border-color: var(--accent2-t1);

  &:hover {
    background-color: var(--accent2-t7);
    border-color: var(--accent2-t2);
  }

  &:focus, &.focus {
    box-shadow: 0 0 0 0.2rem var(--accent2-shadow);
  }

  &.disabled, &:disabled {
    background-color: var(--accent2-t1);
    border-color: var(--accent2-t1);
  }

  &:not(:disabled):not(.disabled):active, &:not(:disabled):not(.disabled).active, .show > &.dropdown-toggle {
    background-color: var(--accent2-t2);
    border-color: var(--accent2-t6);
  }
}

.btn-outline-accent2 {
  color: var(--accent2-t1);
  background-color: transparent;
  border-color: var(--accent2-t1);

  &:hover {
    color: var(--accent2-text-color-dark-bright);
    background-color: var(--accent2-t1);
    border-color: var(--accent2-t1);
  }
}

.list-group-item-accent2 {
  color: var(--accent2-t5);
  background-color: var(--accent2-t4);

  &.list-group-item-action:hover, &.list-group-item-action:focus {
    background-color: var(--accent2-t3);
  }

  &.list-group-item-action.active {
    color: var(--accent2-text-color-dark-bright);
    background-color: var(--accent2-t5);
    border-color: var(--accent2-t5);
  }
}

.table-accent2,
.table-accent2 > th,
.table-accent2 > td {
  background-color: var(--accent2-t4);

  &:hover {
    background-color: var(--accent2-t3);
  }

  &:hover > th, &:hover > td {
    background-color: var(--accent2-t3);
  }
}

.text-accent2 {
  color: var(--accent2-t1) !important;

  a&:hover, a&:focus {
    color: var(--accent2-t2) !important;
  }
}

/*------------------------------------
- COLOR accent3
------------------------------------*/
.alert-accent3 {
  color: var(--accent3-t5);
  background-color: var(--accent3-t9);
  border-color: var(--accent3-t4);

  hr {
    border-top-color: var(--accent3-t3);
  }

  .alert-link {
    color: var(--accent3-t8);
  }
}

.badge-accent3 {
  color: var(--accent3-text-color-dark-bright);
  background-color: var(--accent3-t1);

  &:hover, &:focus {
    background-color: var(--accent3-t2);
  }
}

.bg-accent3 {
  background-color: var(--accent3-t1) !important;

  a&, button& {
    &:hover, &:focus {
      background-color: var(--accent3-t2) !important;
    }
  }
}

.border-accent3 {
  border-color: var(--accent3-t1) !important;
}

.btn-accent3 {
  color: var(--accent3-text-color-dark-bright);
  background-color: var(--accent3-t1);
  border-color: var(--accent3-t1);

  &:hover {
    background-color: var(--accent3-t7);
    border-color: var(--accent3-t2);
  }

  &:focus, &.focus {
    box-shadow: 0 0 0 0.2rem var(--accent3-shadow);
  }

  &.disabled, &:disabled {
    background-color: var(--accent3-t1);
    border-color: var(--accent3-t1);
  }

  &:not(:disabled):not(.disabled):active, &:not(:disabled):not(.disabled).active, .show > &.dropdown-toggle {
    background-color: var(--accent3-t2);
    border-color: var(--accent3-t6);
  }
}

.btn-outline-accent3 {
  color: var(--accent3-t1);
  background-color: transparent;
  border-color: var(--accent3-t1);

  &:hover {
    color: var(--accent3-text-color-dark-bright);
    background-color: var(--accent3-t1);
    border-color: var(--accent3-t1);
  }
}

.list-group-item-accent3 {
  color: var(--accent3-t5);
  background-color: var(--accent3-t4);

  &.list-group-item-action:hover, &.list-group-item-action:focus {
    background-color: var(--accent3-t3);
  }

  &.list-group-item-action.active {
    color: var(--accent3-text-color-dark-bright);
    background-color: var(--accent3-t5);
    border-color: var(--accent3-t5);
  }
}

.table-accent3,
.table-accent3 > th,
.table-accent3 > td {
  background-color: var(--accent3-t4);

  &:hover {
    background-color: var(--accent3-t3);
  }

  &:hover > th, &:hover > td {
    background-color: var(--accent3-t3);
  }
}

.text-accent3 {
  color: var(--accent3-t1) !important;

  a&:hover, a&:focus {
    color: var(--accent3-t2) !important;
  }
}

/*------------------------------------
- COLOR light
------------------------------------*/
.alert-light {
  color: var(--light-t5);
  background-color: var(--light-t9);
  border-color: var(--light-t4);

  & hr {
    border-top-color: var(--light-t3);
  }

  & .alert-link {
    color: var(--light-t8);
  }
}

.badge-light {
  color: var(--light-text-color-dark-bright);
  background-color: var(--light-t1);

  &[href]:hover, &[href]:focus {
    background-color: var(--light-t2);
  }
}

.bg-light {
  background-color: var(--light-t1) !important;

  a&, button& {
    &:hover, &:focus {
      background-color: var(--light-t2) !important;
    }
  }
}

.border-light {
  border-color: var(--light-t1) !important;
}

.btn-light {
  color: var(--light-text-color-dark-bright);
  background-color: var(--light-t1);
  border-color: var(--light-t1);

  &:hover {
    background-color: var(--light-t7);
    border-color: var(--light-t2);
  }

  &:focus, &.focus {
    box-shadow: 0 0 0 0.2rem var(--light-shadow);
  }

  &.disabled, &:disabled {
    background-color: var(--light-t1);
    border-color: var(--light-t1);
  }

  &:not(:disabled):not(.disabled):active, &:not(:disabled):not(.disabled).active, .show > &.dropdown-toggle {
    background-color: var(--light-t2);
    border-color: var(--light-t6);
  }
}

.btn-outline-light {
  color: var(--light-t1);
  background-color: transparent;
  border-color: var(--light-t1);

  &:hover {
    color: var(--light-text-color-dark-bright);
    background-color: var(--light-t1);
    border-color: var(--light-t1);
  }
}

.list-group-item-light {
  color: var(--light-t5);
  background-color: var(--light-t4);

  &.list-group-item-action:hover, &.list-group-item-action:focus {
    background-color: var(--light-t3);
  }

  &.list-group-item-action.active {
    color: var(--light-text-color-dark-bright);
    background-color: var(--light-t5);
    border-color: var(--light-t5);
  }
}

.table-light {
  background-color: var(--light-t4);

  &:hover {
    background-color: var(--light-t3);
  }

  &:hover > th, &:hover > td {
    background-color: var(--light-t3);
  }
}

.text-light {
  color: var(--light-t1) !important;

  a&:hover, a&:focus {
    color: var(--light-t2) !important;
  }
}

/*------------------------------------
- COLOR dark
------------------------------------*/
.alert-dark {
  color: var(--dark-t5);
  background-color: var(--dark-t9);
  border-color: var(--dark-t4);

  & hr {
    border-top-color: var(--dark-t3);
  }

  & .alert-link {
    color: var(--dark-t8);
  }
}

.badge-dark {
  color: var(--dark-text-color-dark-bright);
  background-color: var(--dark-t1);

  &[href]:hover, &[href]:focus {
    background-color: var(--dark-t2);
  }
}

.bg-dark {
  background-color: var(--dark-t1) !important;

  a&, button& {
    &:hover, &:focus {
      background-color: var(--dark-t2) !important;
    }
  }
}

.border-dark {
  border-color: var(--dark-t1) !important;
}

.btn-dark {
  color: var(--dark-text-color-dark-bright);
  background-color: var(--dark-t1);
  border-color: var(--dark-t1);

  &:hover {
    background-color: var(--dark-t7);
    border-color: var(--dark-t2);
  }

  &:focus, &.focus {
    box-shadow: 0 0 0 0.2rem var(--dark-shadow);
  }

  &.disabled, &:disabled {
    background-color: var(--dark-t1);
    border-color: var(--dark-t1);
  }

  &:not(:disabled):not(.disabled):active, &:not(:disabled):not(.disabled).active, .show > &.dropdown-toggle {
    background-color: var(--dark-t2);
    border-color: var(--dark-t6);
  }
}

.btn-outline-dark {
  color: var(--dark-t1);
  background-color: transparent;
  border-color: var(--dark-t1);

  &:hover {
    color: var(--dark-text-color-dark-bright);
    background-color: var(--dark-t1);
    border-color: var(--dark-t1);
  }
}

.list-group-item-dark {
  color: var(--dark-t5);
  background-color: var(--dark-t4);

  &.list-group-item-action:hover, &.list-group-item-action:focus {
    background-color: var(--dark-t3);
  }

  &.list-group-item-action.active {
    color: var(--dark-text-color-dark-bright);
    background-color: var(--dark-t5);
    border-color: var(--dark-t5);
  }
}

.table-dark {
  background-color: var(--dark-t4);

  &:hover {
    background-color: var(--dark-t3);
  }

  &:hover > th, &:hover > td {
    background-color: var(--dark-t3);
  }
}

.text-dark {
  color: var(--dark-t1) !important;

  a&:hover, a&:focus {
    color: var(--dark-t2) !important;
  }
}

/*------------------------------------
- COLOR success
------------------------------------*/
.alert-success {
  color: var(--success-t5);
  background-color: var(--success-t9);
  border-color: var(--success-t4);

  & hr {
    border-top-color: var(--success-t3);
  }

  & .alert-link {
    color: var(--success-t8);
  }
}

.badge-success {
  color: var(--success-text-color-dark-bright);
  background-color: var(--success-t1);

  &[href]:hover, &[href]:focus {
    background-color: var(--success-t2);
  }
}

.bg-success {
  background-color: var(--success-t1) !important;

  a&, button& {
    &:hover, &:focus {
      background-color: var(--success-t2) !important;
    }
  }
}

.border-success {
  border-color: var(--success-t1) !important;
}

.btn-success {
  color: var(--success-text-color-dark-bright);
  background-color: var(--success-t1);
  border-color: var(--success-t1);

  &:hover {
    background-color: var(--success-t7);
    border-color: var(--success-t2);
  }

  &:focus, &.focus {
    box-shadow: 0 0 0 0.2rem var(--success-shadow);
  }

  &.disabled, &:disabled {
    background-color: var(--success-t1);
    border-color: var(--success-t1);
  }

  &:not(:disabled):not(.disabled):active, &:not(:disabled):not(.disabled).active, .show > &.dropdown-toggle {
    background-color: var(--success-t2);
    border-color: var(--success-t6);
  }
}

.btn-outline-success {
  color: var(--success-t1);
  background-color: transparent;
  border-color: var(--success-t1);

  &:hover {
    color: var(--success-text-color-dark-bright);
    background-color: var(--success-t1);
    border-color: var(--success-t1);
  }
}

.list-group-item-success {
  color: var(--success-t5);
  background-color: var(--success-t4);

  &.list-group-item-action:hover, &.list-group-item-action:focus {
    background-color: var(--success-t3);
  }

  &.list-group-item-action.active {
    color: var(--success-text-color-dark-bright);
    background-color: var(--success-t5);
    border-color: var(--success-t5);
  }
}

.table-success {
  background-color: var(--success-t4);

  &:hover {
    background-color: var(--success-t3);
  }

  &:hover > th, &:hover > td {
    background-color: var(--success-t3);
  }
}

.text-success {
  color: var(--success-t1) !important;

  a&:hover, a&:focus {
    color: var(--success-t2) !important;
  }
}

/*------------------------------------
- COLOR danger
------------------------------------*/
.alert-danger {
  color: var(--danger-t5);
  background-color: var(--danger-t9);
  border-color: var(--danger-t4);

  & hr {
    border-top-color: var(--danger-t3);
  }

  & .alert-link {
    color: var(--danger-t8);
  }
}

.badge-danger {
  color: var(--danger-text-color-dark-bright);
  background-color: var(--danger-t1);

  &[href]:hover, &[href]:focus {
    background-color: var(--danger-t2);
  }
}

.bg-danger {
  background-color: var(--danger-t1) !important;

  a&, button& {
    &:hover, &:focus {
      background-color: var(--danger-t2) !important;
    }
  }
}

.border-danger {
  border-color: var(--danger-t1) !important;
}

.btn-danger {
  color: var(--danger-text-color-dark-bright);
  background-color: var(--danger-t1);
  border-color: var(--danger-t1);

  &:hover {
    background-color: var(--danger-t7);
    border-color: var(--danger-t2);
  }

  &:focus, &.focus {
    box-shadow: 0 0 0 0.2rem var(--danger-shadow);
  }

  &.disabled, &:disabled {
    background-color: var(--danger-t1);
    border-color: var(--danger-t1);
  }

  &:not(:disabled):not(.disabled):active, &:not(:disabled):not(.disabled).active, .show > &.dropdown-toggle {
    background-color: var(--danger-t2);
    border-color: var(--danger-t6);
  }
}

.btn-outline-danger {
  color: var(--danger-t1);
  background-color: transparent;
  border-color: var(--danger-t1);

  &:hover {
    color: var(--danger-text-color-dark-bright);
    background-color: var(--danger-t1);
    border-color: var(--danger-t1);
  }
}

.list-group-item-danger {
  color: var(--danger-t5);
  background-color: var(--danger-t4);

  &.list-group-item-action:hover, &.list-group-item-action:focus {
    background-color: var(--danger-t3);
  }

  &.list-group-item-action.active {
    color: var(--danger-text-color-dark-bright);
    background-color: var(--danger-t5);
    border-color: var(--danger-t5);
  }
}

.table-danger {
  background-color: var(--danger-t4);

  &:hover {
    background-color: var(--danger-t3);
  }

  &:hover > th, &:hover > td {
    background-color: var(--danger-t3);
  }
}

.text-danger {
  color: var(--danger-t1) !important;

  a&:hover, a&:focus {
    color: var(--danger-t2) !important;
  }
}