generic:
  border:
    radius: &border-radius 8px
  font:
    primary:
      weight:
        regular: "400"
        medium: "500"
        semibold: "600"
        bold: "700"
      font-family: "Lato"
      generic-family: "sans-serif"
    secondary:
      variants:
        regular: "400"
        bold: "700"
      font-family: "Roboto"
      generic-family: "sans-serif"
    alternative:
      variants:
        regular: "400"
      font-family: "Handlee"
      generic-family: "cursive"
  color:
    accent: &accent                             "#56B99D"
    accent-border: &accent-border               "#3E8A74"
    accent-border-hover: &accent-border-hover   "#177D7D"
    accent-bottom: &accent-bottom               "#FFD05E"
    accent-dark: &accent-dark                   "#4baf93"
    accent-darker: &accent-darker               "#0B4848"
    accent-light: &accent-light                 "#46BCBC"
    accent-lighter: &accent-lighter             "#6EE1E1"
    accent-top: &accent-top                     "#FFD97C"

    primary-darker: &primary-darker             "#979ea3"
    primary-dark: &primary-dark                 "#283A8E"
    primary-dark-rgb: &primary-dark-rgb         "40,58,142"
    primary: &primary                           "#3F52A9"
    primary-light: &primary-light               "#7F92E7"
    primary-lighter: &primary-lighter           "#5B6ECA"

    secondary-darkest: &secondary-darkest       "#A5AEB4"
    secondary-darker: &secondary-darker         "#BEC3C7"
    secondary-dark: &secondary-dark             "#dbdee0"
    secondary: &secondary                       "#F8C346"
    secondary-rgb: &secondary-rgb               "248,195,70"
    secondary-light: &secondary-light           "#FFD05E"
    secondary-lighter: &secondary-lighter       "#FFD97C"

    text-dark: &text-dark                       "#333"
    text: &text                                 "#666"
    text-light: &text-light                     "#999"
    text-lighter: &text-lighter                 "#998"
    text-lighter-rgb: &text-lighter-rgb         "153,153,136"

    active: &active                             "#4baf93"
    positive: &positive                         "#2ca937"
    positive-light: &positive-light             "#9edb97"
    positive-lighter: &positive-lighter         "#9EDBC0"
    negative: &negative                         "#c54229"
    negative-light: &negative-light             "#f0d0c9"

    shadow: &shadow                             "#000000"
    shadow-rgb: &shadow-rgb                     "0,0,0"
    shadow-alt: &shadow-alt                     "#00196F"
    blank: &blank                               "#FFFFFF"

    facebook: &facebook                         "#45619D"
    facebook-border: &facebook-border           "#324A87"
    twitter: &twitter                           "#08ACEE"
    twitter-border: &twitter-border             "#1871C0"
    google: &google                             "#B30303"
    google-border: &google-border               "#670E00"
    mail: &mail                                 "#ec7c1b"
    mail-border: &mail-border                   "#cd6612"
  separator:
    width: &separator-width 2px
    style: &separator-style dotted
  size:
    border-radius: &border-radius 8px
    border-radius-small: &border-radius-small 2px
autocomplete:
  background-color: "var(--tx-generic-color-blank)"
  box-shadow: "0 0 5px 0 rgba(var(--tx-generic-color-shadow-rgb), .18)"
autocomplete-item:
  color: "var(--tx-generic-color-text)"
  active:
    color: "var(--tx-generic-color-blank)"
    background-color: "var(--tx-generic-color-active)"
  title:
    color: "var(--tx-generic-color-primary-darker)"
    background-color: "var(--tx-generic-color-secondary-dark)"
  highlight:
    color: "var(--tx-generic-color-active)"
badge:
  before:
    border:
      size: 6px
      color: "var(--tx-generic-color-accent-border)"
  after:
    border:
      size: 4px
      color: "var(--tx-generic-color-primary-darker)"
  arrow:
    angle:
      coefficient: "0.6"
  border:
    bottom:
      width: 5px
      style: solid
      color: "var(--tx-generic-color-primary-darker)"
    radius:
      start: 0px
      end-top: 0px
      end-bottom: 0px
  color:
    background: "var(--tx-generic-color-accent)"
    text: "var(--tx-generic-color-primary-darker)"
  indent: 13px
  font-size: 15px
  padding:
    right-left: 8px
    top-bottom: 6px
    corner-side: 12px
  s:
    font-size: 13px
    padding:
      left: 13px
      right: 8px
      top-bottom: 4px
