/************************
COLORS: GENERAL
*************************/
/*white*/
.bg-light {
  background: var(--light) !important;
}

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

/*dark*/
.bg-dark {
  background: var(--dark) !important;
}

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

/*lighter green accent*/
.bg-accent01 {
  background: var(--accent01) !important;
}

.text-accent01 {
  color: var(--accent01) !important;
}

/* darker green accent*/
.bg-accent02 {
  background: var(--accent02) !important;
}

.text-accent02 {
  color: var(--accent02) !important;
}

/* "limestone" pale warm gray accent*/
.bg-accent03 {
  background: var(--accent03) !important;
}

.text-accent03 {
  color: var(--accent03) !important;
}


/************************
COLORS: GENERAL UI ELEMENTS
*************************/
/*danger*/
.bg-danger,
.text-bg-danger,
.alert-danger {
  background: var(--danger) !important;
  color: var(--light);
}

.alert-danger svg {
  fill: var(--light) !important;
}

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

/*warning*/
.bg-warning,
.text-bg-warning,
.alert-warning {
  background: var(--warning) !important;
  color: var(--dark);
}

.alert-warning svg {
  fill: var(--dark) !important;
}

.text-warning {
  color: var(--warning) !important;
}

/*success*/
.bg-success,
.text-bg-success,
.alert-success {
  background: var(--success) !important;
  color: var(--light);
}

.alert-success svg {
  fill: var(--light) !important;
}

/*info*/
.text-info {
  color: var(--success) !important;
}

.bg-info,
.text-bg-info,
.alert-info {
  background: var(--info) !important;
  border-color: var(--info) !important;
  color: var(--dark);
}

.alert-info svg {
  fill: var(--dark) !important;
}

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

/*active state (used on sales)*/
.bg-active {
  background: var(--active) !important;
}

.text-active {
  color: var(--active) !important;
}

/************************
COLORS: GRAYSCALE
*************************/
.bg-gray {
  background: var(--gray);
}

.text-gray {
  color: var(--gray);
}

/*controls tints*/
.bg-grayscale-tint-35 {
  background: color-mix(in srgb, var(--gray), white 35%) !important;
}

.bg-grayscale-tint-65 {
  background: color-mix(in srgb, var(--gray), white 65%) !important;
}

/*controls shades*/
.bg-grayscale-shade-35 {
  background: color-mix(in srgb, var(--gray) 35%, white) !important;
}

.bg-grayscale-shade-65 {
  background: color-mix(in srgb, var(--gray) 65%, white) !important;
}


/************************
COLORS: PRIMARY BACKGROUNDS
*************************/
/*base color*/
.bg-primary,
.alert-primary {
  background: var(--primary) !important;
}

.alert-primary {
  color: var(--light);
  border: 0;
}

/*controls tints*/
.bg-primary-tint-01,
mark {
  background: color-mix(in srgb, var(--primary), white 35%) !important;
}

.bg-primary-tint-02 {
  background: var(--primary-tint-02) !important;
}

.bg-primary-tint-03 {
  background: var(--primary-tint-03) !important;
}

/*controls shades*/
.bg-primary-shade-01 {
  background: var(--primary-shade-01) !important;
}

.bg-primary-shade-02 {
  background: var(--primary-shade-02) !important;
}


/************************
COLORS: PRIMARY TEXT COLORS
*************************/
.text-primary {
  color: color-mix(in srgb, var(--primary) 100%, white) !important;
}

/*controls tints*/
.text-primary-tint-01 {
  color: color-mix(in srgb, var(--primary), white 35%) !important;
}

.text-primary-tint-02 {
  color: var(--primary-tint-02) !important;
}

.text-primary-tint-03 {
  color: var(--primary-tint-03) !important;
}

/*controls shades*/
.text-primary-shade-01 {
  color: var(--primary-shade-01) !important;
}

.text-primary-shade-02 {
  color: var(--primary-shade-02) !important;
}

/************************
COLORS: SECONDARY BACKGROUNDS
*************************/
/*base color*/
.bg-secondary,
.alert-secondary {
  background: var(--secondary) !important;
}

.alert-secondary {
  color: var(--light);
  border: 0;
}

/*controls tints*/
.bg-secondary-tint-01 {
  background: color-mix(in srgb, var(--secondary), white 35%) !important;
}

.bg-secondary-tint-02 {
  background: color-mix(in srgb, var(--secondary), white 65%) !important;
}

.bg-secondary-tint-03 {
  background: color-mix(in srgb, var(--secondary), white 80%) !important;
}

/*controls shades*/
.bg-secondary-shade-01 {
  background: color-mix(in srgb, var(--secondary), black 35%) !important;
}

