@talentsoft-opensource/hylia/dist/style.css

The Hylia design systems. Contains all the building blocks style rules for Talentsoft.

@charset "UTF-8";
/*
* Imports Libs
*/
.react-datepicker-popper[data-placement^="bottom"] .react-datepicker__triangle,
.react-datepicker-popper[data-placement^="top"] .react-datepicker__triangle,
.react-datepicker__year-read-view--down-arrow,
.react-datepicker__month-read-view--down-arrow,
.react-datepicker__month-year-read-view--down-arrow {
  margin-left: -8px;
  position: absolute;
}
.react-datepicker-popper[data-placement^="bottom"] .react-datepicker__triangle,
.react-datepicker-popper[data-placement^="top"] .react-datepicker__triangle,
.react-datepicker__year-read-view--down-arrow,
.react-datepicker__month-read-view--down-arrow,
.react-datepicker__month-year-read-view--down-arrow,
.react-datepicker-popper[data-placement^="bottom"] .react-datepicker__triangle::before,
.react-datepicker-popper[data-placement^="top"] .react-datepicker__triangle::before,
.react-datepicker__year-read-view--down-arrow::before,
.react-datepicker__month-read-view--down-arrow::before,
.react-datepicker__month-year-read-view--down-arrow::before {
  box-sizing: content-box;
  position: absolute;
  border: 8px solid transparent;
  height: 0;
  width: 1px;
}
.react-datepicker-popper[data-placement^="bottom"] .react-datepicker__triangle::before,
.react-datepicker-popper[data-placement^="top"] .react-datepicker__triangle::before,
.react-datepicker__year-read-view--down-arrow::before,
.react-datepicker__month-read-view--down-arrow::before,
.react-datepicker__month-year-read-view--down-arrow::before {
  content: "";
  z-index: -1;
  border-width: 8px;
  left: -8px;
  border-bottom-color: #aeaeae;
}
.react-datepicker-popper[data-placement^="bottom"] .react-datepicker__triangle {
  top: 0;
  margin-top: -8px;
}
.react-datepicker-popper[data-placement^="bottom"] .react-datepicker__triangle,
.react-datepicker-popper[data-placement^="bottom"] .react-datepicker__triangle::before {
  border-top: none;
  border-bottom-color: #f0f0f0;
}
.react-datepicker-popper[data-placement^="bottom"] .react-datepicker__triangle::before {
  top: -1px;
  border-bottom-color: #aeaeae;
}
.react-datepicker-popper[data-placement^="top"] .react-datepicker__triangle,
.react-datepicker__year-read-view--down-arrow,
.react-datepicker__month-read-view--down-arrow,
.react-datepicker__month-year-read-view--down-arrow {
  bottom: 0;
  margin-bottom: -8px;
}
.react-datepicker-popper[data-placement^="top"] .react-datepicker__triangle,
.react-datepicker__year-read-view--down-arrow,
.react-datepicker__month-read-view--down-arrow,
.react-datepicker__month-year-read-view--down-arrow,
.react-datepicker-popper[data-placement^="top"] .react-datepicker__triangle::before,
.react-datepicker__year-read-view--down-arrow::before,
.react-datepicker__month-read-view--down-arrow::before,
.react-datepicker__month-year-read-view--down-arrow::before {
  border-bottom: none;
  border-top-color: #fff;
}
.react-datepicker-popper[data-placement^="top"] .react-datepicker__triangle::before,
.react-datepicker__year-read-view--down-arrow::before,
.react-datepicker__month-read-view--down-arrow::before,
.react-datepicker__month-year-read-view--down-arrow::before {
  bottom: -1px;
  border-top-color: #aeaeae;
}
.react-datepicker-wrapper {
  display: inline-block;
}
.react-datepicker {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 0.8rem;
  background-color: #fff;
  color: #000;
  border: 1px solid #aeaeae;
  border-radius: 0.3rem;
  display: inline-block;
  position: relative;
}
.react-datepicker--time-only .react-datepicker__triangle {
  left: 35px;
}
.react-datepicker--time-only .react-datepicker__time-container {
  border-left: 0;
}
.react-datepicker--time-only .react-datepicker__time {
  border-radius: 0.3rem;
}
.react-datepicker--time-only .react-datepicker__time-box {
  border-radius: 0.3rem;
}
.react-datepicker__triangle {
  position: absolute;
  left: 50px;
}
.react-datepicker-popper {
  z-index: 100;
}
.react-datepicker-popper[data-placement^="bottom"] {
  margin-top: 10px;
}
.react-datepicker-popper[data-placement^="top"] {
  margin-bottom: 10px;
}
.react-datepicker-popper[data-placement^="right"] {
  margin-left: 8px;
}
.react-datepicker-popper[data-placement^="right"] .react-datepicker__triangle {
  left: auto;
  right: 42px;
}
.react-datepicker-popper[data-placement^="left"] {
  margin-right: 8px;
}
.react-datepicker-popper[data-placement^="left"] .react-datepicker__triangle {
  left: 42px;
  right: auto;
}
.react-datepicker__header {
  text-align: center;
  background-color: #f0f0f0;
  border-bottom: 1px solid #aeaeae;
  border-top-left-radius: 0.3rem;
  border-top-right-radius: 0.3rem;
  padding-top: 8px;
  position: relative;
}
.react-datepicker__header--time {
  padding-bottom: 8px;
  padding-left: 5px;
  padding-right: 5px;
}
.react-datepicker__year-dropdown-container--select,
.react-datepicker__month-dropdown-container--select,
.react-datepicker__month-year-dropdown-container--select,
.react-datepicker__year-dropdown-container--scroll,
.react-datepicker__month-dropdown-container--scroll,
.react-datepicker__month-year-dropdown-container--scroll {
  display: inline-block;
  margin: 0 2px;
}
.react-datepicker__current-month,
.react-datepicker-time__header {
  margin-top: 0;
  color: #000;
  font-weight: bold;
  font-size: 0.944rem;
}
.react-datepicker-time__header {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.react-datepicker__navigation {
  background: none;
  line-height: 1.7rem;
  text-align: center;
  cursor: pointer;
  position: absolute;
  top: 10px;
  width: 0;
  padding: 0;
  border: 0.45rem solid transparent;
  z-index: 1;
  height: 10px;
  width: 10px;
  text-indent: -999em;
  overflow: hidden;
}
.react-datepicker__navigation--previous {
  left: 10px;
  border-right-color: #ccc;
}
.react-datepicker__navigation--previous:hover {
  border-right-color: #b3b3b3;
}
.react-datepicker__navigation--previous--disabled,
.react-datepicker__navigation--previous--disabled:hover {
  border-right-color: #e6e6e6;
  cursor: default;
}
.react-datepicker__navigation--next {
  right: 10px;
  border-left-color: #ccc;
}
.react-datepicker__navigation--next--with-time:not(.react-datepicker__navigation--next--with-today-button) {
  right: 80px;
}
.react-datepicker__navigation--next:hover {
  border-left-color: #b3b3b3;
}
.react-datepicker__navigation--next--disabled,
.react-datepicker__navigation--next--disabled:hover {
  border-left-color: #e6e6e6;
  cursor: default;
}
.react-datepicker__navigation--years {
  position: relative;
  top: 0;
  display: block;
  margin-left: auto;
  margin-right: auto;
}
.react-datepicker__navigation--years-previous {
  top: 4px;
  border-top-color: #ccc;
}
.react-datepicker__navigation--years-previous:hover {
  border-top-color: #b3b3b3;
}
.react-datepicker__navigation--years-upcoming {
  top: -4px;
  border-bottom-color: #ccc;
}
.react-datepicker__navigation--years-upcoming:hover {
  border-bottom-color: #b3b3b3;
}
.react-datepicker__month-container {
  float: left;
}
.react-datepicker__month {
  margin: 0.4rem;
  text-align: center;
}
.react-datepicker__time-container {
  float: right;
  border-left: 1px solid #aeaeae;
  width: 70px;
}
.react-datepicker__time-container--with-today-button {
  display: inline;
  border: 1px solid #aeaeae;
  border-radius: 0.3rem;
  position: absolute;
  right: -72px;
  top: 0;
}
.react-datepicker__time-container .react-datepicker__time {
  position: relative;
  background: white;
}
.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box {
  width: 70px;
  overflow-x: hidden;
  margin: 0 auto;
  text-align: center;
}
.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list {
  list-style: none;
  margin: 0;
  height: calc(195.85px);
  overflow-y: scroll;
  padding-right: 0px;
  padding-left: 0px;
  width: 100%;
  box-sizing: content-box;
}
.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item {
  height: 30px;
  padding: 5px 10px;
}
.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item:hover {
  cursor: pointer;
  background-color: #f0f0f0;
}
.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--selected {
  background-color: #216ba5;
  color: white;
  font-weight: bold;
}
.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--selected:hover {
  background-color: #216ba5;
}
.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--disabled {
  color: #ccc;
}
.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--disabled:hover {
  cursor: default;
  background-color: transparent;
}
.react-datepicker__week-number {
  color: #ccc;
  display: inline-block;
  width: 1.7rem;
  line-height: 1.7rem;
  text-align: center;
  margin: 0.166rem;
}
.react-datepicker__week-number.react-datepicker__week-number--clickable {
  cursor: pointer;
}
.react-datepicker__week-number.react-datepicker__week-number--clickable:hover {
  border-radius: 0.3rem;
  background-color: #f0f0f0;
}
.react-datepicker__day-names,
.react-datepicker__week {
  white-space: nowrap;
}
.react-datepicker__day-name,
.react-datepicker__day,
.react-datepicker__time-name {
  color: #000;
  display: inline-block;
  width: 1.7rem;
  line-height: 1.7rem;
  text-align: center;
  margin: 0.166rem;
}
.react-datepicker__day {
  cursor: pointer;
}
.react-datepicker__day:hover {
  border-radius: 0.3rem;
  background-color: #f0f0f0;
}
.react-datepicker__day--today {
  font-weight: bold;
}
.react-datepicker__day--highlighted {
  border-radius: 0.3rem;
  background-color: #3dcc4a;
  color: #fff;
}
.react-datepicker__day--highlighted:hover {
  background-color: #32be3f;
}
.react-datepicker__day--highlighted-custom-1 {
  color: magenta;
}
.react-datepicker__day--highlighted-custom-2 {
  color: green;
}
.react-datepicker__day--selected,
.react-datepicker__day--in-selecting-range,
.react-datepicker__day--in-range {
  border-radius: 0.3rem;
  background-color: #216ba5;
  color: #fff;
}
.react-datepicker__day--selected:hover,
.react-datepicker__day--in-selecting-range:hover,
.react-datepicker__day--in-range:hover {
  background-color: #1d5d90;
}
.react-datepicker__day--keyboard-selected {
  border-radius: 0.3rem;
  background-color: #2a87d0;
  color: #fff;
}
.react-datepicker__day--keyboard-selected:hover {
  background-color: #1d5d90;
}
.react-datepicker__day--in-selecting-range:not(.react-datepicker__day--in-range) {
  background-color: rgba(33, 107, 165, 0.5);
}
.react-datepicker__month--selecting-range .react-datepicker__day--in-range:not(.react-datepicker__day--in-selecting-range) {
  background-color: #f0f0f0;
  color: #000;
}
.react-datepicker__day--disabled {
  cursor: default;
  color: #ccc;
}
.react-datepicker__day--disabled:hover {
  background-color: transparent;
}
.react-datepicker__input-container {
  position: relative;
  display: inline-block;
}
.react-datepicker__year-read-view,
.react-datepicker__month-read-view,
.react-datepicker__month-year-read-view {
  border: 1px solid transparent;
  border-radius: 0.3rem;
}
.react-datepicker__year-read-view:hover,
.react-datepicker__month-read-view:hover,
.react-datepicker__month-year-read-view:hover {
  cursor: pointer;
}
.react-datepicker__year-read-view:hover .react-datepicker__year-read-view--down-arrow,
.react-datepicker__year-read-view:hover .react-datepicker__month-read-view--down-arrow,
.react-datepicker__month-read-view:hover .react-datepicker__year-read-view--down-arrow,
.react-datepicker__month-read-view:hover .react-datepicker__month-read-view--down-arrow,
.react-datepicker__month-year-read-view:hover .react-datepicker__year-read-view--down-arrow,
.react-datepicker__month-year-read-view:hover .react-datepicker__month-read-view--down-arrow {
  border-top-color: #b3b3b3;
}
.react-datepicker__year-read-view--down-arrow,
.react-datepicker__month-read-view--down-arrow,
.react-datepicker__month-year-read-view--down-arrow {
  border-top-color: #ccc;
  float: right;
  margin-left: 20px;
  top: 8px;
  position: relative;
  border-width: 0.45rem;
}
.react-datepicker__year-dropdown,
.react-datepicker__month-dropdown,
.react-datepicker__month-year-dropdown {
  background-color: #f0f0f0;
  position: absolute;
  width: 50%;
  left: 25%;
  top: 30px;
  z-index: 1;
  text-align: center;
  border-radius: 0.3rem;
  border: 1px solid #aeaeae;
}
.react-datepicker__year-dropdown:hover,
.react-datepicker__month-dropdown:hover,
.react-datepicker__month-year-dropdown:hover {
  cursor: pointer;
}
.react-datepicker__year-dropdown--scrollable,
.react-datepicker__month-dropdown--scrollable,
.react-datepicker__month-year-dropdown--scrollable {
  height: 150px;
  overflow-y: scroll;
}
.react-datepicker__year-option,
.react-datepicker__month-option,
.react-datepicker__month-year-option {
  line-height: 20px;
  width: 100%;
  display: block;
  margin-left: auto;
  margin-right: auto;
}
.react-datepicker__year-option:first-of-type,
.react-datepicker__month-option:first-of-type,
.react-datepicker__month-year-option:first-of-type {
  border-top-left-radius: 0.3rem;
  border-top-right-radius: 0.3rem;
}
.react-datepicker__year-option:last-of-type,
.react-datepicker__month-option:last-of-type,
.react-datepicker__month-year-option:last-of-type {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  border-bottom-left-radius: 0.3rem;
  border-bottom-right-radius: 0.3rem;
}
.react-datepicker__year-option:hover,
.react-datepicker__month-option:hover,
.react-datepicker__month-year-option:hover {
  background-color: #ccc;
}
.react-datepicker__year-option:hover .react-datepicker__navigation--years-upcoming,
.react-datepicker__month-option:hover .react-datepicker__navigation--years-upcoming,
.react-datepicker__month-year-option:hover .react-datepicker__navigation--years-upcoming {
  border-bottom-color: #b3b3b3;
}
.react-datepicker__year-option:hover .react-datepicker__navigation--years-previous,
.react-datepicker__month-option:hover .react-datepicker__navigation--years-previous,
.react-datepicker__month-year-option:hover .react-datepicker__navigation--years-previous {
  border-top-color: #b3b3b3;
}
.react-datepicker__year-option--selected,
.react-datepicker__month-option--selected,
.react-datepicker__month-year-option--selected {
  position: absolute;
  left: 15px;
}
.react-datepicker__close-icon {
  background-color: transparent;
  border: 0;
  cursor: pointer;
  outline: 0;
  padding: 0;
  vertical-align: middle;
  position: absolute;
  height: 16px;
  width: 16px;
  top: 25%;
  right: 7px;
}
.react-datepicker__close-icon::after {
  background-color: #216ba5;
  border-radius: 50%;
  bottom: 0;
  box-sizing: border-box;
  color: #fff;
  content: "\D7";
  cursor: pointer;
  font-size: 12px;
  height: 16px;
  width: 16px;
  line-height: 1;
  margin: -8px auto 0;
  padding: 2px;
  position: absolute;
  right: 0px;
  text-align: center;
}
.react-datepicker__today-button {
  background: #f0f0f0;
  border-top: 1px solid #aeaeae;
  cursor: pointer;
  text-align: center;
  font-weight: bold;
  padding: 5px 0;
  clear: left;
}
.react-datepicker__portal {
  position: fixed;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.8);
  left: 0;
  top: 0;
  justify-content: center;
  align-items: center;
  display: flex;
  z-index: 2147483647;
}
.react-datepicker__portal .react-datepicker__day-name,
.react-datepicker__portal .react-datepicker__day,
.react-datepicker__portal .react-datepicker__time-name {
  width: 3rem;
  line-height: 3rem;
}
@media (max-width: 400px), (max-height: 550px) {
  .react-datepicker__portal .react-datepicker__day-name,
  .react-datepicker__portal .react-datepicker__day,
  .react-datepicker__portal .react-datepicker__time-name {
    width: 2rem;
    line-height: 2rem;
  }
}
.react-datepicker__portal .react-datepicker__current-month,
.react-datepicker__portal .react-datepicker-time__header {
  font-size: 1.44rem;
}
.react-datepicker__portal .react-datepicker__navigation {
  border: 0.81rem solid transparent;
}
.react-datepicker__portal .react-datepicker__navigation--previous {
  border-right-color: #ccc;
}
.react-datepicker__portal .react-datepicker__navigation--previous:hover {
  border-right-color: #b3b3b3;
}
.react-datepicker__portal .react-datepicker__navigation--previous--disabled,
.react-datepicker__portal .react-datepicker__navigation--previous--disabled:hover {
  border-right-color: #e6e6e6;
  cursor: default;
}
.react-datepicker__portal .react-datepicker__navigation--next {
  border-left-color: #ccc;
}
.react-datepicker__portal .react-datepicker__navigation--next:hover {
  border-left-color: #b3b3b3;
}
.react-datepicker__portal .react-datepicker__navigation--next--disabled,
.react-datepicker__portal .react-datepicker__navigation--next--disabled:hover {
  border-left-color: #e6e6e6;
  cursor: default;
}
/*
* Imports Utilities
*/
/*
For Package NPM
 */
