@charset "UTF-8";
/*! normalize.css v3.0.2 | MIT License | git.io/normalize */
/**
 * 1. Set default font family to sans-serif.
 * 2. Prevent iOS text size adjust after orientation change, without disabling
 *    user zoom.
 */
html {
  font-family: sans-serif;
  /* 1 */
  -ms-text-size-adjust: 100%;
  /* 2 */
  -webkit-text-size-adjust: 100%;
  /* 2 */
}

/**
 * Remove default margin.
 */
body {
  margin: 0;
}

/* HTML5 display definitions
   ========================================================================== */
/**
 * Correct `block` display not defined for any HTML5 element in IE 8/9.
 * Correct `block` display not defined for `details` or `summary` in IE 10/11
 * and Firefox.
 * Correct `block` display not defined for `main` in IE 11.
 */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section,
summary {
  display: block;
}

/**
 * 1. Correct `inline-block` display not defined in IE 8/9.
 * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.
 */
audio,
canvas,
progress,
video {
  display: inline-block;
  /* 1 */
  vertical-align: baseline;
  /* 2 */
}

/**
 * Prevent modern browsers from displaying `audio` without controls.
 * Remove excess height in iOS 5 devices.
 */
audio:not([controls]) {
  display: none;
  height: 0;
}

/**
 * Address `[hidden]` styling not present in IE 8/9/10.
 * Hide the `template` element in IE 8/9/11, Safari, and Firefox < 22.
 */
[hidden],
template {
  display: none;
}

/* Links
   ========================================================================== */
/**
 * Remove the gray background color from active links in IE 10.
 */
a {
  background-color: transparent;
}

/**
 * Improve readability when focused and also mouse hovered in all browsers.
 */
a:active,
a:hover {
  outline: 0;
}

/* Text-level semantics
   ========================================================================== */
/**
 * Address styling not present in IE 8/9/10/11, Safari, and Chrome.
 */
abbr[title] {
  border-bottom: 1px dotted;
}

/**
 * Address style set to `bolder` in Firefox 4+, Safari, and Chrome.
 */
b,
strong {
  font-weight: bold;
}

/**
 * Address styling not present in Safari and Chrome.
 */
dfn {
  font-style: italic;
}

/**
 * Address variable `h1` font-size and margin within `section` and `article`
 * contexts in Firefox 4+, Safari, and Chrome.
 */
h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

/**
 * Address styling not present in IE 8/9.
 */
mark {
  background: #ff0;
  color: #000;
}

/**
 * Address inconsistent and variable font size in all browsers.
 */
small {
  font-size: 80%;
}

/**
 * Prevent `sub` and `sup` affecting `line-height` in all browsers.
 */
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sup {
  top: -0.5em;
}

sub {
  bottom: -0.25em;
}

/* Embedded content
   ========================================================================== */
/**
 * Remove border when inside `a` element in IE 8/9/10.
 */
img {
  border: 0;
}

/**
 * Correct overflow not hidden in IE 9/10/11.
 */
svg:not(:root) {
  overflow: hidden;
}

/* Grouping content
   ========================================================================== */
/**
 * Address margin not present in IE 8/9 and Safari.
 */
figure {
  margin: 1em 40px;
}

/**
 * Address differences between Firefox and other browsers.
 */
hr {
  box-sizing: content-box;
  height: 0;
}

/**
 * Contain overflow in all browsers.
 */
pre {
  overflow: auto;
}

/**
 * Address odd `em`-unit font size rendering in all browsers.
 */
code,
kbd,
pre,
samp {
  font-family: monospace, monospace;
  font-size: 1em;
}

/* Forms
   ========================================================================== */
/**
 * Known limitation: by default, Chrome and Safari on OS X allow very limited
 * styling of `select`, unless a `border` property is set.
 */
/**
 * 1. Correct color not being inherited.
 *    Known issue: affects color of disabled elements.
 * 2. Correct font properties not being inherited.
 * 3. Address margins set differently in Firefox 4+, Safari, and Chrome.
 */
button,
input,
optgroup,
select,
textarea {
  color: inherit;
  /* 1 */
  font: inherit;
  /* 2 */
  margin: 0;
  /* 3 */
}

/**
 * Address `overflow` set to `hidden` in IE 8/9/10/11.
 */
button {
  overflow: visible;
}

/**
 * Address inconsistent `text-transform` inheritance for `button` and `select`.
 * All other form control elements do not inherit `text-transform` values.
 * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera.
 * Correct `select` style inheritance in Firefox.
 */
button,
select {
  text-transform: none;
}

/**
 * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
 *    and `video` controls.
 * 2. Correct inability to style clickable `input` types in iOS.
 * 3. Improve usability and consistency of cursor style between image-type
 *    `input` and others.
 */
button,
html input[type=button],
input[type=reset],
input[type=submit] {
  -webkit-appearance: button;
  /* 2 */
  cursor: pointer;
  /* 3 */
}

/**
 * Re-set default cursor for disabled elements.
 */
button[disabled],
html input[disabled] {
  cursor: default;
}

/**
 * Remove inner padding and border in Firefox 4+.
 */
button::-moz-focus-inner,
input::-moz-focus-inner {
  border: 0;
  padding: 0;
}

/**
 * Address Firefox 4+ setting `line-height` on `input` using `!important` in
 * the UA stylesheet.
 */
input {
  line-height: normal;
}

/**
 * It's recommended that you don't attempt to style these elements.
 * Firefox's implementation doesn't respect box-sizing, padding, or width.
 *
 * 1. Address box sizing set to `content-box` in IE 8/9/10.
 * 2. Remove excess padding in IE 8/9/10.
 */
input[type=checkbox],
input[type=radio] {
  box-sizing: border-box;
  /* 1 */
  padding: 0;
  /* 2 */
}

/**
 * Fix the cursor style for Chrome's increment/decrement buttons. For certain
 * `font-size` values of the `input`, it causes the cursor style of the
 * decrement button to change from `default` to `text`.
 */
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  height: auto;
}

/**
 * 1. Address `appearance` set to `searchfield` in Safari and Chrome.
 * 2. Address `box-sizing` set to `border-box` in Safari and Chrome
 *    (include `-moz` to future-proof).
 */
input[type=search] {
  -webkit-appearance: textfield;
  /* 1 */
  /* 2 */
  box-sizing: content-box;
}

/**
 * Remove inner padding and search cancel button in Safari and Chrome on OS X.
 * Safari (but not Chrome) clips the cancel button when the search input has
 * padding (and `textfield` appearance).
 */
input[type=search]::-webkit-search-cancel-button,
input[type=search]::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
 * Define consistent border, margin, and padding.
 */
fieldset {
  border: 1px solid #c0c0c0;
  margin: 0 2px;
  padding: 0.35em 0.625em 0.75em;
}

/**
 * 1. Correct `color` not being inherited in IE 8/9/10/11.
 * 2. Remove padding so people aren't caught out if they zero out fieldsets.
 */
legend {
  border: 0;
  /* 1 */
  padding: 0;
  /* 2 */
}

/**
 * Remove default vertical scrollbar in IE 8/9/10/11.
 */
textarea {
  overflow: auto;
}

/**
 * Don't inherit the `font-weight` (applied by a rule above).
 * NOTE: the default cannot safely be changed in Chrome and Safari on OS X.
 */
optgroup {
  font-weight: bold;
}

/* Tables
   ========================================================================== */
/**
 * Remove most spacing between table cells.
 */
table {
  border-collapse: collapse;
  border-spacing: 0;
}

td,
th {
  padding: 0;
}

/**
 * Micro clearfix hack http://nicolasgallagher.com/micro-clearfix-hack/
 * This clearfix hack can be used on the container element that has floated
 * elements without adding new markup
 */
/** Vertically center an element in another with this mixin **/
/**
 * Source: https://css-tricks.com/snippets/css/retina-display-media-query/
 */
.c--btn-new-window:after, .c--btn-next:after {
  font-family: "Duo Admin Icons" !important;
  font-style: normal !important;
  font-weight: 400 !important;
  font-variant: normal !important;
  text-transform: none !important;
  speak: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.c--btn-new-window:hover:after, .c--btn-next:hover:after {
  box-shadow: none;
}

html {
  box-sizing: border-box;
}

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

html, body {
  min-height: 100vh;
}

body {
  background-color: #f7f7f7;
  color: #333;
}
@media screen and (max-resolution: 120dpi) {
  body {
    color: #000;
  }
}

a {
  transition-property: color;
  transition-duration: 0.2s;
  transition-timing-function: ease;
  color: #379ed4;
}
a:hover {
  color: #22729d;
}
a:focus {
  outline: 2px solid #63B246;
}

a[target=_blank] i.icon-new-window {
  display: inline-block;
  text-decoration: none;
  padding-left: 4px;
  font-size: 80%;
}

dl {
  margin-top: 0;
}

p, li {
  margin-bottom: 0.875rem;
}
p:last-child, li:last-child {
  margin-bottom: 0;
}

.disabled, .disabled h1, .disabled h2, .disabled h3, .disabled h4, .disabled h5, .disabled h6, .disabled-row, .disabled-row h1, .disabled-row h2, .disabled-row h3, .disabled-row h4, .disabled-row h5, .disabled-row h6 {
  color: rgba(51, 51, 51, 0.5);
}
.disabled a, .disabled-row a {
  color: rgba(26, 26, 26, 0.5);
}

.disabled-row {
  color: #999;
}
.disabled-row a {
  color: #777;
}

/**
 * Micro clearfix hack http://nicolasgallagher.com/micro-clearfix-hack/
 * This clearfix hack can be used on the container element that has floated
 * elements without adding new markup
 */
/** Vertically center an element in another with this mixin **/
/**
 * Source: https://css-tricks.com/snippets/css/retina-display-media-query/
 */
.c--btn-new-window:after, .c--btn-next:after {
  font-family: "Duo Admin Icons" !important;
  font-style: normal !important;
  font-weight: 400 !important;
  font-variant: normal !important;
  text-transform: none !important;
  speak: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.c--btn-new-window:hover:after, .c--btn-next:hover:after {
  box-shadow: none;
}

body {
  color: #333;
  font-family: "Helvetica Neue", helvetica, arial, sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
}

p {
  margin-top: 0;
}

h1, .h1 {
  color: #666;
  font-family: "Helvetica Neue", helvetica, arial, sans-serif;
  font-size: 32px;
  font-weight: 400;
  /* stylelint-disable-line font-weight-notation */
  line-height: 44px;
  margin: 0 0 22px;
}
@media screen and (max-resolution: 120dpi) {
  h1, .h1 {
    color: #000;
  }
}

h2, .h2 {
  color: #666;
  font-family: "Helvetica Neue", helvetica, arial, sans-serif;
  font-size: 24px;
  font-weight: 400;
  /* stylelint-disable-line font-weight-notation */
  line-height: 32px;
  margin: 0 0 16px;
}
@media screen and (max-resolution: 120dpi) {
  h2, .h2 {
    color: #000;
  }
}

h3, .h3 {
  color: #666;
  font-family: "Helvetica Neue", helvetica, arial, sans-serif;
  font-size: 20px;
  font-weight: 400;
  /* stylelint-disable-line font-weight-notation */
  line-height: 28px;
  margin: 0 0 14px;
}
@media screen and (max-resolution: 120dpi) {
  h3, .h3 {
    color: #000;
  }
}

h4, .h4 {
  color: #666;
  font-family: "Helvetica Neue", helvetica, arial, sans-serif;
  font-size: 18px;
  font-weight: 400;
  /* stylelint-disable-line font-weight-notation */
  line-height: 26px;
  margin: 0 0 13px;
}
@media screen and (max-resolution: 120dpi) {
  h4, .h4 {
    color: #000;
  }
}

h5, .h5 {
  color: #666;
  font-family: "Helvetica Neue", helvetica, arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  /* stylelint-disable-line font-weight-notation */
  line-height: 22px;
  margin: 0 0 11px;
}
@media screen and (max-resolution: 120dpi) {
  h5, .h5 {
    color: #000;
  }
}

h6, .h6 {
  color: #666;
  font-family: "Helvetica Neue", helvetica, arial, sans-serif;
  font-size: 14px;
  font-weight: 400;
  /* stylelint-disable-line font-weight-notation */
  line-height: 20px;
  margin: 0 0 10px;
}
@media screen and (max-resolution: 120dpi) {
  h6, .h6 {
    color: #000;
  }
}

/**
 * Micro clearfix hack http://nicolasgallagher.com/micro-clearfix-hack/
 * This clearfix hack can be used on the container element that has floated
 * elements without adding new markup
 */
/** Vertically center an element in another with this mixin **/
/**
 * Source: https://css-tricks.com/snippets/css/retina-display-media-query/
 */
.c--btn-new-window:after, .c--btn-next:after {
  font-family: "Duo Admin Icons" !important;
  font-style: normal !important;
  font-weight: 400 !important;
  font-variant: normal !important;
  text-transform: none !important;
  speak: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.c--btn-new-window:hover:after, .c--btn-next:hover:after {
  box-shadow: none;
}

.box {
  background-color: #fff;
  border-radius: 3px;
  padding: 1rem;
  margin-bottom: 2rem;
}
.box.disabled {
  background: rgba(255, 255, 255, 0.65);
  color: rgba(51, 51, 51, 0.5);
}

.box-header {
  border-bottom: 1px solid #e1e1e1;
  padding-bottom: 24px;
  position: relative;
}
.box-header:before, .box-header:after {
  content: " ";
  display: table;
}
.box-header:after {
  clear: both;
}
.ie .box-header {
  *zoom: 1;
}
.box-header h3 {
  margin-bottom: 4px;
}

.box-header-group {
  float: left;
}

.box-header-info {
  color: #888;
  display: block;
}

.box-header-buttons {
  float: right;
  margin-top: 8px;
}
.box-header-buttons > * {
  float: right;
  margin-left: 16px;
}

/**
 * Micro clearfix hack http://nicolasgallagher.com/micro-clearfix-hack/
 * This clearfix hack can be used on the container element that has floated
 * elements without adding new markup
 */
/** Vertically center an element in another with this mixin **/
/**
 * Source: https://css-tricks.com/snippets/css/retina-display-media-query/
 */
.c--btn-new-window:after, .c--btn-next:after {
  font-family: "Duo Admin Icons" !important;
  font-style: normal !important;
  font-weight: 400 !important;
  font-variant: normal !important;
  text-transform: none !important;
  speak: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.c--btn-new-window:hover:after, .c--btn-next:hover:after {
  box-shadow: none;
}

form:not(.inline) {
  background-color: #fff;
  border-radius: 3px;
  padding: 1rem;
  margin-bottom: 2rem;
}
form:not(.inline).disabled {
  background: rgba(255, 255, 255, 0.65);
  color: rgba(51, 51, 51, 0.5);
}

fieldset {
  border: none;
  margin: 1rem 0;
  padding: 0;
}

legend {
  font-size: 16px;
  font-weight: 400;
}

label {
  color: #888;
}
[type=checkbox] + label, [type=radio] + label {
  color: inherit;
}
label span {
  color: #333;
}
@media screen and (max-resolution: 120dpi) {
  label {
    color: #444;
  }
}

ul.error-list {
  list-style-type: none;
  padding: 0;
  margin: 0;
}
ul.error-list li {
  font-size: 12px;
  color: #cf6e71;
  margin: 2px 0;
}

.description:not(th) {
  background-color: #dfeff8;
  padding: 1rem;
  margin-top: -1rem;
  margin-left: -1rem;
  margin-right: -1rem;
  margin-bottom: 1rem;
}
.description:not(th) > :last-child {
  margin-bottom: 0;
}
.description:not(th).secure-payment {
  background: #FFFFB0 url("/static/images/lock.png") no-repeat 11px 14px;
  color: #333;
  padding-left: 50px;
  padding-right: 90px;
}

.line {
  clear: both;
  margin-bottom: 1rem;
}
.line:before, .line:after {
  content: " ";
  display: table;
}
.line:after {
  clear: both;
}
.ie .line {
  *zoom: 1;
}
.line:not(.vertical) > label:first-of-type {
  min-width: 12rem;
  padding-top: 6px;
  float: left;
  text-align: right;
  line-height: 18px;
}
.line .field {
  float: left;
  width: calc(100% - 13rem);
}
.line.close {
  margin-top: -0.75rem;
}
.line.indent {
  margin-left: 0;
  padding-left: 1rem;
  padding-right: 1rem;
}
.line:last-child {
  margin-bottom: 0;
}
.flexbox .line:not(.vertical) {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: baseline;
      align-items: baseline;
}
.flexbox .line:not(.vertical).hidden {
  display: none;
}
.flexbox .line:not(.vertical) .field {
  -ms-flex: 1 0 0;
      flex: 1 0 0;
  margin-left: 1rem;
}

.subline {
  display: block;
  margin-bottom: 0.5rem;
}

.indent {
  margin-left: 2rem;
}

.actions {
  padding: 0 0.25rem 0.25rem 13rem;
}

.has_error {
  color: #a13639;
  font-weight: 600;
}

.access-read-only input.text[readonly], .access-read-only textarea[readonly] {
  border: none;
  box-shadow: none;
}
.access-read-only textarea[readonly] {
  background: none;
  resize: none;
}
.access-read-only textarea[readonly]:focus {
  outline: none;
}

/* FORM ELEMENTS */
button, input, select, textarea {
  font-size: 100%;
  margin: 0;
  vertical-align: baseline;
}
button.error, input.error, select.error, textarea.error {
  border-color: #cf6e71;
}

button, input {
  line-height: normal;
}

input, textarea, select {
  border-color: #ccc;
}
@media screen and (max-resolution: 120dpi) {
  input, textarea, select {
    border-color: #dadada;
  }
}

input, textarea {
  transition-property: color, border-color, box-shadow;
  transition-duration: 0.2s;
  transition-timing-function: ease;
  font-family: "Helvetica Neue", helvetica, arial, sans-serif;
  border-width: 2px;
  border-style: solid;
  border-radius: 3px;
  color: #666;
  padding: 0.5em;
  width: 100%;
  outline: none;
}
input:hover, textarea:hover {
  border-color: #d4d4d4;
}
input:focus, textarea:focus {
  color: #333;
  border-color: #63B246;
  box-shadow: 0 0 5px 0 rgba(99, 178, 70, 0.5);
}
input.half-width, textarea.half-width {
  width: 50%;
}
input.short, textarea.short {
  width: 48px;
}
input.valid, .line.valid input, textarea.valid, .line.valid textarea {
  border-color: #9fd28c;
}
input.invalid, .line.invalid input, textarea.invalid, .line.invalid textarea {
  border-color: #cf6e71;
}
html input[disabled], html textarea[disabled] {
  color: #888;
  background-color: #ebebe4;
  cursor: not-allowed;
}

input[type=checkbox] {
  width: auto;
  margin-right: 0.5rem;
}
input[type=checkbox]:focus {
  outline: 2px solid #63B246;
}

input[type=radio] {
  -moz-appearance: unset;
  appearance: unset;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  margin-right: 0.25em;
  padding: 2px;
  border: 1px solid #ccc;
  vertical-align: -4.5px;
}
input[type=radio]:checked:after {
  content: "";
  display: block;
  border-radius: 50%;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-color: #666;
}
input[type=radio]:focus {
  box-shadow: 0 0 0 1px #fff, 0 0 0 2px #666;
}

input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button {
  appearance: none;
  margin: 0;
}

input[type=number] {
  appearance: textfield;
}

input[type=tel]:focus {
  color: #333;
  border: 2px solid #63B246;
  box-shadow: 0 0 5px 0 rgba(99, 178, 70, 0.5);
}

select {
  transition-property: color, border-color, box-shadow;
  transition-duration: 0.2s;
  transition-timing-function: ease;
  margin-top: 1px;
  font-size: inherit;
  font-weight: 400;
  display: inline-block;
  font-family: "Helvetica Neue", helvetica, arial, sans-serif;
  background: #fff;
  border: 2px solid #ccc;
  border-radius: 3px;
  color: #666;
  padding: 0.5rem;
  outline: none;
  width: 50%;
}
select:focus {
  color: #333;
  border-color: #63B246;
  box-shadow: 0 0 5px 0 rgba(99, 178, 70, 0.5);
}
select.short {
  width: 48px;
}

select[multiple] {
  height: inherit;
  background-color: #ffffff;
}

select[disabled] {
  color: #888;
  border-color: #ccc;
  background-color: #ebebe4;
  cursor: not-allowed;
}

textarea {
  vertical-align: text-top;
}

#feedback {
  display: none;
  margin-top: 5px;
}
#feedback textarea {
  width: 162px;
  margin-bottom: 8px;
}

.feedback-thanks {
  display: none;
}

.field.final-help {
  background-color: #FFFFB0;
  padding: 12px 12px 1px;
  margin-right: 30px;
  margin-bottom: 5px;
}

select.wider {
  width: 300px;
}

select#predelay, select#postdelay {
  width: 50px;
  margin-right: 5px;
}

.option-box {
  width: auto;
}

#nameidformat {
  width: 400px;
}

.search .select2-container {
  font-size: small;
  color: #000;
  margin: 2px 5px 5px;
}
.search .select2-container a {
  height: 18px;
  line-height: 18px;
}
.search .select2-container a .select2-chosen {
  color: #000;
}
.search .select2-container a .select2-arrow > b {
  margin-top: -2px;
}

.select2-link {
  margin-left: 0.5rem;
}

.line-height {
  line-height: 15px;
}

/**
 * Micro clearfix hack http://nicolasgallagher.com/micro-clearfix-hack/
 * This clearfix hack can be used on the container element that has floated
 * elements without adding new markup
 */
/** Vertically center an element in another with this mixin **/
/**
 * Source: https://css-tricks.com/snippets/css/retina-display-media-query/
 */
