/* Global styles. */

/* Eric Meyer's "Reset CSS" 2.0 */

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}

body {
  line-height: 1;
}

ol,
ul {
  list-style: none;
}

blockquote,
q {
  quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
  content: '';
  content: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

html,
body {
  text-rendering: geometricPrecision;
}
/* Collection of standard mixins, being used all around. */

/* Auxiliary mixins for fonts inclusion. */

/**
 * Includes a font, provided as a set of alternative files in EOT, WOFF, TTF,
 * SVG formats into the app.
 * $font-name {String}
 * $font-weight {Number}
 * $font-style {String}
 * $font-url {String} Path to the font file, without the filename itself.
 * $font-file {String} Font filename, without extension (should be the same for
 *  each version of the font in different formats.
 */

/**
 * Includes a font, provided in the TTF format only.
 * $font-name {String}
 * $font-weight {Number}
 * $font-style {String}
 * $font-url {String}
 */

/**
 * Mixins for different layout sizes: xs, sm, md, lg.
 * Breaking points are defined in _variables.scss
 * The range mixins A-to-B all means "for the sizes from A to B, both
 * inclusive", in particular it means that mixin A-to-lg is equivalent to
 * all sizes from A (inclusive) and larger.
 *
 * NOTE: For convenience, these mixins are sorted not alphabetically, but,
 * first, by increase of the first size; second, by increase of the second size.
 */

/* Break points. */

/* XS */

/* XS */

/* MD */

/* LG */

/* XL */

body.scrolling-disabled-by-modal {
  overflow: hidden;
}

.src-shared-components-Modal-style___overlay___X12tn9 {
  background: #ebebeb;
  border: none;
  height: 100%;
  left: 0;
  opacity: 0.8;
  outline: none;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 998;
}

.src-shared-components-Modal-style___container___1SoeQl {
  background: #fff;
  box-shadow: 0 0 14px 1px rgba(38, 38, 40, 0.15);
  border-radius: 4;
  max-height: 95vh;
  max-width: 1024px;
  overflow: hidden;
  padding: 40;
  width: 480px;
  position: fixed;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  z-index: 999;
}

@media (max-width: 1280px) {
  .src-shared-components-Modal-style___container___1SoeQl {
    max-width: 95vw;
  }
}

@media (max-width: 768px) {
  .src-shared-components-Modal-style___container___1SoeQl {
    padding: 40px 10px;
  }
}
.src-shared-components-ScalableRect-style___container___3YhfNf {
  position: relative;
  width: 100%;
}

.src-shared-components-ScalableRect-style___wrapper___3qZoWe {
  height: 100%;
  position: absolute;
  width: 100%;
}

/**
 * Misc constants that specify TC UI style.
 */

/**
 * Base spacing size and corner radius. All spacinings and corner radii in
 * Topcoder designs are supposed to be multiple of these. In many cases it
 * is better not to use these two constants in your styles, because styles
 * with many calculations depending on $base-units and $corner-radius are
 * hard to read, and difficult to compare with design specifications. Having
 * the final pixel numbers in the stylesheets appears to be a way more
 * convenient
 */

/**
 * The standard TC UI pallete. Always prefer to use these constants to set
 * colors in your stylesheets.
 */

/* Grayscale colors. */

/* Accents & Shades. */

/* Light Blue - design color code. */

/* Warm Orange - data science color code. */

/* Red - used for warnings/ */

/* Yellow. */

/* Greens - development color code. */

/* Purples. */

/* TC Metal colors - Badges.
 *
 * For metals the level 100 is the base metal color; 110 is for text inside
 * the metal-colored areas; and 130 is for small text inside metal-colored
 * areas, for better visibility. */

/* Pastel colors, used for levels. */

/* Color aliases. */

/* Base metal colors. */

/* Brand colors. */

/* Community achievement color codes. */

/* Collection of standard mixins, being used all around. */

/* Auxiliary mixins for fonts inclusion. */

/**
 * Includes a font, provided as a set of alternative files in EOT, WOFF, TTF,
 * SVG formats into the app.
 * $font-name {String}
 * $font-weight {Number}
 * $font-style {String}
 * $font-url {String} Path to the font file, without the filename itself.
 * $font-file {String} Font filename, without extension (should be the same for
 *  each version of the font in different formats.
 */

/**
 * Includes a font, provided in the TTF format only.
 * $font-name {String}
 * $font-weight {Number}
 * $font-style {String}
 * $font-url {String}
 */

/**
 * Mixins for different layout sizes: xs, sm, md, lg.
 * Breaking points are defined in _variables.scss
 * The range mixins A-to-B all means "for the sizes from A to B, both
 * inclusive", in particular it means that mixin A-to-lg is equivalent to
 * all sizes from A (inclusive) and larger.
 *
 * NOTE: For convenience, these mixins are sorted not alphabetically, but,
 * first, by increase of the first size; second, by increase of the second size.
 */

/* Break points. */

/* XS */

/* XS */

/* MD */

/* LG */

/* XL */

/**
 * Typography-related mixins:
 *  - Font styles;
 *  - Label text styles;
 *  - Body text styles;
 *  - Heading text styles.
 */

/* Font styles. */

/* Mono version of the roboto font. */

/* Label text styles. */

/* Body text styles. */

/* Heading text styles. */

/* Titles text styles. */

/**
 * Mixing of inline styles for a generic text block.
 *
 * TODO: In my understanding, it violates UI styleguides in various aspects,
 * thus it is placed here for now, and not into UI Kit library. This code comes
 * from challenges related to Contentful integration, ContentBlocks,
 * in particular, that was done without a close watch on the design. It is
 * separated into mixing, as other Contentful components also need inline
 * styles, thus we at least should keep them consistent between different
 * Contentful components, and later clean them all to match UI Kit.
 */

/**
 * This module contains font declarations. When you use it, please use the
 * following numerical font weights, instaed of the weight names:
 * 100   Thin (Hairline)
 * 200   Extra Light (Ultra Light)
 * 300   Light
 * 400   Normal
 * 500   Medium
 * 600   Semi Bold (Demi Bold)
 * 700   Bold
 * 800   Extra Bold (Ultra Bold)
 * 900   Black (Heavy)
 */

/* Roboto is the main font i;n the TC UI Kit. */

@font-face {
  font-family: "Roboto";
  src: url(~topcoder-react-ui-kit/src/assets/fonts/roboto/roboto-black.eot);
  src: url(~topcoder-react-ui-kit/src/assets/fonts/roboto/roboto-black.eot?#iefix) format("embedded-opentype"), url(~topcoder-react-ui-kit/src/assets/fonts/roboto/roboto-black.woff) format("woff"), url(~topcoder-react-ui-kit/src/assets/fonts/roboto/roboto-black.ttf) format("truetype"), url(~topcoder-react-ui-kit/src/assets/fonts/roboto/roboto-black.svg#Roboto) format("svg");
  font-weight: 900;
  font-style: normal;
}

@font-face {
  font-family: "Roboto";
  src: url(~topcoder-react-ui-kit/src/assets/fonts/roboto/roboto-blackitalic.eot);
  src: url(~topcoder-react-ui-kit/src/assets/fonts/roboto/roboto-blackitalic.eot?#iefix) format("embedded-opentype"), url(~topcoder-react-ui-kit/src/assets/fonts/roboto/roboto-blackitalic.woff) format("woff"), url(~topcoder-react-ui-kit/src/assets/fonts/roboto/roboto-blackitalic.ttf) format("truetype"), url(~topcoder-react-ui-kit/src/assets/fonts/roboto/roboto-blackitalic.svg#Roboto) format("svg");
  font-weight: 900;
  font-style: italic;
}

@font-face {
  font-family: "Roboto";
  src: url(~topcoder-react-ui-kit/src/assets/fonts/roboto/roboto-bold.eot);
  src: url(~topcoder-react-ui-kit/src/assets/fonts/roboto/roboto-bold.eot?#iefix) format("embedded-opentype"), url(~topcoder-react-ui-kit/src/assets/fonts/roboto/roboto-bold.woff) format("woff"), url(~topcoder-react-ui-kit/src/assets/fonts/roboto/roboto-bold.ttf) format("truetype"), url(~topcoder-react-ui-kit/src/assets/fonts/roboto/roboto-bold.svg#Roboto) format("svg");
  font-weight: 700;
  font-style: normal;
}

@font-face {
  font-family: "Roboto";
  src: url(~topcoder-react-ui-kit/src/assets/fonts/roboto/roboto-bolditalic.eot);
  src: url(~topcoder-react-ui-kit/src/assets/fonts/roboto/roboto-bolditalic.eot?#iefix) format("embedded-opentype"), url(~topcoder-react-ui-kit/src/assets/fonts/roboto/roboto-bolditalic.woff) format("woff"), url(~topcoder-react-ui-kit/src/assets/fonts/roboto/roboto-bolditalic.ttf) format("truetype"), url(~topcoder-react-ui-kit/src/assets/fonts/roboto/roboto-bolditalic.svg#Roboto) format("svg");
  font-weight: 700;
  font-style: italic;
}

@font-face {
  font-family: "Roboto";
  src: url(~topcoder-react-ui-kit/src/assets/fonts/roboto/roboto-medium.eot);
  src: url(~topcoder-react-ui-kit/src/assets/fonts/roboto/roboto-medium.eot?#iefix) format("embedded-opentype"), url(~topcoder-react-ui-kit/src/assets/fonts/roboto/roboto-medium.woff) format("woff"), url(~topcoder-react-ui-kit/src/assets/fonts/roboto/roboto-medium.ttf) format("truetype"), url(~topcoder-react-ui-kit/src/assets/fonts/roboto/roboto-medium.svg#Roboto) format("svg");
  font-weight: 500;
  font-style: normal;
}

@font-face {
  font-family: "Roboto";
  src: url(~topcoder-react-ui-kit/src/assets/fonts/roboto/roboto-mediumitalic.eot);
  src: url(~topcoder-react-ui-kit/src/assets/fonts/roboto/roboto-mediumitalic.eot?#iefix) format("embedded-opentype"), url(~topcoder-react-ui-kit/src/assets/fonts/roboto/roboto-mediumitalic.woff) format("woff"), url(~topcoder-react-ui-kit/src/assets/fonts/roboto/roboto-mediumitalic.ttf) format("truetype"), url(~topcoder-react-ui-kit/src/assets/fonts/roboto/roboto-mediumitalic.svg#Roboto) format("svg");
  font-weight: 500;
  font-style: italic;
}

@font-face {
  font-family: "Roboto";
  src: url(~topcoder-react-ui-kit/src/assets/fonts/roboto/roboto-regular.eot);
  src: url(~topcoder-react-ui-kit/src/assets/fonts/roboto/roboto-regular.eot?#iefix) format("embedded-opentype"), url(~topcoder-react-ui-kit/src/assets/fonts/roboto/roboto-regular.woff) format("woff"), url(~topcoder-react-ui-kit/src/assets/fonts/roboto/roboto-regular.ttf) format("truetype"), url(~topcoder-react-ui-kit/src/assets/fonts/roboto/roboto-regular.svg#Roboto) format("svg");
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: "Roboto";
  src: url(~topcoder-react-ui-kit/src/assets/fonts/roboto/roboto-italic.eot);
  src: url(~topcoder-react-ui-kit/src/assets/fonts/roboto/roboto-italic.eot?#iefix) format("embedded-opentype"), url(~topcoder-react-ui-kit/src/assets/fonts/roboto/roboto-italic.woff) format("woff"), url(~topcoder-react-ui-kit/src/assets/fonts/roboto/roboto-italic.ttf) format("truetype"), url(~topcoder-react-ui-kit/src/assets/fonts/roboto/roboto-italic.svg#Roboto) format("svg");
  font-weight: 400;
  font-style: italic;
}

@font-face {
  font-family: "Roboto";
  src: url(~topcoder-react-ui-kit/src/assets/fonts/roboto/roboto-light.eot);
  src: url(~topcoder-react-ui-kit/src/assets/fonts/roboto/roboto-light.eot?#iefix) format("embedded-opentype"), url(~topcoder-react-ui-kit/src/assets/fonts/roboto/roboto-light.woff) format("woff"), url(~topcoder-react-ui-kit/src/assets/fonts/roboto/roboto-light.ttf) format("truetype"), url(~topcoder-react-ui-kit/src/assets/fonts/roboto/roboto-light.svg#Roboto) format("svg");
  font-weight: 300;
  font-style: normal;
}

@font-face {
  font-family: "Roboto";
  src: url(~topcoder-react-ui-kit/src/assets/fonts/roboto/roboto-lightitalic.eot);
  src: url(~topcoder-react-ui-kit/src/assets/fonts/roboto/roboto-lightitalic.eot?#iefix) format("embedded-opentype"), url(~topcoder-react-ui-kit/src/assets/fonts/roboto/roboto-lightitalic.woff) format("woff"), url(~topcoder-react-ui-kit/src/assets/fonts/roboto/roboto-lightitalic.ttf) format("truetype"), url(~topcoder-react-ui-kit/src/assets/fonts/roboto/roboto-lightitalic.svg#Roboto) format("svg");
  font-weight: 300;
  font-style: italic;
}

@font-face {
  font-family: "Roboto";
  src: url(~topcoder-react-ui-kit/src/assets/fonts/roboto/roboto-thin.eot);
  src: url(~topcoder-react-ui-kit/src/assets/fonts/roboto/roboto-thin.eot?#iefix) format("embedded-opentype"), url(~topcoder-react-ui-kit/src/assets/fonts/roboto/roboto-thin.woff) format("woff"), url(~topcoder-react-ui-kit/src/assets/fonts/roboto/roboto-thin.ttf) format("truetype"), url(~topcoder-react-ui-kit/src/assets/fonts/roboto/roboto-thin.svg#Roboto) format("svg");
  font-weight: 100;
  font-style: normal;
}

@font-face {
  font-family: "Roboto";
  src: url(~topcoder-react-ui-kit/src/assets/fonts/roboto/roboto-thinitalic.eot);
  src: url(~topcoder-react-ui-kit/src/assets/fonts/roboto/roboto-thinitalic.eot?#iefix) format("embedded-opentype"), url(~topcoder-react-ui-kit/src/assets/fonts/roboto/roboto-thinitalic.woff) format("woff"), url(~topcoder-react-ui-kit/src/assets/fonts/roboto/roboto-thinitalic.ttf) format("truetype"), url(~topcoder-react-ui-kit/src/assets/fonts/roboto/roboto-thinitalic.svg#Roboto) format("svg");
  font-weight: 100;
  font-style: italic;
}
.src-shared-components-Avatar-style___avatar___3QhkHA {
  border-radius: 16px;
  height: 32px;
  width: 32px;
}
/**
 * Danger button (red background, white text).
 */

/**
 * The default button theme: white button with dark gray label, gray border, and
 * some extra effects in different state.
 *
 * The comments in this file explain how to write a custom button theme.
 */

/**
 * Misc constants that specify TC UI style.
 */

/**
 * Base spacing size and corner radius. All spacinings and corner radii in
 * Topcoder designs are supposed to be multiple of these. In many cases it
 * is better not to use these two constants in your styles, because styles
 * with many calculations depending on $base-units and $corner-radius are
 * hard to read, and difficult to compare with design specifications. Having
 * the final pixel numbers in the stylesheets appears to be a way more
 * convenient
 */

/**
 * The standard TC UI pallete. Always prefer to use these constants to set
 * colors in your stylesheets.
 */

/* Grayscale colors. */

/* Accents & Shades. */

/* Light Blue - design color code. */

/* Warm Orange - data science color code. */

/* Red - used for warnings/ */

/* Yellow. */

/* Greens - development color code. */

/* Purples. */

/* TC Metal colors - Badges.
 *
 * For metals the level 100 is the base metal color; 110 is for text inside
 * the metal-colored areas; and 130 is for small text inside metal-colored
 * areas, for better visibility. */

/* Pastel colors, used for levels. */

/* Color aliases. */

/* Base metal colors. */

/* Brand colors. */

/* Community achievement color codes. */

/* Collection of standard mixins, being used all around. */

/* Auxiliary mixins for fonts inclusion. */

/**
 * Includes a font, provided as a set of alternative files in EOT, WOFF, TTF,
 * SVG formats into the app.
 * $font-name {String}
 * $font-weight {Number}
 * $font-style {String}
 * $font-url {String} Path to the font file, without the filename itself.
 * $font-file {String} Font filename, without extension (should be the same for
 *  each version of the font in different formats.
 */

/**
 * Includes a font, provided in the TTF format only.
 * $font-name {String}
 * $font-weight {Number}
 * $font-style {String}
 * $font-url {String}
 */

/**
 * Mixins for different layout sizes: xs, sm, md, lg.
 * Breaking points are defined in _variables.scss
 * The range mixins A-to-B all means "for the sizes from A to B, both
 * inclusive", in particular it means that mixin A-to-lg is equivalent to
 * all sizes from A (inclusive) and larger.
 *
 * NOTE: For convenience, these mixins are sorted not alphabetically, but,
 * first, by increase of the first size; second, by increase of the second size.
 */

/* Break points. */

/* XS */

/* XS */

/* MD */

/* LG */

/* XL */

/**
 * Typography-related mixins:
 *  - Font styles;
 *  - Label text styles;
 *  - Body text styles;
 *  - Heading text styles.
 */

/* Font styles. */

/* Mono version of the roboto font. */

/* Label text styles. */

/* Body text styles. */

/* Heading text styles. */

/* Titles text styles. */

/**
 * Mixing of inline styles for a generic text block.
 *
 * TODO: In my understanding, it violates UI styleguides in various aspects,
 * thus it is placed here for now, and not into UI Kit library. This code comes
 * from challenges related to Contentful integration, ContentBlocks,
 * in particular, that was done without a close watch on the design. It is
 * separated into mixing, as other Contentful components also need inline
 * styles, thus we at least should keep them consistent between different
 * Contentful components, and later clean them all to match UI Kit.
 */

/* Generic button of medium size. */

/* NOTE: All CSS rules below use two classes, to have higher specifity, thus
 * avoiding overriding of these rules by parent rules in some scenarious. */

/* Additional styling for a disabled button. */

.src-shared-components-buttons-themes-danger___button___3ieIhH.src-shared-components-buttons-themes-danger___disabled___47omIn {
  font-family: "Roboto", Helvetica, Arial, sans-serif;
  font-weight: 500;
  color: #151516;
  font-size: 15px;
  line-height: 20px;
  align-items: center;
  background: #fff;
  border: solid 1px #aaaaab;
  border-radius: 4px;
  box-sizing: border-box;
  color: #404041;
  display: inline-flex;
  justify-content: center;
  min-height: 40px;
  margin: 5px;
  padding: 5px 23px;
  text-align: center;
  vertical-align: middle;
  cursor: not-allowed;
  opacity: 0.3;
}

/* .link and .regular classes are applied only to active button-like links,
* and real buttons (rendered as <button> elements). */

.src-shared-components-buttons-themes-danger___button___3ieIhH.src-shared-components-buttons-themes-danger___link___11kcTS,
.src-shared-components-buttons-themes-danger___button___3ieIhH.src-shared-components-buttons-themes-danger___regular___30ZRj2 {
  font-family: "Roboto", Helvetica, Arial, sans-serif;
  font-weight: 500;
  color: #151516;
  font-size: 15px;
  line-height: 20px;
  align-items: center;
  background: #fff;
  border: solid 1px #aaaaab;
  border-radius: 4px;
  box-sizing: border-box;
  color: #404041;
  display: inline-flex;
  justify-content: center;
  min-height: 40px;
  margin: 5px;
  padding: 5px 23px;
  text-align: center;
  vertical-align: middle;
  /* To prevent different styling of the button-like link once it has been
   * visited. */
}

.src-shared-components-buttons-themes-danger___button___3ieIhH.src-shared-components-buttons-themes-danger___link___11kcTS:visited,
.src-shared-components-buttons-themes-danger___button___3ieIhH.src-shared-components-buttons-themes-danger___regular___30ZRj2:visited {
  font-family: "Roboto", Helvetica, Arial, sans-serif;
  font-weight: 500;
  color: #151516;
  font-size: 15px;
  line-height: 20px;
  color: #404041;
}

.src-shared-components-buttons-themes-danger___button___3ieIhH.src-shared-components-buttons-themes-danger___link___11kcTS:focus,
.src-shared-components-buttons-themes-danger___button___3ieIhH.src-shared-components-buttons-themes-danger___regular___30ZRj2:focus {
  box-shadow: 0 0 2px 1px #cfe6ff;
  border-color: #59a7ff;
  outline: none;
}

.src-shared-components-buttons-themes-danger___button___3ieIhH.src-shared-components-buttons-themes-danger___link___11kcTS:hover,
.src-shared-components-buttons-themes-danger___button___3ieIhH.src-shared-components-buttons-themes-danger___regular___30ZRj2:hover {
  background-image: linear-gradient(to top, #f5f5f5, white 49%, white);
  border-color: #959596;
}

.src-shared-components-buttons-themes-danger___button___3ieIhH.src-shared-components-buttons-themes-danger___link___11kcTS.src-shared-components-buttons-themes-danger___active___2kPht2,
.src-shared-components-buttons-themes-danger___button___3ieIhH.src-shared-components-buttons-themes-danger___link___11kcTS:active,
.src-shared-components-buttons-themes-danger___button___3ieIhH.src-shared-components-buttons-themes-danger___regular___30ZRj2.src-shared-components-buttons-themes-danger___active___2kPht2,
.src-shared-components-buttons-themes-danger___button___3ieIhH.src-shared-components-buttons-themes-danger___regular___30ZRj2:active {
  background-image: linear-gradient(to bottom, #f5f5f5, white 49%, white);
  box-shadow: inset 0 1px 2px 0 rgba(0, 0, 0, 0.2);
  border-color: #959596;
}

/* And a few extra classes to support XS, SM and LG sizes. */

.src-shared-components-buttons-themes-danger___button___3ieIhH.src-shared-components-buttons-themes-danger___xs___3d3k9l {
  font-family: "Roboto", Helvetica, Arial, sans-serif;
  font-weight: 400;
  color: #151516;
  font-size: 12px;
  line-height: 15px;
  border-radius: 2px;
  color: #404041;
  min-height: 20px;
  padding: 1px 13px;
}

.src-shared-components-buttons-themes-danger___button___3ieIhH.src-shared-components-buttons-themes-danger___sm___3kygal {
  font-family: "Roboto", Helvetica, Arial, sans-serif;
  font-weight: 500;
  color: #151516;
  font-size: 13px;
  line-height: 20px;
  color: #404041;
  min-height: 30px;
  padding: 4px 18px;
}

.src-shared-components-buttons-themes-danger___button___3ieIhH.src-shared-components-buttons-themes-danger___lg___38cfGi {
  font-family: "Roboto", Helvetica, Arial, sans-serif;
  font-weight: 500;
  color: #151516;
  font-size: 20px;
  line-height: 25px;
  color: #404041;
  min-height: 50px;
  padding: 5px 28px;
}

.src-shared-components-buttons-themes-danger___button___3ieIhH.src-shared-components-buttons-themes-danger___disabled___47omIn {
  background: #ea1900;
  border-color: transparent;
  color: #fff;
  background-color: #c0c0c0;
  opacity: 1;
}

.src-shared-components-buttons-themes-danger___button___3ieIhH.src-shared-components-buttons-themes-danger___link___11kcTS,
.src-shared-components-buttons-themes-danger___button___3ieIhH.src-shared-components-buttons-themes-danger___regular___30ZRj2 {
  background: #ea1900;
  border-color: transparent;
  color: #fff;
}

.src-shared-components-buttons-themes-danger___button___3ieIhH.src-shared-components-buttons-themes-danger___link___11kcTS:visited,
.src-shared-components-buttons-themes-danger___button___3ieIhH.src-shared-components-buttons-themes-danger___regular___30ZRj2:visited {
  color: #fff;
}

.src-shared-components-buttons-themes-danger___button___3ieIhH.src-shared-components-buttons-themes-danger___link___11kcTS:focus,
.src-shared-components-buttons-themes-danger___button___3ieIhH.src-shared-components-buttons-themes-danger___regular___30ZRj2:focus {
  box-shadow: 0 0 2px 1px #ffd4d1;
  border-color: #f52c14;
  outline: none;
}

.src-shared-components-buttons-themes-danger___button___3ieIhH.src-shared-components-buttons-themes-danger___link___11kcTS:hover,
.src-shared-components-buttons-themes-danger___button___3ieIhH.src-shared-components-buttons-themes-danger___regular___30ZRj2:hover {
  background-image: linear-gradient(to bottom, #ff5b52, #f22f24);
  border-color: transparent;
  color: #fff;
}

.src-shared-components-buttons-themes-danger___button___3ieIhH.src-shared-components-buttons-themes-danger___link___11kcTS:active,
.src-shared-components-buttons-themes-danger___button___3ieIhH.src-shared-components-buttons-themes-danger___regular___30ZRj2:active {
  background-color: #ea1900;
  background-image: none;
  box-shadow: inset 0 1px 3px 0 rgba(71, 71, 79, 0.38);
  border-color: transparent;
}
/**
 * The default button theme: white button with dark gray label, gray border, and
 * some extra effects in different state.
 *
 * The comments in this file explain how to write a custom button theme.
 */

/**
 * Misc constants that specify TC UI style.
 */

/**
 * Base spacing size and corner radius. All spacinings and corner radii in
 * Topcoder designs are supposed to be multiple of these. In many cases it
 * is better not to use these two constants in your styles, because styles
 * with many calculations depending on $base-units and $corner-radius are
 * hard to read, and difficult to compare with design specifications. Having
 * the final pixel numbers in the stylesheets appears to be a way more
 * convenient
 */

/**
 * The standard TC UI pallete. Always prefer to use these constants to set
 * colors in your stylesheets.
 */

/* Grayscale colors. */

/* Accents & Shades. */

/* Light Blue - design color code. */

/* Warm Orange - data science color code. */

/* Red - used for warnings/ */

/* Yellow. */

/* Greens - development color code. */

/* Purples. */

/* TC Metal colors - Badges.
 *
 * For metals the level 100 is the base metal color; 110 is for text inside
 * the metal-colored areas; and 130 is for small text inside metal-colored
 * areas, for better visibility. */

/* Pastel colors, used for levels. */

/* Color aliases. */

/* Base metal colors. */

/* Brand colors. */

/* Community achievement color codes. */

/* Collection of standard mixins, being used all around. */

/* Auxiliary mixins for fonts inclusion. */

/**
 * Includes a font, provided as a set of alternative files in EOT, WOFF, TTF,
 * SVG formats into the app.
 * $font-name {String}
 * $font-weight {Number}
 * $font-style {String}
 * $font-url {String} Path to the font file, without the filename itself.
 * $font-file {String} Font filename, without extension (should be the same for
 *  each version of the font in different formats.
 */

/**
 * Includes a font, provided in the TTF format only.
 * $font-name {String}
 * $font-weight {Number}
 * $font-style {String}
 * $font-url {String}
 */

/**
 * Mixins for different layout sizes: xs, sm, md, lg.
 * Breaking points are defined in _variables.scss
 * The range mixins A-to-B all means "for the sizes from A to B, both
 * inclusive", in particular it means that mixin A-to-lg is equivalent to
 * all sizes from A (inclusive) and larger.
 *
 * NOTE: For convenience, these mixins are sorted not alphabetically, but,
 * first, by increase of the first size; second, by increase of the second size.
 */

/* Break points. */

/* XS */

/* XS */

/* MD */

/* LG */

/* XL */

/**
 * Typography-related mixins:
 *  - Font styles;
 *  - Label text styles;
 *  - Body text styles;
 *  - Heading text styles.
 */

/* Font styles. */

/* Mono version of the roboto font. */

/* Label text styles. */

/* Body text styles. */

/* Heading text styles. */

/* Titles text styles. */

/**
 * Mixing of inline styles for a generic text block.
 *
 * TODO: In my understanding, it violates UI styleguides in various aspects,
 * thus it is placed here for now, and not into UI Kit library. This code comes
 * from challenges related to Contentful integration, ContentBlocks,
 * in particular, that was done without a close watch on the design. It is
 * separated into mixing, as other Contentful components also need inline
 * styles, thus we at least should keep them consistent between different
 * Contentful components, and later clean them all to match UI Kit.
 */

/* Generic button of medium size. */

/* NOTE: All CSS rules below use two classes, to have higher specifity, thus
 * avoiding overriding of these rules by parent rules in some scenarious. */

/* Additional styling for a disabled button. */

.src-shared-components-buttons-themes-default___button___1hu-9a.src-shared-components-buttons-themes-default___disabled___22SITo {
  font-family: "Roboto", Helvetica, Arial, sans-serif;
  font-weight: 500;
  color: #151516;
  font-size: 15px;
  line-height: 20px;
  align-items: center;
  background: #fff;
  border: solid 1px #aaaaab;
  border-radius: 4px;
  box-sizing: border-box;
  color: #404041;
  display: inline-flex;
  justify-content: center;
  min-height: 40px;
  margin: 5px;
  padding: 5px 23px;
  text-align: center;
  vertical-align: middle;
  cursor: not-allowed;
  opacity: 0.3;
}

/* .link and .regular classes are applied only to active button-like links,
* and real buttons (rendered as <button> elements). */

.src-shared-components-buttons-themes-default___button___1hu-9a.src-shared-components-buttons-themes-default___link___1x4qWV,
.src-shared-components-buttons-themes-default___button___1hu-9a.src-shared-components-buttons-themes-default___regular___34n_Oy {
  font-family: "Roboto", Helvetica, Arial, sans-serif;
  font-weight: 500;
  color: #151516;
  font-size: 15px;
  line-height: 20px;
  align-items: center;
  background: #fff;
  border: solid 1px #aaaaab;
  border-radius: 4px;
  box-sizing: border-box;
  color: #404041;
  display: inline-flex;
  justify-content: center;
  min-height: 40px;
  margin: 5px;
  padding: 5px 23px;
  text-align: center;
  vertical-align: middle;
  /* To prevent different styling of the button-like link once it has been
   * visited. */
}

.src-shared-components-buttons-themes-default___button___1hu-9a.src-shared-components-buttons-themes-default___link___1x4qWV:visited,
.src-shared-components-buttons-themes-default___button___1hu-9a.src-shared-components-buttons-themes-default___regular___34n_Oy:visited {
  font-family: "Roboto", Helvetica, Arial, sans-serif;
  font-weight: 500;
  color: #151516;
  font-size: 15px;
  line-height: 20px;
  color: #404041;
}

.src-shared-components-buttons-themes-default___button___1hu-9a.src-shared-components-buttons-themes-default___link___1x4qWV:focus,
.src-shared-components-buttons-themes-default___button___1hu-9a.src-shared-components-buttons-themes-default___regular___34n_Oy:focus {
  box-shadow: 0 0 2px 1px #cfe6ff;
  border-color: #59a7ff;
  outline: none;
}

.src-shared-components-buttons-themes-default___button___1hu-9a.src-shared-components-buttons-themes-default___link___1x4qWV:hover,
.src-shared-components-buttons-themes-default___button___1hu-9a.src-shared-components-buttons-themes-default___regular___34n_Oy:hover {
  background-image: linear-gradient(to top, #f5f5f5, white 49%, white);
  border-color: #959596;
}

.src-shared-components-buttons-themes-default___button___1hu-9a.src-shared-components-buttons-themes-default___link___1x4qWV.src-shared-components-buttons-themes-default___active___3Hv6kB,
.src-shared-components-buttons-themes-default___button___1hu-9a.src-shared-components-buttons-themes-default___link___1x4qWV:active,
.src-shared-components-buttons-themes-default___button___1hu-9a.src-shared-components-buttons-themes-default___regular___34n_Oy.src-shared-components-buttons-themes-default___active___3Hv6kB,
.src-shared-components-buttons-themes-default___button___1hu-9a.src-shared-components-buttons-themes-default___regular___34n_Oy:active {
  background-image: linear-gradient(to bottom, #f5f5f5, white 49%, white);
  box-shadow: inset 0 1px 2px 0 rgba(0, 0, 0, 0.2);
  border-color: #959596;
}

/* And a few extra classes to support XS, SM and LG sizes. */

.src-shared-components-buttons-themes-default___button___1hu-9a.src-shared-components-buttons-themes-default___xs___kpwsYE {
  font-family: "Roboto", Helvetica, Arial, sans-serif;
  font-weight: 400;
  color: #151516;
  font-size: 12px;
  line-height: 15px;
  border-radius: 2px;
  color: #404041;
  min-height: 20px;
  padding: 1px 13px;
}

.src-shared-components-buttons-themes-default___button___1hu-9a.src-shared-components-buttons-themes-default___sm___1i6Aef {
  font-family: "Roboto", Helvetica, Arial, sans-serif;
  font-weight: 500;
  color: #151516;
  font-size: 13px;
  line-height: 20px;
  color: #404041;
  min-height: 30px;
  padding: 4px 18px;
}

.src-shared-components-buttons-themes-default___button___1hu-9a.src-shared-components-buttons-themes-default___lg___STVPT4 {
  font-family: "Roboto", Helvetica, Arial, sans-serif;
  font-weight: 500;
  color: #151516;
  font-size: 20px;
  line-height: 25px;
  color: #404041;
  min-height: 50px;
  padding: 5px 28px;
}
/**
 * Ghost button (transparent background, blue text).
 */

/**
 * The default button theme: white button with dark gray label, gray border, and
 * some extra effects in different state.
 *
 * The comments in this file explain how to write a custom button theme.
 */

/**
 * Misc constants that specify TC UI style.
 */

/**
 * Base spacing size and corner radius. All spacinings and corner radii in
 * Topcoder designs are supposed to be multiple of these. In many cases it
 * is better not to use these two constants in your styles, because styles
 * with many calculations depending on $base-units and $corner-radius are
 * hard to read, and difficult to compare with design specifications. Having
 * the final pixel numbers in the stylesheets appears to be a way more
 * convenient
 */

/**
 * The standard TC UI pallete. Always prefer to use these constants to set
 * colors in your stylesheets.
 */

/* Grayscale colors. */

/* Accents & Shades. */

/* Light Blue - design color code. */

/* Warm Orange - data science color code. */

/* Red - used for warnings/ */

/* Yellow. */

/* Greens - development color code. */

/* Purples. */

/* TC Metal colors - Badges.
 *
 * For metals the level 100 is the base metal color; 110 is for text inside
 * the metal-colored areas; and 130 is for small text inside metal-colored
 * areas, for better visibility. */

/* Pastel colors, used for levels. */

/* Color aliases. */

/* Base metal colors. */

/* Brand colors. */

/* Community achievement color codes. */

/* Collection of standard mixins, being used all around. */

/* Auxiliary mixins for fonts inclusion. */

/**
 * Includes a font, provided as a set of alternative files in EOT, WOFF, TTF,
 * SVG formats into the app.
 * $font-name {String}
 * $font-weight {Number}
 * $font-style {String}
 * $font-url {String} Path to the font file, without the filename itself.
 * $font-file {String} Font filename, without extension (should be the same for
 *  each version of the font in different formats.
 */

/**
 * Includes a font, provided in the TTF format only.
 * $font-name {String}
 * $font-weight {Number}
 * $font-style {String}
 * $font-url {String}
 */

/**
 * Mixins for different layout sizes: xs, sm, md, lg.
 * Breaking points are defined in _variables.scss
 * The range mixins A-to-B all means "for the sizes from A to B, both
 * inclusive", in particular it means that mixin A-to-lg is equivalent to
 * all sizes from A (inclusive) and larger.
 *
 * NOTE: For convenience, these mixins are sorted not alphabetically, but,
 * first, by increase of the first size; second, by increase of the second size.
 */

/* Break points. */

/* XS */

/* XS */

/* MD */

/* LG */

/* XL */

/**
 * Typography-related mixins:
 *  - Font styles;
 *  - Label text styles;
 *  - Body text styles;
 *  - Heading text styles.
 */

/* Font styles. */

/* Mono version of the roboto font. */

/* Label text styles. */

/* Body text styles. */

/* Heading text styles. */

/* Titles text styles. */

/**
 * Mixing of inline styles for a generic text block.
 *
 * TODO: In my understanding, it violates UI styleguides in various aspects,
 * thus it is placed here for now, and not into UI Kit library. This code comes
 * from challenges related to Contentful integration, ContentBlocks,
 * in particular, that was done without a close watch on the design. It is
 * separated into mixing, as other Contentful components also need inline
 * styles, thus we at least should keep them consistent between different
 * Contentful components, and later clean them all to match UI Kit.
 */

/* Generic button of medium size. */

/* NOTE: All CSS rules below use two classes, to have higher specifity, thus
 * avoiding overriding of these rules by parent rules in some scenarious. */

/* Additional styling for a disabled button. */

.src-shared-components-buttons-themes-ghost___button___3lJK-1.src-shared-components-buttons-themes-ghost___disabled___16m9CC {
  font-family: "Roboto", Helvetica, Arial, sans-serif;
  font-weight: 500;
  color: #151516;
  font-size: 15px;
  line-height: 20px;
  align-items: center;
  background: #fff;
  border: solid 1px #aaaaab;
  border-radius: 4px;
  box-sizing: border-box;
  color: #404041;
  display: inline-flex;
  justify-content: center;
  min-height: 40px;
  margin: 5px;
  padding: 5px 23px;
  text-align: center;
  vertical-align: middle;
  cursor: not-allowed;
  opacity: 0.3;
}

/* .link and .regular classes are applied only to active button-like links,
* and real buttons (rendered as <button> elements). */

.src-shared-components-buttons-themes-ghost___button___3lJK-1.src-shared-components-buttons-themes-ghost___link___1HTWLk,
.src-shared-components-buttons-themes-ghost___button___3lJK-1.src-shared-components-buttons-themes-ghost___regular___26FZlI {
  font-family: "Roboto", Helvetica, Arial, sans-serif;
  font-weight: 500;
  color: #151516;
  font-size: 15px;
  line-height: 20px;
  align-items: center;
  background: #fff;
  border: solid 1px #aaaaab;
  border-radius: 4px;
  box-sizing: border-box;
  color: #404041;
  display: inline-flex;
  justify-content: center;
  min-height: 40px;
  margin: 5px;
  padding: 5px 23px;
  text-align: center;
  vertical-align: middle;
  /* To prevent different styling of the button-like link once it has been
   * visited. */
}

.src-shared-components-buttons-themes-ghost___button___3lJK-1.src-shared-components-buttons-themes-ghost___link___1HTWLk:visited,
.src-shared-components-buttons-themes-ghost___button___3lJK-1.src-shared-components-buttons-themes-ghost___regular___26FZlI:visited {
  font-family: "Roboto", Helvetica, Arial, sans-serif;
  font-weight: 500;
  color: #151516;
  font-size: 15px;
  line-height: 20px;
  color: #404041;
}

.src-shared-components-buttons-themes-ghost___button___3lJK-1.src-shared-components-buttons-themes-ghost___link___1HTWLk:focus,
.src-shared-components-buttons-themes-ghost___button___3lJK-1.src-shared-components-buttons-themes-ghost___regular___26FZlI:focus {
  box-shadow: 0 0 2px 1px #cfe6ff;
  border-color: #59a7ff;
  outline: none;
}

.src-shared-components-buttons-themes-ghost___button___3lJK-1.src-shared-components-buttons-themes-ghost___link___1HTWLk:hover,
.src-shared-components-buttons-themes-ghost___button___3lJK-1.src-shared-components-buttons-themes-ghost___regular___26FZlI:hover {
  background-image: linear-gradient(to top, #f5f5f5, white 49%, white);
  border-color: #959596;
}

.src-shared-components-buttons-themes-ghost___button___3lJK-1.src-shared-components-buttons-themes-ghost___link___1HTWLk.src-shared-components-buttons-themes-ghost___active___3IuskG,
.src-shared-components-buttons-themes-ghost___button___3lJK-1.src-shared-components-buttons-themes-ghost___link___1HTWLk:active,
.src-shared-components-buttons-themes-ghost___button___3lJK-1.src-shared-components-buttons-themes-ghost___regular___26FZlI.src-shared-components-buttons-themes-ghost___active___3IuskG,
.src-shared-components-buttons-themes-ghost___button___3lJK-1.src-shared-components-buttons-themes-ghost___regular___26FZlI:active {
  background-image: linear-gradient(to bottom, #f5f5f5, white 49%, white);
  box-shadow: inset 0 1px 2px 0 rgba(0, 0, 0, 0.2);
  border-color: #959596;
}

/* And a few extra classes to support XS, SM and LG sizes. */

.src-shared-components-buttons-themes-ghost___button___3lJK-1.src-shared-components-buttons-themes-ghost___xs___2e-_9e {
  font-family: "Roboto", Helvetica, Arial, sans-serif;
  font-weight: 400;
  color: #151516;
  font-size: 12px;
  line-height: 15px;
  border-radius: 2px;
  color: #404041;
  min-height: 20px;
  padding: 1px 13px;
}

.src-shared-components-buttons-themes-ghost___button___3lJK-1.src-shared-components-buttons-themes-ghost___sm___2B6pv0 {
  font-family: "Roboto", Helvetica, Arial, sans-serif;
  font-weight: 500;
  color: #151516;
  font-size: 13px;
  line-height: 20px;
  color: #404041;
  min-height: 30px;
  padding: 4px 18px;
}

.src-shared-components-buttons-themes-ghost___button___3lJK-1.src-shared-components-buttons-themes-ghost___lg___2fW3gC {
  font-family: "Roboto", Helvetica, Arial, sans-serif;
  font-weight: 500;
  color: #151516;
  font-size: 20px;
  line-height: 25px;
  color: #404041;
  min-height: 50px;
  padding: 5px 28px;
}

.src-shared-components-buttons-themes-ghost___button___3lJK-1.src-shared-components-buttons-themes-ghost___disabled___16m9CC {
  background: transparent;
  border-color: transparent;
  color: #006ad7;
  color: #404041;
}

.src-shared-components-buttons-themes-ghost___button___3lJK-1.src-shared-components-buttons-themes-ghost___link___1HTWLk,
.src-shared-components-buttons-themes-ghost___button___3lJK-1.src-shared-components-buttons-themes-ghost___regular___26FZlI {
  background: transparent;
  border-color: transparent;
  color: #006ad7;
}

.src-shared-components-buttons-themes-ghost___button___3lJK-1.src-shared-components-buttons-themes-ghost___link___1HTWLk:visited,
.src-shared-components-buttons-themes-ghost___button___3lJK-1.src-shared-components-buttons-themes-ghost___regular___26FZlI:visited {
  color: #006ad7;
}

.src-shared-components-buttons-themes-ghost___button___3lJK-1.src-shared-components-buttons-themes-ghost___link___1HTWLk:focus,
.src-shared-components-buttons-themes-ghost___button___3lJK-1.src-shared-components-buttons-themes-ghost___regular___26FZlI:focus {
  box-shadow: 0 0 2px 1px #cee6ff;
  border-color: #55a5ff;
  outline: none;
}

.src-shared-components-buttons-themes-ghost___button___3lJK-1.src-shared-components-buttons-themes-ghost___link___1HTWLk:hover,
.src-shared-components-buttons-themes-ghost___button___3lJK-1.src-shared-components-buttons-themes-ghost___regular___26FZlI:hover {
  background-image: none;
  border-color: transparent;
  color: #55a5ff;
}

.src-shared-components-buttons-themes-ghost___button___3lJK-1.src-shared-components-buttons-themes-ghost___link___1HTWLk:active,
.src-shared-components-buttons-themes-ghost___button___3lJK-1.src-shared-components-buttons-themes-ghost___regular___26FZlI:active {
  background-image: none;
  box-shadow: none;
  border-color: transparent;
  color: #0681ff;
}
/**
 * Primary button (blue back, white text).
 */

/**
 * The default button theme: white button with dark gray label, gray border, and
 * some extra effects in different state.
 *
 * The comments in this file explain how to write a custom button theme.
 */

/**
 * Misc constants that specify TC UI style.
 */

/**
 * Base spacing size and corner radius. All spacinings and corner radii in
 * Topcoder designs are supposed to be multiple of these. In many cases it
 * is better not to use these two constants in your styles, because styles
 * with many calculations depending on $base-units and $corner-radius are
 * hard to read, and difficult to compare with design specifications. Having
 * the final pixel numbers in the stylesheets appears to be a way more
 * convenient
 */

/**
 * The standard TC UI pallete. Always prefer to use these constants to set
 * colors in your stylesheets.
 */

/* Grayscale colors. */

/* Accents & Shades. */

/* Light Blue - design color code. */

/* Warm Orange - data science color code. */

/* Red - used for warnings/ */

/* Yellow. */

/* Greens - development color code. */

/* Purples. */

/* TC Metal colors - Badges.
 *
 * For metals the level 100 is the base metal color; 110 is for text inside
 * the metal-colored areas; and 130 is for small text inside metal-colored
 * areas, for better visibility. */

/* Pastel colors, used for levels. */

/* Color aliases. */

/* Base metal colors. */

/* Brand colors. */

/* Community achievement color codes. */

/* Collection of standard mixins, being used all around. */

/* Auxiliary mixins for fonts inclusion. */

/**
 * Includes a font, provided as a set of alternative files in EOT, WOFF, TTF,
 * SVG formats into the app.
 * $font-name {String}
 * $font-weight {Number}
 * $font-style {String}
 * $font-url {String} Path to the font file, without the filename itself.
 * $font-file {String} Font filename, without extension (should be the same for
 *  each version of the font in different formats.
 */

/**
 * Includes a font, provided in the TTF format only.
 * $font-name {String}
 * $font-weight {Number}
 * $font-style {String}
 * $font-url {String}
 */

/**
 * Mixins for different layout sizes: xs, sm, md, lg.
 * Breaking points are defined in _variables.scss
 * The range mixins A-to-B all means "for the sizes from A to B, both
 * inclusive", in particular it means that mixin A-to-lg is equivalent to
 * all sizes from A (inclusive) and larger.
 *
 * NOTE: For convenience, these mixins are sorted not alphabetically, but,
 * first, by increase of the first size; second, by increase of the second size.
 */

/* Break points. */

/* XS */

/* XS */

/* MD */

/* LG */

/* XL */

/**
 * Typography-related mixins:
 *  - Font styles;
 *  - Label text styles;
 *  - Body text styles;
 *  - Heading text styles.
 */

/* Font styles. */

/* Mono version of the roboto font. */

/* Label text styles. */

/* Body text styles. */

/* Heading text styles. */

/* Titles text styles. */

/**
 * Mixing of inline styles for a generic text block.
 *
 * TODO: In my understanding, it violates UI styleguides in various aspects,
 * thus it is placed here for now, and not into UI Kit library. This code comes
 * from challenges related to Contentful integration, ContentBlocks,
 * in particular, that was done without a close watch on the design. It is
 * separated into mixing, as other Contentful components also need inline
 * styles, thus we at least should keep them consistent between different
 * Contentful components, and later clean them all to match UI Kit.
 */

/* Generic button of medium size. */

/* NOTE: All CSS rules below use two classes, to have higher specifity, thus
 * avoiding overriding of these rules by parent rules in some scenarious. */

/* Additional styling for a disabled button. */

.src-shared-components-buttons-themes-primary___button___1vJGbc.src-shared-components-buttons-themes-primary___disabled___1Apnir {
  font-family: "Roboto", Helvetica, Arial, sans-serif;
  font-weight: 500;
  color: #151516;
  font-size: 15px;
  line-height: 20px;
  align-items: center;
  background: #fff;
  border: solid 1px #aaaaab;
  border-radius: 4px;
  box-sizing: border-box;
  color: #404041;
  display: inline-flex;
  justify-content: center;
  min-height: 40px;
  margin: 5px;
  padding: 5px 23px;
  text-align: center;
  vertical-align: middle;
  cursor: not-allowed;
  opacity: 0.3;
}

/* .link and .regular classes are applied only to active button-like links,
* and real buttons (rendered as <button> elements). */

.src-shared-components-buttons-themes-primary___button___1vJGbc.src-shared-components-buttons-themes-primary___link___2HVxDF,
.src-shared-components-buttons-themes-primary___button___1vJGbc.src-shared-components-buttons-themes-primary___regular___i6lrwz {
  font-family: "Roboto", Helvetica, Arial, sans-serif;
  font-weight: 500;
  color: #151516;
  font-size: 15px;
  line-height: 20px;
  align-items: center;
  background: #fff;
  border: solid 1px #aaaaab;
  border-radius: 4px;
  box-sizing: border-box;
  color: #404041;
  display: inline-flex;
  justify-content: center;
  min-height: 40px;
  margin: 5px;
  padding: 5px 23px;
  text-align: center;
  vertical-align: middle;
  /* To prevent different styling of the button-like link once it has been
   * visited. */
}

.src-shared-components-buttons-themes-primary___button___1vJGbc.src-shared-components-buttons-themes-primary___link___2HVxDF:visited,
.src-shared-components-buttons-themes-primary___button___1vJGbc.src-shared-components-buttons-themes-primary___regular___i6lrwz:visited {
  font-family: "Roboto", Helvetica, Arial, sans-serif;
  font-weight: 500;
  color: #151516;
  font-size: 15px;
  line-height: 20px;
  color: #404041;
}

.src-shared-components-buttons-themes-primary___button___1vJGbc.src-shared-components-buttons-themes-primary___link___2HVxDF:focus,
.src-shared-components-buttons-themes-primary___button___1vJGbc.src-shared-components-buttons-themes-primary___regular___i6lrwz:focus {
  box-shadow: 0 0 2px 1px #cfe6ff;
  border-color: #59a7ff;
  outline: none;
}

.src-shared-components-buttons-themes-primary___button___1vJGbc.src-shared-components-buttons-themes-primary___link___2HVxDF:hover,
.src-shared-components-buttons-themes-primary___button___1vJGbc.src-shared-components-buttons-themes-primary___regular___i6lrwz:hover {
  background-image: linear-gradient(to top, #f5f5f5, white 49%, white);
  border-color: #959596;
}

.src-shared-components-buttons-themes-primary___button___1vJGbc.src-shared-components-buttons-themes-primary___link___2HVxDF.src-shared-components-buttons-themes-primary___active___3Ln7bC,
.src-shared-components-buttons-themes-primary___button___1vJGbc.src-shared-components-buttons-themes-primary___link___2HVxDF:active,
.src-shared-components-buttons-themes-primary___button___1vJGbc.src-shared-components-buttons-themes-primary___regular___i6lrwz.src-shared-components-buttons-themes-primary___active___3Ln7bC,
.src-shared-components-buttons-themes-primary___button___1vJGbc.src-shared-components-buttons-themes-primary___regular___i6lrwz:active {
  background-image: linear-gradient(to bottom, #f5f5f5, white 49%, white);
  box-shadow: inset 0 1px 2px 0 rgba(0, 0, 0, 0.2);
  border-color: #959596;
}

/* And a few extra classes to support XS, SM and LG sizes. */

.src-shared-components-buttons-themes-primary___button___1vJGbc.src-shared-components-buttons-themes-primary___xs___1RT1EN {
  font-family: "Roboto", Helvetica, Arial, sans-serif;
  font-weight: 400;
  color: #151516;
  font-size: 12px;
  line-height: 15px;
  border-radius: 2px;
  color: #404041;
  min-height: 20px;
  padding: 1px 13px;
}

.src-shared-components-buttons-themes-primary___button___1vJGbc.src-shared-components-buttons-themes-primary___sm___145pfd {
  font-family: "Roboto", Helvetica, Arial, sans-serif;
  font-weight: 500;
  color: #151516;
  font-size: 13px;
  line-height: 20px;
  color: #404041;
  min-height: 30px;
  padding: 4px 18px;
}

.src-shared-components-buttons-themes-primary___button___1vJGbc.src-shared-components-buttons-themes-primary___lg___yGWHb5 {
  font-family: "Roboto", Helvetica, Arial, sans-serif;
  font-weight: 500;
  color: #151516;
  font-size: 20px;
  line-height: 25px;
  color: #404041;
  min-height: 50px;
  padding: 5px 28px;
}

.src-shared-components-buttons-themes-primary___button___1vJGbc.src-shared-components-buttons-themes-primary___disabled___1Apnir {
  background: #006ad7;
  border-color: transparent;
  color: #fff;
  background-color: #c0c0c0;
  opacity: 1;
}

.src-shared-components-buttons-themes-primary___button___1vJGbc.src-shared-components-buttons-themes-primary___link___2HVxDF,
.src-shared-components-buttons-themes-primary___button___1vJGbc.src-shared-components-buttons-themes-primary___regular___i6lrwz {
  background: #006ad7;
  border-color: transparent;
  color: #fff;
}

.src-shared-components-buttons-themes-primary___button___1vJGbc.src-shared-components-buttons-themes-primary___link___2HVxDF:visited,
.src-shared-components-buttons-themes-primary___button___1vJGbc.src-shared-components-buttons-themes-primary___regular___i6lrwz:visited {
  color: #fff;
}

.src-shared-components-buttons-themes-primary___button___1vJGbc.src-shared-components-buttons-themes-primary___link___2HVxDF:focus,
.src-shared-components-buttons-themes-primary___button___1vJGbc.src-shared-components-buttons-themes-primary___regular___i6lrwz:focus {
  box-shadow: 0 0 2px 1px #59a7ff;
  border-color: #0b71e6;
  outline: none;
}

.src-shared-components-buttons-themes-primary___button___1vJGbc.src-shared-components-buttons-themes-primary___link___2HVxDF:hover,
.src-shared-components-buttons-themes-primary___button___1vJGbc.src-shared-components-buttons-themes-primary___regular___i6lrwz:hover {
  background-image: linear-gradient(to bottom, #3996ff, #127bf3);
  border-color: transparent;
  color: #fff;
}

.src-shared-components-buttons-themes-primary___button___1vJGbc.src-shared-components-buttons-themes-primary___link___2HVxDF:active,
.src-shared-components-buttons-themes-primary___button___1vJGbc.src-shared-components-buttons-themes-primary___regular___i6lrwz:active {
  background-image: none;
  box-shadow: inset 0 1px 3px 0 rgba(71, 71, 79, 0.5);
  border-color: transparent;
}
/**
 * Secondary button (gray background, white label).
 */

/**
 * The default button theme: white button with dark gray label, gray border, and
 * some extra effects in different state.
 *
 * The comments in this file explain how to write a custom button theme.
 */

/**
 * Misc constants that specify TC UI style.
 */

/**
 * Base spacing size and corner radius. All spacinings and corner radii in
 * Topcoder designs are supposed to be multiple of these. In many cases it
 * is better not to use these two constants in your styles, because styles
 * with many calculations depending on $base-units and $corner-radius are
 * hard to read, and difficult to compare with design specifications. Having
 * the final pixel numbers in the stylesheets appears to be a way more
 * convenient
 */

/**
 * The standard TC UI pallete. Always prefer to use these constants to set
 * colors in your stylesheets.
 */

/* Grayscale colors. */

/* Accents & Shades. */

/* Light Blue - design color code. */

/* Warm Orange - data science color code. */

/* Red - used for warnings/ */

/* Yellow. */

/* Greens - development color code. */

/* Purples. */

/* TC Metal colors - Badges.
 *
 * For metals the level 100 is the base metal color; 110 is for text inside
 * the metal-colored areas; and 130 is for small text inside metal-colored
 * areas, for better visibility. */

/* Pastel colors, used for levels. */

/* Color aliases. */

/* Base metal colors. */

/* Brand colors. */

/* Community achievement color codes. */

/* Collection of standard mixins, being used all around. */

/* Auxiliary mixins for fonts inclusion. */

/**
 * Includes a font, provided as a set of alternative files in EOT, WOFF, TTF,
 * SVG formats into the app.
 * $font-name {String}
 * $font-weight {Number}
 * $font-style {String}
 * $font-url {String} Path to the font file, without the filename itself.
 * $font-file {String} Font filename, without extension (should be the same for
 *  each version of the font in different formats.
 */

/**
 * Includes a font, provided in the TTF format only.
 * $font-name {String}
 * $font-weight {Number}
 * $font-style {String}
 * $font-url {String}
 */

/**
 * Mixins for different layout sizes: xs, sm, md, lg.
 * Breaking points are defined in _variables.scss
 * The range mixins A-to-B all means "for the sizes from A to B, both
 * inclusive", in particular it means that mixin A-to-lg is equivalent to
 * all sizes from A (inclusive) and larger.
 *
 * NOTE: For convenience, these mixins are sorted not alphabetically, but,
 * first, by increase of the first size; second, by increase of the second size.
 */

/* Break points. */

/* XS */

/* XS */

/* MD */

/* LG */

/* XL */

/**
 * Typography-related mixins:
 *  - Font styles;
 *  - Label text styles;
 *  - Body text styles;
 *  - Heading text styles.
 */

/* Font styles. */

/* Mono version of the roboto font. */

/* Label text styles. */

/* Body text styles. */

/* Heading text styles. */

/* Titles text styles. */

/**
 * Mixing of inline styles for a generic text block.
 *
 * TODO: In my understanding, it violates UI styleguides in various aspects,
 * thus it is placed here for now, and not into UI Kit library. This code comes
 * from challenges related to Contentful integration, ContentBlocks,
 * in particular, that was done without a close watch on the design. It is
 * separated into mixing, as other Contentful components also need inline
 * styles, thus we at least should keep them consistent between different
 * Contentful components, and later clean them all to match UI Kit.
 */

/* Generic button of medium size. */

/* NOTE: All CSS rules below use two classes, to have higher specifity, thus
 * avoiding overriding of these rules by parent rules in some scenarious. */

/* Additional styling for a disabled button. */

.src-shared-components-buttons-themes-secondary___button___279kSN.src-shared-components-buttons-themes-secondary___disabled___3xEby_ {
  font-family: "Roboto", Helvetica, Arial, sans-serif;
  font-weight: 500;
  color: #151516;
  font-size: 15px;
  line-height: 20px;
  align-items: center;
  background: #fff;
  border: solid 1px #aaaaab;
  border-radius: 4px;
  box-sizing: border-box;
  color: #404041;
  display: inline-flex;
  justify-content: center;
  min-height: 40px;
  margin: 5px;
  padding: 5px 23px;
  text-align: center;
  vertical-align: middle;
  cursor: not-allowed;
  opacity: 0.3;
}

/* .link and .regular classes are applied only to active button-like links,
* and real buttons (rendered as <button> elements). */

.src-shared-components-buttons-themes-secondary___button___279kSN.src-shared-components-buttons-themes-secondary___link___2FBKJR,
.src-shared-components-buttons-themes-secondary___button___279kSN.src-shared-components-buttons-themes-secondary___regular___1utLyb {
  font-family: "Roboto", Helvetica, Arial, sans-serif;
  font-weight: 500;
  color: #151516;
  font-size: 15px;
  line-height: 20px;
  align-items: center;
  background: #fff;
  border: solid 1px #aaaaab;
  border-radius: 4px;
  box-sizing: border-box;
  color: #404041;
  display: inline-flex;
  justify-content: center;
  min-height: 40px;
  margin: 5px;
  padding: 5px 23px;
  text-align: center;
  vertical-align: middle;
  /* To prevent different styling of the button-like link once it has been
   * visited. */
}

.src-shared-components-buttons-themes-secondary___button___279kSN.src-shared-components-buttons-themes-secondary___link___2FBKJR:visited,
.src-shared-components-buttons-themes-secondary___button___279kSN.src-shared-components-buttons-themes-secondary___regular___1utLyb:visited {
  font-family: "Roboto", Helvetica, Arial, sans-serif;
  font-weight: 500;
  color: #151516;
  font-size: 15px;
  line-height: 20px;
  color: #404041;
}

.src-shared-components-buttons-themes-secondary___button___279kSN.src-shared-components-buttons-themes-secondary___link___2FBKJR:focus,
.src-shared-components-buttons-themes-secondary___button___279kSN.src-shared-components-buttons-themes-secondary___regular___1utLyb:focus {
  box-shadow: 0 0 2px 1px #cfe6ff;
  border-color: #59a7ff;
  outline: none;
}

.src-shared-components-buttons-themes-secondary___button___279kSN.src-shared-components-buttons-themes-secondary___link___2FBKJR:hover,
.src-shared-components-buttons-themes-secondary___button___279kSN.src-shared-components-buttons-themes-secondary___regular___1utLyb:hover {
  background-image: linear-gradient(to top, #f5f5f5, white 49%, white);
  border-color: #959596;
}

.src-shared-components-buttons-themes-secondary___button___279kSN.src-shared-components-buttons-themes-secondary___link___2FBKJR.src-shared-components-buttons-themes-secondary___active___2AEVG0,
.src-shared-components-buttons-themes-secondary___button___279kSN.src-shared-components-buttons-themes-secondary___link___2FBKJR:active,
.src-shared-components-buttons-themes-secondary___button___279kSN.src-shared-components-buttons-themes-secondary___regular___1utLyb.src-shared-components-buttons-themes-secondary___active___2AEVG0,
.src-shared-components-buttons-themes-secondary___button___279kSN.src-shared-components-buttons-themes-secondary___regular___1utLyb:active {
  background-image: linear-gradient(to bottom, #f5f5f5, white 49%, white);
  box-shadow: inset 0 1px 2px 0 rgba(0, 0, 0, 0.2);
  border-color: #959596;
}

/* And a few extra classes to support XS, SM and LG sizes. */

.src-shared-components-buttons-themes-secondary___button___279kSN.src-shared-components-buttons-themes-secondary___xs___aCfo1G {
  font-family: "Roboto", Helvetica, Arial, sans-serif;
  font-weight: 400;
  color: #151516;
  font-size: 12px;
  line-height: 15px;
  border-radius: 2px;
  color: #404041;
  min-height: 20px;
  padding: 1px 13px;
}

.src-shared-components-buttons-themes-secondary___button___279kSN.src-shared-components-buttons-themes-secondary___sm___3v19e8 {
  font-family: "Roboto", Helvetica, Arial, sans-serif;
  font-weight: 500;
  color: #151516;
  font-size: 13px;
  line-height: 20px;
  color: #404041;
  min-height: 30px;
  padding: 4px 18px;
}

.src-shared-components-buttons-themes-secondary___button___279kSN.src-shared-components-buttons-themes-secondary___lg___14vlri {
  font-family: "Roboto", Helvetica, Arial, sans-serif;
  font-weight: 500;
  color: #151516;
  font-size: 20px;
  line-height: 25px;
  color: #404041;
  min-height: 50px;
  padding: 5px 28px;
}

.src-shared-components-buttons-themes-secondary___button___279kSN.src-shared-components-buttons-themes-secondary___disabled___3xEby_ {
  background: #959596;
  border-color: transparent;
  color: #fff;
  background-color: #c0c0c0;
  opacity: 1;
}

.src-shared-components-buttons-themes-secondary___button___279kSN.src-shared-components-buttons-themes-secondary___link___2FBKJR,
.src-shared-components-buttons-themes-secondary___button___279kSN.src-shared-components-buttons-themes-secondary___regular___1utLyb {
  background: #959596;
  border-color: transparent;
  color: #fff;
}

.src-shared-components-buttons-themes-secondary___button___279kSN.src-shared-components-buttons-themes-secondary___link___2FBKJR:visited,
.src-shared-components-buttons-themes-secondary___button___279kSN.src-shared-components-buttons-themes-secondary___regular___1utLyb:visited {
  color: #fff;
}

.src-shared-components-buttons-themes-secondary___button___279kSN.src-shared-components-buttons-themes-secondary___link___2FBKJR:focus,
.src-shared-components-buttons-themes-secondary___button___279kSN.src-shared-components-buttons-themes-secondary___regular___1utLyb:focus {
  box-shadow: 0 0 2px 1px #59a7ff;
  border-color: #808080;
  outline: none;
}

.src-shared-components-buttons-themes-secondary___button___279kSN.src-shared-components-buttons-themes-secondary___link___2FBKJR:hover,
.src-shared-components-buttons-themes-secondary___button___279kSN.src-shared-components-buttons-themes-secondary___regular___1utLyb:hover {
  background-image: linear-gradient(to bottom, #a3a3ad, #888894);
  border-color: transparent;
  color: #fff;
}

.src-shared-components-buttons-themes-secondary___button___279kSN.src-shared-components-buttons-themes-secondary___link___2FBKJR:active,
.src-shared-components-buttons-themes-secondary___button___279kSN.src-shared-components-buttons-themes-secondary___regular___1utLyb:active {
  background-color: #808080;
  background-image: none;
  box-shadow: inset 0 1px 3px 0 rgba(71, 71, 79, 0.38);
  border-color: transparent;
}
/**
 * Misc constants that specify TC UI style.
 */

/**
 * Base spacing size and corner radius. All spacinings and corner radii in
 * Topcoder designs are supposed to be multiple of these. In many cases it
 * is better not to use these two constants in your styles, because styles
 * with many calculations depending on $base-units and $corner-radius are
 * hard to read, and difficult to compare with design specifications. Having
 * the final pixel numbers in the stylesheets appears to be a way more
 * convenient
 */

/**
 * The standard TC UI pallete. Always prefer to use these constants to set
 * colors in your stylesheets.
 */

/* Grayscale colors. */

/* Accents & Shades. */

/* Light Blue - design color code. */

/* Warm Orange - data science color code. */

/* Red - used for warnings/ */

/* Yellow. */

/* Greens - development color code. */

/* Purples. */

/* TC Metal colors - Badges.
 *
 * For metals the level 100 is the base metal color; 110 is for text inside
 * the metal-colored areas; and 130 is for small text inside metal-colored
 * areas, for better visibility. */

/* Pastel colors, used for levels. */

/* Color aliases. */

/* Base metal colors. */

/* Brand colors. */

/* Community achievement color codes. */

/* Collection of standard mixins, being used all around. */

/* Auxiliary mixins for fonts inclusion. */

/**
 * Includes a font, provided as a set of alternative files in EOT, WOFF, TTF,
 * SVG formats into the app.
 * $font-name {String}
 * $font-weight {Number}
 * $font-style {String}
 * $font-url {String} Path to the font file, without the filename itself.
 * $font-file {String} Font filename, without extension (should be the same for
 *  each version of the font in different formats.
 */

/**
 * Includes a font, provided in the TTF format only.
 * $font-name {String}
 * $font-weight {Number}
 * $font-style {String}
 * $font-url {String}
 */

/**
 * Mixins for different layout sizes: xs, sm, md, lg.
 * Breaking points are defined in _variables.scss
 * The range mixins A-to-B all means "for the sizes from A to B, both
 * inclusive", in particular it means that mixin A-to-lg is equivalent to
 * all sizes from A (inclusive) and larger.
 *
 * NOTE: For convenience, these mixins are sorted not alphabetically, but,
 * first, by increase of the first size; second, by increase of the second size.
 */

/* Break points. */

/* XS */

/* XS */

/* MD */

/* LG */

/* XL */

/**
 * Typography-related mixins:
 *  - Font styles;
 *  - Label text styles;
 *  - Body text styles;
 *  - Heading text styles.
 */

/* Font styles. */

/* Mono version of the roboto font. */

/* Label text styles. */

/* Body text styles. */

/* Heading text styles. */

/* Titles text styles. */

/**
 * Mixing of inline styles for a generic text block.
 *
 * TODO: In my understanding, it violates UI styleguides in various aspects,
 * thus it is placed here for now, and not into UI Kit library. This code comes
 * from challenges related to Contentful integration, ContentBlocks,
 * in particular, that was done without a close watch on the design. It is
 * separated into mixing, as other Contentful components also need inline
 * styles, thus we at least should keep them consistent between different
 * Contentful components, and later clean them all to match UI Kit.
 */

.src-shared-components-ErrorMessage-style___container___1fh5f6 {
  font-family: "Roboto", Helvetica, Arial, sans-serif;
  font-weight: 400;
  overflow: hidden;
  padding: 40px;
  text-align: center;
}

@media (max-width: 768px) {
  .src-shared-components-ErrorMessage-style___container___1fh5f6 {
    padding: 40px 10px;
  }
}

.src-shared-components-ErrorMessage-style___details___J_hj1w {
  font-weight: 400;
  font-size: 13px;
  color: #6b6b6b;
  line-height: 25px;
  padding: 0 15px;
  margin-bottom: 10px;
  text-align: justify;
}

.src-shared-components-ErrorMessage-style___details___J_hj1w a {
  color: #0681ff;
  text-decoration: underline;
}

.src-shared-components-ErrorMessage-style___title___3nSGmH {
  color: #f52c14;
  font-size: 15px;
  font-weight: bold;
  line-height: 25px;
  margin-bottom: 10px;
  padding: 0 15px;
}

.src-shared-components-ErrorMessage-style___title___3nSGmH .src-shared-components-ErrorMessage-style___id___uag6kG {
  color: #000;
  font-weight: 500;
}
/**
 * Challenge tag button, default style with white text on light blue background.
 */

/**
 * Misc constants that specify TC UI style.
 */

/**
 * Base spacing size and corner radius. All spacinings and corner radii in
 * Topcoder designs are supposed to be multiple of these. In many cases it
 * is better not to use these two constants in your styles, because styles
 * with many calculations depending on $base-units and $corner-radius are
 * hard to read, and difficult to compare with design specifications. Having
 * the final pixel numbers in the stylesheets appears to be a way more
 * convenient
 */

/**
 * The standard TC UI pallete. Always prefer to use these constants to set
 * colors in your stylesheets.
 */

/* Grayscale colors. */

/* Accents & Shades. */

/* Light Blue - design color code. */

/* Warm Orange - data science color code. */

/* Red - used for warnings/ */

/* Yellow. */

/* Greens - development color code. */

/* Purples. */

/* TC Metal colors - Badges.
 *
 * For metals the level 100 is the base metal color; 110 is for text inside
 * the metal-colored areas; and 130 is for small text inside metal-colored
 * areas, for better visibility. */

/* Pastel colors, used for levels. */

/* Color aliases. */

/* Base metal colors. */

/* Brand colors. */

/* Community achievement color codes. */

/* Collection of standard mixins, being used all around. */

/* Auxiliary mixins for fonts inclusion. */

/**
 * Includes a font, provided as a set of alternative files in EOT, WOFF, TTF,
 * SVG formats into the app.
 * $font-name {String}
 * $font-weight {Number}
 * $font-style {String}
 * $font-url {String} Path to the font file, without the filename itself.
 * $font-file {String} Font filename, without extension (should be the same for
 *  each version of the font in different formats.
 */

/**
 * Includes a font, provided in the TTF format only.
 * $font-name {String}
 * $font-weight {Number}
 * $font-style {String}
 * $font-url {String}
 */

/**
 * Mixins for different layout sizes: xs, sm, md, lg.
 * Breaking points are defined in _variables.scss
 * The range mixins A-to-B all means "for the sizes from A to B, both
 * inclusive", in particular it means that mixin A-to-lg is equivalent to
 * all sizes from A (inclusive) and larger.
 *
 * NOTE: For convenience, these mixins are sorted not alphabetically, but,
 * first, by increase of the first size; second, by increase of the second size.
 */

/* Break points. */

/* XS */

/* XS */

/* MD */

/* LG */

/* XL */

/**
 * Typography-related mixins:
 *  - Font styles;
 *  - Label text styles;
 *  - Body text styles;
 *  - Heading text styles.
 */

/* Font styles. */

/* Mono version of the roboto font. */

/* Label text styles. */

/* Body text styles. */

/* Heading text styles. */

/* Titles text styles. */

/**
 * Mixing of inline styles for a generic text block.
 *
 * TODO: In my understanding, it violates UI styleguides in various aspects,
 * thus it is placed here for now, and not into UI Kit library. This code comes
 * from challenges related to Contentful integration, ContentBlocks,
 * in particular, that was done without a close watch on the design. It is
 * separated into mixing, as other Contentful components also need inline
 * styles, thus we at least should keep them consistent between different
 * Contentful components, and later clean them all to match UI Kit.
 */

.src-shared-components-tags-default___button___UbryEB {
  font-family: "Roboto", Helvetica, Arial, sans-serif;
  font-weight: 700;
  align-items: center;
  background-color: #ebebeb;
  border: none;
  border-radius: 3px;
  color: #404041;
  cursor: pointer;
  display: inline-flex;
  font-size: 10px;
  font-weight: bold;
  line-height: 100%;
  margin-bottom: 2px;
  margin-right: 5px;
  min-height: 20px;
  outline: none;
  padding: 0 7px;
  text-align: center;
}

.src-shared-components-tags-default___button___UbryEB:active,
.src-shared-components-tags-default___button___UbryEB:focus,
.src-shared-components-tags-default___button___UbryEB:hover {
  color: #404041;
  background-color: #cee6ff;
}

.src-shared-components-tags-default___button___UbryEB:visited {
  color: #404041;
}

.src-shared-components-tags-default___disabled___d5sYBf {
  cursor: not-allowed;
  opacity: 0.3;
}
/**
 * Primary tag, colored with colors of data science track (orange).
 */

/**
 * Challenge tag button, default style with white text on light blue background.
 */

/**
 * Misc constants that specify TC UI style.
 */

/**
 * Base spacing size and corner radius. All spacinings and corner radii in
 * Topcoder designs are supposed to be multiple of these. In many cases it
 * is better not to use these two constants in your styles, because styles
 * with many calculations depending on $base-units and $corner-radius are
 * hard to read, and difficult to compare with design specifications. Having
 * the final pixel numbers in the stylesheets appears to be a way more
 * convenient
 */

/**
 * The standard TC UI pallete. Always prefer to use these constants to set
 * colors in your stylesheets.
 */

/* Grayscale colors. */

/* Accents & Shades. */

/* Light Blue - design color code. */

/* Warm Orange - data science color code. */

/* Red - used for warnings/ */

/* Yellow. */

/* Greens - development color code. */

/* Purples. */

/* TC Metal colors - Badges.
 *
 * For metals the level 100 is the base metal color; 110 is for text inside
 * the metal-colored areas; and 130 is for small text inside metal-colored
 * areas, for better visibility. */

/* Pastel colors, used for levels. */

/* Color aliases. */

/* Base metal colors. */

/* Brand colors. */

/* Community achievement color codes. */

/* Collection of standard mixins, being used all around. */

/* Auxiliary mixins for fonts inclusion. */

/**
 * Includes a font, provided as a set of alternative files in EOT, WOFF, TTF,
 * SVG formats into the app.
 * $font-name {String}
 * $font-weight {Number}
 * $font-style {String}
 * $font-url {String} Path to the font file, without the filename itself.
 * $font-file {String} Font filename, without extension (should be the same for
 *  each version of the font in different formats.
 */

/**
 * Includes a font, provided in the TTF format only.
 * $font-name {String}
 * $font-weight {Number}
 * $font-style {String}
 * $font-url {String}
 */

/**
 * Mixins for different layout sizes: xs, sm, md, lg.
 * Breaking points are defined in _variables.scss
 * The range mixins A-to-B all means "for the sizes from A to B, both
 * inclusive", in particular it means that mixin A-to-lg is equivalent to
 * all sizes from A (inclusive) and larger.
 *
 * NOTE: For convenience, these mixins are sorted not alphabetically, but,
 * first, by increase of the first size; second, by increase of the second size.
 */

/* Break points. */

/* XS */

/* XS */

/* MD */

/* LG */

/* XL */

/**
 * Typography-related mixins:
 *  - Font styles;
 *  - Label text styles;
 *  - Body text styles;
 *  - Heading text styles.
 */

/* Font styles. */

/* Mono version of the roboto font. */

/* Label text styles. */

/* Body text styles. */

/* Heading text styles. */

/* Titles text styles. */

/**
 * Mixing of inline styles for a generic text block.
 *
 * TODO: In my understanding, it violates UI styleguides in various aspects,
 * thus it is placed here for now, and not into UI Kit library. This code comes
 * from challenges related to Contentful integration, ContentBlocks,
 * in particular, that was done without a close watch on the design. It is
 * separated into mixing, as other Contentful components also need inline
 * styles, thus we at least should keep them consistent between different
 * Contentful components, and later clean them all to match UI Kit.
 */

.src-shared-components-tags-primary-data-science___button___3gRNDS {
  font-family: "Roboto", Helvetica, Arial, sans-serif;
  font-weight: 700;
  align-items: center;
  background-color: #ebebeb;
  border: none;
  border-radius: 3px;
  color: #404041;
  cursor: pointer;
  display: inline-flex;
  font-size: 10px;
  font-weight: bold;
  line-height: 100%;
  margin-bottom: 2px;
  margin-right: 5px;
  min-height: 20px;
  outline: none;
  padding: 0 7px;
  text-align: center;
}

.src-shared-components-tags-primary-data-science___button___3gRNDS:active,
.src-shared-components-tags-primary-data-science___button___3gRNDS:focus,
.src-shared-components-tags-primary-data-science___button___3gRNDS:hover {
  color: #404041;
  background-color: #cee6ff;
}

.src-shared-components-tags-primary-data-science___button___3gRNDS:visited {
  color: #404041;
}

.src-shared-components-tags-primary-data-science___disabled___3x_c0h {
  cursor: not-allowed;
  opacity: 0.3;
}

.src-shared-components-tags-primary-data-science___button___3gRNDS {
  background-color: #fd7d00;
  color: #fff;
}

.src-shared-components-tags-primary-data-science___button___3gRNDS:active,
.src-shared-components-tags-primary-data-science___button___3gRNDS:focus,
.src-shared-components-tags-primary-data-science___button___3gRNDS:hover {
  color: #fff;
  background-color: #ba4c00;
}

.src-shared-components-tags-primary-data-science___button___3gRNDS:visited {
  color: #fff;
}
/**
 * Primary tag, colored with colors of design track (blue).
 */

/**
 * Challenge tag button, default style with white text on light blue background.
 */

/**
 * Misc constants that specify TC UI style.
 */

/**
 * Base spacing size and corner radius. All spacinings and corner radii in
 * Topcoder designs are supposed to be multiple of these. In many cases it
 * is better not to use these two constants in your styles, because styles
 * with many calculations depending on $base-units and $corner-radius are
 * hard to read, and difficult to compare with design specifications. Having
 * the final pixel numbers in the stylesheets appears to be a way more
 * convenient
 */

/**
 * The standard TC UI pallete. Always prefer to use these constants to set
 * colors in your stylesheets.
 */

/* Grayscale colors. */

/* Accents & Shades. */

/* Light Blue - design color code. */

/* Warm Orange - data science color code. */

/* Red - used for warnings/ */

/* Yellow. */

/* Greens - development color code. */

/* Purples. */

/* TC Metal colors - Badges.
 *
 * For metals the level 100 is the base metal color; 110 is for text inside
 * the metal-colored areas; and 130 is for small text inside metal-colored
 * areas, for better visibility. */

/* Pastel colors, used for levels. */

/* Color aliases. */

/* Base metal colors. */

/* Brand colors. */

/* Community achievement color codes. */

/* Collection of standard mixins, being used all around. */

/* Auxiliary mixins for fonts inclusion. */

/**
 * Includes a font, provided as a set of alternative files in EOT, WOFF, TTF,
 * SVG formats into the app.
 * $font-name {String}
 * $font-weight {Number}
 * $font-style {String}
 * $font-url {String} Path to the font file, without the filename itself.
 * $font-file {String} Font filename, without extension (should be the same for
 *  each version of the font in different formats.
 */

/**
 * Includes a font, provided in the TTF format only.
 * $font-name {String}
 * $font-weight {Number}
 * $font-style {String}
 * $font-url {String}
 */

/**
 * Mixins for different layout sizes: xs, sm, md, lg.
 * Breaking points are defined in _variables.scss
 * The range mixins A-to-B all means "for the sizes from A to B, both
 * inclusive", in particular it means that mixin A-to-lg is equivalent to
 * all sizes from A (inclusive) and larger.
 *
 * NOTE: For convenience, these mixins are sorted not alphabetically, but,
 * first, by increase of the first size; second, by increase of the second size.
 */

/* Break points. */

/* XS */

/* XS */

/* MD */

/* LG */

/* XL */

/**
 * Typography-related mixins:
 *  - Font styles;
 *  - Label text styles;
 *  - Body text styles;
 *  - Heading text styles.
 */

/* Font styles. */

/* Mono version of the roboto font. */

/* Label text styles. */

/* Body text styles. */

/* Heading text styles. */

/* Titles text styles. */

/**
 * Mixing of inline styles for a generic text block.
 *
 * TODO: In my understanding, it violates UI styleguides in various aspects,
 * thus it is placed here for now, and not into UI Kit library. This code comes
 * from challenges related to Contentful integration, ContentBlocks,
 * in particular, that was done without a close watch on the design. It is
 * separated into mixing, as other Contentful components also need inline
 * styles, thus we at least should keep them consistent between different
 * Contentful components, and later clean them all to match UI Kit.
 */

.src-shared-components-tags-primary-design___button___bMmUSs {
  font-family: "Roboto", Helvetica, Arial, sans-serif;
  font-weight: 700;
  align-items: center;
  background-color: #ebebeb;
  border: none;
  border-radius: 3px;
  color: #404041;
  cursor: pointer;
  display: inline-flex;
  font-size: 10px;
  font-weight: bold;
  line-height: 100%;
  margin-bottom: 2px;
  margin-right: 5px;
  min-height: 20px;
  outline: none;
  padding: 0 7px;
  text-align: center;
}

.src-shared-components-tags-primary-design___button___bMmUSs:active,
.src-shared-components-tags-primary-design___button___bMmUSs:focus,
.src-shared-components-tags-primary-design___button___bMmUSs:hover {
  color: #404041;
  background-color: #cee6ff;
}

.src-shared-components-tags-primary-design___button___bMmUSs:visited {
  color: #404041;
}

.src-shared-components-tags-primary-design___disabled___2Rg3PO {
  cursor: not-allowed;
  opacity: 0.3;
}

.src-shared-components-tags-primary-design___button___bMmUSs {
  background-color: #15acec;
  color: #fff;
}

.src-shared-components-tags-primary-design___button___bMmUSs:active,
.src-shared-components-tags-primary-design___button___bMmUSs:focus,
.src-shared-components-tags-primary-design___button___bMmUSs:hover {
  color: #fff;
  background-color: #0076a5;
}

.src-shared-components-tags-primary-design___button___bMmUSs:visited {
  color: #fff;
}
/**
 * Primary tag, colored with colors of develop track (green).
 */

/**
 * Challenge tag button, default style with white text on light blue background.
 */

/**
 * Misc constants that specify TC UI style.
 */

/**
 * Base spacing size and corner radius. All spacinings and corner radii in
 * Topcoder designs are supposed to be multiple of these. In many cases it
 * is better not to use these two constants in your styles, because styles
 * with many calculations depending on $base-units and $corner-radius are
 * hard to read, and difficult to compare with design specifications. Having
 * the final pixel numbers in the stylesheets appears to be a way more
 * convenient
 */

/**
 * The standard TC UI pallete. Always prefer to use these constants to set
 * colors in your stylesheets.
 */

/* Grayscale colors. */

/* Accents & Shades. */

/* Light Blue - design color code. */

/* Warm Orange - data science color code. */

/* Red - used for warnings/ */

/* Yellow. */

/* Greens - development color code. */

/* Purples. */

/* TC Metal colors - Badges.
 *
 * For metals the level 100 is the base metal color; 110 is for text inside
 * the metal-colored areas; and 130 is for small text inside metal-colored
 * areas, for better visibility. */

/* Pastel colors, used for levels. */

/* Color aliases. */

/* Base metal colors. */

/* Brand colors. */

/* Community achievement color codes. */

/* Collection of standard mixins, being used all around. */

/* Auxiliary mixins for fonts inclusion. */

/**
 * Includes a font, provided as a set of alternative files in EOT, WOFF, TTF,
 * SVG formats into the app.
 * $font-name {String}
 * $font-weight {Number}
 * $font-style {String}
 * $font-url {String} Path to the font file, without the filename itself.
 * $font-file {String} Font filename, without extension (should be the same for
 *  each version of the font in different formats.
 */

/**
 * Includes a font, provided in the TTF format only.
 * $font-name {String}
 * $font-weight {Number}
 * $font-style {String}
 * $font-url {String}
 */

/**
 * Mixins for different layout sizes: xs, sm, md, lg.
 * Breaking points are defined in _variables.scss
 * The range mixins A-to-B all means "for the sizes from A to B, both
 * inclusive", in particular it means that mixin A-to-lg is equivalent to
 * all sizes from A (inclusive) and larger.
 *
 * NOTE: For convenience, these mixins are sorted not alphabetically, but,
 * first, by increase of the first size; second, by increase of the second size.
 */

/* Break points. */

/* XS */

/* XS */

/* MD */

/* LG */

/* XL */

/**
 * Typography-related mixins:
 *  - Font styles;
 *  - Label text styles;
 *  - Body text styles;
 *  - Heading text styles.
 */

/* Font styles. */

/* Mono version of the roboto font. */

/* Label text styles. */

/* Body text styles. */

/* Heading text styles. */

/* Titles text styles. */

/**
 * Mixing of inline styles for a generic text block.
 *
 * TODO: In my understanding, it violates UI styleguides in various aspects,
 * thus it is placed here for now, and not into UI Kit library. This code comes
 * from challenges related to Contentful integration, ContentBlocks,
 * in particular, that was done without a close watch on the design. It is
 * separated into mixing, as other Contentful components also need inline
 * styles, thus we at least should keep them consistent between different
 * Contentful components, and later clean them all to match UI Kit.
 */

.src-shared-components-tags-primary-development___button___1BrOXW {
  font-family: "Roboto", Helvetica, Arial, sans-serif;
  font-weight: 700;
  align-items: center;
  background-color: #ebebeb;
  border: none;
  border-radius: 3px;
  color: #404041;
  cursor: pointer;
  display: inline-flex;
  font-size: 10px;
  font-weight: bold;
  line-height: 100%;
  margin-bottom: 2px;
  margin-right: 5px;
  min-height: 20px;
  outline: none;
  padding: 0 7px;
  text-align: center;
}

.src-shared-components-tags-primary-development___button___1BrOXW:active,
.src-shared-components-tags-primary-development___button___1BrOXW:focus,
.src-shared-components-tags-primary-development___button___1BrOXW:hover {
  color: #404041;
  background-color: #cee6ff;
}

.src-shared-components-tags-primary-development___button___1BrOXW:visited {
  color: #404041;
}

.src-shared-components-tags-primary-development___disabled___2f-WZi {
  cursor: not-allowed;
  opacity: 0.3;
}

.src-shared-components-tags-primary-development___button___1BrOXW {
  background-color: #5cc900;
  color: #fff;
}

.src-shared-components-tags-primary-development___button___1BrOXW:active,
.src-shared-components-tags-primary-development___button___1BrOXW:focus,
.src-shared-components-tags-primary-development___button___1BrOXW:hover {
  color: #fff;
  background-color: #258205;
}

.src-shared-components-tags-primary-development___button___1BrOXW:visited {
  color: #fff;
}
/**
 * Event tag, colored with colors of data science track (orange).
 */

/**
 * Challenge tag button, default style with white text on light blue background.
 */

/**
 * Misc constants that specify TC UI style.
 */

/**
 * Base spacing size and corner radius. All spacinings and corner radii in
 * Topcoder designs are supposed to be multiple of these. In many cases it
 * is better not to use these two constants in your styles, because styles
 * with many calculations depending on $base-units and $corner-radius are
 * hard to read, and difficult to compare with design specifications. Having
 * the final pixel numbers in the stylesheets appears to be a way more
 * convenient
 */

/**
 * The standard TC UI pallete. Always prefer to use these constants to set
 * colors in your stylesheets.
 */

/* Grayscale colors. */

/* Accents & Shades. */

/* Light Blue - design color code. */

/* Warm Orange - data science color code. */

/* Red - used for warnings/ */

/* Yellow. */

/* Greens - development color code. */

/* Purples. */

/* TC Metal colors - Badges.
 *
 * For metals the level 100 is the base metal color; 110 is for text inside
 * the metal-colored areas; and 130 is for small text inside metal-colored
 * areas, for better visibility. */

/* Pastel colors, used for levels. */

/* Color aliases. */

/* Base metal colors. */

/* Brand colors. */

/* Community achievement color codes. */

/* Collection of standard mixins, being used all around. */

/* Auxiliary mixins for fonts inclusion. */

/**
 * Includes a font, provided as a set of alternative files in EOT, WOFF, TTF,
 * SVG formats into the app.
 * $font-name {String}
 * $font-weight {Number}
 * $font-style {String}
 * $font-url {String} Path to the font file, without the filename itself.
 * $font-file {String} Font filename, without extension (should be the same for
 *  each version of the font in different formats.
 */

/**
 * Includes a font, provided in the TTF format only.
 * $font-name {String}
 * $font-weight {Number}
 * $font-style {String}
 * $font-url {String}
 */

/**
 * Mixins for different layout sizes: xs, sm, md, lg.
 * Breaking points are defined in _variables.scss
 * The range mixins A-to-B all means "for the sizes from A to B, both
 * inclusive", in particular it means that mixin A-to-lg is equivalent to
 * all sizes from A (inclusive) and larger.
 *
 * NOTE: For convenience, these mixins are sorted not alphabetically, but,
 * first, by increase of the first size; second, by increase of the second size.
 */

/* Break points. */

/* XS */

/* XS */

/* MD */

/* LG */

/* XL */

/**
 * Typography-related mixins:
 *  - Font styles;
 *  - Label text styles;
 *  - Body text styles;
 *  - Heading text styles.
 */

/* Font styles. */

/* Mono version of the roboto font. */

/* Label text styles. */

/* Body text styles. */

/* Heading text styles. */

/* Titles text styles. */

/**
 * Mixing of inline styles for a generic text block.
 *
 * TODO: In my understanding, it violates UI styleguides in various aspects,
 * thus it is placed here for now, and not into UI Kit library. This code comes
 * from challenges related to Contentful integration, ContentBlocks,
 * in particular, that was done without a close watch on the design. It is
 * separated into mixing, as other Contentful components also need inline
 * styles, thus we at least should keep them consistent between different
 * Contentful components, and later clean them all to match UI Kit.
 */

.src-shared-components-tags-event-data-science___button___2uUPpY {
  font-family: "Roboto", Helvetica, Arial, sans-serif;
  font-weight: 700;
  align-items: center;
  background-color: #ebebeb;
  border: none;
  border-radius: 3px;
  color: #404041;
  cursor: pointer;
  display: inline-flex;
  font-size: 10px;
  font-weight: bold;
  line-height: 100%;
  margin-bottom: 2px;
  margin-right: 5px;
  min-height: 20px;
  outline: none;
  padding: 0 7px;
  text-align: center;
}

.src-shared-components-tags-event-data-science___button___2uUPpY:active,
.src-shared-components-tags-event-data-science___button___2uUPpY:focus,
.src-shared-components-tags-event-data-science___button___2uUPpY:hover {
  color: #404041;
  background-color: #cee6ff;
}

.src-shared-components-tags-event-data-science___button___2uUPpY:visited {
  color: #404041;
}

.src-shared-components-tags-event-data-science___disabled___Z1Mz1W {
  cursor: not-allowed;
  opacity: 0.3;
}

.src-shared-components-tags-event-data-science___button___2uUPpY {
  color: #fd7d00;
  background-color: #fff0eb;
}

.src-shared-components-tags-event-data-science___button___2uUPpY:active,
.src-shared-components-tags-event-data-science___button___2uUPpY:focus,
.src-shared-components-tags-event-data-science___button___2uUPpY:hover {
  color: #fd7d00;
  background-color: #fff0eb;
}

.src-shared-components-tags-event-data-science___button___2uUPpY:visited {
  color: #fd7d00;
}
/**
 * Event tag, colored with colors of design track (blue).
 */

/**
 * Challenge tag button, default style with white text on light blue background.
 */

/**
 * Misc constants that specify TC UI style.
 */

/**
 * Base spacing size and corner radius. All spacinings and corner radii in
 * Topcoder designs are supposed to be multiple of these. In many cases it
 * is better not to use these two constants in your styles, because styles
 * with many calculations depending on $base-units and $corner-radius are
 * hard to read, and difficult to compare with design specifications. Having
 * the final pixel numbers in the stylesheets appears to be a way more
 * convenient
 */

/**
 * The standard TC UI pallete. Always prefer to use these constants to set
 * colors in your stylesheets.
 */

/* Grayscale colors. */

/* Accents & Shades. */

/* Light Blue - design color code. */

/* Warm Orange - data science color code. */

/* Red - used for warnings/ */

/* Yellow. */

/* Greens - development color code. */

/* Purples. */

/* TC Metal colors - Badges.
 *
 * For metals the level 100 is the base metal color; 110 is for text inside
 * the metal-colored areas; and 130 is for small text inside metal-colored
 * areas, for better visibility. */

/* Pastel colors, used for levels. */

/* Color aliases. */

/* Base metal colors. */

/* Brand colors. */

/* Community achievement color codes. */

/* Collection of standard mixins, being used all around. */

/* Auxiliary mixins for fonts inclusion. */

/**
 * Includes a font, provided as a set of alternative files in EOT, WOFF, TTF,
 * SVG formats into the app.
 * $font-name {String}
 * $font-weight {Number}
 * $font-style {String}
 * $font-url {String} Path to the font file, without the filename itself.
 * $font-file {String} Font filename, without extension (should be the same for
 *  each version of the font in different formats.
 */

/**
 * Includes a font, provided in the TTF format only.
 * $font-name {String}
 * $font-weight {Number}
 * $font-style {String}
 * $font-url {String}
 */

/**
 * Mixins for different layout sizes: xs, sm, md, lg.
 * Breaking points are defined in _variables.scss
 * The range mixins A-to-B all means "for the sizes from A to B, both
 * inclusive", in particular it means that mixin A-to-lg is equivalent to
 * all sizes from A (inclusive) and larger.
 *
 * NOTE: For convenience, these mixins are sorted not alphabetically, but,
 * first, by increase of the first size; second, by increase of the second size.
 */

/* Break points. */

/* XS */

/* XS */

/* MD */

/* LG */

/* XL */

/**
 * Typography-related mixins:
 *  - Font styles;
 *  - Label text styles;
 *  - Body text styles;
 *  - Heading text styles.
 */

/* Font styles. */

/* Mono version of the roboto font. */

/* Label text styles. */

/* Body text styles. */

/* Heading text styles. */

/* Titles text styles. */

/**
 * Mixing of inline styles for a generic text block.
 *
 * TODO: In my understanding, it violates UI styleguides in various aspects,
 * thus it is placed here for now, and not into UI Kit library. This code comes
 * from challenges related to Contentful integration, ContentBlocks,
 * in particular, that was done without a close watch on the design. It is
 * separated into mixing, as other Contentful components also need inline
 * styles, thus we at least should keep them consistent between different
 * Contentful components, and later clean them all to match UI Kit.
 */

.src-shared-components-tags-event-design___button___ZeXC43 {
  font-family: "Roboto", Helvetica, Arial, sans-serif;
  font-weight: 700;
  align-items: center;
  background-color: #ebebeb;
  border: none;
  border-radius: 3px;
  color: #404041;
  cursor: pointer;
  display: inline-flex;
  font-size: 10px;
  font-weight: bold;
  line-height: 100%;
  margin-bottom: 2px;
  margin-right: 5px;
  min-height: 20px;
  outline: none;
  padding: 0 7px;
  text-align: center;
}

.src-shared-components-tags-event-design___button___ZeXC43:active,
.src-shared-components-tags-event-design___button___ZeXC43:focus,
.src-shared-components-tags-event-design___button___ZeXC43:hover {
  color: #404041;
  background-color: #cee6ff;
}

.src-shared-components-tags-event-design___button___ZeXC43:visited {
  color: #404041;
}

.src-shared-components-tags-event-design___disabled___2FrQTV {
  cursor: not-allowed;
  opacity: 0.3;
}

.src-shared-components-tags-event-design___button___ZeXC43 {
  color: #15acec;
  background-color: #e9f6fc;
}

.src-shared-components-tags-event-design___button___ZeXC43:active,
.src-shared-components-tags-event-design___button___ZeXC43:focus,
.src-shared-components-tags-event-design___button___ZeXC43:hover {
  color: #15acec;
  background-color: #e9f6fc;
}

.src-shared-components-tags-event-design___button___ZeXC43:visited {
  color: #15acec;
}
/**
 * Event tag, colored with colors of develop track (green).
 */

/**
 * Challenge tag button, default style with white text on light blue background.
 */

/**
 * Misc constants that specify TC UI style.
 */

/**
 * Base spacing size and corner radius. All spacinings and corner radii in
 * Topcoder designs are supposed to be multiple of these. In many cases it
 * is better not to use these two constants in your styles, because styles
 * with many calculations depending on $base-units and $corner-radius are
 * hard to read, and difficult to compare with design specifications. Having
 * the final pixel numbers in the stylesheets appears to be a way more
 * convenient
 */

/**
 * The standard TC UI pallete. Always prefer to use these constants to set
 * colors in your stylesheets.
 */

/* Grayscale colors. */

/* Accents & Shades. */

/* Light Blue - design color code. */

/* Warm Orange - data science color code. */

/* Red - used for warnings/ */

/* Yellow. */

/* Greens - development color code. */

/* Purples. */

/* TC Metal colors - Badges.
 *
 * For metals the level 100 is the base metal color; 110 is for text inside
 * the metal-colored areas; and 130 is for small text inside metal-colored
 * areas, for better visibility. */

/* Pastel colors, used for levels. */

/* Color aliases. */

/* Base metal colors. */

/* Brand colors. */

/* Community achievement color codes. */

/* Collection of standard mixins, being used all around. */

/* Auxiliary mixins for fonts inclusion. */

/**
 * Includes a font, provided as a set of alternative files in EOT, WOFF, TTF,
 * SVG formats into the app.
 * $font-name {String}
 * $font-weight {Number}
 * $font-style {String}
 * $font-url {String} Path to the font file, without the filename itself.
 * $font-file {String} Font filename, without extension (should be the same for
 *  each version of the font in different formats.
 */

/**
 * Includes a font, provided in the TTF format only.
 * $font-name {String}
 * $font-weight {Number}
 * $font-style {String}
 * $font-url {String}
 */

/**
 * Mixins for different layout sizes: xs, sm, md, lg.
 * Breaking points are defined in _variables.scss
 * The range mixins A-to-B all means "for the sizes from A to B, both
 * inclusive", in particular it means that mixin A-to-lg is equivalent to
 * all sizes from A (inclusive) and larger.
 *
 * NOTE: For convenience, these mixins are sorted not alphabetically, but,
 * first, by increase of the first size; second, by increase of the second size.
 */

/* Break points. */

/* XS */

/* XS */

/* MD */

/* LG */

/* XL */

/**
 * Typography-related mixins:
 *  - Font styles;
 *  - Label text styles;
 *  - Body text styles;
 *  - Heading text styles.
 */

/* Font styles. */

/* Mono version of the roboto font. */

/* Label text styles. */

/* Body text styles. */

/* Heading text styles. */

/* Titles text styles. */

/**
 * Mixing of inline styles for a generic text block.
 *
 * TODO: In my understanding, it violates UI styleguides in various aspects,
 * thus it is placed here for now, and not into UI Kit library. This code comes
 * from challenges related to Contentful integration, ContentBlocks,
 * in particular, that was done without a close watch on the design. It is
 * separated into mixing, as other Contentful components also need inline
 * styles, thus we at least should keep them consistent between different
 * Contentful components, and later clean them all to match UI Kit.
 */

.src-shared-components-tags-event-development___button___33q6fs {
  font-family: "Roboto", Helvetica, Arial, sans-serif;
  font-weight: 700;
  align-items: center;
  background-color: #ebebeb;
  border: none;
  border-radius: 3px;
  color: #404041;
  cursor: pointer;
  display: inline-flex;
  font-size: 10px;
  font-weight: bold;
  line-height: 100%;
  margin-bottom: 2px;
  margin-right: 5px;
  min-height: 20px;
  outline: none;
  padding: 0 7px;
  text-align: center;
}

.src-shared-components-tags-event-development___button___33q6fs:active,
.src-shared-components-tags-event-development___button___33q6fs:focus,
.src-shared-components-tags-event-development___button___33q6fs:hover {
  color: #404041;
  background-color: #cee6ff;
}

.src-shared-components-tags-event-development___button___33q6fs:visited {
  color: #404041;
}

.src-shared-components-tags-event-development___disabled___1ha4NE {
  cursor: not-allowed;
  opacity: 0.3;
}

.src-shared-components-tags-event-development___button___33q6fs {
  color: #5cc900;
  background-color: #effae4;
}

.src-shared-components-tags-event-development___button___33q6fs:active,
.src-shared-components-tags-event-development___button___33q6fs:focus,
.src-shared-components-tags-event-development___button___33q6fs:hover {
  color: #5cc900;
  background-color: #effae4;
}

.src-shared-components-tags-event-development___button___33q6fs:visited {
  color: #5cc900;
}