/*
* BreakPoints
 */
/*
* Add color name variable for add atoms variations
 */
/*
* Colors State
*/
/*
* Colors Utilities
*/
/*
* Colors Primaries
*/
/*
* Colors Structure
*/
/*
* Colors Emotionals
*/
/*
* Colors Sementics
*/
/*
* Colors Data Viz
*/
/*
* Import Fonts Weight
*/
/*
* import fonts roboto
*/
@font-face {
  font-family: 'roboto_black';
  src: url(/assets/fonts/roboto-black.woff2) format('woff2'), url(/assets/fonts/roboto-black.ttf) format('truetype'), url(/assets/fonts/roboto-black.woff) format('woff');
  font-weight: 900;
  font-style: normal;
}
@font-face {
  font-family: 'roboto_black-italic';
  src: url(/assets/fonts/roboto-blackitalic.woff) format('woff'), url(/assets/fonts/roboto-blackitalic.ttf) format('truetype');
  font-weight: 900;
  font-style: italic;
}
@font-face {
  font-family: 'roboto_bold';
  src: url(/assets/fonts/roboto-bold-webfont.svg) format('svg'), url(/assets/fonts/roboto-bold-webfont.woff) format('woff');
  font-weight: 700;
  font-style: normal;
}
@font-face {
  font-family: 'roboto_bold-italic';
  src: url(/assets/fonts/roboto-bolditalic-webfont.woff) format('woff'), url(/assets/fonts/roboto-bolditalic-webfont.svg) format('svg');
  font-weight: 700;
  font-style: italic;
}
@font-face {
  font-family: 'roboto_italic';
  src: url(/assets/fonts/roboto-italic-webfont.woff) format('woff'), url(/assets/fonts/roboto-italic-webfont.svg) format('svg');
  font-weight: 400;
  font-style: italic;
}
@font-face {
  font-family: 'roboto_light';
  src: url(/assets/fonts/roboto-light-webfont.woff) format('woff'), url(/assets/fonts/roboto-light-webfont.svg) format('svg');
  font-weight: 300;
  font-style: normal;
}
@font-face {
  font-family: 'roboto_light-italic';
  src: url(/assets/fonts/roboto-lightitalic-webfont.woff) format('woff'), url(/assets/fonts/roboto-lightitalic-webfont.woff) format('woff');
  font-weight: 300;
  font-style: italic;
}
@font-face {
  font-family: 'roboto_medium';
  src: url(/assets/fonts/roboto-medium.woff2) format('woff2'), url(/assets/fonts/roboto-medium.ttf) format('truetype'), url(/assets/fonts/roboto-medium.woff) format('woff');
  font-weight: 500;
  font-style: normal;
}
@font-face {
  font-family: 'roboto_medium-italic';
  src: url(/assets/fonts/roboto-mediumitalic.woff2) format('woff2'), url(/assets/fonts/roboto-mediumitalic.ttf) format('truetype'), url(/assets/fonts/roboto-mediumitalic.woff) format('woff');
  font-weight: 500;
  font-style: italic;
}
@font-face {
  font-family: 'roboto_regular';
  src: url(/assets/fonts/roboto-regular-webfont.woff) format('woff'), url(/assets/fonts/roboto-regular-webfont.svg) format('svg');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'uxp-font';
  src: url(/assets/fonts/uxp-font.woff) format('woff'), url(/assets/fonts/uxp-font.ttf) format('truetype'), url(/assets/fonts/uxp-font.svg) format('svg'), url(/assets/fonts/uxp-font.eot) format('eot');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'roboto_thin';
  src: url(/assets/fonts/roboto-thin.woff2) format('woff2'), url(/assets/fonts/roboto-thin.ttf) format('truetype'), url(/assets/fonts/roboto-thin.woff) format('woff');
  font-weight: 100;
  font-style: normal;
}
@font-face {
  font-family: 'roboto_thin-italic';
  src: url(/assets/fonts/roboto-thinitalic.woff2) format('woff2'), url(/assets/fonts/roboto-thinitalic.ttf) format('truetype'), url(/assets/fonts/roboto-thinitalic.woff) format('woff');
  font-weight: 100;
  font-style: italic;
}
/*
  * import roboto condensed
   */
