// ================================
// [COLOR_TOKEN] color-primary-01

@mixin color-primary-01-background {
  background-color: var( --color-primary-01-color , rgba(42,73,1,1) );
}

@mixin color-primary-01-text {
  color: var( --color-primary-01-color , rgba(42,73,1,1) );
}

@mixin color-primary-01-border {
  border-color: var( --color-primary-01-color , rgba(42,73,1,1) );
}

@mixin color-primary-01-hover-text {
  &:hover { color: var( --color-primary-01-color , rgba(42,73,1,1) ); }
}

@mixin color-primary-01-hover-text {
  &:hover { background-color: var( --color-primary-01-color , rgba(42,73,1,1) ); }
}

// ================================
// [COLOR_TOKEN] color-primary-02

@mixin color-primary-02-background {
  background-color: var( --color-primary-02-color , rgba(58,99,3,1) );
}

@mixin color-primary-02-text {
  color: var( --color-primary-02-color , rgba(58,99,3,1) );
}

@mixin color-primary-02-border {
  border-color: var( --color-primary-02-color , rgba(58,99,3,1) );
}

@mixin color-primary-02-hover-text {
  &:hover { color: var( --color-primary-02-color , rgba(58,99,3,1) ); }
}

@mixin color-primary-02-hover-text {
  &:hover { background-color: var( --color-primary-02-color , rgba(58,99,3,1) ); }
}

// ================================
// [COLOR_TOKEN] color-primary-darkest

@mixin color-primary-darkest-background {
  background-color: var( --color-primary-darkest-color , rgba(58,99,3,1) );
}

@mixin color-primary-darkest-text {
  color: var( --color-primary-darkest-color , rgba(58,99,3,1) );
}

@mixin color-primary-darkest-border {
  border-color: var( --color-primary-darkest-color , rgba(58,99,3,1) );
}

@mixin color-primary-darkest-hover-text {
  &:hover { color: var( --color-primary-darkest-color , rgba(58,99,3,1) ); }
}

@mixin color-primary-darkest-hover-text {
  &:hover { background-color: var( --color-primary-darkest-color , rgba(58,99,3,1) ); }
}

// ================================
// [COLOR_TOKEN] color-primary-03

@mixin color-primary-03-background {
  background-color: var( --color-primary-03-color , rgba(72,121,6,1) );
}

@mixin color-primary-03-text {
  color: var( --color-primary-03-color , rgba(72,121,6,1) );
}

@mixin color-primary-03-border {
  border-color: var( --color-primary-03-color , rgba(72,121,6,1) );
}

@mixin color-primary-03-hover-text {
  &:hover { color: var( --color-primary-03-color , rgba(72,121,6,1) ); }
}

@mixin color-primary-03-hover-text {
  &:hover { background-color: var( --color-primary-03-color , rgba(72,121,6,1) ); }
}

// ================================
// [COLOR_TOKEN] color-primary-darker

@mixin color-primary-darker-background {
  background-color: var( --color-primary-darker-color , rgba(72,121,6,1) );
}

@mixin color-primary-darker-text {
  color: var( --color-primary-darker-color , rgba(72,121,6,1) );
}

@mixin color-primary-darker-border {
  border-color: var( --color-primary-darker-color , rgba(72,121,6,1) );
}

@mixin color-primary-darker-hover-text {
  &:hover { color: var( --color-primary-darker-color , rgba(72,121,6,1) ); }
}

@mixin color-primary-darker-hover-text {
  &:hover { background-color: var( --color-primary-darker-color , rgba(72,121,6,1) ); }
}

// ================================
// [COLOR_TOKEN] color-primary-04

@mixin color-primary-04-background {
  background-color: var( --color-primary-04-color , rgba(86,144,8,1) );
}

@mixin color-primary-04-text {
  color: var( --color-primary-04-color , rgba(86,144,8,1) );
}

@mixin color-primary-04-border {
  border-color: var( --color-primary-04-color , rgba(86,144,8,1) );
}

@mixin color-primary-04-hover-text {
  &:hover { color: var( --color-primary-04-color , rgba(86,144,8,1) ); }
}

@mixin color-primary-04-hover-text {
  &:hover { background-color: var( --color-primary-04-color , rgba(86,144,8,1) ); }
}

// ================================
// [COLOR_TOKEN] color-primary-dark

@mixin color-primary-dark-background {
  background-color: var( --color-primary-dark-color , rgba(86,144,8,1) );
}

@mixin color-primary-dark-text {
  color: var( --color-primary-dark-color , rgba(86,144,8,1) );
}

@mixin color-primary-dark-border {
  border-color: var( --color-primary-dark-color , rgba(86,144,8,1) );
}

@mixin color-primary-dark-hover-text {
  &:hover { color: var( --color-primary-dark-color , rgba(86,144,8,1) ); }
}

@mixin color-primary-dark-hover-text {
  &:hover { background-color: var( --color-primary-dark-color , rgba(86,144,8,1) ); }
}

// ================================
// [COLOR_TOKEN] color-primary-05

@mixin color-primary-05-background {
  background-color: var( --color-primary-05-color , rgba(99,166,10,1) );
}

@mixin color-primary-05-text {
  color: var( --color-primary-05-color , rgba(99,166,10,1) );
}

@mixin color-primary-05-border {
  border-color: var( --color-primary-05-color , rgba(99,166,10,1) );
}

@mixin color-primary-05-hover-text {
  &:hover { color: var( --color-primary-05-color , rgba(99,166,10,1) ); }
}

@mixin color-primary-05-hover-text {
  &:hover { background-color: var( --color-primary-05-color , rgba(99,166,10,1) ); }
}

// ================================
// [COLOR_TOKEN] color-primary

@mixin color-primary-background {
  background-color: var( --color-primary-color , rgba(99,166,10,1) );
}

@mixin color-primary-text {
  color: var( --color-primary-color , rgba(99,166,10,1) );
}

@mixin color-primary-border {
  border-color: var( --color-primary-color , rgba(99,166,10,1) );
}

@mixin color-primary-hover-text {
  &:hover { color: var( --color-primary-color , rgba(99,166,10,1) ); }
}

@mixin color-primary-hover-text {
  &:hover { background-color: var( --color-primary-color , rgba(99,166,10,1) ); }
}

// ================================
// [COLOR_TOKEN] color-primary-06

@mixin color-primary-06-background {
  background-color: var( --color-primary-06-color , rgba(126,182,51,1) );
}

@mixin color-primary-06-text {
  color: var( --color-primary-06-color , rgba(126,182,51,1) );
}

@mixin color-primary-06-border {
  border-color: var( --color-primary-06-color , rgba(126,182,51,1) );
}

@mixin color-primary-06-hover-text {
  &:hover { color: var( --color-primary-06-color , rgba(126,182,51,1) ); }
}

@mixin color-primary-06-hover-text {
  &:hover { background-color: var( --color-primary-06-color , rgba(126,182,51,1) ); }
}

// ================================
// [COLOR_TOKEN] color-primary-light

@mixin color-primary-light-background {
  background-color: var( --color-primary-light-color , rgba(126,182,51,1) );
}

@mixin color-primary-light-text {
  color: var( --color-primary-light-color , rgba(126,182,51,1) );
}

@mixin color-primary-light-border {
  border-color: var( --color-primary-light-color , rgba(126,182,51,1) );
}

@mixin color-primary-light-hover-text {
  &:hover { color: var( --color-primary-light-color , rgba(126,182,51,1) ); }
}

@mixin color-primary-light-hover-text {
  &:hover { background-color: var( --color-primary-light-color , rgba(126,182,51,1) ); }
}

// ================================
// [COLOR_TOKEN] color-primary-07

@mixin color-primary-07-background {
  background-color: var( --color-primary-07-color , rgba(158,201,101,1) );
}

@mixin color-primary-07-text {
  color: var( --color-primary-07-color , rgba(158,201,101,1) );
}

@mixin color-primary-07-border {
  border-color: var( --color-primary-07-color , rgba(158,201,101,1) );
}

@mixin color-primary-07-hover-text {
  &:hover { color: var( --color-primary-07-color , rgba(158,201,101,1) ); }
}

@mixin color-primary-07-hover-text {
  &:hover { background-color: var( --color-primary-07-color , rgba(158,201,101,1) ); }
}

// ================================
// [COLOR_TOKEN] color-primary-lighter

@mixin color-primary-lighter-background {
  background-color: var( --color-primary-lighter-color , rgba(158,201,101,1) );
}

@mixin color-primary-lighter-text {
  color: var( --color-primary-lighter-color , rgba(158,201,101,1) );
}

@mixin color-primary-lighter-border {
  border-color: var( --color-primary-lighter-color , rgba(158,201,101,1) );
}

@mixin color-primary-lighter-hover-text {
  &:hover { color: var( --color-primary-lighter-color , rgba(158,201,101,1) ); }
}

@mixin color-primary-lighter-hover-text {
  &:hover { background-color: var( --color-primary-lighter-color , rgba(158,201,101,1) ); }
}

// ================================
// [COLOR_TOKEN] color-primary-08

@mixin color-primary-08-background {
  background-color: var( --color-primary-08-color , rgba(187,218,146,1) );
}

@mixin color-primary-08-text {
  color: var( --color-primary-08-color , rgba(187,218,146,1) );
}

@mixin color-primary-08-border {
  border-color: var( --color-primary-08-color , rgba(187,218,146,1) );
}

@mixin color-primary-08-hover-text {
  &:hover { color: var( --color-primary-08-color , rgba(187,218,146,1) ); }
}

@mixin color-primary-08-hover-text {
  &:hover { background-color: var( --color-primary-08-color , rgba(187,218,146,1) ); }
}

// ================================
// [COLOR_TOKEN] color-primary-lightest

@mixin color-primary-lightest-background {
  background-color: var( --color-primary-lightest-color , rgba(187,218,146,1) );
}

@mixin color-primary-lightest-text {
  color: var( --color-primary-lightest-color , rgba(187,218,146,1) );
}

@mixin color-primary-lightest-border {
  border-color: var( --color-primary-lightest-color , rgba(187,218,146,1) );
}

@mixin color-primary-lightest-hover-text {
  &:hover { color: var( --color-primary-lightest-color , rgba(187,218,146,1) ); }
}

@mixin color-primary-lightest-hover-text {
  &:hover { background-color: var( --color-primary-lightest-color , rgba(187,218,146,1) ); }
}

// ================================
// [COLOR_TOKEN] color-primary-09

@mixin color-primary-09-background {
  background-color: var( --color-primary-09-color , rgba(213,233,187,1) );
}

@mixin color-primary-09-text {
  color: var( --color-primary-09-color , rgba(213,233,187,1) );
}

@mixin color-primary-09-border {
  border-color: var( --color-primary-09-color , rgba(213,233,187,1) );
}

@mixin color-primary-09-hover-text {
  &:hover { color: var( --color-primary-09-color , rgba(213,233,187,1) ); }
}

@mixin color-primary-09-hover-text {
  &:hover { background-color: var( --color-primary-09-color , rgba(213,233,187,1) ); }
}

// ================================
// [COLOR_TOKEN] color-primary-095

@mixin color-primary-095-background {
  background-color: var( --color-primary-095-color , rgba(251,255,246,1) );
}

@mixin color-primary-095-text {
  color: var( --color-primary-095-color , rgba(251,255,246,1) );
}

@mixin color-primary-095-border {
  border-color: var( --color-primary-095-color , rgba(251,255,246,1) );
}

@mixin color-primary-095-hover-text {
  &:hover { color: var( --color-primary-095-color , rgba(251,255,246,1) ); }
}

@mixin color-primary-095-hover-text {
  &:hover { background-color: var( --color-primary-095-color , rgba(251,255,246,1) ); }
}

// ================================
// [COLOR_TOKEN] color-primary-text

@mixin color-primary-text-background {
  background-color: var( --color-primary-text-color , rgba(35,61,0,1) );
}

@mixin color-primary-text-text {
  color: var( --color-primary-text-color , rgba(35,61,0,1) );
}

@mixin color-primary-text-border {
  border-color: var( --color-primary-text-color , rgba(35,61,0,1) );
}

@mixin color-primary-text-hover-text {
  &:hover { color: var( --color-primary-text-color , rgba(35,61,0,1) ); }
}

@mixin color-primary-text-hover-text {
  &:hover { background-color: var( --color-primary-text-color , rgba(35,61,0,1) ); }
}

// ================================
// [COLOR_TOKEN] color-primary-text-light

@mixin color-primary-text-light-background {
  background-color: var( --color-primary-text-light-color , rgba(58,99,3,1) );
}

@mixin color-primary-text-light-text {
  color: var( --color-primary-text-light-color , rgba(58,99,3,1) );
}

@mixin color-primary-text-light-border {
  border-color: var( --color-primary-text-light-color , rgba(58,99,3,1) );
}

@mixin color-primary-text-light-hover-text {
  &:hover { color: var( --color-primary-text-light-color , rgba(58,99,3,1) ); }
}

@mixin color-primary-text-light-hover-text {
  &:hover { background-color: var( --color-primary-text-light-color , rgba(58,99,3,1) ); }
}

// ================================
// [COLOR_TOKEN] color-primary-text-lighter

@mixin color-primary-text-lighter-background {
  background-color: var( --color-primary-text-lighter-color , rgba(64,109,3,1) );
}

@mixin color-primary-text-lighter-text {
  color: var( --color-primary-text-lighter-color , rgba(64,109,3,1) );
}

@mixin color-primary-text-lighter-border {
  border-color: var( --color-primary-text-lighter-color , rgba(64,109,3,1) );
}

@mixin color-primary-text-lighter-hover-text {
  &:hover { color: var( --color-primary-text-lighter-color , rgba(64,109,3,1) ); }
}

@mixin color-primary-text-lighter-hover-text {
  &:hover { background-color: var( --color-primary-text-lighter-color , rgba(64,109,3,1) ); }
}

// ================================
// [COLOR_TOKEN] color-primary-text-lightest

@mixin color-primary-text-lightest-background {
  background-color: var( --color-primary-text-lightest-color , rgba(86,144,8,1) );
}

@mixin color-primary-text-lightest-text {
  color: var( --color-primary-text-lightest-color , rgba(86,144,8,1) );
}

@mixin color-primary-text-lightest-border {
  border-color: var( --color-primary-text-lightest-color , rgba(86,144,8,1) );
}

@mixin color-primary-text-lightest-hover-text {
  &:hover { color: var( --color-primary-text-lightest-color , rgba(86,144,8,1) ); }
}

@mixin color-primary-text-lightest-hover-text {
  &:hover { background-color: var( --color-primary-text-lightest-color , rgba(86,144,8,1) ); }
}

// ================================
// [COLOR_TOKEN] color-primary-text-inv

@mixin color-primary-text-inv-background {
  background-color: var( --color-primary-text-inv-color , rgba(245,252,236,1) );
}

@mixin color-primary-text-inv-text {
  color: var( --color-primary-text-inv-color , rgba(245,252,236,1) );
}

@mixin color-primary-text-inv-border {
  border-color: var( --color-primary-text-inv-color , rgba(245,252,236,1) );
}

@mixin color-primary-text-inv-hover-text {
  &:hover { color: var( --color-primary-text-inv-color , rgba(245,252,236,1) ); }
}

@mixin color-primary-text-inv-hover-text {
  &:hover { background-color: var( --color-primary-text-inv-color , rgba(245,252,236,1) ); }
}

// ================================
// [COLOR_TOKEN] color-primary-text-inv-dark

@mixin color-primary-text-inv-dark-background {
  background-color: var( --color-primary-text-inv-dark-color , rgba(223,239,203,1) );
}

@mixin color-primary-text-inv-dark-text {
  color: var( --color-primary-text-inv-dark-color , rgba(223,239,203,1) );
}

@mixin color-primary-text-inv-dark-border {
  border-color: var( --color-primary-text-inv-dark-color , rgba(223,239,203,1) );
}

@mixin color-primary-text-inv-dark-hover-text {
  &:hover { color: var( --color-primary-text-inv-dark-color , rgba(223,239,203,1) ); }
}

@mixin color-primary-text-inv-dark-hover-text {
  &:hover { background-color: var( --color-primary-text-inv-dark-color , rgba(223,239,203,1) ); }
}

// ================================
// [COLOR_TOKEN] color-primary-text-inv-darker

@mixin color-primary-text-inv-darker-background {
  background-color: var( --color-primary-text-inv-darker-color , rgba(201,227,166,1) );
}

@mixin color-primary-text-inv-darker-text {
  color: var( --color-primary-text-inv-darker-color , rgba(201,227,166,1) );
}

@mixin color-primary-text-inv-darker-border {
  border-color: var( --color-primary-text-inv-darker-color , rgba(201,227,166,1) );
}

@mixin color-primary-text-inv-darker-hover-text {
  &:hover { color: var( --color-primary-text-inv-darker-color , rgba(201,227,166,1) ); }
}

@mixin color-primary-text-inv-darker-hover-text {
  &:hover { background-color: var( --color-primary-text-inv-darker-color , rgba(201,227,166,1) ); }
}

// ================================
// [COLOR_TOKEN] color-primary-text-inv-darkest

@mixin color-primary-text-inv-darkest-background {
  background-color: var( --color-primary-text-inv-darkest-color , rgba(180,216,133,1) );
}

@mixin color-primary-text-inv-darkest-text {
  color: var( --color-primary-text-inv-darkest-color , rgba(180,216,133,1) );
}

@mixin color-primary-text-inv-darkest-border {
  border-color: var( --color-primary-text-inv-darkest-color , rgba(180,216,133,1) );
}

@mixin color-primary-text-inv-darkest-hover-text {
  &:hover { color: var( --color-primary-text-inv-darkest-color , rgba(180,216,133,1) ); }
}

@mixin color-primary-text-inv-darkest-hover-text {
  &:hover { background-color: var( --color-primary-text-inv-darkest-color , rgba(180,216,133,1) ); }
}

// ================================
// [COLOR_TOKEN] color-grey-00

@mixin color-grey-00-background {
  background-color: var( --color-grey-00-color , rgba(0,0,0,1) );
}

@mixin color-grey-00-text {
  color: var( --color-grey-00-color , rgba(0,0,0,1) );
}

@mixin color-grey-00-border {
  border-color: var( --color-grey-00-color , rgba(0,0,0,1) );
}

@mixin color-grey-00-hover-text {
  &:hover { color: var( --color-grey-00-color , rgba(0,0,0,1) ); }
}

@mixin color-grey-00-hover-text {
  &:hover { background-color: var( --color-grey-00-color , rgba(0,0,0,1) ); }
}

// ================================
// [COLOR_TOKEN] color-grey-01

@mixin color-grey-01-background {
  background-color: var( --color-grey-01-color , rgba(35,35,35,1) );
}

@mixin color-grey-01-text {
  color: var( --color-grey-01-color , rgba(35,35,35,1) );
}

@mixin color-grey-01-border {
  border-color: var( --color-grey-01-color , rgba(35,35,35,1) );
}

@mixin color-grey-01-hover-text {
  &:hover { color: var( --color-grey-01-color , rgba(35,35,35,1) ); }
}

@mixin color-grey-01-hover-text {
  &:hover { background-color: var( --color-grey-01-color , rgba(35,35,35,1) ); }
}

// ================================
// [COLOR_TOKEN] color-grey-02

@mixin color-grey-02-background {
  background-color: var( --color-grey-02-color , rgba(57,57,57,1) );
}

@mixin color-grey-02-text {
  color: var( --color-grey-02-color , rgba(57,57,57,1) );
}

@mixin color-grey-02-border {
  border-color: var( --color-grey-02-color , rgba(57,57,57,1) );
}

@mixin color-grey-02-hover-text {
  &:hover { color: var( --color-grey-02-color , rgba(57,57,57,1) ); }
}

@mixin color-grey-02-hover-text {
  &:hover { background-color: var( --color-grey-02-color , rgba(57,57,57,1) ); }
}

// ================================
// [COLOR_TOKEN] color-grey-darkest

@mixin color-grey-darkest-background {
  background-color: var( --color-grey-darkest-color , rgba(57,57,57,1) );
}

@mixin color-grey-darkest-text {
  color: var( --color-grey-darkest-color , rgba(57,57,57,1) );
}

@mixin color-grey-darkest-border {
  border-color: var( --color-grey-darkest-color , rgba(57,57,57,1) );
}

@mixin color-grey-darkest-hover-text {
  &:hover { color: var( --color-grey-darkest-color , rgba(57,57,57,1) ); }
}

@mixin color-grey-darkest-hover-text {
  &:hover { background-color: var( --color-grey-darkest-color , rgba(57,57,57,1) ); }
}

// ================================
// [COLOR_TOKEN] color-grey-03

@mixin color-grey-03-background {
  background-color: var( --color-grey-03-color , rgba(82,82,82,1) );
}

@mixin color-grey-03-text {
  color: var( --color-grey-03-color , rgba(82,82,82,1) );
}

@mixin color-grey-03-border {
  border-color: var( --color-grey-03-color , rgba(82,82,82,1) );
}

@mixin color-grey-03-hover-text {
  &:hover { color: var( --color-grey-03-color , rgba(82,82,82,1) ); }
}

@mixin color-grey-03-hover-text {
  &:hover { background-color: var( --color-grey-03-color , rgba(82,82,82,1) ); }
}

// ================================
// [COLOR_TOKEN] color-grey-darker

@mixin color-grey-darker-background {
  background-color: var( --color-grey-darker-color , rgba(82,82,82,1) );
}

@mixin color-grey-darker-text {
  color: var( --color-grey-darker-color , rgba(82,82,82,1) );
}

@mixin color-grey-darker-border {
  border-color: var( --color-grey-darker-color , rgba(82,82,82,1) );
}

@mixin color-grey-darker-hover-text {
  &:hover { color: var( --color-grey-darker-color , rgba(82,82,82,1) ); }
}

@mixin color-grey-darker-hover-text {
  &:hover { background-color: var( --color-grey-darker-color , rgba(82,82,82,1) ); }
}

// ================================
// [COLOR_TOKEN] color-grey-04

@mixin color-grey-04-background {
  background-color: var( --color-grey-04-color , rgba(104,104,104,1) );
}

@mixin color-grey-04-text {
  color: var( --color-grey-04-color , rgba(104,104,104,1) );
}

@mixin color-grey-04-border {
  border-color: var( --color-grey-04-color , rgba(104,104,104,1) );
}

@mixin color-grey-04-hover-text {
  &:hover { color: var( --color-grey-04-color , rgba(104,104,104,1) ); }
}

@mixin color-grey-04-hover-text {
  &:hover { background-color: var( --color-grey-04-color , rgba(104,104,104,1) ); }
}

// ================================
// [COLOR_TOKEN] color-grey-dark

@mixin color-grey-dark-background {
  background-color: var( --color-grey-dark-color , rgba(104,104,104,1) );
}

@mixin color-grey-dark-text {
  color: var( --color-grey-dark-color , rgba(104,104,104,1) );
}

@mixin color-grey-dark-border {
  border-color: var( --color-grey-dark-color , rgba(104,104,104,1) );
}

@mixin color-grey-dark-hover-text {
  &:hover { color: var( --color-grey-dark-color , rgba(104,104,104,1) ); }
}

@mixin color-grey-dark-hover-text {
  &:hover { background-color: var( --color-grey-dark-color , rgba(104,104,104,1) ); }
}

// ================================
// [COLOR_TOKEN] color-grey-05

@mixin color-grey-05-background {
  background-color: var( --color-grey-05-color , rgba(127,127,127,1) );
}

@mixin color-grey-05-text {
  color: var( --color-grey-05-color , rgba(127,127,127,1) );
}

@mixin color-grey-05-border {
  border-color: var( --color-grey-05-color , rgba(127,127,127,1) );
}

@mixin color-grey-05-hover-text {
  &:hover { color: var( --color-grey-05-color , rgba(127,127,127,1) ); }
}

@mixin color-grey-05-hover-text {
  &:hover { background-color: var( --color-grey-05-color , rgba(127,127,127,1) ); }
}

// ================================
// [COLOR_TOKEN] color-grey

@mixin color-grey-background {
  background-color: var( --color-grey-color , rgba(127,127,127,1) );
}

@mixin color-grey-text {
  color: var( --color-grey-color , rgba(127,127,127,1) );
}

@mixin color-grey-border {
  border-color: var( --color-grey-color , rgba(127,127,127,1) );
}

@mixin color-grey-hover-text {
  &:hover { color: var( --color-grey-color , rgba(127,127,127,1) ); }
}

@mixin color-grey-hover-text {
  &:hover { background-color: var( --color-grey-color , rgba(127,127,127,1) ); }
}

// ================================
// [COLOR_TOKEN] color-grey-06

@mixin color-grey-06-background {
  background-color: var( --color-grey-06-color , rgba(149,149,149,1) );
}

@mixin color-grey-06-text {
  color: var( --color-grey-06-color , rgba(149,149,149,1) );
}

@mixin color-grey-06-border {
  border-color: var( --color-grey-06-color , rgba(149,149,149,1) );
}

@mixin color-grey-06-hover-text {
  &:hover { color: var( --color-grey-06-color , rgba(149,149,149,1) ); }
}

@mixin color-grey-06-hover-text {
  &:hover { background-color: var( --color-grey-06-color , rgba(149,149,149,1) ); }
}

// ================================
// [COLOR_TOKEN] color-grey-light

@mixin color-grey-light-background {
  background-color: var( --color-grey-light-color , rgba(149,149,149,1) );
}

@mixin color-grey-light-text {
  color: var( --color-grey-light-color , rgba(149,149,149,1) );
}

@mixin color-grey-light-border {
  border-color: var( --color-grey-light-color , rgba(149,149,149,1) );
}

@mixin color-grey-light-hover-text {
  &:hover { color: var( --color-grey-light-color , rgba(149,149,149,1) ); }
}

@mixin color-grey-light-hover-text {
  &:hover { background-color: var( --color-grey-light-color , rgba(149,149,149,1) ); }
}

// ================================
// [COLOR_TOKEN] color-grey-07

@mixin color-grey-07-background {
  background-color: var( --color-grey-07-color , rgba(173,173,173,1) );
}

@mixin color-grey-07-text {
  color: var( --color-grey-07-color , rgba(173,173,173,1) );
}

@mixin color-grey-07-border {
  border-color: var( --color-grey-07-color , rgba(173,173,173,1) );
}

@mixin color-grey-07-hover-text {
  &:hover { color: var( --color-grey-07-color , rgba(173,173,173,1) ); }
}

@mixin color-grey-07-hover-text {
  &:hover { background-color: var( --color-grey-07-color , rgba(173,173,173,1) ); }
}

// ================================
// [COLOR_TOKEN] color-grey-lighter

@mixin color-grey-lighter-background {
  background-color: var( --color-grey-lighter-color , rgba(173,173,173,1) );
}

@mixin color-grey-lighter-text {
  color: var( --color-grey-lighter-color , rgba(173,173,173,1) );
}

@mixin color-grey-lighter-border {
  border-color: var( --color-grey-lighter-color , rgba(173,173,173,1) );
}

@mixin color-grey-lighter-hover-text {
  &:hover { color: var( --color-grey-lighter-color , rgba(173,173,173,1) ); }
}

@mixin color-grey-lighter-hover-text {
  &:hover { background-color: var( --color-grey-lighter-color , rgba(173,173,173,1) ); }
}

// ================================
// [COLOR_TOKEN] color-grey-08

@mixin color-grey-08-background {
  background-color: var( --color-grey-08-color , rgba(196,196,196,1) );
}

@mixin color-grey-08-text {
  color: var( --color-grey-08-color , rgba(196,196,196,1) );
}

@mixin color-grey-08-border {
  border-color: var( --color-grey-08-color , rgba(196,196,196,1) );
}

@mixin color-grey-08-hover-text {
  &:hover { color: var( --color-grey-08-color , rgba(196,196,196,1) ); }
}

@mixin color-grey-08-hover-text {
  &:hover { background-color: var( --color-grey-08-color , rgba(196,196,196,1) ); }
}

// ================================
// [COLOR_TOKEN] color-grey-lightest

@mixin color-grey-lightest-background {
  background-color: var( --color-grey-lightest-color , rgba(196,196,196,1) );
}

@mixin color-grey-lightest-text {
  color: var( --color-grey-lightest-color , rgba(196,196,196,1) );
}

@mixin color-grey-lightest-border {
  border-color: var( --color-grey-lightest-color , rgba(196,196,196,1) );
}

@mixin color-grey-lightest-hover-text {
  &:hover { color: var( --color-grey-lightest-color , rgba(196,196,196,1) ); }
}

@mixin color-grey-lightest-hover-text {
  &:hover { background-color: var( --color-grey-lightest-color , rgba(196,196,196,1) ); }
}

// ================================
// [COLOR_TOKEN] color-grey-09

@mixin color-grey-09-background {
  background-color: var( --color-grey-09-color , rgba(219,219,219,1) );
}

@mixin color-grey-09-text {
  color: var( --color-grey-09-color , rgba(219,219,219,1) );
}

@mixin color-grey-09-border {
  border-color: var( --color-grey-09-color , rgba(219,219,219,1) );
}

@mixin color-grey-09-hover-text {
  &:hover { color: var( --color-grey-09-color , rgba(219,219,219,1) ); }
}

@mixin color-grey-09-hover-text {
  &:hover { background-color: var( --color-grey-09-color , rgba(219,219,219,1) ); }
}

// ================================
// [COLOR_TOKEN] color-grey-092

@mixin color-grey-092-background {
  background-color: var( --color-grey-092-color , rgba(235,235,235,1) );
}

@mixin color-grey-092-text {
  color: var( --color-grey-092-color , rgba(235,235,235,1) );
}

@mixin color-grey-092-border {
  border-color: var( --color-grey-092-color , rgba(235,235,235,1) );
}

@mixin color-grey-092-hover-text {
  &:hover { color: var( --color-grey-092-color , rgba(235,235,235,1) ); }
}

@mixin color-grey-092-hover-text {
  &:hover { background-color: var( --color-grey-092-color , rgba(235,235,235,1) ); }
}

// ================================
// [COLOR_TOKEN] color-grey-095

@mixin color-grey-095-background {
  background-color: var( --color-grey-095-color , rgba(248,248,248,1) );
}

@mixin color-grey-095-text {
  color: var( --color-grey-095-color , rgba(248,248,248,1) );
}

@mixin color-grey-095-border {
  border-color: var( --color-grey-095-color , rgba(248,248,248,1) );
}

@mixin color-grey-095-hover-text {
  &:hover { color: var( --color-grey-095-color , rgba(248,248,248,1) ); }
}

@mixin color-grey-095-hover-text {
  &:hover { background-color: var( --color-grey-095-color , rgba(248,248,248,1) ); }
}

// ================================
// [COLOR_TOKEN] color-grey-10

@mixin color-grey-10-background {
  background-color: var( --color-grey-10-color , rgba(255,255,255,1) );
}

@mixin color-grey-10-text {
  color: var( --color-grey-10-color , rgba(255,255,255,1) );
}

@mixin color-grey-10-border {
  border-color: var( --color-grey-10-color , rgba(255,255,255,1) );
}

@mixin color-grey-10-hover-text {
  &:hover { color: var( --color-grey-10-color , rgba(255,255,255,1) ); }
}

@mixin color-grey-10-hover-text {
  &:hover { background-color: var( --color-grey-10-color , rgba(255,255,255,1) ); }
}

// ================================
// [COLOR_TOKEN] color-text

@mixin color-text-background {
  background-color: var( --color-text-color , rgba(0,0,0,1) );
}

@mixin color-text-text {
  color: var( --color-text-color , rgba(0,0,0,1) );
}

@mixin color-text-border {
  border-color: var( --color-text-color , rgba(0,0,0,1) );
}

@mixin color-text-hover-text {
  &:hover { color: var( --color-text-color , rgba(0,0,0,1) ); }
}

@mixin color-text-hover-text {
  &:hover { background-color: var( --color-text-color , rgba(0,0,0,1) ); }
}

// ================================
// [COLOR_TOKEN] color-text-light

@mixin color-text-light-background {
  background-color: var( --color-text-light-color , rgba(29,29,29,1) );
}

@mixin color-text-light-text {
  color: var( --color-text-light-color , rgba(29,29,29,1) );
}

@mixin color-text-light-border {
  border-color: var( --color-text-light-color , rgba(29,29,29,1) );
}

@mixin color-text-light-hover-text {
  &:hover { color: var( --color-text-light-color , rgba(29,29,29,1) ); }
}

@mixin color-text-light-hover-text {
  &:hover { background-color: var( --color-text-light-color , rgba(29,29,29,1) ); }
}

// ================================
// [COLOR_TOKEN] color-text-lighter

@mixin color-text-lighter-background {
  background-color: var( --color-text-lighter-color , rgba(54,54,54,1) );
}

@mixin color-text-lighter-text {
  color: var( --color-text-lighter-color , rgba(54,54,54,1) );
}

@mixin color-text-lighter-border {
  border-color: var( --color-text-lighter-color , rgba(54,54,54,1) );
}

@mixin color-text-lighter-hover-text {
  &:hover { color: var( --color-text-lighter-color , rgba(54,54,54,1) ); }
}

@mixin color-text-lighter-hover-text {
  &:hover { background-color: var( --color-text-lighter-color , rgba(54,54,54,1) ); }
}

// ================================
// [COLOR_TOKEN] color-text-lightest

@mixin color-text-lightest-background {
  background-color: var( --color-text-lightest-color , rgba(89,89,89,1) );
}

@mixin color-text-lightest-text {
  color: var( --color-text-lightest-color , rgba(89,89,89,1) );
}

@mixin color-text-lightest-border {
  border-color: var( --color-text-lightest-color , rgba(89,89,89,1) );
}

@mixin color-text-lightest-hover-text {
  &:hover { color: var( --color-text-lightest-color , rgba(89,89,89,1) ); }
}

@mixin color-text-lightest-hover-text {
  &:hover { background-color: var( --color-text-lightest-color , rgba(89,89,89,1) ); }
}

// ================================
// [COLOR_TOKEN] color-text-inv

@mixin color-text-inv-background {
  background-color: var( --color-text-inv-color , rgba(255,255,255,1) );
}

@mixin color-text-inv-text {
  color: var( --color-text-inv-color , rgba(255,255,255,1) );
}

@mixin color-text-inv-border {
  border-color: var( --color-text-inv-color , rgba(255,255,255,1) );
}

@mixin color-text-inv-hover-text {
  &:hover { color: var( --color-text-inv-color , rgba(255,255,255,1) ); }
}

@mixin color-text-inv-hover-text {
  &:hover { background-color: var( --color-text-inv-color , rgba(255,255,255,1) ); }
}

// ================================
// [COLOR_TOKEN] color-text-inv-dark

@mixin color-text-inv-dark-background {
  background-color: var( --color-text-inv-dark-color , rgba(238,238,238,1) );
}

@mixin color-text-inv-dark-text {
  color: var( --color-text-inv-dark-color , rgba(238,238,238,1) );
}

@mixin color-text-inv-dark-border {
  border-color: var( --color-text-inv-dark-color , rgba(238,238,238,1) );
}

@mixin color-text-inv-dark-hover-text {
  &:hover { color: var( --color-text-inv-dark-color , rgba(238,238,238,1) ); }
}

@mixin color-text-inv-dark-hover-text {
  &:hover { background-color: var( --color-text-inv-dark-color , rgba(238,238,238,1) ); }
}

// ================================
// [COLOR_TOKEN] color-text-inv-darker

@mixin color-text-inv-darker-background {
  background-color: var( --color-text-inv-darker-color , rgba(221,221,221,1) );
}

@mixin color-text-inv-darker-text {
  color: var( --color-text-inv-darker-color , rgba(221,221,221,1) );
}

@mixin color-text-inv-darker-border {
  border-color: var( --color-text-inv-darker-color , rgba(221,221,221,1) );
}

@mixin color-text-inv-darker-hover-text {
  &:hover { color: var( --color-text-inv-darker-color , rgba(221,221,221,1) ); }
}

@mixin color-text-inv-darker-hover-text {
  &:hover { background-color: var( --color-text-inv-darker-color , rgba(221,221,221,1) ); }
}

// ================================
// [COLOR_TOKEN] color-text-inv-darkest

@mixin color-text-inv-darkest-background {
  background-color: var( --color-text-inv-darkest-color , rgba(196,196,196,1) );
}

@mixin color-text-inv-darkest-text {
  color: var( --color-text-inv-darkest-color , rgba(196,196,196,1) );
}

@mixin color-text-inv-darkest-border {
  border-color: var( --color-text-inv-darkest-color , rgba(196,196,196,1) );
}

@mixin color-text-inv-darkest-hover-text {
  &:hover { color: var( --color-text-inv-darkest-color , rgba(196,196,196,1) ); }
}

@mixin color-text-inv-darkest-hover-text {
  &:hover { background-color: var( --color-text-inv-darkest-color , rgba(196,196,196,1) ); }
}

// ================================
// [COLOR_TOKEN] color-error

@mixin color-error-background {
  background-color: var( --color-error-color , rgba(208,51,57,1) );
}

@mixin color-error-text {
  color: var( --color-error-color , rgba(208,51,57,1) );
}

@mixin color-error-border {
  border-color: var( --color-error-color , rgba(208,51,57,1) );
}

@mixin color-error-hover-text {
  &:hover { color: var( --color-error-color , rgba(208,51,57,1) ); }
}

@mixin color-error-hover-text {
  &:hover { background-color: var( --color-error-color , rgba(208,51,57,1) ); }
}

// ================================
// [COLOR_TOKEN] color-error-light

@mixin color-error-light-background {
  background-color: var( --color-error-light-color , rgba(247,169,172,1) );
}

@mixin color-error-light-text {
  color: var( --color-error-light-color , rgba(247,169,172,1) );
}

@mixin color-error-light-border {
  border-color: var( --color-error-light-color , rgba(247,169,172,1) );
}

@mixin color-error-light-hover-text {
  &:hover { color: var( --color-error-light-color , rgba(247,169,172,1) ); }
}

@mixin color-error-light-hover-text {
  &:hover { background-color: var( --color-error-light-color , rgba(247,169,172,1) ); }
}

// ================================
// [COLOR_TOKEN] color-error-dark

@mixin color-error-dark-background {
  background-color: var( --color-error-dark-color , rgba(158,0,0,1) );
}

@mixin color-error-dark-text {
  color: var( --color-error-dark-color , rgba(158,0,0,1) );
}

@mixin color-error-dark-border {
  border-color: var( --color-error-dark-color , rgba(158,0,0,1) );
}

@mixin color-error-dark-hover-text {
  &:hover { color: var( --color-error-dark-color , rgba(158,0,0,1) ); }
}

@mixin color-error-dark-hover-text {
  &:hover { background-color: var( --color-error-dark-color , rgba(158,0,0,1) ); }
}

// ================================
// [COLOR_TOKEN] color-warning

@mixin color-warning-background {
  background-color: var( --color-warning-color , rgba(255,134,66,1) );
}

@mixin color-warning-text {
  color: var( --color-warning-color , rgba(255,134,66,1) );
}

@mixin color-warning-border {
  border-color: var( --color-warning-color , rgba(255,134,66,1) );
}

@mixin color-warning-hover-text {
  &:hover { color: var( --color-warning-color , rgba(255,134,66,1) ); }
}

@mixin color-warning-hover-text {
  &:hover { background-color: var( --color-warning-color , rgba(255,134,66,1) ); }
}

// ================================
// [COLOR_TOKEN] color-warning-light

@mixin color-warning-light-background {
  background-color: var( --color-warning-light-color , rgba(255,214,191,1) );
}

@mixin color-warning-light-text {
  color: var( --color-warning-light-color , rgba(255,214,191,1) );
}

@mixin color-warning-light-border {
  border-color: var( --color-warning-light-color , rgba(255,214,191,1) );
}

@mixin color-warning-light-hover-text {
  &:hover { color: var( --color-warning-light-color , rgba(255,214,191,1) ); }
}

@mixin color-warning-light-hover-text {
  &:hover { background-color: var( --color-warning-light-color , rgba(255,214,191,1) ); }
}

// ================================
// [COLOR_TOKEN] color-warning-dark

@mixin color-warning-dark-background {
  background-color: var( --color-warning-dark-color , rgba(128,46,0,1) );
}

@mixin color-warning-dark-text {
  color: var( --color-warning-dark-color , rgba(128,46,0,1) );
}

@mixin color-warning-dark-border {
  border-color: var( --color-warning-dark-color , rgba(128,46,0,1) );
}

@mixin color-warning-dark-hover-text {
  &:hover { color: var( --color-warning-dark-color , rgba(128,46,0,1) ); }
}

@mixin color-warning-dark-hover-text {
  &:hover { background-color: var( --color-warning-dark-color , rgba(128,46,0,1) ); }
}

// ================================
// [COLOR_TOKEN] color-success

@mixin color-success-background {
  background-color: var( --color-success-color , rgba(99,166,10,1) );
}

@mixin color-success-text {
  color: var( --color-success-color , rgba(99,166,10,1) );
}

@mixin color-success-border {
  border-color: var( --color-success-color , rgba(99,166,10,1) );
}

@mixin color-success-hover-text {
  &:hover { color: var( --color-success-color , rgba(99,166,10,1) ); }
}

@mixin color-success-hover-text {
  &:hover { background-color: var( --color-success-color , rgba(99,166,10,1) ); }
}

// ================================
// [COLOR_TOKEN] color-success-light

@mixin color-success-light-background {
  background-color: var( --color-success-light-color , rgba(213,233,187,1) );
}

@mixin color-success-light-text {
  color: var( --color-success-light-color , rgba(213,233,187,1) );
}

@mixin color-success-light-border {
  border-color: var( --color-success-light-color , rgba(213,233,187,1) );
}

@mixin color-success-light-hover-text {
  &:hover { color: var( --color-success-light-color , rgba(213,233,187,1) ); }
}

@mixin color-success-light-hover-text {
  &:hover { background-color: var( --color-success-light-color , rgba(213,233,187,1) ); }
}

// ================================
// [COLOR_TOKEN] color-success-dark

@mixin color-success-dark-background {
  background-color: var( --color-success-dark-color , rgba(58,99,3,1) );
}

@mixin color-success-dark-text {
  color: var( --color-success-dark-color , rgba(58,99,3,1) );
}

@mixin color-success-dark-border {
  border-color: var( --color-success-dark-color , rgba(58,99,3,1) );
}

@mixin color-success-dark-hover-text {
  &:hover { color: var( --color-success-dark-color , rgba(58,99,3,1) ); }
}

@mixin color-success-dark-hover-text {
  &:hover { background-color: var( --color-success-dark-color , rgba(58,99,3,1) ); }
}

// ================================
// [COLOR_TOKEN] color-information

@mixin color-information-background {
  background-color: var( --color-information-color , rgba(252,231,40,1) );
}

@mixin color-information-text {
  color: var( --color-information-color , rgba(252,231,40,1) );
}

@mixin color-information-border {
  border-color: var( --color-information-color , rgba(252,231,40,1) );
}

@mixin color-information-hover-text {
  &:hover { color: var( --color-information-color , rgba(252,231,40,1) ); }
}

@mixin color-information-hover-text {
  &:hover { background-color: var( --color-information-color , rgba(252,231,40,1) ); }
}

// ================================
// [COLOR_TOKEN] color-information-light

@mixin color-information-light-background {
  background-color: var( --color-information-light-color , rgba(255,250,208,1) );
}

@mixin color-information-light-text {
  color: var( --color-information-light-color , rgba(255,250,208,1) );
}

@mixin color-information-light-border {
  border-color: var( --color-information-light-color , rgba(255,250,208,1) );
}

@mixin color-information-light-hover-text {
  &:hover { color: var( --color-information-light-color , rgba(255,250,208,1) ); }
}

@mixin color-information-light-hover-text {
  &:hover { background-color: var( --color-information-light-color , rgba(255,250,208,1) ); }
}

// ================================
// [COLOR_TOKEN] color-information-dark

@mixin color-information-dark-background {
  background-color: var( --color-information-dark-color , rgba(170,153,0,1) );
}

@mixin color-information-dark-text {
  color: var( --color-information-dark-color , rgba(170,153,0,1) );
}

@mixin color-information-dark-border {
  border-color: var( --color-information-dark-color , rgba(170,153,0,1) );
}

@mixin color-information-dark-hover-text {
  &:hover { color: var( --color-information-dark-color , rgba(170,153,0,1) ); }
}

@mixin color-information-dark-hover-text {
  &:hover { background-color: var( --color-information-dark-color , rgba(170,153,0,1) ); }
}

// ================================
// [COLOR_TOKEN] color-accent-mortgage-01

@mixin color-accent-mortgage-01-background {
  background-color: var( --color-accent-mortgage-01-color , rgba(50,1,39,1) );
}

@mixin color-accent-mortgage-01-text {
  color: var( --color-accent-mortgage-01-color , rgba(50,1,39,1) );
}

@mixin color-accent-mortgage-01-border {
  border-color: var( --color-accent-mortgage-01-color , rgba(50,1,39,1) );
}

@mixin color-accent-mortgage-01-hover-text {
  &:hover { color: var( --color-accent-mortgage-01-color , rgba(50,1,39,1) ); }
}

@mixin color-accent-mortgage-01-hover-text {
  &:hover { background-color: var( --color-accent-mortgage-01-color , rgba(50,1,39,1) ); }
}

// ================================
// [COLOR_TOKEN] color-accent-mortgage-02

@mixin color-accent-mortgage-02-background {
  background-color: var( --color-accent-mortgage-02-color , rgba(79,1,61,1) );
}

@mixin color-accent-mortgage-02-text {
  color: var( --color-accent-mortgage-02-color , rgba(79,1,61,1) );
}

@mixin color-accent-mortgage-02-border {
  border-color: var( --color-accent-mortgage-02-color , rgba(79,1,61,1) );
}

@mixin color-accent-mortgage-02-hover-text {
  &:hover { color: var( --color-accent-mortgage-02-color , rgba(79,1,61,1) ); }
}

@mixin color-accent-mortgage-02-hover-text {
  &:hover { background-color: var( --color-accent-mortgage-02-color , rgba(79,1,61,1) ); }
}

// ================================
// [COLOR_TOKEN] color-accent-mortgage-darkest

@mixin color-accent-mortgage-darkest-background {
  background-color: var( --color-accent-mortgage-darkest-color , rgba(79,1,61,1) );
}

@mixin color-accent-mortgage-darkest-text {
  color: var( --color-accent-mortgage-darkest-color , rgba(79,1,61,1) );
}

@mixin color-accent-mortgage-darkest-border {
  border-color: var( --color-accent-mortgage-darkest-color , rgba(79,1,61,1) );
}

@mixin color-accent-mortgage-darkest-hover-text {
  &:hover { color: var( --color-accent-mortgage-darkest-color , rgba(79,1,61,1) ); }
}

@mixin color-accent-mortgage-darkest-hover-text {
  &:hover { background-color: var( --color-accent-mortgage-darkest-color , rgba(79,1,61,1) ); }
}

// ================================
// [COLOR_TOKEN] color-accent-mortgage-03

@mixin color-accent-mortgage-03-background {
  background-color: var( --color-accent-mortgage-03-color , rgba(107,1,83,1) );
}

@mixin color-accent-mortgage-03-text {
  color: var( --color-accent-mortgage-03-color , rgba(107,1,83,1) );
}

@mixin color-accent-mortgage-03-border {
  border-color: var( --color-accent-mortgage-03-color , rgba(107,1,83,1) );
}

@mixin color-accent-mortgage-03-hover-text {
  &:hover { color: var( --color-accent-mortgage-03-color , rgba(107,1,83,1) ); }
}

@mixin color-accent-mortgage-03-hover-text {
  &:hover { background-color: var( --color-accent-mortgage-03-color , rgba(107,1,83,1) ); }
}

// ================================
// [COLOR_TOKEN] color-accent-mortgage-darker

@mixin color-accent-mortgage-darker-background {
  background-color: var( --color-accent-mortgage-darker-color , rgba(107,1,83,1) );
}

@mixin color-accent-mortgage-darker-text {
  color: var( --color-accent-mortgage-darker-color , rgba(107,1,83,1) );
}

@mixin color-accent-mortgage-darker-border {
  border-color: var( --color-accent-mortgage-darker-color , rgba(107,1,83,1) );
}

@mixin color-accent-mortgage-darker-hover-text {
  &:hover { color: var( --color-accent-mortgage-darker-color , rgba(107,1,83,1) ); }
}

@mixin color-accent-mortgage-darker-hover-text {
  &:hover { background-color: var( --color-accent-mortgage-darker-color , rgba(107,1,83,1) ); }
}

// ================================
// [COLOR_TOKEN] color-accent-mortgage-04

@mixin color-accent-mortgage-04-background {
  background-color: var( --color-accent-mortgage-04-color , rgba(136,1,105,1) );
}

@mixin color-accent-mortgage-04-text {
  color: var( --color-accent-mortgage-04-color , rgba(136,1,105,1) );
}

@mixin color-accent-mortgage-04-border {
  border-color: var( --color-accent-mortgage-04-color , rgba(136,1,105,1) );
}

@mixin color-accent-mortgage-04-hover-text {
  &:hover { color: var( --color-accent-mortgage-04-color , rgba(136,1,105,1) ); }
}

@mixin color-accent-mortgage-04-hover-text {
  &:hover { background-color: var( --color-accent-mortgage-04-color , rgba(136,1,105,1) ); }
}

// ================================
// [COLOR_TOKEN] color-accent-mortgage-dark

@mixin color-accent-mortgage-dark-background {
  background-color: var( --color-accent-mortgage-dark-color , rgba(136,1,105,1) );
}

@mixin color-accent-mortgage-dark-text {
  color: var( --color-accent-mortgage-dark-color , rgba(136,1,105,1) );
}

@mixin color-accent-mortgage-dark-border {
  border-color: var( --color-accent-mortgage-dark-color , rgba(136,1,105,1) );
}

@mixin color-accent-mortgage-dark-hover-text {
  &:hover { color: var( --color-accent-mortgage-dark-color , rgba(136,1,105,1) ); }
}

@mixin color-accent-mortgage-dark-hover-text {
  &:hover { background-color: var( --color-accent-mortgage-dark-color , rgba(136,1,105,1) ); }
}

// ================================
// [COLOR_TOKEN] color-accent-mortgage-05

@mixin color-accent-mortgage-05-background {
  background-color: var( --color-accent-mortgage-05-color , rgba(162,0,125,1) );
}

@mixin color-accent-mortgage-05-text {
  color: var( --color-accent-mortgage-05-color , rgba(162,0,125,1) );
}

@mixin color-accent-mortgage-05-border {
  border-color: var( --color-accent-mortgage-05-color , rgba(162,0,125,1) );
}

@mixin color-accent-mortgage-05-hover-text {
  &:hover { color: var( --color-accent-mortgage-05-color , rgba(162,0,125,1) ); }
}

@mixin color-accent-mortgage-05-hover-text {
  &:hover { background-color: var( --color-accent-mortgage-05-color , rgba(162,0,125,1) ); }
}

// ================================
// [COLOR_TOKEN] color-accent-mortgage

@mixin color-accent-mortgage-background {
  background-color: var( --color-accent-mortgage-color , rgba(162,0,125,1) );
}

@mixin color-accent-mortgage-text {
  color: var( --color-accent-mortgage-color , rgba(162,0,125,1) );
}

@mixin color-accent-mortgage-border {
  border-color: var( --color-accent-mortgage-color , rgba(162,0,125,1) );
}

@mixin color-accent-mortgage-hover-text {
  &:hover { color: var( --color-accent-mortgage-color , rgba(162,0,125,1) ); }
}

@mixin color-accent-mortgage-hover-text {
  &:hover { background-color: var( --color-accent-mortgage-color , rgba(162,0,125,1) ); }
}

// ================================
// [COLOR_TOKEN] color-accent-mortgage-06

@mixin color-accent-mortgage-06-background {
  background-color: var( --color-accent-mortgage-06-color , rgba(180,47,150,1) );
}

@mixin color-accent-mortgage-06-text {
  color: var( --color-accent-mortgage-06-color , rgba(180,47,150,1) );
}

@mixin color-accent-mortgage-06-border {
  border-color: var( --color-accent-mortgage-06-color , rgba(180,47,150,1) );
}

@mixin color-accent-mortgage-06-hover-text {
  &:hover { color: var( --color-accent-mortgage-06-color , rgba(180,47,150,1) ); }
}

@mixin color-accent-mortgage-06-hover-text {
  &:hover { background-color: var( --color-accent-mortgage-06-color , rgba(180,47,150,1) ); }
}

// ================================
// [COLOR_TOKEN] color-accent-mortgage-light

@mixin color-accent-mortgage-light-background {
  background-color: var( --color-accent-mortgage-light-color , rgba(180,47,150,1) );
}

@mixin color-accent-mortgage-light-text {
  color: var( --color-accent-mortgage-light-color , rgba(180,47,150,1) );
}

@mixin color-accent-mortgage-light-border {
  border-color: var( --color-accent-mortgage-light-color , rgba(180,47,150,1) );
}

@mixin color-accent-mortgage-light-hover-text {
  &:hover { color: var( --color-accent-mortgage-light-color , rgba(180,47,150,1) ); }
}

@mixin color-accent-mortgage-light-hover-text {
  &:hover { background-color: var( --color-accent-mortgage-light-color , rgba(180,47,150,1) ); }
}

// ================================
// [COLOR_TOKEN] color-accent-mortgage-07

@mixin color-accent-mortgage-07-background {
  background-color: var( --color-accent-mortgage-07-color , rgba(198,92,174,1) );
}

@mixin color-accent-mortgage-07-text {
  color: var( --color-accent-mortgage-07-color , rgba(198,92,174,1) );
}

@mixin color-accent-mortgage-07-border {
  border-color: var( --color-accent-mortgage-07-color , rgba(198,92,174,1) );
}

@mixin color-accent-mortgage-07-hover-text {
  &:hover { color: var( --color-accent-mortgage-07-color , rgba(198,92,174,1) ); }
}

@mixin color-accent-mortgage-07-hover-text {
  &:hover { background-color: var( --color-accent-mortgage-07-color , rgba(198,92,174,1) ); }
}

// ================================
// [COLOR_TOKEN] color-accent-mortgage-lighter

@mixin color-accent-mortgage-lighter-background {
  background-color: var( --color-accent-mortgage-lighter-color , rgba(198,92,174,1) );
}

@mixin color-accent-mortgage-lighter-text {
  color: var( --color-accent-mortgage-lighter-color , rgba(198,92,174,1) );
}

@mixin color-accent-mortgage-lighter-border {
  border-color: var( --color-accent-mortgage-lighter-color , rgba(198,92,174,1) );
}

@mixin color-accent-mortgage-lighter-hover-text {
  &:hover { color: var( --color-accent-mortgage-lighter-color , rgba(198,92,174,1) ); }
}

@mixin color-accent-mortgage-lighter-hover-text {
  &:hover { background-color: var( --color-accent-mortgage-lighter-color , rgba(198,92,174,1) ); }
}

// ================================
// [COLOR_TOKEN] color-accent-mortgage-08

@mixin color-accent-mortgage-08-background {
  background-color: var( --color-accent-mortgage-08-color , rgba(215,138,197,1) );
}

@mixin color-accent-mortgage-08-text {
  color: var( --color-accent-mortgage-08-color , rgba(215,138,197,1) );
}

@mixin color-accent-mortgage-08-border {
  border-color: var( --color-accent-mortgage-08-color , rgba(215,138,197,1) );
}

@mixin color-accent-mortgage-08-hover-text {
  &:hover { color: var( --color-accent-mortgage-08-color , rgba(215,138,197,1) ); }
}

@mixin color-accent-mortgage-08-hover-text {
  &:hover { background-color: var( --color-accent-mortgage-08-color , rgba(215,138,197,1) ); }
}

// ================================
// [COLOR_TOKEN] color-accent-mortgage-lightest

@mixin color-accent-mortgage-lightest-background {
  background-color: var( --color-accent-mortgage-lightest-color , rgba(215,138,197,1) );
}

@mixin color-accent-mortgage-lightest-text {
  color: var( --color-accent-mortgage-lightest-color , rgba(215,138,197,1) );
}

@mixin color-accent-mortgage-lightest-border {
  border-color: var( --color-accent-mortgage-lightest-color , rgba(215,138,197,1) );
}

@mixin color-accent-mortgage-lightest-hover-text {
  &:hover { color: var( --color-accent-mortgage-lightest-color , rgba(215,138,197,1) ); }
}

@mixin color-accent-mortgage-lightest-hover-text {
  &:hover { background-color: var( --color-accent-mortgage-lightest-color , rgba(215,138,197,1) ); }
}

// ================================
// [COLOR_TOKEN] color-accent-mortgage-09

@mixin color-accent-mortgage-09-background {
  background-color: var( --color-accent-mortgage-09-color , rgba(234,187,223,1) );
}

@mixin color-accent-mortgage-09-text {
  color: var( --color-accent-mortgage-09-color , rgba(234,187,223,1) );
}

@mixin color-accent-mortgage-09-border {
  border-color: var( --color-accent-mortgage-09-color , rgba(234,187,223,1) );
}

@mixin color-accent-mortgage-09-hover-text {
  &:hover { color: var( --color-accent-mortgage-09-color , rgba(234,187,223,1) ); }
}

@mixin color-accent-mortgage-09-hover-text {
  &:hover { background-color: var( --color-accent-mortgage-09-color , rgba(234,187,223,1) ); }
}

// ================================
// [COLOR_TOKEN] color-accent-mortgage-095

@mixin color-accent-mortgage-095-background {
  background-color: var( --color-accent-mortgage-095-color , rgba(254,239,251,1) );
}

@mixin color-accent-mortgage-095-text {
  color: var( --color-accent-mortgage-095-color , rgba(254,239,251,1) );
}

@mixin color-accent-mortgage-095-border {
  border-color: var( --color-accent-mortgage-095-color , rgba(254,239,251,1) );
}

@mixin color-accent-mortgage-095-hover-text {
  &:hover { color: var( --color-accent-mortgage-095-color , rgba(254,239,251,1) ); }
}

@mixin color-accent-mortgage-095-hover-text {
  &:hover { background-color: var( --color-accent-mortgage-095-color , rgba(254,239,251,1) ); }
}

// ================================
// [COLOR_TOKEN] color-accent-mortgage-text

@mixin color-accent-mortgage-text-background {
  background-color: var( --color-accent-mortgage-text-color , rgba(50,1,39,1) );
}

@mixin color-accent-mortgage-text-text {
  color: var( --color-accent-mortgage-text-color , rgba(50,1,39,1) );
}

@mixin color-accent-mortgage-text-border {
  border-color: var( --color-accent-mortgage-text-color , rgba(50,1,39,1) );
}

@mixin color-accent-mortgage-text-hover-text {
  &:hover { color: var( --color-accent-mortgage-text-color , rgba(50,1,39,1) ); }
}

@mixin color-accent-mortgage-text-hover-text {
  &:hover { background-color: var( --color-accent-mortgage-text-color , rgba(50,1,39,1) ); }
}

// ================================
// [COLOR_TOKEN] color-accent-mortgage-text-light

@mixin color-accent-mortgage-text-light-background {
  background-color: var( --color-accent-mortgage-text-light-color , rgba(79,1,61,1) );
}

@mixin color-accent-mortgage-text-light-text {
  color: var( --color-accent-mortgage-text-light-color , rgba(79,1,61,1) );
}

@mixin color-accent-mortgage-text-light-border {
  border-color: var( --color-accent-mortgage-text-light-color , rgba(79,1,61,1) );
}

@mixin color-accent-mortgage-text-light-hover-text {
  &:hover { color: var( --color-accent-mortgage-text-light-color , rgba(79,1,61,1) ); }
}

@mixin color-accent-mortgage-text-light-hover-text {
  &:hover { background-color: var( --color-accent-mortgage-text-light-color , rgba(79,1,61,1) ); }
}

// ================================
// [COLOR_TOKEN] color-accent-mortgage-text-lighter

@mixin color-accent-mortgage-text-lighter-background {
  background-color: var( --color-accent-mortgage-text-lighter-color , rgba(107,1,83,1) );
}

@mixin color-accent-mortgage-text-lighter-text {
  color: var( --color-accent-mortgage-text-lighter-color , rgba(107,1,83,1) );
}

@mixin color-accent-mortgage-text-lighter-border {
  border-color: var( --color-accent-mortgage-text-lighter-color , rgba(107,1,83,1) );
}

@mixin color-accent-mortgage-text-lighter-hover-text {
  &:hover { color: var( --color-accent-mortgage-text-lighter-color , rgba(107,1,83,1) ); }
}

@mixin color-accent-mortgage-text-lighter-hover-text {
  &:hover { background-color: var( --color-accent-mortgage-text-lighter-color , rgba(107,1,83,1) ); }
}

// ================================
// [COLOR_TOKEN] color-accent-mortgage-text-lightest

@mixin color-accent-mortgage-text-lightest-background {
  background-color: var( --color-accent-mortgage-text-lightest-color , rgba(102,0,79,1) );
}

@mixin color-accent-mortgage-text-lightest-text {
  color: var( --color-accent-mortgage-text-lightest-color , rgba(102,0,79,1) );
}

@mixin color-accent-mortgage-text-lightest-border {
  border-color: var( --color-accent-mortgage-text-lightest-color , rgba(102,0,79,1) );
}

@mixin color-accent-mortgage-text-lightest-hover-text {
  &:hover { color: var( --color-accent-mortgage-text-lightest-color , rgba(102,0,79,1) ); }
}

@mixin color-accent-mortgage-text-lightest-hover-text {
  &:hover { background-color: var( --color-accent-mortgage-text-lightest-color , rgba(102,0,79,1) ); }
}

// ================================
// [COLOR_TOKEN] color-accent-mortgage-text-inv

@mixin color-accent-mortgage-text-inv-background {
  background-color: var( --color-accent-mortgage-text-inv-color , rgba(254,239,251,1) );
}

@mixin color-accent-mortgage-text-inv-text {
  color: var( --color-accent-mortgage-text-inv-color , rgba(254,239,251,1) );
}

@mixin color-accent-mortgage-text-inv-border {
  border-color: var( --color-accent-mortgage-text-inv-color , rgba(254,239,251,1) );
}

@mixin color-accent-mortgage-text-inv-hover-text {
  &:hover { color: var( --color-accent-mortgage-text-inv-color , rgba(254,239,251,1) ); }
}

@mixin color-accent-mortgage-text-inv-hover-text {
  &:hover { background-color: var( --color-accent-mortgage-text-inv-color , rgba(254,239,251,1) ); }
}

// ================================
// [COLOR_TOKEN] color-accent-mortgage-text-inv-dark

@mixin color-accent-mortgage-text-inv-dark-background {
  background-color: var( --color-accent-mortgage-text-inv-dark-color , rgba(250,208,241,1) );
}

@mixin color-accent-mortgage-text-inv-dark-text {
  color: var( --color-accent-mortgage-text-inv-dark-color , rgba(250,208,241,1) );
}

@mixin color-accent-mortgage-text-inv-dark-border {
  border-color: var( --color-accent-mortgage-text-inv-dark-color , rgba(250,208,241,1) );
}

@mixin color-accent-mortgage-text-inv-dark-hover-text {
  &:hover { color: var( --color-accent-mortgage-text-inv-dark-color , rgba(250,208,241,1) ); }
}

@mixin color-accent-mortgage-text-inv-dark-hover-text {
  &:hover { background-color: var( --color-accent-mortgage-text-inv-dark-color , rgba(250,208,241,1) ); }
}

// ================================
// [COLOR_TOKEN] color-accent-mortgage-text-inv-darker

@mixin color-accent-mortgage-text-inv-darker-background {
  background-color: var( --color-accent-mortgage-text-inv-darker-color , rgba(227,170,214,1) );
}

@mixin color-accent-mortgage-text-inv-darker-text {
  color: var( --color-accent-mortgage-text-inv-darker-color , rgba(227,170,214,1) );
}

@mixin color-accent-mortgage-text-inv-darker-border {
  border-color: var( --color-accent-mortgage-text-inv-darker-color , rgba(227,170,214,1) );
}

@mixin color-accent-mortgage-text-inv-darker-hover-text {
  &:hover { color: var( --color-accent-mortgage-text-inv-darker-color , rgba(227,170,214,1) ); }
}

@mixin color-accent-mortgage-text-inv-darker-hover-text {
  &:hover { background-color: var( --color-accent-mortgage-text-inv-darker-color , rgba(227,170,214,1) ); }
}

// ================================
// [COLOR_TOKEN] color-accent-mortgage-text-inv-darkest

@mixin color-accent-mortgage-text-inv-darkest-background {
  background-color: var( --color-accent-mortgage-text-inv-darkest-color , rgba(215,131,196,1) );
}

@mixin color-accent-mortgage-text-inv-darkest-text {
  color: var( --color-accent-mortgage-text-inv-darkest-color , rgba(215,131,196,1) );
}

@mixin color-accent-mortgage-text-inv-darkest-border {
  border-color: var( --color-accent-mortgage-text-inv-darkest-color , rgba(215,131,196,1) );
}

@mixin color-accent-mortgage-text-inv-darkest-hover-text {
  &:hover { color: var( --color-accent-mortgage-text-inv-darkest-color , rgba(215,131,196,1) ); }
}

@mixin color-accent-mortgage-text-inv-darkest-hover-text {
  &:hover { background-color: var( --color-accent-mortgage-text-inv-darkest-color , rgba(215,131,196,1) ); }
}

// ================================
// [COLOR_TOKEN] color-accent-investments-01

@mixin color-accent-investments-01-background {
  background-color: var( --color-accent-investments-01-color , rgba(7,4,97,1) );
}

@mixin color-accent-investments-01-text {
  color: var( --color-accent-investments-01-color , rgba(7,4,97,1) );
}

@mixin color-accent-investments-01-border {
  border-color: var( --color-accent-investments-01-color , rgba(7,4,97,1) );
}

@mixin color-accent-investments-01-hover-text {
  &:hover { color: var( --color-accent-investments-01-color , rgba(7,4,97,1) ); }
}

@mixin color-accent-investments-01-hover-text {
  &:hover { background-color: var( --color-accent-investments-01-color , rgba(7,4,97,1) ); }
}

// ================================
// [COLOR_TOKEN] color-accent-investments-02

@mixin color-accent-investments-02-background {
  background-color: var( --color-accent-investments-02-color , rgba(33,31,118,1) );
}

@mixin color-accent-investments-02-text {
  color: var( --color-accent-investments-02-color , rgba(33,31,118,1) );
}

@mixin color-accent-investments-02-border {
  border-color: var( --color-accent-investments-02-color , rgba(33,31,118,1) );
}

@mixin color-accent-investments-02-hover-text {
  &:hover { color: var( --color-accent-investments-02-color , rgba(33,31,118,1) ); }
}

@mixin color-accent-investments-02-hover-text {
  &:hover { background-color: var( --color-accent-investments-02-color , rgba(33,31,118,1) ); }
}

// ================================
// [COLOR_TOKEN] color-accent-investments-darkest

@mixin color-accent-investments-darkest-background {
  background-color: var( --color-accent-investments-darkest-color , rgba(33,31,118,1) );
}

@mixin color-accent-investments-darkest-text {
  color: var( --color-accent-investments-darkest-color , rgba(33,31,118,1) );
}

@mixin color-accent-investments-darkest-border {
  border-color: var( --color-accent-investments-darkest-color , rgba(33,31,118,1) );
}

@mixin color-accent-investments-darkest-hover-text {
  &:hover { color: var( --color-accent-investments-darkest-color , rgba(33,31,118,1) ); }
}

@mixin color-accent-investments-darkest-hover-text {
  &:hover { background-color: var( --color-accent-investments-darkest-color , rgba(33,31,118,1) ); }
}

// ================================
// [COLOR_TOKEN] color-accent-investments-03

@mixin color-accent-investments-03-background {
  background-color: var( --color-accent-investments-03-color , rgba(60,58,139,1) );
}

@mixin color-accent-investments-03-text {
  color: var( --color-accent-investments-03-color , rgba(60,58,139,1) );
}

@mixin color-accent-investments-03-border {
  border-color: var( --color-accent-investments-03-color , rgba(60,58,139,1) );
}

@mixin color-accent-investments-03-hover-text {
  &:hover { color: var( --color-accent-investments-03-color , rgba(60,58,139,1) ); }
}

@mixin color-accent-investments-03-hover-text {
  &:hover { background-color: var( --color-accent-investments-03-color , rgba(60,58,139,1) ); }
}

// ================================
// [COLOR_TOKEN] color-accent-investments-darker

@mixin color-accent-investments-darker-background {
  background-color: var( --color-accent-investments-darker-color , rgba(60,58,139,1) );
}

@mixin color-accent-investments-darker-text {
  color: var( --color-accent-investments-darker-color , rgba(60,58,139,1) );
}

@mixin color-accent-investments-darker-border {
  border-color: var( --color-accent-investments-darker-color , rgba(60,58,139,1) );
}

@mixin color-accent-investments-darker-hover-text {
  &:hover { color: var( --color-accent-investments-darker-color , rgba(60,58,139,1) ); }
}

@mixin color-accent-investments-darker-hover-text {
  &:hover { background-color: var( --color-accent-investments-darker-color , rgba(60,58,139,1) ); }
}

// ================================
// [COLOR_TOKEN] color-accent-investments-04

@mixin color-accent-investments-04-background {
  background-color: var( --color-accent-investments-04-color , rgba(85,82,158,1) );
}

@mixin color-accent-investments-04-text {
  color: var( --color-accent-investments-04-color , rgba(85,82,158,1) );
}

@mixin color-accent-investments-04-border {
  border-color: var( --color-accent-investments-04-color , rgba(85,82,158,1) );
}

@mixin color-accent-investments-04-hover-text {
  &:hover { color: var( --color-accent-investments-04-color , rgba(85,82,158,1) ); }
}

@mixin color-accent-investments-04-hover-text {
  &:hover { background-color: var( --color-accent-investments-04-color , rgba(85,82,158,1) ); }
}

// ================================
// [COLOR_TOKEN] color-accent-investments-dark

@mixin color-accent-investments-dark-background {
  background-color: var( --color-accent-investments-dark-color , rgba(85,82,158,1) );
}

@mixin color-accent-investments-dark-text {
  color: var( --color-accent-investments-dark-color , rgba(85,82,158,1) );
}

@mixin color-accent-investments-dark-border {
  border-color: var( --color-accent-investments-dark-color , rgba(85,82,158,1) );
}

@mixin color-accent-investments-dark-hover-text {
  &:hover { color: var( --color-accent-investments-dark-color , rgba(85,82,158,1) ); }
}

@mixin color-accent-investments-dark-hover-text {
  &:hover { background-color: var( --color-accent-investments-dark-color , rgba(85,82,158,1) ); }
}

// ================================
// [COLOR_TOKEN] color-accent-investments-05

@mixin color-accent-investments-05-background {
  background-color: var( --color-accent-investments-05-color , rgba(113,111,180,1) );
}

@mixin color-accent-investments-05-text {
  color: var( --color-accent-investments-05-color , rgba(113,111,180,1) );
}

@mixin color-accent-investments-05-border {
  border-color: var( --color-accent-investments-05-color , rgba(113,111,180,1) );
}

@mixin color-accent-investments-05-hover-text {
  &:hover { color: var( --color-accent-investments-05-color , rgba(113,111,180,1) ); }
}

@mixin color-accent-investments-05-hover-text {
  &:hover { background-color: var( --color-accent-investments-05-color , rgba(113,111,180,1) ); }
}

// ================================
// [COLOR_TOKEN] color-accent-investments

@mixin color-accent-investments-background {
  background-color: var( --color-accent-investments-color , rgba(113,111,180,1) );
}

@mixin color-accent-investments-text {
  color: var( --color-accent-investments-color , rgba(113,111,180,1) );
}

@mixin color-accent-investments-border {
  border-color: var( --color-accent-investments-color , rgba(113,111,180,1) );
}

@mixin color-accent-investments-hover-text {
  &:hover { color: var( --color-accent-investments-color , rgba(113,111,180,1) ); }
}

@mixin color-accent-investments-hover-text {
  &:hover { background-color: var( --color-accent-investments-color , rgba(113,111,180,1) ); }
}

// ================================
// [COLOR_TOKEN] color-accent-investments-06

@mixin color-accent-investments-06-background {
  background-color: var( --color-accent-investments-06-color , rgba(139,137,195,1) );
}

@mixin color-accent-investments-06-text {
  color: var( --color-accent-investments-06-color , rgba(139,137,195,1) );
}

@mixin color-accent-investments-06-border {
  border-color: var( --color-accent-investments-06-color , rgba(139,137,195,1) );
}

@mixin color-accent-investments-06-hover-text {
  &:hover { color: var( --color-accent-investments-06-color , rgba(139,137,195,1) ); }
}

@mixin color-accent-investments-06-hover-text {
  &:hover { background-color: var( --color-accent-investments-06-color , rgba(139,137,195,1) ); }
}

// ================================
// [COLOR_TOKEN] color-accent-investments-light

@mixin color-accent-investments-light-background {
  background-color: var( --color-accent-investments-light-color , rgba(139,137,195,1) );
}

@mixin color-accent-investments-light-text {
  color: var( --color-accent-investments-light-color , rgba(139,137,195,1) );
}

@mixin color-accent-investments-light-border {
  border-color: var( --color-accent-investments-light-color , rgba(139,137,195,1) );
}

@mixin color-accent-investments-light-hover-text {
  &:hover { color: var( --color-accent-investments-light-color , rgba(139,137,195,1) ); }
}

@mixin color-accent-investments-light-hover-text {
  &:hover { background-color: var( --color-accent-investments-light-color , rgba(139,137,195,1) ); }
}

// ================================
// [COLOR_TOKEN] color-accent-investments-07

@mixin color-accent-investments-07-background {
  background-color: var( --color-accent-investments-07-color , rgba(167,165,211,1) );
}

@mixin color-accent-investments-07-text {
  color: var( --color-accent-investments-07-color , rgba(167,165,211,1) );
}

@mixin color-accent-investments-07-border {
  border-color: var( --color-accent-investments-07-color , rgba(167,165,211,1) );
}

@mixin color-accent-investments-07-hover-text {
  &:hover { color: var( --color-accent-investments-07-color , rgba(167,165,211,1) ); }
}

@mixin color-accent-investments-07-hover-text {
  &:hover { background-color: var( --color-accent-investments-07-color , rgba(167,165,211,1) ); }
}

// ================================
// [COLOR_TOKEN] color-accent-investments-lighter

@mixin color-accent-investments-lighter-background {
  background-color: var( --color-accent-investments-lighter-color , rgba(167,165,211,1) );
}

@mixin color-accent-investments-lighter-text {
  color: var( --color-accent-investments-lighter-color , rgba(167,165,211,1) );
}

@mixin color-accent-investments-lighter-border {
  border-color: var( --color-accent-investments-lighter-color , rgba(167,165,211,1) );
}

@mixin color-accent-investments-lighter-hover-text {
  &:hover { color: var( --color-accent-investments-lighter-color , rgba(167,165,211,1) ); }
}

@mixin color-accent-investments-lighter-hover-text {
  &:hover { background-color: var( --color-accent-investments-lighter-color , rgba(167,165,211,1) ); }
}

// ================================
// [COLOR_TOKEN] color-accent-investments-08

@mixin color-accent-investments-08-background {
  background-color: var( --color-accent-investments-08-color , rgba(190,189,225,1) );
}

@mixin color-accent-investments-08-text {
  color: var( --color-accent-investments-08-color , rgba(190,189,225,1) );
}

@mixin color-accent-investments-08-border {
  border-color: var( --color-accent-investments-08-color , rgba(190,189,225,1) );
}

@mixin color-accent-investments-08-hover-text {
  &:hover { color: var( --color-accent-investments-08-color , rgba(190,189,225,1) ); }
}

@mixin color-accent-investments-08-hover-text {
  &:hover { background-color: var( --color-accent-investments-08-color , rgba(190,189,225,1) ); }
}

// ================================
// [COLOR_TOKEN] color-accent-investments-lightest

@mixin color-accent-investments-lightest-background {
  background-color: var( --color-accent-investments-lightest-color , rgba(190,189,225,1) );
}

@mixin color-accent-investments-lightest-text {
  color: var( --color-accent-investments-lightest-color , rgba(190,189,225,1) );
}

@mixin color-accent-investments-lightest-border {
  border-color: var( --color-accent-investments-lightest-color , rgba(190,189,225,1) );
}

@mixin color-accent-investments-lightest-hover-text {
  &:hover { color: var( --color-accent-investments-lightest-color , rgba(190,189,225,1) ); }
}

@mixin color-accent-investments-lightest-hover-text {
  &:hover { background-color: var( --color-accent-investments-lightest-color , rgba(190,189,225,1) ); }
}

// ================================
// [COLOR_TOKEN] color-accent-investments-09

@mixin color-accent-investments-09-background {
  background-color: var( --color-accent-investments-09-color , rgba(217,216,240,1) );
}

@mixin color-accent-investments-09-text {
  color: var( --color-accent-investments-09-color , rgba(217,216,240,1) );
}

@mixin color-accent-investments-09-border {
  border-color: var( --color-accent-investments-09-color , rgba(217,216,240,1) );
}

@mixin color-accent-investments-09-hover-text {
  &:hover { color: var( --color-accent-investments-09-color , rgba(217,216,240,1) ); }
}

@mixin color-accent-investments-09-hover-text {
  &:hover { background-color: var( --color-accent-investments-09-color , rgba(217,216,240,1) ); }
}

// ================================
// [COLOR_TOKEN] color-accent-investments-095

@mixin color-accent-investments-095-background {
  background-color: var( --color-accent-investments-095-color , rgba(240,240,255,1) );
}

@mixin color-accent-investments-095-text {
  color: var( --color-accent-investments-095-color , rgba(240,240,255,1) );
}

@mixin color-accent-investments-095-border {
  border-color: var( --color-accent-investments-095-color , rgba(240,240,255,1) );
}

@mixin color-accent-investments-095-hover-text {
  &:hover { color: var( --color-accent-investments-095-color , rgba(240,240,255,1) ); }
}

@mixin color-accent-investments-095-hover-text {
  &:hover { background-color: var( --color-accent-investments-095-color , rgba(240,240,255,1) ); }
}

// ================================
// [COLOR_TOKEN] color-accent-investments-text

@mixin color-accent-investments-text-background {
  background-color: var( --color-accent-investments-text-color , rgba(1,1,72,1) );
}

@mixin color-accent-investments-text-text {
  color: var( --color-accent-investments-text-color , rgba(1,1,72,1) );
}

@mixin color-accent-investments-text-border {
  border-color: var( --color-accent-investments-text-color , rgba(1,1,72,1) );
}

@mixin color-accent-investments-text-hover-text {
  &:hover { color: var( --color-accent-investments-text-color , rgba(1,1,72,1) ); }
}

@mixin color-accent-investments-text-hover-text {
  &:hover { background-color: var( --color-accent-investments-text-color , rgba(1,1,72,1) ); }
}

// ================================
// [COLOR_TOKEN] color-accent-investments-text-light

@mixin color-accent-investments-text-light-background {
  background-color: var( --color-accent-investments-text-light-color , rgba(18,18,108,1) );
}

@mixin color-accent-investments-text-light-text {
  color: var( --color-accent-investments-text-light-color , rgba(18,18,108,1) );
}

@mixin color-accent-investments-text-light-border {
  border-color: var( --color-accent-investments-text-light-color , rgba(18,18,108,1) );
}

@mixin color-accent-investments-text-light-hover-text {
  &:hover { color: var( --color-accent-investments-text-light-color , rgba(18,18,108,1) ); }
}

@mixin color-accent-investments-text-light-hover-text {
  &:hover { background-color: var( --color-accent-investments-text-light-color , rgba(18,18,108,1) ); }
}

// ================================
// [COLOR_TOKEN] color-accent-investments-text-lighter

@mixin color-accent-investments-text-lighter-background {
  background-color: var( --color-accent-investments-text-lighter-color , rgba(34,34,139,1) );
}

@mixin color-accent-investments-text-lighter-text {
  color: var( --color-accent-investments-text-lighter-color , rgba(34,34,139,1) );
}

@mixin color-accent-investments-text-lighter-border {
  border-color: var( --color-accent-investments-text-lighter-color , rgba(34,34,139,1) );
}

@mixin color-accent-investments-text-lighter-hover-text {
  &:hover { color: var( --color-accent-investments-text-lighter-color , rgba(34,34,139,1) ); }
}

@mixin color-accent-investments-text-lighter-hover-text {
  &:hover { background-color: var( --color-accent-investments-text-lighter-color , rgba(34,34,139,1) ); }
}

// ================================
// [COLOR_TOKEN] color-accent-investments-text-lightest

@mixin color-accent-investments-text-lightest-background {
  background-color: var( --color-accent-investments-text-lightest-color , rgba(47,47,134,1) );
}

@mixin color-accent-investments-text-lightest-text {
  color: var( --color-accent-investments-text-lightest-color , rgba(47,47,134,1) );
}

@mixin color-accent-investments-text-lightest-border {
  border-color: var( --color-accent-investments-text-lightest-color , rgba(47,47,134,1) );
}

@mixin color-accent-investments-text-lightest-hover-text {
  &:hover { color: var( --color-accent-investments-text-lightest-color , rgba(47,47,134,1) ); }
}

@mixin color-accent-investments-text-lightest-hover-text {
  &:hover { background-color: var( --color-accent-investments-text-lightest-color , rgba(47,47,134,1) ); }
}

// ================================
// [COLOR_TOKEN] color-accent-investments-text-inv

@mixin color-accent-investments-text-inv-background {
  background-color: var( --color-accent-investments-text-inv-color , rgba(238,238,255,1) );
}

@mixin color-accent-investments-text-inv-text {
  color: var( --color-accent-investments-text-inv-color , rgba(238,238,255,1) );
}

@mixin color-accent-investments-text-inv-border {
  border-color: var( --color-accent-investments-text-inv-color , rgba(238,238,255,1) );
}

@mixin color-accent-investments-text-inv-hover-text {
  &:hover { color: var( --color-accent-investments-text-inv-color , rgba(238,238,255,1) ); }
}

@mixin color-accent-investments-text-inv-hover-text {
  &:hover { background-color: var( --color-accent-investments-text-inv-color , rgba(238,238,255,1) ); }
}

// ================================
// [COLOR_TOKEN] color-accent-investments-text-inv-dark

@mixin color-accent-investments-text-inv-dark-background {
  background-color: var( --color-accent-investments-text-inv-dark-color , rgba(214,214,242,1) );
}

@mixin color-accent-investments-text-inv-dark-text {
  color: var( --color-accent-investments-text-inv-dark-color , rgba(214,214,242,1) );
}

@mixin color-accent-investments-text-inv-dark-border {
  border-color: var( --color-accent-investments-text-inv-dark-color , rgba(214,214,242,1) );
}

@mixin color-accent-investments-text-inv-dark-hover-text {
  &:hover { color: var( --color-accent-investments-text-inv-dark-color , rgba(214,214,242,1) ); }
}

@mixin color-accent-investments-text-inv-dark-hover-text {
  &:hover { background-color: var( --color-accent-investments-text-inv-dark-color , rgba(214,214,242,1) ); }
}

// ================================
// [COLOR_TOKEN] color-accent-investments-text-inv-darker

@mixin color-accent-investments-text-inv-darker-background {
  background-color: var( --color-accent-investments-text-inv-darker-color , rgba(171,171,219,1) );
}

@mixin color-accent-investments-text-inv-darker-text {
  color: var( --color-accent-investments-text-inv-darker-color , rgba(171,171,219,1) );
}

@mixin color-accent-investments-text-inv-darker-border {
  border-color: var( --color-accent-investments-text-inv-darker-color , rgba(171,171,219,1) );
}

@mixin color-accent-investments-text-inv-darker-hover-text {
  &:hover { color: var( --color-accent-investments-text-inv-darker-color , rgba(171,171,219,1) ); }
}

@mixin color-accent-investments-text-inv-darker-hover-text {
  &:hover { background-color: var( --color-accent-investments-text-inv-darker-color , rgba(171,171,219,1) ); }
}

// ================================
// [COLOR_TOKEN] color-accent-investments-text-inv-darkest

@mixin color-accent-investments-text-inv-darkest-background {
  background-color: var( --color-accent-investments-text-inv-darkest-color , rgba(139,139,199,1) );
}

@mixin color-accent-investments-text-inv-darkest-text {
  color: var( --color-accent-investments-text-inv-darkest-color , rgba(139,139,199,1) );
}

@mixin color-accent-investments-text-inv-darkest-border {
  border-color: var( --color-accent-investments-text-inv-darkest-color , rgba(139,139,199,1) );
}

@mixin color-accent-investments-text-inv-darkest-hover-text {
  &:hover { color: var( --color-accent-investments-text-inv-darkest-color , rgba(139,139,199,1) ); }
}

@mixin color-accent-investments-text-inv-darkest-hover-text {
  &:hover { background-color: var( --color-accent-investments-text-inv-darkest-color , rgba(139,139,199,1) ); }
}

// ================================
// [COLOR_TOKEN] color-accent-credit-cards-01

@mixin color-accent-credit-cards-01-background {
  background-color: var( --color-accent-credit-cards-01-color , rgba(1,51,77,1) );
}

@mixin color-accent-credit-cards-01-text {
  color: var( --color-accent-credit-cards-01-color , rgba(1,51,77,1) );
}

@mixin color-accent-credit-cards-01-border {
  border-color: var( --color-accent-credit-cards-01-color , rgba(1,51,77,1) );
}

@mixin color-accent-credit-cards-01-hover-text {
  &:hover { color: var( --color-accent-credit-cards-01-color , rgba(1,51,77,1) ); }
}

@mixin color-accent-credit-cards-01-hover-text {
  &:hover { background-color: var( --color-accent-credit-cards-01-color , rgba(1,51,77,1) ); }
}

// ================================
// [COLOR_TOKEN] color-accent-credit-cards-02

@mixin color-accent-credit-cards-02-background {
  background-color: var( --color-accent-credit-cards-02-color , rgba(1,70,106,1) );
}

@mixin color-accent-credit-cards-02-text {
  color: var( --color-accent-credit-cards-02-color , rgba(1,70,106,1) );
}

@mixin color-accent-credit-cards-02-border {
  border-color: var( --color-accent-credit-cards-02-color , rgba(1,70,106,1) );
}

@mixin color-accent-credit-cards-02-hover-text {
  &:hover { color: var( --color-accent-credit-cards-02-color , rgba(1,70,106,1) ); }
}

@mixin color-accent-credit-cards-02-hover-text {
  &:hover { background-color: var( --color-accent-credit-cards-02-color , rgba(1,70,106,1) ); }
}

// ================================
// [COLOR_TOKEN] color-accent-credit-cards-darkest

@mixin color-accent-credit-cards-darkest-background {
  background-color: var( --color-accent-credit-cards-darkest-color , rgba(1,70,106,1) );
}

@mixin color-accent-credit-cards-darkest-text {
  color: var( --color-accent-credit-cards-darkest-color , rgba(1,70,106,1) );
}

@mixin color-accent-credit-cards-darkest-border {
  border-color: var( --color-accent-credit-cards-darkest-color , rgba(1,70,106,1) );
}

@mixin color-accent-credit-cards-darkest-hover-text {
  &:hover { color: var( --color-accent-credit-cards-darkest-color , rgba(1,70,106,1) ); }
}

@mixin color-accent-credit-cards-darkest-hover-text {
  &:hover { background-color: var( --color-accent-credit-cards-darkest-color , rgba(1,70,106,1) ); }
}

// ================================
// [COLOR_TOKEN] color-accent-credit-cards-03

@mixin color-accent-credit-cards-03-background {
  background-color: var( --color-accent-credit-cards-03-color , rgba(1,88,132,1) );
}

@mixin color-accent-credit-cards-03-text {
  color: var( --color-accent-credit-cards-03-color , rgba(1,88,132,1) );
}

@mixin color-accent-credit-cards-03-border {
  border-color: var( --color-accent-credit-cards-03-color , rgba(1,88,132,1) );
}

@mixin color-accent-credit-cards-03-hover-text {
  &:hover { color: var( --color-accent-credit-cards-03-color , rgba(1,88,132,1) ); }
}

@mixin color-accent-credit-cards-03-hover-text {
  &:hover { background-color: var( --color-accent-credit-cards-03-color , rgba(1,88,132,1) ); }
}

// ================================
// [COLOR_TOKEN] color-accent-credit-cards-darker

@mixin color-accent-credit-cards-darker-background {
  background-color: var( --color-accent-credit-cards-darker-color , rgba(1,88,132,1) );
}

@mixin color-accent-credit-cards-darker-text {
  color: var( --color-accent-credit-cards-darker-color , rgba(1,88,132,1) );
}

@mixin color-accent-credit-cards-darker-border {
  border-color: var( --color-accent-credit-cards-darker-color , rgba(1,88,132,1) );
}

@mixin color-accent-credit-cards-darker-hover-text {
  &:hover { color: var( --color-accent-credit-cards-darker-color , rgba(1,88,132,1) ); }
}

@mixin color-accent-credit-cards-darker-hover-text {
  &:hover { background-color: var( --color-accent-credit-cards-darker-color , rgba(1,88,132,1) ); }
}

// ================================
// [COLOR_TOKEN] color-accent-credit-cards-04

@mixin color-accent-credit-cards-04-background {
  background-color: var( --color-accent-credit-cards-04-color , rgba(1,104,157,1) );
}

@mixin color-accent-credit-cards-04-text {
  color: var( --color-accent-credit-cards-04-color , rgba(1,104,157,1) );
}

@mixin color-accent-credit-cards-04-border {
  border-color: var( --color-accent-credit-cards-04-color , rgba(1,104,157,1) );
}

@mixin color-accent-credit-cards-04-hover-text {
  &:hover { color: var( --color-accent-credit-cards-04-color , rgba(1,104,157,1) ); }
}

@mixin color-accent-credit-cards-04-hover-text {
  &:hover { background-color: var( --color-accent-credit-cards-04-color , rgba(1,104,157,1) ); }
}

// ================================
// [COLOR_TOKEN] color-accent-credit-cards-dark

@mixin color-accent-credit-cards-dark-background {
  background-color: var( --color-accent-credit-cards-dark-color , rgba(1,104,157,1) );
}

@mixin color-accent-credit-cards-dark-text {
  color: var( --color-accent-credit-cards-dark-color , rgba(1,104,157,1) );
}

@mixin color-accent-credit-cards-dark-border {
  border-color: var( --color-accent-credit-cards-dark-color , rgba(1,104,157,1) );
}

@mixin color-accent-credit-cards-dark-hover-text {
  &:hover { color: var( --color-accent-credit-cards-dark-color , rgba(1,104,157,1) ); }
}

@mixin color-accent-credit-cards-dark-hover-text {
  &:hover { background-color: var( --color-accent-credit-cards-dark-color , rgba(1,104,157,1) ); }
}

// ================================
// [COLOR_TOKEN] color-accent-credit-cards-05

@mixin color-accent-credit-cards-05-background {
  background-color: var( --color-accent-credit-cards-05-color , rgba(0,122,185,1) );
}

@mixin color-accent-credit-cards-05-text {
  color: var( --color-accent-credit-cards-05-color , rgba(0,122,185,1) );
}

@mixin color-accent-credit-cards-05-border {
  border-color: var( --color-accent-credit-cards-05-color , rgba(0,122,185,1) );
}

@mixin color-accent-credit-cards-05-hover-text {
  &:hover { color: var( --color-accent-credit-cards-05-color , rgba(0,122,185,1) ); }
}

@mixin color-accent-credit-cards-05-hover-text {
  &:hover { background-color: var( --color-accent-credit-cards-05-color , rgba(0,122,185,1) ); }
}

// ================================
// [COLOR_TOKEN] color-accent-credit-cards

@mixin color-accent-credit-cards-background {
  background-color: var( --color-accent-credit-cards-color , rgba(0,122,185,1) );
}

@mixin color-accent-credit-cards-text {
  color: var( --color-accent-credit-cards-color , rgba(0,122,185,1) );
}

@mixin color-accent-credit-cards-border {
  border-color: var( --color-accent-credit-cards-color , rgba(0,122,185,1) );
}

@mixin color-accent-credit-cards-hover-text {
  &:hover { color: var( --color-accent-credit-cards-color , rgba(0,122,185,1) ); }
}

@mixin color-accent-credit-cards-hover-text {
  &:hover { background-color: var( --color-accent-credit-cards-color , rgba(0,122,185,1) ); }
}

// ================================
// [COLOR_TOKEN] color-accent-credit-cards-06

@mixin color-accent-credit-cards-06-background {
  background-color: var( --color-accent-credit-cards-06-color , rgba(46,147,199,1) );
}

@mixin color-accent-credit-cards-06-text {
  color: var( --color-accent-credit-cards-06-color , rgba(46,147,199,1) );
}

@mixin color-accent-credit-cards-06-border {
  border-color: var( --color-accent-credit-cards-06-color , rgba(46,147,199,1) );
}

@mixin color-accent-credit-cards-06-hover-text {
  &:hover { color: var( --color-accent-credit-cards-06-color , rgba(46,147,199,1) ); }
}

@mixin color-accent-credit-cards-06-hover-text {
  &:hover { background-color: var( --color-accent-credit-cards-06-color , rgba(46,147,199,1) ); }
}

// ================================
// [COLOR_TOKEN] color-accent-credit-cards-light

@mixin color-accent-credit-cards-light-background {
  background-color: var( --color-accent-credit-cards-light-color , rgba(46,147,199,1) );
}

@mixin color-accent-credit-cards-light-text {
  color: var( --color-accent-credit-cards-light-color , rgba(46,147,199,1) );
}

@mixin color-accent-credit-cards-light-border {
  border-color: var( --color-accent-credit-cards-light-color , rgba(46,147,199,1) );
}

@mixin color-accent-credit-cards-light-hover-text {
  &:hover { color: var( --color-accent-credit-cards-light-color , rgba(46,147,199,1) ); }
}

@mixin color-accent-credit-cards-light-hover-text {
  &:hover { background-color: var( --color-accent-credit-cards-light-color , rgba(46,147,199,1) ); }
}

// ================================
// [COLOR_TOKEN] color-accent-credit-cards-07

@mixin color-accent-credit-cards-07-background {
  background-color: var( --color-accent-credit-cards-07-color , rgba(94,173,213,1) );
}

@mixin color-accent-credit-cards-07-text {
  color: var( --color-accent-credit-cards-07-color , rgba(94,173,213,1) );
}

@mixin color-accent-credit-cards-07-border {
  border-color: var( --color-accent-credit-cards-07-color , rgba(94,173,213,1) );
}

@mixin color-accent-credit-cards-07-hover-text {
  &:hover { color: var( --color-accent-credit-cards-07-color , rgba(94,173,213,1) ); }
}

@mixin color-accent-credit-cards-07-hover-text {
  &:hover { background-color: var( --color-accent-credit-cards-07-color , rgba(94,173,213,1) ); }
}

// ================================
// [COLOR_TOKEN] color-accent-credit-cards-lighter

@mixin color-accent-credit-cards-lighter-background {
  background-color: var( --color-accent-credit-cards-lighter-color , rgba(94,173,213,1) );
}

@mixin color-accent-credit-cards-lighter-text {
  color: var( --color-accent-credit-cards-lighter-color , rgba(94,173,213,1) );
}

@mixin color-accent-credit-cards-lighter-border {
  border-color: var( --color-accent-credit-cards-lighter-color , rgba(94,173,213,1) );
}

@mixin color-accent-credit-cards-lighter-hover-text {
  &:hover { color: var( --color-accent-credit-cards-lighter-color , rgba(94,173,213,1) ); }
}

@mixin color-accent-credit-cards-lighter-hover-text {
  &:hover { background-color: var( --color-accent-credit-cards-lighter-color , rgba(94,173,213,1) ); }
}

// ================================
// [COLOR_TOKEN] color-accent-credit-cards-08

@mixin color-accent-credit-cards-08-background {
  background-color: var( --color-accent-credit-cards-08-color , rgba(140,197,227,1) );
}

@mixin color-accent-credit-cards-08-text {
  color: var( --color-accent-credit-cards-08-color , rgba(140,197,227,1) );
}

@mixin color-accent-credit-cards-08-border {
  border-color: var( --color-accent-credit-cards-08-color , rgba(140,197,227,1) );
}

@mixin color-accent-credit-cards-08-hover-text {
  &:hover { color: var( --color-accent-credit-cards-08-color , rgba(140,197,227,1) ); }
}

@mixin color-accent-credit-cards-08-hover-text {
  &:hover { background-color: var( --color-accent-credit-cards-08-color , rgba(140,197,227,1) ); }
}

// ================================
// [COLOR_TOKEN] color-accent-credit-cards-lightest

@mixin color-accent-credit-cards-lightest-background {
  background-color: var( --color-accent-credit-cards-lightest-color , rgba(140,197,227,1) );
}

@mixin color-accent-credit-cards-lightest-text {
  color: var( --color-accent-credit-cards-lightest-color , rgba(140,197,227,1) );
}

@mixin color-accent-credit-cards-lightest-border {
  border-color: var( --color-accent-credit-cards-lightest-color , rgba(140,197,227,1) );
}

@mixin color-accent-credit-cards-lightest-hover-text {
  &:hover { color: var( --color-accent-credit-cards-lightest-color , rgba(140,197,227,1) ); }
}

@mixin color-accent-credit-cards-lightest-hover-text {
  &:hover { background-color: var( --color-accent-credit-cards-lightest-color , rgba(140,197,227,1) ); }
}

// ================================
// [COLOR_TOKEN] color-accent-credit-cards-09

@mixin color-accent-credit-cards-09-background {
  background-color: var( --color-accent-credit-cards-09-color , rgba(189,224,242,1) );
}

@mixin color-accent-credit-cards-09-text {
  color: var( --color-accent-credit-cards-09-color , rgba(189,224,242,1) );
}

@mixin color-accent-credit-cards-09-border {
  border-color: var( --color-accent-credit-cards-09-color , rgba(189,224,242,1) );
}

@mixin color-accent-credit-cards-09-hover-text {
  &:hover { color: var( --color-accent-credit-cards-09-color , rgba(189,224,242,1) ); }
}

@mixin color-accent-credit-cards-09-hover-text {
  &:hover { background-color: var( --color-accent-credit-cards-09-color , rgba(189,224,242,1) ); }
}

// ================================
// [COLOR_TOKEN] color-accent-credit-cards-095

@mixin color-accent-credit-cards-095-background {
  background-color: var( --color-accent-credit-cards-095-color , rgba(236,249,255,1) );
}

@mixin color-accent-credit-cards-095-text {
  color: var( --color-accent-credit-cards-095-color , rgba(236,249,255,1) );
}

@mixin color-accent-credit-cards-095-border {
  border-color: var( --color-accent-credit-cards-095-color , rgba(236,249,255,1) );
}

@mixin color-accent-credit-cards-095-hover-text {
  &:hover { color: var( --color-accent-credit-cards-095-color , rgba(236,249,255,1) ); }
}

@mixin color-accent-credit-cards-095-hover-text {
  &:hover { background-color: var( --color-accent-credit-cards-095-color , rgba(236,249,255,1) ); }
}

// ================================
// [COLOR_TOKEN] color-accent-credit-cards-text

@mixin color-accent-credit-cards-text-background {
  background-color: var( --color-accent-credit-cards-text-color , rgba(1,51,77,1) );
}

@mixin color-accent-credit-cards-text-text {
  color: var( --color-accent-credit-cards-text-color , rgba(1,51,77,1) );
}

@mixin color-accent-credit-cards-text-border {
  border-color: var( --color-accent-credit-cards-text-color , rgba(1,51,77,1) );
}

@mixin color-accent-credit-cards-text-hover-text {
  &:hover { color: var( --color-accent-credit-cards-text-color , rgba(1,51,77,1) ); }
}

@mixin color-accent-credit-cards-text-hover-text {
  &:hover { background-color: var( --color-accent-credit-cards-text-color , rgba(1,51,77,1) ); }
}

// ================================
// [COLOR_TOKEN] color-accent-credit-cards-text-light

@mixin color-accent-credit-cards-text-light-background {
  background-color: var( --color-accent-credit-cards-text-light-color , rgba(2,64,96,1) );
}

@mixin color-accent-credit-cards-text-light-text {
  color: var( --color-accent-credit-cards-text-light-color , rgba(2,64,96,1) );
}

@mixin color-accent-credit-cards-text-light-border {
  border-color: var( --color-accent-credit-cards-text-light-color , rgba(2,64,96,1) );
}

@mixin color-accent-credit-cards-text-light-hover-text {
  &:hover { color: var( --color-accent-credit-cards-text-light-color , rgba(2,64,96,1) ); }
}

@mixin color-accent-credit-cards-text-light-hover-text {
  &:hover { background-color: var( --color-accent-credit-cards-text-light-color , rgba(2,64,96,1) ); }
}

// ================================
// [COLOR_TOKEN] color-accent-credit-cards-text-lighter

@mixin color-accent-credit-cards-text-lighter-background {
  background-color: var( --color-accent-credit-cards-text-lighter-color , rgba(1,79,118,1) );
}

@mixin color-accent-credit-cards-text-lighter-text {
  color: var( --color-accent-credit-cards-text-lighter-color , rgba(1,79,118,1) );
}

@mixin color-accent-credit-cards-text-lighter-border {
  border-color: var( --color-accent-credit-cards-text-lighter-color , rgba(1,79,118,1) );
}

@mixin color-accent-credit-cards-text-lighter-hover-text {
  &:hover { color: var( --color-accent-credit-cards-text-lighter-color , rgba(1,79,118,1) ); }
}

@mixin color-accent-credit-cards-text-lighter-hover-text {
  &:hover { background-color: var( --color-accent-credit-cards-text-lighter-color , rgba(1,79,118,1) ); }
}

// ================================
// [COLOR_TOKEN] color-accent-credit-cards-text-lightest

@mixin color-accent-credit-cards-text-lightest-background {
  background-color: var( --color-accent-credit-cards-text-lightest-color , rgba(1,88,132,1) );
}

@mixin color-accent-credit-cards-text-lightest-text {
  color: var( --color-accent-credit-cards-text-lightest-color , rgba(1,88,132,1) );
}

@mixin color-accent-credit-cards-text-lightest-border {
  border-color: var( --color-accent-credit-cards-text-lightest-color , rgba(1,88,132,1) );
}

@mixin color-accent-credit-cards-text-lightest-hover-text {
  &:hover { color: var( --color-accent-credit-cards-text-lightest-color , rgba(1,88,132,1) ); }
}

@mixin color-accent-credit-cards-text-lightest-hover-text {
  &:hover { background-color: var( --color-accent-credit-cards-text-lightest-color , rgba(1,88,132,1) ); }
}

// ================================
// [COLOR_TOKEN] color-accent-credit-cards-text-inv

@mixin color-accent-credit-cards-text-inv-background {
  background-color: var( --color-accent-credit-cards-text-inv-color , rgba(236,249,255,1) );
}

@mixin color-accent-credit-cards-text-inv-text {
  color: var( --color-accent-credit-cards-text-inv-color , rgba(236,249,255,1) );
}

@mixin color-accent-credit-cards-text-inv-border {
  border-color: var( --color-accent-credit-cards-text-inv-color , rgba(236,249,255,1) );
}

@mixin color-accent-credit-cards-text-inv-hover-text {
  &:hover { color: var( --color-accent-credit-cards-text-inv-color , rgba(236,249,255,1) ); }
}

@mixin color-accent-credit-cards-text-inv-hover-text {
  &:hover { background-color: var( --color-accent-credit-cards-text-inv-color , rgba(236,249,255,1) ); }
}

// ================================
// [COLOR_TOKEN] color-accent-credit-cards-text-inv-dark

@mixin color-accent-credit-cards-text-inv-dark-background {
  background-color: var( --color-accent-credit-cards-text-inv-dark-color , rgba(211,235,248,1) );
}

@mixin color-accent-credit-cards-text-inv-dark-text {
  color: var( --color-accent-credit-cards-text-inv-dark-color , rgba(211,235,248,1) );
}

@mixin color-accent-credit-cards-text-inv-dark-border {
  border-color: var( --color-accent-credit-cards-text-inv-dark-color , rgba(211,235,248,1) );
}

@mixin color-accent-credit-cards-text-inv-dark-hover-text {
  &:hover { color: var( --color-accent-credit-cards-text-inv-dark-color , rgba(211,235,248,1) ); }
}

@mixin color-accent-credit-cards-text-inv-dark-hover-text {
  &:hover { background-color: var( --color-accent-credit-cards-text-inv-dark-color , rgba(211,235,248,1) ); }
}

// ================================
// [COLOR_TOKEN] color-accent-credit-cards-text-inv-darker

@mixin color-accent-credit-cards-text-inv-darker-background {
  background-color: var( --color-accent-credit-cards-text-inv-darker-color , rgba(180,219,240,1) );
}

@mixin color-accent-credit-cards-text-inv-darker-text {
  color: var( --color-accent-credit-cards-text-inv-darker-color , rgba(180,219,240,1) );
}

@mixin color-accent-credit-cards-text-inv-darker-border {
  border-color: var( --color-accent-credit-cards-text-inv-darker-color , rgba(180,219,240,1) );
}

@mixin color-accent-credit-cards-text-inv-darker-hover-text {
  &:hover { color: var( --color-accent-credit-cards-text-inv-darker-color , rgba(180,219,240,1) ); }
}

@mixin color-accent-credit-cards-text-inv-darker-hover-text {
  &:hover { background-color: var( --color-accent-credit-cards-text-inv-darker-color , rgba(180,219,240,1) ); }
}

// ================================
// [COLOR_TOKEN] color-accent-credit-cards-text-inv-darkest

@mixin color-accent-credit-cards-text-inv-darkest-background {
  background-color: var( --color-accent-credit-cards-text-inv-darkest-color , rgba(140,197,227,1) );
}

@mixin color-accent-credit-cards-text-inv-darkest-text {
  color: var( --color-accent-credit-cards-text-inv-darkest-color , rgba(140,197,227,1) );
}

@mixin color-accent-credit-cards-text-inv-darkest-border {
  border-color: var( --color-accent-credit-cards-text-inv-darkest-color , rgba(140,197,227,1) );
}

@mixin color-accent-credit-cards-text-inv-darkest-hover-text {
  &:hover { color: var( --color-accent-credit-cards-text-inv-darkest-color , rgba(140,197,227,1) ); }
}

@mixin color-accent-credit-cards-text-inv-darkest-hover-text {
  &:hover { background-color: var( --color-accent-credit-cards-text-inv-darkest-color , rgba(140,197,227,1) ); }
}

// ================================
// [COLOR_TOKEN] color-accent-student-01

@mixin color-accent-student-01-background {
  background-color: var( --color-accent-student-01-color , rgba(1,56,49,1) );
}

@mixin color-accent-student-01-text {
  color: var( --color-accent-student-01-color , rgba(1,56,49,1) );
}

@mixin color-accent-student-01-border {
  border-color: var( --color-accent-student-01-color , rgba(1,56,49,1) );
}

@mixin color-accent-student-01-hover-text {
  &:hover { color: var( --color-accent-student-01-color , rgba(1,56,49,1) ); }
}

@mixin color-accent-student-01-hover-text {
  &:hover { background-color: var( --color-accent-student-01-color , rgba(1,56,49,1) ); }
}

// ================================
// [COLOR_TOKEN] color-accent-student-02

@mixin color-accent-student-02-background {
  background-color: var( --color-accent-student-02-color , rgba(1,75,67,1) );
}

@mixin color-accent-student-02-text {
  color: var( --color-accent-student-02-color , rgba(1,75,67,1) );
}

@mixin color-accent-student-02-border {
  border-color: var( --color-accent-student-02-color , rgba(1,75,67,1) );
}

@mixin color-accent-student-02-hover-text {
  &:hover { color: var( --color-accent-student-02-color , rgba(1,75,67,1) ); }
}

@mixin color-accent-student-02-hover-text {
  &:hover { background-color: var( --color-accent-student-02-color , rgba(1,75,67,1) ); }
}

// ================================
// [COLOR_TOKEN] color-accent-student-darkest

@mixin color-accent-student-darkest-background {
  background-color: var( --color-accent-student-darkest-color , rgba(1,75,67,1) );
}

@mixin color-accent-student-darkest-text {
  color: var( --color-accent-student-darkest-color , rgba(1,75,67,1) );
}

@mixin color-accent-student-darkest-border {
  border-color: var( --color-accent-student-darkest-color , rgba(1,75,67,1) );
}

@mixin color-accent-student-darkest-hover-text {
  &:hover { color: var( --color-accent-student-darkest-color , rgba(1,75,67,1) ); }
}

@mixin color-accent-student-darkest-hover-text {
  &:hover { background-color: var( --color-accent-student-darkest-color , rgba(1,75,67,1) ); }
}

// ================================
// [COLOR_TOKEN] color-accent-student-03

@mixin color-accent-student-03-background {
  background-color: var( --color-accent-student-03-color , rgba(1,94,83,1) );
}

@mixin color-accent-student-03-text {
  color: var( --color-accent-student-03-color , rgba(1,94,83,1) );
}

@mixin color-accent-student-03-border {
  border-color: var( --color-accent-student-03-color , rgba(1,94,83,1) );
}

@mixin color-accent-student-03-hover-text {
  &:hover { color: var( --color-accent-student-03-color , rgba(1,94,83,1) ); }
}

@mixin color-accent-student-03-hover-text {
  &:hover { background-color: var( --color-accent-student-03-color , rgba(1,94,83,1) ); }
}

// ================================
// [COLOR_TOKEN] color-accent-student-darker

@mixin color-accent-student-darker-background {
  background-color: var( --color-accent-student-darker-color , rgba(1,94,83,1) );
}

@mixin color-accent-student-darker-text {
  color: var( --color-accent-student-darker-color , rgba(1,94,83,1) );
}

@mixin color-accent-student-darker-border {
  border-color: var( --color-accent-student-darker-color , rgba(1,94,83,1) );
}

@mixin color-accent-student-darker-hover-text {
  &:hover { color: var( --color-accent-student-darker-color , rgba(1,94,83,1) ); }
}

@mixin color-accent-student-darker-hover-text {
  &:hover { background-color: var( --color-accent-student-darker-color , rgba(1,94,83,1) ); }
}

// ================================
// [COLOR_TOKEN] color-accent-student-04

@mixin color-accent-student-04-background {
  background-color: var( --color-accent-student-04-color , rgba(1,113,100,1) );
}

@mixin color-accent-student-04-text {
  color: var( --color-accent-student-04-color , rgba(1,113,100,1) );
}

@mixin color-accent-student-04-border {
  border-color: var( --color-accent-student-04-color , rgba(1,113,100,1) );
}

@mixin color-accent-student-04-hover-text {
  &:hover { color: var( --color-accent-student-04-color , rgba(1,113,100,1) ); }
}

@mixin color-accent-student-04-hover-text {
  &:hover { background-color: var( --color-accent-student-04-color , rgba(1,113,100,1) ); }
}

// ================================
// [COLOR_TOKEN] color-accent-student-dark

@mixin color-accent-student-dark-background {
  background-color: var( --color-accent-student-dark-color , rgba(1,113,100,1) );
}

@mixin color-accent-student-dark-text {
  color: var( --color-accent-student-dark-color , rgba(1,113,100,1) );
}

@mixin color-accent-student-dark-border {
  border-color: var( --color-accent-student-dark-color , rgba(1,113,100,1) );
}

@mixin color-accent-student-dark-hover-text {
  &:hover { color: var( --color-accent-student-dark-color , rgba(1,113,100,1) ); }
}

@mixin color-accent-student-dark-hover-text {
  &:hover { background-color: var( --color-accent-student-dark-color , rgba(1,113,100,1) ); }
}

// ================================
// [COLOR_TOKEN] color-accent-student-05

@mixin color-accent-student-05-background {
  background-color: var( --color-accent-student-05-color , rgba(0,131,116,1) );
}

@mixin color-accent-student-05-text {
  color: var( --color-accent-student-05-color , rgba(0,131,116,1) );
}

@mixin color-accent-student-05-border {
  border-color: var( --color-accent-student-05-color , rgba(0,131,116,1) );
}

@mixin color-accent-student-05-hover-text {
  &:hover { color: var( --color-accent-student-05-color , rgba(0,131,116,1) ); }
}

@mixin color-accent-student-05-hover-text {
  &:hover { background-color: var( --color-accent-student-05-color , rgba(0,131,116,1) ); }
}

// ================================
// [COLOR_TOKEN] color-accent-student

@mixin color-accent-student-background {
  background-color: var( --color-accent-student-color , rgba(0,131,116,1) );
}

@mixin color-accent-student-text {
  color: var( --color-accent-student-color , rgba(0,131,116,1) );
}

@mixin color-accent-student-border {
  border-color: var( --color-accent-student-color , rgba(0,131,116,1) );
}

@mixin color-accent-student-hover-text {
  &:hover { color: var( --color-accent-student-color , rgba(0,131,116,1) ); }
}

@mixin color-accent-student-hover-text {
  &:hover { background-color: var( --color-accent-student-color , rgba(0,131,116,1) ); }
}

// ================================
// [COLOR_TOKEN] color-accent-student-06

@mixin color-accent-student-06-background {
  background-color: var( --color-accent-student-06-color , rgba(47,156,143,1) );
}

@mixin color-accent-student-06-text {
  color: var( --color-accent-student-06-color , rgba(47,156,143,1) );
}

@mixin color-accent-student-06-border {
  border-color: var( --color-accent-student-06-color , rgba(47,156,143,1) );
}

@mixin color-accent-student-06-hover-text {
  &:hover { color: var( --color-accent-student-06-color , rgba(47,156,143,1) ); }
}

@mixin color-accent-student-06-hover-text {
  &:hover { background-color: var( --color-accent-student-06-color , rgba(47,156,143,1) ); }
}

// ================================
// [COLOR_TOKEN] color-accent-student-light

@mixin color-accent-student-light-background {
  background-color: var( --color-accent-student-light-color , rgba(47,156,143,1) );
}

@mixin color-accent-student-light-text {
  color: var( --color-accent-student-light-color , rgba(47,156,143,1) );
}

@mixin color-accent-student-light-border {
  border-color: var( --color-accent-student-light-color , rgba(47,156,143,1) );
}

@mixin color-accent-student-light-hover-text {
  &:hover { color: var( --color-accent-student-light-color , rgba(47,156,143,1) ); }
}

@mixin color-accent-student-light-hover-text {
  &:hover { background-color: var( --color-accent-student-light-color , rgba(47,156,143,1) ); }
}

// ================================
// [COLOR_TOKEN] color-accent-student-07

@mixin color-accent-student-07-background {
  background-color: var( --color-accent-student-07-color , rgba(97,181,172,1) );
}

@mixin color-accent-student-07-text {
  color: var( --color-accent-student-07-color , rgba(97,181,172,1) );
}

@mixin color-accent-student-07-border {
  border-color: var( --color-accent-student-07-color , rgba(97,181,172,1) );
}

@mixin color-accent-student-07-hover-text {
  &:hover { color: var( --color-accent-student-07-color , rgba(97,181,172,1) ); }
}

@mixin color-accent-student-07-hover-text {
  &:hover { background-color: var( --color-accent-student-07-color , rgba(97,181,172,1) ); }
}

// ================================
// [COLOR_TOKEN] color-accent-student-lighter

@mixin color-accent-student-lighter-background {
  background-color: var( --color-accent-student-lighter-color , rgba(97,181,172,1) );
}

@mixin color-accent-student-lighter-text {
  color: var( --color-accent-student-lighter-color , rgba(97,181,172,1) );
}

@mixin color-accent-student-lighter-border {
  border-color: var( --color-accent-student-lighter-color , rgba(97,181,172,1) );
}

@mixin color-accent-student-lighter-hover-text {
  &:hover { color: var( --color-accent-student-lighter-color , rgba(97,181,172,1) ); }
}

@mixin color-accent-student-lighter-hover-text {
  &:hover { background-color: var( --color-accent-student-lighter-color , rgba(97,181,172,1) ); }
}

// ================================
// [COLOR_TOKEN] color-accent-student-08

@mixin color-accent-student-08-background {
  background-color: var( --color-accent-student-08-color , rgba(144,206,199,1) );
}

@mixin color-accent-student-08-text {
  color: var( --color-accent-student-08-color , rgba(144,206,199,1) );
}

@mixin color-accent-student-08-border {
  border-color: var( --color-accent-student-08-color , rgba(144,206,199,1) );
}

@mixin color-accent-student-08-hover-text {
  &:hover { color: var( --color-accent-student-08-color , rgba(144,206,199,1) ); }
}

@mixin color-accent-student-08-hover-text {
  &:hover { background-color: var( --color-accent-student-08-color , rgba(144,206,199,1) ); }
}

// ================================
// [COLOR_TOKEN] color-accent-student-lightest

@mixin color-accent-student-lightest-background {
  background-color: var( --color-accent-student-lightest-color , rgba(144,206,199,1) );
}

@mixin color-accent-student-lightest-text {
  color: var( --color-accent-student-lightest-color , rgba(144,206,199,1) );
}

@mixin color-accent-student-lightest-border {
  border-color: var( --color-accent-student-lightest-color , rgba(144,206,199,1) );
}

@mixin color-accent-student-lightest-hover-text {
  &:hover { color: var( --color-accent-student-lightest-color , rgba(144,206,199,1) ); }
}

@mixin color-accent-student-lightest-hover-text {
  &:hover { background-color: var( --color-accent-student-lightest-color , rgba(144,206,199,1) ); }
}

// ================================
// [COLOR_TOKEN] color-accent-student-09

@mixin color-accent-student-09-background {
  background-color: var( --color-accent-student-09-color , rgba(192,231,226,1) );
}

@mixin color-accent-student-09-text {
  color: var( --color-accent-student-09-color , rgba(192,231,226,1) );
}

@mixin color-accent-student-09-border {
  border-color: var( --color-accent-student-09-color , rgba(192,231,226,1) );
}

@mixin color-accent-student-09-hover-text {
  &:hover { color: var( --color-accent-student-09-color , rgba(192,231,226,1) ); }
}

@mixin color-accent-student-09-hover-text {
  &:hover { background-color: var( --color-accent-student-09-color , rgba(192,231,226,1) ); }
}

// ================================
// [COLOR_TOKEN] color-accent-student-095

@mixin color-accent-student-095-background {
  background-color: var( --color-accent-student-095-color , rgba(239,255,254,1) );
}

@mixin color-accent-student-095-text {
  color: var( --color-accent-student-095-color , rgba(239,255,254,1) );
}

@mixin color-accent-student-095-border {
  border-color: var( --color-accent-student-095-color , rgba(239,255,254,1) );
}

@mixin color-accent-student-095-hover-text {
  &:hover { color: var( --color-accent-student-095-color , rgba(239,255,254,1) ); }
}

@mixin color-accent-student-095-hover-text {
  &:hover { background-color: var( --color-accent-student-095-color , rgba(239,255,254,1) ); }
}

// ================================
// [COLOR_TOKEN] color-accent-student-text

@mixin color-accent-student-text-background {
  background-color: var( --color-accent-student-text-color , rgba(1,56,49,1) );
}

@mixin color-accent-student-text-text {
  color: var( --color-accent-student-text-color , rgba(1,56,49,1) );
}

@mixin color-accent-student-text-border {
  border-color: var( --color-accent-student-text-color , rgba(1,56,49,1) );
}

@mixin color-accent-student-text-hover-text {
  &:hover { color: var( --color-accent-student-text-color , rgba(1,56,49,1) ); }
}

@mixin color-accent-student-text-hover-text {
  &:hover { background-color: var( --color-accent-student-text-color , rgba(1,56,49,1) ); }
}

// ================================
// [COLOR_TOKEN] color-accent-student-text-light

@mixin color-accent-student-text-light-background {
  background-color: var( --color-accent-student-text-light-color , rgba(0,73,64,1) );
}

@mixin color-accent-student-text-light-text {
  color: var( --color-accent-student-text-light-color , rgba(0,73,64,1) );
}

@mixin color-accent-student-text-light-border {
  border-color: var( --color-accent-student-text-light-color , rgba(0,73,64,1) );
}

@mixin color-accent-student-text-light-hover-text {
  &:hover { color: var( --color-accent-student-text-light-color , rgba(0,73,64,1) ); }
}

@mixin color-accent-student-text-light-hover-text {
  &:hover { background-color: var( --color-accent-student-text-light-color , rgba(0,73,64,1) ); }
}

// ================================
// [COLOR_TOKEN] color-accent-student-text-lighter

@mixin color-accent-student-text-lighter-background {
  background-color: var( --color-accent-student-text-lighter-color , rgba(0,80,70,1) );
}

@mixin color-accent-student-text-lighter-text {
  color: var( --color-accent-student-text-lighter-color , rgba(0,80,70,1) );
}

@mixin color-accent-student-text-lighter-border {
  border-color: var( --color-accent-student-text-lighter-color , rgba(0,80,70,1) );
}

@mixin color-accent-student-text-lighter-hover-text {
  &:hover { color: var( --color-accent-student-text-lighter-color , rgba(0,80,70,1) ); }
}

@mixin color-accent-student-text-lighter-hover-text {
  &:hover { background-color: var( --color-accent-student-text-lighter-color , rgba(0,80,70,1) ); }
}

// ================================
// [COLOR_TOKEN] color-accent-student-text-lightest

@mixin color-accent-student-text-lightest-background {
  background-color: var( --color-accent-student-text-lightest-color , rgba(0,111,97,1) );
}

@mixin color-accent-student-text-lightest-text {
  color: var( --color-accent-student-text-lightest-color , rgba(0,111,97,1) );
}

@mixin color-accent-student-text-lightest-border {
  border-color: var( --color-accent-student-text-lightest-color , rgba(0,111,97,1) );
}

@mixin color-accent-student-text-lightest-hover-text {
  &:hover { color: var( --color-accent-student-text-lightest-color , rgba(0,111,97,1) ); }
}

@mixin color-accent-student-text-lightest-hover-text {
  &:hover { background-color: var( --color-accent-student-text-lightest-color , rgba(0,111,97,1) ); }
}

// ================================
// [COLOR_TOKEN] color-accent-student-text-inv

@mixin color-accent-student-text-inv-background {
  background-color: var( --color-accent-student-text-inv-color , rgba(239,255,254,1) );
}

@mixin color-accent-student-text-inv-text {
  color: var( --color-accent-student-text-inv-color , rgba(239,255,254,1) );
}

@mixin color-accent-student-text-inv-border {
  border-color: var( --color-accent-student-text-inv-color , rgba(239,255,254,1) );
}

@mixin color-accent-student-text-inv-hover-text {
  &:hover { color: var( --color-accent-student-text-inv-color , rgba(239,255,254,1) ); }
}

@mixin color-accent-student-text-inv-hover-text {
  &:hover { background-color: var( --color-accent-student-text-inv-color , rgba(239,255,254,1) ); }
}

// ================================
// [COLOR_TOKEN] color-accent-student-text-inv-dark

@mixin color-accent-student-text-inv-dark-background {
  background-color: var( --color-accent-student-text-inv-dark-color , rgba(208,245,243,1) );
}

@mixin color-accent-student-text-inv-dark-text {
  color: var( --color-accent-student-text-inv-dark-color , rgba(208,245,243,1) );
}

@mixin color-accent-student-text-inv-dark-border {
  border-color: var( --color-accent-student-text-inv-dark-color , rgba(208,245,243,1) );
}

@mixin color-accent-student-text-inv-dark-hover-text {
  &:hover { color: var( --color-accent-student-text-inv-dark-color , rgba(208,245,243,1) ); }
}

@mixin color-accent-student-text-inv-dark-hover-text {
  &:hover { background-color: var( --color-accent-student-text-inv-dark-color , rgba(208,245,243,1) ); }
}

// ================================
// [COLOR_TOKEN] color-accent-student-text-inv-darker

@mixin color-accent-student-text-inv-darker-background {
  background-color: var( --color-accent-student-text-inv-darker-color , rgba(140,214,206,1) );
}

@mixin color-accent-student-text-inv-darker-text {
  color: var( --color-accent-student-text-inv-darker-color , rgba(140,214,206,1) );
}

@mixin color-accent-student-text-inv-darker-border {
  border-color: var( --color-accent-student-text-inv-darker-color , rgba(140,214,206,1) );
}

@mixin color-accent-student-text-inv-darker-hover-text {
  &:hover { color: var( --color-accent-student-text-inv-darker-color , rgba(140,214,206,1) ); }
}

@mixin color-accent-student-text-inv-darker-hover-text {
  &:hover { background-color: var( --color-accent-student-text-inv-darker-color , rgba(140,214,206,1) ); }
}

// ================================
// [COLOR_TOKEN] color-accent-student-text-inv-darkest

@mixin color-accent-student-text-inv-darkest-background {
  background-color: var( --color-accent-student-text-inv-darkest-color , rgba(97,181,172,1) );
}

@mixin color-accent-student-text-inv-darkest-text {
  color: var( --color-accent-student-text-inv-darkest-color , rgba(97,181,172,1) );
}

@mixin color-accent-student-text-inv-darkest-border {
  border-color: var( --color-accent-student-text-inv-darkest-color , rgba(97,181,172,1) );
}

@mixin color-accent-student-text-inv-darkest-hover-text {
  &:hover { color: var( --color-accent-student-text-inv-darkest-color , rgba(97,181,172,1) ); }
}

@mixin color-accent-student-text-inv-darkest-hover-text {
  &:hover { background-color: var( --color-accent-student-text-inv-darkest-color , rgba(97,181,172,1) ); }
}

// ================================
// [COLOR_TOKEN] color-accent-savings-01

@mixin color-accent-savings-01-background {
  background-color: var( --color-accent-savings-01-color , rgba(45,17,1,1) );
}

@mixin color-accent-savings-01-text {
  color: var( --color-accent-savings-01-color , rgba(45,17,1,1) );
}

@mixin color-accent-savings-01-border {
  border-color: var( --color-accent-savings-01-color , rgba(45,17,1,1) );
}

@mixin color-accent-savings-01-hover-text {
  &:hover { color: var( --color-accent-savings-01-color , rgba(45,17,1,1) ); }
}

@mixin color-accent-savings-01-hover-text {
  &:hover { background-color: var( --color-accent-savings-01-color , rgba(45,17,1,1) ); }
}

// ================================
// [COLOR_TOKEN] color-accent-savings-02

@mixin color-accent-savings-02-background {
  background-color: var( --color-accent-savings-02-color , rgba(83,32,1,1) );
}

@mixin color-accent-savings-02-text {
  color: var( --color-accent-savings-02-color , rgba(83,32,1,1) );
}

@mixin color-accent-savings-02-border {
  border-color: var( --color-accent-savings-02-color , rgba(83,32,1,1) );
}

@mixin color-accent-savings-02-hover-text {
  &:hover { color: var( --color-accent-savings-02-color , rgba(83,32,1,1) ); }
}

@mixin color-accent-savings-02-hover-text {
  &:hover { background-color: var( --color-accent-savings-02-color , rgba(83,32,1,1) ); }
}

// ================================
// [COLOR_TOKEN] color-accent-savings-darkest

@mixin color-accent-savings-darkest-background {
  background-color: var( --color-accent-savings-darkest-color , rgba(83,32,1,1) );
}

@mixin color-accent-savings-darkest-text {
  color: var( --color-accent-savings-darkest-color , rgba(83,32,1,1) );
}

@mixin color-accent-savings-darkest-border {
  border-color: var( --color-accent-savings-darkest-color , rgba(83,32,1,1) );
}

@mixin color-accent-savings-darkest-hover-text {
  &:hover { color: var( --color-accent-savings-darkest-color , rgba(83,32,1,1) ); }
}

@mixin color-accent-savings-darkest-hover-text {
  &:hover { background-color: var( --color-accent-savings-darkest-color , rgba(83,32,1,1) ); }
}

// ================================
// [COLOR_TOKEN] color-accent-savings-03

@mixin color-accent-savings-03-background {
  background-color: var( --color-accent-savings-03-color , rgba(123,47,1,1) );
}

@mixin color-accent-savings-03-text {
  color: var( --color-accent-savings-03-color , rgba(123,47,1,1) );
}

@mixin color-accent-savings-03-border {
  border-color: var( --color-accent-savings-03-color , rgba(123,47,1,1) );
}

@mixin color-accent-savings-03-hover-text {
  &:hover { color: var( --color-accent-savings-03-color , rgba(123,47,1,1) ); }
}

@mixin color-accent-savings-03-hover-text {
  &:hover { background-color: var( --color-accent-savings-03-color , rgba(123,47,1,1) ); }
}

// ================================
// [COLOR_TOKEN] color-accent-savings-darker

@mixin color-accent-savings-darker-background {
  background-color: var( --color-accent-savings-darker-color , rgba(123,47,1,1) );
}

@mixin color-accent-savings-darker-text {
  color: var( --color-accent-savings-darker-color , rgba(123,47,1,1) );
}

@mixin color-accent-savings-darker-border {
  border-color: var( --color-accent-savings-darker-color , rgba(123,47,1,1) );
}

@mixin color-accent-savings-darker-hover-text {
  &:hover { color: var( --color-accent-savings-darker-color , rgba(123,47,1,1) ); }
}

@mixin color-accent-savings-darker-hover-text {
  &:hover { background-color: var( --color-accent-savings-darker-color , rgba(123,47,1,1) ); }
}

// ================================
// [COLOR_TOKEN] color-accent-savings-04

@mixin color-accent-savings-04-background {
  background-color: var( --color-accent-savings-04-color , rgba(161,61,1,1) );
}

@mixin color-accent-savings-04-text {
  color: var( --color-accent-savings-04-color , rgba(161,61,1,1) );
}

@mixin color-accent-savings-04-border {
  border-color: var( --color-accent-savings-04-color , rgba(161,61,1,1) );
}

@mixin color-accent-savings-04-hover-text {
  &:hover { color: var( --color-accent-savings-04-color , rgba(161,61,1,1) ); }
}

@mixin color-accent-savings-04-hover-text {
  &:hover { background-color: var( --color-accent-savings-04-color , rgba(161,61,1,1) ); }
}

// ================================
// [COLOR_TOKEN] color-accent-savings-dark

@mixin color-accent-savings-dark-background {
  background-color: var( --color-accent-savings-dark-color , rgba(161,61,1,1) );
}

@mixin color-accent-savings-dark-text {
  color: var( --color-accent-savings-dark-color , rgba(161,61,1,1) );
}

@mixin color-accent-savings-dark-border {
  border-color: var( --color-accent-savings-dark-color , rgba(161,61,1,1) );
}

@mixin color-accent-savings-dark-hover-text {
  &:hover { color: var( --color-accent-savings-dark-color , rgba(161,61,1,1) ); }
}

@mixin color-accent-savings-dark-hover-text {
  &:hover { background-color: var( --color-accent-savings-dark-color , rgba(161,61,1,1) ); }
}

// ================================
// [COLOR_TOKEN] color-accent-savings-05

@mixin color-accent-savings-05-background {
  background-color: var( --color-accent-savings-05-color , rgba(203,77,0,1) );
}

@mixin color-accent-savings-05-text {
  color: var( --color-accent-savings-05-color , rgba(203,77,0,1) );
}

@mixin color-accent-savings-05-border {
  border-color: var( --color-accent-savings-05-color , rgba(203,77,0,1) );
}

@mixin color-accent-savings-05-hover-text {
  &:hover { color: var( --color-accent-savings-05-color , rgba(203,77,0,1) ); }
}

@mixin color-accent-savings-05-hover-text {
  &:hover { background-color: var( --color-accent-savings-05-color , rgba(203,77,0,1) ); }
}

// ================================
// [COLOR_TOKEN] color-accent-savings

@mixin color-accent-savings-background {
  background-color: var( --color-accent-savings-color , rgba(203,77,0,1) );
}

@mixin color-accent-savings-text {
  color: var( --color-accent-savings-color , rgba(203,77,0,1) );
}

@mixin color-accent-savings-border {
  border-color: var( --color-accent-savings-color , rgba(203,77,0,1) );
}

@mixin color-accent-savings-hover-text {
  &:hover { color: var( --color-accent-savings-color , rgba(203,77,0,1) ); }
}

@mixin color-accent-savings-hover-text {
  &:hover { background-color: var( --color-accent-savings-color , rgba(203,77,0,1) ); }
}

// ================================
// [COLOR_TOKEN] color-accent-savings-06

@mixin color-accent-savings-06-background {
  background-color: var( --color-accent-savings-06-color , rgba(214,110,47,1) );
}

@mixin color-accent-savings-06-text {
  color: var( --color-accent-savings-06-color , rgba(214,110,47,1) );
}

@mixin color-accent-savings-06-border {
  border-color: var( --color-accent-savings-06-color , rgba(214,110,47,1) );
}

@mixin color-accent-savings-06-hover-text {
  &:hover { color: var( --color-accent-savings-06-color , rgba(214,110,47,1) ); }
}

@mixin color-accent-savings-06-hover-text {
  &:hover { background-color: var( --color-accent-savings-06-color , rgba(214,110,47,1) ); }
}

// ================================
// [COLOR_TOKEN] color-accent-savings-light

@mixin color-accent-savings-light-background {
  background-color: var( --color-accent-savings-light-color , rgba(214,110,47,1) );
}

@mixin color-accent-savings-light-text {
  color: var( --color-accent-savings-light-color , rgba(214,110,47,1) );
}

@mixin color-accent-savings-light-border {
  border-color: var( --color-accent-savings-light-color , rgba(214,110,47,1) );
}

@mixin color-accent-savings-light-hover-text {
  &:hover { color: var( --color-accent-savings-light-color , rgba(214,110,47,1) ); }
}

@mixin color-accent-savings-light-hover-text {
  &:hover { background-color: var( --color-accent-savings-light-color , rgba(214,110,47,1) ); }
}

// ================================
// [COLOR_TOKEN] color-accent-savings-07

@mixin color-accent-savings-07-background {
  background-color: var( --color-accent-savings-07-color , rgba(224,143,94,1) );
}

@mixin color-accent-savings-07-text {
  color: var( --color-accent-savings-07-color , rgba(224,143,94,1) );
}

@mixin color-accent-savings-07-border {
  border-color: var( --color-accent-savings-07-color , rgba(224,143,94,1) );
}

@mixin color-accent-savings-07-hover-text {
  &:hover { color: var( --color-accent-savings-07-color , rgba(224,143,94,1) ); }
}

@mixin color-accent-savings-07-hover-text {
  &:hover { background-color: var( --color-accent-savings-07-color , rgba(224,143,94,1) ); }
}

// ================================
// [COLOR_TOKEN] color-accent-savings-lighter

@mixin color-accent-savings-lighter-background {
  background-color: var( --color-accent-savings-lighter-color , rgba(224,143,94,1) );
}

@mixin color-accent-savings-lighter-text {
  color: var( --color-accent-savings-lighter-color , rgba(224,143,94,1) );
}

@mixin color-accent-savings-lighter-border {
  border-color: var( --color-accent-savings-lighter-color , rgba(224,143,94,1) );
}

@mixin color-accent-savings-lighter-hover-text {
  &:hover { color: var( --color-accent-savings-lighter-color , rgba(224,143,94,1) ); }
}

@mixin color-accent-savings-lighter-hover-text {
  &:hover { background-color: var( --color-accent-savings-lighter-color , rgba(224,143,94,1) ); }
}

// ================================
// [COLOR_TOKEN] color-accent-savings-08

@mixin color-accent-savings-08-background {
  background-color: var( --color-accent-savings-08-color , rgba(234,177,142,1) );
}

@mixin color-accent-savings-08-text {
  color: var( --color-accent-savings-08-color , rgba(234,177,142,1) );
}

@mixin color-accent-savings-08-border {
  border-color: var( --color-accent-savings-08-color , rgba(234,177,142,1) );
}

@mixin color-accent-savings-08-hover-text {
  &:hover { color: var( --color-accent-savings-08-color , rgba(234,177,142,1) ); }
}

@mixin color-accent-savings-08-hover-text {
  &:hover { background-color: var( --color-accent-savings-08-color , rgba(234,177,142,1) ); }
}

// ================================
// [COLOR_TOKEN] color-accent-savings-lightest

@mixin color-accent-savings-lightest-background {
  background-color: var( --color-accent-savings-lightest-color , rgba(234,177,142,1) );
}

@mixin color-accent-savings-lightest-text {
  color: var( --color-accent-savings-lightest-color , rgba(234,177,142,1) );
}

@mixin color-accent-savings-lightest-border {
  border-color: var( --color-accent-savings-lightest-color , rgba(234,177,142,1) );
}

@mixin color-accent-savings-lightest-hover-text {
  &:hover { color: var( --color-accent-savings-lightest-color , rgba(234,177,142,1) ); }
}

@mixin color-accent-savings-lightest-hover-text {
  &:hover { background-color: var( --color-accent-savings-lightest-color , rgba(234,177,142,1) ); }
}

// ================================
// [COLOR_TOKEN] color-accent-savings-09

@mixin color-accent-savings-09-background {
  background-color: var( --color-accent-savings-09-color , rgba(245,213,193,1) );
}

@mixin color-accent-savings-09-text {
  color: var( --color-accent-savings-09-color , rgba(245,213,193,1) );
}

@mixin color-accent-savings-09-border {
  border-color: var( --color-accent-savings-09-color , rgba(245,213,193,1) );
}

@mixin color-accent-savings-09-hover-text {
  &:hover { color: var( --color-accent-savings-09-color , rgba(245,213,193,1) ); }
}

@mixin color-accent-savings-09-hover-text {
  &:hover { background-color: var( --color-accent-savings-09-color , rgba(245,213,193,1) ); }
}

// ================================
// [COLOR_TOKEN] color-accent-savings-095

@mixin color-accent-savings-095-background {
  background-color: var( --color-accent-savings-095-color , rgba(255,246,241,1) );
}

@mixin color-accent-savings-095-text {
  color: var( --color-accent-savings-095-color , rgba(255,246,241,1) );
}

@mixin color-accent-savings-095-border {
  border-color: var( --color-accent-savings-095-color , rgba(255,246,241,1) );
}

@mixin color-accent-savings-095-hover-text {
  &:hover { color: var( --color-accent-savings-095-color , rgba(255,246,241,1) ); }
}

@mixin color-accent-savings-095-hover-text {
  &:hover { background-color: var( --color-accent-savings-095-color , rgba(255,246,241,1) ); }
}

// ================================
// [COLOR_TOKEN] color-accent-savings-text

@mixin color-accent-savings-text-background {
  background-color: var( --color-accent-savings-text-color , rgba(45,17,1,1) );
}

@mixin color-accent-savings-text-text {
  color: var( --color-accent-savings-text-color , rgba(45,17,1,1) );
}

@mixin color-accent-savings-text-border {
  border-color: var( --color-accent-savings-text-color , rgba(45,17,1,1) );
}

@mixin color-accent-savings-text-hover-text {
  &:hover { color: var( --color-accent-savings-text-color , rgba(45,17,1,1) ); }
}

@mixin color-accent-savings-text-hover-text {
  &:hover { background-color: var( --color-accent-savings-text-color , rgba(45,17,1,1) ); }
}

// ================================
// [COLOR_TOKEN] color-accent-savings-text-light

@mixin color-accent-savings-text-light-background {
  background-color: var( --color-accent-savings-text-light-color , rgba(71,26,1,1) );
}

@mixin color-accent-savings-text-light-text {
  color: var( --color-accent-savings-text-light-color , rgba(71,26,1,1) );
}

@mixin color-accent-savings-text-light-border {
  border-color: var( --color-accent-savings-text-light-color , rgba(71,26,1,1) );
}

@mixin color-accent-savings-text-light-hover-text {
  &:hover { color: var( --color-accent-savings-text-light-color , rgba(71,26,1,1) ); }
}

@mixin color-accent-savings-text-light-hover-text {
  &:hover { background-color: var( --color-accent-savings-text-light-color , rgba(71,26,1,1) ); }
}

// ================================
// [COLOR_TOKEN] color-accent-savings-text-lighter

@mixin color-accent-savings-text-lighter-background {
  background-color: var( --color-accent-savings-text-lighter-color , rgba(99,37,0,1) );
}

@mixin color-accent-savings-text-lighter-text {
  color: var( --color-accent-savings-text-lighter-color , rgba(99,37,0,1) );
}

@mixin color-accent-savings-text-lighter-border {
  border-color: var( --color-accent-savings-text-lighter-color , rgba(99,37,0,1) );
}

@mixin color-accent-savings-text-lighter-hover-text {
  &:hover { color: var( --color-accent-savings-text-lighter-color , rgba(99,37,0,1) ); }
}

@mixin color-accent-savings-text-lighter-hover-text {
  &:hover { background-color: var( --color-accent-savings-text-lighter-color , rgba(99,37,0,1) ); }
}

// ================================
// [COLOR_TOKEN] color-accent-savings-text-lightest

@mixin color-accent-savings-text-lightest-background {
  background-color: var( --color-accent-savings-text-lightest-color , rgba(123,47,1,1) );
}

@mixin color-accent-savings-text-lightest-text {
  color: var( --color-accent-savings-text-lightest-color , rgba(123,47,1,1) );
}

@mixin color-accent-savings-text-lightest-border {
  border-color: var( --color-accent-savings-text-lightest-color , rgba(123,47,1,1) );
}

@mixin color-accent-savings-text-lightest-hover-text {
  &:hover { color: var( --color-accent-savings-text-lightest-color , rgba(123,47,1,1) ); }
}

@mixin color-accent-savings-text-lightest-hover-text {
  &:hover { background-color: var( --color-accent-savings-text-lightest-color , rgba(123,47,1,1) ); }
}

// ================================
// [COLOR_TOKEN] color-accent-savings-text-inv

@mixin color-accent-savings-text-inv-background {
  background-color: var( --color-accent-savings-text-inv-color , rgba(255,246,241,1) );
}

@mixin color-accent-savings-text-inv-text {
  color: var( --color-accent-savings-text-inv-color , rgba(255,246,241,1) );
}

@mixin color-accent-savings-text-inv-border {
  border-color: var( --color-accent-savings-text-inv-color , rgba(255,246,241,1) );
}

@mixin color-accent-savings-text-inv-hover-text {
  &:hover { color: var( --color-accent-savings-text-inv-color , rgba(255,246,241,1) ); }
}

@mixin color-accent-savings-text-inv-hover-text {
  &:hover { background-color: var( --color-accent-savings-text-inv-color , rgba(255,246,241,1) ); }
}

// ================================
// [COLOR_TOKEN] color-accent-savings-text-inv-dark

@mixin color-accent-savings-text-inv-dark-background {
  background-color: var( --color-accent-savings-text-inv-dark-color , rgba(255,229,215,1) );
}

@mixin color-accent-savings-text-inv-dark-text {
  color: var( --color-accent-savings-text-inv-dark-color , rgba(255,229,215,1) );
}

@mixin color-accent-savings-text-inv-dark-border {
  border-color: var( --color-accent-savings-text-inv-dark-color , rgba(255,229,215,1) );
}

@mixin color-accent-savings-text-inv-dark-hover-text {
  &:hover { color: var( --color-accent-savings-text-inv-dark-color , rgba(255,229,215,1) ); }
}

@mixin color-accent-savings-text-inv-dark-hover-text {
  &:hover { background-color: var( --color-accent-savings-text-inv-dark-color , rgba(255,229,215,1) ); }
}

// ================================
// [COLOR_TOKEN] color-accent-savings-text-inv-darker

@mixin color-accent-savings-text-inv-darker-background {
  background-color: var( --color-accent-savings-text-inv-darker-color , rgba(246,202,175,1) );
}

@mixin color-accent-savings-text-inv-darker-text {
  color: var( --color-accent-savings-text-inv-darker-color , rgba(246,202,175,1) );
}

@mixin color-accent-savings-text-inv-darker-border {
  border-color: var( --color-accent-savings-text-inv-darker-color , rgba(246,202,175,1) );
}

@mixin color-accent-savings-text-inv-darker-hover-text {
  &:hover { color: var( --color-accent-savings-text-inv-darker-color , rgba(246,202,175,1) ); }
}

@mixin color-accent-savings-text-inv-darker-hover-text {
  &:hover { background-color: var( --color-accent-savings-text-inv-darker-color , rgba(246,202,175,1) ); }
}

// ================================
// [COLOR_TOKEN] color-accent-savings-text-inv-darkest

@mixin color-accent-savings-text-inv-darkest-background {
  background-color: var( --color-accent-savings-text-inv-darkest-color , rgba(224,143,94,1) );
}

@mixin color-accent-savings-text-inv-darkest-text {
  color: var( --color-accent-savings-text-inv-darkest-color , rgba(224,143,94,1) );
}

@mixin color-accent-savings-text-inv-darkest-border {
  border-color: var( --color-accent-savings-text-inv-darkest-color , rgba(224,143,94,1) );
}

@mixin color-accent-savings-text-inv-darkest-hover-text {
  &:hover { color: var( --color-accent-savings-text-inv-darkest-color , rgba(224,143,94,1) ); }
}

@mixin color-accent-savings-text-inv-darkest-hover-text {
  &:hover { background-color: var( --color-accent-savings-text-inv-darkest-color , rgba(224,143,94,1) ); }
}

// ================================
// [COLOR_TOKEN] color-accent-checking-01

@mixin color-accent-checking-01-background {
  background-color: var( --color-accent-checking-01-color , rgba(69,1,3,1) );
}

@mixin color-accent-checking-01-text {
  color: var( --color-accent-checking-01-color , rgba(69,1,3,1) );
}

@mixin color-accent-checking-01-border {
  border-color: var( --color-accent-checking-01-color , rgba(69,1,3,1) );
}

@mixin color-accent-checking-01-hover-text {
  &:hover { color: var( --color-accent-checking-01-color , rgba(69,1,3,1) ); }
}

@mixin color-accent-checking-01-hover-text {
  &:hover { background-color: var( --color-accent-checking-01-color , rgba(69,1,3,1) ); }
}

// ================================
// [COLOR_TOKEN] color-accent-checking-02

@mixin color-accent-checking-02-background {
  background-color: var( --color-accent-checking-02-color , rgba(101,11,13,1) );
}

@mixin color-accent-checking-02-text {
  color: var( --color-accent-checking-02-color , rgba(101,11,13,1) );
}

@mixin color-accent-checking-02-border {
  border-color: var( --color-accent-checking-02-color , rgba(101,11,13,1) );
}

@mixin color-accent-checking-02-hover-text {
  &:hover { color: var( --color-accent-checking-02-color , rgba(101,11,13,1) ); }
}

@mixin color-accent-checking-02-hover-text {
  &:hover { background-color: var( --color-accent-checking-02-color , rgba(101,11,13,1) ); }
}

// ================================
// [COLOR_TOKEN] color-accent-checking-darkest

@mixin color-accent-checking-darkest-background {
  background-color: var( --color-accent-checking-darkest-color , rgba(101,11,13,1) );
}

@mixin color-accent-checking-darkest-text {
  color: var( --color-accent-checking-darkest-color , rgba(101,11,13,1) );
}

@mixin color-accent-checking-darkest-border {
  border-color: var( --color-accent-checking-darkest-color , rgba(101,11,13,1) );
}

@mixin color-accent-checking-darkest-hover-text {
  &:hover { color: var( --color-accent-checking-darkest-color , rgba(101,11,13,1) ); }
}

@mixin color-accent-checking-darkest-hover-text {
  &:hover { background-color: var( --color-accent-checking-darkest-color , rgba(101,11,13,1) ); }
}

// ================================
// [COLOR_TOKEN] color-accent-checking-03

@mixin color-accent-checking-03-background {
  background-color: var( --color-accent-checking-03-color , rgba(134,21,24,1) );
}

@mixin color-accent-checking-03-text {
  color: var( --color-accent-checking-03-color , rgba(134,21,24,1) );
}

@mixin color-accent-checking-03-border {
  border-color: var( --color-accent-checking-03-color , rgba(134,21,24,1) );
}

@mixin color-accent-checking-03-hover-text {
  &:hover { color: var( --color-accent-checking-03-color , rgba(134,21,24,1) ); }
}

@mixin color-accent-checking-03-hover-text {
  &:hover { background-color: var( --color-accent-checking-03-color , rgba(134,21,24,1) ); }
}

// ================================
// [COLOR_TOKEN] color-accent-checking-darker

@mixin color-accent-checking-darker-background {
  background-color: var( --color-accent-checking-darker-color , rgba(134,21,24,1) );
}

@mixin color-accent-checking-darker-text {
  color: var( --color-accent-checking-darker-color , rgba(134,21,24,1) );
}

@mixin color-accent-checking-darker-border {
  border-color: var( --color-accent-checking-darker-color , rgba(134,21,24,1) );
}

@mixin color-accent-checking-darker-hover-text {
  &:hover { color: var( --color-accent-checking-darker-color , rgba(134,21,24,1) ); }
}

@mixin color-accent-checking-darker-hover-text {
  &:hover { background-color: var( --color-accent-checking-darker-color , rgba(134,21,24,1) ); }
}

// ================================
// [COLOR_TOKEN] color-accent-checking-04

@mixin color-accent-checking-04-background {
  background-color: var( --color-accent-checking-04-color , rgba(167,30,34,1) );
}

@mixin color-accent-checking-04-text {
  color: var( --color-accent-checking-04-color , rgba(167,30,34,1) );
}

@mixin color-accent-checking-04-border {
  border-color: var( --color-accent-checking-04-color , rgba(167,30,34,1) );
}

@mixin color-accent-checking-04-hover-text {
  &:hover { color: var( --color-accent-checking-04-color , rgba(167,30,34,1) ); }
}

@mixin color-accent-checking-04-hover-text {
  &:hover { background-color: var( --color-accent-checking-04-color , rgba(167,30,34,1) ); }
}

// ================================
// [COLOR_TOKEN] color-accent-checking-dark

@mixin color-accent-checking-dark-background {
  background-color: var( --color-accent-checking-dark-color , rgba(167,30,34,1) );
}

@mixin color-accent-checking-dark-text {
  color: var( --color-accent-checking-dark-color , rgba(167,30,34,1) );
}

@mixin color-accent-checking-dark-border {
  border-color: var( --color-accent-checking-dark-color , rgba(167,30,34,1) );
}

@mixin color-accent-checking-dark-hover-text {
  &:hover { color: var( --color-accent-checking-dark-color , rgba(167,30,34,1) ); }
}

@mixin color-accent-checking-dark-hover-text {
  &:hover { background-color: var( --color-accent-checking-dark-color , rgba(167,30,34,1) ); }
}

// ================================
// [COLOR_TOKEN] color-accent-checking-05

@mixin color-accent-checking-05-background {
  background-color: var( --color-accent-checking-05-color , rgba(201,40,45,1) );
}

@mixin color-accent-checking-05-text {
  color: var( --color-accent-checking-05-color , rgba(201,40,45,1) );
}

@mixin color-accent-checking-05-border {
  border-color: var( --color-accent-checking-05-color , rgba(201,40,45,1) );
}

@mixin color-accent-checking-05-hover-text {
  &:hover { color: var( --color-accent-checking-05-color , rgba(201,40,45,1) ); }
}

@mixin color-accent-checking-05-hover-text {
  &:hover { background-color: var( --color-accent-checking-05-color , rgba(201,40,45,1) ); }
}

// ================================
// [COLOR_TOKEN] color-accent-checking

@mixin color-accent-checking-background {
  background-color: var( --color-accent-checking-color , rgba(201,40,45,1) );
}

@mixin color-accent-checking-text {
  color: var( --color-accent-checking-color , rgba(201,40,45,1) );
}

@mixin color-accent-checking-border {
  border-color: var( --color-accent-checking-color , rgba(201,40,45,1) );
}

@mixin color-accent-checking-hover-text {
  &:hover { color: var( --color-accent-checking-color , rgba(201,40,45,1) ); }
}

@mixin color-accent-checking-hover-text {
  &:hover { background-color: var( --color-accent-checking-color , rgba(201,40,45,1) ); }
}

// ================================
// [COLOR_TOKEN] color-accent-checking-06

@mixin color-accent-checking-06-background {
  background-color: var( --color-accent-checking-06-color , rgba(212,78,82,1) );
}

@mixin color-accent-checking-06-text {
  color: var( --color-accent-checking-06-color , rgba(212,78,82,1) );
}

@mixin color-accent-checking-06-border {
  border-color: var( --color-accent-checking-06-color , rgba(212,78,82,1) );
}

@mixin color-accent-checking-06-hover-text {
  &:hover { color: var( --color-accent-checking-06-color , rgba(212,78,82,1) ); }
}

@mixin color-accent-checking-06-hover-text {
  &:hover { background-color: var( --color-accent-checking-06-color , rgba(212,78,82,1) ); }
}

// ================================
// [COLOR_TOKEN] color-accent-checking-light

@mixin color-accent-checking-light-background {
  background-color: var( --color-accent-checking-light-color , rgba(212,78,82,1) );
}

@mixin color-accent-checking-light-text {
  color: var( --color-accent-checking-light-color , rgba(212,78,82,1) );
}

@mixin color-accent-checking-light-border {
  border-color: var( --color-accent-checking-light-color , rgba(212,78,82,1) );
}

@mixin color-accent-checking-light-hover-text {
  &:hover { color: var( --color-accent-checking-light-color , rgba(212,78,82,1) ); }
}

@mixin color-accent-checking-light-hover-text {
  &:hover { background-color: var( --color-accent-checking-light-color , rgba(212,78,82,1) ); }
}

// ================================
// [COLOR_TOKEN] color-accent-checking-07

@mixin color-accent-checking-07-background {
  background-color: var( --color-accent-checking-07-color , rgba(222,115,118,1) );
}

@mixin color-accent-checking-07-text {
  color: var( --color-accent-checking-07-color , rgba(222,115,118,1) );
}

@mixin color-accent-checking-07-border {
  border-color: var( --color-accent-checking-07-color , rgba(222,115,118,1) );
}

@mixin color-accent-checking-07-hover-text {
  &:hover { color: var( --color-accent-checking-07-color , rgba(222,115,118,1) ); }
}

@mixin color-accent-checking-07-hover-text {
  &:hover { background-color: var( --color-accent-checking-07-color , rgba(222,115,118,1) ); }
}

// ================================
// [COLOR_TOKEN] color-accent-checking-lighter

@mixin color-accent-checking-lighter-background {
  background-color: var( --color-accent-checking-lighter-color , rgba(222,115,118,1) );
}

@mixin color-accent-checking-lighter-text {
  color: var( --color-accent-checking-lighter-color , rgba(222,115,118,1) );
}

@mixin color-accent-checking-lighter-border {
  border-color: var( --color-accent-checking-lighter-color , rgba(222,115,118,1) );
}

@mixin color-accent-checking-lighter-hover-text {
  &:hover { color: var( --color-accent-checking-lighter-color , rgba(222,115,118,1) ); }
}

@mixin color-accent-checking-lighter-hover-text {
  &:hover { background-color: var( --color-accent-checking-lighter-color , rgba(222,115,118,1) ); }
}

// ================================
// [COLOR_TOKEN] color-accent-checking-08

@mixin color-accent-checking-08-background {
  background-color: var( --color-accent-checking-08-color , rgba(233,155,158,1) );
}

@mixin color-accent-checking-08-text {
  color: var( --color-accent-checking-08-color , rgba(233,155,158,1) );
}

@mixin color-accent-checking-08-border {
  border-color: var( --color-accent-checking-08-color , rgba(233,155,158,1) );
}

@mixin color-accent-checking-08-hover-text {
  &:hover { color: var( --color-accent-checking-08-color , rgba(233,155,158,1) ); }
}

@mixin color-accent-checking-08-hover-text {
  &:hover { background-color: var( --color-accent-checking-08-color , rgba(233,155,158,1) ); }
}

// ================================
// [COLOR_TOKEN] color-accent-checking-lightest

@mixin color-accent-checking-lightest-background {
  background-color: var( --color-accent-checking-lightest-color , rgba(233,155,158,1) );
}

@mixin color-accent-checking-lightest-text {
  color: var( --color-accent-checking-lightest-color , rgba(233,155,158,1) );
}

@mixin color-accent-checking-lightest-border {
  border-color: var( --color-accent-checking-lightest-color , rgba(233,155,158,1) );
}

@mixin color-accent-checking-lightest-hover-text {
  &:hover { color: var( --color-accent-checking-lightest-color , rgba(233,155,158,1) ); }
}

@mixin color-accent-checking-lightest-hover-text {
  &:hover { background-color: var( --color-accent-checking-lightest-color , rgba(233,155,158,1) ); }
}

// ================================
// [COLOR_TOKEN] color-accent-checking-09

@mixin color-accent-checking-09-background {
  background-color: var( --color-accent-checking-09-color , rgba(245,197,199,1) );
}

@mixin color-accent-checking-09-text {
  color: var( --color-accent-checking-09-color , rgba(245,197,199,1) );
}

@mixin color-accent-checking-09-border {
  border-color: var( --color-accent-checking-09-color , rgba(245,197,199,1) );
}

@mixin color-accent-checking-09-hover-text {
  &:hover { color: var( --color-accent-checking-09-color , rgba(245,197,199,1) ); }
}

@mixin color-accent-checking-09-hover-text {
  &:hover { background-color: var( --color-accent-checking-09-color , rgba(245,197,199,1) ); }
}

// ================================
// [COLOR_TOKEN] color-accent-checking-095

@mixin color-accent-checking-095-background {
  background-color: var( --color-accent-checking-095-color , rgba(255,236,237,1) );
}

@mixin color-accent-checking-095-text {
  color: var( --color-accent-checking-095-color , rgba(255,236,237,1) );
}

@mixin color-accent-checking-095-border {
  border-color: var( --color-accent-checking-095-color , rgba(255,236,237,1) );
}

@mixin color-accent-checking-095-hover-text {
  &:hover { color: var( --color-accent-checking-095-color , rgba(255,236,237,1) ); }
}

@mixin color-accent-checking-095-hover-text {
  &:hover { background-color: var( --color-accent-checking-095-color , rgba(255,236,237,1) ); }
}

// ================================
// [COLOR_TOKEN] color-accent-checking-text

@mixin color-accent-checking-text-background {
  background-color: var( --color-accent-checking-text-color , rgba(69,1,3,1) );
}

@mixin color-accent-checking-text-text {
  color: var( --color-accent-checking-text-color , rgba(69,1,3,1) );
}

@mixin color-accent-checking-text-border {
  border-color: var( --color-accent-checking-text-color , rgba(69,1,3,1) );
}

@mixin color-accent-checking-text-hover-text {
  &:hover { color: var( --color-accent-checking-text-color , rgba(69,1,3,1) ); }
}

@mixin color-accent-checking-text-hover-text {
  &:hover { background-color: var( --color-accent-checking-text-color , rgba(69,1,3,1) ); }
}

// ================================
// [COLOR_TOKEN] color-accent-checking-text-light

@mixin color-accent-checking-text-light-background {
  background-color: var( --color-accent-checking-text-light-color , rgba(69,1,3,1) );
}

@mixin color-accent-checking-text-light-text {
  color: var( --color-accent-checking-text-light-color , rgba(69,1,3,1) );
}

@mixin color-accent-checking-text-light-border {
  border-color: var( --color-accent-checking-text-light-color , rgba(69,1,3,1) );
}

@mixin color-accent-checking-text-light-hover-text {
  &:hover { color: var( --color-accent-checking-text-light-color , rgba(69,1,3,1) ); }
}

@mixin color-accent-checking-text-light-hover-text {
  &:hover { background-color: var( --color-accent-checking-text-light-color , rgba(69,1,3,1) ); }
}

// ================================
// [COLOR_TOKEN] color-accent-checking-text-lighter

@mixin color-accent-checking-text-lighter-background {
  background-color: var( --color-accent-checking-text-lighter-color , rgba(134,21,24,1) );
}

@mixin color-accent-checking-text-lighter-text {
  color: var( --color-accent-checking-text-lighter-color , rgba(134,21,24,1) );
}

@mixin color-accent-checking-text-lighter-border {
  border-color: var( --color-accent-checking-text-lighter-color , rgba(134,21,24,1) );
}

@mixin color-accent-checking-text-lighter-hover-text {
  &:hover { color: var( --color-accent-checking-text-lighter-color , rgba(134,21,24,1) ); }
}

@mixin color-accent-checking-text-lighter-hover-text {
  &:hover { background-color: var( --color-accent-checking-text-lighter-color , rgba(134,21,24,1) ); }
}

// ================================
// [COLOR_TOKEN] color-accent-checking-text-lightest

@mixin color-accent-checking-text-lightest-background {
  background-color: var( --color-accent-checking-text-lightest-color , rgba(134,21,24,1) );
}

@mixin color-accent-checking-text-lightest-text {
  color: var( --color-accent-checking-text-lightest-color , rgba(134,21,24,1) );
}

@mixin color-accent-checking-text-lightest-border {
  border-color: var( --color-accent-checking-text-lightest-color , rgba(134,21,24,1) );
}

@mixin color-accent-checking-text-lightest-hover-text {
  &:hover { color: var( --color-accent-checking-text-lightest-color , rgba(134,21,24,1) ); }
}

@mixin color-accent-checking-text-lightest-hover-text {
  &:hover { background-color: var( --color-accent-checking-text-lightest-color , rgba(134,21,24,1) ); }
}

// ================================
// [COLOR_TOKEN] color-accent-checking-text-inv

@mixin color-accent-checking-text-inv-background {
  background-color: var( --color-accent-checking-text-inv-color , rgba(255,236,237,1) );
}

@mixin color-accent-checking-text-inv-text {
  color: var( --color-accent-checking-text-inv-color , rgba(255,236,237,1) );
}

@mixin color-accent-checking-text-inv-border {
  border-color: var( --color-accent-checking-text-inv-color , rgba(255,236,237,1) );
}

@mixin color-accent-checking-text-inv-hover-text {
  &:hover { color: var( --color-accent-checking-text-inv-color , rgba(255,236,237,1) ); }
}

@mixin color-accent-checking-text-inv-hover-text {
  &:hover { background-color: var( --color-accent-checking-text-inv-color , rgba(255,236,237,1) ); }
}

// ================================
// [COLOR_TOKEN] color-accent-checking-text-inv-dark

@mixin color-accent-checking-text-inv-dark-background {
  background-color: var( --color-accent-checking-text-inv-dark-color , rgba(243,181,185,1) );
}

@mixin color-accent-checking-text-inv-dark-text {
  color: var( --color-accent-checking-text-inv-dark-color , rgba(243,181,185,1) );
}

@mixin color-accent-checking-text-inv-dark-border {
  border-color: var( --color-accent-checking-text-inv-dark-color , rgba(243,181,185,1) );
}

@mixin color-accent-checking-text-inv-dark-hover-text {
  &:hover { color: var( --color-accent-checking-text-inv-dark-color , rgba(243,181,185,1) ); }
}

@mixin color-accent-checking-text-inv-dark-hover-text {
  &:hover { background-color: var( --color-accent-checking-text-inv-dark-color , rgba(243,181,185,1) ); }
}

// ================================
// [COLOR_TOKEN] color-accent-checking-text-inv-darker

@mixin color-accent-checking-text-inv-darker-background {
  background-color: var( --color-accent-checking-text-inv-darker-color , rgba(236,146,149,1) );
}

@mixin color-accent-checking-text-inv-darker-text {
  color: var( --color-accent-checking-text-inv-darker-color , rgba(236,146,149,1) );
}

@mixin color-accent-checking-text-inv-darker-border {
  border-color: var( --color-accent-checking-text-inv-darker-color , rgba(236,146,149,1) );
}

@mixin color-accent-checking-text-inv-darker-hover-text {
  &:hover { color: var( --color-accent-checking-text-inv-darker-color , rgba(236,146,149,1) ); }
}

@mixin color-accent-checking-text-inv-darker-hover-text {
  &:hover { background-color: var( --color-accent-checking-text-inv-darker-color , rgba(236,146,149,1) ); }
}

// ================================
// [COLOR_TOKEN] color-accent-checking-text-inv-darkest

@mixin color-accent-checking-text-inv-darkest-background {
  background-color: var( --color-accent-checking-text-inv-darkest-color , rgba(222,115,118,1) );
}

@mixin color-accent-checking-text-inv-darkest-text {
  color: var( --color-accent-checking-text-inv-darkest-color , rgba(222,115,118,1) );
}

@mixin color-accent-checking-text-inv-darkest-border {
  border-color: var( --color-accent-checking-text-inv-darkest-color , rgba(222,115,118,1) );
}

@mixin color-accent-checking-text-inv-darkest-hover-text {
  &:hover { color: var( --color-accent-checking-text-inv-darkest-color , rgba(222,115,118,1) ); }
}

@mixin color-accent-checking-text-inv-darkest-hover-text {
  &:hover { background-color: var( --color-accent-checking-text-inv-darkest-color , rgba(222,115,118,1) ); }
}

// ================================
// [COLOR_TOKEN] color-accent-checking-purple-01

@mixin color-accent-checking-purple-01-background {
  background-color: var( --color-accent-checking-purple-01-color , rgba(36,1,51,1) );
}

@mixin color-accent-checking-purple-01-text {
  color: var( --color-accent-checking-purple-01-color , rgba(36,1,51,1) );
}

@mixin color-accent-checking-purple-01-border {
  border-color: var( --color-accent-checking-purple-01-color , rgba(36,1,51,1) );
}

@mixin color-accent-checking-purple-01-hover-text {
  &:hover { color: var( --color-accent-checking-purple-01-color , rgba(36,1,51,1) ); }
}

@mixin color-accent-checking-purple-01-hover-text {
  &:hover { background-color: var( --color-accent-checking-purple-01-color , rgba(36,1,51,1) ); }
}

// ================================
// [COLOR_TOKEN] color-accent-checking-purple-02

@mixin color-accent-checking-purple-02-background {
  background-color: var( --color-accent-checking-purple-02-color , rgba(64,20,83,1) );
}

@mixin color-accent-checking-purple-02-text {
  color: var( --color-accent-checking-purple-02-color , rgba(64,20,83,1) );
}

@mixin color-accent-checking-purple-02-border {
  border-color: var( --color-accent-checking-purple-02-color , rgba(64,20,83,1) );
}

@mixin color-accent-checking-purple-02-hover-text {
  &:hover { color: var( --color-accent-checking-purple-02-color , rgba(64,20,83,1) ); }
}

@mixin color-accent-checking-purple-02-hover-text {
  &:hover { background-color: var( --color-accent-checking-purple-02-color , rgba(64,20,83,1) ); }
}

// ================================
// [COLOR_TOKEN] color-accent-checking-purple-darkest

@mixin color-accent-checking-purple-darkest-background {
  background-color: var( --color-accent-checking-purple-darkest-color , rgba(64,20,83,1) );
}

@mixin color-accent-checking-purple-darkest-text {
  color: var( --color-accent-checking-purple-darkest-color , rgba(64,20,83,1) );
}

@mixin color-accent-checking-purple-darkest-border {
  border-color: var( --color-accent-checking-purple-darkest-color , rgba(64,20,83,1) );
}

@mixin color-accent-checking-purple-darkest-hover-text {
  &:hover { color: var( --color-accent-checking-purple-darkest-color , rgba(64,20,83,1) ); }
}

@mixin color-accent-checking-purple-darkest-hover-text {
  &:hover { background-color: var( --color-accent-checking-purple-darkest-color , rgba(64,20,83,1) ); }
}

// ================================
// [COLOR_TOKEN] color-accent-checking-purple-03

@mixin color-accent-checking-purple-03-background {
  background-color: var( --color-accent-checking-purple-03-color , rgba(92,39,114,1) );
}

@mixin color-accent-checking-purple-03-text {
  color: var( --color-accent-checking-purple-03-color , rgba(92,39,114,1) );
}

@mixin color-accent-checking-purple-03-border {
  border-color: var( --color-accent-checking-purple-03-color , rgba(92,39,114,1) );
}

@mixin color-accent-checking-purple-03-hover-text {
  &:hover { color: var( --color-accent-checking-purple-03-color , rgba(92,39,114,1) ); }
}

@mixin color-accent-checking-purple-03-hover-text {
  &:hover { background-color: var( --color-accent-checking-purple-03-color , rgba(92,39,114,1) ); }
}

// ================================
// [COLOR_TOKEN] color-accent-checking-purple-darker

@mixin color-accent-checking-purple-darker-background {
  background-color: var( --color-accent-checking-purple-darker-color , rgba(92,39,114,1) );
}

@mixin color-accent-checking-purple-darker-text {
  color: var( --color-accent-checking-purple-darker-color , rgba(92,39,114,1) );
}

@mixin color-accent-checking-purple-darker-border {
  border-color: var( --color-accent-checking-purple-darker-color , rgba(92,39,114,1) );
}

@mixin color-accent-checking-purple-darker-hover-text {
  &:hover { color: var( --color-accent-checking-purple-darker-color , rgba(92,39,114,1) ); }
}

@mixin color-accent-checking-purple-darker-hover-text {
  &:hover { background-color: var( --color-accent-checking-purple-darker-color , rgba(92,39,114,1) ); }
}

// ================================
// [COLOR_TOKEN] color-accent-checking-purple-04

@mixin color-accent-checking-purple-04-background {
  background-color: var( --color-accent-checking-purple-04-color , rgba(119,58,145,1) );
}

@mixin color-accent-checking-purple-04-text {
  color: var( --color-accent-checking-purple-04-color , rgba(119,58,145,1) );
}

@mixin color-accent-checking-purple-04-border {
  border-color: var( --color-accent-checking-purple-04-color , rgba(119,58,145,1) );
}

@mixin color-accent-checking-purple-04-hover-text {
  &:hover { color: var( --color-accent-checking-purple-04-color , rgba(119,58,145,1) ); }
}

@mixin color-accent-checking-purple-04-hover-text {
  &:hover { background-color: var( --color-accent-checking-purple-04-color , rgba(119,58,145,1) ); }
}

// ================================
// [COLOR_TOKEN] color-accent-checking-purple-dark

@mixin color-accent-checking-purple-dark-background {
  background-color: var( --color-accent-checking-purple-dark-color , rgba(119,58,145,1) );
}

@mixin color-accent-checking-purple-dark-text {
  color: var( --color-accent-checking-purple-dark-color , rgba(119,58,145,1) );
}

@mixin color-accent-checking-purple-dark-border {
  border-color: var( --color-accent-checking-purple-dark-color , rgba(119,58,145,1) );
}

@mixin color-accent-checking-purple-dark-hover-text {
  &:hover { color: var( --color-accent-checking-purple-dark-color , rgba(119,58,145,1) ); }
}

@mixin color-accent-checking-purple-dark-hover-text {
  &:hover { background-color: var( --color-accent-checking-purple-dark-color , rgba(119,58,145,1) ); }
}

// ================================
// [COLOR_TOKEN] color-accent-checking-purple-05

@mixin color-accent-checking-purple-05-background {
  background-color: var( --color-accent-checking-purple-05-color , rgba(148,77,178,1) );
}

@mixin color-accent-checking-purple-05-text {
  color: var( --color-accent-checking-purple-05-color , rgba(148,77,178,1) );
}

@mixin color-accent-checking-purple-05-border {
  border-color: var( --color-accent-checking-purple-05-color , rgba(148,77,178,1) );
}

@mixin color-accent-checking-purple-05-hover-text {
  &:hover { color: var( --color-accent-checking-purple-05-color , rgba(148,77,178,1) ); }
}

@mixin color-accent-checking-purple-05-hover-text {
  &:hover { background-color: var( --color-accent-checking-purple-05-color , rgba(148,77,178,1) ); }
}

// ================================
// [COLOR_TOKEN] color-accent-checking-purple

@mixin color-accent-checking-purple-background {
  background-color: var( --color-accent-checking-purple-color , rgba(148,77,178,1) );
}

@mixin color-accent-checking-purple-text {
  color: var( --color-accent-checking-purple-color , rgba(148,77,178,1) );
}

@mixin color-accent-checking-purple-border {
  border-color: var( --color-accent-checking-purple-color , rgba(148,77,178,1) );
}

@mixin color-accent-checking-purple-hover-text {
  &:hover { color: var( --color-accent-checking-purple-color , rgba(148,77,178,1) ); }
}

@mixin color-accent-checking-purple-hover-text {
  &:hover { background-color: var( --color-accent-checking-purple-color , rgba(148,77,178,1) ); }
}

// ================================
// [COLOR_TOKEN] color-accent-checking-purple-06

@mixin color-accent-checking-purple-06-background {
  background-color: var( --color-accent-checking-purple-06-color , rgba(168,109,193,1) );
}

@mixin color-accent-checking-purple-06-text {
  color: var( --color-accent-checking-purple-06-color , rgba(168,109,193,1) );
}

@mixin color-accent-checking-purple-06-border {
  border-color: var( --color-accent-checking-purple-06-color , rgba(168,109,193,1) );
}

@mixin color-accent-checking-purple-06-hover-text {
  &:hover { color: var( --color-accent-checking-purple-06-color , rgba(168,109,193,1) ); }
}

@mixin color-accent-checking-purple-06-hover-text {
  &:hover { background-color: var( --color-accent-checking-purple-06-color , rgba(168,109,193,1) ); }
}

// ================================
// [COLOR_TOKEN] color-accent-checking-purple-light

@mixin color-accent-checking-purple-light-background {
  background-color: var( --color-accent-checking-purple-light-color , rgba(168,109,193,1) );
}

@mixin color-accent-checking-purple-light-text {
  color: var( --color-accent-checking-purple-light-color , rgba(168,109,193,1) );
}

@mixin color-accent-checking-purple-light-border {
  border-color: var( --color-accent-checking-purple-light-color , rgba(168,109,193,1) );
}

@mixin color-accent-checking-purple-light-hover-text {
  &:hover { color: var( --color-accent-checking-purple-light-color , rgba(168,109,193,1) ); }
}

@mixin color-accent-checking-purple-light-hover-text {
  &:hover { background-color: var( --color-accent-checking-purple-light-color , rgba(168,109,193,1) ); }
}

// ================================
// [COLOR_TOKEN] color-accent-checking-purple-07

@mixin color-accent-checking-purple-07-background {
  background-color: var( --color-accent-checking-purple-07-color , rgba(188,140,208,1) );
}

@mixin color-accent-checking-purple-07-text {
  color: var( --color-accent-checking-purple-07-color , rgba(188,140,208,1) );
}

@mixin color-accent-checking-purple-07-border {
  border-color: var( --color-accent-checking-purple-07-color , rgba(188,140,208,1) );
}

@mixin color-accent-checking-purple-07-hover-text {
  &:hover { color: var( --color-accent-checking-purple-07-color , rgba(188,140,208,1) ); }
}

@mixin color-accent-checking-purple-07-hover-text {
  &:hover { background-color: var( --color-accent-checking-purple-07-color , rgba(188,140,208,1) ); }
}

// ================================
// [COLOR_TOKEN] color-accent-checking-purple-lighter

@mixin color-accent-checking-purple-lighter-background {
  background-color: var( --color-accent-checking-purple-lighter-color , rgba(188,140,208,1) );
}

@mixin color-accent-checking-purple-lighter-text {
  color: var( --color-accent-checking-purple-lighter-color , rgba(188,140,208,1) );
}

@mixin color-accent-checking-purple-lighter-border {
  border-color: var( --color-accent-checking-purple-lighter-color , rgba(188,140,208,1) );
}

@mixin color-accent-checking-purple-lighter-hover-text {
  &:hover { color: var( --color-accent-checking-purple-lighter-color , rgba(188,140,208,1) ); }
}

@mixin color-accent-checking-purple-lighter-hover-text {
  &:hover { background-color: var( --color-accent-checking-purple-lighter-color , rgba(188,140,208,1) ); }
}

// ================================
// [COLOR_TOKEN] color-accent-checking-purple-08

@mixin color-accent-checking-purple-08-background {
  background-color: var( --color-accent-checking-purple-08-color , rgba(208,172,224,1) );
}

@mixin color-accent-checking-purple-08-text {
  color: var( --color-accent-checking-purple-08-color , rgba(208,172,224,1) );
}

@mixin color-accent-checking-purple-08-border {
  border-color: var( --color-accent-checking-purple-08-color , rgba(208,172,224,1) );
}

@mixin color-accent-checking-purple-08-hover-text {
  &:hover { color: var( --color-accent-checking-purple-08-color , rgba(208,172,224,1) ); }
}

@mixin color-accent-checking-purple-08-hover-text {
  &:hover { background-color: var( --color-accent-checking-purple-08-color , rgba(208,172,224,1) ); }
}

// ================================
// [COLOR_TOKEN] color-accent-checking-purple-lightest

@mixin color-accent-checking-purple-lightest-background {
  background-color: var( --color-accent-checking-purple-lightest-color , rgba(208,172,224,1) );
}

@mixin color-accent-checking-purple-lightest-text {
  color: var( --color-accent-checking-purple-lightest-color , rgba(208,172,224,1) );
}

@mixin color-accent-checking-purple-lightest-border {
  border-color: var( --color-accent-checking-purple-lightest-color , rgba(208,172,224,1) );
}

@mixin color-accent-checking-purple-lightest-hover-text {
  &:hover { color: var( --color-accent-checking-purple-lightest-color , rgba(208,172,224,1) ); }
}

@mixin color-accent-checking-purple-lightest-hover-text {
  &:hover { background-color: var( --color-accent-checking-purple-lightest-color , rgba(208,172,224,1) ); }
}

// ================================
// [COLOR_TOKEN] color-accent-checking-purple-09

@mixin color-accent-checking-purple-09-background {
  background-color: var( --color-accent-checking-purple-09-color , rgba(230,206,240,1) );
}

@mixin color-accent-checking-purple-09-text {
  color: var( --color-accent-checking-purple-09-color , rgba(230,206,240,1) );
}

@mixin color-accent-checking-purple-09-border {
  border-color: var( --color-accent-checking-purple-09-color , rgba(230,206,240,1) );
}

@mixin color-accent-checking-purple-09-hover-text {
  &:hover { color: var( --color-accent-checking-purple-09-color , rgba(230,206,240,1) ); }
}

@mixin color-accent-checking-purple-09-hover-text {
  &:hover { background-color: var( --color-accent-checking-purple-09-color , rgba(230,206,240,1) ); }
}

// ================================
// [COLOR_TOKEN] color-accent-checking-purple-095

@mixin color-accent-checking-purple-095-background {
  background-color: var( --color-accent-checking-purple-095-color , rgba(251,239,255,1) );
}

@mixin color-accent-checking-purple-095-text {
  color: var( --color-accent-checking-purple-095-color , rgba(251,239,255,1) );
}

@mixin color-accent-checking-purple-095-border {
  border-color: var( --color-accent-checking-purple-095-color , rgba(251,239,255,1) );
}

@mixin color-accent-checking-purple-095-hover-text {
  &:hover { color: var( --color-accent-checking-purple-095-color , rgba(251,239,255,1) ); }
}

@mixin color-accent-checking-purple-095-hover-text {
  &:hover { background-color: var( --color-accent-checking-purple-095-color , rgba(251,239,255,1) ); }
}

// ================================
// [COLOR_TOKEN] color-accent-checking-purple-text

@mixin color-accent-checking-purple-text-background {
  background-color: var( --color-accent-checking-purple-text-color , rgba(36,1,51,1) );
}

@mixin color-accent-checking-purple-text-text {
  color: var( --color-accent-checking-purple-text-color , rgba(36,1,51,1) );
}

@mixin color-accent-checking-purple-text-border {
  border-color: var( --color-accent-checking-purple-text-color , rgba(36,1,51,1) );
}

@mixin color-accent-checking-purple-text-hover-text {
  &:hover { color: var( --color-accent-checking-purple-text-color , rgba(36,1,51,1) ); }
}

@mixin color-accent-checking-purple-text-hover-text {
  &:hover { background-color: var( --color-accent-checking-purple-text-color , rgba(36,1,51,1) ); }
}

// ================================
// [COLOR_TOKEN] color-accent-checking-purple-text-light

@mixin color-accent-checking-purple-text-light-background {
  background-color: var( --color-accent-checking-purple-text-light-color , rgba(36,1,51,1) );
}

@mixin color-accent-checking-purple-text-light-text {
  color: var( --color-accent-checking-purple-text-light-color , rgba(36,1,51,1) );
}

@mixin color-accent-checking-purple-text-light-border {
  border-color: var( --color-accent-checking-purple-text-light-color , rgba(36,1,51,1) );
}

@mixin color-accent-checking-purple-text-light-hover-text {
  &:hover { color: var( --color-accent-checking-purple-text-light-color , rgba(36,1,51,1) ); }
}

@mixin color-accent-checking-purple-text-light-hover-text {
  &:hover { background-color: var( --color-accent-checking-purple-text-light-color , rgba(36,1,51,1) ); }
}

// ================================
// [COLOR_TOKEN] color-accent-checking-purple-text-lighter

@mixin color-accent-checking-purple-text-lighter-background {
  background-color: var( --color-accent-checking-purple-text-lighter-color , rgba(92,39,114,1) );
}

@mixin color-accent-checking-purple-text-lighter-text {
  color: var( --color-accent-checking-purple-text-lighter-color , rgba(92,39,114,1) );
}

@mixin color-accent-checking-purple-text-lighter-border {
  border-color: var( --color-accent-checking-purple-text-lighter-color , rgba(92,39,114,1) );
}

@mixin color-accent-checking-purple-text-lighter-hover-text {
  &:hover { color: var( --color-accent-checking-purple-text-lighter-color , rgba(92,39,114,1) ); }
}

@mixin color-accent-checking-purple-text-lighter-hover-text {
  &:hover { background-color: var( --color-accent-checking-purple-text-lighter-color , rgba(92,39,114,1) ); }
}

// ================================
// [COLOR_TOKEN] color-accent-checking-purple-text-lightest

@mixin color-accent-checking-purple-text-lightest-background {
  background-color: var( --color-accent-checking-purple-text-lightest-color , rgba(92,39,114,1) );
}

@mixin color-accent-checking-purple-text-lightest-text {
  color: var( --color-accent-checking-purple-text-lightest-color , rgba(92,39,114,1) );
}

@mixin color-accent-checking-purple-text-lightest-border {
  border-color: var( --color-accent-checking-purple-text-lightest-color , rgba(92,39,114,1) );
}

@mixin color-accent-checking-purple-text-lightest-hover-text {
  &:hover { color: var( --color-accent-checking-purple-text-lightest-color , rgba(92,39,114,1) ); }
}

@mixin color-accent-checking-purple-text-lightest-hover-text {
  &:hover { background-color: var( --color-accent-checking-purple-text-lightest-color , rgba(92,39,114,1) ); }
}

// ================================
// [COLOR_TOKEN] color-accent-checking-purple-text-inv

@mixin color-accent-checking-purple-text-inv-background {
  background-color: var( --color-accent-checking-purple-text-inv-color , rgba(251,239,255,1) );
}

@mixin color-accent-checking-purple-text-inv-text {
  color: var( --color-accent-checking-purple-text-inv-color , rgba(251,239,255,1) );
}

@mixin color-accent-checking-purple-text-inv-border {
  border-color: var( --color-accent-checking-purple-text-inv-color , rgba(251,239,255,1) );
}

@mixin color-accent-checking-purple-text-inv-hover-text {
  &:hover { color: var( --color-accent-checking-purple-text-inv-color , rgba(251,239,255,1) ); }
}

@mixin color-accent-checking-purple-text-inv-hover-text {
  &:hover { background-color: var( --color-accent-checking-purple-text-inv-color , rgba(251,239,255,1) ); }
}

// ================================
// [COLOR_TOKEN] color-accent-checking-purple-text-inv-dark

@mixin color-accent-checking-purple-text-inv-dark-background {
  background-color: var( --color-accent-checking-purple-text-inv-dark-color , rgba(244,212,255,1) );
}

@mixin color-accent-checking-purple-text-inv-dark-text {
  color: var( --color-accent-checking-purple-text-inv-dark-color , rgba(244,212,255,1) );
}

@mixin color-accent-checking-purple-text-inv-dark-border {
  border-color: var( --color-accent-checking-purple-text-inv-dark-color , rgba(244,212,255,1) );
}

@mixin color-accent-checking-purple-text-inv-dark-hover-text {
  &:hover { color: var( --color-accent-checking-purple-text-inv-dark-color , rgba(244,212,255,1) ); }
}

@mixin color-accent-checking-purple-text-inv-dark-hover-text {
  &:hover { background-color: var( --color-accent-checking-purple-text-inv-dark-color , rgba(244,212,255,1) ); }
}

// ================================
// [COLOR_TOKEN] color-accent-checking-purple-text-inv-darker

@mixin color-accent-checking-purple-text-inv-darker-background {
  background-color: var( --color-accent-checking-purple-text-inv-darker-color , rgba(216,176,233,1) );
}

@mixin color-accent-checking-purple-text-inv-darker-text {
  color: var( --color-accent-checking-purple-text-inv-darker-color , rgba(216,176,233,1) );
}

@mixin color-accent-checking-purple-text-inv-darker-border {
  border-color: var( --color-accent-checking-purple-text-inv-darker-color , rgba(216,176,233,1) );
}

@mixin color-accent-checking-purple-text-inv-darker-hover-text {
  &:hover { color: var( --color-accent-checking-purple-text-inv-darker-color , rgba(216,176,233,1) ); }
}

@mixin color-accent-checking-purple-text-inv-darker-hover-text {
  &:hover { background-color: var( --color-accent-checking-purple-text-inv-darker-color , rgba(216,176,233,1) ); }
}

// ================================
// [COLOR_TOKEN] color-accent-checking-purple-text-inv-darkest

@mixin color-accent-checking-purple-text-inv-darkest-background {
  background-color: var( --color-accent-checking-purple-text-inv-darkest-color , rgba(188,140,208,1) );
}

@mixin color-accent-checking-purple-text-inv-darkest-text {
  color: var( --color-accent-checking-purple-text-inv-darkest-color , rgba(188,140,208,1) );
}

@mixin color-accent-checking-purple-text-inv-darkest-border {
  border-color: var( --color-accent-checking-purple-text-inv-darkest-color , rgba(188,140,208,1) );
}

@mixin color-accent-checking-purple-text-inv-darkest-hover-text {
  &:hover { color: var( --color-accent-checking-purple-text-inv-darkest-color , rgba(188,140,208,1) ); }
}

@mixin color-accent-checking-purple-text-inv-darkest-hover-text {
  &:hover { background-color: var( --color-accent-checking-purple-text-inv-darkest-color , rgba(188,140,208,1) ); }
}

// ================================
// [COLOR_TOKEN] color-icon

@mixin color-icon-background {
  background-color: var( --color-icon-color , rgba(1,1,1,1) );
}

@mixin color-icon-text {
  color: var( --color-icon-color , rgba(1,1,1,1) );
}

@mixin color-icon-border {
  border-color: var( --color-icon-color , rgba(1,1,1,1) );
}

@mixin color-icon-hover-text {
  &:hover { color: var( --color-icon-color , rgba(1,1,1,1) ); }
}

@mixin color-icon-hover-text {
  &:hover { background-color: var( --color-icon-color , rgba(1,1,1,1) ); }
}

// ================================
// [TEXT_TOKEN] type-header-1

@mixin type-header-1 { 
  position: relative;
  font-size: var( --type-header-1-font-size , 22px );
  text-align: var( --type-header-1-text-align-horizontal , LEFT );
  color: var( --type-header-1-color , rgba(0,0,0,1) );
  font-family: var( --type-header-1-font-family , 'Open Sans' );
  font-weight: var( --type-header-1-font-weight , 400 );
  line-height: var( --type-header-1-line-height , 25.3px );
  letter-spacing: var( --type-header-1-letter-spacing , 0px ); 
}

@mixin type-header-1--sizing {
  width: NOT-FOUND;
  height: NOT-FOUND;
}

@mixin type-header-1--width {
  width: NOT-FOUND;
}

@mixin type-header-1--height {
  height: NOT-FOUND;
}

@mixin type-header-1--absolute-layout {
   
}

@mixin type-header-1--html-autolayout {
  display: inline-block;
  margin-left: var( --type-header-1-left , NOT-FOUND );
  margin-right: var( --type-header-1-right , NOT-FOUND );
  margin-top: var( --type-header-1-top , NOT-FOUND );
  margin-bottom: var( --type-header-1-bottom , NOT-FOUND );
  width: calc( 100% - ( var( --type-header-1-left , NOT-FOUND ) + var( --type-header-1-right , NOT-FOUND ) ) );
}

// ================================
// [TEXT_TOKEN] type-header-2

@mixin type-header-2 { 
  position: relative;
  font-size: var( --type-header-2-font-size , 20px );
  text-align: var( --type-header-2-text-align-horizontal , LEFT );
  color: var( --type-header-2-color , rgba(0,0,0,1) );
  font-family: var( --type-header-2-font-family , 'Open Sans' );
  font-weight: var( --type-header-2-font-weight , 400 );
  line-height: var( --type-header-2-line-height , 23.44px );
  letter-spacing: var( --type-header-2-letter-spacing , 0px ); 
}

@mixin type-header-2--sizing {
  width: NOT-FOUND;
  height: NOT-FOUND;
}

@mixin type-header-2--width {
  width: NOT-FOUND;
}

@mixin type-header-2--height {
  height: NOT-FOUND;
}

@mixin type-header-2--absolute-layout {
   
}

@mixin type-header-2--html-autolayout {
  display: inline-block;
  margin-left: var( --type-header-2-left , NOT-FOUND );
  margin-right: var( --type-header-2-right , NOT-FOUND );
  margin-top: var( --type-header-2-top , NOT-FOUND );
  margin-bottom: var( --type-header-2-bottom , NOT-FOUND );
  width: calc( 100% - ( var( --type-header-2-left , NOT-FOUND ) + var( --type-header-2-right , NOT-FOUND ) ) );
}

// ================================
// [TEXT_TOKEN] type-header-3

@mixin type-header-3 { 
  position: relative;
  font-size: var( --type-header-3-font-size , 18px );
  text-align: var( --type-header-3-text-align-horizontal , LEFT );
  color: var( --type-header-3-color , rgba(0,0,0,1) );
  font-family: var( --type-header-3-font-family , 'Open Sans' );
  font-weight: var( --type-header-3-font-weight , 600 );
  line-height: var( --type-header-3-line-height , 25.2px );
  letter-spacing: var( --type-header-3-letter-spacing , 0.18px ); 
}

@mixin type-header-3--sizing {
  width: NOT-FOUND;
  height: NOT-FOUND;
}

@mixin type-header-3--width {
  width: NOT-FOUND;
}

@mixin type-header-3--height {
  height: NOT-FOUND;
}

@mixin type-header-3--absolute-layout {
   
}

@mixin type-header-3--html-autolayout {
  display: inline-block;
  margin-left: var( --type-header-3-left , NOT-FOUND );
  margin-right: var( --type-header-3-right , NOT-FOUND );
  margin-top: var( --type-header-3-top , NOT-FOUND );
  margin-bottom: var( --type-header-3-bottom , NOT-FOUND );
  width: calc( 100% - ( var( --type-header-3-left , NOT-FOUND ) + var( --type-header-3-right , NOT-FOUND ) ) );
}

// ================================
// [TEXT_TOKEN] type-paragraph-1

@mixin type-paragraph-1 { 
  position: relative;
  font-size: var( --type-paragraph-1-font-size , 14px );
  text-align: var( --type-paragraph-1-text-align-horizontal , LEFT );
  color: var( --type-paragraph-1-color , rgba(0,0,0,1) );
  font-family: var( --type-paragraph-1-font-family , 'Open Sans' );
  font-weight: var( --type-paragraph-1-font-weight , 400 );
  line-height: var( --type-paragraph-1-line-height , 16.41px );
  letter-spacing: var( --type-paragraph-1-letter-spacing , 0px ); 
}

@mixin type-paragraph-1--sizing {
  width: NOT-FOUND;
  height: NOT-FOUND;
}

@mixin type-paragraph-1--width {
  width: NOT-FOUND;
}

@mixin type-paragraph-1--height {
  height: NOT-FOUND;
}

@mixin type-paragraph-1--absolute-layout {
   
}

@mixin type-paragraph-1--html-autolayout {
  display: inline-block;
  margin-left: var( --type-paragraph-1-left , NOT-FOUND );
  margin-right: var( --type-paragraph-1-right , NOT-FOUND );
  margin-top: var( --type-paragraph-1-top , NOT-FOUND );
  margin-bottom: var( --type-paragraph-1-bottom , NOT-FOUND );
  width: calc( 100% - ( var( --type-paragraph-1-left , NOT-FOUND ) + var( --type-paragraph-1-right , NOT-FOUND ) ) );
}

// ================================
// [TEXT_TOKEN] type-paragraph-2

@mixin type-paragraph-2 { 
  position: relative;
  font-size: var( --type-paragraph-2-font-size , 12px );
  text-align: var( --type-paragraph-2-text-align-horizontal , LEFT );
  color: var( --type-paragraph-2-color , rgba(0,0,0,1) );
  font-family: var( --type-paragraph-2-font-family , 'Open Sans' );
  font-weight: var( --type-paragraph-2-font-weight , 400 );
  line-height: var( --type-paragraph-2-line-height , 14.06px );
  letter-spacing: var( --type-paragraph-2-letter-spacing , 0px ); 
}

@mixin type-paragraph-2--sizing {
  width: NOT-FOUND;
  height: NOT-FOUND;
}

@mixin type-paragraph-2--width {
  width: NOT-FOUND;
}

@mixin type-paragraph-2--height {
  height: NOT-FOUND;
}

@mixin type-paragraph-2--absolute-layout {
   
}

@mixin type-paragraph-2--html-autolayout {
  display: inline-block;
  margin-left: var( --type-paragraph-2-left , NOT-FOUND );
  margin-right: var( --type-paragraph-2-right , NOT-FOUND );
  margin-top: var( --type-paragraph-2-top , NOT-FOUND );
  margin-bottom: var( --type-paragraph-2-bottom , NOT-FOUND );
  width: calc( 100% - ( var( --type-paragraph-2-left , NOT-FOUND ) + var( --type-paragraph-2-right , NOT-FOUND ) ) );
}

// ================================
// [TEXT_TOKEN] type-paragraph-3

@mixin type-paragraph-3 { 
  position: relative;
  font-size: var( --type-paragraph-3-font-size , 11px );
  text-align: var( --type-paragraph-3-text-align-horizontal , LEFT );
  color: var( --type-paragraph-3-color , rgba(0,0,0,1) );
  font-family: var( --type-paragraph-3-font-family , 'Open Sans' );
  font-weight: var( --type-paragraph-3-font-weight , 400 );
  line-height: var( --type-paragraph-3-line-height , 12.89px );
  letter-spacing: var( --type-paragraph-3-letter-spacing , 0px ); 
}

@mixin type-paragraph-3--sizing {
  width: NOT-FOUND;
  height: NOT-FOUND;
}

@mixin type-paragraph-3--width {
  width: NOT-FOUND;
}

@mixin type-paragraph-3--height {
  height: NOT-FOUND;
}

@mixin type-paragraph-3--absolute-layout {
   
}

@mixin type-paragraph-3--html-autolayout {
  display: inline-block;
  margin-left: var( --type-paragraph-3-left , NOT-FOUND );
  margin-right: var( --type-paragraph-3-right , NOT-FOUND );
  margin-top: var( --type-paragraph-3-top , NOT-FOUND );
  margin-bottom: var( --type-paragraph-3-bottom , NOT-FOUND );
  width: calc( 100% - ( var( --type-paragraph-3-left , NOT-FOUND ) + var( --type-paragraph-3-right , NOT-FOUND ) ) );
}

// ================================
// [TEXT_TOKEN] type-text-10

@mixin type-text-10 { 
  position: relative;
  font-size: var( --type-text-10-font-size , 30px );
  text-align: var( --type-text-10-text-align-horizontal , LEFT );
  color: var( --type-text-10-color , rgba(0,0,0,1) );
  font-family: var( --type-text-10-font-family , 'Proxima Nova' );
  font-weight: var( --type-text-10-font-weight , 400 );
  line-height: var( --type-text-10-line-height , 35.16px );
  letter-spacing: var( --type-text-10-letter-spacing , 0px ); 
}

@mixin type-text-10--sizing {
  width: NOT-FOUND;
  height: NOT-FOUND;
}

@mixin type-text-10--width {
  width: NOT-FOUND;
}

@mixin type-text-10--height {
  height: NOT-FOUND;
}

@mixin type-text-10--absolute-layout {
   
}

@mixin type-text-10--html-autolayout {
  display: inline-block;
  margin-left: var( --type-text-10-left , NOT-FOUND );
  margin-right: var( --type-text-10-right , NOT-FOUND );
  margin-top: var( --type-text-10-top , NOT-FOUND );
  margin-bottom: var( --type-text-10-bottom , NOT-FOUND );
  width: calc( 100% - ( var( --type-text-10-left , NOT-FOUND ) + var( --type-text-10-right , NOT-FOUND ) ) );
}

// ================================
// [TEXT_TOKEN] type-text-09

@mixin type-text-09 { 
  position: relative;
  font-size: var( --type-text-09-font-size , 24px );
  text-align: var( --type-text-09-text-align-horizontal , LEFT );
  color: var( --type-text-09-color , rgba(0,0,0,1) );
  font-family: var( --type-text-09-font-family , 'Proxima Nova' );
  font-weight: var( --type-text-09-font-weight , 400 );
  line-height: var( --type-text-09-line-height , 28.13px );
  letter-spacing: var( --type-text-09-letter-spacing , 0px ); 
}

@mixin type-text-09--sizing {
  width: NOT-FOUND;
  height: NOT-FOUND;
}

@mixin type-text-09--width {
  width: NOT-FOUND;
}

@mixin type-text-09--height {
  height: NOT-FOUND;
}

@mixin type-text-09--absolute-layout {
   
}

@mixin type-text-09--html-autolayout {
  display: inline-block;
  margin-left: var( --type-text-09-left , NOT-FOUND );
  margin-right: var( --type-text-09-right , NOT-FOUND );
  margin-top: var( --type-text-09-top , NOT-FOUND );
  margin-bottom: var( --type-text-09-bottom , NOT-FOUND );
  width: calc( 100% - ( var( --type-text-09-left , NOT-FOUND ) + var( --type-text-09-right , NOT-FOUND ) ) );
}

// ================================
// [TEXT_TOKEN] type-text-08

@mixin type-text-08 { 
  position: relative;
  font-size: var( --type-text-08-font-size , 21px );
  text-align: var( --type-text-08-text-align-horizontal , LEFT );
  color: var( --type-text-08-color , rgba(0,0,0,1) );
  font-family: var( --type-text-08-font-family , 'Proxima Nova' );
  font-weight: var( --type-text-08-font-weight , 400 );
  line-height: var( --type-text-08-line-height , 24.61px );
  letter-spacing: var( --type-text-08-letter-spacing , 0px ); 
}

@mixin type-text-08--sizing {
  width: NOT-FOUND;
  height: NOT-FOUND;
}

@mixin type-text-08--width {
  width: NOT-FOUND;
}

@mixin type-text-08--height {
  height: NOT-FOUND;
}

@mixin type-text-08--absolute-layout {
   
}

@mixin type-text-08--html-autolayout {
  display: inline-block;
  margin-left: var( --type-text-08-left , NOT-FOUND );
  margin-right: var( --type-text-08-right , NOT-FOUND );
  margin-top: var( --type-text-08-top , NOT-FOUND );
  margin-bottom: var( --type-text-08-bottom , NOT-FOUND );
  width: calc( 100% - ( var( --type-text-08-left , NOT-FOUND ) + var( --type-text-08-right , NOT-FOUND ) ) );
}

// ================================
// [TEXT_TOKEN] type-text-largest

@mixin type-text-largest { 
  position: relative;
  font-size: var( --type-text-largest-font-size , 21px );
  text-align: var( --type-text-largest-text-align-horizontal , LEFT );
  color: var( --type-text-largest-color , rgba(0,0,0,1) );
  font-family: var( --type-text-largest-font-family , 'Proxima Nova' );
  font-weight: var( --type-text-largest-font-weight , 400 );
  line-height: var( --type-text-largest-line-height , 24.61px );
  letter-spacing: var( --type-text-largest-letter-spacing , 0px ); 
}

@mixin type-text-largest--sizing {
  width: NOT-FOUND;
  height: NOT-FOUND;
}

@mixin type-text-largest--width {
  width: NOT-FOUND;
}

@mixin type-text-largest--height {
  height: NOT-FOUND;
}

@mixin type-text-largest--absolute-layout {
   
}

@mixin type-text-largest--html-autolayout {
  display: inline-block;
  margin-left: var( --type-text-largest-left , NOT-FOUND );
  margin-right: var( --type-text-largest-right , NOT-FOUND );
  margin-top: var( --type-text-largest-top , NOT-FOUND );
  margin-bottom: var( --type-text-largest-bottom , NOT-FOUND );
  width: calc( 100% - ( var( --type-text-largest-left , NOT-FOUND ) + var( --type-text-largest-right , NOT-FOUND ) ) );
}

// ================================
// [TEXT_TOKEN] type-text-07

@mixin type-text-07 { 
  position: relative;
  font-size: var( --type-text-07-font-size , 18px );
  text-align: var( --type-text-07-text-align-horizontal , LEFT );
  color: var( --type-text-07-color , rgba(0,0,0,1) );
  font-family: var( --type-text-07-font-family , 'Proxima Nova' );
  font-weight: var( --type-text-07-font-weight , 400 );
  line-height: var( --type-text-07-line-height , 21.09px );
  letter-spacing: var( --type-text-07-letter-spacing , 0px ); 
}

@mixin type-text-07--sizing {
  width: NOT-FOUND;
  height: NOT-FOUND;
}

@mixin type-text-07--width {
  width: NOT-FOUND;
}

@mixin type-text-07--height {
  height: NOT-FOUND;
}

@mixin type-text-07--absolute-layout {
   
}

@mixin type-text-07--html-autolayout {
  display: inline-block;
  margin-left: var( --type-text-07-left , NOT-FOUND );
  margin-right: var( --type-text-07-right , NOT-FOUND );
  margin-top: var( --type-text-07-top , NOT-FOUND );
  margin-bottom: var( --type-text-07-bottom , NOT-FOUND );
  width: calc( 100% - ( var( --type-text-07-left , NOT-FOUND ) + var( --type-text-07-right , NOT-FOUND ) ) );
}

// ================================
// [TEXT_TOKEN] type-text-larger

@mixin type-text-larger { 
  position: relative;
  font-size: var( --type-text-larger-font-size , 18px );
  text-align: var( --type-text-larger-text-align-horizontal , LEFT );
  color: var( --type-text-larger-color , rgba(0,0,0,1) );
  font-family: var( --type-text-larger-font-family , 'Proxima Nova' );
  font-weight: var( --type-text-larger-font-weight , 400 );
  line-height: var( --type-text-larger-line-height , 21.09px );
  letter-spacing: var( --type-text-larger-letter-spacing , 0px ); 
}

@mixin type-text-larger--sizing {
  width: NOT-FOUND;
  height: NOT-FOUND;
}

@mixin type-text-larger--width {
  width: NOT-FOUND;
}

@mixin type-text-larger--height {
  height: NOT-FOUND;
}

@mixin type-text-larger--absolute-layout {
   
}

@mixin type-text-larger--html-autolayout {
  display: inline-block;
  margin-left: var( --type-text-larger-left , NOT-FOUND );
  margin-right: var( --type-text-larger-right , NOT-FOUND );
  margin-top: var( --type-text-larger-top , NOT-FOUND );
  margin-bottom: var( --type-text-larger-bottom , NOT-FOUND );
  width: calc( 100% - ( var( --type-text-larger-left , NOT-FOUND ) + var( --type-text-larger-right , NOT-FOUND ) ) );
}

// ================================
// [TEXT_TOKEN] type-text-06

@mixin type-text-06 { 
  position: relative;
  font-size: var( --type-text-06-font-size , 16px );
  text-align: var( --type-text-06-text-align-horizontal , LEFT );
  color: var( --type-text-06-color , rgba(0,0,0,1) );
  font-family: var( --type-text-06-font-family , 'Proxima Nova' );
  font-weight: var( --type-text-06-font-weight , 400 );
  line-height: var( --type-text-06-line-height , 18.75px );
  letter-spacing: var( --type-text-06-letter-spacing , 0px ); 
}

@mixin type-text-06--sizing {
  width: NOT-FOUND;
  height: NOT-FOUND;
}

@mixin type-text-06--width {
  width: NOT-FOUND;
}

@mixin type-text-06--height {
  height: NOT-FOUND;
}

@mixin type-text-06--absolute-layout {
   
}

@mixin type-text-06--html-autolayout {
  display: inline-block;
  margin-left: var( --type-text-06-left , NOT-FOUND );
  margin-right: var( --type-text-06-right , NOT-FOUND );
  margin-top: var( --type-text-06-top , NOT-FOUND );
  margin-bottom: var( --type-text-06-bottom , NOT-FOUND );
  width: calc( 100% - ( var( --type-text-06-left , NOT-FOUND ) + var( --type-text-06-right , NOT-FOUND ) ) );
}

// ================================
// [TEXT_TOKEN] type-text-large

@mixin type-text-large { 
  position: relative;
  font-size: var( --type-text-large-font-size , 16px );
  text-align: var( --type-text-large-text-align-horizontal , LEFT );
  color: var( --type-text-large-color , rgba(0,0,0,1) );
  font-family: var( --type-text-large-font-family , 'Proxima Nova' );
  font-weight: var( --type-text-large-font-weight , 400 );
  line-height: var( --type-text-large-line-height , 18.75px );
  letter-spacing: var( --type-text-large-letter-spacing , 0px ); 
}

@mixin type-text-large--sizing {
  width: NOT-FOUND;
  height: NOT-FOUND;
}

@mixin type-text-large--width {
  width: NOT-FOUND;
}

@mixin type-text-large--height {
  height: NOT-FOUND;
}

@mixin type-text-large--absolute-layout {
   
}

@mixin type-text-large--html-autolayout {
  display: inline-block;
  margin-left: var( --type-text-large-left , NOT-FOUND );
  margin-right: var( --type-text-large-right , NOT-FOUND );
  margin-top: var( --type-text-large-top , NOT-FOUND );
  margin-bottom: var( --type-text-large-bottom , NOT-FOUND );
  width: calc( 100% - ( var( --type-text-large-left , NOT-FOUND ) + var( --type-text-large-right , NOT-FOUND ) ) );
}

// ================================
// [TEXT_TOKEN] type-text-05

@mixin type-text-05 { 
  position: relative;
  font-size: var( --type-text-05-font-size , 15px );
  text-align: var( --type-text-05-text-align-horizontal , LEFT );
  color: var( --type-text-05-color , rgba(0,0,0,1) );
  font-family: var( --type-text-05-font-family , 'Proxima Nova' );
  font-weight: var( --type-text-05-font-weight , 400 );
  line-height: var( --type-text-05-line-height , 17.58px );
  letter-spacing: var( --type-text-05-letter-spacing , 0px ); 
}

@mixin type-text-05--sizing {
  width: NOT-FOUND;
  height: NOT-FOUND;
}

@mixin type-text-05--width {
  width: NOT-FOUND;
}

@mixin type-text-05--height {
  height: NOT-FOUND;
}

@mixin type-text-05--absolute-layout {
   
}

@mixin type-text-05--html-autolayout {
  display: inline-block;
  margin-left: var( --type-text-05-left , NOT-FOUND );
  margin-right: var( --type-text-05-right , NOT-FOUND );
  margin-top: var( --type-text-05-top , NOT-FOUND );
  margin-bottom: var( --type-text-05-bottom , NOT-FOUND );
  width: calc( 100% - ( var( --type-text-05-left , NOT-FOUND ) + var( --type-text-05-right , NOT-FOUND ) ) );
}

// ================================
// [TEXT_TOKEN] type-text

@mixin type-text { 
  position: relative;
  font-size: var( --type-text-font-size , 15px );
  text-align: var( --type-text-text-align-horizontal , LEFT );
  color: var( --type-text-color , rgba(0,0,0,1) );
  font-family: var( --type-text-font-family , 'Proxima Nova' );
  font-weight: var( --type-text-font-weight , 400 );
  line-height: var( --type-text-line-height , 17.58px );
  letter-spacing: var( --type-text-letter-spacing , 0px ); 
}

@mixin type-text--sizing {
  width: NOT-FOUND;
  height: NOT-FOUND;
}

@mixin type-text--width {
  width: NOT-FOUND;
}

@mixin type-text--height {
  height: NOT-FOUND;
}

@mixin type-text--absolute-layout {
   
}

@mixin type-text--html-autolayout {
  display: inline-block;
  margin-left: var( --type-text-left , NOT-FOUND );
  margin-right: var( --type-text-right , NOT-FOUND );
  margin-top: var( --type-text-top , NOT-FOUND );
  margin-bottom: var( --type-text-bottom , NOT-FOUND );
  width: calc( 100% - ( var( --type-text-left , NOT-FOUND ) + var( --type-text-right , NOT-FOUND ) ) );
}

// ================================
// [TEXT_TOKEN] type-text-04

@mixin type-text-04 { 
  position: relative;
  font-size: var( --type-text-04-font-size , 12px );
  text-align: var( --type-text-04-text-align-horizontal , LEFT );
  color: var( --type-text-04-color , rgba(0,0,0,1) );
  font-family: var( --type-text-04-font-family , 'Proxima Nova' );
  font-weight: var( --type-text-04-font-weight , 400 );
  line-height: var( --type-text-04-line-height , 14.06px );
  letter-spacing: var( --type-text-04-letter-spacing , 0px ); 
}

@mixin type-text-04--sizing {
  width: NOT-FOUND;
  height: NOT-FOUND;
}

@mixin type-text-04--width {
  width: NOT-FOUND;
}

@mixin type-text-04--height {
  height: NOT-FOUND;
}

@mixin type-text-04--absolute-layout {
   
}

@mixin type-text-04--html-autolayout {
  display: inline-block;
  margin-left: var( --type-text-04-left , NOT-FOUND );
  margin-right: var( --type-text-04-right , NOT-FOUND );
  margin-top: var( --type-text-04-top , NOT-FOUND );
  margin-bottom: var( --type-text-04-bottom , NOT-FOUND );
  width: calc( 100% - ( var( --type-text-04-left , NOT-FOUND ) + var( --type-text-04-right , NOT-FOUND ) ) );
}

// ================================
// [TEXT_TOKEN] type-text-small

@mixin type-text-small { 
  position: relative;
  font-size: var( --type-text-small-font-size , 12px );
  text-align: var( --type-text-small-text-align-horizontal , LEFT );
  color: var( --type-text-small-color , rgba(0,0,0,1) );
  font-family: var( --type-text-small-font-family , 'Proxima Nova' );
  font-weight: var( --type-text-small-font-weight , 400 );
  line-height: var( --type-text-small-line-height , 14.06px );
  letter-spacing: var( --type-text-small-letter-spacing , 0px ); 
}

@mixin type-text-small--sizing {
  width: NOT-FOUND;
  height: NOT-FOUND;
}

@mixin type-text-small--width {
  width: NOT-FOUND;
}

@mixin type-text-small--height {
  height: NOT-FOUND;
}

@mixin type-text-small--absolute-layout {
   
}

@mixin type-text-small--html-autolayout {
  display: inline-block;
  margin-left: var( --type-text-small-left , NOT-FOUND );
  margin-right: var( --type-text-small-right , NOT-FOUND );
  margin-top: var( --type-text-small-top , NOT-FOUND );
  margin-bottom: var( --type-text-small-bottom , NOT-FOUND );
  width: calc( 100% - ( var( --type-text-small-left , NOT-FOUND ) + var( --type-text-small-right , NOT-FOUND ) ) );
}

// ================================
// [TEXT_TOKEN] type-text-03

@mixin type-text-03 { 
  position: relative;
  font-size: var( --type-text-03-font-size , 11px );
  text-align: var( --type-text-03-text-align-horizontal , LEFT );
  color: var( --type-text-03-color , rgba(0,0,0,1) );
  font-family: var( --type-text-03-font-family , 'Proxima Nova' );
  font-weight: var( --type-text-03-font-weight , 400 );
  line-height: var( --type-text-03-line-height , 12.89px );
  letter-spacing: var( --type-text-03-letter-spacing , 0px ); 
}

@mixin type-text-03--sizing {
  width: NOT-FOUND;
  height: NOT-FOUND;
}

@mixin type-text-03--width {
  width: NOT-FOUND;
}

@mixin type-text-03--height {
  height: NOT-FOUND;
}

@mixin type-text-03--absolute-layout {
   
}

@mixin type-text-03--html-autolayout {
  display: inline-block;
  margin-left: var( --type-text-03-left , NOT-FOUND );
  margin-right: var( --type-text-03-right , NOT-FOUND );
  margin-top: var( --type-text-03-top , NOT-FOUND );
  margin-bottom: var( --type-text-03-bottom , NOT-FOUND );
  width: calc( 100% - ( var( --type-text-03-left , NOT-FOUND ) + var( --type-text-03-right , NOT-FOUND ) ) );
}

// ================================
// [TEXT_TOKEN] type-text-smaller

@mixin type-text-smaller { 
  position: relative;
  font-size: var( --type-text-smaller-font-size , 11px );
  text-align: var( --type-text-smaller-text-align-horizontal , LEFT );
  color: var( --type-text-smaller-color , rgba(0,0,0,1) );
  font-family: var( --type-text-smaller-font-family , 'Proxima Nova' );
  font-weight: var( --type-text-smaller-font-weight , 400 );
  line-height: var( --type-text-smaller-line-height , 12.89px );
  letter-spacing: var( --type-text-smaller-letter-spacing , 0px ); 
}

@mixin type-text-smaller--sizing {
  width: NOT-FOUND;
  height: NOT-FOUND;
}

@mixin type-text-smaller--width {
  width: NOT-FOUND;
}

@mixin type-text-smaller--height {
  height: NOT-FOUND;
}

@mixin type-text-smaller--absolute-layout {
   
}

@mixin type-text-smaller--html-autolayout {
  display: inline-block;
  margin-left: var( --type-text-smaller-left , NOT-FOUND );
  margin-right: var( --type-text-smaller-right , NOT-FOUND );
  margin-top: var( --type-text-smaller-top , NOT-FOUND );
  margin-bottom: var( --type-text-smaller-bottom , NOT-FOUND );
  width: calc( 100% - ( var( --type-text-smaller-left , NOT-FOUND ) + var( --type-text-smaller-right , NOT-FOUND ) ) );
}

// ================================
// [TEXT_TOKEN] type-text-02

@mixin type-text-02 { 
  position: relative;
  font-size: var( --type-text-02-font-size , 9px );
  text-align: var( --type-text-02-text-align-horizontal , LEFT );
  color: var( --type-text-02-color , rgba(0,0,0,1) );
  font-family: var( --type-text-02-font-family , 'Proxima Nova' );
  font-weight: var( --type-text-02-font-weight , 400 );
  line-height: var( --type-text-02-line-height , 10.55px );
  letter-spacing: var( --type-text-02-letter-spacing , 0px ); 
}

@mixin type-text-02--sizing {
  width: NOT-FOUND;
  height: NOT-FOUND;
}

@mixin type-text-02--width {
  width: NOT-FOUND;
}

@mixin type-text-02--height {
  height: NOT-FOUND;
}

@mixin type-text-02--absolute-layout {
   
}

@mixin type-text-02--html-autolayout {
  display: inline-block;
  margin-left: var( --type-text-02-left , NOT-FOUND );
  margin-right: var( --type-text-02-right , NOT-FOUND );
  margin-top: var( --type-text-02-top , NOT-FOUND );
  margin-bottom: var( --type-text-02-bottom , NOT-FOUND );
  width: calc( 100% - ( var( --type-text-02-left , NOT-FOUND ) + var( --type-text-02-right , NOT-FOUND ) ) );
}

// ================================
// [TEXT_TOKEN] type-text-smallest

@mixin type-text-smallest { 
  position: relative;
  font-size: var( --type-text-smallest-font-size , 9px );
  text-align: var( --type-text-smallest-text-align-horizontal , LEFT );
  color: var( --type-text-smallest-color , rgba(0,0,0,1) );
  font-family: var( --type-text-smallest-font-family , 'Proxima Nova' );
  font-weight: var( --type-text-smallest-font-weight , 400 );
  line-height: var( --type-text-smallest-line-height , 10.55px );
  letter-spacing: var( --type-text-smallest-letter-spacing , 0px ); 
}

@mixin type-text-smallest--sizing {
  width: NOT-FOUND;
  height: NOT-FOUND;
}

@mixin type-text-smallest--width {
  width: NOT-FOUND;
}

@mixin type-text-smallest--height {
  height: NOT-FOUND;
}

@mixin type-text-smallest--absolute-layout {
   
}

@mixin type-text-smallest--html-autolayout {
  display: inline-block;
  margin-left: var( --type-text-smallest-left , NOT-FOUND );
  margin-right: var( --type-text-smallest-right , NOT-FOUND );
  margin-top: var( --type-text-smallest-top , NOT-FOUND );
  margin-bottom: var( --type-text-smallest-bottom , NOT-FOUND );
  width: calc( 100% - ( var( --type-text-smallest-left , NOT-FOUND ) + var( --type-text-smallest-right , NOT-FOUND ) ) );
}

// ================================
// [TEXT_TOKEN] type-text-01

@mixin type-text-01 { 
  position: relative;
  font-size: var( --type-text-01-font-size , 8px );
  text-align: var( --type-text-01-text-align-horizontal , LEFT );
  color: var( --type-text-01-color , rgba(0,0,0,1) );
  font-family: var( --type-text-01-font-family , 'Proxima Nova' );
  font-weight: var( --type-text-01-font-weight , 400 );
  line-height: var( --type-text-01-line-height , 9.38px );
  letter-spacing: var( --type-text-01-letter-spacing , 0px ); 
}

@mixin type-text-01--sizing {
  width: NOT-FOUND;
  height: NOT-FOUND;
}

@mixin type-text-01--width {
  width: NOT-FOUND;
}

@mixin type-text-01--height {
  height: NOT-FOUND;
}

@mixin type-text-01--absolute-layout {
   
}

@mixin type-text-01--html-autolayout {
  display: inline-block;
  margin-left: var( --type-text-01-left , NOT-FOUND );
  margin-right: var( --type-text-01-right , NOT-FOUND );
  margin-top: var( --type-text-01-top , NOT-FOUND );
  margin-bottom: var( --type-text-01-bottom , NOT-FOUND );
  width: calc( 100% - ( var( --type-text-01-left , NOT-FOUND ) + var( --type-text-01-right , NOT-FOUND ) ) );
}

// ================================
// [TEXT_TOKEN] type-text-semibold-10

@mixin type-text-semibold-10 { 
  position: relative;
  font-size: var( --type-text-semibold-10-font-size , 30px );
  text-align: var( --type-text-semibold-10-text-align-horizontal , LEFT );
  color: var( --type-text-semibold-10-color , rgba(0,0,0,1) );
  font-family: var( --type-text-semibold-10-font-family , 'Proxima Nova' );
  font-weight: var( --type-text-semibold-10-font-weight , 600 );
  line-height: var( --type-text-semibold-10-line-height , 35.16px );
  letter-spacing: var( --type-text-semibold-10-letter-spacing , 0px ); 
}

@mixin type-text-semibold-10--sizing {
  width: NOT-FOUND;
  height: NOT-FOUND;
}

@mixin type-text-semibold-10--width {
  width: NOT-FOUND;
}

@mixin type-text-semibold-10--height {
  height: NOT-FOUND;
}

@mixin type-text-semibold-10--absolute-layout {
   
}

@mixin type-text-semibold-10--html-autolayout {
  display: inline-block;
  margin-left: var( --type-text-semibold-10-left , NOT-FOUND );
  margin-right: var( --type-text-semibold-10-right , NOT-FOUND );
  margin-top: var( --type-text-semibold-10-top , NOT-FOUND );
  margin-bottom: var( --type-text-semibold-10-bottom , NOT-FOUND );
  width: calc( 100% - ( var( --type-text-semibold-10-left , NOT-FOUND ) + var( --type-text-semibold-10-right , NOT-FOUND ) ) );
}

// ================================
// [TEXT_TOKEN] type-text-semibold-09

@mixin type-text-semibold-09 { 
  position: relative;
  font-size: var( --type-text-semibold-09-font-size , 24px );
  text-align: var( --type-text-semibold-09-text-align-horizontal , LEFT );
  color: var( --type-text-semibold-09-color , rgba(0,0,0,1) );
  font-family: var( --type-text-semibold-09-font-family , 'Proxima Nova' );
  font-weight: var( --type-text-semibold-09-font-weight , 600 );
  line-height: var( --type-text-semibold-09-line-height , 28.13px );
  letter-spacing: var( --type-text-semibold-09-letter-spacing , 0px ); 
}

@mixin type-text-semibold-09--sizing {
  width: NOT-FOUND;
  height: NOT-FOUND;
}

@mixin type-text-semibold-09--width {
  width: NOT-FOUND;
}

@mixin type-text-semibold-09--height {
  height: NOT-FOUND;
}

@mixin type-text-semibold-09--absolute-layout {
   
}

@mixin type-text-semibold-09--html-autolayout {
  display: inline-block;
  margin-left: var( --type-text-semibold-09-left , NOT-FOUND );
  margin-right: var( --type-text-semibold-09-right , NOT-FOUND );
  margin-top: var( --type-text-semibold-09-top , NOT-FOUND );
  margin-bottom: var( --type-text-semibold-09-bottom , NOT-FOUND );
  width: calc( 100% - ( var( --type-text-semibold-09-left , NOT-FOUND ) + var( --type-text-semibold-09-right , NOT-FOUND ) ) );
}

// ================================
// [TEXT_TOKEN] type-text-semibold-08

@mixin type-text-semibold-08 { 
  position: relative;
  font-size: var( --type-text-semibold-08-font-size , 21px );
  text-align: var( --type-text-semibold-08-text-align-horizontal , LEFT );
  color: var( --type-text-semibold-08-color , rgba(0,0,0,1) );
  font-family: var( --type-text-semibold-08-font-family , 'Proxima Nova' );
  font-weight: var( --type-text-semibold-08-font-weight , 600 );
  line-height: var( --type-text-semibold-08-line-height , 24.61px );
  letter-spacing: var( --type-text-semibold-08-letter-spacing , 0px ); 
}

@mixin type-text-semibold-08--sizing {
  width: NOT-FOUND;
  height: NOT-FOUND;
}

@mixin type-text-semibold-08--width {
  width: NOT-FOUND;
}

@mixin type-text-semibold-08--height {
  height: NOT-FOUND;
}

@mixin type-text-semibold-08--absolute-layout {
   
}

@mixin type-text-semibold-08--html-autolayout {
  display: inline-block;
  margin-left: var( --type-text-semibold-08-left , NOT-FOUND );
  margin-right: var( --type-text-semibold-08-right , NOT-FOUND );
  margin-top: var( --type-text-semibold-08-top , NOT-FOUND );
  margin-bottom: var( --type-text-semibold-08-bottom , NOT-FOUND );
  width: calc( 100% - ( var( --type-text-semibold-08-left , NOT-FOUND ) + var( --type-text-semibold-08-right , NOT-FOUND ) ) );
}

// ================================
// [TEXT_TOKEN] type-text-semibold-largest

@mixin type-text-semibold-largest { 
  position: relative;
  font-size: var( --type-text-semibold-largest-font-size , 21px );
  text-align: var( --type-text-semibold-largest-text-align-horizontal , LEFT );
  color: var( --type-text-semibold-largest-color , rgba(0,0,0,1) );
  font-family: var( --type-text-semibold-largest-font-family , 'Proxima Nova' );
  font-weight: var( --type-text-semibold-largest-font-weight , 600 );
  line-height: var( --type-text-semibold-largest-line-height , 24.61px );
  letter-spacing: var( --type-text-semibold-largest-letter-spacing , 0px ); 
}

@mixin type-text-semibold-largest--sizing {
  width: NOT-FOUND;
  height: NOT-FOUND;
}

@mixin type-text-semibold-largest--width {
  width: NOT-FOUND;
}

@mixin type-text-semibold-largest--height {
  height: NOT-FOUND;
}

@mixin type-text-semibold-largest--absolute-layout {
   
}

@mixin type-text-semibold-largest--html-autolayout {
  display: inline-block;
  margin-left: var( --type-text-semibold-largest-left , NOT-FOUND );
  margin-right: var( --type-text-semibold-largest-right , NOT-FOUND );
  margin-top: var( --type-text-semibold-largest-top , NOT-FOUND );
  margin-bottom: var( --type-text-semibold-largest-bottom , NOT-FOUND );
  width: calc( 100% - ( var( --type-text-semibold-largest-left , NOT-FOUND ) + var( --type-text-semibold-largest-right , NOT-FOUND ) ) );
}

// ================================
// [TEXT_TOKEN] type-text-semibold-07

@mixin type-text-semibold-07 { 
  position: relative;
  font-size: var( --type-text-semibold-07-font-size , 18px );
  text-align: var( --type-text-semibold-07-text-align-horizontal , LEFT );
  color: var( --type-text-semibold-07-color , rgba(0,0,0,1) );
  font-family: var( --type-text-semibold-07-font-family , 'Proxima Nova' );
  font-weight: var( --type-text-semibold-07-font-weight , 600 );
  line-height: var( --type-text-semibold-07-line-height , 21.09px );
  letter-spacing: var( --type-text-semibold-07-letter-spacing , 0px ); 
}

@mixin type-text-semibold-07--sizing {
  width: NOT-FOUND;
  height: NOT-FOUND;
}

@mixin type-text-semibold-07--width {
  width: NOT-FOUND;
}

@mixin type-text-semibold-07--height {
  height: NOT-FOUND;
}

@mixin type-text-semibold-07--absolute-layout {
   
}

@mixin type-text-semibold-07--html-autolayout {
  display: inline-block;
  margin-left: var( --type-text-semibold-07-left , NOT-FOUND );
  margin-right: var( --type-text-semibold-07-right , NOT-FOUND );
  margin-top: var( --type-text-semibold-07-top , NOT-FOUND );
  margin-bottom: var( --type-text-semibold-07-bottom , NOT-FOUND );
  width: calc( 100% - ( var( --type-text-semibold-07-left , NOT-FOUND ) + var( --type-text-semibold-07-right , NOT-FOUND ) ) );
}

// ================================
// [TEXT_TOKEN] type-text-semibold-larger

@mixin type-text-semibold-larger { 
  position: relative;
  font-size: var( --type-text-semibold-larger-font-size , 18px );
  text-align: var( --type-text-semibold-larger-text-align-horizontal , LEFT );
  color: var( --type-text-semibold-larger-color , rgba(0,0,0,1) );
  font-family: var( --type-text-semibold-larger-font-family , 'Proxima Nova' );
  font-weight: var( --type-text-semibold-larger-font-weight , 600 );
  line-height: var( --type-text-semibold-larger-line-height , 21.09px );
  letter-spacing: var( --type-text-semibold-larger-letter-spacing , 0px ); 
}

@mixin type-text-semibold-larger--sizing {
  width: NOT-FOUND;
  height: NOT-FOUND;
}

@mixin type-text-semibold-larger--width {
  width: NOT-FOUND;
}

@mixin type-text-semibold-larger--height {
  height: NOT-FOUND;
}

@mixin type-text-semibold-larger--absolute-layout {
   
}

@mixin type-text-semibold-larger--html-autolayout {
  display: inline-block;
  margin-left: var( --type-text-semibold-larger-left , NOT-FOUND );
  margin-right: var( --type-text-semibold-larger-right , NOT-FOUND );
  margin-top: var( --type-text-semibold-larger-top , NOT-FOUND );
  margin-bottom: var( --type-text-semibold-larger-bottom , NOT-FOUND );
  width: calc( 100% - ( var( --type-text-semibold-larger-left , NOT-FOUND ) + var( --type-text-semibold-larger-right , NOT-FOUND ) ) );
}

// ================================
// [TEXT_TOKEN] type-text-semibold-06

@mixin type-text-semibold-06 { 
  position: relative;
  font-size: var( --type-text-semibold-06-font-size , 16px );
  text-align: var( --type-text-semibold-06-text-align-horizontal , LEFT );
  color: var( --type-text-semibold-06-color , rgba(0,0,0,1) );
  font-family: var( --type-text-semibold-06-font-family , 'Proxima Nova' );
  font-weight: var( --type-text-semibold-06-font-weight , 600 );
  line-height: var( --type-text-semibold-06-line-height , 18.75px );
  letter-spacing: var( --type-text-semibold-06-letter-spacing , 0px ); 
}

@mixin type-text-semibold-06--sizing {
  width: NOT-FOUND;
  height: NOT-FOUND;
}

@mixin type-text-semibold-06--width {
  width: NOT-FOUND;
}

@mixin type-text-semibold-06--height {
  height: NOT-FOUND;
}

@mixin type-text-semibold-06--absolute-layout {
   
}

@mixin type-text-semibold-06--html-autolayout {
  display: inline-block;
  margin-left: var( --type-text-semibold-06-left , NOT-FOUND );
  margin-right: var( --type-text-semibold-06-right , NOT-FOUND );
  margin-top: var( --type-text-semibold-06-top , NOT-FOUND );
  margin-bottom: var( --type-text-semibold-06-bottom , NOT-FOUND );
  width: calc( 100% - ( var( --type-text-semibold-06-left , NOT-FOUND ) + var( --type-text-semibold-06-right , NOT-FOUND ) ) );
}

// ================================
// [TEXT_TOKEN] type-text-semibold-large

@mixin type-text-semibold-large { 
  position: relative;
  font-size: var( --type-text-semibold-large-font-size , 16px );
  text-align: var( --type-text-semibold-large-text-align-horizontal , LEFT );
  color: var( --type-text-semibold-large-color , rgba(0,0,0,1) );
  font-family: var( --type-text-semibold-large-font-family , 'Proxima Nova' );
  font-weight: var( --type-text-semibold-large-font-weight , 600 );
  line-height: var( --type-text-semibold-large-line-height , 18.75px );
  letter-spacing: var( --type-text-semibold-large-letter-spacing , 0px ); 
}

@mixin type-text-semibold-large--sizing {
  width: NOT-FOUND;
  height: NOT-FOUND;
}

@mixin type-text-semibold-large--width {
  width: NOT-FOUND;
}

@mixin type-text-semibold-large--height {
  height: NOT-FOUND;
}

@mixin type-text-semibold-large--absolute-layout {
   
}

@mixin type-text-semibold-large--html-autolayout {
  display: inline-block;
  margin-left: var( --type-text-semibold-large-left , NOT-FOUND );
  margin-right: var( --type-text-semibold-large-right , NOT-FOUND );
  margin-top: var( --type-text-semibold-large-top , NOT-FOUND );
  margin-bottom: var( --type-text-semibold-large-bottom , NOT-FOUND );
  width: calc( 100% - ( var( --type-text-semibold-large-left , NOT-FOUND ) + var( --type-text-semibold-large-right , NOT-FOUND ) ) );
}

// ================================
// [TEXT_TOKEN] type-text-semibold-05

@mixin type-text-semibold-05 { 
  position: relative;
  font-size: var( --type-text-semibold-05-font-size , 15px );
  text-align: var( --type-text-semibold-05-text-align-horizontal , LEFT );
  color: var( --type-text-semibold-05-color , rgba(0,0,0,1) );
  font-family: var( --type-text-semibold-05-font-family , 'Proxima Nova' );
  font-weight: var( --type-text-semibold-05-font-weight , 600 );
  line-height: var( --type-text-semibold-05-line-height , 17.58px );
  letter-spacing: var( --type-text-semibold-05-letter-spacing , 0px ); 
}

@mixin type-text-semibold-05--sizing {
  width: NOT-FOUND;
  height: NOT-FOUND;
}

@mixin type-text-semibold-05--width {
  width: NOT-FOUND;
}

@mixin type-text-semibold-05--height {
  height: NOT-FOUND;
}

@mixin type-text-semibold-05--absolute-layout {
   
}

@mixin type-text-semibold-05--html-autolayout {
  display: inline-block;
  margin-left: var( --type-text-semibold-05-left , NOT-FOUND );
  margin-right: var( --type-text-semibold-05-right , NOT-FOUND );
  margin-top: var( --type-text-semibold-05-top , NOT-FOUND );
  margin-bottom: var( --type-text-semibold-05-bottom , NOT-FOUND );
  width: calc( 100% - ( var( --type-text-semibold-05-left , NOT-FOUND ) + var( --type-text-semibold-05-right , NOT-FOUND ) ) );
}

// ================================
// [TEXT_TOKEN] type-text-semibold

@mixin type-text-semibold { 
  position: relative;
  font-size: var( --type-text-semibold-font-size , 15px );
  text-align: var( --type-text-semibold-text-align-horizontal , LEFT );
  color: var( --type-text-semibold-color , rgba(0,0,0,1) );
  font-family: var( --type-text-semibold-font-family , 'Proxima Nova' );
  font-weight: var( --type-text-semibold-font-weight , 600 );
  line-height: var( --type-text-semibold-line-height , 17.58px );
  letter-spacing: var( --type-text-semibold-letter-spacing , 0px ); 
}

@mixin type-text-semibold--sizing {
  width: NOT-FOUND;
  height: NOT-FOUND;
}

@mixin type-text-semibold--width {
  width: NOT-FOUND;
}

@mixin type-text-semibold--height {
  height: NOT-FOUND;
}

@mixin type-text-semibold--absolute-layout {
   
}

@mixin type-text-semibold--html-autolayout {
  display: inline-block;
  margin-left: var( --type-text-semibold-left , NOT-FOUND );
  margin-right: var( --type-text-semibold-right , NOT-FOUND );
  margin-top: var( --type-text-semibold-top , NOT-FOUND );
  margin-bottom: var( --type-text-semibold-bottom , NOT-FOUND );
  width: calc( 100% - ( var( --type-text-semibold-left , NOT-FOUND ) + var( --type-text-semibold-right , NOT-FOUND ) ) );
}

// ================================
// [TEXT_TOKEN] type-text-semibold-04

@mixin type-text-semibold-04 { 
  position: relative;
  font-size: var( --type-text-semibold-04-font-size , 12px );
  text-align: var( --type-text-semibold-04-text-align-horizontal , LEFT );
  color: var( --type-text-semibold-04-color , rgba(0,0,0,1) );
  font-family: var( --type-text-semibold-04-font-family , 'Proxima Nova' );
  font-weight: var( --type-text-semibold-04-font-weight , 600 );
  line-height: var( --type-text-semibold-04-line-height , 14.06px );
  letter-spacing: var( --type-text-semibold-04-letter-spacing , 0px ); 
}

@mixin type-text-semibold-04--sizing {
  width: NOT-FOUND;
  height: NOT-FOUND;
}

@mixin type-text-semibold-04--width {
  width: NOT-FOUND;
}

@mixin type-text-semibold-04--height {
  height: NOT-FOUND;
}

@mixin type-text-semibold-04--absolute-layout {
   
}

@mixin type-text-semibold-04--html-autolayout {
  display: inline-block;
  margin-left: var( --type-text-semibold-04-left , NOT-FOUND );
  margin-right: var( --type-text-semibold-04-right , NOT-FOUND );
  margin-top: var( --type-text-semibold-04-top , NOT-FOUND );
  margin-bottom: var( --type-text-semibold-04-bottom , NOT-FOUND );
  width: calc( 100% - ( var( --type-text-semibold-04-left , NOT-FOUND ) + var( --type-text-semibold-04-right , NOT-FOUND ) ) );
}

// ================================
// [TEXT_TOKEN] type-text-semibold-small

@mixin type-text-semibold-small { 
  position: relative;
  font-size: var( --type-text-semibold-small-font-size , 12px );
  text-align: var( --type-text-semibold-small-text-align-horizontal , LEFT );
  color: var( --type-text-semibold-small-color , rgba(0,0,0,1) );
  font-family: var( --type-text-semibold-small-font-family , 'Proxima Nova' );
  font-weight: var( --type-text-semibold-small-font-weight , 600 );
  line-height: var( --type-text-semibold-small-line-height , 14.06px );
  letter-spacing: var( --type-text-semibold-small-letter-spacing , 0px ); 
}

@mixin type-text-semibold-small--sizing {
  width: NOT-FOUND;
  height: NOT-FOUND;
}

@mixin type-text-semibold-small--width {
  width: NOT-FOUND;
}

@mixin type-text-semibold-small--height {
  height: NOT-FOUND;
}

@mixin type-text-semibold-small--absolute-layout {
   
}

@mixin type-text-semibold-small--html-autolayout {
  display: inline-block;
  margin-left: var( --type-text-semibold-small-left , NOT-FOUND );
  margin-right: var( --type-text-semibold-small-right , NOT-FOUND );
  margin-top: var( --type-text-semibold-small-top , NOT-FOUND );
  margin-bottom: var( --type-text-semibold-small-bottom , NOT-FOUND );
  width: calc( 100% - ( var( --type-text-semibold-small-left , NOT-FOUND ) + var( --type-text-semibold-small-right , NOT-FOUND ) ) );
}

// ================================
// [TEXT_TOKEN] type-text-semibold-03

@mixin type-text-semibold-03 { 
  position: relative;
  font-size: var( --type-text-semibold-03-font-size , 11px );
  text-align: var( --type-text-semibold-03-text-align-horizontal , LEFT );
  color: var( --type-text-semibold-03-color , rgba(0,0,0,1) );
  font-family: var( --type-text-semibold-03-font-family , 'Proxima Nova' );
  font-weight: var( --type-text-semibold-03-font-weight , 600 );
  line-height: var( --type-text-semibold-03-line-height , 12.89px );
  letter-spacing: var( --type-text-semibold-03-letter-spacing , 0px ); 
}

@mixin type-text-semibold-03--sizing {
  width: NOT-FOUND;
  height: NOT-FOUND;
}

@mixin type-text-semibold-03--width {
  width: NOT-FOUND;
}

@mixin type-text-semibold-03--height {
  height: NOT-FOUND;
}

@mixin type-text-semibold-03--absolute-layout {
   
}

@mixin type-text-semibold-03--html-autolayout {
  display: inline-block;
  margin-left: var( --type-text-semibold-03-left , NOT-FOUND );
  margin-right: var( --type-text-semibold-03-right , NOT-FOUND );
  margin-top: var( --type-text-semibold-03-top , NOT-FOUND );
  margin-bottom: var( --type-text-semibold-03-bottom , NOT-FOUND );
  width: calc( 100% - ( var( --type-text-semibold-03-left , NOT-FOUND ) + var( --type-text-semibold-03-right , NOT-FOUND ) ) );
}

// ================================
// [TEXT_TOKEN] type-text-semibold-smaller

@mixin type-text-semibold-smaller { 
  position: relative;
  font-size: var( --type-text-semibold-smaller-font-size , 11px );
  text-align: var( --type-text-semibold-smaller-text-align-horizontal , LEFT );
  color: var( --type-text-semibold-smaller-color , rgba(0,0,0,1) );
  font-family: var( --type-text-semibold-smaller-font-family , 'Proxima Nova' );
  font-weight: var( --type-text-semibold-smaller-font-weight , 600 );
  line-height: var( --type-text-semibold-smaller-line-height , 12.89px );
  letter-spacing: var( --type-text-semibold-smaller-letter-spacing , 0px ); 
}

@mixin type-text-semibold-smaller--sizing {
  width: NOT-FOUND;
  height: NOT-FOUND;
}

@mixin type-text-semibold-smaller--width {
  width: NOT-FOUND;
}

@mixin type-text-semibold-smaller--height {
  height: NOT-FOUND;
}

@mixin type-text-semibold-smaller--absolute-layout {
   
}

@mixin type-text-semibold-smaller--html-autolayout {
  display: inline-block;
  margin-left: var( --type-text-semibold-smaller-left , NOT-FOUND );
  margin-right: var( --type-text-semibold-smaller-right , NOT-FOUND );
  margin-top: var( --type-text-semibold-smaller-top , NOT-FOUND );
  margin-bottom: var( --type-text-semibold-smaller-bottom , NOT-FOUND );
  width: calc( 100% - ( var( --type-text-semibold-smaller-left , NOT-FOUND ) + var( --type-text-semibold-smaller-right , NOT-FOUND ) ) );
}

// ================================
// [TEXT_TOKEN] type-text-semibold-02

@mixin type-text-semibold-02 { 
  position: relative;
  font-size: var( --type-text-semibold-02-font-size , 9px );
  text-align: var( --type-text-semibold-02-text-align-horizontal , LEFT );
  color: var( --type-text-semibold-02-color , rgba(0,0,0,1) );
  font-family: var( --type-text-semibold-02-font-family , 'Proxima Nova' );
  font-weight: var( --type-text-semibold-02-font-weight , 600 );
  line-height: var( --type-text-semibold-02-line-height , 10.55px );
  letter-spacing: var( --type-text-semibold-02-letter-spacing , 0px ); 
}

@mixin type-text-semibold-02--sizing {
  width: NOT-FOUND;
  height: NOT-FOUND;
}

@mixin type-text-semibold-02--width {
  width: NOT-FOUND;
}

@mixin type-text-semibold-02--height {
  height: NOT-FOUND;
}

@mixin type-text-semibold-02--absolute-layout {
   
}

@mixin type-text-semibold-02--html-autolayout {
  display: inline-block;
  margin-left: var( --type-text-semibold-02-left , NOT-FOUND );
  margin-right: var( --type-text-semibold-02-right , NOT-FOUND );
  margin-top: var( --type-text-semibold-02-top , NOT-FOUND );
  margin-bottom: var( --type-text-semibold-02-bottom , NOT-FOUND );
  width: calc( 100% - ( var( --type-text-semibold-02-left , NOT-FOUND ) + var( --type-text-semibold-02-right , NOT-FOUND ) ) );
}

// ================================
// [TEXT_TOKEN] type-text-semibold-smallest

@mixin type-text-semibold-smallest { 
  position: relative;
  font-size: var( --type-text-semibold-smallest-font-size , 9px );
  text-align: var( --type-text-semibold-smallest-text-align-horizontal , LEFT );
  color: var( --type-text-semibold-smallest-color , rgba(0,0,0,1) );
  font-family: var( --type-text-semibold-smallest-font-family , 'Proxima Nova' );
  font-weight: var( --type-text-semibold-smallest-font-weight , 600 );
  line-height: var( --type-text-semibold-smallest-line-height , 10.55px );
  letter-spacing: var( --type-text-semibold-smallest-letter-spacing , 0px ); 
}

@mixin type-text-semibold-smallest--sizing {
  width: NOT-FOUND;
  height: NOT-FOUND;
}

@mixin type-text-semibold-smallest--width {
  width: NOT-FOUND;
}

@mixin type-text-semibold-smallest--height {
  height: NOT-FOUND;
}

@mixin type-text-semibold-smallest--absolute-layout {
   
}

@mixin type-text-semibold-smallest--html-autolayout {
  display: inline-block;
  margin-left: var( --type-text-semibold-smallest-left , NOT-FOUND );
  margin-right: var( --type-text-semibold-smallest-right , NOT-FOUND );
  margin-top: var( --type-text-semibold-smallest-top , NOT-FOUND );
  margin-bottom: var( --type-text-semibold-smallest-bottom , NOT-FOUND );
  width: calc( 100% - ( var( --type-text-semibold-smallest-left , NOT-FOUND ) + var( --type-text-semibold-smallest-right , NOT-FOUND ) ) );
}

// ================================
// [TEXT_TOKEN] type-text-semibold-01

@mixin type-text-semibold-01 { 
  position: relative;
  font-size: var( --type-text-semibold-01-font-size , 8px );
  text-align: var( --type-text-semibold-01-text-align-horizontal , LEFT );
  color: var( --type-text-semibold-01-color , rgba(0,0,0,1) );
  font-family: var( --type-text-semibold-01-font-family , 'Proxima Nova' );
  font-weight: var( --type-text-semibold-01-font-weight , 600 );
  line-height: var( --type-text-semibold-01-line-height , 9.38px );
  letter-spacing: var( --type-text-semibold-01-letter-spacing , 0px ); 
}

@mixin type-text-semibold-01--sizing {
  width: NOT-FOUND;
  height: NOT-FOUND;
}

@mixin type-text-semibold-01--width {
  width: NOT-FOUND;
}

@mixin type-text-semibold-01--height {
  height: NOT-FOUND;
}

@mixin type-text-semibold-01--absolute-layout {
   
}

@mixin type-text-semibold-01--html-autolayout {
  display: inline-block;
  margin-left: var( --type-text-semibold-01-left , NOT-FOUND );
  margin-right: var( --type-text-semibold-01-right , NOT-FOUND );
  margin-top: var( --type-text-semibold-01-top , NOT-FOUND );
  margin-bottom: var( --type-text-semibold-01-bottom , NOT-FOUND );
  width: calc( 100% - ( var( --type-text-semibold-01-left , NOT-FOUND ) + var( --type-text-semibold-01-right , NOT-FOUND ) ) );
}

// ================================
// [TEXT_TOKEN] type-text-bold-10

@mixin type-text-bold-10 { 
  position: relative;
  font-size: var( --type-text-bold-10-font-size , 30px );
  text-align: var( --type-text-bold-10-text-align-horizontal , LEFT );
  color: var( --type-text-bold-10-color , rgba(0,0,0,1) );
  font-family: var( --type-text-bold-10-font-family , 'Proxima Nova' );
  font-weight: var( --type-text-bold-10-font-weight , 700 );
  line-height: var( --type-text-bold-10-line-height , 35.16px );
  letter-spacing: var( --type-text-bold-10-letter-spacing , 0px ); 
}

@mixin type-text-bold-10--sizing {
  width: NOT-FOUND;
  height: NOT-FOUND;
}

@mixin type-text-bold-10--width {
  width: NOT-FOUND;
}

@mixin type-text-bold-10--height {
  height: NOT-FOUND;
}

@mixin type-text-bold-10--absolute-layout {
   
}

@mixin type-text-bold-10--html-autolayout {
  display: inline-block;
  margin-left: var( --type-text-bold-10-left , NOT-FOUND );
  margin-right: var( --type-text-bold-10-right , NOT-FOUND );
  margin-top: var( --type-text-bold-10-top , NOT-FOUND );
  margin-bottom: var( --type-text-bold-10-bottom , NOT-FOUND );
  width: calc( 100% - ( var( --type-text-bold-10-left , NOT-FOUND ) + var( --type-text-bold-10-right , NOT-FOUND ) ) );
}

// ================================
// [TEXT_TOKEN] type-text-bold-09

@mixin type-text-bold-09 { 
  position: relative;
  font-size: var( --type-text-bold-09-font-size , 24px );
  text-align: var( --type-text-bold-09-text-align-horizontal , LEFT );
  color: var( --type-text-bold-09-color , rgba(0,0,0,1) );
  font-family: var( --type-text-bold-09-font-family , 'Proxima Nova' );
  font-weight: var( --type-text-bold-09-font-weight , 700 );
  line-height: var( --type-text-bold-09-line-height , 28.13px );
  letter-spacing: var( --type-text-bold-09-letter-spacing , 0px ); 
}

@mixin type-text-bold-09--sizing {
  width: NOT-FOUND;
  height: NOT-FOUND;
}

@mixin type-text-bold-09--width {
  width: NOT-FOUND;
}

@mixin type-text-bold-09--height {
  height: NOT-FOUND;
}

@mixin type-text-bold-09--absolute-layout {
   
}

@mixin type-text-bold-09--html-autolayout {
  display: inline-block;
  margin-left: var( --type-text-bold-09-left , NOT-FOUND );
  margin-right: var( --type-text-bold-09-right , NOT-FOUND );
  margin-top: var( --type-text-bold-09-top , NOT-FOUND );
  margin-bottom: var( --type-text-bold-09-bottom , NOT-FOUND );
  width: calc( 100% - ( var( --type-text-bold-09-left , NOT-FOUND ) + var( --type-text-bold-09-right , NOT-FOUND ) ) );
}

// ================================
// [TEXT_TOKEN] type-text-bold-08

@mixin type-text-bold-08 { 
  position: relative;
  font-size: var( --type-text-bold-08-font-size , 21px );
  text-align: var( --type-text-bold-08-text-align-horizontal , LEFT );
  color: var( --type-text-bold-08-color , rgba(0,0,0,1) );
  font-family: var( --type-text-bold-08-font-family , 'Open Sans' );
  font-weight: var( --type-text-bold-08-font-weight , 700 );
  line-height: var( --type-text-bold-08-line-height , 24.61px );
  letter-spacing: var( --type-text-bold-08-letter-spacing , 0px ); 
}

@mixin type-text-bold-08--sizing {
  width: NOT-FOUND;
  height: NOT-FOUND;
}

@mixin type-text-bold-08--width {
  width: NOT-FOUND;
}

@mixin type-text-bold-08--height {
  height: NOT-FOUND;
}

@mixin type-text-bold-08--absolute-layout {
   
}

@mixin type-text-bold-08--html-autolayout {
  display: inline-block;
  margin-left: var( --type-text-bold-08-left , NOT-FOUND );
  margin-right: var( --type-text-bold-08-right , NOT-FOUND );
  margin-top: var( --type-text-bold-08-top , NOT-FOUND );
  margin-bottom: var( --type-text-bold-08-bottom , NOT-FOUND );
  width: calc( 100% - ( var( --type-text-bold-08-left , NOT-FOUND ) + var( --type-text-bold-08-right , NOT-FOUND ) ) );
}

// ================================
// [TEXT_TOKEN] type-text-bold-largest

@mixin type-text-bold-largest { 
  position: relative;
  font-size: var( --type-text-bold-largest-font-size , 21px );
  text-align: var( --type-text-bold-largest-text-align-horizontal , LEFT );
  color: var( --type-text-bold-largest-color , rgba(0,0,0,1) );
  font-family: var( --type-text-bold-largest-font-family , 'Open Sans' );
  font-weight: var( --type-text-bold-largest-font-weight , 700 );
  line-height: var( --type-text-bold-largest-line-height , 24.61px );
  letter-spacing: var( --type-text-bold-largest-letter-spacing , 0px ); 
}

@mixin type-text-bold-largest--sizing {
  width: NOT-FOUND;
  height: NOT-FOUND;
}

@mixin type-text-bold-largest--width {
  width: NOT-FOUND;
}

@mixin type-text-bold-largest--height {
  height: NOT-FOUND;
}

@mixin type-text-bold-largest--absolute-layout {
   
}

@mixin type-text-bold-largest--html-autolayout {
  display: inline-block;
  margin-left: var( --type-text-bold-largest-left , NOT-FOUND );
  margin-right: var( --type-text-bold-largest-right , NOT-FOUND );
  margin-top: var( --type-text-bold-largest-top , NOT-FOUND );
  margin-bottom: var( --type-text-bold-largest-bottom , NOT-FOUND );
  width: calc( 100% - ( var( --type-text-bold-largest-left , NOT-FOUND ) + var( --type-text-bold-largest-right , NOT-FOUND ) ) );
}

// ================================
// [TEXT_TOKEN] type-text-bold-07

@mixin type-text-bold-07 { 
  position: relative;
  font-size: var( --type-text-bold-07-font-size , 18px );
  text-align: var( --type-text-bold-07-text-align-horizontal , LEFT );
  color: var( --type-text-bold-07-color , rgba(0,0,0,1) );
  font-family: var( --type-text-bold-07-font-family , 'Proxima Nova' );
  font-weight: var( --type-text-bold-07-font-weight , 700 );
  line-height: var( --type-text-bold-07-line-height , 21.09px );
  letter-spacing: var( --type-text-bold-07-letter-spacing , 0px ); 
}

@mixin type-text-bold-07--sizing {
  width: NOT-FOUND;
  height: NOT-FOUND;
}

@mixin type-text-bold-07--width {
  width: NOT-FOUND;
}

@mixin type-text-bold-07--height {
  height: NOT-FOUND;
}

@mixin type-text-bold-07--absolute-layout {
   
}

@mixin type-text-bold-07--html-autolayout {
  display: inline-block;
  margin-left: var( --type-text-bold-07-left , NOT-FOUND );
  margin-right: var( --type-text-bold-07-right , NOT-FOUND );
  margin-top: var( --type-text-bold-07-top , NOT-FOUND );
  margin-bottom: var( --type-text-bold-07-bottom , NOT-FOUND );
  width: calc( 100% - ( var( --type-text-bold-07-left , NOT-FOUND ) + var( --type-text-bold-07-right , NOT-FOUND ) ) );
}

// ================================
// [TEXT_TOKEN] type-text-bold-larger

@mixin type-text-bold-larger { 
  position: relative;
  font-size: var( --type-text-bold-larger-font-size , 18px );
  text-align: var( --type-text-bold-larger-text-align-horizontal , LEFT );
  color: var( --type-text-bold-larger-color , rgba(0,0,0,1) );
  font-family: var( --type-text-bold-larger-font-family , 'Proxima Nova' );
  font-weight: var( --type-text-bold-larger-font-weight , 700 );
  line-height: var( --type-text-bold-larger-line-height , 21.09px );
  letter-spacing: var( --type-text-bold-larger-letter-spacing , 0px ); 
}

@mixin type-text-bold-larger--sizing {
  width: NOT-FOUND;
  height: NOT-FOUND;
}

@mixin type-text-bold-larger--width {
  width: NOT-FOUND;
}

@mixin type-text-bold-larger--height {
  height: NOT-FOUND;
}

@mixin type-text-bold-larger--absolute-layout {
   
}

@mixin type-text-bold-larger--html-autolayout {
  display: inline-block;
  margin-left: var( --type-text-bold-larger-left , NOT-FOUND );
  margin-right: var( --type-text-bold-larger-right , NOT-FOUND );
  margin-top: var( --type-text-bold-larger-top , NOT-FOUND );
  margin-bottom: var( --type-text-bold-larger-bottom , NOT-FOUND );
  width: calc( 100% - ( var( --type-text-bold-larger-left , NOT-FOUND ) + var( --type-text-bold-larger-right , NOT-FOUND ) ) );
}

// ================================
// [TEXT_TOKEN] type-text-bold-06

@mixin type-text-bold-06 { 
  position: relative;
  font-size: var( --type-text-bold-06-font-size , 16px );
  text-align: var( --type-text-bold-06-text-align-horizontal , LEFT );
  color: var( --type-text-bold-06-color , rgba(0,0,0,1) );
  font-family: var( --type-text-bold-06-font-family , 'Proxima Nova' );
  font-weight: var( --type-text-bold-06-font-weight , 700 );
  line-height: var( --type-text-bold-06-line-height , 18.75px );
  letter-spacing: var( --type-text-bold-06-letter-spacing , 0px ); 
}

@mixin type-text-bold-06--sizing {
  width: NOT-FOUND;
  height: NOT-FOUND;
}

@mixin type-text-bold-06--width {
  width: NOT-FOUND;
}

@mixin type-text-bold-06--height {
  height: NOT-FOUND;
}

@mixin type-text-bold-06--absolute-layout {
   
}

@mixin type-text-bold-06--html-autolayout {
  display: inline-block;
  margin-left: var( --type-text-bold-06-left , NOT-FOUND );
  margin-right: var( --type-text-bold-06-right , NOT-FOUND );
  margin-top: var( --type-text-bold-06-top , NOT-FOUND );
  margin-bottom: var( --type-text-bold-06-bottom , NOT-FOUND );
  width: calc( 100% - ( var( --type-text-bold-06-left , NOT-FOUND ) + var( --type-text-bold-06-right , NOT-FOUND ) ) );
}

// ================================
// [TEXT_TOKEN] type-text-bold-large

@mixin type-text-bold-large { 
  position: relative;
  font-size: var( --type-text-bold-large-font-size , 16px );
  text-align: var( --type-text-bold-large-text-align-horizontal , LEFT );
  color: var( --type-text-bold-large-color , rgba(0,0,0,1) );
  font-family: var( --type-text-bold-large-font-family , 'Proxima Nova' );
  font-weight: var( --type-text-bold-large-font-weight , 700 );
  line-height: var( --type-text-bold-large-line-height , 18.75px );
  letter-spacing: var( --type-text-bold-large-letter-spacing , 0px ); 
}

@mixin type-text-bold-large--sizing {
  width: NOT-FOUND;
  height: NOT-FOUND;
}

@mixin type-text-bold-large--width {
  width: NOT-FOUND;
}

@mixin type-text-bold-large--height {
  height: NOT-FOUND;
}

@mixin type-text-bold-large--absolute-layout {
   
}

@mixin type-text-bold-large--html-autolayout {
  display: inline-block;
  margin-left: var( --type-text-bold-large-left , NOT-FOUND );
  margin-right: var( --type-text-bold-large-right , NOT-FOUND );
  margin-top: var( --type-text-bold-large-top , NOT-FOUND );
  margin-bottom: var( --type-text-bold-large-bottom , NOT-FOUND );
  width: calc( 100% - ( var( --type-text-bold-large-left , NOT-FOUND ) + var( --type-text-bold-large-right , NOT-FOUND ) ) );
}

// ================================
// [TEXT_TOKEN] type-text-bold-05

@mixin type-text-bold-05 { 
  position: relative;
  font-size: var( --type-text-bold-05-font-size , 15px );
  text-align: var( --type-text-bold-05-text-align-horizontal , LEFT );
  color: var( --type-text-bold-05-color , rgba(0,0,0,1) );
  font-family: var( --type-text-bold-05-font-family , 'Proxima Nova' );
  font-weight: var( --type-text-bold-05-font-weight , 700 );
  line-height: var( --type-text-bold-05-line-height , 17.58px );
  letter-spacing: var( --type-text-bold-05-letter-spacing , 0px ); 
}

@mixin type-text-bold-05--sizing {
  width: NOT-FOUND;
  height: NOT-FOUND;
}

@mixin type-text-bold-05--width {
  width: NOT-FOUND;
}

@mixin type-text-bold-05--height {
  height: NOT-FOUND;
}

@mixin type-text-bold-05--absolute-layout {
   
}

@mixin type-text-bold-05--html-autolayout {
  display: inline-block;
  margin-left: var( --type-text-bold-05-left , NOT-FOUND );
  margin-right: var( --type-text-bold-05-right , NOT-FOUND );
  margin-top: var( --type-text-bold-05-top , NOT-FOUND );
  margin-bottom: var( --type-text-bold-05-bottom , NOT-FOUND );
  width: calc( 100% - ( var( --type-text-bold-05-left , NOT-FOUND ) + var( --type-text-bold-05-right , NOT-FOUND ) ) );
}

// ================================
// [TEXT_TOKEN] type-text-bold

@mixin type-text-bold { 
  position: relative;
  font-size: var( --type-text-bold-font-size , 15px );
  text-align: var( --type-text-bold-text-align-horizontal , LEFT );
  color: var( --type-text-bold-color , rgba(0,0,0,1) );
  font-family: var( --type-text-bold-font-family , 'Proxima Nova' );
  font-weight: var( --type-text-bold-font-weight , 700 );
  line-height: var( --type-text-bold-line-height , 17.58px );
  letter-spacing: var( --type-text-bold-letter-spacing , 0px ); 
}

@mixin type-text-bold--sizing {
  width: NOT-FOUND;
  height: NOT-FOUND;
}

@mixin type-text-bold--width {
  width: NOT-FOUND;
}

@mixin type-text-bold--height {
  height: NOT-FOUND;
}

@mixin type-text-bold--absolute-layout {
   
}

@mixin type-text-bold--html-autolayout {
  display: inline-block;
  margin-left: var( --type-text-bold-left , NOT-FOUND );
  margin-right: var( --type-text-bold-right , NOT-FOUND );
  margin-top: var( --type-text-bold-top , NOT-FOUND );
  margin-bottom: var( --type-text-bold-bottom , NOT-FOUND );
  width: calc( 100% - ( var( --type-text-bold-left , NOT-FOUND ) + var( --type-text-bold-right , NOT-FOUND ) ) );
}

// ================================
// [TEXT_TOKEN] type-text-bold-04

@mixin type-text-bold-04 { 
  position: relative;
  font-size: var( --type-text-bold-04-font-size , 12px );
  text-align: var( --type-text-bold-04-text-align-horizontal , LEFT );
  color: var( --type-text-bold-04-color , rgba(0,0,0,1) );
  font-family: var( --type-text-bold-04-font-family , 'Proxima Nova' );
  font-weight: var( --type-text-bold-04-font-weight , 700 );
  line-height: var( --type-text-bold-04-line-height , 14.06px );
  letter-spacing: var( --type-text-bold-04-letter-spacing , 0px ); 
}

@mixin type-text-bold-04--sizing {
  width: NOT-FOUND;
  height: NOT-FOUND;
}

@mixin type-text-bold-04--width {
  width: NOT-FOUND;
}

@mixin type-text-bold-04--height {
  height: NOT-FOUND;
}

@mixin type-text-bold-04--absolute-layout {
   
}

@mixin type-text-bold-04--html-autolayout {
  display: inline-block;
  margin-left: var( --type-text-bold-04-left , NOT-FOUND );
  margin-right: var( --type-text-bold-04-right , NOT-FOUND );
  margin-top: var( --type-text-bold-04-top , NOT-FOUND );
  margin-bottom: var( --type-text-bold-04-bottom , NOT-FOUND );
  width: calc( 100% - ( var( --type-text-bold-04-left , NOT-FOUND ) + var( --type-text-bold-04-right , NOT-FOUND ) ) );
}

// ================================
// [TEXT_TOKEN] type-text-bold-small

@mixin type-text-bold-small { 
  position: relative;
  font-size: var( --type-text-bold-small-font-size , 12px );
  text-align: var( --type-text-bold-small-text-align-horizontal , LEFT );
  color: var( --type-text-bold-small-color , rgba(0,0,0,1) );
  font-family: var( --type-text-bold-small-font-family , 'Proxima Nova' );
  font-weight: var( --type-text-bold-small-font-weight , 700 );
  line-height: var( --type-text-bold-small-line-height , 14.06px );
  letter-spacing: var( --type-text-bold-small-letter-spacing , 0px ); 
}

@mixin type-text-bold-small--sizing {
  width: NOT-FOUND;
  height: NOT-FOUND;
}

@mixin type-text-bold-small--width {
  width: NOT-FOUND;
}

@mixin type-text-bold-small--height {
  height: NOT-FOUND;
}

@mixin type-text-bold-small--absolute-layout {
   
}

@mixin type-text-bold-small--html-autolayout {
  display: inline-block;
  margin-left: var( --type-text-bold-small-left , NOT-FOUND );
  margin-right: var( --type-text-bold-small-right , NOT-FOUND );
  margin-top: var( --type-text-bold-small-top , NOT-FOUND );
  margin-bottom: var( --type-text-bold-small-bottom , NOT-FOUND );
  width: calc( 100% - ( var( --type-text-bold-small-left , NOT-FOUND ) + var( --type-text-bold-small-right , NOT-FOUND ) ) );
}

// ================================
// [TEXT_TOKEN] type-text-bold-03

@mixin type-text-bold-03 { 
  position: relative;
  font-size: var( --type-text-bold-03-font-size , 11px );
  text-align: var( --type-text-bold-03-text-align-horizontal , LEFT );
  color: var( --type-text-bold-03-color , rgba(0,0,0,1) );
  font-family: var( --type-text-bold-03-font-family , 'Proxima Nova' );
  font-weight: var( --type-text-bold-03-font-weight , 700 );
  line-height: var( --type-text-bold-03-line-height , 12.89px );
  letter-spacing: var( --type-text-bold-03-letter-spacing , 0px ); 
}

@mixin type-text-bold-03--sizing {
  width: NOT-FOUND;
  height: NOT-FOUND;
}

@mixin type-text-bold-03--width {
  width: NOT-FOUND;
}

@mixin type-text-bold-03--height {
  height: NOT-FOUND;
}

@mixin type-text-bold-03--absolute-layout {
   
}

@mixin type-text-bold-03--html-autolayout {
  display: inline-block;
  margin-left: var( --type-text-bold-03-left , NOT-FOUND );
  margin-right: var( --type-text-bold-03-right , NOT-FOUND );
  margin-top: var( --type-text-bold-03-top , NOT-FOUND );
  margin-bottom: var( --type-text-bold-03-bottom , NOT-FOUND );
  width: calc( 100% - ( var( --type-text-bold-03-left , NOT-FOUND ) + var( --type-text-bold-03-right , NOT-FOUND ) ) );
}

// ================================
// [TEXT_TOKEN] type-text-bold-smaller

@mixin type-text-bold-smaller { 
  position: relative;
  font-size: var( --type-text-bold-smaller-font-size , 11px );
  text-align: var( --type-text-bold-smaller-text-align-horizontal , LEFT );
  color: var( --type-text-bold-smaller-color , rgba(0,0,0,1) );
  font-family: var( --type-text-bold-smaller-font-family , 'Proxima Nova' );
  font-weight: var( --type-text-bold-smaller-font-weight , 700 );
  line-height: var( --type-text-bold-smaller-line-height , 12.89px );
  letter-spacing: var( --type-text-bold-smaller-letter-spacing , 0px ); 
}

@mixin type-text-bold-smaller--sizing {
  width: NOT-FOUND;
  height: NOT-FOUND;
}

@mixin type-text-bold-smaller--width {
  width: NOT-FOUND;
}

@mixin type-text-bold-smaller--height {
  height: NOT-FOUND;
}

@mixin type-text-bold-smaller--absolute-layout {
   
}

@mixin type-text-bold-smaller--html-autolayout {
  display: inline-block;
  margin-left: var( --type-text-bold-smaller-left , NOT-FOUND );
  margin-right: var( --type-text-bold-smaller-right , NOT-FOUND );
  margin-top: var( --type-text-bold-smaller-top , NOT-FOUND );
  margin-bottom: var( --type-text-bold-smaller-bottom , NOT-FOUND );
  width: calc( 100% - ( var( --type-text-bold-smaller-left , NOT-FOUND ) + var( --type-text-bold-smaller-right , NOT-FOUND ) ) );
}

// ================================
// [TEXT_TOKEN] type-text-bold-02

@mixin type-text-bold-02 { 
  position: relative;
  font-size: var( --type-text-bold-02-font-size , 9px );
  text-align: var( --type-text-bold-02-text-align-horizontal , LEFT );
  color: var( --type-text-bold-02-color , rgba(0,0,0,1) );
  font-family: var( --type-text-bold-02-font-family , 'Proxima Nova' );
  font-weight: var( --type-text-bold-02-font-weight , 700 );
  line-height: var( --type-text-bold-02-line-height , 10.55px );
  letter-spacing: var( --type-text-bold-02-letter-spacing , 0px ); 
}

@mixin type-text-bold-02--sizing {
  width: NOT-FOUND;
  height: NOT-FOUND;
}

@mixin type-text-bold-02--width {
  width: NOT-FOUND;
}

@mixin type-text-bold-02--height {
  height: NOT-FOUND;
}

@mixin type-text-bold-02--absolute-layout {
   
}

@mixin type-text-bold-02--html-autolayout {
  display: inline-block;
  margin-left: var( --type-text-bold-02-left , NOT-FOUND );
  margin-right: var( --type-text-bold-02-right , NOT-FOUND );
  margin-top: var( --type-text-bold-02-top , NOT-FOUND );
  margin-bottom: var( --type-text-bold-02-bottom , NOT-FOUND );
  width: calc( 100% - ( var( --type-text-bold-02-left , NOT-FOUND ) + var( --type-text-bold-02-right , NOT-FOUND ) ) );
}

// ================================
// [TEXT_TOKEN] type-text-bold-smallest

@mixin type-text-bold-smallest { 
  position: relative;
  font-size: var( --type-text-bold-smallest-font-size , 9px );
  text-align: var( --type-text-bold-smallest-text-align-horizontal , LEFT );
  color: var( --type-text-bold-smallest-color , rgba(0,0,0,1) );
  font-family: var( --type-text-bold-smallest-font-family , 'Proxima Nova' );
  font-weight: var( --type-text-bold-smallest-font-weight , 700 );
  line-height: var( --type-text-bold-smallest-line-height , 10.55px );
  letter-spacing: var( --type-text-bold-smallest-letter-spacing , 0px ); 
}

@mixin type-text-bold-smallest--sizing {
  width: NOT-FOUND;
  height: NOT-FOUND;
}

@mixin type-text-bold-smallest--width {
  width: NOT-FOUND;
}

@mixin type-text-bold-smallest--height {
  height: NOT-FOUND;
}

@mixin type-text-bold-smallest--absolute-layout {
   
}

@mixin type-text-bold-smallest--html-autolayout {
  display: inline-block;
  margin-left: var( --type-text-bold-smallest-left , NOT-FOUND );
  margin-right: var( --type-text-bold-smallest-right , NOT-FOUND );
  margin-top: var( --type-text-bold-smallest-top , NOT-FOUND );
  margin-bottom: var( --type-text-bold-smallest-bottom , NOT-FOUND );
  width: calc( 100% - ( var( --type-text-bold-smallest-left , NOT-FOUND ) + var( --type-text-bold-smallest-right , NOT-FOUND ) ) );
}

// ================================
// [TEXT_TOKEN] type-text-bold-01

@mixin type-text-bold-01 { 
  position: relative;
  font-size: var( --type-text-bold-01-font-size , 8px );
  text-align: var( --type-text-bold-01-text-align-horizontal , LEFT );
  color: var( --type-text-bold-01-color , rgba(0,0,0,1) );
  font-family: var( --type-text-bold-01-font-family , 'Proxima Nova' );
  font-weight: var( --type-text-bold-01-font-weight , 700 );
  line-height: var( --type-text-bold-01-line-height , 9.38px );
  letter-spacing: var( --type-text-bold-01-letter-spacing , 0px ); 
}

@mixin type-text-bold-01--sizing {
  width: NOT-FOUND;
  height: NOT-FOUND;
}

@mixin type-text-bold-01--width {
  width: NOT-FOUND;
}

@mixin type-text-bold-01--height {
  height: NOT-FOUND;
}

@mixin type-text-bold-01--absolute-layout {
   
}

@mixin type-text-bold-01--html-autolayout {
  display: inline-block;
  margin-left: var( --type-text-bold-01-left , NOT-FOUND );
  margin-right: var( --type-text-bold-01-right , NOT-FOUND );
  margin-top: var( --type-text-bold-01-top , NOT-FOUND );
  margin-bottom: var( --type-text-bold-01-bottom , NOT-FOUND );
  width: calc( 100% - ( var( --type-text-bold-01-left , NOT-FOUND ) + var( --type-text-bold-01-right , NOT-FOUND ) ) );
}

// ================================
// [TEXT_TOKEN] type-text-uppercase-10

@mixin type-text-uppercase-10 { 
  position: relative;
  font-size: var( --type-text-uppercase-10-font-size , 30px );
  text-align: var( --type-text-uppercase-10-text-align-horizontal , LEFT );
  color: var( --type-text-uppercase-10-color , rgba(0,0,0,1) );
  font-family: var( --type-text-uppercase-10-font-family , 'Proxima Nova' );
  font-weight: var( --type-text-uppercase-10-font-weight , 500 );
  line-height: var( --type-text-uppercase-10-line-height , 35.16px );
  letter-spacing: var( --type-text-uppercase-10-letter-spacing , 0px ); 
}

@mixin type-text-uppercase-10--sizing {
  width: NOT-FOUND;
  height: NOT-FOUND;
}

@mixin type-text-uppercase-10--width {
  width: NOT-FOUND;
}

@mixin type-text-uppercase-10--height {
  height: NOT-FOUND;
}

@mixin type-text-uppercase-10--absolute-layout {
   
}

@mixin type-text-uppercase-10--html-autolayout {
  display: inline-block;
  margin-left: var( --type-text-uppercase-10-left , NOT-FOUND );
  margin-right: var( --type-text-uppercase-10-right , NOT-FOUND );
  margin-top: var( --type-text-uppercase-10-top , NOT-FOUND );
  margin-bottom: var( --type-text-uppercase-10-bottom , NOT-FOUND );
  width: calc( 100% - ( var( --type-text-uppercase-10-left , NOT-FOUND ) + var( --type-text-uppercase-10-right , NOT-FOUND ) ) );
}

// ================================
// [TEXT_TOKEN] type-text-uppercase-09

@mixin type-text-uppercase-09 { 
  position: relative;
  font-size: var( --type-text-uppercase-09-font-size , 24px );
  text-align: var( --type-text-uppercase-09-text-align-horizontal , LEFT );
  color: var( --type-text-uppercase-09-color , rgba(0,0,0,1) );
  font-family: var( --type-text-uppercase-09-font-family , 'Proxima Nova' );
  font-weight: var( --type-text-uppercase-09-font-weight , 500 );
  line-height: var( --type-text-uppercase-09-line-height , 28.13px );
  letter-spacing: var( --type-text-uppercase-09-letter-spacing , 0px ); 
}

@mixin type-text-uppercase-09--sizing {
  width: NOT-FOUND;
  height: NOT-FOUND;
}

@mixin type-text-uppercase-09--width {
  width: NOT-FOUND;
}

@mixin type-text-uppercase-09--height {
  height: NOT-FOUND;
}

@mixin type-text-uppercase-09--absolute-layout {
   
}

@mixin type-text-uppercase-09--html-autolayout {
  display: inline-block;
  margin-left: var( --type-text-uppercase-09-left , NOT-FOUND );
  margin-right: var( --type-text-uppercase-09-right , NOT-FOUND );
  margin-top: var( --type-text-uppercase-09-top , NOT-FOUND );
  margin-bottom: var( --type-text-uppercase-09-bottom , NOT-FOUND );
  width: calc( 100% - ( var( --type-text-uppercase-09-left , NOT-FOUND ) + var( --type-text-uppercase-09-right , NOT-FOUND ) ) );
}

// ================================
// [TEXT_TOKEN] type-text-uppercase-08

@mixin type-text-uppercase-08 { 
  position: relative;
  font-size: var( --type-text-uppercase-08-font-size , 21px );
  text-align: var( --type-text-uppercase-08-text-align-horizontal , LEFT );
  color: var( --type-text-uppercase-08-color , rgba(0,0,0,1) );
  font-family: var( --type-text-uppercase-08-font-family , 'Proxima Nova' );
  font-weight: var( --type-text-uppercase-08-font-weight , 500 );
  line-height: var( --type-text-uppercase-08-line-height , 24.61px );
  letter-spacing: var( --type-text-uppercase-08-letter-spacing , 0px ); 
}

@mixin type-text-uppercase-08--sizing {
  width: NOT-FOUND;
  height: NOT-FOUND;
}

@mixin type-text-uppercase-08--width {
  width: NOT-FOUND;
}

@mixin type-text-uppercase-08--height {
  height: NOT-FOUND;
}

@mixin type-text-uppercase-08--absolute-layout {
   
}

@mixin type-text-uppercase-08--html-autolayout {
  display: inline-block;
  margin-left: var( --type-text-uppercase-08-left , NOT-FOUND );
  margin-right: var( --type-text-uppercase-08-right , NOT-FOUND );
  margin-top: var( --type-text-uppercase-08-top , NOT-FOUND );
  margin-bottom: var( --type-text-uppercase-08-bottom , NOT-FOUND );
  width: calc( 100% - ( var( --type-text-uppercase-08-left , NOT-FOUND ) + var( --type-text-uppercase-08-right , NOT-FOUND ) ) );
}

// ================================
// [TEXT_TOKEN] type-text-uppercase-largest

@mixin type-text-uppercase-largest { 
  position: relative;
  font-size: var( --type-text-uppercase-largest-font-size , 21px );
  text-align: var( --type-text-uppercase-largest-text-align-horizontal , LEFT );
  color: var( --type-text-uppercase-largest-color , rgba(0,0,0,1) );
  font-family: var( --type-text-uppercase-largest-font-family , 'Proxima Nova' );
  font-weight: var( --type-text-uppercase-largest-font-weight , 500 );
  line-height: var( --type-text-uppercase-largest-line-height , 24.61px );
  letter-spacing: var( --type-text-uppercase-largest-letter-spacing , 0px ); 
}

@mixin type-text-uppercase-largest--sizing {
  width: NOT-FOUND;
  height: NOT-FOUND;
}

@mixin type-text-uppercase-largest--width {
  width: NOT-FOUND;
}

@mixin type-text-uppercase-largest--height {
  height: NOT-FOUND;
}

@mixin type-text-uppercase-largest--absolute-layout {
   
}

@mixin type-text-uppercase-largest--html-autolayout {
  display: inline-block;
  margin-left: var( --type-text-uppercase-largest-left , NOT-FOUND );
  margin-right: var( --type-text-uppercase-largest-right , NOT-FOUND );
  margin-top: var( --type-text-uppercase-largest-top , NOT-FOUND );
  margin-bottom: var( --type-text-uppercase-largest-bottom , NOT-FOUND );
  width: calc( 100% - ( var( --type-text-uppercase-largest-left , NOT-FOUND ) + var( --type-text-uppercase-largest-right , NOT-FOUND ) ) );
}

// ================================
// [TEXT_TOKEN] type-text-uppercase-07

@mixin type-text-uppercase-07 { 
  position: relative;
  font-size: var( --type-text-uppercase-07-font-size , 18px );
  text-align: var( --type-text-uppercase-07-text-align-horizontal , LEFT );
  color: var( --type-text-uppercase-07-color , rgba(0,0,0,1) );
  font-family: var( --type-text-uppercase-07-font-family , 'Proxima Nova' );
  font-weight: var( --type-text-uppercase-07-font-weight , 500 );
  line-height: var( --type-text-uppercase-07-line-height , 21.09px );
  letter-spacing: var( --type-text-uppercase-07-letter-spacing , 0px ); 
}

@mixin type-text-uppercase-07--sizing {
  width: NOT-FOUND;
  height: NOT-FOUND;
}

@mixin type-text-uppercase-07--width {
  width: NOT-FOUND;
}

@mixin type-text-uppercase-07--height {
  height: NOT-FOUND;
}

@mixin type-text-uppercase-07--absolute-layout {
   
}

@mixin type-text-uppercase-07--html-autolayout {
  display: inline-block;
  margin-left: var( --type-text-uppercase-07-left , NOT-FOUND );
  margin-right: var( --type-text-uppercase-07-right , NOT-FOUND );
  margin-top: var( --type-text-uppercase-07-top , NOT-FOUND );
  margin-bottom: var( --type-text-uppercase-07-bottom , NOT-FOUND );
  width: calc( 100% - ( var( --type-text-uppercase-07-left , NOT-FOUND ) + var( --type-text-uppercase-07-right , NOT-FOUND ) ) );
}

// ================================
// [TEXT_TOKEN] type-text-uppercase-larger

@mixin type-text-uppercase-larger { 
  position: relative;
  font-size: var( --type-text-uppercase-larger-font-size , 18px );
  text-align: var( --type-text-uppercase-larger-text-align-horizontal , LEFT );
  color: var( --type-text-uppercase-larger-color , rgba(0,0,0,1) );
  font-family: var( --type-text-uppercase-larger-font-family , 'Proxima Nova' );
  font-weight: var( --type-text-uppercase-larger-font-weight , 500 );
  line-height: var( --type-text-uppercase-larger-line-height , 21.09px );
  letter-spacing: var( --type-text-uppercase-larger-letter-spacing , 0px ); 
}

@mixin type-text-uppercase-larger--sizing {
  width: NOT-FOUND;
  height: NOT-FOUND;
}

@mixin type-text-uppercase-larger--width {
  width: NOT-FOUND;
}

@mixin type-text-uppercase-larger--height {
  height: NOT-FOUND;
}

@mixin type-text-uppercase-larger--absolute-layout {
   
}

@mixin type-text-uppercase-larger--html-autolayout {
  display: inline-block;
  margin-left: var( --type-text-uppercase-larger-left , NOT-FOUND );
  margin-right: var( --type-text-uppercase-larger-right , NOT-FOUND );
  margin-top: var( --type-text-uppercase-larger-top , NOT-FOUND );
  margin-bottom: var( --type-text-uppercase-larger-bottom , NOT-FOUND );
  width: calc( 100% - ( var( --type-text-uppercase-larger-left , NOT-FOUND ) + var( --type-text-uppercase-larger-right , NOT-FOUND ) ) );
}

// ================================
// [TEXT_TOKEN] type-text-uppercase-06

@mixin type-text-uppercase-06 { 
  position: relative;
  font-size: var( --type-text-uppercase-06-font-size , 16px );
  text-align: var( --type-text-uppercase-06-text-align-horizontal , LEFT );
  color: var( --type-text-uppercase-06-color , rgba(0,0,0,1) );
  font-family: var( --type-text-uppercase-06-font-family , 'Proxima Nova' );
  font-weight: var( --type-text-uppercase-06-font-weight , 500 );
  line-height: var( --type-text-uppercase-06-line-height , 18.75px );
  letter-spacing: var( --type-text-uppercase-06-letter-spacing , 0px ); 
}

@mixin type-text-uppercase-06--sizing {
  width: NOT-FOUND;
  height: NOT-FOUND;
}

@mixin type-text-uppercase-06--width {
  width: NOT-FOUND;
}

@mixin type-text-uppercase-06--height {
  height: NOT-FOUND;
}

@mixin type-text-uppercase-06--absolute-layout {
   
}

@mixin type-text-uppercase-06--html-autolayout {
  display: inline-block;
  margin-left: var( --type-text-uppercase-06-left , NOT-FOUND );
  margin-right: var( --type-text-uppercase-06-right , NOT-FOUND );
  margin-top: var( --type-text-uppercase-06-top , NOT-FOUND );
  margin-bottom: var( --type-text-uppercase-06-bottom , NOT-FOUND );
  width: calc( 100% - ( var( --type-text-uppercase-06-left , NOT-FOUND ) + var( --type-text-uppercase-06-right , NOT-FOUND ) ) );
}

// ================================
// [TEXT_TOKEN] type-text-uppercase-large

@mixin type-text-uppercase-large { 
  position: relative;
  font-size: var( --type-text-uppercase-large-font-size , 16px );
  text-align: var( --type-text-uppercase-large-text-align-horizontal , LEFT );
  color: var( --type-text-uppercase-large-color , rgba(0,0,0,1) );
  font-family: var( --type-text-uppercase-large-font-family , 'Proxima Nova' );
  font-weight: var( --type-text-uppercase-large-font-weight , 500 );
  line-height: var( --type-text-uppercase-large-line-height , 18.75px );
  letter-spacing: var( --type-text-uppercase-large-letter-spacing , 0px ); 
}

@mixin type-text-uppercase-large--sizing {
  width: NOT-FOUND;
  height: NOT-FOUND;
}

@mixin type-text-uppercase-large--width {
  width: NOT-FOUND;
}

@mixin type-text-uppercase-large--height {
  height: NOT-FOUND;
}

@mixin type-text-uppercase-large--absolute-layout {
   
}

@mixin type-text-uppercase-large--html-autolayout {
  display: inline-block;
  margin-left: var( --type-text-uppercase-large-left , NOT-FOUND );
  margin-right: var( --type-text-uppercase-large-right , NOT-FOUND );
  margin-top: var( --type-text-uppercase-large-top , NOT-FOUND );
  margin-bottom: var( --type-text-uppercase-large-bottom , NOT-FOUND );
  width: calc( 100% - ( var( --type-text-uppercase-large-left , NOT-FOUND ) + var( --type-text-uppercase-large-right , NOT-FOUND ) ) );
}

// ================================
// [TEXT_TOKEN] type-text-uppercase-05

@mixin type-text-uppercase-05 { 
  position: relative;
  font-size: var( --type-text-uppercase-05-font-size , 15px );
  text-align: var( --type-text-uppercase-05-text-align-horizontal , LEFT );
  color: var( --type-text-uppercase-05-color , rgba(0,0,0,1) );
  font-family: var( --type-text-uppercase-05-font-family , 'Proxima Nova' );
  font-weight: var( --type-text-uppercase-05-font-weight , 500 );
  line-height: var( --type-text-uppercase-05-line-height , 17.58px );
  letter-spacing: var( --type-text-uppercase-05-letter-spacing , 0px ); 
}

@mixin type-text-uppercase-05--sizing {
  width: NOT-FOUND;
  height: NOT-FOUND;
}

@mixin type-text-uppercase-05--width {
  width: NOT-FOUND;
}

@mixin type-text-uppercase-05--height {
  height: NOT-FOUND;
}

@mixin type-text-uppercase-05--absolute-layout {
   
}

@mixin type-text-uppercase-05--html-autolayout {
  display: inline-block;
  margin-left: var( --type-text-uppercase-05-left , NOT-FOUND );
  margin-right: var( --type-text-uppercase-05-right , NOT-FOUND );
  margin-top: var( --type-text-uppercase-05-top , NOT-FOUND );
  margin-bottom: var( --type-text-uppercase-05-bottom , NOT-FOUND );
  width: calc( 100% - ( var( --type-text-uppercase-05-left , NOT-FOUND ) + var( --type-text-uppercase-05-right , NOT-FOUND ) ) );
}

// ================================
// [TEXT_TOKEN] type-text-uppercase

@mixin type-text-uppercase { 
  position: relative;
  font-size: var( --type-text-uppercase-font-size , 15px );
  text-align: var( --type-text-uppercase-text-align-horizontal , LEFT );
  color: var( --type-text-uppercase-color , rgba(0,0,0,1) );
  font-family: var( --type-text-uppercase-font-family , 'Proxima Nova' );
  font-weight: var( --type-text-uppercase-font-weight , 500 );
  line-height: var( --type-text-uppercase-line-height , 17.58px );
  letter-spacing: var( --type-text-uppercase-letter-spacing , 0px ); 
}

@mixin type-text-uppercase--sizing {
  width: NOT-FOUND;
  height: NOT-FOUND;
}

@mixin type-text-uppercase--width {
  width: NOT-FOUND;
}

@mixin type-text-uppercase--height {
  height: NOT-FOUND;
}

@mixin type-text-uppercase--absolute-layout {
   
}

@mixin type-text-uppercase--html-autolayout {
  display: inline-block;
  margin-left: var( --type-text-uppercase-left , NOT-FOUND );
  margin-right: var( --type-text-uppercase-right , NOT-FOUND );
  margin-top: var( --type-text-uppercase-top , NOT-FOUND );
  margin-bottom: var( --type-text-uppercase-bottom , NOT-FOUND );
  width: calc( 100% - ( var( --type-text-uppercase-left , NOT-FOUND ) + var( --type-text-uppercase-right , NOT-FOUND ) ) );
}

// ================================
// [TEXT_TOKEN] type-text-uppercase-04

@mixin type-text-uppercase-04 { 
  position: relative;
  font-size: var( --type-text-uppercase-04-font-size , 12px );
  text-align: var( --type-text-uppercase-04-text-align-horizontal , LEFT );
  color: var( --type-text-uppercase-04-color , rgba(0,0,0,1) );
  font-family: var( --type-text-uppercase-04-font-family , 'Proxima Nova' );
  font-weight: var( --type-text-uppercase-04-font-weight , 500 );
  line-height: var( --type-text-uppercase-04-line-height , 14.06px );
  letter-spacing: var( --type-text-uppercase-04-letter-spacing , 0px ); 
}

@mixin type-text-uppercase-04--sizing {
  width: NOT-FOUND;
  height: NOT-FOUND;
}

@mixin type-text-uppercase-04--width {
  width: NOT-FOUND;
}

@mixin type-text-uppercase-04--height {
  height: NOT-FOUND;
}

@mixin type-text-uppercase-04--absolute-layout {
   
}

@mixin type-text-uppercase-04--html-autolayout {
  display: inline-block;
  margin-left: var( --type-text-uppercase-04-left , NOT-FOUND );
  margin-right: var( --type-text-uppercase-04-right , NOT-FOUND );
  margin-top: var( --type-text-uppercase-04-top , NOT-FOUND );
  margin-bottom: var( --type-text-uppercase-04-bottom , NOT-FOUND );
  width: calc( 100% - ( var( --type-text-uppercase-04-left , NOT-FOUND ) + var( --type-text-uppercase-04-right , NOT-FOUND ) ) );
}

// ================================
// [TEXT_TOKEN] type-text-uppercase-small

@mixin type-text-uppercase-small { 
  position: relative;
  font-size: var( --type-text-uppercase-small-font-size , 12px );
  text-align: var( --type-text-uppercase-small-text-align-horizontal , LEFT );
  color: var( --type-text-uppercase-small-color , rgba(0,0,0,1) );
  font-family: var( --type-text-uppercase-small-font-family , 'Proxima Nova' );
  font-weight: var( --type-text-uppercase-small-font-weight , 500 );
  line-height: var( --type-text-uppercase-small-line-height , 14.06px );
  letter-spacing: var( --type-text-uppercase-small-letter-spacing , 0px ); 
}

@mixin type-text-uppercase-small--sizing {
  width: NOT-FOUND;
  height: NOT-FOUND;
}

@mixin type-text-uppercase-small--width {
  width: NOT-FOUND;
}

@mixin type-text-uppercase-small--height {
  height: NOT-FOUND;
}

@mixin type-text-uppercase-small--absolute-layout {
   
}

@mixin type-text-uppercase-small--html-autolayout {
  display: inline-block;
  margin-left: var( --type-text-uppercase-small-left , NOT-FOUND );
  margin-right: var( --type-text-uppercase-small-right , NOT-FOUND );
  margin-top: var( --type-text-uppercase-small-top , NOT-FOUND );
  margin-bottom: var( --type-text-uppercase-small-bottom , NOT-FOUND );
  width: calc( 100% - ( var( --type-text-uppercase-small-left , NOT-FOUND ) + var( --type-text-uppercase-small-right , NOT-FOUND ) ) );
}

// ================================
// [TEXT_TOKEN] type-text-uppercase-03

@mixin type-text-uppercase-03 { 
  position: relative;
  font-size: var( --type-text-uppercase-03-font-size , 11px );
  text-align: var( --type-text-uppercase-03-text-align-horizontal , LEFT );
  color: var( --type-text-uppercase-03-color , rgba(0,0,0,1) );
  font-family: var( --type-text-uppercase-03-font-family , 'Proxima Nova' );
  font-weight: var( --type-text-uppercase-03-font-weight , 500 );
  line-height: var( --type-text-uppercase-03-line-height , 12.89px );
  letter-spacing: var( --type-text-uppercase-03-letter-spacing , 0px ); 
}

@mixin type-text-uppercase-03--sizing {
  width: NOT-FOUND;
  height: NOT-FOUND;
}

@mixin type-text-uppercase-03--width {
  width: NOT-FOUND;
}

@mixin type-text-uppercase-03--height {
  height: NOT-FOUND;
}

@mixin type-text-uppercase-03--absolute-layout {
   
}

@mixin type-text-uppercase-03--html-autolayout {
  display: inline-block;
  margin-left: var( --type-text-uppercase-03-left , NOT-FOUND );
  margin-right: var( --type-text-uppercase-03-right , NOT-FOUND );
  margin-top: var( --type-text-uppercase-03-top , NOT-FOUND );
  margin-bottom: var( --type-text-uppercase-03-bottom , NOT-FOUND );
  width: calc( 100% - ( var( --type-text-uppercase-03-left , NOT-FOUND ) + var( --type-text-uppercase-03-right , NOT-FOUND ) ) );
}

// ================================
// [TEXT_TOKEN] type-text-uppercase-smaller

@mixin type-text-uppercase-smaller { 
  position: relative;
  font-size: var( --type-text-uppercase-smaller-font-size , 11px );
  text-align: var( --type-text-uppercase-smaller-text-align-horizontal , LEFT );
  color: var( --type-text-uppercase-smaller-color , rgba(0,0,0,1) );
  font-family: var( --type-text-uppercase-smaller-font-family , 'Proxima Nova' );
  font-weight: var( --type-text-uppercase-smaller-font-weight , 500 );
  line-height: var( --type-text-uppercase-smaller-line-height , 12.89px );
  letter-spacing: var( --type-text-uppercase-smaller-letter-spacing , 0px ); 
}

@mixin type-text-uppercase-smaller--sizing {
  width: NOT-FOUND;
  height: NOT-FOUND;
}

@mixin type-text-uppercase-smaller--width {
  width: NOT-FOUND;
}

@mixin type-text-uppercase-smaller--height {
  height: NOT-FOUND;
}

@mixin type-text-uppercase-smaller--absolute-layout {
   
}

@mixin type-text-uppercase-smaller--html-autolayout {
  display: inline-block;
  margin-left: var( --type-text-uppercase-smaller-left , NOT-FOUND );
  margin-right: var( --type-text-uppercase-smaller-right , NOT-FOUND );
  margin-top: var( --type-text-uppercase-smaller-top , NOT-FOUND );
  margin-bottom: var( --type-text-uppercase-smaller-bottom , NOT-FOUND );
  width: calc( 100% - ( var( --type-text-uppercase-smaller-left , NOT-FOUND ) + var( --type-text-uppercase-smaller-right , NOT-FOUND ) ) );
}

// ================================
// [TEXT_TOKEN] type-text-uppercase-02

@mixin type-text-uppercase-02 { 
  position: relative;
  font-size: var( --type-text-uppercase-02-font-size , 9px );
  text-align: var( --type-text-uppercase-02-text-align-horizontal , LEFT );
  color: var( --type-text-uppercase-02-color , rgba(0,0,0,1) );
  font-family: var( --type-text-uppercase-02-font-family , 'Proxima Nova' );
  font-weight: var( --type-text-uppercase-02-font-weight , 500 );
  line-height: var( --type-text-uppercase-02-line-height , 10.55px );
  letter-spacing: var( --type-text-uppercase-02-letter-spacing , 0px ); 
}

@mixin type-text-uppercase-02--sizing {
  width: NOT-FOUND;
  height: NOT-FOUND;
}

@mixin type-text-uppercase-02--width {
  width: NOT-FOUND;
}

@mixin type-text-uppercase-02--height {
  height: NOT-FOUND;
}

@mixin type-text-uppercase-02--absolute-layout {
   
}

@mixin type-text-uppercase-02--html-autolayout {
  display: inline-block;
  margin-left: var( --type-text-uppercase-02-left , NOT-FOUND );
  margin-right: var( --type-text-uppercase-02-right , NOT-FOUND );
  margin-top: var( --type-text-uppercase-02-top , NOT-FOUND );
  margin-bottom: var( --type-text-uppercase-02-bottom , NOT-FOUND );
  width: calc( 100% - ( var( --type-text-uppercase-02-left , NOT-FOUND ) + var( --type-text-uppercase-02-right , NOT-FOUND ) ) );
}

// ================================
// [TEXT_TOKEN] type-text-uppercase-smallest

@mixin type-text-uppercase-smallest { 
  position: relative;
  font-size: var( --type-text-uppercase-smallest-font-size , 9px );
  text-align: var( --type-text-uppercase-smallest-text-align-horizontal , LEFT );
  color: var( --type-text-uppercase-smallest-color , rgba(0,0,0,1) );
  font-family: var( --type-text-uppercase-smallest-font-family , 'Proxima Nova' );
  font-weight: var( --type-text-uppercase-smallest-font-weight , 500 );
  line-height: var( --type-text-uppercase-smallest-line-height , 10.55px );
  letter-spacing: var( --type-text-uppercase-smallest-letter-spacing , 0px ); 
}

@mixin type-text-uppercase-smallest--sizing {
  width: NOT-FOUND;
  height: NOT-FOUND;
}

@mixin type-text-uppercase-smallest--width {
  width: NOT-FOUND;
}

@mixin type-text-uppercase-smallest--height {
  height: NOT-FOUND;
}

@mixin type-text-uppercase-smallest--absolute-layout {
   
}

@mixin type-text-uppercase-smallest--html-autolayout {
  display: inline-block;
  margin-left: var( --type-text-uppercase-smallest-left , NOT-FOUND );
  margin-right: var( --type-text-uppercase-smallest-right , NOT-FOUND );
  margin-top: var( --type-text-uppercase-smallest-top , NOT-FOUND );
  margin-bottom: var( --type-text-uppercase-smallest-bottom , NOT-FOUND );
  width: calc( 100% - ( var( --type-text-uppercase-smallest-left , NOT-FOUND ) + var( --type-text-uppercase-smallest-right , NOT-FOUND ) ) );
}

// ================================
// [TEXT_TOKEN] type-text-uppercase-01

@mixin type-text-uppercase-01 { 
  position: relative;
  font-size: var( --type-text-uppercase-01-font-size , 8px );
  text-align: var( --type-text-uppercase-01-text-align-horizontal , LEFT );
  color: var( --type-text-uppercase-01-color , rgba(0,0,0,1) );
  font-family: var( --type-text-uppercase-01-font-family , 'Proxima Nova' );
  font-weight: var( --type-text-uppercase-01-font-weight , 500 );
  line-height: var( --type-text-uppercase-01-line-height , 9.38px );
  letter-spacing: var( --type-text-uppercase-01-letter-spacing , 0px ); 
}

@mixin type-text-uppercase-01--sizing {
  width: NOT-FOUND;
  height: NOT-FOUND;
}

@mixin type-text-uppercase-01--width {
  width: NOT-FOUND;
}

@mixin type-text-uppercase-01--height {
  height: NOT-FOUND;
}

@mixin type-text-uppercase-01--absolute-layout {
   
}

@mixin type-text-uppercase-01--html-autolayout {
  display: inline-block;
  margin-left: var( --type-text-uppercase-01-left , NOT-FOUND );
  margin-right: var( --type-text-uppercase-01-right , NOT-FOUND );
  margin-top: var( --type-text-uppercase-01-top , NOT-FOUND );
  margin-bottom: var( --type-text-uppercase-01-bottom , NOT-FOUND );
  width: calc( 100% - ( var( --type-text-uppercase-01-left , NOT-FOUND ) + var( --type-text-uppercase-01-right , NOT-FOUND ) ) );
}

// ================================
// [EFFECT_TOKEN] effect-shadow

@mixin effect-shadow { 
  box-shadow: var( --effect-shadow-shadow , 0px 0px 8px 0px rgba(0,0,0,0.27) ); 
}

// ================================
// [EFFECT_TOKEN] effect-shadow-dark

@mixin effect-shadow-dark { 
  box-shadow: var( --effect-shadow-dark-shadow , 0px 0px 8px 0px rgba(0,0,0,0.27) ); 
}

// ================================
// [EFFECT_TOKEN] effect-focus

@mixin effect-focus { 
  box-shadow: var( --effect-focus-shadow , 0px 0px 0px 2px rgba(53,155,249,1) ); 
}

// ================================
// [TEXT_TOKEN] icon-edit-12

@mixin icon-edit-12 { 
  background-image: var( --icon-edit-svg );
  background-position: center;
  background-repeat: no-repeat;
  width: var( --icon-edit-12-width , 12px );
  height: var( --icon-edit-12-height , 12px );
  background-size: var( --icon-edit-12-background-size , 12px 12px ); 
}

// ================================
// [TEXT_TOKEN] icon-edit-16

@mixin icon-edit-16 { 
  background-image: var( --icon-edit-svg );
  background-position: center;
  background-repeat: no-repeat;
  width: var( --icon-edit-16-width , 16px );
  height: var( --icon-edit-16-height , 16px );
  background-size: var( --icon-edit-16-background-size , 16px 16px ); 
}

// ================================
// [TEXT_TOKEN] icon-edit

@mixin icon-edit { 
  background-image: var( --icon-edit-svg );
  background-position: center;
  background-repeat: no-repeat;
  width: var( --icon-edit-width , 24px );
  height: var( --icon-edit-height , 24px );
  background-size: var( --icon-edit-background-size , 24px 24px ); 
}

// ================================
// [TEXT_TOKEN] icon-edit-24

@mixin icon-edit-24 { 
  background-image: var( --icon-edit-svg );
  background-position: center;
  background-repeat: no-repeat;
  width: var( --icon-edit-24-width , 24px );
  height: var( --icon-edit-24-height , 24px );
  background-size: var( --icon-edit-24-background-size , 24px 24px ); 
}

// ================================
// [TEXT_TOKEN] icon-edit-32

@mixin icon-edit-32 { 
  background-image: var( --icon-edit-svg );
  background-position: center;
  background-repeat: no-repeat;
  width: var( --icon-edit-32-width , 32px );
  height: var( --icon-edit-32-height , 32px );
  background-size: var( --icon-edit-32-background-size , 32px 32px ); 
}

// ================================
// [TEXT_TOKEN] icon-edit-48

@mixin icon-edit-48 { 
  background-image: var( --icon-edit-svg );
  background-position: center;
  background-repeat: no-repeat;
  width: var( --icon-edit-48-width , 48px );
  height: var( --icon-edit-48-height , 48px );
  background-size: var( --icon-edit-48-background-size , 48px 48px ); 
}

// ================================
// [TEXT_TOKEN] icon-edit-64

@mixin icon-edit-64 { 
  background-image: var( --icon-edit-svg );
  background-position: center;
  background-repeat: no-repeat;
  width: var( --icon-edit-64-width , 64px );
  height: var( --icon-edit-64-height , 64px );
  background-size: var( --icon-edit-64-background-size , 64px 64px ); 
}

// ================================
// [TEXT_TOKEN] icon-pin-verification-12

@mixin icon-pin-verification-12 { 
  background-image: var( --icon-pin-verification-svg );
  background-position: center;
  background-repeat: no-repeat;
  width: var( --icon-pin-verification-12-width , 12px );
  height: var( --icon-pin-verification-12-height , 12px );
  background-size: var( --icon-pin-verification-12-background-size , 12px 12px ); 
}

// ================================
// [TEXT_TOKEN] icon-pin-verification-16

@mixin icon-pin-verification-16 { 
  background-image: var( --icon-pin-verification-svg );
  background-position: center;
  background-repeat: no-repeat;
  width: var( --icon-pin-verification-16-width , 16px );
  height: var( --icon-pin-verification-16-height , 16px );
  background-size: var( --icon-pin-verification-16-background-size , 16px 16px ); 
}

// ================================
// [TEXT_TOKEN] icon-pin-verification

@mixin icon-pin-verification { 
  background-image: var( --icon-pin-verification-svg );
  background-position: center;
  background-repeat: no-repeat;
  width: var( --icon-pin-verification-width , 24px );
  height: var( --icon-pin-verification-height , 24px );
  background-size: var( --icon-pin-verification-background-size , 24px 24px ); 
}

// ================================
// [TEXT_TOKEN] icon-pin-verification-24

@mixin icon-pin-verification-24 { 
  background-image: var( --icon-pin-verification-svg );
  background-position: center;
  background-repeat: no-repeat;
  width: var( --icon-pin-verification-24-width , 24px );
  height: var( --icon-pin-verification-24-height , 24px );
  background-size: var( --icon-pin-verification-24-background-size , 24px 24px ); 
}

// ================================
// [TEXT_TOKEN] icon-pin-verification-32

@mixin icon-pin-verification-32 { 
  background-image: var( --icon-pin-verification-svg );
  background-position: center;
  background-repeat: no-repeat;
  width: var( --icon-pin-verification-32-width , 32px );
  height: var( --icon-pin-verification-32-height , 32px );
  background-size: var( --icon-pin-verification-32-background-size , 32px 32px ); 
}

// ================================
// [TEXT_TOKEN] icon-pin-verification-48

@mixin icon-pin-verification-48 { 
  background-image: var( --icon-pin-verification-svg );
  background-position: center;
  background-repeat: no-repeat;
  width: var( --icon-pin-verification-48-width , 48px );
  height: var( --icon-pin-verification-48-height , 48px );
  background-size: var( --icon-pin-verification-48-background-size , 48px 48px ); 
}

// ================================
// [TEXT_TOKEN] icon-pin-verification-64

@mixin icon-pin-verification-64 { 
  background-image: var( --icon-pin-verification-svg );
  background-position: center;
  background-repeat: no-repeat;
  width: var( --icon-pin-verification-64-width , 64px );
  height: var( --icon-pin-verification-64-height , 64px );
  background-size: var( --icon-pin-verification-64-background-size , 64px 64px ); 
}

// ================================
// [TEXT_TOKEN] icon-show-password-12

@mixin icon-show-password-12 { 
  background-image: var( --icon-show-password-svg );
  background-position: center;
  background-repeat: no-repeat;
  width: var( --icon-show-password-12-width , 12px );
  height: var( --icon-show-password-12-height , 12px );
  background-size: var( --icon-show-password-12-background-size , 12px 12px ); 
}

// ================================
// [TEXT_TOKEN] icon-show-password-16

@mixin icon-show-password-16 { 
  background-image: var( --icon-show-password-svg );
  background-position: center;
  background-repeat: no-repeat;
  width: var( --icon-show-password-16-width , 16px );
  height: var( --icon-show-password-16-height , 16px );
  background-size: var( --icon-show-password-16-background-size , 16px 16px ); 
}

// ================================
// [TEXT_TOKEN] icon-show-password

@mixin icon-show-password { 
  background-image: var( --icon-show-password-svg );
  background-position: center;
  background-repeat: no-repeat;
  width: var( --icon-show-password-width , 24px );
  height: var( --icon-show-password-height , 24px );
  background-size: var( --icon-show-password-background-size , 24px 24px ); 
}

// ================================
// [TEXT_TOKEN] icon-show-password-24

@mixin icon-show-password-24 { 
  background-image: var( --icon-show-password-svg );
  background-position: center;
  background-repeat: no-repeat;
  width: var( --icon-show-password-24-width , 24px );
  height: var( --icon-show-password-24-height , 24px );
  background-size: var( --icon-show-password-24-background-size , 24px 24px ); 
}

// ================================
// [TEXT_TOKEN] icon-show-password-32

@mixin icon-show-password-32 { 
  background-image: var( --icon-show-password-svg );
  background-position: center;
  background-repeat: no-repeat;
  width: var( --icon-show-password-32-width , 32px );
  height: var( --icon-show-password-32-height , 32px );
  background-size: var( --icon-show-password-32-background-size , 32px 32px ); 
}

// ================================
// [TEXT_TOKEN] icon-show-password-48

@mixin icon-show-password-48 { 
  background-image: var( --icon-show-password-svg );
  background-position: center;
  background-repeat: no-repeat;
  width: var( --icon-show-password-48-width , 48px );
  height: var( --icon-show-password-48-height , 48px );
  background-size: var( --icon-show-password-48-background-size , 48px 48px ); 
}

// ================================
// [TEXT_TOKEN] icon-show-password-64

@mixin icon-show-password-64 { 
  background-image: var( --icon-show-password-svg );
  background-position: center;
  background-repeat: no-repeat;
  width: var( --icon-show-password-64-width , 64px );
  height: var( --icon-show-password-64-height , 64px );
  background-size: var( --icon-show-password-64-background-size , 64px 64px ); 
}

// ================================
// [TEXT_TOKEN] icon-placeholder-12

@mixin icon-placeholder-12 { 
  background-image: var( --icon-placeholder-svg );
  background-position: center;
  background-repeat: no-repeat;
  width: var( --icon-placeholder-12-width , 12px );
  height: var( --icon-placeholder-12-height , 12px );
  background-size: var( --icon-placeholder-12-background-size , 12px 12px ); 
}

// ================================
// [TEXT_TOKEN] icon-placeholder-16

@mixin icon-placeholder-16 { 
  background-image: var( --icon-placeholder-svg );
  background-position: center;
  background-repeat: no-repeat;
  width: var( --icon-placeholder-16-width , 16px );
  height: var( --icon-placeholder-16-height , 16px );
  background-size: var( --icon-placeholder-16-background-size , 16px 16px ); 
}

// ================================
// [TEXT_TOKEN] icon-placeholder

@mixin icon-placeholder { 
  background-image: var( --icon-placeholder-svg );
  background-position: center;
  background-repeat: no-repeat;
  width: var( --icon-placeholder-width , 24px );
  height: var( --icon-placeholder-height , 24px );
  background-size: var( --icon-placeholder-background-size , 24px 24px ); 
}

// ================================
// [TEXT_TOKEN] icon-placeholder-24

@mixin icon-placeholder-24 { 
  background-image: var( --icon-placeholder-svg );
  background-position: center;
  background-repeat: no-repeat;
  width: var( --icon-placeholder-24-width , 24px );
  height: var( --icon-placeholder-24-height , 24px );
  background-size: var( --icon-placeholder-24-background-size , 24px 24px ); 
}

// ================================
// [TEXT_TOKEN] icon-placeholder-32

@mixin icon-placeholder-32 { 
  background-image: var( --icon-placeholder-svg );
  background-position: center;
  background-repeat: no-repeat;
  width: var( --icon-placeholder-32-width , 32px );
  height: var( --icon-placeholder-32-height , 32px );
  background-size: var( --icon-placeholder-32-background-size , 32px 32px ); 
}

// ================================
// [TEXT_TOKEN] icon-placeholder-48

@mixin icon-placeholder-48 { 
  background-image: var( --icon-placeholder-svg );
  background-position: center;
  background-repeat: no-repeat;
  width: var( --icon-placeholder-48-width , 48px );
  height: var( --icon-placeholder-48-height , 48px );
  background-size: var( --icon-placeholder-48-background-size , 48px 48px ); 
}

// ================================
// [TEXT_TOKEN] icon-placeholder-64

@mixin icon-placeholder-64 { 
  background-image: var( --icon-placeholder-svg );
  background-position: center;
  background-repeat: no-repeat;
  width: var( --icon-placeholder-64-width , 64px );
  height: var( --icon-placeholder-64-height , 64px );
  background-size: var( --icon-placeholder-64-background-size , 64px 64px ); 
}

// ================================
// [TEXT_TOKEN] icon-summit-central-logo-12

@mixin icon-summit-central-logo-12 { 
  background-image: var( --icon-summit-central-logo-svg );
  background-position: center;
  background-repeat: no-repeat;
  width: var( --icon-summit-central-logo-12-width , 12px );
  height: var( --icon-summit-central-logo-12-height , 12px );
  background-size: var( --icon-summit-central-logo-12-background-size , 12px 12px ); 
}

// ================================
// [TEXT_TOKEN] icon-summit-central-logo-16

@mixin icon-summit-central-logo-16 { 
  background-image: var( --icon-summit-central-logo-svg );
  background-position: center;
  background-repeat: no-repeat;
  width: var( --icon-summit-central-logo-16-width , 16px );
  height: var( --icon-summit-central-logo-16-height , 16px );
  background-size: var( --icon-summit-central-logo-16-background-size , 16px 16px ); 
}

// ================================
// [TEXT_TOKEN] icon-summit-central-logo

@mixin icon-summit-central-logo { 
  background-image: var( --icon-summit-central-logo-svg );
  background-position: center;
  background-repeat: no-repeat;
  width: var( --icon-summit-central-logo-width , 24px );
  height: var( --icon-summit-central-logo-height , 24px );
  background-size: var( --icon-summit-central-logo-background-size , 24px 24px ); 
}

// ================================
// [TEXT_TOKEN] icon-summit-central-logo-24

@mixin icon-summit-central-logo-24 { 
  background-image: var( --icon-summit-central-logo-svg );
  background-position: center;
  background-repeat: no-repeat;
  width: var( --icon-summit-central-logo-24-width , 24px );
  height: var( --icon-summit-central-logo-24-height , 24px );
  background-size: var( --icon-summit-central-logo-24-background-size , 24px 24px ); 
}

// ================================
// [TEXT_TOKEN] icon-summit-central-logo-32

@mixin icon-summit-central-logo-32 { 
  background-image: var( --icon-summit-central-logo-svg );
  background-position: center;
  background-repeat: no-repeat;
  width: var( --icon-summit-central-logo-32-width , 32px );
  height: var( --icon-summit-central-logo-32-height , 32px );
  background-size: var( --icon-summit-central-logo-32-background-size , 32px 32px ); 
}

// ================================
// [TEXT_TOKEN] icon-summit-central-logo-48

@mixin icon-summit-central-logo-48 { 
  background-image: var( --icon-summit-central-logo-svg );
  background-position: center;
  background-repeat: no-repeat;
  width: var( --icon-summit-central-logo-48-width , 48px );
  height: var( --icon-summit-central-logo-48-height , 48px );
  background-size: var( --icon-summit-central-logo-48-background-size , 48px 48px ); 
}

// ================================
// [TEXT_TOKEN] icon-summit-central-logo-64

@mixin icon-summit-central-logo-64 { 
  background-image: var( --icon-summit-central-logo-svg );
  background-position: center;
  background-repeat: no-repeat;
  width: var( --icon-summit-central-logo-64-width , 64px );
  height: var( --icon-summit-central-logo-64-height , 64px );
  background-size: var( --icon-summit-central-logo-64-background-size , 64px 64px ); 
}

// ================================
// [TEXT_TOKEN] icon-dashboard-12

@mixin icon-dashboard-12 { 
  background-image: var( --icon-dashboard-svg );
  background-position: center;
  background-repeat: no-repeat;
  width: var( --icon-dashboard-12-width , 12px );
  height: var( --icon-dashboard-12-height , 12px );
  background-size: var( --icon-dashboard-12-background-size , 12px 12px ); 
}

// ================================
// [TEXT_TOKEN] icon-dashboard-16

@mixin icon-dashboard-16 { 
  background-image: var( --icon-dashboard-svg );
  background-position: center;
  background-repeat: no-repeat;
  width: var( --icon-dashboard-16-width , 16px );
  height: var( --icon-dashboard-16-height , 16px );
  background-size: var( --icon-dashboard-16-background-size , 16px 16px ); 
}

// ================================
// [TEXT_TOKEN] icon-dashboard

@mixin icon-dashboard { 
  background-image: var( --icon-dashboard-svg );
  background-position: center;
  background-repeat: no-repeat;
  width: var( --icon-dashboard-width , 24px );
  height: var( --icon-dashboard-height , 24px );
  background-size: var( --icon-dashboard-background-size , 24px 24px ); 
}

// ================================
// [TEXT_TOKEN] icon-dashboard-24

@mixin icon-dashboard-24 { 
  background-image: var( --icon-dashboard-svg );
  background-position: center;
  background-repeat: no-repeat;
  width: var( --icon-dashboard-24-width , 24px );
  height: var( --icon-dashboard-24-height , 24px );
  background-size: var( --icon-dashboard-24-background-size , 24px 24px ); 
}

// ================================
// [TEXT_TOKEN] icon-dashboard-32

@mixin icon-dashboard-32 { 
  background-image: var( --icon-dashboard-svg );
  background-position: center;
  background-repeat: no-repeat;
  width: var( --icon-dashboard-32-width , 32px );
  height: var( --icon-dashboard-32-height , 32px );
  background-size: var( --icon-dashboard-32-background-size , 32px 32px ); 
}

// ================================
// [TEXT_TOKEN] icon-dashboard-48

@mixin icon-dashboard-48 { 
  background-image: var( --icon-dashboard-svg );
  background-position: center;
  background-repeat: no-repeat;
  width: var( --icon-dashboard-48-width , 48px );
  height: var( --icon-dashboard-48-height , 48px );
  background-size: var( --icon-dashboard-48-background-size , 48px 48px ); 
}

// ================================
// [TEXT_TOKEN] icon-dashboard-64

@mixin icon-dashboard-64 { 
  background-image: var( --icon-dashboard-svg );
  background-position: center;
  background-repeat: no-repeat;
  width: var( --icon-dashboard-64-width , 64px );
  height: var( --icon-dashboard-64-height , 64px );
  background-size: var( --icon-dashboard-64-background-size , 64px 64px ); 
}

// ================================
// [TEXT_TOKEN] icon-member-banking-12

@mixin icon-member-banking-12 { 
  background-image: var( --icon-member-banking-svg );
  background-position: center;
  background-repeat: no-repeat;
  width: var( --icon-member-banking-12-width , 12px );
  height: var( --icon-member-banking-12-height , 12px );
  background-size: var( --icon-member-banking-12-background-size , 12px 12px ); 
}

// ================================
// [TEXT_TOKEN] icon-member-banking-16

@mixin icon-member-banking-16 { 
  background-image: var( --icon-member-banking-svg );
  background-position: center;
  background-repeat: no-repeat;
  width: var( --icon-member-banking-16-width , 16px );
  height: var( --icon-member-banking-16-height , 16px );
  background-size: var( --icon-member-banking-16-background-size , 16px 16px ); 
}

// ================================
// [TEXT_TOKEN] icon-member-banking

@mixin icon-member-banking { 
  background-image: var( --icon-member-banking-svg );
  background-position: center;
  background-repeat: no-repeat;
  width: var( --icon-member-banking-width , 24px );
  height: var( --icon-member-banking-height , 24px );
  background-size: var( --icon-member-banking-background-size , 24px 24px ); 
}

// ================================
// [TEXT_TOKEN] icon-member-banking-24

@mixin icon-member-banking-24 { 
  background-image: var( --icon-member-banking-svg );
  background-position: center;
  background-repeat: no-repeat;
  width: var( --icon-member-banking-24-width , 24px );
  height: var( --icon-member-banking-24-height , 24px );
  background-size: var( --icon-member-banking-24-background-size , 24px 24px ); 
}

// ================================
// [TEXT_TOKEN] icon-member-banking-32

@mixin icon-member-banking-32 { 
  background-image: var( --icon-member-banking-svg );
  background-position: center;
  background-repeat: no-repeat;
  width: var( --icon-member-banking-32-width , 32px );
  height: var( --icon-member-banking-32-height , 32px );
  background-size: var( --icon-member-banking-32-background-size , 32px 32px ); 
}

// ================================
// [TEXT_TOKEN] icon-member-banking-48

@mixin icon-member-banking-48 { 
  background-image: var( --icon-member-banking-svg );
  background-position: center;
  background-repeat: no-repeat;
  width: var( --icon-member-banking-48-width , 48px );
  height: var( --icon-member-banking-48-height , 48px );
  background-size: var( --icon-member-banking-48-background-size , 48px 48px ); 
}

// ================================
// [TEXT_TOKEN] icon-member-banking-64

@mixin icon-member-banking-64 { 
  background-image: var( --icon-member-banking-svg );
  background-position: center;
  background-repeat: no-repeat;
  width: var( --icon-member-banking-64-width , 64px );
  height: var( --icon-member-banking-64-height , 64px );
  background-size: var( --icon-member-banking-64-background-size , 64px 64px ); 
}

// ================================
// [TEXT_TOKEN] icon-search-12

@mixin icon-search-12 { 
  background-image: var( --icon-search-svg );
  background-position: center;
  background-repeat: no-repeat;
  width: var( --icon-search-12-width , 12px );
  height: var( --icon-search-12-height , 12px );
  background-size: var( --icon-search-12-background-size , 12px 12px ); 
}

// ================================
// [TEXT_TOKEN] icon-search-16

@mixin icon-search-16 { 
  background-image: var( --icon-search-svg );
  background-position: center;
  background-repeat: no-repeat;
  width: var( --icon-search-16-width , 16px );
  height: var( --icon-search-16-height , 16px );
  background-size: var( --icon-search-16-background-size , 16px 16px ); 
}

// ================================
// [TEXT_TOKEN] icon-search

@mixin icon-search { 
  background-image: var( --icon-search-svg );
  background-position: center;
  background-repeat: no-repeat;
  width: var( --icon-search-width , 24px );
  height: var( --icon-search-height , 24px );
  background-size: var( --icon-search-background-size , 24px 24px ); 
}

// ================================
// [TEXT_TOKEN] icon-search-24

@mixin icon-search-24 { 
  background-image: var( --icon-search-svg );
  background-position: center;
  background-repeat: no-repeat;
  width: var( --icon-search-24-width , 24px );
  height: var( --icon-search-24-height , 24px );
  background-size: var( --icon-search-24-background-size , 24px 24px ); 
}

// ================================
// [TEXT_TOKEN] icon-search-32

@mixin icon-search-32 { 
  background-image: var( --icon-search-svg );
  background-position: center;
  background-repeat: no-repeat;
  width: var( --icon-search-32-width , 32px );
  height: var( --icon-search-32-height , 32px );
  background-size: var( --icon-search-32-background-size , 32px 32px ); 
}

// ================================
// [TEXT_TOKEN] icon-search-48

@mixin icon-search-48 { 
  background-image: var( --icon-search-svg );
  background-position: center;
  background-repeat: no-repeat;
  width: var( --icon-search-48-width , 48px );
  height: var( --icon-search-48-height , 48px );
  background-size: var( --icon-search-48-background-size , 48px 48px ); 
}

// ================================
// [TEXT_TOKEN] icon-search-64

@mixin icon-search-64 { 
  background-image: var( --icon-search-svg );
  background-position: center;
  background-repeat: no-repeat;
  width: var( --icon-search-64-width , 64px );
  height: var( --icon-search-64-height , 64px );
  background-size: var( --icon-search-64-background-size , 64px 64px ); 
}

// ================================
// [TEXT_TOKEN] icon-profile-12

@mixin icon-profile-12 { 
  background-image: var( --icon-profile-svg );
  background-position: center;
  background-repeat: no-repeat;
  width: var( --icon-profile-12-width , 12px );
  height: var( --icon-profile-12-height , 12px );
  background-size: var( --icon-profile-12-background-size , 12px 12px ); 
}

// ================================
// [TEXT_TOKEN] icon-profile-16

@mixin icon-profile-16 { 
  background-image: var( --icon-profile-svg );
  background-position: center;
  background-repeat: no-repeat;
  width: var( --icon-profile-16-width , 16px );
  height: var( --icon-profile-16-height , 16px );
  background-size: var( --icon-profile-16-background-size , 16px 16px ); 
}

// ================================
// [TEXT_TOKEN] icon-profile

@mixin icon-profile { 
  background-image: var( --icon-profile-svg );
  background-position: center;
  background-repeat: no-repeat;
  width: var( --icon-profile-width , 24px );
  height: var( --icon-profile-height , 24px );
  background-size: var( --icon-profile-background-size , 24px 24px ); 
}

// ================================
// [TEXT_TOKEN] icon-profile-24

@mixin icon-profile-24 { 
  background-image: var( --icon-profile-svg );
  background-position: center;
  background-repeat: no-repeat;
  width: var( --icon-profile-24-width , 24px );
  height: var( --icon-profile-24-height , 24px );
  background-size: var( --icon-profile-24-background-size , 24px 24px ); 
}

// ================================
// [TEXT_TOKEN] icon-profile-32

@mixin icon-profile-32 { 
  background-image: var( --icon-profile-svg );
  background-position: center;
  background-repeat: no-repeat;
  width: var( --icon-profile-32-width , 32px );
  height: var( --icon-profile-32-height , 32px );
  background-size: var( --icon-profile-32-background-size , 32px 32px ); 
}

// ================================
// [TEXT_TOKEN] icon-profile-48

@mixin icon-profile-48 { 
  background-image: var( --icon-profile-svg );
  background-position: center;
  background-repeat: no-repeat;
  width: var( --icon-profile-48-width , 48px );
  height: var( --icon-profile-48-height , 48px );
  background-size: var( --icon-profile-48-background-size , 48px 48px ); 
}

// ================================
// [TEXT_TOKEN] icon-profile-64

@mixin icon-profile-64 { 
  background-image: var( --icon-profile-svg );
  background-position: center;
  background-repeat: no-repeat;
  width: var( --icon-profile-64-width , 64px );
  height: var( --icon-profile-64-height , 64px );
  background-size: var( --icon-profile-64-background-size , 64px 64px ); 
}

// ================================
// [TEXT_TOKEN] icon-insights-12

@mixin icon-insights-12 { 
  background-image: var( --icon-insights-svg );
  background-position: center;
  background-repeat: no-repeat;
  width: var( --icon-insights-12-width , 12px );
  height: var( --icon-insights-12-height , 12px );
  background-size: var( --icon-insights-12-background-size , 12px 12px ); 
}

// ================================
// [TEXT_TOKEN] icon-insights-16

@mixin icon-insights-16 { 
  background-image: var( --icon-insights-svg );
  background-position: center;
  background-repeat: no-repeat;
  width: var( --icon-insights-16-width , 16px );
  height: var( --icon-insights-16-height , 16px );
  background-size: var( --icon-insights-16-background-size , 16px 16px ); 
}

// ================================
// [TEXT_TOKEN] icon-insights

@mixin icon-insights { 
  background-image: var( --icon-insights-svg );
  background-position: center;
  background-repeat: no-repeat;
  width: var( --icon-insights-width , 24px );
  height: var( --icon-insights-height , 24px );
  background-size: var( --icon-insights-background-size , 24px 24px ); 
}

// ================================
// [TEXT_TOKEN] icon-insights-24

@mixin icon-insights-24 { 
  background-image: var( --icon-insights-svg );
  background-position: center;
  background-repeat: no-repeat;
  width: var( --icon-insights-24-width , 24px );
  height: var( --icon-insights-24-height , 24px );
  background-size: var( --icon-insights-24-background-size , 24px 24px ); 
}

// ================================
// [TEXT_TOKEN] icon-insights-32

@mixin icon-insights-32 { 
  background-image: var( --icon-insights-svg );
  background-position: center;
  background-repeat: no-repeat;
  width: var( --icon-insights-32-width , 32px );
  height: var( --icon-insights-32-height , 32px );
  background-size: var( --icon-insights-32-background-size , 32px 32px ); 
}

// ================================
// [TEXT_TOKEN] icon-insights-48

@mixin icon-insights-48 { 
  background-image: var( --icon-insights-svg );
  background-position: center;
  background-repeat: no-repeat;
  width: var( --icon-insights-48-width , 48px );
  height: var( --icon-insights-48-height , 48px );
  background-size: var( --icon-insights-48-background-size , 48px 48px ); 
}

// ================================
// [TEXT_TOKEN] icon-insights-64

@mixin icon-insights-64 { 
  background-image: var( --icon-insights-svg );
  background-position: center;
  background-repeat: no-repeat;
  width: var( --icon-insights-64-width , 64px );
  height: var( --icon-insights-64-height , 64px );
  background-size: var( --icon-insights-64-background-size , 64px 64px ); 
}

// ================================
// [TEXT_TOKEN] icon-comment-12

@mixin icon-comment-12 { 
  background-image: var( --icon-comment-svg );
  background-position: center;
  background-repeat: no-repeat;
  width: var( --icon-comment-12-width , 12px );
  height: var( --icon-comment-12-height , 12px );
  background-size: var( --icon-comment-12-background-size , 12px 12px ); 
}

// ================================
// [TEXT_TOKEN] icon-comment-16

@mixin icon-comment-16 { 
  background-image: var( --icon-comment-svg );
  background-position: center;
  background-repeat: no-repeat;
  width: var( --icon-comment-16-width , 16px );
  height: var( --icon-comment-16-height , 16px );
  background-size: var( --icon-comment-16-background-size , 16px 16px ); 
}

// ================================
// [TEXT_TOKEN] icon-comment

@mixin icon-comment { 
  background-image: var( --icon-comment-svg );
  background-position: center;
  background-repeat: no-repeat;
  width: var( --icon-comment-width , 24px );
  height: var( --icon-comment-height , 24px );
  background-size: var( --icon-comment-background-size , 24px 24px ); 
}

// ================================
// [TEXT_TOKEN] icon-comment-24

@mixin icon-comment-24 { 
  background-image: var( --icon-comment-svg );
  background-position: center;
  background-repeat: no-repeat;
  width: var( --icon-comment-24-width , 24px );
  height: var( --icon-comment-24-height , 24px );
  background-size: var( --icon-comment-24-background-size , 24px 24px ); 
}

// ================================
// [TEXT_TOKEN] icon-comment-32

@mixin icon-comment-32 { 
  background-image: var( --icon-comment-svg );
  background-position: center;
  background-repeat: no-repeat;
  width: var( --icon-comment-32-width , 32px );
  height: var( --icon-comment-32-height , 32px );
  background-size: var( --icon-comment-32-background-size , 32px 32px ); 
}

// ================================
// [TEXT_TOKEN] icon-comment-48

@mixin icon-comment-48 { 
  background-image: var( --icon-comment-svg );
  background-position: center;
  background-repeat: no-repeat;
  width: var( --icon-comment-48-width , 48px );
  height: var( --icon-comment-48-height , 48px );
  background-size: var( --icon-comment-48-background-size , 48px 48px ); 
}

// ================================
// [TEXT_TOKEN] icon-comment-64

@mixin icon-comment-64 { 
  background-image: var( --icon-comment-svg );
  background-position: center;
  background-repeat: no-repeat;
  width: var( --icon-comment-64-width , 64px );
  height: var( --icon-comment-64-height , 64px );
  background-size: var( --icon-comment-64-background-size , 64px 64px ); 
}

// ================================
// [TEXT_TOKEN] icon-accounts-12

@mixin icon-accounts-12 { 
  background-image: var( --icon-accounts-svg );
  background-position: center;
  background-repeat: no-repeat;
  width: var( --icon-accounts-12-width , 12px );
  height: var( --icon-accounts-12-height , 12px );
  background-size: var( --icon-accounts-12-background-size , 12px 12px ); 
}

// ================================
// [TEXT_TOKEN] icon-accounts-16

@mixin icon-accounts-16 { 
  background-image: var( --icon-accounts-svg );
  background-position: center;
  background-repeat: no-repeat;
  width: var( --icon-accounts-16-width , 16px );
  height: var( --icon-accounts-16-height , 16px );
  background-size: var( --icon-accounts-16-background-size , 16px 16px ); 
}

// ================================
// [TEXT_TOKEN] icon-accounts

@mixin icon-accounts { 
  background-image: var( --icon-accounts-svg );
  background-position: center;
  background-repeat: no-repeat;
  width: var( --icon-accounts-width , 24px );
  height: var( --icon-accounts-height , 24px );
  background-size: var( --icon-accounts-background-size , 24px 24px ); 
}

// ================================
// [TEXT_TOKEN] icon-accounts-24

@mixin icon-accounts-24 { 
  background-image: var( --icon-accounts-svg );
  background-position: center;
  background-repeat: no-repeat;
  width: var( --icon-accounts-24-width , 24px );
  height: var( --icon-accounts-24-height , 24px );
  background-size: var( --icon-accounts-24-background-size , 24px 24px ); 
}

// ================================
// [TEXT_TOKEN] icon-accounts-32

@mixin icon-accounts-32 { 
  background-image: var( --icon-accounts-svg );
  background-position: center;
  background-repeat: no-repeat;
  width: var( --icon-accounts-32-width , 32px );
  height: var( --icon-accounts-32-height , 32px );
  background-size: var( --icon-accounts-32-background-size , 32px 32px ); 
}

// ================================
// [TEXT_TOKEN] icon-accounts-48

@mixin icon-accounts-48 { 
  background-image: var( --icon-accounts-svg );
  background-position: center;
  background-repeat: no-repeat;
  width: var( --icon-accounts-48-width , 48px );
  height: var( --icon-accounts-48-height , 48px );
  background-size: var( --icon-accounts-48-background-size , 48px 48px ); 
}

// ================================
// [TEXT_TOKEN] icon-accounts-64

@mixin icon-accounts-64 { 
  background-image: var( --icon-accounts-svg );
  background-position: center;
  background-repeat: no-repeat;
  width: var( --icon-accounts-64-width , 64px );
  height: var( --icon-accounts-64-height , 64px );
  background-size: var( --icon-accounts-64-background-size , 64px 64px ); 
}

// ================================
// [TEXT_TOKEN] icon-appointment-12

@mixin icon-appointment-12 { 
  background-image: var( --icon-appointment-svg );
  background-position: center;
  background-repeat: no-repeat;
  width: var( --icon-appointment-12-width , 12px );
  height: var( --icon-appointment-12-height , 12px );
  background-size: var( --icon-appointment-12-background-size , 12px 12px ); 
}

// ================================
// [TEXT_TOKEN] icon-appointment-16

@mixin icon-appointment-16 { 
  background-image: var( --icon-appointment-svg );
  background-position: center;
  background-repeat: no-repeat;
  width: var( --icon-appointment-16-width , 16px );
  height: var( --icon-appointment-16-height , 16px );
  background-size: var( --icon-appointment-16-background-size , 16px 16px ); 
}

// ================================
// [TEXT_TOKEN] icon-appointment

@mixin icon-appointment { 
  background-image: var( --icon-appointment-svg );
  background-position: center;
  background-repeat: no-repeat;
  width: var( --icon-appointment-width , 24px );
  height: var( --icon-appointment-height , 24px );
  background-size: var( --icon-appointment-background-size , 24px 24px ); 
}

// ================================
// [TEXT_TOKEN] icon-appointment-24

@mixin icon-appointment-24 { 
  background-image: var( --icon-appointment-svg );
  background-position: center;
  background-repeat: no-repeat;
  width: var( --icon-appointment-24-width , 24px );
  height: var( --icon-appointment-24-height , 24px );
  background-size: var( --icon-appointment-24-background-size , 24px 24px ); 
}

// ================================
// [TEXT_TOKEN] icon-appointment-32

@mixin icon-appointment-32 { 
  background-image: var( --icon-appointment-svg );
  background-position: center;
  background-repeat: no-repeat;
  width: var( --icon-appointment-32-width , 32px );
  height: var( --icon-appointment-32-height , 32px );
  background-size: var( --icon-appointment-32-background-size , 32px 32px ); 
}

// ================================
// [TEXT_TOKEN] icon-appointment-48

@mixin icon-appointment-48 { 
  background-image: var( --icon-appointment-svg );
  background-position: center;
  background-repeat: no-repeat;
  width: var( --icon-appointment-48-width , 48px );
  height: var( --icon-appointment-48-height , 48px );
  background-size: var( --icon-appointment-48-background-size , 48px 48px ); 
}

// ================================
// [TEXT_TOKEN] icon-appointment-64

@mixin icon-appointment-64 { 
  background-image: var( --icon-appointment-svg );
  background-position: center;
  background-repeat: no-repeat;
  width: var( --icon-appointment-64-width , 64px );
  height: var( --icon-appointment-64-height , 64px );
  background-size: var( --icon-appointment-64-background-size , 64px 64px ); 
}

// ================================
// [TEXT_TOKEN] icon-relationship-12

@mixin icon-relationship-12 { 
  background-image: var( --icon-relationship-svg );
  background-position: center;
  background-repeat: no-repeat;
  width: var( --icon-relationship-12-width , 12px );
  height: var( --icon-relationship-12-height , 12px );
  background-size: var( --icon-relationship-12-background-size , 12px 12px ); 
}

// ================================
// [TEXT_TOKEN] icon-relationship-16

@mixin icon-relationship-16 { 
  background-image: var( --icon-relationship-svg );
  background-position: center;
  background-repeat: no-repeat;
  width: var( --icon-relationship-16-width , 16px );
  height: var( --icon-relationship-16-height , 16px );
  background-size: var( --icon-relationship-16-background-size , 16px 16px ); 
}

// ================================
// [TEXT_TOKEN] icon-relationship

@mixin icon-relationship { 
  background-image: var( --icon-relationship-svg );
  background-position: center;
  background-repeat: no-repeat;
  width: var( --icon-relationship-width , 24px );
  height: var( --icon-relationship-height , 24px );
  background-size: var( --icon-relationship-background-size , 24px 24px ); 
}

// ================================
// [TEXT_TOKEN] icon-relationship-24

@mixin icon-relationship-24 { 
  background-image: var( --icon-relationship-svg );
  background-position: center;
  background-repeat: no-repeat;
  width: var( --icon-relationship-24-width , 24px );
  height: var( --icon-relationship-24-height , 24px );
  background-size: var( --icon-relationship-24-background-size , 24px 24px ); 
}

// ================================
// [TEXT_TOKEN] icon-relationship-32

@mixin icon-relationship-32 { 
  background-image: var( --icon-relationship-svg );
  background-position: center;
  background-repeat: no-repeat;
  width: var( --icon-relationship-32-width , 32px );
  height: var( --icon-relationship-32-height , 32px );
  background-size: var( --icon-relationship-32-background-size , 32px 32px ); 
}

// ================================
// [TEXT_TOKEN] icon-relationship-48

@mixin icon-relationship-48 { 
  background-image: var( --icon-relationship-svg );
  background-position: center;
  background-repeat: no-repeat;
  width: var( --icon-relationship-48-width , 48px );
  height: var( --icon-relationship-48-height , 48px );
  background-size: var( --icon-relationship-48-background-size , 48px 48px ); 
}

// ================================
// [TEXT_TOKEN] icon-relationship-64

@mixin icon-relationship-64 { 
  background-image: var( --icon-relationship-svg );
  background-position: center;
  background-repeat: no-repeat;
  width: var( --icon-relationship-64-width , 64px );
  height: var( --icon-relationship-64-height , 64px );
  background-size: var( --icon-relationship-64-background-size , 64px 64px ); 
}

// ================================
// [TEXT_TOKEN] icon-deposit-12

@mixin icon-deposit-12 { 
  background-image: var( --icon-deposit-svg );
  background-position: center;
  background-repeat: no-repeat;
  width: var( --icon-deposit-12-width , 12px );
  height: var( --icon-deposit-12-height , 12px );
  background-size: var( --icon-deposit-12-background-size , 12px 12px ); 
}

// ================================
// [TEXT_TOKEN] icon-deposit-16

@mixin icon-deposit-16 { 
  background-image: var( --icon-deposit-svg );
  background-position: center;
  background-repeat: no-repeat;
  width: var( --icon-deposit-16-width , 16px );
  height: var( --icon-deposit-16-height , 16px );
  background-size: var( --icon-deposit-16-background-size , 16px 16px ); 
}

// ================================
// [TEXT_TOKEN] icon-deposit

@mixin icon-deposit { 
  background-image: var( --icon-deposit-svg );
  background-position: center;
  background-repeat: no-repeat;
  width: var( --icon-deposit-width , 24px );
  height: var( --icon-deposit-height , 24px );
  background-size: var( --icon-deposit-background-size , 24px 24px ); 
}

// ================================
// [TEXT_TOKEN] icon-deposit-24

@mixin icon-deposit-24 { 
  background-image: var( --icon-deposit-svg );
  background-position: center;
  background-repeat: no-repeat;
  width: var( --icon-deposit-24-width , 24px );
  height: var( --icon-deposit-24-height , 24px );
  background-size: var( --icon-deposit-24-background-size , 24px 24px ); 
}

// ================================
// [TEXT_TOKEN] icon-deposit-32

@mixin icon-deposit-32 { 
  background-image: var( --icon-deposit-svg );
  background-position: center;
  background-repeat: no-repeat;
  width: var( --icon-deposit-32-width , 32px );
  height: var( --icon-deposit-32-height , 32px );
  background-size: var( --icon-deposit-32-background-size , 32px 32px ); 
}

// ================================
// [TEXT_TOKEN] icon-deposit-48

@mixin icon-deposit-48 { 
  background-image: var( --icon-deposit-svg );
  background-position: center;
  background-repeat: no-repeat;
  width: var( --icon-deposit-48-width , 48px );
  height: var( --icon-deposit-48-height , 48px );
  background-size: var( --icon-deposit-48-background-size , 48px 48px ); 
}

// ================================
// [TEXT_TOKEN] icon-deposit-64

@mixin icon-deposit-64 { 
  background-image: var( --icon-deposit-svg );
  background-position: center;
  background-repeat: no-repeat;
  width: var( --icon-deposit-64-width , 64px );
  height: var( --icon-deposit-64-height , 64px );
  background-size: var( --icon-deposit-64-background-size , 64px 64px ); 
}

// ================================
// [TEXT_TOKEN] icon-withdrawl-12

@mixin icon-withdrawl-12 { 
  background-image: var( --icon-withdrawl-svg );
  background-position: center;
  background-repeat: no-repeat;
  width: var( --icon-withdrawl-12-width , 12px );
  height: var( --icon-withdrawl-12-height , 12px );
  background-size: var( --icon-withdrawl-12-background-size , 12px 12px ); 
}

// ================================
// [TEXT_TOKEN] icon-withdrawl-16

@mixin icon-withdrawl-16 { 
  background-image: var( --icon-withdrawl-svg );
  background-position: center;
  background-repeat: no-repeat;
  width: var( --icon-withdrawl-16-width , 16px );
  height: var( --icon-withdrawl-16-height , 16px );
  background-size: var( --icon-withdrawl-16-background-size , 16px 16px ); 
}

// ================================
// [TEXT_TOKEN] icon-withdrawl

@mixin icon-withdrawl { 
  background-image: var( --icon-withdrawl-svg );
  background-position: center;
  background-repeat: no-repeat;
  width: var( --icon-withdrawl-width , 24px );
  height: var( --icon-withdrawl-height , 24px );
  background-size: var( --icon-withdrawl-background-size , 24px 24px ); 
}

// ================================
// [TEXT_TOKEN] icon-withdrawl-24

@mixin icon-withdrawl-24 { 
  background-image: var( --icon-withdrawl-svg );
  background-position: center;
  background-repeat: no-repeat;
  width: var( --icon-withdrawl-24-width , 24px );
  height: var( --icon-withdrawl-24-height , 24px );
  background-size: var( --icon-withdrawl-24-background-size , 24px 24px ); 
}

// ================================
// [TEXT_TOKEN] icon-withdrawl-32

@mixin icon-withdrawl-32 { 
  background-image: var( --icon-withdrawl-svg );
  background-position: center;
  background-repeat: no-repeat;
  width: var( --icon-withdrawl-32-width , 32px );
  height: var( --icon-withdrawl-32-height , 32px );
  background-size: var( --icon-withdrawl-32-background-size , 32px 32px ); 
}

// ================================
// [TEXT_TOKEN] icon-withdrawl-48

@mixin icon-withdrawl-48 { 
  background-image: var( --icon-withdrawl-svg );
  background-position: center;
  background-repeat: no-repeat;
  width: var( --icon-withdrawl-48-width , 48px );
  height: var( --icon-withdrawl-48-height , 48px );
  background-size: var( --icon-withdrawl-48-background-size , 48px 48px ); 
}

// ================================
// [TEXT_TOKEN] icon-withdrawl-64

@mixin icon-withdrawl-64 { 
  background-image: var( --icon-withdrawl-svg );
  background-position: center;
  background-repeat: no-repeat;
  width: var( --icon-withdrawl-64-width , 64px );
  height: var( --icon-withdrawl-64-height , 64px );
  background-size: var( --icon-withdrawl-64-background-size , 64px 64px ); 
}

// ================================
// [TEXT_TOKEN] icon-transfer-12

@mixin icon-transfer-12 { 
  background-image: var( --icon-transfer-svg );
  background-position: center;
  background-repeat: no-repeat;
  width: var( --icon-transfer-12-width , 12px );
  height: var( --icon-transfer-12-height , 12px );
  background-size: var( --icon-transfer-12-background-size , 12px 12px ); 
}

// ================================
// [TEXT_TOKEN] icon-transfer-16

@mixin icon-transfer-16 { 
  background-image: var( --icon-transfer-svg );
  background-position: center;
  background-repeat: no-repeat;
  width: var( --icon-transfer-16-width , 16px );
  height: var( --icon-transfer-16-height , 16px );
  background-size: var( --icon-transfer-16-background-size , 16px 16px ); 
}

// ================================
// [TEXT_TOKEN] icon-transfer

@mixin icon-transfer { 
  background-image: var( --icon-transfer-svg );
  background-position: center;
  background-repeat: no-repeat;
  width: var( --icon-transfer-width , 24px );
  height: var( --icon-transfer-height , 24px );
  background-size: var( --icon-transfer-background-size , 24px 24px ); 
}

// ================================
// [TEXT_TOKEN] icon-transfer-24

@mixin icon-transfer-24 { 
  background-image: var( --icon-transfer-svg );
  background-position: center;
  background-repeat: no-repeat;
  width: var( --icon-transfer-24-width , 24px );
  height: var( --icon-transfer-24-height , 24px );
  background-size: var( --icon-transfer-24-background-size , 24px 24px ); 
}

// ================================
// [TEXT_TOKEN] icon-transfer-32

@mixin icon-transfer-32 { 
  background-image: var( --icon-transfer-svg );
  background-position: center;
  background-repeat: no-repeat;
  width: var( --icon-transfer-32-width , 32px );
  height: var( --icon-transfer-32-height , 32px );
  background-size: var( --icon-transfer-32-background-size , 32px 32px ); 
}

// ================================
// [TEXT_TOKEN] icon-transfer-48

@mixin icon-transfer-48 { 
  background-image: var( --icon-transfer-svg );
  background-position: center;
  background-repeat: no-repeat;
  width: var( --icon-transfer-48-width , 48px );
  height: var( --icon-transfer-48-height , 48px );
  background-size: var( --icon-transfer-48-background-size , 48px 48px ); 
}

// ================================
// [TEXT_TOKEN] icon-transfer-64

@mixin icon-transfer-64 { 
  background-image: var( --icon-transfer-svg );
  background-position: center;
  background-repeat: no-repeat;
  width: var( --icon-transfer-64-width , 64px );
  height: var( --icon-transfer-64-height , 64px );
  background-size: var( --icon-transfer-64-background-size , 64px 64px ); 
}

// ================================
// [TEXT_TOKEN] icon-correct-12

@mixin icon-correct-12 { 
  background-image: var( --icon-correct-svg );
  background-position: center;
  background-repeat: no-repeat;
  width: var( --icon-correct-12-width , 12px );
  height: var( --icon-correct-12-height , 12px );
  background-size: var( --icon-correct-12-background-size , 12px 12px ); 
}

// ================================
// [TEXT_TOKEN] icon-correct-16

@mixin icon-correct-16 { 
  background-image: var( --icon-correct-svg );
  background-position: center;
  background-repeat: no-repeat;
  width: var( --icon-correct-16-width , 16px );
  height: var( --icon-correct-16-height , 16px );
  background-size: var( --icon-correct-16-background-size , 16px 16px ); 
}

// ================================
// [TEXT_TOKEN] icon-correct

@mixin icon-correct { 
  background-image: var( --icon-correct-svg );
  background-position: center;
  background-repeat: no-repeat;
  width: var( --icon-correct-width , 24px );
  height: var( --icon-correct-height , 24px );
  background-size: var( --icon-correct-background-size , 24px 24px ); 
}

// ================================
// [TEXT_TOKEN] icon-correct-24

@mixin icon-correct-24 { 
  background-image: var( --icon-correct-svg );
  background-position: center;
  background-repeat: no-repeat;
  width: var( --icon-correct-24-width , 24px );
  height: var( --icon-correct-24-height , 24px );
  background-size: var( --icon-correct-24-background-size , 24px 24px ); 
}

// ================================
// [TEXT_TOKEN] icon-correct-32

@mixin icon-correct-32 { 
  background-image: var( --icon-correct-svg );
  background-position: center;
  background-repeat: no-repeat;
  width: var( --icon-correct-32-width , 32px );
  height: var( --icon-correct-32-height , 32px );
  background-size: var( --icon-correct-32-background-size , 32px 32px ); 
}

// ================================
// [TEXT_TOKEN] icon-correct-48

@mixin icon-correct-48 { 
  background-image: var( --icon-correct-svg );
  background-position: center;
  background-repeat: no-repeat;
  width: var( --icon-correct-48-width , 48px );
  height: var( --icon-correct-48-height , 48px );
  background-size: var( --icon-correct-48-background-size , 48px 48px ); 
}

// ================================
// [TEXT_TOKEN] icon-correct-64

@mixin icon-correct-64 { 
  background-image: var( --icon-correct-svg );
  background-position: center;
  background-repeat: no-repeat;
  width: var( --icon-correct-64-width , 64px );
  height: var( --icon-correct-64-height , 64px );
  background-size: var( --icon-correct-64-background-size , 64px 64px ); 
}

// ================================
// [TEXT_TOKEN] icon-radio-12

@mixin icon-radio-12 { 
  background-image: var( --icon-radio-svg );
  background-position: center;
  background-repeat: no-repeat;
  width: var( --icon-radio-12-width , 12px );
  height: var( --icon-radio-12-height , 12px );
  background-size: var( --icon-radio-12-background-size , 12px 12px ); 
}

// ================================
// [TEXT_TOKEN] icon-radio-16

@mixin icon-radio-16 { 
  background-image: var( --icon-radio-svg );
  background-position: center;
  background-repeat: no-repeat;
  width: var( --icon-radio-16-width , 16px );
  height: var( --icon-radio-16-height , 16px );
  background-size: var( --icon-radio-16-background-size , 16px 16px ); 
}

// ================================
// [TEXT_TOKEN] icon-radio

@mixin icon-radio { 
  background-image: var( --icon-radio-svg );
  background-position: center;
  background-repeat: no-repeat;
  width: var( --icon-radio-width , 24px );
  height: var( --icon-radio-height , 24px );
  background-size: var( --icon-radio-background-size , 24px 24px ); 
}

// ================================
// [TEXT_TOKEN] icon-radio-24

@mixin icon-radio-24 { 
  background-image: var( --icon-radio-svg );
  background-position: center;
  background-repeat: no-repeat;
  width: var( --icon-radio-24-width , 24px );
  height: var( --icon-radio-24-height , 24px );
  background-size: var( --icon-radio-24-background-size , 24px 24px ); 
}

// ================================
// [TEXT_TOKEN] icon-radio-32

@mixin icon-radio-32 { 
  background-image: var( --icon-radio-svg );
  background-position: center;
  background-repeat: no-repeat;
  width: var( --icon-radio-32-width , 32px );
  height: var( --icon-radio-32-height , 32px );
  background-size: var( --icon-radio-32-background-size , 32px 32px ); 
}

// ================================
// [TEXT_TOKEN] icon-radio-48

@mixin icon-radio-48 { 
  background-image: var( --icon-radio-svg );
  background-position: center;
  background-repeat: no-repeat;
  width: var( --icon-radio-48-width , 48px );
  height: var( --icon-radio-48-height , 48px );
  background-size: var( --icon-radio-48-background-size , 48px 48px ); 
}

// ================================
// [TEXT_TOKEN] icon-radio-64

@mixin icon-radio-64 { 
  background-image: var( --icon-radio-svg );
  background-position: center;
  background-repeat: no-repeat;
  width: var( --icon-radio-64-width , 64px );
  height: var( --icon-radio-64-height , 64px );
  background-size: var( --icon-radio-64-background-size , 64px 64px ); 
}

// ================================
// [TEXT_TOKEN] icon-radio-selected-12

@mixin icon-radio-selected-12 { 
  background-image: var( --icon-radio-selected-svg );
  background-position: center;
  background-repeat: no-repeat;
  width: var( --icon-radio-selected-12-width , 12px );
  height: var( --icon-radio-selected-12-height , 12px );
  background-size: var( --icon-radio-selected-12-background-size , 12px 12px ); 
}

// ================================
// [TEXT_TOKEN] icon-radio-selected-16

@mixin icon-radio-selected-16 { 
  background-image: var( --icon-radio-selected-svg );
  background-position: center;
  background-repeat: no-repeat;
  width: var( --icon-radio-selected-16-width , 16px );
  height: var( --icon-radio-selected-16-height , 16px );
  background-size: var( --icon-radio-selected-16-background-size , 16px 16px ); 
}

// ================================
// [TEXT_TOKEN] icon-radio-selected

@mixin icon-radio-selected { 
  background-image: var( --icon-radio-selected-svg );
  background-position: center;
  background-repeat: no-repeat;
  width: var( --icon-radio-selected-width , 24px );
  height: var( --icon-radio-selected-height , 24px );
  background-size: var( --icon-radio-selected-background-size , 24px 24px ); 
}

// ================================
// [TEXT_TOKEN] icon-radio-selected-24

@mixin icon-radio-selected-24 { 
  background-image: var( --icon-radio-selected-svg );
  background-position: center;
  background-repeat: no-repeat;
  width: var( --icon-radio-selected-24-width , 24px );
  height: var( --icon-radio-selected-24-height , 24px );
  background-size: var( --icon-radio-selected-24-background-size , 24px 24px ); 
}

// ================================
// [TEXT_TOKEN] icon-radio-selected-32

@mixin icon-radio-selected-32 { 
  background-image: var( --icon-radio-selected-svg );
  background-position: center;
  background-repeat: no-repeat;
  width: var( --icon-radio-selected-32-width , 32px );
  height: var( --icon-radio-selected-32-height , 32px );
  background-size: var( --icon-radio-selected-32-background-size , 32px 32px ); 
}

// ================================
// [TEXT_TOKEN] icon-radio-selected-48

@mixin icon-radio-selected-48 { 
  background-image: var( --icon-radio-selected-svg );
  background-position: center;
  background-repeat: no-repeat;
  width: var( --icon-radio-selected-48-width , 48px );
  height: var( --icon-radio-selected-48-height , 48px );
  background-size: var( --icon-radio-selected-48-background-size , 48px 48px ); 
}

// ================================
// [TEXT_TOKEN] icon-radio-selected-64

@mixin icon-radio-selected-64 { 
  background-image: var( --icon-radio-selected-svg );
  background-position: center;
  background-repeat: no-repeat;
  width: var( --icon-radio-selected-64-width , 64px );
  height: var( --icon-radio-selected-64-height , 64px );
  background-size: var( --icon-radio-selected-64-background-size , 64px 64px ); 
}

// ================================
// [TEXT_TOKEN] icon-checkbox-12

@mixin icon-checkbox-12 { 
  background-image: var( --icon-checkbox-svg );
  background-position: center;
  background-repeat: no-repeat;
  width: var( --icon-checkbox-12-width , 12px );
  height: var( --icon-checkbox-12-height , 12px );
  background-size: var( --icon-checkbox-12-background-size , 12px 12px ); 
}

// ================================
// [TEXT_TOKEN] icon-checkbox-16

@mixin icon-checkbox-16 { 
  background-image: var( --icon-checkbox-svg );
  background-position: center;
  background-repeat: no-repeat;
  width: var( --icon-checkbox-16-width , 16px );
  height: var( --icon-checkbox-16-height , 16px );
  background-size: var( --icon-checkbox-16-background-size , 16px 16px ); 
}

// ================================
// [TEXT_TOKEN] icon-checkbox

@mixin icon-checkbox { 
  background-image: var( --icon-checkbox-svg );
  background-position: center;
  background-repeat: no-repeat;
  width: var( --icon-checkbox-width , 24px );
  height: var( --icon-checkbox-height , 24px );
  background-size: var( --icon-checkbox-background-size , 24px 24px ); 
}

// ================================
// [TEXT_TOKEN] icon-checkbox-24

@mixin icon-checkbox-24 { 
  background-image: var( --icon-checkbox-svg );
  background-position: center;
  background-repeat: no-repeat;
  width: var( --icon-checkbox-24-width , 24px );
  height: var( --icon-checkbox-24-height , 24px );
  background-size: var( --icon-checkbox-24-background-size , 24px 24px ); 
}

// ================================
// [TEXT_TOKEN] icon-checkbox-32

@mixin icon-checkbox-32 { 
  background-image: var( --icon-checkbox-svg );
  background-position: center;
  background-repeat: no-repeat;
  width: var( --icon-checkbox-32-width , 32px );
  height: var( --icon-checkbox-32-height , 32px );
  background-size: var( --icon-checkbox-32-background-size , 32px 32px ); 
}

// ================================
// [TEXT_TOKEN] icon-checkbox-48

@mixin icon-checkbox-48 { 
  background-image: var( --icon-checkbox-svg );
  background-position: center;
  background-repeat: no-repeat;
  width: var( --icon-checkbox-48-width , 48px );
  height: var( --icon-checkbox-48-height , 48px );
  background-size: var( --icon-checkbox-48-background-size , 48px 48px ); 
}

// ================================
// [TEXT_TOKEN] icon-checkbox-64

@mixin icon-checkbox-64 { 
  background-image: var( --icon-checkbox-svg );
  background-position: center;
  background-repeat: no-repeat;
  width: var( --icon-checkbox-64-width , 64px );
  height: var( --icon-checkbox-64-height , 64px );
  background-size: var( --icon-checkbox-64-background-size , 64px 64px ); 
}

// ================================
// [TEXT_TOKEN] icon-checkbox-selected-12

@mixin icon-checkbox-selected-12 { 
  background-image: var( --icon-checkbox-selected-svg );
  background-position: center;
  background-repeat: no-repeat;
  width: var( --icon-checkbox-selected-12-width , 12px );
  height: var( --icon-checkbox-selected-12-height , 12px );
  background-size: var( --icon-checkbox-selected-12-background-size , 12px 12px ); 
}

// ================================
// [TEXT_TOKEN] icon-checkbox-selected-16

@mixin icon-checkbox-selected-16 { 
  background-image: var( --icon-checkbox-selected-svg );
  background-position: center;
  background-repeat: no-repeat;
  width: var( --icon-checkbox-selected-16-width , 16px );
  height: var( --icon-checkbox-selected-16-height , 16px );
  background-size: var( --icon-checkbox-selected-16-background-size , 16px 16px ); 
}

// ================================
// [TEXT_TOKEN] icon-checkbox-selected

@mixin icon-checkbox-selected { 
  background-image: var( --icon-checkbox-selected-svg );
  background-position: center;
  background-repeat: no-repeat;
  width: var( --icon-checkbox-selected-width , 24px );
  height: var( --icon-checkbox-selected-height , 24px );
  background-size: var( --icon-checkbox-selected-background-size , 24px 24px ); 
}

// ================================
// [TEXT_TOKEN] icon-checkbox-selected-24

@mixin icon-checkbox-selected-24 { 
  background-image: var( --icon-checkbox-selected-svg );
  background-position: center;
  background-repeat: no-repeat;
  width: var( --icon-checkbox-selected-24-width , 24px );
  height: var( --icon-checkbox-selected-24-height , 24px );
  background-size: var( --icon-checkbox-selected-24-background-size , 24px 24px ); 
}

// ================================
// [TEXT_TOKEN] icon-checkbox-selected-32

@mixin icon-checkbox-selected-32 { 
  background-image: var( --icon-checkbox-selected-svg );
  background-position: center;
  background-repeat: no-repeat;
  width: var( --icon-checkbox-selected-32-width , 32px );
  height: var( --icon-checkbox-selected-32-height , 32px );
  background-size: var( --icon-checkbox-selected-32-background-size , 32px 32px ); 
}

// ================================
// [TEXT_TOKEN] icon-checkbox-selected-48

@mixin icon-checkbox-selected-48 { 
  background-image: var( --icon-checkbox-selected-svg );
  background-position: center;
  background-repeat: no-repeat;
  width: var( --icon-checkbox-selected-48-width , 48px );
  height: var( --icon-checkbox-selected-48-height , 48px );
  background-size: var( --icon-checkbox-selected-48-background-size , 48px 48px ); 
}

// ================================
// [TEXT_TOKEN] icon-checkbox-selected-64

@mixin icon-checkbox-selected-64 { 
  background-image: var( --icon-checkbox-selected-svg );
  background-position: center;
  background-repeat: no-repeat;
  width: var( --icon-checkbox-selected-64-width , 64px );
  height: var( --icon-checkbox-selected-64-height , 64px );
  background-size: var( --icon-checkbox-selected-64-background-size , 64px 64px ); 
}

// ================================
// [TEXT_TOKEN] graphic-scu-logo

@mixin graphic-scu-logo { 
  background-image: var( --graphic-scu-logo-svg );
  background-position: center;
  background-repeat: no-repeat;
  width: var( --graphic-scu-logo-width , 144px );
  height: var( --graphic-scu-logo-height , 80px );
  background-size: var( --graphic-scu-logo-background-size , 144px 80px ); 
}

// ================================
// [COMPONENT_TOKEN] comp-scu-button-primary

@mixin comp-scu-button-primary { 
  position: relative; 
}

@mixin comp-scu-button-primary--sizing {
  width: 83px;
  height: 41px;
}

@mixin comp-scu-button-primary--width {
  width: 83px;
}

@mixin comp-scu-button-primary--height {
  height: 41px;
}

@mixin comp-scu-button-primary--figma-autolayout { 
  display: flex;
  flex-flow: column nowrap;
  padding-left: var( --comp-scu-button-primary-padding-left , 0px );
  padding-right: var( --comp-scu-button-primary-padding-right , 0px );
  padding-top: var( --comp-scu-button-primary-padding-top , 0px );
  padding-bottom: var( --comp-scu-button-primary-padding-bottom , 0px );
  & > *:not(:last-child) { margin-bottom: var( --comp-scu-button-primary-item-spacing , 0px ); } 
}

@mixin comp-scu-button-primary--absolute-layout {
   
}

@mixin comp-scu-button-primary--html-autolayout {
  display: inline-block;
  margin-left: var( --comp-scu-button-primary-left , 0px );
  margin-right: var( --comp-scu-button-primary-right , 0px );
  margin-top: var( --comp-scu-button-primary-top , 0px );
  margin-bottom: var( --comp-scu-button-primary-bottom , 0px );
  width: calc( 100% - ( var( --comp-scu-button-primary-left , 0px ) + var( --comp-scu-button-primary-right , 0px ) ) );
}

// ================================
// [COMPONENT_TOKEN] comp-scu-button-primary-default

@mixin comp-scu-button-primary-default { 
  position: relative;
  background-color: var( --comp-scu-button-primary-default-background-color , rgba(99,166,10,1) );
  border-radius: var( --comp-scu-button-primary-default-corner-radius , 200px ); 
}

@mixin comp-scu-button-primary-default--sizing {
  width: 83px;
  height: 41px;
}

@mixin comp-scu-button-primary-default--width {
  width: 83px;
}

@mixin comp-scu-button-primary-default--height {
  height: 41px;
}

@mixin comp-scu-button-primary-default--figma-autolayout { 
  display: flex;
  flex-flow: row nowrap;
  padding-left: var( --comp-scu-button-primary-default-padding-left , 24px );
  padding-right: var( --comp-scu-button-primary-default-padding-right , 24px );
  padding-top: var( --comp-scu-button-primary-default-padding-top , 11px );
  padding-bottom: var( --comp-scu-button-primary-default-padding-bottom , 11px );
  & > *:not(:last-child) { margin-right: var( --comp-scu-button-primary-default-item-spacing , 0px ); } 
}

@mixin comp-scu-button-primary-default--absolute-layout {
   
}

@mixin comp-scu-button-primary-default--html-autolayout {
  display: inline-block;
  margin-left: var( --comp-scu-button-primary-default-left , 0px );
  margin-right: var( --comp-scu-button-primary-default-right , 0px );
  margin-top: var( --comp-scu-button-primary-default-top , 0px );
  margin-bottom: var( --comp-scu-button-primary-default-bottom , 0px );
  width: calc( 100% - ( var( --comp-scu-button-primary-default-left , 0px ) + var( --comp-scu-button-primary-default-right , 0px ) ) );
}

// ================================
// [TEXT_TOKEN] comp-scu-button-primary-default-label

@mixin comp-scu-button-primary-default-label { 
  position: relative;
  font-size: var( --comp-scu-button-primary-default-label-font-size , 16px );
  text-align: var( --comp-scu-button-primary-default-label-text-align-horizontal , CENTER );
  color: var( --comp-scu-button-primary-default-label-color , rgba(255,255,255,1) );
  font-family: var( --comp-scu-button-primary-default-label-font-family , 'Proxima Nova' );
  font-weight: var( --comp-scu-button-primary-default-label-font-weight , 700 );
  line-height: var( --comp-scu-button-primary-default-label-line-height , 18.75px );
  letter-spacing: var( --comp-scu-button-primary-default-label-letter-spacing , 0px ); 
}

@mixin comp-scu-button-primary-default-label--sizing {
  width: 35px;
  height: 19px;
}

@mixin comp-scu-button-primary-default-label--width {
  width: 35px;
}

@mixin comp-scu-button-primary-default-label--height {
  height: 19px;
}

@mixin comp-scu-button-primary-default-label--absolute-layout {
   
}

@mixin comp-scu-button-primary-default-label--html-autolayout {
  display: inline-block;
  margin-left: var( --comp-scu-button-primary-default-label-left , 24px );
  margin-right: var( --comp-scu-button-primary-default-label-right , 24px );
  margin-top: var( --comp-scu-button-primary-default-label-top , 11px );
  margin-bottom: var( --comp-scu-button-primary-default-label-bottom , 11px );
  width: calc( 100% - ( var( --comp-scu-button-primary-default-label-left , 24px ) + var( --comp-scu-button-primary-default-label-right , 24px ) ) );
}

// ================================
// [COMPONENT_TOKEN] comp-scu-button-primary-hover

@mixin comp-scu-button-primary-hover { 
  position: relative;
  background-color: var( --comp-scu-button-primary-hover-background-color , rgba(42,73,1,1) );
  border-radius: var( --comp-scu-button-primary-hover-corner-radius , 200px ); 
}

@mixin comp-scu-button-primary-hover--sizing {
  width: 93px;
  height: 32px;
}

@mixin comp-scu-button-primary-hover--width {
  width: 93px;
}

@mixin comp-scu-button-primary-hover--height {
  height: 32px;
}

@mixin comp-scu-button-primary-hover--figma-autolayout { 
  display: flex;
  flex-flow: row nowrap;
  padding-left: var( --comp-scu-button-primary-hover-padding-left , 24px );
  padding-right: var( --comp-scu-button-primary-hover-padding-right , 24px );
  padding-top: var( --comp-scu-button-primary-hover-padding-top , 11px );
  padding-bottom: var( --comp-scu-button-primary-hover-padding-bottom , 11px );
  & > *:not(:last-child) { margin-right: var( --comp-scu-button-primary-hover-item-spacing , 0px ); } 
}

@mixin comp-scu-button-primary-hover--absolute-layout {
   
}

@mixin comp-scu-button-primary-hover--html-autolayout {
  display: inline-block;
  margin-left: var( --comp-scu-button-primary-hover-left , 0px );
  margin-right: var( --comp-scu-button-primary-hover-right , -10px );
  margin-top: var( --comp-scu-button-primary-hover-top , 42px );
  margin-bottom: var( --comp-scu-button-primary-hover-bottom , -33px );
  width: calc( 100% - ( var( --comp-scu-button-primary-hover-left , 0px ) + var( --comp-scu-button-primary-hover-right , -10px ) ) );
}

// ================================
// [TEXT_TOKEN] comp-scu-button-primary-hover-label

@mixin comp-scu-button-primary-hover-label { 
  position: relative;
  font-size: var( --comp-scu-button-primary-hover-label-font-size , 16px );
  text-align: var( --comp-scu-button-primary-hover-label-text-align-horizontal , CENTER );
  color: var( --comp-scu-button-primary-hover-label-color , rgba(255,255,255,1) );
  font-family: var( --comp-scu-button-primary-hover-label-font-family , 'Proxima Nova' );
  font-weight: var( --comp-scu-button-primary-hover-label-font-weight , 700 );
  line-height: var( --comp-scu-button-primary-hover-label-line-height , 18.75px );
  letter-spacing: var( --comp-scu-button-primary-hover-label-letter-spacing , 0px ); 
}

@mixin comp-scu-button-primary-hover-label--sizing {
  width: 35px;
  height: 19px;
}

@mixin comp-scu-button-primary-hover-label--width {
  width: 35px;
}

@mixin comp-scu-button-primary-hover-label--height {
  height: 19px;
}

@mixin comp-scu-button-primary-hover-label--absolute-layout {
   
}

@mixin comp-scu-button-primary-hover-label--html-autolayout {
  display: inline-block;
  margin-left: var( --comp-scu-button-primary-hover-label-left , 29px );
  margin-right: var( --comp-scu-button-primary-hover-label-right , 29px );
  margin-top: var( --comp-scu-button-primary-hover-label-top , 7px );
  margin-bottom: var( --comp-scu-button-primary-hover-label-bottom , 6px );
  width: calc( 100% - ( var( --comp-scu-button-primary-hover-label-left , 29px ) + var( --comp-scu-button-primary-hover-label-right , 29px ) ) );
}

// ================================
// [COMPONENT_TOKEN] comp-scu-button-primary-focus

@mixin comp-scu-button-primary-focus { 
  position: relative;
  background-color: var( --comp-scu-button-primary-focus-background-color , rgba(126,182,51,1) );
  border-radius: var( --comp-scu-button-primary-focus-corner-radius , 200px );
  box-shadow: var( --comp-scu-button-primary-focus-shadow , 0px 0px 0px 2px rgba(53,155,249,1) ); 
}

@mixin comp-scu-button-primary-focus--sizing {
  width: 93px;
  height: 32px;
}

@mixin comp-scu-button-primary-focus--width {
  width: 93px;
}

@mixin comp-scu-button-primary-focus--height {
  height: 32px;
}

@mixin comp-scu-button-primary-focus--figma-autolayout { 
  display: flex;
  flex-flow: row nowrap;
  padding-left: var( --comp-scu-button-primary-focus-padding-left , 24px );
  padding-right: var( --comp-scu-button-primary-focus-padding-right , 24px );
  padding-top: var( --comp-scu-button-primary-focus-padding-top , 11px );
  padding-bottom: var( --comp-scu-button-primary-focus-padding-bottom , 11px );
  & > *:not(:last-child) { margin-right: var( --comp-scu-button-primary-focus-item-spacing , 0px ); } 
}

@mixin comp-scu-button-primary-focus--absolute-layout {
   
}

@mixin comp-scu-button-primary-focus--html-autolayout {
  display: inline-block;
  margin-left: var( --comp-scu-button-primary-focus-left , 0px );
  margin-right: var( --comp-scu-button-primary-focus-right , -10px );
  margin-top: var( --comp-scu-button-primary-focus-top , 84px );
  margin-bottom: var( --comp-scu-button-primary-focus-bottom , -75px );
  width: calc( 100% - ( var( --comp-scu-button-primary-focus-left , 0px ) + var( --comp-scu-button-primary-focus-right , -10px ) ) );
}

// ================================
// [TEXT_TOKEN] comp-scu-button-primary-focus-label

@mixin comp-scu-button-primary-focus-label { 
  position: relative;
  font-size: var( --comp-scu-button-primary-focus-label-font-size , 16px );
  text-align: var( --comp-scu-button-primary-focus-label-text-align-horizontal , CENTER );
  color: var( --comp-scu-button-primary-focus-label-color , rgba(255,255,255,1) );
  font-family: var( --comp-scu-button-primary-focus-label-font-family , 'Proxima Nova' );
  font-weight: var( --comp-scu-button-primary-focus-label-font-weight , 700 );
  line-height: var( --comp-scu-button-primary-focus-label-line-height , 18.75px );
  letter-spacing: var( --comp-scu-button-primary-focus-label-letter-spacing , 0px ); 
}

@mixin comp-scu-button-primary-focus-label--sizing {
  width: 35px;
  height: 19px;
}

@mixin comp-scu-button-primary-focus-label--width {
  width: 35px;
}

@mixin comp-scu-button-primary-focus-label--height {
  height: 19px;
}

@mixin comp-scu-button-primary-focus-label--absolute-layout {
   
}

@mixin comp-scu-button-primary-focus-label--html-autolayout {
  display: inline-block;
  margin-left: var( --comp-scu-button-primary-focus-label-left , 29px );
  margin-right: var( --comp-scu-button-primary-focus-label-right , 29px );
  margin-top: var( --comp-scu-button-primary-focus-label-top , 7px );
  margin-bottom: var( --comp-scu-button-primary-focus-label-bottom , 6px );
  width: calc( 100% - ( var( --comp-scu-button-primary-focus-label-left , 29px ) + var( --comp-scu-button-primary-focus-label-right , 29px ) ) );
}

// ================================
// [COMPONENT_TOKEN] comp-scu-button-primary-disabled

@mixin comp-scu-button-primary-disabled { 
  position: relative;
  background-color: var( --comp-scu-button-primary-disabled-background-color , rgba(126,182,51,1) );
  border-radius: var( --comp-scu-button-primary-disabled-corner-radius , 200px ); 
}

@mixin comp-scu-button-primary-disabled--sizing {
  width: 93px;
  height: 32px;
}

@mixin comp-scu-button-primary-disabled--width {
  width: 93px;
}

@mixin comp-scu-button-primary-disabled--height {
  height: 32px;
}

@mixin comp-scu-button-primary-disabled--figma-autolayout { 
  display: flex;
  flex-flow: row nowrap;
  padding-left: var( --comp-scu-button-primary-disabled-padding-left , 24px );
  padding-right: var( --comp-scu-button-primary-disabled-padding-right , 24px );
  padding-top: var( --comp-scu-button-primary-disabled-padding-top , 11px );
  padding-bottom: var( --comp-scu-button-primary-disabled-padding-bottom , 11px );
  & > *:not(:last-child) { margin-right: var( --comp-scu-button-primary-disabled-item-spacing , 0px ); } 
}

@mixin comp-scu-button-primary-disabled--absolute-layout {
   
}

@mixin comp-scu-button-primary-disabled--html-autolayout {
  display: inline-block;
  margin-left: var( --comp-scu-button-primary-disabled-left , 0px );
  margin-right: var( --comp-scu-button-primary-disabled-right , -10px );
  margin-top: var( --comp-scu-button-primary-disabled-top , 0px );
  margin-bottom: var( --comp-scu-button-primary-disabled-bottom , 9px );
  width: calc( 100% - ( var( --comp-scu-button-primary-disabled-left , 0px ) + var( --comp-scu-button-primary-disabled-right , -10px ) ) );
}

// ================================
// [TEXT_TOKEN] comp-scu-button-primary-disabled-label

@mixin comp-scu-button-primary-disabled-label { 
  position: relative;
  font-size: var( --comp-scu-button-primary-disabled-label-font-size , 16px );
  text-align: var( --comp-scu-button-primary-disabled-label-text-align-horizontal , CENTER );
  color: var( --comp-scu-button-primary-disabled-label-color , rgba(180,216,133,1) );
  font-family: var( --comp-scu-button-primary-disabled-label-font-family , 'Proxima Nova' );
  font-weight: var( --comp-scu-button-primary-disabled-label-font-weight , 700 );
  line-height: var( --comp-scu-button-primary-disabled-label-line-height , 18.75px );
  letter-spacing: var( --comp-scu-button-primary-disabled-label-letter-spacing , 0px ); 
}

@mixin comp-scu-button-primary-disabled-label--sizing {
  width: 35px;
  height: 19px;
}

@mixin comp-scu-button-primary-disabled-label--width {
  width: 35px;
}

@mixin comp-scu-button-primary-disabled-label--height {
  height: 19px;
}

@mixin comp-scu-button-primary-disabled-label--absolute-layout {
   
}

@mixin comp-scu-button-primary-disabled-label--html-autolayout {
  display: inline-block;
  margin-left: var( --comp-scu-button-primary-disabled-label-left , 29px );
  margin-right: var( --comp-scu-button-primary-disabled-label-right , 29px );
  margin-top: var( --comp-scu-button-primary-disabled-label-top , 7px );
  margin-bottom: var( --comp-scu-button-primary-disabled-label-bottom , 6px );
  width: calc( 100% - ( var( --comp-scu-button-primary-disabled-label-left , 29px ) + var( --comp-scu-button-primary-disabled-label-right , 29px ) ) );
}

// ================================
// [COMPONENT_TOKEN] comp-scu-button-outline

@mixin comp-scu-button-outline { 
  position: relative; 
}

@mixin comp-scu-button-outline--sizing {
  width: 90px;
  height: 17px;
}

@mixin comp-scu-button-outline--width {
  width: 90px;
}

@mixin comp-scu-button-outline--height {
  height: 17px;
}

@mixin comp-scu-button-outline--figma-autolayout { 
   
}

@mixin comp-scu-button-outline--absolute-layout {
   
}

@mixin comp-scu-button-outline--html-autolayout {
  display: inline-block;
  margin-left: var( --comp-scu-button-outline-left , 0px );
  margin-right: var( --comp-scu-button-outline-right , 0px );
  margin-top: var( --comp-scu-button-outline-top , 0px );
  margin-bottom: var( --comp-scu-button-outline-bottom , 0px );
  width: calc( 100% - ( var( --comp-scu-button-outline-left , 0px ) + var( --comp-scu-button-outline-right , 0px ) ) );
}

// ================================
// [COMPONENT_TOKEN] comp-scu-button-outline-default

@mixin comp-scu-button-outline-default { 
  position: relative;
  background-color: var( --comp-scu-button-outline-default-background-color , rgba(255,255,255,1) );
  border-radius: var( --comp-scu-button-outline-default-corner-radius , 200px );
  border-width: var( --comp-scu-button-outline-default-stroke-weight , 1px );
  border-style: solid;
  border-color: var( --comp-scu-button-outline-default-stroke-color , rgba(99,166,10,1) ); 
}

@mixin comp-scu-button-outline-default--sizing {
  width: 82px;
  height: 41px;
}

@mixin comp-scu-button-outline-default--width {
  width: 82px;
}

@mixin comp-scu-button-outline-default--height {
  height: 41px;
}

@mixin comp-scu-button-outline-default--figma-autolayout { 
  display: flex;
  flex-flow: row nowrap;
  padding-left: var( --comp-scu-button-outline-default-padding-left , 24px );
  padding-right: var( --comp-scu-button-outline-default-padding-right , 24px );
  padding-top: var( --comp-scu-button-outline-default-padding-top , 11px );
  padding-bottom: var( --comp-scu-button-outline-default-padding-bottom , 11px );
  & > *:not(:last-child) { margin-right: var( --comp-scu-button-outline-default-item-spacing , 0px ); } 
}

@mixin comp-scu-button-outline-default--absolute-layout {
  position: absolute;
  left: var( --comp-scu-button-outline-default-left , 4px );
  right: var( --comp-scu-button-outline-default-right , 4px );
  top: var( --comp-scu-button-outline-default-top , -12px );
  bottom: var( --comp-scu-button-outline-default-bottom , -12px ); 
}

@mixin comp-scu-button-outline-default--html-autolayout {
  display: inline-block;
  margin-left: var( --comp-scu-button-outline-default-left , 4px );
  margin-right: var( --comp-scu-button-outline-default-right , 4px );
  margin-top: var( --comp-scu-button-outline-default-top , -12px );
  margin-bottom: var( --comp-scu-button-outline-default-bottom , -12px );
  width: calc( 100% - ( var( --comp-scu-button-outline-default-left , 4px ) + var( --comp-scu-button-outline-default-right , 4px ) ) );
}

// ================================
// [TEXT_TOKEN] comp-scu-button-outline-default-label

@mixin comp-scu-button-outline-default-label { 
  position: relative;
  font-size: var( --comp-scu-button-outline-default-label-font-size , 16px );
  text-align: var( --comp-scu-button-outline-default-label-text-align-horizontal , CENTER );
  color: var( --comp-scu-button-outline-default-label-color , rgba(58,99,3,1) );
  font-family: var( --comp-scu-button-outline-default-label-font-family , 'Proxima Nova' );
  font-weight: var( --comp-scu-button-outline-default-label-font-weight , 400 );
  line-height: var( --comp-scu-button-outline-default-label-line-height , 18.75px );
  letter-spacing: var( --comp-scu-button-outline-default-label-letter-spacing , 0px ); 
}

@mixin comp-scu-button-outline-default-label--sizing {
  width: 34px;
  height: 19px;
}

@mixin comp-scu-button-outline-default-label--width {
  width: 34px;
}

@mixin comp-scu-button-outline-default-label--height {
  height: 19px;
}

@mixin comp-scu-button-outline-default-label--absolute-layout {
   
}

@mixin comp-scu-button-outline-default-label--html-autolayout {
  display: inline-block;
  margin-left: var( --comp-scu-button-outline-default-label-left , 24px );
  margin-right: var( --comp-scu-button-outline-default-label-right , 24px );
  margin-top: var( --comp-scu-button-outline-default-label-top , 11px );
  margin-bottom: var( --comp-scu-button-outline-default-label-bottom , 11px );
  width: calc( 100% - ( var( --comp-scu-button-outline-default-label-left , 24px ) + var( --comp-scu-button-outline-default-label-right , 24px ) ) );
}

// ================================
// [COMPONENT_TOKEN] comp-scu-button-outline-hover

@mixin comp-scu-button-outline-hover { 
  position: relative;
  background-color: var( --comp-scu-button-outline-hover-background-color , rgba(251,255,246,1) );
  border-radius: var( --comp-scu-button-outline-hover-corner-radius , 200px );
  border-width: var( --comp-scu-button-outline-hover-stroke-weight , 1px );
  border-style: solid;
  border-color: var( --comp-scu-button-outline-hover-stroke-color , rgba(99,166,10,1) ); 
}

@mixin comp-scu-button-outline-hover--sizing {
  width: 90px;
  height: 17px;
}

@mixin comp-scu-button-outline-hover--width {
  width: 90px;
}

@mixin comp-scu-button-outline-hover--height {
  height: 17px;
}

@mixin comp-scu-button-outline-hover--figma-autolayout { 
  display: flex;
  flex-flow: row nowrap;
  padding-left: var( --comp-scu-button-outline-hover-padding-left , 24px );
  padding-right: var( --comp-scu-button-outline-hover-padding-right , 24px );
  padding-top: var( --comp-scu-button-outline-hover-padding-top , 11px );
  padding-bottom: var( --comp-scu-button-outline-hover-padding-bottom , 11px );
  & > *:not(:last-child) { margin-right: var( --comp-scu-button-outline-hover-item-spacing , 0px ); } 
}

@mixin comp-scu-button-outline-hover--absolute-layout {
  position: absolute;
  left: var( --comp-scu-button-outline-hover-left , 0px );
  right: var( --comp-scu-button-outline-hover-right , 0px );
  top: var( --comp-scu-button-outline-hover-top , 0px );
  bottom: var( --comp-scu-button-outline-hover-bottom , 0px ); 
}

@mixin comp-scu-button-outline-hover--html-autolayout {
  display: inline-block;
  margin-left: var( --comp-scu-button-outline-hover-left , 0px );
  margin-right: var( --comp-scu-button-outline-hover-right , 0px );
  margin-top: var( --comp-scu-button-outline-hover-top , 0px );
  margin-bottom: var( --comp-scu-button-outline-hover-bottom , 0px );
  width: calc( 100% - ( var( --comp-scu-button-outline-hover-left , 0px ) + var( --comp-scu-button-outline-hover-right , 0px ) ) );
}

// ================================
// [TEXT_TOKEN] comp-scu-button-outline-hover-label

@mixin comp-scu-button-outline-hover-label { 
  position: relative;
  font-size: var( --comp-scu-button-outline-hover-label-font-size , 16px );
  text-align: var( --comp-scu-button-outline-hover-label-text-align-horizontal , CENTER );
  color: var( --comp-scu-button-outline-hover-label-color , rgba(58,99,3,1) );
  font-family: var( --comp-scu-button-outline-hover-label-font-family , 'Proxima Nova' );
  font-weight: var( --comp-scu-button-outline-hover-label-font-weight , 400 );
  line-height: var( --comp-scu-button-outline-hover-label-line-height , 18.75px );
  letter-spacing: var( --comp-scu-button-outline-hover-label-letter-spacing , 0px ); 
}

@mixin comp-scu-button-outline-hover-label--sizing {
  width: 34px;
  height: 19px;
}

@mixin comp-scu-button-outline-hover-label--width {
  width: 34px;
}

@mixin comp-scu-button-outline-hover-label--height {
  height: 19px;
}

@mixin comp-scu-button-outline-hover-label--absolute-layout {
   
}

@mixin comp-scu-button-outline-hover-label--html-autolayout {
  display: inline-block;
  margin-left: var( --comp-scu-button-outline-hover-label-left , 23px );
  margin-right: var( --comp-scu-button-outline-hover-label-right , 33px );
  margin-top: var( --comp-scu-button-outline-hover-label-top , 11px );
  margin-bottom: var( --comp-scu-button-outline-hover-label-bottom , -13px );
  width: calc( 100% - ( var( --comp-scu-button-outline-hover-label-left , 23px ) + var( --comp-scu-button-outline-hover-label-right , 33px ) ) );
}

// ================================
// [COMPONENT_TOKEN] comp-scu-button-outline-focus

@mixin comp-scu-button-outline-focus { 
  position: relative;
  background-color: var( --comp-scu-button-outline-focus-background-color , rgba(255,255,255,1) );
  border-radius: var( --comp-scu-button-outline-focus-corner-radius , 200px );
  border-width: var( --comp-scu-button-outline-focus-stroke-weight , 1px );
  border-style: solid;
  border-color: var( --comp-scu-button-outline-focus-stroke-color , rgba(99,166,10,1) );
  box-shadow: var( --comp-scu-button-outline-focus-shadow , 0px 0px 0px 2px rgba(53,155,249,1) ); 
}

@mixin comp-scu-button-outline-focus--sizing {
  width: 90px;
  height: 17px;
}

@mixin comp-scu-button-outline-focus--width {
  width: 90px;
}

@mixin comp-scu-button-outline-focus--height {
  height: 17px;
}

@mixin comp-scu-button-outline-focus--figma-autolayout { 
  display: flex;
  flex-flow: row nowrap;
  padding-left: var( --comp-scu-button-outline-focus-padding-left , 24px );
  padding-right: var( --comp-scu-button-outline-focus-padding-right , 24px );
  padding-top: var( --comp-scu-button-outline-focus-padding-top , 11px );
  padding-bottom: var( --comp-scu-button-outline-focus-padding-bottom , 11px );
  & > *:not(:last-child) { margin-right: var( --comp-scu-button-outline-focus-item-spacing , 0px ); } 
}

@mixin comp-scu-button-outline-focus--absolute-layout {
  position: absolute;
  left: var( --comp-scu-button-outline-focus-left , 0px );
  right: var( --comp-scu-button-outline-focus-right , 0px );
  top: var( --comp-scu-button-outline-focus-top , 0px );
  bottom: var( --comp-scu-button-outline-focus-bottom , 0px ); 
}

@mixin comp-scu-button-outline-focus--html-autolayout {
  display: inline-block;
  margin-left: var( --comp-scu-button-outline-focus-left , 0px );
  margin-right: var( --comp-scu-button-outline-focus-right , 0px );
  margin-top: var( --comp-scu-button-outline-focus-top , 0px );
  margin-bottom: var( --comp-scu-button-outline-focus-bottom , 0px );
  width: calc( 100% - ( var( --comp-scu-button-outline-focus-left , 0px ) + var( --comp-scu-button-outline-focus-right , 0px ) ) );
}

// ================================
// [TEXT_TOKEN] comp-scu-button-outline-focus-label

@mixin comp-scu-button-outline-focus-label { 
  position: relative;
  font-size: var( --comp-scu-button-outline-focus-label-font-size , 16px );
  text-align: var( --comp-scu-button-outline-focus-label-text-align-horizontal , CENTER );
  color: var( --comp-scu-button-outline-focus-label-color , rgba(58,99,3,1) );
  font-family: var( --comp-scu-button-outline-focus-label-font-family , 'Proxima Nova' );
  font-weight: var( --comp-scu-button-outline-focus-label-font-weight , 400 );
  line-height: var( --comp-scu-button-outline-focus-label-line-height , 18.75px );
  letter-spacing: var( --comp-scu-button-outline-focus-label-letter-spacing , 0px ); 
}

@mixin comp-scu-button-outline-focus-label--sizing {
  width: 34px;
  height: 19px;
}

@mixin comp-scu-button-outline-focus-label--width {
  width: 34px;
}

@mixin comp-scu-button-outline-focus-label--height {
  height: 19px;
}

@mixin comp-scu-button-outline-focus-label--absolute-layout {
   
}

@mixin comp-scu-button-outline-focus-label--html-autolayout {
  display: inline-block;
  margin-left: var( --comp-scu-button-outline-focus-label-left , 23px );
  margin-right: var( --comp-scu-button-outline-focus-label-right , 33px );
  margin-top: var( --comp-scu-button-outline-focus-label-top , 11px );
  margin-bottom: var( --comp-scu-button-outline-focus-label-bottom , -13px );
  width: calc( 100% - ( var( --comp-scu-button-outline-focus-label-left , 23px ) + var( --comp-scu-button-outline-focus-label-right , 33px ) ) );
}

// ================================
// [COMPONENT_TOKEN] comp-scu-button-outline-disabled

@mixin comp-scu-button-outline-disabled { 
  position: relative;
  background-color: var( --comp-scu-button-outline-disabled-background-color , rgba(255,255,255,1) );
  border-radius: var( --comp-scu-button-outline-disabled-corner-radius , 200px );
  border-width: var( --comp-scu-button-outline-disabled-stroke-weight , 1px );
  border-style: solid;
  border-color: var( --comp-scu-button-outline-disabled-stroke-color , rgba(187,218,146,1) ); 
}

@mixin comp-scu-button-outline-disabled--sizing {
  width: 80px;
  height: 40px;
}

@mixin comp-scu-button-outline-disabled--width {
  width: 80px;
}

@mixin comp-scu-button-outline-disabled--height {
  height: 40px;
}

@mixin comp-scu-button-outline-disabled--figma-autolayout { 
  display: flex;
  flex-flow: row nowrap;
  padding-left: var( --comp-scu-button-outline-disabled-padding-left , 24px );
  padding-right: var( --comp-scu-button-outline-disabled-padding-right , 24px );
  padding-top: var( --comp-scu-button-outline-disabled-padding-top , 11px );
  padding-bottom: var( --comp-scu-button-outline-disabled-padding-bottom , 11px );
  & > *:not(:last-child) { margin-right: var( --comp-scu-button-outline-disabled-item-spacing , 0px ); } 
}

@mixin comp-scu-button-outline-disabled--absolute-layout {
  position: absolute;
  right: var( --comp-scu-button-outline-disabled-left , 10px );
  width: var( --comp-scu-button-outline-disabled-width , 80px );
  bottom: var( --comp-scu-button-outline-disabled-bottom , 0px );
  height: var( --comp-scu-button-outline-disabled-height , 40px ); 
}

@mixin comp-scu-button-outline-disabled--html-autolayout {
  display: inline-block;
  margin-left: var( --comp-scu-button-outline-disabled-left , 10px );
  margin-right: var( --comp-scu-button-outline-disabled-right , 0px );
  margin-top: var( --comp-scu-button-outline-disabled-top , -23px );
  margin-bottom: var( --comp-scu-button-outline-disabled-bottom , 0px );
  width: calc( 100% - ( var( --comp-scu-button-outline-disabled-left , 10px ) + var( --comp-scu-button-outline-disabled-right , 0px ) ) );
}

// ================================
// [TEXT_TOKEN] comp-scu-button-outline-disabled-label

@mixin comp-scu-button-outline-disabled-label { 
  position: relative;
  font-size: var( --comp-scu-button-outline-disabled-label-font-size , 16px );
  text-align: var( --comp-scu-button-outline-disabled-label-text-align-horizontal , CENTER );
  color: var( --comp-scu-button-outline-disabled-label-color , rgba(201,227,166,1) );
  font-family: var( --comp-scu-button-outline-disabled-label-font-family , 'Proxima Nova' );
  font-weight: var( --comp-scu-button-outline-disabled-label-font-weight , 400 );
  line-height: var( --comp-scu-button-outline-disabled-label-line-height , 18.75px );
  letter-spacing: var( --comp-scu-button-outline-disabled-label-letter-spacing , 0px ); 
}

@mixin comp-scu-button-outline-disabled-label--sizing {
  width: 34px;
  height: 19px;
}

@mixin comp-scu-button-outline-disabled-label--width {
  width: 34px;
}

@mixin comp-scu-button-outline-disabled-label--height {
  height: 19px;
}

@mixin comp-scu-button-outline-disabled-label--absolute-layout {
   
}

@mixin comp-scu-button-outline-disabled-label--html-autolayout {
  display: inline-block;
  margin-left: var( --comp-scu-button-outline-disabled-label-left , 23px );
  margin-right: var( --comp-scu-button-outline-disabled-label-right , 23px );
  margin-top: var( --comp-scu-button-outline-disabled-label-top , 11px );
  margin-bottom: var( --comp-scu-button-outline-disabled-label-bottom , 10px );
  width: calc( 100% - ( var( --comp-scu-button-outline-disabled-label-left , 23px ) + var( --comp-scu-button-outline-disabled-label-right , 23px ) ) );
}

// ================================
// [COMPONENT_TOKEN] comp-scu-button-grey

@mixin comp-scu-button-grey { 
  position: relative; 
}

@mixin comp-scu-button-grey--sizing {
  width: 93px;
  height: 17px;
}

@mixin comp-scu-button-grey--width {
  width: 93px;
}

@mixin comp-scu-button-grey--height {
  height: 17px;
}

@mixin comp-scu-button-grey--figma-autolayout { 
   
}

@mixin comp-scu-button-grey--absolute-layout {
   
}

@mixin comp-scu-button-grey--html-autolayout {
  display: inline-block;
  margin-left: var( --comp-scu-button-grey-left , 0px );
  margin-right: var( --comp-scu-button-grey-right , 0px );
  margin-top: var( --comp-scu-button-grey-top , 0px );
  margin-bottom: var( --comp-scu-button-grey-bottom , 0px );
  width: calc( 100% - ( var( --comp-scu-button-grey-left , 0px ) + var( --comp-scu-button-grey-right , 0px ) ) );
}

// ================================
// [COMPONENT_TOKEN] comp-scu-button-grey-default

@mixin comp-scu-button-grey-default { 
  position: relative;
  background-color: var( --comp-scu-button-grey-default-background-color , rgba(219,219,219,1) );
  border-radius: var( --comp-scu-button-grey-default-corner-radius , 200px ); 
}

@mixin comp-scu-button-grey-default--sizing {
  width: 82px;
  height: 41px;
}

@mixin comp-scu-button-grey-default--width {
  width: 82px;
}

@mixin comp-scu-button-grey-default--height {
  height: 41px;
}

@mixin comp-scu-button-grey-default--figma-autolayout { 
  display: flex;
  flex-flow: row nowrap;
  padding-left: var( --comp-scu-button-grey-default-padding-left , 24px );
  padding-right: var( --comp-scu-button-grey-default-padding-right , 24px );
  padding-top: var( --comp-scu-button-grey-default-padding-top , 11px );
  padding-bottom: var( --comp-scu-button-grey-default-padding-bottom , 11px );
  & > *:not(:last-child) { margin-right: var( --comp-scu-button-grey-default-item-spacing , 0px ); } 
}

@mixin comp-scu-button-grey-default--absolute-layout {
  position: absolute;
  left: var( --comp-scu-button-grey-default-left , 5.5px );
  right: var( --comp-scu-button-grey-default-right , 5.5px );
  top: var( --comp-scu-button-grey-default-top , -12px );
  bottom: var( --comp-scu-button-grey-default-bottom , -12px ); 
}

@mixin comp-scu-button-grey-default--html-autolayout {
  display: inline-block;
  margin-left: var( --comp-scu-button-grey-default-left , 5.5px );
  margin-right: var( --comp-scu-button-grey-default-right , 5.5px );
  margin-top: var( --comp-scu-button-grey-default-top , -12px );
  margin-bottom: var( --comp-scu-button-grey-default-bottom , -12px );
  width: calc( 100% - ( var( --comp-scu-button-grey-default-left , 5.5px ) + var( --comp-scu-button-grey-default-right , 5.5px ) ) );
}

// ================================
// [TEXT_TOKEN] comp-scu-button-grey-default-label

@mixin comp-scu-button-grey-default-label { 
  position: relative;
  font-size: var( --comp-scu-button-grey-default-label-font-size , 16px );
  text-align: var( --comp-scu-button-grey-default-label-text-align-horizontal , CENTER );
  color: var( --comp-scu-button-grey-default-label-color , rgba(0,0,0,1) );
  font-family: var( --comp-scu-button-grey-default-label-font-family , 'Proxima Nova' );
  font-weight: var( --comp-scu-button-grey-default-label-font-weight , 400 );
  line-height: var( --comp-scu-button-grey-default-label-line-height , 18.75px );
  letter-spacing: var( --comp-scu-button-grey-default-label-letter-spacing , 0px ); 
}

@mixin comp-scu-button-grey-default-label--sizing {
  width: 34px;
  height: 19px;
}

@mixin comp-scu-button-grey-default-label--width {
  width: 34px;
}

@mixin comp-scu-button-grey-default-label--height {
  height: 19px;
}

@mixin comp-scu-button-grey-default-label--absolute-layout {
   
}

@mixin comp-scu-button-grey-default-label--html-autolayout {
  display: inline-block;
  margin-left: var( --comp-scu-button-grey-default-label-left , 24px );
  margin-right: var( --comp-scu-button-grey-default-label-right , 24px );
  margin-top: var( --comp-scu-button-grey-default-label-top , 11px );
  margin-bottom: var( --comp-scu-button-grey-default-label-bottom , 11px );
  width: calc( 100% - ( var( --comp-scu-button-grey-default-label-left , 24px ) + var( --comp-scu-button-grey-default-label-right , 24px ) ) );
}

// ================================
// [COMPONENT_TOKEN] comp-scu-button-grey-hover

@mixin comp-scu-button-grey-hover { 
  position: relative;
  background-color: var( --comp-scu-button-grey-hover-background-color , rgba(235,235,235,1) );
  border-radius: var( --comp-scu-button-grey-hover-corner-radius , 200px ); 
}

@mixin comp-scu-button-grey-hover--sizing {
  width: 93px;
  height: 17px;
}

@mixin comp-scu-button-grey-hover--width {
  width: 93px;
}

@mixin comp-scu-button-grey-hover--height {
  height: 17px;
}

@mixin comp-scu-button-grey-hover--figma-autolayout { 
  display: flex;
  flex-flow: row nowrap;
  padding-left: var( --comp-scu-button-grey-hover-padding-left , 24px );
  padding-right: var( --comp-scu-button-grey-hover-padding-right , 24px );
  padding-top: var( --comp-scu-button-grey-hover-padding-top , 11px );
  padding-bottom: var( --comp-scu-button-grey-hover-padding-bottom , 11px );
  & > *:not(:last-child) { margin-right: var( --comp-scu-button-grey-hover-item-spacing , 0px ); } 
}

@mixin comp-scu-button-grey-hover--absolute-layout {
  position: absolute;
  left: var( --comp-scu-button-grey-hover-left , 0px );
  right: var( --comp-scu-button-grey-hover-right , 0px );
  top: var( --comp-scu-button-grey-hover-top , 0px );
  bottom: var( --comp-scu-button-grey-hover-bottom , 0px ); 
}

@mixin comp-scu-button-grey-hover--html-autolayout {
  display: inline-block;
  margin-left: var( --comp-scu-button-grey-hover-left , 0px );
  margin-right: var( --comp-scu-button-grey-hover-right , 0px );
  margin-top: var( --comp-scu-button-grey-hover-top , 0px );
  margin-bottom: var( --comp-scu-button-grey-hover-bottom , 0px );
  width: calc( 100% - ( var( --comp-scu-button-grey-hover-left , 0px ) + var( --comp-scu-button-grey-hover-right , 0px ) ) );
}

// ================================
// [TEXT_TOKEN] comp-scu-button-grey-hover-label

@mixin comp-scu-button-grey-hover-label { 
  position: relative;
  font-size: var( --comp-scu-button-grey-hover-label-font-size , 16px );
  text-align: var( --comp-scu-button-grey-hover-label-text-align-horizontal , CENTER );
  color: var( --comp-scu-button-grey-hover-label-color , rgba(0,0,0,1) );
  font-family: var( --comp-scu-button-grey-hover-label-font-family , 'Proxima Nova' );
  font-weight: var( --comp-scu-button-grey-hover-label-font-weight , 400 );
  line-height: var( --comp-scu-button-grey-hover-label-line-height , 18.75px );
  letter-spacing: var( --comp-scu-button-grey-hover-label-letter-spacing , 0px ); 
}

@mixin comp-scu-button-grey-hover-label--sizing {
  width: 34px;
  height: 19px;
}

@mixin comp-scu-button-grey-hover-label--width {
  width: 34px;
}

@mixin comp-scu-button-grey-hover-label--height {
  height: 19px;
}

@mixin comp-scu-button-grey-hover-label--absolute-layout {
   
}

@mixin comp-scu-button-grey-hover-label--html-autolayout {
  display: inline-block;
  margin-left: var( --comp-scu-button-grey-hover-label-left , 23px );
  margin-right: var( --comp-scu-button-grey-hover-label-right , 36px );
  margin-top: var( --comp-scu-button-grey-hover-label-top , 11px );
  margin-bottom: var( --comp-scu-button-grey-hover-label-bottom , -13px );
  width: calc( 100% - ( var( --comp-scu-button-grey-hover-label-left , 23px ) + var( --comp-scu-button-grey-hover-label-right , 36px ) ) );
}

// ================================
// [COMPONENT_TOKEN] comp-scu-button-grey-focus

@mixin comp-scu-button-grey-focus { 
  position: relative;
  background-color: var( --comp-scu-button-grey-focus-background-color , rgba(219,219,219,1) );
  border-radius: var( --comp-scu-button-grey-focus-corner-radius , 200px );
  box-shadow: var( --comp-scu-button-grey-focus-shadow , 0px 0px 0px 2px rgba(53,155,249,1) ); 
}

@mixin comp-scu-button-grey-focus--sizing {
  width: 93px;
  height: 17px;
}

@mixin comp-scu-button-grey-focus--width {
  width: 93px;
}

@mixin comp-scu-button-grey-focus--height {
  height: 17px;
}

@mixin comp-scu-button-grey-focus--figma-autolayout { 
  display: flex;
  flex-flow: row nowrap;
  padding-left: var( --comp-scu-button-grey-focus-padding-left , 24px );
  padding-right: var( --comp-scu-button-grey-focus-padding-right , 24px );
  padding-top: var( --comp-scu-button-grey-focus-padding-top , 11px );
  padding-bottom: var( --comp-scu-button-grey-focus-padding-bottom , 11px );
  & > *:not(:last-child) { margin-right: var( --comp-scu-button-grey-focus-item-spacing , 0px ); } 
}

@mixin comp-scu-button-grey-focus--absolute-layout {
  position: absolute;
  left: var( --comp-scu-button-grey-focus-left , 0px );
  right: var( --comp-scu-button-grey-focus-right , 0px );
  top: var( --comp-scu-button-grey-focus-top , 0px );
  bottom: var( --comp-scu-button-grey-focus-bottom , 0px ); 
}

@mixin comp-scu-button-grey-focus--html-autolayout {
  display: inline-block;
  margin-left: var( --comp-scu-button-grey-focus-left , 0px );
  margin-right: var( --comp-scu-button-grey-focus-right , 0px );
  margin-top: var( --comp-scu-button-grey-focus-top , 0px );
  margin-bottom: var( --comp-scu-button-grey-focus-bottom , 0px );
  width: calc( 100% - ( var( --comp-scu-button-grey-focus-left , 0px ) + var( --comp-scu-button-grey-focus-right , 0px ) ) );
}

// ================================
// [TEXT_TOKEN] comp-scu-button-grey-focus-label

@mixin comp-scu-button-grey-focus-label { 
  position: relative;
  font-size: var( --comp-scu-button-grey-focus-label-font-size , 16px );
  text-align: var( --comp-scu-button-grey-focus-label-text-align-horizontal , CENTER );
  color: var( --comp-scu-button-grey-focus-label-color , rgba(0,0,0,1) );
  font-family: var( --comp-scu-button-grey-focus-label-font-family , 'Proxima Nova' );
  font-weight: var( --comp-scu-button-grey-focus-label-font-weight , 400 );
  line-height: var( --comp-scu-button-grey-focus-label-line-height , 18.75px );
  letter-spacing: var( --comp-scu-button-grey-focus-label-letter-spacing , 0px ); 
}

@mixin comp-scu-button-grey-focus-label--sizing {
  width: 34px;
  height: 19px;
}

@mixin comp-scu-button-grey-focus-label--width {
  width: 34px;
}

@mixin comp-scu-button-grey-focus-label--height {
  height: 19px;
}

@mixin comp-scu-button-grey-focus-label--absolute-layout {
   
}

@mixin comp-scu-button-grey-focus-label--html-autolayout {
  display: inline-block;
  margin-left: var( --comp-scu-button-grey-focus-label-left , 23px );
  margin-right: var( --comp-scu-button-grey-focus-label-right , 36px );
  margin-top: var( --comp-scu-button-grey-focus-label-top , 11px );
  margin-bottom: var( --comp-scu-button-grey-focus-label-bottom , -13px );
  width: calc( 100% - ( var( --comp-scu-button-grey-focus-label-left , 23px ) + var( --comp-scu-button-grey-focus-label-right , 36px ) ) );
}

// ================================
// [COMPONENT_TOKEN] comp-scu-button-grey-disabled

@mixin comp-scu-button-grey-disabled { 
  position: relative;
  background-color: var( --comp-scu-button-grey-disabled-background-color , rgba(235,235,235,1) );
  border-radius: var( --comp-scu-button-grey-disabled-corner-radius , 200px ); 
}

@mixin comp-scu-button-grey-disabled--sizing {
  width: 93px;
  height: 17px;
}

@mixin comp-scu-button-grey-disabled--width {
  width: 93px;
}

@mixin comp-scu-button-grey-disabled--height {
  height: 17px;
}

@mixin comp-scu-button-grey-disabled--figma-autolayout { 
  display: flex;
  flex-flow: row nowrap;
  padding-left: var( --comp-scu-button-grey-disabled-padding-left , 24px );
  padding-right: var( --comp-scu-button-grey-disabled-padding-right , 24px );
  padding-top: var( --comp-scu-button-grey-disabled-padding-top , 11px );
  padding-bottom: var( --comp-scu-button-grey-disabled-padding-bottom , 11px );
  & > *:not(:last-child) { margin-right: var( --comp-scu-button-grey-disabled-item-spacing , 0px ); } 
}

@mixin comp-scu-button-grey-disabled--absolute-layout {
  position: absolute;
  left: var( --comp-scu-button-grey-disabled-left , 0px );
  right: var( --comp-scu-button-grey-disabled-right , 0px );
  top: var( --comp-scu-button-grey-disabled-top , 0px );
  bottom: var( --comp-scu-button-grey-disabled-bottom , 0px ); 
}

@mixin comp-scu-button-grey-disabled--html-autolayout {
  display: inline-block;
  margin-left: var( --comp-scu-button-grey-disabled-left , 0px );
  margin-right: var( --comp-scu-button-grey-disabled-right , 0px );
  margin-top: var( --comp-scu-button-grey-disabled-top , 0px );
  margin-bottom: var( --comp-scu-button-grey-disabled-bottom , 0px );
  width: calc( 100% - ( var( --comp-scu-button-grey-disabled-left , 0px ) + var( --comp-scu-button-grey-disabled-right , 0px ) ) );
}

// ================================
// [TEXT_TOKEN] comp-scu-button-grey-disabled-label

@mixin comp-scu-button-grey-disabled-label { 
  position: relative;
  font-size: var( --comp-scu-button-grey-disabled-label-font-size , 16px );
  text-align: var( --comp-scu-button-grey-disabled-label-text-align-horizontal , CENTER );
  color: var( --comp-scu-button-grey-disabled-label-color , rgba(196,196,196,1) );
  font-family: var( --comp-scu-button-grey-disabled-label-font-family , 'Proxima Nova' );
  font-weight: var( --comp-scu-button-grey-disabled-label-font-weight , 400 );
  line-height: var( --comp-scu-button-grey-disabled-label-line-height , 18.75px );
  letter-spacing: var( --comp-scu-button-grey-disabled-label-letter-spacing , 0px ); 
}

@mixin comp-scu-button-grey-disabled-label--sizing {
  width: 34px;
  height: 19px;
}

@mixin comp-scu-button-grey-disabled-label--width {
  width: 34px;
}

@mixin comp-scu-button-grey-disabled-label--height {
  height: 19px;
}

@mixin comp-scu-button-grey-disabled-label--absolute-layout {
   
}

@mixin comp-scu-button-grey-disabled-label--html-autolayout {
  display: inline-block;
  margin-left: var( --comp-scu-button-grey-disabled-label-left , 23px );
  margin-right: var( --comp-scu-button-grey-disabled-label-right , 36px );
  margin-top: var( --comp-scu-button-grey-disabled-label-top , 11px );
  margin-bottom: var( --comp-scu-button-grey-disabled-label-bottom , -13px );
  width: calc( 100% - ( var( --comp-scu-button-grey-disabled-label-left , 23px ) + var( --comp-scu-button-grey-disabled-label-right , 36px ) ) );
}

// ================================
// [COMPONENT_TOKEN] comp-scu-button-link

@mixin comp-scu-button-link { 
  position: relative; 
}

@mixin comp-scu-button-link--sizing {
  width: 90px;
  height: 17px;
}

@mixin comp-scu-button-link--width {
  width: 90px;
}

@mixin comp-scu-button-link--height {
  height: 17px;
}

@mixin comp-scu-button-link--figma-autolayout { 
   
}

@mixin comp-scu-button-link--absolute-layout {
   
}

@mixin comp-scu-button-link--html-autolayout {
  display: inline-block;
  margin-left: var( --comp-scu-button-link-left , 0px );
  margin-right: var( --comp-scu-button-link-right , 0px );
  margin-top: var( --comp-scu-button-link-top , 0px );
  margin-bottom: var( --comp-scu-button-link-bottom , 0px );
  width: calc( 100% - ( var( --comp-scu-button-link-left , 0px ) + var( --comp-scu-button-link-right , 0px ) ) );
}

// ================================
// [COMPONENT_TOKEN] comp-scu-button-link-default

@mixin comp-scu-button-link-default { 
  position: relative;
  border-radius: var( --comp-scu-button-link-default-corner-radius , 200px ); 
}

@mixin comp-scu-button-link-default--sizing {
  width: 82px;
  height: 41px;
}

@mixin comp-scu-button-link-default--width {
  width: 82px;
}

@mixin comp-scu-button-link-default--height {
  height: 41px;
}

@mixin comp-scu-button-link-default--figma-autolayout { 
  display: flex;
  flex-flow: row nowrap;
  padding-left: var( --comp-scu-button-link-default-padding-left , 24px );
  padding-right: var( --comp-scu-button-link-default-padding-right , 24px );
  padding-top: var( --comp-scu-button-link-default-padding-top , 11px );
  padding-bottom: var( --comp-scu-button-link-default-padding-bottom , 11px );
  & > *:not(:last-child) { margin-right: var( --comp-scu-button-link-default-item-spacing , 0px ); } 
}

@mixin comp-scu-button-link-default--absolute-layout {
  position: absolute;
  left: var( --comp-scu-button-link-default-left , 4px );
  right: var( --comp-scu-button-link-default-right , 4px );
  top: var( --comp-scu-button-link-default-top , -12px );
  bottom: var( --comp-scu-button-link-default-bottom , -12px ); 
}

@mixin comp-scu-button-link-default--html-autolayout {
  display: inline-block;
  margin-left: var( --comp-scu-button-link-default-left , 4px );
  margin-right: var( --comp-scu-button-link-default-right , 4px );
  margin-top: var( --comp-scu-button-link-default-top , -12px );
  margin-bottom: var( --comp-scu-button-link-default-bottom , -12px );
  width: calc( 100% - ( var( --comp-scu-button-link-default-left , 4px ) + var( --comp-scu-button-link-default-right , 4px ) ) );
}

// ================================
// [TEXT_TOKEN] comp-scu-button-link-default-label

@mixin comp-scu-button-link-default-label { 
  position: relative;
  font-size: var( --comp-scu-button-link-default-label-font-size , 16px );
  text-align: var( --comp-scu-button-link-default-label-text-align-horizontal , CENTER );
  color: var( --comp-scu-button-link-default-label-color , rgba(0,0,0,1) );
  font-family: var( --comp-scu-button-link-default-label-font-family , 'Proxima Nova' );
  font-weight: var( --comp-scu-button-link-default-label-font-weight , 400 );
  line-height: var( --comp-scu-button-link-default-label-line-height , 18.75px );
  letter-spacing: var( --comp-scu-button-link-default-label-letter-spacing , 0px ); 
}

@mixin comp-scu-button-link-default-label--sizing {
  width: 34px;
  height: 19px;
}

@mixin comp-scu-button-link-default-label--width {
  width: 34px;
}

@mixin comp-scu-button-link-default-label--height {
  height: 19px;
}

@mixin comp-scu-button-link-default-label--absolute-layout {
   
}

@mixin comp-scu-button-link-default-label--html-autolayout {
  display: inline-block;
  margin-left: var( --comp-scu-button-link-default-label-left , 24px );
  margin-right: var( --comp-scu-button-link-default-label-right , 24px );
  margin-top: var( --comp-scu-button-link-default-label-top , 11px );
  margin-bottom: var( --comp-scu-button-link-default-label-bottom , 11px );
  width: calc( 100% - ( var( --comp-scu-button-link-default-label-left , 24px ) + var( --comp-scu-button-link-default-label-right , 24px ) ) );
}

// ================================
// [COMPONENT_TOKEN] comp-scu-button-link-hover

@mixin comp-scu-button-link-hover { 
  position: relative;
  border-radius: var( --comp-scu-button-link-hover-corner-radius , 200px ); 
}

@mixin comp-scu-button-link-hover--sizing {
  width: 90px;
  height: 17px;
}

@mixin comp-scu-button-link-hover--width {
  width: 90px;
}

@mixin comp-scu-button-link-hover--height {
  height: 17px;
}

@mixin comp-scu-button-link-hover--figma-autolayout { 
  display: flex;
  flex-flow: row nowrap;
  padding-left: var( --comp-scu-button-link-hover-padding-left , 24px );
  padding-right: var( --comp-scu-button-link-hover-padding-right , 24px );
  padding-top: var( --comp-scu-button-link-hover-padding-top , 11px );
  padding-bottom: var( --comp-scu-button-link-hover-padding-bottom , 11px );
  & > *:not(:last-child) { margin-right: var( --comp-scu-button-link-hover-item-spacing , 0px ); } 
}

@mixin comp-scu-button-link-hover--absolute-layout {
  position: absolute;
  left: var( --comp-scu-button-link-hover-left , 0px );
  right: var( --comp-scu-button-link-hover-right , 0px );
  top: var( --comp-scu-button-link-hover-top , 0px );
  bottom: var( --comp-scu-button-link-hover-bottom , 0px ); 
}

@mixin comp-scu-button-link-hover--html-autolayout {
  display: inline-block;
  margin-left: var( --comp-scu-button-link-hover-left , 0px );
  margin-right: var( --comp-scu-button-link-hover-right , 0px );
  margin-top: var( --comp-scu-button-link-hover-top , 0px );
  margin-bottom: var( --comp-scu-button-link-hover-bottom , 0px );
  width: calc( 100% - ( var( --comp-scu-button-link-hover-left , 0px ) + var( --comp-scu-button-link-hover-right , 0px ) ) );
}

// ================================
// [TEXT_TOKEN] comp-scu-button-link-hover-label

@mixin comp-scu-button-link-hover-label { 
  position: relative;
  font-size: var( --comp-scu-button-link-hover-label-font-size , 16px );
  text-align: var( --comp-scu-button-link-hover-label-text-align-horizontal , CENTER );
  color: var( --comp-scu-button-link-hover-label-color , rgba(0,0,0,1) );
  font-family: var( --comp-scu-button-link-hover-label-font-family , 'Proxima Nova' );
  font-weight: var( --comp-scu-button-link-hover-label-font-weight , 400 );
  line-height: var( --comp-scu-button-link-hover-label-line-height , 18.75px );
  letter-spacing: var( --comp-scu-button-link-hover-label-letter-spacing , 0px ); 
}

@mixin comp-scu-button-link-hover-label--sizing {
  width: 34px;
  height: 19px;
}

@mixin comp-scu-button-link-hover-label--width {
  width: 34px;
}

@mixin comp-scu-button-link-hover-label--height {
  height: 19px;
}

@mixin comp-scu-button-link-hover-label--absolute-layout {
   
}

@mixin comp-scu-button-link-hover-label--html-autolayout {
  display: inline-block;
  margin-left: var( --comp-scu-button-link-hover-label-left , 23px );
  margin-right: var( --comp-scu-button-link-hover-label-right , 33px );
  margin-top: var( --comp-scu-button-link-hover-label-top , 11px );
  margin-bottom: var( --comp-scu-button-link-hover-label-bottom , -13px );
  width: calc( 100% - ( var( --comp-scu-button-link-hover-label-left , 23px ) + var( --comp-scu-button-link-hover-label-right , 33px ) ) );
}

// ================================
// [COMPONENT_TOKEN] comp-scu-button-link-focus

@mixin comp-scu-button-link-focus { 
  position: relative;
  background-color: var( --comp-scu-button-link-focus-background-color , rgba(255,255,255,1) );
  border-radius: var( --comp-scu-button-link-focus-corner-radius , 200px );
  box-shadow: var( --comp-scu-button-link-focus-shadow , 0px 0px 0px 2px rgba(53,155,249,1) ); 
}

@mixin comp-scu-button-link-focus--sizing {
  width: 90px;
  height: 17px;
}

@mixin comp-scu-button-link-focus--width {
  width: 90px;
}

@mixin comp-scu-button-link-focus--height {
  height: 17px;
}

@mixin comp-scu-button-link-focus--figma-autolayout { 
  display: flex;
  flex-flow: row nowrap;
  padding-left: var( --comp-scu-button-link-focus-padding-left , 24px );
  padding-right: var( --comp-scu-button-link-focus-padding-right , 24px );
  padding-top: var( --comp-scu-button-link-focus-padding-top , 11px );
  padding-bottom: var( --comp-scu-button-link-focus-padding-bottom , 11px );
  & > *:not(:last-child) { margin-right: var( --comp-scu-button-link-focus-item-spacing , 0px ); } 
}

@mixin comp-scu-button-link-focus--absolute-layout {
  position: absolute;
  left: var( --comp-scu-button-link-focus-left , 0px );
  right: var( --comp-scu-button-link-focus-right , 0px );
  top: var( --comp-scu-button-link-focus-top , 0px );
  bottom: var( --comp-scu-button-link-focus-bottom , 0px ); 
}

@mixin comp-scu-button-link-focus--html-autolayout {
  display: inline-block;
  margin-left: var( --comp-scu-button-link-focus-left , 0px );
  margin-right: var( --comp-scu-button-link-focus-right , 0px );
  margin-top: var( --comp-scu-button-link-focus-top , 0px );
  margin-bottom: var( --comp-scu-button-link-focus-bottom , 0px );
  width: calc( 100% - ( var( --comp-scu-button-link-focus-left , 0px ) + var( --comp-scu-button-link-focus-right , 0px ) ) );
}

// ================================
// [TEXT_TOKEN] comp-scu-button-link-focus-label

@mixin comp-scu-button-link-focus-label { 
  position: relative;
  font-size: var( --comp-scu-button-link-focus-label-font-size , 16px );
  text-align: var( --comp-scu-button-link-focus-label-text-align-horizontal , CENTER );
  color: var( --comp-scu-button-link-focus-label-color , rgba(0,0,0,1) );
  font-family: var( --comp-scu-button-link-focus-label-font-family , 'Proxima Nova' );
  font-weight: var( --comp-scu-button-link-focus-label-font-weight , 400 );
  line-height: var( --comp-scu-button-link-focus-label-line-height , 18.75px );
  letter-spacing: var( --comp-scu-button-link-focus-label-letter-spacing , 0px ); 
}

@mixin comp-scu-button-link-focus-label--sizing {
  width: 34px;
  height: 19px;
}

@mixin comp-scu-button-link-focus-label--width {
  width: 34px;
}

@mixin comp-scu-button-link-focus-label--height {
  height: 19px;
}

@mixin comp-scu-button-link-focus-label--absolute-layout {
   
}

@mixin comp-scu-button-link-focus-label--html-autolayout {
  display: inline-block;
  margin-left: var( --comp-scu-button-link-focus-label-left , 23px );
  margin-right: var( --comp-scu-button-link-focus-label-right , 33px );
  margin-top: var( --comp-scu-button-link-focus-label-top , 11px );
  margin-bottom: var( --comp-scu-button-link-focus-label-bottom , -13px );
  width: calc( 100% - ( var( --comp-scu-button-link-focus-label-left , 23px ) + var( --comp-scu-button-link-focus-label-right , 33px ) ) );
}

// ================================
// [COMPONENT_TOKEN] comp-scu-button-link-disabled

@mixin comp-scu-button-link-disabled { 
  position: relative;
  border-radius: var( --comp-scu-button-link-disabled-corner-radius , 200px ); 
}

@mixin comp-scu-button-link-disabled--sizing {
  width: 80px;
  height: 40px;
}

@mixin comp-scu-button-link-disabled--width {
  width: 80px;
}

@mixin comp-scu-button-link-disabled--height {
  height: 40px;
}

@mixin comp-scu-button-link-disabled--figma-autolayout { 
  display: flex;
  flex-flow: row nowrap;
  padding-left: var( --comp-scu-button-link-disabled-padding-left , 24px );
  padding-right: var( --comp-scu-button-link-disabled-padding-right , 24px );
  padding-top: var( --comp-scu-button-link-disabled-padding-top , 11px );
  padding-bottom: var( --comp-scu-button-link-disabled-padding-bottom , 11px );
  & > *:not(:last-child) { margin-right: var( --comp-scu-button-link-disabled-item-spacing , 0px ); } 
}

@mixin comp-scu-button-link-disabled--absolute-layout {
  position: absolute;
  right: var( --comp-scu-button-link-disabled-left , 10px );
  width: var( --comp-scu-button-link-disabled-width , 80px );
  bottom: var( --comp-scu-button-link-disabled-bottom , 0px );
  height: var( --comp-scu-button-link-disabled-height , 40px ); 
}

@mixin comp-scu-button-link-disabled--html-autolayout {
  display: inline-block;
  margin-left: var( --comp-scu-button-link-disabled-left , 10px );
  margin-right: var( --comp-scu-button-link-disabled-right , 0px );
  margin-top: var( --comp-scu-button-link-disabled-top , -23px );
  margin-bottom: var( --comp-scu-button-link-disabled-bottom , 0px );
  width: calc( 100% - ( var( --comp-scu-button-link-disabled-left , 10px ) + var( --comp-scu-button-link-disabled-right , 0px ) ) );
}

// ================================
// [TEXT_TOKEN] comp-scu-button-link-disabled-label

@mixin comp-scu-button-link-disabled-label { 
  position: relative;
  font-size: var( --comp-scu-button-link-disabled-label-font-size , 16px );
  text-align: var( --comp-scu-button-link-disabled-label-text-align-horizontal , CENTER );
  color: var( --comp-scu-button-link-disabled-label-color , rgba(89,89,89,1) );
  font-family: var( --comp-scu-button-link-disabled-label-font-family , 'Proxima Nova' );
  font-weight: var( --comp-scu-button-link-disabled-label-font-weight , 400 );
  line-height: var( --comp-scu-button-link-disabled-label-line-height , 18.75px );
  letter-spacing: var( --comp-scu-button-link-disabled-label-letter-spacing , 0px ); 
}

@mixin comp-scu-button-link-disabled-label--sizing {
  width: 34px;
  height: 19px;
}

@mixin comp-scu-button-link-disabled-label--width {
  width: 34px;
}

@mixin comp-scu-button-link-disabled-label--height {
  height: 19px;
}

@mixin comp-scu-button-link-disabled-label--absolute-layout {
   
}

@mixin comp-scu-button-link-disabled-label--html-autolayout {
  display: inline-block;
  margin-left: var( --comp-scu-button-link-disabled-label-left , 23px );
  margin-right: var( --comp-scu-button-link-disabled-label-right , 23px );
  margin-top: var( --comp-scu-button-link-disabled-label-top , 11px );
  margin-bottom: var( --comp-scu-button-link-disabled-label-bottom , 10px );
  width: calc( 100% - ( var( --comp-scu-button-link-disabled-label-left , 23px ) + var( --comp-scu-button-link-disabled-label-right , 23px ) ) );
}

// ================================
// [COMPONENT_TOKEN] comp-scu-icon-button-primary

@mixin comp-scu-icon-button-primary { 
  position: relative; 
}

@mixin comp-scu-icon-button-primary--sizing {
  width: 113px;
  height: 37px;
}

@mixin comp-scu-icon-button-primary--width {
  width: 113px;
}

@mixin comp-scu-icon-button-primary--height {
  height: 37px;
}

@mixin comp-scu-icon-button-primary--figma-autolayout { 
   
}

@mixin comp-scu-icon-button-primary--absolute-layout {
   
}

@mixin comp-scu-icon-button-primary--html-autolayout {
  display: inline-block;
  margin-left: var( --comp-scu-icon-button-primary-left , 0px );
  margin-right: var( --comp-scu-icon-button-primary-right , 0px );
  margin-top: var( --comp-scu-icon-button-primary-top , 0px );
  margin-bottom: var( --comp-scu-icon-button-primary-bottom , 0px );
  width: calc( 100% - ( var( --comp-scu-icon-button-primary-left , 0px ) + var( --comp-scu-icon-button-primary-right , 0px ) ) );
}

// ================================
// [COMPONENT_TOKEN] comp-scu-icon-button-primary-default

@mixin comp-scu-icon-button-primary-default { 
  position: relative;
  background-color: var( --comp-scu-icon-button-primary-default-background-color , rgba(99,166,10,1) );
  border-radius: var( --comp-scu-icon-button-primary-default-corner-radius , 200px ); 
}

@mixin comp-scu-icon-button-primary-default--sizing {
  width: 115px;
  height: 40px;
}

@mixin comp-scu-icon-button-primary-default--width {
  width: 115px;
}

@mixin comp-scu-icon-button-primary-default--height {
  height: 40px;
}

@mixin comp-scu-icon-button-primary-default--figma-autolayout { 
  display: flex;
  flex-flow: row nowrap;
  padding-left: var( --comp-scu-icon-button-primary-default-padding-left , 24px );
  padding-right: var( --comp-scu-icon-button-primary-default-padding-right , 24px );
  padding-top: var( --comp-scu-icon-button-primary-default-padding-top , 8px );
  padding-bottom: var( --comp-scu-icon-button-primary-default-padding-bottom , 8px );
  & > *:not(:last-child) { margin-right: var( --comp-scu-icon-button-primary-default-item-spacing , 8px ); } 
}

@mixin comp-scu-icon-button-primary-default--absolute-layout {
  position: absolute;
  left: var( --comp-scu-icon-button-primary-default-left , -1px );
  right: var( --comp-scu-icon-button-primary-default-right , -1px );
  top: var( --comp-scu-icon-button-primary-default-top , -1.5px );
  bottom: var( --comp-scu-icon-button-primary-default-bottom , -1.5px ); 
}

@mixin comp-scu-icon-button-primary-default--html-autolayout {
  display: inline-block;
  margin-left: var( --comp-scu-icon-button-primary-default-left , -1px );
  margin-right: var( --comp-scu-icon-button-primary-default-right , -1px );
  margin-top: var( --comp-scu-icon-button-primary-default-top , -1.5px );
  margin-bottom: var( --comp-scu-icon-button-primary-default-bottom , -1.5px );
  width: calc( 100% - ( var( --comp-scu-icon-button-primary-default-left , -1px ) + var( --comp-scu-icon-button-primary-default-right , -1px ) ) );
}

// ================================
// [COMPONENT_TOKEN] comp-scu-icon-button-primary-default-icon

@mixin comp-scu-icon-button-primary-default-icon { 
  position: relative;
  background-color: var( --comp-scu-icon-button-primary-default-icon-background-color , rgba(255,255,255,1) ); 
}

@mixin comp-scu-icon-button-primary-default-icon--sizing {
  width: 24px;
  height: 24px;
}

@mixin comp-scu-icon-button-primary-default-icon--width {
  width: 24px;
}

@mixin comp-scu-icon-button-primary-default-icon--height {
  height: 24px;
}

@mixin comp-scu-icon-button-primary-default-icon--figma-autolayout { 
   
}

@mixin comp-scu-icon-button-primary-default-icon--absolute-layout {
   
}

@mixin comp-scu-icon-button-primary-default-icon--html-autolayout {
  display: inline-block;
  margin-left: var( --comp-scu-icon-button-primary-default-icon-left , 24px );
  margin-right: var( --comp-scu-icon-button-primary-default-icon-right , 67px );
  margin-top: var( --comp-scu-icon-button-primary-default-icon-top , 8px );
  margin-bottom: var( --comp-scu-icon-button-primary-default-icon-bottom , 8px );
  width: calc( 100% - ( var( --comp-scu-icon-button-primary-default-icon-left , 24px ) + var( --comp-scu-icon-button-primary-default-icon-right , 67px ) ) );
}

// ================================
// [TEXT_TOKEN] comp-scu-icon-button-primary-default-label

@mixin comp-scu-icon-button-primary-default-label { 
  position: relative;
  font-size: var( --comp-scu-icon-button-primary-default-label-font-size , 16px );
  text-align: var( --comp-scu-icon-button-primary-default-label-text-align-horizontal , CENTER );
  color: var( --comp-scu-icon-button-primary-default-label-color , rgba(255,255,255,1) );
  font-family: var( --comp-scu-icon-button-primary-default-label-font-family , 'Proxima Nova' );
  font-weight: var( --comp-scu-icon-button-primary-default-label-font-weight , 700 );
  line-height: var( --comp-scu-icon-button-primary-default-label-line-height , 18.75px );
  letter-spacing: var( --comp-scu-icon-button-primary-default-label-letter-spacing , 0px ); 
}

@mixin comp-scu-icon-button-primary-default-label--sizing {
  width: 35px;
  height: 19px;
}

@mixin comp-scu-icon-button-primary-default-label--width {
  width: 35px;
}

@mixin comp-scu-icon-button-primary-default-label--height {
  height: 19px;
}

@mixin comp-scu-icon-button-primary-default-label--absolute-layout {
   
}

@mixin comp-scu-icon-button-primary-default-label--html-autolayout {
  display: inline-block;
  margin-left: var( --comp-scu-icon-button-primary-default-label-left , 56px );
  margin-right: var( --comp-scu-icon-button-primary-default-label-right , 24px );
  margin-top: var( --comp-scu-icon-button-primary-default-label-top , 10.5px );
  margin-bottom: var( --comp-scu-icon-button-primary-default-label-bottom , 10.5px );
  width: calc( 100% - ( var( --comp-scu-icon-button-primary-default-label-left , 56px ) + var( --comp-scu-icon-button-primary-default-label-right , 24px ) ) );
}

// ================================
// [COMPONENT_TOKEN] comp-scu-icon-button-primary-hover

@mixin comp-scu-icon-button-primary-hover { 
  position: relative;
  background-color: var( --comp-scu-icon-button-primary-hover-background-color , rgba(42,73,1,1) );
  border-radius: var( --comp-scu-icon-button-primary-hover-corner-radius , 200px ); 
}

@mixin comp-scu-icon-button-primary-hover--sizing {
  width: 113px;
  height: 37px;
}

@mixin comp-scu-icon-button-primary-hover--width {
  width: 113px;
}

@mixin comp-scu-icon-button-primary-hover--height {
  height: 37px;
}

@mixin comp-scu-icon-button-primary-hover--figma-autolayout { 
  display: flex;
  flex-flow: row nowrap;
  padding-left: var( --comp-scu-icon-button-primary-hover-padding-left , 24px );
  padding-right: var( --comp-scu-icon-button-primary-hover-padding-right , 24px );
  padding-top: var( --comp-scu-icon-button-primary-hover-padding-top , 8px );
  padding-bottom: var( --comp-scu-icon-button-primary-hover-padding-bottom , 8px );
  & > *:not(:last-child) { margin-right: var( --comp-scu-icon-button-primary-hover-item-spacing , 8px ); } 
}

@mixin comp-scu-icon-button-primary-hover--absolute-layout {
  position: absolute;
  left: var( --comp-scu-icon-button-primary-hover-left , 0px );
  right: var( --comp-scu-icon-button-primary-hover-right , 0px );
  top: var( --comp-scu-icon-button-primary-hover-top , 0px );
  bottom: var( --comp-scu-icon-button-primary-hover-bottom , 0px ); 
}

@mixin comp-scu-icon-button-primary-hover--html-autolayout {
  display: inline-block;
  margin-left: var( --comp-scu-icon-button-primary-hover-left , 0px );
  margin-right: var( --comp-scu-icon-button-primary-hover-right , 0px );
  margin-top: var( --comp-scu-icon-button-primary-hover-top , 0px );
  margin-bottom: var( --comp-scu-icon-button-primary-hover-bottom , 0px );
  width: calc( 100% - ( var( --comp-scu-icon-button-primary-hover-left , 0px ) + var( --comp-scu-icon-button-primary-hover-right , 0px ) ) );
}

// ================================
// [COMPONENT_TOKEN] comp-scu-icon-button-primary-hover-icon

@mixin comp-scu-icon-button-primary-hover-icon { 
  position: relative;
  background-color: var( --comp-scu-icon-button-primary-hover-icon-background-color , rgba(255,255,255,1) ); 
}

@mixin comp-scu-icon-button-primary-hover-icon--sizing {
  width: 24px;
  height: 24px;
}

@mixin comp-scu-icon-button-primary-hover-icon--width {
  width: 24px;
}

@mixin comp-scu-icon-button-primary-hover-icon--height {
  height: 24px;
}

@mixin comp-scu-icon-button-primary-hover-icon--figma-autolayout { 
   
}

@mixin comp-scu-icon-button-primary-hover-icon--absolute-layout {
   
}

@mixin comp-scu-icon-button-primary-hover-icon--html-autolayout {
  display: inline-block;
  margin-left: var( --comp-scu-icon-button-primary-hover-icon-left , 24px );
  margin-right: var( --comp-scu-icon-button-primary-hover-icon-right , 65px );
  margin-top: var( --comp-scu-icon-button-primary-hover-icon-top , 8px );
  margin-bottom: var( --comp-scu-icon-button-primary-hover-icon-bottom , 5px );
  width: calc( 100% - ( var( --comp-scu-icon-button-primary-hover-icon-left , 24px ) + var( --comp-scu-icon-button-primary-hover-icon-right , 65px ) ) );
}

// ================================
// [TEXT_TOKEN] comp-scu-icon-button-primary-hover-label

@mixin comp-scu-icon-button-primary-hover-label { 
  position: relative;
  font-size: var( --comp-scu-icon-button-primary-hover-label-font-size , 16px );
  text-align: var( --comp-scu-icon-button-primary-hover-label-text-align-horizontal , CENTER );
  color: var( --comp-scu-icon-button-primary-hover-label-color , rgba(255,255,255,1) );
  font-family: var( --comp-scu-icon-button-primary-hover-label-font-family , 'Proxima Nova' );
  font-weight: var( --comp-scu-icon-button-primary-hover-label-font-weight , 700 );
  line-height: var( --comp-scu-icon-button-primary-hover-label-line-height , 18.75px );
  letter-spacing: var( --comp-scu-icon-button-primary-hover-label-letter-spacing , 0px ); 
}

@mixin comp-scu-icon-button-primary-hover-label--sizing {
  width: 35px;
  height: 19px;
}

@mixin comp-scu-icon-button-primary-hover-label--width {
  width: 35px;
}

@mixin comp-scu-icon-button-primary-hover-label--height {
  height: 19px;
}

@mixin comp-scu-icon-button-primary-hover-label--absolute-layout {
   
}

@mixin comp-scu-icon-button-primary-hover-label--html-autolayout {
  display: inline-block;
  margin-left: var( --comp-scu-icon-button-primary-hover-label-left , 55px );
  margin-right: var( --comp-scu-icon-button-primary-hover-label-right , 23px );
  margin-top: var( --comp-scu-icon-button-primary-hover-label-top , 11px );
  margin-bottom: var( --comp-scu-icon-button-primary-hover-label-bottom , 7px );
  width: calc( 100% - ( var( --comp-scu-icon-button-primary-hover-label-left , 55px ) + var( --comp-scu-icon-button-primary-hover-label-right , 23px ) ) );
}

// ================================
// [COMPONENT_TOKEN] comp-scu-icon-button-primary-focus

@mixin comp-scu-icon-button-primary-focus { 
  position: relative;
  background-color: var( --comp-scu-icon-button-primary-focus-background-color , rgba(126,182,51,1) );
  border-radius: var( --comp-scu-icon-button-primary-focus-corner-radius , 200px );
  box-shadow: var( --comp-scu-icon-button-primary-focus-shadow , 0px 0px 0px 2px rgba(53,155,249,1) ); 
}

@mixin comp-scu-icon-button-primary-focus--sizing {
  width: 113px;
  height: 37px;
}

@mixin comp-scu-icon-button-primary-focus--width {
  width: 113px;
}

@mixin comp-scu-icon-button-primary-focus--height {
  height: 37px;
}

@mixin comp-scu-icon-button-primary-focus--figma-autolayout { 
  display: flex;
  flex-flow: row nowrap;
  padding-left: var( --comp-scu-icon-button-primary-focus-padding-left , 24px );
  padding-right: var( --comp-scu-icon-button-primary-focus-padding-right , 24px );
  padding-top: var( --comp-scu-icon-button-primary-focus-padding-top , 8px );
  padding-bottom: var( --comp-scu-icon-button-primary-focus-padding-bottom , 8px );
  & > *:not(:last-child) { margin-right: var( --comp-scu-icon-button-primary-focus-item-spacing , 8px ); } 
}

@mixin comp-scu-icon-button-primary-focus--absolute-layout {
  position: absolute;
  left: var( --comp-scu-icon-button-primary-focus-left , 0px );
  right: var( --comp-scu-icon-button-primary-focus-right , 0px );
  top: var( --comp-scu-icon-button-primary-focus-top , 0px );
  bottom: var( --comp-scu-icon-button-primary-focus-bottom , 0px ); 
}

@mixin comp-scu-icon-button-primary-focus--html-autolayout {
  display: inline-block;
  margin-left: var( --comp-scu-icon-button-primary-focus-left , 0px );
  margin-right: var( --comp-scu-icon-button-primary-focus-right , 0px );
  margin-top: var( --comp-scu-icon-button-primary-focus-top , 0px );
  margin-bottom: var( --comp-scu-icon-button-primary-focus-bottom , 0px );
  width: calc( 100% - ( var( --comp-scu-icon-button-primary-focus-left , 0px ) + var( --comp-scu-icon-button-primary-focus-right , 0px ) ) );
}

// ================================
// [COMPONENT_TOKEN] comp-scu-icon-button-primary-focus-icon

@mixin comp-scu-icon-button-primary-focus-icon { 
  position: relative;
  background-color: var( --comp-scu-icon-button-primary-focus-icon-background-color , rgba(255,255,255,1) ); 
}

@mixin comp-scu-icon-button-primary-focus-icon--sizing {
  width: 24px;
  height: 24px;
}

@mixin comp-scu-icon-button-primary-focus-icon--width {
  width: 24px;
}

@mixin comp-scu-icon-button-primary-focus-icon--height {
  height: 24px;
}

@mixin comp-scu-icon-button-primary-focus-icon--figma-autolayout { 
   
}

@mixin comp-scu-icon-button-primary-focus-icon--absolute-layout {
   
}

@mixin comp-scu-icon-button-primary-focus-icon--html-autolayout {
  display: inline-block;
  margin-left: var( --comp-scu-icon-button-primary-focus-icon-left , 24px );
  margin-right: var( --comp-scu-icon-button-primary-focus-icon-right , 65px );
  margin-top: var( --comp-scu-icon-button-primary-focus-icon-top , 8px );
  margin-bottom: var( --comp-scu-icon-button-primary-focus-icon-bottom , 5px );
  width: calc( 100% - ( var( --comp-scu-icon-button-primary-focus-icon-left , 24px ) + var( --comp-scu-icon-button-primary-focus-icon-right , 65px ) ) );
}

// ================================
// [TEXT_TOKEN] comp-scu-icon-button-primary-focus-label

@mixin comp-scu-icon-button-primary-focus-label { 
  position: relative;
  font-size: var( --comp-scu-icon-button-primary-focus-label-font-size , 16px );
  text-align: var( --comp-scu-icon-button-primary-focus-label-text-align-horizontal , CENTER );
  color: var( --comp-scu-icon-button-primary-focus-label-color , rgba(255,255,255,1) );
  font-family: var( --comp-scu-icon-button-primary-focus-label-font-family , 'Proxima Nova' );
  font-weight: var( --comp-scu-icon-button-primary-focus-label-font-weight , 700 );
  line-height: var( --comp-scu-icon-button-primary-focus-label-line-height , 18.75px );
  letter-spacing: var( --comp-scu-icon-button-primary-focus-label-letter-spacing , 0px ); 
}

@mixin comp-scu-icon-button-primary-focus-label--sizing {
  width: 35px;
  height: 19px;
}

@mixin comp-scu-icon-button-primary-focus-label--width {
  width: 35px;
}

@mixin comp-scu-icon-button-primary-focus-label--height {
  height: 19px;
}

@mixin comp-scu-icon-button-primary-focus-label--absolute-layout {
   
}

@mixin comp-scu-icon-button-primary-focus-label--html-autolayout {
  display: inline-block;
  margin-left: var( --comp-scu-icon-button-primary-focus-label-left , 55px );
  margin-right: var( --comp-scu-icon-button-primary-focus-label-right , 23px );
  margin-top: var( --comp-scu-icon-button-primary-focus-label-top , 11px );
  margin-bottom: var( --comp-scu-icon-button-primary-focus-label-bottom , 7px );
  width: calc( 100% - ( var( --comp-scu-icon-button-primary-focus-label-left , 55px ) + var( --comp-scu-icon-button-primary-focus-label-right , 23px ) ) );
}

// ================================
// [COMPONENT_TOKEN] comp-scu-icon-button-primary-disabled

@mixin comp-scu-icon-button-primary-disabled { 
  position: relative;
  background-color: var( --comp-scu-icon-button-primary-disabled-background-color , rgba(126,182,51,1) );
  border-radius: var( --comp-scu-icon-button-primary-disabled-corner-radius , 200px ); 
}

@mixin comp-scu-icon-button-primary-disabled--sizing {
  width: 113px;
  height: 40px;
}

@mixin comp-scu-icon-button-primary-disabled--width {
  width: 113px;
}

@mixin comp-scu-icon-button-primary-disabled--height {
  height: 40px;
}

@mixin comp-scu-icon-button-primary-disabled--figma-autolayout { 
  display: flex;
  flex-flow: row nowrap;
  padding-left: var( --comp-scu-icon-button-primary-disabled-padding-left , 24px );
  padding-right: var( --comp-scu-icon-button-primary-disabled-padding-right , 24px );
  padding-top: var( --comp-scu-icon-button-primary-disabled-padding-top , 8px );
  padding-bottom: var( --comp-scu-icon-button-primary-disabled-padding-bottom , 8px );
  & > *:not(:last-child) { margin-right: var( --comp-scu-icon-button-primary-disabled-item-spacing , 8px ); } 
}

@mixin comp-scu-icon-button-primary-disabled--absolute-layout {
  position: absolute;
  right: var( --comp-scu-icon-button-primary-disabled-left , 0px );
  width: var( --comp-scu-icon-button-primary-disabled-width , 113px );
  bottom: var( --comp-scu-icon-button-primary-disabled-bottom , 0px );
  height: var( --comp-scu-icon-button-primary-disabled-height , 40px ); 
}

@mixin comp-scu-icon-button-primary-disabled--html-autolayout {
  display: inline-block;
  margin-left: var( --comp-scu-icon-button-primary-disabled-left , 0px );
  margin-right: var( --comp-scu-icon-button-primary-disabled-right , 0px );
  margin-top: var( --comp-scu-icon-button-primary-disabled-top , -3px );
  margin-bottom: var( --comp-scu-icon-button-primary-disabled-bottom , 0px );
  width: calc( 100% - ( var( --comp-scu-icon-button-primary-disabled-left , 0px ) + var( --comp-scu-icon-button-primary-disabled-right , 0px ) ) );
}

// ================================
// [COMPONENT_TOKEN] comp-scu-icon-button-primary-disabled-icon

@mixin comp-scu-icon-button-primary-disabled-icon { 
  position: relative;
  background-color: var( --comp-scu-icon-button-primary-disabled-icon-background-color , rgba(255,255,255,1) ); 
}

@mixin comp-scu-icon-button-primary-disabled-icon--sizing {
  width: 24px;
  height: 24px;
}

@mixin comp-scu-icon-button-primary-disabled-icon--width {
  width: 24px;
}

@mixin comp-scu-icon-button-primary-disabled-icon--height {
  height: 24px;
}

@mixin comp-scu-icon-button-primary-disabled-icon--figma-autolayout { 
   
}

@mixin comp-scu-icon-button-primary-disabled-icon--absolute-layout {
   
}

@mixin comp-scu-icon-button-primary-disabled-icon--html-autolayout {
  display: inline-block;
  margin-left: var( --comp-scu-icon-button-primary-disabled-icon-left , 24px );
  margin-right: var( --comp-scu-icon-button-primary-disabled-icon-right , 65px );
  margin-top: var( --comp-scu-icon-button-primary-disabled-icon-top , 8px );
  margin-bottom: var( --comp-scu-icon-button-primary-disabled-icon-bottom , 8px );
  width: calc( 100% - ( var( --comp-scu-icon-button-primary-disabled-icon-left , 24px ) + var( --comp-scu-icon-button-primary-disabled-icon-right , 65px ) ) );
}

// ================================
// [TEXT_TOKEN] comp-scu-icon-button-primary-disabled-label

@mixin comp-scu-icon-button-primary-disabled-label { 
  position: relative;
  font-size: var( --comp-scu-icon-button-primary-disabled-label-font-size , 16px );
  text-align: var( --comp-scu-icon-button-primary-disabled-label-text-align-horizontal , CENTER );
  color: var( --comp-scu-icon-button-primary-disabled-label-color , rgba(180,216,133,1) );
  font-family: var( --comp-scu-icon-button-primary-disabled-label-font-family , 'Proxima Nova' );
  font-weight: var( --comp-scu-icon-button-primary-disabled-label-font-weight , 700 );
  line-height: var( --comp-scu-icon-button-primary-disabled-label-line-height , 18.75px );
  letter-spacing: var( --comp-scu-icon-button-primary-disabled-label-letter-spacing , 0px ); 
}

@mixin comp-scu-icon-button-primary-disabled-label--sizing {
  width: 35px;
  height: 19px;
}

@mixin comp-scu-icon-button-primary-disabled-label--width {
  width: 35px;
}

@mixin comp-scu-icon-button-primary-disabled-label--height {
  height: 19px;
}

@mixin comp-scu-icon-button-primary-disabled-label--absolute-layout {
   
}

@mixin comp-scu-icon-button-primary-disabled-label--html-autolayout {
  display: inline-block;
  margin-left: var( --comp-scu-icon-button-primary-disabled-label-left , 55px );
  margin-right: var( --comp-scu-icon-button-primary-disabled-label-right , 23px );
  margin-top: var( --comp-scu-icon-button-primary-disabled-label-top , 11px );
  margin-bottom: var( --comp-scu-icon-button-primary-disabled-label-bottom , 10px );
  width: calc( 100% - ( var( --comp-scu-icon-button-primary-disabled-label-left , 55px ) + var( --comp-scu-icon-button-primary-disabled-label-right , 23px ) ) );
}

// ================================
// [COMPONENT_TOKEN] comp-scu-icon-button-outline

@mixin comp-scu-icon-button-outline { 
  position: relative; 
}

@mixin comp-scu-icon-button-outline--sizing {
  width: 116px;
  height: 37px;
}

@mixin comp-scu-icon-button-outline--width {
  width: 116px;
}

@mixin comp-scu-icon-button-outline--height {
  height: 37px;
}

@mixin comp-scu-icon-button-outline--figma-autolayout { 
   
}

@mixin comp-scu-icon-button-outline--absolute-layout {
   
}

@mixin comp-scu-icon-button-outline--html-autolayout {
  display: inline-block;
  margin-left: var( --comp-scu-icon-button-outline-left , 0px );
  margin-right: var( --comp-scu-icon-button-outline-right , 0px );
  margin-top: var( --comp-scu-icon-button-outline-top , 0px );
  margin-bottom: var( --comp-scu-icon-button-outline-bottom , 0px );
  width: calc( 100% - ( var( --comp-scu-icon-button-outline-left , 0px ) + var( --comp-scu-icon-button-outline-right , 0px ) ) );
}

// ================================
// [COMPONENT_TOKEN] comp-scu-icon-button-outline-default

@mixin comp-scu-icon-button-outline-default { 
  position: relative;
  background-color: var( --comp-scu-icon-button-outline-default-background-color , rgba(255,255,255,1) );
  border-radius: var( --comp-scu-icon-button-outline-default-corner-radius , 200px );
  border-width: var( --comp-scu-icon-button-outline-default-stroke-weight , 1px );
  border-style: solid;
  border-color: var( --comp-scu-icon-button-outline-default-stroke-color , rgba(99,166,10,1) ); 
}

@mixin comp-scu-icon-button-outline-default--sizing {
  width: 114px;
  height: 40px;
}

@mixin comp-scu-icon-button-outline-default--width {
  width: 114px;
}

@mixin comp-scu-icon-button-outline-default--height {
  height: 40px;
}

@mixin comp-scu-icon-button-outline-default--figma-autolayout { 
  display: flex;
  flex-flow: row nowrap;
  padding-left: var( --comp-scu-icon-button-outline-default-padding-left , 24px );
  padding-right: var( --comp-scu-icon-button-outline-default-padding-right , 24px );
  padding-top: var( --comp-scu-icon-button-outline-default-padding-top , 8px );
  padding-bottom: var( --comp-scu-icon-button-outline-default-padding-bottom , 8px );
  & > *:not(:last-child) { margin-right: var( --comp-scu-icon-button-outline-default-item-spacing , 8px ); } 
}

@mixin comp-scu-icon-button-outline-default--absolute-layout {
  position: absolute;
  left: var( --comp-scu-icon-button-outline-default-left , 1px );
  right: var( --comp-scu-icon-button-outline-default-right , 1px );
  top: var( --comp-scu-icon-button-outline-default-top , -1.5px );
  bottom: var( --comp-scu-icon-button-outline-default-bottom , -1.5px ); 
}

@mixin comp-scu-icon-button-outline-default--html-autolayout {
  display: inline-block;
  margin-left: var( --comp-scu-icon-button-outline-default-left , 1px );
  margin-right: var( --comp-scu-icon-button-outline-default-right , 1px );
  margin-top: var( --comp-scu-icon-button-outline-default-top , -1.5px );
  margin-bottom: var( --comp-scu-icon-button-outline-default-bottom , -1.5px );
  width: calc( 100% - ( var( --comp-scu-icon-button-outline-default-left , 1px ) + var( --comp-scu-icon-button-outline-default-right , 1px ) ) );
}

// ================================
// [COMPONENT_TOKEN] comp-scu-icon-button-outline-default-icon

@mixin comp-scu-icon-button-outline-default-icon { 
  position: relative;
  background-color: var( --comp-scu-icon-button-outline-default-icon-background-color , rgba(255,255,255,1) ); 
}

@mixin comp-scu-icon-button-outline-default-icon--sizing {
  width: 24px;
  height: 24px;
}

@mixin comp-scu-icon-button-outline-default-icon--width {
  width: 24px;
}

@mixin comp-scu-icon-button-outline-default-icon--height {
  height: 24px;
}

@mixin comp-scu-icon-button-outline-default-icon--figma-autolayout { 
   
}

@mixin comp-scu-icon-button-outline-default-icon--absolute-layout {
   
}

@mixin comp-scu-icon-button-outline-default-icon--html-autolayout {
  display: inline-block;
  margin-left: var( --comp-scu-icon-button-outline-default-icon-left , 24px );
  margin-right: var( --comp-scu-icon-button-outline-default-icon-right , 66px );
  margin-top: var( --comp-scu-icon-button-outline-default-icon-top , 8px );
  margin-bottom: var( --comp-scu-icon-button-outline-default-icon-bottom , 8px );
  width: calc( 100% - ( var( --comp-scu-icon-button-outline-default-icon-left , 24px ) + var( --comp-scu-icon-button-outline-default-icon-right , 66px ) ) );
}

// ================================
// [TEXT_TOKEN] comp-scu-icon-button-outline-default-label

@mixin comp-scu-icon-button-outline-default-label { 
  position: relative;
  font-size: var( --comp-scu-icon-button-outline-default-label-font-size , 16px );
  text-align: var( --comp-scu-icon-button-outline-default-label-text-align-horizontal , CENTER );
  color: var( --comp-scu-icon-button-outline-default-label-color , rgba(86,144,8,1) );
  font-family: var( --comp-scu-icon-button-outline-default-label-font-family , 'Proxima Nova' );
  font-weight: var( --comp-scu-icon-button-outline-default-label-font-weight , 400 );
  line-height: var( --comp-scu-icon-button-outline-default-label-line-height , 18.75px );
  letter-spacing: var( --comp-scu-icon-button-outline-default-label-letter-spacing , 0px ); 
}

@mixin comp-scu-icon-button-outline-default-label--sizing {
  width: 34px;
  height: 19px;
}

@mixin comp-scu-icon-button-outline-default-label--width {
  width: 34px;
}

@mixin comp-scu-icon-button-outline-default-label--height {
  height: 19px;
}

@mixin comp-scu-icon-button-outline-default-label--absolute-layout {
   
}

@mixin comp-scu-icon-button-outline-default-label--html-autolayout {
  display: inline-block;
  margin-left: var( --comp-scu-icon-button-outline-default-label-left , 56px );
  margin-right: var( --comp-scu-icon-button-outline-default-label-right , 24px );
  margin-top: var( --comp-scu-icon-button-outline-default-label-top , 10.5px );
  margin-bottom: var( --comp-scu-icon-button-outline-default-label-bottom , 10.5px );
  width: calc( 100% - ( var( --comp-scu-icon-button-outline-default-label-left , 56px ) + var( --comp-scu-icon-button-outline-default-label-right , 24px ) ) );
}

// ================================
// [COMPONENT_TOKEN] comp-scu-icon-button-outline-hover

@mixin comp-scu-icon-button-outline-hover { 
  position: relative;
  background-color: var( --comp-scu-icon-button-outline-hover-background-color , rgba(251,255,246,1) );
  border-radius: var( --comp-scu-icon-button-outline-hover-corner-radius , 200px );
  border-width: var( --comp-scu-icon-button-outline-hover-stroke-weight , 1px );
  border-style: solid;
  border-color: var( --comp-scu-icon-button-outline-hover-stroke-color , rgba(99,166,10,1) ); 
}

@mixin comp-scu-icon-button-outline-hover--sizing {
  width: 116px;
  height: 37px;
}

@mixin comp-scu-icon-button-outline-hover--width {
  width: 116px;
}

@mixin comp-scu-icon-button-outline-hover--height {
  height: 37px;
}

@mixin comp-scu-icon-button-outline-hover--figma-autolayout { 
  display: flex;
  flex-flow: row nowrap;
  padding-left: var( --comp-scu-icon-button-outline-hover-padding-left , 24px );
  padding-right: var( --comp-scu-icon-button-outline-hover-padding-right , 24px );
  padding-top: var( --comp-scu-icon-button-outline-hover-padding-top , 8px );
  padding-bottom: var( --comp-scu-icon-button-outline-hover-padding-bottom , 8px );
  & > *:not(:last-child) { margin-right: var( --comp-scu-icon-button-outline-hover-item-spacing , 8px ); } 
}

@mixin comp-scu-icon-button-outline-hover--absolute-layout {
  position: absolute;
  left: var( --comp-scu-icon-button-outline-hover-left , 0px );
  right: var( --comp-scu-icon-button-outline-hover-right , 0px );
  top: var( --comp-scu-icon-button-outline-hover-top , 0px );
  bottom: var( --comp-scu-icon-button-outline-hover-bottom , 0px ); 
}

@mixin comp-scu-icon-button-outline-hover--html-autolayout {
  display: inline-block;
  margin-left: var( --comp-scu-icon-button-outline-hover-left , 0px );
  margin-right: var( --comp-scu-icon-button-outline-hover-right , 0px );
  margin-top: var( --comp-scu-icon-button-outline-hover-top , 0px );
  margin-bottom: var( --comp-scu-icon-button-outline-hover-bottom , 0px );
  width: calc( 100% - ( var( --comp-scu-icon-button-outline-hover-left , 0px ) + var( --comp-scu-icon-button-outline-hover-right , 0px ) ) );
}

// ================================
// [COMPONENT_TOKEN] comp-scu-icon-button-outline-hover-icon

@mixin comp-scu-icon-button-outline-hover-icon { 
  position: relative;
  background-color: var( --comp-scu-icon-button-outline-hover-icon-background-color , rgba(255,255,255,1) ); 
}

@mixin comp-scu-icon-button-outline-hover-icon--sizing {
  width: 24px;
  height: 24px;
}

@mixin comp-scu-icon-button-outline-hover-icon--width {
  width: 24px;
}

@mixin comp-scu-icon-button-outline-hover-icon--height {
  height: 24px;
}

@mixin comp-scu-icon-button-outline-hover-icon--figma-autolayout { 
   
}

@mixin comp-scu-icon-button-outline-hover-icon--absolute-layout {
   
}

@mixin comp-scu-icon-button-outline-hover-icon--html-autolayout {
  display: inline-block;
  margin-left: var( --comp-scu-icon-button-outline-hover-icon-left , 24px );
  margin-right: var( --comp-scu-icon-button-outline-hover-icon-right , 68px );
  margin-top: var( --comp-scu-icon-button-outline-hover-icon-top , 8px );
  margin-bottom: var( --comp-scu-icon-button-outline-hover-icon-bottom , 5px );
  width: calc( 100% - ( var( --comp-scu-icon-button-outline-hover-icon-left , 24px ) + var( --comp-scu-icon-button-outline-hover-icon-right , 68px ) ) );
}

// ================================
// [TEXT_TOKEN] comp-scu-icon-button-outline-hover-label

@mixin comp-scu-icon-button-outline-hover-label { 
  position: relative;
  font-size: var( --comp-scu-icon-button-outline-hover-label-font-size , 16px );
  text-align: var( --comp-scu-icon-button-outline-hover-label-text-align-horizontal , CENTER );
  color: var( --comp-scu-icon-button-outline-hover-label-color , rgba(86,144,8,1) );
  font-family: var( --comp-scu-icon-button-outline-hover-label-font-family , 'Proxima Nova' );
  font-weight: var( --comp-scu-icon-button-outline-hover-label-font-weight , 400 );
  line-height: var( --comp-scu-icon-button-outline-hover-label-line-height , 18.75px );
  letter-spacing: var( --comp-scu-icon-button-outline-hover-label-letter-spacing , 0px ); 
}

@mixin comp-scu-icon-button-outline-hover-label--sizing {
  width: 34px;
  height: 19px;
}

@mixin comp-scu-icon-button-outline-hover-label--width {
  width: 34px;
}

@mixin comp-scu-icon-button-outline-hover-label--height {
  height: 19px;
}

@mixin comp-scu-icon-button-outline-hover-label--absolute-layout {
   
}

@mixin comp-scu-icon-button-outline-hover-label--html-autolayout {
  display: inline-block;
  margin-left: var( --comp-scu-icon-button-outline-hover-label-left , 55px );
  margin-right: var( --comp-scu-icon-button-outline-hover-label-right , 27px );
  margin-top: var( --comp-scu-icon-button-outline-hover-label-top , 11px );
  margin-bottom: var( --comp-scu-icon-button-outline-hover-label-bottom , 7px );
  width: calc( 100% - ( var( --comp-scu-icon-button-outline-hover-label-left , 55px ) + var( --comp-scu-icon-button-outline-hover-label-right , 27px ) ) );
}

// ================================
// [COMPONENT_TOKEN] comp-scu-icon-button-outline-focus

@mixin comp-scu-icon-button-outline-focus { 
  position: relative;
  background-color: var( --comp-scu-icon-button-outline-focus-background-color , rgba(255,255,255,1) );
  border-radius: var( --comp-scu-icon-button-outline-focus-corner-radius , 200px );
  box-shadow: var( --comp-scu-icon-button-outline-focus-shadow , 0px 0px 0px 2px rgba(53,155,249,1) ); 
}

@mixin comp-scu-icon-button-outline-focus--sizing {
  width: 116px;
  height: 37px;
}

@mixin comp-scu-icon-button-outline-focus--width {
  width: 116px;
}

@mixin comp-scu-icon-button-outline-focus--height {
  height: 37px;
}

@mixin comp-scu-icon-button-outline-focus--figma-autolayout { 
  display: flex;
  flex-flow: row nowrap;
  padding-left: var( --comp-scu-icon-button-outline-focus-padding-left , 24px );
  padding-right: var( --comp-scu-icon-button-outline-focus-padding-right , 24px );
  padding-top: var( --comp-scu-icon-button-outline-focus-padding-top , 8px );
  padding-bottom: var( --comp-scu-icon-button-outline-focus-padding-bottom , 8px );
  & > *:not(:last-child) { margin-right: var( --comp-scu-icon-button-outline-focus-item-spacing , 8px ); } 
}

@mixin comp-scu-icon-button-outline-focus--absolute-layout {
  position: absolute;
  left: var( --comp-scu-icon-button-outline-focus-left , 0px );
  right: var( --comp-scu-icon-button-outline-focus-right , 0px );
  top: var( --comp-scu-icon-button-outline-focus-top , 0px );
  bottom: var( --comp-scu-icon-button-outline-focus-bottom , 0px ); 
}

@mixin comp-scu-icon-button-outline-focus--html-autolayout {
  display: inline-block;
  margin-left: var( --comp-scu-icon-button-outline-focus-left , 0px );
  margin-right: var( --comp-scu-icon-button-outline-focus-right , 0px );
  margin-top: var( --comp-scu-icon-button-outline-focus-top , 0px );
  margin-bottom: var( --comp-scu-icon-button-outline-focus-bottom , 0px );
  width: calc( 100% - ( var( --comp-scu-icon-button-outline-focus-left , 0px ) + var( --comp-scu-icon-button-outline-focus-right , 0px ) ) );
}

// ================================
// [COMPONENT_TOKEN] comp-scu-icon-button-outline-focus-icon

@mixin comp-scu-icon-button-outline-focus-icon { 
  position: relative;
  background-color: var( --comp-scu-icon-button-outline-focus-icon-background-color , rgba(255,255,255,1) ); 
}

@mixin comp-scu-icon-button-outline-focus-icon--sizing {
  width: 24px;
  height: 24px;
}

@mixin comp-scu-icon-button-outline-focus-icon--width {
  width: 24px;
}

@mixin comp-scu-icon-button-outline-focus-icon--height {
  height: 24px;
}

@mixin comp-scu-icon-button-outline-focus-icon--figma-autolayout { 
   
}

@mixin comp-scu-icon-button-outline-focus-icon--absolute-layout {
   
}

@mixin comp-scu-icon-button-outline-focus-icon--html-autolayout {
  display: inline-block;
  margin-left: var( --comp-scu-icon-button-outline-focus-icon-left , 24px );
  margin-right: var( --comp-scu-icon-button-outline-focus-icon-right , 68px );
  margin-top: var( --comp-scu-icon-button-outline-focus-icon-top , 8px );
  margin-bottom: var( --comp-scu-icon-button-outline-focus-icon-bottom , 5px );
  width: calc( 100% - ( var( --comp-scu-icon-button-outline-focus-icon-left , 24px ) + var( --comp-scu-icon-button-outline-focus-icon-right , 68px ) ) );
}

// ================================
// [TEXT_TOKEN] comp-scu-icon-button-outline-focus-label

@mixin comp-scu-icon-button-outline-focus-label { 
  position: relative;
  font-size: var( --comp-scu-icon-button-outline-focus-label-font-size , 16px );
  text-align: var( --comp-scu-icon-button-outline-focus-label-text-align-horizontal , CENTER );
  color: var( --comp-scu-icon-button-outline-focus-label-color , rgba(86,144,8,1) );
  font-family: var( --comp-scu-icon-button-outline-focus-label-font-family , 'Proxima Nova' );
  font-weight: var( --comp-scu-icon-button-outline-focus-label-font-weight , 400 );
  line-height: var( --comp-scu-icon-button-outline-focus-label-line-height , 18.75px );
  letter-spacing: var( --comp-scu-icon-button-outline-focus-label-letter-spacing , 0px ); 
}

@mixin comp-scu-icon-button-outline-focus-label--sizing {
  width: 34px;
  height: 19px;
}

@mixin comp-scu-icon-button-outline-focus-label--width {
  width: 34px;
}

@mixin comp-scu-icon-button-outline-focus-label--height {
  height: 19px;
}

@mixin comp-scu-icon-button-outline-focus-label--absolute-layout {
   
}

@mixin comp-scu-icon-button-outline-focus-label--html-autolayout {
  display: inline-block;
  margin-left: var( --comp-scu-icon-button-outline-focus-label-left , 55px );
  margin-right: var( --comp-scu-icon-button-outline-focus-label-right , 27px );
  margin-top: var( --comp-scu-icon-button-outline-focus-label-top , 11px );
  margin-bottom: var( --comp-scu-icon-button-outline-focus-label-bottom , 7px );
  width: calc( 100% - ( var( --comp-scu-icon-button-outline-focus-label-left , 55px ) + var( --comp-scu-icon-button-outline-focus-label-right , 27px ) ) );
}

// ================================
// [COMPONENT_TOKEN] comp-scu-icon-button-outline-disabled

@mixin comp-scu-icon-button-outline-disabled { 
  position: relative;
  background-color: var( --comp-scu-icon-button-outline-disabled-background-color , rgba(255,255,255,1) );
  border-radius: var( --comp-scu-icon-button-outline-disabled-corner-radius , 200px );
  border-width: var( --comp-scu-icon-button-outline-disabled-stroke-weight , 1px );
  border-style: solid;
  border-color: var( --comp-scu-icon-button-outline-disabled-stroke-color , rgba(187,218,146,1) ); 
}

@mixin comp-scu-icon-button-outline-disabled--sizing {
  width: 112px;
  height: 40px;
}

@mixin comp-scu-icon-button-outline-disabled--width {
  width: 112px;
}

@mixin comp-scu-icon-button-outline-disabled--height {
  height: 40px;
}

@mixin comp-scu-icon-button-outline-disabled--figma-autolayout { 
  display: flex;
  flex-flow: row nowrap;
  padding-left: var( --comp-scu-icon-button-outline-disabled-padding-left , 24px );
  padding-right: var( --comp-scu-icon-button-outline-disabled-padding-right , 24px );
  padding-top: var( --comp-scu-icon-button-outline-disabled-padding-top , 8px );
  padding-bottom: var( --comp-scu-icon-button-outline-disabled-padding-bottom , 8px );
  & > *:not(:last-child) { margin-right: var( --comp-scu-icon-button-outline-disabled-item-spacing , 8px ); } 
}

@mixin comp-scu-icon-button-outline-disabled--absolute-layout {
  position: absolute;
  right: var( --comp-scu-icon-button-outline-disabled-left , 4px );
  width: var( --comp-scu-icon-button-outline-disabled-width , 112px );
  bottom: var( --comp-scu-icon-button-outline-disabled-bottom , 0px );
  height: var( --comp-scu-icon-button-outline-disabled-height , 40px ); 
}

@mixin comp-scu-icon-button-outline-disabled--html-autolayout {
  display: inline-block;
  margin-left: var( --comp-scu-icon-button-outline-disabled-left , 4px );
  margin-right: var( --comp-scu-icon-button-outline-disabled-right , 0px );
  margin-top: var( --comp-scu-icon-button-outline-disabled-top , -3px );
  margin-bottom: var( --comp-scu-icon-button-outline-disabled-bottom , 0px );
  width: calc( 100% - ( var( --comp-scu-icon-button-outline-disabled-left , 4px ) + var( --comp-scu-icon-button-outline-disabled-right , 0px ) ) );
}

// ================================
// [COMPONENT_TOKEN] comp-scu-icon-button-outline-disabled-icon

@mixin comp-scu-icon-button-outline-disabled-icon { 
  position: relative;
  background-color: var( --comp-scu-icon-button-outline-disabled-icon-background-color , rgba(255,255,255,1) ); 
}

@mixin comp-scu-icon-button-outline-disabled-icon--sizing {
  width: 24px;
  height: 24px;
}

@mixin comp-scu-icon-button-outline-disabled-icon--width {
  width: 24px;
}

@mixin comp-scu-icon-button-outline-disabled-icon--height {
  height: 24px;
}

@mixin comp-scu-icon-button-outline-disabled-icon--figma-autolayout { 
   
}

@mixin comp-scu-icon-button-outline-disabled-icon--absolute-layout {
   
}

@mixin comp-scu-icon-button-outline-disabled-icon--html-autolayout {
  display: inline-block;
  margin-left: var( --comp-scu-icon-button-outline-disabled-icon-left , 24px );
  margin-right: var( --comp-scu-icon-button-outline-disabled-icon-right , 64px );
  margin-top: var( --comp-scu-icon-button-outline-disabled-icon-top , 8px );
  margin-bottom: var( --comp-scu-icon-button-outline-disabled-icon-bottom , 8px );
  width: calc( 100% - ( var( --comp-scu-icon-button-outline-disabled-icon-left , 24px ) + var( --comp-scu-icon-button-outline-disabled-icon-right , 64px ) ) );
}

// ================================
// [TEXT_TOKEN] comp-scu-icon-button-outline-disabled-label

@mixin comp-scu-icon-button-outline-disabled-label { 
  position: relative;
  font-size: var( --comp-scu-icon-button-outline-disabled-label-font-size , 16px );
  text-align: var( --comp-scu-icon-button-outline-disabled-label-text-align-horizontal , CENTER );
  color: var( --comp-scu-icon-button-outline-disabled-label-color , rgba(201,227,166,1) );
  font-family: var( --comp-scu-icon-button-outline-disabled-label-font-family , 'Proxima Nova' );
  font-weight: var( --comp-scu-icon-button-outline-disabled-label-font-weight , 400 );
  line-height: var( --comp-scu-icon-button-outline-disabled-label-line-height , 18.75px );
  letter-spacing: var( --comp-scu-icon-button-outline-disabled-label-letter-spacing , 0px ); 
}

@mixin comp-scu-icon-button-outline-disabled-label--sizing {
  width: 34px;
  height: 19px;
}

@mixin comp-scu-icon-button-outline-disabled-label--width {
  width: 34px;
}

@mixin comp-scu-icon-button-outline-disabled-label--height {
  height: 19px;
}

@mixin comp-scu-icon-button-outline-disabled-label--absolute-layout {
   
}

@mixin comp-scu-icon-button-outline-disabled-label--html-autolayout {
  display: inline-block;
  margin-left: var( --comp-scu-icon-button-outline-disabled-label-left , 55px );
  margin-right: var( --comp-scu-icon-button-outline-disabled-label-right , 23px );
  margin-top: var( --comp-scu-icon-button-outline-disabled-label-top , 11px );
  margin-bottom: var( --comp-scu-icon-button-outline-disabled-label-bottom , 10px );
  width: calc( 100% - ( var( --comp-scu-icon-button-outline-disabled-label-left , 55px ) + var( --comp-scu-icon-button-outline-disabled-label-right , 23px ) ) );
}

// ================================
// [COMPONENT_TOKEN] comp-scu-nav-item-v

@mixin comp-scu-nav-item-v { 
  position: relative;
  background-color: var( --comp-scu-nav-item-v-background-color , rgba(255,255,255,1) ); 
}

@mixin comp-scu-nav-item-v--sizing {
  width: 246px;
  height: 40px;
}

@mixin comp-scu-nav-item-v--width {
  width: 246px;
}

@mixin comp-scu-nav-item-v--height {
  height: 40px;
}

@mixin comp-scu-nav-item-v--figma-autolayout { 
   
}

@mixin comp-scu-nav-item-v--absolute-layout {
   
}

@mixin comp-scu-nav-item-v--html-autolayout {
  display: inline-block;
  margin-left: var( --comp-scu-nav-item-v-left , 0px );
  margin-right: var( --comp-scu-nav-item-v-right , 0px );
  margin-top: var( --comp-scu-nav-item-v-top , 0px );
  margin-bottom: var( --comp-scu-nav-item-v-bottom , 0px );
  width: calc( 100% - ( var( --comp-scu-nav-item-v-left , 0px ) + var( --comp-scu-nav-item-v-right , 0px ) ) );
}

// ================================
// [COMPONENT_TOKEN] comp-scu-nav-item-v-default

@mixin comp-scu-nav-item-v-default { 
  position: relative; 
}

@mixin comp-scu-nav-item-v-default--sizing {
  width: 246px;
  height: 40px;
}

@mixin comp-scu-nav-item-v-default--width {
  width: 246px;
}

@mixin comp-scu-nav-item-v-default--height {
  height: 40px;
}

@mixin comp-scu-nav-item-v-default--figma-autolayout { 
   
}

@mixin comp-scu-nav-item-v-default--absolute-layout {
  position: absolute;
  left: var( --comp-scu-nav-item-v-default-left , 0px );
  right: var( --comp-scu-nav-item-v-default-right , 0px );
  top: var( --comp-scu-nav-item-v-default-top , 0px );
  bottom: var( --comp-scu-nav-item-v-default-bottom , 0px ); 
}

@mixin comp-scu-nav-item-v-default--html-autolayout {
  display: inline-block;
  margin-left: var( --comp-scu-nav-item-v-default-left , 0px );
  margin-right: var( --comp-scu-nav-item-v-default-right , 0px );
  margin-top: var( --comp-scu-nav-item-v-default-top , 0px );
  margin-bottom: var( --comp-scu-nav-item-v-default-bottom , 0px );
  width: calc( 100% - ( var( --comp-scu-nav-item-v-default-left , 0px ) + var( --comp-scu-nav-item-v-default-right , 0px ) ) );
}

// ================================
// [TEXT_TOKEN] comp-scu-nav-item-v-default-label

@mixin comp-scu-nav-item-v-default-label { 
  position: relative;
  font-size: var( --comp-scu-nav-item-v-default-label-font-size , 15px );
  text-align: var( --comp-scu-nav-item-v-default-label-text-align-horizontal , LEFT );
  color: var( --comp-scu-nav-item-v-default-label-color , rgba(54,54,54,1) );
  font-family: var( --comp-scu-nav-item-v-default-label-font-family , 'Proxima Nova' );
  font-weight: var( --comp-scu-nav-item-v-default-label-font-weight , 400 );
  line-height: var( --comp-scu-nav-item-v-default-label-line-height , 17.58px );
  letter-spacing: var( --comp-scu-nav-item-v-default-label-letter-spacing , 0px ); 
}

@mixin comp-scu-nav-item-v-default-label--sizing {
  width: 209px;
  height: 18px;
}

@mixin comp-scu-nav-item-v-default-label--width {
  width: 209px;
}

@mixin comp-scu-nav-item-v-default-label--height {
  height: 18px;
}

@mixin comp-scu-nav-item-v-default-label--absolute-layout {
  position: absolute;
  left: var( --comp-scu-nav-item-v-default-label-left , 32px );
  right: var( --comp-scu-nav-item-v-default-label-right , 5px );
  top: var( --comp-scu-nav-item-v-default-label-top , 11px );
  bottom: var( --comp-scu-nav-item-v-default-label-bottom , 11px ); 
}

@mixin comp-scu-nav-item-v-default-label--html-autolayout {
  display: inline-block;
  margin-left: var( --comp-scu-nav-item-v-default-label-left , 32px );
  margin-right: var( --comp-scu-nav-item-v-default-label-right , 5px );
  margin-top: var( --comp-scu-nav-item-v-default-label-top , 11px );
  margin-bottom: var( --comp-scu-nav-item-v-default-label-bottom , 11px );
  width: calc( 100% - ( var( --comp-scu-nav-item-v-default-label-left , 32px ) + var( --comp-scu-nav-item-v-default-label-right , 5px ) ) );
}

// ================================
// [COMPONENT_TOKEN] comp-scu-nav-item-v-default-line-top

@mixin comp-scu-nav-item-v-default-line-top { 
  position: relative;
  background-color: var( --comp-scu-nav-item-v-default-line-top-background-color , rgba(235,235,235,1) ); 
}

@mixin comp-scu-nav-item-v-default-line-top--sizing {
  width: 246px;
  height: 1px;
}

@mixin comp-scu-nav-item-v-default-line-top--width {
  width: 246px;
}

@mixin comp-scu-nav-item-v-default-line-top--height {
  height: 1px;
}

@mixin comp-scu-nav-item-v-default-line-top--figma-autolayout { 
   
}

@mixin comp-scu-nav-item-v-default-line-top--absolute-layout {
  position: absolute;
  left: var( --comp-scu-nav-item-v-default-line-top-left , 0px );
  right: var( --comp-scu-nav-item-v-default-line-top-right , 0px );
  top: var( --comp-scu-nav-item-v-default-line-top-top , 0px );
  height: var( --comp-scu-nav-item-v-default-line-top-height , 1px ); 
}

@mixin comp-scu-nav-item-v-default-line-top--html-autolayout {
  display: inline-block;
  margin-left: var( --comp-scu-nav-item-v-default-line-top-left , 0px );
  margin-right: var( --comp-scu-nav-item-v-default-line-top-right , 0px );
  margin-top: var( --comp-scu-nav-item-v-default-line-top-top , 0px );
  margin-bottom: var( --comp-scu-nav-item-v-default-line-top-bottom , 39px );
  width: calc( 100% - ( var( --comp-scu-nav-item-v-default-line-top-left , 0px ) + var( --comp-scu-nav-item-v-default-line-top-right , 0px ) ) );
}

// ================================
// [COMPONENT_TOKEN] comp-scu-nav-item-v-default-line-bottom

@mixin comp-scu-nav-item-v-default-line-bottom { 
  position: relative;
  background-color: var( --comp-scu-nav-item-v-default-line-bottom-background-color , rgba(235,235,235,1) ); 
}

@mixin comp-scu-nav-item-v-default-line-bottom--sizing {
  width: 246px;
  height: 1px;
}

@mixin comp-scu-nav-item-v-default-line-bottom--width {
  width: 246px;
}

@mixin comp-scu-nav-item-v-default-line-bottom--height {
  height: 1px;
}

@mixin comp-scu-nav-item-v-default-line-bottom--figma-autolayout { 
   
}

@mixin comp-scu-nav-item-v-default-line-bottom--absolute-layout {
  position: absolute;
  left: var( --comp-scu-nav-item-v-default-line-bottom-left , 0px );
  right: var( --comp-scu-nav-item-v-default-line-bottom-right , 0px );
  bottom: var( --comp-scu-nav-item-v-default-line-bottom-bottom , 0px );
  height: var( --comp-scu-nav-item-v-default-line-bottom-height , 1px ); 
}

@mixin comp-scu-nav-item-v-default-line-bottom--html-autolayout {
  display: inline-block;
  margin-left: var( --comp-scu-nav-item-v-default-line-bottom-left , 0px );
  margin-right: var( --comp-scu-nav-item-v-default-line-bottom-right , 0px );
  margin-top: var( --comp-scu-nav-item-v-default-line-bottom-top , 39px );
  margin-bottom: var( --comp-scu-nav-item-v-default-line-bottom-bottom , 0px );
  width: calc( 100% - ( var( --comp-scu-nav-item-v-default-line-bottom-left , 0px ) + var( --comp-scu-nav-item-v-default-line-bottom-right , 0px ) ) );
}

// ================================
// [COMPONENT_TOKEN] comp-scu-nav-item-v-default-selected

@mixin comp-scu-nav-item-v-default-selected { 
  position: relative; 
}

@mixin comp-scu-nav-item-v-default-selected--sizing {
  width: 3px;
  height: 40px;
}

@mixin comp-scu-nav-item-v-default-selected--width {
  width: 3px;
}

@mixin comp-scu-nav-item-v-default-selected--height {
  height: 40px;
}

@mixin comp-scu-nav-item-v-default-selected--figma-autolayout { 
   
}

@mixin comp-scu-nav-item-v-default-selected--absolute-layout {
  position: absolute;
  left: var( --comp-scu-nav-item-v-default-selected-left , 0px );
  width: var( --comp-scu-nav-item-v-default-selected-width , 3px );
  top: var( --comp-scu-nav-item-v-default-selected-top , 0px );
  bottom: var( --comp-scu-nav-item-v-default-selected-bottom , 0px ); 
}

@mixin comp-scu-nav-item-v-default-selected--html-autolayout {
  display: inline-block;
  margin-left: var( --comp-scu-nav-item-v-default-selected-left , 0px );
  margin-right: var( --comp-scu-nav-item-v-default-selected-right , 243px );
  margin-top: var( --comp-scu-nav-item-v-default-selected-top , 0px );
  margin-bottom: var( --comp-scu-nav-item-v-default-selected-bottom , 0px );
  width: calc( 100% - ( var( --comp-scu-nav-item-v-default-selected-left , 0px ) + var( --comp-scu-nav-item-v-default-selected-right , 243px ) ) );
}

// ================================
// [COMPONENT_TOKEN] comp-scu-nav-item-v-hover

@mixin comp-scu-nav-item-v-hover { 
  position: relative;
  background-color: var( --comp-scu-nav-item-v-hover-background-color , rgba(248,248,248,1) ); 
}

@mixin comp-scu-nav-item-v-hover--sizing {
  width: 246px;
  height: 40px;
}

@mixin comp-scu-nav-item-v-hover--width {
  width: 246px;
}

@mixin comp-scu-nav-item-v-hover--height {
  height: 40px;
}

@mixin comp-scu-nav-item-v-hover--figma-autolayout { 
   
}

@mixin comp-scu-nav-item-v-hover--absolute-layout {
  position: absolute;
  left: var( --comp-scu-nav-item-v-hover-left , 0px );
  right: var( --comp-scu-nav-item-v-hover-right , 0px );
  top: var( --comp-scu-nav-item-v-hover-top , 0px );
  bottom: var( --comp-scu-nav-item-v-hover-bottom , 0px ); 
}

@mixin comp-scu-nav-item-v-hover--html-autolayout {
  display: inline-block;
  margin-left: var( --comp-scu-nav-item-v-hover-left , 0px );
  margin-right: var( --comp-scu-nav-item-v-hover-right , 0px );
  margin-top: var( --comp-scu-nav-item-v-hover-top , 0px );
  margin-bottom: var( --comp-scu-nav-item-v-hover-bottom , 0px );
  width: calc( 100% - ( var( --comp-scu-nav-item-v-hover-left , 0px ) + var( --comp-scu-nav-item-v-hover-right , 0px ) ) );
}

// ================================
// [TEXT_TOKEN] comp-scu-nav-item-v-hover-label

@mixin comp-scu-nav-item-v-hover-label { 
  position: relative;
  font-size: var( --comp-scu-nav-item-v-hover-label-font-size , 15px );
  text-align: var( --comp-scu-nav-item-v-hover-label-text-align-horizontal , LEFT );
  color: var( --comp-scu-nav-item-v-hover-label-color , rgba(54,54,54,1) );
  font-family: var( --comp-scu-nav-item-v-hover-label-font-family , 'Proxima Nova' );
  font-weight: var( --comp-scu-nav-item-v-hover-label-font-weight , 400 );
  line-height: var( --comp-scu-nav-item-v-hover-label-line-height , 17.58px );
  letter-spacing: var( --comp-scu-nav-item-v-hover-label-letter-spacing , 0px ); 
}

@mixin comp-scu-nav-item-v-hover-label--sizing {
  width: 209px;
  height: 18px;
}

@mixin comp-scu-nav-item-v-hover-label--width {
  width: 209px;
}

@mixin comp-scu-nav-item-v-hover-label--height {
  height: 18px;
}

@mixin comp-scu-nav-item-v-hover-label--absolute-layout {
  position: absolute;
  left: var( --comp-scu-nav-item-v-hover-label-left , 32px );
  right: var( --comp-scu-nav-item-v-hover-label-right , 5px );
  top: var( --comp-scu-nav-item-v-hover-label-top , 11px );
  bottom: var( --comp-scu-nav-item-v-hover-label-bottom , 11px ); 
}

@mixin comp-scu-nav-item-v-hover-label--html-autolayout {
  display: inline-block;
  margin-left: var( --comp-scu-nav-item-v-hover-label-left , 32px );
  margin-right: var( --comp-scu-nav-item-v-hover-label-right , 5px );
  margin-top: var( --comp-scu-nav-item-v-hover-label-top , 11px );
  margin-bottom: var( --comp-scu-nav-item-v-hover-label-bottom , 11px );
  width: calc( 100% - ( var( --comp-scu-nav-item-v-hover-label-left , 32px ) + var( --comp-scu-nav-item-v-hover-label-right , 5px ) ) );
}

// ================================
// [COMPONENT_TOKEN] comp-scu-nav-item-v-hover-line-top

@mixin comp-scu-nav-item-v-hover-line-top { 
  position: relative;
  background-color: var( --comp-scu-nav-item-v-hover-line-top-background-color , rgba(235,235,235,1) ); 
}

@mixin comp-scu-nav-item-v-hover-line-top--sizing {
  width: 246px;
  height: 1px;
}

@mixin comp-scu-nav-item-v-hover-line-top--width {
  width: 246px;
}

@mixin comp-scu-nav-item-v-hover-line-top--height {
  height: 1px;
}

@mixin comp-scu-nav-item-v-hover-line-top--figma-autolayout { 
   
}

@mixin comp-scu-nav-item-v-hover-line-top--absolute-layout {
  position: absolute;
  left: var( --comp-scu-nav-item-v-hover-line-top-left , 0px );
  right: var( --comp-scu-nav-item-v-hover-line-top-right , 0px );
  top: var( --comp-scu-nav-item-v-hover-line-top-top , 0px );
  height: var( --comp-scu-nav-item-v-hover-line-top-height , 1px ); 
}

@mixin comp-scu-nav-item-v-hover-line-top--html-autolayout {
  display: inline-block;
  margin-left: var( --comp-scu-nav-item-v-hover-line-top-left , 0px );
  margin-right: var( --comp-scu-nav-item-v-hover-line-top-right , 0px );
  margin-top: var( --comp-scu-nav-item-v-hover-line-top-top , 0px );
  margin-bottom: var( --comp-scu-nav-item-v-hover-line-top-bottom , 39px );
  width: calc( 100% - ( var( --comp-scu-nav-item-v-hover-line-top-left , 0px ) + var( --comp-scu-nav-item-v-hover-line-top-right , 0px ) ) );
}

// ================================
// [COMPONENT_TOKEN] comp-scu-nav-item-v-hover-line-bottom

@mixin comp-scu-nav-item-v-hover-line-bottom { 
  position: relative;
  background-color: var( --comp-scu-nav-item-v-hover-line-bottom-background-color , rgba(235,235,235,1) ); 
}

@mixin comp-scu-nav-item-v-hover-line-bottom--sizing {
  width: 246px;
  height: 1px;
}

@mixin comp-scu-nav-item-v-hover-line-bottom--width {
  width: 246px;
}

@mixin comp-scu-nav-item-v-hover-line-bottom--height {
  height: 1px;
}

@mixin comp-scu-nav-item-v-hover-line-bottom--figma-autolayout { 
   
}

@mixin comp-scu-nav-item-v-hover-line-bottom--absolute-layout {
  position: absolute;
  left: var( --comp-scu-nav-item-v-hover-line-bottom-left , 0px );
  right: var( --comp-scu-nav-item-v-hover-line-bottom-right , 0px );
  bottom: var( --comp-scu-nav-item-v-hover-line-bottom-bottom , 0px );
  height: var( --comp-scu-nav-item-v-hover-line-bottom-height , 1px ); 
}

@mixin comp-scu-nav-item-v-hover-line-bottom--html-autolayout {
  display: inline-block;
  margin-left: var( --comp-scu-nav-item-v-hover-line-bottom-left , 0px );
  margin-right: var( --comp-scu-nav-item-v-hover-line-bottom-right , 0px );
  margin-top: var( --comp-scu-nav-item-v-hover-line-bottom-top , 39px );
  margin-bottom: var( --comp-scu-nav-item-v-hover-line-bottom-bottom , 0px );
  width: calc( 100% - ( var( --comp-scu-nav-item-v-hover-line-bottom-left , 0px ) + var( --comp-scu-nav-item-v-hover-line-bottom-right , 0px ) ) );
}

// ================================
// [COMPONENT_TOKEN] comp-scu-nav-item-v-hover-selected

@mixin comp-scu-nav-item-v-hover-selected { 
  position: relative; 
}

@mixin comp-scu-nav-item-v-hover-selected--sizing {
  width: 3px;
  height: 40px;
}

@mixin comp-scu-nav-item-v-hover-selected--width {
  width: 3px;
}

@mixin comp-scu-nav-item-v-hover-selected--height {
  height: 40px;
}

@mixin comp-scu-nav-item-v-hover-selected--figma-autolayout { 
   
}

@mixin comp-scu-nav-item-v-hover-selected--absolute-layout {
  position: absolute;
  left: var( --comp-scu-nav-item-v-hover-selected-left , 0px );
  width: var( --comp-scu-nav-item-v-hover-selected-width , 3px );
  top: var( --comp-scu-nav-item-v-hover-selected-top , 0px );
  bottom: var( --comp-scu-nav-item-v-hover-selected-bottom , 0px ); 
}

@mixin comp-scu-nav-item-v-hover-selected--html-autolayout {
  display: inline-block;
  margin-left: var( --comp-scu-nav-item-v-hover-selected-left , 0px );
  margin-right: var( --comp-scu-nav-item-v-hover-selected-right , 243px );
  margin-top: var( --comp-scu-nav-item-v-hover-selected-top , 0px );
  margin-bottom: var( --comp-scu-nav-item-v-hover-selected-bottom , 0px );
  width: calc( 100% - ( var( --comp-scu-nav-item-v-hover-selected-left , 0px ) + var( --comp-scu-nav-item-v-hover-selected-right , 243px ) ) );
}

// ================================
// [COMPONENT_TOKEN] comp-scu-nav-item-v-focused

@mixin comp-scu-nav-item-v-focused { 
  position: relative;
  background-color: var( --comp-scu-nav-item-v-focused-background-color , rgba(255,255,255,1) );
  border-radius: var( --comp-scu-nav-item-v-focused-corner-radius , 2px );
  box-shadow: var( --comp-scu-nav-item-v-focused-shadow , 0px 0px 0px 2px rgba(53,155,249,1) ); 
}

@mixin comp-scu-nav-item-v-focused--sizing {
  width: 246px;
  height: 40px;
}

@mixin comp-scu-nav-item-v-focused--width {
  width: 246px;
}

@mixin comp-scu-nav-item-v-focused--height {
  height: 40px;
}

@mixin comp-scu-nav-item-v-focused--figma-autolayout { 
   
}

@mixin comp-scu-nav-item-v-focused--absolute-layout {
  position: absolute;
  left: var( --comp-scu-nav-item-v-focused-left , 0px );
  right: var( --comp-scu-nav-item-v-focused-right , 0px );
  top: var( --comp-scu-nav-item-v-focused-top , 0px );
  bottom: var( --comp-scu-nav-item-v-focused-bottom , 0px ); 
}

@mixin comp-scu-nav-item-v-focused--html-autolayout {
  display: inline-block;
  margin-left: var( --comp-scu-nav-item-v-focused-left , 0px );
  margin-right: var( --comp-scu-nav-item-v-focused-right , 0px );
  margin-top: var( --comp-scu-nav-item-v-focused-top , 0px );
  margin-bottom: var( --comp-scu-nav-item-v-focused-bottom , 0px );
  width: calc( 100% - ( var( --comp-scu-nav-item-v-focused-left , 0px ) + var( --comp-scu-nav-item-v-focused-right , 0px ) ) );
}

// ================================
// [TEXT_TOKEN] comp-scu-nav-item-v-focused-label

@mixin comp-scu-nav-item-v-focused-label { 
  position: relative;
  font-size: var( --comp-scu-nav-item-v-focused-label-font-size , 15px );
  text-align: var( --comp-scu-nav-item-v-focused-label-text-align-horizontal , LEFT );
  color: var( --comp-scu-nav-item-v-focused-label-color , rgba(54,54,54,1) );
  font-family: var( --comp-scu-nav-item-v-focused-label-font-family , 'Proxima Nova' );
  font-weight: var( --comp-scu-nav-item-v-focused-label-font-weight , 400 );
  line-height: var( --comp-scu-nav-item-v-focused-label-line-height , 17.58px );
  letter-spacing: var( --comp-scu-nav-item-v-focused-label-letter-spacing , 0px ); 
}

@mixin comp-scu-nav-item-v-focused-label--sizing {
  width: 209px;
  height: 18px;
}

@mixin comp-scu-nav-item-v-focused-label--width {
  width: 209px;
}

@mixin comp-scu-nav-item-v-focused-label--height {
  height: 18px;
}

@mixin comp-scu-nav-item-v-focused-label--absolute-layout {
  position: absolute;
  left: var( --comp-scu-nav-item-v-focused-label-left , 32px );
  right: var( --comp-scu-nav-item-v-focused-label-right , 5px );
  top: var( --comp-scu-nav-item-v-focused-label-top , 11px );
  bottom: var( --comp-scu-nav-item-v-focused-label-bottom , 11px ); 
}

@mixin comp-scu-nav-item-v-focused-label--html-autolayout {
  display: inline-block;
  margin-left: var( --comp-scu-nav-item-v-focused-label-left , 32px );
  margin-right: var( --comp-scu-nav-item-v-focused-label-right , 5px );
  margin-top: var( --comp-scu-nav-item-v-focused-label-top , 11px );
  margin-bottom: var( --comp-scu-nav-item-v-focused-label-bottom , 11px );
  width: calc( 100% - ( var( --comp-scu-nav-item-v-focused-label-left , 32px ) + var( --comp-scu-nav-item-v-focused-label-right , 5px ) ) );
}

// ================================
// [COMPONENT_TOKEN] comp-scu-nav-item-v-focused-line-top

@mixin comp-scu-nav-item-v-focused-line-top { 
  position: relative;
  background-color: var( --comp-scu-nav-item-v-focused-line-top-background-color , rgba(235,235,235,1) ); 
}

@mixin comp-scu-nav-item-v-focused-line-top--sizing {
  width: 246px;
  height: 1px;
}

@mixin comp-scu-nav-item-v-focused-line-top--width {
  width: 246px;
}

@mixin comp-scu-nav-item-v-focused-line-top--height {
  height: 1px;
}

@mixin comp-scu-nav-item-v-focused-line-top--figma-autolayout { 
   
}

@mixin comp-scu-nav-item-v-focused-line-top--absolute-layout {
  position: absolute;
  left: var( --comp-scu-nav-item-v-focused-line-top-left , 0px );
  right: var( --comp-scu-nav-item-v-focused-line-top-right , 0px );
  top: var( --comp-scu-nav-item-v-focused-line-top-top , 0px );
  height: var( --comp-scu-nav-item-v-focused-line-top-height , 1px ); 
}

@mixin comp-scu-nav-item-v-focused-line-top--html-autolayout {
  display: inline-block;
  margin-left: var( --comp-scu-nav-item-v-focused-line-top-left , 0px );
  margin-right: var( --comp-scu-nav-item-v-focused-line-top-right , 0px );
  margin-top: var( --comp-scu-nav-item-v-focused-line-top-top , 0px );
  margin-bottom: var( --comp-scu-nav-item-v-focused-line-top-bottom , 39px );
  width: calc( 100% - ( var( --comp-scu-nav-item-v-focused-line-top-left , 0px ) + var( --comp-scu-nav-item-v-focused-line-top-right , 0px ) ) );
}

// ================================
// [COMPONENT_TOKEN] comp-scu-nav-item-v-focused-line-bottom

@mixin comp-scu-nav-item-v-focused-line-bottom { 
  position: relative;
  background-color: var( --comp-scu-nav-item-v-focused-line-bottom-background-color , rgba(235,235,235,1) ); 
}

@mixin comp-scu-nav-item-v-focused-line-bottom--sizing {
  width: 246px;
  height: 1px;
}

@mixin comp-scu-nav-item-v-focused-line-bottom--width {
  width: 246px;
}

@mixin comp-scu-nav-item-v-focused-line-bottom--height {
  height: 1px;
}

@mixin comp-scu-nav-item-v-focused-line-bottom--figma-autolayout { 
   
}

@mixin comp-scu-nav-item-v-focused-line-bottom--absolute-layout {
  position: absolute;
  left: var( --comp-scu-nav-item-v-focused-line-bottom-left , 0px );
  right: var( --comp-scu-nav-item-v-focused-line-bottom-right , 0px );
  bottom: var( --comp-scu-nav-item-v-focused-line-bottom-bottom , 0px );
  height: var( --comp-scu-nav-item-v-focused-line-bottom-height , 1px ); 
}

@mixin comp-scu-nav-item-v-focused-line-bottom--html-autolayout {
  display: inline-block;
  margin-left: var( --comp-scu-nav-item-v-focused-line-bottom-left , 0px );
  margin-right: var( --comp-scu-nav-item-v-focused-line-bottom-right , 0px );
  margin-top: var( --comp-scu-nav-item-v-focused-line-bottom-top , 39px );
  margin-bottom: var( --comp-scu-nav-item-v-focused-line-bottom-bottom , 0px );
  width: calc( 100% - ( var( --comp-scu-nav-item-v-focused-line-bottom-left , 0px ) + var( --comp-scu-nav-item-v-focused-line-bottom-right , 0px ) ) );
}

// ================================
// [COMPONENT_TOKEN] comp-scu-nav-item-v-focused-selected

@mixin comp-scu-nav-item-v-focused-selected { 
  position: relative; 
}

@mixin comp-scu-nav-item-v-focused-selected--sizing {
  width: 3px;
  height: 40px;
}

@mixin comp-scu-nav-item-v-focused-selected--width {
  width: 3px;
}

@mixin comp-scu-nav-item-v-focused-selected--height {
  height: 40px;
}

@mixin comp-scu-nav-item-v-focused-selected--figma-autolayout { 
   
}

@mixin comp-scu-nav-item-v-focused-selected--absolute-layout {
  position: absolute;
  left: var( --comp-scu-nav-item-v-focused-selected-left , 0px );
  width: var( --comp-scu-nav-item-v-focused-selected-width , 3px );
  top: var( --comp-scu-nav-item-v-focused-selected-top , 0px );
  bottom: var( --comp-scu-nav-item-v-focused-selected-bottom , 0px ); 
}

@mixin comp-scu-nav-item-v-focused-selected--html-autolayout {
  display: inline-block;
  margin-left: var( --comp-scu-nav-item-v-focused-selected-left , 0px );
  margin-right: var( --comp-scu-nav-item-v-focused-selected-right , 243px );
  margin-top: var( --comp-scu-nav-item-v-focused-selected-top , 0px );
  margin-bottom: var( --comp-scu-nav-item-v-focused-selected-bottom , 0px );
  width: calc( 100% - ( var( --comp-scu-nav-item-v-focused-selected-left , 0px ) + var( --comp-scu-nav-item-v-focused-selected-right , 243px ) ) );
}

// ================================
// [COMPONENT_TOKEN] comp-scu-nav-item-v-selected

@mixin comp-scu-nav-item-v-selected { 
  position: relative; 
}

@mixin comp-scu-nav-item-v-selected--sizing {
  width: 246px;
  height: 40px;
}

@mixin comp-scu-nav-item-v-selected--width {
  width: 246px;
}

@mixin comp-scu-nav-item-v-selected--height {
  height: 40px;
}

@mixin comp-scu-nav-item-v-selected--figma-autolayout { 
   
}

@mixin comp-scu-nav-item-v-selected--absolute-layout {
  position: absolute;
  left: var( --comp-scu-nav-item-v-selected-left , 0px );
  right: var( --comp-scu-nav-item-v-selected-right , 0px );
  top: var( --comp-scu-nav-item-v-selected-top , 0px );
  bottom: var( --comp-scu-nav-item-v-selected-bottom , 0px ); 
}

@mixin comp-scu-nav-item-v-selected--html-autolayout {
  display: inline-block;
  margin-left: var( --comp-scu-nav-item-v-selected-left , 0px );
  margin-right: var( --comp-scu-nav-item-v-selected-right , 0px );
  margin-top: var( --comp-scu-nav-item-v-selected-top , 0px );
  margin-bottom: var( --comp-scu-nav-item-v-selected-bottom , 0px );
  width: calc( 100% - ( var( --comp-scu-nav-item-v-selected-left , 0px ) + var( --comp-scu-nav-item-v-selected-right , 0px ) ) );
}

// ================================
// [TEXT_TOKEN] comp-scu-nav-item-v-selected-label

@mixin comp-scu-nav-item-v-selected-label { 
  position: relative;
  font-size: var( --comp-scu-nav-item-v-selected-label-font-size , 15px );
  text-align: var( --comp-scu-nav-item-v-selected-label-text-align-horizontal , LEFT );
  color: var( --comp-scu-nav-item-v-selected-label-color , rgba(64,109,3,1) );
  font-family: var( --comp-scu-nav-item-v-selected-label-font-family , 'Proxima Nova' );
  font-weight: var( --comp-scu-nav-item-v-selected-label-font-weight , 400 );
  line-height: var( --comp-scu-nav-item-v-selected-label-line-height , 17.58px );
  letter-spacing: var( --comp-scu-nav-item-v-selected-label-letter-spacing , 0px ); 
}

@mixin comp-scu-nav-item-v-selected-label--sizing {
  width: 209px;
  height: 18px;
}

@mixin comp-scu-nav-item-v-selected-label--width {
  width: 209px;
}

@mixin comp-scu-nav-item-v-selected-label--height {
  height: 18px;
}

@mixin comp-scu-nav-item-v-selected-label--absolute-layout {
  position: absolute;
  left: var( --comp-scu-nav-item-v-selected-label-left , 32px );
  right: var( --comp-scu-nav-item-v-selected-label-right , 5px );
  top: var( --comp-scu-nav-item-v-selected-label-top , 11px );
  bottom: var( --comp-scu-nav-item-v-selected-label-bottom , 11px ); 
}

@mixin comp-scu-nav-item-v-selected-label--html-autolayout {
  display: inline-block;
  margin-left: var( --comp-scu-nav-item-v-selected-label-left , 32px );
  margin-right: var( --comp-scu-nav-item-v-selected-label-right , 5px );
  margin-top: var( --comp-scu-nav-item-v-selected-label-top , 11px );
  margin-bottom: var( --comp-scu-nav-item-v-selected-label-bottom , 11px );
  width: calc( 100% - ( var( --comp-scu-nav-item-v-selected-label-left , 32px ) + var( --comp-scu-nav-item-v-selected-label-right , 5px ) ) );
}

// ================================
// [COMPONENT_TOKEN] comp-scu-nav-item-v-selected-line-top

@mixin comp-scu-nav-item-v-selected-line-top { 
  position: relative;
  background-color: var( --comp-scu-nav-item-v-selected-line-top-background-color , rgba(235,235,235,1) ); 
}

@mixin comp-scu-nav-item-v-selected-line-top--sizing {
  width: 246px;
  height: 1px;
}

@mixin comp-scu-nav-item-v-selected-line-top--width {
  width: 246px;
}

@mixin comp-scu-nav-item-v-selected-line-top--height {
  height: 1px;
}

@mixin comp-scu-nav-item-v-selected-line-top--figma-autolayout { 
   
}

@mixin comp-scu-nav-item-v-selected-line-top--absolute-layout {
  position: absolute;
  left: var( --comp-scu-nav-item-v-selected-line-top-left , 0px );
  right: var( --comp-scu-nav-item-v-selected-line-top-right , 0px );
  top: var( --comp-scu-nav-item-v-selected-line-top-top , 0px );
  height: var( --comp-scu-nav-item-v-selected-line-top-height , 1px ); 
}

@mixin comp-scu-nav-item-v-selected-line-top--html-autolayout {
  display: inline-block;
  margin-left: var( --comp-scu-nav-item-v-selected-line-top-left , 0px );
  margin-right: var( --comp-scu-nav-item-v-selected-line-top-right , 0px );
  margin-top: var( --comp-scu-nav-item-v-selected-line-top-top , 0px );
  margin-bottom: var( --comp-scu-nav-item-v-selected-line-top-bottom , 39px );
  width: calc( 100% - ( var( --comp-scu-nav-item-v-selected-line-top-left , 0px ) + var( --comp-scu-nav-item-v-selected-line-top-right , 0px ) ) );
}

// ================================
// [COMPONENT_TOKEN] comp-scu-nav-item-v-selected-line-bottom

@mixin comp-scu-nav-item-v-selected-line-bottom { 
  position: relative;
  background-color: var( --comp-scu-nav-item-v-selected-line-bottom-background-color , rgba(235,235,235,1) ); 
}

@mixin comp-scu-nav-item-v-selected-line-bottom--sizing {
  width: 246px;
  height: 1px;
}

@mixin comp-scu-nav-item-v-selected-line-bottom--width {
  width: 246px;
}

@mixin comp-scu-nav-item-v-selected-line-bottom--height {
  height: 1px;
}

@mixin comp-scu-nav-item-v-selected-line-bottom--figma-autolayout { 
   
}

@mixin comp-scu-nav-item-v-selected-line-bottom--absolute-layout {
  position: absolute;
  left: var( --comp-scu-nav-item-v-selected-line-bottom-left , 0px );
  right: var( --comp-scu-nav-item-v-selected-line-bottom-right , 0px );
  bottom: var( --comp-scu-nav-item-v-selected-line-bottom-bottom , 0px );
  height: var( --comp-scu-nav-item-v-selected-line-bottom-height , 1px ); 
}

@mixin comp-scu-nav-item-v-selected-line-bottom--html-autolayout {
  display: inline-block;
  margin-left: var( --comp-scu-nav-item-v-selected-line-bottom-left , 0px );
  margin-right: var( --comp-scu-nav-item-v-selected-line-bottom-right , 0px );
  margin-top: var( --comp-scu-nav-item-v-selected-line-bottom-top , 39px );
  margin-bottom: var( --comp-scu-nav-item-v-selected-line-bottom-bottom , 0px );
  width: calc( 100% - ( var( --comp-scu-nav-item-v-selected-line-bottom-left , 0px ) + var( --comp-scu-nav-item-v-selected-line-bottom-right , 0px ) ) );
}

// ================================
// [COMPONENT_TOKEN] comp-scu-nav-item-v-selected-selected

@mixin comp-scu-nav-item-v-selected-selected { 
  position: relative;
  background-color: var( --comp-scu-nav-item-v-selected-selected-background-color , rgba(99,166,10,1) ); 
}

@mixin comp-scu-nav-item-v-selected-selected--sizing {
  width: 3px;
  height: 40px;
}

@mixin comp-scu-nav-item-v-selected-selected--width {
  width: 3px;
}

@mixin comp-scu-nav-item-v-selected-selected--height {
  height: 40px;
}

@mixin comp-scu-nav-item-v-selected-selected--figma-autolayout { 
   
}

@mixin comp-scu-nav-item-v-selected-selected--absolute-layout {
  position: absolute;
  left: var( --comp-scu-nav-item-v-selected-selected-left , 0px );
  width: var( --comp-scu-nav-item-v-selected-selected-width , 3px );
  top: var( --comp-scu-nav-item-v-selected-selected-top , 0px );
  bottom: var( --comp-scu-nav-item-v-selected-selected-bottom , 0px ); 
}

@mixin comp-scu-nav-item-v-selected-selected--html-autolayout {
  display: inline-block;
  margin-left: var( --comp-scu-nav-item-v-selected-selected-left , 0px );
  margin-right: var( --comp-scu-nav-item-v-selected-selected-right , 243px );
  margin-top: var( --comp-scu-nav-item-v-selected-selected-top , 0px );
  margin-bottom: var( --comp-scu-nav-item-v-selected-selected-bottom , 0px );
  width: calc( 100% - ( var( --comp-scu-nav-item-v-selected-selected-left , 0px ) + var( --comp-scu-nav-item-v-selected-selected-right , 243px ) ) );
}

// ================================
// [COMPONENT_TOKEN] comp-scu-nav-item-v-selected-hover

@mixin comp-scu-nav-item-v-selected-hover { 
  position: relative;
  background-color: var( --comp-scu-nav-item-v-selected-hover-background-color , rgba(251,255,246,1) ); 
}

@mixin comp-scu-nav-item-v-selected-hover--sizing {
  width: 246px;
  height: 40px;
}

@mixin comp-scu-nav-item-v-selected-hover--width {
  width: 246px;
}

@mixin comp-scu-nav-item-v-selected-hover--height {
  height: 40px;
}

@mixin comp-scu-nav-item-v-selected-hover--figma-autolayout { 
   
}

@mixin comp-scu-nav-item-v-selected-hover--absolute-layout {
  position: absolute;
  left: var( --comp-scu-nav-item-v-selected-hover-left , 0px );
  right: var( --comp-scu-nav-item-v-selected-hover-right , 0px );
  top: var( --comp-scu-nav-item-v-selected-hover-top , 0px );
  bottom: var( --comp-scu-nav-item-v-selected-hover-bottom , 0px ); 
}

@mixin comp-scu-nav-item-v-selected-hover--html-autolayout {
  display: inline-block;
  margin-left: var( --comp-scu-nav-item-v-selected-hover-left , 0px );
  margin-right: var( --comp-scu-nav-item-v-selected-hover-right , 0px );
  margin-top: var( --comp-scu-nav-item-v-selected-hover-top , 0px );
  margin-bottom: var( --comp-scu-nav-item-v-selected-hover-bottom , 0px );
  width: calc( 100% - ( var( --comp-scu-nav-item-v-selected-hover-left , 0px ) + var( --comp-scu-nav-item-v-selected-hover-right , 0px ) ) );
}

// ================================
// [TEXT_TOKEN] comp-scu-nav-item-v-selected-hover-label

@mixin comp-scu-nav-item-v-selected-hover-label { 
  position: relative;
  font-size: var( --comp-scu-nav-item-v-selected-hover-label-font-size , 15px );
  text-align: var( --comp-scu-nav-item-v-selected-hover-label-text-align-horizontal , LEFT );
  color: var( --comp-scu-nav-item-v-selected-hover-label-color , rgba(64,109,3,1) );
  font-family: var( --comp-scu-nav-item-v-selected-hover-label-font-family , 'Proxima Nova' );
  font-weight: var( --comp-scu-nav-item-v-selected-hover-label-font-weight , 400 );
  line-height: var( --comp-scu-nav-item-v-selected-hover-label-line-height , 17.58px );
  letter-spacing: var( --comp-scu-nav-item-v-selected-hover-label-letter-spacing , 0px ); 
}

@mixin comp-scu-nav-item-v-selected-hover-label--sizing {
  width: 209px;
  height: 18px;
}

@mixin comp-scu-nav-item-v-selected-hover-label--width {
  width: 209px;
}

@mixin comp-scu-nav-item-v-selected-hover-label--height {
  height: 18px;
}

@mixin comp-scu-nav-item-v-selected-hover-label--absolute-layout {
  position: absolute;
  left: var( --comp-scu-nav-item-v-selected-hover-label-left , 32px );
  right: var( --comp-scu-nav-item-v-selected-hover-label-right , 5px );
  top: var( --comp-scu-nav-item-v-selected-hover-label-top , 11px );
  bottom: var( --comp-scu-nav-item-v-selected-hover-label-bottom , 11px ); 
}

@mixin comp-scu-nav-item-v-selected-hover-label--html-autolayout {
  display: inline-block;
  margin-left: var( --comp-scu-nav-item-v-selected-hover-label-left , 32px );
  margin-right: var( --comp-scu-nav-item-v-selected-hover-label-right , 5px );
  margin-top: var( --comp-scu-nav-item-v-selected-hover-label-top , 11px );
  margin-bottom: var( --comp-scu-nav-item-v-selected-hover-label-bottom , 11px );
  width: calc( 100% - ( var( --comp-scu-nav-item-v-selected-hover-label-left , 32px ) + var( --comp-scu-nav-item-v-selected-hover-label-right , 5px ) ) );
}

// ================================
// [COMPONENT_TOKEN] comp-scu-nav-item-v-selected-hover-line-top

@mixin comp-scu-nav-item-v-selected-hover-line-top { 
  position: relative;
  background-color: var( --comp-scu-nav-item-v-selected-hover-line-top-background-color , rgba(235,235,235,1) ); 
}

@mixin comp-scu-nav-item-v-selected-hover-line-top--sizing {
  width: 246px;
  height: 1px;
}

@mixin comp-scu-nav-item-v-selected-hover-line-top--width {
  width: 246px;
}

@mixin comp-scu-nav-item-v-selected-hover-line-top--height {
  height: 1px;
}

@mixin comp-scu-nav-item-v-selected-hover-line-top--figma-autolayout { 
   
}

@mixin comp-scu-nav-item-v-selected-hover-line-top--absolute-layout {
  position: absolute;
  left: var( --comp-scu-nav-item-v-selected-hover-line-top-left , 0px );
  right: var( --comp-scu-nav-item-v-selected-hover-line-top-right , 0px );
  top: var( --comp-scu-nav-item-v-selected-hover-line-top-top , 0px );
  height: var( --comp-scu-nav-item-v-selected-hover-line-top-height , 1px ); 
}

@mixin comp-scu-nav-item-v-selected-hover-line-top--html-autolayout {
  display: inline-block;
  margin-left: var( --comp-scu-nav-item-v-selected-hover-line-top-left , 0px );
  margin-right: var( --comp-scu-nav-item-v-selected-hover-line-top-right , 0px );
  margin-top: var( --comp-scu-nav-item-v-selected-hover-line-top-top , 0px );
  margin-bottom: var( --comp-scu-nav-item-v-selected-hover-line-top-bottom , 39px );
  width: calc( 100% - ( var( --comp-scu-nav-item-v-selected-hover-line-top-left , 0px ) + var( --comp-scu-nav-item-v-selected-hover-line-top-right , 0px ) ) );
}

// ================================
// [COMPONENT_TOKEN] comp-scu-nav-item-v-selected-hover-line-bottom

@mixin comp-scu-nav-item-v-selected-hover-line-bottom { 
  position: relative;
  background-color: var( --comp-scu-nav-item-v-selected-hover-line-bottom-background-color , rgba(235,235,235,1) ); 
}

@mixin comp-scu-nav-item-v-selected-hover-line-bottom--sizing {
  width: 246px;
  height: 1px;
}

@mixin comp-scu-nav-item-v-selected-hover-line-bottom--width {
  width: 246px;
}

@mixin comp-scu-nav-item-v-selected-hover-line-bottom--height {
  height: 1px;
}

@mixin comp-scu-nav-item-v-selected-hover-line-bottom--figma-autolayout { 
   
}

@mixin comp-scu-nav-item-v-selected-hover-line-bottom--absolute-layout {
  position: absolute;
  left: var( --comp-scu-nav-item-v-selected-hover-line-bottom-left , 0px );
  right: var( --comp-scu-nav-item-v-selected-hover-line-bottom-right , 0px );
  bottom: var( --comp-scu-nav-item-v-selected-hover-line-bottom-bottom , 0px );
  height: var( --comp-scu-nav-item-v-selected-hover-line-bottom-height , 1px ); 
}

@mixin comp-scu-nav-item-v-selected-hover-line-bottom--html-autolayout {
  display: inline-block;
  margin-left: var( --comp-scu-nav-item-v-selected-hover-line-bottom-left , 0px );
  margin-right: var( --comp-scu-nav-item-v-selected-hover-line-bottom-right , 0px );
  margin-top: var( --comp-scu-nav-item-v-selected-hover-line-bottom-top , 39px );
  margin-bottom: var( --comp-scu-nav-item-v-selected-hover-line-bottom-bottom , 0px );
  width: calc( 100% - ( var( --comp-scu-nav-item-v-selected-hover-line-bottom-left , 0px ) + var( --comp-scu-nav-item-v-selected-hover-line-bottom-right , 0px ) ) );
}

// ================================
// [COMPONENT_TOKEN] comp-scu-nav-item-v-selected-hover-selected

@mixin comp-scu-nav-item-v-selected-hover-selected { 
  position: relative;
  background-color: var( --comp-scu-nav-item-v-selected-hover-selected-background-color , rgba(99,166,10,1) ); 
}

@mixin comp-scu-nav-item-v-selected-hover-selected--sizing {
  width: 3px;
  height: 40px;
}

@mixin comp-scu-nav-item-v-selected-hover-selected--width {
  width: 3px;
}

@mixin comp-scu-nav-item-v-selected-hover-selected--height {
  height: 40px;
}

@mixin comp-scu-nav-item-v-selected-hover-selected--figma-autolayout { 
   
}

@mixin comp-scu-nav-item-v-selected-hover-selected--absolute-layout {
  position: absolute;
  left: var( --comp-scu-nav-item-v-selected-hover-selected-left , 0px );
  width: var( --comp-scu-nav-item-v-selected-hover-selected-width , 3px );
  top: var( --comp-scu-nav-item-v-selected-hover-selected-top , 0px );
  bottom: var( --comp-scu-nav-item-v-selected-hover-selected-bottom , 0px ); 
}

@mixin comp-scu-nav-item-v-selected-hover-selected--html-autolayout {
  display: inline-block;
  margin-left: var( --comp-scu-nav-item-v-selected-hover-selected-left , 0px );
  margin-right: var( --comp-scu-nav-item-v-selected-hover-selected-right , 243px );
  margin-top: var( --comp-scu-nav-item-v-selected-hover-selected-top , 0px );
  margin-bottom: var( --comp-scu-nav-item-v-selected-hover-selected-bottom , 0px );
  width: calc( 100% - ( var( --comp-scu-nav-item-v-selected-hover-selected-left , 0px ) + var( --comp-scu-nav-item-v-selected-hover-selected-right , 243px ) ) );
}

// ================================
// [COMPONENT_TOKEN] comp-scu-nav-item-h-icon

@mixin comp-scu-nav-item-h-icon { 
  position: relative; 
}

@mixin comp-scu-nav-item-h-icon--sizing {
  width: 77px;
  height: 48px;
}

@mixin comp-scu-nav-item-h-icon--width {
  width: 77px;
}

@mixin comp-scu-nav-item-h-icon--height {
  height: 48px;
}

@mixin comp-scu-nav-item-h-icon--figma-autolayout { 
  display: flex;
  flex-flow: column nowrap;
  padding-left: var( --comp-scu-nav-item-h-icon-padding-left , 0px );
  padding-right: var( --comp-scu-nav-item-h-icon-padding-right , 0px );
  padding-top: var( --comp-scu-nav-item-h-icon-padding-top , 0px );
  padding-bottom: var( --comp-scu-nav-item-h-icon-padding-bottom , 0px );
  & > *:not(:last-child) { margin-bottom: var( --comp-scu-nav-item-h-icon-item-spacing , 5px ); } 
}

@mixin comp-scu-nav-item-h-icon--absolute-layout {
   
}

@mixin comp-scu-nav-item-h-icon--html-autolayout {
  display: inline-block;
  margin-left: var( --comp-scu-nav-item-h-icon-left , 0px );
  margin-right: var( --comp-scu-nav-item-h-icon-right , 0px );
  margin-top: var( --comp-scu-nav-item-h-icon-top , 0px );
  margin-bottom: var( --comp-scu-nav-item-h-icon-bottom , 0px );
  width: calc( 100% - ( var( --comp-scu-nav-item-h-icon-left , 0px ) + var( --comp-scu-nav-item-h-icon-right , 0px ) ) );
}

// ================================
// [COMPONENT_TOKEN] comp-scu-nav-item-h-icon-icon-box

@mixin comp-scu-nav-item-h-icon-icon-box { 
  position: relative; 
}

@mixin comp-scu-nav-item-h-icon-icon-box--sizing {
  width: 60px;
  height: 26px;
}

@mixin comp-scu-nav-item-h-icon-icon-box--width {
  width: 60px;
}

@mixin comp-scu-nav-item-h-icon-icon-box--height {
  height: 26px;
}

@mixin comp-scu-nav-item-h-icon-icon-box--figma-autolayout { 
   
}

@mixin comp-scu-nav-item-h-icon-icon-box--absolute-layout {
   
}

@mixin comp-scu-nav-item-h-icon-icon-box--html-autolayout {
  display: inline-block;
  margin-left: var( --comp-scu-nav-item-h-icon-icon-box-left , 8.5px );
  margin-right: var( --comp-scu-nav-item-h-icon-icon-box-right , 8.5px );
  margin-top: var( --comp-scu-nav-item-h-icon-icon-box-top , 0px );
  margin-bottom: var( --comp-scu-nav-item-h-icon-icon-box-bottom , 22px );
  width: calc( 100% - ( var( --comp-scu-nav-item-h-icon-icon-box-left , 8.5px ) + var( --comp-scu-nav-item-h-icon-icon-box-right , 8.5px ) ) );
}

// ================================
// [COMPONENT_TOKEN] comp-scu-nav-item-h-icon-icon-box-i-c-o-n-24

@mixin comp-scu-nav-item-h-icon-icon-box-i-c-o-n-24 { 
  position: relative;
  background-color: var( --comp-scu-nav-item-h-icon-icon-box-i-c-o-n-24-background-color , rgba(255,255,255,1) ); 
}

@mixin comp-scu-nav-item-h-icon-icon-box-i-c-o-n-24--sizing {
  width: 24px;
  height: 24px;
}

@mixin comp-scu-nav-item-h-icon-icon-box-i-c-o-n-24--width {
  width: 24px;
}

@mixin comp-scu-nav-item-h-icon-icon-box-i-c-o-n-24--height {
  height: 24px;
}

@mixin comp-scu-nav-item-h-icon-icon-box-i-c-o-n-24--figma-autolayout { 
   
}

@mixin comp-scu-nav-item-h-icon-icon-box-i-c-o-n-24--absolute-layout {
  position: absolute;
  left: calc( 50% - 12px );
  width: var( --comp-scu-nav-item-h-icon-icon-box-i-c-o-n-24-width , 24px );
  top: calc( 50% - 12px );
  height: var( --comp-scu-nav-item-h-icon-icon-box-i-c-o-n-24-height , 24px ); 
}

@mixin comp-scu-nav-item-h-icon-icon-box-i-c-o-n-24--html-autolayout {
  display: inline-block;
  margin-left: var( --comp-scu-nav-item-h-icon-icon-box-i-c-o-n-24-left , 18px );
  margin-right: var( --comp-scu-nav-item-h-icon-icon-box-i-c-o-n-24-right , 18px );
  margin-top: var( --comp-scu-nav-item-h-icon-icon-box-i-c-o-n-24-top , 1px );
  margin-bottom: var( --comp-scu-nav-item-h-icon-icon-box-i-c-o-n-24-bottom , 1px );
  width: calc( 100% - ( var( --comp-scu-nav-item-h-icon-icon-box-i-c-o-n-24-left , 18px ) + var( --comp-scu-nav-item-h-icon-icon-box-i-c-o-n-24-right , 18px ) ) );
}

// ================================
// [COMPONENT_TOKEN] comp-scu-nav-item-h-icon-icon-box-notification

@mixin comp-scu-nav-item-h-icon-icon-box-notification { 
  position: relative;
  background-color: var( --comp-scu-nav-item-h-icon-icon-box-notification-background-color , rgba(99,166,10,1) );
  border-radius: var( --comp-scu-nav-item-h-icon-icon-box-notification-corner-radius , 10px );
  border-width: var( --comp-scu-nav-item-h-icon-icon-box-notification-stroke-weight , 3px );
  border-style: solid;
  border-color: var( --comp-scu-nav-item-h-icon-icon-box-notification-stroke-color , rgba(255,255,255,1) ); 
}

@mixin comp-scu-nav-item-h-icon-icon-box-notification--sizing {
  width: 12px;
  height: 12px;
}

@mixin comp-scu-nav-item-h-icon-icon-box-notification--width {
  width: 12px;
}

@mixin comp-scu-nav-item-h-icon-icon-box-notification--height {
  height: 12px;
}

@mixin comp-scu-nav-item-h-icon-icon-box-notification--figma-autolayout { 
   
}

@mixin comp-scu-nav-item-h-icon-icon-box-notification--absolute-layout {
  position: absolute;
  left: var( --comp-scu-nav-item-h-icon-icon-box-notification-left , 35px );
  right: var( --comp-scu-nav-item-h-icon-icon-box-notification-right , 13px );
  top: var( --comp-scu-nav-item-h-icon-icon-box-notification-top , 0.666748046875px );
  height: var( --comp-scu-nav-item-h-icon-icon-box-notification-height , 12px ); 
}

@mixin comp-scu-nav-item-h-icon-icon-box-notification--html-autolayout {
  display: inline-block;
  margin-left: var( --comp-scu-nav-item-h-icon-icon-box-notification-left , 35px );
  margin-right: var( --comp-scu-nav-item-h-icon-icon-box-notification-right , 13px );
  margin-top: var( --comp-scu-nav-item-h-icon-icon-box-notification-top , 0.666748046875px );
  margin-bottom: var( --comp-scu-nav-item-h-icon-icon-box-notification-bottom , 13.333251953125px );
  width: calc( 100% - ( var( --comp-scu-nav-item-h-icon-icon-box-notification-left , 35px ) + var( --comp-scu-nav-item-h-icon-icon-box-notification-right , 13px ) ) );
}

// ================================
// [TEXT_TOKEN] comp-scu-nav-item-h-icon-icon-box-notification-number

@mixin comp-scu-nav-item-h-icon-icon-box-notification-number { 
  position: relative;
  font-size: var( --comp-scu-nav-item-h-icon-icon-box-notification-number-font-size , 9px );
  text-align: var( --comp-scu-nav-item-h-icon-icon-box-notification-number-text-align-horizontal , CENTER );
  color: var( --comp-scu-nav-item-h-icon-icon-box-notification-number-color , rgba(255,255,255,1) );
  font-family: var( --comp-scu-nav-item-h-icon-icon-box-notification-number-font-family , 'Proxima Nova' );
  font-weight: var( --comp-scu-nav-item-h-icon-icon-box-notification-number-font-weight , 700 );
  line-height: var( --comp-scu-nav-item-h-icon-icon-box-notification-number-line-height , 10.55px );
  letter-spacing: var( --comp-scu-nav-item-h-icon-icon-box-notification-number-letter-spacing , 0px ); 
}

@mixin comp-scu-nav-item-h-icon-icon-box-notification-number--sizing {
  width: 12px;
  height: 12px;
}

@mixin comp-scu-nav-item-h-icon-icon-box-notification-number--width {
  width: 12px;
}

@mixin comp-scu-nav-item-h-icon-icon-box-notification-number--height {
  height: 12px;
}

@mixin comp-scu-nav-item-h-icon-icon-box-notification-number--absolute-layout {
  position: absolute;
  left: calc( 50% - 6px );
  width: var( --comp-scu-nav-item-h-icon-icon-box-notification-number-width , 12px );
  top: calc( 52.78% - 6px );
  height: var( --comp-scu-nav-item-h-icon-icon-box-notification-number-height , 12px ); 
}

@mixin comp-scu-nav-item-h-icon-icon-box-notification-number--html-autolayout {
  display: inline-block;
  margin-left: var( --comp-scu-nav-item-h-icon-icon-box-notification-number-left , 0px );
  margin-right: var( --comp-scu-nav-item-h-icon-icon-box-notification-number-right , 0px );
  margin-top: var( --comp-scu-nav-item-h-icon-icon-box-notification-number-top , 0.333251953125px );
  margin-bottom: var( --comp-scu-nav-item-h-icon-icon-box-notification-number-bottom , -0.333251953125px );
  width: calc( 100% - ( var( --comp-scu-nav-item-h-icon-icon-box-notification-number-left , 0px ) + var( --comp-scu-nav-item-h-icon-icon-box-notification-number-right , 0px ) ) );
}

// ================================
// [TEXT_TOKEN] comp-scu-nav-item-h-icon-comments

@mixin comp-scu-nav-item-h-icon-comments { 
  position: relative;
  font-size: var( --comp-scu-nav-item-h-icon-comments-font-size , 9px );
  text-align: var( --comp-scu-nav-item-h-icon-comments-text-align-horizontal , CENTER );
  color: var( --comp-scu-nav-item-h-icon-comments-color , rgba(86,144,8,1) );
  font-family: var( --comp-scu-nav-item-h-icon-comments-font-family , 'Proxima Nova' );
  font-weight: var( --comp-scu-nav-item-h-icon-comments-font-weight , 700 );
  line-height: var( --comp-scu-nav-item-h-icon-comments-line-height , 10.55px );
  letter-spacing: var( --comp-scu-nav-item-h-icon-comments-letter-spacing , 0px ); 
}

@mixin comp-scu-nav-item-h-icon-comments--sizing {
  width: 77px;
  height: 11px;
}

@mixin comp-scu-nav-item-h-icon-comments--width {
  width: 77px;
}

@mixin comp-scu-nav-item-h-icon-comments--height {
  height: 11px;
}

@mixin comp-scu-nav-item-h-icon-comments--absolute-layout {
   
}

@mixin comp-scu-nav-item-h-icon-comments--html-autolayout {
  display: inline-block;
  margin-left: var( --comp-scu-nav-item-h-icon-comments-left , 0px );
  margin-right: var( --comp-scu-nav-item-h-icon-comments-right , 0px );
  margin-top: var( --comp-scu-nav-item-h-icon-comments-top , 31px );
  margin-bottom: var( --comp-scu-nav-item-h-icon-comments-bottom , 6px );
  width: calc( 100% - ( var( --comp-scu-nav-item-h-icon-comments-left , 0px ) + var( --comp-scu-nav-item-h-icon-comments-right , 0px ) ) );
}

// ================================
// [COMPONENT_TOKEN] comp-scu-nav-item-h-icon-select

@mixin comp-scu-nav-item-h-icon-select { 
  position: relative;
  background-color: var( --comp-scu-nav-item-h-icon-select-background-color , rgba(99,166,10,1) ); 
}

@mixin comp-scu-nav-item-h-icon-select--sizing {
  width: 77px;
  height: 1px;
}

@mixin comp-scu-nav-item-h-icon-select--width {
  width: 77px;
}

@mixin comp-scu-nav-item-h-icon-select--height {
  height: 1px;
}

@mixin comp-scu-nav-item-h-icon-select--figma-autolayout { 
   
}

@mixin comp-scu-nav-item-h-icon-select--absolute-layout {
   
}

@mixin comp-scu-nav-item-h-icon-select--html-autolayout {
  display: inline-block;
  margin-left: var( --comp-scu-nav-item-h-icon-select-left , 0px );
  margin-right: var( --comp-scu-nav-item-h-icon-select-right , 0px );
  margin-top: var( --comp-scu-nav-item-h-icon-select-top , 47px );
  margin-bottom: var( --comp-scu-nav-item-h-icon-select-bottom , 0px );
  width: calc( 100% - ( var( --comp-scu-nav-item-h-icon-select-left , 0px ) + var( --comp-scu-nav-item-h-icon-select-right , 0px ) ) );
}

// ================================
// [COMPONENT_TOKEN] comp-beta-scu-button-2

@mixin comp-beta-scu-button-2 { 
  position: relative; 
}

@mixin comp-beta-scu-button-2--sizing {
  width: 87px;
  height: 40px;
}

@mixin comp-beta-scu-button-2--width {
  width: 87px;
}

@mixin comp-beta-scu-button-2--height {
  height: 40px;
}

@mixin comp-beta-scu-button-2--figma-autolayout { 
   
}

@mixin comp-beta-scu-button-2--absolute-layout {
   
}

@mixin comp-beta-scu-button-2--html-autolayout {
  display: inline-block;
  margin-left: var( --comp-beta-scu-button-2-left , 0px );
  margin-right: var( --comp-beta-scu-button-2-right , 0px );
  margin-top: var( --comp-beta-scu-button-2-top , 0px );
  margin-bottom: var( --comp-beta-scu-button-2-bottom , 0px );
  width: calc( 100% - ( var( --comp-beta-scu-button-2-left , 0px ) + var( --comp-beta-scu-button-2-right , 0px ) ) );
}

// ================================
// [COMPONENT_TOKEN] comp-beta-scu-button-2-scu-button-2-background

@mixin comp-beta-scu-button-2-scu-button-2-background { 
  position: relative;
  background-color: var( --comp-beta-scu-button-2-scu-button-2-background-background-color , rgba(99,166,10,1) );
  border-radius: var( --comp-beta-scu-button-2-scu-button-2-background-corner-radius , 200px ); 
}

@mixin comp-beta-scu-button-2-scu-button-2-background--sizing {
  width: 86px;
  height: 40px;
}

@mixin comp-beta-scu-button-2-scu-button-2-background--width {
  width: 86px;
}

@mixin comp-beta-scu-button-2-scu-button-2-background--height {
  height: 40px;
}

@mixin comp-beta-scu-button-2-scu-button-2-background--figma-autolayout { 
   
}

@mixin comp-beta-scu-button-2-scu-button-2-background--absolute-layout {
  position: absolute;
  left: var( --comp-beta-scu-button-2-scu-button-2-background-left , 0.75px );
  right: var( --comp-beta-scu-button-2-scu-button-2-background-right , 0.25px );
  top: var( --comp-beta-scu-button-2-scu-button-2-background-top , 0px );
  bottom: var( --comp-beta-scu-button-2-scu-button-2-background-bottom , 0px ); 
}

@mixin comp-beta-scu-button-2-scu-button-2-background--html-autolayout {
  display: inline-block;
  margin-left: var( --comp-beta-scu-button-2-scu-button-2-background-left , 0.75px );
  margin-right: var( --comp-beta-scu-button-2-scu-button-2-background-right , 0.25px );
  margin-top: var( --comp-beta-scu-button-2-scu-button-2-background-top , 0px );
  margin-bottom: var( --comp-beta-scu-button-2-scu-button-2-background-bottom , 0px );
  width: calc( 100% - ( var( --comp-beta-scu-button-2-scu-button-2-background-left , 0.75px ) + var( --comp-beta-scu-button-2-scu-button-2-background-right , 0.25px ) ) );
}

// ================================
// [TEXT_TOKEN] comp-beta-scu-button-2-label

@mixin comp-beta-scu-button-2-label { 
  position: relative;
  font-size: var( --comp-beta-scu-button-2-label-font-size , 16px );
  text-align: var( --comp-beta-scu-button-2-label-text-align-horizontal , CENTER );
  color: var( --comp-beta-scu-button-2-label-color , rgba(255,255,255,1) );
  font-family: var( --comp-beta-scu-button-2-label-font-family , 'Proxima Nova' );
  font-weight: var( --comp-beta-scu-button-2-label-font-weight , 700 );
  line-height: var( --comp-beta-scu-button-2-label-line-height , 18.75px );
  letter-spacing: var( --comp-beta-scu-button-2-label-letter-spacing , 0px ); 
}

@mixin comp-beta-scu-button-2-label--sizing {
  width: 39px;
  height: 40px;
}

@mixin comp-beta-scu-button-2-label--width {
  width: 39px;
}

@mixin comp-beta-scu-button-2-label--height {
  height: 40px;
}

@mixin comp-beta-scu-button-2-label--absolute-layout {
  position: absolute;
  left: var( --comp-beta-scu-button-2-label-left , 24px );
  right: var( --comp-beta-scu-button-2-label-right , 24px );
  top: var( --comp-beta-scu-button-2-label-top , 0px );
  bottom: var( --comp-beta-scu-button-2-label-bottom , 0px ); 
}

@mixin comp-beta-scu-button-2-label--html-autolayout {
  display: inline-block;
  margin-left: var( --comp-beta-scu-button-2-label-left , 24px );
  margin-right: var( --comp-beta-scu-button-2-label-right , 24px );
  margin-top: var( --comp-beta-scu-button-2-label-top , 0px );
  margin-bottom: var( --comp-beta-scu-button-2-label-bottom , 0px );
  width: calc( 100% - ( var( --comp-beta-scu-button-2-label-left , 24px ) + var( --comp-beta-scu-button-2-label-right , 24px ) ) );
}

// ================================
// [COMPONENT_TOKEN] comp-scu-input-text

@mixin comp-scu-input-text { 
  position: relative; 
}

@mixin comp-scu-input-text--sizing {
  width: 263px;
  height: 72px;
}

@mixin comp-scu-input-text--width {
  width: 263px;
}

@mixin comp-scu-input-text--height {
  height: 72px;
}

@mixin comp-scu-input-text--figma-autolayout { 
   
}

@mixin comp-scu-input-text--absolute-layout {
   
}

@mixin comp-scu-input-text--html-autolayout {
  display: inline-block;
  margin-left: var( --comp-scu-input-text-left , 0px );
  margin-right: var( --comp-scu-input-text-right , 0px );
  margin-top: var( --comp-scu-input-text-top , 0px );
  margin-bottom: var( --comp-scu-input-text-bottom , 0px );
  width: calc( 100% - ( var( --comp-scu-input-text-left , 0px ) + var( --comp-scu-input-text-right , 0px ) ) );
}

// ================================
// [COMPONENT_TOKEN] comp-scu-input-text-scu-input-field

@mixin comp-scu-input-text-scu-input-field { 
  position: relative;
  background-color: var( --comp-scu-input-text-scu-input-field-background-color , rgba(255,255,255,1) ); 
}

@mixin comp-scu-input-text-scu-input-field--sizing {
  width: 263px;
  height: 36px;
}

@mixin comp-scu-input-text-scu-input-field--width {
  width: 263px;
}

@mixin comp-scu-input-text-scu-input-field--height {
  height: 36px;
}

@mixin comp-scu-input-text-scu-input-field--figma-autolayout { 
   
}

@mixin comp-scu-input-text-scu-input-field--absolute-layout {
  position: absolute;
  left: var( --comp-scu-input-text-scu-input-field-left , 0px );
  right: var( --comp-scu-input-text-scu-input-field-right , 0px );
  top: var( --comp-scu-input-text-scu-input-field-top , 18px );
  bottom: var( --comp-scu-input-text-scu-input-field-bottom , 18px ); 
}

@mixin comp-scu-input-text-scu-input-field--html-autolayout {
  display: inline-block;
  margin-left: var( --comp-scu-input-text-scu-input-field-left , 0px );
  margin-right: var( --comp-scu-input-text-scu-input-field-right , 0px );
  margin-top: var( --comp-scu-input-text-scu-input-field-top , 18px );
  margin-bottom: var( --comp-scu-input-text-scu-input-field-bottom , 18px );
  width: calc( 100% - ( var( --comp-scu-input-text-scu-input-field-left , 0px ) + var( --comp-scu-input-text-scu-input-field-right , 0px ) ) );
}

// ================================
// [COMPONENT_TOKEN] comp-scu-input-text-scu-input-field-default

@mixin comp-scu-input-text-scu-input-field-default { 
  position: relative;
  background-color: var( --comp-scu-input-text-scu-input-field-default-background-color , rgba(255,255,255,1) );
  border-radius: var( --comp-scu-input-text-scu-input-field-default-corner-radius , 2px );
  border-width: var( --comp-scu-input-text-scu-input-field-default-stroke-weight , 1px );
  border-style: solid;
  border-color: var( --comp-scu-input-text-scu-input-field-default-stroke-color , rgba(196,196,196,1) ); 
}

@mixin comp-scu-input-text-scu-input-field-default--sizing {
  width: 263px;
  height: 36px;
}

@mixin comp-scu-input-text-scu-input-field-default--width {
  width: 263px;
}

@mixin comp-scu-input-text-scu-input-field-default--height {
  height: 36px;
}

@mixin comp-scu-input-text-scu-input-field-default--figma-autolayout { 
   
}

@mixin comp-scu-input-text-scu-input-field-default--absolute-layout {
  position: absolute;
  left: var( --comp-scu-input-text-scu-input-field-default-left , 0px );
  right: var( --comp-scu-input-text-scu-input-field-default-right , 0px );
  top: var( --comp-scu-input-text-scu-input-field-default-top , 0px );
  bottom: var( --comp-scu-input-text-scu-input-field-default-bottom , 0px ); 
}

@mixin comp-scu-input-text-scu-input-field-default--html-autolayout {
  display: inline-block;
  margin-left: var( --comp-scu-input-text-scu-input-field-default-left , 0px );
  margin-right: var( --comp-scu-input-text-scu-input-field-default-right , 0px );
  margin-top: var( --comp-scu-input-text-scu-input-field-default-top , 0px );
  margin-bottom: var( --comp-scu-input-text-scu-input-field-default-bottom , 0px );
  width: calc( 100% - ( var( --comp-scu-input-text-scu-input-field-default-left , 0px ) + var( --comp-scu-input-text-scu-input-field-default-right , 0px ) ) );
}

// ================================
// [TEXT_TOKEN] comp-scu-input-text-scu-input-field-default-input

@mixin comp-scu-input-text-scu-input-field-default-input { 
  position: relative;
  font-size: var( --comp-scu-input-text-scu-input-field-default-input-font-size , 15px );
  text-align: var( --comp-scu-input-text-scu-input-field-default-input-text-align-horizontal , LEFT );
  color: var( --comp-scu-input-text-scu-input-field-default-input-color , rgba(0,0,0,1) );
  font-family: var( --comp-scu-input-text-scu-input-field-default-input-font-family , 'Proxima Nova' );
  font-weight: var( --comp-scu-input-text-scu-input-field-default-input-font-weight , 400 );
  line-height: var( --comp-scu-input-text-scu-input-field-default-input-line-height , 17.58px );
  letter-spacing: var( --comp-scu-input-text-scu-input-field-default-input-letter-spacing , 0px ); 
}

@mixin comp-scu-input-text-scu-input-field-default-input--sizing {
  width: 238px;
  height: 18px;
}

@mixin comp-scu-input-text-scu-input-field-default-input--width {
  width: 238px;
}

@mixin comp-scu-input-text-scu-input-field-default-input--height {
  height: 18px;
}

@mixin comp-scu-input-text-scu-input-field-default-input--absolute-layout {
  position: absolute;
  left: var( --comp-scu-input-text-scu-input-field-default-input-left , 11px );
  right: var( --comp-scu-input-text-scu-input-field-default-input-right , 14px );
  top: var( --comp-scu-input-text-scu-input-field-default-input-top , 10px );
  bottom: var( --comp-scu-input-text-scu-input-field-default-input-bottom , 8px ); 
}

@mixin comp-scu-input-text-scu-input-field-default-input--html-autolayout {
  display: inline-block;
  margin-left: var( --comp-scu-input-text-scu-input-field-default-input-left , 11px );
  margin-right: var( --comp-scu-input-text-scu-input-field-default-input-right , 14px );
  margin-top: var( --comp-scu-input-text-scu-input-field-default-input-top , 10px );
  margin-bottom: var( --comp-scu-input-text-scu-input-field-default-input-bottom , 8px );
  width: calc( 100% - ( var( --comp-scu-input-text-scu-input-field-default-input-left , 11px ) + var( --comp-scu-input-text-scu-input-field-default-input-right , 14px ) ) );
}

// ================================
// [TEXT_TOKEN] comp-scu-input-text-scu-input-field-default-placeholder

@mixin comp-scu-input-text-scu-input-field-default-placeholder { 
  position: relative;
  font-size: var( --comp-scu-input-text-scu-input-field-default-placeholder-font-size , 15px );
  text-align: var( --comp-scu-input-text-scu-input-field-default-placeholder-text-align-horizontal , LEFT );
  color: var( --comp-scu-input-text-scu-input-field-default-placeholder-color , rgba(89,89,89,1) );
  font-family: var( --comp-scu-input-text-scu-input-field-default-placeholder-font-family , 'Proxima Nova' );
  font-weight: var( --comp-scu-input-text-scu-input-field-default-placeholder-font-weight , 400 );
  line-height: var( --comp-scu-input-text-scu-input-field-default-placeholder-line-height , 17.58px );
  letter-spacing: var( --comp-scu-input-text-scu-input-field-default-placeholder-letter-spacing , 0px ); 
}

@mixin comp-scu-input-text-scu-input-field-default-placeholder--sizing {
  width: 239px;
  height: 18px;
}

@mixin comp-scu-input-text-scu-input-field-default-placeholder--width {
  width: 239px;
}

@mixin comp-scu-input-text-scu-input-field-default-placeholder--height {
  height: 18px;
}

@mixin comp-scu-input-text-scu-input-field-default-placeholder--absolute-layout {
  position: absolute;
  left: var( --comp-scu-input-text-scu-input-field-default-placeholder-left , 10px );
  right: var( --comp-scu-input-text-scu-input-field-default-placeholder-right , 14px );
  top: var( --comp-scu-input-text-scu-input-field-default-placeholder-top , 10px );
  bottom: var( --comp-scu-input-text-scu-input-field-default-placeholder-bottom , 8px ); 
}

@mixin comp-scu-input-text-scu-input-field-default-placeholder--html-autolayout {
  display: inline-block;
  margin-left: var( --comp-scu-input-text-scu-input-field-default-placeholder-left , 10px );
  margin-right: var( --comp-scu-input-text-scu-input-field-default-placeholder-right , 14px );
  margin-top: var( --comp-scu-input-text-scu-input-field-default-placeholder-top , 10px );
  margin-bottom: var( --comp-scu-input-text-scu-input-field-default-placeholder-bottom , 8px );
  width: calc( 100% - ( var( --comp-scu-input-text-scu-input-field-default-placeholder-left , 10px ) + var( --comp-scu-input-text-scu-input-field-default-placeholder-right , 14px ) ) );
}

// ================================
// [COMPONENT_TOKEN] comp-scu-input-text-scu-input-field-error

@mixin comp-scu-input-text-scu-input-field-error { 
  position: relative;
  background-color: var( --comp-scu-input-text-scu-input-field-error-background-color , rgba(255,255,255,1) );
  border-radius: var( --comp-scu-input-text-scu-input-field-error-corner-radius , 2px );
  border-width: var( --comp-scu-input-text-scu-input-field-error-stroke-weight , 1px );
  border-style: solid;
  border-color: var( --comp-scu-input-text-scu-input-field-error-stroke-color , rgba(208,51,57,1) ); 
}

@mixin comp-scu-input-text-scu-input-field-error--sizing {
  width: 263px;
  height: 36px;
}

@mixin comp-scu-input-text-scu-input-field-error--width {
  width: 263px;
}

@mixin comp-scu-input-text-scu-input-field-error--height {
  height: 36px;
}

@mixin comp-scu-input-text-scu-input-field-error--figma-autolayout { 
   
}

@mixin comp-scu-input-text-scu-input-field-error--absolute-layout {
  position: absolute;
  left: var( --comp-scu-input-text-scu-input-field-error-left , 0px );
  right: var( --comp-scu-input-text-scu-input-field-error-right , 0px );
  top: var( --comp-scu-input-text-scu-input-field-error-top , 0px );
  bottom: var( --comp-scu-input-text-scu-input-field-error-bottom , 0px ); 
}

@mixin comp-scu-input-text-scu-input-field-error--html-autolayout {
  display: inline-block;
  margin-left: var( --comp-scu-input-text-scu-input-field-error-left , 0px );
  margin-right: var( --comp-scu-input-text-scu-input-field-error-right , 0px );
  margin-top: var( --comp-scu-input-text-scu-input-field-error-top , 0px );
  margin-bottom: var( --comp-scu-input-text-scu-input-field-error-bottom , 0px );
  width: calc( 100% - ( var( --comp-scu-input-text-scu-input-field-error-left , 0px ) + var( --comp-scu-input-text-scu-input-field-error-right , 0px ) ) );
}

// ================================
// [TEXT_TOKEN] comp-scu-input-text-scu-input-field-error-input

@mixin comp-scu-input-text-scu-input-field-error-input { 
  position: relative;
  font-size: var( --comp-scu-input-text-scu-input-field-error-input-font-size , 15px );
  text-align: var( --comp-scu-input-text-scu-input-field-error-input-text-align-horizontal , LEFT );
  color: var( --comp-scu-input-text-scu-input-field-error-input-color , rgba(0,0,0,1) );
  font-family: var( --comp-scu-input-text-scu-input-field-error-input-font-family , 'Proxima Nova' );
  font-weight: var( --comp-scu-input-text-scu-input-field-error-input-font-weight , 400 );
  line-height: var( --comp-scu-input-text-scu-input-field-error-input-line-height , 17.58px );
  letter-spacing: var( --comp-scu-input-text-scu-input-field-error-input-letter-spacing , 0px ); 
}

@mixin comp-scu-input-text-scu-input-field-error-input--sizing {
  width: 238px;
  height: 18px;
}

@mixin comp-scu-input-text-scu-input-field-error-input--width {
  width: 238px;
}

@mixin comp-scu-input-text-scu-input-field-error-input--height {
  height: 18px;
}

@mixin comp-scu-input-text-scu-input-field-error-input--absolute-layout {
  position: absolute;
  left: var( --comp-scu-input-text-scu-input-field-error-input-left , 11px );
  right: var( --comp-scu-input-text-scu-input-field-error-input-right , 14px );
  top: var( --comp-scu-input-text-scu-input-field-error-input-top , 10px );
  bottom: var( --comp-scu-input-text-scu-input-field-error-input-bottom , 8px ); 
}

@mixin comp-scu-input-text-scu-input-field-error-input--html-autolayout {
  display: inline-block;
  margin-left: var( --comp-scu-input-text-scu-input-field-error-input-left , 11px );
  margin-right: var( --comp-scu-input-text-scu-input-field-error-input-right , 14px );
  margin-top: var( --comp-scu-input-text-scu-input-field-error-input-top , 10px );
  margin-bottom: var( --comp-scu-input-text-scu-input-field-error-input-bottom , 8px );
  width: calc( 100% - ( var( --comp-scu-input-text-scu-input-field-error-input-left , 11px ) + var( --comp-scu-input-text-scu-input-field-error-input-right , 14px ) ) );
}

// ================================
// [TEXT_TOKEN] comp-scu-input-text-scu-input-field-error-placeholder

@mixin comp-scu-input-text-scu-input-field-error-placeholder { 
  position: relative;
  font-size: var( --comp-scu-input-text-scu-input-field-error-placeholder-font-size , 15px );
  text-align: var( --comp-scu-input-text-scu-input-field-error-placeholder-text-align-horizontal , LEFT );
  color: var( --comp-scu-input-text-scu-input-field-error-placeholder-color , rgba(89,89,89,1) );
  font-family: var( --comp-scu-input-text-scu-input-field-error-placeholder-font-family , 'Proxima Nova' );
  font-weight: var( --comp-scu-input-text-scu-input-field-error-placeholder-font-weight , 400 );
  line-height: var( --comp-scu-input-text-scu-input-field-error-placeholder-line-height , 17.58px );
  letter-spacing: var( --comp-scu-input-text-scu-input-field-error-placeholder-letter-spacing , 0px ); 
}

@mixin comp-scu-input-text-scu-input-field-error-placeholder--sizing {
  width: 239px;
  height: 18px;
}

@mixin comp-scu-input-text-scu-input-field-error-placeholder--width {
  width: 239px;
}

@mixin comp-scu-input-text-scu-input-field-error-placeholder--height {
  height: 18px;
}

@mixin comp-scu-input-text-scu-input-field-error-placeholder--absolute-layout {
  position: absolute;
  left: var( --comp-scu-input-text-scu-input-field-error-placeholder-left , 10px );
  right: var( --comp-scu-input-text-scu-input-field-error-placeholder-right , 14px );
  top: var( --comp-scu-input-text-scu-input-field-error-placeholder-top , 10px );
  bottom: var( --comp-scu-input-text-scu-input-field-error-placeholder-bottom , 8px ); 
}

@mixin comp-scu-input-text-scu-input-field-error-placeholder--html-autolayout {
  display: inline-block;
  margin-left: var( --comp-scu-input-text-scu-input-field-error-placeholder-left , 10px );
  margin-right: var( --comp-scu-input-text-scu-input-field-error-placeholder-right , 14px );
  margin-top: var( --comp-scu-input-text-scu-input-field-error-placeholder-top , 10px );
  margin-bottom: var( --comp-scu-input-text-scu-input-field-error-placeholder-bottom , 8px );
  width: calc( 100% - ( var( --comp-scu-input-text-scu-input-field-error-placeholder-left , 10px ) + var( --comp-scu-input-text-scu-input-field-error-placeholder-right , 14px ) ) );
}

// ================================
// [COMPONENT_TOKEN] comp-scu-input-text-scu-input-error

@mixin comp-scu-input-text-scu-input-error { 
  position: relative;
  background-color: var( --comp-scu-input-text-scu-input-error-background-color , rgba(255,255,255,1) ); 
}

@mixin comp-scu-input-text-scu-input-error--sizing {
  width: 263px;
  height: 15px;
}

@mixin comp-scu-input-text-scu-input-error--width {
  width: 263px;
}

@mixin comp-scu-input-text-scu-input-error--height {
  height: 15px;
}

@mixin comp-scu-input-text-scu-input-error--figma-autolayout { 
   
}

@mixin comp-scu-input-text-scu-input-error--absolute-layout {
  position: absolute;
  left: var( --comp-scu-input-text-scu-input-error-left , 0px );
  right: var( --comp-scu-input-text-scu-input-error-right , 0px );
  bottom: var( --comp-scu-input-text-scu-input-error-bottom , 0px );
  height: var( --comp-scu-input-text-scu-input-error-height , 15px ); 
}

@mixin comp-scu-input-text-scu-input-error--html-autolayout {
  display: inline-block;
  margin-left: var( --comp-scu-input-text-scu-input-error-left , 0px );
  margin-right: var( --comp-scu-input-text-scu-input-error-right , 0px );
  margin-top: var( --comp-scu-input-text-scu-input-error-top , 57px );
  margin-bottom: var( --comp-scu-input-text-scu-input-error-bottom , 0px );
  width: calc( 100% - ( var( --comp-scu-input-text-scu-input-error-left , 0px ) + var( --comp-scu-input-text-scu-input-error-right , 0px ) ) );
}

// ================================
// [TEXT_TOKEN] comp-scu-input-text-scu-input-error-error

@mixin comp-scu-input-text-scu-input-error-error { 
  position: relative;
  font-size: var( --comp-scu-input-text-scu-input-error-error-font-size , 12px );
  text-align: var( --comp-scu-input-text-scu-input-error-error-text-align-horizontal , LEFT );
  color: var( --comp-scu-input-text-scu-input-error-error-color , rgba(208,51,57,1) );
  font-family: var( --comp-scu-input-text-scu-input-error-error-font-family , 'Proxima Nova' );
  font-weight: var( --comp-scu-input-text-scu-input-error-error-font-weight , 400 );
  line-height: var( --comp-scu-input-text-scu-input-error-error-line-height , 14.06px );
  letter-spacing: var( --comp-scu-input-text-scu-input-error-error-letter-spacing , 0px ); 
}

@mixin comp-scu-input-text-scu-input-error-error--sizing {
  width: 263px;
  height: 15px;
}

@mixin comp-scu-input-text-scu-input-error-error--width {
  width: 263px;
}

@mixin comp-scu-input-text-scu-input-error-error--height {
  height: 15px;
}

@mixin comp-scu-input-text-scu-input-error-error--absolute-layout {
  position: absolute;
  left: var( --comp-scu-input-text-scu-input-error-error-left , 0px );
  right: var( --comp-scu-input-text-scu-input-error-error-right , 0px );
  top: var( --comp-scu-input-text-scu-input-error-error-top , 0px );
  bottom: var( --comp-scu-input-text-scu-input-error-error-bottom , 0px ); 
}

@mixin comp-scu-input-text-scu-input-error-error--html-autolayout {
  display: inline-block;
  margin-left: var( --comp-scu-input-text-scu-input-error-error-left , 0px );
  margin-right: var( --comp-scu-input-text-scu-input-error-error-right , 0px );
  margin-top: var( --comp-scu-input-text-scu-input-error-error-top , 0px );
  margin-bottom: var( --comp-scu-input-text-scu-input-error-error-bottom , 0px );
  width: calc( 100% - ( var( --comp-scu-input-text-scu-input-error-error-left , 0px ) + var( --comp-scu-input-text-scu-input-error-error-right , 0px ) ) );
}

// ================================
// [COMPONENT_TOKEN] comp-scu-input-text-scu-input-label

@mixin comp-scu-input-text-scu-input-label { 
  position: relative;
  background-color: var( --comp-scu-input-text-scu-input-label-background-color , rgba(255,255,255,1) ); 
}

@mixin comp-scu-input-text-scu-input-label--sizing {
  width: 263px;
  height: 15px;
}

@mixin comp-scu-input-text-scu-input-label--width {
  width: 263px;
}

@mixin comp-scu-input-text-scu-input-label--height {
  height: 15px;
}

@mixin comp-scu-input-text-scu-input-label--figma-autolayout { 
   
}

@mixin comp-scu-input-text-scu-input-label--absolute-layout {
  position: absolute;
  left: var( --comp-scu-input-text-scu-input-label-left , 0px );
  right: var( --comp-scu-input-text-scu-input-label-right , 0px );
  top: var( --comp-scu-input-text-scu-input-label-top , 0px );
  height: var( --comp-scu-input-text-scu-input-label-height , 15px ); 
}

@mixin comp-scu-input-text-scu-input-label--html-autolayout {
  display: inline-block;
  margin-left: var( --comp-scu-input-text-scu-input-label-left , 0px );
  margin-right: var( --comp-scu-input-text-scu-input-label-right , 0px );
  margin-top: var( --comp-scu-input-text-scu-input-label-top , 0px );
  margin-bottom: var( --comp-scu-input-text-scu-input-label-bottom , 57px );
  width: calc( 100% - ( var( --comp-scu-input-text-scu-input-label-left , 0px ) + var( --comp-scu-input-text-scu-input-label-right , 0px ) ) );
}

// ================================
// [TEXT_TOKEN] comp-scu-input-text-scu-input-label-label

@mixin comp-scu-input-text-scu-input-label-label { 
  position: relative;
  font-size: var( --comp-scu-input-text-scu-input-label-label-font-size , 12px );
  text-align: var( --comp-scu-input-text-scu-input-label-label-text-align-horizontal , LEFT );
  color: var( --comp-scu-input-text-scu-input-label-label-color , rgba(0,0,0,1) );
  font-family: var( --comp-scu-input-text-scu-input-label-label-font-family , 'Proxima Nova' );
  font-weight: var( --comp-scu-input-text-scu-input-label-label-font-weight , 700 );
  line-height: var( --comp-scu-input-text-scu-input-label-label-line-height , 14.06px );
  letter-spacing: var( --comp-scu-input-text-scu-input-label-label-letter-spacing , 0px ); 
}

@mixin comp-scu-input-text-scu-input-label-label--sizing {
  width: 263px;
  height: 15px;
}

@mixin comp-scu-input-text-scu-input-label-label--width {
  width: 263px;
}

@mixin comp-scu-input-text-scu-input-label-label--height {
  height: 15px;
}

@mixin comp-scu-input-text-scu-input-label-label--absolute-layout {
  position: absolute;
  left: var( --comp-scu-input-text-scu-input-label-label-left , 0px );
  right: var( --comp-scu-input-text-scu-input-label-label-right , 0px );
  top: var( --comp-scu-input-text-scu-input-label-label-top , 0px );
  bottom: var( --comp-scu-input-text-scu-input-label-label-bottom , 0px ); 
}

@mixin comp-scu-input-text-scu-input-label-label--html-autolayout {
  display: inline-block;
  margin-left: var( --comp-scu-input-text-scu-input-label-label-left , 0px );
  margin-right: var( --comp-scu-input-text-scu-input-label-label-right , 0px );
  margin-top: var( --comp-scu-input-text-scu-input-label-label-top , 0px );
  margin-bottom: var( --comp-scu-input-text-scu-input-label-label-bottom , 0px );
  width: calc( 100% - ( var( --comp-scu-input-text-scu-input-label-label-left , 0px ) + var( --comp-scu-input-text-scu-input-label-label-right , 0px ) ) );
}

// ================================
// [COMPONENT_TOKEN] comp-scu-input-textarea

@mixin comp-scu-input-textarea { 
  position: relative; 
}

@mixin comp-scu-input-textarea--sizing {
  width: 285px;
  height: 128px;
}

@mixin comp-scu-input-textarea--width {
  width: 285px;
}

@mixin comp-scu-input-textarea--height {
  height: 128px;
}

@mixin comp-scu-input-textarea--figma-autolayout { 
   
}

@mixin comp-scu-input-textarea--absolute-layout {
   
}

@mixin comp-scu-input-textarea--html-autolayout {
  display: inline-block;
  margin-left: var( --comp-scu-input-textarea-left , 0px );
  margin-right: var( --comp-scu-input-textarea-right , 0px );
  margin-top: var( --comp-scu-input-textarea-top , 0px );
  margin-bottom: var( --comp-scu-input-textarea-bottom , 0px );
  width: calc( 100% - ( var( --comp-scu-input-textarea-left , 0px ) + var( --comp-scu-input-textarea-right , 0px ) ) );
}

// ================================
// [TEXT_TOKEN] comp-scu-input-textarea-label

@mixin comp-scu-input-textarea-label { 
  position: relative;
  font-size: var( --comp-scu-input-textarea-label-font-size , 12px );
  text-align: var( --comp-scu-input-textarea-label-text-align-horizontal , LEFT );
  color: var( --comp-scu-input-textarea-label-color , rgba(54,54,54,1) );
  font-family: var( --comp-scu-input-textarea-label-font-family , 'Proxima Nova' );
  font-weight: var( --comp-scu-input-textarea-label-font-weight , 700 );
  line-height: var( --comp-scu-input-textarea-label-line-height , 14.06px );
  letter-spacing: var( --comp-scu-input-textarea-label-letter-spacing , 0px ); 
}

@mixin comp-scu-input-textarea-label--sizing {
  width: 285px;
  height: 15px;
}

@mixin comp-scu-input-textarea-label--width {
  width: 285px;
}

@mixin comp-scu-input-textarea-label--height {
  height: 15px;
}

@mixin comp-scu-input-textarea-label--absolute-layout {
  position: absolute;
  left: var( --comp-scu-input-textarea-label-left , 0px );
  right: var( --comp-scu-input-textarea-label-right , 0px );
  top: var( --comp-scu-input-textarea-label-top , 0px );
  height: var( --comp-scu-input-textarea-label-height , 15px ); 
}

@mixin comp-scu-input-textarea-label--html-autolayout {
  display: inline-block;
  margin-left: var( --comp-scu-input-textarea-label-left , 0px );
  margin-right: var( --comp-scu-input-textarea-label-right , 0px );
  margin-top: var( --comp-scu-input-textarea-label-top , 0px );
  margin-bottom: var( --comp-scu-input-textarea-label-bottom , 113px );
  width: calc( 100% - ( var( --comp-scu-input-textarea-label-left , 0px ) + var( --comp-scu-input-textarea-label-right , 0px ) ) );
}

// ================================
// [COMPONENT_TOKEN] comp-scu-input-textarea-scu-input-error

@mixin comp-scu-input-textarea-scu-input-error { 
  position: relative;
  background-color: var( --comp-scu-input-textarea-scu-input-error-background-color , rgba(255,255,255,1) ); 
}

@mixin comp-scu-input-textarea-scu-input-error--sizing {
  width: 285px;
  height: 15px;
}

@mixin comp-scu-input-textarea-scu-input-error--width {
  width: 285px;
}

@mixin comp-scu-input-textarea-scu-input-error--height {
  height: 15px;
}

@mixin comp-scu-input-textarea-scu-input-error--figma-autolayout { 
   
}

@mixin comp-scu-input-textarea-scu-input-error--absolute-layout {
  position: absolute;
  left: var( --comp-scu-input-textarea-scu-input-error-left , 0px );
  right: var( --comp-scu-input-textarea-scu-input-error-right , 0px );
  bottom: var( --comp-scu-input-textarea-scu-input-error-bottom , 0px );
  height: var( --comp-scu-input-textarea-scu-input-error-height , 15px ); 
}

@mixin comp-scu-input-textarea-scu-input-error--html-autolayout {
  display: inline-block;
  margin-left: var( --comp-scu-input-textarea-scu-input-error-left , 0px );
  margin-right: var( --comp-scu-input-textarea-scu-input-error-right , 0px );
  margin-top: var( --comp-scu-input-textarea-scu-input-error-top , 113px );
  margin-bottom: var( --comp-scu-input-textarea-scu-input-error-bottom , 0px );
  width: calc( 100% - ( var( --comp-scu-input-textarea-scu-input-error-left , 0px ) + var( --comp-scu-input-textarea-scu-input-error-right , 0px ) ) );
}

// ================================
// [TEXT_TOKEN] comp-scu-input-textarea-scu-input-error-error

@mixin comp-scu-input-textarea-scu-input-error-error { 
  position: relative;
  font-size: var( --comp-scu-input-textarea-scu-input-error-error-font-size , 12px );
  text-align: var( --comp-scu-input-textarea-scu-input-error-error-text-align-horizontal , LEFT );
  color: var( --comp-scu-input-textarea-scu-input-error-error-color , rgba(208,51,57,1) );
  font-family: var( --comp-scu-input-textarea-scu-input-error-error-font-family , 'Proxima Nova' );
  font-weight: var( --comp-scu-input-textarea-scu-input-error-error-font-weight , 400 );
  line-height: var( --comp-scu-input-textarea-scu-input-error-error-line-height , 14.06px );
  letter-spacing: var( --comp-scu-input-textarea-scu-input-error-error-letter-spacing , 0px ); 
}

@mixin comp-scu-input-textarea-scu-input-error-error--sizing {
  width: 285px;
  height: 15px;
}

@mixin comp-scu-input-textarea-scu-input-error-error--width {
  width: 285px;
}

@mixin comp-scu-input-textarea-scu-input-error-error--height {
  height: 15px;
}

@mixin comp-scu-input-textarea-scu-input-error-error--absolute-layout {
  position: absolute;
  left: var( --comp-scu-input-textarea-scu-input-error-error-left , 0px );
  right: var( --comp-scu-input-textarea-scu-input-error-error-right , 0px );
  top: var( --comp-scu-input-textarea-scu-input-error-error-top , 0px );
  bottom: var( --comp-scu-input-textarea-scu-input-error-error-bottom , 0px ); 
}

@mixin comp-scu-input-textarea-scu-input-error-error--html-autolayout {
  display: inline-block;
  margin-left: var( --comp-scu-input-textarea-scu-input-error-error-left , 0px );
  margin-right: var( --comp-scu-input-textarea-scu-input-error-error-right , 0px );
  margin-top: var( --comp-scu-input-textarea-scu-input-error-error-top , 0px );
  margin-bottom: var( --comp-scu-input-textarea-scu-input-error-error-bottom , 0px );
  width: calc( 100% - ( var( --comp-scu-input-textarea-scu-input-error-error-left , 0px ) + var( --comp-scu-input-textarea-scu-input-error-error-right , 0px ) ) );
}

// ================================
// [COMPONENT_TOKEN] comp-scu-input-textarea-scu-input-field

@mixin comp-scu-input-textarea-scu-input-field { 
  position: relative;
  background-color: var( --comp-scu-input-textarea-scu-input-field-background-color , rgba(255,255,255,1) ); 
}

@mixin comp-scu-input-textarea-scu-input-field--sizing {
  width: 285px;
  height: 92px;
}

@mixin comp-scu-input-textarea-scu-input-field--width {
  width: 285px;
}

@mixin comp-scu-input-textarea-scu-input-field--height {
  height: 92px;
}

@mixin comp-scu-input-textarea-scu-input-field--figma-autolayout { 
   
}

@mixin comp-scu-input-textarea-scu-input-field--absolute-layout {
  position: absolute;
  left: var( --comp-scu-input-textarea-scu-input-field-left , 0px );
  right: var( --comp-scu-input-textarea-scu-input-field-right , 0px );
  top: var( --comp-scu-input-textarea-scu-input-field-top , 18px );
  bottom: var( --comp-scu-input-textarea-scu-input-field-bottom , 18px ); 
}

@mixin comp-scu-input-textarea-scu-input-field--html-autolayout {
  display: inline-block;
  margin-left: var( --comp-scu-input-textarea-scu-input-field-left , 0px );
  margin-right: var( --comp-scu-input-textarea-scu-input-field-right , 0px );
  margin-top: var( --comp-scu-input-textarea-scu-input-field-top , 18px );
  margin-bottom: var( --comp-scu-input-textarea-scu-input-field-bottom , 18px );
  width: calc( 100% - ( var( --comp-scu-input-textarea-scu-input-field-left , 0px ) + var( --comp-scu-input-textarea-scu-input-field-right , 0px ) ) );
}

// ================================
// [COMPONENT_TOKEN] comp-scu-input-textarea-scu-input-field-default

@mixin comp-scu-input-textarea-scu-input-field-default { 
  position: relative;
  background-color: var( --comp-scu-input-textarea-scu-input-field-default-background-color , rgba(255,255,255,1) );
  border-radius: var( --comp-scu-input-textarea-scu-input-field-default-corner-radius , 2px );
  border-width: var( --comp-scu-input-textarea-scu-input-field-default-stroke-weight , 1px );
  border-style: solid;
  border-color: var( --comp-scu-input-textarea-scu-input-field-default-stroke-color , rgba(196,196,196,1) ); 
}

@mixin comp-scu-input-textarea-scu-input-field-default--sizing {
  width: 285px;
  height: 92px;
}

@mixin comp-scu-input-textarea-scu-input-field-default--width {
  width: 285px;
}

@mixin comp-scu-input-textarea-scu-input-field-default--height {
  height: 92px;
}

@mixin comp-scu-input-textarea-scu-input-field-default--figma-autolayout { 
   
}

@mixin comp-scu-input-textarea-scu-input-field-default--absolute-layout {
  position: absolute;
  left: var( --comp-scu-input-textarea-scu-input-field-default-left , 0px );
  right: var( --comp-scu-input-textarea-scu-input-field-default-right , 0px );
  top: var( --comp-scu-input-textarea-scu-input-field-default-top , 0px );
  bottom: var( --comp-scu-input-textarea-scu-input-field-default-bottom , 0px ); 
}

@mixin comp-scu-input-textarea-scu-input-field-default--html-autolayout {
  display: inline-block;
  margin-left: var( --comp-scu-input-textarea-scu-input-field-default-left , 0px );
  margin-right: var( --comp-scu-input-textarea-scu-input-field-default-right , 0px );
  margin-top: var( --comp-scu-input-textarea-scu-input-field-default-top , 0px );
  margin-bottom: var( --comp-scu-input-textarea-scu-input-field-default-bottom , 0px );
  width: calc( 100% - ( var( --comp-scu-input-textarea-scu-input-field-default-left , 0px ) + var( --comp-scu-input-textarea-scu-input-field-default-right , 0px ) ) );
}

// ================================
// [TEXT_TOKEN] comp-scu-input-textarea-scu-input-field-default-input

@mixin comp-scu-input-textarea-scu-input-field-default-input { 
  position: relative;
  font-size: var( --comp-scu-input-textarea-scu-input-field-default-input-font-size , 15px );
  text-align: var( --comp-scu-input-textarea-scu-input-field-default-input-text-align-horizontal , LEFT );
  color: var( --comp-scu-input-textarea-scu-input-field-default-input-color , rgba(0,0,0,1) );
  font-family: var( --comp-scu-input-textarea-scu-input-field-default-input-font-family , 'Proxima Nova' );
  font-weight: var( --comp-scu-input-textarea-scu-input-field-default-input-font-weight , 400 );
  line-height: var( --comp-scu-input-textarea-scu-input-field-default-input-line-height , 17.58px );
  letter-spacing: var( --comp-scu-input-textarea-scu-input-field-default-input-letter-spacing , 0px ); 
}

@mixin comp-scu-input-textarea-scu-input-field-default-input--sizing {
  width: 260px;
  height: 18px;
}

@mixin comp-scu-input-textarea-scu-input-field-default-input--width {
  width: 260px;
}

@mixin comp-scu-input-textarea-scu-input-field-default-input--height {
  height: 18px;
}

@mixin comp-scu-input-textarea-scu-input-field-default-input--absolute-layout {
  position: absolute;
  left: var( --comp-scu-input-textarea-scu-input-field-default-input-left , 11px );
  right: var( --comp-scu-input-textarea-scu-input-field-default-input-right , 14px );
  top: var( --comp-scu-input-textarea-scu-input-field-default-input-top , 10px );
  bottom: var( --comp-scu-input-textarea-scu-input-field-default-input-bottom , 64px ); 
}

@mixin comp-scu-input-textarea-scu-input-field-default-input--html-autolayout {
  display: inline-block;
  margin-left: var( --comp-scu-input-textarea-scu-input-field-default-input-left , 11px );
  margin-right: var( --comp-scu-input-textarea-scu-input-field-default-input-right , 14px );
  margin-top: var( --comp-scu-input-textarea-scu-input-field-default-input-top , 10px );
  margin-bottom: var( --comp-scu-input-textarea-scu-input-field-default-input-bottom , 64px );
  width: calc( 100% - ( var( --comp-scu-input-textarea-scu-input-field-default-input-left , 11px ) + var( --comp-scu-input-textarea-scu-input-field-default-input-right , 14px ) ) );
}

// ================================
// [TEXT_TOKEN] comp-scu-input-textarea-scu-input-field-default-placeholder

@mixin comp-scu-input-textarea-scu-input-field-default-placeholder { 
  position: relative;
  font-size: var( --comp-scu-input-textarea-scu-input-field-default-placeholder-font-size , 15px );
  text-align: var( --comp-scu-input-textarea-scu-input-field-default-placeholder-text-align-horizontal , LEFT );
  color: var( --comp-scu-input-textarea-scu-input-field-default-placeholder-color , rgba(89,89,89,1) );
  font-family: var( --comp-scu-input-textarea-scu-input-field-default-placeholder-font-family , 'Proxima Nova' );
  font-weight: var( --comp-scu-input-textarea-scu-input-field-default-placeholder-font-weight , 400 );
  line-height: var( --comp-scu-input-textarea-scu-input-field-default-placeholder-line-height , 17.58px );
  letter-spacing: var( --comp-scu-input-textarea-scu-input-field-default-placeholder-letter-spacing , 0px ); 
}

@mixin comp-scu-input-textarea-scu-input-field-default-placeholder--sizing {
  width: 261px;
  height: 18px;
}

@mixin comp-scu-input-textarea-scu-input-field-default-placeholder--width {
  width: 261px;
}

@mixin comp-scu-input-textarea-scu-input-field-default-placeholder--height {
  height: 18px;
}

@mixin comp-scu-input-textarea-scu-input-field-default-placeholder--absolute-layout {
  position: absolute;
  left: var( --comp-scu-input-textarea-scu-input-field-default-placeholder-left , 10px );
  right: var( --comp-scu-input-textarea-scu-input-field-default-placeholder-right , 14px );
  top: var( --comp-scu-input-textarea-scu-input-field-default-placeholder-top , 10px );
  bottom: var( --comp-scu-input-textarea-scu-input-field-default-placeholder-bottom , 64px ); 
}

@mixin comp-scu-input-textarea-scu-input-field-default-placeholder--html-autolayout {
  display: inline-block;
  margin-left: var( --comp-scu-input-textarea-scu-input-field-default-placeholder-left , 10px );
  margin-right: var( --comp-scu-input-textarea-scu-input-field-default-placeholder-right , 14px );
  margin-top: var( --comp-scu-input-textarea-scu-input-field-default-placeholder-top , 10px );
  margin-bottom: var( --comp-scu-input-textarea-scu-input-field-default-placeholder-bottom , 64px );
  width: calc( 100% - ( var( --comp-scu-input-textarea-scu-input-field-default-placeholder-left , 10px ) + var( --comp-scu-input-textarea-scu-input-field-default-placeholder-right , 14px ) ) );
}

// ================================
// [COMPONENT_TOKEN] comp-scu-input-textarea-scu-input-field-error

@mixin comp-scu-input-textarea-scu-input-field-error { 
  position: relative;
  background-color: var( --comp-scu-input-textarea-scu-input-field-error-background-color , rgba(255,255,255,1) );
  border-radius: var( --comp-scu-input-textarea-scu-input-field-error-corner-radius , 2px );
  border-width: var( --comp-scu-input-textarea-scu-input-field-error-stroke-weight , 1px );
  border-style: solid;
  border-color: var( --comp-scu-input-textarea-scu-input-field-error-stroke-color , rgba(208,51,57,1) ); 
}

@mixin comp-scu-input-textarea-scu-input-field-error--sizing {
  width: 285px;
  height: 92px;
}

@mixin comp-scu-input-textarea-scu-input-field-error--width {
  width: 285px;
}

@mixin comp-scu-input-textarea-scu-input-field-error--height {
  height: 92px;
}

@mixin comp-scu-input-textarea-scu-input-field-error--figma-autolayout { 
   
}

@mixin comp-scu-input-textarea-scu-input-field-error--absolute-layout {
  position: absolute;
  left: var( --comp-scu-input-textarea-scu-input-field-error-left , 0px );
  right: var( --comp-scu-input-textarea-scu-input-field-error-right , 0px );
  top: var( --comp-scu-input-textarea-scu-input-field-error-top , 0px );
  bottom: var( --comp-scu-input-textarea-scu-input-field-error-bottom , 0px ); 
}

@mixin comp-scu-input-textarea-scu-input-field-error--html-autolayout {
  display: inline-block;
  margin-left: var( --comp-scu-input-textarea-scu-input-field-error-left , 0px );
  margin-right: var( --comp-scu-input-textarea-scu-input-field-error-right , 0px );
  margin-top: var( --comp-scu-input-textarea-scu-input-field-error-top , 0px );
  margin-bottom: var( --comp-scu-input-textarea-scu-input-field-error-bottom , 0px );
  width: calc( 100% - ( var( --comp-scu-input-textarea-scu-input-field-error-left , 0px ) + var( --comp-scu-input-textarea-scu-input-field-error-right , 0px ) ) );
}

// ================================
// [TEXT_TOKEN] comp-scu-input-textarea-scu-input-field-error-input

@mixin comp-scu-input-textarea-scu-input-field-error-input { 
  position: relative;
  font-size: var( --comp-scu-input-textarea-scu-input-field-error-input-font-size , 15px );
  text-align: var( --comp-scu-input-textarea-scu-input-field-error-input-text-align-horizontal , LEFT );
  color: var( --comp-scu-input-textarea-scu-input-field-error-input-color , rgba(0,0,0,1) );
  font-family: var( --comp-scu-input-textarea-scu-input-field-error-input-font-family , 'Proxima Nova' );
  font-weight: var( --comp-scu-input-textarea-scu-input-field-error-input-font-weight , 400 );
  line-height: var( --comp-scu-input-textarea-scu-input-field-error-input-line-height , 17.58px );
  letter-spacing: var( --comp-scu-input-textarea-scu-input-field-error-input-letter-spacing , 0px ); 
}

@mixin comp-scu-input-textarea-scu-input-field-error-input--sizing {
  width: 238px;
  height: 18px;
}

@mixin comp-scu-input-textarea-scu-input-field-error-input--width {
  width: 238px;
}

@mixin comp-scu-input-textarea-scu-input-field-error-input--height {
  height: 18px;
}

@mixin comp-scu-input-textarea-scu-input-field-error-input--absolute-layout {
  position: absolute;
  left: var( --comp-scu-input-textarea-scu-input-field-error-input-left , 11px );
  right: var( --comp-scu-input-textarea-scu-input-field-error-input-right , 36px );
  top: var( --comp-scu-input-textarea-scu-input-field-error-input-top , 10px );
  bottom: var( --comp-scu-input-textarea-scu-input-field-error-input-bottom , 64px ); 
}

@mixin comp-scu-input-textarea-scu-input-field-error-input--html-autolayout {
  display: inline-block;
  margin-left: var( --comp-scu-input-textarea-scu-input-field-error-input-left , 11px );
  margin-right: var( --comp-scu-input-textarea-scu-input-field-error-input-right , 36px );
  margin-top: var( --comp-scu-input-textarea-scu-input-field-error-input-top , 10px );
  margin-bottom: var( --comp-scu-input-textarea-scu-input-field-error-input-bottom , 64px );
  width: calc( 100% - ( var( --comp-scu-input-textarea-scu-input-field-error-input-left , 11px ) + var( --comp-scu-input-textarea-scu-input-field-error-input-right , 36px ) ) );
}

// ================================
// [TEXT_TOKEN] comp-scu-input-textarea-scu-input-field-error-placeholder

@mixin comp-scu-input-textarea-scu-input-field-error-placeholder { 
  position: relative;
  font-size: var( --comp-scu-input-textarea-scu-input-field-error-placeholder-font-size , 15px );
  text-align: var( --comp-scu-input-textarea-scu-input-field-error-placeholder-text-align-horizontal , LEFT );
  color: var( --comp-scu-input-textarea-scu-input-field-error-placeholder-color , rgba(89,89,89,1) );
  font-family: var( --comp-scu-input-textarea-scu-input-field-error-placeholder-font-family , 'Proxima Nova' );
  font-weight: var( --comp-scu-input-textarea-scu-input-field-error-placeholder-font-weight , 400 );
  line-height: var( --comp-scu-input-textarea-scu-input-field-error-placeholder-line-height , 17.58px );
  letter-spacing: var( --comp-scu-input-textarea-scu-input-field-error-placeholder-letter-spacing , 0px ); 
}

@mixin comp-scu-input-textarea-scu-input-field-error-placeholder--sizing {
  width: 239px;
  height: 18px;
}

@mixin comp-scu-input-textarea-scu-input-field-error-placeholder--width {
  width: 239px;
}

@mixin comp-scu-input-textarea-scu-input-field-error-placeholder--height {
  height: 18px;
}

@mixin comp-scu-input-textarea-scu-input-field-error-placeholder--absolute-layout {
  position: absolute;
  left: var( --comp-scu-input-textarea-scu-input-field-error-placeholder-left , 10px );
  right: var( --comp-scu-input-textarea-scu-input-field-error-placeholder-right , 36px );
  top: var( --comp-scu-input-textarea-scu-input-field-error-placeholder-top , 10px );
  bottom: var( --comp-scu-input-textarea-scu-input-field-error-placeholder-bottom , 64px ); 
}

@mixin comp-scu-input-textarea-scu-input-field-error-placeholder--html-autolayout {
  display: inline-block;
  margin-left: var( --comp-scu-input-textarea-scu-input-field-error-placeholder-left , 10px );
  margin-right: var( --comp-scu-input-textarea-scu-input-field-error-placeholder-right , 36px );
  margin-top: var( --comp-scu-input-textarea-scu-input-field-error-placeholder-top , 10px );
  margin-bottom: var( --comp-scu-input-textarea-scu-input-field-error-placeholder-bottom , 64px );
  width: calc( 100% - ( var( --comp-scu-input-textarea-scu-input-field-error-placeholder-left , 10px ) + var( --comp-scu-input-textarea-scu-input-field-error-placeholder-right , 36px ) ) );
}

// ================================
// [COMPONENT_TOKEN] comp-scu-input-radio

@mixin comp-scu-input-radio { 
  position: relative; 
}

@mixin comp-scu-input-radio--sizing {
  width: 263px;
  height: 34px;
}

@mixin comp-scu-input-radio--width {
  width: 263px;
}

@mixin comp-scu-input-radio--height {
  height: 34px;
}

@mixin comp-scu-input-radio--figma-autolayout { 
   
}

@mixin comp-scu-input-radio--absolute-layout {
   
}

@mixin comp-scu-input-radio--html-autolayout {
  display: inline-block;
  margin-left: var( --comp-scu-input-radio-left , 0px );
  margin-right: var( --comp-scu-input-radio-right , 0px );
  margin-top: var( --comp-scu-input-radio-top , 0px );
  margin-bottom: var( --comp-scu-input-radio-bottom , 0px );
  width: calc( 100% - ( var( --comp-scu-input-radio-left , 0px ) + var( --comp-scu-input-radio-right , 0px ) ) );
}

// ================================
// [COMPONENT_TOKEN] comp-scu-input-radio-default

@mixin comp-scu-input-radio-default { 
  position: relative;
  background-color: var( --comp-scu-input-radio-default-background-color , rgba(255,255,255,1) ); 
}

@mixin comp-scu-input-radio-default--sizing {
  width: 263px;
  height: 34px;
}

@mixin comp-scu-input-radio-default--width {
  width: 263px;
}

@mixin comp-scu-input-radio-default--height {
  height: 34px;
}

@mixin comp-scu-input-radio-default--figma-autolayout { 
   
}

@mixin comp-scu-input-radio-default--absolute-layout {
  position: absolute;
  left: var( --comp-scu-input-radio-default-left , 0px );
  right: var( --comp-scu-input-radio-default-right , 0px );
  top: var( --comp-scu-input-radio-default-top , 0px );
  bottom: var( --comp-scu-input-radio-default-bottom , 0px ); 
}

@mixin comp-scu-input-radio-default--html-autolayout {
  display: inline-block;
  margin-left: var( --comp-scu-input-radio-default-left , 0px );
  margin-right: var( --comp-scu-input-radio-default-right , 0px );
  margin-top: var( --comp-scu-input-radio-default-top , 0px );
  margin-bottom: var( --comp-scu-input-radio-default-bottom , 0px );
  width: calc( 100% - ( var( --comp-scu-input-radio-default-left , 0px ) + var( --comp-scu-input-radio-default-right , 0px ) ) );
}

// ================================
// [TEXT_TOKEN] comp-scu-input-radio-default-label

@mixin comp-scu-input-radio-default-label { 
  position: relative;
  font-size: var( --comp-scu-input-radio-default-label-font-size , 15px );
  text-align: var( --comp-scu-input-radio-default-label-text-align-horizontal , LEFT );
  color: var( --comp-scu-input-radio-default-label-color , rgba(0,0,0,1) );
  font-family: var( --comp-scu-input-radio-default-label-font-family , 'Proxima Nova' );
  font-weight: var( --comp-scu-input-radio-default-label-font-weight , 400 );
  line-height: var( --comp-scu-input-radio-default-label-line-height , 17.58px );
  letter-spacing: var( --comp-scu-input-radio-default-label-letter-spacing , 0px ); 
}

@mixin comp-scu-input-radio-default-label--sizing {
  width: 236px;
  height: 18px;
}

@mixin comp-scu-input-radio-default-label--width {
  width: 236px;
}

@mixin comp-scu-input-radio-default-label--height {
  height: 18px;
}

@mixin comp-scu-input-radio-default-label--absolute-layout {
  position: absolute;
  left: var( --comp-scu-input-radio-default-label-left , 27px );
  right: var( --comp-scu-input-radio-default-label-right , 0px );
  top: var( --comp-scu-input-radio-default-label-top , 0px );
  bottom: var( --comp-scu-input-radio-default-label-bottom , 16px ); 
}

@mixin comp-scu-input-radio-default-label--html-autolayout {
  display: inline-block;
  margin-left: var( --comp-scu-input-radio-default-label-left , 27px );
  margin-right: var( --comp-scu-input-radio-default-label-right , 0px );
  margin-top: var( --comp-scu-input-radio-default-label-top , 0px );
  margin-bottom: var( --comp-scu-input-radio-default-label-bottom , 16px );
  width: calc( 100% - ( var( --comp-scu-input-radio-default-label-left , 27px ) + var( --comp-scu-input-radio-default-label-right , 0px ) ) );
}

// ================================
// [COMPONENT_TOKEN] comp-scu-input-radio-default-scu-input-error

@mixin comp-scu-input-radio-default-scu-input-error { 
  position: relative;
  background-color: var( --comp-scu-input-radio-default-scu-input-error-background-color , rgba(255,255,255,1) ); 
}

@mixin comp-scu-input-radio-default-scu-input-error--sizing {
  width: 263px;
  height: 15px;
}

@mixin comp-scu-input-radio-default-scu-input-error--width {
  width: 263px;
}

@mixin comp-scu-input-radio-default-scu-input-error--height {
  height: 15px;
}

@mixin comp-scu-input-radio-default-scu-input-error--figma-autolayout { 
   
}

@mixin comp-scu-input-radio-default-scu-input-error--absolute-layout {
  position: absolute;
  left: var( --comp-scu-input-radio-default-scu-input-error-left , 0px );
  right: var( --comp-scu-input-radio-default-scu-input-error-right , 0px );
  bottom: var( --comp-scu-input-radio-default-scu-input-error-bottom , 0px );
  height: var( --comp-scu-input-radio-default-scu-input-error-height , 15px ); 
}

@mixin comp-scu-input-radio-default-scu-input-error--html-autolayout {
  display: inline-block;
  margin-left: var( --comp-scu-input-radio-default-scu-input-error-left , 0px );
  margin-right: var( --comp-scu-input-radio-default-scu-input-error-right , 0px );
  margin-top: var( --comp-scu-input-radio-default-scu-input-error-top , 19px );
  margin-bottom: var( --comp-scu-input-radio-default-scu-input-error-bottom , 0px );
  width: calc( 100% - ( var( --comp-scu-input-radio-default-scu-input-error-left , 0px ) + var( --comp-scu-input-radio-default-scu-input-error-right , 0px ) ) );
}

// ================================
// [TEXT_TOKEN] comp-scu-input-radio-default-scu-input-error-error

@mixin comp-scu-input-radio-default-scu-input-error-error { 
  position: relative;
  font-size: var( --comp-scu-input-radio-default-scu-input-error-error-font-size , 12px );
  text-align: var( --comp-scu-input-radio-default-scu-input-error-error-text-align-horizontal , LEFT );
  color: var( --comp-scu-input-radio-default-scu-input-error-error-color , rgba(208,51,57,1) );
  font-family: var( --comp-scu-input-radio-default-scu-input-error-error-font-family , 'Proxima Nova' );
  font-weight: var( --comp-scu-input-radio-default-scu-input-error-error-font-weight , 400 );
  line-height: var( --comp-scu-input-radio-default-scu-input-error-error-line-height , 14.06px );
  letter-spacing: var( --comp-scu-input-radio-default-scu-input-error-error-letter-spacing , 0px ); 
}

@mixin comp-scu-input-radio-default-scu-input-error-error--sizing {
  width: 263px;
  height: 15px;
}

@mixin comp-scu-input-radio-default-scu-input-error-error--width {
  width: 263px;
}

@mixin comp-scu-input-radio-default-scu-input-error-error--height {
  height: 15px;
}

@mixin comp-scu-input-radio-default-scu-input-error-error--absolute-layout {
  position: absolute;
  left: var( --comp-scu-input-radio-default-scu-input-error-error-left , 0px );
  right: var( --comp-scu-input-radio-default-scu-input-error-error-right , 0px );
  top: var( --comp-scu-input-radio-default-scu-input-error-error-top , 0px );
  bottom: var( --comp-scu-input-radio-default-scu-input-error-error-bottom , 0px ); 
}

@mixin comp-scu-input-radio-default-scu-input-error-error--html-autolayout {
  display: inline-block;
  margin-left: var( --comp-scu-input-radio-default-scu-input-error-error-left , 0px );
  margin-right: var( --comp-scu-input-radio-default-scu-input-error-error-right , 0px );
  margin-top: var( --comp-scu-input-radio-default-scu-input-error-error-top , 0px );
  margin-bottom: var( --comp-scu-input-radio-default-scu-input-error-error-bottom , 0px );
  width: calc( 100% - ( var( --comp-scu-input-radio-default-scu-input-error-error-left , 0px ) + var( --comp-scu-input-radio-default-scu-input-error-error-right , 0px ) ) );
}

// ================================
// [COMPONENT_TOKEN] comp-scu-input-radio-default-i-c-o-n-16

@mixin comp-scu-input-radio-default-i-c-o-n-16 { 
  position: relative;
  background-color: var( --comp-scu-input-radio-default-i-c-o-n-16-background-color , rgba(255,255,255,1) ); 
}

@mixin comp-scu-input-radio-default-i-c-o-n-16--sizing {
  width: 16px;
  height: 16px;
}

@mixin comp-scu-input-radio-default-i-c-o-n-16--width {
  width: 16px;
}

@mixin comp-scu-input-radio-default-i-c-o-n-16--height {
  height: 16px;
}

@mixin comp-scu-input-radio-default-i-c-o-n-16--figma-autolayout { 
   
}

@mixin comp-scu-input-radio-default-i-c-o-n-16--absolute-layout {
  position: absolute;
  left: var( --comp-scu-input-radio-default-i-c-o-n-16-left , 0px );
  width: var( --comp-scu-input-radio-default-i-c-o-n-16-width , 16px );
  top: var( --comp-scu-input-radio-default-i-c-o-n-16-top , 0px );
  height: var( --comp-scu-input-radio-default-i-c-o-n-16-height , 16px ); 
}

@mixin comp-scu-input-radio-default-i-c-o-n-16--html-autolayout {
  display: inline-block;
  margin-left: var( --comp-scu-input-radio-default-i-c-o-n-16-left , 0px );
  margin-right: var( --comp-scu-input-radio-default-i-c-o-n-16-right , 247px );
  margin-top: var( --comp-scu-input-radio-default-i-c-o-n-16-top , 0px );
  margin-bottom: var( --comp-scu-input-radio-default-i-c-o-n-16-bottom , 18px );
  width: calc( 100% - ( var( --comp-scu-input-radio-default-i-c-o-n-16-left , 0px ) + var( --comp-scu-input-radio-default-i-c-o-n-16-right , 247px ) ) );
}

// ================================
// [COMPONENT_TOKEN] comp-scu-input-radio-selected

@mixin comp-scu-input-radio-selected { 
  position: relative;
  background-color: var( --comp-scu-input-radio-selected-background-color , rgba(255,255,255,1) ); 
}

@mixin comp-scu-input-radio-selected--sizing {
  width: 263px;
  height: 34px;
}

@mixin comp-scu-input-radio-selected--width {
  width: 263px;
}

@mixin comp-scu-input-radio-selected--height {
  height: 34px;
}

@mixin comp-scu-input-radio-selected--figma-autolayout { 
   
}

@mixin comp-scu-input-radio-selected--absolute-layout {
  position: absolute;
  left: var( --comp-scu-input-radio-selected-left , 0px );
  right: var( --comp-scu-input-radio-selected-right , 0px );
  top: var( --comp-scu-input-radio-selected-top , 0px );
  bottom: var( --comp-scu-input-radio-selected-bottom , 0px ); 
}

@mixin comp-scu-input-radio-selected--html-autolayout {
  display: inline-block;
  margin-left: var( --comp-scu-input-radio-selected-left , 0px );
  margin-right: var( --comp-scu-input-radio-selected-right , 0px );
  margin-top: var( --comp-scu-input-radio-selected-top , 0px );
  margin-bottom: var( --comp-scu-input-radio-selected-bottom , 0px );
  width: calc( 100% - ( var( --comp-scu-input-radio-selected-left , 0px ) + var( --comp-scu-input-radio-selected-right , 0px ) ) );
}

// ================================
// [TEXT_TOKEN] comp-scu-input-radio-selected-label

@mixin comp-scu-input-radio-selected-label { 
  position: relative;
  font-size: var( --comp-scu-input-radio-selected-label-font-size , 15px );
  text-align: var( --comp-scu-input-radio-selected-label-text-align-horizontal , LEFT );
  color: var( --comp-scu-input-radio-selected-label-color , rgba(0,0,0,1) );
  font-family: var( --comp-scu-input-radio-selected-label-font-family , 'Proxima Nova' );
  font-weight: var( --comp-scu-input-radio-selected-label-font-weight , 400 );
  line-height: var( --comp-scu-input-radio-selected-label-line-height , 17.58px );
  letter-spacing: var( --comp-scu-input-radio-selected-label-letter-spacing , 0px ); 
}

@mixin comp-scu-input-radio-selected-label--sizing {
  width: 236px;
  height: 18px;
}

@mixin comp-scu-input-radio-selected-label--width {
  width: 236px;
}

@mixin comp-scu-input-radio-selected-label--height {
  height: 18px;
}

@mixin comp-scu-input-radio-selected-label--absolute-layout {
  position: absolute;
  left: var( --comp-scu-input-radio-selected-label-left , 27px );
  right: var( --comp-scu-input-radio-selected-label-right , 0px );
  top: var( --comp-scu-input-radio-selected-label-top , 0px );
  bottom: var( --comp-scu-input-radio-selected-label-bottom , 16px ); 
}

@mixin comp-scu-input-radio-selected-label--html-autolayout {
  display: inline-block;
  margin-left: var( --comp-scu-input-radio-selected-label-left , 27px );
  margin-right: var( --comp-scu-input-radio-selected-label-right , 0px );
  margin-top: var( --comp-scu-input-radio-selected-label-top , 0px );
  margin-bottom: var( --comp-scu-input-radio-selected-label-bottom , 16px );
  width: calc( 100% - ( var( --comp-scu-input-radio-selected-label-left , 27px ) + var( --comp-scu-input-radio-selected-label-right , 0px ) ) );
}

// ================================
// [COMPONENT_TOKEN] comp-scu-input-radio-selected-scu-input-error

@mixin comp-scu-input-radio-selected-scu-input-error { 
  position: relative;
  background-color: var( --comp-scu-input-radio-selected-scu-input-error-background-color , rgba(255,255,255,1) ); 
}

@mixin comp-scu-input-radio-selected-scu-input-error--sizing {
  width: 263px;
  height: 15px;
}

@mixin comp-scu-input-radio-selected-scu-input-error--width {
  width: 263px;
}

@mixin comp-scu-input-radio-selected-scu-input-error--height {
  height: 15px;
}

@mixin comp-scu-input-radio-selected-scu-input-error--figma-autolayout { 
   
}

@mixin comp-scu-input-radio-selected-scu-input-error--absolute-layout {
  position: absolute;
  left: var( --comp-scu-input-radio-selected-scu-input-error-left , 0px );
  right: var( --comp-scu-input-radio-selected-scu-input-error-right , 0px );
  bottom: var( --comp-scu-input-radio-selected-scu-input-error-bottom , 0px );
  height: var( --comp-scu-input-radio-selected-scu-input-error-height , 15px ); 
}

@mixin comp-scu-input-radio-selected-scu-input-error--html-autolayout {
  display: inline-block;
  margin-left: var( --comp-scu-input-radio-selected-scu-input-error-left , 0px );
  margin-right: var( --comp-scu-input-radio-selected-scu-input-error-right , 0px );
  margin-top: var( --comp-scu-input-radio-selected-scu-input-error-top , 19px );
  margin-bottom: var( --comp-scu-input-radio-selected-scu-input-error-bottom , 0px );
  width: calc( 100% - ( var( --comp-scu-input-radio-selected-scu-input-error-left , 0px ) + var( --comp-scu-input-radio-selected-scu-input-error-right , 0px ) ) );
}

// ================================
// [TEXT_TOKEN] comp-scu-input-radio-selected-scu-input-error-error

@mixin comp-scu-input-radio-selected-scu-input-error-error { 
  position: relative;
  font-size: var( --comp-scu-input-radio-selected-scu-input-error-error-font-size , 12px );
  text-align: var( --comp-scu-input-radio-selected-scu-input-error-error-text-align-horizontal , LEFT );
  color: var( --comp-scu-input-radio-selected-scu-input-error-error-color , rgba(208,51,57,1) );
  font-family: var( --comp-scu-input-radio-selected-scu-input-error-error-font-family , 'Proxima Nova' );
  font-weight: var( --comp-scu-input-radio-selected-scu-input-error-error-font-weight , 400 );
  line-height: var( --comp-scu-input-radio-selected-scu-input-error-error-line-height , 14.06px );
  letter-spacing: var( --comp-scu-input-radio-selected-scu-input-error-error-letter-spacing , 0px ); 
}

@mixin comp-scu-input-radio-selected-scu-input-error-error--sizing {
  width: 263px;
  height: 15px;
}

@mixin comp-scu-input-radio-selected-scu-input-error-error--width {
  width: 263px;
}

@mixin comp-scu-input-radio-selected-scu-input-error-error--height {
  height: 15px;
}

@mixin comp-scu-input-radio-selected-scu-input-error-error--absolute-layout {
  position: absolute;
  left: var( --comp-scu-input-radio-selected-scu-input-error-error-left , 0px );
  right: var( --comp-scu-input-radio-selected-scu-input-error-error-right , 0px );
  top: var( --comp-scu-input-radio-selected-scu-input-error-error-top , 0px );
  bottom: var( --comp-scu-input-radio-selected-scu-input-error-error-bottom , 0px ); 
}

@mixin comp-scu-input-radio-selected-scu-input-error-error--html-autolayout {
  display: inline-block;
  margin-left: var( --comp-scu-input-radio-selected-scu-input-error-error-left , 0px );
  margin-right: var( --comp-scu-input-radio-selected-scu-input-error-error-right , 0px );
  margin-top: var( --comp-scu-input-radio-selected-scu-input-error-error-top , 0px );
  margin-bottom: var( --comp-scu-input-radio-selected-scu-input-error-error-bottom , 0px );
  width: calc( 100% - ( var( --comp-scu-input-radio-selected-scu-input-error-error-left , 0px ) + var( --comp-scu-input-radio-selected-scu-input-error-error-right , 0px ) ) );
}

// ================================
// [COMPONENT_TOKEN] comp-scu-input-radio-selected-i-c-o-n-16

@mixin comp-scu-input-radio-selected-i-c-o-n-16 { 
  position: relative;
  background-color: var( --comp-scu-input-radio-selected-i-c-o-n-16-background-color , rgba(255,255,255,1) ); 
}

@mixin comp-scu-input-radio-selected-i-c-o-n-16--sizing {
  width: 16px;
  height: 16px;
}

@mixin comp-scu-input-radio-selected-i-c-o-n-16--width {
  width: 16px;
}

@mixin comp-scu-input-radio-selected-i-c-o-n-16--height {
  height: 16px;
}

@mixin comp-scu-input-radio-selected-i-c-o-n-16--figma-autolayout { 
   
}

@mixin comp-scu-input-radio-selected-i-c-o-n-16--absolute-layout {
  position: absolute;
  left: var( --comp-scu-input-radio-selected-i-c-o-n-16-left , 0px );
  width: var( --comp-scu-input-radio-selected-i-c-o-n-16-width , 16px );
  top: var( --comp-scu-input-radio-selected-i-c-o-n-16-top , 0px );
  height: var( --comp-scu-input-radio-selected-i-c-o-n-16-height , 16px ); 
}

@mixin comp-scu-input-radio-selected-i-c-o-n-16--html-autolayout {
  display: inline-block;
  margin-left: var( --comp-scu-input-radio-selected-i-c-o-n-16-left , 0px );
  margin-right: var( --comp-scu-input-radio-selected-i-c-o-n-16-right , 247px );
  margin-top: var( --comp-scu-input-radio-selected-i-c-o-n-16-top , 0px );
  margin-bottom: var( --comp-scu-input-radio-selected-i-c-o-n-16-bottom , 18px );
  width: calc( 100% - ( var( --comp-scu-input-radio-selected-i-c-o-n-16-left , 0px ) + var( --comp-scu-input-radio-selected-i-c-o-n-16-right , 247px ) ) );
}

// ================================
// [COMPONENT_TOKEN] comp-scu-input-checkbox

@mixin comp-scu-input-checkbox { 
  position: relative; 
}

@mixin comp-scu-input-checkbox--sizing {
  width: 263px;
  height: 34px;
}

@mixin comp-scu-input-checkbox--width {
  width: 263px;
}

@mixin comp-scu-input-checkbox--height {
  height: 34px;
}

@mixin comp-scu-input-checkbox--figma-autolayout { 
   
}

@mixin comp-scu-input-checkbox--absolute-layout {
   
}

@mixin comp-scu-input-checkbox--html-autolayout {
  display: inline-block;
  margin-left: var( --comp-scu-input-checkbox-left , 0px );
  margin-right: var( --comp-scu-input-checkbox-right , 0px );
  margin-top: var( --comp-scu-input-checkbox-top , 0px );
  margin-bottom: var( --comp-scu-input-checkbox-bottom , 0px );
  width: calc( 100% - ( var( --comp-scu-input-checkbox-left , 0px ) + var( --comp-scu-input-checkbox-right , 0px ) ) );
}

// ================================
// [COMPONENT_TOKEN] comp-scu-input-checkbox-default

@mixin comp-scu-input-checkbox-default { 
  position: relative;
  background-color: var( --comp-scu-input-checkbox-default-background-color , rgba(255,255,255,1) ); 
}

@mixin comp-scu-input-checkbox-default--sizing {
  width: 263px;
  height: 34px;
}

@mixin comp-scu-input-checkbox-default--width {
  width: 263px;
}

@mixin comp-scu-input-checkbox-default--height {
  height: 34px;
}

@mixin comp-scu-input-checkbox-default--figma-autolayout { 
   
}

@mixin comp-scu-input-checkbox-default--absolute-layout {
  position: absolute;
  left: var( --comp-scu-input-checkbox-default-left , 0px );
  right: var( --comp-scu-input-checkbox-default-right , 0px );
  top: var( --comp-scu-input-checkbox-default-top , 0px );
  bottom: var( --comp-scu-input-checkbox-default-bottom , 0px ); 
}

@mixin comp-scu-input-checkbox-default--html-autolayout {
  display: inline-block;
  margin-left: var( --comp-scu-input-checkbox-default-left , 0px );
  margin-right: var( --comp-scu-input-checkbox-default-right , 0px );
  margin-top: var( --comp-scu-input-checkbox-default-top , 0px );
  margin-bottom: var( --comp-scu-input-checkbox-default-bottom , 0px );
  width: calc( 100% - ( var( --comp-scu-input-checkbox-default-left , 0px ) + var( --comp-scu-input-checkbox-default-right , 0px ) ) );
}

// ================================
// [TEXT_TOKEN] comp-scu-input-checkbox-default-label

@mixin comp-scu-input-checkbox-default-label { 
  position: relative;
  font-size: var( --comp-scu-input-checkbox-default-label-font-size , 15px );
  text-align: var( --comp-scu-input-checkbox-default-label-text-align-horizontal , LEFT );
  color: var( --comp-scu-input-checkbox-default-label-color , rgba(0,0,0,1) );
  font-family: var( --comp-scu-input-checkbox-default-label-font-family , 'Proxima Nova' );
  font-weight: var( --comp-scu-input-checkbox-default-label-font-weight , 400 );
  line-height: var( --comp-scu-input-checkbox-default-label-line-height , 17.58px );
  letter-spacing: var( --comp-scu-input-checkbox-default-label-letter-spacing , 0px ); 
}

@mixin comp-scu-input-checkbox-default-label--sizing {
  width: 236px;
  height: 18px;
}

@mixin comp-scu-input-checkbox-default-label--width {
  width: 236px;
}

@mixin comp-scu-input-checkbox-default-label--height {
  height: 18px;
}

@mixin comp-scu-input-checkbox-default-label--absolute-layout {
  position: absolute;
  left: var( --comp-scu-input-checkbox-default-label-left , 27px );
  right: var( --comp-scu-input-checkbox-default-label-right , 0px );
  top: var( --comp-scu-input-checkbox-default-label-top , 0px );
  height: var( --comp-scu-input-checkbox-default-label-height , 18px ); 
}

@mixin comp-scu-input-checkbox-default-label--html-autolayout {
  display: inline-block;
  margin-left: var( --comp-scu-input-checkbox-default-label-left , 27px );
  margin-right: var( --comp-scu-input-checkbox-default-label-right , 0px );
  margin-top: var( --comp-scu-input-checkbox-default-label-top , 0px );
  margin-bottom: var( --comp-scu-input-checkbox-default-label-bottom , 16px );
  width: calc( 100% - ( var( --comp-scu-input-checkbox-default-label-left , 27px ) + var( --comp-scu-input-checkbox-default-label-right , 0px ) ) );
}

// ================================
// [COMPONENT_TOKEN] comp-scu-input-checkbox-default-scu-input-error

@mixin comp-scu-input-checkbox-default-scu-input-error { 
  position: relative;
  background-color: var( --comp-scu-input-checkbox-default-scu-input-error-background-color , rgba(255,255,255,1) ); 
}

@mixin comp-scu-input-checkbox-default-scu-input-error--sizing {
  width: 263px;
  height: 15px;
}

@mixin comp-scu-input-checkbox-default-scu-input-error--width {
  width: 263px;
}

@mixin comp-scu-input-checkbox-default-scu-input-error--height {
  height: 15px;
}

@mixin comp-scu-input-checkbox-default-scu-input-error--figma-autolayout { 
   
}

@mixin comp-scu-input-checkbox-default-scu-input-error--absolute-layout {
  position: absolute;
  left: var( --comp-scu-input-checkbox-default-scu-input-error-left , 0px );
  right: var( --comp-scu-input-checkbox-default-scu-input-error-right , 0px );
  bottom: var( --comp-scu-input-checkbox-default-scu-input-error-bottom , 3px );
  height: var( --comp-scu-input-checkbox-default-scu-input-error-height , 15px ); 
}

@mixin comp-scu-input-checkbox-default-scu-input-error--html-autolayout {
  display: inline-block;
  margin-left: var( --comp-scu-input-checkbox-default-scu-input-error-left , 0px );
  margin-right: var( --comp-scu-input-checkbox-default-scu-input-error-right , 0px );
  margin-top: var( --comp-scu-input-checkbox-default-scu-input-error-top , 16px );
  margin-bottom: var( --comp-scu-input-checkbox-default-scu-input-error-bottom , 3px );
  width: calc( 100% - ( var( --comp-scu-input-checkbox-default-scu-input-error-left , 0px ) + var( --comp-scu-input-checkbox-default-scu-input-error-right , 0px ) ) );
}

// ================================
// [TEXT_TOKEN] comp-scu-input-checkbox-default-scu-input-error-error

@mixin comp-scu-input-checkbox-default-scu-input-error-error { 
  position: relative;
  font-size: var( --comp-scu-input-checkbox-default-scu-input-error-error-font-size , 12px );
  text-align: var( --comp-scu-input-checkbox-default-scu-input-error-error-text-align-horizontal , LEFT );
  color: var( --comp-scu-input-checkbox-default-scu-input-error-error-color , rgba(208,51,57,1) );
  font-family: var( --comp-scu-input-checkbox-default-scu-input-error-error-font-family , 'Proxima Nova' );
  font-weight: var( --comp-scu-input-checkbox-default-scu-input-error-error-font-weight , 400 );
  line-height: var( --comp-scu-input-checkbox-default-scu-input-error-error-line-height , 14.06px );
  letter-spacing: var( --comp-scu-input-checkbox-default-scu-input-error-error-letter-spacing , 0px ); 
}

@mixin comp-scu-input-checkbox-default-scu-input-error-error--sizing {
  width: 263px;
  height: 15px;
}

@mixin comp-scu-input-checkbox-default-scu-input-error-error--width {
  width: 263px;
}

@mixin comp-scu-input-checkbox-default-scu-input-error-error--height {
  height: 15px;
}

@mixin comp-scu-input-checkbox-default-scu-input-error-error--absolute-layout {
  position: absolute;
  left: var( --comp-scu-input-checkbox-default-scu-input-error-error-left , 0px );
  right: var( --comp-scu-input-checkbox-default-scu-input-error-error-right , 0px );
  top: var( --comp-scu-input-checkbox-default-scu-input-error-error-top , 0px );
  bottom: var( --comp-scu-input-checkbox-default-scu-input-error-error-bottom , 0px ); 
}

@mixin comp-scu-input-checkbox-default-scu-input-error-error--html-autolayout {
  display: inline-block;
  margin-left: var( --comp-scu-input-checkbox-default-scu-input-error-error-left , 0px );
  margin-right: var( --comp-scu-input-checkbox-default-scu-input-error-error-right , 0px );
  margin-top: var( --comp-scu-input-checkbox-default-scu-input-error-error-top , 0px );
  margin-bottom: var( --comp-scu-input-checkbox-default-scu-input-error-error-bottom , 0px );
  width: calc( 100% - ( var( --comp-scu-input-checkbox-default-scu-input-error-error-left , 0px ) + var( --comp-scu-input-checkbox-default-scu-input-error-error-right , 0px ) ) );
}

// ================================
// [COMPONENT_TOKEN] comp-scu-input-checkbox-default-i-c-o-n-16

@mixin comp-scu-input-checkbox-default-i-c-o-n-16 { 
  position: relative;
  background-color: var( --comp-scu-input-checkbox-default-i-c-o-n-16-background-color , rgba(255,255,255,1) ); 
}

@mixin comp-scu-input-checkbox-default-i-c-o-n-16--sizing {
  width: 16px;
  height: 16px;
}

@mixin comp-scu-input-checkbox-default-i-c-o-n-16--width {
  width: 16px;
}

@mixin comp-scu-input-checkbox-default-i-c-o-n-16--height {
  height: 16px;
}

@mixin comp-scu-input-checkbox-default-i-c-o-n-16--figma-autolayout { 
   
}

@mixin comp-scu-input-checkbox-default-i-c-o-n-16--absolute-layout {
  position: absolute;
  left: var( --comp-scu-input-checkbox-default-i-c-o-n-16-left , 0px );
  width: var( --comp-scu-input-checkbox-default-i-c-o-n-16-width , 16px );
  top: var( --comp-scu-input-checkbox-default-i-c-o-n-16-top , 0px );
  height: var( --comp-scu-input-checkbox-default-i-c-o-n-16-height , 16px ); 
}

@mixin comp-scu-input-checkbox-default-i-c-o-n-16--html-autolayout {
  display: inline-block;
  margin-left: var( --comp-scu-input-checkbox-default-i-c-o-n-16-left , 0px );
  margin-right: var( --comp-scu-input-checkbox-default-i-c-o-n-16-right , 247px );
  margin-top: var( --comp-scu-input-checkbox-default-i-c-o-n-16-top , 0px );
  margin-bottom: var( --comp-scu-input-checkbox-default-i-c-o-n-16-bottom , 18px );
  width: calc( 100% - ( var( --comp-scu-input-checkbox-default-i-c-o-n-16-left , 0px ) + var( --comp-scu-input-checkbox-default-i-c-o-n-16-right , 247px ) ) );
}

// ================================
// [COMPONENT_TOKEN] comp-scu-input-checkbox-selected

@mixin comp-scu-input-checkbox-selected { 
  position: relative;
  background-color: var( --comp-scu-input-checkbox-selected-background-color , rgba(255,255,255,1) ); 
}

@mixin comp-scu-input-checkbox-selected--sizing {
  width: 263px;
  height: 34px;
}

@mixin comp-scu-input-checkbox-selected--width {
  width: 263px;
}

@mixin comp-scu-input-checkbox-selected--height {
  height: 34px;
}

@mixin comp-scu-input-checkbox-selected--figma-autolayout { 
   
}

@mixin comp-scu-input-checkbox-selected--absolute-layout {
  position: absolute;
  left: var( --comp-scu-input-checkbox-selected-left , 0px );
  right: var( --comp-scu-input-checkbox-selected-right , 0px );
  top: var( --comp-scu-input-checkbox-selected-top , 0px );
  bottom: var( --comp-scu-input-checkbox-selected-bottom , 0px ); 
}

@mixin comp-scu-input-checkbox-selected--html-autolayout {
  display: inline-block;
  margin-left: var( --comp-scu-input-checkbox-selected-left , 0px );
  margin-right: var( --comp-scu-input-checkbox-selected-right , 0px );
  margin-top: var( --comp-scu-input-checkbox-selected-top , 0px );
  margin-bottom: var( --comp-scu-input-checkbox-selected-bottom , 0px );
  width: calc( 100% - ( var( --comp-scu-input-checkbox-selected-left , 0px ) + var( --comp-scu-input-checkbox-selected-right , 0px ) ) );
}

// ================================
// [TEXT_TOKEN] comp-scu-input-checkbox-selected-label

@mixin comp-scu-input-checkbox-selected-label { 
  position: relative;
  font-size: var( --comp-scu-input-checkbox-selected-label-font-size , 15px );
  text-align: var( --comp-scu-input-checkbox-selected-label-text-align-horizontal , LEFT );
  color: var( --comp-scu-input-checkbox-selected-label-color , rgba(0,0,0,1) );
  font-family: var( --comp-scu-input-checkbox-selected-label-font-family , 'Proxima Nova' );
  font-weight: var( --comp-scu-input-checkbox-selected-label-font-weight , 400 );
  line-height: var( --comp-scu-input-checkbox-selected-label-line-height , 17.58px );
  letter-spacing: var( --comp-scu-input-checkbox-selected-label-letter-spacing , 0px ); 
}

@mixin comp-scu-input-checkbox-selected-label--sizing {
  width: 236px;
  height: 18px;
}

@mixin comp-scu-input-checkbox-selected-label--width {
  width: 236px;
}

@mixin comp-scu-input-checkbox-selected-label--height {
  height: 18px;
}

@mixin comp-scu-input-checkbox-selected-label--absolute-layout {
  position: absolute;
  left: var( --comp-scu-input-checkbox-selected-label-left , 27px );
  right: var( --comp-scu-input-checkbox-selected-label-right , 0px );
  top: var( --comp-scu-input-checkbox-selected-label-top , 0px );
  height: var( --comp-scu-input-checkbox-selected-label-height , 18px ); 
}

@mixin comp-scu-input-checkbox-selected-label--html-autolayout {
  display: inline-block;
  margin-left: var( --comp-scu-input-checkbox-selected-label-left , 27px );
  margin-right: var( --comp-scu-input-checkbox-selected-label-right , 0px );
  margin-top: var( --comp-scu-input-checkbox-selected-label-top , 0px );
  margin-bottom: var( --comp-scu-input-checkbox-selected-label-bottom , 16px );
  width: calc( 100% - ( var( --comp-scu-input-checkbox-selected-label-left , 27px ) + var( --comp-scu-input-checkbox-selected-label-right , 0px ) ) );
}

// ================================
// [COMPONENT_TOKEN] comp-scu-input-checkbox-selected-scu-input-error

@mixin comp-scu-input-checkbox-selected-scu-input-error { 
  position: relative;
  background-color: var( --comp-scu-input-checkbox-selected-scu-input-error-background-color , rgba(255,255,255,1) ); 
}

@mixin comp-scu-input-checkbox-selected-scu-input-error--sizing {
  width: 263px;
  height: 15px;
}

@mixin comp-scu-input-checkbox-selected-scu-input-error--width {
  width: 263px;
}

@mixin comp-scu-input-checkbox-selected-scu-input-error--height {
  height: 15px;
}

@mixin comp-scu-input-checkbox-selected-scu-input-error--figma-autolayout { 
   
}

@mixin comp-scu-input-checkbox-selected-scu-input-error--absolute-layout {
  position: absolute;
  left: var( --comp-scu-input-checkbox-selected-scu-input-error-left , 0px );
  right: var( --comp-scu-input-checkbox-selected-scu-input-error-right , 0px );
  bottom: var( --comp-scu-input-checkbox-selected-scu-input-error-bottom , -3px );
  height: var( --comp-scu-input-checkbox-selected-scu-input-error-height , 15px ); 
}

@mixin comp-scu-input-checkbox-selected-scu-input-error--html-autolayout {
  display: inline-block;
  margin-left: var( --comp-scu-input-checkbox-selected-scu-input-error-left , 0px );
  margin-right: var( --comp-scu-input-checkbox-selected-scu-input-error-right , 0px );
  margin-top: var( --comp-scu-input-checkbox-selected-scu-input-error-top , 22px );
  margin-bottom: var( --comp-scu-input-checkbox-selected-scu-input-error-bottom , -3px );
  width: calc( 100% - ( var( --comp-scu-input-checkbox-selected-scu-input-error-left , 0px ) + var( --comp-scu-input-checkbox-selected-scu-input-error-right , 0px ) ) );
}

// ================================
// [TEXT_TOKEN] comp-scu-input-checkbox-selected-scu-input-error-error

@mixin comp-scu-input-checkbox-selected-scu-input-error-error { 
  position: relative;
  font-size: var( --comp-scu-input-checkbox-selected-scu-input-error-error-font-size , 12px );
  text-align: var( --comp-scu-input-checkbox-selected-scu-input-error-error-text-align-horizontal , LEFT );
  color: var( --comp-scu-input-checkbox-selected-scu-input-error-error-color , rgba(208,51,57,1) );
  font-family: var( --comp-scu-input-checkbox-selected-scu-input-error-error-font-family , 'Proxima Nova' );
  font-weight: var( --comp-scu-input-checkbox-selected-scu-input-error-error-font-weight , 400 );
  line-height: var( --comp-scu-input-checkbox-selected-scu-input-error-error-line-height , 14.06px );
  letter-spacing: var( --comp-scu-input-checkbox-selected-scu-input-error-error-letter-spacing , 0px ); 
}

@mixin comp-scu-input-checkbox-selected-scu-input-error-error--sizing {
  width: 263px;
  height: 15px;
}

@mixin comp-scu-input-checkbox-selected-scu-input-error-error--width {
  width: 263px;
}

@mixin comp-scu-input-checkbox-selected-scu-input-error-error--height {
  height: 15px;
}

@mixin comp-scu-input-checkbox-selected-scu-input-error-error--absolute-layout {
  position: absolute;
  left: var( --comp-scu-input-checkbox-selected-scu-input-error-error-left , 0px );
  right: var( --comp-scu-input-checkbox-selected-scu-input-error-error-right , 0px );
  top: var( --comp-scu-input-checkbox-selected-scu-input-error-error-top , 0px );
  bottom: var( --comp-scu-input-checkbox-selected-scu-input-error-error-bottom , 0px ); 
}

@mixin comp-scu-input-checkbox-selected-scu-input-error-error--html-autolayout {
  display: inline-block;
  margin-left: var( --comp-scu-input-checkbox-selected-scu-input-error-error-left , 0px );
  margin-right: var( --comp-scu-input-checkbox-selected-scu-input-error-error-right , 0px );
  margin-top: var( --comp-scu-input-checkbox-selected-scu-input-error-error-top , 0px );
  margin-bottom: var( --comp-scu-input-checkbox-selected-scu-input-error-error-bottom , 0px );
  width: calc( 100% - ( var( --comp-scu-input-checkbox-selected-scu-input-error-error-left , 0px ) + var( --comp-scu-input-checkbox-selected-scu-input-error-error-right , 0px ) ) );
}

// ================================
// [COMPONENT_TOKEN] comp-scu-input-checkbox-selected-i-c-o-n-16

@mixin comp-scu-input-checkbox-selected-i-c-o-n-16 { 
  position: relative;
  background-color: var( --comp-scu-input-checkbox-selected-i-c-o-n-16-background-color , rgba(255,255,255,1) ); 
}

@mixin comp-scu-input-checkbox-selected-i-c-o-n-16--sizing {
  width: 16px;
  height: 16px;
}

@mixin comp-scu-input-checkbox-selected-i-c-o-n-16--width {
  width: 16px;
}

@mixin comp-scu-input-checkbox-selected-i-c-o-n-16--height {
  height: 16px;
}

@mixin comp-scu-input-checkbox-selected-i-c-o-n-16--figma-autolayout { 
   
}

@mixin comp-scu-input-checkbox-selected-i-c-o-n-16--absolute-layout {
  position: absolute;
  left: var( --comp-scu-input-checkbox-selected-i-c-o-n-16-left , 0px );
  width: var( --comp-scu-input-checkbox-selected-i-c-o-n-16-width , 16px );
  top: var( --comp-scu-input-checkbox-selected-i-c-o-n-16-top , 0px );
  height: var( --comp-scu-input-checkbox-selected-i-c-o-n-16-height , 16px ); 
}

@mixin comp-scu-input-checkbox-selected-i-c-o-n-16--html-autolayout {
  display: inline-block;
  margin-left: var( --comp-scu-input-checkbox-selected-i-c-o-n-16-left , 0px );
  margin-right: var( --comp-scu-input-checkbox-selected-i-c-o-n-16-right , 247px );
  margin-top: var( --comp-scu-input-checkbox-selected-i-c-o-n-16-top , 0px );
  margin-bottom: var( --comp-scu-input-checkbox-selected-i-c-o-n-16-bottom , 18px );
  width: calc( 100% - ( var( --comp-scu-input-checkbox-selected-i-c-o-n-16-left , 0px ) + var( --comp-scu-input-checkbox-selected-i-c-o-n-16-right , 247px ) ) );
}

// ================================
// [COMPONENT_TOKEN] comp-scu-member-profile

@mixin comp-scu-member-profile { 
  position: relative; 
}

@mixin comp-scu-member-profile--sizing {
  width: 138px;
  height: 95px;
}

@mixin comp-scu-member-profile--width {
  width: 138px;
}

@mixin comp-scu-member-profile--height {
  height: 95px;
}

@mixin comp-scu-member-profile--figma-autolayout { 
  display: flex;
  flex-flow: column nowrap;
  padding-left: var( --comp-scu-member-profile-padding-left , 0px );
  padding-right: var( --comp-scu-member-profile-padding-right , 0px );
  padding-top: var( --comp-scu-member-profile-padding-top , 0px );
  padding-bottom: var( --comp-scu-member-profile-padding-bottom , 0px );
  & > *:not(:last-child) { margin-bottom: var( --comp-scu-member-profile-item-spacing , 7px ); } 
}

@mixin comp-scu-member-profile--absolute-layout {
   
}

@mixin comp-scu-member-profile--html-autolayout {
  display: inline-block;
  margin-left: var( --comp-scu-member-profile-left , 0px );
  margin-right: var( --comp-scu-member-profile-right , 0px );
  margin-top: var( --comp-scu-member-profile-top , 0px );
  margin-bottom: var( --comp-scu-member-profile-bottom , 0px );
  width: calc( 100% - ( var( --comp-scu-member-profile-left , 0px ) + var( --comp-scu-member-profile-right , 0px ) ) );
}

// ================================
// [COMPONENT_TOKEN] comp-scu-member-profile-member-picture

@mixin comp-scu-member-profile-member-picture { 
  position: relative;
  background-color: var( --comp-scu-member-profile-member-picture-background-color , rgba(255,255,255,1) );
  border-radius: var( --comp-scu-member-profile-member-picture-corner-radius , 28px ); 
}

@mixin comp-scu-member-profile-member-picture--sizing {
  width: 54px;
  height: 54px;
}

@mixin comp-scu-member-profile-member-picture--width {
  width: 54px;
}

@mixin comp-scu-member-profile-member-picture--height {
  height: 54px;
}

@mixin comp-scu-member-profile-member-picture--figma-autolayout { 
   
}

@mixin comp-scu-member-profile-member-picture--absolute-layout {
   
}

@mixin comp-scu-member-profile-member-picture--html-autolayout {
  display: inline-block;
  margin-left: var( --comp-scu-member-profile-member-picture-left , 42px );
  margin-right: var( --comp-scu-member-profile-member-picture-right , 42px );
  margin-top: var( --comp-scu-member-profile-member-picture-top , 0px );
  margin-bottom: var( --comp-scu-member-profile-member-picture-bottom , 41px );
  width: calc( 100% - ( var( --comp-scu-member-profile-member-picture-left , 42px ) + var( --comp-scu-member-profile-member-picture-right , 42px ) ) );
}

// ================================
// [COMPONENT_TOKEN] comp-scu-member-profile-member-picture-screen-shot-2020-10-16-at-12-38-1

@mixin comp-scu-member-profile-member-picture-screen-shot-2020-10-16-at-12-38-1 { 
  position: relative;
  background-color: var( --comp-scu-member-profile-member-picture-screen-shot-2020-10-16-at-12-38-1-background-color , rgba(0,0,0,0) ); 
}

@mixin comp-scu-member-profile-member-picture-screen-shot-2020-10-16-at-12-38-1--sizing {
  width: 149px;
  height: 120px;
}

@mixin comp-scu-member-profile-member-picture-screen-shot-2020-10-16-at-12-38-1--width {
  width: 149px;
}

@mixin comp-scu-member-profile-member-picture-screen-shot-2020-10-16-at-12-38-1--height {
  height: 120px;
}

@mixin comp-scu-member-profile-member-picture-screen-shot-2020-10-16-at-12-38-1--figma-autolayout { 
   
}

@mixin comp-scu-member-profile-member-picture-screen-shot-2020-10-16-at-12-38-1--absolute-layout {
  position: absolute;
  left: var( --comp-scu-member-profile-member-picture-screen-shot-2020-10-16-at-12-38-1-left , -41px );
  width: var( --comp-scu-member-profile-member-picture-screen-shot-2020-10-16-at-12-38-1-width , 149px );
  top: var( --comp-scu-member-profile-member-picture-screen-shot-2020-10-16-at-12-38-1-top , -9px );
  height: var( --comp-scu-member-profile-member-picture-screen-shot-2020-10-16-at-12-38-1-height , 120px ); 
}

@mixin comp-scu-member-profile-member-picture-screen-shot-2020-10-16-at-12-38-1--html-autolayout {
  display: inline-block;
  margin-left: var( --comp-scu-member-profile-member-picture-screen-shot-2020-10-16-at-12-38-1-left , -41px );
  margin-right: var( --comp-scu-member-profile-member-picture-screen-shot-2020-10-16-at-12-38-1-right , -54px );
  margin-top: var( --comp-scu-member-profile-member-picture-screen-shot-2020-10-16-at-12-38-1-top , -9px );
  margin-bottom: var( --comp-scu-member-profile-member-picture-screen-shot-2020-10-16-at-12-38-1-bottom , -57px );
  width: calc( 100% - ( var( --comp-scu-member-profile-member-picture-screen-shot-2020-10-16-at-12-38-1-left , -41px ) + var( --comp-scu-member-profile-member-picture-screen-shot-2020-10-16-at-12-38-1-right , -54px ) ) );
}

// ================================
// [COMPONENT_TOKEN] comp-scu-member-profile-label-box

@mixin comp-scu-member-profile-label-box { 
  position: relative; 
}

@mixin comp-scu-member-profile-label-box--sizing {
  width: 138px;
  height: 34px;
}

@mixin comp-scu-member-profile-label-box--width {
  width: 138px;
}

@mixin comp-scu-member-profile-label-box--height {
  height: 34px;
}

@mixin comp-scu-member-profile-label-box--figma-autolayout { 
  display: flex;
  flex-flow: column nowrap;
  padding-left: var( --comp-scu-member-profile-label-box-padding-left , 0px );
  padding-right: var( --comp-scu-member-profile-label-box-padding-right , 0px );
  padding-top: var( --comp-scu-member-profile-label-box-padding-top , 0px );
  padding-bottom: var( --comp-scu-member-profile-label-box-padding-bottom , 0px );
  & > *:not(:last-child) { margin-bottom: var( --comp-scu-member-profile-label-box-item-spacing , 0px ); } 
}

@mixin comp-scu-member-profile-label-box--absolute-layout {
   
}

@mixin comp-scu-member-profile-label-box--html-autolayout {
  display: inline-block;
  margin-left: var( --comp-scu-member-profile-label-box-left , 0px );
  margin-right: var( --comp-scu-member-profile-label-box-right , 0px );
  margin-top: var( --comp-scu-member-profile-label-box-top , 61px );
  margin-bottom: var( --comp-scu-member-profile-label-box-bottom , 0px );
  width: calc( 100% - ( var( --comp-scu-member-profile-label-box-left , 0px ) + var( --comp-scu-member-profile-label-box-right , 0px ) ) );
}

// ================================
// [TEXT_TOKEN] comp-scu-member-profile-label-box-member-name

@mixin comp-scu-member-profile-label-box-member-name { 
  position: relative;
  font-size: var( --comp-scu-member-profile-label-box-member-name-font-size , 18px );
  text-align: var( --comp-scu-member-profile-label-box-member-name-text-align-horizontal , CENTER );
  color: var( --comp-scu-member-profile-label-box-member-name-color , rgba(54,54,54,1) );
  font-family: var( --comp-scu-member-profile-label-box-member-name-font-family , 'Proxima Nova' );
  font-weight: var( --comp-scu-member-profile-label-box-member-name-font-weight , 700 );
  line-height: var( --comp-scu-member-profile-label-box-member-name-line-height , 21.09px );
  letter-spacing: var( --comp-scu-member-profile-label-box-member-name-letter-spacing , 0px ); 
}

@mixin comp-scu-member-profile-label-box-member-name--sizing {
  width: 138px;
  height: 21px;
}

@mixin comp-scu-member-profile-label-box-member-name--width {
  width: 138px;
}

@mixin comp-scu-member-profile-label-box-member-name--height {
  height: 21px;
}

@mixin comp-scu-member-profile-label-box-member-name--absolute-layout {
   
}

@mixin comp-scu-member-profile-label-box-member-name--html-autolayout {
  display: inline-block;
  margin-left: var( --comp-scu-member-profile-label-box-member-name-left , 0px );
  margin-right: var( --comp-scu-member-profile-label-box-member-name-right , 0px );
  margin-top: var( --comp-scu-member-profile-label-box-member-name-top , 0px );
  margin-bottom: var( --comp-scu-member-profile-label-box-member-name-bottom , 13px );
  width: calc( 100% - ( var( --comp-scu-member-profile-label-box-member-name-left , 0px ) + var( --comp-scu-member-profile-label-box-member-name-right , 0px ) ) );
}

// ================================
// [TEXT_TOKEN] comp-scu-member-profile-label-box-member-since

@mixin comp-scu-member-profile-label-box-member-since { 
  position: relative;
  font-size: var( --comp-scu-member-profile-label-box-member-since-font-size , 11px );
  text-align: var( --comp-scu-member-profile-label-box-member-since-text-align-horizontal , CENTER );
  color: var( --comp-scu-member-profile-label-box-member-since-color , rgba(89,89,89,1) );
  font-family: var( --comp-scu-member-profile-label-box-member-since-font-family , 'Proxima Nova' );
  font-weight: var( --comp-scu-member-profile-label-box-member-since-font-weight , 400 );
  line-height: var( --comp-scu-member-profile-label-box-member-since-line-height , 12.89px );
  letter-spacing: var( --comp-scu-member-profile-label-box-member-since-letter-spacing , 0px ); 
}

@mixin comp-scu-member-profile-label-box-member-since--sizing {
  width: 138px;
  height: 13px;
}

@mixin comp-scu-member-profile-label-box-member-since--width {
  width: 138px;
}

@mixin comp-scu-member-profile-label-box-member-since--height {
  height: 13px;
}

@mixin comp-scu-member-profile-label-box-member-since--absolute-layout {
   
}

@mixin comp-scu-member-profile-label-box-member-since--html-autolayout {
  display: inline-block;
  margin-left: var( --comp-scu-member-profile-label-box-member-since-left , 0px );
  margin-right: var( --comp-scu-member-profile-label-box-member-since-right , 0px );
  margin-top: var( --comp-scu-member-profile-label-box-member-since-top , 21px );
  margin-bottom: var( --comp-scu-member-profile-label-box-member-since-bottom , 0px );
  width: calc( 100% - ( var( --comp-scu-member-profile-label-box-member-since-left , 0px ) + var( --comp-scu-member-profile-label-box-member-since-right , 0px ) ) );
}

// ================================
// [FLEX_TOKEN] flex-v

@mixin flex-v { 
  display: flex;
  -ms-flex-direction: var( --flex-v-ms-flex-direction , column );
  -ms-flex-pack: var( --flex-v-ms-flex-pack , start );
  -ms-flex-align: var( --flex-v-ms-flex-align , center );
  flex-flow: var( --flex-v-flex-flow , column nowrap );
  justify-content: var( --flex-v-justify-content , flex-start );
  align-items: var( --flex-v-align-items , center ); 
}

// ================================
// [FLEX_TOKEN] flex-v-stretch

@mixin flex-v-stretch { 
  display: flex;
  -ms-flex-direction: var( --flex-v-stretch-ms-flex-direction , column );
  -ms-flex-pack: var( --flex-v-stretch-ms-flex-pack , start );
  -ms-flex-align: var( --flex-v-stretch-ms-flex-align , stretch );
  flex-flow: var( --flex-v-stretch-flex-flow , column nowrap );
  justify-content: var( --flex-v-stretch-justify-content , flex-start );
  align-items: var( --flex-v-stretch-align-items , stretch ); 
}

// ================================
// [FLEX_TOKEN] flex-v-left

@mixin flex-v-left { 
  display: flex;
  -ms-flex-direction: var( --flex-v-left-ms-flex-direction , column );
  -ms-flex-pack: var( --flex-v-left-ms-flex-pack , start );
  -ms-flex-align: var( --flex-v-left-ms-flex-align , start );
  flex-flow: var( --flex-v-left-flex-flow , column nowrap );
  justify-content: var( --flex-v-left-justify-content , flex-start );
  align-items: var( --flex-v-left-align-items , flex-start ); 
}

// ================================
// [FLEX_TOKEN] flex-v-left-center

@mixin flex-v-left-center { 
  display: flex;
  -ms-flex-direction: var( --flex-v-left-center-ms-flex-direction , column );
  -ms-flex-pack: var( --flex-v-left-center-ms-flex-pack , center );
  -ms-flex-align: var( --flex-v-left-center-ms-flex-align , start );
  flex-flow: var( --flex-v-left-center-flex-flow , column nowrap );
  justify-content: var( --flex-v-left-center-justify-content , center );
  align-items: var( --flex-v-left-center-align-items , flex-start ); 
}

// ================================
// [FLEX_TOKEN] flex-v-center

@mixin flex-v-center { 
  display: flex;
  -ms-flex-direction: var( --flex-v-center-ms-flex-direction , column );
  -ms-flex-pack: var( --flex-v-center-ms-flex-pack , center );
  -ms-flex-align: var( --flex-v-center-ms-flex-align , center );
  flex-flow: var( --flex-v-center-flex-flow , column nowrap );
  justify-content: var( --flex-v-center-justify-content , center );
  align-items: var( --flex-v-center-align-items , center ); 
}

// ================================
// [FLEX_TOKEN] flex-v-left-bottom

@mixin flex-v-left-bottom { 
  display: flex;
  -ms-flex-direction: var( --flex-v-left-bottom-ms-flex-direction , column );
  -ms-flex-pack: var( --flex-v-left-bottom-ms-flex-pack , end );
  -ms-flex-align: var( --flex-v-left-bottom-ms-flex-align , start );
  flex-flow: var( --flex-v-left-bottom-flex-flow , column nowrap );
  justify-content: var( --flex-v-left-bottom-justify-content , flex-end );
  align-items: var( --flex-v-left-bottom-align-items , flex-start ); 
}

// ================================
// [FLEX_TOKEN] flex-v-right

@mixin flex-v-right { 
  display: flex;
  -ms-flex-direction: var( --flex-v-right-ms-flex-direction , column );
  -ms-flex-pack: var( --flex-v-right-ms-flex-pack , start );
  -ms-flex-align: var( --flex-v-right-ms-flex-align , end );
  flex-flow: var( --flex-v-right-flex-flow , column nowrap );
  justify-content: var( --flex-v-right-justify-content , flex-start );
  align-items: var( --flex-v-right-align-items , flex-end ); 
}

// ================================
// [FLEX_TOKEN] flex-v-right-center

@mixin flex-v-right-center { 
  display: flex;
  -ms-flex-direction: var( --flex-v-right-center-ms-flex-direction , column );
  -ms-flex-pack: var( --flex-v-right-center-ms-flex-pack , center );
  -ms-flex-align: var( --flex-v-right-center-ms-flex-align , end );
  flex-flow: var( --flex-v-right-center-flex-flow , column nowrap );
  justify-content: var( --flex-v-right-center-justify-content , center );
  align-items: var( --flex-v-right-center-align-items , flex-end ); 
}

// ================================
// [FLEX_TOKEN] flex-v-right-bottom

@mixin flex-v-right-bottom { 
  display: flex;
  -ms-flex-direction: var( --flex-v-right-bottom-ms-flex-direction , column );
  -ms-flex-pack: var( --flex-v-right-bottom-ms-flex-pack , end );
  -ms-flex-align: var( --flex-v-right-bottom-ms-flex-align , end );
  flex-flow: var( --flex-v-right-bottom-flex-flow , column nowrap );
  justify-content: var( --flex-v-right-bottom-justify-content , flex-end );
  align-items: var( --flex-v-right-bottom-align-items , flex-end ); 
}

// ================================
// [FLEX_TOKEN] flex-v-bottom

@mixin flex-v-bottom { 
  display: flex;
  -ms-flex-direction: var( --flex-v-bottom-ms-flex-direction , column );
  -ms-flex-pack: var( --flex-v-bottom-ms-flex-pack , end );
  -ms-flex-align: var( --flex-v-bottom-ms-flex-align , center );
  flex-flow: var( --flex-v-bottom-flex-flow , column nowrap );
  justify-content: var( --flex-v-bottom-justify-content , flex-end );
  align-items: var( --flex-v-bottom-align-items , center ); 
}

// ================================
// [FLEX_TOKEN] flex-h

@mixin flex-h { 
  display: flex;
  -ms-flex-direction: var( --flex-h-ms-flex-direction , row );
  -ms-flex-pack: var( --flex-h-ms-flex-pack , start );
  -ms-flex-align: var( --flex-h-ms-flex-align , center );
  flex-flow: var( --flex-h-flex-flow , row nowrap );
  justify-content: var( --flex-h-justify-content , flex-start );
  align-items: var( --flex-h-align-items , center ); 
}

// ================================
// [FLEX_TOKEN] flex-h-stretch

@mixin flex-h-stretch { 
  display: flex;
  -ms-flex-direction: var( --flex-h-stretch-ms-flex-direction , row );
  -ms-flex-pack: var( --flex-h-stretch-ms-flex-pack , start );
  -ms-flex-align: var( --flex-h-stretch-ms-flex-align , stretch );
  flex-flow: var( --flex-h-stretch-flex-flow , row nowrap );
  justify-content: var( --flex-h-stretch-justify-content , flex-start );
  align-items: var( --flex-h-stretch-align-items , stretch ); 
}

// ================================
// [FLEX_TOKEN] flex-h-baseline

@mixin flex-h-baseline { 
  display: flex;
  -ms-flex-direction: var( --flex-h-baseline-ms-flex-direction , row );
  -ms-flex-pack: var( --flex-h-baseline-ms-flex-pack , start );
  -ms-flex-align: var( --flex-h-baseline-ms-flex-align , baseline );
  flex-flow: var( --flex-h-baseline-flex-flow , row nowrap );
  justify-content: var( --flex-h-baseline-justify-content , flex-start );
  align-items: var( --flex-h-baseline-align-items , baseline ); 
}

// ================================
// [FLEX_TOKEN] flex-h-top

@mixin flex-h-top { 
  display: flex;
  -ms-flex-direction: var( --flex-h-top-ms-flex-direction , row );
  -ms-flex-pack: var( --flex-h-top-ms-flex-pack , start );
  -ms-flex-align: var( --flex-h-top-ms-flex-align , start );
  flex-flow: var( --flex-h-top-flex-flow , row nowrap );
  justify-content: var( --flex-h-top-justify-content , flex-start );
  align-items: var( --flex-h-top-align-items , flex-start ); 
}

// ================================
// [FLEX_TOKEN] flex-h-right

@mixin flex-h-right { 
  display: flex;
  -ms-flex-direction: var( --flex-h-right-ms-flex-direction , row );
  -ms-flex-pack: var( --flex-h-right-ms-flex-pack , end );
  -ms-flex-align: var( --flex-h-right-ms-flex-align , center );
  flex-flow: var( --flex-h-right-flex-flow , row nowrap );
  justify-content: var( --flex-h-right-justify-content , flex-end );
  align-items: var( --flex-h-right-align-items , center ); 
}

// ================================
// [FLEX_TOKEN] flex-h-center-right

@mixin flex-h-center-right { 
  display: flex;
  -ms-flex-direction: var( --flex-h-center-right-ms-flex-direction , row );
  -ms-flex-pack: var( --flex-h-center-right-ms-flex-pack , end );
  -ms-flex-align: var( --flex-h-center-right-ms-flex-align , center );
  flex-flow: var( --flex-h-center-right-flex-flow , row nowrap );
  justify-content: var( --flex-h-center-right-justify-content , flex-end );
  align-items: var( --flex-h-center-right-align-items , center ); 
}

// ================================
// [FLEX_TOKEN] flex-h-center-left

@mixin flex-h-center-left { 
  display: flex;
  -ms-flex-direction: var( --flex-h-center-left-ms-flex-direction , row );
  -ms-flex-pack: var( --flex-h-center-left-ms-flex-pack , end );
  -ms-flex-align: var( --flex-h-center-left-ms-flex-align , center );
  flex-flow: var( --flex-h-center-left-flex-flow , row nowrap );
  justify-content: var( --flex-h-center-left-justify-content , flex-start );
  align-items: var( --flex-h-center-left-align-items , center ); 
}

// ================================
// [FLEX_TOKEN] flex-h-top-right

@mixin flex-h-top-right { 
  display: flex;
  -ms-flex-direction: var( --flex-h-top-right-ms-flex-direction , row );
  -ms-flex-pack: var( --flex-h-top-right-ms-flex-pack , end );
  -ms-flex-align: var( --flex-h-top-right-ms-flex-align , start );
  flex-flow: var( --flex-h-top-right-flex-flow , row nowrap );
  justify-content: var( --flex-h-top-right-justify-content , flex-end );
  align-items: var( --flex-h-top-right-align-items , flex-start ); 
}

// ================================
// [FLEX_TOKEN] flex-h-bottom

@mixin flex-h-bottom { 
  display: flex;
  -ms-flex-direction: var( --flex-h-bottom-ms-flex-direction , row );
  -ms-flex-pack: var( --flex-h-bottom-ms-flex-pack , start );
  -ms-flex-align: var( --flex-h-bottom-ms-flex-align , end );
  flex-flow: var( --flex-h-bottom-flex-flow , row nowrap );
  justify-content: var( --flex-h-bottom-justify-content , flex-start );
  align-items: var( --flex-h-bottom-align-items , flex-end ); 
}

// ================================
// [FLEX_TOKEN] flex-h-bottom-right

@mixin flex-h-bottom-right { 
  display: flex;
  -ms-flex-direction: var( --flex-h-bottom-right-ms-flex-direction , row );
  -ms-flex-pack: var( --flex-h-bottom-right-ms-flex-pack , end );
  -ms-flex-align: var( --flex-h-bottom-right-ms-flex-align , end );
  flex-flow: var( --flex-h-bottom-right-flex-flow , row nowrap );
  justify-content: var( --flex-h-bottom-right-justify-content , flex-end );
  align-items: var( --flex-h-bottom-right-align-items , flex-end ); 
}

// ================================
// [FLEX_TOKEN] flex-h-bottom-center

@mixin flex-h-bottom-center { 
  display: flex;
  -ms-flex-direction: var( --flex-h-bottom-center-ms-flex-direction , row );
  -ms-flex-pack: var( --flex-h-bottom-center-ms-flex-pack , end );
  -ms-flex-align: var( --flex-h-bottom-center-ms-flex-align , end );
  flex-flow: var( --flex-h-bottom-center-flex-flow , row nowrap );
  justify-content: var( --flex-h-bottom-center-justify-content , center );
  align-items: var( --flex-h-bottom-center-align-items , flex-end ); 
}

// ================================
// [FLEX_TOKEN] flex-center

@mixin flex-center { 
  display: flex;
  -ms-flex-direction: var( --flex-center-ms-flex-direction , row );
  -ms-flex-pack: var( --flex-center-ms-flex-pack , center );
  -ms-flex-align: var( --flex-center-ms-flex-align , center );
  flex-flow: var( --flex-center-flex-flow , row nowrap );
  justify-content: var( --flex-center-justify-content , center );
  align-items: var( --flex-center-align-items , center ); 
}

// ================================
// [FLEX_TOKEN] flex-h-center

@mixin flex-h-center { 
  display: flex;
  -ms-flex-direction: var( --flex-h-center-ms-flex-direction , row );
  -ms-flex-pack: var( --flex-h-center-ms-flex-pack , center );
  -ms-flex-align: var( --flex-h-center-ms-flex-align , center );
  flex-flow: var( --flex-h-center-flex-flow , row nowrap );
  justify-content: var( --flex-h-center-justify-content , center );
  align-items: var( --flex-h-center-align-items , center ); 
}

// ================================
// [FLEX_TOKEN] flex-right

@mixin flex-right { 
  display: flex;
  -ms-flex-direction: var( --flex-right-ms-flex-direction , row );
  -ms-flex-pack: var( --flex-right-ms-flex-pack , end );
  -ms-flex-align: var( --flex-right-ms-flex-align , center );
  flex-flow: var( --flex-right-flex-flow , row nowrap );
  justify-content: var( --flex-right-justify-content , flex-end );
  align-items: var( --flex-right-align-items , center ); 
}

// ================================
// [FLEX_TOKEN] flex-left

@mixin flex-left { 
  display: flex;
  -ms-flex-direction: var( --flex-left-ms-flex-direction , row );
  -ms-flex-pack: var( --flex-left-ms-flex-pack , start );
  -ms-flex-align: var( --flex-left-ms-flex-align , center );
  flex-flow: var( --flex-left-flex-flow , row nowrap );
  justify-content: var( --flex-left-justify-content , flex-start );
  align-items: var( --flex-left-align-items , center ); 
}

// ================================
// [FLEX_TOKEN] flex-fill

@mixin flex-fill { 
  flex: var( --flex-fill , 1 ); 
}

// ================================
// [FLEX_TOKEN] flex-fill-container

@mixin flex-fill-container { 
  position: var( --flex-fill-container-position , absolute );
	top: var( --flex-fill-container-top , 0 );
	right: var( --flex-fill-container-right , 0 );
	bottom: var( --flex-fill-container-bottom , 0 );
	left: var( --flex-fill-container-left , 0 ); 
}

// ================================
// [FLEX_TOKEN] flex-align-self-flex-start

@mixin flex-align-self-flex-start { 
  -ms-flex-item-align: var( --flex-align-self-flex-start , flex-start );
	align-self: var( --flex-align-self-flex-start , flex-start ); 
}

// ================================
// [FLEX_TOKEN] flex-align-self-start

@mixin flex-align-self-start { 
  -ms-flex-item-align: var( --flex-align-self-start , flex-start );
	align-self: var( --flex-align-self-start , flex-start ); 
}

// ================================
// [FLEX_TOKEN] flex-align-self-flex-end

@mixin flex-align-self-flex-end { 
  -ms-flex-item-align: var( --flex-align-self-flex-end , flex-end );
	align-self: var( --flex-align-self-flex-end , flex-end ); 
}

// ================================
// [FLEX_TOKEN] flex-align-self-end

@mixin flex-align-self-end { 
  -ms-flex-item-align: var( --flex-align-self-end , flex-end );
	align-self: var( --flex-align-self-end , flex-end ); 
}

// ================================
// [FLEX_TOKEN] flex-align-self-center

@mixin flex-align-self-center { 
  -ms-flex-item-align: var( --flex-align-self-center , center );
	align-self: var( --flex-align-self-center , center ); 
}

// ================================
// [FLEX_TOKEN] flex-align-self-baseline

@mixin flex-align-self-baseline { 
  -ms-flex-item-align: var( --flex-align-self-baseline , baseline );
	align-self: var( --flex-align-self-baseline , baseline ); 
}

// ================================
// [FLEX_TOKEN] flex-align-self-stretch

@mixin flex-align-self-stretch { 
  -ms-flex-item-align: var( --flex-align-self-stretch , stretch );
	align-self: var( --flex-align-self-stretch , stretch ); 
}

// ================================
// [FLEX_TOKEN] flex-space-between

@mixin flex-space-between { 
  -ms-flex-pack: var( --flex-space-between , space-between );
	justify-content: var( --flex-space-between , space-between ); 
}

// ================================
// [FLEX_TOKEN] flex-space-around

@mixin flex-space-around { 
  -ms-flex-pack: var( --flex-space-around , space-around );
	justify-content: var( --flex-space-around , space-around ); 
}

// ================================
// [SPACING] spacing-0

@mixin spacing-0-size {
  width: var( --spacing-0 , 0px );
  height: var( --spacing-0 , 0px );
}

@mixin spacing-0-width {
  width: var( --spacing-0 , 0px  );
}

@mixin spacing-0-height {
  height: var( --spacing-0 , 0px  );
}

@mixin spacing-0-min-width {
  min-width: var( --spacing-0 , 0px  );
}

@mixin spacing-0-min-height {
  min-height: var( --spacing-0 , 0px  );
}

@mixin spacing-0-top {
  top: var( --spacing-0 , 0px  );
}

@mixin spacing-0-bottom {
  bottom: var( --spacing-0 , 0px  );
}

@mixin spacing-0-left {
  left: var( --spacing-0 , 0px  );
}

@mixin spacing-0-right {
  right: var( --spacing-0 , 0px  );
}

@mixin spacing-0-margin {
  margin: var( --spacing-0 , 0px  );
}

@mixin spacing-0-margin-width {
  margin-left: var( --spacing-0 , 0px );
  margin-right: var( --spacing-0 , 0px );
}

@mixin spacing-0-margin-height {
  margin-top: 0px;
  margin-bottom: 0px;
}

@mixin spacing-0-margin-left {
  margin-left: var( --spacing-0 , 0px  );
}

@mixin spacing-0-margin-right {
  margin-right: var( --spacing-0 , 0px  );
}

@mixin spacing-0-margin-top {
  margin-top: var( --spacing-0 , 0px  );
}

@mixin spacing-0-margin-bottom {
  margin-bottom: var( --spacing-0 , 0px  );
}

@mixin spacing-0-padding {
  padding: var( --spacing-0 , 0px  );
}

@mixin spacing-0-padding-width {
  padding-left: var( --spacing-0 , 0px );
  padding-right: var( --spacing-0 , 0px );
}

@mixin spacing-0-padding-height {
  padding-top: var( --spacing-0 , 0px );
  padding-bottom: var( --spacing-0 , 0px );
}

@mixin spacing-0-padding-left {
  padding-left: var( --spacing-0 , 0px  );
}

@mixin spacing-0-padding-right {
  padding-right: var( --spacing-0 , 0px  );
}

@mixin spacing-0-padding-top {
  padding-top: var( --spacing-0 , 0px  );
}

@mixin spacing-0-padding-bottom {
  padding-bottom: var( --spacing-0 , 0px  );
}

// ================================
// [SPACING] spacing-1

@mixin spacing-1-size {
  width: var( --spacing-1 , 8px );
  height: var( --spacing-1 , 8px );
}

@mixin spacing-1-width {
  width: var( --spacing-1 , 8px  );
}

@mixin spacing-1-height {
  height: var( --spacing-1 , 8px  );
}

@mixin spacing-1-min-width {
  min-width: var( --spacing-1 , 8px  );
}

@mixin spacing-1-min-height {
  min-height: var( --spacing-1 , 8px  );
}

@mixin spacing-1-top {
  top: var( --spacing-1 , 8px  );
}

@mixin spacing-1-bottom {
  bottom: var( --spacing-1 , 8px  );
}

@mixin spacing-1-left {
  left: var( --spacing-1 , 8px  );
}

@mixin spacing-1-right {
  right: var( --spacing-1 , 8px  );
}

@mixin spacing-1-margin {
  margin: var( --spacing-1 , 8px  );
}

@mixin spacing-1-margin-width {
  margin-left: var( --spacing-1 , 8px );
  margin-right: var( --spacing-1 , 8px );
}

@mixin spacing-1-margin-height {
  margin-top: 8px;
  margin-bottom: 8px;
}

@mixin spacing-1-margin-left {
  margin-left: var( --spacing-1 , 8px  );
}

@mixin spacing-1-margin-right {
  margin-right: var( --spacing-1 , 8px  );
}

@mixin spacing-1-margin-top {
  margin-top: var( --spacing-1 , 8px  );
}

@mixin spacing-1-margin-bottom {
  margin-bottom: var( --spacing-1 , 8px  );
}

@mixin spacing-1-padding {
  padding: var( --spacing-1 , 8px  );
}

@mixin spacing-1-padding-width {
  padding-left: var( --spacing-1 , 8px );
  padding-right: var( --spacing-1 , 8px );
}

@mixin spacing-1-padding-height {
  padding-top: var( --spacing-1 , 8px );
  padding-bottom: var( --spacing-1 , 8px );
}

@mixin spacing-1-padding-left {
  padding-left: var( --spacing-1 , 8px  );
}

@mixin spacing-1-padding-right {
  padding-right: var( --spacing-1 , 8px  );
}

@mixin spacing-1-padding-top {
  padding-top: var( --spacing-1 , 8px  );
}

@mixin spacing-1-padding-bottom {
  padding-bottom: var( --spacing-1 , 8px  );
}

// ================================
// [SPACING] spacing-2

@mixin spacing-2-size {
  width: var( --spacing-2 , 16px );
  height: var( --spacing-2 , 16px );
}

@mixin spacing-2-width {
  width: var( --spacing-2 , 16px  );
}

@mixin spacing-2-height {
  height: var( --spacing-2 , 16px  );
}

@mixin spacing-2-min-width {
  min-width: var( --spacing-2 , 16px  );
}

@mixin spacing-2-min-height {
  min-height: var( --spacing-2 , 16px  );
}

@mixin spacing-2-top {
  top: var( --spacing-2 , 16px  );
}

@mixin spacing-2-bottom {
  bottom: var( --spacing-2 , 16px  );
}

@mixin spacing-2-left {
  left: var( --spacing-2 , 16px  );
}

@mixin spacing-2-right {
  right: var( --spacing-2 , 16px  );
}

@mixin spacing-2-margin {
  margin: var( --spacing-2 , 16px  );
}

@mixin spacing-2-margin-width {
  margin-left: var( --spacing-2 , 16px );
  margin-right: var( --spacing-2 , 16px );
}

@mixin spacing-2-margin-height {
  margin-top: 16px;
  margin-bottom: 16px;
}

@mixin spacing-2-margin-left {
  margin-left: var( --spacing-2 , 16px  );
}

@mixin spacing-2-margin-right {
  margin-right: var( --spacing-2 , 16px  );
}

@mixin spacing-2-margin-top {
  margin-top: var( --spacing-2 , 16px  );
}

@mixin spacing-2-margin-bottom {
  margin-bottom: var( --spacing-2 , 16px  );
}

@mixin spacing-2-padding {
  padding: var( --spacing-2 , 16px  );
}

@mixin spacing-2-padding-width {
  padding-left: var( --spacing-2 , 16px );
  padding-right: var( --spacing-2 , 16px );
}

@mixin spacing-2-padding-height {
  padding-top: var( --spacing-2 , 16px );
  padding-bottom: var( --spacing-2 , 16px );
}

@mixin spacing-2-padding-left {
  padding-left: var( --spacing-2 , 16px  );
}

@mixin spacing-2-padding-right {
  padding-right: var( --spacing-2 , 16px  );
}

@mixin spacing-2-padding-top {
  padding-top: var( --spacing-2 , 16px  );
}

@mixin spacing-2-padding-bottom {
  padding-bottom: var( --spacing-2 , 16px  );
}

// ================================
// [SPACING] spacing-3

@mixin spacing-3-size {
  width: var( --spacing-3 , 24px );
  height: var( --spacing-3 , 24px );
}

@mixin spacing-3-width {
  width: var( --spacing-3 , 24px  );
}

@mixin spacing-3-height {
  height: var( --spacing-3 , 24px  );
}

@mixin spacing-3-min-width {
  min-width: var( --spacing-3 , 24px  );
}

@mixin spacing-3-min-height {
  min-height: var( --spacing-3 , 24px  );
}

@mixin spacing-3-top {
  top: var( --spacing-3 , 24px  );
}

@mixin spacing-3-bottom {
  bottom: var( --spacing-3 , 24px  );
}

@mixin spacing-3-left {
  left: var( --spacing-3 , 24px  );
}

@mixin spacing-3-right {
  right: var( --spacing-3 , 24px  );
}

@mixin spacing-3-margin {
  margin: var( --spacing-3 , 24px  );
}

@mixin spacing-3-margin-width {
  margin-left: var( --spacing-3 , 24px );
  margin-right: var( --spacing-3 , 24px );
}

@mixin spacing-3-margin-height {
  margin-top: 24px;
  margin-bottom: 24px;
}

@mixin spacing-3-margin-left {
  margin-left: var( --spacing-3 , 24px  );
}

@mixin spacing-3-margin-right {
  margin-right: var( --spacing-3 , 24px  );
}

@mixin spacing-3-margin-top {
  margin-top: var( --spacing-3 , 24px  );
}

@mixin spacing-3-margin-bottom {
  margin-bottom: var( --spacing-3 , 24px  );
}

@mixin spacing-3-padding {
  padding: var( --spacing-3 , 24px  );
}

@mixin spacing-3-padding-width {
  padding-left: var( --spacing-3 , 24px );
  padding-right: var( --spacing-3 , 24px );
}

@mixin spacing-3-padding-height {
  padding-top: var( --spacing-3 , 24px );
  padding-bottom: var( --spacing-3 , 24px );
}

@mixin spacing-3-padding-left {
  padding-left: var( --spacing-3 , 24px  );
}

@mixin spacing-3-padding-right {
  padding-right: var( --spacing-3 , 24px  );
}

@mixin spacing-3-padding-top {
  padding-top: var( --spacing-3 , 24px  );
}

@mixin spacing-3-padding-bottom {
  padding-bottom: var( --spacing-3 , 24px  );
}

// ================================
// [SPACING] spacing-4

@mixin spacing-4-size {
  width: var( --spacing-4 , 32px );
  height: var( --spacing-4 , 32px );
}

@mixin spacing-4-width {
  width: var( --spacing-4 , 32px  );
}

@mixin spacing-4-height {
  height: var( --spacing-4 , 32px  );
}

@mixin spacing-4-min-width {
  min-width: var( --spacing-4 , 32px  );
}

@mixin spacing-4-min-height {
  min-height: var( --spacing-4 , 32px  );
}

@mixin spacing-4-top {
  top: var( --spacing-4 , 32px  );
}

@mixin spacing-4-bottom {
  bottom: var( --spacing-4 , 32px  );
}

@mixin spacing-4-left {
  left: var( --spacing-4 , 32px  );
}

@mixin spacing-4-right {
  right: var( --spacing-4 , 32px  );
}

@mixin spacing-4-margin {
  margin: var( --spacing-4 , 32px  );
}

@mixin spacing-4-margin-width {
  margin-left: var( --spacing-4 , 32px );
  margin-right: var( --spacing-4 , 32px );
}

@mixin spacing-4-margin-height {
  margin-top: 32px;
  margin-bottom: 32px;
}

@mixin spacing-4-margin-left {
  margin-left: var( --spacing-4 , 32px  );
}

@mixin spacing-4-margin-right {
  margin-right: var( --spacing-4 , 32px  );
}

@mixin spacing-4-margin-top {
  margin-top: var( --spacing-4 , 32px  );
}

@mixin spacing-4-margin-bottom {
  margin-bottom: var( --spacing-4 , 32px  );
}

@mixin spacing-4-padding {
  padding: var( --spacing-4 , 32px  );
}

@mixin spacing-4-padding-width {
  padding-left: var( --spacing-4 , 32px );
  padding-right: var( --spacing-4 , 32px );
}

@mixin spacing-4-padding-height {
  padding-top: var( --spacing-4 , 32px );
  padding-bottom: var( --spacing-4 , 32px );
}

@mixin spacing-4-padding-left {
  padding-left: var( --spacing-4 , 32px  );
}

@mixin spacing-4-padding-right {
  padding-right: var( --spacing-4 , 32px  );
}

@mixin spacing-4-padding-top {
  padding-top: var( --spacing-4 , 32px  );
}

@mixin spacing-4-padding-bottom {
  padding-bottom: var( --spacing-4 , 32px  );
}

// ================================
// [SPACING] spacing-5

@mixin spacing-5-size {
  width: var( --spacing-5 , 40px );
  height: var( --spacing-5 , 40px );
}

@mixin spacing-5-width {
  width: var( --spacing-5 , 40px  );
}

@mixin spacing-5-height {
  height: var( --spacing-5 , 40px  );
}

@mixin spacing-5-min-width {
  min-width: var( --spacing-5 , 40px  );
}

@mixin spacing-5-min-height {
  min-height: var( --spacing-5 , 40px  );
}

@mixin spacing-5-top {
  top: var( --spacing-5 , 40px  );
}

@mixin spacing-5-bottom {
  bottom: var( --spacing-5 , 40px  );
}

@mixin spacing-5-left {
  left: var( --spacing-5 , 40px  );
}

@mixin spacing-5-right {
  right: var( --spacing-5 , 40px  );
}

@mixin spacing-5-margin {
  margin: var( --spacing-5 , 40px  );
}

@mixin spacing-5-margin-width {
  margin-left: var( --spacing-5 , 40px );
  margin-right: var( --spacing-5 , 40px );
}

@mixin spacing-5-margin-height {
  margin-top: 40px;
  margin-bottom: 40px;
}

@mixin spacing-5-margin-left {
  margin-left: var( --spacing-5 , 40px  );
}

@mixin spacing-5-margin-right {
  margin-right: var( --spacing-5 , 40px  );
}

@mixin spacing-5-margin-top {
  margin-top: var( --spacing-5 , 40px  );
}

@mixin spacing-5-margin-bottom {
  margin-bottom: var( --spacing-5 , 40px  );
}

@mixin spacing-5-padding {
  padding: var( --spacing-5 , 40px  );
}

@mixin spacing-5-padding-width {
  padding-left: var( --spacing-5 , 40px );
  padding-right: var( --spacing-5 , 40px );
}

@mixin spacing-5-padding-height {
  padding-top: var( --spacing-5 , 40px );
  padding-bottom: var( --spacing-5 , 40px );
}

@mixin spacing-5-padding-left {
  padding-left: var( --spacing-5 , 40px  );
}

@mixin spacing-5-padding-right {
  padding-right: var( --spacing-5 , 40px  );
}

@mixin spacing-5-padding-top {
  padding-top: var( --spacing-5 , 40px  );
}

@mixin spacing-5-padding-bottom {
  padding-bottom: var( --spacing-5 , 40px  );
}

// ================================
// [SPACING] spacing-6

@mixin spacing-6-size {
  width: var( --spacing-6 , 48px );
  height: var( --spacing-6 , 48px );
}

@mixin spacing-6-width {
  width: var( --spacing-6 , 48px  );
}

@mixin spacing-6-height {
  height: var( --spacing-6 , 48px  );
}

@mixin spacing-6-min-width {
  min-width: var( --spacing-6 , 48px  );
}

@mixin spacing-6-min-height {
  min-height: var( --spacing-6 , 48px  );
}

@mixin spacing-6-top {
  top: var( --spacing-6 , 48px  );
}

@mixin spacing-6-bottom {
  bottom: var( --spacing-6 , 48px  );
}

@mixin spacing-6-left {
  left: var( --spacing-6 , 48px  );
}

@mixin spacing-6-right {
  right: var( --spacing-6 , 48px  );
}

@mixin spacing-6-margin {
  margin: var( --spacing-6 , 48px  );
}

@mixin spacing-6-margin-width {
  margin-left: var( --spacing-6 , 48px );
  margin-right: var( --spacing-6 , 48px );
}

@mixin spacing-6-margin-height {
  margin-top: 48px;
  margin-bottom: 48px;
}

@mixin spacing-6-margin-left {
  margin-left: var( --spacing-6 , 48px  );
}

@mixin spacing-6-margin-right {
  margin-right: var( --spacing-6 , 48px  );
}

@mixin spacing-6-margin-top {
  margin-top: var( --spacing-6 , 48px  );
}

@mixin spacing-6-margin-bottom {
  margin-bottom: var( --spacing-6 , 48px  );
}

@mixin spacing-6-padding {
  padding: var( --spacing-6 , 48px  );
}

@mixin spacing-6-padding-width {
  padding-left: var( --spacing-6 , 48px );
  padding-right: var( --spacing-6 , 48px );
}

@mixin spacing-6-padding-height {
  padding-top: var( --spacing-6 , 48px );
  padding-bottom: var( --spacing-6 , 48px );
}

@mixin spacing-6-padding-left {
  padding-left: var( --spacing-6 , 48px  );
}

@mixin spacing-6-padding-right {
  padding-right: var( --spacing-6 , 48px  );
}

@mixin spacing-6-padding-top {
  padding-top: var( --spacing-6 , 48px  );
}

@mixin spacing-6-padding-bottom {
  padding-bottom: var( --spacing-6 , 48px  );
}

// ================================
// [SPACING] spacing-7

@mixin spacing-7-size {
  width: var( --spacing-7 , 56px );
  height: var( --spacing-7 , 56px );
}

@mixin spacing-7-width {
  width: var( --spacing-7 , 56px  );
}

@mixin spacing-7-height {
  height: var( --spacing-7 , 56px  );
}

@mixin spacing-7-min-width {
  min-width: var( --spacing-7 , 56px  );
}

@mixin spacing-7-min-height {
  min-height: var( --spacing-7 , 56px  );
}

@mixin spacing-7-top {
  top: var( --spacing-7 , 56px  );
}

@mixin spacing-7-bottom {
  bottom: var( --spacing-7 , 56px  );
}

@mixin spacing-7-left {
  left: var( --spacing-7 , 56px  );
}

@mixin spacing-7-right {
  right: var( --spacing-7 , 56px  );
}

@mixin spacing-7-margin {
  margin: var( --spacing-7 , 56px  );
}

@mixin spacing-7-margin-width {
  margin-left: var( --spacing-7 , 56px );
  margin-right: var( --spacing-7 , 56px );
}

@mixin spacing-7-margin-height {
  margin-top: 56px;
  margin-bottom: 56px;
}

@mixin spacing-7-margin-left {
  margin-left: var( --spacing-7 , 56px  );
}

@mixin spacing-7-margin-right {
  margin-right: var( --spacing-7 , 56px  );
}

@mixin spacing-7-margin-top {
  margin-top: var( --spacing-7 , 56px  );
}

@mixin spacing-7-margin-bottom {
  margin-bottom: var( --spacing-7 , 56px  );
}

@mixin spacing-7-padding {
  padding: var( --spacing-7 , 56px  );
}

@mixin spacing-7-padding-width {
  padding-left: var( --spacing-7 , 56px );
  padding-right: var( --spacing-7 , 56px );
}

@mixin spacing-7-padding-height {
  padding-top: var( --spacing-7 , 56px );
  padding-bottom: var( --spacing-7 , 56px );
}

@mixin spacing-7-padding-left {
  padding-left: var( --spacing-7 , 56px  );
}

@mixin spacing-7-padding-right {
  padding-right: var( --spacing-7 , 56px  );
}

@mixin spacing-7-padding-top {
  padding-top: var( --spacing-7 , 56px  );
}

@mixin spacing-7-padding-bottom {
  padding-bottom: var( --spacing-7 , 56px  );
}

// ================================
// [SPACING] spacing-8

@mixin spacing-8-size {
  width: var( --spacing-8 , 64px );
  height: var( --spacing-8 , 64px );
}

@mixin spacing-8-width {
  width: var( --spacing-8 , 64px  );
}

@mixin spacing-8-height {
  height: var( --spacing-8 , 64px  );
}

@mixin spacing-8-min-width {
  min-width: var( --spacing-8 , 64px  );
}

@mixin spacing-8-min-height {
  min-height: var( --spacing-8 , 64px  );
}

@mixin spacing-8-top {
  top: var( --spacing-8 , 64px  );
}

@mixin spacing-8-bottom {
  bottom: var( --spacing-8 , 64px  );
}

@mixin spacing-8-left {
  left: var( --spacing-8 , 64px  );
}

@mixin spacing-8-right {
  right: var( --spacing-8 , 64px  );
}

@mixin spacing-8-margin {
  margin: var( --spacing-8 , 64px  );
}

@mixin spacing-8-margin-width {
  margin-left: var( --spacing-8 , 64px );
  margin-right: var( --spacing-8 , 64px );
}

@mixin spacing-8-margin-height {
  margin-top: 64px;
  margin-bottom: 64px;
}

@mixin spacing-8-margin-left {
  margin-left: var( --spacing-8 , 64px  );
}

@mixin spacing-8-margin-right {
  margin-right: var( --spacing-8 , 64px  );
}

@mixin spacing-8-margin-top {
  margin-top: var( --spacing-8 , 64px  );
}

@mixin spacing-8-margin-bottom {
  margin-bottom: var( --spacing-8 , 64px  );
}

@mixin spacing-8-padding {
  padding: var( --spacing-8 , 64px  );
}

@mixin spacing-8-padding-width {
  padding-left: var( --spacing-8 , 64px );
  padding-right: var( --spacing-8 , 64px );
}

@mixin spacing-8-padding-height {
  padding-top: var( --spacing-8 , 64px );
  padding-bottom: var( --spacing-8 , 64px );
}

@mixin spacing-8-padding-left {
  padding-left: var( --spacing-8 , 64px  );
}

@mixin spacing-8-padding-right {
  padding-right: var( --spacing-8 , 64px  );
}

@mixin spacing-8-padding-top {
  padding-top: var( --spacing-8 , 64px  );
}

@mixin spacing-8-padding-bottom {
  padding-bottom: var( --spacing-8 , 64px  );
}

// ================================
// [SPACING] spacing-9

@mixin spacing-9-size {
  width: var( --spacing-9 , 72px );
  height: var( --spacing-9 , 72px );
}

@mixin spacing-9-width {
  width: var( --spacing-9 , 72px  );
}

@mixin spacing-9-height {
  height: var( --spacing-9 , 72px  );
}

@mixin spacing-9-min-width {
  min-width: var( --spacing-9 , 72px  );
}

@mixin spacing-9-min-height {
  min-height: var( --spacing-9 , 72px  );
}

@mixin spacing-9-top {
  top: var( --spacing-9 , 72px  );
}

@mixin spacing-9-bottom {
  bottom: var( --spacing-9 , 72px  );
}

@mixin spacing-9-left {
  left: var( --spacing-9 , 72px  );
}

@mixin spacing-9-right {
  right: var( --spacing-9 , 72px  );
}

@mixin spacing-9-margin {
  margin: var( --spacing-9 , 72px  );
}

@mixin spacing-9-margin-width {
  margin-left: var( --spacing-9 , 72px );
  margin-right: var( --spacing-9 , 72px );
}

@mixin spacing-9-margin-height {
  margin-top: 72px;
  margin-bottom: 72px;
}

@mixin spacing-9-margin-left {
  margin-left: var( --spacing-9 , 72px  );
}

@mixin spacing-9-margin-right {
  margin-right: var( --spacing-9 , 72px  );
}

@mixin spacing-9-margin-top {
  margin-top: var( --spacing-9 , 72px  );
}

@mixin spacing-9-margin-bottom {
  margin-bottom: var( --spacing-9 , 72px  );
}

@mixin spacing-9-padding {
  padding: var( --spacing-9 , 72px  );
}

@mixin spacing-9-padding-width {
  padding-left: var( --spacing-9 , 72px );
  padding-right: var( --spacing-9 , 72px );
}

@mixin spacing-9-padding-height {
  padding-top: var( --spacing-9 , 72px );
  padding-bottom: var( --spacing-9 , 72px );
}

@mixin spacing-9-padding-left {
  padding-left: var( --spacing-9 , 72px  );
}

@mixin spacing-9-padding-right {
  padding-right: var( --spacing-9 , 72px  );
}

@mixin spacing-9-padding-top {
  padding-top: var( --spacing-9 , 72px  );
}

@mixin spacing-9-padding-bottom {
  padding-bottom: var( --spacing-9 , 72px  );
}

// ================================
// [SPACING] spacing-10

@mixin spacing-10-size {
  width: var( --spacing-10 , 80px );
  height: var( --spacing-10 , 80px );
}

@mixin spacing-10-width {
  width: var( --spacing-10 , 80px  );
}

@mixin spacing-10-height {
  height: var( --spacing-10 , 80px  );
}

@mixin spacing-10-min-width {
  min-width: var( --spacing-10 , 80px  );
}

@mixin spacing-10-min-height {
  min-height: var( --spacing-10 , 80px  );
}

@mixin spacing-10-top {
  top: var( --spacing-10 , 80px  );
}

@mixin spacing-10-bottom {
  bottom: var( --spacing-10 , 80px  );
}

@mixin spacing-10-left {
  left: var( --spacing-10 , 80px  );
}

@mixin spacing-10-right {
  right: var( --spacing-10 , 80px  );
}

@mixin spacing-10-margin {
  margin: var( --spacing-10 , 80px  );
}

@mixin spacing-10-margin-width {
  margin-left: var( --spacing-10 , 80px );
  margin-right: var( --spacing-10 , 80px );
}

@mixin spacing-10-margin-height {
  margin-top: 80px;
  margin-bottom: 80px;
}

@mixin spacing-10-margin-left {
  margin-left: var( --spacing-10 , 80px  );
}

@mixin spacing-10-margin-right {
  margin-right: var( --spacing-10 , 80px  );
}

@mixin spacing-10-margin-top {
  margin-top: var( --spacing-10 , 80px  );
}

@mixin spacing-10-margin-bottom {
  margin-bottom: var( --spacing-10 , 80px  );
}

@mixin spacing-10-padding {
  padding: var( --spacing-10 , 80px  );
}

@mixin spacing-10-padding-width {
  padding-left: var( --spacing-10 , 80px );
  padding-right: var( --spacing-10 , 80px );
}

@mixin spacing-10-padding-height {
  padding-top: var( --spacing-10 , 80px );
  padding-bottom: var( --spacing-10 , 80px );
}

@mixin spacing-10-padding-left {
  padding-left: var( --spacing-10 , 80px  );
}

@mixin spacing-10-padding-right {
  padding-right: var( --spacing-10 , 80px  );
}

@mixin spacing-10-padding-top {
  padding-top: var( --spacing-10 , 80px  );
}

@mixin spacing-10-padding-bottom {
  padding-bottom: var( --spacing-10 , 80px  );
}

// ================================
// [SPACING] spacing-11

@mixin spacing-11-size {
  width: var( --spacing-11 , 88px );
  height: var( --spacing-11 , 88px );
}

@mixin spacing-11-width {
  width: var( --spacing-11 , 88px  );
}

@mixin spacing-11-height {
  height: var( --spacing-11 , 88px  );
}

@mixin spacing-11-min-width {
  min-width: var( --spacing-11 , 88px  );
}

@mixin spacing-11-min-height {
  min-height: var( --spacing-11 , 88px  );
}

@mixin spacing-11-top {
  top: var( --spacing-11 , 88px  );
}

@mixin spacing-11-bottom {
  bottom: var( --spacing-11 , 88px  );
}

@mixin spacing-11-left {
  left: var( --spacing-11 , 88px  );
}

@mixin spacing-11-right {
  right: var( --spacing-11 , 88px  );
}

@mixin spacing-11-margin {
  margin: var( --spacing-11 , 88px  );
}

@mixin spacing-11-margin-width {
  margin-left: var( --spacing-11 , 88px );
  margin-right: var( --spacing-11 , 88px );
}

@mixin spacing-11-margin-height {
  margin-top: 88px;
  margin-bottom: 88px;
}

@mixin spacing-11-margin-left {
  margin-left: var( --spacing-11 , 88px  );
}

@mixin spacing-11-margin-right {
  margin-right: var( --spacing-11 , 88px  );
}

@mixin spacing-11-margin-top {
  margin-top: var( --spacing-11 , 88px  );
}

@mixin spacing-11-margin-bottom {
  margin-bottom: var( --spacing-11 , 88px  );
}

@mixin spacing-11-padding {
  padding: var( --spacing-11 , 88px  );
}

@mixin spacing-11-padding-width {
  padding-left: var( --spacing-11 , 88px );
  padding-right: var( --spacing-11 , 88px );
}

@mixin spacing-11-padding-height {
  padding-top: var( --spacing-11 , 88px );
  padding-bottom: var( --spacing-11 , 88px );
}

@mixin spacing-11-padding-left {
  padding-left: var( --spacing-11 , 88px  );
}

@mixin spacing-11-padding-right {
  padding-right: var( --spacing-11 , 88px  );
}

@mixin spacing-11-padding-top {
  padding-top: var( --spacing-11 , 88px  );
}

@mixin spacing-11-padding-bottom {
  padding-bottom: var( --spacing-11 , 88px  );
}

// ================================
// [SPACING] spacing-12

@mixin spacing-12-size {
  width: var( --spacing-12 , 96px );
  height: var( --spacing-12 , 96px );
}

@mixin spacing-12-width {
  width: var( --spacing-12 , 96px  );
}

@mixin spacing-12-height {
  height: var( --spacing-12 , 96px  );
}

@mixin spacing-12-min-width {
  min-width: var( --spacing-12 , 96px  );
}

@mixin spacing-12-min-height {
  min-height: var( --spacing-12 , 96px  );
}

@mixin spacing-12-top {
  top: var( --spacing-12 , 96px  );
}

@mixin spacing-12-bottom {
  bottom: var( --spacing-12 , 96px  );
}

@mixin spacing-12-left {
  left: var( --spacing-12 , 96px  );
}

@mixin spacing-12-right {
  right: var( --spacing-12 , 96px  );
}

@mixin spacing-12-margin {
  margin: var( --spacing-12 , 96px  );
}

@mixin spacing-12-margin-width {
  margin-left: var( --spacing-12 , 96px );
  margin-right: var( --spacing-12 , 96px );
}

@mixin spacing-12-margin-height {
  margin-top: 96px;
  margin-bottom: 96px;
}

@mixin spacing-12-margin-left {
  margin-left: var( --spacing-12 , 96px  );
}

@mixin spacing-12-margin-right {
  margin-right: var( --spacing-12 , 96px  );
}

@mixin spacing-12-margin-top {
  margin-top: var( --spacing-12 , 96px  );
}

@mixin spacing-12-margin-bottom {
  margin-bottom: var( --spacing-12 , 96px  );
}

@mixin spacing-12-padding {
  padding: var( --spacing-12 , 96px  );
}

@mixin spacing-12-padding-width {
  padding-left: var( --spacing-12 , 96px );
  padding-right: var( --spacing-12 , 96px );
}

@mixin spacing-12-padding-height {
  padding-top: var( --spacing-12 , 96px );
  padding-bottom: var( --spacing-12 , 96px );
}

@mixin spacing-12-padding-left {
  padding-left: var( --spacing-12 , 96px  );
}

@mixin spacing-12-padding-right {
  padding-right: var( --spacing-12 , 96px  );
}

@mixin spacing-12-padding-top {
  padding-top: var( --spacing-12 , 96px  );
}

@mixin spacing-12-padding-bottom {
  padding-bottom: var( --spacing-12 , 96px  );
}

// ================================
// [COLUMNS] col-0

@mixin col-0-width {
  width: var( --col-0 , 0% );
}

@mixin col-0-min-width {
  min-width: var( --col-0 , 0% );
}

@mixin col-0-left {
  left: var( --col-0 , 0% );
}

@mixin col-0-right {
  right: var( --col-0 , 0% );
}

// ================================
// [COLUMNS] col-0-3

@mixin col-0-3-width {
  width: var( --col-0-3 , 2.0833% );
}

@mixin col-0-3-min-width {
  min-width: var( --col-0-3 , 2.0833% );
}

@mixin col-0-3-left {
  left: var( --col-0-3 , 2.0833% );
}

@mixin col-0-3-right {
  right: var( --col-0-3 , 2.0833% );
}

// ================================
// [COLUMNS] col-0-4

@mixin col-0-4-width {
  width: var( --col-0-4 , 2.7778% );
}

@mixin col-0-4-min-width {
  min-width: var( --col-0-4 , 2.7778% );
}

@mixin col-0-4-left {
  left: var( --col-0-4 , 2.7778% );
}

@mixin col-0-4-right {
  right: var( --col-0-4 , 2.7778% );
}

// ================================
// [COLUMNS] col-0-6

@mixin col-0-6-width {
  width: var( --col-0-6 , 4.1667% );
}

@mixin col-0-6-min-width {
  min-width: var( --col-0-6 , 4.1667% );
}

@mixin col-0-6-left {
  left: var( --col-0-6 , 4.1667% );
}

@mixin col-0-6-right {
  right: var( --col-0-6 , 4.1667% );
}

// ================================
// [COLUMNS] col-0-8

@mixin col-0-8-width {
  width: var( --col-0-8 , 5.5556% );
}

@mixin col-0-8-min-width {
  min-width: var( --col-0-8 , 5.5556% );
}

@mixin col-0-8-left {
  left: var( --col-0-8 , 5.5556% );
}

@mixin col-0-8-right {
  right: var( --col-0-8 , 5.5556% );
}

// ================================
// [COLUMNS] col-0-9

@mixin col-0-9-width {
  width: var( --col-0-9 , 6.25% );
}

@mixin col-0-9-min-width {
  min-width: var( --col-0-9 , 6.25% );
}

@mixin col-0-9-left {
  left: var( --col-0-9 , 6.25% );
}

@mixin col-0-9-right {
  right: var( --col-0-9 , 6.25% );
}

// ================================
// [COLUMNS] col-1

@mixin col-1-width {
  width: var( --col-1 , 8.3333% );
}

@mixin col-1-min-width {
  min-width: var( --col-1 , 8.3333% );
}

@mixin col-1-left {
  left: var( --col-1 , 8.3333% );
}

@mixin col-1-right {
  right: var( --col-1 , 8.3333% );
}

// ================================
// [COLUMNS] col-1-3

@mixin col-1-3-width {
  width: var( --col-1-3 , 10.4167% );
}

@mixin col-1-3-min-width {
  min-width: var( --col-1-3 , 10.4167% );
}

@mixin col-1-3-left {
  left: var( --col-1-3 , 10.4167% );
}

@mixin col-1-3-right {
  right: var( --col-1-3 , 10.4167% );
}

// ================================
// [COLUMNS] col-1-4

@mixin col-1-4-width {
  width: var( --col-1-4 , 11.1111% );
}

@mixin col-1-4-min-width {
  min-width: var( --col-1-4 , 11.1111% );
}

@mixin col-1-4-left {
  left: var( --col-1-4 , 11.1111% );
}

@mixin col-1-4-right {
  right: var( --col-1-4 , 11.1111% );
}

// ================================
// [COLUMNS] col-1-6

@mixin col-1-6-width {
  width: var( --col-1-6 , 12.5% );
}

@mixin col-1-6-min-width {
  min-width: var( --col-1-6 , 12.5% );
}

@mixin col-1-6-left {
  left: var( --col-1-6 , 12.5% );
}

@mixin col-1-6-right {
  right: var( --col-1-6 , 12.5% );
}

// ================================
// [COLUMNS] col-1-8

@mixin col-1-8-width {
  width: var( --col-1-8 , 13.8889% );
}

@mixin col-1-8-min-width {
  min-width: var( --col-1-8 , 13.8889% );
}

@mixin col-1-8-left {
  left: var( --col-1-8 , 13.8889% );
}

@mixin col-1-8-right {
  right: var( --col-1-8 , 13.8889% );
}

// ================================
// [COLUMNS] col-1-9

@mixin col-1-9-width {
  width: var( --col-1-9 , 14.5833% );
}

@mixin col-1-9-min-width {
  min-width: var( --col-1-9 , 14.5833% );
}

@mixin col-1-9-left {
  left: var( --col-1-9 , 14.5833% );
}

@mixin col-1-9-right {
  right: var( --col-1-9 , 14.5833% );
}

// ================================
// [COLUMNS] col-2

@mixin col-2-width {
  width: var( --col-2 , 16.6667% );
}

@mixin col-2-min-width {
  min-width: var( --col-2 , 16.6667% );
}

@mixin col-2-left {
  left: var( --col-2 , 16.6667% );
}

@mixin col-2-right {
  right: var( --col-2 , 16.6667% );
}

// ================================
// [COLUMNS] col-2-3

@mixin col-2-3-width {
  width: var( --col-2-3 , 18.75% );
}

@mixin col-2-3-min-width {
  min-width: var( --col-2-3 , 18.75% );
}

@mixin col-2-3-left {
  left: var( --col-2-3 , 18.75% );
}

@mixin col-2-3-right {
  right: var( --col-2-3 , 18.75% );
}

// ================================
// [COLUMNS] col-2-4

@mixin col-2-4-width {
  width: var( --col-2-4 , 19.4444% );
}

@mixin col-2-4-min-width {
  min-width: var( --col-2-4 , 19.4444% );
}

@mixin col-2-4-left {
  left: var( --col-2-4 , 19.4444% );
}

@mixin col-2-4-right {
  right: var( --col-2-4 , 19.4444% );
}

// ================================
// [COLUMNS] col-2-6

@mixin col-2-6-width {
  width: var( --col-2-6 , 20.8333% );
}

@mixin col-2-6-min-width {
  min-width: var( --col-2-6 , 20.8333% );
}

@mixin col-2-6-left {
  left: var( --col-2-6 , 20.8333% );
}

@mixin col-2-6-right {
  right: var( --col-2-6 , 20.8333% );
}

// ================================
// [COLUMNS] col-2-8

@mixin col-2-8-width {
  width: var( --col-2-8 , 22.2222% );
}

@mixin col-2-8-min-width {
  min-width: var( --col-2-8 , 22.2222% );
}

@mixin col-2-8-left {
  left: var( --col-2-8 , 22.2222% );
}

@mixin col-2-8-right {
  right: var( --col-2-8 , 22.2222% );
}

// ================================
// [COLUMNS] col-2-9

@mixin col-2-9-width {
  width: var( --col-2-9 , 22.9167% );
}

@mixin col-2-9-min-width {
  min-width: var( --col-2-9 , 22.9167% );
}

@mixin col-2-9-left {
  left: var( --col-2-9 , 22.9167% );
}

@mixin col-2-9-right {
  right: var( --col-2-9 , 22.9167% );
}

// ================================
// [COLUMNS] col-3

@mixin col-3-width {
  width: var( --col-3 , 25% );
}

@mixin col-3-min-width {
  min-width: var( --col-3 , 25% );
}

@mixin col-3-left {
  left: var( --col-3 , 25% );
}

@mixin col-3-right {
  right: var( --col-3 , 25% );
}

// ================================
// [COLUMNS] col-3-3

@mixin col-3-3-width {
  width: var( --col-3-3 , 27.0833% );
}

@mixin col-3-3-min-width {
  min-width: var( --col-3-3 , 27.0833% );
}

@mixin col-3-3-left {
  left: var( --col-3-3 , 27.0833% );
}

@mixin col-3-3-right {
  right: var( --col-3-3 , 27.0833% );
}

// ================================
// [COLUMNS] col-3-4

@mixin col-3-4-width {
  width: var( --col-3-4 , 27.7778% );
}

@mixin col-3-4-min-width {
  min-width: var( --col-3-4 , 27.7778% );
}

@mixin col-3-4-left {
  left: var( --col-3-4 , 27.7778% );
}

@mixin col-3-4-right {
  right: var( --col-3-4 , 27.7778% );
}

// ================================
// [COLUMNS] col-3-6

@mixin col-3-6-width {
  width: var( --col-3-6 , 29.1667% );
}

@mixin col-3-6-min-width {
  min-width: var( --col-3-6 , 29.1667% );
}

@mixin col-3-6-left {
  left: var( --col-3-6 , 29.1667% );
}

@mixin col-3-6-right {
  right: var( --col-3-6 , 29.1667% );
}

// ================================
// [COLUMNS] col-3-8

@mixin col-3-8-width {
  width: var( --col-3-8 , 30.5556% );
}

@mixin col-3-8-min-width {
  min-width: var( --col-3-8 , 30.5556% );
}

@mixin col-3-8-left {
  left: var( --col-3-8 , 30.5556% );
}

@mixin col-3-8-right {
  right: var( --col-3-8 , 30.5556% );
}

// ================================
// [COLUMNS] col-3-9

@mixin col-3-9-width {
  width: var( --col-3-9 , 31.25% );
}

@mixin col-3-9-min-width {
  min-width: var( --col-3-9 , 31.25% );
}

@mixin col-3-9-left {
  left: var( --col-3-9 , 31.25% );
}

@mixin col-3-9-right {
  right: var( --col-3-9 , 31.25% );
}

// ================================
// [COLUMNS] col-4

@mixin col-4-width {
  width: var( --col-4 , 33.3333% );
}

@mixin col-4-min-width {
  min-width: var( --col-4 , 33.3333% );
}

@mixin col-4-left {
  left: var( --col-4 , 33.3333% );
}

@mixin col-4-right {
  right: var( --col-4 , 33.3333% );
}

// ================================
// [COLUMNS] col-4-3

@mixin col-4-3-width {
  width: var( --col-4-3 , 35.4167% );
}

@mixin col-4-3-min-width {
  min-width: var( --col-4-3 , 35.4167% );
}

@mixin col-4-3-left {
  left: var( --col-4-3 , 35.4167% );
}

@mixin col-4-3-right {
  right: var( --col-4-3 , 35.4167% );
}

// ================================
// [COLUMNS] col-4-4

@mixin col-4-4-width {
  width: var( --col-4-4 , 36.1111% );
}

@mixin col-4-4-min-width {
  min-width: var( --col-4-4 , 36.1111% );
}

@mixin col-4-4-left {
  left: var( --col-4-4 , 36.1111% );
}

@mixin col-4-4-right {
  right: var( --col-4-4 , 36.1111% );
}

// ================================
// [COLUMNS] col-4-6

@mixin col-4-6-width {
  width: var( --col-4-6 , 37.5% );
}

@mixin col-4-6-min-width {
  min-width: var( --col-4-6 , 37.5% );
}

@mixin col-4-6-left {
  left: var( --col-4-6 , 37.5% );
}

@mixin col-4-6-right {
  right: var( --col-4-6 , 37.5% );
}

// ================================
// [COLUMNS] col-4-8

@mixin col-4-8-width {
  width: var( --col-4-8 , 38.8889% );
}

@mixin col-4-8-min-width {
  min-width: var( --col-4-8 , 38.8889% );
}

@mixin col-4-8-left {
  left: var( --col-4-8 , 38.8889% );
}

@mixin col-4-8-right {
  right: var( --col-4-8 , 38.8889% );
}

// ================================
// [COLUMNS] col-4-9

@mixin col-4-9-width {
  width: var( --col-4-9 , 39.5833% );
}

@mixin col-4-9-min-width {
  min-width: var( --col-4-9 , 39.5833% );
}

@mixin col-4-9-left {
  left: var( --col-4-9 , 39.5833% );
}

@mixin col-4-9-right {
  right: var( --col-4-9 , 39.5833% );
}

// ================================
// [COLUMNS] col-5

@mixin col-5-width {
  width: var( --col-5 , 41.6667% );
}

@mixin col-5-min-width {
  min-width: var( --col-5 , 41.6667% );
}

@mixin col-5-left {
  left: var( --col-5 , 41.6667% );
}

@mixin col-5-right {
  right: var( --col-5 , 41.6667% );
}

// ================================
// [COLUMNS] col-5-3

@mixin col-5-3-width {
  width: var( --col-5-3 , 43.75% );
}

@mixin col-5-3-min-width {
  min-width: var( --col-5-3 , 43.75% );
}

@mixin col-5-3-left {
  left: var( --col-5-3 , 43.75% );
}

@mixin col-5-3-right {
  right: var( --col-5-3 , 43.75% );
}

// ================================
// [COLUMNS] col-5-4

@mixin col-5-4-width {
  width: var( --col-5-4 , 44.4444% );
}

@mixin col-5-4-min-width {
  min-width: var( --col-5-4 , 44.4444% );
}

@mixin col-5-4-left {
  left: var( --col-5-4 , 44.4444% );
}

@mixin col-5-4-right {
  right: var( --col-5-4 , 44.4444% );
}

// ================================
// [COLUMNS] col-5-6

@mixin col-5-6-width {
  width: var( --col-5-6 , 45.8333% );
}

@mixin col-5-6-min-width {
  min-width: var( --col-5-6 , 45.8333% );
}

@mixin col-5-6-left {
  left: var( --col-5-6 , 45.8333% );
}

@mixin col-5-6-right {
  right: var( --col-5-6 , 45.8333% );
}

// ================================
// [COLUMNS] col-5-8

@mixin col-5-8-width {
  width: var( --col-5-8 , 47.2222% );
}

@mixin col-5-8-min-width {
  min-width: var( --col-5-8 , 47.2222% );
}

@mixin col-5-8-left {
  left: var( --col-5-8 , 47.2222% );
}

@mixin col-5-8-right {
  right: var( --col-5-8 , 47.2222% );
}

// ================================
// [COLUMNS] col-5-9

@mixin col-5-9-width {
  width: var( --col-5-9 , 47.9167% );
}

@mixin col-5-9-min-width {
  min-width: var( --col-5-9 , 47.9167% );
}

@mixin col-5-9-left {
  left: var( --col-5-9 , 47.9167% );
}

@mixin col-5-9-right {
  right: var( --col-5-9 , 47.9167% );
}

// ================================
// [COLUMNS] col-6

@mixin col-6-width {
  width: var( --col-6 , 50% );
}

@mixin col-6-min-width {
  min-width: var( --col-6 , 50% );
}

@mixin col-6-left {
  left: var( --col-6 , 50% );
}

@mixin col-6-right {
  right: var( --col-6 , 50% );
}

// ================================
// [COLUMNS] col-6-3

@mixin col-6-3-width {
  width: var( --col-6-3 , 52.0833% );
}

@mixin col-6-3-min-width {
  min-width: var( --col-6-3 , 52.0833% );
}

@mixin col-6-3-left {
  left: var( --col-6-3 , 52.0833% );
}

@mixin col-6-3-right {
  right: var( --col-6-3 , 52.0833% );
}

// ================================
// [COLUMNS] col-6-4

@mixin col-6-4-width {
  width: var( --col-6-4 , 52.7778% );
}

@mixin col-6-4-min-width {
  min-width: var( --col-6-4 , 52.7778% );
}

@mixin col-6-4-left {
  left: var( --col-6-4 , 52.7778% );
}

@mixin col-6-4-right {
  right: var( --col-6-4 , 52.7778% );
}

// ================================
// [COLUMNS] col-6-6

@mixin col-6-6-width {
  width: var( --col-6-6 , 54.1667% );
}

@mixin col-6-6-min-width {
  min-width: var( --col-6-6 , 54.1667% );
}

@mixin col-6-6-left {
  left: var( --col-6-6 , 54.1667% );
}

@mixin col-6-6-right {
  right: var( --col-6-6 , 54.1667% );
}

// ================================
// [COLUMNS] col-6-8

@mixin col-6-8-width {
  width: var( --col-6-8 , 55.5556% );
}

@mixin col-6-8-min-width {
  min-width: var( --col-6-8 , 55.5556% );
}

@mixin col-6-8-left {
  left: var( --col-6-8 , 55.5556% );
}

@mixin col-6-8-right {
  right: var( --col-6-8 , 55.5556% );
}

// ================================
// [COLUMNS] col-6-9

@mixin col-6-9-width {
  width: var( --col-6-9 , 56.25% );
}

@mixin col-6-9-min-width {
  min-width: var( --col-6-9 , 56.25% );
}

@mixin col-6-9-left {
  left: var( --col-6-9 , 56.25% );
}

@mixin col-6-9-right {
  right: var( --col-6-9 , 56.25% );
}

// ================================
// [COLUMNS] col-7

@mixin col-7-width {
  width: var( --col-7 , 58.3333% );
}

@mixin col-7-min-width {
  min-width: var( --col-7 , 58.3333% );
}

@mixin col-7-left {
  left: var( --col-7 , 58.3333% );
}

@mixin col-7-right {
  right: var( --col-7 , 58.3333% );
}

// ================================
// [COLUMNS] col-7-3

@mixin col-7-3-width {
  width: var( --col-7-3 , 60.4167% );
}

@mixin col-7-3-min-width {
  min-width: var( --col-7-3 , 60.4167% );
}

@mixin col-7-3-left {
  left: var( --col-7-3 , 60.4167% );
}

@mixin col-7-3-right {
  right: var( --col-7-3 , 60.4167% );
}

// ================================
// [COLUMNS] col-7-4

@mixin col-7-4-width {
  width: var( --col-7-4 , 61.1111% );
}

@mixin col-7-4-min-width {
  min-width: var( --col-7-4 , 61.1111% );
}

@mixin col-7-4-left {
  left: var( --col-7-4 , 61.1111% );
}

@mixin col-7-4-right {
  right: var( --col-7-4 , 61.1111% );
}

// ================================
// [COLUMNS] col-7-6

@mixin col-7-6-width {
  width: var( --col-7-6 , 62.5% );
}

@mixin col-7-6-min-width {
  min-width: var( --col-7-6 , 62.5% );
}

@mixin col-7-6-left {
  left: var( --col-7-6 , 62.5% );
}

@mixin col-7-6-right {
  right: var( --col-7-6 , 62.5% );
}

// ================================
// [COLUMNS] col-7-8

@mixin col-7-8-width {
  width: var( --col-7-8 , 63.8889% );
}

@mixin col-7-8-min-width {
  min-width: var( --col-7-8 , 63.8889% );
}

@mixin col-7-8-left {
  left: var( --col-7-8 , 63.8889% );
}

@mixin col-7-8-right {
  right: var( --col-7-8 , 63.8889% );
}

// ================================
// [COLUMNS] col-7-9

@mixin col-7-9-width {
  width: var( --col-7-9 , 64.5833% );
}

@mixin col-7-9-min-width {
  min-width: var( --col-7-9 , 64.5833% );
}

@mixin col-7-9-left {
  left: var( --col-7-9 , 64.5833% );
}

@mixin col-7-9-right {
  right: var( --col-7-9 , 64.5833% );
}

// ================================
// [COLUMNS] col-8

@mixin col-8-width {
  width: var( --col-8 , 66.6667% );
}

@mixin col-8-min-width {
  min-width: var( --col-8 , 66.6667% );
}

@mixin col-8-left {
  left: var( --col-8 , 66.6667% );
}

@mixin col-8-right {
  right: var( --col-8 , 66.6667% );
}

// ================================
// [COLUMNS] col-8-3

@mixin col-8-3-width {
  width: var( --col-8-3 , 68.75% );
}

@mixin col-8-3-min-width {
  min-width: var( --col-8-3 , 68.75% );
}

@mixin col-8-3-left {
  left: var( --col-8-3 , 68.75% );
}

@mixin col-8-3-right {
  right: var( --col-8-3 , 68.75% );
}

// ================================
// [COLUMNS] col-8-4

@mixin col-8-4-width {
  width: var( --col-8-4 , 69.4444% );
}

@mixin col-8-4-min-width {
  min-width: var( --col-8-4 , 69.4444% );
}

@mixin col-8-4-left {
  left: var( --col-8-4 , 69.4444% );
}

@mixin col-8-4-right {
  right: var( --col-8-4 , 69.4444% );
}

// ================================
// [COLUMNS] col-8-6

@mixin col-8-6-width {
  width: var( --col-8-6 , 70.8333% );
}

@mixin col-8-6-min-width {
  min-width: var( --col-8-6 , 70.8333% );
}

@mixin col-8-6-left {
  left: var( --col-8-6 , 70.8333% );
}

@mixin col-8-6-right {
  right: var( --col-8-6 , 70.8333% );
}

// ================================
// [COLUMNS] col-8-8

@mixin col-8-8-width {
  width: var( --col-8-8 , 72.2222% );
}

@mixin col-8-8-min-width {
  min-width: var( --col-8-8 , 72.2222% );
}

@mixin col-8-8-left {
  left: var( --col-8-8 , 72.2222% );
}

@mixin col-8-8-right {
  right: var( --col-8-8 , 72.2222% );
}

// ================================
// [COLUMNS] col-8-9

@mixin col-8-9-width {
  width: var( --col-8-9 , 72.9167% );
}

@mixin col-8-9-min-width {
  min-width: var( --col-8-9 , 72.9167% );
}

@mixin col-8-9-left {
  left: var( --col-8-9 , 72.9167% );
}

@mixin col-8-9-right {
  right: var( --col-8-9 , 72.9167% );
}

// ================================
// [COLUMNS] col-9

@mixin col-9-width {
  width: var( --col-9 , 75% );
}

@mixin col-9-min-width {
  min-width: var( --col-9 , 75% );
}

@mixin col-9-left {
  left: var( --col-9 , 75% );
}

@mixin col-9-right {
  right: var( --col-9 , 75% );
}

// ================================
// [COLUMNS] col-9-3

@mixin col-9-3-width {
  width: var( --col-9-3 , 77.0833% );
}

@mixin col-9-3-min-width {
  min-width: var( --col-9-3 , 77.0833% );
}

@mixin col-9-3-left {
  left: var( --col-9-3 , 77.0833% );
}

@mixin col-9-3-right {
  right: var( --col-9-3 , 77.0833% );
}

// ================================
// [COLUMNS] col-9-4

@mixin col-9-4-width {
  width: var( --col-9-4 , 77.7778% );
}

@mixin col-9-4-min-width {
  min-width: var( --col-9-4 , 77.7778% );
}

@mixin col-9-4-left {
  left: var( --col-9-4 , 77.7778% );
}

@mixin col-9-4-right {
  right: var( --col-9-4 , 77.7778% );
}

// ================================
// [COLUMNS] col-9-6

@mixin col-9-6-width {
  width: var( --col-9-6 , 79.1667% );
}

@mixin col-9-6-min-width {
  min-width: var( --col-9-6 , 79.1667% );
}

@mixin col-9-6-left {
  left: var( --col-9-6 , 79.1667% );
}

@mixin col-9-6-right {
  right: var( --col-9-6 , 79.1667% );
}

// ================================
// [COLUMNS] col-9-8

@mixin col-9-8-width {
  width: var( --col-9-8 , 80.5556% );
}

@mixin col-9-8-min-width {
  min-width: var( --col-9-8 , 80.5556% );
}

@mixin col-9-8-left {
  left: var( --col-9-8 , 80.5556% );
}

@mixin col-9-8-right {
  right: var( --col-9-8 , 80.5556% );
}

// ================================
// [COLUMNS] col-9-9

@mixin col-9-9-width {
  width: var( --col-9-9 , 81.25% );
}

@mixin col-9-9-min-width {
  min-width: var( --col-9-9 , 81.25% );
}

@mixin col-9-9-left {
  left: var( --col-9-9 , 81.25% );
}

@mixin col-9-9-right {
  right: var( --col-9-9 , 81.25% );
}

// ================================
// [COLUMNS] col-10

@mixin col-10-width {
  width: var( --col-10 , 83.3333% );
}

@mixin col-10-min-width {
  min-width: var( --col-10 , 83.3333% );
}

@mixin col-10-left {
  left: var( --col-10 , 83.3333% );
}

@mixin col-10-right {
  right: var( --col-10 , 83.3333% );
}

// ================================
// [COLUMNS] col-10-3

@mixin col-10-3-width {
  width: var( --col-10-3 , 85.4167% );
}

@mixin col-10-3-min-width {
  min-width: var( --col-10-3 , 85.4167% );
}

@mixin col-10-3-left {
  left: var( --col-10-3 , 85.4167% );
}

@mixin col-10-3-right {
  right: var( --col-10-3 , 85.4167% );
}

// ================================
// [COLUMNS] col-10-4

@mixin col-10-4-width {
  width: var( --col-10-4 , 86.1111% );
}

@mixin col-10-4-min-width {
  min-width: var( --col-10-4 , 86.1111% );
}

@mixin col-10-4-left {
  left: var( --col-10-4 , 86.1111% );
}

@mixin col-10-4-right {
  right: var( --col-10-4 , 86.1111% );
}

// ================================
// [COLUMNS] col-10-6

@mixin col-10-6-width {
  width: var( --col-10-6 , 87.5% );
}

@mixin col-10-6-min-width {
  min-width: var( --col-10-6 , 87.5% );
}

@mixin col-10-6-left {
  left: var( --col-10-6 , 87.5% );
}

@mixin col-10-6-right {
  right: var( --col-10-6 , 87.5% );
}

// ================================
// [COLUMNS] col-10-8

@mixin col-10-8-width {
  width: var( --col-10-8 , 88.8889% );
}

@mixin col-10-8-min-width {
  min-width: var( --col-10-8 , 88.8889% );
}

@mixin col-10-8-left {
  left: var( --col-10-8 , 88.8889% );
}

@mixin col-10-8-right {
  right: var( --col-10-8 , 88.8889% );
}

// ================================
// [COLUMNS] col-10-9

@mixin col-10-9-width {
  width: var( --col-10-9 , 89.5833% );
}

@mixin col-10-9-min-width {
  min-width: var( --col-10-9 , 89.5833% );
}

@mixin col-10-9-left {
  left: var( --col-10-9 , 89.5833% );
}

@mixin col-10-9-right {
  right: var( --col-10-9 , 89.5833% );
}

// ================================
// [COLUMNS] col-11

@mixin col-11-width {
  width: var( --col-11 , 91.6667% );
}

@mixin col-11-min-width {
  min-width: var( --col-11 , 91.6667% );
}

@mixin col-11-left {
  left: var( --col-11 , 91.6667% );
}

@mixin col-11-right {
  right: var( --col-11 , 91.6667% );
}

// ================================
// [COLUMNS] col-11-3

@mixin col-11-3-width {
  width: var( --col-11-3 , 93.75% );
}

@mixin col-11-3-min-width {
  min-width: var( --col-11-3 , 93.75% );
}

@mixin col-11-3-left {
  left: var( --col-11-3 , 93.75% );
}

@mixin col-11-3-right {
  right: var( --col-11-3 , 93.75% );
}

// ================================
// [COLUMNS] col-11-4

@mixin col-11-4-width {
  width: var( --col-11-4 , 94.4444% );
}

@mixin col-11-4-min-width {
  min-width: var( --col-11-4 , 94.4444% );
}

@mixin col-11-4-left {
  left: var( --col-11-4 , 94.4444% );
}

@mixin col-11-4-right {
  right: var( --col-11-4 , 94.4444% );
}

// ================================
// [COLUMNS] col-11-6

@mixin col-11-6-width {
  width: var( --col-11-6 , 95.8333% );
}

@mixin col-11-6-min-width {
  min-width: var( --col-11-6 , 95.8333% );
}

@mixin col-11-6-left {
  left: var( --col-11-6 , 95.8333% );
}

@mixin col-11-6-right {
  right: var( --col-11-6 , 95.8333% );
}

// ================================
// [COLUMNS] col-11-8

@mixin col-11-8-width {
  width: var( --col-11-8 , 97.2222% );
}

@mixin col-11-8-min-width {
  min-width: var( --col-11-8 , 97.2222% );
}

@mixin col-11-8-left {
  left: var( --col-11-8 , 97.2222% );
}

@mixin col-11-8-right {
  right: var( --col-11-8 , 97.2222% );
}

// ================================
// [COLUMNS] col-11-9

@mixin col-11-9-width {
  width: var( --col-11-9 , 97.9167% );
}

@mixin col-11-9-min-width {
  min-width: var( --col-11-9 , 97.9167% );
}

@mixin col-11-9-left {
  left: var( --col-11-9 , 97.9167% );
}

@mixin col-11-9-right {
  right: var( --col-11-9 , 97.9167% );
}

// ================================
// [COLUMNS] col-12

@mixin col-12-width {
  width: var( --col-12 , 100% );
}

@mixin col-12-min-width {
  min-width: var( --col-12 , 100% );
}

@mixin col-12-left {
  left: var( --col-12 , 100% );
}

@mixin col-12-right {
  right: var( --col-12 , 100% );
}

// ================================
// [COLUMNS] colvw-0

@mixin colvw-0-width {
  width: var( --colvw-0 , 0vw );
}

@mixin colvw-0-min-width {
  min-width: var( --colvw-0 , 0vw );
}

@mixin colvw-0-left {
  left: var( --colvw-0 , 0vw );
}

@mixin colvw-0-right {
  right: var( --colvw-0 , 0vw );
}

// ================================
// [COLUMNS] colvw-0-3

@mixin colvw-0-3-width {
  width: var( --colvw-0-3 , 2.0833vw );
}

@mixin colvw-0-3-min-width {
  min-width: var( --colvw-0-3 , 2.0833vw );
}

@mixin colvw-0-3-left {
  left: var( --colvw-0-3 , 2.0833vw );
}

@mixin colvw-0-3-right {
  right: var( --colvw-0-3 , 2.0833vw );
}

// ================================
// [COLUMNS] colvw-0-4

@mixin colvw-0-4-width {
  width: var( --colvw-0-4 , 2.7778vw );
}

@mixin colvw-0-4-min-width {
  min-width: var( --colvw-0-4 , 2.7778vw );
}

@mixin colvw-0-4-left {
  left: var( --colvw-0-4 , 2.7778vw );
}

@mixin colvw-0-4-right {
  right: var( --colvw-0-4 , 2.7778vw );
}

// ================================
// [COLUMNS] colvw-0-6

@mixin colvw-0-6-width {
  width: var( --colvw-0-6 , 4.1667vw );
}

@mixin colvw-0-6-min-width {
  min-width: var( --colvw-0-6 , 4.1667vw );
}

@mixin colvw-0-6-left {
  left: var( --colvw-0-6 , 4.1667vw );
}

@mixin colvw-0-6-right {
  right: var( --colvw-0-6 , 4.1667vw );
}

// ================================
// [COLUMNS] colvw-0-8

@mixin colvw-0-8-width {
  width: var( --colvw-0-8 , 5.5556vw );
}

@mixin colvw-0-8-min-width {
  min-width: var( --colvw-0-8 , 5.5556vw );
}

@mixin colvw-0-8-left {
  left: var( --colvw-0-8 , 5.5556vw );
}

@mixin colvw-0-8-right {
  right: var( --colvw-0-8 , 5.5556vw );
}

// ================================
// [COLUMNS] colvw-0-9

@mixin colvw-0-9-width {
  width: var( --colvw-0-9 , 6.25vw );
}

@mixin colvw-0-9-min-width {
  min-width: var( --colvw-0-9 , 6.25vw );
}

@mixin colvw-0-9-left {
  left: var( --colvw-0-9 , 6.25vw );
}

@mixin colvw-0-9-right {
  right: var( --colvw-0-9 , 6.25vw );
}

// ================================
// [COLUMNS] colvw-1

@mixin colvw-1-width {
  width: var( --colvw-1 , 8.3333vw );
}

@mixin colvw-1-min-width {
  min-width: var( --colvw-1 , 8.3333vw );
}

@mixin colvw-1-left {
  left: var( --colvw-1 , 8.3333vw );
}

@mixin colvw-1-right {
  right: var( --colvw-1 , 8.3333vw );
}

// ================================
// [COLUMNS] colvw-1-3

@mixin colvw-1-3-width {
  width: var( --colvw-1-3 , 10.4167vw );
}

@mixin colvw-1-3-min-width {
  min-width: var( --colvw-1-3 , 10.4167vw );
}

@mixin colvw-1-3-left {
  left: var( --colvw-1-3 , 10.4167vw );
}

@mixin colvw-1-3-right {
  right: var( --colvw-1-3 , 10.4167vw );
}

// ================================
// [COLUMNS] colvw-1-4

@mixin colvw-1-4-width {
  width: var( --colvw-1-4 , 11.1111vw );
}

@mixin colvw-1-4-min-width {
  min-width: var( --colvw-1-4 , 11.1111vw );
}

@mixin colvw-1-4-left {
  left: var( --colvw-1-4 , 11.1111vw );
}

@mixin colvw-1-4-right {
  right: var( --colvw-1-4 , 11.1111vw );
}

// ================================
// [COLUMNS] colvw-1-6

@mixin colvw-1-6-width {
  width: var( --colvw-1-6 , 12.5vw );
}

@mixin colvw-1-6-min-width {
  min-width: var( --colvw-1-6 , 12.5vw );
}

@mixin colvw-1-6-left {
  left: var( --colvw-1-6 , 12.5vw );
}

@mixin colvw-1-6-right {
  right: var( --colvw-1-6 , 12.5vw );
}

// ================================
// [COLUMNS] colvw-1-8

@mixin colvw-1-8-width {
  width: var( --colvw-1-8 , 13.8889vw );
}

@mixin colvw-1-8-min-width {
  min-width: var( --colvw-1-8 , 13.8889vw );
}

@mixin colvw-1-8-left {
  left: var( --colvw-1-8 , 13.8889vw );
}

@mixin colvw-1-8-right {
  right: var( --colvw-1-8 , 13.8889vw );
}

// ================================
// [COLUMNS] colvw-1-9

@mixin colvw-1-9-width {
  width: var( --colvw-1-9 , 14.5833vw );
}

@mixin colvw-1-9-min-width {
  min-width: var( --colvw-1-9 , 14.5833vw );
}

@mixin colvw-1-9-left {
  left: var( --colvw-1-9 , 14.5833vw );
}

@mixin colvw-1-9-right {
  right: var( --colvw-1-9 , 14.5833vw );
}

// ================================
// [COLUMNS] colvw-2

@mixin colvw-2-width {
  width: var( --colvw-2 , 16.6667vw );
}

@mixin colvw-2-min-width {
  min-width: var( --colvw-2 , 16.6667vw );
}

@mixin colvw-2-left {
  left: var( --colvw-2 , 16.6667vw );
}

@mixin colvw-2-right {
  right: var( --colvw-2 , 16.6667vw );
}

// ================================
// [COLUMNS] colvw-2-3

@mixin colvw-2-3-width {
  width: var( --colvw-2-3 , 18.75vw );
}

@mixin colvw-2-3-min-width {
  min-width: var( --colvw-2-3 , 18.75vw );
}

@mixin colvw-2-3-left {
  left: var( --colvw-2-3 , 18.75vw );
}

@mixin colvw-2-3-right {
  right: var( --colvw-2-3 , 18.75vw );
}

// ================================
// [COLUMNS] colvw-2-4

@mixin colvw-2-4-width {
  width: var( --colvw-2-4 , 19.4444vw );
}

@mixin colvw-2-4-min-width {
  min-width: var( --colvw-2-4 , 19.4444vw );
}

@mixin colvw-2-4-left {
  left: var( --colvw-2-4 , 19.4444vw );
}

@mixin colvw-2-4-right {
  right: var( --colvw-2-4 , 19.4444vw );
}

// ================================
// [COLUMNS] colvw-2-6

@mixin colvw-2-6-width {
  width: var( --colvw-2-6 , 20.8333vw );
}

@mixin colvw-2-6-min-width {
  min-width: var( --colvw-2-6 , 20.8333vw );
}

@mixin colvw-2-6-left {
  left: var( --colvw-2-6 , 20.8333vw );
}

@mixin colvw-2-6-right {
  right: var( --colvw-2-6 , 20.8333vw );
}

// ================================
// [COLUMNS] colvw-2-8

@mixin colvw-2-8-width {
  width: var( --colvw-2-8 , 22.2222vw );
}

@mixin colvw-2-8-min-width {
  min-width: var( --colvw-2-8 , 22.2222vw );
}

@mixin colvw-2-8-left {
  left: var( --colvw-2-8 , 22.2222vw );
}

@mixin colvw-2-8-right {
  right: var( --colvw-2-8 , 22.2222vw );
}

// ================================
// [COLUMNS] colvw-2-9

@mixin colvw-2-9-width {
  width: var( --colvw-2-9 , 22.9167vw );
}

@mixin colvw-2-9-min-width {
  min-width: var( --colvw-2-9 , 22.9167vw );
}

@mixin colvw-2-9-left {
  left: var( --colvw-2-9 , 22.9167vw );
}

@mixin colvw-2-9-right {
  right: var( --colvw-2-9 , 22.9167vw );
}

// ================================
// [COLUMNS] colvw-3

@mixin colvw-3-width {
  width: var( --colvw-3 , 25vw );
}

@mixin colvw-3-min-width {
  min-width: var( --colvw-3 , 25vw );
}

@mixin colvw-3-left {
  left: var( --colvw-3 , 25vw );
}

@mixin colvw-3-right {
  right: var( --colvw-3 , 25vw );
}

// ================================
// [COLUMNS] colvw-3-3

@mixin colvw-3-3-width {
  width: var( --colvw-3-3 , 27.0833vw );
}

@mixin colvw-3-3-min-width {
  min-width: var( --colvw-3-3 , 27.0833vw );
}

@mixin colvw-3-3-left {
  left: var( --colvw-3-3 , 27.0833vw );
}

@mixin colvw-3-3-right {
  right: var( --colvw-3-3 , 27.0833vw );
}

// ================================
// [COLUMNS] colvw-3-4

@mixin colvw-3-4-width {
  width: var( --colvw-3-4 , 27.7778vw );
}

@mixin colvw-3-4-min-width {
  min-width: var( --colvw-3-4 , 27.7778vw );
}

@mixin colvw-3-4-left {
  left: var( --colvw-3-4 , 27.7778vw );
}

@mixin colvw-3-4-right {
  right: var( --colvw-3-4 , 27.7778vw );
}

// ================================
// [COLUMNS] colvw-3-6

@mixin colvw-3-6-width {
  width: var( --colvw-3-6 , 29.1667vw );
}

@mixin colvw-3-6-min-width {
  min-width: var( --colvw-3-6 , 29.1667vw );
}

@mixin colvw-3-6-left {
  left: var( --colvw-3-6 , 29.1667vw );
}

@mixin colvw-3-6-right {
  right: var( --colvw-3-6 , 29.1667vw );
}

// ================================
// [COLUMNS] colvw-3-8

@mixin colvw-3-8-width {
  width: var( --colvw-3-8 , 30.5556vw );
}

@mixin colvw-3-8-min-width {
  min-width: var( --colvw-3-8 , 30.5556vw );
}

@mixin colvw-3-8-left {
  left: var( --colvw-3-8 , 30.5556vw );
}

@mixin colvw-3-8-right {
  right: var( --colvw-3-8 , 30.5556vw );
}

// ================================
// [COLUMNS] colvw-3-9

@mixin colvw-3-9-width {
  width: var( --colvw-3-9 , 31.25vw );
}

@mixin colvw-3-9-min-width {
  min-width: var( --colvw-3-9 , 31.25vw );
}

@mixin colvw-3-9-left {
  left: var( --colvw-3-9 , 31.25vw );
}

@mixin colvw-3-9-right {
  right: var( --colvw-3-9 , 31.25vw );
}

// ================================
// [COLUMNS] colvw-4

@mixin colvw-4-width {
  width: var( --colvw-4 , 33.3333vw );
}

@mixin colvw-4-min-width {
  min-width: var( --colvw-4 , 33.3333vw );
}

@mixin colvw-4-left {
  left: var( --colvw-4 , 33.3333vw );
}

@mixin colvw-4-right {
  right: var( --colvw-4 , 33.3333vw );
}

// ================================
// [COLUMNS] colvw-4-3

@mixin colvw-4-3-width {
  width: var( --colvw-4-3 , 35.4167vw );
}

@mixin colvw-4-3-min-width {
  min-width: var( --colvw-4-3 , 35.4167vw );
}

@mixin colvw-4-3-left {
  left: var( --colvw-4-3 , 35.4167vw );
}

@mixin colvw-4-3-right {
  right: var( --colvw-4-3 , 35.4167vw );
}

// ================================
// [COLUMNS] colvw-4-4

@mixin colvw-4-4-width {
  width: var( --colvw-4-4 , 36.1111vw );
}

@mixin colvw-4-4-min-width {
  min-width: var( --colvw-4-4 , 36.1111vw );
}

@mixin colvw-4-4-left {
  left: var( --colvw-4-4 , 36.1111vw );
}

@mixin colvw-4-4-right {
  right: var( --colvw-4-4 , 36.1111vw );
}

// ================================
// [COLUMNS] colvw-4-6

@mixin colvw-4-6-width {
  width: var( --colvw-4-6 , 37.5vw );
}

@mixin colvw-4-6-min-width {
  min-width: var( --colvw-4-6 , 37.5vw );
}

@mixin colvw-4-6-left {
  left: var( --colvw-4-6 , 37.5vw );
}

@mixin colvw-4-6-right {
  right: var( --colvw-4-6 , 37.5vw );
}

// ================================
// [COLUMNS] colvw-4-8

@mixin colvw-4-8-width {
  width: var( --colvw-4-8 , 38.8889vw );
}

@mixin colvw-4-8-min-width {
  min-width: var( --colvw-4-8 , 38.8889vw );
}

@mixin colvw-4-8-left {
  left: var( --colvw-4-8 , 38.8889vw );
}

@mixin colvw-4-8-right {
  right: var( --colvw-4-8 , 38.8889vw );
}

// ================================
// [COLUMNS] colvw-4-9

@mixin colvw-4-9-width {
  width: var( --colvw-4-9 , 39.5833vw );
}

@mixin colvw-4-9-min-width {
  min-width: var( --colvw-4-9 , 39.5833vw );
}

@mixin colvw-4-9-left {
  left: var( --colvw-4-9 , 39.5833vw );
}

@mixin colvw-4-9-right {
  right: var( --colvw-4-9 , 39.5833vw );
}

// ================================
// [COLUMNS] colvw-5

@mixin colvw-5-width {
  width: var( --colvw-5 , 41.6667vw );
}

@mixin colvw-5-min-width {
  min-width: var( --colvw-5 , 41.6667vw );
}

@mixin colvw-5-left {
  left: var( --colvw-5 , 41.6667vw );
}

@mixin colvw-5-right {
  right: var( --colvw-5 , 41.6667vw );
}

// ================================
// [COLUMNS] colvw-5-3

@mixin colvw-5-3-width {
  width: var( --colvw-5-3 , 43.75vw );
}

@mixin colvw-5-3-min-width {
  min-width: var( --colvw-5-3 , 43.75vw );
}

@mixin colvw-5-3-left {
  left: var( --colvw-5-3 , 43.75vw );
}

@mixin colvw-5-3-right {
  right: var( --colvw-5-3 , 43.75vw );
}

// ================================
// [COLUMNS] colvw-5-4

@mixin colvw-5-4-width {
  width: var( --colvw-5-4 , 44.4444vw );
}

@mixin colvw-5-4-min-width {
  min-width: var( --colvw-5-4 , 44.4444vw );
}

@mixin colvw-5-4-left {
  left: var( --colvw-5-4 , 44.4444vw );
}

@mixin colvw-5-4-right {
  right: var( --colvw-5-4 , 44.4444vw );
}

// ================================
// [COLUMNS] colvw-5-6

@mixin colvw-5-6-width {
  width: var( --colvw-5-6 , 45.8333vw );
}

@mixin colvw-5-6-min-width {
  min-width: var( --colvw-5-6 , 45.8333vw );
}

@mixin colvw-5-6-left {
  left: var( --colvw-5-6 , 45.8333vw );
}

@mixin colvw-5-6-right {
  right: var( --colvw-5-6 , 45.8333vw );
}

// ================================
// [COLUMNS] colvw-5-8

@mixin colvw-5-8-width {
  width: var( --colvw-5-8 , 47.2222vw );
}

@mixin colvw-5-8-min-width {
  min-width: var( --colvw-5-8 , 47.2222vw );
}

@mixin colvw-5-8-left {
  left: var( --colvw-5-8 , 47.2222vw );
}

@mixin colvw-5-8-right {
  right: var( --colvw-5-8 , 47.2222vw );
}

// ================================
// [COLUMNS] colvw-5-9

@mixin colvw-5-9-width {
  width: var( --colvw-5-9 , 47.9167vw );
}

@mixin colvw-5-9-min-width {
  min-width: var( --colvw-5-9 , 47.9167vw );
}

@mixin colvw-5-9-left {
  left: var( --colvw-5-9 , 47.9167vw );
}

@mixin colvw-5-9-right {
  right: var( --colvw-5-9 , 47.9167vw );
}

// ================================
// [COLUMNS] colvw-6

@mixin colvw-6-width {
  width: var( --colvw-6 , 50vw );
}

@mixin colvw-6-min-width {
  min-width: var( --colvw-6 , 50vw );
}

@mixin colvw-6-left {
  left: var( --colvw-6 , 50vw );
}

@mixin colvw-6-right {
  right: var( --colvw-6 , 50vw );
}

// ================================
// [COLUMNS] colvw-6-3

@mixin colvw-6-3-width {
  width: var( --colvw-6-3 , 52.0833vw );
}

@mixin colvw-6-3-min-width {
  min-width: var( --colvw-6-3 , 52.0833vw );
}

@mixin colvw-6-3-left {
  left: var( --colvw-6-3 , 52.0833vw );
}

@mixin colvw-6-3-right {
  right: var( --colvw-6-3 , 52.0833vw );
}

// ================================
// [COLUMNS] colvw-6-4

@mixin colvw-6-4-width {
  width: var( --colvw-6-4 , 52.7778vw );
}

@mixin colvw-6-4-min-width {
  min-width: var( --colvw-6-4 , 52.7778vw );
}

@mixin colvw-6-4-left {
  left: var( --colvw-6-4 , 52.7778vw );
}

@mixin colvw-6-4-right {
  right: var( --colvw-6-4 , 52.7778vw );
}

// ================================
// [COLUMNS] colvw-6-6

@mixin colvw-6-6-width {
  width: var( --colvw-6-6 , 54.1667vw );
}

@mixin colvw-6-6-min-width {
  min-width: var( --colvw-6-6 , 54.1667vw );
}

@mixin colvw-6-6-left {
  left: var( --colvw-6-6 , 54.1667vw );
}

@mixin colvw-6-6-right {
  right: var( --colvw-6-6 , 54.1667vw );
}

// ================================
// [COLUMNS] colvw-6-8

@mixin colvw-6-8-width {
  width: var( --colvw-6-8 , 55.5556vw );
}

@mixin colvw-6-8-min-width {
  min-width: var( --colvw-6-8 , 55.5556vw );
}

@mixin colvw-6-8-left {
  left: var( --colvw-6-8 , 55.5556vw );
}

@mixin colvw-6-8-right {
  right: var( --colvw-6-8 , 55.5556vw );
}

// ================================
// [COLUMNS] colvw-6-9

@mixin colvw-6-9-width {
  width: var( --colvw-6-9 , 56.25vw );
}

@mixin colvw-6-9-min-width {
  min-width: var( --colvw-6-9 , 56.25vw );
}

@mixin colvw-6-9-left {
  left: var( --colvw-6-9 , 56.25vw );
}

@mixin colvw-6-9-right {
  right: var( --colvw-6-9 , 56.25vw );
}

// ================================
// [COLUMNS] colvw-7

@mixin colvw-7-width {
  width: var( --colvw-7 , 58.3333vw );
}

@mixin colvw-7-min-width {
  min-width: var( --colvw-7 , 58.3333vw );
}

@mixin colvw-7-left {
  left: var( --colvw-7 , 58.3333vw );
}

@mixin colvw-7-right {
  right: var( --colvw-7 , 58.3333vw );
}

// ================================
// [COLUMNS] colvw-7-3

@mixin colvw-7-3-width {
  width: var( --colvw-7-3 , 60.4167vw );
}

@mixin colvw-7-3-min-width {
  min-width: var( --colvw-7-3 , 60.4167vw );
}

@mixin colvw-7-3-left {
  left: var( --colvw-7-3 , 60.4167vw );
}

@mixin colvw-7-3-right {
  right: var( --colvw-7-3 , 60.4167vw );
}

// ================================
// [COLUMNS] colvw-7-4

@mixin colvw-7-4-width {
  width: var( --colvw-7-4 , 61.1111vw );
}

@mixin colvw-7-4-min-width {
  min-width: var( --colvw-7-4 , 61.1111vw );
}

@mixin colvw-7-4-left {
  left: var( --colvw-7-4 , 61.1111vw );
}

@mixin colvw-7-4-right {
  right: var( --colvw-7-4 , 61.1111vw );
}

// ================================
// [COLUMNS] colvw-7-6

@mixin colvw-7-6-width {
  width: var( --colvw-7-6 , 62.5vw );
}

@mixin colvw-7-6-min-width {
  min-width: var( --colvw-7-6 , 62.5vw );
}

@mixin colvw-7-6-left {
  left: var( --colvw-7-6 , 62.5vw );
}

@mixin colvw-7-6-right {
  right: var( --colvw-7-6 , 62.5vw );
}

// ================================
// [COLUMNS] colvw-7-8

@mixin colvw-7-8-width {
  width: var( --colvw-7-8 , 63.8889vw );
}

@mixin colvw-7-8-min-width {
  min-width: var( --colvw-7-8 , 63.8889vw );
}

@mixin colvw-7-8-left {
  left: var( --colvw-7-8 , 63.8889vw );
}

@mixin colvw-7-8-right {
  right: var( --colvw-7-8 , 63.8889vw );
}

// ================================
// [COLUMNS] colvw-7-9

@mixin colvw-7-9-width {
  width: var( --colvw-7-9 , 64.5833vw );
}

@mixin colvw-7-9-min-width {
  min-width: var( --colvw-7-9 , 64.5833vw );
}

@mixin colvw-7-9-left {
  left: var( --colvw-7-9 , 64.5833vw );
}

@mixin colvw-7-9-right {
  right: var( --colvw-7-9 , 64.5833vw );
}

// ================================
// [COLUMNS] colvw-8

@mixin colvw-8-width {
  width: var( --colvw-8 , 66.6667vw );
}

@mixin colvw-8-min-width {
  min-width: var( --colvw-8 , 66.6667vw );
}

@mixin colvw-8-left {
  left: var( --colvw-8 , 66.6667vw );
}

@mixin colvw-8-right {
  right: var( --colvw-8 , 66.6667vw );
}

// ================================
// [COLUMNS] colvw-8-3

@mixin colvw-8-3-width {
  width: var( --colvw-8-3 , 68.75vw );
}

@mixin colvw-8-3-min-width {
  min-width: var( --colvw-8-3 , 68.75vw );
}

@mixin colvw-8-3-left {
  left: var( --colvw-8-3 , 68.75vw );
}

@mixin colvw-8-3-right {
  right: var( --colvw-8-3 , 68.75vw );
}

// ================================
// [COLUMNS] colvw-8-4

@mixin colvw-8-4-width {
  width: var( --colvw-8-4 , 69.4444vw );
}

@mixin colvw-8-4-min-width {
  min-width: var( --colvw-8-4 , 69.4444vw );
}

@mixin colvw-8-4-left {
  left: var( --colvw-8-4 , 69.4444vw );
}

@mixin colvw-8-4-right {
  right: var( --colvw-8-4 , 69.4444vw );
}

// ================================
// [COLUMNS] colvw-8-6

@mixin colvw-8-6-width {
  width: var( --colvw-8-6 , 70.8333vw );
}

@mixin colvw-8-6-min-width {
  min-width: var( --colvw-8-6 , 70.8333vw );
}

@mixin colvw-8-6-left {
  left: var( --colvw-8-6 , 70.8333vw );
}

@mixin colvw-8-6-right {
  right: var( --colvw-8-6 , 70.8333vw );
}

// ================================
// [COLUMNS] colvw-8-8

@mixin colvw-8-8-width {
  width: var( --colvw-8-8 , 72.2222vw );
}

@mixin colvw-8-8-min-width {
  min-width: var( --colvw-8-8 , 72.2222vw );
}

@mixin colvw-8-8-left {
  left: var( --colvw-8-8 , 72.2222vw );
}

@mixin colvw-8-8-right {
  right: var( --colvw-8-8 , 72.2222vw );
}

// ================================
// [COLUMNS] colvw-8-9

@mixin colvw-8-9-width {
  width: var( --colvw-8-9 , 72.9167vw );
}

@mixin colvw-8-9-min-width {
  min-width: var( --colvw-8-9 , 72.9167vw );
}

@mixin colvw-8-9-left {
  left: var( --colvw-8-9 , 72.9167vw );
}

@mixin colvw-8-9-right {
  right: var( --colvw-8-9 , 72.9167vw );
}

// ================================
// [COLUMNS] colvw-9

@mixin colvw-9-width {
  width: var( --colvw-9 , 75vw );
}

@mixin colvw-9-min-width {
  min-width: var( --colvw-9 , 75vw );
}

@mixin colvw-9-left {
  left: var( --colvw-9 , 75vw );
}

@mixin colvw-9-right {
  right: var( --colvw-9 , 75vw );
}

// ================================
// [COLUMNS] colvw-9-3

@mixin colvw-9-3-width {
  width: var( --colvw-9-3 , 77.0833vw );
}

@mixin colvw-9-3-min-width {
  min-width: var( --colvw-9-3 , 77.0833vw );
}

@mixin colvw-9-3-left {
  left: var( --colvw-9-3 , 77.0833vw );
}

@mixin colvw-9-3-right {
  right: var( --colvw-9-3 , 77.0833vw );
}

// ================================
// [COLUMNS] colvw-9-4

@mixin colvw-9-4-width {
  width: var( --colvw-9-4 , 77.7778vw );
}

@mixin colvw-9-4-min-width {
  min-width: var( --colvw-9-4 , 77.7778vw );
}

@mixin colvw-9-4-left {
  left: var( --colvw-9-4 , 77.7778vw );
}

@mixin colvw-9-4-right {
  right: var( --colvw-9-4 , 77.7778vw );
}

// ================================
// [COLUMNS] colvw-9-6

@mixin colvw-9-6-width {
  width: var( --colvw-9-6 , 79.1667vw );
}

@mixin colvw-9-6-min-width {
  min-width: var( --colvw-9-6 , 79.1667vw );
}

@mixin colvw-9-6-left {
  left: var( --colvw-9-6 , 79.1667vw );
}

@mixin colvw-9-6-right {
  right: var( --colvw-9-6 , 79.1667vw );
}

// ================================
// [COLUMNS] colvw-9-8

@mixin colvw-9-8-width {
  width: var( --colvw-9-8 , 80.5556vw );
}

@mixin colvw-9-8-min-width {
  min-width: var( --colvw-9-8 , 80.5556vw );
}

@mixin colvw-9-8-left {
  left: var( --colvw-9-8 , 80.5556vw );
}

@mixin colvw-9-8-right {
  right: var( --colvw-9-8 , 80.5556vw );
}

// ================================
// [COLUMNS] colvw-9-9

@mixin colvw-9-9-width {
  width: var( --colvw-9-9 , 81.25vw );
}

@mixin colvw-9-9-min-width {
  min-width: var( --colvw-9-9 , 81.25vw );
}

@mixin colvw-9-9-left {
  left: var( --colvw-9-9 , 81.25vw );
}

@mixin colvw-9-9-right {
  right: var( --colvw-9-9 , 81.25vw );
}

// ================================
// [COLUMNS] colvw-10

@mixin colvw-10-width {
  width: var( --colvw-10 , 83.3333vw );
}

@mixin colvw-10-min-width {
  min-width: var( --colvw-10 , 83.3333vw );
}

@mixin colvw-10-left {
  left: var( --colvw-10 , 83.3333vw );
}

@mixin colvw-10-right {
  right: var( --colvw-10 , 83.3333vw );
}

// ================================
// [COLUMNS] colvw-10-3

@mixin colvw-10-3-width {
  width: var( --colvw-10-3 , 85.4167vw );
}

@mixin colvw-10-3-min-width {
  min-width: var( --colvw-10-3 , 85.4167vw );
}

@mixin colvw-10-3-left {
  left: var( --colvw-10-3 , 85.4167vw );
}

@mixin colvw-10-3-right {
  right: var( --colvw-10-3 , 85.4167vw );
}

// ================================
// [COLUMNS] colvw-10-4

@mixin colvw-10-4-width {
  width: var( --colvw-10-4 , 86.1111vw );
}

@mixin colvw-10-4-min-width {
  min-width: var( --colvw-10-4 , 86.1111vw );
}

@mixin colvw-10-4-left {
  left: var( --colvw-10-4 , 86.1111vw );
}

@mixin colvw-10-4-right {
  right: var( --colvw-10-4 , 86.1111vw );
}

// ================================
// [COLUMNS] colvw-10-6

@mixin colvw-10-6-width {
  width: var( --colvw-10-6 , 87.5vw );
}

@mixin colvw-10-6-min-width {
  min-width: var( --colvw-10-6 , 87.5vw );
}

@mixin colvw-10-6-left {
  left: var( --colvw-10-6 , 87.5vw );
}

@mixin colvw-10-6-right {
  right: var( --colvw-10-6 , 87.5vw );
}

// ================================
// [COLUMNS] colvw-10-8

@mixin colvw-10-8-width {
  width: var( --colvw-10-8 , 88.8889vw );
}

@mixin colvw-10-8-min-width {
  min-width: var( --colvw-10-8 , 88.8889vw );
}

@mixin colvw-10-8-left {
  left: var( --colvw-10-8 , 88.8889vw );
}

@mixin colvw-10-8-right {
  right: var( --colvw-10-8 , 88.8889vw );
}

// ================================
// [COLUMNS] colvw-10-9

@mixin colvw-10-9-width {
  width: var( --colvw-10-9 , 89.5833vw );
}

@mixin colvw-10-9-min-width {
  min-width: var( --colvw-10-9 , 89.5833vw );
}

@mixin colvw-10-9-left {
  left: var( --colvw-10-9 , 89.5833vw );
}

@mixin colvw-10-9-right {
  right: var( --colvw-10-9 , 89.5833vw );
}

// ================================
// [COLUMNS] colvw-11

@mixin colvw-11-width {
  width: var( --colvw-11 , 91.6667vw );
}

@mixin colvw-11-min-width {
  min-width: var( --colvw-11 , 91.6667vw );
}

@mixin colvw-11-left {
  left: var( --colvw-11 , 91.6667vw );
}

@mixin colvw-11-right {
  right: var( --colvw-11 , 91.6667vw );
}

// ================================
// [COLUMNS] colvw-11-3

@mixin colvw-11-3-width {
  width: var( --colvw-11-3 , 93.75vw );
}

@mixin colvw-11-3-min-width {
  min-width: var( --colvw-11-3 , 93.75vw );
}

@mixin colvw-11-3-left {
  left: var( --colvw-11-3 , 93.75vw );
}

@mixin colvw-11-3-right {
  right: var( --colvw-11-3 , 93.75vw );
}

// ================================
// [COLUMNS] colvw-11-4

@mixin colvw-11-4-width {
  width: var( --colvw-11-4 , 94.4444vw );
}

@mixin colvw-11-4-min-width {
  min-width: var( --colvw-11-4 , 94.4444vw );
}

@mixin colvw-11-4-left {
  left: var( --colvw-11-4 , 94.4444vw );
}

@mixin colvw-11-4-right {
  right: var( --colvw-11-4 , 94.4444vw );
}

// ================================
// [COLUMNS] colvw-11-6

@mixin colvw-11-6-width {
  width: var( --colvw-11-6 , 95.8333vw );
}

@mixin colvw-11-6-min-width {
  min-width: var( --colvw-11-6 , 95.8333vw );
}

@mixin colvw-11-6-left {
  left: var( --colvw-11-6 , 95.8333vw );
}

@mixin colvw-11-6-right {
  right: var( --colvw-11-6 , 95.8333vw );
}

// ================================
// [COLUMNS] colvw-11-8

@mixin colvw-11-8-width {
  width: var( --colvw-11-8 , 97.2222vw );
}

@mixin colvw-11-8-min-width {
  min-width: var( --colvw-11-8 , 97.2222vw );
}

@mixin colvw-11-8-left {
  left: var( --colvw-11-8 , 97.2222vw );
}

@mixin colvw-11-8-right {
  right: var( --colvw-11-8 , 97.2222vw );
}

// ================================
// [COLUMNS] colvw-11-9

@mixin colvw-11-9-width {
  width: var( --colvw-11-9 , 97.9167vw );
}

@mixin colvw-11-9-min-width {
  min-width: var( --colvw-11-9 , 97.9167vw );
}

@mixin colvw-11-9-left {
  left: var( --colvw-11-9 , 97.9167vw );
}

@mixin colvw-11-9-right {
  right: var( --colvw-11-9 , 97.9167vw );
}

// ================================
// [COLUMNS] colvw-12

@mixin colvw-12-width {
  width: var( --colvw-12 , 100vw );
}

@mixin colvw-12-min-width {
  min-width: var( --colvw-12 , 100vw );
}

@mixin colvw-12-left {
  left: var( --colvw-12 , 100vw );
}

@mixin colvw-12-right {
  right: var( --colvw-12 , 100vw );
}