.c--btn-new-window:after, .c--btn-next:after {
  font-family: "Duo Admin Icons" !important;
  font-style: normal !important;
  font-weight: 400 !important;
  font-variant: normal !important;
  text-transform: none !important;
  speak: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.c--btn-new-window:hover:after, .c--btn-next:hover:after {
  box-shadow: none;
}

@keyframes barberpole {
  from {
    background-position: 0 0;
  }
  to {
    background-position: 2rem 0;
  }
}
/* This is maintained for any forgotten old-style banners that are not using DsBanner styles */
.flash .info, .flash .message {
  background-color: #dfeff8;
  border-radius: 3px;
  color: #666;
  padding: 1rem;
  position: relative;
  margin-top: 0;
  margin-bottom: 1rem;
}
.flash .info a, .flash .message a {
  color: #4d4d4d;
}
.flash .info a:hover, .flash .message a:hover {
  color: #333333;
}
.flash .error {
  background-color: #f4d5d5;
  border-radius: 3px;
  color: #666;
  padding: 1rem;
  position: relative;
  margin-top: 0;
  margin-bottom: 1rem;
}
.flash .error a {
  color: #4d4d4d;
}
.flash .error a:hover {
  color: #333333;
}
.flash .success {
  background-color: #dcefd5;
  border-radius: 3px;
  color: #666;
  padding: 1rem;
  position: relative;
  margin-top: 0;
  margin-bottom: 1rem;
}
.flash .success a {
  color: #4d4d4d;
}
.flash .success a:hover {
  color: #333333;
}
.flash .warning {
  background-color: #f9e5d9;
  border-radius: 3px;
  color: #666;
  padding: 1rem;
  position: relative;
  margin-top: 0;
  margin-bottom: 1rem;
}
.flash .warning a {
  color: #4d4d4d;
}
.flash .warning a:hover {
  color: #333333;
}
.flash .progress {
  background-color: #e1e1e1;
  border-radius: 3px;
  color: #333;
  padding: 1rem;
  position: relative;
  margin-top: 0;
  margin-bottom: 1rem;
  background-size: 2rem 2rem;
  background-image: linear-gradient(45deg, rgba(51, 51, 51, 0.05) 25%, transparent 25%, transparent 50%, rgba(51, 51, 51, 0.05) 50%, rgba(51, 51, 51, 0.05) 75%, transparent 75%, transparent);
  animation: barberpole 0.5s linear infinite;
}
.flash .progress a {
  color: #1a1a1a;
}
.flash .progress a:hover {
  color: black;
}
.flash p:last-child {
  margin-bottom: 0;
}

.ds-banner .flash-link {
  white-space: nowrap;
}
.ds-banner .flash-msg {
  white-space: pre-wrap;
  word-break: break-word;
}

.page-message {
  background-color: #dfeff8;
  border-radius: 3px;
  color: #666;
  padding: 1rem;
  position: relative;
  margin-top: 0;
  margin-bottom: 1rem;
}
.page-message:before, .page-message:after {
  content: " ";
  display: table;
}
.page-message:after {
  clear: both;
}
.ie .page-message {
  *zoom: 1;
}
.page-message a {
  color: #4d4d4d;
}
.page-message a:hover {
  color: #333333;
}
.page-message img {
  float: right;
}
.page-message ul, .page-message ol {
  margin: 4px 30px 10px 20px;
}
.page-message li {
  list-style-type: disc;
  list-style-position: inside;
  line-height: 18px;
}
.page-message p:last-child {
  margin-bottom: 0;
}
.page-message.info > *, .page-message.warning > * {
  margin-left: 48px;
}
.page-message.info:before, .page-message.warning:before {
  font-family: "Duo Admin Icons";
  font-size: 32px;
  position: absolute;
  display: block;
  -ms-transform: translateY(-50%);
      transform: translateY(-50%);
  top: 50%;
  left: 16px;
}
.page-message.info {
  border: 1px solid #CBD9E1;
}
.page-message.info:before {
  content: "\e0d0";
}
.page-message.info .info-box-title {
  font-weight: 600;
  margin-bottom: 0;
}
.page-message.warning {
  background-color: #f9e5d9;
  border-radius: 3px;
  color: #666;
  padding: 1rem;
  position: relative;
  margin-top: 0;
  margin-bottom: 1rem;
  border: 1px solid #ebcfbe;
}
.page-message.warning a {
  color: #2682b2;
}
.page-message.warning a:hover {
  color: #1d6388;
}
.page-message.warning:before {
  content: "\e0cf";
}
.page-message.secure:before {
  content: "\e01a";
}
.page-message.limit {
  margin-bottom: 2.5em;
}
.page-message.no-top-margin {
  margin-top: 0;
}
.page-message.success {
  background-color: #9fd28c;
  border-radius: 3px;
  color: #666;
  padding: 1rem;
  position: relative;
  margin-top: 0;
  margin-bottom: 1rem;
}
.page-message.success a {
  color: #4d4d4d;
}
.page-message.success a:hover {
  color: #333333;
}
.page-message.success.limit {
  padding: 15px 20px;
}
.page-message.error {
  background-color: #f4d5d5;
  border-radius: 3px;
  color: #666;
  padding: 1rem;
  position: relative;
  margin-top: 0;
  margin-bottom: 1rem;
}
.page-message.error a {
  color: #4d4d4d;
}
.page-message.error a:hover {
  color: #333333;
}

.page-message-labs .labs-icon {
  vertical-align: inherit;
}
.page-message-labs p {
  display: inline-block;
  margin-bottom: 0 !important;
  width: 95%;
}

/**
 * Micro clearfix hack http://nicolasgallagher.com/micro-clearfix-hack/
 * This clearfix hack can be used on the container element that has floated
 * elements without adding new markup
 */
/** Vertically center an element in another with this mixin **/
/**
 * Source: https://css-tricks.com/snippets/css/retina-display-media-query/
 */
.c--btn-new-window:after, .c--btn-next:after {
  font-family: "Duo Admin Icons" !important;
  font-style: normal !important;
  font-weight: 400 !important;
  font-variant: normal !important;
  text-transform: none !important;
  speak: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.c--btn-new-window:hover:after, .c--btn-next:hover:after {
  box-shadow: none;
}

.noscroll {
  overflow: hidden;
}

.overlay {
  background: rgba(0, 0, 0, 0.4);
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: center;
      justify-content: center;
  -ms-flex-align: center;
      align-items: center;
  padding: 0 10%;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1000;
  transition-property: opacity;
  transition-duration: 250ms;
  transition-timing-function: ease-in-out;
}
.overlay.hiding {
  opacity: 0;
}
.overlay.hidden {
  display: none;
  opacity: 0;
  transition: none;
}
.overlay.before-showing {
  opacity: 0;
}

.modal {
  background-color: #fff;
  border-radius: 3px;
  position: relative;
  z-index: 1001;
  opacity: 1;
  transition-property: opacity;
  transition-duration: 250ms;
  transition-timing-function: ease-in-out;
}
.modal.hiding {
  opacity: 0;
}
.modal.hidden {
  opacity: 0;
  display: none;
  transition: none;
}
.modal.before-showing {
  opacity: 0;
}

.ie9 .modal {
  margin: auto;
  top: 50%;
  -ms-transform: translate(0, -50%);
}

form.modal {
  padding: 0;
}

.modal-fixed {
  height: 90%;
  margin: auto;
  max-width: 600px;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 90%;
}

.modal-fixed-content,
.modal-fixed-footer,
.modal-fixed-header {
  left: 0;
  position: absolute;
  right: 0;
}

.modal-fixed-content {
  top: 80px;
  bottom: 80px;
}

.modal-fixed-footer {
  height: 80px;
  bottom: 0;
}

.modal-fixed-header {
  height: 80px;
  top: 0;
}

.modal-auto {
  transition: opacity 250ms ease-in-out;
}

.modal-header, .modal-footer {
  padding: 20px 32px;
}

.modal-header {
  padding-bottom: 0;
}
.modal-header h1 {
  font-size: 24px;
  line-height: 48px;
  margin: 0;
}
.modal-header .modal-close {
  color: #888;
  font-size: 20px;
  padding: 20px;
  position: absolute;
  right: 0.5em;
  text-decoration: none;
  top: 0.5em;
}
.modal-header .modal-close:hover {
  color: #333;
}

.modal-content {
  border-top: solid 1px #e1e1e1;
  margin-top: 20px;
  padding: 24px 32px;
  overflow-y: auto;
}

.modal-footer {
  border-top: solid 1px #e1e1e1;
  text-align: center;
}

/**
 * Micro clearfix hack http://nicolasgallagher.com/micro-clearfix-hack/
 * This clearfix hack can be used on the container element that has floated
 * elements without adding new markup
 */
/** Vertically center an element in another with this mixin **/
/**
 * Source: https://css-tricks.com/snippets/css/retina-display-media-query/
 */
.c--btn-new-window:after, .c--btn-next:after {
  font-family: "Duo Admin Icons" !important;
  font-style: normal !important;
  font-weight: 400 !important;
  font-variant: normal !important;
  text-transform: none !important;
  speak: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.c--btn-new-window:hover:after, .c--btn-next:hover:after {
  box-shadow: none;
}

button, .button, input[type=submit]:not(.link), input[type=reset], input[type=button] {
  transition-property: background-color, border-color, box-shadow;
  transition-duration: 0.2s;
  transition-timing-function: ease;
  border: none;
  border-radius: 3px;
  box-shadow: none;
  cursor: pointer;
  display: inline-block;
  font-size: 14px;
  font-weight: 400;
  line-height: 1em;
  padding: 12px 16px;
  text-decoration: none;
  background-color: #888;
  border-color: #888;
  color: white;
  outline: 0;
}
button i, .button i, input[type=submit]:not(.link) i, input[type=reset] i, input[type=button] i {
  font-size: 11px;
  line-height: 0;
  margin-right: 4px;
}
button i.icon-download, .button i.icon-download, input[type=submit]:not(.link) i.icon-download, input[type=reset] i.icon-download, input[type=button] i.icon-download {
  margin-right: 8px;
}
button.ghost, .button.ghost, input[type=submit]:not(.link).ghost, input[type=reset].ghost, input[type=button].ghost {
  border: solid 2px transparent;
  background-color: transparent;
}
button.tiny, .button.tiny, input[type=submit]:not(.link).tiny, input[type=reset].tiny, input[type=button].tiny {
  font-size: 11.2px;
  padding: 6px 8px;
}
button.tiny i, .button.tiny i, input[type=submit]:not(.link).tiny i, input[type=reset].tiny i, input[type=button].tiny i {
  vertical-align: middle;
  margin-right: 0;
}
button.huge, .button.huge, input[type=submit]:not(.link).huge, input[type=reset].huge, input[type=button].huge {
  font-size: 17.5px;
  padding: 16px 20px;
}
button.square, .button.square, input[type=submit]:not(.link).square, input[type=reset].square, input[type=button].square {
  text-align: center;
  padding-left: 4px;
  padding-right: 4px;
}
button.square i, .button.square i, input[type=submit]:not(.link).square i, input[type=reset].square i, input[type=button].square i {
  display: block;
  font-size: 2rem;
  height: 2rem;
  margin-bottom: 0.5rem;
}
button.block, .button.block, input[type=submit]:not(.link).block, input[type=reset].block, input[type=button].block {
  display: block;
  width: 100%;
}
button.wait-cursor, .button.wait-cursor, input[type=submit]:not(.link).wait-cursor, input[type=reset].wait-cursor, input[type=button].wait-cursor {
  cursor: wait;
}
button span, .button span, input[type=submit]:not(.link) span, input[type=reset] span, input[type=button] span {
  color: white;
}
button:hover, .button:hover, input[type=submit]:not(.link):hover, input[type=reset]:hover, input[type=button]:hover {
  background-color: #6f6f6f;
  border-color: #6f6f6f;
  color: white;
}
button:active, .button:active, input[type=submit]:not(.link):active, input[type=reset]:active, input[type=button]:active {
  background-color: #626262;
  border-color: #626262;
  transition-duration: 0s;
  color: white;
}
button:focus, .button:focus, input[type=submit]:not(.link):focus, input[type=reset]:focus, input[type=button]:focus {
  background-color: #6f6f6f;
  outline: 2px solid #888;
  outline-offset: 3px;
  color: white;
}
button:disabled, button.disabled, .button:disabled, .button.disabled, input[type=submit]:not(.link):disabled, input[type=submit]:not(.link).disabled, input[type=reset]:disabled, input[type=reset].disabled, input[type=button]:disabled, input[type=button].disabled {
  cursor: not-allowed;
  color: white;
}
button:disabled, button:disabled:hover, button.disabled, button.disabled:hover, .button:disabled, .button:disabled:hover, .button.disabled, .button.disabled:hover, input[type=submit]:not(.link):disabled, input[type=submit]:not(.link):disabled:hover, input[type=submit]:not(.link).disabled, input[type=submit]:not(.link).disabled:hover, input[type=reset]:disabled, input[type=reset]:disabled:hover, input[type=reset].disabled, input[type=reset].disabled:hover, input[type=button]:disabled, input[type=button]:disabled:hover, input[type=button].disabled, input[type=button].disabled:hover {
  background-color: rgba(136, 136, 136, 0.5);
  border-color: rgba(136, 136, 136, 0.5);
  color: rgba(255, 255, 255, 0.5);
}
button.ghost, .button.ghost, input[type=submit]:not(.link).ghost, input[type=reset].ghost, input[type=button].ghost {
  background-color: transparent;
  border-color: #888;
  color: #888;
}
button.ghost:hover, .button.ghost:hover, input[type=submit]:not(.link).ghost:hover, input[type=reset].ghost:hover, input[type=button].ghost:hover {
  background-color: transparent;
  color: #555555;
}
button.ghost:active, .button.ghost:active, input[type=submit]:not(.link).ghost:active, input[type=reset].ghost:active, input[type=button].ghost:active {
  color: #3c3c3c;
}
button.ghost:focus, .button.ghost:focus, input[type=submit]:not(.link).ghost:focus, input[type=reset].ghost:focus, input[type=button].ghost:focus {
  outline: 2px solid #fff;
  color: #555555;
}
button.ghost.disabled, button.ghost.disabled:hover, button.ghost:disabled, button.ghost:disabled:hover, .button.ghost.disabled, .button.ghost.disabled:hover, .button.ghost:disabled, .button.ghost:disabled:hover, input[type=submit]:not(.link).ghost.disabled, input[type=submit]:not(.link).ghost.disabled:hover, input[type=submit]:not(.link).ghost:disabled, input[type=submit]:not(.link).ghost:disabled:hover, input[type=reset].ghost.disabled, input[type=reset].ghost.disabled:hover, input[type=reset].ghost:disabled, input[type=reset].ghost:disabled:hover, input[type=button].ghost.disabled, input[type=button].ghost.disabled:hover, input[type=button].ghost:disabled, input[type=button].ghost:disabled:hover {
  background-color: transparent;
  border-color: rgba(136, 136, 136, 0.5);
  color: rgba(136, 136, 136, 0.5);
}
button.full-width, .button.full-width, input[type=submit]:not(.link).full-width, input[type=reset].full-width, input[type=button].full-width {
  width: 100%;
}
button.primary, .button.primary, input[type=submit]:not(.link).primary, input[type=reset].primary, input[type=button].primary {
  background-color: #379ed4;
  border-color: #379ed4;
  color: white;
  outline: 0;
}
button.primary span, .button.primary span, input[type=submit]:not(.link).primary span, input[type=reset].primary span, input[type=button].primary span {
  color: white;
}
button.primary:hover, .button.primary:hover, input[type=submit]:not(.link).primary:hover, input[type=reset].primary:hover, input[type=button].primary:hover {
  background-color: #2682b2;
  border-color: #2682b2;
  color: white;
}
button.primary:active, .button.primary:active, input[type=submit]:not(.link).primary:active, input[type=reset].primary:active, input[type=button].primary:active {
  background-color: #22729d;
  border-color: #22729d;
  transition-duration: 0s;
  color: white;
}
button.primary:focus, .button.primary:focus, input[type=submit]:not(.link).primary:focus, input[type=reset].primary:focus, input[type=button].primary:focus {
  background-color: #2682b2;
  outline: 2px solid #379ed4;
  outline-offset: 3px;
  color: white;
}
button.primary:disabled, button.primary.disabled, .button.primary:disabled, .button.primary.disabled, input[type=submit]:not(.link).primary:disabled, input[type=submit]:not(.link).primary.disabled, input[type=reset].primary:disabled, input[type=reset].primary.disabled, input[type=button].primary:disabled, input[type=button].primary.disabled {
  cursor: not-allowed;
  color: white;
}
button.primary:disabled, button.primary:disabled:hover, button.primary.disabled, button.primary.disabled:hover, .button.primary:disabled, .button.primary:disabled:hover, .button.primary.disabled, .button.primary.disabled:hover, input[type=submit]:not(.link).primary:disabled, input[type=submit]:not(.link).primary:disabled:hover, input[type=submit]:not(.link).primary.disabled, input[type=submit]:not(.link).primary.disabled:hover, input[type=reset].primary:disabled, input[type=reset].primary:disabled:hover, input[type=reset].primary.disabled, input[type=reset].primary.disabled:hover, input[type=button].primary:disabled, input[type=button].primary:disabled:hover, input[type=button].primary.disabled, input[type=button].primary.disabled:hover {
  background-color: rgba(55, 158, 212, 0.5);
  border-color: rgba(55, 158, 212, 0.5);
  color: rgba(255, 255, 255, 0.5);
}
button.primary.ghost, .button.primary.ghost, input[type=submit]:not(.link).primary.ghost, input[type=reset].primary.ghost, input[type=button].primary.ghost {
  background-color: transparent;
  border-color: #379ed4;
  color: #379ed4;
}
button.primary.ghost:hover, .button.primary.ghost:hover, input[type=submit]:not(.link).primary.ghost:hover, input[type=reset].primary.ghost:hover, input[type=button].primary.ghost:hover {
  background-color: transparent;
  color: #1d6388;
}
button.primary.ghost:active, .button.primary.ghost:active, input[type=submit]:not(.link).primary.ghost:active, input[type=reset].primary.ghost:active, input[type=button].primary.ghost:active {
  color: #14445e;
}
button.primary.ghost:focus, .button.primary.ghost:focus, input[type=submit]:not(.link).primary.ghost:focus, input[type=reset].primary.ghost:focus, input[type=button].primary.ghost:focus {
  outline: 2px solid #fff;
  color: #1d6388;
}
button.primary.ghost.disabled, button.primary.ghost.disabled:hover, button.primary.ghost:disabled, button.primary.ghost:disabled:hover, .button.primary.ghost.disabled, .button.primary.ghost.disabled:hover, .button.primary.ghost:disabled, .button.primary.ghost:disabled:hover, input[type=submit]:not(.link).primary.ghost.disabled, input[type=submit]:not(.link).primary.ghost.disabled:hover, input[type=submit]:not(.link).primary.ghost:disabled, input[type=submit]:not(.link).primary.ghost:disabled:hover, input[type=reset].primary.ghost.disabled, input[type=reset].primary.ghost.disabled:hover, input[type=reset].primary.ghost:disabled, input[type=reset].primary.ghost:disabled:hover, input[type=button].primary.ghost.disabled, input[type=button].primary.ghost.disabled:hover, input[type=button].primary.ghost:disabled, input[type=button].primary.ghost:disabled:hover {
  background-color: transparent;
  border-color: rgba(136, 136, 136, 0.5);
  color: rgba(136, 136, 136, 0.5);
}
button.primary.full-width, .button.primary.full-width, input[type=submit]:not(.link).primary.full-width, input[type=reset].primary.full-width, input[type=button].primary.full-width {
  width: 100%;
}
button.secondary, .button.secondary, input[type=submit]:not(.link).secondary, input[type=reset].secondary, input[type=button].secondary {
  background-color: #e1e1e1;
  border-color: #e1e1e1;
  color: #379ed4;
  outline: 0;
}
button.secondary span, .button.secondary span, input[type=submit]:not(.link).secondary span, input[type=reset].secondary span, input[type=button].secondary span {
  color: #379ed4;
}
button.secondary:hover, .button.secondary:hover, input[type=submit]:not(.link).secondary:hover, input[type=reset].secondary:hover, input[type=button].secondary:hover {
  background-color: #c8c8c8;
  border-color: #c8c8c8;
  color: #379ed4;
}
button.secondary:active, .button.secondary:active, input[type=submit]:not(.link).secondary:active, input[type=reset].secondary:active, input[type=button].secondary:active {
  background-color: #bbbbbb;
  border-color: #bbbbbb;
  transition-duration: 0s;
  color: #379ed4;
}
button.secondary:focus, .button.secondary:focus, input[type=submit]:not(.link).secondary:focus, input[type=reset].secondary:focus, input[type=button].secondary:focus {
  background-color: #c8c8c8;
  outline: 2px solid #e1e1e1;
  outline-offset: 3px;
  color: #379ed4;
}
button.secondary:disabled, button.secondary.disabled, .button.secondary:disabled, .button.secondary.disabled, input[type=submit]:not(.link).secondary:disabled, input[type=submit]:not(.link).secondary.disabled, input[type=reset].secondary:disabled, input[type=reset].secondary.disabled, input[type=button].secondary:disabled, input[type=button].secondary.disabled {
  cursor: not-allowed;
  color: #379ed4;
}
button.secondary:disabled, button.secondary:disabled:hover, button.secondary.disabled, button.secondary.disabled:hover, .button.secondary:disabled, .button.secondary:disabled:hover, .button.secondary.disabled, .button.secondary.disabled:hover, input[type=submit]:not(.link).secondary:disabled, input[type=submit]:not(.link).secondary:disabled:hover, input[type=submit]:not(.link).secondary.disabled, input[type=submit]:not(.link).secondary.disabled:hover, input[type=reset].secondary:disabled, input[type=reset].secondary:disabled:hover, input[type=reset].secondary.disabled, input[type=reset].secondary.disabled:hover, input[type=button].secondary:disabled, input[type=button].secondary:disabled:hover, input[type=button].secondary.disabled, input[type=button].secondary.disabled:hover {
  background-color: rgba(225, 225, 225, 0.5);
  border-color: rgba(225, 225, 225, 0.5);
  color: rgba(255, 255, 255, 0.5);
}
button.secondary.ghost, .button.secondary.ghost, input[type=submit]:not(.link).secondary.ghost, input[type=reset].secondary.ghost, input[type=button].secondary.ghost {
  background-color: transparent;
  border-color: #e1e1e1;
  color: #e1e1e1;
}
button.secondary.ghost:hover, .button.secondary.ghost:hover, input[type=submit]:not(.link).secondary.ghost:hover, input[type=reset].secondary.ghost:hover, input[type=button].secondary.ghost:hover {
  background-color: transparent;
  color: #aeaeae;
}
button.secondary.ghost:active, .button.secondary.ghost:active, input[type=submit]:not(.link).secondary.ghost:active, input[type=reset].secondary.ghost:active, input[type=button].secondary.ghost:active {
  color: #959595;
}
button.secondary.ghost:focus, .button.secondary.ghost:focus, input[type=submit]:not(.link).secondary.ghost:focus, input[type=reset].secondary.ghost:focus, input[type=button].secondary.ghost:focus {
  outline: 2px solid #fff;
  color: #aeaeae;
}
button.secondary.ghost.disabled, button.secondary.ghost.disabled:hover, button.secondary.ghost:disabled, button.secondary.ghost:disabled:hover, .button.secondary.ghost.disabled, .button.secondary.ghost.disabled:hover, .button.secondary.ghost:disabled, .button.secondary.ghost:disabled:hover, input[type=submit]:not(.link).secondary.ghost.disabled, input[type=submit]:not(.link).secondary.ghost.disabled:hover, input[type=submit]:not(.link).secondary.ghost:disabled, input[type=submit]:not(.link).secondary.ghost:disabled:hover, input[type=reset].secondary.ghost.disabled, input[type=reset].secondary.ghost.disabled:hover, input[type=reset].secondary.ghost:disabled, input[type=reset].secondary.ghost:disabled:hover, input[type=button].secondary.ghost.disabled, input[type=button].secondary.ghost.disabled:hover, input[type=button].secondary.ghost:disabled, input[type=button].secondary.ghost:disabled:hover {
  background-color: transparent;
  border-color: rgba(136, 136, 136, 0.5);
  color: rgba(136, 136, 136, 0.5);
}
button.secondary.full-width, .button.secondary.full-width, input[type=submit]:not(.link).secondary.full-width, input[type=reset].secondary.full-width, input[type=button].secondary.full-width {
  width: 100%;
}
button.positive, .button.positive, input[type=submit]:not(.link).positive, input[type=reset].positive, input[type=button].positive {
  background-color: #63B246;
  border-color: #63B246;
  color: white;
  outline: 0;
}
button.positive span, .button.positive span, input[type=submit]:not(.link).positive span, input[type=reset].positive span, input[type=button].positive span {
  color: white;
}
button.positive:hover, .button.positive:hover, input[type=submit]:not(.link).positive:hover, input[type=reset].positive:hover, input[type=button].positive:hover {
  background-color: #4f8d38;
  border-color: #4f8d38;
  color: white;
}
button.positive:active, .button.positive:active, input[type=submit]:not(.link).positive:active, input[type=reset].positive:active, input[type=button].positive:active {
  background-color: #447b30;
  border-color: #447b30;
  transition-duration: 0s;
  color: white;
}
button.positive:focus, .button.positive:focus, input[type=submit]:not(.link).positive:focus, input[type=reset].positive:focus, input[type=button].positive:focus {
  background-color: #4f8d38;
  outline: 2px solid #63B246;
  outline-offset: 3px;
  color: white;
}
button.positive:disabled, button.positive.disabled, .button.positive:disabled, .button.positive.disabled, input[type=submit]:not(.link).positive:disabled, input[type=submit]:not(.link).positive.disabled, input[type=reset].positive:disabled, input[type=reset].positive.disabled, input[type=button].positive:disabled, input[type=button].positive.disabled {
  cursor: not-allowed;
  color: white;
}
button.positive:disabled, button.positive:disabled:hover, button.positive.disabled, button.positive.disabled:hover, .button.positive:disabled, .button.positive:disabled:hover, .button.positive.disabled, .button.positive.disabled:hover, input[type=submit]:not(.link).positive:disabled, input[type=submit]:not(.link).positive:disabled:hover, input[type=submit]:not(.link).positive.disabled, input[type=submit]:not(.link).positive.disabled:hover, input[type=reset].positive:disabled, input[type=reset].positive:disabled:hover, input[type=reset].positive.disabled, input[type=reset].positive.disabled:hover, input[type=button].positive:disabled, input[type=button].positive:disabled:hover, input[type=button].positive.disabled, input[type=button].positive.disabled:hover {
  background-color: rgba(99, 178, 70, 0.5);
  border-color: rgba(99, 178, 70, 0.5);
  color: rgba(255, 255, 255, 0.5);
}
button.positive.ghost, .button.positive.ghost, input[type=submit]:not(.link).positive.ghost, input[type=reset].positive.ghost, input[type=button].positive.ghost {
  background-color: transparent;
  border-color: #63B246;
  color: #63B246;
}
button.positive.ghost:hover, .button.positive.ghost:hover, input[type=submit]:not(.link).positive.ghost:hover, input[type=reset].positive.ghost:hover, input[type=button].positive.ghost:hover {
  background-color: transparent;
  color: #3a6929;
}
button.positive.ghost:active, .button.positive.ghost:active, input[type=submit]:not(.link).positive.ghost:active, input[type=reset].positive.ghost:active, input[type=button].positive.ghost:active {
  color: #26441b;
}
button.positive.ghost:focus, .button.positive.ghost:focus, input[type=submit]:not(.link).positive.ghost:focus, input[type=reset].positive.ghost:focus, input[type=button].positive.ghost:focus {
  outline: 2px solid #fff;
  color: #3a6929;
}
button.positive.ghost.disabled, button.positive.ghost.disabled:hover, button.positive.ghost:disabled, button.positive.ghost:disabled:hover, .button.positive.ghost.disabled, .button.positive.ghost.disabled:hover, .button.positive.ghost:disabled, .button.positive.ghost:disabled:hover, input[type=submit]:not(.link).positive.ghost.disabled, input[type=submit]:not(.link).positive.ghost.disabled:hover, input[type=submit]:not(.link).positive.ghost:disabled, input[type=submit]:not(.link).positive.ghost:disabled:hover, input[type=reset].positive.ghost.disabled, input[type=reset].positive.ghost.disabled:hover, input[type=reset].positive.ghost:disabled, input[type=reset].positive.ghost:disabled:hover, input[type=button].positive.ghost.disabled, input[type=button].positive.ghost.disabled:hover, input[type=button].positive.ghost:disabled, input[type=button].positive.ghost:disabled:hover {
  background-color: transparent;
  border-color: rgba(136, 136, 136, 0.5);
  color: rgba(136, 136, 136, 0.5);
}
button.positive.full-width, .button.positive.full-width, input[type=submit]:not(.link).positive.full-width, input[type=reset].positive.full-width, input[type=button].positive.full-width {
  width: 100%;
}
button.danger, .button.danger, input[type=submit]:not(.link).danger, input[type=reset].danger, input[type=button].danger {
  background-color: #a13639;
  border-color: #a13639;
  color: white;
  outline: 0;
}
button.danger span, .button.danger span, input[type=submit]:not(.link).danger span, input[type=reset].danger span, input[type=button].danger span {
  color: white;
}
button.danger:hover, .button.danger:hover, input[type=submit]:not(.link).danger:hover, input[type=reset].danger:hover, input[type=button].danger:hover {
  background-color: #7b292b;
  border-color: #7b292b;
  color: white;
}
button.danger:active, .button.danger:active, input[type=submit]:not(.link).danger:active, input[type=reset].danger:active, input[type=button].danger:active {
  background-color: #682325;
  border-color: #682325;
  transition-duration: 0s;
  color: white;
}
button.danger:focus, .button.danger:focus, input[type=submit]:not(.link).danger:focus, input[type=reset].danger:focus, input[type=button].danger:focus {
  background-color: #7b292b;
  outline: 2px solid #a13639;
  outline-offset: 3px;
  color: white;
}
button.danger:disabled, button.danger.disabled, .button.danger:disabled, .button.danger.disabled, input[type=submit]:not(.link).danger:disabled, input[type=submit]:not(.link).danger.disabled, input[type=reset].danger:disabled, input[type=reset].danger.disabled, input[type=button].danger:disabled, input[type=button].danger.disabled {
  cursor: not-allowed;
  color: white;
}
button.danger:disabled, button.danger:disabled:hover, button.danger.disabled, button.danger.disabled:hover, .button.danger:disabled, .button.danger:disabled:hover, .button.danger.disabled, .button.danger.disabled:hover, input[type=submit]:not(.link).danger:disabled, input[type=submit]:not(.link).danger:disabled:hover, input[type=submit]:not(.link).danger.disabled, input[type=submit]:not(.link).danger.disabled:hover, input[type=reset].danger:disabled, input[type=reset].danger:disabled:hover, input[type=reset].danger.disabled, input[type=reset].danger.disabled:hover, input[type=button].danger:disabled, input[type=button].danger:disabled:hover, input[type=button].danger.disabled, input[type=button].danger.disabled:hover {
  background-color: rgba(161, 54, 57, 0.5);
  border-color: rgba(161, 54, 57, 0.5);
  color: rgba(255, 255, 255, 0.5);
}
button.danger.ghost, .button.danger.ghost, input[type=submit]:not(.link).danger.ghost, input[type=reset].danger.ghost, input[type=button].danger.ghost {
  background-color: transparent;
  border-color: #a13639;
  color: #a13639;
}
button.danger.ghost:hover, .button.danger.ghost:hover, input[type=submit]:not(.link).danger.ghost:hover, input[type=reset].danger.ghost:hover, input[type=button].danger.ghost:hover {
  background-color: transparent;
  color: #551c1e;
}
button.danger.ghost:active, .button.danger.ghost:active, input[type=submit]:not(.link).danger.ghost:active, input[type=reset].danger.ghost:active, input[type=button].danger.ghost:active {
  color: #2e1010;
}
button.danger.ghost:focus, .button.danger.ghost:focus, input[type=submit]:not(.link).danger.ghost:focus, input[type=reset].danger.ghost:focus, input[type=button].danger.ghost:focus {
  outline: 2px solid #fff;
  color: #551c1e;
}
button.danger.ghost.disabled, button.danger.ghost.disabled:hover, button.danger.ghost:disabled, button.danger.ghost:disabled:hover, .button.danger.ghost.disabled, .button.danger.ghost.disabled:hover, .button.danger.ghost:disabled, .button.danger.ghost:disabled:hover, input[type=submit]:not(.link).danger.ghost.disabled, input[type=submit]:not(.link).danger.ghost.disabled:hover, input[type=submit]:not(.link).danger.ghost:disabled, input[type=submit]:not(.link).danger.ghost:disabled:hover, input[type=reset].danger.ghost.disabled, input[type=reset].danger.ghost.disabled:hover, input[type=reset].danger.ghost:disabled, input[type=reset].danger.ghost:disabled:hover, input[type=button].danger.ghost.disabled, input[type=button].danger.ghost.disabled:hover, input[type=button].danger.ghost:disabled, input[type=button].danger.ghost:disabled:hover {
  background-color: transparent;
  border-color: rgba(136, 136, 136, 0.5);
  color: rgba(136, 136, 136, 0.5);
}
button.danger.full-width, .button.danger.full-width, input[type=submit]:not(.link).danger.full-width, input[type=reset].danger.full-width, input[type=button].danger.full-width {
  width: 100%;
}
button.warning, .button.warning, input[type=submit]:not(.link).warning, input[type=reset].warning, input[type=button].warning {
  background-color: #fff;
  border-color: #fff;
  color: white;
  outline: 0;
}
button.warning span, .button.warning span, input[type=submit]:not(.link).warning span, input[type=reset].warning span, input[type=button].warning span {
  color: white;
}
button.warning:hover, .button.warning:hover, input[type=submit]:not(.link).warning:hover, input[type=reset].warning:hover, input[type=button].warning:hover {
  background-color: #e6e6e6;
  border-color: #e6e6e6;
  color: white;
}
button.warning:active, .button.warning:active, input[type=submit]:not(.link).warning:active, input[type=reset].warning:active, input[type=button].warning:active {
  background-color: #d9d9d9;
  border-color: #d9d9d9;
  transition-duration: 0s;
  color: white;
}
button.warning:focus, .button.warning:focus, input[type=submit]:not(.link).warning:focus, input[type=reset].warning:focus, input[type=button].warning:focus {
  background-color: #e6e6e6;
  outline: 2px solid #fff;
  outline-offset: 3px;
  color: white;
}
button.warning:disabled, button.warning.disabled, .button.warning:disabled, .button.warning.disabled, input[type=submit]:not(.link).warning:disabled, input[type=submit]:not(.link).warning.disabled, input[type=reset].warning:disabled, input[type=reset].warning.disabled, input[type=button].warning:disabled, input[type=button].warning.disabled {
  cursor: not-allowed;
  color: white;
}
button.warning:disabled, button.warning:disabled:hover, button.warning.disabled, button.warning.disabled:hover, .button.warning:disabled, .button.warning:disabled:hover, .button.warning.disabled, .button.warning.disabled:hover, input[type=submit]:not(.link).warning:disabled, input[type=submit]:not(.link).warning:disabled:hover, input[type=submit]:not(.link).warning.disabled, input[type=submit]:not(.link).warning.disabled:hover, input[type=reset].warning:disabled, input[type=reset].warning:disabled:hover, input[type=reset].warning.disabled, input[type=reset].warning.disabled:hover, input[type=button].warning:disabled, input[type=button].warning:disabled:hover, input[type=button].warning.disabled, input[type=button].warning.disabled:hover {
  background-color: rgba(255, 255, 255, 0.5);
  border-color: rgba(255, 255, 255, 0.5);
  color: rgba(255, 255, 255, 0.5);
}
button.warning.ghost, .button.warning.ghost, input[type=submit]:not(.link).warning.ghost, input[type=reset].warning.ghost, input[type=button].warning.ghost {
  background-color: transparent;
  border-color: #fff;
  color: #fff;
}
button.warning.ghost:hover, .button.warning.ghost:hover, input[type=submit]:not(.link).warning.ghost:hover, input[type=reset].warning.ghost:hover, input[type=button].warning.ghost:hover {
  background-color: transparent;
  color: #cccccc;
}
button.warning.ghost:active, .button.warning.ghost:active, input[type=submit]:not(.link).warning.ghost:active, input[type=reset].warning.ghost:active, input[type=button].warning.ghost:active {
  color: #b3b3b3;
}
button.warning.ghost:focus, .button.warning.ghost:focus, input[type=submit]:not(.link).warning.ghost:focus, input[type=reset].warning.ghost:focus, input[type=button].warning.ghost:focus {
  outline: 2px solid #fff;
  color: #cccccc;
}
button.warning.ghost.disabled, button.warning.ghost.disabled:hover, button.warning.ghost:disabled, button.warning.ghost:disabled:hover, .button.warning.ghost.disabled, .button.warning.ghost.disabled:hover, .button.warning.ghost:disabled, .button.warning.ghost:disabled:hover, input[type=submit]:not(.link).warning.ghost.disabled, input[type=submit]:not(.link).warning.ghost.disabled:hover, input[type=submit]:not(.link).warning.ghost:disabled, input[type=submit]:not(.link).warning.ghost:disabled:hover, input[type=reset].warning.ghost.disabled, input[type=reset].warning.ghost.disabled:hover, input[type=reset].warning.ghost:disabled, input[type=reset].warning.ghost:disabled:hover, input[type=button].warning.ghost.disabled, input[type=button].warning.ghost.disabled:hover, input[type=button].warning.ghost:disabled, input[type=button].warning.ghost:disabled:hover {
  background-color: transparent;
  border-color: rgba(136, 136, 136, 0.5);
  color: rgba(136, 136, 136, 0.5);
}
button.warning.full-width, .button.warning.full-width, input[type=submit]:not(.link).warning.full-width, input[type=reset].warning.full-width, input[type=button].warning.full-width {
  width: 100%;
}

button.link {
  transition-property: color;
  transition-duration: 0.2s;
  transition-timing-function: ease;
  background-color: transparent;
  color: #379ed4;
}
button.link:hover {
  background-color: transparent;
  color: #8bc7e6;
}
button.link:focus {
  background-color: transparent;
}

.button-row:before, .button-row:after {
  content: " ";
  display: table;
}
.button-row:after {
  clear: both;
}
.ie .button-row {
  *zoom: 1;
}
.button-row > * {
  float: left;
  margin-right: 16px;
}
.button-row.reverse > * {
  float: right;
  margin-left: 16px;
  margin-right: 0;
}
.button-row.centered {
  text-align: center;
}
.button-row [type=text] {
  width: 200px;
}
.flexbox .button-row {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: baseline;
      align-items: baseline;
}
.flexbox .button-row.reverse {
  -ms-flex-direction: row-reverse;
      flex-direction: row-reverse;
}
.flexbox .button-row.centered {
  -ms-flex-pack: center;
      justify-content: center;
}
.flexbox .button-row.centered > :last-child {
  margin-right: 0;
}

.c--btn-download, .c--btn-new-window, .c--btn-next {
  display: inline-block;
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1em;
  text-decoration: none;
  height: 40px;
  min-width: 125px;
  border-radius: 3px;
  border: 1px solid #444444;
  padding: 12px 20px;
  color: #444444;
  background-color: transparent;
  transition: color ease-in-out 125ms 0ms, background-color ease-in-out 125ms 0ms, border ease-in-out 200ms 0ms, box-shadow ease-in-out 200ms 0ms;
}
.c--btn-download:focus, .c--btn-new-window:focus, .c--btn-next:focus {
  box-shadow: 0 0 0 1px #fff, 0 0 0 3px currentColor;
  outline: none;
  border: inherit;
  background-color: transparent;
}
.c--btn-download:active, .c--btn-new-window:active, .c--btn-next:active {
  box-shadow: inset 0 0 10px -1px #111111;
  background-color: #444444;
  color: #fff;
}
.c--btn-download:hover, .c--btn-new-window:hover, .c--btn-next:hover {
  background-color: #444444;
  border-color: #444444;
  color: #fff;
}

.c--btn-next:after {
  content: "\e00d";
  display: inline-block;
  font-size: 2em;
  vertical-align: middle;
  margin-right: -0.25em;
  line-height: 0;
  top: -0.075em;
  position: relative;
}
.c--btn-new-window:after {
  content: "\e01f";
  display: inline-block;
  font-size: 2em;
  vertical-align: middle;
  margin-right: 0;
  line-height: 0;
  top: -0.05em;
  right: -0.5em;
  position: relative;
  font-size: 1em;
}
.c--btn-download {
  display: inline-block;
  height: auto;
  border: none;
  padding: 12px 20px 12px 0;
  color: #379ed4;
  font-size: 0.8125rem;
  transition: color 0.2s ease;
}
.c--btn-download svg {
  display: inline-block;
  width: 1.72em;
  float: left;
  height: auto;
  fill: #379ed4;
  margin-right: 0.86em;
}
.c--btn-download i {
  display: table-caption;
  clear: both;
  color: #888888;
  font-style: normal;
  margin-top: 0.25em;
  font-size: 0.6875rem;
  min-width: 75px;
}
.c--btn-download:hover {
  color: #22729d;
  background-color: transparent;
  text-decoration: underline;
}
.c--btn-download:hover svg {
  fill: #22729d;
}
.c--btn-download:hover i {
  text-decoration: none;
}
.c--btn-download:focus, .c--btn-download:active {
  box-shadow: 0 0 0 1px #fff, 0 0 0 3px currentColor;
  outline: none;
  border: inherit;
  background-color: transparent;
}

/**
 * Micro clearfix hack http://nicolasgallagher.com/micro-clearfix-hack/
 * This clearfix hack can be used on the container element that has floated
 * elements without adding new markup
 */
/** Vertically center an element in another with this mixin **/
/**
 * Source: https://css-tricks.com/snippets/css/retina-display-media-query/
 */
.c--btn-next:after, .c--btn-new-window:after {
  font-family: "Duo Admin Icons" !important;
  font-style: normal !important;
  font-weight: 400 !important;
  font-variant: normal !important;
  text-transform: none !important;
  speak: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.c--btn-next:hover:after, .c--btn-new-window:hover:after {
  box-shadow: none;
}

.header, .subhead {
  margin-bottom: 2rem;
  margin-top: 1rem;
}
.header:before, .header:after, .subhead:before, .subhead:after {
  content: " ";
  display: table;
}
.header:after, .subhead:after {
  clear: both;
}
.ie .header, .ie .subhead {
  *zoom: 1;
}
.header > *, .subhead > * {
  margin-bottom: 0;
}
.header h1, .header h2, .header h3, .header h4, .header h5, .header h6, .header p, .header li, .subhead h1, .subhead h2, .subhead h3, .subhead h4, .subhead h5, .subhead h6, .subhead p, .subhead li {
  margin-bottom: 0;
}
.header > :first-child, .subhead > :first-child {
  float: left;
}
.header > :last-child, .subhead > :last-child {
  float: right;
}
.header form, .subhead form {
  display: inline-block;
}
.flexbox .header, .flexbox .subhead {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
      align-items: center;
}
.flexbox .header > :first-child, .flexbox .subhead > :first-child {
  -ms-flex: 1;
      flex: 1;
}

.subhead {
  margin-bottom: 1rem;
}

/**
 * Micro clearfix hack http://nicolasgallagher.com/micro-clearfix-hack/
 * This clearfix hack can be used on the container element that has floated
 * elements without adding new markup
 */
/** Vertically center an element in another with this mixin **/
/**
 * Source: https://css-tricks.com/snippets/css/retina-display-media-query/
 */
.c--btn-next:after, .c--btn-new-window:after {
  font-family: "Duo Admin Icons" !important;
  font-style: normal !important;
  font-weight: 400 !important;
  font-variant: normal !important;
  text-transform: none !important;
  speak: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.c--btn-next:hover:after, .c--btn-new-window:hover:after {
  box-shadow: none;
}

.grid:before, .grid:after {
  content: " ";
  display: table;
}
.grid:after {
  clear: both;
}
.ie .grid {
  *zoom: 1;
}

.col-1-1 {
  float: left;
  margin-right: 1rem;
  width: calc((100% * 1) - (1rem * (1 - 1)));
}
.col-1-1:nth-of-type(1n), .col-1-1:last-of-type {
  margin-right: 0;
}

.col-1-2 {
  float: left;
  margin-right: 1rem;
  width: calc((100% * 0.5) - (1rem * (1 - 0.5)));
}
.col-1-2:nth-of-type(2n), .col-1-2:last-of-type {
  margin-right: 0;
}

.col-2-2 {
  float: left;
  margin-right: 1rem;
  width: calc((100% * 1) - (1rem * (1 - 1)));
}
.col-2-2:nth-of-type(2n), .col-2-2:last-of-type {
  margin-right: 0;
}

.col-1-3 {
  float: left;
  margin-right: 1rem;
  width: calc((100% * 0.3333333333) - (1rem * (1 - 0.3333333333)));
}
.col-1-3:nth-of-type(3n), .col-1-3:last-of-type {
  margin-right: 0;
}

.col-2-3 {
  float: left;
  margin-right: 1rem;
  width: calc((100% * 0.6666666667) - (1rem * (1 - 0.6666666667)));
}
.col-2-3:nth-of-type(3n), .col-2-3:last-of-type {
  margin-right: 0;
}

.col-3-3 {
  float: left;
  margin-right: 1rem;
  width: calc((100% * 1) - (1rem * (1 - 1)));
}
.col-3-3:nth-of-type(3n), .col-3-3:last-of-type {
  margin-right: 0;
}

.col-1-4 {
  float: left;
  margin-right: 1rem;
  width: calc((100% * 0.25) - (1rem * (1 - 0.25)));
}
.col-1-4:nth-of-type(4n), .col-1-4:last-of-type {
  margin-right: 0;
}

.col-2-4 {
  float: left;
  margin-right: 1rem;
  width: calc((100% * 0.5) - (1rem * (1 - 0.5)));
}
.col-2-4:nth-of-type(4n), .col-2-4:last-of-type {
  margin-right: 0;
}

.col-3-4 {
  float: left;
  margin-right: 1rem;
  width: calc((100% * 0.75) - (1rem * (1 - 0.75)));
}
.col-3-4:nth-of-type(4n), .col-3-4:last-of-type {
  margin-right: 0;
}

.col-4-4 {
  float: left;
  margin-right: 1rem;
  width: calc((100% * 1) - (1rem * (1 - 1)));
}
.col-4-4:nth-of-type(4n), .col-4-4:last-of-type {
  margin-right: 0;
}

.col-1-5 {
  float: left;
  margin-right: 1rem;
  width: calc((100% * 0.2) - (1rem * (1 - 0.2)));
}
.col-1-5:nth-of-type(5n), .col-1-5:last-of-type {
  margin-right: 0;
}

.col-2-5 {
  float: left;
  margin-right: 1rem;
  width: calc((100% * 0.4) - (1rem * (1 - 0.4)));
}
.col-2-5:nth-of-type(5n), .col-2-5:last-of-type {
  margin-right: 0;
}

.col-3-5 {
  float: left;
  margin-right: 1rem;
  width: calc((100% * 0.6) - (1rem * (1 - 0.6)));
}
.col-3-5:nth-of-type(5n), .col-3-5:last-of-type {
  margin-right: 0;
}

.col-4-5 {
  float: left;
  margin-right: 1rem;
  width: calc((100% * 0.8) - (1rem * (1 - 0.8)));
}
.col-4-5:nth-of-type(5n), .col-4-5:last-of-type {
  margin-right: 0;
}

.col-5-5 {
  float: left;
  margin-right: 1rem;
  width: calc((100% * 1) - (1rem * (1 - 1)));
}
.col-5-5:nth-of-type(5n), .col-5-5:last-of-type {
  margin-right: 0;
}

.col-1-6 {
  float: left;
  margin-right: 1rem;
  width: calc((100% * 0.1666666667) - (1rem * (1 - 0.1666666667)));
}
.col-1-6:nth-of-type(6n), .col-1-6:last-of-type {
  margin-right: 0;
}

.col-2-6 {
  float: left;
  margin-right: 1rem;
  width: calc((100% * 0.3333333333) - (1rem * (1 - 0.3333333333)));
}
.col-2-6:nth-of-type(6n), .col-2-6:last-of-type {
  margin-right: 0;
}

.col-3-6 {
  float: left;
  margin-right: 1rem;
  width: calc((100% * 0.5) - (1rem * (1 - 0.5)));
}
.col-3-6:nth-of-type(6n), .col-3-6:last-of-type {
  margin-right: 0;
}

.col-4-6 {
  float: left;
  margin-right: 1rem;
  width: calc((100% * 0.6666666667) - (1rem * (1 - 0.6666666667)));
}
.col-4-6:nth-of-type(6n), .col-4-6:last-of-type {
  margin-right: 0;
}

.col-5-6 {
  float: left;
  margin-right: 1rem;
  width: calc((100% * 0.8333333333) - (1rem * (1 - 0.8333333333)));
}
.col-5-6:nth-of-type(6n), .col-5-6:last-of-type {
  margin-right: 0;
}

.col-6-6 {
  float: left;
  margin-right: 1rem;
  width: calc((100% * 1) - (1rem * (1 - 1)));
}
.col-6-6:nth-of-type(6n), .col-6-6:last-of-type {
  margin-right: 0;
}

.col-1-7 {
  float: left;
  margin-right: 1rem;
  width: calc((100% * 0.1428571429) - (1rem * (1 - 0.1428571429)));
}
.col-1-7:nth-of-type(7n), .col-1-7:last-of-type {
  margin-right: 0;
}

.col-2-7 {
  float: left;
  margin-right: 1rem;
  width: calc((100% * 0.2857142857) - (1rem * (1 - 0.2857142857)));
}
.col-2-7:nth-of-type(7n), .col-2-7:last-of-type {
  margin-right: 0;
}

.col-3-7 {
  float: left;
  margin-right: 1rem;
  width: calc((100% * 0.4285714286) - (1rem * (1 - 0.4285714286)));
}
.col-3-7:nth-of-type(7n), .col-3-7:last-of-type {
  margin-right: 0;
}

.col-4-7 {
  float: left;
  margin-right: 1rem;
  width: calc((100% * 0.5714285714) - (1rem * (1 - 0.5714285714)));
}
.col-4-7:nth-of-type(7n), .col-4-7:last-of-type {
  margin-right: 0;
}

.col-5-7 {
  float: left;
  margin-right: 1rem;
  width: calc((100% * 0.7142857143) - (1rem * (1 - 0.7142857143)));
}
.col-5-7:nth-of-type(7n), .col-5-7:last-of-type {
  margin-right: 0;
}

.col-6-7 {
  float: left;
  margin-right: 1rem;
  width: calc((100% * 0.8571428571) - (1rem * (1 - 0.8571428571)));
}
.col-6-7:nth-of-type(7n), .col-6-7:last-of-type {
  margin-right: 0;
}

.col-7-7 {
  float: left;
  margin-right: 1rem;
  width: calc((100% * 1) - (1rem * (1 - 1)));
}
.col-7-7:nth-of-type(7n), .col-7-7:last-of-type {
  margin-right: 0;
}

.col-1-8 {
  float: left;
  margin-right: 1rem;
  width: calc((100% * 0.125) - (1rem * (1 - 0.125)));
}
.col-1-8:nth-of-type(8n), .col-1-8:last-of-type {
  margin-right: 0;
}

.col-2-8 {
  float: left;
  margin-right: 1rem;
  width: calc((100% * 0.25) - (1rem * (1 - 0.25)));
}
.col-2-8:nth-of-type(8n), .col-2-8:last-of-type {
  margin-right: 0;
}

.col-3-8 {
  float: left;
  margin-right: 1rem;
  width: calc((100% * 0.375) - (1rem * (1 - 0.375)));
}
.col-3-8:nth-of-type(8n), .col-3-8:last-of-type {
  margin-right: 0;
}

.col-4-8 {
  float: left;
  margin-right: 1rem;
  width: calc((100% * 0.5) - (1rem * (1 - 0.5)));
}
.col-4-8:nth-of-type(8n), .col-4-8:last-of-type {
  margin-right: 0;
}

.col-5-8 {
  float: left;
  margin-right: 1rem;
  width: calc((100% * 0.625) - (1rem * (1 - 0.625)));
}
.col-5-8:nth-of-type(8n), .col-5-8:last-of-type {
  margin-right: 0;
}

.col-6-8 {
  float: left;
  margin-right: 1rem;
  width: calc((100% * 0.75) - (1rem * (1 - 0.75)));
}
.col-6-8:nth-of-type(8n), .col-6-8:last-of-type {
  margin-right: 0;
}

.col-7-8 {
  float: left;
  margin-right: 1rem;
  width: calc((100% * 0.875) - (1rem * (1 - 0.875)));
}
.col-7-8:nth-of-type(8n), .col-7-8:last-of-type {
  margin-right: 0;
}

.col-8-8 {
  float: left;
  margin-right: 1rem;
  width: calc((100% * 1) - (1rem * (1 - 1)));
}
.col-8-8:nth-of-type(8n), .col-8-8:last-of-type {
  margin-right: 0;
}

.carousel-view .navigation {
  height: 25px;
  padding: 10px 0;
  font-size: 12px;
  position: relative;
  width: 100%;
}
.carousel-view .navigation .nav-button {
  color: #666;
  cursor: pointer;
}
.carousel-view .navigation .nav-button .navigation-label {
  text-decoration: underline;
}
.carousel-view .navigation .nav-button > i[class^=icon-]:before {
  display: inline-block;
  text-decoration: none;
}
.carousel-view .navigation .nav-button > i {
  vertical-align: middle;
}
.carousel-view .navigation .nav-button.back {
  position: absolute;
  left: 0;
}
.carousel-view .navigation .nav-button.next {
  position: absolute;
  right: 0;
  text-align: right;
}
.carousel-view .navigation .nav-button.hidden {
  visibility: hidden;
}
.carousel-view .navigation .card-dots {
  text-align: center;
}
.carousel-view .navigation .card-dots .dot {
  /* Increase the click-target size */
  padding: 3px;
  cursor: pointer;
  margin: 1px;
  display: inline-block;
  vertical-align: middle;
}
.carousel-view .navigation .card-dots .dot > div {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background-color: #e1e1e1;
}
.carousel-view .navigation .card-dots .dot.active > div {
  background-color: #666;
}

.plugin-detect-hidden {
  display: none;
}

.plugin-detect-element {
  background-color: transparent;
  background-image: none;
  vertical-align: baseline;
  outline-style: none;
  border-style: none;
  padding: 0;
  margin: 0;
  visibility: visible;
}

.plugin-detect-iframe, .plugin-detect-span {
  display: inline;
  font-size: 4px;
  line-height: 4px;
}

.plugin-detect-div {
  display: block;
  width: 500px;
  height: 4px;
  font-size: 4px;
  line-height: 4px;
  position: absolute;
  right: 9999px;
  top: -9999px;
}

.plugin-detect-plugin {
  background-color: transparent;
  background-image: none;
  vertical-align: baseline;
  outline-style: none;
  border-style: none;
  padding: 0;
  margin: 0;
  display: inline;
  font-size: 4px;
  line-height: 4px;
}
.plugin-detect-plugin.plugin-detect-plugin-hidden {
  visibility: hidden;
}
.plugin-detect-plugin.plugin-detect-plugin-visible {
  visibility: visible;
}

/**
 * Micro clearfix hack http://nicolasgallagher.com/micro-clearfix-hack/
 * This clearfix hack can be used on the container element that has floated
 * elements without adding new markup
 */
/** Vertically center an element in another with this mixin **/
/**
 * Source: https://css-tricks.com/snippets/css/retina-display-media-query/
 */
.c--btn-next:after, .c--btn-new-window:after {
  font-family: "Duo Admin Icons" !important;
  font-style: normal !important;
  font-weight: 400 !important;
  font-variant: normal !important;
  text-transform: none !important;
  speak: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.c--btn-next:hover:after, .c--btn-new-window:hover:after {
  box-shadow: none;
}

#messages-view {
  line-height: 40px;
  position: absolute;
  width: 100%;
  bottom: 0;
}
#messages-view.front {
  z-index: 200;
}
#messages-view .message-content {
  position: relative;
  padding: 0.3rem 16px;
  /* media queries don't work in IE7 and IE8 so we
     default to the mobile view to support smaller frames */
}
#messages-view .message-content:before, #messages-view .message-content:after {
  content: " ";
  display: table;
}
#messages-view .message-content:after {
  clear: both;
}
.ie #messages-view .message-content {
  *zoom: 1;
}
@media (max-width: 480px) {
  #messages-view .message-content {
    text-align: center;
    padding-top: 8px;
    padding-bottom: 4px;
  }
}
.ie7 #messages-view .message-content, .ie8 #messages-view .message-content {
  text-align: center;
  padding-top: 8px;
  padding-bottom: 4px;
}
#messages-view .message {
  width: 100%;
  font-weight: normal;
  position: absolute;
  bottom: 0;
  color: #fff;
  transition-property: bottom, opacity;
  transition-duration: 0.2s;
  transition-timing-function: ease;
}
#messages-view .message.info {
  background-color: #379ed4;
}
#messages-view .message.success {
  background-color: #63B246;
}
#messages-view .message.error {
  background-color: #a13639;
  font-size: 13px;
}
#messages-view .message.error .btn-link {
  background-color: #fff;
  color: #a13639;
}
#messages-view .message.warning {
  background-color: #df6a27;
  font-size: 13px;
}
#messages-view .message.warning .btn-link {
  background-color: #fff;
  color: #df6a27;
}
#messages-view .message-text {
  line-height: 14px;
  max-width: 88%;
  display: inline-block;
  vertical-align: middle;
  margin-top: -3px;
  /* media queries don't work in IE7 and IE8 so we
     default to the mobile view to support smaller frames */
}
#messages-view .message-text:before, #messages-view .message-text:after {
  content: " ";
  display: table;
}
#messages-view .message-text:after {
  clear: both;
}
.ie #messages-view .message-text {
  *zoom: 1;
}
#messages-view .message-text.has-link {
  max-width: 64%;
}
#messages-view .message-text.has-link-medium-button {
  max-width: 64%;
}
@media (max-width: 600px) {
  #messages-view .message-text.has-link-medium-button {
    max-width: 55%;
  }
}
#messages-view .message-text.has-link-wide-button {
  max-width: 55%;
}
@media (max-width: 600px) {
  #messages-view .message-text.has-link-wide-button {
    max-width: 41%;
  }
}
#messages-view .message-text.message-text-with-compliance {
  font-size: 12px;
}
#messages-view .message-text.message-text-with-compliance:before {
  display: inline-block;
}
@media (max-width: 480px) {
  #messages-view .message-text {
    display: block;
    line-height: 14px;
    max-width: 100%;
    vertical-align: middle;
    padding: 4px 0;
  }
  #messages-view .message-text.has-link {
    max-width: 100%;
  }
  #messages-view .message-text.has-link-medium-button {
    max-width: 100%;
  }
  #messages-view .message-text.has-link-wide-button {
    max-width: 100%;
  }
}
.ie7 #messages-view .message-text, .ie8 #messages-view .message-text {
  display: block;
  line-height: 14px;
  max-width: 100%;
  vertical-align: middle;
  padding: 4px 0;
}
.ie7 #messages-view .message-text.has-link, .ie8 #messages-view .message-text.has-link {
  max-width: 100%;
}
.ie7 #messages-view .message-text.has-link-medium-button, .ie8 #messages-view .message-text.has-link-medium-button {
  max-width: 100%;
}
.ie7 #messages-view .message-text.has-link-wide-button, .ie8 #messages-view .message-text.has-link-wide-button {
  max-width: 100%;
}
#messages-view .offscreen {
  opacity: 0;
  bottom: -40px;
}
#messages-view i {
  position: relative;
  top: 0;
  right: 0;
  font-size: 18px;
  margin: 0;
}
#messages-view a[class^=btn], #messages-view button {
  float: right;
  background: none;
  border-radius: 3px;
  border: 1px solid #fff;
  line-height: 14px;
  outline: none;
  padding: 8px 12px;
  position: relative;
  margin-top: 4px;
  /* media queries don't work in IE7 and IE8 so we
     default to the mobile view to support smaller frames */
}
html:not(.ie8) #messages-view a[class^=btn]:focus:before, html:not(.ie8) #messages-view button:focus:before {
  border: 1px solid white;
  box-shadow: 0 0 5px 0 white;
  content: "";
  position: absolute;
}
html:not(.ie8) #messages-view a[class^=btn]:focus:before, html:not(.ie8) #messages-view button:focus:before {
  height: calc(100% + 0.5rem);
  left: -0.25rem;
  top: -0.25rem;
  width: calc(100% + 0.5rem);
}
.ie8 #messages-view a[class^=btn]:focus, .ie8 #messages-view button:focus {
  outline: 2px solid white;
}
#messages-view a[class^=btn].btn-dismiss.medium-or-larger, #messages-view button.btn-dismiss.medium-or-larger {
  border: none;
  margin-left: 4px;
  margin-top: 4px;
  margin-right: -8px;
  padding: 6px 8px;
}
html:not(.ie8) #messages-view a[class^=btn].btn-dismiss.medium-or-larger:focus:before, html:not(.ie8) #messages-view button.btn-dismiss.medium-or-larger:focus:before {
  height: 100%;
  left: 0;
  top: 0;
  width: 100%;
}
#messages-view a[class^=btn].btn-dismiss.medium-or-smaller, #messages-view button.btn-dismiss.medium-or-smaller {
  margin-right: 0.5rem;
  /* media queries don't work in IE7 and IE8 so we
     default to the mobile view to support smaller frames */
}
@media (max-width: 480px) {
  #messages-view a[class^=btn].btn-dismiss.medium-or-smaller, #messages-view button.btn-dismiss.medium-or-smaller {
    display: inline;
    font-size: 12px;
  }
}
.ie7 #messages-view a[class^=btn].btn-dismiss.medium-or-smaller, .ie8 #messages-view a[class^=btn].btn-dismiss.medium-or-smaller, .ie7 #messages-view button.btn-dismiss.medium-or-smaller, .ie8 #messages-view button.btn-dismiss.medium-or-smaller {
  display: inline;
  font-size: 12px;
}
#messages-view a[class^=btn].btn, #messages-view a[class^=btn].btn-link, #messages-view button.btn, #messages-view button.btn-link {
  color: #fff;
  text-decoration: none;
  font-size: 12px;
}
@media (max-width: 480px) {
  #messages-view a[class^=btn], #messages-view button {
    float: none;
  }
}
.ie7 #messages-view a[class^=btn], .ie8 #messages-view a[class^=btn], .ie7 #messages-view button, .ie8 #messages-view button {
  float: none;
}