@font-face {
  font-family: 'robotocondensed_bold';
  src: url(/assets/fonts/robotocondensed-bold-webfont.woff) format('woff'), url(/assets/fonts/robotocondensed-bold-webfont.svg) format('svg');
  font-weight: 700;
  font-style: normal;
}
@font-face {
  font-family: 'robotocondensed_bold-italic';
  src: url(/assets/fonts/robotocondensed-bolditalic-webfont.woff) format('woff'), url(/assets/fonts/robotocondensed-bolditalic-webfont.svg) format('svg');
  font-weight: 700;
  font-style: italic;
}
@font-face {
  font-family: 'robotocondensed_italic';
  src: url(/assets/fonts/robotocondensed-italic-webfont.woff) format('woff'), url(/assets/fonts/robotocondensed-italic-webfont.svg) format('svg');
  font-weight: 400;
  font-style: italic;
}
@font-face {
  font-family: 'robotocondensed_light';
  src: url(/assets/fonts/robotocondensed-light-webfont.woff) format('woff'), url(/assets/fonts/robotocondensed-light-webfont.svg) format('svg');
  font-weight: 100;
  font-style: normal;
}
@font-face {
  font-family: 'robotocondensed_light-italic';
  src: url(/assets/fonts/robotocondensed-lightitalic-webfont.woff) format('woff'), url(/assets/fonts/robotocondensed-lightitalic-webfont.svg) format('svg');
  font-weight: 100;
  font-style: italic;
}
@font-face {
  font-family: 'robotocondensed_regular';
  src: url(/assets/fonts/robotocondensed-regular-webfont.woff) format('woff'), url(/assets/fonts/robotocondensed-regular-webfont.svg) format('svg');
  font-weight: 400;
  font-style: normal;
}
/*
  * import icons
   */
