@charset "UTF-8";
:root, [data-theme=default] {
  --color-fill-brand: rgb(255, 105, 0);
  --color-fill-brand-90: rgba(255, 105, 0, 0.9);
  --color-fill-brand-80: rgba(255, 105, 0, 0.8);
  --color-fill-brand-70: rgba(255, 105, 0, 0.7);
  --color-fill-brand-60: rgba(255, 105, 0, 0.6);
  --color-fill-brand-black: rgb(4, 6, 6);
  --color-fill-brand-black-90: rgba(4, 6, 6, 0.9);
  --color-fill-brand-black-80: rgba(4, 6, 6, 0.8);
  --color-fill-brand-black-70: rgba(4, 6, 6, 0.7);
  --color-fill-brand-black-60: rgba(4, 6, 6, 0.6);
  --color-fill-brand-white: rgb(255, 255, 255);
  --color-fill-brand-white-90: rgba(255, 255, 255, 0.9);
  --color-fill-brand-white-80: rgba(255, 255, 255, 0.8);
  --color-fill-brand-white-70: rgba(255, 255, 255, 0.7);
  --color-fill-brand-white-60: rgba(255, 255, 255, 0.6);
  --color-fill-approved: rgb(39, 194, 117);
  --color-fill-approved-10: rgba(39, 194, 117, 0.1);
  --color-fill-action: rgb(237, 154, 67);
  --color-fill-action-10: rgba(237, 154, 67, 0.1);
  --color-fill-declined: rgb(205, 54, 65);
  --color-fill-declined-10: rgba(205, 54, 65, 0.1);
  --color-fill-other: rgb(0, 144, 188);
  --color-fill-other-10: rgba(30, 144, 188, 0.1);
  --color-text-heading: rgb(43, 53, 65);
  --color-text-heading-90: rgba(43, 53, 65, 0.9);
  --color-text-base: rgb(89, 102, 120);
  --color-text-base-90: rgba(89, 102, 120, 0.9);
  --color-text-base-80: rgba(89, 102, 120, 0.8);
  --color-text-base-70: rgba(89, 102, 120, 0.7);
  --color-text-base-60: rgba(89, 102, 120, 0.6);
  --color-text-base-reverse: rgb(255, 255, 255);
  --color-text-base-90-reverse: rgba(255, 255, 255, 0.9);
  --color-text-base-80-reverse: rgba(255, 255, 255, 0.8);
  --color-text-base-70-reverse: rgba(255, 255, 255, 0.7);
  --color-text-base-60-reverse: rgba(255, 255, 255, 0.6);
  --color-background-base: #ffffff;
  --color-background-body: rgb(248, 248, 250);
  --color-background-menu: rgb(23, 23, 23);
  --color-background-menu-active: rgb(34, 34, 36);
  --colour-background-overlay: rgba(0, 0, 0, 0.4);
  --color-border-base: rgba(127, 139, 167, 0.2);
  --color-btn-primary: rgb(0, 144, 188);
  --color-btn-secondary: rgb(250, 250, 250);
  --box-shadow-1: 0px 0px 4px rgba(0, 0, 0, 0.03);
  --box-shadow-1-selected: 0px 0px 5px 1px rgba(0, 144, 188, 0.68);
  --box-shadow-inputs: 0px 0px 4px rgba(0, 125, 163, 0.7);
  --box-shadow-radio-selected: 0px 0px 3px 2px rgba(0, 144, 188, 0.21);
  --border-radius: 10px;
  --color-background-tooltip: rgba(0, 0, 0, 0.9);
}

[data-theme=dark] {
  --color-background-body: rgb(34, 34, 36);
  --color-background-base: #1c1c1c;
  --color-fill-approved-10: rgba(39, 194, 117, 0.3);
  --color-fill-action-10: rgba(237, 154, 67, 0.3);
  --color-fill-declined-10: rgba(205, 54, 65, 0.3);
  --color-fill-other-10: rgba(30, 144, 188, 0.3);
  --color-border-base: rgb(0, 0, 0);
  --color-btn-secondary: #454447;
  --color-fill-brand-black: rgb(255, 255, 255);
  --color-fill-brand-black-90: rgba(255, 255, 255, 0.9);
  --color-fill-brand-black-80: rgba(255, 255, 255, 0.8);
  --color-fill-brand-black-70: rgba(255, 255, 255, 0.7);
  --color-fill-brand-black-60: rgba(255, 255, 255, 0.6);
  --color-fill-brand-white: rgb(4, 6, 6);
  --color-fill-brand-white-90: rgba(4, 6, 6, 0.9);
  --color-fill-brand-white-80: rgba(4, 6, 6, 0.8);
  --color-fill-brand-white-70: rgba(4, 6, 6, 0.7);
  --color-fill-brand-white-60: rgba(4, 6, 6, 0.6);
  --color-text-base: rgb(255, 255, 255);
  --color-text-base-90: rgba(255, 255, 255, 0.9);
  --color-text-base-80: rgba(255, 255, 255, 0.8);
  --color-text-base-70: rgba(255, 255, 255, 0.7);
  --color-text-base-60: rgba(255, 255, 255, 0.6);
  --color-text-base-reverse: rgb(89, 102, 120);
  --color-text-base-90-reverse: rgba(89, 102, 120, 0.9);
  --color-text-base-80-reverse: rgba(89, 102, 120, 0.8);
  --color-text-base-70-reverse: rgba(89, 102, 120, 0.7);
  --color-text-base-60-reverse: rgba(89, 102, 120, 0.6);
  --color-text-heading: rgba(255, 255, 255, 0.9);
  --color-text-heading-90: rgba(255, 255, 255, 0.8);
  --colour-background-overlay: rgba(255, 255, 255, 0.2);
}

.brand .text {
  color: var(--color-fill-brand-black);
}
.brand .ident {
  color: var(--color-fill-brand);
}

.color-fill-brand {
  background-color: var(--color-fill-brand);
}

.color-fill-brand-90 {
  background-color: var(--color-fill-brand-90);
}

.color-fill-brand-80 {
  background-color: var(--color-fill-brand-80);
}

.color-fill-brand-70 {
  background-color: var(--color-fill-brand-70);
}

.color-fill-brand-60 {
  background-color: var(--color-fill-brand-60);
}

.color-fill-brand-black {
  background-color: var(--color-fill-brand-black);
}

.color-fill-brand-black-90 {
  background-color: var(--color-fill-brand-black-90);
}

.color-fill-brand-black-80 {
  background-color: var(--color-fill-brand-black-80);
}

.color-fill-brand-black-70 {
  background-color: var(--color-fill-brand-black-70);
}

.color-fill-brand-black-60 {
  background-color: var(--color-fill-brand-black-60);
}

.color-fill-brand-white {
  background-color: var(--color-fill-brand-white);
}

.color-fill-brand-white-90 {
  background-color: var(--color-fill-brand-white-90);
}

.color-fill-brand-white-80 {
  background-color: var(--color-fill-brand-white-80);
}

.color-fill-brand-white-70 {
  background-color: var(--color-fill-brand-white-70);
}

.color-fill-brand-white-60 {
  background-color: var(--color-fill-brand-white-60);
}

.color-fill-approved {
  background-color: var(--color-fill-approved);
}

.color-fill-approved-10 {
  background-color: var(--color-fill-approved-10);
}

.color-fill-action {
  background-color: var(--color-fill-action);
}

.color-fill-action-10 {
  background-color: var(--color-fill-action-10);
}

.color-fill-declined {
  background-color: var(--color-fill-declined);
}

.color-fill-declined-10 {
  background-color: var(--color-fill-declined-10);
}

.color-fill-other {
  background-color: var(--color-fill-other);
}

.color-fill-other-10 {
  background-color: var(--color-fill-other-10);
}

.color-text-heading {
  background-color: var(--color-text-heading);
}

.color-text-heading-90 {
  background-color: var(--color-text-heading-90);
}

.color-text-base {
  background-color: var(--color-text-base);
}

.color-text-base-90 {
  background-color: var(--color-text-base-90);
}

.color-text-base-80 {
  background-color: var(--color-text-base-80);
}

.color-text-base-70 {
  background-color: var(--color-text-base-70);
}

.color-text-base-60 {
  background-color: var(--color-text-base-60);
}

.color-text-base-reverse {
  background-color: var(--color-text-base-reverse);
}

.color-text-base-90-reverse {
  background-color: var(--color-text-base-90-reverse);
}

.color-text-base-80-reverse {
  background-color: var(--color-text-base-80-reverse);
}

.color-text-base-70-reverse {
  background-color: var(--color-text-base-70-reverse);
}

.color-text-base-60-reverse {
  background-color: var(--color-text-base-60-reverse);
}

.color-border-base {
  background-color: var(--color-border-base);
}

/*! normalize.css v4.2.0 | MIT License | github.com/necolas/normalize.css */
/**
 * 1. Change the default font family in all browsers (opinionated).
 * 2. Correct the line height in all browsers.
 * 3. Prevent adjustments of font size after orientation changes in IE and iOS.
 */
/* Document
   ========================================================================== */
html {
  line-height: 1.15; /* 2 */
  -ms-text-size-adjust: 100%; /* 3 */
  -webkit-text-size-adjust: 100%; /* 3 */
}

/* Sections
   ========================================================================== */
/**
 * Remove the margin in all browsers (opinionated).
 */
body {
  margin: 0 auto;
  padding: 0;
  width: 100%;
}

/**
 * Add the correct display in IE 9-.
 */