/*! normalize.css v3.0.2 | MIT License | git.io/normalize */
/**
 * 1. Set default font family to sans-serif.
 * 2. Prevent iOS text size adjust after orientation change, without disabling
 *    user zoom.
 */
html {
  font-family: sans-serif;
  /* 1 */
  -ms-text-size-adjust: 100%;
  /* 2 */
  -webkit-text-size-adjust: 100%;
  /* 2 */
}

/**
 * Remove default margin.
 */
body {
  margin: 0;
}

/* HTML5 display definitions
   ========================================================================== */
/**
 * Correct `block` display not defined for any HTML5 element in IE 8/9.
 * Correct `block` display not defined for `details` or `summary` in IE 10/11
 * and Firefox.
 * Correct `block` display not defined for `main` in IE 11.
 */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section,
summary {
  display: block;
}

/**
 * 1. Correct `inline-block` display not defined in IE 8/9.
 * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.
 */
audio,
canvas,
progress,
video {
  display: inline-block;
  /* 1 */
  vertical-align: baseline;
  /* 2 */
}

/**
 * Prevent modern browsers from displaying `audio` without controls.
 * Remove excess height in iOS 5 devices.
 */
audio:not([controls]) {
  display: none;
  height: 0;
}

/**
 * Address `[hidden]` styling not present in IE 8/9/10.
 * Hide the `template` element in IE 8/9/11, Safari, and Firefox < 22.
 */
