/* Typography
-------------------------------------------------- */
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,600;0,700;0,800;1,300;1,400;1,600;1,700;1,800&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap");
/* Colours
-------------------------------------------------- */
/* Fonts
-------------------------------------------------- */
/* Breakpoints
-------------------------------------------------- */
/* Transitions
-------------------------------------------------- */
/* Mobile Layout 
------------------------------------------------- */
/* For CSS Files */
:root {
  --section-gap: 24pt;
  --screen-edge-margins: 16pt;
  --gutters: 16pt;
  --label-fields-gap: 8pt;
  --form-section-gap: 8pt;
  --touch-target: 48pt;
  --font-family-primary: 'Open Sans', sans-serif;
}

@media only screen and (max-width: 960px) {
  :root {
    --font-family-primary: 'Inter', sans-serif;
  }
}
h1 {
  font-size: 95px;
  font-weight: 300;
  letter-spacing: -1.5px;
  line-height: 120px;
  clear: both;
  display: block;
}
h1::before {
  display: block;
  content: "";
  margin-top: -18px;
}
h1::after {
  display: block;
  content: "";
  margin-bottom: -22px;
}

h2 {
  font-size: 59px;
  font-weight: 300;
  letter-spacing: -0.5px;
  line-height: 76px;
  clear: both;
  display: block;
}
h2::before {
  display: block;
  content: "";
  margin-top: -14px;
}
h2::after {
  display: block;
  content: "";
  margin-bottom: -14px;
}

h3 {
  font-size: 48px;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 64px;
  clear: both;
  display: block;
}
h3::before {
  display: block;
  content: "";
  margin-top: -10px;
}
@-moz-document url-prefix() {
  h3::before {
    margin-top: -11px;
  }
}
h3::after {
  display: block;
  content: "";
  margin-bottom: -14px;
}
@-moz-document url-prefix() {
  h3::after {
    margin-bottom: -13px;
  }
}

h4 {
  font-size: 34px;
  font-weight: 400;
  letter-spacing: 0.25px;
  line-height: 44px;
  clear: both;
  display: block;
}
h4::before {
  display: block;
  content: "";
  margin-top: -3px;
}
h4::after {
  display: block;
  content: "";
  margin-bottom: -9px;
}

h5 {
  font-size: 24px;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 32px;
  clear: both;
  display: block;
}
h5::before {
  display: block;
  content: "";
  margin-top: -1px;
}
@-moz-document url-prefix() {
  h5::before {
    margin-top: -2px;
  }
}
h5::after {
  display: block;
  content: "";
  margin-bottom: -7px;
}
@-moz-document url-prefix() {
  h5::after {
    margin-bottom: -6px;
  }
}

h6 {
  font-size: 20px;
  font-weight: 600;
  letter-spacing: 0.15px;
  line-height: 28px;
  clear: both;
  display: block;
}
h6::before {
  display: block;
  content: "";
  margin-top: -5px;
}
@-moz-document url-prefix() {
  h6::before {
    margin-top: -6px;
  }
}
h6::after {
  display: block;
  content: "";
  margin-bottom: -7px;
}
@-moz-document url-prefix() {
  h6::after {
    margin-bottom: -6px;
  }
}

.font-subtitle-1 {
  font-size: 16px;
  font-weight: 400;
  letter-spacing: 0.15px;
  line-height: 24px;
  clear: both;
  display: block;
}
.font-subtitle-1::before {
  display: block;
  content: "";
  margin-top: -2px;
}
.font-subtitle-1::after {
  display: block;
  content: "";
  margin-bottom: -6px;
}

.font-subtitle-2 {
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0.1px;
  line-height: 20px;
  clear: both;
  display: block;
}
.font-subtitle-2::before {
  display: block;
  content: "";
  height: 1px;
}
@-moz-document url-prefix() {
  .font-subtitle-2::before {
    height: 0;
  }
}
.font-subtitle-2::after {
  display: block;
  content: "";
  margin-bottom: -5px;
}
@-moz-document url-prefix() {
  .font-subtitle-2::after {
    margin-bottom: -4px;
  }
}

.font-body-1 {
  font-size: 16px;
  font-weight: 400;
  letter-spacing: 0.5px;
  line-height: 24px;
  clear: both;
  display: block;
}
.font-body-1::before {
  display: block;
  content: "";
  margin-top: -2px;
}
.font-body-1::after {
  display: block;
  content: "";
  margin-bottom: -6px;
}

.font-body-2 {
  font-size: 12pt;
  font-weight: 400;
  letter-spacing: 0.5px;
  line-height: 20px;
  clear: both;
  display: block;
}
.font-body-2::before {
  display: block;
  content: "";
  height: 1px;
}
@-moz-document url-prefix() {
  .font-body-2::before {
    height: 0;
  }
}
.font-body-2::after {
  display: block;
  content: "";
  margin-bottom: -5px;
}
@-moz-document url-prefix() {
  .font-body-2::after {
    margin-bottom: -4px;
  }
}

.font-button {
  font-size: 12pt;
  font-weight: 600;
  letter-spacing: 0.5px;
  line-height: 20pt;
  text-transform: uppercase;
  clear: both;
  display: block;
}
.font-button::before {
  display: block;
  content: "";
  height: 1px;
}
@-moz-document url-prefix() {
  .font-button::before {
    height: 0;
  }
}
.font-button::after {
  display: block;
  content: "";
  margin-bottom: -5px;
}
@-moz-document url-prefix() {
  .font-button::after {
    margin-bottom: -4px;
  }
}

.font-caption {
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.4px;
  line-height: 16px;
  clear: both;
  display: block;
}
.font-caption::before {
  display: block;
  content: "";
  height: 4px;
}
@-moz-document url-prefix() {
  .font-caption::before {
    height: 3px;
  }
}
.font-caption::after {
  display: block;
  content: "";
  margin-bottom: -4px;
}
@-moz-document url-prefix() {
  .font-caption::after {
    margin-bottom: -3px;
  }
}

.font-overline {
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 1.5px;
  line-height: 16px;
  text-transform: uppercase;
  clear: both;
  display: block;
}
.font-overline::before {
  display: block;
  content: "";
  height: 4px;
}
.font-overline::after {
  display: block;
  content: "";
  margin-bottom: -4px;
}

span.h1, span.h2, span.h3, span.h4, span.h5, span.h6, span.font-subtitle-1, span.font-subtitle-2, span.font-body-1, span.font-body-2, span.font-button, span.font-caption, span.font-overline {
  clear: none;
  display: inline-block;
}
span.h1::before, span.h1::after, span.h2::before, span.h2::after, span.h3::before, span.h3::after, span.h4::before, span.h4::after, span.h5::before, span.h5::after, span.h6::before, span.h6::after, span.font-subtitle-1::before, span.font-subtitle-1::after, span.font-subtitle-2::before, span.font-subtitle-2::after, span.font-body-1::before, span.font-body-1::after, span.font-body-2::before, span.font-body-2::after, span.font-button::before, span.font-button::after, span.font-caption::before, span.font-caption::after, span.font-overline::before, span.font-overline::after {
  height: 0;
}

/* Medium Paragraphs */
.p-med {
  font-size: 14pt;
  padding: 0 !important;
  font-weight: 400;
}

.p-sml {
  padding: 0 !important;
}

@media only screen and (max-width: 960px) {
  h1 {
    font-size: 28pt;
    margin-bottom: 0 !important;
  }
  h2 {
    font-size: 22pt;
    margin-bottom: 0 !important;
  }
  h3 {
    font-size: 20pt;
    margin-bottom: 0 !important;
  }
  h4 {
    font-size: 17pt;
    margin-bottom: 0 !important;
  }
  h5 {
    font-size: 15pt;
    margin-bottom: 0 !important;
  }
  h6 {
    font-size: 0.75rem;
    margin-bottom: 0 !important;
  }
  /* Medium Paragraphs */
  .p-med {
    font-size: 17pt;
    padding: 0 !important;
    font-weight: 400;
  }
}
@media only screen and (max-width: 576px) {
  h1 {
    font-size: 25pt;
  }
  h2 {
    font-size: 19pt;
  }
  h3 {
    font-size: 17pt;
  }
  h4 {
    font-size: 14pt;
  }
  h5 {
    font-size: 12pt;
  }
  h6 {
    font-size: 0.75rem;
  }
  /* Medium Paragraphs */
  .p-med {
    font-size: 14pt;
  }
  .p-sml {
    font-size: 12pt;
  }
}
/* Lib
-------------------------------------------------- */
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
/* Document
   ========================================================================== */
/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */
html {
  line-height: 1.15; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
}

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

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

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

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

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

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

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

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

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

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

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

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* Partials
-------------------------------------------------- */
/* Clearfix
-------------------------------------------------- */
/* General
-------------------------------------------------- */
html, html * {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -webkit-tap-highlight-color: transparent;
  -webkit-overflow-scrolling: touch;
}

html,
body {
  width: 100%;
  height: 100%;
  min-width: 320px;
}

body {
  color: #666666;
  font-family: "Open Sans", sans-serif;
  word-break: break-word;
  background: #f7f7f7;
  visibility: hidden;
  pointer-events: none;
}
@media (max-width: 767px) {
  body {
    background: #ffffff;
  }
}
body.details {
  background: #ffffff;
}
body.details main {
  max-width: 828px;
}
@media (max-width: 1048px) {
  body.details main {
    max-width: 764px;
  }
}
body.loaded {
  visibility: visible;
  pointer-events: all;
}
@media (max-width: 767px) {
  body.noScroll {
    overflow: hidden;
  }
}

a,
a:hover,
a:active,
a:visited {
  text-decoration: none;
}

*:focus {
  outline: none;
}

/* Layout
-------------------------------------------------- */
header,
main,
footer,
section {
  padding-left: 64px;
  padding-right: 64px;
}
@media (max-width: 1048px) {
  header,
  main,
  footer,
  section {
    padding-left: 32px;
    padding-right: 32px;
  }
}
@media (max-width: 767px) {
  header,
  main,
  footer,
  section {
    padding-left: 16px;
    padding-right: 16px;
  }
}
header > .inner,
main > .inner,
footer > .inner,
section > .inner {
  display: inline-block;
  width: 100%;
  max-width: 1424px;
}

/* Hide / show mobile
-------------------------------------------------- */
.desktop {
  display: block !important;
}

td.desktop {
  display: table-cell !important;
}

.mobile {
  display: none !important;
}

@media (max-width: 960px) {
  .desktop {
    display: none !important;
  }
  td.desktop {
    display: none !important;
  }
  .mobile {
    display: block !important;
  }
  .mobile.button {
    display: flex !important;
  }
}
/* Grid overlay
-------------------------------------------------- */
.grid {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background: url("../img/grid.png");
  pointer-events: none;
  z-index: 999;
}

/* Icons
-------------------------------------------------- */
@font-face {
  font-family: "Material Icons";
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/materialicons/v84/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2) format("woff2");
}
.icon:not(.button):not(.navButton) {
  font-family: "Material Icons";
  font-weight: normal;
  font-style: normal;
  font-size: 18px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: "liga";
  -webkit-font-smoothing: antialiased;
}
.icon:not(.button):not(.navButton).medium {
  font-size: 24px;
}
.icon:not(.button):not(.navButton).large {
  font-size: 36px;
}
.icon:not(.button):not(.navButton).extraLarge {
  font-size: 48px;
}