ui-button:
  default:
    normal:
      bg-top: "var(--tx-generic-color-accent)"
      bg-bottom: "var(--tx-generic-color-accent)"
      border-radius: 2px
      border: "var(--tx-generic-color-accent-dark)"
      shadow: "0 3px var(--tx-generic-color-accent-border), 0 0 transparent"
      text: "var(--tx-generic-color-blank)"
      text-shadow: "0px 2px 0px var(--tx-generic-color-accent-border)"
    disabled:
      bg-top: "var(--tx-generic-color-secondary-dark)"
      bg-bottom: "var(--tx-generic-color-secondary-dark)"
      text: "var(--tx-generic-color-secondary-darker)"
      text-shadow: none
      border: "transparent"
      border-bottom: "var(--tx-generic-color-secondary-darker)"
    hover:
      bg-top: "var(--tx-generic-color-accent-dark)"
      bg-bottom: "var(--tx-generic-color-accent-dark)"
      top: "0"
      shadow: "0 3px var(--tx-generic-color-accent-border-hover), 0 0 transparent"
    active:
      shadow: "0 2px var(--tx-generic-color-accent-border), 0 0 transparent"
      text-shadow: "0px 1px 0px var(--tx-generic-color-accent-border)"
  ghost:
    normal:
      background: "var(--tx-generic-color-blank)"
      color: "var(--tx-generic-color-primary-darker)"
      border: "3px solid var(--tx-generic-color-secondary-darker)"
      border-radius: 2px
      font-family: "var(--tx-generic-font-primary-font-family), var(--tx-generic-font-primary-generic-family)"
      font-weight: "var(--tx-generic-font-primary-weight-semibold)"
    hover:
      color: "var(--tx-generic-color-active)"
      border-color: "var(--tx-generic-color-active)"
    inverted:
      color: "var(--tx-generic-color-primary-darker)"
button:
  icon:
    color:
      normal: "var(--tx-generic-color-primary-lighter)"
      hover: "var(--tx-generic-color-active)"
      active: "var(--tx-generic-color-primary-lighter)"
  color:
    bg-top: "var(--tx-generic-color-accent)"
    bg-bottom: "var(--tx-generic-color-accent)"
    text: "var(--tx-generic-color-blank)"
    border: "var(--tx-generic-color-accent-dark)"
    shadow: "transparent"
    disabled:
      bg-top: "var(--tx-generic-color-secondary-dark)"
      bg-bottom: "var(--tx-generic-color-secondary-dark)"
      text: "var(--tx-generic-color-secondary-darker)"
      border: "transparent"
      border-bottom: "var(--tx-generic-color-secondary-darkest)"
  size:
    border-radius: *border-radius-small
  shadow: "0 3px var(--tx-generic-color-accent-border), 0 0 transparent"
  shadow-hover: "0 5px var(--tx-generic-color-accent-border), 0 0 transparent"
  text-shadow: "none"
  ghost:
    background: "transparent"
    color: *accent
    border-color: *accent
    border: "3px solid var(--tx-button-ghost-border-color)"
    border-radius: "var(--tx-button-size-border-radius)"
    font-family: "var(--tx-generic-font-primary-font-family), var(--tx-generic-font-primary-generic-family)"
    hover-color: *primary
    hover-border-color: *primary
  link:
    color: *text
    font:
      family: "var(--tx-generic-font-secondary-font-family)"
      size: "14px"
      weight: "var(--tx-generic-font-primary-weight-regular)"
    hover:
      color: *text-dark
      text:
        decoration: "underline"
      font:
        family: "var(--tx-generic-font-secondary-font-family)"
        weight: "var(--tx-generic-font-primary-weight-regular)"
    text:
      decoration: "underline"