@font-face {
  font-family: 'talentsoft-font-icons';
  src: url(/assets/fonts/talentsoft-font-icons.eot);
  src: url(/assets/fonts/talentsoft-font-icons.eot#iefix) format('embedded-opentype'), url(/assets/fonts/talentsoft-font-icons.ttf) format('truetype'), url(/assets/fonts/talentsoft-font-icons.woff) format('woff'), url(/assets/fonts/talentsoft-font-icons.svg#talentsoft-font-icons) format('svg');
  font-weight: normal;
  font-style: normal;
}
/*
* Make variations background-color over the element
* Modify the variables.less variable @colors
*/
/*
* Make variations background-color class
* Modify the _variables.less variable @colors
*/
/*
* Make variations border-color class
* Modify the _variables.less variable @colors
*/
/*
* Make variations background-color Button Primary
* Modify the _variables.less variable @colors-state
* TODO WARNING CHANGE ARRAY IN @colors-state in params
*/
/*
* Make variations background-color Button Primary
* Modify the _variables.less variable @colors
*/
/*
* Make variations color atoms
* Modify the _variables.less variable @colors
*/
/*
* Make variations color atoms
* Modify the _variables.less variable @colors
*/
/*
* Create font styles
*/
/*
* Create css property for all browsers: chrome, ie, firefox, opera and standard
*/
/**
 * Global Reset of all HTML Elements
 *
 * Resetting all of our HTML Elements ensures a smoother
 * visual transition between browsers. If you don't believe me,
 * try temporarily commenting out this block of code, then go
 * and look at Mozilla versus Safari, both good browsers with
 * a good implementation of CSS. The thing is, all browser CSS
 * defaults are different and at the end of the day if visual
 * consistency is what we're shooting for, then we need to
 * make sure we're resetting all spacing elements.
 *
 */
html {
  font-size: 62.5%;
}
body {
  font-size: 1.4rem;
}
html,
body {
  font-family: "Roboto_regular";
  min-height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background-attachment: fixed;
  background-size: cover;
}
div,
span,
object,
iframe,
img,
table,
caption,
thead,
tbody,
tfoot,
tr,
tr,
td,
article,
aside,
canvas,
details,
figure,
hgroup,
menu,
nav,
footer,
header,
section,
summary,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
}
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
address,
cit,
code,
del,
dfn,
em,
ins,
q,
samp,
small,
strong,
sub,
sup,
b,
i,
hr,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
legend,
label {
  font-size: 100%;
  margin: 0;
  padding: 0;
  vertical-align: baseline;
  border: 0;
}
ul,
li {
  margin: 0;
  padding: 0;
  list-style: none;
}
article,
aside,
canvas,
figure,
figure img,
figcaption,
hgroup,
footer,
header,
nav,
section,
audio,
video {
  display: block;
}
table {
  border-spacing: 0;
  border-collapse: separate;
}
table caption,
table th,
table td {
  text-align: left;
  vertical-align: middle;
}
a img {
  border: 0;
}
a {
  text-decoration: none;
}
:focus {
  outline: 0;
}
* {
  box-sizing: border-box;
}
.col-3 {
  width: calc(33.33333333%);
}
.col-2 {
  width: calc(50%);
}
.col-4 {
  width: calc(25%);
}
.col-full {
  flex: 1;
  width: 100%;
}
/**
Helpers for size
 */
.w-100 {
  width: 100%;
}
.w-50 {
  width: 50%;
}
/**
Helpers for Margin
 */
.mt-20 {
  margin-top: 2rem;
}
.ml-20 {
  margin-left: 2rem;
}
.mr-20 {
  margin-right: 2rem;
}
.mb-20 {
  margin-bottom: 2rem;
}
/**
Helpers for Padding
 */
.pt-20 {
  padding-top: 2rem;
}
.pl-20 {
  padding-left: 2rem;
}
.pr-20 {
  padding-right: 2rem;
}
.pb-20 {
  padding-bottom: 2rem;
}
/**
Delete margin  & Padding
 */
.no-padding {
  padding: 0;
}
.no-margin {
  margin: 0;
}
/**
Border
 */
.border {
  border: 0.1rem solid #d1d3d5;
}
.border--top-none {
  border-top: none;
}
.border--bottom-none {
  border-bottom: none;
}
.border--left-none {
  border-left: none;
}
.border--right-none {
  border-right: none;
}
.border-radius {
  border-radius: 0.4rem;
}
.border-radius--tl-none {
  border-top-left-radius: none;
}
.border-radius--tr-none {
  border-top-right-radius: none;
}
.border-radius--bl-none {
  border-bottom-left-radius: none;
}
.border-radius--br-none {
  border-bottom-right-radius: none;
}
.border-radius--top {
  border-top-right-radius: 0.4rem;
  border-top-left-radius: 0.4rem;
}
.border-radius--bottom {
  border-bottom-right-radius: 0.4rem;
  border-bottom-left-radius: 0.4rem;
}
/**
Helpers for grid
 */