[hidden],
template {
  display: none;
}

/* Links
   ========================================================================== */
/**
 * Remove the gray background color from active links in IE 10.
 */
a {
  background-color: transparent;
}

/**
 * Improve readability when focused and also mouse hovered in all browsers.
 */
a:active,
a:hover {
  outline: 0;
}

/* Text-level semantics
   ========================================================================== */
/**
 * Address styling not present in IE 8/9/10/11, Safari, and Chrome.
 */
abbr[title] {
  border-bottom: 1px dotted;
}

/**
 * Address style set to `bolder` in Firefox 4+, Safari, and Chrome.
 */
b,
strong {
  font-weight: bold;
}

/**
 * Address styling not present in Safari and Chrome.
 */
dfn {
  font-style: italic;
}

/**
 * Address variable `h1` font-size and margin within `section` and `article`
 * contexts in Firefox 4+, Safari, and Chrome.
 */
h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

/**
 * Address styling not present in IE 8/9.
 */
mark {
  background: #ff0;
  color: #000;
}

/**
 * Address inconsistent and variable font size in all browsers.
 */
small {
  font-size: 80%;
}

/**
 * Prevent `sub` and `sup` affecting `line-height` in all browsers.
 */
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sup {
  top: -0.5em;
}

sub {
  bottom: -0.25em;
}

/* Embedded content
   ========================================================================== */
/**
 * Remove border when inside `a` element in IE 8/9/10.
 */
img {
  border: 0;
}

/**
 * Correct overflow not hidden in IE 9/10/11.
 */
svg:not(:root) {
  overflow: hidden;
}

/* Grouping content
   ========================================================================== */
/**
 * Address margin not present in IE 8/9 and Safari.
 */
figure {
  margin: 1em 40px;
}

/**
 * Address differences between Firefox and other browsers.
 */
hr {
  box-sizing: content-box;
  height: 0;
}

/**
 * Contain overflow in all browsers.
 */
pre {
  overflow: auto;
}

/**
 * Address odd `em`-unit font size rendering in all browsers.
 */
code,
kbd,
pre,
samp {
  font-family: monospace, monospace;
  font-size: 1em;
}

/* Forms
   ========================================================================== */
/**
 * Known limitation: by default, Chrome and Safari on OS X allow very limited
 * styling of `select`, unless a `border` property is set.
 */
/**
 * 1. Correct color not being inherited.
 *    Known issue: affects color of disabled elements.
 * 2. Correct font properties not being inherited.
 * 3. Address margins set differently in Firefox 4+, Safari, and Chrome.
 */
button,
input,
optgroup,
select,
textarea {
  color: inherit;
  /* 1 */
  font: inherit;
  /* 2 */
  margin: 0;
  /* 3 */
}

/**
 * Address `overflow` set to `hidden` in IE 8/9/10/11.
 */
button {
  overflow: visible;
}

/**
 * Address inconsistent `text-transform` inheritance for `button` and `select`.
 * All other form control elements do not inherit `text-transform` values.
 * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera.
 * Correct `select` style inheritance in Firefox.
 */
button,
select {
  text-transform: none;
}

/**
 * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
 *    and `video` controls.
 * 2. Correct inability to style clickable `input` types in iOS.
 * 3. Improve usability and consistency of cursor style between image-type
 *    `input` and others.
 */
button,
html input[type=button],
input[type=reset],
input[type=submit] {
  -webkit-appearance: button;
  /* 2 */
  cursor: pointer;
  /* 3 */
}

/**
 * Re-set default cursor for disabled elements.
 */
button[disabled],
html input[disabled] {
  cursor: default;
}

/**
 * Remove inner padding and border in Firefox 4+.
 */
button::-moz-focus-inner,
input::-moz-focus-inner {
  border: 0;
  padding: 0;
}

/**
 * Address Firefox 4+ setting `line-height` on `input` using `!important` in
 * the UA stylesheet.
 */
input {
  line-height: normal;
}

/**
 * It's recommended that you don't attempt to style these elements.
 * Firefox's implementation doesn't respect box-sizing, padding, or width.
 *
 * 1. Address box sizing set to `content-box` in IE 8/9/10.
 * 2. Remove excess padding in IE 8/9/10.
 */
input[type=checkbox],
input[type=radio] {
  box-sizing: border-box;
  /* 1 */
  padding: 0;
  /* 2 */
}

/**
 * Fix the cursor style for Chrome's increment/decrement buttons. For certain
 * `font-size` values of the `input`, it causes the cursor style of the
 * decrement button to change from `default` to `text`.
 */
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  height: auto;
}

/**
 * 1. Address `appearance` set to `searchfield` in Safari and Chrome.
 * 2. Address `box-sizing` set to `border-box` in Safari and Chrome
 *    (include `-moz` to future-proof).
 */
input[type=search] {
  -webkit-appearance: textfield;
  /* 1 */
  /* 2 */
  box-sizing: content-box;
}

/**
 * Remove inner padding and search cancel button in Safari and Chrome on OS X.
 * Safari (but not Chrome) clips the cancel button when the search input has
 * padding (and `textfield` appearance).
 */
input[type=search]::-webkit-search-cancel-button,
input[type=search]::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
 * Define consistent border, margin, and padding.
 */
fieldset {
  border: 1px solid #c0c0c0;
  margin: 0 2px;
  padding: 0.35em 0.625em 0.75em;
}

/**
 * 1. Correct `color` not being inherited in IE 8/9/10/11.
 * 2. Remove padding so people aren't caught out if they zero out fieldsets.
 */
legend {
  border: 0;
  /* 1 */
  padding: 0;
  /* 2 */
}

/**
 * Remove default vertical scrollbar in IE 8/9/10/11.
 */
textarea {
  overflow: auto;
}

/**
 * Don't inherit the `font-weight` (applied by a rule above).
 * NOTE: the default cannot safely be changed in Chrome and Safari on OS X.
 */
optgroup {
  font-weight: bold;
}

/* Tables
   ========================================================================== */
/**
 * Remove most spacing between table cells.
 */
table {
  border-collapse: collapse;
  border-spacing: 0;
}

td,
th {
  padding: 0;
}

/**
 * Micro clearfix hack http://nicolasgallagher.com/micro-clearfix-hack/
 * This clearfix hack can be used on the container element that has floated
 * elements without adding new markup
 */
/** Vertically center an element in another with this mixin **/
/**
 * Source: https://css-tricks.com/snippets/css/retina-display-media-query/
 */
.c--btn-next:after, .c--btn-new-window:after {
  font-family: "Duo Admin Icons" !important;
  font-style: normal !important;
  font-weight: 400 !important;
  font-variant: normal !important;
  text-transform: none !important;
  speak: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.c--btn-next:hover:after, .c--btn-new-window:hover:after {
  box-shadow: none;
}

html {
  box-sizing: border-box;
}

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

html, body {
  min-height: 100vh;
}

body {
  background-color: #f7f7f7;
  color: #333;
}
@media screen and (max-resolution: 120dpi) {
  body {
    color: #000;
  }
}

a {
  transition-property: color;
  transition-duration: 0.2s;
  transition-timing-function: ease;
  color: #379ed4;
}
a:hover {
  color: #22729d;
}
a:focus {
  outline: 2px solid #63B246;
}

a[target=_blank] i.icon-new-window {
  display: inline-block;
  text-decoration: none;
  padding-left: 4px;
  font-size: 80%;
}

dl {
  margin-top: 0;
}

p, li {
  margin-bottom: 0.875rem;
}
p:last-child, li:last-child {
  margin-bottom: 0;
}

.disabled, .disabled h1, .disabled h2, .disabled h3, .disabled h4, .disabled h5, .disabled h6, .disabled-row, .disabled-row h1, .disabled-row h2, .disabled-row h3, .disabled-row h4, .disabled-row h5, .disabled-row h6 {
  color: rgba(51, 51, 51, 0.5);
}
.disabled a, .disabled-row a {
  color: rgba(26, 26, 26, 0.5);
}

.disabled-row {
  color: #999;
}
.disabled-row a {
  color: #777;
}

/**
 * Micro clearfix hack http://nicolasgallagher.com/micro-clearfix-hack/
 * This clearfix hack can be used on the container element that has floated
 * elements without adding new markup
 */
/** Vertically center an element in another with this mixin **/
/**
 * Source: https://css-tricks.com/snippets/css/retina-display-media-query/
 */
.c--btn-next:after, .c--btn-new-window:after {
  font-family: "Duo Admin Icons" !important;
  font-style: normal !important;
  font-weight: 400 !important;
  font-variant: normal !important;
  text-transform: none !important;
  speak: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.c--btn-next:hover:after, .c--btn-new-window:hover:after {
  box-shadow: none;
}

body {
  color: #333;
  font-family: "Helvetica Neue", helvetica, arial, sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
}

p {
  margin-top: 0;
}

h1, .h1 {
  color: #666;
  font-family: "Helvetica Neue", helvetica, arial, sans-serif;
  font-size: 32px;
  font-weight: 400;
  /* stylelint-disable-line font-weight-notation */
  line-height: 44px;
  margin: 0 0 22px;
}
@media screen and (max-resolution: 120dpi) {
  h1, .h1 {
    color: #000;
  }
}

h2, .h2 {
  color: #666;
  font-family: "Helvetica Neue", helvetica, arial, sans-serif;
  font-size: 24px;
  font-weight: 400;
  /* stylelint-disable-line font-weight-notation */
  line-height: 32px;
  margin: 0 0 16px;
}
@media screen and (max-resolution: 120dpi) {
  h2, .h2 {
    color: #000;
  }
}

h3, .h3 {
  color: #666;
  font-family: "Helvetica Neue", helvetica, arial, sans-serif;
  font-size: 20px;
  font-weight: 400;
  /* stylelint-disable-line font-weight-notation */
  line-height: 28px;
  margin: 0 0 14px;
}
@media screen and (max-resolution: 120dpi) {
  h3, .h3 {
    color: #000;
  }
}

h4, .h4 {
  color: #666;
  font-family: "Helvetica Neue", helvetica, arial, sans-serif;
  font-size: 18px;
  font-weight: 400;
  /* stylelint-disable-line font-weight-notation */
  line-height: 26px;
  margin: 0 0 13px;
}
@media screen and (max-resolution: 120dpi) {
  h4, .h4 {
    color: #000;
  }
}

h5, .h5 {
  color: #666;
  font-family: "Helvetica Neue", helvetica, arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  /* stylelint-disable-line font-weight-notation */
  line-height: 22px;
  margin: 0 0 11px;
}
@media screen and (max-resolution: 120dpi) {
  h5, .h5 {
    color: #000;
  }
}

h6, .h6 {
  color: #666;
  font-family: "Helvetica Neue", helvetica, arial, sans-serif;
  font-size: 14px;
  font-weight: 400;
  /* stylelint-disable-line font-weight-notation */
  line-height: 20px;
  margin: 0 0 10px;
}
@media screen and (max-resolution: 120dpi) {
  h6, .h6 {
    color: #000;
  }
}

/**
 * Micro clearfix hack http://nicolasgallagher.com/micro-clearfix-hack/
 * This clearfix hack can be used on the container element that has floated
 * elements without adding new markup
 */
/** Vertically center an element in another with this mixin **/
/**
 * Source: https://css-tricks.com/snippets/css/retina-display-media-query/
 */
.c--btn-next:after, .c--btn-new-window:after {
  font-family: "Duo Admin Icons" !important;
  font-style: normal !important;
  font-weight: 400 !important;
  font-variant: normal !important;
  text-transform: none !important;
  speak: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.c--btn-next:hover:after, .c--btn-new-window:hover:after {
  box-shadow: none;
}

.box {
  background-color: #fff;
  border-radius: 3px;
  padding: 1rem;
  margin-bottom: 2rem;
}
.box.disabled {
  background: rgba(255, 255, 255, 0.65);
  color: rgba(51, 51, 51, 0.5);
}

.box-header {
  border-bottom: 1px solid #e1e1e1;
  padding-bottom: 24px;
  position: relative;
}
.box-header:before, .box-header:after {
  content: " ";
  display: table;
}
.box-header:after {
  clear: both;
}
.ie .box-header {
  *zoom: 1;
}
.box-header h3 {
  margin-bottom: 4px;
}

.box-header-group {
  float: left;
}

.box-header-info {
  color: #888;
  display: block;
}

.box-header-buttons {
  float: right;
  margin-top: 8px;
}
.box-header-buttons > * {
  float: right;
  margin-left: 16px;
}

/**
 * Micro clearfix hack http://nicolasgallagher.com/micro-clearfix-hack/
 * This clearfix hack can be used on the container element that has floated
 * elements without adding new markup
 */
/** Vertically center an element in another with this mixin **/
/**
 * Source: https://css-tricks.com/snippets/css/retina-display-media-query/
 */
.c--btn-next:after, .c--btn-new-window:after {
  font-family: "Duo Admin Icons" !important;
  font-style: normal !important;
  font-weight: 400 !important;
  font-variant: normal !important;
  text-transform: none !important;
  speak: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.c--btn-next:hover:after, .c--btn-new-window:hover:after {
  box-shadow: none;
}

form:not(.inline) {
  background-color: #fff;
  border-radius: 3px;
  padding: 1rem;
  margin-bottom: 2rem;
}
form:not(.inline).disabled {
  background: rgba(255, 255, 255, 0.65);
  color: rgba(51, 51, 51, 0.5);
}

fieldset {
  border: none;
  margin: 1rem 0;
  padding: 0;
}

legend {
  font-size: 16px;
  font-weight: 400;
}

label {
  color: #888;
}
[type=checkbox] + label, [type=radio] + label {
  color: inherit;
}
label span {
  color: #333;
}
@media screen and (max-resolution: 120dpi) {
  label {
    color: #444;
  }
}

ul.error-list {
  list-style-type: none;
  padding: 0;
  margin: 0;
}
ul.error-list li {
  font-size: 12px;
  color: #cf6e71;
  margin: 2px 0;
}

.description:not(th) {
  background-color: #dfeff8;
  padding: 1rem;
  margin-top: -1rem;
  margin-left: -1rem;
  margin-right: -1rem;
  margin-bottom: 1rem;
}
.description:not(th) > :last-child {
  margin-bottom: 0;
}
.description:not(th).secure-payment {
  background: #FFFFB0 url("/static/images/lock.png") no-repeat 11px 14px;
  color: #333;
  padding-left: 50px;
  padding-right: 90px;
}

.line {
  clear: both;
  margin-bottom: 1rem;
}
.line:before, .line:after {
  content: " ";
  display: table;
}
.line:after {
  clear: both;
}
.ie .line {
  *zoom: 1;
}
.line:not(.vertical) > label:first-of-type {
  min-width: 12rem;
  padding-top: 6px;
  float: left;
  text-align: right;
  line-height: 18px;
}
.line .field {
  float: left;
  width: calc(100% - 13rem);
}
.line.close {
  margin-top: -0.75rem;
}
.line.indent {
  margin-left: 0;
  padding-left: 1rem;
  padding-right: 1rem;
}
.line:last-child {
  margin-bottom: 0;
}
.flexbox .line:not(.vertical) {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: baseline;
      align-items: baseline;
}
.flexbox .line:not(.vertical).hidden {
  display: none;
}
.flexbox .line:not(.vertical) .field {
  -ms-flex: 1 0 0;
      flex: 1 0 0;
  margin-left: 1rem;
}

.subline {
  display: block;
  margin-bottom: 0.5rem;
}

.indent {
  margin-left: 2rem;
}

.actions {
  padding: 0 0.25rem 0.25rem 13rem;
}

.has_error {
  color: #a13639;
  font-weight: 600;
}

.access-read-only input.text[readonly], .access-read-only textarea[readonly] {
  border: none;
  box-shadow: none;
}
.access-read-only textarea[readonly] {
  background: none;
  resize: none;
}
.access-read-only textarea[readonly]:focus {
  outline: none;
}

/* FORM ELEMENTS */
button, input, select, textarea {
  font-size: 100%;
  margin: 0;
  vertical-align: baseline;
}
button.error, input.error, select.error, textarea.error {
  border-color: #cf6e71;
}

button, input {
  line-height: normal;
}

input, textarea, select {
  border-color: #ccc;
}
@media screen and (max-resolution: 120dpi) {
  input, textarea, select {
    border-color: #dadada;
  }
}

input, textarea {
  transition-property: color, border-color, box-shadow;
  transition-duration: 0.2s;
  transition-timing-function: ease;
  font-family: "Helvetica Neue", helvetica, arial, sans-serif;
  border-width: 2px;
  border-style: solid;
  border-radius: 3px;
  color: #666;
  padding: 0.5em;
  width: 100%;
  outline: none;
}
input:hover, textarea:hover {
  border-color: #d4d4d4;
}
input:focus, textarea:focus {
  color: #333;
  border-color: #63B246;
  box-shadow: 0 0 5px 0 rgba(99, 178, 70, 0.5);
}
input.half-width, textarea.half-width {
  width: 50%;
}
input.short, textarea.short {
  width: 48px;
}
input.valid, .line.valid input, textarea.valid, .line.valid textarea {
  border-color: #9fd28c;
}
input.invalid, .line.invalid input, textarea.invalid, .line.invalid textarea {
  border-color: #cf6e71;
}
html input[disabled], html textarea[disabled] {
  color: #888;
  background-color: #ebebe4;
  cursor: not-allowed;
}

input[type=checkbox] {
  width: auto;
  margin-right: 0.5rem;
}
input[type=checkbox]:focus {
  outline: 2px solid #63B246;
}

input[type=radio] {
  -moz-appearance: unset;
  appearance: unset;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  margin-right: 0.25em;
  padding: 2px;
  border: 1px solid #ccc;
  vertical-align: -4.5px;
}
input[type=radio]:checked:after {
  content: "";
  display: block;
  border-radius: 50%;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-color: #666;
}
input[type=radio]:focus {
  box-shadow: 0 0 0 1px #fff, 0 0 0 2px #666;
}

input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button {
  appearance: none;
  margin: 0;
}

input[type=number] {
  appearance: textfield;
}

input[type=tel]:focus {
  color: #333;
  border: 2px solid #63B246;
  box-shadow: 0 0 5px 0 rgba(99, 178, 70, 0.5);
}

select {
  transition-property: color, border-color, box-shadow;
  transition-duration: 0.2s;
  transition-timing-function: ease;
  margin-top: 1px;
  font-size: inherit;
  font-weight: 400;
  display: inline-block;
  font-family: "Helvetica Neue", helvetica, arial, sans-serif;
  background: #fff;
  border: 2px solid #ccc;
  border-radius: 3px;
  color: #666;
  padding: 0.5rem;
  outline: none;
  width: 50%;
}
select:focus {
  color: #333;
  border-color: #63B246;
  box-shadow: 0 0 5px 0 rgba(99, 178, 70, 0.5);
}
select.short {
  width: 48px;
}

select[multiple] {
  height: inherit;
  background-color: #ffffff;
}

select[disabled] {
  color: #888;
  border-color: #ccc;
  background-color: #ebebe4;
  cursor: not-allowed;
}

textarea {
  vertical-align: text-top;
}

#feedback {
  display: none;
  margin-top: 5px;
}
#feedback textarea {
  width: 162px;
  margin-bottom: 8px;
}

.feedback-thanks {
  display: none;
}

.field.final-help {
  background-color: #FFFFB0;
  padding: 12px 12px 1px;
  margin-right: 30px;
  margin-bottom: 5px;
}

select.wider {
  width: 300px;
}

select#predelay, select#postdelay {
  width: 50px;
  margin-right: 5px;
}

.option-box {
  width: auto;
}

#nameidformat {
  width: 400px;
}

.search .select2-container {
  font-size: small;
  color: #000;
  margin: 2px 5px 5px;
}
.search .select2-container a {
  height: 18px;
  line-height: 18px;
}
.search .select2-container a .select2-chosen {
  color: #000;
}
.search .select2-container a .select2-arrow > b {
  margin-top: -2px;
}

.select2-link {
  margin-left: 0.5rem;
}

.line-height {
  line-height: 15px;
}

/**
 * Micro clearfix hack http://nicolasgallagher.com/micro-clearfix-hack/
 * This clearfix hack can be used on the container element that has floated
 * elements without adding new markup
 */
/** Vertically center an element in another with this mixin **/
/**
 * Source: https://css-tricks.com/snippets/css/retina-display-media-query/
 */