/* Loading (grey placeholder shimmering panels)
-------------------------------------------------- */
.ajax-loading:after, .gallery figure:after {
  content: "";
  display: table;
  clear: both;
}
.ajax-loading, .gallery figure {
  opacity: 0;
  transition: opacity 0.1s linear;
}
.ajax-loading.visible, .gallery figure {
  opacity: 1;
}
.ajax-loading div:not(.rippleContainer), .gallery figure div:not(.rippleContainer),
.ajax-loading span:not([itemprop=thumbnail]):not(.ripple),
.gallery figure span:not([itemprop=thumbnail]):not(.ripple),
.ajax-loading a,
.gallery figure a,
.ajax-loading h1,
.gallery figure h1,
.ajax-loading h2,
.gallery figure h2,
.ajax-loading h3,
.gallery figure h3,
.ajax-loading h4,
.gallery figure h4,
.ajax-loading h5,
.gallery figure h5,
.ajax-loading h6,
.gallery figure h6 {
  background-color: #d9d9d9;
  border-radius: 5px;
  animation: shimmer 1.5s infinite linear;
  background-image: linear-gradient(to right, #d9d9d9 0%, rgb(209.35, 209.35, 209.35) 20%, #d9d9d9 40%, #d9d9d9 100%);
  background-size: 2000px 100%;
}

@keyframes shimmer {
  0% {
    background-position: -2000px 0;
  }
  100% {
    background-position: 2000px 0;
  }
}
/* Empty (message when AJAX has loaded all results)
-------------------------------------------------- */
.ajax-empty {
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.1s linear;
}
.ajax-empty.visible, .gallery figure.ajax-empty {
  position: static;
  pointer-events: all;
  opacity: 1;
}

/* Shadows
-------------------------------------------------- */
.shadow-1 {
  transition: box-shadow 0.2s linear;
  box-shadow: 0px 3px 4.7px 0.3px rgba(0, 0, 0, 0.24), 0px 2px 5.88px 0.12px rgba(0, 0, 0, 0.16);
}

.shadow-2 {
  transition: box-shadow 0.2s linear;
  box-shadow: 0px 3px 4.7px 0.3px rgba(0, 0, 0, 0.24), 0px 1px 6.86px 0.14px rgba(0, 0, 0, 0.16);
}

.shadow-3 {
  transition: box-shadow 0.2s linear;
  box-shadow: 0px 5px 6.58px 0.42px rgba(0, 0, 0, 0.24), 0px 2px 9.8px 0.2px rgba(0, 0, 0, 0.16);
}

.shadow-4 {
  transition: box-shadow 0.2s linear;
  box-shadow: 0px 7px 9.4px 0.6px rgba(0, 0, 0, 0.24), 0px 3px 12.74px 0.26px rgba(0, 0, 0, 0.16);
}

.shadow-5 {
  transition: box-shadow 0.2s linear;
  box-shadow: 0px 10px 14.1px 0.9px rgba(0, 0, 0, 0.24), 0px 4px 19.6px 0.4px rgba(0, 0, 0, 0.16);
}

.shadow-6 {
  transition: box-shadow 0.2s linear;
  box-shadow: 0px 13px 18.8px 1.2px rgba(0, 0, 0, 0.24), 0px 5px 26.46px 0.54px rgba(0, 0, 0, 0.16);
}

.shadow-7 {
  transition: box-shadow 0.2s linear;
  box-shadow: 0px 18px 25.38px 1.62px rgba(0, 0, 0, 0.24), 0px 9px 35.28px 0.72px rgba(0, 0, 0, 0.16);
}

.shadow-8 {
  transition: box-shadow 0.2s linear;
  box-shadow: 0px 20px 28.2px 1.8px rgba(0, 0, 0, 0.24), 0px 8px 40.18px 0.82px rgba(0, 0, 0, 0.16);
}

.shadow-9 {
  transition: box-shadow 0.2s linear;
  box-shadow: 0px 28px 37.6px 2.4px rgba(0, 0, 0, 0.24), 0px 11px 51.94px 1.06px rgba(0, 0, 0, 0.16);
}

.shadow-10 {
  transition: box-shadow 0.2s linear;
  box-shadow: 0px 39px 56.4px 3.6px rgba(0, 0, 0, 0.24), 0px 15px 79.38px 1.62px rgba(0, 0, 0, 0.16);
}

/* Responsive columns
-------------------------------------------------- */
.row {
  display: flex;
  width: 100%;
  flex-wrap: wrap;
  justify-content: left;
  margin-bottom: -24px; /* Remove bottom row's margin */
}
.row.center {
  justify-content: center;
}
.row.right {
  justify-content: flex-end;
}
.row.space {
  justify-content: space-between;
}
.row .col {
  margin-right: 24px;
  margin-bottom: 24px;
}
.row.oneCol .col {
  width: 100%;
  margin-right: 0;
}
.row.twoCol .col {
  width: calc(50% - 24px / 2);
}
.row.twoCol .col:nth-child(2n) {
  margin-right: 0;
}
.row.threeCol .col {
  width: calc(33.33% - 24px * 2 / 3);
}
.row.threeCol .col:nth-child(3n) {
  margin-right: 0;
}
.row.fourCol .col {
  width: calc(25% - 24px * 3 / 4);
}
.row.fourCol .col:nth-child(4n) {
  margin-right: 0;
}
.row.fiveCol .col {
  width: calc(20% - 24px * 4 / 5);
}
.row.fiveCol .col:nth-child(5n) {
  margin-right: 0;
}
.row.sixCol .col {
  width: calc(16.66% - 24px * 5 / 6);
}
.row.sixCol .col:nth-child(6n) {
  margin-right: 0;
}
.row.flexCol {
  display: flex;
}
.row.flexCol .col {
  width: auto;
}
.row.flexCol .col.grow {
  flex: 1;
}
.row.flexCol .col:last-child {
  margin-right: 0;
}
@media (max-width: 1048px) and (min-width: 768px) {
  .row.fourCol .col {
    width: calc(50% - 24px / 2) !important;
    margin-right: 24px !important;
  }
  .row.fourCol .col:nth-child(2n) {
    margin-right: 0 !important;
  }
  .row.fiveCol .col, .row.sixCol .col {
    width: calc(33.33% - 24px * 2 / 3) !important;
    margin-right: 24px !important;
  }
  .row.fiveCol .col:nth-child(3n), .row.sixCol .col:nth-child(3n) {
    margin-right: 0 !important;
  }
}
@media (max-width: 767px) and (min-width: 415px) {
  .row.threeCol, .row.fourCol, .row.fiveCol, .row.sixCol, .row.flexCol {
    flex: 0;
  }
  .row.threeCol .col, .row.fourCol .col, .row.fiveCol .col, .row.sixCol .col, .row.flexCol .col {
    width: calc(50% - 24px / 2) !important;
    margin-right: 24px !important;
  }
  .row.threeCol .col:nth-child(2n), .row.fourCol .col:nth-child(2n), .row.fiveCol .col:nth-child(2n), .row.sixCol .col:nth-child(2n), .row.flexCol .col:nth-child(2n) {
    margin-right: 0 !important;
  }
}
@media (max-width: 414px) {
  .row.twoCol .col, .row.threeCol .col, .row.fourCol .col, .row.fiveCol .col, .row.sixCol .col, .row.flexCol .col {
    width: 100% !important;
    margin-right: 0 !important;
  }
  .row.minTwoCol .col {
    width: calc(50% - 24px / 2) !important;
    margin-right: 24px !important;
  }
  .row.minTwoCol .col:nth-child(2n) {
    margin-right: 0 !important;
  }
}

/* Ripples
-------------------------------------------------- */
.ripple {
  position: absolute;
  border-radius: 50%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  width: 0;
  height: 0;
  opacity: 0;
}

.rippleVisible .ripple {
  opacity: 1;
}

/* Panels
-------------------------------------------------- */
.panel {
  border: 1px solid #d9d9d9;
  background: #ffffff;
  border-radius: 5px;
  margin-bottom: 40px;
  transition: box-shadow 0.2s linear;
  box-shadow: 0px 3px 4.7px 0.3px rgba(0, 0, 0, 0.24), 0px 2px 5.88px 0.12px rgba(0, 0, 0, 0.16);
}
.panel:last-child {
  margin-bottom: 0;
}
.panel > .header {
  width: 100%;
  border-bottom: 1px solid #d9d9d9;
  display: flex;
  align-items: flex-start;
  padding-top: 6px;
  padding-bottom: 4px;
  padding-left: 15px;
  padding-right: 15px;
  height: -moz-fit-content;
  height: fit-content;
}
.panel > .header > .icon {
  font-size: 24px;
  color: #666666;
  margin-right: 12px;
  flex-shrink: 1;
  margin-top: 11px;
}
.panel > .header > h6 {
  flex-grow: 1;
  margin-top: 12px;
  padding-right: 12px;
}
.panel > .header > h6::before {
  margin-top: -3px;
}
.panel > .header > h6::after {
  margin-bottom: -1px;
}
.panel > .header .button {
  flex-shrink: 1;
  margin-right: 0;
}
.panel > .body {
  width: 100%;
  padding-top: 8px;
  padding-bottom: 7px;
}
@media (max-width: 767px) {
  .panel {
    border: 0;
  }
}
.panel > form {
  padding: 32px;
}
@media (max-width: 767px) {
  .panel > form {
    padding: 0;
  }
}

/* Components
-------------------------------------------------- */
.genericComponent.button {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  padding: 0;
  padding-top: 6px;
  padding-bottom: 6px;
  height: var(--touch-target);
  margin-right: 4px;
  line-height: 1.15;
  background: none; /* PR3222 JO - Need this to overwrite the standard Portal styles */
}
.genericComponent.button:last-child {
  margin-right: 0;
}
.genericComponent.button .inner {
  transition: background-color 0.1s linear, border-color 0.1s linear, color 0.1s linear, opacity 0.1s linear !important;
  border-radius: 5px;
  padding-top: 9px;
  padding-bottom: 9px;
  padding-left: 16px;
  padding-right: 16px;
  position: relative;
  overflow: hidden;
  opacity: 1;
  text-align: center;
}
.genericComponent.button .inner > :nth-child(2) {
  margin-left: 8px;
}
.genericComponent.button .inner .icon {
  position: relative;
  z-index: 1;
  vertical-align: top;
  margin-left: -4px;
  margin-right: -4px;
  opacity: 1;
  transition: opacity 0.1s linear;
}
.genericComponent.button .inner .label {
  position: relative;
  z-index: 1;
  font-size: 12pt;
  font-weight: 600;
  letter-spacing: 0.5px;
  line-height: 20pt;
  text-transform: uppercase;
  clear: both;
  display: block;
}
.genericComponent.button .inner .label::before {
  display: block;
  content: "";
  height: 1px;
}
@-moz-document url-prefix() {
  .genericComponent.button .inner .label::before {
    height: 0;
  }
}
.genericComponent.button .inner .label::after {
  display: block;
  content: "";
  margin-bottom: -5px;
}
@-moz-document url-prefix() {
  .genericComponent.button .inner .label::after {
    margin-bottom: -4px;
  }
}
.genericComponent.button .inner .label {
  clear: none;
  display: inline-block;
}
.genericComponent.button .inner .label::before, .genericComponent.button .inner .label::after {
  height: 0;
}
.genericComponent.button .inner .label {
  opacity: 1;
  transition: opacity 0.1s linear;
  margin-bottom: 0;
}
.genericComponent.button .inner .label::before {
  margin-top: -1px;
}
.genericComponent.button .inner .label::after {
  margin-bottom: -1px;
}
.genericComponent.button.primary .inner {
  background: #4068e1;
  color: #ffffff;
}
@media (hover: hover) and (pointer: fine) {
  .genericComponent.button.primary:hover .inner {
    background: #304ea9;
  }
}
.genericComponent.button.primary:focus .inner, .genericComponent.button.primary.open .inner {
  background: #273f87;
}
.genericComponent.button.primary .ripple {
  background: rgba(25, 40, 79, 0.6);
}
.genericComponent.button.primary.disabled {
  pointer-events: none;
}
.genericComponent.button.primary.disabled .inner {
  background: #eeeeee;
  color: #999999;
}
.genericComponent.button.secondary .inner {
  background: transparent;
  border: 1px solid #4068e1;
  color: #4068e1;
  padding-top: 8px;
  padding-bottom: 8px;
  padding-left: 15px;
  padding-right: 15px;
}
@media (hover: hover) and (pointer: fine) {
  .genericComponent.button.secondary:hover .inner {
    background: rgba(64, 104, 225, 0.2);
  }
}
.genericComponent.button.secondary:focus .inner {
  background: rgba(64, 104, 225, 0.4);
}
.genericComponent.button.secondary .ripple {
  background: rgba(64, 104, 225, 0.4);
}
.genericComponent.button.secondary.disabled {
  pointer-events: none;
}
.genericComponent.button.secondary.disabled .inner {
  border-color: #cccccc;
  color: #999999;
}
.genericComponent.button.secondary.loading::after {
  border-color: #4068e1;
  border-top-color: transparent;
}
.genericComponent.button.text .inner {
  display: flex;
  align-items: center;
  background: transparent;
  color: #4068e1;
  padding-left: 8px;
  padding-right: 8px;
}
.genericComponent.button.text .inner .icon {
  margin-left: 0;
}
@media (hover: hover) and (pointer: fine) {
  .genericComponent.button.text:hover .inner {
    background: rgba(64, 104, 225, 0.2);
  }
}
.genericComponent.button.text:focus .inner {
  background: rgba(64, 104, 225, 0.4);
}
.genericComponent.button.text .ripple {
  background: rgba(64, 104, 225, 0.4);
}
.genericComponent.button.text.disabled {
  pointer-events: none;
}
.genericComponent.button.text.disabled .inner {
  border-color: #cccccc;
  color: #999999;
}
.genericComponent.button.text.loading::after {
  border-color: #4068e1;
  border-top-color: transparent;
}
.genericComponent.button.positive .inner {
  background: #51bf9a;
  color: #ffffff;
}
@media (hover: hover) and (pointer: fine) {
  .genericComponent.button.positive:hover .inner {
    background: rgb(63.5428571429, 172.7571428571, 136.0214285714);
  }
}
.genericComponent.button.positive:focus .inner {
  background: rgb(59.4285714286, 161.5714285714, 127.2142857143);
}
.genericComponent.button.positive .ripple {
  background: rgb(52.5714285714, 142.9285714286, 112.5357142857);
}
.genericComponent.button.positive.disabled {
  pointer-events: none !important;
}
.genericComponent.button.positive.disabled .inner {
  background: transparent;
  color: #666666;
  transition: none;
  padding-right: 0;
  padding-left: 0;
}
.genericComponent.button.positive.disabled .inner .icon {
  color: #51bf9a;
  transition: none;
}
.genericComponent.button.positive.disabled .inner .label {
  transition: none;
}
.genericComponent.button.positive.disabled .inner .ripple {
  display: none;
}
.genericComponent.button.negative {
  pointer-events: none;
}
.genericComponent.button.negative .inner {
  background: #db6056;
  color: #ffffff;
}
@media (hover: hover) and (pointer: fine) {
  .genericComponent.button.negative:hover .inner {
    background: rgb(212.7307317073, 68.3107317073, 56.5692682927);
  }
}
.genericComponent.button.negative:focus .inner {
  background: rgb(209.3951219512, 56.9951219512, 44.6048780488);
}
.genericComponent.button.negative .ripple {
  background: rgb(188.3731707317, 51.2731707317, 40.1268292683);
}
.genericComponent.button.negative.disabled {
  pointer-events: none;
}
.genericComponent.button.negative.disabled .inner {
  background: #eeeeee;
  color: #999999;
}
.genericComponent.button.menu .inner {
  color: #666666;
  text-align: left;
}
.genericComponent.button.menu .inner .label {
  font-size: 12pt;
  font-weight: 400;
  letter-spacing: 0.5px;
  line-height: 20px;
  clear: both;
  display: block;
}
.genericComponent.button.menu .inner .label::before {
  display: block;
  content: "";
  height: 1px;
}
@-moz-document url-prefix() {
  .genericComponent.button.menu .inner .label::before {
    height: 0;
  }
}
.genericComponent.button.menu .inner .label::after {
  display: block;
  content: "";
  margin-bottom: -5px;
}
@-moz-document url-prefix() {
  .genericComponent.button.menu .inner .label::after {
    margin-bottom: -4px;
  }
}
.genericComponent.button.menu .inner .label {
  clear: none;
  display: inline-block;
}
.genericComponent.button.menu .inner .label::before, .genericComponent.button.menu .inner .label::after {
  height: 0;
}
.genericComponent.button.menu .inner .label {
  text-transform: none;
}
@media (hover: hover) and (pointer: fine) {
  .genericComponent.button.menu:hover .inner {
    background: #eeeeee;
    color: #444444;
  }
}
.genericComponent.button.menu:focus .inner {
  background: #cccccc;
  color: #444444;
}
.genericComponent.button.menu.disabled {
  pointer-events: none;
}
.genericComponent.button.menu.disabled .inner {
  color: #999999;
}
.genericComponent.button.menu .ripple {
  background: #d9d9d9;
}
.genericComponent.button.menu.current .inner {
  background: rgba(64, 104, 225, 0.2);
  color: #4068e1;
}
.genericComponent.button.menu.current .inner .label {
  font-weight: 600;
}
@media (hover: hover) and (pointer: fine) {
  .genericComponent.button.menu.current:hover .inner {
    background: rgba(64, 104, 225, 0.3);
  }
}
.genericComponent.button.menu.current:focus .inner {
  background: rgba(64, 104, 225, 0.4);
}
.genericComponent.button.menu.current .ripple {
  background: rgba(64, 104, 225, 0.4);
}
.genericComponent.button.attachment .inner {
  background: #eeeeee;
  color: #666666;
  border-radius: 18px;
  padding-left: 19px;
}
.genericComponent.button.attachment .inner .icon {
  font-size: 16px;
}
.genericComponent.button.attachment .inner .label {
  text-transform: none;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0.1px;
  line-height: 20px;
  clear: both;
  display: block;
}
.genericComponent.button.attachment .inner .label::before {
  display: block;
  content: "";
  height: 1px;
}
@-moz-document url-prefix() {
  .genericComponent.button.attachment .inner .label::before {
    height: 0;
  }
}
.genericComponent.button.attachment .inner .label::after {
  display: block;
  content: "";
  margin-bottom: -5px;
}
@-moz-document url-prefix() {
  .genericComponent.button.attachment .inner .label::after {
    margin-bottom: -4px;
  }
}
.genericComponent.button.attachment .inner .label {
  display: inline-block;
}
.genericComponent.button.attachment .inner .label::before {
  margin-top: -3px;
}
.genericComponent.button.attachment .inner .label::after {
  margin-bottom: 0;
}
@media (hover: hover) and (pointer: fine) {
  .genericComponent.button.attachment:hover .inner {
    background: #d9d9d9;
  }
  .genericComponent.button.attachment:hover .inner .label {
    color: #444444;
  }
}
.genericComponent.button.attachment:focus .inner {
  background: #cccccc;
}
.genericComponent.button.attachment:focus .inner .label {
  color: #444444;
}
.genericComponent.button.attachment .ripple {
  background: rgba(170, 170, 170, 0.4);
}
.genericComponent.button.attachment {
  margin-right: 4px !important;
}
.genericComponent.button.attachment:last-child {
  margin-right: 0;
}
.genericComponent.button::after {
  content: "";
  opacity: 0;
  position: absolute;
  transition: opacity 0.1s 0.1s linear;
}
.genericComponent.button.loading {
  position: relative;
  opacity: 0.5;
  pointer-events: none !important;
}
.genericComponent.button.loading .icon,
.genericComponent.button.loading .label {
  opacity: 0;
}
.genericComponent.button.loading::after {
  box-sizing: border-box;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 20px;
  margin-top: -10px;
  margin-left: -10px;
  border-radius: 50%;
  border: 3px solid #ffffff;
  border-top-color: transparent;
  animation: spinner 0.6s linear infinite;
  opacity: 1;
}
@keyframes spinner {
  to {
    transform: rotate(360deg);
  }
}
.genericComponent.button.b-xsml {
  height: 25px;
  padding: 0;
}
.genericComponent.button.b-xsml .inner {
  height: 25px;
  padding-top: 3px;
  padding-bottom: 3px;
}
.genericComponent.button.b-xsml .inner .label {
  height: 15px;
  font-size: 10px !important;
}
.genericComponent.button.default-text-transform .label {
  text-transform: initial;
}

.genericComponent.circleButton {
  display: block;
  float: left;
  position: relative;
}
.genericComponent.circleButton * {
  box-sizing: border-box;
}
.genericComponent.circleButton .inner {
  position: relative;
  overflow: hidden;
  height: 48px;
  padding-top: 12px;
  padding-bottom: 12px;
  padding-left: 12px;
  padding-right: 12px;
  border-radius: 50%;
  transition: background-color 0.1s linear, border-color 0.1s linear, color 0.1s linear;
}
.genericComponent.circleButton .inner .label,
.genericComponent.circleButton .inner .icon {
  position: relative;
  z-index: 1;
  transition: color 0.1s linear;
}
.genericComponent.circleButton .inner .icon {
  font-size: 24px;
}
.genericComponent.circleButton.primary .inner {
  background: #4068e1;
  color: #ffffff;
}
.genericComponent.circleButton.primary .inner .icon {
  color: #dfe5ef;
}
@media (hover: hover) and (pointer: fine) {
  .genericComponent.circleButton.primary:hover .inner {
    background: #304ea9;
  }
  .genericComponent.circleButton.primary:hover .inner .icon {
    color: #ffffff;
  }
}
.genericComponent.circleButton.primary:focus .inner, .genericComponent.circleButton.primary.open .inner {
  background: #273f87;
}
.genericComponent.circleButton.primary:focus .inner .icon, .genericComponent.circleButton.primary.open .inner .icon {
  color: #ffffff;
}
.genericComponent.circleButton.primary.disabled {
  pointer-events: none;
}
.genericComponent.circleButton.primary.disabled .inner {
  background: #eeeeee;
  color: #999999;
}
.genericComponent.circleButton.primary.disabled .inner .icon {
  color: #999999;
}
.genericComponent.circleButton.primary .ripple {
  background: #273f87;
}
.genericComponent.circleButton.secondary .inner {
  background: #ffffff;
}
.genericComponent.circleButton.secondary .inner .icon {
  color: #999999;
}
@media (hover: hover) and (pointer: fine) {
  .genericComponent.circleButton.secondary:hover .inner {
    background: #eeeeee;
  }
}
.genericComponent.circleButton.secondary:focus .inner, .genericComponent.circleButton.secondary.open .inner {
  background: #cccccc;
}
.genericComponent.circleButton.secondary:focus .inner .icon, .genericComponent.circleButton.secondary.open .inner .icon {
  color: #666666;
}
.genericComponent.circleButton.secondary.disabled {
  pointer-events: none;
  color: #cccccc;
}
.genericComponent.circleButton.secondary.disabled .inner .icon {
  color: #cccccc;
}
.genericComponent.circleButton.secondary .ripple {
  background: #cccccc;
}
.genericComponent.circleButton.overlay .inner {
  background: transparent;
}
.genericComponent.circleButton.overlay .inner .icon {
  color: #eeeeee;
}
@media (hover: hover) and (pointer: fine) {
  .genericComponent.circleButton.overlay:hover .inner {
    background: rgba(255, 255, 255, 0.2);
  }
  .genericComponent.circleButton.overlay:hover .inner .icon {
    color: #ffffff;
  }
}
.genericComponent.circleButton.overlay:focus .inner, .genericComponent.circleButton.overlay.open .inner {
  background: rgba(255, 255, 255, 0.4);
}
.genericComponent.circleButton.overlay:focus .inner .icon, .genericComponent.circleButton.overlay.open .inner .icon {
  color: #ffffff;
}
.genericComponent.circleButton.overlay .ripple {
  background: rgba(255, 255, 255, 0.2);
}
.genericComponent.circleButton .badge {
  position: absolute;
  top: 4px;
  right: 4px;
  border-radius: 50%;
  z-index: 2;
  background: #db6056;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.4px;
  line-height: 16px;
  clear: both;
  display: block;
}
.genericComponent.circleButton .badge::before {
  display: block;
  content: "";
  height: 4px;
}
@-moz-document url-prefix() {
  .genericComponent.circleButton .badge::before {
    height: 3px;
  }
}
.genericComponent.circleButton .badge::after {
  display: block;
  content: "";
  margin-bottom: -4px;
}
@-moz-document url-prefix() {
  .genericComponent.circleButton .badge::after {
    margin-bottom: -3px;
  }
}
.genericComponent.circleButton .badge {
  color: #ffffff;
  text-align: center;
  width: 19px;
  height: 19px;
  line-height: 19px;
}
.genericComponent.circleButton .badge::after, .genericComponent.circleButton .badge::before {
  content: none;
}

.genericComponent.dropdownMenu {
  z-index: 9;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.1s ease !important;
  transition: box-shadow 0.2s linear;
  box-shadow: 0px 3px 4.7px 0.3px rgba(0, 0, 0, 0.24), 0px 2px 5.88px 0.12px rgba(0, 0, 0, 0.16);
  border-radius: 5px;
}
.genericComponent.dropdownMenu.visible, .gallery figure.genericComponent.dropdownMenu {
  opacity: 1;
  pointer-events: all;
}
.genericComponent.dropdownMenu .arrow,
.genericComponent.dropdownMenu .arrow::before {
  position: absolute;
  width: 12px;
  height: 12px;
  z-index: 1;
}
.genericComponent.dropdownMenu .arrow::before {
  content: "";
  transform: rotate(45deg);
  background: #ffffff;
  transition: box-shadow 0.2s linear;
  box-shadow: 0px 3px 4.7px 0.3px rgba(0, 0, 0, 0.24), 0px 2px 5.88px 0.12px rgba(0, 0, 0, 0.16);
}
.genericComponent.dropdownMenu[data-popper-placement^=top] > .arrow {
  bottom: -5px;
}
.genericComponent.dropdownMenu[data-popper-placement^=bottom] > .arrow {
  top: -5px;
}
.genericComponent.dropdownMenu[data-popper-placement^=left] > .arrow {
  right: -5px;
}
.genericComponent.dropdownMenu[data-popper-placement^=right] > .arrow {
  left: -5px;
}
.genericComponent.dropdownMenu > .inner {
  float: left;
  position: relative;
  background: #ffffff;
  border-radius: 5px;
  z-index: 2;
  padding-top: 8px;
  padding-bottom: 8px;
}
.genericComponent.dropdownMenu > .inner .button.menu {
  display: block;
  width: 100%;
  height: 48px;
  padding: 0;
  margin: 0;
}
.genericComponent.dropdownMenu > .inner .button.menu > .inner {
  height: 100%;
  padding-top: 15px;
  padding-bottom: 15px;
  padding-left: 16px;
  padding-right: 16px;
  border-radius: 0;
}
.genericComponent.dropdownMenu > .inner .button.menu > .inner > .icon {
  margin-right: 12px;
}
.genericComponent.dropdownMenu > .inner .button.menu > .inner > .label {
  margin-left: 0;
}

.multi-select-container * {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.multi-select-container .wrapper {
  max-width: 960px;
  margin: 0 auto;
  padding: 10px;
}
.multi-select-container .subHeader {
  margin: 10px;
}
.multi-select-container .inner-container {
  display: flex;
  position: relative;
  width: 100%;
}
.multi-select-container .button {
  width: 175px;
}
.multi-select-container .icon {
  margin: 1px 0 0 4px !important;
}
.multi-select-container .multi-select {
  position: absolute;
  z-index: 10;
  left: 200px;
  height: 36px;
  display: flex;
  flex-wrap: wrap;
  background-color: #ffffff;
  transition: box-shadow 0.2s linear;
  box-shadow: 0px 3px 4.7px 0.3px rgba(0, 0, 0, 0.24), 0px 1px 6.86px 0.14px rgba(0, 0, 0, 0.16);
  border-radius: 5px;
  overflow: hidden;
  transition: height 0.2s linear;
  margin-top: 15px;
  padding: 2px;
}
.multi-select-container .selectedDisplay {
  display: flex;
  align-items: center;
  height: 34px;
  width: 100%;
  text-align: left;
  font-size: 13px;
  font-weight: bold;
}
.multi-select-container .option {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 48px;
  width: 50%;
  border-radius: 2px;
  transition: background-color 0.1s linear;
  cursor: pointer;
  padding: 5px;
}
.multi-select-container label {
  display: flex;
  align-items: center;
  height: 100%;
  width: 100%;
}
.multi-select-container .option:hover {
  background-color: #4068e1;
  color: white;
}
.multi-select-container .multi-select .option:hover {
  background-color: #4068e1;
  color: white;
}
.multi-select-container .multi-select p {
  padding: 5px 15px !important;
}
.multi-select-container .tick-all-link {
  width: 80px;
  text-align: right;
  margin-right: 8px;
}
.multi-select-container .top-row {
  display: flex;
  justify-content: space-between;
  width: 100%;
}
@media (max-width: 414px) {
  .multi-select-container .inner-container {
    flex-direction: column;
  }
}
@media (max-width: 640px) {
  .multi-select-container .subHeader {
    text-align: center;
  }
  .multi-select-container .inner-container {
    flex-direction: column;
    align-items: center;
    height: 100px;
  }
  .multi-select-container .button {
    width: 250px;
  }
  .multi-select-container .multi-select {
    left: 0;
    top: 25px;
    width: 100%;
  }
  .multi-select-container .option {
    width: 100%;
  }
}

.genericComponent.tooltip {
  background: #000000;
  color: #ffffff;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.4px;
  line-height: 16px;
  clear: both;
  display: block;
}
.genericComponent.tooltip::before {
  display: block;
  content: "";
  height: 4px;
}
@-moz-document url-prefix() {
  .genericComponent.tooltip::before {
    height: 3px;
  }
}
.genericComponent.tooltip::after {
  display: block;
  content: "";
  margin-bottom: -4px;
}
@-moz-document url-prefix() {
  .genericComponent.tooltip::after {
    margin-bottom: -3px;
  }
}
.genericComponent.tooltip {
  border-radius: 5px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.1s linear;
  max-width: 200px;
  padding-left: 12px;
  padding-right: 12px;
  padding-top: 7px;
  padding-bottom: 9px;
  z-index: 11;
}
.genericComponent.tooltip::before, .genericComponent.tooltip::after {
  content: none;
}
.genericComponent.tooltip.visible, .gallery figure.genericComponent.tooltip {
  opacity: 1;
}

.genericComponent.snackbar:after {
  content: "";
  display: table;
  clear: both;
}
.genericComponent.snackbar {
  z-index: 13;
  opacity: 0;
  text-align: center;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 8px;
  width: 100vw;
  box-sizing: border-box;
  min-width: 320px;
  padding-left: 32px;
  padding-right: 32px;
  pointer-events: none;
  transition: opacity 0.2s ease, bottom 0.2s ease;
}
.genericComponent.snackbar.visible, .gallery figure.genericComponent.snackbar {
  opacity: 1;
  bottom: 32px;
}
.genericComponent.snackbar.visible > .inner, .gallery figure.genericComponent.snackbar > .inner {
  pointer-events: all;
}
.genericComponent.snackbar > .inner {
  text-align: left;
  display: inline-block;
  max-width: 100%;
  min-width: 344px;
  padding-right: 8px;
  padding-left: 16px;
  color: #ffffff;
  border-radius: 5px;
  transition: box-shadow 0.2s linear;
  box-shadow: 0px 3px 4.7px 0.3px rgba(0, 0, 0, 0.24), 0px 2px 5.88px 0.12px rgba(0, 0, 0, 0.16);
  background-color: #444444;
}
.genericComponent.snackbar > .inner > .label {
  float: left;
  font-size: 12pt;
  font-weight: 400;
  letter-spacing: 0.5px;
  line-height: 20px;
  clear: both;
  display: block;
}
.genericComponent.snackbar > .inner > .label::before {
  display: block;
  content: "";
  height: 1px;
}
@-moz-document url-prefix() {
  .genericComponent.snackbar > .inner > .label::before {
    height: 0;
  }
}
.genericComponent.snackbar > .inner > .label::after {
  display: block;
  content: "";
  margin-bottom: -5px;
}
@-moz-document url-prefix() {
  .genericComponent.snackbar > .inner > .label::after {
    margin-bottom: -4px;
  }
}
.genericComponent.snackbar > .inner > .label {
  clear: none;
  display: inline-block;
}
.genericComponent.snackbar > .inner > .label::before, .genericComponent.snackbar > .inner > .label::after {
  height: 0;
}
.genericComponent.snackbar > .inner > .label {
  margin-right: 16px;
  padding-top: calc(var(--touch-target) / 3);
}
.genericComponent.snackbar > .inner .genericComponent.button {
  margin-right: 0;
  float: right;
}
.genericComponent.snackbar > .inner .genericComponent.button .label {
  color: #83a2f2;
}
@media (max-width: 767px) {
  .genericComponent.snackbar {
    padding-left: 16px;
    padding-right: 16px;
    bottom: -8px;
  }
  .genericComponent.snackbar.visible, .gallery figure.genericComponent.snackbar {
    bottom: 16px;
  }
}
@media (max-width: 414px) {
  .genericComponent.snackbar {
    padding-left: 8px;
    padding-right: 8px;
  }
  .genericComponent.snackbar.visible, .gallery figure.genericComponent.snackbar {
    bottom: 8px;
  }
  .genericComponent.snackbar > .inner {
    min-width: 0;
  }
}

table.dataTable {
  width: 100%;
  margin: 0 auto;
  clear: both;
  border-collapse: separate;
  border-spacing: 0;
}

table.dataTable thead th, table.dataTable tfoot th {
  font-weight: bold;
}

table.dataTable thead th, table.dataTable thead td {
  padding: 10px 18px;
  border-bottom: 1px solid #111;
}

table.dataTable thead th:active, table.dataTable thead td:active {
  outline: none;
}

table.dataTable tfoot th, table.dataTable tfoot td {
  padding: 10px 18px 6px 18px;
  border-top: 1px solid #111;
}

table.dataTable thead .sorting, table.dataTable thead .sorting_asc, table.dataTable thead .sorting_desc, table.dataTable thead .sorting_asc_disabled, table.dataTable thead .sorting_desc_disabled {
  cursor: pointer;
  *cursor: hand;
  background-repeat: no-repeat;
  background-position: center right;
}

table.dataTable thead .sorting {
  background-image: url("../images/sort_both.png");
}

table.dataTable thead .sorting_asc {
  background-image: url("../images/sort_asc.png") !important;
}

table.dataTable thead .sorting_desc {
  background-image: url("../images/sort_desc.png") !important;
}

table.dataTable thead .sorting_asc_disabled {
  background-image: url("../images/sort_asc_disabled.png");
}

table.dataTable thead .sorting_desc_disabled {
  background-image: url("../images/sort_desc_disabled.png");
}

table.dataTable tbody tr {
  background-color: #fff;
}

table.dataTable tbody tr.selected {
  background-color: #b0bed9;
}

table.dataTable tbody th, table.dataTable tbody td {
  padding: 8px 10px;
}

table.dataTable.row-border tbody th, table.dataTable.row-border tbody td, table.dataTable.display tbody th, table.dataTable.display tbody td {
  border-top: 1px solid #ddd;
}

table.dataTable.row-border tbody tr:first-child th, table.dataTable.row-border tbody tr:first-child td, table.dataTable.display tbody tr:first-child th, table.dataTable.display tbody tr:first-child td {
  border-top: none;
}

table.dataTable.cell-border tbody th, table.dataTable.cell-border tbody td {
  border-top: 1px solid #ddd;
  border-right: 1px solid #ddd;
}

table.dataTable.cell-border tbody tr th:first-child, table.dataTable.cell-border tbody tr td:first-child {
  border-left: 1px solid #ddd;
}

table.dataTable.cell-border tbody tr:first-child th, table.dataTable.cell-border tbody tr:first-child td {
  border-top: none;
}

table.dataTable.stripe tbody tr.odd, table.dataTable.display tbody tr.odd {
  background-color: #f9f9f9;
}

table.dataTable.stripe tbody tr.odd.selected, table.dataTable.display tbody tr.odd.selected {
  background-color: #acbad4;
}

table.dataTable.hover tbody tr:hover, table.dataTable.display tbody tr:hover {
  background-color: #f6f6f6;
}

table.dataTable.hover tbody tr:hover.selected, table.dataTable.display tbody tr:hover.selected {
  background-color: #aab7d1;
}

table.dataTable.order-column tbody tr > .sorting_1, table.dataTable.order-column tbody tr > .sorting_2, table.dataTable.order-column tbody tr > .sorting_3, table.dataTable.display tbody tr > .sorting_1, table.dataTable.display tbody tr > .sorting_2, table.dataTable.display tbody tr > .sorting_3 {
  background-color: #fafafa;
}

table.dataTable.order-column tbody tr.selected > .sorting_1, table.dataTable.order-column tbody tr.selected > .sorting_2, table.dataTable.order-column tbody tr.selected > .sorting_3, table.dataTable.display tbody tr.selected > .sorting_1, table.dataTable.display tbody tr.selected > .sorting_2, table.dataTable.display tbody tr.selected > .sorting_3 {
  background-color: #acbad5;
}

table.dataTable.display tbody tr.odd > .sorting_1, table.dataTable.order-column.stripe tbody tr.odd > .sorting_1 {
  background-color: #f1f1f1;
}

table.dataTable.display tbody tr.odd > .sorting_2, table.dataTable.order-column.stripe tbody tr.odd > .sorting_2 {
  background-color: #f3f3f3;
}

table.dataTable.display tbody tr.odd > .sorting_3, table.dataTable.order-column.stripe tbody tr.odd > .sorting_3 {
  background-color: whitesmoke;
}

table.dataTable.display tbody tr.odd.selected > .sorting_1, table.dataTable.order-column.stripe tbody tr.odd.selected > .sorting_1 {
  background-color: #a6b4cd;
}

table.dataTable.display tbody tr.odd.selected > .sorting_2, table.dataTable.order-column.stripe tbody tr.odd.selected > .sorting_2 {
  background-color: #a8b5cf;
}

table.dataTable.display tbody tr.odd.selected > .sorting_3, table.dataTable.order-column.stripe tbody tr.odd.selected > .sorting_3 {
  background-color: #a9b7d1;
}

table.dataTable.display tbody tr.even > .sorting_1, table.dataTable.order-column.stripe tbody tr.even > .sorting_1 {
  background-color: #fafafa;
}

table.dataTable.display tbody tr.even > .sorting_2, table.dataTable.order-column.stripe tbody tr.even > .sorting_2 {
  background-color: #fcfcfc;
}

table.dataTable.display tbody tr.even > .sorting_3, table.dataTable.order-column.stripe tbody tr.even > .sorting_3 {
  background-color: #fefefe;
}

table.dataTable.display tbody tr.even.selected > .sorting_1, table.dataTable.order-column.stripe tbody tr.even.selected > .sorting_1 {
  background-color: #acbad5;
}

table.dataTable.display tbody tr.even.selected > .sorting_2, table.dataTable.order-column.stripe tbody tr.even.selected > .sorting_2 {
  background-color: #aebcd6;
}

table.dataTable.display tbody tr.even.selected > .sorting_3, table.dataTable.order-column.stripe tbody tr.even.selected > .sorting_3 {
  background-color: #afbdd8;
}

table.dataTable.display tbody tr:hover > .sorting_1, table.dataTable.order-column.hover tbody tr:hover > .sorting_1 {
  background-color: #eaeaea;
}

table.dataTable.display tbody tr:hover > .sorting_2, table.dataTable.order-column.hover tbody tr:hover > .sorting_2 {
  background-color: #ececec;
}

table.dataTable.display tbody tr:hover > .sorting_3, table.dataTable.order-column.hover tbody tr:hover > .sorting_3 {
  background-color: #efefef;
}

table.dataTable.display tbody tr:hover.selected > .sorting_1, table.dataTable.order-column.hover tbody tr:hover.selected > .sorting_1 {
  background-color: #a2aec7;
}

table.dataTable.display tbody tr:hover.selected > .sorting_2, table.dataTable.order-column.hover tbody tr:hover.selected > .sorting_2 {
  background-color: #a3b0c9;
}

table.dataTable.display tbody tr:hover.selected > .sorting_3, table.dataTable.order-column.hover tbody tr:hover.selected > .sorting_3 {
  background-color: #a5b2cb;
}

table.dataTable.no-footer {
  border-bottom: 1px solid #111;
}

table.dataTable.nowrap th, table.dataTable.nowrap td {
  white-space: nowrap;
}

table.dataTable.compact thead th, table.dataTable.compact thead td {
  padding: 4px 17px;
}

table.dataTable.compact tfoot th, table.dataTable.compact tfoot td {
  padding: 4px;
}

table.dataTable.compact tbody th, table.dataTable.compact tbody td {
  padding: 4px;
}

table.dataTable th.dt-left, table.dataTable td.dt-left {
  text-align: left;
}

table.dataTable th.dt-center, table.dataTable td.dt-center, table.dataTable td.dataTables_empty {
  text-align: center;
}

table.dataTable th.dt-right, table.dataTable td.dt-right {
  text-align: right;
}

table.dataTable th.dt-justify, table.dataTable td.dt-justify {
  text-align: justify;
}

table.dataTable th.dt-nowrap, table.dataTable td.dt-nowrap {
  white-space: nowrap;
}

table.dataTable thead th.dt-head-left, table.dataTable thead td.dt-head-left, table.dataTable tfoot th.dt-head-left, table.dataTable tfoot td.dt-head-left {
  text-align: left;
}

table.dataTable thead th.dt-head-center, table.dataTable thead td.dt-head-center, table.dataTable tfoot th.dt-head-center, table.dataTable tfoot td.dt-head-center {
  text-align: center;
}

table.dataTable thead th.dt-head-right, table.dataTable thead td.dt-head-right, table.dataTable tfoot th.dt-head-right, table.dataTable tfoot td.dt-head-right {
  text-align: right;
}

table.dataTable thead th.dt-head-justify, table.dataTable thead td.dt-head-justify, table.dataTable tfoot th.dt-head-justify, table.dataTable tfoot td.dt-head-justify {
  text-align: justify;
}

table.dataTable thead th.dt-head-nowrap, table.dataTable thead td.dt-head-nowrap, table.dataTable tfoot th.dt-head-nowrap, table.dataTable tfoot td.dt-head-nowrap {
  white-space: nowrap;
}

table.dataTable tbody th.dt-body-left, table.dataTable tbody td.dt-body-left {
  text-align: left;
}

table.dataTable tbody th.dt-body-center, table.dataTable tbody td.dt-body-center {
  text-align: center;
}

table.dataTable tbody th.dt-body-right, table.dataTable tbody td.dt-body-right {
  text-align: right;
}

table.dataTable tbody th.dt-body-justify, table.dataTable tbody td.dt-body-justify {
  text-align: justify;
}

table.dataTable tbody th.dt-body-nowrap, table.dataTable tbody td.dt-body-nowrap {
  white-space: nowrap;
}

table.dataTable, table.dataTable th, table.dataTable td {
  box-sizing: content-box;
}

.dataTables_wrapper {
  position: relative;
  clear: both;
  *zoom: 1;
  zoom: 1;
}

.dataTables_wrapper .dataTables_length {
  float: left;
}

.dataTables_wrapper .dataTables_length select {
  border: 1px solid #aaa;
  border-radius: 3px;
  padding: 5px;
  background-color: transparent;
  padding: 4px;
}

.dataTables_wrapper .dataTables_filter {
  float: right;
  text-align: right;
}

.dataTables_wrapper .dataTables_filter input {
  border: 1px solid #aaa;
  border-radius: 3px;
  padding: 5px;
  background-color: transparent;
  margin-left: 3px;
}

.dataTables_wrapper .dataTables_info {
  clear: both;
  float: left;
  padding-top: 0.755em;
}

.dataTables_wrapper .dataTables_paginate {
  float: right;
  text-align: right;
  padding-top: 0.25em;
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
  box-sizing: border-box;
  display: inline-block;
  min-width: 1.5em;
  padding: 0.5em 1em;
  margin-left: 2px;
  text-align: center;
  text-decoration: none !important;
  cursor: pointer;
  *cursor: hand;
  color: #333 !important;
  border: 1px solid transparent;
  border-radius: 2px;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current, .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
  color: #333 !important;
  border: 1px solid #979797;
  background-color: white;
  background: linear-gradient(to bottom, white 0%, #dcdcdc 100%);
}

.dataTables_wrapper .dataTables_paginate .paginate_button.disabled, .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover, .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:active {
  cursor: default;
  color: #666 !important;
  border: 1px solid transparent;
  background: transparent;
  box-shadow: none;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  color: white !important;
  border: 1px solid #111;
  background-color: #585858;
  background: linear-gradient(to bottom, #585858 0%, #111 100%);
}

.dataTables_wrapper .dataTables_paginate .paginate_button:active {
  outline: none;
  background-color: #2b2b2b;
  background: linear-gradient(to bottom, #2b2b2b 0%, #0c0c0c 100%);
  box-shadow: inset 0 0 3px #111;
}

.dataTables_wrapper .dataTables_paginate .ellipsis {
  padding: 0 1em;
}

.dataTables_wrapper .dataTables_processing {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 40px;
  margin-left: -50%;
  margin-top: -25px;
  padding-top: 20px;
  text-align: center;
  font-size: 1.2em;
  background-color: white;
  background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.9) 25%, rgba(255, 255, 255, 0.9) 75%, rgba(255, 255, 255, 0) 100%);
}

.dataTables_wrapper .dataTables_length, .dataTables_wrapper .dataTables_filter, .dataTables_wrapper .dataTables_info, .dataTables_wrapper .dataTables_processing, .dataTables_wrapper .dataTables_paginate {
  color: #333;
}

.dataTables_wrapper .dataTables_scroll {
  clear: both;
}

.dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody {
  *margin-top: -1px;
  -webkit-overflow-scrolling: touch;
}

.dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody > table > thead > tr > th, .dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody > table > thead > tr > td, .dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody > table > tbody > tr > th, .dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody > table > tbody > tr > td {
  vertical-align: middle;
}

.dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody > table > thead > tr > th > div.dataTables_sizing, .dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody > table > thead > tr > td > div.dataTables_sizing, .dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody > table > tbody > tr > th > div.dataTables_sizing, .dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody > table > tbody > tr > td > div.dataTables_sizing {
  height: 0;
  overflow: hidden;
  margin: 0 !important;
  padding: 0 !important;
}

.dataTables_wrapper.no-footer .dataTables_scrollBody {
  border-bottom: 1px solid #111;
}

.dataTables_wrapper.no-footer div.dataTables_scrollHead table.dataTable, .dataTables_wrapper.no-footer div.dataTables_scrollBody > table {
  border-bottom: none;
}

.dataTables_wrapper:after {
  visibility: hidden;
  display: block;
  content: "";
  clear: both;
  height: 0;
}

@media screen and (max-width: 767px) {
  .dataTables_wrapper .dataTables_info, .dataTables_wrapper .dataTables_paginate {
    float: none;
    text-align: center;
  }
  .dataTables_wrapper .dataTables_paginate {
    margin-top: 0.5em;
  }
}
@media screen and (max-width: 640px) {
  .dataTables_wrapper .dataTables_length, .dataTables_wrapper .dataTables_filter {
    float: none;
    text-align: center;
  }
  .dataTables_wrapper .dataTables_filter {
    margin-top: 0.5em;
  }
}
.dataTables_wrapper {
  float: left;
  width: 100%;
  border: 1px solid #d9d9d9;
  border-radius: 5px;
  overflow: hidden;
  font-size: 12pt;
  font-weight: 400;
  letter-spacing: 0.5px;
  line-height: 20px;
  clear: both;
  display: block;
}
.dataTables_wrapper::before {
  display: block;
  content: "";
  height: 1px;
}
@-moz-document url-prefix() {
  .dataTables_wrapper::before {
    height: 0;
  }
}
.dataTables_wrapper::after {
  display: block;
  content: "";
  margin-bottom: -5px;
}
@-moz-document url-prefix() {
  .dataTables_wrapper::after {
    margin-bottom: -4px;
  }
}
.dataTables_wrapper::before, .dataTables_wrapper::after {
  content: none;
}
.dataTables_wrapper * {
  word-break: normal;
}
.dataTables_wrapper .dataTables_info {
  display: none;
}
.dataTables_wrapper .dataTables_scrollHead .dataTables_scrollHeadInner {
  border-bottom: 1px solid #d9d9d9;
}
.dataTables_wrapper .dataTables_scrollHead .dataTables_scrollHeadInner .sorting {
  transition: background 0.1s linear;
  background: #ffffff;
  cursor: pointer;
}
@media (hover: hover) and (pointer: fine) {
  .dataTables_wrapper .dataTables_scrollHead .dataTables_scrollHeadInner .sorting:hover:not(.disabled) {
    background: #eeeeee;
  }
}
.dataTables_wrapper .dataTables_scrollHead .dataTables_scrollHeadInner .sorting .content::after {
  float: left;
  font-size: 16px;
  font-family: "Material Icons";
  content: "";
  opacity: 0;
  color: #999999;
  transition: opacity 0.1s linear;
  margin-left: 5px;
}
.dataTables_wrapper .dataTables_scrollHead .dataTables_scrollHeadInner .sorting_asc {
  background-image: none !important;
}
.dataTables_wrapper .dataTables_scrollHead .dataTables_scrollHeadInner .sorting_asc .content::after {
  content: "keyboard_arrow_up";
  opacity: 1;
}
.dataTables_wrapper .dataTables_scrollHead .dataTables_scrollHeadInner .sorting_desc {
  background-image: none !important;
}
.dataTables_wrapper .dataTables_scrollHead .dataTables_scrollHeadInner .sorting_desc .content::after {
  content: "keyboard_arrow_down";
  opacity: 1;
}
.dataTables_wrapper .dataTables_scrollBody {
  border-bottom: 0 !important;
}
.dataTables_wrapper .align-left {
  text-align: left;
}
.dataTables_wrapper .align-right {
  text-align: right;
}
.dataTables_wrapper table.genericComponent.dataTable {
  margin: 0;
}
.dataTables_wrapper table.genericComponent.dataTable.no-footer {
  border-bottom: 0;
}
.dataTables_wrapper table.genericComponent.dataTable thead .sorting {
  background-image: none !important;
}
.dataTables_wrapper table.genericComponent.dataTable thead .sorting_asc {
  background-image: none !important;
}
.dataTables_wrapper table.genericComponent.dataTable thead .sorting_desc {
  background-image: none !important;
}
.dataTables_wrapper table.genericComponent.dataTable thead th {
  transform: translateY(0);
  overflow: hidden;
  border-bottom: 0;
  font-weight: 600;
  padding-top: 16px;
  padding-bottom: 18px;
  padding-left: 12px;
  padding-right: 12px;
  color: #444444;
}
.dataTables_wrapper table.genericComponent.dataTable thead th .rippleContainer {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
  background: transparent;
  z-index: 1;
  transition: background-color 0.1s linear;
}
.dataTables_wrapper table.genericComponent.dataTable thead th .rippleContainer .ripple {
  background: #d9d9d9;
}
.dataTables_wrapper table.genericComponent.dataTable thead th .content {
  position: relative;
  z-index: 2;
  pointer-events: none;
}
.dataTables_wrapper table.genericComponent.dataTable thead th .content > span {
  float: left;
}
.dataTables_wrapper table.genericComponent.dataTable tbody tr {
  transform: translateY(0);
  transition: background 0.1s linear;
  background: #ffffff;
  cursor: pointer;
}
@media (hover: hover) and (pointer: fine) {
  .dataTables_wrapper table.genericComponent.dataTable tbody tr:hover:not(.disabled) {
    background: #eeeeee;
  }
}
.dataTables_wrapper table.genericComponent.dataTable tbody tr.disabled {
  color: #999999;
  cursor: auto;
}
.dataTables_wrapper table.genericComponent.dataTable tbody tr.disabled td {
  pointer-events: all;
  cursor: auto;
}
.dataTables_wrapper table.genericComponent.dataTable tbody tr.disabled td .rippleContainer {
  display: none;
}
.dataTables_wrapper table.genericComponent.dataTable tbody tr .rippleContainer {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
  background: transparent;
  z-index: 1;
  transition: background-color 0.1s linear;
}
.dataTables_wrapper table.genericComponent.dataTable tbody tr .rippleContainer .ripple {
  background: #d9d9d9;
}
.dataTables_wrapper table.genericComponent.dataTable tbody tr td {
  padding-top: 13px;
  padding-bottom: 14px;
  padding-left: 12px;
  padding-right: 12px;
  border-bottom: 1px solid #d9d9d9;
}
.dataTables_wrapper table.genericComponent.dataTable tbody tr td .content {
  position: relative;
  z-index: 2;
  pointer-events: none;
}
.dataTables_wrapper table.genericComponent.dataTable tbody tr:last-child td {
  border-bottom: 0;
}

.genericComponent.input, .genericComponent.select, .genericComponent.textarea {
  position: relative;
  width: 100%;
  padding-left: 1px;
  padding-right: 1px;
}
.genericComponent.input .label, .genericComponent.select .label, .genericComponent.textarea .label {
  color: #999999;
  position: absolute;
  top: 19px;
  left: 17px;
  transition: top 0.1s ease;
  pointer-events: none;
  font-weight: 400;
  font-size: smaller;
}
.genericComponent.input .label span, .genericComponent.select .label span, .genericComponent.textarea .label span {
  transition: color 0.1s linear;
}
.genericComponent.input .label::after, .genericComponent.select .label::after, .genericComponent.textarea .label::after {
  content: "";
  width: 100%;
  opacity: 0;
  height: 0;
  transition: opacity 0.1s linear;
}
.genericComponent.input .fieldContainer, .genericComponent.select .fieldContainer, .genericComponent.textarea .fieldContainer {
  display: flex;
  width: 100%;
  height: 56px;
  background: #ffffff;
  border-radius: 5px;
  border: 1px solid #d9d9d9;
  transition: border-color 0.1s linear, padding-right 0.1s ease;
  cursor: text;
}
@media (hover: hover) and (pointer: fine) {
  .genericComponent.input .fieldContainer:hover, .genericComponent.select .fieldContainer:hover, .genericComponent.textarea .fieldContainer:hover {
    border: 1px solid #aaaaaa;
  }
}
.genericComponent.input .fieldContainer input,
.genericComponent.input .fieldContainer select,
.genericComponent.input .fieldContainer textarea, .genericComponent.select .fieldContainer input,
.genericComponent.select .fieldContainer select,
.genericComponent.select .fieldContainer textarea, .genericComponent.textarea .fieldContainer input,
.genericComponent.textarea .fieldContainer select,
.genericComponent.textarea .fieldContainer textarea {
  filter: none;
  font-size: 16px;
  font-weight: 400;
  letter-spacing: 0.5px;
  line-height: 24px;
  clear: both;
  display: block;
}
.genericComponent.input .fieldContainer input::before,
.genericComponent.input .fieldContainer select::before,
.genericComponent.input .fieldContainer textarea::before, .genericComponent.select .fieldContainer input::before,
.genericComponent.select .fieldContainer select::before,
.genericComponent.select .fieldContainer textarea::before, .genericComponent.textarea .fieldContainer input::before,
.genericComponent.textarea .fieldContainer select::before,
.genericComponent.textarea .fieldContainer textarea::before {
  display: block;
  content: "";
  margin-top: -2px;
}
.genericComponent.input .fieldContainer input::after,
.genericComponent.input .fieldContainer select::after,
.genericComponent.input .fieldContainer textarea::after, .genericComponent.select .fieldContainer input::after,
.genericComponent.select .fieldContainer select::after,
.genericComponent.select .fieldContainer textarea::after, .genericComponent.textarea .fieldContainer input::after,
.genericComponent.textarea .fieldContainer select::after,
.genericComponent.textarea .fieldContainer textarea::after {
  display: block;
  content: "";
  margin-bottom: -6px;
}
.genericComponent.input .fieldContainer input,
.genericComponent.input .fieldContainer select,
.genericComponent.input .fieldContainer textarea, .genericComponent.select .fieldContainer input,
.genericComponent.select .fieldContainer select,
.genericComponent.select .fieldContainer textarea, .genericComponent.textarea .fieldContainer input,
.genericComponent.textarea .fieldContainer select,
.genericComponent.textarea .fieldContainer textarea {
  height: 100%;
  width: 100%;
  border: 0;
  outline: none;
  background: transparent;
  line-height: 100%;
  color: #444444;
  padding-left: 15px;
  padding-right: 15px;
  transition: padding-right 0.1s ease;
  -moz-appearance: textfield;
}
.genericComponent.input .fieldContainer input::-webkit-outer-spin-button, .genericComponent.input .fieldContainer input::-webkit-inner-spin-button,
.genericComponent.input .fieldContainer select::-webkit-outer-spin-button,
.genericComponent.input .fieldContainer select::-webkit-inner-spin-button,
.genericComponent.input .fieldContainer textarea::-webkit-outer-spin-button,
.genericComponent.input .fieldContainer textarea::-webkit-inner-spin-button, .genericComponent.select .fieldContainer input::-webkit-outer-spin-button, .genericComponent.select .fieldContainer input::-webkit-inner-spin-button,
.genericComponent.select .fieldContainer select::-webkit-outer-spin-button,
.genericComponent.select .fieldContainer select::-webkit-inner-spin-button,
.genericComponent.select .fieldContainer textarea::-webkit-outer-spin-button,
.genericComponent.select .fieldContainer textarea::-webkit-inner-spin-button, .genericComponent.textarea .fieldContainer input::-webkit-outer-spin-button, .genericComponent.textarea .fieldContainer input::-webkit-inner-spin-button,
.genericComponent.textarea .fieldContainer select::-webkit-outer-spin-button,
.genericComponent.textarea .fieldContainer select::-webkit-inner-spin-button,
.genericComponent.textarea .fieldContainer textarea::-webkit-outer-spin-button,
.genericComponent.textarea .fieldContainer textarea::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.genericComponent.input .fieldContainer input:-webkit-autofill, .genericComponent.input .fieldContainer input:-webkit-autofill:hover, .genericComponent.input .fieldContainer input:-webkit-autofill:focus, .genericComponent.input .fieldContainer input:-webkit-autofill:active,
.genericComponent.input .fieldContainer select:-webkit-autofill,
.genericComponent.input .fieldContainer select:-webkit-autofill:hover,
.genericComponent.input .fieldContainer select:-webkit-autofill:focus,
.genericComponent.input .fieldContainer select:-webkit-autofill:active,
.genericComponent.input .fieldContainer textarea:-webkit-autofill,
.genericComponent.input .fieldContainer textarea:-webkit-autofill:hover,
.genericComponent.input .fieldContainer textarea:-webkit-autofill:focus,
.genericComponent.input .fieldContainer textarea:-webkit-autofill:active, .genericComponent.select .fieldContainer input:-webkit-autofill, .genericComponent.select .fieldContainer input:-webkit-autofill:hover, .genericComponent.select .fieldContainer input:-webkit-autofill:focus, .genericComponent.select .fieldContainer input:-webkit-autofill:active,
.genericComponent.select .fieldContainer select:-webkit-autofill,
.genericComponent.select .fieldContainer select:-webkit-autofill:hover,
.genericComponent.select .fieldContainer select:-webkit-autofill:focus,
.genericComponent.select .fieldContainer select:-webkit-autofill:active,
.genericComponent.select .fieldContainer textarea:-webkit-autofill,
.genericComponent.select .fieldContainer textarea:-webkit-autofill:hover,
.genericComponent.select .fieldContainer textarea:-webkit-autofill:focus,
.genericComponent.select .fieldContainer textarea:-webkit-autofill:active, .genericComponent.textarea .fieldContainer input:-webkit-autofill, .genericComponent.textarea .fieldContainer input:-webkit-autofill:hover, .genericComponent.textarea .fieldContainer input:-webkit-autofill:focus, .genericComponent.textarea .fieldContainer input:-webkit-autofill:active,
.genericComponent.textarea .fieldContainer select:-webkit-autofill,
.genericComponent.textarea .fieldContainer select:-webkit-autofill:hover,
.genericComponent.textarea .fieldContainer select:-webkit-autofill:focus,
.genericComponent.textarea .fieldContainer select:-webkit-autofill:active,
.genericComponent.textarea .fieldContainer textarea:-webkit-autofill,
.genericComponent.textarea .fieldContainer textarea:-webkit-autofill:hover,
.genericComponent.textarea .fieldContainer textarea:-webkit-autofill:focus,
.genericComponent.textarea .fieldContainer textarea:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 32px white inset !important;
  -webkit-animation-delay: 1s; /* Safari support - any positive time runs instantly */
  -webkit-animation-name: autofill;
  -webkit-animation-fill-mode: both;
  border-radius: 5px;
}
.genericComponent.input .fieldContainer input:-webkit-autofill::first-line, .genericComponent.input .fieldContainer input:-webkit-autofill:hover::first-line, .genericComponent.input .fieldContainer input:-webkit-autofill:focus::first-line, .genericComponent.input .fieldContainer input:-webkit-autofill:active::first-line,
.genericComponent.input .fieldContainer select:-webkit-autofill::first-line,
.genericComponent.input .fieldContainer select:-webkit-autofill:hover::first-line,
.genericComponent.input .fieldContainer select:-webkit-autofill:focus::first-line,
.genericComponent.input .fieldContainer select:-webkit-autofill:active::first-line,
.genericComponent.input .fieldContainer textarea:-webkit-autofill::first-line,
.genericComponent.input .fieldContainer textarea:-webkit-autofill:hover::first-line,
.genericComponent.input .fieldContainer textarea:-webkit-autofill:focus::first-line,
.genericComponent.input .fieldContainer textarea:-webkit-autofill:active::first-line, .genericComponent.select .fieldContainer input:-webkit-autofill::first-line, .genericComponent.select .fieldContainer input:-webkit-autofill:hover::first-line, .genericComponent.select .fieldContainer input:-webkit-autofill:focus::first-line, .genericComponent.select .fieldContainer input:-webkit-autofill:active::first-line,
.genericComponent.select .fieldContainer select:-webkit-autofill::first-line,
.genericComponent.select .fieldContainer select:-webkit-autofill:hover::first-line,
.genericComponent.select .fieldContainer select:-webkit-autofill:focus::first-line,
.genericComponent.select .fieldContainer select:-webkit-autofill:active::first-line,
.genericComponent.select .fieldContainer textarea:-webkit-autofill::first-line,
.genericComponent.select .fieldContainer textarea:-webkit-autofill:hover::first-line,
.genericComponent.select .fieldContainer textarea:-webkit-autofill:focus::first-line,
.genericComponent.select .fieldContainer textarea:-webkit-autofill:active::first-line, .genericComponent.textarea .fieldContainer input:-webkit-autofill::first-line, .genericComponent.textarea .fieldContainer input:-webkit-autofill:hover::first-line, .genericComponent.textarea .fieldContainer input:-webkit-autofill:focus::first-line, .genericComponent.textarea .fieldContainer input:-webkit-autofill:active::first-line,
.genericComponent.textarea .fieldContainer select:-webkit-autofill::first-line,
.genericComponent.textarea .fieldContainer select:-webkit-autofill:hover::first-line,
.genericComponent.textarea .fieldContainer select:-webkit-autofill:focus::first-line,
.genericComponent.textarea .fieldContainer select:-webkit-autofill:active::first-line,
.genericComponent.textarea .fieldContainer textarea:-webkit-autofill::first-line,
.genericComponent.textarea .fieldContainer textarea:-webkit-autofill:hover::first-line,
.genericComponent.textarea .fieldContainer textarea:-webkit-autofill:focus::first-line,
.genericComponent.textarea .fieldContainer textarea:-webkit-autofill:active::first-line {
  font-size: 16px;
  font-weight: 400;
  letter-spacing: 0.5px;
  line-height: 24px;
  clear: both;
  display: block;
}
.genericComponent.input .fieldContainer input:-webkit-autofill::first-line::before, .genericComponent.input .fieldContainer input:-webkit-autofill:hover::first-line::before, .genericComponent.input .fieldContainer input:-webkit-autofill:focus::first-line::before, .genericComponent.input .fieldContainer input:-webkit-autofill:active::first-line::before,
.genericComponent.input .fieldContainer select:-webkit-autofill::first-line::before,
.genericComponent.input .fieldContainer select:-webkit-autofill:hover::first-line::before,
.genericComponent.input .fieldContainer select:-webkit-autofill:focus::first-line::before,
.genericComponent.input .fieldContainer select:-webkit-autofill:active::first-line::before,
.genericComponent.input .fieldContainer textarea:-webkit-autofill::first-line::before,
.genericComponent.input .fieldContainer textarea:-webkit-autofill:hover::first-line::before,
.genericComponent.input .fieldContainer textarea:-webkit-autofill:focus::first-line::before,
.genericComponent.input .fieldContainer textarea:-webkit-autofill:active::first-line::before, .genericComponent.select .fieldContainer input:-webkit-autofill::first-line::before, .genericComponent.select .fieldContainer input:-webkit-autofill:hover::first-line::before, .genericComponent.select .fieldContainer input:-webkit-autofill:focus::first-line::before, .genericComponent.select .fieldContainer input:-webkit-autofill:active::first-line::before,
.genericComponent.select .fieldContainer select:-webkit-autofill::first-line::before,
.genericComponent.select .fieldContainer select:-webkit-autofill:hover::first-line::before,
.genericComponent.select .fieldContainer select:-webkit-autofill:focus::first-line::before,
.genericComponent.select .fieldContainer select:-webkit-autofill:active::first-line::before,
.genericComponent.select .fieldContainer textarea:-webkit-autofill::first-line::before,
.genericComponent.select .fieldContainer textarea:-webkit-autofill:hover::first-line::before,
.genericComponent.select .fieldContainer textarea:-webkit-autofill:focus::first-line::before,
.genericComponent.select .fieldContainer textarea:-webkit-autofill:active::first-line::before, .genericComponent.textarea .fieldContainer input:-webkit-autofill::first-line::before, .genericComponent.textarea .fieldContainer input:-webkit-autofill:hover::first-line::before, .genericComponent.textarea .fieldContainer input:-webkit-autofill:focus::first-line::before, .genericComponent.textarea .fieldContainer input:-webkit-autofill:active::first-line::before,
.genericComponent.textarea .fieldContainer select:-webkit-autofill::first-line::before,
.genericComponent.textarea .fieldContainer select:-webkit-autofill:hover::first-line::before,
.genericComponent.textarea .fieldContainer select:-webkit-autofill:focus::first-line::before,
.genericComponent.textarea .fieldContainer select:-webkit-autofill:active::first-line::before,
.genericComponent.textarea .fieldContainer textarea:-webkit-autofill::first-line::before,
.genericComponent.textarea .fieldContainer textarea:-webkit-autofill:hover::first-line::before,
.genericComponent.textarea .fieldContainer textarea:-webkit-autofill:focus::first-line::before,
.genericComponent.textarea .fieldContainer textarea:-webkit-autofill:active::first-line::before {
  display: block;
  content: "";
  margin-top: -2px;
}
.genericComponent.input .fieldContainer input:-webkit-autofill::first-line::after, .genericComponent.input .fieldContainer input:-webkit-autofill:hover::first-line::after, .genericComponent.input .fieldContainer input:-webkit-autofill:focus::first-line::after, .genericComponent.input .fieldContainer input:-webkit-autofill:active::first-line::after,
.genericComponent.input .fieldContainer select:-webkit-autofill::first-line::after,
.genericComponent.input .fieldContainer select:-webkit-autofill:hover::first-line::after,
.genericComponent.input .fieldContainer select:-webkit-autofill:focus::first-line::after,
.genericComponent.input .fieldContainer select:-webkit-autofill:active::first-line::after,
.genericComponent.input .fieldContainer textarea:-webkit-autofill::first-line::after,
.genericComponent.input .fieldContainer textarea:-webkit-autofill:hover::first-line::after,
.genericComponent.input .fieldContainer textarea:-webkit-autofill:focus::first-line::after,
.genericComponent.input .fieldContainer textarea:-webkit-autofill:active::first-line::after, .genericComponent.select .fieldContainer input:-webkit-autofill::first-line::after, .genericComponent.select .fieldContainer input:-webkit-autofill:hover::first-line::after, .genericComponent.select .fieldContainer input:-webkit-autofill:focus::first-line::after, .genericComponent.select .fieldContainer input:-webkit-autofill:active::first-line::after,
.genericComponent.select .fieldContainer select:-webkit-autofill::first-line::after,
.genericComponent.select .fieldContainer select:-webkit-autofill:hover::first-line::after,
.genericComponent.select .fieldContainer select:-webkit-autofill:focus::first-line::after,
.genericComponent.select .fieldContainer select:-webkit-autofill:active::first-line::after,
.genericComponent.select .fieldContainer textarea:-webkit-autofill::first-line::after,
.genericComponent.select .fieldContainer textarea:-webkit-autofill:hover::first-line::after,
.genericComponent.select .fieldContainer textarea:-webkit-autofill:focus::first-line::after,
.genericComponent.select .fieldContainer textarea:-webkit-autofill:active::first-line::after, .genericComponent.textarea .fieldContainer input:-webkit-autofill::first-line::after, .genericComponent.textarea .fieldContainer input:-webkit-autofill:hover::first-line::after, .genericComponent.textarea .fieldContainer input:-webkit-autofill:focus::first-line::after, .genericComponent.textarea .fieldContainer input:-webkit-autofill:active::first-line::after,
.genericComponent.textarea .fieldContainer select:-webkit-autofill::first-line::after,
.genericComponent.textarea .fieldContainer select:-webkit-autofill:hover::first-line::after,
.genericComponent.textarea .fieldContainer select:-webkit-autofill:focus::first-line::after,
.genericComponent.textarea .fieldContainer select:-webkit-autofill:active::first-line::after,
.genericComponent.textarea .fieldContainer textarea:-webkit-autofill::first-line::after,
.genericComponent.textarea .fieldContainer textarea:-webkit-autofill:hover::first-line::after,
.genericComponent.textarea .fieldContainer textarea:-webkit-autofill:focus::first-line::after,
.genericComponent.textarea .fieldContainer textarea:-webkit-autofill:active::first-line::after {
  display: block;
  content: "";
  margin-bottom: -6px;
}
.genericComponent.input .fieldContainer input:-webkit-autofill::first-line, .genericComponent.input .fieldContainer input:-webkit-autofill:hover::first-line, .genericComponent.input .fieldContainer input:-webkit-autofill:focus::first-line, .genericComponent.input .fieldContainer input:-webkit-autofill:active::first-line,
.genericComponent.input .fieldContainer select:-webkit-autofill::first-line,
.genericComponent.input .fieldContainer select:-webkit-autofill:hover::first-line,
.genericComponent.input .fieldContainer select:-webkit-autofill:focus::first-line,
.genericComponent.input .fieldContainer select:-webkit-autofill:active::first-line,
.genericComponent.input .fieldContainer textarea:-webkit-autofill::first-line,
.genericComponent.input .fieldContainer textarea:-webkit-autofill:hover::first-line,
.genericComponent.input .fieldContainer textarea:-webkit-autofill:focus::first-line,
.genericComponent.input .fieldContainer textarea:-webkit-autofill:active::first-line, .genericComponent.select .fieldContainer input:-webkit-autofill::first-line, .genericComponent.select .fieldContainer input:-webkit-autofill:hover::first-line, .genericComponent.select .fieldContainer input:-webkit-autofill:focus::first-line, .genericComponent.select .fieldContainer input:-webkit-autofill:active::first-line,
.genericComponent.select .fieldContainer select:-webkit-autofill::first-line,
.genericComponent.select .fieldContainer select:-webkit-autofill:hover::first-line,
.genericComponent.select .fieldContainer select:-webkit-autofill:focus::first-line,
.genericComponent.select .fieldContainer select:-webkit-autofill:active::first-line,
.genericComponent.select .fieldContainer textarea:-webkit-autofill::first-line,
.genericComponent.select .fieldContainer textarea:-webkit-autofill:hover::first-line,
.genericComponent.select .fieldContainer textarea:-webkit-autofill:focus::first-line,
.genericComponent.select .fieldContainer textarea:-webkit-autofill:active::first-line, .genericComponent.textarea .fieldContainer input:-webkit-autofill::first-line, .genericComponent.textarea .fieldContainer input:-webkit-autofill:hover::first-line, .genericComponent.textarea .fieldContainer input:-webkit-autofill:focus::first-line, .genericComponent.textarea .fieldContainer input:-webkit-autofill:active::first-line,
.genericComponent.textarea .fieldContainer select:-webkit-autofill::first-line,
.genericComponent.textarea .fieldContainer select:-webkit-autofill:hover::first-line,
.genericComponent.textarea .fieldContainer select:-webkit-autofill:focus::first-line,
.genericComponent.textarea .fieldContainer select:-webkit-autofill:active::first-line,
.genericComponent.textarea .fieldContainer textarea:-webkit-autofill::first-line,
.genericComponent.textarea .fieldContainer textarea:-webkit-autofill:hover::first-line,
.genericComponent.textarea .fieldContainer textarea:-webkit-autofill:focus::first-line,
.genericComponent.textarea .fieldContainer textarea:-webkit-autofill:active::first-line {
  font-family: "Open Sans", sans-serif;
  background: #ffffff;
}
.genericComponent.input .fieldContainer .prefix,
.genericComponent.input .fieldContainer .suffix, .genericComponent.select .fieldContainer .prefix,
.genericComponent.select .fieldContainer .suffix, .genericComponent.textarea .fieldContainer .prefix,
.genericComponent.textarea .fieldContainer .suffix {
  font-size: 16px;
  font-weight: 400;
  letter-spacing: 0.5px;
  line-height: 24px;
  clear: both;
  display: block;
}
.genericComponent.input .fieldContainer .prefix::before,
.genericComponent.input .fieldContainer .suffix::before, .genericComponent.select .fieldContainer .prefix::before,
.genericComponent.select .fieldContainer .suffix::before, .genericComponent.textarea .fieldContainer .prefix::before,
.genericComponent.textarea .fieldContainer .suffix::before {
  display: block;
  content: "";
  margin-top: -2px;
}
.genericComponent.input .fieldContainer .prefix::after,
.genericComponent.input .fieldContainer .suffix::after, .genericComponent.select .fieldContainer .prefix::after,
.genericComponent.select .fieldContainer .suffix::after, .genericComponent.textarea .fieldContainer .prefix::after,
.genericComponent.textarea .fieldContainer .suffix::after {
  display: block;
  content: "";
  margin-bottom: -6px;
}
.genericComponent.input .fieldContainer .prefix,
.genericComponent.input .fieldContainer .suffix, .genericComponent.select .fieldContainer .prefix,
.genericComponent.select .fieldContainer .suffix, .genericComponent.textarea .fieldContainer .prefix,
.genericComponent.textarea .fieldContainer .suffix {
  height: 100%;
  opacity: 0;
  color: #666666;
  transition: opacity 0.05s linear;
  transition-delay: 0;
  white-space: nowrap;
  padding-top: 17px;
}
.genericComponent.input .fieldContainer .prefix, .genericComponent.select .fieldContainer .prefix, .genericComponent.textarea .fieldContainer .prefix {
  padding-right: 4px;
  margin-right: -15px;
  padding-left: 15px;
}
.genericComponent.input .fieldContainer .suffix, .genericComponent.select .fieldContainer .suffix, .genericComponent.textarea .fieldContainer .suffix {
  padding-left: 4px;
  margin-left: -15px;
  padding-right: 15px;
  transition: padding-right 0.1s ease;
}
.genericComponent.input .helpText,
.genericComponent.input .errorText, .genericComponent.select .helpText,
.genericComponent.select .errorText, .genericComponent.textarea .helpText,
.genericComponent.textarea .errorText {
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.4px;
  line-height: 16px;
  clear: both;
  display: block;
}
.genericComponent.input .helpText::before,
.genericComponent.input .errorText::before, .genericComponent.select .helpText::before,
.genericComponent.select .errorText::before, .genericComponent.textarea .helpText::before,
.genericComponent.textarea .errorText::before {
  display: block;
  content: "";
  height: 4px;
}
@-moz-document url-prefix() {
  .genericComponent.input .helpText::before,
  .genericComponent.input .errorText::before, .genericComponent.select .helpText::before,
  .genericComponent.select .errorText::before, .genericComponent.textarea .helpText::before,
  .genericComponent.textarea .errorText::before {
    height: 3px;
  }
}
.genericComponent.input .helpText::after,
.genericComponent.input .errorText::after, .genericComponent.select .helpText::after,
.genericComponent.select .errorText::after, .genericComponent.textarea .helpText::after,
.genericComponent.textarea .errorText::after {
  display: block;
  content: "";
  margin-bottom: -4px;
}
@-moz-document url-prefix() {
  .genericComponent.input .helpText::after,
  .genericComponent.input .errorText::after, .genericComponent.select .helpText::after,
  .genericComponent.select .errorText::after, .genericComponent.textarea .helpText::after,
  .genericComponent.textarea .errorText::after {
    margin-bottom: -3px;
  }
}
.genericComponent.input .helpText,
.genericComponent.input .errorText, .genericComponent.select .helpText,
.genericComponent.select .errorText, .genericComponent.textarea .helpText,
.genericComponent.textarea .errorText {
  padding-left: 15px;
}
.genericComponent.input .errorText, .genericComponent.select .errorText, .genericComponent.textarea .errorText {
  display: none;
}
.genericComponent.input.moveLabel .label, .genericComponent.select.moveLabel .label, .genericComponent.textarea.moveLabel .label {
  top: -11px;
  left: 13px;
  padding-left: 3px;
  padding-right: 3px;
  pointer-events: auto;
}
.genericComponent.input.moveLabel .label span, .genericComponent.select.moveLabel .label span, .genericComponent.textarea.moveLabel .label span {
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.4px;
  line-height: 16px;
  clear: both;
  display: block;
}
.genericComponent.input.moveLabel .label span::before, .genericComponent.select.moveLabel .label span::before, .genericComponent.textarea.moveLabel .label span::before {
  display: block;
  content: "";
  height: 4px;
}
@-moz-document url-prefix() {
  .genericComponent.input.moveLabel .label span::before, .genericComponent.select.moveLabel .label span::before, .genericComponent.textarea.moveLabel .label span::before {
    height: 3px;
  }
}
.genericComponent.input.moveLabel .label span::after, .genericComponent.select.moveLabel .label span::after, .genericComponent.textarea.moveLabel .label span::after {
  display: block;
  content: "";
  margin-bottom: -4px;
}
@-moz-document url-prefix() {
  .genericComponent.input.moveLabel .label span::after, .genericComponent.select.moveLabel .label span::after, .genericComponent.textarea.moveLabel .label span::after {
    margin-bottom: -3px;
  }
}
.genericComponent.input.moveLabel .label span, .genericComponent.select.moveLabel .label span, .genericComponent.textarea.moveLabel .label span {
  font-weight: 600;
  position: relative;
  z-index: 2;
}
.genericComponent.input.moveLabel .label::after, .genericComponent.select.moveLabel .label::after, .genericComponent.textarea.moveLabel .label::after {
  height: 1px;
  background: #ffffff;
  position: absolute;
  top: 11px;
  left: 0;
  z-index: 1;
  opacity: 1;
}
.genericComponent.input.moveLabel .prefix,
.genericComponent.input.moveLabel .suffix, .genericComponent.select.moveLabel .prefix,
.genericComponent.select.moveLabel .suffix, .genericComponent.textarea.moveLabel .prefix,
.genericComponent.textarea.moveLabel .suffix {
  opacity: 1;
  transition-delay: 0.05s;
}
.genericComponent.input.focused, .genericComponent.select.focused, .genericComponent.textarea.focused {
  padding-left: 0;
  padding-right: 0;
}
.genericComponent.input.focused .helpText,
.genericComponent.input.focused .errorText, .genericComponent.select.focused .helpText,
.genericComponent.select.focused .errorText, .genericComponent.textarea.focused .helpText,
.genericComponent.textarea.focused .errorText {
  padding-left: 16px;
  padding-right: 1px;
}
.genericComponent.input.focused .label::after, .genericComponent.select.focused .label::after, .genericComponent.textarea.focused .label::after {
  height: 2px;
}
.genericComponent.input.focused .fieldContainer, .genericComponent.select.focused .fieldContainer, .genericComponent.textarea.focused .fieldContainer {
  border: 2px solid #4068e1;
}
@media (hover: hover) and (pointer: fine) {
  .genericComponent.input.focused .fieldContainer:hover, .genericComponent.select.focused .fieldContainer:hover, .genericComponent.textarea.focused .fieldContainer:hover {
    border: 2px solid #4068e1;
  }
}
.genericComponent.input.focused .fieldContainer .prefix,
.genericComponent.input.focused .fieldContainer .suffix, .genericComponent.select.focused .fieldContainer .prefix,
.genericComponent.select.focused .fieldContainer .suffix, .genericComponent.textarea.focused .fieldContainer .prefix,
.genericComponent.textarea.focused .fieldContainer .suffix {
  padding-top: 16px;
  transition: opacity 0.15s linear;
}
.genericComponent.input.moveLabel.focused .label span, .genericComponent.select.moveLabel.focused .label span, .genericComponent.textarea.moveLabel.focused .label span {
  color: #4068e1;
}
.genericComponent.input.disabled .label::after, .genericComponent.select.disabled .label::after, .genericComponent.textarea.disabled .label::after {
  height: 9px;
  border-bottom-left-radius: 2px;
  border-bottom-right-radius: 2px;
  background: #eeeeee;
}
.genericComponent.input.disabled .fieldContainer, .genericComponent.select.disabled .fieldContainer, .genericComponent.textarea.disabled .fieldContainer {
  background: #eeeeee;
  pointer-events: none;
}
.genericComponent.input.disabled .fieldContainer input,
.genericComponent.input.disabled .fieldContainer select,
.genericComponent.input.disabled .fieldContainer textarea, .genericComponent.select.disabled .fieldContainer input,
.genericComponent.select.disabled .fieldContainer select,
.genericComponent.select.disabled .fieldContainer textarea, .genericComponent.textarea.disabled .fieldContainer input,
.genericComponent.textarea.disabled .fieldContainer select,
.genericComponent.textarea.disabled .fieldContainer textarea {
  color: #666666;
}
@media (hover: hover) and (pointer: fine) {
  .genericComponent.input.disabled .fieldContainer:hover, .genericComponent.select.disabled .fieldContainer:hover, .genericComponent.textarea.disabled .fieldContainer:hover {
    border: 1px solid #d9d9d9;
  }
}
.genericComponent.input.disabled .helpText, .genericComponent.select.disabled .helpText, .genericComponent.textarea.disabled .helpText {
  color: #999999;
}
.genericComponent.input.error .label span,
.genericComponent.input.error .helpText,
.genericComponent.input.error .errorText, .genericComponent.select.error .label span,
.genericComponent.select.error .helpText,
.genericComponent.select.error .errorText, .genericComponent.textarea.error .label span,
.genericComponent.textarea.error .helpText,
.genericComponent.textarea.error .errorText {
  color: #db6056 !important;
}
.genericComponent.input.error .fieldContainer, .genericComponent.select.error .fieldContainer, .genericComponent.textarea.error .fieldContainer {
  border-color: #db6056 !important;
  padding-right: 42px;
}
.genericComponent.input.error .fieldContainer input,
.genericComponent.input.error .fieldContainer select,
.genericComponent.input.error .fieldContainer textarea,
.genericComponent.input.error .fieldContainer .suffix, .genericComponent.select.error .fieldContainer input,
.genericComponent.select.error .fieldContainer select,
.genericComponent.select.error .fieldContainer textarea,
.genericComponent.select.error .fieldContainer .suffix, .genericComponent.textarea.error .fieldContainer input,
.genericComponent.textarea.error .fieldContainer select,
.genericComponent.textarea.error .fieldContainer textarea,
.genericComponent.textarea.error .fieldContainer .suffix {
  padding-right: 0;
}
.genericComponent.input.error .helpText, .genericComponent.select.error .helpText, .genericComponent.textarea.error .helpText {
  display: none;
}
.genericComponent.input.error .errorText, .genericComponent.select.error .errorText, .genericComponent.textarea.error .errorText {
  display: block;
}
.genericComponent.input.error::after, .genericComponent.select.error::after, .genericComponent.textarea.error::after {
  position: absolute;
  top: 15px;
  right: 12px;
  font-size: 24px;
  font-family: "Material Icons";
  content: "error";
  color: #db6056;
  pointer-events: none;
  opacity: 1;
}
.genericComponent.input.error.focused .fieldContainer, .genericComponent.select.error.focused .fieldContainer, .genericComponent.textarea.error.focused .fieldContainer {
  border-color: rgb(209.3951219512, 56.9951219512, 44.6048780488) !important;
}
.genericComponent.input::after, .genericComponent.select::after, .genericComponent.textarea::after {
  content: "";
  opacity: 0;
  transition: opacity 0.1s linear 0.1s;
}
.genericComponent.input.rightAlign input, .genericComponent.select.rightAlign input, .genericComponent.textarea.rightAlign input {
  text-align: right;
}
.genericComponent.dateTimePicker .label {
  top: 16px;
}

.genericComponent.select .fieldContainer {
  cursor: auto;
}
.genericComponent.select .fieldContainer::after {
  position: absolute;
  top: 15px;
  right: 10px;
  font-size: 24px;
  font-family: "Material Icons";
  content: "keyboard_arrow_down";
  color: #aaaaaa;
  pointer-events: none;
  opacity: 1;
  transition: right 0.1s ease;
  background: #ffffff;
}
.genericComponent.select .fieldContainer select {
  -webkit-appearance: none !important;
     -moz-appearance: none !important;
          appearance: none !important;
  line-height: 20px;
}
.genericComponent.select .fieldContainer select option[disabled] {
  display: none;
}
.genericComponent.select.disabled .fieldContainer select {
  opacity: 1;
}
.genericComponent.select.disabled .fieldContainer::after {
  color: #cccccc;
  background: #eeeeee;
}
.genericComponent.select.focused .fieldContainer::after {
  color: #666666;
}
.genericComponent.select.error .fieldContainer {
  padding-right: 0;
}
.genericComponent.select.error .fieldContainer::after {
  right: 38px;
  color: #db6056;
}
.genericComponent.select.sml .fieldContainer {
  height: var(--touch-target);
}
.genericComponent.select.sml .fieldContainer .label {
  top: calc(var(--touch-target) / 3);
}
.genericComponent.select.sml .fieldContainer::after {
  top: calc(var(--touch-target) / 3);
}
.genericComponent.select.sml.moveLabel .label {
  top: calc(var(--touch-target) / 5 * -1);
  background: var(--white-1);
}

.genericComponent.textarea .fieldContainer {
  height: 152px;
  padding-top: 14px;
  padding-bottom: 14px;
}
.genericComponent.textarea .fieldContainer textarea {
  resize: none;
  line-height: 24px;
}
.genericComponent.textarea.focused .fieldContainer {
  padding-top: 13px;
  padding-bottom: 13px;
}
.genericComponent.textarea {
  width: 60%;
}

/* Media Queries */
@media only screen and (max-width: 960px) {
  .genericComponent.textarea {
    width: 100%;
  }
}
.genericComponent.checkbox:after, .genericComponent.radio:after, .genericComponent.radioContainer.error:after, .genericComponent.switch:after {
  content: "";
  display: table;
  clear: both;
}
.genericComponent.checkbox, .genericComponent.radio, .genericComponent.radioContainer.error, .genericComponent.switch {
  position: relative;
  display: flex;
  align-self: center;
}
.genericComponent.checkbox .rippleContainer, .genericComponent.radio .rippleContainer, .genericComponent.radioContainer.error .rippleContainer, .genericComponent.switch .rippleContainer {
  position: absolute;
  top: 2px;
  left: 0;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  overflow: hidden;
  background: transparent;
  z-index: 2;
  pointer-events: none;
  transition: background-color 0.1s linear;
}
.genericComponent.checkbox .rippleContainer .ripple, .genericComponent.radio .rippleContainer .ripple, .genericComponent.radioContainer.error .rippleContainer .ripple, .genericComponent.switch .rippleContainer .ripple {
  background: rgba(64, 104, 225, 0.3);
}
.genericComponent.checkbox input, .genericComponent.radio input, .genericComponent.radioContainer.error input, .genericComponent.switch input {
  display: block;
  float: left;
  width: 30px;
  height: 30px;
  opacity: 0;
  cursor: pointer;
  margin-left: 0;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  padding: 0;
  border: 0;
  background: transparent;
}
.genericComponent.checkbox input + .overlay, .genericComponent.radio input + .overlay, .genericComponent.radioContainer.error input + .overlay, .genericComponent.switch input + .overlay {
  position: absolute;
  top: 7px;
  left: 5px;
  background: #ffffff;
  border: 2px solid #666666;
  width: 20px;
  height: 20px;
  border-radius: 2px;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 0.1s linear, border-color 0.1s linear;
}
.genericComponent.checkbox input + .overlay::after, .genericComponent.radio input + .overlay::after, .genericComponent.radioContainer.error input + .overlay::after, .genericComponent.switch input + .overlay::after {
  position: absolute;
  top: -2px;
  left: -2px;
  width: 20px;
  height: 20px;
  line-height: 20px;
  text-align: center;
  font-size: 16px;
  font-family: "Material Icons";
  content: "done";
  color: #ffffff;
  opacity: 0;
  transition: opacity 0.1s linear;
}
.genericComponent.checkbox input + .overlay::before, .genericComponent.radio input + .overlay::before, .genericComponent.radioContainer.error input + .overlay::before, .genericComponent.switch input + .overlay::before {
  content: "";
  position: absolute;
  top: -24px;
  left: -24px;
  width: var(--touch-target);
  height: var(--touch-target);
  border-radius: 50%;
  background: transparent;
  transition: background-color 0.1s linear;
  z-index: 1;
  pointer-events: none;
}
.genericComponent.checkbox input:focus + .overlay::before, .genericComponent.radio input:focus + .overlay::before, .genericComponent.radioContainer.error input:focus + .overlay::before, .genericComponent.switch input:focus + .overlay::before {
  background: rgba(64, 104, 225, 0.15);
}
.genericComponent.checkbox input:checked + .overlay, .genericComponent.radio input:checked + .overlay, .genericComponent.radioContainer.error input:checked + .overlay, .genericComponent.switch input:checked + .overlay {
  background: #4068e1;
  border-color: #4068e1;
}
.genericComponent.checkbox input:checked + .overlay::after, .genericComponent.radio input:checked + .overlay::after, .genericComponent.radioContainer.error input:checked + .overlay::after, .genericComponent.switch input:checked + .overlay::after {
  opacity: 1;
}
.genericComponent.checkbox .textContainer, .genericComponent.radio .textContainer, .genericComponent.radioContainer.error .textContainer, .genericComponent.switch .textContainer {
  display: flex;
  align-items: center;
  width: 100%; /* PR3222 TODO - Check implication of changing this from max-content */
}
.genericComponent.checkbox .textContainer label, .genericComponent.radio .textContainer label, .genericComponent.radioContainer.error .textContainer label, .genericComponent.switch .textContainer label {
  float: left;
  flex: 1; /* PR3227 TK - fill remaining row width so tapping anywhere right of the label text also selects the option */
  font-size: 12pt;
  font-weight: 400;
  letter-spacing: 0.5px;
  line-height: 20px;
  clear: both;
  display: block;
}
.genericComponent.checkbox .textContainer label::before, .genericComponent.radio .textContainer label::before, .genericComponent.radioContainer.error .textContainer label::before, .genericComponent.switch .textContainer label::before {
  display: block;
  content: "";
  height: 1px;
}
@-moz-document url-prefix() {
  .genericComponent.checkbox .textContainer label::before, .genericComponent.radio .textContainer label::before, .genericComponent.radioContainer.error .textContainer label::before, .genericComponent.switch .textContainer label::before {
    height: 0;
  }
}
.genericComponent.checkbox .textContainer label::after, .genericComponent.radio .textContainer label::after, .genericComponent.radioContainer.error .textContainer label::after, .genericComponent.switch .textContainer label::after {
  display: block;
  content: "";
  margin-bottom: -5px;
}
@-moz-document url-prefix() {
  .genericComponent.checkbox .textContainer label::after, .genericComponent.radio .textContainer label::after, .genericComponent.radioContainer.error .textContainer label::after, .genericComponent.switch .textContainer label::after {
    margin-bottom: -4px;
  }
}
.genericComponent.checkbox .textContainer label, .genericComponent.radio .textContainer label, .genericComponent.radioContainer.error .textContainer label, .genericComponent.switch .textContainer label {
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  padding-left: 5px;
  transition: color 0.1s linear;
}
.genericComponent.checkbox .textContainer label::after, .genericComponent.radio .textContainer label::after, .genericComponent.radioContainer.error .textContainer label::after, .genericComponent.switch .textContainer label::after {
  content: none;
}
.genericComponent.checkbox .textContainer label::before, .genericComponent.radio .textContainer label::before, .genericComponent.radioContainer.error .textContainer label::before, .genericComponent.switch .textContainer label::before {
  content: "";
  margin-top: -1px;
}
.genericComponent.checkbox .textContainer .helpText,
.genericComponent.checkbox .textContainer .errorText, .genericComponent.radio .textContainer .helpText, .genericComponent.radioContainer.error .textContainer .helpText,
.genericComponent.radio .textContainer .errorText,
.genericComponent.radioContainer.error .textContainer .errorText, .genericComponent.switch .textContainer .helpText,
.genericComponent.switch .textContainer .errorText {
  float: left;
  width: 100%;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.4px;
  line-height: 16px;
  clear: both;
  display: block;
}
.genericComponent.checkbox .textContainer .helpText::before,
.genericComponent.checkbox .textContainer .errorText::before, .genericComponent.radio .textContainer .helpText::before, .genericComponent.radioContainer.error .textContainer .helpText::before,
.genericComponent.radio .textContainer .errorText::before,
.genericComponent.radioContainer.error .textContainer .errorText::before, .genericComponent.switch .textContainer .helpText::before,
.genericComponent.switch .textContainer .errorText::before {
  display: block;
  content: "";
  height: 4px;
}
@-moz-document url-prefix() {
  .genericComponent.checkbox .textContainer .helpText::before,
  .genericComponent.checkbox .textContainer .errorText::before, .genericComponent.radio .textContainer .helpText::before, .genericComponent.radioContainer.error .textContainer .helpText::before,
  .genericComponent.radio .textContainer .errorText::before,
  .genericComponent.radioContainer.error .textContainer .errorText::before, .genericComponent.switch .textContainer .helpText::before,
  .genericComponent.switch .textContainer .errorText::before {
    height: 3px;
  }
}
.genericComponent.checkbox .textContainer .helpText::after,
.genericComponent.checkbox .textContainer .errorText::after, .genericComponent.radio .textContainer .helpText::after, .genericComponent.radioContainer.error .textContainer .helpText::after,
.genericComponent.radio .textContainer .errorText::after,
.genericComponent.radioContainer.error .textContainer .errorText::after, .genericComponent.switch .textContainer .helpText::after,
.genericComponent.switch .textContainer .errorText::after {
  display: block;
  content: "";
  margin-bottom: -4px;
}
@-moz-document url-prefix() {
  .genericComponent.checkbox .textContainer .helpText::after,
  .genericComponent.checkbox .textContainer .errorText::after, .genericComponent.radio .textContainer .helpText::after, .genericComponent.radioContainer.error .textContainer .helpText::after,
  .genericComponent.radio .textContainer .errorText::after,
  .genericComponent.radioContainer.error .textContainer .errorText::after, .genericComponent.switch .textContainer .helpText::after,
  .genericComponent.switch .textContainer .errorText::after {
    margin-bottom: -3px;
  }
}
.genericComponent.checkbox .textContainer .helpText,
.genericComponent.checkbox .textContainer .errorText, .genericComponent.radio .textContainer .helpText, .genericComponent.radioContainer.error .textContainer .helpText,
.genericComponent.radio .textContainer .errorText,
.genericComponent.radioContainer.error .textContainer .errorText, .genericComponent.switch .textContainer .helpText,
.genericComponent.switch .textContainer .errorText {
  color: #666666;
  padding-left: 5px;
  margin-top: -1px;
  transition: color 0.1s linear;
}
.genericComponent.checkbox .textContainer .helpText::after, .genericComponent.checkbox .textContainer .helpText::before,
.genericComponent.checkbox .textContainer .errorText::after,
.genericComponent.checkbox .textContainer .errorText::before, .genericComponent.radio .textContainer .helpText::after, .genericComponent.radioContainer.error .textContainer .helpText::after, .genericComponent.radio .textContainer .helpText::before, .genericComponent.radioContainer.error .textContainer .helpText::before,
.genericComponent.radio .textContainer .errorText::after,
.genericComponent.radioContainer.error .textContainer .errorText::after,
.genericComponent.radio .textContainer .errorText::before,
.genericComponent.radioContainer.error .textContainer .errorText::before, .genericComponent.switch .textContainer .helpText::after, .genericComponent.switch .textContainer .helpText::before,
.genericComponent.switch .textContainer .errorText::after,
.genericComponent.switch .textContainer .errorText::before {
  content: none;
}
.genericComponent.checkbox .textContainer .errorText, .genericComponent.radio .textContainer .errorText, .genericComponent.radioContainer.error .textContainer .errorText, .genericComponent.switch .textContainer .errorText {
  display: none;
}
.genericComponent.checkbox.disabled .rippleContainer, .genericComponent.radio.disabled .rippleContainer, .genericComponent.disabled.radioContainer.error .rippleContainer, .genericComponent.switch.disabled .rippleContainer {
  display: none;
}
.genericComponent.checkbox.disabled input, .genericComponent.radio.disabled input, .genericComponent.disabled.radioContainer.error input, .genericComponent.switch.disabled input {
  cursor: auto;
}
.genericComponent.checkbox.disabled input + .overlay, .genericComponent.radio.disabled input + .overlay, .genericComponent.disabled.radioContainer.error input + .overlay, .genericComponent.switch.disabled input + .overlay {
  background: #eeeeee;
  border-color: #d9d9d9;
}
.genericComponent.checkbox.disabled input + .overlay::before, .genericComponent.radio.disabled input + .overlay::before, .genericComponent.disabled.radioContainer.error input + .overlay::before, .genericComponent.switch.disabled input + .overlay::before {
  content: none;
}
.genericComponent.checkbox.disabled input:checked + .overlay, .genericComponent.radio.disabled input:checked + .overlay, .genericComponent.disabled.radioContainer.error input:checked + .overlay, .genericComponent.switch.disabled input:checked + .overlay {
  background: #d9d9d9;
}
.genericComponent.checkbox.disabled .textContainer label, .genericComponent.radio.disabled .textContainer label, .genericComponent.disabled.radioContainer.error .textContainer label, .genericComponent.switch.disabled .textContainer label {
  color: #999999;
  cursor: auto;
  -webkit-user-select: auto;
     -moz-user-select: auto;
          user-select: auto;
}
.genericComponent.checkbox.disabled .textContainer .helpText, .genericComponent.radio.disabled .textContainer .helpText, .genericComponent.disabled.radioContainer.error .textContainer .helpText, .genericComponent.switch.disabled .textContainer .helpText {
  color: #999999;
}
.genericComponent.checkbox.error input + .overlay, .genericComponent.radio.error input + .overlay, .genericComponent.error.radioContainer input + .overlay, .genericComponent.switch.error input + .overlay {
  background: #f9c7c7;
  border-color: #db6056;
}
.genericComponent.checkbox.error input:checked + .overlay, .genericComponent.radio.error input:checked + .overlay, .genericComponent.error.radioContainer input:checked + .overlay, .genericComponent.switch.error input:checked + .overlay {
  background: #db6056;
}
.genericComponent.checkbox.error .textContainer label, .genericComponent.radio.error .textContainer label, .genericComponent.error.radioContainer .textContainer label, .genericComponent.switch.error .textContainer label {
  color: #db6056;
  font-weight: 600;
}
.genericComponent.checkbox.error .textContainer .helpText,
.genericComponent.checkbox.error .textContainer .errorText, .genericComponent.radio.error .textContainer .helpText, .genericComponent.error.radioContainer .textContainer .helpText,
.genericComponent.radio.error .textContainer .errorText,
.genericComponent.error.radioContainer .textContainer .errorText, .genericComponent.switch.error .textContainer .helpText,
.genericComponent.switch.error .textContainer .errorText {
  color: #db6056;
}
.genericComponent.checkbox.error .textContainer .helpText, .genericComponent.radio.error .textContainer .helpText, .genericComponent.error.radioContainer .textContainer .helpText, .genericComponent.switch.error .textContainer .helpText {
  display: none;
}
.genericComponent.checkbox.error .textContainer .errorText, .genericComponent.radio.error .textContainer .errorText, .genericComponent.error.radioContainer .textContainer .errorText, .genericComponent.switch.error .textContainer .errorText {
  display: block;
}

@media only screen and (max-width: 960px) {
  .genericComponent.checkbox .rippleContainer, .genericComponent.radio .rippleContainer, .genericComponent.radioContainer.error .rippleContainer, .genericComponent.switch .rippleContainer {
    width: var(--touch-target);
    height: var(--touch-target);
    top: 0px;
    left: -14px;
  }
  .genericComponent.checkbox input, .genericComponent.radio input, .genericComponent.radioContainer.error input, .genericComponent.switch input {
    width: var(--touch-target);
    height: var(--touch-target);
  }
  .genericComponent.checkbox input + .overlay, .genericComponent.radio input + .overlay, .genericComponent.radioContainer.error input + .overlay, .genericComponent.switch input + .overlay {
    position: absolute;
    top: calc(var(--touch-target) / 3);
    left: calc(var(--touch-target) / 8);
  }
}
.genericComponent.radio input + .overlay, .genericComponent.radioContainer.error input + .overlay {
  border-radius: 50%;
}
.genericComponent.radio input + .overlay::after, .genericComponent.radioContainer.error input + .overlay::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #4068e1;
}
.genericComponent.radio input:checked + .overlay, .genericComponent.radioContainer.error input:checked + .overlay {
  background: #ffffff;
  border-color: #4068e1;
}
.genericComponent.radio.error input + .overlay, .genericComponent.error.radioContainer input + .overlay {
  background: #f9c7c7;
  border-color: #db6056;
}
.genericComponent.radio.error input + .overlay::after, .genericComponent.error.radioContainer input + .overlay::after {
  background: #db6056;
}
.genericComponent.radio.error input:checked + .overlay, .genericComponent.error.radioContainer input:checked + .overlay {
  background: #f9c7c7;
}

.radioContainer .errorText {
  display: none;
  width: 100%;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.4px;
  line-height: 16px;
  clear: both;
  display: block;
}
.radioContainer .errorText::before {
  display: block;
  content: "";
  height: 4px;
}
@-moz-document url-prefix() {
  .radioContainer .errorText::before {
    height: 3px;
  }
}
.radioContainer .errorText::after {
  display: block;
  content: "";
  margin-bottom: -4px;
}
@-moz-document url-prefix() {
  .radioContainer .errorText::after {
    margin-bottom: -3px;
  }
}
.radioContainer .errorText {
  color: #db6056;
  padding-left: 5px;
  margin-top: -1px;
  transition: color 0.1s linear;
}
.radioContainer .errorText::after, .radioContainer .errorText::before {
  content: none;
}
.radioContainer.error .errorText {
  display: block;
}
.radioContainer.success .errorText {
  display: none;
}

.genericComponent.switch .rippleContainer {
  left: 0;
  width: 64px;
  height: 30px;
  border-radius: 15px;
}
.genericComponent.switch input {
  width: 64px;
}
.genericComponent.switch input + .overlay {
  background: #cccccc;
  border: 0;
  width: 36px;
  height: 14px;
  border-radius: 7px;
  top: 17px;
}
.genericComponent.switch input + .overlay::after {
  opacity: 1;
  content: "";
  width: 20px;
  height: 20px;
  background: #999999;
  border-radius: 50%;
  box-shadow: 0px 1px 1.88px 0.12px rgba(0, 0, 0, 0.24), 0px 1px 2.94px 0.06px rgba(0, 0, 0, 0.16);
  left: 0;
  top: -3px;
  transition: left 0.1s ease;
}
.genericComponent.switch input + .overlay::before {
  top: -17px;
  left: -7px;
}
.genericComponent.switch input:checked + .overlay {
  background: rgba(64, 104, 225, 0.5);
}
.genericComponent.switch input:checked + .overlay::after {
  left: calc(100% - 20px);
  background: #4068e1;
}
.genericComponent.switch .textContainer {
  width: calc(100% - 64px);
}
.genericComponent.switch.disabled input + .overlay::after {
  background: #d9d9d9;
  box-shadow: none;
}
.genericComponent.switch.error input + .overlay {
  background: #cccccc;
}
.genericComponent.switch.error input + .overlay::after {
  background: #999999;
}
.genericComponent.switch.error input:checked + .overlay {
  background: rgba(219, 96, 86, 0.5);
}
.genericComponent.switch.error input:checked + .overlay::after {
  background: #db6056;
}

.mddtp-button {
  border: none;
  background-color: transparent;
  cursor: pointer;
  margin-right: 16px;
}
.mddtp-button:last-child {
  margin-right: 24px !important;
}

.mddtp-picker {
  opacity: 0;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transform-origin: 0 0;
  display: table;
  line-height: normal;
  z-index: 99999;
  transition: opacity 0.1s ease;
  transition: box-shadow 0.2s linear;
  box-shadow: 0px 39px 56.4px 3.6px rgba(0, 0, 0, 0.24), 0px 15px 79.38px 1.62px rgba(0, 0, 0, 0.16);
}
.mddtp-picker::before {
  content: "";
  position: fixed;
  top: -50vh;
  left: -50vw;
  right: -50vw;
  bottom: -50vh;
  background: rgba(0, 0, 0, 0.6);
}
.mddtp-picker .mddtp-picker__header {
  position: relative;
  background-color: #4068e1;
  padding-left: 24px;
  padding-right: 24px;
  padding-top: 20px;
  padding-bottom: 24px;
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
  min-width: 168px;
  box-sizing: border-box;
}
.mddtp-picker .mddtp-picker__header .mddtp-picker__subtitle {
  font-size: 16px;
  font-weight: 400;
  letter-spacing: 0.15px;
  line-height: 24px;
  clear: both;
  display: block;
}
.mddtp-picker .mddtp-picker__header .mddtp-picker__subtitle::before {
  display: block;
  content: "";
  margin-top: -2px;
}
.mddtp-picker .mddtp-picker__header .mddtp-picker__subtitle::after {
  display: block;
  content: "";
  margin-bottom: -6px;
}
.mddtp-picker .mddtp-picker__header .mddtp-picker__subtitle {
  font-weight: 600;
  margin-bottom: 5px;
}
.mddtp-picker .mddtp-picker__header .mddtp-picker__title {
  font-size: 34px;
  font-weight: 400;
  letter-spacing: 0.25px;
  line-height: 44px;
  clear: both;
  display: block;
}
.mddtp-picker .mddtp-picker__header .mddtp-picker__title::before {
  display: block;
  content: "";
  margin-top: -3px;
}
.mddtp-picker .mddtp-picker__header .mddtp-picker__title::after {
  display: block;
  content: "";
  margin-bottom: -9px;
}
.mddtp-picker .mddtp-picker__header .mddtp-picker__title, .mddtp-picker .mddtp-picker__header .mddtp-picker__subtitle {
  color: #83a2f2;
  transition: color 0.1s linear;
  cursor: pointer;
}
@media (hover: hover) and (pointer: fine) {
  .mddtp-picker .mddtp-picker__header .mddtp-picker__title:hover, .mddtp-picker .mddtp-picker__header .mddtp-picker__subtitle:hover {
    color: rgb(223.3211678832, 231.2408759124, 251.6788321168);
  }
}
.mddtp-picker .mddtp-picker__header .mddtp-picker__color--active {
  color: #ffffff;
}
@media (hover: hover) and (pointer: fine) {
  .mddtp-picker .mddtp-picker__header .mddtp-picker__color--active:hover {
    color: #ffffff;
  }
}
.mddtp-picker .mddtp-picker__body {
  position: relative;
  background-color: #ffffff;
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
}
.mddtp-picker .mddtp-picker__body .mddtp-picker__action {
  padding-top: 6px;
  padding-bottom: 6px;
  text-align: right;
  display: flex;
  justify-content: flex-end;
}
.mddtp-picker .mddtp-picker__header, .mddtp-picker .mddtp-picker__body {
  display: table-cell;
  vertical-align: top;
  height: 100%;
  position: relative;
}

.mddtp-picker-date .mddtp-picker__left {
  left: 4px;
}
.mddtp-picker-date .mddtp-picker__left::before {
  content: "";
  position: absolute;
  top: 0;
  left: -4px;
  bottom: 0;
  width: 4px;
  background: #ffffff;
}
.mddtp-picker-date .mddtp-picker__right {
  right: 4px;
}
.mddtp-picker-date .mddtp-picker__right::before {
  content: "";
  position: absolute;
  top: 0;
  right: -4px;
  bottom: 0;
  width: 4px;
  background: #ffffff;
}
.mddtp-picker-date .mddtp-picker__left, .mddtp-picker-date .mddtp-picker__right {
  position: absolute;
  top: 4px;
  margin: 0;
}

.mddtp-picker__body .mddtp-picker__viewHolder {
  width: 314px;
  overflow: hidden;
}
.mddtp-picker__body .mddtp-picker__viewHolder .mddtp-picker__views {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 0;
  width: 2000px;
}
.mddtp-picker__body .mddtp-picker__viewHolder .mddtp-picker__view {
  display: inline-block;
  width: 314px;
  text-align: center;
  transform: translate(-100%, 0);
  transition: 0.2s cubic-bezier(0.42, 0, 0.58, 1);
}
.mddtp-picker__body .mddtp-picker__viewHolder .mddtp-picker__view .mddtp-picker__month {
  display: inline-block;
  color: #666666;
  font-size: 12pt;
  font-weight: 400;
  letter-spacing: 0.5px;
  line-height: 20px;
  clear: both;
  display: block;
}
.mddtp-picker__body .mddtp-picker__viewHolder .mddtp-picker__view .mddtp-picker__month::before {
  display: block;
  content: "";
  height: 1px;
}
@-moz-document url-prefix() {
  .mddtp-picker__body .mddtp-picker__viewHolder .mddtp-picker__view .mddtp-picker__month::before {
    height: 0;
  }
}
.mddtp-picker__body .mddtp-picker__viewHolder .mddtp-picker__view .mddtp-picker__month::after {
  display: block;
  content: "";
  margin-bottom: -5px;
}
@-moz-document url-prefix() {
  .mddtp-picker__body .mddtp-picker__viewHolder .mddtp-picker__view .mddtp-picker__month::after {
    margin-bottom: -4px;
  }
}
.mddtp-picker__body .mddtp-picker__viewHolder .mddtp-picker__view .mddtp-picker__month {
  padding-top: 16px;
  padding-bottom: 16px;
  font-weight: 600;
}
.mddtp-picker__body .mddtp-picker__viewHolder .mddtp-picker__view--left {
  transform: translate(-200%, 0);
}
.mddtp-picker__body .mddtp-picker__viewHolder .mddtp-picker__view--right {
  transform: translate(0, 0);
}
.mddtp-picker__body .mddtp-picker__viewHolder .mddtp-picker__view--pause {
  transition: none;
}
.mddtp-picker__body .mddtp-picker__viewHolder .mddtp-picker__grid {
  padding: 8px 14px 0;
}
.mddtp-picker__body .mddtp-picker__viewHolder .mddtp-picker__grid .circleButton {
  font-size: 12pt;
  font-weight: 400;
  letter-spacing: 0.5px;
  line-height: 20px;
  clear: both;
  display: block;
}
.mddtp-picker__body .mddtp-picker__viewHolder .mddtp-picker__grid .circleButton::before {
  display: block;
  content: "";
  height: 1px;
}
@-moz-document url-prefix() {
  .mddtp-picker__body .mddtp-picker__viewHolder .mddtp-picker__grid .circleButton::before {
    height: 0;
  }
}
.mddtp-picker__body .mddtp-picker__viewHolder .mddtp-picker__grid .circleButton::after {
  display: block;
  content: "";
  margin-bottom: -5px;
}
@-moz-document url-prefix() {
  .mddtp-picker__body .mddtp-picker__viewHolder .mddtp-picker__grid .circleButton::after {
    margin-bottom: -4px;
  }
}
.mddtp-picker__body .mddtp-picker__viewHolder .mddtp-picker__grid .circleButton {
  float: none;
  display: inline-block;
  margin: 2px;
  vertical-align: middle;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  pointer-events: none;
  visibility: hidden;
  text-align: center;
}
@media (hover: hover) and (pointer: fine) {
  .mddtp-picker__body .mddtp-picker__viewHolder .mddtp-picker__grid .circleButton.primary:hover .inner {
    background: #4068e1;
  }
}
.mddtp-picker__body .mddtp-picker__viewHolder .mddtp-picker__grid .circleButton.primary .ripple {
  background: #4068e1;
}
.mddtp-picker__body .mddtp-picker__viewHolder .mddtp-picker__grid .circleButton .inner {
  width: 100%;
  height: 100%;
  padding: 0;
}
.mddtp-picker__body .mddtp-picker__viewHolder .mddtp-picker__grid .circleButton .inner div {
  display: inline-block;
  position: relative;
  z-index: 1;
  /* padding-left: 2px; PR3222 JO - Remove this as it was throwing the date number a touch out of alignment */
  padding-top: 8px;
}
.mddtp-picker__body .mddtp-picker__viewHolder .mddtp-picker__grid .circleButton.mddtp-picker__cell, .mddtp-picker__body .mddtp-picker__viewHolder .mddtp-picker__grid .circleButton.mddtp-picker__cell--disabled {
  visibility: visible;
}
.mddtp-picker__body .mddtp-picker__viewHolder .mddtp-picker__grid .circleButton.mddtp-picker__cell {
  pointer-events: all;
  cursor: pointer;
}
.mddtp-picker__body .mddtp-picker__viewHolder .mddtp-picker__grid .circleButton.mddtp-picker__cell--today:not(.primary) .inner {
  color: #4068e1;
  font-weight: 600;
}
.mddtp-picker__body .mddtp-picker__viewHolder .mddtp-picker__grid .mddtp-picker__tr {
  padding: 2px 0;
}
.mddtp-picker__body .mddtp-picker__viewHolder .mddtp-picker__grid .mddtp-picker__th a {
  color: rgba(0, 0, 0, 0.54);
}

.mddtp-picker__years {
  position: absolute;
  left: 0;
  top: 0;
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
  height: calc(100% - 64px);
  text-align: center;
  overflow: auto;
  background: #ffffff;
  z-index: 1;
}
.mddtp-picker__years .button {
  display: block;
  width: 100%;
  height: 48px;
  padding: 0;
  margin: 0;
  cursor: pointer;
}
.mddtp-picker__years .button > .inner {
  height: 100%;
  padding-top: 15px;
  padding-bottom: 15px;
  padding-left: 16px;
  padding-right: 16px;
  border-radius: 0;
}
.mddtp-picker__years .button > .inner > .icon {
  margin-right: 12px;
}
.mddtp-picker__years .button > .inner > .label {
  margin-left: 0;
}

.mddtp-picker__years--invisible {
  display: none;
}

.mddtp-picker-time .mddtp-picker__header {
  width: auto;
  min-width: 185px;
  text-align: right;
  padding-left: 18px;
  padding-right: 18px;
  vertical-align: middle;
}
.mddtp-picker-time .mddtp-picker__header .mddtp-picker__title {
  font-size: 59px;
  font-weight: 300;
  letter-spacing: -0.5px;
  line-height: 76px;
  clear: both;
  display: block;
}
.mddtp-picker-time .mddtp-picker__header .mddtp-picker__title::before {
  display: block;
  content: "";
  margin-top: -14px;
}
.mddtp-picker-time .mddtp-picker__header .mddtp-picker__title::after {
  display: block;
  content: "";
  margin-bottom: -14px;
}
.mddtp-picker-time .mddtp-picker__header .mddtp-picker__title {
  font-weight: 400;
  text-align: right;
  margin-top: -45px;
}
.mddtp-picker-time .mddtp-picker__header .mddtp-picker__title::before {
  content: none;
}
@media (hover: hover) and (pointer: fine) {
  .mddtp-picker-time .mddtp-picker__header .mddtp-picker__title:hover {
    color: #83a2f2;
  }
}
.mddtp-picker-time .mddtp-picker__header .mddtp-picker__title span {
  transition: color 0.1s linear;
}
@media (hover: hover) and (pointer: fine) {
  .mddtp-picker-time .mddtp-picker__header .mddtp-picker__title span:hover:not(.mddtp-picker__color--active):not(#mddtp-time__dotSpan) {
    color: rgb(223.3211678832, 231.2408759124, 251.6788321168);
  }
}
.mddtp-picker-time .mddtp-picker__header .mddtp-picker__title #mddtp-time__dotSpan {
  cursor: default;
}
.mddtp-picker-time .mddtp-picker__header .mddtp-picker__subtitle {
  text-align: right;
  padding-right: 1px;
  margin-top: 10px;
  cursor: default;
}
@media (hover: hover) and (pointer: fine) {
  .mddtp-picker-time .mddtp-picker__header .mddtp-picker__subtitle:hover {
    color: #83a2f2;
  }
}
.mddtp-picker-time .mddtp-picker__header .mddtp-picker__subtitle div {
  display: inline-block;
  width: auto;
  text-transform: uppercase;
  margin-right: 16px;
  cursor: pointer;
  transition: color 0.1s linear;
}
.mddtp-picker-time .mddtp-picker__header .mddtp-picker__subtitle div:last-child {
  margin-right: 0;
}
@media (hover: hover) and (pointer: fine) {
  .mddtp-picker-time .mddtp-picker__header .mddtp-picker__subtitle div:hover:not(.mddtp-picker__color--active) {
    color: rgb(223.3211678832, 231.2408759124, 251.6788321168);
  }
}
.mddtp-picker__circularHolder {
  position: relative;
  width: 264px;
  height: 264px;
  margin-left: 24px;
  margin-right: 24px;
  margin-top: 32px;
  margin-bottom: 8px;
  border-radius: 50%;
  background-color: #eeeeee;
}