article,
footer,
header,
nav,
section {
  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
   ========================================================================== */
/**
 * Add the correct display in IE 9-.
 * 1. Add the correct display in IE.
 */
figcaption,
figure,
main { /* 1 */
  display: block;
}

/**
 * Add the correct margin in IE 8.
 */
/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */
/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
/* Text-level semantics
   ========================================================================== */
/**
 * 1. Remove the gray background on active links in IE 10.
 * 2. Remove gaps in links underline in iOS 8+ and Safari 8+.
 */
a {
  background-color: transparent; /* 1 */
  -webkit-text-decoration-skip: objects; /* 2 */
}

/**
 * Remove the outline on focused links when they are also active or hovered
 * in all browsers (opinionated).
 */
a:active,
a:hover {
  outline-width: 0;
}

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

/**
 * Prevent the duplicate application of `bolder` by the next rule in Safari 6.
 */
strong {
  font-weight: inherit;
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */
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.
 */
/**
 * Add the correct font style in Android 4.3-.
 */
/**
 * Add the correct background and color in IE 9-.
 */
/**
 * Add the correct font size in all browsers.
 */
small {
  font-size: 100%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */
/* Embedded content
   ========================================================================== */
/**
 * Add the correct display in IE 9-.
 */
video {
  display: inline-block;
}

/**
 * Add the correct display in iOS 4-7.
 */
/**
 * Remove the border on images inside links in IE 10-.
 */
img {
  border-style: none;
}

/**
 * Hide the overflow in IE.
 */
svg:not(:root) {
  overflow: hidden;
}

/* Forms
   ========================================================================== */
/**
 * 1. Change the font styles in all browsers (opinionated).
 * 2. Remove the margin in Firefox and Safari.
 */
button,
input,
select,
textarea {
  font-family: sans-serif; /* 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;
}

/**
 * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
 *    controls in Android 4.
 * 2. Correct the inability to style clickable types in iOS and Safari.
 */
button,
html [type=button],
[type=submit] {
  -webkit-appearance: button; /* 2 */
}

/**
 * Remove the inner border and padding in Firefox.
 */
button::-moz-focus-inner,
[type=button]::-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=submit]:-moz-focusring {
  outline: 1px dotted ButtonText;
}

/**
 * Change the border, margin, and padding in all browsers (opinionated).
 */
/**
 * 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.
 */
/**
 * 1. Add the correct display in IE 9-.
 * 2. Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */
/**
 * Remove the default vertical scrollbar in IE.
 */
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.
 */
/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */
/**
 * Remove the inner padding and cancel buttons in Chrome and Safari on OS X.
 */
/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */
/* Interactive
   ========================================================================== */
/*
 * Add the correct display in IE 9-.
 * 1. Add the correct display in Edge, IE, and Firefox.
 */
/*
 * Add the correct display in all browsers.
 */
/* Scripting
   ========================================================================== */
/**
 * Add the correct display in IE 9-.
 */
/**
 * Add the correct display in IE.
 */
/* Hidden
   ========================================================================== */
/**
 * Add the correct display in IE 10-.
 */
[hidden], .hide {
  display: none;
}

/* Responsive Video
   ========================================================================== */
/**
 * Allow video to work repsonsive-.
 */
.videoWrapper, .mce-object-iframe {
  position: relative;
  padding-bottom: 56.25%;
  /*padding-top:25px;*/
  height: 0;
  width: 100%;
}

.videoWrapper iframe, .mce-object-iframe iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

/* Picture
   ========================================================================== */
picture {
  display: block;
  line-height: 0;
}

/* Border Box
   ========================================================================== */
/**
* Apply border-box to all elements
 */
*, *:before, *:after {
  -webkit-box-sizing: border-box; /* Chrome 9-, Safari 5-, iOS 4.2-, Android 3-, Blackberry 7- */
  -moz-box-sizing: border-box; /* Firefox (desktop or Android) 28- */
  box-sizing: border-box; /* Firefox 29+, IE 8+, Chrome 10+, Safari 5.1+, Opera 9.5+, iOS 5+, Opera Mini Anything, Blackberry 10+, Android 4+ */
}

/*  Clearfix hack
  ========================================================================== */
/**
* Force Element To Self-Clear its Children (.group or .row)
 */
/* IE 8 and up*/
.group:after,
.row:after {
  content: "";
  display: table;
  clear: both;
}

/*  For IE 6/7 (trigger hasLayout)
.group {
    zoom: 1;
} */
/*  SVG
   ========================================================================== */
/**
* If SVG then hide fallback span
 */
.fallback {
  display: none;
}

.no-inlinesvg svg {
  display: none;
}

.no-inlinesvg .fallback {
  display: block;
}

/*  Reset List
   ========================================================================== */
/**
* Reset order and unorder list in header
 */
header ul, header ol, footer ul, footer ol, .warning ul, .error ul, .success ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.error-txt {
  color: var(--color-fill-error);
}

/*  error List
   ========================================================================== */
.warning, .error, .success {
  background-color: var(--color-fill-declined);
  border-radius: 10px;
  color: #fff;
  margin: 16px 0 16px;
  padding: 16px;
}
.warning ul, .error ul, .success ul {
  margin: 0px 0 0 10px;
  list-style: disc;
}
.warning ul li, .error ul li, .success ul li {
  padding-left: 0px;
}
.warning ul li a, .error ul li a, .success ul li a {
  color: #fff !important;
}
.warning p, .error p, .success p {
  margin: 0 !important;
}

.success {
  background-color: var(--color-fill-approved);
  color: #fff;
}

.col12 {
  width: 100%;
  display: block;
  float: left;
  padding: 0 8px;
  vertical-align: top;
  letter-spacing: normal;
  word-spacing: normal;
  position: relative;
  min-height: 1px;
}
.col12:before, .col12:after {
  content: " ";
  display: block;
  height: 0;
  overflow: hidden;
}
.col12:after {
  clear: both;
}

.col11 {
  width: 100%;
  display: block;
  float: left;
  padding: 0 8px;
  vertical-align: top;
  letter-spacing: normal;
  word-spacing: normal;
  position: relative;
  min-height: 1px;
}
.col11:before, .col11:after {
  content: " ";
  display: block;
  height: 0;
  overflow: hidden;
}
.col11:after {
  clear: both;
}

.col10 {
  width: 100%;
  display: block;
  float: left;
  padding: 0 8px;
  vertical-align: top;
  letter-spacing: normal;
  word-spacing: normal;
  position: relative;
  min-height: 1px;
}
.col10:before, .col10:after {
  content: " ";
  display: block;
  height: 0;
  overflow: hidden;
}
.col10:after {
  clear: both;
}

.col9 {
  width: 100%;
  display: block;
  float: left;
  padding: 0 8px;
  vertical-align: top;
  letter-spacing: normal;
  word-spacing: normal;
  position: relative;
  min-height: 1px;
}
.col9:before, .col9:after {
  content: " ";
  display: block;
  height: 0;
  overflow: hidden;
}
.col9:after {
  clear: both;
}

.col8 {
  width: 100%;
  display: block;
  float: left;
  padding: 0 8px;
  vertical-align: top;
  letter-spacing: normal;
  word-spacing: normal;
  position: relative;
  min-height: 1px;
}
.col8:before, .col8:after {
  content: " ";
  display: block;
  height: 0;
  overflow: hidden;
}
.col8:after {
  clear: both;
}

.col7 {
  width: 100%;
  display: block;
  float: left;
  padding: 0 8px;
  vertical-align: top;
  letter-spacing: normal;
  word-spacing: normal;
  position: relative;
  min-height: 1px;
}
.col7:before, .col7:after {
  content: " ";
  display: block;
  height: 0;
  overflow: hidden;
}
.col7:after {
  clear: both;
}

.col6 {
  width: 100%;
  display: block;
  float: left;
  padding: 0 8px;
  vertical-align: top;
  letter-spacing: normal;
  word-spacing: normal;
  position: relative;
  min-height: 1px;
}
.col6:before, .col6:after {
  content: " ";
  display: block;
  height: 0;
  overflow: hidden;
}
.col6:after {
  clear: both;
}

.col5 {
  width: 100%;
  display: block;
  float: left;
  padding: 0 8px;
  vertical-align: top;
  letter-spacing: normal;
  word-spacing: normal;
  position: relative;
  min-height: 1px;
}
.col5:before, .col5:after {
  content: " ";
  display: block;
  height: 0;
  overflow: hidden;
}
.col5:after {
  clear: both;
}

.col4 {
  width: 100%;
  display: block;
  float: left;
  padding: 0 8px;
  vertical-align: top;
  letter-spacing: normal;
  word-spacing: normal;
  position: relative;
  min-height: 1px;
}
.col4:before, .col4:after {
  content: " ";
  display: block;
  height: 0;
  overflow: hidden;
}
.col4:after {
  clear: both;
}

.col3 {
  width: 100%;
  display: block;
  float: left;
  padding: 0 8px;
  vertical-align: top;
  letter-spacing: normal;
  word-spacing: normal;
  position: relative;
  min-height: 1px;
}
.col3:before, .col3:after {
  content: " ";
  display: block;
  height: 0;
  overflow: hidden;
}
.col3:after {
  clear: both;
}

.col2 {
  width: 100%;
  display: block;
  float: left;
  padding: 0 8px;
  vertical-align: top;
  letter-spacing: normal;
  word-spacing: normal;
  position: relative;
  min-height: 1px;
}
.col2:before, .col2:after {
  content: " ";
  display: block;
  height: 0;
  overflow: hidden;
}
.col2:after {
  clear: both;
}

.col1 {
  width: 100%;
  display: block;
  float: left;
  padding: 0 8px;
  vertical-align: top;
  letter-spacing: normal;
  word-spacing: normal;
  position: relative;
  min-height: 1px;
}
.col1:before, .col1:after {
  content: " ";
  display: block;
  height: 0;
  overflow: hidden;
}
.col1:after {
  clear: both;
}

.contain .col6 {
  width: 50%;
  display: block;
  float: left;
  padding: 0 8px;
  vertical-align: top;
  letter-spacing: normal;
  word-spacing: normal;
  position: relative;
  min-height: 1px;
}
.contain .col6:before, .contain .col6:after {
  content: " ";
  display: block;
  height: 0;
  overflow: hidden;
}
.contain .col6:after {
  clear: both;
}

.contain .col4 {
  width: 33.3333333333%;
  display: block;
  float: left;
  padding: 0 8px;
  vertical-align: top;
  letter-spacing: normal;
  word-spacing: normal;
  position: relative;
  min-height: 1px;
}
.contain .col4:before, .contain .col4:after {
  content: " ";
  display: block;
  height: 0;
  overflow: hidden;
}
.contain .col4:after {
  clear: both;
}

.contain .col2 {
  width: 16.6666666667%;
  display: block;
  float: left;
  padding: 0 8px;
  vertical-align: top;
  letter-spacing: normal;
  word-spacing: normal;
  position: relative;
  min-height: 1px;
}
.contain .col2:before, .contain .col2:after {
  content: " ";
  display: block;
  height: 0;
  overflow: hidden;
}
.contain .col2:after {
  clear: both;
}

@media only screen and (min-width: 768px) {
  .col12 {
    width: 100%;
    display: block;
    float: left;
    padding: 0 8px;
    vertical-align: top;
    letter-spacing: normal;
    word-spacing: normal;
    position: relative;
    min-height: 1px;
  }
  .col12:before, .col12:after {
    content: " ";
    display: block;
    height: 0;
    overflow: hidden;
  }
  .col12:after {
    clear: both;
  }
  .col12 {
    padding: 0 16px;
  }
  .col11 {
    width: 91.6666666667%;
    display: block;
    float: left;
    padding: 0 8px;
    vertical-align: top;
    letter-spacing: normal;
    word-spacing: normal;
    position: relative;
    min-height: 1px;
  }
  .col11:before, .col11:after {
    content: " ";
    display: block;
    height: 0;
    overflow: hidden;
  }
  .col11:after {
    clear: both;
  }
  .col11 {
    padding: 0 16px;
  }
  .col10 {
    width: 83.3333333333%;
    display: block;
    float: left;
    padding: 0 8px;
    vertical-align: top;
    letter-spacing: normal;
    word-spacing: normal;
    position: relative;
    min-height: 1px;
  }
  .col10:before, .col10:after {
    content: " ";
    display: block;
    height: 0;
    overflow: hidden;
  }
  .col10:after {
    clear: both;
  }
  .col10 {
    padding: 0 16px;
  }
  .col9 {
    width: 75%;
    display: block;
    float: left;
    padding: 0 8px;
    vertical-align: top;
    letter-spacing: normal;
    word-spacing: normal;
    position: relative;
    min-height: 1px;
  }
  .col9:before, .col9:after {
    content: " ";
    display: block;
    height: 0;
    overflow: hidden;
  }
  .col9:after {
    clear: both;
  }
  .col9 {
    padding: 0 16px;
  }
  .col8 {
    width: 66.6666666667%;
    display: block;
    float: left;
    padding: 0 8px;
    vertical-align: top;
    letter-spacing: normal;
    word-spacing: normal;
    position: relative;
    min-height: 1px;
  }
  .col8:before, .col8:after {
    content: " ";
    display: block;
    height: 0;
    overflow: hidden;
  }
  .col8:after {
    clear: both;
  }
  .col8 {
    padding: 0 16px;
  }
  .col7 {
    width: 58.3333333333%;
    display: block;
    float: left;
    padding: 0 8px;
    vertical-align: top;
    letter-spacing: normal;
    word-spacing: normal;
    position: relative;
    min-height: 1px;
  }
  .col7:before, .col7:after {
    content: " ";
    display: block;
    height: 0;
    overflow: hidden;
  }
  .col7:after {
    clear: both;
  }
  .col7 {
    padding: 0 16px;
  }
  .col6 {
    width: 50%;
    display: block;
    float: left;
    padding: 0 8px;
    vertical-align: top;
    letter-spacing: normal;
    word-spacing: normal;
    position: relative;
    min-height: 1px;
  }
  .col6:before, .col6:after {
    content: " ";
    display: block;
    height: 0;
    overflow: hidden;
  }
  .col6:after {
    clear: both;
  }
  .col6 {
    padding: 0 16px;
  }
  .col5 {
    width: 41.6666666667%;
    display: block;
    float: left;
    padding: 0 8px;
    vertical-align: top;
    letter-spacing: normal;
    word-spacing: normal;
    position: relative;
    min-height: 1px;
  }
  .col5:before, .col5:after {
    content: " ";
    display: block;
    height: 0;
    overflow: hidden;
  }
  .col5:after {
    clear: both;
  }
  .col5 {
    padding: 0 16px;
  }
  .col4 {
    width: 33.3333333333%;
    display: block;
    float: left;
    padding: 0 8px;
    vertical-align: top;
    letter-spacing: normal;
    word-spacing: normal;
    position: relative;
    min-height: 1px;
  }
  .col4:before, .col4:after {
    content: " ";
    display: block;
    height: 0;
    overflow: hidden;
  }
  .col4:after {
    clear: both;
  }
  .col4 {
    padding: 0 16px;
  }
  .col3 {
    width: 25%;
    display: block;
    float: left;
    padding: 0 8px;
    vertical-align: top;
    letter-spacing: normal;
    word-spacing: normal;
    position: relative;
    min-height: 1px;
  }
  .col3:before, .col3:after {
    content: " ";
    display: block;
    height: 0;
    overflow: hidden;
  }
  .col3:after {
    clear: both;
  }
  .col3 {
    padding: 0 16px;
  }
  .col2 {
    width: 16.6666666667%;
    display: block;
    float: left;
    padding: 0 8px;
    vertical-align: top;
    letter-spacing: normal;
    word-spacing: normal;
    position: relative;
    min-height: 1px;
  }
  .col2:before, .col2:after {
    content: " ";
    display: block;
    height: 0;
    overflow: hidden;
  }
  .col2:after {
    clear: both;
  }
  .col2 {
    padding: 0 16px;
  }
  .col1 {
    width: 8.3333333333%;
    display: block;
    float: left;
    padding: 0 8px;
    vertical-align: top;
    letter-spacing: normal;
    word-spacing: normal;
    position: relative;
    min-height: 1px;
  }
  .col1:before, .col1:after {
    content: " ";
    display: block;
    height: 0;
    overflow: hidden;
  }
  .col1:after {
    clear: both;
  }
  .col1 {
    padding: 0 16px;
  }
  .contain .col6 {
    width: 50%;
    display: block;
    float: left;
    padding: 0 8px;
    vertical-align: top;
    letter-spacing: normal;
    word-spacing: normal;
    position: relative;
    min-height: 1px;
  }
  .contain .col6:before, .contain .col6:after {
    content: " ";
    display: block;
    height: 0;
    overflow: hidden;
  }
  .contain .col6:after {
    clear: both;
  }
  .contain .col6 {
    padding: 0 16px;
  }
  .contain .col4 {
    width: 33.3333333333%;
    display: block;
    float: left;
    padding: 0 8px;
    vertical-align: top;
    letter-spacing: normal;
    word-spacing: normal;
    position: relative;
    min-height: 1px;
  }
  .contain .col4:before, .contain .col4:after {
    content: " ";
    display: block;
    height: 0;
    overflow: hidden;
  }
  .contain .col4:after {
    clear: both;
  }
  .contain .col4 {
    padding: 0 16px;
  }
  .contain .col2 {
    width: 16.6666666667%;
    display: block;
    float: left;
    padding: 0 8px;
    vertical-align: top;
    letter-spacing: normal;
    word-spacing: normal;
    position: relative;
    min-height: 1px;
  }
  .contain .col2:before, .contain .col2:after {
    content: " ";
    display: block;
    height: 0;
    overflow: hidden;
  }
  .contain .col2:after {
    clear: both;
  }
  .contain .col2 {
    padding: 0 16px;
  }
  .col10m, .contain .col10m {
    width: 83.3333333333%;
    display: block;
    float: left;
    padding: 0 8px;
    vertical-align: top;
    letter-spacing: normal;
    word-spacing: normal;
    position: relative;
    min-height: 1px;
  }
  .col10m:before, .col10m:after, .contain .col10m:before, .contain .col10m:after {
    content: " ";
    display: block;
    height: 0;
    overflow: hidden;
  }
  .col10m:after, .contain .col10m:after {
    clear: both;
  }
  .col10m, .contain .col10m {
    padding: 0 16px;
  }
  .col8m, .contain .col8m {
    width: 66.6666666667%;
    display: block;
    float: left;
    padding: 0 8px;
    vertical-align: top;
    letter-spacing: normal;
    word-spacing: normal;
    position: relative;
    min-height: 1px;
  }
  .col8m:before, .col8m:after, .contain .col8m:before, .contain .col8m:after {
    content: " ";
    display: block;
    height: 0;
    overflow: hidden;
  }
  .col8m:after, .contain .col8m:after {
    clear: both;
  }
  .col8m, .contain .col8m {
    padding: 0 16px;
  }
  .col4m, .contain .col4m {
    width: 33.3333333333%;
    display: block;
    float: left;
    padding: 0 8px;
    vertical-align: top;
    letter-spacing: normal;
    word-spacing: normal;
    position: relative;
    min-height: 1px;
  }
  .col4m:before, .col4m:after, .contain .col4m:before, .contain .col4m:after {
    content: " ";
    display: block;
    height: 0;
    overflow: hidden;
  }
  .col4m:after, .contain .col4m:after {
    clear: both;
  }
  .col4m, .contain .col4m {
    padding: 0 16px;
  }
  .col6m, .contain .col6m {
    width: 50%;
    display: block;
    float: left;
    padding: 0 8px;
    vertical-align: top;
    letter-spacing: normal;
    word-spacing: normal;
    position: relative;
    min-height: 1px;
  }
  .col6m:before, .col6m:after, .contain .col6m:before, .contain .col6m:after {
    content: " ";
    display: block;
    height: 0;
    overflow: hidden;
  }
  .col6m:after, .contain .col6m:after {
    clear: both;
  }
  .col6m, .contain .col6m {
    padding: 0 16px;
  }
}
@media only screen and (min-width: 992px) {
  .col3l {
    width: 25%;
    display: block;
    float: left;
    padding: 0 8px;
    vertical-align: top;
    letter-spacing: normal;
    word-spacing: normal;
    position: relative;
    min-height: 1px;
  }
  .col3l:before, .col3l:after {
    content: " ";
    display: block;
    height: 0;
    overflow: hidden;
  }
  .col3l:after {
    clear: both;
  }
  .col3l {
    padding: 0 16px;
  }
  .col4l, .contain .col4l {
    width: 33.3333333333%;
    display: block;
    float: left;
    padding: 0 8px;
    vertical-align: top;
    letter-spacing: normal;
    word-spacing: normal;
    position: relative;
    min-height: 1px;
  }
  .col4l:before, .col4l:after, .contain .col4l:before, .contain .col4l:after {
    content: " ";
    display: block;
    height: 0;
    overflow: hidden;
  }
  .col4l:after, .contain .col4l:after {
    clear: both;
  }
  .col4l, .contain .col4l {
    padding: 0 16px;
  }
  .col5l {
    width: 41.6666666667%;
    display: block;
    float: left;
    padding: 0 8px;
    vertical-align: top;
    letter-spacing: normal;
    word-spacing: normal;
    position: relative;
    min-height: 1px;
  }
  .col5l:before, .col5l:after {
    content: " ";
    display: block;
    height: 0;
    overflow: hidden;
  }
  .col5l:after {
    clear: both;
  }
  .col5l {
    padding: 0 16px;
  }
  .col6l {
    width: 50%;
    display: block;
    float: left;
    padding: 0 8px;
    vertical-align: top;
    letter-spacing: normal;
    word-spacing: normal;
    position: relative;
    min-height: 1px;
  }
  .col6l:before, .col6l:after {
    content: " ";
    display: block;
    height: 0;
    overflow: hidden;
  }
  .col6l:after {
    clear: both;
  }
  .col6l {
    padding: 0 16px;
  }
  .col7l {
    width: 58.3333333333%;
    display: block;
    float: left;
    padding: 0 8px;
    vertical-align: top;
    letter-spacing: normal;
    word-spacing: normal;
    position: relative;
    min-height: 1px;
  }
  .col7l:before, .col7l:after {
    content: " ";
    display: block;
    height: 0;
    overflow: hidden;
  }
  .col7l:after {
    clear: both;
  }
  .col7l {
    padding: 0 16px;
  }
  .col8l {
    width: 66.6666666667%;
    display: block;
    float: left;
    padding: 0 8px;
    vertical-align: top;
    letter-spacing: normal;
    word-spacing: normal;
    position: relative;
    min-height: 1px;
  }
  .col8l:before, .col8l:after {
    content: " ";
    display: block;
    height: 0;
    overflow: hidden;
  }
  .col8l:after {
    clear: both;
  }
  .col8l {
    padding: 0 16px;
  }
  .col9l {
    width: 75%;
    display: block;
    float: left;
    padding: 0 8px;
    vertical-align: top;
    letter-spacing: normal;
    word-spacing: normal;
    position: relative;
    min-height: 1px;
  }
  .col9l:before, .col9l:after {
    content: " ";
    display: block;
    height: 0;
    overflow: hidden;
  }
  .col9l:after {
    clear: both;
  }
  .col9l {
    padding: 0 16px;
  }
  .col10l {
    width: 83.3333333333%;
    display: block;
    float: left;
    padding: 0 8px;
    vertical-align: top;
    letter-spacing: normal;
    word-spacing: normal;
    position: relative;
    min-height: 1px;
  }
  .col10l:before, .col10l:after {
    content: " ";
    display: block;
    height: 0;
    overflow: hidden;
  }
  .col10l:after {
    clear: both;
  }
  .col10l {
    padding: 0 16px;
  }
  .pushCol1 {
    margin-left: 0.0833333333;
  }
  .pushCol2 {
    margin-left: 0.1666666667;
  }
}
@media only screen and (min-width: 1164px) {
  .col11xl {
    width: 91.6666666667%;
    display: block;
    float: left;
    padding: 0 8px;
    vertical-align: top;
    letter-spacing: normal;
    word-spacing: normal;
    position: relative;
    min-height: 1px;
  }
  .col11xl:before, .col11xl:after {
    content: " ";
    display: block;
    height: 0;
    overflow: hidden;
  }
  .col11xl:after {
    clear: both;
  }
  .col11xl {
    padding: 0 16px;
  }
  .col10xl {
    width: 83.3333333333%;
    display: block;
    float: left;
    padding: 0 8px;
    vertical-align: top;
    letter-spacing: normal;
    word-spacing: normal;
    position: relative;
    min-height: 1px;
  }
  .col10xl:before, .col10xl:after {
    content: " ";
    display: block;
    height: 0;
    overflow: hidden;
  }
  .col10xl:after {
    clear: both;
  }
  .col10xl {
    padding: 0 16px;
  }
  .col9xl {
    width: 75%;
    display: block;
    float: left;
    padding: 0 8px;
    vertical-align: top;
    letter-spacing: normal;
    word-spacing: normal;
    position: relative;
    min-height: 1px;
  }
  .col9xl:before, .col9xl:after {
    content: " ";
    display: block;
    height: 0;
    overflow: hidden;
  }
  .col9xl:after {
    clear: both;
  }
  .col9xl {
    padding: 0 16px;
  }
  .col8xl {
    width: 66.6666666667%;
    display: block;
    float: left;
    padding: 0 8px;
    vertical-align: top;
    letter-spacing: normal;
    word-spacing: normal;
    position: relative;
    min-height: 1px;
  }
  .col8xl:before, .col8xl:after {
    content: " ";
    display: block;
    height: 0;
    overflow: hidden;
  }
  .col8xl:after {
    clear: both;
  }
  .col8xl {
    padding: 0 16px;
  }
  .col7xl {
    width: 58.3333333333%;
    display: block;
    float: left;
    padding: 0 8px;
    vertical-align: top;
    letter-spacing: normal;
    word-spacing: normal;
    position: relative;
    min-height: 1px;
  }
  .col7xl:before, .col7xl:after {
    content: " ";
    display: block;
    height: 0;
    overflow: hidden;
  }
  .col7xl:after {
    clear: both;
  }
  .col7xl {
    padding: 0 16px;
  }
  .col6xl {
    width: 50%;
    display: block;
    float: left;
    padding: 0 8px;
    vertical-align: top;
    letter-spacing: normal;
    word-spacing: normal;
    position: relative;
    min-height: 1px;
  }
  .col6xl:before, .col6xl:after {
    content: " ";
    display: block;
    height: 0;
    overflow: hidden;
  }
  .col6xl:after {
    clear: both;
  }
  .col6xl {
    padding: 0 16px;
  }
  .col5xl {
    width: 41.6666666667%;
    display: block;
    float: left;
    padding: 0 8px;
    vertical-align: top;
    letter-spacing: normal;
    word-spacing: normal;
    position: relative;
    min-height: 1px;
  }
  .col5xl:before, .col5xl:after {
    content: " ";
    display: block;
    height: 0;
    overflow: hidden;
  }
  .col5xl:after {
    clear: both;
  }
  .col5xl {
    padding: 0 16px;
  }
  .col4xl {
    width: 33.3333333333%;
    display: block;
    float: left;
    padding: 0 8px;
    vertical-align: top;
    letter-spacing: normal;
    word-spacing: normal;
    position: relative;
    min-height: 1px;
  }
  .col4xl:before, .col4xl:after {
    content: " ";
    display: block;
    height: 0;
    overflow: hidden;
  }
  .col4xl:after {
    clear: both;
  }
  .col4xl {
    padding: 0 16px;
  }
  .col2xl {
    width: 16.6666666667%;
    display: block;
    float: left;
    padding: 0 8px;
    vertical-align: top;
    letter-spacing: normal;
    word-spacing: normal;
    position: relative;
    min-height: 1px;
  }
  .col2xl:before, .col2xl:after {
    content: " ";
    display: block;
    height: 0;
    overflow: hidden;
  }
  .col2xl:after {
    clear: both;
  }
  .col2xl {
    padding: 0 16px;
  }
  .col1xl {
    width: 8.3333333333%;
    display: block;
    float: left;
    padding: 0 8px;
    vertical-align: top;
    letter-spacing: normal;
    word-spacing: normal;
    position: relative;
    min-height: 1px;
  }
  .col1xl:before, .col1xl:after {
    content: " ";
    display: block;
    height: 0;
    overflow: hidden;
  }
  .col1xl:after {
    clear: both;
  }
  .col1xl {
    padding: 0 16px;
  }
  .pushCol1xl {
    margin-left: 0.0833333333;
  }
}
.container {
  margin: 0 auto;
  padding-left: 16px;
  padding-right: 16px;
  width: 100%;
}
@media only screen and (min-width: 768px) {
  .container {
    overflow: visible;
    padding-left: 48px;
    padding-right: 48px;
  }
}
@media only screen and (min-width: 992px) {
  .container {
    max-width: none;
    padding-left: 56px;
    padding-right: 56px;
  }
}
@media only screen and (min-width: 1164px) {
  .container {
    max-width: 1212px;
    padding-left: 48px;
    padding-right: 48px;
  }
}
.container:before, .container:after {
  content: " ";
  display: block;
  height: 0;
  overflow: hidden;
}
.container:after {
  clear: both;
}

.container.bleedm {
  padding-left: 0px;
  padding-right: 0px;
}
.container.bleedm .row {
  margin-left: 0;
  margin-right: 0;
}
.container.bleedm .row > div {
  padding: 0;
}

@media only screen and (min-width: 768px) {
  .container.bleedm {
    padding-left: 48px;
    padding-right: 48px;
  }
  .container.bleedm .row:before, .container.bleedm .row:after {
    content: " ";
    display: block;
    height: 0;
    overflow: hidden;
  }
  .container.bleedm .row:after {
    clear: both;
  }
  .container.bleedm .row {
    margin-left: -16px;
    margin-right: -16px;
  }
  .container.bleedm .row > div {
    padding: 0 16px;
  }
}
@media only screen and (min-width: 992px) {
  .container.bleedm {
    padding-left: 56px;
    padding-right: 56px;
  }
}
@media only screen and (min-width: 1164px) {
  .container.bleedm {
    padding-left: 48px;
    padding-right: 48px;
  }
}
.row:before, .row:after {
  content: " ";
  display: block;
  height: 0;
  overflow: hidden;
}
.row:after {
  clear: both;
}
.row {
  margin-left: -8px;
  margin-right: -8px;
}
.row .row {
  margin-left: -8px;
  margin-right: -8px;
}

.row.uniform {
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-direction: normal;
  -webkit-box-orient: horizontal;
  -moz-box-direction: normal;
  -moz-box-orient: horizontal;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-pack: start;
  -moz-box-pack: start;
  -ms-flex-pack: start;
  -webkit-justify-content: flex-start;
  justify-content: flex-start;
}

@media only screen and (min-width: 768px) {
  .row.visibleFlow {
    overflow: visible;
  }
  .row:before, .row:after {
    content: " ";
    display: block;
    height: 0;
    overflow: hidden;
  }
  .row:after {
    clear: both;
  }
  .row {
    margin-left: -16px;
    margin-right: -16px;
  }
  .row .row:before, .row .row:after {
    content: " ";
    display: block;
    height: 0;
    overflow: hidden;
  }
  .row .row:after {
    clear: both;
  }
  .row .row {
    margin-left: -16px;
    margin-right: -16px;
  }
  .row.uniform.reverse {
    -webkit-box-direction: reverse;
    -webkit-box-orient: horizontal;
    -moz-box-direction: reverse;
    -moz-box-orient: horizontal;
    -webkit-flex-direction: row-reverse;
    -ms-flex-direction: row-reverse;
    flex-direction: row-reverse;
  }
  .row.uniform.--alignCenter {
    -webkit-box-align: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
  }
  .row.uniform > div {
    -webkit-box: 0;
    -moz-box: 0;
    -webkit-flex: 0 0 auto;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
  }
}
@media only screen and (min-width: 992px) {
  .row, .container.bleedm .row {
    margin-right: -16px;
    margin-left: -16px;
  }
  .container.bleedm .row .col12 {
    padding: 0 16px;
  }
}
@media only screen and (min-width: 1164px) {
  .row, .container.bleedm .row {
    margin-right: -16px;
    margin-left: -16px;
  }
}
/* Position Columns
   ========================================================================== */
/**
* Position .col emenlemnts


.center {
	margin: 0 auto;
	float: none !important;
	text-align: center;
}

.centerCol {
	margin: 0 auto;
	float: none !important;
}

.pullRight {
	    margin-left: auto;
  //  float: right !important;
}

.pullLeft {
    float: left !important;
} */
body {
  font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu;
  font-weight: 400;
  font-size: 64%; /* flexible baseline - usually 16px (30 ÷ 16 = 1.875) */
  color: inherit;
  color: var(--color-text-base);
}

.h1, .h2, .h3, .h4, label {
  color: var(--color-text-heading);
}

a {
  color: inherit;
}

.h1 {
  font-size: 22px;
  font-weight: 600;
}

.h2 {
  font-size: 20px;
  font-weight: 600;
}

.h3 {
  font-size: 20px;
  font-weight: 500;
}

.xl {
  font-size: 16px;
  line-height: 24px;
}

p, li, table, .l, label {
  font-size: 14px;
  line-height: 20px;
}

.m {
  font-size: 12px;
  line-height: 16px;
}

.s {
  font-size: 11px;
  line-height: 16px;
}

.semibold {
  font-weight: 600;
}

.medium, th {
  font-weight: 500;
}

.regular {
  font-weight: 400;
}

p, li, label {
  font-weight: 400;
}

::-moz-selection {
  background-color: var(--color-fill-brand);
  color: #fff;
}

::selection {
  background-color: var(--color-fill-brand);
  color: #fff;
}

ul, ol {
  padding-left: 0;
}

@media only screen and (min-width: 1024px) {
  .h1 {
    font-size: 24px;
  }
  .h2 {
    font-size: 24px;
  }
  .h3 {
    font-size: 18px;
  }
}
.txtInput {
  position: relative;
  background-color: var(--color-background-base);
  border: 1px solid;
  border-color: var(--color-border-base);
  color: var(--color-text-base);
  width: 100%;
  border-radius: var(--border-radius);
}
.txtInput input:read-only {
  color: rgba(0, 0, 0, 0.4);
}
.txtInput input, .txtInput textarea {
  border-radius: var(--border-radius);
  width: 100%;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border: none;
  font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu;
  font-weight: 400;
  font-size: 16px;
  line-height: 16px;
  padding: 16px;
  color: var(--color-text-base);
  background: transparent;
}
.txtInput textarea {
  line-height: 20px;
}

.txtInput.--inlinelabel,
.txtInput.--inlineButton {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  /*input {

    padding:0; //base8(1) 0;

  }*/
}
.txtInput.--inlinelabel button,
.txtInput.--inlineButton button {
  position: absolute;
  top: auto;
  right: 16px;
  cursor: pointer;
  color: var(--color-text-base);
}
.txtInput.--inlinelabel button:hover,
.txtInput.--inlineButton button:hover {
  text-decoration: none !important;
  filter: brightness(1.1);
}

.txtInput.--inlinelabel {
  border-width: 2px;
}
.txtInput.--inlinelabel label {
  color: var(--color-text-heading);
  font-size: 14px;
  line-height: 16px;
  align-items: center;
  margin-bottom: 0 !important;
  flex: 1 0 auto;
  min-width: 90px;
  padding: 16px 16px;
  display: flex;
  white-space: nowrap;
}
.txtInput.--inlinelabel input {
  margin-left: 8px;
}

.panelSearch form {
  padding: 0;
  margin: 0;
  width: 100%;
}
.panelSearch .txtInput.--inlineButton input {
  padding: 16px 16px;
}

.txtInput.--password .--invisible .__invisible {
  display: none;
}
.txtInput.--password .--invisible .__visible {
  display: block;
}
.txtInput.--password .--visible .__invisible {
  display: block;
}
.txtInput.--password .--visible .__visible {
  display: none;
}

.txtInput:hover input:read-only {
  cursor: not-allowed;
}

.txtInput:focus-within input, .txtInput:focus-within textarea, .txtInput.active input, .txtInput.active textarea {
  outline: none;
}
.txtInput:focus-within, .txtInput.active {
  box-shadow: var(--box-shadow-inputs);
  border-color: var(--color-fill-brand);
}

.txtInput.disabled:focus-within {
  border-color: var(--color-border-base);
  box-shadow: none;
}

[data-theme=dark] .txtInput {
  background-color: var(--color-background-body);
}

@media only screen and (min-width: 1024px) {
  .panelHeader .txtInput.--inlinelabel input, .panelHeader .txtInput.--inlinelabel textarea, .txtInput input, .txtInput textarea {
    font-size: 14px;
  }
  .txtInput.--inlinelabel input {
    font-size: 16px;
  }
}
.selectStyle {
  margin: 0;
  border: none;
  width: 100%;
  border-radius: 4px;
  overflow: hidden;
  border: 1px solid;
  border-color: var(--color-border-base);
  background-color: var(--color-background-base);
  position: relative;
}

.selectStyle.active select {
  color: #000;
}

.selectStyle:after {
  top: 50%;
  right: 16px;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
  border-color: transparent;
  border-top-color: var(--color-text-base-60);
  border-width: 4px;
  margin-top: -1px;
  z-index: 100;
  background-color: var(--color-background-body);
}

.selectStyle select {
  padding: 16px 16px 16px 16px;
  font-size: 16px;
  width: 100%;
  font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu;
  color: var(--color-text-base-60);
  border: none;
  text-transform: none;
  box-shadow: none;
  background-color: transparent;
  background-image: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  text-overflow: ellipsis;
}

.selectStyle select:focus {
  outline: none;
}

.selectStyle.__min {
  border: none;
  background: transparent;
}

@media only screen and (min-width: 1024px) {
  .selectStyle select {
    padding: 8px 16px 8px 8px;
    font-size: 13px;
  }
}
.custom_dd:hover .dropdownSpace {
  display: block;
}

.custom_dd {
  position: relative;
}
.custom_dd button {
  padding: 8px 36px 8px 8px;
  text-align: left;
  margin: 0;
  border: none;
  width: 100%;
  overflow: hidden;
  border: 1px solid;
  font-size: 14px;
  position: relative;
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -moz-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
}
.custom_dd button .lbl {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 90%;
}
.custom_dd button:after {
  top: 50%;
  right: 16px;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
  border-color: transparent;
  border-top-color: var(--color-text-base-60);
  border-width: 4px;
  margin-top: -1px;
  z-index: 100;
}
.custom_dd button.icon {
  width: auto;
  padding: 8px;
}
.custom_dd button.icon:after {
  display: none;
}
.custom_dd .dropdownSpace.--full {
  width: 257px;
}
.custom_dd .dropdownSpace.--auto {
  width: auto;
}
.custom_dd .dropdownSpace.--auto ul li {
  white-space: nowrap;
}
.custom_dd .dropdownSpace.--left {
  right: auto;
  left: 0;
}
.custom_dd .dropdownSpace.--left .dropdownChildren:after,
.custom_dd .dropdownSpace.--left .dropdownChildren:before {
  right: auto;
  left: 15px;
}
.custom_dd .dropdownSpace {
  display: none;
  position: absolute;
  top: 100%;
  width: 234px;
  left: auto;
  right: 0;
  z-index: 111;
}
.custom_dd .dropdownSpace .dropdownChildren:before,
.custom_dd .dropdownSpace .dropdownChildren:after {
  top: -4px;
  right: 15px;
  border: solid transparent;
  content: "";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
}
.custom_dd .dropdownSpace .dropdownChildren:after {
  border-color: rgba(0, 0, 0, 0);
  border-bottom-color: #fff;
  border-width: 6px;
  margin-left: 0;
  top: -3px;
  right: 15px;
}
.custom_dd .dropdownSpace .dropdownChildren:before {
  border-color: rgba(186, 186, 186, 0);
  border-bottom-color: var(--color-border-base);
  border-width: 6px;
}
.custom_dd .dropdownSpace .dropdownChildren.--fixedScroll {
  overflow-y: scroll;
  max-height: 250px;
}
.custom_dd .dropdownSpace .dropdownChildren {
  padding: 8px;
  margin: 8px 0 0;
  border-radius: 4px;
  border: 1px solid;
  border-color: var(--color-border-base);
  background-color: var(--color-background-base);
  box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.03);
}
.custom_dd .dropdownSpace .dropdownChildren .img {
  margin: 0 0 8px;
  background-color: var(--color-background-body);
  height: 94px;
  overflow: hidden;
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-direction: normal;
  -webkit-box-orient: vertical;
  -moz-box-direction: normal;
  -moz-box-orient: vertical;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -moz-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
  -webkit-box-pack: center;
  -moz-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
}
.custom_dd .dropdownSpace .dropdownChildren .img img {
  max-width: 120px;
}
.custom_dd .dropdownSpace .dropdownChildren .groupTitle:first-child {
  margin-top: -8px;
}
.custom_dd .dropdownSpace .dropdownChildren .groupTitle {
  margin: 0;
  padding: 8px 8px;
  color: var(--color-text-base-80);
}
.custom_dd .dropdownSpace .dropdownChildren ul.--spaced > li:last-child {
  margin-bottom: 0;
}
.custom_dd .dropdownSpace .dropdownChildren ul.--spaced > li {
  margin-bottom: 8px;
}
.custom_dd .dropdownSpace .dropdownChildren ul {
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-direction: normal;
  -webkit-box-orient: vertical;
  -moz-box-direction: normal;
  -moz-box-orient: vertical;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  list-style: none;
  padding: 0;
  margin: 0;
}
.custom_dd .dropdownSpace .dropdownChildren ul > li {
  display: block;
  width: 100%;
}
.custom_dd .dropdownSpace .dropdownChildren ul > li a.active, .custom_dd .dropdownSpace .dropdownChildren ul > li a.active:hover {
  background-color: var(--color-fill-brand-10);
}
.custom_dd .dropdownSpace .dropdownChildren ul > li a.active .checkmark, .custom_dd .dropdownSpace .dropdownChildren ul > li a.active:hover .checkmark {
  background-image: url("data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3E%3Cdefs/%3E%3Cpath fill='%23000' fill-opacity='.7' d='M6 10.78L3.22 8l-.947.94L6 12.667l8-8-.94-.94L6 10.78z'/%3E%3C/svg%3E");
  background-size: 16px 16px;
  background-repeat: no-repeat;
  background-position: left center;
}
.custom_dd .dropdownSpace .dropdownChildren ul > li > a, .custom_dd .dropdownSpace .dropdownChildren ul > li > span {
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-direction: normal;
  -webkit-box-orient: horizontal;
  -moz-box-direction: normal;
  -moz-box-orient: horizontal;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
  text-decoration: none;
  padding: 8px;
  color: var(--color-text-base-90);
  border-radius: 4px;
}
.custom_dd .dropdownSpace .dropdownChildren ul > li > a em, .custom_dd .dropdownSpace .dropdownChildren ul > li > span em {
  margin: 4px 0 0;
  font-style: normal;
  font-size: 12px;
  color: var(--color-text-base-60);
}
.custom_dd .dropdownSpace .dropdownChildren ul > li a .checkmark {
  display: inline-block;
  width: 16px;
  height: 16px;
  margin-right: 8px;
}
.custom_dd .dropdownSpace .dropdownChildren ul > li a .label {
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  text-align: left;
  -webkit-box-align: start;
  -moz-box-align: start;
  -ms-flex-align: start;
  -webkit-align-items: flex-start;
  align-items: flex-start;
  -webkit-box-direction: normal;
  -webkit-box-orient: vertical;
  -moz-box-direction: normal;
  -moz-box-orient: vertical;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
}
.custom_dd .dropdownSpace .dropdownChildren ul > li a:hover {
  background-color: var(--color-background-body);
  /*
  .checkmark {
    background-image: url("data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3E%3Cdefs/%3E%3Cpath fill='%23000' fill-opacity='.2' d='M6 10.78L3.22 8l-.947.94L6 12.667l8-8-.94-.94L6 10.78z'/%3E%3C/svg%3E");
    background-size: 16px 16px;
    background-repeat: no-repeat;
    background-position: left center;
  }*/
}
.custom_dd .dropdownSpace .dropdownChildren ul > li .unavailable {
  color: var(--color-text-base-60);
  cursor: not-allowed;
  padding: 8px;
}
.custom_dd .dropdownSpace .dropdownChildren ul.color {
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-direction: normal;
  -webkit-box-orient: horizontal;
  -moz-box-direction: normal;
  -moz-box-orient: horizontal;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
  margin: 0 -4px;
}
.custom_dd .dropdownSpace .dropdownChildren ul.color li {
  margin: 0px 4px 8px;
  width: auto;
}
.custom_dd .dropdownSpace .dropdownChildren ul.color li a {
  padding: 0;
}
.custom_dd .dropdownSpace .dropdownChildren ul.color li a span {
  position: relative;
  width: 24px;
  height: 24px;
  border-radius: 4px;
  display: inline-block;
  -webkit-box-shadow: inset 0px 0px 0px 1px #E5E5E5;
  -moz-box-shadow: inset 0px 0px 0px 1px #E5E5E5;
  box-shadow: inset 0px 0px 0px 1px #E5E5E5;
}
.custom_dd .dropdownSpace .dropdownChildren ul.color li a.active span {
  background-image: url("data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3E%3Cdefs/%3E%3Cpath fill='%23000' fill-opacity='.6' d='M6 10.78L3.22 8l-.947.94L6 12.667l8-8-.94-.94L6 10.78z'/%3E%3C/svg%3E");
  background-size: 16px 16px;
  background-repeat: no-repeat;
  background-position: center center;
  -webkit-box-shadow: inset 0px 0px 0px 1px #a2a2a2;
  -moz-box-shadow: inset 0px 0px 0px 1px #a2a2a2;
  box-shadow: inset 0px 0px 0px 1px #a2a2a2;
}
.custom_dd .dropdownSpace .dropdownChildren ul.color li a:hover {
  background: transparent;
}
.custom_dd .dropdownSpace .dropdownChildren ul.color li a:hover span {
  -webkit-box-shadow: inset 0px 0px 0px 1px #a2a2a2;
  -moz-box-shadow: inset 0px 0px 0px 1px #a2a2a2;
  box-shadow: inset 0px 0px 0px 1px #a2a2a2;
}

.custom_dd.--iconBtn .dropdownSpace {
  left: auto;
  width: 205px;
}
.custom_dd.--iconBtn .dropdownSpace .dropdownChildren:before,
.custom_dd.--iconBtn .dropdownSpace .dropdownChildren:after {
  right: 12px;
}

/* Toggle swicth */
.theme-switch-wrapper {
  display: flex;
  align-items: center;
}

.theme-switch {
  display: inline-block;
  height: 20px;
  position: relative;
  width: 40px;
}

.theme-switch input {
  display: none;
}

.slider {
  background-color: var(--color-border-base);
  bottom: 0;
  cursor: pointer;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  transition: 0.4s;
}

.slider:before {
  background-color: #fff;
  bottom: 4px;
  content: "";
  left: 4px;
  position: absolute;
  transition: 0.4s;
  width: 12px;
  height: 12px;
}

input:checked + .slider {
  background-color: var(--color-fill-brand);
}

input:checked + .slider:before {
  transform: translateX(18px);
}

.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}

/* End */
.grp-radio.--vertical {
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-direction: normal;
  -webkit-box-orient: horizontal;
  -moz-box-direction: normal;
  -moz-box-orient: horizontal;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}
.grp-radio.--vertical .radio {
  -webkit-box: 1;
  -moz-box: 1;
  -webkit-flex: 1 0 100%;
  -ms-flex: 1 0 100%;
  flex: 1 0 100%;
  margin: 0 0 16px;
}
.grp-radio.--vertical .radio:last-child {
  margin-bottom: 0;
}

.radio {
  display: inline-block;
  margin-right: 8px;
  cursor: pointer;
  font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  font-size: 14px;
  color: var(--color-text-base);
  /* Hide the browser's default checkbox */
}
.radio input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}
.radio {
  /* Create a custom checkbox */
}
.radio .checkmark {
  height: auto;
  width: 100%;
  border: 1px solid;
  border-color: var(--color-border-base);
  border-radius: 5px;
  padding: 16px;
  line-height: 24px;
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-direction: normal;
  -webkit-box-orient: horizontal;
  -moz-box-direction: normal;
  -moz-box-orient: horizontal;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-box-align: center;
  -moz-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
}
.radio .checkmark span {
  margin-left: auto;
  margin-right: 0;
  height: 20px;
  width: 20px;
  flex: 0 0 20px;
  padding: 1px;
  border-radius: 100px;
  border: 1px solid;
  color: var(--color-text-base-90);
  background-color: var(--color-btn-secondary);
  border-color: var(--color-border-base);
}
.radio .checkmark svg {
  height: auto;
  width: 100%;
  color: var(--color-btn-secondary);
}