calendar:
  height: 300px
  nav:
    background: "var(--tx-generic-color-primary-lighter)"
    button:
      background-color-end: "var(--tx-generic-color-accent-bottom)"
      background-color-start: "var(--tx-generic-color-accent-top)"
      border-radius: 50%
      box-shadow-color: "var(--tx-generic-color-accent-border)"
      color: "var(--tx-generic-color-primary-lighter)"
      font-weight: "700"
      height: 27px
      margin: "0 5px"
      width: 27px
    height: 41px
    label:
      color: "var(--tx-generic-color-blank)"
      font-weight: "500"
  header:
    background-color: "var(--tx-generic-color-primary-lighter)"
    height: 32px
    weekday:
      color: "var(--tx-generic-color-secondary)"
      font-size: 14px
      font-weight: bold
  options:
    border-color: "var(--tx-generic-color-secondary)"
    option:
      background-color: "var(--tx-generic-color-blank)"
      border-bottom: "var(--tx-generic-color-secondary)"
      border-right: "var(--tx-generic-color-secondary)"
      color: "var(--tx-generic-color-primary-darker)"
      disabled:
        background-color: "var(--tx-generic-color-secondary)"
        color: "var(--tx-generic-color-secondary-darkest)"
      font-size: 14px
      hover:
        background-color: "var(--tx-generic-color-active)"
        color: "var(--tx-generic-color-blank)"
      next-month:
        background-color: "var(--tx-generic-color-secondary-light)"
      previous-month:
        background-color: "var(--tx-generic-color-secondary-light)"
      range:
        after:
          border-color: transparent
        between:
          background-color: "var(--tx-generic-color-secondary-dark)"
        end:
          after:
            border-color: "var(--tx-generic-color-active)"
          background-color: "var(--tx-generic-color-secondary-dark)"
        start:
          after:
            border-color: "var(--tx-generic-color-active)"
          background-color: "var(--tx-generic-color-secondary-dark)"
  width: 300px
checkbox:
  text:
    color: "var(--tx-generic-color-text-dark)"
    background-color: "var(--tx-generic-color-blank)"
    border-color: "var(--tx-generic-color-secondary)"
    hover:
      color: "var(--tx-generic-color-active)"
    checked:
      background-color: "var(--tx-generic-color-active)"
      border-color: "var(--tx-generic-color-active)"
    icon:
      checked:
        border-color: "var(--tx-generic-color-secondary)"
    disabled:
      color: "rgba(var(--tx-generic-color-text-lighter-rgb), .3)"
      border-color: "rgba(var(--tx-generic-color-secondary-rgb), .3)"
collapse:
  background:
    color: "var(--tx-generic-color-blank)"
  border:
    radius: *border-radius
  padding: "25px"
  item:
    label:
      color: "var(--tx-generic-color-text-dark)"
      background:
        color: "var(--tx-generic-color-blank)"
      active:
        color: "var(--tx-generic-color-active)"
      icon:
        color: "var(--tx-generic-color-secondary-darker)"
        active:
          color: "var(--tx-generic-color-active)"
      border-bottom:
        width: *separator-width
        style: *separator-style
        color: "var(--tx-generic-color-secondary-darker)"
    content:
      color: "var(--tx-generic-color-text)"
      background:
        color: "var(--tx-generic-color-secondary-light)"
        border-bottom:
          color: "var(--tx-generic-color-secondary-darker)"
      border:
        radius: *border-radius
datepicker:
  calendar-wrapper:
    background-color: "var(--tx-generic-color-blank)"
    box-shadow: "0 0 4px rgba(var(--tx-generic-color-shadow-rgb), .4)"