.mddtp-picker__circularView {
  position: absolute;
  width: 100%;
  height: 100%;
}
.mddtp-picker__circularView .mddtp-picker__cell {
  position: absolute;
  width: 50%;
  top: calc(50% - 18px);
  left: 50%;
  text-align: right;
  transform-origin: left center;
}
.mddtp-picker__circularView .mddtp-picker__cell span {
  display: inline-block;
  cursor: pointer;
  color: #666666;
  border-radius: 50%;
  width: 36px;
  height: 36px;
  line-height: 36px;
  text-align: center;
  margin-right: 8px;
  transition: color 0.1s linear, background-color 0.1s linear;
}
@media (hover: hover) and (pointer: fine) {
  .mddtp-picker__circularView .mddtp-picker__cell span:hover {
    background: #d9d9d9;
  }
}
.mddtp-picker__circularView .mddtp-picker__cell--selected span {
  transition: color 0.1s 0.15s linear, background-color 0.1s linear;
  color: #ffffff;
  background: transparent !important;
}

.mddtp-picker__circularView--hidden {
  display: none;
}

.mddtp-picker__circle--fake {
  position: absolute;
  border-radius: 50%;
  height: 36px;
  width: 36px;
  cursor: move;
  cursor: grab;
}
.mddtp-picker__circle--fake.is-pointer-down, .mddtp-picker__circle--fake:active {
  cursor: grabbing;
}