.radio:first-child, .inlineRadios .radio:first-child {
  margin-left: 0;
}

/* On mouse-over, add a grey background color */
.radio:hover input ~ .checkmark,
.radio input:focus ~ .checkmark {
  border-color: var(--color-fill-brand);
}

/* When the checkbox is checked, add a blue background */
.radio input:checked ~ .checkmark {
  color: var(--color-fill-brand);
  box-shadow: 0px 0px 4px rgba(0, 125, 163, 0.7);
  border: 1px solid var(--color-fill-brand);
}
.radio input:checked ~ .checkmark span {
  background-color: var(--color-fill-brand);
  border-color: var(--color-fill-brand);
}
.radio input:checked ~ .checkmark span svg {
  color: var(--color-fill-brand-white);
}

[data-theme=dark] .radio {
  background-color: var(--color-background-body);
}

@media only screen and (min-width: 1024px) {
  .inlineRadios {
    display: -webkit-box;
    display: -moz-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-direction: normal;
    -webkit-box-orient: horizontal;
    -moz-box-direction: normal;
    -moz-box-orient: horizontal;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-box-pack: start;
    -moz-box-pack: start;
    -ms-flex-pack: start;
    -webkit-justify-content: flex-start;
    justify-content: flex-start;
    -webkit-box-align: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
    margin: 0;
  }
  .inlineRadios .radio {
    display: inline-block;
    -webkit-box: 1;
    -moz-box: 1;
    -webkit-flex: 1 0 auto;
    -ms-flex: 1 0 auto;
    flex: 1 0 auto;
    text-align: center;
  }
  *::-ms-backdrop, .inlineRadios .radio {
    min-width: auto;
    -webkit-box: 1;
    -moz-box: 1;
    -webkit-flex: 1 1 250px;
    -ms-flex: 1 1 250px;
    flex: 1 1 250px;
  }
}
.checkbox {
  font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu;
  display: block;
  position: relative;
  padding: 8px 0 8px 36px;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  margin: 0;
  text-align: left;
  font-size: 13px;
  color: var(--color-text-base-60);
  /* Hide the browser's default checkbox */
}
.checkbox input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}
.checkbox {
  /* Create a custom checkbox */
}
.checkbox .checkmark {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 0;
  border-radius: 3px;
  background-color: var(--color-background-body);
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-direction: normal;
  -webkit-box-orient: horizontal;
  -moz-box-direction: normal;
  -moz-box-orient: horizontal;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-box-pack: center;
  -moz-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-box-align: center;
  -moz-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
}
.checkbox .checkmark span {
  border-radius: 3px;
  height: 24px;
  width: 24px;
  padding: 1px;
  background-color: var(--color-background-body);
  color: var(--color-background-body);
  border: 1px solid;
  border-color: var(--color-border-base);
}

