/* Color Variables */
:root {
  --rusty-orange: #9D4222;
  --rusty-orange-hover: #B14B27;
  --warm-gray: #96817A;
  --warm-gray-hover: #A8918B;
  --deep-brown: #461100;
  --deep-brown-hover: #581500;
  --golden-brown: #9C7B54;
  --golden-brown-hover: #B18E62;
  --light-gold: #FFE596;
  --light-gold-hover: #FFEBA8;
}

/* Rusty Orange */
html .btn-rusty-orange {
  background-color: var(--rusty-orange);
  border-color: var(--rusty-orange);
  color: #FFF;
}

html .btn-rusty-orange:hover,
html .btn-rusty-orange.hover {
  background-color: var(--rusty-orange-hover);
  border-color: var(--rusty-orange-hover);
  color: #FFF;
}

html .btn-rusty-orange:focus,
html .btn-rusty-orange.focus {
  box-shadow: 0 0 0 3px rgba(157, 66, 34, 0.5);
  background-color: var(--rusty-orange);
  border-color: var(--rusty-orange);
}

html .btn-rusty-orange.disabled,
html .btn-rusty-orange:disabled {
  background-color: var(--rusty-orange);
  border-color: var(--rusty-orange);
  opacity: 0.65;
}

html .heading-rusty-orange,
html .lnk-rusty-orange,
html .text-color-rusty-orange,
html .text-rusty-orange {
  color: var(--rusty-orange) !important;
}

html .text-color-hover-rusty-orange:hover,
html .text-hover-rusty-orange:hover {
  color: var(--rusty-orange) !important;
}

html .bg-rusty-orange,
html .background-color-rusty-orange {
  background-color: var(--rusty-orange) !important;
}

.badge-rusty-orange {
  background: var(--rusty-orange-hover);
  color: #FFF;
}

/* Warm Gray */
html .btn-warm-gray {
  background-color: var(--warm-gray);
  border-color: var(--warm-gray);
  color: #FFF;
}

html .btn-warm-gray:hover,
html .btn-warm-gray.hover {
  background-color: var(--warm-gray-hover);
  border-color: var(--warm-gray-hover);
  color: #FFF;
}

html .btn-warm-gray:focus,
html .btn-warm-gray.focus {
  box-shadow: 0 0 0 3px rgba(150, 129, 122, 0.5);
  background-color: var(--warm-gray);
  border-color: var(--warm-gray);
}

html .btn-warm-gray.disabled,
html .btn-warm-gray:disabled {
  background-color: var(--warm-gray);
  border-color: var(--warm-gray);
  opacity: 0.65;
}

html .heading-warm-gray,
html .lnk-warm-gray,
html .text-color-warm-gray,
html .text-warm-gray {
  color: var(--warm-gray) !important;
}

html .text-color-hover-warm-gray:hover,
html .text-hover-warm-gray:hover {
  color: var(--warm-gray) !important;
}

html .bg-warm-gray,
html .background-color-warm-gray {
  background-color: var(--warm-gray) !important;
}

.badge-warm-gray {
  background: var(--warm-gray-hover);
  color: #FFF;
}

/* Deep Brown */
html .btn-deep-brown {
  background-color: var(--deep-brown);
  border-color: var(--deep-brown);
  color: #FFF;
}

html .btn-deep-brown:hover,
html .btn-deep-brown.hover {
  background-color: var(--deep-brown-hover);
  border-color: var(--deep-brown-hover);
  color: #FFF;
}

html .btn-deep-brown:focus,
html .btn-deep-brown.focus {
  box-shadow: 0 0 0 3px rgba(70, 17, 0, 0.5);
  background-color: var(--deep-brown);
  border-color: var(--deep-brown);
}

html .btn-deep-brown.disabled,
html .btn-deep-brown:disabled {
  background-color: var(--deep-brown);
  border-color: var(--deep-brown);
  opacity: 0.65;
}

html .heading-deep-brown,
html .lnk-deep-brown,
html .text-color-deep-brown,
html .text-deep-brown {
  color: var(--deep-brown) !important;
}

html .text-color-hover-deep-brown:hover,
html .text-hover-deep-brown:hover {
  color: var(--deep-brown) !important;
}

html .bg-deep-brown,
html .background-color-deep-brown {
  background-color: var(--deep-brown) !important;
}

.badge-deep-brown {
  background: var(--deep-brown-hover);
  color: #FFF;
}