.mddtp-picker__selection {
  position: absolute;
  left: 50%;
  top: calc(50% - 18px);
  width: 50%;
  font-size: 0;
  transform-origin: left center;
  transition: 0.3s cubic-bezier(0.42, 0, 0.58, 1);
}
.mddtp-picker__selection.noTransition {
  transition: none;
}
.mddtp-picker__selection span {
  display: inline-block;
  background-color: #4068e1;
  height: 2px;
  vertical-align: middle;
}
.mddtp-picker__selection span.mddtp-picker__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}
.mddtp-picker__selection span.mddtp-picker__line {
  width: calc(100% - 52px);
}
.mddtp-picker__selection span.mddtp-picker__circle {
  border-radius: 50%;
  height: 36px;
  width: 36px;
}

.mddtp-picker__selection--quick {
  transition: none;
}

.mddtp-picker__cell {
  font-size: 13px;
}

.mddtp-picker__cell--rotate24 {
  width: 40% !important;
  opacity: 0.8;
  font-size: 80%;
}

.mddtp-picker__cell--rotate-1 {
  transform: rotate(-87deg);
}
.mddtp-picker__cell--rotate-1 span:not(.mddtp-picker__line) {
  transform: rotate(87deg);
}

.mddtp-picker__cell--rotate-2 {
  transform: rotate(-84deg);
}
.mddtp-picker__cell--rotate-2 span:not(.mddtp-picker__line) {
  transform: rotate(84deg);
}

.mddtp-picker__cell--rotate-3 {
  transform: rotate(-81deg);
}
.mddtp-picker__cell--rotate-3 span:not(.mddtp-picker__line) {
  transform: rotate(81deg);
}

.mddtp-picker__cell--rotate-4 {
  transform: rotate(-78deg);
}
.mddtp-picker__cell--rotate-4 span:not(.mddtp-picker__line) {
  transform: rotate(78deg);
}

.mddtp-picker__cell--rotate-5 {
  transform: rotate(-75deg);
}
.mddtp-picker__cell--rotate-5 span:not(.mddtp-picker__line) {
  transform: rotate(75deg);
}

.mddtp-picker__cell--rotate-6 {
  transform: rotate(-72deg);
}
.mddtp-picker__cell--rotate-6 span:not(.mddtp-picker__line) {
  transform: rotate(72deg);
}

.mddtp-picker__cell--rotate-7 {
  transform: rotate(-69deg);
}
.mddtp-picker__cell--rotate-7 span:not(.mddtp-picker__line) {
  transform: rotate(69deg);
}

.mddtp-picker__cell--rotate-8 {
  transform: rotate(-66deg);
}
.mddtp-picker__cell--rotate-8 span:not(.mddtp-picker__line) {
  transform: rotate(66deg);
}

.mddtp-picker__cell--rotate-9 {
  transform: rotate(-63deg);
}
.mddtp-picker__cell--rotate-9 span:not(.mddtp-picker__line) {
  transform: rotate(63deg);
}

.mddtp-picker__cell--rotate-10 {
  transform: rotate(-60deg);
}
.mddtp-picker__cell--rotate-10 span:not(.mddtp-picker__line) {
  transform: rotate(60deg);
}

.mddtp-picker__cell--rotate-11 {
  transform: rotate(-57deg);
}
.mddtp-picker__cell--rotate-11 span:not(.mddtp-picker__line) {
  transform: rotate(57deg);
}

.mddtp-picker__cell--rotate-12 {
  transform: rotate(-54deg);
}
.mddtp-picker__cell--rotate-12 span:not(.mddtp-picker__line) {
  transform: rotate(54deg);
}

.mddtp-picker__cell--rotate-13 {
  transform: rotate(-51deg);
}
.mddtp-picker__cell--rotate-13 span:not(.mddtp-picker__line) {
  transform: rotate(51deg);
}

.mddtp-picker__cell--rotate-14 {
  transform: rotate(-48deg);
}
.mddtp-picker__cell--rotate-14 span:not(.mddtp-picker__line) {
  transform: rotate(48deg);
}

.mddtp-picker__cell--rotate-15 {
  transform: rotate(-45deg);
}
.mddtp-picker__cell--rotate-15 span:not(.mddtp-picker__line) {
  transform: rotate(45deg);
}

.mddtp-picker__cell--rotate-16 {
  transform: rotate(-42deg);
}
.mddtp-picker__cell--rotate-16 span:not(.mddtp-picker__line) {
  transform: rotate(42deg);
}

.mddtp-picker__cell--rotate-17 {
  transform: rotate(-39deg);
}
.mddtp-picker__cell--rotate-17 span:not(.mddtp-picker__line) {
  transform: rotate(39deg);
}

.mddtp-picker__cell--rotate-18 {
  transform: rotate(-36deg);
}
.mddtp-picker__cell--rotate-18 span:not(.mddtp-picker__line) {
  transform: rotate(36deg);
}

.mddtp-picker__cell--rotate-19 {
  transform: rotate(-33deg);
}
.mddtp-picker__cell--rotate-19 span:not(.mddtp-picker__line) {
  transform: rotate(33deg);
}

.mddtp-picker__cell--rotate-20 {
  transform: rotate(-30deg);
}
.mddtp-picker__cell--rotate-20 span:not(.mddtp-picker__line) {
  transform: rotate(30deg);
}

.mddtp-picker__cell--rotate-21 {
  transform: rotate(-27deg);
}
.mddtp-picker__cell--rotate-21 span:not(.mddtp-picker__line) {
  transform: rotate(27deg);
}

