/**
 * =============================================================================
 * WEB APP - STYLESHEET
 *
 * @package     Underztand
 * @since       Version 0.1
 *
 * @author      Vincent Cruz @ VAN Intelligence AB
 * @author URI  https://www.underztand.com
 * @license     Copyright VAN Intelligence AB. All rights reserved.
 * =============================================================================
**/

/**
 * =============================================================================
 * STYLESHEET CONFIGURATION
 *
 * @package     Underztand
 * @since       Version 0.1
 *
 * @author      Vincent Cruz @ VAN Intelligence AB
 * @author URI  https://www.underztand.com
 * @license     Copyright VAN Intelligence AB. All rights reserved.
 * =============================================================================
**/

/**
	* --------------------------------------------------------------------------
	* Colors
	* --------------------------------------------------------------------------
**/

/**
	* --------------------------------------------------------------------------
	* General properties
	* --------------------------------------------------------------------------
**/

/**
* ================================================================================
* MIXINS
* ================================================================================
**/

/**
	* --------------------------------------------------------------------------
	* Transform & Transition
	* --------------------------------------------------------------------------
**/

/**
	* TRANSITIONS
	*/

/**
	* TRANSFORM
	* Note: Remember to include translateZ() to trigger smooth GPU rendering
	* Note: Perspective must be set for parent wrapper for 3d translations (and thereby GPU rendering) to be enabled
	*/

/**
	* --------------------------------------------------------------------------
	* Helpers
	* --------------------------------------------------------------------------
**/

/**
	* Border radius
	*/

/**
	* Shadows
	*/

/**
	* Background images
	*/

/**
	* Linear gradient
	* Specify colors as comma separated string, e.g "red, #907FFF 50%"
	*
	* IMPORTANT! 
	* If using gradient to transparent, it is important to set a rgba value, e.g. rgba(255,255,255,0), not "transparent" keyword,
	* as Safari treats "transparent" as transparent black, which will render a gradient towards black.
	*/

/**
	* Radial gradient
	* Specify colors with string litterals, e.g. black 10%, red 20%, green 30%
	*/

/**
	* Cursor
	*/

/**
	* Hover color
	*/

/**
	* --------------------------------------------------------------------------
	* Flexbox
	* --------------------------------------------------------------------------
**/

/**
	* --------------------------------------------------------------------------
	* Svg
	* --------------------------------------------------------------------------
**/

/**
	* --------------------------------------------------------------------------
	* normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css
	* --------------------------------------------------------------------------
**/

html {
  line-height: 1.15;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
}

main {
  display: block;
}

h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

hr {
  box-sizing: content-box;
  height: 0;
  overflow: visible;
}

pre {
  font-family: monospace, monospace;
  font-size: 1em;
}

a {
  background-color: transparent;
}

abbr[title] {
  border-bottom: none;
  text-decoration: underline;
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted;
}

b,
strong {
  font-weight: bolder;
}

code,
kbd,
samp {
  font-family: monospace, monospace;
  font-size: 1em;
}

small {
  font-size: 80%;
}

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

img {
  border-style: none;
}

button,
input,
optgroup,
select,
textarea {
  font-family: inherit;
  font-size: 100%;
  line-height: 1.15;
  margin: 0;
}

button,
input {
  overflow: visible;
}

button,
select {
  text-transform: none;
}

button,
[type=button],
[type=reset],
[type=submit] {
  -webkit-appearance: button;
}

button::-moz-focus-inner,
[type=button]::-moz-focus-inner,
[type=reset]::-moz-focus-inner,
[type=submit]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

button:-moz-focusring,
[type=button]:-moz-focusring,
[type=reset]:-moz-focusring,
[type=submit]:-moz-focusring {
  outline: 1px dotted ButtonText;
}

fieldset {
  padding: 0.35em 0.75em 0.625em;
}

legend {
  box-sizing: border-box;
  color: inherit;
  display: table;
  max-width: 100%;
  padding: 0;
  white-space: normal;
}

progress {
  vertical-align: baseline;
}

textarea {
  overflow: auto;
}

[type=checkbox],
[type=radio] {
  box-sizing: border-box;
  padding: 0;
}

[type=number]::-webkit-inner-spin-button,
[type=number]::-webkit-outer-spin-button {
  height: auto;
}

[type=search] {
  -webkit-appearance: textfield;
  outline-offset: -2px;
}

[type=search]::-webkit-search-decoration {
  -webkit-appearance: none;
}

::-webkit-file-upload-button {
  -webkit-appearance: button;
  font: inherit;
}

details {
  display: block;
}

summary {
  display: list-item;
}

template {
  display: none;
}

[hidden] {
  display: none;
}

/*
==========================================================================
LAYOUT
==========================================================================
*/

html,
body {
  width: 100%;
  font-family: Lato, sans-serif;
  font-weight: 300;
  font-size: 16px;
  line-height: 1.65;
  color: #3F3F82;
  background-color: #FFFFFF;
  margin: 0;
  position: relative;
  min-width: 320px;
}

body {
  overflow-x: hidden;
}

#appContainer {
  min-height: 100vh;
  overflow: hidden;
}

main {
  margin-left: 20rem;
  margin-top: 8rem;
}

section {
  position: relative;
}

.contentWrapper {
  box-sizing: border-box;
  position: relative;
}

.contentWrapper > .content {
  padding: 0 5%;
  margin: 5% auto;
  position: relative;
}

.contentWrapper.cw--screenCenter {
  min-height: 100vh;
  /* OLD - iOS 6-, Safari 3.1-6 */
  /* OLD - Firefox 19- (buggy but mostly works) */
  /* TWEENER - IE 10 */
  /* NEW - Chrome */
  display: flex;
  flex-wrap: wrap;
  -moz-align-items: center;
  -ms-align-items: center;
  align-items: center;
  justify-content: center;
  -webkit-justify-content: center;
  -moz-justify-content: center;
  -ms-align-content: center;
  align-content: center;
  overflow: visible;
  position: relative;
  box-sizing: border-box;
  width: 100%;
}

.layout.l--sidebar {
  /* OLD - iOS 6-, Safari 3.1-6 */
  /* OLD - Firefox 19- (buggy but mostly works) */
  /* TWEENER - IE 10 */
  /* NEW - Chrome */
  display: flex;
  flex-wrap: nowrap;
  -moz-align-items: stretch;
  -ms-align-items: stretch;
  align-items: stretch;
  justify-content: space-between;
  -webkit-justify-content: space-between;
  -moz-justify-content: space-between;
  -ms-align-content: stretch;
  align-content: stretch;
  overflow: visible;
  position: relative;
  box-sizing: border-box;
  width: 100%;
}

.layout.l--sidebar .sidebar {
  -moz-flex: 0 0 22.5%;
  flex: 0 0 22.5%;
  align-self: auto;
  box-sizing: border-box;
  position: relative;
  max-width: 22.5%;
}

.layout.l--sidebar .sidebar .actions {
  margin-top: 2rem;
}

.layout.l--sidebar .main {
  -moz-flex: 0 0 72.5%;
  flex: 0 0 72.5%;
  align-self: auto;
  box-sizing: border-box;
  position: relative;
  max-width: 72.5%;
}

.flexWrapper {
  /* OLD - iOS 6-, Safari 3.1-6 */
  /* OLD - Firefox 19- (buggy but mostly works) */
  /* TWEENER - IE 10 */
  /* NEW - Chrome */
  display: flex;
  flex-wrap: wrap;
  -moz-align-items: stretch;
  -ms-align-items: stretch;
  align-items: stretch;
  justify-content: flex-start;
  -webkit-justify-content: flex-start;
  -moz-justify-content: flex-start;
  -ms-align-content: stretch;
  align-content: stretch;
  overflow: visible;
  position: relative;
  box-sizing: border-box;
  width: 100%;
  box-sizing: border-box;
}

.flexWrapper > * {
  -moz-flex: 1 1 auto;
  flex: 1 1 auto;
  align-self: auto;
  box-sizing: border-box;
  position: relative;
  box-sizing: border-box;
}

.fw--25 > * {
  -moz-flex: 0 0 25%;
  flex: 0 0 25%;
  align-self: auto;
  box-sizing: border-box;
  position: relative;
  max-width: 25%;
}

.fw--33 > * {
  -moz-flex: 0 0 33.33%;
  flex: 0 0 33.33%;
  align-self: auto;
  box-sizing: border-box;
  position: relative;
  max-width: 33.33%;
}

.fw--50 > * {
  -moz-flex: 0 0 50%;
  flex: 0 0 50%;
  align-self: auto;
  box-sizing: border-box;
  position: relative;
  max-width: 50%;
}

.fw--100 > * {
  -moz-flex: 0 0 100%;
  flex: 0 0 100%;
  align-self: auto;
  box-sizing: border-box;
  position: relative;
  max-width: 100%;
}

.fw--33-67 > *:first-child {
  -moz-flex: 0 0 33.33%;
  flex: 0 0 33.33%;
  align-self: auto;
  box-sizing: border-box;
  position: relative;
  max-width: 33.33%;
}

.fw--33-67 > *:last-child {
  -moz-flex: 0 0 66.67%;
  flex: 0 0 66.67%;
  align-self: auto;
  box-sizing: border-box;
  position: relative;
  max-width: 66.67%;
}

.fw--25-75 > *:first-child {
  -moz-flex: 0 0 25%;
  flex: 0 0 25%;
  align-self: auto;
  box-sizing: border-box;
  position: relative;
  max-width: 25%;
}

.fw--25-75 > *:last-child {
  -moz-flex: 0 0 75%;
  flex: 0 0 75%;
  align-self: auto;
  box-sizing: border-box;
  position: relative;
  max-width: 75%;
}

.fw--compact > * {
  -moz-flex: 0 1 auto;
  flex: 0 1 auto;
  align-self: auto;
  box-sizing: border-box;
  position: relative;
}

.fw--separate {
  -moz-justify-content: space-between;
  justify-content: space-between;
}

.fw--separate > * {
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}

.fw--separate.fw--25 > * {
  -moz-flex: 0 0 calc(25% - 0.5rem);
  flex: 0 0 calc(25% - 0.5rem);
  align-self: auto;
  box-sizing: border-box;
  position: relative;
  max-width: calc(25% - 0.5rem);
}

.fw--separate.fw--33 > * {
  -moz-flex: 0 0 calc(33.33% - 1rem/2);
  flex: 0 0 calc(33.33% - 1rem/2);
  align-self: auto;
  box-sizing: border-box;
  position: relative;
  max-width: calc(33.33% - 1rem/2);
}

.fw--separate.fw--50 > * {
  -moz-flex: 0 0 calc(50% - 0.5rem);
  flex: 0 0 calc(50% - 0.5rem);
  align-self: auto;
  box-sizing: border-box;
  position: relative;
  max-width: calc(50% - 0.5rem);
}

.fw--separate.fw--33-67 > *:first-child {
  -moz-flex: 0 0 calc(33.33% - 0.5rem);
  flex: 0 0 calc(33.33% - 0.5rem);
  align-self: auto;
  box-sizing: border-box;
  position: relative;
  max-width: calc(33.33% - 1rem/2);
}

.fw--separate.fw--33-67 > *:last-child {
  -moz-flex: 0 0 calc(66.67% - 0.5rem);
  flex: 0 0 calc(66.67% - 0.5rem);
  align-self: auto;
  box-sizing: border-box;
  position: relative;
  max-width: calc(66.67% - 0.5rem);
}

.fw--separate.fw--25-75 > *:first-child {
  -moz-flex: 0 0 calc(25% - 0.5rem);
  flex: 0 0 calc(25% - 0.5rem);
  align-self: auto;
  box-sizing: border-box;
  position: relative;
  max-width: calc(25% - 1rem/2);
}

.fw--separate.fw--25-75 > *:last-child {
  -moz-flex: 0 0 calc(75% - 0.5rem);
  flex: 0 0 calc(75% - 0.5rem);
  align-self: auto;
  box-sizing: border-box;
  position: relative;
  max-width: calc(75% - 0.5rem);
}

.fw--gutter {
  -moz-justify-content: space-between;
  justify-content: space-between;
}

.fw--gutter > * {
  margin-bottom: 2.5%;
  margin-top: 2.5%;
}

.fw--gutter.fw--25 > * {
  -moz-flex: 0 0 22.5%;
  flex: 0 0 22.5%;
  align-self: auto;
  box-sizing: border-box;
  position: relative;
  max-width: 22.5%;
}

.fw--gutter.fw--33 > * {
  -moz-flex: 0 0 30.83%;
  flex: 0 0 30.83%;
  align-self: auto;
  box-sizing: border-box;
  position: relative;
  max-width: 30.83%;
}

.fw--gutter.fw--50 > * {
  -moz-flex: 0 0 47.5%;
  flex: 0 0 47.5%;
  align-self: auto;
  box-sizing: border-box;
  position: relative;
  max-width: 47.5%;
}

.fw--gutter.fw--33-67 > *:first-child {
  -moz-flex: 0 0 30.83%;
  flex: 0 0 30.83%;
  align-self: auto;
  box-sizing: border-box;
  position: relative;
  max-width: 30.83%;
}

.fw--gutter.fw--33-67 > *:last-child {
  -moz-flex: 0 0 64.17%;
  flex: 0 0 64.17%;
  align-self: auto;
  box-sizing: border-box;
  position: relative;
  max-width: 64.17%;
}

.fw--gutter.fw--25-75 > *:first-child {
  -moz-flex: 0 0 22.5%;
  flex: 0 0 22.5%;
  align-self: auto;
  box-sizing: border-box;
  position: relative;
  max-width: 22.5%;
}

.fw--gutter.fw--25-75 > *:last-child {
  -moz-flex: 0 0 72.5%;
  flex: 0 0 72.5%;
  align-self: auto;
  box-sizing: border-box;
  position: relative;
  max-width: 72.5%;
}

.fw--nowrap {
  flex-wrap: nowrap;
}

.fw--reverse {
  -moz-flex-direction: row-reverse;
  flex-direction: row-reverse;
}

.fw--itemsCenter {
  -moz-align-items: center;
  -ms-align-items: center;
  align-items: center;
}

.fw--start {
  -moz-justify-content: flex-start;
  justify-content: flex-start;
}

.flex {
  -moz-flex: 1 1 auto;
  flex: 1 1 auto;
  align-self: auto;
  box-sizing: border-box;
  position: relative;
}

.flex.f--100 {
  -moz-flex: 0 0 100%;
  flex: 0 0 100%;
  align-self: auto;
  box-sizing: border-box;
  position: relative;
  max-width: 100%;
  min-width: 100%;
}

.flex.f--75 {
  -moz-flex: 0 0 75%;
  flex: 0 0 75%;
  align-self: auto;
  box-sizing: border-box;
  position: relative;
  max-width: 75%;
  min-width: 75%;
}

.flex.f--75.f--gutter {
  min-width: 72.5%;
  max-width: 72.5%;
}

.flex.f--67 {
  -moz-flex: 0 0 66.67%;
  flex: 0 0 66.67%;
  align-self: auto;
  box-sizing: border-box;
  position: relative;
  max-width: 66.67%;
  min-width: 66.67%;
}

.flex.f--67.f--gutter {
  min-width: 65.42%;
  max-width: 65.42%;
}

.flex.f--50 {
  -moz-flex: 0 0 50%;
  flex: 0 0 50%;
  align-self: auto;
  box-sizing: border-box;
  position: relative;
  max-width: 50%;
  min-width: 50%;
}

.flex.f--50.f--gutter {
  min-width: 47.5%;
  max-width: 47.5%;
}

.flex.f--33 {
  -moz-flex: 0 0 33.33%;
  flex: 0 0 33.33%;
  align-self: auto;
  box-sizing: border-box;
  position: relative;
  max-width: 33.33%;
  min-width: 33.33%;
}

.flex.f--33.f--gutter {
  min-width: 30.83%;
  max-width: 30.83%;
}

.flex.f--25 {
  -moz-flex: 0 0 25%;
  flex: 0 0 25%;
  align-self: auto;
  box-sizing: border-box;
  position: relative;
  max-width: 25%;
  min-width: 25%;
}

.flex.f--25.f--gutter {
  min-width: 22.5%;
  max-width: 22.5%;
}

.gridWrapper {
  width: 100%;
  display: grid;
  gap: 2rem;
  grid-auto-columns: auto;
  grid-auto-rows: auto;
  justify-items: stretch;
  align-items: stretch;
}

.gw--gap0 {
  gap: 0;
}

.gw--gapMin {
  gap: 0.25rem;
}

.gw--columns {
  grid-auto-flow: column;
}

.gw--rows {
  grid-auto-flow: row;
}

.gw--center {
  align-items: center;
  justify-items: center;
}

.gw--auto {
  display: -ms-inline-grid;
  display: inline-grid;
}

.gw--vCenter {
  align-items: center;
}

.gw--hCenter {
  justify-items: center;
}

.gw--100 {
  grid-template-columns: repeat(1, 1fr);
}

.gw--50 {
  grid-template-columns: repeat(2, 1fr);
}

.gw--33 {
  grid-template-columns: repeat(3, 1fr);
}

.gw--25 {
  grid-template-columns: repeat(4, 1fr);
}

.gw--20 {
  grid-template-columns: repeat(5, 1fr);
}

.gw--33-67 {
  grid-template-columns: repeat(3, 1fr);
}

.gw--33-67:not(.gw--reverse) > *:nth-child(2n+0) {
  grid-column: span 2;
}

.gw--33-67.gw--reverse > *:nth-child(2n+1) {
  grid-column: span 2;
}

.gw--25-75 {
  grid-template-columns: repeat(4, 1fr);
}

.gw--25-75:not(.gw--reverse) > *:nth-child(2n+0) {
  grid-column: span 3;
}

.gw--25-75.gw--reverse > *:nth-child(2n+1) {
  grid-column: span 3;
}

.gw--fillHeight {
  grid-auto-flow: rows;
  grid-template-rows: auto 1fr auto;
  gap: 0;
}

.gw--fillHeight > * {
  align-self: center;
}

.gw--fillHeight > *:first-child {
  align-self: start;
}

.gw--fillHeight > *:last-child {
  align-self: end;
}

.gw--fillHeight > .content {
  align-self: center;
  margin: 1rem 0;
}

/*
.gridItem {
  grid-column-end: span 3;
  grid-area: 2 / 1 / span 2 / span 3; // row / column / rowspan / column span
  grid-row: 1 / span 2; // row start / row end
  // grid-area: myArea;
}
*/

/*
==========================================================================
NAVIGATION
==========================================================================
*/

#topBar {
  padding: 1rem 2rem;
  position: fixed;
  width: 100%;
  top: 0;
  left: 0;
  z-index: 50;
  background-color: #FFFFFF;
  border-bottom: 1px solid rgba(63, 63, 130, 0.1);
}

#topBar .logoWrapper.lowRes {
  display: none;
  position: absolute;
  line-height: 1;
  top: 50%;
  left: 1rem;
  /* IE 9 */
  /* Safari */
  transform: translateY(-50%);
  /* Standard syntax */
  perspective: none;
  /*
  Do nothing since we do not want to override any previously set parameters. 
  Don't even set this to inherit, since this may override parameters.
  */
  /*
  Do nothing since we do not want to override any previously set parameters. 
  Don't even set this to inherit, since this may override parameters.
  */
  z-index: 100;
}

#topBar .logoWrapper.lowRes .logo,
#topBar .logoWrapper.lowRes .logo svg {
  height: 2rem;
  width: auto;
}

#topBar .actions {
  text-align: right;
}

#topBar .actions a {
  color: #3F3F82;
  padding-right: 1rem;
  border-radius: 0.5rem;
}

#topBar .actions a .actionIcon {
  width: 1.5rem;
  height: 1.5rem;
  padding: 0.5rem;
  border-radius: 50%;
}

#topBar .actions a .actionIcon path,
#topBar .actions a .actionIcon circle,
#topBar .actions a .actionIcon ellipse,
#topBar .actions a .actionIcon rect,
#topBar .actions a .actionIcon polygon,
#topBar .actions a .actionIcon line,
#topBar .actions a .actionIcon polyline {
  fill: #3F3F82;
}

