/*!
 * Newell v1.0.0
 * @author Azeem Mirza
 * Copyright 2020 Social Champ, IO.
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
 */

/*!
 * Champ Icons 1.0.0
 * License - https://github.com/SocialChamp/ng-newell/blob/master/LICENSE
 */

$CHAMP-ICONS-FONT-DIR: './webfonts/' !default;
$CHAMP-ICONS-FONT-NAME: 'Champ Icons';

// Font Type Definitions
.fa, .fab, .fad, .fal, .far, .fas {
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  line-height: 1
}

// Font Size Helpers
.fa-lg {
  font-size: 1.33333em;
  line-height: .75em;
  vertical-align: -.0667em
}

.fa-xs {
  font-size: .75em
}

.fa-sm {
  font-size: .875em
}

.fa-1x {
  font-size: 1em
}

.fa-2x {
  font-size: 2em
}

.fa-3x {
  font-size: 3em
}

.fa-4x {
  font-size: 4em
}

.fa-5x {
  font-size: 5em
}

.fa-6x {
  font-size: 6em
}

.fa-7x {
  font-size: 7em
}

.fa-8x {
  font-size: 8em
}

.fa-9x {
  font-size: 9em
}

.fa-10x {
  font-size: 10em
}

.fa-fw {
  text-align: center;
  width: 1.25em
}

.fa-ul {
  list-style-type: none;
  margin-left: 2.5em;
  padding-left: 0
}

.fa-ul > li {
  position: relative
}

.fa-li {
  left: -2em;
  position: absolute;
  text-align: center;
  width: 2em;
  line-height: inherit
}

.fa-border {
  border: .08em solid #eee;
  border-radius: .1em;
  padding: .2em .25em .15em
}

.fa-pull-left {
  float: left
}

.fa-pull-right {
  float: right
}

.fa.fa-pull-left, .fab.fa-pull-left, .fal.fa-pull-left, .far.fa-pull-left, .fas.fa-pull-left {
  margin-right: .3em
}

.fa.fa-pull-right, .fab.fa-pull-right, .fal.fa-pull-right, .far.fa-pull-right, .fas.fa-pull-right {
  margin-left: .3em
}

.fa-spin {
  -webkit-animation: fa-spin 2s linear infinite;
  animation: fa-spin 2s linear infinite
}

.fa-pulse {
  -webkit-animation: fa-spin 1s steps(8) infinite;
  animation: fa-spin 1s steps(8) infinite
}

@-webkit-keyframes fa-spin {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg)
  }
  to {
    -webkit-transform: rotate(1turn);
    transform: rotate(1turn)
  }
}

@keyframes fa-spin {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg)
  }
  to {
    -webkit-transform: rotate(1turn);
    transform: rotate(1turn)
  }
}

.fa-rotate-90 {
  -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=1)";
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg)
}

.fa-rotate-180 {
  -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=2)";
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg)
}

.fa-rotate-270 {
  -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=3)";
  -webkit-transform: rotate(270deg);
  transform: rotate(270deg)
}

.fa-flip-horizontal {
  -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=0, mirror=1)";
  -webkit-transform: scaleX(-1);
  transform: scaleX(-1)
}

.fa-flip-vertical {
  -webkit-transform: scaleY(-1);
  transform: scaleY(-1)
}

.fa-flip-both, .fa-flip-horizontal.fa-flip-vertical, .fa-flip-vertical {
  -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=2, mirror=1)"
}

.fa-flip-both, .fa-flip-horizontal.fa-flip-vertical {
  -webkit-transform: scale(-1);
  transform: scale(-1)
}

:root .fa-flip-both, :root .fa-flip-horizontal, :root .fa-flip-vertical, :root .fa-rotate-90, :root .fa-rotate-180, :root .fa-rotate-270 {
  -webkit-filter: none;
  filter: none
}

.fa-stack {
  display: inline-block;
  height: 2em;
  line-height: 2em;
  position: relative;
  vertical-align: middle;
  width: 2.5em
}

.fa-stack-1x, .fa-stack-2x {
  left: 0;
  position: absolute;
  text-align: center;
  width: 100%
}

.fa-stack-1x {
  line-height: inherit
}

.fa-stack-2x {
  font-size: 2em
}

.fa-inverse {
  color: #fff
}

.fa-500px:before {
  content: "\f26e"
}

.fa-abacus:before {
  content: "\f640"
}

.fa-accessible-icon:before {
  content: "\f368"
}

.fa-accusoft:before {
  content: "\f369"
}

.fa-acorn:before {
  content: "\f6ae"
}

.fa-acquisitions-incorporated:before {
  content: "\f6af"
}

.fa-ad:before {
  content: "\f641"
}

.fa-address-book:before {
  content: "\f2b9"
}

.fa-address-card:before {
  content: "\f2bb"
}

.fa-adjust:before {
  content: "\f042"
}

.fa-adn:before {
  content: "\f170"
}

.fa-adobe:before {
  content: "\f778"
}

.fa-adversal:before {
  content: "\f36a"
}

.fa-affiliatetheme:before {
  content: "\f36b"
}

.fa-air-conditioner:before {
  content: "\f8f4"
}

.fa-air-freshener:before {
  content: "\f5d0"
}

.fa-airbnb:before {
  content: "\f834"
}

.fa-alarm-clock:before {
  content: "\f34e"
}

.fa-alarm-exclamation:before {
  content: "\f843"
}

.fa-alarm-plus:before {
  content: "\f844"
}

.fa-alarm-snooze:before {
  content: "\f845"
}

.fa-album:before {
  content: "\f89f"
}

.fa-album-collection:before {
  content: "\f8a0"
}

.fa-algolia:before {
  content: "\f36c"
}

.fa-alicorn:before {
  content: "\f6b0"
}

.fa-alien:before {
  content: "\f8f5"
}

.fa-alien-monster:before {
  content: "\f8f6"
}

.fa-align-center:before {
  content: "\f037"
}

.fa-align-justify:before {
  content: "\f039"
}

.fa-align-left:before {
  content: "\f036"
}

.fa-align-right:before {
  content: "\f038"
}

.fa-align-slash:before {
  content: "\f846"
}

.fa-alipay:before {
  content: "\f642"
}

.fa-allergies:before {
  content: "\f461"
}

.fa-amazon:before {
  content: "\f270"
}

.fa-amazon-pay:before {
  content: "\f42c"
}

.fa-ambulance:before {
  content: "\f0f9"
}

.fa-american-sign-language-interpreting:before {
  content: "\f2a3"
}

.fa-amilia:before {
  content: "\f36d"
}

.fa-amp-guitar:before {
  content: "\f8a1"
}

.fa-analytics:before {
  content: "\f643"
}

.fa-anchor:before {
  content: "\f13d"
}

.fa-android:before {
  content: "\f17b"
}

.fa-angel:before {
  content: "\f779"
}

.fa-angellist:before {
  content: "\f209"
}

.fa-angle-double-down:before {
  content: "\f103"
}

.fa-angle-double-left:before {
  content: "\f100"
}

.fa-angle-double-right:before {
  content: "\f101"
}

.fa-angle-double-up:before {
  content: "\f102"
}

.fa-angle-down:before {
  content: "\f107"
}

.fa-angle-left:before {
  content: "\f104"
}

.fa-angle-right:before {
  content: "\f105"
}

.fa-angle-up:before {
  content: "\f106"
}

.fa-angry:before {
  content: "\f556"
}

.fa-angrycreative:before {
  content: "\f36e"
}

.fa-angular:before {
  content: "\f420"
}

.fa-ankh:before {
  content: "\f644"
}

.fa-app-store:before {
  content: "\f36f"
}

.fa-app-store-ios:before {
  content: "\f370"
}

.fa-apper:before {
  content: "\f371"
}

.fa-apple:before {
  content: "\f179"
}

.fa-apple-alt:before {
  content: "\f5d1"
}

.fa-apple-crate:before {
  content: "\f6b1"
}

.fa-apple-pay:before {
  content: "\f415"
}

.fa-archive:before {
  content: "\f187"
}

.fa-archway:before {
  content: "\f557"
}

.fa-arrow-alt-circle-down:before {
  content: "\f358"
}

.fa-arrow-alt-circle-left:before {
  content: "\f359"
}

.fa-arrow-alt-circle-right:before {
  content: "\f35a"
}

.fa-arrow-alt-circle-up:before {
  content: "\f35b"
}

.fa-arrow-alt-down:before {
  content: "\f354"
}

.fa-arrow-alt-from-bottom:before {
  content: "\f346"
}

.fa-arrow-alt-from-left:before {
  content: "\f347"
}

.fa-arrow-alt-from-right:before {
  content: "\f348"
}

.fa-arrow-alt-from-top:before {
  content: "\f349"
}

.fa-arrow-alt-left:before {
  content: "\f355"
}

.fa-arrow-alt-right:before {
  content: "\f356"
}

.fa-arrow-alt-square-down:before {
  content: "\f350"
}

.fa-arrow-alt-square-left:before {
  content: "\f351"
}

.fa-arrow-alt-square-right:before {
  content: "\f352"
}

.fa-arrow-alt-square-up:before {
  content: "\f353"
}

.fa-arrow-alt-to-bottom:before {
  content: "\f34a"
}

.fa-arrow-alt-to-left:before {
  content: "\f34b"
}

.fa-arrow-alt-to-right:before {
  content: "\f34c"
}

.fa-arrow-alt-to-top:before {
  content: "\f34d"
}

.fa-arrow-alt-up:before {
  content: "\f357"
}

.fa-arrow-circle-down:before {
  content: "\f0ab"
}

.fa-arrow-circle-left:before {
  content: "\f0a8"
}

.fa-arrow-circle-right:before {
  content: "\f0a9"
}

.fa-arrow-circle-up:before {
  content: "\f0aa"
}

.fa-arrow-down:before {
  content: "\f063"
}

.fa-arrow-from-bottom:before {
  content: "\f342"
}

.fa-arrow-from-left:before {
  content: "\f343"
}

.fa-arrow-from-right:before {
  content: "\f344"
}

.fa-arrow-from-top:before {
  content: "\f345"
}

.fa-arrow-left:before {
  content: "\f060"
}

.fa-arrow-right:before {
  content: "\f061"
}

.fa-arrow-square-down:before {
  content: "\f339"
}

.fa-arrow-square-left:before {
  content: "\f33a"
}

.fa-arrow-square-right:before {
  content: "\f33b"
}

.fa-arrow-square-up:before {
  content: "\f33c"
}

.fa-arrow-to-bottom:before {
  content: "\f33d"
}

.fa-arrow-to-left:before {
  content: "\f33e"
}

.fa-arrow-to-right:before {
  content: "\f340"
}

.fa-arrow-to-top:before {
  content: "\f341"
}

.fa-arrow-up:before {
  content: "\f062"
}

.fa-arrows:before {
  content: "\f047"
}

.fa-arrows-alt:before {
  content: "\f0b2"
}

.fa-arrows-alt-h:before {
  content: "\f337"
}

.fa-arrows-alt-v:before {
  content: "\f338"
}

.fa-arrows-h:before {
  content: "\f07e"
}

.fa-arrows-v:before {
  content: "\f07d"
}

.fa-artstation:before {
  content: "\f77a"
}

.fa-assistive-listening-systems:before {
  content: "\f2a2"
}

.fa-asterisk:before {
  content: "\f069"
}

.fa-asymmetrik:before {
  content: "\f372"
}

.fa-at:before {
  content: "\f1fa"
}

.fa-atlas:before {
  content: "\f558"
}

.fa-atlassian:before {
  content: "\f77b"
}

.fa-atom:before {
  content: "\f5d2"
}

.fa-atom-alt:before {
  content: "\f5d3"
}

.fa-audible:before {
  content: "\f373"
}

.fa-audio-description:before {
  content: "\f29e"
}

.fa-autoprefixer:before {
  content: "\f41c"
}

.fa-avianex:before {
  content: "\f374"
}

.fa-aviato:before {
  content: "\f421"
}

.fa-award:before {
  content: "\f559"
}

.fa-aws:before {
  content: "\f375"
}

.fa-axe:before {
  content: "\f6b2"
}

.fa-axe-battle:before {
  content: "\f6b3"
}

.fa-baby:before {
  content: "\f77c"
}

.fa-baby-carriage:before {
  content: "\f77d"
}

.fa-backpack:before {
  content: "\f5d4"
}

.fa-backspace:before {
  content: "\f55a"
}

.fa-backward:before {
  content: "\f04a"
}

.fa-bacon:before {
  content: "\f7e5"
}

.fa-bacteria:before {
  content: "\f959"
}

.fa-bacterium:before {
  content: "\f95a"
}

.fa-badge:before {
  content: "\f335"
}

.fa-badge-check:before {
  content: "\f336"
}

.fa-badge-dollar:before {
  content: "\f645"
}

.fa-badge-percent:before {
  content: "\f646"
}

.fa-badge-sheriff:before {
  content: "\f8a2"
}

.fa-badger-honey:before {
  content: "\f6b4"
}

.fa-bags-shopping:before {
  content: "\f847"
}

.fa-bahai:before {
  content: "\f666"
}

.fa-balance-scale:before {
  content: "\f24e"
}

.fa-balance-scale-left:before {
  content: "\f515"
}

.fa-balance-scale-right:before {
  content: "\f516"
}

.fa-ball-pile:before {
  content: "\f77e"
}

.fa-ballot:before {
  content: "\f732"
}

.fa-ballot-check:before {
  content: "\f733"
}

.fa-ban:before {
  content: "\f05e"
}

.fa-band-aid:before {
  content: "\f462"
}

.fa-bandcamp:before {
  content: "\f2d5"
}

.fa-banjo:before {
  content: "\f8a3"
}

.fa-barcode:before {
  content: "\f02a"
}

.fa-barcode-alt:before {
  content: "\f463"
}

.fa-barcode-read:before {
  content: "\f464"
}

.fa-barcode-scan:before {
  content: "\f465"
}

.fa-bars:before {
  content: "\f0c9"
}

.fa-baseball:before {
  content: "\f432"
}

.fa-baseball-ball:before {
  content: "\f433"
}

.fa-basketball-ball:before {
  content: "\f434"
}

.fa-basketball-hoop:before {
  content: "\f435"
}

.fa-bat:before {
  content: "\f6b5"
}

.fa-bath:before {
  content: "\f2cd"
}

.fa-battery-bolt:before {
  content: "\f376"
}

.fa-battery-empty:before {
  content: "\f244"
}

.fa-battery-full:before {
  content: "\f240"
}

.fa-battery-half:before {
  content: "\f242"
}

.fa-battery-quarter:before {
  content: "\f243"
}

.fa-battery-slash:before {
  content: "\f377"
}

.fa-battery-three-quarters:before {
  content: "\f241"
}

.fa-battle-net:before {
  content: "\f835"
}

.fa-bed:before {
  content: "\f236"
}

.fa-bed-alt:before {
  content: "\f8f7"
}

.fa-bed-bunk:before {
  content: "\f8f8"
}

.fa-bed-empty:before {
  content: "\f8f9"
}

.fa-beer:before {
  content: "\f0fc"
}

.fa-behance:before {
  content: "\f1b4"
}

.fa-behance-square:before {
  content: "\f1b5"
}

.fa-bell:before {
  content: "\f0f3"
}

.fa-bell-exclamation:before {
  content: "\f848"
}

.fa-bell-on:before {
  content: "\f8fa"
}

.fa-bell-plus:before {
  content: "\f849"
}

.fa-bell-school:before {
  content: "\f5d5"
}

.fa-bell-school-slash:before {
  content: "\f5d6"
}

.fa-bell-slash:before {
  content: "\f1f6"
}

.fa-bells:before {
  content: "\f77f"
}

.fa-betamax:before {
  content: "\f8a4"
}

.fa-bezier-curve:before {
  content: "\f55b"
}

.fa-bible:before {
  content: "\f647"
}

.fa-bicycle:before {
  content: "\f206"
}

.fa-biking:before {
  content: "\f84a"
}

.fa-biking-mountain:before {
  content: "\f84b"
}

.fa-bimobject:before {
  content: "\f378"
}

.fa-binoculars:before {
  content: "\f1e5"
}

.fa-biohazard:before {
  content: "\f780"
}

.fa-birthday-cake:before {
  content: "\f1fd"
}

.fa-bitbucket:before {
  content: "\f171"
}

.fa-bitcoin:before {
  content: "\f379"
}

.fa-bity:before {
  content: "\f37a"
}

.fa-black-tie:before {
  content: "\f27e"
}

.fa-blackberry:before {
  content: "\f37b"
}

.fa-blanket:before {
  content: "\f498"
}

.fa-blender:before {
  content: "\f517"
}

.fa-blender-phone:before {
  content: "\f6b6"
}

.fa-blind:before {
  content: "\f29d"
}

.fa-blinds:before {
  content: "\f8fb"
}

.fa-blinds-open:before {
  content: "\f8fc"
}

.fa-blinds-raised:before {
  content: "\f8fd"
}

.fa-blog:before {
  content: "\f781"
}

.fa-blogger:before {
  content: "\f37c"
}

.fa-blogger-b:before {
  content: "\f37d"
}

.fa-bluetooth:before {
  content: "\f293"
}

.fa-bluetooth-b:before {
  content: "\f294"
}

.fa-bold:before {
  content: "\f032"
}

.fa-bolt:before {
  content: "\f0e7"
}

.fa-bomb:before {
  content: "\f1e2"
}

.fa-bone:before {
  content: "\f5d7"
}

.fa-bone-break:before {
  content: "\f5d8"
}

.fa-bong:before {
  content: "\f55c"
}

.fa-book:before {
  content: "\f02d"
}

.fa-book-alt:before {
  content: "\f5d9"
}

.fa-book-dead:before {
  content: "\f6b7"
}

.fa-book-heart:before {
  content: "\f499"
}

.fa-book-medical:before {
  content: "\f7e6"
}

.fa-book-open:before {
  content: "\f518"
}

.fa-book-reader:before {
  content: "\f5da"
}

.fa-book-spells:before {
  content: "\f6b8"
}

.fa-book-user:before {
  content: "\f7e7"
}

.fa-bookmark:before {
  content: "\f02e"
}

.fa-books:before {
  content: "\f5db"
}

.fa-books-medical:before {
  content: "\f7e8"
}

.fa-boombox:before {
  content: "\f8a5"
}

.fa-boot:before {
  content: "\f782"
}

.fa-booth-curtain:before {
  content: "\f734"
}

.fa-bootstrap:before {
  content: "\f836"
}

.fa-border-all:before {
  content: "\f84c"
}

.fa-border-bottom:before {
  content: "\f84d"
}

.fa-border-center-h:before {
  content: "\f89c"
}

.fa-border-center-v:before {
  content: "\f89d"
}

.fa-border-inner:before {
  content: "\f84e"
}

.fa-border-left:before {
  content: "\f84f"
}

.fa-border-none:before {
  content: "\f850"
}

.fa-border-outer:before {
  content: "\f851"
}

.fa-border-right:before {
  content: "\f852"
}

.fa-border-style:before {
  content: "\f853"
}

.fa-border-style-alt:before {
  content: "\f854"
}

.fa-border-top:before {
  content: "\f855"
}

.fa-bow-arrow:before {
  content: "\f6b9"
}

.fa-bowling-ball:before {
  content: "\f436"
}

.fa-bowling-pins:before {
  content: "\f437"
}

.fa-box:before {
  content: "\f466"
}

.fa-box-alt:before {
  content: "\f49a"
}

.fa-box-ballot:before {
  content: "\f735"
}

.fa-box-check:before {
  content: "\f467"
}

.fa-box-fragile:before {
  content: "\f49b"
}

.fa-box-full:before {
  content: "\f49c"
}

.fa-box-heart:before {
  content: "\f49d"
}

.fa-box-open:before {
  content: "\f49e"
}

.fa-box-tissue:before {
  content: "\f95b"
}

.fa-box-up:before {
  content: "\f49f"
}

.fa-box-usd:before {
  content: "\f4a0"
}

.fa-boxes:before {
  content: "\f468"
}

.fa-boxes-alt:before {
  content: "\f4a1"
}

.fa-boxing-glove:before {
  content: "\f438"
}

.fa-brackets:before {
  content: "\f7e9"
}

.fa-brackets-curly:before {
  content: "\f7ea"
}

.fa-braille:before {
  content: "\f2a1"
}

.fa-brain:before {
  content: "\f5dc"
}

.fa-bread-loaf:before {
  content: "\f7eb"
}

.fa-bread-slice:before {
  content: "\f7ec"
}

.fa-briefcase:before {
  content: "\f0b1"
}

.fa-briefcase-medical:before {
  content: "\f469"
}

.fa-bring-forward:before {
  content: "\f856"
}

.fa-bring-front:before {
  content: "\f857"
}

.fa-broadcast-tower:before {
  content: "\f519"
}

.fa-broom:before {
  content: "\f51a"
}

.fa-browser:before {
  content: "\f37e"
}

.fa-brush:before {
  content: "\f55d"
}

.fa-btc:before {
  content: "\f15a"
}

.fa-buffer:before {
  content: "\f837"
}

.fa-bug:before {
  content: "\f188"
}

.fa-building:before {
  content: "\f1ad"
}

.fa-bullhorn:before {
  content: "\f0a1"
}

.fa-bullseye:before {
  content: "\f140"
}

.fa-bullseye-arrow:before {
  content: "\f648"
}

.fa-bullseye-pointer:before {
  content: "\f649"
}

.fa-burger-soda:before {
  content: "\f858"
}

.fa-burn:before {
  content: "\f46a"
}

.fa-buromobelexperte:before {
  content: "\f37f"
}

.fa-burrito:before {
  content: "\f7ed"
}

.fa-bus:before {
  content: "\f207"
}

.fa-bus-alt:before {
  content: "\f55e"
}

.fa-bus-school:before {
  content: "\f5dd"
}

.fa-business-time:before {
  content: "\f64a"
}

.fa-buy-n-large:before {
  content: "\f8a6"
}

.fa-buysellads:before {
  content: "\f20d"
}

.fa-cabinet-filing:before {
  content: "\f64b"
}

.fa-cactus:before {
  content: "\f8a7"
}

.fa-calculator:before {
  content: "\f1ec"
}

.fa-calculator-alt:before {
  content: "\f64c"
}

.fa-calendar:before {
  content: "\f133"
}

.fa-calendar-alt:before {
  content: "\f073"
}

.fa-calendar-check:before {
  content: "\f274"
}

.fa-calendar-day:before {
  content: "\f783"
}

.fa-calendar-edit:before {
  content: "\f333"
}

.fa-calendar-exclamation:before {
  content: "\f334"
}

.fa-calendar-minus:before {
  content: "\f272"
}

.fa-calendar-plus:before {
  content: "\f271"
}

.fa-calendar-star:before {
  content: "\f736"
}

.fa-calendar-times:before {
  content: "\f273"
}

.fa-calendar-week:before {
  content: "\f784"
}

.fa-camcorder:before {
  content: "\f8a8"
}

.fa-camera:before {
  content: "\f030"
}

.fa-camera-alt:before {
  content: "\f332"
}

.fa-camera-home:before {
  content: "\f8fe"
}

.fa-camera-movie:before {
  content: "\f8a9"
}

.fa-camera-polaroid:before {
  content: "\f8aa"
}

.fa-camera-retro:before {
  content: "\f083"
}

.fa-campfire:before {
  content: "\f6ba"
}

.fa-campground:before {
  content: "\f6bb"
}

.fa-canadian-maple-leaf:before {
  content: "\f785"
}

.fa-candle-holder:before {
  content: "\f6bc"
}

.fa-candy-cane:before {
  content: "\f786"
}

.fa-candy-corn:before {
  content: "\f6bd"
}

.fa-cannabis:before {
  content: "\f55f"
}

.fa-capsules:before {
  content: "\f46b"
}

.fa-car:before {
  content: "\f1b9"
}

.fa-car-alt:before {
  content: "\f5de"
}

.fa-car-battery:before {
  content: "\f5df"
}

.fa-car-building:before {
  content: "\f859"
}

.fa-car-bump:before {
  content: "\f5e0"
}

.fa-car-bus:before {
  content: "\f85a"
}

.fa-car-crash:before {
  content: "\f5e1"
}

.fa-car-garage:before {
  content: "\f5e2"
}

.fa-car-mechanic:before {
  content: "\f5e3"
}

.fa-car-side:before {
  content: "\f5e4"
}

.fa-car-tilt:before {
  content: "\f5e5"
}

.fa-car-wash:before {
  content: "\f5e6"
}

.fa-caravan:before {
  content: "\f8ff"
}

.fa-caravan-alt:before {
  content: "\f900"
}

.fa-caret-circle-down:before {
  content: "\f32d"
}

.fa-caret-circle-left:before {
  content: "\f32e"
}

.fa-caret-circle-right:before {
  content: "\f330"
}

.fa-caret-circle-up:before {
  content: "\f331"
}

.fa-caret-down:before {
  content: "\f0d7"
}

.fa-caret-left:before {
  content: "\f0d9"
}

.fa-caret-right:before {
  content: "\f0da"
}

.fa-caret-square-down:before {
  content: "\f150"
}

.fa-caret-square-left:before {
  content: "\f191"
}

.fa-caret-square-right:before {
  content: "\f152"
}

.fa-caret-square-up:before {
  content: "\f151"
}

.fa-caret-up:before {
  content: "\f0d8"
}

.fa-carrot:before {
  content: "\f787"
}

.fa-cars:before {
  content: "\f85b"
}

.fa-cart-arrow-down:before {
  content: "\f218"
}

.fa-cart-plus:before {
  content: "\f217"
}

.fa-cash-register:before {
  content: "\f788"
}

.fa-cassette-tape:before {
  content: "\f8ab"
}

.fa-cat:before {
  content: "\f6be"
}

.fa-cat-space:before {
  content: "\f901"
}

.fa-cauldron:before {
  content: "\f6bf"
}

.fa-cc-amazon-pay:before {
  content: "\f42d"
}

.fa-cc-amex:before {
  content: "\f1f3"
}

.fa-cc-apple-pay:before {
  content: "\f416"
}

.fa-cc-diners-club:before {
  content: "\f24c"
}

.fa-cc-discover:before {
  content: "\f1f2"
}

.fa-cc-jcb:before {
  content: "\f24b"
}

.fa-cc-mastercard:before {
  content: "\f1f1"
}

.fa-cc-paypal:before {
  content: "\f1f4"
}

.fa-cc-stripe:before {
  content: "\f1f5"
}

.fa-cc-visa:before {
  content: "\f1f0"
}

.fa-cctv:before {
  content: "\f8ac"
}

.fa-centercode:before {
  content: "\f380"
}

.fa-centos:before {
  content: "\f789"
}

.fa-certificate:before {
  content: "\f0a3"
}

.fa-chair:before {
  content: "\f6c0"
}

.fa-chair-office:before {
  content: "\f6c1"
}

.fa-chalkboard:before {
  content: "\f51b"
}

.fa-chalkboard-teacher:before {
  content: "\f51c"
}

.fa-charging-station:before {
  content: "\f5e7"
}

.fa-chart-area:before {
  content: "\f1fe"
}

.fa-chart-bar:before {
  content: "\f080"
}

.fa-chart-line:before {
  content: "\f201"
}

.fa-chart-line-down:before {
  content: "\f64d"
}

.fa-chart-network:before {
  content: "\f78a"
}

.fa-chart-pie:before {
  content: "\f200"
}

.fa-chart-pie-alt:before {
  content: "\f64e"
}

.fa-chart-scatter:before {
  content: "\f7ee"
}

.fa-check:before {
  content: "\f00c"
}

.fa-check-circle:before {
  content: "\f058"
}

.fa-check-double:before {
  content: "\f560"
}

.fa-check-square:before {
  content: "\f14a"
}

.fa-cheese:before {
  content: "\f7ef"
}

.fa-cheese-swiss:before {
  content: "\f7f0"
}

.fa-cheeseburger:before {
  content: "\f7f1"
}

.fa-chess:before {
  content: "\f439"
}

.fa-chess-bishop:before {
  content: "\f43a"
}

.fa-chess-bishop-alt:before {
  content: "\f43b"
}

.fa-chess-board:before {
  content: "\f43c"
}

.fa-chess-clock:before {
  content: "\f43d"
}

.fa-chess-clock-alt:before {
  content: "\f43e"
}

.fa-chess-king:before {
  content: "\f43f"
}

.fa-chess-king-alt:before {
  content: "\f440"
}

.fa-chess-knight:before {
  content: "\f441"
}

.fa-chess-knight-alt:before {
  content: "\f442"
}

.fa-chess-pawn:before {
  content: "\f443"
}

.fa-chess-pawn-alt:before {
  content: "\f444"
}

.fa-chess-queen:before {
  content: "\f445"
}

.fa-chess-queen-alt:before {
  content: "\f446"
}

.fa-chess-rook:before {
  content: "\f447"
}

.fa-chess-rook-alt:before {
  content: "\f448"
}

.fa-chevron-circle-down:before {
  content: "\f13a"
}

.fa-chevron-circle-left:before {
  content: "\f137"
}

.fa-chevron-circle-right:before {
  content: "\f138"
}

.fa-chevron-circle-up:before {
  content: "\f139"
}

.fa-chevron-double-down:before {
  content: "\f322"
}

.fa-chevron-double-left:before {
  content: "\f323"
}

.fa-chevron-double-right:before {
  content: "\f324"
}

.fa-chevron-double-up:before {
  content: "\f325"
}

.fa-chevron-down:before {
  content: "\f078"
}

.fa-chevron-left:before {
  content: "\f053"
}

.fa-chevron-right:before {
  content: "\f054"
}

.fa-chevron-square-down:before {
  content: "\f329"
}

.fa-chevron-square-left:before {
  content: "\f32a"
}

.fa-chevron-square-right:before {
  content: "\f32b"
}

.fa-chevron-square-up:before {
  content: "\f32c"
}

.fa-chevron-up:before {
  content: "\f077"
}

.fa-child:before {
  content: "\f1ae"
}

.fa-chimney:before {
  content: "\f78b"
}

.fa-chrome:before {
  content: "\f268"
}

.fa-chromecast:before {
  content: "\f838"
}

.fa-church:before {
  content: "\f51d"
}

.fa-circle:before {
  content: "\f111"
}

.fa-circle-notch:before {
  content: "\f1ce"
}

.fa-city:before {
  content: "\f64f"
}

.fa-clarinet:before {
  content: "\f8ad"
}

.fa-claw-marks:before {
  content: "\f6c2"
}

.fa-clinic-medical:before {
  content: "\f7f2"
}

.fa-clipboard:before {
  content: "\f328"
}

.fa-clipboard-check:before {
  content: "\f46c"
}

.fa-clipboard-list:before {
  content: "\f46d"
}

.fa-clipboard-list-check:before {
  content: "\f737"
}

.fa-clipboard-prescription:before {
  content: "\f5e8"
}

.fa-clipboard-user:before {
  content: "\f7f3"
}

.fa-clock:before {
  content: "\f017"
}

.fa-clone:before {
  content: "\f24d"
}

.fa-closed-captioning:before {
  content: "\f20a"
}

.fa-cloud:before {
  content: "\f0c2"
}

.fa-cloud-download:before {
  content: "\f0ed"
}

.fa-cloud-download-alt:before {
  content: "\f381"
}

.fa-cloud-drizzle:before {
  content: "\f738"
}

.fa-cloud-hail:before {
  content: "\f739"
}

.fa-cloud-hail-mixed:before {
  content: "\f73a"
}

.fa-cloud-meatball:before {
  content: "\f73b"
}

.fa-cloud-moon:before {
  content: "\f6c3"
}

.fa-cloud-moon-rain:before {
  content: "\f73c"
}

.fa-cloud-music:before {
  content: "\f8ae"
}

.fa-cloud-rain:before {
  content: "\f73d"
}

.fa-cloud-rainbow:before {
  content: "\f73e"
}

.fa-cloud-showers:before {
  content: "\f73f"
}

.fa-cloud-showers-heavy:before {
  content: "\f740"
}

.fa-cloud-sleet:before {
  content: "\f741"
}

.fa-cloud-snow:before {
  content: "\f742"
}

.fa-cloud-sun:before {
  content: "\f6c4"
}

.fa-cloud-sun-rain:before {
  content: "\f743"
}

.fa-cloud-upload:before {
  content: "\f0ee"
}

.fa-cloud-upload-alt:before {
  content: "\f382"
}

.fa-clouds:before {
  content: "\f744"
}

.fa-clouds-moon:before {
  content: "\f745"
}

.fa-clouds-sun:before {
  content: "\f746"
}

.fa-cloudscale:before {
  content: "\f383"
}

.fa-cloudsmith:before {
  content: "\f384"
}

.fa-cloudversify:before {
  content: "\f385"
}

.fa-club:before {
  content: "\f327"
}

.fa-cocktail:before {
  content: "\f561"
}

.fa-code:before {
  content: "\f121"
}

.fa-code-branch:before {
  content: "\f126"
}

.fa-code-commit:before {
  content: "\f386"
}

.fa-code-merge:before {
  content: "\f387"
}

.fa-codepen:before {
  content: "\f1cb"
}

.fa-codiepie:before {
  content: "\f284"
}

.fa-coffee:before {
  content: "\f0f4"
}

.fa-coffee-pot:before {
  content: "\f902"
}

.fa-coffee-togo:before {
  content: "\f6c5"
}

.fa-coffin:before {
  content: "\f6c6"
}

.fa-coffin-cross:before {
  content: "\f951"
}

.fa-cog:before {
  content: "\f013"
}

.fa-cogs:before {
  content: "\f085"
}

.fa-coin:before {
  content: "\f85c"
}

.fa-coins:before {
  content: "\f51e"
}

.fa-columns:before {
  content: "\f0db"
}

.fa-comet:before {
  content: "\f903"
}

.fa-comment:before {
  content: "\f075"
}

.fa-comment-alt:before {
  content: "\f27a"
}

.fa-comment-alt-check:before {
  content: "\f4a2"
}

.fa-comment-alt-dollar:before {
  content: "\f650"
}

.fa-comment-alt-dots:before {
  content: "\f4a3"
}

.fa-comment-alt-edit:before {
  content: "\f4a4"
}

.fa-comment-alt-exclamation:before {
  content: "\f4a5"
}

.fa-comment-alt-lines:before {
  content: "\f4a6"
}

.fa-comment-alt-medical:before {
  content: "\f7f4"
}

.fa-comment-alt-minus:before {
  content: "\f4a7"
}

.fa-comment-alt-music:before {
  content: "\f8af"
}

.fa-comment-alt-plus:before {
  content: "\f4a8"
}

.fa-comment-alt-slash:before {
  content: "\f4a9"
}

.fa-comment-alt-smile:before {
  content: "\f4aa"
}

.fa-comment-alt-times:before {
  content: "\f4ab"
}

.fa-comment-check:before {
  content: "\f4ac"
}

.fa-comment-dollar:before {
  content: "\f651"
}

.fa-comment-dots:before {
  content: "\f4ad"
}

.fa-comment-edit:before {
  content: "\f4ae"
}

.fa-comment-exclamation:before {
  content: "\f4af"
}

.fa-comment-lines:before {
  content: "\f4b0"
}

.fa-comment-medical:before {
  content: "\f7f5"
}

.fa-comment-minus:before {
  content: "\f4b1"
}

.fa-comment-music:before {
  content: "\f8b0"
}

.fa-comment-plus:before {
  content: "\f4b2"
}

.fa-comment-slash:before {
  content: "\f4b3"
}

.fa-comment-smile:before {
  content: "\f4b4"
}

.fa-comment-times:before {
  content: "\f4b5"
}

.fa-comments:before {
  content: "\f086"
}

.fa-comments-alt:before {
  content: "\f4b6"
}

.fa-comments-alt-dollar:before {
  content: "\f652"
}

.fa-comments-dollar:before {
  content: "\f653"
}

.fa-compact-disc:before {
  content: "\f51f"
}

.fa-compass:before {
  content: "\f14e"
}

.fa-compass-slash:before {
  content: "\f5e9"
}

.fa-compress:before {
  content: "\f066"
}

.fa-compress-alt:before {
  content: "\f422"
}

.fa-compress-arrows-alt:before {
  content: "\f78c"
}

.fa-compress-wide:before {
  content: "\f326"
}

.fa-computer-classic:before {
  content: "\f8b1"
}

.fa-computer-speaker:before {
  content: "\f8b2"
}

.fa-concierge-bell:before {
  content: "\f562"
}

.fa-confluence:before {
  content: "\f78d"
}

.fa-connectdevelop:before {
  content: "\f20e"
}

.fa-construction:before {
  content: "\f85d"
}

.fa-container-storage:before {
  content: "\f4b7"
}

.fa-contao:before {
  content: "\f26d"
}

.fa-conveyor-belt:before {
  content: "\f46e"
}

.fa-conveyor-belt-alt:before {
  content: "\f46f"
}

.fa-cookie:before {
  content: "\f563"
}

.fa-cookie-bite:before {
  content: "\f564"
}

.fa-copy:before {
  content: "\f0c5"
}

.fa-copyright:before {
  content: "\f1f9"
}

.fa-corn:before {
  content: "\f6c7"
}

.fa-cotton-bureau:before {
  content: "\f89e"
}

.fa-couch:before {
  content: "\f4b8"
}

.fa-cow:before {
  content: "\f6c8"
}

.fa-cowbell:before {
  content: "\f8b3"
}

.fa-cowbell-more:before {
  content: "\f8b4"
}

.fa-cpanel:before {
  content: "\f388"
}

.fa-creative-commons:before {
  content: "\f25e"
}

.fa-creative-commons-by:before {
  content: "\f4e7"
}

.fa-creative-commons-nc:before {
  content: "\f4e8"
}

.fa-creative-commons-nc-eu:before {
  content: "\f4e9"
}

.fa-creative-commons-nc-jp:before {
  content: "\f4ea"
}

.fa-creative-commons-nd:before {
  content: "\f4eb"
}

.fa-creative-commons-pd:before {
  content: "\f4ec"
}

.fa-creative-commons-pd-alt:before {
  content: "\f4ed"
}

.fa-creative-commons-remix:before {
  content: "\f4ee"
}

.fa-creative-commons-sa:before {
  content: "\f4ef"
}

.fa-creative-commons-sampling:before {
  content: "\f4f0"
}

.fa-creative-commons-sampling-plus:before {
  content: "\f4f1"
}

.fa-creative-commons-share:before {
  content: "\f4f2"
}

.fa-creative-commons-zero:before {
  content: "\f4f3"
}

.fa-credit-card:before {
  content: "\f09d"
}

.fa-credit-card-blank:before {
  content: "\f389"
}

.fa-credit-card-front:before {
  content: "\f38a"
}

.fa-cricket:before {
  content: "\f449"
}

.fa-critical-role:before {
  content: "\f6c9"
}

.fa-croissant:before {
  content: "\f7f6"
}

.fa-crop:before {
  content: "\f125"
}

.fa-crop-alt:before {
  content: "\f565"
}

.fa-cross:before {
  content: "\f654"
}

.fa-crosshairs:before {
  content: "\f05b"
}

.fa-crow:before {
  content: "\f520"
}

.fa-crown:before {
  content: "\f521"
}

.fa-crutch:before {
  content: "\f7f7"
}

.fa-crutches:before {
  content: "\f7f8"
}

.fa-css3:before {
  content: "\f13c"
}

.fa-css3-alt:before {
  content: "\f38b"
}

.fa-cube:before {
  content: "\f1b2"
}

.fa-cubes:before {
  content: "\f1b3"
}

.fa-curling:before {
  content: "\f44a"
}

.fa-cut:before {
  content: "\f0c4"
}

.fa-cuttlefish:before {
  content: "\f38c"
}

.fa-d-and-d:before {
  content: "\f38d"
}

.fa-d-and-d-beyond:before {
  content: "\f6ca"
}

.fa-dagger:before {
  content: "\f6cb"
}

.fa-dailymotion:before {
  content: "\f952"
}

.fa-dashcube:before {
  content: "\f210"
}

.fa-database:before {
  content: "\f1c0"
}

.fa-deaf:before {
  content: "\f2a4"
}

.fa-debug:before {
  content: "\f7f9"
}

.fa-deer:before {
  content: "\f78e"
}

.fa-deer-rudolph:before {
  content: "\f78f"
}

.fa-delicious:before {
  content: "\f1a5"
}

.fa-democrat:before {
  content: "\f747"
}

.fa-deploydog:before {
  content: "\f38e"
}

.fa-deskpro:before {
  content: "\f38f"
}

.fa-desktop:before {
  content: "\f108"
}

.fa-desktop-alt:before {
  content: "\f390"
}

.fa-dev:before {
  content: "\f6cc"
}

.fa-deviantart:before {
  content: "\f1bd"
}

.fa-dewpoint:before {
  content: "\f748"
}

.fa-dharmachakra:before {
  content: "\f655"
}

.fa-dhl:before {
  content: "\f790"
}

.fa-diagnoses:before {
  content: "\f470"
}

.fa-diamond:before {
  content: "\f219"
}

.fa-diaspora:before {
  content: "\f791"
}

.fa-dice:before {
  content: "\f522"
}

.fa-dice-d10:before {
  content: "\f6cd"
}

.fa-dice-d12:before {
  content: "\f6ce"
}

.fa-dice-d20:before {
  content: "\f6cf"
}

.fa-dice-d4:before {
  content: "\f6d0"
}

.fa-dice-d6:before {
  content: "\f6d1"
}

.fa-dice-d8:before {
  content: "\f6d2"
}

.fa-dice-five:before {
  content: "\f523"
}

.fa-dice-four:before {
  content: "\f524"
}

.fa-dice-one:before {
  content: "\f525"
}

.fa-dice-six:before {
  content: "\f526"
}

.fa-dice-three:before {
  content: "\f527"
}

.fa-dice-two:before {
  content: "\f528"
}

.fa-digg:before {
  content: "\f1a6"
}

.fa-digging:before {
  content: "\f85e"
}

.fa-digital-ocean:before {
  content: "\f391"
}

.fa-digital-tachograph:before {
  content: "\f566"
}

.fa-diploma:before {
  content: "\f5ea"
}

.fa-directions:before {
  content: "\f5eb"
}

.fa-disc-drive:before {
  content: "\f8b5"
}

.fa-discord:before {
  content: "\f392"
}

.fa-discourse:before {
  content: "\f393"
}

.fa-disease:before {
  content: "\f7fa"
}

.fa-divide:before {
  content: "\f529"
}

.fa-dizzy:before {
  content: "\f567"
}

.fa-dna:before {
  content: "\f471"
}

.fa-do-not-enter:before {
  content: "\f5ec"
}

.fa-dochub:before {
  content: "\f394"
}

.fa-docker:before {
  content: "\f395"
}

.fa-dog:before {
  content: "\f6d3"
}

.fa-dog-leashed:before {
  content: "\f6d4"
}

.fa-dollar-sign:before {
  content: "\f155"
}

.fa-dolly:before {
  content: "\f472"
}

.fa-dolly-empty:before {
  content: "\f473"
}

.fa-dolly-flatbed:before {
  content: "\f474"
}

.fa-dolly-flatbed-alt:before {
  content: "\f475"
}

.fa-dolly-flatbed-empty:before {
  content: "\f476"
}

.fa-donate:before {
  content: "\f4b9"
}

.fa-door-closed:before {
  content: "\f52a"
}

.fa-door-open:before {
  content: "\f52b"
}

.fa-dot-circle:before {
  content: "\f192"
}

.fa-dove:before {
  content: "\f4ba"
}

.fa-download:before {
  content: "\f019"
}

.fa-draft2digital:before {
  content: "\f396"
}

.fa-drafting-compass:before {
  content: "\f568"
}

.fa-dragon:before {
  content: "\f6d5"
}

.fa-draw-circle:before {
  content: "\f5ed"
}

.fa-draw-polygon:before {
  content: "\f5ee"
}

.fa-draw-square:before {
  content: "\f5ef"
}

.fa-dreidel:before {
  content: "\f792"
}

.fa-dribbble:before {
  content: "\f17d"
}

.fa-dribbble-square:before {
  content: "\f397"
}

.fa-drone:before {
  content: "\f85f"
}

.fa-drone-alt:before {
  content: "\f860"
}

.fa-dropbox:before {
  content: "\f16b"
}

.fa-drum:before {
  content: "\f569"
}

.fa-drum-steelpan:before {
  content: "\f56a"
}

.fa-drumstick:before {
  content: "\f6d6"
}

.fa-drumstick-bite:before {
  content: "\f6d7"
}

.fa-drupal:before {
  content: "\f1a9"
}

.fa-dryer:before {
  content: "\f861"
}

.fa-dryer-alt:before {
  content: "\f862"
}

.fa-duck:before {
  content: "\f6d8"
}

.fa-dumbbell:before {
  content: "\f44b"
}

.fa-dumpster:before {
  content: "\f793"
}

.fa-dumpster-fire:before {
  content: "\f794"
}

.fa-dungeon:before {
  content: "\f6d9"
}

.fa-dyalog:before {
  content: "\f399"
}

.fa-ear:before {
  content: "\f5f0"
}

.fa-ear-muffs:before {
  content: "\f795"
}

.fa-earlybirds:before {
  content: "\f39a"
}

.fa-ebay:before {
  content: "\f4f4"
}

.fa-eclipse:before {
  content: "\f749"
}

.fa-eclipse-alt:before {
  content: "\f74a"
}

.fa-edge:before {
  content: "\f282"
}

.fa-edit:before {
  content: "\f044"
}

.fa-egg:before {
  content: "\f7fb"
}

.fa-egg-fried:before {
  content: "\f7fc"
}

.fa-eject:before {
  content: "\f052"
}

.fa-elementor:before {
  content: "\f430"
}

.fa-elephant:before {
  content: "\f6da"
}

.fa-ellipsis-h:before {
  content: "\f141"
}

.fa-ellipsis-h-alt:before {
  content: "\f39b"
}

.fa-ellipsis-v:before {
  content: "\f142"
}

.fa-ellipsis-v-alt:before {
  content: "\f39c"
}

.fa-ello:before {
  content: "\f5f1"
}

.fa-ember:before {
  content: "\f423"
}

.fa-empire:before {
  content: "\f1d1"
}

.fa-empty-set:before {
  content: "\f656"
}

.fa-engine-warning:before {
  content: "\f5f2"
}

.fa-envelope:before {
  content: "\f0e0"
}

.fa-envelope-open:before {
  content: "\f2b6"
}

.fa-envelope-open-dollar:before {
  content: "\f657"
}

.fa-envelope-open-text:before {
  content: "\f658"
}

.fa-envelope-square:before {
  content: "\f199"
}

.fa-envira:before {
  content: "\f299"
}

.fa-equals:before {
  content: "\f52c"
}

.fa-eraser:before {
  content: "\f12d"
}

.fa-erlang:before {
  content: "\f39d"
}

.fa-ethereum:before {
  content: "\f42e"
}

.fa-ethernet:before {
  content: "\f796"
}

.fa-etsy:before {
  content: "\f2d7"
}

.fa-euro-sign:before {
  content: "\f153"
}

.fa-evernote:before {
  content: "\f839"
}

.fa-exchange:before {
  content: "\f0ec"
}

.fa-exchange-alt:before {
  content: "\f362"
}

.fa-exclamation:before {
  content: "\f12a"
}

.fa-exclamation-circle:before {
  content: "\f06a"
}

.fa-exclamation-square:before {
  content: "\f321"
}

.fa-exclamation-triangle:before {
  content: "\f071"
}

.fa-expand:before {
  content: "\f065"
}

.fa-expand-alt:before {
  content: "\f424"
}

.fa-expand-arrows:before {
  content: "\f31d"
}

.fa-expand-arrows-alt:before {
  content: "\f31e"
}

.fa-expand-wide:before {
  content: "\f320"
}

.fa-expeditedssl:before {
  content: "\f23e"
}

.fa-external-link:before {
  content: "\f08e"
}

.fa-external-link-alt:before {
  content: "\f35d"
}

.fa-external-link-square:before {
  content: "\f14c"
}

.fa-external-link-square-alt:before {
  content: "\f360"
}

.fa-eye:before {
  content: "\f06e"
}

.fa-eye-dropper:before {
  content: "\f1fb"
}

.fa-eye-evil:before {
  content: "\f6db"
}

.fa-eye-slash:before {
  content: "\f070"
}

.fa-facebook:before {
  content: "\f09a"
}

.fa-facebook-f:before {
  content: "\f39e"
}

.fa-facebook-messenger:before {
  content: "\f39f"
}

.fa-facebook-square:before {
  content: "\f082"
}

.fa-fan:before {
  content: "\f863"
}

.fa-fan-table:before {
  content: "\f904"
}

.fa-fantasy-flight-games:before {
  content: "\f6dc"
}

.fa-farm:before {
  content: "\f864"
}

.fa-fast-backward:before {
  content: "\f049"
}

.fa-fast-forward:before {
  content: "\f050"
}

.fa-faucet:before {
  content: "\f905"
}

.fa-faucet-drip:before {
  content: "\f906"
}

.fa-fax:before {
  content: "\f1ac"
}

.fa-feather:before {
  content: "\f52d"
}

.fa-feather-alt:before {
  content: "\f56b"
}

.fa-fedex:before {
  content: "\f797"
}

.fa-fedora:before {
  content: "\f798"
}

.fa-female:before {
  content: "\f182"
}

.fa-field-hockey:before {
  content: "\f44c"
}

.fa-fighter-jet:before {
  content: "\f0fb"
}

.fa-figma:before {
  content: "\f799"
}

.fa-file:before {
  content: "\f15b"
}

.fa-file-alt:before {
  content: "\f15c"
}

.fa-file-archive:before {
  content: "\f1c6"
}

.fa-file-audio:before {
  content: "\f1c7"
}

.fa-file-certificate:before {
  content: "\f5f3"
}

.fa-file-chart-line:before {
  content: "\f659"
}

.fa-file-chart-pie:before {
  content: "\f65a"
}

.fa-file-check:before {
  content: "\f316"
}

.fa-file-code:before {
  content: "\f1c9"
}

.fa-file-contract:before {
  content: "\f56c"
}

.fa-file-csv:before {
  content: "\f6dd"
}

.fa-file-download:before {
  content: "\f56d"
}

.fa-file-edit:before {
  content: "\f31c"
}

.fa-file-excel:before {
  content: "\f1c3"
}

.fa-file-exclamation:before {
  content: "\f31a"
}

.fa-file-export:before {
  content: "\f56e"
}

.fa-file-image:before {
  content: "\f1c5"
}

.fa-file-import:before {
  content: "\f56f"
}

.fa-file-invoice:before {
  content: "\f570"
}

.fa-file-invoice-dollar:before {
  content: "\f571"
}

.fa-file-medical:before {
  content: "\f477"
}

.fa-file-medical-alt:before {
  content: "\f478"
}

.fa-file-minus:before {
  content: "\f318"
}

.fa-file-music:before {
  content: "\f8b6"
}

.fa-file-pdf:before {
  content: "\f1c1"
}

.fa-file-plus:before {
  content: "\f319"
}

.fa-file-powerpoint:before {
  content: "\f1c4"
}

.fa-file-prescription:before {
  content: "\f572"
}

.fa-file-search:before {
  content: "\f865"
}

.fa-file-signature:before {
  content: "\f573"
}

.fa-file-spreadsheet:before {
  content: "\f65b"
}

.fa-file-times:before {
  content: "\f317"
}

.fa-file-upload:before {
  content: "\f574"
}

.fa-file-user:before {
  content: "\f65c"
}

.fa-file-video:before {
  content: "\f1c8"
}

.fa-file-word:before {
  content: "\f1c2"
}

.fa-files-medical:before {
  content: "\f7fd"
}

.fa-fill:before {
  content: "\f575"
}

.fa-fill-drip:before {
  content: "\f576"
}

.fa-film:before {
  content: "\f008"
}

.fa-film-alt:before {
  content: "\f3a0"
}

.fa-film-canister:before {
  content: "\f8b7"
}

.fa-filter:before {
  content: "\f0b0"
}

.fa-fingerprint:before {
  content: "\f577"
}

.fa-fire:before {
  content: "\f06d"
}

.fa-fire-alt:before {
  content: "\f7e4"
}

.fa-fire-extinguisher:before {
  content: "\f134"
}

.fa-fire-smoke:before {
  content: "\f74b"
}

.fa-firefox:before {
  content: "\f269"
}

.fa-firefox-browser:before {
  content: "\f907"
}

.fa-fireplace:before {
  content: "\f79a"
}

.fa-first-aid:before {
  content: "\f479"
}

.fa-first-order:before {
  content: "\f2b0"
}

.fa-first-order-alt:before {
  content: "\f50a"
}

.fa-firstdraft:before {
  content: "\f3a1"
}

.fa-fish:before {
  content: "\f578"
}

.fa-fish-cooked:before {
  content: "\f7fe"
}

.fa-fist-raised:before {
  content: "\f6de"
}

.fa-flag:before {
  content: "\f024"
}

.fa-flag-alt:before {
  content: "\f74c"
}

.fa-flag-checkered:before {
  content: "\f11e"
}

.fa-flag-usa:before {
  content: "\f74d"
}

.fa-flame:before {
  content: "\f6df"
}

.fa-flashlight:before {
  content: "\f8b8"
}

.fa-flask:before {
  content: "\f0c3"
}

.fa-flask-poison:before {
  content: "\f6e0"
}

.fa-flask-potion:before {
  content: "\f6e1"
}

.fa-flickr:before {
  content: "\f16e"
}

.fa-flipboard:before {
  content: "\f44d"
}

.fa-flower:before {
  content: "\f7ff"
}

.fa-flower-daffodil:before {
  content: "\f800"
}

.fa-flower-tulip:before {
  content: "\f801"
}

.fa-flushed:before {
  content: "\f579"
}

.fa-flute:before {
  content: "\f8b9"
}

.fa-flux-capacitor:before {
  content: "\f8ba"
}

.fa-fly:before {
  content: "\f417"
}

.fa-fog:before {
  content: "\f74e"
}

.fa-folder:before {
  content: "\f07b"
}

.fa-folder-download:before {
  content: "\f953"
}

.fa-folder-minus:before {
  content: "\f65d"
}

.fa-folder-open:before {
  content: "\f07c"
}

.fa-folder-plus:before {
  content: "\f65e"
}

.fa-folder-times:before {
  content: "\f65f"
}

.fa-folder-tree:before {
  content: "\f802"
}

.fa-folder-upload:before {
  content: "\f954"
}

.fa-folders:before {
  content: "\f660"
}

.fa-font:before {
  content: "\f031"
}

.fa-font-awesome:before {
  content: "\f2b4"
}

.fa-font-awesome-alt:before {
  content: "\f35c"
}

.fa-font-awesome-flag:before {
  content: "\f425"
}

.fa-font-awesome-logo-full:before {
  content: "\f4e6"
}

.fa-font-case:before {
  content: "\f866"
}

.fa-fonticons:before {
  content: "\f280"
}

.fa-fonticons-fi:before {
  content: "\f3a2"
}

.fa-football-ball:before {
  content: "\f44e"
}

.fa-football-helmet:before {
  content: "\f44f"
}

.fa-forklift:before {
  content: "\f47a"
}

.fa-fort-awesome:before {
  content: "\f286"
}

.fa-fort-awesome-alt:before {
  content: "\f3a3"
}

.fa-forumbee:before {
  content: "\f211"
}

.fa-forward:before {
  content: "\f04e"
}

.fa-foursquare:before {
  content: "\f180"
}

.fa-fragile:before {
  content: "\f4bb"
}

.fa-free-code-camp:before {
  content: "\f2c5"
}

.fa-freebsd:before {
  content: "\f3a4"
}

.fa-french-fries:before {
  content: "\f803"
}

.fa-frog:before {
  content: "\f52e"
}

.fa-frosty-head:before {
  content: "\f79b"
}

.fa-frown:before {
  content: "\f119"
}

.fa-frown-open:before {
  content: "\f57a"
}

.fa-fulcrum:before {
  content: "\f50b"
}

.fa-function:before {
  content: "\f661"
}

.fa-funnel-dollar:before {
  content: "\f662"
}

.fa-futbol:before {
  content: "\f1e3"
}

.fa-galactic-republic:before {
  content: "\f50c"
}

.fa-galactic-senate:before {
  content: "\f50d"
}

.fa-galaxy:before {
  content: "\f908"
}

.fa-game-board:before {
  content: "\f867"
}

.fa-game-board-alt:before {
  content: "\f868"
}

.fa-game-console-handheld:before {
  content: "\f8bb"
}

.fa-gamepad:before {
  content: "\f11b"
}

.fa-gamepad-alt:before {
  content: "\f8bc"
}

.fa-garage:before {
  content: "\f909"
}

.fa-garage-car:before {
  content: "\f90a"
}

.fa-garage-open:before {
  content: "\f90b"
}

.fa-gas-pump:before {
  content: "\f52f"
}

.fa-gas-pump-slash:before {
  content: "\f5f4"
}

.fa-gavel:before {
  content: "\f0e3"
}

.fa-gem:before {
  content: "\f3a5"
}

.fa-genderless:before {
  content: "\f22d"
}

.fa-get-pocket:before {
  content: "\f265"
}

.fa-gg:before {
  content: "\f260"
}

.fa-gg-circle:before {
  content: "\f261"
}

.fa-ghost:before {
  content: "\f6e2"
}

.fa-gift:before {
  content: "\f06b"
}

.fa-gift-card:before {
  content: "\f663"
}

.fa-gifts:before {
  content: "\f79c"
}

.fa-gingerbread-man:before {
  content: "\f79d"
}

.fa-git:before {
  content: "\f1d3"
}

.fa-git-alt:before {
  content: "\f841"
}

.fa-git-square:before {
  content: "\f1d2"
}

.fa-github:before {
  content: "\f09b"
}

.fa-github-alt:before {
  content: "\f113"
}

.fa-github-square:before {
  content: "\f092"
}

.fa-gitkraken:before {
  content: "\f3a6"
}

.fa-gitlab:before {
  content: "\f296"
}

.fa-gitter:before {
  content: "\f426"
}

.fa-glass:before {
  content: "\f804"
}

.fa-glass-champagne:before {
  content: "\f79e"
}

.fa-glass-cheers:before {
  content: "\f79f"
}

.fa-glass-citrus:before {
  content: "\f869"
}

.fa-glass-martini:before {
  content: "\f000"
}

.fa-glass-martini-alt:before {
  content: "\f57b"
}

.fa-glass-whiskey:before {
  content: "\f7a0"
}

.fa-glass-whiskey-rocks:before {
  content: "\f7a1"
}

.fa-glasses:before {
  content: "\f530"
}

.fa-glasses-alt:before {
  content: "\f5f5"
}

.fa-glide:before {
  content: "\f2a5"
}

.fa-glide-g:before {
  content: "\f2a6"
}

.fa-globe:before {
  content: "\f0ac"
}

.fa-globe-africa:before {
  content: "\f57c"
}

.fa-globe-americas:before {
  content: "\f57d"
}

.fa-globe-asia:before {
  content: "\f57e"
}

.fa-globe-europe:before {
  content: "\f7a2"
}

.fa-globe-snow:before {
  content: "\f7a3"
}

.fa-globe-stand:before {
  content: "\f5f6"
}

.fa-gofore:before {
  content: "\f3a7"
}

.fa-golf-ball:before {
  content: "\f450"
}

.fa-golf-club:before {
  content: "\f451"
}

.fa-goodreads:before {
  content: "\f3a8"
}

.fa-goodreads-g:before {
  content: "\f3a9"
}

.fa-google:before {
  content: "\f1a0"
}

.fa-google-drive:before {
  content: "\f3aa"
}

.fa-google-play:before {
  content: "\f3ab"
}

.fa-google-plus:before {
  content: "\f2b3"
}

.fa-google-plus-g:before {
  content: "\f0d5"
}

.fa-google-plus-square:before {
  content: "\f0d4"
}

.fa-google-wallet:before {
  content: "\f1ee"
}

.fa-gopuram:before {
  content: "\f664"
}

.fa-graduation-cap:before {
  content: "\f19d"
}

.fa-gramophone:before {
  content: "\f8bd"
}

.fa-gratipay:before {
  content: "\f184"
}

.fa-grav:before {
  content: "\f2d6"
}

.fa-greater-than:before {
  content: "\f531"
}

.fa-greater-than-equal:before {
  content: "\f532"
}

.fa-grimace:before {
  content: "\f57f"
}

.fa-grin:before {
  content: "\f580"
}

.fa-grin-alt:before {
  content: "\f581"
}

.fa-grin-beam:before {
  content: "\f582"
}

.fa-grin-beam-sweat:before {
  content: "\f583"
}

.fa-grin-hearts:before {
  content: "\f584"
}

.fa-grin-squint:before {
  content: "\f585"
}

.fa-grin-squint-tears:before {
  content: "\f586"
}

.fa-grin-stars:before {
  content: "\f587"
}

.fa-grin-tears:before {
  content: "\f588"
}

.fa-grin-tongue:before {
  content: "\f589"
}

.fa-grin-tongue-squint:before {
  content: "\f58a"
}

.fa-grin-tongue-wink:before {
  content: "\f58b"
}

.fa-grin-wink:before {
  content: "\f58c"
}

.fa-grip-horizontal:before {
  content: "\f58d"
}

.fa-grip-lines:before {
  content: "\f7a4"
}

.fa-grip-lines-vertical:before {
  content: "\f7a5"
}

.fa-grip-vertical:before {
  content: "\f58e"
}

.fa-gripfire:before {
  content: "\f3ac"
}

.fa-grunt:before {
  content: "\f3ad"
}

.fa-guitar:before {
  content: "\f7a6"
}

.fa-guitar-electric:before {
  content: "\f8be"
}

.fa-guitars:before {
  content: "\f8bf"
}

.fa-gulp:before {
  content: "\f3ae"
}

.fa-h-square:before {
  content: "\f0fd"
}

.fa-h1:before {
  content: "\f313"
}

.fa-h2:before {
  content: "\f314"
}

.fa-h3:before {
  content: "\f315"
}

.fa-h4:before {
  content: "\f86a"
}

.fa-hacker-news:before {
  content: "\f1d4"
}

.fa-hacker-news-square:before {
  content: "\f3af"
}

.fa-hackerrank:before {
  content: "\f5f7"
}

.fa-hamburger:before {
  content: "\f805"
}

.fa-hammer:before {
  content: "\f6e3"
}

.fa-hammer-war:before {
  content: "\f6e4"
}

.fa-hamsa:before {
  content: "\f665"
}

.fa-hand-heart:before {
  content: "\f4bc"
}

.fa-hand-holding:before {
  content: "\f4bd"
}

.fa-hand-holding-box:before {
  content: "\f47b"
}

.fa-hand-holding-heart:before {
  content: "\f4be"
}

.fa-hand-holding-magic:before {
  content: "\f6e5"
}

.fa-hand-holding-medical:before {
  content: "\f95c"
}

.fa-hand-holding-seedling:before {
  content: "\f4bf"
}

.fa-hand-holding-usd:before {
  content: "\f4c0"
}

.fa-hand-holding-water:before {
  content: "\f4c1"
}

.fa-hand-lizard:before {
  content: "\f258"
}

.fa-hand-middle-finger:before {
  content: "\f806"
}

.fa-hand-paper:before {
  content: "\f256"
}

.fa-hand-peace:before {
  content: "\f25b"
}

.fa-hand-point-down:before {
  content: "\f0a7"
}

.fa-hand-point-left:before {
  content: "\f0a5"
}

.fa-hand-point-right:before {
  content: "\f0a4"
}

.fa-hand-point-up:before {
  content: "\f0a6"
}

.fa-hand-pointer:before {
  content: "\f25a"
}

.fa-hand-receiving:before {
  content: "\f47c"
}

.fa-hand-rock:before {
  content: "\f255"
}

.fa-hand-scissors:before {
  content: "\f257"
}

.fa-hand-sparkles:before {
  content: "\f95d"
}

.fa-hand-spock:before {
  content: "\f259"
}

.fa-hands:before {
  content: "\f4c2"
}

.fa-hands-heart:before {
  content: "\f4c3"
}

.fa-hands-helping:before {
  content: "\f4c4"
}

.fa-hands-usd:before {
  content: "\f4c5"
}

.fa-hands-wash:before {
  content: "\f95e"
}

.fa-handshake:before {
  content: "\f2b5"
}

.fa-handshake-alt:before {
  content: "\f4c6"
}

.fa-handshake-alt-slash:before {
  content: "\f95f"
}

.fa-handshake-slash:before {
  content: "\f960"
}

.fa-hanukiah:before {
  content: "\f6e6"
}

.fa-hard-hat:before {
  content: "\f807"
}

.fa-hashtag:before {
  content: "\f292"
}

.fa-hat-chef:before {
  content: "\f86b"
}

.fa-hat-cowboy:before {
  content: "\f8c0"
}

.fa-hat-cowboy-side:before {
  content: "\f8c1"
}

.fa-hat-santa:before {
  content: "\f7a7"
}

.fa-hat-winter:before {
  content: "\f7a8"
}

.fa-hat-witch:before {
  content: "\f6e7"
}

.fa-hat-wizard:before {
  content: "\f6e8"
}

.fa-hdd:before {
  content: "\f0a0"
}

.fa-head-side:before {
  content: "\f6e9"
}

.fa-head-side-brain:before {
  content: "\f808"
}

.fa-head-side-cough:before {
  content: "\f961"
}

.fa-head-side-cough-slash:before {
  content: "\f962"
}

.fa-head-side-headphones:before {
  content: "\f8c2"
}

.fa-head-side-mask:before {
  content: "\f963"
}

.fa-head-side-medical:before {
  content: "\f809"
}

.fa-head-side-virus:before {
  content: "\f964"
}

.fa-head-vr:before {
  content: "\f6ea"
}

.fa-heading:before {
  content: "\f1dc"
}

.fa-headphones:before {
  content: "\f025"
}

.fa-headphones-alt:before {
  content: "\f58f"
}

.fa-headset:before {
  content: "\f590"
}

.fa-heart:before {
  content: "\f004"
}

.fa-heart-broken:before {
  content: "\f7a9"
}

.fa-heart-circle:before {
  content: "\f4c7"
}

.fa-heart-rate:before {
  content: "\f5f8"
}

.fa-heart-square:before {
  content: "\f4c8"
}

.fa-heartbeat:before {
  content: "\f21e"
}

.fa-heat:before {
  content: "\f90c"
}

.fa-helicopter:before {
  content: "\f533"
}

.fa-helmet-battle:before {
  content: "\f6eb"
}

.fa-hexagon:before {
  content: "\f312"
}

.fa-highlighter:before {
  content: "\f591"
}

.fa-hiking:before {
  content: "\f6ec"
}

.fa-hippo:before {
  content: "\f6ed"
}

.fa-hips:before {
  content: "\f452"
}

.fa-hire-a-helper:before {
  content: "\f3b0"
}

.fa-history:before {
  content: "\f1da"
}

.fa-hockey-mask:before {
  content: "\f6ee"
}

.fa-hockey-puck:before {
  content: "\f453"
}

.fa-hockey-sticks:before {
  content: "\f454"
}

.fa-holly-berry:before {
  content: "\f7aa"
}

.fa-home:before {
  content: "\f015"
}

.fa-home-alt:before {
  content: "\f80a"
}

.fa-home-heart:before {
  content: "\f4c9"
}

.fa-home-lg:before {
  content: "\f80b"
}

.fa-home-lg-alt:before {
  content: "\f80c"
}

.fa-hood-cloak:before {
  content: "\f6ef"
}

.fa-hooli:before {
  content: "\f427"
}

.fa-horizontal-rule:before {
  content: "\f86c"
}

.fa-hornbill:before {
  content: "\f592"
}

.fa-horse:before {
  content: "\f6f0"
}

.fa-horse-head:before {
  content: "\f7ab"
}

.fa-horse-saddle:before {
  content: "\f8c3"
}

.fa-hospital:before {
  content: "\f0f8"
}

.fa-hospital-alt:before {
  content: "\f47d"
}

.fa-hospital-symbol:before {
  content: "\f47e"
}

.fa-hospital-user:before {
  content: "\f80d"
}

.fa-hospitals:before {
  content: "\f80e"
}

.fa-hot-tub:before {
  content: "\f593"
}

.fa-hotdog:before {
  content: "\f80f"
}

.fa-hotel:before {
  content: "\f594"
}

.fa-hotjar:before {
  content: "\f3b1"
}

.fa-hourglass:before {
  content: "\f254"
}

.fa-hourglass-end:before {
  content: "\f253"
}

.fa-hourglass-half:before {
  content: "\f252"
}

.fa-hourglass-start:before {
  content: "\f251"
}

.fa-house:before {
  content: "\f90d"
}

.fa-house-damage:before {
  content: "\f6f1"
}

.fa-house-day:before {
  content: "\f90e"
}

.fa-house-flood:before {
  content: "\f74f"
}

.fa-house-leave:before {
  content: "\f90f"
}

.fa-house-night:before {
  content: "\f910"
}

.fa-house-return:before {
  content: "\f911"
}

.fa-house-signal:before {
  content: "\f912"
}

.fa-house-user:before {
  content: "\f965"
}

.fa-houzz:before {
  content: "\f27c"
}

.fa-hryvnia:before {
  content: "\f6f2"
}

.fa-html5:before {
  content: "\f13b"
}

.fa-hubspot:before {
  content: "\f3b2"
}

.fa-humidity:before {
  content: "\f750"
}

.fa-hurricane:before {
  content: "\f751"
}

.fa-i-cursor:before {
  content: "\f246"
}

.fa-ice-cream:before {
  content: "\f810"
}

.fa-ice-skate:before {
  content: "\f7ac"
}

.fa-icicles:before {
  content: "\f7ad"
}

.fa-icons:before {
  content: "\f86d"
}

.fa-icons-alt:before {
  content: "\f86e"
}

.fa-id-badge:before {
  content: "\f2c1"
}

.fa-id-card:before {
  content: "\f2c2"
}

.fa-id-card-alt:before {
  content: "\f47f"
}

.fa-ideal:before {
  content: "\f913"
}

.fa-igloo:before {
  content: "\f7ae"
}

.fa-image:before {
  content: "\f03e"
}

.fa-image-polaroid:before {
  content: "\f8c4"
}

.fa-images:before {
  content: "\f302"
}

.fa-imdb:before {
  content: "\f2d8"
}

.fa-inbox:before {
  content: "\f01c"
}

.fa-inbox-in:before {
  content: "\f310"
}

.fa-inbox-out:before {
  content: "\f311"
}

.fa-indent:before {
  content: "\f03c"
}

.fa-industry:before {
  content: "\f275"
}

.fa-industry-alt:before {
  content: "\f3b3"
}

.fa-infinity:before {
  content: "\f534"
}

.fa-info:before {
  content: "\f129"
}

.fa-info-circle:before {
  content: "\f05a"
}

.fa-info-square:before {
  content: "\f30f"
}

.fa-inhaler:before {
  content: "\f5f9"
}

.fa-instagram:before {
  content: "\f16d"
}

.fa-instagram-square:before {
  content: "\f955"
}

.fa-integral:before {
  content: "\f667"
}

.fa-intercom:before {
  content: "\f7af"
}

.fa-internet-explorer:before {
  content: "\f26b"
}

.fa-intersection:before {
  content: "\f668"
}

.fa-inventory:before {
  content: "\f480"
}

.fa-invision:before {
  content: "\f7b0"
}

.fa-ioxhost:before {
  content: "\f208"
}

.fa-island-tropical:before {
  content: "\f811"
}

.fa-italic:before {
  content: "\f033"
}

.fa-itch-io:before {
  content: "\f83a"
}

.fa-itunes:before {
  content: "\f3b4"
}

.fa-itunes-note:before {
  content: "\f3b5"
}

.fa-jack-o-lantern:before {
  content: "\f30e"
}

.fa-java:before {
  content: "\f4e4"
}

.fa-jedi:before {
  content: "\f669"
}

.fa-jedi-order:before {
  content: "\f50e"
}

.fa-jenkins:before {
  content: "\f3b6"
}

.fa-jira:before {
  content: "\f7b1"
}

.fa-joget:before {
  content: "\f3b7"
}

.fa-joint:before {
  content: "\f595"
}

.fa-joomla:before {
  content: "\f1aa"
}

.fa-journal-whills:before {
  content: "\f66a"
}

.fa-joystick:before {
  content: "\f8c5"
}

.fa-js:before {
  content: "\f3b8"
}

.fa-js-square:before {
  content: "\f3b9"
}

.fa-jsfiddle:before {
  content: "\f1cc"
}

.fa-jug:before {
  content: "\f8c6"
}

.fa-kaaba:before {
  content: "\f66b"
}

.fa-kaggle:before {
  content: "\f5fa"
}

.fa-kazoo:before {
  content: "\f8c7"
}

.fa-kerning:before {
  content: "\f86f"
}

.fa-key:before {
  content: "\f084"
}

.fa-key-skeleton:before {
  content: "\f6f3"
}

.fa-keybase:before {
  content: "\f4f5"
}

.fa-keyboard:before {
  content: "\f11c"
}

.fa-keycdn:before {
  content: "\f3ba"
}

.fa-keynote:before {
  content: "\f66c"
}

.fa-khanda:before {
  content: "\f66d"
}

.fa-kickstarter:before {
  content: "\f3bb"
}

.fa-kickstarter-k:before {
  content: "\f3bc"
}

.fa-kidneys:before {
  content: "\f5fb"
}

.fa-kiss:before {
  content: "\f596"
}

.fa-kiss-beam:before {
  content: "\f597"
}

.fa-kiss-wink-heart:before {
  content: "\f598"
}

.fa-kite:before {
  content: "\f6f4"
}

.fa-kiwi-bird:before {
  content: "\f535"
}

.fa-knife-kitchen:before {
  content: "\f6f5"
}

.fa-korvue:before {
  content: "\f42f"
}

.fa-lambda:before {
  content: "\f66e"
}

.fa-lamp:before {
  content: "\f4ca"
}

.fa-lamp-desk:before {
  content: "\f914"
}

.fa-lamp-floor:before {
  content: "\f915"
}

.fa-landmark:before {
  content: "\f66f"
}

.fa-landmark-alt:before {
  content: "\f752"
}

.fa-language:before {
  content: "\f1ab"
}

.fa-laptop:before {
  content: "\f109"
}

.fa-laptop-code:before {
  content: "\f5fc"
}

.fa-laptop-house:before {
  content: "\f966"
}

.fa-laptop-medical:before {
  content: "\f812"
}

.fa-laravel:before {
  content: "\f3bd"
}

.fa-lasso:before {
  content: "\f8c8"
}

.fa-lastfm:before {
  content: "\f202"
}

.fa-lastfm-square:before {
  content: "\f203"
}

.fa-laugh:before {
  content: "\f599"
}

.fa-laugh-beam:before {
  content: "\f59a"
}

.fa-laugh-squint:before {
  content: "\f59b"
}

.fa-laugh-wink:before {
  content: "\f59c"
}

.fa-layer-group:before {
  content: "\f5fd"
}

.fa-layer-minus:before {
  content: "\f5fe"
}

.fa-layer-plus:before {
  content: "\f5ff"
}

.fa-leaf:before {
  content: "\f06c"
}

.fa-leaf-heart:before {
  content: "\f4cb"
}

.fa-leaf-maple:before {
  content: "\f6f6"
}

.fa-leaf-oak:before {
  content: "\f6f7"
}

.fa-leanpub:before {
  content: "\f212"
}

.fa-lemon:before {
  content: "\f094"
}

.fa-less:before {
  content: "\f41d"
}

.fa-less-than:before {
  content: "\f536"
}

.fa-less-than-equal:before {
  content: "\f537"
}

.fa-level-down:before {
  content: "\f149"
}

.fa-level-down-alt:before {
  content: "\f3be"
}

.fa-level-up:before {
  content: "\f148"
}

.fa-level-up-alt:before {
  content: "\f3bf"
}

.fa-life-ring:before {
  content: "\f1cd"
}

.fa-light-ceiling:before {
  content: "\f916"
}

.fa-light-switch:before {
  content: "\f917"
}

.fa-light-switch-off:before {
  content: "\f918"
}

.fa-light-switch-on:before {
  content: "\f919"
}

.fa-lightbulb:before {
  content: "\f0eb"
}

.fa-lightbulb-dollar:before {
  content: "\f670"
}

.fa-lightbulb-exclamation:before {
  content: "\f671"
}

.fa-lightbulb-on:before {
  content: "\f672"
}

.fa-lightbulb-slash:before {
  content: "\f673"
}

.fa-lights-holiday:before {
  content: "\f7b2"
}

.fa-line:before {
  content: "\f3c0"
}

.fa-line-columns:before {
  content: "\f870"
}

.fa-line-height:before {
  content: "\f871"
}

.fa-link:before {
  content: "\f0c1"
}

.fa-linkedin:before {
  content: "\f08c"
}

.fa-linkedin-in:before {
  content: "\f0e1"
}

.fa-linode:before {
  content: "\f2b8"
}

.fa-linux:before {
  content: "\f17c"
}

.fa-lips:before {
  content: "\f600"
}

.fa-lira-sign:before {
  content: "\f195"
}

.fa-list:before {
  content: "\f03a"
}

.fa-list-alt:before {
  content: "\f022"
}

.fa-list-music:before {
  content: "\f8c9"
}

.fa-list-ol:before {
  content: "\f0cb"
}

.fa-list-ul:before {
  content: "\f0ca"
}

.fa-location:before {
  content: "\f601"
}

.fa-location-arrow:before {
  content: "\f124"
}

.fa-location-circle:before {
  content: "\f602"
}

.fa-location-slash:before {
  content: "\f603"
}

.fa-lock:before {
  content: "\f023"
}

.fa-lock-alt:before {
  content: "\f30d"
}

.fa-lock-open:before {
  content: "\f3c1"
}

.fa-lock-open-alt:before {
  content: "\f3c2"
}

.fa-long-arrow-alt-down:before {
  content: "\f309"
}

.fa-long-arrow-alt-left:before {
  content: "\f30a"
}

.fa-long-arrow-alt-right:before {
  content: "\f30b"
}

.fa-long-arrow-alt-up:before {
  content: "\f30c"
}

.fa-long-arrow-down:before {
  content: "\f175"
}

.fa-long-arrow-left:before {
  content: "\f177"
}

.fa-long-arrow-right:before {
  content: "\f178"
}

.fa-long-arrow-up:before {
  content: "\f176"
}

.fa-loveseat:before {
  content: "\f4cc"
}

.fa-low-vision:before {
  content: "\f2a8"
}

.fa-luchador:before {
  content: "\f455"
}

.fa-luggage-cart:before {
  content: "\f59d"
}

.fa-lungs:before {
  content: "\f604"
}

.fa-lungs-virus:before {
  content: "\f967"
}

.fa-lyft:before {
  content: "\f3c3"
}

.fa-mace:before {
  content: "\f6f8"
}

.fa-magento:before {
  content: "\f3c4"
}

.fa-magic:before {
  content: "\f0d0"
}

.fa-magnet:before {
  content: "\f076"
}

.fa-mail-bulk:before {
  content: "\f674"
}

.fa-mailbox:before {
  content: "\f813"
}

.fa-mailchimp:before {
  content: "\f59e"
}

.fa-male:before {
  content: "\f183"
}

.fa-mandalorian:before {
  content: "\f50f"
}

.fa-mandolin:before {
  content: "\f6f9"
}

.fa-map:before {
  content: "\f279"
}

.fa-map-marked:before {
  content: "\f59f"
}

.fa-map-marked-alt:before {
  content: "\f5a0"
}

.fa-map-marker:before {
  content: "\f041"
}

.fa-map-marker-alt:before {
  content: "\f3c5"
}

.fa-map-marker-alt-slash:before {
  content: "\f605"
}

.fa-map-marker-check:before {
  content: "\f606"
}

.fa-map-marker-edit:before {
  content: "\f607"
}

.fa-map-marker-exclamation:before {
  content: "\f608"
}

.fa-map-marker-minus:before {
  content: "\f609"
}

.fa-map-marker-plus:before {
  content: "\f60a"
}

.fa-map-marker-question:before {
  content: "\f60b"
}

.fa-map-marker-slash:before {
  content: "\f60c"
}

.fa-map-marker-smile:before {
  content: "\f60d"
}

.fa-map-marker-times:before {
  content: "\f60e"
}

.fa-map-pin:before {
  content: "\f276"
}

.fa-map-signs:before {
  content: "\f277"
}

.fa-markdown:before {
  content: "\f60f"
}

.fa-marker:before {
  content: "\f5a1"
}

.fa-mars:before {
  content: "\f222"
}

.fa-mars-double:before {
  content: "\f227"
}

.fa-mars-stroke:before {
  content: "\f229"
}

.fa-mars-stroke-h:before {
  content: "\f22b"
}

.fa-mars-stroke-v:before {
  content: "\f22a"
}

.fa-mask:before {
  content: "\f6fa"
}

.fa-mastodon:before {
  content: "\f4f6"
}

.fa-maxcdn:before {
  content: "\f136"
}

.fa-mdb:before {
  content: "\f8ca"
}

.fa-meat:before {
  content: "\f814"
}

.fa-medal:before {
  content: "\f5a2"
}

.fa-medapps:before {
  content: "\f3c6"
}

.fa-medium:before {
  content: "\f23a"
}

.fa-medium-m:before {
  content: "\f3c7"
}

.fa-medkit:before {
  content: "\f0fa"
}

.fa-medrt:before {
  content: "\f3c8"
}

.fa-meetup:before {
  content: "\f2e0"
}

.fa-megaphone:before {
  content: "\f675"
}

.fa-megaport:before {
  content: "\f5a3"
}

.fa-meh:before {
  content: "\f11a"
}

.fa-meh-blank:before {
  content: "\f5a4"
}

.fa-meh-rolling-eyes:before {
  content: "\f5a5"
}

.fa-memory:before {
  content: "\f538"
}

.fa-mendeley:before {
  content: "\f7b3"
}

.fa-menorah:before {
  content: "\f676"
}

.fa-mercury:before {
  content: "\f223"
}

.fa-meteor:before {
  content: "\f753"
}

.fa-microblog:before {
  content: "\f91a"
}

.fa-microchip:before {
  content: "\f2db"
}

.fa-microphone:before {
  content: "\f130"
}

.fa-microphone-alt:before {
  content: "\f3c9"
}

.fa-microphone-alt-slash:before {
  content: "\f539"
}

.fa-microphone-slash:before {
  content: "\f131"
}

.fa-microphone-stand:before {
  content: "\f8cb"
}

.fa-microscope:before {
  content: "\f610"
}

.fa-microsoft:before {
  content: "\f3ca"
}

.fa-microwave:before {
  content: "\f91b"
}

.fa-mind-share:before {
  content: "\f677"
}

.fa-minus:before {
  content: "\f068"
}

.fa-minus-circle:before {
  content: "\f056"
}

.fa-minus-hexagon:before {
  content: "\f307"
}

.fa-minus-octagon:before {
  content: "\f308"
}

.fa-minus-square:before {
  content: "\f146"
}

.fa-mistletoe:before {
  content: "\f7b4"
}

.fa-mitten:before {
  content: "\f7b5"
}

.fa-mix:before {
  content: "\f3cb"
}

.fa-mixcloud:before {
  content: "\f289"
}

.fa-mixer:before {
  content: "\f956"
}

.fa-mizuni:before {
  content: "\f3cc"
}

.fa-mobile:before {
  content: "\f10b"
}

.fa-mobile-alt:before {
  content: "\f3cd"
}

.fa-mobile-android:before {
  content: "\f3ce"
}

.fa-mobile-android-alt:before {
  content: "\f3cf"
}

.fa-modx:before {
  content: "\f285"
}

.fa-monero:before {
  content: "\f3d0"
}

.fa-money-bill:before {
  content: "\f0d6"
}

.fa-money-bill-alt:before {
  content: "\f3d1"
}

.fa-money-bill-wave:before {
  content: "\f53a"
}

.fa-money-bill-wave-alt:before {
  content: "\f53b"
}

.fa-money-check:before {
  content: "\f53c"
}

.fa-money-check-alt:before {
  content: "\f53d"
}

.fa-money-check-edit:before {
  content: "\f872"
}

.fa-money-check-edit-alt:before {
  content: "\f873"
}

.fa-monitor-heart-rate:before {
  content: "\f611"
}

.fa-monkey:before {
  content: "\f6fb"
}

.fa-monument:before {
  content: "\f5a6"
}

.fa-moon:before {
  content: "\f186"
}

.fa-moon-cloud:before {
  content: "\f754"
}

.fa-moon-stars:before {
  content: "\f755"
}

.fa-mortar-pestle:before {
  content: "\f5a7"
}

.fa-mosque:before {
  content: "\f678"
}

.fa-motorcycle:before {
  content: "\f21c"
}

.fa-mountain:before {
  content: "\f6fc"
}

.fa-mountains:before {
  content: "\f6fd"
}

.fa-mouse:before {
  content: "\f8cc"
}

.fa-mouse-alt:before {
  content: "\f8cd"
}

.fa-mouse-pointer:before {
  content: "\f245"
}

.fa-mp3-player:before {
  content: "\f8ce"
}

.fa-mug:before {
  content: "\f874"
}

.fa-mug-hot:before {
  content: "\f7b6"
}

.fa-mug-marshmallows:before {
  content: "\f7b7"
}

.fa-mug-tea:before {
  content: "\f875"
}

.fa-music:before {
  content: "\f001"
}

.fa-music-alt:before {
  content: "\f8cf"
}

.fa-music-alt-slash:before {
  content: "\f8d0"
}

.fa-music-slash:before {
  content: "\f8d1"
}

.fa-napster:before {
  content: "\f3d2"
}

.fa-narwhal:before {
  content: "\f6fe"
}

.fa-neos:before {
  content: "\f612"
}

.fa-network-wired:before {
  content: "\f6ff"
}

.fa-neuter:before {
  content: "\f22c"
}

.fa-newspaper:before {
  content: "\f1ea"
}

.fa-nimblr:before {
  content: "\f5a8"
}

.fa-node:before {
  content: "\f419"
}

.fa-node-js:before {
  content: "\f3d3"
}

.fa-not-equal:before {
  content: "\f53e"
}

.fa-notes-medical:before {
  content: "\f481"
}

.fa-npm:before {
  content: "\f3d4"
}

.fa-ns8:before {
  content: "\f3d5"
}

.fa-nutritionix:before {
  content: "\f3d6"
}

.fa-object-group:before {
  content: "\f247"
}

.fa-object-ungroup:before {
  content: "\f248"
}

.fa-octagon:before {
  content: "\f306"
}

.fa-odnoklassniki:before {
  content: "\f263"
}

.fa-odnoklassniki-square:before {
  content: "\f264"
}

.fa-oil-can:before {
  content: "\f613"
}

.fa-oil-temp:before {
  content: "\f614"
}

.fa-old-republic:before {
  content: "\f510"
}

.fa-om:before {
  content: "\f679"
}

.fa-omega:before {
  content: "\f67a"
}

.fa-opencart:before {
  content: "\f23d"
}

.fa-openid:before {
  content: "\f19b"
}

.fa-opera:before {
  content: "\f26a"
}

.fa-optin-monster:before {
  content: "\f23c"
}

.fa-orcid:before {
  content: "\f8d2"
}

.fa-ornament:before {
  content: "\f7b8"
}

.fa-osi:before {
  content: "\f41a"
}

.fa-otter:before {
  content: "\f700"
}

.fa-outdent:before {
  content: "\f03b"
}

.fa-outlet:before {
  content: "\f91c"
}

.fa-oven:before {
  content: "\f91d"
}

.fa-overline:before {
  content: "\f876"
}

.fa-page-break:before {
  content: "\f877"
}

.fa-page4:before {
  content: "\f3d7"
}

.fa-pagelines:before {
  content: "\f18c"
}

.fa-pager:before {
  content: "\f815"
}

.fa-paint-brush:before {
  content: "\f1fc"
}

.fa-paint-brush-alt:before {
  content: "\f5a9"
}

.fa-paint-roller:before {
  content: "\f5aa"
}

.fa-palette:before {
  content: "\f53f"
}

.fa-palfed:before {
  content: "\f3d8"
}

.fa-pallet:before {
  content: "\f482"
}

.fa-pallet-alt:before {
  content: "\f483"
}

.fa-paper-plane:before {
  content: "\f1d8"
}

.fa-paperclip:before {
  content: "\f0c6"
}

.fa-parachute-box:before {
  content: "\f4cd"
}

.fa-paragraph:before {
  content: "\f1dd"
}

.fa-paragraph-rtl:before {
  content: "\f878"
}

.fa-parking:before {
  content: "\f540"
}

.fa-parking-circle:before {
  content: "\f615"
}

.fa-parking-circle-slash:before {
  content: "\f616"
}

.fa-parking-slash:before {
  content: "\f617"
}

.fa-passport:before {
  content: "\f5ab"
}

.fa-pastafarianism:before {
  content: "\f67b"
}

.fa-paste:before {
  content: "\f0ea"
}

.fa-patreon:before {
  content: "\f3d9"
}

.fa-pause:before {
  content: "\f04c"
}

.fa-pause-circle:before {
  content: "\f28b"
}

.fa-paw:before {
  content: "\f1b0"
}

.fa-paw-alt:before {
  content: "\f701"
}

.fa-paw-claws:before {
  content: "\f702"
}

.fa-paypal:before {
  content: "\f1ed"
}

.fa-peace:before {
  content: "\f67c"
}

.fa-pegasus:before {
  content: "\f703"
}

.fa-pen:before {
  content: "\f304"
}

.fa-pen-alt:before {
  content: "\f305"
}

.fa-pen-fancy:before {
  content: "\f5ac"
}

.fa-pen-nib:before {
  content: "\f5ad"
}

.fa-pen-square:before {
  content: "\f14b"
}

.fa-pencil:before {
  content: "\f040"
}

.fa-pencil-alt:before {
  content: "\f303"
}

.fa-pencil-paintbrush:before {
  content: "\f618"
}

.fa-pencil-ruler:before {
  content: "\f5ae"
}

.fa-pennant:before {
  content: "\f456"
}

.fa-penny-arcade:before {
  content: "\f704"
}

.fa-people-arrows:before {
  content: "\f968"
}

.fa-people-carry:before {
  content: "\f4ce"
}

.fa-pepper-hot:before {
  content: "\f816"
}

.fa-percent:before {
  content: "\f295"
}

.fa-percentage:before {
  content: "\f541"
}

.fa-periscope:before {
  content: "\f3da"
}

.fa-person-booth:before {
  content: "\f756"
}

.fa-person-carry:before {
  content: "\f4cf"
}

.fa-person-dolly:before {
  content: "\f4d0"
}

.fa-person-dolly-empty:before {
  content: "\f4d1"
}

.fa-person-sign:before {
  content: "\f757"
}

.fa-phabricator:before {
  content: "\f3db"
}

.fa-phoenix-framework:before {
  content: "\f3dc"
}

.fa-phoenix-squadron:before {
  content: "\f511"
}

.fa-phone:before {
  content: "\f095"
}

.fa-phone-alt:before {
  content: "\f879"
}

.fa-phone-laptop:before {
  content: "\f87a"
}

.fa-phone-office:before {
  content: "\f67d"
}

.fa-phone-plus:before {
  content: "\f4d2"
}

.fa-phone-rotary:before {
  content: "\f8d3"
}

.fa-phone-slash:before {
  content: "\f3dd"
}

.fa-phone-square:before {
  content: "\f098"
}

.fa-phone-square-alt:before {
  content: "\f87b"
}

.fa-phone-volume:before {
  content: "\f2a0"
}

.fa-photo-video:before {
  content: "\f87c"
}

.fa-php:before {
  content: "\f457"
}

.fa-pi:before {
  content: "\f67e"
}

.fa-piano:before {
  content: "\f8d4"
}

.fa-piano-keyboard:before {
  content: "\f8d5"
}

.fa-pie:before {
  content: "\f705"
}

.fa-pied-piper:before {
  content: "\f2ae"
}

.fa-pied-piper-alt:before {
  content: "\f1a8"
}

.fa-pied-piper-hat:before {
  content: "\f4e5"
}

.fa-pied-piper-pp:before {
  content: "\f1a7"
}

.fa-pied-piper-square:before {
  content: "\f91e"
}

.fa-pig:before {
  content: "\f706"
}

.fa-piggy-bank:before {
  content: "\f4d3"
}

.fa-pills:before {
  content: "\f484"
}

.fa-pinterest:before {
  content: "\f0d2"
}

.fa-pinterest-p:before {
  content: "\f231"
}

.fa-pinterest-square:before {
  content: "\f0d3"
}

.fa-pizza:before {
  content: "\f817"
}

.fa-pizza-slice:before {
  content: "\f818"
}

.fa-place-of-worship:before {
  content: "\f67f"
}

.fa-plane:before {
  content: "\f072"
}

.fa-plane-alt:before {
  content: "\f3de"
}

.fa-plane-arrival:before {
  content: "\f5af"
}

.fa-plane-departure:before {
  content: "\f5b0"
}

.fa-plane-slash:before {
  content: "\f969"
}

.fa-planet-moon:before {
  content: "\f91f"
}

.fa-planet-ringed:before {
  content: "\f920"
}

.fa-play:before {
  content: "\f04b"
}

.fa-play-circle:before {
  content: "\f144"
}

.fa-playstation:before {
  content: "\f3df"
}

.fa-plug:before {
  content: "\f1e6"
}

.fa-plus:before {
  content: "\f067"
}

.fa-plus-circle:before {
  content: "\f055"
}

.fa-plus-hexagon:before {
  content: "\f300"
}

.fa-plus-octagon:before {
  content: "\f301"
}

.fa-plus-square:before {
  content: "\f0fe"
}

.fa-podcast:before {
  content: "\f2ce"
}

.fa-podium:before {
  content: "\f680"
}

.fa-podium-star:before {
  content: "\f758"
}

.fa-police-box:before {
  content: "\f921"
}

.fa-poll:before {
  content: "\f681"
}

.fa-poll-h:before {
  content: "\f682"
}

.fa-poll-people:before {
  content: "\f759"
}

.fa-poo:before {
  content: "\f2fe"
}

.fa-poo-storm:before {
  content: "\f75a"
}

.fa-poop:before {
  content: "\f619"
}

.fa-popcorn:before {
  content: "\f819"
}

.fa-portal-enter:before {
  content: "\f922"
}

.fa-portal-exit:before {
  content: "\f923"
}

.fa-portrait:before {
  content: "\f3e0"
}

.fa-pound-sign:before {
  content: "\f154"
}

.fa-power-off:before {
  content: "\f011"
}

.fa-pray:before {
  content: "\f683"
}

.fa-praying-hands:before {
  content: "\f684"
}

.fa-prescription:before {
  content: "\f5b1"
}

.fa-prescription-bottle:before {
  content: "\f485"
}

.fa-prescription-bottle-alt:before {
  content: "\f486"
}

.fa-presentation:before {
  content: "\f685"
}

.fa-print:before {
  content: "\f02f"
}

.fa-print-search:before {
  content: "\f81a"
}

.fa-print-slash:before {
  content: "\f686"
}

.fa-procedures:before {
  content: "\f487"
}

.fa-product-hunt:before {
  content: "\f288"
}

.fa-project-diagram:before {
  content: "\f542"
}

.fa-projector:before {
  content: "\f8d6"
}

.fa-pump-medical:before {
  content: "\f96a"
}

.fa-pump-soap:before {
  content: "\f96b"
}

.fa-pumpkin:before {
  content: "\f707"
}

.fa-pushed:before {
  content: "\f3e1"
}

.fa-puzzle-piece:before {
  content: "\f12e"
}

.fa-python:before {
  content: "\f3e2"
}

.fa-qq:before {
  content: "\f1d6"
}

.fa-qrcode:before {
  content: "\f029"
}

.fa-question:before {
  content: "\f128"
}

.fa-question-circle:before {
  content: "\f059"
}

.fa-question-square:before {
  content: "\f2fd"
}

.fa-quidditch:before {
  content: "\f458"
}

.fa-quinscape:before {
  content: "\f459"
}

.fa-quora:before {
  content: "\f2c4"
}

.fa-quote-left:before {
  content: "\f10d"
}

.fa-quote-right:before {
  content: "\f10e"
}

.fa-quran:before {
  content: "\f687"
}

.fa-r-project:before {
  content: "\f4f7"
}

.fa-rabbit:before {
  content: "\f708"
}

.fa-rabbit-fast:before {
  content: "\f709"
}

.fa-racquet:before {
  content: "\f45a"
}

.fa-radar:before {
  content: "\f924"
}

.fa-radiation:before {
  content: "\f7b9"
}

.fa-radiation-alt:before {
  content: "\f7ba"
}

.fa-radio:before {
  content: "\f8d7"
}

.fa-radio-alt:before {
  content: "\f8d8"
}

.fa-rainbow:before {
  content: "\f75b"
}

.fa-raindrops:before {
  content: "\f75c"
}

.fa-ram:before {
  content: "\f70a"
}

.fa-ramp-loading:before {
  content: "\f4d4"
}

.fa-random:before {
  content: "\f074"
}

.fa-raspberry-pi:before {
  content: "\f7bb"
}

.fa-ravelry:before {
  content: "\f2d9"
}

.fa-raygun:before {
  content: "\f925"
}

.fa-react:before {
  content: "\f41b"
}

.fa-reacteurope:before {
  content: "\f75d"
}

.fa-readme:before {
  content: "\f4d5"
}

.fa-rebel:before {
  content: "\f1d0"
}

.fa-receipt:before {
  content: "\f543"
}

.fa-record-vinyl:before {
  content: "\f8d9"
}

.fa-rectangle-landscape:before {
  content: "\f2fa"
}

.fa-rectangle-portrait:before {
  content: "\f2fb"
}

.fa-rectangle-wide:before {
  content: "\f2fc"
}

.fa-recycle:before {
  content: "\f1b8"
}

.fa-red-river:before {
  content: "\f3e3"
}

.fa-reddit:before {
  content: "\f1a1"
}

.fa-reddit-alien:before {
  content: "\f281"
}

.fa-reddit-square:before {
  content: "\f1a2"
}

.fa-redhat:before {
  content: "\f7bc"
}

.fa-redo:before {
  content: "\f01e"
}

.fa-redo-alt:before {
  content: "\f2f9"
}

.fa-refrigerator:before {
  content: "\f926"
}

.fa-registered:before {
  content: "\f25d"
}

.fa-remove-format:before {
  content: "\f87d"
}

.fa-renren:before {
  content: "\f18b"
}

.fa-repeat:before {
  content: "\f363"
}

.fa-repeat-1:before {
  content: "\f365"
}

.fa-repeat-1-alt:before {
  content: "\f366"
}

.fa-repeat-alt:before {
  content: "\f364"
}

.fa-reply:before {
  content: "\f3e5"
}

.fa-reply-all:before {
  content: "\f122"
}

.fa-replyd:before {
  content: "\f3e6"
}

.fa-republican:before {
  content: "\f75e"
}

.fa-researchgate:before {
  content: "\f4f8"
}

.fa-resolving:before {
  content: "\f3e7"
}

.fa-restroom:before {
  content: "\f7bd"
}

.fa-retweet:before {
  content: "\f079"
}

.fa-retweet-alt:before {
  content: "\f361"
}

.fa-rev:before {
  content: "\f5b2"
}

.fa-ribbon:before {
  content: "\f4d6"
}

.fa-ring:before {
  content: "\f70b"
}

.fa-rings-wedding:before {
  content: "\f81b"
}

.fa-road:before {
  content: "\f018"
}

.fa-robot:before {
  content: "\f544"
}

.fa-rocket:before {
  content: "\f135"
}

.fa-rocket-launch:before {
  content: "\f927"
}

.fa-rocketchat:before {
  content: "\f3e8"
}

.fa-rockrms:before {
  content: "\f3e9"
}

.fa-route:before {
  content: "\f4d7"
}

.fa-route-highway:before {
  content: "\f61a"
}

.fa-route-interstate:before {
  content: "\f61b"
}

.fa-router:before {
  content: "\f8da"
}

.fa-rss:before {
  content: "\f09e"
}

.fa-rss-square:before {
  content: "\f143"
}

.fa-ruble-sign:before {
  content: "\f158"
}

.fa-ruler:before {
  content: "\f545"
}

.fa-ruler-combined:before {
  content: "\f546"
}

.fa-ruler-horizontal:before {
  content: "\f547"
}

.fa-ruler-triangle:before {
  content: "\f61c"
}

.fa-ruler-vertical:before {
  content: "\f548"
}

.fa-running:before {
  content: "\f70c"
}

.fa-rupee-sign:before {
  content: "\f156"
}

.fa-rv:before {
  content: "\f7be"
}

.fa-sack:before {
  content: "\f81c"
}

.fa-sack-dollar:before {
  content: "\f81d"
}

.fa-sad-cry:before {
  content: "\f5b3"
}

.fa-sad-tear:before {
  content: "\f5b4"
}

.fa-safari:before {
  content: "\f267"
}

.fa-salad:before {
  content: "\f81e"
}

.fa-salesforce:before {
  content: "\f83b"
}

.fa-sandwich:before {
  content: "\f81f"
}

.fa-sass:before {
  content: "\f41e"
}

.fa-satellite:before {
  content: "\f7bf"
}

.fa-satellite-dish:before {
  content: "\f7c0"
}

.fa-sausage:before {
  content: "\f820"
}

.fa-save:before {
  content: "\f0c7"
}

.fa-sax-hot:before {
  content: "\f8db"
}

.fa-saxophone:before {
  content: "\f8dc"
}

.fa-scalpel:before {
  content: "\f61d"
}

.fa-scalpel-path:before {
  content: "\f61e"
}

.fa-scanner:before {
  content: "\f488"
}

.fa-scanner-image:before {
  content: "\f8f3"
}

.fa-scanner-keyboard:before {
  content: "\f489"
}

.fa-scanner-touchscreen:before {
  content: "\f48a"
}

.fa-scarecrow:before {
  content: "\f70d"
}

.fa-scarf:before {
  content: "\f7c1"
}

.fa-schlix:before {
  content: "\f3ea"
}

.fa-school:before {
  content: "\f549"
}

.fa-screwdriver:before {
  content: "\f54a"
}

.fa-scribd:before {
  content: "\f28a"
}

.fa-scroll:before {
  content: "\f70e"
}

.fa-scroll-old:before {
  content: "\f70f"
}

.fa-scrubber:before {
  content: "\f2f8"
}

.fa-scythe:before {
  content: "\f710"
}

.fa-sd-card:before {
  content: "\f7c2"
}

.fa-search:before {
  content: "\f002"
}

.fa-search-dollar:before {
  content: "\f688"
}

.fa-search-location:before {
  content: "\f689"
}

.fa-search-minus:before {
  content: "\f010"
}

.fa-search-plus:before {
  content: "\f00e"
}

.fa-searchengin:before {
  content: "\f3eb"
}

.fa-seedling:before {
  content: "\f4d8"
}

.fa-sellcast:before {
  content: "\f2da"
}

.fa-sellsy:before {
  content: "\f213"
}

.fa-send-back:before {
  content: "\f87e"
}

.fa-send-backward:before {
  content: "\f87f"
}

.fa-sensor:before {
  content: "\f928"
}

.fa-sensor-alert:before {
  content: "\f929"
}

.fa-sensor-fire:before {
  content: "\f92a"
}

.fa-sensor-on:before {
  content: "\f92b"
}

.fa-sensor-smoke:before {
  content: "\f92c"
}

.fa-server:before {
  content: "\f233"
}

.fa-servicestack:before {
  content: "\f3ec"
}

.fa-shapes:before {
  content: "\f61f"
}

.fa-share:before {
  content: "\f064"
}

.fa-share-all:before {
  content: "\f367"
}

.fa-share-alt:before {
  content: "\f1e0"
}

.fa-share-alt-square:before {
  content: "\f1e1"
}

.fa-share-square:before {
  content: "\f14d"
}

.fa-sheep:before {
  content: "\f711"
}

.fa-shekel-sign:before {
  content: "\f20b"
}

.fa-shield:before {
  content: "\f132"
}

.fa-shield-alt:before {
  content: "\f3ed"
}

.fa-shield-check:before {
  content: "\f2f7"
}

.fa-shield-cross:before {
  content: "\f712"
}

.fa-shield-virus:before {
  content: "\f96c"
}

.fa-ship:before {
  content: "\f21a"
}

.fa-shipping-fast:before {
  content: "\f48b"
}

.fa-shipping-timed:before {
  content: "\f48c"
}

.fa-shirtsinbulk:before {
  content: "\f214"
}

.fa-shish-kebab:before {
  content: "\f821"
}

.fa-shoe-prints:before {
  content: "\f54b"
}

.fa-shopify:before {
  content: "\f957"
}

.fa-shopping-bag:before {
  content: "\f290"
}

.fa-shopping-basket:before {
  content: "\f291"
}

.fa-shopping-cart:before {
  content: "\f07a"
}

.fa-shopware:before {
  content: "\f5b5"
}

.fa-shovel:before {
  content: "\f713"
}

.fa-shovel-snow:before {
  content: "\f7c3"
}

.fa-shower:before {
  content: "\f2cc"
}

.fa-shredder:before {
  content: "\f68a"
}

.fa-shuttle-van:before {
  content: "\f5b6"
}

.fa-shuttlecock:before {
  content: "\f45b"
}

.fa-sickle:before {
  content: "\f822"
}

.fa-sigma:before {
  content: "\f68b"
}

.fa-sign:before {
  content: "\f4d9"
}

.fa-sign-in:before {
  content: "\f090"
}

.fa-sign-in-alt:before {
  content: "\f2f6"
}

.fa-sign-language:before {
  content: "\f2a7"
}

.fa-sign-out:before {
  content: "\f08b"
}

.fa-sign-out-alt:before {
  content: "\f2f5"
}

.fa-signal:before {
  content: "\f012"
}

.fa-signal-1:before {
  content: "\f68c"
}

.fa-signal-2:before {
  content: "\f68d"
}

.fa-signal-3:before {
  content: "\f68e"
}

.fa-signal-4:before {
  content: "\f68f"
}

.fa-signal-alt:before {
  content: "\f690"
}

.fa-signal-alt-1:before {
  content: "\f691"
}

.fa-signal-alt-2:before {
  content: "\f692"
}

.fa-signal-alt-3:before {
  content: "\f693"
}

.fa-signal-alt-slash:before {
  content: "\f694"
}

.fa-signal-slash:before {
  content: "\f695"
}

.fa-signal-stream:before {
  content: "\f8dd"
}

.fa-signature:before {
  content: "\f5b7"
}

.fa-sim-card:before {
  content: "\f7c4"
}

.fa-simplybuilt:before {
  content: "\f215"
}

.fa-sink:before {
  content: "\f96d"
}

.fa-siren:before {
  content: "\f92d"
}

.fa-siren-on:before {
  content: "\f92e"
}

.fa-sistrix:before {
  content: "\f3ee"
}

.fa-sitemap:before {
  content: "\f0e8"
}

.fa-sith:before {
  content: "\f512"
}

.fa-skating:before {
  content: "\f7c5"
}

.fa-skeleton:before {
  content: "\f620"
}

.fa-sketch:before {
  content: "\f7c6"
}

.fa-ski-jump:before {
  content: "\f7c7"
}

.fa-ski-lift:before {
  content: "\f7c8"
}

.fa-skiing:before {
  content: "\f7c9"
}

.fa-skiing-nordic:before {
  content: "\f7ca"
}

.fa-skull:before {
  content: "\f54c"
}

.fa-skull-cow:before {
  content: "\f8de"
}

.fa-skull-crossbones:before {
  content: "\f714"
}

.fa-skyatlas:before {
  content: "\f216"
}

.fa-skype:before {
  content: "\f17e"
}

.fa-slack:before {
  content: "\f198"
}

.fa-slack-hash:before {
  content: "\f3ef"
}

.fa-slash:before {
  content: "\f715"
}

.fa-sledding:before {
  content: "\f7cb"
}

.fa-sleigh:before {
  content: "\f7cc"
}

.fa-sliders-h:before {
  content: "\f1de"
}

.fa-sliders-h-square:before {
  content: "\f3f0"
}

.fa-sliders-v:before {
  content: "\f3f1"
}

.fa-sliders-v-square:before {
  content: "\f3f2"
}

.fa-slideshare:before {
  content: "\f1e7"
}

.fa-smile:before {
  content: "\f118"
}

.fa-smile-beam:before {
  content: "\f5b8"
}

.fa-smile-plus:before {
  content: "\f5b9"
}

.fa-smile-wink:before {
  content: "\f4da"
}

.fa-smog:before {
  content: "\f75f"
}

.fa-smoke:before {
  content: "\f760"
}

.fa-smoking:before {
  content: "\f48d"
}

.fa-smoking-ban:before {
  content: "\f54d"
}

.fa-sms:before {
  content: "\f7cd"
}

.fa-snake:before {
  content: "\f716"
}

.fa-snapchat:before {
  content: "\f2ab"
}

.fa-snapchat-ghost:before {
  content: "\f2ac"
}

.fa-snapchat-square:before {
  content: "\f2ad"
}

.fa-snooze:before {
  content: "\f880"
}

.fa-snow-blowing:before {
  content: "\f761"
}

.fa-snowboarding:before {
  content: "\f7ce"
}

.fa-snowflake:before {
  content: "\f2dc"
}

.fa-snowflakes:before {
  content: "\f7cf"
}

.fa-snowman:before {
  content: "\f7d0"
}

.fa-snowmobile:before {
  content: "\f7d1"
}

.fa-snowplow:before {
  content: "\f7d2"
}

.fa-soap:before {
  content: "\f96e"
}

.fa-socks:before {
  content: "\f696"
}

.fa-solar-panel:before {
  content: "\f5ba"
}

.fa-solar-system:before {
  content: "\f92f"
}

.fa-sort:before {
  content: "\f0dc"
}

.fa-sort-alpha-down:before {
  content: "\f15d"
}

.fa-sort-alpha-down-alt:before {
  content: "\f881"
}

.fa-sort-alpha-up:before {
  content: "\f15e"
}

.fa-sort-alpha-up-alt:before {
  content: "\f882"
}

.fa-sort-alt:before {
  content: "\f883"
}

.fa-sort-amount-down:before {
  content: "\f160"
}

.fa-sort-amount-down-alt:before {
  content: "\f884"
}

.fa-sort-amount-up:before {
  content: "\f161"
}

.fa-sort-amount-up-alt:before {
  content: "\f885"
}

.fa-sort-circle:before {
  content: "\f930"
}

.fa-sort-circle-down:before {
  content: "\f931"
}

.fa-sort-circle-up:before {
  content: "\f932"
}

.fa-sort-down:before {
  content: "\f0dd"
}

.fa-sort-numeric-down:before {
  content: "\f162"
}

.fa-sort-numeric-down-alt:before {
  content: "\f886"
}

.fa-sort-numeric-up:before {
  content: "\f163"
}

.fa-sort-numeric-up-alt:before {
  content: "\f887"
}

.fa-sort-shapes-down:before {
  content: "\f888"
}

.fa-sort-shapes-down-alt:before {
  content: "\f889"
}

.fa-sort-shapes-up:before {
  content: "\f88a"
}

.fa-sort-shapes-up-alt:before {
  content: "\f88b"
}

.fa-sort-size-down:before {
  content: "\f88c"
}

.fa-sort-size-down-alt:before {
  content: "\f88d"
}

.fa-sort-size-up:before {
  content: "\f88e"
}

.fa-sort-size-up-alt:before {
  content: "\f88f"
}

.fa-sort-up:before {
  content: "\f0de"
}

.fa-soundcloud:before {
  content: "\f1be"
}

.fa-soup:before {
  content: "\f823"
}

.fa-sourcetree:before {
  content: "\f7d3"
}

.fa-spa:before {
  content: "\f5bb"
}

.fa-space-shuttle:before {
  content: "\f197"
}

.fa-space-station-moon:before {
  content: "\f933"
}

.fa-space-station-moon-alt:before {
  content: "\f934"
}

.fa-spade:before {
  content: "\f2f4"
}

.fa-sparkles:before {
  content: "\f890"
}

.fa-speakap:before {
  content: "\f3f3"
}

.fa-speaker:before {
  content: "\f8df"
}

.fa-speaker-deck:before {
  content: "\f83c"
}

.fa-speakers:before {
  content: "\f8e0"
}

.fa-spell-check:before {
  content: "\f891"
}

.fa-spider:before {
  content: "\f717"
}

.fa-spider-black-widow:before {
  content: "\f718"
}

.fa-spider-web:before {
  content: "\f719"
}

.fa-spinner:before {
  content: "\f110"
}

.fa-spinner-third:before {
  content: "\f3f4"
}

.fa-splotch:before {
  content: "\f5bc"
}

.fa-spotify:before {
  content: "\f1bc"
}

.fa-spray-can:before {
  content: "\f5bd"
}

.fa-sprinkler:before {
  content: "\f935"
}

.fa-square:before {
  content: "\f0c8"
}

.fa-square-full:before {
  content: "\f45c"
}

.fa-square-root:before {
  content: "\f697"
}

.fa-square-root-alt:before {
  content: "\f698"
}

.fa-squarespace:before {
  content: "\f5be"
}

.fa-squirrel:before {
  content: "\f71a"
}

.fa-stack-exchange:before {
  content: "\f18d"
}

.fa-stack-overflow:before {
  content: "\f16c"
}

.fa-stackpath:before {
  content: "\f842"
}

.fa-staff:before {
  content: "\f71b"
}

.fa-stamp:before {
  content: "\f5bf"
}

.fa-star:before {
  content: "\f005"
}

.fa-star-and-crescent:before {
  content: "\f699"
}

.fa-star-christmas:before {
  content: "\f7d4"
}

.fa-star-exclamation:before {
  content: "\f2f3"
}

.fa-star-half:before {
  content: "\f089"
}

.fa-star-half-alt:before {
  content: "\f5c0"
}

.fa-star-of-david:before {
  content: "\f69a"
}

.fa-star-of-life:before {
  content: "\f621"
}

.fa-star-shooting:before {
  content: "\f936"
}

.fa-starfighter:before {
  content: "\f937"
}

.fa-starfighter-alt:before {
  content: "\f938"
}

.fa-stars:before {
  content: "\f762"
}

.fa-starship:before {
  content: "\f939"
}

.fa-starship-freighter:before {
  content: "\f93a"
}

.fa-staylinked:before {
  content: "\f3f5"
}

.fa-steak:before {
  content: "\f824"
}

.fa-steam:before {
  content: "\f1b6"
}

.fa-steam-square:before {
  content: "\f1b7"
}

.fa-steam-symbol:before {
  content: "\f3f6"
}

.fa-steering-wheel:before {
  content: "\f622"
}

.fa-step-backward:before {
  content: "\f048"
}

.fa-step-forward:before {
  content: "\f051"
}

.fa-stethoscope:before {
  content: "\f0f1"
}

.fa-sticker-mule:before {
  content: "\f3f7"
}

.fa-sticky-note:before {
  content: "\f249"
}

.fa-stocking:before {
  content: "\f7d5"
}

.fa-stomach:before {
  content: "\f623"
}

.fa-stop:before {
  content: "\f04d"
}

.fa-stop-circle:before {
  content: "\f28d"
}

.fa-stopwatch:before {
  content: "\f2f2"
}

.fa-stopwatch-20:before {
  content: "\f96f"
}

.fa-store:before {
  content: "\f54e"
}

.fa-store-alt:before {
  content: "\f54f"
}

.fa-store-alt-slash:before {
  content: "\f970"
}

.fa-store-slash:before {
  content: "\f971"
}

.fa-strava:before {
  content: "\f428"
}

.fa-stream:before {
  content: "\f550"
}

.fa-street-view:before {
  content: "\f21d"
}

.fa-stretcher:before {
  content: "\f825"
}

.fa-strikethrough:before {
  content: "\f0cc"
}

.fa-stripe:before {
  content: "\f429"
}

.fa-stripe-s:before {
  content: "\f42a"
}

.fa-stroopwafel:before {
  content: "\f551"
}

.fa-studiovinari:before {
  content: "\f3f8"
}

.fa-stumbleupon:before {
  content: "\f1a4"
}

.fa-stumbleupon-circle:before {
  content: "\f1a3"
}

.fa-subscript:before {
  content: "\f12c"
}

.fa-subway:before {
  content: "\f239"
}

.fa-suitcase:before {
  content: "\f0f2"
}

.fa-suitcase-rolling:before {
  content: "\f5c1"
}

.fa-sun:before {
  content: "\f185"
}

.fa-sun-cloud:before {
  content: "\f763"
}

.fa-sun-dust:before {
  content: "\f764"
}

.fa-sun-haze:before {
  content: "\f765"
}

.fa-sunglasses:before {
  content: "\f892"
}

.fa-sunrise:before {
  content: "\f766"
}

.fa-sunset:before {
  content: "\f767"
}

.fa-superpowers:before {
  content: "\f2dd"
}

.fa-superscript:before {
  content: "\f12b"
}

.fa-supple:before {
  content: "\f3f9"
}

.fa-surprise:before {
  content: "\f5c2"
}

.fa-suse:before {
  content: "\f7d6"
}

.fa-swatchbook:before {
  content: "\f5c3"
}

.fa-swift:before {
  content: "\f8e1"
}

.fa-swimmer:before {
  content: "\f5c4"
}

.fa-swimming-pool:before {
  content: "\f5c5"
}

.fa-sword:before {
  content: "\f71c"
}

.fa-sword-laser:before {
  content: "\f93b"
}

.fa-sword-laser-alt:before {
  content: "\f93c"
}

.fa-swords:before {
  content: "\f71d"
}

.fa-swords-laser:before {
  content: "\f93d"
}

.fa-symfony:before {
  content: "\f83d"
}

.fa-synagogue:before {
  content: "\f69b"
}

.fa-sync:before {
  content: "\f021"
}

.fa-sync-alt:before {
  content: "\f2f1"
}

.fa-syringe:before {
  content: "\f48e"
}

.fa-table:before {
  content: "\f0ce"
}

.fa-table-tennis:before {
  content: "\f45d"
}

.fa-tablet:before {
  content: "\f10a"
}

.fa-tablet-alt:before {
  content: "\f3fa"
}

.fa-tablet-android:before {
  content: "\f3fb"
}

.fa-tablet-android-alt:before {
  content: "\f3fc"
}

.fa-tablet-rugged:before {
  content: "\f48f"
}

.fa-tablets:before {
  content: "\f490"
}

.fa-tachometer:before {
  content: "\f0e4"
}

.fa-tachometer-alt:before {
  content: "\f3fd"
}

.fa-tachometer-alt-average:before {
  content: "\f624"
}

.fa-tachometer-alt-fast:before {
  content: "\f625"
}

.fa-tachometer-alt-fastest:before {
  content: "\f626"
}

.fa-tachometer-alt-slow:before {
  content: "\f627"
}

.fa-tachometer-alt-slowest:before {
  content: "\f628"
}

.fa-tachometer-average:before {
  content: "\f629"
}

.fa-tachometer-fast:before {
  content: "\f62a"
}

.fa-tachometer-fastest:before {
  content: "\f62b"
}

.fa-tachometer-slow:before {
  content: "\f62c"
}

.fa-tachometer-slowest:before {
  content: "\f62d"
}

.fa-taco:before {
  content: "\f826"
}

.fa-tag:before {
  content: "\f02b"
}

.fa-tags:before {
  content: "\f02c"
}

.fa-tally:before {
  content: "\f69c"
}

.fa-tanakh:before {
  content: "\f827"
}

.fa-tape:before {
  content: "\f4db"
}

.fa-tasks:before {
  content: "\f0ae"
}

.fa-tasks-alt:before {
  content: "\f828"
}

.fa-taxi:before {
  content: "\f1ba"
}

.fa-teamspeak:before {
  content: "\f4f9"
}

.fa-teeth:before {
  content: "\f62e"
}

.fa-teeth-open:before {
  content: "\f62f"
}

.fa-telegram:before {
  content: "\f2c6"
}

.fa-telegram-plane:before {
  content: "\f3fe"
}

.fa-telescope:before {
  content: "\f93e"
}

.fa-temperature-down:before {
  content: "\f93f"
}

.fa-temperature-frigid:before {
  content: "\f768"
}

.fa-temperature-high:before {
  content: "\f769"
}

.fa-temperature-hot:before {
  content: "\f76a"
}

.fa-temperature-low:before {
  content: "\f76b"
}

.fa-temperature-up:before {
  content: "\f940"
}

.fa-tencent-weibo:before {
  content: "\f1d5"
}

.fa-tenge:before {
  content: "\f7d7"
}

.fa-tennis-ball:before {
  content: "\f45e"
}

.fa-terminal:before {
  content: "\f120"
}

.fa-text:before {
  content: "\f893"
}

.fa-text-height:before {
  content: "\f034"
}

.fa-text-size:before {
  content: "\f894"
}

.fa-text-width:before {
  content: "\f035"
}

.fa-th:before {
  content: "\f00a"
}

.fa-th-large:before {
  content: "\f009"
}

.fa-th-list:before {
  content: "\f00b"
}

.fa-the-red-yeti:before {
  content: "\f69d"
}

.fa-theater-masks:before {
  content: "\f630"
}

.fa-themeco:before {
  content: "\f5c6"
}

.fa-themeisle:before {
  content: "\f2b2"
}

.fa-thermometer:before {
  content: "\f491"
}

.fa-thermometer-empty:before {
  content: "\f2cb"
}

.fa-thermometer-full:before {
  content: "\f2c7"
}

.fa-thermometer-half:before {
  content: "\f2c9"
}

.fa-thermometer-quarter:before {
  content: "\f2ca"
}

.fa-thermometer-three-quarters:before {
  content: "\f2c8"
}

.fa-theta:before {
  content: "\f69e"
}

.fa-think-peaks:before {
  content: "\f731"
}

.fa-thumbs-down:before {
  content: "\f165"
}

.fa-thumbs-up:before {
  content: "\f164"
}

.fa-thumbtack:before {
  content: "\f08d"
}

.fa-thunderstorm:before {
  content: "\f76c"
}

.fa-thunderstorm-moon:before {
  content: "\f76d"
}

.fa-thunderstorm-sun:before {
  content: "\f76e"
}

.fa-ticket:before {
  content: "\f145"
}

.fa-ticket-alt:before {
  content: "\f3ff"
}

.fa-tilde:before {
  content: "\f69f"
}

.fa-times:before {
  content: "\f00d"
}

.fa-times-circle:before {
  content: "\f057"
}

.fa-times-hexagon:before {
  content: "\f2ee"
}

.fa-times-octagon:before {
  content: "\f2f0"
}

.fa-times-square:before {
  content: "\f2d3"
}

.fa-tint:before {
  content: "\f043"
}

.fa-tint-slash:before {
  content: "\f5c7"
}

.fa-tire:before {
  content: "\f631"
}

.fa-tire-flat:before {
  content: "\f632"
}

.fa-tire-pressure-warning:before {
  content: "\f633"
}

.fa-tire-rugged:before {
  content: "\f634"
}

.fa-tired:before {
  content: "\f5c8"
}

.fa-toggle-off:before {
  content: "\f204"
}

.fa-toggle-on:before {
  content: "\f205"
}

.fa-toilet:before {
  content: "\f7d8"
}

.fa-toilet-paper:before {
  content: "\f71e"
}

.fa-toilet-paper-alt:before {
  content: "\f71f"
}

.fa-toilet-paper-slash:before {
  content: "\f972"
}

.fa-tombstone:before {
  content: "\f720"
}

.fa-tombstone-alt:before {
  content: "\f721"
}

.fa-toolbox:before {
  content: "\f552"
}

.fa-tools:before {
  content: "\f7d9"
}

.fa-tooth:before {
  content: "\f5c9"
}

.fa-toothbrush:before {
  content: "\f635"
}

.fa-torah:before {
  content: "\f6a0"
}

.fa-torii-gate:before {
  content: "\f6a1"
}

.fa-tornado:before {
  content: "\f76f"
}

.fa-tractor:before {
  content: "\f722"
}

.fa-trade-federation:before {
  content: "\f513"
}

.fa-trademark:before {
  content: "\f25c"
}

.fa-traffic-cone:before {
  content: "\f636"
}

.fa-traffic-light:before {
  content: "\f637"
}

.fa-traffic-light-go:before {
  content: "\f638"
}

.fa-traffic-light-slow:before {
  content: "\f639"
}

.fa-traffic-light-stop:before {
  content: "\f63a"
}

.fa-trailer:before {
  content: "\f941"
}

.fa-train:before {
  content: "\f238"
}

.fa-tram:before {
  content: "\f7da"
}

.fa-transgender:before {
  content: "\f224"
}

.fa-transgender-alt:before {
  content: "\f225"
}

.fa-transporter:before {
  content: "\f942"
}

.fa-transporter-1:before {
  content: "\f943"
}

.fa-transporter-2:before {
  content: "\f944"
}

.fa-transporter-3:before {
  content: "\f945"
}

.fa-transporter-empty:before {
  content: "\f946"
}

.fa-trash:before {
  content: "\f1f8"
}

.fa-trash-alt:before {
  content: "\f2ed"
}

.fa-trash-restore:before {
  content: "\f829"
}

.fa-trash-restore-alt:before {
  content: "\f82a"
}

.fa-trash-undo:before {
  content: "\f895"
}

.fa-trash-undo-alt:before {
  content: "\f896"
}

.fa-treasure-chest:before {
  content: "\f723"
}

.fa-tree:before {
  content: "\f1bb"
}

.fa-tree-alt:before {
  content: "\f400"
}

.fa-tree-christmas:before {
  content: "\f7db"
}

.fa-tree-decorated:before {
  content: "\f7dc"
}

.fa-tree-large:before {
  content: "\f7dd"
}

.fa-tree-palm:before {
  content: "\f82b"
}

.fa-trees:before {
  content: "\f724"
}

.fa-trello:before {
  content: "\f181"
}

.fa-triangle:before {
  content: "\f2ec"
}

.fa-triangle-music:before {
  content: "\f8e2"
}

.fa-tripadvisor:before {
  content: "\f262"
}

.fa-trophy:before {
  content: "\f091"
}

.fa-trophy-alt:before {
  content: "\f2eb"
}

.fa-truck:before {
  content: "\f0d1"
}

.fa-truck-container:before {
  content: "\f4dc"
}

.fa-truck-couch:before {
  content: "\f4dd"
}

.fa-truck-loading:before {
  content: "\f4de"
}

.fa-truck-monster:before {
  content: "\f63b"
}

.fa-truck-moving:before {
  content: "\f4df"
}

.fa-truck-pickup:before {
  content: "\f63c"
}

.fa-truck-plow:before {
  content: "\f7de"
}

.fa-truck-ramp:before {
  content: "\f4e0"
}

.fa-trumpet:before {
  content: "\f8e3"
}

.fa-tshirt:before {
  content: "\f553"
}

.fa-tty:before {
  content: "\f1e4"
}

.fa-tumblr:before {
  content: "\f173"
}

.fa-tumblr-square:before {
  content: "\f174"
}

.fa-turkey:before {
  content: "\f725"
}

.fa-turntable:before {
  content: "\f8e4"
}

.fa-turtle:before {
  content: "\f726"
}

.fa-tv:before {
  content: "\f26c"
}

.fa-tv-alt:before {
  content: "\f8e5"
}

.fa-tv-music:before {
  content: "\f8e6"
}

.fa-tv-retro:before {
  content: "\f401"
}

.fa-twitch:before {
  content: "\f1e8"
}

.fa-twitter:before {
  content: "\f099"
}

.fa-twitter-square:before {
  content: "\f081"
}

.fa-typewriter:before {
  content: "\f8e7"
}

.fa-typo3:before {
  content: "\f42b"
}

.fa-uber:before {
  content: "\f402"
}

.fa-ubuntu:before {
  content: "\f7df"
}

.fa-ufo:before {
  content: "\f947"
}

.fa-ufo-beam:before {
  content: "\f948"
}

.fa-uikit:before {
  content: "\f403"
}

.fa-umbraco:before {
  content: "\f8e8"
}

.fa-umbrella:before {
  content: "\f0e9"
}

.fa-umbrella-beach:before {
  content: "\f5ca"
}

.fa-underline:before {
  content: "\f0cd"
}

.fa-undo:before {
  content: "\f0e2"
}

.fa-undo-alt:before {
  content: "\f2ea"
}

.fa-unicorn:before {
  content: "\f727"
}

.fa-union:before {
  content: "\f6a2"
}

.fa-uniregistry:before {
  content: "\f404"
}

.fa-unity:before {
  content: "\f949"
}

.fa-universal-access:before {
  content: "\f29a"
}

.fa-university:before {
  content: "\f19c"
}

.fa-unlink:before {
  content: "\f127"
}

.fa-unlock:before {
  content: "\f09c"
}

.fa-unlock-alt:before {
  content: "\f13e"
}

.fa-untappd:before {
  content: "\f405"
}

.fa-upload:before {
  content: "\f093"
}

.fa-ups:before {
  content: "\f7e0"
}

.fa-usb:before {
  content: "\f287"
}

.fa-usb-drive:before {
  content: "\f8e9"
}

.fa-usd-circle:before {
  content: "\f2e8"
}

.fa-usd-square:before {
  content: "\f2e9"
}

.fa-user:before {
  content: "\f007"
}

.fa-user-alien:before {
  content: "\f94a"
}

.fa-user-alt:before {
  content: "\f406"
}

.fa-user-alt-slash:before {
  content: "\f4fa"
}

.fa-user-astronaut:before {
  content: "\f4fb"
}

.fa-user-chart:before {
  content: "\f6a3"
}

.fa-user-check:before {
  content: "\f4fc"
}

.fa-user-circle:before {
  content: "\f2bd"
}

.fa-user-clock:before {
  content: "\f4fd"
}

.fa-user-cog:before {
  content: "\f4fe"
}

.fa-user-cowboy:before {
  content: "\f8ea"
}

.fa-user-crown:before {
  content: "\f6a4"
}

.fa-user-edit:before {
  content: "\f4ff"
}

.fa-user-friends:before {
  content: "\f500"
}

.fa-user-graduate:before {
  content: "\f501"
}

.fa-user-hard-hat:before {
  content: "\f82c"
}

.fa-user-headset:before {
  content: "\f82d"
}

.fa-user-injured:before {
  content: "\f728"
}

.fa-user-lock:before {
  content: "\f502"
}

.fa-user-md:before {
  content: "\f0f0"
}

.fa-user-md-chat:before {
  content: "\f82e"
}

.fa-user-minus:before {
  content: "\f503"
}

.fa-user-music:before {
  content: "\f8eb"
}

.fa-user-ninja:before {
  content: "\f504"
}

.fa-user-nurse:before {
  content: "\f82f"
}

.fa-user-plus:before {
  content: "\f234"
}

.fa-user-robot:before {
  content: "\f94b"
}

.fa-user-secret:before {
  content: "\f21b"
}

.fa-user-shield:before {
  content: "\f505"
}

.fa-user-slash:before {
  content: "\f506"
}

.fa-user-tag:before {
  content: "\f507"
}

.fa-user-tie:before {
  content: "\f508"
}

.fa-user-times:before {
  content: "\f235"
}

.fa-user-unlock:before {
  content: "\f958"
}

.fa-user-visor:before {
  content: "\f94c"
}

.fa-users:before {
  content: "\f0c0"
}

.fa-users-class:before {
  content: "\f63d"
}

.fa-users-cog:before {
  content: "\f509"
}

.fa-users-crown:before {
  content: "\f6a5"
}

.fa-users-medical:before {
  content: "\f830"
}

.fa-users-slash:before {
  content: "\f973"
}

.fa-usps:before {
  content: "\f7e1"
}

.fa-ussunnah:before {
  content: "\f407"
}

.fa-utensil-fork:before {
  content: "\f2e3"
}

.fa-utensil-knife:before {
  content: "\f2e4"
}

.fa-utensil-spoon:before {
  content: "\f2e5"
}

.fa-utensils:before {
  content: "\f2e7"
}

.fa-utensils-alt:before {
  content: "\f2e6"
}

.fa-vaadin:before {
  content: "\f408"
}

.fa-vacuum:before {
  content: "\f94d"
}

.fa-vacuum-robot:before {
  content: "\f94e"
}

.fa-value-absolute:before {
  content: "\f6a6"
}

.fa-vector-square:before {
  content: "\f5cb"
}

.fa-venus:before {
  content: "\f221"
}

.fa-venus-double:before {
  content: "\f226"
}

.fa-venus-mars:before {
  content: "\f228"
}

.fa-vhs:before {
  content: "\f8ec"
}

.fa-viacoin:before {
  content: "\f237"
}

.fa-viadeo:before {
  content: "\f2a9"
}

.fa-viadeo-square:before {
  content: "\f2aa"
}

.fa-vial:before {
  content: "\f492"
}

.fa-vials:before {
  content: "\f493"
}

.fa-viber:before {
  content: "\f409"
}

.fa-video:before {
  content: "\f03d"
}

.fa-video-plus:before {
  content: "\f4e1"
}

.fa-video-slash:before {
  content: "\f4e2"
}

.fa-vihara:before {
  content: "\f6a7"
}

.fa-vimeo:before {
  content: "\f40a"
}

.fa-vimeo-square:before {
  content: "\f194"
}

.fa-vimeo-v:before {
  content: "\f27d"
}

.fa-vine:before {
  content: "\f1ca"
}

.fa-violin:before {
  content: "\f8ed"
}

.fa-virus:before {
  content: "\f974"
}

.fa-virus-slash:before {
  content: "\f975"
}

.fa-viruses:before {
  content: "\f976"
}

.fa-vk:before {
  content: "\f189"
}

.fa-vnv:before {
  content: "\f40b"
}

.fa-voicemail:before {
  content: "\f897"
}

.fa-volcano:before {
  content: "\f770"
}

.fa-volleyball-ball:before {
  content: "\f45f"
}

.fa-volume:before {
  content: "\f6a8"
}

.fa-volume-down:before {
  content: "\f027"
}

.fa-volume-mute:before {
  content: "\f6a9"
}

.fa-volume-off:before {
  content: "\f026"
}

.fa-volume-slash:before {
  content: "\f2e2"
}

.fa-volume-up:before {
  content: "\f028"
}

.fa-vote-nay:before {
  content: "\f771"
}

.fa-vote-yea:before {
  content: "\f772"
}

.fa-vr-cardboard:before {
  content: "\f729"
}

.fa-vuejs:before {
  content: "\f41f"
}

.fa-wagon-covered:before {
  content: "\f8ee"
}

.fa-walker:before {
  content: "\f831"
}

.fa-walkie-talkie:before {
  content: "\f8ef"
}

.fa-walking:before {
  content: "\f554"
}

.fa-wallet:before {
  content: "\f555"
}

.fa-wand:before {
  content: "\f72a"
}

.fa-wand-magic:before {
  content: "\f72b"
}

.fa-warehouse:before {
  content: "\f494"
}

.fa-warehouse-alt:before {
  content: "\f495"
}

.fa-washer:before {
  content: "\f898"
}

.fa-watch:before {
  content: "\f2e1"
}

.fa-watch-calculator:before {
  content: "\f8f0"
}

.fa-watch-fitness:before {
  content: "\f63e"
}

.fa-water:before {
  content: "\f773"
}

.fa-water-lower:before {
  content: "\f774"
}

.fa-water-rise:before {
  content: "\f775"
}

.fa-wave-sine:before {
  content: "\f899"
}

.fa-wave-square:before {
  content: "\f83e"
}

.fa-wave-triangle:before {
  content: "\f89a"
}

.fa-waveform:before {
  content: "\f8f1"
}

.fa-waveform-path:before {
  content: "\f8f2"
}

.fa-waze:before {
  content: "\f83f"
}

.fa-webcam:before {
  content: "\f832"
}

.fa-webcam-slash:before {
  content: "\f833"
}

.fa-weebly:before {
  content: "\f5cc"
}

.fa-weibo:before {
  content: "\f18a"
}

.fa-weight:before {
  content: "\f496"
}

.fa-weight-hanging:before {
  content: "\f5cd"
}

.fa-weixin:before {
  content: "\f1d7"
}

.fa-whale:before {
  content: "\f72c"
}

.fa-whatsapp:before {
  content: "\f232"
}

.fa-whatsapp-square:before {
  content: "\f40c"
}

.fa-wheat:before {
  content: "\f72d"
}

.fa-wheelchair:before {
  content: "\f193"
}

.fa-whistle:before {
  content: "\f460"
}

.fa-whmcs:before {
  content: "\f40d"
}

.fa-wifi:before {
  content: "\f1eb"
}

.fa-wifi-1:before {
  content: "\f6aa"
}

.fa-wifi-2:before {
  content: "\f6ab"
}

.fa-wifi-slash:before {
  content: "\f6ac"
}

.fa-wikipedia-w:before {
  content: "\f266"
}

.fa-wind:before {
  content: "\f72e"
}

.fa-wind-turbine:before {
  content: "\f89b"
}

.fa-wind-warning:before {
  content: "\f776"
}

.fa-window:before {
  content: "\f40e"
}

.fa-window-alt:before {
  content: "\f40f"
}

.fa-window-close:before {
  content: "\f410"
}

.fa-window-frame:before {
  content: "\f94f"
}

.fa-window-frame-open:before {
  content: "\f950"
}

.fa-window-maximize:before {
  content: "\f2d0"
}

.fa-window-minimize:before {
  content: "\f2d1"
}

.fa-window-restore:before {
  content: "\f2d2"
}

.fa-windows:before {
  content: "\f17a"
}

.fa-windsock:before {
  content: "\f777"
}

.fa-wine-bottle:before {
  content: "\f72f"
}

.fa-wine-glass:before {
  content: "\f4e3"
}

.fa-wine-glass-alt:before {
  content: "\f5ce"
}

.fa-wix:before {
  content: "\f5cf"
}

.fa-wizards-of-the-coast:before {
  content: "\f730"
}

.fa-wolf-pack-battalion:before {
  content: "\f514"
}

.fa-won-sign:before {
  content: "\f159"
}

.fa-wordpress:before {
  content: "\f19a"
}

.fa-wordpress-simple:before {
  content: "\f411"
}

.fa-wpbeginner:before {
  content: "\f297"
}

.fa-wpexplorer:before {
  content: "\f2de"
}

.fa-wpforms:before {
  content: "\f298"
}

.fa-wpressr:before {
  content: "\f3e4"
}

.fa-wreath:before {
  content: "\f7e2"
}

.fa-wrench:before {
  content: "\f0ad"
}

.fa-x-ray:before {
  content: "\f497"
}

.fa-xbox:before {
  content: "\f412"
}

.fa-xing:before {
  content: "\f168"
}

.fa-xing-square:before {
  content: "\f169"
}

.fa-y-combinator:before {
  content: "\f23b"
}

.fa-yahoo:before {
  content: "\f19e"
}

.fa-yammer:before {
  content: "\f840"
}

.fa-yandex:before {
  content: "\f413"
}

.fa-yandex-international:before {
  content: "\f414"
}

.fa-yarn:before {
  content: "\f7e3"
}

.fa-yelp:before {
  content: "\f1e9"
}

.fa-yen-sign:before {
  content: "\f157"
}

.fa-yin-yang:before {
  content: "\f6ad"
}

.fa-yoast:before {
  content: "\f2b1"
}

.fa-youtube:before {
  content: "\f167"
}

.fa-youtube-square:before {
  content: "\f431"
}

.fa-zhihu:before {
  content: "\f63f"
}

.sr-only {
  border: 0;
  clip: rect(0, 0, 0, 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px
}

.sr-only-focusable:active, .sr-only-focusable:focus {
  clip: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  position: static;
  width: auto
}

@font-face {
  font-family: '#{$CHAMP-ICONS-FONT-NAME} Brands';
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url('#{$CHAMP-ICONS-FONT-DIR}ci-brands-400.eot');
  src: url('#{$CHAMP-ICONS-FONT-DIR}ci-brands-400.eot?#iefix') format("embedded-opentype"),
  url('#{$CHAMP-ICONS-FONT-DIR}ci-brands-400.woff2') format("woff2"),
  url('#{$CHAMP-ICONS-FONT-DIR}ci-brands-400.woff') format("woff"),
  url('#{$CHAMP-ICONS-FONT-DIR}ci-brands-400.ttf') format("truetype"),
  url('#{$CHAMP-ICONS-FONT-DIR}ci-brands-400.svg#fontawesome') format("svg");
}

.fab {
  font-family: '#{$CHAMP-ICONS-FONT-NAME} Brands';
  font-weight: 400
}

@font-face {
  font-family: '#{$CHAMP-ICONS-FONT-NAME} Duotone';
  font-style: normal;
  font-weight: 900;
  font-display: block;
  src: url('#{$CHAMP-ICONS-FONT-DIR}ci-duotone-900.eot');
  src: url('#{$CHAMP-ICONS-FONT-DIR}ci-duotone-900.eot?#iefix') format("embedded-opentype"),
  url('#{$CHAMP-ICONS-FONT-DIR}ci-duotone-900.woff2') format("woff2"),
  url('#{$CHAMP-ICONS-FONT-DIR}ci-duotone-900.woff') format("woff"),
  url('#{$CHAMP-ICONS-FONT-DIR}ci-duotone-900.ttf') format("truetype"),
  url('#{$CHAMP-ICONS-FONT-DIR}ci-duotone-900.svg#fontawesome') format("svg");
}

.fad {
  position: relative;
  font-family: '#{$CHAMP-ICONS-FONT-NAME} Duotone';
  font-weight: 900
}

.fad:before {
  position: absolute;
  color: var(--fa-primary-color, inherit);
  opacity: 1;
  opacity: var(--fa-primary-opacity, 1)
}

.fad:after {
  color: var(--fa-secondary-color, inherit)
}

.fa-swap-opacity .fad:before, .fad.fa-swap-opacity:before, .fad:after {
  opacity: .4;
  opacity: var(--fa-secondary-opacity, .4)
}

.fa-swap-opacity .fad:after, .fad.fa-swap-opacity:after {
  opacity: 1;
  opacity: var(--fa-primary-opacity, 1)
}

.fad.fa-inverse {
  color: #fff
}

.fad.fa-stack-1x, .fad.fa-stack-2x {
  position: absolute
}

.fad.fa-fw:before, .fad.fa-stack-1x:before, .fad.fa-stack-2x:before {
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%)
}

.fad.fa-abacus:after {
  content: "\10f640"
}

.fad.fa-acorn:after {
  content: "\10f6ae"
}

.fad.fa-ad:after {
  content: "\10f641"
}

.fad.fa-address-book:after {
  content: "\10f2b9"
}

.fad.fa-address-card:after {
  content: "\10f2bb"
}

.fad.fa-adjust:after {
  content: "\10f042"
}

.fad.fa-air-conditioner:after {
  content: "\10f8f4"
}

.fad.fa-air-freshener:after {
  content: "\10f5d0"
}

.fad.fa-alarm-clock:after {
  content: "\10f34e"
}

.fad.fa-alarm-exclamation:after {
  content: "\10f843"
}

.fad.fa-alarm-plus:after {
  content: "\10f844"
}

.fad.fa-alarm-snooze:after {
  content: "\10f845"
}

.fad.fa-album:after {
  content: "\10f89f"
}

.fad.fa-album-collection:after {
  content: "\10f8a0"
}

.fad.fa-alicorn:after {
  content: "\10f6b0"
}

.fad.fa-alien:after {
  content: "\10f8f5"
}

.fad.fa-alien-monster:after {
  content: "\10f8f6"
}

.fad.fa-align-center:after {
  content: "\10f037"
}

.fad.fa-align-justify:after {
  content: "\10f039"
}

.fad.fa-align-left:after {
  content: "\10f036"
}

.fad.fa-align-right:after {
  content: "\10f038"
}

.fad.fa-align-slash:after {
  content: "\10f846"
}

.fad.fa-allergies:after {
  content: "\10f461"
}

.fad.fa-ambulance:after {
  content: "\10f0f9"
}

.fad.fa-american-sign-language-interpreting:after {
  content: "\10f2a3"
}

.fad.fa-amp-guitar:after {
  content: "\10f8a1"
}

.fad.fa-analytics:after {
  content: "\10f643"
}

.fad.fa-anchor:after {
  content: "\10f13d"
}

.fad.fa-angel:after {
  content: "\10f779"
}

.fad.fa-angle-double-down:after {
  content: "\10f103"
}

.fad.fa-angle-double-left:after {
  content: "\10f100"
}

.fad.fa-angle-double-right:after {
  content: "\10f101"
}

.fad.fa-angle-double-up:after {
  content: "\10f102"
}

.fad.fa-angle-down:after {
  content: "\10f107"
}

.fad.fa-angle-left:after {
  content: "\10f104"
}

.fad.fa-angle-right:after {
  content: "\10f105"
}

.fad.fa-angle-up:after {
  content: "\10f106"
}

.fad.fa-angry:after {
  content: "\10f556"
}

.fad.fa-ankh:after {
  content: "\10f644"
}

.fad.fa-apple-alt:after {
  content: "\10f5d1"
}

.fad.fa-apple-crate:after {
  content: "\10f6b1"
}

.fad.fa-archive:after {
  content: "\10f187"
}

.fad.fa-archway:after {
  content: "\10f557"
}

.fad.fa-arrow-alt-circle-down:after {
  content: "\10f358"
}

.fad.fa-arrow-alt-circle-left:after {
  content: "\10f359"
}

.fad.fa-arrow-alt-circle-right:after {
  content: "\10f35a"
}

.fad.fa-arrow-alt-circle-up:after {
  content: "\10f35b"
}

.fad.fa-arrow-alt-down:after {
  content: "\10f354"
}

.fad.fa-arrow-alt-from-bottom:after {
  content: "\10f346"
}

.fad.fa-arrow-alt-from-left:after {
  content: "\10f347"
}

.fad.fa-arrow-alt-from-right:after {
  content: "\10f348"
}

.fad.fa-arrow-alt-from-top:after {
  content: "\10f349"
}

.fad.fa-arrow-alt-left:after {
  content: "\10f355"
}

.fad.fa-arrow-alt-right:after {
  content: "\10f356"
}

.fad.fa-arrow-alt-square-down:after {
  content: "\10f350"
}

.fad.fa-arrow-alt-square-left:after {
  content: "\10f351"
}

.fad.fa-arrow-alt-square-right:after {
  content: "\10f352"
}

.fad.fa-arrow-alt-square-up:after {
  content: "\10f353"
}

.fad.fa-arrow-alt-to-bottom:after {
  content: "\10f34a"
}

.fad.fa-arrow-alt-to-left:after {
  content: "\10f34b"
}

.fad.fa-arrow-alt-to-right:after {
  content: "\10f34c"
}

.fad.fa-arrow-alt-to-top:after {
  content: "\10f34d"
}

.fad.fa-arrow-alt-up:after {
  content: "\10f357"
}

.fad.fa-arrow-circle-down:after {
  content: "\10f0ab"
}

.fad.fa-arrow-circle-left:after {
  content: "\10f0a8"
}

.fad.fa-arrow-circle-right:after {
  content: "\10f0a9"
}

.fad.fa-arrow-circle-up:after {
  content: "\10f0aa"
}

.fad.fa-arrow-down:after {
  content: "\10f063"
}

.fad.fa-arrow-from-bottom:after {
  content: "\10f342"
}

.fad.fa-arrow-from-left:after {
  content: "\10f343"
}

.fad.fa-arrow-from-right:after {
  content: "\10f344"
}

.fad.fa-arrow-from-top:after {
  content: "\10f345"
}

.fad.fa-arrow-left:after {
  content: "\10f060"
}

.fad.fa-arrow-right:after {
  content: "\10f061"
}

.fad.fa-arrow-square-down:after {
  content: "\10f339"
}

.fad.fa-arrow-square-left:after {
  content: "\10f33a"
}

.fad.fa-arrow-square-right:after {
  content: "\10f33b"
}

.fad.fa-arrow-square-up:after {
  content: "\10f33c"
}

.fad.fa-arrow-to-bottom:after {
  content: "\10f33d"
}

.fad.fa-arrow-to-left:after {
  content: "\10f33e"
}

.fad.fa-arrow-to-right:after {
  content: "\10f340"
}

.fad.fa-arrow-to-top:after {
  content: "\10f341"
}

.fad.fa-arrow-up:after {
  content: "\10f062"
}

.fad.fa-arrows:after {
  content: "\10f047"
}

.fad.fa-arrows-alt:after {
  content: "\10f0b2"
}

.fad.fa-arrows-alt-h:after {
  content: "\10f337"
}

.fad.fa-arrows-alt-v:after {
  content: "\10f338"
}

.fad.fa-arrows-h:after {
  content: "\10f07e"
}

.fad.fa-arrows-v:after {
  content: "\10f07d"
}

.fad.fa-assistive-listening-systems:after {
  content: "\10f2a2"
}

.fad.fa-asterisk:after {
  content: "\10f069"
}

.fad.fa-at:after {
  content: "\10f1fa"
}

.fad.fa-atlas:after {
  content: "\10f558"
}

.fad.fa-atom:after {
  content: "\10f5d2"
}

.fad.fa-atom-alt:after {
  content: "\10f5d3"
}

.fad.fa-audio-description:after {
  content: "\10f29e"
}

.fad.fa-award:after {
  content: "\10f559"
}

.fad.fa-axe:after {
  content: "\10f6b2"
}

.fad.fa-axe-battle:after {
  content: "\10f6b3"
}

.fad.fa-baby:after {
  content: "\10f77c"
}

.fad.fa-baby-carriage:after {
  content: "\10f77d"
}

.fad.fa-backpack:after {
  content: "\10f5d4"
}

.fad.fa-backspace:after {
  content: "\10f55a"
}

.fad.fa-backward:after {
  content: "\10f04a"
}

.fad.fa-bacon:after {
  content: "\10f7e5"
}

.fad.fa-bacteria:after {
  content: "\10f959"
}

.fad.fa-bacterium:after {
  content: "\10f95a"
}

.fad.fa-badge:after {
  content: "\10f335"
}

.fad.fa-badge-check:after {
  content: "\10f336"
}

.fad.fa-badge-dollar:after {
  content: "\10f645"
}

.fad.fa-badge-percent:after {
  content: "\10f646"
}

.fad.fa-badge-sheriff:after {
  content: "\10f8a2"
}

.fad.fa-badger-honey:after {
  content: "\10f6b4"
}

.fad.fa-bags-shopping:after {
  content: "\10f847"
}

.fad.fa-bahai:after {
  content: "\10f666"
}

.fad.fa-balance-scale:after {
  content: "\10f24e"
}

.fad.fa-balance-scale-left:after {
  content: "\10f515"
}

.fad.fa-balance-scale-right:after {
  content: "\10f516"
}

.fad.fa-ball-pile:after {
  content: "\10f77e"
}

.fad.fa-ballot:after {
  content: "\10f732"
}

.fad.fa-ballot-check:after {
  content: "\10f733"
}

.fad.fa-ban:after {
  content: "\10f05e"
}

.fad.fa-band-aid:after {
  content: "\10f462"
}

.fad.fa-banjo:after {
  content: "\10f8a3"
}

.fad.fa-barcode:after {
  content: "\10f02a"
}

.fad.fa-barcode-alt:after {
  content: "\10f463"
}

.fad.fa-barcode-read:after {
  content: "\10f464"
}

.fad.fa-barcode-scan:after {
  content: "\10f465"
}

.fad.fa-bars:after {
  content: "\10f0c9"
}

.fad.fa-baseball:after {
  content: "\10f432"
}

.fad.fa-baseball-ball:after {
  content: "\10f433"
}

.fad.fa-basketball-ball:after {
  content: "\10f434"
}

.fad.fa-basketball-hoop:after {
  content: "\10f435"
}

.fad.fa-bat:after {
  content: "\10f6b5"
}

.fad.fa-bath:after {
  content: "\10f2cd"
}

.fad.fa-battery-bolt:after {
  content: "\10f376"
}

.fad.fa-battery-empty:after {
  content: "\10f244"
}

.fad.fa-battery-full:after {
  content: "\10f240"
}

.fad.fa-battery-half:after {
  content: "\10f242"
}

.fad.fa-battery-quarter:after {
  content: "\10f243"
}

.fad.fa-battery-slash:after {
  content: "\10f377"
}

.fad.fa-battery-three-quarters:after {
  content: "\10f241"
}

.fad.fa-bed:after {
  content: "\10f236"
}

.fad.fa-bed-alt:after {
  content: "\10f8f7"
}

.fad.fa-bed-bunk:after {
  content: "\10f8f8"
}

.fad.fa-bed-empty:after {
  content: "\10f8f9"
}

.fad.fa-beer:after {
  content: "\10f0fc"
}

.fad.fa-bell:after {
  content: "\10f0f3"
}

.fad.fa-bell-exclamation:after {
  content: "\10f848"
}

.fad.fa-bell-on:after {
  content: "\10f8fa"
}

.fad.fa-bell-plus:after {
  content: "\10f849"
}

.fad.fa-bell-school:after {
  content: "\10f5d5"
}

.fad.fa-bell-school-slash:after {
  content: "\10f5d6"
}

.fad.fa-bell-slash:after {
  content: "\10f1f6"
}

.fad.fa-bells:after {
  content: "\10f77f"
}

.fad.fa-betamax:after {
  content: "\10f8a4"
}

.fad.fa-bezier-curve:after {
  content: "\10f55b"
}

.fad.fa-bible:after {
  content: "\10f647"
}

.fad.fa-bicycle:after {
  content: "\10f206"
}

.fad.fa-biking:after {
  content: "\10f84a"
}

.fad.fa-biking-mountain:after {
  content: "\10f84b"
}

.fad.fa-binoculars:after {
  content: "\10f1e5"
}

.fad.fa-biohazard:after {
  content: "\10f780"
}

.fad.fa-birthday-cake:after {
  content: "\10f1fd"
}

.fad.fa-blanket:after {
  content: "\10f498"
}

.fad.fa-blender:after {
  content: "\10f517"
}

.fad.fa-blender-phone:after {
  content: "\10f6b6"
}

.fad.fa-blind:after {
  content: "\10f29d"
}

.fad.fa-blinds:after {
  content: "\10f8fb"
}

.fad.fa-blinds-open:after {
  content: "\10f8fc"
}

.fad.fa-blinds-raised:after {
  content: "\10f8fd"
}

.fad.fa-blog:after {
  content: "\10f781"
}

.fad.fa-bold:after {
  content: "\10f032"
}

.fad.fa-bolt:after {
  content: "\10f0e7"
}

.fad.fa-bomb:after {
  content: "\10f1e2"
}

.fad.fa-bone:after {
  content: "\10f5d7"
}

.fad.fa-bone-break:after {
  content: "\10f5d8"
}

.fad.fa-bong:after {
  content: "\10f55c"
}

.fad.fa-book:after {
  content: "\10f02d"
}

.fad.fa-book-alt:after {
  content: "\10f5d9"
}

.fad.fa-book-dead:after {
  content: "\10f6b7"
}

.fad.fa-book-heart:after {
  content: "\10f499"
}

.fad.fa-book-medical:after {
  content: "\10f7e6"
}

.fad.fa-book-open:after {
  content: "\10f518"
}

.fad.fa-book-reader:after {
  content: "\10f5da"
}

.fad.fa-book-spells:after {
  content: "\10f6b8"
}

.fad.fa-book-user:after {
  content: "\10f7e7"
}

.fad.fa-bookmark:after {
  content: "\10f02e"
}

.fad.fa-books:after {
  content: "\10f5db"
}

.fad.fa-books-medical:after {
  content: "\10f7e8"
}

.fad.fa-boombox:after {
  content: "\10f8a5"
}

.fad.fa-boot:after {
  content: "\10f782"
}

.fad.fa-booth-curtain:after {
  content: "\10f734"
}

.fad.fa-border-all:after {
  content: "\10f84c"
}

.fad.fa-border-bottom:after {
  content: "\10f84d"
}

.fad.fa-border-center-h:after {
  content: "\10f89c"
}

.fad.fa-border-center-v:after {
  content: "\10f89d"
}

.fad.fa-border-inner:after {
  content: "\10f84e"
}

.fad.fa-border-left:after {
  content: "\10f84f"
}

.fad.fa-border-none:after {
  content: "\10f850"
}

.fad.fa-border-outer:after {
  content: "\10f851"
}

.fad.fa-border-right:after {
  content: "\10f852"
}

.fad.fa-border-style:after {
  content: "\10f853"
}

.fad.fa-border-style-alt:after {
  content: "\10f854"
}

.fad.fa-border-top:after {
  content: "\10f855"
}

.fad.fa-bow-arrow:after {
  content: "\10f6b9"
}

.fad.fa-bowling-ball:after {
  content: "\10f436"
}

.fad.fa-bowling-pins:after {
  content: "\10f437"
}

.fad.fa-box:after {
  content: "\10f466"
}

.fad.fa-box-alt:after {
  content: "\10f49a"
}

.fad.fa-box-ballot:after {
  content: "\10f735"
}

.fad.fa-box-check:after {
  content: "\10f467"
}

.fad.fa-box-fragile:after {
  content: "\10f49b"
}

.fad.fa-box-full:after {
  content: "\10f49c"
}

.fad.fa-box-heart:after {
  content: "\10f49d"
}

.fad.fa-box-open:after {
  content: "\10f49e"
}

.fad.fa-box-tissue:after {
  content: "\10f95b"
}

.fad.fa-box-up:after {
  content: "\10f49f"
}

.fad.fa-box-usd:after {
  content: "\10f4a0"
}

.fad.fa-boxes:after {
  content: "\10f468"
}

.fad.fa-boxes-alt:after {
  content: "\10f4a1"
}

.fad.fa-boxing-glove:after {
  content: "\10f438"
}

.fad.fa-brackets:after {
  content: "\10f7e9"
}

.fad.fa-brackets-curly:after {
  content: "\10f7ea"
}

.fad.fa-braille:after {
  content: "\10f2a1"
}

.fad.fa-brain:after {
  content: "\10f5dc"
}

.fad.fa-bread-loaf:after {
  content: "\10f7eb"
}

.fad.fa-bread-slice:after {
  content: "\10f7ec"
}

.fad.fa-briefcase:after {
  content: "\10f0b1"
}

.fad.fa-briefcase-medical:after {
  content: "\10f469"
}

.fad.fa-bring-forward:after {
  content: "\10f856"
}

.fad.fa-bring-front:after {
  content: "\10f857"
}

.fad.fa-broadcast-tower:after {
  content: "\10f519"
}

.fad.fa-broom:after {
  content: "\10f51a"
}

.fad.fa-browser:after {
  content: "\10f37e"
}

.fad.fa-brush:after {
  content: "\10f55d"
}

.fad.fa-bug:after {
  content: "\10f188"
}

.fad.fa-building:after {
  content: "\10f1ad"
}

.fad.fa-bullhorn:after {
  content: "\10f0a1"
}

.fad.fa-bullseye:after {
  content: "\10f140"
}

.fad.fa-bullseye-arrow:after {
  content: "\10f648"
}

.fad.fa-bullseye-pointer:after {
  content: "\10f649"
}

.fad.fa-burger-soda:after {
  content: "\10f858"
}

.fad.fa-burn:after {
  content: "\10f46a"
}

.fad.fa-burrito:after {
  content: "\10f7ed"
}

.fad.fa-bus:after {
  content: "\10f207"
}

.fad.fa-bus-alt:after {
  content: "\10f55e"
}

.fad.fa-bus-school:after {
  content: "\10f5dd"
}

.fad.fa-business-time:after {
  content: "\10f64a"
}

.fad.fa-cabinet-filing:after {
  content: "\10f64b"
}

.fad.fa-cactus:after {
  content: "\10f8a7"
}

.fad.fa-calculator:after {
  content: "\10f1ec"
}

.fad.fa-calculator-alt:after {
  content: "\10f64c"
}

.fad.fa-calendar:after {
  content: "\10f133"
}

.fad.fa-calendar-alt:after {
  content: "\10f073"
}

.fad.fa-calendar-check:after {
  content: "\10f274"
}

.fad.fa-calendar-day:after {
  content: "\10f783"
}

.fad.fa-calendar-edit:after {
  content: "\10f333"
}

.fad.fa-calendar-exclamation:after {
  content: "\10f334"
}

.fad.fa-calendar-minus:after {
  content: "\10f272"
}

.fad.fa-calendar-plus:after {
  content: "\10f271"
}

.fad.fa-calendar-star:after {
  content: "\10f736"
}

.fad.fa-calendar-times:after {
  content: "\10f273"
}

.fad.fa-calendar-week:after {
  content: "\10f784"
}

.fad.fa-camcorder:after {
  content: "\10f8a8"
}

.fad.fa-camera:after {
  content: "\10f030"
}

.fad.fa-camera-alt:after {
  content: "\10f332"
}

.fad.fa-camera-home:after {
  content: "\10f8fe"
}

.fad.fa-camera-movie:after {
  content: "\10f8a9"
}

.fad.fa-camera-polaroid:after {
  content: "\10f8aa"
}

.fad.fa-camera-retro:after {
  content: "\10f083"
}

.fad.fa-campfire:after {
  content: "\10f6ba"
}

.fad.fa-campground:after {
  content: "\10f6bb"
}

.fad.fa-candle-holder:after {
  content: "\10f6bc"
}

.fad.fa-candy-cane:after {
  content: "\10f786"
}

.fad.fa-candy-corn:after {
  content: "\10f6bd"
}

.fad.fa-cannabis:after {
  content: "\10f55f"
}

.fad.fa-capsules:after {
  content: "\10f46b"
}

.fad.fa-car:after {
  content: "\10f1b9"
}

.fad.fa-car-alt:after {
  content: "\10f5de"
}

.fad.fa-car-battery:after {
  content: "\10f5df"
}

.fad.fa-car-building:after {
  content: "\10f859"
}

.fad.fa-car-bump:after {
  content: "\10f5e0"
}

.fad.fa-car-bus:after {
  content: "\10f85a"
}

.fad.fa-car-crash:after {
  content: "\10f5e1"
}

.fad.fa-car-garage:after {
  content: "\10f5e2"
}

.fad.fa-car-mechanic:after {
  content: "\10f5e3"
}

.fad.fa-car-side:after {
  content: "\10f5e4"
}

.fad.fa-car-tilt:after {
  content: "\10f5e5"
}

.fad.fa-car-wash:after {
  content: "\10f5e6"
}

.fad.fa-caravan:after {
  content: "\10f8ff"
}

.fad.fa-caravan-alt:after {
  content: "\10f900"
}

.fad.fa-caret-circle-down:after {
  content: "\10f32d"
}

.fad.fa-caret-circle-left:after {
  content: "\10f32e"
}

.fad.fa-caret-circle-right:after {
  content: "\10f330"
}

.fad.fa-caret-circle-up:after {
  content: "\10f331"
}

.fad.fa-caret-down:after {
  content: "\10f0d7"
}

.fad.fa-caret-left:after {
  content: "\10f0d9"
}

.fad.fa-caret-right:after {
  content: "\10f0da"
}

.fad.fa-caret-square-down:after {
  content: "\10f150"
}

.fad.fa-caret-square-left:after {
  content: "\10f191"
}

.fad.fa-caret-square-right:after {
  content: "\10f152"
}

.fad.fa-caret-square-up:after {
  content: "\10f151"
}

.fad.fa-caret-up:after {
  content: "\10f0d8"
}

.fad.fa-carrot:after {
  content: "\10f787"
}

.fad.fa-cars:after {
  content: "\10f85b"
}

.fad.fa-cart-arrow-down:after {
  content: "\10f218"
}

.fad.fa-cart-plus:after {
  content: "\10f217"
}

.fad.fa-cash-register:after {
  content: "\10f788"
}

.fad.fa-cassette-tape:after {
  content: "\10f8ab"
}

.fad.fa-cat:after {
  content: "\10f6be"
}

.fad.fa-cat-space:after {
  content: "\10f901"
}

.fad.fa-cauldron:after {
  content: "\10f6bf"
}

.fad.fa-cctv:after {
  content: "\10f8ac"
}

.fad.fa-certificate:after {
  content: "\10f0a3"
}

.fad.fa-chair:after {
  content: "\10f6c0"
}

.fad.fa-chair-office:after {
  content: "\10f6c1"
}

.fad.fa-chalkboard:after {
  content: "\10f51b"
}

.fad.fa-chalkboard-teacher:after {
  content: "\10f51c"
}

.fad.fa-charging-station:after {
  content: "\10f5e7"
}

.fad.fa-chart-area:after {
  content: "\10f1fe"
}

.fad.fa-chart-bar:after {
  content: "\10f080"
}

.fad.fa-chart-line:after {
  content: "\10f201"
}

.fad.fa-chart-line-down:after {
  content: "\10f64d"
}

.fad.fa-chart-network:after {
  content: "\10f78a"
}

.fad.fa-chart-pie:after {
  content: "\10f200"
}

.fad.fa-chart-pie-alt:after {
  content: "\10f64e"
}

.fad.fa-chart-scatter:after {
  content: "\10f7ee"
}

.fad.fa-check:after {
  content: "\10f00c"
}

.fad.fa-check-circle:after {
  content: "\10f058"
}

.fad.fa-check-double:after {
  content: "\10f560"
}

.fad.fa-check-square:after {
  content: "\10f14a"
}

.fad.fa-cheese:after {
  content: "\10f7ef"
}

.fad.fa-cheese-swiss:after {
  content: "\10f7f0"
}

.fad.fa-cheeseburger:after {
  content: "\10f7f1"
}

.fad.fa-chess:after {
  content: "\10f439"
}

.fad.fa-chess-bishop:after {
  content: "\10f43a"
}

.fad.fa-chess-bishop-alt:after {
  content: "\10f43b"
}

.fad.fa-chess-board:after {
  content: "\10f43c"
}

.fad.fa-chess-clock:after {
  content: "\10f43d"
}

.fad.fa-chess-clock-alt:after {
  content: "\10f43e"
}

.fad.fa-chess-king:after {
  content: "\10f43f"
}

.fad.fa-chess-king-alt:after {
  content: "\10f440"
}

.fad.fa-chess-knight:after {
  content: "\10f441"
}

.fad.fa-chess-knight-alt:after {
  content: "\10f442"
}

.fad.fa-chess-pawn:after {
  content: "\10f443"
}

.fad.fa-chess-pawn-alt:after {
  content: "\10f444"
}

.fad.fa-chess-queen:after {
  content: "\10f445"
}

.fad.fa-chess-queen-alt:after {
  content: "\10f446"
}

.fad.fa-chess-rook:after {
  content: "\10f447"
}

.fad.fa-chess-rook-alt:after {
  content: "\10f448"
}

.fad.fa-chevron-circle-down:after {
  content: "\10f13a"
}

.fad.fa-chevron-circle-left:after {
  content: "\10f137"
}

.fad.fa-chevron-circle-right:after {
  content: "\10f138"
}

.fad.fa-chevron-circle-up:after {
  content: "\10f139"
}

.fad.fa-chevron-double-down:after {
  content: "\10f322"
}

.fad.fa-chevron-double-left:after {
  content: "\10f323"
}

.fad.fa-chevron-double-right:after {
  content: "\10f324"
}

.fad.fa-chevron-double-up:after {
  content: "\10f325"
}

.fad.fa-chevron-down:after {
  content: "\10f078"
}

.fad.fa-chevron-left:after {
  content: "\10f053"
}

.fad.fa-chevron-right:after {
  content: "\10f054"
}

.fad.fa-chevron-square-down:after {
  content: "\10f329"
}

.fad.fa-chevron-square-left:after {
  content: "\10f32a"
}

.fad.fa-chevron-square-right:after {
  content: "\10f32b"
}

.fad.fa-chevron-square-up:after {
  content: "\10f32c"
}

.fad.fa-chevron-up:after {
  content: "\10f077"
}

.fad.fa-child:after {
  content: "\10f1ae"
}

.fad.fa-chimney:after {
  content: "\10f78b"
}

.fad.fa-church:after {
  content: "\10f51d"
}

.fad.fa-circle:after {
  content: "\10f111"
}

.fad.fa-circle-notch:after {
  content: "\10f1ce"
}

.fad.fa-city:after {
  content: "\10f64f"
}

.fad.fa-clarinet:after {
  content: "\10f8ad"
}

.fad.fa-claw-marks:after {
  content: "\10f6c2"
}

.fad.fa-clinic-medical:after {
  content: "\10f7f2"
}

.fad.fa-clipboard:after {
  content: "\10f328"
}

.fad.fa-clipboard-check:after {
  content: "\10f46c"
}

.fad.fa-clipboard-list:after {
  content: "\10f46d"
}

.fad.fa-clipboard-list-check:after {
  content: "\10f737"
}

.fad.fa-clipboard-prescription:after {
  content: "\10f5e8"
}

.fad.fa-clipboard-user:after {
  content: "\10f7f3"
}

.fad.fa-clock:after {
  content: "\10f017"
}

.fad.fa-clone:after {
  content: "\10f24d"
}

.fad.fa-closed-captioning:after {
  content: "\10f20a"
}

.fad.fa-cloud:after {
  content: "\10f0c2"
}

.fad.fa-cloud-download:after {
  content: "\10f0ed"
}

.fad.fa-cloud-download-alt:after {
  content: "\10f381"
}

.fad.fa-cloud-drizzle:after {
  content: "\10f738"
}

.fad.fa-cloud-hail:after {
  content: "\10f739"
}

.fad.fa-cloud-hail-mixed:after {
  content: "\10f73a"
}

.fad.fa-cloud-meatball:after {
  content: "\10f73b"
}

.fad.fa-cloud-moon:after {
  content: "\10f6c3"
}

.fad.fa-cloud-moon-rain:after {
  content: "\10f73c"
}

.fad.fa-cloud-music:after {
  content: "\10f8ae"
}

.fad.fa-cloud-rain:after {
  content: "\10f73d"
}

.fad.fa-cloud-rainbow:after {
  content: "\10f73e"
}

.fad.fa-cloud-showers:after {
  content: "\10f73f"
}

.fad.fa-cloud-showers-heavy:after {
  content: "\10f740"
}

.fad.fa-cloud-sleet:after {
  content: "\10f741"
}

.fad.fa-cloud-snow:after {
  content: "\10f742"
}

.fad.fa-cloud-sun:after {
  content: "\10f6c4"
}

.fad.fa-cloud-sun-rain:after {
  content: "\10f743"
}

.fad.fa-cloud-upload:after {
  content: "\10f0ee"
}

.fad.fa-cloud-upload-alt:after {
  content: "\10f382"
}

.fad.fa-clouds:after {
  content: "\10f744"
}

.fad.fa-clouds-moon:after {
  content: "\10f745"
}

.fad.fa-clouds-sun:after {
  content: "\10f746"
}

.fad.fa-club:after {
  content: "\10f327"
}

.fad.fa-cocktail:after {
  content: "\10f561"
}

.fad.fa-code:after {
  content: "\10f121"
}

.fad.fa-code-branch:after {
  content: "\10f126"
}

.fad.fa-code-commit:after {
  content: "\10f386"
}

.fad.fa-code-merge:after {
  content: "\10f387"
}

.fad.fa-coffee:after {
  content: "\10f0f4"
}

.fad.fa-coffee-pot:after {
  content: "\10f902"
}

.fad.fa-coffee-togo:after {
  content: "\10f6c5"
}

.fad.fa-coffin:after {
  content: "\10f6c6"
}

.fad.fa-coffin-cross:after {
  content: "\10f951"
}

.fad.fa-cog:after {
  content: "\10f013"
}

.fad.fa-cogs:after {
  content: "\10f085"
}

.fad.fa-coin:after {
  content: "\10f85c"
}

.fad.fa-coins:after {
  content: "\10f51e"
}

.fad.fa-columns:after {
  content: "\10f0db"
}

.fad.fa-comet:after {
  content: "\10f903"
}

.fad.fa-comment:after {
  content: "\10f075"
}

.fad.fa-comment-alt:after {
  content: "\10f27a"
}

.fad.fa-comment-alt-check:after {
  content: "\10f4a2"
}

.fad.fa-comment-alt-dollar:after {
  content: "\10f650"
}

.fad.fa-comment-alt-dots:after {
  content: "\10f4a3"
}

.fad.fa-comment-alt-edit:after {
  content: "\10f4a4"
}

.fad.fa-comment-alt-exclamation:after {
  content: "\10f4a5"
}

.fad.fa-comment-alt-lines:after {
  content: "\10f4a6"
}

.fad.fa-comment-alt-medical:after {
  content: "\10f7f4"
}

.fad.fa-comment-alt-minus:after {
  content: "\10f4a7"
}

.fad.fa-comment-alt-music:after {
  content: "\10f8af"
}

.fad.fa-comment-alt-plus:after {
  content: "\10f4a8"
}

.fad.fa-comment-alt-slash:after {
  content: "\10f4a9"
}

.fad.fa-comment-alt-smile:after {
  content: "\10f4aa"
}

.fad.fa-comment-alt-times:after {
  content: "\10f4ab"
}

.fad.fa-comment-check:after {
  content: "\10f4ac"
}

.fad.fa-comment-dollar:after {
  content: "\10f651"
}

.fad.fa-comment-dots:after {
  content: "\10f4ad"
}

.fad.fa-comment-edit:after {
  content: "\10f4ae"
}

.fad.fa-comment-exclamation:after {
  content: "\10f4af"
}

.fad.fa-comment-lines:after {
  content: "\10f4b0"
}

.fad.fa-comment-medical:after {
  content: "\10f7f5"
}

.fad.fa-comment-minus:after {
  content: "\10f4b1"
}

.fad.fa-comment-music:after {
  content: "\10f8b0"
}

.fad.fa-comment-plus:after {
  content: "\10f4b2"
}

.fad.fa-comment-slash:after {
  content: "\10f4b3"
}

.fad.fa-comment-smile:after {
  content: "\10f4b4"
}

.fad.fa-comment-times:after {
  content: "\10f4b5"
}

.fad.fa-comments:after {
  content: "\10f086"
}

.fad.fa-comments-alt:after {
  content: "\10f4b6"
}

.fad.fa-comments-alt-dollar:after {
  content: "\10f652"
}

.fad.fa-comments-dollar:after {
  content: "\10f653"
}

.fad.fa-compact-disc:after {
  content: "\10f51f"
}

.fad.fa-compass:after {
  content: "\10f14e"
}

.fad.fa-compass-slash:after {
  content: "\10f5e9"
}

.fad.fa-compress:after {
  content: "\10f066"
}

.fad.fa-compress-alt:after {
  content: "\10f422"
}

.fad.fa-compress-arrows-alt:after {
  content: "\10f78c"
}

.fad.fa-compress-wide:after {
  content: "\10f326"
}

.fad.fa-computer-classic:after {
  content: "\10f8b1"
}

.fad.fa-computer-speaker:after {
  content: "\10f8b2"
}

.fad.fa-concierge-bell:after {
  content: "\10f562"
}

.fad.fa-construction:after {
  content: "\10f85d"
}

.fad.fa-container-storage:after {
  content: "\10f4b7"
}

.fad.fa-conveyor-belt:after {
  content: "\10f46e"
}

.fad.fa-conveyor-belt-alt:after {
  content: "\10f46f"
}

.fad.fa-cookie:after {
  content: "\10f563"
}

.fad.fa-cookie-bite:after {
  content: "\10f564"
}

.fad.fa-copy:after {
  content: "\10f0c5"
}

.fad.fa-copyright:after {
  content: "\10f1f9"
}

.fad.fa-corn:after {
  content: "\10f6c7"
}

.fad.fa-couch:after {
  content: "\10f4b8"
}

.fad.fa-cow:after {
  content: "\10f6c8"
}

.fad.fa-cowbell:after {
  content: "\10f8b3"
}

.fad.fa-cowbell-more:after {
  content: "\10f8b4"
}

.fad.fa-credit-card:after {
  content: "\10f09d"
}

.fad.fa-credit-card-blank:after {
  content: "\10f389"
}

.fad.fa-credit-card-front:after {
  content: "\10f38a"
}

.fad.fa-cricket:after {
  content: "\10f449"
}

.fad.fa-croissant:after {
  content: "\10f7f6"
}

.fad.fa-crop:after {
  content: "\10f125"
}

.fad.fa-crop-alt:after {
  content: "\10f565"
}

.fad.fa-cross:after {
  content: "\10f654"
}

.fad.fa-crosshairs:after {
  content: "\10f05b"
}

.fad.fa-crow:after {
  content: "\10f520"
}

.fad.fa-crown:after {
  content: "\10f521"
}

.fad.fa-crutch:after {
  content: "\10f7f7"
}

.fad.fa-crutches:after {
  content: "\10f7f8"
}

.fad.fa-cube:after {
  content: "\10f1b2"
}

.fad.fa-cubes:after {
  content: "\10f1b3"
}

.fad.fa-curling:after {
  content: "\10f44a"
}

.fad.fa-cut:after {
  content: "\10f0c4"
}

.fad.fa-dagger:after {
  content: "\10f6cb"
}

.fad.fa-database:after {
  content: "\10f1c0"
}

.fad.fa-deaf:after {
  content: "\10f2a4"
}

.fad.fa-debug:after {
  content: "\10f7f9"
}

.fad.fa-deer:after {
  content: "\10f78e"
}

.fad.fa-deer-rudolph:after {
  content: "\10f78f"
}

.fad.fa-democrat:after {
  content: "\10f747"
}

.fad.fa-desktop:after {
  content: "\10f108"
}

.fad.fa-desktop-alt:after {
  content: "\10f390"
}

.fad.fa-dewpoint:after {
  content: "\10f748"
}

.fad.fa-dharmachakra:after {
  content: "\10f655"
}

.fad.fa-diagnoses:after {
  content: "\10f470"
}

.fad.fa-diamond:after {
  content: "\10f219"
}

.fad.fa-dice:after {
  content: "\10f522"
}

.fad.fa-dice-d10:after {
  content: "\10f6cd"
}

.fad.fa-dice-d12:after {
  content: "\10f6ce"
}

.fad.fa-dice-d20:after {
  content: "\10f6cf"
}

.fad.fa-dice-d4:after {
  content: "\10f6d0"
}

.fad.fa-dice-d6:after {
  content: "\10f6d1"
}

.fad.fa-dice-d8:after {
  content: "\10f6d2"
}

.fad.fa-dice-five:after {
  content: "\10f523"
}

.fad.fa-dice-four:after {
  content: "\10f524"
}

.fad.fa-dice-one:after {
  content: "\10f525"
}

.fad.fa-dice-six:after {
  content: "\10f526"
}

.fad.fa-dice-three:after {
  content: "\10f527"
}

.fad.fa-dice-two:after {
  content: "\10f528"
}

.fad.fa-digging:after {
  content: "\10f85e"
}

.fad.fa-digital-tachograph:after {
  content: "\10f566"
}

.fad.fa-diploma:after {
  content: "\10f5ea"
}

.fad.fa-directions:after {
  content: "\10f5eb"
}

.fad.fa-disc-drive:after {
  content: "\10f8b5"
}

.fad.fa-disease:after {
  content: "\10f7fa"
}

.fad.fa-divide:after {
  content: "\10f529"
}

.fad.fa-dizzy:after {
  content: "\10f567"
}

.fad.fa-dna:after {
  content: "\10f471"
}

.fad.fa-do-not-enter:after {
  content: "\10f5ec"
}

.fad.fa-dog:after {
  content: "\10f6d3"
}

.fad.fa-dog-leashed:after {
  content: "\10f6d4"
}

.fad.fa-dollar-sign:after {
  content: "\10f155"
}

.fad.fa-dolly:after {
  content: "\10f472"
}

.fad.fa-dolly-empty:after {
  content: "\10f473"
}

.fad.fa-dolly-flatbed:after {
  content: "\10f474"
}

.fad.fa-dolly-flatbed-alt:after {
  content: "\10f475"
}

.fad.fa-dolly-flatbed-empty:after {
  content: "\10f476"
}

.fad.fa-donate:after {
  content: "\10f4b9"
}

.fad.fa-door-closed:after {
  content: "\10f52a"
}

.fad.fa-door-open:after {
  content: "\10f52b"
}

.fad.fa-dot-circle:after {
  content: "\10f192"
}

.fad.fa-dove:after {
  content: "\10f4ba"
}

.fad.fa-download:after {
  content: "\10f019"
}

.fad.fa-drafting-compass:after {
  content: "\10f568"
}

.fad.fa-dragon:after {
  content: "\10f6d5"
}

.fad.fa-draw-circle:after {
  content: "\10f5ed"
}

.fad.fa-draw-polygon:after {
  content: "\10f5ee"
}

.fad.fa-draw-square:after {
  content: "\10f5ef"
}

.fad.fa-dreidel:after {
  content: "\10f792"
}

.fad.fa-drone:after {
  content: "\10f85f"
}

.fad.fa-drone-alt:after {
  content: "\10f860"
}

.fad.fa-drum:after {
  content: "\10f569"
}

.fad.fa-drum-steelpan:after {
  content: "\10f56a"
}

.fad.fa-drumstick:after {
  content: "\10f6d6"
}

.fad.fa-drumstick-bite:after {
  content: "\10f6d7"
}

.fad.fa-dryer:after {
  content: "\10f861"
}

.fad.fa-dryer-alt:after {
  content: "\10f862"
}

.fad.fa-duck:after {
  content: "\10f6d8"
}

.fad.fa-dumbbell:after {
  content: "\10f44b"
}

.fad.fa-dumpster:after {
  content: "\10f793"
}

.fad.fa-dumpster-fire:after {
  content: "\10f794"
}

.fad.fa-dungeon:after {
  content: "\10f6d9"
}

.fad.fa-ear:after {
  content: "\10f5f0"
}

.fad.fa-ear-muffs:after {
  content: "\10f795"
}

.fad.fa-eclipse:after {
  content: "\10f749"
}

.fad.fa-eclipse-alt:after {
  content: "\10f74a"
}

.fad.fa-edit:after {
  content: "\10f044"
}

.fad.fa-egg:after {
  content: "\10f7fb"
}

.fad.fa-egg-fried:after {
  content: "\10f7fc"
}

.fad.fa-eject:after {
  content: "\10f052"
}

.fad.fa-elephant:after {
  content: "\10f6da"
}

.fad.fa-ellipsis-h:after {
  content: "\10f141"
}

.fad.fa-ellipsis-h-alt:after {
  content: "\10f39b"
}

.fad.fa-ellipsis-v:after {
  content: "\10f142"
}

.fad.fa-ellipsis-v-alt:after {
  content: "\10f39c"
}

.fad.fa-empty-set:after {
  content: "\10f656"
}

.fad.fa-engine-warning:after {
  content: "\10f5f2"
}

.fad.fa-envelope:after {
  content: "\10f0e0"
}

.fad.fa-envelope-open:after {
  content: "\10f2b6"
}

.fad.fa-envelope-open-dollar:after {
  content: "\10f657"
}

.fad.fa-envelope-open-text:after {
  content: "\10f658"
}

.fad.fa-envelope-square:after {
  content: "\10f199"
}

.fad.fa-equals:after {
  content: "\10f52c"
}

.fad.fa-eraser:after {
  content: "\10f12d"
}

.fad.fa-ethernet:after {
  content: "\10f796"
}

.fad.fa-euro-sign:after {
  content: "\10f153"
}

.fad.fa-exchange:after {
  content: "\10f0ec"
}

.fad.fa-exchange-alt:after {
  content: "\10f362"
}

.fad.fa-exclamation:after {
  content: "\10f12a"
}

.fad.fa-exclamation-circle:after {
  content: "\10f06a"
}

.fad.fa-exclamation-square:after {
  content: "\10f321"
}

.fad.fa-exclamation-triangle:after {
  content: "\10f071"
}

.fad.fa-expand:after {
  content: "\10f065"
}

.fad.fa-expand-alt:after {
  content: "\10f424"
}

.fad.fa-expand-arrows:after {
  content: "\10f31d"
}

.fad.fa-expand-arrows-alt:after {
  content: "\10f31e"
}

.fad.fa-expand-wide:after {
  content: "\10f320"
}

.fad.fa-external-link:after {
  content: "\10f08e"
}

.fad.fa-external-link-alt:after {
  content: "\10f35d"
}

.fad.fa-external-link-square:after {
  content: "\10f14c"
}

.fad.fa-external-link-square-alt:after {
  content: "\10f360"
}

.fad.fa-eye:after {
  content: "\10f06e"
}

.fad.fa-eye-dropper:after {
  content: "\10f1fb"
}

.fad.fa-eye-evil:after {
  content: "\10f6db"
}

.fad.fa-eye-slash:after {
  content: "\10f070"
}

.fad.fa-fan:after {
  content: "\10f863"
}

.fad.fa-fan-table:after {
  content: "\10f904"
}

.fad.fa-farm:after {
  content: "\10f864"
}

.fad.fa-fast-backward:after {
  content: "\10f049"
}

.fad.fa-fast-forward:after {
  content: "\10f050"
}

.fad.fa-faucet:after {
  content: "\10f905"
}

.fad.fa-faucet-drip:after {
  content: "\10f906"
}

.fad.fa-fax:after {
  content: "\10f1ac"
}

.fad.fa-feather:after {
  content: "\10f52d"
}

.fad.fa-feather-alt:after {
  content: "\10f56b"
}

.fad.fa-female:after {
  content: "\10f182"
}

.fad.fa-field-hockey:after {
  content: "\10f44c"
}

.fad.fa-fighter-jet:after {
  content: "\10f0fb"
}

.fad.fa-file:after {
  content: "\10f15b"
}

.fad.fa-file-alt:after {
  content: "\10f15c"
}

.fad.fa-file-archive:after {
  content: "\10f1c6"
}

.fad.fa-file-audio:after {
  content: "\10f1c7"
}

.fad.fa-file-certificate:after {
  content: "\10f5f3"
}

.fad.fa-file-chart-line:after {
  content: "\10f659"
}

.fad.fa-file-chart-pie:after {
  content: "\10f65a"
}

.fad.fa-file-check:after {
  content: "\10f316"
}

.fad.fa-file-code:after {
  content: "\10f1c9"
}

.fad.fa-file-contract:after {
  content: "\10f56c"
}

.fad.fa-file-csv:after {
  content: "\10f6dd"
}

.fad.fa-file-download:after {
  content: "\10f56d"
}

.fad.fa-file-edit:after {
  content: "\10f31c"
}

.fad.fa-file-excel:after {
  content: "\10f1c3"
}

.fad.fa-file-exclamation:after {
  content: "\10f31a"
}

.fad.fa-file-export:after {
  content: "\10f56e"
}

.fad.fa-file-image:after {
  content: "\10f1c5"
}

.fad.fa-file-import:after {
  content: "\10f56f"
}

.fad.fa-file-invoice:after {
  content: "\10f570"
}

.fad.fa-file-invoice-dollar:after {
  content: "\10f571"
}

.fad.fa-file-medical:after {
  content: "\10f477"
}

.fad.fa-file-medical-alt:after {
  content: "\10f478"
}

.fad.fa-file-minus:after {
  content: "\10f318"
}

.fad.fa-file-music:after {
  content: "\10f8b6"
}

.fad.fa-file-pdf:after {
  content: "\10f1c1"
}

.fad.fa-file-plus:after {
  content: "\10f319"
}

.fad.fa-file-powerpoint:after {
  content: "\10f1c4"
}

.fad.fa-file-prescription:after {
  content: "\10f572"
}

.fad.fa-file-search:after {
  content: "\10f865"
}

.fad.fa-file-signature:after {
  content: "\10f573"
}

.fad.fa-file-spreadsheet:after {
  content: "\10f65b"
}

.fad.fa-file-times:after {
  content: "\10f317"
}

.fad.fa-file-upload:after {
  content: "\10f574"
}

.fad.fa-file-user:after {
  content: "\10f65c"
}

.fad.fa-file-video:after {
  content: "\10f1c8"
}

.fad.fa-file-word:after {
  content: "\10f1c2"
}

.fad.fa-files-medical:after {
  content: "\10f7fd"
}

.fad.fa-fill:after {
  content: "\10f575"
}

.fad.fa-fill-drip:after {
  content: "\10f576"
}

.fad.fa-film:after {
  content: "\10f008"
}

.fad.fa-film-alt:after {
  content: "\10f3a0"
}

.fad.fa-film-canister:after {
  content: "\10f8b7"
}

.fad.fa-filter:after {
  content: "\10f0b0"
}

.fad.fa-fingerprint:after {
  content: "\10f577"
}

.fad.fa-fire:after {
  content: "\10f06d"
}

.fad.fa-fire-alt:after {
  content: "\10f7e4"
}

.fad.fa-fire-extinguisher:after {
  content: "\10f134"
}

.fad.fa-fire-smoke:after {
  content: "\10f74b"
}

.fad.fa-fireplace:after {
  content: "\10f79a"
}

.fad.fa-first-aid:after {
  content: "\10f479"
}

.fad.fa-fish:after {
  content: "\10f578"
}

.fad.fa-fish-cooked:after {
  content: "\10f7fe"
}

.fad.fa-fist-raised:after {
  content: "\10f6de"
}

.fad.fa-flag:after {
  content: "\10f024"
}

.fad.fa-flag-alt:after {
  content: "\10f74c"
}

.fad.fa-flag-checkered:after {
  content: "\10f11e"
}

.fad.fa-flag-usa:after {
  content: "\10f74d"
}

.fad.fa-flame:after {
  content: "\10f6df"
}

.fad.fa-flashlight:after {
  content: "\10f8b8"
}

.fad.fa-flask:after {
  content: "\10f0c3"
}

.fad.fa-flask-poison:after {
  content: "\10f6e0"
}

.fad.fa-flask-potion:after {
  content: "\10f6e1"
}

.fad.fa-flower:after {
  content: "\10f7ff"
}

.fad.fa-flower-daffodil:after {
  content: "\10f800"
}

.fad.fa-flower-tulip:after {
  content: "\10f801"
}

.fad.fa-flushed:after {
  content: "\10f579"
}

.fad.fa-flute:after {
  content: "\10f8b9"
}

.fad.fa-flux-capacitor:after {
  content: "\10f8ba"
}

.fad.fa-fog:after {
  content: "\10f74e"
}

.fad.fa-folder:after {
  content: "\10f07b"
}

.fad.fa-folder-download:after {
  content: "\10f953"
}

.fad.fa-folder-minus:after {
  content: "\10f65d"
}

.fad.fa-folder-open:after {
  content: "\10f07c"
}

.fad.fa-folder-plus:after {
  content: "\10f65e"
}

.fad.fa-folder-times:after {
  content: "\10f65f"
}

.fad.fa-folder-tree:after {
  content: "\10f802"
}

.fad.fa-folder-upload:after {
  content: "\10f954"
}

.fad.fa-folders:after {
  content: "\10f660"
}

.fad.fa-font:after {
  content: "\10f031"
}

.fad.fa-font-awesome-logo-full:after {
  content: "\10f4e6"
}

.fad.fa-font-case:after {
  content: "\10f866"
}

.fad.fa-football-ball:after {
  content: "\10f44e"
}

.fad.fa-football-helmet:after {
  content: "\10f44f"
}

.fad.fa-forklift:after {
  content: "\10f47a"
}

.fad.fa-forward:after {
  content: "\10f04e"
}

.fad.fa-fragile:after {
  content: "\10f4bb"
}

.fad.fa-french-fries:after {
  content: "\10f803"
}

.fad.fa-frog:after {
  content: "\10f52e"
}

.fad.fa-frosty-head:after {
  content: "\10f79b"
}

.fad.fa-frown:after {
  content: "\10f119"
}

.fad.fa-frown-open:after {
  content: "\10f57a"
}

.fad.fa-function:after {
  content: "\10f661"
}

.fad.fa-funnel-dollar:after {
  content: "\10f662"
}

.fad.fa-futbol:after {
  content: "\10f1e3"
}

.fad.fa-galaxy:after {
  content: "\10f908"
}

.fad.fa-game-board:after {
  content: "\10f867"
}

.fad.fa-game-board-alt:after {
  content: "\10f868"
}

.fad.fa-game-console-handheld:after {
  content: "\10f8bb"
}

.fad.fa-gamepad:after {
  content: "\10f11b"
}

.fad.fa-gamepad-alt:after {
  content: "\10f8bc"
}

.fad.fa-garage:after {
  content: "\10f909"
}

.fad.fa-garage-car:after {
  content: "\10f90a"
}

.fad.fa-garage-open:after {
  content: "\10f90b"
}

.fad.fa-gas-pump:after {
  content: "\10f52f"
}

.fad.fa-gas-pump-slash:after {
  content: "\10f5f4"
}

.fad.fa-gavel:after {
  content: "\10f0e3"
}

.fad.fa-gem:after {
  content: "\10f3a5"
}

.fad.fa-genderless:after {
  content: "\10f22d"
}

.fad.fa-ghost:after {
  content: "\10f6e2"
}

.fad.fa-gift:after {
  content: "\10f06b"
}

.fad.fa-gift-card:after {
  content: "\10f663"
}

.fad.fa-gifts:after {
  content: "\10f79c"
}

.fad.fa-gingerbread-man:after {
  content: "\10f79d"
}

.fad.fa-glass:after {
  content: "\10f804"
}

.fad.fa-glass-champagne:after {
  content: "\10f79e"
}

.fad.fa-glass-cheers:after {
  content: "\10f79f"
}

.fad.fa-glass-citrus:after {
  content: "\10f869"
}

.fad.fa-glass-martini:after {
  content: "\10f000"
}

.fad.fa-glass-martini-alt:after {
  content: "\10f57b"
}

.fad.fa-glass-whiskey:after {
  content: "\10f7a0"
}

.fad.fa-glass-whiskey-rocks:after {
  content: "\10f7a1"
}

.fad.fa-glasses:after {
  content: "\10f530"
}

.fad.fa-glasses-alt:after {
  content: "\10f5f5"
}

.fad.fa-globe:after {
  content: "\10f0ac"
}

.fad.fa-globe-africa:after {
  content: "\10f57c"
}

.fad.fa-globe-americas:after {
  content: "\10f57d"
}

.fad.fa-globe-asia:after {
  content: "\10f57e"
}

.fad.fa-globe-europe:after {
  content: "\10f7a2"
}

.fad.fa-globe-snow:after {
  content: "\10f7a3"
}

.fad.fa-globe-stand:after {
  content: "\10f5f6"
}

.fad.fa-golf-ball:after {
  content: "\10f450"
}

.fad.fa-golf-club:after {
  content: "\10f451"
}

.fad.fa-gopuram:after {
  content: "\10f664"
}

.fad.fa-graduation-cap:after {
  content: "\10f19d"
}

.fad.fa-gramophone:after {
  content: "\10f8bd"
}

.fad.fa-greater-than:after {
  content: "\10f531"
}

.fad.fa-greater-than-equal:after {
  content: "\10f532"
}

.fad.fa-grimace:after {
  content: "\10f57f"
}

.fad.fa-grin:after {
  content: "\10f580"
}

.fad.fa-grin-alt:after {
  content: "\10f581"
}

.fad.fa-grin-beam:after {
  content: "\10f582"
}

.fad.fa-grin-beam-sweat:after {
  content: "\10f583"
}

.fad.fa-grin-hearts:after {
  content: "\10f584"
}

.fad.fa-grin-squint:after {
  content: "\10f585"
}

.fad.fa-grin-squint-tears:after {
  content: "\10f586"
}

.fad.fa-grin-stars:after {
  content: "\10f587"
}

.fad.fa-grin-tears:after {
  content: "\10f588"
}

.fad.fa-grin-tongue:after {
  content: "\10f589"
}

.fad.fa-grin-tongue-squint:after {
  content: "\10f58a"
}

.fad.fa-grin-tongue-wink:after {
  content: "\10f58b"
}

.fad.fa-grin-wink:after {
  content: "\10f58c"
}

.fad.fa-grip-horizontal:after {
  content: "\10f58d"
}

.fad.fa-grip-lines:after {
  content: "\10f7a4"
}

.fad.fa-grip-lines-vertical:after {
  content: "\10f7a5"
}

.fad.fa-grip-vertical:after {
  content: "\10f58e"
}

.fad.fa-guitar:after {
  content: "\10f7a6"
}

.fad.fa-guitar-electric:after {
  content: "\10f8be"
}

.fad.fa-guitars:after {
  content: "\10f8bf"
}

.fad.fa-h-square:after {
  content: "\10f0fd"
}

.fad.fa-h1:after {
  content: "\10f313"
}

.fad.fa-h2:after {
  content: "\10f314"
}

.fad.fa-h3:after {
  content: "\10f315"
}

.fad.fa-h4:after {
  content: "\10f86a"
}

.fad.fa-hamburger:after {
  content: "\10f805"
}

.fad.fa-hammer:after {
  content: "\10f6e3"
}

.fad.fa-hammer-war:after {
  content: "\10f6e4"
}

.fad.fa-hamsa:after {
  content: "\10f665"
}

.fad.fa-hand-heart:after {
  content: "\10f4bc"
}

.fad.fa-hand-holding:after {
  content: "\10f4bd"
}

.fad.fa-hand-holding-box:after {
  content: "\10f47b"
}

.fad.fa-hand-holding-heart:after {
  content: "\10f4be"
}

.fad.fa-hand-holding-magic:after {
  content: "\10f6e5"
}

.fad.fa-hand-holding-medical:after {
  content: "\10f95c"
}

.fad.fa-hand-holding-seedling:after {
  content: "\10f4bf"
}

.fad.fa-hand-holding-usd:after {
  content: "\10f4c0"
}

.fad.fa-hand-holding-water:after {
  content: "\10f4c1"
}

.fad.fa-hand-lizard:after {
  content: "\10f258"
}

.fad.fa-hand-middle-finger:after {
  content: "\10f806"
}

.fad.fa-hand-paper:after {
  content: "\10f256"
}

.fad.fa-hand-peace:after {
  content: "\10f25b"
}

.fad.fa-hand-point-down:after {
  content: "\10f0a7"
}

.fad.fa-hand-point-left:after {
  content: "\10f0a5"
}

.fad.fa-hand-point-right:after {
  content: "\10f0a4"
}

.fad.fa-hand-point-up:after {
  content: "\10f0a6"
}

.fad.fa-hand-pointer:after {
  content: "\10f25a"
}

.fad.fa-hand-receiving:after {
  content: "\10f47c"
}

.fad.fa-hand-rock:after {
  content: "\10f255"
}

.fad.fa-hand-scissors:after {
  content: "\10f257"
}

.fad.fa-hand-sparkles:after {
  content: "\10f95d"
}

.fad.fa-hand-spock:after {
  content: "\10f259"
}

.fad.fa-hands:after {
  content: "\10f4c2"
}

.fad.fa-hands-heart:after {
  content: "\10f4c3"
}

.fad.fa-hands-helping:after {
  content: "\10f4c4"
}

.fad.fa-hands-usd:after {
  content: "\10f4c5"
}

.fad.fa-hands-wash:after {
  content: "\10f95e"
}

.fad.fa-handshake:after {
  content: "\10f2b5"
}

.fad.fa-handshake-alt:after {
  content: "\10f4c6"
}

.fad.fa-handshake-alt-slash:after {
  content: "\10f95f"
}

.fad.fa-handshake-slash:after {
  content: "\10f960"
}

.fad.fa-hanukiah:after {
  content: "\10f6e6"
}

.fad.fa-hard-hat:after {
  content: "\10f807"
}

.fad.fa-hashtag:after {
  content: "\10f292"
}

.fad.fa-hat-chef:after {
  content: "\10f86b"
}

.fad.fa-hat-cowboy:after {
  content: "\10f8c0"
}

.fad.fa-hat-cowboy-side:after {
  content: "\10f8c1"
}

.fad.fa-hat-santa:after {
  content: "\10f7a7"
}

.fad.fa-hat-winter:after {
  content: "\10f7a8"
}

.fad.fa-hat-witch:after {
  content: "\10f6e7"
}

.fad.fa-hat-wizard:after {
  content: "\10f6e8"
}

.fad.fa-hdd:after {
  content: "\10f0a0"
}

.fad.fa-head-side:after {
  content: "\10f6e9"
}

.fad.fa-head-side-brain:after {
  content: "\10f808"
}

.fad.fa-head-side-cough:after {
  content: "\10f961"
}

.fad.fa-head-side-cough-slash:after {
  content: "\10f962"
}

.fad.fa-head-side-headphones:after {
  content: "\10f8c2"
}

.fad.fa-head-side-mask:after {
  content: "\10f963"
}

.fad.fa-head-side-medical:after {
  content: "\10f809"
}

.fad.fa-head-side-virus:after {
  content: "\10f964"
}

.fad.fa-head-vr:after {
  content: "\10f6ea"
}

.fad.fa-heading:after {
  content: "\10f1dc"
}

.fad.fa-headphones:after {
  content: "\10f025"
}

.fad.fa-headphones-alt:after {
  content: "\10f58f"
}

.fad.fa-headset:after {
  content: "\10f590"
}

.fad.fa-heart:after {
  content: "\10f004"
}

.fad.fa-heart-broken:after {
  content: "\10f7a9"
}

.fad.fa-heart-circle:after {
  content: "\10f4c7"
}

.fad.fa-heart-rate:after {
  content: "\10f5f8"
}

.fad.fa-heart-square:after {
  content: "\10f4c8"
}

.fad.fa-heartbeat:after {
  content: "\10f21e"
}

.fad.fa-heat:after {
  content: "\10f90c"
}

.fad.fa-helicopter:after {
  content: "\10f533"
}

.fad.fa-helmet-battle:after {
  content: "\10f6eb"
}

.fad.fa-hexagon:after {
  content: "\10f312"
}

.fad.fa-highlighter:after {
  content: "\10f591"
}

.fad.fa-hiking:after {
  content: "\10f6ec"
}

.fad.fa-hippo:after {
  content: "\10f6ed"
}

.fad.fa-history:after {
  content: "\10f1da"
}

.fad.fa-hockey-mask:after {
  content: "\10f6ee"
}

.fad.fa-hockey-puck:after {
  content: "\10f453"
}

.fad.fa-hockey-sticks:after {
  content: "\10f454"
}

.fad.fa-holly-berry:after {
  content: "\10f7aa"
}

.fad.fa-home:after {
  content: "\10f015"
}

.fad.fa-home-alt:after {
  content: "\10f80a"
}

.fad.fa-home-heart:after {
  content: "\10f4c9"
}

.fad.fa-home-lg:after {
  content: "\10f80b"
}

.fad.fa-home-lg-alt:after {
  content: "\10f80c"
}

.fad.fa-hood-cloak:after {
  content: "\10f6ef"
}

.fad.fa-horizontal-rule:after {
  content: "\10f86c"
}

.fad.fa-horse:after {
  content: "\10f6f0"
}

.fad.fa-horse-head:after {
  content: "\10f7ab"
}

.fad.fa-horse-saddle:after {
  content: "\10f8c3"
}

.fad.fa-hospital:after {
  content: "\10f0f8"
}

.fad.fa-hospital-alt:after {
  content: "\10f47d"
}

.fad.fa-hospital-symbol:after {
  content: "\10f47e"
}

.fad.fa-hospital-user:after {
  content: "\10f80d"
}

.fad.fa-hospitals:after {
  content: "\10f80e"
}

.fad.fa-hot-tub:after {
  content: "\10f593"
}

.fad.fa-hotdog:after {
  content: "\10f80f"
}

.fad.fa-hotel:after {
  content: "\10f594"
}

.fad.fa-hourglass:after {
  content: "\10f254"
}

.fad.fa-hourglass-end:after {
  content: "\10f253"
}

.fad.fa-hourglass-half:after {
  content: "\10f252"
}

.fad.fa-hourglass-start:after {
  content: "\10f251"
}

.fad.fa-house:after {
  content: "\10f90d"
}

.fad.fa-house-damage:after {
  content: "\10f6f1"
}

.fad.fa-house-day:after {
  content: "\10f90e"
}

.fad.fa-house-flood:after {
  content: "\10f74f"
}

.fad.fa-house-leave:after {
  content: "\10f90f"
}

.fad.fa-house-night:after {
  content: "\10f910"
}

.fad.fa-house-return:after {
  content: "\10f911"
}

.fad.fa-house-signal:after {
  content: "\10f912"
}

.fad.fa-house-user:after {
  content: "\10f965"
}

.fad.fa-hryvnia:after {
  content: "\10f6f2"
}

.fad.fa-humidity:after {
  content: "\10f750"
}

.fad.fa-hurricane:after {
  content: "\10f751"
}

.fad.fa-i-cursor:after {
  content: "\10f246"
}

.fad.fa-ice-cream:after {
  content: "\10f810"
}

.fad.fa-ice-skate:after {
  content: "\10f7ac"
}

.fad.fa-icicles:after {
  content: "\10f7ad"
}

.fad.fa-icons:after {
  content: "\10f86d"
}

.fad.fa-icons-alt:after {
  content: "\10f86e"
}

.fad.fa-id-badge:after {
  content: "\10f2c1"
}

.fad.fa-id-card:after {
  content: "\10f2c2"
}

.fad.fa-id-card-alt:after {
  content: "\10f47f"
}

.fad.fa-igloo:after {
  content: "\10f7ae"
}

.fad.fa-image:after {
  content: "\10f03e"
}

.fad.fa-image-polaroid:after {
  content: "\10f8c4"
}

.fad.fa-images:after {
  content: "\10f302"
}

.fad.fa-inbox:after {
  content: "\10f01c"
}

.fad.fa-inbox-in:after {
  content: "\10f310"
}

.fad.fa-inbox-out:after {
  content: "\10f311"
}

.fad.fa-indent:after {
  content: "\10f03c"
}

.fad.fa-industry:after {
  content: "\10f275"
}

.fad.fa-industry-alt:after {
  content: "\10f3b3"
}

.fad.fa-infinity:after {
  content: "\10f534"
}

.fad.fa-info:after {
  content: "\10f129"
}

.fad.fa-info-circle:after {
  content: "\10f05a"
}

.fad.fa-info-square:after {
  content: "\10f30f"
}

.fad.fa-inhaler:after {
  content: "\10f5f9"
}

.fad.fa-integral:after {
  content: "\10f667"
}

.fad.fa-intersection:after {
  content: "\10f668"
}

.fad.fa-inventory:after {
  content: "\10f480"
}

.fad.fa-island-tropical:after {
  content: "\10f811"
}

.fad.fa-italic:after {
  content: "\10f033"
}

.fad.fa-jack-o-lantern:after {
  content: "\10f30e"
}

.fad.fa-jedi:after {
  content: "\10f669"
}

.fad.fa-joint:after {
  content: "\10f595"
}

.fad.fa-journal-whills:after {
  content: "\10f66a"
}

.fad.fa-joystick:after {
  content: "\10f8c5"
}

.fad.fa-jug:after {
  content: "\10f8c6"
}

.fad.fa-kaaba:after {
  content: "\10f66b"
}

.fad.fa-kazoo:after {
  content: "\10f8c7"
}

.fad.fa-kerning:after {
  content: "\10f86f"
}

.fad.fa-key:after {
  content: "\10f084"
}

.fad.fa-key-skeleton:after {
  content: "\10f6f3"
}

.fad.fa-keyboard:after {
  content: "\10f11c"
}

.fad.fa-keynote:after {
  content: "\10f66c"
}

.fad.fa-khanda:after {
  content: "\10f66d"
}

.fad.fa-kidneys:after {
  content: "\10f5fb"
}

.fad.fa-kiss:after {
  content: "\10f596"
}

.fad.fa-kiss-beam:after {
  content: "\10f597"
}

.fad.fa-kiss-wink-heart:after {
  content: "\10f598"
}

.fad.fa-kite:after {
  content: "\10f6f4"
}

.fad.fa-kiwi-bird:after {
  content: "\10f535"
}

.fad.fa-knife-kitchen:after {
  content: "\10f6f5"
}

.fad.fa-lambda:after {
  content: "\10f66e"
}

.fad.fa-lamp:after {
  content: "\10f4ca"
}

.fad.fa-lamp-desk:after {
  content: "\10f914"
}

.fad.fa-lamp-floor:after {
  content: "\10f915"
}

.fad.fa-landmark:after {
  content: "\10f66f"
}

.fad.fa-landmark-alt:after {
  content: "\10f752"
}

.fad.fa-language:after {
  content: "\10f1ab"
}

.fad.fa-laptop:after {
  content: "\10f109"
}

.fad.fa-laptop-code:after {
  content: "\10f5fc"
}

.fad.fa-laptop-house:after {
  content: "\10f966"
}

.fad.fa-laptop-medical:after {
  content: "\10f812"
}

.fad.fa-lasso:after {
  content: "\10f8c8"
}

.fad.fa-laugh:after {
  content: "\10f599"
}

.fad.fa-laugh-beam:after {
  content: "\10f59a"
}

.fad.fa-laugh-squint:after {
  content: "\10f59b"
}

.fad.fa-laugh-wink:after {
  content: "\10f59c"
}

.fad.fa-layer-group:after {
  content: "\10f5fd"
}

.fad.fa-layer-minus:after {
  content: "\10f5fe"
}

.fad.fa-layer-plus:after {
  content: "\10f5ff"
}

.fad.fa-leaf:after {
  content: "\10f06c"
}

.fad.fa-leaf-heart:after {
  content: "\10f4cb"
}

.fad.fa-leaf-maple:after {
  content: "\10f6f6"
}

.fad.fa-leaf-oak:after {
  content: "\10f6f7"
}

.fad.fa-lemon:after {
  content: "\10f094"
}

.fad.fa-less-than:after {
  content: "\10f536"
}

.fad.fa-less-than-equal:after {
  content: "\10f537"
}

.fad.fa-level-down:after {
  content: "\10f149"
}

.fad.fa-level-down-alt:after {
  content: "\10f3be"
}

.fad.fa-level-up:after {
  content: "\10f148"
}

.fad.fa-level-up-alt:after {
  content: "\10f3bf"
}

.fad.fa-life-ring:after {
  content: "\10f1cd"
}

.fad.fa-light-ceiling:after {
  content: "\10f916"
}

.fad.fa-light-switch:after {
  content: "\10f917"
}

.fad.fa-light-switch-off:after {
  content: "\10f918"
}

.fad.fa-light-switch-on:after {
  content: "\10f919"
}

.fad.fa-lightbulb:after {
  content: "\10f0eb"
}

.fad.fa-lightbulb-dollar:after {
  content: "\10f670"
}

.fad.fa-lightbulb-exclamation:after {
  content: "\10f671"
}

.fad.fa-lightbulb-on:after {
  content: "\10f672"
}

.fad.fa-lightbulb-slash:after {
  content: "\10f673"
}

.fad.fa-lights-holiday:after {
  content: "\10f7b2"
}

.fad.fa-line-columns:after {
  content: "\10f870"
}

.fad.fa-line-height:after {
  content: "\10f871"
}

.fad.fa-link:after {
  content: "\10f0c1"
}

.fad.fa-lips:after {
  content: "\10f600"
}

.fad.fa-lira-sign:after {
  content: "\10f195"
}

.fad.fa-list:after {
  content: "\10f03a"
}

.fad.fa-list-alt:after {
  content: "\10f022"
}

.fad.fa-list-music:after {
  content: "\10f8c9"
}

.fad.fa-list-ol:after {
  content: "\10f0cb"
}

.fad.fa-list-ul:after {
  content: "\10f0ca"
}

.fad.fa-location:after {
  content: "\10f601"
}

.fad.fa-location-arrow:after {
  content: "\10f124"
}

.fad.fa-location-circle:after {
  content: "\10f602"
}

.fad.fa-location-slash:after {
  content: "\10f603"
}

.fad.fa-lock:after {
  content: "\10f023"
}

.fad.fa-lock-alt:after {
  content: "\10f30d"
}

.fad.fa-lock-open:after {
  content: "\10f3c1"
}

.fad.fa-lock-open-alt:after {
  content: "\10f3c2"
}

.fad.fa-long-arrow-alt-down:after {
  content: "\10f309"
}

.fad.fa-long-arrow-alt-left:after {
  content: "\10f30a"
}

.fad.fa-long-arrow-alt-right:after {
  content: "\10f30b"
}

.fad.fa-long-arrow-alt-up:after {
  content: "\10f30c"
}

.fad.fa-long-arrow-down:after {
  content: "\10f175"
}

.fad.fa-long-arrow-left:after {
  content: "\10f177"
}

.fad.fa-long-arrow-right:after {
  content: "\10f178"
}

.fad.fa-long-arrow-up:after {
  content: "\10f176"
}

.fad.fa-loveseat:after {
  content: "\10f4cc"
}

.fad.fa-low-vision:after {
  content: "\10f2a8"
}

.fad.fa-luchador:after {
  content: "\10f455"
}

.fad.fa-luggage-cart:after {
  content: "\10f59d"
}

.fad.fa-lungs:after {
  content: "\10f604"
}

.fad.fa-lungs-virus:after {
  content: "\10f967"
}

.fad.fa-mace:after {
  content: "\10f6f8"
}

.fad.fa-magic:after {
  content: "\10f0d0"
}

.fad.fa-magnet:after {
  content: "\10f076"
}

.fad.fa-mail-bulk:after {
  content: "\10f674"
}

.fad.fa-mailbox:after {
  content: "\10f813"
}

.fad.fa-male:after {
  content: "\10f183"
}

.fad.fa-mandolin:after {
  content: "\10f6f9"
}

.fad.fa-map:after {
  content: "\10f279"
}

.fad.fa-map-marked:after {
  content: "\10f59f"
}

.fad.fa-map-marked-alt:after {
  content: "\10f5a0"
}

.fad.fa-map-marker:after {
  content: "\10f041"
}

.fad.fa-map-marker-alt:after {
  content: "\10f3c5"
}

.fad.fa-map-marker-alt-slash:after {
  content: "\10f605"
}

.fad.fa-map-marker-check:after {
  content: "\10f606"
}

.fad.fa-map-marker-edit:after {
  content: "\10f607"
}

.fad.fa-map-marker-exclamation:after {
  content: "\10f608"
}

.fad.fa-map-marker-minus:after {
  content: "\10f609"
}

.fad.fa-map-marker-plus:after {
  content: "\10f60a"
}

.fad.fa-map-marker-question:after {
  content: "\10f60b"
}

.fad.fa-map-marker-slash:after {
  content: "\10f60c"
}

.fad.fa-map-marker-smile:after {
  content: "\10f60d"
}

.fad.fa-map-marker-times:after {
  content: "\10f60e"
}

.fad.fa-map-pin:after {
  content: "\10f276"
}

.fad.fa-map-signs:after {
  content: "\10f277"
}

.fad.fa-marker:after {
  content: "\10f5a1"
}

.fad.fa-mars:after {
  content: "\10f222"
}

.fad.fa-mars-double:after {
  content: "\10f227"
}

.fad.fa-mars-stroke:after {
  content: "\10f229"
}

.fad.fa-mars-stroke-h:after {
  content: "\10f22b"
}

.fad.fa-mars-stroke-v:after {
  content: "\10f22a"
}

.fad.fa-mask:after {
  content: "\10f6fa"
}

.fad.fa-meat:after {
  content: "\10f814"
}

.fad.fa-medal:after {
  content: "\10f5a2"
}

.fad.fa-medkit:after {
  content: "\10f0fa"
}

.fad.fa-megaphone:after {
  content: "\10f675"
}

.fad.fa-meh:after {
  content: "\10f11a"
}

.fad.fa-meh-blank:after {
  content: "\10f5a4"
}

.fad.fa-meh-rolling-eyes:after {
  content: "\10f5a5"
}

.fad.fa-memory:after {
  content: "\10f538"
}

.fad.fa-menorah:after {
  content: "\10f676"
}

.fad.fa-mercury:after {
  content: "\10f223"
}

.fad.fa-meteor:after {
  content: "\10f753"
}

.fad.fa-microchip:after {
  content: "\10f2db"
}

.fad.fa-microphone:after {
  content: "\10f130"
}

.fad.fa-microphone-alt:after {
  content: "\10f3c9"
}

.fad.fa-microphone-alt-slash:after {
  content: "\10f539"
}

.fad.fa-microphone-slash:after {
  content: "\10f131"
}

.fad.fa-microphone-stand:after {
  content: "\10f8cb"
}

.fad.fa-microscope:after {
  content: "\10f610"
}

.fad.fa-microwave:after {
  content: "\10f91b"
}

.fad.fa-mind-share:after {
  content: "\10f677"
}

.fad.fa-minus:after {
  content: "\10f068"
}

.fad.fa-minus-circle:after {
  content: "\10f056"
}

.fad.fa-minus-hexagon:after {
  content: "\10f307"
}

.fad.fa-minus-octagon:after {
  content: "\10f308"
}

.fad.fa-minus-square:after {
  content: "\10f146"
}

.fad.fa-mistletoe:after {
  content: "\10f7b4"
}

.fad.fa-mitten:after {
  content: "\10f7b5"
}

.fad.fa-mobile:after {
  content: "\10f10b"
}

.fad.fa-mobile-alt:after {
  content: "\10f3cd"
}

.fad.fa-mobile-android:after {
  content: "\10f3ce"
}

.fad.fa-mobile-android-alt:after {
  content: "\10f3cf"
}

.fad.fa-money-bill:after {
  content: "\10f0d6"
}

.fad.fa-money-bill-alt:after {
  content: "\10f3d1"
}

.fad.fa-money-bill-wave:after {
  content: "\10f53a"
}

.fad.fa-money-bill-wave-alt:after {
  content: "\10f53b"
}

.fad.fa-money-check:after {
  content: "\10f53c"
}

.fad.fa-money-check-alt:after {
  content: "\10f53d"
}

.fad.fa-money-check-edit:after {
  content: "\10f872"
}

.fad.fa-money-check-edit-alt:after {
  content: "\10f873"
}

.fad.fa-monitor-heart-rate:after {
  content: "\10f611"
}

.fad.fa-monkey:after {
  content: "\10f6fb"
}

.fad.fa-monument:after {
  content: "\10f5a6"
}

.fad.fa-moon:after {
  content: "\10f186"
}

.fad.fa-moon-cloud:after {
  content: "\10f754"
}

.fad.fa-moon-stars:after {
  content: "\10f755"
}

.fad.fa-mortar-pestle:after {
  content: "\10f5a7"
}

.fad.fa-mosque:after {
  content: "\10f678"
}

.fad.fa-motorcycle:after {
  content: "\10f21c"
}

.fad.fa-mountain:after {
  content: "\10f6fc"
}

.fad.fa-mountains:after {
  content: "\10f6fd"
}

.fad.fa-mouse:after {
  content: "\10f8cc"
}

.fad.fa-mouse-alt:after {
  content: "\10f8cd"
}

.fad.fa-mouse-pointer:after {
  content: "\10f245"
}

.fad.fa-mp3-player:after {
  content: "\10f8ce"
}

.fad.fa-mug:after {
  content: "\10f874"
}

.fad.fa-mug-hot:after {
  content: "\10f7b6"
}

.fad.fa-mug-marshmallows:after {
  content: "\10f7b7"
}

.fad.fa-mug-tea:after {
  content: "\10f875"
}

.fad.fa-music:after {
  content: "\10f001"
}

.fad.fa-music-alt:after {
  content: "\10f8cf"
}

.fad.fa-music-alt-slash:after {
  content: "\10f8d0"
}

.fad.fa-music-slash:after {
  content: "\10f8d1"
}

.fad.fa-narwhal:after {
  content: "\10f6fe"
}

.fad.fa-network-wired:after {
  content: "\10f6ff"
}

.fad.fa-neuter:after {
  content: "\10f22c"
}

.fad.fa-newspaper:after {
  content: "\10f1ea"
}

.fad.fa-not-equal:after {
  content: "\10f53e"
}

.fad.fa-notes-medical:after {
  content: "\10f481"
}

.fad.fa-object-group:after {
  content: "\10f247"
}

.fad.fa-object-ungroup:after {
  content: "\10f248"
}

.fad.fa-octagon:after {
  content: "\10f306"
}

.fad.fa-oil-can:after {
  content: "\10f613"
}

.fad.fa-oil-temp:after {
  content: "\10f614"
}

.fad.fa-om:after {
  content: "\10f679"
}

.fad.fa-omega:after {
  content: "\10f67a"
}

.fad.fa-ornament:after {
  content: "\10f7b8"
}

.fad.fa-otter:after {
  content: "\10f700"
}

.fad.fa-outdent:after {
  content: "\10f03b"
}

.fad.fa-outlet:after {
  content: "\10f91c"
}

.fad.fa-oven:after {
  content: "\10f91d"
}

.fad.fa-overline:after {
  content: "\10f876"
}

.fad.fa-page-break:after {
  content: "\10f877"
}

.fad.fa-pager:after {
  content: "\10f815"
}

.fad.fa-paint-brush:after {
  content: "\10f1fc"
}

.fad.fa-paint-brush-alt:after {
  content: "\10f5a9"
}

.fad.fa-paint-roller:after {
  content: "\10f5aa"
}

.fad.fa-palette:after {
  content: "\10f53f"
}

.fad.fa-pallet:after {
  content: "\10f482"
}

.fad.fa-pallet-alt:after {
  content: "\10f483"
}

.fad.fa-paper-plane:after {
  content: "\10f1d8"
}

.fad.fa-paperclip:after {
  content: "\10f0c6"
}

.fad.fa-parachute-box:after {
  content: "\10f4cd"
}

.fad.fa-paragraph:after {
  content: "\10f1dd"
}

.fad.fa-paragraph-rtl:after {
  content: "\10f878"
}

.fad.fa-parking:after {
  content: "\10f540"
}

.fad.fa-parking-circle:after {
  content: "\10f615"
}

.fad.fa-parking-circle-slash:after {
  content: "\10f616"
}

.fad.fa-parking-slash:after {
  content: "\10f617"
}

.fad.fa-passport:after {
  content: "\10f5ab"
}

.fad.fa-pastafarianism:after {
  content: "\10f67b"
}

.fad.fa-paste:after {
  content: "\10f0ea"
}

.fad.fa-pause:after {
  content: "\10f04c"
}

.fad.fa-pause-circle:after {
  content: "\10f28b"
}

.fad.fa-paw:after {
  content: "\10f1b0"
}

.fad.fa-paw-alt:after {
  content: "\10f701"
}

.fad.fa-paw-claws:after {
  content: "\10f702"
}

.fad.fa-peace:after {
  content: "\10f67c"
}

.fad.fa-pegasus:after {
  content: "\10f703"
}

.fad.fa-pen:after {
  content: "\10f304"
}

.fad.fa-pen-alt:after {
  content: "\10f305"
}

.fad.fa-pen-fancy:after {
  content: "\10f5ac"
}

.fad.fa-pen-nib:after {
  content: "\10f5ad"
}

.fad.fa-pen-square:after {
  content: "\10f14b"
}

.fad.fa-pencil:after {
  content: "\10f040"
}

.fad.fa-pencil-alt:after {
  content: "\10f303"
}

.fad.fa-pencil-paintbrush:after {
  content: "\10f618"
}

.fad.fa-pencil-ruler:after {
  content: "\10f5ae"
}

.fad.fa-pennant:after {
  content: "\10f456"
}

.fad.fa-people-arrows:after {
  content: "\10f968"
}

.fad.fa-people-carry:after {
  content: "\10f4ce"
}

.fad.fa-pepper-hot:after {
  content: "\10f816"
}

.fad.fa-percent:after {
  content: "\10f295"
}

.fad.fa-percentage:after {
  content: "\10f541"
}

.fad.fa-person-booth:after {
  content: "\10f756"
}

.fad.fa-person-carry:after {
  content: "\10f4cf"
}

.fad.fa-person-dolly:after {
  content: "\10f4d0"
}

.fad.fa-person-dolly-empty:after {
  content: "\10f4d1"
}

.fad.fa-person-sign:after {
  content: "\10f757"
}

.fad.fa-phone:after {
  content: "\10f095"
}

.fad.fa-phone-alt:after {
  content: "\10f879"
}

.fad.fa-phone-laptop:after {
  content: "\10f87a"
}

.fad.fa-phone-office:after {
  content: "\10f67d"
}

.fad.fa-phone-plus:after {
  content: "\10f4d2"
}

.fad.fa-phone-rotary:after {
  content: "\10f8d3"
}

.fad.fa-phone-slash:after {
  content: "\10f3dd"
}

.fad.fa-phone-square:after {
  content: "\10f098"
}

.fad.fa-phone-square-alt:after {
  content: "\10f87b"
}

.fad.fa-phone-volume:after {
  content: "\10f2a0"
}

.fad.fa-photo-video:after {
  content: "\10f87c"
}

.fad.fa-pi:after {
  content: "\10f67e"
}

.fad.fa-piano:after {
  content: "\10f8d4"
}

.fad.fa-piano-keyboard:after {
  content: "\10f8d5"
}

.fad.fa-pie:after {
  content: "\10f705"
}

.fad.fa-pig:after {
  content: "\10f706"
}

.fad.fa-piggy-bank:after {
  content: "\10f4d3"
}

.fad.fa-pills:after {
  content: "\10f484"
}

.fad.fa-pizza:after {
  content: "\10f817"
}

.fad.fa-pizza-slice:after {
  content: "\10f818"
}

.fad.fa-place-of-worship:after {
  content: "\10f67f"
}

.fad.fa-plane:after {
  content: "\10f072"
}

.fad.fa-plane-alt:after {
  content: "\10f3de"
}

.fad.fa-plane-arrival:after {
  content: "\10f5af"
}

.fad.fa-plane-departure:after {
  content: "\10f5b0"
}

.fad.fa-plane-slash:after {
  content: "\10f969"
}

.fad.fa-planet-moon:after {
  content: "\10f91f"
}

.fad.fa-planet-ringed:after {
  content: "\10f920"
}

.fad.fa-play:after {
  content: "\10f04b"
}

.fad.fa-play-circle:after {
  content: "\10f144"
}

.fad.fa-plug:after {
  content: "\10f1e6"
}

.fad.fa-plus:after {
  content: "\10f067"
}

.fad.fa-plus-circle:after {
  content: "\10f055"
}

.fad.fa-plus-hexagon:after {
  content: "\10f300"
}

.fad.fa-plus-octagon:after {
  content: "\10f301"
}

.fad.fa-plus-square:after {
  content: "\10f0fe"
}

.fad.fa-podcast:after {
  content: "\10f2ce"
}

.fad.fa-podium:after {
  content: "\10f680"
}

.fad.fa-podium-star:after {
  content: "\10f758"
}

.fad.fa-police-box:after {
  content: "\10f921"
}

.fad.fa-poll:after {
  content: "\10f681"
}

.fad.fa-poll-h:after {
  content: "\10f682"
}

.fad.fa-poll-people:after {
  content: "\10f759"
}

.fad.fa-poo:after {
  content: "\10f2fe"
}

.fad.fa-poo-storm:after {
  content: "\10f75a"
}

.fad.fa-poop:after {
  content: "\10f619"
}

.fad.fa-popcorn:after {
  content: "\10f819"
}

.fad.fa-portal-enter:after {
  content: "\10f922"
}

.fad.fa-portal-exit:after {
  content: "\10f923"
}

.fad.fa-portrait:after {
  content: "\10f3e0"
}

.fad.fa-pound-sign:after {
  content: "\10f154"
}

.fad.fa-power-off:after {
  content: "\10f011"
}

.fad.fa-pray:after {
  content: "\10f683"
}

.fad.fa-praying-hands:after {
  content: "\10f684"
}

.fad.fa-prescription:after {
  content: "\10f5b1"
}

.fad.fa-prescription-bottle:after {
  content: "\10f485"
}

.fad.fa-prescription-bottle-alt:after {
  content: "\10f486"
}

.fad.fa-presentation:after {
  content: "\10f685"
}

.fad.fa-print:after {
  content: "\10f02f"
}

.fad.fa-print-search:after {
  content: "\10f81a"
}

.fad.fa-print-slash:after {
  content: "\10f686"
}

.fad.fa-procedures:after {
  content: "\10f487"
}

.fad.fa-project-diagram:after {
  content: "\10f542"
}

.fad.fa-projector:after {
  content: "\10f8d6"
}

.fad.fa-pump-medical:after {
  content: "\10f96a"
}

.fad.fa-pump-soap:after {
  content: "\10f96b"
}

.fad.fa-pumpkin:after {
  content: "\10f707"
}

.fad.fa-puzzle-piece:after {
  content: "\10f12e"
}

.fad.fa-qrcode:after {
  content: "\10f029"
}

.fad.fa-question:after {
  content: "\10f128"
}

.fad.fa-question-circle:after {
  content: "\10f059"
}

.fad.fa-question-square:after {
  content: "\10f2fd"
}

.fad.fa-quidditch:after {
  content: "\10f458"
}

.fad.fa-quote-left:after {
  content: "\10f10d"
}

.fad.fa-quote-right:after {
  content: "\10f10e"
}

.fad.fa-quran:after {
  content: "\10f687"
}

.fad.fa-rabbit:after {
  content: "\10f708"
}

.fad.fa-rabbit-fast:after {
  content: "\10f709"
}

.fad.fa-racquet:after {
  content: "\10f45a"
}

.fad.fa-radar:after {
  content: "\10f924"
}

.fad.fa-radiation:after {
  content: "\10f7b9"
}

.fad.fa-radiation-alt:after {
  content: "\10f7ba"
}

.fad.fa-radio:after {
  content: "\10f8d7"
}

.fad.fa-radio-alt:after {
  content: "\10f8d8"
}

.fad.fa-rainbow:after {
  content: "\10f75b"
}

.fad.fa-raindrops:after {
  content: "\10f75c"
}

.fad.fa-ram:after {
  content: "\10f70a"
}

.fad.fa-ramp-loading:after {
  content: "\10f4d4"
}

.fad.fa-random:after {
  content: "\10f074"
}

.fad.fa-raygun:after {
  content: "\10f925"
}

.fad.fa-receipt:after {
  content: "\10f543"
}

.fad.fa-record-vinyl:after {
  content: "\10f8d9"
}

.fad.fa-rectangle-landscape:after {
  content: "\10f2fa"
}

.fad.fa-rectangle-portrait:after {
  content: "\10f2fb"
}

.fad.fa-rectangle-wide:after {
  content: "\10f2fc"
}

.fad.fa-recycle:after {
  content: "\10f1b8"
}

.fad.fa-redo:after {
  content: "\10f01e"
}

.fad.fa-redo-alt:after {
  content: "\10f2f9"
}

.fad.fa-refrigerator:after {
  content: "\10f926"
}

.fad.fa-registered:after {
  content: "\10f25d"
}

.fad.fa-remove-format:after {
  content: "\10f87d"
}

.fad.fa-repeat:after {
  content: "\10f363"
}

.fad.fa-repeat-1:after {
  content: "\10f365"
}

.fad.fa-repeat-1-alt:after {
  content: "\10f366"
}

.fad.fa-repeat-alt:after {
  content: "\10f364"
}

.fad.fa-reply:after {
  content: "\10f3e5"
}

.fad.fa-reply-all:after {
  content: "\10f122"
}

.fad.fa-republican:after {
  content: "\10f75e"
}

.fad.fa-restroom:after {
  content: "\10f7bd"
}

.fad.fa-retweet:after {
  content: "\10f079"
}

.fad.fa-retweet-alt:after {
  content: "\10f361"
}

.fad.fa-ribbon:after {
  content: "\10f4d6"
}

.fad.fa-ring:after {
  content: "\10f70b"
}

.fad.fa-rings-wedding:after {
  content: "\10f81b"
}

.fad.fa-road:after {
  content: "\10f018"
}

.fad.fa-robot:after {
  content: "\10f544"
}

.fad.fa-rocket:after {
  content: "\10f135"
}

.fad.fa-rocket-launch:after {
  content: "\10f927"
}

.fad.fa-route:after {
  content: "\10f4d7"
}

.fad.fa-route-highway:after {
  content: "\10f61a"
}

.fad.fa-route-interstate:after {
  content: "\10f61b"
}

.fad.fa-router:after {
  content: "\10f8da"
}

.fad.fa-rss:after {
  content: "\10f09e"
}

.fad.fa-rss-square:after {
  content: "\10f143"
}

.fad.fa-ruble-sign:after {
  content: "\10f158"
}

.fad.fa-ruler:after {
  content: "\10f545"
}

.fad.fa-ruler-combined:after {
  content: "\10f546"
}

.fad.fa-ruler-horizontal:after {
  content: "\10f547"
}

.fad.fa-ruler-triangle:after {
  content: "\10f61c"
}

.fad.fa-ruler-vertical:after {
  content: "\10f548"
}

.fad.fa-running:after {
  content: "\10f70c"
}

.fad.fa-rupee-sign:after {
  content: "\10f156"
}

.fad.fa-rv:after {
  content: "\10f7be"
}

.fad.fa-sack:after {
  content: "\10f81c"
}

.fad.fa-sack-dollar:after {
  content: "\10f81d"
}

.fad.fa-sad-cry:after {
  content: "\10f5b3"
}

.fad.fa-sad-tear:after {
  content: "\10f5b4"
}

.fad.fa-salad:after {
  content: "\10f81e"
}

.fad.fa-sandwich:after {
  content: "\10f81f"
}

.fad.fa-satellite:after {
  content: "\10f7bf"
}

.fad.fa-satellite-dish:after {
  content: "\10f7c0"
}

.fad.fa-sausage:after {
  content: "\10f820"
}

.fad.fa-save:after {
  content: "\10f0c7"
}

.fad.fa-sax-hot:after {
  content: "\10f8db"
}

.fad.fa-saxophone:after {
  content: "\10f8dc"
}

.fad.fa-scalpel:after {
  content: "\10f61d"
}

.fad.fa-scalpel-path:after {
  content: "\10f61e"
}

.fad.fa-scanner:after {
  content: "\10f488"
}

.fad.fa-scanner-image:after {
  content: "\10f8f3"
}

.fad.fa-scanner-keyboard:after {
  content: "\10f489"
}

.fad.fa-scanner-touchscreen:after {
  content: "\10f48a"
}

.fad.fa-scarecrow:after {
  content: "\10f70d"
}

.fad.fa-scarf:after {
  content: "\10f7c1"
}

.fad.fa-school:after {
  content: "\10f549"
}

.fad.fa-screwdriver:after {
  content: "\10f54a"
}

.fad.fa-scroll:after {
  content: "\10f70e"
}

.fad.fa-scroll-old:after {
  content: "\10f70f"
}

.fad.fa-scrubber:after {
  content: "\10f2f8"
}

.fad.fa-scythe:after {
  content: "\10f710"
}

.fad.fa-sd-card:after {
  content: "\10f7c2"
}

.fad.fa-search:after {
  content: "\10f002"
}

.fad.fa-search-dollar:after {
  content: "\10f688"
}

.fad.fa-search-location:after {
  content: "\10f689"
}

.fad.fa-search-minus:after {
  content: "\10f010"
}

.fad.fa-search-plus:after {
  content: "\10f00e"
}

.fad.fa-seedling:after {
  content: "\10f4d8"
}

.fad.fa-send-back:after {
  content: "\10f87e"
}

.fad.fa-send-backward:after {
  content: "\10f87f"
}

.fad.fa-sensor:after {
  content: "\10f928"
}

.fad.fa-sensor-alert:after {
  content: "\10f929"
}

.fad.fa-sensor-fire:after {
  content: "\10f92a"
}

.fad.fa-sensor-on:after {
  content: "\10f92b"
}

.fad.fa-sensor-smoke:after {
  content: "\10f92c"
}

.fad.fa-server:after {
  content: "\10f233"
}

.fad.fa-shapes:after {
  content: "\10f61f"
}

.fad.fa-share:after {
  content: "\10f064"
}

.fad.fa-share-all:after {
  content: "\10f367"
}

.fad.fa-share-alt:after {
  content: "\10f1e0"
}

.fad.fa-share-alt-square:after {
  content: "\10f1e1"
}

.fad.fa-share-square:after {
  content: "\10f14d"
}

.fad.fa-sheep:after {
  content: "\10f711"
}

.fad.fa-shekel-sign:after {
  content: "\10f20b"
}

.fad.fa-shield:after {
  content: "\10f132"
}

.fad.fa-shield-alt:after {
  content: "\10f3ed"
}

.fad.fa-shield-check:after {
  content: "\10f2f7"
}

.fad.fa-shield-cross:after {
  content: "\10f712"
}

.fad.fa-shield-virus:after {
  content: "\10f96c"
}

.fad.fa-ship:after {
  content: "\10f21a"
}

.fad.fa-shipping-fast:after {
  content: "\10f48b"
}

.fad.fa-shipping-timed:after {
  content: "\10f48c"
}

.fad.fa-shish-kebab:after {
  content: "\10f821"
}

.fad.fa-shoe-prints:after {
  content: "\10f54b"
}

.fad.fa-shopping-bag:after {
  content: "\10f290"
}

.fad.fa-shopping-basket:after {
  content: "\10f291"
}

.fad.fa-shopping-cart:after {
  content: "\10f07a"
}

.fad.fa-shovel:after {
  content: "\10f713"
}

.fad.fa-shovel-snow:after {
  content: "\10f7c3"
}

.fad.fa-shower:after {
  content: "\10f2cc"
}

.fad.fa-shredder:after {
  content: "\10f68a"
}

.fad.fa-shuttle-van:after {
  content: "\10f5b6"
}

.fad.fa-shuttlecock:after {
  content: "\10f45b"
}

.fad.fa-sickle:after {
  content: "\10f822"
}

.fad.fa-sigma:after {
  content: "\10f68b"
}

.fad.fa-sign:after {
  content: "\10f4d9"
}

.fad.fa-sign-in:after {
  content: "\10f090"
}

.fad.fa-sign-in-alt:after {
  content: "\10f2f6"
}

.fad.fa-sign-language:after {
  content: "\10f2a7"
}

.fad.fa-sign-out:after {
  content: "\10f08b"
}

.fad.fa-sign-out-alt:after {
  content: "\10f2f5"
}

.fad.fa-signal:after {
  content: "\10f012"
}

.fad.fa-signal-1:after {
  content: "\10f68c"
}

.fad.fa-signal-2:after {
  content: "\10f68d"
}

.fad.fa-signal-3:after {
  content: "\10f68e"
}

.fad.fa-signal-4:after {
  content: "\10f68f"
}

.fad.fa-signal-alt:after {
  content: "\10f690"
}

.fad.fa-signal-alt-1:after {
  content: "\10f691"
}

.fad.fa-signal-alt-2:after {
  content: "\10f692"
}

.fad.fa-signal-alt-3:after {
  content: "\10f693"
}

.fad.fa-signal-alt-slash:after {
  content: "\10f694"
}

.fad.fa-signal-slash:after {
  content: "\10f695"
}

.fad.fa-signal-stream:after {
  content: "\10f8dd"
}

.fad.fa-signature:after {
  content: "\10f5b7"
}

.fad.fa-sim-card:after {
  content: "\10f7c4"
}

.fad.fa-sink:after {
  content: "\10f96d"
}

.fad.fa-siren:after {
  content: "\10f92d"
}

.fad.fa-siren-on:after {
  content: "\10f92e"
}

.fad.fa-sitemap:after {
  content: "\10f0e8"
}

.fad.fa-skating:after {
  content: "\10f7c5"
}

.fad.fa-skeleton:after {
  content: "\10f620"
}

.fad.fa-ski-jump:after {
  content: "\10f7c7"
}

.fad.fa-ski-lift:after {
  content: "\10f7c8"
}

.fad.fa-skiing:after {
  content: "\10f7c9"
}

.fad.fa-skiing-nordic:after {
  content: "\10f7ca"
}

.fad.fa-skull:after {
  content: "\10f54c"
}

.fad.fa-skull-cow:after {
  content: "\10f8de"
}

.fad.fa-skull-crossbones:after {
  content: "\10f714"
}

.fad.fa-slash:after {
  content: "\10f715"
}

.fad.fa-sledding:after {
  content: "\10f7cb"
}

.fad.fa-sleigh:after {
  content: "\10f7cc"
}

.fad.fa-sliders-h:after {
  content: "\10f1de"
}

.fad.fa-sliders-h-square:after {
  content: "\10f3f0"
}

.fad.fa-sliders-v:after {
  content: "\10f3f1"
}

.fad.fa-sliders-v-square:after {
  content: "\10f3f2"
}

.fad.fa-smile:after {
  content: "\10f118"
}

.fad.fa-smile-beam:after {
  content: "\10f5b8"
}

.fad.fa-smile-plus:after {
  content: "\10f5b9"
}

.fad.fa-smile-wink:after {
  content: "\10f4da"
}

.fad.fa-smog:after {
  content: "\10f75f"
}

.fad.fa-smoke:after {
  content: "\10f760"
}

.fad.fa-smoking:after {
  content: "\10f48d"
}

.fad.fa-smoking-ban:after {
  content: "\10f54d"
}

.fad.fa-sms:after {
  content: "\10f7cd"
}

.fad.fa-snake:after {
  content: "\10f716"
}

.fad.fa-snooze:after {
  content: "\10f880"
}

.fad.fa-snow-blowing:after {
  content: "\10f761"
}

.fad.fa-snowboarding:after {
  content: "\10f7ce"
}

.fad.fa-snowflake:after {
  content: "\10f2dc"
}

.fad.fa-snowflakes:after {
  content: "\10f7cf"
}

.fad.fa-snowman:after {
  content: "\10f7d0"
}

.fad.fa-snowmobile:after {
  content: "\10f7d1"
}

.fad.fa-snowplow:after {
  content: "\10f7d2"
}

.fad.fa-soap:after {
  content: "\10f96e"
}

.fad.fa-socks:after {
  content: "\10f696"
}

.fad.fa-solar-panel:after {
  content: "\10f5ba"
}

.fad.fa-solar-system:after {
  content: "\10f92f"
}

.fad.fa-sort:after {
  content: "\10f0dc"
}

.fad.fa-sort-alpha-down:after {
  content: "\10f15d"
}

.fad.fa-sort-alpha-down-alt:after {
  content: "\10f881"
}

.fad.fa-sort-alpha-up:after {
  content: "\10f15e"
}

.fad.fa-sort-alpha-up-alt:after {
  content: "\10f882"
}

.fad.fa-sort-alt:after {
  content: "\10f883"
}

.fad.fa-sort-amount-down:after {
  content: "\10f160"
}

.fad.fa-sort-amount-down-alt:after {
  content: "\10f884"
}

.fad.fa-sort-amount-up:after {
  content: "\10f161"
}

.fad.fa-sort-amount-up-alt:after {
  content: "\10f885"
}

.fad.fa-sort-circle:after {
  content: "\10f930"
}

.fad.fa-sort-circle-down:after {
  content: "\10f931"
}

.fad.fa-sort-circle-up:after {
  content: "\10f932"
}

.fad.fa-sort-down:after {
  content: "\10f0dd"
}

.fad.fa-sort-numeric-down:after {
  content: "\10f162"
}

.fad.fa-sort-numeric-down-alt:after {
  content: "\10f886"
}

.fad.fa-sort-numeric-up:after {
  content: "\10f163"
}

.fad.fa-sort-numeric-up-alt:after {
  content: "\10f887"
}

.fad.fa-sort-shapes-down:after {
  content: "\10f888"
}

.fad.fa-sort-shapes-down-alt:after {
  content: "\10f889"
}

.fad.fa-sort-shapes-up:after {
  content: "\10f88a"
}

.fad.fa-sort-shapes-up-alt:after {
  content: "\10f88b"
}

.fad.fa-sort-size-down:after {
  content: "\10f88c"
}

.fad.fa-sort-size-down-alt:after {
  content: "\10f88d"
}

.fad.fa-sort-size-up:after {
  content: "\10f88e"
}

.fad.fa-sort-size-up-alt:after {
  content: "\10f88f"
}

.fad.fa-sort-up:after {
  content: "\10f0de"
}

.fad.fa-soup:after {
  content: "\10f823"
}

.fad.fa-spa:after {
  content: "\10f5bb"
}

.fad.fa-space-shuttle:after {
  content: "\10f197"
}

.fad.fa-space-station-moon:after {
  content: "\10f933"
}

.fad.fa-space-station-moon-alt:after {
  content: "\10f934"
}

.fad.fa-spade:after {
  content: "\10f2f4"
}

.fad.fa-sparkles:after {
  content: "\10f890"
}

.fad.fa-speaker:after {
  content: "\10f8df"
}

.fad.fa-speakers:after {
  content: "\10f8e0"
}

.fad.fa-spell-check:after {
  content: "\10f891"
}

.fad.fa-spider:after {
  content: "\10f717"
}

.fad.fa-spider-black-widow:after {
  content: "\10f718"
}

.fad.fa-spider-web:after {
  content: "\10f719"
}

.fad.fa-spinner:after {
  content: "\10f110"
}

.fad.fa-spinner-third:after {
  content: "\10f3f4"
}

.fad.fa-splotch:after {
  content: "\10f5bc"
}

.fad.fa-spray-can:after {
  content: "\10f5bd"
}

.fad.fa-sprinkler:after {
  content: "\10f935"
}

.fad.fa-square:after {
  content: "\10f0c8"
}

.fad.fa-square-full:after {
  content: "\10f45c"
}

.fad.fa-square-root:after {
  content: "\10f697"
}

.fad.fa-square-root-alt:after {
  content: "\10f698"
}

.fad.fa-squirrel:after {
  content: "\10f71a"
}

.fad.fa-staff:after {
  content: "\10f71b"
}

.fad.fa-stamp:after {
  content: "\10f5bf"
}

.fad.fa-star:after {
  content: "\10f005"
}

.fad.fa-star-and-crescent:after {
  content: "\10f699"
}

.fad.fa-star-christmas:after {
  content: "\10f7d4"
}

.fad.fa-star-exclamation:after {
  content: "\10f2f3"
}

.fad.fa-star-half:after {
  content: "\10f089"
}

.fad.fa-star-half-alt:after {
  content: "\10f5c0"
}

.fad.fa-star-of-david:after {
  content: "\10f69a"
}

.fad.fa-star-of-life:after {
  content: "\10f621"
}

.fad.fa-star-shooting:after {
  content: "\10f936"
}

.fad.fa-starfighter:after {
  content: "\10f937"
}

.fad.fa-starfighter-alt:after {
  content: "\10f938"
}

.fad.fa-stars:after {
  content: "\10f762"
}

.fad.fa-starship:after {
  content: "\10f939"
}

.fad.fa-starship-freighter:after {
  content: "\10f93a"
}

.fad.fa-steak:after {
  content: "\10f824"
}

.fad.fa-steering-wheel:after {
  content: "\10f622"
}

.fad.fa-step-backward:after {
  content: "\10f048"
}

.fad.fa-step-forward:after {
  content: "\10f051"
}

.fad.fa-stethoscope:after {
  content: "\10f0f1"
}

.fad.fa-sticky-note:after {
  content: "\10f249"
}

.fad.fa-stocking:after {
  content: "\10f7d5"
}

.fad.fa-stomach:after {
  content: "\10f623"
}

.fad.fa-stop:after {
  content: "\10f04d"
}

.fad.fa-stop-circle:after {
  content: "\10f28d"
}

.fad.fa-stopwatch:after {
  content: "\10f2f2"
}

.fad.fa-stopwatch-20:after {
  content: "\10f96f"
}

.fad.fa-store:after {
  content: "\10f54e"
}

.fad.fa-store-alt:after {
  content: "\10f54f"
}

.fad.fa-store-alt-slash:after {
  content: "\10f970"
}

.fad.fa-store-slash:after {
  content: "\10f971"
}

.fad.fa-stream:after {
  content: "\10f550"
}

.fad.fa-street-view:after {
  content: "\10f21d"
}

.fad.fa-stretcher:after {
  content: "\10f825"
}

.fad.fa-strikethrough:after {
  content: "\10f0cc"
}

.fad.fa-stroopwafel:after {
  content: "\10f551"
}

.fad.fa-subscript:after {
  content: "\10f12c"
}

.fad.fa-subway:after {
  content: "\10f239"
}

.fad.fa-suitcase:after {
  content: "\10f0f2"
}

.fad.fa-suitcase-rolling:after {
  content: "\10f5c1"
}

.fad.fa-sun:after {
  content: "\10f185"
}

.fad.fa-sun-cloud:after {
  content: "\10f763"
}

.fad.fa-sun-dust:after {
  content: "\10f764"
}

.fad.fa-sun-haze:after {
  content: "\10f765"
}

.fad.fa-sunglasses:after {
  content: "\10f892"
}

.fad.fa-sunrise:after {
  content: "\10f766"
}

.fad.fa-sunset:after {
  content: "\10f767"
}

.fad.fa-superscript:after {
  content: "\10f12b"
}

.fad.fa-surprise:after {
  content: "\10f5c2"
}

.fad.fa-swatchbook:after {
  content: "\10f5c3"
}

.fad.fa-swimmer:after {
  content: "\10f5c4"
}

.fad.fa-swimming-pool:after {
  content: "\10f5c5"
}

.fad.fa-sword:after {
  content: "\10f71c"
}

.fad.fa-sword-laser:after {
  content: "\10f93b"
}

.fad.fa-sword-laser-alt:after {
  content: "\10f93c"
}

.fad.fa-swords:after {
  content: "\10f71d"
}

.fad.fa-swords-laser:after {
  content: "\10f93d"
}

.fad.fa-synagogue:after {
  content: "\10f69b"
}

.fad.fa-sync:after {
  content: "\10f021"
}

.fad.fa-sync-alt:after {
  content: "\10f2f1"
}

.fad.fa-syringe:after {
  content: "\10f48e"
}

.fad.fa-table:after {
  content: "\10f0ce"
}

.fad.fa-table-tennis:after {
  content: "\10f45d"
}

.fad.fa-tablet:after {
  content: "\10f10a"
}

.fad.fa-tablet-alt:after {
  content: "\10f3fa"
}

.fad.fa-tablet-android:after {
  content: "\10f3fb"
}

.fad.fa-tablet-android-alt:after {
  content: "\10f3fc"
}

.fad.fa-tablet-rugged:after {
  content: "\10f48f"
}

.fad.fa-tablets:after {
  content: "\10f490"
}

.fad.fa-tachometer:after {
  content: "\10f0e4"
}

.fad.fa-tachometer-alt:after {
  content: "\10f3fd"
}

.fad.fa-tachometer-alt-average:after {
  content: "\10f624"
}

.fad.fa-tachometer-alt-fast:after {
  content: "\10f625"
}

.fad.fa-tachometer-alt-fastest:after {
  content: "\10f626"
}

.fad.fa-tachometer-alt-slow:after {
  content: "\10f627"
}

.fad.fa-tachometer-alt-slowest:after {
  content: "\10f628"
}

.fad.fa-tachometer-average:after {
  content: "\10f629"
}

.fad.fa-tachometer-fast:after {
  content: "\10f62a"
}

.fad.fa-tachometer-fastest:after {
  content: "\10f62b"
}

.fad.fa-tachometer-slow:after {
  content: "\10f62c"
}

.fad.fa-tachometer-slowest:after {
  content: "\10f62d"
}

.fad.fa-taco:after {
  content: "\10f826"
}

.fad.fa-tag:after {
  content: "\10f02b"
}

.fad.fa-tags:after {
  content: "\10f02c"
}

.fad.fa-tally:after {
  content: "\10f69c"
}

.fad.fa-tanakh:after {
  content: "\10f827"
}

.fad.fa-tape:after {
  content: "\10f4db"
}

.fad.fa-tasks:after {
  content: "\10f0ae"
}

.fad.fa-tasks-alt:after {
  content: "\10f828"
}

.fad.fa-taxi:after {
  content: "\10f1ba"
}

.fad.fa-teeth:after {
  content: "\10f62e"
}

.fad.fa-teeth-open:after {
  content: "\10f62f"
}

.fad.fa-telescope:after {
  content: "\10f93e"
}

.fad.fa-temperature-down:after {
  content: "\10f93f"
}

.fad.fa-temperature-frigid:after {
  content: "\10f768"
}

.fad.fa-temperature-high:after {
  content: "\10f769"
}

.fad.fa-temperature-hot:after {
  content: "\10f76a"
}

.fad.fa-temperature-low:after {
  content: "\10f76b"
}

.fad.fa-temperature-up:after {
  content: "\10f940"
}

.fad.fa-tenge:after {
  content: "\10f7d7"
}

.fad.fa-tennis-ball:after {
  content: "\10f45e"
}

.fad.fa-terminal:after {
  content: "\10f120"
}

.fad.fa-text:after {
  content: "\10f893"
}

.fad.fa-text-height:after {
  content: "\10f034"
}

.fad.fa-text-size:after {
  content: "\10f894"
}

.fad.fa-text-width:after {
  content: "\10f035"
}

.fad.fa-th:after {
  content: "\10f00a"
}

.fad.fa-th-large:after {
  content: "\10f009"
}

.fad.fa-th-list:after {
  content: "\10f00b"
}

.fad.fa-theater-masks:after {
  content: "\10f630"
}

.fad.fa-thermometer:after {
  content: "\10f491"
}

.fad.fa-thermometer-empty:after {
  content: "\10f2cb"
}

.fad.fa-thermometer-full:after {
  content: "\10f2c7"
}

.fad.fa-thermometer-half:after {
  content: "\10f2c9"
}

.fad.fa-thermometer-quarter:after {
  content: "\10f2ca"
}

.fad.fa-thermometer-three-quarters:after {
  content: "\10f2c8"
}

.fad.fa-theta:after {
  content: "\10f69e"
}

.fad.fa-thumbs-down:after {
  content: "\10f165"
}

.fad.fa-thumbs-up:after {
  content: "\10f164"
}

.fad.fa-thumbtack:after {
  content: "\10f08d"
}

.fad.fa-thunderstorm:after {
  content: "\10f76c"
}

.fad.fa-thunderstorm-moon:after {
  content: "\10f76d"
}

.fad.fa-thunderstorm-sun:after {
  content: "\10f76e"
}

.fad.fa-ticket:after {
  content: "\10f145"
}

.fad.fa-ticket-alt:after {
  content: "\10f3ff"
}

.fad.fa-tilde:after {
  content: "\10f69f"
}

.fad.fa-times:after {
  content: "\10f00d"
}

.fad.fa-times-circle:after {
  content: "\10f057"
}

.fad.fa-times-hexagon:after {
  content: "\10f2ee"
}

.fad.fa-times-octagon:after {
  content: "\10f2f0"
}

.fad.fa-times-square:after {
  content: "\10f2d3"
}

.fad.fa-tint:after {
  content: "\10f043"
}

.fad.fa-tint-slash:after {
  content: "\10f5c7"
}

.fad.fa-tire:after {
  content: "\10f631"
}

.fad.fa-tire-flat:after {
  content: "\10f632"
}

.fad.fa-tire-pressure-warning:after {
  content: "\10f633"
}

.fad.fa-tire-rugged:after {
  content: "\10f634"
}

.fad.fa-tired:after {
  content: "\10f5c8"
}

.fad.fa-toggle-off:after {
  content: "\10f204"
}

.fad.fa-toggle-on:after {
  content: "\10f205"
}

.fad.fa-toilet:after {
  content: "\10f7d8"
}

.fad.fa-toilet-paper:after {
  content: "\10f71e"
}

.fad.fa-toilet-paper-alt:after {
  content: "\10f71f"
}

.fad.fa-toilet-paper-slash:after {
  content: "\10f972"
}

.fad.fa-tombstone:after {
  content: "\10f720"
}

.fad.fa-tombstone-alt:after {
  content: "\10f721"
}

.fad.fa-toolbox:after {
  content: "\10f552"
}

.fad.fa-tools:after {
  content: "\10f7d9"
}

.fad.fa-tooth:after {
  content: "\10f5c9"
}

.fad.fa-toothbrush:after {
  content: "\10f635"
}

.fad.fa-torah:after {
  content: "\10f6a0"
}

.fad.fa-torii-gate:after {
  content: "\10f6a1"
}

.fad.fa-tornado:after {
  content: "\10f76f"
}

.fad.fa-tractor:after {
  content: "\10f722"
}

.fad.fa-trademark:after {
  content: "\10f25c"
}

.fad.fa-traffic-cone:after {
  content: "\10f636"
}

.fad.fa-traffic-light:after {
  content: "\10f637"
}

.fad.fa-traffic-light-go:after {
  content: "\10f638"
}

.fad.fa-traffic-light-slow:after {
  content: "\10f639"
}

.fad.fa-traffic-light-stop:after {
  content: "\10f63a"
}

.fad.fa-trailer:after {
  content: "\10f941"
}

.fad.fa-train:after {
  content: "\10f238"
}

.fad.fa-tram:after {
  content: "\10f7da"
}

.fad.fa-transgender:after {
  content: "\10f224"
}

.fad.fa-transgender-alt:after {
  content: "\10f225"
}

.fad.fa-transporter:after {
  content: "\10f942"
}

.fad.fa-transporter-1:after {
  content: "\10f943"
}

.fad.fa-transporter-2:after {
  content: "\10f944"
}

.fad.fa-transporter-3:after {
  content: "\10f945"
}

.fad.fa-transporter-empty:after {
  content: "\10f946"
}

.fad.fa-trash:after {
  content: "\10f1f8"
}

.fad.fa-trash-alt:after {
  content: "\10f2ed"
}

.fad.fa-trash-restore:after {
  content: "\10f829"
}

.fad.fa-trash-restore-alt:after {
  content: "\10f82a"
}

.fad.fa-trash-undo:after {
  content: "\10f895"
}

.fad.fa-trash-undo-alt:after {
  content: "\10f896"
}

.fad.fa-treasure-chest:after {
  content: "\10f723"
}

.fad.fa-tree:after {
  content: "\10f1bb"
}

.fad.fa-tree-alt:after {
  content: "\10f400"
}

.fad.fa-tree-christmas:after {
  content: "\10f7db"
}

.fad.fa-tree-decorated:after {
  content: "\10f7dc"
}

.fad.fa-tree-large:after {
  content: "\10f7dd"
}

.fad.fa-tree-palm:after {
  content: "\10f82b"
}

.fad.fa-trees:after {
  content: "\10f724"
}

.fad.fa-triangle:after {
  content: "\10f2ec"
}

.fad.fa-triangle-music:after {
  content: "\10f8e2"
}

.fad.fa-trophy:after {
  content: "\10f091"
}

.fad.fa-trophy-alt:after {
  content: "\10f2eb"
}

.fad.fa-truck:after {
  content: "\10f0d1"
}

.fad.fa-truck-container:after {
  content: "\10f4dc"
}

.fad.fa-truck-couch:after {
  content: "\10f4dd"
}

.fad.fa-truck-loading:after {
  content: "\10f4de"
}

.fad.fa-truck-monster:after {
  content: "\10f63b"
}

.fad.fa-truck-moving:after {
  content: "\10f4df"
}

.fad.fa-truck-pickup:after {
  content: "\10f63c"
}

.fad.fa-truck-plow:after {
  content: "\10f7de"
}

.fad.fa-truck-ramp:after {
  content: "\10f4e0"
}

.fad.fa-trumpet:after {
  content: "\10f8e3"
}

.fad.fa-tshirt:after {
  content: "\10f553"
}

.fad.fa-tty:after {
  content: "\10f1e4"
}

.fad.fa-turkey:after {
  content: "\10f725"
}

.fad.fa-turntable:after {
  content: "\10f8e4"
}

.fad.fa-turtle:after {
  content: "\10f726"
}

.fad.fa-tv:after {
  content: "\10f26c"
}

.fad.fa-tv-alt:after {
  content: "\10f8e5"
}

.fad.fa-tv-music:after {
  content: "\10f8e6"
}

.fad.fa-tv-retro:after {
  content: "\10f401"
}

.fad.fa-typewriter:after {
  content: "\10f8e7"
}

.fad.fa-ufo:after {
  content: "\10f947"
}

.fad.fa-ufo-beam:after {
  content: "\10f948"
}

.fad.fa-umbrella:after {
  content: "\10f0e9"
}

.fad.fa-umbrella-beach:after {
  content: "\10f5ca"
}

.fad.fa-underline:after {
  content: "\10f0cd"
}

.fad.fa-undo:after {
  content: "\10f0e2"
}

.fad.fa-undo-alt:after {
  content: "\10f2ea"
}

.fad.fa-unicorn:after {
  content: "\10f727"
}

.fad.fa-union:after {
  content: "\10f6a2"
}

.fad.fa-universal-access:after {
  content: "\10f29a"
}

.fad.fa-university:after {
  content: "\10f19c"
}

.fad.fa-unlink:after {
  content: "\10f127"
}

.fad.fa-unlock:after {
  content: "\10f09c"
}

.fad.fa-unlock-alt:after {
  content: "\10f13e"
}

.fad.fa-upload:after {
  content: "\10f093"
}

.fad.fa-usb-drive:after {
  content: "\10f8e9"
}

.fad.fa-usd-circle:after {
  content: "\10f2e8"
}

.fad.fa-usd-square:after {
  content: "\10f2e9"
}

.fad.fa-user:after {
  content: "\10f007"
}

.fad.fa-user-alien:after {
  content: "\10f94a"
}

.fad.fa-user-alt:after {
  content: "\10f406"
}

.fad.fa-user-alt-slash:after {
  content: "\10f4fa"
}

.fad.fa-user-astronaut:after {
  content: "\10f4fb"
}

.fad.fa-user-chart:after {
  content: "\10f6a3"
}

.fad.fa-user-check:after {
  content: "\10f4fc"
}

.fad.fa-user-circle:after {
  content: "\10f2bd"
}

.fad.fa-user-clock:after {
  content: "\10f4fd"
}

.fad.fa-user-cog:after {
  content: "\10f4fe"
}

.fad.fa-user-cowboy:after {
  content: "\10f8ea"
}

.fad.fa-user-crown:after {
  content: "\10f6a4"
}

.fad.fa-user-edit:after {
  content: "\10f4ff"
}

.fad.fa-user-friends:after {
  content: "\10f500"
}

.fad.fa-user-graduate:after {
  content: "\10f501"
}

.fad.fa-user-hard-hat:after {
  content: "\10f82c"
}

.fad.fa-user-headset:after {
  content: "\10f82d"
}

.fad.fa-user-injured:after {
  content: "\10f728"
}

.fad.fa-user-lock:after {
  content: "\10f502"
}

.fad.fa-user-md:after {
  content: "\10f0f0"
}

.fad.fa-user-md-chat:after {
  content: "\10f82e"
}

.fad.fa-user-minus:after {
  content: "\10f503"
}

.fad.fa-user-music:after {
  content: "\10f8eb"
}

.fad.fa-user-ninja:after {
  content: "\10f504"
}

.fad.fa-user-nurse:after {
  content: "\10f82f"
}

.fad.fa-user-plus:after {
  content: "\10f234"
}

.fad.fa-user-robot:after {
  content: "\10f94b"
}

.fad.fa-user-secret:after {
  content: "\10f21b"
}

.fad.fa-user-shield:after {
  content: "\10f505"
}

.fad.fa-user-slash:after {
  content: "\10f506"
}

.fad.fa-user-tag:after {
  content: "\10f507"
}

.fad.fa-user-tie:after {
  content: "\10f508"
}

.fad.fa-user-times:after {
  content: "\10f235"
}

.fad.fa-user-unlock:after {
  content: "\10f958"
}

.fad.fa-user-visor:after {
  content: "\10f94c"
}

.fad.fa-users:after {
  content: "\10f0c0"
}

.fad.fa-users-class:after {
  content: "\10f63d"
}

.fad.fa-users-cog:after {
  content: "\10f509"
}

.fad.fa-users-crown:after {
  content: "\10f6a5"
}

.fad.fa-users-medical:after {
  content: "\10f830"
}

.fad.fa-users-slash:after {
  content: "\10f973"
}

.fad.fa-utensil-fork:after {
  content: "\10f2e3"
}

.fad.fa-utensil-knife:after {
  content: "\10f2e4"
}

.fad.fa-utensil-spoon:after {
  content: "\10f2e5"
}

.fad.fa-utensils:after {
  content: "\10f2e7"
}

.fad.fa-utensils-alt:after {
  content: "\10f2e6"
}

.fad.fa-vacuum:after {
  content: "\10f94d"
}

.fad.fa-vacuum-robot:after {
  content: "\10f94e"
}

.fad.fa-value-absolute:after {
  content: "\10f6a6"
}

.fad.fa-vector-square:after {
  content: "\10f5cb"
}

.fad.fa-venus:after {
  content: "\10f221"
}

.fad.fa-venus-double:after {
  content: "\10f226"
}

.fad.fa-venus-mars:after {
  content: "\10f228"
}

.fad.fa-vhs:after {
  content: "\10f8ec"
}

.fad.fa-vial:after {
  content: "\10f492"
}

.fad.fa-vials:after {
  content: "\10f493"
}

.fad.fa-video:after {
  content: "\10f03d"
}

.fad.fa-video-plus:after {
  content: "\10f4e1"
}

.fad.fa-video-slash:after {
  content: "\10f4e2"
}

.fad.fa-vihara:after {
  content: "\10f6a7"
}

.fad.fa-violin:after {
  content: "\10f8ed"
}

.fad.fa-virus:after {
  content: "\10f974"
}

.fad.fa-virus-slash:after {
  content: "\10f975"
}

.fad.fa-viruses:after {
  content: "\10f976"
}

.fad.fa-voicemail:after {
  content: "\10f897"
}

.fad.fa-volcano:after {
  content: "\10f770"
}

.fad.fa-volleyball-ball:after {
  content: "\10f45f"
}

.fad.fa-volume:after {
  content: "\10f6a8"
}

.fad.fa-volume-down:after {
  content: "\10f027"
}

.fad.fa-volume-mute:after {
  content: "\10f6a9"
}

.fad.fa-volume-off:after {
  content: "\10f026"
}

.fad.fa-volume-slash:after {
  content: "\10f2e2"
}

.fad.fa-volume-up:after {
  content: "\10f028"
}

.fad.fa-vote-nay:after {
  content: "\10f771"
}

.fad.fa-vote-yea:after {
  content: "\10f772"
}

.fad.fa-vr-cardboard:after {
  content: "\10f729"
}

.fad.fa-wagon-covered:after {
  content: "\10f8ee"
}

.fad.fa-walker:after {
  content: "\10f831"
}

.fad.fa-walkie-talkie:after {
  content: "\10f8ef"
}

.fad.fa-walking:after {
  content: "\10f554"
}

.fad.fa-wallet:after {
  content: "\10f555"
}

.fad.fa-wand:after {
  content: "\10f72a"
}

.fad.fa-wand-magic:after {
  content: "\10f72b"
}

.fad.fa-warehouse:after {
  content: "\10f494"
}

.fad.fa-warehouse-alt:after {
  content: "\10f495"
}

.fad.fa-washer:after {
  content: "\10f898"
}

.fad.fa-watch:after {
  content: "\10f2e1"
}

.fad.fa-watch-calculator:after {
  content: "\10f8f0"
}

.fad.fa-watch-fitness:after {
  content: "\10f63e"
}

.fad.fa-water:after {
  content: "\10f773"
}

.fad.fa-water-lower:after {
  content: "\10f774"
}

.fad.fa-water-rise:after {
  content: "\10f775"
}

.fad.fa-wave-sine:after {
  content: "\10f899"
}

.fad.fa-wave-square:after {
  content: "\10f83e"
}

.fad.fa-wave-triangle:after {
  content: "\10f89a"
}

.fad.fa-waveform:after {
  content: "\10f8f1"
}

.fad.fa-waveform-path:after {
  content: "\10f8f2"
}

.fad.fa-webcam:after {
  content: "\10f832"
}

.fad.fa-webcam-slash:after {
  content: "\10f833"
}

.fad.fa-weight:after {
  content: "\10f496"
}

.fad.fa-weight-hanging:after {
  content: "\10f5cd"
}

.fad.fa-whale:after {
  content: "\10f72c"
}

.fad.fa-wheat:after {
  content: "\10f72d"
}

.fad.fa-wheelchair:after {
  content: "\10f193"
}

.fad.fa-whistle:after {
  content: "\10f460"
}

.fad.fa-wifi:after {
  content: "\10f1eb"
}

.fad.fa-wifi-1:after {
  content: "\10f6aa"
}

.fad.fa-wifi-2:after {
  content: "\10f6ab"
}

.fad.fa-wifi-slash:after {
  content: "\10f6ac"
}

.fad.fa-wind:after {
  content: "\10f72e"
}

.fad.fa-wind-turbine:after {
  content: "\10f89b"
}

.fad.fa-wind-warning:after {
  content: "\10f776"
}

.fad.fa-window:after {
  content: "\10f40e"
}

.fad.fa-window-alt:after {
  content: "\10f40f"
}

.fad.fa-window-close:after {
  content: "\10f410"
}

.fad.fa-window-frame:after {
  content: "\10f94f"
}

.fad.fa-window-frame-open:after {
  content: "\10f950"
}

.fad.fa-window-maximize:after {
  content: "\10f2d0"
}

.fad.fa-window-minimize:after {
  content: "\10f2d1"
}

.fad.fa-window-restore:after {
  content: "\10f2d2"
}

.fad.fa-windsock:after {
  content: "\10f777"
}

.fad.fa-wine-bottle:after {
  content: "\10f72f"
}

.fad.fa-wine-glass:after {
  content: "\10f4e3"
}

.fad.fa-wine-glass-alt:after {
  content: "\10f5ce"
}

.fad.fa-won-sign:after {
  content: "\10f159"
}

.fad.fa-wreath:after {
  content: "\10f7e2"
}

.fad.fa-wrench:after {
  content: "\10f0ad"
}

.fad.fa-x-ray:after {
  content: "\10f497"
}

.fad.fa-yen-sign:after {
  content: "\10f157"
}

.fad.fa-yin-yang:after {
  content: "\10f6ad"
}

@font-face {
  font-family: '#{$CHAMP-ICONS-FONT-NAME}';
  font-style: normal;
  font-weight: 300;
  font-display: block;
  src: url('#{$CHAMP-ICONS-FONT-DIR}ci-light-300.eot');
  src: url('#{$CHAMP-ICONS-FONT-DIR}ci-light-300.eot?#iefix') format("embedded-opentype"),
  url('#{$CHAMP-ICONS-FONT-DIR}ci-light-300.woff2') format("woff2"),
  url('#{$CHAMP-ICONS-FONT-DIR}ci-light-300.woff') format("woff"),
  url('#{$CHAMP-ICONS-FONT-DIR}ci-light-300.ttf') format("truetype"),
  url('#{$CHAMP-ICONS-FONT-DIR}ci-light-300.svg#fontawesome') format("svg");
}

.fal {
  font-weight: 300
}

@font-face {
  font-family: '#{$CHAMP-ICONS-FONT-NAME}';
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url('#{$CHAMP-ICONS-FONT-DIR}ci-regular-400.eot');
  src: url('#{$CHAMP-ICONS-FONT-DIR}ci-regular-400.eot?#iefix') format("embedded-opentype"),
  url('#{$CHAMP-ICONS-FONT-DIR}ci-regular-400.woff2') format("woff2"), url('#{$CHAMP-ICONS-FONT-DIR}ci-regular-400.woff') format("woff"),
  url('#{$CHAMP-ICONS-FONT-DIR}ci-regular-400.ttf') format("truetype"), url('#{$CHAMP-ICONS-FONT-DIR}ci-regular-400.svg#fontawesome') format("svg");
}

.fal, .far {
  font-family: '#{$CHAMP-ICONS-FONT-NAME}';
}

.far {
  font-weight: 400
}

@font-face {
  font-family: '#{$CHAMP-ICONS-FONT-NAME}';
  font-style: normal;
  font-weight: 900;
  font-display: block;
  src: url('#{$CHAMP-ICONS-FONT-DIR}ci-solid-900.eot');
  src: url('#{$CHAMP-ICONS-FONT-DIR}ci-solid-900.eot?#iefix') format("embedded-opentype"),
  url('#{$CHAMP-ICONS-FONT-DIR}ci-solid-900.woff2') format("woff2"),
  url('#{$CHAMP-ICONS-FONT-DIR}ci-solid-900.woff') format("woff"),
  url('#{$CHAMP-ICONS-FONT-DIR}ci-solid-900.ttf') format("truetype"),
  url('#{$CHAMP-ICONS-FONT-DIR}ci-solid-900.svg#fontawesome') format("svg");
}

.fa, .fas {
  font-family: '#{$CHAMP-ICONS-FONT-NAME}';
  font-weight: 900
}

/*!
 * Champ Sans 1.0.0
 * License - https://github.com/SocialChamp/ng-newell/blob/master/LICENSE
 */

$CHAMP-SANS-DIR: './' !default;
$CHAMP-SANS-NAME: 'Champ Sans', san-serif;

/* ******************** Champ Sans - THIN - 100 **************************************** */

@font-face {
    font-family: $CHAMP-SANS-DIR;
    src: url('#{$CHAMP-SANS-DIR}eot/ChampSans-Thin.eot');
    src: url('#{$CHAMP-SANS-DIR}eot/ChampSans-Thin.eot?#iefix') format('embedded-opentype'),
        url('#{$CHAMP-SANS-DIR}woff2/ChampSans-Thin.woff2') format('woff2'),
        url('#{$CHAMP-SANS-DIR}woff/ChampSans-Thin.woff') format('woff'),
        url('#{$CHAMP-SANS-DIR}ttf/ChampSans-Thin.ttf') format('truetype'),
        url('#{$CHAMP-SANS-DIR}svg/ChampSans-Thin.svg#ChampSans-Thin') format('svg');
    font-weight: 100;
    font-style: normal;
}

@font-face {
    font-family: $CHAMP-SANS-DIR;
    src: url('#{$CHAMP-SANS-DIR}eot/ChampSans-ThinIt.eot');
    src: url('#{$CHAMP-SANS-DIR}eot/ChampSans-ThinIt.eot?#iefix') format('embedded-opentype'),
        url('#{$CHAMP-SANS-DIR}woff2/ChampSans-ThinIt.woff2') format('woff2'),
        url('#{$CHAMP-SANS-DIR}woff/ChampSans-ThinIt.woff') format('woff'),
        url('#{$CHAMP-SANS-DIR}ttf/ChampSans-ThinIt.ttf') format('truetype'),
        url('#{$CHAMP-SANS-DIR}svg/ChampSans-ThinIt.svg#ChampSans-ThinIt') format('svg');
    font-weight: 100;
    font-style: italic;
}

/* ******************** Champ Sans - LIGHT - 300 **************************************** */
@font-face {
    font-family: $CHAMP-SANS-DIR;
    src: url('#{$CHAMP-SANS-DIR}eot/ChampSans-Light.eot');
    src: url('#{$CHAMP-SANS-DIR}eot/ChampSans-Light.eot?#iefix') format('embedded-opentype'),
        url('#{$CHAMP-SANS-DIR}woff2/ChampSans-Light.woff2') format('woff2'),
        url('#{$CHAMP-SANS-DIR}woff/ChampSans-Light.woff') format('woff'),
        url('#{$CHAMP-SANS-DIR}ttf/ChampSans-Light.ttf') format('truetype'),
        url('#{$CHAMP-SANS-DIR}svg/ChampSans-Light.svg#ChampSans-Light') format('svg');
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: $CHAMP-SANS-DIR;
    src: url('#{$CHAMP-SANS-DIR}eot/ChampSans-LightIt.eot');
    src: url('#{$CHAMP-SANS-DIR}eot/ChampSans-LightIt.eot?#iefix') format('embedded-opentype'),
        url('#{$CHAMP-SANS-DIR}woff2/ChampSans-LightIt.woff2') format('woff2'),
        url('#{$CHAMP-SANS-DIR}woff/ChampSans-LightIt.woff') format('woff'),
        url('#{$CHAMP-SANS-DIR}ttf/ChampSans-LightIt.ttf') format('truetype'),
        url('#{$CHAMP-SANS-DIR}svg/ChampSans-LightIt.svg#ChampSans-LightIt') format('svg');
    font-weight: 300;
    font-style: italic;
}

/* ******************** Champ Sans - REGULAR - 400 **************************************** */

@font-face {
    font-family: $CHAMP-SANS-DIR;
    src: url('#{$CHAMP-SANS-DIR}eot/ChampSans-Regular.eot');
    src: url('#{$CHAMP-SANS-DIR}eot/ChampSans-Regular.eot?#iefix') format('embedded-opentype'),
        url('#{$CHAMP-SANS-DIR}woff2/ChampSans-Regular.woff2') format('woff2'),
        url('#{$CHAMP-SANS-DIR}woff/ChampSans-Regular.woff') format('woff'),
        url('#{$CHAMP-SANS-DIR}ttf/ChampSans-Regular.ttf') format('truetype'),
        url('#{$CHAMP-SANS-DIR}svg/ChampSans-Regular.svg#ChampSans-Regular') format('svg');
    font-weight: normal;
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: $CHAMP-SANS-DIR;
    src: url('#{$CHAMP-SANS-DIR}eot/ChampSans-RegularIt.eot');
    src: url('#{$CHAMP-SANS-DIR}eot/ChampSans-RegularIt.eot?#iefix') format('embedded-opentype'),
        url('#{$CHAMP-SANS-DIR}woff2/ChampSans-RegularIt.woff2') format('woff2'),
        url('#{$CHAMP-SANS-DIR}woff/ChampSans-RegularIt.woff') format('woff'),
        url('#{$CHAMP-SANS-DIR}ttf/ChampSans-RegularIt.ttf') format('truetype'),
        url('#{$CHAMP-SANS-DIR}svg/ChampSans-RegularIt.svg#ChampSans-RegularIt') format('svg');
    font-weight: normal;
    font-weight: 400;
    font-style: italic;
}

/* ******************** Champ Sans - Medium - 500 **************************************** */

@font-face {
  font-family: $CHAMP-SANS-DIR;
  src: url('#{$CHAMP-SANS-DIR}eot/ChampSans-Medium.eot');
  src: url('#{$CHAMP-SANS-DIR}eot/ChampSans-Medium.eot?#iefix') format('embedded-opentype'),
  url('#{$CHAMP-SANS-DIR}woff2/ChampSans-Medium.woff2') format('woff2'),
  url('#{$CHAMP-SANS-DIR}woff/ChampSans-Medium.woff') format('woff'),
  url('#{$CHAMP-SANS-DIR}ttf/ChampSans-Medium.ttf') format('truetype'),
  url('#{$CHAMP-SANS-DIR}svg/ChampSans-Medium.svg#ChampSans-Medium') format('svg');
  font-weight: 500;
  font-style: normal;
}

@font-face {
  font-family: $CHAMP-SANS-DIR;
  src: url('#{$CHAMP-SANS-DIR}eot/ChampSans-MediumIt.eot');
  src: url('#{$CHAMP-SANS-DIR}eot/ChampSans-MediumIt.eot?#iefix') format('embedded-opentype'),
  url('#{$CHAMP-SANS-DIR}woff2/ChampSans-MediumIt.woff2') format('woff2'),
  url('#{$CHAMP-SANS-DIR}woff/ChampSans-MediumIt.woff') format('woff'),
  url('#{$CHAMP-SANS-DIR}ttf/ChampSans-MediumIt.ttf') format('truetype'),
  url('#{$CHAMP-SANS-DIR}svg/ChampSans-MediumIt.svg#ChampSans-RegularIt') format('svg');
  font-weight: 500;
  font-style: italic;
}

/* ******************** Champ Sans - SEMIBOLD - 600 **************************************** */

@font-face {
    font-family: $CHAMP-SANS-DIR;
    src: url('#{$CHAMP-SANS-DIR}eot/ChampSans-Semibold.eot');
    src: url('#{$CHAMP-SANS-DIR}eot/ChampSans-Semibold.eot?#iefix') format('embedded-opentype'),
        url('#{$CHAMP-SANS-DIR}woff2/ChampSans-Semibold.woff2') format('woff2'),
        url('#{$CHAMP-SANS-DIR}woff/ChampSans-Semibold.woff') format('woff'),
        url('#{$CHAMP-SANS-DIR}ttf/ChampSans-Semibold.ttf') format('truetype'),
        url('#{$CHAMP-SANS-DIR}svg/ChampSans-Semibold.svg#ChampSans-Semibold') format('svg');
    font-weight: 600;
    font-style: normal;
}

@font-face {
    font-family: $CHAMP-SANS-DIR;
    src: url('#{$CHAMP-SANS-DIR}eot/ChampSans-SemiboldIt.eot');
    src: url('#{$CHAMP-SANS-DIR}eot/ChampSans-SemiboldIt.eot?#iefix') format('embedded-opentype'),
        url('#{$CHAMP-SANS-DIR}woff2/ChampSans-SemiboldIt.woff2') format('woff2'),
        url('#{$CHAMP-SANS-DIR}woff/ChampSans-SemiboldIt.woff') format('woff'),
        url('#{$CHAMP-SANS-DIR}ttf/ChampSans-SemiboldIt.ttf') format('truetype'),
        url('#{$CHAMP-SANS-DIR}svg/ChampSans-SemiboldIt.svg#ChampSans-SemiboldIt') format('svg');
    font-weight: 600;
    font-style: italic;
}

/* ******************** Champ Sans - BOLD - 700 **************************************** */

@font-face {
    font-family: $CHAMP-SANS-DIR;
    src: url('#{$CHAMP-SANS-DIR}eot/ChampSans-Bold.eot');
    src: url('#{$CHAMP-SANS-DIR}eot/ChampSans-Bold.eot?#iefix') format('embedded-opentype'),
        url('#{$CHAMP-SANS-DIR}woff2/ChampSans-Bold.woff2') format('woff2'),
        url('#{$CHAMP-SANS-DIR}woff/ChampSans-Bold.woff') format('woff'),
        url('#{$CHAMP-SANS-DIR}ttf/ChampSans-Bold.ttf') format('truetype'),
        url('#{$CHAMP-SANS-DIR}svg/ChampSans-Bold.svg#ChampSans-Bold') format('svg');
    font-weight: 700;
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: $CHAMP-SANS-DIR;
    src: url('#{$CHAMP-SANS-DIR}eot/ChampSans-BoldIt.eot');
    src: url('#{$CHAMP-SANS-DIR}eot/ChampSans-BoldIt.eot?#iefix') format('embedded-opentype'),
        url('#{$CHAMP-SANS-DIR}woff2/ChampSans-BoldIt.woff2') format('woff2'),
        url('#{$CHAMP-SANS-DIR}woff/ChampSans-BoldIt.woff') format('woff'),
        url('#{$CHAMP-SANS-DIR}ttf/ChampSans-BoldIt.ttf') format('truetype'),
        url('#{$CHAMP-SANS-DIR}svg/ChampSans-BoldIt.svg#ChampSans-BoldIt') format('svg');
    font-weight: bold;
    font-weight: 700;
    font-style: italic;
}

/* ******************** Champ Sans - EXTRABOLD - 800 **************************************** */

@font-face {
    font-family: $CHAMP-SANS-DIR;
    src: url('#{$CHAMP-SANS-DIR}eot/ChampSans-Extrabld.eot');
    src: url('#{$CHAMP-SANS-DIR}eot/ChampSans-Extrabld.eot?#iefix') format('embedded-opentype'),
        url('#{$CHAMP-SANS-DIR}woff2/ChampSans-Extrabld.woff2') format('woff2'),
        url('#{$CHAMP-SANS-DIR}woff/ChampSans-Extrabld.woff') format('woff'),
        url('#{$CHAMP-SANS-DIR}ttf/ChampSans-Extrabld.ttf') format('truetype'),
        url('#{$CHAMP-SANS-DIR}svg/ChampSans-Extrabld.svg#ChampSans-Extrabld') format('svg');
    font-weight: 800;
    font-style: normal;
}

@font-face {
    font-family: $CHAMP-SANS-DIR;
    src: url('#{$CHAMP-SANS-DIR}eot/ChampSans-ExtrabldIt.eot');
    src: url('#{$CHAMP-SANS-DIR}eot/ChampSans-ExtrabldIt.eot?#iefix') format('embedded-opentype'),
        url('#{$CHAMP-SANS-DIR}woff2/ChampSans-ExtrabldIt.woff2') format('woff2'),
        url('#{$CHAMP-SANS-DIR}woff/ChampSans-ExtrabldIt.woff') format('woff'),
        url('#{$CHAMP-SANS-DIR}ttf/ChampSans-ExtrabldIt.ttf') format('truetype'),
        url('#{$CHAMP-SANS-DIR}svg/ChampSans-ExtrabldIt.svg#ChampSans-ExtrabldIt') format('svg');
    font-weight: 800;
    font-style: italic;
}

/********************* Champ Sans - BLACK - 900 *****************************************/

@font-face {
    font-family: $CHAMP-SANS-DIR;
    src: url('#{$CHAMP-SANS-DIR}eot/ChampSans-Black.eot');
    src: url('#{$CHAMP-SANS-DIR}eot/ChampSans-Black.eot?#iefix') format('embedded-opentype'),
        url('#{$CHAMP-SANS-DIR}woff2/ChampSans-Black.woff2') format('woff2'),
        url('#{$CHAMP-SANS-DIR}woff/ChampSans-Black.woff') format('woff'),
        url('#{$CHAMP-SANS-DIR}ttf/ChampSans-Black.ttf') format('truetype'),
        url('#{$CHAMP-SANS-DIR}svg/ChampSans-Black.svg#ChampSans-Black') format('svg');
    font-weight: 900;
    font-style: normal;
}

@font-face {
    font-family: $CHAMP-SANS-DIR;
    src: url('#{$CHAMP-SANS-DIR}eot/ChampSans-BlackIt.eot');
    src: url('#{$CHAMP-SANS-DIR}eot/ChampSans-BlackIt.eot?#iefix') format('embedded-opentype'),
        url('#{$CHAMP-SANS-DIR}woff2/ChampSans-BlackIt.woff2') format('woff2'),
        url('#{$CHAMP-SANS-DIR}woff/ChampSans-BlackIt.woff') format('woff'),
        url('#{$CHAMP-SANS-DIR}ttf/ChampSans-BlackIt.ttf') format('truetype'),
        url('#{$CHAMP-SANS-DIR}svg/ChampSans-BlackIt.svg#ChampSans-BlackIt') format('svg');
    font-weight: 900;
    font-style: italic;
}

/* ******************** EOF **************************************** */

// Material Theming
// 
// File for which all imports are resolved and bundled. This is the entry-point for
// the `@angular/material` theming Sass bundle. See `//src/material:theming_bundle`.

// Import all the theming functionality.
// We want overlays to always appear over user content, so set a baseline
// very high z-index for the overlay container, which is where we create the new
// stacking context for all overlays.
$cdk-z-index-overlay-container: 1000 !default;
$cdk-z-index-overlay: 1000 !default;
$cdk-z-index-overlay-backdrop: 1000 !default;

// Background color for all of the backdrops
$cdk-overlay-dark-backdrop-background: rgba(0, 0, 0, 0.32) !default;

// Default backdrop animation is based on the Material Design swift-ease-out.
$backdrop-animation-duration: 400ms !default;
$backdrop-animation-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1) !default;


@mixin cdk-overlay() {
  .cdk-overlay-container, .cdk-global-overlay-wrapper {
    // Disable events from being captured on the overlay container.
    pointer-events: none;

    // The container should be the size of the viewport.
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
  }

  // The overlay-container is an invisible element which contains all individual overlays.
  .cdk-overlay-container {
    position: fixed;
    z-index: $cdk-z-index-overlay-container;

    &:empty {
      // Hide the element when it doesn't have any child nodes. This doesn't
      // include overlays that have been detached, rather than disposed.
      display: none;
    }
  }

  // We use an extra wrapper element in order to use make the overlay itself a flex item.
  // This makes centering the overlay easy without running into the subpixel rendering
  // problems tied to using `transform` and without interfering with the other position
  // strategies.
  .cdk-global-overlay-wrapper {
    display: flex;
    position: absolute;
    z-index: $cdk-z-index-overlay;
  }

  // A single overlay pane.
  .cdk-overlay-pane {
    // Note: it's important for this one to start off `absolute`,
    // in order for us to be able to measure it correctly.
    position: absolute;
    pointer-events: auto;
    box-sizing: border-box;
    z-index: $cdk-z-index-overlay;

    // For connected-position overlays, we set `display: flex` in
    // order to force `max-width` and `max-height` to take effect.
    display: flex;
    max-width: 100%;
    max-height: 100%;
  }

  .cdk-overlay-backdrop {
    // TODO(jelbourn): reuse sidenav fullscreen mixin.
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;

    z-index: $cdk-z-index-overlay-backdrop;
    pointer-events: auto;
    -webkit-tap-highlight-color: transparent;
    transition: opacity $backdrop-animation-duration $backdrop-animation-timing-function;
    opacity: 0;

    &.cdk-overlay-backdrop-showing {
      opacity: 1;

      // In high contrast mode the rgba background will become solid so we need to fall back
      // to making it opaque using `opacity`. Note that we can't use the `cdk-high-contrast`
      // mixin, because we can't normalize the import path to the _a11y.scss both for the
      // source and when this file is distributed. See #10908.
      @media screen and (-ms-high-contrast: active) {
        opacity: 0.6;
      }
    }
  }

  .cdk-overlay-dark-backdrop {
    background: $cdk-overlay-dark-backdrop-background;
  }

  .cdk-overlay-transparent-backdrop {
    // Note: as of Firefox 57, having the backdrop be `background: none` will prevent it from
    // capturing the user's mouse scroll events. Since we also can't use something like
    // `rgba(0, 0, 0, 0)`, we work around the inconsistency by not setting the background at
    // all and using `opacity` to make the element transparent.
    &, &.cdk-overlay-backdrop-showing {
      opacity: 0;
    }
  }

  // Overlay parent element used with the connected position strategy. Used to constrain the
  // overlay element's size to fit within the viewport.
  .cdk-overlay-connected-position-bounding-box {
    position: absolute;
    z-index: $cdk-z-index-overlay;

    // We use `display: flex` on this element exclusively for centering connected overlays.
    // When *not* centering, a top/left/bottom/right will be set which overrides the normal
    // flex layout.
    display: flex;

    // We use the `column` direction here to avoid some flexbox issues in Edge
    // when using the "grow after open" options.
    flex-direction: column;

    // Add some dimensions so the element has an `innerText` which some people depend on in tests.
    min-width: 1px;
    min-height: 1px;
  }

  // Used when disabling global scrolling.
  .cdk-global-scrollblock {
    position: fixed;

    // Necessary for the content not to lose its width. Note that we're using 100%, instead of
    // 100vw, because 100vw includes the width plus the scrollbar, whereas 100% is the width
    // that the element had before we made it `fixed`.
    width: 100%;

    // Note: this will always add a scrollbar to whatever element it is on, which can
    // potentially result in double scrollbars. It shouldn't be an issue, because we won't
    // block scrolling on a page that doesn't have a scrollbar in the first place.
    overflow-y: scroll;
  }
}

@mixin cdk-a11y {
  .cdk-visually-hidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;

    // Avoid browsers rendering the focus ring in some cases.
    outline: 0;

    // Avoid some cases where the browser will still render the native controls (see #9049).
    -webkit-appearance: none;
    -moz-appearance: none;
  }
}

/// Emits the mixin's content nested under `$selector-context` if `$selector-context`
/// is non-empty.
/// @param selector-context The selector under which to nest the mixin's content.
@mixin _cdk-optionally-nest-content($selector-context) {
  @if ($selector-context == '') {
    @content;
  }
  @else {
    #{$selector-context} {
      @content;
    }
  }
}

/// Applies styles for users in high contrast mode. Note that this only applies
/// to Microsoft browsers. Chrome can be included by checking for the `html[hc]`
/// attribute, however Chrome handles high contrast differently.
///
/// @param target Which kind of high contrast setting to target. Defaults to `active`, can be
///    `white-on-black` or `black-on-white`.
/// @param encapsulation Whether to emit styles for view encapsulation. Values are:
///     * `on` - works for `Emulated`, `Native`, and `ShadowDom`
///     * `off` - works for `None`
///     * `any` - works for all encapsulation modes by emitting the CSS twice (default).
@mixin cdk-high-contrast($target: active, $encapsulation: 'any') {
  @if ($target != 'active' and $target != 'black-on-white' and $target != 'white-on-black') {
    @error 'Unknown cdk-high-contrast value "#{$target}" provided. ' +
           'Allowed values are "active", "black-on-white", and "white-on-black"';
  }

  @if ($encapsulation != 'on' and $encapsulation != 'off' and $encapsulation != 'any') {
    @error 'Unknown cdk-high-contrast encapsulation "#{$encapsulation}" provided. ' +
           'Allowed values are "on", "off", and "any"';
  }

  // If the selector context has multiple parts, such as `.section, .region`, just doing
  // `.cdk-high-contrast-xxx #{&}` will only apply the parent selector to the first part of the
  // context. We address this by nesting the selector context under .cdk-high-contrast.
  @at-root {
    $selector-context: #{&};

    @if ($encapsulation != 'on') {
      .cdk-high-contrast-#{$target} {
        @include _cdk-optionally-nest-content($selector-context) {
          @content;
        }
      }
    }

    @if ($encapsulation != 'off') {
      .cdk-high-contrast-#{$target} :host {
        @include _cdk-optionally-nest-content($selector-context) {
          @content;
        }
      }
    }
  }
}

// Core styles that enable monitoring autofill state of text fields.
@mixin cdk-text-field {
  // Keyframes that apply no styles, but allow us to monitor when an text field becomes autofilled
  // by watching for the animation events that are fired when they start. Note: the /*!*/ comment is
  // needed to prevent LibSass from stripping the keyframes out.
  // Based on: https://medium.com/@brunn/detecting-autofilled-fields-in-javascript-aed598d25da7
  @keyframes cdk-text-field-autofill-start {/*!*/}
  @keyframes cdk-text-field-autofill-end {/*!*/}

  .cdk-text-field-autofill-monitored:-webkit-autofill {
    // Since Chrome 80 we need a 1ms delay, or the animationstart event won't fire.
    animation: cdk-text-field-autofill-start 0s 1ms;
  }

  .cdk-text-field-autofill-monitored:not(:-webkit-autofill) {
    // Since Chrome 80 we need a 1ms delay, or the animationstart event won't fire.
    animation: cdk-text-field-autofill-end 0s 1ms;
  }

  // Remove the resize handle on autosizing textareas, because whatever height
  // the user resized to will be overwritten once they start typing again.
  textarea.cdk-textarea-autosize {
    resize: none;
  }

  // This class is temporarily applied to the textarea when it is being measured. It is immediately
  // removed when measuring is complete. We use `!important` rules here to make sure user-specified
  // rules do not interfere with the measurement.
  textarea.cdk-textarea-autosize-measuring {
    @include _cdk-textarea-autosize-measuring-base;
    height: auto !important;
    overflow: hidden !important;
  }

  // Similar to the `cdk-textarea-autosize-measuring` class, but only applied on Firefox. We need
  // to use this class, because Firefox has a bug where changing the `overflow` breaks the user's
  // ability to undo/redo what they were typing (see #16629). This class is only scoped to Firefox,
  // because the measurements there don't seem to be affected by the `height: 0`, whereas on other
  // browsers they are, e.g. Chrome detects longer text and IE does't resize back to normal.
  // Identical issue report: https://bugzilla.mozilla.org/show_bug.cgi?id=448784
  textarea.cdk-textarea-autosize-measuring-firefox {
    @include _cdk-textarea-autosize-measuring-base;
    height: 0 !important;
  }
}

@mixin _cdk-textarea-autosize-measuring-base {
  // Having 2px top and bottom padding seems to fix a bug where Chrome gets an incorrect
  // measurement. We just have to account for it later and subtract it off the final result.
  padding: 2px 0 !important;
  box-sizing: content-box !important;
}

// Used to generate UIDs for keyframes used to change the text field autofill styles.
$cdk-text-field-autofill-color-frame-count: 0;

// Mixin used to apply custom background and foreground colors to an autofilled text field.
// Based on: https://stackoverflow.com/questions/2781549/
// removing-input-background-colour-for-chrome-autocomplete#answer-37432260
@mixin cdk-text-field-autofill-color($background, $foreground:'') {
  @keyframes cdk-text-field-autofill-color-#{$cdk-text-field-autofill-color-frame-count} {
    to {
      background: $background;
      @if $foreground != '' { color: $foreground; }
    }
  }

  &:-webkit-autofill {
    animation: cdk-text-field-autofill-color-#{$cdk-text-field-autofill-color-frame-count} both;
  }

  &.cdk-text-field-autofill-monitored:-webkit-autofill {
    // Since Chrome 80 we need a 1ms delay for cdk-text-field-autofill-start, or the animationstart
    // event won't fire.
    animation: cdk-text-field-autofill-start 0s 1ms,
               cdk-text-field-autofill-color-#{$cdk-text-field-autofill-color-frame-count} both;
  }

  $cdk-text-field-autofill-color-frame-count:
      $cdk-text-field-autofill-color-frame-count + 1 !global;
}


// Core styles that can be used to apply material design treatments to any element.
// Media queries
// TODO(josephperrott): Change $mat-xsmall and $mat-small usages to rely on BreakpointObserver,
$mat-xsmall: 'max-width: 599px';
$mat-small: 'max-width: 959px';

// TODO: Revisit all z-indices before beta
// z-index master list

$z-index-fab: 20 !default;
$z-index-drawer: 100 !default;

// Global constants
$pi: 3.14159265;

// Padding between input toggles and their labels
$mat-toggle-padding: 8px !default;
// Width and height of input toggles
$mat-toggle-size: 20px !default;

// Easing Curves
// TODO(jelbourn): all of these need to be revisited

// The default animation curves used by material design.
$mat-linear-out-slow-in-timing-function: cubic-bezier(0, 0, 0.2, 0.1) !default;
$mat-fast-out-slow-in-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !default;
$mat-fast-out-linear-in-timing-function: cubic-bezier(0.4, 0, 1, 1) !default;

$ease-in-out-curve-function: cubic-bezier(0.35, 0, 0.25, 1) !default;

$swift-ease-out-duration: 400ms !default;
$swift-ease-out-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1) !default;
$swift-ease-out: all $swift-ease-out-duration $swift-ease-out-timing-function !default;

$swift-ease-in-duration: 300ms !default;
$swift-ease-in-timing-function: cubic-bezier(0.55, 0, 0.55, 0.2) !default;
$swift-ease-in: all $swift-ease-in-duration $swift-ease-in-timing-function !default;

$swift-ease-in-out-duration: 500ms !default;
$swift-ease-in-out-timing-function: $ease-in-out-curve-function !default;
$swift-ease-in-out: all $swift-ease-in-out-duration $swift-ease-in-out-timing-function !default;

$swift-linear-duration: 80ms !default;
$swift-linear-timing-function: linear !default;
$swift-linear: all $swift-linear-duration $swift-linear-timing-function !default;



// A collection of mixins and CSS classes that can be used to apply elevation to a material
// element.
// See: https://material.io/design/environment/elevation.html
// Examples:
//
//
// .mat-foo {
//   @include $mat-elevation(2);
//
//   &:active {
//     @include $mat-elevation(8);
//   }
// }
//
// <div id="external-card" class="mat-elevation-z2"><p>Some content</p></div>
//
// For an explanation of the design behind how elevation is implemented, see the design doc at
// https://goo.gl/Kq0k9Z.

// Colors for umbra, penumbra, and ambient shadows. As described in the design doc, each elevation
// level is created using a set of 3 shadow values, one for umbra (the shadow representing the
// space completely obscured by an object relative to its light source), one for penumbra (the
// space partially obscured by an object), and one for ambient (the space which contains the object
// itself). For a further explanation of these terms and their meanings, see
// https://en.wikipedia.org/wiki/Umbra,_penumbra_and_antumbra.

// Maps for the different shadow sets and their values within each z-space. These values were
// created by taking a few reference shadow sets created by Google's Designers and interpolating
// all of the values between them.

@function _get-umbra-map($color, $opacity) {
  $shadow-color: if(type-of($color) == color, rgba($color, $opacity * 0.2), $color);

  @return (
    0: '0px 0px 0px 0px #{$shadow-color}',
    1: '0px 2px 1px -1px #{$shadow-color}',
    2: '0px 3px 1px -2px #{$shadow-color}',
    3: '0px 3px 3px -2px #{$shadow-color}',
    4: '0px 2px 4px -1px #{$shadow-color}',
    5: '0px 3px 5px -1px #{$shadow-color}',
    6: '0px 3px 5px -1px #{$shadow-color}',
    7: '0px 4px 5px -2px #{$shadow-color}',
    8: '0px 5px 5px -3px #{$shadow-color}',
    9: '0px 5px 6px -3px #{$shadow-color}',
    10: '0px 6px 6px -3px #{$shadow-color}',
    11: '0px 6px 7px -4px #{$shadow-color}',
    12: '0px 7px 8px -4px #{$shadow-color}',
    13: '0px 7px 8px -4px #{$shadow-color}',
    14: '0px 7px 9px -4px #{$shadow-color}',
    15: '0px 8px 9px -5px #{$shadow-color}',
    16: '0px 8px 10px -5px #{$shadow-color}',
    17: '0px 8px 11px -5px #{$shadow-color}',
    18: '0px 9px 11px -5px #{$shadow-color}',
    19: '0px 9px 12px -6px #{$shadow-color}',
    20: '0px 10px 13px -6px #{$shadow-color}',
    21: '0px 10px 13px -6px #{$shadow-color}',
    22: '0px 10px 14px -6px #{$shadow-color}',
    23: '0px 11px 14px -7px #{$shadow-color}',
    24: '0px 11px 15px -7px #{$shadow-color}'
  );
}

@function _get-penumbra-map($color, $opacity) {
  $shadow-color: if(type-of($color) == color, rgba($color, $opacity * 0.14), $color);

  @return (
    0: '0px 0px 0px 0px #{$shadow-color}',
    1: '0px 1px 1px 0px #{$shadow-color}',
    2: '0px 2px 2px 0px #{$shadow-color}',
    3: '0px 3px 4px 0px #{$shadow-color}',
    4: '0px 4px 5px 0px #{$shadow-color}',
    5: '0px 5px 8px 0px #{$shadow-color}',
    6: '0px 6px 10px 0px #{$shadow-color}',
    7: '0px 7px 10px 1px #{$shadow-color}',
    8: '0px 8px 10px 1px #{$shadow-color}',
    9: '0px 9px 12px 1px #{$shadow-color}',
    10: '0px 10px 14px 1px #{$shadow-color}',
    11: '0px 11px 15px 1px #{$shadow-color}',
    12: '0px 12px 17px 2px #{$shadow-color}',
    13: '0px 13px 19px 2px #{$shadow-color}',
    14: '0px 14px 21px 2px #{$shadow-color}',
    15: '0px 15px 22px 2px #{$shadow-color}',
    16: '0px 16px 24px 2px #{$shadow-color}',
    17: '0px 17px 26px 2px #{$shadow-color}',
    18: '0px 18px 28px 2px #{$shadow-color}',
    19: '0px 19px 29px 2px #{$shadow-color}',
    20: '0px 20px 31px 3px #{$shadow-color}',
    21: '0px 21px 33px 3px #{$shadow-color}',
    22: '0px 22px 35px 3px #{$shadow-color}',
    23: '0px 23px 36px 3px #{$shadow-color}',
    24: '0px 24px 38px 3px #{$shadow-color}'
  );
}

@function _get-ambient-map($color, $opacity) {
  $shadow-color: if(type-of($color) == color, rgba($color, $opacity * 0.12), $color);

  @return (
    0: '0px 0px 0px 0px #{$shadow-color}',
    1: '0px 1px 3px 0px #{$shadow-color}',
    2: '0px 1px 5px 0px #{$shadow-color}',
    3: '0px 1px 8px 0px #{$shadow-color}',
    4: '0px 1px 10px 0px #{$shadow-color}',
    5: '0px 1px 14px 0px #{$shadow-color}',
    6: '0px 1px 18px 0px #{$shadow-color}',
    7: '0px 2px 16px 1px #{$shadow-color}',
    8: '0px 3px 14px 2px #{$shadow-color}',
    9: '0px 3px 16px 2px #{$shadow-color}',
    10: '0px 4px 18px 3px #{$shadow-color}',
    11: '0px 4px 20px 3px #{$shadow-color}',
    12: '0px 5px 22px 4px #{$shadow-color}',
    13: '0px 5px 24px 4px #{$shadow-color}',
    14: '0px 5px 26px 4px #{$shadow-color}',
    15: '0px 6px 28px 5px #{$shadow-color}',
    16: '0px 6px 30px 5px #{$shadow-color}',
    17: '0px 6px 32px 5px #{$shadow-color}',
    18: '0px 7px 34px 6px #{$shadow-color}',
    19: '0px 7px 36px 6px #{$shadow-color}',
    20: '0px 8px 38px 7px #{$shadow-color}',
    21: '0px 8px 40px 7px #{$shadow-color}',
    22: '0px 8px 42px 7px #{$shadow-color}',
    23: '0px 9px 44px 8px #{$shadow-color}',
    24: '0px 9px 46px 8px #{$shadow-color}'
  );
}

// The default duration value for elevation transitions.
$mat-elevation-transition-duration: 280ms !default;

// The default easing value for elevation transitions.
$mat-elevation-transition-timing-function: $mat-fast-out-slow-in-timing-function;

// The default color for elevation shadows.
$mat-elevation-color: black !default;

// The default opacity scaling value for elevation shadows.
$mat-elevation-opacity: 1 !default;

// Prefix for elevation-related selectors.
$_mat-elevation-prefix: 'mat-elevation-z';

// Applies the correct css rules to an element to give it the elevation specified by $zValue.
// The $zValue must be between 0 and 24.
@mixin mat-elevation($zValue, $color: $mat-elevation-color, $opacity: $mat-elevation-opacity) {
  @if type-of($zValue) != number or not unitless($zValue) {
    @error '$zValue must be a unitless number';
  }
  @if $zValue < 0 or $zValue > 24 {
    @error '$zValue must be between 0 and 24';
  }

  box-shadow: #{map-get(_get-umbra-map($color, $opacity), $zValue)},
              #{map-get(_get-penumbra-map($color, $opacity), $zValue)},
              #{map-get(_get-ambient-map($color, $opacity), $zValue)};
}

@mixin _mat-theme-elevation($zValue, $config, $opacity: $mat-elevation-opacity) {
  $foreground: map-get($config, foreground);
  $elevation-color: map-get($foreground, elevation);
  $elevation-color-or-default: if($elevation-color == null, $mat-elevation-color, $elevation-color);

  @include mat-elevation($zValue, $elevation-color-or-default, $opacity);
}

// Applies the elevation to an element in a manner that allows
// consumers to override it via the Material elevation classes.
@mixin mat-overridable-elevation(
    $zValue,
    $color: $mat-elevation-color,
    $opacity: $mat-elevation-opacity) {
  &:not([class*='#{$_mat-elevation-prefix}']) {
    @include mat-elevation($zValue, $color, $opacity);
  }
}

@mixin _mat-theme-overridable-elevation($zValue, $config, $opacity: $mat-elevation-opacity) {
  $foreground: map-get($config, foreground);
  $elevation-color: map-get($foreground, elevation);
  $elevation-color-or-default: if($elevation-color == null, $mat-elevation-color, $elevation-color);

  @include mat-overridable-elevation($zValue, $elevation-color-or-default, $opacity);
}

// Returns a string that can be used as the value for a transition property for elevation.
// Calling this function directly is useful in situations where a component needs to transition
// more than one property.
//
// .foo {
//   transition: mat-elevation-transition-property-value(), opacity 100ms ease;
// }
@function mat-elevation-transition-property-value(
    $duration: $mat-elevation-transition-duration,
    $easing: $mat-elevation-transition-timing-function) {
  @return box-shadow #{$duration} #{$easing};
}

// Applies the correct css rules needed to have an element transition between elevations.
// This mixin should be applied to elements whose elevation values will change depending on their
// context (e.g. when active or disabled).
//
// NOTE(traviskaufman): Both this mixin and the above function use default parameters so they can
// be used in the same way by clients.
@mixin mat-elevation-transition(
    $duration: $mat-elevation-transition-duration,
    $easing: $mat-elevation-transition-timing-function) {
  transition: mat-elevation-transition-property-value($duration, $easing);
}

// Color palettes from the Material Design spec.
// See https://material.io/design/color/
//
// Contrast colors are hard-coded because it is too difficult (probably impossible) to
// calculate them. These contrast colors are pulled from the public Material Design spec swatches.
// While the contrast colors in the spec are not prescriptive, we use them for convenience.


// @deprecated renamed to $dark-primary-text.
// @breaking-change 8.0.0
$black-87-opacity: rgba(black, 0.87);
// @deprecated renamed to $light-primary-text.
// @breaking-change 8.0.0
$white-87-opacity: rgba(white, 0.87);
// @deprecated use $dark-[secondary-text,disabled-text,dividers,focused] instead.
// @breaking-change 8.0.0
$black-12-opacity: rgba(black, 0.12);
// @deprecated use $light-[secondary-text,disabled-text,dividers,focused] instead.
// @breaking-change 8.0.0
$white-12-opacity: rgba(white, 0.12);
// @deprecated use $dark-[secondary-text,disabled-text,dividers,focused] instead.
// @breaking-change 8.0.0
$black-6-opacity: rgba(black, 0.06);
// @deprecated use $light-[secondary-text,disabled-text,dividers,focused] instead.
// @breaking-change 8.0.0
$white-6-opacity: rgba(white, 0.06);

$dark-primary-text: rgba(black, 0.87);
$dark-secondary-text: rgba(black, 0.54);
$dark-disabled-text: rgba(black, 0.38);
$dark-dividers: rgba(black, 0.12);
$dark-focused: rgba(black, 0.12);
$light-primary-text: white;
$light-secondary-text: rgba(white, 0.7);
$light-disabled-text: rgba(white, 0.5);
$light-dividers: rgba(white, 0.12);
$light-focused: rgba(white, 0.12);

$mat-red: (
  50: #ffebee,
  100: #ffcdd2,
  200: #ef9a9a,
  300: #e57373,
  400: #ef5350,
  500: #f44336,
  600: #e53935,
  700: #d32f2f,
  800: #c62828,
  900: #b71c1c,
  A100: #ff8a80,
  A200: #ff5252,
  A400: #ff1744,
  A700: #d50000,
  contrast: (
    50: $dark-primary-text,
    100: $dark-primary-text,
    200: $dark-primary-text,
    300: $dark-primary-text,
    400: $dark-primary-text,
    500: $light-primary-text,
    600: $light-primary-text,
    700: $light-primary-text,
    800: $light-primary-text,
    900: $light-primary-text,
    A100: $dark-primary-text,
    A200: $light-primary-text,
    A400: $light-primary-text,
    A700: $light-primary-text,
  )
);

$mat-pink: (
  50: #fce4ec,
  100: #f8bbd0,
  200: #f48fb1,
  300: #f06292,
  400: #ec407a,
  500: #e91e63,
  600: #d81b60,
  700: #c2185b,
  800: #ad1457,
  900: #880e4f,
  A100: #ff80ab,
  A200: #ff4081,
  A400: #f50057,
  A700: #c51162,
  contrast: (
    50: $dark-primary-text,
    100: $dark-primary-text,
    200: $dark-primary-text,
    300: $dark-primary-text,
    400: $dark-primary-text,
    500: $light-primary-text,
    600: $light-primary-text,
    700: $light-primary-text,
    800: $light-primary-text,
    900: $light-primary-text,
    A100: $dark-primary-text,
    A200: $light-primary-text,
    A400: $light-primary-text,
    A700: $light-primary-text,
  )
);

$mat-purple: (
  50: #f3e5f5,
  100: #e1bee7,
  200: #ce93d8,
  300: #ba68c8,
  400: #ab47bc,
  500: #9c27b0,
  600: #8e24aa,
  700: #7b1fa2,
  800: #6a1b9a,
  900: #4a148c,
  A100: #ea80fc,
  A200: #e040fb,
  A400: #d500f9,
  A700: #aa00ff,
  contrast: (
    50: $dark-primary-text,
    100: $dark-primary-text,
    200: $dark-primary-text,
    300: $light-primary-text,
    400: $light-primary-text,
    500: $light-primary-text,
    600: $light-primary-text,
    700: $light-primary-text,
    800: $light-primary-text,
    900: $light-primary-text,
    A100: $dark-primary-text,
    A200: $light-primary-text,
    A400: $light-primary-text,
    A700: $light-primary-text,
  )
);

$mat-deep-purple: (
  50: #ede7f6,
  100: #d1c4e9,
  200: #b39ddb,
  300: #9575cd,
  400: #7e57c2,
  500: #673ab7,
  600: #5e35b1,
  700: #512da8,
  800: #4527a0,
  900: #311b92,
  A100: #b388ff,
  A200: #7c4dff,
  A400: #651fff,
  A700: #6200ea,
  contrast: (
    50: $dark-primary-text,
    100: $dark-primary-text,
    200: $dark-primary-text,
    300: $light-primary-text,
    400: $light-primary-text,
    500: $light-primary-text,
    600: $light-primary-text,
    700: $light-primary-text,
    800: $light-primary-text,
    900: $light-primary-text,
    A100: $dark-primary-text,
    A200: $light-primary-text,
    A400: $light-primary-text,
    A700: $light-primary-text,
  )
);

$mat-indigo: (
  50: #e8eaf6,
  100: #c5cae9,
  200: #9fa8da,
  300: #7986cb,
  400: #5c6bc0,
  500: #3f51b5,
  600: #3949ab,
  700: #303f9f,
  800: #283593,
  900: #1a237e,
  A100: #8c9eff,
  A200: #536dfe,
  A400: #3d5afe,
  A700: #304ffe,
  contrast: (
    50: $dark-primary-text,
    100: $dark-primary-text,
    200: $dark-primary-text,
    300: $light-primary-text,
    400: $light-primary-text,
    500: $light-primary-text,
    600: $light-primary-text,
    700: $light-primary-text,
    800: $light-primary-text,
    900: $light-primary-text,
    A100: $dark-primary-text,
    A200: $light-primary-text,
    A400: $light-primary-text,
    A700: $light-primary-text,
  )
);

$mat-blue: (
  50: #e3f2fd,
  100: #bbdefb,
  200: #90caf9,
  300: #64b5f6,
  400: #42a5f5,
  500: #2196f3,
  600: #1e88e5,
  700: #1976d2,
  800: #1565c0,
  900: #0d47a1,
  A100: #82b1ff,
  A200: #448aff,
  A400: #2979ff,
  A700: #2962ff,
  contrast: (
    50: $dark-primary-text,
    100: $dark-primary-text,
    200: $dark-primary-text,
    300: $dark-primary-text,
    400: $dark-primary-text,
    500: $light-primary-text,
    600: $light-primary-text,
    700: $light-primary-text,
    800: $light-primary-text,
    900: $light-primary-text,
    A100: $dark-primary-text,
    A200: $light-primary-text,
    A400: $light-primary-text,
    A700: $light-primary-text,
  )
);

$mat-light-blue: (
  50: #e1f5fe,
  100: #b3e5fc,
  200: #81d4fa,
  300: #4fc3f7,
  400: #29b6f6,
  500: #03a9f4,
  600: #039be5,
  700: #0288d1,
  800: #0277bd,
  900: #01579b,
  A100: #80d8ff,
  A200: #40c4ff,
  A400: #00b0ff,
  A700: #0091ea,
  contrast: (
    50: $dark-primary-text,
    100: $dark-primary-text,
    200: $dark-primary-text,
    300: $dark-primary-text,
    400: $dark-primary-text,
    500: $light-primary-text,
    600: $light-primary-text,
    700: $light-primary-text,
    800: $light-primary-text,
    900: $light-primary-text,
    A100: $dark-primary-text,
    A200: $dark-primary-text,
    A400: $dark-primary-text,
    A700: $light-primary-text,
  )
);

$mat-cyan: (
  50: #e0f7fa,
  100: #b2ebf2,
  200: #80deea,
  300: #4dd0e1,
  400: #26c6da,
  500: #00bcd4,
  600: #00acc1,
  700: #0097a7,
  800: #00838f,
  900: #006064,
  A100: #84ffff,
  A200: #18ffff,
  A400: #00e5ff,
  A700: #00b8d4,
  contrast: (
    50: $dark-primary-text,
    100: $dark-primary-text,
    200: $dark-primary-text,
    300: $dark-primary-text,
    400: $dark-primary-text,
    500: $light-primary-text,
    600: $light-primary-text,
    700: $light-primary-text,
    800: $light-primary-text,
    900: $light-primary-text,
    A100: $dark-primary-text,
    A200: $dark-primary-text,
    A400: $dark-primary-text,
    A700: $dark-primary-text,
  )
);

$mat-teal: (
  50: #e0f2f1,
  100: #b2dfdb,
  200: #80cbc4,
  300: #4db6ac,
  400: #26a69a,
  500: #009688,
  600: #00897b,
  700: #00796b,
  800: #00695c,
  900: #004d40,
  A100: #a7ffeb,
  A200: #64ffda,
  A400: #1de9b6,
  A700: #00bfa5,
  contrast: (
    50: $dark-primary-text,
    100: $dark-primary-text,
    200: $dark-primary-text,
    300: $dark-primary-text,
    400: $dark-primary-text,
    500: $light-primary-text,
    600: $light-primary-text,
    700: $light-primary-text,
    800: $light-primary-text,
    900: $light-primary-text,
    A100: $dark-primary-text,
    A200: $dark-primary-text,
    A400: $dark-primary-text,
    A700: $dark-primary-text,
  )
);

$mat-green: (
  50: #e8f5e9,
  100: #c8e6c9,
  200: #a5d6a7,
  300: #81c784,
  400: #66bb6a,
  500: #4caf50,
  600: #43a047,
  700: #388e3c,
  800: #2e7d32,
  900: #1b5e20,
  A100: #b9f6ca,
  A200: #69f0ae,
  A400: #00e676,
  A700: #00c853,
  contrast: (
    50: $dark-primary-text,
    100: $dark-primary-text,
    200: $dark-primary-text,
    300: $dark-primary-text,
    400: $dark-primary-text,
    500: $dark-primary-text,
    600: $light-primary-text,
    700: $light-primary-text,
    800: $light-primary-text,
    900: $light-primary-text,
    A100: $dark-primary-text,
    A200: $dark-primary-text,
    A400: $dark-primary-text,
    A700: $dark-primary-text,
  )
);

$mat-light-green: (
  50: #f1f8e9,
  100: #dcedc8,
  200: #c5e1a5,
  300: #aed581,
  400: #9ccc65,
  500: #8bc34a,
  600: #7cb342,
  700: #689f38,
  800: #558b2f,
  900: #33691e,
  A100: #ccff90,
  A200: #b2ff59,
  A400: #76ff03,
  A700: #64dd17,
  contrast: (
    50: $dark-primary-text,
    100: $dark-primary-text,
    200: $dark-primary-text,
    300: $dark-primary-text,
    400: $dark-primary-text,
    500: $dark-primary-text,
    600: $dark-primary-text,
    700: $light-primary-text,
    800: $light-primary-text,
    900: $light-primary-text,
    A100: $dark-primary-text,
    A200: $dark-primary-text,
    A400: $dark-primary-text,
    A700: $dark-primary-text,
  )
);

$mat-lime: (
  50: #f9fbe7,
  100: #f0f4c3,
  200: #e6ee9c,
  300: #dce775,
  400: #d4e157,
  500: #cddc39,
  600: #c0ca33,
  700: #afb42b,
  800: #9e9d24,
  900: #827717,
  A100: #f4ff81,
  A200: #eeff41,
  A400: #c6ff00,
  A700: #aeea00,
  contrast: (
    50: $dark-primary-text,
    100: $dark-primary-text,
    200: $dark-primary-text,
    300: $dark-primary-text,
    400: $dark-primary-text,
    500: $dark-primary-text,
    600: $dark-primary-text,
    700: $dark-primary-text,
    800: $dark-primary-text,
    900: $light-primary-text,
    A100: $dark-primary-text,
    A200: $dark-primary-text,
    A400: $dark-primary-text,
    A700: $dark-primary-text,
  )
);

$mat-yellow: (
  50: #fffde7,
  100: #fff9c4,
  200: #fff59d,
  300: #fff176,
  400: #ffee58,
  500: #ffeb3b,
  600: #fdd835,
  700: #fbc02d,
  800: #f9a825,
  900: #f57f17,
  A100: #ffff8d,
  A200: #ffff00,
  A400: #ffea00,
  A700: #ffd600,
  contrast: (
    50: $dark-primary-text,
    100: $dark-primary-text,
    200: $dark-primary-text,
    300: $dark-primary-text,
    400: $dark-primary-text,
    500: $dark-primary-text,
    600: $dark-primary-text,
    700: $dark-primary-text,
    800: $dark-primary-text,
    900: $dark-primary-text,
    A100: $dark-primary-text,
    A200: $dark-primary-text,
    A400: $dark-primary-text,
    A700: $dark-primary-text,
  )
);

$mat-amber: (
  50: #fff8e1,
  100: #ffecb3,
  200: #ffe082,
  300: #ffd54f,
  400: #ffca28,
  500: #ffc107,
  600: #ffb300,
  700: #ffa000,
  800: #ff8f00,
  900: #ff6f00,
  A100: #ffe57f,
  A200: #ffd740,
  A400: #ffc400,
  A700: #ffab00,
  contrast: (
    50: $dark-primary-text,
    100: $dark-primary-text,
    200: $dark-primary-text,
    300: $dark-primary-text,
    400: $dark-primary-text,
    500: $dark-primary-text,
    600: $dark-primary-text,
    700: $dark-primary-text,
    800: $dark-primary-text,
    900: $dark-primary-text,
    A100: $dark-primary-text,
    A200: $dark-primary-text,
    A400: $dark-primary-text,
    A700: $dark-primary-text,
  )
);

$mat-orange: (
  50: #fff3e0,
  100: #ffe0b2,
  200: #ffcc80,
  300: #ffb74d,
  400: #ffa726,
  500: #ff9800,
  600: #fb8c00,
  700: #f57c00,
  800: #ef6c00,
  900: #e65100,
  A100: #ffd180,
  A200: #ffab40,
  A400: #ff9100,
  A700: #ff6d00,
  contrast: (
    50: $dark-primary-text,
    100: $dark-primary-text,
    200: $dark-primary-text,
    300: $dark-primary-text,
    400: $dark-primary-text,
    500: $dark-primary-text,
    600: $dark-primary-text,
    700: $dark-primary-text,
    800: $light-primary-text,
    900: $light-primary-text,
    A100: $dark-primary-text,
    A200: $dark-primary-text,
    A400: $dark-primary-text,
    A700: black,
  )
);

$mat-deep-orange: (
  50: #fbe9e7,
  100: #ffccbc,
  200: #ffab91,
  300: #ff8a65,
  400: #ff7043,
  500: #ff5722,
  600: #f4511e,
  700: #e64a19,
  800: #d84315,
  900: #bf360c,
  A100: #ff9e80,
  A200: #ff6e40,
  A400: #ff3d00,
  A700: #dd2c00,
  contrast: (
    50: $dark-primary-text,
    100: $dark-primary-text,
    200: $dark-primary-text,
    300: $dark-primary-text,
    400: $dark-primary-text,
    500: $light-primary-text,
    600: $light-primary-text,
    700: $light-primary-text,
    800: $light-primary-text,
    900: $light-primary-text,
    A100: $dark-primary-text,
    A200: $dark-primary-text,
    A400: $light-primary-text,
    A700: $light-primary-text,
  )
);

$mat-brown: (
  50: #efebe9,
  100: #d7ccc8,
  200: #bcaaa4,
  300: #a1887f,
  400: #8d6e63,
  500: #795548,
  600: #6d4c41,
  700: #5d4037,
  800: #4e342e,
  900: #3e2723,
  A100: #d7ccc8,
  A200: #bcaaa4,
  A400: #8d6e63,
  A700: #5d4037,
  contrast: (
    50: $dark-primary-text,
    100: $dark-primary-text,
    200: $dark-primary-text,
    300: $light-primary-text,
    400: $light-primary-text,
    500: $light-primary-text,
    600: $light-primary-text,
    700: $light-primary-text,
    800: $light-primary-text,
    900: $light-primary-text,
    A100: $dark-primary-text,
    A200: $dark-primary-text,
    A400: $light-primary-text,
    A700: $light-primary-text,
  )
);

$mat-grey: (
  50: #fafafa,
  100: #f5f5f5,
  200: #eeeeee,
  300: #e0e0e0,
  400: #bdbdbd,
  500: #9e9e9e,
  600: #757575,
  700: #616161,
  800: #424242,
  900: #212121,
  A100: #ffffff,
  A200: #eeeeee,
  A400: #bdbdbd,
  A700: #616161,
  contrast: (
    50: $dark-primary-text,
    100: $dark-primary-text,
    200: $dark-primary-text,
    300: $dark-primary-text,
    400: $dark-primary-text,
    500: $dark-primary-text,
    600: $light-primary-text,
    700: $light-primary-text,
    800: $light-primary-text,
    900: $light-primary-text,
    A100: $dark-primary-text,
    A200: $dark-primary-text,
    A400: $dark-primary-text,
    A700: $light-primary-text,
  )
);

// Alias for alternate spelling.
$mat-gray: $mat-grey;

$mat-blue-grey: (
  50: #eceff1,
  100: #cfd8dc,
  200: #b0bec5,
  300: #90a4ae,
  400: #78909c,
  500: #607d8b,
  600: #546e7a,
  700: #455a64,
  800: #37474f,
  900: #263238,
  A100: #cfd8dc,
  A200: #b0bec5,
  A400: #78909c,
  A700: #455a64,
  contrast: (
    50: $dark-primary-text,
    100: $dark-primary-text,
    200: $dark-primary-text,
    300: $dark-primary-text,
    400: $light-primary-text,
    500: $light-primary-text,
    600: $light-primary-text,
    700: $light-primary-text,
    800: $light-primary-text,
    900: $light-primary-text,
    A100: $dark-primary-text,
    A200: $dark-primary-text,
    A400: $light-primary-text,
    A700: $light-primary-text,
  )
);

// Alias for alternate spelling.
$mat-blue-gray: $mat-blue-grey;


// Background palette for light themes.
$mat-light-theme-background: (
  status-bar: map_get($mat-grey, 300),
  app-bar:    map_get($mat-grey, 100),
  background: map_get($mat-grey, 50),
  hover:      rgba(black, 0.04), // TODO(kara): check style with Material Design UX
  card:       white,
  dialog:     white,
  disabled-button: rgba(black, 0.12),
  raised-button: white,
  focused-button: $dark-focused,
  selected-button: map_get($mat-grey, 300),
  selected-disabled-button: map_get($mat-grey, 400),
  disabled-button-toggle: map_get($mat-grey, 200),
  unselected-chip: map_get($mat-grey, 300),
  disabled-list-option: map_get($mat-grey, 200),
  tooltip: map_get($mat-grey, 700),
);

// Background palette for dark themes.
$mat-dark-theme-background: (
  status-bar: black,
  app-bar:    map_get($mat-grey, 900),
  background: #303030,
  hover:      rgba(white, 0.04), // TODO(kara): check style with Material Design UX
  card:       map_get($mat-grey, 800),
  dialog:     map_get($mat-grey, 800),
  disabled-button: rgba(white, 0.12),
  raised-button: map-get($mat-grey, 800),
  focused-button: $light-focused,
  selected-button: map_get($mat-grey, 900),
  selected-disabled-button: map_get($mat-grey, 800),
  disabled-button-toggle: black,
  unselected-chip: map_get($mat-grey, 700),
  disabled-list-option: black,
  tooltip: map_get($mat-grey, 700),
);

// Foreground palette for light themes.
$mat-light-theme-foreground: (
  base:              black,
  divider:           $dark-dividers,
  dividers:          $dark-dividers,
  disabled:          $dark-disabled-text,
  disabled-button:   rgba(black, 0.26),
  disabled-text:     $dark-disabled-text,
  elevation:         black,
  hint-text:         $dark-disabled-text,
  secondary-text:    $dark-secondary-text,
  icon:              rgba(black, 0.54),
  icons:             rgba(black, 0.54),
  text:              rgba(black, 0.87),
  slider-min:        rgba(black, 0.87),
  slider-off:        rgba(black, 0.26),
  slider-off-active: rgba(black, 0.38),
);

// Foreground palette for dark themes.
$mat-dark-theme-foreground: (
  base:              white,
  divider:           $light-dividers,
  dividers:          $light-dividers,
  disabled:          $light-disabled-text,
  disabled-button:   rgba(white, 0.3),
  disabled-text:     $light-disabled-text,
  elevation:         black,
  hint-text:         $light-disabled-text,
  secondary-text:    $light-secondary-text,
  icon:              white,
  icons:             white,
  text:              white,
  slider-min:        white,
  slider-off:        rgba(white, 0.3),
  slider-off-active: rgba(white, 0.3),
);


// Whether density should be generated by default.
$_mat-theme-generate-default-density: true !default;

// For a given hue in a palette, return the contrast color from the map of contrast palettes.
// @param $color-map
// @param $hue
@function mat-contrast($palette, $hue) {
  @return map-get(map-get($palette, contrast), $hue);
}


// Creates a map of hues to colors for a theme. This is used to define a theme palette in terms
// of the Material Design hues.
// @param $color-map
// @param $primary
// @param $lighter
@function mat-palette($base-palette, $default: 500, $lighter: 100, $darker: 700, $text: $default) {
  $result: map_merge($base-palette, (
    default: map-get($base-palette, $default),
    lighter: map-get($base-palette, $lighter),
    darker: map-get($base-palette, $darker),
    text: map-get($base-palette, $text),

    default-contrast: mat-contrast($base-palette, $default),
    lighter-contrast: mat-contrast($base-palette, $lighter),
    darker-contrast: mat-contrast($base-palette, $darker)
  ));

  // For each hue in the palette, add a "-contrast" color to the map.
  @each $hue, $color in $base-palette {
    $result: map_merge($result, (
      '#{$hue}-contrast': mat-contrast($base-palette, $hue)
    ));
  }

  @return $result;
}


// Gets a color from a theme palette (the output of mat-palette).
// The hue can be one of the standard values (500, A400, etc.), one of the three preconfigured
// hues (default, lighter, darker), or any of the aforementioned prefixed with "-contrast".
//
// @param $color-map The theme palette (output of mat-palette).
// @param $hue The hue from the palette to use. If this is a value between 0 and 1, it will
//     be treated as opacity.
// @param $opacity The alpha channel value for the color.
@function mat-color($palette, $hue: default, $opacity: null) {
  // If hueKey is a number between zero and one, then it actually contains an
  // opacity value, so recall this function with the default hue and that given opacity.
  @if type-of($hue) == number and $hue >= 0 and $hue <= 1 {
    @return mat-color($palette, default, $hue);
  }

  $color: map-get($palette, $hue);

  @if (type-of($color) != color) {
    // If the $color resolved to something different from a color (e.g. a CSS variable),
    // we can't apply the opacity anyway so we return the value as is, otherwise Sass can
    // throw an error or output something invalid.
    @return $color;
  }

  @return rgba($color, if($opacity == null, opacity($color), $opacity));
}

// Validates the specified theme by ensuring that the optional color config defines
// a primary, accent and warn palette. Returns the theme if no failures were found.
@function _mat-validate-theme($theme) {
  @if map_get($theme, color) {
    $color: map_get($theme, color);
    @if not map_get($color, primary) {
      @error 'Theme does not define a valid "primary" palette.';
    }
    @else if not map_get($color, accent) {
      @error 'Theme does not define a valid "accent" palette.';
    }
    @else if not map_get($color, warn) {
      @error 'Theme does not define a valid "warn" palette.';
    }
  }
  @return $theme;
}

// Creates a backwards compatible theme. Previously in Angular Material, theme objects
// contained the color configuration directly. With the recent refactoring of the theming
// system to allow for density and typography configurations, this is no longer the case.
// To ensure that constructed themes which will be passed to custom theme mixins do not break,
// we copy the color configuration and put its properties at the top-level of the theme object.
// Here is an example of a pattern that should still work until it's officially marked as a
// breaking change:
//
//    @mixin my-custom-component-theme($theme) {
//      .my-comp {
//        background-color: mat-color(map_get($theme, primary));
//      }
//    }
//
// Note that the `$theme.primary` key does usually not exist since the color configuration
// is stored in `$theme.color` which contains a property for `primary`. This method copies
// the map from `$theme.color` to `$theme` for backwards compatibility.
@function _mat-create-backwards-compatibility-theme($theme) {
  @if not map_get($theme, color) {
    @return $theme;
  }
  $color: map_get($theme, color);
  @return map_merge($theme, $color);
}

// Creates a light-themed color configuration from the specified
// primary, accent and warn palettes.
@function _mat-create-light-color-config($primary, $accent, $warn: null) {
  @return (
    primary: $primary,
    accent: $accent,
    warn: if($warn != null, $warn, mat-palette($mat-red)),
    is-dark: false,
    foreground: $mat-light-theme-foreground,
    background: $mat-light-theme-background,
  );
}

// Creates a dark-themed color configuration from the specified
// primary, accent and warn palettes.
@function _mat-create-dark-color-config($primary, $accent, $warn: null) {
  @return (
    primary: $primary,
    accent: $accent,
    warn: if($warn != null, $warn, mat-palette($mat-red)),
    is-dark: true,
    foreground: $mat-dark-theme-foreground,
    background: $mat-dark-theme-background,
  );
}

// Creates a container object for a light theme to be given to individual component theme mixins.
// TODO: Remove legacy API and rename `$primary` to `$config`. Currently it cannot be renamed
// as it would break existing apps that set the parameter by name.
@function mat-light-theme($primary, $accent: null, $warn: mat-palette($mat-red)) {
  // This function creates a container object for the individual component theme mixins. Consumers
  // can construct such an object by calling this function, or by building the object manually.
  // There are two possible ways to invoke this function in order to create such an object:
  //
  //    (1) Passing in a map that holds optional configurations for individual parts of the
  //        theming system. For `color` configurations, the function only expects the palettes
  //        for `primary` and `accent` (and optionally `warn`). The function will expand the
  //        shorthand into an actual configuration that can be consumed in `-color` mixins.
  //    (2) Legacy pattern: Passing in the palettes as parameters. This is not as flexible
  //        as passing in a configuration map because only the `color` system can be configured.
  //
  // If the legacy pattern is used, we generate a container object only with a light-themed
  // configuration for the `color` theming part.
  @if $accent != null {
    @return _mat-create-backwards-compatibility-theme(_mat-validate-theme((
      _is-legacy-theme: true,
      color: _mat-create-light-color-config($primary, $accent, $warn),
    )));
  }
  // If the map pattern is used (1), we just pass-through the configurations for individual
  // parts of the theming system, but update the `color` configuration if set. As explained
  // above, the color shorthand will be expanded to an actual light-themed color configuration.
  $result: $primary;
  @if map_get($primary, color) {
    $color-settings: map_get($primary, color);
    $primary: map_get($color-settings, primary);
    $accent: map_get($color-settings, accent);
    $warn: map_get($color-settings, warn);
    $result: map_merge($result, (color: _mat-create-light-color-config($primary, $accent, $warn)));
  }
  @return _mat-create-backwards-compatibility-theme(_mat-validate-theme($result));
}

// Creates a container object for a dark theme to be given to individual component theme mixins.
// TODO: Remove legacy API and rename `$primary` to `$config`. Currently it cannot be renamed
// as it would break existing apps that set the parameter by name.
@function mat-dark-theme($primary, $accent: null, $warn: mat-palette($mat-red)) {
  // This function creates a container object for the individual component theme mixins. Consumers
  // can construct such an object by calling this function, or by building the object manually.
  // There are two possible ways to invoke this function in order to create such an object:
  //
  //    (1) Passing in a map that holds optional configurations for individual parts of the
  //        theming system. For `color` configurations, the function only expects the palettes
  //        for `primary` and `accent` (and optionally `warn`). The function will expand the
  //        shorthand into an actual configuration that can be consumed in `-color` mixins.
  //    (2) Legacy pattern: Passing in the palettes as parameters. This is not as flexible
  //        as passing in a configuration map because only the `color` system can be configured.
  //
  // If the legacy pattern is used, we generate a container object only with a dark-themed
  // configuration for the `color` theming part.
  @if $accent != null {
    @return _mat-create-backwards-compatibility-theme(_mat-validate-theme((
      _is-legacy-theme: true,
      color: _mat-create-dark-color-config($primary, $accent, $warn),
    )));
  }
  // If the map pattern is used (1), we just pass-through the configurations for individual
  // parts of the theming system, but update the `color` configuration if set. As explained
  // above, the color shorthand will be expanded to an actual dark-themed color configuration.
  $result: $primary;
  @if map_get($primary, color) {
    $color-settings: map_get($primary, color);
    $primary: map_get($color-settings, primary);
    $accent: map_get($color-settings, accent);
    $warn: map_get($color-settings, warn);
    $result: map_merge($result, (color: _mat-create-dark-color-config($primary, $accent, $warn)));
  }
  @return _mat-create-backwards-compatibility-theme(_mat-validate-theme($result));
}

/// Gets the color configuration from the given theme or configuration.
@function mat-get-color-config($theme, $default: null) {
  // If a configuration has been passed, return the config directly.
  @if not _mat-is-theme-object($theme) {
    @return $theme;
  }
  // If the theme has been constructed through the legacy theming API, we use the theme object
  // as color configuration instead of the dedicated `color` property. We do this because for
  // backwards compatibility, we copied the color configuration from `$theme.color` to `$theme`.
  // Hence developers could customize the colors at top-level and want to respect these changes
  // TODO: Remove when legacy theming API is removed.
  @if _mat-is-legacy-constructed-theme($theme) {
    @return $theme;
  }
  @if map_has_key($theme, color) {
    @return map_get($theme, color);
  }
  @return $default;
}

/// Gets the density configuration from the given theme or configuration.
@function mat-get-density-config($theme-or-config, $default: 0) {
  // If a configuration has been passed, return the config directly.
  @if not _mat-is-theme-object($theme-or-config) {
    @return $theme-or-config;
  }
  // In case a theme has been passed, extract the configuration if present,
  // or fall back to the default density config.
  @if map_has_key($theme-or-config, density) {
    @return map_get($theme-or-config, density);
  }
  @return $default;
}

/// Gets the typography configuration from the given theme or configuration.
/// For backwards compatibility, typography is not included by default.
@function mat-get-typography-config($theme-or-config, $default: null) {
  // If a configuration has been passed, return the config directly.
  @if not _mat-is-theme-object($theme-or-config) {
    @return $theme-or-config;
  }
  // In case a theme has been passed, extract the configuration if present,
  // or fall back to the default typography config.
  @if (map_has_key($theme-or-config, typography)) {
    @return map_get($theme-or-config, typography);
  }
  @return $default;
}

// Checks whether the given value resolves to a theme object. Theme objects are always
// of type `map` and can optionally only specify `color`, `density` or `typography`.
@function _mat-is-theme-object($value) {
  @return type-of($value) == 'map' and (
    map_has_key($value, color) or
    map_has_key($value, density) or
    map_has_key($value, typography) or
    length($value) == 0
  );
}

// Checks whether a given value corresponds to a legacy constructed theme.
@function _mat-is-legacy-constructed-theme($value) {
  @return type-of($value) == 'map' and map_get($value, '_is-legacy-theme');
}

// Gets the theme from the given value that is either already a theme, or a color configuration.
// This handles the legacy case where developers pass a color configuration directly to the
// theme mixin. Before we introduced the new pattern for constructing a theme, developers passed
// the color configuration directly to the theme mixins. This can be still the case if developers
// construct a theme manually and pass it to a theme. We support this for backwards compatibility.
// TODO(devversion): remove this in the future. Constructing themes manually is rare,
// and the code can be easily updated to the new API.
@function _mat-legacy-get-theme($theme-or-color-config) {
  @if _mat-is-theme-object($theme-or-color-config) {
    @return $theme-or-color-config;
  }
  @return _mat-create-backwards-compatibility-theme((
    _is-legacy-theme: true,
    color: $theme-or-color-config
  ));
}



// Whether duplication warnings should be disabled. Warnings enabled by default.
$mat-theme-ignore-duplication-warnings: false !default;

// Warning that will be printed if duplicated styles are generated by a theme.
$_mat-theme-duplicate-warning: 'Read more about how style duplication can be avoided in a ' +
  'dedicated guide. https://github.com/angular/components/blob/master/guides/duplicate-theming-styles.md';

// These variable are not intended to be overridden externally. They use `!default` to
// avoid being reset every time this file is imported.
$_mat-theme-emitted-color: () !default;
$_mat-theme-emitted-typography: () !default;
$_mat-theme-emitted-density: () !default;

// Checks if configurations that have been declared in the given theme have been generated
// before. If so, warnings will be reported. This should notify developers in case duplicate
// styles are accidentally generated due to wrong usage of the all-theme mixins.
//
// Additionally, this mixin controls the default value for the density configuration. By
// default, density styles are generated at scale zero. If the same density styles would be
// generated a second time though, the default value will change to avoid duplicate styles.
//
// The mixin keeps track of all configurations in a list that is scoped to the specified
// id. This is necessary because a given theme can be passed to multiple disjoint theme mixins
// (e.g. `angular-material-theme` and `angular-material-mdc-theme`) without causing any
// style duplication.
@mixin _mat-check-duplicate-theme-styles($theme-or-color-config, $id) {
  $theme: _mat-legacy-get-theme($theme-or-color-config);
  $color-config: mat-get-color-config($theme);
  $density-config: mat-get-density-config($theme);
  $typography-config: mat-get-typography-config($theme);
  // Lists of previous `color`, `density` and `typography` configurations.
  $previous-color: map_get($_mat-theme-emitted-color, $id) or ();
  $previous-typography: map_get($_mat-theme-emitted-typography, $id) or ();
  $previous-density: map_get($_mat-theme-emitted-density, $id) or ();
  // Whether duplicate legacy density styles would be generated.
  $duplicate-legacy-density: false;

  // Check if the color configuration has been generated before.
  @if $color-config != null {
    @if index($previous-color, $color-config) != null and
        not $mat-theme-ignore-duplication-warnings {
      @warn 'The same color styles are generated multiple times. ' +
          $_mat-theme-duplicate-warning;
    }
    $previous-color: append($previous-color, $color-config);
  }

  // Check if the typography configuration has been generated before.
  @if $typography-config != null {
    @if index($previous-typography, $typography-config) != null and
        not $mat-theme-ignore-duplication-warnings {
      @warn 'The same typography styles are generated multiple times. ' +
          $_mat-theme-duplicate-warning;
    }
    $previous-typography: append($previous-typography, $typography-config);
  }

  // Check if the density configuration has been generated before.
  @if $density-config != null {
    @if index($previous-density, $density-config) != null {
      // Only report a warning if density styles would be duplicated for non-legacy theme
      // definitions. For legacy themes, we have compatibility logic that avoids duplication
      // of default density styles. We don't want to report a warning in those cases.
      @if _mat-is-legacy-constructed-theme($theme) {
        $duplicate-legacy-density: true;
      }
      @else if not $mat-theme-ignore-duplication-warnings {
        @warn 'The same density styles are generated multiple times. ' +
           $_mat-theme-duplicate-warning;
      }
    }
    $previous-density: append($previous-density, $density-config);
  }

  $_mat-theme-emitted-color: map_merge(
      $_mat-theme-emitted-color, ($id: $previous-color)) !global;
  $_mat-theme-emitted-density: map_merge(
      $_mat-theme-emitted-density, ($id: $previous-density)) !global;
  $_mat-theme-emitted-typography: map_merge(
      $_mat-theme-emitted-typography, ($id: $previous-typography)) !global;

  // Optionally, consumers of this mixin can wrap contents inside so that nested
  // duplicate style checks do not report another warning. e.g. if developers include
  // the `angular-material-theme` mixin twice, only the top-level duplicate styles check
  // should report a warning. Not all individual components should report a warning too.
  $orig-mat-theme-ignore-duplication-warnings: $mat-theme-ignore-duplication-warnings;
  $mat-theme-ignore-duplication-warnings: true !global;

  // If duplicate default density styles would be generated for a legacy constructed theme,
  // we adjust the density generation so that no density styles are generated by default.
  // If no default density styles have been generated yet, we ensure that the styles
  // are generated at root. For legacy themes our goal is to generate default density
  // styles **once** and at root. This matches the old behavior where density styles were
  // part of the base component styles (that did not use view encapsulation).
  // TODO: Remove this compatibility logic when the legacy theming API is removed.
  $_mat-density-generate-at-root: _mat-is-legacy-constructed-theme($theme) !global;
  $_mat-density-generate-styles: not $duplicate-legacy-density !global;

  @content;
  $mat-theme-ignore-duplication-warnings: $orig-mat-theme-ignore-duplication-warnings !global;

  $_mat-density-generate-at-root: false !global;
  $_mat-density-generate-styles: true !global;
}



$mat-ripple-color-opacity: 0.1;

@mixin mat-ripple() {

  // The host element of an mat-ripple directive should always have a position of "absolute" or
  // "relative" so that the ripples inside are correctly positioned relatively to the container.
  .mat-ripple {
    overflow: hidden;

    // By default, every ripple container should have position: relative in favor of creating an
    // easy API for developers using the MatRipple directive.
    position: relative;

    // Promote containers that have ripples to a new layer. We want to target `:not(:empty)`,
    // because we don't want all ripple containers to have their own layer since they're used in a
    // lot of places and the layer is only relevant while animating. Note that ideally we'd use
    // the `contain` property here (see #13175), because `:empty` can be broken by having extra
    // text inside the element, but it isn't very well supported yet.
    &:not(:empty) {
      transform: translateZ(0);
    }
  }

  .mat-ripple.mat-ripple-unbounded {
    overflow: visible;
  }

  .mat-ripple-element {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;

    transition: opacity, transform 0ms cubic-bezier(0, 0, 0.2, 1);
    transform: scale(0);

    // In high contrast mode the ripple is opaque, causing it to obstruct the content.
    @include cdk-high-contrast(active, off) {
      display: none;
    }
  }
}

/* Colors for the ripple elements.*/
@mixin mat-ripple-color($config-or-theme) {
  $config: mat-get-color-config($config-or-theme);
  $foreground: map_get($config, foreground);
  $foreground-base: map_get($foreground, base);

  .mat-ripple-element {
    // If the ripple color is resolves to a color *type*, we can use it directly, otherwise
    // (e.g. it resolves to a CSS variable) we fall back to using the color and setting an opacity.
    @if (type-of($foreground-base) == color) {
      background-color: rgba($foreground-base, $mat-ripple-color-opacity);
    }
    @else {
      background-color: $foreground-base;
      opacity: $mat-ripple-color-opacity;
    }
  }
}

@mixin mat-ripple-theme($theme-or-color-config) {
  $theme: _mat-legacy-get-theme($theme-or-color-config);
  @include _mat-check-duplicate-theme-styles($theme, 'mat-ripple') {
    $color: mat-get-color-config($theme);
    @if $color != null {
      @include mat-ripple-color($color);
    }
  }
}



// This mixin ensures an element spans to fill the nearest ancestor with defined positioning.
@mixin mat-fill {
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  position: absolute;
}


/// Mixin that turns on strong focus indicators.
///
/// @example
///   .my-app {
///     @include mat-strong-focus-indicators($config);
///   }
@mixin mat-strong-focus-indicators($config: ()) {
  // Default focus indicator config.
  $default-config: (
    border-style: solid,
    border-width: 3px,
    border-radius: 4px,
  );

  // Merge default config with user config.
  $config: map-merge($default-config, $config);
  $border-style: map-get($config, border-style);
  $border-width: map-get($config, border-width);
  $border-radius: map-get($config, border-radius);

  // Base styles for focus indicators.
  .mat-focus-indicator::before {
    @include mat-fill();
    box-sizing: border-box;
    pointer-events: none;
    border: $border-width $border-style transparent;
    border-radius: $border-radius;
  }

  // By default, all focus indicators are flush with the bounding box of their
  // host element. For particular elements (listed below), default inset/offset
  // values are necessary to ensure that the focus indicator is sufficiently
  // contrastive and renders appropriately.

  .mat-focus-indicator.mat-flat-button::before,
  .mat-focus-indicator.mat-raised-button::before,
  .mat-focus-indicator.mat-fab::before,
  .mat-focus-indicator.mat-mini-fab::before,
  .mat-focus-indicator.mat-chip::before,
  .mat-focus-indicator.mat-sort-header-container::before {
    margin: -($border-width + 2px);
  }

  .mat-focus-indicator.mat-stroked-button::before,
  .mat-focus-indicator.mat-calendar-body-cell-content::before {
    margin: -($border-width + 3px);
  }

  .mat-focus-indicator.mat-tab-link::before,
  .mat-focus-indicator.mat-tab-label::before {
    margin: 5px;
  }

  // Render the focus indicator on focus. Defining a pseudo element's
  // content will cause it to render.

  // Checkboxes, radios, and slide toggles render focus indicators when the
  // associated visually-hidden input is focused.
  .mat-checkbox-input:focus ~ .mat-focus-indicator::before,
  .mat-radio-input:focus ~ .mat-focus-indicator::before,
  .mat-slide-toggle-input:focus ~ .mat-slide-toggle-thumb-container .mat-focus-indicator::before,

  // For options, render the focus indicator when the class .mat-active
  // is present.
  .mat-focus-indicator.mat-option.mat-active::before,

  // For calendar cells, render the focus indicator when the parent cell is
  // focused.
  .mat-calendar-body-cell:focus .mat-focus-indicator::before,

  // For all other components, render the focus indicator on focus.
  .mat-focus-indicator:focus::before {
    content: '';
  }
}

// Mixin that applies the border color for the focus indicators.
@mixin _mat-strong-focus-indicators-border-color($color) {
  .mat-focus-indicator::before {
    border-color: $color;
  }
}

@mixin mat-strong-focus-indicators-color($config-or-theme) {
  $config: mat-get-color-config($config-or-theme);
  @include _mat-strong-focus-indicators-border-color(mat-color(map_get($config, primary)));
}

/// Mixin that sets the color of the focus indicators.
///
/// @param {color|map} $theme-or-color
///   If theme, focus indicators are set to the primary color of the theme. If
///   color, focus indicators are set to that color.
///
/// @example
///   .demo-dark-theme {
///     @include mat-strong-focus-indicators-theme($dark-theme-map);
///   }
///
/// @example
///   .demo-red-theme {
///     @include mat-strong-focus-indicators-theme(#f00);
///   }
/* stylelint-disable-next-line material/theme-mixin-api */
@mixin mat-strong-focus-indicators-theme($theme-or-color) {
  @if type-of($theme-or-color) != 'map' {
    @include _mat-strong-focus-indicators-border-color($theme-or-color);
  }
  @else {
    $theme: _mat-legacy-get-theme($theme-or-color);
    @include _mat-check-duplicate-theme-styles($theme, 'mat-strong-focus-indicators') {
      $color: mat-get-color-config($theme);
      @if $color != null {
        @include mat-strong-focus-indicators-color($color);
      }
    }
  }
}

// Mixin that ensures focus indicator host elements are positioned so that the focus indicator
// pseudo element within is positioned relative to the host. Private mixin included within
// `mat-core`.
@mixin _mat-strong-focus-indicators-positioning() {
  .mat-focus-indicator {
    position: relative;
  }
}




// Utility for fetching a nested value from a typography config.
@function _mat-get-type-value($config, $level, $name) {
  @return map-get(map-get($config, $level), $name);
}

// Gets the font size for a level inside a typography config.
@function mat-font-size($config, $level) {
  @return _mat-get-type-value($config, $level, font-size);
}

// Gets the line height for a level inside a typography config.
@function mat-line-height($config, $level) {
  @return _mat-get-type-value($config, $level, line-height);
}

// Gets the font weight for a level inside a typography config.
@function mat-font-weight($config, $level) {
  @return _mat-get-type-value($config, $level, font-weight);
}

// Gets the letter spacing for a level inside a typography config.
@function mat-letter-spacing($config, $level) {
  @return _mat-get-type-value($config, $level, letter-spacing);
}

// Gets the font-family from a typography config and removes the quotes around it.
@function mat-font-family($config, $level: null) {
  $font-family: map-get($config, font-family);

  @if $level != null {
    $font-family: _mat-get-type-value($config, $level, font-family);
  }

  // Guard against unquoting non-string values, because it's deprecated.
  @return if(type-of($font-family) == string, unquote($font-family), $font-family);
}

// Outputs the shorthand `font` CSS property, based on a set of typography values. Falls back to
// the individual properties if a value that isn't allowed in the shorthand is passed in.
@mixin mat-typography-font-shorthand($font-size, $font-weight, $line-height, $font-family) {
  // If any of the values are set to `inherit`, we can't use the shorthand
  // so we fall back to passing in the individual properties.
  @if ($font-size == inherit or
       $font-weight == inherit or
       $line-height == inherit or
       $font-family == inherit or
       $font-size == null or
       $font-weight == null or
       $line-height == null or
       $font-family == null) {

    font-size: $font-size;
    font-weight: $font-weight;
    line-height: $line-height;
    font-family: $font-family;
  }
  @else {
    // Otherwise use the shorthand `font`, because it's the least amount of bytes. Note
    // that we need to use interpolation for `font-size/line-height` in order to prevent
    // Sass from dividing the two values.
    font: $font-weight #{$font-size}/#{$line-height} $font-family;
  }
}

// Converts a typography level into CSS styles.
@mixin mat-typography-level-to-styles($config, $level) {
  $font-size: mat-font-size($config, $level);
  $font-weight: mat-font-weight($config, $level);
  $line-height: mat-line-height($config, $level);
  $font-family: mat-font-family($config, $level);

  @include mat-typography-font-shorthand($font-size, $font-weight, $line-height, $font-family);
  letter-spacing: mat-letter-spacing($config, $level);
}


@mixin mat-option-color($config-or-theme) {
  $config: mat-get-color-config($config-or-theme);
  $foreground: map-get($config, foreground);
  $background: map-get($config, background);
  $primary: map-get($config, primary);
  $accent: map-get($config, accent);
  $warn: map-get($config, warn);

  .mat-option {
    color: mat-color($foreground, text);

    &:hover:not(.mat-option-disabled),
    &:focus:not(.mat-option-disabled) {
      background: mat-color($background, hover);
    }

    // In multiple mode there is a checkbox to show that the option is selected.
    &.mat-selected:not(.mat-option-multiple):not(.mat-option-disabled) {
      background: mat-color($background, hover);
    }

    &.mat-active {
      background: mat-color($background, hover);
      color: mat-color($foreground, text);
    }

    &.mat-option-disabled {
      color: mat-color($foreground, hint-text);
    }
  }

  .mat-primary .mat-option.mat-selected:not(.mat-option-disabled) {
    color: mat-color($primary, text);
  }

  .mat-accent .mat-option.mat-selected:not(.mat-option-disabled) {
    color: mat-color($accent, text);
  }

  .mat-warn .mat-option.mat-selected:not(.mat-option-disabled) {
    color: mat-color($warn, text);
  }
}

@mixin mat-option-typography($config-or-theme) {
  $config: mat-get-typography-config($config-or-theme);
  .mat-option {
    font: {
      family: mat-font-family($config);
      size: mat-font-size($config, subheading-2);
    }
  }
}

@mixin _mat-option-density($config-or-theme) {}

@mixin mat-option-theme($theme-or-color-config) {
  $theme: _mat-legacy-get-theme($theme-or-color-config);
  @include _mat-check-duplicate-theme-styles($theme, 'mat-option') {
    $color: mat-get-color-config($theme);
    $density: mat-get-density-config($theme);
    $typography: mat-get-typography-config($theme);

    @if $color != null {
      @include mat-option-color($color);
    }
    @if $density != null {
      @include _mat-option-density($density);
    }
    @if $typography != null {
      @include mat-option-typography($typography);
    }
  }
}






@mixin mat-optgroup-color($config-or-theme) {
  $config: mat-get-color-config($config-or-theme);
  $foreground: map-get($config, foreground);

  .mat-optgroup-label {
    color: mat-color($foreground, secondary-text);
  }

  .mat-optgroup-disabled .mat-optgroup-label {
    color: mat-color($foreground, hint-text);
  }
}

@mixin mat-optgroup-typography($config-or-theme) {
  $config: mat-get-typography-config($config-or-theme);
  .mat-optgroup-label {
    @include mat-typography-level-to-styles($config, body-2);
  }
}

@mixin _mat-optgroup-density($config-or-theme) {}

@mixin mat-optgroup-theme($theme-or-color-config) {
  $theme: _mat-legacy-get-theme($theme-or-color-config);
  @include _mat-check-duplicate-theme-styles($theme, 'mat-optgroup') {
    $color: mat-get-color-config($theme);
    $density: mat-get-density-config($theme);
    $typography: mat-get-typography-config($theme);

    @if $color != null {
      @include mat-optgroup-color($color);
    }
    @if $density != null {
      @include _mat-optgroup-density($density);
    }
    @if $typography != null {
      @include mat-optgroup-typography($typography);
    }
  }
}




@mixin mat-pseudo-checkbox-color($config-or-theme) {
  $config: mat-get-color-config($config-or-theme);
  $is-dark-theme: map-get($config, is-dark);
  $primary: map-get($config, primary);
  $accent: map-get($config, accent);
  $warn: map-get($config, warn);
  $background: map-get($config, background);

  // NOTE(traviskaufman): While the spec calls for translucent blacks/whites for disabled colors,
  // this does not work well with elements layered on top of one another. To get around this we
  // blend the colors together based on the base color and the theme background.
  $white-30pct-opacity-on-dark: #686868;
  $black-26pct-opacity-on-light: #b0b0b0;
  $disabled-color: if($is-dark-theme, $white-30pct-opacity-on-dark, $black-26pct-opacity-on-light);
  $colored-box-selector: '.mat-pseudo-checkbox-checked, .mat-pseudo-checkbox-indeterminate';

  .mat-pseudo-checkbox {
    color: mat-color(map-get($config, foreground), secondary-text);

    &::after {
      color: mat-color($background, background);
    }
  }

  .mat-pseudo-checkbox-disabled {
    color: $disabled-color;
  }

  .mat-primary .mat-pseudo-checkbox-checked,
  .mat-primary .mat-pseudo-checkbox-indeterminate {
    background: mat-color(map-get($config, primary));
  }

  // Default to the accent color. Note that the pseudo checkboxes are meant to inherit the
  // theme from their parent, rather than implementing their own theming, which is why we
  // don't attach to the `mat-*` classes. Also note that this needs to be below `.mat-primary`
  // in order to allow for the color to be overwritten if the checkbox is inside a parent that
  // has `mat-accent` and is placed inside another parent that has `mat-primary`.
  .mat-pseudo-checkbox-checked,
  .mat-pseudo-checkbox-indeterminate,
  .mat-accent .mat-pseudo-checkbox-checked,
  .mat-accent .mat-pseudo-checkbox-indeterminate {
    background: mat-color(map-get($config, accent));
  }

  .mat-warn .mat-pseudo-checkbox-checked,
  .mat-warn .mat-pseudo-checkbox-indeterminate {
    background: mat-color(map-get($config, warn));
  }

  .mat-pseudo-checkbox-checked,
  .mat-pseudo-checkbox-indeterminate {
    &.mat-pseudo-checkbox-disabled {
      background: $disabled-color;
    }
  }
}

@mixin mat-pseudo-checkbox-typography($config-or-theme) {}

@mixin _mat-pseudo-checkbox-density($config-or-theme) {}

@mixin mat-pseudo-checkbox-theme($theme-or-color-config) {
  $theme: _mat-legacy-get-theme($theme-or-color-config);
  @include _mat-check-duplicate-theme-styles($theme, 'mat-pseudo-checkbox') {
    $color: mat-get-color-config($theme);
    $density: mat-get-density-config($theme);
    $typography: mat-get-typography-config($theme);

    @if $color != null {
      @include mat-pseudo-checkbox-color($color);
    }
    @if $density != null {
      @include _mat-pseudo-checkbox-density($density);
    }
    @if $typography != null {
      @include mat-pseudo-checkbox-typography($typography);
    }
  }
}



// Represents a typography level from the Material design spec.
@function mat-typography-level(
  $font-size,
  $line-height: $font-size,
  $font-weight: 400,
  $font-family: null,
  $letter-spacing: normal) {

  @return (
    font-size: $font-size,
    line-height: $line-height,
    font-weight: $font-weight,
    font-family: $font-family,
    letter-spacing: $letter-spacing
  );
}

// Represents a collection of typography levels.
// Defaults come from https://material.io/guidelines/style/typography.html
// Note: The spec doesn't mention letter spacing. The values here come from
// eyeballing it until it looked exactly like the spec examples.
@function mat-typography-config(
  $font-family:   'Roboto, "Helvetica Neue", sans-serif',
  $display-4:     mat-typography-level(112px, 112px, 300, $letter-spacing: -0.05em),
  $display-3:     mat-typography-level(56px, 56px, 400, $letter-spacing: -0.02em),
  $display-2:     mat-typography-level(45px, 48px, 400, $letter-spacing: -0.005em),
  $display-1:     mat-typography-level(34px, 40px, 400),
  $headline:      mat-typography-level(24px, 32px, 400),
  $title:         mat-typography-level(20px, 32px, 500),
  $subheading-2:  mat-typography-level(16px, 28px, 400),
  $subheading-1:  mat-typography-level(15px, 24px, 400),
  $body-2:        mat-typography-level(14px, 24px, 500),
  $body-1:        mat-typography-level(14px, 20px, 400),
  $caption:       mat-typography-level(12px, 20px, 400),
  $button:        mat-typography-level(14px, 14px, 500),
  // Line-height must be unit-less fraction of the font-size.
  $input:         mat-typography-level(inherit, 1.125, 400)
) {

  // Declare an initial map with all of the levels.
  $config: (
    display-4:      $display-4,
    display-3:      $display-3,
    display-2:      $display-2,
    display-1:      $display-1,
    headline:       $headline,
    title:          $title,
    subheading-2:   $subheading-2,
    subheading-1:   $subheading-1,
    body-2:         $body-2,
    body-1:         $body-1,
    caption:        $caption,
    button:         $button,
    input:          $input,
  );

  // Loop through the levels and set the `font-family` of the ones that don't have one to the base.
  // Note that Sass can't modify maps in place, which means that we need to merge and re-assign.
  @each $key, $level in $config {
    @if map-get($level, font-family) == null {
      $new-level: map-merge($level, (font-family: $font-family));
      $config: map-merge($config, ($key: $new-level));
    }
  }

  // Add the base font family to the config.
  @return map-merge($config, (font-family: $font-family));
}

// Adds the base typography styles, based on a config.
/* stylelint-disable-next-line material/theme-mixin-api */
@mixin mat-base-typography($config, $selector: '.mat-typography') {
  .mat-h1, .mat-headline, #{$selector} h1 {
    @include mat-typography-level-to-styles($config, headline);
    margin: 0 0 16px;
  }

  .mat-h2, .mat-title, #{$selector} h2 {
    @include mat-typography-level-to-styles($config, title);
    margin: 0 0 16px;
  }

  .mat-h3, .mat-subheading-2, #{$selector} h3 {
    @include mat-typography-level-to-styles($config, subheading-2);
    margin: 0 0 16px;
  }

  .mat-h4, .mat-subheading-1, #{$selector} h4 {
    @include mat-typography-level-to-styles($config, subheading-1);
    margin: 0 0 16px;
  }

  // Note: the spec doesn't have anything that would correspond to h5 and h6, but we add these for
  // consistency. The font sizes come from the Chrome user agent styles which have h5 at 0.83em
  // and h6 at 0.67em.
  .mat-h5, #{$selector} h5 {
    @include mat-typography-font-shorthand(
       // calc is used here to support css variables
      calc(#{mat-font-size($config, body-1)} * 0.83),
      mat-font-weight($config, body-1),
      mat-line-height($config, body-1),
      mat-font-family($config, body-1)
    );

    margin: 0 0 12px;
  }

  .mat-h6, #{$selector} h6 {
    @include mat-typography-font-shorthand(
       // calc is used here to support css variables
      calc(#{mat-font-size($config, body-1)} * 0.67),
      mat-font-weight($config, body-1),
      mat-line-height($config, body-1),
      mat-font-family($config, body-1)
    );

    margin: 0 0 12px;
  }

  .mat-body-strong, .mat-body-2 {
    @include mat-typography-level-to-styles($config, body-2);
  }

  .mat-body, .mat-body-1, #{$selector} {
    @include mat-typography-level-to-styles($config, body-1);

    p {
      margin: 0 0 12px;
    }
  }

  .mat-small, .mat-caption {
    @include mat-typography-level-to-styles($config, caption);
  }

  .mat-display-4, #{$selector} .mat-display-4 {
    @include mat-typography-level-to-styles($config, display-4);
    margin: 0 0 56px;
  }

  .mat-display-3, #{$selector} .mat-display-3 {
    @include mat-typography-level-to-styles($config, display-3);
    margin: 0 0 64px;
  }

  .mat-display-2, #{$selector} .mat-display-2 {
    @include mat-typography-level-to-styles($config, display-2);
    margin: 0 0 64px;
  }

  .mat-display-1, #{$selector} .mat-display-1 {
    @include mat-typography-level-to-styles($config, display-1);
    margin: 0 0 64px;
  }
}





@mixin mat-autocomplete-color($config-or-theme) {
  $config: mat-get-color-config($config-or-theme);
  $foreground: map-get($config, foreground);
  $background: map-get($config, background);

  .mat-autocomplete-panel {
    @include _mat-theme-overridable-elevation(4, $config);
    background: mat-color($background, card);
    color: mat-color($foreground, text);

    // Selected options in autocompletes should not be gray, but we
    // only want to override the background for selected options if
    // they are *not* in hover or focus state. This change has to be
    // made here because base option styles are shared between the
    // autocomplete and the select.
    .mat-option.mat-selected:not(.mat-active):not(:hover) {
      background: mat-color($background, card);

      &:not(.mat-option-disabled) {
        color: mat-color($foreground, text);
      }
    }
  }
}

@mixin mat-autocomplete-typography($config-or-theme) {}

@mixin _mat-autocomplete-density($config-or-theme) {}

@mixin mat-autocomplete-theme($theme-or-color-config) {
  $theme: _mat-legacy-get-theme($theme-or-color-config);
  @include _mat-check-duplicate-theme-styles($theme, 'mat-autocomplete') {
    $color: mat-get-color-config($theme);
    $density: mat-get-density-config($theme);
    $typography: mat-get-typography-config($theme);

    @if $color != null {
      @include mat-autocomplete-color($color);
    }
    @if $density != null {
      @include _mat-autocomplete-density($density);
    }
    @if $typography != null {
      @include mat-autocomplete-typography($typography);
    }
  }
}

// This contains all of the styles for the badge
// rather than just the color/theme because of
// no style sheet support for directives.






$mat-badge-font-size: 12px;
$mat-badge-font-weight: 600;
$mat-badge-default-size: 22px !default;
$mat-badge-small-size: $mat-badge-default-size - 6;
$mat-badge-large-size: $mat-badge-default-size + 6;

// Mixin for building offset given different sizes
@mixin _mat-badge-size($size) {
  .mat-badge-content {
    width: $size;
    height: $size;
    line-height: $size;
  }

  &.mat-badge-above {
    .mat-badge-content {
      top: -$size / 2;
    }
  }

  &.mat-badge-below {
    .mat-badge-content {
      bottom: -$size / 2;
    }
  }

  &.mat-badge-before {
    .mat-badge-content {
      left: -$size;
    }
  }

  [dir='rtl'] &.mat-badge-before {
    .mat-badge-content {
      left: auto;
      right: -$size;
    }
  }

  &.mat-badge-after {
    .mat-badge-content {
      right: -$size;
    }
  }

  [dir='rtl'] &.mat-badge-after {
    .mat-badge-content {
      right: auto;
      left: -$size;
    }
  }

  &.mat-badge-overlap {
    &.mat-badge-before {
      .mat-badge-content {
        left: -$size / 2;
      }
    }

    [dir='rtl'] &.mat-badge-before {
      .mat-badge-content {
        left: auto;
        right: -$size / 2;
      }
    }

    &.mat-badge-after {
      .mat-badge-content {
        right: -$size / 2;
      }
    }

    [dir='rtl'] &.mat-badge-after {
      .mat-badge-content {
        right: auto;
        left: -$size / 2;
      }
    }
  }
}

@mixin mat-badge-color($config-or-theme) {
  $config: mat-get-color-config($config-or-theme);
  $accent: map-get($config, accent);
  $warn: map-get($config, warn);
  $primary: map-get($config, primary);
  $background: map-get($config, background);
  $foreground: map-get($config, foreground);

  .mat-badge-content {
    color: mat-color($primary, default-contrast);
    background: mat-color($primary);

    @include cdk-high-contrast(active, off) {
      outline: solid 1px;
      border-radius: 0;
    }
  }

  .mat-badge-accent {
    .mat-badge-content {
      background: mat-color($accent);
      color: mat-color($accent, default-contrast);
    }
  }

  .mat-badge-warn {
    .mat-badge-content {
      color: mat-color($warn, default-contrast);
      background: mat-color($warn);
    }
  }

  .mat-badge {
    position: relative;
  }

  .mat-badge-hidden {
    .mat-badge-content {
      display: none;
    }
  }

  .mat-badge-disabled {
    .mat-badge-content {
      $app-background: mat-color($background, 'background');
      $badge-color: mat-color($foreground, disabled-button);

      // The disabled color usually has some kind of opacity, but because the badge is overlayed
      // on top of something else, it won't look good if it's opaque. If it is a color *type*,
      // we convert it into a solid color by taking the opacity from the rgba value and using
      // the value to determine the percentage of the background to put into foreground when
      // mixing the colors together.
      @if (type-of($badge-color) == color and type-of($app-background) == color) {
        $badge-opacity: opacity($badge-color);
        background: mix($app-background, rgba($badge-color, 1), (1 - $badge-opacity) * 100%);
      }
      @else {
        background: $badge-color;
      }

      color: mat-color($foreground, disabled-text);
    }
  }

  .mat-badge-content {
    position: absolute;
    text-align: center;
    display: inline-block;
    border-radius: 50%;
    transition: transform 200ms ease-in-out;
    transform: scale(0.6);
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    pointer-events: none;
  }

  .ng-animate-disabled .mat-badge-content,
  .mat-badge-content._mat-animation-noopable {
    transition: none;
  }

  // The active class is added after the element is added
  // so it can animate scale to default
  .mat-badge-content.mat-badge-active {
    // Scale to `none` instead of `1` to avoid blurry text in some browsers.
    transform: none;
  }

  .mat-badge-small {
    @include _mat-badge-size($mat-badge-small-size);
  }
  .mat-badge-medium {
    @include _mat-badge-size($mat-badge-default-size);
  }
  .mat-badge-large {
    @include _mat-badge-size($mat-badge-large-size);
  }
}

@mixin mat-badge-typography($config-or-theme) {
  $config: mat-get-typography-config($config-or-theme);
  .mat-badge-content {
    font-weight: $mat-badge-font-weight;
    font-size: $mat-badge-font-size;
    font-family: mat-font-family($config);
  }

  .mat-badge-small .mat-badge-content {
    // Set the font size to 75% of the original.
    font-size: $mat-badge-font-size * 0.75;
  }

  .mat-badge-large .mat-badge-content {
    font-size: $mat-badge-font-size * 2;
  }
}

@mixin _mat-badge-density($config-or-theme) {}

@mixin mat-badge-theme($theme-or-color-config) {
  $theme: _mat-legacy-get-theme($theme-or-color-config);
  @include _mat-check-duplicate-theme-styles($theme, 'mat-badge') {
    $color: mat-get-color-config($theme);
    $density: mat-get-density-config($theme);
    $typography: mat-get-typography-config($theme);

    @if $color != null {
      @include mat-badge-color($color);
    }
    @if $density != null {
      @include _mat-badge-density($density);
    }
    @if $typography != null {
      @include mat-badge-typography($typography);
    }
  }
}







@mixin mat-bottom-sheet-color($config-or-theme) {
  $config: mat-get-color-config($config-or-theme);
  $background: map-get($config, background);
  $foreground: map-get($config, foreground);

  .mat-bottom-sheet-container {
    @include _mat-theme-elevation(16, $config);
    background: mat-color($background, dialog);
    color: mat-color($foreground, text);
  }
}

@mixin mat-bottom-sheet-typography($config-or-theme) {
  $config: mat-get-typography-config($config-or-theme);
  .mat-bottom-sheet-container {
    @include mat-typography-level-to-styles($config, body-1);
  }
}

@mixin _mat-bottom-sheet-density($config-or-theme) {}

@mixin mat-bottom-sheet-theme($theme-or-color-config) {
  $theme: _mat-legacy-get-theme($theme-or-color-config);
  @include _mat-check-duplicate-theme-styles($theme, 'mat-bottom-sheet') {
    $color: mat-get-color-config($theme);
    $density: mat-get-density-config($theme);
    $typography: mat-get-typography-config($theme);

    @if $color != null {
      @include mat-bottom-sheet-color($color);
    }
    @if $density != null {
      @include _mat-bottom-sheet-density($density);
    }
    @if $typography != null {
      @include mat-bottom-sheet-typography($typography);
    }
  }
}






$_mat-button-ripple-opacity: 0.1;

// Applies a focus style to an mat-button element for each of the supported palettes.
@mixin _mat-button-focus-overlay-color($config-or-theme) {
  $config: mat-get-color-config($config-or-theme);
  $primary: map-get($config, primary);
  $accent: map-get($config, accent);
  $warn: map-get($config, warn);

  &.mat-primary .mat-button-focus-overlay {
    background-color: mat-color($primary);
  }

  &.mat-accent .mat-button-focus-overlay {
    background-color: mat-color($accent);
  }

  &.mat-warn .mat-button-focus-overlay {
    background-color: mat-color($warn);
  }

  &.mat-button-disabled .mat-button-focus-overlay {
    background-color: transparent;
  }
}

// Applies the background color for a ripple. If the value provided is not a Sass color,
// we assume that we've been given a CSS variable. Since we can't perform alpha-blending
// on a CSS variable, we instead add the opacity directly to the ripple element.
@mixin _mat-button-ripple-background($palette, $hue, $opacity) {
  $background-color: mat-color($palette, $hue, $opacity);
  background-color: $background-color;
  @if (type-of($background-color) != color) {
    opacity: $opacity;
  }
}

@mixin _mat-button-ripple-color($theme, $hue, $opacity: $_mat-button-ripple-opacity) {
  $primary: map-get($theme, primary);
  $accent: map-get($theme, accent);
  $warn: map-get($theme, warn);

  &.mat-primary .mat-ripple-element {
    @include _mat-button-ripple-background($primary, $hue, $opacity);
  }

  &.mat-accent .mat-ripple-element {
    @include _mat-button-ripple-background($accent, $hue, $opacity);
  }

  &.mat-warn .mat-ripple-element {
    @include _mat-button-ripple-background($warn, $hue, $opacity);
  }
}

// Applies a property to an mat-button element for each of the supported palettes.
@mixin _mat-button-theme-property($theme, $property, $hue) {
  $primary: map-get($theme, primary);
  $accent: map-get($theme, accent);
  $warn: map-get($theme, warn);
  $background: map-get($theme, background);
  $foreground: map-get($theme, foreground);

  &.mat-primary {
    #{$property}: mat-color($primary, $hue);
  }
  &.mat-accent {
    #{$property}: mat-color($accent, $hue);
  }
  &.mat-warn {
    #{$property}: mat-color($warn, $hue);
  }

  &.mat-primary, &.mat-accent, &.mat-warn, &.mat-button-disabled {
    &.mat-button-disabled {
      $palette: if($property == 'color', $foreground, $background);
      #{$property}: mat-color($palette, disabled-button);
    }
  }
}

@mixin mat-button-color($config-or-theme) {
  $config: mat-get-color-config($config-or-theme);
  $primary: map-get($config, primary);
  $accent: map-get($config, accent);
  $warn: map-get($config, warn);
  $background: map-get($config, background);
  $foreground: map-get($config, foreground);

  .mat-button, .mat-icon-button, .mat-stroked-button {
    // Buttons without a background color should inherit the font color. This is necessary to
    // ensure that the button is readable on custom background colors. It's wrong to always assume
    // that those buttons are always placed inside of containers with the default background
    // color of the theme (e.g. themed toolbars).
    color: inherit;
    background: transparent;

    @include _mat-button-theme-property($config, 'color', text);
    @include _mat-button-focus-overlay-color($config);

    // Setup the ripple color to be based on the text color. This ensures that the ripples
    // are matching with the current theme palette and are in contrast to the background color
    // (e.g in themed toolbars).
    .mat-ripple-element {
      opacity: $_mat-button-ripple-opacity;
      background-color: currentColor;
    }
  }

  .mat-button-focus-overlay {
    background: map_get($foreground, base);
  }

  // Note: this needs a bit extra specificity, because we're not guaranteed the inclusion
  // order of the theme styles and the button reset may end up resetting this as well.
  .mat-stroked-button:not(.mat-button-disabled) {
    border-color: mat-color($foreground, divider);
  }

  .mat-flat-button, .mat-raised-button, .mat-fab, .mat-mini-fab {
    // Default font and background color when not using any color palette.
    color: mat-color($foreground, text);
    background-color: mat-color($background, raised-button);

    @include _mat-button-theme-property($config, 'color', default-contrast);
    @include _mat-button-theme-property($config, 'background-color', default);
    @include _mat-button-ripple-color($config, default-contrast);
  }

  .mat-stroked-button, .mat-flat-button {
    @include _mat-theme-overridable-elevation(0, $config);
  }

  .mat-raised-button {
    @include _mat-theme-overridable-elevation(2, $config);

    &:not(.mat-button-disabled):active {
      @include _mat-theme-overridable-elevation(8, $config);
    }

    &.mat-button-disabled {
      @include _mat-theme-overridable-elevation(0, $config);
    }
  }

  .mat-fab, .mat-mini-fab {
    @include _mat-theme-overridable-elevation(6, $config);

    &:not(.mat-button-disabled):active {
      @include _mat-theme-overridable-elevation(12, $config);
    }

    &.mat-button-disabled {
      @include _mat-theme-overridable-elevation(0, $config);
    }
  }
}

@mixin mat-button-typography($config-or-theme) {
  $config: mat-get-typography-config($config-or-theme);
  .mat-button, .mat-raised-button, .mat-icon-button, .mat-stroked-button,
  .mat-flat-button, .mat-fab, .mat-mini-fab {
    font: {
      family: mat-font-family($config, button);
      size: mat-font-size($config, button);
      weight: mat-font-weight($config, button);
    }
  }
}

@mixin _mat-button-density($config-or-theme) {}

@mixin mat-button-theme($theme-or-color-config) {
  $theme: _mat-legacy-get-theme($theme-or-color-config);
  @include _mat-check-duplicate-theme-styles($theme, 'mat-button') {
    $color: mat-get-color-config($theme);
    $density: mat-get-density-config($theme);
    $typography: mat-get-typography-config($theme);

    @if $color != null {
      @include mat-button-color($color);
    }
    @if $density != null {
      @include _mat-button-density($density);
    }
    @if $typography != null {
      @include mat-button-typography($typography);
    }
  }
}







// Taken from mat-density with small modifications to not rely on the new Sass module
// system, and to support arbitrary properties in a density configuration.
// https://github.com/material-components/material-components-web/blob/master/packages/mdc-density

$_mat-density-interval: 4px !default;
$_mat-density-minimum-scale: minimum !default;
$_mat-density-maximum-scale: maximum !default;
$_mat-density-supported-scales: (default, minimum, maximum) !default;
$_mat-density-default-scale: 0 !default;

// Whether density should be generated at root. This will be temporarily set to `true`
// whenever density styles for legacy themes are generated.
$_mat-density-generate-at-root: false;
// Whether density styles should be generated. This will be temporarily set to `false` if
// duplicate density styles for a legacy theme would be generated. For legacy themes,
// we always generate the default density **only once** at root.
$_mat-density-generate-styles: true;

// Mixin that can be used to wrap density styles of given components. The mixin will
// move the density styles to root if the `$_mat-density-generate-at-root` global variable
// is set. If `$_mat-density-generate-styles` is set to `false`, generation of density
// styles wrapped in this mixin is skipped. This mixin exists to improve backwards compatibility
// of the new theming API where density styles are included as part of themes. Previously,
// density styles of components were part of their base styles. With the new API, they are
// part of the theming system. The `<..>-theme` mixins generate density by default unless
// the density configuration is explicitly specified as per new API. This means, that projects
// using `<..>-theme` mixins for separate themes (like `.dark-theme`) will cause duplicate
// density styles. This is breaking as it increases specificity of density styles. This mixin
// provides an API to control generation of density styles so that we can ensure they are only
// created *once* and at root.
@mixin _mat-density-legacy-compatibility() {
  @if $_mat-density-generate-styles and $_mat-density-generate-at-root {
    @at-root {
      @content;
    }
  }
  @else if $_mat-density-generate-styles {
    @content;
  }
}

@function _mat-density-prop-value($density-config, $density-scale, $property-name) {
  @if (type-of($density-scale) == 'string' and
      index($list: $_mat-density-supported-scales, $value: $density-scale) == null) {
    @error 'mat-density: Supported density scales #{$_mat-density-supported-scales}, '  +
      'but received #{$density-scale}.';
  }

  $value: null;
  $property-scale-map: map_get($density-config, $property-name);

  @if map_has_key($property-scale-map, $density-scale) {
    $value: map_get($property-scale-map, $density-scale);
  }
  @else {
    $value: map_get($property-scale-map, default) + $density-scale * $_mat-density-interval;
  }

  $min-value: map_get($property-scale-map, $_mat-density-minimum-scale);
  $max-value: map_get($property-scale-map, $_mat-density-maximum-scale);

  @if ($value < $min-value or $value > $max-value) {
    @error 'mat-density: #{$property-name} must be between #{$min-value} and ' +
      '#{$max-value} (inclusive), but received #{$value}.';
  }

  @return $value;
}

$mat-button-toggle-standard-height: 48px !default;
// Minimum height for highest density can vary based on the content that developers
// project into button-toggle's. We use a minimum of `24px` though because commonly
// icons or text are displayed. Icons by default have a size of `24px`.
$mat-button-toggle-standard-minimum-height: 24px !default;
$mat-button-toggle-standard-maximum-height: $mat-button-toggle-standard-height !default;

$mat-button-toggle-standard-density-config: (
  height: (
    default: $mat-button-toggle-standard-height,
    maximum: $mat-button-toggle-standard-maximum-height,
    minimum: $mat-button-toggle-standard-minimum-height,
  )
) !default;


@mixin mat-button-toggle-color($config-or-theme) {
  $config: mat-get-color-config($config-or-theme);
  $foreground: map-get($config, foreground);
  $background: map-get($config, background);
  $divider-color: mat-color($foreground, divider);

  .mat-button-toggle-standalone,
  .mat-button-toggle-group {
    @include _mat-theme-elevation(2, $config);
  }

  .mat-button-toggle-standalone.mat-button-toggle-appearance-standard,
  .mat-button-toggle-group-appearance-standard {
    box-shadow: none;
  }

  .mat-button-toggle {
    color: mat-color($foreground, hint-text);

    .mat-button-toggle-focus-overlay {
      background-color: mat-color($background, focused-button);
    }
  }

  .mat-button-toggle-appearance-standard {
    color: mat-color($foreground, text);
    background: mat-color($background, card);

    .mat-button-toggle-focus-overlay {
      background-color: mat-color($background, focused-button, 1);
    }
  }

  .mat-button-toggle-group-appearance-standard .mat-button-toggle + .mat-button-toggle {
    border-left: solid 1px $divider-color;
  }

  [dir='rtl'] .mat-button-toggle-group-appearance-standard .mat-button-toggle + .mat-button-toggle {
    border-left: none;
    border-right: solid 1px $divider-color;
  }

  .mat-button-toggle-group-appearance-standard.mat-button-toggle-vertical {
    .mat-button-toggle + .mat-button-toggle {
      border-left: none;
      border-right: none;
      border-top: solid 1px $divider-color;
    }
  }

  .mat-button-toggle-checked {
    background-color: mat-color($background, selected-button);
    color: mat-color($foreground, secondary-text);

    &.mat-button-toggle-appearance-standard {
      color: mat-color($foreground, text);
    }
  }

  .mat-button-toggle-disabled {
    color: mat-color($foreground, disabled-button);
    background-color: mat-color($background, disabled-button-toggle);

    &.mat-button-toggle-appearance-standard {
      background: mat-color($background, card);
    }

    &.mat-button-toggle-checked {
      background-color: mat-color($background, selected-disabled-button);
    }
  }

  .mat-button-toggle-standalone.mat-button-toggle-appearance-standard,
  .mat-button-toggle-group-appearance-standard {
    border: solid 1px $divider-color;
  }
}

@mixin mat-button-toggle-typography($config-or-theme) {
  $config: mat-get-typography-config($config-or-theme);
  .mat-button-toggle {
    font-family: mat-font-family($config);
  }
}

@mixin _mat-button-toggle-density($config-or-theme) {
  $density-scale: mat-get-density-config($config-or-theme);
  $standard-height: _mat-density-prop-value(
      $mat-button-toggle-standard-density-config, $density-scale, height);

  @include _mat-density-legacy-compatibility() {
    .mat-button-toggle-appearance-standard .mat-button-toggle-label-content {
      line-height: $standard-height;
    }
  }
}

@mixin mat-button-toggle-theme($theme-or-color-config) {
  $theme: _mat-legacy-get-theme($theme-or-color-config);
  @include _mat-check-duplicate-theme-styles($theme, 'mat-button-toggle') {
    $color: mat-get-color-config($theme);
    $density: mat-get-density-config($theme);
    $typography: mat-get-typography-config($theme);

    @if $color != null {
      @include mat-button-toggle-color($color);
    }
    @if $density != null {
      @include _mat-button-toggle-density($density);
    }
    @if $typography != null {
      @include mat-button-toggle-typography($typography);
    }
  }
}








@mixin mat-card-color($config-or-theme) {
  $config: mat-get-color-config($config-or-theme);
  $background: map-get($config, background);
  $foreground: map-get($config, foreground);

  .mat-card {
    @include _mat-theme-overridable-elevation(1, $config);
    background: mat-color($background, card);
    color: mat-color($foreground, text);

    // Needs extra specificity to be able to override the elevation selectors.
    &.mat-card-flat {
      @include _mat-theme-overridable-elevation(0, $config);
    }
  }

  .mat-card-subtitle {
    color: mat-color($foreground, secondary-text);
  }
}

@mixin mat-card-typography($config-or-theme) {
  $config: mat-get-typography-config($config-or-theme);
  .mat-card {
    font-family: mat-font-family($config);
  }

  .mat-card-title {
    font: {
      size: mat-font-size($config, headline);
      weight: mat-font-weight($config, title);
    }
  }

  .mat-card-header .mat-card-title {
    font-size: mat-font-size($config, title);
  }

  .mat-card-subtitle,
  .mat-card-content {
    font-size: mat-font-size($config, body-1);
  }
}

@mixin _mat-card-density($config-or-theme) {}

@mixin mat-card-theme($theme-or-color-config) {
  $theme: _mat-legacy-get-theme($theme-or-color-config);
  @include _mat-check-duplicate-theme-styles($theme, 'mat-card') {
    $color: mat-get-color-config($theme);
    $density: mat-get-density-config($theme);
    $typography: mat-get-typography-config($theme);

    @if $color != null {
      @include mat-card-color($color);
    }
    @if $density != null {
      @include _mat-card-density($density);
    }
    @if $typography != null {
      @include mat-card-typography($typography);
    }
  }
}






@mixin mat-checkbox-color($config-or-theme) {
  $config: mat-get-color-config($config-or-theme);
  $is-dark-theme: map-get($config, is-dark);
  $primary: map-get($config, primary);
  $accent: map-get($config, accent);
  $warn: map-get($config, warn);
  $background: map-get($config, background);
  $foreground: map-get($config, foreground);


  // The color of the checkbox's checkmark / mixedmark.
  $checkbox-mark-color: mat-color($background, background);

  // NOTE(traviskaufman): While the spec calls for translucent blacks/whites for disabled colors,
  // this does not work well with elements layered on top of one another. To get around this we
  // blend the colors together based on the base color and the theme background.
  $white-30pct-opacity-on-dark: #686868;
  $black-26pct-opacity-on-light: #b0b0b0;
  $disabled-color: if($is-dark-theme, $white-30pct-opacity-on-dark, $black-26pct-opacity-on-light);

  .mat-checkbox-frame {
    border-color: mat-color($foreground, secondary-text);
  }

  .mat-checkbox-checkmark {
    fill: $checkbox-mark-color;
  }

  .mat-checkbox-checkmark-path {
    // !important is needed here because a stroke must be set as an
    // attribute on the SVG in order for line animation to work properly.
    stroke: $checkbox-mark-color !important;
  }

  .mat-checkbox-mixedmark {
    background-color: $checkbox-mark-color;
  }

  .mat-checkbox-indeterminate, .mat-checkbox-checked {
    &.mat-primary .mat-checkbox-background {
      background-color: mat-color($primary);
    }

    &.mat-accent .mat-checkbox-background {
      background-color: mat-color($accent);
    }

    &.mat-warn .mat-checkbox-background {
      background-color: mat-color($warn);
    }
  }

  .mat-checkbox-disabled {
    &.mat-checkbox-checked,
    &.mat-checkbox-indeterminate {
      .mat-checkbox-background {
        background-color: $disabled-color;
      }
    }

    &:not(.mat-checkbox-checked) {
      .mat-checkbox-frame {
        border-color: $disabled-color;
      }
    }

    .mat-checkbox-label {
      color: mat-color($foreground, secondary-text);
    }
  }

  // Switch this to a solid color since we're using `opacity`
  // to control how opaque the ripple should be.
  .mat-checkbox .mat-ripple-element {
    background-color: map_get(map-get($config, foreground), base);
  }

  .mat-checkbox-checked:not(.mat-checkbox-disabled),
  .mat-checkbox:active:not(.mat-checkbox-disabled) {
    &.mat-primary .mat-ripple-element {
      background: mat-color($primary);
    }

    &.mat-accent .mat-ripple-element {
      background: mat-color($accent);
    }

    &.mat-warn .mat-ripple-element {
      background: mat-color($warn);
    }
  }
}

@mixin mat-checkbox-typography($config-or-theme) {
  $config: mat-get-typography-config($config-or-theme);
  .mat-checkbox {
    font-family: mat-font-family($config);
  }

  // TODO(kara): Remove this style when fixing vertical baseline
  .mat-checkbox-layout .mat-checkbox-label {
    line-height: mat-line-height($config, body-2);
  }
}

@mixin _mat-checkbox-density($config-or-theme) {}

@mixin mat-checkbox-theme($theme-or-color-config) {
  $theme: _mat-legacy-get-theme($theme-or-color-config);
  @include _mat-check-duplicate-theme-styles($theme, 'mat-checkbox') {
    $color: mat-get-color-config($theme);
    $density: mat-get-density-config($theme);
    $typography: mat-get-typography-config($theme);

    @if $color != null {
      @include mat-checkbox-color($color);
    }
    @if $density != null {
      @include _mat-checkbox-density($density);
    }
    @if $typography != null {
      @include mat-checkbox-typography($typography);
    }
  }
}







$mat-chip-remove-font-size: 18px;

@mixin _mat-chip-element-color($foreground, $background) {
  background-color: $background;
  color: $foreground;

  .mat-chip-remove {
    color: $foreground;
    opacity: 0.4;
  }
}


// Applies the background color for a ripple element.
// If the color value provided is not a Sass color,
// we assume that we've been given a CSS variable.
// Since we can't perform alpha-blending on a CSS variable,
// we instead add the opacity directly to the ripple element.
@mixin _mat-chips-ripple-background($palette, $default-contrast, $opacity) {
  $background-color: mat-color($palette, $default-contrast, $opacity);
  background-color: $background-color;
  @if (type-of($background-color) != color) {
    opacity: $opacity;
  }
}

@mixin _mat-chip-theme-color($palette) {
  @include _mat-chip-element-color(mat-color($palette, default-contrast), mat-color($palette));

  .mat-ripple-element {
    @include _mat-chips-ripple-background($palette, default-contrast, 0.1);
  }
}

@mixin mat-chips-color($config-or-theme) {
  $config: mat-get-color-config($config-or-theme);
  $is-dark-theme: map-get($config, is-dark);
  $primary: map-get($config, primary);
  $accent: map-get($config, accent);
  $warn: map-get($config, warn);
  $background: map-get($config, background);
  $foreground: map-get($config, foreground);

  $unselected-background: mat-color($background, unselected-chip);
  $unselected-foreground: mat-color($foreground, text);

  .mat-chip.mat-standard-chip {
    @include _mat-chip-element-color($unselected-foreground, $unselected-background);

    &:not(.mat-chip-disabled) {
      &:active {
        @include _mat-theme-elevation(3, $config);
      }

      .mat-chip-remove:hover {
        opacity: 0.54;
      }
    }

    &.mat-chip-disabled {
      opacity: 0.4;
    }

    &::after {
      background: map_get($foreground, base);
    }
  }

  .mat-chip.mat-standard-chip.mat-chip-selected {
    &.mat-primary {
      @include _mat-chip-theme-color($primary);
    }

    &.mat-warn {
      @include _mat-chip-theme-color($warn);
    }

    &.mat-accent {
      @include _mat-chip-theme-color($accent);
    }
  }
}

@mixin mat-chips-typography($config-or-theme) {
  $config: mat-get-typography-config($config-or-theme);
  .mat-chip {
    font-size: mat-font-size($config, body-2);
    font-weight: mat-font-weight($config, body-2);

    .mat-chip-trailing-icon.mat-icon,
    .mat-chip-remove.mat-icon {
      font-size: $mat-chip-remove-font-size;
    }
  }
}

@mixin _mat-chips-density($config-or-theme) {}

@mixin mat-chips-theme($theme-or-color-config) {
  $theme: _mat-legacy-get-theme($theme-or-color-config);
  @include _mat-check-duplicate-theme-styles($theme, 'mat-chips') {
    $color: mat-get-color-config($theme);
    $density: mat-get-density-config($theme);
    $typography: mat-get-typography-config($theme);

    @if $color != null {
      @include mat-chips-color($color);
    }
    @if $density != null {
      @include _mat-chips-density($density);
    }
    @if $typography != null {
      @include mat-chips-typography($typography);
    }
  }
}







@mixin mat-divider-color($config-or-theme) {
  $config: mat-get-color-config($config-or-theme);
  $foreground: map-get($config, foreground);

  .mat-divider {
    border-top-color: mat-color($foreground, divider);
  }

  .mat-divider-vertical {
    border-right-color: mat-color($foreground, divider);
  }
}

@mixin mat-divider-typography($config-or-theme) {}

@mixin _mat-divider-density($config-or-theme) {}

@mixin mat-divider-theme($theme-or-color-config) {
  $theme: _mat-legacy-get-theme($theme-or-color-config);
  @include _mat-check-duplicate-theme-styles($theme, 'mat-divider') {
    $color: mat-get-color-config($theme);
    $density: mat-get-density-config($theme);
    $typography: mat-get-typography-config($theme);

    @if $color != null {
      @include mat-divider-color($color);
    }
    @if $density != null {
      @include _mat-divider-density($density);
    }
    @if $typography != null {
      @include mat-divider-typography($typography);
    }
  }
}






@mixin mat-table-color($config-or-theme) {
  $config: mat-get-color-config($config-or-theme);
  $background: map-get($config, background);
  $foreground: map-get($config, foreground);

  .mat-table {
    background: mat-color($background, 'card');
  }

  .mat-table thead, .mat-table tbody, .mat-table tfoot,
  mat-header-row, mat-row, mat-footer-row,
  [mat-header-row], [mat-row], [mat-footer-row],
  .mat-table-sticky {
    background: inherit;
  }

  mat-row, mat-header-row, mat-footer-row,
  th.mat-header-cell, td.mat-cell, td.mat-footer-cell {
    border-bottom-color: mat-color($foreground, divider);
  }

  .mat-header-cell {
    color: mat-color($foreground, secondary-text);
  }

  .mat-cell, .mat-footer-cell {
    color: mat-color($foreground, text);
  }
}

@mixin mat-table-typography($config-or-theme) {
  $config: mat-get-typography-config($config-or-theme);
  .mat-table {
    font-family: mat-font-family($config);
  }

  .mat-header-cell {
    font-size: mat-font-size($config, caption);
    font-weight: mat-font-weight($config, body-2);
  }

  .mat-cell, .mat-footer-cell {
    font-size: mat-font-size($config, body-1);
  }
}

@mixin _mat-table-density($config-or-theme) {}

@mixin mat-table-theme($theme-or-color-config) {
  $theme: _mat-legacy-get-theme($theme-or-color-config);
  @include _mat-check-duplicate-theme-styles($theme, 'mat-table') {
    $color: mat-get-color-config($theme);
    $density: mat-get-density-config($theme);
    $typography: mat-get-typography-config($theme);

    @if $color != null {
      @include mat-table-color($color);
    }
    @if $density != null {
      @include _mat-table-density($density);
    }
    @if $typography != null {
      @include mat-table-typography($typography);
    }
  }
}








$mat-datepicker-selected-today-box-shadow-width: 1px;
$mat-datepicker-selected-fade-amount: 0.6;
$mat-datepicker-range-fade-amount: 0.2;
$mat-datepicker-today-fade-amount: 0.2;
$mat-calendar-body-font-size: 13px !default;
$mat-calendar-weekday-table-font-size: 11px !default;

@mixin _mat-datepicker-color($palette) {
  @include mat-date-range-colors(
    mat-color($palette, default, $mat-datepicker-range-fade-amount));

  .mat-calendar-body-selected {
    background-color: mat-color($palette);
    color: mat-color($palette, default-contrast);
  }

  .mat-calendar-body-disabled > .mat-calendar-body-selected {
    $background: mat-color($palette);

    @if (type-of($background) == color) {
      background-color: fade-out($background, $mat-datepicker-selected-fade-amount);
    }
    @else {
      // If we couldn't resolve to background to a color (e.g. it's a CSS variable),
      // fall back to fading the content out via `opacity`.
      opacity: $mat-datepicker-today-fade-amount;
    }
  }

  .mat-calendar-body-today.mat-calendar-body-selected {
    box-shadow: inset 0 0 0 $mat-datepicker-selected-today-box-shadow-width
                mat-color($palette, default-contrast);
  }
}

@mixin mat-datepicker-color($config-or-theme) {
  $config: mat-get-color-config($config-or-theme);
  $foreground: map-get($config, foreground);
  $background: map-get($config, background);

  .mat-calendar-arrow {
    border-top-color: mat-color($foreground, icon);
  }

  // The prev/next buttons need a bit more specificity to
  // avoid being overwritten by the .mat-icon-button.
  .mat-datepicker-toggle,
  .mat-datepicker-content .mat-calendar-next-button,
  .mat-datepicker-content .mat-calendar-previous-button {
    color: mat-color($foreground, icon);
  }

  .mat-calendar-table-header {
    color: mat-color($foreground, hint-text);
  }

  .mat-calendar-table-header-divider::after {
    background: mat-color($foreground, divider);
  }

  .mat-calendar-body-label {
    color: mat-color($foreground, secondary-text);
  }

  .mat-calendar-body-cell-content,
  .mat-date-range-input-separator {
    color: mat-color($foreground, text);
    border-color: transparent;
  }

  .mat-calendar-body-disabled > .mat-calendar-body-cell-content:not(.mat-calendar-body-selected),
  .mat-form-field-disabled .mat-date-range-input-separator {
    color: mat-color($foreground, disabled-text);
  }

  .mat-calendar-body-cell:not(.mat-calendar-body-disabled):hover,
  .cdk-keyboard-focused .mat-calendar-body-active,
  .cdk-program-focused .mat-calendar-body-active {
    & > .mat-calendar-body-cell-content:not(.mat-calendar-body-selected) {
      background-color: mat-color($background, hover);
    }
  }

  .mat-calendar-body-in-preview {
    $divider-color: mat-color($foreground, divider);

    @if type-of($divider-color) == color {
      // The divider color is set under the assumption that it'll be used
      // for a solid border, but because we're using a dashed border for the
      // preview range, we need to bump its opacity to ensure that it's visible.
      color: rgba($divider-color, min(opacity($divider-color) * 2, 1));
    }
    @else {
      color: $divider-color;
    }
  }

  .mat-calendar-body-today:not(.mat-calendar-body-selected) {
    // Note: though it's not text, the border is a hint about the fact that this is today's date,
    // so we use the hint color.
    border-color: mat-color($foreground, hint-text);
  }

  .mat-calendar-body-disabled > .mat-calendar-body-today:not(.mat-calendar-body-selected) {
    $color: mat-color($foreground, hint-text);

    @if (type-of($color) == color) {
      border-color: fade-out($color, $mat-datepicker-today-fade-amount);
    }
    @else {
      // If the color didn't resolve to a color value, but something like a CSS variable, we can't
      // fade it out so we fall back to reducing the element opacity. Note that we don't use the
      // $mat-datepicker-today-fade-amount, because hint text usually has some opacity applied
      // to it already and we don't want them to stack on top of each other.
      opacity: 0.5;
    }
  }

  @include _mat-datepicker-color(map-get($config, primary));

  .mat-datepicker-content {
    @include _mat-theme-elevation(4, $config);
    background-color: mat-color($background, card);
    color: mat-color($foreground, text);

    &.mat-accent {
      @include _mat-datepicker-color(map-get($config, accent));
    }

    &.mat-warn {
      @include _mat-datepicker-color(map-get($config, warn));
    }
  }

  .mat-datepicker-content-touch {
    @include _mat-theme-elevation(0, $config);
  }

  .mat-datepicker-toggle-active {
    color: mat-color(map-get($config, primary), text);

    &.mat-accent {
      color: mat-color(map-get($config, accent), text);
    }

    &.mat-warn {
      color: mat-color(map-get($config, warn), text);
    }
  }

  .mat-date-range-input-inner[disabled] {
    color: mat-color($foreground, disabled-text);
  }
}

@mixin mat-datepicker-typography($config-or-theme) {
  $config: mat-get-typography-config($config-or-theme);
  .mat-calendar {
    font-family: mat-font-family($config);
  }

  .mat-calendar-body {
    font-size: $mat-calendar-body-font-size;
  }

  .mat-calendar-body-label,
  .mat-calendar-period-button {
    font: {
      size: mat-font-size($config, button);
      weight: mat-font-weight($config, button);
    }
  }

  .mat-calendar-table-header th {
    font: {
      size: $mat-calendar-weekday-table-font-size;
      weight: mat-font-weight($config, body-1);
    }
  }
}

@mixin mat-date-range-colors(
  $range-color,
  $comparison-color: rgba(#f9ab00, $mat-datepicker-range-fade-amount),
  $overlap-color: #a8dab5,
  $overlap-selected-color: darken($overlap-color, 30%)) {

  .mat-calendar-body-in-range::before {
    background: $range-color;
  }

  .mat-calendar-body-in-comparison-range::before {
    background: $comparison-color;
  }

  .mat-calendar-body-comparison-bridge-start::before,
  [dir='rtl'] .mat-calendar-body-comparison-bridge-end::before {
    background: linear-gradient(to right, $range-color 50%, $comparison-color 50%);
  }

  .mat-calendar-body-comparison-bridge-end::before,
  [dir='rtl'] .mat-calendar-body-comparison-bridge-start::before {
    background: linear-gradient(to left, $range-color 50%, $comparison-color 50%);
  }

  .mat-calendar-body-in-comparison-range.mat-calendar-body-in-range::after {
    background: $overlap-color;
  }

  .mat-calendar-body-in-comparison-range > .mat-calendar-body-selected {
    background: $overlap-selected-color;

  }
}

@mixin _mat-datepicker-density($config-or-theme) {}

@mixin mat-datepicker-theme($theme-or-color-config) {
  $theme: _mat-legacy-get-theme($theme-or-color-config);
  @include _mat-check-duplicate-theme-styles($theme, 'mat-datepicker') {
    $color: mat-get-color-config($theme);
    $density: mat-get-density-config($theme);
    $typography: mat-get-typography-config($theme);

    @if $color != null {
      @include mat-datepicker-color($color);
    }
    @if $density != null {
      @include _mat-datepicker-density($density);
    }
    @if $typography != null {
      @include mat-datepicker-typography($typography);
    }
  }
}








@mixin mat-dialog-color($config-or-theme) {
  $config: mat-get-color-config($config-or-theme);
  $background: map-get($config, background);
  $foreground: map-get($config, foreground);

  .mat-dialog-container {
    @include _mat-theme-elevation(24, $config);
    background: mat-color($background, dialog);
    color: mat-color($foreground, text);
  }
}

@mixin mat-dialog-typography($config-or-theme) {
  $config: mat-get-typography-config($config-or-theme);
  .mat-dialog-title {
    @include mat-typography-level-to-styles($config, title);
  }
}

@mixin _mat-dialog-density($config-or-theme) {}

@mixin mat-dialog-theme($theme-or-color-config) {
  $theme: _mat-legacy-get-theme($theme-or-color-config);
  @include _mat-check-duplicate-theme-styles($theme, 'mat-dialog') {
    $color: mat-get-color-config($theme);
    $density: mat-get-density-config($theme);
    $typography: mat-get-typography-config($theme);

    @if $color != null {
      @include mat-dialog-color($color);
    }
    @if $density != null {
      @include _mat-dialog-density($density);
    }
    @if $typography != null {
      @include mat-dialog-typography($typography);
    }
  }
}







// Default minimum and maximum height for collapsed panel headers.
$mat-expansion-panel-header-collapsed-height: 48px !default;
$mat-expansion-panel-header-collapsed-minimum-height: 36px !default;
$mat-expansion-panel-header-collapsed-maximum-height:
    $mat-expansion-panel-header-collapsed-height !default;

// Default minimum and maximum height for expanded panel headers.
$mat-expansion-panel-header-expanded-height: 64px !default;
$mat-expansion-panel-header-expanded-minimum-height: 48px !default;
$mat-expansion-panel-header-expanded-maximum-height:
    $mat-expansion-panel-header-expanded-height !default;

// Density configuration for the expansion panel. Captures the
// height for both expanded and collapsed panel headers.
$mat-expansion-panel-header-density-config: (
  collapsed-height: (
    default: $mat-expansion-panel-header-collapsed-height,
    maximum: $mat-expansion-panel-header-collapsed-maximum-height,
    minimum: $mat-expansion-panel-header-collapsed-minimum-height,
  ),
  expanded-height: (
    default: $mat-expansion-panel-header-expanded-height,
    maximum: $mat-expansion-panel-header-expanded-maximum-height,
    minimum: $mat-expansion-panel-header-expanded-minimum-height,
  )
) !default;

// Note: Keep this in sync with the animation timing for the toggle indicator
// and body expansion. These are animated using Angular animations.
$mat-expansion-panel-header-transition: 225ms cubic-bezier(0.4, 0, 0.2, 1);


@mixin mat-expansion-panel-color($config-or-theme) {
  $config: mat-get-color-config($config-or-theme);
  $background: map-get($config, background);
  $foreground: map-get($config, foreground);

  .mat-expansion-panel {
    @include _mat-theme-overridable-elevation(2, $config);
    background: mat-color($background, card);
    color: mat-color($foreground, text);
  }

  .mat-action-row {
    border-top-color: mat-color($foreground, divider);
  }

  .mat-expansion-panel {
    & .mat-expansion-panel-header.cdk-keyboard-focused,
    & .mat-expansion-panel-header.cdk-program-focused,
    &:not(.mat-expanded) .mat-expansion-panel-header:hover {
      &:not([aria-disabled='true']) {
        background: mat-color($background, hover);
      }
    }
  }

  // Disable the hover on touch devices since it can appear like it is stuck. We can't use
  // `@media (hover)` above, because the desktop support browser support isn't great.
  @media (hover: none) {
    .mat-expansion-panel:not(.mat-expanded):not([aria-disabled='true'])
      .mat-expansion-panel-header:hover {
      background: mat-color($background, card);
    }
  }

  .mat-expansion-panel-header-title {
    color: mat-color($foreground, text);
  }

  .mat-expansion-panel-header-description,
  .mat-expansion-indicator::after {
    color: mat-color($foreground, secondary-text);
  }

  .mat-expansion-panel-header[aria-disabled='true'] {
    color: mat-color($foreground, disabled-button);

    .mat-expansion-panel-header-title,
    .mat-expansion-panel-header-description {
      color: inherit;
    }
  }
}

@mixin mat-expansion-panel-typography($config-or-theme) {
  $config: mat-get-typography-config($config-or-theme);
  .mat-expansion-panel-header {
    font: {
      family: mat-font-family($config, subheading-1);
      size: mat-font-size($config, subheading-1);
      weight: mat-font-weight($config, subheading-1);
    }
  }

  .mat-expansion-panel-content {
    @include mat-typography-level-to-styles($config, body-1);
  }
}

@mixin _mat-expansion-panel-density($config-or-theme) {
  $density-scale: mat-get-density-config($config-or-theme);
  $expanded-height: _mat-density-prop-value(
        $mat-expansion-panel-header-density-config, $density-scale, expanded-height);
  $collapsed-height: _mat-density-prop-value(
      $mat-expansion-panel-header-density-config, $density-scale, collapsed-height);

  @include _mat-density-legacy-compatibility() {
    .mat-expansion-panel-header {
      height: $collapsed-height;

      &.mat-expanded {
        height: $expanded-height;
      }
    }
  }
}

@mixin mat-expansion-panel-theme($theme-or-color-config) {
  $theme: _mat-legacy-get-theme($theme-or-color-config);
  @include _mat-check-duplicate-theme-styles($theme, 'mat-expansion-panel') {
    $color: mat-get-color-config($theme);
    $density: mat-get-density-config($theme);
    $typography: mat-get-typography-config($theme);

    @if $color != null {
      @include mat-expansion-panel-color($color);
    }
    @if $density != null {
      @include _mat-expansion-panel-density($density);
    }
    @if $typography != null {
      @include mat-expansion-panel-typography($typography);
    }
  }
}





// This mixin will ensure that lines that overflow the container will hide the overflow and
// truncate neatly with an ellipsis.
@mixin mat-truncate-line() {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

// Mixin to provide all mat-line styles, changing secondary font size based on whether the list
// is in dense mode.
@mixin mat-line-base($secondary-font-size) {
  .mat-line {
    @include mat-truncate-line();
    display: block;
    box-sizing: border-box;

    // all lines but the top line should have smaller text
    &:nth-child(n+2) {
      font-size: $secondary-font-size;
    }
  }
}

// This mixin normalizes default element styles, e.g. font weight for heading text.
@mixin mat-normalize-text() {
  & > * {
    margin: 0;
    padding: 0;
    font-weight: normal;
    font-size: inherit;
  }
}

// This mixin provides base styles for the wrapper around mat-line elements in a list.
@mixin mat-line-wrapper-base() {
  @include mat-normalize-text();

  display: flex;
  flex-direction: column;
  flex: auto;
  box-sizing: border-box;
  overflow: hidden;

  // Must remove wrapper when lines are empty or it takes up horizontal
  // space and pushes other elements to the right.
  &:empty {
    display: none;
  }
}



// Include this empty mixin for consistency with the other components.
@mixin mat-grid-list-color($config-or-theme) {}

@mixin mat-grid-list-typography($config-or-theme) {
  $config: mat-get-typography-config($config-or-theme);
  .mat-grid-tile-header,
  .mat-grid-tile-footer {
    @include mat-line-base(mat-font-size($config, caption));
    font-size: mat-font-size($config, body-1);
  }
}

@mixin _mat-grid-list-density($config-or-theme) {}

@mixin mat-grid-list-theme($theme-or-color-config) {
  $theme: _mat-legacy-get-theme($theme-or-color-config);
  @include _mat-check-duplicate-theme-styles($theme, 'mat-grid-list') {
    $color: mat-get-color-config($theme);
    $density: mat-get-density-config($theme);
    $typography: mat-get-typography-config($theme);

    @if $color != null {
      @include mat-grid-list-color($color);
    }
    @if $density != null {
      @include _mat-grid-list-density($density);
    }
    @if $typography != null {
      @include mat-grid-list-typography($typography);
    }
  }
}




@mixin mat-icon-color($config-or-theme) {
  $config: mat-get-color-config($config-or-theme);
  $primary: map-get($config, primary);
  $accent: map-get($config, accent);
  $warn: map-get($config, warn);
  $background: map-get($config, background);
  $foreground: map-get($config, foreground);

  .mat-icon {
    &.mat-primary {
      color: mat-color($primary, text);
    }

    &.mat-accent {
      color: mat-color($accent, text);
    }

    &.mat-warn {
      color: mat-color($warn, text);
    }
  }
}

@mixin mat-icon-typography($config-or-theme) {}

@mixin _mat-icon-density($config-or-theme) {}

@mixin mat-icon-theme($theme-or-color-config) {
  $theme: _mat-legacy-get-theme($theme-or-color-config);
  @include _mat-check-duplicate-theme-styles($theme, 'mat-icon') {
    $color: mat-get-color-config($theme);
    $density: mat-get-density-config($theme);
    $typography: mat-get-typography-config($theme);

    @if $color != null {
      @include mat-icon-color($color);
    }
    @if $density != null {
      @include _mat-icon-density($density);
    }
    @if $typography != null {
      @include mat-icon-typography($typography);
    }
  }
}







// Renders a gradient for showing the dashed line when the input is disabled.
// Unlike using a border, a gradient allows us to adjust the spacing of the dotted line
// to match the Material Design spec.
@mixin mat-control-disabled-underline($color) {
  background-image: linear-gradient(to right, $color 0%, $color 33%, transparent 0%);
  background-size: 4px 100%;
  background-repeat: repeat-x;
}

// Figures out the color of the placeholder for a form control.
// Used primarily to prevent the various form controls from
// becoming out of sync since these colors aren't in a palette.
@function _mat-control-placeholder-color($config) {
  $foreground: map-get($config, foreground);
  $is-dark-theme: map-get($config, is-dark);
  @return mat-color($foreground, secondary-text, if($is-dark-theme, 0.5, 0.42));
}


/* stylelint-disable material/no-prefixes */
@mixin user-select($value) {
  -webkit-user-select: $value;
  -moz-user-select: $value;
  -ms-user-select: $value;
  user-select: $value;
}

@mixin input-placeholder {
  &::placeholder {
    @content;
  }

  &::-moz-placeholder {
    @content;
  }

  &::-webkit-input-placeholder {
    @content;
  }

  &:-ms-input-placeholder {
    @content;
  }
}

@mixin cursor-grab {
  cursor: -webkit-grab;
  cursor: grab;
}

@mixin cursor-grabbing {
  cursor: -webkit-grabbing;
  cursor: grabbing;
}

@mixin backface-visibility($value) {
  -webkit-backface-visibility: $value;
  backface-visibility: $value;
}
/* stylelint-enable */



@mixin mat-input-color($config-or-theme) {
  $config: mat-get-color-config($config-or-theme);
  $primary: map-get($config, primary);
  $accent: map-get($config, accent);
  $warn: map-get($config, warn);
  $foreground: map-get($config, foreground);

  .mat-form-field-type-mat-native-select .mat-form-field-infix::after {
    color: mat-color($foreground, secondary-text);
  }

  .mat-input-element:disabled,
  .mat-form-field-type-mat-native-select.mat-form-field-disabled .mat-form-field-infix::after {
    color: mat-color($foreground, disabled-text);
  }

  .mat-input-element {
    caret-color: mat-color($primary, text);

    @include input-placeholder {
      color: _mat-control-placeholder-color($config);
    }

    // On dark themes we set the native `select` color to some shade of white,
    // however the color propagates to all of the `option` elements, which are
    // always on a white background inside the dropdown, causing them to blend in.
    // Since we can't change background of the dropdown, we need to explicitly
    // reset the color of the options to something dark.
    @if (map-get($config, is-dark)) {
      option {
        color: $dark-primary-text;
      }

      option:disabled {
        color: $dark-disabled-text;
      }
    }
  }

  .mat-form-field.mat-accent .mat-input-element {
    caret-color: mat-color($accent, text);
  }

  .mat-form-field.mat-warn .mat-input-element,
  .mat-form-field-invalid .mat-input-element {
    caret-color: mat-color($warn, text);
  }

  .mat-form-field-type-mat-native-select.mat-form-field-invalid .mat-form-field-infix::after {
    color: mat-color($warn, text);
  }
}

@mixin mat-input-typography($config-or-theme) {
  $config: mat-get-typography-config($config-or-theme);
  // The unit-less line-height from the font config.
  $line-height: mat-line-height($config, input);

  // The amount of space between the top of the line and the top of the actual text
  // (as a fraction of the font-size).
  $line-spacing: ($line-height - 1) / 2;

  // <input> elements seem to have their height set slightly too large on Safari causing the text to
  // be misaligned w.r.t. the placeholder. Adding this margin corrects it.
  input.mat-input-element {
    margin-top: -$line-spacing * 1em;
  }
}

@mixin _mat-input-density($config-or-theme) {}

@mixin mat-input-theme($theme-or-color-config) {
  $theme: _mat-legacy-get-theme($theme-or-color-config);
  @include _mat-check-duplicate-theme-styles($theme, 'mat-input') {
    $color: mat-get-color-config($theme);
    $density: mat-get-density-config($theme);
    $typography: mat-get-typography-config($theme);

    @if $color != null {
      @include mat-input-color($color);
    }
    @if $density != null {
      @include _mat-input-density($density);
    }
    @if $typography != null {
      @include mat-input-typography($typography);
    }
  }
}








@mixin mat-list-color($config-or-theme) {
  $config: mat-get-color-config($config-or-theme);
  $background: map-get($config, background);
  $foreground: map-get($config, foreground);

  .mat-list-base {
    .mat-list-item {
      color: mat-color($foreground, text);
    }

    .mat-list-option {
      color: mat-color($foreground, text);
    }

    .mat-subheader {
      color: mat-color($foreground, secondary-text);
    }
  }

  .mat-list-item-disabled {
    background-color: mat-color($background, disabled-list-option);
  }

  .mat-list-option,
  .mat-nav-list .mat-list-item,
  .mat-action-list .mat-list-item {
    &:hover, &:focus {
      background: mat-color($background, 'hover');
    }
  }

  .mat-list-single-selected-option {
    &, &:hover, &:focus {
      background: mat-color($background, hover, 0.12);
    }
  }
}

@mixin mat-list-typography($config-or-theme) {
  $config: mat-get-typography-config($config-or-theme);
  $font-family: mat-font-family($config);

  .mat-list-item {
    font-family: $font-family;
  }

  .mat-list-option {
    font-family: $font-family;
  }

  // Default list
  .mat-list-base {
    .mat-list-item {
      font-size: mat-font-size($config, subheading-2);
      @include mat-line-base(mat-font-size($config, body-1));
    }

    .mat-list-option {
      font-size: mat-font-size($config, subheading-2);
      @include mat-line-base(mat-font-size($config, body-1));
    }

    .mat-subheader {
      font-family: mat-font-family($config, body-2);
      font-size: mat-font-size($config, body-2);
      font-weight: mat-font-weight($config, body-2);
    }
  }

  // Dense list
  .mat-list-base[dense] {
    .mat-list-item {
      font-size: mat-font-size($config, caption);
      @include mat-line-base(mat-font-size($config, caption));
    }

    .mat-list-option {
      font-size: mat-font-size($config, caption);
      @include mat-line-base(mat-font-size($config, caption));
    }

    .mat-subheader {
      font-family: $font-family;
      font-size: mat-font-size($config, caption);
      font-weight: mat-font-weight($config, body-2);
    }
  }
}

@mixin _mat-list-density($config-or-theme) {}

@mixin mat-list-theme($theme-or-color-config) {
  $theme: _mat-legacy-get-theme($theme-or-color-config);
  @include _mat-check-duplicate-theme-styles($theme, 'mat-list') {
    $color: mat-get-color-config($theme);
    $density: mat-get-density-config($theme);
    $typography: mat-get-typography-config($theme);

    @if $color != null {
      @include mat-list-color($color);
    }
    @if $density != null {
      @include _mat-list-density($density);
    }
    @if $typography != null {
      @include mat-list-typography($typography);
    }
  }
}








@mixin mat-menu-color($config-or-theme) {
  $config: mat-get-color-config($config-or-theme);
  $background: map-get($config, background);
  $foreground: map-get($config, foreground);

  .mat-menu-panel {
    @include _mat-theme-overridable-elevation(4, $config);
    background: mat-color($background, 'card');
  }

  .mat-menu-item {
    background: transparent;
    color: mat-color($foreground, 'text');

    &[disabled] {
      &, &::after {
        color: mat-color($foreground, 'disabled');
      }
    }
  }

  .mat-menu-item .mat-icon-no-color,
  .mat-menu-item-submenu-trigger::after {
    color: mat-color($foreground, 'icon');
  }

  .mat-menu-item:hover,
  .mat-menu-item.cdk-program-focused,
  .mat-menu-item.cdk-keyboard-focused,
  .mat-menu-item-highlighted {
    &:not([disabled]) {
      background: mat-color($background, 'hover');
    }
  }
}

@mixin mat-menu-typography($config-or-theme) {
  $config: mat-get-typography-config($config-or-theme);
  .mat-menu-item {
    font: {
      family: mat-font-family($config, body-1);
      size: mat-font-size($config, body-1);
      weight: mat-font-weight($config, body-1);
    }
  }
}

@mixin _mat-menu-density($config-or-theme) {}

@mixin mat-menu-theme($theme-or-color-config) {
  $theme: _mat-legacy-get-theme($theme-or-color-config);
  @include _mat-check-duplicate-theme-styles($theme, 'mat-menu') {
    $color: mat-get-color-config($theme);
    $density: mat-get-density-config($theme);
    $typography: mat-get-typography-config($theme);

    @if $color != null {
      @include mat-menu-color($color);
    }
    @if $density != null {
      @include _mat-menu-density($density);
    }
    @if $typography != null {
      @include mat-menu-typography($typography);
    }
  }
}







$mat-paginator-height: 56px !default;
// Minimum height for paginator's in the highest density is determined based on how
// much the paginator can shrink until the content exceeds (i.e. navigation buttons).
$mat-paginator-minimum-height: 40px !default;
$mat-paginator-maximum-height: $mat-paginator-height !default;

$mat-paginator-density-config: (
  height: (
    default: $mat-paginator-height,
    maximum: $mat-paginator-maximum-height,
    minimum: $mat-paginator-minimum-height,
  )
) !default;


@mixin mat-paginator-color($config-or-theme) {
  $config: mat-get-color-config($config-or-theme);
  $foreground: map-get($config, foreground);
  $background: map-get($config, background);

  .mat-paginator {
    background: mat-color($background, 'card');
  }

  .mat-paginator,
  .mat-paginator-page-size .mat-select-trigger {
    color: mat-color($foreground, secondary-text);
  }

  .mat-paginator-decrement,
  .mat-paginator-increment {
    border-top: 2px solid mat-color($foreground, 'icon');
    border-right: 2px solid mat-color($foreground, 'icon');
  }

  .mat-paginator-first,
  .mat-paginator-last {
    border-top: 2px solid mat-color($foreground, 'icon');
  }

  .mat-icon-button[disabled] {
    .mat-paginator-decrement,
    .mat-paginator-increment,
    .mat-paginator-first,
    .mat-paginator-last {
      border-color: mat-color($foreground, 'disabled');
    }
  }
}

@mixin mat-paginator-typography($config-or-theme) {
  $config: mat-get-typography-config($config-or-theme);
  .mat-paginator,
  .mat-paginator-page-size .mat-select-trigger {
    font: {
      family: mat-font-family($config, caption);
      size: mat-font-size($config, caption);
    }
  }
}

@mixin _mat-paginator-density($config-or-theme) {
  $density-scale: mat-get-density-config($config-or-theme);
  $height: _mat-density-prop-value($mat-paginator-density-config, $density-scale, height);

  @include _mat-density-legacy-compatibility() {
    .mat-paginator-container {
      min-height: $height;
    }
  }
}

@mixin mat-paginator-theme($theme-or-color-config) {
  $theme: _mat-legacy-get-theme($theme-or-color-config);
  @include _mat-check-duplicate-theme-styles($theme, 'mat-paginator') {
    $color: mat-get-color-config($theme);
    $density: mat-get-density-config($theme);
    $typography: mat-get-typography-config($theme);

    @if $color != null {
      @include mat-paginator-color($color);
    }
    @if $density != null {
      @include _mat-paginator-density($density);
    }
    @if $typography != null {
      @include mat-paginator-typography($typography);
    }
  }
}





@mixin mat-progress-bar-color($config-or-theme) {
  $config: mat-get-color-config($config-or-theme);
  $primary: map-get($config, primary);
  $accent: map-get($config, accent);
  $warn: map-get($config, warn);

  .mat-progress-bar-background {
    fill: mat-color($primary, lighter);
  }

  .mat-progress-bar-buffer {
    background-color: mat-color($primary, lighter);
  }

  .mat-progress-bar-fill::after {
    background-color: mat-color($primary);
  }

  .mat-progress-bar.mat-accent {
    .mat-progress-bar-background {
      fill: mat-color($accent, lighter);
    }

    .mat-progress-bar-buffer {
      background-color: mat-color($accent, lighter);
    }

    .mat-progress-bar-fill::after {
      background-color: mat-color($accent);
    }
  }

  .mat-progress-bar.mat-warn {
    .mat-progress-bar-background {
      fill: mat-color($warn, lighter);
    }

    .mat-progress-bar-buffer {
      background-color: mat-color($warn, lighter);
    }

    .mat-progress-bar-fill::after {
      background-color: mat-color($warn);
    }
  }
}

@mixin mat-progress-bar-typography($config-or-theme) {}

@mixin _mat-progress-bar-density($config-or-theme) {}

@mixin mat-progress-bar-theme($theme-or-color-config) {
  $theme: _mat-legacy-get-theme($theme-or-color-config);
  @include _mat-check-duplicate-theme-styles($theme, 'mat-progress-bar') {
    $color: mat-get-color-config($theme);
    $density: mat-get-density-config($theme);
    $typography: mat-get-typography-config($theme);

    @if $color != null {
      @include mat-progress-bar-color($color);
    }
    @if $density != null {
      @include _mat-progress-bar-density($density);
    }
    @if $typography != null {
      @include mat-progress-bar-typography($typography);
    }
  }
}






@mixin mat-progress-spinner-color($config-or-theme) {
  $config: mat-get-color-config($config-or-theme);
  $primary: map-get($config, primary);
  $accent: map-get($config, accent);
  $warn: map-get($config, warn);

  .mat-progress-spinner, .mat-spinner {
    circle {
      stroke: mat-color($primary);
    }

    &.mat-accent circle {
      stroke: mat-color($accent);
    }

    &.mat-warn circle {
      stroke: mat-color($warn);
    }
  }
}

@mixin mat-progress-spinner-typography($config-or-theme) {}

@mixin _mat-progress-spinner-density($config-or-theme) {}

@mixin mat-progress-spinner-theme($theme-or-color-config) {
  $theme: _mat-legacy-get-theme($theme-or-color-config);
  @include _mat-check-duplicate-theme-styles($theme, 'mat-progress-spinner') {
    $color: mat-get-color-config($theme);
    $density: mat-get-density-config($theme);
    $typography: mat-get-typography-config($theme);

    @if $color != null {
      @include mat-progress-spinner-color($color);
    }
    @if $density != null {
      @include _mat-progress-spinner-density($density);
    }
    @if $typography != null {
      @include mat-progress-spinner-typography($typography);
    }
  }
}






@mixin _mat-radio-color($palette) {
  &.mat-radio-checked .mat-radio-outer-circle {
    border-color: mat-color($palette);
  }

  .mat-radio-inner-circle,
  .mat-radio-ripple .mat-ripple-element:not(.mat-radio-persistent-ripple),
  &.mat-radio-checked .mat-radio-persistent-ripple,
  &:active .mat-radio-persistent-ripple {
    background-color: mat-color($palette);
  }
}

@mixin mat-radio-color($config-or-theme) {
  $config: mat-get-color-config($config-or-theme);
  $primary: map-get($config, primary);
  $accent: map-get($config, accent);
  $warn: map-get($config, warn);
  $background: map-get($config, background);
  $foreground: map-get($config, foreground);

  .mat-radio-outer-circle {
    border-color: mat-color($foreground, secondary-text);
  }

  .mat-radio-button {
    &.mat-primary {
      @include _mat-radio-color($primary);
    }

    &.mat-accent {
      @include _mat-radio-color($accent);
    }

    &.mat-warn {
      @include _mat-radio-color($warn);
    }

    // This needs extra specificity, because the classes above are combined
    // (e.g. `.mat-radio-button.mat-accent`) which increases their specificity a lot.
    // TODO: consider making the selectors into descendants (`.mat-primary .mat-radio-button`).
    &.mat-radio-disabled {
      &.mat-radio-checked .mat-radio-outer-circle,
      .mat-radio-outer-circle {
        border-color: mat-color($foreground, disabled);
      }

      .mat-radio-ripple .mat-ripple-element,
      .mat-radio-inner-circle {
        background-color: mat-color($foreground, disabled);
      }

      .mat-radio-label-content {
        color: mat-color($foreground, disabled);
      }
    }

    // Switch this to a solid color since we're using `opacity`
    // to control how opaque the ripple should be.
    .mat-ripple-element {
      background-color: map_get($foreground, base);
    }
  }
}

@mixin mat-radio-typography($config-or-theme) {
  $config: mat-get-typography-config($config-or-theme);
  .mat-radio-button {
    font-family: mat-font-family($config);
  }
}

@mixin _mat-radio-density($config-or-theme) {}

@mixin mat-radio-theme($theme-or-color-config) {
  $theme: _mat-legacy-get-theme($theme-or-color-config);
  @include _mat-check-duplicate-theme-styles($theme, 'mat-radio') {
    $color: mat-get-color-config($theme);
    $density: mat-get-density-config($theme);
    $typography: mat-get-typography-config($theme);

    @if $color != null {
      @include mat-radio-color($color);
    }
    @if $density != null {
      @include _mat-radio-density($density);
    }
    @if $typography != null {
      @include mat-radio-typography($typography);
    }
  }
}









@mixin mat-select-color($config-or-theme) {
  $config: mat-get-color-config($config-or-theme);
  $foreground: map-get($config, foreground);
  $background: map-get($config, background);
  $primary: map-get($config, primary);
  $accent: map-get($config, accent);
  $warn: map-get($config, warn);

  .mat-select-value {
    color: mat-color($foreground, text);
  }

  .mat-select-placeholder {
    color: _mat-control-placeholder-color($config);
  }

  .mat-select-disabled .mat-select-value {
    color: mat-color($foreground, disabled-text);
  }

  .mat-select-arrow {
    color: mat-color($foreground, secondary-text);
  }

  .mat-select-panel {
    background: mat-color($background, card);
    @include _mat-theme-overridable-elevation(4, $config);

    .mat-option.mat-selected:not(.mat-option-multiple) {
      background: mat-color($background, hover, 0.12);
    }
  }

  .mat-form-field {
    &.mat-focused {
      &.mat-primary .mat-select-arrow {
        color: mat-color($primary, text);
      }

      &.mat-accent .mat-select-arrow {
        color: mat-color($accent, text);
      }

      &.mat-warn .mat-select-arrow {
        color: mat-color($warn, text);
      }
    }

    .mat-select.mat-select-invalid .mat-select-arrow {
      color: mat-color($warn, text);
    }

    .mat-select.mat-select-disabled .mat-select-arrow {
      color: mat-color($foreground, disabled-text);
    }
  }
}

@mixin mat-select-typography($config-or-theme) {
  $config: mat-get-typography-config($config-or-theme);
  // The unit-less line-height from the font config.
  $line-height: mat-line-height($config, input);

  .mat-select {
    font-family: mat-font-family($config);
  }

  .mat-select-trigger {
    height: $line-height * 1em;
  }
}

@mixin _mat-select-density($config-or-theme) {}

@mixin mat-select-theme($theme-or-color-config) {
  $theme: _mat-legacy-get-theme($theme-or-color-config);
  @include _mat-check-duplicate-theme-styles($theme, 'mat-select') {
    $color: mat-get-color-config($theme);
    $density: mat-get-density-config($theme);
    $typography: mat-get-typography-config($theme);

    @if $color != null {
      @include mat-select-color($color);
    }
    @if $density != null {
      @include _mat-select-density($density);
    }
    @if $typography != null {
      @include mat-select-typography($typography);
    }
  }
}






@mixin mat-sidenav-color($config-or-theme) {
  $config: mat-get-color-config($config-or-theme);
  $primary: map-get($config, primary);
  $accent: map-get($config, accent);
  $warn: map-get($config, warn);
  $background: map-get($config, background);
  $foreground: map-get($config, foreground);

  $drawer-background-color: mat-color($background, dialog);
  $drawer-container-background-color:  mat-color($background, background);
  $drawer-push-background-color: mat-color($background, dialog);
  $drawer-side-border: solid 1px mat-color($foreground, divider);

  .mat-drawer-container {
    background-color: $drawer-container-background-color;
    color: mat-color($foreground, text);
  }

  .mat-drawer {
    background-color: $drawer-background-color;
    color: mat-color($foreground, text);

    &.mat-drawer-push {
      background-color: $drawer-push-background-color;
    }

    &:not(.mat-drawer-side) {
      // The elevation of z-16 is noted in the design specifications.
      // See https://material.io/design/components/navigation-drawer.html
      @include _mat-theme-elevation(16, $config);
    }
  }

  .mat-drawer-side {
    border-right: $drawer-side-border;

    &.mat-drawer-end {
      border-left: $drawer-side-border;
      border-right: none;
    }
  }

  [dir='rtl'] .mat-drawer-side {
    border-left: $drawer-side-border;
    border-right: none;

    &.mat-drawer-end {
      border-left: none;
      border-right: $drawer-side-border;
    }
  }

  .mat-drawer-backdrop.mat-drawer-shown {
    $opacity: 0.6;
    $backdrop-color: mat-color($background, card, $opacity);

    @if (type-of($backdrop-color) == color) {
      // We use invert() here to have the darken the background color expected to be used. If the
      // background is light, we use a dark backdrop. If the background is dark,
      // we use a light backdrop.
      background-color: invert($backdrop-color);
    }
    @else {
      // If we couldn't resolve the backdrop color to a color value, fall back to using
      // `opacity` to make it opaque since its end value could be a solid color.
      background-color: $backdrop-color;
      opacity: $opacity;
    }
  }
}

@mixin mat-sidenav-typography($config-or-theme) {}

@mixin _mat-sidenav-density($config-or-theme) {}

@mixin mat-sidenav-theme($theme-or-color-config) {
  $theme: _mat-legacy-get-theme($theme-or-color-config);
  @include _mat-check-duplicate-theme-styles($theme, 'mat-sidenav') {
    $color: mat-get-color-config($theme);
    $density: mat-get-density-config($theme);
    $typography: mat-get-typography-config($theme);

    @if $color != null {
      @include mat-sidenav-color($color);
    }
    @if $density != null {
      @include _mat-sidenav-density($density);
    }
    @if $typography != null {
      @include mat-sidenav-typography($typography);
    }
  }
}







@mixin _mat-slide-toggle-checked($palette, $thumb-checked-hue) {
  &.mat-checked {
    .mat-slide-toggle-thumb {
      background-color: mat-color($palette, $thumb-checked-hue);
    }

    .mat-slide-toggle-bar {
      // Opacity is determined from the specs for the selection controls.
      // See: https://material.io/design/components/selection-controls.html#specs
      background-color: mat-color($palette, $thumb-checked-hue, 0.54);
    }

    .mat-ripple-element {
      // Set no opacity for the ripples because the ripple opacity will be adjusted dynamically
      // based on the type of interaction with the slide-toggle (e.g. for hover, focus)
      background-color: mat-color($palette, $thumb-checked-hue);
    }
  }
}

@mixin mat-slide-toggle-color($config-or-theme) {
  $config: mat-get-color-config($config-or-theme);
  $is-dark: map_get($config, is-dark);
  $primary: map-get($config, primary);
  $accent: map-get($config, accent);
  $warn: map-get($config, warn);
  $background: map-get($config, background);
  $foreground: map-get($config, foreground);

  // Color hues are based on the specs which briefly show the hues that are applied to a switch.
  // The 2018 specs no longer describe how dark switches should look like. Due to the lack of
  // information for dark themed switches, we partially keep the old behavior that is based on
  // the previous specifications. For the checked color we always use the `default` hue because
  // that follows MDC and also makes it easier for people to create a custom theme without needing
  // to specify each hue individually.
  $thumb-unchecked-hue: if($is-dark, 400, 50);
  $thumb-checked-hue: default;

  $bar-unchecked-color: mat-color($foreground, disabled);
  $ripple-unchecked-color: mat-color($foreground, base);

  .mat-slide-toggle {
    @include _mat-slide-toggle-checked($accent, $thumb-checked-hue);

    &.mat-primary {
      @include _mat-slide-toggle-checked($primary, $thumb-checked-hue);
    }

    &.mat-warn {
      @include _mat-slide-toggle-checked($warn, $thumb-checked-hue);
    }

    &:not(.mat-checked) .mat-ripple-element {
      // Set no opacity for the ripples because the ripple opacity will be adjusted dynamically
      // based on the type of interaction with the slide-toggle (e.g. for hover, focus)
      background-color: $ripple-unchecked-color;
    }
  }

  .mat-slide-toggle-thumb {
    @include _mat-theme-elevation(1, $config);
    background-color: mat-color($mat-grey, $thumb-unchecked-hue);
  }

  .mat-slide-toggle-bar {
    background-color: $bar-unchecked-color;
  }
}

@mixin mat-slide-toggle-typography($config-or-theme) {
  $config: mat-get-typography-config($config-or-theme);
  .mat-slide-toggle-content {
    font-family: mat-font-family($config);
  }
}

@mixin _mat-slide-toggle-density($config-or-theme) {}

@mixin mat-slide-toggle-theme($theme-or-color-config) {
  $theme: _mat-legacy-get-theme($theme-or-color-config);
  @include _mat-check-duplicate-theme-styles($theme, 'mat-slide-toggle') {
    $color: mat-get-color-config($theme);
    $density: mat-get-density-config($theme);
    $typography: mat-get-typography-config($theme);

    @if $color != null {
      @include mat-slide-toggle-color($color);
    }
    @if $density != null {
      @include _mat-slide-toggle-density($density);
    }
    @if $typography != null {
      @include mat-slide-toggle-typography($typography);
    }
  }
}







@mixin _mat-slider-inner-content-theme($palette) {
  .mat-slider-track-fill,
  .mat-slider-thumb,
  .mat-slider-thumb-label {
    background-color: mat-color($palette);
  }

  .mat-slider-thumb-label-text {
    color: mat-color($palette, default-contrast);
  }

  .mat-slider-focus-ring {
    $opacity: 0.2;
    $color: mat-color($palette, default, $opacity);
    background-color: $color;

    // `mat-color` uses `rgba` for the opacity which won't work with
    // CSS variables so we need to use `opacity` as a fallback.
    @if (type-of($color) != color) {
      opacity: $opacity;
    }
  }
}

@mixin mat-slider-color($config-or-theme) {
  $config: mat-get-color-config($config-or-theme);
  $primary: map-get($config, primary);
  $accent: map-get($config, accent);
  $warn: map-get($config, warn);
  $background: map-get($config, background);
  $foreground: map-get($config, foreground);

  $mat-slider-off-color: mat-color($foreground, slider-off);
  $mat-slider-off-focused-color: mat-color($foreground, slider-off-active);
  $mat-slider-disabled-color: mat-color($foreground, slider-off);
  $mat-slider-labeled-min-value-thumb-color: mat-color($foreground, slider-min);
  $mat-slider-labeled-min-value-thumb-label-color: mat-color($foreground, slider-off);
  $mat-slider-tick-opacity: 0.7;
  $mat-slider-tick-color: mat-color($foreground, base, $mat-slider-tick-opacity);
  $mat-slider-tick-size: 2px;

  .mat-slider-track-background {
    background-color: $mat-slider-off-color;
  }

  .mat-primary {
    @include _mat-slider-inner-content-theme($primary);
  }

  .mat-accent {
    @include _mat-slider-inner-content-theme($accent);
  }

  .mat-warn {
    @include _mat-slider-inner-content-theme($warn);
  }

  .mat-slider:hover,
  .cdk-focused {
    .mat-slider-track-background {
      background-color: $mat-slider-off-focused-color;
    }
  }

  .mat-slider-disabled {
    .mat-slider-track-background,
    .mat-slider-track-fill,
    .mat-slider-thumb {
      background-color: $mat-slider-disabled-color;
    }

    &:hover {
      .mat-slider-track-background {
        background-color: $mat-slider-disabled-color;
      }
    }
  }

  .mat-slider-min-value {
    .mat-slider-focus-ring {
      $opacity: 0.12;
      $color: mat-color($foreground, base, $opacity);
      background-color: $color;

      // `mat-color` uses `rgba` for the opacity which won't work with
      // CSS variables so we need to use `opacity` as a fallback.
      @if (type-of($color) != color) {
        opacity: $opacity;
      }
    }

    &.mat-slider-thumb-label-showing {
      .mat-slider-thumb,
      .mat-slider-thumb-label {
        background-color: $mat-slider-labeled-min-value-thumb-color;
      }

      &.cdk-focused {
        .mat-slider-thumb,
        .mat-slider-thumb-label {
          background-color: $mat-slider-labeled-min-value-thumb-label-color;
        }
      }
    }

    &:not(.mat-slider-thumb-label-showing) {
      .mat-slider-thumb {
        border-color: $mat-slider-off-color;
        background-color: transparent;
      }

      &:hover,
      &.cdk-focused {
        .mat-slider-thumb {
          border-color: $mat-slider-off-focused-color;
        }

        &.mat-slider-disabled .mat-slider-thumb {
          border-color: $mat-slider-disabled-color;
        }
      }
    }
  }

  .mat-slider-has-ticks .mat-slider-wrapper::after {
    border-color: $mat-slider-tick-color;

    // `mat-color` uses `rgba` for the opacity which won't work with
    // CSS variables so we need to use `opacity` as a fallback.
    @if (type-of($mat-slider-tick-color) != color) {
      opacity: $mat-slider-tick-opacity;
    }
  }

  .mat-slider-horizontal .mat-slider-ticks {
    background-image: repeating-linear-gradient(to right, $mat-slider-tick-color,
        $mat-slider-tick-color $mat-slider-tick-size, transparent 0, transparent);
    // Firefox doesn't draw the gradient correctly with 'to right'
    // (see https://bugzilla.mozilla.org/show_bug.cgi?id=1314319).
    background-image: -moz-repeating-linear-gradient(0.0001deg, $mat-slider-tick-color,
        $mat-slider-tick-color $mat-slider-tick-size, transparent 0, transparent);

    // `mat-color` uses `rgba` for the opacity which won't work with
    // CSS variables so we need to use `opacity` as a fallback.
    @if (type-of($mat-slider-tick-color) != color) {
      opacity: $mat-slider-tick-opacity;
    }
  }

  .mat-slider-vertical .mat-slider-ticks {
    background-image: repeating-linear-gradient(to bottom, $mat-slider-tick-color,
        $mat-slider-tick-color $mat-slider-tick-size, transparent 0, transparent);

    // `mat-color` uses `rgba` for the opacity which won't work with
    // CSS variables so we need to use `opacity` as a fallback.
    @if (type-of($mat-slider-tick-color) != color) {
      opacity: $mat-slider-tick-opacity;
    }
  }
}

@mixin mat-slider-typography($config-or-theme) {
  $config: mat-get-typography-config($config-or-theme);
  .mat-slider-thumb-label-text {
    font: {
      family: mat-font-family($config);
      size: mat-font-size($config, caption);
      weight: mat-font-weight($config, body-2);
    }
  }
}

@mixin _mat-slider-density($config-or-theme) {}

@mixin mat-slider-theme($theme-or-color-config) {
  $theme: _mat-legacy-get-theme($theme-or-color-config);
  @include _mat-check-duplicate-theme-styles($theme, 'mat-slider') {
    $color: mat-get-color-config($theme);
    $density: mat-get-density-config($theme);
    $typography: mat-get-typography-config($theme);

    @if $color != null {
      @include mat-slider-color($color);
    }
    @if $density != null {
      @include _mat-slider-density($density);
    }
    @if $typography != null {
      @include mat-slider-typography($typography);
    }
  }
}






$mat-stepper-header-height: 72px !default;
// Minimum height for highest density stepper's is determined based on how much
// stepper headers can shrink until the step icon or step label exceed. We can't use
// a value below `42px` because the optional label for steps would otherwise exceed.
$mat-stepper-header-minimum-height: 42px !default;
$mat-stepper-header-maximum-height: $mat-stepper-header-height !default;

$mat-stepper-density-config: (
  height: (
    default: $mat-stepper-header-height,
    maximum: $mat-stepper-header-maximum-height,
    minimum: $mat-stepper-header-minimum-height,
  )
) !default;

// Note: These variables are not denoted with `!default` because they are used in the non-theme
// component styles. Modifying these variables does not have the desired effect for consumers.
$mat-stepper-label-header-height: 24px;
$mat-stepper-label-position-bottom-top-gap: 16px;
$mat-stepper-label-min-width: 50px;

$mat-vertical-stepper-content-margin: 36px;

$mat-stepper-side-gap: 24px;
$mat-stepper-line-width: 1px;
$mat-stepper-line-gap: 8px;

$mat-step-sub-label-font-size: 12px;
$mat-step-header-icon-size: 16px;


@mixin mat-stepper-color($config-or-theme) {
  $config: mat-get-color-config($config-or-theme);
  $foreground: map-get($config, foreground);
  $background: map-get($config, background);
  $primary: map-get($config, primary);
  $warn: map-get($config, warn);

  .mat-step-header {
    &.cdk-keyboard-focused,
    &.cdk-program-focused,
    &:hover {
      background-color: mat-color($background, hover);
    }

    // On touch devices the :hover state will linger on the element after a tap.
    // Reset it via `@media` after the declaration, because the media query isn't
    // supported by all browsers yet.
    @media (hover: none) {
      &:hover {
        background: none;
      }
    }

    .mat-step-label,
    .mat-step-optional {
      // TODO(josephperrott): Update to using a corrected disabled-text contrast
      // instead of secondary-text.
      color: mat-color($foreground, secondary-text);
    }

    .mat-step-icon {
      // TODO(josephperrott): Update to using a corrected disabled-text contrast
      // instead of secondary-text.
      background-color: mat-color($foreground, secondary-text);
      color: mat-color($primary, default-contrast);
    }

    .mat-step-icon-selected,
    .mat-step-icon-state-done,
    .mat-step-icon-state-edit {
      background-color: mat-color($primary);
      color: mat-color($primary, default-contrast);
    }

    .mat-step-icon-state-error {
      background-color: transparent;
      color: mat-color($warn, text);
    }

    .mat-step-label.mat-step-label-active {
      color: mat-color($foreground, text);
    }

    .mat-step-label.mat-step-label-error {
      color: mat-color($warn, text);
    }
  }

  .mat-stepper-horizontal, .mat-stepper-vertical {
    background-color: mat-color($background, card);
  }

  .mat-stepper-vertical-line::before {
    border-left-color: mat-color($foreground, divider);
  }

  .mat-horizontal-stepper-header::before,
  .mat-horizontal-stepper-header::after,
  .mat-stepper-horizontal-line {
    border-top-color: mat-color($foreground, divider);
  }
}

@mixin mat-stepper-typography($config-or-theme) {
  $config: mat-get-typography-config($config-or-theme);
  .mat-stepper-vertical, .mat-stepper-horizontal {
    font-family: mat-font-family($config);
  }

  .mat-step-label {
    font: {
      size: mat-font-size($config, body-1);
      weight: mat-font-weight($config, body-1);
    };
  }

  .mat-step-sub-label-error {
    font-weight: normal;
  }

  .mat-step-label-error {
    font-size: mat-font-size($config, body-2);
  }

  .mat-step-label-selected {
    font: {
      size: mat-font-size($config, body-2);
      weight: mat-font-weight($config, body-2);
    };
  }
}

@mixin _mat-stepper-density($config-or-theme) {
  $density-scale: mat-get-density-config($config-or-theme);
  $height: _mat-density-prop-value($mat-stepper-density-config, $density-scale, height);
  $vertical-padding: ($height - $mat-stepper-label-header-height) / 2;

  @include _mat-density-legacy-compatibility() {
    .mat-horizontal-stepper-header {
      height: $height;
    }

    .mat-stepper-label-position-bottom .mat-horizontal-stepper-header,
    .mat-vertical-stepper-header, {
      padding: $vertical-padding $mat-stepper-side-gap;
    }

    // Ensures that the vertical lines for the step content exceed into the step
    // headers with a given distance (`$mat-stepper-line-gap`) to the step icon.
    .mat-stepper-vertical-line::before {
      top: $mat-stepper-line-gap - $vertical-padding;
      bottom: $mat-stepper-line-gap - $vertical-padding;
    }

    // Ensures that the horizontal lines for the step header are centered vertically.
    .mat-stepper-label-position-bottom .mat-horizontal-stepper-header {
      &::after, &::before {
        top: $vertical-padding + $mat-stepper-label-header-height / 2;
      }
    }

    // Ensures that the horizontal line for the step content is aligned centered vertically.
    .mat-stepper-label-position-bottom .mat-stepper-horizontal-line {
      top: $vertical-padding + $mat-stepper-label-header-height / 2;
    }
  }
}

@mixin mat-stepper-theme($theme-or-color-config) {
  $theme: _mat-legacy-get-theme($theme-or-color-config);
  @include _mat-check-duplicate-theme-styles($theme, 'mat-stepper') {
    $color: mat-get-color-config($theme);
    $density: mat-get-density-config($theme);
    $typography: mat-get-typography-config($theme);

    @if $color != null {
      @include mat-stepper-color($color);
    }
    @if $density != null {
      @include _mat-stepper-density($density);
    }
    @if $typography != null {
      @include mat-stepper-typography($typography);
    }
  }
}




@mixin mat-sort-color($config-or-theme) {
  $config: mat-get-color-config($config-or-theme);
  $background: map-get($config, background);
  $foreground: map-get($config, foreground);

  .mat-sort-header-arrow {
    $table-background: mat-color($background, 'card');
    $text-color: mat-color($foreground, secondary-text);

    // Because the arrow is made up of multiple elements that are stacked on top of each other,
    // we can't use the semi-transparent color from the theme directly. If the value is a color
    // *type*, we convert it into a solid color by taking the opacity from the rgba value and
    // using the value to determine the percentage of the background to put into foreground
    // when mixing the colors together. Otherwise, if it resolves to something different
    // (e.g. it resolves to a CSS variable), we use the color directly.
    @if (type-of($table-background) == color and type-of($text-color) == color) {
      $text-opacity: opacity($text-color);
      color: mix($table-background, rgba($text-color, 1), (1 - $text-opacity) * 100%);
    }
    @else {
      color: $text-color;
    }
  }
}

@mixin mat-sort-typography($config-or-theme) {}

@mixin _mat-sort-density($config-or-theme) {}

@mixin mat-sort-theme($theme-or-color-config) {
  $theme: _mat-legacy-get-theme($theme-or-color-config);
  @include _mat-check-duplicate-theme-styles($theme, 'mat-sort') {
    $color: mat-get-color-config($theme);
    $density: mat-get-density-config($theme);
    $typography: mat-get-typography-config($theme);

    @if $color != null {
      @include mat-sort-color($color);
    }
    @if $density != null {
      @include _mat-sort-density($density);
    }
    @if $typography != null {
      @include mat-sort-typography($typography);
    }
  }
}






@mixin mat-tabs-color($config-or-theme) {
  $config: mat-get-color-config($config-or-theme);
  $primary: map-get($config, primary);
  $accent: map-get($config, accent);
  $warn: map-get($config, warn);
  $background: map-get($config, background);
  $foreground: map-get($config, foreground);
  $header-border: 1px solid mat-color($foreground, divider);

  .mat-tab-nav-bar,
  .mat-tab-header {
    border-bottom: $header-border;
  }

  .mat-tab-group-inverted-header {
    .mat-tab-nav-bar,
    .mat-tab-header {
      border-top: $header-border;
      border-bottom: none;
    }
  }

  .mat-tab-label, .mat-tab-link {
    color: mat-color($foreground, text);

    &.mat-tab-disabled {
      color: mat-color($foreground, disabled-text);
    }
  }

  .mat-tab-header-pagination-chevron {
    border-color: mat-color($foreground, text);
  }

  .mat-tab-header-pagination-disabled .mat-tab-header-pagination-chevron {
    border-color: mat-color($foreground, disabled-text);
  }

  // Remove header border when there is a background color
  .mat-tab-group[class*='mat-background-'] .mat-tab-header,
  .mat-tab-nav-bar[class*='mat-background-'] {
    border-bottom: none;
    border-top: none;
  }

  .mat-tab-group, .mat-tab-nav-bar {
    $theme-colors: (
      primary: $primary,
      accent: $accent,
      warn: $warn
    );

    @each $name, $color in $theme-colors {
      // Set the foreground color of the tabs
      &.mat-#{$name} {
        @include _mat-tab-label-focus($color);
        @include _mat-ink-bar($color);

        // Override ink bar when background color is the same
        &.mat-background-#{$name} {
          @include _mat-ink-bar($color, default-contrast);
        }
      }
    }

    @each $name, $color in $theme-colors {
      // Set background color of the tabs and override focus color
      &.mat-background-#{$name} {
        @include _mat-tab-label-focus($color);
        @include _mat-tabs-background($color);
      }
    }
  }
}

@mixin _mat-ink-bar($color, $hue: default) {
  .mat-ink-bar {
    background-color: mat-color($color, $hue);
  }
}

@mixin _mat-tab-label-focus($tab-focus-color) {
  .mat-tab-label,
  .mat-tab-link {
    &.cdk-keyboard-focused,
    &.cdk-program-focused {
      &:not(.mat-tab-disabled) {
        background-color: mat-color($tab-focus-color, lighter, 0.3);
      }
    }
  }
}

@mixin _mat-tabs-background($background-color) {
  // Set background color for the tab group
  .mat-tab-header, .mat-tab-links, .mat-tab-header-pagination {
    background-color: mat-color($background-color);
  }

  // Set labels to contrast against background
  .mat-tab-label, .mat-tab-link {
    color: mat-color($background-color, default-contrast);

    &.mat-tab-disabled {
      color: mat-color($background-color, default-contrast, 0.4);
    }
  }

  // Set pagination chevrons to contrast background
  .mat-tab-header-pagination-chevron {
    border-color: mat-color($background-color, default-contrast);
  }

  .mat-tab-header-pagination-disabled .mat-tab-header-pagination-chevron {
    border-color: mat-color($background-color, default-contrast, 0.4);
  }

  // Set ripples color to be the contrast color of the new background. Otherwise the ripple
  // color will be based on the app background color.
  .mat-ripple-element {
    background-color: mat-color($background-color, default-contrast, 0.12);
  }
}

@mixin mat-tabs-typography($config-or-theme) {
  $config: mat-get-typography-config($config-or-theme);
  .mat-tab-group {
    font-family: mat-font-family($config);
  }

  .mat-tab-label, .mat-tab-link {
    font: {
      family: mat-font-family($config, button);
      size: mat-font-size($config, button);
      weight: mat-font-weight($config, button);
    }
  }
}

@mixin _mat-tabs-density($config-or-theme) {}

@mixin mat-tabs-theme($theme-or-color-config) {
  $theme: _mat-legacy-get-theme($theme-or-color-config);
  @include _mat-check-duplicate-theme-styles($theme, 'mat-tabs') {
    $color: mat-get-color-config($theme);
    $density: mat-get-density-config($theme);
    $typography: mat-get-typography-config($theme);

    @if $color != null {
      @include mat-tabs-color($color);
    }
    @if $density != null {
      @include _mat-tabs-density($density);
    }
    @if $typography != null {
      @include mat-tabs-typography($typography);
    }
  }
}







// Minimum height for toolbar's in the highest density is difficult to determine because
// developers can project arbitrary content. We use a minimum value that ensures that most
// common content (e.g. icon buttons) does not exceed the row boundaries in highest density.
$mat-toolbar-minimum-height: 44px !default;

$mat-toolbar-height-desktop: 64px !default;
$mat-toolbar-maximum-height-desktop: $mat-toolbar-height-desktop !default;
$mat-toolbar-minimum-height-desktop: $mat-toolbar-minimum-height !default;

$mat-toolbar-height-mobile: 56px !default;
$mat-toolbar-maximum-height-mobile: $mat-toolbar-height-mobile !default;
$mat-toolbar-minimum-height-mobile: $mat-toolbar-minimum-height !default;

$mat-toolbar-desktop-density-config: (
  height: (
    default: $mat-toolbar-height-desktop,
    maximum: $mat-toolbar-maximum-height-desktop,
    minimum: $mat-toolbar-minimum-height-desktop,
  )
) !default;

$mat-toolbar-mobile-density-config: (
  height: (
    default: $mat-toolbar-height-mobile,
    maximum: $mat-toolbar-maximum-height-mobile,
    minimum: $mat-toolbar-minimum-height-mobile,
  )
) !default;


@mixin _mat-toolbar-height($height) {
  .mat-toolbar-multiple-rows {
    min-height: $height;
  }
  .mat-toolbar-row, .mat-toolbar-single-row {
    height: $height;
  }
}

@mixin _mat-toolbar-color($palette) {
  background: mat-color($palette);
  color: mat-color($palette, default-contrast);
}

@mixin _mat-toolbar-form-field-overrides {
  .mat-form-field-underline,
  .mat-form-field-ripple,
  .mat-focused .mat-form-field-ripple {
    background-color: currentColor;
  }

  .mat-form-field-label,
  .mat-focused .mat-form-field-label,
  .mat-select-value,
  .mat-select-arrow,
  .mat-form-field.mat-focused .mat-select-arrow {
    color: inherit;
  }

  .mat-input-element {
    caret-color: currentColor;
  }
}

@mixin mat-toolbar-color($config-or-theme) {
  $config: mat-get-color-config($config-or-theme);
  $primary: map-get($config, primary);
  $accent: map-get($config, accent);
  $warn: map-get($config, warn);
  $background: map-get($config, background);
  $foreground: map-get($config, foreground);

  .mat-toolbar {
    background: mat-color($background, app-bar);
    color: mat-color($foreground, text);

    &.mat-primary {
      @include _mat-toolbar-color($primary);
    }

    &.mat-accent {
      @include _mat-toolbar-color($accent);
    }

    &.mat-warn {
      @include _mat-toolbar-color($warn);
    }

    @include _mat-toolbar-form-field-overrides;
  }
}

@mixin mat-toolbar-typography($config-or-theme) {
  $config: mat-get-typography-config($config-or-theme);
  .mat-toolbar,
  .mat-toolbar h1,
  .mat-toolbar h2,
  .mat-toolbar h3,
  .mat-toolbar h4,
  .mat-toolbar h5,
  .mat-toolbar h6 {
    @include mat-typography-level-to-styles($config, title);
    margin: 0;
  }
}

@mixin _mat-toolbar-density($config-or-theme) {
  $density-scale: mat-get-density-config($config-or-theme);
  $height-desktop: _mat-density-prop-value(
      $mat-toolbar-desktop-density-config, $density-scale, height);
  $height-mobile: _mat-density-prop-value(
      $mat-toolbar-mobile-density-config, $density-scale, height);

  @include _mat-density-legacy-compatibility() {
    // Set the default height for the toolbar.
    @include _mat-toolbar-height($height-desktop);

    // As per specs, toolbars should have a different height in mobile devices. This has been
    // specified in the old guidelines and is still observable in the new specifications by
    // looking at the spec images. See: https://material.io/design/components/app-bars-top.html#anatomy
    @media ($mat-xsmall) {
      @include _mat-toolbar-height($height-mobile);
    }
  }
}

@mixin mat-toolbar-theme($theme-or-color-config) {
  $theme: _mat-legacy-get-theme($theme-or-color-config);
  @include _mat-check-duplicate-theme-styles($theme, 'mat-toolbar') {
    $color: mat-get-color-config($theme);
    $density: mat-get-density-config($theme);
    $typography: mat-get-typography-config($theme);

    @if $color != null {
      @include mat-toolbar-color($color);
    }
    @if $density != null {
      @include _mat-toolbar-density($density);
    }
    @if $typography != null {
      @include mat-toolbar-typography($typography);
    }
  }
}






$mat-tooltip-target-height: 22px;
$mat-tooltip-font-size: 10px;
$mat-tooltip-vertical-padding: ($mat-tooltip-target-height - $mat-tooltip-font-size) / 2;

$mat-tooltip-handset-target-height: 30px;
$mat-tooltip-handset-font-size: 14px;
$mat-tooltip-handset-vertical-padding:
    ($mat-tooltip-handset-target-height - $mat-tooltip-handset-font-size) / 2;

@mixin mat-tooltip-color($config-or-theme) {
  $config: mat-get-color-config($config-or-theme);
  $background: map-get($config, background);

  .mat-tooltip {
    background: mat-color($background, tooltip, 0.9);
  }
}

@mixin mat-tooltip-typography($config-or-theme) {
  $config: mat-get-typography-config($config-or-theme);
  .mat-tooltip {
    font-family: mat-font-family($config);
    font-size: $mat-tooltip-font-size;
    padding-top: $mat-tooltip-vertical-padding;
    padding-bottom: $mat-tooltip-vertical-padding;
  }

  .mat-tooltip-handset {
    font-size: $mat-tooltip-handset-font-size;
    padding-top: $mat-tooltip-handset-vertical-padding;
    padding-bottom: $mat-tooltip-handset-vertical-padding;
  }
}

@mixin _mat-tooltip-density($config-or-theme) {}

@mixin mat-tooltip-theme($theme-or-color-config) {
  $theme: _mat-legacy-get-theme($theme-or-color-config);
  @include _mat-check-duplicate-theme-styles($theme, 'mat-tooltip') {
    $color: mat-get-color-config($theme);
    $density: mat-get-density-config($theme);
    $typography: mat-get-typography-config($theme);

    @if $color != null {
      @include mat-tooltip-color($color);
    }
    @if $density != null {
      @include _mat-tooltip-density($density);
    }
    @if $typography != null {
      @include mat-tooltip-typography($typography);
    }
  }
}








@mixin mat-snack-bar-color($config-or-theme) {
  $config: mat-get-color-config($config-or-theme);
  $is-dark-theme: map-get($config, is-dark);
  $accent: map-get($config, accent);

  .mat-snack-bar-container {
    // Use the primary text on the dark theme, even though the lighter one uses
    // a secondary, because the contrast on the light primary text is poor.
    color: if($is-dark-theme, $dark-primary-text, $light-secondary-text);
    background: if($is-dark-theme, map-get($mat-grey, 50), #323232);

    @include _mat-theme-elevation(6, $config);
  }

  .mat-simple-snackbar-action {
    color: if($is-dark-theme, inherit, mat-color($accent, text));
  }
}

@mixin mat-snack-bar-typography($config-or-theme) {
  $config: mat-get-typography-config($config-or-theme);
  .mat-simple-snackbar {
    font: {
      family: mat-font-family($config, body-1);
      size: mat-font-size($config, body-1);
    }
  }

  .mat-simple-snackbar-action {
    line-height: 1;
    font: {
      family: inherit;
      size: inherit;
      weight: mat-font-weight($config, button);
    }
  }
}

@mixin _mat-snack-bar-density($config-or-theme) {}

@mixin mat-snack-bar-theme($theme-or-color-config) {
  $theme: _mat-legacy-get-theme($theme-or-color-config);
  @include _mat-check-duplicate-theme-styles($theme, 'mat-snack-bar') {
    $color: mat-get-color-config($theme);
    $density: mat-get-density-config($theme);
    $typography: mat-get-typography-config($theme);

    @if $color != null {
      @include mat-snack-bar-color($color);
    }
    @if $density != null {
      @include _mat-snack-bar-density($density);
    }
    @if $typography != null {
      @include mat-snack-bar-typography($typography);
    }
  }
}
















// Theme styles that only apply to the fill appearance of the form-field.

@mixin mat-form-field-fill-color($config-or-theme) {
  $config: mat-get-color-config($config-or-theme);
  $foreground: map-get($config, foreground);
  $is-dark-theme: map-get($config, is-dark);

  $fill-background: mat-color($foreground, base, if($is-dark-theme, 0.1, 0.04));
  $fill-disabled-background: mat-color($foreground, base, if($is-dark-theme, 0.05, 0.02));
  $underline-color: mat-color($foreground, divider, if($is-dark-theme, 0.5, 0.42));
  $label-disabled-color: mat-color($foreground, disabled-text);

  .mat-form-field-appearance-fill {
    .mat-form-field-flex {
      background-color: $fill-background;
    }

    &.mat-form-field-disabled .mat-form-field-flex {
      background-color: $fill-disabled-background;
    }

    .mat-form-field-underline::before {
      background-color: $underline-color;
    }

    &.mat-form-field-disabled {
      .mat-form-field-label {
        color: $label-disabled-color;
      }

      .mat-form-field-underline::before {
        background-color: transparent;
      }
    }
  }
}

// Used to make instances of the _mat-form-field-label-floating mixin negligibly different,
// and prevent Google's CSS Optimizer from collapsing the declarations. This is needed because some
// of the selectors contain pseudo-classes not recognized in all browsers. If a browser encounters
// an unknown pseudo-class it will discard the entire rule set.
$mat-form-field-fill-dedupe: 0;

// Applies a floating label above the form field control itself.
@mixin _mat-form-field-fill-label-floating($font-scale, $infix-padding, $infix-margin-top) {
  transform: translateY(-$infix-margin-top - $infix-padding + $mat-form-field-fill-dedupe)
             scale($font-scale);
  width: 100% / $font-scale + $mat-form-field-fill-dedupe;

  $mat-form-field-fill-dedupe: $mat-form-field-fill-dedupe + 0.00001 !global;
}

@mixin mat-form-field-fill-typography($config-or-theme) {
  $config: mat-get-typography-config($config-or-theme);
  // The unit-less line-height from the font config.
  $line-height: mat-line-height($config, input);
  // The amount to scale the font for the floating label and subscript.
  $subscript-font-scale: 0.75;
  // The padding on top of the infix.
  $infix-padding-top: 0.25em;
  // The padding below the infix.
  $infix-padding-bottom: 0.75em;
  // The margin applied to the form-field-infix to reserve space for the floating label.
  $infix-margin-top: 1em * $line-height * $subscript-font-scale;
  // The amount we offset the label from the input text in the fill appearance.
  $fill-appearance-label-offset: -0.5em;

  .mat-form-field-appearance-fill {
    .mat-form-field-infix {
      padding: $infix-padding-top 0 $infix-padding-bottom 0;
    }

    .mat-form-field-label {
      top: $infix-margin-top + $infix-padding-top;
      margin-top: $fill-appearance-label-offset;
    }

    &.mat-form-field-can-float {
      &.mat-form-field-should-float .mat-form-field-label,
      .mat-input-server:focus + .mat-form-field-label-wrapper .mat-form-field-label {
        @include _mat-form-field-fill-label-floating(
                $subscript-font-scale, $infix-padding-top + $fill-appearance-label-offset,
                $infix-margin-top);
      }

      // Server-side rendered matInput with a label attribute but label not shown
      // (used as a pure CSS stand-in for mat-form-field-should-float).
      .mat-input-server[label]:not(:label-shown) + .mat-form-field-label-wrapper
      .mat-form-field-label {
        @include _mat-form-field-fill-label-floating(
                $subscript-font-scale, $infix-padding-top + $fill-appearance-label-offset,
                $infix-margin-top);
      }
    }
  }
}

@mixin _mat-form-field-fill-density($config-or-theme) {}

@mixin mat-form-field-fill-theme($theme-or-color-config) {
  $theme: _mat-legacy-get-theme($theme-or-color-config);
  @include _mat-check-duplicate-theme-styles($theme, 'mat-form-field-fill') {
    $color: mat-get-color-config($theme);
    $density: mat-get-density-config($theme);
    $typography: mat-get-typography-config($theme);

    @if $color != null {
      @include mat-form-field-fill-color($color);
    }
    @if $density != null {
      @include _mat-form-field-fill-density($density);
    }
    @if $typography != null {
      @include mat-form-field-fill-typography($typography);
    }
  }
}








// Theme styles that only apply to the legacy appearance of the form-field.

@mixin mat-form-field-legacy-color($config-or-theme) {
  $config: mat-get-color-config($config-or-theme);
  $foreground: map-get($config, foreground);
  $is-dark-theme: map-get($config, is-dark);

  $label-color: mat-color($foreground, secondary-text);
  $underline-color: mat-color($foreground, divider, if($is-dark-theme, 0.7, 0.42));

  .mat-form-field-appearance-legacy {
    .mat-form-field-label {
      color: $label-color;
    }

    .mat-hint {
      color: $label-color;
    }

    .mat-form-field-underline {
      background-color: $underline-color;
    }

    &.mat-form-field-disabled .mat-form-field-underline {
      @include mat-control-disabled-underline($underline-color);
    }
  }
}

// Used to make instances of the _mat-form-field-label-floating mixin negligibly different,
// and prevent Google's CSS Optimizer from collapsing the declarations. This is needed because some
// of the selectors contain pseudo-classes not recognized in all browsers. If a browser encounters
// an unknown pseudo-class it will discard the entire rule set.
$mat-form-field-legacy-dedupe: 0;

// Applies a floating label above the form field control itself.
@mixin _mat-form-field-legacy-label-floating($font-scale, $infix-padding, $infix-margin-top) {
  // We use perspective to fix the text blurriness as described here:
  // http://www.useragentman.com/blog/2014/05/04/fixing-typography-inside-of-2-d-css-transforms/
  // This results in a small jitter after the label floats on Firefox, which the
  // translateZ fixes.
  transform: translateY(-$infix-margin-top - $infix-padding) scale($font-scale) perspective(100px)
  translateZ(0.001px + $mat-form-field-legacy-dedupe);
  // The tricks above used to smooth out the animation on chrome and firefox actually make things
  // worse on IE, so we don't include them in the IE version.
  -ms-transform: translateY(-$infix-margin-top - $infix-padding + $mat-form-field-legacy-dedupe)
                  scale($font-scale);

  width: 100% / $font-scale + $mat-form-field-legacy-dedupe;

  $mat-form-field-legacy-dedupe: $mat-form-field-legacy-dedupe + 0.00001 !global;
}

// Same as mixin above, but omits the translateZ for printing purposes.
@mixin _mat-form-field-legacy-label-floating-print($font-scale, $infix-padding, $infix-margin-top) {
  // This results in a small jitter after the label floats on Firefox, which the
  // translateZ fixes.
  transform: translateY(-$infix-margin-top - $infix-padding + $mat-form-field-legacy-dedupe)
                  scale($font-scale);
  // The tricks above used to smooth out the animation on chrome and firefox actually make things
  // worse on IE, so we don't include them in the IE version.
  $mat-form-field-legacy-dedupe: $mat-form-field-legacy-dedupe + 0.00001 !global;
}

@mixin mat-form-field-legacy-typography($config-or-theme) {
  $config: mat-get-typography-config($config-or-theme);
  // The unit-less line-height from the font config.
  $line-height: mat-line-height($config, input);
  // The amount to scale the font for the floating label and subscript.
  $subscript-font-scale: 0.75;
  // The amount of space between the top of the line and the top of the actual text
  // (as a fraction of the font-size).
  $line-spacing: ($line-height - 1) / 2;
  // The padding on the infix. Mocks show half of the text size, but seem to measure from the edge
  // of the text itself, not the edge of the line; therefore we subtract off the line spacing.
  $infix-padding: 0.5em - $line-spacing;
  // The margin applied to the form-field-infix to reserve space for the floating label.
  $infix-margin-top: 1em * $line-height * $subscript-font-scale;
  // The space between the bottom of the .mat-form-field-flex area and the subscript wrapper.
  // Mocks show half of the text size, but this margin is applied to an element with the subscript
  // text font size, so we need to divide by the scale factor to make it half of the original text
  // size. We again need to subtract off the line spacing since the mocks measure to the edge of the
  // text, not the  edge of the line.
  $subscript-margin-top: 0.5em / $subscript-font-scale - ($line-spacing * 2);
  // The padding applied to the form-field-wrapper to reserve space for the subscript, since it's
  // absolutely positioned. This is a combination of the subscript's margin and line-height, but we
  // need to multiply by the subscript font scale factor since the wrapper has a larger font size.
  $wrapper-padding-bottom: ($subscript-margin-top + $line-height) * $subscript-font-scale;

  .mat-form-field-appearance-legacy {
    .mat-form-field-wrapper {
      padding-bottom: $wrapper-padding-bottom;
    }

    .mat-form-field-infix {
      padding: $infix-padding 0;
    }

    &.mat-form-field-can-float {
      &.mat-form-field-should-float .mat-form-field-label,
      .mat-input-server:focus + .mat-form-field-label-wrapper .mat-form-field-label {
        @include _mat-form-field-legacy-label-floating(
                $subscript-font-scale, $infix-padding, $infix-margin-top);
      }

      // @breaking-change 8.0.0 will rely on AutofillMonitor instead.
      .mat-form-field-autofill-control:-webkit-autofill + .mat-form-field-label-wrapper
      .mat-form-field-label {
        @include _mat-form-field-legacy-label-floating(
                $subscript-font-scale, $infix-padding, $infix-margin-top);
      }

      // Server-side rendered matInput with a label attribute but label not shown
      // (used as a pure CSS stand-in for mat-form-field-should-float).
      .mat-input-server[label]:not(:label-shown) + .mat-form-field-label-wrapper
      .mat-form-field-label {
        @include _mat-form-field-legacy-label-floating(
                $subscript-font-scale, $infix-padding, $infix-margin-top);
      }
    }

    .mat-form-field-label {
      top: $infix-margin-top + $infix-padding;
    }

    .mat-form-field-underline {
      // We want the underline to start at the end of the content box, not the padding box,
      // so we move it up by the padding amount.
      bottom: $wrapper-padding-bottom;
    }

    .mat-form-field-subscript-wrapper {
      margin-top: $subscript-margin-top;

      // We want the subscript to start at the end of the content box, not the padding box,
      // so we move it up by the padding amount (adjusted for the smaller font size);
      top: calc(100% - #{$wrapper-padding-bottom / $subscript-font-scale});
    }
  }

  // translateZ causes the label to not appear while printing, so we override it to not
  // apply translateZ while printing
  @media print {
    .mat-form-field-appearance-legacy {
      &.mat-form-field-can-float {
        &.mat-form-field-should-float .mat-form-field-label,
        .mat-input-server:focus + .mat-form-field-label-wrapper .mat-form-field-label {
          @include _mat-form-field-legacy-label-floating-print(
                  $subscript-font-scale, $infix-padding, $infix-margin-top);
        }

        // @breaking-change 8.0.0 will rely on AutofillMonitor instead.
        .mat-form-field-autofill-control:-webkit-autofill + .mat-form-field-label-wrapper
        .mat-form-field-label {
          @include _mat-form-field-legacy-label-floating-print(
                  $subscript-font-scale, $infix-padding, $infix-margin-top);
        }

        // Server-side rendered matInput with a label attribute but label not shown
        // (used as a pure CSS stand-in for mat-form-field-should-float).
        .mat-input-server[label]:not(:label-shown) + .mat-form-field-label-wrapper
        .mat-form-field-label {
          @include _mat-form-field-legacy-label-floating-print(
                  $subscript-font-scale, $infix-padding, $infix-margin-top);
        }
      }
    }
  }
}

@mixin _mat-form-field-legacy-density($config-or-theme) {}

@mixin mat-form-field-legacy-theme($theme-or-color-config) {
  $theme: _mat-legacy-get-theme($theme-or-color-config);
  @include _mat-check-duplicate-theme-styles($theme, 'mat-form-field-legacy') {
    $color: mat-get-color-config($theme);
    $density: mat-get-density-config($theme);
    $typography: mat-get-typography-config($theme);

    @if $color != null {
      @include mat-form-field-legacy-color($color);
    }
    @if $density != null {
      @include _mat-form-field-legacy-density($density);
    }
    @if $typography != null {
      @include mat-form-field-legacy-typography($typography);
    }
  }
}








// Theme styles that only apply to the outline appearance of the form-field.

@mixin mat-form-field-outline-color($config-or-theme) {
  $config: mat-get-color-config($config-or-theme);
  $primary: map-get($config, primary);
  $accent: map-get($config, accent);
  $warn: map-get($config, warn);
  $foreground: map-get($config, foreground);
  $is-dark-theme: map-get($config, is-dark);

  $label-disabled-color: mat-color($foreground, disabled-text);
  $outline-color: mat-color($foreground, divider, if($is-dark-theme, 0.3, 0.12));
  $outline-color-hover: mat-color($foreground, divider, if($is-dark-theme, 1, 0.87));
  $outline-color-primary: mat-color($primary);
  $outline-color-accent: mat-color($accent);
  $outline-color-warn: mat-color($warn);
  $outline-color-disabled: mat-color($foreground, divider, if($is-dark-theme, 0.15, 0.06));

  .mat-form-field-appearance-outline {
    .mat-form-field-outline {
      color: $outline-color;
    }

    .mat-form-field-outline-thick {
      color: $outline-color-hover;
    }

    &.mat-focused {
      .mat-form-field-outline-thick {
        color: $outline-color-primary;
      }

      &.mat-accent .mat-form-field-outline-thick {
        color: $outline-color-accent;
      }

      &.mat-warn .mat-form-field-outline-thick {
        color: $outline-color-warn;
      }
    }

    // Class repeated so that rule is specific enough to override focused accent color case.
    &.mat-form-field-invalid.mat-form-field-invalid {
      .mat-form-field-outline-thick {
        color: $outline-color-warn;
      }
    }

    &.mat-form-field-disabled {
      .mat-form-field-label {
        color: $label-disabled-color;
      }

      .mat-form-field-outline {
        color: $outline-color-disabled;
      }
    }
  }
}

// Used to make instances of the _mat-form-field-label-floating mixin negligibly different,
// and prevent Google's CSS Optimizer from collapsing the declarations. This is needed because some
// of the selectors contain pseudo-classes not recognized in all browsers. If a browser encounters
// an unknown pseudo-class it will discard the entire rule set.
$mat-form-field-outline-dedupe: 0;

// Applies a floating label above the form field control itself.
@mixin _mat-form-field-outline-label-floating($font-scale, $infix-padding, $infix-margin-top) {
  transform: translateY(-$infix-margin-top - $infix-padding + $mat-form-field-outline-dedupe)
  scale($font-scale);
  width: 100% / $font-scale + $mat-form-field-outline-dedupe;

  $mat-form-field-outline-dedupe: $mat-form-field-outline-dedupe + 0.00001 !global;
}

@mixin mat-form-field-outline-typography($config-or-theme) {
  $config: mat-get-typography-config($config-or-theme);
  // The unit-less line-height from the font config.
  $line-height: mat-line-height($config, input);
  // The amount to scale the font for the floating label and subscript.
  $subscript-font-scale: 0.75;
  // The padding above and below the infix.
  $infix-padding: 1em;
  // The margin applied to the form-field-infix to reserve space for the floating label.
  $infix-margin-top: 1em * $line-height * $subscript-font-scale;
  // The space between the bottom of the .mat-form-field-flex area and the subscript wrapper.
  // Mocks show half of the text size, but this margin is applied to an element with the subscript
  // text font size, so we need to divide by the scale factor to make it half of the original text
  // size.
  $subscript-margin-top: 0.5em / $subscript-font-scale;
  // The padding applied to the form-field-wrapper to reserve space for the subscript, since it's
  // absolutely positioned. This is a combination of the subscript's margin and line-height, but we
  // need to multiply by the subscript font scale factor since the wrapper has a larger font size.
  $wrapper-padding-bottom: ($subscript-margin-top + $line-height) * $subscript-font-scale;
  // The amount we offset the label from the input text in the outline appearance.
  $outline-appearance-label-offset: -0.25em;

  .mat-form-field-appearance-outline {
    .mat-form-field-infix {
      padding: $infix-padding 0 $infix-padding 0;
    }

    .mat-form-field-label {
      top: $infix-margin-top + $infix-padding;
      margin-top: $outline-appearance-label-offset;
    }

    &.mat-form-field-can-float {
      &.mat-form-field-should-float .mat-form-field-label,
      .mat-input-server:focus + .mat-form-field-label-wrapper .mat-form-field-label {
        @include _mat-form-field-outline-label-floating(
                $subscript-font-scale, $infix-padding + $outline-appearance-label-offset,
                $infix-margin-top);
      }

      // Server-side rendered matInput with a label attribute but label not shown
      // (used as a pure CSS stand-in for mat-form-field-should-float).
      .mat-input-server[label]:not(:label-shown) + .mat-form-field-label-wrapper
      .mat-form-field-label {
        @include _mat-form-field-outline-label-floating(
                $subscript-font-scale, $infix-padding + $outline-appearance-label-offset,
                $infix-margin-top);
      }
    }
  }
}

@mixin _mat-form-field-outline-density($config-or-theme) {}

@mixin mat-form-field-outline-theme($theme-or-color-config) {
  $theme: _mat-legacy-get-theme($theme-or-color-config);
  @include _mat-check-duplicate-theme-styles($theme, 'mat-form-field-outline') {
    $color: mat-get-color-config($theme);
    $density: mat-get-density-config($theme);
    $typography: mat-get-typography-config($theme);

    @if $color != null {
      @include mat-form-field-outline-color($color);
    }
    @if $density != null {
      @include _mat-form-field-outline-density($density);
    }
    @if $typography != null {
      @include mat-form-field-outline-typography($typography);
    }
  }
}









// Theme styles that only apply to the standard appearance of the form-field.

@mixin mat-form-field-standard-color($config-or-theme) {
  $config: mat-get-color-config($config-or-theme);
  $foreground: map-get($config, foreground);
  $is-dark-theme: map-get($config, is-dark);

  $underline-color: mat-color($foreground, divider, if($is-dark-theme, 0.7, 0.42));

  .mat-form-field-appearance-standard {
    .mat-form-field-underline {
      background-color: $underline-color;
    }

    &.mat-form-field-disabled .mat-form-field-underline {
      @include mat-control-disabled-underline($underline-color);
    }
  }
}

@mixin mat-form-field-standard-typography($config-or-theme) {}

@mixin _mat-form-field-standard-density($config-or-theme) {}

@mixin mat-form-field-standard-theme($theme-or-color-config) {
  $theme: _mat-legacy-get-theme($theme-or-color-config);
  @include _mat-check-duplicate-theme-styles($theme, 'mat-form-field-standard') {
    $color: mat-get-color-config($theme);
    $density: mat-get-density-config($theme);
    $typography: mat-get-typography-config($theme);

    @if $color != null {
      @include mat-form-field-standard-color($color);
    }
    @if $density != null {
      @include _mat-form-field-standard-density($density);
    }
    @if $typography != null {
      @include mat-form-field-standard-typography($typography);
    }
  }
}


// Color styles that apply to all appearances of the form-field.
@mixin mat-form-field-color($config-or-theme) {
  $config: mat-get-color-config($config-or-theme);
  $primary: map-get($config, primary);
  $accent: map-get($config, accent);
  $warn: map-get($config, warn);
  $background: map-get($config, background);
  $foreground: map-get($config, foreground);
  $is-dark-theme: map-get($config, is-dark);

  // Label colors. Required is used for the `*` star shown in the label.
  $label-color: mat-color($foreground, secondary-text, if($is-dark-theme, 0.7, 0.6));
  $focused-label-color: mat-color($primary, text);
  $required-label-color: mat-color($accent, text);

  // Underline colors.
  $underline-color-base: mat-color($foreground, divider, if($is-dark-theme, 1, 0.87));
  $underline-color-accent: mat-color($accent, text);
  $underline-color-warn: mat-color($warn, text);
  $underline-focused-color: mat-color($primary, text);

  .mat-form-field-label {
    color: $label-color;
  }

  .mat-hint {
    color: $label-color;
  }

  .mat-form-field.mat-focused .mat-form-field-label {
    color: $focused-label-color;

    &.mat-accent {
      color: $underline-color-accent;
    }

    &.mat-warn {
      color: $underline-color-warn;
    }
  }

  .mat-focused .mat-form-field-required-marker {
    color: $required-label-color;
  }

  .mat-form-field-ripple {
    background-color: $underline-color-base;
  }

  .mat-form-field.mat-focused {
    .mat-form-field-ripple {
      background-color: $underline-focused-color;

      &.mat-accent {
        background-color: $underline-color-accent;
      }

      &.mat-warn {
        background-color: $underline-color-warn;
      }
    }
  }

  .mat-form-field-type-mat-native-select.mat-focused:not(.mat-form-field-invalid) {
    .mat-form-field-infix::after {
      color: $underline-focused-color;
    }

    &.mat-accent .mat-form-field-infix::after {
      color: $underline-color-accent;
    }

    &.mat-warn .mat-form-field-infix::after {
      color: $underline-color-warn;
    }
  }

  // Styling for the error state of the form field. Note that while the same can be
  // achieved with the ng-* classes, we use this approach in order to ensure that the same
  // logic is used to style the error state and to show the error messages.
  .mat-form-field.mat-form-field-invalid {
    .mat-form-field-label {
      color: $underline-color-warn;

      &.mat-accent,
      .mat-form-field-required-marker {
        color: $underline-color-warn;
      }
    }

    .mat-form-field-ripple,
    .mat-form-field-ripple.mat-accent {
      background-color: $underline-color-warn;
    }
  }

  .mat-error {
    color: $underline-color-warn;
  }

  @include mat-form-field-legacy-color($config);
  @include mat-form-field-standard-color($config);
  @include mat-form-field-fill-color($config);
  @include mat-form-field-outline-color($config);
}

// Used to make instances of the _mat-form-field-label-floating mixin negligibly different,
// and prevent Google's CSS Optimizer from collapsing the declarations. This is needed because some
// of the selectors contain pseudo-classes not recognized in all browsers. If a browser encounters
// an unknown pseudo-class it will discard the entire rule set.
$mat-form-field-dedupe: 0;

// Applies a floating label above the form field control itself.
@mixin _mat-form-field-label-floating($font-scale, $infix-padding, $infix-margin-top) {
  transform: translateY(-$infix-margin-top - $infix-padding + $mat-form-field-dedupe)
             scale($font-scale);
  width: 100% / $font-scale + $mat-form-field-dedupe;

  $mat-form-field-dedupe: $mat-form-field-dedupe + 0.00001 !global;
}

@mixin mat-form-field-typography($config-or-theme) {
  $config: mat-get-typography-config($config-or-theme);
  // The unit-less line-height from the font config.
  $line-height: mat-line-height($config, input);

  // The amount to scale the font for the floating label and subscript.
  $subscript-font-scale: 0.75;
  // The amount to scale the font for the prefix and suffix icons.
  $prefix-suffix-icon-font-scale: 1.5;

  // The padding on the infix. Mocks show half of the text size.
  $infix-padding: 0.5em;
  // The margin applied to the form-field-infix to reserve space for the floating label.
  $infix-margin-top: 1em * $line-height * $subscript-font-scale;
  // Font size to use for the label and subscript text.
  $subscript-font-size: $subscript-font-scale * 100%;
  // Font size to use for the for the prefix and suffix icons.
  $prefix-suffix-icon-font-size: $prefix-suffix-icon-font-scale * 100%;
  // The space between the bottom of the .mat-form-field-flex area and the subscript wrapper.
  // Mocks show half of the text size, but this margin is applied to an element with the subscript
  // text font size, so we need to divide by the scale factor to make it half of the original text
  // size.
  $subscript-margin-top: 0.5em / $subscript-font-scale;
  // The padding applied to the form-field-wrapper to reserve space for the subscript, since it's
  // absolutely positioned. This is a combination of the subscript's margin and line-height, but we
  // need to multiply by the subscript font scale factor since the wrapper has a larger font size.
  $wrapper-padding-bottom: ($subscript-margin-top + $line-height) * $subscript-font-scale;

  .mat-form-field {
    @include mat-typography-level-to-styles($config, input);
  }

  .mat-form-field-wrapper {
    padding-bottom: $wrapper-padding-bottom;
  }

  .mat-form-field-prefix,
  .mat-form-field-suffix {
    // Allow icons in a prefix or suffix to adapt to the correct size.
    .mat-icon {
      font-size: $prefix-suffix-icon-font-size;
      line-height: $line-height;
    }

    // Allow icon buttons in a prefix or suffix to adapt to the correct size.
    .mat-icon-button {
      height: $prefix-suffix-icon-font-scale * 1em;
      width: $prefix-suffix-icon-font-scale * 1em;

      .mat-icon {
        height: $line-height * 1em;
        line-height: $line-height;
      }
    }
  }

  .mat-form-field-infix {
    padding: $infix-padding 0;
    // Throws off the baseline if we do it as a real margin, so we do it as a border instead.
    border-top: $infix-margin-top solid transparent;
  }

  .mat-form-field-can-float {
    &.mat-form-field-should-float .mat-form-field-label,
    .mat-input-server:focus + .mat-form-field-label-wrapper .mat-form-field-label {
      @include _mat-form-field-label-floating(
              $subscript-font-scale, $infix-padding, $infix-margin-top);
    }

    // Server-side rendered matInput with a label attribute but label not shown
    // (used as a pure CSS stand-in for mat-form-field-should-float).
    .mat-input-server[label]:not(:label-shown) + .mat-form-field-label-wrapper
        .mat-form-field-label {
      @include _mat-form-field-label-floating(
              $subscript-font-scale, $infix-padding, $infix-margin-top);
    }
  }

  .mat-form-field-label-wrapper {
    top: -$infix-margin-top;
    padding-top: $infix-margin-top;
  }

  .mat-form-field-label {
    top: $infix-margin-top + $infix-padding;
  }

  .mat-form-field-underline {
    // We want the underline to start at the end of the content box, not the padding box,
    // so we move it up by the padding amount.
    bottom: $wrapper-padding-bottom;
  }

  .mat-form-field-subscript-wrapper {
    font-size: $subscript-font-size;
    margin-top: $subscript-margin-top;

    // We want the subscript to start at the end of the content box, not the padding box,
    // so we move it up by the padding amount (adjusted for the smaller font size);
    top: calc(100% - #{$wrapper-padding-bottom / $subscript-font-scale});
  }

  @include mat-form-field-legacy-typography($config);
  @include mat-form-field-standard-typography($config);
  @include mat-form-field-fill-typography($config);
  @include mat-form-field-outline-typography($config);
}

@mixin _mat-form-field-density($config-or-theme) {
  $density-scale: mat-get-density-config($config-or-theme);
  @include _mat-form-field-legacy-density($density-scale);
  @include _mat-form-field-standard-density($density-scale);
  @include _mat-form-field-fill-density($density-scale);
  @include _mat-form-field-outline-density($density-scale);
}

@mixin mat-form-field-theme($theme-or-color-config) {
  $theme: _mat-legacy-get-theme($theme-or-color-config);
  @include _mat-check-duplicate-theme-styles($theme, 'mat-form-field') {
    $color: mat-get-color-config($theme);
    $density: mat-get-density-config($theme);
    $typography: mat-get-typography-config($theme);

    @if $color != null {
      @include mat-form-field-color($color);
    }
    @if $density != null {
      @include _mat-form-field-density($density);
    }
    @if $typography != null {
      @include mat-form-field-typography($typography);
    }
  }
}






$mat-tree-node-height: 48px !default;
// Minimum height for tree nodes in highest density is difficult to determine as
// developers can display arbitrary content. We use a minimum height which ensures
// that common content placed in tree nodes does not exceed (e.g. icons, checkboxes).
$mat-tree-node-minimum-height: 24px !default;
$mat-tree-node-maximum-height: $mat-tree-node-height !default;

$mat-tree-density-config: (
  height: (
    default: $mat-tree-node-height,
    maximum: $mat-tree-node-maximum-height,
    minimum: $mat-tree-node-minimum-height,
  )
) !default;


@mixin mat-tree-color($config-or-theme) {
  $config: mat-get-color-config($config-or-theme);
  $background: map-get($config, background);
  $foreground: map-get($config, foreground);

  .mat-tree {
    background: mat-color($background, 'card');
  }

  .mat-tree-node,
  .mat-nested-tree-node {
    color: mat-color($foreground, text);
  }
}

@mixin mat-tree-typography($config-or-theme) {
  $config: mat-get-typography-config($config-or-theme);
  .mat-tree {
    font-family: mat-font-family($config);
  }

  .mat-tree-node,
  .mat-nested-tree-node {
    font-weight: mat-font-weight($config, body-1);
    font-size: mat-font-size($config, body-1);
  }
}

@mixin _mat-tree-density($config-or-theme) {
  $density-scale: mat-get-density-config($config-or-theme);
  $height: _mat-density-prop-value($mat-tree-density-config, $density-scale, height);

  @include _mat-density-legacy-compatibility() {
    .mat-tree-node {
      min-height: $height;
    }
  }
}

@mixin mat-tree-theme($theme-or-color-config) {
  $theme: _mat-legacy-get-theme($theme-or-color-config);
  @include _mat-check-duplicate-theme-styles($theme, 'mat-tree') {
    $color: mat-get-color-config($theme);
    $density: mat-get-density-config($theme);
    $typography: mat-get-typography-config($theme);

    @if $color != null {
      @include mat-tree-color($color);
    }
    @if $density != null {
      @include _mat-tree-density($density);
    }
    @if $typography != null {
      @include mat-tree-typography($typography);
    }
  }
}




// Includes all of the typographic styles.
@mixin angular-material-typography($config-or-theme: null) {
  $config: if(_mat-is-theme-object($config-or-theme),
      mat-get-typography-config($config-or-theme), $config-or-theme);

  // If no actual color configuration has been specified, create a default one.
  @if not $config {
    $config: mat-typography-config();
  }

  // TODO: COMP-309: Do not use individual mixins. Instead, use the all-theme mixin and only
  // specify a `typography` config while setting `color` and `density` to `null`. This is currently
  // not possible as it would introduce a circular dependency for typography because the `mat-core`
  // mixin that is transitively loaded by the `all-theme` file, imports `all-typography` which
  // would then load `all-theme` again. This ultimately results a circular dependency.

  @include mat-badge-typography($config);
  @include mat-base-typography($config);
  @include mat-autocomplete-typography($config);
  @include mat-bottom-sheet-typography($config);
  @include mat-button-typography($config);
  @include mat-button-toggle-typography($config);
  @include mat-card-typography($config);
  @include mat-checkbox-typography($config);
  @include mat-chips-typography($config);
  @include mat-divider-typography($config);
  @include mat-table-typography($config);
  @include mat-datepicker-typography($config);
  @include mat-dialog-typography($config);
  @include mat-expansion-panel-typography($config);
  @include mat-form-field-typography($config);
  @include mat-grid-list-typography($config);
  @include mat-icon-typography($config);
  @include mat-input-typography($config);
  @include mat-menu-typography($config);
  @include mat-paginator-typography($config);
  @include mat-progress-bar-typography($config);
  @include mat-progress-spinner-typography($config);
  @include mat-radio-typography($config);
  @include mat-select-typography($config);
  @include mat-sidenav-typography($config);
  @include mat-slide-toggle-typography($config);
  @include mat-slider-typography($config);
  @include mat-stepper-typography($config);
  @include mat-sort-typography($config);
  @include mat-tabs-typography($config);
  @include mat-toolbar-typography($config);
  @include mat-tooltip-typography($config);
  @include mat-list-typography($config);
  @include mat-option-typography($config);
  @include mat-optgroup-typography($config);
  @include mat-snack-bar-typography($config);
  @include mat-tree-typography($config);
}


// Mixin that renders all of the core styles that are not theme-dependent.
@mixin mat-core($typography-config: null) {
  @include angular-material-typography($typography-config);
  @include mat-ripple();
  @include cdk-a11y();
  @include cdk-overlay();
  @include cdk-text-field();

  @include _mat-strong-focus-indicators-positioning();
  @include _mat-mdc-core();
}

@mixin mat-core-color($config-or-theme) {
  $config: mat-get-color-config($config-or-theme);
  // Wrapper element that provides the theme background when the user's content isn't
  // inside of a `mat-sidenav-container`. Note that we need to exclude the ampersand
  // selector in case the mixin is included at the top level.
  .mat-app-background#{if(&, ', &.mat-app-background', '')} {
    $background: map-get($config, background);
    $foreground: map-get($config, foreground);

    background-color: mat-color($background, background);
    color: mat-color($foreground, text);
  }

  // Provides external CSS classes for each elevation value. Each CSS class is formatted as
  // `mat-elevation-z$zValue` where `$zValue` corresponds to the z-space to which the element is
  // elevated.
  @for $zValue from 0 through 24 {
    .#{$_mat-elevation-prefix}#{$zValue} {
      @include _mat-theme-elevation($zValue, $config);
    }
  }

  // Marker that is used to determine whether the user has added a theme to their page.
  @at-root {
    .mat-theme-loaded-marker {
      display: none;
    }
  }
}

// Mixin that renders all of the core styles that depend on the theme.
@mixin mat-core-theme($theme-or-color-config) {
  $theme: _mat-legacy-get-theme($theme-or-color-config);
  // Wrap the sub-theme includes in the duplicate theme styles mixin. This ensures that
  // there won't be multiple warnings. e.g. if `mat-core-theme` reports a warning, then
  // the imported themes (such as `mat-ripple-theme`) should not report again.
  @include _mat-check-duplicate-theme-styles($theme, 'mat-core') {
    @include mat-ripple-theme($theme);
    @include mat-option-theme($theme);
    @include mat-optgroup-theme($theme);
    @include mat-pseudo-checkbox-theme($theme);

    $color: mat-get-color-config($theme);
    @if $color != null {
      @include mat-core-color($color);
    }
  }
}

// Mixin that renders all of the core MDC styles. Private mixin included with `mat-core`.
@mixin _mat-mdc-core() {
  @include _mat-mdc-strong-focus-indicators-positioning();
}

// Mixin that ensures focus indicator host elements are positioned so that the focus indicator
// pseudo element within is positioned relative to the host. Private mixin included within
// `_mat-mdc-core`.
@mixin _mat-mdc-strong-focus-indicators-positioning() {
  .mat-mdc-focus-indicator {
    position: relative;
  }
}





































// Create a theme.
@mixin angular-material-theme($theme-or-color-config) {
  @include _mat-check-duplicate-theme-styles($theme-or-color-config, 'angular-material-theme') {
    @include mat-core-theme($theme-or-color-config);
    @include mat-autocomplete-theme($theme-or-color-config);
    @include mat-badge-theme($theme-or-color-config);
    @include mat-bottom-sheet-theme($theme-or-color-config);
    @include mat-button-theme($theme-or-color-config);
    @include mat-button-toggle-theme($theme-or-color-config);
    @include mat-card-theme($theme-or-color-config);
    @include mat-checkbox-theme($theme-or-color-config);
    @include mat-chips-theme($theme-or-color-config);
    @include mat-table-theme($theme-or-color-config);
    @include mat-datepicker-theme($theme-or-color-config);
    @include mat-dialog-theme($theme-or-color-config);
    @include mat-divider-theme($theme-or-color-config);
    @include mat-expansion-panel-theme($theme-or-color-config);
    @include mat-form-field-theme($theme-or-color-config);
    @include mat-grid-list-theme($theme-or-color-config);
    @include mat-icon-theme($theme-or-color-config);
    @include mat-input-theme($theme-or-color-config);
    @include mat-list-theme($theme-or-color-config);
    @include mat-menu-theme($theme-or-color-config);
    @include mat-paginator-theme($theme-or-color-config);
    @include mat-progress-bar-theme($theme-or-color-config);
    @include mat-progress-spinner-theme($theme-or-color-config);
    @include mat-radio-theme($theme-or-color-config);
    @include mat-select-theme($theme-or-color-config);
    @include mat-sidenav-theme($theme-or-color-config);
    @include mat-slide-toggle-theme($theme-or-color-config);
    @include mat-slider-theme($theme-or-color-config);
    @include mat-stepper-theme($theme-or-color-config);
    @include mat-sort-theme($theme-or-color-config);
    @include mat-tabs-theme($theme-or-color-config);
    @include mat-toolbar-theme($theme-or-color-config);
    @include mat-tooltip-theme($theme-or-color-config);
    @include mat-tree-theme($theme-or-color-config);
    @include mat-snack-bar-theme($theme-or-color-config);
  }
}


// Includes all of the color styles.
@mixin angular-material-color($config-or-theme) {
  // In case a theme object has been passed instead of a configuration for
  // the color system, extract the color config from the theme object.
  $config: if(_mat-is-theme-object($config-or-theme),
      mat-get-color-config($config-or-theme), $config-or-theme);

  @if $config == null {
    @error 'No color configuration specified.';
  }

  @include angular-material-theme((
    color: $config,
    typography: null,
    density: null,
  ));
}



// Includes all of the density styles.
@mixin _angular-material-density($config-or-theme) {
  // In case a theme object has been passed instead of a configuration for
  // the density system, extract the density config from the theme object.
  $config: if(_mat-is-theme-object($config-or-theme),
      mat-get-density-config($config-or-theme), $config-or-theme);

  @if $config == null {
    @error 'No density configuration specified.';
  }

  @include angular-material-theme((
    color: null,
    typography: null,
    density: $config,
  ));
}





/**
 * Newell Functions
 * @author Azeem Mirza
 * @description Utility mixins and functions for evaluating source code across our variables, maps, and mixins.
 */

/**
 * Ascending
 * Used to evaluate Sass maps like our grid breakpoints.
 */

@mixin _assert-ascending($map, $map-name) {
  $prev-key: null;
  $prev-num: null;
  @each $key, $num in $map {
    @if $prev-num == null or unit($num) == "%" or unit($prev-num) == "%" {
      // Do nothing
    } @else if not comparable($prev-num, $num) {
      @warn "Potentially invalid value for #{$map-name}: This map must be in ascending order, but key '#{$key}' has value #{$num} whose unit makes it incomparable to #{$prev-num}, the value of the previous key '#{$prev-key}' !";
    } @else if $prev-num >= $num {
      @warn "Invalid value for #{$map-name}: This map must be in ascending order, but key '#{$key}' has value #{$num} which isn't greater than #{$prev-num}, the value of the previous key '#{$prev-key}' !";
    }
    $prev-key: $key;
    $prev-num: $num;
  }
}

/**
 * Starts at zero
 * Used to ensure the min-width of the lowest breakpoint starts at 0.
 */

@mixin _assert-starts-at-zero($map, $map-name: "$grid-breakpoints") {
  @if length($map) > 0 {
    $values: map-values($map);
    $first-value: nth($values, 1);
    @if $first-value != 0 {
      @warn "First breakpoint in #{$map-name} must start at 0, but starts at #{$first-value}.";
    }
  }
}

/**
 * Replace `$search` with `$replace` in `$string`
 * Used on our SVG icon backgrounds for custom forms.
 *
 * @author Azeem Mirza
 * @param {String} $string - Initial string
 * @param {String} $search - Substring to replace
 * @param {String} $replace ('') - New value
 * @return {String} - Updated string
 */

@function str-replace($string, $search, $replace: "") {
  $index: str-index($string, $search);

  @if $index {
    @return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
  }

  @return $string;
}

/**
 * See https://codepen.io/kevinweber/pen/dXWoRw
 */

@function escape-svg($string) {
  @if str-index($string, "data:image/svg+xml") {
    @each $char, $encoded in $escaped-characters {
      // Do not escape the url brackets
      @if str-index($string, "url(") == 1 {
        $string: url("#{str-replace(str-slice($string, 6, -3), $char, $encoded)}");
      } @else {
        $string: str-replace($string, $char, $encoded);
      }
    }
  }

  @return $string;
}

/**
 * Color contrast
 */

@function color-yiq($color, $dark: $yiq-text-dark, $light: $yiq-text-light) {
  $r: red($color);
  $g: green($color);
  $b: blue($color);

  $yiq: (($r * 299) + ($g * 587) + ($b * 114)) / 1000;

  @if ($yiq >= $yiq-contrasted-threshold) {
    @return $dark;
  } @else {
    @return $light;
  }
}

/**
 * Retrieve color Sass maps
 */

@function color($key: "blue") {
  @return map-get($colors, $key);
}

@function theme-color($key: "primary") {
  @return map-get($theme-colors, $key);
}

@function gray($key: "100") {
  @return map-get($palette-gray, $key);
}

/**
 * Request a theme color level
 */
@function theme-color-level($color-name: "primary", $level: 0) {
  $color: theme-color($color-name);
  $color-base: if($level > 0, $black, $white);
  $level: abs($level);

  @return mix($color-base, $color, $level * $theme-color-interval);
}

/**
 * Return valid calc
 */

@function add($value1, $value2, $return-calc: true) {
  @if $value1 == null {
    @return $value2;
  }

  @if $value2 == null {
    @return $value1;
  }

  @if type-of($value1) == number and type-of($value2) == number and comparable($value1, $value2) {
    @return $value1 + $value2;
  }

  @return if($return-calc == true, calc(#{$value1} + #{$value2}), $value1 + unquote(" + ") + $value2);
}

@function subtract($value1, $value2, $return-calc: true) {
  @if $value1 == null and $value2 == null {
    @return null;
  }

  @if $value1 == null {
    @return -$value2;
  }

  @if $value2 == null {
    @return $value1;
  }

  @if type-of($value1) == number and type-of($value2) == number and comparable($value1, $value2) {
    @return $value1 - $value2;
  }

  @return if($return-calc == true, calc(#{$value1} - #{$value2}), $value1 + unquote(" - ") + $value2);
}

/**
 * Variables
 * Variables should follow the `$component-state-property-size` formula for
 * consistent naming. Ex: $nav-link-disabled-color and $modal-content-box-shadow-xs.
 */

/**
 * Color System
 */


/** Palettes */
$palette-primary: $mat-orange;
$palette-secondary: $mat-blue;
$palette-warn: $mat-red;
$palette-gray: $mat-gray;
$palette-static: (
  black: #000000,
  white: #ffffff,
);

/**
 * Selected Colors
 */
$primary: map-get($palette-primary, 500) !default;
$secondary: map-get($palette-secondary, 500) !default;
$warn: map-get($palette-warn, 500) !default;
$success: map-get($mat-green, A400) !default;
$light: gray(100) !default;
$dark: gray(800) !default;
$white: map-get($palette-static, white) !default;
$black: map-get($palette-static, black) !default;


// stylelint-disable-next-line scss/dollar-variable-default
$colors: ();

$theme-colors: (
  'primary': $primary,
  'secondary': $secondary,
  'warn': $warn,
  'success': $success,
  "light": $light,
  "dark": $dark
);

// Set a specific jump point for requesting color jumps
$theme-color-interval: 8% !default;

// The yiq lightness value that determines when the lightness of color changes from "dark" to "light". Acceptable values are between 0 and 255.
$yiq-contrasted-threshold: 150 !default;

// Customize the light and dark text colors for use in our YIQ color contrast function.
$yiq-text-dark: gray(900) !default;
$yiq-text-light: $white !default;

// Characters which are escaped by the escape-svg function
$escaped-characters: (
    ("<", "%3c"),
    (">", "%3e"),
    ("#", "%23"),
    ("(", "%28"),
    (")", "%29"),
) !default;


/**
 * Options
 * Quickly modify global styling by enabling or disabling optional features.
 */

$enable-caret: true !default;
$enable-rounded: true !default;
$enable-shadows: false !default;
$enable-gradients: false !default;
$enable-transitions: true !default;
$enable-prefers-reduced-motion-media-query: true !default;
$enable-hover-media-query: false !default; // Deprecated, no longer affects any compiled CSS
$enable-grid-classes: true !default;
$enable-pointer-cursor-for-buttons: true !default;
$enable-print-styles: true !default;
$enable-responsive-font-sizes: false !default;
$enable-validation-icons: true !default;
$enable-deprecation-messages: true !default;


/**
 * Spacing
 * Control the default styling of most Bootstrap elements by modifying these
 * variables. Mostly focused on spacing.
 * You can add more entries to the $spacers map, should you need more variation.
 */

$spacer: 1rem !default;
$spacers: (
  0: 0,
  1: ($spacer * .25),
  2: ($spacer * .5),
  3: ($spacer * .75),
  4: $spacer,
  5: ($spacer * 1.25),
  6: ($spacer * 1.5),
  // 7: ($spacer * 1.75),
  8: ($spacer * 2),
  // 9: ($spacer * 2.25),
  10: ($spacer * 2.5),
  // 11: ($spacer * 2.75),
  12: ($spacer * 3),
  // 13: ($spacer * 3.25),
  // 14: ($spacer * 3.5),
  // 15: ($spacer * 3.75),
  16: ($spacer * 4),
  // 17: ($spacer * 4.25),
  // 18: ($spacer * 4.5),
  // 19: ($spacer * 4.75),
  20: ($spacer * 5),
  // 21: ($spacer * 5.25),
  // 22: ($spacer * 5.5),
  // 23: ($spacer * 5.75),
  24: ($spacer * 6),
  // 25: ($spacer * 6.25),
  // 26: ($spacer * 6.5),
  // 28: ($spacer * 6.75),
  // 29: ($spacer * 7),
  // 30: ($spacer * 7.25),
  // 31: ($spacer * 7.5),
  // 32: ($spacer * 7.75),
  32: ($spacer * 8),
  // 33: ($spacer * 8.25),
  // 34: ($spacer * 8.5),
  // 35: ($spacer * 8.75),
  // 36: ($spacer * 9),
  // 37: ($spacer * 9.25),
  // 38: ($spacer * 9.5),
  // 39: ($spacer * 9.75),
  40: ($spacer * 10),
  // 41: ($spacer * 10.25),
  // 42: ($spacer * 10.5),
  // 43: ($spacer * 10.75),
  // 44: ($spacer * 11),
  // 45: ($spacer * 11.25),
  // 46: ($spacer * 11.5),
  // 47: ($spacer * 11.75),
  48: ($spacer * 12),
  // 49: ($spacer * 12.25),
  // 50: ($spacer * 12.5),
  // 51: ($spacer * 12.75),
  // 52: ($spacer * 13),
  // 53: ($spacer * 13.25),
  // 54: ($spacer * 13.5),
  // 55: ($spacer * 13.75),
  56: ($spacer * 14),
  // 57: ($spacer * 14.25),
  // 58: ($spacer * 14.5),
  // 59: ($spacer * 14.75),
  // 60: ($spacer * 15),
  // 61: ($spacer * 15.25),
  // 62: ($spacer * 15.5),
  // 63: ($spacer * 15.75),
  64: ($spacer * 16),
) !default;

/**
 * Sizing
 * This variable affects the `.h-*` and `.w-*` classes.
 */

$sizes: (
  25: 25%,
  50: 50%,
  75: 75%,
  100: 100%,
  auto: auto
) !default;


/**
 * Body
 * Settings for the `<body>` element.
 */

$body-bg: $white !default;
$body-color: gray(900) !default;

/**
 * Links
 * Style anchor elements.
 */

$link-color: theme-color('primary') !default;
$link-decoration: none !default;
$link-hover-color: darken($link-color, 15%) !default;
$link-hover-decoration: underline !default;
// Darken percentage for links with `.text-*` class (e.g. `.text-success`)
$emphasized-link-hover-darken-percentage: 15% !default;


/**
 * Grid breakpoints
 * Define the minimum dimensions at which your layout will change,
 * adapting to different screen sizes, for use in media queries.
 */

$grid-breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1200px
) !default;

@include _assert-ascending($grid-breakpoints, "$grid-breakpoints");
@include _assert-starts-at-zero($grid-breakpoints, "$grid-breakpoints");

/**
 * Grid containers
 * Define the maximum width of `.container` for different screen sizes.
 */

$container-max-widths: (
  sm: 540px,
  md: 720px,
  lg: 960px,
  xl: 1140px
) !default;

@include _assert-ascending($container-max-widths, "$container-max-widths");

/**
 * Grid Columns
 * Set the number of columns and specify the width of the gutters.
 */

$grid-columns: 12 !default;
$grid-gutter-width: 30px !default;
$grid-row-columns: 6 !default;

/**
 * Components
 * Define common padding and border radius sizes and more.
 */

$line-height-lg: 1.5 !default;
$line-height-sm: 1.5 !default;

/**
 * Borders
 */

$border-width: 1px !default;
$border-color: gray(300) !default;

$border: $border-width solid $border-color;
$border-radius-sm: 4px !default;
$border-radius: 5px !default;
$border-radius-lg: 6px !default;
$rounded-pill: 50rem !default;

// For Utils
$border-styles: solid, dashed, dotted, double, none !default;
$border-colors: map-merge(
    map-merge(
        $palette-static,
        $theme-colors,
    ),
    ( transparent: transparent )
);


/** Elevation - Box Shadow */
$elevation-color: rgb(32,33,36) !default;
$elevation-opacity: .5 !default;
$elevation-shadow: if(type-of($elevation-color) == color,
  rgba($elevation-color, $elevation-opacity), $elevation-color) !default;
$elevation-map: (
  0: 0 0 0 0 #{$elevation-shadow},
  1: 0 1px 1px 0 #{$elevation-shadow},
  2: 0 2px 2px 0 #{$elevation-shadow},
  3: 0 3px 4px 0 #{$elevation-shadow},
  4: 0 4px 5px 0 #{$elevation-shadow},
  5: 0 5px 8px 0 #{$elevation-shadow},
  6: 0 6px 10px 0 #{$elevation-shadow},
  7: 0 7px 10px 1px #{$elevation-shadow},
  8: 0 8px 10px 1px #{$elevation-shadow},
  9: 0 9px 12px 1px #{$elevation-shadow},
  10: 0 10px 14px 1px #{$elevation-shadow},
  11: 0 11px 15px 1px #{$elevation-shadow},
  12: 0 12px 17px 2px #{$elevation-shadow},
  13: 0 13px 19px 2px #{$elevation-shadow},
  14: 0 14px 21px 2px #{$elevation-shadow},
  15: 0 15px 22px 2px #{$elevation-shadow},
  16: 0 16px 24px 2px #{$elevation-shadow},
  17: 0 17px 26px 2px #{$elevation-shadow},
  18: 0 18px 28px 2px #{$elevation-shadow},
  19: 0 19px 29px 2px #{$elevation-shadow},
  20: 0 20px 31px 3px #{$elevation-shadow},
  21: 0 21px 33px 3px #{$elevation-shadow},
  22: 0 22px 35px 3px #{$elevation-shadow},
  23: 0 23px 36px 3px #{$elevation-shadow},
  24: 0 24px 38px 3px #{$elevation-shadow}
) !default;

$box-shadow-sm: 0 .125rem .25rem rgba($black, .075) !default;
$box-shadow: 0 .5rem 1rem rgba($black, .15) !default;
$box-shadow-lg: 0 1rem 3rem rgba($black, .175) !default;

/** Opacity */
$opacity-map: (
  100: 1,
  75: .75,
  50: .5,
  25: .25,
  0: 0
) !default;

$component-active-color: $white !default;
$component-active-bg: theme-color("primary") !default;

$caret-width: .3em !default;
$caret-vertical-align: $caret-width * .85 !default;
$caret-spacing: $caret-width * .85 !default;

$transition-base: all .2s ease-in-out !default;
$transition-fade: opacity .15s linear !default;
$transition-collapse: height .35s ease !default;

$embed-responsive-aspect-ratios: () !default;
$embed-responsive-aspect-ratios: join(
      (
          (21 9),
          (16 9),
          (4 3),
          (1 1),
      ),
    $embed-responsive-aspect-ratios
);

/**
 * Typography
 * Font, line-height, and color for body text, headings, and more.
 */

/**
 * Type Definitions
 */
$font-family-sans-serif: 'Proxima Nova', sans-serif !default;
$font-family-serif: Georgia, Cambria, "Times New Roman", Times, serif !default;
$font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !default;



/**
 * Type Settings
 */
$font-family-base: $font-family-sans-serif !default;

$font-size-base: 1rem !default; // Assumes the browser default, typically `16px`
$font-size-lg: $font-size-base * 1.25 !default;
$font-size-sm: $font-size-base * .875 !default;

/** Font Weights: Numerical */

$font-weight-hairline: 100 !default;
$font-weight-thin: 200 !default;
$font-weight-light: 300 !default;
$font-weight-normal: 400 !default;
$font-weight-medium: 500 !default;
$font-weight-semi-bold: 600 !default;
$font-weight-bold: 700 !default;
$font-weight-extra-bold: 800 !default;
$font-weight-black: 900 !default;

/** Font Weights: Relative */
$font-weight-lighter: lighter !default;
$font-weight-bolder: bolder !default;

/** Font Weights: Words */
$font-weight-normal: $font-weight-normal !default;
$font-weight-bold: $font-weight-bold !default;

$font-weight-base: $font-weight-normal !default;
$line-height-base: 1.5 !default;

$h1-font-size: $font-size-base * 3 !default;
$h2-font-size: $font-size-base * 2.5 !default;
$h3-font-size: $font-size-base * 2 !default;
$h4-font-size: $font-size-base * 1.75 !default;
$h5-font-size: $font-size-base * 1.5 !default;
$h6-font-size: $font-size-base !default;

$headings-margin: 0 0 $spacer !default;
$headings-font-family: null !default;
$headings-font-weight: 500 !default;
$headings-line-height: 1.2 !default;
$headings-color: null !default;

$display1-size: 5rem !default;
$display2-size: 4rem !default;
$display3-size: 3.5rem !default;
$display4-size: 3rem !default;

$display1-weight: 300 !default;
$display2-weight: 300 !default;
$display3-weight: 300 !default;
$display4-weight: 300 !default;
$display-line-height: $headings-line-height !default;

/**
 * Paragraphs
 * Style p element.
 */

$paragraph-margin: 0 0 $spacer * 2 !default;

/** Letter Spacing */

$letter-spacing: (
  tighter: -0.05em,
  tight: -.025em,
  normal: 0,
  wide: .025em,
  wider: .05em,
  widest: .1em
) !default;

$lead-font-size: $font-size-base * 1.25 !default;
$lead-font-weight: 300 !default;

$small-font-size: 80% !default;

$text-muted: gray(500) !default;

$blockquote-small-color: gray(900) !default;
$blockquote-small-font-size: $small-font-size !default;
$blockquote-font-size: $font-size-base * 1.25 !default;

$hr-border-color: rgba($black, .1) !default;
$hr-border-width: $border-width !default;

$mark-padding: .2em !default;

$dt-font-weight: $font-weight-bold !default;

$kbd-box-shadow: inset 0 -.1rem 0 rgba($black, .25) !default;
$nested-kbd-font-weight: $font-weight-bold !default;

$list-inline-padding: .5rem !default;

$mark-bg: #fcf8e3 !default;

$hr-margin-y: $spacer !default;

/**
 * Code
 */

$code-font-size: 87.5% !default;
$code-color: map-get($palette-warn, 300) !default;

$kbd-padding-y: .2rem !default;
$kbd-padding-x: .4rem !default;
$kbd-font-size: $code-font-size !default;
$kbd-color: $white !default;
$kbd-bg: gray(900) !default;

$pre-color: gray(900) !default;
$pre-scrollable-max-height: 340px !default;


/**
 * Tables
 *  Customizes the `.table` component with basic values, each used across all table variations.
 */

$table-cell-padding: .75rem !default;
$table-cell-padding-sm: .3rem !default;

$table-color: $body-color !default;
$table-bg: null !default;
$table-accent-bg: rgba($black, .05) !default;
$table-hover-color: $table-color !default;
$table-hover-bg: rgba($black, .075) !default;
$table-active-bg: $table-hover-bg !default;

$table-border-width: $border-width !default;
$table-border-color: $border-color !default;

$table-head-bg: gray(900) !default;
$table-head-color: gray(900) !default;

$table-dark-color: $white !default;
$table-dark-bg: gray(800) !default;
$table-dark-accent-bg: rgba($white, .05) !default;
$table-dark-hover-color: $table-dark-color !default;
$table-dark-hover-bg: rgba($white, .075) !default;
$table-dark-border-color: lighten($table-dark-bg, 7.5%) !default;

$table-striped-order: odd !default;

$table-caption-color: $text-muted !default;

$table-bg-level: -9 !default;
$table-border-level: -6 !default;

/**
 * Z-index master list
 * Warning: Avoid customizing these values. They're used for a bird's eye view
 * of components dependent on the z-axis and are designed to all work together.
 */

$zindex-dropdown: 1000 !default;
$zindex-sticky: 1020 !default;
$zindex-fixed: 1030 !default;
$zindex-modal-backdrop: 1040 !default;
$zindex-modal: 1050 !default;
$zindex-popover: 1060 !default;
$zindex-tooltip: 1070 !default;


/**
 * Utilities
 */

$displays: none, inline, inline-block, block, flex, inline-flex, grid, inline-grid !default;
$overflows: auto, hidden, visible, scroll !default;
$positions: static, relative, absolute, fixed, sticky !default;
$user-selects: all, auto, text, none !default;
$cursors: auto, default, pointer, wait, text, move, not-allowed !default;
$flex-orders: (
  first: -9999,
  last: 999,
  none: 0,
  1: 1,
  2: 2,
  3: 3,
  4: 4,
  5: 5,
  6: 6,
  7: 7,
  8: 8,
  9: 9,
  10: 10,
  11: 11,
  12: 12
) !default;

/**
 * Printing
 */

$print-page-size: a4 !default;
$print-body-min-width: map-get($grid-breakpoints, 'lg') !default;


/**
 * Forms
 */

$label-margin: 0 0 ($spacer * 1.5) !default;


/**
 * Image thumbnails
 */

$thumbnail-padding: .25rem !default;
$thumbnail-bg: $body-bg !default;
$thumbnail-border-width: $border-width !default;
$thumbnail-border-color: gray(300) !default;
$thumbnail-border-radius: $border-radius !default;
$thumbnail-box-shadow: 0 1px 2px rgba($black, .075) !default;


/**
 * Figures
 */

$figure-caption-font-size: 90% !default;
$figure-caption-color: gray(600) !default;
$figure-margin: 0 0 ($spacer * 3) !default;

/**
 * Buttons
 */

$button-font-size: 14px;
$button-font-weight: $font-weight-medium;

/**
 * Backgrounds
 */
$bg-attachments: fixed, local, scroll !default;

$bg-sizes: auto, cover, contain !default;

$bg-static-color: transparent, white, black !default;

$bg-repeats: (
  repeat: repeat,
  no-repeat: no-repeat,
  repeat-x: repeat-x,
  repeat-y: repeat-y,
  repeat-round: repeat-round,
  repeat-space: repeat-space,
) !default;

$bg-positions: (
  left: left,
  left-bottom: left bottom,
  left-top: left top,
  right: right,
  right-bottom: right bottom,
  top: top,
  bottom: bottom,
  center: center,
) !default;


/**
 * ScrollBar
 */

$scrollbar-width: 8px;
$scrollbar-height: 8px;
$scrollbar-thumb-border-radius: 2px;

$scrollbar-track-color: transparent;
$scrollbar-thumb-color: map-get($palette-gray, 200);

$scrollbar-track-primary-color: transparent;
$scrollbar-thumb-primary-color: map-get($palette-primary, 200);

// Toggles
//
// Used in conjunction with global variables to enable certain theme features.

// Vendor
// stylelint-disable property-blacklist, scss/dollar-variable-default

// SCSS RFS mixin
//
// Automated font-resizing
//
// See https://github.com/twbs/rfs

// Configuration

// Base font size
$rfs-base-font-size: 1.25rem !default;
$rfs-font-size-unit: rem !default;

// Breakpoint at where font-size starts decreasing if screen width is smaller
$rfs-breakpoint: 1200px !default;
$rfs-breakpoint-unit: px !default;

// Resize font-size based on screen height and width
$rfs-two-dimensional: false !default;

// Factor of decrease
$rfs-factor: 10 !default;

@if type-of($rfs-factor) != "number" or $rfs-factor <= 1 {
  @error "`#{$rfs-factor}` is not a valid  $rfs-factor, it must be greater than 1.";
}

// Generate enable or disable classes. Possibilities: false, "enable" or "disable"
$rfs-class: false !default;

// 1 rem = $rfs-rem-value px
$rfs-rem-value: 16 !default;

// Safari iframe resize bug: https://github.com/twbs/rfs/issues/14
$rfs-safari-iframe-resize-bug-fix: false !default;

// Disable RFS by setting $enable-responsive-font-sizes to false
$enable-responsive-font-sizes: true !default;

// Cache $rfs-base-font-size unit
$rfs-base-font-size-unit: unit($rfs-base-font-size);

// Remove px-unit from $rfs-base-font-size for calculations
@if $rfs-base-font-size-unit == "px" {
  $rfs-base-font-size: $rfs-base-font-size / ($rfs-base-font-size * 0 + 1);
}
@else if $rfs-base-font-size-unit == "rem" {
  $rfs-base-font-size: $rfs-base-font-size / ($rfs-base-font-size * 0 + 1 / $rfs-rem-value);
}

// Cache $rfs-breakpoint unit to prevent multiple calls
$rfs-breakpoint-unit-cache: unit($rfs-breakpoint);

// Remove unit from $rfs-breakpoint for calculations
@if $rfs-breakpoint-unit-cache == "px" {
  $rfs-breakpoint: $rfs-breakpoint / ($rfs-breakpoint * 0 + 1);
}
@else if $rfs-breakpoint-unit-cache == "rem" or $rfs-breakpoint-unit-cache == "em" {
  $rfs-breakpoint: $rfs-breakpoint / ($rfs-breakpoint * 0 + 1 / $rfs-rem-value);
}

// Responsive font-size mixin
@mixin rfs($fs, $important: false) {
  // Cache $fs unit
  $fs-unit: if(type-of($fs) == "number", unit($fs), false);

  // Add !important suffix if needed
  $rfs-suffix: if($important, " !important", "");

  // If $fs isn't a number (like inherit) or $fs has a unit (not px or rem, like 1.5em) or $ is 0, just print the value
  @if not $fs-unit or $fs-unit != "" and $fs-unit != "px" and $fs-unit != "rem" or $fs == 0 {
    font-size: #{$fs}#{$rfs-suffix};
  }
  @else {
    // Variables for storing static and fluid rescaling
    $rfs-static: null;
    $rfs-fluid: null;

    // Remove px-unit from $fs for calculations
    @if $fs-unit == "px" {
      $fs: $fs / ($fs * 0 + 1);
    }
    @else if $fs-unit == "rem" {
      $fs: $fs / ($fs * 0 + 1 / $rfs-rem-value);
    }

    // Set default font-size
    @if $rfs-font-size-unit == rem {
      $rfs-static: #{$fs / $rfs-rem-value}rem#{$rfs-suffix};
    }
    @else if $rfs-font-size-unit == px {
      $rfs-static: #{$fs}px#{$rfs-suffix};
    }
    @else {
      @error "`#{$rfs-font-size-unit}` is not a valid unit for $rfs-font-size-unit. Use `px` or `rem`.";
    }

    // Only add media query if font-size is bigger as the minimum font-size
    // If $rfs-factor == 1, no rescaling will take place
    @if $fs > $rfs-base-font-size and $enable-responsive-font-sizes {
      $min-width: null;
      $variable-unit: null;

      // Calculate minimum font-size for given font-size
      $fs-min: $rfs-base-font-size + ($fs - $rfs-base-font-size) / $rfs-factor;

      // Calculate difference between given font-size and minimum font-size for given font-size
      $fs-diff: $fs - $fs-min;

      // Base font-size formatting
      // No need to check if the unit is valid, because we did that before
      $min-width: if($rfs-font-size-unit == rem, #{$fs-min / $rfs-rem-value}rem, #{$fs-min}px);

      // If two-dimensional, use smallest of screen width and height
      $variable-unit: if($rfs-two-dimensional, vmin, vw);

      // Calculate the variable width between 0 and $rfs-breakpoint
      $variable-width: #{$fs-diff * 100 / $rfs-breakpoint}#{$variable-unit};

      // Set the calculated font-size.
      $rfs-fluid: calc(#{$min-width} + #{$variable-width}) #{$rfs-suffix};
    }

    // Rendering
    @if $rfs-fluid == null {
      // Only render static font-size if no fluid font-size is available
      font-size: $rfs-static;
    }
    @else {
      $mq-value: null;

      // RFS breakpoint formatting
      @if $rfs-breakpoint-unit == em or $rfs-breakpoint-unit == rem {
        $mq-value: #{$rfs-breakpoint / $rfs-rem-value}#{$rfs-breakpoint-unit};
      }
      @else if $rfs-breakpoint-unit == px {
        $mq-value: #{$rfs-breakpoint}px;
      }
      @else {
        @error "`#{$rfs-breakpoint-unit}` is not a valid unit for $rfs-breakpoint-unit. Use `px`, `em` or `rem`.";
      }

      @if $rfs-class == "disable" {
        // Adding an extra class increases specificity,
        // which prevents the media query to override the font size
        &,
        .disable-responsive-font-size &,
        &.disable-responsive-font-size {
          font-size: $rfs-static;
        }
      }
      @else {
        font-size: $rfs-static;
      }

      @if $rfs-two-dimensional {
        @media (max-width: #{$mq-value}), (max-height: #{$mq-value}) {
          @if $rfs-class == "enable" {
            .enable-responsive-font-size &,
            &.enable-responsive-font-size {
              font-size: $rfs-fluid;
            }
          }
          @else {
            font-size: $rfs-fluid;
          }

          @if $rfs-safari-iframe-resize-bug-fix {
            // stylelint-disable-next-line length-zero-no-unit
            min-width: 0vw;
          }
        }
      }
      @else {
        @media (max-width: #{$mq-value}) {
          @if $rfs-class == "enable" {
            .enable-responsive-font-size &,
            &.enable-responsive-font-size {
              font-size: $rfs-fluid;
            }
          }
          @else {
            font-size: $rfs-fluid;
          }

          @if $rfs-safari-iframe-resize-bug-fix {
            // stylelint-disable-next-line length-zero-no-unit
            min-width: 0vw;
          }
        }
      }
    }
  }
}

// The font-size & responsive-font-size mixin uses RFS to rescale font sizes
@mixin font-size($fs, $important: false) {
  @include rfs($fs, $important);
}

@mixin responsive-font-size($fs, $important: false) {
  @include rfs($fs, $important);
}


// Deprecate
// Deprecate mixin
//
// This mixin can be used to deprecate mixins or functions.
// `$enable-deprecation-messages` is a global variable, `$ignore-warning` is a variable that can be passed to
// some deprecated mixins to suppress the warning (for example if the mixin is still be used in the current version of Bootstrap)
@mixin deprecate($name, $deprecate-version, $remove-version, $ignore-warning: false) {
  @if ($enable-deprecation-messages != false and $ignore-warning != true) {
    @warn "#{$name} has been deprecated as of #{$deprecate-version}. It will be removed entirely in #{$remove-version}.";
  }
}


// Utilities
// Breakpoint viewport sizes and media queries.
//
// Breakpoints are defined as a map of (name: minimum width), order from small to large:
//
//    (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px)
//
// The map defined in the `$grid-breakpoints` global variable is used as the `$breakpoints` argument by default.

// Name of the next breakpoint, or null for the last breakpoint.
//
//    >> breakpoint-next(sm)
//    md
//    >> breakpoint-next(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
//    md
//    >> breakpoint-next(sm, $breakpoint-names: (xs sm md lg xl))
//    md
@function breakpoint-next($name, $breakpoints: $grid-breakpoints, $breakpoint-names: map-keys($breakpoints)) {
  $n: index($breakpoint-names, $name);
  @return if($n != null and $n < length($breakpoint-names), nth($breakpoint-names, $n + 1), null);
}

// Minimum breakpoint width. Null for the smallest (first) breakpoint.
//
//    >> breakpoint-min(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
//    576px
@function breakpoint-min($name, $breakpoints: $grid-breakpoints) {
  $min: map-get($breakpoints, $name);
  @return if($min != 0, $min, null);
}

// Maximum breakpoint width. Null for the largest (last) breakpoint.
// The maximum value is calculated as the minimum of the next one less 0.02px
// to work around the limitations of `min-` and `max-` prefixes and viewports with fractional widths.
// See https://www.w3.org/TR/mediaqueries-4/#mq-min-max
// Uses 0.02px rather than 0.01px to work around a current rounding bug in Safari.
// See https://bugs.webkit.org/show_bug.cgi?id=178261
//
//    >> breakpoint-max(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
//    767.98px
@function breakpoint-max($name, $breakpoints: $grid-breakpoints) {
  $next: breakpoint-next($name, $breakpoints);
  @return if($next, breakpoint-min($next, $breakpoints) - .02, null);
}

// Returns a blank string if smallest breakpoint, otherwise returns the name with a dash in front.
// Useful for making responsive utilities.
//
//    >> breakpoint-infix(xs, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
//    ""  (Returns a blank string)
//    >> breakpoint-infix(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
//    "-sm"
@function breakpoint-infix($name, $breakpoints: $grid-breakpoints) {
  @return if(breakpoint-min($name, $breakpoints) == null, "", "-#{$name}");
}

// Media of at least the minimum breakpoint width. No query for the smallest breakpoint.
// Makes the @content apply to the given breakpoint and wider.
@mixin media-breakpoint-up($name, $breakpoints: $grid-breakpoints) {
  $min: breakpoint-min($name, $breakpoints);
  @if $min {
    @media (min-width: $min) {
      @content;
    }
  } @else {
    @content;
  }
}

// Media of at most the maximum breakpoint width. No query for the largest breakpoint.
// Makes the @content apply to the given breakpoint and narrower.
@mixin media-breakpoint-down($name, $breakpoints: $grid-breakpoints) {
  $max: breakpoint-max($name, $breakpoints);
  @if $max {
    @media (max-width: $max) {
      @content;
    }
  } @else {
    @content;
  }
}

// Media that spans multiple breakpoint widths.
// Makes the @content apply between the min and max breakpoints
@mixin media-breakpoint-between($lower, $upper, $breakpoints: $grid-breakpoints) {
  $min: breakpoint-min($lower, $breakpoints);
  $max: breakpoint-max($upper, $breakpoints);

  @if $min != null and $max != null {
    @media (min-width: $min) and (max-width: $max) {
      @content;
    }
  } @else if $max == null {
    @include media-breakpoint-up($lower, $breakpoints) {
      @content;
    }
  } @else if $min == null {
    @include media-breakpoint-down($upper, $breakpoints) {
      @content;
    }
  }
}

// Media between the breakpoint's minimum and maximum widths.
// No minimum for the smallest breakpoint, and no maximum for the largest one.
// Makes the @content apply only to the given breakpoint, not viewports any wider or narrower.
@mixin media-breakpoint-only($name, $breakpoints: $grid-breakpoints) {
  $min: breakpoint-min($name, $breakpoints);
  $max: breakpoint-max($name, $breakpoints);

  @if $min != null and $max != null {
    @media (min-width: $min) and (max-width: $max) {
      @content;
    }
  } @else if $max == null {
    @include media-breakpoint-up($name, $breakpoints) {
      @content;
    }
  } @else if $min == null {
    @include media-breakpoint-down($name, $breakpoints) {
      @content;
    }
  }
}

// Hover mixin and `$enable-hover-media-query` are deprecated.
//
// Originally added during our alphas and maintained during betas, this mixin was
// designed to prevent `:hover` stickiness on iOS-an issue where hover styles
// would persist after initial touch.
//
// For backward compatibility, we've kept these mixins and updated them to
// always return their regular pseudo-classes instead of a shimmed media query.
//
// Issue: https://github.com/twbs/bootstrap/issues/25195

@mixin hover() {
  &:hover { @content; }
}

@mixin hover-focus() {
  &:hover,
  &:focus {
    @content;
  }
}

@mixin plain-hover-focus() {
  &,
  &:hover,
  &:focus {
    @content;
  }
}

@mixin hover-focus-active() {
  &:hover,
  &:focus,
  &:active {
    @content;
  }
}

// Image Mixins
// - Responsive image
// - Retina image


// Responsive image
//
// Keep images from scaling beyond the width of their parents.

@mixin img-fluid() {
  // Part 1: Set a maximum relative to the parent
  max-width: 100%;
  // Part 2: Override the height to auto, otherwise images will be stretched
  // when setting a width and height attribute on the img element.
  height: auto;
}


// Retina image
//
// Short retina mixin for setting background-image and -size.

@mixin img-retina($file-1x, $file-2x, $width-1x, $height-1x) {
  background-image: url($file-1x);

  // Autoprefixer takes care of adding -webkit-min-device-pixel-ratio and -o-min-device-pixel-ratio,
  // but doesn't convert dppx=>dpi.
  // There's no such thing as unprefixed min-device-pixel-ratio since it's nonstandard.
  // Compatibility info: https://caniuse.com/#feat=css-media-resolution
  @media only screen and (min-resolution: 192dpi), // IE9-11 don't support dppx
    only screen and (min-resolution: 2dppx) { // Standardized
    background-image: url($file-2x);
    background-size: $width-1x $height-1x;
  }
  @include deprecate("`img-retina()`", "v4.3.0", "v5");
}

@mixin scroll-bar ($track-color, $thumb-color) {
  &::-webkit-scrollbar {
    width: $scrollbar-width;
    height: $scrollbar-height;
  }

  &::-webkit-scrollbar-track {
    background: $track-color !important;
  }

  &::-webkit-scrollbar-thumb {
    background-color: $thumb-color;
    border-radius: $scrollbar-thumb-border-radius;
  }

  &.hover-display {
    &::-webkit-scrollbar-thumb {
      visibility: hidden;
      transition: visibility 0.3s;
      -webkit-transition: visibility 0.3s;
    }

    &:hover {
      &::-webkit-scrollbar-thumb {
        visibility: visible;
      }
    }
  }
}


// Resize anything

@mixin resizable($direction) {
  overflow: auto; // Per CSS3 UI, `resize` only applies when `overflow` isn't `visible`
  resize: $direction; // Options: horizontal, vertical, both
}

// Only display content to screen readers
//
// See: https://a11yproject.com/posts/how-to-hide-content/
// See: https://hugogiraudel.com/2016/10/13/css-hide-and-seek/

@mixin sr-only() {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px; // Fix for https://github.com/twbs/bootstrap/issues/25686
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

// Use in conjunction with .sr-only to only display content when it's focused.
//
// Useful for "Skip to main content" links; see https://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G1
//
// Credit: HTML5 Boilerplate

@mixin sr-only-focusable() {
  &:active,
  &:focus {
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
    clip: auto;
    white-space: normal;
  }
}

// Sizing shortcuts

@mixin size($width, $height: $width) {
  width: $width;
  height: $height;
  @include deprecate("`size()`", "v4.3.0", "v5");
}

@mixin reset-text() {
  font-family: $font-family-base;
  // We deliberately do NOT reset font-size or word-wrap.
  font-style: normal;
  font-weight: $font-weight-normal;
  line-height: $line-height-base;
  text-align: left; // Fallback for where `start` is not supported
  text-align: start;
  text-decoration: none;
  text-shadow: none;
  text-transform: none;
  letter-spacing: normal;
  word-break: normal;
  word-spacing: normal;
  white-space: normal;
  line-break: auto;
}

// stylelint-disable declaration-no-important

// Typography

@mixin text-emphasis-variant($parent, $color, $ignore-warning: false) {
  #{$parent} {
    color: $color !important;
  }
  @if $emphasized-link-hover-darken-percentage != 0 {
    a#{$parent} {
      @include hover-focus() {
        color: darken($color, $emphasized-link-hover-darken-percentage) !important;
      }
    }
  }
  @include deprecate("`text-emphasis-variant()`", "v4.4.0", "v5", $ignore-warning);
}

// CSS image replacement
@mixin text-hide($ignore-warning: false) {
  // stylelint-disable-next-line font-family-no-missing-generic-family-keyword
  font: 0/0 a;
  color: transparent;
  text-shadow: none;
  background-color: transparent;
  border: 0;

  @include deprecate("`text-hide()`", "v4.1.0", "v5", $ignore-warning);
}

// Text truncate
// Requires inline-block or block for proper styling

@mixin text-truncate() {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

// stylelint-disable declaration-no-important

// Visibility

@mixin invisible($visibility) {
  visibility: $visibility !important;
  @include deprecate("`invisible()`", "v4.3.0", "v5");
}


// Components

@mixin caret-down() {
  border-top: $caret-width solid;
  border-right: $caret-width solid transparent;
  border-bottom: 0;
  border-left: $caret-width solid transparent;
}

@mixin caret-up() {
  border-top: 0;
  border-right: $caret-width solid transparent;
  border-bottom: $caret-width solid;
  border-left: $caret-width solid transparent;
}

@mixin caret-right() {
  border-top: $caret-width solid transparent;
  border-right: 0;
  border-bottom: $caret-width solid transparent;
  border-left: $caret-width solid;
}

@mixin caret-left() {
  border-top: $caret-width solid transparent;
  border-right: $caret-width solid;
  border-bottom: $caret-width solid transparent;
}

@mixin caret($direction: down) {
  @if $enable-caret {
    &::after {
      display: inline-block;
      margin-left: $caret-spacing;
      vertical-align: $caret-vertical-align;
      content: "";
      @if $direction == down {
        @include caret-down();
      } @else if $direction == up {
        @include caret-up();
      } @else if $direction == right {
        @include caret-right();
      }
    }

    @if $direction == left {
      &::after {
        display: none;
      }

      &::before {
        display: inline-block;
        margin-right: $caret-spacing;
        vertical-align: $caret-vertical-align;
        content: "";
        @include caret-left();
      }
    }

    &:empty::after {
      margin-left: 0;
    }
  }
}

// Tables

@mixin table-row-variant($state, $background, $border: null) {
  // Exact selectors below required to override `.table-striped` and prevent
  // inheritance to nested tables.
  .table-#{$state} {
    &,
    > th,
    > td {
      background-color: $background;
    }

    @if $border != null {
      th,
      td,
      thead th,
      tbody + tbody {
        border-color: $border;
      }
    }
  }

  // Hover states for `.table-hover`
  // Note: this is not available for cells or rows within `thead` or `tfoot`.
  .table-hover {
    $hover-background: darken($background, 5%);

    .table-#{$state} {
      @include hover() {
        background-color: $hover-background;

        > td,
        > th {
          background-color: $hover-background;
        }
      }
    }
  }
}


// Skins
// stylelint-disable declaration-no-important

// Contextual backgrounds

@mixin bg-variant($parent, $color, $ignore-warning: false) {
  #{$parent} {
    background-color: $color !important;
  }
  a#{$parent},
  button#{$parent} {
    @include hover-focus() {
      background-color: darken($color, 10%) !important;
    }
  }
  @include deprecate("The `bg-variant` mixin", "v4.4.0", "v5", $ignore-warning);
}

@mixin bg-gradient-variant($parent, $color, $ignore-warning: false) {
  #{$parent} {
    background: $color linear-gradient(180deg, mix($body-bg, $color, 15%), $color) repeat-x !important;
  }
  @include deprecate("The `bg-gradient-variant` mixin", "v4.5.0", "v5", $ignore-warning);
}

/**
 * Color Mixins
 */
@function primary($key: 500) {
  @return map-get($palette-primary, $key);
}

@function secondary($key: 500) {
  @return map-get($palette-secondary, $key);
}

@function warn($key: 500) {
  @return map-get($palette-warn, $key);
}

@function gray($key: 500) {
  @return map-get($palette-gray, $key);
}

// stylelint-disable property-blacklist
// Single side border-radius

// Helper function to replace negative values with 0
@function valid-radius($radius) {
  $return: ();
  @each $value in $radius {
    @if type-of($value) == number {
      $return: append($return, max($value, 0));
    } @else {
      $return: append($return, $value);
    }
  }
  @return $return;
}

@mixin border-radius($radius: $border-radius, $fallback-border-radius: false) {
  @if $enable-rounded {
    border-radius: valid-radius($radius);
  }
  @else if $fallback-border-radius != false {
    border-radius: $fallback-border-radius;
  }
}

@mixin border-top-radius($radius) {
  @if $enable-rounded {
    border-top-left-radius: valid-radius($radius);
    border-top-right-radius: valid-radius($radius);
  }
}

@mixin border-right-radius($radius) {
  @if $enable-rounded {
    border-top-right-radius: valid-radius($radius);
    border-bottom-right-radius: valid-radius($radius);
  }
}

@mixin border-bottom-radius($radius) {
  @if $enable-rounded {
    border-bottom-right-radius: valid-radius($radius);
    border-bottom-left-radius: valid-radius($radius);
  }
}

@mixin border-left-radius($radius) {
  @if $enable-rounded {
    border-top-left-radius: valid-radius($radius);
    border-bottom-left-radius: valid-radius($radius);
  }
}

@mixin border-top-left-radius($radius) {
  @if $enable-rounded {
    border-top-left-radius: valid-radius($radius);
  }
}

@mixin border-top-right-radius($radius) {
  @if $enable-rounded {
    border-top-right-radius: valid-radius($radius);
  }
}

@mixin border-bottom-right-radius($radius) {
  @if $enable-rounded {
    border-bottom-right-radius: valid-radius($radius);
  }
}

@mixin border-bottom-left-radius($radius) {
  @if $enable-rounded {
    border-bottom-left-radius: valid-radius($radius);
  }
}

@mixin box-shadow($shadow...) {
  @if $enable-shadows {
    $result: ();

    @if (length($shadow) == 1) {
      // We can pass `@include box-shadow(none);`
      $result: $shadow;
    } @else {
      // Filter to avoid invalid properties for example `box-shadow: none, 1px 1px black;`
      @for $i from 1 through length($shadow) {
        @if nth($shadow, $i) != "none" {
          $result: append($result, nth($shadow, $i), "comma");
        }
      }
    }
    @if (length($result) > 0) {
      box-shadow: $result;
    }
  }
}

// Gradients

@mixin gradient-bg($color) {
  @if $enable-gradients {
    background: $color linear-gradient(180deg, mix($body-bg, $color, 15%), $color) repeat-x;
  } @else {
    background-color: $color;
  }
}

// Horizontal gradient, from left to right
//
// Creates two color stops, start and end, by specifying a color and position for each color stop.
@mixin gradient-x($start-color: gray(700), $end-color: gray(800), $start-percent: 0%, $end-percent: 100%) {
  background-image: linear-gradient(to right, $start-color $start-percent, $end-color $end-percent);
  background-repeat: repeat-x;
}

// Vertical gradient, from top to bottom
//
// Creates two color stops, start and end, by specifying a color and position for each color stop.
@mixin gradient-y($start-color: gray(700), $end-color: gray(800), $start-percent: 0%, $end-percent: 100%) {
  background-image: linear-gradient(to bottom, $start-color $start-percent, $end-color $end-percent);
  background-repeat: repeat-x;
}

@mixin gradient-directional($start-color: gray(700), $end-color: gray(800), $deg: 45deg) {
  background-image: linear-gradient($deg, $start-color, $end-color);
  background-repeat: repeat-x;
}
@mixin gradient-x-three-colors($start-color: $blue, $mid-color: $purple, $color-stop: 50%, $end-color: $red) {
  background-image: linear-gradient(to right, $start-color, $mid-color $color-stop, $end-color);
  background-repeat: no-repeat;
}
@mixin gradient-y-three-colors($start-color: $blue, $mid-color: $purple, $color-stop: 50%, $end-color: $red) {
  background-image: linear-gradient($start-color, $mid-color $color-stop, $end-color);
  background-repeat: no-repeat;
}
@mixin gradient-radial($inner-color: gray(700), $outer-color: gray(700)) {
  background-image: radial-gradient(circle, $inner-color, $outer-color);
  background-repeat: no-repeat;
}
@mixin gradient-striped($color: rgba($white, .15), $angle: 45deg) {
  background-image: linear-gradient($angle, $color 25%, transparent 25%, transparent 50%, $color 50%, $color 75%, transparent 75%, transparent);
}

// stylelint-disable property-blacklist
@mixin transition($transition...) {
  @if length($transition) == 0 {
    $transition: $transition-base;
  }

  @if length($transition) > 1 {
    @each $value in $transition {
      @if $value == null or $value == none {
        @warn "The keyword 'none' or 'null' must be used as a single argument.";
      }
    }
  }

  @if $enable-transitions {
    @if nth($transition, 1) != null {
      transition: $transition;
    }

    @if $enable-prefers-reduced-motion-media-query and nth($transition, 1) != null and nth($transition, 1) != none {
      @media (prefers-reduced-motion: reduce) {
        transition: none;
      }
    }
  }
}


// Layout
@mixin clearfix() {
  &::after {
    display: block;
    clear: both;
    content: "";
  }
}

// Framework grid generation
//
// Used only by Bootstrap to generate the correct number of grid classes given
// any value of `$grid-columns`.

@mixin make-grid-columns($columns: $grid-columns, $gutter: $grid-gutter-width, $breakpoints: $grid-breakpoints) {
  // Common properties for all breakpoints
  %grid-column {
    position: relative;
    width: 100%;
    padding-right: $gutter / 2;
    padding-left: $gutter / 2;
  }

  @each $breakpoint in map-keys($breakpoints) {
    $infix: breakpoint-infix($breakpoint, $breakpoints);

    @if $columns > 0 {
      // Allow columns to stretch full width below their breakpoints
      @for $i from 1 through $columns {
        .col#{$infix}-#{$i} {
          @extend %grid-column;
        }
      }
    }

    .col#{$infix},
    .col#{$infix}-auto {
      @extend %grid-column;
    }

    @include media-breakpoint-up($breakpoint, $breakpoints) {
      // Provide basic `.col-{bp}` classes for equal-width flexbox columns
      .col#{$infix} {
        flex-basis: 0;
        flex-grow: 1;
        min-width: 0; // See https://github.com/twbs/bootstrap/issues/25410
        max-width: 100%;
      }

      @if $grid-row-columns > 0 {
        @for $i from 1 through $grid-row-columns {
          .row-cols#{$infix}-#{$i} {
            @include row-cols($i);
          }
        }
      }

      .col#{$infix}-auto {
        @include make-col-auto();
      }

      @if $columns > 0 {
        @for $i from 1 through $columns {
          .col#{$infix}-#{$i} {
            @include make-col($i, $columns);
          }
        }
      }

      .order#{$infix}-first { order: -1; }

      .order#{$infix}-last { order: $columns + 1; }

      @for $i from 0 through $columns {
        .order#{$infix}-#{$i} { order: $i; }
      }

      @if $columns > 0 {
        // `$columns - 1` because offsetting by the width of an entire row isn't possible
        @for $i from 0 through ($columns - 1) {
          @if not ($infix == "" and $i == 0) { // Avoid emitting useless .offset-0
            .offset#{$infix}-#{$i} {
              @include make-col-offset($i, $columns);
            }
          }
        }
      }
    }
  }
}

/// Grid system
//
// Generate semantic grid columns with these mixins.

@mixin make-container($gutter: $grid-gutter-width) {
  width: 100%;
  padding-right: $gutter / 2;
  padding-left: $gutter / 2;
  margin-right: auto;
  margin-left: auto;
}


// For each breakpoint, define the maximum width of the container in a media query
@mixin make-container-max-widths($max-widths: $container-max-widths, $breakpoints: $grid-breakpoints) {
  @each $breakpoint, $container-max-width in $max-widths {
    @include media-breakpoint-up($breakpoint, $breakpoints) {
      max-width: $container-max-width;
    }
  }
}

@mixin make-row($gutter: $grid-gutter-width) {
  display: flex;
  flex-wrap: wrap;
  margin-right: -$gutter / 2;
  margin-left: -$gutter / 2;
}

@mixin make-col-ready($gutter: $grid-gutter-width) {
  position: relative;
  // Prevent columns from becoming too narrow when at smaller grid tiers by
  // always setting `width: 100%;`. This works because we use `flex` values
  // later on to override this initial width.
  width: 100%;
  padding-right: $gutter / 2;
  padding-left: $gutter / 2;
}

@mixin make-col($size, $columns: $grid-columns) {
  flex: 0 0 percentage($size / $columns);
  // Add a `max-width` to ensure content within each column does not blow out
  // the width of the column. Applies to IE10+ and Firefox. Chrome and Safari
  // do not appear to require this.
  max-width: percentage($size / $columns);
}

@mixin make-col-auto() {
  flex: 0 0 auto;
  width: auto;
  max-width: 100%; // Reset earlier grid tiers
}

@mixin make-col-offset($size, $columns: $grid-columns) {
  $num: $size / $columns;
  margin-left: if($num == 0, 0, percentage($num));
}

// Row columns
//
// Specify on a parent element(e.g., .row) to force immediate children into NN
// numberof columns. Supports wrapping to new lines, but does not do a Masonry
// style grid.
@mixin row-cols($count) {
  & > * {
    flex: 0 0 100% / $count;
    max-width: 100% / $count;
  }
}

// stylelint-disable declaration-no-important

@mixin float-left() {
  float: left !important;
  @include deprecate("The `float-left` mixin", "v4.3.0", "v5");
}
@mixin float-right() {
  float: right !important;
  @include deprecate("The `float-right` mixin", "v4.3.0", "v5");
}
@mixin float-none() {
  float: none !important;
  @include deprecate("The `float-none` mixin", "v4.3.0", "v5");
}

// Lists

// Unstyled keeps list items block level, just removes default browser padding and list-style
@mixin list-unstyled() {
  padding-left: 0;
  list-style: none;
}


@mixin make-square($length) {
  width: $length;
  height: $length;
}




// Do not forget to update getting-started/theming.md!
:root {
  // Custom variable values only support SassScript inside `#{}`.
  @each $color, $value in $colors {
    --#{$color}: #{$value};
  }

  @each $color, $value in $theme-colors {
    --#{$color}: #{$value};
  }

  @each $bp, $value in $grid-breakpoints {
    --breakpoint-#{$bp}: #{$value};
  }

  /**
   * Use `inspect` for lists so that quoted items keep the quotes.
   * See https://github.com/sass/sass/issues/2383#issuecomment-336349172
   */

  --font-family-sans-serif: #{inspect($font-family-sans-serif)};
  --font-family-serif: #{inspect($font-family-serif)};
  --font-family-monospace: #{inspect($font-family-monospace)};
}

/**
 * Newell Reboot
 * Normalization of HTML elements, manually forked from Normalize.css to remove
 * styles targeting irrelevant browsers while applying new styles.
 * Normalize is licensed MIT. https://github.com/necolas/normalize.css
 */


// Document
//
// 1. Change from `box-sizing: content-box` so that `width` is not affected by `padding` or `border`.
// 2. Change the default font family in all browsers.
// 3. Correct the line height in all browsers.
// 4. Prevent adjustments of font size after orientation changes in IE on Windows Phone and in iOS.
// 5. Change the default tap highlight to be completely transparent in iOS.

*,
*::before,
*::after {
  box-sizing: border-box; // 1
}

html {
  font-family: sans-serif; // 2
  line-height: 1.15; // 3
  -webkit-text-size-adjust: 100%; // 4
  -webkit-tap-highlight-color: rgba($black, 0); // 5
}

/**
 * Shim for "new" HTML5 structural elements to display correctly (IE10, older browsers)
 * TODO: remove in v2
 */

article, aside, figcaption, figure, footer, header, hgroup, main, nav, section {
  display: block;
}

// Body
//
// 1. Remove the margin in all browsers.
// 2. As a best practice, apply a default `background-color`.
// 3. Set an explicit initial text-align value so that we can later use
//    the `inherit` value on things like `<th>` elements.

body {
  margin: 0; // 1
  font-family: $font-family-base;
  @include font-size($font-size-base);
  font-weight: $font-weight-base;
  line-height: $line-height-base;
  color: $body-color;
  text-align: left; // 3
  background-color: $body-bg; // 2
}

// Future-proof rule: in browsers that support :focus-visible, suppress the focus outline
// on elements that programmatically receive focus but wouldn't normally show a visible
// focus outline. In general, this would mean that the outline is only applied if the
// interaction that led to the element receiving programmatic focus was a keyboard interaction,
// or the browser has somehow determined that the user is primarily a keyboard user and/or
// wants focus outlines to always be presented.
//
// See https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-visible
// and https://developer.paciellogroup.com/blog/2018/03/focus-visible-and-backwards-compatibility/
[tabindex="-1"]:focus:not(:focus-visible) {
  outline: 0 !important;
}


// Content grouping
//
// 1. Add the correct box sizing in Firefox.
// 2. Show the overflow in Edge and IE.

hr {
  box-sizing: content-box; // 1
  height: 0; // 1
  overflow: visible; // 2
}


//
// Typography
//

// Remove top margins from headings
//
// By default, `<h1>`-`<h6>` all receive top and bottom margins. We nuke the top
// margin for easier control within type scales as it avoids margin collapsing.
// stylelint-disable-next-line selector-list-comma-newline-after
h1, h2, h3, h4, h5, h6 {
  margin: $headings-margin;
}

// Reset margins on paragraphs
//
// Similarly, the top margin on `<p>`s get reset. However, we also reset the
// bottom margin to use `rem` units instead of `em`.
p {
  margin: $paragraph-margin;
}

// Abbreviations
//
// 1. Duplicate behavior to the data-* attribute for our tooltip plugin
// 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
// 3. Add explicit cursor to indicate changed behavior.
// 4. Remove the bottom border in Firefox 39-.
// 5. Prevent the text-decoration to be skipped.

abbr[title],
abbr[data-original-title] { // 1
  text-decoration: underline; // 2
  text-decoration: underline dotted; // 2
  cursor: help; // 3
  border-bottom: 0; // 4
  text-decoration-skip-ink: none; // 5
}

address {
  margin-bottom: 1rem;
  font-style: normal;
  line-height: inherit;
}

ol,
ul,
dl {
  margin-top: 0;
  margin-bottom: 1rem;
}

ol ol,
ul ul,
ol ul,
ul ol {
  margin-bottom: 0;
}

dt {
  font-weight: $dt-font-weight;
}

dd {
  margin-bottom: .5rem;
  margin-left: 0; // Undo browser default
}

blockquote {
  margin: 0 0 1rem;
}

b,
strong {
  font-weight: $font-weight-bolder; // Add the correct font weight in Chrome, Edge, and Safari
}

small {
  @include font-size(80%); // Add the correct font size in all browsers
}

//
// Prevent `sub` and `sup` elements from affecting the line height in
// all browsers.
//

sub,
sup {
  position: relative;
  @include font-size(75%);
  line-height: 0;
  vertical-align: baseline;
}

sub { bottom: -.25em; }
sup { top: -.5em; }


//
// Links
//

a {
  color: $link-color;
  text-decoration: $link-decoration;
  background-color: transparent; // Remove the gray background on active links in IE 10.

  @include hover() {
    color: $link-hover-color;
    text-decoration: $link-hover-decoration;
  }
}

// And undo these styles for placeholder links/named anchors (without href).
// It would be more straightforward to just use a[href] in previous block, but that
// causes specificity issues in many other styles that are too complex to fix.
// See https://github.com/twbs/bootstrap/issues/19402

a:not([href]) {
  color: inherit;
  text-decoration: none;

  @include hover() {
    color: inherit;
    text-decoration: none;
  }
}


//
// Code
//

pre,
code,
kbd,
samp {
  font-family: $font-family-monospace;
  @include font-size(1em); // Correct the odd `em` font sizing in all browsers.
}

pre {
  // Remove browser default top margin
  margin-top: 0;
  // Reset browser default of `1em` to use `rem`s
  margin-bottom: 1rem;
  // Don't allow content to break outside
  overflow: auto;
  // Disable auto-hiding scrollbar in IE & legacy Edge to avoid overlap,
  // making it impossible to interact with the content
  -ms-overflow-style: scrollbar;
}


//
// Figures
//

figure {
  // Apply a consistent margin strategy (matches our type styles).
  margin: $figure-margin;
}


//
// Images and content
//

img {
  vertical-align: middle;
  border-style: none; // Remove the border on images inside links in IE 10-.
}

svg {
  // Workaround for the SVG overflow bug in IE10/11 is still required.
  // See https://github.com/twbs/bootstrap/issues/26878
  overflow: hidden;
  vertical-align: middle;
}


//
// Tables
//

table {
  border-collapse: collapse; // Prevent double borders
}

caption {
  padding-top: $table-cell-padding;
  padding-bottom: $table-cell-padding;
  color: $table-caption-color;
  text-align: left;
  caption-side: bottom;
}

th {
  // Matches default `<td>` alignment by inheriting from the `<body>`, or the
  // closest parent with a set `text-align`.
  text-align: inherit;
}


//
// Forms
//

label {
  // Allow labels to use `margin` for spacing.
  display: inline-block;
  margin-bottom: $label-margin;
}

// Remove the default `border-radius` that macOS Chrome adds.
//
// Details at https://github.com/twbs/bootstrap/issues/24093
button {
  // stylelint-disable-next-line property-blacklist
  border-radius: $border-radius;
}

// Work around a Firefox/IE bug where the transparent `button` background
// results in a loss of the default `button` focus styles.
//
// Credit: https://github.com/suitcss/base/
button:focus {
  /*outline: 1px dotted;
  outline: 5px auto -webkit-focus-ring-color;*/

  // Disabling any outline
  outline: none;
}

input,
button,
select,
optgroup,
textarea {
  margin: 0; // Remove the margin in Firefox and Safari
  font-family: inherit;
  @include font-size(inherit);
  line-height: inherit;
}

button,
input {
  overflow: visible; // Show the overflow in Edge
}

button,
select {
  text-transform: none; // Remove the inheritance of text transform in Firefox
}

// Set the cursor for non-`<button>` buttons
//
// Details at https://github.com/twbs/bootstrap/pull/30562
[role="button"] {
  cursor: pointer;
}

// Remove the inheritance of word-wrap in Safari.
//
// Details at https://github.com/twbs/bootstrap/issues/24990
select {
  word-wrap: normal;
}


// 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
//    controls in Android 4.
// 2. Correct the inability to style clickable types in iOS and Safari.
button,
[type="button"], // 1
[type="reset"],
[type="submit"] {
  -webkit-appearance: button; // 2
}

// Opinionated: add "hand" cursor to non-disabled button elements.
@if $enable-pointer-cursor-for-buttons {
  button,
  [type="button"],
  [type="reset"],
  [type="submit"] {
    &:not(:disabled) {
      cursor: pointer;
    }
  }
}

// Remove inner border and padding from Firefox, but don't restore the outline like Normalize.
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  padding: 0;
  border-style: none;
}

input[type="radio"],
input[type="checkbox"] {
  box-sizing: border-box; // 1. Add the correct box sizing in IE 10-
  padding: 0; // 2. Remove the padding in IE 10-
}


textarea {
  overflow: auto; // Remove the default vertical scrollbar in IE.
  // Textareas should really only resize vertically so they don't break their (horizontal) containers.
  resize: vertical;
}

fieldset {
  // Browsers set a default `min-width: min-content;` on fieldsets,
  // unlike e.g. `<div>`s, which have `min-width: 0;` by default.
  // So we reset that to ensure fieldsets behave more like a standard block element.
  // See https://github.com/twbs/bootstrap/issues/12359
  // and https://html.spec.whatwg.org/multipage/#the-fieldset-and-legend-elements
  min-width: 0;
  // Reset the default outline behavior of fieldsets so they don't affect page layout.
  padding: 0;
  margin: 0;
  border: 0;
}

// 1. Correct the text wrapping in Edge and IE.
// 2. Correct the color inheritance from `fieldset` elements in IE.
legend {
  display: block;
  width: 100%;
  max-width: 100%; // 1
  padding: 0;
  margin-bottom: .5rem;
  @include font-size(1.5rem);
  line-height: inherit;
  color: inherit; // 2
  white-space: normal; // 1
}

progress {
  vertical-align: baseline; // Add the correct vertical alignment in Chrome, Firefox, and Opera.
}

// Correct the cursor style of increment and decrement buttons in Chrome.
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
  height: auto;
}

[type="search"] {
  // This overrides the extra rounded corners on search inputs in iOS so that our
  // `.form-control` class can properly style them. Note that this cannot simply
  // be added to `.form-control` as it's not specific enough. For details, see
  // https://github.com/twbs/bootstrap/issues/11586.
  outline-offset: -2px; // 2. Correct the outline style in Safari.
  -webkit-appearance: none;
}

//
// Remove the inner padding in Chrome and Safari on macOS.
//

[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

//
// 1. Correct the inability to style clickable types in iOS and Safari.
// 2. Change font properties to `inherit` in Safari.
//

::-webkit-file-upload-button {
  font: inherit; // 2
  -webkit-appearance: button; // 1
}

//
// Correct element displays
//

output {
  display: inline-block;
}

summary {
  display: list-item; // Add the correct display in all browsers
  cursor: pointer;
}

template {
  display: none; // Add the correct display in IE
}

// Always hide an element with the `hidden` HTML attribute (from PureCSS).
// Needed for proper display in IE 10-.
[hidden] {
  display: none !important;
}

/**
 * Headings
 */

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  margin: $headings-margin;
  font-family: $headings-font-family;
  font-weight: $headings-font-weight;
  line-height: $headings-line-height;
  color: $headings-color;
}

h1, .h1 { @include font-size($h1-font-size); }
h2, .h2 { @include font-size($h2-font-size); }
h3, .h3 { @include font-size($h3-font-size); }
h4, .h4 { @include font-size($h4-font-size); }
h5, .h5 { @include font-size($h5-font-size); }
h6, .h6 { @include font-size($h6-font-size); }

.lead {
  @include font-size($lead-font-size);
  font-weight: $lead-font-weight;
}

/**
 * Displays
 */
.display-1 {
  @include font-size($display1-size);
  font-weight: $display1-weight;
  line-height: $display-line-height;
}
.display-2 {
  @include font-size($display2-size);
  font-weight: $display2-weight;
  line-height: $display-line-height;
}
.display-3 {
  @include font-size($display3-size);
  font-weight: $display3-weight;
  line-height: $display-line-height;
}
.display-4 {
  @include font-size($display4-size);
  font-weight: $display4-weight;
  line-height: $display-line-height;
}

/**
 * Horizontal rules
 */

hr {
  margin-top: $hr-margin-y;
  margin-bottom: $hr-margin-y;
  border: 0;
  border-top: $hr-border-width solid $hr-border-color;
}

/** Emphasis */

small, .small {
  @include font-size($small-font-size);
  font-weight: $font-weight-normal;
}

mark, .mark {
  padding: $mark-padding;
  background-color: $mark-bg;
}

/**
 * Misc
 */

/** Builds on `abbr` */
.initialism {
  @include font-size(90%);
  text-transform: uppercase;
}

/** Block Quotes */
.blockquote {
  margin-bottom: $spacer;
  @include font-size($blockquote-font-size);
}

.blockquote-footer {
  display: block;
  @include font-size($blockquote-small-font-size);
  color: $blockquote-small-color;

  &::before {
    content: "\2014\00A0"; // em dash, nbsp
  }
}

/**
 * Inline Code
 */
code {
  @include font-size($code-font-size);
  color: $code-color;
  word-wrap: break-word;

  /**
   * Streamline the style when inside anchors to avoid broken underline and more
   */
  a > & {
    color: inherit;
  }
}

/**
 * User input typically entered via keyboard
 */
kbd {
  padding: $kbd-padding-y $kbd-padding-x;
  @include font-size($kbd-font-size);
  color: $kbd-color;
  background-color: $kbd-bg;
  @include border-radius($border-radius-sm);
  @include box-shadow($kbd-box-shadow);

  kbd {
    padding: 0;
    @include font-size(100%);
    font-weight: $nested-kbd-font-weight;
    @include box-shadow(none);
  }
}

/**
 * Blocks of code
 */
pre {
  display: block;
  @include font-size($code-font-size);
  color: $pre-color;

  /**
   * Account for some code outputs that place code tags in pre tags
   */
  code {
    @include font-size(inherit);
    color: inherit;
    word-break: normal;
  }
}

/**
 * Enable scrollable blocks of code
 */
.pre-scrollable {
  max-height: $pre-scrollable-max-height;
  overflow-y: scroll;
}

/**
 * Responsive images (ensure images don't scale beyond their parents)
 * This is purposefully opt-in via an explicit class rather than being the default for all `<img>`s.
 * Previously tried the "images are responsive by default" approach,
 * and abandoned it because it breaks lots of third-party widgets (including Google Maps)
 * which weren't expecting the images within themselves to be involuntarily resized.
 */

.img-fluid {
  @include img-fluid();
}

/** Image thumbnails */
.img-thumbnail {
  padding: $thumbnail-padding;
  background-color: $thumbnail-bg;
  border: $thumbnail-border-width solid $thumbnail-border-color;
  @include border-radius($thumbnail-border-radius);
  @include box-shadow($thumbnail-box-shadow);

  // Keep them at most 100% wide
  @include img-fluid();
}

/**
 * Image Block
 * Ensures to capture Parent element
 */

.img-block {
  display: block;
  width: 100%;
}

/**
 * Figures
 * Ensures the caption's text aligns with the image.
 */

.figure {
  display: inline-block;
}

.figure-img {
  margin-bottom: $spacer / 2;
  line-height: 1;
}

.figure-caption {
  @include font-size($figure-caption-font-size);
  color: $figure-caption-color;
}

.scrollbar {
  @include scroll-bar($scrollbar-track-color, $scrollbar-thumb-color);
}

.scrollbar-primary {
  @include scroll-bar($scrollbar-track-primary-color, $scrollbar-thumb-primary-color);
}

.fade {
  @include transition($transition-fade);

  &:not(.show) {
    opacity: 0;
  }
}

.collapse {
  &:not(.show) {
    display: none;
  }
}

.collapsing {
  position: relative;
  height: 0;
  overflow: hidden;
  @include transition($transition-collapse);
}

/**
 * Container widths
 * Set the container width, and override it for fixed navbars in media queries.
 */

@if $enable-grid-classes {
  /**
   * Single container class with breakpoint max-widths
   */
  .container {
    @include make-container();
    @include make-container-max-widths();
  }

  /**
   * 100% wide container at all breakpoints
   */
  .container-fluid {
    @include make-container();
  }

  /**
   * Responsive containers that are 100% wide until a breakpoint
   */
  @each $breakpoint, $container-max-width in $container-max-widths {
    .container-#{$breakpoint} {
      @extend .container-fluid;
    }

    @include media-breakpoint-up($breakpoint, $grid-breakpoints) {
      %responsive-container-#{$breakpoint} {
        max-width: $container-max-width;
      }

      /**
       * Extend each breakpoint which is smaller or equal to the current breakpoint
       */
      $extend-breakpoint: true;

      @each $name, $width in $grid-breakpoints {
        @if ($extend-breakpoint) {
          .container#{breakpoint-infix($name, $grid-breakpoints)} {
            @extend %responsive-container-#{$breakpoint};
          }

          /**
           * Once the current breakpoint is reached, stop extending
           */
          @if ($breakpoint == $name) {
            $extend-breakpoint: false;
          }
        }
      }
    }
  }
}

/**
 * Row
 * Rows contain your columns.
 */

@if $enable-grid-classes {
  .row {
    @include make-row();
  }

  /**
   * Remove the negative margin from default .row, then the horizontal padding
   * from all immediate children columns (to prevent runaway style inheritance).
   */

  .no-gutters {
    margin-right: 0;
    margin-left: 0;

    > .col,
    > [class*="col-"] {
      padding-right: 0;
      padding-left: 0;
    }
  }
}

/**
 * Columns
 * Common styles for small and large grid columns
 */

@if $enable-grid-classes {
  @include make-grid-columns();
}

/** Basic Table */

.table {
  width: 100%;
  margin-bottom: $spacer;
  color: $table-color;
  background-color: $table-bg; // Reset for nesting within parents with `background-color`.

  th,
  td {
    padding: $table-cell-padding;
    vertical-align: top;
    border-top: $table-border-width solid $table-border-color;
  }

  thead th {
    vertical-align: bottom;
    border-bottom: (2 * $table-border-width) solid $table-border-color;
  }

  tbody + tbody {
    border-top: (2 * $table-border-width) solid $table-border-color;
  }
}

/** Condensed table w/ half padding */

.table-sm {
  th,
  td {
    padding: $table-cell-padding-sm;
  }
}

/**
 * Border versions
 * Add or remove borders all around the table and between all the columns.
 */

.table-bordered {
  border: $table-border-width solid $table-border-color;

  th,
  td {
    border: $table-border-width solid $table-border-color;
  }

  thead {
    th,
    td {
      border-bottom-width: 2 * $table-border-width;
    }
  }
}

.table-borderless {
  th,
  td,
  thead th,
  tbody + tbody {
    border: 0;
  }
}

/**
 * Zebra-striping
 * Default zebra-stripe styles (alternating gray and transparent backgrounds)
 */

.table-striped {
  tbody tr:nth-of-type(#{$table-striped-order}) {
    background-color: $table-accent-bg;
  }
}

/**
 * Hover effect
 * Placed here since it has to come after the potential zebra striping
 */

.table-hover {
  tbody tr {
    @include hover() {
      color: $table-hover-color;
      background-color: $table-hover-bg;
    }
  }
}

/**
 * Table backgrounds
 * Exact selectors below required to override `.table-striped` and prevent
 * inheritance to nested tables.
 */

@each $color, $value in $theme-colors {
  @include table-row-variant($color, theme-color-level($color, $table-bg-level), theme-color-level($color, $table-border-level));
}

@include table-row-variant(active, $table-active-bg);

/**
 * Dark styles
 * Same table markup, but inverted color scheme: dark background and light text.
 */

.table {
  .thead-dark {
    th {
      color: $table-dark-color;
      background-color: $table-dark-bg;
      border-color: $table-dark-border-color;
    }
  }

  .thead-light {
    th {
      color: $table-head-color;
      background-color: $table-head-bg;
      border-color: $table-border-color;
    }
  }
}

.table-dark {
  color: $table-dark-color;
  background-color: $table-dark-bg;

  th,
  td,
  thead th {
    border-color: $table-dark-border-color;
  }

  &.table-bordered {
    border: 0;
  }

  &.table-striped {
    tbody tr:nth-of-type(#{$table-striped-order}) {
      background-color: $table-dark-accent-bg;
    }
  }

  &.table-hover {
    tbody tr {
      @include hover() {
        color: $table-dark-hover-color;
        background-color: $table-dark-hover-bg;
      }
    }
  }
}

/**
 * Responsive tables
 * Generate series of `.table-responsive-*` classes for configuring the screen
 * size of where your table will overflow.
 */

.table-responsive {
  @each $breakpoint in map-keys($grid-breakpoints) {
    $next: breakpoint-next($breakpoint, $grid-breakpoints);
    $infix: breakpoint-infix($next, $grid-breakpoints);

    &#{$infix} {
      @include media-breakpoint-down($breakpoint) {
        display: block;
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;

        // Prevent double border on horizontal scroll due to use of `display: block;`
        > .table-bordered {
          border: 0;
        }
      }
    }
  }
}


/**
 * Flex Table
 */

.flex-table {
  display: flex;
  flex-flow: column nowrap;

  .tr {
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-around;
    padding: 10px 20px;
    border-bottom: 1px solid #CCCCCC;
    border-radius: 4px;


    &.th {
      padding-top: 10px;
      padding-bottom: 10px;
      border-bottom-width: 2px;
      border-top: 1px solid #CCCCCC;

      & > span {
        font-weight: 800;
        text-transform: capitalize;
      }
    }

    & > span {
      flex: 1;
      word-break: break-all;
      display: flex;
      align-items: center;
    }

    .tr-col-2 {
      flex: 2;
    }

    .content-center {
      justify-content: center;
    }

    .content-end {
      justify-content: flex-end;
    }
  }

  &.flex-table-striped {
    .tr:nth-of-type(odd):not(.th) {
      background: #f4f4f4;
    }
  }

  &.flex-table-borderless {
    .tr:not(.th) { border-bottom: 0; }
  }

}


/** Table Layout */
.table-auto   { table-layout: auto !important; }
.table-fixed  { table-layout: fixed !important; }

/** Border Collapsed */
.table-border-collapse { border-collapse: collapse !important; }
.table-border-separate { border-collapse: separate !important; }

.media {
  display: flex;
  align-items: flex-start;
}

.media-body {
  flex: 1;
}

/**
 * Vertical Alignment
 */

@each $breakpoint in map-keys($grid-breakpoints) {
  @include media-breakpoint-up($breakpoint) {
    $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
    .align#{$infix}-baseline    { vertical-align: baseline !important; }
    .align#{$infix}-top         { vertical-align: top !important; }
    .align#{$infix}-middle      { vertical-align: middle !important; }
    .align#{$infix}-bottom      { vertical-align: bottom !important; }
    .align#{$infix}-text-bottom { vertical-align: text-bottom !important; }
    .align#{$infix}-text-top    { vertical-align: text-top !important; }
  }
}


@each $breakpoint in map-keys($grid-breakpoints) {
  @include media-breakpoint-up($breakpoint) {
    $infix: breakpoint-infix($breakpoint, $grid-breakpoints);

    /** Background-Color: Theme Colors **/
    @each $color, $value in $theme-colors {
      .bg#{$infix}-#{$color} {
        background-color: $value !important;
      }
    }

    /** Background-Color: Static **/
    @each $value in $bg-static-color {
      .bg#{$infix}-#{$value} {
        background-color: $value !important;
      }
    }

    // TODO: Background Palettes

    /* Background-Attachment */
    @each $value in $bg-attachments {
      .bg#{$infix}-#{$value} {
        background-attachment: $value !important;
      }
    }

    /* Background-Sizes */
    @each $value in $bg-sizes {
      .bg#{$infix}-#{$value} {
        background-size: $value !important;
      }
    }


    /* Background-Positions */
    @each $key, $value in $bg-positions {
      .bg#{$infix}-#{$key} {
        background-position: $value !important;
      }
    }

    /* Background-Repeat */
    @each $key, $value in $bg-repeats {
      .bg#{$infix}-#{$key} {
        background-repeat: $value !important;
      }
    }

    /** TODO: Background-Opacity */

  }
}

@each $breakpoint in map-keys($grid-breakpoints) {
  @include media-breakpoint-up($breakpoint) {
    $infix: breakpoint-infix($breakpoint, $grid-breakpoints);

    /** Border Colors */
    @each $color, $value in $border-colors {
      .border#{$infix}-#{$color} {
        border-color: $value !important;
      }
    }

    /**Borders */
    .border#{$infix}         { border: $border !important; }
    .border#{$infix}-top     { border-top: $border !important; }
    .border#{$infix}-right   { border-right: $border !important; }
    .border#{$infix}-bottom  { border-bottom: $border !important; }
    .border#{$infix}-left    { border-left: $border !important; }

    /** NULL - Borders */
    .border#{$infix}-none        { border: 0 !important; }
    .border#{$infix}-top-none    { border-top: 0 !important; }
    .border#{$infix}-right-none  { border-right: 0 !important; }
    .border#{$infix}-bottom-none { border-bottom: 0 !important; }
    .border#{$infix}-left-none   { border-left: 0 !important; }

    /** Border radius: Kerning */
    .rounded#{$infix}-sm    { border-radius: $border-radius-sm !important; }
    .rounded#{$infix}       { border-radius: $border-radius !important; }
    .rounded#{$infix}-lg    { border-radius: $border-radius-lg !important; }

    /** Border radius: Sides */
    .rounded#{$infix}-top {
      border-top-left-radius: $border-radius !important;
      border-top-right-radius: $border-radius !important;
    }

    .rounded#{$infix}-right {
      border-top-right-radius: $border-radius !important;
      border-bottom-right-radius: $border-radius !important;
    }

    .rounded#{$infix}-bottom {
      border-bottom-right-radius: $border-radius !important;
      border-bottom-left-radius: $border-radius !important;
    }

    .rounded#{$infix}-left {
      border-top-left-radius: $border-radius !important;
      border-bottom-left-radius: $border-radius !important;
    }

    /** Border radius: Styles */
    .rounded#{$infix}-circle    { border-radius: 50% !important; }
    .rounded#{$infix}-pill      { border-radius: $rounded-pill !important; }
    .rounded#{$infix}-none      { border-radius: 0 !important; }

    /** Border Styles */
    .border#{$infix}-solid	    { border-style: solid !important; }
    .border#{$infix}-dashed	    { border-style: dashed !important; }
    .border#{$infix}-dotted	    { border-style: dotted !important; }
    .border#{$infix}-double	    { border-style: double !important; }
    .border#{$infix}-style-none	{ border-style: none !important; }
  }
}

.clearfix {
  @include clearfix();
}

// stylelint-disable declaration-no-important

/**
 * Utilities for common 'display' values
 */

@each $breakpoint in map-keys($grid-breakpoints) {
  @include media-breakpoint-up($breakpoint) {
    $infix: breakpoint-infix($breakpoint, $grid-breakpoints);

    @each $value in $displays {
      .d#{$infix}-#{$value} { display: $value !important; }
    }
  }
}

/**
 * Utilities for toggling `display` in print
 */

@media print {
  @each $value in $displays {
    .d-print-#{$value} { display: $value !important; }
  }
}

@each $breakpoint in map-keys($grid-breakpoints) {
  @include media-breakpoint-up($breakpoint) {
    $infix: breakpoint-infix($breakpoint, $grid-breakpoints);

    @each $key, $value in $elevation-map {
      .elevation#{$infix}-#{$key} { box-shadow: $value !important; }
    }

  }
}


// .shadow-sm { box-shadow: $box-shadow-sm !important; }
// .shadow { box-shadow: $box-shadow !important; }
// .shadow-lg { box-shadow: $box-shadow-lg !important; }
// .shadow-none { box-shadow: none !important; }

// Credit: Nicolas Gallagher and SUIT CSS.

.embed-responsive {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  overflow: hidden;

  &::before {
    display: block;
    content: "";
  }

  .embed-responsive-item,
  iframe,
  embed,
  object,
  video {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
  }
}

@each $embed-responsive-aspect-ratio in $embed-responsive-aspect-ratios {
  $embed-responsive-aspect-ratio-x: nth($embed-responsive-aspect-ratio, 1);
  $embed-responsive-aspect-ratio-y: nth($embed-responsive-aspect-ratio, 2);

  .embed-responsive-#{$embed-responsive-aspect-ratio-x}by#{$embed-responsive-aspect-ratio-y} {
    &::before {
      padding-top: percentage($embed-responsive-aspect-ratio-y / $embed-responsive-aspect-ratio-x);
    }
  }
}

// stylelint-disable declaration-no-important

// Flex variation
//
// Custom styles for additional flex alignment options.

@each $breakpoint in map-keys($grid-breakpoints) {
  @include media-breakpoint-up($breakpoint) {
    $infix: breakpoint-infix($breakpoint, $grid-breakpoints);

    /** Direction */
    .flex#{$infix}-row            { flex-direction: row !important; }
    .flex#{$infix}-column         { flex-direction: column !important; }
    .flex#{$infix}-row-reverse    { flex-direction: row-reverse !important; }
    .flex#{$infix}-column-reverse { flex-direction: column-reverse !important; }

    /** Wrap */
    .flex#{$infix}-wrap         { flex-wrap: wrap !important; }
    .flex#{$infix}-nowrap       { flex-wrap: nowrap !important; }
    .flex#{$infix}-wrap-reverse { flex-wrap: wrap-reverse !important; }

    /** Align Items */
    .align-items#{$infix}-start    { align-items: flex-start !important; }
    .align-items#{$infix}-end      { align-items: flex-end !important; }
    .align-items#{$infix}-center   { align-items: center !important; }
    .align-items#{$infix}-baseline { align-items: baseline !important; }
    .align-items#{$infix}-stretch  { align-items: stretch !important; }

    /** Align Content */
    .align-content#{$infix}-start   { align-content: flex-start !important; }
    .align-content#{$infix}-end     { align-content: flex-end !important; }
    .align-content#{$infix}-center  { align-content: center !important; }
    .align-content#{$infix}-between { align-content: space-between !important; }
    .align-content#{$infix}-around  { align-content: space-around !important; }
    .align-content#{$infix}-stretch { align-content: stretch !important; }

    /** Align Self */
    .align-self#{$infix}-auto     { align-self: auto !important; }
    .align-self#{$infix}-start    { align-self: flex-start !important; }
    .align-self#{$infix}-end      { align-self: flex-end !important; }
    .align-self#{$infix}-center   { align-self: center !important; }
    .align-self#{$infix}-baseline { align-self: baseline !important; }
    .align-self#{$infix}-stretch  { align-self: stretch !important; }

    /** Justify Content */
    .justify-content#{$infix}-start   { justify-content: flex-start !important; }
    .justify-content#{$infix}-end     { justify-content: flex-end !important; }
    .justify-content#{$infix}-center  { justify-content: center !important; }
    .justify-content#{$infix}-between { justify-content: space-between !important; }
    .justify-content#{$infix}-around  { justify-content: space-around !important; }

    /** Flex */
    .flex#{$infix}-initial  { flex: 0 1 auto !important; }
    .flex#{$infix}-one      { flex: 1 1 0% !important; }
    .flex#{$infix}-auto     { flex: 1 1 auto !important; }
    .flex#{$infix}-none     { flex: none !important; }
    .flex#{$infix}-fill     { flex: 1 1 100% !important; }

    /** Flex Grow */
    .flex#{$infix}-grow-0       { flex-grow: 0 !important; }
    .flex#{$infix}-grow-1       { flex-grow: 1 !important; }


    /**Flex Shrink */
    .flex#{$infix}-shrink-0     { flex-shrink: 0 !important; }
    .flex#{$infix}-shrink-1     { flex-shrink: 1 !important; }

    /** Order */
    @each $key, $value in $flex-orders {
      .order#{$infix}-#{$key}   { order: $value !important; }
    }

  }
}

// stylelint-disable declaration-no-important

@each $breakpoint in map-keys($grid-breakpoints) {
  @include media-breakpoint-up($breakpoint) {
    $infix: breakpoint-infix($breakpoint, $grid-breakpoints);

    .float#{$infix}-left  { float: left !important; }
    .float#{$infix}-right { float: right !important; }
    .float#{$infix}-none  { float: none !important; }
  }
}

// stylelint-disable declaration-no-important
@each $breakpoint in map-keys($grid-breakpoints) {
  @include media-breakpoint-up($breakpoint) {
    $infix: breakpoint-infix($breakpoint, $grid-breakpoints);

    /** User Select */
    @each $value in $user-selects {
      .select#{$infix}-#{$value} { user-select: $value !important; }
    }

    /** Cursors */
    @each $value in $cursors {
      .cursor#{$infix}-#{$value} { cursor: $value !important; }
    }
  }
}

/** Appearance */
.appearance-none { appearance: none !important; }

/** Outline */
.outline-none { outline: 0 !important; }

/** Pointer Events */
.pointer-events-none { pointer-events: none !important; }
.pointer-events-auto { pointer-events: auto !important; }

// stylelint-disable declaration-no-important
@each $breakpoint in map-keys($grid-breakpoints) {
  @include media-breakpoint-up($breakpoint) {
    $infix: breakpoint-infix($breakpoint, $grid-breakpoints);

    @each $value in $overflows {
      .overflow#{$infix}-#{$value} { overflow: $value !important; }
      .overflow-x#{$infix}-#{$value} { overflow-x: $value !important; }
      .overflow-y#{$infix}-#{$value} { overflow-y: $value !important; }
    }

    .overflow#{$infix}-wrap-normal { overflow-wrap: normal !important; }
    .overflow#{$infix}-wrap-spaces { overflow-wrap: break-spaces !important; }
    .overflow#{$infix}-wrap-word { overflow-wrap: break-word !important; }

  }
}


@each $breakpoint in map-keys($grid-breakpoints) {
  @include media-breakpoint-up($breakpoint) {
    $infix: breakpoint-infix($breakpoint, $grid-breakpoints);

    /** Object Fit */
    .object#{$infix}-contain { object-fit: contain !important; }
    .object#{$infix}-cover { object-fit: cover !important; }
    .object#{$infix}-fill { object-fit: fill !important; }
    .object#{$infix}-none { object-fit: none !important; }
    .object#{$infix}-scale-down { object-fit: scale-down !important; }

    /** Object Position */
    .object#{$infix}-bottom { object-position: bottom !important; }
    .object#{$infix}-center { object-position: center !important; }
    .object#{$infix}-left { object-position: left !important; }
    .object#{$infix}-left-bottom { object-position: left bottom !important; }
    .object#{$infix}-left-top { object-position: left top !important; }
    .object#{$infix}-right { object-position: right !important; }
    .object#{$infix}-right-bottom { object-position: right bottom !important; }
    .object#{$infix}-right-top { object-position: right top !important; }
    .object#{$infix}-top { object-position: top !important; }

  }
}




@each $breakpoint in map-keys($grid-breakpoints) {
  @include media-breakpoint-up($breakpoint) {
    $infix: breakpoint-infix($breakpoint, $grid-breakpoints);

    @each $key, $value in $opacity-map {
      .opacity#{$infix}-#{$key} { box-shadow: $value !important; }
    }

  }
}

// stylelint-disable declaration-no-important

/** Values */
@each $breakpoint in map-keys($grid-breakpoints) {
  @include media-breakpoint-up($breakpoint) {
    $infix: breakpoint-infix($breakpoint, $grid-breakpoints);

    @each $position in $positions {
      .position#{$infix}-#{$position} { position: $position !important; }
    }
  }
}

/** Shorthands */

.fixed-top {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: $zindex-fixed;
}

.fixed-bottom {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: $zindex-fixed;
}

.sticky-top {
  @supports (position: sticky) {
    position: sticky;
    top: 0;
    z-index: $zindex-sticky;
  }
}

// stylelint-disable declaration-no-important
@each $breakpoint in map-keys($grid-breakpoints) {
  @include media-breakpoint-up($breakpoint) {
    $infix: breakpoint-infix($breakpoint, $grid-breakpoints);

    @each $value in $overflows {
      .overflow#{$infix}-#{$value} { overflow: $value !important; }
      .overflow-x#{$infix}-#{$value} { overflow-x: $value !important; }
      .overflow-y#{$infix}-#{$value} { overflow-y: $value !important; }
    }

    .overflow#{$infix}-wrap-normal { overflow-wrap: normal !important; }
    .overflow#{$infix}-wrap-spaces { overflow-wrap: break-spaces !important; }
    .overflow#{$infix}-wrap-word { overflow-wrap: break-word !important; }

  }
}


//
// Screenreaders
//

.sr-only {
  @include sr-only();
}

.sr-only-focusable {
  @include sr-only-focusable();
}

// stylelint-disable declaration-no-important

/** Width & Height */
@each $breakpoint in map-keys($grid-breakpoints) {
  @include media-breakpoint-up($breakpoint) {
    $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
    $size-props : (
      width: w,
      height: h,
      min-width: min-w,
      max-width: max-w,
      min-height: min-h,
      max-height: max-h
    );

    /** Sizing **/
    @each $prop, $abbrev in $size-props {
      @each $size, $length in $sizes {
        .#{$abbrev}#{$infix}-#{$size} { #{$prop}: $length !important; }
      }
    }

    /** Screen Sizes */
    .w#{$infix}-screen { width: 100vw; }
    .h#{$infix}-screen { height: 100vw; }

    .min-w#{$infix}-screen { min-width: 100vw; }
    .min-h#{$infix}-screen { min-height: 100vw; }

    .max-w#{$infix}-screen { max-width: 100vw; }
    .max-h#{$infix}-screen { max-height: 100vw; }

  }
}

/**
 * Margin and Padding
 */

@each $breakpoint in map-keys($grid-breakpoints) {
  @include media-breakpoint-up($breakpoint) {
    $infix: breakpoint-infix($breakpoint, $grid-breakpoints);

    @each $prop, $abbrev in (margin: m, padding: p) {
      @each $size, $length in $spacers {
        .#{$abbrev}#{$infix}-#{$size} { #{$prop}: $length !important; }
        .#{$abbrev}t#{$infix}-#{$size},
        .#{$abbrev}y#{$infix}-#{$size} {
          #{$prop}-top: $length !important;
        }
        .#{$abbrev}r#{$infix}-#{$size},
        .#{$abbrev}x#{$infix}-#{$size} {
          #{$prop}-right: $length !important;
        }
        .#{$abbrev}b#{$infix}-#{$size},
        .#{$abbrev}y#{$infix}-#{$size} {
          #{$prop}-bottom: $length !important;
        }
        .#{$abbrev}l#{$infix}-#{$size},
        .#{$abbrev}x#{$infix}-#{$size} {
          #{$prop}-left: $length !important;
        }
      }
    }

    // Negative margins (e.g., where `.mb-n1` is negative version of `.mb-1`)
    @each $size, $length in $spacers {
      @if $size != 0 {
        .m#{$infix}-n#{$size} { margin: -$length !important; }
        .mt#{$infix}-n#{$size},
        .my#{$infix}-n#{$size} {
          margin-top: -$length !important;
        }
        .mr#{$infix}-n#{$size},
        .mx#{$infix}-n#{$size} {
          margin-right: -$length !important;
        }
        .mb#{$infix}-n#{$size},
        .my#{$infix}-n#{$size} {
          margin-bottom: -$length !important;
        }
        .ml#{$infix}-n#{$size},
        .mx#{$infix}-n#{$size} {
          margin-left: -$length !important;
        }
      }
    }

    /** Special Shorthands */
    .m#{$infix}-auto { margin: auto !important; }
    .mt#{$infix}-auto,
    .my#{$infix}-auto {
      margin-top: auto !important;
    }
    .mr#{$infix}-auto,
    .mx#{$infix}-auto {
      margin-right: auto !important;
    }
    .mb#{$infix}-auto,
    .my#{$infix}-auto {
      margin-bottom: auto !important;
    }
    .ml#{$infix}-auto,
    .mx#{$infix}-auto {
      margin-left: auto !important;
    }
  }
}

//
// Stretched link
//

.stretched-link {
  &::after {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
    // Just in case `pointer-events: none` is set on a parent
    pointer-events: auto;
    content: "";
    // IE10 bugfix, see https://stackoverflow.com/questions/16947967/ie10-hover-pseudo-class-doesnt-work-without-background-color
    background-color: rgba(0, 0, 0, 0);
  }
}

/** Font Family */

.font-monospace { font-family: $font-family-monospace !important; }
.font-sans { font-family: $font-family-sans-serif !important; }
.font-serif { font-family: $font-family-serif !important; }



@each $breakpoint in map-keys($grid-breakpoints) {
  @include media-breakpoint-up($breakpoint) {
    $infix: breakpoint-infix($breakpoint, $grid-breakpoints);

    /** Responsive alignment */
    .text#{$infix}-left     { text-align: left !important; }
    .text#{$infix}-right    { text-align: right !important; }
    .text#{$infix}-center   { text-align: center !important; }
    .text#{$infix}-justify  { text-align: justify !important; }

    /** Transformation */
    .text#{$infix}-lowercase  { text-transform: lowercase !important; }
    .text#{$infix}-uppercase  { text-transform: uppercase !important; }
    .text#{$infix}-capitalize { text-transform: capitalize !important; }

    /** Weights */
    .font#{$infix}-hairline   { font-weight: $font-weight-hairline !important; }
    .font#{$infix}-thin       { font-weight: $font-weight-thin !important; }
    .font#{$infix}-light      { font-weight: $font-weight-light !important; }
    .font#{$infix}-normal     { font-weight: $font-weight-normal !important; }
    .font#{$infix}-medium     { font-weight: $font-weight-medium !important; }
    .font#{$infix}-semibold   { font-weight: $font-weight-semi-bold !important; }
    .font#{$infix}-bold       { font-weight: $font-weight-bold !important; }
    .font#{$infix}-extrabold  { font-weight: $font-weight-extra-bold !important; }
    .font#{$infix}-black      { font-weight: $font-weight-black !important; }

    /** Style */
    .font#{$infix}-italic      { font-style: italic !important; }
    .font#{$infix}-not-italic  { font-style: normal !important; }
    // TODO: Text Oblique

    /** Word Break */
    .text#{$infix}-break-normal {
      word-break: normal !important;
      overflow-wrap: normal !important;
    }
    .text#{$infix}-break-words {
      overflow-wrap: break-word !important;
    }
    .text#{$infix}-break-all { word-break: break-all !important; }
    .text#{$infix}-truncate {
      overflow: hidden !important;
      text-overflow: ellipsis !important;
      white-space: nowrap !important;
    }

    /** White Space */
    .text#{$infix}-whitespace-normal    { white-space: normal !important; }
    .text#{$infix}-whitespace-nowrap    { white-space: nowrap !important;}
    .text#{$infix}-whitespace-pre       { white-space: pre !important; }
    .text#{$infix}-whitespace-pre-line  { white-space: pre-line !important; }
    .text#{$infix}-whitespace-pre-wrap  { white-space: pre-wrap !important; }

    /** Decoration */
    .text#{$infix}-underline    { text-decoration: underline !important; }
    .text#{$infix}-line-through { text-decoration: line-through !important; }
    .text#{$infix}-no-underline { text-decoration: none !important; }
    .text#{$infix}-decoration-none { text-decoration: none !important; }

    @each $key, $value in $letter-spacing {
      .tracking#{$infix}-#{$key} { letter-spacing: $value !important; }
    }

    /** Hide */
    .text#{$infix}-hide { @include text-hide($ignore-warning: true); }

  }
}

/** Visibility Utilities */

@each $breakpoint in map-keys($grid-breakpoints) {
  @include media-breakpoint-up($breakpoint) {
    $infix: breakpoint-infix($breakpoint, $grid-breakpoints);

    .visible#{$infix} { visibility: visible !important; }
    .invisible#{$infix} { visibility: hidden !important; }

  }
}







// stylelint-disable declaration-no-important, selector-no-qualifying-type

// Source: https://github.com/h5bp/main.css/blob/master/src/_print.css

// ==========================================================================
// Print styles.
// Inlined to avoid the additional HTTP request:
// https://www.phpied.com/delay-loading-your-print-css/
// ==========================================================================

@if $enable-print-styles {
  @media print {
    *,
    *::before,
    *::after {
      // Bootstrap specific; comment out `color` and `background`
      //color: $black !important; // Black prints faster
      text-shadow: none !important;
      //background: transparent !important;
      box-shadow: none !important;
    }

    a {
      &:not(.btn) {
        text-decoration: underline;
      }
    }

    // Bootstrap specific; comment the following selector out
    //a[href]::after {
    //  content: " (" attr(href) ")";
    //}

    abbr[title]::after {
      content: " (" attr(title) ")";
    }

    // Bootstrap specific; comment the following selector out
    //
    // Don't show links that are fragment identifiers,
    // or use the `javascript:` pseudo protocol
    //

    //a[href^="#"]::after,
    //a[href^="javascript:"]::after {
    // content: "";
    //}

    pre {
      white-space: pre-wrap !important;
    }
    pre,
    blockquote {
      border: $border-width solid gray(500); // Bootstrap custom code; using `$border-width` instead of 1px
      page-break-inside: avoid;
    }

    //
    // Printing Tables:
    // https://web.archive.org/web/20180815150934/http://css-discuss.incutio.com/wiki/Printing_Tables
    //

    thead {
      display: table-header-group;
    }

    tr,
    img {
      page-break-inside: avoid;
    }

    p,
    h2,
    h3 {
      orphans: 3;
      widows: 3;
    }

    h2,
    h3 {
      page-break-after: avoid;
    }

    // Bootstrap specific changes start

    // Specify a size and min-width to make printing closer across browsers.
    // We don't set margin here because it breaks `size` in Chrome. We also
    // don't use `!important` on `size` as it breaks in Chrome.
    @page {
      size: $print-page-size;
    }
    body {
      min-width: $print-body-min-width !important;
    }
    .container {
      min-width: $print-body-min-width !important;
    }

    // Bootstrap components
    .navbar {
      display: none;
    }
    .badge {
      border: $border-width solid $black;
    }

    .table {
      border-collapse: collapse !important;

      td,
      th {
        background-color: $white !important;
      }
    }

    .table-bordered {
      th,
      td {
        border: 1px solid gray(300) !important;
      }
    }

    .table-dark {
      color: inherit;

      th,
      td,
      thead th,
      tbody + tbody {
        border-color: $table-border-color;
      }
    }

    .table .thead-dark th {
      color: inherit;
      border-color: $table-border-color;
    }

    // Bootstrap specific changes end
  }
}


/**
 * Angular Material Theming has been imported in _base.scss
 * 
 */

/**
 * Material Definitions
 */

/**
 * Define the palettes for your theme using the Material Design palettes available in palette.scss
 * (imported above). For each palette, you can optionally specify a default, lighter, and darker
 * hue. Available color palettes: https://material.io/design/color/
 *
 * Theme Set - Create the theme object (a Sass map containing all of the palettes).
 * @private
 * Private variables for material config
 */
$material-primary: mat-palette($palette-primary, 500, 200, 700, 500);
$material-accent: mat-palette($palette-secondary, 500, 50, 700, $black);
$material-warn: mat-palette($palette-warn, 500, 100, 700);

// Theme Set [LIGHT]
$material-theme-light: mat-light-theme($material-primary, $material-accent, $material-warn);

$material-font-family: '#{$font-family-base}';
$material-display-4: mat-typography-level($display1-size, 112px, $display1-weight, $letter-spacing: -0.05em);
$material-display-3: mat-typography-level($display2-size, 56px, $display2-weight, $letter-spacing: -0.02em);
$material-display-2:mat-typography-level($display3-size, 48px, $display3-weight, $letter-spacing: -0.005em);
$material-display-1: mat-typography-level($display4-size, 40px, $display4-weight);
$material-headline: mat-typography-level($h3-font-size, 32px, $headings-font-weight);
$material-title: mat-typography-level($h4-font-size, 32px, $headings-font-weight);
$material-subheading-2: mat-typography-level($h5-font-size, 28px, $headings-font-weight);
$material-subheading-1: mat-typography-level($h6-font-size, 24px, $headings-font-weight);
$material-body-2: mat-typography-level(14px, 24px, 500);
$material-body-1: mat-typography-level(14px, 20px, 400);
$material-caption: mat-typography-level(12px, 20px, $font-weight-semi-bold);
$material-button: mat-typography-level($button-font-size, $button-font-size, $button-font-weight);
// Line-height must be unit-less fraction of the font-size.
$material-input: mat-typography-level(14px, 1.125, 400);


$material-typography: mat-typography-config(
  $font-family:   $material-font-family,
  $display-4:     $material-display-4,
  $display-3:     $material-display-3,
  $display-2:     $material-display-2,
  $display-1:     $material-display-1,
  $headline:      $material-headline,
  $title:         $material-title,
  $subheading-2:  $material-subheading-2,
  $subheading-1:  $material-subheading-1,
  $body-2:        $material-body-2,
  $body-1:        $material-body-1,
  $caption:       $material-caption,
  $button:        $material-button,
  $input:         $material-input
);

/**
 * Include the common styles for Angular Material. We include this here so that you only
 * have to load a single css file for Angular Material in your app.
 * Be sure that you only ever include this mixin once!
 */
@include angular-material-typography($material-typography);
@include mat-core($material-typography);


/**
 * Include theme styles for core and each component used in your app.
 * Alternatively, you can import and @include the theme mixins for each component
 * that you are using.
 */
@include angular-material-theme($material-theme-light);



/**
 * Material Settings
 */
$mat-elevation-color: rgb(60,64,67) !default;
$mat-elevation-opacity: 0.3;

/**
 * Overriders
 */
.mat-snack-bar-container {
  background: white;
  color: gray(500);
}

/**
 * Option: mat-option
 */

.mat-option {
  font-size: .875rem !important;

  &.mat-size-sm { font-size: 0.8125rem !important; }
  &.mat-size-lg { font-size: 1rem !important; }
}

/**
 * Menu alia Dropdown
 */

.mat-menu-content:not(:empty) {
  padding: 0 !important;

  // TODO: Scrollbar
}

.mat-menu-item {
  height: auto;
  line-height: 1;
  padding: .5rem 1rem;
  border-radius: 0;
}

.mat-menu-item:hover:not([disabled]),
.mat-menu-item.cdk-program-focused:not([disabled]),
.mat-menu-item.cdk-keyboard-focused:not([disabled]),
.mat-menu-item-highlighted:not([disabled]) {
  background: primary(200);
}

/**
 * Chips
 */


/**
 * BUTTONS
 */


.mat-button-base {
  line-height: 34px !important;

  &.mat-icon-button {
    @include make-square(36px);
    line-height: 34px !important;
    padding: 0 !important;
    border-radius: 50% !important;
  }

  &.mat-fab {
    @include make-square(50px);
    line-height: 48px !important;
    font-size: 1rem !important;
    padding: 0 !important;
    border-radius: 50% !important;
  }


  &.mat-size-sm {
    font-size: 0.8125rem !important;
    padding: 0 .625rem !important;
    line-height: 28px !important;
    border-radius: $border-radius-sm !important;

    &.mat-icon-button {
      @include make-square(30px);
      line-height: 28px !important;
      padding: 0 !important;
      border-radius: 50% !important;
    }

    &.mat-fab {
      @include make-square(40px);
      line-height: 38px !important;
      font-size: .875rem !important;
      padding: 0 !important;
      border-radius: 50% !important;
    }
  }

  &.mat-size-lg {
    font-size: 1rem !important;
    padding: 0 1.375rem !important;
    line-height: 40px !important;
    border-radius: $border-radius-lg !important;

    &.mat-icon-button {
      @include make-square(42px);
      line-height: 40px !important;
      padding: 0 !important;
      border-radius: 50% !important;
    }

    &.mat-fab {
      @include make-square(60px);
      line-height: 58px !important;
      font-size: 1.125rem !important;
      padding: 0 !important;
      border-radius: 50% !important;
    }
  }
}

.mat-fab {
  @include make-square(50px);

  .mat-button-wrapper {
    padding: 0 !important;
    line-height: 1 !important;
  }
}

// Removed

//.mat-stroked-button:not(.mat-button-disabled) {
//  &.mat-primary { border-color: map-get($palette-primary, 500); }
//  &.mat-warn { border-color: map-get($palette-warn, 500); }
//  &.mat-accent { border-color: map-get($palette-secondary, 500); }
//}

.mat-flat-button, .mat-raised-button, .mat-fab, .mat-mini-fab {
  &.mat-primary { color: rgba(255, 255, 255, 0.87); }
}


/**
 * Flat Button background
 * To make it different from Basic Button
 */
.mat-flat-button:not(.mat-primary, .mat-accent, .mat-warn) {
  background: gray(200);
}

/**
 * Text-icon Buttons
 */
.mat-button, .mat-flat-button,  .mat-raised-button, .mat-stroked-button {
  &:not(.mat-icon-button) {
    .mat-button-wrapper > *:last-of-type { margin-left: .5rem; }

    &.mat-size-sm .mat-button-wrapper > *:last-of-type { margin-right: .25rem; }
    &.mat-size-lg .mat-button-wrapper > *:last-of-type { margin-right: .5rem; }
  }

}

// hover effects for flat buttons
.mat-flat-button.mat-primary, 
.mat-raised-button.mat-primary, 
.mat-fab.mat-primary {
  &:not([disabled]) {
    @include hover-focus() {
      color: $white !important;
      background: primary(700);
    }
    &:not(:hover) {
      color: $white !important;
      background: $primary;
    }
  }
  &:disabled {
    color: $white !important;
    background: $primary;
    opacity: 0.5;
  }
}

.mat-flat-button:not(.mat-primary):not(.mat-accent):not(.mat-warn)
, .mat-raised-button:not(.mat-primary):not(.mat-accent):not(.mat-warn) {
    @include hover-focus() {
      background: gray(500);
    }
    &:not(:hover) {
      background: gray(300);
    }
}

.mat-flat-button.mat-warn, 
.mat-raised-button.mat-warn {
  &:not([disabled]) { 
    @include hover-focus() {
      color: $white !important;
      background: warn(700);
    }
    &:not(:hover) {
      color: $white !important;
      background: $warn;
    }
  }
  &:disabled {
    color: $white !important;
    background: $warn;
    opacity: 0.5;
  }
}

// hover effects for stroked buttons

.mat-stroked-button.mat-primary {
  &:not([disabled]) { 
    @include hover-focus() {
      color: $white !important;
      background: $primary;
    }
    &:not(:hover) {
      color: $primary !important;
      border-color: $primary;
      background: $white;
    }
  }
  &:disabled {
    color: $primary !important;
    border-color: $primary;
    background: $white;
    opacity: 0.5;
  }
}

.mat-stroked-button.mat-warn {
  &:not([disabled]) { 
    @include hover-focus() {
      color: $white !important;
      background: $warn;
    }
    &:not(:hover) {
      color: $warn !important;
      border-color: $warn;
      background: $white;
    }
  }
  &:disabled {
    color: $warn !important;
    border-color: $warn;
    background: $white;
    opacity: 0.5;
  }
}

/**
 * BUTTON TOGGLE
 */
.mat-button-toggle-group {

  &.mat-button-toggle-group-primary {
    border-color: primary(300);

    .mat-button-toggle {
      border-left-color: primary(300);
      color: primary(700);
    }

    .mat-button-toggle.mat-button-toggle-checked {
      background: primary(300);
      color: primary(50);
    }
  }


  .mat-button-toggle .mat-button-toggle-label-content {
    font-size: 14px;
    line-height: 1.2 !important;
    padding: 10px 1rem;
  }


  &.mat-size-sm {
    border-radius: $border-radius-sm !important;

    .mat-button-toggle .mat-button-toggle-label-content {
      font-size: 13px;
      line-height: 1.1 !important;
      padding: .5rem;
    }
  }

  &.mat-size-lg {
    border-radius: $border-radius-lg !important;

    .mat-button-toggle .mat-button-toggle-label-content{
      font-size: 16px;
      line-height: 1.1 !important;
      padding: .75rem 1.5rem;
    }
  }
}

/**
 * FORM FIELD
 * Encapsulates Input, Select
 */

.mat-form-field {

  font-size: 14px;

  .mat-form-field-appearance-outline .mat-form-field-wrapper {
    margin: 0 !important;
    padding: 0 !important;
  }

  .mat-form-field-flex {
    padding: 0 .75rem;
  }

  .mat-form-field-infix {
    padding: .75rem 0;
    border-top: 0.6328125em solid transparent;
    width: 175px;
  }

  .mat-select-arrow-wrapper {
    transform: translateY(-5%);
  }

  &.mat-form-field-appearance-outline.mat-form-field-can-float.mat-form-field-should-float .mat-form-field-label,
  .mat-form-field-appearance-outline.mat-form-field-can-float .mat-input-server:focus + .mat-form-field-label-wrapper .mat-form-field-label {
    transform: translateY(-1.5em) scale(0.75);
  }

  .mat-form-field-outline-end {
    border-radius: 0 $border-radius $border-radius 0;
  }

  .mat-form-field-outline-start {
    border-radius: $border-radius 0 0 $border-radius;
  }

  /** Sizing */
  &.mat-size-sm {
    font-size: 13px;

    .mat-form-field-outline-end {
      border-radius: 0 $border-radius-sm $border-radius-sm 0;
    }
    .mat-form-field-outline-start {
      border-radius: $border-radius-sm 0 0 $border-radius-sm;
    }

    .mat-form-field-flex {
      padding: 0 .5rem;
    }

    .mat-form-field-infix {
      padding: .65rem 0;
      border-top: 0.421875em solid transparent;
      width: 150px;
    }

    .mat-select-arrow-wrapper {
      transform: translateY(0);
    }

    &.mat-form-field-appearance-outline.mat-form-field-can-float.mat-form-field-should-float .mat-form-field-label,
    .mat-form-field-appearance-outline.mat-form-field-can-float .mat-input-server:focus + .mat-form-field-label-wrapper .mat-form-field-label {
      transform: translateY(-1.25em) scale(0.75);
    }
  }

  &.mat-size-lg {
    font-size: 16px;

    .mat-form-field-outline-end {
      border-radius: 0 $border-radius-lg $border-radius-lg 0;
    }

    .mat-form-field-outline-start {
      border-radius: $border-radius-lg 0 0 $border-radius-lg;
    }

    .mat-form-field-flex {
      padding: 0 .9rem;
    }

    .mat-form-field-infix {
      padding: .9rem 0;
      border-top: 0.5em solid transparent;
      width: 200px;
    }

    .mat-select-arrow-wrapper {
      transform: translateY(-5%);
    }

    &.mat-form-field-appearance-outline.mat-form-field-can-float.mat-form-field-should-float .mat-form-field-label,
    .mat-form-field-appearance-outline.mat-form-field-can-float .mat-input-server:focus + .mat-form-field-label-wrapper .mat-form-field-label {
      transform: translateY(-1.4em) scale(0.75);
    }
  }


  /** Themes */
  .mat-form-field-appearance-fill {

  }

  .mat-form-field-appearance-outline {

  }

}

/**
 * Checkbox
 */

.mat-checkbox {
  font-size: 14px;

  .mat-checkbox-layout .mat-checkbox-label {
    line-height: 16px;
  }

  .mat-checkbox-inner-container {
    @include make-square(14px);

    .mat-checkbox-frame { border-width: 1px !important; }

  }

  &.mat-size-sm {
    font-size: 13px;

    .mat-checkbox-inner-container {
      @include make-square(12px);
    }
  }

  &.mat-size-lg {
    font-size: 16px;

    .mat-checkbox-inner-container {
      @include make-square(15px);
    }
  }

}

.mat-radio-group {
  font-size: 14px;

  .mat-radio-button {
    .mat-radio-container {
      @include make-square(14px);

      .mat-radio-inner-circle, .mat-radio-outer-circle {
        @include make-square(14px);
        border-width: 1px !important;
      }
    }

    .mat-radio-label-content { padding-left: .5rem; }
  }

  &.mat-size-sm {
    font-size: 13px;

    .mat-radio-container {
      @include make-square(13px);

      .mat-radio-inner-circle, .mat-radio-outer-circle {
        @include make-square(13px);
      }
    }

    .mat-radio-label-content { padding-left: .5rem; }
  }

  &.mat-size-lg {
    font-size: 16px;

    .mat-radio-container {
      @include make-square(16px);

      .mat-radio-inner-circle, .mat-radio-outer-circle {
        @include make-square(16px);
      }
    }

    .mat-radio-label-content { padding-left: .75rem; }
  }
}

/**
 * Slider
 */

.mat-slide-toggle {

  .mat-slide-toggle-content { font-size: 14px; }
  .mat-slide-toggle-bar {
    width: 30px;
    height: 12px;
  }

  .mat-slide-toggle-thumb-container {
    @include make-square(16px);
    top: -2.5px;

    .mat-slide-toggle-thumb {
      @include make-square(16px);
    }
  }

  /** Sizes */
  &.mat-size-sm {
    .mat-slide-toggle-content { font-size: 13px; }

    .mat-slide-toggle-bar {
      width: 26px;
      height: 10px;
    }

    .mat-slide-toggle-thumb-container {
      @include make-square(14px);
      top: -2px;

      .mat-slide-toggle-thumb {
        @include make-square(14px);
      }
    }

  }

  &.mat-size-lg {
    .mat-slide-toggle-content { font-size: 16px; }

    .mat-slide-toggle-bar {
      width: 38px;
      height: 16px;
    }

    .mat-slide-toggle-thumb-container {
      @include make-square(20px);
      top: -3px;

      &.mat-checked {
        transform: translate3d(18px, 0, 0)
      }

      .mat-slide-toggle-thumb {
        @include make-square(20px);
      }
    }
  }


  /**Checked State */
  &.mat-checked .mat-slide-toggle-thumb-container {
    transform: translate3d(14px, 0, 0) !important;
  }

  &.mat-checked.mat-size-sm .mat-slide-toggle-thumb-container {
    transform: translate3d(12px, 0, 0) !important;
  }

  &.mat-checked.mat-size-lg .mat-slide-toggle-thumb-container {
    transform: translate3d(18px, 0, 0) !important;
  }
}

/**
 * Mat Calendar
 * Size improvised
 */
.mat-calendar-body-today.mat-calendar-body-selected { box-shadow: 0 0 0 1px rgba(255, 152, 0, 0.87); }

.mat-calendar-body-selected { color: $white; }