/*doc
---
title: Variables
name: 01-variables
category: Elements
---

### Colors

#### Dark UI Colors

<div class="ko-color-blocks">
    <div class="ko-color-block-ui_dark_color">
        <div>$dui_dark_color</div>
        <div>#232A31</div>
    </div>
    <div class="ko-color-block-ui_dark_medium_color">
        <div>$ui_dark_medium_color</div>
        <div>#38434F</div>
    </div>
    <div class="ko-color-block-ui_dark_light_color">
        <div>$ui_dark_light_color</div>
        <div>#4E5D6C</div>
    </div>
</div>

#### Gray UI Colors

<div class="ko-color-blocks">
    <div class="ko-color-block-ui_gray_color">
        <div>$ui_gray_color</div>
        <div>#8A8A8A</div>
    </div>
    <div class="ko-color-block-ui_gray_medium_color">
        <div>$ui_gray_medium_color</div>
        <div>#E8E8E8</div>
    </div>
    <div class="ko-color-block-ui_gray_light_color">
        <div>$ui_gray_light_color</div>
        <div>#F5F5F5</div>
    </div>
</div>

#### Accent UI Colors

<div class="ko-color-blocks">
    <div class="ko-color-block-ui_blue_color">
        <div>$ui_blue_color</div>
        <div>#00AEEF</div>
    </div>
    <div class="ko-color-block-ui_orange_color">
        <div>$ui_orange_color</div>
        <div>#FF6600</div>
    </div>
</div>

#### Alert UI Colors

<div class="ko-color-blocks">
    <div class="ko-color-block-ui_red_color">
        <div>$ui_red_color</div>
        <div>#D81D1D</div>
    </div>
    <div class="ko-color-block-ui_yellow_color">
        <div>$ui_yellow_color</div>
        <div>#FABE39</div>
    </div>
    <div class="ko-color-block-ui_green_color">
        <div>$ui_green_color</div>
        <div>#6AA220</div>
    </div>
</div>

#### Grayscale UI Text Colors

<div class="ko-color-blocks">
    <div class="ko-color-block-ui_text_dark_color">
        <div>$ui_text_dark_color</div>
        <div>#333333</div>
    </div>
    <div class="ko-color-block-ui_text_medium_color">
        <div>$ui_text_medium_color</div>
        <div>#666666</div>
    </div>
    <div class="ko-color-block-ui_text_light_color">
        <div>$ui_text_light_color</div>
        <div>#999999</div>
    </div>
</div>
<div class="ko-color-blocks">
    <div class="ko-color-block-ui_text_extra_light_color">
        <div>$ui_text_extra_light_color</div>
        <div>#CCCCCC</div>
    </div>
</div>

#### Base UI Colors

<div class="ko-color-blocks">
    <div class="ko-color-block-ui_black_color">
        <div>$ui_black_color</div>
        <div>#FFFFFF</div>
    </div>
    <div class="ko-color-block-ui_white_color">
        <div>$ui_white_color</div>
        <div>#000000</div>
    </div>
</div>

#### Team Colors

<div class="ko-color-blocks">
    <div class="ko-color-block-tagging_team_white_color">
        <div>$tagging_team_white_color</div>
        <div>#E9E9E9</div>
    </div>
    <div class="ko-color-block-tagging_team_gray_color">
        <div>$tagging_team_gray_color</div>
        <div>#8C9196</div>
    </div>
    <div class="ko-color-block-tagging_team_black_color">
        <div>$tagging_team_black_color</div>
        <div>#404040</div>
    </div>
</div>

<div class="ko-color-blocks">
    <div class="ko-color-block-tagging_team_yellow_color">
        <div>$tagging_team_yellow_color</div>
        <div>#FFDD30</div>
    </div>
    <div class="ko-color-block-tagging_team_orange_color">
        <div>$tagging_team_orange_color</div>
        <div>#ED9827</div>
    </div>
    <div class="ko-color-block-tagging_team_red_color">
        <div>$tagging_team_red_color</div>
        <div>#DF4953</div>
    </div>
</div>

<div class="ko-color-blocks">
    <div class="ko-color-block-tagging_team_green_color">
        <div>$tagging_team_green_color</div>
        <div>#42BE39</div>
    </div>
    <div class="ko-color-block-tagging_team_blue_color">
        <div>$tagging_team_blue_color</div>
        <div>#3985BE</div>
    </div>
    <div class="ko-color-block-tagging_team_purple_color">
        <div>$tagging_team_purple_color</div>
        <div>#9F62B1</div>
    </div>
</div>

### Font Sizes

These should really be used by the `font-size()` mixin to maintain consistent typography. The possible values are (from smallest to largest): **small**, **p**, and **5** to **1** (or **h5** to **h1** if that's your jam).

### Z-index

Try to stick to the variables defined here for z-index values, e.g., `z-index: $z-1` instead of arbitrary numbers. The possible values are: **z-1** (100) to **z-7** (700).

### Transition Lengths

Again, try to stick to these instead of arbitrary values. The possible values are: **t-quick** (0.2s), **t-med** (0.3s), and **t-slow** (0.5s).

### Common Breakpoints

Put breakpoints that you end up referencing a lot here and give it a prefix of `b-`, e.g., `b-showdesktop`. These are usually referenced by the `respond()` mixin.

*/
.height {
  height: 100vh; }

.login-form-container {
  text-align: center;
  background: white;
  padding: 2rem 1rem 0rem 1rem;
  margin-bottom: 2rem; }
  .login-form-container h3 {
    margin-bottom: 2rem !important; }

.col-xs-12 {
  padding-right: 0 !important; }

.login-header {
  background: #232a31;
  padding: 2rem;
  text-align: center;
  margin-top: 40%; }

.login-box {
  text-align: center; }

.hudl-link:hover {
  opacity: 0.7; }