.c--btn-next:after, .c--btn-new-window:after {
  font-family: "Duo Admin Icons" !important;
  font-style: normal !important;
  font-weight: 400 !important;
  font-variant: normal !important;
  text-transform: none !important;
  speak: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.c--btn-next:hover:after, .c--btn-new-window:hover:after {
  box-shadow: none;
}

@keyframes barberpole {
  from {
    background-position: 0 0;
  }
  to {
    background-position: 2rem 0;
  }
}
/* This is maintained for any forgotten old-style banners that are not using DsBanner styles */
.flash .info, .flash .message {
  background-color: #dfeff8;
  border-radius: 3px;
  color: #666;
  padding: 1rem;
  position: relative;
  margin-top: 0;
  margin-bottom: 1rem;
}
.flash .info a, .flash .message a {
  color: #4d4d4d;
}
.flash .info a:hover, .flash .message a:hover {
  color: #333333;
}
.flash .error {
  background-color: #f4d5d5;
  border-radius: 3px;
  color: #666;
  padding: 1rem;
  position: relative;
  margin-top: 0;
  margin-bottom: 1rem;
}
.flash .error a {
  color: #4d4d4d;
}
.flash .error a:hover {
  color: #333333;
}
.flash .success {
  background-color: #dcefd5;
  border-radius: 3px;
  color: #666;
  padding: 1rem;
  position: relative;
  margin-top: 0;
  margin-bottom: 1rem;
}
.flash .success a {
  color: #4d4d4d;
}
.flash .success a:hover {
  color: #333333;
}
.flash .warning {
  background-color: #f9e5d9;
  border-radius: 3px;
  color: #666;
  padding: 1rem;
  position: relative;
  margin-top: 0;
  margin-bottom: 1rem;
}
.flash .warning a {
  color: #4d4d4d;
}
.flash .warning a:hover {
  color: #333333;
}
.flash .progress {
  background-color: #e1e1e1;
  border-radius: 3px;
  color: #333;
  padding: 1rem;
  position: relative;
  margin-top: 0;
  margin-bottom: 1rem;
  background-size: 2rem 2rem;
  background-image: linear-gradient(45deg, rgba(51, 51, 51, 0.05) 25%, transparent 25%, transparent 50%, rgba(51, 51, 51, 0.05) 50%, rgba(51, 51, 51, 0.05) 75%, transparent 75%, transparent);
  animation: barberpole 0.5s linear infinite;
}
.flash .progress a {
  color: #1a1a1a;
}
.flash .progress a:hover {
  color: black;
}
.flash p:last-child {
  margin-bottom: 0;
}

.ds-banner .flash-link {
  white-space: nowrap;
}
.ds-banner .flash-msg {
  white-space: pre-wrap;
  word-break: break-word;
}

.page-message {
  background-color: #dfeff8;
  border-radius: 3px;
  color: #666;
  padding: 1rem;
  position: relative;
  margin-top: 0;
  margin-bottom: 1rem;
}
.page-message:before, .page-message:after {
  content: " ";
  display: table;
}
.page-message:after {
  clear: both;
}
.ie .page-message {
  *zoom: 1;
}
.page-message a {
  color: #4d4d4d;
}
.page-message a:hover {
  color: #333333;
}
.page-message img {
  float: right;
}
.page-message ul, .page-message ol {
  margin: 4px 30px 10px 20px;
}
.page-message li {
  list-style-type: disc;
  list-style-position: inside;
  line-height: 18px;
}
.page-message p:last-child {
  margin-bottom: 0;
}
.page-message.info > *, .page-message.warning > * {
  margin-left: 48px;
}
.page-message.info:before, .page-message.warning:before {
  font-family: "Duo Admin Icons";
  font-size: 32px;
  position: absolute;
  display: block;
  -ms-transform: translateY(-50%);
      transform: translateY(-50%);
  top: 50%;
  left: 16px;
}
.page-message.info {
  border: 1px solid #CBD9E1;
}
.page-message.info:before {
  content: "\e0d0";
}
.page-message.info .info-box-title {
  font-weight: 600;
  margin-bottom: 0;
}
.page-message.warning {
  background-color: #f9e5d9;
  border-radius: 3px;
  color: #666;
  padding: 1rem;
  position: relative;
  margin-top: 0;
  margin-bottom: 1rem;
  border: 1px solid #ebcfbe;
}
.page-message.warning a {
  color: #2682b2;
}
.page-message.warning a:hover {
  color: #1d6388;
}
.page-message.warning:before {
  content: "\e0cf";
}
.page-message.secure:before {
  content: "\e01a";
}
.page-message.limit {
  margin-bottom: 2.5em;
}
.page-message.no-top-margin {
  margin-top: 0;
}
.page-message.success {
  background-color: #9fd28c;
  border-radius: 3px;
  color: #666;
  padding: 1rem;
  position: relative;
  margin-top: 0;
  margin-bottom: 1rem;
}
.page-message.success a {
  color: #4d4d4d;
}
.page-message.success a:hover {
  color: #333333;
}
.page-message.success.limit {
  padding: 15px 20px;
}
.page-message.error {
  background-color: #f4d5d5;
  border-radius: 3px;
  color: #666;
  padding: 1rem;
  position: relative;
  margin-top: 0;
  margin-bottom: 1rem;
}
.page-message.error a {
  color: #4d4d4d;
}
.page-message.error a:hover {
  color: #333333;
}

.page-message-labs .labs-icon {
  vertical-align: inherit;
}
.page-message-labs p {
  display: inline-block;
  margin-bottom: 0 !important;
  width: 95%;
}

/**
 * Micro clearfix hack http://nicolasgallagher.com/micro-clearfix-hack/
 * This clearfix hack can be used on the container element that has floated
 * elements without adding new markup
 */
/** Vertically center an element in another with this mixin **/
/**
 * Source: https://css-tricks.com/snippets/css/retina-display-media-query/
 */
.c--btn-next:after, .c--btn-new-window:after {
  font-family: "Duo Admin Icons" !important;
  font-style: normal !important;
  font-weight: 400 !important;
  font-variant: normal !important;
  text-transform: none !important;
  speak: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.c--btn-next:hover:after, .c--btn-new-window:hover:after {
  box-shadow: none;
}

.noscroll {
  overflow: hidden;
}

.overlay {
  background: rgba(0, 0, 0, 0.4);
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: center;
      justify-content: center;
  -ms-flex-align: center;
      align-items: center;
  padding: 0 10%;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1000;
  transition-property: opacity;
  transition-duration: 250ms;
  transition-timing-function: ease-in-out;
}
.overlay.hiding {
  opacity: 0;
}
.overlay.hidden {
  display: none;
  opacity: 0;
  transition: none;
}
.overlay.before-showing {
  opacity: 0;
}

.modal {
  background-color: #fff;
  border-radius: 3px;
  position: relative;
  z-index: 1001;
  opacity: 1;
  transition-property: opacity;
  transition-duration: 250ms;
  transition-timing-function: ease-in-out;
}
.modal.hiding {
  opacity: 0;
}
.modal.hidden {
  opacity: 0;
  display: none;
  transition: none;
}
.modal.before-showing {
  opacity: 0;
}

.ie9 .modal {
  margin: auto;
  top: 50%;
  -ms-transform: translate(0, -50%);
}

form.modal {
  padding: 0;
}

.modal-fixed {
  height: 90%;
  margin: auto;
  max-width: 600px;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 90%;
}

.modal-fixed-content,
.modal-fixed-footer,
.modal-fixed-header {
  left: 0;
  position: absolute;
  right: 0;
}

.modal-fixed-content {
  top: 80px;
  bottom: 80px;
}

.modal-fixed-footer {
  height: 80px;
  bottom: 0;
}

.modal-fixed-header {
  height: 80px;
  top: 0;
}

.modal-auto {
  transition: opacity 250ms ease-in-out;
}

.modal-header, .modal-footer {
  padding: 20px 32px;
}

.modal-header {
  padding-bottom: 0;
}
.modal-header h1 {
  font-size: 24px;
  line-height: 48px;
  margin: 0;
}
.modal-header .modal-close {
  color: #888;
  font-size: 20px;
  padding: 20px;
  position: absolute;
  right: 0.5em;
  text-decoration: none;
  top: 0.5em;
}
.modal-header .modal-close:hover {
  color: #333;
}

.modal-content {
  border-top: solid 1px #e1e1e1;
  margin-top: 20px;
  padding: 24px 32px;
  overflow-y: auto;
}

.modal-footer {
  border-top: solid 1px #e1e1e1;
  text-align: center;
}

/**
 * Micro clearfix hack http://nicolasgallagher.com/micro-clearfix-hack/
 * This clearfix hack can be used on the container element that has floated
 * elements without adding new markup
 */
/** Vertically center an element in another with this mixin **/
/**
 * Source: https://css-tricks.com/snippets/css/retina-display-media-query/
 */
.c--btn-next:after, .c--btn-new-window:after {
  font-family: "Duo Admin Icons" !important;
  font-style: normal !important;
  font-weight: 400 !important;
  font-variant: normal !important;
  text-transform: none !important;
  speak: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.c--btn-next:hover:after, .c--btn-new-window:hover:after {
  box-shadow: none;
}

button, .button, input[type=submit]:not(.link), input[type=reset], input[type=button] {
  transition-property: background-color, border-color, box-shadow;
  transition-duration: 0.2s;
  transition-timing-function: ease;
  border: none;
  border-radius: 3px;
  box-shadow: none;
  cursor: pointer;
  display: inline-block;
  font-size: 14px;
  font-weight: 400;
  line-height: 1em;
  padding: 12px 16px;
  text-decoration: none;
  background-color: #888;
  border-color: #888;
  color: white;
  outline: 0;
}
button i, .button i, input[type=submit]:not(.link) i, input[type=reset] i, input[type=button] i {
  font-size: 11px;
  line-height: 0;
  margin-right: 4px;
}
button i.icon-download, .button i.icon-download, input[type=submit]:not(.link) i.icon-download, input[type=reset] i.icon-download, input[type=button] i.icon-download {
  margin-right: 8px;
}
button.ghost, .button.ghost, input[type=submit]:not(.link).ghost, input[type=reset].ghost, input[type=button].ghost {
  border: solid 2px transparent;
  background-color: transparent;
}
button.tiny, .button.tiny, input[type=submit]:not(.link).tiny, input[type=reset].tiny, input[type=button].tiny {
  font-size: 11.2px;
  padding: 6px 8px;
}
button.tiny i, .button.tiny i, input[type=submit]:not(.link).tiny i, input[type=reset].tiny i, input[type=button].tiny i {
  vertical-align: middle;
  margin-right: 0;
}
button.huge, .button.huge, input[type=submit]:not(.link).huge, input[type=reset].huge, input[type=button].huge {
  font-size: 17.5px;
  padding: 16px 20px;
}
button.square, .button.square, input[type=submit]:not(.link).square, input[type=reset].square, input[type=button].square {
  text-align: center;
  padding-left: 4px;
  padding-right: 4px;
}
button.square i, .button.square i, input[type=submit]:not(.link).square i, input[type=reset].square i, input[type=button].square i {
  display: block;
  font-size: 2rem;
  height: 2rem;
  margin-bottom: 0.5rem;
}
button.block, .button.block, input[type=submit]:not(.link).block, input[type=reset].block, input[type=button].block {
  display: block;
  width: 100%;
}
button.wait-cursor, .button.wait-cursor, input[type=submit]:not(.link).wait-cursor, input[type=reset].wait-cursor, input[type=button].wait-cursor {
  cursor: wait;
}
button span, .button span, input[type=submit]:not(.link) span, input[type=reset] span, input[type=button] span {
  color: white;
}
button:hover, .button:hover, input[type=submit]:not(.link):hover, input[type=reset]:hover, input[type=button]:hover {
  background-color: #6f6f6f;
  border-color: #6f6f6f;
  color: white;
}
button:active, .button:active, input[type=submit]:not(.link):active, input[type=reset]:active, input[type=button]:active {
  background-color: #626262;
  border-color: #626262;
  transition-duration: 0s;
  color: white;
}
button:focus, .button:focus, input[type=submit]:not(.link):focus, input[type=reset]:focus, input[type=button]:focus {
  background-color: #6f6f6f;
  outline: 2px solid #888;
  outline-offset: 3px;
  color: white;
}
button:disabled, button.disabled, .button:disabled, .button.disabled, input[type=submit]:not(.link):disabled, input[type=submit]:not(.link).disabled, input[type=reset]:disabled, input[type=reset].disabled, input[type=button]:disabled, input[type=button].disabled {
  cursor: not-allowed;
  color: white;
}
button:disabled, button:disabled:hover, button.disabled, button.disabled:hover, .button:disabled, .button:disabled:hover, .button.disabled, .button.disabled:hover, input[type=submit]:not(.link):disabled, input[type=submit]:not(.link):disabled:hover, input[type=submit]:not(.link).disabled, input[type=submit]:not(.link).disabled:hover, input[type=reset]:disabled, input[type=reset]:disabled:hover, input[type=reset].disabled, input[type=reset].disabled:hover, input[type=button]:disabled, input[type=button]:disabled:hover, input[type=button].disabled, input[type=button].disabled:hover {
  background-color: rgba(136, 136, 136, 0.5);
  border-color: rgba(136, 136, 136, 0.5);
  color: rgba(255, 255, 255, 0.5);
}
button.ghost, .button.ghost, input[type=submit]:not(.link).ghost, input[type=reset].ghost, input[type=button].ghost {
  background-color: transparent;
  border-color: #888;
  color: #888;
}
button.ghost:hover, .button.ghost:hover, input[type=submit]:not(.link).ghost:hover, input[type=reset].ghost:hover, input[type=button].ghost:hover {
  background-color: transparent;
  color: #555555;
}
button.ghost:active, .button.ghost:active, input[type=submit]:not(.link).ghost:active, input[type=reset].ghost:active, input[type=button].ghost:active {
  color: #3c3c3c;
}
button.ghost:focus, .button.ghost:focus, input[type=submit]:not(.link).ghost:focus, input[type=reset].ghost:focus, input[type=button].ghost:focus {
  outline: 2px solid #fff;
  color: #555555;
}
button.ghost.disabled, button.ghost.disabled:hover, button.ghost:disabled, button.ghost:disabled:hover, .button.ghost.disabled, .button.ghost.disabled:hover, .button.ghost:disabled, .button.ghost:disabled:hover, input[type=submit]:not(.link).ghost.disabled, input[type=submit]:not(.link).ghost.disabled:hover, input[type=submit]:not(.link).ghost:disabled, input[type=submit]:not(.link).ghost:disabled:hover, input[type=reset].ghost.disabled, input[type=reset].ghost.disabled:hover, input[type=reset].ghost:disabled, input[type=reset].ghost:disabled:hover, input[type=button].ghost.disabled, input[type=button].ghost.disabled:hover, input[type=button].ghost:disabled, input[type=button].ghost:disabled:hover {
  background-color: transparent;
  border-color: rgba(136, 136, 136, 0.5);
  color: rgba(136, 136, 136, 0.5);
}
button.full-width, .button.full-width, input[type=submit]:not(.link).full-width, input[type=reset].full-width, input[type=button].full-width {
  width: 100%;
}
button.primary, .button.primary, input[type=submit]:not(.link).primary, input[type=reset].primary, input[type=button].primary {
  background-color: #379ed4;
  border-color: #379ed4;
  color: white;
  outline: 0;
}
button.primary span, .button.primary span, input[type=submit]:not(.link).primary span, input[type=reset].primary span, input[type=button].primary span {
  color: white;
}
button.primary:hover, .button.primary:hover, input[type=submit]:not(.link).primary:hover, input[type=reset].primary:hover, input[type=button].primary:hover {
  background-color: #2682b2;
  border-color: #2682b2;
  color: white;
}
button.primary:active, .button.primary:active, input[type=submit]:not(.link).primary:active, input[type=reset].primary:active, input[type=button].primary:active {
  background-color: #22729d;
  border-color: #22729d;
  transition-duration: 0s;
  color: white;
}
button.primary:focus, .button.primary:focus, input[type=submit]:not(.link).primary:focus, input[type=reset].primary:focus, input[type=button].primary:focus {
  background-color: #2682b2;
  outline: 2px solid #379ed4;
  outline-offset: 3px;
  color: white;
}
button.primary:disabled, button.primary.disabled, .button.primary:disabled, .button.primary.disabled, input[type=submit]:not(.link).primary:disabled, input[type=submit]:not(.link).primary.disabled, input[type=reset].primary:disabled, input[type=reset].primary.disabled, input[type=button].primary:disabled, input[type=button].primary.disabled {
  cursor: not-allowed;
  color: white;
}
button.primary:disabled, button.primary:disabled:hover, button.primary.disabled, button.primary.disabled:hover, .button.primary:disabled, .button.primary:disabled:hover, .button.primary.disabled, .button.primary.disabled:hover, input[type=submit]:not(.link).primary:disabled, input[type=submit]:not(.link).primary:disabled:hover, input[type=submit]:not(.link).primary.disabled, input[type=submit]:not(.link).primary.disabled:hover, input[type=reset].primary:disabled, input[type=reset].primary:disabled:hover, input[type=reset].primary.disabled, input[type=reset].primary.disabled:hover, input[type=button].primary:disabled, input[type=button].primary:disabled:hover, input[type=button].primary.disabled, input[type=button].primary.disabled:hover {
  background-color: rgba(55, 158, 212, 0.5);
  border-color: rgba(55, 158, 212, 0.5);
  color: rgba(255, 255, 255, 0.5);
}
button.primary.ghost, .button.primary.ghost, input[type=submit]:not(.link).primary.ghost, input[type=reset].primary.ghost, input[type=button].primary.ghost {
  background-color: transparent;
  border-color: #379ed4;
  color: #379ed4;
}
button.primary.ghost:hover, .button.primary.ghost:hover, input[type=submit]:not(.link).primary.ghost:hover, input[type=reset].primary.ghost:hover, input[type=button].primary.ghost:hover {
  background-color: transparent;
  color: #1d6388;
}
button.primary.ghost:active, .button.primary.ghost:active, input[type=submit]:not(.link).primary.ghost:active, input[type=reset].primary.ghost:active, input[type=button].primary.ghost:active {
  color: #14445e;
}
button.primary.ghost:focus, .button.primary.ghost:focus, input[type=submit]:not(.link).primary.ghost:focus, input[type=reset].primary.ghost:focus, input[type=button].primary.ghost:focus {
  outline: 2px solid #fff;
  color: #1d6388;
}
button.primary.ghost.disabled, button.primary.ghost.disabled:hover, button.primary.ghost:disabled, button.primary.ghost:disabled:hover, .button.primary.ghost.disabled, .button.primary.ghost.disabled:hover, .button.primary.ghost:disabled, .button.primary.ghost:disabled:hover, input[type=submit]:not(.link).primary.ghost.disabled, input[type=submit]:not(.link).primary.ghost.disabled:hover, input[type=submit]:not(.link).primary.ghost:disabled, input[type=submit]:not(.link).primary.ghost:disabled:hover, input[type=reset].primary.ghost.disabled, input[type=reset].primary.ghost.disabled:hover, input[type=reset].primary.ghost:disabled, input[type=reset].primary.ghost:disabled:hover, input[type=button].primary.ghost.disabled, input[type=button].primary.ghost.disabled:hover, input[type=button].primary.ghost:disabled, input[type=button].primary.ghost:disabled:hover {
  background-color: transparent;
  border-color: rgba(136, 136, 136, 0.5);
  color: rgba(136, 136, 136, 0.5);
}
button.primary.full-width, .button.primary.full-width, input[type=submit]:not(.link).primary.full-width, input[type=reset].primary.full-width, input[type=button].primary.full-width {
  width: 100%;
}
button.secondary, .button.secondary, input[type=submit]:not(.link).secondary, input[type=reset].secondary, input[type=button].secondary {
  background-color: #e1e1e1;
  border-color: #e1e1e1;
  color: #379ed4;
  outline: 0;
}
button.secondary span, .button.secondary span, input[type=submit]:not(.link).secondary span, input[type=reset].secondary span, input[type=button].secondary span {
  color: #379ed4;
}
button.secondary:hover, .button.secondary:hover, input[type=submit]:not(.link).secondary:hover, input[type=reset].secondary:hover, input[type=button].secondary:hover {
  background-color: #c8c8c8;
  border-color: #c8c8c8;
  color: #379ed4;
}
button.secondary:active, .button.secondary:active, input[type=submit]:not(.link).secondary:active, input[type=reset].secondary:active, input[type=button].secondary:active {
  background-color: #bbbbbb;
  border-color: #bbbbbb;
  transition-duration: 0s;
  color: #379ed4;
}
button.secondary:focus, .button.secondary:focus, input[type=submit]:not(.link).secondary:focus, input[type=reset].secondary:focus, input[type=button].secondary:focus {
  background-color: #c8c8c8;
  outline: 2px solid #e1e1e1;
  outline-offset: 3px;
  color: #379ed4;
}
button.secondary:disabled, button.secondary.disabled, .button.secondary:disabled, .button.secondary.disabled, input[type=submit]:not(.link).secondary:disabled, input[type=submit]:not(.link).secondary.disabled, input[type=reset].secondary:disabled, input[type=reset].secondary.disabled, input[type=button].secondary:disabled, input[type=button].secondary.disabled {
  cursor: not-allowed;
  color: #379ed4;
}
button.secondary:disabled, button.secondary:disabled:hover, button.secondary.disabled, button.secondary.disabled:hover, .button.secondary:disabled, .button.secondary:disabled:hover, .button.secondary.disabled, .button.secondary.disabled:hover, input[type=submit]:not(.link).secondary:disabled, input[type=submit]:not(.link).secondary:disabled:hover, input[type=submit]:not(.link).secondary.disabled, input[type=submit]:not(.link).secondary.disabled:hover, input[type=reset].secondary:disabled, input[type=reset].secondary:disabled:hover, input[type=reset].secondary.disabled, input[type=reset].secondary.disabled:hover, input[type=button].secondary:disabled, input[type=button].secondary:disabled:hover, input[type=button].secondary.disabled, input[type=button].secondary.disabled:hover {
  background-color: rgba(225, 225, 225, 0.5);
  border-color: rgba(225, 225, 225, 0.5);
  color: rgba(255, 255, 255, 0.5);
}
button.secondary.ghost, .button.secondary.ghost, input[type=submit]:not(.link).secondary.ghost, input[type=reset].secondary.ghost, input[type=button].secondary.ghost {
  background-color: transparent;
  border-color: #e1e1e1;
  color: #e1e1e1;
}
button.secondary.ghost:hover, .button.secondary.ghost:hover, input[type=submit]:not(.link).secondary.ghost:hover, input[type=reset].secondary.ghost:hover, input[type=button].secondary.ghost:hover {
  background-color: transparent;
  color: #aeaeae;
}
button.secondary.ghost:active, .button.secondary.ghost:active, input[type=submit]:not(.link).secondary.ghost:active, input[type=reset].secondary.ghost:active, input[type=button].secondary.ghost:active {
  color: #959595;
}
button.secondary.ghost:focus, .button.secondary.ghost:focus, input[type=submit]:not(.link).secondary.ghost:focus, input[type=reset].secondary.ghost:focus, input[type=button].secondary.ghost:focus {
  outline: 2px solid #fff;
  color: #aeaeae;
}
button.secondary.ghost.disabled, button.secondary.ghost.disabled:hover, button.secondary.ghost:disabled, button.secondary.ghost:disabled:hover, .button.secondary.ghost.disabled, .button.secondary.ghost.disabled:hover, .button.secondary.ghost:disabled, .button.secondary.ghost:disabled:hover, input[type=submit]:not(.link).secondary.ghost.disabled, input[type=submit]:not(.link).secondary.ghost.disabled:hover, input[type=submit]:not(.link).secondary.ghost:disabled, input[type=submit]:not(.link).secondary.ghost:disabled:hover, input[type=reset].secondary.ghost.disabled, input[type=reset].secondary.ghost.disabled:hover, input[type=reset].secondary.ghost:disabled, input[type=reset].secondary.ghost:disabled:hover, input[type=button].secondary.ghost.disabled, input[type=button].secondary.ghost.disabled:hover, input[type=button].secondary.ghost:disabled, input[type=button].secondary.ghost:disabled:hover {
  background-color: transparent;
  border-color: rgba(136, 136, 136, 0.5);
  color: rgba(136, 136, 136, 0.5);
}
button.secondary.full-width, .button.secondary.full-width, input[type=submit]:not(.link).secondary.full-width, input[type=reset].secondary.full-width, input[type=button].secondary.full-width {
  width: 100%;
}
button.positive, .button.positive, input[type=submit]:not(.link).positive, input[type=reset].positive, input[type=button].positive {
  background-color: #63B246;
  border-color: #63B246;
  color: white;
  outline: 0;
}
button.positive span, .button.positive span, input[type=submit]:not(.link).positive span, input[type=reset].positive span, input[type=button].positive span {
  color: white;
}
button.positive:hover, .button.positive:hover, input[type=submit]:not(.link).positive:hover, input[type=reset].positive:hover, input[type=button].positive:hover {
  background-color: #4f8d38;
  border-color: #4f8d38;
  color: white;
}
button.positive:active, .button.positive:active, input[type=submit]:not(.link).positive:active, input[type=reset].positive:active, input[type=button].positive:active {
  background-color: #447b30;
  border-color: #447b30;
  transition-duration: 0s;
  color: white;
}
button.positive:focus, .button.positive:focus, input[type=submit]:not(.link).positive:focus, input[type=reset].positive:focus, input[type=button].positive:focus {
  background-color: #4f8d38;
  outline: 2px solid #63B246;
  outline-offset: 3px;
  color: white;
}
button.positive:disabled, button.positive.disabled, .button.positive:disabled, .button.positive.disabled, input[type=submit]:not(.link).positive:disabled, input[type=submit]:not(.link).positive.disabled, input[type=reset].positive:disabled, input[type=reset].positive.disabled, input[type=button].positive:disabled, input[type=button].positive.disabled {
  cursor: not-allowed;
  color: white;
}
button.positive:disabled, button.positive:disabled:hover, button.positive.disabled, button.positive.disabled:hover, .button.positive:disabled, .button.positive:disabled:hover, .button.positive.disabled, .button.positive.disabled:hover, input[type=submit]:not(.link).positive:disabled, input[type=submit]:not(.link).positive:disabled:hover, input[type=submit]:not(.link).positive.disabled, input[type=submit]:not(.link).positive.disabled:hover, input[type=reset].positive:disabled, input[type=reset].positive:disabled:hover, input[type=reset].positive.disabled, input[type=reset].positive.disabled:hover, input[type=button].positive:disabled, input[type=button].positive:disabled:hover, input[type=button].positive.disabled, input[type=button].positive.disabled:hover {
  background-color: rgba(99, 178, 70, 0.5);
  border-color: rgba(99, 178, 70, 0.5);
  color: rgba(255, 255, 255, 0.5);
}
button.positive.ghost, .button.positive.ghost, input[type=submit]:not(.link).positive.ghost, input[type=reset].positive.ghost, input[type=button].positive.ghost {
  background-color: transparent;
  border-color: #63B246;
  color: #63B246;
}
button.positive.ghost:hover, .button.positive.ghost:hover, input[type=submit]:not(.link).positive.ghost:hover, input[type=reset].positive.ghost:hover, input[type=button].positive.ghost:hover {
  background-color: transparent;
  color: #3a6929;
}
button.positive.ghost:active, .button.positive.ghost:active, input[type=submit]:not(.link).positive.ghost:active, input[type=reset].positive.ghost:active, input[type=button].positive.ghost:active {
  color: #26441b;
}
button.positive.ghost:focus, .button.positive.ghost:focus, input[type=submit]:not(.link).positive.ghost:focus, input[type=reset].positive.ghost:focus, input[type=button].positive.ghost:focus {
  outline: 2px solid #fff;
  color: #3a6929;
}
button.positive.ghost.disabled, button.positive.ghost.disabled:hover, button.positive.ghost:disabled, button.positive.ghost:disabled:hover, .button.positive.ghost.disabled, .button.positive.ghost.disabled:hover, .button.positive.ghost:disabled, .button.positive.ghost:disabled:hover, input[type=submit]:not(.link).positive.ghost.disabled, input[type=submit]:not(.link).positive.ghost.disabled:hover, input[type=submit]:not(.link).positive.ghost:disabled, input[type=submit]:not(.link).positive.ghost:disabled:hover, input[type=reset].positive.ghost.disabled, input[type=reset].positive.ghost.disabled:hover, input[type=reset].positive.ghost:disabled, input[type=reset].positive.ghost:disabled:hover, input[type=button].positive.ghost.disabled, input[type=button].positive.ghost.disabled:hover, input[type=button].positive.ghost:disabled, input[type=button].positive.ghost:disabled:hover {
  background-color: transparent;
  border-color: rgba(136, 136, 136, 0.5);
  color: rgba(136, 136, 136, 0.5);
}
button.positive.full-width, .button.positive.full-width, input[type=submit]:not(.link).positive.full-width, input[type=reset].positive.full-width, input[type=button].positive.full-width {
  width: 100%;
}
button.danger, .button.danger, input[type=submit]:not(.link).danger, input[type=reset].danger, input[type=button].danger {
  background-color: #a13639;
  border-color: #a13639;
  color: white;
  outline: 0;
}
button.danger span, .button.danger span, input[type=submit]:not(.link).danger span, input[type=reset].danger span, input[type=button].danger span {
  color: white;
}
button.danger:hover, .button.danger:hover, input[type=submit]:not(.link).danger:hover, input[type=reset].danger:hover, input[type=button].danger:hover {
  background-color: #7b292b;
  border-color: #7b292b;
  color: white;
}
button.danger:active, .button.danger:active, input[type=submit]:not(.link).danger:active, input[type=reset].danger:active, input[type=button].danger:active {
  background-color: #682325;
  border-color: #682325;
  transition-duration: 0s;
  color: white;
}
button.danger:focus, .button.danger:focus, input[type=submit]:not(.link).danger:focus, input[type=reset].danger:focus, input[type=button].danger:focus {
  background-color: #7b292b;
  outline: 2px solid #a13639;
  outline-offset: 3px;
  color: white;
}
button.danger:disabled, button.danger.disabled, .button.danger:disabled, .button.danger.disabled, input[type=submit]:not(.link).danger:disabled, input[type=submit]:not(.link).danger.disabled, input[type=reset].danger:disabled, input[type=reset].danger.disabled, input[type=button].danger:disabled, input[type=button].danger.disabled {
  cursor: not-allowed;
  color: white;
}
button.danger:disabled, button.danger:disabled:hover, button.danger.disabled, button.danger.disabled:hover, .button.danger:disabled, .button.danger:disabled:hover, .button.danger.disabled, .button.danger.disabled:hover, input[type=submit]:not(.link).danger:disabled, input[type=submit]:not(.link).danger:disabled:hover, input[type=submit]:not(.link).danger.disabled, input[type=submit]:not(.link).danger.disabled:hover, input[type=reset].danger:disabled, input[type=reset].danger:disabled:hover, input[type=reset].danger.disabled, input[type=reset].danger.disabled:hover, input[type=button].danger:disabled, input[type=button].danger:disabled:hover, input[type=button].danger.disabled, input[type=button].danger.disabled:hover {
  background-color: rgba(161, 54, 57, 0.5);
  border-color: rgba(161, 54, 57, 0.5);
  color: rgba(255, 255, 255, 0.5);
}
button.danger.ghost, .button.danger.ghost, input[type=submit]:not(.link).danger.ghost, input[type=reset].danger.ghost, input[type=button].danger.ghost {
  background-color: transparent;
  border-color: #a13639;
  color: #a13639;
}
button.danger.ghost:hover, .button.danger.ghost:hover, input[type=submit]:not(.link).danger.ghost:hover, input[type=reset].danger.ghost:hover, input[type=button].danger.ghost:hover {
  background-color: transparent;
  color: #551c1e;
}
button.danger.ghost:active, .button.danger.ghost:active, input[type=submit]:not(.link).danger.ghost:active, input[type=reset].danger.ghost:active, input[type=button].danger.ghost:active {
  color: #2e1010;
}
button.danger.ghost:focus, .button.danger.ghost:focus, input[type=submit]:not(.link).danger.ghost:focus, input[type=reset].danger.ghost:focus, input[type=button].danger.ghost:focus {
  outline: 2px solid #fff;
  color: #551c1e;
}
button.danger.ghost.disabled, button.danger.ghost.disabled:hover, button.danger.ghost:disabled, button.danger.ghost:disabled:hover, .button.danger.ghost.disabled, .button.danger.ghost.disabled:hover, .button.danger.ghost:disabled, .button.danger.ghost:disabled:hover, input[type=submit]:not(.link).danger.ghost.disabled, input[type=submit]:not(.link).danger.ghost.disabled:hover, input[type=submit]:not(.link).danger.ghost:disabled, input[type=submit]:not(.link).danger.ghost:disabled:hover, input[type=reset].danger.ghost.disabled, input[type=reset].danger.ghost.disabled:hover, input[type=reset].danger.ghost:disabled, input[type=reset].danger.ghost:disabled:hover, input[type=button].danger.ghost.disabled, input[type=button].danger.ghost.disabled:hover, input[type=button].danger.ghost:disabled, input[type=button].danger.ghost:disabled:hover {
  background-color: transparent;
  border-color: rgba(136, 136, 136, 0.5);
  color: rgba(136, 136, 136, 0.5);
}
button.danger.full-width, .button.danger.full-width, input[type=submit]:not(.link).danger.full-width, input[type=reset].danger.full-width, input[type=button].danger.full-width {
  width: 100%;
}
button.warning, .button.warning, input[type=submit]:not(.link).warning, input[type=reset].warning, input[type=button].warning {
  background-color: #fff;
  border-color: #fff;
  color: white;
  outline: 0;
}
button.warning span, .button.warning span, input[type=submit]:not(.link).warning span, input[type=reset].warning span, input[type=button].warning span {
  color: white;
}
button.warning:hover, .button.warning:hover, input[type=submit]:not(.link).warning:hover, input[type=reset].warning:hover, input[type=button].warning:hover {
  background-color: #e6e6e6;
  border-color: #e6e6e6;
  color: white;
}
button.warning:active, .button.warning:active, input[type=submit]:not(.link).warning:active, input[type=reset].warning:active, input[type=button].warning:active {
  background-color: #d9d9d9;
  border-color: #d9d9d9;
  transition-duration: 0s;
  color: white;
}
button.warning:focus, .button.warning:focus, input[type=submit]:not(.link).warning:focus, input[type=reset].warning:focus, input[type=button].warning:focus {
  background-color: #e6e6e6;
  outline: 2px solid #fff;
  outline-offset: 3px;
  color: white;
}
button.warning:disabled, button.warning.disabled, .button.warning:disabled, .button.warning.disabled, input[type=submit]:not(.link).warning:disabled, input[type=submit]:not(.link).warning.disabled, input[type=reset].warning:disabled, input[type=reset].warning.disabled, input[type=button].warning:disabled, input[type=button].warning.disabled {
  cursor: not-allowed;
  color: white;
}
button.warning:disabled, button.warning:disabled:hover, button.warning.disabled, button.warning.disabled:hover, .button.warning:disabled, .button.warning:disabled:hover, .button.warning.disabled, .button.warning.disabled:hover, input[type=submit]:not(.link).warning:disabled, input[type=submit]:not(.link).warning:disabled:hover, input[type=submit]:not(.link).warning.disabled, input[type=submit]:not(.link).warning.disabled:hover, input[type=reset].warning:disabled, input[type=reset].warning:disabled:hover, input[type=reset].warning.disabled, input[type=reset].warning.disabled:hover, input[type=button].warning:disabled, input[type=button].warning:disabled:hover, input[type=button].warning.disabled, input[type=button].warning.disabled:hover {
  background-color: rgba(255, 255, 255, 0.5);
  border-color: rgba(255, 255, 255, 0.5);
  color: rgba(255, 255, 255, 0.5);
}
button.warning.ghost, .button.warning.ghost, input[type=submit]:not(.link).warning.ghost, input[type=reset].warning.ghost, input[type=button].warning.ghost {
  background-color: transparent;
  border-color: #fff;
  color: #fff;
}
button.warning.ghost:hover, .button.warning.ghost:hover, input[type=submit]:not(.link).warning.ghost:hover, input[type=reset].warning.ghost:hover, input[type=button].warning.ghost:hover {
  background-color: transparent;
  color: #cccccc;
}
button.warning.ghost:active, .button.warning.ghost:active, input[type=submit]:not(.link).warning.ghost:active, input[type=reset].warning.ghost:active, input[type=button].warning.ghost:active {
  color: #b3b3b3;
}
button.warning.ghost:focus, .button.warning.ghost:focus, input[type=submit]:not(.link).warning.ghost:focus, input[type=reset].warning.ghost:focus, input[type=button].warning.ghost:focus {
  outline: 2px solid #fff;
  color: #cccccc;
}
button.warning.ghost.disabled, button.warning.ghost.disabled:hover, button.warning.ghost:disabled, button.warning.ghost:disabled:hover, .button.warning.ghost.disabled, .button.warning.ghost.disabled:hover, .button.warning.ghost:disabled, .button.warning.ghost:disabled:hover, input[type=submit]:not(.link).warning.ghost.disabled, input[type=submit]:not(.link).warning.ghost.disabled:hover, input[type=submit]:not(.link).warning.ghost:disabled, input[type=submit]:not(.link).warning.ghost:disabled:hover, input[type=reset].warning.ghost.disabled, input[type=reset].warning.ghost.disabled:hover, input[type=reset].warning.ghost:disabled, input[type=reset].warning.ghost:disabled:hover, input[type=button].warning.ghost.disabled, input[type=button].warning.ghost.disabled:hover, input[type=button].warning.ghost:disabled, input[type=button].warning.ghost:disabled:hover {
  background-color: transparent;
  border-color: rgba(136, 136, 136, 0.5);
  color: rgba(136, 136, 136, 0.5);
}
button.warning.full-width, .button.warning.full-width, input[type=submit]:not(.link).warning.full-width, input[type=reset].warning.full-width, input[type=button].warning.full-width {
  width: 100%;
}

button.link {
  transition-property: color;
  transition-duration: 0.2s;
  transition-timing-function: ease;
  background-color: transparent;
  color: #379ed4;
}
button.link:hover {
  background-color: transparent;
  color: #8bc7e6;
}
button.link:focus {
  background-color: transparent;
}

.button-row:before, .button-row:after {
  content: " ";
  display: table;
}
.button-row:after {
  clear: both;
}
.ie .button-row {
  *zoom: 1;
}
.button-row > * {
  float: left;
  margin-right: 16px;
}
.button-row.reverse > * {
  float: right;
  margin-left: 16px;
  margin-right: 0;
}
.button-row.centered {
  text-align: center;
}
.button-row [type=text] {
  width: 200px;
}
.flexbox .button-row {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: baseline;
      align-items: baseline;
}
.flexbox .button-row.reverse {
  -ms-flex-direction: row-reverse;
      flex-direction: row-reverse;
}
.flexbox .button-row.centered {
  -ms-flex-pack: center;
      justify-content: center;
}
.flexbox .button-row.centered > :last-child {
  margin-right: 0;
}

.c--btn-next, .c--btn-new-window, .c--btn-download {
  display: inline-block;
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1em;
  text-decoration: none;
  height: 40px;
  min-width: 125px;
  border-radius: 3px;
  border: 1px solid #444444;
  padding: 12px 20px;
  color: #444444;
  background-color: transparent;
  transition: color ease-in-out 125ms 0ms, background-color ease-in-out 125ms 0ms, border ease-in-out 200ms 0ms, box-shadow ease-in-out 200ms 0ms;
}
.c--btn-next:focus, .c--btn-new-window:focus, .c--btn-download:focus {
  box-shadow: 0 0 0 1px #fff, 0 0 0 3px currentColor;
  outline: none;
  border: inherit;
  background-color: transparent;
}
.c--btn-next:active, .c--btn-new-window:active, .c--btn-download:active {
  box-shadow: inset 0 0 10px -1px #111111;
  background-color: #444444;
  color: #fff;
}
.c--btn-next:hover, .c--btn-new-window:hover, .c--btn-download:hover {
  background-color: #444444;
  border-color: #444444;
  color: #fff;
}

.c--btn-next:after {
  content: "\e00d";
  display: inline-block;
  font-size: 2em;
  vertical-align: middle;
  margin-right: -0.25em;
  line-height: 0;
  top: -0.075em;
  position: relative;
}
.c--btn-new-window:after {
  content: "\e01f";
  display: inline-block;
  font-size: 2em;
  vertical-align: middle;
  margin-right: 0;
  line-height: 0;
  top: -0.05em;
  right: -0.5em;
  position: relative;
  font-size: 1em;
}
.c--btn-download {
  display: inline-block;
  height: auto;
  border: none;
  padding: 12px 20px 12px 0;
  color: #379ed4;
  font-size: 0.8125rem;
  transition: color 0.2s ease;
}
.c--btn-download svg {
  display: inline-block;
  width: 1.72em;
  float: left;
  height: auto;
  fill: #379ed4;
  margin-right: 0.86em;
}
.c--btn-download i {
  display: table-caption;
  clear: both;
  color: #888888;
  font-style: normal;
  margin-top: 0.25em;
  font-size: 0.6875rem;
  min-width: 75px;
}
.c--btn-download:hover {
  color: #22729d;
  background-color: transparent;
  text-decoration: underline;
}
.c--btn-download:hover svg {
  fill: #22729d;
}
.c--btn-download:hover i {
  text-decoration: none;
}
.c--btn-download:focus, .c--btn-download:active {
  box-shadow: 0 0 0 1px #fff, 0 0 0 3px currentColor;
  outline: none;
  border: inherit;
  background-color: transparent;
}

/**
 * Micro clearfix hack http://nicolasgallagher.com/micro-clearfix-hack/
 * This clearfix hack can be used on the container element that has floated
 * elements without adding new markup
 */
/** Vertically center an element in another with this mixin **/
/**
 * Source: https://css-tricks.com/snippets/css/retina-display-media-query/
 */
.c--btn-next:after, .c--btn-new-window:after {
  font-family: "Duo Admin Icons" !important;
  font-style: normal !important;
  font-weight: 400 !important;
  font-variant: normal !important;
  text-transform: none !important;
  speak: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.c--btn-next:hover:after, .c--btn-new-window:hover:after {
  box-shadow: none;
}

.header, .subhead {
  margin-bottom: 2rem;
  margin-top: 1rem;
}
.header:before, .header:after, .subhead:before, .subhead:after {
  content: " ";
  display: table;
}
.header:after, .subhead:after {
  clear: both;
}
.ie .header, .ie .subhead {
  *zoom: 1;
}
.header > *, .subhead > * {
  margin-bottom: 0;
}
.header h1, .header h2, .header h3, .header h4, .header h5, .header h6, .header p, .header li, .subhead h1, .subhead h2, .subhead h3, .subhead h4, .subhead h5, .subhead h6, .subhead p, .subhead li {
  margin-bottom: 0;
}
.header > :first-child, .subhead > :first-child {
  float: left;
}
.header > :last-child, .subhead > :last-child {
  float: right;
}
.header form, .subhead form {
  display: inline-block;
}
.flexbox .header, .flexbox .subhead {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
      align-items: center;
}
.flexbox .header > :first-child, .flexbox .subhead > :first-child {
  -ms-flex: 1;
      flex: 1;
}

.subhead {
  margin-bottom: 1rem;
}

/**
 * Micro clearfix hack http://nicolasgallagher.com/micro-clearfix-hack/
 * This clearfix hack can be used on the container element that has floated
 * elements without adding new markup
 */
/** Vertically center an element in another with this mixin **/
/**
 * Source: https://css-tricks.com/snippets/css/retina-display-media-query/
 */
.c--btn-next:after, .c--btn-new-window:after {
  font-family: "Duo Admin Icons" !important;
  font-style: normal !important;
  font-weight: 400 !important;
  font-variant: normal !important;
  text-transform: none !important;
  speak: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.c--btn-next:hover:after, .c--btn-new-window:hover:after {
  box-shadow: none;
}

.grid:before, .grid:after {
  content: " ";
  display: table;
}
.grid:after {
  clear: both;
}
.ie .grid {
  *zoom: 1;
}

.col-1-1 {
  float: left;
  margin-right: 1rem;
  width: calc((100% * 1) - (1rem * (1 - 1)));
}
.col-1-1:nth-of-type(1n), .col-1-1:last-of-type {
  margin-right: 0;
}

.col-1-2 {
  float: left;
  margin-right: 1rem;
  width: calc((100% * 0.5) - (1rem * (1 - 0.5)));
}
.col-1-2:nth-of-type(2n), .col-1-2:last-of-type {
  margin-right: 0;
}

.col-2-2 {
  float: left;
  margin-right: 1rem;
  width: calc((100% * 1) - (1rem * (1 - 1)));
}
.col-2-2:nth-of-type(2n), .col-2-2:last-of-type {
  margin-right: 0;
}

.col-1-3 {
  float: left;
  margin-right: 1rem;
  width: calc((100% * 0.3333333333) - (1rem * (1 - 0.3333333333)));
}
.col-1-3:nth-of-type(3n), .col-1-3:last-of-type {
  margin-right: 0;
}

.col-2-3 {
  float: left;
  margin-right: 1rem;
  width: calc((100% * 0.6666666667) - (1rem * (1 - 0.6666666667)));
}
.col-2-3:nth-of-type(3n), .col-2-3:last-of-type {
  margin-right: 0;
}

.col-3-3 {
  float: left;
  margin-right: 1rem;
  width: calc((100% * 1) - (1rem * (1 - 1)));
}
.col-3-3:nth-of-type(3n), .col-3-3:last-of-type {
  margin-right: 0;
}

.col-1-4 {
  float: left;
  margin-right: 1rem;
  width: calc((100% * 0.25) - (1rem * (1 - 0.25)));
}
.col-1-4:nth-of-type(4n), .col-1-4:last-of-type {
  margin-right: 0;
}

.col-2-4 {
  float: left;
  margin-right: 1rem;
  width: calc((100% * 0.5) - (1rem * (1 - 0.5)));
}
.col-2-4:nth-of-type(4n), .col-2-4:last-of-type {
  margin-right: 0;
}

.col-3-4 {
  float: left;
  margin-right: 1rem;
  width: calc((100% * 0.75) - (1rem * (1 - 0.75)));
}
.col-3-4:nth-of-type(4n), .col-3-4:last-of-type {
  margin-right: 0;
}

.col-4-4 {
  float: left;
  margin-right: 1rem;
  width: calc((100% * 1) - (1rem * (1 - 1)));
}
.col-4-4:nth-of-type(4n), .col-4-4:last-of-type {
  margin-right: 0;
}

.col-1-5 {
  float: left;
  margin-right: 1rem;
  width: calc((100% * 0.2) - (1rem * (1 - 0.2)));
}
.col-1-5:nth-of-type(5n), .col-1-5:last-of-type {
  margin-right: 0;
}

.col-2-5 {
  float: left;
  margin-right: 1rem;
  width: calc((100% * 0.4) - (1rem * (1 - 0.4)));
}
.col-2-5:nth-of-type(5n), .col-2-5:last-of-type {
  margin-right: 0;
}

.col-3-5 {
  float: left;
  margin-right: 1rem;
  width: calc((100% * 0.6) - (1rem * (1 - 0.6)));
}
.col-3-5:nth-of-type(5n), .col-3-5:last-of-type {
  margin-right: 0;
}

.col-4-5 {
  float: left;
  margin-right: 1rem;
  width: calc((100% * 0.8) - (1rem * (1 - 0.8)));
}
.col-4-5:nth-of-type(5n), .col-4-5:last-of-type {
  margin-right: 0;
}

.col-5-5 {
  float: left;
  margin-right: 1rem;
  width: calc((100% * 1) - (1rem * (1 - 1)));
}
.col-5-5:nth-of-type(5n), .col-5-5:last-of-type {
  margin-right: 0;
}

.col-1-6 {
  float: left;
  margin-right: 1rem;
  width: calc((100% * 0.1666666667) - (1rem * (1 - 0.1666666667)));
}
.col-1-6:nth-of-type(6n), .col-1-6:last-of-type {
  margin-right: 0;
}

.col-2-6 {
  float: left;
  margin-right: 1rem;
  width: calc((100% * 0.3333333333) - (1rem * (1 - 0.3333333333)));
}
.col-2-6:nth-of-type(6n), .col-2-6:last-of-type {
  margin-right: 0;
}

.col-3-6 {
  float: left;
  margin-right: 1rem;
  width: calc((100% * 0.5) - (1rem * (1 - 0.5)));
}
.col-3-6:nth-of-type(6n), .col-3-6:last-of-type {
  margin-right: 0;
}

.col-4-6 {
  float: left;
  margin-right: 1rem;
  width: calc((100% * 0.6666666667) - (1rem * (1 - 0.6666666667)));
}
.col-4-6:nth-of-type(6n), .col-4-6:last-of-type {
  margin-right: 0;
}

.col-5-6 {
  float: left;
  margin-right: 1rem;
  width: calc((100% * 0.8333333333) - (1rem * (1 - 0.8333333333)));
}
.col-5-6:nth-of-type(6n), .col-5-6:last-of-type {
  margin-right: 0;
}

.col-6-6 {
  float: left;
  margin-right: 1rem;
  width: calc((100% * 1) - (1rem * (1 - 1)));
}
.col-6-6:nth-of-type(6n), .col-6-6:last-of-type {
  margin-right: 0;
}

.col-1-7 {
  float: left;
  margin-right: 1rem;
  width: calc((100% * 0.1428571429) - (1rem * (1 - 0.1428571429)));
}
.col-1-7:nth-of-type(7n), .col-1-7:last-of-type {
  margin-right: 0;
}

.col-2-7 {
  float: left;
  margin-right: 1rem;
  width: calc((100% * 0.2857142857) - (1rem * (1 - 0.2857142857)));
}
.col-2-7:nth-of-type(7n), .col-2-7:last-of-type {
  margin-right: 0;
}

.col-3-7 {
  float: left;
  margin-right: 1rem;
  width: calc((100% * 0.4285714286) - (1rem * (1 - 0.4285714286)));
}
.col-3-7:nth-of-type(7n), .col-3-7:last-of-type {
  margin-right: 0;
}

.col-4-7 {
  float: left;
  margin-right: 1rem;
  width: calc((100% * 0.5714285714) - (1rem * (1 - 0.5714285714)));
}
.col-4-7:nth-of-type(7n), .col-4-7:last-of-type {
  margin-right: 0;
}

.col-5-7 {
  float: left;
  margin-right: 1rem;
  width: calc((100% * 0.7142857143) - (1rem * (1 - 0.7142857143)));
}
.col-5-7:nth-of-type(7n), .col-5-7:last-of-type {
  margin-right: 0;
}

.col-6-7 {
  float: left;
  margin-right: 1rem;
  width: calc((100% * 0.8571428571) - (1rem * (1 - 0.8571428571)));
}
.col-6-7:nth-of-type(7n), .col-6-7:last-of-type {
  margin-right: 0;
}

.col-7-7 {
  float: left;
  margin-right: 1rem;
  width: calc((100% * 1) - (1rem * (1 - 1)));
}
.col-7-7:nth-of-type(7n), .col-7-7:last-of-type {
  margin-right: 0;
}

.col-1-8 {
  float: left;
  margin-right: 1rem;
  width: calc((100% * 0.125) - (1rem * (1 - 0.125)));
}
.col-1-8:nth-of-type(8n), .col-1-8:last-of-type {
  margin-right: 0;
}

.col-2-8 {
  float: left;
  margin-right: 1rem;
  width: calc((100% * 0.25) - (1rem * (1 - 0.25)));
}
.col-2-8:nth-of-type(8n), .col-2-8:last-of-type {
  margin-right: 0;
}

.col-3-8 {
  float: left;
  margin-right: 1rem;
  width: calc((100% * 0.375) - (1rem * (1 - 0.375)));
}
.col-3-8:nth-of-type(8n), .col-3-8:last-of-type {
  margin-right: 0;
}

.col-4-8 {
  float: left;
  margin-right: 1rem;
  width: calc((100% * 0.5) - (1rem * (1 - 0.5)));
}
.col-4-8:nth-of-type(8n), .col-4-8:last-of-type {
  margin-right: 0;
}

.col-5-8 {
  float: left;
  margin-right: 1rem;
  width: calc((100% * 0.625) - (1rem * (1 - 0.625)));
}
.col-5-8:nth-of-type(8n), .col-5-8:last-of-type {
  margin-right: 0;
}

.col-6-8 {
  float: left;
  margin-right: 1rem;
  width: calc((100% * 0.75) - (1rem * (1 - 0.75)));
}
.col-6-8:nth-of-type(8n), .col-6-8:last-of-type {
  margin-right: 0;
}

.col-7-8 {
  float: left;
  margin-right: 1rem;
  width: calc((100% * 0.875) - (1rem * (1 - 0.875)));
}
.col-7-8:nth-of-type(8n), .col-7-8:last-of-type {
  margin-right: 0;
}

.col-8-8 {
  float: left;
  margin-right: 1rem;
  width: calc((100% * 1) - (1rem * (1 - 1)));
}
.col-8-8:nth-of-type(8n), .col-8-8:last-of-type {
  margin-right: 0;
}

.carousel-view .navigation {
  height: 25px;
  padding: 10px 0;
  font-size: 12px;
  position: relative;
  width: 100%;
}
.carousel-view .navigation .nav-button {
  color: #666;
  cursor: pointer;
}
.carousel-view .navigation .nav-button .navigation-label {
  text-decoration: underline;
}
.carousel-view .navigation .nav-button > i[class^=icon-]:before {
  display: inline-block;
  text-decoration: none;
}
.carousel-view .navigation .nav-button > i {
  vertical-align: middle;
}
.carousel-view .navigation .nav-button.back {
  position: absolute;
  left: 0;
}
.carousel-view .navigation .nav-button.next {
  position: absolute;
  right: 0;
  text-align: right;
}
.carousel-view .navigation .nav-button.hidden {
  visibility: hidden;
}
.carousel-view .navigation .card-dots {
  text-align: center;
}
.carousel-view .navigation .card-dots .dot {
  /* Increase the click-target size */
  padding: 3px;
  cursor: pointer;
  margin: 1px;
  display: inline-block;
  vertical-align: middle;
}
.carousel-view .navigation .card-dots .dot > div {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background-color: #e1e1e1;
}
.carousel-view .navigation .card-dots .dot.active > div {
  background-color: #666;
}

#phone-number-form .phone-number {
  font-size: 20px;
}
#phone-number-form .phone-number:before, #phone-number-form .phone-number:after {
  content: " ";
  display: table;
}
#phone-number-form .phone-number:after {
  clear: both;
}
.ie #phone-number-form .phone-number {
  *zoom: 1;
}
#phone-number-form .phone-number > div {
  float: left;
}
#phone-number-form .code-wrapper {
  padding-top: 5px;
}
#phone-number-form .tel-wrapper {
  width: 55%;
  margin-left: 10px;
}
@media (max-width: 360px) {
  #phone-number-form .tel-wrapper {
    width: 70%;
    margin-left: 5px;
  }
}
#phone-number-form input[type=tel] {
  width: 75%;
  min-width: 100px;
}
#phone-number-form .example {
  font-size: 12px;
}
#phone-number-form input[type=checkbox] {
  vertical-align: middle;
}
@media (max-width: 360px) {
  #phone-number-form input[type=checkbox] {
    float: left;
    margin: 4px;
  }
}
@media (max-width: 360px) {
  #phone-number-form .confirmation-text {
    margin-left: 25px;
    display: block;
  }
}
#phone-number-form .invalid-country-message {
  margin-top: 8px;
}