.inlineCheckboxes {
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-direction: normal;
  -webkit-box-orient: vertical;
  -moz-box-direction: normal;
  -moz-box-orient: vertical;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
}
.inlineCheckboxes .checkbox {
  display: inline-block;
  padding: 0;
  margin: 0;
  /* Create a custom checkbox */
}
.inlineCheckboxes .checkbox .checkmark {
  background: transparent;
  position: relative;
  transform: translate(0);
  height: 100%;
  width: 100%;
  padding: 8px 16px 8px 0px;
  line-height: 14px;
  -webkit-box-pack: start;
  -moz-box-pack: start;
  -ms-flex-pack: start;
  -webkit-justify-content: flex-start;
  justify-content: flex-start;
}
.inlineCheckboxes .checkbox .checkmark span {
  margin-right: 12px;
  height: 24px;
  width: 24px;
  padding: 1px;
  background-color: var(--color-background-body);
  color: var(--color-background-body);
  border: 1px solid;
  border-color: var(--color-border-base);
}
.inlineCheckboxes .checkbox .checkmark svg {
  height: 21px;
  width: 21px;
}

/* On mouse-over, add a grey background color */
.checkbox:hover input ~ .checkmark span,
.checkbox input:focus ~ .checkmark span {
  border: 1px solid rgba(0, 173, 255, 0.5);
  box-shadow: 0 0 0 4px rgba(0, 173, 255, 0.2);
}