.bg-secondary-shade-02 {
  background: color-mix(in srgb, var(--secondary), black 65%) !important;
}

/************************
SECONDARY TEXT COLORS
*************************/
.text-secondary {
  color: color-mix(in srgb, var(--secondary) 100%, white) !important;
}

/*controls tints*/
.text-secondary-tint-01 {
  color: color-mix(in srgb, var(--secondary), white 35%) !important;
}

.text-secondary-tint-02 {
  color: color-mix(in srgb, var(--secondary), white 65%) !important;
}

.text-secondary-tint-03 {
  color: color-mix(in srgb, var(--secondary), white 80%) !important;
}

/*controls shades*/
.text-secondary-shade-01 {
  color: color-mix(in srgb, var(--secondary), black 35%) !important;
}

.text-secondary-shade-02 {
  color: color-mix(in srgb, var(--secondary), black 65%) !important;
}

/************************
COLORS: TERTIARY BACKGROUNDS
*************************/
/*base color*/
.bg-tertiary {
  background: var(--tertiary) !important;
}

.alert-tertiary {
  color: var(--light);
  border: 0;
}

/*controls tints*/
.bg-tertiary-tint-01 {
  background: color-mix(in srgb, var(--tertiary), white 35%) !important;
}

.bg-tertiary-tint-02 {
  background: color-mix(in srgb, var(--tertiary), white 65%) !important;
}

.bg-tertiary-tint-03 {
  background: color-mix(in srgb, var(--tertiary), white 80%) !important;
}

/*controls shades*/
.bg-tertiary-shade-01 {
  background: color-mix(in srgb, var(--tertiary), black 35%) !important;
}

.bg-tertiary-shade-02 {
  background: color-mix(in srgb, var(--tertiary), black 65%) !important;
}

/************************
COLORS: TERTIARY TEXT COLORS
*************************/
.text-tertiary {
  color: color-mix(in srgb, var(--tertiary) 100%, white) !important;
}

/*controls tints*/
.text-tertiary-tint-01 {
  color: color-mix(in srgb, var(--tertiary), white 35%) !important;
}

.text-tertiary-tint-02 {
  color: color-mix(in srgb, var(--tertiary), white 65%) !important;
}

.text-tertiary-tint-03 {
  color: color-mix(in srgb, var(--tertiary), white 80%) !important;
}

/*controls shades*/
.text-tertiary-shade-01 {
  color: color-mix(in srgb, var(--tertiary), black 35%) !important;
}

.text-tertiary-shade-02 {
  color: color-mix(in srgb, var(--tertiary), black 65%) !important;
}

/************************
BUTTON STYLES
*************************/
/*button with default dark color*/
.btn-dark {
  background: var(--dark);
  border-color: var(--dark);
  color: var(--light);
}

.btn-dark:hover {
  background: color-mix(in srgb, var(--dark), white 35%) !important;
  border-color: color-mix(in srgb, var(--dark), white 35%) !important;
  color: var(--light);
}

.btn-dark:active,
.btn-dark:focus {
  background: color-mix(in srgb, var(--dark), white 35%) !important;
  border-color: color-mix(in srgb, var(--dark), white 35%) !important;
  color: var(--light);
}

.btn-dark:focus-visible {
  background: color-mix(in srgb, var(--dark), white 35%) !important;
  border-color: color-mix(in srgb, var(--dark), white 35%) !important;
  box-shadow: 0 0 0 .25rem rgba(0, 0, 0, .25) !important;
  color: var(--light);
}

/*button outline with dark colors*/
.btn-outline-dark {
  background: none;
  color: var(--dark);
  border-color: var(--dark);
}

.btn-outline-dark:hover {
  border-color: var(--dark) !important;
  background: var(--dark);
  color: var(--light);
}

.btn-outline-dark:active,
.btn-outline-dark:focus {
  border-color: var(--dark) !important;
  background: var(--dark);
  color: var(--light);
}

.btn-outline-dark:focus-visible {
  border-color: var(--dark) !important;
  background: var(--dark);
  color: var(--light);
}

/*button outline with light color*/
.btn-outline-light {
  background: none;
  color: var(--light);
  border-color: var(--light);
}

.btn-outline-light:hover {
  border-color: var(--light) !important;
  background: var(--light);
  color: var(--dark);
}

.btn-outline-light:active,
.btn-outline-light:focus {
  border-color: var(--light) !important;
  background: var(--light);
  color: var(--dark);
}

.btn-outline-light:focus-visible {
  border-color: var(--light) !important;
  background: var(--light);
  color: var(--dark);
}