/* Valid number, show a green check mark using ss-standard font */
.validation.valid:before {
  content: "✓";
  color: green;
}

/* Invalid number, show a red x using ss-standard font */
.validation.invalid:before {
  content: "␡";
  color: red;
}

.correct-phone-number {
  margin: 0;
}

.device-to-add {
  float: right;
}

#install-mobile-app .phone-instructions-wrapper:before, #install-mobile-app .phone-instructions-wrapper:after, #qr-mobile-app-activation .phone-instructions-wrapper:before, #qr-mobile-app-activation .phone-instructions-wrapper:after {
  content: " ";
  display: table;
}
#install-mobile-app .phone-instructions-wrapper:after, #qr-mobile-app-activation .phone-instructions-wrapper:after {
  clear: both;
}
.ie #install-mobile-app .phone-instructions-wrapper, .ie #qr-mobile-app-activation .phone-instructions-wrapper {
  *zoom: 1;
}
#install-mobile-app .phone-image-wrapper, #qr-mobile-app-activation .phone-image-wrapper {
  width: 40%;
  float: left;
  margin: -10px 0 -22px -8px;
}
@media (max-width: 360px) {
  #install-mobile-app .phone-image-wrapper, #qr-mobile-app-activation .phone-image-wrapper {
    margin: -0.5rem 0;
    text-align: center;
    width: 100%;
  }
}
#install-mobile-app .phone-image-wrapper img, #qr-mobile-app-activation .phone-image-wrapper img {
  width: 100%;
}
@media (max-width: 360px) {
  #install-mobile-app .phone-image-wrapper img, #qr-mobile-app-activation .phone-image-wrapper img {
    width: 70%;
  }
}
#install-mobile-app .phone-image-wrapper .qr-container, #qr-mobile-app-activation .phone-image-wrapper .qr-container {
  position: relative;
}
#install-mobile-app .instructions-wrapper, #qr-mobile-app-activation .instructions-wrapper {
  width: 55%;
  float: left;
}
#install-mobile-app .instructions-wrapper > p, #qr-mobile-app-activation .instructions-wrapper > p {
  padding-left: 10px;
}
#install-mobile-app .instructions-wrapper ol, #qr-mobile-app-activation .instructions-wrapper ol {
  padding-left: 28px;
  margin: 0;
}
#install-mobile-app .instructions-wrapper li, #qr-mobile-app-activation .instructions-wrapper li {
  margin: 0;
}
@media (max-width: 360px) {
  #install-mobile-app .instructions-wrapper, #qr-mobile-app-activation .instructions-wrapper {
    width: 100%;
  }
}
#install-mobile-app .appstore-link, #qr-mobile-app-activation .appstore-link {
  width: 135px;
  display: inline-block;
  overflow: hidden;
  background-size: contain;
  background-repeat: no-repeat;
  margin-top: 1em;
}
#install-mobile-app .appstore-link.ios, #qr-mobile-app-activation .appstore-link.ios {
  height: 40px;
}
html[lang=en] #install-mobile-app .appstore-link.ios, html[lang=en] #qr-mobile-app-activation .appstore-link.ios {
  background-image: url(/frame/static/img/appstore-ios-en.svg);
}
html[lang=fr] #install-mobile-app .appstore-link.ios, html[lang=fr] #qr-mobile-app-activation .appstore-link.ios {
  background-image: url(/frame/static/img/appstore-ios-fr.svg);
}
html[lang=de] #install-mobile-app .appstore-link.ios, html[lang=de] #qr-mobile-app-activation .appstore-link.ios {
  background-image: url(/frame/static/img/appstore-ios-de.svg);
}
#install-mobile-app .appstore-link.android, #qr-mobile-app-activation .appstore-link.android {
  height: 42px;
}
html[lang=en] #install-mobile-app .appstore-link.android, html[lang=en] #qr-mobile-app-activation .appstore-link.android {
  background-image: url(/frame/static/img/appstore-android-en.png);
}
html[lang=fr] #install-mobile-app .appstore-link.android, html[lang=fr] #qr-mobile-app-activation .appstore-link.android {
  background-image: url(/frame/static/img/appstore-android-fr.png);
}
html[lang=de] #install-mobile-app .appstore-link.android, html[lang=de] #qr-mobile-app-activation .appstore-link.android {
  background-image: url(/frame/static/img/appstore-android-de.png);
}
#install-mobile-app .appstore-link.windows, #qr-mobile-app-activation .appstore-link.windows {
  height: 49px;
}
html[lang=en] #install-mobile-app .appstore-link.windows, html[lang=en] #qr-mobile-app-activation .appstore-link.windows {
  background-image: url(/frame/static/img/appstore-ms-en.png);
}
html[lang=fr] #install-mobile-app .appstore-link.windows, html[lang=fr] #qr-mobile-app-activation .appstore-link.windows {
  background-image: url(/frame/static/img/appstore-ms-fr.png);
}
html[lang=de] #install-mobile-app .appstore-link.windows, html[lang=de] #qr-mobile-app-activation .appstore-link.windows {
  background-image: url(/frame/static/img/appstore-ms-de.png);
}
#install-mobile-app .or-email-activation, #qr-mobile-app-activation .or-email-activation {
  margin-top: 10px;
}
#install-mobile-app .ss-check, #qr-mobile-app-activation .ss-check {
  color: #63B246;
  display: none;
  font-size: 80px;
  margin: -10px 0 0 -40px;
  position: absolute;
  left: 50%;
  top: 50%;
}

#install-mobile-app .phone-image-wrapper {
  margin: 5px;
}
#install-mobile-app .btn-installed-short {
  /*
   * $breakpoint -   The size at which content should be hidden
   * $before -       Whether the content should be hidden before the
                     breakpoint or after
   * $displayType -  block or inline-block when the content is displayed
   */
  display: none;
  /* media queries don't work in IE7 and IE8 so we
     default to the mobile view to support smaller frames */
}
@media (max-width: 529px) {
  #install-mobile-app .btn-installed-short {
    display: inline-block;
  }
}
.ie7 #install-mobile-app .btn-installed-short, .ie8 #install-mobile-app .btn-installed-short {
  display: inline-block;
}
#install-mobile-app .btn-installed-short.hidden {
  display: none;
}
#install-mobile-app .btn-installed-long {
  /*
   * $breakpoint -   The size at which content should be hidden
   * $before -       Whether the content should be hidden before the
                     breakpoint or after
   * $displayType -  block or inline-block when the content is displayed
   */
  display: none;
  /* media queries don't work in IE7 and IE8 so we
     default to the mobile view to support smaller frames */
}
@media (min-width: 530px) {
  #install-mobile-app .btn-installed-long {
    display: inline-block;
  }
}
.ie7 #install-mobile-app .btn-installed-long, .ie8 #install-mobile-app .btn-installed-long {
  display: inline-block;
}
.ie7 #install-mobile-app .btn-installed-long, .ie8 #install-mobile-app .btn-installed-long {
  display: none;
}
#install-mobile-app .btn-installed-long.hidden {
  display: none;
}

#manual-mobile-app-activation ol {
  padding-left: 20px;
  margin: 0;
}
#manual-mobile-app-activation .email-form {
  margin-bottom: 15px;
}
#manual-mobile-app-activation input[type=email] {
  width: 16em;
}

#u2f-activate .u2f-enroll-header:before, #u2f-activate .u2f-enroll-header:after {
  content: " ";
  display: table;
}
#u2f-activate .u2f-enroll-header:after {
  clear: both;
}
.ie #u2f-activate .u2f-enroll-header {
  *zoom: 1;
}
#u2f-activate .u2f-enroll-header > * {
  float: left;
}
#u2f-activate .u2f-enroll-header h1 {
  line-height: 40px;
  margin-left: 10px;
}
#u2f-activate .right-column-item {
  margin-top: 0;
  margin-bottom: 10px;
}

#verify-phone input[name=code] {
  width: 10em;
}
#verify-phone .verify-btn-wrapper {
  margin-bottom: 10px;
}
#verify-phone .verify-btn-wrapper > * {
  margin-right: 5px;
}

#install-desktop-app ol, #activate-desktop-app ol {
  padding-left: 20px;
}
#install-desktop-app li, #activate-desktop-app li {
  margin: 0.3rem;
}
#install-desktop-app .actcode, #activate-desktop-app .actcode {
  width: 100%;
  max-width: 320px;
  font-family: Monaco, "Courier New", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", monospace;
  font-size: 0.9em;
  padding: 4px 4px 2px 4px;
  background-color: #f7f7f7;
  color: #999;
  border: 1px dotted #ccc;
  outline: none;
}

#u2f-activate {
  padding: 20px;
}