/* When the checkbox is checked, add a blue background */
.inlineCheckboxes .checkbox input:checked ~ .checkmark {
  border: none;
  background: transparent;
  color: var(--color-text-base-90);
}
.inlineCheckboxes .checkbox input:checked ~ .checkmark span {
  background-color: var(--color-fill-brand);
  color: #fff;
}

.checkbox input:checked ~ .checkmark span {
  border: none;
  color: #fff;
  background-color: var(--color-fill-brand);
}

*::-ms-backdrop, .checkmark svg {
  top: 10px;
  left: 10px;
}

/* Show the checkmark when checked 
.checkbox input:checked ~ .checkmark svg {
  display: block;
}*/
@media only screen and (min-width: 1024px) {
  .inlineCheckboxes .checkbox {
    display: inline-block;
    text-align: center;
  }
  .inlineCheckboxes .checkbox .checkmark {
    padding: 8px 0;
  }
  *::-ms-backdrop, .inlineCheckboxes .checkbox {
    min-width: auto;
    -webkit-box: 1;
    -moz-box: 1;
    -webkit-flex: 1 1 250px;
    -ms-flex: 1 1 250px;
    flex: 1 1 250px;
  }
}
.switch {
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-direction: normal;
  -webkit-box-orient: horizontal;
  -moz-box-direction: normal;
  -moz-box-orient: horizontal;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-box-pack: start;
  -moz-box-pack: start;
  -ms-flex-pack: start;
  -webkit-justify-content: flex-start;
  justify-content: flex-start;
  -webkit-box-align: center;
  -moz-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
  margin: 0;
  border-radius: 4px;
  border: 1px solid var(--color-border-base);
  background-color: var(--color-background-body);
}
.switch .radio {
  display: inline-block;
  text-align: center;
  -webkit-box: 0;
  -moz-box: 0;
  -webkit-flex: 0 1 50%;
  -ms-flex: 0 1 50%;
  flex: 0 1 50%;
  border: none;
  margin: 0;
}
.switch .radio span {
  padding: 8px;
  border: none;
  color: var(--color-text-base-60);
}
.switch .radio:hover input ~ .checkmark,
.switch .radio input:focus ~ .checkmark {
  border-color: var(--color-fill-brand);
}
.switch .radio input:checked ~ .checkmark {
  color: var(--color-text-base-60);
  box-shadow: 1px 0 2px rgba(0, 0, 0, 0.15);
  background: #fff;
  border-radius: 3px;
}
.switch .radio input:checked ~ .checkmark span {
  background: #fff;
}
.switch .radio input:checked ~ .checkmark {
  border-color: var(--color-fill-brand);
}
.switch .radio:last-child input:checked ~ .checkmark {
  box-shadow: -1px 0 2px rgba(0, 0, 0, 0.15);
}

button {
  border: none;
  outline: none;
  background: transparent;
  padding: 0;
}

.btn {
  font-size: 15px;
  padding: 16px;
  line-height: 16px;
  position: relative;
  text-decoration: none;
  text-align: center;
  display: inline-flex;
  flex-direction: row;
  text-align: center;
  align-items: center;
  justify-content: center;
  width: auto;
  border: 1px solid var(--color-fill-brand);
  background-color: var(--color-fill-brand);
  color: var(--color-fill-brand-white);
  border-radius: 4px;
  cursor: pointer;
  min-width: 62px;
  transition: background-color 150ms cubic-bezier(0.215, 0.61, 0.355, 1);
  will-change: background-color;
}

.btn.s {
  padding: 8px;
  font-size: 12px;
}

.btn.secondary {
  border: 1px solid var(--color-text-base);
  background-color: var(color-btn-secondary);
  border-color: var(--color-border-base);
}

.btn.invisible {
  background: transparent;
  border: 0px solid;
}

.btn.disabled {
  cursor: not-allowed;
  opacity: 0.3;
}

.btn.approve {
  background-color: var(--color-fill-approved);
  border-color: var(--color-fill-approved);
}

.btn.decline {
  background-color: var(--color-fill-declined);
  border-color: var(--color-fill-declined);
}

.btn.icon {
  min-width: 0;
}
.btn.icon svg {
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
  margin: 0 4px 0 0;
}

.btn.swap svg {
  -webkit-box-ordinal-group: 3;
  -moz-box-ordinal-group: 3;
  -webkit-order: 2;
  -ms-flex-order: 2;
  order: 2;
  margin: 0 0 0 8px;
}

.btn.notxt {
  min-width: 0;
}
.btn.notxt svg {
  margin: 0;
}

.btn.mobileOnly {
  width: 40px;
  height: 40px;
  padding: 8px;
  border-radius: 10px;
  border: none;
  box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.03);
  background-color: var(--color-background-base);
}
.btn.mobileOnly svg {
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
}
.btn.mobileOnly .txt {
  display: none;
}

.modal .btn {
  font-size: 15px;
  padding: 16px;
  width: 100%;
}

.btn:hover {
  text-decoration: none !important;
  filter: brightness(1.1);
}

.btn.secondary:hover, .btn.secondary:hover {
  filter: contrast(0.9);
}

@media only screen and (min-width: 1024px) {
  .modal__footer .btn {
    width: auto;
    padding: 8px;
    font-size: 12px;
  }
}
section.range-slider {
  position: relative;
  width: 200px;
  height: 35px;
  text-align: center;
}

section.range-slider input {
  pointer-events: none;
  position: absolute;
  overflow: hidden;
  left: 0;
  top: 15px;
  width: 200px;
  outline: none;
  height: 18px;
  margin: 0;
  padding: 0;
}

section.range-slider input::-webkit-slider-thumb {
  pointer-events: all;
  position: relative;
  z-index: 1;
  outline: 0;
}

section.range-slider input::-moz-range-thumb {
  pointer-events: all;
  position: relative;
  z-index: 10;
  -moz-appearance: none;
  width: 9px;
}

section.range-slider input::-moz-range-track {
  position: relative;
  z-index: -1;
  background-color: rgb(0, 0, 0);
  border: 0;
}

section.range-slider input:last-of-type::-moz-range-track {
  -moz-appearance: none;
  background: none transparent;
  border: 0;
}

section.range-slider input[type=range]::-moz-focus-outer {
  border: 0;
}

.sliderWrapper {
  padding: 8px;
  margin: 0;
  border: none;
  width: 100%;
  border-radius: 4px;
  overflow: hidden;
  border: 1px solid var(--color-border-base);
  background-color: var(--color-background-body);
  position: relative;
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-direction: normal;
  -webkit-box-orient: horizontal;
  -moz-box-direction: normal;
  -moz-box-orient: horizontal;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-box-align: center;
  -moz-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
}
.sliderWrapper .sliderControls {
  flex: 1 0 auto;
}
.sliderWrapper .sliderValue {
  color: var(--color-text-base-60);
  margin: 0 0 0 16px !important;
  line-height: 16px;
  width: 38px;
}
.sliderWrapper .sliderValue .unit {
  font-size: 10px;
}

.tooltip {
  position: relative;
}
.tooltip .tip {
  position: absolute;
  z-index: 999;
  user-select: none;
  pointer-events: none;
}
.tooltip .tip span:before {
  border: solid transparent;
  content: "";
  height: 0;
  width: 0;
  z-index: 2;
  position: absolute;
  border-color: rgba(26, 35, 41, 0);
  border-width: 5px;
  margin-left: -5px;
}
.tooltip .tip.bottom-right {
  top: 100%;
  left: auto;
  right: 0;
  transform: translateX(0%);
}
.tooltip .tip.bottom-right span {
  margin-top: 6px;
}
.tooltip .tip.bottom-right span:before {
  bottom: 100%;
  right: 11px;
  border-bottom-color: var(--color-background-tooltip);
}
.tooltip .tip.bottom-left {
  top: 100%;
  left: -8px;
  right: auto;
  transform: translateX(0%);
}
.tooltip .tip.bottom-left span {
  margin-top: 6px;
}
.tooltip .tip.bottom-left span:before {
  bottom: 100%;
  left: 15px;
  border-bottom-color: var(--color-background-tooltip);
}
.tooltip .tip.fixed-width {
  width: 162px;
}
.tooltip .tip.bottom {
  top: 100%;
  right: 50%;
  transform: translateX(50%);
}
.tooltip .tip.bottom span {
  margin-top: 6px;
}
.tooltip .tip.bottom span:before {
  bottom: 100%;
  left: 50%;
  border-bottom-color: var(--color-background-tooltip);
}
.tooltip .tip.up {
  bottom: 100%;
}
.tooltip .tip.up span {
  margin-bottom: 6px;
}
.tooltip .tip.up span:before {
  top: 100%;
  left: 50%;
  border-top-color: var(--color-background-tooltip);
}
.tooltip .tip.left {
  right: 100%;
  top: 50%;
}
.tooltip .tip.left span {
  margin-right: 8px;
  transform: translateY(50%);
}
.tooltip .tip.left span:before {
  top: 50%;
  margin: 0;
  transform: translateY(50%);
  left: 100%;
  border-left-color: var(--color-background-tooltip);
}
.tooltip .tip.right {
  left: 100%;
  top: -50%;
}
.tooltip .tip.right span {
  margin-left: 8px;
  transform: translateY(50%);
}
.tooltip .tip.right span:before {
  top: 50%;
  margin: 0;
  transform: translateY(-50%);
  right: 100%;
  border-right-color: var(--color-background-tooltip);
}
.tooltip .tip span {
  visibility: none;
  opacity: 0;
  display: block;
  padding: 8px;
  font-size: 12px;
  line-height: 16px;
  border-radius: 2px;
  color: var(--color-fill-brand-white);
  background-color: var(--color-background-tooltip);
  position: relative;
  transition: opacity 150ms cubic-bezier(0.215, 0.61, 0.355, 1) 100ms, visibility 100ms linear;
  will-change: opacity;
}
.tooltip .tip span em {
  text-align: center;
  font-style: normal;
}
.tooltip .tip span .left-align {
  text-align: left;
}
.tooltip .tip span .nowrap {
  white-space: nowrap;
}

@media only screen and (min-width: 1024px) {
  .tooltip:hover .tip span {
    transition: opacity 150ms cubic-bezier(0.215, 0.61, 0.355, 1) 1500ms, visibility 1500ms linear;
    visibility: visible;
    opacity: 1;
  }
}
.zoom {
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-direction: normal;
  -webkit-box-orient: horizontal;
  -moz-box-direction: normal;
  -moz-box-orient: horizontal;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-box-pack: start;
  -moz-box-pack: start;
  -ms-flex-pack: start;
  -webkit-justify-content: flex-start;
  justify-content: flex-start;
  -webkit-box-align: center;
  -moz-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
  margin: 0;
  border-radius: 4px;
  border: 1px solid var(--color-border-base);
  background-color: var(--color-background-body);
  font-size: 13px;
  color: var(--color-text-base-60);
}
.zoom .icon {
  padding: 8px;
}
.zoom .value {
  flex: 1 0 auto;
  text-align: center;
}

.positioning {
  margin: 0 0 -8px;
}
.positioning .positioning__row {
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-direction: normal;
  -webkit-box-orient: horizontal;
  -moz-box-direction: normal;
  -moz-box-orient: horizontal;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
  margin: 0 -8px;
}
.positioning .positioning__col {
  -webkit-box: 1;
  -moz-box: 1;
  -webkit-flex: 1 0 33.333%;
  -ms-flex: 1 0 33.333%;
  flex: 1 0 33.333%;
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  margin: 0 -4px;
}
.positioning .positioning__col > .positioning__space {
  margin: 0 8px 8px;
  position: relative;
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  overflow: hidden;
}
.positioning .positioning__col > .positioning__space .txtInput input {
  max-width: 56px;
}
.positioning .positioning__space.topleft:after,
.positioning .positioning__space.topright:after,
.positioning .positioning__space.bottomleft:after,
.positioning .positioning__space.bottomright:after {
  content: "";
  position: absolute;
  width: 100px;
  height: 100px;
  border-radius: 10px;
  border: 1px solid var(--color-border-base);
}
.positioning .positioning__space.topleft:after {
  top: 50%;
  left: 50%;
}
.positioning .positioning__space.topright:after {
  top: 50%;
  right: 50%;
}
.positioning .positioning__space.bottomleft:after {
  bottom: 50%;
  left: 50%;
}
.positioning .positioning__space.bottomright:after {
  bottom: 50%;
  right: 50%;
}