/* Golden Brown */
html .btn-golden-brown {
  background-color: var(--golden-brown);
  border-color: var(--golden-brown);
  color: #FFF;
}

html .btn-golden-brown:hover,
html .btn-golden-brown.hover {
  background-color: var(--golden-brown-hover);
  border-color: var(--golden-brown-hover);
  color: #FFF;
}

html .btn-golden-brown:focus,
html .btn-golden-brown.focus {
  box-shadow: 0 0 0 3px rgba(156, 123, 84, 0.5);
  background-color: var(--golden-brown);
  border-color: var(--golden-brown);
}

html .btn-golden-brown.disabled,
html .btn-golden-brown:disabled {
  background-color: var(--golden-brown);
  border-color: var(--golden-brown);
  opacity: 0.65;
}

html .heading-golden-brown,
html .lnk-golden-brown,
html .text-color-golden-brown,
html .text-golden-brown {
  color: var(--golden-brown) !important;
}

html .text-color-hover-golden-brown:hover,
html .text-hover-golden-brown:hover {
  color: var(--golden-brown) !important;
}

html .bg-golden-brown,
html .background-color-golden-brown {
  background-color: var(--golden-brown) !important;
}

.badge-golden-brown {
  background: var(--golden-brown-hover);
  color: #FFF;
}

/* Light Gold */
html .btn-light-gold {
  background-color: var(--light-gold);
  border-color: var(--light-gold);
  color: #333;
}

html .btn-light-gold:hover,
html .btn-light-gold.hover {
  background-color: var(--light-gold-hover);
  border-color: var(--light-gold-hover);
  color: #333;
}

html .btn-light-gold:focus,
html .btn-light-gold.focus {
  box-shadow: 0 0 0 3px rgba(255, 229, 150, 0.5);
  background-color: var(--light-gold);
  border-color: var(--light-gold);
}

html .btn-light-gold.disabled,
html .btn-light-gold:disabled {
  background-color: var(--light-gold);
  border-color: var(--light-gold);
  opacity: 0.65;
}

html .heading-light-gold,
html .lnk-light-gold,
html .text-color-light-gold,
html .text-light-gold {
  color: var(--light-gold) !important;
}

html .text-color-hover-light-gold:hover,
html .text-hover-light-gold:hover {
  color: var(--light-gold) !important;
}

html .bg-light-gold,
html .background-color-light-gold {
  background-color: var(--light-gold) !important;
}

.badge-light-gold {
  background: var(--light-gold-hover);
  color: #333;
}

/* Alerts */
.alert-rusty-orange {
  color: #FFF;
  background-color: var(--rusty-orange);
  border-color: var(--rusty-orange);
}

.alert-rusty-orange .alert-link {
  color: #FFF;
  text-decoration: underline;
}

.alert-warm-gray {
  color: #FFF;
  background-color: var(--warm-gray);
  border-color: var(--warm-gray);
}

.alert-warm-gray .alert-link {
  color: #FFF;
  text-decoration: underline;
}

.alert-deep-brown {
  color: #FFF;
  background-color: var(--deep-brown);
  border-color: var(--deep-brown);
}

.alert-deep-brown .alert-link {
  color: #FFF;
  text-decoration: underline;
}

.alert-golden-brown {
  color: #FFF;
  background-color: var(--golden-brown);
  border-color: var(--golden-brown);
}

.alert-golden-brown .alert-link {
  color: #FFF;
  text-decoration: underline;
}

.alert-light-gold {
  color: #333;
  background-color: var(--light-gold);
  border-color: var(--light-gold);
}

.alert-light-gold .alert-link {
  color: #333;
  text-decoration: underline;
}

/* Outline Buttons */
html .btn-outline-rusty-orange {
  color: var(--rusty-orange);
  border-color: var(--rusty-orange);
  background-color: transparent;
  border-width: 2px;
  padding: 7.728px 14.928px;
  padding: 0.483rem 0.933rem;
}

html .btn-outline-rusty-orange:hover,
html .btn-outline-rusty-orange.hover {
  background-color: var(--rusty-orange);
  border-color: var(--rusty-orange);
  color: #FFF;
}

html .btn-outline-rusty-orange:focus,
html .btn-outline-rusty-orange.focus {
  box-shadow: 0 0 0 3px rgba(157, 66, 34, 0.5);
  background-color: var(--rusty-orange);
  border-color: var(--rusty-orange);
  color: #FFF;
}

html .btn-outline-rusty-orange.disabled,
html .btn-outline-rusty-orange:disabled {
  color: var(--rusty-orange);
  background-color: transparent;
  border-color: var(--rusty-orange);
  opacity: 0.65;
}