dropdown:
  input:
    background-color: "var(--tx-generic-color-blank)"
    border-color: "var(--tx-generic-color-secondary-darker)"
  option:
    color: "var(--tx-generic-color-text-dark)"
  arrow:
    color: "var(--tx-generic-color-primary-lighter)"
  select-control:
    border-color: "var(--tx-generic-color-active)"
  select-menu-outer:
    box-shadow: "0 0 5px 0 rgba(var(--tx-generic-color-shadow-rgb), .18)"
  select-arrow-zone:
    border-color-left: "var(--tx-generic-color-secondary-darker)"
    border-style: "dotted"
    color: "var(--tx-generic-color-primary)"
    hover:
      color: "var(--tx-generic-color-active)"
  select-option:
    color: "var(--tx-generic-color-text)"
    hover:
      background-color: "var(--tx-generic-color-secondary-dark)"
    is-selected:
      background-color: "var(--tx-generic-color-active)"
      color: "var(--tx-generic-color-blank)"
  option-arrow:
    border-color: "var(--tx-generic-color-blank)"
    border-shadow-color: "rgba(var(--tx-generic-color-shadow-rgb), .07)"
  filter:
    select-control:
      border-color: "var(--tx-generic-color-secondary-darker)"
    select-placeholder:
      color: "var(--tx-generic-color-text-dark)"
      line-height: 28px
    select-menu-outer:
      box-shadow: "rgba(var(--tx-generic-color-shadow-rgb), .5)"
  active:
    select-control:
      background-color: "var(--tx-generic-color-blank)"
      border-color: "var(--tx-generic-color-active)"
  status:
    font-size: "20px"
    right: "59px"
    error:
      border-color: "var(--tx-generic-color-negative-light)"
      color: "var(--tx-generic-color-negative)"
      padding-right: "94px"
    valid:
      border-color: "var(--tx-generic-color-secondary-darker)"
      color: "var(--tx-generic-color-positive)"
      padding-right: "94px"
  padding-right: "60px"
dropdown-filter-option:
  checkbox:
    color: "var(--tx-generic-color-text-light)"
    hover:
      color: "var(--tx-generic-color-text)"
    disabled:
      color: "rgba(var(--tx-generic-color-text-lighter-rgb), .3)"
  hover-and-not-disabled:
    background-color: "var(--tx-generic-color-active)"
    checkbox:
      color: "var(--tx-generic-color-blank)"
input:
  border:
    color: "var(--tx-generic-color-secondary-darker)"
    hover:
      color: "var(--tx-generic-color-active)"
    width: "2px"
  border-radius: "4px"
  color: "var(--tx-generic-color-text-dark)"
  font-size: "16px"
  focused:
    border-color: "var(--tx-generic-color-active)"
  status:
    font-size: "20px"
    right: "14px"
    error:
      border-color: "var(--tx-generic-color-negative-light)"
      color: "var(--tx-generic-color-negative)"
      padding-right: "32px"
    valid:
      border-color: "var(--tx-generic-color-secondary-darker)"
      color: "var(--tx-generic-color-positive)"
      padding-right: "32px"
  padding: "15px"
list:
  bullets:
    color: "var(--tx-generic-color-active)"
  color: "var(--tx-generic-color-text-dark)"
  line-height: "38px"
messagebox:
  background-color:
    info: "var(--tx-generic-color-secondary-light)"
    error: "var(--tx-generic-color-negative-light)"
    success: "var(--tx-generic-color-positive-lighter)"
  border-radius: "12px"
  color: "var(--tx-generic-color-text)"
  title:
    color: "var(--tx-generic-color-primary)"
    font-size: "20px"
    padding-bottom: "0px"
  padding: "24px"
modal:
  z-index: "999"
  color:
    dark: "var(--tx-generic-color-primary-dark)"
    secondary: "var(--tx-generic-color-secondary)"
  overlay:
    background:
      color: "var(--tx-generic-color-primary-dark)"
      opacity: "0.65"
  container:
    background:
      color: "var(--tx-generic-color-blank)"
    box-shadow:
      color: "rgba(var(--tx-generic-color-shadow-rgb), .3)"
  content:
    background:
      color: "var(--tx-generic-color-secondary-lighter)"
    padding-left-right: "24px"
  content-devider:
    color: "var(--tx-generic-color-secondary-darker)"
  close-button:
    color: "var(--tx-generic-color-text-dark)"
    hover:
      color: "var(--tx-generic-color-active)"
    icon:
      color: "var(--tx-generic-color-secondary-darker)"