.artwork .box__dragndrop,
.artwork .box__uploading,
.artwork .box__success,
.artwork .box__error,
.artwork .hide {
  display: none;
}
.artwork .artwork__showImage,
.artwork .artwork__noImage {
  position: relative;
  height: 200px;
  border-radius: 4px;
  background-color: var(--color-background-body);
  border: 1px solid;
  border-color: var(-- color-border-base);
}
.artwork .artwork__noImage .artwork__form.is-dragover {
  background-color: var(--color-fill-brand-10);
}
.artwork .artwork__noImage .artwork__form {
  margin: 0;
  height: 100%;
  position: relative;
  overflow: hidden;
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-direction: normal;
  -webkit-box-orient: vertical;
  -moz-box-direction: normal;
  -moz-box-orient: vertical;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -moz-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
  -webkit-box-pack: center;
  -moz-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
}
.artwork .artwork__noImage .dragndrop {
  display: inline-block;
  color: var(--color-text-base-60);
  margin: 0 0 8px;
  font-size: 12px;
}
.artwork .artwork__noImage .upload {
  margin: 0 0 8px;
}
.artwork .artwork__noImage .upload label.btn {
  background: rgba(255, 255, 255, 0.8);
}
.artwork .artwork__noImage .upload input {
  font-size: 100px;
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
}
.artwork .artwork__noImage .nojs {
  display: none;
  color: #fff !important;
}
.artwork .artwork__showImage {
  background: repeating-conic-gradient(#e1e1e1 0% 25%, transparent 0% 50%) 50%/20px 20px;
}
.artwork .artwork__showImage .img {
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-direction: normal;
  -webkit-box-orient: horizontal;
  -moz-box-direction: normal;
  -moz-box-orient: horizontal;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-box-align: center;
  -moz-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
  -webkit-box-pack: center;
  -moz-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  height: 100%;
}
.artwork .artwork__showImage .img img {
  max-height: 200px;
  max-width: 265px;
}
.artwork .artwork__control {
  padding-top: 8px;
}
.artwork .artwork__control .artwork__filename {
  font-size: 12px;
  margin: 0 0 8px;
  color: var(--color-text-base-60);
}

.form__field {
  margin: 0 0 24px;
}
.form__field label {
  display: block;
  margin-bottom: 8px;
}
.form__field .__fieldAction {
  margin-top: 8px !important;
  margin-bottom: 0 !important;
  text-align: right;
}
.form__field .__fieldAction a {
  text-decoration: none;
}
.form__field .__fieldAction a:hover {
  color: var(--color-fill-brand);
}
.form__field .__fieldInstruction {
  margin-top: 8px !important;
  margin-bottom: 0 !important;
}

/*
//comment textarea
.txtarea {
  max-height: 250px;
  line-height: 16px;
  height: 100%;
  //will-change: height;
  //transition: 0.3s all cubic-bezier(0.65,0.05,0.36,1) 0s;
}

.txtarea:focus {
  //max-height: 100px;
  line-height: 24px;
}



.inline__form__field {
  @include flexbox;
  @include flex-direction(row);
  //@include align-items(flex-start);
  @include align-items(stretch);
  @include justify-content(space-between);
  margin: 8px 0 16px 0;



  .form__field {
    margin-left: 16px;
    margin-right: 0;
    margin-bottom: 0;
    flex: 1 1 50%;
    margin-top: 0;
  }
  .form__field:first-child {
    margin-left: 0;
  }

  .form__field.--shrink {
    @include flex(0, 1, auto);
    @include flexbox;
    @include align-items(flex-end);

    span {
      line-height: 44px;
    }
  }

}

// on it's own (like coments)
.inline__form__field.--orphan {
  margin:0;
}


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

.form__field:last-child {
  margin-bottom: 0;
}

.form__field {
  margin: 0 0 24px;


  input {
    display: block;
  }

  p {

    margin: 8px 0 0 !important;
    //font-size: 12px;
    //line-height: 20px;
  }
}



.form__field label,
.inline__form__field label {
  display: block;
  font-weight: 400; //normal
  font-size: 14px;
  @include var(color, color-text-base-70);
  margin: 0 0 base8(1);

}

//info below component
.form__field .info {
  @include flexbox;
  @include flex-direction(row);
  @include justify-content(space-between);
  p {
    margin:0;
    font-size: 12px;
    color:#5C5C5C;
  }
}

//time input
.time {
  @include flexbox;
  @include flex-direction(row);
  //@include align-items(flex-start);
  @include align-items(stretch);
  @include justify-content(space-between);

  .input-field-joined {
    position: relative;
    @include flex(1, 1, auto);
    input {
      border-radius: 0;
      border-left: none;
      border-right: none;

    }
    label {
      color: #ccccd1;
      position: absolute;
      top:50%;
      transform: translateY(-50%);
      right: 16px;

      abbr {
        text-decoration: none;
        border: none;
      }
    }
  }

  .input-field-joined:first-child input,
  .input-field-joined:last-child input {
    border:1px solid;
    @include var(border-color, color-border-base);
  }

  .input-field-joined:first-child input {
      border-radius: $form-border-radius 0 0 $form-border-radius;
  }

  .input-field-joined:last-child input {
      border-radius: 0 $form-border-radius $form-border-radius 0;
  }

}

*/
@keyframes spin {
  0% {
    transform: rotateZ(0deg);
  }
  100% {
    transform: rotateZ(360deg);
  }
}
@keyframes circle-animation {
  0%, 25% {
    stroke-dashoffset: 280;
    transform: rotate(0);
  }
  50%, 75% {
    stroke-dashoffset: 75;
    transform: rotate(45deg);
  }
  100% {
    stroke-dashoffset: 280;
    transform: rotate(360deg);
  }
}
.loader,
.loader:after {
  border-radius: 50%;
  width: 60px;
  height: 60px;
}

.loader {
  position: relative;
  text-indent: -9999em;
  border-top: 1.1em solid;
  border-right: 1.1em solid;
  border-bottom: 1.1em solid;
  border-color: var(--color-fill-other-10);
  border-left: 1.1em solid;
  border-left-color: var(--color-fill-brand);
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-animation: load8 1.1s infinite linear;
  animation: load8 1.1s infinite linear;
}

@-webkit-keyframes load8 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes load8 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
/*This is a fade in example.*/
@keyframes fadeIn {
  0% {
    display: none;
    opacity: 0;
  }
  1% {
    display: block;
    opacity: 0;
  }
  100% {
    display: block;
    opacity: 1;
  }
}
/*This is a fade out example. */
@keyframes fadeOut {
  0% {
    display: block;
    opacity: 1;
  }
  1% {
    display: none;
    opacity: 1;
  }
  100% {
    display: none;
    opacity: 0;
  }
}
@keyframes bam {
  0% {
    opacity: 0;
    transform: scale(0);
  }
  76% {
    opacity: 1;
    transform: scale(1.1);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes up {
  0% {
    opacity: 0;
    transform: translateY(10px);
  }
  100% {
    opacity: 1;
    transform: translateY(0px);
  }
}
.user {
  color: var(--color-fill-brand-white);
  background-color: var(--color-fill-brand);
  display: inline-flex;
  -webkit-box-align: center;
  -moz-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
  -webkit-box-pack: center;
  -moz-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  height: 36px;
  width: 36px;
  border-radius: 100px;
  text-transform: uppercase;
  overflow: hidden;
}
.user p {
  margin: 0;
  font-style: normal;
}
.user em {
  font-style: normal;
}

.user.--outline {
  background-color: transparent;
  border: 2px solid;
  color: var(--color-fill-brand);
  border-color: var(--color-fill-brand);
  box-shadow: inset 0px 4px 11px rgba(0, 144, 188, 0.3);
}

.user.--thumb p {
  display: none;
}

.user.--s {
  height: 26px;
  width: 26px;
}
.user.--s p {
  font-size: 12px;
}

.ticket:hover {
  box-shadow: 0px 0px 5px 1px rgba(0, 144, 188, 0.68);
}

.ticket {
  cursor: pointer;
  background-color: var(--color-background-base);
  box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.03);
  border-radius: var(--border-radius);
  max-width: 400px;
  display: flex;
  flex-direction: column;
}
.ticket .padding {
  padding: 16px;
}
.ticket p {
  margin: 0;
}
.ticket .__header {
  padding-bottom: 0px;
  flex-wrap: wrap;
}
.ticket .__header .date {
  color: var(--color-text-base-70);
}
.ticket .__header .ref {
  flex: 1 0 100%;
}
.ticket .__content {
  padding: 8px 0;
}
.ticket .__content ul li.inactive {
  background-color: var(--color-background-body);
}
.ticket .__content ul li.inactive .item {
  opacity: 0.6;
}
.ticket .__content ul li {
  padding: 8px 16px;
}
.ticket .__content ul li .num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  margin-right: 16px;
  border-radius: 3px;
}
.ticket .__content ul li .num em {
  color: var(--color-text-base-60);
  font-style: normal;
  opacity: 0.7;
}
.ticket .__content ul li .num {
  background-color: var(--color-btn-secondary);
}
.ticket .__content ul li .item {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  margin-right: 16px;
}
.ticket .__content ul li .status {
  margin-left: auto;
}
.ticket .__footer {
  border-top: 1px solid;
  border-color: var(--color-border-base);
  color: var(--color-text-base-80);
}
.ticket .__footer .user {
  margin-right: 8px;
}

.ticket.--empty {
  box-shadow: none;
  background: transparent;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ticket.--empty .emptyIcon {
  color: var(--color-fill-other);
  background-color: var(--color-fill-other-10);
  width: 80px;
  height: 80px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--border-radius);
}
.ticket.--empty p {
  margin: 16px 0 24px;
}

.flex-row {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.flex-row.space-between {
  justify-content: space-between;
}

.status {
  color: var(--color-fill-other);
  background-color: var(--color-fill-other-10);
  display: flex;
  -webkit-box-align: center;
  -moz-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
  padding: 8px 24px;
  -webkit-box-pack: justify;
  -moz-box-pack: justify;
  -ms-flex-pack: justify;
  -webkit-justify-content: space-between;
  justify-content: space-between;
}
.status p {
  margin: 0;
  padding: 4px 0;
}
.status .btn.undo {
  width: auto;
  display: inline-flex;
  border: none;
}
.status .status__icon {
  background-color: var(--color-fill-other);
  border-radius: 100px;
  padding: 4px;
  margin: 0 8px 0 0;
  position: relative;
}
.status .status__icon svg {
  color: var(--color-fill-brand-white);
  height: 16px;
  width: 16px;
}
.status .status__icon:before {
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  transform: scale(0);
  border-radius: 100%;
}

.status.badge {
  display: inline-flex;
  -webkit-box-pack: center;
  -moz-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  border-radius: var(--border-radius);
  padding: 8px 16px;
}
.status.badge p {
  margin: 0;
  padding: 0;
  white-space: nowrap;
}

.status.--declined {
  color: var(--color-fill-declined);
  background-color: var(--color-fill-declined-10);
}
.status.--declined .status__icon, .status.--declined .undo.btn {
  background-color: var(--color-fill-declined);
}
.status.--declined .status__icon:before {
  background-color: var(--color-fill-declined-10);
}
.status.--declined .status__icon svg {
  display: none;
}
.status.--declined .status__icon .declined {
  display: block;
}

.status.--approved {
  color: var(--color-fill-approved);
  background-color: var(--color-fill-approved-10);
}
.status.--approved .status__icon, .status.--approved .undo.btn {
  background-color: var(--color-fill-approved);
}
.status.--approved .status__icon:before {
  background-color: var(--color-fill-approved-10);
}
.status.--approved .status__icon svg {
  display: none;
}
.status.--approved .status__icon .approved {
  display: block;
}

.status.--action {
  color: var(--color-fill-action);
  background-color: var(--color-fill-action-10);
}
.status.--action .status__icon {
  background-color: var(--color-fill-action);
}
.status.--action .status__icon svg {
  display: none;
}
.status.--action .status__icon .action {
  display: block;
}

.ticket__item:empty {
  width: 100%;
  height: 316px;
  width: 100%;
  background: linear-gradient(var(--color-background-body), var(--color-background-body)), linear-gradient(var(--color-background-body), var(--color-background-body)), linear-gradient(var(--color-btn-secondary), var(--color-btn-secondary)), linear-gradient(var(--color-btn-secondary), var(--color-btn-secondary)), linear-gradient(var(--color-btn-secondary), var(--color-btn-secondary)), linear-gradient(var(--color-btn-secondary), var(--color-btn-secondary)), linear-gradient(var(--color-btn-secondary), var(--color-btn-secondary)), linear-gradient(var(--color-btn-secondary), var(--color-btn-secondary)), linear-gradient(var(--color-btn-secondary), var(--color-btn-secondary)), linear-gradient(var(--color-background-body), var(--color-background-body));
  background-repeat: no-repeat;
  background-size: 100% 48px, 72% 24px, 40% 24px, 87px 24px, 87px 24px, 87px 24px, 87px 24px, 87px 24px, 87px 24px, calc(100% - 32px) 48px;
  background-position: 0 0, 16px 62px, 16px 94px, 16px 132px, calc(100% - 16px) 132px, 16px 164px, calc(100% - 16px) 164px, 16px 198px, calc(100% - 16px) 198px, 16px 248px;
}

/*
This is hack to deal around the non exisitance ability to CSS transition from
auto to 0 and visa versa.

Use Javascript to check the height and save as CSS var */
.ticket__item.is-open .expand {
  height: var(--calc-height);
}

/*
Ticket Status
We inherit the CSS from _status but we need some control.
By default we always show blue
*/
.ticket__item .__header {
  height: 48px;
  position: relative;
  overflow: hidden;
}
.ticket__item .__header .status {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 48px;
}
.ticket__item .__header .status p {
  margin: 0;
}
.ticket__item .__header .status.--declined, .ticket__item .__header .status.--approved, .ticket__item .__header .status.--action {
  visibility: hidden;
}

.ticket__item.--statusChanged {
  will-change: auto;
  transform: rotateZ(0);
}
.ticket__item.--statusChanged .__header .status .status__icon {
  opacity: 0;
  animation: 300ms ease-in-out forwards bam 300ms;
}
.ticket__item.--statusChanged .__header .status .status__icon:before {
  transition: 1.4s transform ease 450ms;
  transform: scale(163);
}
.ticket__item.--statusChanged .__header .status .status__icon svg {
  opacity: 0;
  transform: translateY(24px);
  animation: 300ms ease-in-out forwards up 450ms;
}
.ticket__item.--statusChanged .__header .status p {
  opacity: 0;
  transform: translateY(24px);
  animation: 300ms ease-in-out forwards up 500ms;
}
.ticket__item.--statusChanged .__header .status .btn {
  opacity: 0;
  transform: translateY(24px);
  animation: 300ms ease-in-out forwards up 700ms;
}

.ticket__item.--statusChanged .__action {
  transition: height 300ms ease 150ms;
  height: 0;
  border-top-width: 0;
}
.ticket__item.--statusChanged .__action .buttons {
  opacity: 0;
  transition: all 300ms ease 0ms;
}

.ticket__item.--action .__header .status.--default,
.ticket__item.--declined .__header .status.--default,
.ticket__item.--approved .__header .status.--default {
  visibility: hidden;
  opacity: 0;
}

.ticket__item.--action .__header .status.--action {
  visibility: visible;
  opacity: 1;
}

.ticket__item.--declined .__header .status.--declined {
  visibility: visible;
  opacity: 1;
}
.ticket__item.--declined .__header .status.--action {
  visibility: visible;
  transition: all 300ms ease 100ms;
  opacity: 0;
}

.ticket__item.--approved .__header .status.--approved {
  visibility: visible;
  opacity: 1;
}
.ticket__item.--approved .__header .status.--action {
  visibility: visible;
  transition: all 300ms ease 100ms;
  opacity: 0;
}

.ticket__item {
  background-color: var(--color-background-base);
  box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.03);
  border-radius: var(--border-radius);
  overflow: hidden;
  max-width: 532px;
  display: flex;
  flex-direction: column;
}
.ticket__item .btn {
  width: 100%;
}
.ticket__item p, .ticket__item h1, .ticket__item h2, .ticket__item h3, .ticket__item h4, .ticket__item h5, .ticket__item h6 {
  margin: 0;
}
.ticket__item .padding {
  padding-left: 24px;
  padding-right: 24px;
}
.ticket__item .item {
  margin-top: 16px;
  margin-bottom: 16px;
}
.ticket__item .item .h4, .ticket__item .item p, .ticket__item .item li {
  line-height: 24px;
}
.ticket__item .item ul {
  margin-top: 16px;
}
.ticket__item .item ul li {
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  margin-top: 8px;
}
.ticket__item .item ul li .tooltip {
  margin-left: 4px;
}
.ticket__item .item ul li span {
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-direction: normal;
  -webkit-box-orient: horizontal;
  -moz-box-direction: normal;
  -moz-box-orient: horizontal;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-box-align: center;
  -moz-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
}
.ticket__item .item ul li .price {
  margin-left: auto;
}
.ticket__item .item ul li .increase {
  color: var(--color-fill-approved);
}
.ticket__item .__control {
  margin-bottom: 16px;
}
.ticket__item .__action {
  position: relative;
  overflow: hidden;
  height: 149px;
}
.ticket__item .__action .buttons {
  -webkit-box-direction: normal;
  -webkit-box-orient: vertical;
  -moz-box-direction: normal;
  -moz-box-orient: vertical;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  margin-bottom: 16px;
}
.ticket__item .__action button {
  margin-top: 16px;
}
.ticket__item .__action, .ticket__item .item ul, .ticket__item .__content {
  border-top: 1px solid var(--color-border-base);
}
.ticket__item .expand {
  height: 0;
  transition: height 0.3s linear;
  overflow: hidden;
}
.ticket__item .__content {
  padding-top: 16px;
  padding-bottom: 16px;
}
.ticket__item .__content .grp.reestimate h6 {
  background-color: var(--color-fill-action-10);
}
.ticket__item .__content .grp.reestimate h6 span {
  background-color: var(--color-fill-action);
  border-radius: 100px;
  height: 16px;
  width: 16px;
  display: inline-flex;
  -webkit-box-align: center;
  -moz-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
  -webkit-box-pack: center;
  -moz-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  margin: 0 4px 0 0;
}
.ticket__item .__content .grp.reestimate h6 span svg {
  color: var(--color-fill-brand-white);
  height: 10px;
  width: 10px;
}
.ticket__item .__content .grp:last-child {
  margin-bottom: 0;
}
.ticket__item .__content .grp {
  margin-bottom: 8px;
}
.ticket__item .__content .grp h6 {
  background-color: var(--color-background-body);
  padding: 8px;
  border-radius: 5px;
}
.ticket__item .__content .grp .grp__content {
  padding: 8px 8px;
}
.ticket__item .__content .grp .grp__content .scroll {
  overflow: auto;
  max-height: 112px;
}
.ticket__item .__content .grp .grp__content .numeric {
  text-align: right;
}
.ticket__item .__content .grp table {
  margin: 16px 0 8px;
  width: 100%;
  border-spacing: 0;
}
.ticket__item .__content .grp table th {
  text-align: left;
  padding: 0 0 8px;
  border-bottom: 2px solid;
  border-color: var(--color-border-base);
}
.ticket__item .__content .grp table td {
  padding: 8px 0;
  border-bottom: 1px solid;
  border-color: var(--color-border-base);
}
.ticket__item .__content .grp table.reestimate {
  border-top: 1px solid;
  border-color: var(--color-border-base);
}
.ticket__item .__content .grp ul.timeline {
  position: relative;
  margin: 8px 0;
}
.ticket__item .__content .grp ul.timeline:before {
  content: "";
  position: absolute;
  left: 4px;
  top: 20px;
  bottom: 20px;
  width: 1px;
  background: #fff;
  border-left: 1px dashed;
  border-color: var(--color-border-base);
}
.ticket__item .__content .grp ul.timeline li:before,
.ticket__item .__content .grp ul.timeline li:after {
  content: "";
  position: absolute;
  top: 50%;
  top: calc(50% - 4px);
  left: 0;
  background-color: var(--color-border-base);
  height: 8px;
  width: 8px;
  border-radius: 100px;
}
.ticket__item .__content .grp ul.timeline li:before {
  background-color: var(--color-fill-brand-white);
}
.ticket__item .__content .grp ul.timeline li {
  position: relative;
  margin: 0 0 16px;
  padding-left: 16px;
}
.ticket__item .__content .grp ul.timeline li span {
  display: block;
}
.ticket__item .__content .grp ul.timeline li:last-child {
  margin-bottom: 0;
}

/*
Sub total
Modal
*/
.ticket__item.--subTotal {
  margin: 0;
  box-shadow: none;
}
.ticket__item.--subTotal .item ul {
  border: none;
  margin: 0 0 8px;
}
.ticket__item.--subTotal .item ul li {
  margin: 0;
}
.ticket__item.--subTotal .item p {
  margin: 0;
  line-height: 20px;
}

/*
Modal Tickets
To make it easier for Javascript we hide things that aren't needed from the ticket div
*/
.modal .ticket__item {
  margin-bottom: 16px;
  max-width: none;
  border: 1px solid var(--color-border-base);
}
.modal .ticket__item .__action, .modal .ticket__item .__control, .modal .ticket__item .__header button, .modal .ticket__item .item ul li, .modal .ticket__item .expand {
  display: none;
}
.modal .ticket__item.--approved .item ul li.estTotal, .modal .ticket__item.--approved .item ul li.estTotal span, .modal .ticket__item.--subTotal .item ul li.estTotal, .modal .ticket__item.--subTotal .item ul li.estTotal span {
  display: flex;
}
.modal .ticket__item.--approved .item ul li.estTotal, .modal .ticket__item.--approved .item ul li.estTotal span {
  font-size: 14px !important;
}
.modal .ticket__item.--declined .item ul {
  display: none;
}
.modal .ticket__item.--declined .item p {
  margin-bottom: 0;
}
.modal .ticket__item.--subTotal {
  margin-bottom: 0;
}

@media only screen and (min-width: 1024px) {
  .ticket__item {
    box-shadow: none;
    border: 1px solid var(--color-border-base);
  }
  .ticket__item .__action {
    height: 83px;
  }
  .ticket__item .__action .buttons {
    margin: 0 -8px;
    padding-top: 16px;
    padding-bottom: 16px;
    -webkit-box-direction: normal;
    -webkit-box-orient: horizontal;
    -moz-box-direction: normal;
    -moz-box-orient: horizontal;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
  }
  .ticket__item .__action button {
    margin: 0 8px;
  }
}
.fees {
  box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.03);
  border-radius: 10px;
  overflow: hidden;
  padding: 16px;
  margin: 0 0 16px;
  max-width: 532px;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  color: var(--color-text-base-90);
  background-color: var(--color-background-base);
}
.fees p {
  margin: 0 0 0 8px;
}