/*button with default light color*/
.btn-light,
.btn-light-wrapper>a {
  background: var(--light);
  border-color: var(--light);
  color: var(--dark);
}

.btn-light:hover,
.btn-light-wrapper>a:hover {
  background: color-mix(in srgb, var(--light), var(--primary) 15%) !important;
  border-color: color-mix(in srgb, var(--light), var(--primary) 15%) !important;
  color: var(--dark);
}

.btn-light:active,
.btn-light:focus,
.btn-light-wrapper>a:active,
.btn-light-wrapper>a:focus {
  background: color-mix(in srgb, var(--light), var(--primary) 15%) !important;
  border-color: color-mix(in srgb, var(--light), var(--primary) 15%) !important;
  color: var(--dark);
}

.btn-light:focus-visible,
.btn-light-wrapper>a:focus-visible {
  background: color-mix(in srgb, var(--light), var(--primary) 35%) !important;
  border-color: color-mix(in srgb, var(--light), var(--primary) 35%) !important;
  color: var(--dark);
}

/*button with primary colors*/
.btn-primary {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--light);
}

.btn-primary:hover {
  background: var(--primary-shade-01) !important;
  border-color: var(--primary-shade-01) !important;
}

.btn-primary:active,
.btn-primary:focus {
  background: var(--primary-shade-01) !important;
  border-color: var(--primary-shade-01) !important;
  color: var(--light);
}

.btn-primary:focus-visible {
  border-color: var(--primary);
  background: var(--primary);
  box-shadow: 0 0 0 .25rem rgba(0, 0, 0, .25) !important;
  color: var(--light);
}

/*button with secondary background colors*/
.btn-secondary {
  background: var(--secondary);
  border-color: var(--secondary);
  color: var(--light);
}

.btn-secondary:hover {
  background: color-mix(in srgb, var(--secondary), black 35%) !important;
  border-color: color-mix(in srgb, var(--secondary), black 35%) !important;
  color: var(--light);
}

.btn-secondary:active,
.btn-secondary:focus {
  background: color-mix(in srgb, var(--secondary), black 35%) !important;
  border-color: var(--secondary) !important;
}

.btn-secondary:focus-visible {
  border-color: var(--secondary);
  background: var(--secondary);
  box-shadow: 0 0 0 .25rem rgba(0, 0, 0, .25) !important;
}

/*button with tertiary background colors*/
.btn-tertiary {
  background: var(--tertiary);
  border-color: var(--tertiary);
  color: var(--light);
}

.btn-tertiary:hover {
  background: color-mix(in srgb, var(--tertiary), black 35%) !important;
  border-color: color-mix(in srgb, var(--tertiary), black 35%) !important;
  color: var(--light);
}

.btn-tertiary:active,
.btn-tertiary:focus {
  background: color-mix(in srgb, var(--tertiary), black 35%) !important;
  border-color: color-mix(in srgb, var(--tertiary), black 35%) !important;
  color: var(--light);
}

.btn-tertiary:focus-visible {
  background: color-mix(in srgb, var(--tertiary), black 35%) !important;
  border-color: color-mix(in srgb, var(--tertiary), black 35%) !important;
  box-shadow: 0 0 0 .25rem rgba(0, 0, 0, .25) !important;
  color: var(--light);
}


/*button outline with primary colors*/
.btn-outline-primary {
  background: none;
  color: var(--primary);
  border-color: var(--primary);
}

.btn-outline-primary:hover {
  background: var(--primary-shade-01) !important;
  border-color: var(--primary-shade-01) !important;
  color: var(--light);
}

.btn-outline-primary :active,
.btn-outline-primary:focus {
  background: var(--primary-shade-01) !important;
  border-color: var(--primary-shade-01) !important;
  color: var(--light);
}

.btn-outline-primary :focus-visible {
  border-color: var(--primary-shade-01) !important;
  background: var(--primary-shade-01) !important;
  box-shadow: 0 0 0 .25rem rgba(0, 0, 0, .25) !important;
  color: var(--light);
}

/*button with secondary background colors*/
.btn-outline-secondary {
  background: none;
  color: var(--secondary);
  border-color: var(--secondary);
}

.btn-outline-secondary:hover {
  background: color-mix(in srgb, var(--secondary), black 35%) !important;
  border-color: color-mix(in srgb, var(--secondary), black 35%) !important;
  color: var(--light);
}

.btn-outline-secondary:active,
.btn-outline-secondary:focus {
  background: color-mix(in srgb, var(--secondary), black 35%) !important;
  border-color: color-mix(in srgb, var(--secondary), black 35%) !important;
  color: var(--light);
}