#topBar .actions a > span {
  vertical-align: middle;
}

#topBar .actions > *:last-child a {
  padding-right: 0;
}

#topBar .actions form {
  display: inline-block;
}

#topBar #notifications {
  position: relative;
  display: inline-block;
}

#topBar #notifications #notificationButton.hasNew .iconWrapper {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  overflow: visible;
}

#topBar #notifications #notificationButton.hasNew .iconWrapper::after {
  content: "";
  display: block;
  width: 0.75em;
  height: 0.75em;
  border-radius: 50%;
  background-color: #FF996B;
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 1;
  border: 2px solid #FFFFFF;
  /* IE 9 */
  /* Safari */
  transform: translate(0, -75%);
  /* Standard syntax */
  perspective: none;
  /*
  Do nothing since we do not want to override any previously set parameters. 
  Don't even set this to inherit, since this may override parameters.
  */
  /*
  Do nothing since we do not want to override any previously set parameters. 
  Don't even set this to inherit, since this may override parameters.
  */
}

#topBar #notifications.expanded #notificationItems {
  visibility: visible;
  opacity: 1;
}

#topBar #notifications.expanded #notificationButton {
  background-color: #F4F6FB;
}

#topBar #notificationItems {
  visibility: hidden;
  opacity: 0;
  position: absolute;
  border: 1px solid rgba(63, 63, 130, 0.1);
  border-radius: 0.5rem;
  top: 100%;
  right: 0;
  width: 25rem;
  background-color: #FFFFFF;
  -o-box-shadow: 0 0.5rem 0.5rem 0 rgba(0, 0, 0, 0.05);
  box-shadow: 0 0.5rem 0.5rem 0 rgba(0, 0, 0, 0.05);
  transition: all 300ms ease-in-out;
  /*
  Do nothing since we do not want to override any previously set parameters. 
  Don't even set this to inherit, since this may override parameters.
  */
  max-height: 80vh;
  overflow: auto;
}

#topBar #notificationItems a {
  padding: 0.5rem 1rem 0.5rem 3rem;
  display: block;
  text-align: left;
  margin: 0;
  border-bottom: 1px solid rgba(63, 63, 130, 0.1);
  position: relative;
  border-radius: 0;
}

#topBar #notificationItems a:hover {
  background-color: #F4F6FB;
}

#topBar #notificationItems a .icon {
  position: absolute;
  top: 50%;
  left: 1.5rem;
  /* IE 9 */
  /* Safari */
  transform: translate(-50%, -50%);
  /* Standard syntax */
  perspective: none;
  /*
  Do nothing since we do not want to override any previously set parameters. 
  Don't even set this to inherit, since this may override parameters.
  */
  /*
  Do nothing since we do not want to override any previously set parameters. 
  Don't even set this to inherit, since this may override parameters.
  */
}

#topBar #notificationItems .viewAll {
  text-align: center;
  background-color: #F4F6FB;
  margin: 0;
  padding-left: 1rem;
  border: none;
}

#topBar #notificationItems .viewAll:hover {
  background-color: #DFE5F4;
}

#topBar #notificationItems .timestamp {
  font-size: 0.8rem;
  display: block;
  color: rgba(63, 63, 130, 0.6);
}

#topBar .i--chevron path,
#topBar .i--chevron circle,
#topBar .i--chevron ellipse,
#topBar .i--chevron rect,
#topBar .i--chevron polygon,
#topBar .i--chevron line,
#topBar .i--chevron polyline {
  fill: rgba(63, 63, 130, 0.6);
}

#navToggle {
  width: 2rem;
  height: 1rem;
  position: fixed;
  top: 1.2rem;
  right: 1rem;
  z-index: 1000;
  transition: all 300ms ease-in-out;
  /*
  Do nothing since we do not want to override any previously set parameters. 
  Don't even set this to inherit, since this may override parameters.
  */
  /* IE 9 */
  /* Safari */
  transform: rotate(0deg);
  /* Standard syntax */
  perspective: none;
  /*
  Do nothing since we do not want to override any previously set parameters. 
  Don't even set this to inherit, since this may override parameters.
  */
  /*
  Do nothing since we do not want to override any previously set parameters. 
  Don't even set this to inherit, since this may override parameters.
  */
  cursor: -moz-pointer;
  cursor: -webkit-pointer;
  cursor: pointer;
  display: none;
}

#navToggle span {
  display: block;
  position: absolute;
  height: 2px;
  width: 100%;
  background: #3F3F82;
  border-radius: 1px;
  opacity: 1;
  left: 50%;
  /* IE 9 */
  /* Safari */
  transform: translateX(-50%) rotate(0deg);
  /* Standard syntax */
  perspective: none;
  /*
  Do nothing since we do not want to override any previously set parameters. 
  Don't even set this to inherit, since this may override parameters.
  */
  /*
  Do nothing since we do not want to override any previously set parameters. 
  Don't even set this to inherit, since this may override parameters.
  */
  transition: all 300ms ease-in-out;
  /*
  Do nothing since we do not want to override any previously set parameters. 
  Don't even set this to inherit, since this may override parameters.
  */
}

#navToggle span:nth-child(1) {
  top: 0;
  margin-top: 1px;
}

#navToggle span:nth-child(2),
#navToggle span:nth-child(3) {
  top: 0.5rem;
}

#navToggle span:nth-child(4) {
  top: 1rem;
  margin-top: -1px;
}

.navExpanded #navToggle span {
  width: 50%;
}

.navExpanded #navToggle span:nth-child(1) {
  top: 0.5rem;
  width: 0%;
  left: 50%;
}

.navExpanded #navToggle span:nth-child(2) {
  /* IE 9 */
  /* Safari */
  transform: translateX(-50%) rotate(45deg);
  /* Standard syntax */
  perspective: none;
  /*
  Do nothing since we do not want to override any previously set parameters. 
  Don't even set this to inherit, since this may override parameters.
  */
  /*
  Do nothing since we do not want to override any previously set parameters. 
  Don't even set this to inherit, since this may override parameters.
  */
}

.navExpanded #navToggle span:nth-child(3) {
  /* IE 9 */
  /* Safari */
  transform: translateX(-50%) rotate(-45deg);
  /* Standard syntax */
  perspective: none;
  /*
  Do nothing since we do not want to override any previously set parameters. 
  Don't even set this to inherit, since this may override parameters.
  */
  /*
  Do nothing since we do not want to override any previously set parameters. 
  Don't even set this to inherit, since this may override parameters.
  */
}

.navExpanded #navToggle span:nth-child(4) {
  top: 0.5rem;
  width: 0%;
  left: 50%;
}

#navMain {
  width: 20rem;
  box-sizing: border-box;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  overflow-x: visible;
  overflow-y: auto;
  background-color: #F4F6FB;
  border-width: 0 1px 0 0;
  border-style: solid;
  border-color: rgba(63, 63, 130, 0.1);
  padding: 4rem;
  border-radius: 0 2rem 2rem 0;
  transition: all 300ms ease-in-out;
  /*
  Do nothing since we do not want to override any previously set parameters. 
  Don't even set this to inherit, since this may override parameters.
  */
  z-index: 100;
}

#navMain nav {
  padding: 1rem 0;
}

#navMain .logo,
#navMain .logo > svg {
  height: 3rem;
  width: auto;
}

#navMain .navItem.lowRes {
  display: none;
}

#navMain .navItem a {
  display: block;
  padding: 1rem 0;
  font-weight: 300;
  color: #3F3F82;
  white-space: nowrap;
  position: relative;
}

#navMain .navItem a .icon {
  width: 2rem;
  height: 2rem;
  margin-right: 1rem;
  /* IE 9 */
  /* Safari */
  transform: scale(0.85, 0.85);
  /* Standard syntax */
  perspective: none;
  /*
  Do nothing since we do not want to override any previously set parameters. 
  Don't even set this to inherit, since this may override parameters.
  */
  /*
  Do nothing since we do not want to override any previously set parameters. 
  Don't even set this to inherit, since this may override parameters.
  */
  transition: all 300ms ease-in-out;
  /*
  Do nothing since we do not want to override any previously set parameters. 
  Don't even set this to inherit, since this may override parameters.
  */
}

#navMain .navItem a .icon path,
#navMain .navItem a .icon circle,
#navMain .navItem a .icon ellipse,
#navMain .navItem a .icon rect,
#navMain .navItem a .icon polygon,
#navMain .navItem a .icon line,
#navMain .navItem a .icon polyline {
  fill: rgba(63, 63, 130, 0.6);
}

#navMain .navItem a:hover .icon {
  /* IE 9 */
  /* Safari */
  transform: scale(1, 1);
  /* Standard syntax */
  perspective: none;
  /*
  Do nothing since we do not want to override any previously set parameters. 
  Don't even set this to inherit, since this may override parameters.
  */
  /*
  Do nothing since we do not want to override any previously set parameters. 
  Don't even set this to inherit, since this may override parameters.
  */
}

#navMain .navItem a:hover .icon path,
#navMain .navItem a:hover .icon circle,
#navMain .navItem a:hover .icon ellipse,
#navMain .navItem a:hover .icon rect,
#navMain .navItem a:hover .icon polygon,
#navMain .navItem a:hover .icon line,
#navMain .navItem a:hover .icon polyline {
  fill: #907FFF;
}

#navMain .navItem a.current {
  opacity: 1;
}

#navMain .navItem a.current .icon {
  /* IE 9 */
  /* Safari */
  transform: scale(1, 1);
  /* Standard syntax */
  perspective: none;
  /*
  Do nothing since we do not want to override any previously set parameters. 
  Don't even set this to inherit, since this may override parameters.
  */
  /*
  Do nothing since we do not want to override any previously set parameters. 
  Don't even set this to inherit, since this may override parameters.
  */
}

#navMain .navItem a.current .icon path,
#navMain .navItem a.current .icon circle,
#navMain .navItem a.current .icon ellipse,
#navMain .navItem a.current .icon rect,
#navMain .navItem a.current .icon polygon,
#navMain .navItem a.current .icon line,
#navMain .navItem a.current .icon polyline {
  fill: #907FFF;
}

.sidebar nav a {
  display: block;
  margin: 2rem 0;
  padding-right: 3rem;
  white-space: nowrap;
}

.sidebar nav a:first-child {
  margin-top: 0;
}

.sidebar nav a:last-child {
  margin-bottom: 0;
}

.sidebar nav a .icon {
  margin-right: 1rem;
}

.sidebar nav a .icon path,
.sidebar nav a .icon circle,
.sidebar nav a .icon ellipse,
.sidebar nav a .icon rect,
.sidebar nav a .icon polygon,
.sidebar nav a .icon line,
.sidebar nav a .icon polyline {
  fill: rgba(63, 63, 130, 0.6);
}

.sidebar nav a .count {
  position: absolute;
  right: 0;
  color: rgba(63, 63, 130, 0.6);
}

.sidebar nav a .count::before {
  content: "(";
}

.sidebar nav a .count::after {
  content: ")";
}

.sidebar nav a.current {
  opacity: 1;
}

.sidebar nav a.current .icon path,
.sidebar nav a.current .icon circle,
.sidebar nav a.current .icon ellipse,
.sidebar nav a.current .icon rect,
.sidebar nav a.current .icon polygon,
.sidebar nav a.current .icon line,
.sidebar nav a.current .icon polyline {
  fill: #907FFF;
}

/*
==========================================================================
CONTENT SPECIFIC
==========================================================================
*/

#acceptTermsPage {
  font-size: 0.8rem;
}

#acceptTermsPage .terms {
  max-height: 50vh;
  overflow: auto;
}

.authPage {
  background-color: #F4F6FB;
}

.authPage main {
  margin: 0;
}

.authPage form {
  max-width: none;
}

.authPage .contentWrapper > .content {
  max-width: 45rem;
  min-width: 320px;
  box-sizing: border-box;
}

.authPage .logo > svg {
  height: 3rem;
  width: auto;
}

#loginPage {
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  background-image: url("/img/graphics/bg-underztand-gradient-02.jpg?v=0.02");
}

#dashboard .dashboardSegment {
  margin: 2rem 0;
}

#dashboard .dashboardSegment:first-child {
  margin-top: 0;
}

#dashboard .dashboardSegment:last-child {
  margin-bottom: 0;
}

#notificationsPage .notificationList .notification {
  margin-bottom: 0.5rem;
}

#notificationsPage .notificationList .notification.unread {
  border-left: 0.5rem solid #907FFF;
}

#notificationsPage .notificationList .notification .body .timestamp {
  display: block;
  color: rgba(63, 63, 130, 0.6);
}

#notificationsPage .notificationList .notification .actions {
  text-align: right;
}

.articleImage {
  padding: 25%;
  width: 100%;
  display: block;
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  box-sizing: border-box;
  margin: 2rem 0;
  border-radius: 1rem;
}

.articleMeta > * {
  color: rgba(63, 63, 130, 0.6);
  display: inline-block;
  vertical-align: middle;
  margin-right: 2rem;
}

.articleMeta > * .icon path,
.articleMeta > * .icon circle,
.articleMeta > * .icon ellipse,
.articleMeta > * .icon rect,
.articleMeta > * .icon polygon,
.articleMeta > * .icon line,
.articleMeta > * .icon polyline {
  fill: rgba(63, 63, 130, 0.6);
}

.articleBody h1,
.articleBody h2 {
  font-size: 1.75rem;
}

.articleBody h3,
.articleBody h4 {
  font-size: 1.25rem;
}

.articleFooter {
  margin-top: 4rem;
}

.articleFooter > * {
  margin-bottom: 4rem;
}

.articleFooter > *:last-child {
  margin-bottom: 0;
}

.articleAuthor .links {
  font-size: 0.8rem;
}

.articleAuthor .links a {
  margin-right: 1rem;
  opacity: 0.6;
}

.articleAuthor .links a:hover {
  opacity: 1;
}

.articleAuthor .links a:last-child {
  margin-right: 0;
}

#messageConversation {
  margin: 2rem 0;
}

#messageConversation .messageItem {
  display: block;
  margin-bottom: 1rem;
}

#messageConversation .messageItem .content {
  width: auto;
  max-width: 75%;
  display: inline-block;
  padding: 1rem 2rem;
  background-color: #F4F6FB;
  -o-box-shadow: 0 0.5rem 0.5rem 0 rgba(0, 0, 0, 0.05);
  box-shadow: 0 0.5rem 0.5rem 0 rgba(0, 0, 0, 0.05);
}

#messageConversation .messageItem .content .text {
  display: block;
  text-align: left;
}

#messageConversation .messageItem .meta {
  margin-top: 1rem;
  font-size: 0.8rem;
  color: rgba(63, 63, 130, 0.6);
  display: block;
}

#messageConversation .messageItem.self {
  text-align: right;
}

#messageConversation .messageItem.self .content {
  background-color: #3F3F82;
  color: #F4F6FB;
  border-radius: 2rem 2rem 0 2rem;
}

#messageConversation .messageItem.self .meta {
  right: 0;
}

#messageConversation .messageItem.other {
  text-align: left;
}

#messageConversation .messageItem.other .content {
  border-radius: 2rem 2rem 2rem 0;
  border: 1px solid rgba(63, 63, 130, 0.05);
}

#messageConversation .messageItem.other .meta {
  left: 0;
}

#messageConversation .messageItem.statusUpdate .content {
  background-color: #FFC16A;
  color: #3F3F82;
}

#messageRespond {
  margin-top: 4rem;
  padding-top: 2rem;
  border-top: 1px solid rgba(63, 63, 130, 0.1);
}

/*
==========================================================================
GRAPHICS / UI / UX
==========================================================================
*/

.hidden {
  display: none;
}

img {
  width: 100%;
  height: auto;
}

.logo {
  display: inline-block;
  height: auto;
  width: auto;
}

.avatar {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  width: 2.5rem;
  height: 2.5rem;
  box-sizing: border-box;
  border-radius: 50%;
  background-color: #FFFFFF;
  border: 0.15rem solid #FFFFFF;
  -o-box-shadow: 0 0.5rem 0.5rem 0 rgba(0, 0, 0, 0.05);
  box-shadow: 0 0.5rem 0.5rem 0 rgba(0, 0, 0, 0.05);
}

.avatar .img,
.avatar .icon {
  position: absolute;
}

.avatar .img {
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

.avatar .icon {
  width: 1.5em;
  height: 1.5em;
  top: 50%;
  left: 50%;
  /* IE 9 */
  /* Safari */
  transform: translate(-50%, -50%);
  /* Standard syntax */
  perspective: none;
  /*
  Do nothing since we do not want to override any previously set parameters. 
  Don't even set this to inherit, since this may override parameters.
  */
  /*
  Do nothing since we do not want to override any previously set parameters. 
  Don't even set this to inherit, since this may override parameters.
  */
}

.avatar .icon path,
.avatar .icon circle,
.avatar .icon ellipse,
.avatar .icon rect,
.avatar .icon polygon,
.avatar .icon line,
.avatar .icon polyline {
  fill: rgba(63, 63, 130, 0.6);
}

.helperIcon {
  display: inline-block;
  vertical-align: middle;
  line-height: 0;
}

.helperIcon .icon {
  width: 1em;
  height: 1em;
}

.helperIcon span {
  display: inline-block;
  vertical-align: middle;
}

.helperIcon .content {
  display: none;
}

#helperIconBox {
  position: fixed;
  visibility: hidden;
  opacity: 0;
  display: inline-block;
  z-index: 100;
  max-width: 20rem;
  font-size: 0.8rem;
  box-sizing: border-box;
  padding: 0.5rem 1rem;
  background-color: #FFFFFF;
  border: 1px solid rgba(63, 63, 130, 0.1);
  font-weight: 300;
  border-radius: 0.5rem;
  -o-box-shadow: 0 0.5rem 0.5rem 0 rgba(0, 0, 0, 0.05);
  box-shadow: 0 0.5rem 0.5rem 0 rgba(0, 0, 0, 0.05);
  transition: all 300ms ease-in-out;
  /*
  Do nothing since we do not want to override any previously set parameters. 
  Don't even set this to inherit, since this may override parameters.
  */
}

#helperIconBox .content {
  display: block;
  box-sizing: border-box;
}

#helperIconBox.visible {
  opacity: 1;
  visibility: visible;
}

#onboarding {
  position: absolute;
  visibility: hidden;
  opacity: 0;
  display: inline-block;
  z-index: 100;
  width: 96%;
  max-width: 20rem;
  box-sizing: border-box;
  padding: 1rem;
  background-color: #907FFF;
  border-radius: 0.5rem;
  -o-box-shadow: 0 1rem 1rem 0 rgba(0, 0, 0, 0.2);
  box-shadow: 0 1rem 1rem 0 rgba(0, 0, 0, 0.2);
  transition: all 250ms ease-in-out;
  /*
  Do nothing since we do not want to override any previously set parameters. 
  Don't even set this to inherit, since this may override parameters.
  */
  /* IE 9 */
  /* Safari */
  transform: translateY(2rem);
  /* Standard syntax */
  perspective: none;
  /*
  Do nothing since we do not want to override any previously set parameters. 
  Don't even set this to inherit, since this may override parameters.
  */
  /*
  Do nothing since we do not want to override any previously set parameters. 
  Don't even set this to inherit, since this may override parameters.
  */
  color: #F4F6FB;
}

#onboarding .caret {
  content: "";
  display: block;
  position: absolute;
  width: 0;
  height: 0;
  margin-left: -1rem;
  border-left: 1rem solid transparent;
  border-right: 1rem solid transparent;
  border-top: none;
  border-bottom: 1rem solid #907FFF;
  border-radius: 0.5rem;
  top: 0;
  margin-top: -0.75rem;
  z-index: 0;
}

#onboarding.above .caret {
  border-left: 1rem solid transparent;
  border-right: 1rem solid transparent;
  border-top: 1rem solid #907FFF;
  border-bottom: none;
  top: 100%;
  margin-top: -0.25rem;
}

#onboarding .content {
  text-align: left;
}

#onboarding footer {
  position: relative;
  display: block;
  text-align: right;
  margin-top: 0.5rem;
}