.mddtp-picker__cell--rotate-22 {
  transform: rotate(-24deg);
}
.mddtp-picker__cell--rotate-22 span:not(.mddtp-picker__line) {
  transform: rotate(24deg);
}

.mddtp-picker__cell--rotate-23 {
  transform: rotate(-21deg);
}
.mddtp-picker__cell--rotate-23 span:not(.mddtp-picker__line) {
  transform: rotate(21deg);
}

.mddtp-picker__cell--rotate-24 {
  transform: rotate(-18deg);
}
.mddtp-picker__cell--rotate-24 span:not(.mddtp-picker__line) {
  transform: rotate(18deg);
}

.mddtp-picker__cell--rotate-25 {
  transform: rotate(-15deg);
}
.mddtp-picker__cell--rotate-25 span:not(.mddtp-picker__line) {
  transform: rotate(15deg);
}

.mddtp-picker__cell--rotate-26 {
  transform: rotate(-12deg);
}
.mddtp-picker__cell--rotate-26 span:not(.mddtp-picker__line) {
  transform: rotate(12deg);
}

.mddtp-picker__cell--rotate-27 {
  transform: rotate(-9deg);
}
.mddtp-picker__cell--rotate-27 span:not(.mddtp-picker__line) {
  transform: rotate(9deg);
}

.mddtp-picker__cell--rotate-28 {
  transform: rotate(-6deg);
}
.mddtp-picker__cell--rotate-28 span:not(.mddtp-picker__line) {
  transform: rotate(6deg);
}

.mddtp-picker__cell--rotate-29 {
  transform: rotate(-3deg);
}
.mddtp-picker__cell--rotate-29 span:not(.mddtp-picker__line) {
  transform: rotate(3deg);
}

.mddtp-picker__cell--rotate-30 {
  transform: rotate(0deg);
}
.mddtp-picker__cell--rotate-30 span:not(.mddtp-picker__line) {
  transform: rotate(0deg);
}

.mddtp-picker__cell--rotate-31 {
  transform: rotate(3deg);
}
.mddtp-picker__cell--rotate-31 span:not(.mddtp-picker__line) {
  transform: rotate(-3deg);
}

.mddtp-picker__cell--rotate-32 {
  transform: rotate(6deg);
}
.mddtp-picker__cell--rotate-32 span:not(.mddtp-picker__line) {
  transform: rotate(-6deg);
}

.mddtp-picker__cell--rotate-33 {
  transform: rotate(9deg);
}
.mddtp-picker__cell--rotate-33 span:not(.mddtp-picker__line) {
  transform: rotate(-9deg);
}

.mddtp-picker__cell--rotate-34 {
  transform: rotate(12deg);
}
.mddtp-picker__cell--rotate-34 span:not(.mddtp-picker__line) {
  transform: rotate(-12deg);
}

.mddtp-picker__cell--rotate-35 {
  transform: rotate(15deg);
}
.mddtp-picker__cell--rotate-35 span:not(.mddtp-picker__line) {
  transform: rotate(-15deg);
}

.mddtp-picker__cell--rotate-36 {
  transform: rotate(18deg);
}
.mddtp-picker__cell--rotate-36 span:not(.mddtp-picker__line) {
  transform: rotate(-18deg);
}

.mddtp-picker__cell--rotate-37 {
  transform: rotate(21deg);
}
.mddtp-picker__cell--rotate-37 span:not(.mddtp-picker__line) {
  transform: rotate(-21deg);
}

.mddtp-picker__cell--rotate-38 {
  transform: rotate(24deg);
}
.mddtp-picker__cell--rotate-38 span:not(.mddtp-picker__line) {
  transform: rotate(-24deg);
}

.mddtp-picker__cell--rotate-39 {
  transform: rotate(27deg);
}
.mddtp-picker__cell--rotate-39 span:not(.mddtp-picker__line) {
  transform: rotate(-27deg);
}

.mddtp-picker__cell--rotate-40 {
  transform: rotate(30deg);
}
.mddtp-picker__cell--rotate-40 span:not(.mddtp-picker__line) {
  transform: rotate(-30deg);
}

.mddtp-picker__cell--rotate-41 {
  transform: rotate(33deg);
}
.mddtp-picker__cell--rotate-41 span:not(.mddtp-picker__line) {
  transform: rotate(-33deg);
}

.mddtp-picker__cell--rotate-42 {
  transform: rotate(36deg);
}
.mddtp-picker__cell--rotate-42 span:not(.mddtp-picker__line) {
  transform: rotate(-36deg);
}

.mddtp-picker__cell--rotate-43 {
  transform: rotate(39deg);
}
.mddtp-picker__cell--rotate-43 span:not(.mddtp-picker__line) {
  transform: rotate(-39deg);
}

.mddtp-picker__cell--rotate-44 {
  transform: rotate(42deg);
}
.mddtp-picker__cell--rotate-44 span:not(.mddtp-picker__line) {
  transform: rotate(-42deg);
}

.mddtp-picker__cell--rotate-45 {
  transform: rotate(45deg);
}
.mddtp-picker__cell--rotate-45 span:not(.mddtp-picker__line) {
  transform: rotate(-45deg);
}

.mddtp-picker__cell--rotate-46 {
  transform: rotate(48deg);
}
.mddtp-picker__cell--rotate-46 span:not(.mddtp-picker__line) {
  transform: rotate(-48deg);
}

.mddtp-picker__cell--rotate-47 {
  transform: rotate(51deg);
}
.mddtp-picker__cell--rotate-47 span:not(.mddtp-picker__line) {
  transform: rotate(-51deg);
}

.mddtp-picker__cell--rotate-48 {
  transform: rotate(54deg);
}
.mddtp-picker__cell--rotate-48 span:not(.mddtp-picker__line) {
  transform: rotate(-54deg);
}

.mddtp-picker__cell--rotate-49 {
  transform: rotate(57deg);
}
.mddtp-picker__cell--rotate-49 span:not(.mddtp-picker__line) {
  transform: rotate(-57deg);
}

.mddtp-picker__cell--rotate-50 {
  transform: rotate(60deg);
}
.mddtp-picker__cell--rotate-50 span:not(.mddtp-picker__line) {
  transform: rotate(-60deg);
}

.mddtp-picker__cell--rotate-51 {
  transform: rotate(63deg);
}
.mddtp-picker__cell--rotate-51 span:not(.mddtp-picker__line) {
  transform: rotate(-63deg);
}

.mddtp-picker__cell--rotate-52 {
  transform: rotate(66deg);
}
.mddtp-picker__cell--rotate-52 span:not(.mddtp-picker__line) {
  transform: rotate(-66deg);
}

.mddtp-picker__cell--rotate-53 {
  transform: rotate(69deg);
}
.mddtp-picker__cell--rotate-53 span:not(.mddtp-picker__line) {
  transform: rotate(-69deg);
}

.mddtp-picker__cell--rotate-54 {
  transform: rotate(72deg);
}
.mddtp-picker__cell--rotate-54 span:not(.mddtp-picker__line) {
  transform: rotate(-72deg);
}

.mddtp-picker__cell--rotate-55 {
  transform: rotate(75deg);
}
.mddtp-picker__cell--rotate-55 span:not(.mddtp-picker__line) {
  transform: rotate(-75deg);
}

.mddtp-picker__cell--rotate-56 {
  transform: rotate(78deg);
}
.mddtp-picker__cell--rotate-56 span:not(.mddtp-picker__line) {
  transform: rotate(-78deg);
}

.mddtp-picker__cell--rotate-57 {
  transform: rotate(81deg);
}
.mddtp-picker__cell--rotate-57 span:not(.mddtp-picker__line) {
  transform: rotate(-81deg);
}

.mddtp-picker__cell--rotate-58 {
  transform: rotate(84deg);
}
.mddtp-picker__cell--rotate-58 span:not(.mddtp-picker__line) {
  transform: rotate(-84deg);
}

.mddtp-picker__cell--rotate-59 {
  transform: rotate(87deg);
}
.mddtp-picker__cell--rotate-59 span:not(.mddtp-picker__line) {
  transform: rotate(-87deg);
}

.mddtp-picker__cell--rotate-60 {
  transform: rotate(90deg);
}
.mddtp-picker__cell--rotate-60 span:not(.mddtp-picker__line) {
  transform: rotate(-90deg);
}

.mddtp-picker__cell--rotate-61 {
  transform: rotate(93deg);
}
.mddtp-picker__cell--rotate-61 span:not(.mddtp-picker__line) {
  transform: rotate(-93deg);
}

.mddtp-picker__cell--rotate-62 {
  transform: rotate(96deg);
}
.mddtp-picker__cell--rotate-62 span:not(.mddtp-picker__line) {
  transform: rotate(-96deg);
}

.mddtp-picker__cell--rotate-63 {
  transform: rotate(99deg);
}
.mddtp-picker__cell--rotate-63 span:not(.mddtp-picker__line) {
  transform: rotate(-99deg);
}

.mddtp-picker__cell--rotate-64 {
  transform: rotate(102deg);
}
.mddtp-picker__cell--rotate-64 span:not(.mddtp-picker__line) {
  transform: rotate(-102deg);
}

.mddtp-picker__cell--rotate-65 {
  transform: rotate(105deg);
}
.mddtp-picker__cell--rotate-65 span:not(.mddtp-picker__line) {
  transform: rotate(-105deg);
}

.mddtp-picker__cell--rotate-66 {
  transform: rotate(108deg);
}
.mddtp-picker__cell--rotate-66 span:not(.mddtp-picker__line) {
  transform: rotate(-108deg);
}

.mddtp-picker__cell--rotate-67 {
  transform: rotate(111deg);
}
.mddtp-picker__cell--rotate-67 span:not(.mddtp-picker__line) {
  transform: rotate(-111deg);
}

.mddtp-picker__cell--rotate-68 {
  transform: rotate(114deg);
}
.mddtp-picker__cell--rotate-68 span:not(.mddtp-picker__line) {
  transform: rotate(-114deg);
}

.mddtp-picker__cell--rotate-69 {
  transform: rotate(117deg);
}
.mddtp-picker__cell--rotate-69 span:not(.mddtp-picker__line) {
  transform: rotate(-117deg);
}

.mddtp-picker__cell--rotate-70 {
  transform: rotate(120deg);
}
.mddtp-picker__cell--rotate-70 span:not(.mddtp-picker__line) {
  transform: rotate(-120deg);
}

.mddtp-picker__cell--rotate-71 {
  transform: rotate(123deg);
}
.mddtp-picker__cell--rotate-71 span:not(.mddtp-picker__line) {
  transform: rotate(-123deg);
}

.mddtp-picker__cell--rotate-72 {
  transform: rotate(126deg);
}
.mddtp-picker__cell--rotate-72 span:not(.mddtp-picker__line) {
  transform: rotate(-126deg);
}

.mddtp-picker__cell--rotate-73 {
  transform: rotate(129deg);
}
.mddtp-picker__cell--rotate-73 span:not(.mddtp-picker__line) {
  transform: rotate(-129deg);
}

.mddtp-picker__cell--rotate-74 {
  transform: rotate(132deg);
}
.mddtp-picker__cell--rotate-74 span:not(.mddtp-picker__line) {
  transform: rotate(-132deg);
}

.mddtp-picker__cell--rotate-75 {
  transform: rotate(135deg);
}
.mddtp-picker__cell--rotate-75 span:not(.mddtp-picker__line) {
  transform: rotate(-135deg);
}

.mddtp-picker__cell--rotate-76 {
  transform: rotate(138deg);
}
.mddtp-picker__cell--rotate-76 span:not(.mddtp-picker__line) {
  transform: rotate(-138deg);
}

.mddtp-picker__cell--rotate-77 {
  transform: rotate(141deg);
}
.mddtp-picker__cell--rotate-77 span:not(.mddtp-picker__line) {
  transform: rotate(-141deg);
}

.mddtp-picker__cell--rotate-78 {
  transform: rotate(144deg);
}
.mddtp-picker__cell--rotate-78 span:not(.mddtp-picker__line) {
  transform: rotate(-144deg);
}

.mddtp-picker__cell--rotate-79 {
  transform: rotate(147deg);
}
.mddtp-picker__cell--rotate-79 span:not(.mddtp-picker__line) {
  transform: rotate(-147deg);
}

.mddtp-picker__cell--rotate-80 {
  transform: rotate(150deg);
}
.mddtp-picker__cell--rotate-80 span:not(.mddtp-picker__line) {
  transform: rotate(-150deg);
}

.mddtp-picker__cell--rotate-81 {
  transform: rotate(153deg);
}
.mddtp-picker__cell--rotate-81 span:not(.mddtp-picker__line) {
  transform: rotate(-153deg);
}

.mddtp-picker__cell--rotate-82 {
  transform: rotate(156deg);
}
.mddtp-picker__cell--rotate-82 span:not(.mddtp-picker__line) {
  transform: rotate(-156deg);
}

.mddtp-picker__cell--rotate-83 {
  transform: rotate(159deg);
}
.mddtp-picker__cell--rotate-83 span:not(.mddtp-picker__line) {
  transform: rotate(-159deg);
}

.mddtp-picker__cell--rotate-84 {
  transform: rotate(162deg);
}
.mddtp-picker__cell--rotate-84 span:not(.mddtp-picker__line) {
  transform: rotate(-162deg);
}

.mddtp-picker__cell--rotate-85 {
  transform: rotate(165deg);
}
.mddtp-picker__cell--rotate-85 span:not(.mddtp-picker__line) {
  transform: rotate(-165deg);
}

.mddtp-picker__cell--rotate-86 {
  transform: rotate(168deg);
}
.mddtp-picker__cell--rotate-86 span:not(.mddtp-picker__line) {
  transform: rotate(-168deg);
}

.mddtp-picker__cell--rotate-87 {
  transform: rotate(171deg);
}
.mddtp-picker__cell--rotate-87 span:not(.mddtp-picker__line) {
  transform: rotate(-171deg);
}

.mddtp-picker__cell--rotate-88 {
  transform: rotate(174deg);
}
.mddtp-picker__cell--rotate-88 span:not(.mddtp-picker__line) {
  transform: rotate(-174deg);
}

.mddtp-picker__cell--rotate-89 {
  transform: rotate(177deg);
}
.mddtp-picker__cell--rotate-89 span:not(.mddtp-picker__line) {
  transform: rotate(-177deg);
}

.mddtp-picker__cell--rotate-90 {
  transform: rotate(180deg);
}
.mddtp-picker__cell--rotate-90 span:not(.mddtp-picker__line) {
  transform: rotate(-180deg);
}

.mddtp-picker__cell--rotate-91 {
  transform: rotate(183deg);
}
.mddtp-picker__cell--rotate-91 span:not(.mddtp-picker__line) {
  transform: rotate(-183deg);
}

.mddtp-picker__cell--rotate-92 {
  transform: rotate(186deg);
}
.mddtp-picker__cell--rotate-92 span:not(.mddtp-picker__line) {
  transform: rotate(-186deg);
}

.mddtp-picker__cell--rotate-93 {
  transform: rotate(189deg);
}
.mddtp-picker__cell--rotate-93 span:not(.mddtp-picker__line) {
  transform: rotate(-189deg);
}

.mddtp-picker__cell--rotate-94 {
  transform: rotate(192deg);
}
.mddtp-picker__cell--rotate-94 span:not(.mddtp-picker__line) {
  transform: rotate(-192deg);
}

.mddtp-picker__cell--rotate-95 {
  transform: rotate(195deg);
}
.mddtp-picker__cell--rotate-95 span:not(.mddtp-picker__line) {
  transform: rotate(-195deg);
}

.mddtp-picker__cell--rotate-96 {
  transform: rotate(198deg);
}
.mddtp-picker__cell--rotate-96 span:not(.mddtp-picker__line) {
  transform: rotate(-198deg);
}

.mddtp-picker__cell--rotate-97 {
  transform: rotate(201deg);
}
.mddtp-picker__cell--rotate-97 span:not(.mddtp-picker__line) {
  transform: rotate(-201deg);
}

.mddtp-picker__cell--rotate-98 {
  transform: rotate(204deg);
}
.mddtp-picker__cell--rotate-98 span:not(.mddtp-picker__line) {
  transform: rotate(-204deg);
}

.mddtp-picker__cell--rotate-99 {
  transform: rotate(207deg);
}
.mddtp-picker__cell--rotate-99 span:not(.mddtp-picker__line) {
  transform: rotate(-207deg);
}

.mddtp-picker__cell--rotate-100 {
  transform: rotate(210deg);
}
.mddtp-picker__cell--rotate-100 span:not(.mddtp-picker__line) {
  transform: rotate(-210deg);
}

.mddtp-picker__cell--rotate-101 {
  transform: rotate(213deg);
}
.mddtp-picker__cell--rotate-101 span:not(.mddtp-picker__line) {
  transform: rotate(-213deg);
}

.mddtp-picker__cell--rotate-102 {
  transform: rotate(216deg);
}
.mddtp-picker__cell--rotate-102 span:not(.mddtp-picker__line) {
  transform: rotate(-216deg);
}

.mddtp-picker__cell--rotate-103 {
  transform: rotate(219deg);
}
.mddtp-picker__cell--rotate-103 span:not(.mddtp-picker__line) {
  transform: rotate(-219deg);
}

.mddtp-picker__cell--rotate-104 {
  transform: rotate(222deg);
}
.mddtp-picker__cell--rotate-104 span:not(.mddtp-picker__line) {
  transform: rotate(-222deg);
}

.mddtp-picker__cell--rotate-105 {
  transform: rotate(225deg);
}
.mddtp-picker__cell--rotate-105 span:not(.mddtp-picker__line) {
  transform: rotate(-225deg);
}

.mddtp-picker__cell--rotate-106 {
  transform: rotate(228deg);
}
.mddtp-picker__cell--rotate-106 span:not(.mddtp-picker__line) {
  transform: rotate(-228deg);
}

.mddtp-picker__cell--rotate-107 {
  transform: rotate(231deg);
}
.mddtp-picker__cell--rotate-107 span:not(.mddtp-picker__line) {
  transform: rotate(-231deg);
}

.mddtp-picker__cell--rotate-108 {
  transform: rotate(234deg);
}
.mddtp-picker__cell--rotate-108 span:not(.mddtp-picker__line) {
  transform: rotate(-234deg);
}

.mddtp-picker__cell--rotate-109 {
  transform: rotate(237deg);
}
.mddtp-picker__cell--rotate-109 span:not(.mddtp-picker__line) {
  transform: rotate(-237deg);
}

.mddtp-picker__cell--rotate-110 {
  transform: rotate(240deg);
}
.mddtp-picker__cell--rotate-110 span:not(.mddtp-picker__line) {
  transform: rotate(-240deg);
}

.mddtp-picker__cell--rotate-111 {
  transform: rotate(243deg);
}
.mddtp-picker__cell--rotate-111 span:not(.mddtp-picker__line) {
  transform: rotate(-243deg);
}

.mddtp-picker__cell--rotate-112 {
  transform: rotate(246deg);
}
.mddtp-picker__cell--rotate-112 span:not(.mddtp-picker__line) {
  transform: rotate(-246deg);
}

.mddtp-picker__cell--rotate-113 {
  transform: rotate(249deg);
}
.mddtp-picker__cell--rotate-113 span:not(.mddtp-picker__line) {
  transform: rotate(-249deg);
}

.mddtp-picker__cell--rotate-114 {
  transform: rotate(252deg);
}
.mddtp-picker__cell--rotate-114 span:not(.mddtp-picker__line) {
  transform: rotate(-252deg);
}

.mddtp-picker__cell--rotate-115 {
  transform: rotate(255deg);
}
.mddtp-picker__cell--rotate-115 span:not(.mddtp-picker__line) {
  transform: rotate(-255deg);
}

.mddtp-picker__cell--rotate-116 {
  transform: rotate(258deg);
}
.mddtp-picker__cell--rotate-116 span:not(.mddtp-picker__line) {
  transform: rotate(-258deg);
}

.mddtp-picker__cell--rotate-117 {
  transform: rotate(261deg);
}
.mddtp-picker__cell--rotate-117 span:not(.mddtp-picker__line) {
  transform: rotate(-261deg);
}

.mddtp-picker__cell--rotate-118 {
  transform: rotate(264deg);
}
.mddtp-picker__cell--rotate-118 span:not(.mddtp-picker__line) {
  transform: rotate(-264deg);
}

.mddtp-picker__cell--rotate-119 {
  transform: rotate(267deg);
}
.mddtp-picker__cell--rotate-119 span:not(.mddtp-picker__line) {
  transform: rotate(-267deg);
}

.mddtp-picker__cell--rotate-120 {
  transform: rotate(270deg);
}
.mddtp-picker__cell--rotate-120 span:not(.mddtp-picker__line) {
  transform: rotate(-270deg);
}

.mddtp-picker.zoomOut, .mddtp-picker__viewHolder.zoomOut, .mddtp-picker__years.zoomOut {
  opacity: 0 !important;
}

.mddtp-picker.animated, .mddtp-picker__viewHolder.animated, .mddtp-picker__years.animated {
  opacity: 1;
}

.dateTimePicker.input {
  width: 275px;
}

@media screen and (max-device-width: 767px) {
  .dateTimePicker.input {
    width: 100%;
  }
}
@media screen and (max-device-width: 640px) and (orientation: portrait) {
  .mddtp-picker {
    display: block;
  }
  .mddtp-picker .mddtp-picker__header .mddtp-picker__title, .mddtp-picker .mddtp-picker__header .mddtp-picker__subtitle {
    margin: 0;
  }
  .mddtp-picker .mddtp-picker__header .mddtp-picker__title span {
    display: inline-block;
  }
  .mddtp-picker .mddtp-picker__header {
    display: block;
    height: 100%;
    width: 100%;
  }
  .mddtp-picker .mddtp-picker__body {
    display: block;
    height: 100%;
    width: 100%;
  }
  .mddtp-picker.mddtp-picker-date .mddtp-picker__title div {
    display: inline-block;
  }
  .mddtp-picker.mddtp-picker-date .mddtp-picker__title div#mddtp-date__titleMonth {
    margin-left: 8px;
  }
}
@media screen and (max-width: 640px) and (orientation: portrait) {
  .mddtp-picker {
    display: block;
  }
  .mddtp-picker .mddtp-picker__header {
    padding-bottom: 28px;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
  }
  .mddtp-picker .mddtp-picker__header .mddtp-picker__title span {
    display: inline-block;
  }
  .mddtp-picker .mddtp-picker__header {
    display: block;
    height: 100%;
    width: 100%;
  }
  .mddtp-picker .mddtp-picker__body {
    display: block;
    height: 100%;
    width: 100%;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
  }
  .mddtp-picker.mddtp-picker-date .mddtp-picker__title div {
    display: inline-block;
  }
  .mddtp-picker.mddtp-picker-date .mddtp-picker__title div#mddtp-date__titleMonth {
    margin-left: 8px;
  }
  .mddtp-picker.mddtp-picker-time .mddtp-picker__header {
    padding-top: 14px !important;
    padding-top: 14px;
  }
  .mddtp-picker.mddtp-picker-time .mddtp-picker__header .mddtp-picker__title {
    margin-top: 0;
    display: inline-block;
  }
  .mddtp-picker.mddtp-picker-time .mddtp-picker__header .mddtp-picker__subtitle {
    display: inline-block;
    margin-left: 21px;
    margin-bottom: 0;
    margin-top: 0;
    position: relative;
    top: 1px;
  }
  .mddtp-picker.mddtp-picker-time .mddtp-picker__header .mddtp-picker__subtitle div {
    clear: both;
    display: block;
    text-align: left;
    margin-right: 0;
  }
  .mddtp-picker.mddtp-picker-time .mddtp-picker__body {
    padding-top: 24px;
  }
  .mddtp-picker.mddtp-picker-time .mddtp-picker__circularHolder {
    margin-top: 0;
  }
}
.mddtp-picker--inactive {
  opacity: 0 !important;
  pointer-events: none !important;
}
.mddtp-picker--inactive * {
  opacity: 0 !important;
  pointer-events: none !important;
}

.mddtp-picker-date, .mddtp-picker-time {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.genericComponent.dateTimePicker * {
  box-sizing: border-box;
}
.genericComponent.dateTimePicker .fieldContainer .suffix {
  position: relative;
  height: 100%;
  padding-top: 0;
  padding-bottom: 0;
  padding-right: 3px;
  padding-left: 0;
  margin: 0;
  opacity: 1;
  width: 51px;
  height: 100%;
  flex-shrink: 0;
}
.genericComponent.dateTimePicker .fieldContainer .suffix .rippleContainer {
  position: absolute;
  top: 3px;
  left: 0;
  width: 48px;
  height: 48px;
  padding-left: 12px;
  padding-top: 12px;
  border-radius: 50%;
  overflow: hidden;
  background: transparent;
  z-index: 1;
  cursor: pointer;
  transition: background-color 0.1s linear;
}
.genericComponent.dateTimePicker .fieldContainer .suffix .rippleContainer::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: transparent;
  transition: background-color 0.1s linear;
}
.genericComponent.dateTimePicker .fieldContainer .suffix .rippleContainer .icon {
  transition: color 0.1s linear;
  color: #999999;
  font-size: 24px;
}
.genericComponent.dateTimePicker .fieldContainer .suffix .rippleContainer:focus {
  background: rgba(64, 104, 225, 0.15) !important;
}
.genericComponent.dateTimePicker .fieldContainer .suffix .rippleContainer:focus:hover::after {
  background: rgba(102, 102, 102, 0.1);
}
.genericComponent.dateTimePicker .fieldContainer .suffix .rippleContainer:focus .icon {
  color: #666666;
}
.genericComponent.dateTimePicker .fieldContainer .suffix .rippleContainer .ripple {
  background: rgba(64, 104, 225, 0.3);
}
@media (hover: hover) and (pointer: fine) {
  .genericComponent.dateTimePicker .fieldContainer .suffix:hover .rippleContainer {
    background: rgba(102, 102, 102, 0.1);
  }
  .genericComponent.dateTimePicker .fieldContainer .suffix:hover .rippleContainer .icon {
    color: #666666;
  }
}
.genericComponent.dateTimePicker:not(.moveLabel) .label {
  right: 56px;
  overflow: hidden;
  white-space: nowrap;
  line-height: normal;
  font-weight: normal;
}
.genericComponent.dateTimePicker input {
  padding-right: 0 !important;
}
.genericComponent.dateTimePicker.focused .fieldContainer .suffix .rippleContainer {
  top: 2px;
}
.genericComponent.dateTimePicker.error::after {
  content: none;
}
.genericComponent.dateTimePicker.error .fieldContainer {
  padding-right: 0;
}
.genericComponent.dateTimePicker.error .fieldContainer .suffix .rippleContainer .icon {
  color: #db6056;
}
.genericComponent.dateTimePicker.disabled .fieldContainer .suffix .rippleContainer .icon {
  color: #aaaaaa;
}

.genericComponent.modal,
.genericComponent.prompt {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s ease;
  z-index: 12;
  min-width: 320px;
  width: 100vw;
  overflow-x: visible;
  text-align: center;
  box-sizing: border-box;
}
.genericComponent.modal::before,
.genericComponent.prompt::before {
  content: "";
  display: inline-block;
  height: 100%;
  width: 0;
  margin-right: -4px;
  vertical-align: middle;
}
.genericComponent.modal.visible, .gallery figure.genericComponent.modal,
.genericComponent.prompt.visible,
.gallery figure.genericComponent.prompt {
  opacity: 1;
  pointer-events: all;
}
.genericComponent.modal > .overlay,
.genericComponent.prompt > .overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
}
.genericComponent.modal > .inner,
.genericComponent.prompt > .inner {
  background: #ffffff;
  border-radius: 5px;
  width: 560px;
  transition: box-shadow 0.2s linear;
  box-shadow: 0px 39px 56.4px 3.6px rgba(0, 0, 0, 0.24), 0px 15px 79.38px 1.62px rgba(0, 0, 0, 0.16);
  display: inline-block;
  vertical-align: middle;
  text-align: left;
  position: relative;
  z-index: 1;
  max-width: calc(100% - 16px);
  max-height: calc(100% - 16px);
  overflow-x: hidden;
  overflow-y: visible;
}
.genericComponent.modal > .inner > .ajax-content > .header,
.genericComponent.modal > .inner > .normal-content > .header,
.genericComponent.prompt > .inner > .ajax-content > .header,
.genericComponent.prompt > .inner > .normal-content > .header {
  min-width: 320px;
  border-bottom: 1px solid #d9d9d9;
  padding-top: 24px;
  padding-bottom: 23px;
  padding-left: 16px;
  padding-right: 24px;
}
.genericComponent.modal > .inner > .ajax-content > .header > .inner,
.genericComponent.modal > .inner > .normal-content > .header > .inner,
.genericComponent.prompt > .inner > .ajax-content > .header > .inner,
.genericComponent.prompt > .inner > .normal-content > .header > .inner {
  display: flex;
}
.genericComponent.modal > .inner > .ajax-content > .header .back,
.genericComponent.modal > .inner > .normal-content > .header .back,
.genericComponent.prompt > .inner > .ajax-content > .header .back,
.genericComponent.prompt > .inner > .normal-content > .header .back {
  margin-top: -16px;
  margin-bottom: -16px;
  margin-left: -8px;
  display: none;
  flex-shrink: 1;
  background: transparent;
}
.genericComponent.modal > .inner > .ajax-content > .header .back.visible, .genericComponent.modal > .inner > .ajax-content > .header .gallery figure.back, .gallery .genericComponent.modal > .inner > .ajax-content > .header figure.back,
.genericComponent.modal > .inner > .normal-content > .header .back.visible,
.genericComponent.modal > .inner > .normal-content > .header .gallery figure.back,
.gallery .genericComponent.modal > .inner > .normal-content > .header figure.back,
.genericComponent.prompt > .inner > .ajax-content > .header .back.visible,
.genericComponent.prompt > .inner > .ajax-content > .header .gallery figure.back,
.gallery .genericComponent.prompt > .inner > .ajax-content > .header figure.back,
.genericComponent.prompt > .inner > .normal-content > .header .back.visible,
.genericComponent.prompt > .inner > .normal-content > .header .gallery figure.back,
.gallery .genericComponent.prompt > .inner > .normal-content > .header figure.back {
  display: block;
}
.genericComponent.modal > .inner > .ajax-content > .header .back .icon,
.genericComponent.modal > .inner > .normal-content > .header .back .icon,
.genericComponent.prompt > .inner > .ajax-content > .header .back .icon,
.genericComponent.prompt > .inner > .normal-content > .header .back .icon {
  color: #666666;
}
.genericComponent.modal > .inner > .ajax-content > .header h6,
.genericComponent.modal > .inner > .normal-content > .header h6,
.genericComponent.prompt > .inner > .ajax-content > .header h6,
.genericComponent.prompt > .inner > .normal-content > .header h6 {
  clear: none;
  margin-left: 8px;
  flex-grow: 1;
}
.genericComponent.modal > .inner > .ajax-content > .header .timestamp,
.genericComponent.modal > .inner > .normal-content > .header .timestamp,
.genericComponent.prompt > .inner > .ajax-content > .header .timestamp,
.genericComponent.prompt > .inner > .normal-content > .header .timestamp {
  flex-shrink: 1;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.4px;
  line-height: 16px;
  clear: both;
  display: block;
}
.genericComponent.modal > .inner > .ajax-content > .header .timestamp::before,
.genericComponent.modal > .inner > .normal-content > .header .timestamp::before,
.genericComponent.prompt > .inner > .ajax-content > .header .timestamp::before,
.genericComponent.prompt > .inner > .normal-content > .header .timestamp::before {
  display: block;
  content: "";
  height: 4px;
}
@-moz-document url-prefix() {
  .genericComponent.modal > .inner > .ajax-content > .header .timestamp::before,
  .genericComponent.modal > .inner > .normal-content > .header .timestamp::before,
  .genericComponent.prompt > .inner > .ajax-content > .header .timestamp::before,
  .genericComponent.prompt > .inner > .normal-content > .header .timestamp::before {
    height: 3px;
  }
}
.genericComponent.modal > .inner > .ajax-content > .header .timestamp::after,
.genericComponent.modal > .inner > .normal-content > .header .timestamp::after,
.genericComponent.prompt > .inner > .ajax-content > .header .timestamp::after,
.genericComponent.prompt > .inner > .normal-content > .header .timestamp::after {
  display: block;
  content: "";
  margin-bottom: -4px;
}
@-moz-document url-prefix() {
  .genericComponent.modal > .inner > .ajax-content > .header .timestamp::after,
  .genericComponent.modal > .inner > .normal-content > .header .timestamp::after,
  .genericComponent.prompt > .inner > .ajax-content > .header .timestamp::after,
  .genericComponent.prompt > .inner > .normal-content > .header .timestamp::after {
    margin-bottom: -3px;
  }
}
.genericComponent.modal > .inner > .ajax-content > .header .timestamp,
.genericComponent.modal > .inner > .normal-content > .header .timestamp,
.genericComponent.prompt > .inner > .ajax-content > .header .timestamp,
.genericComponent.prompt > .inner > .normal-content > .header .timestamp {
  font-weight: 600;
  padding-left: 16px;
  white-space: nowrap;
}
.genericComponent.modal > .inner > .ajax-content > .scrollArea > .body,
.genericComponent.modal > .inner > .normal-content > .scrollArea > .body,
.genericComponent.prompt > .inner > .ajax-content > .scrollArea > .body,
.genericComponent.prompt > .inner > .normal-content > .scrollArea > .body {
  padding-top: 20px;
  padding-bottom: 20px;
  padding-left: 24px;
  padding-right: 24px;
  padding-top: 24px;
  padding-bottom: 24px;
}
.genericComponent.modal > .inner > .ajax-content > .scrollArea > .body h6,
.genericComponent.modal > .inner > .normal-content > .scrollArea > .body h6,
.genericComponent.prompt > .inner > .ajax-content > .scrollArea > .body h6,
.genericComponent.prompt > .inner > .normal-content > .scrollArea > .body h6 {
  margin-bottom: 16px;
}
.genericComponent.modal > .inner > .ajax-content > .scrollArea > .body > .text,
.genericComponent.modal > .inner > .normal-content > .scrollArea > .body > .text,
.genericComponent.prompt > .inner > .ajax-content > .scrollArea > .body > .text,
.genericComponent.prompt > .inner > .normal-content > .scrollArea > .body > .text {
  font-size: 16px;
  font-weight: 400;
  letter-spacing: 0.15px;
  line-height: 24px;
  clear: both;
  display: block;
}
.genericComponent.modal > .inner > .ajax-content > .scrollArea > .body > .text::before,
.genericComponent.modal > .inner > .normal-content > .scrollArea > .body > .text::before,
.genericComponent.prompt > .inner > .ajax-content > .scrollArea > .body > .text::before,
.genericComponent.prompt > .inner > .normal-content > .scrollArea > .body > .text::before {
  display: block;
  content: "";
  margin-top: -2px;
}
.genericComponent.modal > .inner > .ajax-content > .scrollArea > .body > .text::after,
.genericComponent.modal > .inner > .normal-content > .scrollArea > .body > .text::after,
.genericComponent.prompt > .inner > .ajax-content > .scrollArea > .body > .text::after,
.genericComponent.prompt > .inner > .normal-content > .scrollArea > .body > .text::after {
  display: block;
  content: "";
  margin-bottom: -6px;
}
.genericComponent.modal > .inner > .ajax-content > .scrollArea > .body > .text::after,
.genericComponent.modal > .inner > .normal-content > .scrollArea > .body > .text::after,
.genericComponent.prompt > .inner > .ajax-content > .scrollArea > .body > .text::after,
.genericComponent.prompt > .inner > .normal-content > .scrollArea > .body > .text::after {
  margin-bottom: 2px;
}
.genericComponent.modal > .inner > .ajax-content > .scrollArea > .footer,
.genericComponent.modal > .inner > .normal-content > .scrollArea > .footer,
.genericComponent.prompt > .inner > .ajax-content > .scrollArea > .footer,
.genericComponent.prompt > .inner > .normal-content > .scrollArea > .footer {
  border-top: 1px solid #d9d9d9;
  padding-left: 24px;
  padding-right: 24px;
  padding-bottom: 10px;
  padding-top: 9px;
  text-align: right;
}
.genericComponent.modal > .inner h6,
.genericComponent.prompt > .inner h6 {
  color: #ffffff;
}