@media only screen and (min-width: 1024px) {
  .fees {
    box-shadow: none;
    background-color: transparent;
    border: 1px solid var(--color-border-base);
  }
}
.success {
  background-color: var(--color-fill-other-10);
  width: 56px;
  height: 56px;
  padding: 10px;
  border-radius: 100%;
  opacity: 0;
}
.success svg {
  width: 100%;
  height: auto;
  opacity: 0;
}
.success .icon {
  opacity: 0;
  width: 100%;
  height: 100%;
  background-color: var(--color-fill-brand);
  padding: 8px;
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -moz-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
  -webkit-box-pack: center;
  -moz-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  border-radius: 100%;
}

.success.animate {
  animation: 300ms ease-in-out forwards bam 100ms;
}
.success.animate .icon {
  animation: 300ms ease-in-out forwards bam 200ms;
}
.success.animate .icon svg {
  animation: 300ms ease-in-out forwards up 500ms;
}

.setting {
  max-width: 966px;
}
.setting .groupDetails .h4 {
  margin: 0 0 8px;
}
.setting .groupDetails p {
  margin: 0 0 32px;
}
.setting .groupFields .btn {
  width: 100%;
}

@media only screen and (min-width: 1024px) {
  .setting {
    display: flex;
    flex-direction: row;
  }
  .setting .groupDetails, .setting .groupFields {
    flex: 0 0 50%;
  }
  .setting .groupFields {
    padding-top: 8px;
  }
  .setting .groupFields .btn {
    width: auto;
  }
}
.notes.is-open {
  left: 0%;
  pointer-events: auto;
}
.notes.is-open .notesColumn {
  transform: translateX(0%);
}
.notes.is-open:after {
  opacity: 0.4;
}

.notes {
  pointer-events: none;
  display: flex;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 1000%;
  z-index: 1000;
  justify-content: flex-end;
}
.notes .notesColumn {
  transition: 300ms transform 100ms;
  transform: translateX(100%);
  width: 360px;
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  background-color: #fff;
}
.notes .notesColumn .notes__header {
  padding: 12px 32px;
  border-bottom: 1px solid;
  justify-content: space-between;
  border-bottom-color: var(--color-border-base);
}
.notes .notesColumn .notes__header .btn {
  border-radius: 5px;
  background-color: var(--color-border-base);
  padding: 8px;
}
.notes .notesColumn .notes__header .btn svg {
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
}
.notes .notesColumn .notes__content {
  flex: 1 1 auto;
  overflow-y: scroll;
  padding: 0 32px;
}
.notes .notesColumn .notes__content .note {
  border-bottom: 1px solid;
  padding: 24px 0;
  border-bottom-color: var(--color-border-base);
}
.notes .notesColumn .notes__content .note .note__header {
  justify-content: space-between;
}
.notes .notesColumn .notes__content .note .note__header .note__user .user {
  margin: 0 8px 0 0;
}
.notes .notesColumn .notes__content .note .note__header .note__user .__name {
  color: var(--color-text-heading);
  font-weight: 500;
}
.notes .notesColumn .notes__content .note:last-child {
  border: none;
}
.notes .notesColumn .note__leaveNote {
  border-top: 1px solid var(--color-border-base);
  padding: 24px 32px;
  margin-bottom: 0;
}
.notes .notesColumn .note__leaveNote form {
  margin: 0;
}
.notes .notesColumn .note__leaveNote .form__field {
  margin: 0 0 16px;
}
.notes:after {
  transition: 300ms opacity;
  background: #000;
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 0;
  z-index: 0;
}

.paginationWrapper {
  text-align: center;
  border-top: 1px solid var(--color-border-base);
  padding: 24px 0 24px;
}
.paginationWrapper ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: row;
  justify-content: center;
}
.paginationWrapper ul li {
  margin: 0 0.2em;
  display: none;
}
.paginationWrapper ul li.selected {
  display: inline-block;
}
.paginationWrapper ul li.selected em {
  font-style: normal;
}
.paginationWrapper ul li.button {
  display: inline-block;
}
.paginationWrapper ul li a, .paginationWrapper ul li span {
  border: 1px solid var(--color-border-base);
  border-radius: 0.25em;
  display: inline-block;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  padding: 0.6em 0.8em;
  font-size: 14px;
  text-decoration: none;
}
.paginationWrapper ul li.selected a {
  background-color: var(--color-fill-brand);
  border-color: var(--color-fill-brand);
  color: #fff;
  pointer-events: none;
}
.paginationWrapper ul li a:hover {
  color: #fff;
  background-color: var(--color-fill-brand);
}

@media only screen and (min-width: 768px) {
  .paginationWrapper ul li {
    margin: 0 0.2em;
    display: inline-block;
  }
  .paginationWrapper ul li.selected em {
    display: none;
  }
}
@media only screen and (min-width: 1024px) {
  .paginationWrapper {
    border-top: none;
  }
}
#menu {
  color: rgba(255, 255, 255, 0.8);
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  background-color: var(--color-background-menu);
}
#menu .menu__wrapper {
  padding: 24px;
  flex: 1 0 auto;
  flex: 0 1 100%;
  overflow: auto;
}
#menu .menu__branding {
  margin: 0 0 24px;
}
#menu .menu__branding .brand {
  width: 100%;
  height: auto;
  max-width: 130px;
}
#menu .menu__branding .brand .text {
  color: rgba(255, 255, 255, 0.9);
}
#menu .menu__acount {
  margin-top: 32px;
}
#menu .menu__grp h6 {
  margin: 0 0 16px;
  color: rgba(255, 255, 255, 0.6);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
#menu .menu__grp li {
  display: block;
  white-space: nowrap;
}
#menu .menu__grp li.active a {
  background-color: var(--color-background-menu-active);
  color: rgba(255, 255, 255, 0.9);
}
#menu .menu__grp li a:hover {
  color: rgba(255, 255, 255, 0.9);
}
#menu .menu__grp ul > li > ul > li a:hover {
  background-color: var(--color-background-menu-active);
}
#menu .menu__grp a {
  padding: 8px 16px;
  display: flex;
  justify-content: space-between;
  text-decoration: none;
  color: rgba(255, 255, 255, 0.7);
  border-radius: var(--border-radius);
}
#menu .menu__grp a span {
  margin: 0 0 0 8px;
  color: rgb(255, 255, 255);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 16px;
  padding: 0 6px;
  border-radius: 3px;
  background-color: var(--color-fill-declined);
}
#menu .menu__grp > ul > li {
  margin: 0 0 8px;
}
#menu .menu__grp > ul > li > ul {
  border-left: 2px solid;
  border-color: var(--color-background-menu-active);
  margin-top: 8px;
  margin-left: 16px;
  padding-left: 16px;
}
#menu .menu__grp > ul > li > ul > li {
  margin: 0 0 8px;
}
#menu .menu__user {
  background-color: var(--color-background-menu-active);
}
#menu .menu__user .menu__wrapper {
  padding: 16px 24px;
}
#menu .menu__user .user {
  flex: 0 0 auto;
}
#menu .menu__user .details {
  margin-left: 16px;
}
#menu .menu__user p {
  margin: 0;
}
#menu .menu__user .name {
  margin-bottom: 4px;
  color: rgba(255, 255, 255, 0.8);
}
#menu .menu__user .email {
  color: rgba(255, 255, 255, 0.7);
}

@media only screen and (min-width: 1024px) {
  #menu .menu__branding {
    margin: 0 0 48px;
  }
  #menu .menu__acount {
    margin-top: 80px;
  }
}
.overlay.is-active {
  visibility: visible;
  opacity: 1;
  transition: visibility 0s linear 0ms, 300ms opacity cubic-bezier(0.65, 0.05, 0.36, 1) 100ms;
}
.overlay.is-active .modal {
  transform: translateY(0%);
}
.overlay.is-active .mobileOnly {
  transform: translateY(0);
}

.overlay.is-loading .modal .modal__content .modal__loading {
  visibility: visible;
  display: flex;
}
.overlay.is-loading .modal .modal__footer {
  transition: visibility 400s linear 0ms, 300ms transform cubic-bezier(0.65, 0.05, 0.36, 1) 100ms;
  visibility: hidden;
  transform: translateY(100%);
}

.overlay {
  display: flex;
  align-items: flex-end;
  visibility: hidden;
  opacity: 0;
  will-change: opacity;
  transition: visibility 0s linear 400ms, 300ms opacity cubic-bezier(0.65, 0.05, 0.36, 1) 100ms;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  z-index: 111111;
  height: 100%;
  background-color: var(--colour-background-overlay);
}
.overlay .mobileOnly {
  position: absolute;
  top: 16px;
  left: 16px;
  transition: 300ms transform cubic-bezier(0.65, 0.05, 0.36, 1) 300ms;
  transform: translateY(-120%);
}
.overlay .modal {
  will-change: opacity, max-height;
  transform: translateY(100%);
  transition: 300ms transform cubic-bezier(0.65, 0.05, 0.36, 1) 100ms, 300ms height cubic-bezier(0.65, 0.05, 0.36, 1) 100ms;
  width: 100%;
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-direction: normal;
  -webkit-box-orient: vertical;
  -moz-box-direction: normal;
  -moz-box-orient: vertical;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  background-color: var(--color-background-base);
  border-radius: 10px 10px 0 0;
  max-height: calc(89vh - env(safe-area-inset-top));
  overflow: hidden;
}