#onboarding .progress {
  position: absolute;
  top: 50%;
  left: 0;
  /* IE 9 */
  /* Safari */
  transform: translateY(-50%);
  /* Standard syntax */
  perspective: none;
  /*
  Do nothing since we do not want to override any previously set parameters. 
  Don't even set this to inherit, since this may override parameters.
  */
  /*
  Do nothing since we do not want to override any previously set parameters. 
  Don't even set this to inherit, since this may override parameters.
  */
  font-size: 0.8rem;
  opacity: 0.75;
}

#onboarding .title {
  display: block;
  font-weight: 700;
}

#onboarding.visible {
  opacity: 1;
  visibility: visible;
  /* IE 9 */
  /* Safari */
  transform: translateY(0);
  /* Standard syntax */
  perspective: none;
  /*
  Do nothing since we do not want to override any previously set parameters. 
  Don't even set this to inherit, since this may override parameters.
  */
  /*
  Do nothing since we do not want to override any previously set parameters. 
  Don't even set this to inherit, since this may override parameters.
  */
}

.icon {
  width: 1.5em;
  height: 1.5em;
  line-height: 1.65;
  display: inline-block;
  vertical-align: middle;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  transition: all 300ms ease-in-out;
  /*
  Do nothing since we do not want to override any previously set parameters. 
  Don't even set this to inherit, since this may override parameters.
  */
  position: relative;
}

.icon path,
.icon circle,
.icon ellipse,
.icon rect,
.icon polygon,
.icon line,
.icon polyline {
  fill: #3F3F82;
}

.icon svg,
.icon .txt {
  text-align: center;
  width: 100%;
  height: auto;
  display: block;
  transition: all 300ms ease-in-out;
  /*
  Do nothing since we do not want to override any previously set parameters. 
  Don't even set this to inherit, since this may override parameters.
  */
}

.icon .txt {
  font-weight: bold;
  line-height: 1.5em;
  font-size: 1.5em;
}

.icon + span {
  display: inline-block;
  vertical-align: middle;
  margin-left: 0.25em;
}

.icon.i--status {
  border-radius: 50%;
  width: 0.5em;
  height: 0.5em;
}

.icon.i--status.i--status--success,
.icon.i--status.i--status--neutral {
  background-color: #DFE5F4;
}

.icon.i--status.i--status--error {
  background-color: #F77777;
}

.icon.i--status.i--status--notice {
  background-color: #FF996B;
}

.icon.i--status.i--status--new {
  background-color: #907FFF;
}

.icon.i--chevron.up,
.icon.i--chevron.desc,
.icon.i--arrow.up,
.icon.i--arrow.desc {
  /* IE 9 */
  /* Safari */
  transform: rotate(-90deg);
  /* Standard syntax */
  perspective: none;
  /*
  Do nothing since we do not want to override any previously set parameters. 
  Don't even set this to inherit, since this may override parameters.
  */
  /*
  Do nothing since we do not want to override any previously set parameters. 
  Don't even set this to inherit, since this may override parameters.
  */
}

.icon.i--chevron.down,
.icon.i--chevron.asc,
.icon.i--arrow.down,
.icon.i--arrow.asc {
  /* IE 9 */
  /* Safari */
  transform: rotate(90deg);
  /* Standard syntax */
  perspective: none;
  /*
  Do nothing since we do not want to override any previously set parameters. 
  Don't even set this to inherit, since this may override parameters.
  */
  /*
  Do nothing since we do not want to override any previously set parameters. 
  Don't even set this to inherit, since this may override parameters.
  */
}

.icon.i--chevron.left,
.icon.i--arrow.left {
  /* IE 9 */
  /* Safari */
  transform: rotate(180deg);
  /* Standard syntax */
  perspective: none;
  /*
  Do nothing since we do not want to override any previously set parameters. 
  Don't even set this to inherit, since this may override parameters.
  */
  /*
  Do nothing since we do not want to override any previously set parameters. 
  Don't even set this to inherit, since this may override parameters.
  */
}

.icon.i--chevron.right,
.icon.i--arrow.right {
  /* IE 9 */
  /* Safari */
  transform: rotate(0deg);
  /* Standard syntax */
  perspective: none;
  /*
  Do nothing since we do not want to override any previously set parameters. 
  Don't even set this to inherit, since this may override parameters.
  */
  /*
  Do nothing since we do not want to override any previously set parameters. 
  Don't even set this to inherit, since this may override parameters.
  */
}

.icon.i--medium {
  width: 1em;
  height: 1em;
}

.icon.i--small {
  width: 0.75em;
  height: 0.75em;
}

.rotate90 {
  /* IE 9 */
  /* Safari */
  transform: rotate(90deg);
  /* Standard syntax */
  perspective: none;
  /*
  Do nothing since we do not want to override any previously set parameters. 
  Don't even set this to inherit, since this may override parameters.
  */
  /*
  Do nothing since we do not want to override any previously set parameters. 
  Don't even set this to inherit, since this may override parameters.
  */
}

.rotate180 {
  /* IE 9 */
  /* Safari */
  transform: rotate(180deg);
  /* Standard syntax */
  perspective: none;
  /*
  Do nothing since we do not want to override any previously set parameters. 
  Don't even set this to inherit, since this may override parameters.
  */
  /*
  Do nothing since we do not want to override any previously set parameters. 
  Don't even set this to inherit, since this may override parameters.
  */
}

.iconFill-positive path,
.iconFill-positive circle,
.iconFill-positive ellipse,
.iconFill-positive rect,
.iconFill-positive polygon,
.iconFill-positive line,
.iconFill-positive polyline {
  fill: #000000;
}

.iconFill-positive .txt {
  color: #000000;
}

.iconFill-offpos path,
.iconFill-offpos circle,
.iconFill-offpos ellipse,
.iconFill-offpos rect,
.iconFill-offpos polygon,
.iconFill-offpos line,
.iconFill-offpos polyline {
  fill: #120F2C;
}

.iconFill-offpos .txt {
  color: #120F2C;
}

.iconFill-offpos2 path,
.iconFill-offpos2 circle,
.iconFill-offpos2 ellipse,
.iconFill-offpos2 rect,
.iconFill-offpos2 polygon,
.iconFill-offpos2 line,
.iconFill-offpos2 polyline {
  fill: #1A1A3B;
}

.iconFill-offpos2 .txt {
  color: #1A1A3B;
}

.iconFill-negative path,
.iconFill-negative circle,
.iconFill-negative ellipse,
.iconFill-negative rect,
.iconFill-negative polygon,
.iconFill-negative line,
.iconFill-negative polyline {
  fill: #FFFFFF;
}

.iconFill-negative .txt {
  color: #FFFFFF;
}

.iconFill-offneg path,
.iconFill-offneg circle,
.iconFill-offneg ellipse,
.iconFill-offneg rect,
.iconFill-offneg polygon,
.iconFill-offneg line,
.iconFill-offneg polyline {
  fill: #F4F6FB;
}

.iconFill-offneg .txt {
  color: #F4F6FB;
}

.iconFill-offneg2 path,
.iconFill-offneg2 circle,
.iconFill-offneg2 ellipse,
.iconFill-offneg2 rect,
.iconFill-offneg2 polygon,
.iconFill-offneg2 line,
.iconFill-offneg2 polyline {
  fill: #DFE5F4;
}

.iconFill-offneg2 .txt {
  color: #DFE5F4;
}

.iconFill-1 path,
.iconFill-1 circle,
.iconFill-1 ellipse,
.iconFill-1 rect,
.iconFill-1 polygon,
.iconFill-1 line,
.iconFill-1 polyline {
  fill: #907FFF;
}

.iconFill-1 .txt {
  color: #907FFF;
}

.iconFill-1d path,
.iconFill-1d circle,
.iconFill-1d ellipse,
.iconFill-1d rect,
.iconFill-1d polygon,
.iconFill-1d line,
.iconFill-1d polyline {
  fill: #5942EB;
}

.iconFill-1d .txt {
  color: #5942EB;
}

.iconFill-2 path,
.iconFill-2 circle,
.iconFill-2 ellipse,
.iconFill-2 rect,
.iconFill-2 polygon,
.iconFill-2 line,
.iconFill-2 polyline {
  fill: #FF996B;
}

.iconFill-2 .txt {
  color: #FF996B;
}

.iconFill-2d path,
.iconFill-2d circle,
.iconFill-2d ellipse,
.iconFill-2d rect,
.iconFill-2d polygon,
.iconFill-2d line,
.iconFill-2d polyline {
  fill: #EB7540;
}

.iconFill-2d .txt {
  color: #EB7540;
}

.iconFill-3 path,
.iconFill-3 circle,
.iconFill-3 ellipse,
.iconFill-3 rect,
.iconFill-3 polygon,
.iconFill-3 line,
.iconFill-3 polyline {
  fill: #6ECFFF;
}

.iconFill-3 .txt {
  color: #6ECFFF;
}

.iconFill-3d path,
.iconFill-3d circle,
.iconFill-3d ellipse,
.iconFill-3d rect,
.iconFill-3d polygon,
.iconFill-3d line,
.iconFill-3d polyline {
  fill: #40B2EB;
}

.iconFill-3d .txt {
  color: #40B2EB;
}

.iconFill-4 path,
.iconFill-4 circle,
.iconFill-4 ellipse,
.iconFill-4 rect,
.iconFill-4 polygon,
.iconFill-4 line,
.iconFill-4 polyline {
  fill: #F79090;
}

.iconFill-4 .txt {
  color: #F79090;
}

.iconFill-4d path,
.iconFill-4d circle,
.iconFill-4d ellipse,
.iconFill-4d rect,
.iconFill-4d polygon,
.iconFill-4d line,
.iconFill-4d polyline {
  fill: #EB7373;
}

.iconFill-4d .txt {
  color: #EB7373;
}

.iconFill-5 path,
.iconFill-5 circle,
.iconFill-5 ellipse,
.iconFill-5 rect,
.iconFill-5 polygon,
.iconFill-5 line,
.iconFill-5 polyline {
  fill: #FFC16A;
}

.iconFill-5 .txt {
  color: #FFC16A;
}

.iconFill-5d path,
.iconFill-5d circle,
.iconFill-5d ellipse,
.iconFill-5d rect,
.iconFill-5d polygon,
.iconFill-5d line,
.iconFill-5d polyline {
  fill: #EBA340;
}

.iconFill-5d .txt {
  color: #EBA340;
}

.iconFill-6 path,
.iconFill-6 circle,
.iconFill-6 ellipse,
.iconFill-6 rect,
.iconFill-6 polygon,
.iconFill-6 line,
.iconFill-6 polyline {
  fill: #6483FC;
}

.iconFill-6 .txt {
  color: #6483FC;
}

.iconFill-6d path,
.iconFill-6d circle,
.iconFill-6d ellipse,
.iconFill-6d rect,
.iconFill-6d polygon,
.iconFill-6d line,
.iconFill-6d polyline {
  fill: #3F61E8;
}

.iconFill-6d .txt {
  color: #3F61E8;
}

.iconFill-7 path,
.iconFill-7 circle,
.iconFill-7 ellipse,
.iconFill-7 rect,
.iconFill-7 polygon,
.iconFill-7 line,
.iconFill-7 polyline {
  fill: #3F3F82;
}

.iconFill-7 .txt {
  color: #3F3F82;
}

.iconFill-7d path,
.iconFill-7d circle,
.iconFill-7d ellipse,
.iconFill-7d rect,
.iconFill-7d polygon,
.iconFill-7d line,
.iconFill-7d polyline {
  fill: #08086D;
}

.iconFill-7d .txt {
  color: #08086D;
}

.iconFill-8 path,
.iconFill-8 circle,
.iconFill-8 ellipse,
.iconFill-8 rect,
.iconFill-8 polygon,
.iconFill-8 line,
.iconFill-8 polyline {
  fill: #84EFAF;
}

.iconFill-8 .txt {
  color: #84EFAF;
}

.iconFill-success path,
.iconFill-success circle,
.iconFill-success ellipse,
.iconFill-success rect,
.iconFill-success polygon,
.iconFill-success line,
.iconFill-success polyline {
  fill: #84EFAF;
}

.iconFill-success .txt {
  color: #84EFAF;
}

.iconFill-error path,
.iconFill-error circle,
.iconFill-error ellipse,
.iconFill-error rect,
.iconFill-error polygon,
.iconFill-error line,
.iconFill-error polyline {
  fill: #F77777;
}

.iconFill-error .txt {
  color: #F77777;
}

.iconFill-site-bg path,
.iconFill-site-bg circle,
.iconFill-site-bg ellipse,
.iconFill-site-bg rect,
.iconFill-site-bg polygon,
.iconFill-site-bg line,
.iconFill-site-bg polyline {
  fill: #F4F6FB;
}

.iconFill-site-bg .txt {
  color: #F4F6FB;
}

.iconFill-notice path,
.iconFill-notice circle,
.iconFill-notice ellipse,
.iconFill-notice rect,
.iconFill-notice polygon,
.iconFill-notice line,
.iconFill-notice polyline {
  fill: #FF996B;
}

.iconFill-notice .txt {
  color: #FF996B;
}

.iconFill-open path,
.iconFill-open circle,
.iconFill-open ellipse,
.iconFill-open rect,
.iconFill-open polygon,
.iconFill-open line,
.iconFill-open polyline {
  fill: #907FFF;
}

.iconFill-open .txt {
  color: #907FFF;
}

.iconFill-resolved path,
.iconFill-resolved circle,
.iconFill-resolved ellipse,
.iconFill-resolved rect,
.iconFill-resolved polygon,
.iconFill-resolved line,
.iconFill-resolved polyline {
  fill: #6ECFFF;
}

.iconFill-resolved .txt {
  color: #6ECFFF;
}

.iconFill-investigating path,
.iconFill-investigating circle,
.iconFill-investigating ellipse,
.iconFill-investigating rect,
.iconFill-investigating polygon,
.iconFill-investigating line,
.iconFill-investigating polyline {
  fill: #FF996B;
}

.iconFill-investigating .txt {
  color: #FF996B;
}

.iconFill-hold path,
.iconFill-hold circle,
.iconFill-hold ellipse,
.iconFill-hold rect,
.iconFill-hold polygon,
.iconFill-hold line,
.iconFill-hold polyline {
  fill: #F79090;
}

.iconFill-hold .txt {
  color: #F79090;
}

.iconFill-closed path,
.iconFill-closed circle,
.iconFill-closed ellipse,
.iconFill-closed rect,
.iconFill-closed polygon,
.iconFill-closed line,
.iconFill-closed polyline {
  fill: #3F3F82;
}

.iconFill-closed .txt {
  color: #3F3F82;
}

.iconFill-worst path,
.iconFill-worst circle,
.iconFill-worst ellipse,
.iconFill-worst rect,
.iconFill-worst polygon,
.iconFill-worst line,
.iconFill-worst polyline {
  fill: #F79090;
}

.iconFill-worst .txt {
  color: #F79090;
}

.iconFill-bad path,
.iconFill-bad circle,
.iconFill-bad ellipse,
.iconFill-bad rect,
.iconFill-bad polygon,
.iconFill-bad line,
.iconFill-bad polyline {
  fill: #FF996B;
}

.iconFill-bad .txt {
  color: #FF996B;
}

.iconFill-neutral path,
.iconFill-neutral circle,
.iconFill-neutral ellipse,
.iconFill-neutral rect,
.iconFill-neutral polygon,
.iconFill-neutral line,
.iconFill-neutral polyline {
  fill: #6483FC;
}

.iconFill-neutral .txt {
  color: #6483FC;
}

.iconFill-good path,
.iconFill-good circle,
.iconFill-good ellipse,
.iconFill-good rect,
.iconFill-good polygon,
.iconFill-good line,
.iconFill-good polyline {
  fill: #6ECFFF;
}

.iconFill-good .txt {
  color: #6ECFFF;
}

.iconFill-best path,
.iconFill-best circle,
.iconFill-best ellipse,
.iconFill-best rect,
.iconFill-best polygon,
.iconFill-best line,
.iconFill-best polyline {
  fill: #84EFAF;
}

.iconFill-best .txt {
  color: #84EFAF;
}

.iconFill-unrated path,
.iconFill-unrated circle,
.iconFill-unrated ellipse,
.iconFill-unrated rect,
.iconFill-unrated polygon,
.iconFill-unrated line,
.iconFill-unrated polyline {
  fill: #3F3F82;
}

.iconFill-unrated .txt {
  color: #3F3F82;
}

.iconFill-t path,
.iconFill-t circle,
.iconFill-t ellipse,
.iconFill-t rect,
.iconFill-t polygon,
.iconFill-t line,
.iconFill-t polyline {
  fill: #3F3F82;
}

.iconFill-t .txt {
  color: #3F3F82;
}

.iconFill-t-strong path,
.iconFill-t-strong circle,
.iconFill-t-strong ellipse,
.iconFill-t-strong rect,
.iconFill-t-strong polygon,
.iconFill-t-strong line,
.iconFill-t-strong polyline {
  fill: #08086D;
}

.iconFill-t-strong .txt {
  color: #08086D;
}

.iconFill-t-light path,
.iconFill-t-light circle,
.iconFill-t-light ellipse,
.iconFill-t-light rect,
.iconFill-t-light polygon,
.iconFill-t-light line,
.iconFill-t-light polyline {
  fill: rgba(63, 63, 130, 0.6);
}

.iconFill-t-light .txt {
  color: rgba(63, 63, 130, 0.6);
}

.iconFill-t-neg path,
.iconFill-t-neg circle,
.iconFill-t-neg ellipse,
.iconFill-t-neg rect,
.iconFill-t-neg polygon,
.iconFill-t-neg line,
.iconFill-t-neg polyline {
  fill: #F4F6FB;
}

.iconFill-t-neg .txt {
  color: #F4F6FB;
}

.iconFill-t-neg-strong path,
.iconFill-t-neg-strong circle,
.iconFill-t-neg-strong ellipse,
.iconFill-t-neg-strong rect,
.iconFill-t-neg-strong polygon,
.iconFill-t-neg-strong line,
.iconFill-t-neg-strong polyline {
  fill: #FFFFFF;
}

.iconFill-t-neg-strong .txt {
  color: #FFFFFF;
}

.iconFill-t-neg-light path,
.iconFill-t-neg-light circle,
.iconFill-t-neg-light ellipse,
.iconFill-t-neg-light rect,
.iconFill-t-neg-light polygon,
.iconFill-t-neg-light line,
.iconFill-t-neg-light polyline {
  fill: rgba(223, 229, 244, 0.7);
}

.iconFill-t-neg-light .txt {
  color: rgba(223, 229, 244, 0.7);
}

.iconFill-border path,
.iconFill-border circle,
.iconFill-border ellipse,
.iconFill-border rect,
.iconFill-border polygon,
.iconFill-border line,
.iconFill-border polyline {
  fill: rgba(63, 63, 130, 0.1);
}

.iconFill-border .txt {
  color: rgba(63, 63, 130, 0.1);
}

.iconFill-border-light path,
.iconFill-border-light circle,
.iconFill-border-light ellipse,
.iconFill-border-light rect,
.iconFill-border-light polygon,
.iconFill-border-light line,
.iconFill-border-light polyline {
  fill: rgba(63, 63, 130, 0.05);
}

.iconFill-border-light .txt {
  color: rgba(63, 63, 130, 0.05);
}

.iconFill-border-strong path,
.iconFill-border-strong circle,
.iconFill-border-strong ellipse,
.iconFill-border-strong rect,
.iconFill-border-strong polygon,
.iconFill-border-strong line,
.iconFill-border-strong polyline {
  fill: rgba(63, 63, 130, 0.3);
}

.iconFill-border-strong .txt {
  color: rgba(63, 63, 130, 0.3);
}

.iconBg-positive {
  background-color: #000000;
}

.iconBg-offpos {
  background-color: #120F2C;
}

.iconBg-offpos2 {
  background-color: #1A1A3B;
}

.iconBg-negative {
  background-color: #FFFFFF;
}

.iconBg-offneg {
  background-color: #F4F6FB;
}

.iconBg-offneg2 {
  background-color: #DFE5F4;
}

.iconBg-1 {
  background-color: #907FFF;
}

.iconBg-1d {
  background-color: #5942EB;
}

.iconBg-2 {
  background-color: #FF996B;
}