@media (max-width: 767px) {
  .genericComponent.modal {
    width: 100%;
    transform: scale(0.92);
    transition: opacity 0.2s ease, transform 0.2s ease;
    overflow-x: auto;
    min-width: 0;
  }
  .genericComponent.modal.visible, .gallery figure.genericComponent.modal {
    transform: scale(1);
    transition: opacity 0.2s ease, transform 0.2s ease;
  }
  .genericComponent.modal::before {
    content: none;
  }
  .genericComponent.modal > .inner {
    display: block;
    max-width: 100%;
    max-height: 100%;
    width: 100%;
    height: 100%;
    border-radius: 0;
    min-width: 320px;
    overflow: hidden;
  }
  .genericComponent.modal > .inner > .ajax-content > .header,
  .genericComponent.modal > .inner > .normal-content > .header {
    background: #4068e1;
    color: #ffffff;
    flex-shrink: 1;
    border-bottom: 0;
    padding-bottom: 24px;
  }
  .genericComponent.modal > .inner > .ajax-content > .header .back,
  .genericComponent.modal > .inner > .normal-content > .header .back {
    display: block;
    margin-right: 12px;
  }
  .genericComponent.modal > .inner > .ajax-content > .header .back > .inner,
  .genericComponent.modal > .inner > .normal-content > .header .back > .inner {
    background: #4068e1;
    color: #ffffff;
  }
  .genericComponent.modal > .inner > .ajax-content > .header .back > .inner .icon,
  .genericComponent.modal > .inner > .normal-content > .header .back > .inner .icon {
    color: #dfe5ef;
  }
}
@media (max-width: 767px) and (hover: hover) and (pointer: fine) {
  .genericComponent.modal > .inner > .ajax-content > .header .back:hover > .inner,
  .genericComponent.modal > .inner > .normal-content > .header .back:hover > .inner {
    background: #304ea9;
  }
  .genericComponent.modal > .inner > .ajax-content > .header .back:hover > .inner .icon,
  .genericComponent.modal > .inner > .normal-content > .header .back:hover > .inner .icon {
    color: #ffffff;
  }
}
@media (max-width: 767px) {
  .genericComponent.modal > .inner > .ajax-content > .header .back:focus > .inner, .genericComponent.modal > .inner > .ajax-content > .header .back.open > .inner,
  .genericComponent.modal > .inner > .normal-content > .header .back:focus > .inner,
  .genericComponent.modal > .inner > .normal-content > .header .back.open > .inner {
    background: #273f87;
  }
  .genericComponent.modal > .inner > .ajax-content > .header .back:focus > .inner .icon, .genericComponent.modal > .inner > .ajax-content > .header .back.open > .inner .icon,
  .genericComponent.modal > .inner > .normal-content > .header .back:focus > .inner .icon,
  .genericComponent.modal > .inner > .normal-content > .header .back.open > .inner .icon {
    color: #ffffff;
  }
  .genericComponent.modal > .inner > .ajax-content > .header .back.disabled,
  .genericComponent.modal > .inner > .normal-content > .header .back.disabled {
    pointer-events: none;
  }
  .genericComponent.modal > .inner > .ajax-content > .header .back.disabled > .inner,
  .genericComponent.modal > .inner > .normal-content > .header .back.disabled > .inner {
    background: #eeeeee;
    color: #999999;
  }
  .genericComponent.modal > .inner > .ajax-content > .header .back.disabled > .inner .icon,
  .genericComponent.modal > .inner > .normal-content > .header .back.disabled > .inner .icon {
    color: #999999;
  }
  .genericComponent.modal > .inner > .ajax-content > .header .back .ripple,
  .genericComponent.modal > .inner > .normal-content > .header .back .ripple {
    background: #273f87;
  }
  .genericComponent.modal > .inner > .ajax-content > .scrollArea > .footer,
  .genericComponent.modal > .inner > .normal-content > .scrollArea > .footer {
    border: 0;
    padding-top: 0;
    padding-bottom: 24px;
    float: left;
    width: 100%;
  }
}
/* Sticky header (mobile)
-------------------------------------------------- */
@media (max-width: 767px) {
  .genericComponent.modal > .inner {
    overflow-y: auto;
    overflow-x: hidden;
    max-height: 100vh;
  }
  .genericComponent.modal > .inner > .ajax-content > .header,
  .genericComponent.modal > .inner > .normal-content > .header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 10;
    box-shadow: 0px 3px 4.7px 0.3px transparent, 0px 2px 5.88px 0.12px transparent;
    transition: top 0.2s ease, box-shadow 0.2s linear !important;
  }
  .genericComponent.modal > .inner > .ajax-content > .header.elevated,
  .genericComponent.modal > .inner > .normal-content > .header.elevated {
    transition: box-shadow 0.2s linear;
    box-shadow: 0px 3px 4.7px 0.3px rgba(0, 0, 0, 0.24), 0px 2px 5.88px 0.12px rgba(0, 0, 0, 0.16);
  }
}
@media (max-width: 767px) and (max-width: 767px) {
  .genericComponent.modal > .inner > .ajax-content > .header.forceTop,
  .genericComponent.modal > .inner > .normal-content > .header.forceTop {
    position: absolute;
    top: 0 !important;
    box-shadow: 0px 3px 4.7px 0.3px transparent, 0px 2px 5.88px 0.12px transparent;
    transition: box-shadow 0.2s linear !important;
  }
  .genericComponent.modal > .inner > .ajax-content > .header.noTransition,
  .genericComponent.modal > .inner > .normal-content > .header.noTransition {
    transition: box-shadow 0.2s linear !important;
  }
  .genericComponent.modal > .inner > .ajax-content > .header.hidden,
  .genericComponent.modal > .inner > .normal-content > .header.hidden {
    top: -64px;
    box-shadow: none;
  }
}
@media (max-width: 767px) {
  .genericComponent.modal > .inner > .ajax-content > .scrollArea,
  .genericComponent.modal > .inner > .normal-content > .scrollArea {
    padding-top: 64px;
  }
}
/* Step transitions
-------------------------------------------------- */
body.stepModalTransitions .genericComponent.modal {
  transform: scale(1);
  transition: none !important;
}
body.stepModalTransitions .genericComponent.modal > .inner > .ajax-content > .header > .inner,
body.stepModalTransitions .genericComponent.modal > .inner > .ajax-content > .scrollArea > .body > .inner,
body.stepModalTransitions .genericComponent.modal > .inner > .ajax-content > .scrollArea > .footer > .inner,
body.stepModalTransitions .genericComponent.modal > .inner > .normal-content > .header > .inner,
body.stepModalTransitions .genericComponent.modal > .inner > .normal-content > .scrollArea > .body > .inner,
body.stepModalTransitions .genericComponent.modal > .inner > .normal-content > .scrollArea > .footer > .inner {
  transition: opacity 0.1s linear;
  opacity: 0;
}
body.stepModalTransitions .genericComponent.modal.visible > .inner > .ajax-content > .header > .inner, body.stepModalTransitions .gallery figure.genericComponent.modal > .inner > .ajax-content > .header > .inner, .gallery body.stepModalTransitions figure.genericComponent.modal > .inner > .ajax-content > .header > .inner,
body.stepModalTransitions .genericComponent.modal.visible > .inner > .ajax-content > .scrollArea > .body > .inner,
body.stepModalTransitions .gallery figure.genericComponent.modal > .inner > .ajax-content > .scrollArea > .body > .inner,
.gallery body.stepModalTransitions figure.genericComponent.modal > .inner > .ajax-content > .scrollArea > .body > .inner,
body.stepModalTransitions .genericComponent.modal.visible > .inner > .ajax-content > .scrollArea > .footer > .inner,
body.stepModalTransitions .gallery figure.genericComponent.modal > .inner > .ajax-content > .scrollArea > .footer > .inner,
.gallery body.stepModalTransitions figure.genericComponent.modal > .inner > .ajax-content > .scrollArea > .footer > .inner,
body.stepModalTransitions .genericComponent.modal.visible > .inner > .normal-content > .header > .inner,
body.stepModalTransitions .gallery figure.genericComponent.modal > .inner > .normal-content > .header > .inner,
.gallery body.stepModalTransitions figure.genericComponent.modal > .inner > .normal-content > .header > .inner,
body.stepModalTransitions .genericComponent.modal.visible > .inner > .normal-content > .scrollArea > .body > .inner,
body.stepModalTransitions .gallery figure.genericComponent.modal > .inner > .normal-content > .scrollArea > .body > .inner,
.gallery body.stepModalTransitions figure.genericComponent.modal > .inner > .normal-content > .scrollArea > .body > .inner,
body.stepModalTransitions .genericComponent.modal.visible > .inner > .normal-content > .scrollArea > .footer > .inner,
body.stepModalTransitions .gallery figure.genericComponent.modal > .inner > .normal-content > .scrollArea > .footer > .inner,
.gallery body.stepModalTransitions figure.genericComponent.modal > .inner > .normal-content > .scrollArea > .footer > .inner {
  transition: opacity 0.1s 0.1s linear;
  opacity: 1;
}

.genericComponent.prompt .footer {
  border-top: 0 !important;
  padding-top: 0 !important;
}

.noticeboard:not(body) .buttonContainer > .button.menu > .inner {
  padding-right: 15px;
}
.noticeboard:not(body) .buttonContainer > .button.menu > .inner .title {
  max-width: 80%;
  height: 19px;
  overflow: hidden;
}
.noticeboard:not(body) .buttonContainer > .button.menu > .inner .description {
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.4px;
  line-height: 16px;
  clear: both;
  display: block;
}
.noticeboard:not(body) .buttonContainer > .button.menu > .inner .description::before {
  display: block;
  content: "";
  height: 4px;
}
@-moz-document url-prefix() {
  .noticeboard:not(body) .buttonContainer > .button.menu > .inner .description::before {
    height: 3px;
  }
}
.noticeboard:not(body) .buttonContainer > .button.menu > .inner .description::after {
  display: block;
  content: "";
  margin-bottom: -4px;
}
@-moz-document url-prefix() {
  .noticeboard:not(body) .buttonContainer > .button.menu > .inner .description::after {
    margin-bottom: -3px;
  }
}
.noticeboard:not(body) .buttonContainer > .button.menu > .inner .description {
  color: #999999;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  margin-left: 0;
  transition: color 0.1s linear;
  padding-right: 16px;
  height: 19px;
  max-width: 85%;
}
.noticeboard:not(body) .buttonContainer > .button.menu > .inner .description::before {
  height: 3px;
}
.noticeboard:not(body) .buttonContainer > .button.menu > .inner .description::after {
  content: none;
}
.noticeboard:not(body) .buttonContainer > .button.menu > .inner .timestamp {
  margin-left: 0;
}
.noticeboard:not(body) .buttonContainer > .button.menu.thumbnail > .inner {
  min-height: 76px;
  padding-top: 10px;
  padding-bottom: 10px;
}
.noticeboard:not(body) .buttonContainer > .button.menu.thumbnail > .inner .icon {
  padding-top: 8px;
}
.noticeboard:not(body) .buttonContainer > .button.menu.thumbnail > .inner .textContainer {
  padding-top: 8px;
  padding-right: 72px;
}
.noticeboard:not(body) .buttonContainer > .button.menu.thumbnail > .inner .textContainer .description {
  padding-right: 0;
}
.noticeboard:not(body) .buttonContainer > .button.menu.thumbnail > .inner .timestamp {
  padding-right: 72px;
  padding-bottom: 0;
  margin-bottom: 12px;
}
.noticeboard:not(body) .buttonContainer > .button.menu.thumbnail > .inner img {
  position: absolute;
  top: 50%;
  right: 0;
  width: 56px;
  height: 56px;
  margin-top: -27px;
  border-radius: 50%;
  margin-left: 16px;
}
@media (max-width: 767px) {
  .noticeboard:not(body) .buttonContainer > .button.menu.thumbnail > .inner .timestamp {
    padding-right: 0;
    width: 100%;
  }
  .noticeboard:not(body) .buttonContainer > .button.menu.thumbnail > .inner .icon {
    padding-top: 9px;
  }
  .noticeboard:not(body) .buttonContainer > .button.menu.thumbnail > .inner .label::before, .noticeboard:not(body) .buttonContainer > .button.menu.thumbnail > .inner .label::after {
    content: none;
  }
  .noticeboard:not(body) .buttonContainer > .button.menu.thumbnail > .inner .label img {
    margin-top: -28px;
  }
}

body.noticeboard main .noticeboard .buttonContainer > .button.menu .inner,
body.noticeboard main .requests .buttonContainer > .button.menu .inner,
body.requests main .noticeboard .buttonContainer > .button.menu .inner,
body.requests main .requests .buttonContainer > .button.menu .inner {
  padding-left: 24px;
  padding-right: 24px;
  padding-top: 32px;
  padding-bottom: 31px;
  border-bottom: 1px solid #eeeeee;
}
body.noticeboard main .noticeboard .buttonContainer > .button.menu .inner > .icon,
body.noticeboard main .requests .buttonContainer > .button.menu .inner > .icon,
body.requests main .noticeboard .buttonContainer > .button.menu .inner > .icon,
body.requests main .requests .buttonContainer > .button.menu .inner > .icon {
  margin-right: 22px;
}
body.noticeboard main .noticeboard .buttonContainer > .button.menu .inner .label,
body.noticeboard main .requests .buttonContainer > .button.menu .inner .label,
body.requests main .noticeboard .buttonContainer > .button.menu .inner .label,
body.requests main .requests .buttonContainer > .button.menu .inner .label {
  width: calc(100% - 40px);
}
body.noticeboard main .noticeboard .buttonContainer > .button.menu .inner .label .textContainer,
body.noticeboard main .requests .buttonContainer > .button.menu .inner .label .textContainer,
body.requests main .noticeboard .buttonContainer > .button.menu .inner .label .textContainer,
body.requests main .requests .buttonContainer > .button.menu .inner .label .textContainer {
  vertical-align: top;
  float: left;
  margin-top: -1px;
  width: calc(100% - 136px);
  margin-left: 0;
}
body.noticeboard main .noticeboard .buttonContainer > .button.menu .inner .label .textContainer .description,
body.noticeboard main .requests .buttonContainer > .button.menu .inner .label .textContainer .description,
body.requests main .noticeboard .buttonContainer > .button.menu .inner .label .textContainer .description,
body.requests main .requests .buttonContainer > .button.menu .inner .label .textContainer .description {
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.4px;
  line-height: 16px;
  clear: both;
  display: block;
}
body.noticeboard main .noticeboard .buttonContainer > .button.menu .inner .label .textContainer .description::before,
body.noticeboard main .requests .buttonContainer > .button.menu .inner .label .textContainer .description::before,
body.requests main .noticeboard .buttonContainer > .button.menu .inner .label .textContainer .description::before,
body.requests main .requests .buttonContainer > .button.menu .inner .label .textContainer .description::before {
  display: block;
  content: "";
  height: 4px;
}
@-moz-document url-prefix() {
  body.noticeboard main .noticeboard .buttonContainer > .button.menu .inner .label .textContainer .description::before,
  body.noticeboard main .requests .buttonContainer > .button.menu .inner .label .textContainer .description::before,
  body.requests main .noticeboard .buttonContainer > .button.menu .inner .label .textContainer .description::before,
  body.requests main .requests .buttonContainer > .button.menu .inner .label .textContainer .description::before {
    height: 3px;
  }
}
body.noticeboard main .noticeboard .buttonContainer > .button.menu .inner .label .textContainer .description::after,
body.noticeboard main .requests .buttonContainer > .button.menu .inner .label .textContainer .description::after,
body.requests main .noticeboard .buttonContainer > .button.menu .inner .label .textContainer .description::after,
body.requests main .requests .buttonContainer > .button.menu .inner .label .textContainer .description::after {
  display: block;
  content: "";
  margin-bottom: -4px;
}
@-moz-document url-prefix() {
  body.noticeboard main .noticeboard .buttonContainer > .button.menu .inner .label .textContainer .description::after,
  body.noticeboard main .requests .buttonContainer > .button.menu .inner .label .textContainer .description::after,
  body.requests main .noticeboard .buttonContainer > .button.menu .inner .label .textContainer .description::after,
  body.requests main .requests .buttonContainer > .button.menu .inner .label .textContainer .description::after {
    margin-bottom: -3px;
  }
}
body.noticeboard main .noticeboard .buttonContainer > .button.menu .inner .label .textContainer .description,
body.noticeboard main .requests .buttonContainer > .button.menu .inner .label .textContainer .description,
body.requests main .noticeboard .buttonContainer > .button.menu .inner .label .textContainer .description,
body.requests main .requests .buttonContainer > .button.menu .inner .label .textContainer .description {
  color: #999999;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  margin-left: 0;
  transition: color 0.1s linear;
  padding-right: 0;
}
body.noticeboard main .noticeboard .buttonContainer > .button.menu .inner .label .textContainer .description::before,
body.noticeboard main .requests .buttonContainer > .button.menu .inner .label .textContainer .description::before,
body.requests main .noticeboard .buttonContainer > .button.menu .inner .label .textContainer .description::before,
body.requests main .requests .buttonContainer > .button.menu .inner .label .textContainer .description::before {
  height: 3px;
}
body.noticeboard main .noticeboard .buttonContainer > .button.menu .inner .label .textContainer .description::after,
body.noticeboard main .requests .buttonContainer > .button.menu .inner .label .textContainer .description::after,
body.requests main .noticeboard .buttonContainer > .button.menu .inner .label .textContainer .description::after,
body.requests main .requests .buttonContainer > .button.menu .inner .label .textContainer .description::after {
  content: none;
}
body.noticeboard main .noticeboard .buttonContainer > .button.menu .inner .label .timestamp,
body.noticeboard main .requests .buttonContainer > .button.menu .inner .label .timestamp,
body.requests main .noticeboard .buttonContainer > .button.menu .inner .label .timestamp,
body.requests main .requests .buttonContainer > .button.menu .inner .label .timestamp {
  position: absolute;
  top: 50%;
  margin-top: -8px;
  right: 0;
  width: 136px;
  padding-right: 0;
  display: block;
  word-break: normal;
  width: 136px;
  text-align: right;
  clear: none;
  padding-bottom: 0;
  margin-bottom: 0;
  font-weight: 600;
  padding-top: 2px;
}
body.noticeboard main .noticeboard .buttonContainer > .button.menu .inner .label .timestamp::before, body.noticeboard main .noticeboard .buttonContainer > .button.menu .inner .label .timestamp::after,
body.noticeboard main .requests .buttonContainer > .button.menu .inner .label .timestamp::before,
body.noticeboard main .requests .buttonContainer > .button.menu .inner .label .timestamp::after,
body.requests main .noticeboard .buttonContainer > .button.menu .inner .label .timestamp::before,
body.requests main .noticeboard .buttonContainer > .button.menu .inner .label .timestamp::after,
body.requests main .requests .buttonContainer > .button.menu .inner .label .timestamp::before,
body.requests main .requests .buttonContainer > .button.menu .inner .label .timestamp::after {
  content: none;
}
@media (max-width: 767px) {
  body.noticeboard main .noticeboard .buttonContainer > .button.menu .inner,
  body.noticeboard main .requests .buttonContainer > .button.menu .inner,
  body.requests main .noticeboard .buttonContainer > .button.menu .inner,
  body.requests main .requests .buttonContainer > .button.menu .inner {
    padding-left: 16px;
    padding-right: 16px;
    padding-top: 24px;
    padding-bottom: 23px;
  }
  body.noticeboard main .noticeboard .buttonContainer > .button.menu .inner > .icon,
  body.noticeboard main .requests .buttonContainer > .button.menu .inner > .icon,
  body.requests main .noticeboard .buttonContainer > .button.menu .inner > .icon,
  body.requests main .requests .buttonContainer > .button.menu .inner > .icon {
    margin-right: 16px;
  }
  body.noticeboard main .noticeboard .buttonContainer > .button.menu .inner .label,
  body.noticeboard main .requests .buttonContainer > .button.menu .inner .label,
  body.requests main .noticeboard .buttonContainer > .button.menu .inner .label,
  body.requests main .requests .buttonContainer > .button.menu .inner .label {
    width: calc(100% - 34px);
    display: block;
  }
  body.noticeboard main .noticeboard .buttonContainer > .button.menu .inner .label .textContainer,
  body.noticeboard main .requests .buttonContainer > .button.menu .inner .label .textContainer,
  body.requests main .noticeboard .buttonContainer > .button.menu .inner .label .textContainer,
  body.requests main .requests .buttonContainer > .button.menu .inner .label .textContainer {
    width: 100%;
  }
  body.noticeboard main .noticeboard .buttonContainer > .button.menu .inner .label .textContainer .description,
  body.noticeboard main .requests .buttonContainer > .button.menu .inner .label .textContainer .description,
  body.requests main .noticeboard .buttonContainer > .button.menu .inner .label .textContainer .description,
  body.requests main .requests .buttonContainer > .button.menu .inner .label .textContainer .description {
    margin-left: 0;
  }
  body.noticeboard main .noticeboard .buttonContainer > .button.menu .inner .label .timestamp,
  body.noticeboard main .requests .buttonContainer > .button.menu .inner .label .timestamp,
  body.requests main .noticeboard .buttonContainer > .button.menu .inner .label .timestamp,
  body.requests main .requests .buttonContainer > .button.menu .inner .label .timestamp {
    float: left;
    position: static;
    width: 100%;
    text-align: left;
    margin-top: -2px;
  }
  body.noticeboard main .noticeboard .buttonContainer > .button.menu .inner .label .timestamp::before, body.noticeboard main .noticeboard .buttonContainer > .button.menu .inner .label .timestamp::after,
  body.noticeboard main .requests .buttonContainer > .button.menu .inner .label .timestamp::before,
  body.noticeboard main .requests .buttonContainer > .button.menu .inner .label .timestamp::after,
  body.requests main .noticeboard .buttonContainer > .button.menu .inner .label .timestamp::before,
  body.requests main .noticeboard .buttonContainer > .button.menu .inner .label .timestamp::after,
  body.requests main .requests .buttonContainer > .button.menu .inner .label .timestamp::before,
  body.requests main .requests .buttonContainer > .button.menu .inner .label .timestamp::after {
    content: "";
  }
}
@media (hover: hover) and (pointer: fine) {
  body.noticeboard main .noticeboard .buttonContainer > .button.menu:hover .inner .label .textContainer .description,
  body.noticeboard main .requests .buttonContainer > .button.menu:hover .inner .label .textContainer .description,
  body.requests main .noticeboard .buttonContainer > .button.menu:hover .inner .label .textContainer .description,
  body.requests main .requests .buttonContainer > .button.menu:hover .inner .label .textContainer .description {
    color: #666666;
  }
}
body.noticeboard main .noticeboard .buttonContainer > .button.menu.thumbnail .inner,
body.noticeboard main .requests .buttonContainer > .button.menu.thumbnail .inner,
body.requests main .noticeboard .buttonContainer > .button.menu.thumbnail .inner,
body.requests main .requests .buttonContainer > .button.menu.thumbnail .inner {
  padding-top: 24px;
  padding-bottom: 24px;
}
body.noticeboard main .noticeboard .buttonContainer > .button.menu.thumbnail .inner .label .textContainer,
body.noticeboard main .requests .buttonContainer > .button.menu.thumbnail .inner .label .textContainer,
body.requests main .noticeboard .buttonContainer > .button.menu.thumbnail .inner .label .textContainer,
body.requests main .requests .buttonContainer > .button.menu.thumbnail .inner .label .textContainer {
  width: calc(100% - 136px - 56px - 16px);
  padding-right: 0;
}
body.noticeboard main .noticeboard .buttonContainer > .button.menu.thumbnail .inner .label .timestamp,
body.noticeboard main .requests .buttonContainer > .button.menu.thumbnail .inner .label .timestamp,
body.requests main .noticeboard .buttonContainer > .button.menu.thumbnail .inner .label .timestamp,
body.requests main .requests .buttonContainer > .button.menu.thumbnail .inner .label .timestamp {
  right: 72px;
}
body.noticeboard main .noticeboard .buttonContainer > .button.menu.thumbnail .inner .label img,
body.noticeboard main .requests .buttonContainer > .button.menu.thumbnail .inner .label img,
body.requests main .noticeboard .buttonContainer > .button.menu.thumbnail .inner .label img,
body.requests main .requests .buttonContainer > .button.menu.thumbnail .inner .label img {
  position: absolute;
  top: 50%;
  right: 0;
  margin-top: -28px;
}
@media (max-width: 767px) {
  body.noticeboard main .noticeboard .buttonContainer > .button.menu.thumbnail > .inner,
  body.noticeboard main .requests .buttonContainer > .button.menu.thumbnail > .inner,
  body.requests main .noticeboard .buttonContainer > .button.menu.thumbnail > .inner,
  body.requests main .requests .buttonContainer > .button.menu.thumbnail > .inner {
    min-height: 105px;
  }
  body.noticeboard main .noticeboard .buttonContainer > .button.menu.thumbnail > .inner .icon,
  body.noticeboard main .requests .buttonContainer > .button.menu.thumbnail > .inner .icon,
  body.requests main .noticeboard .buttonContainer > .button.menu.thumbnail > .inner .icon,
  body.requests main .requests .buttonContainer > .button.menu.thumbnail > .inner .icon {
    padding-top: 0;
  }
  body.noticeboard main .noticeboard .buttonContainer > .button.menu.thumbnail > .inner .label .textContainer,
  body.noticeboard main .requests .buttonContainer > .button.menu.thumbnail > .inner .label .textContainer,
  body.requests main .noticeboard .buttonContainer > .button.menu.thumbnail > .inner .label .textContainer,
  body.requests main .requests .buttonContainer > .button.menu.thumbnail > .inner .label .textContainer {
    width: 100%;
    padding-top: 0;
    padding-right: 72px;
  }
  body.noticeboard main .noticeboard .buttonContainer > .button.menu.thumbnail > .inner .label .timestamp,
  body.noticeboard main .requests .buttonContainer > .button.menu.thumbnail > .inner .label .timestamp,
  body.requests main .noticeboard .buttonContainer > .button.menu.thumbnail > .inner .label .timestamp,
  body.requests main .requests .buttonContainer > .button.menu.thumbnail > .inner .label .timestamp {
    margin-top: 0;
    padding-bottom: 1px;
  }
  body.noticeboard main .noticeboard .buttonContainer > .button.menu.thumbnail > .inner .label img,
  body.noticeboard main .requests .buttonContainer > .button.menu.thumbnail > .inner .label img,
  body.requests main .noticeboard .buttonContainer > .button.menu.thumbnail > .inner .label img,
  body.requests main .requests .buttonContainer > .button.menu.thumbnail > .inner .label img {
    position: absolute;
    top: 50%;
    right: 0;
    margin-top: -28px;
  }
}
@media (min-width: 768px) {
  body.noticeboard main .noticeboard .buttonContainer:last-child > .button.menu > .inner,
  body.noticeboard main .requests .buttonContainer:last-child > .button.menu > .inner,
  body.requests main .noticeboard .buttonContainer:last-child > .button.menu > .inner,
  body.requests main .requests .buttonContainer:last-child > .button.menu > .inner {
    border-bottom: 0;
  }
}

.rightCol > .panel > .body > .noticeboard > .ajax-loading, .gallery .rightCol > .panel > .body > .noticeboard > figure {
  display: none;
}

@media (min-width: 768px) {
  body.modal-details .modal.notice-details.visible > .inner, body.modal-details .gallery figure.modal.notice-details > .inner, .gallery body.modal-details figure.modal.notice-details > .inner {
    max-width: 764px;
  }
}
.modal.notice-details.important .header {
  color: #db6056;
}
.modal.notice-details.important .header .icon {
  font-size: 24px;
  margin-right: 4px;
}
.modal.notice-details.important .header h6::before {
  margin-top: -2px;
}
.modal.notice-details.important .header h6::after {
  margin-bottom: -1px;
}
@media (max-width: 767px) {
  .modal.notice-details.important .header {
    color: #ffffff;
    background: #db6056;
    text-transform: uppercase;
    padding-top: 21px;
    padding-bottom: 18px;
  }
}

/* Noticeboard page
JO - Copied from main stylesheet of new portal
Not sure why it wasn't contained in the noticeboard stylesheet?
-------------------------------------------------- */
@media (max-width: 767px) {
  body.noticeboard main {
    padding: 0;
  }
  body.noticeboard main::before, body.noticeboard main::after {
    content: none;
  }
}

.notice-details {
  z-index: 13 !important; /* JO  1 higher than the main noticeboard modal. Ensures everything is clickable on the notice details modal */
}
.notice-details .body .text + .attachments {
  margin-top: 20px;
}
.notice-details .footer .inner {
  display: flex;
  text-align: center;
}
.notice-details .footer .inner #yesno_res_btns {
  justify-content: space-around;
  width: 66%;
  margin: 0 auto;
}
.notice-details .footer .inner #yesno_res_btns .label {
  width: 100px;
  text-align: center;
}
.notice-details .footer .inner .checkbox {
  flex-grow: 1;
  text-align: left;
}
.notice-details .footer .inner .checkbox label {
  font-weight: 600;
  word-break: break-word;
}
.notice-details .footer .inner .button {
  white-space: nowrap;
}
.notice-details .footer .inner .button.positive {
  display: block;
  margin-left: auto;
  margin-right: auto;
  float: none;
}
.notice-details .footer .inner .button.positive .inner .icon {
  margin-right: 0;
}
.notice-details .footer .inner .button.positive .label {
  text-transform: none;
  font-size: 12pt;
  font-weight: 400;
  letter-spacing: 0.5px;
  line-height: 20px;
  clear: both;
  display: block;
}
.notice-details .footer .inner .button.positive .label::before {
  display: block;
  content: "";
  height: 1px;
}
@-moz-document url-prefix() {
  .notice-details .footer .inner .button.positive .label::before {
    height: 0;
  }
}
.notice-details .footer .inner .button.positive .label::after {
  display: block;
  content: "";
  margin-bottom: -5px;
}
@-moz-document url-prefix() {
  .notice-details .footer .inner .button.positive .label::after {
    margin-bottom: -4px;
  }
}
.notice-details .footer .inner .button.positive .label {
  font-weight: 600;
  display: inline-block;
}
.notice-details .footer .inner #remind-me-later {
  cursor: pointer;
  font-size: 1rem;
}
@media (max-width: 767px) {
  .notice-details .footer .inner {
    display: block;
    text-align: left;
  }
  .notice-details .footer .inner .checkbox {
    margin: 0;
    /* margin-top: 14px; */
    display: block;
  }
  .notice-details .footer .inner .button {
    margin: 0;
    display: block;
    float: left;
  }
}
.notice-details #notice_author {
  margin-bottom: 10px;
  display: inline-block;
}