.modal .modal__header,
.modal .modal__content,
.modal .modal__footer {
  width: 100%;
}
.modal .modal__header {
  background-color: var(--color-background-body);
  padding: 24px 24px 24px;
  border-radius: 10px 10px 0 0;
  position: relative;
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}
.modal .modal__header p {
  margin: 0;
  line-height: 24px;
}
.modal .modal__content {
  -webkit-box: 1;
  -moz-box: 1;
  -webkit-flex: 1 1 auto;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
  padding: 16px 24px;
  overflow: auto;
  position: relative;
  display: flex;
  flex-direction: column;
  /* Success message animates in message*/
}
.modal .modal__content .modal__msg, .modal .modal__content .modal__loading {
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-direction: normal;
  -webkit-box-orient: vertical;
  -moz-box-direction: normal;
  -moz-box-orient: vertical;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -moz-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
  -webkit-box-pack: center;
  -moz-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  text-align: center;
  padding: 16px 0;
}
.modal .modal__content .modal__loading {
  padding: 24px 0;
  display: none;
  visibility: hidden;
  height: 100%;
  overflow: hidden;
}
.modal .modal__content #declineReason textarea {
  will-change: max-height;
  max-height: 72px;
  height: 100%;
  transition: 0.3s max-height cubic-bezier(0.65, 0.05, 0.36, 1) 0s;
}
.modal .modal__content #declineReason textarea:focus {
  max-height: 150px;
}
.modal .modal__content p {
  margin: 0 0 16px;
}
.modal .modal__footer {
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  border-top: 1px solid;
  border-color: var(--color-border-base);
  padding: 16px 24px;
  border-radius: 0 0 5px 5px;
  transform: translateY(0);
}
.modal .modal__footer .btn.primary {
  margin-right: 0;
  margin-left: auto;
}
.modal .modal__footer .btn.secondary {
  display: none;
}

/* Animation inside the modal */
.modal .fadeOut {
  transition: all 300ms ease 150ms;
  visibility: hidden;
  height: 0;
  opacity: 0;
  transform: translateY(-10px);
}

.modal .fadeIn {
  transition: all 300ms ease 300ms;
  visibility: visible;
  height: auto;
  opacity: 1;
  transform: translateY(0px);
}

@media only screen and (min-width: 1024px) {
  .overlay {
    display: -webkit-box;
    display: -moz-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-direction: normal;
    -webkit-box-orient: vertical;
    -moz-box-direction: normal;
    -moz-box-orient: vertical;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
    -webkit-box-pack: center;
    -moz-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
  }
  .overlay .mobileOnly {
    display: none;
  }
  .overlay .modal {
    height: 90vh;
    max-height: 586px;
    max-width: 590px;
    width: 90vw;
    margin: 0;
    border-radius: 10px;
    align-items: center;
  }
  .overlay .modal .modal__footer .btn.secondary {
    display: flex;
  }
}
.panel {
  flex: 1 1 auto;
  padding: 0 40px;
  display: flex;
  flex-direction: column;
}
.panel .panelHeader {
  padding: 16px 0 56px;
}
.panel .panelHeader .panelControls {
  display: flex;
}
.panel .panelHeader .panelControls .btn {
  border: 1px solid var(--color-border-base);
}
.panel .panel__branding {
  display: flex;
  justify-content: center;
  padding: 56px 0 0px;
  margin: 0;
}
.panel .panel__content {
  flex: 1 0 auto;
  margin: auto 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.panel .panel__content a {
  text-decoration: underline;
  color: var(--color-fill-brand);
}
.panel .panel__content a:hover {
  text-decoration: none;
}
.panel .panel__content .h1, .panel .panel__content p {
  margin: 0;
}
.panel .panel__content .h1, .panel .panel__content p {
  margin: 0 0 8px;
}
.panel .panel__content .panel__forms {
  padding: 16px 0 0;
  margin: 0;
}
.panel .panel__content .panel__forms .btn {
  width: 100%;
}
.panel .panel__content .resetSuccess {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  flex: 1 0 auto;
  justify-content: center;
}
.panel .panel__content .resetSuccess .resetIcon {
  color: var(--color-fill-other);
  background-color: var(--color-fill-other-10);
  width: 80px;
  height: 80px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--border-radius);
}
.panel .panel__content .resetSuccess .h1 {
  margin: 24px 0 8px;
}
.panel .panel__content .footer {
  margin-top: auto;
  margin-bottom: 16px;
  text-align: center;
}

.panel__bg {
  display: none;
}

@media only screen and (min-width: 1024px) {
  .panel {
    flex: 0 0 480px;
    padding: 0 80px;
    position: relative;
  }
  .panel .panelHeader {
    padding: 16px 0 0;
    justify-content: flex-start;
  }
  .panel .panel__branding {
    padding: 0;
    justify-content: flex-start;
    transform: translateY(96px);
  }
  .panel .panel__content {
    justify-content: center;
  }
  .panel__bg {
    display: flex;
    flex: 1 0 auto;
    background-color: var(--color-background-menu);
  }
  .panel__bg picture {
    flex: 1 0 auto;
    position: relative;
  }
  .panel__bg picture:after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    background: radial-gradient(46.09% 46.09% at 56.15% 50%, rgba(19, 19, 19, 0.47) 0%, #070707 100%);
  }
  .panel__bg img {
    height: 100%;
    width: 100%;
    object-fit: cover;
  }
}
html, body {
  display: flex;
  flex-direction: row;
  overflow: hidden;
}

#app {
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-direction: normal;
  -webkit-box-orient: horizontal;
  -moz-box-direction: normal;
  -moz-box-orient: horizontal;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
  flex: 1 1 auto;
  overflow: hidden;
}
#app.menu-is-open aside .ticket__container {
  transform: translateX(0);
}
#app.search-is-open aside .ticketsPanel:after, #app.menu-is-open aside .ticketsPanel:after {
  visibility: visible;
  opacity: 1;
}
#app.detail-is-open main {
  transform: translateX(-100%);
}
#app .slide {
  will-change: transform;
  transition: 0.3s transform cubic-bezier(0.65, 0.05, 0.36, 1) 0s;
}
#app aside,
#app main {
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  overflow: hidden;
}
#app aside {
  flex: 0 0 100vw;
  -webkit-box-direction: normal;
  -webkit-box-orient: horizontal;
  -moz-box-direction: normal;
  -moz-box-orient: horizontal;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
}
#app aside .ticket__container {
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-direction: normal;
  -webkit-box-orient: horizontal;
  -moz-box-direction: normal;
  -moz-box-orient: horizontal;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
  transform: translateX(-254px);
}
#app aside .appMenu {
  flex: 0 0 254px;
  background: #eee;
  position: relative;
  z-index: 2;
  display: flex;
}
#app aside .ticketsPanel {
  flex: 0 0 100vw;
  width: 100vw;
  background-color: var(--color-background-body);
  position: relative;
  z-index: 1;
  display: flex;
}
#app aside .ticketsPanel:after {
  visibility: hidden;
  opacity: 0;
  will-change: opacity;
  transition: 300ms opacity ease 0s, 300ms visibility ease 0s;
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--colour-background-overlay);
}
#app main {
  flex: 0 0 100vw;
  background-color: var(--color-background-body);
}
#app main .mainAction {
  transform: translateY(110%);
  will-change: transform;
  transition: 0.3s transform cubic-bezier(0.65, 0.05, 0.36, 1) 800ms;
  z-index: 1000;
  box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.2);
  border-radius: 10px 10px 0 0;
  position: absolute;
  bottom: 0;
  left: 1px;
  right: 0;
  display: flex;
  width: 100%;
  padding: 16px;
  justify-content: center;
  background-color: var(--color-background-base);
}
#app main .mainAction .btn {
  width: 100%;
  max-width: 528px;
}

#app.confirmed-estimate .mainAction {
  transform: translateY(0%);
}

@media only screen and (min-width: 1024px) {
  #app,
  #app.menu-is-open,
  #app.search-is-open,
  #app.detail-is-open {
    overflow: visible;
  }
  #app .slide,
  #app.menu-is-open .slide,
  #app.search-is-open .slide,
  #app.detail-is-open .slide {
    will-change: none;
    transition: none;
  }
  #app aside,
  #app.menu-is-open aside,
  #app.search-is-open aside,
  #app.detail-is-open aside {
    flex: 0 0 60%;
    display: -webkit-box;
    display: -moz-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-direction: normal;
    -webkit-box-orient: horizontal;
    -moz-box-direction: normal;
    -moz-box-orient: horizontal;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    overflow: hidden;
    max-width: 702px;
  }
  #app aside .ticket__container,
  #app.menu-is-open aside .ticket__container,
  #app.search-is-open aside .ticket__container,
  #app.detail-is-open aside .ticket__container {
    transform: translateX(0px);
    flex: 1 1 auto;
    overflow: hidden;
  }
  #app aside .appMenu,
  #app.menu-is-open aside .appMenu,
  #app.search-is-open aside .appMenu,
  #app.detail-is-open aside .appMenu {
    flex: 0 0 254px;
  }
  #app aside .ticketsPanel,
  #app.menu-is-open aside .ticketsPanel,
  #app.search-is-open aside .ticketsPanel,
  #app.detail-is-open aside .ticketsPanel {
    flex: 0 1 100%;
    max-width: none;
    width: auto;
    overflow: hidden;
  }
  #app aside .ticketsPanel:after,
  #app.menu-is-open aside .ticketsPanel:after,
  #app.search-is-open aside .ticketsPanel:after,
  #app.detail-is-open aside .ticketsPanel:after {
    will-change: none;
    transition: none;
    opacity: 0;
    visibility: none;
  }
  #app aside.--fullwidth,
  #app.menu-is-open aside.--fullwidth,
  #app.search-is-open aside.--fullwidth,
  #app.detail-is-open aside.--fullwidth {
    flex: 0 0 100%;
    max-width: none;
  }
  #app main,
  #app.menu-is-open main,
  #app.search-is-open main,
  #app.detail-is-open main {
    flex: 1 1 auto;
    transform: translateX(0%);
    background-color: var(--color-background-base);
    position: relative;
  }
  #app main:after,
  #app.menu-is-open main:after,
  #app.search-is-open main:after,
  #app.detail-is-open main:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 1px;
    background-color: var(--color-border-base);
  }
  #app main .mainAction,
  #app.menu-is-open main .mainAction,
  #app.search-is-open main .mainAction,
  #app.detail-is-open main .mainAction {
    box-shadow: none;
    border-radius: 0;
    border-top: 1px solid var(--color-border-base);
  }
}
.search-is-open .panelHeader .panelSearch {
  z-index: 1;
  visibility: visible;
}

.panelHeader {
  margin: 0 0 16px;
  position: relative;
}
.panelHeader .panelGroupHeading {
  display: none;
}
.panelHeader .panelSearch {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  visibility: hidden;
}
.panelHeader .panelInfo {
  margin: 24px 0 0;
}
.panelHeader .panelInfo .jobTitle .panelHeading {
  margin: 0 0;
}
.panelHeader .panelInfo .jobTitle p {
  margin: 4px 0 0;
}
.panelHeader .panelInfo .jobTitle .internalRef {
  background-color: var(--color-btn-secondary);
  border-color: var(--color-border-base);
  color: var(--color-text-base-70);
  padding: 4px 6px;
  border-radius: 4px;
}
.panelHeader .panelInfo .jobTitle .panelHeading:empty {
  background: linear-gradient(var(--color-background-body), var(--color-background-body));
  display: block;
  height: 30px;
  width: 70%;
  max-width: 216px;
  border-radius: 10px;
  margin-bottom: 8px;
}
.panelHeader .panelInfo .jobActions {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  flex: 1 0 auto;
}
.panelHeader .panelInfo .jobActions > ul > li {
  margin-left: 8px;
}

@media only screen and (min-width: 1024px) {
  .panelHeader .panelControls {
    display: none;
  }
  .panelHeader .panelGroupHeading {
    display: block;
    margin: 8px 0 24px;
  }
  .panelHeader .panelSearch {
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    visibility: visible;
  }
}
#overview {
  padding: 16px;
  overflow: auto;
  width: 100%;
  display: flex;
  flex-direction: column;
}
#overview .ticket__list.--empty {
  justify-content: center;
}
#overview .ticket__list {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}
#overview .ticket__list .ticket {
  margin: 0 0 16px;
  max-width: none;
}
#overview .ticket__list .ticket:last-child {
  margin-bottom: 0;
}
#overview {
  /* settings Nav */
}
#overview .settingsNav {
  padding: 24px 0 16px;
  border-bottom: 1px solid var(--color-border-base);
}
#overview .settingsNav ul li {
  margin-right: 16px;
  line-height: 24px;
}
#overview .settingsNav ul li a {
  color: var(--color-text-base);
  text-decoration: none;
  border-radius: 4px;
  padding: 8px 16px;
  display: block;
}
#overview .settingsNav ul li.active a {
  background-color: var(--color-background-base);
}

@media only screen and (min-width: 1024px) {
  #overview {
    padding: 24px;
  }
  #overview .ticket__list.--empty {
    justify-content: flex-start;
  }
  #overview .ticket__list .ticket {
    margin: 0 0 24px;
  }
}
#detail {
  position: relative;
  flex: 1 0 auto;
  width: 100%;
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-direction: normal;
  -webkit-box-orient: vertical;
  -moz-box-direction: normal;
  -moz-box-orient: vertical;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: start;
  -moz-box-pack: start;
  -ms-flex-pack: start;
  -webkit-justify-content: flex-start;
  justify-content: flex-start;
  -webkit-box-align: center;
  -moz-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
  overflow: auto;
}
#detail .detailWrapper {
  position: relative;
  overflow: auto;
  flex: 1 0 100%;
  display: flex;
  width: 100%;
}
#detail .detailCard {
  display: none;
  flex-direction: column;
  visibility: hidden;
  position: absolute;
  top: 16px;
  left: 16px;
  right: 16px;
  max-width: 528px;
  z-index: 998;
  flex: 1 0 auto;
}
#detail .detailCard.is-active {
  visibility: visible;
  z-index: 999;
  display: flex;
}
#detail .jobs .ticket__item {
  margin-bottom: 24px;
  max-width: none;
}
#detail .jobs .fees {
  margin-bottom: 112px;
}

@media only screen and (min-width: 1024px) {
  #detail .detailCard {
    display: none;
    width: 90%;
    width: calc(100% - 32px);
    left: 50%;
    transform: translateX(-50%);
    -webkit-animation: fadeOut 300ms forwards linear;
    animation: fadeOut 300ms forwards linear;
  }
  #detail .detailCard.is-active {
    -webkit-animation: slideUpfromDown 300ms 1 linear;
    animation: slideUpfromDown 300ms 1 linear;
    visibility: visible;
  }
  #detail .detailCard.hide {
    display: none;
  }
}
html, body {
  background-color: var(--color-background-base);
}
/*# sourceMappingURL=style.v1.css.map */