.btn-outline-secondary:focus-visible {
  border-color: var(--secondary);
  background: var(--secondary);
  box-shadow: 0 0 0 .25rem rgba(0, 0, 0, .25) !important;
  color: var(--light);
}

/*button with tertiary background colors*/
.btn-outline-tertiary {
  background: none;
  color: var(--tertiary);
  border-color: var(--tertiary);
}

.btn-outline-tertiary:hover {
  background: color-mix(in srgb, var(--tertiary), black 35%) !important;
  border-color: color-mix(in srgb, var(--tertiary), black 35%) !important;
  color: var(--light) !important;
}

.btn-outline-tertiary:active,
.btn-outline-tertiary:focus {
  background: color-mix(in srgb, var(--tertiary), black 35%) !important;
  border-color: color-mix(in srgb, var(--tertiary), black 35%) !important;
  color: var(--light);
}

.btn-outline-tertiary:focus-visible {
  background: color-mix(in srgb, var(--tertiary), black 35%) !important;
  border-color: color-mix(in srgb, var(--tertiary), black 35%) !important;
  box-shadow: 0 0 0 .25rem rgba(0, 0, 0, .25) !important;
  color: var(--light);
}


/********************
PATTERN DEMOS - SEMI TRANSPARENT WHITE
*********************/
.bg-pattern-01, .archive-sale-page .bg-pattern-accent-01 {
  /* diamonds */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cg fill='%23ffffff' fill-opacity='0.08'%3E%3Cpolygon fill-rule='evenodd' points='8 4 12 6 8 8 6 12 4 8 0 6 4 4 6 0 8 4'/%3E%3C/g%3E%3C/svg%3E") !important;
}

.bg-pattern-02 {
  /* horse heads */
  background-image: url("../img/svg-patterns/pattern-02.svg") !important;
  background-size: 60px !important;
}

.bg-pattern-03 {
  /*circle diamonds, louis v style*/
  background-image: url("data:image/svg+xml,%3Csvg width='30' height='30' viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M15 0C6.716 0 0 6.716 0 15c8.284 0 15-6.716 15-15zM0 15c0 8.284 6.716 15 15 15 0-8.284-6.716-15-15-15zm30 0c0-8.284-6.716-15-15-15 0 8.284 6.716 15 15 15zm0 0c0 8.284-6.716 15-15 15 0-8.284 6.716-15 15-15z' fill='%23ffffff' fill-opacity='0.08' fill-rule='evenodd'/%3E%3C/svg%3E") !important;
}

.bg-pattern-04 {
  /*vertical stripe*/
  background-image: url("data:image/svg+xml,%3Csvg width='40' height='1' viewBox='0 0 40 1' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0h20v1H0z' fill='%23ffffff' fill-opacity='0.08' fill-rule='evenodd'/%3E%3C/svg%3E") !important;
}

.bg-pattern-05 {
  /*gavels*/
  background-image: url("../img/svg-patterns/pattern-05.svg") !important;
  background-size: 60px !important;
}

.bg-pattern-06 {
  /* scalloped boxes */
  background-image: url("data:image/svg+xml,%3Csvg width='84' height='84' viewBox='0 0 84 84' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.08'%3E%3Cpath d='M84 23c-4.417 0-8-3.584-8-7.998V8h-7.002C64.58 8 61 4.42 61 0H23c0 4.417-3.584 8-7.998 8H8v7.002C8 19.42 4.42 23 0 23v38c4.417 0 8 3.584 8 7.998V76h7.002C19.42 76 23 79.58 23 84h38c0-4.417 3.584-8 7.998-8H76v-7.002C76 64.58 79.58 61 84 61V23zM59.05 83H43V66.95c5.054-.5 9-4.764 9-9.948V52h5.002c5.18 0 9.446-3.947 9.95-9H83v16.05c-5.054.5-9 4.764-9 9.948V74h-5.002c-5.18 0-9.446 3.947-9.95 9zm-34.1 0H41V66.95c-5.053-.502-9-4.768-9-9.948V52h-5.002c-5.184 0-9.447-3.946-9.95-9H1v16.05c5.053.502 9 4.768 9 9.948V74h5.002c5.184 0 9.447 3.946 9.95 9zm0-82H41v16.05c-5.054.5-9 4.764-9 9.948V32h-5.002c-5.18 0-9.446 3.947-9.95 9H1V24.95c5.054-.5 9-4.764 9-9.948V10h5.002c5.18 0 9.446-3.947 9.95-9zm34.1 0H43v16.05c5.053.502 9 4.768 9 9.948V32h5.002c5.184 0 9.447 3.946 9.95 9H83V24.95c-5.053-.502-9-4.768-9-9.948V10h-5.002c-5.184 0-9.447-3.946-9.95-9zM50 50v7.002C50 61.42 46.42 65 42 65c-4.417 0-8-3.584-8-7.998V50h-7.002C22.58 50 19 46.42 19 42c0-4.417 3.584-8 7.998-8H34v-7.002C34 22.58 37.58 19 42 19c4.417 0 8 3.584 8 7.998V34h7.002C61.42 34 65 37.58 65 42c0 4.417-3.584 8-7.998 8H50z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") !important;
}