.message {
  margin-bottom: 2rem;
  color: #e81e05; }

.remember-me-div {
  margin: 1rem 0; }

.remember-me {
  margin: 1rem 0; }
  .remember-me input {
    margin-right: 1rem; }

.login-extras {
  display: flex;
  position: fixed;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  bottom: 1rem;
  left: 0; }
  .login-extras .powered-by-hudl {
    margin-right: 1rem; }
  .login-extras .privacy-policy {
    font-family: Helvetica, Arial, sans-serif !important;
    color: white;
    font-size: 1rem;
    font-weight: bold;
    padding-top: 2px;
    margin-left: 1rem; }
    .login-extras .privacy-policy:hover {
      opacity: 0.7; }

.login-extras.above-cookie-footer {
  bottom: 3rem; }
._2LABu6yckCvjd4MfUgvHMI {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 0.25rem 1rem;
  background-color: #101417;
  color: #e6f2ff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 100; }

._1a4TnreD-nt0b1PRqC36pz {
  text-decoration: underline;
  color: #e6f2ff; }
  ._1a4TnreD-nt0b1PRqC36pz:hover {
    color: #009ce3; }
  ._1a4TnreD-nt0b1PRqC36pz:active {
    color: #e6f2ff; }

._1YVCf6V5Oa7Iygq1GUZLRI {
  display: inline-block; }
  ._1YVCf6V5Oa7Iygq1GUZLRI ._3z-Cn9coqX_qVzKqcwB0wZ {
    cursor: pointer;
    background: none;
    border: none; }
    ._1YVCf6V5Oa7Iygq1GUZLRI ._3z-Cn9coqX_qVzKqcwB0wZ path {
      fill: rgba(230, 242, 255, 0.8); }
    ._1YVCf6V5Oa7Iygq1GUZLRI ._3z-Cn9coqX_qVzKqcwB0wZ:hover path {
      fill: #e6f2ff; }
html {
  box-sizing: border-box; }

*, *::after, *::before {
  box-sizing: inherit; }

/*doc
---
title: Reset
name: 03-Reset
category: Elements
---

We use the Eric Meyer reset with the addition of setting the default font to **Trade**, removing text-decoration on links, giving everything a line-height of 1, using `-webkit-font-smoothing: antialiased`, and setting  `-webkit-tap-highlight-color: transparent`.

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

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; }

* {
  box-sizing: border-box; }

body {
  line-height: 1;
  font-family: trade, sans-serif;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent; }

a {
  text-decoration: none; }

/*doc
---
title: Variables
name: 01-variables
category: Elements
---

### Colors

#### Dark UI Colors

<div class="ko-color-blocks">
    <div class="ko-color-block-ui_dark_color">
        <div>$dui_dark_color</div>
        <div>#232A31</div>
    </div>
    <div class="ko-color-block-ui_dark_medium_color">
        <div>$ui_dark_medium_color</div>
        <div>#38434F</div>
    </div>
    <div class="ko-color-block-ui_dark_light_color">
        <div>$ui_dark_light_color</div>
        <div>#4E5D6C</div>
    </div>
</div>

#### Gray UI Colors

<div class="ko-color-blocks">
    <div class="ko-color-block-ui_gray_color">
        <div>$ui_gray_color</div>
        <div>#8A8A8A</div>
    </div>
    <div class="ko-color-block-ui_gray_medium_color">
        <div>$ui_gray_medium_color</div>
        <div>#E8E8E8</div>
    </div>
    <div class="ko-color-block-ui_gray_light_color">
        <div>$ui_gray_light_color</div>
        <div>#F5F5F5</div>
    </div>
</div>

#### Accent UI Colors

<div class="ko-color-blocks">
    <div class="ko-color-block-ui_blue_color">
        <div>$ui_blue_color</div>
        <div>#00AEEF</div>
    </div>
    <div class="ko-color-block-ui_orange_color">
        <div>$ui_orange_color</div>
        <div>#FF6600</div>
    </div>
</div>

#### Alert UI Colors

<div class="ko-color-blocks">
    <div class="ko-color-block-ui_red_color">
        <div>$ui_red_color</div>
        <div>#D81D1D</div>
    </div>
    <div class="ko-color-block-ui_yellow_color">
        <div>$ui_yellow_color</div>
        <div>#FABE39</div>
    </div>
    <div class="ko-color-block-ui_green_color">
        <div>$ui_green_color</div>
        <div>#6AA220</div>
    </div>
</div>

#### Grayscale UI Text Colors

<div class="ko-color-blocks">
    <div class="ko-color-block-ui_text_dark_color">
        <div>$ui_text_dark_color</div>
        <div>#333333</div>
    </div>
    <div class="ko-color-block-ui_text_medium_color">
        <div>$ui_text_medium_color</div>
        <div>#666666</div>
    </div>
    <div class="ko-color-block-ui_text_light_color">
        <div>$ui_text_light_color</div>
        <div>#999999</div>
    </div>
</div>
<div class="ko-color-blocks">
    <div class="ko-color-block-ui_text_extra_light_color">
        <div>$ui_text_extra_light_color</div>
        <div>#CCCCCC</div>
    </div>
</div>

#### Base UI Colors

<div class="ko-color-blocks">
    <div class="ko-color-block-ui_black_color">
        <div>$ui_black_color</div>
        <div>#FFFFFF</div>
    </div>
    <div class="ko-color-block-ui_white_color">
        <div>$ui_white_color</div>
        <div>#000000</div>
    </div>
</div>

#### Team Colors

<div class="ko-color-blocks">
    <div class="ko-color-block-tagging_team_white_color">
        <div>$tagging_team_white_color</div>
        <div>#E9E9E9</div>
    </div>
    <div class="ko-color-block-tagging_team_gray_color">
        <div>$tagging_team_gray_color</div>
        <div>#8C9196</div>
    </div>
    <div class="ko-color-block-tagging_team_black_color">
        <div>$tagging_team_black_color</div>
        <div>#404040</div>
    </div>
</div>

<div class="ko-color-blocks">
    <div class="ko-color-block-tagging_team_yellow_color">
        <div>$tagging_team_yellow_color</div>
        <div>#FFDD30</div>
    </div>
    <div class="ko-color-block-tagging_team_orange_color">
        <div>$tagging_team_orange_color</div>
        <div>#ED9827</div>
    </div>
    <div class="ko-color-block-tagging_team_red_color">
        <div>$tagging_team_red_color</div>
        <div>#DF4953</div>
    </div>
</div>

<div class="ko-color-blocks">
    <div class="ko-color-block-tagging_team_green_color">
        <div>$tagging_team_green_color</div>
        <div>#42BE39</div>
    </div>
    <div class="ko-color-block-tagging_team_blue_color">
        <div>$tagging_team_blue_color</div>
        <div>#3985BE</div>
    </div>
    <div class="ko-color-block-tagging_team_purple_color">
        <div>$tagging_team_purple_color</div>
        <div>#9F62B1</div>
    </div>
</div>

### Font Sizes

These should really be used by the `font-size()` mixin to maintain consistent typography. The possible values are (from smallest to largest): **small**, **p**, and **5** to **1** (or **h5** to **h1** if that's your jam).

### Z-index

Try to stick to the variables defined here for z-index values, e.g., `z-index: $z-1` instead of arbitrary numbers. The possible values are: **z-1** (100) to **z-7** (700).

### Transition Lengths

Again, try to stick to these instead of arbitrary values. The possible values are: **t-quick** (0.2s), **t-med** (0.3s), and **t-slow** (0.5s).

### Common Breakpoints

Put breakpoints that you end up referencing a lot here and give it a prefix of `b-`, e.g., `b-showdesktop`. These are usually referenced by the `respond()` mixin.

*/
/*doc
---
title: Mixins
name: 02-mixins
category: Elements
---

### Bourbon & Neat

First off, be aware that we're using [Bourbon](http://bourbon.io/docs/) and [Neat](http://neat.bourbon.io/docs/) in Kickoff. Read up on their documentation to familiarize yourself with the mixins we get with those libraries.

### Respond()

This is our main responsive design mixin. It's built in mobile-first fashion and uses `em`s as the unit, and here's the usage:


```
.widget {

    // Default mobile-first styles here

    @include respond(20) {
        // Styles for screens from 20ems on up
    }

    @include respond(55) {
        // Styles for screens from 55rems on up
    }

    @include respond($b-showdesktop) {
        // Styles for screens from this variable on up
    }

}
```

There's an optional `ie` argument that you can pass in if you also want these styles to apply to IE8 since that browser doesn't like media queries.


```
.widget {

    // Default mobile-first styles here

    @include respond(20, ie) {
        // Styles for screens from 20ems on up and IE8
    }

}
```

Finally, the mixin applies ALL the styles to any page with a class of `desktop-only` on the `<body>`. This is to support older non-responsive and non-mobile-first pages.

### Font sizes

We've got a mixin for maintaining consistent font-sizes on a nice typographic scale. Any time you need to change the font size of an element, please use this mixin.
The possible values are (from smallest to largest): **small**, **p**, **5**, **4**, **3**, **2**, and **1**.

```
.widget {
    @include font-size(small) // .75rem
}

.widget {
    @include font-size(p) // default 1rem font size
}

.widget {
    @include font-size(5) // h5 size: 1.125rem
}

.widget {
    @include font-size(4) // h4 size: 1.3125rem
}

// etc

```

### Trade-heading()

A quick mixin for giving you that bold condensed trade heading that we all love. Pass in 'caps' to uppercase it, e.g., `trade-heading(caps)`

### Text-overflow()

For when you just don't have enough room. Hides overflow, doesn't wrap white-space and cuts off text with an ellipsis.

### CSS Spinner

There's a default `css-spinner` class that you can throw on any `<div>` but you'll likely want to customize it a bit.

```html_example
<div class="css-spinner"></div>
```

Here's how the mixin works if you want to put it on your own element and customize the colors.

```
.widget {

    // Arguments:
    // 1. border-width
    // 2. main color
    // 3. background color
    // 4. total width/height
    // 5. margin (optional. defaults to 0.)

    @include css-spinner(.5rem, $orange, $medium-gray, 4rem, 1rem);

}
```

*/
@-webkit-keyframes spinner-rotation {
  from {
    -webkit-transform: rotate(0deg); }
  to {
    -webkit-transform: rotate(359deg); } }

@-moz-keyframes spinner-rotation {
  from {
    -moz-transform: rotate(0deg); }
  to {
    -moz-transform: rotate(359deg); } }

@keyframes spinner-rotation {
  from {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg); }
  to {
    -webkit-transform: rotate(359deg);
    -moz-transform: rotate(359deg);
    -ms-transform: rotate(359deg);
    -o-transform: rotate(359deg);
    transform: rotate(359deg); } }

.css-spinner {
  -webkit-animation: spinner-rotation 0.75s infinite linear;
  -moz-animation: spinner-rotation 0.75s infinite linear;
  animation: spinner-rotation 0.75s infinite linear;
  clear: both;
  height: 4rem;
  width: 4rem;
  margin: 1rem auto 1rem auto;
  position: relative;
  border-top: 0.5rem solid #FF6600;
  border-left: 0.5rem solid #E8E8E8;
  border-bottom: 0.5rem solid #E8E8E8;
  border-right: 0.5rem solid #E8E8E8;
  border-radius: 100%;
  display: block; }
  .no-cssanimations .css-spinner {
    display: none; }

.css-spinner-message {
  margin-bottom: 1.5rem;
  padding: 0 1.5rem;
  text-align: center;
  font-size: 1rem;
  font-style: italic;
  color: #8A8A8A; }
  .no-cssanimations .css-spinner-message {
    font-weight: bold;
    padding: 1.5rem;
    color: #FF6600;
    font-size: 20px; }

.ko-nav-mobile-menu-button,
.ko-nav-mobile-menu-right-button {
  height: 3rem;
  width: 3rem;
  font-weight: bold;
  border-right: 1px solid rgba(255, 255, 255, 0.1);
  display: -webkit-box;
  display: -moz-box;
  display: box;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -moz-box-align: center;
  box-align: center;
  -webkit-align-items: center;
  -moz-align-items: center;
  -ms-align-items: center;
  -o-align-items: center;
  align-items: center;
  -ms-flex-align: center;
  -webkit-box-pack: center;
  -moz-box-pack: center;
  box-pack: center;
  -webkit-justify-content: center;
  -moz-justify-content: center;
  -ms-justify-content: center;
  -o-justify-content: center;
  justify-content: center;
  -ms-flex-pack: center;
  -webkit-transition: 0.2s;
  -moz-transition: 0.2s;
  transition: 0.2s;
  position: absolute;
  left: 0;
  top: 0;
  cursor: pointer; }
  .ko-nav-mobile-menu-button:hover,
  .ko-nav-mobile-menu-right-button:hover {
    background-color: #181d22; }
  .ko-nav-mobile-menu-button svg, .ko-nav-mobile-menu-button path, .ko-nav-mobile-menu-button polygon,
  .ko-nav-mobile-menu-right-button svg,
  .ko-nav-mobile-menu-right-button path,
  .ko-nav-mobile-menu-right-button polygon {
    fill: #FF6600; }
  .no-flexbox .ko-nav-mobile-menu-button::after, .no-flexbox
  .ko-nav-mobile-menu-right-button::after {
    clear: both;
    content: "";
    display: table; }
  .no-flexbox .ko-nav-mobile-menu-button svg,
  .no-flexbox .ko-nav-mobile-menu-button span,
  .no-flexbox .ko-nav-mobile-menu-button img, .no-flexbox
  .ko-nav-mobile-menu-right-button svg,
  .no-flexbox
  .ko-nav-mobile-menu-right-button span,
  .no-flexbox
  .ko-nav-mobile-menu-right-button img {
    height: 3rem;
    line-height: 3rem;
    vertical-align: middle;
    float: left; }
  .no-flexbox .ko-nav-mobile-menu-button, .no-flexbox
  .ko-nav-mobile-menu-right-button {
    text-align: center; }
  .ko-nav-mobile-menu-button svg, .ko-nav-mobile-menu-button path, .ko-nav-mobile-menu-button polygon,
  .ko-nav-mobile-menu-right-button svg,
  .ko-nav-mobile-menu-right-button path,
  .ko-nav-mobile-menu-right-button polygon {
    width: 1.5rem;
    height: 1.5rem; }
    .no-flexbox .ko-nav-mobile-menu-button svg, .no-flexbox .ko-nav-mobile-menu-button path, .no-flexbox .ko-nav-mobile-menu-button polygon, .no-flexbox
    .ko-nav-mobile-menu-right-button svg, .no-flexbox
    .ko-nav-mobile-menu-right-button path, .no-flexbox
    .ko-nav-mobile-menu-right-button polygon {
      display: inline-block;
      float: none;
      height: 3rem; }

.ko-nav-mobile-menu-right-button {
  left: auto;
  right: 0; }

a.ko-nav-team {
  height: 3rem;
  width: 3rem;
  font-weight: bold;
  border-right: 1px solid rgba(255, 255, 255, 0.1);
  display: -webkit-box;
  display: -moz-box;
  display: box;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -moz-box-align: center;
  box-align: center;
  -webkit-align-items: center;
  -moz-align-items: center;
  -ms-align-items: center;
  -o-align-items: center;
  align-items: center;
  -ms-flex-align: center;
  -webkit-box-pack: center;
  -moz-box-pack: center;
  box-pack: center;
  -webkit-justify-content: center;
  -moz-justify-content: center;
  -ms-justify-content: center;
  -o-justify-content: center;
  justify-content: center;
  -ms-flex-pack: center;
  -webkit-transition: 0.2s;
  -moz-transition: 0.2s;
  transition: 0.2s;
  border-right: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  cursor: pointer;
  -webkit-box-pack: start;
  -moz-box-pack: start;
  box-pack: start;
  -webkit-justify-content: flex-start;
  -moz-justify-content: flex-start;
  -ms-justify-content: flex-start;
  -o-justify-content: flex-start;
  justify-content: flex-start;
  -ms-flex-pack: start; }
  a.ko-nav-team:hover {
    background-color: #181d22; }
  a.ko-nav-team svg, a.ko-nav-team path, a.ko-nav-team polygon {
    fill: #FF6600; }
  .no-flexbox a.ko-nav-team::after {
    clear: both;
    content: "";
    display: table; }
  .no-flexbox a.ko-nav-team svg,
  .no-flexbox a.ko-nav-team span,
  .no-flexbox a.ko-nav-team img {
    height: 3rem;
    line-height: 3rem;
    vertical-align: middle;
    float: left; }
  @media only screen and (min-width: 65em) {
    a.ko-nav-team {
      border-right: 1px solid rgba(255, 255, 255, 0.1);
      border-bottom: none; } }
  .desktop-only a.ko-nav-team {
    border-right: 1px solid rgba(255, 255, 255, 0.1);
    border-bottom: none; }
  .no-flexbox a.ko-nav-team {
    height: auto;
    padding-top: 0;
    padding-bottom: 0; }
  a.ko-nav-team .ko-nav-team-dudes {
    display: none;
    width: 1.5rem;
    height: 1.5rem; }
    @media only screen and (min-width: 65em) {
      a.ko-nav-team .ko-nav-team-dudes {
        display: block;
        margin-right: .5rem; } }
    .desktop-only a.ko-nav-team .ko-nav-team-dudes {
      display: block;
      margin-right: .5rem; }
  @media only screen and (min-width: 65em) {
    a.ko-nav-team .ko-nav-team-icon {
      display: none; } }
  .desktop-only a.ko-nav-team .ko-nav-team-icon {
    display: none; }
  a.ko-nav-team .ko-nav-team-icon svg {
    height: 1rem;
    width: 1rem; }
  a.ko-nav-team .ko-nav-team-arrow {
    display: none; }
    @media only screen and (min-width: 65em) {
      a.ko-nav-team .ko-nav-team-arrow {
        display: block; } }
    .desktop-only a.ko-nav-team .ko-nav-team-arrow {
      display: block; }
  a.ko-nav-team .ko-nav-team-name {
    display: block;
    margin: 0 0.375rem 0 0;
    color: #FF6600;
    max-width: 12rem;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden; }

.ko-nav-mobile-header, .ko-nav {
  z-index: 0; }
  @media only screen and (min-width: 65em) {
    .ko-nav-mobile-header, .ko-nav {
      z-index: 100; } }
  .desktop-only .ko-nav-mobile-header, .desktop-only .ko-nav {
    z-index: 100; }
  .ko-nav-mobile-header a, .ko-nav a {
    color: #FFFFFF;
    -webkit-transition: 0.2s;
    -moz-transition: 0.2s;
    transition: 0.2s; }

.ko-nav-icon {
  width: 1rem;
  height: 1rem;
  fill: rgba(255, 255, 255, 0.5);
  margin-right: .5rem; }
  .ko-nav-icon svg {
    height: 100%;
    width: 100%; }
  .ko-nav-icon path, .ko-nav-icon polygon {
    width: 1rem;
    height: 1rem;
    fill: rgba(255, 255, 255, 0.5); }
  @media only screen and (min-width: 65em) {
    .ko-nav-main-item .ko-nav-icon {
      display: none; } }
  .desktop-only .ko-nav-main-item .ko-nav-icon {
    display: none; }
  @media only screen and (min-width: 65em) {
    .ko-nav-help .ko-nav-icon, .ko-nav-sub .ko-nav-icon, .ko-nav-sub-double .ko-nav-icon {
      display: block; } }
  .desktop-only .ko-nav-help .ko-nav-icon, .desktop-only .ko-nav-sub .ko-nav-icon, .desktop-only .ko-nav-sub-double .ko-nav-icon {
    display: block; }
  .no-flexbox .ko-nav-icon {
    position: relative;
    top: 0.1875rem; }

.ko-nav-mobile-header {
  background-color: #232A31;
  height: 3rem;
  display: -webkit-box;
  display: -moz-box;
  display: box;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -moz-box-align: center;
  box-align: center;
  -webkit-align-items: center;
  -moz-align-items: center;
  -ms-align-items: center;
  -o-align-items: center;
  align-items: center;
  -ms-flex-align: center;
  -webkit-box-pack: justify;
  -moz-box-pack: justify;
  box-pack: justify;
  -webkit-justify-content: space-between;
  -moz-justify-content: space-between;
  -ms-justify-content: space-between;
  -o-justify-content: space-between;
  justify-content: space-between;
  -ms-flex-pack: justify; }
  @media only screen and (min-width: 65em) {
    .ko-nav-mobile-header {
      display: none; } }
  html.no-rgba .ko-nav-mobile-header {
    display: none; }
  .desktop-only .ko-nav-mobile-header {
    display: none; }

.ko-mobile-title {
  text-align: center;
  width: 100%;
  font-size: 1.5rem;
  font-family: trade;
  font-weight: bold;
  text-transform: uppercase; }
  .no-flexbox .ko-mobile-title {
    line-height: 3rem; }

.ko-nav {
  position: absolute;
  top: 0;
  height: 100%;
  width: 16rem;
  background-color: #38434F;
  box-shadow: inset 0 0 2rem rgba(35, 42, 49, 0.75);
  -webkit-transition-property: -webkit-transform;
  -moz-transition-property: -moz-transform;
  transition-property: transform;
  -webkit-transition-duration: 0.3s;
  -moz-transition-duration: 0.3s;
  transition-duration: 0.3s; }
  @media only screen and (min-width: 65em) {
    .ko-nav {
      background: none; } }
  .desktop-only .ko-nav {
    background: none; }
  .ko-nav-sub-is-active .ko-nav {
    -webkit-transform: translateX(-100%);
    -moz-transform: translateX(-100%);
    -ms-transform: translateX(-100%);
    -o-transform: translateX(-100%);
    transform: translateX(-100%); }
    @media only screen and (min-width: 65em) {
      .ko-nav-sub-is-active .ko-nav {
        -webkit-transform: translateX(0);
        -moz-transform: translateX(0);
        -ms-transform: translateX(0);
        -o-transform: translateX(0);
        transform: translateX(0); } }
    .desktop-only .ko-nav-sub-is-active .ko-nav {
      -webkit-transform: translateX(0);
      -moz-transform: translateX(0);
      -ms-transform: translateX(0);
      -o-transform: translateX(0);
      transform: translateX(0); }
  .ko-nav-teamswitcher-is-active .ko-nav {
    -webkit-transform: translateX(100%);
    -moz-transform: translateX(100%);
    -ms-transform: translateX(100%);
    -o-transform: translateX(100%);
    transform: translateX(100%); }
    @media only screen and (min-width: 65em) {
      .ko-nav-teamswitcher-is-active .ko-nav {
        -webkit-transform: translateX(0);
        -moz-transform: translateX(0);
        -ms-transform: translateX(0);
        -o-transform: translateX(0);
        transform: translateX(0); } }
    .desktop-only .ko-nav-teamswitcher-is-active .ko-nav {
      -webkit-transform: translateX(0);
      -moz-transform: translateX(0);
      -ms-transform: translateX(0);
      -o-transform: translateX(0);
      transform: translateX(0); }
  @media only screen and (min-width: 65em) {
    .ko-nav {
      position: relative;
      width: 100%;
      height: 3rem;
      background-color: #232A31;
      overflow: visible;
      display: -webkit-box;
      display: -moz-box;
      display: box;
      display: -webkit-flex;
      display: -moz-flex;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
      -moz-box-align: center;
      box-align: center;
      -webkit-align-items: center;
      -moz-align-items: center;
      -ms-align-items: center;
      -o-align-items: center;
      align-items: center;
      -ms-flex-align: center;
      -webkit-box-pack: justify;
      -moz-box-pack: justify;
      box-pack: justify;
      -webkit-justify-content: space-between;
      -moz-justify-content: space-between;
      -ms-justify-content: space-between;
      -o-justify-content: space-between;
      justify-content: space-between;
      -ms-flex-pack: justify; } }
  html.no-rgba .ko-nav {
    position: relative;
    width: 100%;
    height: 3rem;
    background-color: #232A31;
    overflow: visible;
    display: -webkit-box;
    display: -moz-box;
    display: box;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -moz-box-align: center;
    box-align: center;
    -webkit-align-items: center;
    -moz-align-items: center;
    -ms-align-items: center;
    -o-align-items: center;
    align-items: center;
    -ms-flex-align: center;
    -webkit-box-pack: justify;
    -moz-box-pack: justify;
    box-pack: justify;
    -webkit-justify-content: space-between;
    -moz-justify-content: space-between;
    -ms-justify-content: space-between;
    -o-justify-content: space-between;
    justify-content: space-between;
    -ms-flex-pack: justify; }
  .desktop-only .ko-nav {
    position: relative;
    width: 100%;
    height: 3rem;
    background-color: #232A31;
    overflow: visible;
    display: -webkit-box;
    display: -moz-box;
    display: box;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -moz-box-align: center;
    box-align: center;
    -webkit-align-items: center;
    -moz-align-items: center;
    -ms-align-items: center;
    -o-align-items: center;
    align-items: center;
    -ms-flex-align: center;
    -webkit-box-pack: justify;
    -moz-box-pack: justify;
    box-pack: justify;
    -webkit-justify-content: space-between;
    -moz-justify-content: space-between;
    -ms-justify-content: space-between;
    -o-justify-content: space-between;
    justify-content: space-between;
    -ms-flex-pack: justify; }
  .no-flexbox .ko-nav::after {
    clear: both;
    content: "";
    display: table; }

.no-flexbox .ko-nav {
  display: block !important; }

@media only screen and (min-width: 65em) {
  .ko-nav-right,
  .ko-nav-left {
    display: -webkit-box;
    display: -moz-box;
    display: box;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -moz-box-align: center;
    box-align: center;
    -webkit-align-items: center;
    -moz-align-items: center;
    -ms-align-items: center;
    -o-align-items: center;
    align-items: center;
    -ms-flex-align: center; }
    .no-flexbox .ko-nav-right::after, .no-flexbox
    .ko-nav-left::after {
      clear: both;
      content: "";
      display: table; } }

.desktop-only .ko-nav-right, .desktop-only
.ko-nav-left {
  display: -webkit-box;
  display: -moz-box;
  display: box;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -moz-box-align: center;
  box-align: center;
  -webkit-align-items: center;
  -moz-align-items: center;
  -ms-align-items: center;
  -o-align-items: center;
  align-items: center;
  -ms-flex-align: center; }
  .no-flexbox .desktop-only .ko-nav-right::after, .no-flexbox .desktop-only
  .ko-nav-left::after {
    clear: both;
    content: "";
    display: table; }

@media only screen and (min-width: 65em) {
  .ko-nav-right > li,
  .ko-nav-left > li {
    position: relative; }
    .no-flexbox .ko-nav-right > li, .no-flexbox
    .ko-nav-left > li {
      float: left; } }

.desktop-only .ko-nav-right > li, .desktop-only
.ko-nav-left > li {
  position: relative; }
  .no-flexbox .desktop-only .ko-nav-right > li, .no-flexbox .desktop-only
  .ko-nav-left > li {
    float: left; }

.ko-nav-right > li:hover > a,
.ko-nav-left > li:hover > a {
  background-color: rgba(255, 255, 255, 0.1); }
  @media only screen and (min-width: 65em) {
    .ko-nav-right > li:hover > a,
    .ko-nav-left > li:hover > a {
      background-color: #181d22; } }
  .desktop-only .ko-nav-right > li:hover > a, .desktop-only
  .ko-nav-left > li:hover > a {
    background-color: #181d22; }

@media only screen and (min-width: 65em) {
  .ko-nav-right > li:hover ul,
  .ko-nav-left > li:hover ul {
    top: 100%;
    height: auto;
    opacity: .99;
    -webkit-transition: opacity 0.2s;
    -moz-transition: opacity 0.2s;
    transition: opacity 0.2s; } }

.desktop-only .ko-nav-right > li:hover ul, .desktop-only
.ko-nav-left > li:hover ul {
  top: 100%;
  height: auto;
  opacity: .99;
  -webkit-transition: opacity 0.2s;
  -moz-transition: opacity 0.2s;
  transition: opacity 0.2s; }

.ko-nav-right > li > a,
.ko-nav-left > li > a {
  padding: 0.75rem;
  width: 16rem;
  display: -webkit-box;
  display: -moz-box;
  display: box;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -moz-box-align: center;
  box-align: center;
  -webkit-align-items: center;
  -moz-align-items: center;
  -ms-align-items: center;
  -o-align-items: center;
  align-items: center;
  -ms-flex-align: center;
  -webkit-transition: 0.2s;
  -moz-transition: 0.2s;
  transition: 0.2s; }
  .no-flexbox .ko-nav-right > li > a, .no-flexbox
  .ko-nav-left > li > a {
    display: block; }
  @media only screen and (min-width: 65em) {
    .ko-nav-right > li > a,
    .ko-nav-left > li > a {
      padding: 0 0.75rem;
      color: #FFFFFF;
      height: 3rem;
      width: auto; }
      .no-flexbox .ko-nav-right > li > a, .no-flexbox
      .ko-nav-left > li > a {
        line-height: 3rem; } }
  .desktop-only .ko-nav-right > li > a, .desktop-only
  .ko-nav-left > li > a {
    padding: 0 0.75rem;
    color: #FFFFFF;
    height: 3rem;
    width: auto; }
    .no-flexbox .desktop-only .ko-nav-right > li > a, .no-flexbox .desktop-only
    .ko-nav-left > li > a {
      line-height: 3rem; }

@media only screen and (min-width: 65em) {
  .ko-nav-right > li > ul,
  .ko-nav-left > li > ul {
    height: 0; } }

.desktop-only .ko-nav-right > li > ul, .desktop-only
.ko-nav-left > li > ul {
  height: 0; }

.no-flexbox .ko-nav-left {
  float: left; }

.no-flexbox .ko-nav-right {
  float: right; }

#message-link {
  display: none; }
  @media only screen and (min-width: 65em) {
    #message-link {
      display: -webkit-box;
      display: -moz-box;
      display: box;
      display: -webkit-flex;
      display: -moz-flex;
      display: -ms-flexbox;
      display: flex; } }
  .desktop-only #message-link {
    display: -webkit-box;
    display: -moz-box;
    display: box;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flexbox;
    display: flex; }

.ko-nav-sub, .ko-nav-sub-double {
  position: absolute;
  top: -2000%;
  left: 100%;
  background-color: #38434F;
  -webkit-transition: top 0 ease 0.2s;
  -moz-transition: top 0 ease 0.2s;
  transition: top 0 ease 0.2s; }
  @media only screen and (min-width: 65em) {
    .ko-nav-sub, .ko-nav-sub-double {
      background: none; } }
  .desktop-only .ko-nav-sub, .desktop-only .ko-nav-sub-double {
    background: none; }
  .ko-nav-sub.ko-nav-sub-is-active, .ko-nav-sub-is-active.ko-nav-sub-double, .ko-nav-sub.ko-nav-teamswitcher-is-active, .ko-nav-teamswitcher-is-active.ko-nav-sub-double {
    top: 0;
    height: 100%;
    -webkit-transition: top 0 ease 0;
    -moz-transition: top 0 ease 0;
    transition: top 0 ease 0; }
    @media only screen and (min-width: 65em) {
      .ko-nav-sub.ko-nav-sub-is-active, .ko-nav-sub-is-active.ko-nav-sub-double, .ko-nav-sub.ko-nav-teamswitcher-is-active, .ko-nav-teamswitcher-is-active.ko-nav-sub-double {
        top: -2000%;
        height: auto; } }
    .desktop-only .ko-nav-sub.ko-nav-sub-is-active, .desktop-only .ko-nav-sub-is-active.ko-nav-sub-double, .desktop-only .ko-nav-sub.ko-nav-teamswitcher-is-active, .desktop-only .ko-nav-teamswitcher-is-active.ko-nav-sub-double {
      top: -2000%;
      height: auto; }
  @media only screen and (min-width: 65em) {
    .ko-nav-sub, .ko-nav-sub-double {
      left: 0;
      right: auto;
      opacity: 0;
      height: auto;
      background-color: #181d22;
      z-index: 100;
      padding: 0.5rem 0;
      display: block;
      overflow: hidden; } }
  .desktop-only .ko-nav-sub, .desktop-only .ko-nav-sub-double {
    left: 0;
    right: auto;
    opacity: 0;
    height: auto;
    background-color: #181d22;
    z-index: 100;
    padding: 0.5rem 0;
    display: block;
    overflow: hidden; }
  .ko-nav-sub li > a, .ko-nav-sub-double li > a {
    width: 16rem;
    padding: 0.75rem;
    display: block;
    display: -webkit-box;
    display: -moz-box;
    display: box;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -moz-box-align: center;
    box-align: center;
    -webkit-align-items: center;
    -moz-align-items: center;
    -ms-align-items: center;
    -o-align-items: center;
    align-items: center;
    -ms-flex-align: center; }
    @media only screen and (min-width: 65em) {
      .ko-nav-sub li > a, .ko-nav-sub-double li > a {
        width: 10rem;
        height: auto;
        padding: 0.5rem 0.75rem;
        float: left; } }
    .desktop-only .ko-nav-sub li > a, .desktop-only .ko-nav-sub-double li > a {
      width: 10rem;
      height: auto;
      padding: 0.5rem 0.75rem;
      float: left; }
    .ko-nav-sub li > a:hover, .ko-nav-sub-double li > a:hover {
      background-color: rgba(255, 255, 255, 0.1); }
      @media only screen and (min-width: 65em) {
        .ko-nav-sub li > a:hover, .ko-nav-sub-double li > a:hover {
          color: #FF6600;
          background-color: transparent; }
          .ko-nav-sub li > a:hover svg, .ko-nav-sub-double li > a:hover svg, .ko-nav-sub li > a:hover path, .ko-nav-sub-double li > a:hover path, .ko-nav-sub li > a:hover polygon, .ko-nav-sub-double li > a:hover polygon {
            fill: #FF6600; } }
      .desktop-only .ko-nav-sub li > a:hover, .desktop-only .ko-nav-sub-double li > a:hover {
        color: #FF6600;
        background-color: transparent; }
        .desktop-only .ko-nav-sub li > a:hover svg, .desktop-only .ko-nav-sub-double li > a:hover svg, .desktop-only .ko-nav-sub li > a:hover path, .desktop-only .ko-nav-sub-double li > a:hover path, .desktop-only .ko-nav-sub li > a:hover polygon, .desktop-only .ko-nav-sub-double li > a:hover polygon {
          fill: #FF6600; }
  .ko-nav-sub.ko-nav-teamswitcher, .ko-nav-teamswitcher.ko-nav-sub-double {
    right: 100%;
    left: auto;
    width: 100%;
    height: 100%;
    box-shadow: inset 0 0 2rem rgba(35, 42, 49, 0.75); }
    @media only screen and (min-width: 65em) {
      .ko-nav-sub.ko-nav-teamswitcher, .ko-nav-teamswitcher.ko-nav-sub-double {
        right: auto;
        left: 0;
        width: auto; } }
    .desktop-only .ko-nav-sub.ko-nav-teamswitcher, .desktop-only .ko-nav-teamswitcher.ko-nav-sub-double {
      right: auto;
      left: 0;
      width: auto; }
    .ko-nav-sub.ko-nav-teamswitcher > li > a, .ko-nav-teamswitcher.ko-nav-sub-double > li > a {
      width: calc(100% - 1px);
      text-overflow: ellipsis;
      white-space: nowrap;
      overflow: hidden; }
    .ko-nav-sub.ko-nav-teamswitcher > .ko-nav-teamswitcher-school, .ko-nav-teamswitcher.ko-nav-sub-double > .ko-nav-teamswitcher-school {
      color: #8A8A8A;
      margin: .5rem .8rem 0rem .8rem;
      font-size: 0.8rem;
      font-weight: bold; }
  @media only screen and (min-width: 65em) {
    .ko-nav-sub.ko-nav-sub-profile li > a, .ko-nav-sub-profile.ko-nav-sub-double li > a {
      width: 12.5rem; } }
  .desktop-only .ko-nav-sub.ko-nav-sub-profile li > a, .desktop-only .ko-nav-sub-profile.ko-nav-sub-double li > a {
    width: 12.5rem; }

.ko-nav-sub-double {
  width: 100%;
  height: 100%;
  box-shadow: inset 0 0 2rem rgba(35, 42, 49, 0.75); }
  @media only screen and (min-width: 65em) {
    .ko-nav-sub-double {
      width: 25rem;
      height: auto; } }
  .desktop-only .ko-nav-sub-double {
    width: 25rem;
    height: auto; }

@media only screen and (min-width: 65em) {
  .ko-nav-anchor-right {
    left: auto;
    right: 0; } }

.desktop-only .ko-nav-anchor-right {
  left: auto;
  right: 0; }

@media only screen and (min-width: 65em) {
  .ko-nav-account .ko-nav-icon {
    display: none; } }

.desktop-only .ko-nav-account .ko-nav-icon {
  display: none; }

.ko-nav-account .ko-nav-account-arrow {
  display: none;
  margin: 1rem 0 1rem 1rem; }
  @media only screen and (min-width: 65em) {
    .ko-nav-account .ko-nav-account-arrow {
      display: block; }
      .no-flexbox .ko-nav-account .ko-nav-account-arrow {
        float: left; } }
  .desktop-only .ko-nav-account .ko-nav-account-arrow {
    display: block; }
    .no-flexbox .desktop-only .ko-nav-account .ko-nav-account-arrow {
      float: left; }

@media only screen and (min-width: 65em) {
  .no-flexbox .ko-nav-username {
    float: left; } }

.desktop-only .no-flexbox .ko-nav-username {
  float: left; }

.ko-nav-avatar {
  display: none;
  width: 2rem;
  height: 2rem;
  border: 1px solid #FFFFFF;
  border-radius: 50%;
  margin: 0 0.75rem; }
  .ko-nav-avatar svg {
    fill: #FFFFFF; }
  @media only screen and (min-width: 65em) {
    .ko-nav-avatar {
      display: block; }
      .no-flexbox .ko-nav-avatar {
        float: left;
        margin-top: .5rem; } }
  .desktop-only .ko-nav-avatar {
    display: block; }
    .no-flexbox .desktop-only .ko-nav-avatar {
      float: left;
      margin-top: .5rem; }

@media only screen and (min-width: 65em) {
  .no-flexbox .ko-nav-account-arrow {
    float: left;
    height: 3rem; } }

.no-flexbox .desktop-only .ko-nav-account-arrow {
  float: left;
  height: 3rem; }

@media only screen and (min-width: 65em) {
  li a.ko-nav-help {
    min-width: 3rem;
    height: 3rem;
    width: 3rem;
    font-weight: bold;
    border-left: 1px solid rgba(255, 255, 255, 0.1);
    display: -webkit-box;
    display: -moz-box;
    display: box;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -moz-box-align: center;
    box-align: center;
    -webkit-align-items: center;
    -moz-align-items: center;
    -ms-align-items: center;
    -o-align-items: center;
    align-items: center;
    -ms-flex-align: center;
    -webkit-box-pack: center;
    -moz-box-pack: center;
    box-pack: center;
    -webkit-justify-content: center;
    -moz-justify-content: center;
    -ms-justify-content: center;
    -o-justify-content: center;
    justify-content: center;
    -ms-flex-pack: center;
    -webkit-transition: 0.2s;
    -moz-transition: 0.2s;
    transition: 0.2s; }
    li a.ko-nav-help:hover {
      background-color: #181d22; }
    li a.ko-nav-help svg, li a.ko-nav-help path, li a.ko-nav-help polygon {
      fill: #FF6600; }
    .no-flexbox li a.ko-nav-help::after {
      clear: both;
      content: "";
      display: table; }
    .no-flexbox li a.ko-nav-help svg,
    .no-flexbox li a.ko-nav-help span,
    .no-flexbox li a.ko-nav-help img {
      height: 3rem;
      line-height: 3rem;
      vertical-align: middle;
      float: left; }
    li a.ko-nav-help .ko-nav-icon {
      width: 1.25rem;
      height: 1.25rem;
      margin-right: 0; } }

.desktop-only li a.ko-nav-help {
  min-width: 3rem;
  height: 3rem;
  width: 3rem;
  font-weight: bold;
  border-left: 1px solid rgba(255, 255, 255, 0.1);
  display: -webkit-box;
  display: -moz-box;
  display: box;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -moz-box-align: center;
  box-align: center;
  -webkit-align-items: center;
  -moz-align-items: center;
  -ms-align-items: center;
  -o-align-items: center;
  align-items: center;
  -ms-flex-align: center;
  -webkit-box-pack: center;
  -moz-box-pack: center;
  box-pack: center;
  -webkit-justify-content: center;
  -moz-justify-content: center;
  -ms-justify-content: center;
  -o-justify-content: center;
  justify-content: center;
  -ms-flex-pack: center;
  -webkit-transition: 0.2s;
  -moz-transition: 0.2s;
  transition: 0.2s; }
  .desktop-only li a.ko-nav-help:hover {
    background-color: #181d22; }
  .desktop-only li a.ko-nav-help svg, .desktop-only li a.ko-nav-help path, .desktop-only li a.ko-nav-help polygon {
    fill: #FF6600; }
  .no-flexbox .desktop-only li a.ko-nav-help::after {
    clear: both;
    content: "";
    display: table; }
  .no-flexbox .desktop-only li a.ko-nav-help svg,
  .no-flexbox .desktop-only li a.ko-nav-help span,
  .no-flexbox .desktop-only li a.ko-nav-help img {
    height: 3rem;
    line-height: 3rem;
    vertical-align: middle;
    float: left; }
  .desktop-only li a.ko-nav-help .ko-nav-icon {
    width: 1.25rem;
    height: 1.25rem;
    margin-right: 0; }

@media only screen and (min-width: 65em) {
  .ko-nav-mobile-label {
    display: none; } }

.desktop-only .ko-nav-mobile-label {
  display: none; }

.ko-sub-nav-heading, .ko-sub-nav-heading-current-team {
  width: 16rem;
  padding: 0.75rem;
  height: 3rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  display: -webkit-box;
  display: -moz-box;
  display: box;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -moz-box-align: center;
  box-align: center;
  -webkit-align-items: center;
  -moz-align-items: center;
  -ms-align-items: center;
  -o-align-items: center;
  align-items: center;
  -ms-flex-align: center;
  -webkit-transition: 0.2s;
  -moz-transition: 0.2s;
  transition: 0.2s;
  font-family: trade;
  font-weight: bold;
  text-transform: uppercase; }
  .no-flexbox .ko-sub-nav-heading, .no-flexbox .ko-sub-nav-heading-current-team {
    display: block; }
    .no-flexbox .ko-sub-nav-heading svg, .no-flexbox .ko-sub-nav-heading-current-team svg {
      position: relative;
      top: 0.1875rem; }
  .ko-sub-nav-heading svg, .ko-sub-nav-heading-current-team svg {
    height: 1rem;
    width: 1rem;
    margin-right: 0.5rem; }
    .ko-sub-nav-heading svg path, .ko-sub-nav-heading-current-team svg path {
      fill: #FF6600; }
  @media only screen and (min-width: 65em) {
    .ko-sub-nav-heading, .ko-sub-nav-heading-current-team {
      display: none; } }
  .desktop-only .ko-sub-nav-heading, .desktop-only .ko-sub-nav-heading-current-team {
    display: none; }

.ko-sub-nav-heading-current-team {
  color: #FF6600 !important;
  cursor: pointer;
  -webkit-box-pack: justify;
  -moz-box-pack: justify;
  box-pack: justify;
  -webkit-justify-content: space-between;
  -moz-justify-content: space-between;
  -ms-justify-content: space-between;
  -o-justify-content: space-between;
  justify-content: space-between;
  -ms-flex-pack: justify; }
  .ko-sub-nav-heading-current-team .ko-nav-icon path {
    fill: #FF6600; }
  .no-flexbox .ko-sub-nav-heading-current-team .ko-nav-icon {
    margin-left: .5rem;
    position: relative;
    top: 0.1875rem; }

html.ko-sidemenu-left-is-open {
  overflow: hidden; }
  @media only screen and (min-width: 65em) {
    html.ko-sidemenu-left-is-open {
      overflow: auto; } }
  .desktop-only html.ko-sidemenu-left-is-open {
    overflow: auto; }

.ko-wrap {
  background-color: #FFFFFF;
  z-index: 1;
  position: relative;
  display: -webkit-box;
  display: -moz-box;
  display: box;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -moz-box-orient: vertical;
  box-orient: vertical;
  -webkit-box-direction: normal;
  -moz-box-direction: normal;
  box-direction: normal;
  -webkit-flex-direction: column;
  -moz-flex-direction: column;
  flex-direction: column;
  -ms-flex-direction: column;
  -webkit-transition: 0.3s;
  -moz-transition: 0.3s;
  transition: 0.3s; }
  .ko-sidemenu-left-is-open .ko-wrap {
    -webkit-transform: translateX(16rem);
    -moz-transform: translateX(16rem);
    -ms-transform: translateX(16rem);
    -o-transform: translateX(16rem);
    transform: translateX(16rem);
    overflow: hidden; }
    @media only screen and (min-width: 65em) {
      .ko-sidemenu-left-is-open .ko-wrap {
        -webkit-transform: translateX(0);
        -moz-transform: translateX(0);
        -ms-transform: translateX(0);
        -o-transform: translateX(0);
        transform: translateX(0);
        overflow: auto; } }
    .desktop-only .ko-sidemenu-left-is-open .ko-wrap {
      -webkit-transform: translateX(0);
      -moz-transform: translateX(0);
      -ms-transform: translateX(0);
      -o-transform: translateX(0);
      transform: translateX(0);
      overflow: auto; }

/*
    1. Fix for Chrome 43's "ignoring the height rule bug" that appears
       to be fixed in Chrome 44.
       (https://code.google.com/p/chromium/issues/detail?id=484575)
*/
.ko-subheader {
  background-color: #38434F;
  color: #FFFFFF;
  padding: 0 1rem;
  height: 3rem;
  min-height: 3rem;
  display: -webkit-box;
  display: -moz-box;
  display: box;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -moz-box-align: center;
  box-align: center;
  -webkit-align-items: center;
  -moz-align-items: center;
  -ms-align-items: center;
  -o-align-items: center;
  align-items: center;
  -ms-flex-align: center;
  -webkit-box-pack: center;
  -moz-box-pack: center;
  box-pack: center;
  -webkit-justify-content: center;
  -moz-justify-content: center;
  -ms-justify-content: center;
  -o-justify-content: center;
  justify-content: center;
  -ms-flex-pack: center; }
  @media only screen and (min-width: 65em) {
    .ko-subheader {
      height: 4rem;
      min-height: 4rem;
      -webkit-box-pack: justify;
      -moz-box-pack: justify;
      box-pack: justify;
      -webkit-justify-content: space-between;
      -moz-justify-content: space-between;
      -ms-justify-content: space-between;
      -o-justify-content: space-between;
      justify-content: space-between;
      -ms-flex-pack: justify; }
      .no-flexbox .ko-subheader::after {
        clear: both;
        content: "";
        display: table; } }
  html.no-rgba .ko-subheader {
    height: 4rem;
    min-height: 4rem;
    -webkit-box-pack: justify;
    -moz-box-pack: justify;
    box-pack: justify;
    -webkit-justify-content: space-between;
    -moz-justify-content: space-between;
    -ms-justify-content: space-between;
    -o-justify-content: space-between;
    justify-content: space-between;
    -ms-flex-pack: justify; }
    .no-flexbox html.no-rgba .ko-subheader::after {
      clear: both;
      content: "";
      display: table; }
  .desktop-only .ko-subheader {
    height: 4rem;
    min-height: 4rem;
    -webkit-box-pack: justify;
    -moz-box-pack: justify;
    box-pack: justify;
    -webkit-justify-content: space-between;
    -moz-justify-content: space-between;
    -ms-justify-content: space-between;
    -o-justify-content: space-between;
    justify-content: space-between;
    -ms-flex-pack: justify; }
    .no-flexbox .desktop-only .ko-subheader::after {
      clear: both;
      content: "";
      display: table; }
  .ko-subheader h1 {
    display: none;
    margin-right: 2rem; }
    @media only screen and (min-width: 65em) {
      .ko-subheader h1 {
        display: block;
        color: #FFFFFF;
        font-family: trade;
        font-weight: bold;
        text-transform: uppercase;
        font-size: 2rem; }
        .no-flexbox .ko-subheader h1 {
          float: left; } }
    html.no-rgba .ko-subheader h1 {
      display: block;
      color: #FFFFFF;
      font-family: trade;
      font-weight: bold;
      text-transform: uppercase;
      font-size: 2rem; }
      .no-flexbox html.no-rgba .ko-subheader h1 {
        float: left; }
    .desktop-only .ko-subheader h1 {
      display: block;
      color: #FFFFFF;
      font-family: trade;
      font-weight: bold;
      text-transform: uppercase;
      font-size: 2rem; }
      .no-flexbox .desktop-only .ko-subheader h1 {
        float: left; }
  .ko-subheader > div {
    display: -webkit-inline-box;
    display: -moz-inline-box;
    display: inline-box;
    display: -webkit-inline-flex;
    display: -moz-inline-flex;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
    -moz-box-align: center;
    box-align: center;
    -webkit-align-items: center;
    -moz-align-items: center;
    -ms-align-items: center;
    -o-align-items: center;
    align-items: center;
    -ms-flex-align: center;
    -webkit-box-orient: horizontal;
    -moz-box-orient: horizontal;
    box-orient: horizontal;
    -webkit-box-direction: normal;
    -moz-box-direction: normal;
    box-direction: normal;
    -webkit-flex-direction: row;
    -moz-flex-direction: row;
    flex-direction: row;
    -ms-flex-direction: row;
    -webkit-box-pack: justify;
    -moz-box-pack: justify;
    box-pack: justify;
    -webkit-justify-content: space-between;
    -moz-justify-content: space-between;
    -ms-justify-content: space-between;
    -o-justify-content: space-between;
    justify-content: space-between;
    -ms-flex-pack: justify; }
    .ko-subheader > div::after {
      clear: both;
      content: "";
      display: table; }
    .ko-subheader > div > a {
      color: #FFFFFF;
      padding: 1rem;
      cursor: pointer; }
      @media only screen and (min-width: 65em) {
        .ko-subheader > div > a {
          padding: 1.5rem; } }
      html.no-rgba .ko-subheader > div > a {
        padding: 1.5rem; }
      .desktop-only .ko-subheader > div > a {
        padding: 1.5rem; }
      .ko-subheader > div > a:first-child {
        margin-left: 0; }
      .ko-subheader > div > a:hover {
        background-color: #2d3640;
        color: #FFFFFF; }
      .ko-subheader > div > a.selected {
        background-color: #2d3640;
        font-weight: bold;
        text-transform: uppercase; }

.season-switcher {
  display: -webkit-box;
  display: -moz-box;
  display: box;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -moz-box-align: center;
  box-align: center;
  -webkit-align-items: center;
  -moz-align-items: center;
  -ms-align-items: center;
  -o-align-items: center;
  align-items: center;
  -ms-flex-align: center;
  -webkit-box-pack: distribute;
  -moz-box-pack: distribute;
  box-pack: distribute;
  -webkit-justify-content: space-around;
  -moz-justify-content: space-around;
  -ms-justify-content: space-around;
  -o-justify-content: space-around;
  justify-content: space-around;
  -ms-flex-pack: distribute; }
  .no-flexbox .season-switcher {
    text-align: center; }
    .no-flexbox .season-switcher::after {
      clear: both;
      content: "";
      display: table; }
    @media only screen and (min-width: 65em) {
      .no-flexbox .season-switcher {
        float: right;
        position: relative;
        top: .25rem; } }
    html.no-rgba .no-flexbox .season-switcher {
      float: right;
      position: relative;
      top: .25rem; }
    .desktop-only .no-flexbox .season-switcher {
      float: right;
      position: relative;
      top: .25rem; }
  .season-switcher .selected-season {
    margin: 0 1rem; }
    .no-flexbox .season-switcher .selected-season {
      display: inline-block; }
  .season-switcher .ko-switch-season {
    cursor: pointer;
    display: inline-block;
    height: 4rem;
    padding: 1.5rem 0.5rem; }
    .season-switcher .ko-switch-season:hover svg, .season-switcher .ko-switch-season:hover path {
      fill: #FF6600; }
    .season-switcher .ko-switch-season a {
      display: inline-block;
      height: 4rem; }
    .season-switcher .ko-switch-season svg, .season-switcher .ko-switch-season path {
      fill: #FFFFFF;
      width: 1rem;
      height: 1rem;
      -webkit-transition: 0.2s;
      -moz-transition: 0.2s;
      transition: 0.2s; }
      .no-flexbox .season-switcher .ko-switch-season svg, .no-flexbox .season-switcher .ko-switch-season path {
        display: inline-block;
        position: relative;
        top: .125rem; }
    .season-switcher .ko-switch-season.ko-season-disabled svg, .season-switcher .ko-switch-season.ko-season-disabled path {
      fill: rgba(255, 255, 255, 0.25); }
    .season-switcher .ko-switch-season.ko-season-disabled:hover {
      fill: rgba(255, 255, 255, 0.25);
      cursor: default; }

.ko-col-layout {
  display: -webkit-box;
  display: -moz-box;
  display: box;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 1;
  -moz-box-flex: 1;
  box-flex: 1;
  -webkit-flex: 1;
  -moz-flex: 1;
  -ms-flex: 1;
  flex: 1; }
  .ko-col-layout .ko-two-col-left {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    -webkit-box-flex: 1;
    -moz-box-flex: 1;
    box-flex: 1;
    -webkit-flex: 1;
    -moz-flex: 1;
    -ms-flex: 1;
    flex: 1; }
    @media only screen and (min-width: 37.5em) {
      .ko-col-layout .ko-two-col-left {
        -webkit-box-flex: 2;
        -moz-box-flex: 2;
        box-flex: 2;
        -webkit-flex: 2;
        -moz-flex: 2;
        -ms-flex: 2;
        flex: 2; } }
    html.no-rgba .ko-col-layout .ko-two-col-left {
      -webkit-box-flex: 2;
      -moz-box-flex: 2;
      box-flex: 2;
      -webkit-flex: 2;
      -moz-flex: 2;
      -ms-flex: 2;
      flex: 2; }
    .desktop-only .ko-col-layout .ko-two-col-left {
      -webkit-box-flex: 2;
      -moz-box-flex: 2;
      box-flex: 2;
      -webkit-flex: 2;
      -moz-flex: 2;
      -ms-flex: 2;
      flex: 2; }
    @media only screen and (min-width: 65em) {
      .ko-col-layout .ko-two-col-left {
        -webkit-box-flex: 1;
        -moz-box-flex: 1;
        box-flex: 1;
        -webkit-flex: 1;
        -moz-flex: 1;
        -ms-flex: 1;
        flex: 1; } }
    html.no-rgba .ko-col-layout .ko-two-col-left {
      -webkit-box-flex: 1;
      -moz-box-flex: 1;
      box-flex: 1;
      -webkit-flex: 1;
      -moz-flex: 1;
      -ms-flex: 1;
      flex: 1; }
    .desktop-only .ko-col-layout .ko-two-col-left {
      -webkit-box-flex: 1;
      -moz-box-flex: 1;
      box-flex: 1;
      -webkit-flex: 1;
      -moz-flex: 1;
      -ms-flex: 1;
      flex: 1; }
  .ko-col-layout .ko-two-col-right {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    display: none;
    -webkit-box-flex: 1;
    -moz-box-flex: 1;
    box-flex: 1;
    -webkit-flex: 1;
    -moz-flex: 1;
    -ms-flex: 1;
    flex: 1; }
    @media only screen and (min-width: 37.5em) {
      .ko-col-layout .ko-two-col-right {
        display: block;
        border-left: 1px solid #E8E8E8;
        box-shadow: inset 0 0 10px rgba(35, 42, 49, 0.1);
        -webkit-box-flex: 3;
        -moz-box-flex: 3;
        box-flex: 3;
        -webkit-flex: 3;
        -moz-flex: 3;
        -ms-flex: 3;
        flex: 3; } }
    html.no-rgba .ko-col-layout .ko-two-col-right {
      display: block;
      border-left: 1px solid #E8E8E8;
      box-shadow: inset 0 0 10px rgba(35, 42, 49, 0.1);
      -webkit-box-flex: 3;
      -moz-box-flex: 3;
      box-flex: 3;
      -webkit-flex: 3;
      -moz-flex: 3;
      -ms-flex: 3;
      flex: 3; }
    .desktop-only .ko-col-layout .ko-two-col-right {
      display: block;
      border-left: 1px solid #E8E8E8;
      box-shadow: inset 0 0 10px rgba(35, 42, 49, 0.1);
      -webkit-box-flex: 3;
      -moz-box-flex: 3;
      box-flex: 3;
      -webkit-flex: 3;
      -moz-flex: 3;
      -ms-flex: 3;
      flex: 3; }
    @media only screen and (min-width: 65em) {
      .ko-col-layout .ko-two-col-right {
        -webkit-box-flex: 2;
        -moz-box-flex: 2;
        box-flex: 2;
        -webkit-flex: 2;
        -moz-flex: 2;
        -ms-flex: 2;
        flex: 2; } }
    html.no-rgba .ko-col-layout .ko-two-col-right {
      -webkit-box-flex: 2;
      -moz-box-flex: 2;
      box-flex: 2;
      -webkit-flex: 2;
      -moz-flex: 2;
      -ms-flex: 2;
      flex: 2; }
    .desktop-only .ko-col-layout .ko-two-col-right {
      -webkit-box-flex: 2;
      -moz-box-flex: 2;
      box-flex: 2;
      -webkit-flex: 2;
      -moz-flex: 2;
      -ms-flex: 2;
      flex: 2; }
  .ko-col-layout .ko-three-col-left,
  .ko-col-layout .ko-three-col-middle,
  .ko-col-layout .ko-three-col-right {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    -webkit-box-flex: 1;
    -moz-box-flex: 1;
    box-flex: 1;
    -webkit-flex: 1;
    -moz-flex: 1;
    -ms-flex: 1;
    flex: 1; }
  .ko-col-layout .ko-three-col-middle,
  .ko-col-layout .ko-three-col-right {
    border-left: 1px solid #E8E8E8;
    box-shadow: inset 0 0 10px rgba(35, 42, 49, 0.1); }

@font-face {
  font-family: trade;
  font-style: normal;
  font-weight: normal;
  src: url("//d3hhcdv9i08ck8.cloudfront.net/trade-gothic/regular/regular.eot?#iefix") format("embedded-opentype"), url("//d3hhcdv9i08ck8.cloudfront.net/trade-gothic/regular/regular.woff") format("woff"), url("//d3hhcdv9i08ck8.cloudfront.net/trade-gothic/regular/regular.ttf") format("truetype"), url("//d3hhcdv9i08ck8.cloudfront.net/trade-gothic/regular/regular.svg#trade") format("svg"); }

@font-face {
  font-family: trade;
  font-style: italic;
  font-weight: normal;
  src: url("//d3hhcdv9i08ck8.cloudfront.net/trade-gothic/regular-oblique/regular-oblique.eot?#iefix") format("embedded-opentype"), url("//d3hhcdv9i08ck8.cloudfront.net/trade-gothic/regular-oblique/regular-oblique.woff") format("woff"), url("//d3hhcdv9i08ck8.cloudfront.net/trade-gothic/regular-oblique/regular-oblique.ttf") format("truetype"), url("//d3hhcdv9i08ck8.cloudfront.net/trade-gothic/regular-oblique/regular-oblique.svg#trade") format("svg"); }

@font-face {
  font-family: trade;
  font-style: normal;
  font-weight: bold;
  src: url("//d3hhcdv9i08ck8.cloudfront.net/trade-gothic/bold-one/bold.eot?#iefix") format("embedded-opentype"), url("//d3hhcdv9i08ck8.cloudfront.net/trade-gothic/bold-one/bold.woff") format("woff"), url("//d3hhcdv9i08ck8.cloudfront.net/trade-gothic/bold-one/bold.ttf") format("truetype"), url("//d3hhcdv9i08ck8.cloudfront.net/trade-gothic/bold-one/bold.svg#trade") format("svg"); }

@font-face {
  font-family: trade;
  font-style: italic;
  font-weight: bold;
  src: url("//d3hhcdv9i08ck8.cloudfront.net/trade-gothic/bold-oblique/bold-oblique.eot?#iefix") format("embedded-opentype"), url("//d3hhcdv9i08ck8.cloudfront.net/trade-gothic/bold-oblique/bold-oblique.woff") format("woff"), url("//d3hhcdv9i08ck8.cloudfront.net/trade-gothic/bold-oblique/bold-oblique.ttf") format("truetype"), url("//d3hhcdv9i08ck8.cloudfront.net/trade-gothic/bold-oblique/bold-oblique.svg#trade") format("svg"); }

@font-face {
  font-family: trade-condensed;
  font-style: normal;
  font-weight: normal;
  src: url("//d3hhcdv9i08ck8.cloudfront.net/trade-gothic/condensed/condensed.eot?#iefix") format("embedded-opentype"), url("//d3hhcdv9i08ck8.cloudfront.net/trade-gothic/condensed/condensed.woff") format("woff"), url("//d3hhcdv9i08ck8.cloudfront.net/trade-gothic/condensed/condensed.ttf") format("truetype"), url("//d3hhcdv9i08ck8.cloudfront.net/trade-gothic/condensed/condensed.svg#trade-condensed") format("svg"); }

@font-face {
  font-family: trade-condensed;
  font-style: oblique;
  font-weight: normal;
  src: url("//d3hhcdv9i08ck8.cloudfront.net/trade-gothic/condensed-oblique/condensed-oblique.eot?#iefix") format("embedded-opentype"), url("//d3hhcdv9i08ck8.cloudfront.net/trade-gothic/condensed-oblique/condensed-oblique.woff") format("woff"), url("//d3hhcdv9i08ck8.cloudfront.net/trade-gothic/condensed-oblique/condensed-oblique.ttf") format("truetype"), url("//d3hhcdv9i08ck8.cloudfront.net/trade-gothic/condensed-oblique/condensed-oblique.svg#trade-condensed") format("svg"); }

@font-face {
  font-family: trade-condensed;
  font-style: normal;
  font-weight: bold;
  src: url("//d3hhcdv9i08ck8.cloudfront.net/trade-gothic/condensed-bold/condensed-bold.eot?#iefix") format("embedded-opentype"), url("//d3hhcdv9i08ck8.cloudfront.net/trade-gothic/condensed-bold/condensed-bold.woff") format("woff"), url("//d3hhcdv9i08ck8.cloudfront.net/trade-gothic/condensed-bold/condensed-bold.ttf") format("truetype"), url("//d3hhcdv9i08ck8.cloudfront.net/trade-gothic/condensed-bold/condensed-bold.svg#trade-condensed") format("svg"); }

@font-face {
  font-family: trade-condensed;
  font-style: oblique;
  font-weight: bold;
  src: url("//d3hhcdv9i08ck8.cloudfront.net/trade-gothic/condensed-bold-oblique/condensed-bold-oblique.eot?#iefix") format("embedded-opentype"), url("//d3hhcdv9i08ck8.cloudfront.net/trade-gothic/condensed-bold-oblique/condensed-bold-oblique.woff") format("woff"), url("//d3hhcdv9i08ck8.cloudfront.net/trade-gothic/condensed-bold-oblique/condensed-bold-oblique.ttf") format("truetype"), url("//d3hhcdv9i08ck8.cloudfront.net/trade-gothic/condensed-bold-oblique/condensed-bold-oblique.svg#trade-condensed") format("svg"); }

@font-face {
  font-family: trade-heavy;
  font-style: normal;
  font-weight: bold;
  src: url("//d3hhcdv9i08ck8.cloudfront.net/trade-gothic/heavy/heavy.eot?#iefix") format("embedded-opentype"), url("//d3hhcdv9i08ck8.cloudfront.net/trade-gothic/heavy/heavy.woff") format("woff"), url("//d3hhcdv9i08ck8.cloudfront.net/trade-gothic/heavy/heavy.ttf") format("truetype"), url("//d3hhcdv9i08ck8.cloudfront.net/trade-gothic/heavy/heavy.svg#trade-heavy") format("svg"); }

@font-face {
  font-family: trade-heavy-condensed;
  font-style: normal;
  font-weight: bold;
  src: url("//d3hhcdv9i08ck8.cloudfront.net/trade-gothic/condensed-heavy/condensed-heavy.eot?#iefix") format("embedded-opentype"), url("//d3hhcdv9i08ck8.cloudfront.net/trade-gothic/condensed-heavy/condensed-heavy.woff") format("woff"), url("//d3hhcdv9i08ck8.cloudfront.net/trade-gothic/condensed-heavy/condensed-heavy.ttf") format("truetype"), url("//d3hhcdv9i08ck8.cloudfront.net/trade-gothic/condensed-heavy/condensed-heavy.svg#trade-heavy-condensed") format("svg"); }

/*doc
---
title: Buttons
name: buttons
category: Elements
---

These are the default button styles that should be used throughout Hudl. A few notes:
  - We use **Title Case** on our buttons.
  - Feel free to use an icon with the button
  - Your **element** doesn't really matter (you can use an `<a>` or a `<button>` or a `<div>`)
  - You can disable a button by either adding the `disabled` attribute or by adding a class of `disabled`

### Inline Block Usage

Buttons are inline-block by default. If you need several inline-block buttons, wrap them in a container with a class `btn-inline-group` to give them a little margin.

```html_example
<div class="btn-inline-group">
    <button class="btn-primary">Primary</button>
    <a href="#" class="btn-default">Everyday Action</a>
    <div class="btn-default disabled">Can't Click</div>
    <button class="btn-primary" disabled>Won't Click</button>
    <span class="btn-cancel">Cancel</span> <!-- You can also use btn-text -->
</div>
```

### Block Usage

Add an additional class of `btn-block` for a button that fills its container

```html_example
<button class="btn-primary btn-block">Primary</button>
```

### Loading Buttons

Add an additional class of `btn-loading` to get a spinner on a button!

```html_example
<div class="btn-inline-group">
    <button class="btn-default btn-loading" disabled>It's Happening!</button>
    <button class="btn-primary btn-loading" disabled>It's Really Happening!</button>
</div>
```

### Icons in Buttons

Throw an `<img>` in a button, no problem.

```html_example
<div class="btn-inline-group">
    <button class="btn-default">
        <img src="icons/add.svg">Create an Event
    </button>
    <button class="btn-danger">
        <img src="icons/delete.svg">Delete an Event
    </button>
    <button class="btn-primary">
        <img src="icons/clip.svg">Watch this thing
    </button>
</div>
```

Want a vanilla flat icon button? Use `btn-plain`.

```html_example
<button class="btn-plain">
    <img src="icons/home.svg">
</button>
```

### Other Buttons

A few other default styles for your use.

```html_example
<div class="btn-inline-group">
<button class="btn-danger">Deleting Something</button>
<button class="btn-confirmation">Success!</button>
</div>
```

*/
.btn-plain, .btn-default, .btn-white, .btn-primary, .btn-danger, .btn-confirmation, .btn-cancel,
.btn-text {
  color: #232A31;
  background-color: transparent;
  border: none;
  display: inline-block;
  font-size: 100%;
  margin: 0;
  padding: 0;
  cursor: pointer;
  text-decoration: none;
  font-weight: normal;
  position: relative;
  box-shadow: none;
  line-height: 1rem;
  -webkit-appearance: none;
  -moz-appearance: none;
  -ms-appearance: none;
  -o-appearance: none;
  appearance: none; }
  .btn-plain svg, .btn-default svg, .btn-white svg, .btn-primary svg, .btn-danger svg, .btn-confirmation svg, .btn-cancel svg,
  .btn-text svg,
  .btn-plain path, .btn-default path, .btn-white path, .btn-primary path, .btn-danger path, .btn-confirmation path, .btn-cancel path,
  .btn-text path,
  .btn-plain polygon, .btn-default polygon, .btn-white polygon, .btn-primary polygon, .btn-danger polygon, .btn-confirmation polygon, .btn-cancel polygon,
  .btn-text polygon {
    width: 1rem;
    height: 1rem;
    fill: #8A8A8A; }
  .btn-inline-group .btn-plain, .btn-inline-group .btn-default, .btn-inline-group .btn-white, .btn-inline-group .btn-primary, .btn-inline-group .btn-danger, .btn-inline-group .btn-confirmation, .btn-inline-group .btn-cancel, .btn-inline-group
  .btn-text {
    margin-left: .5rem; }
    .btn-inline-group .btn-plain:first-child, .btn-inline-group .btn-default:first-child, .btn-inline-group .btn-white:first-child, .btn-inline-group .btn-primary:first-child, .btn-inline-group .btn-danger:first-child, .btn-inline-group .btn-confirmation:first-child, .btn-inline-group .btn-cancel:first-child, .btn-inline-group
    .btn-text:first-child {
      margin-left: 0; }

.btn-default, .btn-white, .btn-primary, .btn-danger, .btn-confirmation, .btn-cancel,
.btn-text {
  font-weight: bold;
  font-family: trade;
  font-size: 1rem;
  padding: .75rem;
  border: 0.0625rem solid transparent;
  width: auto;
  vertical-align: top; }
  .btn-default svg, .btn-white svg, .btn-primary svg, .btn-danger svg, .btn-confirmation svg, .btn-cancel svg,
  .btn-text svg {
    width: .75rem;
    height: .75rem;
    margin-right: .5rem; }

.btn-default {
  box-shadow: 0 0.0625rem 0 0 #dddddd;
  border-radius: 0.125rem;
  border-color: #e9e9e9;
  border-style: solid;
  background-color: #F5F5F5;
  background-image: -webkit-linear-gradient(#F5F5F5, #f0f0f0);
  background-image: linear-gradient(#F5F5F5, #f0f0f0);
  color: #232A31; }
  .btn-default.btn-loading {
    padding-left: 3rem;
    -webkit-transition: 0.2s;
    -moz-transition: 0.2s;
    transition: 0.2s; }
    .btn-default.btn-loading.btn-block {
      padding-left: .75rem; }
      .btn-default.btn-loading.btn-block:after {
        left: .75rem; }
    .btn-default.btn-loading img, .btn-default.btn-loading svg {
      display: none; }
    .btn-default.btn-loading:disabled,
    .btn-default.btn-loading .disabled {
      opacity: 1; }
    .btn-default.btn-loading:after {
      -webkit-animation: spinner-rotation 0.75s infinite linear;
      -moz-animation: spinner-rotation 0.75s infinite linear;
      animation: spinner-rotation 0.75s infinite linear;
      clear: both;
      height: 1rem;
      width: 1rem;
      margin: 0 auto 0 auto;
      position: relative;
      border-top: 0.25rem solid #8A8A8A;
      border-left: 0.25rem solid rgba(138, 138, 138, 0.4);
      border-bottom: 0.25rem solid rgba(138, 138, 138, 0.4);
      border-right: 0.25rem solid rgba(138, 138, 138, 0.4);
      border-radius: 100%;
      display: block;
      content: '';
      position: absolute;
      top: 50%;
      margin-top: -.75rem;
      left: .75rem;
      -webkit-transition: 0.2s;
      -moz-transition: 0.2s;
      transition: 0.2s; }
      .no-cssanimations .btn-default.btn-loading:after {
        display: none; }
  .btn-default svg, .btn-default path, .btn-default polygon {
    fill: #232A31; }
  .btn-default:link, .btn-default:visited {
    border-bottom: 0;
    color: #232A31; }
  .btn-default:disabled, .btn-default.disabled {
    color: #c2c2c2;
    opacity: 0.7;
    cursor: default; }
    .btn-default:disabled svg, .btn-default:disabled path, .btn-default.disabled svg, .btn-default.disabled path {
      fill: #c2c2c2; }
    .btn-default:disabled.btn-confirmation, .btn-default.disabled.btn-confirmation {
      color: #232A31; }
    .btn-default:disabled.btn-loading, .btn-default.disabled.btn-loading {
      color: #232A31; }
  .btn-default:hover, .btn-default:focus {
    background-color: #f8f8f8;
    background-image: none;
    outline: none; }
    .btn-default:hover:disabled, .btn-default:hover.disabled, .btn-default:focus:disabled, .btn-default:focus.disabled {
      background-color: #F5F5F5;
      background-image: -webkit-linear-gradient(#F5F5F5, #f0f0f0);
      background-image: linear-gradient(#F5F5F5, #f0f0f0); }
  .btn-default:active {
    background-color: #f0f0f0;
    box-shadow: inset 0 0 0.25rem #e9e9e9;
    -webkit-transform: translateY(0.0625rem);
    -moz-transform: translateY(0.0625rem);
    -ms-transform: translateY(0.0625rem);
    -o-transform: translateY(0.0625rem);
    transform: translateY(0.0625rem); }
    .btn-default:active:disabled, .btn-default:active.disabled {
      box-shadow: 0 0.0625rem 0 0 #dddddd;
      -webkit-transform: translateY(0);
      -moz-transform: translateY(0);
      -ms-transform: translateY(0);
      -o-transform: translateY(0);
      transform: translateY(0);
      background-color: #F5F5F5;
      background-image: -webkit-linear-gradient(#F5F5F5, #f0f0f0);
      background-image: linear-gradient(#F5F5F5, #f0f0f0); }

.btn-white {
  box-shadow: 0 0.0625rem 0 0 #e6e6e6;
  border-radius: 0.125rem;
  border-color: #f2f2f2;
  border-style: solid;
  background-color: #FFFFFF;
  background-image: -webkit-linear-gradient(#FFFFFF, #fafafa);
  background-image: linear-gradient(#FFFFFF, #fafafa);
  color: #232A31; }
  .btn-white.btn-loading {
    padding-left: 3rem;
    -webkit-transition: 0.2s;
    -moz-transition: 0.2s;
    transition: 0.2s; }
    .btn-white.btn-loading.btn-block {
      padding-left: .75rem; }
      .btn-white.btn-loading.btn-block:after {
        left: .75rem; }
    .btn-white.btn-loading img, .btn-white.btn-loading svg {
      display: none; }
    .btn-white.btn-loading:disabled,
    .btn-white.btn-loading .disabled {
      opacity: 1; }
    .btn-white.btn-loading:after {
      -webkit-animation: spinner-rotation 0.75s infinite linear;
      -moz-animation: spinner-rotation 0.75s infinite linear;
      animation: spinner-rotation 0.75s infinite linear;
      clear: both;
      height: 1rem;
      width: 1rem;
      margin: 0 auto 0 auto;
      position: relative;
      border-top: 0.25rem solid #8A8A8A;
      border-left: 0.25rem solid rgba(138, 138, 138, 0.4);
      border-bottom: 0.25rem solid rgba(138, 138, 138, 0.4);
      border-right: 0.25rem solid rgba(138, 138, 138, 0.4);
      border-radius: 100%;
      display: block;
      content: '';
      position: absolute;
      top: 50%;
      margin-top: -.75rem;
      left: .75rem;
      -webkit-transition: 0.2s;
      -moz-transition: 0.2s;
      transition: 0.2s; }
      .no-cssanimations .btn-white.btn-loading:after {
        display: none; }
  .btn-white svg, .btn-white path, .btn-white polygon {
    fill: #232A31; }
  .btn-white:link, .btn-white:visited {
    border-bottom: 0;
    color: #232A31; }
  .btn-white:disabled, .btn-white.disabled {
    color: #cccccc;
    opacity: 0.7;
    cursor: default; }
    .btn-white:disabled svg, .btn-white:disabled path, .btn-white.disabled svg, .btn-white.disabled path {
      fill: #cccccc; }
    .btn-white:disabled.btn-confirmation, .btn-white.disabled.btn-confirmation {
      color: #232A31; }
    .btn-white:disabled.btn-loading, .btn-white.disabled.btn-loading {
      color: #232A31; }
  .btn-white:hover, .btn-white:focus {
    background-color: white;
    background-image: none;
    outline: none; }
    .btn-white:hover:disabled, .btn-white:hover.disabled, .btn-white:focus:disabled, .btn-white:focus.disabled {
      background-color: #FFFFFF;
      background-image: -webkit-linear-gradient(#FFFFFF, #fafafa);
      background-image: linear-gradient(#FFFFFF, #fafafa); }
  .btn-white:active {
    background-color: #fafafa;
    box-shadow: inset 0 0 0.25rem #f2f2f2;
    -webkit-transform: translateY(0.0625rem);
    -moz-transform: translateY(0.0625rem);
    -ms-transform: translateY(0.0625rem);
    -o-transform: translateY(0.0625rem);
    transform: translateY(0.0625rem); }
    .btn-white:active:disabled, .btn-white:active.disabled {
      box-shadow: 0 0.0625rem 0 0 #e6e6e6;
      -webkit-transform: translateY(0);
      -moz-transform: translateY(0);
      -ms-transform: translateY(0);
      -o-transform: translateY(0);
      transform: translateY(0);
      background-color: #FFFFFF;
      background-image: -webkit-linear-gradient(#FFFFFF, #fafafa);
      background-image: linear-gradient(#FFFFFF, #fafafa); }

.btn-primary {
  box-shadow: 0 0.0625rem 0 0 #e65c00;
  border-radius: 0.125rem;
  border-color: #f26100;
  border-style: solid;
  background-color: #FF6600;
  background-image: -webkit-linear-gradient(#FF6600, #fa6400);
  background-image: linear-gradient(#FF6600, #fa6400);
  color: #FFFFFF; }
  .btn-primary.btn-loading {
    padding-left: 3rem;
    -webkit-transition: 0.2s;
    -moz-transition: 0.2s;
    transition: 0.2s; }
    .btn-primary.btn-loading.btn-block {
      padding-left: .75rem; }
      .btn-primary.btn-loading.btn-block:after {
        left: .75rem; }
    .btn-primary.btn-loading img, .btn-primary.btn-loading svg {
      display: none; }
    .btn-primary.btn-loading:disabled,
    .btn-primary.btn-loading .disabled {
      opacity: 1; }
    .btn-primary.btn-loading:after {
      -webkit-animation: spinner-rotation 0.75s infinite linear;
      -moz-animation: spinner-rotation 0.75s infinite linear;
      animation: spinner-rotation 0.75s infinite linear;
      clear: both;
      height: 1rem;
      width: 1rem;
      margin: 0 auto 0 auto;
      position: relative;
      border-top: 0.25rem solid #FFFFFF;
      border-left: 0.25rem solid rgba(255, 255, 255, 0.4);
      border-bottom: 0.25rem solid rgba(255, 255, 255, 0.4);
      border-right: 0.25rem solid rgba(255, 255, 255, 0.4);
      border-radius: 100%;
      display: block;
      content: '';
      position: absolute;
      top: 50%;
      margin-top: -.75rem;
      left: .75rem;
      -webkit-transition: 0.2s;
      -moz-transition: 0.2s;
      transition: 0.2s; }
      .no-cssanimations .btn-primary.btn-loading:after {
        display: none; }
  .btn-primary svg, .btn-primary path, .btn-primary polygon {
    fill: #FFFFFF; }
  .btn-primary:link, .btn-primary:visited {
    color: #FFFFFF; }
  .btn-primary:disabled, .btn-primary.disabled {
    color: #ffa366;
    opacity: 0.4;
    cursor: default; }
    .btn-primary:disabled svg, .btn-primary:disabled path, .btn-primary.disabled svg, .btn-primary.disabled path {
      fill: #ffa366; }
    .btn-primary:disabled.btn-confirmation, .btn-primary.disabled.btn-confirmation {
      color: #FFFFFF; }
    .btn-primary:disabled.btn-loading, .btn-primary.disabled.btn-loading {
      color: #FFFFFF; }
  .btn-primary:hover, .btn-primary:focus {
    background: #ff751a;
    background-image: none;
    outline: none; }
    .btn-primary:hover:disabled, .btn-primary:hover.disabled, .btn-primary:focus:disabled, .btn-primary:focus.disabled {
      background-color: #FF6600;
      background-image: -webkit-linear-gradient(#FF6600, #fa6400);
      background-image: linear-gradient(#FF6600, #fa6400); }
  .btn-primary:active {
    background-color: #f56200;
    box-shadow: inset 0 0 0.25rem #f26100;
    -webkit-transform: translateY(0.0625rem);
    -moz-transform: translateY(0.0625rem);
    -ms-transform: translateY(0.0625rem);
    -o-transform: translateY(0.0625rem);
    transform: translateY(0.0625rem); }
    .btn-primary:active:disabled, .btn-primary:active.disabled {
      box-shadow: 0 0.0625rem 0 0 #e65c00;
      -webkit-transform: translateY(0);
      -moz-transform: translateY(0);
      -ms-transform: translateY(0);
      -o-transform: translateY(0);
      transform: translateY(0);
      background-color: #FF6600;
      background-image: -webkit-linear-gradient(#FF6600, #fa6400);
      background-image: linear-gradient(#FF6600, #fa6400); }

.btn-danger {
  box-shadow: 0 0.0625rem 0 0 #c21a1a;
  border-radius: 0.125rem;
  border-color: #cd1c1c;
  border-style: solid;
  background-color: #D81D1D;
  background-image: -webkit-linear-gradient(#D81D1D, #d41c1c);
  background-image: linear-gradient(#D81D1D, #d41c1c);
  color: #FFFFFF; }
  .btn-danger.btn-loading {
    padding-left: 3rem;
    -webkit-transition: 0.2s;
    -moz-transition: 0.2s;
    transition: 0.2s; }
    .btn-danger.btn-loading.btn-block {
      padding-left: .75rem; }
      .btn-danger.btn-loading.btn-block:after {
        left: .75rem; }
    .btn-danger.btn-loading img, .btn-danger.btn-loading svg {
      display: none; }
    .btn-danger.btn-loading:disabled,
    .btn-danger.btn-loading .disabled {
      opacity: 1; }
    .btn-danger.btn-loading:after {
      -webkit-animation: spinner-rotation 0.75s infinite linear;
      -moz-animation: spinner-rotation 0.75s infinite linear;
      animation: spinner-rotation 0.75s infinite linear;
      clear: both;
      height: 1rem;
      width: 1rem;
      margin: 0 auto 0 auto;
      position: relative;
      border-top: 0.25rem solid #FFFFFF;
      border-left: 0.25rem solid rgba(255, 255, 255, 0.4);
      border-bottom: 0.25rem solid rgba(255, 255, 255, 0.4);
      border-right: 0.25rem solid rgba(255, 255, 255, 0.4);
      border-radius: 100%;
      display: block;
      content: '';
      position: absolute;
      top: 50%;
      margin-top: -.75rem;
      left: .75rem;
      -webkit-transition: 0.2s;
      -moz-transition: 0.2s;
      transition: 0.2s; }
      .no-cssanimations .btn-danger.btn-loading:after {
        display: none; }
  .btn-danger svg, .btn-danger path, .btn-danger polygon {
    fill: #FFFFFF; }
  .btn-danger:link, .btn-danger:visited {
    color: #FFFFFF; }
  .btn-danger:disabled, .btn-danger.disabled {
    color: #ec6f6f;
    opacity: 0.4;
    cursor: default; }
    .btn-danger:disabled svg, .btn-danger:disabled path, .btn-danger.disabled svg, .btn-danger.disabled path {
      fill: #ec6f6f; }
    .btn-danger:disabled.btn-confirmation, .btn-danger.disabled.btn-confirmation {
      color: #FFFFFF; }
    .btn-danger:disabled.btn-loading, .btn-danger.disabled.btn-loading {
      color: #FFFFFF; }
  .btn-danger:hover, .btn-danger:focus {
    background: #e32c2c;
    background-image: none;
    outline: none; }
    .btn-danger:hover:disabled, .btn-danger:hover.disabled, .btn-danger:focus:disabled, .btn-danger:focus.disabled {
      background-color: #D81D1D;
      background-image: -webkit-linear-gradient(#D81D1D, #d41c1c);
      background-image: linear-gradient(#D81D1D, #d41c1c); }
  .btn-danger:active {
    background-color: #cf1c1c;
    box-shadow: inset 0 0 0.25rem #cd1c1c;
    -webkit-transform: translateY(0.0625rem);
    -moz-transform: translateY(0.0625rem);
    -ms-transform: translateY(0.0625rem);
    -o-transform: translateY(0.0625rem);
    transform: translateY(0.0625rem); }
    .btn-danger:active:disabled, .btn-danger:active.disabled {
      box-shadow: 0 0.0625rem 0 0 #c21a1a;
      -webkit-transform: translateY(0);
      -moz-transform: translateY(0);
      -ms-transform: translateY(0);
      -o-transform: translateY(0);
      transform: translateY(0);
      background-color: #D81D1D;
      background-image: -webkit-linear-gradient(#D81D1D, #d41c1c);
      background-image: linear-gradient(#D81D1D, #d41c1c); }

.btn-confirmation {
  box-shadow: 0 0.0625rem 0 0 #5f921d;
  border-radius: 0.125rem;
  border-color: #659a1e;
  border-style: solid;
  background-color: #6AA220;
  background-image: -webkit-linear-gradient(#6AA220, #689f1f);
  background-image: linear-gradient(#6AA220, #689f1f);
  color: #FFFFFF; }
  .btn-confirmation.btn-loading {
    padding-left: 3rem;
    -webkit-transition: 0.2s;
    -moz-transition: 0.2s;
    transition: 0.2s; }
    .btn-confirmation.btn-loading.btn-block {
      padding-left: .75rem; }
      .btn-confirmation.btn-loading.btn-block:after {
        left: .75rem; }
    .btn-confirmation.btn-loading img, .btn-confirmation.btn-loading svg {
      display: none; }
    .btn-confirmation.btn-loading:disabled,
    .btn-confirmation.btn-loading .disabled {
      opacity: 1; }
    .btn-confirmation.btn-loading:after {
      -webkit-animation: spinner-rotation 0.75s infinite linear;
      -moz-animation: spinner-rotation 0.75s infinite linear;
      animation: spinner-rotation 0.75s infinite linear;
      clear: both;
      height: 1rem;
      width: 1rem;
      margin: 0 auto 0 auto;
      position: relative;
      border-top: 0.25rem solid #FFFFFF;
      border-left: 0.25rem solid rgba(255, 255, 255, 0.4);
      border-bottom: 0.25rem solid rgba(255, 255, 255, 0.4);
      border-right: 0.25rem solid rgba(255, 255, 255, 0.4);
      border-radius: 100%;
      display: block;
      content: '';
      position: absolute;
      top: 50%;
      margin-top: -.75rem;
      left: .75rem;
      -webkit-transition: 0.2s;
      -moz-transition: 0.2s;
      transition: 0.2s; }
      .no-cssanimations .btn-confirmation.btn-loading:after {
        display: none; }
  .btn-confirmation svg, .btn-confirmation path, .btn-confirmation polygon {
    fill: #FFFFFF; }
  .btn-confirmation:link, .btn-confirmation:visited {
    color: #FFFFFF; }
  .btn-confirmation:disabled, .btn-confirmation.disabled {
    color: #9edc4c;
    opacity: 0.4;
    cursor: default; }
    .btn-confirmation:disabled svg, .btn-confirmation:disabled path, .btn-confirmation.disabled svg, .btn-confirmation.disabled path {
      fill: #9edc4c; }
    .btn-confirmation:disabled.btn-confirmation, .btn-confirmation.disabled.btn-confirmation {
      color: #FFFFFF; }
    .btn-confirmation:disabled.btn-loading, .btn-confirmation.disabled.btn-loading {
      color: #FFFFFF; }
  .btn-confirmation:hover, .btn-confirmation:focus {
    background: #78b724;
    background-image: none;
    outline: none; }
    .btn-confirmation:hover:disabled, .btn-confirmation:hover.disabled, .btn-confirmation:focus:disabled, .btn-confirmation:focus.disabled {
      background-color: #6AA220;
      background-image: -webkit-linear-gradient(#6AA220, #689f1f);
      background-image: linear-gradient(#6AA220, #689f1f); }
  .btn-confirmation:active {
    background-color: #64991e;
    box-shadow: inset 0 0 0.25rem #659a1e;
    -webkit-transform: translateY(0.0625rem);
    -moz-transform: translateY(0.0625rem);
    -ms-transform: translateY(0.0625rem);
    -o-transform: translateY(0.0625rem);
    transform: translateY(0.0625rem); }
    .btn-confirmation:active:disabled, .btn-confirmation:active.disabled {
      box-shadow: 0 0.0625rem 0 0 #5f921d;
      -webkit-transform: translateY(0);
      -moz-transform: translateY(0);
      -ms-transform: translateY(0);
      -o-transform: translateY(0);
      transform: translateY(0);
      background-color: #6AA220;
      background-image: -webkit-linear-gradient(#6AA220, #689f1f);
      background-image: linear-gradient(#6AA220, #689f1f); }
  .btn-confirmation:disabled, .btn-confirmation.disabled {
    opacity: 1; }

.btn-cancel,
.btn-text {
  color: #FF6600;
  font-weight: bold; }
  .btn-cancel:hover,
  .btn-text:hover {
    background-color: transparent;
    color: #ff751a; }

.btn-block {
  text-align: center;
  display: block;
  width: 100%; }

/*doc
---
title: Article
name: article
category: Elements
---

Since Hudl is a web app, we're confining default typography to within a `.ko-article` class. We've got default stylings for headings, paragraphs, links, and lists. Everything also gets a line-height of 1.4 by default and solid vertical rhythm.

```html_example
<div class="ko-article">
    <h1>This is a big heading.</h1>
    <p>Pede cum deserunt ducimus <a href="#">hymenaeos gravida risus sodales</a> molestias repellendus nostrud ipsam, praesent nam temporibus praesent aspernatur turpis, ridiculus, condimentum? Nullam sed animi adipisci veniam. Iure sociosqu, <strong>possimus phasellus vehicula</strong>, amet erat eaque, veritatis ea lacus dolorum pharetra! Hic quas? Quis alias. Cillum habitasse. Nostrum semper? Metus ea, maecenas fames.</p>
    <h2>This is a smaller heading.</h2>
    <p>Egestas conubia velit senectus eligendi tortor nobis qui nostrud itaque mollitia. Iure ex incididunt varius quas mauris! Minima rhoncus magni! <em>Minus sit mollis cras, pariatur tortor dicta accusamus temporibus mauris nibh molestie</em>, sapiente pretium luctus! Mattis magnis purus assumenda dictum quis interdum atque! Cupiditate. Adipisicing, quisquam sem lobortis porta. Inventore.</p>
    <ul>
        <li>I don't know what this list is about.</li>
        <li>It could be about anything, really.</li>
        <li>This third point is pretty convincing.</li>
    </ul>
    <h3>Another heading! Whoo hoo!</h3>
    <p>Torquent! Rutrum nunc quaerat dignissimos? Occaecat, volutpat soluta aute nemo aut wisi? Architecto temporibus eaque, doloremque harum exercitation! Urna, vestibulum dolorem eligendi, diam perspiciatis. Maecenas? Optio cubilia quisque, ut ullamco, libero libero.</p>
    <p>Ut optio perspiciatis esse aut, quia soluta laoreet, facilis delectus. Sollicitudin non sodales taciti dapibus, expedita! Magnam ipsam, dictumst natus, pulvinar proident sequi! Totam excepteur.</p>
    <h4>We've got H4 styles too!</h4>
    <ol>
        <li>How about some numbered lists?</li>
        <li>You can use these when order is important.</li>
        <li>Like ranking your favorite athletes.</li>
    </ol>
</div>
```

*/
.ko-article {
  line-height: 1.4rem; }
  .ko-article h1, .ko-article h2, .ko-article h3, .ko-article h4, .ko-article h5, .ko-article h6 {
    font-weight: bold;
    margin-bottom: 1.4rem;
    line-height: 1.4rem; }
  .ko-article h1 {
    text-transform: uppercase;
    line-height: 2.8rem;
    font-size: 3rem; }
  .ko-article h2 {
    line-height: 2.8rem;
    font-size: 2rem; }
  .ko-article h3 {
    font-size: 1.5rem; }
  .ko-article h4 {
    font-size: 1.3125rem; }
  .ko-article h5, .ko-article h6 {
    font-size: 1.125rem; }
  .ko-article p {
    margin-bottom: 1.4rem; }
  .ko-article strong, .ko-article b {
    font-weight: bold; }
  .ko-article em, .ko-article i {
    font-style: italic; }
  .ko-article ul, .ko-article ol {
    margin-bottom: 1.4rem;
    margin-left: 2.8rem; }
  .ko-article ul {
    list-style-type: disc; }
  .ko-article ol {
    list-style-type: decimal; }
  .ko-article code {
    background-color: #E8E8E8;
    border-radius: .125rem;
    font-weight: bold;
    display: inline-block;
    font-family: "Source Code Pro";
    padding: .125rem;
    font-size: 0.75rem;
    line-height: 1; }

/*doc
---
title: Forms
name: forms
category: Elements
---

We use the [float label](http://bradfrostweb.com/blog/post/float-label-pattern/) pattern around here. For each item, put a `<div>` around two things: a `<label>` and an `<input>`. Give the `<div>` a class of `ko-field` and you're good to go. Remember to use fancy HTML5 form fields!

The JS included with kickoff is smart enough to handle the labels and degrade gracefully (e.g., in browsers that don't support placeholders, the labels are always present).

```html_example
<div class="ko-field">
    <label>Name</label>
    <input type="text" placeholder="Name">
</div>
<div class="ko-field">
    <label>Email Address</label>
    <input type="email" placeholder="Email Address">
</div>
<div class="ko-field">
    <label>Your Message</label>
    <textarea placeholder="Leave us a message"></textarea>
</div>
```

### Form Validation

Throw a class of `ko-invalid` on the `<label>` and the `<input>` to get an invalid style and use `ko-valid` if you want an explicit valid style. Use the `<label>` for your error/success message.

```html_example
<div class="ko-field">
    <label class="ko-invalid">Not quite right</label>
    <input type="email" placeholder="Email Address" class="ko-invalid">
</div>
<div class="ko-field">
    <label class="ko-valid">Looks good!</label>
    <input type="email" placeholder="Email Address" class="ko-valid">
</div>
```

### Many column'd forms

You can combine fields with Bourbon Neat to make a nice form layout. We've got built-in classes for a few widths based on our default 12 column grid, but feel free to add your own custom widths or classes. `ko-field-wrapper` is a clearfix'd container.

```html_example
<div class="ko-field-wrapper">
    <div class="ko-field ko-field-half">
        <label>Name</label>
        <input type="text" placeholder="Name">
    </div>
    <div class="ko-field ko-field-half">
        <label>Email Address</label>
        <input type="email" placeholder="Email Address">
    </div>
</div>
```

```html_example
<div class="ko-field-wrapper">
    <div class="ko-field ko-field-third">
        <label>Name</label>
        <input type="text" placeholder="Name">
    </div>
    <div class="ko-field ko-field-third">
        <label>Email</label>
        <input type="email" placeholder="Email">
    </div>
    <div class="ko-field ko-field-third">
        <label>Phone</label>
        <input type="tel" placeholder="Phone">
    </div>
</div>
```

```html_example
<div class="ko-field-wrapper">
    <div class="ko-field ko-field-fourth">
        <label>Name</label>
        <input type="text" placeholder="Name">
    </div>
    <div class="ko-field ko-field-fourth">
        <label>Email</label>
        <input type="email" placeholder="Email">
    </div>
    <div class="ko-field ko-field-fourth">
        <label>Phone</label>
        <input type="tel" placeholder="Phone">
    </div>
    <div class="ko-field ko-field-fourth">
        <label>Twitter Handle</label>
        <input type="text" placeholder="Instagram">
    </div>
</div>
```

### Form Actions

Put your buttons at the bottom of the form wrapped in a `<div>` with class `ko-form-actions`.

```html_example
<div class="ko-field">
    <label>Name</label>
    <input type="text" placeholder="Name">
</div>
<div class="ko-field">
    <label>Email Address</label>
    <input type="email" placeholder="Email Address">
</div>
<div class="ko-form-actions">
    <button class="btn-primary">Add this Athlete</button>
    <button class="btn-cancel">Cancel</button>
</div>
```

### Checkboxes and Radios

As of right now, checkboxes and radios are **not** native `<input>` elements.

To get radios working like radios, you'll want to add:

```
    $('.ko-radios li').click(function(){
        if ($(this).hasClass('disabled')) return;

        $(this).siblings().removeClass('ko-checked');
        $(this).addClass('ko-checked');
    });

```

To get checkboxes working like checkboxes, you'll want to add:

```
    $('.ko-checkboxes li').each(function(){
        $(this).find('.ko-choice-mark').html('<svg viewBox="0 0 612 792"><polygon points="0,416.4 81.6,334.8 211,472 510,151.2 612,232.8 204,640.8 "/></svg>');
    });

    $('.ko-checkboxes li').click(function(){
        if ($(this).hasClass('disabled')) return;

        $(this).toggleClass('ko-checked');
    });

```

They look like this:

```html_example
<ul class="ko-radios">
    <li>
        <span class="ko-choice-mark"></span>
        <span class="ko-choice-label">Choose this one</span>
    </li>
    <li>
        <span class="ko-choice-mark"></span>
        <span class="ko-choice-label">Or maybe this</span>
    </li>
    <li>
        <span class="ko-choice-mark"></span>
        <span class="ko-choice-label">Perhaps this is better</span>
    </li>
    <li class="disabled">
        <span class="ko-choice-mark"></span>
        <span class="ko-choice-label">But this one's worse</span>
    </li>
</ul>
```

```html_example
<ul class="ko-checkboxes">
    <li>
        <span class="ko-choice-mark"></span>
        <span class="ko-choice-label">You can choose</span>
    </li>
    <li>
        <span class="ko-choice-mark"></span>
        <span class="ko-choice-label">As many things</span>
    </li>
    <li>
        <span class="ko-choice-mark"></span>
        <span class="ko-choice-label">As you'd like!</span>
    </li>
    <li class="disabled">
        <span class="ko-choice-mark"></span>
        <span class="ko-choice-label">Except this thing</span>
    </li>
</ul>
```

*/
.ko-field-wrapper::after {
  clear: both;
  content: "";
  display: table; }

.ko-field {
  position: relative;
  margin-top: 1.6rem; }
  .ko-field::after {
    clear: both;
    content: "";
    display: table; }
  .ko-field.ko-field-half {
    float: left;
    display: block;
    margin-right: 2.35765%;
    width: 48.82117%; }
    .ko-field.ko-field-half:last-child {
      margin-right: 0; }
  .ko-field.ko-field-third {
    float: left;
    display: block;
    margin-right: 2.35765%;
    width: 31.76157%; }
    .ko-field.ko-field-third:last-child {
      margin-right: 0; }
  .ko-field.ko-field-fourth {
    float: left;
    display: block;
    margin-right: 2.35765%;
    width: 23.23176%; }
    .ko-field.ko-field-fourth:last-child {
      margin-right: 0; }
  .ko-field:last-child {
    margin-bottom: 0; }
  .ko-field input[type="text"],
  .ko-field input[type="email"],
  .ko-field input[type="password"],
  .ko-field input[type="number"],
  .ko-field input[type="search"],
  .ko-field input[type="date"],
  .ko-field input[type="time"],
  .ko-field input[type="tel"],
  .ko-field select,
  .ko-field textarea {
    -webkit-appearance: none;
    border-radius: 0;
    border: none;
    margin: 0;
    padding: 0;
    font-family: trade;
    background-color: #FFFFFF;
    font-size: 1rem;
    color: #232A31;
    display: block;
    width: 100%;
    border-style: solid;
    border-color: #E8E8E8;
    border-width: 1px;
    border-radius: 2px;
    padding: 1rem;
    -webkit-transition: border-color 0.2s;
    -moz-transition: border-color 0.2s;
    transition: border-color 0.2s; }
    .ko-field input[type="text"]::-webkit-search-decoration,
    .ko-field input[type="email"]::-webkit-search-decoration,
    .ko-field input[type="password"]::-webkit-search-decoration,
    .ko-field input[type="number"]::-webkit-search-decoration,
    .ko-field input[type="search"]::-webkit-search-decoration,
    .ko-field input[type="date"]::-webkit-search-decoration,
    .ko-field input[type="time"]::-webkit-search-decoration,
    .ko-field input[type="tel"]::-webkit-search-decoration,
    .ko-field select::-webkit-search-decoration,
    .ko-field textarea::-webkit-search-decoration {
      -webkit-appearance: none; }
    .ko-field input[type="text"]::-webkit-input-placeholder,
    .ko-field input[type="email"]::-webkit-input-placeholder,
    .ko-field input[type="password"]::-webkit-input-placeholder,
    .ko-field input[type="number"]::-webkit-input-placeholder,
    .ko-field input[type="search"]::-webkit-input-placeholder,
    .ko-field input[type="date"]::-webkit-input-placeholder,
    .ko-field input[type="time"]::-webkit-input-placeholder,
    .ko-field input[type="tel"]::-webkit-input-placeholder,
    .ko-field select::-webkit-input-placeholder,
    .ko-field textarea::-webkit-input-placeholder {
      color: #8A8A8A; }
    .ko-field input[type="text"]::-webkit-inner-spin-button, .ko-field input[type="text"]::-webkit-outer-spin-button,
    .ko-field input[type="email"]::-webkit-inner-spin-button,
    .ko-field input[type="email"]::-webkit-outer-spin-button,
    .ko-field input[type="password"]::-webkit-inner-spin-button,
    .ko-field input[type="password"]::-webkit-outer-spin-button,
    .ko-field input[type="number"]::-webkit-inner-spin-button,
    .ko-field input[type="number"]::-webkit-outer-spin-button,
    .ko-field input[type="search"]::-webkit-inner-spin-button,
    .ko-field input[type="search"]::-webkit-outer-spin-button,
    .ko-field input[type="date"]::-webkit-inner-spin-button,
    .ko-field input[type="date"]::-webkit-outer-spin-button,
    .ko-field input[type="time"]::-webkit-inner-spin-button,
    .ko-field input[type="time"]::-webkit-outer-spin-button,
    .ko-field input[type="tel"]::-webkit-inner-spin-button,
    .ko-field input[type="tel"]::-webkit-outer-spin-button,
    .ko-field select::-webkit-inner-spin-button,
    .ko-field select::-webkit-outer-spin-button,
    .ko-field textarea::-webkit-inner-spin-button,
    .ko-field textarea::-webkit-outer-spin-button {
      -webkit-appearance: none;
      margin: 0; }
    .ko-field input[type="text"]::-moz-placeholder,
    .ko-field input[type="email"]::-moz-placeholder,
    .ko-field input[type="password"]::-moz-placeholder,
    .ko-field input[type="number"]::-moz-placeholder,
    .ko-field input[type="search"]::-moz-placeholder,
    .ko-field input[type="date"]::-moz-placeholder,
    .ko-field input[type="time"]::-moz-placeholder,
    .ko-field input[type="tel"]::-moz-placeholder,
    .ko-field select::-moz-placeholder,
    .ko-field textarea::-moz-placeholder {
      /* Firefox 19+ */
      color: #8A8A8A; }
    .ko-field input[type="text"]:-ms-input-placeholder,
    .ko-field input[type="email"]:-ms-input-placeholder,
    .ko-field input[type="password"]:-ms-input-placeholder,
    .ko-field input[type="number"]:-ms-input-placeholder,
    .ko-field input[type="search"]:-ms-input-placeholder,
    .ko-field input[type="date"]:-ms-input-placeholder,
    .ko-field input[type="time"]:-ms-input-placeholder,
    .ko-field input[type="tel"]:-ms-input-placeholder,
    .ko-field select:-ms-input-placeholder,
    .ko-field textarea:-ms-input-placeholder {
      color: #8A8A8A; }
    .ko-field input[type="text"]:focus, .ko-field input[type="text"]:active,
    .ko-field input[type="email"]:focus,
    .ko-field input[type="email"]:active,
    .ko-field input[type="password"]:focus,
    .ko-field input[type="password"]:active,
    .ko-field input[type="number"]:focus,
    .ko-field input[type="number"]:active,
    .ko-field input[type="search"]:focus,
    .ko-field input[type="search"]:active,
    .ko-field input[type="date"]:focus,
    .ko-field input[type="date"]:active,
    .ko-field input[type="time"]:focus,
    .ko-field input[type="time"]:active,
    .ko-field input[type="tel"]:focus,
    .ko-field input[type="tel"]:active,
    .ko-field select:focus,
    .ko-field select:active,
    .ko-field textarea:focus,
    .ko-field textarea:active {
      border-color: #FF6600;
      box-shadow: none;
      outline: none; }
      .ko-field input[type="text"]:focus.ko-valid, .ko-field input[type="text"]:active.ko-valid,
      .ko-field input[type="email"]:focus.ko-valid,
      .ko-field input[type="email"]:active.ko-valid,
      .ko-field input[type="password"]:focus.ko-valid,
      .ko-field input[type="password"]:active.ko-valid,
      .ko-field input[type="number"]:focus.ko-valid,
      .ko-field input[type="number"]:active.ko-valid,
      .ko-field input[type="search"]:focus.ko-valid,
      .ko-field input[type="search"]:active.ko-valid,
      .ko-field input[type="date"]:focus.ko-valid,
      .ko-field input[type="date"]:active.ko-valid,
      .ko-field input[type="time"]:focus.ko-valid,
      .ko-field input[type="time"]:active.ko-valid,
      .ko-field input[type="tel"]:focus.ko-valid,
      .ko-field input[type="tel"]:active.ko-valid,
      .ko-field select:focus.ko-valid,
      .ko-field select:active.ko-valid,
      .ko-field textarea:focus.ko-valid,
      .ko-field textarea:active.ko-valid {
        border-color: #6AA220; }
    .ko-field input[type="text"]:invalid,
    .ko-field input[type="email"]:invalid,
    .ko-field input[type="password"]:invalid,
    .ko-field input[type="number"]:invalid,
    .ko-field input[type="search"]:invalid,
    .ko-field input[type="date"]:invalid,
    .ko-field input[type="time"]:invalid,
    .ko-field input[type="tel"]:invalid,
    .ko-field select:invalid,
    .ko-field textarea:invalid {
      box-shadow: none; }
    .ko-field input[type="text"].ko-invalid,
    .ko-field input[type="email"].ko-invalid,
    .ko-field input[type="password"].ko-invalid,
    .ko-field input[type="number"].ko-invalid,
    .ko-field input[type="search"].ko-invalid,
    .ko-field input[type="date"].ko-invalid,
    .ko-field input[type="time"].ko-invalid,
    .ko-field input[type="tel"].ko-invalid,
    .ko-field select.ko-invalid,
    .ko-field textarea.ko-invalid {
      border-color: #D81D1D; }
    .ko-field input[type="text"].ko-valid,
    .ko-field input[type="email"].ko-valid,
    .ko-field input[type="password"].ko-valid,
    .ko-field input[type="number"].ko-valid,
    .ko-field input[type="search"].ko-valid,
    .ko-field input[type="date"].ko-valid,
    .ko-field input[type="time"].ko-valid,
    .ko-field input[type="tel"].ko-valid,
    .ko-field select.ko-valid,
    .ko-field textarea.ko-valid {
      border-color: #6AA220; }
  .ko-field label {
    font-weight: bold;
    font-family: trade;
    text-transform: uppercase;
    color: #FF6600;
    left: 0;
    opacity: 0;
    display: block;
    position: absolute;
    bottom: 100%;
    width: 100%;
    display: inline-block;
    padding: .1rem 1rem;
    line-height: 1rem;
    font-size: 0.75rem;
    -webkit-transform: translateY(5px);
    -moz-transform: translateY(5px);
    -ms-transform: translateY(5px);
    -o-transform: translateY(5px);
    transform: translateY(5px);
    -webkit-transition: 0.2s;
    -moz-transition: 0.2s;
    transition: 0.2s; }
    .no-placeholder .ko-field label {
      opacity: 1; }
    .no-csstransitions .ko-field label {
      -webkit-transform: translateY(0);
      -moz-transform: translateY(0);
      -ms-transform: translateY(0);
      -o-transform: translateY(0);
      transform: translateY(0); }
    .ko-field label.ko-active {
      opacity: 1;
      -webkit-transform: translateY(0);
      -moz-transform: translateY(0);
      -ms-transform: translateY(0);
      -o-transform: translateY(0);
      transform: translateY(0); }
      .ko-field label.ko-active.ko-valid {
        color: #6AA220;
        -webkit-transform: translateY(0);
        -moz-transform: translateY(0);
        -ms-transform: translateY(0);
        -o-transform: translateY(0);
        transform: translateY(0); }
    .ko-field label.ko-invalid {
      opacity: 1;
      color: #D81D1D;
      -webkit-transform: translateY(0);
      -moz-transform: translateY(0);
      -ms-transform: translateY(0);
      -o-transform: translateY(0);
      transform: translateY(0); }
    .ko-field label.ko-valid {
      color: #6AA220;
      opacity: 1;
      -webkit-transform: translateY(0);
      -moz-transform: translateY(0);
      -ms-transform: translateY(0);
      -o-transform: translateY(0);
      transform: translateY(0); }
  .ko-field select {
    cursor: pointer;
    background-color: #F5F5F5;
    background-image: -webkit-linear-gradient(#F5F5F5, #ededed);
    background-image: linear-gradient(#F5F5F5, #ededed); }

.ko-form-actions {
  display: -webkit-box;
  display: -moz-box;
  display: box;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex;
  margin-top: 2rem; }

@-webkit-keyframes check-it {
  0% {
    -webkit-transform: scale(1); }
  50% {
    -webkit-transform: scale(1.25);
    -webkit-animation-timing-function: ease; }
  100% {
    -webkit-transform: scale(1);
    -webkit-animation-timing-function: ease-out; } }

@-moz-keyframes check-it {
  0% {
    -moz-transform: scale(1); }
  50% {
    -moz-transform: scale(1.25);
    -moz-animation-timing-function: ease; }
  100% {
    -moz-transform: scale(1);
    -moz-animation-timing-function: ease-out; } }

@keyframes check-it {
  0% {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1); }
  50% {
    -webkit-transform: scale(1.25);
    -moz-transform: scale(1.25);
    -ms-transform: scale(1.25);
    -o-transform: scale(1.25);
    transform: scale(1.25);
    -webkit-animation-timing-function: ease;
    -moz-animation-timing-function: ease;
    animation-timing-function: ease; }
  100% {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
    -webkit-animation-timing-function: ease-out;
    -moz-animation-timing-function: ease-out;
    animation-timing-function: ease-out; } }

ul.ko-checkboxes, ul.ko-radios {
  margin-bottom: 0;
  margin-left: 0;
  list-style-type: none; }
  ul.ko-checkboxes li, ul.ko-radios li {
    margin: 0;
    cursor: pointer;
    margin-bottom: 1rem;
    line-height: 1.5rem; }

ul.ko-checkboxes li:hover .ko-choice-mark svg {
  fill: #E8E8E8; }

ul.ko-checkboxes li.disabled:hover .ko-choice-mark svg {
  fill: transparent; }

ul.ko-checkboxes li.ko-checked:hover .ko-choice-mark svg {
  fill: #FF6600; }

ul.ko-radios li:hover .ko-choice-mark:after {
  background-color: #E8E8E8; }

ul.ko-radios li.disabled:hover .ko-choice-mark:after {
  background-color: transparent; }

ul.ko-radios li.ko-checked:hover .ko-choice-mark:after {
  background-color: #FF6600; }

.disabled .ko-choice-label {
  color: #8A8A8A; }

.ko-choice-mark {
  position: relative;
  border: 0.125rem solid #FF6600;
  width: 1.5rem;
  height: 1.5rem;
  margin-right: .4rem;
  display: inline-block;
  vertical-align: bottom;
  background-color: #FFFFFF;
  -webkit-transition: 0.2s;
  -moz-transition: 0.2s;
  transition: 0.2s; }
  .ko-choice-mark:after {
    content: '';
    position: absolute;
    top: 10%;
    left: 10%;
    background-color: transparent;
    height: 80%;
    width: 80%;
    border-radius: 50%;
    -webkit-transition: 0.2s;
    -moz-transition: 0.2s;
    transition: 0.2s;
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1); }
  .disabled .ko-choice-mark {
    border: 0.125rem solid #E8E8E8; }
  .ko-radios .ko-choice-mark {
    border-radius: 50%; }
  .ko-checked .ko-choice-mark {
    -webkit-animation: check-it 0.2s forwards;
    -moz-animation: check-it 0.2s forwards;
    animation: check-it 0.2s forwards; }
    .ko-radios .ko-checked .ko-choice-mark:after {
      background-color: #FF6600;
      -webkit-transform: scale(1);
      -moz-transform: scale(1);
      -ms-transform: scale(1);
      -o-transform: scale(1);
      transform: scale(1); }
  .ko-choice-mark svg {
    width: 100%;
    height: 100%;
    fill: transparent;
    -webkit-transition: 0.2s;
    -moz-transition: 0.2s;
    transition: 0.2s; }
    .ko-checked .ko-choice-mark svg {
      fill: #FF6600; }

/*doc
---
title: Links
name: links
category: Elements
---

Throw a class of `ko-link` on any link to give it a nice format.

Links inside of paragraphs and lists inside of the `ko-article` class get this treatment by default.

```html_example
<div class="ko-article">
    <p>Eleifend eaque quo semper <a href="#">pellentesque laboriosam habitasse</a>, asperiores ultrices condimentum netus, rerum?</p>
</div>

<div class="widget">
    Habitasse sequi <a class="ko-link" href="#">varius tellus natoque excepturi</a>! Atque in quam officiis nunc vestibulum tellus augue praesentium temporibus.
</div>
```

*/
.ko-link, .ko-article p a, .ko-article ul a, .ko-article ol a {
  font-weight: bold;
  color: #FF6600;
  border-bottom: 1px solid #E8E8E8;
  -webkit-transition: 0.2s;
  -moz-transition: 0.2s;
  transition: 0.2s; }
  .ko-link:hover, .ko-article p a:hover, .ko-article ul a:hover, .ko-article ol a:hover {
    color: #e65c00;
    border-color: #FF6600; }
  .ko-link:active, .ko-article p a:active, .ko-article ul a:active, .ko-article ol a:active, .ko-link:focus, .ko-article p a:focus, .ko-article ul a:focus, .ko-article ol a:focus {
    color: #ff751a; }

.dropmenu {
  border: solid 1px #969696;
  background-color: #FFFFFF;
  height: 16px;
  cursor: pointer;
  line-height: 16px; }

input.dropmenu {
  cursor: text; }

.dropDownButton {
  width: 16px;
  line-height: 16px;
  height: 16px;
  cursor: pointer;
  float: right;
  background: transparent url(/images/dropdown.gif) no-repeat; }

.dropmenu p {
  float: left;
  font-style: italic;
  white-space: nowrap;
  overflow: hidden;
  cursor: pointer; }

div.dropDown {
  background-color: #FFFFFF;
  padding: 0px;
  margin: 0px;
  border: solid 1px #6b6b6b;
  max-height: 230px;
  overflow-x: auto;
  overflow-y: auto;
  z-index: 1;
  -moz-box-shadow: 0 3px 5px rgba(0, 0, 0, 0.5);
  -webkit-box-shadow: 0 3px 5px rgba(0, 0, 0, 0.5);
  box-shadow: 0 3px 5px rgba(0, 0, 0, 0.5); }

ul.menu {
  list-style-type: none;
  background-color: #FFFFFF; }

ul.menu li {
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden; }

ul.menu li:hover {
  color: #FFFFFF;
  background-color: #FF6600; }

ul.menu li.selected {
  background-color: #0099ff;
  color: #FFFFFF; }

div.user-list {
  width: 152px;
  border: solid 1px #969696;
  background-color: #FFFFFF; }

/* lyle.shearer 1/27/2012 - TODO I think this is duplicated in core.css */
.scroll {
  overflow-x: hidden;
  overflow-y: auto; }

ul.users, ul.columns {
  list-style-type: none;
  overflow: hidden; }

ul.users li {
  cursor: pointer;
  height: 14px;
  text-indent: 20px;
  overflow: hidden;
  white-space: nowrap; }

ul.sl {
  min-height: 170px; }

ul.sl li.hover {
  background-color: #E8E8E8; }

ul.sl li.selected {
  background-color: #0099FF;
  color: #FFFFFF; }

li.sl.selected {
  background-color: #0099FF;
  color: #FFFFFF; }

li.sl {
  cursor: pointer;
  height: 14px;
  text-indent: 5px;
  overflow: hidden;
  white-space: nowrap; }

.sl-empty-text {
  color: #B4B4B4;
  position: absolute;
  top: 0;
  font-size: 14px;
  margin: 155px 10px 0 10px;
  text-align: center; }

li.with-icon {
  text-indent: 20px; }

li.g, #accessList li.g label {
  background-image: url(/images/group16.png);
  background-repeat: no-repeat; }

#accessList li.g, #accessList li.u {
  background: transparent; }

li.u, #accessList li.u label {
  background-image: url(/images/user16.png);
  background-repeat: no-repeat; }

ul.columns li {
  cursor: pointer;
  height: 14px;
  overflow: hidden; }

ul.buttons {
  list-style-type: none;
  font-size: 10px;
  padding-right: 5px;
  padding-left: 5px;
  font-weight: bold; }

ul.buttons li {
  display: block;
  margin: 2px 0;
  text-align: center;
  width: 20px;
  height: 20px;
  cursor: pointer; }

.all-left {
  background-image: url(/images/all_left.png); }

.all-right {
  background-image: url(/images/all_right.png); }

.one-left {
  background-image: url(/images/one_left.png); }

.one-right {
  background-image: url(/images/one_right.png); }

.one-up {
  background-image: url(/images/one_up.png); }

.one-down {
  background-image: url(/images/one_down.png); }

input.wide {
  width: 340px; }

#sendmsg {
  width: 440px;
  font-size: 11px;
  font-family: Verdana, Tahoma, Arial, Sans-Serif;
  color: #6b6b6b; }

#sendmsg table {
  margin: 0; }

#message-layout th {
  vertical-align: top;
  text-align: right;
  padding: 13px 10px 10px 0; }

#message-layout th.middle {
  vertical-align: middle;
  padding: 0 10px 0 0; }

#message-layout td {
  padding: 10px 0; }

#message-layout #userGroupChooser td {
  padding: 0; }

#message-layout textarea {
  width: 340px;
  height: 150px;
  padding: 3px;
  font-family: Verdana, Tahoma, Arial, Sans-Serif;
  font-size: 11px; }

#message-layout input.text {
  padding: 3px; }

#sendmsg input.radio {
  float: left;
  margin-right: 5px;
  display: inline; }

#sendmsg input.submit {
  font-size: 14px;
  font-weight: bold;
  color: #333;
  padding: 5px 2px; }

#sendmsg .footer label {
  float: left;
  display: inline;
  margin-bottom: 5px; }

#sendmsg .footer label.disabled {
  color: #ccc;
  cursor: default; }

#sendmsg .footer p {
  float: left;
  width: 170px;
  text-align: left;
  margin-left: 75px; }

#sendmsg .body {
  padding-bottom: 0; }

#sendmsg h1 {
  text-transform: none; }

#sendmsg .cancel,
#send-team-message {
  margin-right: 3px; }

#teamMenu {
  width: 340px;
  font-size: 12px; }

#teamChooser {
  width: 340px; }

#teamChooser p {
  font-size: 12px;
  color: #333;
  font-style: normal;
  float: none;
  width: 300px; }

.char-limiter {
  color: #B43333;
  font-weight: bold; }

input.filter {
  margin-bottom: 3px;
  margin-left: 0px;
  width: 150px;
  _margin-bottom: 0px;
  padding: 1px; }

td.buttons-parent {
  width: 30px;
  vertical-align: middle; }

#attach-files {
  border: dashed 2px #999;
  width: 340px;
  padding: 0; }

/* file upload css */
.mm-uploader {
  position: relative;
  width: 100%; }

.mm-upload-button {
  color: blue; }

.mm-upload-button-focus {
  outline: 1px dotted black; }

.mm-upload-drop-area {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  min-height: 90px;
  z-index: 2;
  background: #FF9797;
  text-align: center; }

.mm-drop-area {
  padding: 10px; }

.mm-upload-drop-area span {
  display: block;
  position: absolute;
  top: 50%;
  width: 100%;
  margin-top: -8px;
  font-size: 16px; }

.mm-drop-area {
  overflow: hidden; }

.mm-upload-drop-area-active {
  background: #FFFFFF; }

.mm-upload-list {
  list-style: none; }

.mm-upload-list li {
  margin: 0;
  padding: 8px 0 0 0;
  line-height: 15px;
  font-size: 11px; }

.mm-upload-file, .mm-upload-spinner, .mm-upload-size, .mm-upload-cancel, .mm-upload-failed-text {
  margin-right: 7px; }

.mm-upload-cancel {
  font-size: 9px !important; }

.mm-upload-spinner {
  display: inline-block;
  background: url("/images/loading.gif");
  width: 15px;
  height: 15px;
  vertical-align: text-bottom; }

.mm-upload-size, .mm-upload-cancel {
  font-size: 11px; }

.mm-upload-size {
  display: none; }

.mm-upload-failed-text {
  display: none; }

.mm-upload-fail .mm-upload-failed-text {
  display: inline; }

.mm-upload-remove {
  display: none;
  /* hide by default */
  font-size: 9px; }

#sendmsg, #sendmsg * {
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box; }

#sendmsg td, #sendmsg label {
  line-height: 1;
  font-size: 11px;
  font-family: Verdana, Tahoma, Arial, Sans-Serif;
  color: #6b6b6b; }

#sendmsg tr {
  font-size: 11px; }

/* Loader */
#sendmsg .loading {
  color: #FFFFFF;
  font-weight: bold;
  background: transparent url(/images/overlay_bg80.png) repeat;
  padding: 7px;
  border-radius: 3px;
  -moz-border-radius: 3px; }

#sendmsg .loading p {
  padding-left: 20px;
  background: url(/images/dark-loading.gif) no-repeat left center;
  line-height: 18px; }

#sendmsg img {
  vertical-align: middle; }

#sendmsg.modalPopup {
  -moz-border-radius: 7px;
  -webkit-border-radius: 7px;
  position: absolute;
  padding: 15px;
  background: transparent url(/images/overlay_bg60.png) repeat; }

#sendmsg.modalPopup p {
  max-width: 340px; }

#sendmsg.modalPopup .mheader {
  -moz-border-radius: 5px 5px 0 0;
  -webkit-border-top-left-radius: 5px;
  -webkit-border-top-right-radius: 5px;
  background-color: #FF8E33;
  padding: 5px 10px;
  border-bottom: 1px solid #FF6600;
  cursor: default; }

#sendmsg.modalPopup h1 {
  font-size: 18px;
  font-weight: bold;
  color: #FFFFFF;
  letter-spacing: -1px;
  font-family: Verdana, Sans-Serif !important;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.4); }

#sendmsg.modalPopup .subtitle {
  display: block;
  font-size: 11px;
  font-weight: normal;
  letter-spacing: normal; }

#sendmsg.modalPopup .body, #sendmsg .modalPopup .mbody {
  padding: 10px;
  background-color: #E8E8E8;
  border-top: 1px solid #f4f4f4; }

#sendmsg.modalPopup th {
  font-weight: bold; }

#sendmsg.modalPopup .nob {
  border-top: none; }

#sendmsg.modalPopup .footer {
  -moz-border-radius: 0 0 5px 5px;
  -webkit-border-bottom-left-radius: 5px;
  -webkit-border-bottom-right-radius: 5px;
  padding: 8px 12px 15px 0px;
  text-align: right;
  background-color: #E8E8E8; }

#sendmsg.modalPopup .footer input {
  cursor: pointer; }

#sendmsg.modalPopup .footer input[disabled] {
  cursor: default; }

#sendmsg.modalPopup .footer textarea {
  margin-top: 8px;
  width: 350px; }

#sendmsg.modalPopup .footer span.command {
  cursor: pointer; }

#sendmsg.modalPopup a.disabled {
  color: #6B6B6B;
  text-decoration: none;
  cursor: default; }

#sendmsg.modalPopup a.disabled:hover {
  background: none;
  text-decoration: none;
  cursor: default; }

#sendmsg .dlg_close {
  font-size: 0px;
  line-height: 0px;
  text-indent: -9999px;
  height: 24px;
  width: 24px;
  position: absolute;
  top: -10px;
  right: -8px;
  background: url(/images/dlg_close.png) no-repeat center center; }

#sendmsg .dlg_close:hover {
  background-color: Transparent; }

/* Account alert banner */
#expiration-countdown {
  margin: 0 auto 0 auto;
  width: 1100px; }
  #expiration-countdown.banner_notice {
    padding: 15px 15px 15px 25px;
    background: #f8f8f8 url(/images/announce-bg.png) repeat-x left top;
    border: 1px solid #d8d8d8;
    border-bottom: 1px solid #b4b4b4; }
    #expiration-countdown.banner_notice .fl-l {
      float: left;
      width: 400px; }
      #expiration-countdown.banner_notice .fl-l h3 {
        font-family: inherit;
        font-size: 14px; }
      #expiration-countdown.banner_notice .fl-l > span {
        display: block;
        margin-top: 3px;
        line-height: 1; }
    #expiration-countdown.banner_notice.clearfix:before, #expiration-countdown.banner_notice.clearfix:after {
      content: "";
      display: table; }
    #expiration-countdown.banner_notice.clearfix:after {
      clear: both;
      content: '.';
      display: block;
      visibility: hidden;
      height: 0; }
    #expiration-countdown.banner_notice.clearfix {
      display: block;
      zoom: 1; }
    #expiration-countdown.banner_notice img {
      display: inline;
      padding: 5px;
      background: #FFF;
      border: 1px solid #b4b4b4;
      float: right;
      margin-left: 10px; }
    #expiration-countdown.banner_notice strong {
      color: #333; }
    #expiration-countdown.banner_notice p {
      color: #6b6b6b;
      margin: 2px 0;
      padding: 0;
      font-size: 12px; }
    #expiration-countdown.banner_notice p.first {
      margin: 5px 0 10px 0; }
    #expiration-countdown.banner_notice h2 {
      color: #F60; }
  #expiration-countdown .billcta,
  #expiration-countdown .billcta:visited,
  #expiration-countdown .billcta:link {
    display: inline-block;
    padding: 3px 4px;
    border: 1px solid #06f;
    color: #fff;
    background: #09f url(/images/catsel.gif) repeat-x left top;
    text-decoration: none;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.4);
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    -webkit-box-shadow: 0px 1px 0px rgba(255, 255, 255, 0.76);
    -moz-box-shadow: 0px 1px 0px rgba(255, 255, 255, 0.76);
    box-shadow: 0px 1px 0px rgba(255, 255, 255, 0.6); }
  #expiration-countdown .billcta:hover {
    background-position: left bottom; }
  #expiration-countdown #hide-banner-btn {
    display: none;
    text-align: right; }
  #expiration-countdown .progress_meter {
    float: right;
    width: 470px;
    margin: 0 0 0 15px; }
    #expiration-countdown .progress_meter .bar_w {
      background: #d8d8d8;
      -moz-border-radius: 2px;
      -webkit-border-radius: 2px;
      border-radius: 2px;
      margin: 0 0 3px 0; }
    #expiration-countdown .progress_meter .bar {
      background: #ec1427 url(/images/meter-bgs.png) repeat-x 0 -48px;
      border: 1px solid #ec1427;
      text-align: right;
      -moz-border-radius: 2px;
      -webkit-border-radius: 2px;
      border-radius: 2px; }
      #expiration-countdown .progress_meter .bar span {
        font-weight: bold;
        font-size: 10px;
        color: #FFF;
        padding: 2px 8px;
        display: inline-block; }
    #expiration-countdown .progress_meter .text {
      text-align: right;
      color: #ec1427;
      font-weight: bold; }
    #expiration-countdown .progress_meter span {
      color: #6b6b6b;
      font-weight: normal; }
    #expiration-countdown .progress_meter .icon {
      width: 16px;
      height: 16px;
      background: transparent no-repeat center center scroll;
      margin-right: 6px;
      vertical-align: bottom; }
    #expiration-countdown .progress_meter.low .icon {
      background-image: url(/images/warn16.png); }

html {
  box-sizing: border-box; }

*, *::after, *::before {
  box-sizing: inherit; }

/*doc
---
title: Reset
name: 03-Reset
category: Elements
---

We use the Eric Meyer reset with the addition of setting the default font to **Trade**, removing text-decoration on links, giving everything a line-height of 1, using `-webkit-font-smoothing: antialiased`, and setting  `-webkit-tap-highlight-color: transparent`.

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

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; }

* {
  box-sizing: border-box; }

body {
  line-height: 1;
  font-family: trade, sans-serif;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent; }

a {
  text-decoration: none; }

/*doc
---
title: Variables
name: 01-variables
category: Elements
---

### Colors

#### Dark UI Colors

<div class="ko-color-blocks">
    <div class="ko-color-block-ui_dark_color">
        <div>$dui_dark_color</div>
        <div>#232A31</div>
    </div>
    <div class="ko-color-block-ui_dark_medium_color">
        <div>$ui_dark_medium_color</div>
        <div>#38434F</div>
    </div>
    <div class="ko-color-block-ui_dark_light_color">
        <div>$ui_dark_light_color</div>
        <div>#4E5D6C</div>
    </div>
</div>

#### Gray UI Colors

<div class="ko-color-blocks">
    <div class="ko-color-block-ui_gray_color">
        <div>$ui_gray_color</div>
        <div>#8A8A8A</div>
    </div>
    <div class="ko-color-block-ui_gray_medium_color">
        <div>$ui_gray_medium_color</div>
        <div>#E8E8E8</div>
    </div>
    <div class="ko-color-block-ui_gray_light_color">
        <div>$ui_gray_light_color</div>
        <div>#F5F5F5</div>
    </div>
</div>

#### Accent UI Colors

<div class="ko-color-blocks">
    <div class="ko-color-block-ui_blue_color">
        <div>$ui_blue_color</div>
        <div>#00AEEF</div>
    </div>
    <div class="ko-color-block-ui_orange_color">
        <div>$ui_orange_color</div>
        <div>#FF6600</div>
    </div>
</div>

#### Alert UI Colors

<div class="ko-color-blocks">
    <div class="ko-color-block-ui_red_color">
        <div>$ui_red_color</div>
        <div>#D81D1D</div>
    </div>
    <div class="ko-color-block-ui_yellow_color">
        <div>$ui_yellow_color</div>
        <div>#FABE39</div>
    </div>
    <div class="ko-color-block-ui_green_color">
        <div>$ui_green_color</div>
        <div>#6AA220</div>
    </div>
</div>

#### Grayscale UI Text Colors

<div class="ko-color-blocks">
    <div class="ko-color-block-ui_text_dark_color">
        <div>$ui_text_dark_color</div>
        <div>#333333</div>
    </div>
    <div class="ko-color-block-ui_text_medium_color">
        <div>$ui_text_medium_color</div>
        <div>#666666</div>
    </div>
    <div class="ko-color-block-ui_text_light_color">
        <div>$ui_text_light_color</div>
        <div>#999999</div>
    </div>
</div>
<div class="ko-color-blocks">
    <div class="ko-color-block-ui_text_extra_light_color">
        <div>$ui_text_extra_light_color</div>
        <div>#CCCCCC</div>
    </div>
</div>

#### Base UI Colors

<div class="ko-color-blocks">
    <div class="ko-color-block-ui_black_color">
        <div>$ui_black_color</div>
        <div>#FFFFFF</div>
    </div>
    <div class="ko-color-block-ui_white_color">
        <div>$ui_white_color</div>
        <div>#000000</div>
    </div>
</div>

#### Team Colors

<div class="ko-color-blocks">
    <div class="ko-color-block-tagging_team_white_color">
        <div>$tagging_team_white_color</div>
        <div>#E9E9E9</div>
    </div>
    <div class="ko-color-block-tagging_team_gray_color">
        <div>$tagging_team_gray_color</div>
        <div>#8C9196</div>
    </div>
    <div class="ko-color-block-tagging_team_black_color">
        <div>$tagging_team_black_color</div>
        <div>#404040</div>
    </div>
</div>

<div class="ko-color-blocks">
    <div class="ko-color-block-tagging_team_yellow_color">
        <div>$tagging_team_yellow_color</div>
        <div>#FFDD30</div>
    </div>
    <div class="ko-color-block-tagging_team_orange_color">
        <div>$tagging_team_orange_color</div>
        <div>#ED9827</div>
    </div>
    <div class="ko-color-block-tagging_team_red_color">
        <div>$tagging_team_red_color</div>
        <div>#DF4953</div>
    </div>
</div>

<div class="ko-color-blocks">
    <div class="ko-color-block-tagging_team_green_color">
        <div>$tagging_team_green_color</div>
        <div>#42BE39</div>
    </div>
    <div class="ko-color-block-tagging_team_blue_color">
        <div>$tagging_team_blue_color</div>
        <div>#3985BE</div>
    </div>
    <div class="ko-color-block-tagging_team_purple_color">
        <div>$tagging_team_purple_color</div>
        <div>#9F62B1</div>
    </div>
</div>

### Font Sizes

These should really be used by the `font-size()` mixin to maintain consistent typography. The possible values are (from smallest to largest): **small**, **p**, and **5** to **1** (or **h5** to **h1** if that's your jam).

### Z-index

Try to stick to the variables defined here for z-index values, e.g., `z-index: $z-1` instead of arbitrary numbers. The possible values are: **z-1** (100) to **z-7** (700).

### Transition Lengths

Again, try to stick to these instead of arbitrary values. The possible values are: **t-quick** (0.2s), **t-med** (0.3s), and **t-slow** (0.5s).

### Common Breakpoints

Put breakpoints that you end up referencing a lot here and give it a prefix of `b-`, e.g., `b-showdesktop`. These are usually referenced by the `respond()` mixin.

*/
/*doc
---
title: Mixins
name: 02-mixins
category: Elements
---

### Bourbon & Neat

First off, be aware that we're using [Bourbon](http://bourbon.io/docs/) and [Neat](http://neat.bourbon.io/docs/) in Kickoff. Read up on their documentation to familiarize yourself with the mixins we get with those libraries.

### Respond()

This is our main responsive design mixin. It's built in mobile-first fashion and uses `em`s as the unit, and here's the usage:


```
.widget {

    // Default mobile-first styles here

    @include respond(20) {
        // Styles for screens from 20ems on up
    }

    @include respond(55) {
        // Styles for screens from 55rems on up
    }

    @include respond($b-showdesktop) {
        // Styles for screens from this variable on up
    }

}
```

There's an optional `ie` argument that you can pass in if you also want these styles to apply to IE8 since that browser doesn't like media queries.


```
.widget {

    // Default mobile-first styles here

    @include respond(20, ie) {
        // Styles for screens from 20ems on up and IE8
    }

}
```

Finally, the mixin applies ALL the styles to any page with a class of `desktop-only` on the `<body>`. This is to support older non-responsive and non-mobile-first pages.

### Font sizes

We've got a mixin for maintaining consistent font-sizes on a nice typographic scale. Any time you need to change the font size of an element, please use this mixin.
The possible values are (from smallest to largest): **small**, **p**, **5**, **4**, **3**, **2**, and **1**.

```
.widget {
    @include font-size(small) // .75rem
}

.widget {
    @include font-size(p) // default 1rem font size
}

.widget {
    @include font-size(5) // h5 size: 1.125rem
}

.widget {
    @include font-size(4) // h4 size: 1.3125rem
}

// etc

```

### Trade-heading()

A quick mixin for giving you that bold condensed trade heading that we all love. Pass in 'caps' to uppercase it, e.g., `trade-heading(caps)`

### Text-overflow()

For when you just don't have enough room. Hides overflow, doesn't wrap white-space and cuts off text with an ellipsis.

### CSS Spinner

There's a default `css-spinner` class that you can throw on any `<div>` but you'll likely want to customize it a bit.

```html_example
<div class="css-spinner"></div>
```

Here's how the mixin works if you want to put it on your own element and customize the colors.

```
.widget {

    // Arguments:
    // 1. border-width
    // 2. main color
    // 3. background color
    // 4. total width/height
    // 5. margin (optional. defaults to 0.)

    @include css-spinner(.5rem, $orange, $medium-gray, 4rem, 1rem);

}
```

*/
@-webkit-keyframes spinner-rotation {
  from {
    -webkit-transform: rotate(0deg); }
  to {
    -webkit-transform: rotate(359deg); } }

@-moz-keyframes spinner-rotation {
  from {
    -moz-transform: rotate(0deg); }
  to {
    -moz-transform: rotate(359deg); } }

@keyframes spinner-rotation {
  from {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg); }
  to {
    -webkit-transform: rotate(359deg);
    -moz-transform: rotate(359deg);
    -ms-transform: rotate(359deg);
    -o-transform: rotate(359deg);
    transform: rotate(359deg); } }

.css-spinner {
  -webkit-animation: spinner-rotation 0.75s infinite linear;
  -moz-animation: spinner-rotation 0.75s infinite linear;
  animation: spinner-rotation 0.75s infinite linear;
  clear: both;
  height: 4rem;
  width: 4rem;
  margin: 1rem auto 1rem auto;
  position: relative;
  border-top: 0.5rem solid #FF6600;
  border-left: 0.5rem solid #E8E8E8;
  border-bottom: 0.5rem solid #E8E8E8;
  border-right: 0.5rem solid #E8E8E8;
  border-radius: 100%;
  display: block; }
  .no-cssanimations .css-spinner {
    display: none; }

.css-spinner-message {
  margin-bottom: 1.5rem;
  padding: 0 1.5rem;
  text-align: center;
  font-size: 1rem;
  font-style: italic;
  color: #8A8A8A; }
  .no-cssanimations .css-spinner-message {
    font-weight: bold;
    padding: 1.5rem;
    color: #FF6600;
    font-size: 20px; }

.ko-nav-mobile-menu-button,
.ko-nav-mobile-menu-right-button {
  height: 3rem;
  width: 3rem;
  font-weight: bold;
  border-right: 1px solid rgba(255, 255, 255, 0.1);
  display: -webkit-box;
  display: -moz-box;
  display: box;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -moz-box-align: center;
  box-align: center;
  -webkit-align-items: center;
  -moz-align-items: center;
  -ms-align-items: center;
  -o-align-items: center;
  align-items: center;
  -ms-flex-align: center;
  -webkit-box-pack: center;
  -moz-box-pack: center;
  box-pack: center;
  -webkit-justify-content: center;
  -moz-justify-content: center;
  -ms-justify-content: center;
  -o-justify-content: center;
  justify-content: center;
  -ms-flex-pack: center;
  -webkit-transition: 0.2s;
  -moz-transition: 0.2s;
  transition: 0.2s;
  position: absolute;
  left: 0;
  top: 0;
  cursor: pointer; }
  .ko-nav-mobile-menu-button:hover,
  .ko-nav-mobile-menu-right-button:hover {
    background-color: #181d22; }
  .ko-nav-mobile-menu-button svg, .ko-nav-mobile-menu-button path, .ko-nav-mobile-menu-button polygon,
  .ko-nav-mobile-menu-right-button svg,
  .ko-nav-mobile-menu-right-button path,
  .ko-nav-mobile-menu-right-button polygon {
    fill: #FF6600; }
  .no-flexbox .ko-nav-mobile-menu-button::after, .no-flexbox
  .ko-nav-mobile-menu-right-button::after {
    clear: both;
    content: "";
    display: table; }
  .no-flexbox .ko-nav-mobile-menu-button svg,
  .no-flexbox .ko-nav-mobile-menu-button span,
  .no-flexbox .ko-nav-mobile-menu-button img, .no-flexbox
  .ko-nav-mobile-menu-right-button svg,
  .no-flexbox
  .ko-nav-mobile-menu-right-button span,
  .no-flexbox
  .ko-nav-mobile-menu-right-button img {
    height: 3rem;
    line-height: 3rem;
    vertical-align: middle;
    float: left; }
  .no-flexbox .ko-nav-mobile-menu-button, .no-flexbox
  .ko-nav-mobile-menu-right-button {
    text-align: center; }
  .ko-nav-mobile-menu-button svg, .ko-nav-mobile-menu-button path, .ko-nav-mobile-menu-button polygon,
  .ko-nav-mobile-menu-right-button svg,
  .ko-nav-mobile-menu-right-button path,
  .ko-nav-mobile-menu-right-button polygon {
    width: 1.5rem;
    height: 1.5rem; }
    .no-flexbox .ko-nav-mobile-menu-button svg, .no-flexbox .ko-nav-mobile-menu-button path, .no-flexbox .ko-nav-mobile-menu-button polygon, .no-flexbox
    .ko-nav-mobile-menu-right-button svg, .no-flexbox
    .ko-nav-mobile-menu-right-button path, .no-flexbox
    .ko-nav-mobile-menu-right-button polygon {
      display: inline-block;
      float: none;
      height: 3rem; }

.ko-nav-mobile-menu-right-button {
  left: auto;
  right: 0; }

a.ko-nav-team {
  height: 3rem;
  width: 3rem;
  font-weight: bold;
  border-right: 1px solid rgba(255, 255, 255, 0.1);
  display: -webkit-box;
  display: -moz-box;
  display: box;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -moz-box-align: center;
  box-align: center;
  -webkit-align-items: center;
  -moz-align-items: center;
  -ms-align-items: center;
  -o-align-items: center;
  align-items: center;
  -ms-flex-align: center;
  -webkit-box-pack: center;
  -moz-box-pack: center;
  box-pack: center;
  -webkit-justify-content: center;
  -moz-justify-content: center;
  -ms-justify-content: center;
  -o-justify-content: center;
  justify-content: center;
  -ms-flex-pack: center;
  -webkit-transition: 0.2s;
  -moz-transition: 0.2s;
  transition: 0.2s;
  border-right: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  cursor: pointer;
  -webkit-box-pack: start;
  -moz-box-pack: start;
  box-pack: start;
  -webkit-justify-content: flex-start;
  -moz-justify-content: flex-start;
  -ms-justify-content: flex-start;
  -o-justify-content: flex-start;
  justify-content: flex-start;
  -ms-flex-pack: start; }
  a.ko-nav-team:hover {
    background-color: #181d22; }
  a.ko-nav-team svg, a.ko-nav-team path, a.ko-nav-team polygon {
    fill: #FF6600; }
  .no-flexbox a.ko-nav-team::after {
    clear: both;
    content: "";
    display: table; }
  .no-flexbox a.ko-nav-team svg,
  .no-flexbox a.ko-nav-team span,
  .no-flexbox a.ko-nav-team img {
    height: 3rem;
    line-height: 3rem;
    vertical-align: middle;
    float: left; }
  @media only screen and (min-width: 65em) {
    a.ko-nav-team {
      border-right: 1px solid rgba(255, 255, 255, 0.1);
      border-bottom: none; } }
  .desktop-only a.ko-nav-team {
    border-right: 1px solid rgba(255, 255, 255, 0.1);
    border-bottom: none; }
  .no-flexbox a.ko-nav-team {
    height: auto;
    padding-top: 0;
    padding-bottom: 0; }
  a.ko-nav-team .ko-nav-team-dudes {
    display: none;
    width: 1.5rem;
    height: 1.5rem; }
    @media only screen and (min-width: 65em) {
      a.ko-nav-team .ko-nav-team-dudes {
        display: block;
        margin-right: .5rem; } }
    .desktop-only a.ko-nav-team .ko-nav-team-dudes {
      display: block;
      margin-right: .5rem; }
  @media only screen and (min-width: 65em) {
    a.ko-nav-team .ko-nav-team-icon {
      display: none; } }
  .desktop-only a.ko-nav-team .ko-nav-team-icon {
    display: none; }
  a.ko-nav-team .ko-nav-team-icon svg {
    height: 1rem;
    width: 1rem; }
  a.ko-nav-team .ko-nav-team-arrow {
    display: none; }
    @media only screen and (min-width: 65em) {
      a.ko-nav-team .ko-nav-team-arrow {
        display: block; } }
    .desktop-only a.ko-nav-team .ko-nav-team-arrow {
      display: block; }
  a.ko-nav-team .ko-nav-team-name {
    display: block;
    margin: 0 0.375rem 0 0;
    color: #FF6600;
    max-width: 12rem;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden; }

.ko-nav-mobile-header, .ko-nav {
  z-index: 0; }
  @media only screen and (min-width: 65em) {
    .ko-nav-mobile-header, .ko-nav {
      z-index: 100; } }
  .desktop-only .ko-nav-mobile-header, .desktop-only .ko-nav {
    z-index: 100; }
  .ko-nav-mobile-header a, .ko-nav a {
    color: #FFFFFF;
    -webkit-transition: 0.2s;
    -moz-transition: 0.2s;
    transition: 0.2s; }

.ko-nav-icon {
  width: 1rem;
  height: 1rem;
  fill: rgba(255, 255, 255, 0.5);
  margin-right: .5rem; }
  .ko-nav-icon svg {
    height: 100%;
    width: 100%; }
  .ko-nav-icon path, .ko-nav-icon polygon {
    width: 1rem;
    height: 1rem;
    fill: rgba(255, 255, 255, 0.5); }
  @media only screen and (min-width: 65em) {
    .ko-nav-main-item .ko-nav-icon {
      display: none; } }
  .desktop-only .ko-nav-main-item .ko-nav-icon {
    display: none; }
  @media only screen and (min-width: 65em) {
    .ko-nav-help .ko-nav-icon, .ko-nav-sub .ko-nav-icon, .ko-nav-sub-double .ko-nav-icon {
      display: block; } }
  .desktop-only .ko-nav-help .ko-nav-icon, .desktop-only .ko-nav-sub .ko-nav-icon, .desktop-only .ko-nav-sub-double .ko-nav-icon {
    display: block; }
  .no-flexbox .ko-nav-icon {
    position: relative;
    top: 0.1875rem; }

.ko-nav-mobile-header {
  background-color: #232A31;
  height: 3rem;
  display: -webkit-box;
  display: -moz-box;
  display: box;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -moz-box-align: center;
  box-align: center;
  -webkit-align-items: center;
  -moz-align-items: center;
  -ms-align-items: center;
  -o-align-items: center;
  align-items: center;
  -ms-flex-align: center;
  -webkit-box-pack: justify;
  -moz-box-pack: justify;
  box-pack: justify;
  -webkit-justify-content: space-between;
  -moz-justify-content: space-between;
  -ms-justify-content: space-between;
  -o-justify-content: space-between;
  justify-content: space-between;
  -ms-flex-pack: justify; }
  @media only screen and (min-width: 65em) {
    .ko-nav-mobile-header {
      display: none; } }
  html.no-rgba .ko-nav-mobile-header {
    display: none; }
  .desktop-only .ko-nav-mobile-header {
    display: none; }

.ko-mobile-title {
  text-align: center;
  width: 100%;
  font-size: 1.5rem;
  font-family: trade;
  font-weight: bold;
  text-transform: uppercase; }
  .no-flexbox .ko-mobile-title {
    line-height: 3rem; }

.ko-nav {
  position: absolute;
  top: 0;
  height: 100%;
  width: 16rem;
  background-color: #38434F;
  box-shadow: inset 0 0 2rem rgba(35, 42, 49, 0.75);
  -webkit-transition-property: -webkit-transform;
  -moz-transition-property: -moz-transform;
  transition-property: transform;
  -webkit-transition-duration: 0.3s;
  -moz-transition-duration: 0.3s;
  transition-duration: 0.3s; }
  @media only screen and (min-width: 65em) {
    .ko-nav {
      background: none; } }
  .desktop-only .ko-nav {
    background: none; }
  .ko-nav-sub-is-active .ko-nav {
    -webkit-transform: translateX(-100%);
    -moz-transform: translateX(-100%);
    -ms-transform: translateX(-100%);
    -o-transform: translateX(-100%);
    transform: translateX(-100%); }
    @media only screen and (min-width: 65em) {
      .ko-nav-sub-is-active .ko-nav {
        -webkit-transform: translateX(0);
        -moz-transform: translateX(0);
        -ms-transform: translateX(0);
        -o-transform: translateX(0);
        transform: translateX(0); } }
    .desktop-only .ko-nav-sub-is-active .ko-nav {
      -webkit-transform: translateX(0);
      -moz-transform: translateX(0);
      -ms-transform: translateX(0);
      -o-transform: translateX(0);
      transform: translateX(0); }
  .ko-nav-teamswitcher-is-active .ko-nav {
    -webkit-transform: translateX(100%);
    -moz-transform: translateX(100%);
    -ms-transform: translateX(100%);
    -o-transform: translateX(100%);
    transform: translateX(100%); }
    @media only screen and (min-width: 65em) {
      .ko-nav-teamswitcher-is-active .ko-nav {
        -webkit-transform: translateX(0);
        -moz-transform: translateX(0);
        -ms-transform: translateX(0);
        -o-transform: translateX(0);
        transform: translateX(0); } }
    .desktop-only .ko-nav-teamswitcher-is-active .ko-nav {
      -webkit-transform: translateX(0);
      -moz-transform: translateX(0);
      -ms-transform: translateX(0);
      -o-transform: translateX(0);
      transform: translateX(0); }
  @media only screen and (min-width: 65em) {
    .ko-nav {
      position: relative;
      width: 100%;
      height: 3rem;
      background-color: #232A31;
      overflow: visible;
      display: -webkit-box;
      display: -moz-box;
      display: box;
      display: -webkit-flex;
      display: -moz-flex;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
      -moz-box-align: center;
      box-align: center;
      -webkit-align-items: center;
      -moz-align-items: center;
      -ms-align-items: center;
      -o-align-items: center;
      align-items: center;
      -ms-flex-align: center;
      -webkit-box-pack: justify;
      -moz-box-pack: justify;
      box-pack: justify;
      -webkit-justify-content: space-between;
      -moz-justify-content: space-between;
      -ms-justify-content: space-between;
      -o-justify-content: space-between;
      justify-content: space-between;
      -ms-flex-pack: justify; } }
  html.no-rgba .ko-nav {
    position: relative;
    width: 100%;
    height: 3rem;
    background-color: #232A31;
    overflow: visible;
    display: -webkit-box;
    display: -moz-box;
    display: box;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -moz-box-align: center;
    box-align: center;
    -webkit-align-items: center;
    -moz-align-items: center;
    -ms-align-items: center;
    -o-align-items: center;
    align-items: center;
    -ms-flex-align: center;
    -webkit-box-pack: justify;
    -moz-box-pack: justify;
    box-pack: justify;
    -webkit-justify-content: space-between;
    -moz-justify-content: space-between;
    -ms-justify-content: space-between;
    -o-justify-content: space-between;
    justify-content: space-between;
    -ms-flex-pack: justify; }
  .desktop-only .ko-nav {
    position: relative;
    width: 100%;
    height: 3rem;
    background-color: #232A31;
    overflow: visible;
    display: -webkit-box;
    display: -moz-box;
    display: box;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -moz-box-align: center;
    box-align: center;
    -webkit-align-items: center;
    -moz-align-items: center;
    -ms-align-items: center;
    -o-align-items: center;
    align-items: center;
    -ms-flex-align: center;
    -webkit-box-pack: justify;
    -moz-box-pack: justify;
    box-pack: justify;
    -webkit-justify-content: space-between;
    -moz-justify-content: space-between;
    -ms-justify-content: space-between;
    -o-justify-content: space-between;
    justify-content: space-between;
    -ms-flex-pack: justify; }
  .no-flexbox .ko-nav::after {
    clear: both;
    content: "";
    display: table; }

.no-flexbox .ko-nav {
  display: block !important; }

@media only screen and (min-width: 65em) {
  .ko-nav-right,
  .ko-nav-left {
    display: -webkit-box;
    display: -moz-box;
    display: box;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -moz-box-align: center;
    box-align: center;
    -webkit-align-items: center;
    -moz-align-items: center;
    -ms-align-items: center;
    -o-align-items: center;
    align-items: center;
    -ms-flex-align: center; }
    .no-flexbox .ko-nav-right::after, .no-flexbox
    .ko-nav-left::after {
      clear: both;
      content: "";
      display: table; } }

.desktop-only .ko-nav-right, .desktop-only
.ko-nav-left {
  display: -webkit-box;
  display: -moz-box;
  display: box;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -moz-box-align: center;
  box-align: center;
  -webkit-align-items: center;
  -moz-align-items: center;
  -ms-align-items: center;
  -o-align-items: center;
  align-items: center;
  -ms-flex-align: center; }
  .no-flexbox .desktop-only .ko-nav-right::after, .no-flexbox .desktop-only
  .ko-nav-left::after {
    clear: both;
    content: "";
    display: table; }

@media only screen and (min-width: 65em) {
  .ko-nav-right > li,
  .ko-nav-left > li {
    position: relative; }
    .no-flexbox .ko-nav-right > li, .no-flexbox
    .ko-nav-left > li {
      float: left; } }

.desktop-only .ko-nav-right > li, .desktop-only
.ko-nav-left > li {
  position: relative; }
  .no-flexbox .desktop-only .ko-nav-right > li, .no-flexbox .desktop-only
  .ko-nav-left > li {
    float: left; }

.ko-nav-right > li:hover > a,
.ko-nav-left > li:hover > a {
  background-color: rgba(255, 255, 255, 0.1); }
  @media only screen and (min-width: 65em) {
    .ko-nav-right > li:hover > a,
    .ko-nav-left > li:hover > a {
      background-color: #181d22; } }
  .desktop-only .ko-nav-right > li:hover > a, .desktop-only
  .ko-nav-left > li:hover > a {
    background-color: #181d22; }

@media only screen and (min-width: 65em) {
  .ko-nav-right > li:hover ul,
  .ko-nav-left > li:hover ul {
    top: 100%;
    height: auto;
    opacity: .99;
    -webkit-transition: opacity 0.2s;
    -moz-transition: opacity 0.2s;
    transition: opacity 0.2s; } }

.desktop-only .ko-nav-right > li:hover ul, .desktop-only
.ko-nav-left > li:hover ul {
  top: 100%;
  height: auto;
  opacity: .99;
  -webkit-transition: opacity 0.2s;
  -moz-transition: opacity 0.2s;
  transition: opacity 0.2s; }

.ko-nav-right > li > a,
.ko-nav-left > li > a {
  padding: 0.75rem;
  width: 16rem;
  display: -webkit-box;
  display: -moz-box;
  display: box;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -moz-box-align: center;
  box-align: center;
  -webkit-align-items: center;
  -moz-align-items: center;
  -ms-align-items: center;
  -o-align-items: center;
  align-items: center;
  -ms-flex-align: center;
  -webkit-transition: 0.2s;
  -moz-transition: 0.2s;
  transition: 0.2s; }
  .no-flexbox .ko-nav-right > li > a, .no-flexbox
  .ko-nav-left > li > a {
    display: block; }
  @media only screen and (min-width: 65em) {
    .ko-nav-right > li > a,
    .ko-nav-left > li > a {
      padding: 0 0.75rem;
      color: #FFFFFF;
      height: 3rem;
      width: auto; }
      .no-flexbox .ko-nav-right > li > a, .no-flexbox
      .ko-nav-left > li > a {
        line-height: 3rem; } }
  .desktop-only .ko-nav-right > li > a, .desktop-only
  .ko-nav-left > li > a {
    padding: 0 0.75rem;
    color: #FFFFFF;
    height: 3rem;
    width: auto; }
    .no-flexbox .desktop-only .ko-nav-right > li > a, .no-flexbox .desktop-only
    .ko-nav-left > li > a {
      line-height: 3rem; }

@media only screen and (min-width: 65em) {
  .ko-nav-right > li > ul,
  .ko-nav-left > li > ul {
    height: 0; } }

.desktop-only .ko-nav-right > li > ul, .desktop-only
.ko-nav-left > li > ul {
  height: 0; }

.no-flexbox .ko-nav-left {
  float: left; }

.no-flexbox .ko-nav-right {
  float: right; }

#message-link {
  display: none; }
  @media only screen and (min-width: 65em) {
    #message-link {
      display: -webkit-box;
      display: -moz-box;
      display: box;
      display: -webkit-flex;
      display: -moz-flex;
      display: -ms-flexbox;
      display: flex; } }
  .desktop-only #message-link {
    display: -webkit-box;
    display: -moz-box;
    display: box;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flexbox;
    display: flex; }

.ko-nav-sub, .ko-nav-sub-double {
  position: absolute;
  top: -2000%;
  left: 100%;
  background-color: #38434F;
  -webkit-transition: top 0 ease 0.2s;
  -moz-transition: top 0 ease 0.2s;
  transition: top 0 ease 0.2s; }
  @media only screen and (min-width: 65em) {
    .ko-nav-sub, .ko-nav-sub-double {
      background: none; } }
  .desktop-only .ko-nav-sub, .desktop-only .ko-nav-sub-double {
    background: none; }
  .ko-nav-sub.ko-nav-sub-is-active, .ko-nav-sub-is-active.ko-nav-sub-double, .ko-nav-sub.ko-nav-teamswitcher-is-active, .ko-nav-teamswitcher-is-active.ko-nav-sub-double {
    top: 0;
    height: 100%;
    -webkit-transition: top 0 ease 0;
    -moz-transition: top 0 ease 0;
    transition: top 0 ease 0; }
    @media only screen and (min-width: 65em) {
      .ko-nav-sub.ko-nav-sub-is-active, .ko-nav-sub-is-active.ko-nav-sub-double, .ko-nav-sub.ko-nav-teamswitcher-is-active, .ko-nav-teamswitcher-is-active.ko-nav-sub-double {
        top: -2000%;
        height: auto; } }
    .desktop-only .ko-nav-sub.ko-nav-sub-is-active, .desktop-only .ko-nav-sub-is-active.ko-nav-sub-double, .desktop-only .ko-nav-sub.ko-nav-teamswitcher-is-active, .desktop-only .ko-nav-teamswitcher-is-active.ko-nav-sub-double {
      top: -2000%;
      height: auto; }
  @media only screen and (min-width: 65em) {
    .ko-nav-sub, .ko-nav-sub-double {
      left: 0;
      right: auto;
      opacity: 0;
      height: auto;
      background-color: #181d22;
      z-index: 100;
      padding: 0.5rem 0;
      display: block;
      overflow: hidden; } }
  .desktop-only .ko-nav-sub, .desktop-only .ko-nav-sub-double {
    left: 0;
    right: auto;
    opacity: 0;
    height: auto;
    background-color: #181d22;
    z-index: 100;
    padding: 0.5rem 0;
    display: block;
    overflow: hidden; }
  .ko-nav-sub li > a, .ko-nav-sub-double li > a {
    width: 16rem;
    padding: 0.75rem;
    display: block;
    display: -webkit-box;
    display: -moz-box;
    display: box;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -moz-box-align: center;
    box-align: center;
    -webkit-align-items: center;
    -moz-align-items: center;
    -ms-align-items: center;
    -o-align-items: center;
    align-items: center;
    -ms-flex-align: center; }
    @media only screen and (min-width: 65em) {
      .ko-nav-sub li > a, .ko-nav-sub-double li > a {
        width: 10rem;
        height: auto;
        padding: 0.5rem 0.75rem;
        float: left; } }
    .desktop-only .ko-nav-sub li > a, .desktop-only .ko-nav-sub-double li > a {
      width: 10rem;
      height: auto;
      padding: 0.5rem 0.75rem;
      float: left; }
    .ko-nav-sub li > a:hover, .ko-nav-sub-double li > a:hover {
      background-color: rgba(255, 255, 255, 0.1); }
      @media only screen and (min-width: 65em) {
        .ko-nav-sub li > a:hover, .ko-nav-sub-double li > a:hover {
          color: #FF6600;
          background-color: transparent; }
          .ko-nav-sub li > a:hover svg, .ko-nav-sub-double li > a:hover svg, .ko-nav-sub li > a:hover path, .ko-nav-sub-double li > a:hover path, .ko-nav-sub li > a:hover polygon, .ko-nav-sub-double li > a:hover polygon {
            fill: #FF6600; } }
      .desktop-only .ko-nav-sub li > a:hover, .desktop-only .ko-nav-sub-double li > a:hover {
        color: #FF6600;
        background-color: transparent; }
        .desktop-only .ko-nav-sub li > a:hover svg, .desktop-only .ko-nav-sub-double li > a:hover svg, .desktop-only .ko-nav-sub li > a:hover path, .desktop-only .ko-nav-sub-double li > a:hover path, .desktop-only .ko-nav-sub li > a:hover polygon, .desktop-only .ko-nav-sub-double li > a:hover polygon {
          fill: #FF6600; }
  .ko-nav-sub.ko-nav-teamswitcher, .ko-nav-teamswitcher.ko-nav-sub-double {
    right: 100%;
    left: auto;
    width: 100%;
    height: 100%;
    box-shadow: inset 0 0 2rem rgba(35, 42, 49, 0.75); }
    @media only screen and (min-width: 65em) {
      .ko-nav-sub.ko-nav-teamswitcher, .ko-nav-teamswitcher.ko-nav-sub-double {
        right: auto;
        left: 0;
        width: auto; } }
    .desktop-only .ko-nav-sub.ko-nav-teamswitcher, .desktop-only .ko-nav-teamswitcher.ko-nav-sub-double {
      right: auto;
      left: 0;
      width: auto; }
    .ko-nav-sub.ko-nav-teamswitcher > li > a, .ko-nav-teamswitcher.ko-nav-sub-double > li > a {
      width: calc(100% - 1px);
      text-overflow: ellipsis;
      white-space: nowrap;
      overflow: hidden; }
    .ko-nav-sub.ko-nav-teamswitcher > .ko-nav-teamswitcher-school, .ko-nav-teamswitcher.ko-nav-sub-double > .ko-nav-teamswitcher-school {
      color: #8A8A8A;
      margin: .5rem .8rem 0rem .8rem;
      font-size: 0.8rem;
      font-weight: bold; }
  @media only screen and (min-width: 65em) {
    .ko-nav-sub.ko-nav-sub-profile li > a, .ko-nav-sub-profile.ko-nav-sub-double li > a {
      width: 12.5rem; } }
  .desktop-only .ko-nav-sub.ko-nav-sub-profile li > a, .desktop-only .ko-nav-sub-profile.ko-nav-sub-double li > a {
    width: 12.5rem; }

.ko-nav-sub-double {
  width: 100%;
  height: 100%;
  box-shadow: inset 0 0 2rem rgba(35, 42, 49, 0.75); }
  @media only screen and (min-width: 65em) {
    .ko-nav-sub-double {
      width: 25rem;
      height: auto; } }
  .desktop-only .ko-nav-sub-double {
    width: 25rem;
    height: auto; }

@media only screen and (min-width: 65em) {
  .ko-nav-anchor-right {
    left: auto;
    right: 0; } }

.desktop-only .ko-nav-anchor-right {
  left: auto;
  right: 0; }

@media only screen and (min-width: 65em) {
  .ko-nav-account .ko-nav-icon {
    display: none; } }

.desktop-only .ko-nav-account .ko-nav-icon {
  display: none; }

.ko-nav-account .ko-nav-account-arrow {
  display: none;
  margin: 1rem 0 1rem 1rem; }
  @media only screen and (min-width: 65em) {
    .ko-nav-account .ko-nav-account-arrow {
      display: block; }
      .no-flexbox .ko-nav-account .ko-nav-account-arrow {
        float: left; } }
  .desktop-only .ko-nav-account .ko-nav-account-arrow {
    display: block; }
    .no-flexbox .desktop-only .ko-nav-account .ko-nav-account-arrow {
      float: left; }

@media only screen and (min-width: 65em) {
  .no-flexbox .ko-nav-username {
    float: left; } }

.desktop-only .no-flexbox .ko-nav-username {
  float: left; }

.ko-nav-avatar {
  display: none;
  width: 2rem;
  height: 2rem;
  border: 1px solid #FFFFFF;
  border-radius: 50%;
  margin: 0 0.75rem; }
  .ko-nav-avatar svg {
    fill: #FFFFFF; }
  @media only screen and (min-width: 65em) {
    .ko-nav-avatar {
      display: block; }
      .no-flexbox .ko-nav-avatar {
        float: left;
        margin-top: .5rem; } }
  .desktop-only .ko-nav-avatar {
    display: block; }
    .no-flexbox .desktop-only .ko-nav-avatar {
      float: left;
      margin-top: .5rem; }

@media only screen and (min-width: 65em) {
  .no-flexbox .ko-nav-account-arrow {
    float: left;
    height: 3rem; } }

.no-flexbox .desktop-only .ko-nav-account-arrow {
  float: left;
  height: 3rem; }

@media only screen and (min-width: 65em) {
  li a.ko-nav-help {
    min-width: 3rem;
    height: 3rem;
    width: 3rem;
    font-weight: bold;
    border-left: 1px solid rgba(255, 255, 255, 0.1);
    display: -webkit-box;
    display: -moz-box;
    display: box;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -moz-box-align: center;
    box-align: center;
    -webkit-align-items: center;
    -moz-align-items: center;
    -ms-align-items: center;
    -o-align-items: center;
    align-items: center;
    -ms-flex-align: center;
    -webkit-box-pack: center;
    -moz-box-pack: center;
    box-pack: center;
    -webkit-justify-content: center;
    -moz-justify-content: center;
    -ms-justify-content: center;
    -o-justify-content: center;
    justify-content: center;
    -ms-flex-pack: center;
    -webkit-transition: 0.2s;
    -moz-transition: 0.2s;
    transition: 0.2s; }
    li a.ko-nav-help:hover {
      background-color: #181d22; }
    li a.ko-nav-help svg, li a.ko-nav-help path, li a.ko-nav-help polygon {
      fill: #FF6600; }
    .no-flexbox li a.ko-nav-help::after {
      clear: both;
      content: "";
      display: table; }
    .no-flexbox li a.ko-nav-help svg,
    .no-flexbox li a.ko-nav-help span,
    .no-flexbox li a.ko-nav-help img {
      height: 3rem;
      line-height: 3rem;
      vertical-align: middle;
      float: left; }
    li a.ko-nav-help .ko-nav-icon {
      width: 1.25rem;
      height: 1.25rem;
      margin-right: 0; } }

.desktop-only li a.ko-nav-help {
  min-width: 3rem;
  height: 3rem;
  width: 3rem;
  font-weight: bold;
  border-left: 1px solid rgba(255, 255, 255, 0.1);
  display: -webkit-box;
  display: -moz-box;
  display: box;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -moz-box-align: center;
  box-align: center;
  -webkit-align-items: center;
  -moz-align-items: center;
  -ms-align-items: center;
  -o-align-items: center;
  align-items: center;
  -ms-flex-align: center;
  -webkit-box-pack: center;
  -moz-box-pack: center;
  box-pack: center;
  -webkit-justify-content: center;
  -moz-justify-content: center;
  -ms-justify-content: center;
  -o-justify-content: center;
  justify-content: center;
  -ms-flex-pack: center;
  -webkit-transition: 0.2s;
  -moz-transition: 0.2s;
  transition: 0.2s; }
  .desktop-only li a.ko-nav-help:hover {
    background-color: #181d22; }
  .desktop-only li a.ko-nav-help svg, .desktop-only li a.ko-nav-help path, .desktop-only li a.ko-nav-help polygon {
    fill: #FF6600; }
  .no-flexbox .desktop-only li a.ko-nav-help::after {
    clear: both;
    content: "";
    display: table; }
  .no-flexbox .desktop-only li a.ko-nav-help svg,
  .no-flexbox .desktop-only li a.ko-nav-help span,
  .no-flexbox .desktop-only li a.ko-nav-help img {
    height: 3rem;
    line-height: 3rem;
    vertical-align: middle;
    float: left; }
  .desktop-only li a.ko-nav-help .ko-nav-icon {
    width: 1.25rem;
    height: 1.25rem;
    margin-right: 0; }

@media only screen and (min-width: 65em) {
  .ko-nav-mobile-label {
    display: none; } }

.desktop-only .ko-nav-mobile-label {
  display: none; }

.ko-sub-nav-heading, .ko-sub-nav-heading-current-team {
  width: 16rem;
  padding: 0.75rem;
  height: 3rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  display: -webkit-box;
  display: -moz-box;
  display: box;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -moz-box-align: center;
  box-align: center;
  -webkit-align-items: center;
  -moz-align-items: center;
  -ms-align-items: center;
  -o-align-items: center;
  align-items: center;
  -ms-flex-align: center;
  -webkit-transition: 0.2s;
  -moz-transition: 0.2s;
  transition: 0.2s;
  font-family: trade;
  font-weight: bold;
  text-transform: uppercase; }
  .no-flexbox .ko-sub-nav-heading, .no-flexbox .ko-sub-nav-heading-current-team {
    display: block; }
    .no-flexbox .ko-sub-nav-heading svg, .no-flexbox .ko-sub-nav-heading-current-team svg {
      position: relative;
      top: 0.1875rem; }
  .ko-sub-nav-heading svg, .ko-sub-nav-heading-current-team svg {
    height: 1rem;
    width: 1rem;
    margin-right: 0.5rem; }
    .ko-sub-nav-heading svg path, .ko-sub-nav-heading-current-team svg path {
      fill: #FF6600; }
  @media only screen and (min-width: 65em) {
    .ko-sub-nav-heading, .ko-sub-nav-heading-current-team {
      display: none; } }
  .desktop-only .ko-sub-nav-heading, .desktop-only .ko-sub-nav-heading-current-team {
    display: none; }

.ko-sub-nav-heading-current-team {
  color: #FF6600 !important;
  cursor: pointer;
  -webkit-box-pack: justify;
  -moz-box-pack: justify;
  box-pack: justify;
  -webkit-justify-content: space-between;
  -moz-justify-content: space-between;
  -ms-justify-content: space-between;
  -o-justify-content: space-between;
  justify-content: space-between;
  -ms-flex-pack: justify; }
  .ko-sub-nav-heading-current-team .ko-nav-icon path {
    fill: #FF6600; }
  .no-flexbox .ko-sub-nav-heading-current-team .ko-nav-icon {
    margin-left: .5rem;
    position: relative;
    top: 0.1875rem; }

html.ko-sidemenu-left-is-open {
  overflow: hidden; }
  @media only screen and (min-width: 65em) {
    html.ko-sidemenu-left-is-open {
      overflow: auto; } }
  .desktop-only html.ko-sidemenu-left-is-open {
    overflow: auto; }

.ko-wrap {
  background-color: #FFFFFF;
  z-index: 1;
  position: relative;
  display: -webkit-box;
  display: -moz-box;
  display: box;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -moz-box-orient: vertical;
  box-orient: vertical;
  -webkit-box-direction: normal;
  -moz-box-direction: normal;
  box-direction: normal;
  -webkit-flex-direction: column;
  -moz-flex-direction: column;
  flex-direction: column;
  -ms-flex-direction: column;
  -webkit-transition: 0.3s;
  -moz-transition: 0.3s;
  transition: 0.3s; }
  .ko-sidemenu-left-is-open .ko-wrap {
    -webkit-transform: translateX(16rem);
    -moz-transform: translateX(16rem);
    -ms-transform: translateX(16rem);
    -o-transform: translateX(16rem);
    transform: translateX(16rem);
    overflow: hidden; }
    @media only screen and (min-width: 65em) {
      .ko-sidemenu-left-is-open .ko-wrap {
        -webkit-transform: translateX(0);
        -moz-transform: translateX(0);
        -ms-transform: translateX(0);
        -o-transform: translateX(0);
        transform: translateX(0);
        overflow: auto; } }
    .desktop-only .ko-sidemenu-left-is-open .ko-wrap {
      -webkit-transform: translateX(0);
      -moz-transform: translateX(0);
      -ms-transform: translateX(0);
      -o-transform: translateX(0);
      transform: translateX(0);
      overflow: auto; }

/*
    1. Fix for Chrome 43's "ignoring the height rule bug" that appears
       to be fixed in Chrome 44.
       (https://code.google.com/p/chromium/issues/detail?id=484575)
*/
.ko-subheader {
  background-color: #38434F;
  color: #FFFFFF;
  padding: 0 1rem;
  height: 3rem;
  min-height: 3rem;
  display: -webkit-box;
  display: -moz-box;
  display: box;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -moz-box-align: center;
  box-align: center;
  -webkit-align-items: center;
  -moz-align-items: center;
  -ms-align-items: center;
  -o-align-items: center;
  align-items: center;
  -ms-flex-align: center;
  -webkit-box-pack: center;
  -moz-box-pack: center;
  box-pack: center;
  -webkit-justify-content: center;
  -moz-justify-content: center;
  -ms-justify-content: center;
  -o-justify-content: center;
  justify-content: center;
  -ms-flex-pack: center; }
  @media only screen and (min-width: 65em) {
    .ko-subheader {
      height: 4rem;
      min-height: 4rem;
      -webkit-box-pack: justify;
      -moz-box-pack: justify;
      box-pack: justify;
      -webkit-justify-content: space-between;
      -moz-justify-content: space-between;
      -ms-justify-content: space-between;
      -o-justify-content: space-between;
      justify-content: space-between;
      -ms-flex-pack: justify; }
      .no-flexbox .ko-subheader::after {
        clear: both;
        content: "";
        display: table; } }
  html.no-rgba .ko-subheader {
    height: 4rem;
    min-height: 4rem;
    -webkit-box-pack: justify;
    -moz-box-pack: justify;
    box-pack: justify;
    -webkit-justify-content: space-between;
    -moz-justify-content: space-between;
    -ms-justify-content: space-between;
    -o-justify-content: space-between;
    justify-content: space-between;
    -ms-flex-pack: justify; }
    .no-flexbox html.no-rgba .ko-subheader::after {
      clear: both;
      content: "";
      display: table; }
  .desktop-only .ko-subheader {
    height: 4rem;
    min-height: 4rem;
    -webkit-box-pack: justify;
    -moz-box-pack: justify;
    box-pack: justify;
    -webkit-justify-content: space-between;
    -moz-justify-content: space-between;
    -ms-justify-content: space-between;
    -o-justify-content: space-between;
    justify-content: space-between;
    -ms-flex-pack: justify; }
    .no-flexbox .desktop-only .ko-subheader::after {
      clear: both;
      content: "";
      display: table; }
  .ko-subheader h1 {
    display: none;
    margin-right: 2rem; }
    @media only screen and (min-width: 65em) {
      .ko-subheader h1 {
        display: block;
        color: #FFFFFF;
        font-family: trade;
        font-weight: bold;
        text-transform: uppercase;
        font-size: 2rem; }
        .no-flexbox .ko-subheader h1 {
          float: left; } }
    html.no-rgba .ko-subheader h1 {
      display: block;
      color: #FFFFFF;
      font-family: trade;
      font-weight: bold;
      text-transform: uppercase;
      font-size: 2rem; }
      .no-flexbox html.no-rgba .ko-subheader h1 {
        float: left; }
    .desktop-only .ko-subheader h1 {
      display: block;
      color: #FFFFFF;
      font-family: trade;
      font-weight: bold;
      text-transform: uppercase;
      font-size: 2rem; }
      .no-flexbox .desktop-only .ko-subheader h1 {
        float: left; }
  .ko-subheader > div {
    display: -webkit-inline-box;
    display: -moz-inline-box;
    display: inline-box;
    display: -webkit-inline-flex;
    display: -moz-inline-flex;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
    -moz-box-align: center;
    box-align: center;
    -webkit-align-items: center;
    -moz-align-items: center;
    -ms-align-items: center;
    -o-align-items: center;
    align-items: center;
    -ms-flex-align: center;
    -webkit-box-orient: horizontal;
    -moz-box-orient: horizontal;
    box-orient: horizontal;
    -webkit-box-direction: normal;
    -moz-box-direction: normal;
    box-direction: normal;
    -webkit-flex-direction: row;
    -moz-flex-direction: row;
    flex-direction: row;
    -ms-flex-direction: row;
    -webkit-box-pack: justify;
    -moz-box-pack: justify;
    box-pack: justify;
    -webkit-justify-content: space-between;
    -moz-justify-content: space-between;
    -ms-justify-content: space-between;
    -o-justify-content: space-between;
    justify-content: space-between;
    -ms-flex-pack: justify; }
    .ko-subheader > div::after {
      clear: both;
      content: "";
      display: table; }
    .ko-subheader > div > a {
      color: #FFFFFF;
      padding: 1rem;
      cursor: pointer; }
      @media only screen and (min-width: 65em) {
        .ko-subheader > div > a {
          padding: 1.5rem; } }
      html.no-rgba .ko-subheader > div > a {
        padding: 1.5rem; }
      .desktop-only .ko-subheader > div > a {
        padding: 1.5rem; }
      .ko-subheader > div > a:first-child {
        margin-left: 0; }
      .ko-subheader > div > a:hover {
        background-color: #2d3640;
        color: #FFFFFF; }
      .ko-subheader > div > a.selected {
        background-color: #2d3640;
        font-weight: bold;
        text-transform: uppercase; }

.season-switcher {
  display: -webkit-box;
  display: -moz-box;
  display: box;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -moz-box-align: center;
  box-align: center;
  -webkit-align-items: center;
  -moz-align-items: center;
  -ms-align-items: center;
  -o-align-items: center;
  align-items: center;
  -ms-flex-align: center;
  -webkit-box-pack: distribute;
  -moz-box-pack: distribute;
  box-pack: distribute;
  -webkit-justify-content: space-around;
  -moz-justify-content: space-around;
  -ms-justify-content: space-around;
  -o-justify-content: space-around;
  justify-content: space-around;
  -ms-flex-pack: distribute; }
  .no-flexbox .season-switcher {
    text-align: center; }
    .no-flexbox .season-switcher::after {
      clear: both;
      content: "";
      display: table; }
    @media only screen and (min-width: 65em) {
      .no-flexbox .season-switcher {
        float: right;
        position: relative;
        top: .25rem; } }
    html.no-rgba .no-flexbox .season-switcher {
      float: right;
      position: relative;
      top: .25rem; }
    .desktop-only .no-flexbox .season-switcher {
      float: right;
      position: relative;
      top: .25rem; }
  .season-switcher .selected-season {
    margin: 0 1rem; }
    .no-flexbox .season-switcher .selected-season {
      display: inline-block; }
  .season-switcher .ko-switch-season {
    cursor: pointer;
    display: inline-block;
    height: 4rem;
    padding: 1.5rem 0.5rem; }
    .season-switcher .ko-switch-season:hover svg, .season-switcher .ko-switch-season:hover path {
      fill: #FF6600; }
    .season-switcher .ko-switch-season a {
      display: inline-block;
      height: 4rem; }
    .season-switcher .ko-switch-season svg, .season-switcher .ko-switch-season path {
      fill: #FFFFFF;
      width: 1rem;
      height: 1rem;
      -webkit-transition: 0.2s;
      -moz-transition: 0.2s;
      transition: 0.2s; }
      .no-flexbox .season-switcher .ko-switch-season svg, .no-flexbox .season-switcher .ko-switch-season path {
        display: inline-block;
        position: relative;
        top: .125rem; }
    .season-switcher .ko-switch-season.ko-season-disabled svg, .season-switcher .ko-switch-season.ko-season-disabled path {
      fill: rgba(255, 255, 255, 0.25); }
    .season-switcher .ko-switch-season.ko-season-disabled:hover {
      fill: rgba(255, 255, 255, 0.25);
      cursor: default; }

.ko-col-layout {
  display: -webkit-box;
  display: -moz-box;
  display: box;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 1;
  -moz-box-flex: 1;
  box-flex: 1;
  -webkit-flex: 1;
  -moz-flex: 1;
  -ms-flex: 1;
  flex: 1; }
  .ko-col-layout .ko-two-col-left {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    -webkit-box-flex: 1;
    -moz-box-flex: 1;
    box-flex: 1;
    -webkit-flex: 1;
    -moz-flex: 1;
    -ms-flex: 1;
    flex: 1; }
    @media only screen and (min-width: 37.5em) {
      .ko-col-layout .ko-two-col-left {
        -webkit-box-flex: 2;
        -moz-box-flex: 2;
        box-flex: 2;
        -webkit-flex: 2;
        -moz-flex: 2;
        -ms-flex: 2;
        flex: 2; } }
    html.no-rgba .ko-col-layout .ko-two-col-left {
      -webkit-box-flex: 2;
      -moz-box-flex: 2;
      box-flex: 2;
      -webkit-flex: 2;
      -moz-flex: 2;
      -ms-flex: 2;
      flex: 2; }
    .desktop-only .ko-col-layout .ko-two-col-left {
      -webkit-box-flex: 2;
      -moz-box-flex: 2;
      box-flex: 2;
      -webkit-flex: 2;
      -moz-flex: 2;
      -ms-flex: 2;
      flex: 2; }
    @media only screen and (min-width: 65em) {
      .ko-col-layout .ko-two-col-left {
        -webkit-box-flex: 1;
        -moz-box-flex: 1;
        box-flex: 1;
        -webkit-flex: 1;
        -moz-flex: 1;
        -ms-flex: 1;
        flex: 1; } }
    html.no-rgba .ko-col-layout .ko-two-col-left {
      -webkit-box-flex: 1;
      -moz-box-flex: 1;
      box-flex: 1;
      -webkit-flex: 1;
      -moz-flex: 1;
      -ms-flex: 1;
      flex: 1; }
    .desktop-only .ko-col-layout .ko-two-col-left {
      -webkit-box-flex: 1;
      -moz-box-flex: 1;
      box-flex: 1;
      -webkit-flex: 1;
      -moz-flex: 1;
      -ms-flex: 1;
      flex: 1; }
  .ko-col-layout .ko-two-col-right {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    display: none;
    -webkit-box-flex: 1;
    -moz-box-flex: 1;
    box-flex: 1;
    -webkit-flex: 1;
    -moz-flex: 1;
    -ms-flex: 1;
    flex: 1; }
    @media only screen and (min-width: 37.5em) {
      .ko-col-layout .ko-two-col-right {
        display: block;
        border-left: 1px solid #E8E8E8;
        box-shadow: inset 0 0 10px rgba(35, 42, 49, 0.1);
        -webkit-box-flex: 3;
        -moz-box-flex: 3;
        box-flex: 3;
        -webkit-flex: 3;
        -moz-flex: 3;
        -ms-flex: 3;
        flex: 3; } }
    html.no-rgba .ko-col-layout .ko-two-col-right {
      display: block;
      border-left: 1px solid #E8E8E8;
      box-shadow: inset 0 0 10px rgba(35, 42, 49, 0.1);
      -webkit-box-flex: 3;
      -moz-box-flex: 3;
      box-flex: 3;
      -webkit-flex: 3;
      -moz-flex: 3;
      -ms-flex: 3;
      flex: 3; }
    .desktop-only .ko-col-layout .ko-two-col-right {
      display: block;
      border-left: 1px solid #E8E8E8;
      box-shadow: inset 0 0 10px rgba(35, 42, 49, 0.1);
      -webkit-box-flex: 3;
      -moz-box-flex: 3;
      box-flex: 3;
      -webkit-flex: 3;
      -moz-flex: 3;
      -ms-flex: 3;
      flex: 3; }
    @media only screen and (min-width: 65em) {
      .ko-col-layout .ko-two-col-right {
        -webkit-box-flex: 2;
        -moz-box-flex: 2;
        box-flex: 2;
        -webkit-flex: 2;
        -moz-flex: 2;
        -ms-flex: 2;
        flex: 2; } }
    html.no-rgba .ko-col-layout .ko-two-col-right {
      -webkit-box-flex: 2;
      -moz-box-flex: 2;
      box-flex: 2;
      -webkit-flex: 2;
      -moz-flex: 2;
      -ms-flex: 2;
      flex: 2; }
    .desktop-only .ko-col-layout .ko-two-col-right {
      -webkit-box-flex: 2;
      -moz-box-flex: 2;
      box-flex: 2;
      -webkit-flex: 2;
      -moz-flex: 2;
      -ms-flex: 2;
      flex: 2; }
  .ko-col-layout .ko-three-col-left,
  .ko-col-layout .ko-three-col-middle,
  .ko-col-layout .ko-three-col-right {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    -webkit-box-flex: 1;
    -moz-box-flex: 1;
    box-flex: 1;
    -webkit-flex: 1;
    -moz-flex: 1;
    -ms-flex: 1;
    flex: 1; }
  .ko-col-layout .ko-three-col-middle,
  .ko-col-layout .ko-three-col-right {
    border-left: 1px solid #E8E8E8;
    box-shadow: inset 0 0 10px rgba(35, 42, 49, 0.1); }

@font-face {
  font-family: trade;
  font-style: normal;
  font-weight: normal;
  src: url("//d3hhcdv9i08ck8.cloudfront.net/trade-gothic/regular/regular.eot?#iefix") format("embedded-opentype"), url("//d3hhcdv9i08ck8.cloudfront.net/trade-gothic/regular/regular.woff") format("woff"), url("//d3hhcdv9i08ck8.cloudfront.net/trade-gothic/regular/regular.ttf") format("truetype"), url("//d3hhcdv9i08ck8.cloudfront.net/trade-gothic/regular/regular.svg#trade") format("svg"); }

@font-face {
  font-family: trade;
  font-style: italic;
  font-weight: normal;
  src: url("//d3hhcdv9i08ck8.cloudfront.net/trade-gothic/regular-oblique/regular-oblique.eot?#iefix") format("embedded-opentype"), url("//d3hhcdv9i08ck8.cloudfront.net/trade-gothic/regular-oblique/regular-oblique.woff") format("woff"), url("//d3hhcdv9i08ck8.cloudfront.net/trade-gothic/regular-oblique/regular-oblique.ttf") format("truetype"), url("//d3hhcdv9i08ck8.cloudfront.net/trade-gothic/regular-oblique/regular-oblique.svg#trade") format("svg"); }

@font-face {
  font-family: trade;
  font-style: normal;
  font-weight: bold;
  src: url("//d3hhcdv9i08ck8.cloudfront.net/trade-gothic/bold-one/bold.eot?#iefix") format("embedded-opentype"), url("//d3hhcdv9i08ck8.cloudfront.net/trade-gothic/bold-one/bold.woff") format("woff"), url("//d3hhcdv9i08ck8.cloudfront.net/trade-gothic/bold-one/bold.ttf") format("truetype"), url("//d3hhcdv9i08ck8.cloudfront.net/trade-gothic/bold-one/bold.svg#trade") format("svg"); }

@font-face {
  font-family: trade;
  font-style: italic;
  font-weight: bold;
  src: url("//d3hhcdv9i08ck8.cloudfront.net/trade-gothic/bold-oblique/bold-oblique.eot?#iefix") format("embedded-opentype"), url("//d3hhcdv9i08ck8.cloudfront.net/trade-gothic/bold-oblique/bold-oblique.woff") format("woff"), url("//d3hhcdv9i08ck8.cloudfront.net/trade-gothic/bold-oblique/bold-oblique.ttf") format("truetype"), url("//d3hhcdv9i08ck8.cloudfront.net/trade-gothic/bold-oblique/bold-oblique.svg#trade") format("svg"); }

@font-face {
  font-family: trade-condensed;
  font-style: normal;
  font-weight: normal;
  src: url("//d3hhcdv9i08ck8.cloudfront.net/trade-gothic/condensed/condensed.eot?#iefix") format("embedded-opentype"), url("//d3hhcdv9i08ck8.cloudfront.net/trade-gothic/condensed/condensed.woff") format("woff"), url("//d3hhcdv9i08ck8.cloudfront.net/trade-gothic/condensed/condensed.ttf") format("truetype"), url("//d3hhcdv9i08ck8.cloudfront.net/trade-gothic/condensed/condensed.svg#trade-condensed") format("svg"); }

@font-face {
  font-family: trade-condensed;
  font-style: oblique;
  font-weight: normal;
  src: url("//d3hhcdv9i08ck8.cloudfront.net/trade-gothic/condensed-oblique/condensed-oblique.eot?#iefix") format("embedded-opentype"), url("//d3hhcdv9i08ck8.cloudfront.net/trade-gothic/condensed-oblique/condensed-oblique.woff") format("woff"), url("//d3hhcdv9i08ck8.cloudfront.net/trade-gothic/condensed-oblique/condensed-oblique.ttf") format("truetype"), url("//d3hhcdv9i08ck8.cloudfront.net/trade-gothic/condensed-oblique/condensed-oblique.svg#trade-condensed") format("svg"); }

@font-face {
  font-family: trade-condensed;
  font-style: normal;
  font-weight: bold;
  src: url("//d3hhcdv9i08ck8.cloudfront.net/trade-gothic/condensed-bold/condensed-bold.eot?#iefix") format("embedded-opentype"), url("//d3hhcdv9i08ck8.cloudfront.net/trade-gothic/condensed-bold/condensed-bold.woff") format("woff"), url("//d3hhcdv9i08ck8.cloudfront.net/trade-gothic/condensed-bold/condensed-bold.ttf") format("truetype"), url("//d3hhcdv9i08ck8.cloudfront.net/trade-gothic/condensed-bold/condensed-bold.svg#trade-condensed") format("svg"); }

@font-face {
  font-family: trade-condensed;
  font-style: oblique;
  font-weight: bold;
  src: url("//d3hhcdv9i08ck8.cloudfront.net/trade-gothic/condensed-bold-oblique/condensed-bold-oblique.eot?#iefix") format("embedded-opentype"), url("//d3hhcdv9i08ck8.cloudfront.net/trade-gothic/condensed-bold-oblique/condensed-bold-oblique.woff") format("woff"), url("//d3hhcdv9i08ck8.cloudfront.net/trade-gothic/condensed-bold-oblique/condensed-bold-oblique.ttf") format("truetype"), url("//d3hhcdv9i08ck8.cloudfront.net/trade-gothic/condensed-bold-oblique/condensed-bold-oblique.svg#trade-condensed") format("svg"); }

@font-face {
  font-family: trade-heavy;
  font-style: normal;
  font-weight: bold;
  src: url("//d3hhcdv9i08ck8.cloudfront.net/trade-gothic/heavy/heavy.eot?#iefix") format("embedded-opentype"), url("//d3hhcdv9i08ck8.cloudfront.net/trade-gothic/heavy/heavy.woff") format("woff"), url("//d3hhcdv9i08ck8.cloudfront.net/trade-gothic/heavy/heavy.ttf") format("truetype"), url("//d3hhcdv9i08ck8.cloudfront.net/trade-gothic/heavy/heavy.svg#trade-heavy") format("svg"); }

@font-face {
  font-family: trade-heavy-condensed;
  font-style: normal;
  font-weight: bold;
  src: url("//d3hhcdv9i08ck8.cloudfront.net/trade-gothic/condensed-heavy/condensed-heavy.eot?#iefix") format("embedded-opentype"), url("//d3hhcdv9i08ck8.cloudfront.net/trade-gothic/condensed-heavy/condensed-heavy.woff") format("woff"), url("//d3hhcdv9i08ck8.cloudfront.net/trade-gothic/condensed-heavy/condensed-heavy.ttf") format("truetype"), url("//d3hhcdv9i08ck8.cloudfront.net/trade-gothic/condensed-heavy/condensed-heavy.svg#trade-heavy-condensed") format("svg"); }

/*doc
---
title: Buttons
name: buttons
category: Elements
---

These are the default button styles that should be used throughout Hudl. A few notes:
  - We use **Title Case** on our buttons.
  - Feel free to use an icon with the button
  - Your **element** doesn't really matter (you can use an `<a>` or a `<button>` or a `<div>`)
  - You can disable a button by either adding the `disabled` attribute or by adding a class of `disabled`

### Inline Block Usage

Buttons are inline-block by default. If you need several inline-block buttons, wrap them in a container with a class `btn-inline-group` to give them a little margin.

```html_example
<div class="btn-inline-group">
    <button class="btn-primary">Primary</button>
    <a href="#" class="btn-default">Everyday Action</a>
    <div class="btn-default disabled">Can't Click</div>
    <button class="btn-primary" disabled>Won't Click</button>
    <span class="btn-cancel">Cancel</span> <!-- You can also use btn-text -->
</div>
```

### Block Usage

Add an additional class of `btn-block` for a button that fills its container

```html_example
<button class="btn-primary btn-block">Primary</button>
```

### Loading Buttons

Add an additional class of `btn-loading` to get a spinner on a button!

```html_example
<div class="btn-inline-group">
    <button class="btn-default btn-loading" disabled>It's Happening!</button>
    <button class="btn-primary btn-loading" disabled>It's Really Happening!</button>
</div>
```

### Icons in Buttons

Throw an `<img>` in a button, no problem.

```html_example
<div class="btn-inline-group">
    <button class="btn-default">
        <img src="icons/add.svg">Create an Event
    </button>
    <button class="btn-danger">
        <img src="icons/delete.svg">Delete an Event
    </button>
    <button class="btn-primary">
        <img src="icons/clip.svg">Watch this thing
    </button>
</div>
```

Want a vanilla flat icon button? Use `btn-plain`.

```html_example
<button class="btn-plain">
    <img src="icons/home.svg">
</button>
```

### Other Buttons

A few other default styles for your use.

```html_example
<div class="btn-inline-group">
<button class="btn-danger">Deleting Something</button>
<button class="btn-confirmation">Success!</button>
</div>
```

*/
.btn-plain, .btn-default, .btn-white, .btn-primary, .btn-danger, .btn-confirmation, .btn-cancel,
.btn-text {
  color: #232A31;
  background-color: transparent;
  border: none;
  display: inline-block;
  font-size: 100%;
  margin: 0;
  padding: 0;
  cursor: pointer;
  text-decoration: none;
  font-weight: normal;
  position: relative;
  box-shadow: none;
  line-height: 1rem;
  -webkit-appearance: none;
  -moz-appearance: none;
  -ms-appearance: none;
  -o-appearance: none;
  appearance: none; }
  .btn-plain svg, .btn-default svg, .btn-white svg, .btn-primary svg, .btn-danger svg, .btn-confirmation svg, .btn-cancel svg,
  .btn-text svg,
  .btn-plain path, .btn-default path, .btn-white path, .btn-primary path, .btn-danger path, .btn-confirmation path, .btn-cancel path,
  .btn-text path,
  .btn-plain polygon, .btn-default polygon, .btn-white polygon, .btn-primary polygon, .btn-danger polygon, .btn-confirmation polygon, .btn-cancel polygon,
  .btn-text polygon {
    width: 1rem;
    height: 1rem;
    fill: #8A8A8A; }
  .btn-inline-group .btn-plain, .btn-inline-group .btn-default, .btn-inline-group .btn-white, .btn-inline-group .btn-primary, .btn-inline-group .btn-danger, .btn-inline-group .btn-confirmation, .btn-inline-group .btn-cancel, .btn-inline-group
  .btn-text {
    margin-left: .5rem; }
    .btn-inline-group .btn-plain:first-child, .btn-inline-group .btn-default:first-child, .btn-inline-group .btn-white:first-child, .btn-inline-group .btn-primary:first-child, .btn-inline-group .btn-danger:first-child, .btn-inline-group .btn-confirmation:first-child, .btn-inline-group .btn-cancel:first-child, .btn-inline-group
    .btn-text:first-child {
      margin-left: 0; }

.btn-default, .btn-white, .btn-primary, .btn-danger, .btn-confirmation, .btn-cancel,
.btn-text {
  font-weight: bold;
  font-family: trade;
  font-size: 1rem;
  padding: .75rem;
  border: 0.0625rem solid transparent;
  width: auto;
  vertical-align: top; }
  .btn-default svg, .btn-white svg, .btn-primary svg, .btn-danger svg, .btn-confirmation svg, .btn-cancel svg,
  .btn-text svg {
    width: .75rem;
    height: .75rem;
    margin-right: .5rem; }

.btn-default {
  box-shadow: 0 0.0625rem 0 0 #dddddd;
  border-radius: 0.125rem;
  border-color: #e9e9e9;
  border-style: solid;
  background-color: #F5F5F5;
  background-image: -webkit-linear-gradient(#F5F5F5, #f0f0f0);
  background-image: linear-gradient(#F5F5F5, #f0f0f0);
  color: #232A31; }
  .btn-default.btn-loading {
    padding-left: 3rem;
    -webkit-transition: 0.2s;
    -moz-transition: 0.2s;
    transition: 0.2s; }
    .btn-default.btn-loading.btn-block {
      padding-left: .75rem; }
      .btn-default.btn-loading.btn-block:after {
        left: .75rem; }
    .btn-default.btn-loading img, .btn-default.btn-loading svg {
      display: none; }
    .btn-default.btn-loading:disabled,
    .btn-default.btn-loading .disabled {
      opacity: 1; }
    .btn-default.btn-loading:after {
      -webkit-animation: spinner-rotation 0.75s infinite linear;
      -moz-animation: spinner-rotation 0.75s infinite linear;
      animation: spinner-rotation 0.75s infinite linear;
      clear: both;
      height: 1rem;
      width: 1rem;
      margin: 0 auto 0 auto;
      position: relative;
      border-top: 0.25rem solid #8A8A8A;
      border-left: 0.25rem solid rgba(138, 138, 138, 0.4);
      border-bottom: 0.25rem solid rgba(138, 138, 138, 0.4);
      border-right: 0.25rem solid rgba(138, 138, 138, 0.4);
      border-radius: 100%;
      display: block;
      content: '';
      position: absolute;
      top: 50%;
      margin-top: -.75rem;
      left: .75rem;
      -webkit-transition: 0.2s;
      -moz-transition: 0.2s;
      transition: 0.2s; }
      .no-cssanimations .btn-default.btn-loading:after {
        display: none; }
  .btn-default svg, .btn-default path, .btn-default polygon {
    fill: #232A31; }
  .btn-default:link, .btn-default:visited {
    border-bottom: 0;
    color: #232A31; }
  .btn-default:disabled, .btn-default.disabled {
    color: #c2c2c2;
    opacity: 0.7;
    cursor: default; }
    .btn-default:disabled svg, .btn-default:disabled path, .btn-default.disabled svg, .btn-default.disabled path {
      fill: #c2c2c2; }
    .btn-default:disabled.btn-confirmation, .btn-default.disabled.btn-confirmation {
      color: #232A31; }
    .btn-default:disabled.btn-loading, .btn-default.disabled.btn-loading {
      color: #232A31; }
  .btn-default:hover, .btn-default:focus {
    background-color: #f8f8f8;
    background-image: none;
    outline: none; }
    .btn-default:hover:disabled, .btn-default:hover.disabled, .btn-default:focus:disabled, .btn-default:focus.disabled {
      background-color: #F5F5F5;
      background-image: -webkit-linear-gradient(#F5F5F5, #f0f0f0);
      background-image: linear-gradient(#F5F5F5, #f0f0f0); }
  .btn-default:active {
    background-color: #f0f0f0;
    box-shadow: inset 0 0 0.25rem #e9e9e9;
    -webkit-transform: translateY(0.0625rem);
    -moz-transform: translateY(0.0625rem);
    -ms-transform: translateY(0.0625rem);
    -o-transform: translateY(0.0625rem);
    transform: translateY(0.0625rem); }
    .btn-default:active:disabled, .btn-default:active.disabled {
      box-shadow: 0 0.0625rem 0 0 #dddddd;
      -webkit-transform: translateY(0);
      -moz-transform: translateY(0);
      -ms-transform: translateY(0);
      -o-transform: translateY(0);
      transform: translateY(0);
      background-color: #F5F5F5;
      background-image: -webkit-linear-gradient(#F5F5F5, #f0f0f0);
      background-image: linear-gradient(#F5F5F5, #f0f0f0); }

.btn-white {
  box-shadow: 0 0.0625rem 0 0 #e6e6e6;
  border-radius: 0.125rem;
  border-color: #f2f2f2;
  border-style: solid;
  background-color: #FFFFFF;
  background-image: -webkit-linear-gradient(#FFFFFF, #fafafa);
  background-image: linear-gradient(#FFFFFF, #fafafa);
  color: #232A31; }
  .btn-white.btn-loading {
    padding-left: 3rem;
    -webkit-transition: 0.2s;
    -moz-transition: 0.2s;
    transition: 0.2s; }
    .btn-white.btn-loading.btn-block {
      padding-left: .75rem; }
      .btn-white.btn-loading.btn-block:after {
        left: .75rem; }
    .btn-white.btn-loading img, .btn-white.btn-loading svg {
      display: none; }
    .btn-white.btn-loading:disabled,
    .btn-white.btn-loading .disabled {
      opacity: 1; }
    .btn-white.btn-loading:after {
      -webkit-animation: spinner-rotation 0.75s infinite linear;
      -moz-animation: spinner-rotation 0.75s infinite linear;
      animation: spinner-rotation 0.75s infinite linear;
      clear: both;
      height: 1rem;
      width: 1rem;
      margin: 0 auto 0 auto;
      position: relative;
      border-top: 0.25rem solid #8A8A8A;
      border-left: 0.25rem solid rgba(138, 138, 138, 0.4);
      border-bottom: 0.25rem solid rgba(138, 138, 138, 0.4);
      border-right: 0.25rem solid rgba(138, 138, 138, 0.4);
      border-radius: 100%;
      display: block;
      content: '';
      position: absolute;
      top: 50%;
      margin-top: -.75rem;
      left: .75rem;
      -webkit-transition: 0.2s;
      -moz-transition: 0.2s;
      transition: 0.2s; }
      .no-cssanimations .btn-white.btn-loading:after {
        display: none; }
  .btn-white svg, .btn-white path, .btn-white polygon {
    fill: #232A31; }
  .btn-white:link, .btn-white:visited {
    border-bottom: 0;
    color: #232A31; }
  .btn-white:disabled, .btn-white.disabled {
    color: #cccccc;
    opacity: 0.7;
    cursor: default; }
    .btn-white:disabled svg, .btn-white:disabled path, .btn-white.disabled svg, .btn-white.disabled path {
      fill: #cccccc; }
    .btn-white:disabled.btn-confirmation, .btn-white.disabled.btn-confirmation {
      color: #232A31; }
    .btn-white:disabled.btn-loading, .btn-white.disabled.btn-loading {
      color: #232A31; }
  .btn-white:hover, .btn-white:focus {
    background-color: white;
    background-image: none;
    outline: none; }
    .btn-white:hover:disabled, .btn-white:hover.disabled, .btn-white:focus:disabled, .btn-white:focus.disabled {
      background-color: #FFFFFF;
      background-image: -webkit-linear-gradient(#FFFFFF, #fafafa);
      background-image: linear-gradient(#FFFFFF, #fafafa); }
  .btn-white:active {
    background-color: #fafafa;
    box-shadow: inset 0 0 0.25rem #f2f2f2;
    -webkit-transform: translateY(0.0625rem);
    -moz-transform: translateY(0.0625rem);
    -ms-transform: translateY(0.0625rem);
    -o-transform: translateY(0.0625rem);
    transform: translateY(0.0625rem); }
    .btn-white:active:disabled, .btn-white:active.disabled {
      box-shadow: 0 0.0625rem 0 0 #e6e6e6;
      -webkit-transform: translateY(0);
      -moz-transform: translateY(0);
      -ms-transform: translateY(0);
      -o-transform: translateY(0);
      transform: translateY(0);
      background-color: #FFFFFF;
      background-image: -webkit-linear-gradient(#FFFFFF, #fafafa);
      background-image: linear-gradient(#FFFFFF, #fafafa); }

.btn-primary {
  box-shadow: 0 0.0625rem 0 0 #e65c00;
  border-radius: 0.125rem;
  border-color: #f26100;
  border-style: solid;
  background-color: #FF6600;
  background-image: -webkit-linear-gradient(#FF6600, #fa6400);
  background-image: linear-gradient(#FF6600, #fa6400);
  color: #FFFFFF; }
  .btn-primary.btn-loading {
    padding-left: 3rem;
    -webkit-transition: 0.2s;
    -moz-transition: 0.2s;
    transition: 0.2s; }
    .btn-primary.btn-loading.btn-block {
      padding-left: .75rem; }
      .btn-primary.btn-loading.btn-block:after {
        left: .75rem; }
    .btn-primary.btn-loading img, .btn-primary.btn-loading svg {
      display: none; }
    .btn-primary.btn-loading:disabled,
    .btn-primary.btn-loading .disabled {
      opacity: 1; }
    .btn-primary.btn-loading:after {
      -webkit-animation: spinner-rotation 0.75s infinite linear;
      -moz-animation: spinner-rotation 0.75s infinite linear;
      animation: spinner-rotation 0.75s infinite linear;
      clear: both;
      height: 1rem;
      width: 1rem;
      margin: 0 auto 0 auto;
      position: relative;
      border-top: 0.25rem solid #FFFFFF;
      border-left: 0.25rem solid rgba(255, 255, 255, 0.4);
      border-bottom: 0.25rem solid rgba(255, 255, 255, 0.4);
      border-right: 0.25rem solid rgba(255, 255, 255, 0.4);
      border-radius: 100%;
      display: block;
      content: '';
      position: absolute;
      top: 50%;
      margin-top: -.75rem;
      left: .75rem;
      -webkit-transition: 0.2s;
      -moz-transition: 0.2s;
      transition: 0.2s; }
      .no-cssanimations .btn-primary.btn-loading:after {
        display: none; }
  .btn-primary svg, .btn-primary path, .btn-primary polygon {
    fill: #FFFFFF; }
  .btn-primary:link, .btn-primary:visited {
    color: #FFFFFF; }
  .btn-primary:disabled, .btn-primary.disabled {
    color: #ffa366;
    opacity: 0.4;
    cursor: default; }
    .btn-primary:disabled svg, .btn-primary:disabled path, .btn-primary.disabled svg, .btn-primary.disabled path {
      fill: #ffa366; }
    .btn-primary:disabled.btn-confirmation, .btn-primary.disabled.btn-confirmation {
      color: #FFFFFF; }
    .btn-primary:disabled.btn-loading, .btn-primary.disabled.btn-loading {
      color: #FFFFFF; }
  .btn-primary:hover, .btn-primary:focus {
    background: #ff751a;
    background-image: none;
    outline: none; }
    .btn-primary:hover:disabled, .btn-primary:hover.disabled, .btn-primary:focus:disabled, .btn-primary:focus.disabled {
      background-color: #FF6600;
      background-image: -webkit-linear-gradient(#FF6600, #fa6400);
      background-image: linear-gradient(#FF6600, #fa6400); }
  .btn-primary:active {
    background-color: #f56200;
    box-shadow: inset 0 0 0.25rem #f26100;
    -webkit-transform: translateY(0.0625rem);
    -moz-transform: translateY(0.0625rem);
    -ms-transform: translateY(0.0625rem);
    -o-transform: translateY(0.0625rem);
    transform: translateY(0.0625rem); }
    .btn-primary:active:disabled, .btn-primary:active.disabled {
      box-shadow: 0 0.0625rem 0 0 #e65c00;
      -webkit-transform: translateY(0);
      -moz-transform: translateY(0);
      -ms-transform: translateY(0);
      -o-transform: translateY(0);
      transform: translateY(0);
      background-color: #FF6600;
      background-image: -webkit-linear-gradient(#FF6600, #fa6400);
      background-image: linear-gradient(#FF6600, #fa6400); }

.btn-danger {
  box-shadow: 0 0.0625rem 0 0 #c21a1a;
  border-radius: 0.125rem;
  border-color: #cd1c1c;
  border-style: solid;
  background-color: #D81D1D;
  background-image: -webkit-linear-gradient(#D81D1D, #d41c1c);
  background-image: linear-gradient(#D81D1D, #d41c1c);
  color: #FFFFFF; }
  .btn-danger.btn-loading {
    padding-left: 3rem;
    -webkit-transition: 0.2s;
    -moz-transition: 0.2s;
    transition: 0.2s; }
    .btn-danger.btn-loading.btn-block {
      padding-left: .75rem; }
      .btn-danger.btn-loading.btn-block:after {
        left: .75rem; }
    .btn-danger.btn-loading img, .btn-danger.btn-loading svg {
      display: none; }
    .btn-danger.btn-loading:disabled,
    .btn-danger.btn-loading .disabled {
      opacity: 1; }
    .btn-danger.btn-loading:after {
      -webkit-animation: spinner-rotation 0.75s infinite linear;
      -moz-animation: spinner-rotation 0.75s infinite linear;
      animation: spinner-rotation 0.75s infinite linear;
      clear: both;
      height: 1rem;
      width: 1rem;
      margin: 0 auto 0 auto;
      position: relative;
      border-top: 0.25rem solid #FFFFFF;
      border-left: 0.25rem solid rgba(255, 255, 255, 0.4);
      border-bottom: 0.25rem solid rgba(255, 255, 255, 0.4);
      border-right: 0.25rem solid rgba(255, 255, 255, 0.4);
      border-radius: 100%;
      display: block;
      content: '';
      position: absolute;
      top: 50%;
      margin-top: -.75rem;
      left: .75rem;
      -webkit-transition: 0.2s;
      -moz-transition: 0.2s;
      transition: 0.2s; }
      .no-cssanimations .btn-danger.btn-loading:after {
        display: none; }
  .btn-danger svg, .btn-danger path, .btn-danger polygon {
    fill: #FFFFFF; }
  .btn-danger:link, .btn-danger:visited {
    color: #FFFFFF; }
  .btn-danger:disabled, .btn-danger.disabled {
    color: #ec6f6f;
    opacity: 0.4;
    cursor: default; }
    .btn-danger:disabled svg, .btn-danger:disabled path, .btn-danger.disabled svg, .btn-danger.disabled path {
      fill: #ec6f6f; }
    .btn-danger:disabled.btn-confirmation, .btn-danger.disabled.btn-confirmation {
      color: #FFFFFF; }
    .btn-danger:disabled.btn-loading, .btn-danger.disabled.btn-loading {
      color: #FFFFFF; }
  .btn-danger:hover, .btn-danger:focus {
    background: #e32c2c;
    background-image: none;
    outline: none; }
    .btn-danger:hover:disabled, .btn-danger:hover.disabled, .btn-danger:focus:disabled, .btn-danger:focus.disabled {
      background-color: #D81D1D;
      background-image: -webkit-linear-gradient(#D81D1D, #d41c1c);
      background-image: linear-gradient(#D81D1D, #d41c1c); }
  .btn-danger:active {
    background-color: #cf1c1c;
    box-shadow: inset 0 0 0.25rem #cd1c1c;
    -webkit-transform: translateY(0.0625rem);
    -moz-transform: translateY(0.0625rem);
    -ms-transform: translateY(0.0625rem);
    -o-transform: translateY(0.0625rem);
    transform: translateY(0.0625rem); }
    .btn-danger:active:disabled, .btn-danger:active.disabled {
      box-shadow: 0 0.0625rem 0 0 #c21a1a;
      -webkit-transform: translateY(0);
      -moz-transform: translateY(0);
      -ms-transform: translateY(0);
      -o-transform: translateY(0);
      transform: translateY(0);
      background-color: #D81D1D;
      background-image: -webkit-linear-gradient(#D81D1D, #d41c1c);
      background-image: linear-gradient(#D81D1D, #d41c1c); }

.btn-confirmation {
  box-shadow: 0 0.0625rem 0 0 #5f921d;
  border-radius: 0.125rem;
  border-color: #659a1e;
  border-style: solid;
  background-color: #6AA220;
  background-image: -webkit-linear-gradient(#6AA220, #689f1f);
  background-image: linear-gradient(#6AA220, #689f1f);
  color: #FFFFFF; }
  .btn-confirmation.btn-loading {
    padding-left: 3rem;
    -webkit-transition: 0.2s;
    -moz-transition: 0.2s;
    transition: 0.2s; }
    .btn-confirmation.btn-loading.btn-block {
      padding-left: .75rem; }
      .btn-confirmation.btn-loading.btn-block:after {
        left: .75rem; }
    .btn-confirmation.btn-loading img, .btn-confirmation.btn-loading svg {
      display: none; }
    .btn-confirmation.btn-loading:disabled,
    .btn-confirmation.btn-loading .disabled {
      opacity: 1; }
    .btn-confirmation.btn-loading:after {
      -webkit-animation: spinner-rotation 0.75s infinite linear;
      -moz-animation: spinner-rotation 0.75s infinite linear;
      animation: spinner-rotation 0.75s infinite linear;
      clear: both;
      height: 1rem;
      width: 1rem;
      margin: 0 auto 0 auto;
      position: relative;
      border-top: 0.25rem solid #FFFFFF;
      border-left: 0.25rem solid rgba(255, 255, 255, 0.4);
      border-bottom: 0.25rem solid rgba(255, 255, 255, 0.4);
      border-right: 0.25rem solid rgba(255, 255, 255, 0.4);
      border-radius: 100%;
      display: block;
      content: '';
      position: absolute;
      top: 50%;
      margin-top: -.75rem;
      left: .75rem;
      -webkit-transition: 0.2s;
      -moz-transition: 0.2s;
      transition: 0.2s; }
      .no-cssanimations .btn-confirmation.btn-loading:after {
        display: none; }
  .btn-confirmation svg, .btn-confirmation path, .btn-confirmation polygon {
    fill: #FFFFFF; }
  .btn-confirmation:link, .btn-confirmation:visited {
    color: #FFFFFF; }
  .btn-confirmation:disabled, .btn-confirmation.disabled {
    color: #9edc4c;
    opacity: 0.4;
    cursor: default; }
    .btn-confirmation:disabled svg, .btn-confirmation:disabled path, .btn-confirmation.disabled svg, .btn-confirmation.disabled path {
      fill: #9edc4c; }
    .btn-confirmation:disabled.btn-confirmation, .btn-confirmation.disabled.btn-confirmation {
      color: #FFFFFF; }
    .btn-confirmation:disabled.btn-loading, .btn-confirmation.disabled.btn-loading {
      color: #FFFFFF; }
  .btn-confirmation:hover, .btn-confirmation:focus {
    background: #78b724;
    background-image: none;
    outline: none; }
    .btn-confirmation:hover:disabled, .btn-confirmation:hover.disabled, .btn-confirmation:focus:disabled, .btn-confirmation:focus.disabled {
      background-color: #6AA220;
      background-image: -webkit-linear-gradient(#6AA220, #689f1f);
      background-image: linear-gradient(#6AA220, #689f1f); }
  .btn-confirmation:active {
    background-color: #64991e;
    box-shadow: inset 0 0 0.25rem #659a1e;
    -webkit-transform: translateY(0.0625rem);
    -moz-transform: translateY(0.0625rem);
    -ms-transform: translateY(0.0625rem);
    -o-transform: translateY(0.0625rem);
    transform: translateY(0.0625rem); }
    .btn-confirmation:active:disabled, .btn-confirmation:active.disabled {
      box-shadow: 0 0.0625rem 0 0 #5f921d;
      -webkit-transform: translateY(0);
      -moz-transform: translateY(0);
      -ms-transform: translateY(0);
      -o-transform: translateY(0);
      transform: translateY(0);
      background-color: #6AA220;
      background-image: -webkit-linear-gradient(#6AA220, #689f1f);
      background-image: linear-gradient(#6AA220, #689f1f); }
  .btn-confirmation:disabled, .btn-confirmation.disabled {
    opacity: 1; }

.btn-cancel,
.btn-text {
  color: #FF6600;
  font-weight: bold; }
  .btn-cancel:hover,
  .btn-text:hover {
    background-color: transparent;
    color: #ff751a; }

.btn-block {
  text-align: center;
  display: block;
  width: 100%; }

/*doc
---
title: Article
name: article
category: Elements
---

Since Hudl is a web app, we're confining default typography to within a `.ko-article` class. We've got default stylings for headings, paragraphs, links, and lists. Everything also gets a line-height of 1.4 by default and solid vertical rhythm.

```html_example
<div class="ko-article">
    <h1>This is a big heading.</h1>
    <p>Pede cum deserunt ducimus <a href="#">hymenaeos gravida risus sodales</a> molestias repellendus nostrud ipsam, praesent nam temporibus praesent aspernatur turpis, ridiculus, condimentum? Nullam sed animi adipisci veniam. Iure sociosqu, <strong>possimus phasellus vehicula</strong>, amet erat eaque, veritatis ea lacus dolorum pharetra! Hic quas? Quis alias. Cillum habitasse. Nostrum semper? Metus ea, maecenas fames.</p>
    <h2>This is a smaller heading.</h2>
    <p>Egestas conubia velit senectus eligendi tortor nobis qui nostrud itaque mollitia. Iure ex incididunt varius quas mauris! Minima rhoncus magni! <em>Minus sit mollis cras, pariatur tortor dicta accusamus temporibus mauris nibh molestie</em>, sapiente pretium luctus! Mattis magnis purus assumenda dictum quis interdum atque! Cupiditate. Adipisicing, quisquam sem lobortis porta. Inventore.</p>
    <ul>
        <li>I don't know what this list is about.</li>
        <li>It could be about anything, really.</li>
        <li>This third point is pretty convincing.</li>
    </ul>
    <h3>Another heading! Whoo hoo!</h3>
    <p>Torquent! Rutrum nunc quaerat dignissimos? Occaecat, volutpat soluta aute nemo aut wisi? Architecto temporibus eaque, doloremque harum exercitation! Urna, vestibulum dolorem eligendi, diam perspiciatis. Maecenas? Optio cubilia quisque, ut ullamco, libero libero.</p>
    <p>Ut optio perspiciatis esse aut, quia soluta laoreet, facilis delectus. Sollicitudin non sodales taciti dapibus, expedita! Magnam ipsam, dictumst natus, pulvinar proident sequi! Totam excepteur.</p>
    <h4>We've got H4 styles too!</h4>
    <ol>
        <li>How about some numbered lists?</li>
        <li>You can use these when order is important.</li>
        <li>Like ranking your favorite athletes.</li>
    </ol>
</div>
```

*/
.ko-article {
  line-height: 1.4rem; }
  .ko-article h1, .ko-article h2, .ko-article h3, .ko-article h4, .ko-article h5, .ko-article h6 {
    font-weight: bold;
    margin-bottom: 1.4rem;
    line-height: 1.4rem; }
  .ko-article h1 {
    text-transform: uppercase;
    line-height: 2.8rem;
    font-size: 3rem; }
  .ko-article h2 {
    line-height: 2.8rem;
    font-size: 2rem; }
  .ko-article h3 {
    font-size: 1.5rem; }
  .ko-article h4 {
    font-size: 1.3125rem; }
  .ko-article h5, .ko-article h6 {
    font-size: 1.125rem; }
  .ko-article p {
    margin-bottom: 1.4rem; }
  .ko-article strong, .ko-article b {
    font-weight: bold; }
  .ko-article em, .ko-article i {
    font-style: italic; }
  .ko-article ul, .ko-article ol {
    margin-bottom: 1.4rem;
    margin-left: 2.8rem; }
  .ko-article ul {
    list-style-type: disc; }
  .ko-article ol {
    list-style-type: decimal; }
  .ko-article code {
    background-color: #E8E8E8;
    border-radius: .125rem;
    font-weight: bold;
    display: inline-block;
    font-family: "Source Code Pro";
    padding: .125rem;
    font-size: 0.75rem;
    line-height: 1; }

/*doc
---
title: Forms
name: forms
category: Elements
---

We use the [float label](http://bradfrostweb.com/blog/post/float-label-pattern/) pattern around here. For each item, put a `<div>` around two things: a `<label>` and an `<input>`. Give the `<div>` a class of `ko-field` and you're good to go. Remember to use fancy HTML5 form fields!

The JS included with kickoff is smart enough to handle the labels and degrade gracefully (e.g., in browsers that don't support placeholders, the labels are always present).

```html_example
<div class="ko-field">
    <label>Name</label>
    <input type="text" placeholder="Name">
</div>
<div class="ko-field">
    <label>Email Address</label>
    <input type="email" placeholder="Email Address">
</div>
<div class="ko-field">
    <label>Your Message</label>
    <textarea placeholder="Leave us a message"></textarea>
</div>
```

### Form Validation

Throw a class of `ko-invalid` on the `<label>` and the `<input>` to get an invalid style and use `ko-valid` if you want an explicit valid style. Use the `<label>` for your error/success message.

```html_example
<div class="ko-field">
    <label class="ko-invalid">Not quite right</label>
    <input type="email" placeholder="Email Address" class="ko-invalid">
</div>
<div class="ko-field">
    <label class="ko-valid">Looks good!</label>
    <input type="email" placeholder="Email Address" class="ko-valid">
</div>
```

### Many column'd forms

You can combine fields with Bourbon Neat to make a nice form layout. We've got built-in classes for a few widths based on our default 12 column grid, but feel free to add your own custom widths or classes. `ko-field-wrapper` is a clearfix'd container.

```html_example
<div class="ko-field-wrapper">
    <div class="ko-field ko-field-half">
        <label>Name</label>
        <input type="text" placeholder="Name">
    </div>
    <div class="ko-field ko-field-half">
        <label>Email Address</label>
        <input type="email" placeholder="Email Address">
    </div>
</div>
```

```html_example
<div class="ko-field-wrapper">
    <div class="ko-field ko-field-third">
        <label>Name</label>
        <input type="text" placeholder="Name">
    </div>
    <div class="ko-field ko-field-third">
        <label>Email</label>
        <input type="email" placeholder="Email">
    </div>
    <div class="ko-field ko-field-third">
        <label>Phone</label>
        <input type="tel" placeholder="Phone">
    </div>
</div>
```

```html_example
<div class="ko-field-wrapper">
    <div class="ko-field ko-field-fourth">
        <label>Name</label>
        <input type="text" placeholder="Name">
    </div>
    <div class="ko-field ko-field-fourth">
        <label>Email</label>
        <input type="email" placeholder="Email">
    </div>
    <div class="ko-field ko-field-fourth">
        <label>Phone</label>
        <input type="tel" placeholder="Phone">
    </div>
    <div class="ko-field ko-field-fourth">
        <label>Twitter Handle</label>
        <input type="text" placeholder="Instagram">
    </div>
</div>
```

### Form Actions

Put your buttons at the bottom of the form wrapped in a `<div>` with class `ko-form-actions`.

```html_example
<div class="ko-field">
    <label>Name</label>
    <input type="text" placeholder="Name">
</div>
<div class="ko-field">
    <label>Email Address</label>
    <input type="email" placeholder="Email Address">
</div>
<div class="ko-form-actions">
    <button class="btn-primary">Add this Athlete</button>
    <button class="btn-cancel">Cancel</button>
</div>
```

### Checkboxes and Radios

As of right now, checkboxes and radios are **not** native `<input>` elements.

To get radios working like radios, you'll want to add:

```
    $('.ko-radios li').click(function(){
        if ($(this).hasClass('disabled')) return;

        $(this).siblings().removeClass('ko-checked');
        $(this).addClass('ko-checked');
    });

```

To get checkboxes working like checkboxes, you'll want to add:

```
    $('.ko-checkboxes li').each(function(){
        $(this).find('.ko-choice-mark').html('<svg viewBox="0 0 612 792"><polygon points="0,416.4 81.6,334.8 211,472 510,151.2 612,232.8 204,640.8 "/></svg>');
    });

    $('.ko-checkboxes li').click(function(){
        if ($(this).hasClass('disabled')) return;

        $(this).toggleClass('ko-checked');
    });

```

They look like this:

```html_example
<ul class="ko-radios">
    <li>
        <span class="ko-choice-mark"></span>
        <span class="ko-choice-label">Choose this one</span>
    </li>
    <li>
        <span class="ko-choice-mark"></span>
        <span class="ko-choice-label">Or maybe this</span>
    </li>
    <li>
        <span class="ko-choice-mark"></span>
        <span class="ko-choice-label">Perhaps this is better</span>
    </li>
    <li class="disabled">
        <span class="ko-choice-mark"></span>
        <span class="ko-choice-label">But this one's worse</span>
    </li>
</ul>
```

```html_example
<ul class="ko-checkboxes">
    <li>
        <span class="ko-choice-mark"></span>
        <span class="ko-choice-label">You can choose</span>
    </li>
    <li>
        <span class="ko-choice-mark"></span>
        <span class="ko-choice-label">As many things</span>
    </li>
    <li>
        <span class="ko-choice-mark"></span>
        <span class="ko-choice-label">As you'd like!</span>
    </li>
    <li class="disabled">
        <span class="ko-choice-mark"></span>
        <span class="ko-choice-label">Except this thing</span>
    </li>
</ul>
```

*/
.ko-field-wrapper::after {
  clear: both;
  content: "";
  display: table; }

.ko-field {
  position: relative;
  margin-top: 1.6rem; }
  .ko-field::after {
    clear: both;
    content: "";
    display: table; }
  .ko-field.ko-field-half {
    float: left;
    display: block;
    margin-right: 2.35765%;
    width: 48.82117%; }
    .ko-field.ko-field-half:last-child {
      margin-right: 0; }
  .ko-field.ko-field-third {
    float: left;
    display: block;
    margin-right: 2.35765%;
    width: 31.76157%; }
    .ko-field.ko-field-third:last-child {
      margin-right: 0; }
  .ko-field.ko-field-fourth {
    float: left;
    display: block;
    margin-right: 2.35765%;
    width: 23.23176%; }
    .ko-field.ko-field-fourth:last-child {
      margin-right: 0; }
  .ko-field:last-child {
    margin-bottom: 0; }
  .ko-field input[type="text"],
  .ko-field input[type="email"],
  .ko-field input[type="password"],
  .ko-field input[type="number"],
  .ko-field input[type="search"],
  .ko-field input[type="date"],
  .ko-field input[type="time"],
  .ko-field input[type="tel"],
  .ko-field select,
  .ko-field textarea {
    -webkit-appearance: none;
    border-radius: 0;
    border: none;
    margin: 0;
    padding: 0;
    font-family: trade;
    background-color: #FFFFFF;
    font-size: 1rem;
    color: #232A31;
    display: block;
    width: 100%;
    border-style: solid;
    border-color: #E8E8E8;
    border-width: 1px;
    border-radius: 2px;
    padding: 1rem;
    -webkit-transition: border-color 0.2s;
    -moz-transition: border-color 0.2s;
    transition: border-color 0.2s; }
    .ko-field input[type="text"]::-webkit-search-decoration,
    .ko-field input[type="email"]::-webkit-search-decoration,
    .ko-field input[type="password"]::-webkit-search-decoration,
    .ko-field input[type="number"]::-webkit-search-decoration,
    .ko-field input[type="search"]::-webkit-search-decoration,
    .ko-field input[type="date"]::-webkit-search-decoration,
    .ko-field input[type="time"]::-webkit-search-decoration,
    .ko-field input[type="tel"]::-webkit-search-decoration,
    .ko-field select::-webkit-search-decoration,
    .ko-field textarea::-webkit-search-decoration {
      -webkit-appearance: none; }
    .ko-field input[type="text"]::-webkit-input-placeholder,
    .ko-field input[type="email"]::-webkit-input-placeholder,
    .ko-field input[type="password"]::-webkit-input-placeholder,
    .ko-field input[type="number"]::-webkit-input-placeholder,
    .ko-field input[type="search"]::-webkit-input-placeholder,
    .ko-field input[type="date"]::-webkit-input-placeholder,
    .ko-field input[type="time"]::-webkit-input-placeholder,
    .ko-field input[type="tel"]::-webkit-input-placeholder,
    .ko-field select::-webkit-input-placeholder,
    .ko-field textarea::-webkit-input-placeholder {
      color: #8A8A8A; }
    .ko-field input[type="text"]::-webkit-inner-spin-button, .ko-field input[type="text"]::-webkit-outer-spin-button,
    .ko-field input[type="email"]::-webkit-inner-spin-button,
    .ko-field input[type="email"]::-webkit-outer-spin-button,
    .ko-field input[type="password"]::-webkit-inner-spin-button,
    .ko-field input[type="password"]::-webkit-outer-spin-button,
    .ko-field input[type="number"]::-webkit-inner-spin-button,
    .ko-field input[type="number"]::-webkit-outer-spin-button,
    .ko-field input[type="search"]::-webkit-inner-spin-button,
    .ko-field input[type="search"]::-webkit-outer-spin-button,
    .ko-field input[type="date"]::-webkit-inner-spin-button,
    .ko-field input[type="date"]::-webkit-outer-spin-button,
    .ko-field input[type="time"]::-webkit-inner-spin-button,
    .ko-field input[type="time"]::-webkit-outer-spin-button,
    .ko-field input[type="tel"]::-webkit-inner-spin-button,
    .ko-field input[type="tel"]::-webkit-outer-spin-button,
    .ko-field select::-webkit-inner-spin-button,
    .ko-field select::-webkit-outer-spin-button,
    .ko-field textarea::-webkit-inner-spin-button,
    .ko-field textarea::-webkit-outer-spin-button {
      -webkit-appearance: none;
      margin: 0; }
    .ko-field input[type="text"]::-moz-placeholder,
    .ko-field input[type="email"]::-moz-placeholder,
    .ko-field input[type="password"]::-moz-placeholder,
    .ko-field input[type="number"]::-moz-placeholder,
    .ko-field input[type="search"]::-moz-placeholder,
    .ko-field input[type="date"]::-moz-placeholder,
    .ko-field input[type="time"]::-moz-placeholder,
    .ko-field input[type="tel"]::-moz-placeholder,
    .ko-field select::-moz-placeholder,
    .ko-field textarea::-moz-placeholder {
      /* Firefox 19+ */
      color: #8A8A8A; }
    .ko-field input[type="text"]:-ms-input-placeholder,
    .ko-field input[type="email"]:-ms-input-placeholder,
    .ko-field input[type="password"]:-ms-input-placeholder,
    .ko-field input[type="number"]:-ms-input-placeholder,
    .ko-field input[type="search"]:-ms-input-placeholder,
    .ko-field input[type="date"]:-ms-input-placeholder,
    .ko-field input[type="time"]:-ms-input-placeholder,
    .ko-field input[type="tel"]:-ms-input-placeholder,
    .ko-field select:-ms-input-placeholder,
    .ko-field textarea:-ms-input-placeholder {
      color: #8A8A8A; }
    .ko-field input[type="text"]:focus, .ko-field input[type="text"]:active,
    .ko-field input[type="email"]:focus,
    .ko-field input[type="email"]:active,
    .ko-field input[type="password"]:focus,
    .ko-field input[type="password"]:active,
    .ko-field input[type="number"]:focus,
    .ko-field input[type="number"]:active,
    .ko-field input[type="search"]:focus,
    .ko-field input[type="search"]:active,
    .ko-field input[type="date"]:focus,
    .ko-field input[type="date"]:active,
    .ko-field input[type="time"]:focus,
    .ko-field input[type="time"]:active,
    .ko-field input[type="tel"]:focus,
    .ko-field input[type="tel"]:active,
    .ko-field select:focus,
    .ko-field select:active,
    .ko-field textarea:focus,
    .ko-field textarea:active {
      border-color: #FF6600;
      box-shadow: none;
      outline: none; }
      .ko-field input[type="text"]:focus.ko-valid, .ko-field input[type="text"]:active.ko-valid,
      .ko-field input[type="email"]:focus.ko-valid,
      .ko-field input[type="email"]:active.ko-valid,
      .ko-field input[type="password"]:focus.ko-valid,
      .ko-field input[type="password"]:active.ko-valid,
      .ko-field input[type="number"]:focus.ko-valid,
      .ko-field input[type="number"]:active.ko-valid,
      .ko-field input[type="search"]:focus.ko-valid,
      .ko-field input[type="search"]:active.ko-valid,
      .ko-field input[type="date"]:focus.ko-valid,
      .ko-field input[type="date"]:active.ko-valid,
      .ko-field input[type="time"]:focus.ko-valid,
      .ko-field input[type="time"]:active.ko-valid,
      .ko-field input[type="tel"]:focus.ko-valid,
      .ko-field input[type="tel"]:active.ko-valid,
      .ko-field select:focus.ko-valid,
      .ko-field select:active.ko-valid,
      .ko-field textarea:focus.ko-valid,
      .ko-field textarea:active.ko-valid {
        border-color: #6AA220; }
    .ko-field input[type="text"]:invalid,
    .ko-field input[type="email"]:invalid,
    .ko-field input[type="password"]:invalid,
    .ko-field input[type="number"]:invalid,
    .ko-field input[type="search"]:invalid,
    .ko-field input[type="date"]:invalid,
    .ko-field input[type="time"]:invalid,
    .ko-field input[type="tel"]:invalid,
    .ko-field select:invalid,
    .ko-field textarea:invalid {
      box-shadow: none; }
    .ko-field input[type="text"].ko-invalid,
    .ko-field input[type="email"].ko-invalid,
    .ko-field input[type="password"].ko-invalid,
    .ko-field input[type="number"].ko-invalid,
    .ko-field input[type="search"].ko-invalid,
    .ko-field input[type="date"].ko-invalid,
    .ko-field input[type="time"].ko-invalid,
    .ko-field input[type="tel"].ko-invalid,
    .ko-field select.ko-invalid,
    .ko-field textarea.ko-invalid {
      border-color: #D81D1D; }
    .ko-field input[type="text"].ko-valid,
    .ko-field input[type="email"].ko-valid,
    .ko-field input[type="password"].ko-valid,
    .ko-field input[type="number"].ko-valid,
    .ko-field input[type="search"].ko-valid,
    .ko-field input[type="date"].ko-valid,
    .ko-field input[type="time"].ko-valid,
    .ko-field input[type="tel"].ko-valid,
    .ko-field select.ko-valid,
    .ko-field textarea.ko-valid {
      border-color: #6AA220; }
  .ko-field label {
    font-weight: bold;
    font-family: trade;
    text-transform: uppercase;
    color: #FF6600;
    left: 0;
    opacity: 0;
    display: block;
    position: absolute;
    bottom: 100%;
    width: 100%;
    display: inline-block;
    padding: .1rem 1rem;
    line-height: 1rem;
    font-size: 0.75rem;
    -webkit-transform: translateY(5px);
    -moz-transform: translateY(5px);
    -ms-transform: translateY(5px);
    -o-transform: translateY(5px);
    transform: translateY(5px);
    -webkit-transition: 0.2s;
    -moz-transition: 0.2s;
    transition: 0.2s; }
    .no-placeholder .ko-field label {
      opacity: 1; }
    .no-csstransitions .ko-field label {
      -webkit-transform: translateY(0);
      -moz-transform: translateY(0);
      -ms-transform: translateY(0);
      -o-transform: translateY(0);
      transform: translateY(0); }
    .ko-field label.ko-active {
      opacity: 1;
      -webkit-transform: translateY(0);
      -moz-transform: translateY(0);
      -ms-transform: translateY(0);
      -o-transform: translateY(0);
      transform: translateY(0); }
      .ko-field label.ko-active.ko-valid {
        color: #6AA220;
        -webkit-transform: translateY(0);
        -moz-transform: translateY(0);
        -ms-transform: translateY(0);
        -o-transform: translateY(0);
        transform: translateY(0); }
    .ko-field label.ko-invalid {
      opacity: 1;
      color: #D81D1D;
      -webkit-transform: translateY(0);
      -moz-transform: translateY(0);
      -ms-transform: translateY(0);
      -o-transform: translateY(0);
      transform: translateY(0); }
    .ko-field label.ko-valid {
      color: #6AA220;
      opacity: 1;
      -webkit-transform: translateY(0);
      -moz-transform: translateY(0);
      -ms-transform: translateY(0);
      -o-transform: translateY(0);
      transform: translateY(0); }
  .ko-field select {
    cursor: pointer;
    background-color: #F5F5F5;
    background-image: -webkit-linear-gradient(#F5F5F5, #ededed);
    background-image: linear-gradient(#F5F5F5, #ededed); }

.ko-form-actions {
  display: -webkit-box;
  display: -moz-box;
  display: box;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex;
  margin-top: 2rem; }

@-webkit-keyframes check-it {
  0% {
    -webkit-transform: scale(1); }
  50% {
    -webkit-transform: scale(1.25);
    -webkit-animation-timing-function: ease; }
  100% {
    -webkit-transform: scale(1);
    -webkit-animation-timing-function: ease-out; } }

@-moz-keyframes check-it {
  0% {
    -moz-transform: scale(1); }
  50% {
    -moz-transform: scale(1.25);
    -moz-animation-timing-function: ease; }
  100% {
    -moz-transform: scale(1);
    -moz-animation-timing-function: ease-out; } }

@keyframes check-it {
  0% {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1); }
  50% {
    -webkit-transform: scale(1.25);
    -moz-transform: scale(1.25);
    -ms-transform: scale(1.25);
    -o-transform: scale(1.25);
    transform: scale(1.25);
    -webkit-animation-timing-function: ease;
    -moz-animation-timing-function: ease;
    animation-timing-function: ease; }
  100% {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
    -webkit-animation-timing-function: ease-out;
    -moz-animation-timing-function: ease-out;
    animation-timing-function: ease-out; } }

ul.ko-checkboxes, ul.ko-radios {
  margin-bottom: 0;
  margin-left: 0;
  list-style-type: none; }
  ul.ko-checkboxes li, ul.ko-radios li {
    margin: 0;
    cursor: pointer;
    margin-bottom: 1rem;
    line-height: 1.5rem; }

ul.ko-checkboxes li:hover .ko-choice-mark svg {
  fill: #E8E8E8; }

ul.ko-checkboxes li.disabled:hover .ko-choice-mark svg {
  fill: transparent; }

ul.ko-checkboxes li.ko-checked:hover .ko-choice-mark svg {
  fill: #FF6600; }

ul.ko-radios li:hover .ko-choice-mark:after {
  background-color: #E8E8E8; }

ul.ko-radios li.disabled:hover .ko-choice-mark:after {
  background-color: transparent; }

ul.ko-radios li.ko-checked:hover .ko-choice-mark:after {
  background-color: #FF6600; }

.disabled .ko-choice-label {
  color: #8A8A8A; }

.ko-choice-mark {
  position: relative;
  border: 0.125rem solid #FF6600;
  width: 1.5rem;
  height: 1.5rem;
  margin-right: .4rem;
  display: inline-block;
  vertical-align: bottom;
  background-color: #FFFFFF;
  -webkit-transition: 0.2s;
  -moz-transition: 0.2s;
  transition: 0.2s; }
  .ko-choice-mark:after {
    content: '';
    position: absolute;
    top: 10%;
    left: 10%;
    background-color: transparent;
    height: 80%;
    width: 80%;
    border-radius: 50%;
    -webkit-transition: 0.2s;
    -moz-transition: 0.2s;
    transition: 0.2s;
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1); }
  .disabled .ko-choice-mark {
    border: 0.125rem solid #E8E8E8; }
  .ko-radios .ko-choice-mark {
    border-radius: 50%; }
  .ko-checked .ko-choice-mark {
    -webkit-animation: check-it 0.2s forwards;
    -moz-animation: check-it 0.2s forwards;
    animation: check-it 0.2s forwards; }
    .ko-radios .ko-checked .ko-choice-mark:after {
      background-color: #FF6600;
      -webkit-transform: scale(1);
      -moz-transform: scale(1);
      -ms-transform: scale(1);
      -o-transform: scale(1);
      transform: scale(1); }
  .ko-choice-mark svg {
    width: 100%;
    height: 100%;
    fill: transparent;
    -webkit-transition: 0.2s;
    -moz-transition: 0.2s;
    transition: 0.2s; }
    .ko-checked .ko-choice-mark svg {
      fill: #FF6600; }

/*doc
---
title: Links
name: links
category: Elements
---

Throw a class of `ko-link` on any link to give it a nice format.

Links inside of paragraphs and lists inside of the `ko-article` class get this treatment by default.

```html_example
<div class="ko-article">
    <p>Eleifend eaque quo semper <a href="#">pellentesque laboriosam habitasse</a>, asperiores ultrices condimentum netus, rerum?</p>
</div>

<div class="widget">
    Habitasse sequi <a class="ko-link" href="#">varius tellus natoque excepturi</a>! Atque in quam officiis nunc vestibulum tellus augue praesentium temporibus.
</div>
```

*/
.ko-link, .ko-article p a, .ko-article ul a, .ko-article ol a {
  font-weight: bold;
  color: #FF6600;
  border-bottom: 1px solid #E8E8E8;
  -webkit-transition: 0.2s;
  -moz-transition: 0.2s;
  transition: 0.2s; }
  .ko-link:hover, .ko-article p a:hover, .ko-article ul a:hover, .ko-article ol a:hover {
    color: #e65c00;
    border-color: #FF6600; }
  .ko-link:active, .ko-article p a:active, .ko-article ul a:active, .ko-article ol a:active, .ko-link:focus, .ko-article p a:focus, .ko-article ul a:focus, .ko-article ol a:focus {
    color: #ff751a; }

.dropmenu {
  border: solid 1px #969696;
  background-color: #FFFFFF;
  height: 16px;
  cursor: pointer;
  line-height: 16px; }

input.dropmenu {
  cursor: text; }

.dropDownButton {
  width: 16px;
  line-height: 16px;
  height: 16px;
  cursor: pointer;
  float: right;
  background: transparent url(/images/dropdown.gif) no-repeat; }

.dropmenu p {
  float: left;
  font-style: italic;
  white-space: nowrap;
  overflow: hidden;
  cursor: pointer; }

div.dropDown {
  background-color: #FFFFFF;
  padding: 0px;
  margin: 0px;
  border: solid 1px #6b6b6b;
  max-height: 230px;
  overflow-x: auto;
  overflow-y: auto;
  z-index: 1;
  -moz-box-shadow: 0 3px 5px rgba(0, 0, 0, 0.5);
  -webkit-box-shadow: 0 3px 5px rgba(0, 0, 0, 0.5);
  box-shadow: 0 3px 5px rgba(0, 0, 0, 0.5); }

ul.menu {
  list-style-type: none;
  background-color: #FFFFFF; }

ul.menu li {
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden; }

ul.menu li:hover {
  color: #FFFFFF;
  background-color: #FF6600; }

ul.menu li.selected {
  background-color: #0099ff;
  color: #FFFFFF; }

div.user-list {
  width: 152px;
  border: solid 1px #969696;
  background-color: #FFFFFF; }

/* lyle.shearer 1/27/2012 - TODO I think this is duplicated in core.css */
.scroll {
  overflow-x: hidden;
  overflow-y: auto; }

ul.users, ul.columns {
  list-style-type: none;
  overflow: hidden; }

ul.users li {
  cursor: pointer;
  height: 14px;
  text-indent: 20px;
  overflow: hidden;
  white-space: nowrap; }

ul.sl {
  min-height: 170px; }

ul.sl li.hover {
  background-color: #E8E8E8; }

ul.sl li.selected {
  background-color: #0099FF;
  color: #FFFFFF; }

li.sl.selected {
  background-color: #0099FF;
  color: #FFFFFF; }

li.sl {
  cursor: pointer;
  height: 14px;
  text-indent: 5px;
  overflow: hidden;
  white-space: nowrap; }

.sl-empty-text {
  color: #B4B4B4;
  position: absolute;
  top: 0;
  font-size: 14px;
  margin: 155px 10px 0 10px;
  text-align: center; }

li.with-icon {
  text-indent: 20px; }

li.g, #accessList li.g label {
  background-image: url(/images/group16.png);
  background-repeat: no-repeat; }

#accessList li.g, #accessList li.u {
  background: transparent; }

li.u, #accessList li.u label {
  background-image: url(/images/user16.png);
  background-repeat: no-repeat; }

ul.columns li {
  cursor: pointer;
  height: 14px;
  overflow: hidden; }

ul.buttons {
  list-style-type: none;
  font-size: 10px;
  padding-right: 5px;
  padding-left: 5px;
  font-weight: bold; }

ul.buttons li {
  display: block;
  margin: 2px 0;
  text-align: center;
  width: 20px;
  height: 20px;
  cursor: pointer; }

.all-left {
  background-image: url(/images/all_left.png); }

.all-right {
  background-image: url(/images/all_right.png); }

.one-left {
  background-image: url(/images/one_left.png); }

.one-right {
  background-image: url(/images/one_right.png); }

.one-up {
  background-image: url(/images/one_up.png); }

.one-down {
  background-image: url(/images/one_down.png); }

input.wide {
  width: 340px; }

#sendmsg {
  width: 440px;
  font-size: 11px;
  font-family: Verdana, Tahoma, Arial, Sans-Serif;
  color: #6b6b6b; }

#sendmsg table {
  margin: 0; }

#message-layout th {
  vertical-align: top;
  text-align: right;
  padding: 13px 10px 10px 0; }

#message-layout th.middle {
  vertical-align: middle;
  padding: 0 10px 0 0; }

#message-layout td {
  padding: 10px 0; }

#message-layout #userGroupChooser td {
  padding: 0; }

#message-layout textarea {
  width: 340px;
  height: 150px;
  padding: 3px;
  font-family: Verdana, Tahoma, Arial, Sans-Serif;
  font-size: 11px; }

#message-layout input.text {
  padding: 3px; }

#sendmsg input.radio {
  float: left;
  margin-right: 5px;
  display: inline; }

#sendmsg input.submit {
  font-size: 14px;
  font-weight: bold;
  color: #333;
  padding: 5px 2px; }

#sendmsg .footer label {
  float: left;
  display: inline;
  margin-bottom: 5px; }

#sendmsg .footer label.disabled {
  color: #ccc;
  cursor: default; }

#sendmsg .footer p {
  float: left;
  width: 170px;
  text-align: left;
  margin-left: 75px; }

#sendmsg .body {
  padding-bottom: 0; }

#sendmsg h1 {
  text-transform: none; }

#sendmsg .cancel,
#send-team-message {
  margin-right: 3px; }

#teamMenu {
  width: 340px;
  font-size: 12px; }

#teamChooser {
  width: 340px; }

#teamChooser p {
  font-size: 12px;
  color: #333;
  font-style: normal;
  float: none;
  width: 300px; }

.char-limiter {
  color: #B43333;
  font-weight: bold; }

input.filter {
  margin-bottom: 3px;
  margin-left: 0px;
  width: 150px;
  _margin-bottom: 0px;
  padding: 1px; }

td.buttons-parent {
  width: 30px;
  vertical-align: middle; }

#attach-files {
  border: dashed 2px #999;
  width: 340px;
  padding: 0; }

/* file upload css */
.mm-uploader {
  position: relative;
  width: 100%; }

.mm-upload-button {
  color: blue; }

.mm-upload-button-focus {
  outline: 1px dotted black; }

.mm-upload-drop-area {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  min-height: 90px;
  z-index: 2;
  background: #FF9797;
  text-align: center; }

.mm-drop-area {
  padding: 10px; }

.mm-upload-drop-area span {
  display: block;
  position: absolute;
  top: 50%;
  width: 100%;
  margin-top: -8px;
  font-size: 16px; }

.mm-drop-area {
  overflow: hidden; }

.mm-upload-drop-area-active {
  background: #FFFFFF; }

.mm-upload-list {
  list-style: none; }

.mm-upload-list li {
  margin: 0;
  padding: 8px 0 0 0;
  line-height: 15px;
  font-size: 11px; }

.mm-upload-file, .mm-upload-spinner, .mm-upload-size, .mm-upload-cancel, .mm-upload-failed-text {
  margin-right: 7px; }

.mm-upload-cancel {
  font-size: 9px !important; }

.mm-upload-spinner {
  display: inline-block;
  background: url("/images/loading.gif");
  width: 15px;
  height: 15px;
  vertical-align: text-bottom; }

.mm-upload-size, .mm-upload-cancel {
  font-size: 11px; }

.mm-upload-size {
  display: none; }

.mm-upload-failed-text {
  display: none; }

.mm-upload-fail .mm-upload-failed-text {
  display: inline; }

.mm-upload-remove {
  display: none;
  /* hide by default */
  font-size: 9px; }

#sendmsg, #sendmsg * {
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box; }

#sendmsg td, #sendmsg label {
  line-height: 1;
  font-size: 11px;
  font-family: Verdana, Tahoma, Arial, Sans-Serif;
  color: #6b6b6b; }

#sendmsg tr {
  font-size: 11px; }

/* Loader */
#sendmsg .loading {
  color: #FFFFFF;
  font-weight: bold;
  background: transparent url(/images/overlay_bg80.png) repeat;
  padding: 7px;
  border-radius: 3px;
  -moz-border-radius: 3px; }

#sendmsg .loading p {
  padding-left: 20px;
  background: url(/images/dark-loading.gif) no-repeat left center;
  line-height: 18px; }

#sendmsg img {
  vertical-align: middle; }

#sendmsg.modalPopup {
  -moz-border-radius: 7px;
  -webkit-border-radius: 7px;
  position: absolute;
  padding: 15px;
  background: transparent url(/images/overlay_bg60.png) repeat; }

#sendmsg.modalPopup p {
  max-width: 340px; }

#sendmsg.modalPopup .mheader {
  -moz-border-radius: 5px 5px 0 0;
  -webkit-border-top-left-radius: 5px;
  -webkit-border-top-right-radius: 5px;
  background-color: #FF8E33;
  padding: 5px 10px;
  border-bottom: 1px solid #FF6600;
  cursor: default; }

#sendmsg.modalPopup h1 {
  font-size: 18px;
  font-weight: bold;
  color: #FFFFFF;
  letter-spacing: -1px;
  font-family: Verdana, Sans-Serif !important;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.4); }

#sendmsg.modalPopup .subtitle {
  display: block;
  font-size: 11px;
  font-weight: normal;
  letter-spacing: normal; }

#sendmsg.modalPopup .body, #sendmsg .modalPopup .mbody {
  padding: 10px;
  background-color: #E8E8E8;
  border-top: 1px solid #f4f4f4; }

#sendmsg.modalPopup th {
  font-weight: bold; }

#sendmsg.modalPopup .nob {
  border-top: none; }

#sendmsg.modalPopup .footer {
  -moz-border-radius: 0 0 5px 5px;
  -webkit-border-bottom-left-radius: 5px;
  -webkit-border-bottom-right-radius: 5px;
  padding: 8px 12px 15px 0px;
  text-align: right;
  background-color: #E8E8E8; }

#sendmsg.modalPopup .footer input {
  cursor: pointer; }

#sendmsg.modalPopup .footer input[disabled] {
  cursor: default; }

#sendmsg.modalPopup .footer textarea {
  margin-top: 8px;
  width: 350px; }

#sendmsg.modalPopup .footer span.command {
  cursor: pointer; }

#sendmsg.modalPopup a.disabled {
  color: #6B6B6B;
  text-decoration: none;
  cursor: default; }

#sendmsg.modalPopup a.disabled:hover {
  background: none;
  text-decoration: none;
  cursor: default; }

#sendmsg .dlg_close {
  font-size: 0px;
  line-height: 0px;
  text-indent: -9999px;
  height: 24px;
  width: 24px;
  position: absolute;
  top: -10px;
  right: -8px;
  background: url(/images/dlg_close.png) no-repeat center center; }

#sendmsg .dlg_close:hover {
  background-color: Transparent; }

/* Account alert banner */
#expiration-countdown {
  margin: 0 auto 0 auto;
  width: 1100px; }
  #expiration-countdown.banner_notice {
    padding: 15px 15px 15px 25px;
    background: #f8f8f8 url(/images/announce-bg.png) repeat-x left top;
    border: 1px solid #d8d8d8;
    border-bottom: 1px solid #b4b4b4; }
    #expiration-countdown.banner_notice .fl-l {
      float: left;
      width: 400px; }
      #expiration-countdown.banner_notice .fl-l h3 {
        font-family: inherit;
        font-size: 14px; }
      #expiration-countdown.banner_notice .fl-l > span {
        display: block;
        margin-top: 3px;
        line-height: 1; }
    #expiration-countdown.banner_notice.clearfix:before, #expiration-countdown.banner_notice.clearfix:after {
      content: "";
      display: table; }
    #expiration-countdown.banner_notice.clearfix:after {
      clear: both;
      content: '.';
      display: block;
      visibility: hidden;
      height: 0; }
    #expiration-countdown.banner_notice.clearfix {
      display: block;
      zoom: 1; }
    #expiration-countdown.banner_notice img {
      display: inline;
      padding: 5px;
      background: #FFF;
      border: 1px solid #b4b4b4;
      float: right;
      margin-left: 10px; }
    #expiration-countdown.banner_notice strong {
      color: #333; }
    #expiration-countdown.banner_notice p {
      color: #6b6b6b;
      margin: 2px 0;
      padding: 0;
      font-size: 12px; }
    #expiration-countdown.banner_notice p.first {
      margin: 5px 0 10px 0; }
    #expiration-countdown.banner_notice h2 {
      color: #F60; }
  #expiration-countdown .billcta,
  #expiration-countdown .billcta:visited,
  #expiration-countdown .billcta:link {
    display: inline-block;
    padding: 3px 4px;
    border: 1px solid #06f;
    color: #fff;
    background: #09f url(/images/catsel.gif) repeat-x left top;
    text-decoration: none;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.4);
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    -webkit-box-shadow: 0px 1px 0px rgba(255, 255, 255, 0.76);
    -moz-box-shadow: 0px 1px 0px rgba(255, 255, 255, 0.76);
    box-shadow: 0px 1px 0px rgba(255, 255, 255, 0.6); }
  #expiration-countdown .billcta:hover {
    background-position: left bottom; }
  #expiration-countdown #hide-banner-btn {
    display: none;
    text-align: right; }
  #expiration-countdown .progress_meter {
    float: right;
    width: 470px;
    margin: 0 0 0 15px; }
    #expiration-countdown .progress_meter .bar_w {
      background: #d8d8d8;
      -moz-border-radius: 2px;
      -webkit-border-radius: 2px;
      border-radius: 2px;
      margin: 0 0 3px 0; }
    #expiration-countdown .progress_meter .bar {
      background: #ec1427 url(/images/meter-bgs.png) repeat-x 0 -48px;
      border: 1px solid #ec1427;
      text-align: right;
      -moz-border-radius: 2px;
      -webkit-border-radius: 2px;
      border-radius: 2px; }
      #expiration-countdown .progress_meter .bar span {
        font-weight: bold;
        font-size: 10px;
        color: #FFF;
        padding: 2px 8px;
        display: inline-block; }
    #expiration-countdown .progress_meter .text {
      text-align: right;
      color: #ec1427;
      font-weight: bold; }
    #expiration-countdown .progress_meter span {
      color: #6b6b6b;
      font-weight: normal; }
    #expiration-countdown .progress_meter .icon {
      width: 16px;
      height: 16px;
      background: transparent no-repeat center center scroll;
      margin-right: 6px;
      vertical-align: bottom; }
    #expiration-countdown .progress_meter.low .icon {
      background-image: url(/images/warn16.png); }

.container {
  display: flex; }

html,
body {
  height: 100%;
  font-family: helvetica !important;
  font-size: 1rem;
  background-color: #ffffff;
  color: #4e5d6c; }

a {
  cursor: pointer;
  color: #007CB5; }

a:hover {
  color: #009ce3; }

a:active {
  color: #007CB5; }

button {
  cursor: pointer; }

button:focus {
  outline: 0; }

.btn {
  display: inline-block;
  font-size: 1rem;
  font-weight: normal;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  cursor: pointer;
  user-select: none;
  border-radius: 3px;
  margin: 5px;
  width: inherit;
  padding: 0.75rem;
  font-family: helvetica;
  max-height: 2.8rem;
  -webkit-appearance: none;
  -moz-appearance: none; }

.btn-reduced {
  background: none;
  background-color: none;
  color: #687581;
  border-radius: none;
  box-shadow: none;
  border: none;
  border-image: none; }

.btn-reduced:hover {
  opacity: 0.8; }

.btn-uniform-default {
  background-color: rgba(104, 117, 129, 0.8);
  color: #ffffff;
  border: none; }

.btn-uniform-default:hover {
  background-color: #687581; }

.btn-uniform-default:active {
  background-color: rgba(104, 117, 129, 0.9); }

.btn-block {
  width: 100%;
  display: block; }

.btn-uniform-primary {
  background-color: #009ce3;
  color: white;
  border: 1px solid #009ce3; }

.btn-icon svg {
  margin-right: 10px;
  margin-bottom: 3px;
  fill: currentColor; }

.btn-uniform-primary:hover {
  background-color: #007CB5; }

.btn-uniform-primary:active {
  background-color: #009ce3; }

.btn-subtle {
  color: #687581;
  background-color: rgba(157, 166, 174, 0.2);
  border: none;
  font-weight: bold; }

.btn-subtle:hover {
  background-color: rgba(157, 166, 174, 0.1); }

.btn-subtle:active {
  background-color: rgba(157, 166, 174, 0.3); }

.btn-primary {
  background-color: #009ce3;
  background-image: none !important;
  box-shadow: none; }

.btn-primary:focus {
  background-color: #4DB9EB; }

.btn-confirmation {
  background-color: #84b200;
  border: none; }
  .btn-confirmation.btn-uniform-primary:hover {
    background-color: #84b200; }

.btn {
  font-size: 16px;
  font-weight: bold;
  padding: 0.75rem 1.5rem; }

.btn-sm {
  font-size: 0.875rem;
  padding: 0.5rem;
  margin: 5px; }

.btn-lg {
  font-size: 1.125rem;
  padding: 1rem;
  max-height: none; }

.btn-block {
  display: block;
  width: 100%;
  margin: 10px 0; }

.btn-left {
  margin-right: 0px;
  border-top-right-radius: 0px;
  border-bottom-right-radius: 0px;
  width: 3rem;
  border-right: 1px solid #dbdee1; }

.btn-right {
  margin-left: 0px !important;
  border-top-left-radius: 0px !important;
  border-bottom-left-radius: 0px !important;
  border-left: none !important;
  width: 3rem; }

.form-control {
  display: inline-block;
  font-weight: 1rem;
  white-space: nowrap;
  vertical-align: middle;
  cursor: pointer;
  user-select: none;
  border: 1px solid #afb5bc;
  border-radius: 3px;
  padding: 0.75rem;
  font-size: 1rem;
  margin: 5px;
  -webkit-appearance: none;
  -moz-appearance: none;
  max-width: 100%; }

.form-control::-webkit-input-placeholder {
  color: #687581; }

.form-control:-moz-placeholder {
  /* Firefox 18- */
  color: #687581; }

.form-control::-moz-placeholder {
  /* Firefox 19+ */
  color: #687581; }

.form-control:-ms-input-placeholder {
  color: #687581; }

.form-control-block {
  display: block;
  width: 100%;
  margin: 10px 0; }

.ko-choice-mark {
  border: 0.125rem solid #687581;
  background-color: #FFFFFF;
  border-radius: 0px;
  height: 1rem;
  width: 1rem;
  vertical-align: middle;
  margin-right: .625rem; }
  .ko-choice-mark svg {
    vertical-align: top; }

.ko-checked .ko-choice-mark {
  border: 0.125rem solid #687581;
  background-color: #687581;
  border-radius: 0px; }

.ko-checked .ko-choice-mark svg {
  fill: white; }

.ko-checked:hover .ko-choice-mark svg {
  fill: #dbdee1 !important; }

ul.ko-checkboxes li {
  margin-bottom: 0.5rem; }

h1,
h2,
h3 {
  font-weight: 100; }

h1 {
  font-size: 36px; }

h2 {
  font-size: 28px; }

h3 {
  font-size: 1.375rem; }

.light-text {
  font-weight: 100; }

.text-header {
  margin-bottom: 1rem; }

.row {
  width: 100%;
  display: inline-block;
  padding: 1.5rem 1.5rem;
  border-bottom: 1px solid #edeff0;
  cursor: pointer;
  cursor: hand;
  display: flex;
  font-size: 1rem;
  font-weight: 100;
  color: #232a31;
  height: 66px; }

.row-sm {
  font-size: 13px !important;
  color: #232a31 !important;
  font-weight: normal !important; }

.row:hover {
  background: #f9f9fa; }

.meta-row div,
.row div {
  display: inline-block; }

.row-selected {
  background: #eff0f2;
  box-shadow: inset -10px 0px 0px #009ce3; }

.row div {
  padding-right: 5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-height: 2rem; }

.meta-row {
  width: 100%;
  border-bottom: 1px solid #edeff0;
  padding: 1rem 1.5rem 1rem 1.5rem;
  font-size: 0.875rem;
  color: #687581;
  font-weight: bold !important;
  z-index: 1;
  background-color: white; }

.filters {
  overflow: hidden;
  overflow-y: auto;
  height: 106vh;
  background-color: #f9f9fa;
  color: #232a31;
  font-size: 1.125rem;
  font-weight: 100;
  padding: 1rem; }
  .filters li {
    margin-bottom: 4rem; }
  .filters h3 {
    font-size: 22px;
    font-weight: 100;
    display: inline-block !important;
    margin-bottom: 1rem;
    color: #232a31; }
  .filters a {
    color: #687581;
    margin-top: 2px;
    text-align: right;
    font-size: 0.875rem;
    font-weight: bold;
    float: right;
    margin-bottom: 1rem;
    cursor: pointer; }
  .filters a:hover {
    color: #232a31; }
  .filters a:active {
    color: #4e5d6c; }
  .filters .undoIcon {
    margin-right: 5px;
    margin-bottom: -3px; }
  .filters .filter-header {
    margin-top: 1rem;
    margin-bottom: 0.875rem;
    padding-top: 1rem;
    font-size: 0.875rem;
    color: #232a31;
    font-weight: bold;
    border-top: 1px solid #dbdee1; }
  .filters .filter-row {
    margin-bottom: 0.5rem; }
  .filters .filter-label {
    color: #232a31;
    font-weight: 400;
    font-size: 0.875rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis; }
  .filters .checkbox {
    margin-right: 10px;
    background-color: none; }
  .filters .loading-text {
    margin: 1rem 1rem 1rem 0rem;
    font-size: 1rem;
    color: #232a31;
    font-weight: 100; }

.filter-search-container {
  width: 100%;
  position: relative;
  padding: 0;
  margin: 0; }
  .filter-search-container .filter-search {
    width: 100%;
    padding: 1rem;
    background-color: #ffffff;
    border: 1px solid #afb5bc;
    border-radius: 3px;
    font-size: 1rem;
    padding-left: 40px;
    color: #a5acb4; }
  .filter-search-container .filter-search:hover {
    border: 1px solid #009ce3; }
  .filter-search-container .filter-search:focus {
    border: 1px solid #009ce3;
    background-color: #ffffff;
    color: #232a31; }
  .filter-search-container .icon-search {
    position: absolute;
    bottom: 26px;
    left: 10px;
    width: 10px;
    height: 10px;
    color: red;
    fill: currentColor; }
  .filter-search-container ::-webkit-input-placeholder {
    color: #a5acb4; }
  .filter-search-container :-moz-placeholder {
    /* Firefox 18- */
    color: #a5acb4; }
  .filter-search-container ::-moz-placeholder {
    /* Firefox 19+ */
    color: #a5acb4; }
  .filter-search-container :-ms-input-placeholder {
    color: #a5acb4; }

.scroll-y {
  overflow-y: scroll;
  height: calc(100vh - 90px); }

.groups .group-items .group-item {
  font-size: 1rem;
  padding: 1rem;
  border-bottom: solid #dbdee1 1px;
  cursor: pointer;
  cursor: hand;
  margin: 0 -1rem; }
  .groups .group-items .group-item:first-child {
    border-top: solid #dbdee1 1px; }

.groups .group-items .group-item.selected {
  background: #f9f9fa;
  font-weight: bold;
  box-shadow: inset -10px 0px 0px #009ce3; }

.groups .group-items .group-item:hover {
  background: #ffffff; }

.groups .groups-controls {
  -webkit-box-orient: horizontal;
  -moz-box-orient: horizontal;
  box-orient: horizontal;
  -webkit-box-direction: normal;
  -moz-box-direction: normal;
  box-direction: normal;
  -webkit-flex-direction: row;
  -moz-flex-direction: row;
  flex-direction: row;
  -ms-flex-direction: row;
  display: -webkit-box;
  display: -moz-box;
  display: box;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 1;
  -moz-box-flex: 1;
  box-flex: 1;
  -webkit-flex: 1;
  -moz-flex: 1;
  -ms-flex: 1;
  flex: 1;
  padding-bottom: 1rem; }
  .groups .groups-controls button {
    flex-basis: 50%; }

.header {
  width: 100%;
  padding: 1rem;
  background-color: #f9f9fa;
  border-bottom: 1px solid #e4e6e9; }

.ko-nav {
  display: none; }

.nav-global {
  width: 100%; }

.nav-global-tier1 {
  background-color: #232a31;
  color: #8b959f;
  border-bottom: 1px solid #191f24;
  border-top: 1px solid #191f24;
  width: 100%;
  height: 42px;
  font-size: 0.75rem; }

.nav-global-tier1:before {
  content: "";
  display: inline-block;
  vertical-align: middle;
  height: 100%; }

.nav-global-tier1 div {
  display: inline-block;
  vertical-align: middle; }

.nav-global-tier1 svg {
  margin-right: 1rem;
  display: inline-block; }

.nav-global-tier1 a {
  color: #8b959f;
  padding: 15px; }

.nav-global-tier1 a:hover {
  color: #c5cacf; }

.nav-global-tier1 a:active {
  color: #ffffff;
  background-color: #505964; }

.nav-global-tier1 a.active-tier1-link {
  color: #ffffff;
  background-color: #505964; }

.nav-personal {
  color: #c5cacf;
  border-left: 1px solid #36404b;
  padding-left: 1rem;
  margin-right: 0;
  text-align: right;
  position: relative; }

.nav-personal {
  color: #8b959f;
  font-size: 0.875rem; }

.nav-personal:hover {
  opacity: 0.6;
  cursor: pointer; }

.nav-personal svg {
  margin-right: 0.5rem; }

.nav-global-tier2 {
  background-color: #38434f;
  color: #ffffff;
  border-bottom: 1px solid #2c343e;
  height: 48px;
  width: 100%; }

.nav-global-tier2:before {
  content: "";
  display: inline-block;
  vertical-align: middle;
  height: 100%; }

.nav-global-tier2 div {
  display: inline-block;
  vertical-align: middle; }

.nav-global-tier2 a {
  color: #ffffff;
  font-weight: normal;
  height: 100%;
  padding: 1rem;
  font-size: 0.875rem;
  text-align: center; }

.nav-global-tier2 a:hover {
  background-color: #2c343e; }

.nav-global-tier2 a.active-tier2-link {
  background-color: #505964; }

.nav-global-tier2 a:active {
  background-color: #505964; }

.nav-global-tier2 h5 {
  max-width: 140px;
  white-space: nowrap;
  overflow: hidden; }

@media only screen and (max-width: 75em) {
  .nav-global-tier2 h5 {
    max-width: 160px; } }

@media only screen and (min-width: 75em) and (max-width: 85em) {
  .nav-global-tier2 h5 {
    max-width: 110px; } }

.nav-global-tier3 {
  background-color: #ffffff;
  color: #4e5d6c;
  padding: 0.8rem 1rem 0.8rem 1rem;
  border-bottom: 1px solid #e4e6e9; }

.nav-global-tier3 h3 {
  font-weight: 400;
  color: #232a31; }

.team-selector {
  margin-left: 10px; }

.team-selector p {
  font-size: 0.75rem;
  color: #8b959f;
  margin-bottom: 5px; }

.nav-avatar {
  clip-path: circle(19px at center);
  background-color: white;
  border: 1px solid white;
  border-radius: 50%;
  height: 40px;
  min-width: 40px !important; }

@media only screen and (max-width: 48em) {
  .nav-global-tier2 div {
    display: inherit; } }

.footer-fixed {
  position: fixed;
  bottom: 0px;
  background-color: #f9f9fa;
  border-top: 1px solid #e4e6e9;
  width: 34%;
  padding: 0.5rem 1rem; }
  .footer-fixed div {
    margin: none; }

@media only screen and (max-width: 540px) {
  .dvms-modal {
    width: 90% !important; } }

.rhs-detail {
  border-left: 1px solid #c5cacf;
  height: 100%; }

.de {
  background-color: #232a31;
  color: #c5cacf; }
  .de h2 {
    color: #ffffff; }
  .de a {
    color: #ffffff; }
  .de a:hover {
    color: #c5cacf; }
  .de a:active {
    color: #ffffff; }
  .de .filter-header {
    border-top: 1px solid #4a5866; }
  .de .filter-label {
    color: #c5cacf; }
  .de .loading-text {
    color: #c5cacf; }
  .de .filter-search-container {
    width: 100%;
    position: relative;
    padding: 0;
    margin: 0; }
    .de .filter-search-container .filter-search {
      background-color: #191f24;
      border: 1px solid #4a5866;
      color: #8b959f; }
    .de .filter-search-container .filter-search:hover {
      border: 1px solid #a5acb4; }
    .de .filter-search-container .filter-search:focus {
      border: 1px solid #afb5bc;
      background-color: #ffffff;
      color: #232a31; }
    .de .filter-search-container ::-webkit-input-placeholder {
      color: #8b959f; }
    .de .filter-search-container :-moz-placeholder {
      /* Firefox 18- */
      color: #8b959f; }
    .de .filter-search-container ::-moz-placeholder {
      /* Firefox 19+ */
      color: #8b959f; }
    .de .filter-search-container :-ms-input-placeholder {
      color: #8b959f; }
  .de .group-items .group-item {
    border-bottom: solid #111418 1px; }
    .de .group-items .group-item:first-child {
      border-top: solid #dbdee1 1px; }
  .de .group-items .group-item:hover {
    background: #191f24; }
  .de .group-items .group-item.selected {
    background: #111418;
    box-shadow: inset -10px 0px 0px #009ce3; }
  .de .groups-controls button {
    flex-basis: 50%; }
  .de .btn-uniform-default {
    background: none;
    color: #ffffff;
    border: 1px solid #ffffff; }
  .de .btn-uniform-default:hover {
    background-color: rgba(255, 255, 255, 0.1); }
  .de .btn-uniform-default:active {
    background-color: rgba(255, 255, 255, 0.15); }
  .de .footer-fixed {
    background-color: #191f24;
    border-top: 1px solid #111418; }
  .de .header {
    background-color: #191f24;
    border-bottom: 1px solid #111418; }
  .de .ko-choice-mark {
    border: 0.125rem solid #c5cacf;
    background-color: none;
    border-radius: 2px; }
  .de .ko-checked .ko-choice-mark svg {
    fill: #ffffff; }
  .de .ko-checked .ko-choice-mark {
    border: 0.125rem solid #ffffff; }

/* from https://github.com/kristoferjoseph/flexboxgrid */
/* Uncomment and set these variables to customize the grid. */
.container-fluid {
  margin-right: auto;
  margin-left: auto;
  padding-right: 2rem;
  padding-left: 2rem; }

.account, .permissions-controls {
  margin-top: 20px; }

.grid-row {
  box-sizing: border-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
  -webkit-flex: 0 1 auto;
  -ms-flex: 0 1 auto;
  -webkit-box-flex: 0;
  flex: 0 1 auto;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  flex-direction: row;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin-right: -1rem;
  margin-left: -1rem; }

.grid-row.reverse {
  -webkit-flex-direction: row-reverse;
  -ms-flex-direction: row-reverse;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: reverse;
  flex-direction: row-reverse; }

.col.reverse {
  -webkit-flex-direction: column-reverse;
  -ms-flex-direction: column-reverse;
  -webkit-box-orient: vertical;
  -webkit-box-direction: reverse;
  flex-direction: column-reverse; }

.col-xs,
.col-xs-1,
.col-xs-2,
.col-xs-3,
.col-xs-4,
.col-xs-5,
.col-xs-6,
.col-xs-7,
.col-xs-8,
.col-xs-9,
.col-xs-10,
.col-xs-11,
.col-xs-12 {
  box-sizing: border-box;
  -webkit-flex: 0 0 auto;
  -ms-flex: 0 0 auto;
  -webkit-box-flex: 0;
  flex: 0 0 auto;
  padding-right: 1rem;
  padding-left: 1rem; }

.col-xs {
  -webkit-flex-grow: 1;
  -ms-flex-positive: 1;
  -webkit-box-flex: 1;
  flex-grow: 1;
  -ms-flex-preferred-size: 0;
  -webkit-flex-basis: 0;
  flex-basis: 0;
  max-width: 100%; }

.col-xs-1 {
  -ms-flex-preferred-size: 8.333%;
  -webkit-flex-basis: 8.333%;
  flex-basis: 8.333%;
  max-width: 8.333%; }

.col-xs-2 {
  -ms-flex-preferred-size: 16.667%;
  -webkit-flex-basis: 16.667%;
  flex-basis: 16.667%;
  max-width: 16.667%; }

.col-xs-3 {
  -ms-flex-preferred-size: 25%;
  -webkit-flex-basis: 25%;
  flex-basis: 25%;
  max-width: 25%; }

.col-xs-4 {
  -ms-flex-preferred-size: 33.333%;
  -webkit-flex-basis: 33.333%;
  flex-basis: 33.333%;
  max-width: 33.333%; }

.col-xs-5 {
  -ms-flex-preferred-size: 41.667%;
  -webkit-flex-basis: 41.667%;
  flex-basis: 41.667%;
  max-width: 41.667%; }

.col-xs-6 {
  -ms-flex-preferred-size: 50%;
  -webkit-flex-basis: 50%;
  flex-basis: 50%;
  max-width: 50%; }

.col-xs-7 {
  -ms-flex-preferred-size: 58.333%;
  -webkit-flex-basis: 58.333%;
  flex-basis: 58.333%;
  max-width: 58.333%; }

.col-xs-8 {
  -ms-flex-preferred-size: 66.667%;
  -webkit-flex-basis: 66.667%;
  flex-basis: 66.667%;
  max-width: 66.667%; }

.col-xs-9 {
  -ms-flex-preferred-size: 75%;
  -webkit-flex-basis: 75%;
  flex-basis: 75%;
  max-width: 75%; }

.col-xs-10 {
  -ms-flex-preferred-size: 83.333%;
  -webkit-flex-basis: 83.333%;
  flex-basis: 83.333%;
  max-width: 83.333%; }

.col-xs-11 {
  -ms-flex-preferred-size: 91.667%;
  -webkit-flex-basis: 91.667%;
  flex-basis: 91.667%;
  max-width: 91.667%; }

.col-xs-12 {
  -ms-flex-preferred-size: 100%;
  -webkit-flex-basis: 100%;
  flex-basis: 100%;
  max-width: 100%; }

.col-xs-offset-1 {
  margin-left: 8.333%; }

.col-xs-offset-2 {
  margin-left: 16.667%; }

.col-xs-offset-3 {
  margin-left: 25%; }

.col-xs-offset-4 {
  margin-left: 33.333%; }

.col-xs-offset-5 {
  margin-left: 41.667%; }

.col-xs-offset-6 {
  margin-left: 50%; }

.col-xs-offset-7 {
  margin-left: 58.333%; }

.col-xs-offset-8 {
  margin-left: 66.667%; }

.col-xs-offset-9 {
  margin-left: 75%; }

.col-xs-offset-10 {
  margin-left: 83.333%; }

.col-xs-offset-11 {
  margin-left: 91.667%; }

.start-xs {
  -webkit-justify-content: flex-start;
  -ms-flex-pack: start;
  -webkit-box-pack: start;
  justify-content: flex-start;
  text-align: start; }

.center-xs {
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  -webkit-box-pack: center;
  justify-content: center;
  text-align: center; }

.end-xs {
  -webkit-justify-content: flex-end;
  -ms-flex-pack: end;
  -webkit-box-pack: end;
  justify-content: flex-end;
  text-align: end; }

.top-xs {
  -webkit-align-items: flex-start;
  -ms-flex-align: start;
  -webkit-box-align: start;
  align-items: flex-start; }

.middle-xs {
  -webkit-align-items: center;
  -ms-flex-align: center;
  -webkit-box-align: center;
  align-items: center; }

.bottom-xs {
  -webkit-align-items: flex-end;
  -ms-flex-align: end;
  -webkit-box-align: end;
  align-items: flex-end; }

.around-xs {
  -webkit-justify-content: space-around;
  -ms-flex-pack: distribute;
  justify-content: space-around; }

.between-xs {
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  -webkit-box-pack: justify;
  justify-content: space-between; }

.first-xs {
  -webkit-order: -1;
  -ms-flex-order: -1;
  -webkit-box-ordinal-group: 0;
  order: -1; }

.last-xs {
  -webkit-order: 1;
  -ms-flex-order: 1;
  -webkit-box-ordinal-group: 2;
  order: 1; }

@media only screen and (min-width: 48em) {
  .container {
    width: 46rem; }
  .col-sm,
  .col-sm-1,
  .col-sm-2,
  .col-sm-3,
  .col-sm-4,
  .col-sm-5,
  .col-sm-6,
  .col-sm-7,
  .col-sm-8,
  .col-sm-9,
  .col-sm-10,
  .col-sm-11,
  .col-sm-12 {
    box-sizing: border-box;
    -webkit-flex: 0 0 auto;
    -ms-flex: 0 0 auto;
    -webkit-box-flex: 0;
    flex: 0 0 auto;
    padding-right: 1rem;
    padding-left: 1rem; }
  .col-sm {
    -webkit-flex-grow: 1;
    -ms-flex-positive: 1;
    -webkit-box-flex: 1;
    flex-grow: 1;
    -ms-flex-preferred-size: 0;
    -webkit-flex-basis: 0;
    flex-basis: 0;
    max-width: 100%; }
  .col-sm-1 {
    -ms-flex-preferred-size: 8.333%;
    -webkit-flex-basis: 8.333%;
    flex-basis: 8.333%;
    max-width: 8.333%; }
  .col-sm-2 {
    -ms-flex-preferred-size: 16.667%;
    -webkit-flex-basis: 16.667%;
    flex-basis: 16.667%;
    max-width: 16.667%; }
  .col-sm-3 {
    -ms-flex-preferred-size: 25%;
    -webkit-flex-basis: 25%;
    flex-basis: 25%;
    max-width: 25%; }
  .col-sm-4 {
    -ms-flex-preferred-size: 33.333%;
    -webkit-flex-basis: 33.333%;
    flex-basis: 33.333%;
    max-width: 33.333%; }
  .col-sm-5 {
    -ms-flex-preferred-size: 41.667%;
    -webkit-flex-basis: 41.667%;
    flex-basis: 41.667%;
    max-width: 41.667%; }
  .col-sm-6 {
    -ms-flex-preferred-size: 50%;
    -webkit-flex-basis: 50%;
    flex-basis: 50%;
    max-width: 50%; }
  .col-sm-7 {
    -ms-flex-preferred-size: 58.333%;
    -webkit-flex-basis: 58.333%;
    flex-basis: 58.333%;
    max-width: 58.333%; }
  .col-sm-8 {
    -ms-flex-preferred-size: 66.667%;
    -webkit-flex-basis: 66.667%;
    flex-basis: 66.667%;
    max-width: 66.667%; }
  .col-sm-9 {
    -ms-flex-preferred-size: 75%;
    -webkit-flex-basis: 75%;
    flex-basis: 75%;
    max-width: 75%; }
  .col-sm-10 {
    -ms-flex-preferred-size: 83.333%;
    -webkit-flex-basis: 83.333%;
    flex-basis: 83.333%;
    max-width: 83.333%; }
  .col-sm-11 {
    -ms-flex-preferred-size: 91.667%;
    -webkit-flex-basis: 91.667%;
    flex-basis: 91.667%;
    max-width: 91.667%; }
  .col-sm-12 {
    -ms-flex-preferred-size: 100%;
    -webkit-flex-basis: 100%;
    flex-basis: 100%;
    max-width: 100%; }
  .col-sm-offset-1 {
    margin-left: 8.333%; }
  .col-sm-offset-2 {
    margin-left: 16.667%; }
  .col-sm-offset-3 {
    margin-left: 25%; }
  .col-sm-offset-4 {
    margin-left: 33.333%; }
  .col-sm-offset-5 {
    margin-left: 41.667%; }
  .col-sm-offset-6 {
    margin-left: 50%; }
  .col-sm-offset-7 {
    margin-left: 58.333%; }
  .col-sm-offset-8 {
    margin-left: 66.667%; }
  .col-sm-offset-9 {
    margin-left: 75%; }
  .col-sm-offset-10 {
    margin-left: 83.333%; }
  .col-sm-offset-11 {
    margin-left: 91.667%; }
  .start-sm {
    -webkit-justify-content: flex-start;
    -ms-flex-pack: start;
    -webkit-box-pack: start;
    justify-content: flex-start;
    text-align: start; }
  .center-sm {
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    -webkit-box-pack: center;
    justify-content: center;
    text-align: center; }
  .end-sm {
    -webkit-justify-content: flex-end;
    -ms-flex-pack: end;
    -webkit-box-pack: end;
    justify-content: flex-end;
    text-align: end; }
  .top-sm {
    -webkit-align-items: flex-start;
    -ms-flex-align: start;
    -webkit-box-align: start;
    align-items: flex-start; }
  .middle-sm {
    -webkit-align-items: center;
    -ms-flex-align: center;
    -webkit-box-align: center;
    align-items: center; }
  .bottom-sm {
    -webkit-align-items: flex-end;
    -ms-flex-align: end;
    -webkit-box-align: end;
    align-items: flex-end; }
  .around-sm {
    -webkit-justify-content: space-around;
    -ms-flex-pack: distribute;
    justify-content: space-around; }
  .between-sm {
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    -webkit-box-pack: justify;
    justify-content: space-between; }
  .first-sm {
    -webkit-order: -1;
    -ms-flex-order: -1;
    -webkit-box-ordinal-group: 0;
    order: -1; }
  .last-sm {
    -webkit-order: 1;
    -ms-flex-order: 1;
    -webkit-box-ordinal-group: 2;
    order: 1; } }

@media only screen and (min-width: 62em) {
  .container {
    width: 61rem; }
  .col-md,
  .col-md-1,
  .col-md-2,
  .col-md-3,
  .col-md-4,
  .col-md-5,
  .col-md-6,
  .col-md-7,
  .col-md-8,
  .col-md-9,
  .col-md-10,
  .col-md-11,
  .col-md-12 {
    box-sizing: border-box;
    -webkit-flex: 0 0 auto;
    -ms-flex: 0 0 auto;
    -webkit-box-flex: 0;
    flex: 0 0 auto;
    padding-right: 1rem;
    padding-left: 1rem; }
  .col-md {
    -webkit-flex-grow: 1;
    -ms-flex-positive: 1;
    -webkit-box-flex: 1;
    flex-grow: 1;
    -ms-flex-preferred-size: 0;
    -webkit-flex-basis: 0;
    flex-basis: 0;
    max-width: 100%; }
  .col-md-1 {
    -ms-flex-preferred-size: 8.333%;
    -webkit-flex-basis: 8.333%;
    flex-basis: 8.333%;
    max-width: 8.333%; }
  .col-md-2 {
    -ms-flex-preferred-size: 16.667%;
    -webkit-flex-basis: 16.667%;
    flex-basis: 16.667%;
    max-width: 16.667%; }
  .col-md-3 {
    -ms-flex-preferred-size: 25%;
    -webkit-flex-basis: 25%;
    flex-basis: 25%;
    max-width: 25%; }
  .col-md-4 {
    -ms-flex-preferred-size: 33.333%;
    -webkit-flex-basis: 33.333%;
    flex-basis: 33.333%;
    max-width: 33.333%; }
  .col-md-5 {
    -ms-flex-preferred-size: 41.667%;
    -webkit-flex-basis: 41.667%;
    flex-basis: 41.667%;
    max-width: 41.667%; }
  .col-md-6 {
    -ms-flex-preferred-size: 50%;
    -webkit-flex-basis: 50%;
    flex-basis: 50%;
    max-width: 50%; }
  .col-md-7 {
    -ms-flex-preferred-size: 58.333%;
    -webkit-flex-basis: 58.333%;
    flex-basis: 58.333%;
    max-width: 58.333%; }
  .col-md-8 {
    -ms-flex-preferred-size: 66.667%;
    -webkit-flex-basis: 66.667%;
    flex-basis: 66.667%;
    max-width: 66.667%; }
  .col-md-9 {
    -ms-flex-preferred-size: 75%;
    -webkit-flex-basis: 75%;
    flex-basis: 75%;
    max-width: 75%; }
  .col-md-10 {
    -ms-flex-preferred-size: 83.333%;
    -webkit-flex-basis: 83.333%;
    flex-basis: 83.333%;
    max-width: 83.333%; }
  .col-md-11 {
    -ms-flex-preferred-size: 91.667%;
    -webkit-flex-basis: 91.667%;
    flex-basis: 91.667%;
    max-width: 91.667%; }
  .col-md-12 {
    -ms-flex-preferred-size: 100%;
    -webkit-flex-basis: 100%;
    flex-basis: 100%;
    max-width: 100%; }
  .col-md-offset-1 {
    margin-left: 8.333%; }
  .col-md-offset-2 {
    margin-left: 16.667%; }
  .col-md-offset-3 {
    margin-left: 25%; }
  .col-md-offset-4 {
    margin-left: 33.333%; }
  .col-md-offset-5 {
    margin-left: 41.667%; }
  .col-md-offset-6 {
    margin-left: 50%; }
  .col-md-offset-7 {
    margin-left: 58.333%; }
  .col-md-offset-8 {
    margin-left: 66.667%; }
  .col-md-offset-9 {
    margin-left: 75%; }
  .col-md-offset-10 {
    margin-left: 83.333%; }
  .col-md-offset-11 {
    margin-left: 91.667%; }
  .start-md {
    -webkit-justify-content: flex-start;
    -ms-flex-pack: start;
    -webkit-box-pack: start;
    justify-content: flex-start;
    text-align: start; }
  .center-md {
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    -webkit-box-pack: center;
    justify-content: center;
    text-align: center; }
  .end-md {
    -webkit-justify-content: flex-end;
    -ms-flex-pack: end;
    -webkit-box-pack: end;
    justify-content: flex-end;
    text-align: end; }
  .top-md {
    -webkit-align-items: flex-start;
    -ms-flex-align: start;
    -webkit-box-align: start;
    align-items: flex-start; }
  .middle-md {
    -webkit-align-items: center;
    -ms-flex-align: center;
    -webkit-box-align: center;
    align-items: center; }
  .bottom-md {
    -webkit-align-items: flex-end;
    -ms-flex-align: end;
    -webkit-box-align: end;
    align-items: flex-end; }
  .around-md {
    -webkit-justify-content: space-around;
    -ms-flex-pack: distribute;
    justify-content: space-around; }
  .between-md {
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    -webkit-box-pack: justify;
    justify-content: space-between; }
  .first-md {
    -webkit-order: -1;
    -ms-flex-order: -1;
    -webkit-box-ordinal-group: 0;
    order: -1; }
  .last-md {
    -webkit-order: 1;
    -ms-flex-order: 1;
    -webkit-box-ordinal-group: 2;
    order: 1; } }

@media only screen and (min-width: 75em) {
  .container {
    width: 71rem; }
  .col-lg,
  .col-lg-1,
  .col-lg-2,
  .col-lg-3,
  .col-lg-4,
  .col-lg-5,
  .col-lg-6,
  .col-lg-7,
  .col-lg-8,
  .col-lg-9,
  .col-lg-10,
  .col-lg-11,
  .col-lg-12 {
    box-sizing: border-box;
    -webkit-flex: 0 0 auto;
    -ms-flex: 0 0 auto;
    -webkit-box-flex: 0;
    flex: 0 0 auto;
    padding-right: 1rem;
    padding-left: 1rem; }
  .col-lg {
    -webkit-flex-grow: 1;
    -ms-flex-positive: 1;
    -webkit-box-flex: 1;
    flex-grow: 1;
    -ms-flex-preferred-size: 0;
    -webkit-flex-basis: 0;
    flex-basis: 0;
    max-width: 100%; }
  .col-lg-1 {
    -ms-flex-preferred-size: 8.333%;
    -webkit-flex-basis: 8.333%;
    flex-basis: 8.333%;
    max-width: 8.333%; }
  .col-lg-2 {
    -ms-flex-preferred-size: 16.667%;
    -webkit-flex-basis: 16.667%;
    flex-basis: 16.667%;
    max-width: 16.667%; }
  .col-lg-3 {
    -ms-flex-preferred-size: 25%;
    -webkit-flex-basis: 25%;
    flex-basis: 25%;
    max-width: 25%; }
  .col-lg-4 {
    -ms-flex-preferred-size: 33.333%;
    -webkit-flex-basis: 33.333%;
    flex-basis: 33.333%;
    max-width: 33.333%; }
  .col-lg-5 {
    -ms-flex-preferred-size: 41.667%;
    -webkit-flex-basis: 41.667%;
    flex-basis: 41.667%;
    max-width: 41.667%; }
  .col-lg-6 {
    -ms-flex-preferred-size: 50%;
    -webkit-flex-basis: 50%;
    flex-basis: 50%;
    max-width: 50%; }
  .col-lg-7 {
    -ms-flex-preferred-size: 58.333%;
    -webkit-flex-basis: 58.333%;
    flex-basis: 58.333%;
    max-width: 58.333%; }
  .col-lg-8 {
    -ms-flex-preferred-size: 66.667%;
    -webkit-flex-basis: 66.667%;
    flex-basis: 66.667%;
    max-width: 66.667%; }
  .col-lg-9 {
    -ms-flex-preferred-size: 75%;
    -webkit-flex-basis: 75%;
    flex-basis: 75%;
    max-width: 75%; }
  .col-lg-10 {
    -ms-flex-preferred-size: 83.333%;
    -webkit-flex-basis: 83.333%;
    flex-basis: 83.333%;
    max-width: 83.333%; }
  .col-lg-11 {
    -ms-flex-preferred-size: 91.667%;
    -webkit-flex-basis: 91.667%;
    flex-basis: 91.667%;
    max-width: 91.667%; }
  .col-lg-12 {
    -ms-flex-preferred-size: 100%;
    -webkit-flex-basis: 100%;
    flex-basis: 100%;
    max-width: 100%; }
  .col-lg-offset-1 {
    margin-left: 8.333%; }
  .col-lg-offset-2 {
    margin-left: 16.667%; }
  .col-lg-offset-3 {
    margin-left: 25%; }
  .col-lg-offset-4 {
    margin-left: 33.333%; }
  .col-lg-offset-5 {
    margin-left: 41.667%; }
  .col-lg-offset-6 {
    margin-left: 50%; }
  .col-lg-offset-7 {
    margin-left: 58.333%; }
  .col-lg-offset-8 {
    margin-left: 66.667%; }
  .col-lg-offset-9 {
    margin-left: 75%; }
  .col-lg-offset-10 {
    margin-left: 83.333%; }
  .col-lg-offset-11 {
    margin-left: 91.667%; }
  .start-lg {
    -webkit-justify-content: flex-start;
    -ms-flex-pack: start;
    -webkit-box-pack: start;
    justify-content: flex-start;
    text-align: start; }
  .center-lg {
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    -webkit-box-pack: center;
    justify-content: center;
    text-align: center; }
  .end-lg {
    -webkit-justify-content: flex-end;
    -ms-flex-pack: end;
    -webkit-box-pack: end;
    justify-content: flex-end;
    text-align: end; }
  .top-lg {
    -webkit-align-items: flex-start;
    -ms-flex-align: start;
    -webkit-box-align: start;
    align-items: flex-start; }
  .middle-lg {
    -webkit-align-items: center;
    -ms-flex-align: center;
    -webkit-box-align: center;
    align-items: center; }
  .bottom-lg {
    -webkit-align-items: flex-end;
    -ms-flex-align: end;
    -webkit-box-align: end;
    align-items: flex-end; }
  .around-lg {
    -webkit-justify-content: space-around;
    -ms-flex-pack: distribute;
    justify-content: space-around; }
  .between-lg {
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    -webkit-box-pack: justify;
    justify-content: space-between; }
  .first-lg {
    -webkit-order: -1;
    -ms-flex-order: -1;
    -webkit-box-ordinal-group: 0;
    order: -1; }
  .last-lg {
    -webkit-order: 1;
    -ms-flex-order: 1;
    -webkit-box-ordinal-group: 2;
    order: 1; } }

.hide-columns-right {
  padding-right: 0; }

.hide-columns {
  padding-right: 0;
  padding-left: 0; }

.grid-row {
  margin-right: 0; }

.zero-margin {
  margin: 0rem !important; }

@media only screen and (max-width: 34em) {
  .hidden-xs {
    display: none; } }

@media only screen and (max-width: 48em) {
  .hidden-sm {
    display: none; } }

@media only screen and (max-width: 62em) {
  .hidden-md {
    display: none; } }

@media only screen and (max-width: 75em) {
  .hidden-lg {
    display: none; } }

@media only screen and (min-width: 34em) {
  .hidden-xs-plus {
    display: none; } }

@media only screen and (min-width: 48em) {
  .hidden-sm-plus {
    display: none; } }

@media only screen and (min-width: 62em) {
  .hidden-md-plus {
    display: none; } }

@media only screen and (min-width: 75em) {
  .hidden-lg-plus {
    display: none; } }

@media (min-width: 48em) and (max-width: 917px) {
  .hidden-ipadmini-portrait {
    display: none; } }

@media only screen and (min-width: 917px) {
  .hidden-ipadmini-portrait-plus {
    display: none; } }

@media only screen and (max-width: 767px) {
  .hidden-ipadmini-portrait-plus {
    display: none; } }

body {
  background-color: black; }

#LoginApp {
  background-image: url("https://static.hudl.com/dvms/premier-league-login-2025.jpg");
  background-size: cover;
  background-color: black;
  height: 100%;
  background-position: center; }