.enrollment-wrapper {
  overflow: hidden;
}
.enrollment-wrapper .success-dismiss {
  visibility: hidden;
}

#enrollment-successful {
  height: 100%;
  background-image: url("/frame/static/img/yellow-confetti.png"), url("/frame/static/img/blue-confetti.png"), url("/frame/static/img/red-confetti.png");
  background-color: #63B246;
  animation: snow 20s linear infinite;
}
@keyframes snow {
  0% {
    background-position: 0px 0px;
  }
  100% {
    background-position: 500px 1000px, 400px 400px, 300px 300px;
  }
}
#enrollment-successful i {
  font-size: 24px;
}
#enrollment-successful h1, #enrollment-successful h2, #enrollment-successful p, #enrollment-successful span {
  color: #fff;
}
#enrollment-successful .enrollment-message {
  width: 350px;
  position: absolute;
  text-align: center;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
      transform: translate(-50%, -50%);
}
@media (max-width: 480px) {
  #enrollment-successful .enrollment-message {
    width: 100%;
  }
}
.enrollment-successful-overlay #enrollment-successful {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1;
}

.base-header.update {
  background-color: #63B246;
  color: #fff;
  height: auto;
  padding: 16px;
  text-align: center;
  width: 100%;
  position: relative;
}
.base-header.update.warning {
  background-color: #df6a27;
}
.base-header.update.failure {
  background-color: #a13639;
}
.base-header.update + .base-main {
  display: inline-block;
  left: 0;
  position: relative;
  top: 0;
  vertical-align: top;
  width: 70%;
  max-height: 75%;
}
@media (max-width: 480px) {
  .base-header.update + .base-main {
    width: 100%;
  }
}
@media (max-width: 480px) {
  .base-header.update + .base-main .row-label {
    background-color: #fff;
    padding: 4px;
  }
}
.base-header.update + .base-main .row-label .update-text {
  color: #333;
  display: inline-block;
  margin: 0;
  max-width: 210px;
}
.base-header.update h1 {
  color: #fff;
  display: inline-block;
  margin: 0 0 0 8px;
  font-size: 15px;
}
.base-header.update i {
  font-size: 24px;
  vertical-align: middle;
}
@media (max-width: 600px) {
  .base-header.update i {
    display: none;
  }
}

.base-header.failure + .base-main {
  max-height: 78%;
}
.base-header.failure + .base-main #update-content {
  padding-bottom: 0;
}

.base-sidebar {
  display: inline-block;
  padding: 16px 0;
  width: calc(30% - 8px);
}
@media (max-width: 480px) {
  .base-sidebar {
    display: none;
  }
}

.update-footer {
  bottom: 0;
  padding-bottom: 0.5rem;
  position: absolute;
  text-align: center;
  width: 100%;
  background-color: #fff;
  box-shadow: 0px 0px 18px -1px rgba(136, 136, 136, 0.5);
}
.update-footer .btn-wrapper {
  margin-top: 0.5rem;
}

#update-content {
  padding-bottom: 2rem;
}

.update-help {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
.update-help li {
  margin-bottom: 0.5rem;
}
.update-help li > * {
  display: inline-block;
  vertical-align: top;
}
.update-help .no-margin {
  margin: 0;
}
.update-help p {
  color: #6a8390;
  line-height: 17px;
  width: 70%;
}
.update-help .update-icon {
  margin-right: 0.5rem;
  width: 24px;
  height: auto;
}
.update-help .branding-link {
  font-size: 10px;
  color: #6a8390;
  text-decoration: none;
}
.update-help .branding-link:hover {
  color: #379ed4;
  text-decoration: none;
}

.update-message {
  color: #6a8390;
  float: left;
  font-size: 12px;
  line-height: 17px;
  margin-top: 0.5rem;
  padding: 0 6px 6px;
}
.update-message .update-icon {
  height: 15px;
  vertical-align: middle;
  margin: 0 0.15rem;
}

.update-software + .update-software {
  margin-top: 0.25rem;
}

button.ghost, .button.ghost {
  border-color: #5a707b;
  color: #5a707b;
}

.ie7 .device-selector {
  margin-top: 10px;
}
.ie7 .device-selector h1,
.ie7 .device-selector .device-select-wrapper {
  width: 100%;
}
.ie7 .btn-wrapper {
  display: block;
  width: 100%;
  min-height: 40px;
}
.ie7 #phone-number-view .number-double-check {
  min-height: 20px;
  width: 100%;
}
.ie7 #phone-number-view .code-wrapper {
  padding-top: 6px;
}
.ie7 #phone-number-view .double-check-number {
  margin-right: 4px;
}
.ie7 #phone-number-view .phone-extension {
  min-height: 50px;
  width: 100%;
}
.ie7 #phone-number-view .phone-extension input {
  display: inline;
  width: 90%;
}
.ie7 #install-mobile-app .phone-image-wrapper img, .ie7 #qr-mobile-app-activation .phone-image-wrapper img {
  max-height: 136px;
}
.ie7 #login-form .row-label, .ie7 #pre-flow-prompt-view .row-label, .ie7 #update-content .row-label {
  height: 40px;
}
.ie7 #login-form .row-label a.button, .ie7 #login-form .row-label button, .ie7 #pre-flow-prompt-view .row-label a.button, .ie7 #pre-flow-prompt-view .row-label button, .ie7 #update-content .row-label a.button, .ie7 #update-content .row-label button {
  float: none;
  position: absolute;
  right: 20px;
}
.ie7 #login-form .row-label input[name=passcode], .ie7 #pre-flow-prompt-view .row-label input[name=passcode], .ie7 #update-content .row-label input[name=passcode] {
  float: none;
  display: block;
}
.ie7 #login-form .row-label input[name=passcode].hidden, .ie7 #pre-flow-prompt-view .row-label input[name=passcode].hidden, .ie7 #update-content .row-label input[name=passcode].hidden {
  display: none;
}
.ie7 #messages-view {
  height: 46px;
  width: 100%;
}
.ie7 #messages-view a[class^=btn], .ie7 #messages-view button {
  margin-right: 20px;
  color: #fff;
}
.ie7 .update.base-header {
  height: 16px;
}
.ie7 .update.base-header h1 {
  margin-top: -4px;
}
.ie7 .auto-settings, .ie7 .auto-settings .white-wrapper {
  overflow: auto;
  zoom: 1;
}
.ie7 .auto-settings .default-device, .ie7 .auto-settings .select-auto-auth {
  width: 48%;
}
.ie7 .auto-settings .default-device {
  margin-right: 3%;
}
.ie7 .auto-settings .select-factor label {
  margin-left: 10px;
}
.ie7 .device-bar {
  overflow: auto;
  zoom: 1;
}
.ie7 .device-bar .medium-or-smaller {
  display: none;
  visibility: hidden;
}
.ie7 .device-bar .device-info > *, .ie7 .device-bar .expand-options.medium-or-larger, .ie7 .device-bar .remove-device.medium-or-smaller, .ie7 .device-bar .device-options, .ie7 .device-bar button {
  float: none;
  zoom: 1;
  display: inline;
  visibility: visible;
}
.ie7 .device-bar .device-info > *.hidden, .ie7 .device-bar .device-info > *.non-ie-legacy, .ie7 .device-bar .expand-options.medium-or-larger.hidden, .ie7 .device-bar .expand-options.medium-or-larger.non-ie-legacy, .ie7 .device-bar .remove-device.medium-or-smaller.hidden, .ie7 .device-bar .remove-device.medium-or-smaller.non-ie-legacy, .ie7 .device-bar .device-options.hidden, .ie7 .device-bar .device-options.non-ie-legacy, .ie7 .device-bar button.hidden, .ie7 .device-bar button.non-ie-legacy {
  display: none;
  visibility: hidden;
}
.ie7 .device-bar .edit-name-container {
  margin-right: 5px;
}
.ie7 .device-bar .edit-name-container, .ie7 .device-bar .edit-name-container input {
  min-height: 30px;
}
.ie7 .modal .medium-or-larger {
  display: block;
}

.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 100;
}

.modal-container {
  width: 90%;
  max-width: 320px;
  margin-left: auto;
  margin-right: auto;
  font-size: 14px;
  margin-top: 50px;
  background-color: #f7f7f7;
  border-radius: 6px;
  text-align: center;
}
.modal-container .bold-help-message {
  padding-top: 5px;
  font-weight: 700;
  font-size: 12px;
}
.modal-container .bold-help-message-larger-font {
  font-size: 14px;
}
.modal-container .body-message {
  margin-left: -17px;
  text-align: left;
  margin-top: -10px;
  font-size: 13px;
}
.modal-container ul.body-message {
  margin-bottom: 0;
}
.modal-container ul.body-message li {
  margin-bottom: 0;
}

.modal-overlay-header {
  padding: 10px;
}
.modal-overlay-header .main-graphic {
  margin-top: 10px;
  display: inline-block;
  width: 100%;
}
.modal-overlay-header .main-graphic img {
  width: 75px;
  height: 75px;
}
.modal-overlay-header .small-graphic {
  display: inline-block;
  width: 100%;
}
.modal-overlay-header .small-graphic img {
  width: 48px;
  height: 48px;
}
.modal-overlay-header .smaller-graphic {
  display: inline-block;
  width: 100%;
}
.modal-overlay-header .smaller-graphic img {
  width: 36px;
  height: 36px;
}

.modal-overlay-body {
  padding: 10px 20px;
}

.modal-overlay-footer {
  padding: 0.5rem;
}
.modal-overlay-footer i {
  font-size: 10px;
  vertical-align: middle;
  margin-left: 5px;
}
.modal-overlay-footer i:before {
  display: inline-block;
  text-decoration: none;
}
.modal-overlay-footer .contact-help {
  padding: 10;
  font-size: 12px;
}
.modal-overlay-footer .couldnt-verify-help-link {
  padding: 10px 20px;
  margin: 0px -15px;
  font-size: 14px;
  border-top: 1px solid;
  border-color: #E5E5E5;
  background-color: #fff;
  font-weight: 500;
  text-decoration: underline;
}
.modal-overlay-footer .couldnt-verify-help-link:first-of-type {
  margin-top: -15px;
}
.modal-overlay-footer .couldnt-verify-help-link:last-of-type {
  margin-bottom: -15px;
  border-radius: 0 0 6px 6px;
}

/**
 * Micro clearfix hack http://nicolasgallagher.com/micro-clearfix-hack/
 * This clearfix hack can be used on the container element that has floated
 * elements without adding new markup
 */
/** Vertically center an element in another with this mixin **/
/**
 * Source: https://css-tricks.com/snippets/css/retina-display-media-query/
 */
.c--btn-next:after, .c--btn-new-window:after {
  font-family: "Duo Admin Icons" !important;
  font-style: normal !important;
  font-weight: 400 !important;
  font-variant: normal !important;
  text-transform: none !important;
  speak: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.c--btn-next:hover:after, .c--btn-new-window:hover:after {
  box-shadow: none;
}

.base-wrapper.warning .base-navigation {
  display: none;
}
.base-wrapper.warning .base-main {
  position: static;
}
.base-wrapper.warning .base-body {
  padding: 16px 0px;
}

.warning-container {
  max-width: 350px;
  display: block;
  position: relative;
  margin-left: auto;
  margin-right: auto;
  font-size: 14px;
}

.help-container {
  text-align: right;
}
.help-container .help-link {
  display: inline-block;
  color: #379ed4;
  margin-bottom: 5px;
  cursor: pointer;
}
.help-container .help-link .help-link-text {
  text-decoration: underline;
}
.help-container .help-link i {
  margin-left: 4px;
}
.help-container .help-tooltip:before {
  content: " ";
  width: 8px;
  height: 8px;
  border: 8px solid transparent;
  border-bottom-color: #fff;
  position: relative;
  float: right;
  right: 19px;
  top: -30px;
}
.help-container .help-tooltip {
  border-radius: 3px;
  box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.26);
  color: #666;
  max-width: 254px;
  padding: 16px;
  font-size: 13px;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  line-height: 19px;
  text-align: left;
  background-color: #fff;
  position: absolute;
  right: 12px;
  top: 36px;
}
.help-container .help-tooltip .help-tooltip-exit-button {
  cursor: pointer;
  font-size: 26px;
  line-height: 26px;
  float: right;
  margin-top: -15px;
  margin-right: -18px;
}

.warning-card {
  /* Prevent the user seeing any but the first card on load (until the view takes control). */
  display: none;
}
.warning-card:first-child {
  display: block;
}
.warning-card > div:last-child {
  border-radius: 0px 0px 6px 6px;
  border-bottom: 2px solid #ccc;
}

.update-icon {
  height: 15px;
  vertical-align: middle;
  margin: 0 0.15rem;
}

.update-svg-icon {
  height: 24px;
  vertical-align: middle;
  margin: -5px 8px -5px -5px;
}

.warning-card-header {
  height: 57px;
  font-size: 16px;
  padding: 20px;
  color: white;
  border-color: #ccc;
  border-style: solid;
  border-width: 2px 2px 0px 2px;
  border-radius: 6px 6px 0px 0px;
  margin-bottom: 0px;
  line-height: 16px;
}
.warning-card-header.danger-header {
  background-color: #a13639;
}
.warning-card-header.warning-header {
  background-color: #df6a27;
}
.warning-card-header.info-header {
  background-color: #666;
}
.warning-card-header i.warning-header-icon {
  margin: -5px 8px -5px -5px;
  font-size: 24px;
  line-height: 24px;
  vertical-align: middle;
  display: inline-block;
}
.warning-card-header span.warning-card-title {
  display: inline-block;
  width: calc(100% - 36px);
}
.warning-card-header > div {
  -ms-transform: translateY(-50%);
      transform: translateY(-50%);
  position: relative;
  top: 50%;
}

.warning-card-body {
  background: white;
  padding: 15px;
  border-color: #ccc;
  border-style: solid;
  border-width: 0px 2px;
  height: 160px;
}
.warning-card-body:last-child {
  height: 214px;
}
.warning-card-body.restricted-software-body {
  padding: 10px;
}
.warning-card-body.restricted-software-body .warning-card-row i {
  display: inline-block;
  vertical-align: top;
}
.warning-card-body.restricted-software-body .warning-card-row span {
  display: inline-block;
  width: calc(100% - 33px);
}
.warning-card-body.restricted-software-body .restricted-software-row {
  margin: 5px 0px;
}
.warning-card-body .warning-message {
  color: #888;
  line-height: 1.1em;
  margin-bottom: 10px;
}
.warning-card-body i {
  font-size: 20px;
  vertical-align: middle;
  margin-right: 8px;
}
.warning-card-body i.success-icon {
  color: #63B246;
}
.warning-card-body i.warning-icon {
  color: #df6a27;
}
.warning-card-body i.danger-icon {
  color: #a13639;
}
.warning-card-body .warning-version-info .desired-version, .warning-card-body .warning-version-info .current-version {
  line-height: 1em;
  margin: 5px 0px;
  margin-left: 30px;
  text-indent: -30px;
}
.warning-card-body .warning-version-info .desired-version {
  color: #888;
}
.warning-card-body .warning-version-info .current-version {
  color: #666;
}
.warning-card-body .step-message {
  margin-bottom: 20px;
  display: -ms-flexbox;
  display: flex;
}
.warning-card-body .step-message .circle-number {
  text-align: center;
  display: inline-block;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border-style: solid;
  border-width: 2px;
  border-color: #858C92;
  vertical-align: middle;
  color: #858C92;
  -ms-flex: none;
      flex: none;
  padding-top: 2px;
  margin-right: 10px;
}
.warning-card-body .step-message .warning-message {
  -ms-flex: 1;
      flex: 1;
  padding-top: 2px;
  margin-bottom: 0px;
  line-height: 1.5;
}

.warning-footer {
  border: 2px solid #ccc;
  height: 54px;
  background-color: white;
  padding: 15px;
  text-align: center;
}
.warning-footer i {
  font-size: 75%;
  margin-left: 5px;
}
.warning-footer i:before {
  display: inline-block;
  text-decoration: none;
}
.warning-footer > div {
  -ms-transform: translateY(-50%);
      transform: translateY(-50%);
  position: relative;
  top: 50%;
}

.base-wrapper-silent-collect {
  visibility: hidden;
}

.endpoint-verify-container .modal-container {
  min-height: 250px;
  margin-top: 30px;
}
.endpoint-verify-container .modal-overlay-header {
  padding: 22px 10px 0;
}
.endpoint-verify-container .main-graphic {
  margin-top: 0;
}
.endpoint-verify-container .modal-overlay-body {
  padding: 10px 30px;
}
.endpoint-verify-container .loading, .endpoint-verify-container .post-loading {
  display: none;
}
.endpoint-verify-container .loading.webview > .mainview-loader,
.endpoint-verify-container .loading.mainview > .webview-loader {
  display: none;
}
.endpoint-verify-container .post-ios-verification {
  display: none;
}
.endpoint-verify-container .post-ios-verification-title {
  display: block;
  margin-bottom: 1rem;
}
.endpoint-verify-container .pre-loading {
  display: initial;
}
.endpoint-verify-container .loading-bar-container {
  margin-top: 20px;
  width: 100%;
  background-color: #DBE2EA;
  border-radius: 5px;
}
.endpoint-verify-container .loading-bar-container .loading-bar {
  width: 0%;
  background-color: #306FC3;
  height: 10px;
  border-radius: 5px;
}
.endpoint-verify-container .next-button {
  margin-bottom: 10px;
  color: #fff;
  background-color: #306FC3;
  border-color: #306FC3;
  max-height: 38px;
  min-height: 38px;
  height: auto;
}
.endpoint-verify-container .modal-overlay-footer {
  padding: 5px 15px 10px;
}
.endpoint-verify-container #no-duo-mobile-link {
  color: #888888;
  font-size: 12px;
  font-face: "Roboto";
  text-decoration: underline;
}
.endpoint-verify-container .expand-TME-policy-link {
  text-decoration: none;
  margin-right: 1.2em;
}
.endpoint-verify-container .expand-TME-policy-link #expand-TME-policy-icon {
  vertical-align: middle;
  margin-right: -1.25em;
  display: inline-block;
  line-height: 1;
}
.endpoint-verify-container .grey a {
  color: #333;
  cursor: pointer;
  text-decoration: underline;
}

.spinner {
  width: 54px;
  height: 54px;
  margin: 0 auto;
  position: relative;
  animation: bouncein 0.5s ease-in-out;
}
.spinner:after {
  content: "";
  position: absolute;
  left: 0;
  /* box-sizing: border-box in effect */
  width: 54px;
  height: 54px;
  border: 6px solid #EAEAEA;
  border-bottom-color: #379ed4;
  border-radius: 50%;
  animation: rotate 1s infinite linear;
}
.spinner.out {
  animation: scaleout 0.15s ease-in-out;
  -ms-transform: scale(0.05);
      transform: scale(0.05);
}

.quick-check {
  display: none;
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
      transform: translate(-50%, -50%);
}

.slow-check {
  display: none;
}
.slow-check .spinner {
  margin: 30px auto;
}

@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes bouncein {
  0% {
    transform: scale(0.05);
  }
  33% {
    transform: scale(1.1);
  }
  60% {
    transform: scale(0.96);
  }
  75% {
    transform: scale(1.03);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes scaleout {
  from {
    transform: scale(1);
  }
  to {
    transform: scale(0.05);
  }
}
.base-wrapper.eh-bypass {
  border: none;
}

#endpointhealth-download-container .nav-button.back {
  margin-bottom: 0.875rem;
}
#endpointhealth-download-container .navigation-label {
  text-decoration: underline;
  cursor: pointer;
}
#endpointhealth-download-container [class^=icon-]:before {
  vertical-align: middle;
}

.eh-footer {
  position: absolute;
  bottom: 1rem;
}
.eh-footer a {
  color: #333;
}
@media (max-width: 480px) {
  .eh-footer .need-help-text {
    display: none;
  }
}

.eh-download .faq {
  display: inline-block;
}
.eh-download .or-text {
  margin-left: 1rem;
  margin-right: 1rem;
}
@media (max-width: 480px) {
  .eh-download .or-text {
    display: none;
  }
}
.eh-download .installed {
  display: inline-block;
  line-height: 1.3;
  vertical-align: middle;
  margin: 0;
}
@media (max-width: 480px) {
  .eh-download .installed {
    display: block;
    margin-top: 0.875rem;
  }
}
.eh-download .installed .installed-text {
  display: block;
}
@media (max-width: 480px) {
  .eh-download .installed .installed-text {
    display: inline-block;
  }
}
.eh-download .dha-enroll-installed {
  line-height: 1.3;
  vertical-align: middle;
  margin-top: 1rem;
}
@media (max-width: 480px) {
  .eh-download .dha-enroll-installed {
    display: block;
    margin-top: 0.875rem;
  }
}
@media (max-width: 480px) {
  .eh-download .dha-enroll-installed .installed-text {
    display: inline-block;
  }
}

.eh-instructions,
.eh-platforms,
.eh-faq {
  display: none;
}

#endpoint-verify-remediation .main-graphic img {
  width: 86px;
  height: 86px;
  display: block;
  margin: 0 auto;
}
#endpoint-verify-remediation .modal-container {
  margin-top: 30px;
}
#endpoint-verify-remediation .modal-overlay-body {
  padding-top: 0;
}
#endpoint-verify-remediation .modal-overlay-footer {
  padding-top: 10px;
}

.eh-faq {
  padding-bottom: 25px;
  /* We want to position the navigation bar at the bottom of the frame,
  but not cover the frame's border, so we set its padding to an
  internal 1px, and let the dots container fill the rest of it with the
  body's background-color */
}
.eh-faq .navigation {
  position: fixed;
  box-sizing: border-box;
  bottom: 0;
  left: 0;
  padding: 1px;
  width: 100%;
}
.eh-faq .navigation .card-dots {
  height: 23px;
  text-align: left;
  background-color: #f7f7f7;
  padding-left: 170px;
}
@media (max-width: 480px) {
  .eh-faq .navigation .card-dots {
    padding-left: 16px;
  }
}
.eh-faq .next {
  margin-top: 0.875rem;
}
.eh-faq .next .navigation-label {
  color: #379ed4;
}
.eh-faq .next .navigation-label:hover {
  color: #22729d;
}
.eh-faq ul {
  list-style: none;
  position: relative;
  padding-left: 1.5rem;
}
.eh-faq li {
  margin: 0;
}
.eh-faq li:before {
  position: absolute;
  left: 0;
  font-size: 16px;
  line-height: 125%;
}
.eh-faq li.icon-block:before {
  color: #a13639;
}
.eh-faq li.icon-check:before {
  color: #63b246;
}

.eh-instructions ol {
  list-style: none;
  list-style-image: url("#");
  counter-reset: list;
  position: relative;
  padding-left: 2rem;
}
.eh-instructions ol li {
  position: relative;
}
.eh-instructions ol li:before {
  counter-increment: list;
  content: counter(list);
  position: absolute;
  left: -2rem;
  top: -0.1rem;
  border: 1px solid #686868;
  border-radius: 0.75rem;
  width: 1.5rem;
  height: 1.5rem;
  line-height: calc(1.5rem - 2px);
  text-align: center;
  font-weight: bold;
}

.hide {
  display: none;
}

.activate-panel .modal-container, .already-panel .modal-container {
  background-color: #fff;
  padding: 20px;
}
.activate-panel .next-button, .already-panel .next-button {
  background-color: #306FC3;
}
.activate-panel .activated-link, .already-panel .activated-link {
  color: #306FC3;
}

.already-activated-link {
  margin-top: 1em;
}

.already-panel {
  background-color: #f7f7f7;
}
.already-panel .warning-container {
  max-width: 320px;
}
.already-panel .modal-container {
  border: 2px solid #ccc;
  width: auto;
  margin-top: auto;
}
.already-panel ol {
  text-align: left;
  padding-left: 0;
  counter-reset: item;
  margin-bottom: 0;
}
.already-panel ol li {
  margin-bottom: 0.5em;
  list-style-type: none;
  counter-increment: item;
  padding-left: 1em;
  text-indent: -0.5em;
}
.already-panel ol li:before {
  display: inline-block;
  width: 0.5em;
  padding-right: 0.5em;
  font-weight: bold;
  text-align: right;
  content: counter(item);
}
.already-panel .help-link, .already-panel .back {
  font-size: 80%;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
      align-items: center;
}
.already-panel .help-link i, .already-panel .back i {
  padding-top: 0.25em;
}
.already-panel .help-link {
  -ms-flex-pack: end;
      justify-content: flex-end;
}
.already-panel .back {
  color: #666;
}
.already-panel .back a {
  color: #666;
}

/**
 * Micro clearfix hack http://nicolasgallagher.com/micro-clearfix-hack/
 * This clearfix hack can be used on the container element that has floated
 * elements without adding new markup
 */
/** Vertically center an element in another with this mixin **/
/**
 * Source: https://css-tricks.com/snippets/css/retina-display-media-query/
 */
.c--btn-next:after, .c--btn-new-window:after {
  font-family: "Duo Admin Icons" !important;
  font-style: normal !important;
  font-weight: 400 !important;
  font-variant: normal !important;
  text-transform: none !important;
  speak: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.c--btn-next:hover:after, .c--btn-new-window:hover:after {
  box-shadow: none;
}

.update-enrollment-container {
  max-width: 450px;
  display: block;
  position: relative;
  margin-left: auto;
  margin-right: auto;
  font-size: 14px;
}

.update-enrollment-header {
  padding-left: 4px;
  color: black;
}

.yubikey-image {
  max-width: 140px;
  display: inline-block;
  position: absolute;
  top: 40px;
  right: 25px;
}

.update-enrollment-text {
  max-width: 55%;
  display: inline-block;
  padding-left: 4px;
}

.update-enrollment-button {
  padding-top: 40px;
  padding-left: 4px;
  padding-bottom: 4px;
}

div.tma-prompt .base-main {
  top: calc(1rem - 64px);
  left: 0;
}
div.tma-prompt .base-body {
  background-color: transparent;
}

.tma-trust-check-prompt {
  border: 0.125rem solid #888;
  padding: 1rem;
  text-align: left;
  max-width: 350px;
  width: 100%;
  position: relative;
  border-radius: 0;
}
.tma-trust-check-prompt header > img {
  width: auto;
  max-height: 48px;
  margin-bottom: 0;
}
.tma-trust-check-prompt header {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: justify;
      justify-content: space-between;
  -ms-flex-align: center;
      align-items: center;
  margin-bottom: 1.25rem;
}
.tma-trust-check-prompt header button {
  width: auto;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: justify;
      justify-content: space-between;
  -ms-flex-align: center;
      align-items: center;
  background-color: transparent;
  border: 1px solid #555;
  color: #555;
  padding: 5px;
  display: none;
}
.tma-trust-check-prompt header button img {
  padding-right: 10px;
}
.tma-trust-check-prompt img {
  max-width: 100px;
  max-height: 100px;
}
.tma-trust-check-prompt button.trigger-duo-mobile-verify {
  width: 100%;
  margin: 1.25rem 0;
  background-color: #63B246;
}
.tma-trust-check-prompt .next-button:active, .tma-trust-check-prompt .next-button:focus {
  background-color: #6bbf4e;
}
.tma-trust-check-prompt .next-button:focus {
  outline: 0.125rem solid #6bbf4e;
}
.tma-trust-check-prompt #no-duo-mobile-link {
  display: block;
  text-align: center;
  color: #1E6F9A;
}
.tma-trust-check-prompt #no-duo-mobile-link:hover {
  color: #124661;
}
.tma-trust-check-prompt .loading, .tma-trust-check-prompt .post-loading {
  display: none;
}
.tma-trust-check-prompt form.disabled {
  background: transparent;
}

html.ie9 {
  min-height: 330px;
}
html.ie9 body {
  min-height: 330px;
}

body {
  height: 330px;
  position: relative;
  overflow-y: hidden;
  font-size: 12px;
}

.hidden {
  display: none;
}

.screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  white-space: nowrap;
}

[type=checkbox], [type=radio] {
  vertical-align: 1px;
}

a {
  color: #1E6F9A;
}
a:hover {
  color: #124661;
}

/********************************* Layout *********************************/
/* container to give saml primary auth layout normal frame width */
.base-container {
  margin: 60px auto;
  height: 330px;
  max-width: 620px;
  position: relative;
}

.oidc-wrapper {
  width: 100%;
  min-width: 304px;
  max-width: 620px;
  min-height: 330px;
  margin: 108px auto 0 auto;
  display: block;
  border: none;
  position: relative;
}

