/*!***********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[2]!./node_modules/resolve-url-loader/index.js??ruleSet[1].rules[6].rules[1].use[0]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[6].rules[1].use[1]!./src/styles.scss?ngGlobalStyle ***!
  \***********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
@import url(https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400;1,500;1,600;1,700;1,800&display=swap);
/*!*****************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[5].rules[0].oneOf[0].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[5].rules[0].oneOf[0].use[2]!./node_modules/select2/dist/css/select2.min.css?ngGlobalStyle ***!
  \*****************************************************************************************************************************************************************************************************************************************************/
.select2-container{box-sizing:border-box;display:inline-block;margin:0;position:relative;vertical-align:middle}.select2-container .select2-selection--single{box-sizing:border-box;cursor:pointer;display:block;height:28px;user-select:none;-webkit-user-select:none}.select2-container .select2-selection--single .select2-selection__rendered{display:block;padding-left:8px;padding-right:20px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.select2-container .select2-selection--single .select2-selection__clear{background-color:transparent;border:none;font-size:1em}.select2-container[dir="rtl"] .select2-selection--single .select2-selection__rendered{padding-right:8px;padding-left:20px}.select2-container .select2-selection--multiple{box-sizing:border-box;cursor:pointer;display:block;min-height:32px;user-select:none;-webkit-user-select:none}.select2-container .select2-selection--multiple .select2-selection__rendered{display:inline;list-style:none;padding:0}.select2-container .select2-selection--multiple .select2-selection__clear{background-color:transparent;border:none;font-size:1em}.select2-container .select2-search--inline .select2-search__field{box-sizing:border-box;border:none;font-size:100%;margin-top:5px;margin-left:5px;padding:0;max-width:100%;resize:none;height:18px;vertical-align:bottom;font-family:sans-serif;overflow:hidden;word-break:keep-all}.select2-container .select2-search--inline .select2-search__field::-webkit-search-cancel-button{-webkit-appearance:none}.select2-dropdown{background-color:white;border:1px solid #aaa;border-radius:4px;box-sizing:border-box;display:block;position:absolute;left:-100000px;width:100%;z-index:1051}.select2-results{display:block}.select2-results__options{list-style:none;margin:0;padding:0}.select2-results__option{padding:6px;user-select:none;-webkit-user-select:none}.select2-results__option--selectable{cursor:pointer}.select2-container--open .select2-dropdown{left:0}.select2-container--open .select2-dropdown--above{border-bottom:none;border-bottom-left-radius:0;border-bottom-right-radius:0}.select2-container--open .select2-dropdown--below{border-top:none;border-top-left-radius:0;border-top-right-radius:0}.select2-search--dropdown{display:block;padding:4px}.select2-search--dropdown .select2-search__field{padding:4px;width:100%;box-sizing:border-box}.select2-search--dropdown .select2-search__field::-webkit-search-cancel-button{-webkit-appearance:none}.select2-search--dropdown.select2-search--hide{display:none}.select2-close-mask{border:0;margin:0;padding:0;display:block;position:fixed;left:0;top:0;min-height:100%;min-width:100%;height:auto;width:auto;opacity:0;z-index:99;background-color:#fff;filter:alpha(opacity=0)}.select2-hidden-accessible{border:0 !important;clip:rect(0 0 0 0) !important;clip-path:inset(50%) !important;height:1px !important;overflow:hidden !important;padding:0 !important;position:absolute !important;width:1px !important;white-space:nowrap !important}.select2-container--default .select2-selection--single{background-color:#fff;border:1px solid #aaa;border-radius:4px}.select2-container--default .select2-selection--single .select2-selection__rendered{color:#444;line-height:28px}.select2-container--default .select2-selection--single .select2-selection__clear{cursor:pointer;float:right;font-weight:bold;height:26px;margin-right:20px;padding-right:0px}.select2-container--default .select2-selection--single .select2-selection__placeholder{color:#999}.select2-container--default .select2-selection--single .select2-selection__arrow{height:26px;position:absolute;top:1px;right:1px;width:20px}.select2-container--default .select2-selection--single .select2-selection__arrow b{border-color:#888 transparent transparent transparent;border-style:solid;border-width:5px 4px 0 4px;height:0;left:50%;margin-left:-4px;margin-top:-2px;position:absolute;top:50%;width:0}.select2-container--default[dir="rtl"] .select2-selection--single .select2-selection__clear{float:left}.select2-container--default[dir="rtl"] .select2-selection--single .select2-selection__arrow{left:1px;right:auto}.select2-container--default.select2-container--disabled .select2-selection--single{background-color:#eee;cursor:default}.select2-container--default.select2-container--disabled .select2-selection--single .select2-selection__clear{display:none}.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b{border-color:transparent transparent #888 transparent;border-width:0 4px 5px 4px}.select2-container--default .select2-selection--multiple{background-color:white;border:1px solid #aaa;border-radius:4px;cursor:text;padding-bottom:5px;padding-right:5px;position:relative}.select2-container--default .select2-selection--multiple.select2-selection--clearable{padding-right:25px}.select2-container--default .select2-selection--multiple .select2-selection__clear{cursor:pointer;font-weight:bold;height:20px;margin-right:10px;margin-top:5px;position:absolute;right:0;padding:1px}.select2-container--default .select2-selection--multiple .select2-selection__choice{background-color:#e4e4e4;border:1px solid #aaa;border-radius:4px;box-sizing:border-box;display:inline-block;margin-left:5px;margin-top:5px;padding:0;padding-left:20px;position:relative;max-width:100%;overflow:hidden;text-overflow:ellipsis;vertical-align:bottom;white-space:nowrap}.select2-container--default .select2-selection--multiple .select2-selection__choice__display{cursor:default;padding-left:2px;padding-right:5px}.select2-container--default .select2-selection--multiple .select2-selection__choice__remove{background-color:transparent;border:none;border-right:1px solid #aaa;border-top-left-radius:4px;border-bottom-left-radius:4px;color:#999;cursor:pointer;font-size:1em;font-weight:bold;padding:0 4px;position:absolute;left:0;top:0}.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover,.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:focus{background-color:#f1f1f1;color:#333;outline:none}.select2-container--default[dir="rtl"] .select2-selection--multiple .select2-selection__choice{margin-left:5px;margin-right:auto}.select2-container--default[dir="rtl"] .select2-selection--multiple .select2-selection__choice__display{padding-left:5px;padding-right:2px}.select2-container--default[dir="rtl"] .select2-selection--multiple .select2-selection__choice__remove{border-left:1px solid #aaa;border-right:none;border-top-left-radius:0;border-bottom-left-radius:0;border-top-right-radius:4px;border-bottom-right-radius:4px}.select2-container--default[dir="rtl"] .select2-selection--multiple .select2-selection__clear{float:left;margin-left:10px;margin-right:auto}.select2-container--default.select2-container--focus .select2-selection--multiple{border:solid black 1px;outline:0}.select2-container--default.select2-container--disabled .select2-selection--multiple{background-color:#eee;cursor:default}.select2-container--default.select2-container--disabled .select2-selection__choice__remove{display:none}.select2-container--default.select2-container--open.select2-container--above .select2-selection--single,.select2-container--default.select2-container--open.select2-container--above .select2-selection--multiple{border-top-left-radius:0;border-top-right-radius:0}.select2-container--default.select2-container--open.select2-container--below .select2-selection--single,.select2-container--default.select2-container--open.select2-container--below .select2-selection--multiple{border-bottom-left-radius:0;border-bottom-right-radius:0}.select2-container--default .select2-search--dropdown .select2-search__field{border:1px solid #aaa}.select2-container--default .select2-search--inline .select2-search__field{background:transparent;border:none;outline:0;box-shadow:none;-webkit-appearance:textfield}.select2-container--default .select2-results>.select2-results__options{max-height:200px;overflow-y:auto}.select2-container--default .select2-results__option .select2-results__option{padding-left:1em}.select2-container--default .select2-results__option .select2-results__option .select2-results__group{padding-left:0}.select2-container--default .select2-results__option .select2-results__option .select2-results__option{margin-left:-1em;padding-left:2em}.select2-container--default .select2-results__option .select2-results__option .select2-results__option .select2-results__option{margin-left:-2em;padding-left:3em}.select2-container--default .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option{margin-left:-3em;padding-left:4em}.select2-container--default .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option{margin-left:-4em;padding-left:5em}.select2-container--default .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option{margin-left:-5em;padding-left:6em}.select2-container--default .select2-results__option--group{padding:0}.select2-container--default .select2-results__option--disabled{color:#999}.select2-container--default .select2-results__option--selected{background-color:#ddd}.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable{background-color:#5897fb;color:white}.select2-container--default .select2-results__group{cursor:default;display:block;padding:6px}.select2-container--classic .select2-selection--single{background-color:#f7f7f7;border:1px solid #aaa;border-radius:4px;outline:0;background-image:linear-gradient(to bottom, #fff 50%, #eee 100%);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFFFF', endColorstr='#FFEEEEEE', GradientType=0)}.select2-container--classic .select2-selection--single:focus{border:1px solid #5897fb}.select2-container--classic .select2-selection--single .select2-selection__rendered{color:#444;line-height:28px}.select2-container--classic .select2-selection--single .select2-selection__clear{cursor:pointer;float:right;font-weight:bold;height:26px;margin-right:20px}.select2-container--classic .select2-selection--single .select2-selection__placeholder{color:#999}.select2-container--classic .select2-selection--single .select2-selection__arrow{background-color:#ddd;border:none;border-left:1px solid #aaa;border-top-right-radius:4px;border-bottom-right-radius:4px;height:26px;position:absolute;top:1px;right:1px;width:20px;background-image:linear-gradient(to bottom, #eee 50%, #ccc 100%);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFEEEEEE', endColorstr='#FFCCCCCC', GradientType=0)}.select2-container--classic .select2-selection--single .select2-selection__arrow b{border-color:#888 transparent transparent transparent;border-style:solid;border-width:5px 4px 0 4px;height:0;left:50%;margin-left:-4px;margin-top:-2px;position:absolute;top:50%;width:0}.select2-container--classic[dir="rtl"] .select2-selection--single .select2-selection__clear{float:left}.select2-container--classic[dir="rtl"] .select2-selection--single .select2-selection__arrow{border:none;border-right:1px solid #aaa;border-radius:0;border-top-left-radius:4px;border-bottom-left-radius:4px;left:1px;right:auto}.select2-container--classic.select2-container--open .select2-selection--single{border:1px solid #5897fb}.select2-container--classic.select2-container--open .select2-selection--single .select2-selection__arrow{background:transparent;border:none}.select2-container--classic.select2-container--open .select2-selection--single .select2-selection__arrow b{border-color:transparent transparent #888 transparent;border-width:0 4px 5px 4px}.select2-container--classic.select2-container--open.select2-container--above .select2-selection--single{border-top:none;border-top-left-radius:0;border-top-right-radius:0;background-image:linear-gradient(to bottom, #fff 0%, #eee 50%);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFFFF', endColorstr='#FFEEEEEE', GradientType=0)}.select2-container--classic.select2-container--open.select2-container--below .select2-selection--single{border-bottom:none;border-bottom-left-radius:0;border-bottom-right-radius:0;background-image:linear-gradient(to bottom, #eee 50%, #fff 100%);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFEEEEEE', endColorstr='#FFFFFFFF', GradientType=0)}.select2-container--classic .select2-selection--multiple{background-color:white;border:1px solid #aaa;border-radius:4px;cursor:text;outline:0;padding-bottom:5px;padding-right:5px}.select2-container--classic .select2-selection--multiple:focus{border:1px solid #5897fb}.select2-container--classic .select2-selection--multiple .select2-selection__clear{display:none}.select2-container--classic .select2-selection--multiple .select2-selection__choice{background-color:#e4e4e4;border:1px solid #aaa;border-radius:4px;display:inline-block;margin-left:5px;margin-top:5px;padding:0}.select2-container--classic .select2-selection--multiple .select2-selection__choice__display{cursor:default;padding-left:2px;padding-right:5px}.select2-container--classic .select2-selection--multiple .select2-selection__choice__remove{background-color:transparent;border:none;border-top-left-radius:4px;border-bottom-left-radius:4px;color:#888;cursor:pointer;font-size:1em;font-weight:bold;padding:0 4px}.select2-container--classic .select2-selection--multiple .select2-selection__choice__remove:hover{color:#555;outline:none}.select2-container--classic[dir="rtl"] .select2-selection--multiple .select2-selection__choice{margin-left:5px;margin-right:auto}.select2-container--classic[dir="rtl"] .select2-selection--multiple .select2-selection__choice__display{padding-left:5px;padding-right:2px}.select2-container--classic[dir="rtl"] .select2-selection--multiple .select2-selection__choice__remove{border-top-left-radius:0;border-bottom-left-radius:0;border-top-right-radius:4px;border-bottom-right-radius:4px}.select2-container--classic.select2-container--open .select2-selection--multiple{border:1px solid #5897fb}.select2-container--classic.select2-container--open.select2-container--above .select2-selection--multiple{border-top:none;border-top-left-radius:0;border-top-right-radius:0}.select2-container--classic.select2-container--open.select2-container--below .select2-selection--multiple{border-bottom:none;border-bottom-left-radius:0;border-bottom-right-radius:0}.select2-container--classic .select2-search--dropdown .select2-search__field{border:1px solid #aaa;outline:0}.select2-container--classic .select2-search--inline .select2-search__field{outline:0;box-shadow:none}.select2-container--classic .select2-dropdown{background-color:#fff;border:1px solid transparent}.select2-container--classic .select2-dropdown--above{border-bottom:none}.select2-container--classic .select2-dropdown--below{border-top:none}.select2-container--classic .select2-results>.select2-results__options{max-height:200px;overflow-y:auto}.select2-container--classic .select2-results__option--group{padding:0}.select2-container--classic .select2-results__option--disabled{color:grey}.select2-container--classic .select2-results__option--highlighted.select2-results__option--selectable{background-color:#3875d7;color:#fff}.select2-container--classic .select2-results__group{cursor:default;display:block;padding:6px}.select2-container--classic.select2-container--open .select2-dropdown{border-color:#5897fb}

/*!***************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[2]!./node_modules/resolve-url-loader/index.js??ruleSet[1].rules[6].rules[1].use[0]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[6].rules[1].use[1]!./src/styles.scss?ngGlobalStyle (1) ***!
  \***************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
@charset "UTF-8";
.mat-ripple {
  overflow: hidden;
  position: relative;
}
.mat-ripple:not(:empty) {
  transform: translateZ(0);
}

.mat-ripple.mat-ripple-unbounded {
  overflow: visible;
}

.mat-ripple-element {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  transition: opacity, transform 0ms cubic-bezier(0, 0, 0.2, 1);
  transform: scale3d(0, 0, 0);
  background-color: var(--mat-ripple-color, rgba(0, 0, 0, 0.1));
}
.cdk-high-contrast-active .mat-ripple-element {
  display: none;
}

.cdk-visually-hidden {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  white-space: nowrap;
  outline: 0;
  -webkit-appearance: none;
  -moz-appearance: none;
  left: 0;
}
[dir=rtl] .cdk-visually-hidden {
  left: auto;
  right: 0;
}

.cdk-overlay-container, .cdk-global-overlay-wrapper {
  pointer-events: none;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}

.cdk-overlay-container {
  position: fixed;
  z-index: 1000;
}
.cdk-overlay-container:empty {
  display: none;
}

.cdk-global-overlay-wrapper {
  display: flex;
  position: absolute;
  z-index: 1000;
}

.cdk-overlay-pane {
  position: absolute;
  pointer-events: auto;
  box-sizing: border-box;
  z-index: 1000;
  display: flex;
  max-width: 100%;
  max-height: 100%;
}

.cdk-overlay-backdrop {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  pointer-events: auto;
  -webkit-tap-highlight-color: transparent;
  transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 1);
  opacity: 0;
}
.cdk-overlay-backdrop.cdk-overlay-backdrop-showing {
  opacity: 1;
}
.cdk-high-contrast-active .cdk-overlay-backdrop.cdk-overlay-backdrop-showing {
  opacity: 0.6;
}

.cdk-overlay-dark-backdrop {
  background: rgba(0, 0, 0, 0.32);
}

.cdk-overlay-transparent-backdrop {
  transition: visibility 1ms linear, opacity 1ms linear;
  visibility: hidden;
  opacity: 1;
}
.cdk-overlay-transparent-backdrop.cdk-overlay-backdrop-showing {
  opacity: 0;
  visibility: visible;
}

.cdk-overlay-backdrop-noop-animation {
  transition: none;
}

.cdk-overlay-connected-position-bounding-box {
  position: absolute;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  min-width: 1px;
  min-height: 1px;
}

.cdk-global-scrollblock {
  position: fixed;
  width: 100%;
  overflow-y: scroll;
}

textarea.cdk-textarea-autosize {
  resize: none;
}

textarea.cdk-textarea-autosize-measuring {
  padding: 2px 0 !important;
  box-sizing: content-box !important;
  height: auto !important;
  overflow: hidden !important;
}

textarea.cdk-textarea-autosize-measuring-firefox {
  padding: 2px 0 !important;
  box-sizing: content-box !important;
  height: 0 !important;
}

@keyframes cdk-text-field-autofill-start { /*!*/ }
@keyframes cdk-text-field-autofill-end { /*!*/ }
.cdk-text-field-autofill-monitored:-webkit-autofill {
  animation: cdk-text-field-autofill-start 0s 1ms;
}

.cdk-text-field-autofill-monitored:not(:-webkit-autofill) {
  animation: cdk-text-field-autofill-end 0s 1ms;
}

.mat-focus-indicator {
  position: relative;
}
.mat-focus-indicator::before {
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  position: absolute;
  box-sizing: border-box;
  pointer-events: none;
  display: var(--mat-focus-indicator-display, none);
  border: var(--mat-focus-indicator-border-width, 3px) var(--mat-focus-indicator-border-style, solid) var(--mat-focus-indicator-border-color, transparent);
  border-radius: var(--mat-focus-indicator-border-radius, 4px);
}
.mat-focus-indicator:focus::before {
  content: "";
}

.cdk-high-contrast-active {
  --mat-focus-indicator-display: block;
}

.mat-mdc-focus-indicator {
  position: relative;
}
.mat-mdc-focus-indicator::before {
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  position: absolute;
  box-sizing: border-box;
  pointer-events: none;
  display: var(--mat-mdc-focus-indicator-display, none);
  border: var(--mat-mdc-focus-indicator-border-width, 3px) var(--mat-mdc-focus-indicator-border-style, solid) var(--mat-mdc-focus-indicator-border-color, transparent);
  border-radius: var(--mat-mdc-focus-indicator-border-radius, 4px);
}
.mat-mdc-focus-indicator:focus::before {
  content: "";
}

.cdk-high-contrast-active {
  --mat-mdc-focus-indicator-display: block;
}

.mat-app-background {
  background-color: var(--mat-app-background-color, transparent);
  color: var(--mat-app-text-color, inherit);
}

html {
  --mat-ripple-color: rgba(0, 0, 0, 0.1);
}

html {
  --mat-option-selected-state-label-text-color: #3f51b5;
  --mat-option-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-option-hover-state-layer-color: rgba(0, 0, 0, 0.04);
  --mat-option-focus-state-layer-color: rgba(0, 0, 0, 0.04);
  --mat-option-selected-state-layer-color: rgba(0, 0, 0, 0.04);
}

.mat-accent {
  --mat-option-selected-state-label-text-color: #ff4081;
  --mat-option-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-option-hover-state-layer-color: rgba(0, 0, 0, 0.04);
  --mat-option-focus-state-layer-color: rgba(0, 0, 0, 0.04);
  --mat-option-selected-state-layer-color: rgba(0, 0, 0, 0.04);
}

.mat-warn {
  --mat-option-selected-state-label-text-color: #f44336;
  --mat-option-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-option-hover-state-layer-color: rgba(0, 0, 0, 0.04);
  --mat-option-focus-state-layer-color: rgba(0, 0, 0, 0.04);
  --mat-option-selected-state-layer-color: rgba(0, 0, 0, 0.04);
}

html {
  --mat-optgroup-label-text-color: rgba(0, 0, 0, 0.87);
}

.mat-primary {
  --mat-full-pseudo-checkbox-selected-icon-color: #3f51b5;
  --mat-full-pseudo-checkbox-selected-checkmark-color: #fafafa;
  --mat-full-pseudo-checkbox-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-full-pseudo-checkbox-disabled-selected-checkmark-color: #fafafa;
  --mat-full-pseudo-checkbox-disabled-unselected-icon-color: #b0b0b0;
  --mat-full-pseudo-checkbox-disabled-selected-icon-color: #b0b0b0;
  --mat-minimal-pseudo-checkbox-selected-checkmark-color: #3f51b5;
  --mat-minimal-pseudo-checkbox-disabled-selected-checkmark-color: #b0b0b0;
}

html {
  --mat-full-pseudo-checkbox-selected-icon-color: #ff4081;
  --mat-full-pseudo-checkbox-selected-checkmark-color: #fafafa;
  --mat-full-pseudo-checkbox-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-full-pseudo-checkbox-disabled-selected-checkmark-color: #fafafa;
  --mat-full-pseudo-checkbox-disabled-unselected-icon-color: #b0b0b0;
  --mat-full-pseudo-checkbox-disabled-selected-icon-color: #b0b0b0;
  --mat-minimal-pseudo-checkbox-selected-checkmark-color: #ff4081;
  --mat-minimal-pseudo-checkbox-disabled-selected-checkmark-color: #b0b0b0;
}

.mat-accent {
  --mat-full-pseudo-checkbox-selected-icon-color: #ff4081;
  --mat-full-pseudo-checkbox-selected-checkmark-color: #fafafa;
  --mat-full-pseudo-checkbox-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-full-pseudo-checkbox-disabled-selected-checkmark-color: #fafafa;
  --mat-full-pseudo-checkbox-disabled-unselected-icon-color: #b0b0b0;
  --mat-full-pseudo-checkbox-disabled-selected-icon-color: #b0b0b0;
  --mat-minimal-pseudo-checkbox-selected-checkmark-color: #ff4081;
  --mat-minimal-pseudo-checkbox-disabled-selected-checkmark-color: #b0b0b0;
}

.mat-warn {
  --mat-full-pseudo-checkbox-selected-icon-color: #f44336;
  --mat-full-pseudo-checkbox-selected-checkmark-color: #fafafa;
  --mat-full-pseudo-checkbox-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-full-pseudo-checkbox-disabled-selected-checkmark-color: #fafafa;
  --mat-full-pseudo-checkbox-disabled-unselected-icon-color: #b0b0b0;
  --mat-full-pseudo-checkbox-disabled-selected-icon-color: #b0b0b0;
  --mat-minimal-pseudo-checkbox-selected-checkmark-color: #f44336;
  --mat-minimal-pseudo-checkbox-disabled-selected-checkmark-color: #b0b0b0;
}

html {
  --mat-app-background-color: #fafafa;
  --mat-app-text-color: rgba(0, 0, 0, 0.87);
}

.mat-elevation-z0, .mat-mdc-elevation-specific.mat-elevation-z0 {
  box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12);
}

.mat-elevation-z1, .mat-mdc-elevation-specific.mat-elevation-z1 {
  box-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12);
}

.mat-elevation-z2, .mat-mdc-elevation-specific.mat-elevation-z2 {
  box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
}

.mat-elevation-z3, .mat-mdc-elevation-specific.mat-elevation-z3 {
  box-shadow: 0px 3px 3px -2px rgba(0, 0, 0, 0.2), 0px 3px 4px 0px rgba(0, 0, 0, 0.14), 0px 1px 8px 0px rgba(0, 0, 0, 0.12);
}

.mat-elevation-z4, .mat-mdc-elevation-specific.mat-elevation-z4 {
  box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12);
}

.mat-elevation-z5, .mat-mdc-elevation-specific.mat-elevation-z5 {
  box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 5px 8px 0px rgba(0, 0, 0, 0.14), 0px 1px 14px 0px rgba(0, 0, 0, 0.12);
}

.mat-elevation-z6, .mat-mdc-elevation-specific.mat-elevation-z6 {
  box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12);
}

.mat-elevation-z7, .mat-mdc-elevation-specific.mat-elevation-z7 {
  box-shadow: 0px 4px 5px -2px rgba(0, 0, 0, 0.2), 0px 7px 10px 1px rgba(0, 0, 0, 0.14), 0px 2px 16px 1px rgba(0, 0, 0, 0.12);
}

.mat-elevation-z8, .mat-mdc-elevation-specific.mat-elevation-z8 {
  box-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12);
}

.mat-elevation-z9, .mat-mdc-elevation-specific.mat-elevation-z9 {
  box-shadow: 0px 5px 6px -3px rgba(0, 0, 0, 0.2), 0px 9px 12px 1px rgba(0, 0, 0, 0.14), 0px 3px 16px 2px rgba(0, 0, 0, 0.12);
}

.mat-elevation-z10, .mat-mdc-elevation-specific.mat-elevation-z10 {
  box-shadow: 0px 6px 6px -3px rgba(0, 0, 0, 0.2), 0px 10px 14px 1px rgba(0, 0, 0, 0.14), 0px 4px 18px 3px rgba(0, 0, 0, 0.12);
}

.mat-elevation-z11, .mat-mdc-elevation-specific.mat-elevation-z11 {
  box-shadow: 0px 6px 7px -4px rgba(0, 0, 0, 0.2), 0px 11px 15px 1px rgba(0, 0, 0, 0.14), 0px 4px 20px 3px rgba(0, 0, 0, 0.12);
}

.mat-elevation-z12, .mat-mdc-elevation-specific.mat-elevation-z12 {
  box-shadow: 0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12);
}

.mat-elevation-z13, .mat-mdc-elevation-specific.mat-elevation-z13 {
  box-shadow: 0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 13px 19px 2px rgba(0, 0, 0, 0.14), 0px 5px 24px 4px rgba(0, 0, 0, 0.12);
}

.mat-elevation-z14, .mat-mdc-elevation-specific.mat-elevation-z14 {
  box-shadow: 0px 7px 9px -4px rgba(0, 0, 0, 0.2), 0px 14px 21px 2px rgba(0, 0, 0, 0.14), 0px 5px 26px 4px rgba(0, 0, 0, 0.12);
}

.mat-elevation-z15, .mat-mdc-elevation-specific.mat-elevation-z15 {
  box-shadow: 0px 8px 9px -5px rgba(0, 0, 0, 0.2), 0px 15px 22px 2px rgba(0, 0, 0, 0.14), 0px 6px 28px 5px rgba(0, 0, 0, 0.12);
}

.mat-elevation-z16, .mat-mdc-elevation-specific.mat-elevation-z16 {
  box-shadow: 0px 8px 10px -5px rgba(0, 0, 0, 0.2), 0px 16px 24px 2px rgba(0, 0, 0, 0.14), 0px 6px 30px 5px rgba(0, 0, 0, 0.12);
}

.mat-elevation-z17, .mat-mdc-elevation-specific.mat-elevation-z17 {
  box-shadow: 0px 8px 11px -5px rgba(0, 0, 0, 0.2), 0px 17px 26px 2px rgba(0, 0, 0, 0.14), 0px 6px 32px 5px rgba(0, 0, 0, 0.12);
}

.mat-elevation-z18, .mat-mdc-elevation-specific.mat-elevation-z18 {
  box-shadow: 0px 9px 11px -5px rgba(0, 0, 0, 0.2), 0px 18px 28px 2px rgba(0, 0, 0, 0.14), 0px 7px 34px 6px rgba(0, 0, 0, 0.12);
}

.mat-elevation-z19, .mat-mdc-elevation-specific.mat-elevation-z19 {
  box-shadow: 0px 9px 12px -6px rgba(0, 0, 0, 0.2), 0px 19px 29px 2px rgba(0, 0, 0, 0.14), 0px 7px 36px 6px rgba(0, 0, 0, 0.12);
}

.mat-elevation-z20, .mat-mdc-elevation-specific.mat-elevation-z20 {
  box-shadow: 0px 10px 13px -6px rgba(0, 0, 0, 0.2), 0px 20px 31px 3px rgba(0, 0, 0, 0.14), 0px 8px 38px 7px rgba(0, 0, 0, 0.12);
}

.mat-elevation-z21, .mat-mdc-elevation-specific.mat-elevation-z21 {
  box-shadow: 0px 10px 13px -6px rgba(0, 0, 0, 0.2), 0px 21px 33px 3px rgba(0, 0, 0, 0.14), 0px 8px 40px 7px rgba(0, 0, 0, 0.12);
}

.mat-elevation-z22, .mat-mdc-elevation-specific.mat-elevation-z22 {
  box-shadow: 0px 10px 14px -6px rgba(0, 0, 0, 0.2), 0px 22px 35px 3px rgba(0, 0, 0, 0.14), 0px 8px 42px 7px rgba(0, 0, 0, 0.12);
}

.mat-elevation-z23, .mat-mdc-elevation-specific.mat-elevation-z23 {
  box-shadow: 0px 11px 14px -7px rgba(0, 0, 0, 0.2), 0px 23px 36px 3px rgba(0, 0, 0, 0.14), 0px 9px 44px 8px rgba(0, 0, 0, 0.12);
}

.mat-elevation-z24, .mat-mdc-elevation-specific.mat-elevation-z24 {
  box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12);
}

.mat-theme-loaded-marker {
  display: none;
}

html {
  --mdc-elevated-card-container-shape: 4px;
  --mdc-outlined-card-container-shape: 4px;
  --mdc-outlined-card-outline-width: 1px;
}

html {
  --mdc-elevated-card-container-color: white;
  --mdc-elevated-card-container-elevation: 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12);
  --mdc-outlined-card-container-color: white;
  --mdc-outlined-card-outline-color: rgba(0, 0, 0, 0.12);
  --mdc-outlined-card-container-elevation: 0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12);
  --mat-card-subtitle-text-color: rgba(0, 0, 0, 0.54);
}

html {
  --mdc-linear-progress-active-indicator-height: 4px;
  --mdc-linear-progress-track-height: 4px;
  --mdc-linear-progress-track-shape: 0;
}

.mat-mdc-progress-bar {
  --mdc-linear-progress-active-indicator-color: #3f51b5;
  --mdc-linear-progress-track-color: rgba(63, 81, 181, 0.25);
}
.mat-mdc-progress-bar.mat-accent {
  --mdc-linear-progress-active-indicator-color: #ff4081;
  --mdc-linear-progress-track-color: rgba(255, 64, 129, 0.25);
}
.mat-mdc-progress-bar.mat-warn {
  --mdc-linear-progress-active-indicator-color: #f44336;
  --mdc-linear-progress-track-color: rgba(244, 67, 54, 0.25);
}

html {
  --mdc-plain-tooltip-container-shape: 4px;
  --mdc-plain-tooltip-supporting-text-line-height: 16px;
}

html {
  --mdc-plain-tooltip-container-color: #616161;
  --mdc-plain-tooltip-supporting-text-color: #fff;
}

html {
  --mdc-filled-text-field-active-indicator-height: 1px;
  --mdc-filled-text-field-focus-active-indicator-height: 2px;
  --mdc-filled-text-field-container-shape: 4px;
  --mdc-outlined-text-field-outline-width: 1px;
  --mdc-outlined-text-field-focus-outline-width: 2px;
  --mdc-outlined-text-field-container-shape: 4px;
}

html {
  --mdc-filled-text-field-caret-color: #3f51b5;
  --mdc-filled-text-field-focus-active-indicator-color: #3f51b5;
  --mdc-filled-text-field-focus-label-text-color: rgba(63, 81, 181, 0.87);
  --mdc-filled-text-field-container-color: whitesmoke;
  --mdc-filled-text-field-disabled-container-color: #fafafa;
  --mdc-filled-text-field-label-text-color: rgba(0, 0, 0, 0.6);
  --mdc-filled-text-field-hover-label-text-color: rgba(0, 0, 0, 0.6);
  --mdc-filled-text-field-disabled-label-text-color: rgba(0, 0, 0, 0.38);
  --mdc-filled-text-field-input-text-color: rgba(0, 0, 0, 0.87);
  --mdc-filled-text-field-disabled-input-text-color: rgba(0, 0, 0, 0.38);
  --mdc-filled-text-field-input-text-placeholder-color: rgba(0, 0, 0, 0.6);
  --mdc-filled-text-field-error-hover-label-text-color: #f44336;
  --mdc-filled-text-field-error-focus-label-text-color: #f44336;
  --mdc-filled-text-field-error-label-text-color: #f44336;
  --mdc-filled-text-field-error-caret-color: #f44336;
  --mdc-filled-text-field-active-indicator-color: rgba(0, 0, 0, 0.42);
  --mdc-filled-text-field-disabled-active-indicator-color: rgba(0, 0, 0, 0.06);
  --mdc-filled-text-field-hover-active-indicator-color: rgba(0, 0, 0, 0.87);
  --mdc-filled-text-field-error-active-indicator-color: #f44336;
  --mdc-filled-text-field-error-focus-active-indicator-color: #f44336;
  --mdc-filled-text-field-error-hover-active-indicator-color: #f44336;
  --mdc-outlined-text-field-caret-color: #3f51b5;
  --mdc-outlined-text-field-focus-outline-color: #3f51b5;
  --mdc-outlined-text-field-focus-label-text-color: rgba(63, 81, 181, 0.87);
  --mdc-outlined-text-field-label-text-color: rgba(0, 0, 0, 0.6);
  --mdc-outlined-text-field-hover-label-text-color: rgba(0, 0, 0, 0.6);
  --mdc-outlined-text-field-disabled-label-text-color: rgba(0, 0, 0, 0.38);
  --mdc-outlined-text-field-input-text-color: rgba(0, 0, 0, 0.87);
  --mdc-outlined-text-field-disabled-input-text-color: rgba(0, 0, 0, 0.38);
  --mdc-outlined-text-field-input-text-placeholder-color: rgba(0, 0, 0, 0.6);
  --mdc-outlined-text-field-error-caret-color: #f44336;
  --mdc-outlined-text-field-error-focus-label-text-color: #f44336;
  --mdc-outlined-text-field-error-label-text-color: #f44336;
  --mdc-outlined-text-field-error-hover-label-text-color: #f44336;
  --mdc-outlined-text-field-outline-color: rgba(0, 0, 0, 0.38);
  --mdc-outlined-text-field-disabled-outline-color: rgba(0, 0, 0, 0.06);
  --mdc-outlined-text-field-hover-outline-color: rgba(0, 0, 0, 0.87);
  --mdc-outlined-text-field-error-focus-outline-color: #f44336;
  --mdc-outlined-text-field-error-hover-outline-color: #f44336;
  --mdc-outlined-text-field-error-outline-color: #f44336;
  --mat-form-field-focus-select-arrow-color: rgba(63, 81, 181, 0.87);
  --mat-form-field-disabled-input-text-placeholder-color: rgba(0, 0, 0, 0.38);
  --mat-form-field-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-form-field-error-text-color: #f44336;
  --mat-form-field-select-option-text-color: inherit;
  --mat-form-field-select-disabled-option-text-color: GrayText;
  --mat-form-field-leading-icon-color: unset;
  --mat-form-field-disabled-leading-icon-color: unset;
  --mat-form-field-trailing-icon-color: unset;
  --mat-form-field-disabled-trailing-icon-color: unset;
  --mat-form-field-error-focus-trailing-icon-color: unset;
  --mat-form-field-error-hover-trailing-icon-color: unset;
  --mat-form-field-error-trailing-icon-color: unset;
  --mat-form-field-enabled-select-arrow-color: rgba(0, 0, 0, 0.54);
  --mat-form-field-disabled-select-arrow-color: rgba(0, 0, 0, 0.38);
  --mat-form-field-hover-state-layer-opacity: 0.04;
  --mat-form-field-focus-state-layer-opacity: 0.08;
}

.mat-mdc-form-field.mat-accent {
  --mdc-filled-text-field-caret-color: #ff4081;
  --mdc-filled-text-field-focus-active-indicator-color: #ff4081;
  --mdc-filled-text-field-focus-label-text-color: rgba(255, 64, 129, 0.87);
  --mdc-outlined-text-field-caret-color: #ff4081;
  --mdc-outlined-text-field-focus-outline-color: #ff4081;
  --mdc-outlined-text-field-focus-label-text-color: rgba(255, 64, 129, 0.87);
  --mat-form-field-focus-select-arrow-color: rgba(255, 64, 129, 0.87);
}

.mat-mdc-form-field.mat-warn {
  --mdc-filled-text-field-caret-color: #f44336;
  --mdc-filled-text-field-focus-active-indicator-color: #f44336;
  --mdc-filled-text-field-focus-label-text-color: rgba(244, 67, 54, 0.87);
  --mdc-outlined-text-field-caret-color: #f44336;
  --mdc-outlined-text-field-focus-outline-color: #f44336;
  --mdc-outlined-text-field-focus-label-text-color: rgba(244, 67, 54, 0.87);
  --mat-form-field-focus-select-arrow-color: rgba(244, 67, 54, 0.87);
}

html {
  --mat-form-field-container-height: 56px;
  --mat-form-field-filled-label-display: block;
  --mat-form-field-container-vertical-padding: 16px;
  --mat-form-field-filled-with-label-container-padding-top: 24px;
  --mat-form-field-filled-with-label-container-padding-bottom: 8px;
}

html {
  --mat-select-container-elevation-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12);
}

html {
  --mat-select-panel-background-color: white;
  --mat-select-enabled-trigger-text-color: rgba(0, 0, 0, 0.87);
  --mat-select-disabled-trigger-text-color: rgba(0, 0, 0, 0.38);
  --mat-select-placeholder-text-color: rgba(0, 0, 0, 0.6);
  --mat-select-enabled-arrow-color: rgba(0, 0, 0, 0.54);
  --mat-select-disabled-arrow-color: rgba(0, 0, 0, 0.38);
  --mat-select-focused-arrow-color: rgba(63, 81, 181, 0.87);
  --mat-select-invalid-arrow-color: rgba(244, 67, 54, 0.87);
}
html .mat-mdc-form-field.mat-accent {
  --mat-select-panel-background-color: white;
  --mat-select-enabled-trigger-text-color: rgba(0, 0, 0, 0.87);
  --mat-select-disabled-trigger-text-color: rgba(0, 0, 0, 0.38);
  --mat-select-placeholder-text-color: rgba(0, 0, 0, 0.6);
  --mat-select-enabled-arrow-color: rgba(0, 0, 0, 0.54);
  --mat-select-disabled-arrow-color: rgba(0, 0, 0, 0.38);
  --mat-select-focused-arrow-color: rgba(255, 64, 129, 0.87);
  --mat-select-invalid-arrow-color: rgba(244, 67, 54, 0.87);
}
html .mat-mdc-form-field.mat-warn {
  --mat-select-panel-background-color: white;
  --mat-select-enabled-trigger-text-color: rgba(0, 0, 0, 0.87);
  --mat-select-disabled-trigger-text-color: rgba(0, 0, 0, 0.38);
  --mat-select-placeholder-text-color: rgba(0, 0, 0, 0.6);
  --mat-select-enabled-arrow-color: rgba(0, 0, 0, 0.54);
  --mat-select-disabled-arrow-color: rgba(0, 0, 0, 0.38);
  --mat-select-focused-arrow-color: rgba(244, 67, 54, 0.87);
  --mat-select-invalid-arrow-color: rgba(244, 67, 54, 0.87);
}

html {
  --mat-select-arrow-transform: translateY(-8px);
}

html {
  --mat-autocomplete-container-shape: 4px;
  --mat-autocomplete-container-elevation-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12);
}

html {
  --mat-autocomplete-background-color: white;
}

html {
  --mdc-dialog-container-elevation-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12);
  --mdc-dialog-container-shadow-color: #000;
  --mdc-dialog-container-shape: 4px;
  --mat-dialog-container-max-width: 80vw;
  --mat-dialog-container-small-max-width: 80vw;
  --mat-dialog-container-min-width: 0;
  --mat-dialog-actions-alignment: start;
  --mat-dialog-actions-padding: 8px;
  --mat-dialog-content-padding: 20px 24px;
  --mat-dialog-with-actions-content-padding: 20px 24px;
  --mat-dialog-headline-padding: 0 24px 9px;
}

html {
  --mdc-dialog-container-color: white;
  --mdc-dialog-subhead-color: rgba(0, 0, 0, 0.87);
  --mdc-dialog-supporting-text-color: rgba(0, 0, 0, 0.6);
}

.mat-mdc-standard-chip {
  --mdc-chip-container-shape-family: rounded;
  --mdc-chip-container-shape-radius: 16px 16px 16px 16px;
  --mdc-chip-with-avatar-avatar-shape-family: rounded;
  --mdc-chip-with-avatar-avatar-shape-radius: 14px 14px 14px 14px;
  --mdc-chip-with-avatar-avatar-size: 28px;
  --mdc-chip-with-icon-icon-size: 18px;
  --mdc-chip-outline-width: 0;
  --mdc-chip-outline-color: transparent;
  --mdc-chip-disabled-outline-color: transparent;
  --mdc-chip-focus-outline-color: transparent;
  --mdc-chip-hover-state-layer-opacity: 0.04;
  --mdc-chip-with-avatar-disabled-avatar-opacity: 1;
  --mdc-chip-flat-selected-outline-width: 0;
  --mdc-chip-selected-hover-state-layer-opacity: 0.04;
  --mdc-chip-with-trailing-icon-disabled-trailing-icon-opacity: 1;
  --mdc-chip-with-icon-disabled-icon-opacity: 1;
  --mat-chip-disabled-container-opacity: 0.4;
  --mat-chip-trailing-action-opacity: 0.54;
  --mat-chip-trailing-action-focus-opacity: 1;
  --mat-chip-trailing-action-state-layer-color: transparent;
  --mat-chip-selected-trailing-action-state-layer-color: transparent;
  --mat-chip-trailing-action-hover-state-layer-opacity: 0;
  --mat-chip-trailing-action-focus-state-layer-opacity: 0;
}

.mat-mdc-standard-chip {
  --mdc-chip-disabled-label-text-color: #212121;
  --mdc-chip-elevated-container-color: #e0e0e0;
  --mdc-chip-elevated-selected-container-color: #e0e0e0;
  --mdc-chip-elevated-disabled-container-color: #e0e0e0;
  --mdc-chip-flat-disabled-selected-container-color: #e0e0e0;
  --mdc-chip-focus-state-layer-color: black;
  --mdc-chip-hover-state-layer-color: black;
  --mdc-chip-selected-hover-state-layer-color: black;
  --mdc-chip-focus-state-layer-opacity: 0.12;
  --mdc-chip-selected-focus-state-layer-color: black;
  --mdc-chip-selected-focus-state-layer-opacity: 0.12;
  --mdc-chip-label-text-color: #212121;
  --mdc-chip-selected-label-text-color: #212121;
  --mdc-chip-with-icon-icon-color: #212121;
  --mdc-chip-with-icon-disabled-icon-color: #212121;
  --mdc-chip-with-icon-selected-icon-color: #212121;
  --mdc-chip-with-trailing-icon-disabled-trailing-icon-color: #212121;
  --mdc-chip-with-trailing-icon-trailing-icon-color: #212121;
  --mat-chip-selected-disabled-trailing-icon-color: #212121;
  --mat-chip-selected-trailing-icon-color: #212121;
}
.mat-mdc-standard-chip.mat-mdc-chip-selected.mat-primary, .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-primary {
  --mdc-chip-disabled-label-text-color: white;
  --mdc-chip-elevated-container-color: #3f51b5;
  --mdc-chip-elevated-selected-container-color: #3f51b5;
  --mdc-chip-elevated-disabled-container-color: #3f51b5;
  --mdc-chip-flat-disabled-selected-container-color: #3f51b5;
  --mdc-chip-focus-state-layer-color: black;
  --mdc-chip-hover-state-layer-color: black;
  --mdc-chip-selected-hover-state-layer-color: black;
  --mdc-chip-focus-state-layer-opacity: 0.12;
  --mdc-chip-selected-focus-state-layer-color: black;
  --mdc-chip-selected-focus-state-layer-opacity: 0.12;
  --mdc-chip-label-text-color: white;
  --mdc-chip-selected-label-text-color: white;
  --mdc-chip-with-icon-icon-color: white;
  --mdc-chip-with-icon-disabled-icon-color: white;
  --mdc-chip-with-icon-selected-icon-color: white;
  --mdc-chip-with-trailing-icon-disabled-trailing-icon-color: white;
  --mdc-chip-with-trailing-icon-trailing-icon-color: white;
  --mat-chip-selected-disabled-trailing-icon-color: white;
  --mat-chip-selected-trailing-icon-color: white;
}
.mat-mdc-standard-chip.mat-mdc-chip-selected.mat-accent, .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-accent {
  --mdc-chip-disabled-label-text-color: white;
  --mdc-chip-elevated-container-color: #ff4081;
  --mdc-chip-elevated-selected-container-color: #ff4081;
  --mdc-chip-elevated-disabled-container-color: #ff4081;
  --mdc-chip-flat-disabled-selected-container-color: #ff4081;
  --mdc-chip-focus-state-layer-color: black;
  --mdc-chip-hover-state-layer-color: black;
  --mdc-chip-selected-hover-state-layer-color: black;
  --mdc-chip-focus-state-layer-opacity: 0.12;
  --mdc-chip-selected-focus-state-layer-color: black;
  --mdc-chip-selected-focus-state-layer-opacity: 0.12;
  --mdc-chip-label-text-color: white;
  --mdc-chip-selected-label-text-color: white;
  --mdc-chip-with-icon-icon-color: white;
  --mdc-chip-with-icon-disabled-icon-color: white;
  --mdc-chip-with-icon-selected-icon-color: white;
  --mdc-chip-with-trailing-icon-disabled-trailing-icon-color: white;
  --mdc-chip-with-trailing-icon-trailing-icon-color: white;
  --mat-chip-selected-disabled-trailing-icon-color: white;
  --mat-chip-selected-trailing-icon-color: white;
}
.mat-mdc-standard-chip.mat-mdc-chip-selected.mat-warn, .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-warn {
  --mdc-chip-disabled-label-text-color: white;
  --mdc-chip-elevated-container-color: #f44336;
  --mdc-chip-elevated-selected-container-color: #f44336;
  --mdc-chip-elevated-disabled-container-color: #f44336;
  --mdc-chip-flat-disabled-selected-container-color: #f44336;
  --mdc-chip-focus-state-layer-color: black;
  --mdc-chip-hover-state-layer-color: black;
  --mdc-chip-selected-hover-state-layer-color: black;
  --mdc-chip-focus-state-layer-opacity: 0.12;
  --mdc-chip-selected-focus-state-layer-color: black;
  --mdc-chip-selected-focus-state-layer-opacity: 0.12;
  --mdc-chip-label-text-color: white;
  --mdc-chip-selected-label-text-color: white;
  --mdc-chip-with-icon-icon-color: white;
  --mdc-chip-with-icon-disabled-icon-color: white;
  --mdc-chip-with-icon-selected-icon-color: white;
  --mdc-chip-with-trailing-icon-disabled-trailing-icon-color: white;
  --mdc-chip-with-trailing-icon-trailing-icon-color: white;
  --mat-chip-selected-disabled-trailing-icon-color: white;
  --mat-chip-selected-trailing-icon-color: white;
}

.mat-mdc-chip.mat-mdc-standard-chip {
  --mdc-chip-container-height: 32px;
}

html {
  --mdc-switch-disabled-selected-icon-opacity: 0.38;
  --mdc-switch-disabled-track-opacity: 0.12;
  --mdc-switch-disabled-unselected-icon-opacity: 0.38;
  --mdc-switch-handle-height: 20px;
  --mdc-switch-handle-shape: 10px;
  --mdc-switch-handle-width: 20px;
  --mdc-switch-selected-icon-size: 18px;
  --mdc-switch-track-height: 14px;
  --mdc-switch-track-shape: 7px;
  --mdc-switch-track-width: 36px;
  --mdc-switch-unselected-icon-size: 18px;
  --mdc-switch-selected-focus-state-layer-opacity: 0.12;
  --mdc-switch-selected-hover-state-layer-opacity: 0.04;
  --mdc-switch-selected-pressed-state-layer-opacity: 0.1;
  --mdc-switch-unselected-focus-state-layer-opacity: 0.12;
  --mdc-switch-unselected-hover-state-layer-opacity: 0.04;
  --mdc-switch-unselected-pressed-state-layer-opacity: 0.1;
  --mat-switch-disabled-selected-handle-opacity: 0.38;
  --mat-switch-disabled-unselected-handle-opacity: 0.38;
  --mat-switch-unselected-handle-size: 20px;
  --mat-switch-selected-handle-size: 20px;
  --mat-switch-pressed-handle-size: 20px;
  --mat-switch-with-icon-handle-size: 20px;
  --mat-switch-selected-handle-horizontal-margin: 0;
  --mat-switch-selected-with-icon-handle-horizontal-margin: 0;
  --mat-switch-selected-pressed-handle-horizontal-margin: 0;
  --mat-switch-unselected-handle-horizontal-margin: 0;
  --mat-switch-unselected-with-icon-handle-horizontal-margin: 0;
  --mat-switch-unselected-pressed-handle-horizontal-margin: 0;
  --mat-switch-visible-track-opacity: 1;
  --mat-switch-hidden-track-opacity: 1;
  --mat-switch-visible-track-transition: transform 75ms 0ms cubic-bezier(0, 0, 0.2, 1);
  --mat-switch-hidden-track-transition: transform 75ms 0ms cubic-bezier(0.4, 0, 0.6, 1);
  --mat-switch-track-outline-width: 1px;
  --mat-switch-track-outline-color: transparent;
  --mat-switch-selected-track-outline-width: 1px;
  --mat-switch-disabled-unselected-track-outline-width: 1px;
  --mat-switch-disabled-unselected-track-outline-color: transparent;
}

html {
  --mdc-switch-selected-focus-state-layer-color: #3949ab;
  --mdc-switch-selected-handle-color: #3949ab;
  --mdc-switch-selected-hover-state-layer-color: #3949ab;
  --mdc-switch-selected-pressed-state-layer-color: #3949ab;
  --mdc-switch-selected-focus-handle-color: #1a237e;
  --mdc-switch-selected-hover-handle-color: #1a237e;
  --mdc-switch-selected-pressed-handle-color: #1a237e;
  --mdc-switch-selected-focus-track-color: #7986cb;
  --mdc-switch-selected-hover-track-color: #7986cb;
  --mdc-switch-selected-pressed-track-color: #7986cb;
  --mdc-switch-selected-track-color: #7986cb;
  --mdc-switch-disabled-selected-handle-color: #424242;
  --mdc-switch-disabled-selected-icon-color: #fff;
  --mdc-switch-disabled-selected-track-color: #424242;
  --mdc-switch-disabled-unselected-handle-color: #424242;
  --mdc-switch-disabled-unselected-icon-color: #fff;
  --mdc-switch-disabled-unselected-track-color: #424242;
  --mdc-switch-handle-surface-color: var(--mdc-theme-surface, #fff);
  --mdc-switch-handle-elevation-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12);
  --mdc-switch-handle-shadow-color: black;
  --mdc-switch-disabled-handle-elevation-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12);
  --mdc-switch-selected-icon-color: #fff;
  --mdc-switch-unselected-focus-handle-color: #212121;
  --mdc-switch-unselected-focus-state-layer-color: #424242;
  --mdc-switch-unselected-focus-track-color: #e0e0e0;
  --mdc-switch-unselected-handle-color: #616161;
  --mdc-switch-unselected-hover-handle-color: #212121;
  --mdc-switch-unselected-hover-state-layer-color: #424242;
  --mdc-switch-unselected-hover-track-color: #e0e0e0;
  --mdc-switch-unselected-icon-color: #fff;
  --mdc-switch-unselected-pressed-handle-color: #212121;
  --mdc-switch-unselected-pressed-state-layer-color: #424242;
  --mdc-switch-unselected-pressed-track-color: #e0e0e0;
  --mdc-switch-unselected-track-color: #e0e0e0;
  --mdc-switch-disabled-label-text-color: rgba(0, 0, 0, 0.38);
}
html .mat-mdc-slide-toggle {
  --mdc-form-field-label-text-color: rgba(0, 0, 0, 0.87);
}
html .mat-mdc-slide-toggle.mat-accent {
  --mdc-switch-selected-focus-state-layer-color: #d81b60;
  --mdc-switch-selected-handle-color: #d81b60;
  --mdc-switch-selected-hover-state-layer-color: #d81b60;
  --mdc-switch-selected-pressed-state-layer-color: #d81b60;
  --mdc-switch-selected-focus-handle-color: #880e4f;
  --mdc-switch-selected-hover-handle-color: #880e4f;
  --mdc-switch-selected-pressed-handle-color: #880e4f;
  --mdc-switch-selected-focus-track-color: #f06292;
  --mdc-switch-selected-hover-track-color: #f06292;
  --mdc-switch-selected-pressed-track-color: #f06292;
  --mdc-switch-selected-track-color: #f06292;
}
html .mat-mdc-slide-toggle.mat-warn {
  --mdc-switch-selected-focus-state-layer-color: #e53935;
  --mdc-switch-selected-handle-color: #e53935;
  --mdc-switch-selected-hover-state-layer-color: #e53935;
  --mdc-switch-selected-pressed-state-layer-color: #e53935;
  --mdc-switch-selected-focus-handle-color: #b71c1c;
  --mdc-switch-selected-hover-handle-color: #b71c1c;
  --mdc-switch-selected-pressed-handle-color: #b71c1c;
  --mdc-switch-selected-focus-track-color: #e57373;
  --mdc-switch-selected-hover-track-color: #e57373;
  --mdc-switch-selected-pressed-track-color: #e57373;
  --mdc-switch-selected-track-color: #e57373;
}

html {
  --mdc-switch-state-layer-size: 40px;
}

html {
  --mdc-radio-disabled-selected-icon-opacity: 0.38;
  --mdc-radio-disabled-unselected-icon-opacity: 0.38;
  --mdc-radio-state-layer-size: 40px;
}

.mat-mdc-radio-button {
  --mdc-form-field-label-text-color: rgba(0, 0, 0, 0.87);
}
.mat-mdc-radio-button.mat-primary {
  --mdc-radio-disabled-selected-icon-color: black;
  --mdc-radio-disabled-unselected-icon-color: black;
  --mdc-radio-unselected-hover-icon-color: #212121;
  --mdc-radio-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mdc-radio-unselected-pressed-icon-color: rgba(0, 0, 0, 0.54);
  --mdc-radio-selected-focus-icon-color: #3f51b5;
  --mdc-radio-selected-hover-icon-color: #3f51b5;
  --mdc-radio-selected-icon-color: #3f51b5;
  --mdc-radio-selected-pressed-icon-color: #3f51b5;
  --mat-radio-ripple-color: black;
  --mat-radio-checked-ripple-color: #3f51b5;
  --mat-radio-disabled-label-color: rgba(0, 0, 0, 0.38);
}
.mat-mdc-radio-button.mat-accent {
  --mdc-radio-disabled-selected-icon-color: black;
  --mdc-radio-disabled-unselected-icon-color: black;
  --mdc-radio-unselected-hover-icon-color: #212121;
  --mdc-radio-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mdc-radio-unselected-pressed-icon-color: rgba(0, 0, 0, 0.54);
  --mdc-radio-selected-focus-icon-color: #ff4081;
  --mdc-radio-selected-hover-icon-color: #ff4081;
  --mdc-radio-selected-icon-color: #ff4081;
  --mdc-radio-selected-pressed-icon-color: #ff4081;
  --mat-radio-ripple-color: black;
  --mat-radio-checked-ripple-color: #ff4081;
  --mat-radio-disabled-label-color: rgba(0, 0, 0, 0.38);
}
.mat-mdc-radio-button.mat-warn {
  --mdc-radio-disabled-selected-icon-color: black;
  --mdc-radio-disabled-unselected-icon-color: black;
  --mdc-radio-unselected-hover-icon-color: #212121;
  --mdc-radio-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mdc-radio-unselected-pressed-icon-color: rgba(0, 0, 0, 0.54);
  --mdc-radio-selected-focus-icon-color: #f44336;
  --mdc-radio-selected-hover-icon-color: #f44336;
  --mdc-radio-selected-icon-color: #f44336;
  --mdc-radio-selected-pressed-icon-color: #f44336;
  --mat-radio-ripple-color: black;
  --mat-radio-checked-ripple-color: #f44336;
  --mat-radio-disabled-label-color: rgba(0, 0, 0, 0.38);
}

html {
  --mdc-radio-state-layer-size: 40px;
  --mat-radio-touch-target-display: block;
}

html {
  --mat-slider-value-indicator-width: auto;
  --mat-slider-value-indicator-height: 32px;
  --mat-slider-value-indicator-caret-display: block;
  --mat-slider-value-indicator-border-radius: 4px;
  --mat-slider-value-indicator-padding: 0 12px;
  --mat-slider-value-indicator-text-transform: none;
  --mat-slider-value-indicator-container-transform: translateX(-50%);
  --mdc-slider-active-track-height: 6px;
  --mdc-slider-active-track-shape: 9999px;
  --mdc-slider-handle-height: 20px;
  --mdc-slider-handle-shape: 50%;
  --mdc-slider-handle-width: 20px;
  --mdc-slider-inactive-track-height: 4px;
  --mdc-slider-inactive-track-shape: 9999px;
  --mdc-slider-with-overlap-handle-outline-width: 1px;
  --mdc-slider-with-tick-marks-active-container-opacity: 0.6;
  --mdc-slider-with-tick-marks-container-shape: 50%;
  --mdc-slider-with-tick-marks-container-size: 2px;
  --mdc-slider-with-tick-marks-inactive-container-opacity: 0.6;
}

html {
  --mdc-slider-handle-color: #3f51b5;
  --mdc-slider-focus-handle-color: #3f51b5;
  --mdc-slider-hover-handle-color: #3f51b5;
  --mdc-slider-active-track-color: #3f51b5;
  --mdc-slider-inactive-track-color: #3f51b5;
  --mdc-slider-with-tick-marks-inactive-container-color: #3f51b5;
  --mdc-slider-with-tick-marks-active-container-color: white;
  --mdc-slider-disabled-active-track-color: #000;
  --mdc-slider-disabled-handle-color: #000;
  --mdc-slider-disabled-inactive-track-color: #000;
  --mdc-slider-label-container-color: #000;
  --mdc-slider-label-label-text-color: #fff;
  --mdc-slider-with-overlap-handle-outline-color: #fff;
  --mdc-slider-with-tick-marks-disabled-container-color: #000;
  --mdc-slider-handle-elevation: 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12);
  --mat-slider-ripple-color: #3f51b5;
  --mat-slider-hover-state-layer-color: rgba(63, 81, 181, 0.05);
  --mat-slider-focus-state-layer-color: rgba(63, 81, 181, 0.2);
  --mat-slider-value-indicator-opacity: 0.6;
}
html .mat-accent {
  --mat-slider-ripple-color: #ff4081;
  --mat-slider-hover-state-layer-color: rgba(255, 64, 129, 0.05);
  --mat-slider-focus-state-layer-color: rgba(255, 64, 129, 0.2);
  --mdc-slider-handle-color: #ff4081;
  --mdc-slider-focus-handle-color: #ff4081;
  --mdc-slider-hover-handle-color: #ff4081;
  --mdc-slider-active-track-color: #ff4081;
  --mdc-slider-inactive-track-color: #ff4081;
  --mdc-slider-with-tick-marks-inactive-container-color: #ff4081;
  --mdc-slider-with-tick-marks-active-container-color: white;
}
html .mat-warn {
  --mat-slider-ripple-color: #f44336;
  --mat-slider-hover-state-layer-color: rgba(244, 67, 54, 0.05);
  --mat-slider-focus-state-layer-color: rgba(244, 67, 54, 0.2);
  --mdc-slider-handle-color: #f44336;
  --mdc-slider-focus-handle-color: #f44336;
  --mdc-slider-hover-handle-color: #f44336;
  --mdc-slider-active-track-color: #f44336;
  --mdc-slider-inactive-track-color: #f44336;
  --mdc-slider-with-tick-marks-inactive-container-color: #f44336;
  --mdc-slider-with-tick-marks-active-container-color: white;
}

html {
  --mat-menu-container-shape: 4px;
  --mat-menu-divider-bottom-spacing: 0;
  --mat-menu-divider-top-spacing: 0;
  --mat-menu-item-spacing: 16px;
  --mat-menu-item-icon-size: 24px;
  --mat-menu-item-leading-spacing: 16px;
  --mat-menu-item-trailing-spacing: 16px;
  --mat-menu-item-with-icon-leading-spacing: 16px;
  --mat-menu-item-with-icon-trailing-spacing: 16px;
}

html {
  --mat-menu-item-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-menu-item-icon-color: rgba(0, 0, 0, 0.87);
  --mat-menu-item-hover-state-layer-color: rgba(0, 0, 0, 0.04);
  --mat-menu-item-focus-state-layer-color: rgba(0, 0, 0, 0.04);
  --mat-menu-container-color: white;
  --mat-menu-divider-color: rgba(0, 0, 0, 0.12);
}

html {
  --mdc-list-list-item-container-shape: 0;
  --mdc-list-list-item-leading-avatar-shape: 50%;
  --mdc-list-list-item-container-color: transparent;
  --mdc-list-list-item-selected-container-color: transparent;
  --mdc-list-list-item-leading-avatar-color: transparent;
  --mdc-list-list-item-leading-icon-size: 24px;
  --mdc-list-list-item-leading-avatar-size: 40px;
  --mdc-list-list-item-trailing-icon-size: 24px;
  --mdc-list-list-item-disabled-state-layer-color: transparent;
  --mdc-list-list-item-disabled-state-layer-opacity: 0;
  --mdc-list-list-item-disabled-label-text-opacity: 0.38;
  --mdc-list-list-item-disabled-leading-icon-opacity: 0.38;
  --mdc-list-list-item-disabled-trailing-icon-opacity: 0.38;
  --mat-list-active-indicator-color: transparent;
  --mat-list-active-indicator-shape: 4px;
}

html {
  --mdc-list-list-item-label-text-color: rgba(0, 0, 0, 0.87);
  --mdc-list-list-item-supporting-text-color: rgba(0, 0, 0, 0.54);
  --mdc-list-list-item-leading-icon-color: rgba(0, 0, 0, 0.38);
  --mdc-list-list-item-trailing-supporting-text-color: rgba(0, 0, 0, 0.38);
  --mdc-list-list-item-trailing-icon-color: rgba(0, 0, 0, 0.38);
  --mdc-list-list-item-selected-trailing-icon-color: rgba(0, 0, 0, 0.38);
  --mdc-list-list-item-disabled-label-text-color: black;
  --mdc-list-list-item-disabled-leading-icon-color: black;
  --mdc-list-list-item-disabled-trailing-icon-color: black;
  --mdc-list-list-item-hover-label-text-color: rgba(0, 0, 0, 0.87);
  --mdc-list-list-item-hover-leading-icon-color: rgba(0, 0, 0, 0.38);
  --mdc-list-list-item-hover-trailing-icon-color: rgba(0, 0, 0, 0.38);
  --mdc-list-list-item-focus-label-text-color: rgba(0, 0, 0, 0.87);
  --mdc-list-list-item-hover-state-layer-color: black;
  --mdc-list-list-item-hover-state-layer-opacity: 0.04;
  --mdc-list-list-item-focus-state-layer-color: black;
  --mdc-list-list-item-focus-state-layer-opacity: 0.12;
}

.mdc-list-item__start,
.mdc-list-item__end {
  --mdc-radio-disabled-selected-icon-color: black;
  --mdc-radio-disabled-unselected-icon-color: black;
  --mdc-radio-unselected-hover-icon-color: #212121;
  --mdc-radio-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mdc-radio-unselected-pressed-icon-color: rgba(0, 0, 0, 0.54);
  --mdc-radio-selected-focus-icon-color: #3f51b5;
  --mdc-radio-selected-hover-icon-color: #3f51b5;
  --mdc-radio-selected-icon-color: #3f51b5;
  --mdc-radio-selected-pressed-icon-color: #3f51b5;
}

.mat-accent .mdc-list-item__start,
.mat-accent .mdc-list-item__end {
  --mdc-radio-disabled-selected-icon-color: black;
  --mdc-radio-disabled-unselected-icon-color: black;
  --mdc-radio-unselected-hover-icon-color: #212121;
  --mdc-radio-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mdc-radio-unselected-pressed-icon-color: rgba(0, 0, 0, 0.54);
  --mdc-radio-selected-focus-icon-color: #ff4081;
  --mdc-radio-selected-hover-icon-color: #ff4081;
  --mdc-radio-selected-icon-color: #ff4081;
  --mdc-radio-selected-pressed-icon-color: #ff4081;
}

.mat-warn .mdc-list-item__start,
.mat-warn .mdc-list-item__end {
  --mdc-radio-disabled-selected-icon-color: black;
  --mdc-radio-disabled-unselected-icon-color: black;
  --mdc-radio-unselected-hover-icon-color: #212121;
  --mdc-radio-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mdc-radio-unselected-pressed-icon-color: rgba(0, 0, 0, 0.54);
  --mdc-radio-selected-focus-icon-color: #f44336;
  --mdc-radio-selected-hover-icon-color: #f44336;
  --mdc-radio-selected-icon-color: #f44336;
  --mdc-radio-selected-pressed-icon-color: #f44336;
}

.mat-mdc-list-option {
  --mdc-checkbox-disabled-selected-icon-color: rgba(0, 0, 0, 0.38);
  --mdc-checkbox-disabled-unselected-icon-color: rgba(0, 0, 0, 0.38);
  --mdc-checkbox-selected-checkmark-color: white;
  --mdc-checkbox-selected-focus-icon-color: #3f51b5;
  --mdc-checkbox-selected-hover-icon-color: #3f51b5;
  --mdc-checkbox-selected-icon-color: #3f51b5;
  --mdc-checkbox-selected-pressed-icon-color: #3f51b5;
  --mdc-checkbox-unselected-focus-icon-color: #212121;
  --mdc-checkbox-unselected-hover-icon-color: #212121;
  --mdc-checkbox-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mdc-checkbox-unselected-pressed-icon-color: rgba(0, 0, 0, 0.54);
  --mdc-checkbox-selected-focus-state-layer-color: #3f51b5;
  --mdc-checkbox-selected-hover-state-layer-color: #3f51b5;
  --mdc-checkbox-selected-pressed-state-layer-color: #3f51b5;
  --mdc-checkbox-unselected-focus-state-layer-color: black;
  --mdc-checkbox-unselected-hover-state-layer-color: black;
  --mdc-checkbox-unselected-pressed-state-layer-color: black;
}

.mat-mdc-list-option.mat-accent {
  --mdc-checkbox-disabled-selected-icon-color: rgba(0, 0, 0, 0.38);
  --mdc-checkbox-disabled-unselected-icon-color: rgba(0, 0, 0, 0.38);
  --mdc-checkbox-selected-checkmark-color: white;
  --mdc-checkbox-selected-focus-icon-color: #ff4081;
  --mdc-checkbox-selected-hover-icon-color: #ff4081;
  --mdc-checkbox-selected-icon-color: #ff4081;
  --mdc-checkbox-selected-pressed-icon-color: #ff4081;
  --mdc-checkbox-unselected-focus-icon-color: #212121;
  --mdc-checkbox-unselected-hover-icon-color: #212121;
  --mdc-checkbox-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mdc-checkbox-unselected-pressed-icon-color: rgba(0, 0, 0, 0.54);
  --mdc-checkbox-selected-focus-state-layer-color: #ff4081;
  --mdc-checkbox-selected-hover-state-layer-color: #ff4081;
  --mdc-checkbox-selected-pressed-state-layer-color: #ff4081;
  --mdc-checkbox-unselected-focus-state-layer-color: black;
  --mdc-checkbox-unselected-hover-state-layer-color: black;
  --mdc-checkbox-unselected-pressed-state-layer-color: black;
}

.mat-mdc-list-option.mat-warn {
  --mdc-checkbox-disabled-selected-icon-color: rgba(0, 0, 0, 0.38);
  --mdc-checkbox-disabled-unselected-icon-color: rgba(0, 0, 0, 0.38);
  --mdc-checkbox-selected-checkmark-color: white;
  --mdc-checkbox-selected-focus-icon-color: #f44336;
  --mdc-checkbox-selected-hover-icon-color: #f44336;
  --mdc-checkbox-selected-icon-color: #f44336;
  --mdc-checkbox-selected-pressed-icon-color: #f44336;
  --mdc-checkbox-unselected-focus-icon-color: #212121;
  --mdc-checkbox-unselected-hover-icon-color: #212121;
  --mdc-checkbox-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mdc-checkbox-unselected-pressed-icon-color: rgba(0, 0, 0, 0.54);
  --mdc-checkbox-selected-focus-state-layer-color: #f44336;
  --mdc-checkbox-selected-hover-state-layer-color: #f44336;
  --mdc-checkbox-selected-pressed-state-layer-color: #f44336;
  --mdc-checkbox-unselected-focus-state-layer-color: black;
  --mdc-checkbox-unselected-hover-state-layer-color: black;
  --mdc-checkbox-unselected-pressed-state-layer-color: black;
}

.mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--selected .mdc-list-item__primary-text,
.mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--activated .mdc-list-item__primary-text {
  color: #3f51b5;
}
.mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--selected.mdc-list-item--with-leading-icon .mdc-list-item__start,
.mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--activated.mdc-list-item--with-leading-icon .mdc-list-item__start {
  color: #3f51b5;
}

.mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__start,
.mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__content,
.mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__end {
  opacity: 1;
}

html {
  --mdc-list-list-item-one-line-container-height: 48px;
  --mdc-list-list-item-two-line-container-height: 64px;
  --mdc-list-list-item-three-line-container-height: 88px;
  --mat-list-list-item-leading-icon-start-space: 16px;
  --mat-list-list-item-leading-icon-end-space: 32px;
}

.mdc-list-item__start,
.mdc-list-item__end {
  --mdc-radio-state-layer-size: 40px;
}

.mat-mdc-list-item.mdc-list-item--with-leading-avatar.mdc-list-item--with-one-line, .mat-mdc-list-item.mdc-list-item--with-leading-checkbox.mdc-list-item--with-one-line, .mat-mdc-list-item.mdc-list-item--with-leading-icon.mdc-list-item--with-one-line {
  height: 56px;
}
.mat-mdc-list-item.mdc-list-item--with-leading-avatar.mdc-list-item--with-two-lines, .mat-mdc-list-item.mdc-list-item--with-leading-checkbox.mdc-list-item--with-two-lines, .mat-mdc-list-item.mdc-list-item--with-leading-icon.mdc-list-item--with-two-lines {
  height: 72px;
}

html {
  --mat-paginator-container-text-color: rgba(0, 0, 0, 0.87);
  --mat-paginator-container-background-color: white;
  --mat-paginator-enabled-icon-color: rgba(0, 0, 0, 0.54);
  --mat-paginator-disabled-icon-color: rgba(0, 0, 0, 0.12);
}

html {
  --mat-paginator-container-size: 56px;
  --mat-paginator-form-field-container-height: 40px;
  --mat-paginator-form-field-container-vertical-padding: 8px;
}

html {
  --mdc-tab-indicator-active-indicator-height: 2px;
  --mdc-tab-indicator-active-indicator-shape: 0;
  --mdc-secondary-navigation-tab-container-height: 48px;
  --mat-tab-header-divider-color: transparent;
  --mat-tab-header-divider-height: 0;
}

.mat-mdc-tab-group, .mat-mdc-tab-nav-bar {
  --mdc-tab-indicator-active-indicator-color: #3f51b5;
  --mat-tab-header-disabled-ripple-color: rgba(0, 0, 0, 0.38);
  --mat-tab-header-pagination-icon-color: black;
  --mat-tab-header-inactive-label-text-color: rgba(0, 0, 0, 0.6);
  --mat-tab-header-active-label-text-color: #3f51b5;
  --mat-tab-header-active-ripple-color: #3f51b5;
  --mat-tab-header-inactive-ripple-color: #3f51b5;
  --mat-tab-header-inactive-focus-label-text-color: rgba(0, 0, 0, 0.6);
  --mat-tab-header-inactive-hover-label-text-color: rgba(0, 0, 0, 0.6);
  --mat-tab-header-active-focus-label-text-color: #3f51b5;
  --mat-tab-header-active-hover-label-text-color: #3f51b5;
  --mat-tab-header-active-focus-indicator-color: #3f51b5;
  --mat-tab-header-active-hover-indicator-color: #3f51b5;
}
.mat-mdc-tab-group.mat-accent, .mat-mdc-tab-nav-bar.mat-accent {
  --mdc-tab-indicator-active-indicator-color: #ff4081;
  --mat-tab-header-disabled-ripple-color: rgba(0, 0, 0, 0.38);
  --mat-tab-header-pagination-icon-color: black;
  --mat-tab-header-inactive-label-text-color: rgba(0, 0, 0, 0.6);
  --mat-tab-header-active-label-text-color: #ff4081;
  --mat-tab-header-active-ripple-color: #ff4081;
  --mat-tab-header-inactive-ripple-color: #ff4081;
  --mat-tab-header-inactive-focus-label-text-color: rgba(0, 0, 0, 0.6);
  --mat-tab-header-inactive-hover-label-text-color: rgba(0, 0, 0, 0.6);
  --mat-tab-header-active-focus-label-text-color: #ff4081;
  --mat-tab-header-active-hover-label-text-color: #ff4081;
  --mat-tab-header-active-focus-indicator-color: #ff4081;
  --mat-tab-header-active-hover-indicator-color: #ff4081;
}
.mat-mdc-tab-group.mat-warn, .mat-mdc-tab-nav-bar.mat-warn {
  --mdc-tab-indicator-active-indicator-color: #f44336;
  --mat-tab-header-disabled-ripple-color: rgba(0, 0, 0, 0.38);
  --mat-tab-header-pagination-icon-color: black;
  --mat-tab-header-inactive-label-text-color: rgba(0, 0, 0, 0.6);
  --mat-tab-header-active-label-text-color: #f44336;
  --mat-tab-header-active-ripple-color: #f44336;
  --mat-tab-header-inactive-ripple-color: #f44336;
  --mat-tab-header-inactive-focus-label-text-color: rgba(0, 0, 0, 0.6);
  --mat-tab-header-inactive-hover-label-text-color: rgba(0, 0, 0, 0.6);
  --mat-tab-header-active-focus-label-text-color: #f44336;
  --mat-tab-header-active-hover-label-text-color: #f44336;
  --mat-tab-header-active-focus-indicator-color: #f44336;
  --mat-tab-header-active-hover-indicator-color: #f44336;
}
.mat-mdc-tab-group.mat-background-primary, .mat-mdc-tab-nav-bar.mat-background-primary {
  --mat-tab-header-with-background-background-color: #3f51b5;
  --mat-tab-header-with-background-foreground-color: white;
}
.mat-mdc-tab-group.mat-background-accent, .mat-mdc-tab-nav-bar.mat-background-accent {
  --mat-tab-header-with-background-background-color: #ff4081;
  --mat-tab-header-with-background-foreground-color: white;
}
.mat-mdc-tab-group.mat-background-warn, .mat-mdc-tab-nav-bar.mat-background-warn {
  --mat-tab-header-with-background-background-color: #f44336;
  --mat-tab-header-with-background-foreground-color: white;
}

.mat-mdc-tab-header {
  --mdc-secondary-navigation-tab-container-height: 48px;
}

html {
  --mdc-checkbox-disabled-selected-checkmark-color: #fff;
  --mdc-checkbox-selected-focus-state-layer-opacity: 0.16;
  --mdc-checkbox-selected-hover-state-layer-opacity: 0.04;
  --mdc-checkbox-selected-pressed-state-layer-opacity: 0.16;
  --mdc-checkbox-unselected-focus-state-layer-opacity: 0.16;
  --mdc-checkbox-unselected-hover-state-layer-opacity: 0.04;
  --mdc-checkbox-unselected-pressed-state-layer-opacity: 0.16;
}

html {
  --mdc-checkbox-disabled-selected-icon-color: rgba(0, 0, 0, 0.38);
  --mdc-checkbox-disabled-unselected-icon-color: rgba(0, 0, 0, 0.38);
  --mdc-checkbox-selected-checkmark-color: white;
  --mdc-checkbox-selected-focus-icon-color: #ff4081;
  --mdc-checkbox-selected-hover-icon-color: #ff4081;
  --mdc-checkbox-selected-icon-color: #ff4081;
  --mdc-checkbox-selected-pressed-icon-color: #ff4081;
  --mdc-checkbox-unselected-focus-icon-color: #212121;
  --mdc-checkbox-unselected-hover-icon-color: #212121;
  --mdc-checkbox-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mdc-checkbox-unselected-pressed-icon-color: rgba(0, 0, 0, 0.54);
  --mdc-checkbox-selected-focus-state-layer-color: #ff4081;
  --mdc-checkbox-selected-hover-state-layer-color: #ff4081;
  --mdc-checkbox-selected-pressed-state-layer-color: #ff4081;
  --mdc-checkbox-unselected-focus-state-layer-color: black;
  --mdc-checkbox-unselected-hover-state-layer-color: black;
  --mdc-checkbox-unselected-pressed-state-layer-color: black;
  --mat-checkbox-disabled-label-color: rgba(0, 0, 0, 0.38);
}

.mat-mdc-checkbox {
  --mdc-form-field-label-text-color: rgba(0, 0, 0, 0.87);
}
.mat-mdc-checkbox.mat-primary {
  --mdc-checkbox-disabled-selected-icon-color: rgba(0, 0, 0, 0.38);
  --mdc-checkbox-disabled-unselected-icon-color: rgba(0, 0, 0, 0.38);
  --mdc-checkbox-selected-checkmark-color: white;
  --mdc-checkbox-selected-focus-icon-color: #3f51b5;
  --mdc-checkbox-selected-hover-icon-color: #3f51b5;
  --mdc-checkbox-selected-icon-color: #3f51b5;
  --mdc-checkbox-selected-pressed-icon-color: #3f51b5;
  --mdc-checkbox-unselected-focus-icon-color: #212121;
  --mdc-checkbox-unselected-hover-icon-color: #212121;
  --mdc-checkbox-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mdc-checkbox-unselected-pressed-icon-color: rgba(0, 0, 0, 0.54);
  --mdc-checkbox-selected-focus-state-layer-color: #3f51b5;
  --mdc-checkbox-selected-hover-state-layer-color: #3f51b5;
  --mdc-checkbox-selected-pressed-state-layer-color: #3f51b5;
  --mdc-checkbox-unselected-focus-state-layer-color: black;
  --mdc-checkbox-unselected-hover-state-layer-color: black;
  --mdc-checkbox-unselected-pressed-state-layer-color: black;
}
.mat-mdc-checkbox.mat-warn {
  --mdc-checkbox-disabled-selected-icon-color: rgba(0, 0, 0, 0.38);
  --mdc-checkbox-disabled-unselected-icon-color: rgba(0, 0, 0, 0.38);
  --mdc-checkbox-selected-checkmark-color: white;
  --mdc-checkbox-selected-focus-icon-color: #f44336;
  --mdc-checkbox-selected-hover-icon-color: #f44336;
  --mdc-checkbox-selected-icon-color: #f44336;
  --mdc-checkbox-selected-pressed-icon-color: #f44336;
  --mdc-checkbox-unselected-focus-icon-color: #212121;
  --mdc-checkbox-unselected-hover-icon-color: #212121;
  --mdc-checkbox-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mdc-checkbox-unselected-pressed-icon-color: rgba(0, 0, 0, 0.54);
  --mdc-checkbox-selected-focus-state-layer-color: #f44336;
  --mdc-checkbox-selected-hover-state-layer-color: #f44336;
  --mdc-checkbox-selected-pressed-state-layer-color: #f44336;
  --mdc-checkbox-unselected-focus-state-layer-color: black;
  --mdc-checkbox-unselected-hover-state-layer-color: black;
  --mdc-checkbox-unselected-pressed-state-layer-color: black;
}

html {
  --mdc-checkbox-state-layer-size: 40px;
  --mat-checkbox-touch-target-display: block;
}

html {
  --mdc-text-button-container-shape: 4px;
  --mdc-text-button-keep-touch-target: false;
  --mdc-filled-button-container-shape: 4px;
  --mdc-filled-button-keep-touch-target: false;
  --mdc-protected-button-container-shape: 4px;
  --mdc-protected-button-keep-touch-target: false;
  --mdc-outlined-button-keep-touch-target: false;
  --mdc-outlined-button-outline-width: 1px;
  --mdc-outlined-button-container-shape: 4px;
  --mat-text-button-horizontal-padding: 8px;
  --mat-text-button-with-icon-horizontal-padding: 8px;
  --mat-text-button-icon-spacing: 8px;
  --mat-text-button-icon-offset: 0;
  --mat-filled-button-horizontal-padding: 16px;
  --mat-filled-button-icon-spacing: 8px;
  --mat-filled-button-icon-offset: -4px;
  --mat-protected-button-horizontal-padding: 16px;
  --mat-protected-button-icon-spacing: 8px;
  --mat-protected-button-icon-offset: -4px;
  --mat-outlined-button-horizontal-padding: 15px;
  --mat-outlined-button-icon-spacing: 8px;
  --mat-outlined-button-icon-offset: -4px;
}

html {
  --mdc-text-button-label-text-color: black;
  --mdc-text-button-disabled-label-text-color: rgba(0, 0, 0, 0.38);
  --mat-text-button-state-layer-color: black;
  --mat-text-button-disabled-state-layer-color: black;
  --mat-text-button-ripple-color: rgba(0, 0, 0, 0.1);
  --mat-text-button-hover-state-layer-opacity: 0.04;
  --mat-text-button-focus-state-layer-opacity: 0.12;
  --mat-text-button-pressed-state-layer-opacity: 0.12;
  --mdc-filled-button-container-color: white;
  --mdc-filled-button-label-text-color: black;
  --mdc-filled-button-disabled-container-color: rgba(0, 0, 0, 0.12);
  --mdc-filled-button-disabled-label-text-color: rgba(0, 0, 0, 0.38);
  --mat-filled-button-state-layer-color: black;
  --mat-filled-button-disabled-state-layer-color: black;
  --mat-filled-button-ripple-color: rgba(0, 0, 0, 0.1);
  --mat-filled-button-hover-state-layer-opacity: 0.04;
  --mat-filled-button-focus-state-layer-opacity: 0.12;
  --mat-filled-button-pressed-state-layer-opacity: 0.12;
  --mdc-protected-button-container-color: white;
  --mdc-protected-button-label-text-color: black;
  --mdc-protected-button-disabled-container-color: rgba(0, 0, 0, 0.12);
  --mdc-protected-button-disabled-label-text-color: rgba(0, 0, 0, 0.38);
  --mdc-protected-button-container-elevation-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
  --mdc-protected-button-disabled-container-elevation-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12);
  --mdc-protected-button-focus-container-elevation-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12);
  --mdc-protected-button-hover-container-elevation-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12);
  --mdc-protected-button-pressed-container-elevation-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12);
  --mdc-protected-button-container-shadow-color: #000;
  --mat-protected-button-state-layer-color: black;
  --mat-protected-button-disabled-state-layer-color: black;
  --mat-protected-button-ripple-color: rgba(0, 0, 0, 0.1);
  --mat-protected-button-hover-state-layer-opacity: 0.04;
  --mat-protected-button-focus-state-layer-opacity: 0.12;
  --mat-protected-button-pressed-state-layer-opacity: 0.12;
  --mdc-outlined-button-disabled-outline-color: rgba(0, 0, 0, 0.12);
  --mdc-outlined-button-disabled-label-text-color: rgba(0, 0, 0, 0.38);
  --mdc-outlined-button-label-text-color: black;
  --mdc-outlined-button-outline-color: rgba(0, 0, 0, 0.12);
  --mat-outlined-button-state-layer-color: black;
  --mat-outlined-button-disabled-state-layer-color: black;
  --mat-outlined-button-ripple-color: rgba(0, 0, 0, 0.1);
  --mat-outlined-button-hover-state-layer-opacity: 0.04;
  --mat-outlined-button-focus-state-layer-opacity: 0.12;
  --mat-outlined-button-pressed-state-layer-opacity: 0.12;
}

.mat-mdc-button.mat-primary {
  --mdc-text-button-label-text-color: #3f51b5;
  --mat-text-button-state-layer-color: #3f51b5;
  --mat-text-button-ripple-color: rgba(63, 81, 181, 0.1);
}
.mat-mdc-button.mat-accent {
  --mdc-text-button-label-text-color: #ff4081;
  --mat-text-button-state-layer-color: #ff4081;
  --mat-text-button-ripple-color: rgba(255, 64, 129, 0.1);
}
.mat-mdc-button.mat-warn {
  --mdc-text-button-label-text-color: #f44336;
  --mat-text-button-state-layer-color: #f44336;
  --mat-text-button-ripple-color: rgba(244, 67, 54, 0.1);
}

.mat-mdc-unelevated-button.mat-primary {
  --mdc-filled-button-container-color: #3f51b5;
  --mdc-filled-button-label-text-color: white;
  --mat-filled-button-state-layer-color: white;
  --mat-filled-button-ripple-color: rgba(255, 255, 255, 0.1);
}
.mat-mdc-unelevated-button.mat-accent {
  --mdc-filled-button-container-color: #ff4081;
  --mdc-filled-button-label-text-color: white;
  --mat-filled-button-state-layer-color: white;
  --mat-filled-button-ripple-color: rgba(255, 255, 255, 0.1);
}
.mat-mdc-unelevated-button.mat-warn {
  --mdc-filled-button-container-color: #f44336;
  --mdc-filled-button-label-text-color: white;
  --mat-filled-button-state-layer-color: white;
  --mat-filled-button-ripple-color: rgba(255, 255, 255, 0.1);
}

.mat-mdc-raised-button.mat-primary {
  --mdc-protected-button-container-color: #3f51b5;
  --mdc-protected-button-label-text-color: white;
  --mat-protected-button-state-layer-color: white;
  --mat-protected-button-ripple-color: rgba(255, 255, 255, 0.1);
}
.mat-mdc-raised-button.mat-accent {
  --mdc-protected-button-container-color: #ff4081;
  --mdc-protected-button-label-text-color: white;
  --mat-protected-button-state-layer-color: white;
  --mat-protected-button-ripple-color: rgba(255, 255, 255, 0.1);
}
.mat-mdc-raised-button.mat-warn {
  --mdc-protected-button-container-color: #f44336;
  --mdc-protected-button-label-text-color: white;
  --mat-protected-button-state-layer-color: white;
  --mat-protected-button-ripple-color: rgba(255, 255, 255, 0.1);
}

.mat-mdc-outlined-button.mat-primary {
  --mdc-outlined-button-label-text-color: #3f51b5;
  --mdc-outlined-button-outline-color: rgba(0, 0, 0, 0.12);
  --mat-outlined-button-state-layer-color: #3f51b5;
  --mat-outlined-button-ripple-color: rgba(63, 81, 181, 0.1);
}
.mat-mdc-outlined-button.mat-accent {
  --mdc-outlined-button-label-text-color: #ff4081;
  --mdc-outlined-button-outline-color: rgba(0, 0, 0, 0.12);
  --mat-outlined-button-state-layer-color: #ff4081;
  --mat-outlined-button-ripple-color: rgba(255, 64, 129, 0.1);
}
.mat-mdc-outlined-button.mat-warn {
  --mdc-outlined-button-label-text-color: #f44336;
  --mdc-outlined-button-outline-color: rgba(0, 0, 0, 0.12);
  --mat-outlined-button-state-layer-color: #f44336;
  --mat-outlined-button-ripple-color: rgba(244, 67, 54, 0.1);
}

html {
  --mdc-text-button-container-height: 36px;
  --mdc-filled-button-container-height: 36px;
  --mdc-outlined-button-container-height: 36px;
  --mdc-protected-button-container-height: 36px;
  --mat-text-button-touch-target-display: block;
  --mat-filled-button-touch-target-display: block;
  --mat-protected-button-touch-target-display: block;
  --mat-outlined-button-touch-target-display: block;
}

html {
  --mdc-icon-button-icon-size: 24px;
}

html {
  --mdc-icon-button-icon-color: inherit;
  --mdc-icon-button-disabled-icon-color: rgba(0, 0, 0, 0.38);
  --mat-icon-button-state-layer-color: black;
  --mat-icon-button-disabled-state-layer-color: black;
  --mat-icon-button-ripple-color: rgba(0, 0, 0, 0.1);
  --mat-icon-button-hover-state-layer-opacity: 0.04;
  --mat-icon-button-focus-state-layer-opacity: 0.12;
  --mat-icon-button-pressed-state-layer-opacity: 0.12;
}
html .mat-mdc-icon-button.mat-primary {
  --mdc-icon-button-icon-color: #3f51b5;
  --mat-icon-button-state-layer-color: #3f51b5;
  --mat-icon-button-ripple-color: rgba(63, 81, 181, 0.1);
}
html .mat-mdc-icon-button.mat-accent {
  --mdc-icon-button-icon-color: #ff4081;
  --mat-icon-button-state-layer-color: #ff4081;
  --mat-icon-button-ripple-color: rgba(255, 64, 129, 0.1);
}
html .mat-mdc-icon-button.mat-warn {
  --mdc-icon-button-icon-color: #f44336;
  --mat-icon-button-state-layer-color: #f44336;
  --mat-icon-button-ripple-color: rgba(244, 67, 54, 0.1);
}

html {
  --mat-icon-button-touch-target-display: block;
}

.mat-mdc-icon-button.mat-mdc-button-base {
  --mdc-icon-button-state-layer-size: 48px;
  width: var(--mdc-icon-button-state-layer-size);
  height: var(--mdc-icon-button-state-layer-size);
  padding: 12px;
}

html {
  --mdc-fab-container-shape: 50%;
  --mdc-fab-icon-size: 24px;
  --mdc-fab-small-container-shape: 50%;
  --mdc-fab-small-icon-size: 24px;
  --mdc-extended-fab-container-height: 48px;
  --mdc-extended-fab-container-shape: 24px;
}

html {
  --mdc-fab-container-color: white;
  --mdc-fab-container-elevation-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12);
  --mdc-fab-focus-container-elevation-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12);
  --mdc-fab-hover-container-elevation-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12);
  --mdc-fab-pressed-container-elevation-shadow: 0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12);
  --mdc-fab-container-shadow-color: #000;
  --mat-fab-foreground-color: black;
  --mat-fab-state-layer-color: black;
  --mat-fab-disabled-state-layer-color: black;
  --mat-fab-ripple-color: rgba(0, 0, 0, 0.1);
  --mat-fab-hover-state-layer-opacity: 0.04;
  --mat-fab-focus-state-layer-opacity: 0.12;
  --mat-fab-pressed-state-layer-opacity: 0.12;
  --mat-fab-disabled-state-container-color: rgba(0, 0, 0, 0.12);
  --mat-fab-disabled-state-foreground-color: rgba(0, 0, 0, 0.38);
  --mdc-fab-small-container-color: white;
  --mdc-fab-small-container-elevation-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12);
  --mdc-fab-small-focus-container-elevation-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12);
  --mdc-fab-small-hover-container-elevation-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12);
  --mdc-fab-small-pressed-container-elevation-shadow: 0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12);
  --mdc-fab-small-container-shadow-color: #000;
  --mat-fab-small-foreground-color: black;
  --mat-fab-small-state-layer-color: black;
  --mat-fab-small-disabled-state-layer-color: black;
  --mat-fab-small-ripple-color: rgba(0, 0, 0, 0.1);
  --mat-fab-small-hover-state-layer-opacity: 0.04;
  --mat-fab-small-focus-state-layer-opacity: 0.12;
  --mat-fab-small-pressed-state-layer-opacity: 0.12;
  --mat-fab-small-disabled-state-container-color: rgba(0, 0, 0, 0.12);
  --mat-fab-small-disabled-state-foreground-color: rgba(0, 0, 0, 0.38);
  --mdc-extended-fab-container-elevation-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12);
  --mdc-extended-fab-focus-container-elevation-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12);
  --mdc-extended-fab-hover-container-elevation-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12);
  --mdc-extended-fab-pressed-container-elevation-shadow: 0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12);
  --mdc-extended-fab-container-shadow-color: #000;
}
html .mat-mdc-fab.mat-primary {
  --mdc-fab-container-color: #3f51b5;
  --mat-fab-foreground-color: white;
  --mat-fab-state-layer-color: white;
  --mat-fab-ripple-color: rgba(255, 255, 255, 0.1);
}
html .mat-mdc-fab.mat-accent {
  --mdc-fab-container-color: #ff4081;
  --mat-fab-foreground-color: white;
  --mat-fab-state-layer-color: white;
  --mat-fab-ripple-color: rgba(255, 255, 255, 0.1);
}
html .mat-mdc-fab.mat-warn {
  --mdc-fab-container-color: #f44336;
  --mat-fab-foreground-color: white;
  --mat-fab-state-layer-color: white;
  --mat-fab-ripple-color: rgba(255, 255, 255, 0.1);
}
html .mat-mdc-mini-fab.mat-primary {
  --mdc-fab-small-container-color: #3f51b5;
  --mat-fab-small-foreground-color: white;
  --mat-fab-small-state-layer-color: white;
  --mat-fab-small-ripple-color: rgba(255, 255, 255, 0.1);
}
html .mat-mdc-mini-fab.mat-accent {
  --mdc-fab-small-container-color: #ff4081;
  --mat-fab-small-foreground-color: white;
  --mat-fab-small-state-layer-color: white;
  --mat-fab-small-ripple-color: rgba(255, 255, 255, 0.1);
}
html .mat-mdc-mini-fab.mat-warn {
  --mdc-fab-small-container-color: #f44336;
  --mat-fab-small-foreground-color: white;
  --mat-fab-small-state-layer-color: white;
  --mat-fab-small-ripple-color: rgba(255, 255, 255, 0.1);
}

html {
  --mat-fab-touch-target-display: block;
  --mat-fab-small-touch-target-display: block;
}

html {
  --mdc-snackbar-container-shape: 4px;
}

html {
  --mdc-snackbar-container-color: #333333;
  --mdc-snackbar-supporting-text-color: rgba(255, 255, 255, 0.87);
  --mat-snack-bar-button-color: #ff4081;
}

html {
  --mat-table-row-item-outline-width: 1px;
}

html {
  --mat-table-background-color: white;
  --mat-table-header-headline-color: rgba(0, 0, 0, 0.87);
  --mat-table-row-item-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-table-row-item-outline-color: rgba(0, 0, 0, 0.12);
}

html {
  --mat-table-header-container-height: 56px;
  --mat-table-footer-container-height: 52px;
  --mat-table-row-item-container-height: 52px;
}

html {
  --mdc-circular-progress-active-indicator-width: 4px;
  --mdc-circular-progress-size: 48px;
}

html {
  --mdc-circular-progress-active-indicator-color: #3f51b5;
}
html .mat-accent {
  --mdc-circular-progress-active-indicator-color: #ff4081;
}
html .mat-warn {
  --mdc-circular-progress-active-indicator-color: #f44336;
}

html {
  --mat-badge-container-shape: 50%;
  --mat-badge-container-size: unset;
  --mat-badge-small-size-container-size: unset;
  --mat-badge-large-size-container-size: unset;
  --mat-badge-legacy-container-size: 22px;
  --mat-badge-legacy-small-size-container-size: 16px;
  --mat-badge-legacy-large-size-container-size: 28px;
  --mat-badge-container-offset: -11px 0;
  --mat-badge-small-size-container-offset: -8px 0;
  --mat-badge-large-size-container-offset: -14px 0;
  --mat-badge-container-overlap-offset: -11px;
  --mat-badge-small-size-container-overlap-offset: -8px;
  --mat-badge-large-size-container-overlap-offset: -14px;
  --mat-badge-container-padding: 0;
  --mat-badge-small-size-container-padding: 0;
  --mat-badge-large-size-container-padding: 0;
}

html {
  --mat-badge-background-color: #3f51b5;
  --mat-badge-text-color: white;
  --mat-badge-disabled-state-background-color: #b9b9b9;
  --mat-badge-disabled-state-text-color: rgba(0, 0, 0, 0.38);
}

.mat-badge-accent {
  --mat-badge-background-color: #ff4081;
  --mat-badge-text-color: white;
}

.mat-badge-warn {
  --mat-badge-background-color: #f44336;
  --mat-badge-text-color: white;
}

html {
  --mat-bottom-sheet-container-shape: 4px;
}

html {
  --mat-bottom-sheet-container-text-color: rgba(0, 0, 0, 0.87);
  --mat-bottom-sheet-container-background-color: white;
}

html {
  --mat-legacy-button-toggle-height: 36px;
  --mat-legacy-button-toggle-shape: 2px;
  --mat-legacy-button-toggle-focus-state-layer-opacity: 1;
  --mat-standard-button-toggle-shape: 4px;
  --mat-standard-button-toggle-hover-state-layer-opacity: 0.04;
  --mat-standard-button-toggle-focus-state-layer-opacity: 0.12;
}

html {
  --mat-legacy-button-toggle-text-color: rgba(0, 0, 0, 0.38);
  --mat-legacy-button-toggle-state-layer-color: rgba(0, 0, 0, 0.12);
  --mat-legacy-button-toggle-selected-state-text-color: rgba(0, 0, 0, 0.54);
  --mat-legacy-button-toggle-selected-state-background-color: #e0e0e0;
  --mat-legacy-button-toggle-disabled-state-text-color: rgba(0, 0, 0, 0.26);
  --mat-legacy-button-toggle-disabled-state-background-color: #eeeeee;
  --mat-legacy-button-toggle-disabled-selected-state-background-color: #bdbdbd;
  --mat-standard-button-toggle-text-color: rgba(0, 0, 0, 0.87);
  --mat-standard-button-toggle-background-color: white;
  --mat-standard-button-toggle-state-layer-color: black;
  --mat-standard-button-toggle-selected-state-background-color: #e0e0e0;
  --mat-standard-button-toggle-selected-state-text-color: rgba(0, 0, 0, 0.87);
  --mat-standard-button-toggle-disabled-state-text-color: rgba(0, 0, 0, 0.26);
  --mat-standard-button-toggle-disabled-state-background-color: white;
  --mat-standard-button-toggle-disabled-selected-state-text-color: rgba(0, 0, 0, 0.87);
  --mat-standard-button-toggle-disabled-selected-state-background-color: #bdbdbd;
  --mat-standard-button-toggle-divider-color: #e0e0e0;
}

html {
  --mat-standard-button-toggle-height: 48px;
}

html {
  --mat-datepicker-calendar-container-shape: 4px;
  --mat-datepicker-calendar-container-touch-shape: 4px;
  --mat-datepicker-calendar-container-elevation-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12);
  --mat-datepicker-calendar-container-touch-elevation-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12);
}

html {
  --mat-datepicker-calendar-date-selected-state-text-color: white;
  --mat-datepicker-calendar-date-selected-state-background-color: #3f51b5;
  --mat-datepicker-calendar-date-selected-disabled-state-background-color: rgba(63, 81, 181, 0.4);
  --mat-datepicker-calendar-date-today-selected-state-outline-color: white;
  --mat-datepicker-calendar-date-focus-state-background-color: rgba(63, 81, 181, 0.3);
  --mat-datepicker-calendar-date-hover-state-background-color: rgba(63, 81, 181, 0.3);
  --mat-datepicker-toggle-active-state-icon-color: #3f51b5;
  --mat-datepicker-calendar-date-in-range-state-background-color: rgba(63, 81, 181, 0.2);
  --mat-datepicker-calendar-date-in-comparison-range-state-background-color: rgba(249, 171, 0, 0.2);
  --mat-datepicker-calendar-date-in-overlap-range-state-background-color: #a8dab5;
  --mat-datepicker-calendar-date-in-overlap-range-selected-state-background-color: #46a35e;
  --mat-datepicker-toggle-icon-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-body-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-period-button-text-color: black;
  --mat-datepicker-calendar-period-button-icon-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-navigation-button-icon-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-header-divider-color: rgba(0, 0, 0, 0.12);
  --mat-datepicker-calendar-header-text-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-date-today-outline-color: rgba(0, 0, 0, 0.38);
  --mat-datepicker-calendar-date-today-disabled-state-outline-color: rgba(0, 0, 0, 0.18);
  --mat-datepicker-calendar-date-text-color: rgba(0, 0, 0, 0.87);
  --mat-datepicker-calendar-date-outline-color: transparent;
  --mat-datepicker-calendar-date-disabled-state-text-color: rgba(0, 0, 0, 0.38);
  --mat-datepicker-calendar-date-preview-state-outline-color: rgba(0, 0, 0, 0.24);
  --mat-datepicker-range-input-separator-color: rgba(0, 0, 0, 0.87);
  --mat-datepicker-range-input-disabled-state-separator-color: rgba(0, 0, 0, 0.38);
  --mat-datepicker-range-input-disabled-state-text-color: rgba(0, 0, 0, 0.38);
  --mat-datepicker-calendar-container-background-color: white;
  --mat-datepicker-calendar-container-text-color: rgba(0, 0, 0, 0.87);
}

.mat-datepicker-content.mat-accent {
  --mat-datepicker-calendar-date-selected-state-text-color: white;
  --mat-datepicker-calendar-date-selected-state-background-color: #ff4081;
  --mat-datepicker-calendar-date-selected-disabled-state-background-color: rgba(255, 64, 129, 0.4);
  --mat-datepicker-calendar-date-today-selected-state-outline-color: white;
  --mat-datepicker-calendar-date-focus-state-background-color: rgba(255, 64, 129, 0.3);
  --mat-datepicker-calendar-date-hover-state-background-color: rgba(255, 64, 129, 0.3);
  --mat-datepicker-calendar-date-in-range-state-background-color: rgba(255, 64, 129, 0.2);
  --mat-datepicker-calendar-date-in-comparison-range-state-background-color: rgba(249, 171, 0, 0.2);
  --mat-datepicker-calendar-date-in-overlap-range-state-background-color: #a8dab5;
  --mat-datepicker-calendar-date-in-overlap-range-selected-state-background-color: #46a35e;
}
.mat-datepicker-content.mat-warn {
  --mat-datepicker-calendar-date-selected-state-text-color: white;
  --mat-datepicker-calendar-date-selected-state-background-color: #f44336;
  --mat-datepicker-calendar-date-selected-disabled-state-background-color: rgba(244, 67, 54, 0.4);
  --mat-datepicker-calendar-date-today-selected-state-outline-color: white;
  --mat-datepicker-calendar-date-focus-state-background-color: rgba(244, 67, 54, 0.3);
  --mat-datepicker-calendar-date-hover-state-background-color: rgba(244, 67, 54, 0.3);
  --mat-datepicker-calendar-date-in-range-state-background-color: rgba(244, 67, 54, 0.2);
  --mat-datepicker-calendar-date-in-comparison-range-state-background-color: rgba(249, 171, 0, 0.2);
  --mat-datepicker-calendar-date-in-overlap-range-state-background-color: #a8dab5;
  --mat-datepicker-calendar-date-in-overlap-range-selected-state-background-color: #46a35e;
}

.mat-datepicker-toggle-active.mat-accent {
  --mat-datepicker-toggle-active-state-icon-color: #ff4081;
}
.mat-datepicker-toggle-active.mat-warn {
  --mat-datepicker-toggle-active-state-icon-color: #f44336;
}

.mat-calendar-controls {
  --mat-icon-button-touch-target-display: none;
}
.mat-calendar-controls .mat-mdc-icon-button.mat-mdc-button-base {
  --mdc-icon-button-state-layer-size: 40px;
  width: var(--mdc-icon-button-state-layer-size);
  height: var(--mdc-icon-button-state-layer-size);
  padding: 8px;
}

html {
  --mat-divider-width: 1px;
}

html {
  --mat-divider-color: rgba(0, 0, 0, 0.12);
}

html {
  --mat-expansion-container-shape: 4px;
  --mat-expansion-legacy-header-indicator-display: inline-block;
  --mat-expansion-header-indicator-display: none;
}

html {
  --mat-expansion-container-background-color: white;
  --mat-expansion-container-text-color: rgba(0, 0, 0, 0.87);
  --mat-expansion-actions-divider-color: rgba(0, 0, 0, 0.12);
  --mat-expansion-header-hover-state-layer-color: rgba(0, 0, 0, 0.04);
  --mat-expansion-header-focus-state-layer-color: rgba(0, 0, 0, 0.04);
  --mat-expansion-header-disabled-state-text-color: rgba(0, 0, 0, 0.26);
  --mat-expansion-header-text-color: rgba(0, 0, 0, 0.87);
  --mat-expansion-header-description-color: rgba(0, 0, 0, 0.54);
  --mat-expansion-header-indicator-color: rgba(0, 0, 0, 0.54);
}

html {
  --mat-expansion-header-collapsed-state-height: 48px;
  --mat-expansion-header-expanded-state-height: 64px;
}

html {
  --mat-icon-color: inherit;
}

.mat-icon.mat-primary {
  --mat-icon-color: #3f51b5;
}
.mat-icon.mat-accent {
  --mat-icon-color: #ff4081;
}
.mat-icon.mat-warn {
  --mat-icon-color: #f44336;
}

html {
  --mat-sidenav-container-shape: 0;
  --mat-sidenav-container-elevation-shadow: 0px 8px 10px -5px rgba(0, 0, 0, 0.2), 0px 16px 24px 2px rgba(0, 0, 0, 0.14), 0px 6px 30px 5px rgba(0, 0, 0, 0.12);
  --mat-sidenav-container-width: auto;
}

html {
  --mat-sidenav-container-divider-color: rgba(0, 0, 0, 0.12);
  --mat-sidenav-container-background-color: white;
  --mat-sidenav-container-text-color: rgba(0, 0, 0, 0.87);
  --mat-sidenav-content-background-color: #fafafa;
  --mat-sidenav-content-text-color: rgba(0, 0, 0, 0.87);
  --mat-sidenav-scrim-color: rgba(0, 0, 0, 0.6);
}

html {
  --mat-stepper-header-icon-foreground-color: white;
  --mat-stepper-header-selected-state-icon-background-color: #3f51b5;
  --mat-stepper-header-selected-state-icon-foreground-color: white;
  --mat-stepper-header-done-state-icon-background-color: #3f51b5;
  --mat-stepper-header-done-state-icon-foreground-color: white;
  --mat-stepper-header-edit-state-icon-background-color: #3f51b5;
  --mat-stepper-header-edit-state-icon-foreground-color: white;
  --mat-stepper-container-color: white;
  --mat-stepper-line-color: rgba(0, 0, 0, 0.12);
  --mat-stepper-header-hover-state-layer-color: rgba(0, 0, 0, 0.04);
  --mat-stepper-header-focus-state-layer-color: rgba(0, 0, 0, 0.04);
  --mat-stepper-header-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-stepper-header-optional-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-stepper-header-selected-state-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-stepper-header-error-state-label-text-color: #f44336;
  --mat-stepper-header-icon-background-color: rgba(0, 0, 0, 0.54);
  --mat-stepper-header-error-state-icon-foreground-color: #f44336;
  --mat-stepper-header-error-state-icon-background-color: transparent;
}
html .mat-step-header.mat-accent {
  --mat-stepper-header-icon-foreground-color: white;
  --mat-stepper-header-selected-state-icon-background-color: #ff4081;
  --mat-stepper-header-selected-state-icon-foreground-color: white;
  --mat-stepper-header-done-state-icon-background-color: #ff4081;
  --mat-stepper-header-done-state-icon-foreground-color: white;
  --mat-stepper-header-edit-state-icon-background-color: #ff4081;
  --mat-stepper-header-edit-state-icon-foreground-color: white;
}
html .mat-step-header.mat-warn {
  --mat-stepper-header-icon-foreground-color: white;
  --mat-stepper-header-selected-state-icon-background-color: #f44336;
  --mat-stepper-header-selected-state-icon-foreground-color: white;
  --mat-stepper-header-done-state-icon-background-color: #f44336;
  --mat-stepper-header-done-state-icon-foreground-color: white;
  --mat-stepper-header-edit-state-icon-background-color: #f44336;
  --mat-stepper-header-edit-state-icon-foreground-color: white;
}

html {
  --mat-stepper-header-height: 72px;
}

html {
  --mat-sort-arrow-color: #757575;
}

html {
  --mat-toolbar-container-background-color: whitesmoke;
  --mat-toolbar-container-text-color: rgba(0, 0, 0, 0.87);
}

.mat-toolbar.mat-primary {
  --mat-toolbar-container-background-color: #3f51b5;
  --mat-toolbar-container-text-color: white;
}
.mat-toolbar.mat-accent {
  --mat-toolbar-container-background-color: #ff4081;
  --mat-toolbar-container-text-color: white;
}
.mat-toolbar.mat-warn {
  --mat-toolbar-container-background-color: #f44336;
  --mat-toolbar-container-text-color: white;
}

html {
  --mat-toolbar-standard-height: 64px;
  --mat-toolbar-mobile-height: 56px;
}

html {
  --mat-tree-container-background-color: white;
  --mat-tree-node-text-color: rgba(0, 0, 0, 0.87);
}

html {
  --mat-tree-node-min-height: 48px;
}

/* ==========================================================================
   AURACSS
   ========================================================================== */
/**

      ___           ___           ___           ___           ___           ___           ___
     /\  \         /\  \         /\  \         /\  \         /\__\         /\__\         /\__\
    /::\  \        \:\  \       /::\  \       /::\  \       /:/  /        /:/ _/_       /:/ _/_
   /:/\:\  \        \:\  \     /:/\:\__\     /:/\:\  \     /:/  /        /:/ /\  \     /:/ /\  \
  /:/ /::\  \   ___  \:\  \   /:/ /:/  /    /:/ /::\  \   /:/  /  ___   /:/ /::\  \   /:/ /::\  \
 /:/_/:/\:\__\ /\  \  \:\__\ /:/_/:/__/___ /:/_/:/\:\__\ /:/__/  /\__\ /:/_/:/\:\__\ /:/_/:/\:\__\
 \:\/:/  \/__/ \:\  \ /:/  / \:\/:::::/  / \:\/:/  \/__/ \:\  \ /:/  / \:\/:/ /:/  / \:\/:/ /:/  /
  \::/__/       \:\  /:/  /   \::/~~/~~~~   \::/__/       \:\  /:/  /   \::/ /:/  /   \::/ /:/  /
   \:\  \        \:\/:/  /     \:\~~\        \:\  \        \:\/:/  /     \/_/:/  /     \/_/:/  /
    \:\__\        \::/  /       \:\__\        \:\__\        \::/  /        /:/  /        /:/  /
     \/__/         \/__/         \/__/         \/__/         \/__/         \/__/         \/__/

 * AURACSS v1.1.0-beta
 * see CHANGELOG.md for details.
 * By: jason.otis@resmed.com
 */
/****************************************************************************
 * INSTRUCTIONS
 *
 *
 * NPM Dependencies
 *   AURACSS is dependent on sassmq for media-queries.
 *   Sassmq is included manually in `/sass/modules/`.
 *   This CSS module is available as a Node package.
 *   If you are using NPM, please DO NOT include or replace the included
 *   version with the NPM version.
 *
 * SASS-MQ
 *   https://github.com/sass-mq/sass-mq
 *
 ******************************************************************************/
/******************************************************************************

                        █░█░█ ▄▀█ █▀█ █▄░█ █ █▄░█ █▀▀ █
                        ▀▄▀▄▀ █▀█ █▀▄ █░▀█ █ █░▀█ █▄█ ▄

      !!!!!!   Most partial SASS files are imported by default   !!!!!!

  Comment out any SASS partials that you do not need for your project to help
  keep your outputted CSS file size down. There's no meed to include classes
  you won't be using.

 ******************************************************************************/
/**
 * CONTENTS
 *
 *
 * TOOLS
 * Font-size............A mixin which guarantees baseline-friendly line-heights.
 * Clearfix.............Micro clearfix mixin.
 * Hidden...............Mixin for hiding elements.
 * Animation............Animation mixins that provide prefixing.
 * Color variations.....A function to mix colors on the fly.
 * Color functions......Functions to lighten or darken colors.
 * Compass..............Mixins from the Compass framework that we still use.
 * Postioning...........Mixins for positioning of elements.
 * Properties...........CSS properties, mostly for prefixing.
 * SVG..................SVG related mixins.
 * Transforms...........Prefixer mixins for CSS transforms.
 *
 *
 * TOKENS
 * Color palettes.......ResMed and AURA color palettes.
 * Custom tokens........Override tokens with custom values for themes.
 * Design-tokens........Import file for all global token files.
 *
 *
 * SETTINGS
 * Config...............Project-level configuration and feature switches.
 * Fonts................Importing Google fonts or loading local font files.
 * Core.................AURACSS framework settings - values come from tokens.
 * Color................Color map settings used by compoents and utility classes.
 * Breakpoints..........Breakpoint settings for media queries.
 * Utilities............Config dynamically generated utility classes.
 *
 *
 * MEDIA QUERIES
 * Sass MQ..............Media query manager. Needs to be imported after
 *                      `_settings.breakpoints.scss` in order to override the
 *                      default $breakpoints map.
 *
 *
 * GENERIC
 * Box-sizing...........Better default `box-sizing`.
 * Normalize.css........A level playing field using @necolas’ Normalize.css.
 * Reset................A tiny reset to complement Normalize.css.
 * Shared...............Sensibly and tersely share some global commonalities
 *                      (particularly useful when managing vertical rhythm).
 *
 *
 * ELEMENTS
 * Page.................Set up our document’s default `font-size` and
 *                      `line-height`.
 * Headings.............Very minimal (i.e. only font-size information) for
 *                      headings 1 through 6.
 * Images...............Base image styles.
 * Tables...............Simple table styles.
 * Forms................Form input defaults for font-family, font-weight, color.
 * Page.................Our page defaults, sticky footer.
 * Tables...............Our table defaults.
 * Typography...........Font-family, font-weight, and color defaults for HTML,
 *                      H, B, STRONG, LABEL, A elements.
 *
 *
 * VENDORS
 * Slick................Responsive carousel.
 * Modaal...............Accessible modal windows.
 *
 *
 * OBJECTS
 * Wrapper..............Page constraint object.
 * Layout...............Generic layout module.
 * Media................Image- and text-like content side by side. The
 *                      poster-child of OOCSS.
 * Flag.................Table-layout-based advancement on the Media object.
 * List-bare............Lists with no bullets or indents.
 * List-inline..........A list whose items all site in a line.
 * Box..................Simple boxing abstraction.
 * Block................Image-on-top-of-text object.
 * Ratio................A container for maintaining aspect ratio of content.
 * Crop.................Provide a cropping context for media (images, etc.).
 * Table................Classes for manipulating `table`s.
 * Pack.................Pack items into available horizontal space.
 * Callouts.............Box element for call to action content.
 * Carousels............Layout customizations to the carousel.
 * Flexbody.............Page body wrapper for sticky footer.
 * Tables...............Our product specific table styles for grid views.
 * Sections.............Define your content area, break it up in to sections.
 * Scrollable...........Scrollable container.
 *
 *
 * ANIMATIONS
 * Custom...............Some custom CSSkeyframe animations.
 *
 *
 * COMPONENTS
 * Alerts...............Global alerts messages, errors, warnings, and success.
 * Android-Badges.......Get it on Android.
 * Apple-Badges.........Apple download badges.
 * Buttons..............Button component.
 * Cards................Content lures, Title, Image, Description.
 * Chips................Interactive filter selection chips.
 * Code.................Show code snippets in a nice <code> block. Uses Prism.js.
 * Directional nav......Previous Next chevron nav.
 * Dropdowns............Custom dropdown.
 * Expander.............Collapsible content.
 * Footer...............Page footers.
 * Forms................Form inputs.
 * Hero.................Custom hero banners.
 * Icons................Specific inline icons.
 * Button Icons.........Icons which interact as a button.
 * Indicators...........Little status indicators.
 * Loaders..............CSS page loading spinners.
 * Logos................Branding items.
 * Modal................Simple modal window.
 * Notifications........Site notifications.
 * Page-head............Page headers, masthead, hero.
 * Pagination...........Pagination for lists of results, wizard, stepper.
 * Popover..............Fancy tooltip that stays active so you can hover over it.
 * Progress.............Progress bar.
 * Sitenav..............Navigation component.
 * Survey...............Survey modal with stepper.
 * SVG Symbols..........SVG symbols baseline CSS.
 * Tags.................Text in a box.
 * Tooltips.............CSS only style-able tooltip option.
 * Typography...........Typography related styles, headings, labels, text.
 * Video................Video player overay.
 * Wizards..............Wizard, step-through.
 *
 *
 * UTILITIES
 * Clearfix.............Bind our clearfix onto a utility class.
 * Widths...............Simple width helper classes.
 * Headings.............Reassigning our heading styles to helper classes.
 * Spacings.............Nudge bits of the DOM around with these spacing
 *                      classes.
 * Responsive-Spacings..Enhances the function of normal spacings for
 *                      responsive usage.
 * Print................Reset-like styles taken from the HTML5 Boilerplate.
 * Hide.................Helper classes to hide content.
 * Accessibility........Accessibility related classes.
 * Border...............Border and border radius classes.
 * Color fill...........Background color classes created from color maps.
 * Float................Float or unfloat elements.
 * Percent widths.......Specific percentage widths for grid view columns.
 * Positioning..........Helper classes to position elements - float.
 * Typography...........Helper classes for specific text and font styles.
 * Visibility...........Show or hide DOM elements at/or between breakpoints.
 *
 *
 * THEMES
 * Provider.............Theme toggling example using default Provider theme.
 *                      For demo purposes only.
 * Dark UI..............Dark UI theme toggle - in progress.
 */
/* ========================================================================
   #FONT-SIZE
   ======================================================================== */
/* ========================================================================
   #CLEARFIX
   ======================================================================== */
/* ==========================================================================
   #Animation mixins 
   ========================================================================== */
/** 
 * Using the mixins looks like this:
 * 
 * @include keyframes(move-the-object) {
 *   0%   { left: 100px; }
 *   100% { left: 200px; }
 * }
 *
 * .object-to-animate {
 *   @include animation('move-the-object .5s 1', 'move-the-object-again .5s 1 .5s');
 * } 
 */
/* ========================================================================
   #COLOR FUNCTIONS
   ======================================================================== */
/* ==========================================================================
   #COMPASS
   ========================================================================== */
/**
 * Indicates the direction you prefer to move your text when hiding it.
 * Left is more robust, especially in older browsers. right seems have
 * better runtime performance.
 */
/**
 * Hides text in an element so you can see the background.
 * The direction indicates how the text should be moved out of view.
 */
/**
 * Hides html text and replaces it with an image. If you use this on an inline
 * element, you will need to change the display to block or inline-block.
 * Also, if the size of the image differs significantly from the font size,
 * you'll need to set the width and/or height.
 */
/* ==========================================================================
   #LAYOUT
   ========================================================================== */
/* ==========================================================================
   #Positioning mixins 
   ========================================================================== */
/* Top positions
   ========================================================================== */
/* Middle positions
   ========================================================================== */
/* Bottom positions
   ========================================================================== */
/* Misc
   ========================================================================== */
/* ==========================================================================
   #PROPERTIES
   ========================================================================== */
/**
 * Webkit font-smoothing
 * Values: none, antialiased (default), subpixel-antialiased
 */
/**
 * Make `a` selector a block element and make it fill the width and height of
 * its parent container
 */
/* Use ellipsis to truncate text that overflows its container
 * .simple-usage {
 *   @include ellipsis();
 * }
 *
 * .detailed-usage {
 *   @include ellipsis(<value>);
 * }
 */
/**
 * Create a text highlighting style
 *
 *   @include selection {
 *     background-color: #value;
 *     color: #value;
 *     text-shadow: none;
 *   }
 */
/**
 * Force wrap a long string of text that breaks the layout, like a URL. 
 * Can also use utility classes `.u-text-wrap` and `.u-text-wrap-nohyphen`
 * in your markup.
 */
/* CSS hacks to do some browser specific styles */
/* ==========================================================================
   #SVG
   ========================================================================== */
/**
 *  SVG as background-image
 *  Example usage:
 *  1. Create a variable in `settings.global.scss` of just the svg's data: 
 *  2. Use that variable in the mixin, provide the width and height of the SVG's 
 *     viewbox, and define the color in HEX format without the #.
 *  
 *  $my-svg: "M7.035 15.931l16.533-15.931 1.398 1.466-15.067 14.534 15.067 14.534-1.398 1.466-16.533-16.069z";
 *
 *  @include svg-bg-img($my-svg, $icon-size-default, $icon-size-default, 'ffffff');
 *
 */
/* ==========================================================================
   #TRANSFORMS
   ========================================================================== */
/* ========================================================================
   #COLORS
   ======================================================================== */
/**
 * Color palettes of Aura Design System.

  type: color
  category: color

  To be aliased to tokens of type color only.
  Not to be referenced directly to any CSS properties.

 */
/**
 * ATTENTION
 *
 * Usage:
 * Until the design token pipeline is in place, find the file
 *  `_themes.custom-tokens.scss` 
 * in the themes folder and rename it to 
 *  `_themes.custom-{product-name}-tokens.scss`
 *
 * You will use this file to override !default token values as needed.
 */
/**
 * DO NOT EDIT ANYTHING BELOW 
 * Add new color tokens to YOUR custom tokens file.
 */
/* Contrast colors
   ========================================================================== */
/* Color palettes
   ========================================================================== */
/* ResMed Spectrum related palettes
   ========================================================================== */
/**
 * Below palettes generated by:
 *  http://mcg.mbitson.com/
 * Using mostly the `Traditional` algorithm setting. Some palettes
 * use the `Constantin` algorithm or a mix of both to help fill out the tonal range.
 * Use your judgement for the best tonal range when creating a new color palette.
 *
 * Color names not part of the ResMed spectrum come from:
 *  https://www.colorhexa.com/
 */
/* Non-ResMed-Spectrum color palettes
   ========================================================================== */
/**
 * Color names not part of the ResMed spectrum come from:
 *  https://www.colorhexa.com/
 */
/* ========================================================================
   #FONT-STACKS
   ======================================================================== */
/**
 * Tokens used by font-family.

  category: font
  type: font
  cssProperties:
  - 'font'
  - 'font-family'

 */
/**
 * ATTENTION
 *
 * Usage:
 * Until the design token pipeline is in place, find the file
 *  `_themes.custom-tokens.scss`
 * in the themes folder and rename it to
 *  `_themes.custom-{product-name}-tokens.scss`
 *
 * You will use this file to override !default token values as needed.
 */
/**
 * DO NOT EDIT ANYTHING BELOW
 * Override default token values in YOUR custom tokens file.
 */
/* Font stacks
   ========================================================================== */
/**
 * Uncomment the below @import rule line if you need to override !default
 * design token values with your own.
 */
/* ==========================================================================
  #THEME - CUSTOM TOKENS
  ========================================================================== */
/**
 * Use this file to override `!default` design token values.
 *
 * NOTE:
 *    This file must be included in the main `auracss.scss` file AFTER the
 *    color palettes but BEFORE all other token files are imported.
 *    See the `auracss.scss` file for the commented out example.
 *
 *
 * To override !default design token values:
 *
 * 1. Copy the token(s) you need to override from the corresponding token `.scss` file
      and paste it below.
 * 2. Replace the default value with your new value.
 * 3. Remove the `!default` flag after the value.
 *
 * Example:
 *
 *  Step 1: Copy the token to be overriden from it's source design token file.
 *    For example, from the file `/design-tokens/_tokens.text-color.scss`
 *
 *    $color-text-default: $resmed-brand-gray-palette-800 !default;
 *
 *  Step 2: Paste the token in this file, change the value and remove
 *    the `!default` flag.
 *
 *    Aliased to a color palette token token (preferred method for colors):
 *    $color-text-default: $resmed-brand-gray-palette-900;
 *
 *    Or hardcode a value:
 *    $color-text-default: #hexvalue;
 *
 * Since your custom token file is loaded after the color palettes, but
 * before all other token files, you can alias custom color tokens to a color
 * palette token. All other custom tokens however, will require hardcoded values.
 */
/***************************************************************************
 *
 *                          !!! IMPORTANT !!!
 *
 * --> Rename this file to `_themes.custom-{project-name}-tokens.scss` <--
 *
 *   Don't forget to @import this file in your local copy of auracss.scss
 *   around line 232, just before the main design-tokens import rule:
 *
 *   @import "themes.custom-{project-name}-tokens"; <-- your file here!
 *   @import "../../aura-design-system/auracss/design-tokens";
 *
***************************************************************************/
/* Theme colors
   ========================================================================== */
/* ========================================================================
   #DESIGN TOKENS
   ======================================================================== */
/* ========================================================================
   #THEME
   ======================================================================== */
/**
 * ATTENTION
 * Theme settings and theme primary/brand color tokens.
 *
 * Usage:
 * Until the design token pipeline is in place, find the file
 *  `_themes.custom-tokens.scss` 
 * in the themes folder and rename it to 
 *  `_themes.custom-{product-name}-tokens.scss`
 *
 * You will use this file to override !default token values as needed.
 */
/**
 * DO NOT EDIT ANYTHING BELOW 
 * Override default token values in YOUR custom tokens file.
 */
/* Theme colors
   ========================================================================== */
/* ========================================================================
   #FONT-FAMILY
   ======================================================================== */
/**
 * Tokens for font-family.

  category: font
  type: font
  cssProperties:
  - 'font'
  - 'font-family'

 */
/**
 * ATTENTION
 *
 * Usage:
 * Until the design token pipeline is in place, find the file
 *  `_themes.custom-tokens.scss`
 * in the themes folder and rename it to
 *  `_themes.custom-{product-name}-tokens.scss`
 *
 * You will use this file to override !default token values as needed.
 */
/**
 * DO NOT EDIT ANYTHING BELOW
 * Override default token values in YOUR custom tokens file.
 */
/* Font-family tokens
   ========================================================================== */
/* ========================================================================
   #FONT-SIZE
   ======================================================================== */
/**
 * Tokens for font-sizes.

  category: font-size
  type: font-size
  cssProperties:
  - font
  - font-size

 */
/**
 * ATTENTION
 *
 * Usage:
 * Until the design token pipeline is in place, find the file
 *  `_themes.custom-tokens.scss` 
 * in the themes folder and rename it to 
 *  `_themes.custom-{product-name}-tokens.scss`
 *
 * You will use this file to override !default token values as needed.
 */
/**
 * DO NOT EDIT ANYTHING BELOW 
 * Override default token values in YOUR custom tokens file.
 */
/* ========================================================================
   #FONT-WEIGHT
   ======================================================================== */
/**
 * Tokens for font-weights.

  category: font
  type: font-weight
  cssProperties:
  - font
  - font-weight

 */
/**
 * ATTENTION
 *
 * Usage:
 * Until the design token pipeline is in place, find the file
 *  `_themes.custom-tokens.scss` 
 * in the themes folder and rename it to 
 *  `_themes.custom-{product-name}-tokens.scss`
 *
 * You will use this file to override !default token values as needed.
 */
/**
 * DO NOT EDIT ANYTHING BELOW 
 * Override default token values in YOUR custom tokens file.
 */
/* ========================================================================
   #COLORS
   ======================================================================== */
/**
 * Background color tokens

  type: color
  category: background-color
  cssProperties:
    - background
    - background-color

 */
/**
 * ATTENTION
 *
 * Usage:
 * Until the design token pipeline is in place, find the file
 *  `_themes.custom-tokens.scss` 
 * in the themes folder and rename it to 
 *  `_themes.custom-{product-name}-tokens.scss`
 *
 * You will use this file to override !default token values as needed.
 */
/**
 * DO NOT EDIT ANYTHING BELOW 
 * Override default token values in YOUR custom tokens file.
 */
/* Gradient
   ========================================================================== */
/* Background Colors
   ========================================================================== */
/* Do we need this?? 
$color-background-brand:                  $resmed-brand-001-palette-500 !default;
$color-background-brand-accessible:       $resmed-brand-001-palette-600 !default;
*/
/* ========================================================================
   #TEXT-COLOR
   ======================================================================== */
/**
 * Text color tokens

  type: color
  category: text-color
  cssProperties:
    - color

 */
/**
 * ATTENTION
 *
 * Usage:
 * Until the design token pipeline is in place, find the file
 *  `_themes.custom-tokens.scss` 
 * in the themes folder and rename it to 
 *  `_themes.custom-{product-name}-tokens.scss`
 *
 * You will use this file to override !default token values as needed.
 */
/**
 * DO NOT EDIT ANYTHING BELOW 
 * Override default token values in YOUR custom tokens file.
 */
/* ========================================================================
   Border Colors
   ======================================================================== */
/**
 * Border color tokens

  type: color
  category: border-color
  cssProperties:
    - 'border*'
    - 'border-color*'

 */
/**
 * ATTENTION
 *
 * Usage:
 * Until the design token pipeline is in place, find the file
 *  `_themes.custom-tokens.scss` 
 * in the themes folder and rename it to 
 *  `_themes.custom-{product-name}-tokens.scss`
 *
 * You will use this file to override !default token values as needed.
 */
/**
 * DO NOT EDIT ANYTHING BELOW 
 * Override default token values in YOUR custom tokens file.
 */
/* ========================================================================
   #OPACITY
   ======================================================================== */
/**
 * Opacity tokens

  type: opacity
  category: opacity
  cssProperties:
  - opacity

 */
/**
 * ATTENTION
 *
 * Usage:
 * Until the design token pipeline is in place, find the file
 *  `_themes.custom-tokens.scss` 
 * in the themes folder and rename it to 
 *  `_themes.custom-{product-name}-tokens.scss`
 *
 * You will use this file to override !default token values as needed.
 */
/**
 * DO NOT EDIT ANYTHING BELOW 
 * Override default token values in YOUR custom tokens file.
 */
/* ========================================================================
   #SPACING
   ======================================================================== */
/**
 * Spacing tokens

  category: spacing
  type: size
  cssProperties:
  - top
  - right
  - bottom
  - left
  - 'margin*'
  - 'padding*'

 */
/**
 * ATTENTION
 *
 * Usage:
 * Until the design token pipeline is in place, find the file
 *  `_themes.custom-tokens.scss` 
 * in the themes folder and rename it to 
 *  `_themes.custom-{product-name}-tokens.scss`
 *
 * You will use this file to override !default token values as needed.
 */
/**
 * DO NOT EDIT ANYTHING BELOW 
 * Override default token values in YOUR custom tokens file.
 */
/* ========================================================================
   #RADIUS
   ======================================================================== */
/**
 * Radius tokens

  type: size
  category: radius
  cssProperties:
    - 'border*radius'

 */
/**
 * ATTENTION
 *
 * Usage:
 * Until the design token pipeline is in place, find the file
 *  `_themes.custom-tokens.scss` 
 * in the themes folder and rename it to 
 *  `_themes.custom-{product-name}-tokens.scss`
 *
 * You will use this file to override !default token values as needed.
 */
/**
 * DO NOT EDIT ANYTHING BELOW 
 * Override default token values in YOUR custom tokens file.
 */
/* ========================================================================
   #SIZING
   ======================================================================== */
/**
 * Sizing tokens

  type: size
  category: sizing
  cssProperties:
  - '*width'
  - '*height'

 */
/**
 * ATTENTION
 *
 * Usage:
 * Until the design token pipeline is in place, find the file
 *  `_themes.custom-tokens.scss` 
 * in the themes folder and rename it to 
 *  `_themes.custom-{product-name}-tokens.scss`
 *
 * You will use this file to override !default token values as needed.
 */
/**
 * DO NOT EDIT ANYTHING BELOW 
 * Override default token values in YOUR custom tokens file.
 */
/* ========================================================================
   Shadow
   ======================================================================== */
/**
 * Shadow tokens

  type: box-shadow
  category: shadow
  cssProperties:
  - box-shadow

 */
/**
 * ATTENTION
 *
 * Usage:
 * Until the design token pipeline is in place, find the file
 *  `_themes.custom-tokens.scss` 
 * in the themes folder and rename it to 
 *  `_themes.custom-{product-name}-tokens.scss`
 *
 * You will use this file to override !default token values as needed.
 */
/**
 * DO NOT EDIT ANYTHING BELOW 
 * Override default token values in YOUR custom tokens file.
 */
/* ========================================================================
   #DURATION
   ======================================================================== */
/**
 * Timing tokens

  type: time
  category: time
  cssProperties:
  - 'animation*'
  - 'transition*'y

 */
/**
 * ATTENTION
 *
 * Usage:
 * Until the design token pipeline is in place, find the file
 *  `_themes.custom-tokens.scss`
 * in the themes folder and rename it to
 *  `_themes.custom-{product-name}-tokens.scss`
 *
 * You will use this file to override !default token values as needed.
 */
/**
 * DO NOT EDIT ANYTHING BELOW
 * Override default token values in YOUR custom tokens file.
 */
/* Transitions
   ========================================================================== */
/* ========================================================================
   #BREAKPOINTS
   ======================================================================== */
/**
 * Breakpoint tokens

  type: meida-query
  category: breakpoint

 */
/**
 * ATTENTION
 *
 * Usage:
 * Until the design token pipeline is in place, find the file
 *  `_themes.custom-tokens.scss` 
 * in the themes folder and rename it to 
 *  `_themes.custom-{product-name}-tokens.scss`
 *
 * You will use this file to override !default token values as needed.
 */
/**
 * DO NOT EDIT ANYTHING BELOW 
 * Override default token values in YOUR custom tokens file.
 */
/**
 * A list of breakpoint sizes to use in media queries.
 * Use the ones you need as defaults in the $breakpoints array for sass-mq.
 * Others can be used as custom breakpoints in any media query declaration.
 */
/* Z-Index
   ========================================================================== */
/* ========================================================================
   #ICONS
   ======================================================================== */
/* SVG background-image icons 
 * Use with @mixin svg-bg-img($svg, $width, $height, $color);

    @include svg-bg-img($svg-alert-error, $color-white, width: $icon-size-default, height: $icon-size-default);

 */
/* ==========================================================================
  #CERN
  ========================================================================== */
/* ==========================================================================
  #OPENSANS
  ========================================================================== */
/* ==========================================================================
   #ROBOTO
   ========================================================================== */
/* Font config
   ========================================================================== */
/* @font-face and @import rules
   ========================================================================== */
/* ========================================================================
   #CORE
   ======================================================================== */
/**
 * DO NOT EDIT ANYTHING BELOW 
 * Private/framework-only reassignment.
 */
:root {
  --aura-theme-page-width: 1366px;
}

/* ========================================================================
   #COLOR
   ======================================================================== */
/* Messaging component colors
   ========================================================================== */
/* Color maps
   ========================================================================== */
/* ========================================================================
   #BREAKPOINTS
   ======================================================================== */
/**
 * If you want to display the currently active breakpoint in the top
 * right corner of your site during development, add the breakpoints
 * to this list, ordered by width, e.g. (mobile, tablet, desktop).
 */
/* ========================================================================
   #UTILITIES
   ======================================================================== */
/**
 * Use the maps below to auto-generate the utility classes you will need for
 * your project. Controlling the classes which get generated from these maps
 * will help keep the generated CSS file size down and free of classes that
 * won't get used.
 */
/**
 * Get the breakpoint keys (aka: names) from the list of $mq-breakpoint.
 * This map is used for auto-generating responsive classes.
 */
/* Width utilities
   ========================================================================== */
/**
 * Percentage based widths
 * 
 * Use:
 *    $use-res-percentages: false !default;
 *
 * Set to true to auto-generate percentage based width classes used
 * for table columns.
 *
 * Change the default percentages values for percent width classes to what you need.
 * Use:
 *    $res-percentages: 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 25 30 35 40 45 50 55 60 65 70 !default;
 *
 * This will generate classes for each value such as:
 *
 *    .u-5/percent {}
 *    .u-70/percent {}
 */
/**
 * Widths
 * File: sass/utilities/_utilities.widths.scss'
 *
 * $aura-fractions: 1 2 3 4 5 !default;
 * Fractions used to auto-generate width classes used primarily by the grid system.
 * e.g.:
 *  .u-1/2
 *  .u-2/5
 *  .u-3/4
 *  .u-2/3
 *
 * Responsive width classes are also auto-generated by default.
 * e.g.:
 *  .u-1/2@tablet
 *  .u-2/3@desktop
 *
 * $aura-offsets: false !default;
 * Optionally, you can generate classes to offset items by a certain width.
*  Would you like to generate these types of class as well?
*  e.g.:
*   .u-push-1/3
*   .u-pull-2/4
*   .u-pull-1/5
*   .u-push-2/3
*/
/** Responsive Spacings
 * SEE FILE FOR FULL INSTRUCTIONS
 * File: sass/utilities/_utilities.responsive-spacings.scss
 *
 * By default, there are no responsive spacings defined. You can generate
 * responsive spacings by adding entries to the following three Sass
 * maps, e.g.:
 *
 *   $aura-responsive-spacing-directions: (
 *     null: null,
 *     "-bottom": "-bottom",
 *   );
 *
 *   $aura-responsive-spacing-properties: (
 *     "margin": "margin",
 *   );
 *
 *   $aura-responsive-spacing-sizes: (
 *     "-small": $spacing-small,
 *   );
 *
 *   $aura-responsive-spacing-directions: null !default;
 *
 *   $aura-responsive-spacing-properties: null !default;
 *
 *   $aura-responsive-spacing-sizes: null !default;
 */
/* Color fill utilities
   ========================================================================== */
/**
 * Color fills
 *
 * Use:
 *    $fill-theme-colors: $aura-theme-colors !default;
 *    $fill-greyscale-colors: $aura-grayscale !default;
 *
 * Or define only the ones you want to use from the color maps found in:
 *    sass/settings/_settings.colors.scss
 * Such as:
 *    $fill-theme-colors: ('primary': $color-background-primary) !default;
 *
 * This will generate classes for each color value:
 *    .u-fill--primary {}
 *    .u-fill--gray-100 {}
 *
 * Set to null for no classes.
 */
/* Float utilities
   ========================================================================== */
/**
 * Float
 *
 * Use:
 *    $float-directions: none, right, left !default;
 *
 * Or define only the ones you want to use.
 *
 * This will generate classes for each float value:
 *    .u-float-none {}
 *    .u-float-right {}
 *    .u-float-left {}
 *
 * Set to null for no classes.
 */
/** 
 * Responsive floats
 *
 * Use:
 *    $responsive-float-directions: $float-directions !default;
 *
 * Or define only the ones you want to use.
 *
 * This will generate @ and -below- classes for each float value 
 * at each breakpoint except mobile:
 *    .u-float-left@tablet {}
 *    .u-float-left-below-tablet {}
 *
 * Set to null for no classes.
 */
/* Typography utilities
   ========================================================================== */
/**
 * Font-style
 *
 * Use:
 *    $font-styles: inherit, initial, italic, normal, oblique, unset !default;
 *
 * Or define only the ones you want to use.
 *
 * This will generate classes for each font-style value:
 *    .u-font-style-italic {}
 *    .u-font-style-normal {}
 *
 * Set to null for no classes.
 */
/**
 * Font-weight
 *
 * Use:
 *    $font-weights: (
 *      'thin':   $font-weight-thin,
 *      'light':  $font-weight-light,
 *      'normal': $font-weight-normal,
 *      'medium': $font-weight-medium,
 *      'bold':   $font-weight-bold,
 *      'extra':  $font-weight-extra,
 *      'black':  $font-weight-black
 *    ) !default;
 *
 * This will generate classes for each font-weight value:
 *    .u-font-weight-thin {}
 *    .u-font-weight-normal {}
 *
 * Set to null for no classes.
 */
/**
 * Font-variant
 *
 * Use:
 *    $font-variants: normal, small-caps !default;
 *
 * Or define only the ones you want to use.
 *
 * This will generate classes for each font-variant value:
 *    .u-font-variant-normal {}
 *    .u-font-variant-small-caps {}
 *
 * Set to null for no classes.
 */
/**
 * Text-alignment
 *
 * Use:
 *    $text-alignments: left, right, center, justify !default;
 *
 * Or define only the ones you want to use.
 *
 * This will generate classes for each text-alignment value:
 *    .u-text-align-left {}
 *    .u-text-align-right {}
 *
 * Set to null for no classes.
 */
/**
 * Responsive text alignment
 *
 * Use:
 *    $responsive-text-alignment-directions: $text-alignments !default;
 *
 * Or define only the ones you want to use.
 *
 * This will generate @ and -below- classes for each text-alignment value 
 * at each breakpoint except mobile:
 *    .u-text-align-left@tablet {}
 *    .u-text-align-left-below-tablet {}
 *
 * Set to null for no classes.
 */
/**
 * Text-transform
 *
 * Use:
 *    $text-transforms: none, lowercase, uppercase, capitalize !default;
 *
 * Or define only the ones you want to use.
 *
 * This will generate classes for each text-transform value:
 *    .u-text-transform-lowercase {}
 *    .u-text-transform-uppercase {}
 *
 * Set to null for no classes.
 */
/**
 * Color
 *
 * Use:
 *    $text-theme-colors: $aura-theme-colors;
 *    $text-grayscale-colors: $aura-grayscale;
 *
 * Or define only the ones you want to use from the color maps found in:
 *    sass/settings/_settings.colors.scss
 * Such as:
 *    $text-theme-colors: ('primary': $color-text-primary);
 *
 * This will generate classes for each color value:
 *    .u-color--primary {}
 *    .u-color--danger {}
 *
 * Set to null for no classes.
 */
/* Visibility utilities
   ========================================================================== */
/**
 * Responsive visibility
 *
 * Show an element at this breakpoint only, not below or above.
 * Use:
 *    $use-show-only: $bp-key-names !default;
 *
 * Hide an element at this breakpoint only, not below or above.
 * Use:
 *    $use-hide-only: $bp-key-names !default;
 * 
 * Show an element at this breakpoint and above. Does not include 
 * `mobile` breakpoint if present.
 * Use:
 *    $use-show-at: $bp-key-names !default;
 *
 * Show an element below this breakpoint, but not at or above. Does 
 * not include `mobile` breakpoint if present.
 * Use:
 *    $use-show-below: $bp-key-names !default;
 *
 * Hide an element below this breakpoint, but not at or above. Does 
 * not include first breakpoint which should be `mobile`.
 * Use:
 *    $use-hide-below: $bp-key-names !default;
 *
 * Or define only the ones you want to use.
 * Such as:
 *    $use-show-at: tablet, desktop !default;
 *
 * This will generate classes like so:
 *   .u-show-only-@mobile {}
 *   .u-hide-only-@tablet {}
 *   .u-show-only-@desktop {}
 *   .u-show-@x-wide {}
 *   .u-hide-below-desktop {}
 *
 * Set to null for no classes.
 */
/* Position utilities
   ========================================================================== */
/**
 * Positioning
 *
 * Use:
 *    $positions: static, relative, absolute, fixed !default; // , sticky;
 *
 * Or define only the ones you want to use.
 *
 * This will generate classes for each font-style value:
 *    .u-position-static {}
 *    .u-position-relative {}
 *
 * Set to null for no classes.
 */
/* ==========================================================================
   #SASS-MQ
   ========================================================================== */
/* ==========================================================================
   #BOX-SIZING
   ========================================================================== */
/**
 * More sensible default box-sizing:
 * css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice
 */
html {
  box-sizing: border-box;
}

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

/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
/* Document
   ========================================================================== */
/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */
html {
  line-height: 1.15; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
}

/* Sections
   ========================================================================== */
/**
 * Remove the margin in all browsers.
 */
body {
  margin: 0;
}

/**
 * Render the `main` element consistently in IE.
 */
main {
  display: block;
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */
h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

/* Grouping content
   ========================================================================== */
/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */
hr {
  box-sizing: content-box; /* 1 */
  height: 0; /* 1 */
  overflow: visible; /* 2 */
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
pre {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/* Text-level semantics
   ========================================================================== */
/**
 * Remove the gray background on active links in IE 10.
 */
a {
  background-color: transparent;
}

/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */
abbr[title] {
  border-bottom: none; /* 1 */
  text-decoration: underline; /* 2 */
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted; /* 2 */
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */
b,
strong {
  font-weight: bolder;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
code,
kbd,
samp {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/**
 * Add the correct font size in all browsers.
 */
small {
  font-size: 80%;
}

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

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/* Embedded content
   ========================================================================== */
/**
 * Remove the border on images inside links in IE 10.
 */
img {
  border-style: none;
}

/* Forms
   ========================================================================== */
/**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */
button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-size: 100%; /* 1 */
  line-height: 1.15; /* 1 */
  margin: 0; /* 2 */
}

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */
button,
input { /* 1 */
  overflow: visible;
}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */
button,
select { /* 1 */
  text-transform: none;
}

/**
 * Correct the inability to style clickable types in iOS and Safari.
 */
button,
[type=button],
[type=reset],
[type=submit] {
  -webkit-appearance: button;
}

/**
 * Remove the inner border and padding in Firefox.
 */
button::-moz-focus-inner,
[type=button]::-moz-focus-inner,
[type=reset]::-moz-focus-inner,
[type=submit]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

/**
 * Restore the focus styles unset by the previous rule.
 */
button:-moz-focusring,
[type=button]:-moz-focusring,
[type=reset]:-moz-focusring,
[type=submit]:-moz-focusring {
  outline: 1px dotted ButtonText;
}

/**
 * Correct the padding in Firefox.
 */
fieldset {
  padding: 0.35em 0.75em 0.625em;
}

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *    `fieldset` elements in all browsers.
 */
legend {
  box-sizing: border-box; /* 1 */
  color: inherit; /* 2 */
  display: table; /* 1 */
  max-width: 100%; /* 1 */
  padding: 0; /* 3 */
  white-space: normal; /* 1 */
}

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */
progress {
  vertical-align: baseline;
}

/**
 * Remove the default vertical scrollbar in IE 10+.
 */
textarea {
  overflow: auto;
}

/**
 * 1. Add the correct box sizing in IE 10.
 * 2. Remove the padding in IE 10.
 */
[type=checkbox],
[type=radio] {
  box-sizing: border-box; /* 1 */
  padding: 0; /* 2 */
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */
[type=number]::-webkit-inner-spin-button,
[type=number]::-webkit-outer-spin-button {
  height: auto;
}

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */
[type=search] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */
[type=search]::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */
::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/* Interactive
   ========================================================================== */
/*
 * Add the correct display in Edge, IE 10+, and Firefox.
 */
details {
  display: block;
}

/*
 * Add the correct display in all browsers.
 */
summary {
  display: list-item;
}

/* Misc
   ========================================================================== */
/**
 * Add the correct display in IE 10+.
 */
template {
  display: none;
}

/**
 * Add the correct display in IE 10.
 */
[hidden] {
  display: none;
}

/* ==========================================================================
   #RESET
   ========================================================================== */
/**
 * A very simple reset that sits on top of Normalize.css.
 */
body,
h1, h2, h3, h4, h5, h6,
blockquote, p, pre,
dl, dd, ol, ul,
figure,
hr,
fieldset, legend {
  margin: 0;
  padding: 0;
}

/**
 * Remove trailing margins from nested lists.
 */
li > ol,
li > ul {
  margin-bottom: 0;
}

/**
 * Remove default table spacing.
 */
table {
  border-collapse: collapse;
  border-spacing: 0;
}

/**
 * 1. Reset Chrome and Firefox behaviour which sets a `min-width: min-content;`
 *    on fieldsets.
 */
fieldset {
  min-width: 0; /* [1] */
  border: 0;
}

/* ==========================================================================
   #SHARED
   ========================================================================== */
/**
 * Shared declarations for certain elements.
 */
/**
 * Always declare margins in the same direction:
 * csswizardry.com/2012/06/single-direction-margin-declarations
 */
address,
h1, h2, h3, h4, h5, h6,
blockquote, p, pre,
dl, ol, ul,
figure,
hr,
table,
fieldset {
  margin-bottom: 24px;
}

/**
 * Consistent indentation for lists.
 */
dd, ol, ul {
  margin-left: 24px;
}

/* ==========================================================================
   #FORMS
   ========================================================================== */
/**
 * Form elements are already normalized by "/generic/generic.normalize"
 * We can assign our base font settings for form inputs here.
 */
/**
 * 1. Change the normalized font-family and font-size.
 * 2. Set our default font-weight.
 * 3. Make sure the text color is black by default.
 */
/* stylelint-disable selector-list-comma-newline-after */
input, select, option, textarea, select option {
  font-family: "Helvetica Neue", Helvetica, Arial, Verdana, sans-serif; /* [1] */
  font-weight: 400; /* [2] */
  font-size: inherit;
  color: var(--aura-c-form-input-text-color, #424243); /* [3] */
}

/* stylelint-enable selector-list-comma-newline-after */
::placeholder,
::-webkit-input-placeholder {
  font-style: var(--aura-font-style-placeholder, normal);
  color: var(--aura-color-text-placeholder, rgba(0, 0, 0, 0.2)) !important;
}

:-moz-placeholder,
::-moz-placeholder {
  font-style: var(--aura-font-style-placeholder, normal);
  color: var(--aura-color-text-placeholder, rgba(0, 0, 0, 0.2)) !important;
}

:-ms-input-placeholder,
::-ms-input-placeholder {
  font-style: var(--aura-font-style-placeholder, normal);
  color: var(--aura-color-text-placeholder, rgba(0, 0, 0, 0.2)) !important;
}

/* Change Autocomplete styles in Chrome */
input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
  border-color: var(--aura-c-form-input-color-border-focus, #006db7) !important;
  -webkit-text-fill-color: var(--aura-c-form-input-text-color, #424243) !important;
  -webkit-box-shadow: 0 0 0 1000px rgba(0, 109, 183, 0.12) inset !important;
  -webkit-transition: background-color 0s 5000s ease-in-out;
  transition: background-color 0s 5000s ease-in-out;
}
input:-webkit-autofill::first-line,
textarea:-webkit-autofill::first-line,
select:-webkit-autofill::first-line {
  font-family: "Helvetica Neue", Helvetica, Arial, Verdana, sans-serif !important;
  font-weight: 400 !important;
  font-size: 18px !important;
  font-size: 1.125rem !important;
  line-height: 1.3333333333 !important;
  color: var(--aura-c-form-input-text-color, #424243) !important;
}
@media (min-width: 48em) {
  input:-webkit-autofill::first-line,
  textarea:-webkit-autofill::first-line,
  select:-webkit-autofill::first-line {
    font-size: 21px !important;
    font-size: 1.3125rem !important;
    line-height: 1.4285714286 !important;
  }
}

button {
  font-family: var(--aura-font-family, "Open Sans", "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif);
  font-weight: var(--aura-font-weight-body, 400);
  font-size: inherit;
  color: var(--aura-color-text-default, #424243);
}

/**
Keeping a list in case we need to explicitly target an input by type
for setting defaults. Styling should be done with a modifier class
in `components.forms.scss`

[type="tel"],
[type="url"],
[type="text"],
[type="date"],
[type="email"],
[type="month"],
[type="button"],
[type="submit"],
[type="search"],
[type="number"],
[type="textbox"],
[type="password"]

*/
/* ==========================================================================
   #IMAGES
   ========================================================================== */
/**
 * 1. Fluid images for responsive purposes.
 * 2. Offset `alt` text from surrounding copy.
 * 3. Setting `vertical-align` removes the whitespace that appears under `img`
 *    elements when they are dropped into a page as-is. Safer alternative to
 *    using `display: block;`.
 */
img {
  max-width: 100%; /* [1] */
  font-style: italic; /* [2] */
  vertical-align: middle; /* [3] */
}

/**
 * If a `width` and/or `height` attribute has been explicitly defined, let’s
 * not make the image fluid.
 */
img[width],
img[height] {
  max-width: none;
}

/* ==========================================================================
   #PAGE
   ========================================================================== */
/**
 * 1. Ensure the page always fills at least the entire height of the viewport.
 * 2. Force scrollbars to always be visible to prevent awkward ‘jumps’ when
 *    navigating between pages that do/do not have enough content to produce
 *    scrollbars naturally.
 */
html {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 100%; /* [1] */
  overflow: -moz-scrollbars-vertical;
  overflow-y: scroll; /* [2] */
  -webkit-overflow-scrolling: touch;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -webkit-tap-highlight-color: transparent;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  background-color: var(--aura-html-color-background, white);
  overflow-x: hidden;
}

body {
  position: relative;
  width: 100%;
  margin: 0;
  padding: 0;
  background-color: var(--aura-body-color-background, transparent);
  -webkit-text-size-adjust: none;
}
body::before {
  z-index: 1099;
}
body.scroll-lock {
  overflow: hidden;
  height: 100vh;
}

/*
.body__page-loading {
  display: none;
}

.body__page-isLoaded {
  @include animation-name(aniStayHidden, aniFadeIn);
  @include animation-duration(250ms, 250ms);
  @include animation-delay(0s, 250ms);
  @include animation-timing-function(linear, ease-out);
  @include animation-fill-mode(forwards);
  @include animation-iteration-count(1);
}

*/
/* ==========================================================================
  #TABLES
  ========================================================================== */
/**
 * Define our own base styles for the `table` element.
 *
 * Related files:
 * `objects/objects.tables.scss`
 */
/**
 * 1. Ensure tables fill up as much space as possible.
 * 2. Set the default vertical aligment for our table cells.
 */
table {
  display: table;
  table-layout: auto;
  width: 100%; /* [1] */
  border-collapse: collapse;
}
table th {
  vertical-align: middle; /* [2] */
}
table td {
  vertical-align: top; /* [2] */
}

/* ==========================================================================
  #TYPOGRAPHY
  ========================================================================== */
/* Page
   ========================================================================== */
/**
 *
 * 1. Set the default `font-size` and `line-height` for the entire project,
 *    sourced from our default variables. The `font-size` is calculated to exist
 *    in ems, the `line-height` is calculated to exist unitlessly.
 */
html {
  font-size: 1em; /* [1] */
  line-height: 1.5; /* [1] */
}

html,
body {
  font-family: var(--aura-font-family, "Open Sans", "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif);
  font-weight: var(--aura-font-weight-body, 400);
  color: var(--aura-color-text-default, #424243);
}

/* Headings
   ========================================================================== */
/* stylelint-disable selector-list-comma-newline-after */
h1, h1 > *, h2, h2 > *, h3, h3 > *, h4, h4 > *, h5, h5 > *, h6, h6 > * {
  font-family: var(--aura-font-family-heading, "Open Sans", "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif);
  color: var(--aura-color-text-default, #424243);
  text-rendering: optimizeLegibility;
}

/* stylelint-enable selector-list-comma-newline-after */
h1, h1 > * {
  font-size: 50px;
  font-size: 3.125rem;
  line-height: 1.2;
  font-weight: var(--aura-font-weight-h1, 500);
}

h2, h2 > * {
  font-size: 36px;
  font-size: 2.25rem;
  line-height: 1.1666666667;
  font-weight: var(--aura-font-weight-h2, 500);
}

h3, h3 > * {
  font-size: 28px;
  font-size: 1.75rem;
  line-height: 1.2857142857;
  font-weight: var(--aura-font-weight-h3, 600);
}

h4, h4 > * {
  font-size: 24px;
  font-size: 1.5rem;
  line-height: 1.25;
  font-weight: var(--aura-font-weight-h4, 600);
}

h5, h5 > * {
  font-size: 20px;
  font-size: 1.25rem;
  line-height: 1.5;
  font-weight: var(--aura-font-weight-h5, 500);
}

h6, h6 > * {
  font-size: 17px;
  font-size: 1.0625rem;
  line-height: 1.4117647059;
  font-weight: var(--aura-font-weight-h6, 400);
}

/* Text elements
   ========================================================================== */
b,
strong {
  font-weight: var(--aura-strong-font-weight, 700);
}

a {
  transition: color 0.2s ease-out;
  text-decoration: none;
}
a:link {
  color: var(--aura-color-text-link, #006db7);
}
a:visited {
  color: var(--aura-color-text-visited, #4156a6);
}
a:hover {
  color: var(--aura-color-text-hover, #00497a);
  text-decoration: underline;
}
a:active {
  color: var(--aura-color-text-active, #006db7);
}
a:hover, a:active {
  cursor: pointer;
}

cite {
  display: inline-block;
  margin: var(--aura-cite-margin-block, 12px) 0;
  padding: var(--aura-cite-padding-inline, 6px);
  border-radius: 3px;
  color: var(--aura-cite-text-color, #212121);
  font-size: 12px;
  font-size: 0.75rem;
  line-height: 1;
  font-weight: 500;
  font-style: italic;
  background-color: var(--aura-cite-color-background, #f2f2f2);
}

::selection {
  background-color: var(--aura-color-background-selection, #ffde55);
  color: var(--aura-color-text-selection, rgba(0, 0, 0, 0.85));
  text-shadow: none;
}

address,
fieldset {
  font: inherit;
  margin-bottom: 0;
}

caption, th, td {
  text-align: left;
  font-weight: normal;
  vertical-align: middle;
}

caption {
  font-size: 12px;
  font-size: 0.75rem;
  line-height: 1.5;
  font-weight: 500;
}

code {
  font-family: Consolas, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", Monaco, "Courier New", Courier, monospace;
}

/**
 * Include 3rd-party CSS files here. This makes it esier to overwrite any styles
 * in your object or component classes further down the stack.
 */
/* Slider - DO NOT EDIT */
.slick-slider {
  position: relative;
  display: block;
  box-sizing: border-box;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  touch-action: pan-y;
  -webkit-tap-highlight-color: transparent;
}

.slick-list {
  position: relative;
  overflow: hidden;
  display: block;
  margin: 0;
  padding: 0;
}
.slick-list:focus {
  outline: none;
}
.slick-list.dragging {
  cursor: pointer;
  cursor: hand;
}

.slick-slider .slick-track,
.slick-slider .slick-list {
  transform: translate3d(0, 0, 0);
}

.slick-track {
  position: relative;
  left: 0;
  top: 0;
  display: block;
  margin-left: auto;
  margin-right: auto;
}
.slick-track::before, .slick-track::after {
  content: "";
  display: table;
}
.slick-track::after {
  clear: both;
}
.slick-loading .slick-track {
  visibility: hidden;
}

.slick-slide {
  float: left;
  height: 100%;
  min-height: 1px;
  display: none;
}
[dir=rtl] .slick-slide {
  float: right;
}
.slick-slide img {
  display: block;
}
.slick-slide.slick-loading img {
  display: none;
}
.slick-slide.dragging img {
  pointer-events: none;
}
.slick-initialized .slick-slide {
  display: block;
}
.slick-loading .slick-slide {
  visibility: hidden;
}
.slick-vertical .slick-slide {
  display: block;
  height: auto;
  border: 1px solid transparent;
}

.slick-arrow.slick-hidden {
  display: none;
}

/* Slider */
/* Icons */
/* Arrows */
.slick-prev,
.slick-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: block;
  height: var(--aura-c-slick-arrow-size, 24px);
  width: var(--aura-c-slick-arrow-size, 24px);
  line-height: 0px;
  font-size: 0px;
  cursor: pointer;
  background: transparent;
  color: transparent;
  padding: 0;
  border: none;
  outline: none;
  transition: opacity 0.2s ease-out;
  will-change: opacity;
  --aura-slick-previous-icon: url("data:image/svg+xml, %3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='%23000000' d='M16.95 21.192c-0.39 0.39-1.024 0.39-1.414 0l-8.485-8.485c-0.39-0.39-0.39-1.024 0-1.414l8.485-8.485c0.39-0.39 1.024-0.39 1.414 0s0.39 1.024 0 1.414l-7.778 7.778 7.778 7.778c0.39 0.39 0.39 1.024-0 1.414z'/%3E%3C/svg%3E");
  --aura-slick-next-icon: url("data:image/svg+xml, %3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='%23000000' d='M7.050 2.808c0.39-0.39 1.024-0.39 1.414 0l8.485 8.485c0.39 0.39 0.39 1.024 0 1.414l-8.485 8.485c-0.39 0.39-1.024 0.39-1.414-0s-0.39-1.024 0-1.414l7.778-7.778-7.778-7.778c-0.39-0.39-0.39-1.024 0-1.414z'/%3E%3C/svg%3E");
}
.slick-prev::before,
.slick-next::before {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
  opacity: var(--aura-c-slick-opacity-default, 0.75);
  transform: translateX(0);
  transition: opacity 0.2s ease-out, 0.3s transform ease-out;
}
.slick-prev:hover, .slick-prev:focus,
.slick-next:hover,
.slick-next:focus {
  outline: none;
  background: transparent;
  color: transparent;
}
.slick-prev:hover::before, .slick-prev:focus::before,
.slick-next:hover::before,
.slick-next:focus::before {
  opacity: var(--aura-c-slick-opacity-hover, 1);
  will-change: opacity, transform;
}
.slick-prev.slick-disabled,
.slick-next.slick-disabled {
  cursor: default;
}
.slick-prev.slick-disabled::before,
.slick-next.slick-disabled::before {
  opacity: var(--aura-c-slick-opacity-disabled, 0.25);
}

.slick-prev {
  left: var(--aura-c-slick-arrow-inline-position, -25px);
}
[dir=rtl] .slick-prev {
  left: auto;
  right: var(--aura-c-slick-arrow-inline-position, -25px);
}
.slick-prev::before {
  content: "";
  background-image: var(--aura-slick-previous-icon);
  background-repeat: no-repeat;
  background-size: cover;
}
[dir=rtl] .slick-prev::before {
  content: "";
  background-image: var(--aura-slick-next-icon);
  background-repeat: no-repeat;
  background-size: cover;
}
.slick-prev:hover:not(.slick-disabled):before, .slick-prev:focus:not(.slick-disabled):before {
  transform: translateX(-3px);
}

.slick-next {
  right: var(--aura-c-slick-arrow-inline-position, -25px);
}
[dir=rtl] .slick-next {
  left: var(--aura-c-slick-arrow-inline-position, -25px);
  right: auto;
}
.slick-next::before {
  content: "";
  background-image: var(--aura-slick-next-icon);
  background-repeat: no-repeat;
  background-size: cover;
}
[dir=rtl] .slick-next::before {
  content: "";
  background-image: var(--aura-slick-previous-icon);
  background-repeat: no-repeat;
  background-size: cover;
}
.slick-next:hover:not(.slick-disabled):before, .slick-next:focus:not(.slick-disabled):before {
  transform: translateX(3px);
}

/* Dots */
.slick-dotted.slick-slider {
  margin-bottom: var(--aura-c-slick-slider-margin-block-end, 96px);
}

.slick-dots {
  position: absolute;
  bottom: var(--aura-c-slick-dots-margin-block-end, -24px);
  list-style: none;
  display: block;
  text-align: center;
  padding: 0 48px;
  margin: 0;
  width: 100%;
  --aura-slick-dot-icon: url("data:image/svg+xml, %3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='%23E6E6E7' d='M12 2c-5.52 0-10 4.48-10 10s4.48 10 10 10 10-4.48 10-10-4.48-10-10-10z'/%3E%3C/svg%3E");
  --aura-slick-dot-icon-active: url("data:image/svg+xml, %3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='%23006DB7' d='M12 2c-5.52 0-10 4.48-10 10s4.48 10 10 10 10-4.48 10-10-4.48-10-10-10z'/%3E%3C/svg%3E");
}
@media (min-width: 48em) {
  .slick-dots {
    padding: 0;
  }
}
.slick-dots li {
  position: relative;
  display: inline-block;
  height: var(--aura-c-slick-dot-size, 8px);
  width: var(--aura-c-slick-dot-size, 8px);
  margin: 0 3px;
  padding: 0;
  cursor: pointer;
}
.slick-dots li button {
  border: 0;
  background: transparent;
  display: block;
  height: 100%;
  width: 100%;
  outline: none;
  line-height: 0px;
  font-size: 0px;
  color: transparent;
  padding: 5px;
  cursor: pointer;
  transition: opacity 0.2s ease-out;
  will-change: opacity;
}
.slick-dots li button::before {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  content: "";
  background-image: var(--aura-slick-dot-icon);
  background-repeat: no-repeat;
  background-size: cover;
  opacity: var(--aura-c-slick-opacity-default, 0.75);
}
.slick-dots li button:hover, .slick-dots li button:focus {
  outline: none;
}
.slick-dots li button:hover::before, .slick-dots li button:focus::before {
  opacity: var(--aura-c-slick-opacity-hover, 1);
  transition: opacity 0.2s ease-out;
  will-change: opacity;
}
.slick-dots li.slick-active button:before {
  content: "";
  background-image: var(--aura-slick-dot-icon-active);
  background-repeat: no-repeat;
  background-size: cover;
}

/**
 * Modaal - accessible modals - v0.4.4
 * by Humaan, for all humans.
 * http://humaan.com
 */
.modaal-noscroll {
  overflow: hidden;
}

.modaal-accessible-hide {
  position: absolute !important;
  clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
  clip: rect(1px, 1px, 1px, 1px);
  padding: 0 !important;
  border: 0 !important;
  height: 1px !important;
  width: 1px !important;
  overflow: hidden;
}

.modaal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9998;
  opacity: 0;
}

.modaal-wrapper {
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10000;
  overflow: hidden;
  opacity: 1;
  box-sizing: border-box;
  transition: all 0.3s ease-in-out;
  transform: translateY(0);
}
.modaal-wrapper * {
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-backface-visibility: hidden;
}
.modaal-wrapper.modaal-start_none {
  display: none;
  opacity: 1;
}
.modaal-wrapper.modaal-start_fade {
  opacity: 0;
  transform: translateY(-15px);
}
.modaal-wrapper *[tabindex="0"] {
  outline: none !important;
}
.modaal-wrapper.modaal-fullscreen {
  overflow: hidden;
}

.modaal-close {
  border: none;
  background: transparent;
  padding: 0;
  appearance: none;
}

.modaal-outer-wrapper {
  display: table;
  position: relative;
  width: 100%;
  height: 100%;
}
.modaal-fullscreen .modaal-outer-wrapper {
  display: block;
}

.modaal-inner-wrapper {
  display: table-cell;
  width: 100%;
  height: 100%;
  position: relative;
  vertical-align: middle;
  text-align: center;
  padding: 72px 24px;
}
.modaal-fullscreen .modaal-inner-wrapper {
  padding: 0;
  display: block;
  vertical-align: top;
}

.modaal-container {
  position: relative;
  display: inline-block;
  width: 100%;
  margin: 0 auto;
  text-align: left;
  color: #424243;
  max-width: 800px;
  border-radius: 6px;
  background: white;
  box-shadow: 0 2px 10px 0 rgba(183, 183, 184, 0.5);
  cursor: auto;
}
.modaal-container.is_loading {
  height: 100px;
  width: 100px;
  overflow: hidden;
}
.modaal-fullscreen .modaal-container {
  max-width: none;
  height: 100%;
  border-radius: 0;
  overflow: auto;
}

.modaal-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 24px;
  height: 24px;
  border: 0;
  background-color: transparent;
  appearance: none;
  z-index: 100;
}
.modaal-close, .modaal-close:link, .modaal-close:visited, .modaal-close:hover, .modaal-close:active, .modaal-close:focus {
  text-decoration: none;
}
.modaal-close span {
  position: absolute !important;
  clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
  clip: rect(1px, 1px, 1px, 1px);
  padding: 0 !important;
  border: 0 !important;
  height: 1px !important;
  width: 1px !important;
  overflow: hidden;
}
.modaal-close::before {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: block;
  width: 100%;
  height: 100%;
  content: "";
  background-image: url("data:image/svg+xml, %3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='%23424243' d='M16.369 6.216l-4.37 4.37-4.37-4.37-1.414 1.414 4.37 4.37-4.37 4.37 1.414 1.414 4.37-4.37 4.37 4.37 1.414-1.414-4.37-4.37 4.37-4.37z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: cover;
}
.modaal-close::after {
  content: "";
  display: block;
  opacity: 0;
  position: absolute;
  transition-duration: 0.15s;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  z-index: -1;
  bottom: 0;
  left: 0;
  right: 0;
  top: 0;
  background: none;
  border-radius: 50%;
  box-sizing: border-box;
  transform: scale(0);
  transition-property: transform, opacity;
}
.modaal-close:hover, .modaal-close:focus {
  cursor: pointer;
}
.modaal-close:hover::before, .modaal-close:focus::before {
  content: "";
  background-image: url("data:image/svg+xml, %3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='%23000000' d='M16.369 6.216l-4.37 4.37-4.37-4.37-1.414 1.414 4.37 4.37-4.37 4.37 1.414 1.414 4.37-4.37 4.37 4.37 1.414-1.414-4.37-4.37 4.37-4.37z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: cover;
}
.modaal-close:hover::after, .modaal-close:focus::after {
  background-color: #e6e6e7;
  border: none;
  box-shadow: none;
  opacity: 1;
  transform: scale(1);
}

.modaal-content-container {
  padding: 24px;
}

.is-wizard .modaal-content-container {
  padding: 0;
}
.is-wizard .modaal-container {
  overflow: hidden;
}

.modaal-confirm-content {
  display: block;
}

.modaal-confirm-wrap {
  padding-top: 24px;
  font-size: 0;
}

.modaal-confirm-btn {
  position: relative;
  font-size: 16px;
  font-size: 1rem;
  line-height: 1.5;
  display: inline-block;
  width: 100%;
  height: 40px;
  margin: 0;
  margin-bottom: 24px;
  padding: 0 48px;
  font-weight: 700;
  letter-spacing: 1px;
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
  border: none;
  border-radius: 3px;
  background: transparent;
  transition: background-color 0.2s ease-out;
}
.modaal-confirm-btn::after {
  content: "";
  position: absolute;
  top: 4px;
  left: 4px;
  right: 4px;
  bottom: 4px;
  border: 1px dashed rgba(255, 255, 255, 0.6);
  border-radius: 3px;
  opacity: 0;
  transition: opacity 0.2s ease-out;
  will-change: opacity;
}
.modaal-confirm-btn:focus {
  outline: none;
}
.modaal-confirm-btn:focus::after {
  opacity: 1;
}
.modaal-confirm-btn:last-of-type {
  margin-bottom: 0;
}
@media (min-width: 48em) {
  .modaal-confirm-btn {
    margin-right: 24px;
    margin-bottom: 0;
    width: auto;
  }
  .modaal-confirm-btn:last-of-type {
    margin-right: 0;
  }
}
.modaal-confirm-btn.modaal-ok {
  color: white;
  background-color: #006db7;
}
.modaal-confirm-btn.modaal-ok:hover, .modaal-confirm-btn.modaal-ok:focus {
  background-color: #00497a;
}
.modaal-confirm-btn.modaal-ok:active {
  background-color: #006db7;
}
@media (min-width: 48em) {
  .modaal-confirm-btn.modaal-ok {
    min-width: 186px;
  }
}
.modaal-confirm-btn.modaal-cancel {
  border: 1px solid #424243;
  background-color: transparent;
}
.modaal-confirm-btn.modaal-cancel::before {
  content: "";
  position: absolute;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  border: 1px solid #424243;
  border-radius: 3px;
  opacity: 0;
  transition: opacity 0.2s ease-out;
  will-change: opacity;
}
.modaal-confirm-btn.modaal-cancel::after {
  border-color: rgba(66, 66, 67, 0.6);
}
.modaal-confirm-btn.modaal-cancel, .modaal-confirm-btn.modaal-cancel:link, .modaal-confirm-btn.modaal-cancel:visited, .modaal-confirm-btn.modaal-cancel:hover, .modaal-confirm-btn.modaal-cancel:active, .modaal-confirm-btn.modaal-cancel:focus {
  text-decoration: none;
  color: #424243;
}
.modaal-confirm-btn.modaal-cancel:hover, .modaal-confirm-btn.modaal-cancel:focus {
  background-color: transparent;
}
.modaal-confirm-btn.modaal-cancel:hover::before, .modaal-confirm-btn.modaal-cancel:focus::before {
  opacity: 1;
}
.modaal-confirm-btn.modaal-cancel:active {
  background-color: transparent;
}
.modaal-confirm-btn.modaal-cancel:active::before {
  opacity: 1;
}

@keyframes instaReveal {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.modaal-instagram .modaal-container {
  width: auto;
  background: transparent;
  box-shadow: none !important;
}
.modaal-instagram .modaal-content-container {
  padding: 0;
  background: transparent;
}
.modaal-instagram .modaal-content-container > blockquote {
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
}
.modaal-instagram iframe {
  opacity: 0;
  margin: -6px !important;
  border-radius: 0 !important;
  width: 1000px !important;
  max-width: 800px !important;
  box-shadow: none !important;
  animation: instaReveal 1s linear forwards;
}

.modaal-image .modaal-inner-wrapper {
  padding-left: 140px;
  padding-right: 140px;
}
.modaal-image .modaal-container {
  width: auto;
  max-width: 100%;
}

.modaal-gallery-wrap {
  position: relative;
  color: #fff;
}

.modaal-gallery-item {
  display: none;
}
.modaal-gallery-item img {
  display: block;
}
.modaal-gallery-item.is_active {
  display: block;
}

.modaal-gallery-label {
  position: absolute;
  left: 0;
  width: 100%;
  margin: 20px 0 0;
  font-size: 18px;
  text-align: center;
  color: #fff;
}
.modaal-gallery-label:focus {
  outline: none;
}

.modaal-gallery-control {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  opacity: 1;
  cursor: pointer;
  color: #fff;
  width: 50px;
  height: 50px;
  background: rgba(0, 0, 0, 0);
  border: none;
  border-radius: 100%;
  transition: all 0.2s ease-in-out;
}
.modaal-gallery-control.is_hidden {
  opacity: 0;
  cursor: default;
}
.modaal-gallery-control:focus, .modaal-gallery-control:hover {
  outline: none;
  background: #fff;
}
.modaal-gallery-control:focus::before, .modaal-gallery-control:focus::after, .modaal-gallery-control:hover::before, .modaal-gallery-control:hover::after {
  background: #afb7bc;
}
.modaal-gallery-control span {
  position: absolute !important;
  clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
  clip: rect(1px, 1px, 1px, 1px);
  padding: 0 !important;
  border: 0 !important;
  height: 1px !important;
  width: 1px !important;
  overflow: hidden;
}
.modaal-gallery-control::before, .modaal-gallery-control::after {
  display: block;
  content: " ";
  position: absolute;
  top: 16px;
  left: 25px;
  width: 4px;
  height: 18px;
  border-radius: 4px;
  background: #fff;
  transition: background 0.2s ease-in-out;
}
.modaal-gallery-control::before {
  margin: -5px 0 0;
  transform: rotate(-45deg);
}
.modaal-gallery-control::after {
  margin: 5px 0 0;
  transform: rotate(45deg);
}

.modaal-gallery-next-inner {
  left: 100%;
  margin-left: 40px;
}
.modaal-gallery-next-outer {
  right: 45px;
}

.modaal-gallery-prev::before, .modaal-gallery-prev::after {
  left: 22px;
}
.modaal-gallery-prev::before {
  margin: 5px 0 0;
  transform: rotate(-45deg);
}
.modaal-gallery-prev::after {
  margin: -5px 0 0;
  transform: rotate(45deg);
}
.modaal-gallery-prev-inner {
  right: 100%;
  margin-right: 40px;
}
.modaal-gallery-prev-outer {
  left: 45px;
}

.modaal-video-wrap {
  margin: auto 50px;
  position: relative;
}

.modaal-video-container {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  max-width: 100%;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
  background: #000;
  max-width: 1300px;
  margin-left: auto;
  margin-right: auto;
}
.modaal-video-container iframe,
.modaal-video-container object,
.modaal-video-container embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.modaal-iframe .modaal-content {
  width: 100%;
  height: 100%;
}

.modaal-iframe-elem {
  width: 100%;
  height: 100%;
  display: block;
}

@media only screen and (min-width: 1400px) {
  .modaal-video-container {
    padding-bottom: 0;
    height: 731px;
  }
}
@media only screen and (max-width: 1140px) {
  .modaal-image .modaal-inner-wrapper {
    padding-left: 25px;
    padding-right: 25px;
  }
  .modaal-gallery-control {
    top: auto;
    bottom: 20px;
    transform: none;
    background: rgba(0, 0, 0, 0.7);
  }
  .modaal-gallery-control::before, .modaal-gallery-control::after {
    background: #fff;
  }
  .modaal-gallery-next {
    left: auto;
    right: 20px;
  }
  .modaal-gallery-prev {
    left: 20px;
    right: auto;
  }
}
@media screen and (max-width: 900px) {
  .modaal-instagram iframe {
    width: 500px !important;
  }
}
@media screen and (max-height: 1100px) {
  .modaal-instagram iframe {
    width: 700px !important;
  }
}
@media screen and (max-height: 1000px) {
  .modaal-inner-wrapper {
    padding-top: 60px;
    padding-bottom: 60px;
  }
  .modaal-instagram iframe {
    width: 600px !important;
  }
}
@media screen and (max-height: 900px) {
  .modaal-instagram iframe {
    width: 500px !important;
  }
  .modaal-video-container {
    max-width: 900px;
    max-height: 510px;
  }
}
@media only screen and (max-width: 600px) {
  .modaal-instagram iframe {
    width: 280px !important;
  }
}
@media only screen and (max-height: 820px) {
  .modaal-gallery-label {
    display: none;
  }
}
.modaal-loading-spinner {
  background: none;
  position: absolute;
  width: 200px;
  height: 200px;
  top: 50%;
  left: 50%;
  margin: -100px 0 0 -100px;
  transform: scale(0.25);
}
@keyframes modaal-loading-spinner {
  0% {
    opacity: 1;
    transform: scale(1.5);
  }
  100% {
    opacity: 0.1;
    transform: scale(1);
  }
}
.modaal-loading-spinner > div {
  width: 24px;
  height: 24px;
  margin-left: 4px;
  margin-top: 4px;
  position: absolute;
}

.modaal-loading-spinner > div > div {
  width: 100%;
  height: 100%;
  border-radius: 15px;
  background: #fff;
}

.modaal-loading-spinner > div:nth-of-type(1) > div {
  animation: modaal-loading-spinner 1s linear infinite;
  animation-delay: 0s;
}

.modaal-loading-spinner > div:nth-of-type(2) > div, .modaal-loading-spinner > div:nth-of-type(3) > div {
  -ms-animation: modaal-loading-spinner 1s linear infinite;
  -moz-animation: modaal-loading-spinner 1s linear infinite;
  -webkit-animation: modaal-loading-spinner 1s linear infinite;
  -o-animation: modaal-loading-spinner 1s linear infinite;
}

.modaal-loading-spinner > div:nth-of-type(1) {
  transform: translate(84px, 84px) rotate(45deg) translate(70px, 0);
}

.modaal-loading-spinner > div:nth-of-type(2) > div {
  animation: modaal-loading-spinner 1s linear infinite;
  animation-delay: 0.12s;
}

.modaal-loading-spinner > div:nth-of-type(2) {
  transform: translate(84px, 84px) rotate(90deg) translate(70px, 0);
}

.modaal-loading-spinner > div:nth-of-type(3) > div {
  animation: modaal-loading-spinner 1s linear infinite;
  animation-delay: 0.25s;
}

.modaal-loading-spinner > div:nth-of-type(4) > div, .modaal-loading-spinner > div:nth-of-type(5) > div {
  -ms-animation: modaal-loading-spinner 1s linear infinite;
  -moz-animation: modaal-loading-spinner 1s linear infinite;
  -webkit-animation: modaal-loading-spinner 1s linear infinite;
  -o-animation: modaal-loading-spinner 1s linear infinite;
}

.modaal-loading-spinner > div:nth-of-type(3) {
  transform: translate(84px, 84px) rotate(135deg) translate(70px, 0);
}

.modaal-loading-spinner > div:nth-of-type(4) > div {
  animation: modaal-loading-spinner 1s linear infinite;
  animation-delay: 0.37s;
}

.modaal-loading-spinner > div:nth-of-type(4) {
  transform: translate(84px, 84px) rotate(180deg) translate(70px, 0);
}

.modaal-loading-spinner > div:nth-of-type(5) > div {
  animation: modaal-loading-spinner 1s linear infinite;
  animation-delay: 0.5s;
}

.modaal-loading-spinner > div:nth-of-type(6) > div, .modaal-loading-spinner > div:nth-of-type(7) > div {
  -ms-animation: modaal-loading-spinner 1s linear infinite;
  -moz-animation: modaal-loading-spinner 1s linear infinite;
  -webkit-animation: modaal-loading-spinner 1s linear infinite;
  -o-animation: modaal-loading-spinner 1s linear infinite;
}

.modaal-loading-spinner > div:nth-of-type(5) {
  transform: translate(84px, 84px) rotate(225deg) translate(70px, 0);
}

.modaal-loading-spinner > div:nth-of-type(6) > div {
  animation: modaal-loading-spinner 1s linear infinite;
  animation-delay: 0.62s;
}

.modaal-loading-spinner > div:nth-of-type(6) {
  transform: translate(84px, 84px) rotate(270deg) translate(70px, 0);
}

.modaal-loading-spinner > div:nth-of-type(7) > div {
  animation: modaal-loading-spinner 1s linear infinite;
  animation-delay: 0.75s;
}

.modaal-loading-spinner > div:nth-of-type(7) {
  transform: translate(84px, 84px) rotate(315deg) translate(70px, 0);
}

.modaal-loading-spinner > div:nth-of-type(8) > div {
  animation: modaal-loading-spinner 1s linear infinite;
  animation-delay: 0.87s;
}

.modaal-loading-spinner > div:nth-of-type(8) {
  transform: translate(84px, 84px) rotate(360deg) translate(70px, 0);
}

/* Modaal inline content structure
   ========================================================================== */
/**
 * Some structuring formatting for inline Modaal content
 */
.c-modaal__inline {
  display: block;
  width: 100%;
}

.c-modaal__header {
  width: 100%;
  margin: 0;
  padding-right: 24px;
}
@media (min-width: 48em) {
  .c-modaal__header {
    padding-top: 24px;
    padding-bottom: 24px;
  }
}

#modaal-title,
.c-modaal__title {
  margin-bottom: 0;
  font-size: 24px;
  font-size: 1.5rem;
  line-height: 1.25;
  font-weight: 600;
}
#modaal-title .c-svg,
.c-modaal__title .c-svg {
  top: 0.125em;
  margin-right: 12px;
  width: 24px;
  height: 24px;
}
@media (min-width: 48em) {
  #modaal-title .c-svg,
  .c-modaal__title .c-svg {
    margin-right: 24px;
  }
}

/**
 * Scrollable content area of the modal window.
 *
 * 1. Add space between the body and the modal window to make room for
 *    the close button.
 * 2. Set a max-height so that scrolling can occur.
 * 3. Show vertical scrollbar when content exceeds max-height.
 */
.modaal-confirm-content,
.c-modaal__body {
  margin: 24px 0;
  max-height: 50vh; /* [2] */
  overflow-y: auto; /* [3] */
  -webkit-overflow-scrolling: touch;
}
@media (max-width: 47.99em) {
  .modaal-confirm-content,
  .c-modaal__body {
    font-size: 14px;
    font-size: 0.875rem;
    line-height: 1.7142857143;
  }
}
@media (min-width: 48em) {
  .modaal-confirm-content,
  .c-modaal__body {
    padding-right: 24px;
  }
}
.modaal-confirm-content > :last-child,
.c-modaal__body > :last-child {
  margin-bottom: 0;
}

.c-modaal__footer {
  padding-top: 24px;
  width: 100%;
}

@media (max-width: 47.99em) {
  .c-modaal__btn {
    width: 100%;
    margin-bottom: 24px;
  }
  .c-modaal__btn:last-of-type {
    margin-bottom: 0;
  }
}
@media (min-width: 48em) {
  .c-modaal__btn.c-btn {
    margin-right: 24px;
  }
}
@media (min-width: 48em) {
  .c-modaal__btn.c-btn--primary {
    min-width: 186px;
  }
}

/* ==========================================================================
   #CAROUSELS
   ========================================================================== */
/**
 * Extending and modifying the carousel layout.
 *
 * Related files:
 * `/vendors/slick.scss`, `/vendors/slick-theme.scss`, `/js/slick.min.js`
 *
 *
 * Some standard style overrides you may want to apply to all your
 * `o-carousel` components.
 */
.o-carousel {
  position: relative;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease-out;
  will-change: opacity;
}
.o-carousel.slick-initialized {
  visibility: visible;
  opacity: 1;
}

.o-carousel__item {
  position: relative;
}

/* Carousel variants
   ========================================================================== */
/* Hero area carousel - example */
.o-carousel--hero.slick-dotted.slick-slider {
  margin-bottom: 0px;
}
.o-carousel--hero .slick-dots {
  bottom: 8px;
}
.o-carousel--hero .slick-dots {
  --aura-slick-dot-icon: url("data:image/svg+xml, %3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='%23FFFFFF' d='M12 2c-5.52 0-10 4.48-10 10s4.48 10 10 10 10-4.48 10-10-4.48-10-10-10z'/%3E%3C/svg%3E");
  --aura-slick-dot-icon-active: url("data:image/svg+xml, %3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='%2300497A' d='M12 2c-5.52 0-10 4.48-10 10s4.48 10 10 10 10-4.48 10-10-4.48-10-10-10z'/%3E%3C/svg%3E");
}
.o-carousel--hero .slick-dots li button::before {
  content: "";
  background-image: var(--aura-slick-dot-icon);
  background-repeat: no-repeat;
  background-size: cover;
}
.o-carousel--hero .slick-dots li.slick-active button:before {
  content: "";
  background-image: var(--aura-slick-dot-icon-active);
  background-repeat: no-repeat;
  background-size: cover;
}

/**
 * A thumbnail style carousel, where you see more then one slide
 * at a time and page through the "groups" of slides.
 */
.o-carousel--thumbs {
  width: auto;
  margin: 0;
  margin-left: -24px;
  margin-right: -24px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease-out;
  will-change: opacity;
}
.o-wrapper--tips-history .o-carousel--thumbs, .o-carousel--thumbs.slick-initialized {
  visibility: visible;
  opacity: 1;
}
@media (min-width: 48em) {
  .o-carousel--thumbs {
    margin-left: 0;
    margin-right: 0;
  }
}
.o-carousel--thumbs .slick-list {
  font-size: 0;
}
@media (min-width: 48em) {
  .o-carousel--thumbs .slick-list {
    margin-left: -24px;
  }
}
.o-carousel--thumbs .slick-track {
  margin-left: 0;
  margin-right: 0;
}
.o-carousel--thumbs .o-carousel__item {
  box-sizing: border-box;
  display: inline-block;
  vertical-align: top;
  width: 100%;
  font-size: 16px;
  font-size: 1rem;
  line-height: initial;
}
@media (min-width: 48em) {
  .o-carousel--thumbs .o-carousel__item {
    padding-left: 24px;
  }
}
.o-carousel--thumbs .slick-prev,
.o-carousel--thumbs .slick-next {
  height: 32px;
  width: 32px;
  z-index: 100;
}
@media (min-width: 62em) {
  .o-carousel--thumbs .slick-prev,
  .o-carousel--thumbs .slick-next {
    height: 42px;
    width: 42px;
    transform: translate(0, -70%);
  }
}
@media (max-width: 61.99em) {
  .o-carousel--thumbs .slick-prev {
    left: 12px;
  }
}
@media (min-width: 62em) {
  .o-carousel--thumbs .slick-prev {
    left: -72px;
  }
}
@media (max-width: 61.99em) {
  .o-carousel--thumbs .slick-next {
    right: 12px;
  }
}
@media (min-width: 62em) {
  .o-carousel--thumbs .slick-next {
    right: -72px;
  }
}

/* ==========================================================================
   #FLEXBODY
   ========================================================================== */
/**
 * Use flex method for sticky footer.

  <html>
    <body class="o-flexbody__body">

      <div\form class="o-flexbody__body ">

        <header></header>

        <div class="o-flexbody__page">

            [ PAGE CONTENT GOES HERE ]

        </div>

        <footer></footer>

      </div\form>

    </body>

  </html>

 * Dependecies:
 * Body tag needs `o-flexbody__body` class.

 * Outer wrapper tag needs `o-flexbody__body` class. Some platforms require that all
 * the site content gets inserted into another tag, like a form tag in .NET or
 * and `app-root` tag in Angular2 for example, so we need to double up on our
 * `o-flexbody__body` object class.

 * IE10 requires Modernizr.addTest('flexboxtweener') method to be enabled
*/
.o-flexbody__body {
  position: relative;
  min-height: 100vh; /* OLD - iOS 6-, Safari 3.1-6, BB7 */ /* TWEENER - IE 10 */ /* NEW - Safari 6.1+. iOS 7.1+, BB10 */
  display: flex; /* NEW, Spec - Firefox, Chrome, Opera */
  width: 100%;
  /* Your grandparents flexbox for Webkit */
  /* Prefixed new syntax: */
  /* Same syntax for weird IE tweener */
  /* unprefixed new syntax */
  flex-direction: column;
}
.o-flexbody__body .page-head,
.o-flexbody__body .page-footer,
.o-flexbody__body .c-notifications-wrapper {
  flex: none;
}

.o-flexbody__page {
  position: relative;
  width: 100%;
  flex: 1 0 auto;
  -webkit-flex: 1 0 auto;
}
.o-flexbody__page.o-layout--stretch {
  margin-left: 0;
}
.o-flexbody__page.o-layout--stretch > .o-layout__item {
  padding-left: 0;
}

.o-flexbody__page-layout {
  position: relative;
  width: 100%;
  flex: 1 0 auto;
  -webkit-flex: 1 0 auto;
}
@media (min-width: 62em) {
  .o-flexbody__page-layout.o-layout {
    display: flex;
    flex-wrap: wrap;
  }
  .o-flexbody__page-layout.o-layout > .o-layout__item {
    display: flex;
  }
  .o-flexbody__page-layout.o-layout.o-layout--center {
    justify-content: center;
  }
  .o-flexbody__page-layout.o-layout.o-layout--right {
    justify-content: flex-end;
  }
  .o-flexbody__page-layout.o-layout.o-layout--left {
    justify-content: flex-start;
  }
}
.o-flexbody__page-layout.has-sticky-nav {
  padding-right: 0;
  padding-left: 0;
  margin-right: auto;
  margin-left: auto;
  max-width: var(--aura-theme-page-width, 1366px);
}
.o-flexbody__page-layout.has-sticky-nav::after {
  content: "";
  display: table;
  clear: both;
}

.flexboxtweener,
.flexboxtweener > body,
.flexboxtweener .o-flexbody__body {
  height: 100%;
  min-height: 100%;
}

/* Aligner */
@media (min-width: 48em) {
  .o-flex-aligner {
    display: flex;
    align-items: center;
    min-height: 60vh;
    justify-content: center;
    /**
    * Fixes the min-height bug in IE10-11.
    * This class should be added to a container element as described in
    * Flexbug #3. See http://bit.ly/1gy8OJS for details.
    */
  }
  .o-flex-aligner.o-flexbody__page--full-height {
    height: 100vh;
  }
  .o-flex-aligner .o-flex-aligner__item {
    flex: 1;
  }
  .o-flex-aligner .o-flex-aligner__item--top {
    align-self: flex-start;
  }
  .o-flex-aligner .o-flex-aligner__item--bottom {
    align-self: flex-end;
  }
  .o-flex-aligner .o-flex-aligner__item--fixed {
    flex: none;
    max-width: 50%;
  }
  .o-flex-aligner .u-ieMinHeightBugFix {
    display: flex;
    flex-direction: column;
  }
}

/* ==========================================================================
  #LISTS
  ========================================================================== */
/**
 * Layouts using <ul> and <li> elements and the o-layout based @mixin
 *  o-layout-list($gutter: $spacing-default, $vertical-alignment: top, $item-width: 100%)
 */
.o-list-inline {
  /**
   * 1. Allows us to use the layout object on any type of element.
   * 2. We need to defensively reset any box-model properties.
   * 3. Use the negative margin trick for multi-row grids:
   *    http://csswizardry.com/2011/08/building-better-grid-systems/
   */
  display: block; /* [1] */
  margin: 0; /* [2] */
  padding: 0; /* [2] */
  list-style: none; /* [1] */
  font-size: 0;
  /**
   * 1. Required in order to combine fluid widths with fixed gutters.
   * 2. Allows us to manipulate grids vertically, with text-level properties,
   *    etc.
   * 3. Default item alignment is with the tops of each other, like most
   *    traditional grid/layout systems.
   * 4. By default, all layout items are full-width (mobile first).
   * 5. Gutters provided by left padding:
   *    http://csswizardry.com/2011/08/building-better-grid-systems/
   * 6. Fallback for old IEs not supporting `rem` values.
   */
}
@media (min-width: 48em) {
  .o-list-inline {
    margin-left: -24px; /* [3] */
  }
}
.o-list-inline > li {
  box-sizing: border-box; /* [1] */
  display: block;
  font-size: 16px; /* [6] */
  font-size: 1rem;
}
@media (max-width: 47.99em) {
  .o-list-inline > li {
    text-align: center;
    margin-bottom: 24px;
  }
}
@media (min-width: 48em) {
  .o-list-inline > li {
    display: inline-block; /* [2] */
    vertical-align: top; /* [3] */
    width: auto; /* [4] */
    padding-left: 24px; /* [5] */
  }
}

.o-listbox-inline {
  /**
   * 1. Allows us to use the layout object on any type of element.
   * 2. We need to defensively reset any box-model properties.
   * 3. Use the negative margin trick for multi-row grids:
   *    http://csswizardry.com/2011/08/building-better-grid-systems/
   */
  display: block; /* [1] */
  margin: 0; /* [2] */
  padding: 0; /* [2] */
  list-style: none; /* [1] */
  font-size: 0;
  /**
   * 1. Required in order to combine fluid widths with fixed gutters.
   * 2. Allows us to manipulate grids vertically, with text-level properties,
   *    etc.
   * 3. Default item alignment is with the tops of each other, like most
   *    traditional grid/layout systems.
   * 4. By default, all layout items are full-width (mobile first).
   * 5. Gutters provided by left padding:
   *    http://csswizardry.com/2011/08/building-better-grid-systems/
   * 6. Fallback for old IEs not supporting `rem` values.
   */
}
@media (min-width: 48em) {
  .o-listbox-inline {
    margin-left: -6px; /* [3] */
  }
}
.o-listbox-inline > li {
  box-sizing: border-box; /* [1] */
  display: block;
  font-size: 16px; /* [6] */
  font-size: 1rem;
}
@media (max-width: 47.99em) {
  .o-listbox-inline > li {
    text-align: center;
    margin-bottom: 6px;
  }
}
@media (min-width: 48em) {
  .o-listbox-inline > li {
    display: inline-block; /* [2] */
    vertical-align: middle; /* [3] */
    width: auto; /* [4] */
    padding-left: 6px; /* [5] */
  }
}

/* Vertical alignment modifiers
   ========================================================================== */
/**
 * Align all grid items to the middles of each other.
 */
.o-list--middle li {
  vertical-align: middle;
}

/**
 * Align all grid items to the bottoms of each other.
 */
.o-list--bottom li {
  vertical-align: bottom;
}

/* Variants
   ========================================================================== */
.o-list--reverse {
  direction: rtl;
}
.o-list--reverse > li {
  direction: ltr;
}

.o-list--spacing-bottom li {
  margin-bottom: 24px;
}

/* ==========================================================================
   #WRAPPERS
   ========================================================================== */
/**
 * Page-level constraining and wrapping elements.
 */
.o-wrapper {
  padding-right: 24px;
  padding-left: 24px;
  margin-right: auto;
  margin-left: auto;
  max-width: var(--aura-theme-page-width, 1366px);
}
.o-wrapper::after {
  content: "";
  display: table;
  clear: both;
}

.o-wrapper, .o-wrapper.o-wrapper--tiny, .o-wrapper.o-wrapper--small, .o-wrapper.o-wrapper--large, .o-wrapper.o-wrapper--huge {
  /**
    * 1. Since the browser viewport is well beyond the max-width of our site,
    *    we can remove the left and right buffer from the `o-wrapper` object
    *    and go full max-width.
    */
}

.o-wrapper--flush {
  padding-right: 0 !important;
  padding-left: 0 !important;
}

@media (max-width: 61.99em) {
  .o-wrapper--buffer {
    padding-right: 12px;
    padding-left: 12px;
  }
}

@media (max-width: 47.99em) {
  .o-wrapper--full\@mobile {
    padding-right: 0;
    padding-left: 0;
  }
}

.o-wrapper--full-width {
  margin-left: -24px;
  margin-right: -24px;
  padding-left: 48px;
  padding-right: 48px;
}
@media (min-width: 48em) {
  .o-wrapper--full-width {
    width: 100%;
    max-width: 100% !important;
    margin-left: 0;
    margin-right: 0;
  }
}
@media (min-width: 62em) {
  .o-wrapper--full-width {
    padding-left: 72px;
    padding-right: 72px;
  }
}

.o-wrapper--positioning { /* Deprecated class - use .u-position-relative */
  position: relative;
}

/* Size variants
   ========================================================================== */
.o-wrapper--tiny {
  padding-left: 6px;
  padding-right: 6px;
}

.o-wrapper--small {
  padding-left: 12px;
  padding-right: 12px;
}

.o-wrapper--large {
  padding-left: 48px;
  padding-right: 48px;
}

.o-wrapper--huge {
  padding-left: 96px;
  padding-right: 96px;
}

/* ==========================================================================
   #LAYOUT
   ========================================================================== */
/**
 * Grid-like layout system.
 *
 * The layout object provides us with a column-style layout system. This file
 * contains the basic structural elements, but classes should be complemented
 * with width utilities, for example:
 *
 *   <div class="o-layout">
 *     <div class="o-layout__item  u-1/2">
 *     </div>
 *     <div class="o-layout__item  u-1/2">
 *     </div>
 *   </div>
 *
 * The above will create a two-column structure in which each column will
 * fluidly fill half of the width of the parent. We can have more complex
 * systems:
 *
 *   <div class="o-layout">
 *     <div class="o-layout__item  u-1/1  u-1/3@medium">
 *     </div>
 *     <div class="o-layout__item  u-1/2  u-1/3@medium">
 *     </div>
 *     <div class="o-layout__item  u-1/2  u-1/3@medium">
 *     </div>
 *   </div>
 *
 * The above will create a system in which the first item will be 100% width
 * until we enter our medium breakpoint, when it will become 33.333% width. The
 * second and third items will be 50% of their parent, until they also become
 * 33.333% width at the medium breakpoint.
 *
 * We can also manipulate entire layout systems by adding a series of modifiers
 * to the `.o-layout` block. For example:
 *
 *   <div class="o-layout  o-layout--reverse">
 *
 * This will reverse the displayed order of the system so that it runs in the
 * opposite order to our source, effectively flipping the system over.
 *
 *   <div class="o-layout  o-layout--[right|center]">
 *
 * This will cause the system to fill up from either the centre or the right
 * hand side. Default behaviour is to fill up the layout system from the left.
 *
 * There are plenty more options available to us: explore them below.
 */
/* Default/mandatory classes
   ========================================================================== */
/**
 * 1. Allows us to use the layout object on any type of element.
 * 2. We need to defensively reset any box-model properties.
 * 3. Use the negative margin trick for multi-row grids:
 *    http://csswizardry.com/2011/08/building-better-grid-systems/
 */
.o-layout {
  display: block; /* [1] */
  margin: 0; /* [2] */
  padding: 0; /* [2] */
  list-style: none; /* [1] */
  margin-left: -24px; /* [3] */
  font-size: 0;
}

/**
 * 1. Required in order to combine fluid widths with fixed gutters.
 * 2. Allows us to manipulate grids vertically, with text-level properties,
 *    etc.
 * 3. Default item alignment is with the tops of each other, like most
 *    traditional grid/layout systems.
 * 4. By default, all layout items are full-width (mobile first).
 * 5. Gutters provided by left padding:
 *    http://csswizardry.com/2011/08/building-better-grid-systems/
 * 6. Fallback for old IEs not supporting `rem` values.
 */
.o-layout__item {
  box-sizing: border-box; /* [1] */
  display: inline-block; /* [2] */
  vertical-align: top; /* [3] */
  width: 100%; /* [4] */
  padding-left: 24px; /* [5] */
  font-size: 16px; /* [6] */
  font-size: 1rem;
}

/* Gutter size modifiers
   ========================================================================== */
.o-layout--flush {
  margin-left: 0;
}
.o-layout--flush > .o-layout__item {
  padding-left: 0;
}

.o-layout--micro {
  margin-left: -3px;
}
.o-layout--micro > .o-layout__item {
  padding-left: 3px;
}

.o-layout--tiny {
  margin-left: -6px;
}
.o-layout--tiny > .o-layout__item {
  padding-left: 6px;
}

.o-layout--small {
  margin-left: -12px;
}
.o-layout--small > .o-layout__item {
  padding-left: 12px;
}

.o-layout--large {
  margin-left: -48px;
}
.o-layout--large > .o-layout__item {
  padding-left: 48px;
}

.o-layout--huge {
  margin-left: -96px;
}
.o-layout--huge > .o-layout__item {
  padding-left: 96px;
}

/* Vertical alignment modifiers
   ========================================================================== */
/**
 * Align all grid items to the middles of each other.
 */
.o-layout--middle > .o-layout__item {
  vertical-align: middle;
}

/**
 * Align all grid items to the bottoms of each other.
 */
.o-layout--bottom > .o-layout__item {
  vertical-align: bottom;
}

/**
 * Stretch all grid items of each row to have an equal-height.
 * Please be aware that this modifier class doesn’t take any effect in IE9 and
 * below and other older browsers due to the lack of `display: flex` support.
 */
.o-layout--stretch { /* OLD - iOS 6-, Safari 3.1-6, BB7 */ /* TWEENER - IE 10 */ /* NEW - Safari 6.1+. iOS 7.1+, BB10 */
  display: flex; /* NEW, Spec - Firefox, Chrome, Opera */
  flex-wrap: wrap;
}
.o-layout--stretch > .o-layout__item {
  display: flex;
}
.o-layout--stretch.o-layout--center {
  justify-content: center;
}
.o-layout--stretch.o-layout--right {
  justify-content: flex-end;
}
.o-layout--stretch.o-layout--left {
  justify-content: flex-start;
}

/* Fill order modifiers
   ========================================================================== */
/**
 * Fill up the layout system from the centre.
 */
.o-layout--center {
  text-align: center;
}
.o-layout--center > .o-layout__item {
  text-align: left;
}

/**
 * Fill up the layout system from the right-hand side.
 */
.o-layout--right {
  text-align: right;
}
.o-layout--right > .o-layout__item {
  text-align: left;
}

/**
 * Fill up the layout system from the left-hand side. This will likely only be
 * needed when using in conjunction with `.o-layout--reverse`.
 */
.o-layout--left {
  text-align: left;
}
.o-layout--left > .o-layout__item {
  text-align: left;
}

/**
 * Reverse the rendered order of the grid system.
 */
.o-layout--reverse {
  direction: rtl;
}
.o-layout--reverse > .o-layout__item {
  direction: ltr;
}

/* Auto-widths modifier
   ========================================================================== */
/**
 * Cause layout items to take up a non-explicit amount of width.
 */
.o-layout--auto > .o-layout__item {
  width: auto;
}

@media (min-width: 48em) {
  .o-layout--auto\@tablet > .o-layout__item {
    width: auto;
  }
}

/* Variants
   ========================================================================== */
@media (min-width: 48em) {
  .o-layout--sticky-left-nav {
    position: sticky;
    position: -webkit-sticky;
    top: var(--aura-o-sticky-left-nav-position-top, 146px);
  }
}

@media (min-width: 48em) {
  .o-layout--left-nav-column {
    width: var(--aura-o-left-nav-column-width, auto);
    max-width: var(--aura-o-left-nav-column-max-width, auto);
    height: var(--aura-o-left-nav-column-height, auto);
    padding-top: var(--aura-o-left-nav-column-padding-block-start, 0);
    padding-right: var(--aura-o-left-nav-column-padding-inline-start, 0);
    padding-bottom: var(--aura-o-left-nav-column-padding-block-end, 0);
    padding-left: var(--aura-o-left-nav-column-padding-inline-end, 0);
    background-color: var(--aura-o-left-nav-column-color-background, transparent);
  }
}

/* ==========================================================================
  #SECTIONS
  ========================================================================== */
/* Use the `o-section` object to define the content area of a page, or to break
 * the page up into multiple sections.

  <div class="o-wrapper">

    <section class="o-section o-section--divider">
        [...]
    </section>

    <section class="o-section">
        [...]
    </section>

  </div>

 * If your page design requires a background color to span the full width of the
 * viewport, add a `.u-fill--` color class to the `.o-wrapper` element.


    <div class="o-wrapper u-fill--neutral-ulight">
      <section class="o-section">
        [...]
      </section>
    </div>

 *
 */
/**
 * 1. Mobile first top padding and bottom margin for your section. Try to apply
 *    margins in one direction only.
 *    See: https://csswizardry.com/2012/06/single-direction-margin-declarations/
 * 2. Clear any floats that might be in the section.
 * 3. Nice big top and bottom padding @tablet and above.
 */
.o-section {
  position: relative;
  padding-top: var(--aura-o-section-mobile-block-start, 48px); /* [1] */
  padding-bottom: var(--aura-o-section-mobile-block-end, 48px); /* [1] */
  background-color: var(--aura-color-background, white);
  /* [2] */
}
.o-section::after {
  content: "";
  display: table;
  clear: both;
}
@media (min-width: 48em) {
  .o-section {
    padding-top: var(--aura-o-section-block-start, 60px); /* [3] */
    padding-bottom: var(--aura-o-section-block-end, 60px); /* [3] */
  }
}
@media (max-width: 47.99em) {
  .o-section.has-side-nav {
    padding-top: var(--aura-o-section-has-side-nav-block-start, 0);
  }
}

/* Content dividers
   ========================================================================== */
/**
 * Section divider with a horizontal bottom border that stretches past the
 * default left and right padding of the `.o-wrapper` object. Use only when
 * `o-section` is inside of an `.o-wrapper` object.
 *
 * 1. Push the container outside of the wrapper padding to extend the top border.
 * 2. Add left and right padding to bring the content back in line with the page.
 * 3. Add bottom padding to separate the content from the bottom border.
 */
.o-section--divider {
  padding-bottom: 24px; /* [3] */
  border-bottom: 1px solid #e6e6e7;
  margin-bottom: 48px;
}
@media (min-width: 48em) {
  .o-section--divider {
    padding-bottom: 48px;
    margin-bottom: 60px;
  }
}
.o-section--divider:last-of-type {
  margin-bottom: 0;
  border-bottom: 0;
}
@media (min-width: 100em) {
  .o-section--divider {
    /**
    * Wrapper size variations - change the horizontal spacing based on the wrapper
    * element.
    */
  }
  .o-wrapper .o-section--divider {
    margin-right: -24px; /* [1] */
    margin-left: -24px; /* [1] */
    padding-right: 24px; /* [2] */
    padding-left: 24px; /* [2] */
  }
  .o-wrapper--tiny .o-section--divider {
    margin-right: -6px;
    margin-left: -6px;
    padding-right: 6px;
    padding-left: 6px;
  }
  .o-wrapper--small .o-section--divider {
    margin-right: -12px;
    margin-left: -12px;
    padding-right: 12px;
    padding-left: 12px;
  }
  .o-wrapper--large .o-section--divider {
    margin-right: -48px;
    margin-left: -48px;
    padding-right: 48px;
    padding-left: 48px;
  }
  .o-wrapper--huge .o-section--divider {
    margin-right: -96px;
    margin-left: -96px;
    padding-right: 96px;
    padding-left: 96px;
  }
}

.o-section--mobile {
  border-top: 1px solid #e6e6e7;
}
@media (min-width: 48em) {
  .o-section--mobile {
    border: none;
  }
}

@media (min-width: 62em) {
  .o-section--home {
    padding-top: 48px;
    padding-bottom: 48px;
  }
}

.o-section--admin {
  padding-top: 24px;
  padding-bottom: 48px;
}

.o-section--secondary {
  padding-top: 48px;
  padding-bottom: 48px;
  background-color: #f6f6f6;
  border-top-style: solid;
  border-top-width: 1px;
  border-top-color: var(--aura-color-border, #e6e6e7);
}

.o-section--back-btn-bottom {
  margin-top: 24px;
  padding-top: 24px;
  padding-bottom: 0;
  border-top: 1px solid #e6e6e7;
}

/* Size variants
   ========================================================================== */
.o-section--flush {
  padding-top: 0;
  padding-bottom: 0;
}

.o-section--flush-top {
  padding-top: 0;
}

.o-section--flush-bottom {
  padding-bottom: 0;
}

.o-section--tiny {
  padding-top: 6px;
  padding-bottom: 6px;
}

.o-section--small {
  padding-top: 12px;
  padding-bottom: 12px;
}

.o-section--large {
  padding-top: 48px;
  padding-bottom: 48px;
}

.o-section--huge {
  padding-top: 96px;
  padding-bottom: 96px;
}

/* Decoration variants
   ========================================================================== */
.o-section--border-bottom {
  margin-bottom: 48px;
  padding-bottom: 0;
}
.o-section--border-bottom > .o-wrapper {
  border-bottom: 1px solid #e6e6e7;
  padding-bottom: 24px;
}
@media (min-width: 48em) {
  .o-section--border-bottom {
    margin-bottom: 60px;
  }
  .o-section--border-bottom > .o-wrapper {
    padding-bottom: 48px;
  }
}

/* ==========================================================================
   #ANIMATIONS CUSTOM
   ========================================================================== */
@keyframes borderscale {
  50% {
    box-shadow: 0 0 0 2px #006db7;
  }
}
@keyframes aniBgColors {
  0% {
    background-color: #009cdc;
  }
  50% {
    background-color: #ec2c36;
  }
  100% {
    background-color: #f4a832;
  }
}
@keyframes aniDim {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0.4;
  }
}
@keyframes aniStayHidden {
  0%, 100% {
    opacity: 0;
  }
}
@keyframes aniFadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes aniFadeOut {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes aniFadeInUp {
  0% {
    transform: translateY(20px);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}
@keyframes aniFadeInLeft {
  0% {
    transform: translateX(-20px);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}
@keyframes aniFadeInRight {
  0% {
    transform: translateX(20px);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}
@keyframes aniFadeInDown {
  0% {
    transform: translateY(-20px);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}
@keyframes aniSlideOutUp {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    visibility: hidden;
    transform: translate3d(0, -100%, 0);
  }
}
.ani-slideOutUp {
  animation-name: aniSlideOutUp;
}
@keyframes aniSlideOutDown {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(0, 100%, 0);
  }
}
.ani-slideOutDown {
  animation-name: aniSlideOutDown;
}
@keyframes aniSlideOutLeft {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(-100%, 0, 0);
  }
}
@keyframes aniSlideOutRight {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(100%, 0, 0);
  }
}
@keyframes aniSlideInDown {
  0% {
    transform: translate3d(0, -100%, 0);
  }
  100% {
    transform: translate3d(0, 0, 0);
  }
}
@media (min-width: 48em) {
  .ani-hideFadein\@tablet {
    animation-name: aniStayHidden, aniFadeInUp;
    animation-duration: 1500ms, 550ms;
    animation-delay: 0s, 1500ms;
    animation-timing-function: linear, ease-out;
  }
}
@keyframes aniPopIn {
  0% {
    transform: scale(1) translate(-50%, -50%);
  }
  1% {
    transform: scale(0.5) translate(-50%, -50%);
  }
  45% {
    transform: scale(1.05) translate(-50%, -50%);
  }
  80% {
    transform: scale(0.95) translate(-50%, -50%);
  }
  100% {
    transform: scale(1) translate(-50%, -50%);
  }
}
/* ==========================================================================
   #BUTTONS
   ========================================================================== */
/** Private framework-only tokens **/
/**
 * Buttons
 * @selector .c-btn
 * @restrict a, button, input[type="submit"]
 *
 * HTML

  Anchor:
    <a href="#0" id="btnLink" class="c-btn c-btn--primary" role="button">Link</a>

  Button:
    <button id="btnButton" class="c-btn c-btn--primary">Button</button>

  Input:
    <input id="btnSubmit" class="c-btn c-btn--primary" type="submit" value="Submit""/>

 *
 */
/**
 * 1. Mobile first - make our buttons block elements below tablet size screens,
 *    center align them, and make them full width up to a set max-width.
 * 2. Allow us to style box model properties.
 * 3. Line different sized buttons up a little nicer.
 * 4. Make buttons inherit font styles (often necessary when styling `input`s as
 *    buttons).
 * 5. Reset/normalize some styles.
 * 6. Force all button-styled elements to appear clickable.
 * 7. Give the user a nice visual indication that the button is in focus.
 * 8. Make the default button have small rounded corners for the box-shadow outline.
 */
.c-btn {
  --aura-c-button-color-background: transparent;
  --aura-c-button-color-background-hover: #f2f2f2;
  --aura-c-button-color-background-active: transparent;
  --aura-c-button-color-border: transparent;
  --aura-c-button-color-border-hover: #f2f2f2;
  --aura-c-button-color-border-active: transparent;
  --aura-c-button-radius-border: 3px;
  --aura-c-button-color-text: #006db7;
  --aura-c-button-color-text-hover: #00497a;
  --aura-c-button-color-text-active: #006db7;
  --aura-c-button-height: 38px;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%; /* [1] */
  max-width: var(--aura-c-button-max-width, 252px); /* [1] */
  margin-right: auto; /* [1] */
  margin-left: auto; /* [1] */
  padding-top: var(--aura-c-button-padding-block-start-mobile, 9px); /* [1] */
  padding-bottom: var(--aura-c-button-padding-block-end-mobile, 9px); /* [1] */
  padding-left: var(--aura-c-button-padding-inline-start-mobile, 24px);
  padding-right: var(--aura-c-button-padding-inline-end-mobile, 24px);
  font: inherit; /* [4] */
  text-align: center; /* [5] */
  font-size: 16px;
  font-size: 1rem;
  line-height: 20px;
  font-weight: var(--aura-c-button-font-weight, 600);
  letter-spacing: var(--aura-c-button-letter-spacing, 1px);
  background: none;
  background-color: var(--aura-c-button-color-background);
  background-clip: border-box;
  cursor: pointer; /* [6] */
  border-color: var(--aura-c-button-color-border);
  border-style: solid;
  border-width: var(--aura-c-button-border-width, 1px);
  border-radius: var(--aura-c-button-radius-border); /* [8] */
  border-collapse: separate; /* For IE */
  box-shadow: none;
  transition: var(--aura-c-button-transition, color 0.2s ease-out, background-color 0.2s ease-out, box-shadow 0.2s ease-out);
  appearance: none;
  white-space: normal;
  -webkit-user-select: none;
          user-select: none;
  /**
   * When `c-btn` classes are on a <label> wrapping an input button
   * 1. Set pointer-events to none to fix issue with the parent container's 
   *    :pseudo or positioned elements interfering with the submmit action of the 
   *    input button.
   */
}
.c-btn, .c-btn:link, .c-btn:visited, .c-btn:hover, .c-btn:active, .c-btn:focus {
  color: var(--aura-c-button-color-text);
  text-decoration: none;
}
.c-btn:hover, .c-btn:focus {
  outline: 0;
  cursor: pointer;
}
.c-btn:hover {
  color: var(--aura-c-button-color-text-hover);
  background-color: var(--aura-c-button-color-background-hover);
  border-color: var(--aura-c-button-color-border-hover);
  box-shadow: var(--aura-c-button-shadow-hover, none);
}
.c-btn:focus, .c-btn.is-input-btn:focus-within, .c-btn.c-btn--input-combo:focus-within {
  box-shadow: var(--aura-c-button-shadow-focus, 0 0 0 3px rgba(0, 109, 183, 0.3));
}
.c-btn:active {
  color: var(--aura-c-button-color-text-active);
  background-color: var(--aura-c-button-color-background-active);
  border-color: var(--aura-c-button-color-border-active);
  box-shadow: var(--aura-c-button-shadow-active, none) !important;
}
.c-btn:disabled, .c-btn.is-disabled, .c-btn[disabled], .c-btn[disabled=disabled] {
  transition: none;
}
.c-btn:disabled, .c-btn:disabled:link, .c-btn:disabled:visited, .c-btn:disabled:hover, .c-btn:disabled:active, .c-btn:disabled:focus, .c-btn.is-disabled, .c-btn.is-disabled:link, .c-btn.is-disabled:visited, .c-btn.is-disabled:hover, .c-btn.is-disabled:active, .c-btn.is-disabled:focus, .c-btn[disabled], .c-btn[disabled]:link, .c-btn[disabled]:visited, .c-btn[disabled]:hover, .c-btn[disabled]:active, .c-btn[disabled]:focus, .c-btn[disabled=disabled], .c-btn[disabled=disabled]:link, .c-btn[disabled=disabled]:visited, .c-btn[disabled=disabled]:hover, .c-btn[disabled=disabled]:active, .c-btn[disabled=disabled]:focus {
  color: var(--aura-c-button-color-text-disabled, var(--aura-c-button-color-text));
  cursor: default !important;
  background-image: none !important;
  background-color: var(--aura-c-button-color-background-disabled, var(--aura-c-button-color-background));
  border-color: var(--aura-c-button-color-border-disabled, var(--aura-c-button-color-border));
  box-shadow: none !important;
  opacity: var(--aura-c-button-opacity-disabled, 0.3);
}
.c-btn:disabled *, .c-btn.is-disabled *, .c-btn[disabled] *, .c-btn[disabled=disabled] * {
  pointer-events: none;
}
.c-btn a {
  color: currentColor;
}
@media (min-width: 48em) {
  .c-btn {
    padding-top: var(--aura-c-button-padding-block-start, 0); /* [1] */
    padding-right: var(--aura-c-button-padding-inline-end, 36px); /* [1] */
    padding-bottom: var(--aura-c-button-padding-block-end, 0); /* [1] */
    padding-left: var(--aura-c-button-padding-inline-start, 36px); /* [1] */
    width: auto;
    max-width: initial;
    line-height: var(--aura-c-button-height, 38px);
    white-space: nowrap;
    vertical-align: middle; /* [3] */
  }
}
.c-btn.is-input-btn, .c-btn.is-input-btn:hover, .c-btn.is-input-btn:active,
.c-btn.is-input-btn .c-svg {
  pointer-events: none; /* [1] */
}
@media (max-width: 47.99em) {
  .c-btn + .c-btn {
    margin-top: 12px;
  }
}
@media (min-width: 48em) {
  .c-btn + .c-btn {
    margin-left: 12px;
  }
}

input.c-btn,
.c-btn__input {
  appearance: none;
  outline: none;
}

.c-btn__input {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  background: none;
  border: none;
  border-radius: var(--aura-c-button-radius-border, 3px);
  cursor: pointer;
  pointer-events: all;
  opacity: 0;
}

/* Style variants
   ========================================================================== */
.c-btn--reset {
  font-size: inherit;
  color: inherit;
  line-height: inherit;
  padding: 0;
  background: transparent;
  border: 0;
  text-align: inherit;
}

.c-btn--primary {
  --aura-c-button-color-background: var(--aura-c-button-primary-color-background, #006db7);
  --aura-c-button-color-background-hover: var(--aura-c-button-primary-color-background-hover, #00497a);
  --aura-c-button-color-background-active: var(--aura-c-button-primary-color-background-active, #006db7);
  --aura-c-button-color-border: var(--aura-c-button-primary-color-border, #006db7);
  --aura-c-button-color-border-hover: var(--aura-c-button-primary-color-border-hover, #00497a);
  --aura-c-button-color-border-active: var(--aura-c-button-primary-color-border-active, #006db7);
  --aura-c-button-color-text: var(--aura-c-button-primary-text-color, white);
  --aura-c-button-color-text-hover: var(--aura-c-button-primary-text-color-hover, white);
  --aura-c-button-color-text-active: var(--aura-c-button-primary-text-color-active, white);
  /* @TODO 
      Is it better to use the custom props to change styles or keep the below CSS?
  */
}

.c-btn--secondary,
.c-btn--outline {
  --aura-c-button-color-background: var(--aura-c-button-outline-color-background, transparent);
  --aura-c-button-color-background-hover: var(--aura-c-button-outline-color-background-hover, transparent);
  --aura-c-button-color-background-active: var(--aura-c-button-outline-color-background-active, #c1e6ff);
  --aura-c-button-color-border: var(--aura-c-button-outline-color-border, #006db7);
  --aura-c-button-color-border-hover: var(--aura-c-button-outline-color-border-hover, #006db7);
  --aura-c-button-color-border-active: var(--aura-c-button-outline-color-border-active, #c1e6ff);
  --aura-c-button-color-text: var(--aura-c-button-outline-text-color, #006db7);
  --aura-c-button-color-text-hover: var(--aura-c-button-outline-text-color-hover, #006db7);
  --aura-c-button-color-text-active: var(--aura-c-button-outline-text-color-active, #006db7);
  border-collapse: separate; /* For IE */
}
.c-btn--secondary:hover,
.c-btn--outline:hover {
  box-shadow: var(--aura-c-button-outline-shadow-hover, 0 0 0 1px #00497a inset);
}
.c-btn--secondary:disabled::before, .c-btn--secondary:disabled:link::before, .c-btn--secondary:disabled:visited::before, .c-btn--secondary:disabled:hover::before, .c-btn--secondary:disabled:active::before, .c-btn--secondary:disabled:focus::before, .c-btn--secondary[disabled]::before, .c-btn--secondary[disabled]:link::before, .c-btn--secondary[disabled]:visited::before, .c-btn--secondary[disabled]:hover::before, .c-btn--secondary[disabled]:active::before, .c-btn--secondary[disabled]:focus::before, .c-btn--secondary.is-disabled::before, .c-btn--secondary.is-disabled:link::before, .c-btn--secondary.is-disabled:visited::before, .c-btn--secondary.is-disabled:hover::before, .c-btn--secondary.is-disabled:active::before, .c-btn--secondary.is-disabled:focus::before, .c-btn--secondary[disabled=disabled]::before, .c-btn--secondary[disabled=disabled]:link::before, .c-btn--secondary[disabled=disabled]:visited::before, .c-btn--secondary[disabled=disabled]:hover::before, .c-btn--secondary[disabled=disabled]:active::before, .c-btn--secondary[disabled=disabled]:focus::before,
.c-btn--outline:disabled::before,
.c-btn--outline:disabled:link::before,
.c-btn--outline:disabled:visited::before,
.c-btn--outline:disabled:hover::before,
.c-btn--outline:disabled:active::before,
.c-btn--outline:disabled:focus::before,
.c-btn--outline[disabled]::before,
.c-btn--outline[disabled]:link::before,
.c-btn--outline[disabled]:visited::before,
.c-btn--outline[disabled]:hover::before,
.c-btn--outline[disabled]:active::before,
.c-btn--outline[disabled]:focus::before,
.c-btn--outline.is-disabled::before,
.c-btn--outline.is-disabled:link::before,
.c-btn--outline.is-disabled:visited::before,
.c-btn--outline.is-disabled:hover::before,
.c-btn--outline.is-disabled:active::before,
.c-btn--outline.is-disabled:focus::before,
.c-btn--outline[disabled=disabled]::before,
.c-btn--outline[disabled=disabled]:link::before,
.c-btn--outline[disabled=disabled]:visited::before,
.c-btn--outline[disabled=disabled]:hover::before,
.c-btn--outline[disabled=disabled]:active::before,
.c-btn--outline[disabled=disabled]:focus::before {
  display: none;
}

.c-btn--neutral {
  --aura-c-button-color-background: var(--aura-c-button-neutral-color-background, #6d6d6d);
  --aura-c-button-color-background-hover: var(--aura-c-button-neutral-color-background-hover, #9b9b9e);
  --aura-c-button-color-background-active: var(--aura-c-button-neutral-color-background-active, #424243);
  --aura-c-button-color-border: var(--aura-c-button-neutral-color-border, #6d6d6d);
  --aura-c-button-color-border-hover: var(--aura-c-button-neutral-color-border-hover, #9b9b9e);
  --aura-c-button-color-border-active: var(--aura-c-button-neutral-color-border-active, #424243);
  --aura-c-button-color-text: var(--aura-c-button-neutral-text-color, white);
  --aura-c-button-color-text-hover: var(--aura-c-button-neutral-text-color-hover, white);
  --aura-c-button-color-text-active: var(--aura-c-button-neutral-text-color-active, white);
}

.c-btn--outline-neutral {
  --aura-c-button-color-background: var(--aura-c-button-outline-neutral-color-background, transparent);
  --aura-c-button-color-background-hover: var(--aura-c-button-outline-neutral-color-background-hover, transparent);
  --aura-c-button-color-background-active: var(--aura-c-button-outline-neutral-color-background-active, #f2f2f2);
  --aura-c-button-color-border: var(--aura-c-button-outline-neutral-color-border, #6d6d6d);
  --aura-c-button-color-border-hover: var(--aura-c-button-outline-neutral-color-border-hover, #6d6d6d);
  --aura-c-button-color-border-active: var(--aura-c-button-outline-neutral-color-border-active, #f2f2f2);
  --aura-c-button-color-text: var(--aura-c-button-outline-neutral-text-color, #6d6d6d);
  --aura-c-button-color-text-hover: var(--aura-c-button-outline-neutral-text-color-hover, #6d6d6d);
  --aura-c-button-color-text-active: var(--aura-c-button-outline-neutral-text-color-active, #6d6d6d);
}
.c-btn--outline-neutral:disabled::before, .c-btn--outline-neutral:disabled:link::before, .c-btn--outline-neutral:disabled:visited::before, .c-btn--outline-neutral:disabled:hover::before, .c-btn--outline-neutral:disabled:active::before, .c-btn--outline-neutral:disabled:focus::before, .c-btn--outline-neutral[disabled]::before, .c-btn--outline-neutral[disabled]:link::before, .c-btn--outline-neutral[disabled]:visited::before, .c-btn--outline-neutral[disabled]:hover::before, .c-btn--outline-neutral[disabled]:active::before, .c-btn--outline-neutral[disabled]:focus::before, .c-btn--outline-neutral.is-disabled::before, .c-btn--outline-neutral.is-disabled:link::before, .c-btn--outline-neutral.is-disabled:visited::before, .c-btn--outline-neutral.is-disabled:hover::before, .c-btn--outline-neutral.is-disabled:active::before, .c-btn--outline-neutral.is-disabled:focus::before, .c-btn--outline-neutral[disabled=disabled]::before, .c-btn--outline-neutral[disabled=disabled]:link::before, .c-btn--outline-neutral[disabled=disabled]:visited::before, .c-btn--outline-neutral[disabled=disabled]:hover::before, .c-btn--outline-neutral[disabled=disabled]:active::before, .c-btn--outline-neutral[disabled=disabled]:focus::before {
  display: none;
}
.c-btn--outline-neutral:hover {
  box-shadow: var(--aura-c-button-outline-neutral-shadow-hover, 0 0 0 1px #9b9b9e inset);
}

.c-btn--neutral:focus, .c-btn--neutral.is-input-btn:focus-within, .c-btn--neutral.c-btn--input-combo:focus-within,
.c-btn--outline-neutral:focus,
.c-btn--outline-neutral.is-input-btn:focus-within,
.c-btn--outline-neutral.c-btn--input-combo:focus-within {
  box-shadow: var(--aura-c-button-neutral-shadow-focus, 0 0 0 3px rgba(109, 109, 109, 0.3));
}
.c-btn--neutral:active,
.c-btn--outline-neutral:active {
  box-shadow: var(--aura-c-button-neutral-shadow-active, none);
}

.c-btn--text,
.c-btn--text-inverse {
  margin: 0;
  padding: 0;
  width: auto;
  letter-spacing: initial;
  font-weight: var(--aura-c-button-text-font-weight, 500);
  border-radius: 3px;
}

.c-btn--text {
  --aura-c-button-color-background-hover: transparent;
  --aura-c-button-color-border-hover: transparent;
}
.c-btn--text.has-icon-bubble {
  padding: 0;
  padding-left: var(--aura-c-button-text-padding-inline-icon, 48px);
  font-weight: var(--aura-c-button-font-weight, 600);
  max-width: -moz-fit-content;
  max-width: fit-content;
}
.c-btn--text.has-icon-bubble, .c-btn--text.has-icon-bubble:link, .c-btn--text.has-icon-bubble:visited, .c-btn--text.has-icon-bubble:hover, .c-btn--text.has-icon-bubble:active, .c-btn--text.has-icon-bubble:focus {
  color: var(--aura-c-button-text-text-color, #424243);
}
.c-btn--text.has-icon-bubble:hover, .c-btn--text.has-icon-bubble:focus {
  color: var(--aura-c-button-text-text-color-hover, black);
}

.c-btn__icon-bubble {
  display: block;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 0;
  width: var(--aura-c-button-icon-bubble-boundary, 40px);
  height: var(--aura-c-button-icon-bubble-boundary, 40px);
  background-color: var(--aura-c-button-icon-bubble-color-background, #f6f6f6);
  border-radius: 50%;
  transition: background-color 0.2s ease-out;
}
.c-btn__icon-bubble .c-svg {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: var(--aura-c-button-icon-size, 24px);
  height: var(--aura-c-button-icon-size, 24px);
  color: currentColor;
  background-color: transparent;
}
.c-btn--text:hover .c-btn__icon-bubble {
  background-color: var(--aura-c-button-text-icon-bubble-background-color-hover, #00497a);
  color: var(--aura-c-button-text-icon-bubble-background-color-hover, white);
}

.c-btn--skip-to-content {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -201%);
  transition: transform 0.2s;
  z-index: 6000;
}
@media (max-width: 61.99em) {
  .c-btn--skip-to-content {
    display: none;
  }
}
.c-btn--skip-to-content:focus {
  transform: translate(-50%, 24px);
}
.c-btn--skip-to-content.c-btn--secondary, .c-btn--skip-to-content.c-btn--tertiary {
  background-color: var(--aura-c-button-skip-color-background, white);
}

/**
 * An icon only button butted up to a form input, like a search control.
 *
 * 1. Reset inherited `c-btn` styles that will mess up the combo button.
 * 2. Default button width that fits an icon.
 * 3. Match the height of input fields.
 * 4. Hide any button text that might be there for screen-readers etc.
 *    put it in a `span` tag.
 *
 * HTML:

    <div class="c-form-field">
      <label class="c-form-field__label">Search</label>
      <div class="c-form-field__input c-form-field--btn-combo">
        <input type="text" name="text" value="" class="c-input c-input--btn-combo" />

        <label class="c-btn c-btn--primary c-btn--input-combo" for="btn-search">
          <svg class="c-svg c-svg--search-24" aria-labelledby="svg-title">
            <title id="svg-title">Search</title>
            <use xlink:href="#c-svg--search-24"></use>
          </svg>
          <input id="btn-search" type="submit" value="Search" class="c-btn__input" />
        </label>
      </div>
    </div>

 */
.c-btn--input-combo {
  display: inline-block; /* [1] */
  margin: 0; /* [1] */
  padding: 0;
  width: 40px; /* [2] */
  height: 40px; /* [3] */
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  border-top-right-radius: 3px;
  border-bottom-right-radius: 3px;
  vertical-align: top;
  line-height: 2.75em;
  flex-shrink: 0;
}
.c-btn--input-combo span {
  display: none;
  text-indent: -119988px;
  overflow: hidden;
  text-align: left;
  /* [4] */
}
.c-btn--input-combo .c-svg {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: var(--aura-c-button-icon-size, 24px);
  height: var(--aura-c-button-icon-size, 24px);
}
.c-btn--input-combo:hover .c-svg {
  color: currentColor;
}

/* Inverse buttons
   ========================================================================== */
/**
 * Inverse buttons are used on dark backgrounds.
 */
.c-btn--inverse {
  --aura-c-button-color-background: var(--aura-c-button-inverse-color-background, transparent);
  --aura-c-button-color-background-hover: var(--aura-c-button-inverse-color-background-hover, #212121);
  --aura-c-button-color-background-active: var(--aura-c-button-inverse-color-background-active, transparent);
  --aura-c-button-color-border: var(--aura-c-button-inverse-color-border, transparent);
  --aura-c-button-color-border-hover: var(--aura-c-button-inverse-color-border-hover, #212121);
  --aura-c-button-color-border-active: var(--aura-c-button-inverse-color-border-active, transparent);
  --aura-c-button-color-text: var(--aura-c-button-inverse-text-color, white);
  --aura-c-button-color-text-hover: var(--aura-c-button-inverse-text-color-hover, #e6e6e7);
  --aura-c-button-color-text-active: var(--aura-c-button-inverse-text-color-active, white);
}
.c-btn--inverse:focus, .c-btn--inverse.is-input-btn:focus-within, .c-btn--inverse.c-btn--input-combo:focus-within {
  box-shadow: var(--aura-c-button-inverse-shadow-focus, 0 0 0 3px rgba(0, 0, 0, 0.3));
}
.c-btn--inverse:active {
  box-shadow: var(--aura-c-button-inverse-shadow-active, none);
}

.c-btn--primary-inverse {
  --aura-c-button-color-background: var(--aura-c-button-primary-inverse-color-background, white);
  --aura-c-button-color-background-hover: var(--aura-c-button-primary-inverse-color-background-hover, #e6e6e7);
  --aura-c-button-color-background-active: var(--aura-c-button-primary-inverse-color-background-active, white);
  --aura-c-button-color-border: var(--aura-c-button-primary-inverse-color-border, white);
  --aura-c-button-color-border-hover: var(--aura-c-button-primary-inverse-color-border-hover, #e6e6e7);
  --aura-c-button-color-border-active: var(--aura-c-button-primary-inverse-color-border-active, white);
  --aura-c-button-color-text: var(--aura-c-button-primary-inverse-text-color, #212121);
  --aura-c-button-color-text-hover: var(--aura-c-button-primary-inverse-text-color-hover, #212121);
  --aura-c-button-color-text-active: var(--aura-c-button-primary-inverse-text-color-active, #212121);
}
.c-btn--primary-inverse:focus, .c-btn--primary-inverse.is-input-btn:focus-within, .c-btn--primary-inverse.c-btn--input-combo:focus-within {
  box-shadow: var(--aura-c-button-primary-inverse-shadow-focus, 0 0 0 3px rgba(0, 0, 0, 0.3));
}
.c-btn--primary-inverse:active {
  box-shadow: var(--aura-c-button-primary-inverse-shadow-active, none);
}

.c-btn--outline-inverse {
  --aura-c-button-color-background: var(--aura-c-button-outline-inverse-color-background, transparent);
  --aura-c-button-color-background-hover: var(--aura-c-button-outline-inverse-color-background-hover, transparent);
  --aura-c-button-color-background-active: var(--aura-c-button-outline-inverse-color-background-active, white);
  --aura-c-button-color-border: var(--aura-c-button-outline-inverse-color-border, white);
  --aura-c-button-color-border-hover: var(--aura-c-button-outline-inverse-color-border-hover, white);
  --aura-c-button-color-border-active: var(--aura-c-button-outline-inverse-color-border-active, white);
  --aura-c-button-color-text: var(--aura-c-button-outline-inverse-text-color, white);
  --aura-c-button-color-text-hover: var(--aura-c-button-outline-inverse-text-color-hover, white);
  --aura-c-button-color-text-active: var(--aura-c-button-outline-inverse-text-color-active, #212121);
  border-collapse: separate; /* For IE */
}
.c-btn--outline-inverse:hover {
  box-shadow: var(--aura-c-button-outline-inverse-shadow-hover, 0 0 0 1px white inset);
}
.c-btn--outline-inverse:focus, .c-btn--outline-inverse.is-input-btn:focus-within, .c-btn--outline-inverse.c-btn--input-combo:focus-within {
  box-shadow: var(--aura-c-button-outline-inverse-shadow-focus, 0 0 0 3px rgba(0, 0, 0, 0.3));
}
.c-btn--outline-inverse:active {
  box-shadow: var(--aura-c-button-outline-inverse-shadow-active, none);
}

.c-btn--neutral-inverse {
  --aura-c-button-color-background: var(--aura-c-button-neutral-inverse-color-background, #d9d8d5);
  --aura-c-button-color-background-hover: var(--aura-c-button-neutral-inverse-color-background-hover, #e6e6e7);
  --aura-c-button-color-background-active: var(--aura-c-button-neutral-inverse-color-background-active, #f6f6f6);
  --aura-c-button-color-border: var(--aura-c-button-neutral-inverse-color-border, #d9d8d5);
  --aura-c-button-color-border-hover: var(--aura-c-button-neutral-inverse-color-border-hover, #e6e6e7);
  --aura-c-button-color-border-active: var(--aura-c-button-neutral-inverse-color-border-active, #f6f6f6);
  --aura-c-button-color-text: var(--aura-c-button-neutral-inverse-text-color, #212121);
  --aura-c-button-color-text-hover: var(--aura-c-button-neutral-inverse-text-color-hover, #212121);
  --aura-c-button-color-text-active: var(--aura-c-button-neutral-inverse-text-color-active, #212121);
}
.c-btn--neutral-inverse:focus, .c-btn--neutral-inverse.is-input-btn:focus-within, .c-btn--neutral-inverse.c-btn--input-combo:focus-within {
  box-shadow: var(--aura-c-button-neutral-inverse-shadow-focus, 0 0 0 3px rgba(0, 0, 0, 0.3));
}
.c-btn--neutral-inverse:active {
  box-shadow: var(--aura-c-button-neutral-inverse-shadow-active, none);
}

.c-btn--text-inverse {
  --aura-c-button-color-background: var(--aura-c-button-text-inverse-color-background, transparent);
  --aura-c-button-color-background-hover: var(--aura-c-button-text-inverse-color-background-hover, transparent);
  --aura-c-button-color-background-active: var(--aura-c-button-text-inverse-color-background-active, transparent);
  --aura-c-button-color-border: var(--aura-c-button-text-inverse-color-border, transparent);
  --aura-c-button-color-border-hover: var(--aura-c-button-text-inverse-color-border-hover, transparent);
  --aura-c-button-color-border-active: var(--aura-c-button-text-inverse-color-border-active, transparent);
  --aura-c-button-color-text: var(--aura-c-button-text-inverse-text-color, white);
  --aura-c-button-color-text-hover: var(--aura-c-button-text-inverse-text-color-hover, #e6e6e7);
  --aura-c-button-color-text-active: var(--aura-c-button-text-inverse-text-color-active, white);
}
.c-btn--text-inverse:focus, .c-btn--text-inverse.is-input-btn:focus-within, .c-btn--text-inverse.c-btn--input-combo:focus-within {
  box-shadow: var(--aura-c-button-text-inverse-shadow-focus, 0 0 0 3px rgba(0, 0, 0, 0.3));
}
.c-btn--text-inverse:active {
  box-shadow: var(--aura-c-button-text-inverse-shadow-active, none);
}

/* Buttons with an icon
   ========================================================================== */
/**
 * 1. Reset pointer-events on submit button.
 * 2. Icons are placed on the right by default, we need to add extra padding to
 *    account for the positioning of the icon.
 * 3. We have to do some negative margin trickery so our input button looks
 *    and interacts like any other button.
 * 4. Then re-add the padding to the input element.
 *
 * HTML

  Anchor:
    <a href="#0" id="btnLinkIcon" class="c-btn c-btn--primary has-icon" role="button">
      <svg class="c-svg c-svg--arrow-right-24" aria-hidden="true" focusable="false">
        <use xlink:href="#c-svg--arrow-right-24"></use>
      </svg>
      Link
    </a>

  Button:
    <button id="btnButtonIcon" class="c-btn c-btn--secondary has-icon">
      <svg class="c-svg c-svg--add-24" aria-hidden="true" focusable="false">
        <use xlink:href="#c-svg--add-24"></use>
      </svg>
      Button
    </button>

  Input:
    <label class="c-btn c-btn--primary has-icon is-input-btn" for="btnSubmitIcon">
      <svg class="c-svg c-svg--add-24" aria-hidden="true" focusable="false">
        <use xlink:href="#c-svg--add-24"></use>
      </svg>
      Submit
      <input id="btnSubmitIcon" type="submit" value="Submit" class="c-btn__input" />
    </label>

 *
 */
.c-btn:not(.c-btn--text):not(.c-btn--text-inverse).has-icon .c-svg, .c-btn:not(.c-btn--text):not(.c-btn--text-inverse).has-icon-left .c-svg {
  top: 0;
  width: var(--aura-c-button-icon-size, 24px);
  height: var(--aura-c-button-icon-size, 24px);
  color: currentColor;
  background-color: transparent;
}
.c-btn:not(.c-btn--text):not(.c-btn--text-inverse).has-icon .c-svg {
  margin-left: var(--aura-c-button-icon-inline-spacing, 12px); /* [2] */
  order: 1;
}
.c-btn:not(.c-btn--text):not(.c-btn--text-inverse).has-icon-left .c-svg {
  margin-right: var(--aura-c-button-icon-inline-spacing, 12px); /* [2] */
  order: 0;
}
.c-btn.c-btn--text:not(.is-back-btn):not(.is-next-btn):not(.has-icon-bubble).has-icon .c-svg, .c-btn.c-btn--text:not(.is-back-btn):not(.is-next-btn):not(.has-icon-bubble).has-icon-left .c-svg, .c-btn.c-btn--text-inverse:not(.is-back-btn):not(.is-next-btn):not(.has-icon-bubble).has-icon .c-svg, .c-btn.c-btn--text-inverse:not(.is-back-btn):not(.is-next-btn):not(.has-icon-bubble).has-icon-left .c-svg {
  top: 0;
  width: var(--aura-c-button-icon-size, 24px);
  height: var(--aura-c-button-icon-size, 24px);
}
.c-btn.c-btn--text:not(.is-back-btn):not(.is-next-btn):not(.has-icon-bubble).has-icon .c-svg, .c-btn.c-btn--text-inverse:not(.is-back-btn):not(.is-next-btn):not(.has-icon-bubble).has-icon .c-svg {
  margin-left: 6px;
}
.c-btn.c-btn--text:not(.is-back-btn):not(.is-next-btn):not(.has-icon-bubble).has-icon-left .c-svg, .c-btn.c-btn--text-inverse:not(.is-back-btn):not(.is-next-btn):not(.has-icon-bubble).has-icon-left .c-svg {
  margin-right: 6px;
}
.c-btn.c-btn--text.is-back-btn .c-svg, .c-btn.c-btn--text.is-next-btn .c-svg, .c-btn.c-btn--text-inverse.is-back-btn .c-svg, .c-btn.c-btn--text-inverse.is-next-btn .c-svg {
  position: absolute;
  top: 50%;
  width: 16px;
  height: 16px;
  color: currentColor;
  transform: translateX(0) translateY(-50%);
  transition: 0.3s transform ease-out;
}
.c-btn.c-btn--text.is-back-btn, .c-btn.c-btn--text-inverse.is-back-btn {
  padding-left: 24px;
}
.c-btn.c-btn--text.is-back-btn .c-svg, .c-btn.c-btn--text-inverse.is-back-btn .c-svg {
  left: 0;
  transform: translateX(0) translateY(-50%);
}
.c-btn.c-btn--text.is-back-btn:hover .c-svg, .c-btn.c-btn--text-inverse.is-back-btn:hover .c-svg {
  transform: translateX(-3px) translateY(-50%);
}
.c-btn.c-btn--text.is-next-btn, .c-btn.c-btn--text-inverse.is-next-btn {
  padding-right: 24px;
}
.c-btn.c-btn--text.is-next-btn .c-svg, .c-btn.c-btn--text-inverse.is-next-btn .c-svg {
  right: 0;
  transform: translateX(0) translateY(-50%);
}
.c-btn.c-btn--text.is-next-btn:hover .c-svg, .c-btn.c-btn--text-inverse.is-next-btn:hover .c-svg {
  transform: translateX(3px) translateY(-50%);
}

/* Size variants
   ========================================================================== */
.c-btn--auto {
  width: auto;
  min-width: unset;
  max-width: unset;
}

.c-btn--md,
.c-btn--sm,
.c-btn--xsm {
  width: auto;
}

.c-btn--md {
  padding-left: var(--aura-c-button-md-padding-inline-start, 20px);
  padding-right: var(--aura-c-button-md-padding-inline-end, 20px);
  font-size: 13px;
  font-size: 0.8125rem;
  line-height: 1;
}
@media (min-width: 48em) {
  .c-btn--md {
    line-height: var(--aura-c-button-md-height, 32px);
  }
}

.c-btn--sm {
  padding-left: var(--aura-c-button-sm-padding-inline-start, 16px);
  padding-right: var(--aura-c-button-sm-padding-inline-end, 16px);
  font-size: 12px;
  font-size: 0.75rem;
  line-height: 1;
}
@media (max-width: 47.99em) {
  .c-btn--sm {
    padding-top: 7px;
    padding-bottom: 7px;
  }
}
@media (min-width: 48em) {
  .c-btn--sm {
    line-height: var(--aura-c-button-sm-height, 26px);
  }
}

.c-btn--xsm {
  padding-left: var(--aura-c-button-xsm-padding-inline-start, 12px);
  padding-right: var(--aura-c-button-xsm-padding-inline-end, 12px);
  font-size: 10px;
  font-size: 0.625rem;
  line-height: 1;
}
@media (max-width: 47.99em) {
  .c-btn--xsm {
    padding-top: 5px;
    padding-bottom: 5px;
  }
}
@media (min-width: 48em) {
  .c-btn--xsm {
    line-height: var(--aura-c-button-xsm-height, 20px);
  }
}

@media (min-width: 48em) {
  .c-btn--min-width {
    min-width: var(--aura-c-button-min-width);
    min-width: var(--aura-c-button-min-width, 186px);
  }
}

@media (min-width: 48em) {
  .c-btn--short {
    width: var(--aura-c-button-short-width, 120px);
  }
}

@media (min-width: 48em) {
  .c-btn--wide {
    width: var(--aura-c-button-wide-width, 240px);
  }
}

.c-btn--full,
.c-btn--full .c-btn__input {
  width: 100%;
  max-width: 100%;
}

.c-btn--tight {
  padding-left: var(--aura-c-button-tight-padding-inline-start, 24px);
  padding-right: var(--aura-c-button-tight-padding-inline-end, 24px);
}

/* ==========================================================================
   #STEPPER NAV
   ========================================================================== */
/** Private framework-only tokens **/
/**
 * Previous/Next style navigation buttons (chevron icon).

    <   TEXT LABEL   >

 * HTML:

    <nav class="c-stepper-nav [ js-stepper-nav ]">
      <span class="c-stepper-nav__label">MONTH</span>

      <a href="#prev" id="js-prevMonth" class="c-stepper-nav__arrow nav--prev [ js-stepper-nav-btn ]" aria-label="Previous">
        <svg class="c-svg c-svg--chevron-left-24" aria-hidden="true" focusable="false"><use xlink:href="#c-svg--chevron-left-24"></use></svg>
      </a>
      <a href="#next" id="js-nextMonth" class="c-stepper-nav__arrow nav--next is-disabled [ js-stepper-nav-btn ]" aria-label="Next">
        <svg class="c-svg c-svg--chevron-right-24" aria-hidden="true" focusable="false"><use xlink:href="#c-svg--chevron-right-24"></use></svg>
      </a>
    </nav>

 *
 */
.c-stepper-nav { /* OLD - iOS 6-, Safari 3.1-6, BB7 */ /* TWEENER - IE 10 */ /* NEW - Safari 6.1+. iOS 7.1+, BB10 */
  display: flex; /* NEW, Spec - Firefox, Chrome, Opera */
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  margin: 0 auto;
  padding: 0;
  width: var(--aura-c-stepper-nav-width, auto);
}
@media (min-width: 48em) {
  .c-stepper-nav {
    animation: aniStayHidden 1s, aniFadeInDown 250ms 1s 1 ease-out;
  }
}

.c-stepper-nav__label {
  font-size: 24px;
  font-size: 1.5rem;
  line-height: 40px;
  font-weight: var(--aura-c-stepper-nav-label-font-weight, 600);
  text-align: center;
  flex-grow: 1;
  order: 2;
}

.c-stepper-nav__arrow {
  width: var(--aura-c-stepper-nav-arrow-icon-size, 32px);
  height: var(--aura-c-stepper-nav-arrow-icon-size, 32px);
  text-align: center;
  border-radius: 3px;
  transition: color 0.2s ease-out, background-color 0.2s ease-out, box-shadow 0.2s ease-out;
}
.c-stepper-nav__arrow .c-svg {
  display: block;
  top: 0;
  width: 100%;
  height: 100%;
  transform: translateX(0);
  transition-duration: 0.3s;
  transition-property: transform, color;
  transition-timing-function: ease-out;
  color: var(--aura-c-stepper-nav-arrow-color, #006db7);
}
.c-stepper-nav__arrow.nav--prev {
  order: 1;
}
.c-stepper-nav__arrow.nav--next {
  order: 3;
}
.c-stepper-nav__arrow:hover {
  text-decoration: none;
}
@media (min-width: 62em) {
  .c-stepper-nav__arrow:hover.nav--prev .c-svg {
    transform: translateX(-20%);
  }
}
@media (min-width: 62em) {
  .c-stepper-nav__arrow:hover.nav--next .c-svg {
    transform: translateX(20%);
  }
}
.c-stepper-nav__arrow:focus, .c-stepper-nav__arrow.is-focus, .c-stepper-nav__arrow:focus-within {
  outline: none;
  box-shadow: var(--aura-c-stepper-nav-shadow, 0 0 1px 3px rgba(0, 109, 183, 0.3));
}
.c-stepper-nav__arrow.is-disabled, .c-stepper-nav__arrow.is-disabled:hover {
  cursor: default;
  text-decoration: none;
  background-color: transparent;
}
.c-stepper-nav__arrow.is-disabled .c-svg, .c-stepper-nav__arrow.is-disabled:hover .c-svg {
  color: var(--aura-c-stepper-nav-arrow-color-disabled, rgba(0, 0, 0, 0.4));
  transition: none;
  transform: translateX(0);
}

/* Variations
========================================================================== */
.c-stepper-nav--month {
  min-width: 222px;
}

/* ==========================================================================
   #DROPDOWN
   ========================================================================== */
/** Private framework-only tokens **/
/**
 * Make a UL look and behave like dropdown/select list.
 *
 * HTML:

    <div class="c-form-field" data-validation="default">
      <label id="customDropdown" class="c-form-field__label">Label</label>
      <div class="c-form-field__input c-form-column">
        <div class="c-dropdown">
          <button class="c-dropdown__target" aria-haspopup="listbox" aria-labelledby="customDropdown" aria-expanded="false">
            <svg class="c-svg c-svg--chevron-down-24" aria-hidden="true" focusable="false">
              <use xlink:href="#c-svg--chevron-down-24"></use>
            </svg>
            <span class="c-dropdown-value">Select</span>
          </button>
          <ul class="c-dropdown__list" role="listbox" id="customDropdownList" tabindex="-1">
            <li class="c-dropdown__item" id="optionOne" role="option">Option one</li>
            <li class="c-dropdown__item" id="optionTwo" role="option">Option two</li>
            <li class="c-dropdown__item" id="optionThree" role="option">Option three</li>
          </ul>
        </div>
      </div>
    </div>

 */
.c-dropdown {
  position: relative;
  margin: 0;
  padding: 0;
}
.c-dropdown.is-focus .c-dropdown__target, .c-dropdown:hover .c-dropdown__target, .c-dropdown:focus .c-dropdown__target, .c-dropdown:active .c-dropdown__target, .c-dropdown:focus-within .c-dropdown__target {
  outline: 0;
  border-color: var(--aura-c-form-input-color-border-focus, #006db7);
  box-shadow: none;
}
.c-dropdown.is-focus .c-dropdown__target .c-svg, .c-dropdown:hover .c-dropdown__target .c-svg, .c-dropdown:focus .c-dropdown__target .c-svg, .c-dropdown:active .c-dropdown__target .c-svg, .c-dropdown:focus-within .c-dropdown__target .c-svg {
  color: var(--aura-c-dropdown-text-link-color-hover, #006db7);
}

.c-dropdown__target {
  position: relative;
  display: inline-block;
  width: 100%;
  height: var(--aura-c-form-input-height, 40px);
  font-size: 18px;
  font-size: 1.125rem;
  line-height: 1.3333333333;
  color: var(--aura-c-dropdown-text-color, #424243);
  text-align: left;
  white-space: nowrap;
  cursor: pointer;
  font-weight: var(--aura-c-dropdown-font-weight, 400);
  line-height: var(--aura-c-dropdown-height, 38px);
  border-style: solid;
  border-width: var(--aura-c-dropdown-border-width, 1px);
  border-color: var(--aura-c-dropdown-color-border, #9b9b9e);
  border-radius: var(--aura-c-dropdown-border-radius, 3px);
  padding-top: var(--aura-c-dropdown-padding-block-start, 0);
  padding-right: var(--aura-c-dropdown-padding-inline-end, 24px);
  padding-bottom: var(--aura-c-dropdown-padding-block-end, 0);
  padding-left: var(--aura-c-dropdown-padding-inline-start, 12px);
  overflow: hidden;
  text-overflow: ellipsis;
  background: none;
  transition: var(--aura-c-dropdown-transition, color 0.2s ease-out, background-color 0.2s ease-out, box-shadow 0.2s ease-out);
  appearance: none;
}
.c-dropdown__target .c-svg {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 4px;
  width: var(--aura-c-form-input-select-arrow-size, 16px);
  height: var(--aura-c-form-input-select-arrow-size, 16px);
  color: inherit;
}
.c-dropdown__target:disabled, .c-dropdown__target[disabled=disabled], .c-dropdown__target.is-disabled {
  cursor: default;
  background-color: var(--aura-c-form-input-color-background-disabled, #e6e6e7);
  opacity: var(--aura-c-form-input-opacity-disabled, 0.3);
}
@media (min-width: 48em) {
  .c-dropdown__target {
    font-size: 21px;
    font-size: 1.3125rem;
    line-height: 1.4285714286;
  }
}

.c-dropdown__list {
  list-style: none;
  margin: 0;
  position: absolute;
  top: 100%;
  left: 0;
  transform: translateY(-6px);
  width: auto;
  min-width: 100%;
  max-width: 140px;
  padding: 6px 0;
  font-weight: var(--aura-c-dropdown-font-weight, 400);
  text-align: left;
  background-color: var(--aura-c-dropdown-color-background, white);
  border-style: solid;
  border-width: var(--aura-c-dropdown-border-width, 1px);
  border-color: var(--aura-c-dropdown-color-border, #9b9b9e);
  border-radius: var(--aura-c-dropdown-border-radius, 3px);
  box-shadow: 0 1px 16px -3px rgba(0, 0, 0, 0.3);
  visibility: hidden;
  opacity: 0;
  transition: all 0.2s ease-in-out;
  overflow: hidden;
  z-index: 1;
}
.c-dropdown:hover .c-dropdown__list {
  opacity: 1;
  visibility: visible;
  will-change: opacity;
  transform: translateY(4px);
}

.c-dropdown__item {
  list-style: none;
  display: block;
  width: 100%;
  height: 100%;
  padding: 6px;
  background-color: transparent;
  transition: background-color 0.2s ease-out, color 0.2s ease-out;
  cursor: pointer;
  color: var(--aura-c-dropdown-text-link-color, #424243);
}
.c-dropdown__item:hover, .c-dropdown__item:active {
  color: var(--aura-c-dropdown-list-text-color-hover, #00497a);
  background-color: var(--aura-c-dropdown-list-color-background-hover, #f6f6f6);
  text-decoration: none;
  will-change: background-color;
}

/* Dropdown types
   ========================================================================== */
.c-dropdown--pill .c-dropdown__target {
  border-width: var(--aura-c-form-input-border-width, 1px);
  border-radius: 15rem;
  padding-left: 12px;
  padding-right: var(--aura-c-form-select-padding-inline-end, form-input-padding-inline-icon);
}
.c-dropdown--pill .c-dropdown__target .c-svg {
  right: 8px;
}

.is-read-only .c-dropdown--status .c-dropdown:hover,
.is-read-only .c-dropdown--status .c-dropdown__target:hover {
  cursor: default;
}
.is-read-only .c-dropdown--status .c-dropdown__target .c-svg {
  display: none;
}
.c-dropdown--status[data-status=Pending] .c-dropdown__target {
  color: var(--aura-c-dropdown-text-link-color-primary, #00497a);
  background-color: var(--aura-c-dropdown-color-background-primary, #c1e6ff) !important;
}
.c-dropdown--status[data-status=Pending].is-focus, .c-dropdown--status[data-status=Pending]:focus, .c-dropdown--status[data-status=Pending]:active {
  border-color: var(--aura-c-dropdown-color-border-primary, #006db7);
}
.c-dropdown--status[data-status=OnHold], .c-dropdown--status[data-status=VendorHold] {
  background-color: var(--aura-c-dropdown-color-background-light, #f2f2f2) !important;
}
.c-dropdown--status[data-status=OnHold],
.c-dropdown--status[data-status=OnHold] .c-dropdown__target, .c-dropdown--status[data-status=VendorHold],
.c-dropdown--status[data-status=VendorHold] .c-dropdown__target {
  color: var(--aura-c-dropdown-text-link-color-light, #787878);
}
.c-dropdown--status[data-status=OnHold], .c-dropdown--status[data-status=OnHold].is-focus, .c-dropdown--status[data-status=OnHold]:focus, .c-dropdown--status[data-status=OnHold]:active, .c-dropdown--status[data-status=VendorHold], .c-dropdown--status[data-status=VendorHold].is-focus, .c-dropdown--status[data-status=VendorHold]:focus, .c-dropdown--status[data-status=VendorHold]:active {
  border-color: var(--aura-c-dropdown-color-border-light, #b7b7b8);
}
.c-dropdown--status[data-status=Sent], .c-dropdown--status[data-status=Late], .c-dropdown--status[data-status=SentTo3Pl], .c-dropdown--status[data-status=Confirmed] {
  background-color: var(--aura-c-dropdown-color-background-warning, #f4c8b6) !important;
}
.c-dropdown--status[data-status=Sent],
.c-dropdown--status[data-status=Sent] .c-dropdown__target, .c-dropdown--status[data-status=Late],
.c-dropdown--status[data-status=Late] .c-dropdown__target, .c-dropdown--status[data-status=SentTo3Pl],
.c-dropdown--status[data-status=SentTo3Pl] .c-dropdown__target, .c-dropdown--status[data-status=Confirmed],
.c-dropdown--status[data-status=Confirmed] .c-dropdown__target {
  color: var(--aura-c-dropdown-text-link-color-warning, #d74209);
}
.c-dropdown--status[data-status=Sent], .c-dropdown--status[data-status=Sent].is-focus, .c-dropdown--status[data-status=Sent]:focus, .c-dropdown--status[data-status=Sent]:active, .c-dropdown--status[data-status=Late], .c-dropdown--status[data-status=Late].is-focus, .c-dropdown--status[data-status=Late]:focus, .c-dropdown--status[data-status=Late]:active, .c-dropdown--status[data-status=SentTo3Pl], .c-dropdown--status[data-status=SentTo3Pl].is-focus, .c-dropdown--status[data-status=SentTo3Pl]:focus, .c-dropdown--status[data-status=SentTo3Pl]:active, .c-dropdown--status[data-status=Confirmed], .c-dropdown--status[data-status=Confirmed].is-focus, .c-dropdown--status[data-status=Confirmed]:focus, .c-dropdown--status[data-status=Confirmed]:active {
  border-color: var(--aura-c-dropdown-color-border-warning, #f4c8b6);
}
.c-dropdown--status[data-status=Shipped], .c-dropdown--status[data-status=Delivered], .c-dropdown--status[data-status=AutoShipped], .c-dropdown--status[data-status="Ready for pickup"] {
  background-color: var(--aura-dropdown-color-background-success, #d3e9cc) !important;
}
.c-dropdown--status[data-status=Shipped],
.c-dropdown--status[data-status=Shipped] .c-dropdown__target, .c-dropdown--status[data-status=Delivered],
.c-dropdown--status[data-status=Delivered] .c-dropdown__target, .c-dropdown--status[data-status=AutoShipped],
.c-dropdown--status[data-status=AutoShipped] .c-dropdown__target, .c-dropdown--status[data-status="Ready for pickup"],
.c-dropdown--status[data-status="Ready for pickup"] .c-dropdown__target {
  color: var(--aura-c-dropdown-text-link-color-success, #287e26);
}
.c-dropdown--status[data-status=Shipped], .c-dropdown--status[data-status=Shipped].is-focus, .c-dropdown--status[data-status=Shipped]:focus, .c-dropdown--status[data-status=Shipped]:active, .c-dropdown--status[data-status=Delivered], .c-dropdown--status[data-status=Delivered].is-focus, .c-dropdown--status[data-status=Delivered]:focus, .c-dropdown--status[data-status=Delivered]:active, .c-dropdown--status[data-status=AutoShipped], .c-dropdown--status[data-status=AutoShipped].is-focus, .c-dropdown--status[data-status=AutoShipped]:focus, .c-dropdown--status[data-status=AutoShipped]:active, .c-dropdown--status[data-status="Ready for pickup"], .c-dropdown--status[data-status="Ready for pickup"].is-focus, .c-dropdown--status[data-status="Ready for pickup"]:focus, .c-dropdown--status[data-status="Ready for pickup"]:active {
  border-color: var(--aura-dropdown-color-border-success, #d3e9cc);
}
.c-dropdown--status[data-status=Closed], .c-dropdown--status[data-status=Cancelled], .c-dropdown--status[data-status=AutoCancelled] {
  background-color: var(--aura-dropdown-color-background-danger, color-background-danger-light) !important;
}
.c-dropdown--status[data-status=Closed],
.c-dropdown--status[data-status=Closed] .c-dropdown__target, .c-dropdown--status[data-status=Cancelled],
.c-dropdown--status[data-status=Cancelled] .c-dropdown__target, .c-dropdown--status[data-status=AutoCancelled],
.c-dropdown--status[data-status=AutoCancelled] .c-dropdown__target {
  color: var(--aura-c-dropdown-text-link-color-danger, #d81124);
}
.c-dropdown--status[data-status=Closed], .c-dropdown--status[data-status=Closed].is-focus, .c-dropdown--status[data-status=Closed]:focus, .c-dropdown--status[data-status=Closed]:active, .c-dropdown--status[data-status=Cancelled], .c-dropdown--status[data-status=Cancelled].is-focus, .c-dropdown--status[data-status=Cancelled]:focus, .c-dropdown--status[data-status=Cancelled]:active, .c-dropdown--status[data-status=AutoCancelled], .c-dropdown--status[data-status=AutoCancelled].is-focus, .c-dropdown--status[data-status=AutoCancelled]:focus, .c-dropdown--status[data-status=AutoCancelled]:active {
  border-color: var(--aura-dropdown-color-border-danger, color-background-danger-light);
}

/* ==========================================================================
   #EXPANDER
   ========================================================================== */
/** Private framework-only tokens **/
/**
 * Expander
 * @selector .c-expander
 * @restrict div, article
 *
 * Custon expander -- toggling a section of UI open and closed
 * Requires `res-expander.min.js` for toggling and accessibility function.
 *
 * HTML

    <div class="c-expander" data-state="is-hidden">
      <button class="c-expander__label" aria-expanded="false" aria-controls="unique_id" role="button">
        <svg class="c-svg c-svg--chevron-right-24" aria-hidden="true" focusable="false"><use xlink:href="#c-svg--chevron-right-24"></use></svg>
        Click on me to expand or collapse the content
      </button>
      <div id="unique_id" class="c-expander__panel">
        <div class="c-expander__body">
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
        </div>
      </div>
    </div>
 *
 */
/**
 *
 * 1. Make the expander default to 100% width of it's parent container.
 * 2. A little buffer between the expander and other content on the page.
 * 3. Hide the contents of the `c-expander__panel` when it's collapsed.
 * 4. Position the `c-expander__panel` up slightly so we can create a little
 *    slide down effect when it's toggled open.
 * 5. When the panel is `active`, change the color of the expander label text
 *    and rotate the arrow icon.
 * 6. The height of the expander content in calculated by the aura-expander.js 
 *    plugin and the default value of `--aura-c-expander-open-height` is  
 *    dynamically overwritten with the new height value.
 * 7. Make the expander panel content visible.
 */
.c-expander {
  position: relative;
  display: block;
  width: 100%; /* [1] */
  /* Toggle/animation states */
  /* [3] */
}
.c-expander[data-state=is-hidden] > .c-expander__panel {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  visibility: hidden;
}
.c-expander[data-state=is-animating] > .c-expander__panel {
  opacity: 0;
  visibility: visible;
}
.c-expander open > .c-expander__label, .c-expander.is-open > .c-expander__label, .c-expander.is-expanded > .c-expander__label, .c-expander[data-state=is-expanded] > .c-expander__label {
  color: var(--aura-c-expander-label-color-text-active, #006db7); /* [5] */
}
.c-expander open > .c-expander__label .c-svg, .c-expander.is-open > .c-expander__label .c-svg, .c-expander.is-expanded > .c-expander__label .c-svg, .c-expander[data-state=is-expanded] > .c-expander__label .c-svg {
  transform: rotate(90deg) translateX(-50%);
  color: inherit;
}
.c-expander open > .c-expander__panel, .c-expander.is-open > .c-expander__panel, .c-expander.is-expanded > .c-expander__panel, .c-expander[data-state=is-expanded] > .c-expander__panel {
  --aura-c-expander-open-height: 400px; /* [6] */
  margin-top: 0;
  max-height: var(--aura-c-expander-open-height);
  visibility: visible; /* [7] */
  opacity: 1; /* [7] */
  will-change: opacity;
}

/* The label which toggles the panel.
 *
 * 1. Add some left paddingto make room for the arrow icon.
 * 2. Align the icon and text vertically.
 * 3. Force the label elements to appear clickable.
 * 4. By default the arrow icon is positioned on the left and pointing right. `>`
 */
.c-expander__label {
  position: relative;
  display: inline-block;
  margin-bottom: 0;
  padding: var(--aura-c-expander-label-padding-block, 12px) 0;
  padding-left: var(--aura-c-expander-label-padding-inline-start, 24px); /* [1] */
  color: var(--aura-c-expander-label-color-text, #424243);
  font-weight: var(--aura-c-expander-label-font-weight, 500);
  text-align: left;
  vertical-align: middle; /* [2] */
  cursor: pointer; /* [3] */
  border: 0;
  background: none;
  appearance: none;
  /* [4] */
}
.c-expander__label .c-svg {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 0;
  width: var(--aura-c-expander-arrow-sizing, 16px);
  height: var(--aura-c-expander-arrow-sizing, 16px);
  color: inherit;
  text-align: center;
  transition: transform 250ms ease-out;
  transform-origin: 50% 50%;
}

/* The content we want to reveal.
 * 1. Hide everything.
 * 2. Set up our transitions.
 * 3. Undo it all @tablet size and above if it's navigation.
 */
.c-expander__panel {
  position: relative;
  margin-top: -12px;
  margin-bottom: 12px;
  max-height: 0; /* [1] */
  overflow: hidden; /* [1] */
  opacity: 0; /* [1] */
  transition: max-height 500ms ease-out, margin-top 500ms ease-out, opacity 500ms ease-out 250ms; /* [2] */
}

.c-expander__body {
  padding-top: var(--aura-c-expander-padding-block-start, 12px);
  padding-right: var(--aura-c-expander-padding-inline-end, 0);
  padding-bottom: var(--aura-c-expander-padding-block-end, 12px);
  padding-left: var(--aura-c-expander-padding-inline-start, 24px); /* [1] */
}

/* Navigation that turns into an expander at mobile screen sizes.
   ========================================================================== */
/**
 * 1. Reset some defaults.
 * 2. Force the navigation container to be full screen width @mobile sizes
 *    since it's probably inside an `o-wrapper` object. Useful only if your
 *    navigation container has a background color.
 * 3. Add some padding so the content isn't butted against the edge of the screen.
 * 4. Let the navigation be the full width of it's parent container @tablet size
 *    and above.
 * 5. In navigation mode, the label's default arrow icon position is to point down
 *    when collapsed, and to rotate 180° to point up when expanded.
 */
.c-expander--navigation {
  width: auto; /* [1] */
  margin-top: 0; /* [1] */
  margin-bottom: 48px; /* [1] */
  margin-left: -24px; /* [2] */
  margin-right: -24px; /* [2] */
  padding: 0 24px; /* [3] */
  background-color: var(--aura-c-expander-nav-color-background-mobile, #e6e6e7);
}
@media (min-width: 48em) {
  .c-expander--navigation {
    width: 100%; /* [4] */
    margin: 0;
    margin-top: 0;
    padding: 0;
    background-color: transparent;
  }
}
.c-expander--navigation > .c-expander__label {
  display: block; /* [1] */
  margin-bottom: 0;
  font-size: 16px;
  font-size: 1rem;
  line-height: 1.5;
  font-weight: var(--aura-c-expander-nav-label-font-weight, 700);
  color: var(--aura-c-expander-nav-label-text-color, #424243);
  text-align: center; /* [1] */
  /* [5] */
}
@media (min-width: 48em) {
  .c-expander--navigation > .c-expander__label {
    display: none;
  }
}
.c-expander--navigation > .c-expander__label .c-svg {
  left: auto;
  right: 4px;
}
@media (min-width: 48em) {
  .c-expander--navigation > .c-expander__label .c-svg {
    display: none;
  }
}
.c-expander--navigation > .c-expander__label[data-state=is-expanded] > .c-expander__label .c-svg {
  transform: rotate(180deg) translateY(50%);
  /* [5] */
}
@media (min-width: 48em) {
  .c-expander--navigation[data-state=is-expanded] > .c-expander__label {
    color: var(--aura-c-expander-label-color-text, #424243);
    cursor: default;
  }
}
.c-expander--navigation > .c-expander__panel {
  top: 0;
  margin-left: -24px;
  margin-right: -24px;
  margin-bottom: 0;
  padding-top: 0;
  padding-bottom: 12px;
}
@media (min-width: 48em) {
  .c-expander--navigation > .c-expander__panel {
    top: 0;
    margin: 0;
    padding: 0;
  }
}

/* Accordion 
   ========================================================================== */
/**
 * Make it work like an accordion, one open / others closed.
 *
 * HTML

    <div class="c-expander c-expander--group" data-state="is-hidden" data-group="my-group-name">
      <button class="c-expander__label" aria-expanded="false" aria-controls="unique_id3" role="button"><svg class="c-svg c-svg--chevron-down-24" aria-hidden="true" focusable="false"><use xlink:href="#c-svg--chevron-down-24"></use></svg> Click on me to expand or collapse the content</button>
      <div id="unique_id3" class="c-expander__panel">
        <div class="c-expander__body">
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
        </div>
      </div>
    </div>
    <div class="c-expander c-expander--group" data-state="is-hidden" data-group="my-group-name">
      <button class="c-expander__label" aria-expanded="false" aria-controls="unique_id4" role="button"><svg class="c-svg c-svg--chevron-down-24" aria-hidden="true" focusable="false"><use xlink:href="#c-svg--chevron-down-24"></use></svg> Click on me to expand or collapse the content</button>
      <div id="unique_id4" class="c-expander__panel">
        <div class="c-expander__body">
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
        </div>
      </div>
    </div>
    <div class="c-expander c-expander--group" data-state="is-hidden" data-group="my-group-name">
      <button class="c-expander__label" aria-expanded="false" aria-controls="unique_id5" role="button"><svg class="c-svg c-svg--chevron-down-24" aria-hidden="true" focusable="false"><use xlink:href="#c-svg--chevron-down-24"></use></svg> Click on me to expand or collapse the content</button>
      <div id="unique_id5" class="c-expander__panel">
        <div class="c-expander__body">
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
        </div>
      </div>
    </div>
 *
 */
/**
 * 1. Put a border between each item in the group.
 * 2. Add a top border to the first item.
 * 3. In accordion mode, the label's default arrow icon position is to point down
 *    when collapsed, and to rotate 180° to point up when expanded.
 */
.c-accordion {
  position: relative;
  margin: 0;
  padding: 0;
  list-style: none;
}

.c-accordion__item {
  margin: 0;
  padding: 0 12px;
  list-style: none;
  border-top-style: solid; /* [1] */
  border-top-width: var(--aura-c-accordion-border-sizing, 1px);
  border-top-color: var(--aura-c-accordion-color-border, #e6e6e7);
}
.c-accordion__item:first-of-type {
  border-top: 0;
}
.c-accordion__item .c-expander__label {
  width: 100%;
}

/* Expander icon position variant
   ========================================================================== */
.c-expander--icon-right:not(.c-expander--navigation) > .c-expander__label {
  padding-left: 0; /* [1] */
}
.c-expander--icon-right > .c-expander__label {
  padding-right: 36px; /* [2] */
}
.c-expander--icon-right > .c-expander__label .c-svg {
  left: auto; /* [1] */
  right: 4px; /* [2] */
}
.c-expander--icon-right .c-expander__body {
  padding-left: 0px; /* [1] */
}
@media (max-width: 47.99em) {
  .c-expander--icon-right.c-expander--navigation > .c-expander__label {
    width: 100%;
    text-align: center;
    padding-left: 36px;
  }
}

.c-expander--icon-down[data-state=is-expanded] > .c-expander__label .c-svg {
  transform: rotate(-180deg) translateY(50%);
}

.c-expander--no-icon > .c-expander__label,
.c-expander--no-icon > .c-expander__panel .c-expander__body {
  padding-left: 0;
  padding-right: 0;
}
.c-expander--no-icon[data-state=is-hidden] .c-expander__label, .c-expander--no-icon[data-state=is-expanded] .c-expander__label {
  color: var(--aura-c-expander-label-color-text, #424243);
}

.is-nested-nav {
  margin-top: 0;
  margin-bottom: 0;
  padding-bottom: 24px;
}
.is-nested-nav > .c-expander__label {
  display: block;
  padding-top: 0;
  padding-bottom: 0;
}
.is-nested-nav > .c-expander__panel {
  margin-bottom: 0;
}
.is-nested-nav > .c-expander__panel .c-expander__body {
  padding: 0;
}
.site-nav--stacked .is-nested-nav .site-nav__list {
  margin-bottom: 0;
}

/* ==========================================================================
   #FOOTER
   ========================================================================== */
/** Private framework-only tokens **/
/**
 * 1. By default, the text is centered (mobile first).
 * 2. Reset some defaults for text elements we might use in the footer
 * 3. Line up the footer text with the ResMed logo in this particular layout.
 */
.page-footer {
  padding-top: var(--aura-c-footer-padding-block-start, 24px);
  padding-right: var(--aura-c-footer-padding-inline-end, 0);
  padding-bottom: var(--aura-c-footer-padding-block-end, 24px);
  padding-left: var(--aura-c-footer-padding-inline-start, 0);
  background-color: var(--aura-c-footer-color-background, #424243);
  text-align: center; /* [1] */
  /* stylelint-disable selector-list-comma-newline-after */
  /* stylelint-enable selector-list-comma-newline-after */
}
.page-footer p {
  margin-bottom: 0; /* [2] */
}
.page-footer p, .page-footer ul, .page-footer li {
  color: var(--aura-c-footer-text-color, white); /* [2] */
}
.page-footer p, .page-footer a, .page-footer ul, .page-footer li {
  font-size: 14px;
  font-size: 0.875rem;
  line-height: 1.7142857143;
  /* [2] */
  font-weight: var(--aura-c-footer-font-weight, 500);
}
.page-footer a, .page-footer a:link, .page-footer a:visited, .page-footer a:hover, .page-footer a:active, .page-footer a:focus {
  color: var(--aura-c-footer-link-text-color, white); /* [2] */
}
.page-footer a:hover {
  text-decoration: none; /* [2] */
}
@media (min-width: 48em) {
  .page-footer {
    text-align: left;
  }
  .page-footer .o-layout__item {
    vertical-align: bottom; /* [3] */
    margin-bottom: 0; /* [3] */
    line-height: 1; /* [3] */
  }
}

.page-footer__copyright {
  padding-bottom: 24px;
  text-align: center;
}
@media (min-width: 48em) {
  .page-footer__copyright {
    padding-top: 0;
    padding-bottom: 0;
    text-align: right;
  }
}
@media (max-width: 47.99em) {
  .page-footer__copyright p span {
    display: block;
  }
}

/* Footer link list
   ========================================================================== */
.page-footer__links {
  padding-top: var(--aura-c-footer-links-padding-block-start-mobile, 24px);
  padding-bottom: var(--aura-c-footer-links-padding-block-end-mobile, 24px);
  text-align: center;
}
@media (min-width: 62em) {
  .page-footer__links {
    padding-top: var(--aura-c-footer-links-padding-block-start, 0);
    padding-bottom: var(--aura-c-footer-links-padding-block-end, 0);
    text-align: left;
  }
}
@media (min-width: 48em) {
  .page-footer__links.page-footer__links-item:first-child {
    margin-left: 0;
  }
}

.page-footer__links-item {
  display: inline-block;
  margin-left: var(--aura-c-footer-links-spacing-inline-start-mobile, 6px);
  margin-right: var(--aura-c-footer-links-spacing-inline-end-mobile, 6px);
}
@media (min-width: 48em) {
  .page-footer__links-item {
    margin-left: var(--aura-c-footer-links-spacing-inline-start-tablet, 12px);
    margin-right: var(--aura-c-footer-links-spacing-inline-end-tablet, 12px);
  }
}
@media (min-width: 62em) {
  .page-footer__links-item {
    margin-left: var(--aura-c-footer-links-spacing-inline-start, 0);
    margin-right: var(--aura-c-footer-links-spacing-inline-end, 24px);
    margin-bottom: 0;
  }
}

/* Variant
   ========================================================================== */
/**
 * 1. Override the max-width on the `.o-wrapper` element so the footer will span
 *    the width of the viewport while keeping the outer gutters.
 * 2. Keep the ouside gutters in case it is being removed on the `.o-wrapper` 
 *    element at x-wide breakpoint.
 */
.page-footer--full .o-wrapper {
  width: 100% !important;
  max-width: 100% !important; /* [1] */
  padding-right: var(--aura-c-footer-full-padding-inline-end, 24px); /* [2] */
  padding-left: var(--aura-c-footer-full-padding-inline-start, 24px); /* [2] */
}

.page-footer--border-top {
  border-top-style: solid;
  border-top-width: var(--aura-c-page-footer-border-width, 1px);
  border-top-color: var(--aura-c-page-footer-border-color, #e6e6e7);
}

/* ==========================================================================
   #FORMS
   ========================================================================== */
/** Private framework-only tokens **/
/**
 * Define custom styles for our form inputs.
 *
 * Related files:
 * `elements/elements.forms.scss`
 */
.c-form-section {
  border-bottom-style: solid;
  border-bottom-width: var(--aura-c-form-section-sizing-border-bottom, 1px);
  border-bottom-color: var(--aura-c-form-section-color-border-bottom, #e6e6e7);
  margin-bottom: var(--aura-c-form-section-margin-block-end, 24px);
}
.c-form-section::after {
  content: "";
  display: table;
  clear: both;
}

.c-form-column {
  width: 100%;
  /**
   * Form layout columns
   *
   * 24px of the width account's for `o-layout` gutter width.
   * Base unit is 88px, each size up adds 88px.
   * This way we have a measured length that allows the form inputs to
   * line-up vertically where possible or wanted.
   */
}
@media (min-width: 48em) {
  .c-form-column {
    width: 33.33333%;
  }
}
@media (min-width: 62em) {
  .c-form-column {
    width: 352px;
  }
}
@media (min-width: 62em) {
  .c-form-column--micro {
    width: 88px;
  }
}
@media (min-width: 62em) {
  .c-form-column--tiny {
    width: 176px;
  }
}
@media (min-width: 62em) {
  .c-form-column--small {
    width: 264px;
  }
}
@media (min-width: 62em) {
  .c-form-column--large {
    width: 440px;
  }
}
@media (min-width: 62em) {
  .c-form-column--huge {
    width: 528px;
  }
}
@media (min-width: 62em) {
  .c-form-column--gigantic {
    width: 904px;
  }
}

/**
 * Wrapper for a form component. A form component is comprised at minimum of a
 * label and an input field. Other elements include hint text, error messages,
 * links or buttons.
 *
 * HTML

    <div class="c-form-field">
      <div class="c-form-field__label">Label</div>
      <div class="c-form-field__input">
        <input type="text" value="" class="c-input" />
      </div>
    </div>

 *
 */
.c-form-field {
  position: relative;
  box-sizing: border-box;
  vertical-align: top;
  margin-bottom: var(--aura-c-form-margin-block-end, 24px);
}
@media (min-width: 48em) {
  .c-form-field {
    display: inline-block;
    width: 100%;
  }
}
.c-form-field.has-left-label {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-bottom: 0;
}
.c-form-field.has-left-label > .c-form-field__label {
  margin-bottom: 0;
  margin-right: var(--aura-c-form-left-aligned-label-spacing-inline-end, 6px);
  text-align: var(--aura-c-form-left-aligned-label-text-align, right);
}
.c-form-field.has-left-label > .c-form-field__input {
  flex: 1;
}

/**
 * Form field labels.
 *
 * 1. We don't want the label to be a block element but we want to add spacing
 *    between the label and the input.
 * 2. Force a line-break after the label.
 * 3. That time when you have a form field with no label, but need it to line up
 *    horizontally with other form fields in a row. Include an empty `.c-form-field__label`
 *    with a `&nbsp;` in it and add this class to the `.c-form-field` container.
 *
 * HTML

    <div class="c-form-field c-form--nolabel">
      <div class="c-form-field__label">&nbsp;</div>
      <div class="c-form-field__input"><input type="text" value="" class="c-input" /></div>
    </div>

 *
 */
.c-form-field__label {
  position: relative;
  display: block;
  color: var(--aura-c-form-label-text-color, #424243);
  font-size: 16px;
  font-size: 1rem;
  line-height: 1.25;
  font-weight: var(--aura-c-form-label-font-weight, 500);
  margin-bottom: var(--aura-c-form-label-margin-block-end, 6px);
  /* [3] */
}
.c-form--nolabel .c-form-field__label {
  display: block;
}
.c-form-field__label .is-required {
  color: var(--aura-c-form-required-text-color, #d81124);
}
.c-form-field__label .is-optional {
  font-size: 14px;
  font-size: 0.875rem;
  line-height: inherit;
  color: var(--aura-c-form-hint-text-color, rgba(0, 0, 0, 0.85));
}
.c-form-field__label.text-sm {
  font-size: 14px;
  font-size: 0.875rem;
  line-height: inherit;
}
@media (min-width: 48em) {
  .c-form-field__label {
    display: inline-block; /* [1] */
  }
  .c-form-field__label::after { /* [2] */
    content: "\a";
    white-space: pre;
  }
}

.c-form-field__hint {
  display: block;
  margin: 0;
  padding-top: var(--aura-c-form-hint-spacing-block-start, 6px);
  font-size: 14px;
  font-size: 0.875rem;
  line-height: 1.25;
  color: var(--aura-c-form-hint-text-color, rgba(0, 0, 0, 0.85));
  font-weight: var(--aura-c-form-hint-font-weight, 400);
}

.c-form-field__error {
  position: relative;
  padding: 0;
  padding-top: 6px;
  font-size: 14px;
  font-size: 0.875rem;
  line-height: 1.125;
  color: var(--aura-c-form-error-text-color, #d81124);
  font-weight: var(--aura-c-form-error-font-weight, 500);
  /*
    Use absolute positioning to display the inline error message below the form input
    without it affecting the vertical spacing. Make sure there is room below the form input
    for the error message to be displayed properly.
  */
  /*
    Depending on the dev platform, we may need to hide the error message element via CSS.
    Use this data attribute to hide the error message element and toggle visibility using
    JS or backend logic [ true | false ].
  */
}
.c-form-field__error a, .c-form-field__error a:link, .c-form-field__error a:visited, .c-form-field__error a:hover, .c-form-field__error a:active, .c-form-field__error a:focus {
  color: var(--aura-c-form-error-text-color, #d81124) !important;
  text-decoration: underline !important;
}
.c-form-field__error.is-pos-bottom {
  position: absolute;
  top: 100%;
  left: 0;
}
.c-form-field__error[data-hidden=true] {
  display: none;
}
.c-form-field__error[data-hidden=false] {
  display: block;
}

.c-form-field__read-only {
  font-weight: var(--aura-c-form-readonly-font-weight, 700);
}

.c-form-field__icon {
  display: inline-block;
  position: relative;
  padding-left: 0.25rem;
  vertical-align: top;
  line-height: 1;
  z-index: 1;
}

/* Form input components
   ========================================================================== */
.c-form-field__input {
  position: relative;
  margin: 0;
}
ul.c-form-field__input {
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (max-width: 47.99em) {
  ul.c-form-field__input.o-list-inline {
    margin-left: -24px; /* [3] */
  }
}
ul.c-form-field__input.o-list-inline > li {
  margin-bottom: 24px;
}
@media (max-width: 47.99em) {
  ul.c-form-field__input.o-list-inline > li {
    display: inline-block;
    text-align: left;
    padding-left: 24px;
  }
}

/**
 * 1. Adding a height because some browsers, looking at you IE, don't add up
 *    the line-height and padding properly, so inputs can vary slightly in height.
 * 2. Remove any default browser stuff.
 */
.c-input {
  display: inline-block;
  width: 100%;
  height: var(--aura-c-form-input-height, 40px); /* [1] */
  padding-top: var(--aura-c-form-input-padding-block-start, 0);
  padding-right: var(--aura-c-form-input-padding-inline-end, 12px);
  padding-bottom: var(--aura-c-form-input-padding-block-end, 0);
  padding-left: var(--aura-c-form-input-padding-inline-start, 12px);
  font-size: 18px;
  font-size: 1.125rem;
  line-height: 1.3333333333;
  color: var(--aura-c-form-input-text-color, #424243);
  background: var(--aura-c-form-input-color-background, transparent);
  background-color: var(--aura-c-form-input-color-background, transparent);
  border-style: solid;
  border-width: var(--aura-c-form-input-border-width, 1px);
  border-color: var(--aura-c-form-input-color-border, #9b9b9e);
  border-radius: var(--aura-c-form-input-radius-border, 3px);
  box-shadow: none;
  appearance: none;
  /* [2] */
  transition: border-color 0.2s ease-out, color 0.2s ease-out;
}
.c-input.is-focus, .c-input:focus, .c-input:active {
  outline: none;
  box-shadow: none;
  border-color: var(--aura-c-form-input-color-border-focus, #006db7);
}
.c-input:disabled, .c-input[disabled=disabled], .c-input.is-disabled {
  cursor: default;
  background-color: var(--aura-c-form-input-color-background-disabled, #e6e6e7);
  opacity: var(--aura-c-form-input-opacity-disabled, 0.3);
}
@media (min-width: 48em) {
  .c-input {
    font-size: 21px;
    font-size: 1.3125rem;
    line-height: 1.4285714286;
  }
}

/* Input type modifiers
   ========================================================================== */
.c-input--text {
  --aura-c-form-input-color-background: white;
  background: var(--aura-c-form-input-color-background, white);
  background-color: var(--aura-c-form-input-color-background, white);
}

input[type=file].c-input--file {
  padding: 4px 12px 4px 4px;
}
input[type=file].c-input--file:hover, input[type=file].c-input--file:active {
  cursor: pointer;
}
input[type=file].c-input--file::-ms-browse {
  margin-right: 4px;
  padding: 0 24px;
  color: white;
  background-color: #424243;
  border-radius: 3px;
  border: 0;
  line-height: 30px;
  -ms-transition: background-color 0.2s ease-out;
  transition: background-color 0.2s ease-out;
}
input[type=file].c-input--file::-ms-browse:hover {
  background-color: #6d6d6d;
  cursor: pointer;
}
input[type=file].c-input--file::-ms-browse:active {
  background-color: #212121;
  cursor: pointer;
}
input[type=file].c-input--file::file-selector-button {
  margin-right: 4px;
  padding: 0 24px;
  color: white;
  background-color: #424243;
  border-radius: 3px;
  border: 0;
  line-height: 30px;
  transition: background-color 0.2s ease-out;
}
input[type=file].c-input--file::file-selector-button:hover {
  background-color: #6d6d6d;
  cursor: pointer;
}
input[type=file].c-input--file::file-selector-button:active {
  background-color: #212121;
  cursor: pointer;
}

.c-input--number {
  max-width: var(--aura-c-form-input-number-max-width, 120px);
}

.c-input--textarea {
  width: 100%;
  min-height: var(--aura-c-form-input-textarea-min-height, 120px);
  padding: var(--aura-c-form-input-textarea-padding, 6px);
  background-color: var(--aura-c-form-input-textarea-color-background, white) !important;
  border-width: var(--aura-c-form-textarea-border-width, 1px);
}
@media (min-width: 48em) {
  .c-input--textarea:not(.is-full-width) {
    max-width: var(--aura-c-form-input-textarea-width-tablet, 600px);
  }
}

.c-input--full-width {
  width: 100% !important;
  max-width: 100% !important;
}

/**
 * We need to wrap select boxes so we can style them properly across browsers.
 * The select input needs to be inside a container with the `.c-input` class and
 * this modifier.
 *
 * HTML

    <div class="c-input c-input--select">
      <select>
        <option selected>Please select</option>
        <option>Option 1</option>
      </select>
    </div>

 *
 * 1. Override the padding of the `.c-input` class since we're using it as a wrapper.
 *    Padding gets applied to select element instead.
 * 2. Make our custom drop-down arrow pseudo-element.
 * 3. Font-family and icon for the select input arrow.
 */
.c-input--select,
.c-input--combobox {
  --aura-select-box-arrow-icon-hover: url("data:image/svg+xml, %3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='%23006DB7' d='M21.192 7.050c0.39 0.39 0.39 1.024 0 1.414l-8.485 8.485c-0.39 0.39-1.024 0.39-1.414 0l-8.485-8.485c-0.39-0.39-0.39-1.024 0-1.414s1.024-0.39 1.414 0l7.778 7.778 7.778-7.778c0.39-0.39 1.024-0.39 1.414 0z'/%3E%3C/svg%3E");
  position: relative;
  padding: 0 !important; /* [1] */
  overflow: hidden;
  vertical-align: bottom;
}
.c-input--select::before,
.c-input--combobox::before { /* [2] */
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 4px;
  width: var(--aura-c-form-input-select-arrow-size, 16px);
  height: var(--aura-c-form-input-select-arrow-size, 16px);
  transition: background-color 0.2s ease-out;
  z-index: 0;
}
.c-input--select:hover, .c-input--select:focus, .c-input--select:active, .c-input--select:focus-within,
.c-input--combobox:hover,
.c-input--combobox:focus,
.c-input--combobox:active,
.c-input--combobox:focus-within {
  cursor: pointer;
  background-color: var(--aura-c-form-input-color-background, transparent);
  border-color: var(--aura-c-form-input-color-border-focus, #006db7);
}
.c-input--select:hover::before, .c-input--select:focus::before, .c-input--select:active::before, .c-input--select:focus-within::before,
.c-input--combobox:hover::before,
.c-input--combobox:focus::before,
.c-input--combobox:active::before,
.c-input--combobox:focus-within::before {
  content: "";
  background-image: var(--aura-select-box-arrow-icon-hover);
  background-repeat: no-repeat;
  background-size: cover;
}

.c-input--combobox {
  --aura-combo-box-arrow-icon: url("data:image/svg+xml, %3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='%23FFFFFF' d='M21.192 7.050c0.39 0.39 0.39 1.024 0 1.414l-8.485 8.485c-0.39 0.39-1.024 0.39-1.414 0l-8.485-8.485c-0.39-0.39-0.39-1.024 0-1.414s1.024-0.39 1.414 0l7.778 7.778 7.778-7.778c0.39-0.39 1.024-0.39 1.414 0z'/%3E%3C/svg%3E");
  position: relative;
}
.c-input--combobox::before {
  content: "";
  background-image: var(--aura-combo-box-arrow-icon);
  background-repeat: no-repeat;
  background-size: cover;
}
.c-input--combobox input {
  position: relative;
  display: block;
  width: 100%;
  height: var(--aura-c-select-height, 38px);
  padding-top: var(--aura-c-form-select-padding-block-start, 0);
  padding-right: var(--aura-c-form-select-padding-inline-end, 24px);
  padding-bottom: var(--aura-c-form-select-padding-block-end, 0);
  padding-left: var(--aura-c-form-select-padding-inline-start, 12px);
  color: var(--aura-c-form-input-text-color, #424243);
  background-image: none; /* [1] */
  background-color: transparent; /* [1] */
  border: 0; /* [1] */
  border-color: transparent; /* [1] */
  appearance: none;
  /* [1] */
  -webkit-text-size-adjust: none; /* [1] */
  cursor: pointer; /* [1] */
  font-size: 18px;
  font-size: 1.125rem;
  line-height: 1.3333333333;
  z-index: 1;
}
.c-input--combobox input:focus, .c-input--combobox input:active {
  outline: none;
  box-shadow: none;
}
.c-input--combobox input::-webkit-calendar-picker-indicator {
  display: none !important;
}
@media (min-width: 48em) {
  .c-input--combobox input {
    font-size: 21px;
    font-size: 1.3125rem;
    line-height: 1.4285714286;
  }
}

.c-input--select {
  --aura-select-box-arrow-icon: url("data:image/svg+xml, %3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='%23424243' d='M21.192 7.050c0.39 0.39 0.39 1.024 0 1.414l-8.485 8.485c-0.39 0.39-1.024 0.39-1.414 0l-8.485-8.485c-0.39-0.39-0.39-1.024 0-1.414s1.024-0.39 1.414 0l7.778 7.778 7.778-7.778c0.39-0.39 1.024-0.39 1.414 0z'/%3E%3C/svg%3E");
  /**
   * 1. Reset some defaults on select just in case.
   * 2. Height of our `c-input` minus the top and bottom border height.
   * 3. Hide the native drop-down button arrow in IE10+.
   */
}
.c-input--select::before { /* [2] */
  content: "";
  background-image: var(--aura-select-box-arrow-icon);
  background-repeat: no-repeat;
  background-size: cover;
}
.c-input--select select {
  position: relative;
  display: block;
  width: 100%;
  height: var(--aura-c-select-height, 38px); /* [2] */
  padding-top: var(--aura-c-form-select-padding-block-start, 0);
  padding-right: var(--aura-c-form-select-padding-inline-end, 24px);
  padding-bottom: var(--aura-c-form-select-padding-block-end, 0);
  padding-left: var(--aura-c-form-select-padding-inline-start, 12px);
  color: var(--aura-c-form-input-text-color, #424243);
  background-image: none; /* [1] */
  background-color: transparent; /* [1] */
  border: 0; /* [1] */
  border-color: transparent; /* [1] */
  appearance: none;
  /* [1] */
  -webkit-text-size-adjust: none; /* [1] */
  cursor: pointer; /* [1] */
  font-size: 18px;
  font-size: 1.125rem;
  line-height: 1.3333333333;
  z-index: 1;
}
.c-input--select select::-ms-expand {
  display: none; /* [3] */
}
.c-input--select select:disabled, .c-input--select select[disabled=disabled], .c-input--select select.is-disabled {
  cursor: default;
  opacity: var(--aura-c-form-input-opacity-disabled, 0.3);
}
.c-input--select select:focus, .c-input--select select:active {
  outline: none;
  box-shadow: none;
}
@media (min-width: 48em) {
  .c-input--select select {
    font-size: 21px;
    font-size: 1.3125rem;
    line-height: 1.4285714286;
  }
}
.c-input--select select option {
  max-width: 92%;
  font-size: inherit;
  line-height: inherit;
  background-color: transparent;
}

/**
 * Custom number picker
 * HTML:

    <div class="c-form-field u-1/3@tablet" data-validation="default" data-role="group" aria-labelledby="demoNumSpinnerLabel demoNumSpinnerCurrValue">
      <label class="c-form-field__label" id="demoNumSpinnerLabel">Label</label>
      <div class="c-form-field__input">

        <div class="c-num-spinner">
          <div hidden id="demoNumSpinnerCurrValue">The current value is <span data-num-spinner="current-value">0</span></div>
          <div hidden class="js-numSpinnerStrings" data-num-spinner-decrease="Decrease amount by" data-num-spinner-increase="Increase amount by" aria-hidden="true"></div>
          <button class="c-icon-btn c-num-spinner__btn"
                  tabindex="-1"
                  data-num-spinner="decrease"
                  type="button">
            <svg class="c-svg c-svg--remove-24"><use xlink:href="#c-svg--remove-24"></use></svg>
          </button>

          <input  type="number"
                  id="demoFormInputNumperPicker1"
                  class="c-input"
                  value="0"
                  tabindex="0"
                  aria-label="Label of what this input is for" />

          <button class="c-icon-btn c-num-spinner__btn"
                  tabindex="-1"
                  data-num-spinner="increase"
                  type="button">
            <svg class="c-svg c-svg--add-24"><use xlink:href="#c-svg--add-24"></use></svg>
          </button>

        </div>

      </div>
    </div>

 */
.c-num-spinner {
  white-space: nowrap;
  font-size: 0;
}
.c-num-spinner .c-input,
.c-num-spinner .c-num-spinner__btn {
  vertical-align: middle;
}
.c-num-spinner .c-num-spinner__btn {
  display: none;
  width: var(--aura-c-form-input-num-spinner-button-width, 32px);
  height: var(--aura-c-form-input-num-spinner-button-height, 40px);
  padding-left: 0;
  padding-right: 0;
  color: var(--aura-c-form-input-num-spinner-text-color, #424243);
  text-align: center;
  border-radius: var(--aura-c-form-input-num-spinner-radius-border, 3px);
}
.c-num-spinner .c-num-spinner__btn:hover, .c-num-spinner .c-num-spinner__btn:focus, .c-num-spinner .c-num-spinner__btn:active {
  color: var(--aura-c-form-input-num-spinner-text-color-active, #006db7);
}
.c-num-spinner .c-num-spinner__btn .c-svg {
  width: var(--aura-c-form-input-num-spinner-button-icon-sizing, 24px);
  height: var(--aura-c-form-input-num-spinner-button-icon-sizing, 24px);
}
.c-num-spinner .c-num-spinner__btn.is-active {
  display: inline-block;
}
.c-num-spinner .c-input {
  width: auto;
  min-width: var(--aura-c-form-input-num-spinner-input-width, 50px);
  max-width: var(--aura-c-form-input-num-spinner-max-width, 120px);
  padding-left: var(--aura-c-form-input-num-spinner-padding-inline-start, 3px);
  padding-right: var(--aura-c-form-input-num-spinner-padding-inline-end, 3px);
  border-style: solid;
  border-width: var(--aura-c-form-input-border-width, 1px);
  border-color: var(--aura-c-form-input-color-border, #9b9b9e);
  border-radius: var(--aura-c-form-input-num-spinner-radius-border, 3px);
}
.c-num-spinner .c-input.is-focus {
  border-color: var(--aura-c-form-input-color-border-focus, #006db7);
}
.c-num-spinner .c-input.c-input--num-spinner {
  text-align: center;
}
.c-num-spinner .c-input.c-input--num-spinner, .c-num-spinner .c-input.c-input--num-spinner::-webkit-inner-spin-button, .c-num-spinner .c-input.c-input--num-spinner::-webkit-outer-spin-button {
  appearance: none;
  -moz-appearance: textfield;
}

/**
 * Fancy radio buttons and checkboxes
 * 1. Undo settings from our `.c-input` class and make our radio
 *    buttons and checkboxes stack as a list by default.
 */
.c-input--radio,
.c-input--checkbox {
  --aura-c-form-choice-sizing: 22;
  --aura-c-form-choice-sizing-small: 16;
  display: block; /* [1] */
  width: auto; /* [1] */
  height: -moz-fit-content;
  height: fit-content; /* [1] */
  border: 0; /* [1] */
  margin: 0;
  padding: 0;
}
li.c-input--radio, .c-input--checkbox {
  height: unset;
}

.c-input--radio input[type=radio],
.c-input--radio input[type=checkbox],
.c-input--checkbox input[type=radio],
.c-input--checkbox input[type=checkbox] {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}
.c-input--radio input[type=radio] + label,
.c-input--radio input[type=radio] + .c-form-field__label,
.c-input--radio input[type=radio] + input[type=hidden] + label,
.c-input--radio input[type=checkbox] + label,
.c-input--radio input[type=checkbox] + .c-form-field__label,
.c-input--radio input[type=checkbox] + input[type=hidden] + label,
.c-input--checkbox input[type=radio] + label,
.c-input--checkbox input[type=radio] + .c-form-field__label,
.c-input--checkbox input[type=radio] + input[type=hidden] + label,
.c-input--checkbox input[type=checkbox] + label,
.c-input--checkbox input[type=checkbox] + .c-form-field__label,
.c-input--checkbox input[type=checkbox] + input[type=hidden] + label {
  position: relative;
  display: inline-block;
  color: var(--aura-c-form-input-text-color, #424243);
  font-size: 18px;
  font-size: 1.125rem;
  line-height: 1.3333333333;
  font-weight: var(--aura-c-form-choice-font-weight, 400);
  margin-bottom: 0;
  padding-left: var(--aura-c-form-choice-spacing-inline, calc(var(--aura-c-form-choice-sizing) * 1px + 12px));
  vertical-align: middle;
  -webkit-user-select: none;
          user-select: none;
  cursor: pointer;
}
.c-input--radio input[type=radio] + label::before,
.c-input--radio input[type=radio] + .c-form-field__label::before,
.c-input--radio input[type=radio] + input[type=hidden] + label::before,
.c-input--radio input[type=checkbox] + label::before,
.c-input--radio input[type=checkbox] + .c-form-field__label::before,
.c-input--radio input[type=checkbox] + input[type=hidden] + label::before,
.c-input--checkbox input[type=radio] + label::before,
.c-input--checkbox input[type=radio] + .c-form-field__label::before,
.c-input--checkbox input[type=radio] + input[type=hidden] + label::before,
.c-input--checkbox input[type=checkbox] + label::before,
.c-input--checkbox input[type=checkbox] + .c-form-field__label::before,
.c-input--checkbox input[type=checkbox] + input[type=hidden] + label::before {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 0;
  width: calc(var(--aura-c-form-choice-sizing) * 1px);
  height: calc(var(--aura-c-form-choice-sizing) * 1px);
  content: "";
  color: var(--aura-c-form-label-text-color, #424243);
  text-align: center;
  background-color: var(--aura-c-form-choice-color-background, white);
  border-style: solid;
  border-width: var(--aura-c-form-choice-border-width, 1px);
  border-color: var(--aura-c-form-choice-color-border, #9b9b9e);
  box-sizing: border-box;
  transition: all 0.4s ease;
}
.c-input--radio input[type=radio]:focus + label::before,
.c-input--radio input[type=radio]:focus + .c-form-field__label::before,
.c-input--radio input[type=radio]:focus + input[type=hidden] + label::before, .c-input--radio input[type=radio]:hover + label::before,
.c-input--radio input[type=radio]:hover + .c-form-field__label::before,
.c-input--radio input[type=radio]:hover + input[type=hidden] + label::before,
.c-input--radio input[type=checkbox]:focus + label::before,
.c-input--radio input[type=checkbox]:focus + .c-form-field__label::before,
.c-input--radio input[type=checkbox]:focus + input[type=hidden] + label::before,
.c-input--radio input[type=checkbox]:hover + label::before,
.c-input--radio input[type=checkbox]:hover + .c-form-field__label::before,
.c-input--radio input[type=checkbox]:hover + input[type=hidden] + label::before,
.c-input--checkbox input[type=radio]:focus + label::before,
.c-input--checkbox input[type=radio]:focus + .c-form-field__label::before,
.c-input--checkbox input[type=radio]:focus + input[type=hidden] + label::before,
.c-input--checkbox input[type=radio]:hover + label::before,
.c-input--checkbox input[type=radio]:hover + .c-form-field__label::before,
.c-input--checkbox input[type=radio]:hover + input[type=hidden] + label::before,
.c-input--checkbox input[type=checkbox]:focus + label::before,
.c-input--checkbox input[type=checkbox]:focus + .c-form-field__label::before,
.c-input--checkbox input[type=checkbox]:focus + input[type=hidden] + label::before,
.c-input--checkbox input[type=checkbox]:hover + label::before,
.c-input--checkbox input[type=checkbox]:hover + .c-form-field__label::before,
.c-input--checkbox input[type=checkbox]:hover + input[type=hidden] + label::before {
  border-color: var(--aura-c-form-choice-color-border-focus, #006db7);
  background-color: var(--aura-c-form-choice-color-background-focus, #c1e6ff);
}
.c-input--radio input[type=radio]:active + label::before,
.c-input--radio input[type=radio]:active + .c-form-field__label::before,
.c-input--radio input[type=radio]:active + input[type=hidden] + label::before,
.c-input--radio input[type=checkbox]:active + label::before,
.c-input--radio input[type=checkbox]:active + .c-form-field__label::before,
.c-input--radio input[type=checkbox]:active + input[type=hidden] + label::before,
.c-input--checkbox input[type=radio]:active + label::before,
.c-input--checkbox input[type=radio]:active + .c-form-field__label::before,
.c-input--checkbox input[type=radio]:active + input[type=hidden] + label::before,
.c-input--checkbox input[type=checkbox]:active + label::before,
.c-input--checkbox input[type=checkbox]:active + .c-form-field__label::before,
.c-input--checkbox input[type=checkbox]:active + input[type=hidden] + label::before {
  transition-duration: 0s;
}
.c-input--radio.is-field-check,
.c-input--checkbox.is-field-check {
  padding-top: 6px;
  margin-bottom: 0;
}
.c-input--radio.is-field-check input[type=radio] + label,
.c-input--radio.is-field-check input[type=radio] + .c-form-field__label,
.c-input--radio.is-field-check input[type=radio] + input[type=hidden] + label,
.c-input--radio.is-field-check input[type=checkbox] + label,
.c-input--radio.is-field-check input[type=checkbox] + .c-form-field__label,
.c-input--radio.is-field-check input[type=checkbox] + input[type=hidden] + label,
.c-input--checkbox.is-field-check input[type=radio] + label,
.c-input--checkbox.is-field-check input[type=radio] + .c-form-field__label,
.c-input--checkbox.is-field-check input[type=radio] + input[type=hidden] + label,
.c-input--checkbox.is-field-check input[type=checkbox] + label,
.c-input--checkbox.is-field-check input[type=checkbox] + .c-form-field__label,
.c-input--checkbox.is-field-check input[type=checkbox] + input[type=hidden] + label {
  padding-left: calc(var(--aura-c-form-choice-sizing) + 12px);
  font-size: 14px;
  font-size: 0.875rem;
  line-height: 1.35;
}
.c-input--radio.is-field-check input[type=radio] + label::before,
.c-input--radio.is-field-check input[type=radio] + .c-form-field__label::before,
.c-input--radio.is-field-check input[type=radio] + input[type=hidden] + label::before,
.c-input--radio.is-field-check input[type=checkbox] + label::before,
.c-input--radio.is-field-check input[type=checkbox] + .c-form-field__label::before,
.c-input--radio.is-field-check input[type=checkbox] + input[type=hidden] + label::before,
.c-input--checkbox.is-field-check input[type=radio] + label::before,
.c-input--checkbox.is-field-check input[type=radio] + .c-form-field__label::before,
.c-input--checkbox.is-field-check input[type=radio] + input[type=hidden] + label::before,
.c-input--checkbox.is-field-check input[type=checkbox] + label::before,
.c-input--checkbox.is-field-check input[type=checkbox] + .c-form-field__label::before,
.c-input--checkbox.is-field-check input[type=checkbox] + input[type=hidden] + label::before {
  width: var(--aura-c-form-choice-sizing-small);
  height: var(--aura-c-form-choice-sizing-small);
}
.c-input--radio.align-top input[type=radio] + label::before,
.c-input--radio.align-top input[type=radio] + .c-form-field__label::before,
.c-input--radio.align-top input[type=radio] + input[type=hidden] + label::before,
.c-input--radio.align-top input[type=checkbox] + label::before,
.c-input--radio.align-top input[type=checkbox] + .c-form-field__label::before,
.c-input--radio.align-top input[type=checkbox] + input[type=hidden] + label::before,
.c-input--checkbox.align-top input[type=radio] + label::before,
.c-input--checkbox.align-top input[type=radio] + .c-form-field__label::before,
.c-input--checkbox.align-top input[type=radio] + input[type=hidden] + label::before,
.c-input--checkbox.align-top input[type=checkbox] + label::before,
.c-input--checkbox.align-top input[type=checkbox] + .c-form-field__label::before,
.c-input--checkbox.align-top input[type=checkbox] + input[type=hidden] + label::before {
  top: 3px;
  transform: translateY(0);
}
.c-input--radio.align-top input[type=radio] + label::after,
.c-input--radio.align-top input[type=radio] + .c-form-field__label::after,
.c-input--radio.align-top input[type=radio] + input[type=hidden] + label::after,
.c-input--radio.align-top input[type=checkbox] + label::after,
.c-input--radio.align-top input[type=checkbox] + .c-form-field__label::after,
.c-input--radio.align-top input[type=checkbox] + input[type=hidden] + label::after,
.c-input--checkbox.align-top input[type=radio] + label::after,
.c-input--checkbox.align-top input[type=radio] + .c-form-field__label::after,
.c-input--checkbox.align-top input[type=radio] + input[type=hidden] + label::after,
.c-input--checkbox.align-top input[type=checkbox] + label::after,
.c-input--checkbox.align-top input[type=checkbox] + .c-form-field__label::after,
.c-input--checkbox.align-top input[type=checkbox] + input[type=hidden] + label::after {
  top: 14px;
}

/* Checkboxes */
.c-input--checkbox {
  --aura-c-form-checkmark-sizing-width: 11;
  --aura-c-form-checkmark-sizing-height: 5;
  --aura-c-form-checkmark-left-pos: 2;
}
.c-input--checkbox input[type=checkbox] + label::before,
.c-input--checkbox input[type=checkbox] + .c-form-field__label::before,
.c-input--checkbox input[type=checkbox] + input[type=hidden] + label::before {
  border-radius: 4px;
}
.c-input--checkbox input[type=checkbox] + label::after,
.c-input--checkbox input[type=checkbox] + .c-form-field__label::after,
.c-input--checkbox input[type=checkbox] + input[type=hidden] + label::after {
  position: absolute;
  top: 50%;
  left: calc(var(--aura-c-form-checkmark-left-pos) * 1px);
  width: calc(var(--aura-c-form-checkmark-sizing-width) * 1px);
  height: calc(var(--aura-c-form-checkmark-sizing-height) * 1px);
  border-width: 2px;
  border-style: solid;
  border-color: var(--aura-c-form-checkbox-color-check, white);
  border-top-style: none;
  border-right-style: none;
  box-sizing: content-box;
  content: "";
  transform: scale(0) translateY(-50%) rotate(0deg);
  transform-origin: 50% 0;
  transition: transform 200ms ease-out;
  z-index: 1;
}
.c-input--checkbox input[type=checkbox]:disabled + label,
.c-input--checkbox input[type=checkbox]:disabled + .c-form-field__label,
.c-input--checkbox input[type=checkbox]:disabled + input[type=hidden] + label, .c-input--checkbox input[type=checkbox][disabled=disabled] + label,
.c-input--checkbox input[type=checkbox][disabled=disabled] + .c-form-field__label,
.c-input--checkbox input[type=checkbox][disabled=disabled] + input[type=hidden] + label, .c-input--checkbox input[type=checkbox].is-disabled + label,
.c-input--checkbox input[type=checkbox].is-disabled + .c-form-field__label,
.c-input--checkbox input[type=checkbox].is-disabled + input[type=hidden] + label {
  color: var(--aura-c-form-choice-color-background-disabled, #d9d8d5);
  cursor: default;
}
.c-input--checkbox input[type=checkbox]:disabled + label::before,
.c-input--checkbox input[type=checkbox]:disabled + .c-form-field__label::before,
.c-input--checkbox input[type=checkbox]:disabled + input[type=hidden] + label::before, .c-input--checkbox input[type=checkbox][disabled=disabled] + label::before,
.c-input--checkbox input[type=checkbox][disabled=disabled] + .c-form-field__label::before,
.c-input--checkbox input[type=checkbox][disabled=disabled] + input[type=hidden] + label::before, .c-input--checkbox input[type=checkbox].is-disabled + label::before,
.c-input--checkbox input[type=checkbox].is-disabled + .c-form-field__label::before,
.c-input--checkbox input[type=checkbox].is-disabled + input[type=hidden] + label::before {
  border-color: var(--aura-c-form-choice-color-background-disabled, #d9d8d5);
}
.c-input--checkbox input[type=checkbox]:disabled + label:focus::before, .c-input--checkbox input[type=checkbox]:disabled + label:hover::before,
.c-input--checkbox input[type=checkbox]:disabled + .c-form-field__label:focus::before,
.c-input--checkbox input[type=checkbox]:disabled + .c-form-field__label:hover::before,
.c-input--checkbox input[type=checkbox]:disabled + input[type=hidden] + label:focus::before,
.c-input--checkbox input[type=checkbox]:disabled + input[type=hidden] + label:hover::before, .c-input--checkbox input[type=checkbox][disabled=disabled] + label:focus::before, .c-input--checkbox input[type=checkbox][disabled=disabled] + label:hover::before,
.c-input--checkbox input[type=checkbox][disabled=disabled] + .c-form-field__label:focus::before,
.c-input--checkbox input[type=checkbox][disabled=disabled] + .c-form-field__label:hover::before,
.c-input--checkbox input[type=checkbox][disabled=disabled] + input[type=hidden] + label:focus::before,
.c-input--checkbox input[type=checkbox][disabled=disabled] + input[type=hidden] + label:hover::before, .c-input--checkbox input[type=checkbox].is-disabled + label:focus::before, .c-input--checkbox input[type=checkbox].is-disabled + label:hover::before,
.c-input--checkbox input[type=checkbox].is-disabled + .c-form-field__label:focus::before,
.c-input--checkbox input[type=checkbox].is-disabled + .c-form-field__label:hover::before,
.c-input--checkbox input[type=checkbox].is-disabled + input[type=hidden] + label:focus::before,
.c-input--checkbox input[type=checkbox].is-disabled + input[type=hidden] + label:hover::before {
  background-color: inherit;
}
.c-input--checkbox input[type=checkbox]:disabled:checked + label::before,
.c-input--checkbox input[type=checkbox]:disabled:checked + .c-form-field__label::before,
.c-input--checkbox input[type=checkbox]:disabled:checked + input[type=hidden] + label::before, .c-input--checkbox input[type=checkbox][disabled=disabled]:checked + label::before,
.c-input--checkbox input[type=checkbox][disabled=disabled]:checked + .c-form-field__label::before,
.c-input--checkbox input[type=checkbox][disabled=disabled]:checked + input[type=hidden] + label::before, .c-input--checkbox input[type=checkbox].is-disabled:checked + label::before,
.c-input--checkbox input[type=checkbox].is-disabled:checked + .c-form-field__label::before,
.c-input--checkbox input[type=checkbox].is-disabled:checked + input[type=hidden] + label::before {
  border-color: var(--aura-c-form-choice-color-background-disabled, #d9d8d5);
  background-color: var(--aura-c-form-choice-color-background-disabled, #d9d8d5);
}
.c-input--checkbox input[type=checkbox]:disabled:checked + label::after,
.c-input--checkbox input[type=checkbox]:disabled:checked + .c-form-field__label::after,
.c-input--checkbox input[type=checkbox]:disabled:checked + input[type=hidden] + label::after, .c-input--checkbox input[type=checkbox][disabled=disabled]:checked + label::after,
.c-input--checkbox input[type=checkbox][disabled=disabled]:checked + .c-form-field__label::after,
.c-input--checkbox input[type=checkbox][disabled=disabled]:checked + input[type=hidden] + label::after, .c-input--checkbox input[type=checkbox].is-disabled:checked + label::after,
.c-input--checkbox input[type=checkbox].is-disabled:checked + .c-form-field__label::after,
.c-input--checkbox input[type=checkbox].is-disabled:checked + input[type=hidden] + label::after {
  border-color: var(--aura-c-form-checkbox-color-check, white);
}
.c-input--checkbox input[type=checkbox]:checked + label::before,
.c-input--checkbox input[type=checkbox]:checked + .c-form-field__label::before,
.c-input--checkbox input[type=checkbox]:checked + input[type=hidden] + label::before {
  animation: borderscale 300ms ease-in;
  border-color: var(--aura-c-form-choice-color-border-focus, #006db7);
  background-color: var(--aura-c-form-choice-color-background-focus, #006db7);
}
.c-input--checkbox input[type=checkbox]:checked + label::after,
.c-input--checkbox input[type=checkbox]:checked + .c-form-field__label::after,
.c-input--checkbox input[type=checkbox]:checked + input[type=hidden] + label::after {
  transform: scale(1) translateY(-50%) rotate(-45deg);
}
.c-input--checkbox.is-field-check input[type=checkbox] + label::after,
.c-input--checkbox.is-field-check input[type=checkbox] + .c-form-field__label::after,
.c-input--checkbox.is-field-check input[type=checkbox] + input[type=hidden] + label::after {
  width: 9px;
  height: 3px;
}
.c-input--checkbox.has-no-label input[type=checkbox] + label,
.c-input--checkbox.has-no-label input[type=checkbox] + .c-form-field__label,
.c-input--checkbox.has-no-label input[type=checkbox] + input[type=hidden] + label {
  padding-left: var(--aura-c-form-choice-sizing);
}

/* Radio buttons */
.c-input--radio {
  --aura-c-form-radio-button-sizing: 12;
  --aura-c-form-radio-left-pos: 5;
}
.c-input--radio input[type=radio] + label::before,
.c-input--radio input[type=radio] + .c-form-field__label::before,
.c-input--radio input[type=radio] + input[type=hidden] + label::before {
  border-radius: 50%;
}
.c-input--radio input[type=radio] + label::after,
.c-input--radio input[type=radio] + .c-form-field__label::after,
.c-input--radio input[type=radio] + input[type=hidden] + label::after {
  position: absolute;
  top: 50%;
  left: calc(var(--aura-c-form-radio-left-pos) * 1px);
  width: calc(var(--aura-c-form-radio-button-sizing) * 1px);
  height: calc(var(--aura-c-form-radio-button-sizing) * 1px);
  background-color: var(--aura-c-form-choice-color-background-focus, #006db7);
  border-radius: 50%;
  content: "";
  box-sizing: border-box;
  transform: scale(0) translateY(-50%);
  transform-origin: 50% 0;
  transition: transform 200ms ease-out;
}
.c-input--radio input[type=radio]:disabled + label,
.c-input--radio input[type=radio]:disabled + .c-form-field__label,
.c-input--radio input[type=radio]:disabled + input[type=hidden] + label, .c-input--radio input[type=radio][disabled=disabled] + label,
.c-input--radio input[type=radio][disabled=disabled] + .c-form-field__label,
.c-input--radio input[type=radio][disabled=disabled] + input[type=hidden] + label, .c-input--radio input[type=radio].is-disabled + label,
.c-input--radio input[type=radio].is-disabled + .c-form-field__label,
.c-input--radio input[type=radio].is-disabled + input[type=hidden] + label {
  color: var(--aura-c-form-choice-color-background-disabled, #d9d8d5);
  cursor: default;
}
.c-input--radio input[type=radio]:disabled + label::before,
.c-input--radio input[type=radio]:disabled + .c-form-field__label::before,
.c-input--radio input[type=radio]:disabled + input[type=hidden] + label::before, .c-input--radio input[type=radio][disabled=disabled] + label::before,
.c-input--radio input[type=radio][disabled=disabled] + .c-form-field__label::before,
.c-input--radio input[type=radio][disabled=disabled] + input[type=hidden] + label::before, .c-input--radio input[type=radio].is-disabled + label::before,
.c-input--radio input[type=radio].is-disabled + .c-form-field__label::before,
.c-input--radio input[type=radio].is-disabled + input[type=hidden] + label::before {
  border-color: var(--aura-c-form-choice-color-background-disabled, #d9d8d5);
}
.c-input--radio input[type=radio]:disabled + label:focus::before, .c-input--radio input[type=radio]:disabled + label:hover::before,
.c-input--radio input[type=radio]:disabled + .c-form-field__label:focus::before,
.c-input--radio input[type=radio]:disabled + .c-form-field__label:hover::before,
.c-input--radio input[type=radio]:disabled + input[type=hidden] + label:focus::before,
.c-input--radio input[type=radio]:disabled + input[type=hidden] + label:hover::before, .c-input--radio input[type=radio][disabled=disabled] + label:focus::before, .c-input--radio input[type=radio][disabled=disabled] + label:hover::before,
.c-input--radio input[type=radio][disabled=disabled] + .c-form-field__label:focus::before,
.c-input--radio input[type=radio][disabled=disabled] + .c-form-field__label:hover::before,
.c-input--radio input[type=radio][disabled=disabled] + input[type=hidden] + label:focus::before,
.c-input--radio input[type=radio][disabled=disabled] + input[type=hidden] + label:hover::before, .c-input--radio input[type=radio].is-disabled + label:focus::before, .c-input--radio input[type=radio].is-disabled + label:hover::before,
.c-input--radio input[type=radio].is-disabled + .c-form-field__label:focus::before,
.c-input--radio input[type=radio].is-disabled + .c-form-field__label:hover::before,
.c-input--radio input[type=radio].is-disabled + input[type=hidden] + label:focus::before,
.c-input--radio input[type=radio].is-disabled + input[type=hidden] + label:hover::before {
  background-color: inherit;
}
.c-input--radio input[type=radio]:disabled:checked + label::after,
.c-input--radio input[type=radio]:disabled:checked + .c-form-field__label::after,
.c-input--radio input[type=radio]:disabled:checked + input[type=hidden] + label::after, .c-input--radio input[type=radio][disabled=disabled]:checked + label::after,
.c-input--radio input[type=radio][disabled=disabled]:checked + .c-form-field__label::after,
.c-input--radio input[type=radio][disabled=disabled]:checked + input[type=hidden] + label::after, .c-input--radio input[type=radio].is-disabled:checked + label::after,
.c-input--radio input[type=radio].is-disabled:checked + .c-form-field__label::after,
.c-input--radio input[type=radio].is-disabled:checked + input[type=hidden] + label::after {
  background-color: var(--aura-c-form-choice-color-background-disabled, #d9d8d5);
}
.c-input--radio input[type=radio]:checked + label::before,
.c-input--radio input[type=radio]:checked + .c-form-field__label::before,
.c-input--radio input[type=radio]:checked + input[type=hidden] + label::before {
  animation: borderscale 300ms ease-in;
  background-color: var(--aura-c-form-radio-color-background-checked, white);
}
.c-input--radio input[type=radio]:checked + label::after,
.c-input--radio input[type=radio]:checked + .c-form-field__label::after,
.c-input--radio input[type=radio]:checked + input[type=hidden] + label::after {
  transform: scale(1) translateY(-50%);
}
.c-input--radio.is-field-check input[type=radio] + label::after,
.c-input--radio.is-field-check input[type=radio] + .c-form-field__label::after,
.c-input--radio.is-field-check input[type=radio] + input[type=hidden] + label::after {
  left: 4px;
  width: 10px;
  height: 10px;
}

/**
 * Combo field input and button, like a search field with an icon button next
 * to it.
 *
 *
 * 1. Add classes to target PrimeNG controls. Remove if not using PrimeNG.
 * 2. The field is probably in a colum or container with a width, make the
 *    field full width minus the width of your button. Default is 40px for
 *    the search icon.
 * 3. Remove the border radii on the right side of the field.
 *
 * HTML:

    <div class="c-form-field">
      <label class="c-form-field__label">Search</label>
      <div class="c-form-field__input c-form-field--btn-combo">
        <input type="text" name="text" value="" class="c-input c-input--btn-combo" />

        <label class="c-btn c-btn--primary c-btn--input-combo" for="btn-search">
          <svg class="c-svg c-svg--search-24" aria-labelledby="svg-title">
            <title id="svg-title">Search</title>
            <use xlink:href="#c-svg--search-24"></use>
          </svg>
          <input id="btn-search" type="submit" value="Search" class="c-btn__input" />
        </label>
      </div>
    </div>

 */
.c-form-field--btn-combo { /* OLD - iOS 6-, Safari 3.1-6, BB7 */ /* TWEENER - IE 10 */ /* NEW - Safari 6.1+. iOS 7.1+, BB10 */
  display: flex; /* NEW, Spec - Firefox, Chrome, Opera */
  align-items: center;
  justify-content: center;
  flex-direction: row;
}

.c-input--btn-combo, .c-input--btn-combo.ui-inputtext { /* [1] */
  padding-left: 12px;
  padding-right: 12px;
  flex-grow: 1;
  border-style: solid;
  border-width: var(--aura-c-form-input-border-width, 1px);
  border-color: var(--aura-c-form-input-color-border, #9b9b9e);
  border-radius: var(--aura-c-form-input-radius-border, 3px);
  border-top-right-radius: 0 !important; /* [3] */
  border-bottom-right-radius: 0 !important; /* [3] */
}
.c-input--btn-combo.is-focus, .c-input--btn-combo:focus, .c-input--btn-combo:active, .c-input--btn-combo.ui-inputtext.is-focus, .c-input--btn-combo.ui-inputtext:focus, .c-input--btn-combo.ui-inputtext:active {
  outline: none;
  box-shadow: none;
  border-color: var(--aura-c-form-input-color-border-focus, #006db7);
}

/* Validation styles
   ========================================================================== */
/**
 * Modify form fields to show inline validation. Requires js or back-end code
 * to update the `data-validation` property on the `.c-input--validation`
 * container.
 *
 * HTML

    <div class="c-form-field" data-validation="default | success | error | warning">
      <label class="c-form-field__label">Name</label>
      <div class="c-form-field__input">
        <input type="text" name="name" class="c-input" value="" />
      </div>
      <div class="c-form-field__hint">Hint: It's your name</div>
    </div>

 */
.c-form-field[data-validation=completed] .c-form-field__input:before {
  top: 13px;
  content: "";
  background-image: url("data:image/svg+xml, %3Csvg width='41' height='32' viewBox='0 0 41 32' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='%236CB454' d='M9 16.2l-4.2-4.2-1.4 1.4 5.6 5.6 12-12-1.4-1.4-10.6 10.6z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: cover;
}
.c-form-field[data-validation=completed] .c-input {
  border-color: var(--aura-c-form-input-color-border-success, #6cb454);
}
.c-form-field[data-validation=completed] .c-input.c-input--radio label::before,
.c-form-field[data-validation=completed] .c-input.c-input--radio .c-form-field__label::before, .c-form-field[data-validation=completed] .c-input.c-input--checkbox label::before,
.c-form-field[data-validation=completed] .c-input.c-input--checkbox .c-form-field__label::before {
  border-color: var(--aura-c-form-input-color-border-success, #6cb454);
}
.c-form-field[data-validation=error] .c-input {
  border-color: var(--aura-c-form-input-color-border-error, #d81124);
}
.c-form-field[data-validation=error] .c-input.c-input--radio label::before,
.c-form-field[data-validation=error] .c-input.c-input--radio .c-form-field__label::before, .c-form-field[data-validation=error] .c-input.c-input--checkbox label::before,
.c-form-field[data-validation=error] .c-input.c-input--checkbox .c-form-field__label::before {
  border-color: var(--aura-c-form-input-color-border-error, #d81124);
}
.c-form-field[data-validation=error] .c-form-field__error {
  display: inline-block;
}
.c-form-field[data-validation=warning] .c-input {
  border-color: var(--aura-c-form-input-color-border-warning, #ffc344);
  box-shadow: var(--aura-c-form-input-boc-shadow-warning, 0 0 4px #ffc344);
}
.c-form-field[data-validation=warning] .c-input--radio [type=radio]::before,
.c-form-field[data-validation=warning] .c-input--checkbox [type=checkbox]::before {
  border-color: var(--aura-c-form-input-color-border-warning, #ffc344);
}

/* Form buttons
   ========================================================================== */
/**
 * Group your Save and Cancel buttons inline.
 * {Button} can be an anchor tag, button tag, or input.
 *
 * HTML

    <div class="c-form-buttons  [ o-layout o-layout--auto ]">
      <div class="o-layout__item">
        < {button} class="c-btn c-btn--primary" [...]>Save</>
      </div>
      <div class="o-layout__item">
        < {button} class="c-btn c-btn--secondary" [...]>Cancel</>
      </div>
    </div>

 *
 */
.c-form-buttons {
  margin-bottom: 0;
  padding-top: 24px;
}
@media (max-width: 47.99em) {
  .c-form-buttons {
    text-align: center;
  }
}
@media (min-width: 48em) {
  .c-form-buttons {
    padding-top: 48px;
  }
}
@media (max-width: 47.99em) {
  .c-form-buttons.o-layout--auto > .o-layout__item {
    width: 100% !important;
  }
}
@media (max-width: 47.99em) {
  .c-form-buttons.o-layout > .o-layout__item > .c-btn--primary {
    margin-bottom: 24px;
  }
}

/* Hidden form control
   ========================================================================== */
/**
 * Form input that is hidden from view until a user interaction occurs.
 * Such as showning a text input field when the user selects `Other` from a
 * radio button list. Works with JS to toggle data-state.
 */
.c-hidden-field .c-hidden-field__item {
  transition: max-height 500ms ease-out, opacity 500ms ease-out 150ms;
}
.c-hidden-field[data-state=is-hidden] .c-hidden-field__item {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
}
.c-hidden-field[data-state=is-animating] .c-hidden-field__item {
  opacity: 0;
}
.c-hidden-field[data-state=is-active] .c-hidden-field__item {
  margin-top: 0;
  max-height: 400px;
  overflow: visible;
  opacity: 1;
  will-change: opacity;
}

/* Size variants
   ========================================================================== */
.c-input--md {
  height: var(--aura-c-form-input-md-height, 34px);
}
.c-input--md,
.c-input--md select {
  font-size: 13px;
  font-size: 0.8125rem;
  line-height: 1.8461538462;
}
.c-input--md select {
  height: var(--aura-c-select-md-height, 32px);
}

/* ==========================================================================
   #ICONS
   ========================================================================== */
/**
 * Create design patterns with icons.
 */
.c-icon {
  position: relative;
  display: inline-block;
}
.c-icon::before {
  display: inline-block;
  color: inherit;
}
.c-icon:disabled, .is-disabled .c-icon, [data-state=is-disabled] .c-icon {
  cursor: none !important;
  opacity: 0.3;
}
.c-icon span {
  display: none;
  text-indent: -119988px;
  overflow: hidden;
  text-align: left;
}
button .c-icon {
  width: 100%;
  height: 100%;
}

.c-icon .c-svg {
  top: 0;
  width: 100%;
  height: 100%;
}

/* Icon variations
   ========================================================================== */
.c-icon--nav-item {
  display: inline-flex;
  margin-right: 6px;
  width: 24px;
  height: 24px;
}
.c-icon--nav-item .c-svg {
  top: 0;
  width: 100%;
  height: 100%;
}

.c-icon--delete {
  border-radius: 50%;
  transition: color 0.2s ease-out;
}
.c-popover--icon .c-popover__target:not(.c-svg-hover-swap) .c-icon--delete .c-svg, .c-icon--delete:not(.c-svg-hover-swap) .c-svg {
  color: #424243;
}

.c-popover--icon .c-popover__target:hover:not(.c-svg-hover-swap) .c-icon--delete .c-svg, .c-icon--delete:hover .c-svg, .c-icon--delete:active .c-svg, .c-icon--delete:focus .c-svg {
  color: #d81124;
}

.c-icon--delete.delete-table-row {
  z-index: 0;
}
.c-icon--delete.delete-table-row::before {
  content: "";
  display: block;
  opacity: 0;
  position: absolute;
  transition-duration: 0.15s;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  z-index: -1;
  bottom: -6px;
  left: -6px;
  right: -6px;
  top: -6px;
  background: none;
  border-radius: 50%;
  box-sizing: border-box;
  transform: scale(0);
  transition-property: transform, opacity;
}
.c-icon--delete.delete-table-row:hover::before, .c-icon--delete.delete-table-row:focus::before, .c-icon--delete.delete-table-row:active::before {
  background-color: rgba(32, 33, 36, 0.059);
  border: none;
  box-shadow: none;
  opacity: 1;
  transform: scale(1);
}
.c-icon--delete.delete-table-row:focus, .c-icon--delete.delete-table-row:focus::before {
  outline: none;
}
.c-icon--delete.delete-table-row:active:before {
  border: 1px solid #d9d8d5;
}

/* ==========================================================================
   #ICON BUTTONS
   ========================================================================== */
/**
 * Icon buttons are just that, an icon which acts as buttons. For example,
 * the close button on a modal window, or the play button over a video thumbnail.
 *
 */
.c-icon-btn {
  position: relative;
  display: inline-block;
  width: var(--aura-c-icon-btn-icon-size, 24px);
  height: var(--aura-c-icon-btn-icon-size, 24px);
  margin: 0;
  padding: 0;
  border: none;
  line-height: 0;
  background-color: transparent;
  cursor: pointer;
  appearance: none;
}
.c-icon-btn, .c-icon-btn:link, .c-icon-btn:visited, .c-icon-btn:hover, .c-icon-btn:active, .c-icon-btn:focus {
  text-decoration: none;
}
.c-icon-btn:disabled {
  transition: none;
}
.c-icon-btn:disabled, .c-icon-btn:disabled:hover {
  cursor: default;
  background-image: none;
  border: 0;
  opacity: 0.3;
}
.c-icon-btn .c-svg, .c-icon-btn .c-svg.c-svg--baseline {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
}

.c-icon-btn--play {
  width: 80px;
  height: 80px;
  text-align: center;
  color: white;
}
.c-icon-btn--play .c-svg {
  width: 100%;
  height: 100%;
  cursor: pointer;
  fill: currentColor;
  transition: filter 250ms ease-out;
}
.c-icon-btn--play .c-svg:hover {
  background-color: transparent;
  filter: url(#drop-shadow);
}

.c-icon-btn--action {
  border-radius: 50%;
  transition: color 0.2s ease-out;
  z-index: 1;
}
.c-icon-btn--action, .c-icon-btn--action:link, .c-icon-btn--action:visited {
  color: #6d6d6d;
}
.c-icon-btn--action:hover, .c-icon-btn--action:active, .c-icon-btn--action:focus {
  color: black;
}
.c-icon-btn--action::before {
  content: "";
  display: block;
  opacity: 0;
  position: absolute;
  transition-duration: 0.15s;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  z-index: -1;
  bottom: -6px;
  left: -6px;
  right: -6px;
  top: -6px;
  background: none;
  border-radius: 50%;
  box-sizing: border-box;
  transform: scale(0);
  transition-property: transform, opacity;
}
.c-icon-btn--action:hover::before, .c-icon-btn--action:focus::before, .c-icon-btn--action:active::before {
  background-color: rgba(32, 33, 36, 0.059);
  border: none;
  box-shadow: none;
  opacity: 1;
  transform: scale(1);
}
.c-icon-btn--action:focus, .c-icon-btn--action:focus::before {
  outline: none;
}
.c-icon-btn--action:active:before {
  border-width: 1px;
  border-style: solid;
  border-color: #d9d8d5;
}

/**
 * 'X' type button for closing windows and overlays
 *
 * HTML

    <button class="c-icon-btn c-icon-btn--close js-close-btn">
      <svg class="c-svg c-svg--close-24"><use xlink:href="#c-svg--close-24"></use></svg>
    </button>

  Inverse - white X on dark background

    <button class="c-icon-btn c-icon-btn--close is-inverse js-close-btn">
      <svg class="c-svg c-svg--close-24"><use xlink:href="#c-svg--close-24"></use></svg>
    </button>

 */
.c-icon-btn--close {
  z-index: 0;
}
.c-icon-btn--close, .c-icon-btn--close:link, .c-icon-btn--close:visited {
  color: inherit;
}
.c-icon-btn--close::before {
  content: "";
  display: block;
  opacity: 0;
  position: absolute;
  transition-duration: 0.15s;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  z-index: -1;
  bottom: 0;
  left: 0;
  right: 0;
  top: 0;
  background: none;
  border-radius: 50%;
  box-sizing: border-box;
  transform: scale(0);
  transition-property: transform, opacity;
}
.c-icon-btn--close:hover, .c-icon-btn--close:active, .c-icon-btn--close:focus, .c-icon-btn--close:focus-within {
  color: black !important;
}
.c-icon-btn--close:hover::before, .c-icon-btn--close:active::before, .c-icon-btn--close:focus::before, .c-icon-btn--close:focus-within::before {
  background-color: rgba(255, 255, 255, 0.8);
  border: none;
  box-shadow: none;
  opacity: 1;
  transform: scale(1);
}
.c-icon-btn--close:focus, .c-icon-btn--close:focus::before, .c-icon-btn--close:focus-within, .c-icon-btn--close:focus-within::before {
  outline: none;
}
.c-icon-btn--close:active::before {
  border-width: 1px;
  border-style: solid;
  border-color: #d9d8d5;
}

.c-icon-btn--delete {
  border-radius: 50%;
  transition: color 0.2s ease-out;
}
.c-tooltip .c-icon-btn--delete, .c-tooltip .c-icon-btn--delete:link, .c-tooltip .c-icon-btn--delete:visited, .c-icon-btn--delete:not(.c-svg-hover-swap), .c-icon-btn--delete:not(.c-svg-hover-swap):link, .c-icon-btn--delete:not(.c-svg-hover-swap):visited {
  color: #424243;
}
.c-tooltip .c-icon-btn--delete:hover, .c-tooltip .c-icon-btn--delete:active, .c-tooltip .c-icon-btn--delete:focus, .c-icon-btn--delete:not(.c-svg-hover-swap):hover, .c-icon-btn--delete:not(.c-svg-hover-swap):active, .c-icon-btn--delete:not(.c-svg-hover-swap):focus {
  color: #d81124;
}
.c-icon-btn--delete.delete-table-row {
  z-index: 0;
}
.c-icon-btn--delete.delete-table-row::before {
  content: "";
  display: block;
  opacity: 0;
  position: absolute;
  transition-duration: 0.15s;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  z-index: -1;
  bottom: -6px;
  left: -6px;
  right: -6px;
  top: -6px;
  background: none;
  border-radius: 50%;
  box-sizing: border-box;
  transform: scale(0);
  transition-property: transform, opacity;
}
.c-icon-btn--delete.delete-table-row:hover::before, .c-icon-btn--delete.delete-table-row:focus::before, .c-icon-btn--delete.delete-table-row:active::before {
  background-color: rgba(32, 33, 36, 0.059);
  border: none;
  box-shadow: none;
  opacity: 1;
  transform: scale(1);
}
.c-icon-btn--delete.delete-table-row:focus, .c-icon-btn--delete.delete-table-row:focus::before {
  outline: none;
}
.c-icon-btn--delete.delete-table-row:active:before {
  border-width: 1px;
  border-style: solid;
  border-color: #d9d8d5;
}

.c-icon-btn-thumbs {
  position: relative;
  width: 24px;
  height: 24px;
  margin: 0;
  padding: 0;
  float: left;
  border: none;
  background-color: transparent;
  cursor: pointer;
}

/**
 * Back to Top - requires JS, find showBackToTop();
 *
 * HTML:

    <a class="c-icon-btn-top-link [ js-scrollToElem ]" href="#top" data-state="is-hidden" role="button">
      <svg class="c-svg c-svg--top-circle-outline-24"><use xlink:href="#c-svg--top-circle-outline-24"></use></svg>
      <span class="u-sr-only">Back to top</span>
    </a>

 */
.c-icon-btn-top-link {
  position: fixed !important;
  bottom: 160px;
  right: 12px;
  display: inline-flex;
  margin: 0;
  padding: 0;
  width: 32px;
  height: 32px;
  line-height: 0;
  background-color: rgba(255, 255, 255, 0.8);
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.8);
  cursor: pointer;
  align-items: center;
  justify-content: center;
  transition: all 0.25s ease-in-out;
}
@media (min-width: 62em) {
  .c-icon-btn-top-link {
    right: 24px;
  }
}
.c-icon-btn-top-link.show, .c-icon-btn-top-link[data-state=is-visible] {
  visibility: visible;
  opacity: 1;
  transition: opacity 0.25s ease-in-out;
  will-change: opacity;
}
.c-icon-btn-top-link.hide, .c-icon-btn-top-link[data-state=is-hidden] {
  visibility: hidden;
  opacity: 0;
}
.c-icon-btn-top-link .c-svg {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  transition: opacity 0.25s ease-in-out, color 0.25s ease-in-out;
  will-change: color;
  color: #424243;
}
.c-icon-btn-top-link .c-svg:hover, .c-icon-btn-top-link .c-svg:focus {
  color: black;
}
.c-icon-btn-top-link.sticky-top-ie {
  position: fixed;
  left: auto;
  right: 24px;
  bottom: 160px;
}

/* ==========================================================================
   #INDICATORS
   ========================================================================== */
/**
 * Some round dots that you use to indicate the status of something.

    <span class="c-indicator c-indicator--normal">Normal</span>

 */
.c-indicator {
  display: inline-block;
  border-radius: var(--aura-c-indicator-border-radius, 50%);
  width: var(--aura-c-indicator-size, 10px);
  height: var(--aura-c-indicator-size, 10px);
  text-indent: -119988px;
  overflow: hidden;
  text-align: left;
}

.c-indicator--normal {
  background-color: var(--aura-c-indicator-normal-color-background, #6cb454);
}

.c-indicator--high {
  background-color: var(--aura-c-indicator-high-color-background, #ffbd3e);
}

.c-indicator--critical {
  background-color: var(--aura-c-indicator-critical-color-background, #d81124);
}

/* ==========================================================================
  #LISTS
  ========================================================================== */
.c-list,
.c-list__sub-list,
.c-list__item {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.c-list__item-heading {
  display: block;
  font-size: 16px;
  font-size: 1rem;
  line-height: 1.5;
  font-weight: 500;
  padding: 20px 24px;
}

.c-list__item ul {
  list-style-type: disc;
}

.c-list__item-label {
  display: block;
  margin-bottom: 6px;
  font-size: 16px;
  font-size: 1rem;
  line-height: 1;
  font-weight: 500;
  color: #424243;
}

.c-list__item-value {
  display: block;
  color: #424243;
  font-size: 16px;
  font-size: 1rem;
  line-height: 1.25;
  font-weight: 400;
}
.c-list__item-value.is-email {
  overflow: hidden;
  text-overflow: ellipsis;
}
.c-list__item-value:not(:last-of-type) {
  margin-bottom: 12px;
}

/* List variants
  ========================================================================== */
/* List of form details in read-only view */
.c-list--read-only {
  margin-bottom: 24px;
}
.c-list--read-only .c-list__item {
  overflow-wrap: break-word;
  word-wrap: break-word;
  -ms-word-break: break-all;
  word-break: break-all;
  word-break: break-word;
  hyphens: none;
  margin-bottom: 24px;
}
.c-list--read-only .c-list__item p:last-of-type {
  margin-bottom: 0;
}
.c-list--read-only.has-borders .c-list__item {
  margin: 0;
  padding: 24px 0;
  border-bottom: 1px solid #e6e6e7;
}

@media (min-width: 48em) {
  .c-list--inline\@tablet {
    /**
     * 1. Allows us to use the layout object on any type of element.
     * 2. We need to defensively reset any box-model properties.
     * 3. Use the negative margin trick for multi-row grids:
     *    http://csswizardry.com/2011/08/building-better-grid-systems/
     */
    display: block; /* [1] */
    margin: 0; /* [2] */
    padding: 0; /* [2] */
    list-style: none; /* [1] */
    font-size: 0;
    /**
     * 1. Required in order to combine fluid widths with fixed gutters.
     * 2. Allows us to manipulate grids vertically, with text-level properties,
     *    etc.
     * 3. Default item alignment is with the tops of each other, like most
     *    traditional grid/layout systems.
     * 4. By default, all layout items are full-width (mobile first).
     * 5. Gutters provided by left padding:
     *    http://csswizardry.com/2011/08/building-better-grid-systems/
     * 6. Fallback for old IEs not supporting `rem` values.
     */
  }
}
@media (min-width: 48em) and (min-width: 48em) {
  .c-list--inline\@tablet {
    margin-left: -48px; /* [3] */
  }
}
@media (min-width: 48em) {
  .c-list--inline\@tablet > li {
    box-sizing: border-box; /* [1] */
    display: block;
    font-size: 16px; /* [6] */
    font-size: 1rem;
  }
}
@media (min-width: 48em) and (max-width: 47.99em) {
  .c-list--inline\@tablet > li {
    text-align: center;
    margin-bottom: 48px;
  }
}
@media (min-width: 48em) and (min-width: 48em) {
  .c-list--inline\@tablet > li {
    display: inline-block; /* [2] */
    vertical-align: top; /* [3] */
    width: auto; /* [4] */
    padding-left: 48px; /* [5] */
  }
}

.c-list--rows .c-list__item {
  display: block;
  margin: 0;
  padding: 0;
  border-top: 1px solid #e6e6e7;
  overflow-wrap: break-word;
  word-wrap: break-word;
  -ms-word-break: break-all;
  word-break: break-all;
  word-break: break-word;
  hyphens: none;
  font-size: 0;
}
.c-list--rows .c-list__item:last-of-type {
  border-bottom: 1px solid #e6e6e7;
}
.c-list--rows .c-list__item p:last-of-type {
  margin-bottom: 0;
}
.c-list--rows .c-list__item-label,
.c-list--rows .c-list__item-value {
  display: inline-block;
  width: 50%;
  margin: 0;
  padding: 12px 0;
  vertical-align: middle;
}
.c-list--rows .c-list__item-value {
  text-align: right;
}

.c-list--inline { /* OLD - iOS 6-, Safari 3.1-6, BB7 */ /* TWEENER - IE 10 */ /* NEW - Safari 6.1+. iOS 7.1+, BB10 */
  display: flex; /* NEW, Spec - Firefox, Chrome, Opera */
  flex-direction: row wrap;
  justify-content: flex-start;
  font-size: 0;
}
.c-list--inline .c-list__item {
  box-sizing: border-box;
  display: inline-block;
  width: auto;
  margin-bottom: 24px;
  padding: 3px 48px 3px 6px;
  font-size: 12px;
  font-size: 0.75rem;
  line-height: 1.2;
  border-left: 2px solid #e6e6e7;
}

.c-list__item-icon {
  padding-top: 0;
  padding-bottom: 0;
  vertical-align: middle;
  align-content: center;
}
.c-list__item-icon .c-list-icon:before {
  display: block;
  width: 30px;
  height: 30px;
  border: 1px solid #e6e6e7;
  background-color: #f6f6f6;
  font-size: 22px;
  font-size: 1.375rem;
  line-height: 28px;
  color: inherit;
  box-shadow: none;
  border-radius: 60px;
  transition: box-shadow 0.2s ease-out;
  text-align: center;
}

/* ==========================================================================
   #LOGOS
   ========================================================================== */
/**
 * A Place to keep and size all your logos according to where they are being
 * displayed.
 */
.c-logo {
  display: inline-block;
}
.c-logo img,
.c-logo .c-svg {
  width: 100%;
  height: 100%;
}

.c-logo--resmed {
  width: var(--aura-c-logo-resmed-width-mobile, 65px);
  height: var(--aura-c-logo-resmed-height-mobile, 49px);
}
@media (min-width: 48em) {
  .c-logo--resmed {
    width: var(--aura-c-logo-resmed-width-tablet, 91px);
    height: var(--aura-c-logo-resmed-height-tablet, 68px);
  }
}
.page-footer .c-logo--resmed {
  width: var(--aura-c-logo-resmed-width-footer, 52px);
  height: var(--aura-c-logo-resmed-height-footer, 40px);
}
.page-footer .c-logo--resmed svg {
  fill: white;
}

/* ==========================================================================
   #PAGE HEADER
   ========================================================================== */
/** 
 * 1. Need to force the `o-wrapper` element to expand to the max-width setting
 *    because of flexbox.
 */
.page-head {
  position: relative; /* OLD - iOS 6-, Safari 3.1-6, BB7 */ /* TWEENER - IE 10 */ /* NEW - Safari 6.1+. iOS 7.1+, BB10 */
  display: flex; /* NEW, Spec - Firefox, Chrome, Opera */
  margin: 0;
  padding: 0;
  flex-shrink: 0;
  flex-direction: row !important;
  flex-flow: row nowrap;
  justify-content: flex-start;
  align-items: center;
  min-height: var(--aura-c-page-head-min-height, 80px);
  background: var(--aura-c-page-head-color-background-fill, linear-gradient(311.16deg, #4156a6 0%, #4156a6 49.9%, #006db7 50%, #006db7 100%));
  line-height: 0;
  z-index: 1;
}
.page-head::after {
  content: "";
  display: table;
  clear: both;
}
.page-head .o-wrapper {
  width: 100%; /* [1] */
  background: var(--aura-c-page-head-color-background, linear-gradient(311.16deg, #4156a6 6.73%, #2062af 58.19%, #006db7 99.59%));
}

/* Aligment variants
   ========================================================================== */
.page-head--align-start {
  align-items: flex-start;
}

.page-head--align-end {
  align-items: flex-end;
}

/* Style variants
   ========================================================================== */
/**
 * 1. Override the max-width on the `.o-wrapper` element so the header will span
 *    the width of the viewport while keeping the outer gutters.
 * 2. Keep the ouside gutters in case it is being removed on the `.o-wrapper` 
 *    element at x-wide breakpoint.
 */
.page-head--full .o-wrapper {
  width: 100% !important;
  max-width: 100% !important; /* [1] */
  padding-right: 24px; /* [2] */
  padding-left: 24px; /* [2] */
}

.page-head--sticky {
  position: sticky;
  top: var(--aura-c-page-head-position-sticky-top, 0);
  z-index: 1071;
  transition: top 0.2s ease-out;
}
.modaal-noscroll .page-head--sticky {
  z-index: 100;
}

/* Decoration variants
   ========================================================================== */
.page-head--border-bottom {
  border-bottom-style: solid;
  border-bottom-width: var(--aura-c-page-head-border-width, 1px);
  border-bottom-color: var(--aura-c-page-head-border-color, #e6e6e7);
}

.page-head--box-shadow {
  box-shadow: var(--aura-c-page-head-shadow, 0 3px 8px 1px rgba(0, 0, 0, 0.2));
}

/* ==========================================================================
   #POPOVER
   ========================================================================== */
/**
 * Requires 'aura-popover.min.js' for accessibility toggles and viewport
 * edge detection.
 */
/** Private framework-only tokens **/
/**
 * 1. Wider popover width for excessive content.
 * 2. Left or right edge position of popover content element when hitting
 *    the edge of the viewport.
 * 3. Tooltips should be small, set max-width that fits within mobile screens.
 */
/* [1] */
/* [3] */
/**
 * Make popover/tooltip visible.
 * 1. Show the popover on click @mobile or :hover above tablet.
 */
/**
 * Popovers
 * @selector .c-popover
 * @restrict [role="dialog"], [role="tooltip"]
 *
 * A non-modal dialog used to display contextual information to the user.
 * The popover stays open while the target element is focused or hovered.
 * The user can interact with a popover and the content can contain
 * focusable elements, such as a link.
 * A unique ID must assigned to the content element and applied to the
 * `aria-describedby` and `aria-controls` attributes.
 *
 * HTML:

    <section aria-describedby="popover_content_id" class="c-popover c-popover--icon c-popover--left" role="dialog">
      <button class="c-popover__target [ js-no-click ]" aria-controls="popover_content_id" aria-expanded="false" aria-label="Get info">
        <svg class="c-svg c-svg--help-circle-border-24" aria-hidden="true" focusable="false">
          <use xlink:href="#c-svg--help-circle-border-24"></use>
        </svg>
      </button>
      <div id="popover_content_id" class="c-popover__content">
        <p>Hello, here's a popover! <a href="#0">Click this link.</a></p>
      </div>
    </section>

 *
 * 1. Reset any defaults on the elemtent used for the popover.
 */
.c-popover {
  --aura-c-popover-color-background: white;
  --aura-c-popover-color-border: #f2f2f2;
  --aura-c-popover-nubbin-size: 16px;
  --aura-c-popover-edge-position: calc(var(--aura-c-popover-nubbin-size) * 2.25);
  --aura-c-popover-offset: calc(var(--aura-c-popover-nubbin-size) + 2px);
  --aura-c-popover-nubbin-size-edges: calc(var(--aura-c-popover-nubbin-size) - 4px);
  --aura-c-popover-nubbin-size-outline-edges: calc(var(--aura-c-popover-nubbin-size) - 3px);
  --aura-c-popover-nubbin-size-outline-tip: calc(var(--aura-c-popover-nubbin-size) + 1px);
  position: relative;
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  margin: 0; /* [1] */
  padding: 0; /* [1] */
  list-style: none; /* [1] */
}
.c-popover.c-popover-open .c-popover__target::before,
.c-popover.c-popover-open .c-popover__target::after,
.c-popover.c-popover-open .c-popover__content {
  display: block;
  opacity: 1; /* [1] */
  visibility: visible; /* [1] */
  will-change: opacity; /* [1] */
}
@media (hover: hover) {
  .c-popover:not(:disabled):not(.is-disabled):not(.c-popover-open):not(.c-popover--tooltip):hover .c-popover__content, .c-popover:not(:disabled):not(.is-disabled):not(.c-popover-open):not(.c-popover--tooltip):focus-within .c-popover__content {
    display: block;
    opacity: 1; /* [1] */
    visibility: visible; /* [1] */
    will-change: opacity; /* [1] */
  }
  .c-popover:not(:disabled):not(.is-disabled):not(.c-popover-open):not(.c-popover--tooltip):hover .c-popover__target::before, .c-popover:not(:disabled):not(.is-disabled):not(.c-popover-open):not(.c-popover--tooltip):hover .c-popover__target::after, .c-popover:not(:disabled):not(.is-disabled):not(.c-popover-open):not(.c-popover--tooltip):hover .c-popover__target:focus::before, .c-popover:not(:disabled):not(.is-disabled):not(.c-popover-open):not(.c-popover--tooltip):hover .c-popover__target:focus::after, .c-popover:not(:disabled):not(.is-disabled):not(.c-popover-open):not(.c-popover--tooltip):focus-within .c-popover__target::before, .c-popover:not(:disabled):not(.is-disabled):not(.c-popover-open):not(.c-popover--tooltip):focus-within .c-popover__target::after, .c-popover:not(:disabled):not(.is-disabled):not(.c-popover-open):not(.c-popover--tooltip):focus-within .c-popover__target:focus::before, .c-popover:not(:disabled):not(.is-disabled):not(.c-popover-open):not(.c-popover--tooltip):focus-within .c-popover__target:focus::after {
    display: block;
    opacity: 1; /* [1] */
    visibility: visible; /* [1] */
    will-change: opacity; /* [1] */
  }
  .c-popover:not(:disabled):not(.is-disabled).c-popover--tooltip .c-popover__target:hover + .c-popover__content, .c-popover:not(:disabled):not(.is-disabled).c-popover--tooltip .c-popover__target:hover::before, .c-popover:not(:disabled):not(.is-disabled).c-popover--tooltip .c-popover__target:hover::after, .c-popover:not(:disabled):not(.is-disabled).c-popover--tooltip .c-popover__target:focus + .c-popover__content, .c-popover:not(:disabled):not(.is-disabled).c-popover--tooltip .c-popover__target:focus::before, .c-popover:not(:disabled):not(.is-disabled).c-popover--tooltip .c-popover__target:focus::after {
    display: block;
    opacity: 1; /* [1] */
    visibility: visible; /* [1] */
    will-change: opacity; /* [1] */
  }
}

/**
 * 1. Reset any defaults which could be inherited on our target element.
 */
.c-popover__target {
  position: relative;
  margin: 0; /* [1] */
  padding: 0; /* [1] */
  appearance: none;
  border: 0;
  background: none;
}
.c-popover__target, .c-popover__target:link, .c-popover__target:visited, .c-popover__target:hover, .c-popover__target:active, .c-popover__target:focus {
  color: var(--aura-c-popover-target-text-color, #006db7);
  text-decoration: none; /* [1] */
}
.c-popover__target:hover, .c-popover__target:focus {
  outline: 0;
  color: var(--aura-c-popover-target-text-color-hover, #00497a);
}
.c-popover__target:focus-visible {
  box-shadow: var(--aura-c-popover-shadow-focus, 0 0 0 3px rgba(0, 109, 183, 0.3));
}
.is-inverse .c-popover__target {
  --aura-c-popover-target-text-color: white;
  --aura-c-popover-target-text-color-hover: rgba(255, 255, 255, 0.75);
}
.c-popover__target::before, .c-popover__target::after {
  position: absolute;
  width: 0;
  height: 0;
  content: "";
  border-width: 0;
  border-style: solid;
  border-color: transparent;
  top: auto;
  right: auto;
  bottom: auto;
  left: auto;
  visibility: hidden;
  opacity: 0;
}
.c-popover__target::before {
  z-index: 102;
}
.c-popover__target::after {
  z-index: 101;
}
@media (max-width: 61.99em) {
  .c-popover__target::before, .c-popover__target::after {
    display: none;
    top: calc(var(--aura-c-popover-offset) * -1);
    left: 50%;
    transform: translate(-50%, -1px);
    animation: aniFadeIn 0.2s ease-in;
  }
  .c-popover__target::before {
    border-top-color: var(--aura-c-popover-color-background);
    border-top-width: var(--aura-c-popover-nubbin-size);
    border-right-width: var(--aura-c-popover-nubbin-size-edges);
    border-left-width: var(--aura-c-popover-nubbin-size-edges);
  }
  .c-popover__target::after {
    border-top-color: var(--aura-c-popover-color-border);
    border-top-width: var(--aura-c-popover-nubbin-size-outline-tip);
    border-left-width: var(--aura-c-popover-nubbin-size-outline-edges);
    border-right-width: var(--aura-c-popover-nubbin-size-outline-edges);
  }
}
@media (min-width: 62em) {
  .c-popover__target::before, .c-popover__target::after {
    transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out, transform 0.2s cubic-bezier(0.71, 1.7, 0.77, 1.24);
  }
}
.c-popover__target:disabled, .c-popover__target.is-disabled, .c-popover__target[disabled], .c-popover__target[disabled=disabled] {
  transition: none;
}
.c-popover__target:disabled, .c-popover__target:disabled:link, .c-popover__target:disabled:visited, .c-popover__target:disabled:hover, .c-popover__target:disabled:active, .c-popover__target:disabled:focus, .c-popover__target.is-disabled, .c-popover__target.is-disabled:link, .c-popover__target.is-disabled:visited, .c-popover__target.is-disabled:hover, .c-popover__target.is-disabled:active, .c-popover__target.is-disabled:focus, .c-popover__target[disabled], .c-popover__target[disabled]:link, .c-popover__target[disabled]:visited, .c-popover__target[disabled]:hover, .c-popover__target[disabled]:active, .c-popover__target[disabled]:focus, .c-popover__target[disabled=disabled], .c-popover__target[disabled=disabled]:link, .c-popover__target[disabled=disabled]:visited, .c-popover__target[disabled=disabled]:hover, .c-popover__target[disabled=disabled]:active, .c-popover__target[disabled=disabled]:focus {
  cursor: default !important;
  box-shadow: none !important;
  opacity: var(--aura-c-button-opacity-disabled, 0.3);
}
.c-popover__target:disabled *, .c-popover__target.is-disabled *, .c-popover__target[disabled] *, .c-popover__target[disabled=disabled] * {
  pointer-events: none;
}

/**
 * The component's close button.
 */
.c-popover__close, .c-popover__close.c-icon-btn {
  position: absolute;
  top: var(--aura-c-popover-close-position-top-mobile, 6px);
  right: var(--aura-c-popover-close-position-right-mobile, 6px);
  cursor: pointer;
  line-height: 0;
  z-index: 100;
}
.c-popover__close.c-icon-btn--close:hover::before, .c-popover__close.c-icon-btn--close:active::before, .c-popover__close.c-icon-btn--close:focus::before, .c-popover__close.c-icon-btn--close:focus-within::before, .c-popover__close.c-icon-btn.c-icon-btn--close:hover::before, .c-popover__close.c-icon-btn.c-icon-btn--close:active::before, .c-popover__close.c-icon-btn.c-icon-btn--close:focus::before, .c-popover__close.c-icon-btn.c-icon-btn--close:focus-within::before {
  background-color: #f2f2f2;
}

/**
 * This is the `popover`.
 *
 * 1. Keep the popover hidden by default.
 * 2. Keep the size of the popover smaller than the screen width on @mobile devices.
 */
.c-popover__content {
  position: absolute;
  top: auto;
  text-align: left;
  color: var(--aura-c-popover-text-color, inherit);
  font-size: 16px;
  font-size: 1rem;
  line-height: 1.5;
  font-weight: var(--aura-c-popover-font-weight, 500);
  background-color: var(--aura-c-popover-color-background);
  border-style: solid;
  border-width: var(--aura-c-popover-border-width, 1px);
  border-color: var(--aura-c-popover-color-border);
  border-radius: var(--aura-c-popover-border-radius, 6px);
  box-shadow: var(--aura-c-popover-shadow, 0px 6px 26px -6px rgba(0, 0, 0, 0.3));
  visibility: hidden; /* [1] */
  opacity: 0; /* [1] */
  z-index: 100;
  /**
   * 1. Default position of the popover is none. A modifier class must be used
   *    to position the popover in the desired direction. [ top, right, bottom, left ]
   */
}
@media (max-width: 47.99em) {
  .c-popover__content {
    width: 80vw; /* [2] */
  }
}
@media (min-width: 48em) {
  .c-popover__content {
    width: var(--aura-c-popover-sizing-width, 354px); /* [2] */
  }
}
@media (max-width: 61.99em) {
  .c-popover__content {
    left: 50%;
    bottom: 100%;
    display: none; /* [1] */
    padding-top: var(--aura-c-popover-padding-block-start-mobile, 12px);
    padding-right: var(--aura-c-popover-padding-inline-start-mobile, 36px);
    padding-bottom: var(--aura-c-popover-padding-block-end-mobile, 12px);
    padding-left: var(--aura-c-popover-padding-inline-end-mobile, 12px);
    animation: aniFadeIn 0.2s ease-in;
    transform: translate(-50%, calc(var(--aura-c-popover-offset) * -1));
  }
  .c-popover__content:not(.c-popover--tooltip .c-popover__content):not(:focus-within) {
    --aura-c-popover-color-background: #fffffe;
    transition: background-color 0.01s ease;
  }
}
@media (min-width: 62em) {
  .c-popover__content {
    right: auto; /* [1] */
    bottom: auto; /* [1] */
    left: auto; /* [1] */
    display: block;
    padding-top: var(--aura-c-popover-padding-block-start, 36px);
    padding-right: var(--aura-c-popover-padding-inline-start, 48px);
    padding-bottom: var(--aura-c-popover-padding-block-end, 36px);
    padding-left: var(--aura-c-popover-padding-inline-end, 48px);
    transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out, transform 0.2s cubic-bezier(0.71, 1.7, 0.77, 1.24);
  }
}
.c-popover__content a, .c-popover__content a:link, .c-popover__content a:visited, .c-popover__content a:hover, .c-popover__content a:active, .c-popover__content a:focus {
  color: var(--aura-c-popover-content-link-color, #006db7);
}
.c-popover__content a:hover, .c-popover__content a:focus {
  color: var(--aura-c-popover-content-link-color-hover, #00497a);
  text-decoration: underline;
}
.c-popover__content,
.c-popover__content > *:last-child {
  margin-bottom: 0;
}

.c-popover.no-nubbin .c-popover__target::before, .c-popover.c-popover--icon.c-popover--tooltip .c-popover__target::before, .c-popover.no-nubbin .c-popover__target::after, .c-popover.c-popover--icon.c-popover--tooltip .c-popover__target::after {
  border: none;
  border-width: 0;
  border-color: transparent;
}

/* Type variants
   ========================================================================== */
/**
 * Use an icon to trigger a popover.
 * HTML:

    <section aria-describedby="pop_unique_id" class="c-popover c-popover--icon c-popover--top" role="dialog">
      <button class="c-popover__target [ js-no-click ]" aria-controls="pop_unique_id9" aria-expanded="false" aria-label="Get info">
        <svg class="c-svg c-svg--help-circle-outline-24" aria-hidden="true" focusable="false"><use xlink:href="#c-svg--help-circle-outline-24"></use></svg>
        <span class="u-sr-only">Get info</span>
      </button>
      <div id="pop_unique_id" class="c-popover__content">
        <p>Hello, here's a bottom popover.<br /><a href="#0">Click this link.</a></p>
      </div>
    </section>

 *
 */
.c-popover--icon {
  --aura-c-popover-icon-size: 24px;
  display: inline-block;
}
.c-form-field__icon .c-popover--icon {
  --aura-c-popover-icon-size: 24px;
}

.c-popover--icon .c-popover__target {
  position: relative;
  display: block;
  width: var(--aura-c-popover-icon-size);
  height: var(--aura-c-popover-icon-size);
  line-height: 0;
}
.c-popover--icon .c-popover__target:not(.c-svg-hover-swap) .c-svg {
  top: 0;
  width: 100%;
  height: 100%;
  color: var(--aura-c-popover-icon-text-color, #6d6d6d);
  transition: color 0.2s ease-out;
}
.c-popover--icon .c-popover__target:not(.c-svg-hover-swap) .c-svg:hover, .c-popover--icon .c-popover__target:not(.c-svg-hover-swap) .c-svg:focus {
  color: var(--aura-c-popover-icon-text-color-hover, black);
}
.is-inverse.c-popover--icon .c-popover__target:not(.c-svg-hover-swap) .c-svg {
  --aura-c-popover-icon-text-color: white;
  --aura-c-popover-icon-text-color-hover: rgba(255, 255, 255, 0.75);
}

.c-popover--icon.has-large-icon {
  --aura-c-popover-icon-size: 32px;
}
.is-text-flow .c-popover--icon .c-popover__target:not(.c-svg-hover-swap) .c-svg {
  top: 0.25em;
}
.is-text-flow .c-popover--icon .c-popover__content {
  margin-top: 0.25em;
}
/* Adding hint popover to form label.

  HTML:

    <label class="c-form-field__label" for="input id">
      Label text
      <span class="is-inline-popover">
        <section class="c-popover ...">
          [...]
        </section>
      </span>
    </label>
 */
/* Directional variants
   ========================================================================== */
/* Top side popovers */
@media (min-width: 62em) {
  .c-popover--top .c-popover__content {
    bottom: 100%;
    left: 50%;
    transform: translate(-50%, 0);
  }
  .c-popover--top:hover .c-popover__content, .c-popover--top:focus-within .c-popover__content {
    transform: translate(-50%, calc(var(--aura-c-popover-offset) * -1));
  }
}

@media (min-width: 62em) {
  .c-popover.left-edge .c-popover__content,
  .c-popover--top-start .c-popover__content {
    right: auto;
    bottom: 100%;
    left: 50%;
    transform: translate(calc(var(--aura-c-popover-edge-position) * -1), 0);
  }
  .c-popover.left-edge:hover .c-popover__content, .c-popover.left-edge:focus-within .c-popover__content,
  .c-popover--top-start:hover .c-popover__content,
  .c-popover--top-start:focus-within .c-popover__content {
    transform: translate(calc(var(--aura-c-popover-edge-position) * -1), calc(var(--aura-c-popover-offset) * -1));
  }
}

@media (min-width: 62em) {
  .c-popover.right-edge .c-popover__content,
  .c-popover--top-end .c-popover__content {
    right: 50%;
    bottom: 100%;
    left: auto;
    transform: translate(var(--aura-c-popover-edge-position), 0);
  }
  .c-popover.right-edge:hover .c-popover__content, .c-popover.right-edge:focus-within .c-popover__content,
  .c-popover--top-end:hover .c-popover__content,
  .c-popover--top-end:focus-within .c-popover__content {
    transform: translate(var(--aura-c-popover-edge-position), calc(var(--aura-c-popover-offset) * -1));
  }
}

@media (min-width: 62em) {
  .c-popover.left-edge .c-popover__target::before, .c-popover.left-edge .c-popover__target::after,
  .c-popover.right-edge .c-popover__target::before,
  .c-popover.right-edge .c-popover__target::after,
  .c-popover--top .c-popover__target::before,
  .c-popover--top .c-popover__target::after,
  .c-popover--top-start .c-popover__target::before,
  .c-popover--top-start .c-popover__target::after,
  .c-popover--top-end .c-popover__target::before,
  .c-popover--top-end .c-popover__target::after {
    top: -1px;
    left: 50%;
    transform: translate(-50%, 0);
  }
  .c-popover.left-edge .c-popover__target::before,
  .c-popover.right-edge .c-popover__target::before,
  .c-popover--top .c-popover__target::before,
  .c-popover--top-start .c-popover__target::before,
  .c-popover--top-end .c-popover__target::before {
    border-top-color: var(--aura-c-popover-color-background);
    border-top-width: var(--aura-c-popover-nubbin-size);
    border-right-width: var(--aura-c-popover-nubbin-size-edges);
    border-left-width: var(--aura-c-popover-nubbin-size-edges);
  }
  .c-popover.left-edge .c-popover__target::after,
  .c-popover.right-edge .c-popover__target::after,
  .c-popover--top .c-popover__target::after,
  .c-popover--top-start .c-popover__target::after,
  .c-popover--top-end .c-popover__target::after {
    border-top-color: var(--aura-c-popover-color-border);
    border-top-width: var(--aura-c-popover-nubbin-size-outline-tip);
    border-left-width: var(--aura-c-popover-nubbin-size-outline-edges);
    border-right-width: var(--aura-c-popover-nubbin-size-outline-edges);
  }
  .c-popover.left-edge:hover .c-popover__target::before, .c-popover.left-edge:hover .c-popover__target::after, .c-popover.left-edge:focus-within .c-popover__target::before, .c-popover.left-edge:focus-within .c-popover__target::after,
  .c-popover.right-edge:hover .c-popover__target::before,
  .c-popover.right-edge:hover .c-popover__target::after,
  .c-popover.right-edge:focus-within .c-popover__target::before,
  .c-popover.right-edge:focus-within .c-popover__target::after,
  .c-popover--top:hover .c-popover__target::before,
  .c-popover--top:hover .c-popover__target::after,
  .c-popover--top:focus-within .c-popover__target::before,
  .c-popover--top:focus-within .c-popover__target::after,
  .c-popover--top-start:hover .c-popover__target::before,
  .c-popover--top-start:hover .c-popover__target::after,
  .c-popover--top-start:focus-within .c-popover__target::before,
  .c-popover--top-start:focus-within .c-popover__target::after,
  .c-popover--top-end:hover .c-popover__target::before,
  .c-popover--top-end:hover .c-popover__target::after,
  .c-popover--top-end:focus-within .c-popover__target::before,
  .c-popover--top-end:focus-within .c-popover__target::after {
    transform: translate(-50%, calc(var(--aura-c-popover-offset) * -1));
  }
}

@media (min-width: 62em) {
  .c-popover--left:not(.left-edge) .c-popover__content {
    top: 50%;
    right: 100%;
    transform: translate(0, -50%);
  }
  .c-popover--left:not(.left-edge) .c-popover__target::before, .c-popover--left:not(.left-edge) .c-popover__target::after {
    top: 50%;
    left: -1px;
    transform: translate(0, -50%);
  }
  .c-popover--left:not(.left-edge) .c-popover__target::before {
    border-top-width: var(--aura-c-popover-nubbin-size-edges);
    border-bottom-width: var(--aura-c-popover-nubbin-size-edges);
    border-left-width: var(--aura-c-popover-nubbin-size);
    border-left-color: var(--aura-c-popover-color-background);
  }
  .c-popover--left:not(.left-edge) .c-popover__target::after {
    border-top-width: var(--aura-c-popover-nubbin-size-outline-edges);
    border-bottom-width: var(--aura-c-popover-nubbin-size-outline-edges);
    border-left-width: var(--aura-c-popover-nubbin-size-outline-tip);
    border-left-color: var(--aura-c-popover-color-border);
  }
  .c-popover--left:not(.left-edge):hover .c-popover__content,
  .c-popover--left:not(.left-edge):hover .c-popover__target::before,
  .c-popover--left:not(.left-edge):hover .c-popover__target::after, .c-popover--left:not(.left-edge):focus-within .c-popover__content,
  .c-popover--left:not(.left-edge):focus-within .c-popover__target::before,
  .c-popover--left:not(.left-edge):focus-within .c-popover__target::after {
    transform: translate(calc(var(--aura-c-popover-offset) * -1), -50%);
  }
}

@media (min-width: 62em) {
  .c-popover--right:not(.right-edge) .c-popover__content {
    top: 50%;
    left: 100%;
    transform: translate(0, -50%);
  }
  .c-popover--right:not(.right-edge) .c-popover__target::before, .c-popover--right:not(.right-edge) .c-popover__target::after {
    top: 50%;
    right: -1px;
    transform: translate(0, -50%);
  }
  .c-popover--right:not(.right-edge) .c-popover__target::before {
    border-top-width: var(--aura-c-popover-nubbin-size-edges);
    border-right-width: var(--aura-c-popover-nubbin-size);
    border-bottom-width: var(--aura-c-popover-nubbin-size-edges);
    border-right-color: var(--aura-c-popover-color-background);
  }
  .c-popover--right:not(.right-edge) .c-popover__target::after {
    border-top-width: var(--aura-c-popover-nubbin-size-outline-edges);
    border-right-width: var(--aura-c-popover-nubbin-size-outline-tip);
    border-bottom-width: var(--aura-c-popover-nubbin-size-outline-edges);
    border-right-color: var(--aura-c-popover-color-border);
  }
  .c-popover--right:not(.right-edge):hover .c-popover__content,
  .c-popover--right:not(.right-edge):hover .c-popover__target::before,
  .c-popover--right:not(.right-edge):hover .c-popover__target::after, .c-popover--right:not(.right-edge):focus-within .c-popover__content,
  .c-popover--right:not(.right-edge):focus-within .c-popover__target::before,
  .c-popover--right:not(.right-edge):focus-within .c-popover__target::after {
    transform: translate(var(--aura-c-popover-offset), -50%);
  }
}

/* Bottom side popovers */
@media (min-width: 62em) {
  .c-popover--bottom:not(.left-edge):not(.right-edge) .c-popover__content {
    top: 100%;
    left: 50%;
    transform: translate(-50%, 0);
  }
  .c-popover--bottom:not(.left-edge):not(.right-edge):hover .c-popover__content, .c-popover--bottom:not(.left-edge):not(.right-edge):focus-within .c-popover__content {
    transform: translate(-50%, var(--aura-c-popover-offset));
  }
}

@media (min-width: 62em) {
  .c-popover--bottom-start:not(.left-edge):not(.right-edge) .c-popover__content {
    top: 100%;
    left: 50%;
    transform: translate(calc(var(--aura-c-popover-edge-position) * -1), 0);
  }
  .c-popover--bottom-start:not(.left-edge):not(.right-edge):hover .c-popover__content, .c-popover--bottom-start:not(.left-edge):not(.right-edge):focus-within .c-popover__content {
    transform: translate(calc(var(--aura-c-popover-edge-position) * -1), var(--aura-c-popover-offset));
  }
}

@media (min-width: 62em) {
  .c-popover--bottom-end:not(.left-edge):not(.right-edge) .c-popover__content {
    top: 100%;
    right: 50%;
    transform: translate(var(--aura-c-popover-edge-position), 0);
  }
  .c-popover--bottom-end:not(.left-edge):not(.right-edge):hover .c-popover__content, .c-popover--bottom-end:not(.left-edge):not(.right-edge):focus-within .c-popover__content {
    transform: translate(var(--aura-c-popover-edge-position), var(--aura-c-popover-offset));
  }
}

@media (min-width: 62em) {
  .c-popover--bottom:not(.left-edge):not(.right-edge) .c-popover__target::before, .c-popover--bottom:not(.left-edge):not(.right-edge) .c-popover__target::after,
  .c-popover--bottom-start:not(.left-edge):not(.right-edge) .c-popover__target::before,
  .c-popover--bottom-start:not(.left-edge):not(.right-edge) .c-popover__target::after,
  .c-popover--bottom-end:not(.left-edge):not(.right-edge) .c-popover__target::before,
  .c-popover--bottom-end:not(.left-edge):not(.right-edge) .c-popover__target::after {
    bottom: -1px;
    left: 50%;
    transform: translate(-50%, 0);
  }
  .c-popover--bottom:not(.left-edge):not(.right-edge) .c-popover__target::before,
  .c-popover--bottom-start:not(.left-edge):not(.right-edge) .c-popover__target::before,
  .c-popover--bottom-end:not(.left-edge):not(.right-edge) .c-popover__target::before {
    border-right-width: var(--aura-c-popover-nubbin-size-edges);
    border-bottom-width: var(--aura-c-popover-nubbin-size);
    border-left-width: var(--aura-c-popover-nubbin-size-edges);
    border-bottom-color: var(--aura-c-popover-color-background);
  }
  .c-popover--bottom:not(.left-edge):not(.right-edge) .c-popover__target::after,
  .c-popover--bottom-start:not(.left-edge):not(.right-edge) .c-popover__target::after,
  .c-popover--bottom-end:not(.left-edge):not(.right-edge) .c-popover__target::after {
    border-right-width: var(--aura-c-popover-nubbin-size-outline-edges);
    border-bottom-width: var(--aura-c-popover-nubbin-size-outline-tip);
    border-left-width: var(--aura-c-popover-nubbin-size-outline-edges);
    border-bottom-color: var(--aura-c-popover-color-border);
  }
  .c-popover--bottom:not(.left-edge):not(.right-edge):hover .c-popover__target::before, .c-popover--bottom:not(.left-edge):not(.right-edge):hover .c-popover__target::after, .c-popover--bottom:not(.left-edge):not(.right-edge):focus-within .c-popover__target::before, .c-popover--bottom:not(.left-edge):not(.right-edge):focus-within .c-popover__target::after,
  .c-popover--bottom-start:not(.left-edge):not(.right-edge):hover .c-popover__target::before,
  .c-popover--bottom-start:not(.left-edge):not(.right-edge):hover .c-popover__target::after,
  .c-popover--bottom-start:not(.left-edge):not(.right-edge):focus-within .c-popover__target::before,
  .c-popover--bottom-start:not(.left-edge):not(.right-edge):focus-within .c-popover__target::after,
  .c-popover--bottom-end:not(.left-edge):not(.right-edge):hover .c-popover__target::before,
  .c-popover--bottom-end:not(.left-edge):not(.right-edge):hover .c-popover__target::after,
  .c-popover--bottom-end:not(.left-edge):not(.right-edge):focus-within .c-popover__target::before,
  .c-popover--bottom-end:not(.left-edge):not(.right-edge):focus-within .c-popover__target::after {
    transform: translate(-50%, var(--aura-c-popover-offset));
  }
}

/* Style variants
   ========================================================================== */
.c-popover--dark {
  --aura-c-popover-color-background: var(--aura-c-popover-dark-color-background, #212935);
  --aura-c-popover-color-border: var(--aura-c-popover-dark-color-border, rgba(255, 255, 255, 0.2));
}
.c-popover--dark .c-popover__content {
  --aura-c-popover-text-color: var(--aura-c-popover-dark-text-color, rgba(255, 255, 255, 0.8));
}

@media (min-width: 62em) {
  .c-popover--wide .c-popover__content {
    --aura-c-popover-sizing-width: var(--aura-c-popover-width-wide, 444px);
  }
}

/**
 * Tooltip markup has some slight variations from the regular popover component.
 * HTML:

    <section class="c-popover c-popover--top c-popover--tooltip">
      <button class="c-popover__target [ js-no-click ]" aria-describedby="tooltip_id" aria-controls="tooltip_id" aria-disabled="true" aria-expanded="false" aria-label="Get info">
        Get info
      </button>
      <div id="tooltip_id" class="c-popover__content" role="tooltip">
        <div class="c-tooltip__body">
          <p>Hello, here's a tooltip!</p>
        </div>
      </div>
    </section>

    Icon trigger:

    <section class="c-popover c-popover--top c-popover--icon c-popover--tooltip">
      <button class="c-popover__target [ js-no-click ]" aria-describedby="tooltip_id" aria-controls="tooltip_id" aria-disabled="true" aria-expanded="false" aria-label="Get info">
        <svg class="c-svg c-svg--help-circle-outline-24" aria-hidden="true" focusable="false"><use xlink:href="#c-svg--help-circle-outline-24"></use></svg>
        <span class="u-sr-only">Get info</span>
      </button>
      <div id="tooltip_id" class="c-popover__content" role="tooltip">
        <div class="c-tooltip__body">
          <p>Hello, here's a tooltip!</p>
        </div>
      </div>
    </section>

 */
.c-popover--tooltip {
  --aura-c-popover-nubbin-size: 9px;
  --aura-c-popover-offset: calc(var(--aura-c-popover-nubbin-size) * 2);
  --aura-c-popover-nubbin-size-edges: calc(var(--aura-c-popover-nubbin-size) - 2px);
  --aura-c-popover-nubbin-size-outline-edges: calc(var(--aura-c-popover-nubbin-size) - 1px);
  --aura-c-popover-nubbin-size-outline-tip: var(--aura-c-popover-nubbin-size);
  --aura-c-popover-border-radius: 3px;
}
.c-popover--tooltip:not(.is-inverse) {
  --aura-c-popover-color-background: #424243;
  --aura-c-popover-color-border: var(--aura-c-popover-color-background);
  --aura-c-popover-text-color: #d9d8d5;
}
.c-popover--tooltip:not(.is-inverse) .c-popover__content {
  --aura-c-popover-shadow: 0px 3px 12px -1px rgba(0, 0, 0, 0.6);
}
.c-popover--tooltip .c-popover__target {
  cursor: pointer;
}
.c-popover--tooltip .c-popover__content {
  width: max-content;
  max-width: var(--aura-c-tooltip-max-width, 80vw);
  padding-top: var(--aura-c-tooltip-padding-block-start, 6px);
  padding-right: var(--aura-c-tooltip-padding-inline-start, 12px);
  padding-bottom: var(--aura-c-tooltip-padding-block-end, 6px);
  padding-left: var(--aura-c-tooltip-padding-inline-end, 12px);
  font-size: 14px;
  font-size: 0.875rem;
  line-height: 1.5;
  text-align: center;
}
@media (min-width: 23.4375em) {
  .c-popover--tooltip .c-popover__content {
    --aura-c-tooltip-max-width: 300px;
  }
}
@media (min-width: 48em) {
  .c-popover--tooltip .c-popover__content {
    --aura-c-tooltip-max-width: 450px;
  }
}
@media (min-width: 48em) {
  .c-popover--tooltip:not(.c-popover--icon) .c-popover__content {
    --aura-c-tooltip-padding-block-start: 16px;
    --aura-c-tooltip-padding-inline-start: 24px;
    --aura-c-tooltip-padding-block-end: 16px;
    --aura-c-tooltip-padding-inline-end: 24px;
  }
}

.c-tooltip__body {
  position: relative;
  overflow-wrap: break-word;
  word-wrap: break-word;
}
.c-tooltip__body,
.c-tooltip__body > *:last-child {
  margin-bottom: 0;
}

/* ==========================================================================
   #PROGRESS
   ========================================================================== */
/** Private framework-only tokens **/
/**
 * A progress bar for showing `progress`.
 *
 * HTML:

    <div class="c-progress">
      <div class="c-progress__bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
    </div>

 *
 * 1. Force rounded corners by cropping it.
 * 2. In case we display the value within the progress bar. e.g.: '25%'
 */
.c-progress {
  position: relative; /* OLD - iOS 6-, Safari 3.1-6, BB7 */ /* TWEENER - IE 10 */ /* NEW - Safari 6.1+. iOS 7.1+, BB10 */
  display: flex; /* NEW, Spec - Firefox, Chrome, Opera */
  height: var(--aura-progress-bar-height, 8px);
  overflow: hidden; /* [1] */
  font-size: 12px;
  font-size: 0.75rem;
  line-height: 1.5;
  /* [2] */
  font-weight: var(--aura-progress-bar-font-weight, 500);
  background-color: var(--aura-progress-bar-color-background, #e6e6e7);
  border-radius: var(--aura-progress-bar-border-radius, 15rem);
  box-shadow: var(--aura-progress-bar-shadow, inset 0 0.1rem 0.1rem rgba(0, 0, 0, 0.1));
}

.c-progress__bar { /* OLD - iOS 6-, Safari 3.1-6, BB7 */ /* TWEENER - IE 10 */ /* NEW - Safari 6.1+. iOS 7.1+, BB10 */
  display: flex; /* NEW, Spec - Firefox, Chrome, Opera */
  /* Your grandparents flexbox for Webkit */
  /* Prefixed new syntax: */
  /* Same syntax for weird IE tweener */
  /* unprefixed new syntax */
  flex-direction: column;
  justify-content: center;
  color: var(--aura-c-progress-bar-text-color, white);
  text-align: center;
  background-color: var(--aura-c-progress-bar-color-fill, #006db7);
  border-radius: var(--aura-c-progress-bar-border-radius, 15rem);
  transition: width 0.4s ease;
}

/* Variants
========================================================================== */
/** Progress stepper
 *
 * HTML:

    <div class="c-progress-step-indicator" aria-label="progress">
      <ol id="demoProgressStepper" class="c-progress c-progress--stepper">
        <li class="c-progress__bar" data-step="1" data-state="is-completed">
          <span class="u-sr-only">Step 1 of 5: Completed</span>
        </li>
        <li class="c-progress__bar" data-step="2" data-state="is-current" aria-current="step">
          <span class="u-sr-only">Step 2 of 5: Summary text explaining this step to the user</span>
        </li>
        <li class="c-progress__bar" data-step="3" data-state="">
          <span class="u-sr-only">Step 3 of 5: Not completed</span>
        </li>
        <li class="c-progress__bar" data-step="4" data-state="">
          <span class="u-sr-only">Step 4 of 5: Not completed</span>
        </li>
        <li class="c-progress__bar" data-step="5" data-state="">
          <span class="u-sr-only">Step 5 of 5: Not completed</span>
        </li>
      </ol>
    </div>

 */
.c-progress--stepper {
  list-style: none;
  margin: 0;
  padding: 0;
  justify-content: center;
  background-color: transparent;
  border-radius: 0;
  box-shadow: none;
}
.c-progress--stepper .c-progress__bar {
  width: 20%;
  max-width: var(--aura-c-progress-bar-stepper-max-width, 32px);
  margin: 0 var(--aura-c-progress-bar-stepper-margin-inline, 6px);
  background-color: var(--aura-progress-bar-color-background, #e6e6e7);
  box-shadow: var(--aura-progress-bar-shadow, inset 0 0.1rem 0.1rem rgba(0, 0, 0, 0.1));
}
.c-progress--stepper .c-progress__bar[data-state=is-current], .c-progress--stepper .c-progress__bar[data-state=is-completed] {
  background-color: var(--aura-c-progress-bar-color-fill, #006db7);
  box-shadow: none;
}

.c-progress__step-link {
  display: block;
  width: 100%;
  height: 100%;
}
.c-progress__step-link, .c-progress__step-link:link, .c-progress__step-link:visited, .c-progress__step-link:hover, .c-progress__step-link:active, .c-progress__step-link:focus {
  text-decoration: none;
}

/* Style variants
========================================================================== */
.c-progress--blunt,
.c-progress--blunt .c-progress__bar {
  --aura-progress-bar-border-radius: 0;
}

/* Colors
========================================================================== */
/* ==========================================================================
   #SITENAV
   ========================================================================== */
/* ==========================================================================
   #SITENAV
   ========================================================================== */
/**
 * Site navigation
 * @selector .site-nav
 * @restrict nav [role="navigation"]
 *
 * Navigation control for any type of site navigation. Use modifier classes for
 * Main, Tabs, or Stacked navigation.
 */
.site-nav {
  position: relative;
}
.site-nav::after {
  content: "";
  display: table;
  clear: both;
}

.site-nav__branding { /* OLD - iOS 6-, Safari 3.1-6, BB7 */ /* TWEENER - IE 10 */ /* NEW - Safari 6.1+. iOS 7.1+, BB10 */
  display: flex; /* NEW, Spec - Firefox, Chrome, Opera */
  margin: 0;
  margin-right: var(--aura-c-site-nav-branding-spacing-inline, 24px);
  flex-grow: var(--aura-c-site-nav-branding-flex-grow, 1);
  align-items: var(--aura-c-site-nav-align-items, center);
}
.site-nav__branding::after {
  content: "";
  display: table;
  clear: both;
}

.site-nav__home-link { /* OLD - iOS 6-, Safari 3.1-6, BB7 */ /* TWEENER - IE 10 */ /* NEW - Safari 6.1+. iOS 7.1+, BB10 */
  display: flex; /* NEW, Spec - Firefox, Chrome, Opera */
  align-items: var(--aura-c-site-nav-align-items, center);
}
.site-nav__home-link, .site-nav__home-link:link, .site-nav__home-link:visited, .site-nav__home-link:hover, .site-nav__home-link:active, .site-nav__home-link:focus {
  color: var(--aura-c-site-nav-text-color-link, white);
  text-decoration: none;
}
.site-nav__home-link + .site-nav__home-link {
  margin-left: var(--aura-c-site-nav-logo-spacing-inline-mobile, 12px);
}
@media (min-width: 48em) {
  .site-nav__home-link + .site-nav__home-link {
    margin-left: var(--aura-c-site-nav-logo-spacing-inline, 24px);
  }
}

.site-nav__logo {
  display: inline-block;
}
.site-nav__logo .site-nav__title {
  position: relative;
  margin: 0;
  font-size: 20px;
  font-size: 1.25rem;
  line-height: 80px;
  font-weight: var(--aura-c-site-nav-title-font-weight, 500);
  color: var(--aura-c-site-nav-text-color-link, white);
}
.site-nav__logo .site-nav__title.show-divider::before {
  position: absolute;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  left: calc(var(--aura-c-site-nav-logo-spacing-inline-mobile, 12px)/2 * -1);
  width: var(--aura-border-width-thin, 1px);
  height: 50%;
  border-left: var(--aura-border-width-thin, 1px) solid var(--aura-c-site-nav-text-color-link, white);
  content: "";
  opacity: 0.87;
}
@media (min-width: 48em) {
  .site-nav__logo .site-nav__title.show-divider::before {
    left: calc(var(--aura-c-site-nav-logo-spacing-inline, 24px)/2 * -1);
  }
}
.site-nav__logo + .site-nav__logo {
  margin-left: var(--aura-c-site-nav-logo-spacing-inline-mobile, 12px);
}
@media (min-width: 48em) {
  .site-nav__logo + .site-nav__logo {
    margin-left: var(--aura-c-site-nav-logo-spacing-inline, 24px);
  }
}

/**
 * The mobile menu toggle
 * 1. Mobile menu icon - hamburger
 * 2. Hide it from non-mobile screens
 */
.site-nav__open {
  position: absolute;
  display: block;
  top: 50%;
  right: 0;
  width: 30px;
  height: 25px;
  transform: translateY(-50%);
}
@media (min-width: 48em) {
  .site-nav__open {
    display: none; /* [2] */
  }
}
.site-nav__open span {
  display: block;
  position: absolute;
  left: 0;
  height: 2px;
  width: 100%;
  background: var(--aura-c-site-nav-mobile-toggle-color, white);
  border-radius: 0;
  opacity: 1;
  transform: rotate(0deg);
  transition: 0.25s ease-in-out;
}
.site-nav__open span:nth-child(1) {
  top: 0px;
  transform-origin: left center;
}
.site-nav__open span:nth-child(2) {
  top: 10px;
  transform-origin: left center;
}
.site-nav__open span:nth-child(3) {
  top: 20px;
  transform-origin: left center;
}
.site-nav__open:target span:nth-child(1) {
  transform: rotate(45deg);
  top: 10px;
  left: 0px;
}
.site-nav__open:target span:nth-child(2) {
  width: 0%;
  opacity: 0;
}
.site-nav__open:target span:nth-child(3) {
  transform: rotate(-45deg);
  top: 10px;
  left: 0px;
}

.site-nav__target {
  position: fixed;
  top: 0;
  left: 0;
}
.site-nav__target:target + .site-nav__list {
  transform: none;
}

.site-nav__list {
  position: relative;
  margin: 0;
  padding: 0;
  list-style: none;
}
.site-nav__list::after {
  content: "";
  display: table;
  clear: both;
}

@media (min-width: 48em) {
  .site-nav__item {
    position: relative;
    text-align: center;
    height: 100%;
  }
}

.site-nav__link {
  position: relative;
  display: block;
  font-weight: var(--aura-c-font-weight-site-nav, 500);
}
.site-nav__link, .site-nav__link:link, .site-nav__link:visited, .site-nav__link:hover, .site-nav__link:active, .site-nav__link:focus {
  text-decoration: none;
}

.site-nav__item--close {
  text-align: right;
}

.site-nav__close {
  display: inline-block;
  line-height: 0;
}
.site-nav__close, .site-nav__close:hover, .site-nav__close:focus {
  text-decoration: none;
}
.site-nav__close .c-svg {
  top: 0;
  width: var(--aura-c-site-nav-close-button-sizing, 24px);
  height: var(--aura-c-site-nav-close-button-sizing, 24px);
}

@media (min-width: 48em) {
  .site-nav__close,
  .site-nav__item--close {
    display: none;
  }
}

.site-nav__sub-menu {
  list-style: none;
  margin-left: 0;
  margin-bottom: 0;
}
@media (max-width: 47.99em) {
  .site-nav__sub-menu {
    margin-bottom: 12px;
  }
}
@media (min-width: 48em) {
  .site-nav__sub-menu {
    position: absolute;
    top: 100%;
    left: var(--aura-c-site-nav-submenu-left-position, -3px);
    transform: translateY(-18px);
    z-index: 1;
    width: auto;
    min-width: 160px;
    max-width: 260px;
    padding: 6px 0;
    text-align: left;
    background-color: var(--aura-c-site-nav-submenu-color-background, white);
    border-radius: var(--aura-c-site-nav-submenu-border-radius, 3px);
    border: var(--aura-border-width-thin, 1px) solid #f2f2f2;
    box-shadow: var(--aura-site-nav-submenu-shadow, 0 1px 16px -3px rgba(0, 0, 0, 0.3));
    visibility: hidden;
    opacity: 0;
    transition: all 0.2s ease-in-out;
  }
  .site-nav__item:hover .site-nav__sub-menu {
    opacity: 1;
    visibility: visible;
    will-change: opacity;
    transform: translateY(-6px);
  }
}

.site-nav__sub-link {
  display: block;
  padding: var(--aura-c-site-nav-submenu-padding-block-mobile, 6px) var(--aura-c-site-nav-submenu-padding-inline-mobile, 12px);
  font-weight: var(--aura-font-weight-site-nav, 500);
  transition: background-color 0.2s ease-out;
}
@media (max-width: 47.99em) {
  .site-nav__sub-link {
    font-size: 14px;
    font-size: 0.875rem;
    line-height: 1.7142857143;
  }
}
.site-nav__sub-link, .site-nav__sub-link:link, .site-nav__sub-link:visited {
  color: var(--aura-c-site-nav-text-color-link-mobile, #424243);
}
.site-nav__sub-link:hover, .site-nav__sub-link:active, .site-nav__sub-link:focus {
  color: var(--aura-c-site-nav-text-color-active-mobile, black);
  text-decoration: none;
}
@media (min-width: 48em) {
  .site-nav__sub-link {
    padding: var(--aura-c-site-nav-submenu-padding-block, 12px) var(--aura-c-site-nav-submenu-padding-inline, 12px);
  }
  .site-nav__sub-link, .site-nav__sub-link:link, .site-nav__sub-link:visited {
    color: var(--aura-c-site-nav-submenu-text-color-link, #424243);
  }
  .site-nav__sub-link:hover, .site-nav__sub-link:active, .site-nav__sub-link:focus {
    color: var(--aura-c-site-nav-submenu-text-color-hover, black);
    background-color: var(--aura-c-site-nav-submenu-color-background-hover, #f2f2f2);
  }
}

/* Nav type modifiers.
   ========================================================================== */
.site-nav--main { /* OLD - iOS 6-, Safari 3.1-6, BB7 */ /* TWEENER - IE 10 */ /* NEW - Safari 6.1+. iOS 7.1+, BB10 */
  display: flex; /* NEW, Spec - Firefox, Chrome, Opera */
  align-items: var(--aura-c-site-nav-align-items, center);
  line-height: 0;
  --aura-site-nav-sub-menu-icon: url("data:image/svg+xml, %3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='%23FFFFFF' d='M21.192 7.050c0.39 0.39 0.39 1.024 0 1.414l-8.485 8.485c-0.39 0.39-1.024 0.39-1.414 0l-8.485-8.485c-0.39-0.39-0.39-1.024 0-1.414s1.024-0.39 1.414 0l7.778 7.778 7.778-7.778c0.39-0.39 1.024-0.39 1.414 0z'/%3E%3C/svg%3E");
  --aura-site-nav-sub-menu-icon-hover: url("data:image/svg+xml, %3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='%23FFFFFF' d='M21.192 7.050c0.39 0.39 0.39 1.024 0 1.414l-8.485 8.485c-0.39 0.39-1.024 0.39-1.414 0l-8.485-8.485c-0.39-0.39-0.39-1.024 0-1.414s1.024-0.39 1.414 0l7.778 7.778 7.778-7.778c0.39-0.39 1.024-0.39 1.414 0z'/%3E%3C/svg%3E");
}
@media (min-width: 48em) {
  .site-nav--main {
    height: var(--aura-c-site-nav-min-height, 80px);
  }
}
.site-nav--main .site-nav__list {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  transform: translateX(100%);
  transition: 0.2s;
  will-change: transform;
  background-color: var(--aura-c-site-nav-color-background-mobile, white);
  line-height: normal;
  z-index: 99998;
}
@media (max-width: 47.99em) {
  .site-nav--main .site-nav__list {
    overflow-y: scroll;
  }
}
.show-mobile-nav.site-nav--main .site-nav__list {
  transform: none;
}

@media (min-width: 48em) {
  .site-nav--main .site-nav__list { /* OLD - iOS 6-, Safari 3.1-6, BB7 */ /* TWEENER - IE 10 */ /* NEW - Safari 6.1+. iOS 7.1+, BB10 */
    display: flex; /* NEW, Spec - Firefox, Chrome, Opera */
    position: relative;
    top: auto;
    right: auto;
    bottom: auto;
    left: auto;
    height: var(--aura-c-site-nav-min-height, 80px);
    background-color: transparent;
    overflow: visible;
    -webkit-backdrop-filter: none;
            backdrop-filter: none;
    transform: none;
    z-index: 10;
    flex-grow: var(--aura-c-site-nav-list-flex-grow, 1);
  }
}
@media (min-width: 48em) {
  .site-nav--main .site-nav__item {
    margin-left: var(--aura-c-site-nav-link-margin-inline-tablet, 12px);
    padding: 0;
  }
  .site-nav--main .site-nav__item.site-nav--first-link {
    margin-left: 0;
  }
  .site-nav--main .site-nav__item:hover > .site-nav__link.has-sub-menu, .site-nav--main .site-nav__item:focus > .site-nav__link.has-sub-menu {
    color: var(--aura-c-site-nav-text-color-hover, white);
    background-color: var(--aura-c-site-nav-color-background-hover, rgba(255, 255, 255, 0.1));
  }
  .site-nav--main .site-nav__item:hover > .site-nav__link.has-sub-menu::after, .site-nav--main .site-nav__item:focus > .site-nav__link.has-sub-menu::after {
    content: "";
    background-image: var(--aura-site-nav-sub-menu-icon-hover);
    background-repeat: no-repeat;
    background-size: cover;
  }
}
@media (min-width: 62em) {
  .site-nav--main .site-nav__item {
    margin-left: var(--aura-c-site-nav-link-margin-inline-desktop, 12px);
  }
}
.site-nav--main .site-nav__link {
  padding: var(--aura-c-site-nav-padding-mobile, 12px);
}
.site-nav--main .site-nav__link, .site-nav--main .site-nav__link:link, .site-nav--main .site-nav__link:visited, .site-nav--main .site-nav__link:hover, .site-nav--main .site-nav__link:active, .site-nav--main .site-nav__link:focus {
  color: var(--aura-c-site-nav-text-color-link-mobile, #424243);
}
.site-nav--main .site-nav__link:hover, .site-nav--main .site-nav__link:active, .site-nav--main .site-nav__link:focus {
  color: var(--aura-c-site-nav-text-color-active-mobile, black);
  background-color: transparent;
}
.site-nav--main .site-nav__link.site-nav__close:hover, .site-nav--main .site-nav__link.site-nav__close:active, .site-nav--main .site-nav__link.site-nav__close:focus {
  background-color: transparent;
}
.site-nav--main .site-nav__link.is-mobile-username {
  font-size: 20px;
  font-size: 1.25rem;
  line-height: 1.5;
  color: var(--aura-c-site-nav-username-text-color-mobile, #006db7);
  font-weight: var(--aura-c-site-nav-username-font-weight-mobile, 300);
}
.site-nav--main .site-nav__link.is-icon-only .c-svg {
  width: var(--aura-c-site-nav-icon-size, 24px);
  height: var(--aura-c-site-nav-icon-size, 24px);
}
.site-nav--main .site-nav__link.has-sub-menu::before {
  display: none;
}
@media (max-width: 47.99em) {
  .site-nav--main .site-nav__link:not(.site-nav__close) {
    text-align: center;
  }
}
@media (min-width: 48em) {
  .site-nav--main .site-nav__link { /* OLD - iOS 6-, Safari 3.1-6, BB7 */ /* TWEENER - IE 10 */ /* NEW - Safari 6.1+. iOS 7.1+, BB10 */
    display: flex; /* NEW, Spec - Firefox, Chrome, Opera */
    height: 100%;
    padding: var(--aura-c-site-nav-padding-block, 0) var(--aura-c-site-nav-padding-inline, 24px);
    background-color: transparent;
    align-items: center;
    transition: background-color 0.2s ease-out;
    font-size: 16px;
    font-size: 1rem;
    line-height: 1.5;
  }
  .site-nav--main .site-nav__link, .site-nav--main .site-nav__link:link, .site-nav--main .site-nav__link:visited {
    color: var(--aura-c-site-nav-text-color-link, white);
  }
  .site-nav--main .site-nav__link:hover, .site-nav--main .site-nav__link:active, .site-nav--main .site-nav__link:focus {
    color: var(--aura-c-site-nav-text-color-hover, white);
    background-color: var(--aura-c-site-nav-color-background-hover, rgba(255, 255, 255, 0.1));
  }
  .site-nav--main .site-nav__link.has-sub-menu::after {
    display: inherit;
    width: var(--aura-ddlb-arrow-icon-size, 16px);
    height: var(--aura-ddlb-arrow-icon-size, 16px);
    margin-left: 12px;
    content: "";
    background-image: var(--aura-site-nav-sub-menu-icon);
    background-repeat: no-repeat;
    background-size: cover;
    transition: background-image 0.2s ease-out;
  }
}
@media (min-width: 48em) and (min-width: 48em) {
  .site-nav--main .site-nav__link.has-sub-menu:hover::after {
    content: "";
    background-image: var(--aura-site-nav-sub-menu-icon-hover);
    background-repeat: no-repeat;
    background-size: cover;
  }
}
@media (min-width: 48em) {
  .site-nav--main .site-nav__sub-menu.is-last {
    left: auto;
    right: 0;
  }
}
.site-nav--main .site-nav__sub-menu .site-nav__item {
  text-align: center;
}
@media (min-width: 48em) {
  .site-nav--main .site-nav__sub-menu .site-nav__item {
    margin-left: 0;
    text-align: left;
  }
}
.site-nav--main .site-nav__sub-link span {
  line-height: normal;
}
.site-nav--main .site-nav--metamenu {
  display: none;
  visibility: hidden;
}
@media (min-width: 48em) {
  .site-nav--main .site-nav--metamenu { /* OLD - iOS 6-, Safari 3.1-6, BB7 */ /* TWEENER - IE 10 */ /* NEW - Safari 6.1+. iOS 7.1+, BB10 */
    display: flex; /* NEW, Spec - Firefox, Chrome, Opera */
    visibility: visible;
    flex-grow: 0;
  }
  .site-nav--main .site-nav--metamenu::after {
    content: "";
    display: table;
    clear: both;
  }
  .site-nav--main .site-nav--metamenu .site-nav__link:hover, .site-nav--main .site-nav--metamenu .site-nav__link:active, .site-nav--main .site-nav--metamenu .site-nav__link:focus {
    background-color: transparent;
  }
  .site-nav--main .site-nav--metamenu .site-nav__link span {
    padding: 0;
  }
  .site-nav--main .site-nav--metamenu .site-nav__link.is-icon-only {
    padding: 0;
  }
}

.site-nav--tabs {
  margin-bottom: var(--aura-c-tabs-nav-margin-block-end, 48px);
}
@media (min-width: 48em) {
  .site-nav--tabs .site-nav__list { /* OLD - iOS 6-, Safari 3.1-6, BB7 */ /* TWEENER - IE 10 */ /* NEW - Safari 6.1+. iOS 7.1+, BB10 */
    display: flex; /* NEW, Spec - Firefox, Chrome, Opera */
    height: var(--aura-c-tabs-nav-height, 60px);
  }
}
.site-nav--tabs .site-nav__list.is-centered {
  justify-content: center;
}
.site-nav--tabs .site-nav__item {
  border-top-style: var(--aura-c-tabs-nav-border-top-style-mobile, solid);
  border-top-width: var(--aura-c-tabs-nav-sizing-border-top-mobile, 1px);
  border-top-color: var(--aura-c-tabs-nav-color-border-top-mobile, #e6e6e7);
  transition: background-color 0.2s ease-out;
}
@media (min-width: 48em) {
  .site-nav--tabs .site-nav__item {
    border-top: none;
    transition: none;
  }
}
@media (min-width: 48em) {
  .site-nav--tabs .site-nav__item:first-child .site-nav__link {
    padding-left: 0;
  }
  .site-nav--tabs .site-nav__item:first-child .site-nav__link::before {
    left: 0;
    width: 100%;
    width: -mox-calc(100% - 24px);
    width: -o-calc(100% - 24px);
    width: calc(100% - 24px);
  }
}
.site-nav--tabs .site-nav__item:hover:not(.is-active) .site-nav__link {
  background-color: var(--aura-c-tabs-nav-color-background-mobile, #f2f2f2);
}
@media (min-width: 48em) {
  .site-nav--tabs .site-nav__item:hover:not(.is-active) .site-nav__link {
    background-color: transparent;
  }
}
.site-nav--tabs .site-nav__link {
  padding: var(--aura-c-tabs-nav-padding-inline-mobile, 12px);
  text-align: center;
  color: var(--aura-c-tabs-nav-text-color-link, #424243);
}
@media (min-width: 48em) {
  .site-nav--tabs .site-nav__link { /* OLD - iOS 6-, Safari 3.1-6, BB7 */ /* TWEENER - IE 10 */ /* NEW - Safari 6.1+. iOS 7.1+, BB10 */
    display: flex; /* NEW, Spec - Firefox, Chrome, Opera */
    height: 100%;
    align-items: center;
    padding: 0 var(--aura-c-tabs-nav-padding-inline, 24px);
  }
  .site-nav--tabs .site-nav__link::before {
    position: absolute;
    top: 100%;
    left: 0;
    left: -mox-calc(0px + 24px);
    left: -o-calc(0px + 24px);
    left: calc(0px + 24px);
    width: 100%;
    width: -mox-calc(100% - 48px);
    width: -o-calc(100% - 48px);
    width: calc(100% - 48px);
    content: "";
    border-bottom-width: var(--aura-c-tabs-nav-border-bottom-sizing, 4px);
    border-bottom-style: solid;
    border-bottom-color: transparent;
    line-height: 0;
    transition: border-bottom-color 0.2s ease-out;
  }
}
@media (min-width: 48em) and (min-width: 48em) {
  .site-nav--tabs .site-nav__link:hover::before {
    border-bottom-color: var(--aura-c-tabs-nav-border-color-hover, #b7b7b8);
  }
}

.site-nav--stacked .site-nav__list {
  margin-bottom: var(--aura-c-stacked-nav-margin-block-end, 48px);
}
.site-nav--stacked .site-nav__list:last-of-type {
  margin-bottom: 0;
}
.site-nav--stacked .site-nav__item {
  width: 100%;
}
@media (min-width: 48em) {
  .site-nav--stacked .site-nav__item {
    text-align: left;
  }
}
.site-nav--stacked .site-nav__link {
  color: var(--aura-c-stacked-nav-text-color-link, #424243);
  text-align: var(--aura-c-stacked-nav-link-text-align-mobile, center);
  padding: var(--aura-c-stacked-nav-padding-block-mobile, 6px) var(--aura-c-stacked-nav-padding-inline-mobile, 12px);
  border-radius: var(--aura-c-stacked-nav-text-link-border-radius, 0);
  transition: color 0.2s ease-out, background-color 0.2s ease-out;
}
.site-nav--stacked .site-nav__link:hover:not(.is-active) {
  color: var(--aura-c-stacked-nav-text-color-hover, black);
}
@media (min-width: 48em) {
  .site-nav--stacked .site-nav__link {
    display: inline-block;
    width: var(--aura-c-stacked-nav-link-width, auto);
    text-align: var(--aura-c-stacked-nav-link-text-align, left);
    padding-right: var(--aura-c-stacked-nav-padding-inline-end, 24px);
  }
  .site-nav--stacked .site-nav__link:hover:not(.is-active) {
    background-color: var(--aura-c-stacked-nav-link-color-background-hover, transparent);
  }
}
.site-nav--stacked .site-nav__link .c-svg {
  display: none;
}

.site-nav--branding { /* OLD - iOS 6-, Safari 3.1-6, BB7 */ /* TWEENER - IE 10 */ /* NEW - Safari 6.1+. iOS 7.1+, BB10 */
  display: flex; /* NEW, Spec - Firefox, Chrome, Opera */
  align-items: var(--aura-c-site-nav-align-items, center);
  justify-content: center;
  text-align: center;
  line-height: 0;
}
@media (min-width: 48em) {
  .site-nav--branding {
    height: var(--aura-c-site-nav-min-height, 80px);
  }
}
@media (min-width: 48em) {
  .site-nav--branding .site-nav__home-link {
    flex-grow: 0;
    margin-right: var(--aura-c-site-nav-logo-spacing-inline, 24px);
  }
}
@media (min-width: 48em) {
  .site-nav--branding.align-logos-left\@tablet {
    justify-content: left;
    text-align: left;
  }
}

/* Current section indicator.
   ========================================================================== */
/**
 * Add `.is-active` class dynamically to current `site-nav__link` or use
 * page/section classes for specificity.
 * e.g.: html.page--about .site-nav__link.site-nav__about {}
 */
.site-nav--main .is-active .site-nav__link {
  background-color: var(--aura-c-site-nav-color-background-active-mobile, #f2f2f2);
}
.site-nav--main .is-active .site-nav__link, .site-nav--main .is-active .site-nav__link:link, .site-nav--main .is-active .site-nav__link:visited, .site-nav--main .is-active .site-nav__link:hover, .site-nav--main .is-active .site-nav__link:active, .site-nav--main .is-active .site-nav__link:focus {
  color: var(--aura-c-site-nav-text-color-active-mobile, black);
}
@media (min-width: 48em) {
  .site-nav--main .is-active .site-nav__link {
    background-color: var(--aura-c-site-nav-color-background-active, rgba(255, 255, 255, 0.1));
  }
  .site-nav--main .is-active .site-nav__link, .site-nav--main .is-active .site-nav__link:link, .site-nav--main .is-active .site-nav__link:visited, .site-nav--main .is-active .site-nav__link:hover, .site-nav--main .is-active .site-nav__link:active, .site-nav--main .is-active .site-nav__link:focus {
    color: var(--aura-c-site-nav-text-color-active, white);
  }
}
.site-nav--main .is-active .site-nav__sub-link {
  background-color: var(--aura-c-site-nav-color-background-active-mobile, #f2f2f2);
}
.site-nav--main .is-active .site-nav__sub-link, .site-nav--main .is-active .site-nav__sub-link:link, .site-nav--main .is-active .site-nav__sub-link:visited, .site-nav--main .is-active .site-nav__sub-link:hover, .site-nav--main .is-active .site-nav__sub-link:active, .site-nav--main .is-active .site-nav__sub-link:focus {
  color: var(--aura-c-site-nav-text-color-active-mobile, black);
}
@media (min-width: 48em) {
  .site-nav--main .is-active .site-nav__sub-link {
    background-color: var(--aura-c-site-nav-color-background-active, rgba(255, 255, 255, 0.1));
  }
  .site-nav--main .is-active .site-nav__sub-link, .site-nav--main .is-active .site-nav__sub-link:link, .site-nav--main .is-active .site-nav__sub-link:visited, .site-nav--main .is-active .site-nav__sub-link:hover, .site-nav--main .is-active .site-nav__sub-link:active, .site-nav--main .is-active .site-nav__sub-link:focus {
    color: var(--aura-c-site-nav-submenu-text-color-active, #006db7);
  }
}
.site-nav--tabs .is-active .site-nav__link, .site-nav--tabs .is-active .site-nav__link:link, .site-nav--tabs .is-active .site-nav__link:visited, .site-nav--tabs .is-active .site-nav__link:hover, .site-nav--tabs .is-active .site-nav__link:active, .site-nav--tabs .is-active .site-nav__link:focus {
  color: var(--aura-c-tabs-nav-text-color-active, #006db7);
}
@media (min-width: 48em) {
  .site-nav--tabs .is-active .site-nav__link::before {
    border-bottom-color: var(--aura-c-tabs-nav-border-color-active, #006db7);
  }
}
.site-nav--stacked .is-active .site-nav__link, .site-nav--stacked .is-active .site-nav__link:link, .site-nav--stacked .is-active .site-nav__link:visited, .site-nav--stacked .is-active .site-nav__link:hover, .site-nav--stacked .is-active .site-nav__link:active, .site-nav--stacked .is-active .site-nav__link:focus {
  color: var(--aura-c-stacked-nav-text-color-active, #006db7);
  background-color: var(--aura-c-stacked-nav-link-color-background-active-mobile, #e6e6e7);
}
@media (min-width: 48em) {
  .site-nav--stacked .is-active .site-nav__link, .site-nav--stacked .is-active .site-nav__link:link, .site-nav--stacked .is-active .site-nav__link:visited, .site-nav--stacked .is-active .site-nav__link:hover, .site-nav--stacked .is-active .site-nav__link:active, .site-nav--stacked .is-active .site-nav__link:focus {
    background-color: var(--aura-c-stacked-nav-link-color-background-active, transparent);
  }
  .site-nav--stacked .is-active .site-nav__link .c-svg {
    display: block;
    position: absolute;
    top: 50%;
    left: auto;
    right: 0;
    transform: translateY(-50%);
  }
}

/* Aligment variants
   ========================================================================== */
.page-head--align-start .site-nav__branding,
.page-head--align-start .site-nav__home-link,
.page-head--align-start .site-nav--main {
  align-items: flex-start;
}

.page-head--align-end .site-nav__branding,
.page-head--align-end .site-nav__home-link,
.page-head--align-end .site-nav--main {
  align-items: flex-end;
}

/* ==========================================================================
 #SVG SYMBOLS
 ========================================================================== */
/**
 * This little bit of CSS is used to create a baseline for our SVG symbols.
 * It is used directly, and exclusively, on the SVG tag.

    Include SVG icons using the <use> method:

    <svg class="c-svg c-svg--icon-name"><use xlink:href="#c-svg--icon-name"></use></svg>

    When using a sprite, only inlcude the symbols you will need and not the 
    entire library. The sprite must be included at the top of the page (so right
    after the body tag), and must be hidden from view using the CSS class 
    `.u-hidden-visually`.

    How to include SVG sprite:

    <svg aria-hidden="true" class="u-hidden-visually" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
      <defs>
        <symbol id="c-svg--icon-name" viewBox="0 0 32 32">
        <title>Icon title</title>
        <path ...></path>
        </symbol>

        // add each symbol needed...

      </defs>
    </svg>

    Reference the symbols with the <use> tag as shown above.


    ALTERNATIVELY

    If you only require the use of a few icons here and there, include
    the icon inline instead of the <use> method. That just means, instead of 
    referencing the icon symbol in a sprite by it's ID, just inlcude the entire
    SVG symbol itself, like so:

    <svg class="c-svg c-svg--icon-name"  viewBox="0 0 32 32"><path ...></svg>

    This is how the site logos are inlcuded in the masthead.


    ****************************************************************************

    NOTE:
    The use of `xlink:href` is deprecated in SVG 2. Although it is still 
    supported and likely will never be pulled from browsers.
    REF: https://css-tricks.com/on-xlinkhref-being-deprecated-in-svg/

    If it actually does become unsupported from browsers, we will opt to use the 
    inline method descirbed in the Alternative section above.

    ****************************************************************************

 *
 */
/**
 * 1. Help align our inline SVG icons.
 * 2. Align bottom of icon with baseline.
 * 3. Icon only, keep flush with wrapper.
 */
.c-svg {
  position: relative; /* [1] */
  top: 0.25em; /* [1] */
  display: inline-flex; /* [1] */
  width: 1em;
  height: 1em;
  stroke-width: 0;
  stroke: currentColor;
  fill: currentColor;
  align-self: center; /* [1] */
  pointer-events: none;
}
.c-svg.c-svg--baseline {
  top: 0.125em; /* [2] */
}
.c-svg.c-svg--flush {
  top: 0; /* [3] */
}
.c-svg, .c-svg:link, .c-svg:visited, .c-svg:hover, .c-svg:active, .c-svg:focus {
  color: inherit;
  stroke: currentColor;
  fill: currentColor;
}

/* Interactions
   ========================================================================== */
.c-svg-hover-swap {
  position: relative;
}
.c-svg-hover-swap .c-svg {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  transition: opacity 0.2s ease-in-out, color 0.2s ease-in-out;
  will-change: color;
}
.c-svg-hover-swap .c-svg.icon-default {
  color: var(--aura-c-svg-color-icon, #6d6d6d);
  visibility: visible;
  opacity: 1;
}
.c-svg-hover-swap .c-svg.icon-hover {
  visibility: hidden;
  opacity: 0;
  color: var(--aura-c-svg-color-icon-active, black);
}
.c-svg-hover-swap:not(.c-icon-btn-thumbs):hover .c-svg.icon-default {
  visibility: hidden;
  opacity: 0;
}
.c-svg-hover-swap:not(.c-icon-btn-thumbs):hover .c-svg.icon-hover {
  visibility: visible;
  opacity: 1;
}
.c-svg-hover-swap.c-icon-btn-thumbs:hover .c-svg.icon-default {
  color: var(--aura-c-svg-color-icon-active, black);
}
.c-svg-hover-swap.c-icon-btn-thumbs.is-active .c-svg.icon-default, .c-svg-hover-swap.c-icon-btn-thumbs.is-active:hover .c-svg.icon-default {
  visibility: hidden;
  opacity: 0;
}
.c-svg-hover-swap.c-icon-btn-thumbs.is-active .c-svg.icon-hover, .c-svg-hover-swap.c-icon-btn-thumbs.is-active:hover .c-svg.icon-hover {
  visibility: visible;
  opacity: 1;
  color: var(--aura-c-svg-color-icon-active, #006db7);
}

/* Variants
   ========================================================================== */
.c-svg--streak {
  width: 0.5791015625em;
}

.c-svg--mask-leak {
  width: 1.1875em;
}

.c-svg--book-open {
  width: 1.2939453125em;
}

.c-svg--connectivity {
  width: 1.2939453125em;
}

.c-svg--cpap-device {
  width: 1.2939453125em;
}

.c-svg--headmask-fullface {
  width: 1.2939453125em;
}

.c-svg--headmask-nasal {
  width: 1.2939453125em;
}

.c-svg--headmask-pillow {
  width: 1.2939453125em;
}

.c-svg--device-laptop {
  width: 1.2939453125em;
}

.c-svg--checkmark {
  width: 1.2939453125em;
}

/* ==========================================================================
   #HEADINGS
   ========================================================================== */
/**
 * Define some heading styles to modify `h1` through `h6` elements.
 *
 * Related files:
 * `settings/settings.typography.scss`
 * `elements/elements.typography.scss`
 */
[class^=c-heading-],
[class*=" c-heading-"] {
  margin-bottom: var(--aura-c-heading-margin-block-end, 24px);
  color: var(--aura-c-heading-text-color, currentColor);
  font-weight: var(--aura-c-heading-font-weight, 400);
}

.c-heading-page {
  margin-bottom: var(--aura-c-heading-page-margin-block-end-mobile, 48px);
  font-size: 50px;
  font-size: 3.125rem;
  line-height: 1.2;
  color: var(--aura-c-heading-page-text-color, currentColor);
}
@media (min-width: 48em) {
  .c-heading-page {
    margin-bottom: var(--aura-c-heading-page-margin-block-end, 60px);
  }
}

/**
 * A sub-heading that might appear under a `c-heading-main` heading.
 *
 * 1. Add extra space between the previous section of content.
 */
.c-heading-sub {
  padding-top: 48px; /* [1] */
}

.c-heading-legend {
  font-size: 28px;
  font-size: 1.75rem;
  line-height: 1.2857142857;
}

/* Heading variants
   ========================================================================== */
.c-heading--top-border,
.c-heading--bottom-border {
  border-style: solid;
  border-color: var(--aura-c-heading-color-border, #e6e6e7);
  border-width: 0;
}

.c-heading--top-border {
  padding-top: 12px;
  border-top-width: var(--aura-c-heading-border-width, 1px);
}

.c-heading--bottom-border {
  padding-bottom: 12px;
  border-bottom-width: var(--aura-c-heading-border-width, 1px);
}

@media (min-width: 100em) {
  .c-heading--extend-border {
    margin-left: -24px;
    margin-right: -24px;
    padding-left: 24px;
    padding-right: 24px;
  }
}

/* Text and labels
  ========================================================================== */
/**
 * Text and label modifiers
 */
.c-text-intro {
  font-size: 20px;
  font-size: 1.25rem;
  line-height: 1.725;
}
@media (min-width: 62em) {
  .c-text-intro {
    font-size: 20px;
    font-size: 1.25rem;
    line-height: 2.1;
  }
}

.c-text-greyed-out {
  font-style: italic;
  color: rgba(0, 0, 0, 0.4);
}

.c-text-preamble {
  font-size: 22px;
  font-size: 1.375rem;
  line-height: 1.6;
  margin-bottom: 48px;
}

.c-text--small {
  font-size: 14px;
  font-size: 0.875rem;
  line-height: 2;
}

/** 
 * Use in tables. Table layout property must be set to `fixed` for this to work.
 * Use <colgroup><col width="{x}%"> [...]</colgroup> to set column widths when using
 * a fixed table layout.
 *
 * HTML:

    // Must total 100%
    <colgroup>
      <col width="10%">
      <col width="35%">
      <col width="25%">
      <col width="30%">
    </colgroup> 

    // Truncate text
    <th class="" scope="col">
      <div class="c-text-truncate" title="Heading text">Heading text</div>
    </th>

    <td data-label="Heading text">
      <div class="c-text-truncate" title="Cell text">Cell text</div>
    </td>
 */
.c-text-truncate {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}
.c-text-truncate.no-wrap {
  white-space: nowrap;
}

/* Links
  ========================================================================== */
.c-link-ui {
  font-weight: var(--aura-c-link-ui-font-weight, 500);
}
.c-link-ui, .c-link-ui:link, .c-link-ui:visited {
  color: var(--aura-color-text-link, #006db7) !important;
}
.c-link-ui:hover {
  color: var(--aura-color-text-hover, #00497a);
}
.c-link-ui:active {
  color: var(--aura-color-text-active, #006db7);
}

/* ==========================================================================
   #THEME - CUSTOM AURA CSS
   ========================================================================== */
/**
 * This file contains bits of custom CSS and AuraCSS overrides.
 */
.form-stepper {
  position: relative;
  width: 100%;
  height: 800px;
}

.form-row-delete-btn {
  padding-top: 36px;
  line-height: 1;
}

.form-stepper__item {
  position: absolute;
}
.form-stepper__item,
.form-stepper__item form { /* OLD - iOS 6-, Safari 3.1-6, BB7 */ /* TWEENER - IE 10 */ /* NEW - Safari 6.1+. iOS 7.1+, BB10 */
  display: flex; /* NEW, Spec - Firefox, Chrome, Opera */
  width: 100%;
  min-height: 100%;
  flex-grow: 1;
  /* Your grandparents flexbox for Webkit */
  /* Prefixed new syntax: */
  /* Same syntax for weird IE tweener */
  /* unprefixed new syntax */
  flex-direction: column;
}
.form-stepper__item .c-form-section {
  position: relative;
  width: 100%;
  flex: 1 0 auto;
  -webkit-flex: 1 0 auto;
}
.form-stepper__item .c-form-buttons {
  flex: none;
}

.flex {
  display: flex;
}

.flex-column {
  flex-direction: column;
}

.flex-column-reverse {
  flex-direction: column-reverse;
}

.flex-row {
  flex-direction: row;
}

.flex-gap-5 {
  gap: 5px;
}

.flex-gap-10 {
  gap: 10px;
}

.flex-gap-11 {
  gap: 11px;
}

.flex-gap-15 {
  gap: 15px;
}

.flex-gap-30 {
  gap: 30px;
}

.flex-gap-50 {
  gap: 50px;
}

.flex-gap-60 {
  gap: 60px;
}

.flex-gap-200 {
  gap: 200px;
}

.flex-gap-24 {
  gap: 24px;
}

.flex-gap-150 {
  gap: 150px;
}

.flex-center {
  justify-content: center;
  align-items: center;
}

.flex-start {
  justify-content: start;
  align-items: center;
}

.flex-space {
  justify-content: space-between;
  align-items: center;
}

.flex-space-start {
  justify-content: space-between;
  align-items: start;
}

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

.relative {
  position: relative;
}

.absolute {
  position: absolute;
}

.no-margin {
  margin: 0px !important;
}

.bold {
  font-weight: 600;
}

.divider-line-50 {
  width: 0px;
  height: 50px;
  border: 1px solid #B7B7B8;
}

.divider-line-20 {
  width: 0px;
  height: 20px;
  border: 1px solid #B7B7B8;
}

.divider-line-15 {
  width: 0px;
  height: 15px;
  border: 1px solid #424243;
}

.flex-space {
  justify-content: space-between;
  align-items: center;
}

html {
  overflow-y: hidden;
}

.c-input--search {
  --aura-search-field-icon: url("data:image/svg+xml, %3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='%23424243' d='M15.5 14h-0.79l-0.28-0.27c0.98-1.14 1.57-2.62 1.57-4.23 0-3.59-2.91-6.5-6.5-6.5s-6.5 2.91-6.5 6.5 2.91 6.5 6.5 6.5c1.61 0 3.090-0.59 4.23-1.57l0.27 0.28v0.79l5 4.99 1.49-1.49-4.99-5zM9.5 14c-2.49 0-4.5-2.010-4.5-4.5s2.010-4.5 4.5-4.5 4.5 2.010 4.5 4.5-2.010 4.5-4.5 4.5z'/%3E%3C/svg%3E");
}
.c-input--search .c-input {
  --aura-c-form-input-padding-inline-start: 36px;
}
.c-input--search::before {
  content: "";
  background-image: var(--aura-search-field-icon);
  background-repeat: no-repeat;
  background-size: cover;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 4px;
  width: var(--aura-c-form-input-search-icon-size, 24px);
  height: var(--aura-c-form-input-search-icon-size, 24px);
  z-index: 0;
}

.pointer {
  cursor: pointer;
}

.svg-top {
  top: 1px;
}

.nowrap {
  white-space: nowrap;
}

.no-border {
  border-style: initial !important;
}

.display-none {
  display: none;
}

.margin-top-30 {
  margin-top: 30px;
}

.margin-top-14 {
  margin-top: 14px;
}

.margin-top-4 {
  margin-top: 4px;
}

.margin-top-12 {
  margin-top: 12px;
}

.margin-top-90 {
  margin-top: 90px;
}

.margin-bottom-25 {
  margin-bottom: 25px;
}

.w-50p {
  width: 50%;
}

.modal-title {
  font-family: "Open Sans";
  font-style: normal;
  font-weight: 600;
  font-size: 24px;
  line-height: 36px;
  text-align: center;
  letter-spacing: 0.03em;
  color: #424243;
}

.modal-text {
  font-family: "Open Sans";
  font-style: normal;
  font-weight: 400;
  font-size: 15px;
  line-height: 20px;
  text-align: center;
  letter-spacing: 0.03em;
  color: #424243;
}

header.page-head--sticky {
  z-index: 1;
}

body {
  font-family: var(--aura-font-family-heading, "Open Sans", "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif) !important;
}

.w-200 {
  width: 200px;
}

/* ==========================================================================
  #ACCESSIBILITY
  ========================================================================== */
.u-screen-reader-text,
.u-sr-only {
  position: absolute;
  clip-path: inset(50%);
  margin: -1px;
  border: 0;
  padding: 0;
  width: 1px;
  height: 1px;
  overflow: hidden;
  word-wrap: normal !important;
  clip: rect(1px, 1px, 1px, 1px);
}
.u-screen-reader-text:focus,
.u-sr-only:focus {
  display: block;
  top: 5px;
  left: 5px;
  z-index: 100000;
  clip-path: none;
  background-color: #eee;
  padding: 15px 23px 14px;
  width: auto;
  height: auto;
  text-decoration: none;
  line-height: normal;
  color: #444;
  font-size: 1em;
  clip: auto !important;
}

/* ==========================================================================
   #BORDER
   ========================================================================== */
/* Borders
   ========================================================================== */
.u-border-solid {
  border: 1px solid #e6e6e7 !important;
}
.u-border-solid-top {
  border-top: 1px solid #e6e6e7 !important;
}
.u-border-solid-right {
  border-right: 1px solid #e6e6e7 !important;
}
.u-border-solid-bottom {
  border-bottom: 1px solid #e6e6e7 !important;
}
.u-border-solid-left {
  border-left: 1px solid #e6e6e7 !important;
}
.u-border-solid-horizontal {
  border-horizontal: 1px solid #e6e6e7 !important;
}
.u-border-solid-vertical {
  border-vertical: 1px solid #e6e6e7 !important;
}

/* Border radii
   ========================================================================== */
.u-border-radius {
  border-radius: 24px !important;
}
.u-border-radius-micro {
  border-radius: 3px !important;
}
.u-border-radius-tiny {
  border-radius: 6px !important;
}
.u-border-radius-small {
  border-radius: 12px !important;
}
.u-border-radius-medium {
  border-radius: 36px !important;
}
.u-border-radius-large {
  border-radius: 48px !important;
}
.u-border-radius-x-large {
  border-radius: 72px !important;
}
.u-border-radius-xx-large {
  border-radius: 96px !important;
}
.u-border-radius-none {
  border-radius: 0px !important;
}
.u-border-radius-top {
  border-top-left-radius: 24px !important;
  border-top-right-radius: 24px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  border-radius: 24px !important;
}
.u-border-radius-top-micro {
  border-top-left-radius: 3px !important;
  border-top-right-radius: 3px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  border-radius: 3px !important;
}
.u-border-radius-top-tiny {
  border-top-left-radius: 6px !important;
  border-top-right-radius: 6px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  border-radius: 6px !important;
}
.u-border-radius-top-small {
  border-top-left-radius: 12px !important;
  border-top-right-radius: 12px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  border-radius: 12px !important;
}
.u-border-radius-top-medium {
  border-top-left-radius: 36px !important;
  border-top-right-radius: 36px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  border-radius: 36px !important;
}
.u-border-radius-top-large {
  border-top-left-radius: 48px !important;
  border-top-right-radius: 48px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  border-radius: 48px !important;
}
.u-border-radius-top-x-large {
  border-top-left-radius: 72px !important;
  border-top-right-radius: 72px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  border-radius: 72px !important;
}
.u-border-radius-top-xx-large {
  border-top-left-radius: 96px !important;
  border-top-right-radius: 96px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  border-radius: 96px !important;
}
.u-border-radius-top-none {
  border-top-left-radius: 0px !important;
  border-top-right-radius: 0px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  border-radius: 0px !important;
}
.u-border-radius-right {
  border-top-left-radius: 0 !important;
  border-top-right-radius: 24px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 24px !important;
  border-radius: 24px !important;
}
.u-border-radius-right-micro {
  border-top-left-radius: 0 !important;
  border-top-right-radius: 3px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 3px !important;
  border-radius: 3px !important;
}
.u-border-radius-right-tiny {
  border-top-left-radius: 0 !important;
  border-top-right-radius: 6px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 6px !important;
  border-radius: 6px !important;
}
.u-border-radius-right-small {
  border-top-left-radius: 0 !important;
  border-top-right-radius: 12px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 12px !important;
  border-radius: 12px !important;
}
.u-border-radius-right-medium {
  border-top-left-radius: 0 !important;
  border-top-right-radius: 36px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 36px !important;
  border-radius: 36px !important;
}
.u-border-radius-right-large {
  border-top-left-radius: 0 !important;
  border-top-right-radius: 48px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 48px !important;
  border-radius: 48px !important;
}
.u-border-radius-right-x-large {
  border-top-left-radius: 0 !important;
  border-top-right-radius: 72px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 72px !important;
  border-radius: 72px !important;
}
.u-border-radius-right-xx-large {
  border-top-left-radius: 0 !important;
  border-top-right-radius: 96px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 96px !important;
  border-radius: 96px !important;
}
.u-border-radius-right-none {
  border-top-left-radius: 0 !important;
  border-top-right-radius: 0px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0px !important;
  border-radius: 0px !important;
}
.u-border-radius-bottom {
  border-top-left-radius: 0 !important;
  border-top-right-radius: 0 !important;
  border-bottom-left-radius: 24px !important;
  border-bottom-right-radius: 24px !important;
  border-radius: 24px !important;
}
.u-border-radius-bottom-micro {
  border-top-left-radius: 0 !important;
  border-top-right-radius: 0 !important;
  border-bottom-left-radius: 3px !important;
  border-bottom-right-radius: 3px !important;
  border-radius: 3px !important;
}
.u-border-radius-bottom-tiny {
  border-top-left-radius: 0 !important;
  border-top-right-radius: 0 !important;
  border-bottom-left-radius: 6px !important;
  border-bottom-right-radius: 6px !important;
  border-radius: 6px !important;
}
.u-border-radius-bottom-small {
  border-top-left-radius: 0 !important;
  border-top-right-radius: 0 !important;
  border-bottom-left-radius: 12px !important;
  border-bottom-right-radius: 12px !important;
  border-radius: 12px !important;
}
.u-border-radius-bottom-medium {
  border-top-left-radius: 0 !important;
  border-top-right-radius: 0 !important;
  border-bottom-left-radius: 36px !important;
  border-bottom-right-radius: 36px !important;
  border-radius: 36px !important;
}
.u-border-radius-bottom-large {
  border-top-left-radius: 0 !important;
  border-top-right-radius: 0 !important;
  border-bottom-left-radius: 48px !important;
  border-bottom-right-radius: 48px !important;
  border-radius: 48px !important;
}
.u-border-radius-bottom-x-large {
  border-top-left-radius: 0 !important;
  border-top-right-radius: 0 !important;
  border-bottom-left-radius: 72px !important;
  border-bottom-right-radius: 72px !important;
  border-radius: 72px !important;
}
.u-border-radius-bottom-xx-large {
  border-top-left-radius: 0 !important;
  border-top-right-radius: 0 !important;
  border-bottom-left-radius: 96px !important;
  border-bottom-right-radius: 96px !important;
  border-radius: 96px !important;
}
.u-border-radius-bottom-none {
  border-top-left-radius: 0 !important;
  border-top-right-radius: 0 !important;
  border-bottom-left-radius: 0px !important;
  border-bottom-right-radius: 0px !important;
  border-radius: 0px !important;
}
.u-border-radius-left {
  border-top-left-radius: 24px !important;
  border-top-right-radius: 0 !important;
  border-bottom-left-radius: 24px !important;
  border-bottom-right-radius: 0 !important;
}
.u-border-radius-left-micro {
  border-top-left-radius: 3px !important;
  border-top-right-radius: 0 !important;
  border-bottom-left-radius: 3px !important;
  border-bottom-right-radius: 0 !important;
}
.u-border-radius-left-tiny {
  border-top-left-radius: 6px !important;
  border-top-right-radius: 0 !important;
  border-bottom-left-radius: 6px !important;
  border-bottom-right-radius: 0 !important;
}
.u-border-radius-left-small {
  border-top-left-radius: 12px !important;
  border-top-right-radius: 0 !important;
  border-bottom-left-radius: 12px !important;
  border-bottom-right-radius: 0 !important;
}
.u-border-radius-left-medium {
  border-top-left-radius: 36px !important;
  border-top-right-radius: 0 !important;
  border-bottom-left-radius: 36px !important;
  border-bottom-right-radius: 0 !important;
}
.u-border-radius-left-large {
  border-top-left-radius: 48px !important;
  border-top-right-radius: 0 !important;
  border-bottom-left-radius: 48px !important;
  border-bottom-right-radius: 0 !important;
}
.u-border-radius-left-x-large {
  border-top-left-radius: 72px !important;
  border-top-right-radius: 0 !important;
  border-bottom-left-radius: 72px !important;
  border-bottom-right-radius: 0 !important;
}
.u-border-radius-left-xx-large {
  border-top-left-radius: 96px !important;
  border-top-right-radius: 0 !important;
  border-bottom-left-radius: 96px !important;
  border-bottom-right-radius: 0 !important;
}
.u-border-radius-left-none {
  border-top-left-radius: 0px !important;
  border-top-right-radius: 0 !important;
  border-bottom-left-radius: 0px !important;
  border-bottom-right-radius: 0 !important;
}
.u-border-radius-left -right {
  border-radius: 24px !important;
}
.u-border-radius-left -right-micro {
  border-radius: 3px !important;
}
.u-border-radius-left -right-tiny {
  border-radius: 6px !important;
}
.u-border-radius-left -right-small {
  border-radius: 12px !important;
}
.u-border-radius-left -right-medium {
  border-radius: 36px !important;
}
.u-border-radius-left -right-large {
  border-radius: 48px !important;
}
.u-border-radius-left -right-x-large {
  border-radius: 72px !important;
}
.u-border-radius-left -right-xx-large {
  border-radius: 96px !important;
}
.u-border-radius-left -right-none {
  border-radius: 0px !important;
}
.u-border-radius-top -bottom {
  border-radius: 24px !important;
}
.u-border-radius-top -bottom-micro {
  border-radius: 3px !important;
}
.u-border-radius-top -bottom-tiny {
  border-radius: 6px !important;
}
.u-border-radius-top -bottom-small {
  border-radius: 12px !important;
}
.u-border-radius-top -bottom-medium {
  border-radius: 36px !important;
}
.u-border-radius-top -bottom-large {
  border-radius: 48px !important;
}
.u-border-radius-top -bottom-x-large {
  border-radius: 72px !important;
}
.u-border-radius-top -bottom-xx-large {
  border-radius: 96px !important;
}
.u-border-radius-top -bottom-none {
  border-radius: 0px !important;
}

.u-border-radius-none {
  border-radius: 0 !important;
}

/* ==========================================================================
   #CLEARFIX
   ========================================================================== */
/**
 * Attach our clearfix mixin to a utility class.
 */
.u-clearfix::after {
  content: "";
  display: table;
  clear: both;
}

/* ==========================================================================
  #COLOR-FILL
  ========================================================================== */
.u-fill {
  /**
   * Iterate over color maps and autogenerate helper classes.
   */
}
.u-fill--primary {
  background-color: #006db7 !important;
}
.u-fill--black {
  background-color: black !important;
}
.u-fill--gray-700 {
  background-color: #6d6d6d !important;
}
.u-fill--gray-200 {
  background-color: #e6e6e7 !important;
}
.u-fill--gray-100 {
  background-color: #f2f2f2 !important;
}
.u-fill--gray-50 {
  background-color: #f6f6f6 !important;
}
.u-fill--white {
  background-color: white !important;
}
.u-fill--neutral-00 {
  background-color: #000000 !important;
}
.u-fill--neutral-100 {
  background-color: #ffffff !important;
}

/* ==========================================================================
   #FLOAT
   ========================================================================== */
/* Force floats
   ========================================================================== */
.u-float-right {
  float: right !important;
}

/* Respsonsive floats
   ========================================================================== */
@media (min-width: 48em) {
  .u-float-right\@tablet {
    float: right !important;
  }
}
@media (max-width: 47.99em) {
  .u-float-right-below-tablet {
    text-align: right !important;
  }
}
@media (min-width: 62em) {
  .u-float-right\@desktop {
    float: right !important;
  }
}
@media (max-width: 61.99em) {
  .u-float-right-below-desktop {
    text-align: right !important;
  }
}
@media (min-width: 75em) {
  .u-float-right\@wide {
    float: right !important;
  }
}
@media (max-width: 74.99em) {
  .u-float-right-below-wide {
    text-align: right !important;
  }
}
@media (min-width: 85.375em) {
  .u-float-right\@laptop {
    float: right !important;
  }
}
@media (max-width: 85.365em) {
  .u-float-right-below-laptop {
    text-align: right !important;
  }
}
@media (min-width: 100em) {
  .u-float-right\@x-wide {
    float: right !important;
  }
}
@media (max-width: 99.99em) {
  .u-float-right-below-x-wide {
    text-align: right !important;
  }
}

/* ==========================================================================
   #PERCENTAGE WIDTHS
   ========================================================================== */
/**
 * Re-purposing the `utilities/utilities.widths.scss` function to
 * generate a different series of utility classes that give a fluid width to
 * whichever element they’re applied, e.g.:
 *
 *   <div class="u-35/percent"></div>
 *
 * These classes are most commonly used in conjunction with a grid view control,
 * such as PrimeNG tables. Setting widths inline can break the responsive layout,
 * so we're making these utility classes instead.
 * e.g.:
 *
 *   <p-column styleClass="u-35/percent" field="name" ...></p-column>
 *
 *
 * Which fractions would you like in your grid system(s)?
 * By default, we provide you the percentages below,
 * e.g.:
 *
 *   .u-5/percent
 *   .u-6/percent
 *   .u-15/percent
 *   .u-45/percent
 *
 * You can overwrite these values by modifying the variables in '_setting.global.scss`.
 * DO NOT CHANGE THE VALUES HERE.
 */
/**
 * A series of width helper classes that you can use to assign columns widths to a gridview
 * table. Classes take a fraction-like format (e.g. `.u-5/percent`). Use these in
 * your markup:
 *
 * <p:column class="u-35/percent">
 * <td class="u-15/percent">
 *
 * The following will generate widths helper classes based on the percentages
 * defined in the `$res-percentages` list.
 */
/* ==========================================================================
   #POSITIONING
   ========================================================================== */
.u-position-relative {
  position: relative !important;
}

/* Top positions
   ========================================================================== */
.u-position-top-left {
  position: absolute;
  top: 0;
  left: 0;
}

.u-position-top-center {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 0;
}

.u-position-top-right {
  position: absolute;
  top: 0;
  right: 0;
  left: auto;
}

/* Middle positions
   ========================================================================== */
.u-position-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.u-position-y-center {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

.u-position-y-center-right {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 0;
}

.u-position-x-center {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

/* Bottom positions
   ========================================================================== */
.u-position-bottom-left {
  position: absolute;
  bottom: 0;
  left: 0;
}

.u-position-bottom-center {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 0;
}

.u-position-bottom-right {
  position: absolute;
  bottom: 0;
  right: 0;
  left: auto;
}

/* Misc positions
   ========================================================================== */
.u-position-sticky-top {
  position: sticky;
  position: -webkit-sticky;
  top: 0;
}

.u-position-fixed-top {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 9999;
}

.u-position-fixed-bottom {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 9999;
}

/* ==========================================================================
   #SPACINGS
   ========================================================================== */
/**
 * Utility classes to put specific spacing values onto elements. The below loop
 * will generate us a suite of classes like:
 *
 *   .u-margin-top {}
 *   .u-padding-left-large {}
 *   .u-margin-right-small {}
 *   .u-padding {}
 *   .u-padding-right-none {}
 *   .u-padding-horizontal {}
 *   .u-padding-vertical-small {}
 */
.u-padding {
  padding: 24px !important;
}

.u-padding-micro {
  padding: 3px !important;
}

.u-padding-tiny {
  padding: 6px !important;
}

.u-padding-small {
  padding: 12px !important;
}

.u-padding-medium {
  padding: 36px !important;
}

.u-padding-large {
  padding: 48px !important;
}

.u-padding-x-large {
  padding: 72px !important;
}

.u-padding-xx-large {
  padding: 96px !important;
}

.u-padding-none {
  padding: 0px !important;
}

.u-padding-flush {
  padding: 0px !important;
}

.u-padding-top {
  padding-top: 24px !important;
}

.u-padding-top-micro {
  padding-top: 3px !important;
}

.u-padding-top-tiny {
  padding-top: 6px !important;
}

.u-padding-top-small {
  padding-top: 12px !important;
}

.u-padding-top-medium {
  padding-top: 36px !important;
}

.u-padding-top-large {
  padding-top: 48px !important;
}

.u-padding-top-x-large {
  padding-top: 72px !important;
}

.u-padding-top-xx-large {
  padding-top: 96px !important;
}

.u-padding-top-none {
  padding-top: 0px !important;
}

.u-padding-top-flush {
  padding-top: 0px !important;
}

.u-padding-right {
  padding-right: 24px !important;
}

.u-padding-right-micro {
  padding-right: 3px !important;
}

.u-padding-right-tiny {
  padding-right: 6px !important;
}

.u-padding-right-small {
  padding-right: 12px !important;
}

.u-padding-right-medium {
  padding-right: 36px !important;
}

.u-padding-right-large {
  padding-right: 48px !important;
}

.u-padding-right-x-large {
  padding-right: 72px !important;
}

.u-padding-right-xx-large {
  padding-right: 96px !important;
}

.u-padding-right-none {
  padding-right: 0px !important;
}

.u-padding-right-flush {
  padding-right: 0px !important;
}

.u-padding-bottom {
  padding-bottom: 24px !important;
}

.u-padding-bottom-micro {
  padding-bottom: 3px !important;
}

.u-padding-bottom-tiny {
  padding-bottom: 6px !important;
}

.u-padding-bottom-small {
  padding-bottom: 12px !important;
}

.u-padding-bottom-medium {
  padding-bottom: 36px !important;
}

.u-padding-bottom-large {
  padding-bottom: 48px !important;
}

.u-padding-bottom-x-large {
  padding-bottom: 72px !important;
}

.u-padding-bottom-xx-large {
  padding-bottom: 96px !important;
}

.u-padding-bottom-none {
  padding-bottom: 0px !important;
}

.u-padding-bottom-flush {
  padding-bottom: 0px !important;
}

.u-padding-left {
  padding-left: 24px !important;
}

.u-padding-left-micro {
  padding-left: 3px !important;
}

.u-padding-left-tiny {
  padding-left: 6px !important;
}

.u-padding-left-small {
  padding-left: 12px !important;
}

.u-padding-left-medium {
  padding-left: 36px !important;
}

.u-padding-left-large {
  padding-left: 48px !important;
}

.u-padding-left-x-large {
  padding-left: 72px !important;
}

.u-padding-left-xx-large {
  padding-left: 96px !important;
}

.u-padding-left-none {
  padding-left: 0px !important;
}

.u-padding-left-flush {
  padding-left: 0px !important;
}

.u-padding-horizontal {
  padding-left: 24px !important;
  padding-right: 24px !important;
}

.u-padding-horizontal-micro {
  padding-left: 3px !important;
  padding-right: 3px !important;
}

.u-padding-horizontal-tiny {
  padding-left: 6px !important;
  padding-right: 6px !important;
}

.u-padding-horizontal-small {
  padding-left: 12px !important;
  padding-right: 12px !important;
}

.u-padding-horizontal-medium {
  padding-left: 36px !important;
  padding-right: 36px !important;
}

.u-padding-horizontal-large {
  padding-left: 48px !important;
  padding-right: 48px !important;
}

.u-padding-horizontal-x-large {
  padding-left: 72px !important;
  padding-right: 72px !important;
}

.u-padding-horizontal-xx-large {
  padding-left: 96px !important;
  padding-right: 96px !important;
}

.u-padding-horizontal-none {
  padding-left: 0px !important;
  padding-right: 0px !important;
}

.u-padding-horizontal-flush {
  padding-left: 0px !important;
  padding-right: 0px !important;
}

.u-padding-vertical {
  padding-top: 24px !important;
  padding-bottom: 24px !important;
}

.u-padding-vertical-micro {
  padding-top: 3px !important;
  padding-bottom: 3px !important;
}

.u-padding-vertical-tiny {
  padding-top: 6px !important;
  padding-bottom: 6px !important;
}

.u-padding-vertical-small {
  padding-top: 12px !important;
  padding-bottom: 12px !important;
}

.u-padding-vertical-medium {
  padding-top: 36px !important;
  padding-bottom: 36px !important;
}

.u-padding-vertical-large {
  padding-top: 48px !important;
  padding-bottom: 48px !important;
}

.u-padding-vertical-x-large {
  padding-top: 72px !important;
  padding-bottom: 72px !important;
}

.u-padding-vertical-xx-large {
  padding-top: 96px !important;
  padding-bottom: 96px !important;
}

.u-padding-vertical-none {
  padding-top: 0px !important;
  padding-bottom: 0px !important;
}

.u-padding-vertical-flush {
  padding-top: 0px !important;
  padding-bottom: 0px !important;
}

.u-margin {
  margin: 24px !important;
}

.u-margin-micro {
  margin: 3px !important;
}

.u-margin-tiny {
  margin: 6px !important;
}

.u-margin-small {
  margin: 12px !important;
}

.u-margin-medium {
  margin: 36px !important;
}

.u-margin-large {
  margin: 48px !important;
}

.u-margin-x-large {
  margin: 72px !important;
}

.u-margin-xx-large {
  margin: 96px !important;
}

.u-margin-none {
  margin: 0px !important;
}

.u-margin-flush {
  margin: 0px !important;
}

.u-margin-top {
  margin-top: 24px !important;
}

.u-margin-top-micro {
  margin-top: 3px !important;
}

.u-margin-top-tiny {
  margin-top: 6px !important;
}

.u-margin-top-small {
  margin-top: 12px !important;
}

.u-margin-top-medium {
  margin-top: 36px !important;
}

.u-margin-top-large {
  margin-top: 48px !important;
}

.u-margin-top-x-large {
  margin-top: 72px !important;
}

.u-margin-top-xx-large {
  margin-top: 96px !important;
}

.u-margin-top-none {
  margin-top: 0px !important;
}

.u-margin-top-flush {
  margin-top: 0px !important;
}

.u-margin-right {
  margin-right: 24px !important;
}

.u-margin-right-micro {
  margin-right: 3px !important;
}

.u-margin-right-tiny {
  margin-right: 6px !important;
}

.u-margin-right-small {
  margin-right: 12px !important;
}

.u-margin-right-medium {
  margin-right: 36px !important;
}

.u-margin-right-large {
  margin-right: 48px !important;
}

.u-margin-right-x-large {
  margin-right: 72px !important;
}

.u-margin-right-xx-large {
  margin-right: 96px !important;
}

.u-margin-right-none {
  margin-right: 0px !important;
}

.u-margin-right-flush {
  margin-right: 0px !important;
}

.u-margin-bottom {
  margin-bottom: 24px !important;
}

.u-margin-bottom-micro {
  margin-bottom: 3px !important;
}

.u-margin-bottom-tiny {
  margin-bottom: 6px !important;
}

.u-margin-bottom-small {
  margin-bottom: 12px !important;
}

.u-margin-bottom-medium {
  margin-bottom: 36px !important;
}

.u-margin-bottom-large {
  margin-bottom: 48px !important;
}

.u-margin-bottom-x-large {
  margin-bottom: 72px !important;
}

.u-margin-bottom-xx-large {
  margin-bottom: 96px !important;
}

.u-margin-bottom-none {
  margin-bottom: 0px !important;
}

.u-margin-bottom-flush {
  margin-bottom: 0px !important;
}

.u-margin-left {
  margin-left: 24px !important;
}

.u-margin-left-micro {
  margin-left: 3px !important;
}

.u-margin-left-tiny {
  margin-left: 6px !important;
}

.u-margin-left-small {
  margin-left: 12px !important;
}

.u-margin-left-medium {
  margin-left: 36px !important;
}

.u-margin-left-large {
  margin-left: 48px !important;
}

.u-margin-left-x-large {
  margin-left: 72px !important;
}

.u-margin-left-xx-large {
  margin-left: 96px !important;
}

.u-margin-left-none {
  margin-left: 0px !important;
}

.u-margin-left-flush {
  margin-left: 0px !important;
}

.u-margin-horizontal {
  margin-left: 24px !important;
  margin-right: 24px !important;
}

.u-margin-horizontal-micro {
  margin-left: 3px !important;
  margin-right: 3px !important;
}

.u-margin-horizontal-tiny {
  margin-left: 6px !important;
  margin-right: 6px !important;
}

.u-margin-horizontal-small {
  margin-left: 12px !important;
  margin-right: 12px !important;
}

.u-margin-horizontal-medium {
  margin-left: 36px !important;
  margin-right: 36px !important;
}

.u-margin-horizontal-large {
  margin-left: 48px !important;
  margin-right: 48px !important;
}

.u-margin-horizontal-x-large {
  margin-left: 72px !important;
  margin-right: 72px !important;
}

.u-margin-horizontal-xx-large {
  margin-left: 96px !important;
  margin-right: 96px !important;
}

.u-margin-horizontal-none {
  margin-left: 0px !important;
  margin-right: 0px !important;
}

.u-margin-horizontal-flush {
  margin-left: 0px !important;
  margin-right: 0px !important;
}

.u-margin-vertical {
  margin-top: 24px !important;
  margin-bottom: 24px !important;
}

.u-margin-vertical-micro {
  margin-top: 3px !important;
  margin-bottom: 3px !important;
}

.u-margin-vertical-tiny {
  margin-top: 6px !important;
  margin-bottom: 6px !important;
}

.u-margin-vertical-small {
  margin-top: 12px !important;
  margin-bottom: 12px !important;
}

.u-margin-vertical-medium {
  margin-top: 36px !important;
  margin-bottom: 36px !important;
}

.u-margin-vertical-large {
  margin-top: 48px !important;
  margin-bottom: 48px !important;
}

.u-margin-vertical-x-large {
  margin-top: 72px !important;
  margin-bottom: 72px !important;
}

.u-margin-vertical-xx-large {
  margin-top: 96px !important;
  margin-bottom: 96px !important;
}

.u-margin-vertical-none {
  margin-top: 0px !important;
  margin-bottom: 0px !important;
}

.u-margin-vertical-flush {
  margin-top: 0px !important;
  margin-bottom: 0px !important;
}

/* ==========================================================================
   #RESPONSIVE-SPACINGS
   ========================================================================== */
/**
 * Utility classes enhancing the normal spacing classes by adding responsiveness
 * to them. By default, there are not responsive spacings defined. You can
 * generate responsive spacings by adding entries to the following three Sass
 * maps, e.g.:
 *
 *   $aura-responsive-spacing-directions: (
 *     null: null,
 *     "-bottom": "-bottom",
 *   );
 *
 *   $aura-responsive-spacing-properties: (
 *     "margin": "margin",
 *   );
 *
 *   $aura-responsive-spacing-sizes: (
 *     "-small": $spacing-small,
 *   );
 *
 * This would bring us the following classes:
 *
 *   .u-margin-small@mobile {}
 *   .u-margin-small@tablet {}
 *   .u-margin-small@desktop {}
 *   .u-margin-small@wide {}
 *   .u-margin-bottom-small@mobile {}
 *   .u-margin-bottom-small@tablet {}
 *   .u-margin-bottom-small@desktop {}
 *   .u-margin-bottom-small@wide {}
 *
 * You can change the generated CSS classes by further extending the Sass maps.
 * If you want every ‘normal’ spacing (those from `utilities.spacings`) also as
 * a responsive version, you can just mirror the ‘normal’ spacings:
 *
 *   $aura-responsive-spacing-directions: $global-spacing-directions !default;
 *
 *   $aura-responsive-spacing-properties: $global-spacing-properties !default;
 *
 *   $aura-responsive-spacing-sizes: $global-spacing-sizes !default;
 *
 * BUT BE AWARE: This can generate a huge chunk of extra CSS, depending on the
 * amount of breakpoints you defined. So please check your CSS’ output and
 * filesize!
 */
/* stylelint-disable max-nesting-depth */
/* stylelint-enable max-nesting-depth */
/* ==========================================================================
   #TYPOGRAPHY
   ========================================================================== */
/* Headings
   ========================================================================== */
/**
 * Redefine all of our basic heading styles against utility classes so as to
 * allow for double stranded heading hierarchy, e.g. we semantically need an H2,
 * but we want it to be sized like an H1:
 *
 *   <h2 class="u-h1"></h2>
 *
 */
.u-h1, .u-h1 > * {
  font-size: 50px !important;
  font-size: 3.125rem !important;
  line-height: 1.2 !important;
  font-weight: var(--aura-font-weight-h1, 500) !important;
}

.u-h2, .u-h2 > * {
  font-size: 36px !important;
  font-size: 2.25rem !important;
  line-height: 1.1666666667 !important;
  font-weight: var(--aura-font-weight-h2, 500) !important;
}

.u-h3, .u-h3 > * {
  font-size: 28px !important;
  font-size: 1.75rem !important;
  line-height: 1.2857142857 !important;
  font-weight: var(--aura-font-weight-h3, 600) !important;
}

.u-h4, .u-h4 > * {
  font-size: 24px !important;
  font-size: 1.5rem !important;
  line-height: 1.25 !important;
  font-weight: var(--aura-font-weight-h4, 600) !important;
}

.u-h5, .u-h5 > * {
  font-size: 20px !important;
  font-size: 1.25rem !important;
  line-height: 1.5 !important;
  font-weight: var(--aura-font-weight-h5, 500) !important;
}

.u-h6, .u-h6 > * {
  font-size: 17px !important;
  font-size: 1.0625rem !important;
  line-height: 1.4117647059 !important;
  font-weight: var(--aura-font-weight-h6, 400) !important;
}

/**
 * Set of typography related helper classes for things like:
 * font-size         [ based on the $global-spacing-sizes sizes ]
 * font-style        [ inherit | initial | italic | normal | oblique | unset ]
 * font-weight       [ thin | light | regular | medium | bold | extra | black ]
 * font-variant      [ normal | small-caps]
 * text-aligment     [ left | right | center | justify ]
 * text-transform    [ none | lowercase | uppercase | capitalize ]
 * text-wrapping     [ based on word-wrap() and ellipsis() mixins ]
 * color             [ auto-generated from brand and greyscale color maps ]
 * text-decoration   [ underline | line-through ]
 */
/* Font-size helpers
   ========================================================================== */
.u-font-size {
  font-size: 24px !important;
  font-size: 1.5rem !important;
  line-height: 1.25 !important;
}
.u-font-size-micro {
  font-size: 3px !important;
  font-size: 0.1875rem !important;
  line-height: 4 !important;
}
.u-font-size-tiny {
  font-size: 6px !important;
  font-size: 0.375rem !important;
  line-height: 2 !important;
}
.u-font-size-small {
  font-size: 12px !important;
  font-size: 0.75rem !important;
  line-height: 1.5 !important;
}
.u-font-size-medium {
  font-size: 36px !important;
  font-size: 2.25rem !important;
  line-height: 1.1666666667 !important;
}
.u-font-size-large {
  font-size: 48px !important;
  font-size: 3rem !important;
  line-height: 1.125 !important;
}
.u-font-size-x-large {
  font-size: 36px !important;
  font-size: 2.25rem !important;
  line-height: 1.1666666667 !important;
}
@media (min-width: 48em) {
  .u-font-size-x-large {
    font-size: 72px !important;
    font-size: 4.5rem !important;
    line-height: 1.0833333333 !important;
  }
}
.u-font-size-xx-large {
  font-size: 48px !important;
  font-size: 3rem !important;
  line-height: 1.125 !important;
}
@media (min-width: 48em) {
  .u-font-size-xx-large {
    font-size: 96px !important;
    font-size: 6rem !important;
    line-height: 1.0625 !important;
  }
}
.u-font-size-none {
  font-size: 0px !important;
  font-size: 0rem !important;
  line-height: calc(infinity) !important;
}
.u-font-size-flush {
  font-size: 0px !important;
  font-size: 0rem !important;
  line-height: calc(infinity) !important;
}

/* Font-style
   ========================================================================== */
.u-font-style-inherit {
  font-style: inherit !important;
}

.u-font-style-initial {
  font-style: initial !important;
}

.u-font-style-italic {
  font-style: italic !important;
}

.u-font-style-normal {
  font-style: normal !important;
}

.u-font-style-oblique {
  font-style: oblique !important;
}

.u-font-style-unset {
  font-style: unset !important;
}

/* Font-weight
   ========================================================================== */
.u-font-weight-light {
  font-weight: 300 !important;
}

.u-font-weight-normal {
  font-weight: 400 !important;
}

.u-font-weight-medium {
  font-weight: 500 !important;
}

.u-font-weight-bold {
  font-weight: 700 !important;
}

/* Font-variant
   ========================================================================== */
.u-font-variant-normal {
  font-variant: normal !important;
}

.u-font-variant-small-caps {
  font-variant: small-caps !important;
}

/* Text-align
   ========================================================================== */
.u-text-align-right {
  text-align: right !important;
}

.u-text-align-center {
  text-align: center !important;
}

@media (min-width: 48em) {
  .u-text-align-right\@tablet {
    text-align: right !important;
  }
}
@media (max-width: 47.99em) {
  .u-text-align-right-below-tablet {
    text-align: right !important;
  }
}
@media (min-width: 62em) {
  .u-text-align-right\@desktop {
    text-align: right !important;
  }
}
@media (max-width: 61.99em) {
  .u-text-align-right-below-desktop {
    text-align: right !important;
  }
}
@media (min-width: 75em) {
  .u-text-align-right\@wide {
    text-align: right !important;
  }
}
@media (max-width: 74.99em) {
  .u-text-align-right-below-wide {
    text-align: right !important;
  }
}
@media (min-width: 85.375em) {
  .u-text-align-right\@laptop {
    text-align: right !important;
  }
}
@media (max-width: 85.365em) {
  .u-text-align-right-below-laptop {
    text-align: right !important;
  }
}
@media (min-width: 100em) {
  .u-text-align-right\@x-wide {
    text-align: right !important;
  }
}
@media (max-width: 99.99em) {
  .u-text-align-right-below-x-wide {
    text-align: right !important;
  }
}

@media (min-width: 48em) {
  .u-text-align-center\@tablet {
    text-align: center !important;
  }
}
@media (max-width: 47.99em) {
  .u-text-align-center-below-tablet {
    text-align: center !important;
  }
}
@media (min-width: 62em) {
  .u-text-align-center\@desktop {
    text-align: center !important;
  }
}
@media (max-width: 61.99em) {
  .u-text-align-center-below-desktop {
    text-align: center !important;
  }
}
@media (min-width: 75em) {
  .u-text-align-center\@wide {
    text-align: center !important;
  }
}
@media (max-width: 74.99em) {
  .u-text-align-center-below-wide {
    text-align: center !important;
  }
}
@media (min-width: 85.375em) {
  .u-text-align-center\@laptop {
    text-align: center !important;
  }
}
@media (max-width: 85.365em) {
  .u-text-align-center-below-laptop {
    text-align: center !important;
  }
}
@media (min-width: 100em) {
  .u-text-align-center\@x-wide {
    text-align: center !important;
  }
}
@media (max-width: 99.99em) {
  .u-text-align-center-below-x-wide {
    text-align: center !important;
  }
}

/* Text-transform
   ========================================================================== */
.u-text-transform-none {
  text-transform: none !important;
}

.u-text-transform-lowercase {
  text-transform: lowercase !important;
}

.u-text-transform-uppercase {
  text-transform: uppercase !important;
}

.u-text-transform-capitalize {
  text-transform: capitalize !important;
}

/* Text wrapping
   ========================================================================== */
/**
 * There are times when a really long string of text can overflow the 
 * container of a layout, such as displaying a URL.
 *
 * 1. Wrap string and add hyphens where word breaks. [mixin default]
 * 2. Wrap without adding hyphens, best for URLs.
 * 3. Use ellipsis to truncate text.
 * 
 * Info
 * https://css-tricks.com/snippets/css/prevent-long-urls-from-breaking-out-of-container/
 */
.u-text-wrap {
  overflow-wrap: break-word;
  word-wrap: break-word;
  -ms-word-break: break-all;
  word-break: break-all;
  word-break: break-word;
  hyphens: auto;
  /* [1] */
}

.u-text-wrap-nohyphen {
  overflow-wrap: break-word;
  word-wrap: break-word;
  -ms-word-break: break-all;
  word-break: break-all;
  word-break: break-word;
  hyphens: none;
  /* [2] */
}

.u-text-ellipsis {
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  /* [3] */
}

/* Colors
   ========================================================================== */
.u-color-text--primary {
  color: #006db7 !important;
}
.u-color-text--danger {
  color: #d81124 !important;
}
.u-color-text--black {
  color: black !important;
}
.u-color-text--gray-700 {
  color: #6d6d6d !important;
}
.u-color-text--gray-400 {
  color: #b7b7b8 !important;
}
.u-color-text--gray-100 {
  color: #f2f2f2 !important;
}
.u-color-text--white {
  color: white !important;
}

/* Misc
========================================================================== */
.u-text-underline {
  text-decoration: underline !important;
}

.u-text-strike {
  text-decoration: line-through !important;
}

.u-white-space-nowrap {
  white-space: nowrap !important;
}

.u-line-height-1 {
  line-height: 1 !important;
}

/* ==========================================================================
   #VISIBILITY
   ========================================================================== */
/**
 * Utility classes to put specific visibility values onto elements. The below loops
 * will generate us a suite of classes from the active breakpoint values found in
 * the $breakpoints map in the auracss.scss file, such as:
 *
 *   .u-show-only-@mobile {}
 *   .u-show-only-@mini {}
 *   .u-hide-only-@tablet {}
 *   .u-show-only-@desktop {}
 *   .u-show-@x-wide {}
 *   .u-show-below-xx-wide {}
 *   .u-hide-below-desktop{}
 *
 */
/* Show element only at a specific breakpoint but not before or after.
   ========================================================================== */
/**
 * 1. Get the current index as we iterate through the list of breakpoints so we 
 *    can use it to check for first and last, and to get the next breakpoint up 
 *    in the list.
 * 2. Set $next to the current breakpoint by default, so we only need to change
 *    it until we hit the last item in the list.
 * 3. Get the next breakpoint up from the current breakpoint unless we're at the 
 *    end of the list
 * 4. For the first breakpoint, we only need to set a media query for 
 *    current to next, and for next.
 * 5. For the last breakpoint we only to set a media query for until we hit that 
 *    breakpoint and from that breakpoint.
 * 6. Set the until, to, and from media queries for the breakpoints in between 
 *    first and last.
 */
.u-show-only {
  /* [1] */
  /* [2] */
  /* [3] */
  /* [4] */
  /* [1] */
  /* [2] */
  /* [3] */
  /* [6] */
  /* [1] */
  /* [2] */
  /* [3] */
  /* [6] */
  /* [1] */
  /* [2] */
  /* [3] */
  /* [6] */
  /* [1] */
  /* [2] */
  /* [3] */
  /* [6] */
  /* [1] */
  /* [2] */
  /* [3] */
  /* [5] */
}
@media (min-width: 20em) and (max-width: 47.99em) {
  .u-show-only\@mobile {
    display: inherit !important;
  }
}
@media (min-width: 48em) {
  .u-show-only\@mobile {
    display: none !important;
  }
}
@media (max-width: 47.99em) {
  .u-show-only\@tablet {
    display: none !important;
  }
}
@media (min-width: 48em) and (max-width: 61.99em) {
  .u-show-only\@tablet {
    display: inherit !important;
  }
}
@media (min-width: 62em) {
  .u-show-only\@tablet {
    display: none !important;
  }
}
@media (max-width: 61.99em) {
  .u-show-only\@desktop {
    display: none !important;
  }
}
@media (min-width: 62em) and (max-width: 74.99em) {
  .u-show-only\@desktop {
    display: inherit !important;
  }
}
@media (min-width: 75em) {
  .u-show-only\@desktop {
    display: none !important;
  }
}
@media (max-width: 74.99em) {
  .u-show-only\@wide {
    display: none !important;
  }
}
@media (min-width: 75em) and (max-width: 85.365em) {
  .u-show-only\@wide {
    display: inherit !important;
  }
}
@media (min-width: 85.375em) {
  .u-show-only\@wide {
    display: none !important;
  }
}
@media (max-width: 85.365em) {
  .u-show-only\@laptop {
    display: none !important;
  }
}
@media (min-width: 85.375em) and (max-width: 99.99em) {
  .u-show-only\@laptop {
    display: inherit !important;
  }
}
@media (min-width: 100em) {
  .u-show-only\@laptop {
    display: none !important;
  }
}
@media (max-width: 99.99em) {
  .u-show-only\@x-wide {
    display: none !important;
  }
}
@media (min-width: 100em) {
  .u-show-only\@x-wide {
    display: inherit !important;
  }
}

/* Hide element only at specific breakpoint.
   ========================================================================== */
.u-hide-only {
  /* [1] */
  /* [2] */
  /* [3] */
  /* [4] */
  /* [1] */
  /* [2] */
  /* [3] */
  /* [6] */
  /* [1] */
  /* [2] */
  /* [3] */
  /* [6] */
  /* [1] */
  /* [2] */
  /* [3] */
  /* [6] */
  /* [1] */
  /* [2] */
  /* [3] */
  /* [6] */
  /* [1] */
  /* [2] */
  /* [3] */
  /* [5] */
}
@media (min-width: 20em) and (max-width: 47.99em) {
  .u-hide-only\@mobile {
    display: none !important;
  }
}
@media (min-width: 48em) {
  .u-hide-only\@mobile {
    display: inherit !important;
  }
}
@media (max-width: 47.99em) {
  .u-hide-only\@tablet {
    display: inherit !important;
  }
}
@media (min-width: 48em) and (max-width: 61.99em) {
  .u-hide-only\@tablet {
    display: none !important;
  }
}
@media (min-width: 62em) {
  .u-hide-only\@tablet {
    display: inherit !important;
  }
}
@media (max-width: 61.99em) {
  .u-hide-only\@desktop {
    display: inherit !important;
  }
}
@media (min-width: 62em) and (max-width: 74.99em) {
  .u-hide-only\@desktop {
    display: none !important;
  }
}
@media (min-width: 75em) {
  .u-hide-only\@desktop {
    display: inherit !important;
  }
}
@media (max-width: 74.99em) {
  .u-hide-only\@wide {
    display: inherit !important;
  }
}
@media (min-width: 75em) and (max-width: 85.365em) {
  .u-hide-only\@wide {
    display: none !important;
  }
}
@media (min-width: 85.375em) {
  .u-hide-only\@wide {
    display: inherit !important;
  }
}
@media (max-width: 85.365em) {
  .u-hide-only\@laptop {
    display: inherit !important;
  }
}
@media (min-width: 85.375em) and (max-width: 99.99em) {
  .u-hide-only\@laptop {
    display: none !important;
  }
}
@media (min-width: 100em) {
  .u-hide-only\@laptop {
    display: inherit !important;
  }
}
@media (max-width: 99.99em) {
  .u-hide-only\@x-wide {
    display: inherit !important;
  }
}
@media (min-width: 100em) {
  .u-hide-only\@x-wide {
    display: none !important;
  }
}

/* Show element at a specific breakpoint and beyond.
   ========================================================================== */
.u-show {
  /* [1] */
}
@media (max-width: 47.99em) {
  .u-show\@tablet {
    display: none !important;
  }
}
@media (min-width: 48em) {
  .u-show\@tablet {
    display: inherit !important;
  }
}

/* Show element below a specific breakpoint only.
   ========================================================================== */
.u-show-below {
  /* [1] */
}
@media (max-width: 47.99em) {
  .u-show-below-tablet {
    display: inherit !important;
  }
}
@media (min-width: 48em) {
  .u-show-below-tablet {
    display: none !important;
  }
}

/* Hide element below specific breakpoint.
   ========================================================================== */
.u-hide-below {
  /* [1] */
  /* [1] */
  /* [1] */
  /* [1] */
  /* [1] */
  /* [1] */
}
@media (max-width: 47.99em) {
  .u-hide-below-tablet {
    display: none !important;
  }
}
@media (max-width: 61.99em) {
  .u-hide-below-desktop {
    display: none !important;
  }
}
@media (max-width: 74.99em) {
  .u-hide-below-wide {
    display: none !important;
  }
}
@media (max-width: 85.365em) {
  .u-hide-below-laptop {
    display: none !important;
  }
}
@media (max-width: 99.99em) {
  .u-hide-below-x-wide {
    display: none !important;
  }
}

/* Misc
   ========================================================================== */
.u-show-all {
  display: block !important;
  overflow: visible !important;
}

[data-hidden=true] {
  display: none !important;
}

/**
 * Hide only visually, but have it available for screen readers:
 * http://snook.ca/archives/html_and_css/hiding-content-for-accessibility
 */
.u-hidden-visually {
  border: 0 !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  height: 1px !important;
  margin: -1px !important;
  overflow: hidden !important;
  padding: 0 !important;
  position: absolute !important;
  white-space: nowrap !important;
  width: 1px !important;
}

/**
 * Hide visually and from screen readers.
 */
.u-hidden {
  display: none !important;
}

/* ==========================================================================
   #WIDTHS
   ========================================================================== */
/**
 * AuraCSS generates a series of utility classes that give a fluid width to
 * whichever element they’re applied, e.g.:
 *
 *   <img src="" alt="" class="u-1/2" />
 *
 * These classes are most commonly used in conjunction with our layout system,
 * e.g.:
 *
 *   <div class="o-layout__item  u-1/2">
 *
 * By default, AuraCSS will also generate responsive variants of each of these
 * classes by using your Sass MQ configuration, e.g.:
 *
 *   <div class="o-layout__item  u-1/1  u-1/2@tablet  u-1/3@desktop">
 *
 * Optionally, AuraCSS can generate offset classes which can push and pull
 * elements left and right by a specified amount, e.g.:
 *
 *   <div class="o-layout__item  u-2/3  u-pull-1/3">
 *
 * This is useful for making very granular changes to the rendered order of
 * items in a layout.
 *
 * N.B. This option is turned off by default.
 */
/**
 * A series of width helper classes that you can use to size things like grid
 * systems. Classes take a fraction-like format (e.g. `.u-2/3`). Use these in
 * your markup:
 *
 * <div class="u-7/12">
 *
 * The following will generate widths helper classes based on the fractions
 * defined in the `$aura-fractions` list.
 */
.u-1\/1 {
  width: 100% !important;
}

/**
 * 1. Reset any leftover or conflicting `left`/`right` values.
 */
.u-push-1\/1 {
  position: relative !important;
  right: auto !important; /* [1] */
  left: 100% !important;
}

.u-pull-1\/1 {
  position: relative !important;
  right: 100% !important;
  left: auto !important; /* [1] */
}

.u-1\/2 {
  width: 50% !important;
}

/**
 * 1. Reset any leftover or conflicting `left`/`right` values.
 */
.u-push-1\/2 {
  position: relative !important;
  right: auto !important; /* [1] */
  left: 50% !important;
}

.u-pull-1\/2 {
  position: relative !important;
  right: 50% !important;
  left: auto !important; /* [1] */
}

.u-2\/2 {
  width: 100% !important;
}

/**
 * 1. Reset any leftover or conflicting `left`/`right` values.
 */
.u-push-2\/2 {
  position: relative !important;
  right: auto !important; /* [1] */
  left: 100% !important;
}

.u-pull-2\/2 {
  position: relative !important;
  right: 100% !important;
  left: auto !important; /* [1] */
}

.u-1\/3 {
  width: 33.3333333333% !important;
}

/**
 * 1. Reset any leftover or conflicting `left`/`right` values.
 */
.u-push-1\/3 {
  position: relative !important;
  right: auto !important; /* [1] */
  left: 33.3333333333% !important;
}

.u-pull-1\/3 {
  position: relative !important;
  right: 33.3333333333% !important;
  left: auto !important; /* [1] */
}

.u-2\/3 {
  width: 66.6666666667% !important;
}

/**
 * 1. Reset any leftover or conflicting `left`/`right` values.
 */
.u-push-2\/3 {
  position: relative !important;
  right: auto !important; /* [1] */
  left: 66.6666666667% !important;
}

.u-pull-2\/3 {
  position: relative !important;
  right: 66.6666666667% !important;
  left: auto !important; /* [1] */
}

.u-3\/3 {
  width: 100% !important;
}

/**
 * 1. Reset any leftover or conflicting `left`/`right` values.
 */
.u-push-3\/3 {
  position: relative !important;
  right: auto !important; /* [1] */
  left: 100% !important;
}

.u-pull-3\/3 {
  position: relative !important;
  right: 100% !important;
  left: auto !important; /* [1] */
}

.u-1\/4 {
  width: 25% !important;
}

/**
 * 1. Reset any leftover or conflicting `left`/`right` values.
 */
.u-push-1\/4 {
  position: relative !important;
  right: auto !important; /* [1] */
  left: 25% !important;
}

.u-pull-1\/4 {
  position: relative !important;
  right: 25% !important;
  left: auto !important; /* [1] */
}

.u-2\/4 {
  width: 50% !important;
}

/**
 * 1. Reset any leftover or conflicting `left`/`right` values.
 */
.u-push-2\/4 {
  position: relative !important;
  right: auto !important; /* [1] */
  left: 50% !important;
}

.u-pull-2\/4 {
  position: relative !important;
  right: 50% !important;
  left: auto !important; /* [1] */
}

.u-3\/4 {
  width: 75% !important;
}

/**
 * 1. Reset any leftover or conflicting `left`/`right` values.
 */
.u-push-3\/4 {
  position: relative !important;
  right: auto !important; /* [1] */
  left: 75% !important;
}

.u-pull-3\/4 {
  position: relative !important;
  right: 75% !important;
  left: auto !important; /* [1] */
}

.u-4\/4 {
  width: 100% !important;
}

/**
 * 1. Reset any leftover or conflicting `left`/`right` values.
 */
.u-push-4\/4 {
  position: relative !important;
  right: auto !important; /* [1] */
  left: 100% !important;
}

.u-pull-4\/4 {
  position: relative !important;
  right: 100% !important;
  left: auto !important; /* [1] */
}

.u-1\/5 {
  width: 20% !important;
}

/**
 * 1. Reset any leftover or conflicting `left`/`right` values.
 */
.u-push-1\/5 {
  position: relative !important;
  right: auto !important; /* [1] */
  left: 20% !important;
}

.u-pull-1\/5 {
  position: relative !important;
  right: 20% !important;
  left: auto !important; /* [1] */
}

.u-2\/5 {
  width: 40% !important;
}

/**
 * 1. Reset any leftover or conflicting `left`/`right` values.
 */
.u-push-2\/5 {
  position: relative !important;
  right: auto !important; /* [1] */
  left: 40% !important;
}

.u-pull-2\/5 {
  position: relative !important;
  right: 40% !important;
  left: auto !important; /* [1] */
}

.u-3\/5 {
  width: 60% !important;
}

/**
 * 1. Reset any leftover or conflicting `left`/`right` values.
 */
.u-push-3\/5 {
  position: relative !important;
  right: auto !important; /* [1] */
  left: 60% !important;
}

.u-pull-3\/5 {
  position: relative !important;
  right: 60% !important;
  left: auto !important; /* [1] */
}

.u-4\/5 {
  width: 80% !important;
}

/**
 * 1. Reset any leftover or conflicting `left`/`right` values.
 */
.u-push-4\/5 {
  position: relative !important;
  right: auto !important; /* [1] */
  left: 80% !important;
}

.u-pull-4\/5 {
  position: relative !important;
  right: 80% !important;
  left: auto !important; /* [1] */
}

.u-5\/5 {
  width: 100% !important;
}

/**
 * 1. Reset any leftover or conflicting `left`/`right` values.
 */
.u-push-5\/5 {
  position: relative !important;
  right: auto !important; /* [1] */
  left: 100% !important;
}

.u-pull-5\/5 {
  position: relative !important;
  right: 100% !important;
  left: auto !important; /* [1] */
}

.u-1\/6 {
  width: 16.6666666667% !important;
}

/**
 * 1. Reset any leftover or conflicting `left`/`right` values.
 */
.u-push-1\/6 {
  position: relative !important;
  right: auto !important; /* [1] */
  left: 16.6666666667% !important;
}

.u-pull-1\/6 {
  position: relative !important;
  right: 16.6666666667% !important;
  left: auto !important; /* [1] */
}

.u-2\/6 {
  width: 33.3333333333% !important;
}

/**
 * 1. Reset any leftover or conflicting `left`/`right` values.
 */
.u-push-2\/6 {
  position: relative !important;
  right: auto !important; /* [1] */
  left: 33.3333333333% !important;
}

.u-pull-2\/6 {
  position: relative !important;
  right: 33.3333333333% !important;
  left: auto !important; /* [1] */
}

.u-3\/6 {
  width: 50% !important;
}

/**
 * 1. Reset any leftover or conflicting `left`/`right` values.
 */
.u-push-3\/6 {
  position: relative !important;
  right: auto !important; /* [1] */
  left: 50% !important;
}

.u-pull-3\/6 {
  position: relative !important;
  right: 50% !important;
  left: auto !important; /* [1] */
}

.u-4\/6 {
  width: 66.6666666667% !important;
}

/**
 * 1. Reset any leftover or conflicting `left`/`right` values.
 */
.u-push-4\/6 {
  position: relative !important;
  right: auto !important; /* [1] */
  left: 66.6666666667% !important;
}

.u-pull-4\/6 {
  position: relative !important;
  right: 66.6666666667% !important;
  left: auto !important; /* [1] */
}

.u-5\/6 {
  width: 83.3333333333% !important;
}

/**
 * 1. Reset any leftover or conflicting `left`/`right` values.
 */
.u-push-5\/6 {
  position: relative !important;
  right: auto !important; /* [1] */
  left: 83.3333333333% !important;
}

.u-pull-5\/6 {
  position: relative !important;
  right: 83.3333333333% !important;
  left: auto !important; /* [1] */
}

.u-6\/6 {
  width: 100% !important;
}

/**
 * 1. Reset any leftover or conflicting `left`/`right` values.
 */
.u-push-6\/6 {
  position: relative !important;
  right: auto !important; /* [1] */
  left: 100% !important;
}

.u-pull-6\/6 {
  position: relative !important;
  right: 100% !important;
  left: auto !important; /* [1] */
}

.u-1\/7 {
  width: 14.2857142857% !important;
}

/**
 * 1. Reset any leftover or conflicting `left`/`right` values.
 */
.u-push-1\/7 {
  position: relative !important;
  right: auto !important; /* [1] */
  left: 14.2857142857% !important;
}

.u-pull-1\/7 {
  position: relative !important;
  right: 14.2857142857% !important;
  left: auto !important; /* [1] */
}

.u-2\/7 {
  width: 28.5714285714% !important;
}

/**
 * 1. Reset any leftover or conflicting `left`/`right` values.
 */
.u-push-2\/7 {
  position: relative !important;
  right: auto !important; /* [1] */
  left: 28.5714285714% !important;
}

.u-pull-2\/7 {
  position: relative !important;
  right: 28.5714285714% !important;
  left: auto !important; /* [1] */
}

.u-3\/7 {
  width: 42.8571428571% !important;
}

/**
 * 1. Reset any leftover or conflicting `left`/`right` values.
 */
.u-push-3\/7 {
  position: relative !important;
  right: auto !important; /* [1] */
  left: 42.8571428571% !important;
}

.u-pull-3\/7 {
  position: relative !important;
  right: 42.8571428571% !important;
  left: auto !important; /* [1] */
}

.u-4\/7 {
  width: 57.1428571429% !important;
}

/**
 * 1. Reset any leftover or conflicting `left`/`right` values.
 */
.u-push-4\/7 {
  position: relative !important;
  right: auto !important; /* [1] */
  left: 57.1428571429% !important;
}

.u-pull-4\/7 {
  position: relative !important;
  right: 57.1428571429% !important;
  left: auto !important; /* [1] */
}

.u-5\/7 {
  width: 71.4285714286% !important;
}

/**
 * 1. Reset any leftover or conflicting `left`/`right` values.
 */
.u-push-5\/7 {
  position: relative !important;
  right: auto !important; /* [1] */
  left: 71.4285714286% !important;
}

.u-pull-5\/7 {
  position: relative !important;
  right: 71.4285714286% !important;
  left: auto !important; /* [1] */
}

.u-6\/7 {
  width: 85.7142857143% !important;
}

/**
 * 1. Reset any leftover or conflicting `left`/`right` values.
 */
.u-push-6\/7 {
  position: relative !important;
  right: auto !important; /* [1] */
  left: 85.7142857143% !important;
}

.u-pull-6\/7 {
  position: relative !important;
  right: 85.7142857143% !important;
  left: auto !important; /* [1] */
}

.u-7\/7 {
  width: 100% !important;
}

/**
 * 1. Reset any leftover or conflicting `left`/`right` values.
 */
.u-push-7\/7 {
  position: relative !important;
  right: auto !important; /* [1] */
  left: 100% !important;
}

.u-pull-7\/7 {
  position: relative !important;
  right: 100% !important;
  left: auto !important; /* [1] */
}

.u-1\/8 {
  width: 12.5% !important;
}

/**
 * 1. Reset any leftover or conflicting `left`/`right` values.
 */
.u-push-1\/8 {
  position: relative !important;
  right: auto !important; /* [1] */
  left: 12.5% !important;
}

.u-pull-1\/8 {
  position: relative !important;
  right: 12.5% !important;
  left: auto !important; /* [1] */
}

.u-2\/8 {
  width: 25% !important;
}

/**
 * 1. Reset any leftover or conflicting `left`/`right` values.
 */
.u-push-2\/8 {
  position: relative !important;
  right: auto !important; /* [1] */
  left: 25% !important;
}

.u-pull-2\/8 {
  position: relative !important;
  right: 25% !important;
  left: auto !important; /* [1] */
}

.u-3\/8 {
  width: 37.5% !important;
}

/**
 * 1. Reset any leftover or conflicting `left`/`right` values.
 */
.u-push-3\/8 {
  position: relative !important;
  right: auto !important; /* [1] */
  left: 37.5% !important;
}

.u-pull-3\/8 {
  position: relative !important;
  right: 37.5% !important;
  left: auto !important; /* [1] */
}

.u-4\/8 {
  width: 50% !important;
}

/**
 * 1. Reset any leftover or conflicting `left`/`right` values.
 */
.u-push-4\/8 {
  position: relative !important;
  right: auto !important; /* [1] */
  left: 50% !important;
}

.u-pull-4\/8 {
  position: relative !important;
  right: 50% !important;
  left: auto !important; /* [1] */
}

.u-5\/8 {
  width: 62.5% !important;
}

/**
 * 1. Reset any leftover or conflicting `left`/`right` values.
 */
.u-push-5\/8 {
  position: relative !important;
  right: auto !important; /* [1] */
  left: 62.5% !important;
}

.u-pull-5\/8 {
  position: relative !important;
  right: 62.5% !important;
  left: auto !important; /* [1] */
}

.u-6\/8 {
  width: 75% !important;
}

/**
 * 1. Reset any leftover or conflicting `left`/`right` values.
 */
.u-push-6\/8 {
  position: relative !important;
  right: auto !important; /* [1] */
  left: 75% !important;
}

.u-pull-6\/8 {
  position: relative !important;
  right: 75% !important;
  left: auto !important; /* [1] */
}

.u-7\/8 {
  width: 87.5% !important;
}

/**
 * 1. Reset any leftover or conflicting `left`/`right` values.
 */
.u-push-7\/8 {
  position: relative !important;
  right: auto !important; /* [1] */
  left: 87.5% !important;
}

.u-pull-7\/8 {
  position: relative !important;
  right: 87.5% !important;
  left: auto !important; /* [1] */
}

.u-8\/8 {
  width: 100% !important;
}

/**
 * 1. Reset any leftover or conflicting `left`/`right` values.
 */
.u-push-8\/8 {
  position: relative !important;
  right: auto !important; /* [1] */
  left: 100% !important;
}

.u-pull-8\/8 {
  position: relative !important;
  right: 100% !important;
  left: auto !important; /* [1] */
}

.u-1\/9 {
  width: 11.1111111111% !important;
}

/**
 * 1. Reset any leftover or conflicting `left`/`right` values.
 */
.u-push-1\/9 {
  position: relative !important;
  right: auto !important; /* [1] */
  left: 11.1111111111% !important;
}

.u-pull-1\/9 {
  position: relative !important;
  right: 11.1111111111% !important;
  left: auto !important; /* [1] */
}

.u-2\/9 {
  width: 22.2222222222% !important;
}

/**
 * 1. Reset any leftover or conflicting `left`/`right` values.
 */
.u-push-2\/9 {
  position: relative !important;
  right: auto !important; /* [1] */
  left: 22.2222222222% !important;
}

.u-pull-2\/9 {
  position: relative !important;
  right: 22.2222222222% !important;
  left: auto !important; /* [1] */
}

.u-3\/9 {
  width: 33.3333333333% !important;
}

/**
 * 1. Reset any leftover or conflicting `left`/`right` values.
 */
.u-push-3\/9 {
  position: relative !important;
  right: auto !important; /* [1] */
  left: 33.3333333333% !important;
}

.u-pull-3\/9 {
  position: relative !important;
  right: 33.3333333333% !important;
  left: auto !important; /* [1] */
}

.u-4\/9 {
  width: 44.4444444444% !important;
}

/**
 * 1. Reset any leftover or conflicting `left`/`right` values.
 */
.u-push-4\/9 {
  position: relative !important;
  right: auto !important; /* [1] */
  left: 44.4444444444% !important;
}

.u-pull-4\/9 {
  position: relative !important;
  right: 44.4444444444% !important;
  left: auto !important; /* [1] */
}

.u-5\/9 {
  width: 55.5555555556% !important;
}

/**
 * 1. Reset any leftover or conflicting `left`/`right` values.
 */
.u-push-5\/9 {
  position: relative !important;
  right: auto !important; /* [1] */
  left: 55.5555555556% !important;
}

.u-pull-5\/9 {
  position: relative !important;
  right: 55.5555555556% !important;
  left: auto !important; /* [1] */
}

.u-6\/9 {
  width: 66.6666666667% !important;
}

/**
 * 1. Reset any leftover or conflicting `left`/`right` values.
 */
.u-push-6\/9 {
  position: relative !important;
  right: auto !important; /* [1] */
  left: 66.6666666667% !important;
}

.u-pull-6\/9 {
  position: relative !important;
  right: 66.6666666667% !important;
  left: auto !important; /* [1] */
}

.u-7\/9 {
  width: 77.7777777778% !important;
}

/**
 * 1. Reset any leftover or conflicting `left`/`right` values.
 */
.u-push-7\/9 {
  position: relative !important;
  right: auto !important; /* [1] */
  left: 77.7777777778% !important;
}

.u-pull-7\/9 {
  position: relative !important;
  right: 77.7777777778% !important;
  left: auto !important; /* [1] */
}

.u-8\/9 {
  width: 88.8888888889% !important;
}

/**
 * 1. Reset any leftover or conflicting `left`/`right` values.
 */
.u-push-8\/9 {
  position: relative !important;
  right: auto !important; /* [1] */
  left: 88.8888888889% !important;
}

.u-pull-8\/9 {
  position: relative !important;
  right: 88.8888888889% !important;
  left: auto !important; /* [1] */
}

.u-9\/9 {
  width: 100% !important;
}

/**
 * 1. Reset any leftover or conflicting `left`/`right` values.
 */
.u-push-9\/9 {
  position: relative !important;
  right: auto !important; /* [1] */
  left: 100% !important;
}

.u-pull-9\/9 {
  position: relative !important;
  right: 100% !important;
  left: auto !important; /* [1] */
}

.u-1\/10 {
  width: 10% !important;
}

/**
 * 1. Reset any leftover or conflicting `left`/`right` values.
 */
.u-push-1\/10 {
  position: relative !important;
  right: auto !important; /* [1] */
  left: 10% !important;
}

.u-pull-1\/10 {
  position: relative !important;
  right: 10% !important;
  left: auto !important; /* [1] */
}

.u-2\/10 {
  width: 20% !important;
}

/**
 * 1. Reset any leftover or conflicting `left`/`right` values.
 */
.u-push-2\/10 {
  position: relative !important;
  right: auto !important; /* [1] */
  left: 20% !important;
}

.u-pull-2\/10 {
  position: relative !important;
  right: 20% !important;
  left: auto !important; /* [1] */
}

.u-3\/10 {
  width: 30% !important;
}

/**
 * 1. Reset any leftover or conflicting `left`/`right` values.
 */
.u-push-3\/10 {
  position: relative !important;
  right: auto !important; /* [1] */
  left: 30% !important;
}

.u-pull-3\/10 {
  position: relative !important;
  right: 30% !important;
  left: auto !important; /* [1] */
}

.u-4\/10 {
  width: 40% !important;
}

/**
 * 1. Reset any leftover or conflicting `left`/`right` values.
 */
.u-push-4\/10 {
  position: relative !important;
  right: auto !important; /* [1] */
  left: 40% !important;
}

.u-pull-4\/10 {
  position: relative !important;
  right: 40% !important;
  left: auto !important; /* [1] */
}

.u-5\/10 {
  width: 50% !important;
}

/**
 * 1. Reset any leftover or conflicting `left`/`right` values.
 */
.u-push-5\/10 {
  position: relative !important;
  right: auto !important; /* [1] */
  left: 50% !important;
}

.u-pull-5\/10 {
  position: relative !important;
  right: 50% !important;
  left: auto !important; /* [1] */
}

.u-6\/10 {
  width: 60% !important;
}

/**
 * 1. Reset any leftover or conflicting `left`/`right` values.
 */
.u-push-6\/10 {
  position: relative !important;
  right: auto !important; /* [1] */
  left: 60% !important;
}

.u-pull-6\/10 {
  position: relative !important;
  right: 60% !important;
  left: auto !important; /* [1] */
}

.u-7\/10 {
  width: 70% !important;
}

/**
 * 1. Reset any leftover or conflicting `left`/`right` values.
 */
.u-push-7\/10 {
  position: relative !important;
  right: auto !important; /* [1] */
  left: 70% !important;
}

.u-pull-7\/10 {
  position: relative !important;
  right: 70% !important;
  left: auto !important; /* [1] */
}

.u-8\/10 {
  width: 80% !important;
}

/**
 * 1. Reset any leftover or conflicting `left`/`right` values.
 */
.u-push-8\/10 {
  position: relative !important;
  right: auto !important; /* [1] */
  left: 80% !important;
}

.u-pull-8\/10 {
  position: relative !important;
  right: 80% !important;
  left: auto !important; /* [1] */
}

.u-9\/10 {
  width: 90% !important;
}

/**
 * 1. Reset any leftover or conflicting `left`/`right` values.
 */
.u-push-9\/10 {
  position: relative !important;
  right: auto !important; /* [1] */
  left: 90% !important;
}

.u-pull-9\/10 {
  position: relative !important;
  right: 90% !important;
  left: auto !important; /* [1] */
}

.u-10\/10 {
  width: 100% !important;
}

/**
 * 1. Reset any leftover or conflicting `left`/`right` values.
 */
.u-push-10\/10 {
  position: relative !important;
  right: auto !important; /* [1] */
  left: 100% !important;
}

.u-pull-10\/10 {
  position: relative !important;
  right: 100% !important;
  left: auto !important; /* [1] */
}

.u-1\/11 {
  width: 9.0909090909% !important;
}

/**
 * 1. Reset any leftover or conflicting `left`/`right` values.
 */
.u-push-1\/11 {
  position: relative !important;
  right: auto !important; /* [1] */
  left: 9.0909090909% !important;
}

.u-pull-1\/11 {
  position: relative !important;
  right: 9.0909090909% !important;
  left: auto !important; /* [1] */
}

.u-2\/11 {
  width: 18.1818181818% !important;
}

/**
 * 1. Reset any leftover or conflicting `left`/`right` values.
 */
.u-push-2\/11 {
  position: relative !important;
  right: auto !important; /* [1] */
  left: 18.1818181818% !important;
}

.u-pull-2\/11 {
  position: relative !important;
  right: 18.1818181818% !important;
  left: auto !important; /* [1] */
}

.u-3\/11 {
  width: 27.2727272727% !important;
}

/**
 * 1. Reset any leftover or conflicting `left`/`right` values.
 */
.u-push-3\/11 {
  position: relative !important;
  right: auto !important; /* [1] */
  left: 27.2727272727% !important;
}

.u-pull-3\/11 {
  position: relative !important;
  right: 27.2727272727% !important;
  left: auto !important; /* [1] */
}

.u-4\/11 {
  width: 36.3636363636% !important;
}

/**
 * 1. Reset any leftover or conflicting `left`/`right` values.
 */
.u-push-4\/11 {
  position: relative !important;
  right: auto !important; /* [1] */
  left: 36.3636363636% !important;
}

.u-pull-4\/11 {
  position: relative !important;
  right: 36.3636363636% !important;
  left: auto !important; /* [1] */
}

.u-5\/11 {
  width: 45.4545454545% !important;
}

/**
 * 1. Reset any leftover or conflicting `left`/`right` values.
 */
.u-push-5\/11 {
  position: relative !important;
  right: auto !important; /* [1] */
  left: 45.4545454545% !important;
}

.u-pull-5\/11 {
  position: relative !important;
  right: 45.4545454545% !important;
  left: auto !important; /* [1] */
}

.u-6\/11 {
  width: 54.5454545455% !important;
}

/**
 * 1. Reset any leftover or conflicting `left`/`right` values.
 */
.u-push-6\/11 {
  position: relative !important;
  right: auto !important; /* [1] */
  left: 54.5454545455% !important;
}

.u-pull-6\/11 {
  position: relative !important;
  right: 54.5454545455% !important;
  left: auto !important; /* [1] */
}

.u-7\/11 {
  width: 63.6363636364% !important;
}

/**
 * 1. Reset any leftover or conflicting `left`/`right` values.
 */
.u-push-7\/11 {
  position: relative !important;
  right: auto !important; /* [1] */
  left: 63.6363636364% !important;
}

.u-pull-7\/11 {
  position: relative !important;
  right: 63.6363636364% !important;
  left: auto !important; /* [1] */
}

.u-8\/11 {
  width: 72.7272727273% !important;
}

/**
 * 1. Reset any leftover or conflicting `left`/`right` values.
 */
.u-push-8\/11 {
  position: relative !important;
  right: auto !important; /* [1] */
  left: 72.7272727273% !important;
}

.u-pull-8\/11 {
  position: relative !important;
  right: 72.7272727273% !important;
  left: auto !important; /* [1] */
}

.u-9\/11 {
  width: 81.8181818182% !important;
}

/**
 * 1. Reset any leftover or conflicting `left`/`right` values.
 */
.u-push-9\/11 {
  position: relative !important;
  right: auto !important; /* [1] */
  left: 81.8181818182% !important;
}

.u-pull-9\/11 {
  position: relative !important;
  right: 81.8181818182% !important;
  left: auto !important; /* [1] */
}

.u-10\/11 {
  width: 90.9090909091% !important;
}

/**
 * 1. Reset any leftover or conflicting `left`/`right` values.
 */
.u-push-10\/11 {
  position: relative !important;
  right: auto !important; /* [1] */
  left: 90.9090909091% !important;
}

.u-pull-10\/11 {
  position: relative !important;
  right: 90.9090909091% !important;
  left: auto !important; /* [1] */
}

.u-11\/11 {
  width: 100% !important;
}

/**
 * 1. Reset any leftover or conflicting `left`/`right` values.
 */
.u-push-11\/11 {
  position: relative !important;
  right: auto !important; /* [1] */
  left: 100% !important;
}

.u-pull-11\/11 {
  position: relative !important;
  right: 100% !important;
  left: auto !important; /* [1] */
}

.u-1\/12 {
  width: 8.3333333333% !important;
}

/**
 * 1. Reset any leftover or conflicting `left`/`right` values.
 */
.u-push-1\/12 {
  position: relative !important;
  right: auto !important; /* [1] */
  left: 8.3333333333% !important;
}

.u-pull-1\/12 {
  position: relative !important;
  right: 8.3333333333% !important;
  left: auto !important; /* [1] */
}

.u-2\/12 {
  width: 16.6666666667% !important;
}

/**
 * 1. Reset any leftover or conflicting `left`/`right` values.
 */
.u-push-2\/12 {
  position: relative !important;
  right: auto !important; /* [1] */
  left: 16.6666666667% !important;
}

.u-pull-2\/12 {
  position: relative !important;
  right: 16.6666666667% !important;
  left: auto !important; /* [1] */
}

.u-3\/12 {
  width: 25% !important;
}

/**
 * 1. Reset any leftover or conflicting `left`/`right` values.
 */
.u-push-3\/12 {
  position: relative !important;
  right: auto !important; /* [1] */
  left: 25% !important;
}

.u-pull-3\/12 {
  position: relative !important;
  right: 25% !important;
  left: auto !important; /* [1] */
}

.u-4\/12 {
  width: 33.3333333333% !important;
}

/**
 * 1. Reset any leftover or conflicting `left`/`right` values.
 */
.u-push-4\/12 {
  position: relative !important;
  right: auto !important; /* [1] */
  left: 33.3333333333% !important;
}

.u-pull-4\/12 {
  position: relative !important;
  right: 33.3333333333% !important;
  left: auto !important; /* [1] */
}

.u-5\/12 {
  width: 41.6666666667% !important;
}

/**
 * 1. Reset any leftover or conflicting `left`/`right` values.
 */
.u-push-5\/12 {
  position: relative !important;
  right: auto !important; /* [1] */
  left: 41.6666666667% !important;
}

.u-pull-5\/12 {
  position: relative !important;
  right: 41.6666666667% !important;
  left: auto !important; /* [1] */
}

.u-6\/12 {
  width: 50% !important;
}

/**
 * 1. Reset any leftover or conflicting `left`/`right` values.
 */
.u-push-6\/12 {
  position: relative !important;
  right: auto !important; /* [1] */
  left: 50% !important;
}

.u-pull-6\/12 {
  position: relative !important;
  right: 50% !important;
  left: auto !important; /* [1] */
}

.u-7\/12 {
  width: 58.3333333333% !important;
}

/**
 * 1. Reset any leftover or conflicting `left`/`right` values.
 */
.u-push-7\/12 {
  position: relative !important;
  right: auto !important; /* [1] */
  left: 58.3333333333% !important;
}

.u-pull-7\/12 {
  position: relative !important;
  right: 58.3333333333% !important;
  left: auto !important; /* [1] */
}

.u-8\/12 {
  width: 66.6666666667% !important;
}

/**
 * 1. Reset any leftover or conflicting `left`/`right` values.
 */
.u-push-8\/12 {
  position: relative !important;
  right: auto !important; /* [1] */
  left: 66.6666666667% !important;
}

.u-pull-8\/12 {
  position: relative !important;
  right: 66.6666666667% !important;
  left: auto !important; /* [1] */
}

.u-9\/12 {
  width: 75% !important;
}

/**
 * 1. Reset any leftover or conflicting `left`/`right` values.
 */
.u-push-9\/12 {
  position: relative !important;
  right: auto !important; /* [1] */
  left: 75% !important;
}

.u-pull-9\/12 {
  position: relative !important;
  right: 75% !important;
  left: auto !important; /* [1] */
}

.u-10\/12 {
  width: 83.3333333333% !important;
}

/**
 * 1. Reset any leftover or conflicting `left`/`right` values.
 */
.u-push-10\/12 {
  position: relative !important;
  right: auto !important; /* [1] */
  left: 83.3333333333% !important;
}

.u-pull-10\/12 {
  position: relative !important;
  right: 83.3333333333% !important;
  left: auto !important; /* [1] */
}

.u-11\/12 {
  width: 91.6666666667% !important;
}

/**
 * 1. Reset any leftover or conflicting `left`/`right` values.
 */
.u-push-11\/12 {
  position: relative !important;
  right: auto !important; /* [1] */
  left: 91.6666666667% !important;
}

.u-pull-11\/12 {
  position: relative !important;
  right: 91.6666666667% !important;
  left: auto !important; /* [1] */
}

.u-12\/12 {
  width: 100% !important;
}

/**
 * 1. Reset any leftover or conflicting `left`/`right` values.
 */
.u-push-12\/12 {
  position: relative !important;
  right: auto !important; /* [1] */
  left: 100% !important;
}

.u-pull-12\/12 {
  position: relative !important;
  right: 100% !important;
  left: auto !important; /* [1] */
}

/**
 * If we’re using Sass-MQ, automatically generate grid system(s) for each of our
 * defined breakpoints, and give them a Responsive Suffix, e.g.:
 *
 * <div class="u-3/12@mobile">
 */
@media (min-width: 20em) {
  .u-1\/1\@mobile {
    width: 100% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-1\/1\@mobile {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 100% !important;
  }
  .u-pull-1\/1\@mobile {
    position: relative !important;
    right: 100% !important;
    left: auto !important; /* [1] */
  }
  .u-1\/2\@mobile {
    width: 50% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-1\/2\@mobile {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 50% !important;
  }
  .u-pull-1\/2\@mobile {
    position: relative !important;
    right: 50% !important;
    left: auto !important; /* [1] */
  }
  .u-2\/2\@mobile {
    width: 100% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-2\/2\@mobile {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 100% !important;
  }
  .u-pull-2\/2\@mobile {
    position: relative !important;
    right: 100% !important;
    left: auto !important; /* [1] */
  }
  .u-1\/3\@mobile {
    width: 33.3333333333% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-1\/3\@mobile {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 33.3333333333% !important;
  }
  .u-pull-1\/3\@mobile {
    position: relative !important;
    right: 33.3333333333% !important;
    left: auto !important; /* [1] */
  }
  .u-2\/3\@mobile {
    width: 66.6666666667% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-2\/3\@mobile {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 66.6666666667% !important;
  }
  .u-pull-2\/3\@mobile {
    position: relative !important;
    right: 66.6666666667% !important;
    left: auto !important; /* [1] */
  }
  .u-3\/3\@mobile {
    width: 100% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-3\/3\@mobile {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 100% !important;
  }
  .u-pull-3\/3\@mobile {
    position: relative !important;
    right: 100% !important;
    left: auto !important; /* [1] */
  }
  .u-1\/4\@mobile {
    width: 25% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-1\/4\@mobile {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 25% !important;
  }
  .u-pull-1\/4\@mobile {
    position: relative !important;
    right: 25% !important;
    left: auto !important; /* [1] */
  }
  .u-2\/4\@mobile {
    width: 50% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-2\/4\@mobile {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 50% !important;
  }
  .u-pull-2\/4\@mobile {
    position: relative !important;
    right: 50% !important;
    left: auto !important; /* [1] */
  }
  .u-3\/4\@mobile {
    width: 75% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-3\/4\@mobile {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 75% !important;
  }
  .u-pull-3\/4\@mobile {
    position: relative !important;
    right: 75% !important;
    left: auto !important; /* [1] */
  }
  .u-4\/4\@mobile {
    width: 100% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-4\/4\@mobile {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 100% !important;
  }
  .u-pull-4\/4\@mobile {
    position: relative !important;
    right: 100% !important;
    left: auto !important; /* [1] */
  }
  .u-1\/5\@mobile {
    width: 20% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-1\/5\@mobile {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 20% !important;
  }
  .u-pull-1\/5\@mobile {
    position: relative !important;
    right: 20% !important;
    left: auto !important; /* [1] */
  }
  .u-2\/5\@mobile {
    width: 40% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-2\/5\@mobile {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 40% !important;
  }
  .u-pull-2\/5\@mobile {
    position: relative !important;
    right: 40% !important;
    left: auto !important; /* [1] */
  }
  .u-3\/5\@mobile {
    width: 60% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-3\/5\@mobile {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 60% !important;
  }
  .u-pull-3\/5\@mobile {
    position: relative !important;
    right: 60% !important;
    left: auto !important; /* [1] */
  }
  .u-4\/5\@mobile {
    width: 80% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-4\/5\@mobile {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 80% !important;
  }
  .u-pull-4\/5\@mobile {
    position: relative !important;
    right: 80% !important;
    left: auto !important; /* [1] */
  }
  .u-5\/5\@mobile {
    width: 100% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-5\/5\@mobile {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 100% !important;
  }
  .u-pull-5\/5\@mobile {
    position: relative !important;
    right: 100% !important;
    left: auto !important; /* [1] */
  }
  .u-1\/6\@mobile {
    width: 16.6666666667% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-1\/6\@mobile {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 16.6666666667% !important;
  }
  .u-pull-1\/6\@mobile {
    position: relative !important;
    right: 16.6666666667% !important;
    left: auto !important; /* [1] */
  }
  .u-2\/6\@mobile {
    width: 33.3333333333% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-2\/6\@mobile {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 33.3333333333% !important;
  }
  .u-pull-2\/6\@mobile {
    position: relative !important;
    right: 33.3333333333% !important;
    left: auto !important; /* [1] */
  }
  .u-3\/6\@mobile {
    width: 50% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-3\/6\@mobile {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 50% !important;
  }
  .u-pull-3\/6\@mobile {
    position: relative !important;
    right: 50% !important;
    left: auto !important; /* [1] */
  }
  .u-4\/6\@mobile {
    width: 66.6666666667% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-4\/6\@mobile {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 66.6666666667% !important;
  }
  .u-pull-4\/6\@mobile {
    position: relative !important;
    right: 66.6666666667% !important;
    left: auto !important; /* [1] */
  }
  .u-5\/6\@mobile {
    width: 83.3333333333% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-5\/6\@mobile {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 83.3333333333% !important;
  }
  .u-pull-5\/6\@mobile {
    position: relative !important;
    right: 83.3333333333% !important;
    left: auto !important; /* [1] */
  }
  .u-6\/6\@mobile {
    width: 100% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-6\/6\@mobile {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 100% !important;
  }
  .u-pull-6\/6\@mobile {
    position: relative !important;
    right: 100% !important;
    left: auto !important; /* [1] */
  }
  .u-1\/7\@mobile {
    width: 14.2857142857% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-1\/7\@mobile {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 14.2857142857% !important;
  }
  .u-pull-1\/7\@mobile {
    position: relative !important;
    right: 14.2857142857% !important;
    left: auto !important; /* [1] */
  }
  .u-2\/7\@mobile {
    width: 28.5714285714% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-2\/7\@mobile {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 28.5714285714% !important;
  }
  .u-pull-2\/7\@mobile {
    position: relative !important;
    right: 28.5714285714% !important;
    left: auto !important; /* [1] */
  }
  .u-3\/7\@mobile {
    width: 42.8571428571% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-3\/7\@mobile {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 42.8571428571% !important;
  }
  .u-pull-3\/7\@mobile {
    position: relative !important;
    right: 42.8571428571% !important;
    left: auto !important; /* [1] */
  }
  .u-4\/7\@mobile {
    width: 57.1428571429% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-4\/7\@mobile {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 57.1428571429% !important;
  }
  .u-pull-4\/7\@mobile {
    position: relative !important;
    right: 57.1428571429% !important;
    left: auto !important; /* [1] */
  }
  .u-5\/7\@mobile {
    width: 71.4285714286% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-5\/7\@mobile {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 71.4285714286% !important;
  }
  .u-pull-5\/7\@mobile {
    position: relative !important;
    right: 71.4285714286% !important;
    left: auto !important; /* [1] */
  }
  .u-6\/7\@mobile {
    width: 85.7142857143% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-6\/7\@mobile {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 85.7142857143% !important;
  }
  .u-pull-6\/7\@mobile {
    position: relative !important;
    right: 85.7142857143% !important;
    left: auto !important; /* [1] */
  }
  .u-7\/7\@mobile {
    width: 100% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-7\/7\@mobile {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 100% !important;
  }
  .u-pull-7\/7\@mobile {
    position: relative !important;
    right: 100% !important;
    left: auto !important; /* [1] */
  }
  .u-1\/8\@mobile {
    width: 12.5% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-1\/8\@mobile {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 12.5% !important;
  }
  .u-pull-1\/8\@mobile {
    position: relative !important;
    right: 12.5% !important;
    left: auto !important; /* [1] */
  }
  .u-2\/8\@mobile {
    width: 25% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-2\/8\@mobile {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 25% !important;
  }
  .u-pull-2\/8\@mobile {
    position: relative !important;
    right: 25% !important;
    left: auto !important; /* [1] */
  }
  .u-3\/8\@mobile {
    width: 37.5% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-3\/8\@mobile {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 37.5% !important;
  }
  .u-pull-3\/8\@mobile {
    position: relative !important;
    right: 37.5% !important;
    left: auto !important; /* [1] */
  }
  .u-4\/8\@mobile {
    width: 50% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-4\/8\@mobile {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 50% !important;
  }
  .u-pull-4\/8\@mobile {
    position: relative !important;
    right: 50% !important;
    left: auto !important; /* [1] */
  }
  .u-5\/8\@mobile {
    width: 62.5% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-5\/8\@mobile {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 62.5% !important;
  }
  .u-pull-5\/8\@mobile {
    position: relative !important;
    right: 62.5% !important;
    left: auto !important; /* [1] */
  }
  .u-6\/8\@mobile {
    width: 75% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-6\/8\@mobile {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 75% !important;
  }
  .u-pull-6\/8\@mobile {
    position: relative !important;
    right: 75% !important;
    left: auto !important; /* [1] */
  }
  .u-7\/8\@mobile {
    width: 87.5% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-7\/8\@mobile {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 87.5% !important;
  }
  .u-pull-7\/8\@mobile {
    position: relative !important;
    right: 87.5% !important;
    left: auto !important; /* [1] */
  }
  .u-8\/8\@mobile {
    width: 100% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-8\/8\@mobile {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 100% !important;
  }
  .u-pull-8\/8\@mobile {
    position: relative !important;
    right: 100% !important;
    left: auto !important; /* [1] */
  }
  .u-1\/9\@mobile {
    width: 11.1111111111% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-1\/9\@mobile {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 11.1111111111% !important;
  }
  .u-pull-1\/9\@mobile {
    position: relative !important;
    right: 11.1111111111% !important;
    left: auto !important; /* [1] */
  }
  .u-2\/9\@mobile {
    width: 22.2222222222% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-2\/9\@mobile {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 22.2222222222% !important;
  }
  .u-pull-2\/9\@mobile {
    position: relative !important;
    right: 22.2222222222% !important;
    left: auto !important; /* [1] */
  }
  .u-3\/9\@mobile {
    width: 33.3333333333% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-3\/9\@mobile {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 33.3333333333% !important;
  }
  .u-pull-3\/9\@mobile {
    position: relative !important;
    right: 33.3333333333% !important;
    left: auto !important; /* [1] */
  }
  .u-4\/9\@mobile {
    width: 44.4444444444% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-4\/9\@mobile {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 44.4444444444% !important;
  }
  .u-pull-4\/9\@mobile {
    position: relative !important;
    right: 44.4444444444% !important;
    left: auto !important; /* [1] */
  }
  .u-5\/9\@mobile {
    width: 55.5555555556% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-5\/9\@mobile {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 55.5555555556% !important;
  }
  .u-pull-5\/9\@mobile {
    position: relative !important;
    right: 55.5555555556% !important;
    left: auto !important; /* [1] */
  }
  .u-6\/9\@mobile {
    width: 66.6666666667% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-6\/9\@mobile {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 66.6666666667% !important;
  }
  .u-pull-6\/9\@mobile {
    position: relative !important;
    right: 66.6666666667% !important;
    left: auto !important; /* [1] */
  }
  .u-7\/9\@mobile {
    width: 77.7777777778% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-7\/9\@mobile {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 77.7777777778% !important;
  }
  .u-pull-7\/9\@mobile {
    position: relative !important;
    right: 77.7777777778% !important;
    left: auto !important; /* [1] */
  }
  .u-8\/9\@mobile {
    width: 88.8888888889% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-8\/9\@mobile {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 88.8888888889% !important;
  }
  .u-pull-8\/9\@mobile {
    position: relative !important;
    right: 88.8888888889% !important;
    left: auto !important; /* [1] */
  }
  .u-9\/9\@mobile {
    width: 100% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-9\/9\@mobile {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 100% !important;
  }
  .u-pull-9\/9\@mobile {
    position: relative !important;
    right: 100% !important;
    left: auto !important; /* [1] */
  }
  .u-1\/10\@mobile {
    width: 10% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-1\/10\@mobile {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 10% !important;
  }
  .u-pull-1\/10\@mobile {
    position: relative !important;
    right: 10% !important;
    left: auto !important; /* [1] */
  }
  .u-2\/10\@mobile {
    width: 20% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-2\/10\@mobile {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 20% !important;
  }
  .u-pull-2\/10\@mobile {
    position: relative !important;
    right: 20% !important;
    left: auto !important; /* [1] */
  }
  .u-3\/10\@mobile {
    width: 30% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-3\/10\@mobile {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 30% !important;
  }
  .u-pull-3\/10\@mobile {
    position: relative !important;
    right: 30% !important;
    left: auto !important; /* [1] */
  }
  .u-4\/10\@mobile {
    width: 40% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-4\/10\@mobile {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 40% !important;
  }
  .u-pull-4\/10\@mobile {
    position: relative !important;
    right: 40% !important;
    left: auto !important; /* [1] */
  }
  .u-5\/10\@mobile {
    width: 50% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-5\/10\@mobile {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 50% !important;
  }
  .u-pull-5\/10\@mobile {
    position: relative !important;
    right: 50% !important;
    left: auto !important; /* [1] */
  }
  .u-6\/10\@mobile {
    width: 60% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-6\/10\@mobile {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 60% !important;
  }
  .u-pull-6\/10\@mobile {
    position: relative !important;
    right: 60% !important;
    left: auto !important; /* [1] */
  }
  .u-7\/10\@mobile {
    width: 70% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-7\/10\@mobile {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 70% !important;
  }
  .u-pull-7\/10\@mobile {
    position: relative !important;
    right: 70% !important;
    left: auto !important; /* [1] */
  }
  .u-8\/10\@mobile {
    width: 80% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-8\/10\@mobile {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 80% !important;
  }
  .u-pull-8\/10\@mobile {
    position: relative !important;
    right: 80% !important;
    left: auto !important; /* [1] */
  }
  .u-9\/10\@mobile {
    width: 90% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-9\/10\@mobile {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 90% !important;
  }
  .u-pull-9\/10\@mobile {
    position: relative !important;
    right: 90% !important;
    left: auto !important; /* [1] */
  }
  .u-10\/10\@mobile {
    width: 100% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-10\/10\@mobile {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 100% !important;
  }
  .u-pull-10\/10\@mobile {
    position: relative !important;
    right: 100% !important;
    left: auto !important; /* [1] */
  }
  .u-1\/11\@mobile {
    width: 9.0909090909% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-1\/11\@mobile {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 9.0909090909% !important;
  }
  .u-pull-1\/11\@mobile {
    position: relative !important;
    right: 9.0909090909% !important;
    left: auto !important; /* [1] */
  }
  .u-2\/11\@mobile {
    width: 18.1818181818% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-2\/11\@mobile {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 18.1818181818% !important;
  }
  .u-pull-2\/11\@mobile {
    position: relative !important;
    right: 18.1818181818% !important;
    left: auto !important; /* [1] */
  }
  .u-3\/11\@mobile {
    width: 27.2727272727% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-3\/11\@mobile {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 27.2727272727% !important;
  }
  .u-pull-3\/11\@mobile {
    position: relative !important;
    right: 27.2727272727% !important;
    left: auto !important; /* [1] */
  }
  .u-4\/11\@mobile {
    width: 36.3636363636% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-4\/11\@mobile {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 36.3636363636% !important;
  }
  .u-pull-4\/11\@mobile {
    position: relative !important;
    right: 36.3636363636% !important;
    left: auto !important; /* [1] */
  }
  .u-5\/11\@mobile {
    width: 45.4545454545% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-5\/11\@mobile {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 45.4545454545% !important;
  }
  .u-pull-5\/11\@mobile {
    position: relative !important;
    right: 45.4545454545% !important;
    left: auto !important; /* [1] */
  }
  .u-6\/11\@mobile {
    width: 54.5454545455% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-6\/11\@mobile {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 54.5454545455% !important;
  }
  .u-pull-6\/11\@mobile {
    position: relative !important;
    right: 54.5454545455% !important;
    left: auto !important; /* [1] */
  }
  .u-7\/11\@mobile {
    width: 63.6363636364% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-7\/11\@mobile {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 63.6363636364% !important;
  }
  .u-pull-7\/11\@mobile {
    position: relative !important;
    right: 63.6363636364% !important;
    left: auto !important; /* [1] */
  }
  .u-8\/11\@mobile {
    width: 72.7272727273% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-8\/11\@mobile {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 72.7272727273% !important;
  }
  .u-pull-8\/11\@mobile {
    position: relative !important;
    right: 72.7272727273% !important;
    left: auto !important; /* [1] */
  }
  .u-9\/11\@mobile {
    width: 81.8181818182% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-9\/11\@mobile {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 81.8181818182% !important;
  }
  .u-pull-9\/11\@mobile {
    position: relative !important;
    right: 81.8181818182% !important;
    left: auto !important; /* [1] */
  }
  .u-10\/11\@mobile {
    width: 90.9090909091% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-10\/11\@mobile {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 90.9090909091% !important;
  }
  .u-pull-10\/11\@mobile {
    position: relative !important;
    right: 90.9090909091% !important;
    left: auto !important; /* [1] */
  }
  .u-11\/11\@mobile {
    width: 100% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-11\/11\@mobile {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 100% !important;
  }
  .u-pull-11\/11\@mobile {
    position: relative !important;
    right: 100% !important;
    left: auto !important; /* [1] */
  }
  .u-1\/12\@mobile {
    width: 8.3333333333% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-1\/12\@mobile {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 8.3333333333% !important;
  }
  .u-pull-1\/12\@mobile {
    position: relative !important;
    right: 8.3333333333% !important;
    left: auto !important; /* [1] */
  }
  .u-2\/12\@mobile {
    width: 16.6666666667% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-2\/12\@mobile {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 16.6666666667% !important;
  }
  .u-pull-2\/12\@mobile {
    position: relative !important;
    right: 16.6666666667% !important;
    left: auto !important; /* [1] */
  }
  .u-3\/12\@mobile {
    width: 25% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-3\/12\@mobile {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 25% !important;
  }
  .u-pull-3\/12\@mobile {
    position: relative !important;
    right: 25% !important;
    left: auto !important; /* [1] */
  }
  .u-4\/12\@mobile {
    width: 33.3333333333% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-4\/12\@mobile {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 33.3333333333% !important;
  }
  .u-pull-4\/12\@mobile {
    position: relative !important;
    right: 33.3333333333% !important;
    left: auto !important; /* [1] */
  }
  .u-5\/12\@mobile {
    width: 41.6666666667% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-5\/12\@mobile {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 41.6666666667% !important;
  }
  .u-pull-5\/12\@mobile {
    position: relative !important;
    right: 41.6666666667% !important;
    left: auto !important; /* [1] */
  }
  .u-6\/12\@mobile {
    width: 50% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-6\/12\@mobile {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 50% !important;
  }
  .u-pull-6\/12\@mobile {
    position: relative !important;
    right: 50% !important;
    left: auto !important; /* [1] */
  }
  .u-7\/12\@mobile {
    width: 58.3333333333% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-7\/12\@mobile {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 58.3333333333% !important;
  }
  .u-pull-7\/12\@mobile {
    position: relative !important;
    right: 58.3333333333% !important;
    left: auto !important; /* [1] */
  }
  .u-8\/12\@mobile {
    width: 66.6666666667% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-8\/12\@mobile {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 66.6666666667% !important;
  }
  .u-pull-8\/12\@mobile {
    position: relative !important;
    right: 66.6666666667% !important;
    left: auto !important; /* [1] */
  }
  .u-9\/12\@mobile {
    width: 75% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-9\/12\@mobile {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 75% !important;
  }
  .u-pull-9\/12\@mobile {
    position: relative !important;
    right: 75% !important;
    left: auto !important; /* [1] */
  }
  .u-10\/12\@mobile {
    width: 83.3333333333% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-10\/12\@mobile {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 83.3333333333% !important;
  }
  .u-pull-10\/12\@mobile {
    position: relative !important;
    right: 83.3333333333% !important;
    left: auto !important; /* [1] */
  }
  .u-11\/12\@mobile {
    width: 91.6666666667% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-11\/12\@mobile {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 91.6666666667% !important;
  }
  .u-pull-11\/12\@mobile {
    position: relative !important;
    right: 91.6666666667% !important;
    left: auto !important; /* [1] */
  }
  .u-12\/12\@mobile {
    width: 100% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-12\/12\@mobile {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 100% !important;
  }
  .u-pull-12\/12\@mobile {
    position: relative !important;
    right: 100% !important;
    left: auto !important; /* [1] */
  }
  .u-push-none\@mobile {
    left: auto !important;
  }
  .u-pull-none\@mobile {
    right: auto !important;
  }
}
@media (min-width: 48em) {
  .u-1\/1\@tablet {
    width: 100% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-1\/1\@tablet {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 100% !important;
  }
  .u-pull-1\/1\@tablet {
    position: relative !important;
    right: 100% !important;
    left: auto !important; /* [1] */
  }
  .u-1\/2\@tablet {
    width: 50% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-1\/2\@tablet {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 50% !important;
  }
  .u-pull-1\/2\@tablet {
    position: relative !important;
    right: 50% !important;
    left: auto !important; /* [1] */
  }
  .u-2\/2\@tablet {
    width: 100% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-2\/2\@tablet {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 100% !important;
  }
  .u-pull-2\/2\@tablet {
    position: relative !important;
    right: 100% !important;
    left: auto !important; /* [1] */
  }
  .u-1\/3\@tablet {
    width: 33.3333333333% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-1\/3\@tablet {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 33.3333333333% !important;
  }
  .u-pull-1\/3\@tablet {
    position: relative !important;
    right: 33.3333333333% !important;
    left: auto !important; /* [1] */
  }
  .u-2\/3\@tablet {
    width: 66.6666666667% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-2\/3\@tablet {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 66.6666666667% !important;
  }
  .u-pull-2\/3\@tablet {
    position: relative !important;
    right: 66.6666666667% !important;
    left: auto !important; /* [1] */
  }
  .u-3\/3\@tablet {
    width: 100% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-3\/3\@tablet {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 100% !important;
  }
  .u-pull-3\/3\@tablet {
    position: relative !important;
    right: 100% !important;
    left: auto !important; /* [1] */
  }
  .u-1\/4\@tablet {
    width: 25% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-1\/4\@tablet {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 25% !important;
  }
  .u-pull-1\/4\@tablet {
    position: relative !important;
    right: 25% !important;
    left: auto !important; /* [1] */
  }
  .u-2\/4\@tablet {
    width: 50% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-2\/4\@tablet {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 50% !important;
  }
  .u-pull-2\/4\@tablet {
    position: relative !important;
    right: 50% !important;
    left: auto !important; /* [1] */
  }
  .u-3\/4\@tablet {
    width: 75% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-3\/4\@tablet {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 75% !important;
  }
  .u-pull-3\/4\@tablet {
    position: relative !important;
    right: 75% !important;
    left: auto !important; /* [1] */
  }
  .u-4\/4\@tablet {
    width: 100% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-4\/4\@tablet {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 100% !important;
  }
  .u-pull-4\/4\@tablet {
    position: relative !important;
    right: 100% !important;
    left: auto !important; /* [1] */
  }
  .u-1\/5\@tablet {
    width: 20% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-1\/5\@tablet {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 20% !important;
  }
  .u-pull-1\/5\@tablet {
    position: relative !important;
    right: 20% !important;
    left: auto !important; /* [1] */
  }
  .u-2\/5\@tablet {
    width: 40% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-2\/5\@tablet {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 40% !important;
  }
  .u-pull-2\/5\@tablet {
    position: relative !important;
    right: 40% !important;
    left: auto !important; /* [1] */
  }
  .u-3\/5\@tablet {
    width: 60% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-3\/5\@tablet {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 60% !important;
  }
  .u-pull-3\/5\@tablet {
    position: relative !important;
    right: 60% !important;
    left: auto !important; /* [1] */
  }
  .u-4\/5\@tablet {
    width: 80% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-4\/5\@tablet {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 80% !important;
  }
  .u-pull-4\/5\@tablet {
    position: relative !important;
    right: 80% !important;
    left: auto !important; /* [1] */
  }
  .u-5\/5\@tablet {
    width: 100% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-5\/5\@tablet {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 100% !important;
  }
  .u-pull-5\/5\@tablet {
    position: relative !important;
    right: 100% !important;
    left: auto !important; /* [1] */
  }
  .u-1\/6\@tablet {
    width: 16.6666666667% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-1\/6\@tablet {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 16.6666666667% !important;
  }
  .u-pull-1\/6\@tablet {
    position: relative !important;
    right: 16.6666666667% !important;
    left: auto !important; /* [1] */
  }
  .u-2\/6\@tablet {
    width: 33.3333333333% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-2\/6\@tablet {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 33.3333333333% !important;
  }
  .u-pull-2\/6\@tablet {
    position: relative !important;
    right: 33.3333333333% !important;
    left: auto !important; /* [1] */
  }
  .u-3\/6\@tablet {
    width: 50% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-3\/6\@tablet {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 50% !important;
  }
  .u-pull-3\/6\@tablet {
    position: relative !important;
    right: 50% !important;
    left: auto !important; /* [1] */
  }
  .u-4\/6\@tablet {
    width: 66.6666666667% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-4\/6\@tablet {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 66.6666666667% !important;
  }
  .u-pull-4\/6\@tablet {
    position: relative !important;
    right: 66.6666666667% !important;
    left: auto !important; /* [1] */
  }
  .u-5\/6\@tablet {
    width: 83.3333333333% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-5\/6\@tablet {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 83.3333333333% !important;
  }
  .u-pull-5\/6\@tablet {
    position: relative !important;
    right: 83.3333333333% !important;
    left: auto !important; /* [1] */
  }
  .u-6\/6\@tablet {
    width: 100% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-6\/6\@tablet {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 100% !important;
  }
  .u-pull-6\/6\@tablet {
    position: relative !important;
    right: 100% !important;
    left: auto !important; /* [1] */
  }
  .u-1\/7\@tablet {
    width: 14.2857142857% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-1\/7\@tablet {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 14.2857142857% !important;
  }
  .u-pull-1\/7\@tablet {
    position: relative !important;
    right: 14.2857142857% !important;
    left: auto !important; /* [1] */
  }
  .u-2\/7\@tablet {
    width: 28.5714285714% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-2\/7\@tablet {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 28.5714285714% !important;
  }
  .u-pull-2\/7\@tablet {
    position: relative !important;
    right: 28.5714285714% !important;
    left: auto !important; /* [1] */
  }
  .u-3\/7\@tablet {
    width: 42.8571428571% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-3\/7\@tablet {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 42.8571428571% !important;
  }
  .u-pull-3\/7\@tablet {
    position: relative !important;
    right: 42.8571428571% !important;
    left: auto !important; /* [1] */
  }
  .u-4\/7\@tablet {
    width: 57.1428571429% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-4\/7\@tablet {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 57.1428571429% !important;
  }
  .u-pull-4\/7\@tablet {
    position: relative !important;
    right: 57.1428571429% !important;
    left: auto !important; /* [1] */
  }
  .u-5\/7\@tablet {
    width: 71.4285714286% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-5\/7\@tablet {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 71.4285714286% !important;
  }
  .u-pull-5\/7\@tablet {
    position: relative !important;
    right: 71.4285714286% !important;
    left: auto !important; /* [1] */
  }
  .u-6\/7\@tablet {
    width: 85.7142857143% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-6\/7\@tablet {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 85.7142857143% !important;
  }
  .u-pull-6\/7\@tablet {
    position: relative !important;
    right: 85.7142857143% !important;
    left: auto !important; /* [1] */
  }
  .u-7\/7\@tablet {
    width: 100% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-7\/7\@tablet {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 100% !important;
  }
  .u-pull-7\/7\@tablet {
    position: relative !important;
    right: 100% !important;
    left: auto !important; /* [1] */
  }
  .u-1\/8\@tablet {
    width: 12.5% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-1\/8\@tablet {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 12.5% !important;
  }
  .u-pull-1\/8\@tablet {
    position: relative !important;
    right: 12.5% !important;
    left: auto !important; /* [1] */
  }
  .u-2\/8\@tablet {
    width: 25% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-2\/8\@tablet {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 25% !important;
  }
  .u-pull-2\/8\@tablet {
    position: relative !important;
    right: 25% !important;
    left: auto !important; /* [1] */
  }
  .u-3\/8\@tablet {
    width: 37.5% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-3\/8\@tablet {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 37.5% !important;
  }
  .u-pull-3\/8\@tablet {
    position: relative !important;
    right: 37.5% !important;
    left: auto !important; /* [1] */
  }
  .u-4\/8\@tablet {
    width: 50% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-4\/8\@tablet {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 50% !important;
  }
  .u-pull-4\/8\@tablet {
    position: relative !important;
    right: 50% !important;
    left: auto !important; /* [1] */
  }
  .u-5\/8\@tablet {
    width: 62.5% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-5\/8\@tablet {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 62.5% !important;
  }
  .u-pull-5\/8\@tablet {
    position: relative !important;
    right: 62.5% !important;
    left: auto !important; /* [1] */
  }
  .u-6\/8\@tablet {
    width: 75% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-6\/8\@tablet {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 75% !important;
  }
  .u-pull-6\/8\@tablet {
    position: relative !important;
    right: 75% !important;
    left: auto !important; /* [1] */
  }
  .u-7\/8\@tablet {
    width: 87.5% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-7\/8\@tablet {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 87.5% !important;
  }
  .u-pull-7\/8\@tablet {
    position: relative !important;
    right: 87.5% !important;
    left: auto !important; /* [1] */
  }
  .u-8\/8\@tablet {
    width: 100% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-8\/8\@tablet {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 100% !important;
  }
  .u-pull-8\/8\@tablet {
    position: relative !important;
    right: 100% !important;
    left: auto !important; /* [1] */
  }
  .u-1\/9\@tablet {
    width: 11.1111111111% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-1\/9\@tablet {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 11.1111111111% !important;
  }
  .u-pull-1\/9\@tablet {
    position: relative !important;
    right: 11.1111111111% !important;
    left: auto !important; /* [1] */
  }
  .u-2\/9\@tablet {
    width: 22.2222222222% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-2\/9\@tablet {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 22.2222222222% !important;
  }
  .u-pull-2\/9\@tablet {
    position: relative !important;
    right: 22.2222222222% !important;
    left: auto !important; /* [1] */
  }
  .u-3\/9\@tablet {
    width: 33.3333333333% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-3\/9\@tablet {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 33.3333333333% !important;
  }
  .u-pull-3\/9\@tablet {
    position: relative !important;
    right: 33.3333333333% !important;
    left: auto !important; /* [1] */
  }
  .u-4\/9\@tablet {
    width: 44.4444444444% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-4\/9\@tablet {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 44.4444444444% !important;
  }
  .u-pull-4\/9\@tablet {
    position: relative !important;
    right: 44.4444444444% !important;
    left: auto !important; /* [1] */
  }
  .u-5\/9\@tablet {
    width: 55.5555555556% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-5\/9\@tablet {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 55.5555555556% !important;
  }
  .u-pull-5\/9\@tablet {
    position: relative !important;
    right: 55.5555555556% !important;
    left: auto !important; /* [1] */
  }
  .u-6\/9\@tablet {
    width: 66.6666666667% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-6\/9\@tablet {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 66.6666666667% !important;
  }
  .u-pull-6\/9\@tablet {
    position: relative !important;
    right: 66.6666666667% !important;
    left: auto !important; /* [1] */
  }
  .u-7\/9\@tablet {
    width: 77.7777777778% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-7\/9\@tablet {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 77.7777777778% !important;
  }
  .u-pull-7\/9\@tablet {
    position: relative !important;
    right: 77.7777777778% !important;
    left: auto !important; /* [1] */
  }
  .u-8\/9\@tablet {
    width: 88.8888888889% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-8\/9\@tablet {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 88.8888888889% !important;
  }
  .u-pull-8\/9\@tablet {
    position: relative !important;
    right: 88.8888888889% !important;
    left: auto !important; /* [1] */
  }
  .u-9\/9\@tablet {
    width: 100% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-9\/9\@tablet {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 100% !important;
  }
  .u-pull-9\/9\@tablet {
    position: relative !important;
    right: 100% !important;
    left: auto !important; /* [1] */
  }
  .u-1\/10\@tablet {
    width: 10% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-1\/10\@tablet {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 10% !important;
  }
  .u-pull-1\/10\@tablet {
    position: relative !important;
    right: 10% !important;
    left: auto !important; /* [1] */
  }
  .u-2\/10\@tablet {
    width: 20% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-2\/10\@tablet {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 20% !important;
  }
  .u-pull-2\/10\@tablet {
    position: relative !important;
    right: 20% !important;
    left: auto !important; /* [1] */
  }
  .u-3\/10\@tablet {
    width: 30% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-3\/10\@tablet {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 30% !important;
  }
  .u-pull-3\/10\@tablet {
    position: relative !important;
    right: 30% !important;
    left: auto !important; /* [1] */
  }
  .u-4\/10\@tablet {
    width: 40% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-4\/10\@tablet {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 40% !important;
  }
  .u-pull-4\/10\@tablet {
    position: relative !important;
    right: 40% !important;
    left: auto !important; /* [1] */
  }
  .u-5\/10\@tablet {
    width: 50% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-5\/10\@tablet {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 50% !important;
  }
  .u-pull-5\/10\@tablet {
    position: relative !important;
    right: 50% !important;
    left: auto !important; /* [1] */
  }
  .u-6\/10\@tablet {
    width: 60% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-6\/10\@tablet {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 60% !important;
  }
  .u-pull-6\/10\@tablet {
    position: relative !important;
    right: 60% !important;
    left: auto !important; /* [1] */
  }
  .u-7\/10\@tablet {
    width: 70% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-7\/10\@tablet {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 70% !important;
  }
  .u-pull-7\/10\@tablet {
    position: relative !important;
    right: 70% !important;
    left: auto !important; /* [1] */
  }
  .u-8\/10\@tablet {
    width: 80% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-8\/10\@tablet {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 80% !important;
  }
  .u-pull-8\/10\@tablet {
    position: relative !important;
    right: 80% !important;
    left: auto !important; /* [1] */
  }
  .u-9\/10\@tablet {
    width: 90% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-9\/10\@tablet {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 90% !important;
  }
  .u-pull-9\/10\@tablet {
    position: relative !important;
    right: 90% !important;
    left: auto !important; /* [1] */
  }
  .u-10\/10\@tablet {
    width: 100% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-10\/10\@tablet {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 100% !important;
  }
  .u-pull-10\/10\@tablet {
    position: relative !important;
    right: 100% !important;
    left: auto !important; /* [1] */
  }
  .u-1\/11\@tablet {
    width: 9.0909090909% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-1\/11\@tablet {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 9.0909090909% !important;
  }
  .u-pull-1\/11\@tablet {
    position: relative !important;
    right: 9.0909090909% !important;
    left: auto !important; /* [1] */
  }
  .u-2\/11\@tablet {
    width: 18.1818181818% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-2\/11\@tablet {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 18.1818181818% !important;
  }
  .u-pull-2\/11\@tablet {
    position: relative !important;
    right: 18.1818181818% !important;
    left: auto !important; /* [1] */
  }
  .u-3\/11\@tablet {
    width: 27.2727272727% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-3\/11\@tablet {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 27.2727272727% !important;
  }
  .u-pull-3\/11\@tablet {
    position: relative !important;
    right: 27.2727272727% !important;
    left: auto !important; /* [1] */
  }
  .u-4\/11\@tablet {
    width: 36.3636363636% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-4\/11\@tablet {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 36.3636363636% !important;
  }
  .u-pull-4\/11\@tablet {
    position: relative !important;
    right: 36.3636363636% !important;
    left: auto !important; /* [1] */
  }
  .u-5\/11\@tablet {
    width: 45.4545454545% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-5\/11\@tablet {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 45.4545454545% !important;
  }
  .u-pull-5\/11\@tablet {
    position: relative !important;
    right: 45.4545454545% !important;
    left: auto !important; /* [1] */
  }
  .u-6\/11\@tablet {
    width: 54.5454545455% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-6\/11\@tablet {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 54.5454545455% !important;
  }
  .u-pull-6\/11\@tablet {
    position: relative !important;
    right: 54.5454545455% !important;
    left: auto !important; /* [1] */
  }
  .u-7\/11\@tablet {
    width: 63.6363636364% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-7\/11\@tablet {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 63.6363636364% !important;
  }
  .u-pull-7\/11\@tablet {
    position: relative !important;
    right: 63.6363636364% !important;
    left: auto !important; /* [1] */
  }
  .u-8\/11\@tablet {
    width: 72.7272727273% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-8\/11\@tablet {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 72.7272727273% !important;
  }
  .u-pull-8\/11\@tablet {
    position: relative !important;
    right: 72.7272727273% !important;
    left: auto !important; /* [1] */
  }
  .u-9\/11\@tablet {
    width: 81.8181818182% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-9\/11\@tablet {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 81.8181818182% !important;
  }
  .u-pull-9\/11\@tablet {
    position: relative !important;
    right: 81.8181818182% !important;
    left: auto !important; /* [1] */
  }
  .u-10\/11\@tablet {
    width: 90.9090909091% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-10\/11\@tablet {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 90.9090909091% !important;
  }
  .u-pull-10\/11\@tablet {
    position: relative !important;
    right: 90.9090909091% !important;
    left: auto !important; /* [1] */
  }
  .u-11\/11\@tablet {
    width: 100% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-11\/11\@tablet {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 100% !important;
  }
  .u-pull-11\/11\@tablet {
    position: relative !important;
    right: 100% !important;
    left: auto !important; /* [1] */
  }
  .u-1\/12\@tablet {
    width: 8.3333333333% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-1\/12\@tablet {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 8.3333333333% !important;
  }
  .u-pull-1\/12\@tablet {
    position: relative !important;
    right: 8.3333333333% !important;
    left: auto !important; /* [1] */
  }
  .u-2\/12\@tablet {
    width: 16.6666666667% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-2\/12\@tablet {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 16.6666666667% !important;
  }
  .u-pull-2\/12\@tablet {
    position: relative !important;
    right: 16.6666666667% !important;
    left: auto !important; /* [1] */
  }
  .u-3\/12\@tablet {
    width: 25% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-3\/12\@tablet {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 25% !important;
  }
  .u-pull-3\/12\@tablet {
    position: relative !important;
    right: 25% !important;
    left: auto !important; /* [1] */
  }
  .u-4\/12\@tablet {
    width: 33.3333333333% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-4\/12\@tablet {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 33.3333333333% !important;
  }
  .u-pull-4\/12\@tablet {
    position: relative !important;
    right: 33.3333333333% !important;
    left: auto !important; /* [1] */
  }
  .u-5\/12\@tablet {
    width: 41.6666666667% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-5\/12\@tablet {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 41.6666666667% !important;
  }
  .u-pull-5\/12\@tablet {
    position: relative !important;
    right: 41.6666666667% !important;
    left: auto !important; /* [1] */
  }
  .u-6\/12\@tablet {
    width: 50% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-6\/12\@tablet {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 50% !important;
  }
  .u-pull-6\/12\@tablet {
    position: relative !important;
    right: 50% !important;
    left: auto !important; /* [1] */
  }
  .u-7\/12\@tablet {
    width: 58.3333333333% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-7\/12\@tablet {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 58.3333333333% !important;
  }
  .u-pull-7\/12\@tablet {
    position: relative !important;
    right: 58.3333333333% !important;
    left: auto !important; /* [1] */
  }
  .u-8\/12\@tablet {
    width: 66.6666666667% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-8\/12\@tablet {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 66.6666666667% !important;
  }
  .u-pull-8\/12\@tablet {
    position: relative !important;
    right: 66.6666666667% !important;
    left: auto !important; /* [1] */
  }
  .u-9\/12\@tablet {
    width: 75% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-9\/12\@tablet {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 75% !important;
  }
  .u-pull-9\/12\@tablet {
    position: relative !important;
    right: 75% !important;
    left: auto !important; /* [1] */
  }
  .u-10\/12\@tablet {
    width: 83.3333333333% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-10\/12\@tablet {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 83.3333333333% !important;
  }
  .u-pull-10\/12\@tablet {
    position: relative !important;
    right: 83.3333333333% !important;
    left: auto !important; /* [1] */
  }
  .u-11\/12\@tablet {
    width: 91.6666666667% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-11\/12\@tablet {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 91.6666666667% !important;
  }
  .u-pull-11\/12\@tablet {
    position: relative !important;
    right: 91.6666666667% !important;
    left: auto !important; /* [1] */
  }
  .u-12\/12\@tablet {
    width: 100% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-12\/12\@tablet {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 100% !important;
  }
  .u-pull-12\/12\@tablet {
    position: relative !important;
    right: 100% !important;
    left: auto !important; /* [1] */
  }
  .u-push-none\@tablet {
    left: auto !important;
  }
  .u-pull-none\@tablet {
    right: auto !important;
  }
}
@media (min-width: 62em) {
  .u-1\/1\@desktop {
    width: 100% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-1\/1\@desktop {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 100% !important;
  }
  .u-pull-1\/1\@desktop {
    position: relative !important;
    right: 100% !important;
    left: auto !important; /* [1] */
  }
  .u-1\/2\@desktop {
    width: 50% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-1\/2\@desktop {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 50% !important;
  }
  .u-pull-1\/2\@desktop {
    position: relative !important;
    right: 50% !important;
    left: auto !important; /* [1] */
  }
  .u-2\/2\@desktop {
    width: 100% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-2\/2\@desktop {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 100% !important;
  }
  .u-pull-2\/2\@desktop {
    position: relative !important;
    right: 100% !important;
    left: auto !important; /* [1] */
  }
  .u-1\/3\@desktop {
    width: 33.3333333333% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-1\/3\@desktop {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 33.3333333333% !important;
  }
  .u-pull-1\/3\@desktop {
    position: relative !important;
    right: 33.3333333333% !important;
    left: auto !important; /* [1] */
  }
  .u-2\/3\@desktop {
    width: 66.6666666667% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-2\/3\@desktop {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 66.6666666667% !important;
  }
  .u-pull-2\/3\@desktop {
    position: relative !important;
    right: 66.6666666667% !important;
    left: auto !important; /* [1] */
  }
  .u-3\/3\@desktop {
    width: 100% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-3\/3\@desktop {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 100% !important;
  }
  .u-pull-3\/3\@desktop {
    position: relative !important;
    right: 100% !important;
    left: auto !important; /* [1] */
  }
  .u-1\/4\@desktop {
    width: 25% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-1\/4\@desktop {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 25% !important;
  }
  .u-pull-1\/4\@desktop {
    position: relative !important;
    right: 25% !important;
    left: auto !important; /* [1] */
  }
  .u-2\/4\@desktop {
    width: 50% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-2\/4\@desktop {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 50% !important;
  }
  .u-pull-2\/4\@desktop {
    position: relative !important;
    right: 50% !important;
    left: auto !important; /* [1] */
  }
  .u-3\/4\@desktop {
    width: 75% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-3\/4\@desktop {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 75% !important;
  }
  .u-pull-3\/4\@desktop {
    position: relative !important;
    right: 75% !important;
    left: auto !important; /* [1] */
  }
  .u-4\/4\@desktop {
    width: 100% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-4\/4\@desktop {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 100% !important;
  }
  .u-pull-4\/4\@desktop {
    position: relative !important;
    right: 100% !important;
    left: auto !important; /* [1] */
  }
  .u-1\/5\@desktop {
    width: 20% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-1\/5\@desktop {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 20% !important;
  }
  .u-pull-1\/5\@desktop {
    position: relative !important;
    right: 20% !important;
    left: auto !important; /* [1] */
  }
  .u-2\/5\@desktop {
    width: 40% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-2\/5\@desktop {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 40% !important;
  }
  .u-pull-2\/5\@desktop {
    position: relative !important;
    right: 40% !important;
    left: auto !important; /* [1] */
  }
  .u-3\/5\@desktop {
    width: 60% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-3\/5\@desktop {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 60% !important;
  }
  .u-pull-3\/5\@desktop {
    position: relative !important;
    right: 60% !important;
    left: auto !important; /* [1] */
  }
  .u-4\/5\@desktop {
    width: 80% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-4\/5\@desktop {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 80% !important;
  }
  .u-pull-4\/5\@desktop {
    position: relative !important;
    right: 80% !important;
    left: auto !important; /* [1] */
  }
  .u-5\/5\@desktop {
    width: 100% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-5\/5\@desktop {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 100% !important;
  }
  .u-pull-5\/5\@desktop {
    position: relative !important;
    right: 100% !important;
    left: auto !important; /* [1] */
  }
  .u-1\/6\@desktop {
    width: 16.6666666667% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-1\/6\@desktop {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 16.6666666667% !important;
  }
  .u-pull-1\/6\@desktop {
    position: relative !important;
    right: 16.6666666667% !important;
    left: auto !important; /* [1] */
  }
  .u-2\/6\@desktop {
    width: 33.3333333333% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-2\/6\@desktop {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 33.3333333333% !important;
  }
  .u-pull-2\/6\@desktop {
    position: relative !important;
    right: 33.3333333333% !important;
    left: auto !important; /* [1] */
  }
  .u-3\/6\@desktop {
    width: 50% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-3\/6\@desktop {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 50% !important;
  }
  .u-pull-3\/6\@desktop {
    position: relative !important;
    right: 50% !important;
    left: auto !important; /* [1] */
  }
  .u-4\/6\@desktop {
    width: 66.6666666667% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-4\/6\@desktop {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 66.6666666667% !important;
  }
  .u-pull-4\/6\@desktop {
    position: relative !important;
    right: 66.6666666667% !important;
    left: auto !important; /* [1] */
  }
  .u-5\/6\@desktop {
    width: 83.3333333333% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-5\/6\@desktop {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 83.3333333333% !important;
  }
  .u-pull-5\/6\@desktop {
    position: relative !important;
    right: 83.3333333333% !important;
    left: auto !important; /* [1] */
  }
  .u-6\/6\@desktop {
    width: 100% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-6\/6\@desktop {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 100% !important;
  }
  .u-pull-6\/6\@desktop {
    position: relative !important;
    right: 100% !important;
    left: auto !important; /* [1] */
  }
  .u-1\/7\@desktop {
    width: 14.2857142857% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-1\/7\@desktop {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 14.2857142857% !important;
  }
  .u-pull-1\/7\@desktop {
    position: relative !important;
    right: 14.2857142857% !important;
    left: auto !important; /* [1] */
  }
  .u-2\/7\@desktop {
    width: 28.5714285714% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-2\/7\@desktop {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 28.5714285714% !important;
  }
  .u-pull-2\/7\@desktop {
    position: relative !important;
    right: 28.5714285714% !important;
    left: auto !important; /* [1] */
  }
  .u-3\/7\@desktop {
    width: 42.8571428571% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-3\/7\@desktop {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 42.8571428571% !important;
  }
  .u-pull-3\/7\@desktop {
    position: relative !important;
    right: 42.8571428571% !important;
    left: auto !important; /* [1] */
  }
  .u-4\/7\@desktop {
    width: 57.1428571429% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-4\/7\@desktop {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 57.1428571429% !important;
  }
  .u-pull-4\/7\@desktop {
    position: relative !important;
    right: 57.1428571429% !important;
    left: auto !important; /* [1] */
  }
  .u-5\/7\@desktop {
    width: 71.4285714286% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-5\/7\@desktop {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 71.4285714286% !important;
  }
  .u-pull-5\/7\@desktop {
    position: relative !important;
    right: 71.4285714286% !important;
    left: auto !important; /* [1] */
  }
  .u-6\/7\@desktop {
    width: 85.7142857143% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-6\/7\@desktop {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 85.7142857143% !important;
  }
  .u-pull-6\/7\@desktop {
    position: relative !important;
    right: 85.7142857143% !important;
    left: auto !important; /* [1] */
  }
  .u-7\/7\@desktop {
    width: 100% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-7\/7\@desktop {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 100% !important;
  }
  .u-pull-7\/7\@desktop {
    position: relative !important;
    right: 100% !important;
    left: auto !important; /* [1] */
  }
  .u-1\/8\@desktop {
    width: 12.5% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-1\/8\@desktop {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 12.5% !important;
  }
  .u-pull-1\/8\@desktop {
    position: relative !important;
    right: 12.5% !important;
    left: auto !important; /* [1] */
  }
  .u-2\/8\@desktop {
    width: 25% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-2\/8\@desktop {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 25% !important;
  }
  .u-pull-2\/8\@desktop {
    position: relative !important;
    right: 25% !important;
    left: auto !important; /* [1] */
  }
  .u-3\/8\@desktop {
    width: 37.5% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-3\/8\@desktop {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 37.5% !important;
  }
  .u-pull-3\/8\@desktop {
    position: relative !important;
    right: 37.5% !important;
    left: auto !important; /* [1] */
  }
  .u-4\/8\@desktop {
    width: 50% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-4\/8\@desktop {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 50% !important;
  }
  .u-pull-4\/8\@desktop {
    position: relative !important;
    right: 50% !important;
    left: auto !important; /* [1] */
  }
  .u-5\/8\@desktop {
    width: 62.5% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-5\/8\@desktop {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 62.5% !important;
  }
  .u-pull-5\/8\@desktop {
    position: relative !important;
    right: 62.5% !important;
    left: auto !important; /* [1] */
  }
  .u-6\/8\@desktop {
    width: 75% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-6\/8\@desktop {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 75% !important;
  }
  .u-pull-6\/8\@desktop {
    position: relative !important;
    right: 75% !important;
    left: auto !important; /* [1] */
  }
  .u-7\/8\@desktop {
    width: 87.5% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-7\/8\@desktop {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 87.5% !important;
  }
  .u-pull-7\/8\@desktop {
    position: relative !important;
    right: 87.5% !important;
    left: auto !important; /* [1] */
  }
  .u-8\/8\@desktop {
    width: 100% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-8\/8\@desktop {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 100% !important;
  }
  .u-pull-8\/8\@desktop {
    position: relative !important;
    right: 100% !important;
    left: auto !important; /* [1] */
  }
  .u-1\/9\@desktop {
    width: 11.1111111111% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-1\/9\@desktop {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 11.1111111111% !important;
  }
  .u-pull-1\/9\@desktop {
    position: relative !important;
    right: 11.1111111111% !important;
    left: auto !important; /* [1] */
  }
  .u-2\/9\@desktop {
    width: 22.2222222222% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-2\/9\@desktop {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 22.2222222222% !important;
  }
  .u-pull-2\/9\@desktop {
    position: relative !important;
    right: 22.2222222222% !important;
    left: auto !important; /* [1] */
  }
  .u-3\/9\@desktop {
    width: 33.3333333333% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-3\/9\@desktop {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 33.3333333333% !important;
  }
  .u-pull-3\/9\@desktop {
    position: relative !important;
    right: 33.3333333333% !important;
    left: auto !important; /* [1] */
  }
  .u-4\/9\@desktop {
    width: 44.4444444444% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-4\/9\@desktop {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 44.4444444444% !important;
  }
  .u-pull-4\/9\@desktop {
    position: relative !important;
    right: 44.4444444444% !important;
    left: auto !important; /* [1] */
  }
  .u-5\/9\@desktop {
    width: 55.5555555556% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-5\/9\@desktop {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 55.5555555556% !important;
  }
  .u-pull-5\/9\@desktop {
    position: relative !important;
    right: 55.5555555556% !important;
    left: auto !important; /* [1] */
  }
  .u-6\/9\@desktop {
    width: 66.6666666667% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-6\/9\@desktop {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 66.6666666667% !important;
  }
  .u-pull-6\/9\@desktop {
    position: relative !important;
    right: 66.6666666667% !important;
    left: auto !important; /* [1] */
  }
  .u-7\/9\@desktop {
    width: 77.7777777778% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-7\/9\@desktop {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 77.7777777778% !important;
  }
  .u-pull-7\/9\@desktop {
    position: relative !important;
    right: 77.7777777778% !important;
    left: auto !important; /* [1] */
  }
  .u-8\/9\@desktop {
    width: 88.8888888889% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-8\/9\@desktop {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 88.8888888889% !important;
  }
  .u-pull-8\/9\@desktop {
    position: relative !important;
    right: 88.8888888889% !important;
    left: auto !important; /* [1] */
  }
  .u-9\/9\@desktop {
    width: 100% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-9\/9\@desktop {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 100% !important;
  }
  .u-pull-9\/9\@desktop {
    position: relative !important;
    right: 100% !important;
    left: auto !important; /* [1] */
  }
  .u-1\/10\@desktop {
    width: 10% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-1\/10\@desktop {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 10% !important;
  }
  .u-pull-1\/10\@desktop {
    position: relative !important;
    right: 10% !important;
    left: auto !important; /* [1] */
  }
  .u-2\/10\@desktop {
    width: 20% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-2\/10\@desktop {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 20% !important;
  }
  .u-pull-2\/10\@desktop {
    position: relative !important;
    right: 20% !important;
    left: auto !important; /* [1] */
  }
  .u-3\/10\@desktop {
    width: 30% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-3\/10\@desktop {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 30% !important;
  }
  .u-pull-3\/10\@desktop {
    position: relative !important;
    right: 30% !important;
    left: auto !important; /* [1] */
  }
  .u-4\/10\@desktop {
    width: 40% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-4\/10\@desktop {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 40% !important;
  }
  .u-pull-4\/10\@desktop {
    position: relative !important;
    right: 40% !important;
    left: auto !important; /* [1] */
  }
  .u-5\/10\@desktop {
    width: 50% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-5\/10\@desktop {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 50% !important;
  }
  .u-pull-5\/10\@desktop {
    position: relative !important;
    right: 50% !important;
    left: auto !important; /* [1] */
  }
  .u-6\/10\@desktop {
    width: 60% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-6\/10\@desktop {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 60% !important;
  }
  .u-pull-6\/10\@desktop {
    position: relative !important;
    right: 60% !important;
    left: auto !important; /* [1] */
  }
  .u-7\/10\@desktop {
    width: 70% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-7\/10\@desktop {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 70% !important;
  }
  .u-pull-7\/10\@desktop {
    position: relative !important;
    right: 70% !important;
    left: auto !important; /* [1] */
  }
  .u-8\/10\@desktop {
    width: 80% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-8\/10\@desktop {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 80% !important;
  }
  .u-pull-8\/10\@desktop {
    position: relative !important;
    right: 80% !important;
    left: auto !important; /* [1] */
  }
  .u-9\/10\@desktop {
    width: 90% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-9\/10\@desktop {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 90% !important;
  }
  .u-pull-9\/10\@desktop {
    position: relative !important;
    right: 90% !important;
    left: auto !important; /* [1] */
  }
  .u-10\/10\@desktop {
    width: 100% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-10\/10\@desktop {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 100% !important;
  }
  .u-pull-10\/10\@desktop {
    position: relative !important;
    right: 100% !important;
    left: auto !important; /* [1] */
  }
  .u-1\/11\@desktop {
    width: 9.0909090909% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-1\/11\@desktop {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 9.0909090909% !important;
  }
  .u-pull-1\/11\@desktop {
    position: relative !important;
    right: 9.0909090909% !important;
    left: auto !important; /* [1] */
  }
  .u-2\/11\@desktop {
    width: 18.1818181818% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-2\/11\@desktop {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 18.1818181818% !important;
  }
  .u-pull-2\/11\@desktop {
    position: relative !important;
    right: 18.1818181818% !important;
    left: auto !important; /* [1] */
  }
  .u-3\/11\@desktop {
    width: 27.2727272727% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-3\/11\@desktop {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 27.2727272727% !important;
  }
  .u-pull-3\/11\@desktop {
    position: relative !important;
    right: 27.2727272727% !important;
    left: auto !important; /* [1] */
  }
  .u-4\/11\@desktop {
    width: 36.3636363636% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-4\/11\@desktop {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 36.3636363636% !important;
  }
  .u-pull-4\/11\@desktop {
    position: relative !important;
    right: 36.3636363636% !important;
    left: auto !important; /* [1] */
  }
  .u-5\/11\@desktop {
    width: 45.4545454545% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-5\/11\@desktop {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 45.4545454545% !important;
  }
  .u-pull-5\/11\@desktop {
    position: relative !important;
    right: 45.4545454545% !important;
    left: auto !important; /* [1] */
  }
  .u-6\/11\@desktop {
    width: 54.5454545455% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-6\/11\@desktop {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 54.5454545455% !important;
  }
  .u-pull-6\/11\@desktop {
    position: relative !important;
    right: 54.5454545455% !important;
    left: auto !important; /* [1] */
  }
  .u-7\/11\@desktop {
    width: 63.6363636364% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-7\/11\@desktop {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 63.6363636364% !important;
  }
  .u-pull-7\/11\@desktop {
    position: relative !important;
    right: 63.6363636364% !important;
    left: auto !important; /* [1] */
  }
  .u-8\/11\@desktop {
    width: 72.7272727273% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-8\/11\@desktop {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 72.7272727273% !important;
  }
  .u-pull-8\/11\@desktop {
    position: relative !important;
    right: 72.7272727273% !important;
    left: auto !important; /* [1] */
  }
  .u-9\/11\@desktop {
    width: 81.8181818182% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-9\/11\@desktop {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 81.8181818182% !important;
  }
  .u-pull-9\/11\@desktop {
    position: relative !important;
    right: 81.8181818182% !important;
    left: auto !important; /* [1] */
  }
  .u-10\/11\@desktop {
    width: 90.9090909091% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-10\/11\@desktop {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 90.9090909091% !important;
  }
  .u-pull-10\/11\@desktop {
    position: relative !important;
    right: 90.9090909091% !important;
    left: auto !important; /* [1] */
  }
  .u-11\/11\@desktop {
    width: 100% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-11\/11\@desktop {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 100% !important;
  }
  .u-pull-11\/11\@desktop {
    position: relative !important;
    right: 100% !important;
    left: auto !important; /* [1] */
  }
  .u-1\/12\@desktop {
    width: 8.3333333333% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-1\/12\@desktop {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 8.3333333333% !important;
  }
  .u-pull-1\/12\@desktop {
    position: relative !important;
    right: 8.3333333333% !important;
    left: auto !important; /* [1] */
  }
  .u-2\/12\@desktop {
    width: 16.6666666667% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-2\/12\@desktop {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 16.6666666667% !important;
  }
  .u-pull-2\/12\@desktop {
    position: relative !important;
    right: 16.6666666667% !important;
    left: auto !important; /* [1] */
  }
  .u-3\/12\@desktop {
    width: 25% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-3\/12\@desktop {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 25% !important;
  }
  .u-pull-3\/12\@desktop {
    position: relative !important;
    right: 25% !important;
    left: auto !important; /* [1] */
  }
  .u-4\/12\@desktop {
    width: 33.3333333333% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-4\/12\@desktop {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 33.3333333333% !important;
  }
  .u-pull-4\/12\@desktop {
    position: relative !important;
    right: 33.3333333333% !important;
    left: auto !important; /* [1] */
  }
  .u-5\/12\@desktop {
    width: 41.6666666667% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-5\/12\@desktop {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 41.6666666667% !important;
  }
  .u-pull-5\/12\@desktop {
    position: relative !important;
    right: 41.6666666667% !important;
    left: auto !important; /* [1] */
  }
  .u-6\/12\@desktop {
    width: 50% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-6\/12\@desktop {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 50% !important;
  }
  .u-pull-6\/12\@desktop {
    position: relative !important;
    right: 50% !important;
    left: auto !important; /* [1] */
  }
  .u-7\/12\@desktop {
    width: 58.3333333333% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-7\/12\@desktop {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 58.3333333333% !important;
  }
  .u-pull-7\/12\@desktop {
    position: relative !important;
    right: 58.3333333333% !important;
    left: auto !important; /* [1] */
  }
  .u-8\/12\@desktop {
    width: 66.6666666667% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-8\/12\@desktop {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 66.6666666667% !important;
  }
  .u-pull-8\/12\@desktop {
    position: relative !important;
    right: 66.6666666667% !important;
    left: auto !important; /* [1] */
  }
  .u-9\/12\@desktop {
    width: 75% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-9\/12\@desktop {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 75% !important;
  }
  .u-pull-9\/12\@desktop {
    position: relative !important;
    right: 75% !important;
    left: auto !important; /* [1] */
  }
  .u-10\/12\@desktop {
    width: 83.3333333333% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-10\/12\@desktop {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 83.3333333333% !important;
  }
  .u-pull-10\/12\@desktop {
    position: relative !important;
    right: 83.3333333333% !important;
    left: auto !important; /* [1] */
  }
  .u-11\/12\@desktop {
    width: 91.6666666667% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-11\/12\@desktop {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 91.6666666667% !important;
  }
  .u-pull-11\/12\@desktop {
    position: relative !important;
    right: 91.6666666667% !important;
    left: auto !important; /* [1] */
  }
  .u-12\/12\@desktop {
    width: 100% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-12\/12\@desktop {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 100% !important;
  }
  .u-pull-12\/12\@desktop {
    position: relative !important;
    right: 100% !important;
    left: auto !important; /* [1] */
  }
  .u-push-none\@desktop {
    left: auto !important;
  }
  .u-pull-none\@desktop {
    right: auto !important;
  }
}
@media (min-width: 75em) {
  .u-1\/1\@wide {
    width: 100% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-1\/1\@wide {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 100% !important;
  }
  .u-pull-1\/1\@wide {
    position: relative !important;
    right: 100% !important;
    left: auto !important; /* [1] */
  }
  .u-1\/2\@wide {
    width: 50% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-1\/2\@wide {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 50% !important;
  }
  .u-pull-1\/2\@wide {
    position: relative !important;
    right: 50% !important;
    left: auto !important; /* [1] */
  }
  .u-2\/2\@wide {
    width: 100% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-2\/2\@wide {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 100% !important;
  }
  .u-pull-2\/2\@wide {
    position: relative !important;
    right: 100% !important;
    left: auto !important; /* [1] */
  }
  .u-1\/3\@wide {
    width: 33.3333333333% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-1\/3\@wide {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 33.3333333333% !important;
  }
  .u-pull-1\/3\@wide {
    position: relative !important;
    right: 33.3333333333% !important;
    left: auto !important; /* [1] */
  }
  .u-2\/3\@wide {
    width: 66.6666666667% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-2\/3\@wide {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 66.6666666667% !important;
  }
  .u-pull-2\/3\@wide {
    position: relative !important;
    right: 66.6666666667% !important;
    left: auto !important; /* [1] */
  }
  .u-3\/3\@wide {
    width: 100% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-3\/3\@wide {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 100% !important;
  }
  .u-pull-3\/3\@wide {
    position: relative !important;
    right: 100% !important;
    left: auto !important; /* [1] */
  }
  .u-1\/4\@wide {
    width: 25% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-1\/4\@wide {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 25% !important;
  }
  .u-pull-1\/4\@wide {
    position: relative !important;
    right: 25% !important;
    left: auto !important; /* [1] */
  }
  .u-2\/4\@wide {
    width: 50% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-2\/4\@wide {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 50% !important;
  }
  .u-pull-2\/4\@wide {
    position: relative !important;
    right: 50% !important;
    left: auto !important; /* [1] */
  }
  .u-3\/4\@wide {
    width: 75% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-3\/4\@wide {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 75% !important;
  }
  .u-pull-3\/4\@wide {
    position: relative !important;
    right: 75% !important;
    left: auto !important; /* [1] */
  }
  .u-4\/4\@wide {
    width: 100% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-4\/4\@wide {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 100% !important;
  }
  .u-pull-4\/4\@wide {
    position: relative !important;
    right: 100% !important;
    left: auto !important; /* [1] */
  }
  .u-1\/5\@wide {
    width: 20% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-1\/5\@wide {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 20% !important;
  }
  .u-pull-1\/5\@wide {
    position: relative !important;
    right: 20% !important;
    left: auto !important; /* [1] */
  }
  .u-2\/5\@wide {
    width: 40% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-2\/5\@wide {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 40% !important;
  }
  .u-pull-2\/5\@wide {
    position: relative !important;
    right: 40% !important;
    left: auto !important; /* [1] */
  }
  .u-3\/5\@wide {
    width: 60% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-3\/5\@wide {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 60% !important;
  }
  .u-pull-3\/5\@wide {
    position: relative !important;
    right: 60% !important;
    left: auto !important; /* [1] */
  }
  .u-4\/5\@wide {
    width: 80% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-4\/5\@wide {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 80% !important;
  }
  .u-pull-4\/5\@wide {
    position: relative !important;
    right: 80% !important;
    left: auto !important; /* [1] */
  }
  .u-5\/5\@wide {
    width: 100% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-5\/5\@wide {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 100% !important;
  }
  .u-pull-5\/5\@wide {
    position: relative !important;
    right: 100% !important;
    left: auto !important; /* [1] */
  }
  .u-1\/6\@wide {
    width: 16.6666666667% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-1\/6\@wide {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 16.6666666667% !important;
  }
  .u-pull-1\/6\@wide {
    position: relative !important;
    right: 16.6666666667% !important;
    left: auto !important; /* [1] */
  }
  .u-2\/6\@wide {
    width: 33.3333333333% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-2\/6\@wide {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 33.3333333333% !important;
  }
  .u-pull-2\/6\@wide {
    position: relative !important;
    right: 33.3333333333% !important;
    left: auto !important; /* [1] */
  }
  .u-3\/6\@wide {
    width: 50% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-3\/6\@wide {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 50% !important;
  }
  .u-pull-3\/6\@wide {
    position: relative !important;
    right: 50% !important;
    left: auto !important; /* [1] */
  }
  .u-4\/6\@wide {
    width: 66.6666666667% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-4\/6\@wide {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 66.6666666667% !important;
  }
  .u-pull-4\/6\@wide {
    position: relative !important;
    right: 66.6666666667% !important;
    left: auto !important; /* [1] */
  }
  .u-5\/6\@wide {
    width: 83.3333333333% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-5\/6\@wide {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 83.3333333333% !important;
  }
  .u-pull-5\/6\@wide {
    position: relative !important;
    right: 83.3333333333% !important;
    left: auto !important; /* [1] */
  }
  .u-6\/6\@wide {
    width: 100% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-6\/6\@wide {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 100% !important;
  }
  .u-pull-6\/6\@wide {
    position: relative !important;
    right: 100% !important;
    left: auto !important; /* [1] */
  }
  .u-1\/7\@wide {
    width: 14.2857142857% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-1\/7\@wide {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 14.2857142857% !important;
  }
  .u-pull-1\/7\@wide {
    position: relative !important;
    right: 14.2857142857% !important;
    left: auto !important; /* [1] */
  }
  .u-2\/7\@wide {
    width: 28.5714285714% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-2\/7\@wide {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 28.5714285714% !important;
  }
  .u-pull-2\/7\@wide {
    position: relative !important;
    right: 28.5714285714% !important;
    left: auto !important; /* [1] */
  }
  .u-3\/7\@wide {
    width: 42.8571428571% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-3\/7\@wide {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 42.8571428571% !important;
  }
  .u-pull-3\/7\@wide {
    position: relative !important;
    right: 42.8571428571% !important;
    left: auto !important; /* [1] */
  }
  .u-4\/7\@wide {
    width: 57.1428571429% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-4\/7\@wide {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 57.1428571429% !important;
  }
  .u-pull-4\/7\@wide {
    position: relative !important;
    right: 57.1428571429% !important;
    left: auto !important; /* [1] */
  }
  .u-5\/7\@wide {
    width: 71.4285714286% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-5\/7\@wide {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 71.4285714286% !important;
  }
  .u-pull-5\/7\@wide {
    position: relative !important;
    right: 71.4285714286% !important;
    left: auto !important; /* [1] */
  }
  .u-6\/7\@wide {
    width: 85.7142857143% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-6\/7\@wide {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 85.7142857143% !important;
  }
  .u-pull-6\/7\@wide {
    position: relative !important;
    right: 85.7142857143% !important;
    left: auto !important; /* [1] */
  }
  .u-7\/7\@wide {
    width: 100% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-7\/7\@wide {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 100% !important;
  }
  .u-pull-7\/7\@wide {
    position: relative !important;
    right: 100% !important;
    left: auto !important; /* [1] */
  }
  .u-1\/8\@wide {
    width: 12.5% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-1\/8\@wide {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 12.5% !important;
  }
  .u-pull-1\/8\@wide {
    position: relative !important;
    right: 12.5% !important;
    left: auto !important; /* [1] */
  }
  .u-2\/8\@wide {
    width: 25% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-2\/8\@wide {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 25% !important;
  }
  .u-pull-2\/8\@wide {
    position: relative !important;
    right: 25% !important;
    left: auto !important; /* [1] */
  }
  .u-3\/8\@wide {
    width: 37.5% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-3\/8\@wide {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 37.5% !important;
  }
  .u-pull-3\/8\@wide {
    position: relative !important;
    right: 37.5% !important;
    left: auto !important; /* [1] */
  }
  .u-4\/8\@wide {
    width: 50% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-4\/8\@wide {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 50% !important;
  }
  .u-pull-4\/8\@wide {
    position: relative !important;
    right: 50% !important;
    left: auto !important; /* [1] */
  }
  .u-5\/8\@wide {
    width: 62.5% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-5\/8\@wide {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 62.5% !important;
  }
  .u-pull-5\/8\@wide {
    position: relative !important;
    right: 62.5% !important;
    left: auto !important; /* [1] */
  }
  .u-6\/8\@wide {
    width: 75% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-6\/8\@wide {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 75% !important;
  }
  .u-pull-6\/8\@wide {
    position: relative !important;
    right: 75% !important;
    left: auto !important; /* [1] */
  }
  .u-7\/8\@wide {
    width: 87.5% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-7\/8\@wide {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 87.5% !important;
  }
  .u-pull-7\/8\@wide {
    position: relative !important;
    right: 87.5% !important;
    left: auto !important; /* [1] */
  }
  .u-8\/8\@wide {
    width: 100% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-8\/8\@wide {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 100% !important;
  }
  .u-pull-8\/8\@wide {
    position: relative !important;
    right: 100% !important;
    left: auto !important; /* [1] */
  }
  .u-1\/9\@wide {
    width: 11.1111111111% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-1\/9\@wide {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 11.1111111111% !important;
  }
  .u-pull-1\/9\@wide {
    position: relative !important;
    right: 11.1111111111% !important;
    left: auto !important; /* [1] */
  }
  .u-2\/9\@wide {
    width: 22.2222222222% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-2\/9\@wide {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 22.2222222222% !important;
  }
  .u-pull-2\/9\@wide {
    position: relative !important;
    right: 22.2222222222% !important;
    left: auto !important; /* [1] */
  }
  .u-3\/9\@wide {
    width: 33.3333333333% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-3\/9\@wide {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 33.3333333333% !important;
  }
  .u-pull-3\/9\@wide {
    position: relative !important;
    right: 33.3333333333% !important;
    left: auto !important; /* [1] */
  }
  .u-4\/9\@wide {
    width: 44.4444444444% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-4\/9\@wide {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 44.4444444444% !important;
  }
  .u-pull-4\/9\@wide {
    position: relative !important;
    right: 44.4444444444% !important;
    left: auto !important; /* [1] */
  }
  .u-5\/9\@wide {
    width: 55.5555555556% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-5\/9\@wide {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 55.5555555556% !important;
  }
  .u-pull-5\/9\@wide {
    position: relative !important;
    right: 55.5555555556% !important;
    left: auto !important; /* [1] */
  }
  .u-6\/9\@wide {
    width: 66.6666666667% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-6\/9\@wide {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 66.6666666667% !important;
  }
  .u-pull-6\/9\@wide {
    position: relative !important;
    right: 66.6666666667% !important;
    left: auto !important; /* [1] */
  }
  .u-7\/9\@wide {
    width: 77.7777777778% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-7\/9\@wide {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 77.7777777778% !important;
  }
  .u-pull-7\/9\@wide {
    position: relative !important;
    right: 77.7777777778% !important;
    left: auto !important; /* [1] */
  }
  .u-8\/9\@wide {
    width: 88.8888888889% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-8\/9\@wide {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 88.8888888889% !important;
  }
  .u-pull-8\/9\@wide {
    position: relative !important;
    right: 88.8888888889% !important;
    left: auto !important; /* [1] */
  }
  .u-9\/9\@wide {
    width: 100% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-9\/9\@wide {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 100% !important;
  }
  .u-pull-9\/9\@wide {
    position: relative !important;
    right: 100% !important;
    left: auto !important; /* [1] */
  }
  .u-1\/10\@wide {
    width: 10% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-1\/10\@wide {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 10% !important;
  }
  .u-pull-1\/10\@wide {
    position: relative !important;
    right: 10% !important;
    left: auto !important; /* [1] */
  }
  .u-2\/10\@wide {
    width: 20% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-2\/10\@wide {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 20% !important;
  }
  .u-pull-2\/10\@wide {
    position: relative !important;
    right: 20% !important;
    left: auto !important; /* [1] */
  }
  .u-3\/10\@wide {
    width: 30% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-3\/10\@wide {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 30% !important;
  }
  .u-pull-3\/10\@wide {
    position: relative !important;
    right: 30% !important;
    left: auto !important; /* [1] */
  }
  .u-4\/10\@wide {
    width: 40% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-4\/10\@wide {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 40% !important;
  }
  .u-pull-4\/10\@wide {
    position: relative !important;
    right: 40% !important;
    left: auto !important; /* [1] */
  }
  .u-5\/10\@wide {
    width: 50% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-5\/10\@wide {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 50% !important;
  }
  .u-pull-5\/10\@wide {
    position: relative !important;
    right: 50% !important;
    left: auto !important; /* [1] */
  }
  .u-6\/10\@wide {
    width: 60% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-6\/10\@wide {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 60% !important;
  }
  .u-pull-6\/10\@wide {
    position: relative !important;
    right: 60% !important;
    left: auto !important; /* [1] */
  }
  .u-7\/10\@wide {
    width: 70% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-7\/10\@wide {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 70% !important;
  }
  .u-pull-7\/10\@wide {
    position: relative !important;
    right: 70% !important;
    left: auto !important; /* [1] */
  }
  .u-8\/10\@wide {
    width: 80% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-8\/10\@wide {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 80% !important;
  }
  .u-pull-8\/10\@wide {
    position: relative !important;
    right: 80% !important;
    left: auto !important; /* [1] */
  }
  .u-9\/10\@wide {
    width: 90% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-9\/10\@wide {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 90% !important;
  }
  .u-pull-9\/10\@wide {
    position: relative !important;
    right: 90% !important;
    left: auto !important; /* [1] */
  }
  .u-10\/10\@wide {
    width: 100% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-10\/10\@wide {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 100% !important;
  }
  .u-pull-10\/10\@wide {
    position: relative !important;
    right: 100% !important;
    left: auto !important; /* [1] */
  }
  .u-1\/11\@wide {
    width: 9.0909090909% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-1\/11\@wide {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 9.0909090909% !important;
  }
  .u-pull-1\/11\@wide {
    position: relative !important;
    right: 9.0909090909% !important;
    left: auto !important; /* [1] */
  }
  .u-2\/11\@wide {
    width: 18.1818181818% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-2\/11\@wide {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 18.1818181818% !important;
  }
  .u-pull-2\/11\@wide {
    position: relative !important;
    right: 18.1818181818% !important;
    left: auto !important; /* [1] */
  }
  .u-3\/11\@wide {
    width: 27.2727272727% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-3\/11\@wide {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 27.2727272727% !important;
  }
  .u-pull-3\/11\@wide {
    position: relative !important;
    right: 27.2727272727% !important;
    left: auto !important; /* [1] */
  }
  .u-4\/11\@wide {
    width: 36.3636363636% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-4\/11\@wide {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 36.3636363636% !important;
  }
  .u-pull-4\/11\@wide {
    position: relative !important;
    right: 36.3636363636% !important;
    left: auto !important; /* [1] */
  }
  .u-5\/11\@wide {
    width: 45.4545454545% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-5\/11\@wide {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 45.4545454545% !important;
  }
  .u-pull-5\/11\@wide {
    position: relative !important;
    right: 45.4545454545% !important;
    left: auto !important; /* [1] */
  }
  .u-6\/11\@wide {
    width: 54.5454545455% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-6\/11\@wide {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 54.5454545455% !important;
  }
  .u-pull-6\/11\@wide {
    position: relative !important;
    right: 54.5454545455% !important;
    left: auto !important; /* [1] */
  }
  .u-7\/11\@wide {
    width: 63.6363636364% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-7\/11\@wide {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 63.6363636364% !important;
  }
  .u-pull-7\/11\@wide {
    position: relative !important;
    right: 63.6363636364% !important;
    left: auto !important; /* [1] */
  }
  .u-8\/11\@wide {
    width: 72.7272727273% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-8\/11\@wide {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 72.7272727273% !important;
  }
  .u-pull-8\/11\@wide {
    position: relative !important;
    right: 72.7272727273% !important;
    left: auto !important; /* [1] */
  }
  .u-9\/11\@wide {
    width: 81.8181818182% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-9\/11\@wide {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 81.8181818182% !important;
  }
  .u-pull-9\/11\@wide {
    position: relative !important;
    right: 81.8181818182% !important;
    left: auto !important; /* [1] */
  }
  .u-10\/11\@wide {
    width: 90.9090909091% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-10\/11\@wide {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 90.9090909091% !important;
  }
  .u-pull-10\/11\@wide {
    position: relative !important;
    right: 90.9090909091% !important;
    left: auto !important; /* [1] */
  }
  .u-11\/11\@wide {
    width: 100% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-11\/11\@wide {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 100% !important;
  }
  .u-pull-11\/11\@wide {
    position: relative !important;
    right: 100% !important;
    left: auto !important; /* [1] */
  }
  .u-1\/12\@wide {
    width: 8.3333333333% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-1\/12\@wide {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 8.3333333333% !important;
  }
  .u-pull-1\/12\@wide {
    position: relative !important;
    right: 8.3333333333% !important;
    left: auto !important; /* [1] */
  }
  .u-2\/12\@wide {
    width: 16.6666666667% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-2\/12\@wide {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 16.6666666667% !important;
  }
  .u-pull-2\/12\@wide {
    position: relative !important;
    right: 16.6666666667% !important;
    left: auto !important; /* [1] */
  }
  .u-3\/12\@wide {
    width: 25% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-3\/12\@wide {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 25% !important;
  }
  .u-pull-3\/12\@wide {
    position: relative !important;
    right: 25% !important;
    left: auto !important; /* [1] */
  }
  .u-4\/12\@wide {
    width: 33.3333333333% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-4\/12\@wide {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 33.3333333333% !important;
  }
  .u-pull-4\/12\@wide {
    position: relative !important;
    right: 33.3333333333% !important;
    left: auto !important; /* [1] */
  }
  .u-5\/12\@wide {
    width: 41.6666666667% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-5\/12\@wide {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 41.6666666667% !important;
  }
  .u-pull-5\/12\@wide {
    position: relative !important;
    right: 41.6666666667% !important;
    left: auto !important; /* [1] */
  }
  .u-6\/12\@wide {
    width: 50% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-6\/12\@wide {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 50% !important;
  }
  .u-pull-6\/12\@wide {
    position: relative !important;
    right: 50% !important;
    left: auto !important; /* [1] */
  }
  .u-7\/12\@wide {
    width: 58.3333333333% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-7\/12\@wide {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 58.3333333333% !important;
  }
  .u-pull-7\/12\@wide {
    position: relative !important;
    right: 58.3333333333% !important;
    left: auto !important; /* [1] */
  }
  .u-8\/12\@wide {
    width: 66.6666666667% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-8\/12\@wide {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 66.6666666667% !important;
  }
  .u-pull-8\/12\@wide {
    position: relative !important;
    right: 66.6666666667% !important;
    left: auto !important; /* [1] */
  }
  .u-9\/12\@wide {
    width: 75% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-9\/12\@wide {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 75% !important;
  }
  .u-pull-9\/12\@wide {
    position: relative !important;
    right: 75% !important;
    left: auto !important; /* [1] */
  }
  .u-10\/12\@wide {
    width: 83.3333333333% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-10\/12\@wide {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 83.3333333333% !important;
  }
  .u-pull-10\/12\@wide {
    position: relative !important;
    right: 83.3333333333% !important;
    left: auto !important; /* [1] */
  }
  .u-11\/12\@wide {
    width: 91.6666666667% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-11\/12\@wide {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 91.6666666667% !important;
  }
  .u-pull-11\/12\@wide {
    position: relative !important;
    right: 91.6666666667% !important;
    left: auto !important; /* [1] */
  }
  .u-12\/12\@wide {
    width: 100% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-12\/12\@wide {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 100% !important;
  }
  .u-pull-12\/12\@wide {
    position: relative !important;
    right: 100% !important;
    left: auto !important; /* [1] */
  }
  .u-push-none\@wide {
    left: auto !important;
  }
  .u-pull-none\@wide {
    right: auto !important;
  }
}
@media (min-width: 85.375em) {
  .u-1\/1\@laptop {
    width: 100% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-1\/1\@laptop {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 100% !important;
  }
  .u-pull-1\/1\@laptop {
    position: relative !important;
    right: 100% !important;
    left: auto !important; /* [1] */
  }
  .u-1\/2\@laptop {
    width: 50% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-1\/2\@laptop {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 50% !important;
  }
  .u-pull-1\/2\@laptop {
    position: relative !important;
    right: 50% !important;
    left: auto !important; /* [1] */
  }
  .u-2\/2\@laptop {
    width: 100% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-2\/2\@laptop {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 100% !important;
  }
  .u-pull-2\/2\@laptop {
    position: relative !important;
    right: 100% !important;
    left: auto !important; /* [1] */
  }
  .u-1\/3\@laptop {
    width: 33.3333333333% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-1\/3\@laptop {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 33.3333333333% !important;
  }
  .u-pull-1\/3\@laptop {
    position: relative !important;
    right: 33.3333333333% !important;
    left: auto !important; /* [1] */
  }
  .u-2\/3\@laptop {
    width: 66.6666666667% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-2\/3\@laptop {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 66.6666666667% !important;
  }
  .u-pull-2\/3\@laptop {
    position: relative !important;
    right: 66.6666666667% !important;
    left: auto !important; /* [1] */
  }
  .u-3\/3\@laptop {
    width: 100% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-3\/3\@laptop {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 100% !important;
  }
  .u-pull-3\/3\@laptop {
    position: relative !important;
    right: 100% !important;
    left: auto !important; /* [1] */
  }
  .u-1\/4\@laptop {
    width: 25% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-1\/4\@laptop {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 25% !important;
  }
  .u-pull-1\/4\@laptop {
    position: relative !important;
    right: 25% !important;
    left: auto !important; /* [1] */
  }
  .u-2\/4\@laptop {
    width: 50% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-2\/4\@laptop {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 50% !important;
  }
  .u-pull-2\/4\@laptop {
    position: relative !important;
    right: 50% !important;
    left: auto !important; /* [1] */
  }
  .u-3\/4\@laptop {
    width: 75% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-3\/4\@laptop {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 75% !important;
  }
  .u-pull-3\/4\@laptop {
    position: relative !important;
    right: 75% !important;
    left: auto !important; /* [1] */
  }
  .u-4\/4\@laptop {
    width: 100% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-4\/4\@laptop {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 100% !important;
  }
  .u-pull-4\/4\@laptop {
    position: relative !important;
    right: 100% !important;
    left: auto !important; /* [1] */
  }
  .u-1\/5\@laptop {
    width: 20% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-1\/5\@laptop {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 20% !important;
  }
  .u-pull-1\/5\@laptop {
    position: relative !important;
    right: 20% !important;
    left: auto !important; /* [1] */
  }
  .u-2\/5\@laptop {
    width: 40% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-2\/5\@laptop {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 40% !important;
  }
  .u-pull-2\/5\@laptop {
    position: relative !important;
    right: 40% !important;
    left: auto !important; /* [1] */
  }
  .u-3\/5\@laptop {
    width: 60% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-3\/5\@laptop {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 60% !important;
  }
  .u-pull-3\/5\@laptop {
    position: relative !important;
    right: 60% !important;
    left: auto !important; /* [1] */
  }
  .u-4\/5\@laptop {
    width: 80% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-4\/5\@laptop {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 80% !important;
  }
  .u-pull-4\/5\@laptop {
    position: relative !important;
    right: 80% !important;
    left: auto !important; /* [1] */
  }
  .u-5\/5\@laptop {
    width: 100% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-5\/5\@laptop {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 100% !important;
  }
  .u-pull-5\/5\@laptop {
    position: relative !important;
    right: 100% !important;
    left: auto !important; /* [1] */
  }
  .u-1\/6\@laptop {
    width: 16.6666666667% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-1\/6\@laptop {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 16.6666666667% !important;
  }
  .u-pull-1\/6\@laptop {
    position: relative !important;
    right: 16.6666666667% !important;
    left: auto !important; /* [1] */
  }
  .u-2\/6\@laptop {
    width: 33.3333333333% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-2\/6\@laptop {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 33.3333333333% !important;
  }
  .u-pull-2\/6\@laptop {
    position: relative !important;
    right: 33.3333333333% !important;
    left: auto !important; /* [1] */
  }
  .u-3\/6\@laptop {
    width: 50% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-3\/6\@laptop {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 50% !important;
  }
  .u-pull-3\/6\@laptop {
    position: relative !important;
    right: 50% !important;
    left: auto !important; /* [1] */
  }
  .u-4\/6\@laptop {
    width: 66.6666666667% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-4\/6\@laptop {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 66.6666666667% !important;
  }
  .u-pull-4\/6\@laptop {
    position: relative !important;
    right: 66.6666666667% !important;
    left: auto !important; /* [1] */
  }
  .u-5\/6\@laptop {
    width: 83.3333333333% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-5\/6\@laptop {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 83.3333333333% !important;
  }
  .u-pull-5\/6\@laptop {
    position: relative !important;
    right: 83.3333333333% !important;
    left: auto !important; /* [1] */
  }
  .u-6\/6\@laptop {
    width: 100% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-6\/6\@laptop {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 100% !important;
  }
  .u-pull-6\/6\@laptop {
    position: relative !important;
    right: 100% !important;
    left: auto !important; /* [1] */
  }
  .u-1\/7\@laptop {
    width: 14.2857142857% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-1\/7\@laptop {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 14.2857142857% !important;
  }
  .u-pull-1\/7\@laptop {
    position: relative !important;
    right: 14.2857142857% !important;
    left: auto !important; /* [1] */
  }
  .u-2\/7\@laptop {
    width: 28.5714285714% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-2\/7\@laptop {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 28.5714285714% !important;
  }
  .u-pull-2\/7\@laptop {
    position: relative !important;
    right: 28.5714285714% !important;
    left: auto !important; /* [1] */
  }
  .u-3\/7\@laptop {
    width: 42.8571428571% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-3\/7\@laptop {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 42.8571428571% !important;
  }
  .u-pull-3\/7\@laptop {
    position: relative !important;
    right: 42.8571428571% !important;
    left: auto !important; /* [1] */
  }
  .u-4\/7\@laptop {
    width: 57.1428571429% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-4\/7\@laptop {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 57.1428571429% !important;
  }
  .u-pull-4\/7\@laptop {
    position: relative !important;
    right: 57.1428571429% !important;
    left: auto !important; /* [1] */
  }
  .u-5\/7\@laptop {
    width: 71.4285714286% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-5\/7\@laptop {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 71.4285714286% !important;
  }
  .u-pull-5\/7\@laptop {
    position: relative !important;
    right: 71.4285714286% !important;
    left: auto !important; /* [1] */
  }
  .u-6\/7\@laptop {
    width: 85.7142857143% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-6\/7\@laptop {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 85.7142857143% !important;
  }
  .u-pull-6\/7\@laptop {
    position: relative !important;
    right: 85.7142857143% !important;
    left: auto !important; /* [1] */
  }
  .u-7\/7\@laptop {
    width: 100% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-7\/7\@laptop {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 100% !important;
  }
  .u-pull-7\/7\@laptop {
    position: relative !important;
    right: 100% !important;
    left: auto !important; /* [1] */
  }
  .u-1\/8\@laptop {
    width: 12.5% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-1\/8\@laptop {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 12.5% !important;
  }
  .u-pull-1\/8\@laptop {
    position: relative !important;
    right: 12.5% !important;
    left: auto !important; /* [1] */
  }
  .u-2\/8\@laptop {
    width: 25% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-2\/8\@laptop {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 25% !important;
  }
  .u-pull-2\/8\@laptop {
    position: relative !important;
    right: 25% !important;
    left: auto !important; /* [1] */
  }
  .u-3\/8\@laptop {
    width: 37.5% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-3\/8\@laptop {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 37.5% !important;
  }
  .u-pull-3\/8\@laptop {
    position: relative !important;
    right: 37.5% !important;
    left: auto !important; /* [1] */
  }
  .u-4\/8\@laptop {
    width: 50% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-4\/8\@laptop {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 50% !important;
  }
  .u-pull-4\/8\@laptop {
    position: relative !important;
    right: 50% !important;
    left: auto !important; /* [1] */
  }
  .u-5\/8\@laptop {
    width: 62.5% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-5\/8\@laptop {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 62.5% !important;
  }
  .u-pull-5\/8\@laptop {
    position: relative !important;
    right: 62.5% !important;
    left: auto !important; /* [1] */
  }
  .u-6\/8\@laptop {
    width: 75% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-6\/8\@laptop {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 75% !important;
  }
  .u-pull-6\/8\@laptop {
    position: relative !important;
    right: 75% !important;
    left: auto !important; /* [1] */
  }
  .u-7\/8\@laptop {
    width: 87.5% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-7\/8\@laptop {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 87.5% !important;
  }
  .u-pull-7\/8\@laptop {
    position: relative !important;
    right: 87.5% !important;
    left: auto !important; /* [1] */
  }
  .u-8\/8\@laptop {
    width: 100% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-8\/8\@laptop {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 100% !important;
  }
  .u-pull-8\/8\@laptop {
    position: relative !important;
    right: 100% !important;
    left: auto !important; /* [1] */
  }
  .u-1\/9\@laptop {
    width: 11.1111111111% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-1\/9\@laptop {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 11.1111111111% !important;
  }
  .u-pull-1\/9\@laptop {
    position: relative !important;
    right: 11.1111111111% !important;
    left: auto !important; /* [1] */
  }
  .u-2\/9\@laptop {
    width: 22.2222222222% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-2\/9\@laptop {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 22.2222222222% !important;
  }
  .u-pull-2\/9\@laptop {
    position: relative !important;
    right: 22.2222222222% !important;
    left: auto !important; /* [1] */
  }
  .u-3\/9\@laptop {
    width: 33.3333333333% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-3\/9\@laptop {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 33.3333333333% !important;
  }
  .u-pull-3\/9\@laptop {
    position: relative !important;
    right: 33.3333333333% !important;
    left: auto !important; /* [1] */
  }
  .u-4\/9\@laptop {
    width: 44.4444444444% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-4\/9\@laptop {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 44.4444444444% !important;
  }
  .u-pull-4\/9\@laptop {
    position: relative !important;
    right: 44.4444444444% !important;
    left: auto !important; /* [1] */
  }
  .u-5\/9\@laptop {
    width: 55.5555555556% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-5\/9\@laptop {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 55.5555555556% !important;
  }
  .u-pull-5\/9\@laptop {
    position: relative !important;
    right: 55.5555555556% !important;
    left: auto !important; /* [1] */
  }
  .u-6\/9\@laptop {
    width: 66.6666666667% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-6\/9\@laptop {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 66.6666666667% !important;
  }
  .u-pull-6\/9\@laptop {
    position: relative !important;
    right: 66.6666666667% !important;
    left: auto !important; /* [1] */
  }
  .u-7\/9\@laptop {
    width: 77.7777777778% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-7\/9\@laptop {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 77.7777777778% !important;
  }
  .u-pull-7\/9\@laptop {
    position: relative !important;
    right: 77.7777777778% !important;
    left: auto !important; /* [1] */
  }
  .u-8\/9\@laptop {
    width: 88.8888888889% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-8\/9\@laptop {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 88.8888888889% !important;
  }
  .u-pull-8\/9\@laptop {
    position: relative !important;
    right: 88.8888888889% !important;
    left: auto !important; /* [1] */
  }
  .u-9\/9\@laptop {
    width: 100% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-9\/9\@laptop {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 100% !important;
  }
  .u-pull-9\/9\@laptop {
    position: relative !important;
    right: 100% !important;
    left: auto !important; /* [1] */
  }
  .u-1\/10\@laptop {
    width: 10% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-1\/10\@laptop {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 10% !important;
  }
  .u-pull-1\/10\@laptop {
    position: relative !important;
    right: 10% !important;
    left: auto !important; /* [1] */
  }
  .u-2\/10\@laptop {
    width: 20% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-2\/10\@laptop {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 20% !important;
  }
  .u-pull-2\/10\@laptop {
    position: relative !important;
    right: 20% !important;
    left: auto !important; /* [1] */
  }
  .u-3\/10\@laptop {
    width: 30% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-3\/10\@laptop {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 30% !important;
  }
  .u-pull-3\/10\@laptop {
    position: relative !important;
    right: 30% !important;
    left: auto !important; /* [1] */
  }
  .u-4\/10\@laptop {
    width: 40% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-4\/10\@laptop {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 40% !important;
  }
  .u-pull-4\/10\@laptop {
    position: relative !important;
    right: 40% !important;
    left: auto !important; /* [1] */
  }
  .u-5\/10\@laptop {
    width: 50% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-5\/10\@laptop {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 50% !important;
  }
  .u-pull-5\/10\@laptop {
    position: relative !important;
    right: 50% !important;
    left: auto !important; /* [1] */
  }
  .u-6\/10\@laptop {
    width: 60% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-6\/10\@laptop {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 60% !important;
  }
  .u-pull-6\/10\@laptop {
    position: relative !important;
    right: 60% !important;
    left: auto !important; /* [1] */
  }
  .u-7\/10\@laptop {
    width: 70% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-7\/10\@laptop {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 70% !important;
  }
  .u-pull-7\/10\@laptop {
    position: relative !important;
    right: 70% !important;
    left: auto !important; /* [1] */
  }
  .u-8\/10\@laptop {
    width: 80% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-8\/10\@laptop {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 80% !important;
  }
  .u-pull-8\/10\@laptop {
    position: relative !important;
    right: 80% !important;
    left: auto !important; /* [1] */
  }
  .u-9\/10\@laptop {
    width: 90% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-9\/10\@laptop {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 90% !important;
  }
  .u-pull-9\/10\@laptop {
    position: relative !important;
    right: 90% !important;
    left: auto !important; /* [1] */
  }
  .u-10\/10\@laptop {
    width: 100% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-10\/10\@laptop {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 100% !important;
  }
  .u-pull-10\/10\@laptop {
    position: relative !important;
    right: 100% !important;
    left: auto !important; /* [1] */
  }
  .u-1\/11\@laptop {
    width: 9.0909090909% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-1\/11\@laptop {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 9.0909090909% !important;
  }
  .u-pull-1\/11\@laptop {
    position: relative !important;
    right: 9.0909090909% !important;
    left: auto !important; /* [1] */
  }
  .u-2\/11\@laptop {
    width: 18.1818181818% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-2\/11\@laptop {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 18.1818181818% !important;
  }
  .u-pull-2\/11\@laptop {
    position: relative !important;
    right: 18.1818181818% !important;
    left: auto !important; /* [1] */
  }
  .u-3\/11\@laptop {
    width: 27.2727272727% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-3\/11\@laptop {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 27.2727272727% !important;
  }
  .u-pull-3\/11\@laptop {
    position: relative !important;
    right: 27.2727272727% !important;
    left: auto !important; /* [1] */
  }
  .u-4\/11\@laptop {
    width: 36.3636363636% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-4\/11\@laptop {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 36.3636363636% !important;
  }
  .u-pull-4\/11\@laptop {
    position: relative !important;
    right: 36.3636363636% !important;
    left: auto !important; /* [1] */
  }
  .u-5\/11\@laptop {
    width: 45.4545454545% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-5\/11\@laptop {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 45.4545454545% !important;
  }
  .u-pull-5\/11\@laptop {
    position: relative !important;
    right: 45.4545454545% !important;
    left: auto !important; /* [1] */
  }
  .u-6\/11\@laptop {
    width: 54.5454545455% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-6\/11\@laptop {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 54.5454545455% !important;
  }
  .u-pull-6\/11\@laptop {
    position: relative !important;
    right: 54.5454545455% !important;
    left: auto !important; /* [1] */
  }
  .u-7\/11\@laptop {
    width: 63.6363636364% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-7\/11\@laptop {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 63.6363636364% !important;
  }
  .u-pull-7\/11\@laptop {
    position: relative !important;
    right: 63.6363636364% !important;
    left: auto !important; /* [1] */
  }
  .u-8\/11\@laptop {
    width: 72.7272727273% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-8\/11\@laptop {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 72.7272727273% !important;
  }
  .u-pull-8\/11\@laptop {
    position: relative !important;
    right: 72.7272727273% !important;
    left: auto !important; /* [1] */
  }
  .u-9\/11\@laptop {
    width: 81.8181818182% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-9\/11\@laptop {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 81.8181818182% !important;
  }
  .u-pull-9\/11\@laptop {
    position: relative !important;
    right: 81.8181818182% !important;
    left: auto !important; /* [1] */
  }
  .u-10\/11\@laptop {
    width: 90.9090909091% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-10\/11\@laptop {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 90.9090909091% !important;
  }
  .u-pull-10\/11\@laptop {
    position: relative !important;
    right: 90.9090909091% !important;
    left: auto !important; /* [1] */
  }
  .u-11\/11\@laptop {
    width: 100% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-11\/11\@laptop {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 100% !important;
  }
  .u-pull-11\/11\@laptop {
    position: relative !important;
    right: 100% !important;
    left: auto !important; /* [1] */
  }
  .u-1\/12\@laptop {
    width: 8.3333333333% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-1\/12\@laptop {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 8.3333333333% !important;
  }
  .u-pull-1\/12\@laptop {
    position: relative !important;
    right: 8.3333333333% !important;
    left: auto !important; /* [1] */
  }
  .u-2\/12\@laptop {
    width: 16.6666666667% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-2\/12\@laptop {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 16.6666666667% !important;
  }
  .u-pull-2\/12\@laptop {
    position: relative !important;
    right: 16.6666666667% !important;
    left: auto !important; /* [1] */
  }
  .u-3\/12\@laptop {
    width: 25% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-3\/12\@laptop {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 25% !important;
  }
  .u-pull-3\/12\@laptop {
    position: relative !important;
    right: 25% !important;
    left: auto !important; /* [1] */
  }
  .u-4\/12\@laptop {
    width: 33.3333333333% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-4\/12\@laptop {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 33.3333333333% !important;
  }
  .u-pull-4\/12\@laptop {
    position: relative !important;
    right: 33.3333333333% !important;
    left: auto !important; /* [1] */
  }
  .u-5\/12\@laptop {
    width: 41.6666666667% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-5\/12\@laptop {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 41.6666666667% !important;
  }
  .u-pull-5\/12\@laptop {
    position: relative !important;
    right: 41.6666666667% !important;
    left: auto !important; /* [1] */
  }
  .u-6\/12\@laptop {
    width: 50% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-6\/12\@laptop {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 50% !important;
  }
  .u-pull-6\/12\@laptop {
    position: relative !important;
    right: 50% !important;
    left: auto !important; /* [1] */
  }
  .u-7\/12\@laptop {
    width: 58.3333333333% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-7\/12\@laptop {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 58.3333333333% !important;
  }
  .u-pull-7\/12\@laptop {
    position: relative !important;
    right: 58.3333333333% !important;
    left: auto !important; /* [1] */
  }
  .u-8\/12\@laptop {
    width: 66.6666666667% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-8\/12\@laptop {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 66.6666666667% !important;
  }
  .u-pull-8\/12\@laptop {
    position: relative !important;
    right: 66.6666666667% !important;
    left: auto !important; /* [1] */
  }
  .u-9\/12\@laptop {
    width: 75% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-9\/12\@laptop {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 75% !important;
  }
  .u-pull-9\/12\@laptop {
    position: relative !important;
    right: 75% !important;
    left: auto !important; /* [1] */
  }
  .u-10\/12\@laptop {
    width: 83.3333333333% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-10\/12\@laptop {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 83.3333333333% !important;
  }
  .u-pull-10\/12\@laptop {
    position: relative !important;
    right: 83.3333333333% !important;
    left: auto !important; /* [1] */
  }
  .u-11\/12\@laptop {
    width: 91.6666666667% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-11\/12\@laptop {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 91.6666666667% !important;
  }
  .u-pull-11\/12\@laptop {
    position: relative !important;
    right: 91.6666666667% !important;
    left: auto !important; /* [1] */
  }
  .u-12\/12\@laptop {
    width: 100% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-12\/12\@laptop {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 100% !important;
  }
  .u-pull-12\/12\@laptop {
    position: relative !important;
    right: 100% !important;
    left: auto !important; /* [1] */
  }
  .u-push-none\@laptop {
    left: auto !important;
  }
  .u-pull-none\@laptop {
    right: auto !important;
  }
}
@media (min-width: 100em) {
  .u-1\/1\@x-wide {
    width: 100% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-1\/1\@x-wide {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 100% !important;
  }
  .u-pull-1\/1\@x-wide {
    position: relative !important;
    right: 100% !important;
    left: auto !important; /* [1] */
  }
  .u-1\/2\@x-wide {
    width: 50% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-1\/2\@x-wide {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 50% !important;
  }
  .u-pull-1\/2\@x-wide {
    position: relative !important;
    right: 50% !important;
    left: auto !important; /* [1] */
  }
  .u-2\/2\@x-wide {
    width: 100% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-2\/2\@x-wide {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 100% !important;
  }
  .u-pull-2\/2\@x-wide {
    position: relative !important;
    right: 100% !important;
    left: auto !important; /* [1] */
  }
  .u-1\/3\@x-wide {
    width: 33.3333333333% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-1\/3\@x-wide {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 33.3333333333% !important;
  }
  .u-pull-1\/3\@x-wide {
    position: relative !important;
    right: 33.3333333333% !important;
    left: auto !important; /* [1] */
  }
  .u-2\/3\@x-wide {
    width: 66.6666666667% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-2\/3\@x-wide {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 66.6666666667% !important;
  }
  .u-pull-2\/3\@x-wide {
    position: relative !important;
    right: 66.6666666667% !important;
    left: auto !important; /* [1] */
  }
  .u-3\/3\@x-wide {
    width: 100% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-3\/3\@x-wide {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 100% !important;
  }
  .u-pull-3\/3\@x-wide {
    position: relative !important;
    right: 100% !important;
    left: auto !important; /* [1] */
  }
  .u-1\/4\@x-wide {
    width: 25% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-1\/4\@x-wide {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 25% !important;
  }
  .u-pull-1\/4\@x-wide {
    position: relative !important;
    right: 25% !important;
    left: auto !important; /* [1] */
  }
  .u-2\/4\@x-wide {
    width: 50% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-2\/4\@x-wide {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 50% !important;
  }
  .u-pull-2\/4\@x-wide {
    position: relative !important;
    right: 50% !important;
    left: auto !important; /* [1] */
  }
  .u-3\/4\@x-wide {
    width: 75% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-3\/4\@x-wide {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 75% !important;
  }
  .u-pull-3\/4\@x-wide {
    position: relative !important;
    right: 75% !important;
    left: auto !important; /* [1] */
  }
  .u-4\/4\@x-wide {
    width: 100% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-4\/4\@x-wide {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 100% !important;
  }
  .u-pull-4\/4\@x-wide {
    position: relative !important;
    right: 100% !important;
    left: auto !important; /* [1] */
  }
  .u-1\/5\@x-wide {
    width: 20% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-1\/5\@x-wide {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 20% !important;
  }
  .u-pull-1\/5\@x-wide {
    position: relative !important;
    right: 20% !important;
    left: auto !important; /* [1] */
  }
  .u-2\/5\@x-wide {
    width: 40% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-2\/5\@x-wide {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 40% !important;
  }
  .u-pull-2\/5\@x-wide {
    position: relative !important;
    right: 40% !important;
    left: auto !important; /* [1] */
  }
  .u-3\/5\@x-wide {
    width: 60% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-3\/5\@x-wide {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 60% !important;
  }
  .u-pull-3\/5\@x-wide {
    position: relative !important;
    right: 60% !important;
    left: auto !important; /* [1] */
  }
  .u-4\/5\@x-wide {
    width: 80% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-4\/5\@x-wide {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 80% !important;
  }
  .u-pull-4\/5\@x-wide {
    position: relative !important;
    right: 80% !important;
    left: auto !important; /* [1] */
  }
  .u-5\/5\@x-wide {
    width: 100% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-5\/5\@x-wide {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 100% !important;
  }
  .u-pull-5\/5\@x-wide {
    position: relative !important;
    right: 100% !important;
    left: auto !important; /* [1] */
  }
  .u-1\/6\@x-wide {
    width: 16.6666666667% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-1\/6\@x-wide {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 16.6666666667% !important;
  }
  .u-pull-1\/6\@x-wide {
    position: relative !important;
    right: 16.6666666667% !important;
    left: auto !important; /* [1] */
  }
  .u-2\/6\@x-wide {
    width: 33.3333333333% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-2\/6\@x-wide {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 33.3333333333% !important;
  }
  .u-pull-2\/6\@x-wide {
    position: relative !important;
    right: 33.3333333333% !important;
    left: auto !important; /* [1] */
  }
  .u-3\/6\@x-wide {
    width: 50% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-3\/6\@x-wide {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 50% !important;
  }
  .u-pull-3\/6\@x-wide {
    position: relative !important;
    right: 50% !important;
    left: auto !important; /* [1] */
  }
  .u-4\/6\@x-wide {
    width: 66.6666666667% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-4\/6\@x-wide {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 66.6666666667% !important;
  }
  .u-pull-4\/6\@x-wide {
    position: relative !important;
    right: 66.6666666667% !important;
    left: auto !important; /* [1] */
  }
  .u-5\/6\@x-wide {
    width: 83.3333333333% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-5\/6\@x-wide {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 83.3333333333% !important;
  }
  .u-pull-5\/6\@x-wide {
    position: relative !important;
    right: 83.3333333333% !important;
    left: auto !important; /* [1] */
  }
  .u-6\/6\@x-wide {
    width: 100% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-6\/6\@x-wide {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 100% !important;
  }
  .u-pull-6\/6\@x-wide {
    position: relative !important;
    right: 100% !important;
    left: auto !important; /* [1] */
  }
  .u-1\/7\@x-wide {
    width: 14.2857142857% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-1\/7\@x-wide {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 14.2857142857% !important;
  }
  .u-pull-1\/7\@x-wide {
    position: relative !important;
    right: 14.2857142857% !important;
    left: auto !important; /* [1] */
  }
  .u-2\/7\@x-wide {
    width: 28.5714285714% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-2\/7\@x-wide {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 28.5714285714% !important;
  }
  .u-pull-2\/7\@x-wide {
    position: relative !important;
    right: 28.5714285714% !important;
    left: auto !important; /* [1] */
  }
  .u-3\/7\@x-wide {
    width: 42.8571428571% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-3\/7\@x-wide {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 42.8571428571% !important;
  }
  .u-pull-3\/7\@x-wide {
    position: relative !important;
    right: 42.8571428571% !important;
    left: auto !important; /* [1] */
  }
  .u-4\/7\@x-wide {
    width: 57.1428571429% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-4\/7\@x-wide {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 57.1428571429% !important;
  }
  .u-pull-4\/7\@x-wide {
    position: relative !important;
    right: 57.1428571429% !important;
    left: auto !important; /* [1] */
  }
  .u-5\/7\@x-wide {
    width: 71.4285714286% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-5\/7\@x-wide {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 71.4285714286% !important;
  }
  .u-pull-5\/7\@x-wide {
    position: relative !important;
    right: 71.4285714286% !important;
    left: auto !important; /* [1] */
  }
  .u-6\/7\@x-wide {
    width: 85.7142857143% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-6\/7\@x-wide {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 85.7142857143% !important;
  }
  .u-pull-6\/7\@x-wide {
    position: relative !important;
    right: 85.7142857143% !important;
    left: auto !important; /* [1] */
  }
  .u-7\/7\@x-wide {
    width: 100% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-7\/7\@x-wide {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 100% !important;
  }
  .u-pull-7\/7\@x-wide {
    position: relative !important;
    right: 100% !important;
    left: auto !important; /* [1] */
  }
  .u-1\/8\@x-wide {
    width: 12.5% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-1\/8\@x-wide {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 12.5% !important;
  }
  .u-pull-1\/8\@x-wide {
    position: relative !important;
    right: 12.5% !important;
    left: auto !important; /* [1] */
  }
  .u-2\/8\@x-wide {
    width: 25% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-2\/8\@x-wide {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 25% !important;
  }
  .u-pull-2\/8\@x-wide {
    position: relative !important;
    right: 25% !important;
    left: auto !important; /* [1] */
  }
  .u-3\/8\@x-wide {
    width: 37.5% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-3\/8\@x-wide {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 37.5% !important;
  }
  .u-pull-3\/8\@x-wide {
    position: relative !important;
    right: 37.5% !important;
    left: auto !important; /* [1] */
  }
  .u-4\/8\@x-wide {
    width: 50% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-4\/8\@x-wide {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 50% !important;
  }
  .u-pull-4\/8\@x-wide {
    position: relative !important;
    right: 50% !important;
    left: auto !important; /* [1] */
  }
  .u-5\/8\@x-wide {
    width: 62.5% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-5\/8\@x-wide {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 62.5% !important;
  }
  .u-pull-5\/8\@x-wide {
    position: relative !important;
    right: 62.5% !important;
    left: auto !important; /* [1] */
  }
  .u-6\/8\@x-wide {
    width: 75% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-6\/8\@x-wide {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 75% !important;
  }
  .u-pull-6\/8\@x-wide {
    position: relative !important;
    right: 75% !important;
    left: auto !important; /* [1] */
  }
  .u-7\/8\@x-wide {
    width: 87.5% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-7\/8\@x-wide {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 87.5% !important;
  }
  .u-pull-7\/8\@x-wide {
    position: relative !important;
    right: 87.5% !important;
    left: auto !important; /* [1] */
  }
  .u-8\/8\@x-wide {
    width: 100% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-8\/8\@x-wide {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 100% !important;
  }
  .u-pull-8\/8\@x-wide {
    position: relative !important;
    right: 100% !important;
    left: auto !important; /* [1] */
  }
  .u-1\/9\@x-wide {
    width: 11.1111111111% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-1\/9\@x-wide {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 11.1111111111% !important;
  }
  .u-pull-1\/9\@x-wide {
    position: relative !important;
    right: 11.1111111111% !important;
    left: auto !important; /* [1] */
  }
  .u-2\/9\@x-wide {
    width: 22.2222222222% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-2\/9\@x-wide {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 22.2222222222% !important;
  }
  .u-pull-2\/9\@x-wide {
    position: relative !important;
    right: 22.2222222222% !important;
    left: auto !important; /* [1] */
  }
  .u-3\/9\@x-wide {
    width: 33.3333333333% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-3\/9\@x-wide {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 33.3333333333% !important;
  }
  .u-pull-3\/9\@x-wide {
    position: relative !important;
    right: 33.3333333333% !important;
    left: auto !important; /* [1] */
  }
  .u-4\/9\@x-wide {
    width: 44.4444444444% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-4\/9\@x-wide {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 44.4444444444% !important;
  }
  .u-pull-4\/9\@x-wide {
    position: relative !important;
    right: 44.4444444444% !important;
    left: auto !important; /* [1] */
  }
  .u-5\/9\@x-wide {
    width: 55.5555555556% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-5\/9\@x-wide {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 55.5555555556% !important;
  }
  .u-pull-5\/9\@x-wide {
    position: relative !important;
    right: 55.5555555556% !important;
    left: auto !important; /* [1] */
  }
  .u-6\/9\@x-wide {
    width: 66.6666666667% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-6\/9\@x-wide {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 66.6666666667% !important;
  }
  .u-pull-6\/9\@x-wide {
    position: relative !important;
    right: 66.6666666667% !important;
    left: auto !important; /* [1] */
  }
  .u-7\/9\@x-wide {
    width: 77.7777777778% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-7\/9\@x-wide {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 77.7777777778% !important;
  }
  .u-pull-7\/9\@x-wide {
    position: relative !important;
    right: 77.7777777778% !important;
    left: auto !important; /* [1] */
  }
  .u-8\/9\@x-wide {
    width: 88.8888888889% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-8\/9\@x-wide {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 88.8888888889% !important;
  }
  .u-pull-8\/9\@x-wide {
    position: relative !important;
    right: 88.8888888889% !important;
    left: auto !important; /* [1] */
  }
  .u-9\/9\@x-wide {
    width: 100% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-9\/9\@x-wide {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 100% !important;
  }
  .u-pull-9\/9\@x-wide {
    position: relative !important;
    right: 100% !important;
    left: auto !important; /* [1] */
  }
  .u-1\/10\@x-wide {
    width: 10% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-1\/10\@x-wide {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 10% !important;
  }
  .u-pull-1\/10\@x-wide {
    position: relative !important;
    right: 10% !important;
    left: auto !important; /* [1] */
  }
  .u-2\/10\@x-wide {
    width: 20% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-2\/10\@x-wide {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 20% !important;
  }
  .u-pull-2\/10\@x-wide {
    position: relative !important;
    right: 20% !important;
    left: auto !important; /* [1] */
  }
  .u-3\/10\@x-wide {
    width: 30% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-3\/10\@x-wide {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 30% !important;
  }
  .u-pull-3\/10\@x-wide {
    position: relative !important;
    right: 30% !important;
    left: auto !important; /* [1] */
  }
  .u-4\/10\@x-wide {
    width: 40% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-4\/10\@x-wide {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 40% !important;
  }
  .u-pull-4\/10\@x-wide {
    position: relative !important;
    right: 40% !important;
    left: auto !important; /* [1] */
  }
  .u-5\/10\@x-wide {
    width: 50% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-5\/10\@x-wide {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 50% !important;
  }
  .u-pull-5\/10\@x-wide {
    position: relative !important;
    right: 50% !important;
    left: auto !important; /* [1] */
  }
  .u-6\/10\@x-wide {
    width: 60% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-6\/10\@x-wide {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 60% !important;
  }
  .u-pull-6\/10\@x-wide {
    position: relative !important;
    right: 60% !important;
    left: auto !important; /* [1] */
  }
  .u-7\/10\@x-wide {
    width: 70% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-7\/10\@x-wide {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 70% !important;
  }
  .u-pull-7\/10\@x-wide {
    position: relative !important;
    right: 70% !important;
    left: auto !important; /* [1] */
  }
  .u-8\/10\@x-wide {
    width: 80% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-8\/10\@x-wide {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 80% !important;
  }
  .u-pull-8\/10\@x-wide {
    position: relative !important;
    right: 80% !important;
    left: auto !important; /* [1] */
  }
  .u-9\/10\@x-wide {
    width: 90% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-9\/10\@x-wide {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 90% !important;
  }
  .u-pull-9\/10\@x-wide {
    position: relative !important;
    right: 90% !important;
    left: auto !important; /* [1] */
  }
  .u-10\/10\@x-wide {
    width: 100% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-10\/10\@x-wide {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 100% !important;
  }
  .u-pull-10\/10\@x-wide {
    position: relative !important;
    right: 100% !important;
    left: auto !important; /* [1] */
  }
  .u-1\/11\@x-wide {
    width: 9.0909090909% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-1\/11\@x-wide {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 9.0909090909% !important;
  }
  .u-pull-1\/11\@x-wide {
    position: relative !important;
    right: 9.0909090909% !important;
    left: auto !important; /* [1] */
  }
  .u-2\/11\@x-wide {
    width: 18.1818181818% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-2\/11\@x-wide {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 18.1818181818% !important;
  }
  .u-pull-2\/11\@x-wide {
    position: relative !important;
    right: 18.1818181818% !important;
    left: auto !important; /* [1] */
  }
  .u-3\/11\@x-wide {
    width: 27.2727272727% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-3\/11\@x-wide {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 27.2727272727% !important;
  }
  .u-pull-3\/11\@x-wide {
    position: relative !important;
    right: 27.2727272727% !important;
    left: auto !important; /* [1] */
  }
  .u-4\/11\@x-wide {
    width: 36.3636363636% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-4\/11\@x-wide {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 36.3636363636% !important;
  }
  .u-pull-4\/11\@x-wide {
    position: relative !important;
    right: 36.3636363636% !important;
    left: auto !important; /* [1] */
  }
  .u-5\/11\@x-wide {
    width: 45.4545454545% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-5\/11\@x-wide {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 45.4545454545% !important;
  }
  .u-pull-5\/11\@x-wide {
    position: relative !important;
    right: 45.4545454545% !important;
    left: auto !important; /* [1] */
  }
  .u-6\/11\@x-wide {
    width: 54.5454545455% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-6\/11\@x-wide {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 54.5454545455% !important;
  }
  .u-pull-6\/11\@x-wide {
    position: relative !important;
    right: 54.5454545455% !important;
    left: auto !important; /* [1] */
  }
  .u-7\/11\@x-wide {
    width: 63.6363636364% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-7\/11\@x-wide {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 63.6363636364% !important;
  }
  .u-pull-7\/11\@x-wide {
    position: relative !important;
    right: 63.6363636364% !important;
    left: auto !important; /* [1] */
  }
  .u-8\/11\@x-wide {
    width: 72.7272727273% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-8\/11\@x-wide {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 72.7272727273% !important;
  }
  .u-pull-8\/11\@x-wide {
    position: relative !important;
    right: 72.7272727273% !important;
    left: auto !important; /* [1] */
  }
  .u-9\/11\@x-wide {
    width: 81.8181818182% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-9\/11\@x-wide {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 81.8181818182% !important;
  }
  .u-pull-9\/11\@x-wide {
    position: relative !important;
    right: 81.8181818182% !important;
    left: auto !important; /* [1] */
  }
  .u-10\/11\@x-wide {
    width: 90.9090909091% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-10\/11\@x-wide {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 90.9090909091% !important;
  }
  .u-pull-10\/11\@x-wide {
    position: relative !important;
    right: 90.9090909091% !important;
    left: auto !important; /* [1] */
  }
  .u-11\/11\@x-wide {
    width: 100% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-11\/11\@x-wide {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 100% !important;
  }
  .u-pull-11\/11\@x-wide {
    position: relative !important;
    right: 100% !important;
    left: auto !important; /* [1] */
  }
  .u-1\/12\@x-wide {
    width: 8.3333333333% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-1\/12\@x-wide {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 8.3333333333% !important;
  }
  .u-pull-1\/12\@x-wide {
    position: relative !important;
    right: 8.3333333333% !important;
    left: auto !important; /* [1] */
  }
  .u-2\/12\@x-wide {
    width: 16.6666666667% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-2\/12\@x-wide {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 16.6666666667% !important;
  }
  .u-pull-2\/12\@x-wide {
    position: relative !important;
    right: 16.6666666667% !important;
    left: auto !important; /* [1] */
  }
  .u-3\/12\@x-wide {
    width: 25% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-3\/12\@x-wide {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 25% !important;
  }
  .u-pull-3\/12\@x-wide {
    position: relative !important;
    right: 25% !important;
    left: auto !important; /* [1] */
  }
  .u-4\/12\@x-wide {
    width: 33.3333333333% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-4\/12\@x-wide {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 33.3333333333% !important;
  }
  .u-pull-4\/12\@x-wide {
    position: relative !important;
    right: 33.3333333333% !important;
    left: auto !important; /* [1] */
  }
  .u-5\/12\@x-wide {
    width: 41.6666666667% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-5\/12\@x-wide {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 41.6666666667% !important;
  }
  .u-pull-5\/12\@x-wide {
    position: relative !important;
    right: 41.6666666667% !important;
    left: auto !important; /* [1] */
  }
  .u-6\/12\@x-wide {
    width: 50% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-6\/12\@x-wide {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 50% !important;
  }
  .u-pull-6\/12\@x-wide {
    position: relative !important;
    right: 50% !important;
    left: auto !important; /* [1] */
  }
  .u-7\/12\@x-wide {
    width: 58.3333333333% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-7\/12\@x-wide {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 58.3333333333% !important;
  }
  .u-pull-7\/12\@x-wide {
    position: relative !important;
    right: 58.3333333333% !important;
    left: auto !important; /* [1] */
  }
  .u-8\/12\@x-wide {
    width: 66.6666666667% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-8\/12\@x-wide {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 66.6666666667% !important;
  }
  .u-pull-8\/12\@x-wide {
    position: relative !important;
    right: 66.6666666667% !important;
    left: auto !important; /* [1] */
  }
  .u-9\/12\@x-wide {
    width: 75% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-9\/12\@x-wide {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 75% !important;
  }
  .u-pull-9\/12\@x-wide {
    position: relative !important;
    right: 75% !important;
    left: auto !important; /* [1] */
  }
  .u-10\/12\@x-wide {
    width: 83.3333333333% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-10\/12\@x-wide {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 83.3333333333% !important;
  }
  .u-pull-10\/12\@x-wide {
    position: relative !important;
    right: 83.3333333333% !important;
    left: auto !important; /* [1] */
  }
  .u-11\/12\@x-wide {
    width: 91.6666666667% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-11\/12\@x-wide {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 91.6666666667% !important;
  }
  .u-pull-11\/12\@x-wide {
    position: relative !important;
    right: 91.6666666667% !important;
    left: auto !important; /* [1] */
  }
  .u-12\/12\@x-wide {
    width: 100% !important;
  }
  /**
   * 1. Reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-12\/12\@x-wide {
    position: relative !important;
    right: auto !important; /* [1] */
    left: 100% !important;
  }
  .u-pull-12\/12\@x-wide {
    position: relative !important;
    right: 100% !important;
    left: auto !important; /* [1] */
  }
  .u-push-none\@x-wide {
    left: auto !important;
  }
  .u-pull-none\@x-wide {
    right: auto !important;
  }
}
/* ==========================================================================
   #PRINT
   ========================================================================== */
/**
 * Very crude, reset-like styles taken from the HTML5 Boilerplate:
 * https://github.com/h5bp/html5-boilerplate/blob/5.3.0/dist/doc/css.md#print-styles
 * https://github.com/h5bp/html5-boilerplate/blob/master/dist/css/main.css#L205-L282
 */
@media print {
  /**
   * 1. Black prints faster: http://www.sanbeiji.com/archives/953
   */
  *,
  *:before,
  *:after {
    background: transparent !important;
    color: #000 !important; /* [1] */
    box-shadow: none !important;
    text-shadow: none !important;
  }
  a,
  a:visited {
    text-decoration: underline;
  }
  a[href]:after {
    content: " (" attr(href) ")";
  }
  abbr[title]:after {
    content: " (" attr(title) ")";
  }
  /**
   * Don’t show links that are fragment identifiers, or use the `javascript:`
   * pseudo protocol.
   */
  a[href^="#"]:after,
  a[href^="javascript:"]:after {
    content: "";
  }
  pre,
  blockquote {
    border: 1px solid #999;
    page-break-inside: avoid;
  }
  /**
   * Printing Tables: http://css-discuss.incutio.com/wiki/Printing_Tables
   */
  thead {
    display: table-header-group;
  }
  tr,
  img {
    page-break-inside: avoid;
  }
  img {
    max-width: 100% !important;
  }
  p,
  h2,
  h3 {
    orphans: 3;
    widows: 3;
  }
  h2,
  h3 {
    page-break-after: avoid;
  }
}
html, body {
  height: 100%;
}

body {
  margin: 0;
  font-family: Roboto, "Helvetica Neue", sans-serif;
}

/*# sourceMappingURL=styles.css.map*/