price:
  xsmall:
    font:
      size:
        currency: 13px
        integers: 18px
        decimals: 13px
        additional-text: 12px
        discount: 13px
    line-height:
      integers: 15px
    underline:
      height: 3px
      margin-top: 2px
  small:
    font:
      size:
        currency: 15px
        integers: 30px
        decimals: 14px
        additional-text: 13px
        discount: 16px
    line-height:
      integers: 26px
    underline:
      height: 4px
      margin-top: 2px
  medium:
    font:
      size:
        currency: 16px
        integers: 30px
        decimals: 14px
        additional-text: 13px
        discount: 16px
    line-height:
      integers: 26px
    underline:
      height: 6px
      margin-top: 2px
  large:
    font:
      size:
        currency: 19px
        integers: 35px
        decimals: 17px
        additional-text: 17px
        discount: 20px
    line-height:
      integers: 31px
    underline:
      height: 6px
      margin-top: 2px
  xlarge:
    font:
      size:
        currency: 30px
        integers: 55px
        decimals: 27px
        additional-text: 19px
        discount: 22px
    line-height:
      integers: 51px
    underline:
      height: 8px
      margin-top: 2px
sliding-panel:
  content:
    flex: "1 1 100%"
    overflow: "hidden"
    overflow-y: "auto"
  header:
    height: "61px"
    padding: "50px"
    border-bottom: "2px solid var(--tx-generic-color-secondary-darker)"
    close-button:
      font-size: "32px"
      height: "25px"
      width: "20px"
    back-block:
      font-size: "13px"
      icon:
        font-size: "25px"
  overlay:
    background-color: "rgba(var(--tx-generic-color-primary-dark-rgb), .65)"
    position: "fixed"
    z-index: "999"
  panel:
    bottom: "0"
    flex-flow: "column"
    margin: "0"
    max-width: "100%"
    opacity: "1"
    position: "absolute"
    top: "0"
  left-direction:
    left: "0"
    right: "auto"
  right-direction:
    left: "auto"
    right: "0"
spinner:
  color:
    light: "var(--tx-generic-color-accent-lighter)"
    lighter: "var(--tx-generic-color-accent)"
    dark: "var(--tx-generic-color-active)"
    darker: "var(--tx-generic-color-primary-lighter)"
carousel:
  item:
    min-height: "400px"
  button:
    font-size: "24px"
    background-color: *blank
    left-radius:  "0 5px 5px 0"
    right-radius:  "5px 0 0 5px"
    height: "54px"
    min-width: "30px"
    color: "var(--tx-generic-color-active)"
  marker:
    background-color: *blank
    active-background-color: "var(--tx-generic-color-active)"
    width: "10px"
    height: "10px"
    box-shadow: "0px 2px 5px 0px rgba(0,0,0,0.5)"
    border-radius: "100%"
  page:
    background-color: *blank
    border-radius: "3px"
    padding: "5px 15px"
    font-size: "12px"
    font-family: "var(--tx-generic-font-secondary-font-family)"
toggle-button:
  item:
    font-size: "14px"
    line-height: "25px"
    border:
      color: "var(--tx-generic-color-secondary-darker)"
      radius: "4px"
      size: "2px"
      style: solid
  item-active:
    font-size: "19px"
    line-height: "24px"
tooltip:
  margin: 15px
  arrow-align: 15px
  border: "2px solid var(--tx-generic-color-secondary-darker)"
  close-button:
    color: "var(--tx-generic-color-secondary-darker)"
    size: 13px
    weight: 2px
    hover:
      color: "var(--tx-generic-color-secondary-darkest)"
  top:
    shadow: "3px 3px 4px -1px rgba(0,0,0,0.5)"
  bottom:
    shadow: "none"
  right:
    shadow: "-2px 2px 4px -2px rgba(0,0,0,0.5)"
  left:
    shadow: "2px -2px 4px -2px rgba(0,0,0,0.5)"
  shadow: "0 2px 4px rgba(0,0,0,0.5)"
  background-color: *blank
  border-radius: "var(--tx-generic-border-radius)"