/********************
PATTERN DEMOS - ACCENT 02, BRIGHT KEENELAND GREEN - Updated 1/28
*********************/
.bg-pattern-accent-01 {
  /* diamonds */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cg fill='%23197D5C' fill-opacity='0.5'%3E%3Cpolygon fill-rule='evenodd' points='8 4 12 6 8 8 6 12 4 8 0 6 4 4 6 0 8 4'/%3E%3C/g%3E%3C/svg%3E") !important;
}

.bg-pattern-accent-02 {
  /* horse heads */
  background-image: url("../img/svg-patterns/pattern-02-accent.svg") !important;
  background-size: 100px !important;
}

.bg-pattern-accent-03 {
  /*circle diamonds, louis v style*/
  background-image: url("data:image/svg+xml,%3Csvg width='30' height='30' viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M15 0C6.716 0 0 6.716 0 15c8.284 0 15-6.716 15-15zM0 15c0 8.284 6.716 15 15 15 0-8.284-6.716-15-15-15zm30 0c0-8.284-6.716-15-15-15 0 8.284 6.716 15 15 15zm0 0c0 8.284-6.716 15-15 15 0-8.284 6.716-15 15-15z' fill='%23197D5C' fill-opacity='0.5' fill-rule='evenodd'/%3E%3C/svg%3E") !important;
}

.bg-pattern-accent-04 {
  /*vertical stripe*/
  background-image: url("data:image/svg+xml,%3Csvg width='40' height='1' viewBox='0 0 40 1' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0h20v1H0z' fill='%23197D5C' fill-opacity='0.5' fill-rule='evenodd'/%3E%3C/svg%3E") !important;
}

.bg-pattern-accent-05 {
  /*gavels*/
  background-image: url("../img/svg-patterns/pattern-05-accent.svg") !important;
  background-size: 60px !important;
}

.bg-pattern-accent-06 {
  /* scalloped boxes */
  background-image: url("data:image/svg+xml,%3Csvg width='84' height='84' viewBox='0 0 84 84' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23197D5C' fill-opacity='0.5'%3E%3Cpath d='M84 23c-4.417 0-8-3.584-8-7.998V8h-7.002C64.58 8 61 4.42 61 0H23c0 4.417-3.584 8-7.998 8H8v7.002C8 19.42 4.42 23 0 23v38c4.417 0 8 3.584 8 7.998V76h7.002C19.42 76 23 79.58 23 84h38c0-4.417 3.584-8 7.998-8H76v-7.002C76 64.58 79.58 61 84 61V23zM59.05 83H43V66.95c5.054-.5 9-4.764 9-9.948V52h5.002c5.18 0 9.446-3.947 9.95-9H83v16.05c-5.054.5-9 4.764-9 9.948V74h-5.002c-5.18 0-9.446 3.947-9.95 9zm-34.1 0H41V66.95c-5.053-.502-9-4.768-9-9.948V52h-5.002c-5.184 0-9.447-3.946-9.95-9H1v16.05c5.053.502 9 4.768 9 9.948V74h5.002c5.184 0 9.447 3.946 9.95 9zm0-82H41v16.05c-5.054.5-9 4.764-9 9.948V32h-5.002c-5.18 0-9.446 3.947-9.95 9H1V24.95c5.054-.5 9-4.764 9-9.948V10h5.002c5.18 0 9.446-3.947 9.95-9zm34.1 0H43v16.05c5.053.502 9 4.768 9 9.948V32h5.002c5.184 0 9.447 3.946 9.95 9H83V24.95c-5.053-.502-9-4.768-9-9.948V10h-5.002c-5.184 0-9.447-3.946-9.95-9zM50 50v7.002C50 61.42 46.42 65 42 65c-4.417 0-8-3.584-8-7.998V50h-7.002C22.58 50 19 46.42 19 42c0-4.417 3.584-8 7.998-8H34v-7.002C34 22.58 37.58 19 42 19c4.417 0 8 3.584 8 7.998V34h7.002C61.42 34 65 37.58 65 42c0 4.417-3.584 8-7.998 8H50z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") !important;
}