.d-flex {
  display: flex;
}
.d-inline-flex {
  display: inline-flex;
}
.flex-row {
  flex-direction: row;
}
.flex-column {
  flex-direction: column;
}
.flex-wrap {
  flex-wrap: wrap;
}
.flex-nowrap {
  flex-wrap: nowrap;
}
.justify-content-start {
  justify-content: flex-start;
}
.justify-content-end {
  justify-content: flex-end;
}
.justify-content-center {
  justify-content: center;
}
.justify-content-between {
  justify-content: space-between;
}
.justify-content-around {
  justify-content: space-around;
}
.align-items-start {
  align-items: flex-start;
}
.align-items-end {
  align-items: flex-end;
}
.align-items-center {
  align-items: center;
}
.align-items-baseline {
  align-items: baseline;
}
.align-items-stretch {
  align-items: stretch;
}
.align-content-start {
  align-content: flex-start;
}
.align-content-end {
  align-content: flex-end;
}
.align-content-center {
  align-content: center;
}
.align-content-between {
  align-content: space-between;
}
.align-content-around {
  align-content: space-around;
}
.align-content-stretch {
  align-content: stretch;
}
.align-self-auto {
  align-self: auto;
}
.align-self-start {
  align-self: flex-start;
}
.align-self-end {
  align-self: flex-end;
}
.align-self-center {
  align-self: center;
}
.align-self-baseline {
  align-self: baseline;
}
.align-self-stretch {
  align-self: stretch;
}
/**
Helpers alignment
 */
.text--center {
  text-align: center;
}
.text--left {
  text-align: left;
}
.text--right {
  text-align: right;
}
.navigation-group .navigation-group-title {
  font-size: 16.8px !important;
}
.navigation-group a.navigation-tile {
  font-size: 13.2px !important;
}
/*
* Imports Atoms
*/
.Hylia-a-avatar {
  position: relative;
  /** 
    * Modifier
    **/
}
.Hylia-a-avatar:before {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;
  content: "";
  transition: transform 0.3s cubic-bezier(0.2, 1, 0.3, 1);
  transform-origin: center center;
  border-style: solid;
  border-radius: 50%;
}
.Hylia-a-avatar:hover:before {
  transform: translateY(-50%) translateX(-50%);
}
.Hylia-a-avatar--candidate:before {
  border-color: #31b87b;
}
.Hylia-a-avatar--default:before {
  border-color: #d1d3d5;
}
.Hylia-a-avatar--disable:before {
  border-color: #d1d3d5;
}
.Hylia-a-avatar--disable.Hylia-a-avatar--initial .Hylia-a-avatar__initial {
  color: #d1d3d5;
}
.Hylia-a-avatar--disable.Hylia-a-avatar--initial .Hylia-a-avatar__picture {
  background-color: #f4f5f6;
}
.Hylia-a-avatar--disable.Hylia-a-avatar--initial i {
  color: #ececed;
}
.Hylia-a-avatar--disable .Hylia-a-avatar__picture {
  filter: grayscale(75%);
}
.Hylia-a-avatar--collaborator:before {
  border-color: #fddc41;
}
.Hylia-a-avatar--me:before {
  border-color: #337BB8;
}
.Hylia-a-avatar--initial .Hylia-a-avatar__picture {
  background-color: #E1E3E5;
  font-family: "RobotoCondensed_bold";
  display: flex;
  justify-content: center;
  align-items: center;
}
.Hylia-a-avatar--initial .Hylia-a-avatar__initial {
  position: relative;
  z-index: 1;
  color: #FFFFFF;
}
.Hylia-a-avatar--initial i {
  position: absolute;
  color: #d1d3d5;
}
.Hylia-a-avatar__picture {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
  background-position: center;
  background-size: cover;
}
.Hylia-a-avatar__wrapper {
  position: absolute;
  top: 50%;
  left: 50%;
  overflow: hidden;
  transform: translateY(-50%) translateX(-50%);
  border-radius: 50%;
}
.Hylia-a-avatar--xlarge {
  width: 15rem;
  height: 15rem;
}
.Hylia-a-avatar--xlarge:before {
  width: 13rem;
  height: 13rem;
  border-width: 0.4rem;
  transform: translateY(-50%) translateX(-50%) scale(1.1);
}
.Hylia-a-avatar--xlarge:hover .Hylia-a-avatar__wrapper {
  width: 15rem;
  height: 15rem;
}
.Hylia-a-avatar--xlarge .Hylia-a-avatar__wrapper {
  width: 13rem;
  height: 13rem;
}
.Hylia-a-avatar--xlarge .Hylia-a-avatar__picture {
  width: 15rem;
  height: 15rem;
}
.Hylia-a-avatar--xlarge.Hylia-a-avatar--initial .Hylia-a-avatar__initial {
  font-size: 7rem;
}
.Hylia-a-avatar--xlarge.Hylia-a-avatar--initial i {
  font-size: 14.5rem;
  top: 2rem;
}
.Hylia-a-avatar--large {
  width: 7.6rem;
  height: 7.6rem;
}
.Hylia-a-avatar--large:before {
  width: 6.6rem;
  height: 6.6rem;
  border-width: 0.2rem;
  transform: translateY(-50%) translateX(-50%) scale(1.1);
}
.Hylia-a-avatar--large:hover .Hylia-a-avatar__wrapper {
  width: 7.6rem;
  height: 7.6rem;
}
.Hylia-a-avatar--large .Hylia-a-avatar__wrapper {
  width: 6.6rem;
  height: 6.6rem;
}
.Hylia-a-avatar--large .Hylia-a-avatar__picture {
  width: 8.6rem;
  height: 8.6rem;
}
.Hylia-a-avatar--large.Hylia-a-avatar--initial .Hylia-a-avatar__initial {
  font-size: 4rem;
}
.Hylia-a-avatar--large.Hylia-a-avatar--initial i {
  font-size: 7rem;
  top: 1.8rem;
}
.Hylia-a-avatar--medium {
  width: 6rem;
  height: 6rem;
}
.Hylia-a-avatar--medium:before {
  width: 4.5rem;
  height: 4.5rem;
  border-width: 0.2rem;
  transform: translateY(-50%) translateX(-50%) scale(1.1);
}
.Hylia-a-avatar--medium:hover .Hylia-a-avatar__wrapper {
  width: 5.5rem;
  height: 5.5rem;
}
.Hylia-a-avatar--medium .Hylia-a-avatar__wrapper {
  width: 4.5rem;
  height: 4.5rem;
}
.Hylia-a-avatar--medium .Hylia-a-avatar__picture {
  width: 5.5rem;
  height: 5.5rem;
}
.Hylia-a-avatar--medium.Hylia-a-avatar--initial .Hylia-a-avatar__initial {
  font-size: 2.5rem;
}
.Hylia-a-avatar--medium.Hylia-a-avatar--initial i {
  font-size: 5rem;
  top: 1rem;
}
.Hylia-a-avatar--small {
  width: 4rem;
  height: 4rem;
}
.Hylia-a-avatar--small:before {
  width: 3rem;
  height: 3rem;
  border-width: 0.2rem;
  transform: translateY(-50%) translateX(-50%) scale(1.1);
}
.Hylia-a-avatar--small:hover .Hylia-a-avatar__wrapper {
  width: 4rem;
  height: 4rem;
}
.Hylia-a-avatar--small .Hylia-a-avatar__wrapper {
  width: 3rem;
  height: 3rem;
}
.Hylia-a-avatar--small .Hylia-a-avatar__picture {
  width: 4rem;
  height: 4rem;
}
.Hylia-a-avatar--small.Hylia-a-avatar--initial .Hylia-a-avatar__initial {
  font-size: 2rem;
}
.Hylia-a-avatar--small.Hylia-a-avatar--initial i {
  font-size: 3.6rem;
  top: 0.8rem;
}
.Hylia-a-avatar--xsmall {
  width: 3rem;
  height: 3rem;
}
.Hylia-a-avatar--xsmall:before {
  width: 2.4rem;
  height: 2.4rem;
  border-width: 0.1rem;
  transform: translateY(-50%) translateX(-50%) scale(1.1);
}
.Hylia-a-avatar--xsmall:hover .Hylia-a-avatar__wrapper {
  width: 3rem;
  height: 3rem;
}
.Hylia-a-avatar--xsmall .Hylia-a-avatar__wrapper {
  width: 2.4rem;
  height: 2.4rem;
}
.Hylia-a-avatar--xsmall .Hylia-a-avatar__picture {
  width: 3.4rem;
  height: 3.4rem;
}
.Hylia-a-avatar--xsmall.Hylia-a-avatar--initial .Hylia-a-avatar__initial {
  font-size: 1.5rem;
}
.Hylia-a-avatar--xsmall.Hylia-a-avatar--initial i {
  font-size: 2.8rem;
  top: 0.8rem;
}
.loader  {
  background: #FFFFFF;
  position: fixed;
  z-index: 10000;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}