/* List modals (notifications and noticeboard)
-------------------------------------------------- */
@media (min-width: 768px) {
  .genericComponent.modal.modal-list > .inner > .ajax-content > .header,
  .genericComponent.modal.modal-list > .inner > .normal-content > .header {
    padding-top: 21px;
    padding-bottom: 17px;
  }
  .genericComponent.modal.modal-list > .inner > .ajax-content > .header > .inner > .icon,
  .genericComponent.modal.modal-list > .inner > .normal-content > .header > .inner > .icon {
    font-size: 24px;
    color: #666666;
    margin-right: 4px;
  }
  .genericComponent.modal.modal-list > .inner > .ajax-content > .header > .inner > h6::before,
  .genericComponent.modal.modal-list > .inner > .normal-content > .header > .inner > h6::before {
    margin-top: -2px;
  }
  .genericComponent.modal.modal-list > .inner > .ajax-content > .header > .inner > h6::after,
  .genericComponent.modal.modal-list > .inner > .normal-content > .header > .inner > h6::after {
    margin-bottom: -1px;
  }
}
.genericComponent.modal.modal-list > .inner > .ajax-content > .scrollArea > .body,
.genericComponent.modal.modal-list > .inner > .normal-content > .scrollArea > .body {
  padding: 0;
}
.genericComponent.modal.modal-list > .inner > .ajax-content > .scrollArea > .body .buttonContainer > .button.menu > .inner,
.genericComponent.modal.modal-list > .inner > .normal-content > .scrollArea > .body .buttonContainer > .button.menu > .inner {
  padding-left: 19px;
}
.genericComponent.modal.modal-list > .inner > .ajax-content > .scrollArea > .body .ajax-loading, .genericComponent.modal.modal-list > .inner > .ajax-content > .scrollArea > .body .gallery figure, .gallery .genericComponent.modal.modal-list > .inner > .ajax-content > .scrollArea > .body figure,
.genericComponent.modal.modal-list > .inner > .normal-content > .scrollArea > .body .ajax-loading,
.genericComponent.modal.modal-list > .inner > .normal-content > .scrollArea > .body .gallery figure,
.gallery .genericComponent.modal.modal-list > .inner > .normal-content > .scrollArea > .body figure {
  padding-top: 20px;
  padding-bottom: 20px;
  padding-left: 16px;
}
.genericComponent.modal.modal-list > .inner > .ajax-content > .scrollArea > .body .ajax-loading .title, .genericComponent.modal.modal-list > .inner > .ajax-content > .scrollArea > .body .gallery figure .title, .gallery .genericComponent.modal.modal-list > .inner > .ajax-content > .scrollArea > .body figure .title,
.genericComponent.modal.modal-list > .inner > .normal-content > .scrollArea > .body .ajax-loading .title,
.genericComponent.modal.modal-list > .inner > .normal-content > .scrollArea > .body .gallery figure .title,
.gallery .genericComponent.modal.modal-list > .inner > .normal-content > .scrollArea > .body figure .title {
  max-width: 320px;
}
.genericComponent.modal.modal-list > .inner > .ajax-content > .scrollArea > .body .ajax-loading .description, .genericComponent.modal.modal-list > .inner > .ajax-content > .scrollArea > .body .gallery figure .description, .gallery .genericComponent.modal.modal-list > .inner > .ajax-content > .scrollArea > .body figure .description,
.genericComponent.modal.modal-list > .inner > .normal-content > .scrollArea > .body .ajax-loading .description,
.genericComponent.modal.modal-list > .inner > .normal-content > .scrollArea > .body .gallery figure .description,
.gallery .genericComponent.modal.modal-list > .inner > .normal-content > .scrollArea > .body figure .description {
  max-width: 124px;
}
.genericComponent.modal.modal-list > .inner > .ajax-content > .scrollArea > .body .notifications .ajax-loading, .genericComponent.modal.modal-list > .inner > .ajax-content > .scrollArea > .body .notifications .gallery figure, .gallery .genericComponent.modal.modal-list > .inner > .ajax-content > .scrollArea > .body .notifications figure,
.genericComponent.modal.modal-list > .inner > .normal-content > .scrollArea > .body .notifications .ajax-loading,
.genericComponent.modal.modal-list > .inner > .normal-content > .scrollArea > .body .notifications .gallery figure,
.gallery .genericComponent.modal.modal-list > .inner > .normal-content > .scrollArea > .body .notifications figure {
  padding-right: 64px;
}
@media (max-width: 767px) {
  .genericComponent.modal.modal-list > .inner > .ajax-content > .header > .inner > .icon,
  .genericComponent.modal.modal-list > .inner > .normal-content > .header > .inner > .icon {
    display: none;
  }
  .genericComponent.modal.modal-list > .inner > .ajax-content > .scrollArea > .body .buttonContainer > .button.menu > .inner,
  .genericComponent.modal.modal-list > .inner > .normal-content > .scrollArea > .body .buttonContainer > .button.menu > .inner {
    border-bottom: 1px solid #eeeeee;
  }
}

/* Details modals
-------------------------------------------------- */
.genericComponent.modal.modal-details > .inner > .ajax-content > .header h6 {
  flex-grow: 1;
}
.genericComponent.modal.modal-details > .inner > .ajax-content > .header .timestamp {
  flex-shrink: 1;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.4px;
  line-height: 16px;
  clear: both;
  display: block;
}
.genericComponent.modal.modal-details > .inner > .ajax-content > .header .timestamp::before {
  display: block;
  content: "";
  height: 4px;
}
@-moz-document url-prefix() {
  .genericComponent.modal.modal-details > .inner > .ajax-content > .header .timestamp::before {
    height: 3px;
  }
}
.genericComponent.modal.modal-details > .inner > .ajax-content > .header .timestamp::after {
  display: block;
  content: "";
  margin-bottom: -4px;
}
@-moz-document url-prefix() {
  .genericComponent.modal.modal-details > .inner > .ajax-content > .header .timestamp::after {
    margin-bottom: -3px;
  }
}
.genericComponent.modal.modal-details > .inner > .ajax-content > .header .timestamp {
  font-weight: 600;
  color: #999999;
  padding-left: 16px;
  white-space: nowrap;
}
.genericComponent.modal.modal-details > .inner > .ajax-content > .scrollArea > .body .timestamp {
  flex-shrink: 1;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.4px;
  line-height: 16px;
  clear: both;
  display: block;
}
.genericComponent.modal.modal-details > .inner > .ajax-content > .scrollArea > .body .timestamp::before {
  display: block;
  content: "";
  height: 4px;
}
@-moz-document url-prefix() {
  .genericComponent.modal.modal-details > .inner > .ajax-content > .scrollArea > .body .timestamp::before {
    height: 3px;
  }
}
.genericComponent.modal.modal-details > .inner > .ajax-content > .scrollArea > .body .timestamp::after {
  display: block;
  content: "";
  margin-bottom: -4px;
}
@-moz-document url-prefix() {
  .genericComponent.modal.modal-details > .inner > .ajax-content > .scrollArea > .body .timestamp::after {
    margin-bottom: -3px;
  }
}
.genericComponent.modal.modal-details > .inner > .ajax-content > .scrollArea > .body .timestamp {
  font-weight: 600;
  color: #999999;
  margin-bottom: 12px;
}
.genericComponent.modal.modal-details > .inner > .ajax-content > .scrollArea > .body h6 {
  margin-bottom: 26px;
}

@media (min-width: 768px) {
  body.modal-details {
    background: #ffffff;
  }
  body.modal-details main .fullCol {
    display: none !important;
  }
  body.modal-details .genericComponent.modal.modal-details.fadeOut {
    opacity: 0 !important;
  }
  body.modal-details .genericComponent.modal.modal-details.visible, body.modal-details .gallery figure.genericComponent.modal.modal-details, .gallery body.modal-details figure.genericComponent.modal.modal-details {
    position: static;
    top: 0;
    left: 0;
    right: 0;
    bottom: auto;
    background: #ffffff;
    z-index: 9;
  }
  body.modal-details .genericComponent.modal.modal-details.visible::before, body.modal-details .gallery figure.genericComponent.modal.modal-details::before, .gallery body.modal-details figure.genericComponent.modal.modal-details::before, body.modal-details .genericComponent.modal.modal-details.visible::after, body.modal-details .gallery figure.genericComponent.modal.modal-details::after, .gallery body.modal-details figure.genericComponent.modal.modal-details::after {
    content: none;
  }
  body.modal-details .genericComponent.modal.modal-details.visible > .overlay, body.modal-details .gallery figure.genericComponent.modal.modal-details > .overlay, .gallery body.modal-details figure.genericComponent.modal.modal-details > .overlay {
    display: none;
  }
  body.modal-details .genericComponent.modal.modal-details.visible > .inner, body.modal-details .gallery figure.genericComponent.modal.modal-details > .inner, .gallery body.modal-details figure.genericComponent.modal.modal-details > .inner {
    box-shadow: none;
    border-radius: 0;
    max-width: 960px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    overflow: visible;
    padding-left: 64px;
    position: relative;
    transition: none;
  }
  body.modal-details .genericComponent.modal.modal-details.visible > .inner > .ajax-content > .header, body.modal-details .gallery figure.genericComponent.modal.modal-details > .inner > .ajax-content > .header, .gallery body.modal-details figure.genericComponent.modal.modal-details > .inner > .ajax-content > .header,
  body.modal-details .genericComponent.modal.modal-details.visible > .inner > .normal-content > .header,
  body.modal-details .gallery figure.genericComponent.modal.modal-details > .inner > .normal-content > .header,
  .gallery body.modal-details figure.genericComponent.modal.modal-details > .inner > .normal-content > .header {
    border-bottom: 0;
    padding: 0;
    margin-bottom: 32px;
    margin-top: -4px;
  }
  body.modal-details .genericComponent.modal.modal-details.visible > .inner > .ajax-content > .header .back, body.modal-details .gallery figure.genericComponent.modal.modal-details > .inner > .ajax-content > .header .back, .gallery body.modal-details figure.genericComponent.modal.modal-details > .inner > .ajax-content > .header .back,
  body.modal-details .genericComponent.modal.modal-details.visible > .inner > .normal-content > .header .back,
  body.modal-details .gallery figure.genericComponent.modal.modal-details > .inner > .normal-content > .header .back,
  .gallery body.modal-details figure.genericComponent.modal.modal-details > .inner > .normal-content > .header .back {
    position: absolute;
    top: -8px;
    left: 0;
    width: 48px;
    height: 48px;
    margin: 0;
  }
  body.modal-details .genericComponent.modal.modal-details.visible > .inner > .ajax-content > .header .back > .inner, body.modal-details .gallery figure.genericComponent.modal.modal-details > .inner > .ajax-content > .header .back > .inner, .gallery body.modal-details figure.genericComponent.modal.modal-details > .inner > .ajax-content > .header .back > .inner,
  body.modal-details .genericComponent.modal.modal-details.visible > .inner > .normal-content > .header .back > .inner,
  body.modal-details .gallery figure.genericComponent.modal.modal-details > .inner > .normal-content > .header .back > .inner,
  .gallery body.modal-details figure.genericComponent.modal.modal-details > .inner > .normal-content > .header .back > .inner {
    padding-top: 6px;
    padding-left: 6px;
  }
  body.modal-details .genericComponent.modal.modal-details.visible > .inner > .ajax-content > .header .back > .inner .icon, body.modal-details .gallery figure.genericComponent.modal.modal-details > .inner > .ajax-content > .header .back > .inner .icon, .gallery body.modal-details figure.genericComponent.modal.modal-details > .inner > .ajax-content > .header .back > .inner .icon,
  body.modal-details .genericComponent.modal.modal-details.visible > .inner > .normal-content > .header .back > .inner .icon,
  body.modal-details .gallery figure.genericComponent.modal.modal-details > .inner > .normal-content > .header .back > .inner .icon,
  .gallery body.modal-details figure.genericComponent.modal.modal-details > .inner > .normal-content > .header .back > .inner .icon {
    font-size: 36px;
  }
  body.modal-details .genericComponent.modal.modal-details.visible > .inner > .ajax-content > .scrollArea > .body, body.modal-details .gallery figure.genericComponent.modal.modal-details > .inner > .ajax-content > .scrollArea > .body, .gallery body.modal-details figure.genericComponent.modal.modal-details > .inner > .ajax-content > .scrollArea > .body,
  body.modal-details .genericComponent.modal.modal-details.visible > .inner > .normal-content > .scrollArea > .body,
  body.modal-details .gallery figure.genericComponent.modal.modal-details > .inner > .normal-content > .scrollArea > .body,
  .gallery body.modal-details figure.genericComponent.modal.modal-details > .inner > .normal-content > .scrollArea > .body {
    padding: 0;
  }
  body.modal-details .genericComponent.modal.modal-details.visible > .inner > .ajax-content > .scrollArea > .footer, body.modal-details .gallery figure.genericComponent.modal.modal-details > .inner > .ajax-content > .scrollArea > .footer, .gallery body.modal-details figure.genericComponent.modal.modal-details > .inner > .ajax-content > .scrollArea > .footer,
  body.modal-details .genericComponent.modal.modal-details.visible > .inner > .normal-content > .scrollArea > .footer,
  body.modal-details .gallery figure.genericComponent.modal.modal-details > .inner > .normal-content > .scrollArea > .footer,
  .gallery body.modal-details figure.genericComponent.modal.modal-details > .inner > .normal-content > .scrollArea > .footer {
    border-top: 0;
    padding: 0;
    margin-top: 22px;
  }
  body.modal-details .genericComponent.modal.modal-details.visible > .inner > .ajax-content > .scrollArea > .footer > .inner, body.modal-details .gallery figure.genericComponent.modal.modal-details > .inner > .ajax-content > .scrollArea > .footer > .inner, .gallery body.modal-details figure.genericComponent.modal.modal-details > .inner > .ajax-content > .scrollArea > .footer > .inner,
  body.modal-details .genericComponent.modal.modal-details.visible > .inner > .normal-content > .scrollArea > .footer > .inner,
  body.modal-details .gallery figure.genericComponent.modal.modal-details > .inner > .normal-content > .scrollArea > .footer > .inner,
  .gallery body.modal-details figure.genericComponent.modal.modal-details > .inner > .normal-content > .scrollArea > .footer > .inner {
    display: block;
    text-align: left;
  }
  body.modal-details .genericComponent.modal.modal-details.visible > .inner > .ajax-content > .scrollArea > .footer > .inner .button, body.modal-details .gallery figure.genericComponent.modal.modal-details > .inner > .ajax-content > .scrollArea > .footer > .inner .button, .gallery body.modal-details figure.genericComponent.modal.modal-details > .inner > .ajax-content > .scrollArea > .footer > .inner .button,
  body.modal-details .genericComponent.modal.modal-details.visible > .inner > .normal-content > .scrollArea > .footer > .inner .button,
  body.modal-details .gallery figure.genericComponent.modal.modal-details > .inner > .normal-content > .scrollArea > .footer > .inner .button,
  .gallery body.modal-details figure.genericComponent.modal.modal-details > .inner > .normal-content > .scrollArea > .footer > .inner .button {
    display: inline-block;
  }
  body.modal-details .genericComponent.modal.modal-details.visible > .inner > .ajax-content > .header, body.modal-details .gallery figure.genericComponent.modal.modal-details > .inner > .ajax-content > .header, .gallery body.modal-details figure.genericComponent.modal.modal-details > .inner > .ajax-content > .header {
    margin-bottom: 40px;
  }
  body.modal-details .genericComponent.modal.modal-details.visible > .inner > .ajax-content > .header h6, body.modal-details .gallery figure.genericComponent.modal.modal-details > .inner > .ajax-content > .header h6, .gallery body.modal-details figure.genericComponent.modal.modal-details > .inner > .ajax-content > .header h6 {
    font-size: 34px;
    font-weight: 400;
    letter-spacing: 0.25px;
    line-height: 44px;
    clear: both;
    display: block;
  }
  body.modal-details .genericComponent.modal.modal-details.visible > .inner > .ajax-content > .header h6::before, body.modal-details .gallery figure.genericComponent.modal.modal-details > .inner > .ajax-content > .header h6::before, .gallery body.modal-details figure.genericComponent.modal.modal-details > .inner > .ajax-content > .header h6::before {
    display: block;
    content: "";
    margin-top: -3px;
  }
  body.modal-details .genericComponent.modal.modal-details.visible > .inner > .ajax-content > .header h6::after, body.modal-details .gallery figure.genericComponent.modal.modal-details > .inner > .ajax-content > .header h6::after, .gallery body.modal-details figure.genericComponent.modal.modal-details > .inner > .ajax-content > .header h6::after {
    display: block;
    content: "";
    margin-bottom: -9px;
  }
  body.modal-details .genericComponent.modal.modal-details.visible > .inner > .ajax-content > .header h6, body.modal-details .gallery figure.genericComponent.modal.modal-details > .inner > .ajax-content > .header h6, .gallery body.modal-details figure.genericComponent.modal.modal-details > .inner > .ajax-content > .header h6 {
    margin-left: 0;
  }
  body.modal-details .genericComponent.modal.modal-details.visible > .inner > .ajax-content > .header .timestamp, body.modal-details .gallery figure.genericComponent.modal.modal-details > .inner > .ajax-content > .header .timestamp, .gallery body.modal-details figure.genericComponent.modal.modal-details > .inner > .ajax-content > .header .timestamp {
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 0.1px;
    line-height: 20px;
    clear: both;
    display: block;
  }
  body.modal-details .genericComponent.modal.modal-details.visible > .inner > .ajax-content > .header .timestamp::before, body.modal-details .gallery figure.genericComponent.modal.modal-details > .inner > .ajax-content > .header .timestamp::before, .gallery body.modal-details figure.genericComponent.modal.modal-details > .inner > .ajax-content > .header .timestamp::before {
    display: block;
    content: "";
    height: 1px;
  }
  @-moz-document url-prefix() {
    body.modal-details .genericComponent.modal.modal-details.visible > .inner > .ajax-content > .header .timestamp::before, body.modal-details .gallery figure.genericComponent.modal.modal-details > .inner > .ajax-content > .header .timestamp::before, .gallery body.modal-details figure.genericComponent.modal.modal-details > .inner > .ajax-content > .header .timestamp::before {
      height: 0;
    }
  }
  body.modal-details .genericComponent.modal.modal-details.visible > .inner > .ajax-content > .header .timestamp::after, body.modal-details .gallery figure.genericComponent.modal.modal-details > .inner > .ajax-content > .header .timestamp::after, .gallery body.modal-details figure.genericComponent.modal.modal-details > .inner > .ajax-content > .header .timestamp::after {
    display: block;
    content: "";
    margin-bottom: -5px;
  }
  @-moz-document url-prefix() {
    body.modal-details .genericComponent.modal.modal-details.visible > .inner > .ajax-content > .header .timestamp::after, body.modal-details .gallery figure.genericComponent.modal.modal-details > .inner > .ajax-content > .header .timestamp::after, .gallery body.modal-details figure.genericComponent.modal.modal-details > .inner > .ajax-content > .header .timestamp::after {
      margin-bottom: -4px;
    }
  }
  body.modal-details .genericComponent.modal.modal-details.visible > .inner > .ajax-content > .header .timestamp, body.modal-details .gallery figure.genericComponent.modal.modal-details > .inner > .ajax-content > .header .timestamp, .gallery body.modal-details figure.genericComponent.modal.modal-details > .inner > .ajax-content > .header .timestamp {
    font-weight: 600;
    color: #999999;
    padding-top: 16px;
  }
}
@media (max-width: 1048px) and (min-width: 768px) {
  body.modal-details .genericComponent.modal.modal-details.visible > .inner > .ajax-content > .header, body.modal-details .gallery figure.genericComponent.modal.modal-details > .inner > .ajax-content > .header, .gallery body.modal-details figure.genericComponent.modal.modal-details > .inner > .ajax-content > .header {
    margin-bottom: 44px;
  }
  body.modal-details .genericComponent.modal.modal-details.visible > .inner > .ajax-content > .header .back, body.modal-details .gallery figure.genericComponent.modal.modal-details > .inner > .ajax-content > .header .back, .gallery body.modal-details figure.genericComponent.modal.modal-details > .inner > .ajax-content > .header .back {
    top: -12px;
  }
  body.modal-details .genericComponent.modal.modal-details.visible > .inner > .ajax-content > .header h6, body.modal-details .gallery figure.genericComponent.modal.modal-details > .inner > .ajax-content > .header h6, .gallery body.modal-details figure.genericComponent.modal.modal-details > .inner > .ajax-content > .header h6 {
    font-size: 24px;
    font-weight: 400;
    letter-spacing: 0;
    line-height: 32px;
    clear: both;
    display: block;
  }
  body.modal-details .genericComponent.modal.modal-details.visible > .inner > .ajax-content > .header h6::before, body.modal-details .gallery figure.genericComponent.modal.modal-details > .inner > .ajax-content > .header h6::before, .gallery body.modal-details figure.genericComponent.modal.modal-details > .inner > .ajax-content > .header h6::before {
    display: block;
    content: "";
    margin-top: -1px;
  }
  @-moz-document url-prefix() {
    body.modal-details .genericComponent.modal.modal-details.visible > .inner > .ajax-content > .header h6::before, body.modal-details .gallery figure.genericComponent.modal.modal-details > .inner > .ajax-content > .header h6::before, .gallery body.modal-details figure.genericComponent.modal.modal-details > .inner > .ajax-content > .header h6::before {
      margin-top: -2px;
    }
  }
  body.modal-details .genericComponent.modal.modal-details.visible > .inner > .ajax-content > .header h6::after, body.modal-details .gallery figure.genericComponent.modal.modal-details > .inner > .ajax-content > .header h6::after, .gallery body.modal-details figure.genericComponent.modal.modal-details > .inner > .ajax-content > .header h6::after {
    display: block;
    content: "";
    margin-bottom: -7px;
  }
  @-moz-document url-prefix() {
    body.modal-details .genericComponent.modal.modal-details.visible > .inner > .ajax-content > .header h6::after, body.modal-details .gallery figure.genericComponent.modal.modal-details > .inner > .ajax-content > .header h6::after, .gallery body.modal-details figure.genericComponent.modal.modal-details > .inner > .ajax-content > .header h6::after {
      margin-bottom: -6px;
    }
  }
  body.modal-details .genericComponent.modal.modal-details.visible > .inner > .ajax-content > .header .timestamp, body.modal-details .gallery figure.genericComponent.modal.modal-details > .inner > .ajax-content > .header .timestamp, .gallery body.modal-details figure.genericComponent.modal.modal-details > .inner > .ajax-content > .header .timestamp {
    padding-top: 8px;
  }
  body.modal-details .genericComponent.modal.modal-details.visible > .inner > .normal-content > .header .back, body.modal-details .gallery figure.genericComponent.modal.modal-details > .inner > .normal-content > .header .back, .gallery body.modal-details figure.genericComponent.modal.modal-details > .inner > .normal-content > .header .back {
    top: -12px;
  }
}
.notifications:not(body) .buttonContainer,
.noticeboard:not(body) .buttonContainer,
.requests:not(body) .buttonContainer {
  position: relative;
}
.notifications:not(body) .buttonContainer > .button.menu,
.noticeboard:not(body) .buttonContainer > .button.menu,
.requests:not(body) .buttonContainer > .button.menu {
  width: 100%;
  height: auto;
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  margin: 0;
}
.notifications:not(body) .buttonContainer > .button.menu > .inner,
.noticeboard:not(body) .buttonContainer > .button.menu > .inner,
.requests:not(body) .buttonContainer > .button.menu > .inner {
  height: 100%;
  padding-top: 18px;
  padding-bottom: 19px;
  padding-left: 17px;
  padding-right: 64px;
  border-radius: 0;
}
.notifications:not(body) .buttonContainer > .button.menu > .inner > .icon,
.noticeboard:not(body) .buttonContainer > .button.menu > .inner > .icon,
.requests:not(body) .buttonContainer > .button.menu > .inner > .icon {
  float: left;
  margin-right: 16px;
  margin-left: 0;
}
.notifications:not(body) .buttonContainer > .button.menu > .inner > .label,
.noticeboard:not(body) .buttonContainer > .button.menu > .inner > .label,
.requests:not(body) .buttonContainer > .button.menu > .inner > .label {
  width: calc(100% - 34px);
  float: left;
  margin-left: 0;
}
.notifications:not(body) .buttonContainer > .button.menu > .inner > .label > .timestamp,
.noticeboard:not(body) .buttonContainer > .button.menu > .inner > .label > .timestamp,
.requests:not(body) .buttonContainer > .button.menu > .inner > .label > .timestamp {
  display: block;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.4px;
  line-height: 16px;
  clear: both;
  display: block;
}
.notifications:not(body) .buttonContainer > .button.menu > .inner > .label > .timestamp::before,
.noticeboard:not(body) .buttonContainer > .button.menu > .inner > .label > .timestamp::before,
.requests:not(body) .buttonContainer > .button.menu > .inner > .label > .timestamp::before {
  display: block;
  content: "";
  height: 4px;
}
@-moz-document url-prefix() {
  .notifications:not(body) .buttonContainer > .button.menu > .inner > .label > .timestamp::before,
  .noticeboard:not(body) .buttonContainer > .button.menu > .inner > .label > .timestamp::before,
  .requests:not(body) .buttonContainer > .button.menu > .inner > .label > .timestamp::before {
    height: 3px;
  }
}
.notifications:not(body) .buttonContainer > .button.menu > .inner > .label > .timestamp::after,
.noticeboard:not(body) .buttonContainer > .button.menu > .inner > .label > .timestamp::after,
.requests:not(body) .buttonContainer > .button.menu > .inner > .label > .timestamp::after {
  display: block;
  content: "";
  margin-bottom: -4px;
}
@-moz-document url-prefix() {
  .notifications:not(body) .buttonContainer > .button.menu > .inner > .label > .timestamp::after,
  .noticeboard:not(body) .buttonContainer > .button.menu > .inner > .label > .timestamp::after,
  .requests:not(body) .buttonContainer > .button.menu > .inner > .label > .timestamp::after {
    margin-bottom: -3px;
  }
}
.notifications:not(body) .buttonContainer > .button.menu > .inner > .label > .timestamp,
.noticeboard:not(body) .buttonContainer > .button.menu > .inner > .label > .timestamp,
.requests:not(body) .buttonContainer > .button.menu > .inner > .label > .timestamp {
  color: #999999;
  padding-bottom: 10px;
  margin-top: -1px;
}
@media (hover: hover) and (pointer: fine) {
  .notifications:not(body) .buttonContainer > .button.menu:hover > .inner > .label > .timestamp,
  .noticeboard:not(body) .buttonContainer > .button.menu:hover > .inner > .label > .timestamp,
  .requests:not(body) .buttonContainer > .button.menu:hover > .inner > .label > .timestamp {
    color: #666666;
  }
}
.notifications:not(body) .buttonContainer > .button.menu:focus > .inner > .label > .timestamp,
.noticeboard:not(body) .buttonContainer > .button.menu:focus > .inner > .label > .timestamp,
.requests:not(body) .buttonContainer > .button.menu:focus > .inner > .label > .timestamp {
  color: #666666;
}
.notifications:not(body) .buttonContainer > .button.menu.unread > .inner > .icon,
.noticeboard:not(body) .buttonContainer > .button.menu.unread > .inner > .icon,
.requests:not(body) .buttonContainer > .button.menu.unread > .inner > .icon {
  color: #4068e1 !important;
}
.notifications:not(body) .buttonContainer > .button.menu.unread > .inner > .label,
.noticeboard:not(body) .buttonContainer > .button.menu.unread > .inner > .label,
.requests:not(body) .buttonContainer > .button.menu.unread > .inner > .label {
  color: #444444;
  font-weight: 600;
}
.notifications:not(body) .buttonContainer > .button.menu.unread > .inner > .label > .timestamp,
.noticeboard:not(body) .buttonContainer > .button.menu.unread > .inner > .label > .timestamp,
.requests:not(body) .buttonContainer > .button.menu.unread > .inner > .label > .timestamp {
  font-weight: 600;
  color: #4068e1 !important;
}
.notifications:not(body) .buttonContainer > .button.menu.important.unread > .inner > .icon,
.notifications:not(body) .buttonContainer > .button.menu.important.unread > .inner .timestamp,
.noticeboard:not(body) .buttonContainer > .button.menu.important.unread > .inner > .icon,
.noticeboard:not(body) .buttonContainer > .button.menu.important.unread > .inner .timestamp,
.requests:not(body) .buttonContainer > .button.menu.important.unread > .inner > .icon,
.requests:not(body) .buttonContainer > .button.menu.important.unread > .inner .timestamp {
  color: #db6056 !important;
}
.notifications:not(body) .buttonContainer .circleButton,
.noticeboard:not(body) .buttonContainer .circleButton,
.requests:not(body) .buttonContainer .circleButton {
  position: absolute;
  top: calc(50% - 24px);
  right: 8px;
}
.notifications:not(body) .buttonContainer .circleButton:not(.disabled):not(:focus):not(.open) .inner,
.noticeboard:not(body) .buttonContainer .circleButton:not(.disabled):not(:focus):not(.open) .inner,
.requests:not(body) .buttonContainer .circleButton:not(.disabled):not(:focus):not(.open) .inner {
  background: transparent;
}
.notifications:not(body) .buttonContainer .circleButton:not(.disabled):not(:focus):not(.open) .inner .icon,
.noticeboard:not(body) .buttonContainer .circleButton:not(.disabled):not(:focus):not(.open) .inner .icon,
.requests:not(body) .buttonContainer .circleButton:not(.disabled):not(:focus):not(.open) .inner .icon {
  color: #aaaaaa;
}
@media (hover: hover) and (pointer: fine) {
  .notifications:not(body) .buttonContainer .circleButton:not(.disabled):not(:focus):not(.open):hover .inner,
  .noticeboard:not(body) .buttonContainer .circleButton:not(.disabled):not(:focus):not(.open):hover .inner,
  .requests:not(body) .buttonContainer .circleButton:not(.disabled):not(:focus):not(.open):hover .inner {
    background: #d9d9d9;
  }
  .notifications:not(body) .buttonContainer .circleButton:not(.disabled):not(:focus):not(.open):hover .inner .icon,
  .noticeboard:not(body) .buttonContainer .circleButton:not(.disabled):not(:focus):not(.open):hover .inner .icon,
  .requests:not(body) .buttonContainer .circleButton:not(.disabled):not(:focus):not(.open):hover .inner .icon {
    color: #666666;
  }
}
@media (hover: hover) and (pointer: fine) {
  .notifications:not(body) .buttonContainer:hover > .button:not(.disabled):not(:focus) .inner,
  .noticeboard:not(body) .buttonContainer:hover > .button:not(.disabled):not(:focus) .inner,
  .requests:not(body) .buttonContainer:hover > .button:not(.disabled):not(:focus) .inner {
    background: #eeeeee;
    color: #444444;
  }
  .notifications:not(body) .buttonContainer:hover > .button:not(.disabled):not(:focus) .inner .timestamp,
  .noticeboard:not(body) .buttonContainer:hover > .button:not(.disabled):not(:focus) .inner .timestamp,
  .requests:not(body) .buttonContainer:hover > .button:not(.disabled):not(:focus) .inner .timestamp {
    color: #666666;
  }
}
.notifications:not(body) .ajax-loading, .notifications:not(body) .gallery figure, .gallery .notifications:not(body) figure,
.noticeboard:not(body) .ajax-loading,
.noticeboard:not(body) .gallery figure,
.gallery .noticeboard:not(body) figure,
.requests:not(body) .ajax-loading,
.requests:not(body) .gallery figure,
.gallery .requests:not(body) figure {
  padding-right: 24px;
  padding-top: 32px;
  padding-bottom: 32px;
  padding-left: 21px;
}
.notifications:not(body) .ajax-loading:after, .notifications:not(body) .gallery figure:after, .gallery .notifications:not(body) figure:after,
.noticeboard:not(body) .ajax-loading:after,
.noticeboard:not(body) .gallery figure:after,
.gallery .noticeboard:not(body) figure:after,
.requests:not(body) .ajax-loading:after,
.requests:not(body) .gallery figure:after,
.gallery .requests:not(body) figure:after {
  content: "";
  display: table;
  clear: both;
}
@media (max-width: 767px) {
  .notifications:not(body) .ajax-loading, .notifications:not(body) .gallery figure, .gallery .notifications:not(body) figure,
  .noticeboard:not(body) .ajax-loading,
  .noticeboard:not(body) .gallery figure,
  .gallery .noticeboard:not(body) figure,
  .requests:not(body) .ajax-loading,
  .requests:not(body) .gallery figure,
  .gallery .requests:not(body) figure {
    padding-left: 13px;
    padding-right: 16px;
    padding-top: 16px;
    padding-bottom: 16px;
  }
}
.notifications:not(body) .ajax-loading .icon, .notifications:not(body) .gallery figure .icon, .gallery .notifications:not(body) figure .icon,
.noticeboard:not(body) .ajax-loading .icon,
.noticeboard:not(body) .gallery figure .icon,
.gallery .noticeboard:not(body) figure .icon,
.requests:not(body) .ajax-loading .icon,
.requests:not(body) .gallery figure .icon,
.gallery .requests:not(body) figure .icon {
  height: 24px;
  width: 24px;
  border-radius: 50%;
  float: left;
  margin-right: 13px;
}
.notifications:not(body) .ajax-loading .textContainer, .notifications:not(body) .gallery figure .textContainer, .gallery .notifications:not(body) figure .textContainer,
.noticeboard:not(body) .ajax-loading .textContainer,
.noticeboard:not(body) .gallery figure .textContainer,
.gallery .noticeboard:not(body) figure .textContainer,
.requests:not(body) .ajax-loading .textContainer,
.requests:not(body) .gallery figure .textContainer,
.gallery .requests:not(body) figure .textContainer {
  background: transparent;
  float: left;
  width: calc(100% - 24px - 16px);
}
.notifications:not(body) .ajax-loading .textContainer .title, .notifications:not(body) .gallery figure .textContainer .title, .gallery .notifications:not(body) figure .textContainer .title,
.noticeboard:not(body) .ajax-loading .textContainer .title,
.noticeboard:not(body) .gallery figure .textContainer .title,
.gallery .noticeboard:not(body) figure .textContainer .title,
.requests:not(body) .ajax-loading .textContainer .title,
.requests:not(body) .gallery figure .textContainer .title,
.gallery .requests:not(body) figure .textContainer .title {
  height: 16px;
  width: 100%;
  max-width: 264px;
  margin-bottom: 8px;
  border-radius: 2px;
}
.notifications:not(body) .ajax-loading .textContainer .description, .notifications:not(body) .gallery figure .textContainer .description, .gallery .notifications:not(body) figure .textContainer .description,
.noticeboard:not(body) .ajax-loading .textContainer .description,
.noticeboard:not(body) .gallery figure .textContainer .description,
.gallery .noticeboard:not(body) figure .textContainer .description,
.requests:not(body) .ajax-loading .textContainer .description,
.requests:not(body) .gallery figure .textContainer .description,
.gallery .requests:not(body) figure .textContainer .description {
  height: 12px;
  width: 100%;
  max-width: 520px;
  margin-bottom: 8px;
  border-radius: 2px;
}
.notifications:not(body) .ajax-loading .textContainer .timestamp, .notifications:not(body) .gallery figure .textContainer .timestamp, .gallery .notifications:not(body) figure .textContainer .timestamp,
.noticeboard:not(body) .ajax-loading .textContainer .timestamp,
.noticeboard:not(body) .gallery figure .textContainer .timestamp,
.gallery .noticeboard:not(body) figure .textContainer .timestamp,
.requests:not(body) .ajax-loading .textContainer .timestamp,
.requests:not(body) .gallery figure .textContainer .timestamp,
.gallery .requests:not(body) figure .textContainer .timestamp {
  height: 12px;
  width: 100%;
  max-width: 120px;
  border-radius: 2px;
}

