._3YhfNf {
  position: relative;
  width: 100%;
}

._3qZoWe {
  height: 100%;
  position: absolute;
  width: 100%;
}/* 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;
}/**
 * 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. */

/**
 * 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;
}._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. */

/* General button style - medium size. */

._3ieIhH {
  font-family: "Roboto", Helvetica, Arial, sans-serif;
  font-weight: 500;
  color: #262628;
  font-size: 15px;
  line-height: 20px;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  background: #fff;
  border: solid 1px #c3c3c8;
  border-radius: 4px;
  color: #47474f;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  min-height: 40px;
  margin: 5px;
  padding: 5px 23px;
  vertical-align: middle;
}

/* Additional styling for a disabled button. */

._47omIn {
  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). */

._11kcTS,
._30ZRj2 {
  /* To prevent different styling of the button-like link once it has been
   * visited. */
}

._11kcTS:visited,
._30ZRj2:visited {
  font-family: "Roboto", Helvetica, Arial, sans-serif;
  font-weight: 500;
  color: #262628;
  font-size: 15px;
  line-height: 20px;
  color: #47474f;
}

._11kcTS:focus,
._30ZRj2:focus {
  -webkit-box-shadow: 0 0 2px 1px #cfe6ff;
          box-shadow: 0 0 2px 1px #cfe6ff;
  border-color: #59a7ff;
  outline: none;
}