.loader  .loader__spinner {
  color: #124D72;
  font-size: 1em;
  width: 1em;
  height: 1em;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  text-indent: -9999rem;
  transform: translate(-50%, -50%) translateZ(0);
  animation: loader 1.3s infinite linear;
}
@keyframes loader {
  0%,
  100% {
    box-shadow: 0 -3rem 0 0.2rem, 2rem -2rem 0 0rem, 3rem 0 0 -1rem, 2rem 2rem 0 -1rem, 0 3rem 0 -1rem, -2rem 2rem 0 -1rem, -3rem 0 0 -1rem, -2rem -2rem 0 0;
  }
  12.5% {
    box-shadow: 0 -3rem 0 0, 2rem -2rem 0 0.2rem, 3rem 0 0 0, 2rem 2rem 0 -1rem, 0 3rem 0 -1rem, -2rem 2rem 0 -1rem, -3rem 0 0 -1rem, -2rem -2rem 0 -1rem;
  }
  25% {
    box-shadow: 0 -3rem 0 -0.5rem, 2rem -2rem 0 0, 3rem 0 0 0.2rem, 2rem 2rem 0 0, 0 3rem 0 -1rem, -2rem 2rem 0 -1rem, -3rem 0 0 -1rem, -2rem -2rem 0 -1rem;
  }
  37.5% {
    box-shadow: 0 -3rem 0 -1rem, 2rem -2rem 0 -1rem, 3rem 0rem 0 0, 2rem 2rem 0 0.2rem, 0 3rem 0 0rem, -2rem 2rem 0 -1rem, -3rem 0rem 0 -1rem, -2rem -2rem 0 -1rem;
  }
  50% {
    box-shadow: 0 -3rem 0 -1rem, 2rem -2rem 0 -1rem, 3rem 0 0 -1rem, 2rem 2rem 0 0rem, 0 3rem 0 0.2rem, -2rem 2rem 0 0, -3rem 0rem 0 -1rem, -2rem -2rem 0 -1rem;
  }
  62.5% {
    box-shadow: 0 -3rem 0 -1rem, 2rem -2rem 0 -1rem, 3rem 0 0 -1rem, 2rem 2rem 0 -1rem, 0 3rem 0 0, -2rem 2rem 0 0.2rem, -3rem 0 0 0, -2rem -2rem 0 -1rem;
  }
  75% {
    box-shadow: 0rem -3rem 0 -1rem, 2rem -2rem 0 -1rem, 3rem 0rem 0 -1rem, 2rem 2rem 0 -1rem, 0 3rem 0 -1rem, -2rem 2rem 0 0, -3rem 0rem 0 0.2rem, -2rem -2rem 0 0;
  }
  87.5% {
    box-shadow: 0rem -3rem 0 0, 2rem -2rem 0 -1rem, 3rem 0 0 -1rem, 2rem 2rem 0 -1rem, 0 3rem 0 -1rem, -2rem 2rem 0 0, -3rem 0rem 0 0, -2rem -2rem 0 0.2rem;
  }
}
.background--zerg {
  background-color: #b30062;
}
.background--white {
  background-color: #FFFFFF;
}
.background--vader {
  background-color: #333333;
}
.background--terran {
  background-color: #337BB8;
}
.background--stormtrooper {
  background-color: #FFFFFF;
}
.background--smartDark {
  background-color: #0B3F46;
}
.background--smartDark {
  background-color: #0B3F46;
}
.background--smartSky {
  background-color: #4580A5;
}
.background--smartBlue {
  background-color: #124D72;
}
.background--smart {
  background-color: #124D72;
}
.background--schtroumpf {
  background-color: #4c84ff;
}
.background--saien {
  background-color: #E47524;
}
.background--ruban {
  background-color: #D11548;
}
.background--red {
  background-color: #D11548;
}
.background--protoss {
  background-color: #fddc41;
}
.background--orange {
  background-color: #E47524;
}
.background--namek {
  background-color: #308449;
}
.background--namec {
  background-color: #225F34;
}
.background--minion {
  background-color: #E1E3E5;
}
.background--lightGray {
  background-color: #F0F0F0;
}
.background--knight {
  background-color: #737373;
}
.background--harkonnem {
  background-color: #31b87b;
}
.background--green {
  background-color: #308449;
}
.background--electricBlue {
  background-color: #337BB8;
}
.background--darkRed {
  background-color: #A31038;
}
.background--darkOrange {
  background-color: #A75215;
}
.background--darkGreen {
  background-color: #225F34;
}
.background--darkGray {
  background-color: #737373;
}
.background--darkBlue {
  background-color: #0B3F46;
}
.background--clearRed {
  background-color: #FDE8EE;
}
.background--clearOrange {
  background-color: #FFF2CC;
}
.background--clearGreen {
  background-color: #DBF2E2;
}
.background--clearGray {
  background-color: #FAFAFA;
}
.background--clearBlue {
  background-color: #C1E1F5;
}
.background--brightGreen {
  background-color: #31b87b;
}
.background--brightGray {
  background-color: #E1E3E5;
}
.background--atreide {
  background-color: #b1b491;
}
.background--apprentice {
  background-color: #d1d3d5;
}
.background--adept {
  background-color: #F0F0F0;
}
.background--acolyte {
  background-color: #FAFAFA;
}
.background--application {
  background-color: #F0F0F0;
}
.Hylia-a-badge {
  color: #124D72;
  padding: 1rem;
  font-family: "Roboto_medium";
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: 0 1rem;
  height: 2.3rem;
  font-size: 1.3rem;
}
.Hylia-a-badge__background {
  border-radius: 100rem;
  background-color: currentColor;
  opacity: 0.2;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}