.iconBg-2d {
  background-color: #EB7540;
}

.iconBg-3 {
  background-color: #6ECFFF;
}

.iconBg-3d {
  background-color: #40B2EB;
}

.iconBg-4 {
  background-color: #F79090;
}

.iconBg-4d {
  background-color: #EB7373;
}

.iconBg-5 {
  background-color: #FFC16A;
}

.iconBg-5d {
  background-color: #EBA340;
}

.iconBg-6 {
  background-color: #6483FC;
}

.iconBg-6d {
  background-color: #3F61E8;
}

.iconBg-7 {
  background-color: #3F3F82;
}

.iconBg-7d {
  background-color: #08086D;
}

.iconBg-8 {
  background-color: #84EFAF;
}

.iconBg-success {
  background-color: #84EFAF;
}

.iconBg-error {
  background-color: #F77777;
}

.iconBg-site-bg {
  background-color: #F4F6FB;
}

.iconBg-notice {
  background-color: #FF996B;
}

.iconBg-open {
  background-color: #907FFF;
}

.iconBg-resolved {
  background-color: #6ECFFF;
}

.iconBg-investigating {
  background-color: #FF996B;
}

.iconBg-hold {
  background-color: #F79090;
}

.iconBg-closed {
  background-color: #3F3F82;
}

.iconBg-worst {
  background-color: #F79090;
}

.iconBg-bad {
  background-color: #FF996B;
}

.iconBg-neutral {
  background-color: #6483FC;
}

.iconBg-good {
  background-color: #6ECFFF;
}

.iconBg-best {
  background-color: #84EFAF;
}

.iconBg-unrated {
  background-color: #3F3F82;
}

.iconBg-t {
  background-color: #3F3F82;
}

.iconBg-t-strong {
  background-color: #08086D;
}

.iconBg-t-light {
  background-color: rgba(63, 63, 130, 0.6);
}

.iconBg-t-neg {
  background-color: #F4F6FB;
}

.iconBg-t-neg-strong {
  background-color: #FFFFFF;
}

.iconBg-t-neg-light {
  background-color: rgba(223, 229, 244, 0.7);
}

.iconBg-border {
  background-color: rgba(63, 63, 130, 0.1);
}

.iconBg-border-light {
  background-color: rgba(63, 63, 130, 0.05);
}

.iconBg-border-strong {
  background-color: rgba(63, 63, 130, 0.3);
}

#modal {
  visibility: hidden;
  opacity: 0;
  transition: all 300ms ease-in-out;
  /*
  Do nothing since we do not want to override any previously set parameters. 
  Don't even set this to inherit, since this may override parameters.
  */
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.25);
  z-index: 1000;
}

#modal.visible {
  visibility: visible;
  opacity: 1;
}

#modal #modalContent {
  background-color: #F4F6FB;
  position: fixed;
  top: 50%;
  left: 50%;
  /* IE 9 */
  /* Safari */
  transform: translate(-50%, -50%);
  /* Standard syntax */
  perspective: none;
  /*
  Do nothing since we do not want to override any previously set parameters. 
  Don't even set this to inherit, since this may override parameters.
  */
  /*
  Do nothing since we do not want to override any previously set parameters. 
  Don't even set this to inherit, since this may override parameters.
  */
  width: 98%;
  height: 70%;
  max-width: 45rem;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 2rem;
  box-sizing: border-box;
  border: 1px solid rgba(63, 63, 130, 0.1);
  -o-box-shadow: 0 0.5rem 0.5rem 0 rgba(0, 0, 0, 0.05);
  box-shadow: 0 0.5rem 0.5rem 0 rgba(0, 0, 0, 0.05);
  border-radius: 0.5rem;
}

#modal #modalContent .actions {
  text-align: right;
  margin-top: 1rem;
}

#modal #modalContent .actions a {
  display: inline-block;
  margin-right: 1rem;
}

#modal #modalContent .actions a:last-child {
  margin-right: 0;
}

#modal #modalContent.modalAlert {
  width: 25rem;
  height: auto;
  max-width: 98%;
}

.hasInfoBubble .infoBubble {
  display: inline-block;
}

.hasInfoBubble .txt {
  display: inline-block;
  color: #3F3F82;
  font-weight: 300;
  line-height: 1.65;
  font-size: 0.8rem;
  background-color: #F4F6FB;
  padding: 0.5rem;
  box-sizing: border-box;
  border: 1px solid rgba(63, 63, 130, 0.1);
  border-radius: 0.5rem;
  -o-box-shadow: 0 0.5rem 0.5rem 0 rgba(0, 0, 0, 0.05);
  box-shadow: 0 0.5rem 0.5rem 0 rgba(0, 0, 0, 0.05);
  position: absolute;
  width: 100%;
  top: 100%;
  left: 0;
  z-index: 10;
  visibility: hidden;
  opacity: 0;
}

.hasInfoBubble:hover .txt {
  visibility: visible;
  opacity: 1;
}

.notification {
  display: block;
  padding: 0.5rem 1rem;
  margin: 1rem 0;
  border-width: 1px;
  border-style: solid;
  border-color: rgba(63, 63, 130, 0.1);
  border-radius: 0.5rem;
}

.notification:first-child {
  margin-top: 0;
}

.notification .graphic {
  height: 12rem;
  width: auto;
  display: block;
  margin: 0 auto;
}

.notification.success {
  border-color: #84EFAF;
  color: #84EFAF;
  background-color: rgba(132, 239, 175, 0.05);
  font-weight: 700;
}

.notification.error {
  border-color: #F77777;
  color: #F77777;
  background-color: rgba(247, 119, 119, 0.05);
  font-weight: 700;
}

.notification.notice {
  border-color: #FF996B;
  color: #FF996B;
  background-color: rgba(255, 153, 107, 0.05);
  font-weight: 700;
}

.notification.outline {
  background-color: transparent;
}

.notification.empty,
.notification.large {
  text-align: center;
  padding: 2rem;
}

.notification.compact {
  display: grid;
  gap: 1rem;
  grid-auto-columns: auto;
  grid-auto-rows: auto;
  justify-items: stretch;
  align-items: center;
  grid-auto-flow: column;
  padding: 1rem;
}

.notification.compact .iconWrapper {
  text-align: center;
}

.notification.compact .cta {
  text-align: right;
}

.notification.compact .headline {
  margin-bottom: 0.25rem;
}

.notification.compact.hasIcon {
  grid-template-columns: 3rem 1fr auto;
}

.card {
  border-radius: 0.5rem;
  overflow: hidden;
  background-color: #FFFFFF;
  box-sizing: border-box;
  -o-box-shadow: 0 1rem 1rem 0 rgba(0, 0, 0, 0.05);
  box-shadow: 0 1rem 1rem 0 rgba(0, 0, 0, 0.05);
  position: relative;
  transition: all 300ms ease-in-out;
  /*
  Do nothing since we do not want to override any previously set parameters. 
  Don't even set this to inherit, since this may override parameters.
  */
}

.card > .content,
.card > header,
.card > footer {
  padding: 2rem;
  box-sizing: border-box;
  max-width: 100%;
  position: relative;
}

.card.grid > .content {
  padding-top: 0;
  padding-bottom: 0;
}

.card.grid > header {
  padding-bottom: 0;
}

.card.grid > footer {
  padding-top: 0;
}

.card > .title {
  margin: 0;
  font-size: 1.25rem;
}

.card > .image {
  position: relative;
  display: block;
  padding: 35%;
  overflow: hidden;
  box-sizing: border-box;
}

.card > .image .img {
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  transition: all 300ms ease-in-out;
  /*
  Do nothing since we do not want to override any previously set parameters. 
  Don't even set this to inherit, since this may override parameters.
  */
  /* IE 9 */
  /* Safari */
  transform: translate(-50%, -50%) scale(1.1, 1.1);
  /* Standard syntax */
  perspective: none;
  /*
  Do nothing since we do not want to override any previously set parameters. 
  Don't even set this to inherit, since this may override parameters.
  */
  /*
  Do nothing since we do not want to override any previously set parameters. 
  Don't even set this to inherit, since this may override parameters.
  */
}

.card > .image.iconImage {
  border-radius: 0 0 75% 0;
  padding: 20% 35%;
}

.card > .image.iconImage .icon {
  width: 100%;
  height: 100%;
}

.card > .image.iconImage:not(.bgCustom) {
  background-color: rgba(0, 0, 0, 0.05);
}

.card:hover .img {
  /* IE 9 */
  /* Safari */
  transform: translate(-50%, -50%) scale(1, 1);
  /* Standard syntax */
  perspective: none;
  /*
  Do nothing since we do not want to override any previously set parameters. 
  Don't even set this to inherit, since this may override parameters.
  */
  /*
  Do nothing since we do not want to override any previously set parameters. 
  Don't even set this to inherit, since this may override parameters.
  */
}

.card.slim > .content {
  padding: 1rem;
}

.card.transparent {
  background-color: transparent;
  -o-box-shadow: none;
  box-shadow: none;
}

.card.border {
  border: 1px solid rgba(63, 63, 130, 0.1);
}

.card.noStyle {
  background-color: transparent;
  -o-box-shadow: none;
  box-shadow: none;
}

.card.noStyle > * {
  padding: 0;
}

.card.hero {
  width: 100%;
}

.card.hero > .content {
  padding-top: 30%;
}

.card.hero > .content * {
  color: #F4F6FB;
}

.card.hero > .content .headline {
  font-size: 1.25rem;
}

.card.hero > .image {
  position: absolute;
  width: 100%;
  height: 100%;
  padding: 0;
  top: 0;
  left: 0;
  z-index: 0;
}

.card.hero > .image::after {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  bottom: 0;
  left: 0;
  background-image: linear-gradient(0deg, rgba(0,0,0,0.5) 20%, rgba(0,0,0,0) 80%);
}

.card.colored.col1 {
  background-color: #907FFF;
}

.card.colored.col2 {
  background-color: #FF996B;
}

.card.colored.col3 {
  background-color: #6ECFFF;
}

.card.colored.col4 {
  background-color: #F79090;
}

.card.colored.col5 {
  background-color: #FFC16A;
}

.card.colored.col6 {
  background-color: #6483FC;
}

.card.colored.col7 {
  background-color: #3F3F82;
}

.card.colored.col1d {
  background-color: #5942EB;
}

.card.colored.col2d {
  background-color: #EB7540;
}

.card.colored.col3d {
  background-color: #40B2EB;
}

.card.colored.col4d {
  background-color: #EB7373;
}

.card.colored.col5d {
  background-color: #EBA340;
}

.card.colored.col6d {
  background-color: #3F61E8;
}

.card.colored.col7d {
  background-color: #08086D;
}

.card.horizontal > .image {
  position: absolute;
  padding: 0;
  left: 0;
  top: 0;
  width: 33.33%;
  height: 100%;
}

.card.horizontal > .image.iconImage .icon {
  width: 40%;
  height: auto;
  position: absolute;
  top: 50%;
  left: 50%;
  /* IE 9 */
  /* Safari */
  transform: translate(-50%, -50%);
  /* Standard syntax */
  perspective: none;
  /*
  Do nothing since we do not want to override any previously set parameters. 
  Don't even set this to inherit, since this may override parameters.
  */
  /*
  Do nothing since we do not want to override any previously set parameters. 
  Don't even set this to inherit, since this may override parameters.
  */
}

.card.horizontal > .content {
  padding-left: calc(33.33% + 2rem);
}

.card.iconCard > .image,
.card.authorCard > .image {
  position: absolute;
  padding: 0;
  left: 0;
  top: 50%;
  width: 4rem;
  height: 4rem;
  background-color: initial;
  /* IE 9 */
  /* Safari */
  transform: translate(0, -50%);
  /* Standard syntax */
  perspective: none;
  /*
  Do nothing since we do not want to override any previously set parameters. 
  Don't even set this to inherit, since this may override parameters.
  */
  /*
  Do nothing since we do not want to override any previously set parameters. 
  Don't even set this to inherit, since this may override parameters.
  */
  border-radius: 50%;
  -o-box-shadow: 0 0.5rem 0.5rem 0 rgba(0, 0, 0, 0.05);
  box-shadow: 0 0.5rem 0.5rem 0 rgba(0, 0, 0, 0.05);
}

.card.iconCard > .image .icon,
.card.authorCard > .image .icon {
  width: 2rem;
  height: 2rem;
  padding: 1rem;
}

.card.iconCard > .image .icon .txt,
.card.authorCard > .image .icon .txt {
  font-size: 2rem;
  line-height: 2rem;
}

.card.iconCard > .content,
.card.authorCard > .content {
  padding-left: 5rem;
}

.card.iconCard {
  background-color: transparent;
  -o-box-shadow: none;
  box-shadow: none;
}

.card.authorCard {
  background-color: #F4F6FB;
  -o-box-shadow: none;
  box-shadow: none;
}

.card.authorCard .subtitle {
  margin-top: 0;
}

.card.authorCard > .content {
  padding-left: 10rem;
}

.card.authorCard > .image {
  left: 2rem;
  width: 6rem;
  height: 6rem;
  border: 0.25rem solid #FFFFFF;
}

a.card:hover {
  /* IE 9 */
  /* Safari */
  transform: scale(1.03, 1.03);
  /* Standard syntax */
  perspective: none;
  /*
  Do nothing since we do not want to override any previously set parameters. 
  Don't even set this to inherit, since this may override parameters.
  */
  /*
  Do nothing since we do not want to override any previously set parameters. 
  Don't even set this to inherit, since this may override parameters.
  */
}

.bubble {
  display: inline-block;
  padding: 0 1em;
  line-height: 3;
  background-color: #DFE5F4;
  border-radius: 1.5em;
  margin: 2px;
}

.bubble:first-child {
  margin-left: 0;
}

.bubble.b--slim {
  line-height: 2;
  font-size: 0.8rem;
  font-weight: 700;
}

.bubble.b--outline {
  background-color: transparent;
  border: 1px solid rgba(63, 63, 130, 0.1);
}

.pagination {
  margin-top: 2rem;
}

.pagination .meta {
  display: block;
  color: rgba(63, 63, 130, 0.6);
}

.pagination nav {
  margin-top: 1rem;
}

.pagination nav a {
  display: inline-block;
  margin-right: 1rem;
}

.bg-positive {
  background-color: #000000;
}

.bg-offpos {
  background-color: #120F2C;
}

.bg-offpos2 {
  background-color: #1A1A3B;
}

.bg-negative {
  background-color: #FFFFFF;
}

.bg-offneg {
  background-color: #F4F6FB;
}

.bg-offneg2 {
  background-color: #DFE5F4;
}

.bg-1 {
  background-color: #907FFF;
}

.bg-1d {
  background-color: #5942EB;
}

.bg-2 {
  background-color: #FF996B;
}

.bg-2d {
  background-color: #EB7540;
}

.bg-3 {
  background-color: #6ECFFF;
}

.bg-3d {
  background-color: #40B2EB;
}

.bg-4 {
  background-color: #F79090;
}

.bg-4d {
  background-color: #EB7373;
}

.bg-5 {
  background-color: #FFC16A;
}

.bg-5d {
  background-color: #EBA340;
}

.bg-6 {
  background-color: #6483FC;
}

.bg-6d {
  background-color: #3F61E8;
}

.bg-7 {
  background-color: #3F3F82;
}

.bg-7d {
  background-color: #08086D;
}

.bg-8 {
  background-color: #84EFAF;
}

.bg-success {
  background-color: #84EFAF;
}

.bg-error {
  background-color: #F77777;
}

.bg-site-bg {
  background-color: #F4F6FB;
}

.bg-notice {
  background-color: #FF996B;
}

.bg-open {
  background-color: #907FFF;
}

.bg-resolved {
  background-color: #6ECFFF;
}

.bg-investigating {
  background-color: #FF996B;
}

.bg-hold {
  background-color: #F79090;
}

.bg-closed {
  background-color: #3F3F82;
}

.bg-worst {
  background-color: #F79090;
}

.bg-bad {
  background-color: #FF996B;
}

.bg-neutral {
  background-color: #6483FC;
}

.bg-good {
  background-color: #6ECFFF;
}

.bg-best {
  background-color: #84EFAF;
}

.bg-unrated {
  background-color: #3F3F82;
}

.bg-t {
  background-color: #3F3F82;
}

.bg-t-strong {
  background-color: #08086D;
}

.bg-t-light {
  background-color: rgba(63, 63, 130, 0.6);
}

.bg-t-neg {
  background-color: #F4F6FB;
}

.bg-t-neg-strong {
  background-color: #FFFFFF;
}

.bg-t-neg-light {
  background-color: rgba(223, 229, 244, 0.7);
}

.bg-border {
  background-color: rgba(63, 63, 130, 0.1);
}

.bg-border-light {
  background-color: rgba(63, 63, 130, 0.05);
}

.bg-border-strong {
  background-color: rgba(63, 63, 130, 0.3);
}

/*
.tabs2 {
  .tabNavigation {
    display: block;
    text-align: center;
    margin: getProp('whitespace-m') 0;
  }

  nav {
    @include setFlexWrapper( wrap, center, center, center, true);
    width: auto;
    background-color: getColor('offneg');
    @include setBorderRadius(2rem);
    @include setShadow();
    border: 1px solid getColor('border-light');

    a {
      @include setFlexItem(1 1 auto);
      padding: getProp('whitespace') getProp('whitespace-l');
      @include setBorderRadius(2rem);

      &.active {
        background-color: getColor('negative');
        color: getColor('1');
        position: relative;
        @include setShadow();
      }
    }
  }

  .tabItem {
    visibility: hidden;
    height: 0;
    overflow: hidden;
    @include setTransitions();
    opacity: 0;

    &.active {
      visibility: visible;
      overflow: visible;
      height: auto;
      opacity: 1;
    }
  }
}
*/

.tabs .tabNavigation {
  display: block;
  text-align: left;
  margin: 2rem 0;
  border-bottom: 1px solid rgba(63, 63, 130, 0.1);
}

.tabs nav {
  /* OLD - iOS 6-, Safari 3.1-6 */
  /* OLD - Firefox 19- (buggy but mostly works) */
  /* TWEENER - IE 10 */
  /* NEW - Chrome */
  display: flex;
  /* OLD - iOS 6-, Safari 3.1-6 */
  display: inline-flex;
  flex-wrap: wrap;
  -moz-align-items: center;
  -ms-align-items: center;
  align-items: center;
  justify-content: center;
  -webkit-justify-content: center;
  -moz-justify-content: center;
  -ms-align-content: center;
  align-content: center;
  overflow: visible;
  position: relative;
  box-sizing: border-box;
  width: 100%;
  width: auto;
}

.tabs nav a {
  -moz-flex: 1 1 auto;
  flex: 1 1 auto;
  align-self: auto;
  box-sizing: border-box;
  position: relative;
  padding: 1rem 3em;
  border-width: 0 0 2px 0;
  border-style: solid;
  border-color: transparent;
  font-weight: 700;
}

.tabs nav a .icon {
  margin-right: 0.5em;
}

.tabs nav a.active {
  color: #907FFF;
  position: relative;
  border-color: #907FFF;
}

.tabs nav a.active .icon path,
.tabs nav a.active .icon circle,
.tabs nav a.active .icon ellipse,
.tabs nav a.active .icon rect,
.tabs nav a.active .icon polygon,
.tabs nav a.active .icon line,
.tabs nav a.active .icon polyline {
  fill: #907FFF;
}

.tabs .tabItem {
  visibility: hidden;
  height: 0;
  overflow: hidden;
  transition: all 300ms ease-in-out;
  /*
  Do nothing since we do not want to override any previously set parameters. 
  Don't even set this to inherit, since this may override parameters.
  */
  opacity: 0;
}

.tabs .tabItem.active {
  visibility: visible;
  overflow: visible;
  height: auto;
  opacity: 1;
}

/*
==========================================================================
GRAPHS AND DATA
==========================================================================
*/

.chartStackContainer {
  position: relative;
  display: block;
  box-sizing: border-box;
}

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

.chartData .chartWrapper {
  position: relative;
  width: 100%;
}

.chartData .chart {
  max-width: 100%;
}

.chartData .value {
  font-size: 1.5rem;
  font-weight: 700;
  white-space: nowrap;
}