.dropdown-notifications .ajax-loading, .dropdown-notifications .gallery figure, .gallery .dropdown-notifications figure {
  display: none;
}

.rightCol > .panel > .body > .notifications > .ajax-loading, .gallery .rightCol > .panel > .body > .notifications > figure {
  display: none;
}

.attachment {
  margin: 5px 10px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  flex-wrap: wrap;
}
.attachment .attachment-label {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  width: 125px;
  height: 90px;
  color: #51bf9a;
  border: 2px solid #51bf9a;
  border-radius: 4px;
  cursor: pointer;
  font-weight: bold;
  transition: color 0.1s linear, border 0.1s linear;
  position: relative;
}
.attachment .attachment-label.error {
  color: red;
  border-color: lightgray;
  cursor: default;
  pointer-events: none;
}
.attachment .attachment-label.error:hover {
  color: red;
}
.attachment .attachment-label.disabled {
  border-color: lightgray;
}
.attachment .attachment-label.disabled:hover {
  border-color: lightgray;
}
.attachment .attachment-label {
  /* Images */
}
.attachment .attachment-label img {
  max-height: 100%;
  max-width: 100%;
  cursor: pointer;
}
.attachment .attachment-label {
  /* Displaying Files */
}
.attachment .attachment-label div {
  color: #304ea9;
  text-align: center;
}
.attachment .attachment-label div .icon {
  transform: scale(1.5);
}
.attachment .attachment-label div p {
  color: #304ea9;
  font-size: 10px;
}
.attachment .attachment-label div:hover .icon {
  transform: scale(1) !important;
}
.attachment .attachment-label .icon {
  transform: scale(2.5);
  margin: 10px 0 !important;
  transition: transform 0.05s linear;
}
.attachment .attachment-label p {
  color: #51bf9a;
  font-size: 10px;
}
.attachment .attachment-label {
  /* Overlay INSIDE the label (Grays out image/file on hover) */
}
.attachment .attachment-label .overlay {
  opacity: 0;
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 3;
  background-color: rgba(0, 0, 0, 0.1);
  transition: opacity 0.2s linear;
}
.attachment .attachment-label .icon-cross-red {
  opacity: 0;
  background: url("../../images/icon-cross-alt-red.svg") no-repeat center;
  height: 20px;
  width: 20px;
  display: inline-block;
  position: absolute;
  top: 2px;
  right: 2px;
  transition: opacity 0.2s linear;
  pointer-events: none;
  z-index: 4;
}
.attachment .attachment-label:hover {
  color: #35896d;
  border-color: #35896d;
}
.attachment .attachment-label:hover p.empty {
  color: #35896d;
}
.attachment .attachment-label:hover .overlay {
  opacity: 1;
}
.attachment .attachment-label:hover .icon.empty {
  transform: scale(2.6);
}
.attachment .attachment-label:hover .icon-cross-red {
  opacity: 1;
  pointer-events: all;
}
.attachment .download-attachment {
  text-align: center;
  width: 100%;
  margin-top: 5px;
}
.attachment .hide {
  display: none !important;
}
.attachment > div {
  display: flex;
}
.attachment .button {
  margin: 0 10px;
  padding: 0;
}
.attachment .label {
  top: 0px !important;
  left: 0px !important;
  color: #ffffff !important;
}
.attachment .overlay-container {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 99999; /* Sit on top */
  padding-top: 100px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0, 0, 0); /* Fallback color */
  background-color: rgba(0, 0, 0, 0.9); /* Black w/ opacity */
  text-align: center;
}
.attachment .overlay-container .close {
  position: absolute;
  right: 20px;
  top: 20px;
  height: 20px;
  width: 20px;
  z-index: 11;
  font-size: 30px;
  color: #ffffff;
  cursor: pointer;
}
.attachment .overlay-container .rotate {
  position: absolute;
  right: 60px;
  top: 30px;
  z-index: 11;
  font-size: 26px;
  color: #ffffff;
  cursor: pointer;
}
.attachment .overlay-container img {
  margin: auto;
  display: block;
  max-width: 75vw;
  max-height: 75vh;
  cursor: zoom-in;
}
.attachment .overlay-container img.zoomed {
  max-width: none;
  max-height: none;
  cursor: zoom-out;
}
.attachment .overlay-container embed {
  width: 95vw;
  height: 80vh;
}
.attachment .errorText {
  color: #db6056;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.4px;
  line-height: 16px;
  clear: both;
  display: block;
}
.attachment .errorText::before {
  display: block;
  content: "";
  height: 4px;
}
@-moz-document url-prefix() {
  .attachment .errorText::before {
    height: 3px;
  }
}
.attachment .errorText::after {
  display: block;
  content: "";
  margin-bottom: -4px;
}
@-moz-document url-prefix() {
  .attachment .errorText::after {
    margin-bottom: -3px;
  }
}
.attachment .errorText {
  padding-left: 15px;
  display: none;
}
.attachment.error::after {
  top: 50px !important;
}
.attachment.error .inner {
  background-color: #db6056 !important;
}
.attachment.error .errorText {
  display: block;
}

.thumbnail {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 60px;
  height: 60px;
  position: absolute;
  right: -20px;
  top: 0;
}
.thumbnail img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
}
.thumbnail span {
  color: #aaaaaa;
  transform: rotate(150deg) scale(1.5);
}

@media (max-width: 414px) {
  .attachment {
    margin: 5px auto;
    flex-direction: column;
    align-items: center;
  }
  .attachment > div {
    flex-direction: column;
  }
  .attachment .button {
    width: 250px;
    margin-bottom: 10px;
  }
}
/*! PhotoSwipe main CSS by Dmitry Semenov | photoswipe.com | MIT license */
/*
	Styles for basic PhotoSwipe functionality (sliding area, open/close transitions)
*/
/* pswp = photoswipe */
.pswp {
  display: none;
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  overflow: hidden;
  touch-action: none;
  z-index: 1500;
  -webkit-text-size-adjust: 100%;
  /* create separate layer, to avoid paint on window.onscroll in webkit/blink */
  -webkit-backface-visibility: hidden;
  outline: none;
}
.pswp img {
  max-width: none;
}

/* style is added when JS option showHideOpacity is set to true */
.pswp--animate_opacity {
  /* 0.001, because opacity:0 doesn't trigger Paint action, which causes lag at start of transition */
  opacity: 0.001;
  will-change: opacity;
  /* for open/close transition */
  transition: opacity 0.4s cubic-bezier(0.4, 0, 0.22, 1);
}

.pswp--open {
  display: block;
}

.pswp--zoom-allowed .pswp__img {
  /* autoprefixer: off */
  cursor: -webkit-zoom-in;
  cursor: -moz-zoom-in;
  cursor: zoom-in;
}

.pswp--zoomed-in .pswp__img {
  /* autoprefixer: off */
  cursor: -webkit-grab;
  cursor: -moz-grab;
  cursor: grab;
}

.pswp--dragging .pswp__img {
  /* autoprefixer: off */
  cursor: -webkit-grabbing;
  cursor: -moz-grabbing;
  cursor: grabbing;
}

/*
	Background is added as a separate element.
	As animating opacity is much faster than animating rgba() background-color.
*/
.pswp__bg {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: #000000;
  opacity: 0;
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  will-change: opacity;
}

.pswp__scroll-wrap {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.pswp__container,
.pswp__zoom-wrap {
  touch-action: none;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}

/* Prevent selection and tap highlights */
.pswp__container,
.pswp__img {
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -webkit-touch-callout: none;
}

.pswp__zoom-wrap {
  position: absolute;
  width: 100%;
  transform-origin: left top;
  /* for open/close transition */
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.22, 1);
}

.pswp__bg {
  will-change: opacity;
  /* for open/close transition */
  transition: opacity 0.4s cubic-bezier(0.4, 0, 0.22, 1);
}

.pswp--animated-in .pswp__bg,
.pswp--animated-in .pswp__zoom-wrap {
  transition: none;
}

.pswp__container,
.pswp__zoom-wrap {
  -webkit-backface-visibility: hidden;
}

.pswp__item {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  overflow: hidden;
}

.pswp__img {
  position: absolute;
  width: auto;
  height: auto;
  top: 0;
  left: 0;
}

/*
	stretched thumbnail or div placeholder element (see below)
	style is added to avoid flickering in webkit/blink when layers overlap
*/
.pswp__img--placeholder {
  -webkit-backface-visibility: hidden;
}

/*
	div element that matches size of large image
	large image loads on top of it
*/
.pswp__img--placeholder--blank {
  background: #d9d9d9;
}

.pswp--ie .pswp__img {
  width: 100% !important;
  height: auto !important;
  left: 0;
  top: 0;
}

/*
	Error message appears when image is not loaded
	(JS option errorMsg controls markup)
*/
.pswp__error-msg {
  position: absolute;
  left: 0;
  top: 50%;
  width: 100%;
  text-align: center;
  font-size: 14px;
  line-height: 16px;
  margin-top: -8px;
  color: #666666;
}

.pswp__error-msg a {
  color: #666666;
  text-decoration: underline;
}

/*! PhotoSwipe Default UI CSS by Dmitry Semenov | photoswipe.com | MIT license */
/*

	Contents:

	1. Buttons
	2. Share modal and links
	3. Index indicator ("1 of X" counter)
	4. Caption
	5. Loading indicator
	6. Additional styles (root element, top bar, idle state, hidden state, etc.)

*/
/*

	1. Buttons

 */
/* <button> css reset */
.pswp__button {
  width: 44px;
  height: 44px;
  position: relative;
  background: none;
  cursor: pointer;
  overflow: visible;
  -webkit-appearance: none;
  display: block;
  border: 0;
  padding: 0;
  margin: 0;
  float: right;
  opacity: 0.75;
  transition: opacity 0.2s;
  box-shadow: none;
}
.pswp__button:focus, .pswp__button:hover {
  opacity: 1;
}
.pswp__button:active {
  outline: none;
  opacity: 0.9;
}
.pswp__button::-moz-focus-inner {
  padding: 0;
  border: 0;
}

/* pswp__ui--over-close class it added when mouse is over element that should close gallery */
.pswp__ui--over-close .pswp__button--close {
  opacity: 1;
}

.pswp__button,
.pswp__button--arrow--left:before,
.pswp__button--arrow--right:before {
  width: 44px;
  height: 44px;
}

@media (min-resolution: 105dpi), (min-resolution: 1.1dppx) {
  /* Serve SVG sprite if browser supports SVG and resolution is more than 105dpi */
  .pswp--svg .pswp__button--arrow--left,
  .pswp--svg .pswp__button--arrow--right {
    background: none;
  }
}
.pswp__button--close {
  background-position: 0 -44px;
}

.pswp__button--share {
  background-position: -44px -44px;
}

.pswp__button--fs {
  display: none;
}

.pswp--supports-fs .pswp__button--fs {
  display: block;
}

.pswp--fs .pswp__button--fs {
  background-position: -44px 0;
}

.pswp__button--zoom {
  display: none;
  background-position: -88px 0;
}

.pswp--zoom-allowed .pswp__button--zoom {
  display: block;
}

.pswp--zoomed-in .pswp__button--zoom {
  background-position: -132px 0;
}

/* no arrows on touch screens */
.pswp--touch .pswp__button--arrow--left,
.pswp--touch .pswp__button--arrow--right {
  visibility: hidden;
}

/*
	Arrow buttons hit area
	(icon is added to :before pseudo-element)
*/
.pswp__button--arrow--left,
.pswp__button--arrow--right {
  background: none;
  top: 50%;
  margin-top: -50px;
  width: 70px;
  height: 100px;
  position: absolute;
}

.pswp__button--arrow--left {
  left: 0;
}

.pswp__button--arrow--right {
  right: 0;
}

.pswp__button--arrow--left:before,
.pswp__button--arrow--right:before {
  content: "";
  top: 35px;
  background-color: rgba(0, 0, 0, 0.3);
  height: 30px;
  width: 32px;
  position: absolute;
}

.pswp__button--arrow--left:before {
  left: 6px;
  background-position: -138px -44px;
}

.pswp__button--arrow--right:before {
  right: 6px;
  background-position: -94px -44px;
}

/*

	2. Share modal/popup and links

 */
.pswp__counter,
.pswp__share-modal {
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

.pswp__share-modal {
  display: block;
  background: rgba(0, 0, 0, 0.5);
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  padding: 10px;
  position: absolute;
  z-index: 1600;
  opacity: 0;
  transition: opacity 0.25s ease-out;
  -webkit-backface-visibility: hidden;
  will-change: opacity;
}

.pswp__share-modal--hidden {
  display: none;
}

.pswp__share-tooltip {
  z-index: 1620;
  position: absolute;
  background: #FFF;
  top: 56px;
  border-radius: 2px;
  display: block;
  width: auto;
  right: 44px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25);
  transform: translateY(6px);
  transition: transform 0.25s;
  -webkit-backface-visibility: hidden;
  will-change: transform;
}
.pswp__share-tooltip a {
  display: block;
  padding: 8px 12px;
  color: #000;
  text-decoration: none;
  font-size: 14px;
  line-height: 18px;
}
.pswp__share-tooltip a:hover {
  text-decoration: none;
  color: #000;
}
.pswp__share-tooltip a:first-child {
  /* round corners on the first/last list item */
  border-radius: 2px 2px 0 0;
}
.pswp__share-tooltip a:last-child {
  border-radius: 0 0 2px 2px;
}

.pswp__share-modal--fade-in {
  opacity: 1;
}
.pswp__share-modal--fade-in .pswp__share-tooltip {
  transform: translateY(0);
}

/* increase size of share links on touch devices */
.pswp--touch .pswp__share-tooltip a {
  padding: 16px 12px;
}

a.pswp__share--facebook:before {
  content: "";
  display: block;
  width: 0;
  height: 0;
  position: absolute;
  top: -12px;
  right: 15px;
  border: 6px solid rgba(0, 0, 0, 0);
  border-bottom-color: #FFF;
  -webkit-pointer-events: none;
  -moz-pointer-events: none;
  pointer-events: none;
}
a.pswp__share--facebook:hover {
  background: #3E5C9A;
  color: #FFF;
}
a.pswp__share--facebook:hover:before {
  border-bottom-color: #3E5C9A;
}

a.pswp__share--twitter:hover {
  background: #55ACEE;
  color: #FFF;
}

a.pswp__share--pinterest:hover {
  background: #CCC;
  color: #CE272D;
}

a.pswp__share--download:hover {
  background: #DDD;
}

/*

	3. Index indicator ("1 of X" counter)

 */
.pswp__counter {
  position: absolute;
  left: 0;
  top: 0;
  height: 44px;
  font-size: 13px;
  line-height: 44px;
  color: #FFF;
  opacity: 0.75;
  padding: 0 10px;
}

/*

	4. Caption

 */
.pswp__caption {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  min-height: 44px;
}
.pswp__caption small {
  font-size: 11px;
  color: #BBB;
}

.pswp__caption__center {
  text-align: left;
  max-width: 420px;
  margin: 0 auto;
  font-size: 13px;
  padding: 10px;
  line-height: 20px;
  color: #CCC;
}

.pswp__caption--empty {
  display: none;
}

/* Fake caption element, used to calculate height of next/prev image */
.pswp__caption--fake {
  visibility: hidden;
}

/*

	5. Loading indicator (preloader)

	You can play with it here - http://codepen.io/dimsemenov/pen/yyBWoR

 */
.pswp__preloader {
  width: 44px;
  height: 44px;
  position: absolute;
  top: 0;
  left: 50%;
  margin-left: -22px;
  opacity: 0;
  transition: opacity 0.25s ease-out;
  will-change: opacity;
  direction: ltr;
}

.pswp__preloader__icn {
  width: 20px;
  height: 20px;
  margin: 12px;
}

.pswp__preloader--active {
  opacity: 1;
}
.pswp__preloader--active .pswp__preloader__icn {
  /* We use .gif in browsers that don't support CSS animation */
}

.pswp--css_animation .pswp__preloader--active {
  opacity: 1;
}
.pswp--css_animation .pswp__preloader--active .pswp__preloader__icn {
  animation: clockwise 500ms linear infinite;
}
.pswp--css_animation .pswp__preloader--active .pswp__preloader__donut {
  animation: donut-rotate 1000ms cubic-bezier(0.4, 0, 0.22, 1) infinite;
}
.pswp--css_animation .pswp__preloader__icn {
  background: none;
  opacity: 0.75;
  width: 14px;
  height: 14px;
  position: absolute;
  left: 15px;
  top: 15px;
  margin: 0;
}
.pswp--css_animation .pswp__preloader__cut {
  position: relative;
  width: 7px;
  height: 14px;
  overflow: hidden;
}
.pswp--css_animation .pswp__preloader__donut {
  box-sizing: border-box;
  width: 14px;
  height: 14px;
  border: 2px solid #FFF;
  border-radius: 50%;
  border-left-color: transparent;
  border-bottom-color: transparent;
  position: absolute;
  top: 0;
  left: 0;
  background: none;
  margin: 0;
}

@media screen and (max-width: 1024px) {
  .pswp__preloader {
    position: relative;
    left: auto;
    top: auto;
    margin: 0;
    float: right;
  }
}
@keyframes clockwise {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes donut-rotate {
  0% {
    transform: rotate(0);
  }
  50% {
    transform: rotate(-140deg);
  }
  100% {
    transform: rotate(0);
  }
}
/*

	6. Additional styles

 */
/* root element of UI */
.pswp__ui {
  -webkit-font-smoothing: auto;
  visibility: visible;
  opacity: 1;
  z-index: 1550;
}

/* top black bar with buttons and "1 of X" indicator */
.pswp__top-bar {
  position: absolute;
  left: 0;
  top: 0;
  height: 44px;
  width: 100%;
}

.pswp__caption,
.pswp__top-bar,
.pswp--has_mouse .pswp__button--arrow--left,
.pswp--has_mouse .pswp__button--arrow--right {
  -webkit-backface-visibility: hidden;
  will-change: opacity;
  transition: opacity 0.4s cubic-bezier(0.4, 0, 0.22, 1);
}

/* pswp--has_mouse class is added only when two subsequent mousemove events occur */
.pswp--has_mouse .pswp__button--arrow--left,
.pswp--has_mouse .pswp__button--arrow--right {
  visibility: visible;
}

.pswp__top-bar,
.pswp__caption {
  background-color: rgba(0, 0, 0, 0.5);
}

/* pswp__ui--fit class is added when main image "fits" between top bar and bottom bar (caption) */
.pswp__ui--fit .pswp__top-bar,
.pswp__ui--fit .pswp__caption {
  background-color: rgba(0, 0, 0, 0.3);
}

/* pswp__ui--idle class is added when mouse isn't moving for several seconds (JS option timeToIdle) */
.pswp__ui--idle .pswp__top-bar {
  opacity: 0;
}
.pswp__ui--idle .pswp__button--arrow--left,
.pswp__ui--idle .pswp__button--arrow--right {
  opacity: 0 !important;
}

.pswp--zoomed-in .pswp__ui--idle .pswp__caption {
  opacity: 0;
}

.pswp__button--arrow--left,
.pswp__button--arrow--right {
  opacity: 0;
}

.pswp--has_mouse .pswp__button--arrow--left,
.pswp--has_mouse .pswp__button--arrow--right {
  opacity: 1;
}

/*
	pswp__ui--hidden class is added when controls are hidden
	e.g. when user taps to toggle visibility of controls
*/
.pswp__ui--hidden .pswp__top-bar,
.pswp__ui--hidden .pswp__caption,
.pswp__ui--hidden .pswp__button--arrow--left,
.pswp__ui--hidden .pswp__button--arrow--right {
  /* Force paint & create composition layer for controls. */
  opacity: 0.001;
}

/* pswp__ui--one-slide class is added when there is just one item in gallery */
.pswp__ui--one-slide .pswp__button--arrow--left,
.pswp__ui--one-slide .pswp__button--arrow--right,
.pswp__ui--one-slide .pswp__counter {
  display: none;
}

.pswp__element--disabled {
  display: none !important;
}

.gallery:after {
  content: "";
  display: table;
  clear: both;
}
.gallery {
  width: calc(100% + 8px);
  margin-bottom: 20px;
}
.gallery figure {
  float: left;
  position: relative;
  width: calc(25% - 8px);
  padding-bottom: calc(25% - 8px);
  height: 0;
  margin-right: 8px;
  margin-bottom: 8px;
}
.gallery figure > a:first-child {
  display: block;
  border-radius: 0;
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  overflow: hidden;
}
@media (hover: hover) and (pointer: fine) {
  .gallery figure > a:first-child:hover .rippleContainer {
    background: rgba(255, 255, 255, 0.15);
  }
}
.gallery figure > a:first-child:focus .rippleContainer {
  background: rgba(255, 255, 255, 0.15);
}
.gallery figure > a:first-child span {
  display: block;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
}
.gallery figure > a:first-child span .rippleContainer {
  width: 100%;
  height: 100%;
  background: transparent;
  transition: background-color 0.1s linear;
}
.gallery figure > a:first-child span .rippleContainer .ripple {
  background: rgba(255, 255, 255, 0.2);
}
.gallery figure figcaption {
  display: none;
}
@media (max-width: 640px) {
  .gallery figure {
    width: calc(33.3% - 8px);
    padding-bottom: calc(33.3% - 8px);
  }
}

.pswp .pswp__top-bar {
  background: transparent;
}
.pswp .pswp__top-bar .pswp__counter {
  display: none;
}
.pswp .pswp__top-bar .pswp__preloader {
  display: none !important;
}
.pswp .pswp__top-bar .pswp__button--close {
  width: 48px;
  height: 48px;
  top: 8px;
  right: 8px;
}
@media (max-width: 640px) {
  .pswp .pswp__top-bar .pswp__button--close {
    top: 4px;
    right: 4px;
  }
}
.pswp .pswp__button--arrow--left,
.pswp .pswp__button--arrow--right {
  background: none;
  margin-top: -24px;
  width: 48px;
  height: 48px;
}
.pswp .pswp__button--arrow--left::before,
.pswp .pswp__button--arrow--right::before {
  content: none;
}
.pswp .pswp__button--arrow--left {
  left: 8px;
}
.pswp .pswp__button--arrow--right {
  right: 8px;
}
.pswp .pswp__caption {
  background: rgba(0, 0, 0, 0.6);
  transition: opacity 0.1s linear;
  min-height: 48px;
  padding-top: 14px;
  padding-bottom: 14px;
}
.pswp .pswp__caption.pswp__caption--empty {
  display: block;
  opacity: 0;
}
.pswp .pswp__caption .pswp__caption__center {
  text-align: center;
  color: #eeeeee;
  font-size: 12pt;
  font-weight: 400;
  letter-spacing: 0.5px;
  line-height: 20px;
  clear: both;
  display: block;
}
.pswp .pswp__caption .pswp__caption__center::before {
  display: block;
  content: "";
  height: 1px;
}
@-moz-document url-prefix() {
  .pswp .pswp__caption .pswp__caption__center::before {
    height: 0;
  }
}
.pswp .pswp__caption .pswp__caption__center::after {
  display: block;
  content: "";
  margin-bottom: -5px;
}
@-moz-document url-prefix() {
  .pswp .pswp__caption .pswp__caption__center::after {
    margin-bottom: -4px;
  }
}
.pswp .pswp__caption .pswp__caption__center {
  padding: 0;
}
.pswp .pswp__caption .pswp__caption__center::before, .pswp .pswp__caption .pswp__caption__center::after {
  content: none;
}

.new-generic-popup {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 14px;
}
.new-generic-popup * {
  box-sizing: border-box;
}
.new-generic-popup .generic-popup-content {
  width: -moz-max-content;
  width: max-content;
  height: -moz-max-content;
  height: max-content;
  max-width: 1250px;
  max-height: 95%;
  background: var(--white-1);
  border-radius: 5px;
  position: relative;
  padding: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  min-width: 380px;
  text-align: center;
  box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 1px;
}
.new-generic-popup .generic-popup-content #popup_text {
  width: 90%;
  margin-bottom: 10px;
  margin-top: 0px;
  font-weight: bold;
  font-size: 16px;
}
.new-generic-popup .generic-popup-content textarea {
  width: 100%;
  min-height: 80px;
}
.new-generic-popup .generic-popup-content p {
  padding-bottom: 5px !important;
}
.new-generic-popup .generic-popup-content .button-section {
  display: flex;
  width: 50%;
  justify-content: space-between;
}
.new-generic-popup .generic-popup-content .button-section button {
  cursor: pointer;
}
.new-generic-popup .generic-popup-content .button-section button.ok {
  background: var(--green-1) !important;
  border: var(--green-2);
  cursor: default;
  pointer-events: none;
}
.new-generic-popup .generic-popup-content .button-section button.error {
  background: var(--red-1) !important;
  border: var(--red-2);
  cursor: default;
  pointer-events: none;
}
.new-generic-popup .generic-popup-content.loading {
  width: 30%;
  height: 30%;
}
.new-generic-popup .generic-popup-content .popup-form-section {
  width: 90%;
  margin: 0 auto;
}
.new-generic-popup .generic-popup-content .popup-form-section:not(:last-child) {
  margin-bottom: 20px;
}
.new-generic-popup .generic-popup-content .popup-form-section .loading-spinner {
  width: 20px;
  height: 20px;
}
.new-generic-popup .generic-popup-content .popup-form-section .popup-form-label-div {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: -moz-max-content;
  width: max-content;
  margin-bottom: 5px;
}
.new-generic-popup .generic-popup-content .popup-form-section .popup-form-label-div .icon {
  margin-left: 5px;
  position: relative;
}
.new-generic-popup .generic-popup-content .popup-form-section .popup-form-label-div .help-text-popup {
  width: 400px;
  height: -moz-max-content;
  height: max-content;
  position: absolute;
  background: white;
  left: 20px;
  border-radius: 3px;
  padding: 5px;
  text-align: left;
}
.new-generic-popup .generic-popup-content .popup-form-section .popup-form-label {
  font-weight: bold;
  margin: 0;
  align-self: flex-start;
  text-align: left;
  padding: 0 !important;
}
.new-generic-popup .generic-popup-content .popup-form-section .popup-form-input {
  width: 100%;
  padding-left: 5px;
}
.new-generic-popup .generic-popup-content .popup-form-section .popup-form-input.invalid {
  outline: none;
  border-color: var(--red-2);
  box-shadow: 0 0 5px var(--red-1);
}
.new-generic-popup .generic-popup-content button .loading-spinner {
  width: 15px !important;
  height: 15px !important;
}
.new-generic-popup .generic-popup-content .state-html-container {
  animation: fade-in 0.2s linear;
  animation-iteration-count: 1;
  text-align: center;
}
.new-generic-popup .generic-popup-content .error-msg {
  font-weight: bold;
  color: var(--red-1);
  white-space: pre;
  font-size: 11px;
  margin-top: 5px;
}
.new-generic-popup .generic-popup-content .loading-spinner {
  height: 50px;
  width: 50px;
  border-top: 2px solid #cccccc;
  border-right: 2px solid #cccccc;
  border-radius: 50%;
  animation: spinner 1s ease-in-out infinite;
}
.new-generic-popup .generic-popup-content .popup-state-msg {
  margin-top: 5px;
}
.new-generic-popup .generic-popup-content .icon-success {
  height: 50px;
  width: 50px;
  background: url("../../icons/icon-check-green.svg");
  margin: 0 auto;
}
.new-generic-popup .generic-popup-content .icon-error {
  height: 50px;
  width: 50px;
  background: url("../../icons/icon-cross-alt-red.svg");
  margin: 0 auto;
}
@keyframes spinner {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@media only screen and (max-width: 960px) {
  .new-generic-popup .generic-popup-content {
    min-width: calc(100vw - var(--screen-edge-margins) * 2);
  }
}

/* Overriding OLD portal styling */
.panel *,
.noticeboard *,
#modal-noticeboard *,
.modal * {
  box-sizing: border-box !important;
}
.panel .header,
.noticeboard .header,
#modal-noticeboard .header,
.modal .header {
  height: 60px;
  border-radius: 5px 5px 0 0;
  background: var(--blue-1);
  color: #ffffff;
}
.panel .header .inner,
.noticeboard .header .inner,
#modal-noticeboard .header .inner,
.modal .header .inner {
  align-items: center;
}
.panel .header .right_button,
.noticeboard .header .right_button,
#modal-noticeboard .header .right_button,
.modal .header .right_button {
  margin: 0 0 0 auto !important;
  cursor: pointer;
}
.panel .header .back,
.noticeboard .header .back,
#modal-noticeboard .header .back,
.modal .header .back {
  display: block !important;
}
.panel .header .icon,
.noticeboard .header .icon,
#modal-noticeboard .header .icon,
.modal .header .icon {
  margin-right: 0px;
}
.panel .header .icon,
.panel .header .label,
.panel .header .inner,
.noticeboard .header .icon,
.noticeboard .header .label,
.noticeboard .header .inner,
#modal-noticeboard .header .icon,
#modal-noticeboard .header .label,
#modal-noticeboard .header .inner,
.modal .header .icon,
.modal .header .label,
.modal .header .inner {
  background: rgba(0, 0, 0, 0) !important;
  margin-top: 0px;
}
.panel .header .right_button,
.noticeboard .header .right_button,
#modal-noticeboard .header .right_button,
.modal .header .right_button {
  height: 48px;
}
.panel .header h6,
.noticeboard .header h6,
#modal-noticeboard .header h6,
.modal .header h6 {
  margin-top: 0px;
}
.panel .header #notice_date,
.noticeboard .header #notice_date,
#modal-noticeboard .header #notice_date,
.modal .header #notice_date {
  color: #ffffff;
}
.panel .body .text,
.noticeboard .body .text,
#modal-noticeboard .body .text,
.modal .body .text {
  font-size: 14px;
}
.panel .button,
.noticeboard .button,
#modal-noticeboard .button,
.modal .button {
  float: none;
  line-height: inherit;
  background: none;
}
.panel .title,
.noticeboard .title,
#modal-noticeboard .title,
.modal .title {
  font-size: 14px;
  display: flex;
}
.panel .title.cufon,
.noticeboard .title.cufon,
#modal-noticeboard .title.cufon,
.modal .title.cufon {
  margin-left: 12px !important;
}
.panel .textContainer .title,
.noticeboard .textContainer .title,
#modal-noticeboard .textContainer .title,
.modal .textContainer .title {
  color: #666;
}
.panel .menu,
.noticeboard .menu,
#modal-noticeboard .menu,
.modal .menu {
  top: 0px;
  left: 0px;
}
.panel .footer,
.noticeboard .footer,
#modal-noticeboard .footer,
.modal .footer {
  height: auto;
  background: none;
  position: inherit;
  margin-top: 0px;
  color: inherit;
}
.panel .footer .column,
.noticeboard .footer .column,
#modal-noticeboard .footer .column,
.modal .footer .column {
  width: 100%;
}
.panel .footer .row,
.noticeboard .footer .row,
#modal-noticeboard .footer .row,
.modal .footer .row {
  margin-bottom: 0px;
}
.panel .footer .row .textarea,
.noticeboard .footer .row .textarea,
#modal-noticeboard .footer .row .textarea,
.modal .footer .row .textarea {
  margin-bottom: 20px;
}
.panel .footer .row #submit-btn,
.noticeboard .footer .row #submit-btn,
#modal-noticeboard .footer .row #submit-btn,
.modal .footer .row #submit-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  float: none;
  margin: 0;
}
.panel .label,
.noticeboard .label,
#modal-noticeboard .label,
.modal .label {
  margin-bottom: 0px;
}
.panel #noticeboard_empty,
.noticeboard #noticeboard_empty,
#modal-noticeboard #noticeboard_empty,
.modal #noticeboard_empty {
  text-align: center;
  margin-top: 10px;
}

/* JO - BOXES
-----------------------------------------------------------------------------*/
.box_top,
.box {
  border-radius: 5px 5px 0 0;
  box-sizing: initial;
}

.loading {
  margin-left: 0px !important;
  margin-top: 0px !important;
}

.mddtp-picker {
  text-align: left !important;
}

.form_item .text, .form_item .form_label {
  line-height: 22px;
}

.form_field .form_label {
  line-height: 22px;
}

/* Home page
-------------------------------------------------- */
body.home {
  background: #f7f7f7;
}
body.home main .leftCol {
  float: left;
  width: 70%;
  max-width: calc(100% - 300px);
  padding-right: 48px;
  text-align: center;
}
body.home main .leftCol .viewAll {
  width: 100%;
  max-width: 400px;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}
body.home main .leftCol .viewAll > .inner {
  transition: box-shadow 0.2s linear;
  box-shadow: 0px 3px 4.7px 0.3px rgba(0, 0, 0, 0.24), 0px 2px 5.88px 0.12px rgba(0, 0, 0, 0.16);
}
body.home main .rightCol {
  float: left;
  width: 30%;
  min-width: 300px;
}
@media (max-width: 1048px) {
  body.home main {
    background: #f7f7f7;
  }
  body.home main .leftCol {
    width: 100%;
    padding-right: 0;
    max-width: 100%;
    min-width: 0;
  }
  body.home main .rightCol {
    display: none;
  }
}
body.home main .ajax-empty {
  text-align: center;
  width: 100%;
  margin-top: 24px;
}
@media (max-width: 1048px) {
  body.home main .ajax-empty {
    margin-top: 40px;
    margin-bottom: 8px;
    font-size: 16px;
    font-weight: 400;
    letter-spacing: 0.15px;
    line-height: 24px;
    clear: both;
    display: block;
  }
  body.home main .ajax-empty::before {
    display: block;
    content: "";
    margin-top: -2px;
  }
  body.home main .ajax-empty::after {
    display: block;
    content: "";
    margin-bottom: -6px;
  }
  body.home main .ajax-empty {
    font-weight: 600;
  }
}/*# sourceMappingURL=style.css.map */