.base-wrapper {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100%;
  border: 1px solid #133650;
  background: #f7f7f7;
}

.base-header, .base-navigation {
  position: absolute;
  top: 0;
  bottom: 0;
  height: 100%;
  left: 0;
  width: 170px;
  padding: 16px;
}
.base-header .banner a, .base-navigation .banner a {
  display: block;
  max-width: 128px;
}
.base-header .banner a img, .base-navigation .banner a img {
  display: block;
  width: auto;
  height: auto;
  max-width: 128px;
  max-height: 128px;
  margin-bottom: 16px;
}
@media (max-width: 480px) {
  .base-header, .base-navigation {
    bottom: auto;
    height: 64px;
    width: auto;
    right: 0;
    text-align: left;
  }
  .base-header img, .base-navigation img {
    width: auto;
    max-height: 48px;
    margin-bottom: 0;
  }
}
.quirks .base-header, .quirks .base-navigation {
  bottom: auto;
  height: 327px;
}

.base-main {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 160px;
  overflow-x: hidden;
  overflow-y: auto;
}
@media (max-width: 480px) {
  .base-main {
    top: 64px;
    left: 0;
  }
}

.base-body {
  min-height: 100%;
  padding: 16px;
  background-color: #f7f7f7;
}
.base-body.has-message {
  margin-bottom: 40px;
}
@media (max-width: 480px) {
  .base-body.has-message {
    margin-bottom: 60px;
  }
}

.passcode-input-wrapper {
  width: calc(60% - 4rem);
  float: left;
  /* media queries don't work in IE7 and IE8 so we
     default to the mobile view to support smaller frames */
}
@media (max-width: 505px) {
  .passcode-input-wrapper {
    width: 100%;
    float: none;
  }
}
.ie7 .passcode-input-wrapper, .ie8 .passcode-input-wrapper {
  width: 100%;
  float: none;
}

.next-passcode-msg {
  color: #666;
  font-size: 11px;
  line-height: 18px;
  margin-top: -4px;
  margin-bottom: 4px;
}
@media (min-width: 505px) {
  .next-passcode-msg {
    position: absolute;
    margin-top: 6px;
  }
}

.content-header {
  margin-bottom: 8px;
}
.content-header * {
  display: inline-block;
}

.help-links a {
  display: block;
}
html[lang=fr] .help-links a, html[lang=de] .help-links a {
  padding-bottom: 6px;
  line-height: 1.4;
}
.help-links .help-url {
  text-decoration: none;
}
.help-links .help-url span {
  text-decoration: underline;
}
@media (max-width: 480px) {
  .help-links {
    margin-top: 12px;
    margin-left: 3px;
  }
  .help-links a {
    display: inline;
    font-size: 16px;
    margin-bottom: 0;
  }
}

.text-centered {
  text-align: center;
}

.header-cookie-status {
  font-weight: 300;
  display: block;
  margin-top: 20%;
  color: #444;
}

/*********************************  Forms *********************************/
form:not(.inline) {
  background-color: inherit;
  margin-bottom: 0;
  padding: 0;
}
form:not(.inline) fieldset {
  padding: 0 10px;
  margin: 0 0 8px;
  border: none;
  background-color: #fff;
}
form:not(.inline) fieldset button {
  margin-top: 10px;
}

label {
  display: block;
  margin-top: 0.5em;
}

label span {
  margin-left: 4px;
}

fieldset {
  margin: 0 0 8px;
  padding: 0;
  border: none;
  /* media queries don't work in IE7 and IE8 so we
     default to the mobile view to support smaller frames */
}
@media (max-width: 360px) {
  fieldset {
    margin-left: 0;
  }
}
.ie7 fieldset, .ie8 fieldset {
  margin-left: 0;
}

fieldset.flush {
  padding: 0;
  margin: 0;
  border: none;
}

legend {
  font-size: 12px;
  font-weight: normal;
}
legend.tall {
  margin-bottom: 0.875rem;
}

h1 {
  font-size: 20px;
  line-height: 28px;
  margin-bottom: 14px;
  outline: none;
}
h1.spacious-frame-view {
  font-size: 24px;
  line-height: 32px;
  margin-bottom: 16px;
}
h1.cramped-frame-view {
  font-size: 18px;
  line-height: 26px;
  margin-bottom: 13px;
  color: inherit;
  margin-bottom: 8px;
}

h2 {
  font-size: 16px;
  line-height: 22px;
  margin-bottom: 11px;
  color: inherit;
  margin-bottom: 8px;
}
h2.spacious-frame-view {
  font-size: 18px;
  line-height: 26px;
  margin-bottom: 13px;
}
h2.cramped-frame-view {
  font-size: 14px;
  line-height: 20px;
  margin-bottom: 10px;
}

.auth-method-header {
  font-size: 14px;
  line-height: 20px;
  position: relative;
  top: -6px;
  margin-bottom: -12px;
}
@media (max-width: 600px) {
  .auth-method-header {
    margin-bottom: -8px;
  }
}

.text-input {
  border: 1px solid #aaa;
}

.disabled {
  cursor: default;
  opacity: 0.7;
  filter: alpha(opacity=70);
  color: #666;
}

.btn-wrapper {
  padding: 4px;
  margin-top: 1rem;
}
.btn-wrapper a, .btn-wrapper button {
  margin-right: 10px;
}

.row-label, .device-bar {
  background-color: #fff;
  border-radius: 3px;
  clear: both;
  margin-top: 0.5rem;
  padding: 4px;
  font-size: 14px;
  margin-bottom: 5px;
  color: #666;
  /* media queries don't work in IE7 and IE8 so we
     default to the mobile view to support smaller frames */
}
.row-label:before, .row-label:after, .device-bar:before, .device-bar:after {
  content: " ";
  display: table;
}
.row-label:after, .device-bar:after {
  clear: both;
}
.ie .row-label, .ie .device-bar {
  *zoom: 1;
}
@media (max-width: 505px) {
  .row-label, .device-bar {
    margin-top: 0;
    padding-left: 0;
    padding-right: 0;
  }
}
.ie7 .row-label, .ie8 .row-label, .ie7 .device-bar, .ie8 .device-bar {
  margin-top: 0;
  padding-left: 0;
  padding-right: 0;
}
html[lang=fr] .row-label, html[lang=de] .row-label, html[lang=fr] .device-bar, html[lang=de] .device-bar {
  /* media queries don't work in IE7 and IE8 so we
     default to the mobile view to support smaller frames */
}
@media (max-width: 612px) {
  html[lang=fr] .row-label, html[lang=de] .row-label, html[lang=fr] .device-bar, html[lang=de] .device-bar {
    margin-top: 0;
    padding-left: 0;
    padding-right: 0;
  }
}
.ie7 html[lang=fr] .row-label, .ie8 html[lang=fr] .row-label, .ie7 html[lang=de] .row-label, .ie8 html[lang=de] .row-label, .ie7 html[lang=fr] .device-bar, .ie8 html[lang=fr] .device-bar, .ie7 html[lang=de] .device-bar, .ie8 html[lang=de] .device-bar {
  margin-top: 0;
  padding-left: 0;
  padding-right: 0;
}
.row-label:first-child, .device-bar:first-child {
  margin-top: 0;
}
.row-label i, .device-bar i {
  font-size: 20px;
  vertical-align: middle;
  margin: 0 4px 0 6px;
}
.row-label span, .row-label input, .device-bar span, .device-bar input {
  vertical-align: middle;
}
.row-label input, .device-bar input {
  font-size: 13px;
  line-height: 22px;
}
.row-label input[name=passcode], .device-bar input[name=passcode] {
  /* media queries don't work in IE7 and IE8 so we
     default to the mobile view to support smaller frames */
  /* media queries don't work in IE7 and IE8 so we
     default to the mobile view to support smaller frames */
}
@media (max-width: 505px) {
  .row-label input[name=passcode], .device-bar input[name=passcode] {
    width: 100%;
  }
}
.ie7 .row-label input[name=passcode], .ie8 .row-label input[name=passcode], .ie7 .device-bar input[name=passcode], .ie8 .device-bar input[name=passcode] {
  width: 100%;
}
@media (max-width: 505px) {
  .row-label input[name=passcode], .device-bar input[name=passcode] {
    margin-bottom: 0.25rem;
  }
}
.ie7 .row-label input[name=passcode], .ie8 .row-label input[name=passcode], .ie7 .device-bar input[name=passcode], .ie8 .device-bar input[name=passcode] {
  margin-bottom: 0.25rem;
}
html[lang=fr] .row-label input[name=passcode], html[lang=de] .row-label input[name=passcode], html[lang=fr] .device-bar input[name=passcode], html[lang=de] .device-bar input[name=passcode] {
  /* media queries don't work in IE7 and IE8 so we
     default to the mobile view to support smaller frames */
  /* media queries don't work in IE7 and IE8 so we
     default to the mobile view to support smaller frames */
}
@media (max-width: 612px) {
  html[lang=fr] .row-label input[name=passcode], html[lang=de] .row-label input[name=passcode], html[lang=fr] .device-bar input[name=passcode], html[lang=de] .device-bar input[name=passcode] {
    width: 100%;
  }
}
.ie7 html[lang=fr] .row-label input[name=passcode], .ie8 html[lang=fr] .row-label input[name=passcode], .ie7 html[lang=de] .row-label input[name=passcode], .ie8 html[lang=de] .row-label input[name=passcode], .ie7 html[lang=fr] .device-bar input[name=passcode], .ie8 html[lang=fr] .device-bar input[name=passcode], .ie7 html[lang=de] .device-bar input[name=passcode], .ie8 html[lang=de] .device-bar input[name=passcode] {
  width: 100%;
}
@media (max-width: 612px) {
  html[lang=fr] .row-label input[name=passcode], html[lang=de] .row-label input[name=passcode], html[lang=fr] .device-bar input[name=passcode], html[lang=de] .device-bar input[name=passcode] {
    margin-bottom: 0.25rem;
  }
}
.ie7 html[lang=fr] .row-label input[name=passcode], .ie8 html[lang=fr] .row-label input[name=passcode], .ie7 html[lang=de] .row-label input[name=passcode], .ie8 html[lang=de] .row-label input[name=passcode], .ie7 html[lang=fr] .device-bar input[name=passcode], .ie8 html[lang=fr] .device-bar input[name=passcode], .ie7 html[lang=de] .device-bar input[name=passcode], .ie8 html[lang=de] .device-bar input[name=passcode] {
  margin-bottom: 0.25rem;
}
.row-label span, .device-bar span {
  margin-top: 8px;
}
.row-label span.label, .device-bar span.label {
  float: left;
}
.row-label span.label i, .device-bar span.label i {
  display: inline-block;
  vertical-align: middle;
}
.row-label a.button, .row-label button, .device-bar a.button, .device-bar button {
  float: right;
  vertical-align: middle;
  white-space: nowrap;
  margin: 0;
  padding: 12px;
  font-size: 14px;
  min-width: 140px;
  text-align: center;
}
.row-label a.button i, .row-label button i, .device-bar a.button i, .device-bar button i {
  margin: 0;
  vertical-align: middle;
}
.row-label .auth-button, .device-bar .auth-button {
  min-width: 160px;
  /* media queries don't work in IE7 and IE8 so we
     default to the mobile view to support smaller frames */
  /* media queries don't work in IE7 and IE8 so we
     default to the mobile view to support smaller frames */
}
@media (max-width: 505px) {
  .row-label .auth-button, .device-bar .auth-button {
    width: 100%;
  }
}
.ie7 .row-label .auth-button, .ie8 .row-label .auth-button, .ie7 .device-bar .auth-button, .ie8 .device-bar .auth-button {
  width: 100%;
}
html[lang=fr] .row-label .auth-button, html[lang=de] .row-label .auth-button, html[lang=fr] .device-bar .auth-button, html[lang=de] .device-bar .auth-button {
  /* media queries don't work in IE7 and IE8 so we
     default to the mobile view to support smaller frames */
}
@media (max-width: 612px) {
  html[lang=fr] .row-label .auth-button, html[lang=de] .row-label .auth-button, html[lang=fr] .device-bar .auth-button, html[lang=de] .device-bar .auth-button {
    width: 100%;
  }
}
.ie7 html[lang=fr] .row-label .auth-button, .ie8 html[lang=fr] .row-label .auth-button, .ie7 html[lang=de] .row-label .auth-button, .ie8 html[lang=de] .row-label .auth-button, .ie7 html[lang=fr] .device-bar .auth-button, .ie8 html[lang=fr] .device-bar .auth-button, .ie7 html[lang=de] .device-bar .auth-button, .ie8 html[lang=de] .device-bar .auth-button {
  width: 100%;
}
@media (max-width: 505px) {
  .row-label .auth-button, .device-bar .auth-button {
    float: none;
    clear: both;
  }
}
.ie7 .row-label .auth-button, .ie8 .row-label .auth-button, .ie7 .device-bar .auth-button, .ie8 .device-bar .auth-button {
  float: none;
  clear: both;
}
.row-label .factor-label, .device-bar .factor-label {
  /*
   * $breakpoint -   The size at which content should be hidden
   * $before -       Whether the content should be hidden before the
                     breakpoint or after
   * $displayType -  block or inline-block when the content is displayed
   */
  display: none;
  /* media queries don't work in IE7 and IE8 so we
     default to the mobile view to support smaller frames */
  max-width: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@media (min-width: 506px) {
  .row-label .factor-label, .device-bar .factor-label {
    display: inline-block;
  }
}
.ie7 .row-label .factor-label, .ie8 .row-label .factor-label, .ie7 .device-bar .factor-label, .ie8 .device-bar .factor-label {
  display: inline-block;
}
.ie7 .row-label .factor-label, .ie8 .row-label .factor-label, .ie7 .device-bar .factor-label, .ie8 .device-bar .factor-label {
  display: none;
}
.row-label .factor-label.hidden, .device-bar .factor-label.hidden {
  display: none;
}
html[lang=fr] .row-label .factor-label, html[lang=de] .row-label .factor-label, html[lang=fr] .device-bar .factor-label, html[lang=de] .device-bar .factor-label {
  /*
   * $breakpoint -   The size at which content should be hidden
   * $before -       Whether the content should be hidden before the
                     breakpoint or after
   * $displayType -  block or inline-block when the content is displayed
   */
  display: none;
  /* media queries don't work in IE7 and IE8 so we
     default to the mobile view to support smaller frames */
}
@media (min-width: 613px) {
  html[lang=fr] .row-label .factor-label, html[lang=de] .row-label .factor-label, html[lang=fr] .device-bar .factor-label, html[lang=de] .device-bar .factor-label {
    display: inline-block;
  }
}
.ie7 html[lang=fr] .row-label .factor-label, .ie8 html[lang=fr] .row-label .factor-label, .ie7 html[lang=de] .row-label .factor-label, .ie8 html[lang=de] .row-label .factor-label, .ie7 html[lang=fr] .device-bar .factor-label, .ie8 html[lang=fr] .device-bar .factor-label, .ie7 html[lang=de] .device-bar .factor-label, .ie8 html[lang=de] .device-bar .factor-label {
  display: inline-block;
}
.ie7 html[lang=fr] .row-label .factor-label, .ie8 html[lang=fr] .row-label .factor-label, .ie7 html[lang=de] .row-label .factor-label, .ie8 html[lang=de] .row-label .factor-label, .ie7 html[lang=fr] .device-bar .factor-label, .ie8 html[lang=fr] .device-bar .factor-label, .ie7 html[lang=de] .device-bar .factor-label, .ie8 html[lang=de] .device-bar .factor-label {
  display: none;
}
html[lang=fr] .row-label .factor-label.hidden, html[lang=de] .row-label .factor-label.hidden, html[lang=fr] .device-bar .factor-label.hidden, html[lang=de] .device-bar .factor-label.hidden {
  display: none;
}
.row-label .recommended, .device-bar .recommended {
  color: #6a8ba1;
  display: none;
  font-size: 10px;
  /* media queries don't work in IE7 and IE8 so we
     default to the mobile view to support smaller frames */
}
@media (min-width: 535px) {
  .row-label .recommended, .device-bar .recommended {
    display: inline-block;
  }
}
.ie7 .row-label .recommended, .ie8 .row-label .recommended, .ie7 .device-bar .recommended, .ie8 .device-bar .recommended {
  display: inline-block;
}
.row-label .used-automatically, .device-bar .used-automatically {
  margin-left: 8px;
  color: #888;
}
.row-label .used-automatically i, .device-bar .used-automatically i {
  font-size: 16px;
  margin: 0;
  line-height: 1;
}

.row-label {
  /* media queries don't work in IE7 and IE8 so we
     default to the mobile view to support smaller frames */
}
@media (max-width: 505px) {
  .row-label {
    background-color: transparent;
  }
}
.ie7 .row-label, .ie8 .row-label {
  background-color: transparent;
}
html[lang=fr] .row-label, html[lang=de] .row-label {
  /* media queries don't work in IE7 and IE8 so we
     default to the mobile view to support smaller frames */
}
@media (max-width: 612px) {
  html[lang=fr] .row-label, html[lang=de] .row-label {
    background-color: transparent;
  }
}
.ie7 html[lang=fr] .row-label, .ie8 html[lang=fr] .row-label, .ie7 html[lang=de] .row-label, .ie8 html[lang=de] .row-label {
  background-color: transparent;
}
html[lang=de] .row-label .factor-label, html[lang=de] .row-label .passcode-input {
  width: 190px;
}
html[lang=de] .row-label button {
  min-width: 215px;
}
html[lang=fr] .row-label .factor-label, html[lang=fr] .row-label .passcode-input {
  width: 180px;
}
html[lang=fr] .row-label button {
  min-width: 225px;
}
html[lang=fr] .row-label.phone-label .factor-label {
  width: 150px;
  line-height: 1em;
  margin-left: 0.75em;
  position: relative;
  top: -0.25em;
  word-wrap: break-word;
  overflow: visible;
  white-space: normal;
}
html[lang=fr] .row-label.phone-label .factor-label .icon-call-ringing {
  margin-top: 0.15em;
  line-height: 0em;
  float: left;
  margin-left: -0.23em;
  margin-right: 0.4em;
}

.sms-passcodes {
  font-size: 10px;
  padding-left: 5px;
}
.sms-passcodes p {
  margin: 0;
}

.device-selector > * {
  display: inline-block;
}
.device-selector h1 {
  width: 16%;
  min-width: 64px;
}
.device-selector .device-select-wrapper {
  width: 74%;
}
.device-selector select {
  width: 100%;
  height: 32px;
  padding: 0.4rem 0.5rem;
}
html[lang=fr] .device-selector h1 {
  width: 28%;
  min-width: 120px;
}
html[lang=fr] .device-selector .device-select-wrapper {
  width: 70%;
}
@media (max-width: 360px) {
  .device-selector h1 {
    width: 22%;
    margin-right: 2%;
  }
  .device-selector .device-select-wrapper {
    width: 74%;
  }
}

.stay-logged-in {
  margin-top: -6px;
}

.stay-logged-in input[type=checkbox] {
  vertical-align: middle;
}

.recommended {
  text-transform: uppercase;
  color: #63B246;
}

.update-footer .btn-wrapper a:focus {
  outline: 2px solid #63B246;
  outline-offset: 2px;
}

.remember_me_label_field {
  padding-top: 12px;
  line-height: 18px;
}

/**************************  Start page styles  **************************/
.logo {
  float: left;
  margin-right: 1em;
  height: 200px;
}

h1 + i {
  color: #c6cbd2;
  height: 18px;
  margin: 0 0 0 1em;
  vertical-align: middle;
}

/******************************  U2F styles  ******************************/
/* Google's u2f.register() and u2f.sign() put a blank iframe at the end of the
   html body for their MessagePort, and they set the attribute style to
   display:none. However, our Content Security Policy doesn't allow inline
   style, so we need to hide it through css. */
iframe[src*="u2f-comms.html"] {
  display: none;
}

.right-column-item {
  margin-top: 20px;
}

.status-icon-small {
  vertical-align: middle;
  margin-right: 10px;
}

.instructions-container:before, .instructions-container:after {
  content: " ";
  display: table;
}
.instructions-container:after {
  clear: both;
}
.ie .instructions-container {
  *zoom: 1;
}
.instructions-container .help-wrapper {
  float: left;
}

.left-column.larger {
  width: 48%;
  margin: 0;
}
.left-column.larger .qr-container {
  float: none;
}
.left-column.larger img {
  width: 86%;
}
@media (max-width: 480px) {
  .left-column.larger {
    width: 100%;
    margin: 0;
    display: block;
  }
  .left-column.larger img {
    width: 50%;
  }
}

.right-column.smaller {
  float: left;
  width: 48%;
  margin: 0;
}
@media (max-width: 480px) {
  .right-column.smaller {
    width: 100%;
    margin: 0;
    display: block;
    float: none;
  }
}
.right-column.smaller ol {
  margin-top: 1.25em;
  margin-left: -20px;
}
@media (max-width: 480px) {
  .right-column.smaller ol {
    margin-left: 0;
  }
}
.right-column.smaller li {
  margin-top: 0.1em;
}

.device-bar p {
  margin-bottom: 0;
}

/******************************  Help Links  ****************************/
.help-sidebar .btn-support {
  display: none;
}
.help-sidebar .help-links a {
  display: block;
}
.help-sidebar .help-links i.icon-new-window {
  margin-bottom: -2px;
}
.help-sidebar .branding-link {
  margin-top: 1em;
  font-size: 11px;
  color: #666;
  text-decoration: none;
}
.help-sidebar .branding-link:hover {
  color: #1E6F9A;
  text-decoration: none;
}
@media (max-width: 480px) {
  .help-sidebar {
    float: right;
  }
  .help-sidebar .btn-support {
    color: #888;
    display: block;
    position: absolute;
    top: 16px;
    right: 16px;
    background-color: #f7f7f7;
    border: 2px solid #888;
    z-index: 20;
    transition-property: right;
    transition-duration: 0.2s;
    transition-timing-function: ease;
  }
  .help-sidebar .btn-support .icon-align-justify {
    display: inline-block;
  }
  .help-sidebar .btn-support .icon-delete {
    display: none;
  }
  .help-sidebar .btn-support.overlay-active {
    right: 190px;
  }
  .help-sidebar .btn-support.overlay-active:focus {
    outline: 2px solid #fff;
  }
  .help-sidebar .btn-support.overlay-active .icon-align-justify {
    display: none;
  }
  .help-sidebar .btn-support.overlay-active .icon-delete {
    display: inline-block;
  }
  .help-sidebar .help-links {
    display: none;
  }
}

.help-overlay {
  position: fixed;
  height: 100%;
  width: 180px;
  background: #19709e;
  top: 0;
  right: 0;
  z-index: 20;
  display: none;
  transition-property: right;
  transition-duration: 0.2s;
  transition-timing-function: ease;
}
@media (max-width: 480px) {
  .help-overlay {
    display: block;
  }
}
.help-overlay .help-links {
  padding: 10px;
}
.help-overlay .help-links a {
  color: white;
  display: block;
  font-size: 12px;
}
.help-overlay .help-links a:focus {
  outline: 2px solid #fff;
}
.help-overlay .help-links a.branding-link {
  color: #daedf7;
}
.help-overlay .branding-link {
  position: absolute;
  bottom: 16px;
  text-decoration: none;
}
.help-overlay .branding-link:focus {
  outline: 2px solid #fff;
  opacity: 1;
}
.help-overlay .branding-link:hover {
  opacity: 1;
  text-decoration: none;
}
.help-overlay.offscreen {
  right: -180px;
  visibility: hidden;
}

/* Darkens the rest of the content when help sidebar open */
.darken-overlay {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 15;
  display: none;
  opacity: 0.7;
  background-color: black;
  cursor: pointer;
  /* Hate !important, but need this in case user resizes
  the frame to larger (overlay should not be visible) */
}
@media (min-width: 480px) {
  .darken-overlay {
    display: none !important;
  }
}

/******************************  Utility classes  ****************************/
.white-wrapper {
  padding: 8px;
  background-color: #fff;
  border-radius: 3px;
  margin-bottom: 8px;
}
.white-wrapper:before, .white-wrapper:after {
  content: " ";
  display: table;
}
.white-wrapper:after {
  clear: both;
}
.ie .white-wrapper {
  *zoom: 1;
}

.blue-text {
  color: #405665;
}

/* Show when resolution is medium-screen or smaller */
.medium-or-smaller {
  /*
   * $breakpoint -   The size at which content should be hidden
   * $before -       Whether the content should be hidden before the
                     breakpoint or after
   * $displayType -  block or inline-block when the content is displayed
   */
  display: none;
  /* media queries don't work in IE7 and IE8 so we
     default to the mobile view to support smaller frames */
}
@media (max-width: 480px) {
  .medium-or-smaller {
    display: block;
  }
}
.ie7 .medium-or-smaller, .ie8 .medium-or-smaller {
  display: block;
}
.medium-or-smaller.hidden {
  display: none;
}

/* Show when resolution is medium-screen or larger */
.medium-or-larger {
  /*
   * $breakpoint -   The size at which content should be hidden
   * $before -       Whether the content should be hidden before the
                     breakpoint or after
   * $displayType -  block or inline-block when the content is displayed
   */
  display: none;
  /* media queries don't work in IE7 and IE8 so we
     default to the mobile view to support smaller frames */
}
@media (min-width: 480px) {
  .medium-or-larger {
    display: block;
  }
}
.ie7 .medium-or-larger, .ie8 .medium-or-larger {
  display: block;
}
.ie7 .medium-or-larger, .ie8 .medium-or-larger {
  display: none;
}
.medium-or-larger.hidden {
  display: none;
}

.medium-or-smaller-inline {
  /*
   * $breakpoint -   The size at which content should be hidden
   * $before -       Whether the content should be hidden before the
                     breakpoint or after
   * $displayType -  block or inline-block when the content is displayed
   */
  display: none;
  /* media queries don't work in IE7 and IE8 so we
     default to the mobile view to support smaller frames */
}
@media (max-width: 480px) {
  .medium-or-smaller-inline {
    display: inline-block;
  }
}
.ie7 .medium-or-smaller-inline, .ie8 .medium-or-smaller-inline {
  display: inline-block;
}
.medium-or-smaller-inline.hidden {
  display: none;
}

.medium-or-larger-inline {
  /*
   * $breakpoint -   The size at which content should be hidden
   * $before -       Whether the content should be hidden before the
                     breakpoint or after
   * $displayType -  block or inline-block when the content is displayed
   */
  display: none;
  /* media queries don't work in IE7 and IE8 so we
     default to the mobile view to support smaller frames */
}
@media (min-width: 480px) {
  .medium-or-larger-inline {
    display: inline-block;
  }
}
.ie7 .medium-or-larger-inline, .ie8 .medium-or-larger-inline {
  display: inline-block;
}
.ie7 .medium-or-larger-inline, .ie8 .medium-or-larger-inline {
  display: none;
}
.medium-or-larger-inline.hidden {
  display: none;
}

.large-only {
  /*
   * $breakpoint -   The size at which content should be hidden
   * $before -       Whether the content should be hidden before the
                     breakpoint or after
   * $displayType -  block or inline-block when the content is displayed
   */
  display: none;
  /* media queries don't work in IE7 and IE8 so we
     default to the mobile view to support smaller frames */
}
@media (min-width: 600px) {
  .large-only {
    display: block;
  }
}
.ie7 .large-only, .ie8 .large-only {
  display: block;
}
.ie7 .large-only, .ie8 .large-only {
  display: none;
}
.large-only.hidden {
  display: none;
}

.large-only-inline {
  /*
   * $breakpoint -   The size at which content should be hidden
   * $before -       Whether the content should be hidden before the
                     breakpoint or after
   * $displayType -  block or inline-block when the content is displayed
   */
  display: none;
  /* media queries don't work in IE7 and IE8 so we
     default to the mobile view to support smaller frames */
}
@media (min-width: 600px) {
  .large-only-inline {
    display: inline;
  }
}
.ie7 .large-only-inline, .ie8 .large-only-inline {
  display: inline;
}
.ie7 .large-only-inline, .ie8 .large-only-inline {
  display: none;
}
.large-only-inline.hidden {
  display: none;
}

/* 100% width when resolution is medium-screen or smaller */
.medium-full-width {
  /* media queries don't work in IE7 and IE8 so we
     default to the mobile view to support smaller frames */
}
@media (max-width: 480px) {
  .medium-full-width {
    width: 100%;
  }
}
.ie7 .medium-full-width, .ie8 .medium-full-width {
  width: 100%;
}