.chartData .unit {
  font-size: 0.8rem;
  margin-left: -0.2em;
  vertical-align: super;
}

.chartData .title {
  margin-bottom: 0.5rem;
}

.chartData .subtitle {
  margin-top: 0.5rem;
  line-height: 1;
}

.cd--bar .chart {
  min-height: 10rem;
}

.cd--barHorizontal .content {
  /* OLD - iOS 6-, Safari 3.1-6 */
  /* OLD - Firefox 19- (buggy but mostly works) */
  /* TWEENER - IE 10 */
  /* NEW - Chrome */
  display: flex;
  flex-wrap: nowrap;
  -moz-align-items: center;
  -ms-align-items: center;
  align-items: center;
  justify-content: flex-start;
  -webkit-justify-content: flex-start;
  -moz-justify-content: flex-start;
  -ms-align-content: stretch;
  align-content: stretch;
  overflow: visible;
  position: relative;
  box-sizing: border-box;
  width: 100%;
}

.cd--barHorizontal .content > * {
  -moz-flex: 1 1 auto;
  flex: 1 1 auto;
  align-self: auto;
  box-sizing: border-box;
  position: relative;
  position: relative;
}

.cd--barHorizontal .value {
  font-size: 1.5rem;
  font-weight: 700;
  padding-right: 0.5rem;
}

.cd--barHorizontal .chart {
  height: 12px;
  background-color: rgba(223, 229, 244, 0.6);
  border-radius: 1rem;
}

.cd--doughnut {
  text-align: center;
}

.cd--doughnut .content {
  position: relative;
}

.cd--doughnut .value {
  position: absolute;
  top: 50%;
  left: 50%;
  /* IE 9 */
  /* Safari */
  transform: translate(-50%, -50%);
  /* Standard syntax */
  perspective: none;
  /*
  Do nothing since we do not want to override any previously set parameters. 
  Don't even set this to inherit, since this may override parameters.
  */
  /*
  Do nothing since we do not want to override any previously set parameters. 
  Don't even set this to inherit, since this may override parameters.
  */
}

.cd--doughnut.cd--gauge .value {
  top: 90%;
  font-size: 16px;
}

.cd--doughnut.stacked:not(.s--1) {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.cd--doughnut.stacked:not(.s--1) .content {
  margin: 0;
}

.cd--line .subtitle {
  margin-top: 0.5rem;
}

.cd--line .content {
  margin-top: 1rem;
}

.cd--radar .chart {
  min-height: 25rem;
}

.cd--bigData {
  box-sizing: border-box;
}

.cd--bigData.hasIcon {
  padding-right: 3rem;
}

.cd--bigData.hasIcon .icon {
  position: absolute;
  top: 50%;
  right: 0;
  width: 2rem;
  height: 2rem;
  /* IE 9 */
  /* Safari */
  transform: translate(0, -50%);
  /* Standard syntax */
  perspective: none;
  /*
  Do nothing since we do not want to override any previously set parameters. 
  Don't even set this to inherit, since this may override parameters.
  */
  /*
  Do nothing since we do not want to override any previously set parameters. 
  Don't even set this to inherit, since this may override parameters.
  */
}

.cd--slim .content {
  margin: 0;
}

.cd--slim .chartWrapper {
  height: 3rem;
}

.bigData {
  font-weight: 700;
  text-transform: uppercase;
  line-height: 1;
  display: block;
}

.bigData .value {
  font-size: 3rem;
}

.bigData .icon {
  width: 0.5em;
  height: 0.5em;
  padding: 0.25em;
  border: 2px solid #3F3F82;
  border-radius: 50%;
}

.bigData .icon path,
.bigData .icon circle,
.bigData .icon ellipse,
.bigData .icon rect,
.bigData .icon polygon,
.bigData .icon line,
.bigData .icon polyline {
  fill: #3F3F82;
}

.bigData .unit {
  font-size: 0.5em;
}

.bd--small {
  display: inline-block;
  vertical-align: middle;
  font-size: 1.75rem;
}

.bd--small .value {
  font-size: 1.75rem;
}

.bd--small .unit {
  color: rgba(63, 63, 130, 0.6);
}

.increase {
  color: #84EFAF;
}

.increase::before {
  content: "";
  display: inline-block;
  width: 0;
  height: 0;
  border-left: 0.35em solid transparent;
  border-right: 0.35em solid transparent;
  border-bottom: 0.65em solid #84EFAF;
  margin-right: 0.05rem;
  margin-bottom: 0;
}

.increase > span::before {
  display: inline;
}

.increase.inverted {
  color: #F77777;
}

.increase.inverted::before {
  border-bottom-color: #F77777;
}

.nochange {
  color: rgba(63, 63, 130, 0.6);
}

.nochange::before {
  content: "";
  display: inline-block;
  width: 0;
  height: 0;
  border-top: 0.35em solid transparent;
  border-bottom: 0.35em solid transparent;
  border-left: 0.5em solid rgba(63, 63, 130, 0.6);
  margin-bottom: 0;
  margin-right: 0.1em;
}

.nochange > span::before {
  display: inline;
  margin-left: 0.2rem;
}

.decrease {
  color: #F77777;
}

.decrease::before {
  content: "";
  display: inline-block;
  width: 0;
  height: 0;
  border-left: 0.35em solid transparent;
  border-right: 0.35em solid transparent;
  border-top: 0.65em solid #F77777;
  margin-right: 0.05rem;
  margin-bottom: 0;
}

.decrease.inverted {
  color: #84EFAF;
}

.decrease.inverted::before {
  border-top-color: #84EFAF;
}

.legend {
  display: table;
  vertical-align: middle;
  width: 100%;
  margin: 1rem auto;
}

.legend > * {
  display: table-row;
}

.legend > * > * {
  display: table-cell;
}

.legend .legend--1 .label::before {
  background-color: #907FFF;
}

.legend .legend--2 .label::before {
  background-color: #FF996B;
}

.legend .legend--3 .label::before {
  background-color: #6ECFFF;
}

.legend .legend--4 .label::before {
  background-color: #F79090;
}

.legend .legend--5 .label::before {
  background-color: #FFC16A;
}

.legend .legend--6 .label::before {
  background-color: #6483FC;
}

.legend .legend--7 .label::before {
  background-color: #3F3F82;
}

.legend .legendItem > span {
  padding: 0 0.5rem;
}

.legend .legendItem > span:first-child {
  padding-left: 0;
}

.legend .legendItem > span:last-child {
  padding-right: 0;
}

.legend .label {
  font-weight: 700;
  white-space: nowrap;
}

.legend .label::before {
  content: "";
  display: inline-block;
  vertical-align: middle;
  box-sizing: border-box;
  margin-right: 1rem;
  width: 0.5em;
  height: 0.5em;
  border-radius: 50%;
  background-color: #907FFF;
}

.legend .data {
  text-align: right;
}

.legend .d--icon {
  max-width: 2rem;
  width: auto;
}

.legend .d--light {
  color: rgba(63, 63, 130, 0.6);
}

.ratingBar {
  display: block;
  line-height: 0;
  height: 0.5em;
  min-width: 3em;
  border-radius: 0.25em;
  background-color: #F4F6FB;
  position: relative;
}

.ratingBar .track {
  display: block;
  height: 0.5em;
  border-radius: 0.25em;
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  transition: all 300ms ease-in-out;
  /*
  Do nothing since we do not want to override any previously set parameters. 
  Don't even set this to inherit, since this may override parameters.
  */
}

.ratingBar.rb--rating10 .track {
  width: 100%;
  background-color: #84EFAF;
}

.ratingBar.rb--rating5 .track {
  width: 80%;
  background-color: #6ECFFF;
}

.ratingBar.rb--rating0 .track {
  width: 60%;
  background-color: #6483FC;
}

.ratingBar.rb--rating-5 .track {
  width: 40%;
  background-color: #FF996B;
}

.ratingBar.rb--rating-10 .track {
  width: 20%;
  background-color: #F79090;
}

/*
==========================================================================
MODULES
==========================================================================
*/

.repeaterTemplate {
  display: none;
}

.repeaterItem {
  position: relative;
  padding-right: 2rem;
}

.repeaterRemove {
  position: absolute;
  top: 50%;
  /* IE 9 */
  /* Safari */
  transform: translateY(-50%);
  /* Standard syntax */
  perspective: none;
  /*
  Do nothing since we do not want to override any previously set parameters. 
  Don't even set this to inherit, since this may override parameters.
  */
  /*
  Do nothing since we do not want to override any previously set parameters. 
  Don't even set this to inherit, since this may override parameters.
  */
  right: 0;
  text-align: center;
}

.repeaterRemove svg path,
.repeaterRemove svg circle,
.repeaterRemove svg ellipse,
.repeaterRemove svg rect,
.repeaterRemove svg polygon,
.repeaterRemove svg line,
.repeaterRemove svg polyline {
  fill: #F79090;
}

.reorderWrapper .reorderItem {
  transition: all 500ms ease-in-out;
  /*
  Do nothing since we do not want to override any previously set parameters. 
  Don't even set this to inherit, since this may override parameters.
  */
  padding: 2rem;
  border: 1px solid rgba(63, 63, 130, 0.1);
}

.reorderWrapper .reorderItem.reordered {
  background-color: rgba(144, 127, 255, 0.15);
}

.reorderWrapper .reorderLabel {
  font-weight: 700;
  margin-right: 1rem;
}

.reorderWrapper .reorderControl {
  border-radius: 0.5rem;
  padding: 0 0.5em;
  background-color: #FFFFFF;
  border: 1px solid rgba(63, 63, 130, 0.1);
  color: rgba(63, 63, 130, 0.6);
}

/*
==========================================================================
TYPOGRAPHY
==========================================================================
*/

h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
  font-family: Lato, sans-serif;
  font-weight: 700;
  color: #08086D;
  margin-top: 2rem;
  margin-bottom: 2rem;
  line-height: 1;
  display: block;
  position: relative;
}

h1:first-child,
h2:first-child,
h3:first-child,
h4:first-child,
h5:first-child,
h6:first-child,
.h1:first-child,
.h2:first-child,
.h3:first-child,
.h4:first-child,
.h5:first-child,
.h6:first-child {
  margin-top: 0;
}

h1:last-child,
h2:last-child,
h3:last-child,
h4:last-child,
h5:last-child,
h6:last-child,
.h1:last-child,
.h2:last-child,
.h3:last-child,
.h4:last-child,
.h5:last-child,
.h6:last-child {
  margin-bottom: 0;
}

h1 .subtitle,
h2 .subtitle,
h3 .subtitle,
h4 .subtitle,
h5 .subtitle,
h6 .subtitle,
.h1 .subtitle,
.h2 .subtitle,
.h3 .subtitle,
.h4 .subtitle,
.h5 .subtitle,
.h6 .subtitle {
  text-transform: none;
  font-size: 1rem;
  margin-top: 1rem;
  line-height: 1.65;
}

h1.border,
h2.border,
h3.border,
h4.border,
h5.border,
h6.border,
.h1.border,
.h2.border,
.h3.border,
.h4.border,
.h5.border,
.h6.border {
  border-bottom: 1px solid rgba(63, 63, 130, 0.3);
  padding-bottom: 0.5em;
}

h1 > span,
h2 > span,
h3 > span,
h4 > span,
h5 > span,
h6 > span,
.h1 > span,
.h2 > span,
.h3 > span,
.h4 > span,
.h5 > span,
.h6 > span {
  vertical-align: middle;
}

h1 .helperIcon,
h2 .helperIcon,
h3 .helperIcon,
h4 .helperIcon,
h5 .helperIcon,
h6 .helperIcon,
.h1 .helperIcon,
.h2 .helperIcon,
.h3 .helperIcon,
.h4 .helperIcon,
.h5 .helperIcon,
.h6 .helperIcon {
  font-size: 0.8em;
}

h1,
.h1 {
  font-size: 2.25rem;
}

h1 .subtitle,
.h1 .subtitle {
  font-size: 1.25rem;
}

h2,
.h2 {
  font-size: 1.75rem;
}

h3,
.h3 {
  font-size: 1.25rem;
  margin-bottom: 1rem;
}

h3 .subtitle,
.h3 .subtitle {
  margin-top: 0.5rem;
}

h4,
.h4 {
  font-size: 1rem;
  margin-bottom: 1rem;
  margin-top: 1rem;
}

h4 .subtitle,
.h4 .subtitle {
  margin-top: 0.5rem;
}

h5,
.h5 {
  text-transform: uppercase;
  font-size: 0.8rem;
  margin-bottom: 1rem;
  margin-top: 1rem;
  color: #3F3F82;
}

h5 .subtitle,
.h5 .subtitle {
  margin-top: 0.5rem;
  font-size: 1em;
}

h6,
.h6 {
  font-size: 0.8rem;
  font-weight: bold;
  margin: 0;
}

.subtitle {
  color: rgba(63, 63, 130, 0.6);
  display: block;
  font-weight: 300;
}

.text-positive {
  color: #000000;
}

.text-offpos {
  color: #120F2C;
}

.text-offpos2 {
  color: #1A1A3B;
}

.text-negative {
  color: #FFFFFF;
}

.text-offneg {
  color: #F4F6FB;
}

.text-offneg2 {
  color: #DFE5F4;
}

.text-1 {
  color: #907FFF;
}

.text-1d {
  color: #5942EB;
}

.text-2 {
  color: #FF996B;
}

.text-2d {
  color: #EB7540;
}

.text-3 {
  color: #6ECFFF;
}

.text-3d {
  color: #40B2EB;
}

.text-4 {
  color: #F79090;
}

.text-4d {
  color: #EB7373;
}

.text-5 {
  color: #FFC16A;
}

.text-5d {
  color: #EBA340;
}

.text-6 {
  color: #6483FC;
}

.text-6d {
  color: #3F61E8;
}

.text-7 {
  color: #3F3F82;
}

.text-7d {
  color: #08086D;
}

.text-8 {
  color: #84EFAF;
}

.text-success {
  color: #84EFAF;
}

.text-error {
  color: #F77777;
}

.text-site-bg {
  color: #F4F6FB;
}

.text-notice {
  color: #FF996B;
}

.text-open {
  color: #907FFF;
}

.text-resolved {
  color: #6ECFFF;
}

.text-investigating {
  color: #FF996B;
}

.text-hold {
  color: #F79090;
}

.text-closed {
  color: #3F3F82;
}

.text-worst {
  color: #F79090;
}

.text-bad {
  color: #FF996B;
}

.text-neutral {
  color: #6483FC;
}

.text-good {
  color: #6ECFFF;
}

.text-best {
  color: #84EFAF;
}

.text-unrated {
  color: #3F3F82;
}

.text-t {
  color: #3F3F82;
}

.text-t-strong {
  color: #08086D;
}

.text-t-light {
  color: rgba(63, 63, 130, 0.6);
}

.text-t-neg {
  color: #F4F6FB;
}

.text-t-neg-strong {
  color: #FFFFFF;
}

.text-t-neg-light {
  color: rgba(223, 229, 244, 0.7);
}

.text-border {
  color: rgba(63, 63, 130, 0.1);
}

.text-border-light {
  color: rgba(63, 63, 130, 0.05);
}

.text-border-strong {
  color: rgba(63, 63, 130, 0.3);
}

.textInverted {
  color: #F4F6FB;
}

.textInverted .subtitle,
.textInverted .unit,
.textInverted .meta {
  color: rgba(223, 229, 244, 0.7);
}

.textInverted .title,
.textInverted .headline {
  color: #FFFFFF;
}

.textInverted .icon path,
.textInverted .icon circle,
.textInverted .icon ellipse,
.textInverted .icon rect,
.textInverted .icon polygon,
.textInverted .icon line,
.textInverted .icon polyline {
  fill: #F4F6FB;
}

.textInverted p a,
.textInverted span a,
.textInverted table a {
  color: #F4F6FB;
}

.textInverted.ti--strong {
  color: #FFFFFF;
}

.textInverted.ti--strong .subtitle,
.textInverted.ti--strong .unit {
  color: #F4F6FB;
}

.textInverted.ti--strong .icon path,
.textInverted.ti--strong .icon circle,
.textInverted.ti--strong .icon ellipse,
.textInverted.ti--strong .icon rect,
.textInverted.ti--strong .icon polygon,
.textInverted.ti--strong .icon line,
.textInverted.ti--strong .icon polyline {
  fill: #FFFFFF;
}

b,
.textBold {
  font-weight: 700;
}

i,
.textItalic {
  font-style: italic;
}

.textNormal {
  font-weight: 300;
}

em,
.em {
  font-style: italic;
  color: rgba(63, 63, 130, 0.6);
  font-size: 1.25rem;
}

hr {
  border-width: 0 0 1px 0;
  border-color: rgba(63, 63, 130, 0.1);
  border-style: solid;
  margin: 2rem auto;
}

hr:first-child {
  margin-top: 0;
}

hr:last-child {
  margin-bottom: 0;
}

hr.hr--negative {
  border-color: rgba(223, 229, 244, 0.7);
}

hr.hr--strong {
  border-bottom-width: 2px;
}

em {
  font-weight: 300;
  font-style: italic;
}

.fineprint {
  font-size: 0.8rem;
  font-style: italic;
  font-weight: 300;
}

.meta {
  font-size: 0.8rem;
  color: rgba(63, 63, 130, 0.6);
}

p:first-child {
  margin-top: 0;
}

p:last-child {
  margin-bottom: 0;
}

.textRight {
  text-align: right;
}

.textCenter {
  text-align: center;
}

.textLeft {
  text-align: left;
}

.textSmall {
  font-size: 0.8rem;
}

.textRegular {
  font-size: 16px;
}

a {
  font-weight: 300;
  text-decoration: none;
  transition: all 300ms ease-in-out;
  /*
  Do nothing since we do not want to override any previously set parameters. 
  Don't even set this to inherit, since this may override parameters.
  */
  display: inline-block;
  color: #3F3F82;
  box-sizing: border-box;
}

p a,
span a,
table a {
  color: #907FFF;
}

p a:hover,
span a:hover,
table a:hover {
  color: #7e6bff;
}

.btn,
.btnSubmit,
button {
  display: inline-block;
  padding: 0.8rem 2rem;
  color: #FFFFFF;
  background-color: #907FFF;
  border-radius: 2rem;
  border: 1px solid #907FFF;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.65;
  white-space: nowrap;
  transition: all 300ms ease-in-out;
  /*
  Do nothing since we do not want to override any previously set parameters. 
  Don't even set this to inherit, since this may override parameters.
  */
  vertical-align: middle;
  position: relative;
  box-sizing: border-box;
}

.btn:hover,
.btnSubmit:hover,
button:hover {
  background-color: #7e6bff;
  border-color: #7e6bff;
  color: #FFFFFF;
}

.btn.loading,
.btnSubmit.loading,
button.loading {
  opacity: 0.6;
}

.btn.btn--slim,
.btnSubmit.btn--slim,
button.btn--slim {
  font-size: 0.8rem;
  padding: 0.5em 1.5em;
}

.btn.btn--fullWidth,
.btnSubmit.btn--fullWidth,
button.btn--fullWidth {
  display: block;
}

.btn.btn--outline,
.btnSubmit.btn--outline,
button.btn--outline {
  background-color: transparent;
  color: #907FFF;
}

.btn.btn--outline:hover,
.btnSubmit.btn--outline:hover,
button.btn--outline:hover {
  background-color: transparent;
  color: #7e6bff;
  border-color: #7e6bff;
}

.btn.btn--transparent,
.btnSubmit.btn--transparent,
button.btn--transparent {
  background-color: transparent;
  border-color: transparent;
  color: inherit;
}

.btn.btn--transparent:hover,
.btnSubmit.btn--transparent:hover,
button.btn--transparent:hover {
  background-color: #F4F6FB;
}

.btn.btn--icon,
.btnSubmit.btn--icon,
button.btn--icon {
  width: 2em;
  height: 2em;
  padding: 0;
  border-radius: 0.5rem;
}