.Hylia-a-badge:empty {
  height: .4rem;
  width: 4rem;
  border-radius: 100rem;
  background-color: currentColor;
}
.Hylia-a-button {
  font-family: "RobotoCondensed_regular";
  font-size: 1.4rem;
  position: relative;
  min-width: 11.5rem;
  height: 3.5rem;
  margin: 0 0.5rem;
  padding: 0 1rem;
  border: none;
  border-radius: 0.4rem;
}
.Hylia-a-button:not(:disabled) {
  cursor: pointer;
}
.Hylia-a-button__counter {
  font-family: "RobotoCondensed_bold";
  font-size: 1.3rem;
  line-height: 2.2rem;
  position: absolute;
  top: 50%;
  right: 1rem;
  min-width: 2.3rem;
  height: 2.2rem;
  padding: 0 0.5rem;
  transform: translateY(-50%);
  color: #124D72;
  border-radius: 1000rem;
  background-color: #FFFFFF;
}
.Hylia-a-button--full {
  min-width: 100%;
}
.Hylia-a-button--icon {
  padding: 0 3.5rem;
}
.Hylia-a-button--icon i {
  position: absolute;
  top: 50%;
  left: 1rem;
  padding-right: 1rem;
  transform: translateY(-50%);
}
.Hylia-a-button--counter {
  padding: 0 5rem;
}
.Hylia-a-button--counter.Hylia-a-button-primary--positive .Hylia-a-button__counter {
  color: #308449;
}
.Hylia-a-button--counter.Hylia-a-button-primary--warning .Hylia-a-button__counter {
  color: #E47524;
}
.Hylia-a-button--counter.Hylia-a-button-primary--negative .Hylia-a-button__counter {
  color: #D11548;
}
.Hylia-a-button--counter.Hylia-a-button-secondary--positive .Hylia-a-button__counter {
  color: #FFFFFF;
  background-color: #308449;
}
.Hylia-a-button--counter.Hylia-a-button-secondary--warning .Hylia-a-button__counter {
  color: #FFFFFF;
  background-color: #E47524;
}
.Hylia-a-button--counter.Hylia-a-button-secondary--negative .Hylia-a-button__counter {
  color: #FFFFFF;
  background-color: #D11548;
}
.Hylia-a-button--small {
  line-height: 2.3rem;
  height: 2.4rem;
}
.Hylia-a-button-primary {
  transition: background-color 0.3s, border 0.3s;
  color: #FFFFFF;
  border-width: 0.1rem;
  border-style: solid;
  border-color: #124D72;
  background-color: #124D72;
}
.Hylia-a-button-primary:not(:disabled):hover {
  border: 0.1rem solid #0b2f46;
  background-color: #0b2f46;
}
.Hylia-a-button-primary:not(:disabled):active {
  background-color: #0b2f46;
}
.Hylia-a-button-primary:not(:disabled):focus {
  animation: onPressDefault 1s;
}
.Hylia-a-button-primary:disabled {
  color: #737373;
  border: 0.1rem solid #d1d3d5;
  background-color: #d1d3d5;
}
.Hylia-a-button-primary--positive {
  color: #FFFFFF;
  border-color: #308449;
  background-color: #308449;
}
.Hylia-a-button-primary--positive:not(:disabled):hover {
  border: 0.1rem solid #225f34;
  background-color: #225f34;
}
.Hylia-a-button-primary--positive:not(:disabled):active {
  background-color: #225f34;
}
.Hylia-a-button-primary--positive:not(:disabled):focus {
  animation: onPressPositive 1s;
}
.Hylia-a-button-primary--warning {
  color: #FFFFFF;
  border-color: #E47524;
  background-color: #E47524;
}
.Hylia-a-button-primary--warning:not(:disabled):hover {
  border: 0.1rem solid #be5e17;
  background-color: #be5e17;
}
.Hylia-a-button-primary--warning:not(:disabled):active {
  background-color: #be5e17;
}
.Hylia-a-button-primary--warning:not(:disabled):focus {
  animation: onPressWarning 1s;
}
.Hylia-a-button-primary--negative {
  color: #FFFFFF;
  border-color: #D11548;
  background-color: #D11548;
}
.Hylia-a-button-primary--negative:not(:disabled):hover {
  border: 0.1rem solid #a31038;
  background-color: #a31038;
}
.Hylia-a-button-primary--negative:not(:disabled):active {
  background-color: #a31038;
}
.Hylia-a-button-primary--negative:not(:disabled):focus {
  animation: onPressNegative 1s;
}
.Hylia-a-button-secondary {
  transition: background-color 0.3s, color 0.3s;
  color: #124D72;
  border-width: 0.1rem;
  border-style: solid;
  border-color: #124D72;
  background-color: #FFFFFF;
}
.Hylia-a-button-secondary:not(:disabled):hover {
  color: #FFFFFF;
  background-color: #124D72;
}
.Hylia-a-button-secondary:not(:disabled):hover .Hylia-a-button__counter {
  color: #124D72;
  background-color: #FFFFFF;
}
.Hylia-a-button-secondary:not(:disabled):active {
  background-color: #0b2f46;
}
.Hylia-a-button-secondary:not(:disabled):focus {
  animation: onPressDefault 1s;
}
.Hylia-a-button-secondary .Hylia-a-button__counter {
  color: #FFFFFF;
  background-color: #124D72;
}
.Hylia-a-button-secondary:disabled {
  color: #d1d3d5;
  border: #d1d3d5 0.1rem solid;
}
.Hylia-a-button-secondary--positive {
  color: #308449;
  border-color: #308449;
}
.Hylia-a-button-secondary--positive:not(:disabled):hover {
  border: 0.1rem solid #308449;
  background-color: #308449;
}
.Hylia-a-button-secondary--positive:not(:disabled):active {
  background-color: #308449;
}
.Hylia-a-button-secondary--positive:not(:disabled):focus {
  animation: onPressPositive 1s;
}
.Hylia-a-button-secondary--warning {
  color: #E47524;
  border-color: #E47524;
}
.Hylia-a-button-secondary--warning:not(:disabled):hover {
  border: 0.1rem solid #E47524;
  background-color: #E47524;
}
.Hylia-a-button-secondary--warning:not(:disabled):active {
  background-color: #E47524;
}
.Hylia-a-button-secondary--warning:not(:disabled):focus {
  animation: onPressWarning 1s;
}
.Hylia-a-button-secondary--negative {
  color: #D11548;
  border-color: #D11548;
}
.Hylia-a-button-secondary--negative:not(:disabled):hover {
  border: 0.1rem solid #D11548;
  background-color: #D11548;
}
.Hylia-a-button-secondary--negative:not(:disabled):active {
  background-color: #D11548;
}
.Hylia-a-button-secondary--negative:not(:disabled):focus {
  animation: onPressNegative 1s;
}
.Hylia-a-button-standard {
  transition: all 0.3s;
  color: #124D72;
  border: 0.1rem solid #FFFFFF;
  background-color: #FFFFFF;
  box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.2);
}
.Hylia-a-button-standard:not(:disabled):hover {
  border: 0.1rem solid #124D72;
}
.Hylia-a-button-standard:not(:disabled):focus {
  animation: onPressDefault 1s;
}
.Hylia-a-button-ghost {
  min-width: auto;
  transition: all 0.3s;
  color: #124D72;
  border: 0.1rem solid transparent;
  background-color: transparent;
}
.Hylia-a-button-ghost:not(:disabled):hover {
  box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.2);
  background-color: #FFFFFF;
}
.Hylia-a-button-ghost:not(:disabled):focus {
  animation: onPressDefault 1s;
}
.Hylia-a-button-ghost--positive {
  color: #308449;
}
.Hylia-a-button-ghost--positive:not(:disabled):hover {
  border: 0.1rem solid #308449;
  background-color: #FFFFFF;
}
.Hylia-a-button-ghost--positive:not(:disabled):focus {
  animation: onPressPositive 1s;
}
.Hylia-a-button-ghost--warning {
  color: #E47524;
}
.Hylia-a-button-ghost--warning:not(:disabled):hover {
  border: 0.1rem solid #E47524;
  background-color: #FFFFFF;
}
.Hylia-a-button-ghost--warning:not(:disabled):focus {
  animation: onPressWarning 1s;
}
.Hylia-a-button-ghost--negative {
  color: #D11548;
}
.Hylia-a-button-ghost--negative:not(:disabled):hover {
  border: 0.1rem solid #D11548;
  background-color: #FFFFFF;
}
.Hylia-a-button-ghost--negative:not(:disabled):focus {
  animation: onPressNegative 1s;
}
.Hylia-a-button-hollow {
  color: #124D72;
  border: dashed 0.1rem currentColor;
}
.Hylia-a-button-round {
  font-size: 1.8rem;
  line-height: 3.6rem;
  justify-content: center;
  align-items: center;
  display: inline-flex;
  width: 3.5rem;
  min-width: auto;
  height: 3.5rem;
  padding: 0;
  border-radius: 50%;
}
.Hylia-a-button-round i {
  padding: 0;
  position: static;
  transform: translate(0, 0);
}
@keyframes onPressDefault {
  0% {
    box-shadow: 0 0 0 0 #124D72;
  }
  100% {
    box-shadow: 0 0 0 0.6rem rgba(18, 77, 114, 0);
  }
}
@keyframes onPressPositive {
  0% {
    box-shadow: 0 0 0 0 #308449;
  }
  100% {
    box-shadow: 0 0 0 0.6rem rgba(48, 132, 73, 0);
  }
}
@keyframes onPressWarning {
  0% {
    box-shadow: 0 0 0 0 #E47524;
  }
  100% {
    box-shadow: 0 0 0 0.6rem rgba(228, 117, 36, 0);
  }
}
@keyframes onPressNegative {
  0% {
    box-shadow: 0 0 0 0 #D11548;
  }
  100% {
    box-shadow: 0 0 0 0.6rem rgba(209, 21, 72, 0);
  }
}
.border-color--zerg {
  border-color: #b30062;
}
.border-color--white {
  border-color: #FFFFFF;
}
.border-color--vader {
  border-color: #333333;
}
.border-color--terran {
  border-color: #337BB8;
}
.border-color--stormtrooper {
  border-color: #FFFFFF;
}
.border-color--smartDark {
  border-color: #0B3F46;
}
.border-color--smartDark {
  border-color: #0B3F46;
}
.border-color--smartSky {
  border-color: #4580A5;
}
.border-color--smartBlue {
  border-color: #124D72;
}
.border-color--smart {
  border-color: #124D72;
}
.border-color--schtroumpf {
  border-color: #4c84ff;
}
.border-color--saien {
  border-color: #E47524;
}
.border-color--ruban {
  border-color: #D11548;
}
.border-color--red {
  border-color: #D11548;
}
.border-color--protoss {
  border-color: #fddc41;
}
.border-color--orange {
  border-color: #E47524;
}
.border-color--namek {
  border-color: #308449;
}
.border-color--namec {
  border-color: #225F34;
}
.border-color--minion {
  border-color: #E1E3E5;
}
.border-color--lightGray {
  border-color: #F0F0F0;
}
.border-color--knight {
  border-color: #737373;
}
.border-color--harkonnem {
  border-color: #31b87b;
}
.border-color--green {
  border-color: #308449;
}
.border-color--electricBlue {
  border-color: #337BB8;
}
.border-color--darkRed {
  border-color: #A31038;
}
.border-color--darkOrange {
  border-color: #A75215;
}
.border-color--darkGreen {
  border-color: #225F34;
}
.border-color--darkGray {
  border-color: #737373;
}
.border-color--darkBlue {
  border-color: #0B3F46;
}
.border-color--clearRed {
  border-color: #FDE8EE;
}
.border-color--clearOrange {
  border-color: #FFF2CC;
}
.border-color--clearGreen {
  border-color: #DBF2E2;
}
.border-color--clearGray {
  border-color: #FAFAFA;
}
.border-color--clearBlue {
  border-color: #C1E1F5;
}
.border-color--brightGreen {
  border-color: #31b87b;
}
.border-color--brightGray {
  border-color: #E1E3E5;
}
.border-color--atreide {
  border-color: #b1b491;
}
.border-color--apprentice {
  border-color: #d1d3d5;
}
.border-color--adept {
  border-color: #F0F0F0;
}
.border-color--acolyte {
  border-color: #FAFAFA;
}
.color--zerg {
  color: #b30062;
}
.color--white {
  color: #FFFFFF;
}
.color--vader {
  color: #333333;
}
.color--terran {
  color: #337BB8;
}
.color--stormtrooper {
  color: #FFFFFF;
}
.color--smartDark {
  color: #0B3F46;
}
.color--smartDark {
  color: #0B3F46;
}
.color--smartSky {
  color: #4580A5;
}
.color--smartBlue {
  color: #124D72;
}
.color--smart {
  color: #124D72;
}
.color--schtroumpf {
  color: #4c84ff;
}
.color--saien {
  color: #E47524;
}
.color--ruban {
  color: #D11548;
}
.color--red {
  color: #D11548;
}
.color--protoss {
  color: #fddc41;
}
.color--orange {
  color: #E47524;
}
.color--namek {
  color: #308449;
}
.color--namec {
  color: #225F34;
}
.color--minion {
  color: #E1E3E5;
}
.color--lightGray {
  color: #F0F0F0;
}
.color--knight {
  color: #737373;
}
.color--harkonnem {
  color: #31b87b;
}
.color--green {
  color: #308449;
}
.color--electricBlue {
  color: #337BB8;
}
.color--darkRed {
  color: #A31038;
}
.color--darkOrange {
  color: #A75215;
}
.color--darkGreen {
  color: #225F34;
}
.color--darkGray {
  color: #737373;
}
.color--darkBlue {
  color: #0B3F46;
}
.color--clearRed {
  color: #FDE8EE;
}
.color--clearOrange {
  color: #FFF2CC;
}
.color--clearGreen {
  color: #DBF2E2;
}
.color--clearGray {
  color: #FAFAFA;
}
.color--clearBlue {
  color: #C1E1F5;
}
.color--brightGreen {
  color: #31b87b;
}
.color--brightGray {
  color: #E1E3E5;
}
.color--atreide {
  color: #b1b491;
}
.color--apprentice {
  color: #d1d3d5;
}
.color--adept {
  color: #F0F0F0;
}
.color--acolyte {
  color: #FAFAFA;
}
.background-color--zerg {
  background-color: #b30062;
}
.background-color--white {
  background-color: #FFFFFF;
}
.background-color--vader {
  background-color: #333333;
}
.background-color--terran {
  background-color: #337BB8;
}
.background-color--stormtrooper {
  background-color: #FFFFFF;
}
.background-color--smartDark {
  background-col