html .btn-outline-warm-gray {
  color: var(--warm-gray);
  border-color: var(--warm-gray);
  background-color: transparent;
  border-width: 2px;
  padding: 7.728px 14.928px;
  padding: 0.483rem 0.933rem;
}

html .btn-outline-warm-gray:hover,
html .btn-outline-warm-gray.hover {
  background-color: var(--warm-gray);
  border-color: var(--warm-gray);
  color: #FFF;
}

html .btn-outline-warm-gray:focus,
html .btn-outline-warm-gray.focus {
  box-shadow: 0 0 0 3px rgba(150, 129, 122, 0.5);
  background-color: var(--warm-gray);
  border-color: var(--warm-gray);
  color: #FFF;
}

html .btn-outline-warm-gray.disabled,
html .btn-outline-warm-gray:disabled {
  color: var(--warm-gray);
  background-color: transparent;
  border-color: var(--warm-gray);
  opacity: 0.65;
}

html .btn-outline-deep-brown {
  color: var(--deep-brown);
  border-color: var(--deep-brown);
  background-color: transparent;
  border-width: 2px;
  padding: 7.728px 14.928px;
  padding: 0.483rem 0.933rem;
}

html .btn-outline-deep-brown:hover,
html .btn-outline-deep-brown.hover {
  background-color: var(--deep-brown);
  border-color: var(--deep-brown);
  color: #FFF;
}

html .btn-outline-deep-brown:focus,
html .btn-outline-deep-brown.focus {
  box-shadow: 0 0 0 3px rgba(70, 17, 0, 0.5);
  background-color: var(--deep-brown);
  border-color: var(--deep-brown);
  color: #FFF;
}

html .btn-outline-deep-brown.disabled,
html .btn-outline-deep-brown:disabled {
  color: var(--deep-brown);
  background-color: transparent;
  border-color: var(--deep-brown);
  opacity: 0.65;
}

html .btn-outline-golden-brown {
  color: var(--golden-brown);
  border-color: var(--golden-brown);
  background-color: transparent;
  border-width: 2px;
  padding: 7.728px 14.928px;
  padding: 0.483rem 0.933rem;
}

html .btn-outline-golden-brown:hover,
html .btn-outline-golden-brown.hover {
  background-color: var(--golden-brown);
  border-color: var(--golden-brown);
  color: #FFF;
}

html .btn-outline-golden-brown:focus,
html .btn-outline-golden-brown.focus {
  box-shadow: 0 0 0 3px rgba(156, 123, 84, 0.5);
  background-color: var(--golden-brown);
  border-color: var(--golden-brown);
  color: #FFF;
}

html .btn-outline-golden-brown.disabled,
html .btn-outline-golden-brown:disabled {
  color: var(--golden-brown);
  background-color: transparent;
  border-color: var(--golden-brown);
  opacity: 0.65;
}

html .btn-outline-light-gold {
  color: var(--light-gold);
  border-color: var(--light-gold);
  background-color: transparent;
  border-width: 2px;
  padding: 7.728px 14.928px;
  padding: 0.483rem 0.933rem;
}

html .btn-outline-light-gold:hover,
html .btn-outline-light-gold.hover {
  background-color: var(--light-gold);
  border-color: var(--light-gold);
  color: #333;
}

html .btn-outline-light-gold:focus,
html .btn-outline-light-gold.focus {
  box-shadow: 0 0 0 3px rgba(255, 229, 150, 0.5);
  background-color: var(--light-gold);
  border-color: var(--light-gold);
  color: #333;
}

html .btn-outline-light-gold.disabled,
html .btn-outline-light-gold:disabled {
  color: var(--light-gold);
  background-color: transparent;
  border-color: var(--light-gold);
  opacity: 0.65;
}

/* Button Size Variations */
html [class*="btn-outline-"].btn-xs {
  padding: 2.4px 8px;
  padding: 0.15rem 0.5rem;
}

html [class*="btn-outline-"].btn-sm {
  padding: 4px 10.4px;
  padding: 0.25rem 0.65rem;
}

html [class*="btn-outline-"].btn-lg {
  padding: 7.2px 16px;
  padding: 0.45rem 1rem;
}

html [class*="btn-outline-"].btn-xl {
  padding: 12px 32px;
  padding: 0.75rem 2rem;
}

html [class*="btn-outline-"].btn-outline-thin {
  border-width: 1px;
}