.btn.btn--icon .icon,
.btnSubmit.btn--icon .icon,
button.btn--icon .icon {
  position: absolute;
  top: 50%;
  left: 50%;
  /* IE 9 */
  /* Safari */
  transform: translate(-50%, -50%);
  /* Standard syntax */
  perspective: none;
  /*
  Do nothing since we do not want to override any previously set parameters. 
  Don't even set this to inherit, since this may override parameters.
  */
  /*
  Do nothing since we do not want to override any previously set parameters. 
  Don't even set this to inherit, since this may override parameters.
  */
}

.btn span,
.btnSubmit span,
button span {
  display: inline-block;
  vertical-align: middle;
}

.btn.btn--positive,
.btnSubmit.btn--positive,
button.btn--positive {
  background-color: #000000;
  border-color: #000000;
  color: #FFFFFF;
}

.btn.btn--positive:hover,
.btnSubmit.btn--positive:hover,
button.btn--positive:hover {
  background-color: black;
  border-color: black;
}

.btn.btn--positive.btn--outline,
.btnSubmit.btn--positive.btn--outline,
button.btn--positive.btn--outline {
  background-color: transparent;
  color: #000000;
}

.btn.btn--positive.btn--outline:hover,
.btnSubmit.btn--positive.btn--outline:hover,
button.btn--positive.btn--outline:hover {
  background-color: transparent;
  color: black;
  border-color: black;
}

.btn.btn--offpos,
.btnSubmit.btn--offpos,
button.btn--offpos {
  background-color: #120F2C;
  border-color: #120F2C;
  color: #FFFFFF;
}

.btn.btn--offpos:hover,
.btnSubmit.btn--offpos:hover,
button.btn--offpos:hover {
  background-color: #0c0a1d;
  border-color: #0c0a1d;
}

.btn.btn--offpos.btn--outline,
.btnSubmit.btn--offpos.btn--outline,
button.btn--offpos.btn--outline {
  background-color: transparent;
  color: #120F2C;
}

.btn.btn--offpos.btn--outline:hover,
.btnSubmit.btn--offpos.btn--outline:hover,
button.btn--offpos.btn--outline:hover {
  background-color: transparent;
  color: #0c0a1d;
  border-color: #0c0a1d;
}

.btn.btn--offpos2,
.btnSubmit.btn--offpos2,
button.btn--offpos2 {
  background-color: #1A1A3B;
  border-color: #1A1A3B;
  color: #FFFFFF;
}

.btn.btn--offpos2:hover,
.btnSubmit.btn--offpos2:hover,
button.btn--offpos2:hover {
  background-color: #14142d;
  border-color: #14142d;
}

.btn.btn--offpos2.btn--outline,
.btnSubmit.btn--offpos2.btn--outline,
button.btn--offpos2.btn--outline {
  background-color: transparent;
  color: #1A1A3B;
}

.btn.btn--offpos2.btn--outline:hover,
.btnSubmit.btn--offpos2.btn--outline:hover,
button.btn--offpos2.btn--outline:hover {
  background-color: transparent;
  color: #14142d;
  border-color: #14142d;
}

.btn.btn--negative,
.btnSubmit.btn--negative,
button.btn--negative {
  background-color: #FFFFFF;
  border-color: #FFFFFF;
  color: #FFFFFF;
}

.btn.btn--negative:hover,
.btnSubmit.btn--negative:hover,
button.btn--negative:hover {
  background-color: whitesmoke;
  border-color: whitesmoke;
}

.btn.btn--negative.btn--outline,
.btnSubmit.btn--negative.btn--outline,
button.btn--negative.btn--outline {
  background-color: transparent;
  color: #FFFFFF;
}

.btn.btn--negative.btn--outline:hover,
.btnSubmit.btn--negative.btn--outline:hover,
button.btn--negative.btn--outline:hover {
  background-color: transparent;
  color: whitesmoke;
  border-color: whitesmoke;
}

.btn.btn--offneg,
.btnSubmit.btn--offneg,
button.btn--offneg {
  background-color: #F4F6FB;
  border-color: #F4F6FB;
  color: #FFFFFF;
}

.btn.btn--offneg:hover,
.btnSubmit.btn--offneg:hover,
button.btn--offneg:hover {
  background-color: #e5eaf6;
  border-color: #e5eaf6;
}

.btn.btn--offneg.btn--outline,
.btnSubmit.btn--offneg.btn--outline,
button.btn--offneg.btn--outline {
  background-color: transparent;
  color: #F4F6FB;
}

.btn.btn--offneg.btn--outline:hover,
.btnSubmit.btn--offneg.btn--outline:hover,
button.btn--offneg.btn--outline:hover {
  background-color: transparent;
  color: #e5eaf6;
  border-color: #e5eaf6;
}

.btn.btn--offneg2,
.btnSubmit.btn--offneg2,
button.btn--offneg2 {
  background-color: #DFE5F4;
  border-color: #DFE5F4;
  color: #FFFFFF;
}

.btn.btn--offneg2:hover,
.btnSubmit.btn--offneg2:hover,
button.btn--offneg2:hover {
  background-color: #d0d9ef;
  border-color: #d0d9ef;
}

.btn.btn--offneg2.btn--outline,
.btnSubmit.btn--offneg2.btn--outline,
button.btn--offneg2.btn--outline {
  background-color: transparent;
  color: #DFE5F4;
}

.btn.btn--offneg2.btn--outline:hover,
.btnSubmit.btn--offneg2.btn--outline:hover,
button.btn--offneg2.btn--outline:hover {
  background-color: transparent;
  color: #d0d9ef;
  border-color: #d0d9ef;
}

.btn.btn--1,
.btnSubmit.btn--1,
button.btn--1 {
  background-color: #907FFF;
  border-color: #907FFF;
  color: #FFFFFF;
}

.btn.btn--1:hover,
.btnSubmit.btn--1:hover,
button.btn--1:hover {
  background-color: #7e6bff;
  border-color: #7e6bff;
}

.btn.btn--1.btn--outline,
.btnSubmit.btn--1.btn--outline,
button.btn--1.btn--outline {
  background-color: transparent;
  color: #907FFF;
}

.btn.btn--1.btn--outline:hover,
.btnSubmit.btn--1.btn--outline:hover,
button.btn--1.btn--outline:hover {
  background-color: transparent;
  color: #7e6bff;
  border-color: #7e6bff;
}

.btn.btn--1d,
.btnSubmit.btn--1d,
button.btn--1d {
  background-color: #5942EB;
  border-color: #5942EB;
  color: #FFFFFF;
}

.btn.btn--1d:hover,
.btnSubmit.btn--1d:hover,
button.btn--1d:hover {
  background-color: #4930e9;
  border-color: #4930e9;
}

.btn.btn--1d.btn--outline,
.btnSubmit.btn--1d.btn--outline,
button.btn--1d.btn--outline {
  background-color: transparent;
  color: #5942EB;
}

.btn.btn--1d.btn--outline:hover,
.btnSubmit.btn--1d.btn--outline:hover,
button.btn--1d.btn--outline:hover {
  background-color: transparent;
  color: #4930e9;
  border-color: #4930e9;
}

.btn.btn--2,
.btnSubmit.btn--2,
button.btn--2 {
  background-color: #FF996B;
  border-color: #FF996B;
  color: #FFFFFF;
}

.btn.btn--2:hover,
.btnSubmit.btn--2:hover,
button.btn--2:hover {
  background-color: #ff8b57;
  border-color: #ff8b57;
}

.btn.btn--2.btn--outline,
.btnSubmit.btn--2.btn--outline,
button.btn--2.btn--outline {
  background-color: transparent;
  color: #FF996B;
}

.btn.btn--2.btn--outline:hover,
.btnSubmit.btn--2.btn--outline:hover,
button.btn--2.btn--outline:hover {
  background-color: transparent;
  color: #ff8b57;
  border-color: #ff8b57;
}

.btn.btn--2d,
.btnSubmit.btn--2d,
button.btn--2d {
  background-color: #EB7540;
  border-color: #EB7540;
  color: #FFFFFF;
}

.btn.btn--2d:hover,
.btnSubmit.btn--2d:hover,
button.btn--2d:hover {
  background-color: #e9682e;
  border-color: #e9682e;
}

.btn.btn--2d.btn--outline,
.btnSubmit.btn--2d.btn--outline,
button.btn--2d.btn--outline {
  background-color: transparent;
  color: #EB7540;
}

.btn.btn--2d.btn--outline:hover,
.btnSubmit.btn--2d.btn--outline:hover,
button.btn--2d.btn--outline:hover {
  background-color: transparent;
  color: #e9682e;
  border-color: #e9682e;
}

.btn.btn--3,
.btnSubmit.btn--3,
button.btn--3 {
  background-color: #6ECFFF;
  border-color: #6ECFFF;
  color: #FFFFFF;
}

.btn.btn--3:hover,
.btnSubmit.btn--3:hover,
button.btn--3:hover {
  background-color: #5ac8ff;
  border-color: #5ac8ff;
}

.btn.btn--3.btn--outline,
.btnSubmit.btn--3.btn--outline,
button.btn--3.btn--outline {
  background-color: transparent;
  color: #6ECFFF;
}

.btn.btn--3.btn--outline:hover,
.btnSubmit.btn--3.btn--outline:hover,
button.btn--3.btn--outline:hover {
  background-color: transparent;
  color: #5ac8ff;
  border-color: #5ac8ff;
}

.btn.btn--3d,
.btnSubmit.btn--3d,
button.btn--3d {
  background-color: #40B2EB;
  border-color: #40B2EB;
  color: #FFFFFF;
}

.btn.btn--3d:hover,
.btnSubmit.btn--3d:hover,
button.btn--3d:hover {
  background-color: #2eabe9;
  border-color: #2eabe9;
}

.btn.btn--3d.btn--outline,
.btnSubmit.btn--3d.btn--outline,
button.btn--3d.btn--outline {
  background-color: transparent;
  color: #40B2EB;
}

.btn.btn--3d.btn--outline:hover,
.btnSubmit.btn--3d.btn--outline:hover,
button.btn--3d.btn--outline:hover {
  background-color: transparent;
  color: #2eabe9;
  border-color: #2eabe9;
}

.btn.btn--4,
.btnSubmit.btn--4,
button.btn--4 {
  background-color: #F79090;
  border-color: #F79090;
  color: #FFFFFF;
}

.btn.btn--4:hover,
.btnSubmit.btn--4:hover,
button.btn--4:hover {
  background-color: #f67d7d;
  border-color: #f67d7d;
}

.btn.btn--4.btn--outline,
.btnSubmit.btn--4.btn--outline,
button.btn--4.btn--outline {
  background-color: transparent;
  color: #F79090;
}

.btn.btn--4.btn--outline:hover,
.btnSubmit.btn--4.btn--outline:hover,
button.btn--4.btn--outline:hover {
  background-color: transparent;
  color: #f67d7d;
  border-color: #f67d7d;
}

.btn.btn--4d,
.btnSubmit.btn--4d,
button.btn--4d {
  background-color: #EB7373;
  border-color: #EB7373;
  color: #FFFFFF;
}

.btn.btn--4d:hover,
.btnSubmit.btn--4d:hover,
button.btn--4d:hover {
  background-color: #e86161;
  border-color: #e86161;
}

.btn.btn--4d.btn--outline,
.btnSubmit.btn--4d.btn--outline,
button.btn--4d.btn--outline {
  background-color: transparent;
  color: #EB7373;
}

.btn.btn--4d.btn--outline:hover,
.btnSubmit.btn--4d.btn--outline:hover,
button.btn--4d.btn--outline:hover {
  background-color: transparent;
  color: #e86161;
  border-color: #e86161;
}

.btn.btn--5,
.btnSubmit.btn--5,
button.btn--5 {
  background-color: #FFC16A;
  border-color: #FFC16A;
  color: #FFFFFF;
}

.btn.btn--5:hover,
.btnSubmit.btn--5:hover,
button.btn--5:hover {
  background-color: #ffb956;
  border-color: #ffb956;
}

.btn.btn--5.btn--outline,
.btnSubmit.btn--5.btn--outline,
button.btn--5.btn--outline {
  background-color: transparent;
  color: #FFC16A;
}

.btn.btn--5.btn--outline:hover,
.btnSubmit.btn--5.btn--outline:hover,
button.btn--5.btn--outline:hover {
  background-color: transparent;
  color: #ffb956;
  border-color: #ffb956;
}

.btn.btn--5d,
.btnSubmit.btn--5d,
button.btn--5d {
  background-color: #EBA340;
  border-color: #EBA340;
  color: #FFFFFF;
}

.btn.btn--5d:hover,
.btnSubmit.btn--5d:hover,
button.btn--5d:hover {
  background-color: #e99a2e;
  border-color: #e99a2e;
}

.btn.btn--5d.btn--outline,
.btnSubmit.btn--5d.btn--outline,
button.btn--5d.btn--outline {
  background-color: transparent;
  color: #EBA340;
}

.btn.btn--5d.btn--outline:hover,
.btnSubmit.btn--5d.btn--outline:hover,
button.btn--5d.btn--outline:hover {
  background-color: transparent;
  color: #e99a2e;
  border-color: #e99a2e;
}

.btn.btn--6,
.btnSubmit.btn--6,
button.btn--6 {
  background-color: #6483FC;
  border-color: #6483FC;
  color: #FFFFFF;
}

.btn.btn--6:hover,
.btnSubmit.btn--6:hover,
button.btn--6:hover {
  background-color: #5073fc;
  border-color: #5073fc;
}

.btn.btn--6.btn--outline,
.btnSubmit.btn--6.btn--outline,
button.btn--6.btn--outline {
  background-color: transparent;
  color: #6483FC;
}

.btn.btn--6.btn--outline:hover,
.btnSubmit.btn--6.btn--outline:hover,
button.btn--6.btn--outline:hover {
  background-color: transparent;
  color: #5073fc;
  border-color: #5073fc;
}

.btn.btn--6d,
.btnSubmit.btn--6d,
button.btn--6d {
  background-color: #3F61E8;
  border-color: #3F61E8;
  color: #FFFFFF;
}

.btn.btn--6d:hover,
.btnSubmit.btn--6d:hover,
button.btn--6d:hover {
  background-color: #2d52e6;
  border-color: #2d52e6;
}

.btn.btn--6d.btn--outline,
.btnSubmit.btn--6d.btn--outline,
button.btn--6d.btn--outline {
  background-color: transparent;
  color: #3F61E8;
}

.btn.btn--6d.btn--outline:hover,
.btnSubmit.btn--6d.btn--outline:hover,
button.btn--6d.btn--outline:hover {
  background-color: transparent;
  color: #2d52e6;
  border-color: #2d52e6;
}

.btn.btn--7,
.btnSubmit.btn--7,
button.btn--7 {
  background-color: #3F3F82;
  border-color: #3F3F82;
  color: #FFFFFF;
}

.btn.btn--7:hover,
.btnSubmit.btn--7:hover,
button.btn--7:hover {
  background-color: #383874;
  border-color: #383874;
}

.btn.btn--7.btn--outline,
.btnSubmit.btn--7.btn--outline,
button.btn--7.btn--outline {
  background-color: transparent;
  color: #3F3F82;
}

.btn.btn--7.btn--outline:hover,
.btnSubmit.btn--7.btn--outline:hover,
button.btn--7.btn--outline:hover {
  background-color: transparent;
  color: #383874;
  border-color: #383874;
}

.btn.btn--7d,
.btnSubmit.btn--7d,
button.btn--7d {
  background-color: #08086D;
  border-color: #08086D;
  color: #FFFFFF;
}

.btn.btn--7d:hover,
.btnSubmit.btn--7d:hover,
button.btn--7d:hover {
  background-color: #07075a;
  border-color: #07075a;
}

.btn.btn--7d.btn--outline,
.btnSubmit.btn--7d.btn--outline,
button.btn--7d.btn--outline {
  background-color: transparent;
  color: #08086D;
}

.btn.btn--7d.btn--outline:hover,
.btnSubmit.btn--7d.btn--outline:hover,
button.btn--7d.btn--outline:hover {
  background-color: transparent;
  color: #07075a;
  border-color: #07075a;
}

.btn.btn--8,
.btnSubmit.btn--8,
button.btn--8 {
  background-color: #84EFAF;
  border-color: #84EFAF;
  color: #FFFFFF;
}

.btn.btn--8:hover,
.btnSubmit.btn--8:hover,
button.btn--8:hover {
  background-color: #72eda3;
  border-color: #72eda3;
}

.btn.btn--8.btn--outline,
.btnSubmit.btn--8.btn--outline,
button.btn--8.btn--outline {
  background-color: transparent;
  color: #84EFAF;
}

.btn.btn--8.btn--outline:hover,
.btnSubmit.btn--8.btn--outline:hover,
button.btn--8.btn--outline:hover {
  background-color: transparent;
  color: #72eda3;
  border-color: #72eda3;
}

.btn.btn--success,
.btnSubmit.btn--success,
button.btn--success {
  background-color: #84EFAF;
  border-color: #84EFAF;
  color: #FFFFFF;
}

.btn.btn--success:hover,
.btnSubmit.btn--success:hover,
button.btn--success:hover {
  background-color: #72eda3;
  border-color: #72eda3;
}

.btn.btn--success.btn--outline,
.btnSubmit.btn--success.btn--outline,
button.btn--success.btn--outline {
  background-color: transparent;
  color: #84EFAF;
}

.btn.btn--success.btn--outline:hover,
.btnSubmit.btn--success.btn--outline:hover,
button.btn--success.btn--outline:hover {
  background-color: transparent;
  color: #72eda3;
  border-color: #72eda3;
}

.btn.btn--error,
.btnSubmit.btn--error,
button.btn--error {
  background-color: #F77777;
  border-color: #F77777;
  color: #FFFFFF;
}

.btn.btn--error:hover,
.btnSubmit.btn--error:hover,
button.btn--error:hover {
  background-color: #f66464;
  border-color: #f66464;
}

.btn.btn--error.btn--outline,
.btnSubmit.btn--error.btn--outline,
button.btn--error.btn--outline {
  background-color: transparent;
  color: #F77777;
}

.btn.btn--error.btn--outline:hover,
.btnSubmit.btn--error.btn--outline:hover,
button.btn--error.btn--outline:hover {
  background-color: transparent;
  color: #f66464;
  border-color: #f66464;
}

.btn.btn--site-bg,
.btnSubmit.btn--site-bg,
button.btn--site-bg {
  background-color: #F4F6FB;
  border-color: #F4F6FB;
  color: #FFFFFF;
}

.btn.btn--site-bg:hover,
.btnSubmit.btn--site-bg:hover,
button.btn--site-bg:hover {
  background-color: #e5eaf6;
  border-color: #e5eaf6;
}

.btn.btn--site-bg.btn--outline,
.btnSubmit.btn--site-bg.btn--outline,
button.btn--site-bg.btn--outline {
  background-color: transparent;
  color: #F4F6FB;
}

.btn.btn--site-bg.btn--outline:hover,
.btnSubmit.btn--site-bg.btn--outline:hover,
button.btn--site-bg.btn--outline:hover {
  background-color: transparent;
  color: #e5eaf6;
  border-color: #e5eaf6;
}

.btn.btn--notice,
.btnSubmit.btn--notice,
button.btn--notice {
  background-color: #FF996B;
  border-color: #FF996B;
  color: #FFFFFF;
}

.btn.btn--notice:hover,
.btnSubmit.btn--notice:hover,
button.btn--notice:hover {
  background-color: #ff8b57;
  border-color: #ff8b57;
}

.btn.btn--notice.btn--outline,
.btnSubmit.btn--notice.btn--outline,
button.btn--notice.btn--outline {
  background-color: transparent;
  color: #FF996B;
}

.btn.btn--notice.btn--outline:hover,
.btnSubmit.btn--notice.btn--outline:hover,
button.btn--notice.btn--outline:hover {
  background-color: transparent;
  color: #ff8b57;
  border-color: #ff8b57;
}

.btn.btn--open,
.btnSubmit.btn--open,
button.btn--open {
  background-color: #907FFF;
  border-color: #907FFF;
  color: #FFFFFF;
}

.btn.btn--open:hover,
.btnSubmit.btn--open:hover,
button.btn--open:hover {
  background-color: #7e6bff;
  border-color: #7e6bff;
}