._11kcTS:hover,
._30ZRj2:hover {
  background-image: -webkit-gradient(linear, left bottom, left top, from(#f5f5f5), color-stop(49%, white), to(white));
  background-image: linear-gradient(to top, #f5f5f5, white 49%, white);
  border-color: #a3a3ad;
}

._11kcTS._2kPht2,
._11kcTS:active,
._30ZRj2._2kPht2,
._30ZRj2:active {
  background-image: -webkit-gradient(linear, left top, left bottom, from(#f5f5f5), color-stop(49%, white), to(white));
  background-image: linear-gradient(to bottom, #f5f5f5, white 49%, white);
  -webkit-box-shadow: inset 0 1px 2px 0 rgba(0, 0, 0, 0.2);
          box-shadow: inset 0 1px 2px 0 rgba(0, 0, 0, 0.2);
  border-color: #a3a3ad;
}

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

._3d3k9l {
  font-family: "Roboto", Helvetica, Arial, sans-serif;
  font-weight: 400;
  color: #262628;
  font-size: 12px;
  line-height: 15px;
  border-radius: 2px;
  color: #47474f;
  min-height: 20px;
  padding: 1px 13px;
}

._3kygal {
  font-family: "Roboto", Helvetica, Arial, sans-serif;
  font-weight: 500;
  color: #262628;
  font-size: 13px;
  line-height: 20px;
  color: #47474f;
  min-height: 30px;
  padding: 4px 18px;
}

._38cfGi {
  font-family: "Roboto", Helvetica, Arial, sans-serif;
  font-weight: 500;
  color: #262628;
  font-size: 20px;
  line-height: 25px;
  color: #47474f;
  min-height: 50px;
  padding: 5px 28px;
}

._3ieIhH {
  background: #ff5a4c;
  border-color: transparent;
  color: #fff;
}

._47omIn {
  background-color: #dcdce0;
  opacity: 1;
}

._11kcTS:visited,
._30ZRj2:visited {
  color: #fff;
}

._11kcTS:focus,
._30ZRj2:focus {
  -webkit-box-shadow: 0 0 2px 1px #ffd4d1;
          box-shadow: 0 0 2px 1px #ffd4d1;
  border-color: #f52c14;
  outline: none;
}

._11kcTS:hover,
._30ZRj2:hover {
  background-image: -webkit-gradient(linear, left top, left bottom, from(#ff5b52), to(#f22f24));
  background-image: linear-gradient(to bottom, #ff5b52, #f22f24);
  border-color: transparent;
  color: #fff;
}

._11kcTS:active,
._30ZRj2:active {
  background-color: #f52c14;
  background-image: none;
  -webkit-box-shadow: inset 0 1px 3px 0 rgba(71, 71, 79, 0.38);
          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. */

/* General button style - medium size. */

._1hu-9a {
  font-family: "Roboto", Helvetica, Arial, sans-serif;
  font-weight: 500;
  color: #262628;
  font-size: 15px;
  line-height: 20px;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  background: #fff;
  border: solid 1px #c3c3c8;
  border-radius: 4px;
  color: #47474f;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  min-height: 40px;
  margin: 5px;
  padding: 5px 23px;
  vertical-align: middle;
}

/* Additional styling for a disabled button. */

._22SITo {
  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). */

._1x4qWV,
._34n_Oy {
  /* To prevent different styling of the button-like link once it has been
   * visited. */
}

._1x4qWV:visited,
._34n_Oy:visited {
  font-family: "Roboto", Helvetica, Arial, sans-serif;
  font-weight: 500;
  color: #262628;
  font-size: 15px;
  line-height: 20px;
  color: #47474f;
}

._1x4qWV:focus,
._34n_Oy:focus {
  -webkit-box-shadow: 0 0 2px 1px #cfe6ff;
          box-shadow: 0 0 2px 1px #cfe6ff;
  border-color: #59a7ff;
  outline: none;
}

._1x4qWV:hover,
._34n_Oy:hover {
  background-image: -webkit-gradient(linear, left bottom, left top, from(#f5f5f5), color-stop(49%, white), to(white));
  background-image: linear-gradient(to top, #f5f5f5, white 49%, white);
  border-color: #a3a3ad;
}

._1x4qWV._3Hv6kB,
._1x4qWV:active,
._34n_Oy._3Hv6kB,
._34n_Oy:active {
  background-image: -webkit-gradient(linear, left top, left bottom, from(#f5f5f5), color-stop(49%, white), to(white));
  background-image: linear-gradient(to bottom, #f5f5f5, white 49%, white);
  -webkit-box-shadow: inset 0 1px 2px 0 rgba(0, 0, 0, 0.2);
          box-shadow: inset 0 1px 2px 0 rgba(0, 0, 0, 0.2);
  border-color: #a3a3ad;
}

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

.kpwsYE {
  font-family: "Roboto", Helvetica, Arial, sans-serif;
  font-weight: 400;
  color: #262628;
  font-size: 12px;
  line-height: 15px;
  border-radius: 2px;
  color: #47474f;
  min-height: 20px;
  padding: 1px 13px;
}

._1i6Aef {
  font-family: "Roboto", Helvetica, Arial, sans-serif;
  font-weight: 500;
  color: #262628;
  font-size: 13px;
  line-height: 20px;
  color: #47474f;
  min-height: 30px;
  padding: 4px 18px;
}

.STVPT4 {
  font-family: "Roboto", Helvetica, Arial, sans-serif;
  font-weight: 500;
  color: #262628;
  font-size: 20px;
  line-height: 25px;
  color: #47474f;
  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. */

/* General button style - medium size. */

._3lJK-1 {
  font-family: "Roboto", Helvetica, Arial, sans-serif;
  font-weight: 500;
  color: #262628;
  font-size: 15px;
  line-height: 20px;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  background: #fff;
  border: solid 1px #c3c3c8;
  border-radius: 4px;
  color: #47474f;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  min-height: 40px;
  margin: 5px;
  padding: 5px 23px;
  vertical-align: middle;
}

/* Additional styling for a disabled button. */

._16m9CC {
  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). */

._1HTWLk,
._26FZlI {
  /* To prevent different styling of the button-like link once it has been
   * visited. */
}

._1HTWLk:visited,
._26FZlI:visited {
  font-family: "Roboto", Helvetica, Arial, sans-serif;
  font-weight: 500;
  color: #262628;
  font-size: 15px;
  line-height: 20px;
  color: #47474f;
}

._1HTWLk:focus,
._26FZlI:focus {
  -webkit-box-shadow: 0 0 2px 1px #cfe6ff;
          box-shadow: 0 0 2px 1px #cfe6ff;
  border-color: #59a7ff;
  outline: none;
}

._1HTWLk:hover,
._26FZlI:hover {
  background-image: -webkit-gradient(linear, left bottom, left top, from(#f5f5f5), color-stop(49%, white), to(white));
  background-image: linear-gradient(to top, #f5f5f5, white 49%, white);
  border-color: #a3a3ad;
}

._1HTWLk._3IuskG,
._1HTWLk:active,
._26FZlI._3IuskG,
._26FZlI:active {
  background-image: -webkit-gradient(linear, left top, left bottom, from(#f5f5f5), color-stop(49%, white), to(white));
  background-image: linear-gradient(to bottom, #f5f5f5, white 49%, white);
  -webkit-box-shadow: inset 0 1px 2px 0 rgba(0, 0, 0, 0.2);
          box-shadow: inset 0 1px 2px 0 rgba(0, 0, 0, 0.2);
  border-color: #a3a3ad;
}

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

._2e-_9e {
  font-family: "Roboto", Helvetica, Arial, sans-serif;
  font-weight: 400;
  color: #262628;
  font-size: 12px;
  line-height: 15px;
  border-radius: 2px;
  color: #47474f;
  min-height: 20px;
  padding: 1px 13px;
}

._2B6pv0 {
  font-family: "Roboto", Helvetica, Arial, sans-serif;
  font-weight: 500;
  color: #262628;
  font-size: 13px;
  line-height: 20px;
  color: #47474f;
  min-height: 30px;
  padding: 4px 18px;
}

._2fW3gC {
  font-family: "Roboto", Helvetica, Arial, sans-serif;
  font-weight: 500;
  color: #262628;
  font-size: 20px;
  line-height: 25px;
  color: #47474f;
  min-height: 50px;
  padding: 5px 28px;
}

._3lJK-1 {
  background: transparent;
  border-color: transparent;
  color: #006dea;
}

._16m9CC {
  color: #47474f;
}

._1HTWLk:visited,
._26FZlI:visited {
  color: #006dea;
}

._1HTWLk:focus,
._26FZlI:focus {
  -webkit-box-shadow: 0 0 2px 1px #cee6ff;
          box-shadow: 0 0 2px 1px #cee6ff;
  border-color: #55a5ff;
  outline: none;
}

._1HTWLk:hover,
._26FZlI:hover {
  background-image: none;
  border-color: transparent;
  color: #55a5ff;
}

._1HTWLk:active,
._26FZlI:active {
  background-image: none;
  -webkit-box-shadow: 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. */

/* General button style - medium size. */

._1vJGbc {
  font-family: "Roboto", Helvetica, Arial, sans-serif;
  font-weight: 500;
  color: #262628;
  font-size: 15px;
  line-height: 20px;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  background: #fff;
  border: solid 1px #c3c3c8;
  border-radius: 4px;
  color: #47474f;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  min-height: 40px;
  margin: 5px;
  padding: 5px 23px;
  vertical-align: middle;
}

/* Additional styling for a disabled button. */

._1Apnir {
  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). */

._2HVxDF,
.i6lrwz {
  /* To prevent different styling of the button-like link once it has been
   * visited. */
}

._2HVxDF:visited,
.i6lrwz:visited {
  font-family: "Roboto", Helvetica, Arial, sans-serif;
  font-weight: 500;
  color: #262628;
  font-size: 15px;
  line-height: 20px;
  color: #47474f;
}

._2HVxDF:focus,
.i6lrwz:focus {
  -webkit-box-shadow: 0 0 2px 1px #cfe6ff;
          box-shadow: 0 0 2px 1px #cfe6ff;
  border-color: #59a7ff;
  outline: none;
}

._2HVxDF:hover,
.i6lrwz:hover {
  background-image: -webkit-gradient(linear, left bottom, left top, from(#f5f5f5), color-stop(49%, white), to(white));
  background-image: linear-gradient(to top, #f5f5f5, white 49%, white);
  border-color: #a3a3ad;
}

._2HVxDF._3Ln7bC,
._2HVxDF:active,
.i6lrwz._3Ln7bC,
.i6lrwz:active {
  background-image: -webkit-gradient(linear, left top, left bottom, from(#f5f5f5), color-stop(49%, white), to(white));
  background-image: linear-gradient(to bottom, #f5f5f5, white 49%, white);
  -webkit-box-shadow: inset 0 1px 2px 0 rgba(0, 0, 0, 0.2);
          box-shadow: inset 0 1px 2px 0 rgba(0, 0, 0, 0.2);
  border-color: #a3a3ad;
}

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

._1RT1EN {
  font-family: "Roboto", Helvetica, Arial, sans-serif;
  font-weight: 400;
  color: #262628;
  font-size: 12px;
  line-height: 15px;
  border-radius: 2px;
  color: #47474f;
  min-height: 20px;
  padding: 1px 13px;
}

._145pfd {
  font-family: "Roboto", Helvetica, Arial, sans-serif;
  font-weight: 500;
  color: #262628;
  font-size: 13px;
  line-height: 20px;
  color: #47474f;
  min-height: 30px;
  padding: 4px 18px;
}

.yGWHb5 {
  font-family: "Roboto", Helvetica, Arial, sans-serif;
  font-weight: 500;
  color: #262628;
  font-size: 20px;
  line-height: 25px;
  color: #47474f;
  min-height: 50px;
  padding: 5px 28px;
}

._1vJGbc {
  background: #0681ff;
  border-color: transparent;
  color: #fff;
}

._1Apnir {
  background-color: #dcdce0;
  opacity: 1;
}

._2HVxDF:visited,
.i6lrwz:visited {
  color: #fff;
}

._2HVxDF:focus,
.i6lrwz:focus {
  -webkit-box-shadow: 0 0 2px 1px #59a7ff;
          box-shadow: 0 0 2px 1px #59a7ff;
  border-color: #0b71e6;
  outline: none;
}

._2HVxDF:hover,
.i6lrwz:hover {
  background-image: -webkit-gradient(linear, left top, left bottom, from(#3996ff), to(#127bf3));
  background-image: linear-gradient(to bottom, #3996ff, #127bf3);
  border-color: transparent;
  color: #fff;
}

._2HVxDF:active,
.i6lrwz:active {
  background-image: none;
  -webkit-box-shadow: inset 0 1px 3px 0 rgba(71, 71, 79, 0.5);
          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. */

/* General button style - medium size. */

._279kSN {
  font-family: "Roboto", Helvetica, Arial, sans-serif;
  font-weight: 500;
  color: #262628;
  font-size: 15px;
  line-height: 20px;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  background: #fff;
  border: solid 1px #c3c3c8;
  border-radius: 4px;
  color: #47474f;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  min-height: 40px;
  margin: 5px;
  padding: 5px 23px;
  vertical-align: middle;
}

/* Additional styling for a disabled button. */

._3xEby_ {
  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). */

._2FBKJR,
._1utLyb {
  /* To prevent different styling of the button-like link once it has been
   * visited. */
}

._2FBKJR:visited,
._1utLyb:visited {
  font-family: "Roboto", Helvetica, Arial, sans-serif;
  font-weight: 500;
  color: #262628;
  font-size: 15px;
  line-height: 20px;
  color: #47474f;
}

._2FBKJR:focus,
._1utLyb:focus {
  -webkit-box-shadow: 0 0 2px 1px #cfe6ff;
          box-shadow: 0 0 2px 1px #cfe6ff;
  border-color: #59a7ff;
  outline: none;
}

._2FBKJR:hover,
._1utLyb:hover {
  background-image: -webkit-gradient(linear, left bottom, left top, from(#f5f5f5), color-stop(49%, white), to(white));
  background-image: linear-gradient(to top, #f5f5f5, white 49%, white);
  border-color: #a3a3ad;
}

._2FBKJR._2AEVG0,
._2FBKJR:active,
._1utLyb._2AEVG0,
._1utLyb:active {
  background-image: -webkit-gradient(linear, left top, left bottom, from(#f5f5f5), color-stop(49%, white), to(white));
  background-image: linear-gradient(to bottom, #f5f5f5, white 49%, white);
  -webkit-box-shadow: inset 0 1px 2px 0 rgba(0, 0, 0, 0.2);
          box-shadow: inset 0 1px 2px 0 rgba(0, 0, 0, 0.2);
  border-color: #a3a3ad;
}

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

.aCfo1G {
  font-family: "Roboto", Helvetica, Arial, sans-serif;
  font-weight: 400;
  color: #262628;
  font-size: 12px;
  line-height: 15px;
  border-radius: 2px;
  color: #47474f;
  min-height: 20px;
  padding: 1px 13px;
}

._3v19e8 {
  font-family: "Roboto", Helvetica, Arial, sans-serif;
  font-weight: 500;
  color: #262628;
  font-size: 13px;
  line-height: 20px;
  color: #47474f;
  min-height: 30px;
  padding: 4px 18px;
}

._14vlri {
  font-family: "Roboto", Helvetica, Arial, sans-serif;
  font-weight: 500;
  color: #262628;
  font-size: 20px;
  line-height: 25px;
  color: #47474f;
  min-height: 50px;
  padding: 5px 28px;
}

._279kSN {
  background: #a3a3ad;
  border-color: transparent;
  color: #fff;
}

._3xEby_ {
  background-color: #dcdce0;
  opacity: 1;
}

._2FBKJR:visited,
._1utLyb:visited {
  color: #fff;
}

._2FBKJR:focus,
._1utLyb:focus {
  -webkit-box-shadow: 0 0 2px 1px #59a7ff;
          box-shadow: 0 0 2px 1px #59a7ff;
  border-color: #888894;
  outline: none;
}

._2FBKJR:hover,
._1utLyb:hover {
  background-image: -webkit-gradient(linear, left top, left bottom, from(#a3a3ad), to(#888894));
  background-image: linear-gradient(to bottom, #a3a3ad, #888894);
  border-color: transparent;
  color: #fff;
}

._2FBKJR:active,
._1utLyb:active {
  background-color: #888894;
  background-image: none;
  -webkit-box-shadow: inset 0 1px 3px 0 rgba(71, 71, 79, 0.38);
          box-shadow: inset 0 1px 3px 0 rgba(71, 71, 79, 0.38);
  border-color: transparent;
}/**
 * 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. */

.UbryEB {
  font-family: "Roboto", Helvetica, Arial, sans-serif;
  font-weight: 700;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  background-color: #ebebeb;
  border: none;
  border-radius: 3px;
  color: #47474f;
  cursor: pointer;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  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;
}

.UbryEB:active,
.UbryEB:focus,
.UbryEB:hover {
  color: #47474f;
  background-color: #cee6ff;
}

.UbryEB:visited {
  color: #47474f;
}

.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. */

._3gRNDS {
  font-family: "Roboto", Helvetica, Arial, sans-serif;
  font-weight: 700;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  background-color: #ebebeb;
  border: none;
  border-radius: 3px;
  color: #47474f;
  cursor: pointer;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  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;
}

._3gRNDS:active,
._3gRNDS:focus,
._3gRNDS:hover {
  color: #47474f;
  background-color: #cee6ff;
}

._3gRNDS:visited {
  color: #47474f;
}

._3x_c0h {
  cursor: not-allowed;
  opacity: 0.3;
}

._3gRNDS {
  background-color: #fd7d00;
  color: #fff;
}

._3gRNDS:active,
._3gRNDS:focus,
._3gRNDS:hover {
  color: #fff;
  background-color: #fd7d00;
}

._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. */

.bMmUSs {
  font-family: "Roboto", Helvetica, Arial, sans-serif;
  font-weight: 700;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  background-color: #ebebeb;
  border: none;
  border-radius: 3px;
  color: #47474f;
  cursor: pointer;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  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;
}

.bMmUSs:active,
.bMmUSs:focus,
.bMmUSs:hover {
  color: #47474f;
  background-color: #cee6ff;
}

.bMmUSs:visited {
  color: #47474f;
}

._2Rg3PO {
  cursor: not-allowed;
  opacity: 0.3;
}

.bMmUSs {
  background-color: #15acec;
  color: #fff;
}

.bMmUSs:active,
.bMmUSs:focus,
.bMmUSs:hover {
  color: #fff;
  background-color: #15acec;
}

.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. */

._1BrOXW {
  font-family: "Roboto", Helvetica, Arial, sans-serif;
  font-weight: 700;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  background-color: #ebebeb;
  border: none;
  border-radius: 3px;
  color: #47474f;
  cursor: pointer;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  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;
}

._1BrOXW:active,
._1BrOXW:focus,
._1BrOXW:hover {
  color: #47474f;
  background-color: #cee6ff;
}

._1BrOXW:visited {
  color: #47474f;
}

._2f-WZi {
  cursor: not-allowed;
  opacity: 0.3;
}

._1BrOXW {
  background-color: #5cc900;
  color: #fff;
}

._1BrOXW:active,
._1BrOXW:focus,
._1BrOXW:hover {
  color: #fff;
  background-color: #5cc900;
}

._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. */

._2uUPpY {
  font-family: "Roboto", Helvetica, Arial, sans-serif;
  font-weight: 700;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  background-color: #ebebeb;
  border: none;
  border-radius: 3px;
  color: #47474f;
  cursor: pointer;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  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;
}

._2uUPpY:active,
._2uUPpY:focus,
._2uUPpY:hover {
  color: #47474f;
  background-color: #cee6ff;
}

._2uUPpY:visited {
  color: #47474f;
}

.Z1Mz1W {
  cursor: not-allowed;
  opacity: 0.3;
}

._2uUPpY {
  color: #fd7d00;
  background-color: #fff0eb;
}

._2uUPpY:active,
._2uUPpY:focus,
._2uUPpY:hover {
  color: #fd7d00;
  background-color: #fff0eb;
}

._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. */

.ZeXC43 {
  font-family: "Roboto", Helvetica, Arial, sans-serif;
  font-weight: 700;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  background-color: #ebebeb;
  border: none;
  border-radius: 3px;
  color: #47474f;
  cursor: pointer;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  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;
}

.ZeXC43:active,
.ZeXC43:focus,
.ZeXC43:hover {
  color: #47474f;
  background-color: #cee6ff;
}

.ZeXC43:visited {
  color: #47474f;
}

._2FrQTV {
  cursor: not-allowed;
  opacity: 0.3;
}

.ZeXC43 {
  color: #15acec;
  background-color: #e9f6fc;
}

.ZeXC43:active,
.ZeXC43:focus,
.ZeXC43:hover {
  color: #15acec;
  background-color: #e9f6fc;
}

.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. */

._33q6fs {
  font-family: "Roboto", Helvetica, Arial, sans-serif;
  font-weight: 700;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  background-color: #ebebeb;
  border: none;
  border-radius: 3px;
  color: #47474f;
  cursor: pointer;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  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;
}

._33q6fs:active,
._33q6fs:focus,
._33q6fs:hover {
  color: #47474f;
  background-color: #cee6ff;
}

._33q6fs:visited {
  color: #47474f;
}

._1ha4NE {
  cursor: not-allowed;
  opacity: 0.3;
}

._33q6fs {
  color: #5cc900;
  background-color: #effae4;
}

._33q6fs:active,
._33q6fs:focus,
._33q6fs:hover {
  color: #5cc900;
  background-color: #effae4;
}

._33q6fs:visited {
  color: #5cc900;
}