.btn.btn--open.btn--outline,
.btnSubmit.btn--open.btn--outline,
button.btn--open.btn--outline {
  background-color: transparent;
  color: #907FFF;
}

.btn.btn--open.btn--outline:hover,
.btnSubmit.btn--open.btn--outline:hover,
button.btn--open.btn--outline:hover {
  background-color: transparent;
  color: #7e6bff;
  border-color: #7e6bff;
}

.btn.btn--resolved,
.btnSubmit.btn--resolved,
button.btn--resolved {
  background-color: #6ECFFF;
  border-color: #6ECFFF;
  color: #FFFFFF;
}

.btn.btn--resolved:hover,
.btnSubmit.btn--resolved:hover,
button.btn--resolved:hover {
  background-color: #5ac8ff;
  border-color: #5ac8ff;
}

.btn.btn--resolved.btn--outline,
.btnSubmit.btn--resolved.btn--outline,
button.btn--resolved.btn--outline {
  background-color: transparent;
  color: #6ECFFF;
}

.btn.btn--resolved.btn--outline:hover,
.btnSubmit.btn--resolved.btn--outline:hover,
button.btn--resolved.btn--outline:hover {
  background-color: transparent;
  color: #5ac8ff;
  border-color: #5ac8ff;
}

.btn.btn--investigating,
.btnSubmit.btn--investigating,
button.btn--investigating {
  background-color: #FF996B;
  border-color: #FF996B;
  color: #FFFFFF;
}

.btn.btn--investigating:hover,
.btnSubmit.btn--investigating:hover,
button.btn--investigating:hover {
  background-color: #ff8b57;
  border-color: #ff8b57;
}

.btn.btn--investigating.btn--outline,
.btnSubmit.btn--investigating.btn--outline,
button.btn--investigating.btn--outline {
  background-color: transparent;
  color: #FF996B;
}

.btn.btn--investigating.btn--outline:hover,
.btnSubmit.btn--investigating.btn--outline:hover,
button.btn--investigating.btn--outline:hover {
  background-color: transparent;
  color: #ff8b57;
  border-color: #ff8b57;
}

.btn.btn--hold,
.btnSubmit.btn--hold,
button.btn--hold {
  background-color: #F79090;
  border-color: #F79090;
  color: #FFFFFF;
}

.btn.btn--hold:hover,
.btnSubmit.btn--hold:hover,
button.btn--hold:hover {
  background-color: #f67d7d;
  border-color: #f67d7d;
}

.btn.btn--hold.btn--outline,
.btnSubmit.btn--hold.btn--outline,
button.btn--hold.btn--outline {
  background-color: transparent;
  color: #F79090;
}

.btn.btn--hold.btn--outline:hover,
.btnSubmit.btn--hold.btn--outline:hover,
button.btn--hold.btn--outline:hover {
  background-color: transparent;
  color: #f67d7d;
  border-color: #f67d7d;
}

.btn.btn--closed,
.btnSubmit.btn--closed,
button.btn--closed {
  background-color: #3F3F82;
  border-color: #3F3F82;
  color: #FFFFFF;
}

.btn.btn--closed:hover,
.btnSubmit.btn--closed:hover,
button.btn--closed:hover {
  background-color: #383874;
  border-color: #383874;
}

.btn.btn--closed.btn--outline,
.btnSubmit.btn--closed.btn--outline,
button.btn--closed.btn--outline {
  background-color: transparent;
  color: #3F3F82;
}

.btn.btn--closed.btn--outline:hover,
.btnSubmit.btn--closed.btn--outline:hover,
button.btn--closed.btn--outline:hover {
  background-color: transparent;
  color: #383874;
  border-color: #383874;
}

.btn.btn--worst,
.btnSubmit.btn--worst,
button.btn--worst {
  background-color: #F79090;
  border-color: #F79090;
  color: #FFFFFF;
}

.btn.btn--worst:hover,
.btnSubmit.btn--worst:hover,
button.btn--worst:hover {
  background-color: #f67d7d;
  border-color: #f67d7d;
}

.btn.btn--worst.btn--outline,
.btnSubmit.btn--worst.btn--outline,
button.btn--worst.btn--outline {
  background-color: transparent;
  color: #F79090;
}

.btn.btn--worst.btn--outline:hover,
.btnSubmit.btn--worst.btn--outline:hover,
button.btn--worst.btn--outline:hover {
  background-color: transparent;
  color: #f67d7d;
  border-color: #f67d7d;
}

.btn.btn--bad,
.btnSubmit.btn--bad,
button.btn--bad {
  background-color: #FF996B;
  border-color: #FF996B;
  color: #FFFFFF;
}

.btn.btn--bad:hover,
.btnSubmit.btn--bad:hover,
button.btn--bad:hover {
  background-color: #ff8b57;
  border-color: #ff8b57;
}

.btn.btn--bad.btn--outline,
.btnSubmit.btn--bad.btn--outline,
button.btn--bad.btn--outline {
  background-color: transparent;
  color: #FF996B;
}

.btn.btn--bad.btn--outline:hover,
.btnSubmit.btn--bad.btn--outline:hover,
button.btn--bad.btn--outline:hover {
  background-color: transparent;
  color: #ff8b57;
  border-color: #ff8b57;
}

.btn.btn--neutral,
.btnSubmit.btn--neutral,
button.btn--neutral {
  background-color: #6483FC;
  border-color: #6483FC;
  color: #FFFFFF;
}

.btn.btn--neutral:hover,
.btnSubmit.btn--neutral:hover,
button.btn--neutral:hover {
  background-color: #5073fc;
  border-color: #5073fc;
}

.btn.btn--neutral.btn--outline,
.btnSubmit.btn--neutral.btn--outline,
button.btn--neutral.btn--outline {
  background-color: transparent;
  color: #6483FC;
}

.btn.btn--neutral.btn--outline:hover,
.btnSubmit.btn--neutral.btn--outline:hover,
button.btn--neutral.btn--outline:hover {
  background-color: transparent;
  color: #5073fc;
  border-color: #5073fc;
}

.btn.btn--good,
.btnSubmit.btn--good,
button.btn--good {
  background-color: #6ECFFF;
  border-color: #6ECFFF;
  color: #FFFFFF;
}

.btn.btn--good:hover,
.btnSubmit.btn--good:hover,
button.btn--good:hover {
  background-color: #5ac8ff;
  border-color: #5ac8ff;
}

.btn.btn--good.btn--outline,
.btnSubmit.btn--good.btn--outline,
button.btn--good.btn--outline {
  background-color: transparent;
  color: #6ECFFF;
}

.btn.btn--good.btn--outline:hover,
.btnSubmit.btn--good.btn--outline:hover,
button.btn--good.btn--outline:hover {
  background-color: transparent;
  color: #5ac8ff;
  border-color: #5ac8ff;
}

.btn.btn--best,
.btnSubmit.btn--best,
button.btn--best {
  background-color: #84EFAF;
  border-color: #84EFAF;
  color: #FFFFFF;
}

.btn.btn--best:hover,
.btnSubmit.btn--best:hover,
button.btn--best:hover {
  background-color: #72eda3;
  border-color: #72eda3;
}

.btn.btn--best.btn--outline,
.btnSubmit.btn--best.btn--outline,
button.btn--best.btn--outline {
  background-color: transparent;
  color: #84EFAF;
}

.btn.btn--best.btn--outline:hover,
.btnSubmit.btn--best.btn--outline:hover,
button.btn--best.btn--outline:hover {
  background-color: transparent;
  color: #72eda3;
  border-color: #72eda3;
}

.btn.btn--unrated,
.btnSubmit.btn--unrated,
button.btn--unrated {
  background-color: #3F3F82;
  border-color: #3F3F82;
  color: #FFFFFF;
}

.btn.btn--unrated:hover,
.btnSubmit.btn--unrated:hover,
button.btn--unrated:hover {
  background-color: #383874;
  border-color: #383874;
}

.btn.btn--unrated.btn--outline,
.btnSubmit.btn--unrated.btn--outline,
button.btn--unrated.btn--outline {
  background-color: transparent;
  color: #3F3F82;
}

.btn.btn--unrated.btn--outline:hover,
.btnSubmit.btn--unrated.btn--outline:hover,
button.btn--unrated.btn--outline:hover {
  background-color: transparent;
  color: #383874;
  border-color: #383874;
}

.btn.btn--t,
.btnSubmit.btn--t,
button.btn--t {
  background-color: #3F3F82;
  border-color: #3F3F82;
  color: #FFFFFF;
}

.btn.btn--t:hover,
.btnSubmit.btn--t:hover,
button.btn--t:hover {
  background-color: #383874;
  border-color: #383874;
}

.btn.btn--t.btn--outline,
.btnSubmit.btn--t.btn--outline,
button.btn--t.btn--outline {
  background-color: transparent;
  color: #3F3F82;
}

.btn.btn--t.btn--outline:hover,
.btnSubmit.btn--t.btn--outline:hover,
button.btn--t.btn--outline:hover {
  background-color: transparent;
  color: #383874;
  border-color: #383874;
}

.btn.btn--t-strong,
.btnSubmit.btn--t-strong,
button.btn--t-strong {
  background-color: #08086D;
  border-color: #08086D;
  color: #FFFFFF;
}

.btn.btn--t-strong:hover,
.btnSubmit.btn--t-strong:hover,
button.btn--t-strong:hover {
  background-color: #07075a;
  border-color: #07075a;
}

.btn.btn--t-strong.btn--outline,
.btnSubmit.btn--t-strong.btn--outline,
button.btn--t-strong.btn--outline {
  background-color: transparent;
  color: #08086D;
}

.btn.btn--t-strong.btn--outline:hover,
.btnSubmit.btn--t-strong.btn--outline:hover,
button.btn--t-strong.btn--outline:hover {
  background-color: transparent;
  color: #07075a;
  border-color: #07075a;
}

.btn.btn--t-light,
.btnSubmit.btn--t-light,
button.btn--t-light {
  background-color: rgba(63, 63, 130, 0.6);
  border-color: rgba(63, 63, 130, 0.6);
  color: #FFFFFF;
}

.btn.btn--t-light:hover,
.btnSubmit.btn--t-light:hover,
button.btn--t-light:hover {
  background-color: rgba(56, 56, 116, 0.6);
  border-color: rgba(56, 56, 116, 0.6);
}

.btn.btn--t-light.btn--outline,
.btnSubmit.btn--t-light.btn--outline,
button.btn--t-light.btn--outline {
  background-color: transparent;
  color: rgba(63, 63, 130, 0.6);
}

.btn.btn--t-light.btn--outline:hover,
.btnSubmit.btn--t-light.btn--outline:hover,
button.btn--t-light.btn--outline:hover {
  background-color: transparent;
  color: rgba(56, 56, 116, 0.6);
  border-color: rgba(56, 56, 116, 0.6);
}

.btn.btn--t-neg,
.btnSubmit.btn--t-neg,
button.btn--t-neg {
  background-color: #F4F6FB;
  border-color: #F4F6FB;
  color: #FFFFFF;
}

.btn.btn--t-neg:hover,
.btnSubmit.btn--t-neg:hover,
button.btn--t-neg:hover {
  background-color: #e5eaf6;
  border-color: #e5eaf6;
}

.btn.btn--t-neg.btn--outline,
.btnSubmit.btn--t-neg.btn--outline,
button.btn--t-neg.btn--outline {
  background-color: transparent;
  color: #F4F6FB;
}

.btn.btn--t-neg.btn--outline:hover,
.btnSubmit.btn--t-neg.btn--outline:hover,
button.btn--t-neg.btn--outline:hover {
  background-color: transparent;
  color: #e5eaf6;
  border-color: #e5eaf6;
}

.btn.btn--t-neg-strong,
.btnSubmit.btn--t-neg-strong,
button.btn--t-neg-strong {
  background-color: #FFFFFF;
  border-color: #FFFFFF;
  color: #FFFFFF;
}

.btn.btn--t-neg-strong:hover,
.btnSubmit.btn--t-neg-strong:hover,
button.btn--t-neg-strong:hover {
  background-color: whitesmoke;
  border-color: whitesmoke;
}

.btn.btn--t-neg-strong.btn--outline,
.btnSubmit.btn--t-neg-strong.btn--outline,
button.btn--t-neg-strong.btn--outline {
  background-color: transparent;
  color: #FFFFFF;
}

.btn.btn--t-neg-strong.btn--outline:hover,
.btnSubmit.btn--t-neg-strong.btn--outline:hover,
button.btn--t-neg-strong.btn--outline:hover {
  background-color: transparent;
  color: whitesmoke;
  border-color: whitesmoke;
}

.btn.btn--t-neg-light,
.btnSubmit.btn--t-neg-light,
button.btn--t-neg-light {
  background-color: rgba(223, 229, 244, 0.7);
  border-color: rgba(223, 229, 244, 0.7);
  color: #FFFFFF;
}

.btn.btn--t-neg-light:hover,
.btnSubmit.btn--t-neg-light:hover,
button.btn--t-neg-light:hover {
  background-color: rgba(208, 217, 239, 0.7);
  border-color: rgba(208, 217, 239, 0.7);
}

.btn.btn--t-neg-light.btn--outline,
.btnSubmit.btn--t-neg-light.btn--outline,
button.btn--t-neg-light.btn--outline {
  background-color: transparent;
  color: rgba(223, 229, 244, 0.7);
}

.btn.btn--t-neg-light.btn--outline:hover,
.btnSubmit.btn--t-neg-light.btn--outline:hover,
button.btn--t-neg-light.btn--outline:hover {
  background-color: transparent;
  color: rgba(208, 217, 239, 0.7);
  border-color: rgba(208, 217, 239, 0.7);
}

.btn.btn--border,
.btnSubmit.btn--border,
button.btn--border {
  background-color: rgba(63, 63, 130, 0.1);
  border-color: rgba(63, 63, 130, 0.1);
  color: #FFFFFF;
}

.btn.btn--border:hover,
.btnSubmit.btn--border:hover,
button.btn--border:hover {
  background-color: rgba(56, 56, 116, 0.1);
  border-color: rgba(56, 56, 116, 0.1);
}

.btn.btn--border.btn--outline,
.btnSubmit.btn--border.btn--outline,
button.btn--border.btn--outline {
  background-color: transparent;
  color: rgba(63, 63, 130, 0.1);
}

.btn.btn--border.btn--outline:hover,
.btnSubmit.btn--border.btn--outline:hover,
button.btn--border.btn--outline:hover {
  background-color: transparent;
  color: rgba(56, 56, 116, 0.1);
  border-color: rgba(56, 56, 116, 0.1);
}

.btn.btn--border-light,
.btnSubmit.btn--border-light,
button.btn--border-light {
  background-color: rgba(63, 63, 130, 0.05);
  border-color: rgba(63, 63, 130, 0.05);
  color: #FFFFFF;
}

.btn.btn--border-light:hover,
.btnSubmit.btn--border-light:hover,
button.btn--border-light:hover {
  background-color: rgba(56, 56, 116, 0.05);
  border-color: rgba(56, 56, 116, 0.05);
}

.btn.btn--border-light.btn--outline,
.btnSubmit.btn--border-light.btn--outline,
button.btn--border-light.btn--outline {
  background-color: transparent;
  color: rgba(63, 63, 130, 0.05);
}

.btn.btn--border-light.btn--outline:hover,
.btnSubmit.btn--border-light.btn--outline:hover,
button.btn--border-light.btn--outline:hover {
  background-color: transparent;
  color: rgba(56, 56, 116, 0.05);
  border-color: rgba(56, 56, 116, 0.05);
}

.btn.btn--border-strong,
.btnSubmit.btn--border-strong,
button.btn--border-strong {
  background-color: rgba(63, 63, 130, 0.3);
  border-color: rgba(63, 63, 130, 0.3);
  color: #FFFFFF;
}

.btn.btn--border-strong:hover,
.btnSubmit.btn--border-strong:hover,
button.btn--border-strong:hover {
  background-color: rgba(56, 56, 116, 0.3);
  border-color: rgba(56, 56, 116, 0.3);
}

.btn.btn--border-strong.btn--outline,
.btnSubmit.btn--border-strong.btn--outline,
button.btn--border-strong.btn--outline {
  background-color: transparent;
  color: rgba(63, 63, 130, 0.3);
}

.btn.btn--border-strong.btn--outline:hover,
.btnSubmit.btn--border-strong.btn--outline:hover,
button.btn--border-strong.btn--outline:hover {
  background-color: transparent;
  color: rgba(56, 56, 116, 0.3);
  border-color: rgba(56, 56, 116, 0.3);
}

.noWrap {
  white-space: nowrap;
}

/*
==========================================================================
TABLES AND LISTS
==========================================================================
*/

table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
}

table .lowRes,
table tr.lowRes,
table th.lowRes,
table td.lowRes {
  display: none;
}

table tr.highRes {
  display: table-row;
}

table th.highRes,
table td.highRes {
  display: table-cell;
}

table td,
table th {
  padding: 0.5rem;
  transition: all 300ms ease-in-out;
  /*
  Do nothing since we do not want to override any previously set parameters. 
  Don't even set this to inherit, since this may override parameters.
  */
}

table td:first-child,
table th:first-child {
  padding-left: 0;
}

table td:last-child,
table th:last-child {
  padding-right: 0;
}

table .actions,
table .number {
  text-align: right;
}

table .compact {
  width: 1px;
  white-space: nowrap;
}

table .compact.c--medium {
  width: 10rem;
}

table .compact.c--large {
  width: 15rem;
}

table .light {
  color: rgba(63, 63, 130, 0.6);
}

table td.indent {
  padding-left: 1rem;
}

table td.indent::before {
  content: "";
}

table th {
  color: #08086D;
  border-bottom: 1px solid rgba(63, 63, 130, 0.1);
  font-size: 0.65rem;
  text-transform: uppercase;
  color: rgba(63, 63, 130, 0.6);
  letter-spacing: 0.1em;
  vertical-align: bottom;
}

table tbody tr:hover td {
  background-color: rgba(63, 63, 130, 0.02);
}

tr.updated td {
  background-color: rgba(132, 239, 175, 0.05);
}

tr.updated td:first-child {
  border-left: 0.5rem solid #84EFAF;
  padding-left: 1rem;
}

tr.removed td {
  background-color: rgba(247, 119, 119, 0.05);
}

tr.removed td:first-child {
  border-left: 0.5rem solid #F77777;
  padding-left: 1rem;
}

a.tableSort {
  white-space: nowrap;
}

a.tableSort > span {
  vertical-align: middle;
  font-weight: 700;
}

a.tableSort .icon {
  opacity: 0;
}

a.tableSort .icon path,
a.tableSort .icon circle,
a.tableSort .icon ellipse,
a.tableSort .icon rect,
a.tableSort .icon polygon,
a.tableSort .icon line,
a.tableSort .icon polyline {
  fill: #907FFF;
}

a.tableSort.active .icon {
  opacity: 1;
}

ol,
ul {
  margin: 1rem 0 1rem 16px;
  padding: 0;
}

ol li ul,
ol li ol,
ul li ul,
ul li ol {
  margin-top: 0;
  margin-bottom: 0;
}

ol:first-child,
ul:first-child {
  margin-top: 0;
}

ol:last-child,
ul:last-child {
  margin-bottom: 0;
}

/*
==========================================================================
FORMS
==========================================================================
*/

form {
  max-width: 45rem;
}

.formField {
  margin-top: 0;
  padding: 0.75em 1em;
  box-sizing: border-box;
  display: block;
  width: 100%;
  background-color: rgba(255, 255, 255, 0.6);
}

.formField:not(textarea) {
  line-height: 1;
}

input,
textarea {
  border-radius: 0.5rem;
  border: 1px solid rgba(63, 63, 130, 0.1);
  color: #08086D;
  line-height: 1.65;
}

input:focus,
textarea:focus {
  outline: none;
  border-color: #907FFF;
  background-color: #FFFFFF;
}

input:-moz-read-only:not([type=submit]):not([type=button]), textarea:-moz-read-only:not([type=submit]):not([type=button]) {
  color: rgba(63, 63, 130, 0.6);
  background-color: #F4F6FB;
}

input:disabled,
input:read-only:not([type=submit]):not([type=button]),
textarea:disabled,
textarea:read-only:not([type=submit]):not([type=button]) {
  color: rgba(63, 63, 130, 0.6);
  background-color: #F4F6FB;
}

input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
  /* Chrome/Opera/Safari */
  color: rgba(63, 63, 130, 0.6);
}

input::-moz-placeholder,
textarea::-moz-placeholder {
  /* Firefox 19+ */
  color: rgba(63, 63, 130, 0.6);
}

input:-ms-input-placeholder,
textarea:-ms-input-placeholder {
  /* IE 10+ */
  color: rgba(63, 63, 130, 0.6);
}

input:-moz-placeholder,
textarea:-moz-placeholder {
  /* Firefox 18- */
  color: rgba(63, 63, 130, 0.6);
}

input[type=submit] {
  display: inline-block;
  width: auto;
}

.invalid {
  border-color: #F77777;
  color: #F77777;
}

.selectField .control {
  width: 100%;
  min-width: 15ch;
  border: 1px solid rgba(63, 63, 130, 0.1);
  border-radius: 0.5rem;
  padding: 0.5rem 2rem 0.5rem 1rem;
  font-size: 1em;
  cursor: pointer;
  background-color: #fff;
  position: relative;
  box-sizing: border-box;
}

.selectField .control::after {
  content: "";
  display: block;
  position: absolute;
  width: 0;
  height: 0;
  right: 1em;
  border-left: 0.36em solid transparent;
  border-right: 0.36em solid transparent;
  border-top: 0.36em solid rgba(63, 63, 130, 0.6);
  border-radius: 0.5rem;
  top: 50%;
  margin-top: -0.18em;
  z-index: 0;
}

.selectField select {
  position: relative;
  z-index: 1;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-color: transparent;
  border: none;
  padding: 0;
  margin: 0;
  width: 100%;
  font-family: inherit;
  font-size: inherit;
  cursor: inherit;
  line-height: inherit;
  outline: none;
  color: #3F3F82;
}

.selectField select::-ms-expand {
  display: none;
}

.selectField select:disabled {
  color: rgba(63, 63, 130, 0.6);
}

.selectField select:focus {
  border: 1px solid #907FFF;
}

.selectField.filtered .control {
  border-color: #907FFF;
}

.selectField.filtered .control select {
  color: #907FFF;
}

.selectField.invalid .control {
  border-color: #F77777;
  color: #F77777;
}

.checkboxField,
.radioField {
  display: inline-block;
  margin-right: 1rem;
}

.checkboxField input,
.radioField input {
  width: auto;
  display: inline-block;
  vertical-align: middle;
  margin-right: 0.25rem;
}

.checkboxField .control,
.radioField .control {
  padding-top: 0.5rem;
}

.checkboxField .controlItem,
.radioField .controlItem {
  display: inline-block;
  margin-right: 1rem;
}

.checkboxField .controlItem:last-child,
.radioField .controlItem:last-child {
  margin-right: 0;
}

.checkboxField .controlLabel,
.radioField .controlLabel {
  font-weight: 700;
  vertical-align: middle;
}

.ff-hp {
  opacity: 0;
  position: absolute;
  bottom: -50px;
  left: 0;
}

.formFooter {
  margin-top: 2rem;
}

.fieldWrapper {
  display: block;
  margin: 1rem 0;
}

.fieldWrapper .label {
  display: block;
  font-weight: 700;
  position: relative;
  font-size: 0.8rem;
}

.fieldWrapper .label > .txt {
  display: inline-block;
  vertical-align: middle;
}

.fieldWrapper .label .description:hover .txt {
  visibility: visible;
  opacity: 1;
}

.fieldWrapper .description {
  display: inline-block;
  margin-left: 0.25rem;
  vertical-align: middle;
  font-size: 0.8rem;
}

.fieldWrapper .description .icon {
  width: 1rem;
  height: 1rem;
}

.fieldWrapper .description .icon path,
.fieldWrapper .description .icon circle,
.fieldWrapper .description .icon ellipse,
.fieldWrapper .description .icon rect,
.fieldWrapper .description .icon polygon,
.fieldWrapper .description .icon line,
.fieldWrapper .description .icon polyline {
  fill: #907FFF;
}

.fieldWrapper .description .txt {
  display: inline-block;
  position: absolute;
  z-index: 10;
  left: 0;
  bottom: 100%;
  box-sizing: border-box;
  width: 100%;
  padding: 0.5rem 1rem;
  background-color: #FFFFFF;
  border: 1px solid rgba(63, 63, 130, 0.1);
  font-weight: 300;
  border-radius: 0.5rem;
  -o-box-shadow: 0 0.5rem 0.5rem 0 rgba(0, 0, 0, 0.05);
  box-shadow: 0 0.5rem 0.5rem 0 rgba(0, 0, 0, 0.05);
  visibility: hidden;
  opacity: 0;
  transition: all 300ms ease-in-out;
  /*
  Do nothing since we do not want to override any previously set parameters. 
  Don't even set this to inherit, since this may override parameters.
  */
}

form:not(.formTable) .groupField > .label {
  display: block;
  font-size: 1.25rem;
  border-bottom: 1px solid rgba(63, 63, 130, 0.1);
  margin-top: 2rem;
  margin-bottom: 1rem;
}

.formGroup {
  padding: 2rem 0;
  border-width: 0 0 1px 0;
  border-color: rgba(63, 63, 130, 0.1);
  border-style: solid;
}

.fieldGroup {
  width: 100%;
  margin: 1rem 0;
}

.fieldGroup .fieldWrapper {
  margin: 0;
}

.formTable {
  max-width: none;
}

.formTable .fieldWrapper {
  /* OLD - iOS 6-, Safari 3.1-6 */
  /* OLD - Firefox 19- (buggy but mostly works) */
  /* TWEENER - IE 10 */
  /* NEW - Chrome */
  display: flex;
  flex-wrap: nowrap;
  -moz-align-items: center;
  -ms-align-items: center;
  align-items: center;
  justify-content: center;
  -webkit-justify-content: center;
  -moz-justify-content: center;
  -ms-align-content: center;
  align-content: center;
  overflow: visible;
  position: relative;
  box-sizing: border-box;
  width: 100%;
}

.formTable .fieldWrapper > * {
  -moz-flex: 1 1 auto;
  flex: 1 1 auto;
  align-self: auto;
  box-sizing: border-box;
  position: relative;
  width: auto;
}

.formTable .fieldWrapper > .label {
  -moz-flex: 0 0 33%;
  flex: 0 0 33%;
  align-self: auto;
  box-sizing: border-box;
  position: relative;
  width: auto;
}

.formTable .fieldGroup .fieldWrapper {
  display: block;
}

.formTable .fieldGroup .fieldWrapper > * {
  display: block;
}

/**
 * Search box
 */

.searchBox {
  position: relative;
}

.searchBox .searchBoxLabel {
  display: inline-block;
  vertical-align: middle;
}

.searchBox .field {
  display: block;
  padding-right: 2rem;
  position: relative;
}

.searchBox .searchBoxCancel {
  position: absolute;
  right: 0;
  top: 50%;
  /* IE 9 */
  /* Safari */
  transform: translate(0, -50%);
  /* Standard syntax */
  perspective: none;
  /*
  Do nothing since we do not want to override any previously set parameters. 
  Don't even set this to inherit, since this may override parameters.
  */
  /*
  Do nothing since we do not want to override any previously set parameters. 
  Don't even set this to inherit, since this may override parameters.
  */
}

.searchBox .results {
  position: absolute;
  left: 0;
  width: 100%;
  z-index: 100;
  background-color: #FFFFFF;
  border: 1px solid rgba(63, 63, 130, 0.1);
  -o-box-shadow: 0 1rem 1rem 0 rgba(0, 0, 0, 0.05);
  box-shadow: 0 1rem 1rem 0 rgba(0, 0, 0, 0.05);
  display: none;
}

.searchBox .results.visible {
  display: block;
}

.searchBox .results a {
  display: block;
  padding: 0.5rem;
}

.searchBox .results a:hover {
  background-color: #F4F6FB;
}

.searchBox .results a span {
  display: block;
}

.searchBox .results a span:last-child {
  color: rgba(63, 63, 130, 0.6);
  font-size: 0.8rem;
}

.transparentForm .formField {
  background-color: transparent;
  border-color: #F4F6FB;
  border-width: 0 0 1px 0;
  border-radius: 0;
  color: #FFFFFF;
}

.transparentForm .formField:focus {
  background-color: rgba(255, 255, 255, 0.05);
}

.transparentForm .formField::-webkit-input-placeholder {
  /* Chrome/Opera/Safari */
  color: rgba(223, 229, 244, 0.7);
}

.transparentForm .formField::-moz-placeholder {
  /* Firefox 19+ */
  color: rgba(223, 229, 244, 0.7);
}

.transparentForm .formField:-ms-input-placeholder {
  /* IE 10+ */
  color: rgba(223, 229, 244, 0.7);
}

.transparentForm .formField:-moz-placeholder {
  /* Firefox 18- */
  color: rgba(223, 229, 244, 0.7);
}

/*
==========================================================================
UTILITY
==========================================================================
*/

.m0 {
  margin: 0;
}

.mt0 {
  margin-top: 0;
}

.mb0 {
  margin-bottom: 0;
}

.ml0 {
  margin-left: 0;
}

.mr0 {
  margin-right: 0;
}

.m1 {
  margin: 1rem;
}

.mt1 {
  margin-top: 1rem;
}

.mb1 {
  margin-bottom: 1rem;
}

.ml1 {
  margin-left: 1rem;
}

.mr1 {
  margin-right: 1rem;
}

.m2 {
  margin: 2rem;
}

.mt2 {
  margin-top: 2rem;
}

.mb2 {
  margin-bottom: 2rem;
}

.ml2 {
  margin-left: 2rem;
}

.mr2 {
  margin-right: 2rem;
}

.p0 {
  padding: 0;
}

.pt0 {
  padding-top: 0;
}

.pb0 {
  padding-bottom: 0;
}

.pl0 {
  padding-left: 0;
}

.pr0 {
  padding-right: 0;
}

.p1 {
  padding: 1rem;
}

.pt1 {
  padding-top: 1rem;
}

.pb1 {
  padding-bottom: 1rem;
}

.pl1 {
  padding-left: 1rem;
}

.pr1 {
  padding-right: 1rem;
}

.p2 {
  padding: 2rem;
}

.pt2 {
  padding-top: 2rem;
}

.pb2 {
  padding-bottom: 2rem;
}

.pl2 {
  padding-left: 2rem;
}

.pr2 {
  padding-right: 2rem;
}

/*
==========================================================================
RESPONSIVE
==========================================================================
*/

/**
 * High-res monitor
 * ----------------------------------------------------------------------------
 */

@media screen and (min-width: 2000px) {
  html,
  body {
    font-size: 18px;
  }
}

@media screen and (min-width: 2400px) {
  html,
  body {
    font-size: 20px;
  }
}

/**
 * Medium/low-res monitor
 * ----------------------------------------------------------------------------
 */

@media screen and (max-width: 1400px) {
  html,
  body {
    font-size: 14px;
  }
}

@media screen and (max-width: 1200px) {
  /* LAYOUT */

  main {
    margin-left: 6rem;
  }

  /* NAVIGATION */

  #navMain {
    width: 6rem;
    padding: 2rem;
  }

  #navMain .logo,
  #navMain .logo svg {
    width: 2rem;
    height: auto;
  }

  #navMain .navItem a .label {
    display: none;
  }
}

@media screen and (max-width: 900px) {
  /* LAYOUT */

  .gridWrapper:not(.gw--fillHeight, .gw--gap0, .gw--gapMin) {
    gap: 1rem;
  }

  .gw--25,
  .gw--33 {
    grid-template-columns: repeat(2, 1fr);
  }

  .gw--33-67,
  .gw--67-33,
  .gw--25-75,
  .gw--75-25 {
    grid-auto-flow: row;
    grid-template-columns: none;
  }

  .gw--33-67 > *:nth-child(2n+0),
  .gw--33-67 > *:nth-child(1n+0),
  .gw--67-33 > *:nth-child(2n+0),
  .gw--67-33 > *:nth-child(1n+0),
  .gw--25-75 > *:nth-child(2n+0),
  .gw--25-75 > *:nth-child(1n+0),
  .gw--75-25 > *:nth-child(2n+0),
  .gw--75-25 > *:nth-child(1n+0) {
    grid-column: span 1;
  }

  .layout.l--sidebar {
    flex-wrap: wrap;
  }

  .layout.l--sidebar .sidebar,
  .layout.l--sidebar .main {
    -moz-flex: 0 0 100%;
    flex: 0 0 100%;
    align-self: auto;
    box-sizing: border-box;
    position: relative;
    max-width: 100%;
  }

  .layout.l--sidebar .main {
    margin-top: 2rem;
  }

  .layout.l--sidebar .sidebar .headline {
    margin-bottom: 1rem;
  }

  .layout.l--sidebar .sidebar nav {
    margin-top: 2rem;
  }

  .layout.l--sidebar .sidebar nav a {
    margin: 1rem 3rem 1rem 0;
    display: inline-block;
    padding-right: 0;
    font-weight: 700;
  }

  .layout.l--sidebar .sidebar nav a:first-child {
    margin-top: 0;
  }

  .layout.l--sidebar .sidebar nav a:last-child {
    margin-bottom: 0;
  }

  .layout.l--sidebar .sidebar nav a .icon {
    margin-right: 0.5rem;
  }

  .layout.l--sidebar .sidebar nav a span {
    vertical-align: middle;
  }

  .layout.l--sidebar .sidebar nav a .count {
    margin-left: 0.25em;
    position: relative;
  }

  .layout.l--sidebar .sidebar .actions {
    margin-top: 1rem;
  }
}

/**
 * Low-res/handheld
 * ----------------------------------------------------------------------------
 */

@media screen and (max-width: 700px) {
  /* LAYOUT */

  html,
  body {
    font-size: 16px;
  }

  main {
    margin-left: 0;
    margin-top: 5rem;
  }

  .contentWrapper > .content {
    margin: 1rem auto;
    padding: 0 1rem;
  }

  .gridWrapper {
    grid-auto-flow: row;
    grid-template-columns: none;
  }

  .gridWrapper > *:nth-child(2n+0),
  .gridWrapper > *:nth-child(1n+0) {
    grid-column: span 1;
  }

  /* GRAPHICS / UI / UX */

  .card > .content,
  .card > header,
  .card > footer {
    padding: 1rem;
  }

  .card.slim > .content {
    padding: 0.5rem;
  }

  .helperIcon .content {
    max-width: 100%;
    width: 100%;
    line-height: 1.5;
    left: 0;
    /* IE 9 */
    /* Safari */
    transform: translate(0, 1rem);
    /* Standard syntax */
    perspective: none;
    /*
    Do nothing since we do not want to override any previously set parameters. 
    Don't even set this to inherit, since this may override parameters.
    */
    /*
    Do nothing since we do not want to override any previously set parameters. 
    Don't even set this to inherit, since this may override parameters.
    */
  }

  .bubble {
    border-radius: 0.5em;
  }

  #modal #modalContent {
    padding: 1rem;
  }

  #modal #modalContent .actions {
    text-align: center;
  }

  #modal #modalContent .actions a {
    margin-right: 0.5rem;
  }

  /* GRAPHS AND DATA */

  .bigData .value {
    font-size: 2rem;
  }

  /* CONTENT SPECIFIC */

  #dashboard .dashboardSegment {
    margin: 2rem 0;
  }

  #notificationsPage .notificationList .notification {
    margin: 0.5rem 0;
  }

  #notificationsPage .notificationList .notification .status {
    display: none;
  }

  #notificationsPage .notificationList .notification .body .message {
    display: inline;
  }

  #notificationsPage .notificationList .notification .body .timestamp {
    display: inline;
    font-size: 0.8rem;
  }

  #notificationsPage .notificationList .notification .actions {
    text-align: left;
  }

  /* TABLES AND LISTS */

  table {
    font-size: 0.8rem;
  }

  table th,
  table .compact,
  table .compact.c--medium {
    white-space: normal;
    width: auto;
  }

  table .lowRes {
    display: inline-block;
  }

  table tr.lowRes {
    display: table-row;
  }

  table th.lowRes,
  table td.lowRes {
    display: table-cell;
  }

  table .highRes,
  table tr.highRes,
  table th.highRes,
  table td.highRes {
    display: none;
  }

  table td.indent {
    padding-left: 0.5rem;
  }

  /* TYPOGRAPHY */

  h1,
  .h1 {
    font-size: 1.75rem;
  }

  h2,
  .h2 {
    font-size: 1.5rem;
    font-weight: 300;
  }

  h3,
  .h3 {
    font-size: 1.25rem;
  }

  h4,
  .h4 {
    text-transform: uppercase;
    font-size: 1rem;
  }

  .btn,
  .btnSubmit {
    padding: 0.5rem 1.7rem;
  }

  .btn.btn--slim,
  .btnSubmit.btn--slim {
    padding: 0.25rem 0.75rem;
    font-size: 0.6rem;
    text-transform: uppercase;
  }

  .btn.btn--slim .icon,
  .btnSubmit.btn--slim .icon {
    width: 1em;
    height: 1em;
  }

  /* NAVIGATION */

  #navMain {
    width: 6rem;
    padding: 2rem;
  }

  #navMain .logo,
  #navMain .logo svg {
    width: 2rem;
    height: auto;
  }

  #navMain .navItem a .label {
    display: none;
  }

  #navMain {
    width: 100%;
    left: auto;
    right: 0;
    border-radius: 0.5rem 0 0 0.5rem;
    border-right-width: none;
    border-left-width: 1px;
    -o-box-shadow: none;
    box-shadow: none;
    /* IE 9 */
    /* Safari */
    transform: translateX(100%);
    /* Standard syntax */
    perspective: none;
    /*
    Do nothing since we do not want to override any previously set parameters. 
    Don't even set this to inherit, since this may override parameters.
    */
    /*
    Do nothing since we do not want to override any previously set parameters. 
    Don't even set this to inherit, since this may override parameters.
    */
    opacity: 0;
  }

  #navMain nav {
    padding: 0;
  }

  #navMain .navItem.lowRes {
    display: block;
  }

  #navMain .navItem a .label {
    display: inline-block;
  }

  #navMain .logo {
    display: none;
  }

  .navExpanded #navMain {
    -o-box-shadow: -1rem 0 1rem 0 rgba(0, 0, 0, 0.05);
    box-shadow: -1rem 0 1rem 0 rgba(0, 0, 0, 0.05);
    /* IE 9 */
    /* Safari */
    transform: translateX(0);
    /* Standard syntax */
    perspective: none;
    /*
    Do nothing since we do not want to override any previously set parameters. 
    Don't even set this to inherit, since this may override parameters.
    */
    /*
    Do nothing since we do not want to override any previously set parameters. 
    Don't even set this to inherit, since this may override parameters.
    */
    opacity: 1;
  }

  #navToggle {
    display: inline-block;
  }

  #topBar {
    padding: 0.5rem 1rem;
    padding-right: 3.5rem;
  }

  #topBar .logoWrapper.lowRes {
    display: block;
  }

  #topBar .actions a {
    padding-right: 0;
  }

  #topBar .actions a .label {
    display: none;
  }

  #topBar .actions .logout {
    display: none;
  }

  #topBar #notificationItems {
    position: fixed;
    top: 3.5rem;
    border-radius: 0;
    max-width: 100%;
  }

  /*
  .tabs {
    nav {
      @include setBorderRadius();
      a {
        @include setBorderRadius();
        font-weight: getProp('font-bold');
        text-transform: uppercase;
        font-size: getProp('t-size-s');
        padding: getProp('whitespace-s') getProp('whitespace-m');
      }
    }
  }
  */

  .tabs nav a {
    padding: 1rem 2rem;
  }

  .pagination {
    margin-top: 1rem;
  }
}

@media screen and (max-width: 500px) {
  .notification.compact,
  .notification.compact.hasIcon {
    grid-auto-flow: row;
    grid-template-columns: none;
    text-align: center;
  }

  .notification.compact > *,
  .notification.compact.hasIcon > * {
    text-align: center;
  }
}